/* ==========================================================================
   Heliosync SchoolOS — LEGACY THEME LAYER
   --------------------------------------------------------------------------
   Re-skins the legacy Bootstrap 4 admin chrome (layouts/master.blade.php →
   ~180 views) so it shares the palette, typography and shape language of the
   new Tailwind shell (layouts/schoolos.blade.php).

   WHAT THIS FILE IS NOT
   ---------------------
   It is NOT a migration. No view is restructured, no component is replaced.
   It is a THEME: colour, typography, border, radius, shadow. Nothing else.

   THE HARD CONSTRAINT
   -------------------
   Tailwind's utility CSS is NEVER loaded on these pages. Bootstrap 4 and
   Tailwind define the same class names with different values (.p-3 is 1rem
   vs 0.75rem, plus .m-*, .border, .rounded, .shadow, .table), so loading both
   would visibly break every legacy page. This file is therefore hand-written
   plain CSS with no build step, consuming only the custom properties already
   published by public/assets/css/heliosync-tokens.css.

   RULES OBSERVED HERE — do not break them
   ---------------------------------------
   * NO layout properties. This file must never set: display, position,
     float, flex/grid, width/height, margin, padding, top/left/right/bottom,
     or anything else that moves a box. Those are what break Bootstrap grids.
     The only exceptions are `box-shadow` used as a *painted* border (it
     occupies no space) and `background-image: none` (removes a gradient).
   * NO @import, NO url() webfont, NO CDN reference of any kind. School
     networks may be offline or firewalled; this must work from disk.
   * `!important` only where a legacy rule already uses it or wins on
     specificity, and every occurrence carries a comment naming what it beats.
   * Load order: this file is linked LAST in layouts/include.blade.php, after
     style.min.css / rtl.min.css / custom.css / comman.css / heliosync-tokens
     / heliosync-tables. Equal-specificity overrides therefore win on order
     alone, which is why most rules below need no specificity inflation.

   RELATIONSHIP TO heliosync-tables.css
   ------------------------------------
   That file already owns everything under `.bootstrap-table`,
   `.fixed-table-container` and `.hs-table-scope` (headers, rows, pagination,
   `.hs-act` buttons, `.hs-badge` pills, toolbar search). This file deliberately
   does NOT touch those selectors. Section 9 fills the gaps it leaves — plain
   `.table` markup that is not a bootstrap-table — and nothing more.

   SECTIONS
   --------
     1.  Local token aliases
     2.  Typography
     3.  App shell (page background, footer)
     4.  Sidebar
     5.  Topbar / navbar
     6.  Buttons
     7.  Cards & page headers
     8.  Forms
     9.  Plain tables (gap-fill only)
     10. Alerts, badges, pagination, modals, tabs, dropdowns
     11. RTL
     12. Motion & forced colours
   ========================================================================== */


/* ==========================================================================
   1. LOCAL TOKEN ALIASES
   Every var() carries a literal fallback so this sheet still renders
   correctly if heliosync-tokens.css is missing or fails to load.
   Declared on :root only — no element rules here.
   ========================================================================== */

