/* =========================================================================
   ACAGES UI — global component layer
   Loaded LAST, after AdminLTE/Bootstrap 3 core + acages-tokens.css.
   Restyles the app's existing class vocabulary (.box, .btn, .table,
   .form-control, .dropdown-menu, .main-sidebar, ...) so every one of the
   ~868 CI3 views inherits the new look without per-file edits.
   Structural rebuilds (shell, dashboard, auth) layer additional
   ac-* classes documented inline where introduced.
   ========================================================================= */

/* ---------- 1. base / typography ---------- */

html, body {
  background: var(--ac-bg) !important;
  color: var(--ac-text);
  font-family: var(--ac-font-sans);
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--ac-duration) var(--ac-ease), color var(--ac-duration) var(--ac-ease);
}

body, .content-wrapper, .box, .panel, td, th, .form-control, .btn, p, span, div {
  font-family: var(--ac-font-sans);
}

h1, h2, h3, h4, h5, h6,
.box-title, .page-header, .content-header > h1 {
  font-family: var(--ac-font-display);
  color: var(--ac-text);
  font-weight: 700;
  letter-spacing: -0.01em;
}

a { color: var(--ac-primary); }
a:hover, a:focus { color: var(--ac-primary-700); }

.content-wrapper { background: transparent; }

::selection { background: rgba(var(--ac-primary-rgb), 0.22); }

/* scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--ac-slate-300) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--ac-slate-300); border-radius: var(--ac-radius-full); border: 3px solid transparent; background-clip: content-box; }
body.dark ::-webkit-scrollbar-thumb { background: var(--ac-slate-700); background-clip: content-box; }

/* ---------- 2. layout shell ---------- */

.wrapper { background: var(--ac-bg); }

.main-header,
.main-header .navbar {
  background: linear-gradient(180deg, rgba(var(--ac-primary-rgb), 0.12) 0%, rgba(var(--ac-primary-rgb), 0.03) 70%), var(--ac-glass-bg) !important;
  backdrop-filter: blur(var(--ac-glass-blur));
  -webkit-backdrop-filter: blur(var(--ac-glass-blur));
  border-bottom: 1px solid var(--ac-border);
  box-shadow: none;
  /* NOT setting `position` here: style-main.css already makes .main-header
     `position: fixed` (the sticky topbar) — redeclaring it, even to
     `relative`, would win the cascade (same specificity, loaded later) and
     silently un-stick the header. `fixed` already establishes a valid
     positioning context for the ::after accent line below, so nothing
     extra is needed. */
}

/* thin brand-color accent line under the topbar, echoing the sidebar's
   active-item accent and the dashboard hero gradient — ties the topbar to
   the school's chosen color instead of leaving it neutral */
.main-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--ac-primary) 0%, var(--ac-accent-500) 60%, transparent 100%);
  opacity: 0.55;
  pointer-events: none;
}

.main-header .logo {
  background: transparent !important;
  border-bottom: none;
}

.main-header .sidebar-toggle {
  color: var(--ac-text) !important;
  border-radius: var(--ac-radius-md);
  transition: background var(--ac-duration-fast) var(--ac-ease), color var(--ac-duration-fast) var(--ac-ease);
}
.main-header .sidebar-toggle:hover {
  background: rgba(var(--ac-primary-rgb), 0.10) !important;
  color: var(--ac-primary) !important;
}

.sidebar-session {
  color: var(--ac-text);
  font-weight: 600;
  font-family: var(--ac-font-display);
}

/* topbar icon buttons */
.headertopmenu > li > a,
.navbar-custom-menu .dropdown-toggle {
  color: var(--ac-text-muted) !important;
  border-radius: var(--ac-radius-md);
  transition: color var(--ac-duration-fast) var(--ac-ease), background var(--ac-duration-fast) var(--ac-ease), transform var(--ac-duration-fast) var(--ac-ease);
}
.headertopmenu > li > a:hover {
  color: var(--ac-primary) !important;
  background: var(--ac-surface-2);
  transform: translateY(-1px);
}
.headertopmenu > li > a i { transition: transform var(--ac-duration-fast) var(--ac-ease); }
.headertopmenu > li > a:hover i { transform: scale(1.12); }

/* ---------- 3. sidebar ---------- */

.main-sidebar,
.main-sidebar .sidebar {
  /* keep the sidebar dark (per spec, in both light/dark modes) but hue-shift
     it toward the school's chosen brand color instead of a fixed navy, so
     changing the color actually changes what the sidebar looks like */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--ac-primary) 18%, var(--ac-sidebar-bg) 82%) 0%,
    color-mix(in srgb, var(--ac-primary) 10%, var(--ac-sidebar-bg-2) 90%) 100%) !important;
}

/* Sidebar scroll architecture: .main-sidebar is the theme's real scroll
   container (`overflow-y:auto; height:100%` from style-main.css, desktop
   only) and previously EVERYTHING inside it — session bar, quick links,
   search filter, and the nav menu — scrolled together as one region, with
   only `position:sticky` holding the session/quick-links bar in place.
   Explicitly split it instead: `.sidebar` becomes a column flexbox with a
   non-scrolling header (Current Session + Quick Links, fixed size) and a
   second region that scrolls independently, so nav items can never pass
   underneath the header — they're in a completely separate box, not just
   visually covered by it. */
