/* UniAdmin — custom styles (lightweight, no framework dependency) */

:root {
  --brand-50: #f4fbf6;
  --brand-100: #e7f6ed;
  --brand-200: #cdeed8;
  --brand-300: #a7f3d0;
  --brand-400: #84cc16;
  --brand-500: #15803d;
  --brand-600: #166534;
  --brand-700: #14532d;
  --brand-800: #0f3d22;
  --brand-900: #0f3d22;
  --apple-green: #34c759;
  --mint: #eef7f1;
  --forest: #166534;
  --lime: #a3e635;
  --teal: #14b8a6;
  --radius: 0.75rem;
}

* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

body {
  background-color: #eef7f1;
  background-image:
    radial-gradient(60rem 60rem at 110% -10%, rgba(163,230,53,0.12), transparent 60%),
    radial-gradient(50rem 50rem at -12% 112%, rgba(20,184,166,0.10), transparent 55%),
    radial-gradient(40rem 40rem at 50% 125%, rgba(134,239,172,0.10), transparent 60%);
  background-attachment: fixed;
}

/* Keep real content above the ambient glow (glow is body background, so just
   relative positioning is enough — no forced z-index, which would otherwise
   trap the fixed sidebar inside a low stacking context below the backdrop) */
body > * { position: relative; }

/* Ambient glow hidden globally; pages use the mint gradient above */
body::before, body::after { display: none; }

/* Card shadow (premium, layered) */
.shadow-soft {
  box-shadow: 0 1px 3px rgba(15,61,34,0.05), 0 10px 30px -16px rgba(15,61,34,0.20);
}
/* Cohesive card hover lift inside page content (not the sidebar).
   No `transform` here on purpose: transform creates a new stacking context,
   which broke searchable-select (Choices.js) dropdowns opened inside a
   hovered card — their list would render under sibling content. */
@media (hover: hover) {
  main .shadow-soft { transition: box-shadow .2s ease; }
  main .shadow-soft:hover {
    box-shadow: 0 16px 36px -16px rgba(15,61,34,0.28);
  }
}

/* Accessible focus ring */
:focus-visible {
  outline: 2px solid #84cc16;
  outline-offset: 2px;
  border-radius: 0.5rem;
}
@keyframes drift-a {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(3rem, 4rem) scale(1.15); }
}
@keyframes drift-b {
  from { transform: translate(0, 0) scale(1.1); }
  to   { transform: translate(-4rem, -3rem) scale(1); }
}

/* Form inputs */
.form-input {
  transition: box-shadow .15s ease, border-color .15s ease;
}
.form-input:focus {
  outline: none;
}
.form-input::placeholder { color: #94a3b8; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: .875rem;
  transition: all .15s ease;
  cursor: pointer;
}
.btn-primary {
  background: linear-gradient(135deg, var(--brand-600), var(--brand-700));
  color: #fff;
  box-shadow: 0 10px 25px -10px rgba(79,70,229,.6);
}
.btn-primary:hover { filter: brightness(1.06); }

/* Card entrance animation */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-up { animation: fade-up .5s cubic-bezier(.16,1,.3,1) both; }

/* Sidebar active item */
.nav-link.active {
  background: var(--brand-50);
  color: var(--brand-700);
}
.nav-link.active .nav-icon { color: var(--brand-600); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: content-box; }

