/* ===== CSS Variables (shadcn-inspired) ===== */
:root {
    /* Colors */
    --background: #ffffff;
    --foreground: #0f0f0f;
    --muted: #f4f4f5;
    --muted-foreground: #71717a;
    --border: #e4e4e7;
    --input: #e4e4e7;
    --primary: #18181b;
    --primary-foreground: #fafafa;
    --secondary: #f4f4f5;
    --secondary-foreground: #18181b;
    --destructive: #ef4444;
    --destructive-foreground: #fafafa;
    --accent: #f4f4f5;
    --accent-foreground: #18181b;
    --ring: #18181b;

    /* Spacing & Sizing */
    --radius: 0.5rem;
}

/* ===== Base Styles ===== */
html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    margin-bottom: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--foreground);
    background-color: var(--background);
}

/* ===== Focus States ===== */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--ring);
}

/* ===== App Layout ===== */
.app-layout {
  display: flex;
  min-height: 100vh;
}

.main-content {
  flex: 1;
  padding: 2rem;
  background-color: #f8f9fa;
  overflow-y: auto;
  margin-left: 260px;
}