.main-sidebar .sidebar {
  display: flex;
  flex-direction: column;
  height: 100% !important; /* overrides the JS-set inline height:auto from AdminLTE's fixSidebar() (harmless no-op there since slimScroll never activates without body.fixed, but this keeps the flex column's height deterministic regardless) */
  min-height: 0;
  /* deliberately NOT forcing overflow here: the fixed-top + scroll flex
     children sum to exactly this element's height, so nothing overflows it
     in the first place — and collapsed mode needs `.sidebar { overflow:
     visible }` (base theme) so the flyout submenu isn't clipped; fighting
     that with an !important override here would risk breaking it. */
}
.ac-sidebar-fixed-top {
  flex: 0 0 auto;
  position: relative;
  z-index: 30;
}
.ac-sidebar-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar-menu > li > a {
  color: var(--ac-sidebar-text) !important;
  border-radius: var(--ac-radius-md);
  margin: 2px 10px;
  padding: 10px 14px !important;
  transition: background var(--ac-duration-fast) var(--ac-ease), color var(--ac-duration-fast) var(--ac-ease), transform var(--ac-duration-fast) var(--ac-ease);
  border-left: none !important;
}

.sidebar-menu > li > a:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
  transform: translateX(2px);
}

/* In collapsed mode the hovered <a> is exactly where the flyout position
   math runs (footer.php's adjustSubmenuPosition) — any transform value here
   (even a small translate) turns this <a> into the containing block for its
   position:fixed label span, corrupting the coordinates. Keep the hover
   background/color but drop the transform in this state only. */
.sidebar-mini.sidebar-collapse .sidebar-menu > li > a:hover {
  transform: none;
}

.sidebar-menu > li.active > a,
.sidebar-menu > li.treeview.active > a {
  background: var(--ac-sidebar-active-bg) !important;
  color: var(--ac-sidebar-active-text) !important;
  box-shadow: inset 3px 0 0 0 var(--ac-primary-400);
}

.sidebar-menu li > a > i:first-child {
  color: var(--ac-sidebar-text-muted);
  width: 20px;
  text-align: center;
  margin-right: 8px;
  transition: color var(--ac-duration-fast) var(--ac-ease);
}
.sidebar-menu li.active > a > i:first-child,
.sidebar-menu li > a:hover > i:first-child { color: var(--ac-primary-400); }

.sidebar-menu .treeview-menu {
  background: color-mix(in srgb, var(--ac-primary) 8%, rgba(0, 0, 0, 0.18)) !important;
  border-radius: var(--ac-radius-md);
  margin: 2px 10px 6px 26px;
  padding: 4px 0;
}
.sidebar-menu .treeview-menu > li > a {
  color: var(--ac-sidebar-text) !important;
  border-radius: var(--ac-radius-sm);
  margin: 1px 6px;
  transition: background var(--ac-duration-fast) var(--ac-ease), color var(--ac-duration-fast) var(--ac-ease);
}
.sidebar-menu .treeview-menu > li.active > a,
.sidebar-menu .treeview-menu > li > a:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  color: #fff !important;
}

/* Collapsed sidebar ("sidebar-mini.sidebar-collapse"): the theme's own JS
   (adjustSubmenuPosition in layout/footer.php) rips the item label / submenu
   out to `position: fixed` and flies it out next to the icon rail. Our
   .treeview-menu background above (rgba(0,0,0,.18)) and the label's inherited
   transparent background were designed for sitting INSIDE the dark sidebar —
   floating over the light main content area instead, both become illegible
   (light sidebar text on a near-transparent tile). Give the flown-out state
   its own opaque, properly contrasted surface. */
.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span,
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span,
.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu,
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
  background: color-mix(in srgb, var(--ac-primary) 14%, var(--ac-sidebar-bg-2) 86%) !important;
  border: 1px solid var(--ac-sidebar-border);
  box-shadow: var(--ac-shadow-lg);
  color: var(--ac-sidebar-text) !important;
  z-index: 2000;
}
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu > li > a {
  color: var(--ac-sidebar-text) !important;
}
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu > li > a:hover,
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu > li.active > a {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}
/* the collapsed icon rail itself: don't let our normal-mode margin/padding
   shrink the 65px column the theme's flyout math assumes */
.sidebar-mini.sidebar-collapse .sidebar-menu > li > a {
  margin: 2px 6px;
  padding: 10px !important;
  text-align: center;
}

/* collapsed logo: the small square mark, sized to sit cleanly in the glass header */
.sidebar-mini.sidebar-collapse .main-header .logo {
  width: 65px;
  text-align: center;
}
.sidebar-mini.sidebar-collapse .main-header .logo .logo-mini {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
}
.sidebar-mini.sidebar-collapse .main-header .logo .logo-mini img {
  max-height: 32px;
  width: auto;
  object-fit: contain;
}

.search-form2 .form-control,
.search-form .form-control {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--ac-sidebar-border);
  color: #fff;
  border-radius: var(--ac-radius-md);
}
.search-form2 .form-control::placeholder { color: var(--ac-sidebar-text-muted); }

