/* =====================================================================
   GuidTect - Shared Theme Tokens
   Include this AFTER the Tailwind CDN script on every dashboard:
     <link rel="stylesheet" href="theme.css">

   One palette, one radius scale, one set of component classes. Every
   dashboard (college, high school, secretary, student) reads from here
   so the teal never drifts between pages.
   ===================================================================== */

:root {
  /* Core teal identity - taken from the existing sidebar colour */
  --gt-primary:        #008080;
  --gt-primary-soft:   #23a8b2;
  --gt-primary-deep:   #006666;
  --gt-primary-tint:   #e6f2f2;
  --gt-primary-ring:   rgba(0, 128, 128, 0.22);

  /* Dark banner surface used at the top of every section */
  --gt-surface-dark:   #0f172a;
  --gt-surface-dark-2: #1e293b;

  /* Neutrals */
  --gt-bg:             #f8fafc;
  --gt-card:           #ffffff;
  --gt-border:         #e2e8f0;
  --gt-text:           #1e293b;
  --gt-text-muted:     #64748b;
  --gt-text-faint:     #94a3b8;

  /* Status colours - used by badges, charts and the report ribbon */
  --gt-success:        #059669;
  --gt-success-tint:   #d1fae5;
  --gt-warning:        #d97706;
  --gt-warning-tint:   #fef3c7;
  --gt-danger:         #dc2626;
  --gt-danger-tint:    #fee2e2;
  --gt-info:           #0891b2;
  --gt-info-tint:      #cffafe;

  /* Chart series - ordered, colour-blind safe within the teal family */
  --gt-chart-1: #008080;
  --gt-chart-2: #23a8b2;
  --gt-chart-3: #0891b2;
  --gt-chart-4: #155e75;
  --gt-chart-5: #14b8a6;
  --gt-chart-6: #0d9488;
  --gt-chart-7: #64748b;

  /* Shape */
  --gt-radius-sm: 0.75rem;
  --gt-radius:    1rem;
  --gt-radius-lg: 1.5rem;
  --gt-shadow:    0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.04);
  --gt-shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.10);
}

/* ---------------------------------------------------------------
   Section banner - the dark header at the top of every view
   --------------------------------------------------------------- */
.gt-banner {
  position: relative;
  overflow: hidden;
  background: var(--gt-surface-dark);
  color: #fff;
  border-radius: var(--gt-radius-lg);
  box-shadow: var(--gt-shadow-lg);
}
.gt-banner::after {
  content: "";
  position: absolute;
  right: -2.5rem;
  top: -2.5rem;
  width: 16rem;
  height: 16rem;
  border-radius: 9999px;
  background: var(--gt-primary);
  opacity: 0.18;
  filter: blur(48px);
  pointer-events: none;
}
.gt-banner > * { position: relative; z-index: 1; }

.gt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  background: rgba(35, 168, 178, 0.12);
  border: 1px solid rgba(35, 168, 178, 0.24);
  color: var(--gt-primary-soft);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.gt-eyebrow .dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background: var(--gt-primary-soft);
}

/* ---------------------------------------------------------------
   Buttons
   --------------------------------------------------------------- */
.gt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border-radius: var(--gt-radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color .15s ease, transform .1s ease, box-shadow .15s ease;
}
.gt-btn:active { transform: scale(0.97); }
.gt-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--gt-primary-ring);
}

.gt-btn-primary {
  background: var(--gt-primary);
  color: #fff;
  box-shadow: 0 8px 20px rgba(0, 128, 128, 0.25);
}
.gt-btn-primary:hover { background: var(--gt-primary-soft); }

.gt-btn-ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px);
}
.gt-btn-ghost:hover { background: rgba(255, 255, 255, 0.16); }

.gt-btn-outline {
  background: var(--gt-card);
  color: var(--gt-primary);
  border-color: var(--gt-border);
}
.gt-btn-outline:hover {
  background: var(--gt-primary-tint);
  border-color: var(--gt-primary);
}