:root {
    --hs-l-gold-400: var(--hs-gold-400, #D4AF37);
    --hs-l-gold-500: var(--hs-gold-500, #BE9A24);
    --hs-l-gold-700: var(--hs-gold-700, #7A6015);
    --hs-l-gold-50:  var(--hs-gold-50,  #FBF8EC);
    --hs-l-gold-100: var(--hs-gold-100, #F6EFD0);
    --hs-l-gold-200: var(--hs-gold-200, #EDDFA2);

    --hs-l-ink-0:   var(--hs-ink-0,   #FFFFFF);
    --hs-l-ink-25:  var(--hs-ink-25,  #FCFCFD);
    --hs-l-ink-50:  var(--hs-ink-50,  #F8F9FA);
    --hs-l-ink-100: var(--hs-ink-100, #F1F3F5);
    --hs-l-ink-200: var(--hs-ink-200, #E5E8EB);
    --hs-l-ink-300: var(--hs-ink-300, #D1D6DB);
    --hs-l-ink-400: var(--hs-ink-400, #9BA3AD);
    --hs-l-ink-500: var(--hs-ink-500, #6B7480);
    --hs-l-ink-600: var(--hs-ink-600, #4E5661);
    --hs-l-ink-700: var(--hs-ink-700, #363D47);
    --hs-l-ink-800: var(--hs-ink-800, #23282F);
    --hs-l-ink-900: var(--hs-ink-900, #14171C);
    --hs-l-ink-950: var(--hs-ink-950, #0D0F13);

    --hs-l-success:        var(--hs-success,        #15803D);
    --hs-l-success-bg:     var(--hs-success-bg,     #F0FDF4);
    --hs-l-success-border: var(--hs-success-border, #BBF7D0);
    --hs-l-warning:        var(--hs-warning,        #B45309);
    --hs-l-warning-bg:     var(--hs-warning-bg,     #FFFBEB);
    --hs-l-warning-border: var(--hs-warning-border, #FDE68A);
    --hs-l-danger:         var(--hs-danger,         #B91C1C);
    --hs-l-danger-bg:      var(--hs-danger-bg,      #FEF2F2);
    --hs-l-danger-border:  var(--hs-danger-border,  #FECACA);
    --hs-l-info:           var(--hs-info,           #0E7490);
    --hs-l-info-bg:        var(--hs-info-bg,        #ECFEFF);
    --hs-l-info-border:    var(--hs-info-border,    #A5F3FC);

    --hs-l-radius-sm: var(--hs-radius-sm, 4px);
    --hs-l-radius-md: var(--hs-radius-md, 6px);
    --hs-l-radius-lg: var(--hs-radius-lg, 8px);
    --hs-l-radius-xl: var(--hs-radius-xl, 12px);
    --hs-l-radius-full: var(--hs-radius-full, 9999px);

    --hs-l-shadow-xs: var(--hs-shadow-xs, 0 1px 2px rgba(16, 24, 40, .05));
    --hs-l-shadow-sm: var(--hs-shadow-sm, 0 1px 3px rgba(16, 24, 40, .08));
    --hs-l-shadow-md: var(--hs-shadow-md, 0 4px 12px rgba(16, 24, 40, .08));
    --hs-l-shadow-lg: var(--hs-shadow-lg, 0 12px 32px rgba(16, 24, 40, .12));

    /* Sidebar-only surface tints. Expressed as white-on-dark alphas rather
       than fixed hexes so they hold if --hs-ink-950 is ever re-toned. */
    --hs-l-sidebar-hover:  rgba(255, 255, 255, .05);
    --hs-l-sidebar-active: rgba(255, 255, 255, .07);

    /* The font stack for the whole legacy UI. Inter first to match the new
       shell; every remaining entry is a system face, so this NEVER issues a
       network request. Deliberately no 'Inter Variable' — that face is only
       bundled into the Vite build and is not available on legacy pages. */
    --hs-l-font: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}


/* ==========================================================================
   2. TYPOGRAPHY
   ========================================================================== */

/* ---- 2a. Neutralise the Ubuntu webfonts -----------------------------------
   style.min.css / rtl.min.css declare four @font-face families —
   ubuntu-light / ubuntu-regular / ubuntu-medium / ubuntu-bold — and then
   reference them from ~20 scattered selectors (body, h1-h6, .navbar,
   .sidebar, .card-title, .form-control, .table th, .tooltip, …).

   Chasing all 20 selectors would be brittle. Instead the four FAMILIES are
   redeclared here. Per CSS Fonts, when two @font-face rules share a family
   name and descriptors, the one later in document order wins — and this file
   loads last. Every src below is `local()`, so no font file is ever
   requested over the network and the Ubuntu .woff2 files are simply never
   used. Each chain ends in Arial/Helvetica so the family always resolves and
   can never fall through to an unstyled default.

   Weight is preserved by mapping each Ubuntu weight to the equivalent local
   face: the legacy CSS expresses weight through the family name (it says
   `font-family: "ubuntu-medium"`, not `font-weight: 500`), so remapping to a
   single regular face would have flattened every heading in the product.
   Section 2c additionally sets real font-weight on the headings that matter,
   so the hierarchy survives even where none of these local faces exist. */

@font-face {
    font-family: 'ubuntu-light';
    font-display: swap;
    src: local('Inter Light'), local('InterLight'), local('Segoe UI Light'),
         local('Roboto Light'), local('HelveticaNeue-Light'),
         local('Inter'), local('Segoe UI'), local('Roboto'), local('Arial');
}

@font-face {
    font-family: 'ubuntu-regular';
    font-display: swap;
    src: local('Inter'), local('Inter Regular'), local('Segoe UI'),
         local('Roboto'), local('Helvetica Neue'), local('Arial');
}

@font-face {
    font-family: 'ubuntu-medium';
    font-display: swap;
    src: local('Inter SemiBold'), local('Inter Medium'), local('Segoe UI Semibold'),
         local('Roboto Medium'), local('HelveticaNeue-Medium'),
         local('Inter'), local('Segoe UI'), local('Arial');
}

@font-face {
    font-family: 'ubuntu-bold';
    font-display: swap;
    src: local('Inter Bold'), local('Segoe UI Bold'), local('Roboto Bold'),
         local('Helvetica Neue Bold'), local('Arial Bold'),
         local('Inter'), local('Segoe UI'), local('Arial');
}

/* ---- 2b. Declare the stack explicitly on the main surfaces ---------------
   2a is the safety net; these make the intent legible and cover any
   font-family that came from somewhere other than the Ubuntu families.
   Each selector matches the specificity of the legacy rule it replaces and
   wins on load order. */

body,
body .navbar,
body .sidebar,
body .content-wrapper,
body .footer,
body .modal,
body .card .card-title,
body .card .card-subtitle,
body .card .card-description,
.form-control,
.custom-select,
.btn,
.table thead th,
.tooltip .tooltip-inner,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--single .select2-search__field {
    font-family: var(--hs-l-font);
}

/* ---- 2c. Heading weight & colour ----------------------------------------
   `body h1` is (0,0,2) and beats style.min.css's bare `h1` (0,0,1).
   Weight is stated in CSS so the hierarchy no longer depends on which font
   file happens to be installed. */

body h1, body h2, body h3, body h4, body h5, body h6,
body .h1, body .h2, body .h3, body .h4, body .h5, body .h6 {
    font-family: var(--hs-l-font);
    font-weight: 600;
    color: var(--hs-l-ink-900);
}

/* Body copy tone. Colour only — size and line-height are left exactly as
   Bootstrap set them, because changing them would reflow every page. */
body {
    color: var(--hs-l-ink-700);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.text-muted,
.text-gray {
    color: var(--hs-l-ink-500) !important; /* Bootstrap ships .text-muted with !important; must match to land. */
}

/* Links pick up the brand, not Bootstrap's blue. */
a {
    color: var(--hs-l-gold-700);
}

a:hover,
a:focus {
    color: var(--hs-l-gold-500);
}

/* The `a` rule above is only (0,0,1), so every control that already declares
   its own colour through a class — .btn-*, .nav-link, .dropdown-item,
   .page-link, .close, and heliosync-tables.css's .hs-act / .hs-act-menu__item
   — outranks it automatically and needs no protection here. Writing
   `a.btn { color: inherit }` would have been actively harmful: at (0,1,1) it
   beats `.btn-theme { color: … }` at (0,1,0), so every <a class="btn btn-theme">
   in the product would have inherited its parent's colour instead of ink-900.

   The two rules that ARE needed cover bare, unclassed anchors sitting on the
   dark chrome, where gold-700 on ink-950 would be unreadable. Both are
   (0,1,1) and so stay well below the nav-link rules in sections 4 and 5. */
.sidebar a,
.navbar a {
    color: inherit;
}

/* A single, consistent keyboard ring for everything that is not given a more
   specific one below. `outline` rather than box-shadow so it survives inside
   overflow-hidden scroll containers. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--hs-l-gold-400);
    outline-offset: 2px;
}


/* ==========================================================================
   3. APP SHELL
   Page background moves off the legacy purple-tinted #f2edf3 onto ink-50,
   which is the same surface the new Tailwind shell uses.
   ========================================================================== */

.content-wrapper {
    background: var(--hs-l-ink-50);
    color: var(--hs-l-ink-700);
}

.main-panel,
.page-body-wrapper {
    background: var(--hs-l-ink-50);
}

.footer {
    background: var(--hs-l-ink-50);
    color: var(--hs-l-ink-500);
    /* Painted, not laid out: an inset shadow occupies no space, so the footer
       gains a hairline rule without shifting anything below it. */
    box-shadow: inset 0 1px 0 var(--hs-l-ink-200);
}

.footer a {
    color: var(--hs-l-ink-600);
}

.footer a:hover {
    color: var(--hs-l-gold-700);
}


/* ==========================================================================
   4. SIDEBAR
   Legacy: white surface, purple/blue accents, Ubuntu.
   New:    ink-950 surface, ink-400 labels, ink-50 active text, a 3px gold
           left indicator on the active item.

   The gold indicator is painted with `box-shadow: inset` rather than
   `border-left`. A real 3px border would consume 3px of the nav item's box
   and nudge every label sideways on activation; an inset shadow paints in
   the same place and costs zero layout.
   ========================================================================== */

.sidebar {
    background: var(--hs-l-ink-950);
    font-family: var(--hs-l-font);
}

/* ---- Top-level items ----------------------------------------------------- */

.sidebar .nav .nav-item .nav-link {
    color: var(--hs-l-ink-400);
    transition-property: color, background-color, box-shadow;
    transition-duration: .15s;
}

.sidebar .nav .nav-item .nav-link .menu-title {
    color: inherit;
    font-family: var(--hs-l-font);
    font-weight: 500;
}

.sidebar .nav .nav-item .nav-link i.menu-icon {
    color: var(--hs-l-ink-500);
}

.sidebar .nav .nav-item .nav-link i.menu-arrow {
    color: var(--hs-l-ink-500);
}

/* ---- Hover ---------------------------------------------------------------
   Both selectors are copied verbatim from style.min.css so the specificity
   matches exactly and load order decides. */

.sidebar .nav .nav-item:hover {
    background: var(--hs-l-sidebar-hover);
}

.sidebar .nav:not(.sub-menu)>.nav-item:hover:not(.nav-category):not(.nav-profile)>.nav-link {
    color: var(--hs-l-ink-100);
}

.sidebar .nav .nav-item:hover .nav-link i.menu-icon,
.sidebar .nav .nav-item:hover .nav-link i.menu-arrow {
    color: var(--hs-l-ink-300);
}

/* ---- Active --------------------------------------------------------------
   misc.js puts `.active` on the outermost li.nav-item, and additionally on
   the a.nav-link inside an open .sub-menu. */

.sidebar .nav .nav-item.active {
    background: var(--hs-l-sidebar-active);
    box-shadow: inset 3px 0 0 var(--hs-l-gold-400);
}

.sidebar .nav .nav-item.active>.nav-link {
    color: var(--hs-l-ink-50);
}

.sidebar .nav .nav-item.active>.nav-link .menu-title {
    color: var(--hs-l-ink-50);
    font-family: var(--hs-l-font);
    font-weight: 600;
}

.sidebar .nav .nav-item.active>.nav-link i {
    color: var(--hs-l-gold-400);
}

/* An expanded parent is not the current page — it gets brighter text but no
   gold indicator, so "where am I" stays unambiguous. */
.sidebar .nav .nav-item .nav-link[aria-expanded="true"] {
    color: var(--hs-l-ink-100);
}

/* ---- Sub-menu ------------------------------------------------------------ */

.sidebar .nav.sub-menu {
    background: transparent;
}

.sidebar .nav.sub-menu .nav-item .nav-link {
    color: var(--hs-l-ink-500);
    font-family: var(--hs-l-font);
}

.sidebar .nav.sub-menu .nav-item .nav-link:before {
    color: var(--hs-l-ink-600);
}

.sidebar .nav.sub-menu .nav-item .nav-link:hover {
    color: var(--hs-l-ink-200);
}

.sidebar .nav.sub-menu .nav-item .nav-link.active {
    color: var(--hs-l-gold-400);
    background: transparent;
    font-weight: 600;
}

.sidebar .nav.sub-menu .nav-item .nav-link.active:before {
    color: var(--hs-l-gold-400);
}

/* ---- Sub-category captions ----------------------------------------------
   `.sub-category` is defined in an inline <style> inside
   layouts/include.blade.php, which sits AFTER this stylesheet in the <head>.
   A bare `.sub-category` (0,1,0) would therefore lose on order, so these are
   scoped to `.sidebar` (0,2,0) to win on specificity instead of !important. */

.sidebar .sub-category {
    color: var(--hs-l-ink-500);
    border-left-color: var(--hs-l-ink-800);
    font-family: var(--hs-l-font);
    letter-spacing: .04em;
}

[dir="rtl"] .sidebar .sub-category {
    border-left-color: transparent;
    border-right: 3px solid var(--hs-l-ink-800);
}

/* Small bullet glyphs on third-level items. */
.sidebar .nav-item .nav-link i.small-icon {
    color: var(--hs-l-ink-600);
}

/* ---- Sidebar search ------------------------------------------------------ */

.sidebar .sidebar-search .form-control,
.sidebar #menu-search,
.sidebar #menu-search-mini {
    background-color: var(--hs-l-ink-900);
    background-image: none;
    border: 1px solid var(--hs-l-ink-800);
    border-radius: var(--hs-l-radius-md);
    color: var(--hs-l-ink-100);
    font-family: var(--hs-l-font);
    box-shadow: none;
}

.sidebar .sidebar-search .form-control::placeholder,
.sidebar #menu-search::placeholder,
.sidebar #menu-search-mini::placeholder {
    color: var(--hs-l-ink-500);
}

.sidebar .sidebar-search .form-control:focus,
.sidebar #menu-search:focus,
.sidebar #menu-search-mini:focus {
    background-color: var(--hs-l-ink-900);
    border-color: var(--hs-l-gold-400);
    color: var(--hs-l-ink-50);
    outline: 2px solid var(--hs-l-gold-400);
    outline-offset: 1px;
    box-shadow: none;
}

/* `.border-theme` sits on the search input and would otherwise repaint the
   border with the school's configured --theme-color. */
.sidebar .sidebar-search .border-theme {
    border-color: var(--hs-l-ink-800);
}

/* ---- Sidebar scrollbar --------------------------------------------------- */

.sidebar .nav::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb {
    background-color: var(--hs-l-ink-800);
    border-radius: var(--hs-l-radius-full, 9999px);
}

.sidebar .nav::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track {
    background-color: transparent;
}

/* Anything the theme has not explicitly re-coloured inside the dark sidebar
   must not stay dark-on-dark. */
.sidebar .nav .nav-item .nav-link .badge {
    background-color: var(--hs-l-ink-800);
    color: var(--hs-l-ink-200);
}


/* ==========================================================================
   5. TOPBAR / NAVBAR
   White surface, hairline bottom rule, ink-700 text.

   The bottom rule is an INSET SHADOW, not a border. `.navbar` is
   position: fixed with 70px-tall children and `.main-panel` is offset to
   match; a real 1px border-bottom would make the bar 71px and shift the
   whole page down by a pixel. An inset shadow paints identically for free.
   ========================================================================== */

.navbar {
    background: var(--hs-l-ink-0);
    font-family: var(--hs-l-font);
    color: var(--hs-l-ink-700);
    box-shadow: inset 0 -1px 0 var(--hs-l-ink-200);
}

.navbar .navbar-brand-wrapper {
    background: var(--hs-l-ink-0);
    /* Bottom hairline continues across the brand block; the right-hand
       hairline separates it from the menu area. Both painted, not laid out. */
    box-shadow: inset 0 -1px 0 var(--hs-l-ink-200), inset -1px 0 0 var(--hs-l-ink-200);
}

[dir="rtl"] .navbar .navbar-brand-wrapper {
    box-shadow: inset 0 -1px 0 var(--hs-l-ink-200), inset 1px 0 0 var(--hs-l-ink-200);
}

.navbar .navbar-menu-wrapper {
    background: var(--hs-l-ink-0);
    color: var(--hs-l-ink-700);
}

/* The hamburger / off-canvas toggles. */
.navbar .navbar-menu-wrapper .navbar-toggler {
    color: var(--hs-l-ink-500);
    background: transparent;
    border-radius: var(--hs-l-radius-md);
}

.navbar .navbar-menu-wrapper .navbar-toggler:hover {
    color: var(--hs-l-ink-900);
}

.navbar .navbar-menu-wrapper .navbar-toggler:focus-visible {
    outline: 2px solid var(--hs-l-gold-400);
    outline-offset: -2px;
}

/* School name and session-year captions in the bar. `.text-dark` is a
   Bootstrap utility carrying !important, so this must match to land. */
.navbar .navbar-menu-wrapper .text-dark {
    color: var(--hs-l-ink-700) !important;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item .nav-link {
    color: var(--hs-l-ink-500);
    border-radius: var(--hs-l-radius-md);
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item .nav-link:hover,
.navbar .navbar-menu-wrapper .navbar-nav .nav-item .nav-link:focus {
    color: var(--hs-l-ink-900);
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item .nav-link i {
    color: inherit;
}

/* Profile chip. `.text-black` is a Bootstrap utility with !important. */
.navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-profile .nav-link .nav-profile-text p {
    color: var(--hs-l-ink-700) !important;
    font-weight: 500;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-profile .nav-link .nav-profile-img img {
    border-radius: var(--hs-l-radius-full, 9999px);
    border: 1px solid var(--hs-l-ink-200);
}

/* Navbar dropdown panels — see section 10 for the generic .dropdown-menu. */
.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu.navbar-dropdown {
    border: 1px solid var(--hs-l-ink-200);
    border-radius: var(--hs-l-radius-lg);
    box-shadow: var(--hs-l-shadow-md);
    background-color: var(--hs-l-ink-0);
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu.navbar-dropdown .dropdown-item {
    color: var(--hs-l-ink-700);
    border-radius: var(--hs-l-radius-sm);
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu.navbar-dropdown .dropdown-item:hover,
.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu.navbar-dropdown .dropdown-item:focus {
    background-color: var(--hs-l-ink-50);
    color: var(--hs-l-ink-900);
}

/* The profile menu tints its glyphs with Bootstrap contextual colours
   (.text-success / .text-primary). Those utilities carry !important. */
.navbar .navbar-dropdown .dropdown-item .text-primary {
    color: var(--hs-l-gold-700) !important;
}

.navbar .navbar-dropdown .dropdown-item .text-success {
    color: var(--hs-l-success) !important;
}

.navbar .navbar-dropdown .dropdown-divider {
    border-top-color: var(--hs-l-ink-200);
}


/* ==========================================================================
   6. BUTTONS
   The legacy theme ships three overlapping button families:
     · .btn-gradient-*  — left-to-right purple/blue gradients
     · .btn-inverse-*   — 20%-alpha tint with a matching text colour
     · .btn-theme       — solid fill from the school's --theme-color
   plus stock Bootstrap .btn-primary / .btn-secondary / .btn-danger / ...

   All of them are flattened onto the token palette here:
     primary   → gold-400 fill, ink-900 text
     secondary → white fill, ink-200 border, ink-700 text
     danger / success / warning / info → the semantic triples

   Only colour, border, radius, weight and shadow are touched. Padding,
   height, min-width and display are left exactly as Bootstrap set them, so
   no button changes size and no toolbar re-wraps.
   ========================================================================== */

.btn {
    border-radius: var(--hs-l-radius-md);
    font-weight: 500;
    background-image: none;   /* flattens every .btn-gradient-* in one line */
    text-transform: none;
    /* Default for an unqualified `.btn`; every .btn-* variant below restates
       colour at the same (0,1,0) and is later in this file, so it wins. */
    color: var(--hs-l-ink-700);
    transition: background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}

/* .btn-link is text, not a surface — keep it reading as a link. */
.btn-link {
    background-color: transparent;
    background-image: none;
    border-color: transparent;
    color: var(--hs-l-gold-700);
    box-shadow: none;
}

.btn-link:hover,
.btn-link:focus {
    background-color: transparent;
    color: var(--hs-l-gold-500);
}

/* Bootstrap paints a coloured 3px glow on `.btn:focus, .btn.focus` (0,1,1).
   Replaced wholesale with one gold ring so every button focuses identically. */
.btn:focus,
.btn.focus {
    box-shadow: none;
    outline: none;
}

.btn:focus-visible {
    outline: 2px solid var(--hs-l-gold-400);
    outline-offset: 2px;
    box-shadow: none;
}

.btn:disabled,
.btn.disabled {
    opacity: .55;
    box-shadow: none;
}

/* ---- 6a. Primary --------------------------------------------------------
   `.btn-theme` is by far the most-used button in the product (~156 views).
   Its fill comes from --theme-color, a per-school setting that still
   defaults to the old #22577A; it is remapped to the brand gold here rather
   than by redefining --theme-color, because that variable is re-declared in
   an inline <style> in layouts/include.blade.php (which sits AFTER this
   sheet and would win) and is also read by unrelated components. Overriding
   the consumers is the narrower, more predictable change. */

.btn-theme,
.btn-primary,
.btn-gradient-primary,
.btn-gradient-info,
.btn-gradient-dark,
.swal2-modal .swal2-buttonswrapper .swal2-styled.swal2-confirm {
    background-color: var(--hs-l-gold-400);
    background-image: none;
    border: 1px solid var(--hs-l-gold-400);
    color: var(--hs-l-ink-900);
}

.btn-theme:hover,
.btn-theme:focus,
.btn-theme:active,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-gradient-primary:hover,
.btn-gradient-info:hover,
.btn-gradient-dark:hover,
.swal2-modal .swal2-buttonswrapper .swal2-styled.swal2-confirm:hover {
    background-color: var(--hs-l-gold-500);
    background-image: none;
    border-color: var(--hs-l-gold-500);
    color: var(--hs-l-ink-900);
    opacity: 1;   /* the gradient buttons faded to .8 on hover instead of shading */
}

/* `.btn-gradient-*:not(.btn-gradient-light)` is (0,2,0) in style.min.css and
   forces white text; the gold fill needs near-black, so the text colour is
   restated at that same specificity. */
.btn-gradient-primary:not(.btn-gradient-light),
.btn-gradient-info:not(.btn-gradient-light),
.btn-gradient-dark:not(.btn-gradient-light),
.btn-gradient-primary:not(.btn-gradient-light):hover,
.btn-gradient-info:not(.btn-gradient-light):hover,
.btn-gradient-dark:not(.btn-gradient-light):hover {
    color: var(--hs-l-ink-900);
}

/* ---- 6b. Secondary / neutral -------------------------------------------- */

.btn-secondary,
.btn-light,
.btn-gradient-secondary,
.btn-gradient-light,
.btn-outline-secondary,
.swal2-modal .swal2-buttonswrapper .swal2-styled.swal2-cancel {
    background-color: var(--hs-l-ink-0);
    background-image: none;
    border: 1px solid var(--hs-l-ink-200);
    color: var(--hs-l-ink-700);
    box-shadow: var(--hs-l-shadow-xs);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-light:hover,
.btn-gradient-secondary:hover,
.btn-gradient-light:hover,
.btn-outline-secondary:hover,
.swal2-modal .swal2-buttonswrapper .swal2-styled.swal2-cancel:hover {
    background-color: var(--hs-l-ink-50);
    background-image: none;
    border-color: var(--hs-l-ink-300);
    color: var(--hs-l-ink-900);
}

.btn-outline-primary {
    background-color: transparent;
    background-image: none;
    border: 1px solid var(--hs-l-gold-400);
    color: var(--hs-l-gold-700);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active {
    background-color: var(--hs-l-gold-400);
    border-color: var(--hs-l-gold-400);
    color: var(--hs-l-ink-900);
}

/* ---- 6c. Semantic solids ------------------------------------------------- */

.btn-danger,
.btn-gradient-danger {
    background-color: var(--hs-l-danger);
    background-image: none;
    border: 1px solid var(--hs-l-danger);
    color: var(--hs-l-ink-0);
}

.btn-success,
.btn-gradient-success {
    background-color: var(--hs-l-success);
    background-image: none;
    border: 1px solid var(--hs-l-success);
    color: var(--hs-l-ink-0);
}

.btn-warning,
.btn-gradient-warning {
    background-color: var(--hs-l-warning);
    background-image: none;
    border: 1px solid var(--hs-l-warning);
    color: var(--hs-l-ink-0);
}

.btn-info {
    background-color: var(--hs-l-info);
    background-image: none;
    border: 1px solid var(--hs-l-info);
    color: var(--hs-l-ink-0);
}

.btn-dark {
    background-color: var(--hs-l-ink-800);
    background-image: none;
    border: 1px solid var(--hs-l-ink-800);
    color: var(--hs-l-ink-0);
}

.btn-danger:hover,  .btn-danger:focus,  .btn-gradient-danger:hover  { background-color: #991B1B; border-color: #991B1B; color: var(--hs-l-ink-0); opacity: 1; }
.btn-success:hover, .btn-success:focus, .btn-gradient-success:hover { background-color: #116632; border-color: #116632; color: var(--hs-l-ink-0); opacity: 1; }
.btn-warning:hover, .btn-warning:focus, .btn-gradient-warning:hover { background-color: #92400E; border-color: #92400E; color: var(--hs-l-ink-0); opacity: 1; }
.btn-info:hover,    .btn-info:focus                                { background-color: #0B5C73; border-color: #0B5C73; color: var(--hs-l-ink-0); }
.btn-dark:hover,    .btn-dark:focus                                { background-color: var(--hs-l-ink-900); border-color: var(--hs-l-ink-900); color: var(--hs-l-ink-0); }

/* Tone-matched focus ring keeps destructive intent readable for keyboard users. */
.btn-danger:focus-visible  { outline-color: var(--hs-l-danger); }
.btn-success:focus-visible { outline-color: var(--hs-l-success); }

/* ---- 6d. .btn-inverse-* — soft tinted buttons ---------------------------
   Kept as a distinct, quieter tier (in the tables they read as secondary
   destructive / secondary confirm actions), just re-toned onto the tokens.
   `.btn-inverse-*:not(.btn-inverse-light)` is (0,2,0) in style.min.css, so
   the text colour is restated at that specificity. */

.btn-inverse-danger,
.btn-inverse-danger:not(.btn-inverse-light) {
    background-color: var(--hs-l-danger-bg);
    background-image: none;
    border: 1px solid var(--hs-l-danger-border);
    color: var(--hs-l-danger);
}

.btn-inverse-success,
.btn-inverse-success:not(.btn-inverse-light) {
    background-color: var(--hs-l-success-bg);
    background-image: none;
    border: 1px solid var(--hs-l-success-border);
    color: var(--hs-l-success);
}

.btn-inverse-warning,
.btn-inverse-warning:not(.btn-inverse-light) {
    background-color: var(--hs-l-warning-bg);
    background-image: none;
    border: 1px solid var(--hs-l-warning-border);
    color: var(--hs-l-warning);
}

.btn-inverse-info,
.btn-inverse-info:not(.btn-inverse-light) {
    background-color: var(--hs-l-info-bg);
    background-image: none;
    border: 1px solid var(--hs-l-info-border);
    color: var(--hs-l-info);
}

.btn-inverse-primary,
.btn-inverse-primary:not(.btn-inverse-light) {
    background-color: var(--hs-l-gold-50);
    background-image: none;
    border: 1px solid var(--hs-l-gold-200);
    color: var(--hs-l-gold-700);
}

.btn-inverse-dark,
.btn-inverse-dark:not(.btn-inverse-light),
.btn-inverse-secondary,
.btn-inverse-secondary:not(.btn-inverse-light) {
    background-color: var(--hs-l-ink-100);
    background-image: none;
    border: 1px solid var(--hs-l-ink-200);
    color: var(--hs-l-ink-700);
}

.btn-inverse-danger:hover    { background-color: var(--hs-l-danger);   border-color: var(--hs-l-danger);   color: var(--hs-l-ink-0); }
.btn-inverse-success:hover   { background-color: var(--hs-l-success);  border-color: var(--hs-l-success);  color: var(--hs-l-ink-0); }
.btn-inverse-warning:hover   { background-color: var(--hs-l-warning);  border-color: var(--hs-l-warning);  color: var(--hs-l-ink-0); }
.btn-inverse-info:hover      { background-color: var(--hs-l-info);     border-color: var(--hs-l-info);     color: var(--hs-l-ink-0); }
.btn-inverse-primary:hover   { background-color: var(--hs-l-gold-400); border-color: var(--hs-l-gold-400); color: var(--hs-l-ink-900); }
.btn-inverse-dark:hover,
.btn-inverse-secondary:hover { background-color: var(--hs-l-ink-200);  border-color: var(--hs-l-ink-300);  color: var(--hs-l-ink-900); }

/* Bootstrap's coloured focus glows on every inverse variant. */
.btn-inverse-danger:focus,  .btn-inverse-danger.focus,
.btn-inverse-success:focus, .btn-inverse-success.focus,
.btn-inverse-warning:focus, .btn-inverse-warning.focus,
.btn-inverse-info:focus,    .btn-inverse-info.focus,
.btn-inverse-primary:focus, .btn-inverse-primary.focus,
.btn-inverse-dark:focus,    .btn-inverse-dark.focus {
    box-shadow: none;
}

/* ---- 6e. Remaining --theme-color consumers ------------------------------
   `.text-theme` and `.bg-theme` are declared with !important in
   style.min.css, so matching them requires !important here too. */

.text-theme {
    color: var(--hs-l-gold-700) !important; /* beats `.text-theme { color: var(--theme-color) !important }` */
}

.bg-theme {
    background-color: var(--hs-l-gold-400) !important; /* beats `.bg-theme { background-color: var(--theme-color) !important }` */
}

.theme-color {
    color: var(--hs-l-gold-700);
}

.border-theme {
    border-color: var(--hs-l-ink-200);
}


/* ==========================================================================
   7. CARDS & PAGE HEADERS
   ========================================================================== */

.card {
    background-color: var(--hs-l-ink-0);
    /* style.min.css sets `.card { border: 0 }`. Restoring a hairline is a
       border change, not a layout change: Bootstrap applies
       `box-sizing: border-box` globally, so the card's outer box is identical
       and only its inner width shrinks by 2px. */
    border: 1px solid var(--hs-l-ink-200);
    border-radius: var(--hs-l-radius-lg);
    box-shadow: var(--hs-l-shadow-xs);
    color: var(--hs-l-ink-700);
}

.card .card-title {
    color: var(--hs-l-ink-900);
    font-family: var(--hs-l-font);
    font-weight: 600;
    text-transform: none;   /* the legacy theme capitalised every card title */
}

.card .card-subtitle,
.card .card-description {
    color: var(--hs-l-ink-500);
    font-family: var(--hs-l-font);
}

.card-header {
    background-color: var(--hs-l-ink-0);
    border-bottom: 1px solid var(--hs-l-ink-200);
    color: var(--hs-l-ink-900);
    font-weight: 600;
}

.card-footer {
    background-color: var(--hs-l-ink-25);
    border-top: 1px solid var(--hs-l-ink-200);
    color: var(--hs-l-ink-600);
}

/* Bootstrap rounds the first/last child to the old .25rem; keep them flush
   with the card's new 8px radius. */
.card > .card-header:first-child {
    border-radius: calc(var(--hs-l-radius-lg) - 1px) calc(var(--hs-l-radius-lg) - 1px) 0 0;
}

.card > .card-footer:last-child {
    border-radius: 0 0 calc(var(--hs-l-radius-lg) - 1px) calc(var(--hs-l-radius-lg) - 1px);
}

/* ---- Page header --------------------------------------------------------- */

.page-title {
    color: var(--hs-l-ink-900);
    font-family: var(--hs-l-font);
    font-weight: 600;
}

/* The coloured icon chip. Markup is `page-title-icon bg-theme text-white`;
   both of those utilities carry !important, so the neutral treatment must
   too. Colour and radius only — the 36x36 box is untouched. */
.page-title .page-title-icon {
    background-color: var(--hs-l-ink-100) !important; /* beats `.bg-theme { ... !important }` */
    color: var(--hs-l-ink-600) !important;            /* beats `.text-white { ... !important }` */
    border: 1px solid var(--hs-l-ink-200);
    border-radius: var(--hs-l-radius-md);
    box-shadow: none;
}

.page-title .page-title-icon i {
    color: var(--hs-l-ink-600);
}

.page-header .breadcrumb {
    background-color: transparent;
    border: 0;
}

.page-header .breadcrumb .breadcrumb-item,
.page-header .breadcrumb .breadcrumb-item a {
    color: var(--hs-l-ink-500);
}

.page-header .breadcrumb .breadcrumb-item.active {
    color: var(--hs-l-ink-700);
}


/* ==========================================================================
   8. FORMS
   The blue Bootstrap focus glow is replaced by a gold ring everywhere.
   Heights, paddings and font sizes are untouched.
   ========================================================================== */

.form-control,
.custom-select,
.asColorPicker-input,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--single .select2-search__field,
.typeahead,
.tt-query,
.tt-hint {
    background-color: var(--hs-l-ink-0);
    background-image: none;
    border: 1px solid var(--hs-l-ink-200);
    border-radius: var(--hs-l-radius-md);
    color: var(--hs-l-ink-900);
    box-shadow: none;
    /* style.min.css paints control text through a shadow rather than a fill —
       it sets `color: transparent; text-shadow: 0 0 0 #495057` on this entire
       selector group. Overriding `color` alone would leave that shadow behind
       the now-opaque glyphs, double-painting every input in a stale grey and
       making the text look faintly bold. The shadow has to go with it. */
    text-shadow: none;
}

.form-control::placeholder,
.select2-container--default .select2-selection--single .select2-search__field::placeholder {
    color: var(--hs-l-ink-400);
    opacity: 1;
}

.form-control:focus,
.custom-select:focus,
.asColorPicker-input:focus,
.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single,
.typeahead:focus,
.tt-query:focus,
.tt-hint:focus {
    background-color: var(--hs-l-ink-0);
    border-color: var(--hs-l-gold-400);
    outline: 2px solid var(--hs-l-gold-400);
    outline-offset: -1px;
    box-shadow: none;   /* replaces Bootstrap's rgba(0,123,255,.25) blue glow */
}

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--hs-l-ink-50);
    color: var(--hs-l-ink-500);
}

.form-group label,
.col-form-label {
    color: var(--hs-l-ink-700);
    font-family: var(--hs-l-font);
    font-weight: 500;
}

.form-text,
.form-group .help-block {
    color: var(--hs-l-ink-500);
}

.input-group-text {
    background-color: var(--hs-l-ink-50);
    border: 1px solid var(--hs-l-ink-200);
    border-radius: var(--hs-l-radius-md);
    color: var(--hs-l-ink-600);
}

/* ---- Validation ---------------------------------------------------------- */

.form-control.is-invalid,
.has-danger .form-control,
.form-group.has-danger .form-control,
.form-control.error {
    border-color: var(--hs-l-danger);
}

.form-control.is-invalid:focus,
.form-control.error:focus {
    border-color: var(--hs-l-danger);
    outline-color: var(--hs-l-danger);
}

.invalid-feedback,
label.error,
.text-danger {
    color: var(--hs-l-danger) !important; /* .text-danger is a Bootstrap utility carrying !important */
}

.form-control.is-valid,
.has-success .form-control {
    border-color: var(--hs-l-success);
}

.valid-feedback,
.text-success {
    color: var(--hs-l-success) !important; /* .text-success is a Bootstrap utility carrying !important */
}

/* ---- select2 ------------------------------------------------------------- */

.select2-container--default .select2-selection--multiple {
    background-color: var(--hs-l-ink-0);
    border: 1px solid var(--hs-l-ink-200);
    border-radius: var(--hs-l-radius-md);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--hs-l-gold-50);
    border: 1px solid var(--hs-l-gold-200);
    border-radius: var(--hs-l-radius-sm);
    color: var(--hs-l-gold-700);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--hs-l-gold-700);
}

.select2-dropdown {
    background-color: var(--hs-l-ink-0);
    border: 1px solid var(--hs-l-ink-200);
    border-radius: var(--hs-l-radius-md);
    box-shadow: var(--hs-l-shadow-md);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--hs-l-ink-200);
    border-radius: var(--hs-l-radius-sm);
    color: var(--hs-l-ink-900);
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--hs-l-gold-400);
    outline: 2px solid var(--hs-l-gold-400);
    outline-offset: -1px;
}

.select2-container--default .select2-results__option {
    color: var(--hs-l-ink-700);
}

/* select2's own stylesheet paints the highlighted row Bootstrap blue (#5897fb). */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
    background-color: var(--hs-l-gold-400);
    color: var(--hs-l-ink-900);
}

.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
    background-color: var(--hs-l-gold-50);
    color: var(--hs-l-gold-700);
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--hs-l-ink-400);
}

/* ---- Checkboxes, radios, switches --------------------------------------- */

.form-check .form-check-label input[type="checkbox"]:checked + .input-helper:before,
.form-check .form-check-label input[type="radio"]:checked + .input-helper:before {
    background-color: var(--hs-l-gold-400);
    border-color: var(--hs-l-gold-400);
}

.form-check .form-check-label input[type="checkbox"]:checked + .input-helper:after {
    color: var(--hs-l-ink-900);
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--hs-l-gold-400);
    border-color: var(--hs-l-gold-400);
    color: var(--hs-l-ink-900);
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: none;
    outline: 2px solid var(--hs-l-gold-400);
    outline-offset: 1px;
}

/* Native controls. One declaration, zero layout impact, and it clears the
   leftover browser-blue from every checkbox and radio in the product. */
input[type="checkbox"],
input[type="radio"],
input[type="range"],
input[type="color"],
progress {
    accent-color: var(--hs-l-gold-400);
}

/* ---- Date pickers -------------------------------------------------------- */

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td span.active {
    background-color: var(--hs-l-gold-400) !important; /* datepicker.min.css sets its own background with !important */
    background-image: none !important;
    color: var(--hs-l-ink-900) !important;
    text-shadow: none;
}

.datepicker table tr td.today,
.datepicker table tr td.today:hover {
    background-color: var(--hs-l-gold-100);
    background-image: none;
    color: var(--hs-l-ink-900);
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: var(--hs-l-gold-400);
    color: var(--hs-l-ink-900);
}

.daterangepicker td.in-range {
    background-color: var(--hs-l-gold-50);
    color: var(--hs-l-ink-900);
}


/* ==========================================================================
   9. PLAIN TABLES — GAP FILL ONLY
   public/assets/css/heliosync-tables.css already owns every bootstrap-table:
   its rules are scoped under `.bootstrap-table`, `.fixed-table-container` and
   `.hs-table-scope`, all of which are at least (0,2,2). Everything below is
   at most (0,1,2), so it can never outrank that file — it reaches only the
   plain `<table class="table">` markup that is NOT a bootstrap-table.
   ========================================================================== */

.table {
    color: var(--hs-l-ink-700);
}

.table thead th {
    background-color: var(--hs-l-ink-100);
    border-top: 0;
    border-bottom: 1px solid var(--hs-l-ink-200);
    color: var(--hs-l-ink-500);
    font-family: var(--hs-l-font);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.table td,
.table th {
    border-top-color: var(--hs-l-ink-200);
    color: var(--hs-l-ink-700);
}

.table-bordered,
.table-bordered td,
.table-bordered th {
    border-color: var(--hs-l-ink-200);
}

.table-hover tbody tr:hover {
    background-color: var(--hs-l-ink-50);
    color: var(--hs-l-ink-900);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--hs-l-ink-25);
}


/* ==========================================================================
   10. ALERTS, BADGES, PAGINATION, MODALS, TABS, DROPDOWNS
   ========================================================================== */

/* ---- Alerts -------------------------------------------------------------- */

.alert {
    border: 1px solid transparent;
    border-radius: var(--hs-l-radius-md);
    background-image: none;
    font-family: var(--hs-l-font);
}

.alert-success, .alert-fill-success {
    background-color: var(--hs-l-success-bg);
    border-color: var(--hs-l-success-border);
    color: var(--hs-l-success);
}

.alert-danger, .alert-fill-danger {
    background-color: var(--hs-l-danger-bg);
    border-color: var(--hs-l-danger-border);
    color: var(--hs-l-danger);
}

.alert-warning, .alert-fill-warning {
    background-color: var(--hs-l-warning-bg);
    border-color: var(--hs-l-warning-border);
    color: var(--hs-l-warning);
}

.alert-info, .alert-fill-info {
    background-color: var(--hs-l-info-bg);
    border-color: var(--hs-l-info-border);
    color: var(--hs-l-info);
}

.alert-primary, .alert-fill-primary,
.alert-secondary, .alert-fill-secondary,
.alert-light, .alert-dark {
    background-color: var(--hs-l-ink-100);
    border-color: var(--hs-l-ink-200);
    color: var(--hs-l-ink-700);
}

.alert .alert-link {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

.alert hr {
    border-top-color: currentColor;
    opacity: .25;
}

/* ---- Badges -------------------------------------------------------------
   heliosync-tables.css already restyles badges INSIDE tables, scoped to
   `.fixed-table-container .badge` / `.hs-table-scope .badge` (0,2,0). The
   rules here are (0,1,0), so they cannot reach into a table — they pick up
   only the badges scattered through page headers, cards and lists. */

.badge {
    border: 1px solid transparent;
    border-radius: 999px;
    background-image: none;
    font-family: var(--hs-l-font);
    font-weight: 500;
}

.badge-success { background-color: var(--hs-l-success-bg); border-color: var(--hs-l-success-border); color: var(--hs-l-success); }
.badge-danger  { background-color: var(--hs-l-danger-bg);  border-color: var(--hs-l-danger-border);  color: var(--hs-l-danger); }
.badge-warning { background-color: var(--hs-l-warning-bg); border-color: var(--hs-l-warning-border); color: var(--hs-l-warning); }
.badge-info    { background-color: var(--hs-l-info-bg);    border-color: var(--hs-l-info-border);    color: var(--hs-l-info); }
.badge-primary { background-color: var(--hs-l-gold-50);    border-color: var(--hs-l-gold-200); color: var(--hs-l-gold-700); }
.badge-secondary, .badge-light, .badge-dark { background-color: var(--hs-l-ink-100); border-color: var(--hs-l-ink-200); color: var(--hs-l-ink-700); }

/* ---- Pagination (Laravel paginator; bootstrap-table's is owned elsewhere) -- */

.pagination .page-link {
    background-color: var(--hs-l-ink-0);
    background-image: none;
    border: 1px solid var(--hs-l-ink-200);
    border-radius: var(--hs-l-radius-md);
    color: var(--hs-l-ink-700);
    box-shadow: none;
}

.pagination .page-item:hover .page-link,
.pagination .page-link:hover {
    background-color: var(--hs-l-ink-50);
    background-image: none;
    border-color: var(--hs-l-ink-300);
    color: var(--hs-l-ink-900);
}

.pagination .page-item.active .page-link {
    background: var(--hs-l-gold-400);
    background-image: none;
    border-color: var(--hs-l-gold-400);
    color: var(--hs-l-ink-900);
    font-weight: 600;
}

.pagination .page-item.disabled .page-link {
    background-color: var(--hs-l-ink-50);
    border-color: var(--hs-l-ink-200);
    color: var(--hs-l-ink-400);
}

.pagination .page-link:focus {
    box-shadow: none;
}

.pagination .page-link:focus-visible {
    outline: 2px solid var(--hs-l-gold-400);
    outline-offset: 2px;
}

/* ---- Modals -------------------------------------------------------------- */

.modal-content {
    background-color: var(--hs-l-ink-0);
    border: 1px solid var(--hs-l-ink-200);
    border-radius: var(--hs-l-radius-xl);
    box-shadow: var(--hs-l-shadow-lg);
    color: var(--hs-l-ink-700);
}

.modal-header {
    background-color: var(--hs-l-ink-0);
    border-bottom: 1px solid var(--hs-l-ink-200);
    border-radius: calc(var(--hs-l-radius-xl) - 1px) calc(var(--hs-l-radius-xl) - 1px) 0 0;
}

.modal-header .modal-title {
    color: var(--hs-l-ink-900);
    font-family: var(--hs-l-font);
    font-weight: 600;
}

.modal-footer {
    background-color: var(--hs-l-ink-25);
    border-top: 1px solid var(--hs-l-ink-200);
    border-radius: 0 0 calc(var(--hs-l-radius-xl) - 1px) calc(var(--hs-l-radius-xl) - 1px);
}

.modal-backdrop.show {
    background-color: var(--hs-l-ink-950);
    opacity: .5;
}

.close {
    color: var(--hs-l-ink-500);
    text-shadow: none;
    opacity: 1;
    border-radius: var(--hs-l-radius-sm);
}

.close:hover,
.close:focus {
    color: var(--hs-l-ink-900);
    opacity: 1;
}

/* ---- Tabs ---------------------------------------------------------------
   The active tab is marked with a gold underline drawn as an inset shadow,
   so the tab does not grow by the 2px a real border-bottom would add. */

.nav-tabs {
    border-bottom: 1px solid var(--hs-l-ink-200);
}

.nav-tabs .nav-link {
    border: 1px solid transparent;
    border-radius: var(--hs-l-radius-md) var(--hs-l-radius-md) 0 0;
    color: var(--hs-l-ink-500);
    font-weight: 500;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    border-color: transparent;
    color: var(--hs-l-ink-900);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    background-color: transparent;
    border-color: transparent;
    box-shadow: inset 0 -2px 0 var(--hs-l-gold-400);
    color: var(--hs-l-ink-900);
    font-weight: 600;
}

.nav-tabs .nav-link.disabled {
    color: var(--hs-l-ink-400);
}

.nav-pills .nav-link {
    border-radius: var(--hs-l-radius-md);
    color: var(--hs-l-ink-600);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--hs-l-gold-400);
    background-image: none;
    color: var(--hs-l-ink-900);
}

/* ---- Dropdowns ----------------------------------------------------------- */

.dropdown-menu {
    background-color: var(--hs-l-ink-0);
    border: 1px solid var(--hs-l-ink-200);
    border-radius: var(--hs-l-radius-lg);
    box-shadow: var(--hs-l-shadow-md);
    color: var(--hs-l-ink-700);
}

.dropdown-item {
    color: var(--hs-l-ink-700);
    border-radius: var(--hs-l-radius-sm);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--hs-l-ink-50);
    color: var(--hs-l-ink-900);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--hs-l-gold-50);
    color: var(--hs-l-gold-700);
}

.dropdown-divider {
    border-top-color: var(--hs-l-ink-200);
}

.dropdown-header {
    color: var(--hs-l-ink-500);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ---- Toasts (jquery-toast-plugin) & SweetAlert2 -------------------------- */

.jq-toast-single {
    border-radius: var(--hs-l-radius-md);
    box-shadow: var(--hs-l-shadow-lg);
    font-family: var(--hs-l-font);
}

.jq-icon-success { background-color: var(--hs-l-success); border-color: var(--hs-l-success); color: #fff; }
.jq-icon-error   { background-color: var(--hs-l-danger);  border-color: var(--hs-l-danger);  color: #fff; }
.jq-icon-warning { background-color: var(--hs-l-warning); border-color: var(--hs-l-warning); color: #fff; }
.jq-icon-info    { background-color: var(--hs-l-info);    border-color: var(--hs-l-info);    color: #fff; }

.swal2-popup {
    border-radius: var(--hs-l-radius-xl);
    font-family: var(--hs-l-font);
}

.swal2-title {
    color: var(--hs-l-ink-900);
    font-weight: 600;
}

.swal2-html-container,
.swal2-content {
    color: var(--hs-l-ink-600);
}

.swal2-styled.swal2-confirm {
    background-color: var(--hs-l-gold-400);
    background-image: none;
    border-radius: var(--hs-l-radius-md);
    color: var(--hs-l-ink-900);
}

.swal2-styled.swal2-cancel {
    background-color: var(--hs-l-ink-0);
    background-image: none;
    border: 1px solid var(--hs-l-ink-200);
    border-radius: var(--hs-l-radius-md);
    color: var(--hs-l-ink-700);
}

.swal2-styled:focus {
    box-shadow: none;
    outline: 2px solid var(--hs-l-gold-400);
    outline-offset: 2px;
}

/* ---- Progress, list groups, tooltips, popovers --------------------------- */

.progress {
    background-color: var(--hs-l-ink-100);
    border-radius: 999px;
}

.progress-bar {
    background-color: var(--hs-l-gold-400);
    background-image: none;
    color: var(--hs-l-ink-900);
}

.list-group-item {
    background-color: var(--hs-l-ink-0);
    border-color: var(--hs-l-ink-200);
    color: var(--hs-l-ink-700);
}

.list-group-item.active {
    background-color: var(--hs-l-gold-50);
    border-color: var(--hs-l-gold-200);
    color: var(--hs-l-gold-700);
}

.tooltip .tooltip-inner {
    background-color: var(--hs-l-ink-900);
    border-radius: var(--hs-l-radius-md);
    color: var(--hs-l-ink-0);
    font-family: var(--hs-l-font);
}

.tooltip .arrow::before { border-top-color: var(--hs-l-ink-900); }
.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before { border-bottom-color: var(--hs-l-ink-900); }
.bs-tooltip-left   .arrow::before, .bs-tooltip-auto[x-placement^="left"]   .arrow::before { border-left-color:  var(--hs-l-ink-900); }
.bs-tooltip-right  .arrow::before, .bs-tooltip-auto[x-placement^="right"]  .arrow::before { border-right-color: var(--hs-l-ink-900); }

.popover {
    background-color: var(--hs-l-ink-0);
    border: 1px solid var(--hs-l-ink-200);
    border-radius: var(--hs-l-radius-lg);
    box-shadow: var(--hs-l-shadow-md);
}

.popover .popover-header {
    background-color: var(--hs-l-ink-50);
    border-bottom-color: var(--hs-l-ink-200);
    color: var(--hs-l-ink-900);
}

.popover .popover-body {
    color: var(--hs-l-ink-700);
}

hr {
    border-top-color: var(--hs-l-ink-200);
}

.border,
.border-top,
.border-right,
.border-bottom,
.border-left {
    border-color: var(--hs-l-ink-200) !important; /* Bootstrap's .border-* utilities all carry !important */
}


/* ==========================================================================
   11. RTL
   layouts/master.blade.php sets dir="rtl" on <html> for RTL languages and
   swaps style.min.css for rtl.min.css. Almost everything above is
   direction-agnostic (colour, radius, shadow); these are the leftovers where
   a physical side had to be named.

   rtl.min.css carries its own copies of the Ubuntu @font-face rules and of
   the theme colours; the family remap in section 2a and the token colours
   above apply identically to it, because this file loads after that one too.
   ========================================================================== */

[dir="rtl"] .sidebar .nav .nav-item.active {
    box-shadow: inset -3px 0 0 var(--hs-l-gold-400);
}

[dir="rtl"] .nav-tabs .nav-link {
    border-radius: var(--hs-l-radius-md) var(--hs-l-radius-md) 0 0;
}


/* ==========================================================================
   12. MOTION & FORCED COLOURS
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .btn,
    .sidebar .nav .nav-item .nav-link,
    .navbar .navbar-menu-wrapper .navbar-nav .nav-item .nav-link,
    .dropdown-item {
        transition: none;
    }
}

@media (forced-colors: active) {
    .btn,
    .card,
    .form-control,
    .modal-content {
        border-color: ButtonBorder;
    }

    .sidebar .nav .nav-item.active {
        box-shadow: none;
        outline: 2px solid Highlight;
        outline-offset: -2px;
    }
}