/* sidebar menu-item filter (client-side, distinct from the student-name search above it) */
.ac-sidebar-filter {
  position: relative;
  margin: 10px 14px 4px;
}
.ac-sidebar-filter i {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--ac-sidebar-text-muted); font-size: 12px; pointer-events: none;
}
.ac-sidebar-filter-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--ac-sidebar-border);
  color: #fff;
  border-radius: var(--ac-radius-md);
  padding: 8px 12px 8px 30px;
  font-size: 12.5px;
  transition: background var(--ac-duration-fast) var(--ac-ease), border-color var(--ac-duration-fast) var(--ac-ease);
}
.ac-sidebar-filter-input::placeholder { color: var(--ac-sidebar-text-muted); }
.ac-sidebar-filter-input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(var(--ac-primary-rgb), 0.5);
}

/* current-session quick-switch bar sitting at the top of the (now dark) sidebar.
   It's `position: sticky; top: 0` from the base theme (by design, so it stays
   pinned while .sidebar-menu scrolls underneath) — it MUST have a fully
   opaque background, or the scrolling menu items show/overlap through it.
   Deliberately a solid, light, brand-tinted card (not a dark tint of the
   sidebar) so it reads as a distinct "current session" highlight against the
   dark sidebar, and deliberately a plain hex-backed token (not color-mix())
   so it renders identically on older browsers/webviews instead of silently
   falling back to transparent when color-mix() isn't supported. */
.sessionul.fixedmenu,
.sessionul {
  background: var(--ac-primary-50) !important;
  border-bottom: 1px solid var(--ac-border) !important;
  box-shadow: 0 8px 12px -8px rgba(0, 0, 0, 0.35);
  margin: 0 !important;
}
/* base theme's `.accurrent` adds its own 8px bottom padding on the <li>,
   stacking on top of the <a>'s own padding below and making the row taller
   than it needs to be — trim it down. */
.sessionul .accurrent {
  padding: 0 !important;
}
.sessionul.fixedmenu > li > a,
.sessionul > li > a {
  color: var(--ac-slate-800) !important;
  /* these <a> tags are never given `display:block` by the base theme (only
     .sidebar-menu links get that) — without it, top/bottom padding on an
     inline element paints outside its line box instead of reserving space,
     bleeding into whatever sits above/below (the next li, then the sidebar
     menu itself). */
  display: block !important;
  padding: 6px 14px !important;
}
.sessionul.fixedmenu > li > a:hover,
.sessionul > li > a:hover { color: var(--ac-primary-700) !important; background: rgba(0, 0, 0, 0.05) !important; }
.sessionul .fa-pencil,
.sessionul .fa-th,
.sessionul .icon-chevron-left { color: var(--ac-slate-500) !important; }

/* current-session item: "Current Session: 2025-26" and the edit icon all on
   one line, existing typography kept (no redesign) — just prevented from
   wrapping. Higher specificity than the generic
   `.sessionul > li > a { display:block }` rule above, so this only affects
   this item (Quick Links below is untouched). */
.ac-session-switch {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 8px;
}
.ac-session-text {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* slightly smaller than the sidebar-menu's own 14px body text so the full
     "Current Session: 2025-26" string fits one line at normal sidebar
     widths instead of wrapping — per "reduce font size instead of wrapping" */
  font-size: 12.5px;
}
.ac-session-edit {
  flex-shrink: 0;
  color: var(--ac-slate-500) !important;
}

/* "quick links" mega-dropdown — dense, readable panel, not a blur-glass surface */
.mega-dropdown .dropdown-menu {
  background: var(--ac-surface) !important;
  padding: var(--ac-space-4) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.side-navbar-vertical h4,
.card-sidebar h4 {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ac-text) !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.side-navbar-vertical ul li a,
.card-sidebar ul li a {
  color: var(--ac-text-muted) !important;
  border-radius: var(--ac-radius-sm);
  padding: 4px 8px;
  display: block;
  transition: background var(--ac-duration-fast) var(--ac-ease), color var(--ac-duration-fast) var(--ac-ease);
}
.side-navbar-vertical ul li a:hover,
.card-sidebar ul li a:hover { background: var(--ac-surface-2); color: var(--ac-primary) !important; text-decoration: none; }

/* ---------- 4. cards / boxes (AdminLTE .box == Bootstrap "panel") ---------- */

.box, .panel {
  background: var(--ac-surface);
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius-lg);
  box-shadow: var(--ac-shadow-sm);
  transition: box-shadow var(--ac-duration) var(--ac-ease), transform var(--ac-duration) var(--ac-ease), border-color var(--ac-duration) var(--ac-ease);
}
.box:hover, .panel:hover {
  box-shadow: var(--ac-shadow-md);
}
.box.ac-hover-lift:hover, .panel.ac-hover-lift:hover {
  transform: translateY(-3px);
  border-color: var(--ac-border-strong);
}