/* Dark form controls sitting inside a banner */
.gt-select-dark {
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(51, 65, 85, 0.8);
  color: #e2e8f0;
  padding: 0.625rem 1rem;
  border-radius: var(--gt-radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  outline: none;
  cursor: pointer;
}
.gt-select-dark:hover  { background: rgba(30, 41, 59, 1); }
.gt-select-dark:focus  { border-color: var(--gt-primary-soft); }

/* ---------------------------------------------------------------
   Cards, tables, badges
   --------------------------------------------------------------- */
.gt-card {
  background: var(--gt-card);
  border: 1px solid var(--gt-border);
  border-radius: var(--gt-radius-lg);
  box-shadow: var(--gt-shadow);
}
.gt-card-tight { border-radius: var(--gt-radius); }

.gt-metric-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gt-text-faint);
}
.gt-metric-value {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--gt-text);
  margin-top: 0.125rem;
}

.gt-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
}
.gt-badge-success { background: var(--gt-success-tint); color: var(--gt-success); }
.gt-badge-warning { background: var(--gt-warning-tint); color: var(--gt-warning); }
.gt-badge-danger  { background: var(--gt-danger-tint);  color: var(--gt-danger); }
.gt-badge-info    { background: var(--gt-info-tint);    color: var(--gt-info); }
.gt-badge-primary { background: var(--gt-primary-tint); color: var(--gt-primary-deep); }

/* ---------------------------------------------------------------
   Sidebar navigation - identical behaviour on all four dashboards
   --------------------------------------------------------------- */
.nav-item {
  transition: background-color .15s ease, color .15s ease;
}
.nav-item:hover        { background: var(--gt-primary-soft) !important; }
.nav-item.gt-nav-active {
  background: var(--gt-primary) !important;
  color: #fff !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}
.nav-item.gt-nav-active .nav-icon,
.nav-item.gt-nav-active i { color: #fff !important; }

/* ---------------------------------------------------------------
   Scrollbar
   --------------------------------------------------------------- */
.custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--gt-primary-soft); }

.sidebar-scrollbar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.22); }
.sidebar-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.36); }

/* ---------------------------------------------------------------
   Drop zone for the bulk student import
   --------------------------------------------------------------- */
.gt-dropzone {
  border: 2px dashed #334155;
  border-radius: var(--gt-radius);
  background: rgba(30, 41, 59, 0.4);
  transition: border-color .15s ease, background-color .15s ease;
  cursor: pointer;
}
.gt-dropzone:hover,
.gt-dropzone.is-dragging {
  border-color: var(--gt-primary-soft);
  background: rgba(35, 168, 178, 0.08);
}

/* ---------------------------------------------------------------
   Motion - one entrance, respected when reduced motion is on
   --------------------------------------------------------------- */
