:root{
  /* Brand palette */
  --bs-primary: #3b82f6;           /* Tailwind blue-500 */
  --bs-primary-rgb: 59,130,246;
  --bs-secondary: #64748b;         /* slate-500 */
  --bs-secondary-rgb: 100,116,139;
  --bs-success: #10b981;           /* emerald-500 */
  --bs-success-rgb: 16,185,129;
  --bs-danger: #ef4444;            /* red-500 */
  --bs-danger-rgb: 239,68,68;
  --bs-warning: #f59e0b;           /* amber-500 */
  --bs-warning-rgb: 245,158,11;
  --bs-info: #06b6d4;              /* cyan-500 */
  --bs-info-rgb: 6,182,212;

  /* App surface + text */
  --bs-body-font-family: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --bs-body-color: #0f172a;        /* slate-900 */
  --bs-body-color-rgb: 15,23,42;
  --bs-heading-color: #0b1220;
  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: #1d4ed8;  /* blue-700 */
  --bs-light: #f6f7fb;             /* app background */

  /* App-specific (used by base.css) */
  --brand-gradient: linear-gradient(135deg, #2563eb, #0f172a);
  --brand-gradient-dark: linear-gradient(135deg, #1e293b, #0b1220);
}

/* Global polish */
html, body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Rounded, modern components */
.btn{ border-radius: .5rem; }
.btn-primary{
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary-hover, #2563eb);        /* dynamic hover */
  --bs-btn-hover-border-color: var(--bs-primary-hover, #2563eb);
  --bs-btn-active-bg: #1d4ed8;       /* blue-700 */
  --bs-btn-active-border-color: #1d4ed8;
}
.btn-primary:hover, .btn-primary:focus{
  background: var(--bs-primary-hover, #2563eb) !important;
  border-color: var(--bs-primary-hover, #2563eb) !important;
}
.btn-outline-secondary{
  --bs-btn-color: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-bg: var(--bs-secondary);
  --bs-btn-hover-border-color: var(--bs-secondary);
  --bs-btn-hover-color: #fff;
}

.card{ border-radius: .75rem; box-shadow: 0 8px 24px rgba(15, 23, 42, .06); }
.form-control, .form-select{ border-radius: .5rem; }

/* Navbar color alignment (when using bg-primary) */
.navbar-dark.bg-primary{ background-color: var(--bs-primary) !important; }

/* Public/auth wrappers can rely on app background */
body{ background: var(--bs-light); }
/* Light top app bar for dark mode (matches base.css) */
.dark-mode .sch-header{ background:#1a2230 !important; border-bottom:1px solid #2a3649; }
.dark-mode .sch-main{ border-top: 1px solid rgba(42,54,73,.35); }

/* Dark mode overrides (if site toggles adds .dark-mode) */
.dark-mode{
  --bs-body-color: #e8eaf0;
  --bs-heading-color: #e8eaf0;
  --bs-link-color: #93c5fd;           /* blue-300 */
  --bs-link-hover-color: #60a5fa;     /* blue-400 */
  /* Lightened dark surface */
  --bs-light: #141a22;                /* page bg */
}
.dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4, .dark-mode h5, .dark-mode h6{
  color: var(--bs-heading-color) !important;
}
.dark-mode p, .dark-mode label, .dark-mode li, .dark-mode dt, .dark-mode dd, .dark-mode small, .dark-mode span{
  color: var(--bs-body-color);
}
.dark-mode .form-label, .dark-mode label.form-label{ color:#e9edf6 !important; }
.dark-mode .text-muted{ color:#b6c2d3 !important; }
.dark-mode .lead{ color:#cbd5e1; }
.dark-mode .text-muted{ color:#9aa4b2 !important; }
.dark-mode .text-dark{ color:#e5e7eb !important; }
.dark-mode th, .dark-mode td{ color: var(--bs-body-color); }

/* Common components in dark mode */
.dark-mode .card{ background:#1a2230; color: var(--bs-body-color); box-shadow: 0 8px 28px rgba(0,0,0,.4); }
.dark-mode .card-header{ background:#161d26; color: var(--bs-body-color); border-color:#2a3649; }
/* Specific boost for headers that use bg-light (used in Fees pages) */
.dark-mode .card .card-header.bg-light{ background: linear-gradient(180deg, #223043 0%, #1b2634 100%); color:#f1f5f9; border-bottom:1px solid #2f3d52; }
.dark-mode .bg-body-tertiary{ background-color: #141a22 !important; }
.dark-mode .bg-light{ background-color:#141a22 !important; color:#e5e7eb !important; }
.dark-mode .dropdown-menu{ background:#161d28; color: var(--bs-body-color); border-color:#2a3649; }
.dark-mode .dropdown-item{ color: var(--bs-body-color); }
.dark-mode .dropdown-item:hover{ background:#1a1f2a; color: #fff; }
.dark-mode .form-control, .dark-mode .form-select{ background:#161d24; color: var(--bs-body-color); border-color:#364559; }
.dark-mode .form-control:focus, .dark-mode .form-select:focus{ background:#1a2230; color: var(--bs-body-color); border-color:#3b82f6; box-shadow: 0 0 0 .25rem rgba(59,130,246,.22); }
.dark-mode .input-group-text{ background:#161d24; color:#d5dbea; border-color:#364559; }
.dark-mode .form-check-input{ background-color:#161d24; border-color:#364559; }
.dark-mode .btn-outline-secondary{ --bs-btn-color:#d5dbea; --bs-btn-border-color:#55657c; --bs-btn-hover-bg:#55657c; --bs-btn-hover-border-color:#55657c; --bs-btn-hover-color:#fff; }
.dark-mode .btn-light{ background:#273447; color:#eef1f6; border-color:#364559; }
.dark-mode .btn-light:hover{ background:#2e3c52; color:#fff; border-color:#3b82f6; }

/* Placeholders */
::placeholder{ color:#94a3b8; opacity:.9; }
.dark-mode ::placeholder{ color:#9fb1c6; opacity:.95; }

/* Tabs / Pills */
.dark-mode .nav-pills .nav-link{ background:#111319; color:#cbd5e1; border:1px solid #1f2937; }
.dark-mode .nav-pills .nav-link.active{ background: var(--bs-primary); color:#fff; border-color: transparent; }
.nav-pills .nav-link{ border-radius: 9999px; }

/* Tables */
.dark-mode .table{ --bs-table-bg: #161d24; --bs-table-color: #e9edf6; --bs-table-border-color: #2a3649; }
.dark-mode .table-hover tbody tr:hover{ --bs-table-bg: #1d2633; color:#fff; }
.dark-mode .table-striped>tbody>tr:nth-of-type(odd){ --bs-table-bg: #18202a; }

/* Table header: high contrast and sticky inside responsive wrapper */
.table thead th{
  position: sticky; top: 0; z-index: 2;
  background:#f7f9fc; color:#0f172a; border-bottom:1px solid #e5e7eb;
  font-weight: 600;
}
.dark-mode .table thead th{
  background:#1d2633; color:#e9edf6; border-bottom:1px solid #2a3649;
}
/* Ensure header background covers full width in responsive containers */
.table-responsive{ --sch-th-bg: #f7f9fc; }
.dark-mode .table-responsive{ --sch-th-bg: #1d2633; }
.table-responsive thead th{ background: var(--sch-th-bg); }

/* Modals / Offcanvas */
/* Ensure modals overlay above fixed header/sidebar */
.modal-backdrop{ z-index: 1200 !important; }
.modal{ z-index: 1210 !important; }
.modal .modal-dialog{ z-index: 1211 !important; }
.dark-mode .modal-content{ background:#161d28; color:#e9edf6; border-color:#2a3649; }
.dark-mode .modal-header, .dark-mode .modal-footer{ border-color:#2a3649; }
/* Modal table header/footer background for readability */
.modal .table thead th{ background:#f7f9fc; color:#0f172a; border-bottom:1px solid #e5e7eb; }
.modal .table tfoot td{ background:#f7f9fc; color:#0f172a; border-top:1px solid #e5e7eb; }
.dark-mode .modal .table thead th{ background:#1d2633; color:#e9edf6; border-bottom:1px solid #2a3649; }
.dark-mode .modal .table tfoot td{ background:#1d2633; color:#e9edf6; border-top:1px solid #2a3649; }
/* Inputs inside modal */
.dark-mode .modal input.form-control, .dark-mode .modal select.form-select{ background:#0f1622; color:#e9edf6; border-color:#2a3649; }
.dark-mode .modal input.form-control::placeholder{ color:#94a3b8; }
/* Optional badge tone inside modal */
.dark-mode .modal .badge.bg-info{ background:#3aa9e2 !important; color:#0b1220; }
.dark-mode .offcanvas{ background:#161d28; color:#e9edf6; }

/* Alerts */
.dark-mode .alert{ background:#161d28; color:#e9edf6; border-color:#2a3649; }

/* Badges */
.dark-mode .badge.bg-light, .dark-mode .badge.text-bg-light{ background:#2a3649 !important; color:#e2e8f0 !important; border:1px solid #364559; }
.dark-mode .badge.bg-secondary{ background:#44546a !important; color:#f1f5f9 !important; }

/* Lists / borders / helpers */
.dark-mode .list-group-item{ background:#161d28; color:#e9edf6; border-color:#2a3649; }
.dark-mode .border, .dark-mode .border-top, .dark-mode .border-end, .dark-mode .border-bottom, .dark-mode .border-start{ border-color:#2a3649 !important; }
.dark-mode .form-text{ color:#b2bfd0; }

/* Select options (fallback) */
.dark-mode select option{ background:#161d24; color:#e9edf6; }

/* Focus ring universal (accessibility) */
:focus-visible{ outline: none; box-shadow: 0 0 0 .25rem rgba(59,130,246,.25); }
.dark-mode :focus-visible{ box-shadow: 0 0 0 .25rem rgba(59,130,246,.35); }