.box-header, .panel-heading {
  background: transparent;
  border-bottom: 1px solid var(--ac-border);
  border-radius: var(--ac-radius-lg) var(--ac-radius-lg) 0 0 !important;
  padding: var(--ac-space-5) var(--ac-space-6);
}
.box-body, .panel-body { padding: var(--ac-space-6); }
.box-title, .panel-title {
  font-size: 15px;
  font-weight: 700;
}

/* glass surface utility — applied to floating panels: dropdowns, search modal, quick-action widgets */
.ac-glass {
  background: var(--ac-glass-bg) !important;
  backdrop-filter: blur(var(--ac-glass-blur));
  -webkit-backdrop-filter: blur(var(--ac-glass-blur));
  border: 1px solid var(--ac-glass-border) !important;
  box-shadow: var(--ac-shadow-lg);
}

/* ---------- 5. buttons ---------- */

.btn {
  border-radius: var(--ac-radius-md);
  font-weight: 600;
  font-size: 13.5px;
  padding: 8px 18px;
  border: 1px solid transparent;
  box-shadow: var(--ac-shadow-sm);
  transition: transform var(--ac-duration-fast) var(--ac-ease), box-shadow var(--ac-duration-fast) var(--ac-ease), filter var(--ac-duration-fast) var(--ac-ease), opacity var(--ac-duration-fast) var(--ac-ease);
}
.btn:active { transform: translateY(1px) scale(0.98); }
.btn:focus-visible { outline: 2px solid var(--ac-primary-300); outline-offset: 2px; }
.btn:hover { filter: brightness(1.05); box-shadow: var(--ac-shadow-md); }
.btn.disabled, .btn[disabled] { opacity: 0.55; box-shadow: none; filter: none; transform: none; }