@keyframes gtFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.animate-fade-in { animation: gtFadeIn .28s ease-out; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ---------------------------------------------------------------
   Print - reports and certificates
   --------------------------------------------------------------- */
@media print {
  .gt-banner        { background: #fff !important; color: #000 !important; box-shadow: none !important; }
  .gt-banner::after { display: none !important; }
  .gt-card          { border-color: #cbd5e1 !important; box-shadow: none !important; }
  .gt-no-print,
  aside, header nav { display: none !important; }
  body              { background: #fff !important; }
}

/* =====================================================================
   DARK MODE + APPEARANCE WIDGET
   Activated by the `gt-dark` class on <html> (set by appearance.js).
   ===================================================================== */

:root { --gt-on-primary: #ffffff; }

html.gt-dark {
  --gt-bg:             #0b1220;
  --gt-card:           #131c2e;
  --gt-card-raised:    #1a2438;
  --gt-border:         #2a3855;
  --gt-text:           #e8edf7;
  --gt-text-muted:     #a9b6cc;
  --gt-text-faint:     #8496b0;
  --gt-surface-dark:   #0e1626;
  --gt-surface-dark-2: #18233a;

  --gt-success-tint:   rgba(5,150,105,.20);
  --gt-warning-tint:   rgba(217,119,6,.20);
  --gt-danger-tint:    rgba(220,38,38,.20);
  --gt-info-tint:      rgba(8,145,178,.20);
  --gt-success:        #34d399;
  --gt-warning:        #fbbf24;
  --gt-danger:         #f87171;
  --gt-info:           #38bdf8;

  --gt-shadow:    0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.34);
  --gt-shadow-lg: 0 14px 40px rgba(0,0,0,.5);

  color-scheme: dark;
}

html.gt-dark body { background: var(--gt-bg); color: var(--gt-text); }

/* --- Remap the Tailwind utilities these pages already use -------------
   The dashboards are full of hard-coded bg-white / text-slate-* classes.
   Rather than rewrite thousands of them, we retint them in dark mode. */
html.gt-dark .bg-white          { background-color: var(--gt-card) !important; }
html.gt-dark .bg-slate-50,
html.gt-dark .bg-slate-50\/70,
html.gt-dark .bg-slate-100      { background-color: var(--gt-card-raised) !important; }
html.gt-dark .bg-slate-900,
html.gt-dark .bg-slate-800      { background-color: var(--gt-surface-dark) !important; }

html.gt-dark .text-slate-900,
html.gt-dark .text-slate-800    { color: var(--gt-text) !important; }
html.gt-dark .text-slate-700,
html.gt-dark .text-slate-600    { color: var(--gt-text-muted) !important; }
html.gt-dark .text-slate-500,
html.gt-dark .text-slate-400    { color: var(--gt-text-faint) !important; }
html.gt-dark .text-black        { color: var(--gt-text) !important; }

html.gt-dark .border-slate-100,
html.gt-dark .border-slate-200,
html.gt-dark .border-slate-200\/80,
html.gt-dark .border-slate-200\/85 { border-color: var(--gt-border) !important; }
html.gt-dark .divide-slate-50 > * + *,
html.gt-dark .divide-slate-100 > * + * { border-color: var(--gt-border) !important; }

html.gt-dark .hover\:bg-slate-50:hover,
html.gt-dark .hover\:bg-slate-50\/60:hover,
html.gt-dark .hover\:bg-slate-50\/50:hover { background-color: var(--gt-card-raised) !important; }

html.gt-dark input,
html.gt-dark select,
html.gt-dark textarea {
  background-color: var(--gt-card-raised) !important;
  border-color: var(--gt-border) !important;
  color: var(--gt-text) !important;
}
html.gt-dark input::placeholder,
html.gt-dark textarea::placeholder { color: var(--gt-text-faint) !important; }

/* Pale status pills lose contrast on dark; restate them. */
html.gt-dark .bg-emerald-50,  html.gt-dark .bg-emerald-100 { background-color: rgba(5,150,105,.20) !important; }
html.gt-dark .text-emerald-700, html.gt-dark .text-emerald-600 { color: #34d399 !important; }
html.gt-dark .bg-amber-50  { background-color: rgba(217,119,6,.20) !important; }
html.gt-dark .text-amber-700 { color: #fbbf24 !important; }
html.gt-dark .bg-red-50    { background-color: rgba(220,38,38,.20) !important; }
html.gt-dark .text-red-700, html.gt-dark .text-red-600 { color: #f87171 !important; }
html.gt-dark .bg-purple-50 { background-color: rgba(147,51,234,.20) !important; }
/* Superseded: this hardcoded teal ignored the colour picker. Pale accent
   tints also look wrong in dark mode (a near-white chip on a dark card),
   so they become a translucent accent wash with light accent text. */
html.gt-dark .bg-teal-50, html.gt-dark .bg-teal-100, html.gt-dark .bg-cyan-50,
html.gt-dark .bg-blue-50, html.gt-dark .bg-blue-100,
html.gt-dark .bg-teal-50\/50, html.gt-dark .bg-teal-50\/30 {
  background-color: var(--gt-primary-a10) !important;
}
html.gt-dark .text-teal-600, html.gt-dark .text-teal-700, html.gt-dark .text-teal-800,
html.gt-dark .text-\[\#008080\], html.gt-dark .text-blue-600,
html.gt-dark .text-blue-700, html.gt-dark .text-cyan-600,
html.gt-dark .gt-badge-primary {
  color: var(--gt-primary-onwash, var(--gt-primary-lighter)) !important;
}

/* The printed certificate must stay on white paper in any theme. */
html.gt-dark #printableCertificate {
  background: #ffffff !important;
  color: #000000 !important;
}
html.gt-dark #printableCertificate * { color: #000000 !important; }

/* --- Buttons follow the picked accent ------------------------------- */
.gt-btn-primary { background: var(--gt-primary); color: var(--gt-on-primary); }
.gt-btn-primary:hover { background: var(--gt-primary-soft); }
.gt-btn-outline { color: var(--gt-primary); }

/* =====================================================================
   READABILITY
   The dashboards used 10-11px type with slate-400 on white in places,
   which falls below a comfortable contrast ratio. Raise the floor.
   ===================================================================== */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

.text-\[10px\] { font-size: 11px !important; line-height: 1.45 !important; }
.text-\[11px\] { font-size: 11.5px !important; line-height: 1.5 !important; }
.text-xs       { line-height: 1.55 !important; }

/* slate-400 as body text is too light; nudge it darker in light mode. */
:root:not(.gt-dark) .text-slate-400 { color: #64748b !important; }
:root:not(.gt-dark) .text-slate-500 { color: #475569 !important; }

/* Table headers were uppercase + tracked out + tiny + pale: hard to read. */
thead .tracking-wider { letter-spacing: .04em !important; }
thead th { font-size: 11.5px !important; }

/* Give every focusable element a visible ring for keyboard users. */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gt-primary);
  outline-offset: 2px;
}

/* =====================================================================
   APPEARANCE WIDGET
   ===================================================================== */
.gt-appearance-btn {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .625rem .875rem;
  border-radius: 9999px;
  border: 1px solid var(--gt-border);
  background: var(--gt-card);
  color: var(--gt-text);
  font-size: .8125rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--gt-shadow-lg);
  transition: transform .12s ease, border-color .15s ease;
}
.gt-appearance-btn:hover { transform: translateY(-1px); border-color: var(--gt-primary); }
.gt-appearance-btn svg   { color: var(--gt-primary); }
@media (max-width: 640px) { .gt-appearance-btn-label { display: none; } }

.gt-appearance-panel {
  position: fixed;
  right: 1rem;
  bottom: 4.25rem;
  z-index: 201;
  width: 17.5rem;
  padding: 1rem;
  border-radius: var(--gt-radius);
  border: 1px solid var(--gt-border);
  background: var(--gt-card);
  color: var(--gt-text);
  box-shadow: var(--gt-shadow-lg);
}
.gt-appearance-panel[hidden] { display: none; }

.gt-ap-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .875rem; }
.gt-ap-header h4 { margin: 0; font-size: .9375rem; font-weight: 700; }
.gt-ap-header button {
  background: none; border: none; cursor: pointer;
  font-size: 1.25rem; line-height: 1; color: var(--gt-text-faint);
}
.gt-ap-header button:hover { color: var(--gt-text); }

.gt-ap-section { margin-bottom: 1rem; }
.gt-ap-label {
  display: block; margin-bottom: .5rem;
  font-size: .75rem; font-weight: 600; color: var(--gt-text-muted);
}

.gt-ap-modes { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.gt-ap-mode {
  padding: .5rem; border-radius: .625rem; cursor: pointer;
  border: 1px solid var(--gt-border); background: transparent;
  color: var(--gt-text); font-size: .8125rem; font-weight: 600;
}
.gt-ap-mode:hover     { border-color: var(--gt-primary); }
.gt-ap-mode.is-active { background: var(--gt-primary); color: var(--gt-on-primary); border-color: var(--gt-primary); }

.gt-ap-swatches { display: flex; flex-wrap: wrap; gap: .5rem; }
.gt-ap-swatch {
  width: 1.75rem; height: 1.75rem; border-radius: 9999px; cursor: pointer;
  border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,.16);
}
.gt-ap-swatch:hover     { transform: scale(1.08); }
.gt-ap-swatch.is-active { border-color: var(--gt-text); }

.gt-ap-custom-row { display: flex; gap: .5rem; align-items: center; }
.gt-ap-custom-row input[type="color"] {
  width: 2.5rem; height: 2.25rem; padding: 0; cursor: pointer;
  border: 1px solid var(--gt-border); border-radius: .5rem; background: none;
}
.gt-ap-custom-row input[type="text"] {
  flex: 1; padding: .5rem .625rem; border-radius: .5rem;
  border: 1px solid var(--gt-border); background: var(--gt-card-raised, #f8fafc);
  color: var(--gt-text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8125rem;
}

.gt-ap-reset {
  width: 100%; padding: .5rem; border-radius: .625rem; cursor: pointer;
  border: 1px solid var(--gt-border); background: transparent;
  color: var(--gt-text-muted); font-size: .8125rem; font-weight: 600;
}
.gt-ap-reset:hover { color: var(--gt-text); border-color: var(--gt-primary); }

@media print { #gt-appearance { display: none !important; } }

/* =====================================================================
   ACCENT PROPAGATION
   The dashboards were built with hard-coded teal/blue Tailwind classes
   and literal #008080 values. Those ignore the colour picker entirely,
   so switching to maroon left teal buttons behind. Rather than rewrite
   thousands of class attributes, map the classes onto the accent
   variables here. Applies in both light and dark mode.
   ===================================================================== */

:root { --gt-primary-onpale:#006666; --gt-primary-onwash:#b8e2e5; --gt-primary-light:#23a8b2; --gt-primary-lighter:#7fd4da;
        --gt-primary-pale:#e6f2f2; --gt-primary-a10:#0080801a;
        --gt-primary-a20:#00808033; --gt-primary-a30:#0080804d; }

/* ---- Solid accent backgrounds ---- */
.bg-teal-400, .bg-teal-500, .bg-teal-600, .bg-teal-700,
.bg-\[\#008080\], .bg-\[\#23a8b2\], .bg-blue-600 {
  background-color: var(--gt-primary) !important;
  color: var(--gt-on-primary, #fff) !important;
}
.hover\:bg-teal-500:hover, .hover\:bg-teal-600:hover, .hover\:bg-teal-700:hover,
.hover\:bg-teal-300:hover, .hover\:bg-\[\#23a8b2\]:hover,
.hover\:bg-\[\#008080\]:hover, .hover\:bg-blue-600:hover {
  background-color: var(--gt-primary-soft) !important;
  color: var(--gt-on-primary, #fff) !important;
}

/* Text sitting on a solid accent must follow the accent's contrast. */
.bg-teal-400 *, .bg-teal-500 *, .bg-teal-600 *, .bg-teal-700 *,
.bg-\[\#008080\] *, .bg-\[\#23a8b2\] *, .bg-blue-600 * {
  color: var(--gt-on-primary, #fff) !important;
}

/* ---- Pale accent tints (light mode chips, icon squares) ---- */
.bg-teal-50, .bg-teal-100, .bg-blue-50, .bg-cyan-50,
.bg-teal-50\/50, .bg-teal-50\/30, .bg-blue-100 {
  background-color: var(--gt-primary-pale) !important;
}
.hover\:bg-teal-50:hover, .hover\:bg-teal-100:hover,
.hover\:bg-blue-100:hover, .group:hover .group-hover\:bg-teal-100 {
  background-color: var(--gt-primary-pale) !important;
}

/* ---- Translucent accent washes ---- */
.bg-teal-500\/10, .bg-\[\#008080\]\/20, .bg-\[\#23a8b2\]\/20,
.hover\:bg-\[\#008080\]\/10:hover { background-color: var(--gt-primary-a10) !important; }
.bg-teal-500\/20 { background-color: var(--gt-primary-a20) !important; }

/* ---- Accent text ---- */
.text-teal-600, .text-teal-700, .text-teal-800, .text-\[\#008080\],
.text-blue-600, .text-blue-700, .text-cyan-600 {
  color: var(--gt-primary-onpale, var(--gt-primary)) !important;
}

.text-teal-300, .text-teal-400, .text-blue-200, .text-teal-200,
.placeholder\:text-teal-400::placeholder { color: var(--gt-primary-light) !important; }

.text-teal-50, .text-teal-100, .text-teal-200\/60 { color: var(--gt-primary-lighter) !important; }

.hover\:text-teal-700:hover, .hover\:text-blue-800:hover,
.hover\:text-\[\#008080\]:hover, .group:hover .group-hover\:text-teal-700,
.group:hover .group-hover\:text-teal-600, .group:hover .group-hover\:text-blue-600 {
  color: var(--gt-primary-deep) !important;
}
.hover\:text-teal-300:hover { color: var(--gt-primary-lighter) !important; }

/* ---- Accent borders, focus rings, gradients ---- */
.border-teal-200, .border-teal-300, .border-teal-500\/20, .border-teal-500\/30,
.border-teal-200\/60, .border-teal-200\/70, .border-teal-200\/80,
.border-\[\#008080\], .border-blue-100, .border-blue-400, .border-blue-600 {
  border-color: var(--gt-primary-a30) !important;
}
.focus\:border-teal-400:focus, .focus\:border-teal-500:focus,
.focus\:border-teal-600:focus, .focus\:border-\[\#008080\]:focus,
.hover\:border-teal-200:hover, .hover\:border-blue-400:hover {
  border-color: var(--gt-primary) !important;
}
.focus\:ring-teal-400:focus, .focus\:ring-teal-500:focus,
.focus\:ring-blue-100:focus, .focus\:ring-blue-400:focus {
  --tw-ring-color: var(--gt-primary) !important;
  box-shadow: 0 0 0 3px var(--gt-primary-ring) !important;
}
.from-\[\#008080\], .from-teal-900 { --tw-gradient-from: var(--gt-primary) !important; }
.via-\[\#008080\] { --tw-gradient-via: var(--gt-primary) !important; }
.to-\[\#008080\]  { --tw-gradient-to: var(--gt-primary) !important; }

/* Sidebar active state and brand chrome. */
.nav-item.gt-nav-active, .bg-blue-900 { background-color: var(--gt-primary) !important; }
.checked\:bg-blue-400:checked { background-color: var(--gt-primary) !important; }


/* =====================================================================
   DARK MODE - REMAINING LIGHT SURFACES
   bg-slate-200/300 and the /70-/80 opacity variants were never remapped,
   so they stayed near-white while their text turned light: the note card
   and the "View All Pending Documents" button became white-on-white.
   ===================================================================== */

html.gt-dark .bg-slate-200,
html.gt-dark .bg-slate-300,
html.gt-dark .bg-gray-200,
html.gt-dark .bg-gray-100,
html.gt-dark .bg-white\/80,
html.gt-dark .bg-slate-50\/50,
html.gt-dark .bg-slate-50\/60,
html.gt-dark .bg-slate-50\/70,
html.gt-dark .bg-slate-50\/80 {
  background-color: var(--gt-card-raised) !important;
  color: var(--gt-text) !important;
}
html.gt-dark .bg-slate-200 *,
html.gt-dark .bg-slate-300 *,
html.gt-dark .bg-gray-200 * { color: var(--gt-text) !important; }

html.gt-dark .hover\:bg-slate-100\/70:hover,
html.gt-dark .hover\:bg-slate-100\/80:hover,
html.gt-dark .hover\:bg-slate-50\/50:hover,
html.gt-dark .hover\:bg-slate-50\/60:hover,
html.gt-dark .hover\:bg-white:hover {
  background-color: var(--gt-card-raised) !important;
}

/* Panels already dark in light mode stay dark, just deepened. */
html.gt-dark .bg-slate-700, html.gt-dark .bg-slate-700\/60 { background-color: #223049 !important; }
html.gt-dark .bg-slate-800\/30, html.gt-dark .bg-slate-800\/50,
html.gt-dark .bg-slate-800\/60, html.gt-dark .bg-slate-800\/80 {
  background-color: var(--gt-surface-dark-2) !important;
}

/* White-on-white text guard: any element explicitly set to white text
   that now sits on a raised dark card is fine, but a white pill on a
   pale background is not. Force readable text inside light utilities. */
html.gt-dark .text-white { color: var(--gt-text) !important; }
html.gt-dark .bg-teal-400 .text-white,
html.gt-dark .bg-teal-500 .text-white,
html.gt-dark .bg-teal-600 .text-white,
html.gt-dark .bg-\[\#008080\] .text-white,
html.gt-dark .gt-btn-primary,
html.gt-dark .gt-btn-primary * { color: var(--gt-on-primary, #fff) !important; }

/* Dark banners keep white headings regardless. */
html.gt-dark .gt-banner, html.gt-dark .gt-banner *,
html.gt-dark .bg-slate-900 .text-white,
html.gt-dark .bg-slate-800 .text-white { color: #fff !important; }
html.gt-dark .gt-banner .text-slate-300,
html.gt-dark .gt-banner .text-slate-400 { color: #cbd5e1 !important; }

/* Inputs sitting inside dark banners. */
html.gt-dark .gt-select-dark,
html.gt-dark .gt-select-dark::placeholder { color: #e2e8f0 !important; }

/* Borders that were tuned for a white page. */
html.gt-dark .border-white\/10, html.gt-dark .border-white\/20 {
  border-color: rgba(255,255,255,.14) !important;
}
html.gt-dark .divide-slate-200 > * + * { border-color: var(--gt-border) !important; }

/* Placeholders and muted helper text. */
html.gt-dark ::placeholder { color: var(--gt-text-faint) !important; opacity: 1; }

/* Toast and drawer surfaces. */
html.gt-dark #gt-profile-drawer > div { background: var(--gt-card) !important; }

/* An element carrying BOTH an accent background and .text-white needs a
   compound selector: `html.gt-dark .text-white` (0,2,0) would otherwise
   outrank the background rule (0,1,0) and wash the label out. */
html.gt-dark .bg-teal-400.text-white,  html.gt-dark .bg-teal-500.text-white,
html.gt-dark .bg-teal-600.text-white,  html.gt-dark .bg-teal-700.text-white,
html.gt-dark .bg-\[\#008080\].text-white, html.gt-dark .bg-\[\#23a8b2\].text-white,
html.gt-dark .bg-blue-600.text-white,
html.gt-dark .bg-emerald-600.text-white, html.gt-dark .bg-red-600.text-white,
html.gt-dark .bg-amber-600.text-white {
  color: var(--gt-on-primary, #fff) !important;
}
html.gt-dark .bg-emerald-600, html.gt-dark .bg-red-600,
html.gt-dark .bg-amber-600, html.gt-dark .bg-emerald-500 { color: #fff !important; }