/* Tables */
.table-row:hover { background: var(--surface-3); }
.dark .table-row:hover { background: var(--surface-3); }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ====== Component library ====== */

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 0.125rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25rem;
}
.badge-emerald { background: #ecfdf5; color: #047857; }
.badge-amber   { background: #fffbeb; color: #b45309; }
.badge-rose    { background: #fff1f2; color: #be123c; }
.badge-brand   { background: var(--brand-50); color: var(--brand-700); }
.badge-slate   { background: #f1f5f9; color: #475569; }
.badge-sky     { background: #eff6ff; color: #1d4ed8; }
.badge-forest  { background: #dcfce7; color: #166534; }
.badge-lime    { background: #f7fee7; color: #4d7c0f; }

/* soft badge variants (used on kanban cards) */
.badge-soft-success { background: #dcfce7; color: #166534; }
.badge-soft-info    { background: #eff6ff; color: #1d4ed8; }
.badge-soft-warn    { background: #fffbeb; color: #b45309; }
.badge-soft-danger  { background: #fff1f2; color: #be123c; }

/* kanban */
.kanban-card:active { cursor: grabbing; }

/* Tags */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 0.5rem;
  border: 1px solid #e2e8f0;
  background: #fff;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #475569;
}

/* Alerts */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
}
.alert-info    { background: #eff6ff; color: #1e40af; }
.alert-success { background: #ecfdf5; color: #065f46; }
.alert-warning { background: #fffbeb; color: #92400e; }
.alert-error   { background: #fff1f2; color: #9f1239; }

/* Progress */
.progress {
  width: 100%;
  height: 0.5rem;
  border-radius: 9999px;
  background: #e2e8f0;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  border-radius: 9999px;
  transition: width .4s ease;
}

/* Spinner */
.spinner {
  display: inline-block;
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 9999px;
  animation: spin .7s linear infinite;
}
.spinner-sm { width: 0.8rem; height: 0.8rem; }
.spinner-emerald { color: #10b981; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Switch toggle */
.switch { position: relative; display: inline-block; width: 2.5rem; height: 1.4rem; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute; cursor: pointer; inset: 0;
  background: #cbd5e1; border-radius: 9999px; transition: .2s;
}
.slider::before {
  content: ""; position: absolute; height: 1rem; width: 1rem;
  left: 0.2rem; top: 0.2rem; background: #fff; border-radius: 9999px; transition: .2s;
}
.switch input:checked + .slider { background: var(--brand-600); }
.switch input:checked + .slider::before { transform: translateX(1.1rem); }

/* Tabs */
.tab {
  border: none;
  background: none;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #64748b;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.tab.active { color: var(--brand-700); border-bottom-color: var(--brand-600); }

/* Accordion */
.acc-trigger .rotate { transform: rotate(180deg); }

/* Pagination */
.pagination-btn {
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #475569;
  border: 1px solid #e2e8f0;
  background: #fff;
  transition: .15s;
}
.pagination-btn:hover { background: var(--surface-3); }
.dark .pagination-btn:not(.active):hover { background: var(--surface-3); }
.pagination-btn.active { background: var(--brand-600); color: #fff; border-color: var(--brand-600); }

/* Modal animation */
.modal-card { animation: modal-in .26s cubic-bezier(.16,1,.3,1) both; }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Toast */
.toast {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  min-width: 18rem;
  max-width: 22rem;
  border-radius: 0.75rem;
  border: 1px solid #e2e8f0;
  background: #fff;
  padding: 0.875rem 1rem;
  box-shadow: 0 10px 30px -12px rgba(15,23,42,.25);
  animation: toast-in .3s cubic-bezier(.16,1,.3,1) both;
}
.toast.leaving { animation: toast-out .24s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes toast-in  { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(20px); } }

/* ============================================================
   DARK MODE — semantic token layer + Tailwind utility overrides
   Toggled by adding `.dark` to <html>. No per-page edits needed.
   ============================================================ */
:root {
  --surface:   #ffffff;
  --surface-2: #f4fbf6;   /* mint-50  */
  --surface-3: #e7f6ed;   /* mint-100 */
  --ink:       #0f3d22;   /* forest-800 */
  --ink-soft:  #14532d;   /* forest-700/600 */
  --ink-muted: #47635a;   /* forest-500 */
  --border:    #e7f6ed;   /* mint-200 */
  --border-2:  #d8ecdf;   /* mint-100 */
  --ring:      #cdeed8;   /* mint-200 */
  --header-bg: rgba(244,251,246,.82);
  --app-bg-1: #ecfdf3;
  --app-bg-2: #effdf8;
}
.dark {
  --surface:   #121e18;
  --surface-2: #16241d;
  --surface-3: #1d2f26;
  --ink:       #e8f1ea;
  --ink-soft:  #bcd4c8;
  --ink-muted: #8aa89c;
  --border:    #22352b;
  --border-2:  #2c4234;
  --ring:      #2c4234;
  --header-bg: rgba(13,23,18,.82);
  --app-bg-1: #0c140f;
  --app-bg-2: #0a110d;
}

html { background: var(--app-bg-1); }
body {
  background-color: var(--app-bg-1);
  background-image:
    radial-gradient(1200px 600px at 100% -10%, rgba(132,204,22,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(20,184,166,.10), transparent 55%);
}
.dark body {
  background-color: var(--app-bg-1);
  background-image:
    radial-gradient(1200px 600px at 100% -10%, rgba(132,204,22,.12), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(20,184,166,.10), transparent 55%);
}

/* ---- surfaces ---- */
.dark .bg-white,
.dark .bg-white\/80,
.dark .bg-white\/90 { background-color: var(--surface); }

.dark .bg-mint-50,
.dark .bg-mint-50\/40,
.dark .bg-mint-50\/50,
.dark .bg-mint-50\/60,
.dark .bg-mint-50\/70 { background-color: var(--surface-2); }

.dark .bg-mint-100,
.dark .bg-mint-100\/60,
.dark .bg-mint-100\/70,
.dark .bg-mint-100\/80 { background-color: var(--surface-3); }

.dark .bg-mint-200,
.dark .bg-mint-200\/80 { background-color: var(--surface-3); }

.dark .bg-emerald-50 { background-color: rgba(16,185,129,.14); }
.dark .bg-rose-50    { background-color: rgba(244,63,94,.14); }
.dark .bg-teal-50    { background-color: rgba(20,184,166,.14); }

/* ---- borders / rings / dividers ---- */
.dark .border-mint-200,
.dark .border-mint-200\/70 { border-color: var(--border); }
.dark .border-mint-100     { border-color: var(--border-2); }

.dark .ring-mint-200,
.dark .ring-mint-200\/70 { --tw-ring-color: var(--ring); }

.dark .divide-mint-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border-2); }

/* ---- text ---- */
.dark .text-forest-800 { color: var(--ink); }
.dark .text-forest-700 { color: var(--ink-soft); }
.dark .text-forest-600,
.dark .text-forest-600\/80,
.dark .text-forest-600\/70 { color: var(--ink-soft); }
.dark .text-forest-500,
.dark .text-forest-500\/80,
.dark .text-forest-500\/70,
.dark .text-forest-500\/60,
.dark .text-forest-500\/50,
.dark .text-forest-500\/45 { color: var(--ink-muted); }

.dark .placeholder\:text-forest-500\/50::placeholder { color: var(--ink-muted); }

/* ---- form controls ---- */
.dark input,
.dark textarea,
.dark select { color: var(--ink); }
.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.dark textarea,
.dark select { background: var(--surface-2); border-color: var(--border); }
.dark input::placeholder,
.dark textarea::placeholder { color: var(--ink-muted); }

/* ---- sidebar sticky footer ---- */
.sidebar-footer { background: linear-gradient(to bottom, rgba(244,251,246,0), #eef7f1 45%); }
.sf-card { background: rgba(255,255,255,0.7); border: 1px solid #cdeed8; }
.dark .sidebar-footer { background: linear-gradient(to bottom, rgba(17,37,26,0), #0c1d14 45%); }
.dark .sf-card { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.10); }

/* ---- chrome ---- */
.dark header { background: var(--header-bg); }
.dark .toast { background: var(--surface); border-color: var(--border); box-shadow: 0 10px 30px -12px rgba(0,0,0,.5); }
.dark .toast div { color: var(--ink-soft); }

/* ---- smooth theme transition (only while switching) ---- */
.theme-anim,
.theme-anim *,
.theme-anim *::before,
.theme-anim *::after {
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, fill .25s ease, box-shadow .25s ease !important;
}

/* Loading skeleton */
.skeleton {
  background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2));
  background-size: 200% 100%;
  animation: shimmer 1.2s ease-in-out infinite;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Charts */
.chart-axis { stroke: var(--border-2); }
.chart-label { fill: var(--ink-muted); font-size: 11px; font-weight: 500; }
.bar-grow { transform-box: fill-box; transform-origin: bottom; animation: barGrow .7s cubic-bezier(.16,1,.3,1) both; }
@keyframes barGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.donut-seg { transition: stroke-dasharray .6s ease; }

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* Print: hide chrome, show content cleanly */
@media print {
  #sidebar, header, #commandPalette, #ecModal, #sidebarBackdrop, .no-print { display: none !important; }
  body { background: #fff !important; }
  main, [role="main"] { overflow: visible !important; }
  .shadow-soft, .shadow-2xl { box-shadow: none !important; }
  .rounded-2xl, .rounded-xl { border: 1px solid #e2e8f0 !important; }
}

/* Settings: theme chooser */
.theme-opt {
  border: 1px solid var(--border);
  background: var(--surface-2);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.theme-opt.active {
  border-color: var(--brand-600);
  box-shadow: 0 0 0 2px var(--brand-600);
  background: var(--surface-3);
}

/* ====== Generic component utilities ====== */

/* Button variants / sizes */
.btn-secondary {
  background: var(--surface);
  color: var(--brand-700);
  border: 1px solid var(--border);
}
.btn-secondary:hover { background: var(--surface-3); }
.btn-ghost { background: transparent; color: var(--brand-700); }
.btn-ghost:hover { background: var(--surface-3); }
.btn-danger {
  background: #ef4444; color: #fff;
  box-shadow: 0 10px 25px -10px rgba(239,68,68,.6);
}
.btn-danger:hover { filter: brightness(1.06); }
.btn-sm { padding: .4rem .8rem; font-size: .8rem; }
.btn-lg { padding: .7rem 1.3rem; font-size: .95rem; }

/* Tooltip */
[data-tip] { position: relative; }
[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; z-index: 50;
  bottom: calc(100% + .4rem); left: 50%; transform: translateX(-50%);
  white-space: nowrap;
  padding: .3rem .55rem; border-radius: .4rem;
  background: #0f3d22; color: #fff; font-size: .72rem; font-weight: 500;
  box-shadow: 0 8px 20px -8px rgba(0,0,0,.4);
  pointer-events: none;
}
[data-tip]:hover::before {
  content: ""; position: absolute; z-index: 50;
  bottom: calc(100% + .05rem); left: 50%; transform: translateX(-50%);
  border: .35rem solid transparent; border-top-color: #0f3d22;
  pointer-events: none;
}

/* Avatar group */
.avatar-group { display: inline-flex; align-items: center; }
.avatar-group > * {
  border: 2px solid var(--surface);
  margin-left: -.55rem;
  border-radius: 9999px;
}
.avatar-group > *:first-child { margin-left: 0; }

/* Timeline */
.timeline { position: relative; padding-left: 1.5rem; }
.timeline::before {
  content: ""; position: absolute; left: .4rem; top: .25rem; bottom: .25rem;
  width: 2px; background: var(--border-2);
}
.timeline-item { position: relative; padding-bottom: 1.25rem; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: ""; position: absolute; left: -.95rem; top: .3rem;
  width: .7rem; height: .7rem; border-radius: 9999px;
  background: var(--brand-600); box-shadow: 0 0 0 3px var(--surface);
}

/* Native checkbox / radio / range accent */
.form-input[type="checkbox"],
.form-input[type="radio"] { accent-color: var(--brand-600); width: 1rem; height: 1rem; }
input[type="range"] {
  accent-color: var(--brand-600);
  height: .35rem; border-radius: 9999px; background: var(--border-2); width: 100%;
}

/* Empty state */
.empty-state { text-align: center; padding: 2.5rem 1rem; }

/* Reusable dropdown menu */
.menu {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: .75rem;
  padding: .35rem;
  box-shadow: 0 10px 30px -16px rgba(15,61,34,.25);
  min-width: 12rem;
}
.dark .menu { box-shadow: 0 10px 30px -16px rgba(0,0,0,.5); }
.menu-item {
  display: flex; align-items: center; gap: .5rem;
  width: 100%; padding: .5rem .6rem; border-radius: .5rem;
  font-size: .875rem; color: var(--ink-soft); cursor: pointer; transition: background .15s;
}
.menu-item:hover { background: var(--surface-3); }
.menu-divider { height: 1px; background: var(--border); margin: .35rem 0; }

/* ============================================================
   Smooth motion layer
   - consistent easing, gentle entrances for overlays/menus
   - all guarded by prefers-reduced-motion below
   ============================================================ */
:root {
  --ease-smooth: cubic-bezier(.16, 1, .3, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

html { scroll-behavior: smooth; }

/* Sidebar slide — softer and a touch longer */
#sidebar {
  transition-duration: .35s;
  transition-timing-function: var(--ease-smooth);
}
#sidebarBackdrop:not(.hidden) {
  animation: co-fade .3s var(--ease-smooth) both;
}

/* Dropdown menus (profile / notifications) */
#notificationMenu:not(.hidden),
#profileMenu:not(.hidden) {
  animation: co-menu-in .18s var(--ease-smooth) both;
}

/* Expanding/collapsing nav groups (any nesting depth). layout.js drives the
   actual max-height value via inline style — a CSS transition can't animate
   to/from `auto`, and only the pixel value it sets before/after removing or
   re-adding Tailwind's `.hidden` (display:none) is what makes both the
   expand *and* the collapse direction animate, not just expand like before. */
.nav-group-children {
  overflow: hidden;
  transition: max-height .28s var(--ease-smooth), opacity .2s var(--ease-smooth);
}

/* Command palette */
#commandBackdrop { animation: co-fade .18s ease both; }
#commandPalette:not(.hidden) > div.relative {
  animation: co-pop-in .22s var(--ease-smooth) both;
}
/* keep the palette's search input transparent in dark mode — it must not
   inherit the global `.dark input { background: var(--surface-2) }` fill */
.dark #commandInput { background-color: transparent; }

/* Smoother hover feedback on nav + buttons */
#sidebar .nav-link,
.btn { transition-timing-function: var(--ease-smooth); }

@keyframes co-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes co-menu-in {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes co-pop-in {
  from { opacity: 0; transform: translateY(-8px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  #sidebarBackdrop:not(.hidden),
  #notificationMenu:not(.hidden),
  #profileMenu:not(.hidden),
  #commandBackdrop,
  #commandPalette:not(.hidden) > div.relative {
    animation: none !important;
  }
  .nav-group-children {
    transition: none !important;
  }
  html { scroll-behavior: auto; }
}

/* ============================================================
   Sidebar — same light/dark surface as the rest of the app (the
   template's own look: white chrome in light mode, dark surface in
   dark mode), driven by the semantic tokens defined above (`--ink*`/
   `--surface*`/`--border*`, already redefined inside `.dark {}`).
   Tailwind here is a precompiled static file (public/assets/css/
   tailwind.css) with no live build step, so new bg-*/text-* utility
   classes would compile to nothing — these bits (nav icon chips,
   active-route state, group-toggle highlight) have no direct utility-
   class equivalent already on the markup, so they're plain CSS here,
   scoped by the #sidebar id. `#sidebar`'s own background/border and
   `.sidebar-brand-title`/`.sidebar-divider`/`.sidebar-footer` colors
   come from the plain `bg-white`/`border-mint-200/70`/etc utility
   classes already on the markup (theme-aware via the retargeting
   rules above) — no override needed for those.
   ============================================================ */
#sidebar .nav-link,
#sidebar .nav-group-toggle {
  color: var(--ink-soft);
}
#sidebar .nav-link:hover,
#sidebar .nav-group-toggle:hover {
  background-color: var(--surface-3);
  color: var(--ink);
}
#sidebar .nav-icon {
  background-color: var(--surface-3);
  color: var(--ink-muted);
}
#sidebar .nav-link:hover .nav-icon,
#sidebar .nav-group-toggle:hover .nav-icon {
  background-color: var(--border-2);
  color: var(--ink-soft);
}
#sidebar .nav-chevron { color: var(--ink-muted); }
#sidebar .nav-group-children { border-color: var(--border); }
#sidebar .nav-dot { background-color: var(--border-2); }
#sidebar .nav-link:hover .nav-dot { background-color: #a3e635; }

/* Active route (layout.js toggles `.is-active` on the matching link
   and its ancestor group toggles — see buildCommands()/highlighting
   section there) */
#sidebar .is-active {
  background-color: var(--surface-3);
  color: var(--ink);
  font-weight: 600;
}
#sidebar .is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 1.6rem;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, #a3e635, #14b8a6);
}
#sidebar .is-active .nav-icon {
  background-color: var(--border-2);
  color: var(--ink);
}
#sidebar .is-active .nav-chevron { color: var(--ink); }

/* Group toggles ("main items" like "Manage User") signal "this section is
   active", not just "this exact link is active" — give the toggle a
   stronger, self-contained highlight (forest gradient, white text),
   matching the template's own "Interface" active-group treatment,
   distinct from a leaf .nav-link's plain tint. Same in both themes —
   a saturated gradient block doesn't need a separate dark variant. */
#sidebar .nav-group-toggle.is-active {
  background: linear-gradient(to right, var(--brand-600), var(--brand-700));
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 61, 34, .15);
}
#sidebar .nav-group-toggle.is-active .nav-icon {
  background-color: rgba(255, 255, 255, .2);
  color: #ffffff;
}
#sidebar .nav-group-toggle.is-active .nav-chevron { color: rgba(255, 255, 255, .85); }

/* Registration sub-nav (Registration/Add-Drop/Retake/Report/Student Report
   tabs) — its active tab used the `bg-forest-800` Tailwind utility, which
   isn't in the precompiled public/assets/css/tailwind.css (same static-file
   constraint noted above), so the "active" background never rendered; the
   `text-white` label sat invisible on the tab strip's own white background
   in light mode (only visible in dark mode by coincidence, over the dark
   surface). Plain CSS instead, mirroring `.nav-group-toggle.is-active`. */
.registration-subnav-link.is-active {
  background: linear-gradient(to right, var(--brand-600), var(--brand-700));
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 61, 34, .15);
}

/* ============================================================
   Dark mode: retarget light-only hover utilities
   Tailwind compiles hover:bg-* / hover:text-* / group-hover:* with
   light colors, so in .dark they look white. Override them here.
   ============================================================ */
.dark .hover\:bg-mint-50:hover { background-color: var(--surface-2); }

.dark .hover\:bg-mint-100:hover,
.dark .hover\:bg-mint-100\/60:hover,
.dark .hover\:bg-mint-100\/70:hover,
.dark .hover\:bg-mint-200:hover,
.dark .group:hover .group-hover\:bg-mint-200\/80 { background-color: var(--surface-3); }

.dark .hover\:bg-rose-50:hover { background-color: rgba(244,63,94,.16); }
.dark .hover\:bg-white:hover,
.dark .hover\:bg-white\/25:hover { background-color: var(--surface-3); }

.dark .hover\:text-forest-500:hover { color: var(--ink-muted); }
.dark .hover\:text-forest-700:hover { color: var(--ink-soft); }
.dark .hover\:text-forest-800:hover { color: var(--ink); }
.dark .group:hover .group-hover\:text-forest-600 { color: var(--ink-soft); }

/* ============================================================
   Form validation error alert (login, etc.)
   ============================================================ */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* ============================================================
   Choices.js (searchable select — District/Country, etc.)
   The widget renders its own DOM outside the site's input markup,
   so it never picks up the form-input ring/dark classes. Retarget
   its CSS custom properties to the app's surface/ink tokens
   (defined above) instead of the library's light-only defaults —
   these tokens already flip under .dark, so no separate dark
   block is needed here.
   ============================================================ */
.choices {
  --choices-bg-color: var(--surface);
  --choices-bg-color-dropdown: var(--surface);
  --choices-bg-color-disabled: var(--surface-3);
  --choices-text-color: var(--ink);
  --choices-keyline-color: var(--border);
  --choices-highlighted-color: var(--surface-3);
  --choices-border-radius: 0.5rem;
  --choices-placeholder-opacity: 0.6;
  margin-bottom: 0;
}
.choices.is-open {
  position: relative;
  z-index: 60;
}
.choices__inner,
.choices__list--dropdown,
.choices__list[aria-expanded] {
  border-color: var(--border) !important;
}
.choices__list--dropdown,
.choices__list[aria-expanded] {
  box-shadow: 0 10px 30px -14px rgba(15,61,34,0.25);
}
.dark .choices__list--dropdown,
.dark .choices__list[aria-expanded] {
  box-shadow: 0 10px 30px -14px rgba(0,0,0,0.55);
}
.choices__input {
  color: var(--ink);
}