.btn-primary, .btn-info {
  background: linear-gradient(135deg, var(--ac-primary-500), var(--ac-accent-600));
  border-color: transparent;
  color: #fff;
}
.btn-success { background: linear-gradient(135deg, #22c55e, var(--ac-success)); border-color: transparent; color: #fff; }
.btn-warning { background: linear-gradient(135deg, #f59e0b, var(--ac-warning)); border-color: transparent; color: #fff; }
.btn-danger  { background: linear-gradient(135deg, #ef4444, var(--ac-danger)); border-color: transparent; color: #fff; }
.btn-default { background: var(--ac-surface); border-color: var(--ac-border-strong); color: var(--ac-text); box-shadow: none; }
.btn-default:hover { background: var(--ac-surface-2); }

.btn-flat { border-radius: var(--ac-radius-md); }

/* loading state: <button class="btn ac-loading"> */
.btn.ac-loading { color: transparent !important; pointer-events: none; position: relative; }
.btn.ac-loading::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  animation: ac-spin 0.7s linear infinite;
}
@keyframes ac-spin { to { transform: rotate(360deg); } }

/* ---------- 6. tables ---------- */

.table {
  border-collapse: separate;
  border-spacing: 0;
  background: var(--ac-surface);
}
.table > thead > tr > th {
  background: var(--ac-surface-2);
  color: var(--ac-text-muted);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.04em;
  font-weight: 700;
  border-bottom: 1px solid var(--ac-border);
  padding: 12px 16px;
  position: sticky;
  top: 0;
  z-index: 2;
}
.table > tbody > tr > td {
  padding: 12px 16px;
  border-top: 1px solid var(--ac-border);
  color: var(--ac-text);
  vertical-align: middle;
}
.table > tbody > tr {
  transition: background var(--ac-duration-fast) var(--ac-ease);
}
.table-hover > tbody > tr:hover { background: var(--ac-surface-2) !important; }
.table-bordered, .table-bordered > thead > tr > th, .table-bordered > tbody > tr > td {
  border: 1px solid var(--ac-border);
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border-radius: var(--ac-radius-md);
  border: 1px solid var(--ac-border-strong);
  background: var(--ac-surface);
  color: var(--ac-text);
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--ac-radius-sm) !important;
  margin: 0 2px;
}
/* grand-total / summary rows across fee collection, balance fees, and finance reports */
tr.total-bg,
.total-bg {
  background: rgba(var(--ac-primary-rgb), 0.06) !important;
}
tr.total-bg td {
  font-weight: 700 !important;
  font-size: 13.5px;
  color: var(--ac-text) !important;
  border-top: 2px solid rgba(var(--ac-primary-rgb), 0.25) !important;
  border-bottom: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--ac-primary) !important;
  border-color: var(--ac-primary) !important;
  color: #fff !important;
}

/* ---------- 7. forms ---------- */

.form-control {
  background: var(--ac-surface);
  border: 1px solid var(--ac-border-strong);
  border-radius: var(--ac-radius-md);
  color: var(--ac-text);
  box-shadow: none;
  padding: 9px 14px;
  height: auto;
  transition: border-color var(--ac-duration-fast) var(--ac-ease), box-shadow var(--ac-duration-fast) var(--ac-ease);
}
.form-control:focus {
  border-color: var(--ac-primary-400);
  box-shadow: 0 0 0 3px rgba(var(--ac-primary-rgb), 0.14);
}
.form-control::placeholder { color: var(--ac-text-faint); }

/* Bootstrap's own .input-sm { padding:5px 10px; height:30px; font-size:12px }
   is the SAME specificity (one class) as the generic .form-control rule
   above -- and since this file loads last, .form-control was silently
   winning the tie for every <input>/<textarea> with both classes, so
   .input-sm has never actually shrunk a plain input/textarea in this app,
   only selects (which already have their own more-specific
   select.form-control.input-sm override below). Restoring the intended
   compact size here, at higher specificity, for input/textarea too. */
.form-control.input-sm,
textarea.form-control.input-sm {
  padding: 5px 10px;
  height: 30px;
  font-size: 12px;
}
textarea.form-control.input-sm { height: auto; }
label, .control-label { color: var(--ac-text); font-weight: 600; font-size: 13px; }
.form-group { margin-bottom: var(--ac-space-5); }

.has-error .form-control { border-color: var(--ac-danger); }
.has-success .form-control { border-color: var(--ac-success); }

.input-group-addon {
  background: var(--ac-surface-2);
  border: 1px solid var(--ac-border-strong);
  color: var(--ac-text-muted);
}

.bootstrap-select .dropdown-toggle,
select.form-control { border-radius: var(--ac-radius-md); }

/* ROOT CAUSE of the "selected value invisible" bug (hit repeatedly across
   this app -- Live Dashboard, Master/School Timetable filters, and
   whatever's next unless this stays fixed here): every select.form-control
   in the app kept the browser's DEFAULT native appearance
   (appearance: auto). With native appearance, the CLOSED box's value text
   is painted by the OS/UA's own widget renderer, not by the page's normal
   text-rendering path -- on some Windows/Chromium builds that native paint
   path does not reliably pick up CSS `color`, no matter the specificity or
   `!important`, because it isn't going through ordinary CSS text painting
   at all. That's why a plain `color` override (previously tried here, and
   independently as a page-local hack on the Dashboard -- both removed)
   had no visible effect: the property was set correctly, but the paint
   path ignoring it doesn't check.
   The fix: turn OFF native appearance entirely so CSS is unconditionally
   in charge of painting the box, and draw a custom dropdown arrow to
   replace the one `appearance: none` removes. This is the standard,
   cross-browser-reliable way to style a native <select> -- not a
   workaround, the actual correct approach. */
select.form-control {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* Windows "Forced Colors" (High Contrast) mode overrides author
     color/background on native form controls (select, button, input)
     with system colors -- and it does this on top of everything above:
     past appearance:none, past !important, no exception. That's the
     actual explanation for reports where the value was "correctly
     selected" but still invisible even after every prior fix here.
     forced-color-adjust:none is the one documented opt-out that lets
     this rule's own colors win instead of being silently replaced. */
  forced-color-adjust: none;
  color: #1e293b !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231e293b' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px 6px;
  padding-right: 32px !important;
  /* Same story as the color fix above: under appearance:none, this
     environment does not reliably size a <select> the same way it sizes
     a sibling <input class="form-control"> from inherited height/
     line-height alone, even though both resolve to the same value on
     paper (bootstrap.min.css's own select.input-sm{height:30px;
     line-height:30px} rule is specific enough to win the cascade over
     the theme's .form-control{height:auto} override -- verified by
     specificity, not a guess). The rendered result still comes out
     shorter than the input next to it. Pin height/line-height/padding
     directly and explicitly here instead of trusting inheritance to
     land on the right number -- padding-top/bottom:0 with
     line-height == height is the standard cross-browser way to
     vertically-center a single line of text in a fixed-height <select>. */
  height: 36px !important;
  min-height: 36px;
  line-height: 36px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
select.form-control::-ms-expand { display: none; }

/* The 32px right-padding above (reserved for the arrow) is sized for the
   default .form-control box (padding: 9px 14px, ~14px font). Bootstrap's
   .input-sm variant is much more compact (padding: 5px 10px, ~12px font)
   -- reusing the same 32px on it leaves too little room for the actual
   value text in already-narrow filter columns, and the browser hard-clips
   rather than shrinking/wrapping, which is exactly the "all text cut off"
   regression this rule exists to prevent. Scale the reserved space and
   arrow down to match the smaller control instead of sharing one size. */
select.form-control.input-sm {
  padding-right: 22px !important;
  background-position: right 7px center;
  background-size: 8px 5px;
  /* Same explicit-height treatment as the base rule above, scaled down to
     match .input-sm's own 30px (5px+5px padding + 18px line-height + 2px
     border, the exact numbers bootstrap.min.css's own .input-sm rule
     already uses for plain inputs -- selects get the same number pinned
     directly instead of trusting it to fall out of inheritance). */
  height: 30px !important;
  min-height: 30px;
  line-height: 30px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* The dropdown POPUP's <option> list is still an OS-native popup (that
   part can't be replaced by appearance:none -- only the closed box can)
   -- typically a light/white surface regardless of page CSS, but it still
   inherits the page's `color`. In dark mode --ac-text is light, so
   without this the popup shows light text on a native white background --
   "blank" looking even though the option text is genuinely there. */
select.form-control option {
  color: #1e293b;
  background: #fff;
}

/* ---------- 8. dropdowns / menus (glass) ---------- */

.dropdown-menu {
  border: 1px solid var(--ac-glass-border);
  border-radius: var(--ac-radius-lg);
  background: var(--ac-glass-bg);
  backdrop-filter: blur(var(--ac-glass-blur));
  -webkit-backdrop-filter: blur(var(--ac-glass-blur));
  box-shadow: var(--ac-shadow-lg);
  padding: 8px;
  animation: ac-pop var(--ac-duration) var(--ac-ease);
}
.dropdown-menu > li > a {
  border-radius: var(--ac-radius-sm);
  color: var(--ac-text);
  padding: 8px 12px;
  transition: background var(--ac-duration-fast) var(--ac-ease);
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
  background: var(--ac-surface-2);
  color: var(--ac-text);
}
.dropdown-menu .divider { background: var(--ac-border); }

@keyframes ac-pop {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- 9. alerts / toasts / badges ---------- */

.alert {
  border: 1px solid transparent;
  border-radius: var(--ac-radius-md);
  padding: var(--ac-space-4) var(--ac-space-5);
}
.alert-success { background: var(--ac-success-bg); color: var(--ac-success); border-color: rgba(var(--ac-success-rgb), 0.25); }
.alert-warning { background: var(--ac-warning-bg); color: var(--ac-warning); border-color: rgba(var(--ac-warning-rgb), 0.25); }
.alert-danger  { background: var(--ac-danger-bg);  color: var(--ac-danger);  border-color: rgba(var(--ac-danger-rgb), 0.25); }
.alert-info    { background: var(--ac-info-bg);    color: var(--ac-info);    border-color: rgba(var(--ac-info-rgb), 0.25); }

.label, .badge {
  border-radius: var(--ac-radius-full);
  font-weight: 600;
  padding: 3px 10px;
}

/* toast container driven by sstoast.js — restyle the existing markup, no JS changes */
.toast, .ac-toast {
  border-radius: var(--ac-radius-lg) !important;
  box-shadow: var(--ac-shadow-lg) !important;
  border: 1px solid var(--ac-border) !important;
  background: var(--ac-surface) !important;
  color: var(--ac-text) !important;
}

/* ---------- 10. modals ---------- */

.modal-content {
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius-xl);
  box-shadow: var(--ac-shadow-lg);
  overflow: hidden;
}
.modal-header { border-bottom: 1px solid var(--ac-border); padding: var(--ac-space-5) var(--ac-space-6); }
.modal-body { padding: var(--ac-space-6); }
.modal-footer { border-top: 1px solid var(--ac-border); padding: var(--ac-space-4) var(--ac-space-6); }
.modal-backdrop { background: rgba(8, 12, 22, 0.55); }
.modal-backdrop.in { opacity: 1; backdrop-filter: blur(2px); }

/* ---------- 11. progress bars ---------- */

.progress {
  height: 8px;
  border-radius: var(--ac-radius-full);
  background: var(--ac-surface-2);
  box-shadow: none;
  overflow: hidden;
}
.progress-bar {
  background: linear-gradient(90deg, var(--ac-primary-500), var(--ac-accent-600));
  transition: width var(--ac-duration-slow) var(--ac-ease);
}

/* ---------- 11b. AdminLTE stat/progress widgets used across the dashboard
   (.info-box, .topprograssstart, .flex-card) — restyled as glass-ish cards
   so every existing RBAC-gated widget block inherits the new look without
   any PHP/markup changes. ---------- */

.info-box {
  background: var(--ac-surface);
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius-lg);
  box-shadow: var(--ac-shadow-sm);
  overflow: hidden;
  transition: transform var(--ac-duration) var(--ac-ease), box-shadow var(--ac-duration) var(--ac-ease);
}
.info-box:hover { transform: translateY(-3px); box-shadow: var(--ac-shadow-md); }
.info-box a { display: flex; align-items: center; gap: var(--ac-space-4); padding: var(--ac-space-5); color: var(--ac-text); text-decoration: none; }
.info-box-icon {
  width: 46px; height: 46px; min-width: 46px;
  border-radius: var(--ac-radius-md);
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--ac-primary-rgb), 0.12);
  color: var(--ac-primary);
  font-size: 18px;
}
.info-box-text { display: block; color: var(--ac-text-muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }
.info-box-number { display: block; font-family: var(--ac-font-display); font-size: 20px; font-weight: 800; color: var(--ac-text); }

.topprograssstart {
  background: var(--ac-surface);
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius-lg);
  box-shadow: var(--ac-shadow-sm);
  padding: var(--ac-space-5);
  transition: transform var(--ac-duration) var(--ac-ease), box-shadow var(--ac-duration) var(--ac-ease);
  height: 100%;
}
.topprograssstart:hover { transform: translateY(-2px); box-shadow: var(--ac-shadow-md); }
.topprograssstart .pro-border {
  font-weight: 700;
  font-size: 13px;
  color: var(--ac-text);
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--ac-border);
}

/* ---------- 12. hero (dashboard) ---------- */

.ac-hero {
  position: relative;
  border-radius: var(--ac-radius-xl);
  padding: var(--ac-space-8) var(--ac-space-8);
  background: var(--ac-hero-gradient);
  color: #fff;
  overflow: hidden;
  box-shadow: var(--ac-shadow-lg);
  margin-bottom: var(--ac-space-6);
}
.ac-hero::before, .ac-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.35;
  background: radial-gradient(circle, rgba(255,255,255,0.5) 0%, transparent 70%);
  animation: ac-float 9s var(--ac-ease) infinite;
}
.ac-hero::before { width: 220px; height: 220px; top: -80px; right: 10%; }
.ac-hero::after { width: 140px; height: 140px; bottom: -50px; right: 30%; animation-delay: 2.5s; }
@keyframes ac-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-14px) scale(1.05); }
}
.ac-hero-eyebrow { color: rgba(255,255,255,0.75); font-size: 13px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; }
.ac-hero-title { font-family: var(--ac-font-display); font-size: 26px; font-weight: 800; margin: 4px 0 6px; }
.ac-hero-meta { color: rgba(255,255,255,0.85); font-size: 13.5px; display: flex; gap: 18px; flex-wrap: wrap; }
.ac-hero-meta span { display: inline-flex; align-items: center; gap: 6px; }
.ac-hero-actions { margin-top: var(--ac-space-6); display: flex; gap: 10px; flex-wrap: wrap; }
.ac-hero-actions .btn {
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  backdrop-filter: blur(8px);
}
.ac-hero-actions .btn:hover { background: rgba(255,255,255,0.22); }

/* ---------- 13. stat cards ---------- */

.ac-stat-card {
  background: var(--ac-surface);
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius-lg);
  padding: var(--ac-space-5);
  box-shadow: var(--ac-shadow-sm);
  transition: transform var(--ac-duration) var(--ac-ease), box-shadow var(--ac-duration) var(--ac-ease);
  display: flex;
  align-items: flex-start;
  gap: var(--ac-space-4);
}
.ac-stat-card:hover { transform: translateY(-3px); box-shadow: var(--ac-shadow-md); }
.ac-stat-icon {
  width: 44px; height: 44px;
  border-radius: var(--ac-radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  background: rgba(var(--ac-primary-rgb), 0.12);
  color: var(--ac-primary);
  flex-shrink: 0;
}
.ac-stat-value { font-family: var(--ac-font-display); font-size: 24px; font-weight: 800; color: var(--ac-text); line-height: 1.2; }
.ac-stat-label { color: var(--ac-text-muted); font-size: 12.5px; font-weight: 600; }
.ac-stat-trend { font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; }
.ac-stat-trend.up { color: var(--ac-success); }
.ac-stat-trend.down { color: var(--ac-danger); }

/* ---------- 14. quick action cards ---------- */

.ac-quick-action {
  display: flex; align-items: center; gap: var(--ac-space-4);
  background: var(--ac-surface);
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius-lg);
  padding: var(--ac-space-4) var(--ac-space-5);
  transition: transform var(--ac-duration-fast) var(--ac-ease), box-shadow var(--ac-duration-fast) var(--ac-ease), border-color var(--ac-duration-fast) var(--ac-ease);
  color: var(--ac-text);
  text-decoration: none;
}
.ac-quick-action:hover {
  transform: translateY(-2px);
  box-shadow: var(--ac-shadow-md);
  border-color: rgba(var(--ac-primary-rgb), 0.35);
  color: var(--ac-text);
  text-decoration: none;
}
.ac-quick-action .ac-stat-icon { background: rgba(var(--ac-accent-rgb), 0.12); color: var(--ac-accent-600); }
.ac-quick-action-title { font-weight: 700; font-size: 13.5px; }
.ac-quick-action-desc { color: var(--ac-text-muted); font-size: 12px; }

/* ---------- 15. empty states ---------- */

.ac-empty {
  text-align: center;
  padding: var(--ac-space-12) var(--ac-space-6);
}
.ac-empty svg, .ac-empty img { max-width: 220px; margin: 0 auto var(--ac-space-5); }
.ac-empty-title { font-family: var(--ac-font-display); font-weight: 700; font-size: 17px; color: var(--ac-text); }
.ac-empty-desc { color: var(--ac-text-muted); font-size: 13.5px; max-width: 360px; margin: 6px auto var(--ac-space-5); }

.ac-empty-mini { padding: var(--ac-space-6) var(--ac-space-4); }
.ac-empty-mini svg { max-width: 120px; margin-bottom: var(--ac-space-3); }
.ac-empty-mini .ac-empty-desc { font-size: 12.5px; margin: 0; }

/* ---------- 16. skeleton loaders ---------- */

.ac-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--ac-surface-2);
  border-radius: var(--ac-radius-md);
}
.ac-skeleton::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(var(--ac-surface-rgb), 0.7), transparent);
  animation: ac-shimmer 1.4s infinite;
}
@keyframes ac-shimmer {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

/* ---------- 17. animated counters (paired with acages-ui.js IntersectionObserver) ---------- */
.ac-counter { font-variant-numeric: tabular-nums; }

/* ---------- 18. utilities ---------- */
.ac-fade-in { animation: ac-fadein var(--ac-duration-slow) var(--ac-ease) both; }
@keyframes ac-fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- 19. dark-mode toggle switch (topbar) ---------- */
.ac-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--ac-radius-full);
  color: var(--ac-text-muted);
  transition: background var(--ac-duration-fast) var(--ac-ease), color var(--ac-duration-fast) var(--ac-ease);
  cursor: pointer;
}
.ac-theme-toggle:hover { background: var(--ac-surface-2); color: var(--ac-primary); }

/* ---------- 20. command palette (Ctrl+K) ---------- */
.ac-cmdk-backdrop {
  position: fixed; inset: 0; z-index: 20000;
  background: rgba(8, 12, 22, 0.55);
  backdrop-filter: blur(2px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
  opacity: 0; pointer-events: none;
  transition: opacity var(--ac-duration) var(--ac-ease);
}
.ac-cmdk-backdrop.is-open { opacity: 1; pointer-events: auto; }
.ac-cmdk {
  width: min(600px, 92vw);
  border-radius: var(--ac-radius-xl);
  overflow: hidden;
  transform: translateY(-10px) scale(0.98);
  transition: transform var(--ac-duration) var(--ac-ease);
}
.ac-cmdk-backdrop.is-open .ac-cmdk { transform: translateY(0) scale(1); }
.ac-cmdk-input {
  width: 100%; border: none; outline: none;
  background: transparent; color: var(--ac-text);
  font-size: 16px; padding: var(--ac-space-5) var(--ac-space-6);
  border-bottom: 1px solid var(--ac-border);
}
.ac-cmdk-input::placeholder { color: var(--ac-text-faint); }
.ac-cmdk-results { max-height: 50vh; overflow-y: auto; padding: var(--ac-space-2); }
.ac-cmdk-item {
  display: flex; align-items: center; gap: var(--ac-space-3);
  padding: 10px 14px; border-radius: var(--ac-radius-md);
  color: var(--ac-text); cursor: pointer;
  transition: background var(--ac-duration-fast) var(--ac-ease);
}
.ac-cmdk-item.is-active, .ac-cmdk-item:hover { background: var(--ac-surface-2); }
.ac-cmdk-item small { color: var(--ac-text-muted); margin-left: auto; }
.ac-cmdk-empty { padding: var(--ac-space-8) var(--ac-space-6); text-align: center; color: var(--ac-text-muted); }
.ac-cmdk-hint {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--ac-space-3) var(--ac-space-5);
  border-top: 1px solid var(--ac-border);
  color: var(--ac-text-faint); font-size: 11.5px;
}
kbd.ac-key {
  background: var(--ac-surface-2);
  border: 1px solid var(--ac-border-strong);
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 11px;
  font-family: var(--ac-font-sans);
}

/* ---------- 21. AOS fallback (no-JS / reduced motion) ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-aos] { transition: none !important; transform: none !important; opacity: 1 !important; }
}

/* ---------- 22. responsive ---------- */
@media (max-width: 767px) {
  .ac-hero { padding: var(--ac-space-6); }
  .ac-hero-title { font-size: 21px; }
  .box-body, .panel-body { padding: var(--ac-space-4); }
  .table > thead > tr > th, .table > tbody > tr > td { padding: 10px; }
}

/* ---------- 23. stacked tables (mobile) ----------
   Turns a wide, many-column table into one card per row below the
   breakpoint, instead of forcing horizontal scroll. Usage: add class
   "ac-table-responsive" to the <table>, and data-label="Column Name"
   to every <td> (matching that column's header). Rows/cells with no
   data-label (e.g. an empty-state colspan row) render as plain text,
   no label prefix. */
@media (max-width: 767px) {
  /* The wrapping .table-responsive div sets overflow-x:auto for the
     (still horizontal-scrolling) tables that don't opt into this
     component -- once a table IS stacked, that overflow clips any
     box-shadow that would otherwise bleed past the card's own border
     box, and reserves scroll room that has no reason to exist since
     nothing should overflow horizontally anymore. Neutralize it. */
  .table-responsive:has(> .ac-table-responsive) { overflow: visible; }

  .ac-table-responsive thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ac-table-responsive, .ac-table-responsive tbody, .ac-table-responsive tr, .ac-table-responsive td {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .ac-table-responsive tr {
    margin-bottom: var(--ac-space-4);
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-radius-lg);
    padding: var(--ac-space-2) var(--ac-space-4);
    background: var(--ac-surface);
  }
  .ac-table-responsive td {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    column-gap: var(--ac-space-4);
    row-gap: 2px;
    text-align: right;
    padding: var(--ac-space-2) 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--ac-border) !important;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .ac-table-responsive td:last-child { border-bottom: none !important; }
  .ac-table-responsive td[data-label]::before {
    content: attr(data-label);
    font-weight: 700;
    font-size: 12.5px;
    text-align: left;
    color: var(--ac-text-muted);
    flex-shrink: 0;
    max-width: 100%;
  }
  .ac-table-responsive td:not([data-label]) { text-align: center; }
  /* Action-column button groups: let them wrap instead of overflowing
     the card width when there are 2-3 buttons on a narrow screen. */
  .ac-table-responsive td .btn { margin: 2px; }
}