/* ============================================================================
   Altios UI themes
   ----------------------------------------------------------------------------
   Theme is chosen PER DEPLOYMENT in appsettings.json:

       "DefaultVariables": { "Theme": "AltiosClassic" | "GoGlobal" }

   Altios.Utility.Constants.AppTheme.Resolve() maps that to a slug, and the
   shared layouts emit it as <html data-theme="...">. It is not user-selectable.
   NOTE: the value is read at startup - restart the app after changing it.

   This file MUST be linked LAST (after app.css and custom-styles.css) so its
   rules win the cascade.

   HOW IT WORKS
   app.css is largely variable-driven (203 var() uses; #0b1785 appears exactly
   once, in :root), so re-declaring --bs-* per theme rethemes those usages for
   free. Anything hardcoded upstream needs an explicit override; those are
   grouped under "overrides" below, each annotated with the rule it beats.

   IMPORTANT - the same surface is often painted by SEVERAL selectors in this
   codebase (table headers have three). When adding an override, search for
   every rule that paints the surface, not just the first one found.

   ADDING A THEME: copy the GoGlobal block, change the slug and values.
   No override needs touching - they all read tokens.
   ========================================================================== */


/* ---------------------------------------------------------------- Classic --
   Current Altios colours. Every token repeats the value that surface already
   has, so data-theme="altios-classic" is pixel-identical to the old UI.
   :root is included so a page rendering without the attribute still gets a
   complete theme rather than unstyled fallbacks.
   -------------------------------------------------------------------------- */
:root,
html[data-theme="altios-classic"] {
    /* brand */
    --bs-primary: #0b1785;
    --bs-link-primary: #03a6b5;
    --bs-secondary: #435354;
    --bs-body-color: #092C4C;

    /* NOTE - deliberate inconsistency, preserved on purpose.
       --bs-primary-rgb does NOT match --bs-primary. It drives .text-primary
       and .bg-primary via rgba(var(--bs-primary-rgb), ...) at app.css:7323,
       so those render GREEN today while .btn-primary renders NAVY. 99 views
       use .text-primary. Uncomment the second line to make primary
       consistent - it will visibly repaint those 99 places. */
    --bs-primary-rgb: 9, 183, 107;
    /* --bs-primary-rgb: 11, 23, 133; */

    /* surfaces */
    --theme-page-bg: #e4e4e4;                       /* app.css:63 */
    --theme-surface-bg: #ffffff;

    /* sidebar - light variant today (aside.main-sidebar.bg-white) */
    --theme-sidebar-bg: #ffffff;
    --theme-sidebar-fg: #484c4f;                    /* custom-styles.css:12   */
    --theme-sidebar-active: #0052cc;                /* custom-styles.css:1557 */
    /* NOT transparent - .nav-pills .nav-link.active carries a pale blue
       (app.css:4516). Setting this to transparent silently flattened the
       selected sidebar item in Classic; caught by the regression audit. */
    --theme-sidebar-selected-bg: #e6effc;           /* app.css:4516 */
    --theme-sidebar-selected-fg: #0052cc;

    /* data tables */
    --theme-table-header-bg: #2c347c;               /* custom-styles.css:432 */
    --theme-table-header-fg: #f0f0f0;               /* custom-styles.css:433 */
    --theme-table-border: rgba(0, 0, 0, .2);        /* custom-styles.css:611 */

    /* semantic buttons - each hardcoded upstream in app.css, so none of them
       follow --bs-*. These repeat the existing values. */
    --theme-btn-primary-hover: var(--bs-secondary); /* app.css:3215 */
    --theme-btn-success-bg: #1cbb8c;                /* app.css:3300 */
    --theme-btn-success-hover: #3ec59d;
    --theme-btn-secondary-bg: #6c757d;              /* app.css:3256 */
    --theme-btn-secondary-hover: #5c636a;

    /* Pressed / open-dropdown state. Declared separately from hover for every
       variant, and each hardcodes its own colour (app.css), so a themed button
       reverted to its stock colour the moment it was pressed or its dropdown
       opened - .btn-info going dark teal was the visible symptom. */
    --theme-btn-primary-active: var(--bs-dark);
    --theme-btn-secondary-active: #565e64;
    --theme-btn-success-active: #49c9a3;
    --theme-btn-info-active: #128293;
    --theme-btn-info-bg: #17a2b8;                   /* app.css:3344 */
    --theme-btn-info-hover: #148a9c;

    /* breadcrumb / step chip rendered by all three main layouts
       (_Layout.cshtml:517). app.css:16176-16211. */
    --theme-crumb-bg: #eeeeee;
    --theme-crumb-border: #e0e1e1;
    --theme-crumb-active-bg: #2da2ff;               /* app.css:16204 */
    --theme-crumb-active-fg: var(--bs-white-bg);
    --theme-crumb-hover-bg: #2da2ff;                /* same as active today */
    /* the strip the chips sit on - Bootstrap/AdminLTE .breadcrumb */
    --theme-crumb-band-bg: #e9ecef;
    --theme-crumb-band-border: #e5e5e5;             /* app.css:16177 */

    /* Disabled buttons are hardcoded SEPARATELY from their enabled state
       (app.css:3249/3293/3337/3381) and Classic leaves most of them at full
       colour - .btn-success:disabled is still green, .btn-info:disabled
       still teal. Kept as-is so Classic does not change. */
    --theme-btn-primary-disabled: #dcddde;          /* app.css:3251 */
    --theme-btn-secondary-disabled: #6c757d;        /* app.css:3295 */
    --theme-btn-success-disabled: #1cbb8c;          /* app.css:3339 */
    --theme-btn-info-disabled: #17a2b8;             /* app.css:3383 */
    --theme-btn-disabled-fg: #fff;

    /* bootstrap5-toggle pills (the Remove Fees / Add Fees / Send To Client /
       TAX-VAT row in the invoice modals). The widget paints itself with
       .btn-{onstyle} / .btn-{offstyle} - success and warning here - so with no
       tokens of its own it picks up two unrelated semantic colours. Classic
       repeats exactly what it renders today, so its pills do not move.
       Note the ON value is NOT .btn-success: custom-styles.css:1784 scopes
       `.toggle-group .btn-success` to #2da2ff with !important at (0,2,0), and
       the visible half of an ON pill is that inner label, not the outer shell.
       The hover values are the part that was never reachable:
       bootstrap5-toggle.min.css sets
       `background-color: var(--bs-btn-hover-bg)` on hover, a variable this app
       never declares (app.css replaced Bootstrap's variable-driven buttons and
       bootstrap.min.css is v4), so the declaration drops at computed-value
       time, the label falls back to transparent and the identically-coloured
       shell shows through - no visible hover at all (GG-3260).
       Disabled is per-state because Classic leaves .btn-success.disabled and
       .btn-warning.disabled at full colour (app.css:3339 / :3430). */
    --theme-toggle-on-bg: #2da2ff;                  /* custom-styles.css:1784    */
    --theme-toggle-on-fg: #fff;                     /* app.css:12658             */
    --theme-toggle-on-hover-bg: #3ec59d;            /* .btn-success:hover today   */
    --theme-toggle-off-bg: #fcb92c;                 /* app.css:3393 .btn-warning */
    --theme-toggle-off-fg: #fff;
    --theme-toggle-off-hover-bg: #fcc44c;           /* app.css:3403              */
    --theme-toggle-on-disabled-bg: #2da2ff;
    --theme-toggle-off-disabled-bg: #fcb92c;
    --theme-toggle-disabled-fg: #fff;

    /* SweetAlert2 dialogs (ShowMessage / Confirm / ToastMessage). Classic
       keeps the per-message-type colours that SweetalertV01.02.js assigns
       (green success / dark red error / teal info), so these tokens are
       declared for completeness but the override below deliberately skips
       Classic - see the comment on that rule. */
    --theme-dialog-confirm-bg: #2ba3b6;             /* SweetalertV01.02.js:45 */
    --theme-dialog-confirm-hover: #2ba3b6;
    --theme-dialog-confirm-fg: #fff;
    --theme-dialog-confirm-glow: rgba(112, 102, 224, .5); /* sweetalertlocal.js */

    /* Dialog icons. Unlike the confirm button these are pure CSS upstream
       (sweetalertlocal.js, div:where(.swal2-icon).swal2-info / .swal2-error),
       so Classic just repeats the stock values and stays identical. */
    --theme-dialog-icon-info-fg: #3fc3ee;           /* stock swal2 */
    --theme-dialog-icon-info-ring: #9de0f6;
    --theme-dialog-icon-error-fg: #f27474;
    --theme-dialog-icon-error-ring: #f27474;

    /* Page tabs (.pageBreakTab - the General/Resources style tab strip used
       by 13 of the 14 tab sets). custom-styles.css paints these with the
       same #2da2ff as the breadcrumb chip. */
    --theme-tab-bg: #eeeeee;
    --theme-tab-border: #e0e1e1;
    --theme-tab-active-bg: #2da2ff;
    --theme-tab-active-fg: white;
    --theme-tab-hover-bg: #2da2ff;                  /* same as active today */

    /* Dropdowns. Chosen (632 init calls) and Select2 (53) ship different
       blues, so they get separate tokens rather than being unified - that
       would change Select2's colour in Classic. */
    --theme-chosen-highlight-bg: #428bca;           /* bootstrap-chosen.css:79  */
    --theme-chosen-highlight-fg: white;             /* bootstrap-chosen.css:78  */
    --theme-chosen-focus-border: rgba(82, 168, 236, 0.8);  /* :336 */
    --theme-chosen-focus-glow: rgba(82, 168, 236, 0.6);    /* :338 */
    --theme-select2-highlight-bg: #5897fb;          /* css/select2.min.css */
    --theme-select2-highlight-fg: white;
    /* Neither library ships a distinct :hover - hovering just moves the
       .highlighted class - so Classic's hover tokens equal its highlight
       colours and nothing changes there. */
    --theme-chosen-hover-bg: #428bca;
    --theme-select2-hover-bg: #5897fb;

    /* a:hover resolves to var(--bs-body-color) at app.css:225. */
    --theme-link-hover: var(--bs-body-color);

    /* Plain .btn / .btn-default used as text actions (Refresh, Download
       Template, Import History, Export IC Report...). app.css takes .btn from
       #333333 to #495057 on hover - a grey shift that is nearly invisible. */
    --theme-btn-plain-hover-fg: #495057;            /* app.css .btn:hover */

    /* DataTables pagination. .new_custom_table is on 148 views, and scopes
       both the current page and hover to #2e71d5 (custom-styles.css:1617
       and :1621). */
    --theme-page-current-bg: #2e71d5;
    --theme-page-current-fg: var(--bs-white-bg);
    --theme-page-hover-bg: #2e71d5;
    --theme-page-hover-fg: var(--bs-white-bg);

    /* DataTables toolbar inputs: the "Show [50] entries" select and the
       Search box. Both sit at #ccc today (custom-styles.css:1605 and
       app.css:15811) and neither has any hover or focus treatment, so
       Classic's tokens repeat the resting border with no glow.
       Note the page-size control can only be themed while CLOSED - its open
       list is a native browser popup drawn with the OS highlight colour,
       outside the DOM and unreachable from CSS. */
    --theme-input-border: #cccccc;
    --theme-input-hover-border: #cccccc;
    --theme-input-focus-border: #cccccc;
    --theme-input-focus-glow: none;

    /* Bootstrap form controls - .form-control (2983 uses) and .form-select
       (20, including the company switcher in _Layout.cshtml:149). app.css
       overrides Bootstrap's focus ring at :2318 and :2528 with a blue that is
       shared by every input in the app. Validation states (.is-valid green,
       .is-invalid red) are (0,3,0) and therefore untouched by the (0,2,0)
       override below - they stay semantic in both themes. */
    --theme-form-focus-border: #9dbeee;             /* app.css:2320 / :2529 */
    --theme-form-focus-glow: 0 0 0 .2rem rgba(59, 125, 221, .25);

    /* DataTables sort indicator. The sprite is switched off and replaced with
       a Font Awesome glyph on :after; only the asc/desc arrows are visible
       (the neutral .sorting one is display:none).
       custom-styles.css:1671 and :1682. */
    --theme-sort-indicator: #71c7fb;
    /* No outline token: Classic must not declare `outline` on :focus at all.
       The UA's focus ring comes from its own :focus-visible rule, so ANY
       author declaration on :focus replaces it - `auto` resolved to black
       2.4px on <input type="search">, and `revert` to none (no ring at all).
       The Magenta ring is therefore applied in a GoGlobal-scoped rule
       instead, leaving Classic's native ring untouched. */
}


/* --------------------------------------------------------------- GoGlobal --
     Pearl        #FFF8F1  primary page background
     White        #FFFFFF  cards, tables, form areas
     Charcoal     #212630  sidebar, table headers, strong structure
     Magenta      #FF4D7F  primary buttons, active tabs, key actions
     Dark Magenta #D51E51  hover states, pressed buttons, alerts
     Clay         #FCE7D2  selected navigation, subtle highlights, callouts
     Slate Grey   #708090  secondary text, icons, helper labels
     Light Grey   #C3C3D1  borders, dividers, disabled states

   Hierarchy: Pearl page -> White surfaces -> Charcoal structure -> Magenta
   accents, with Magenta used sparingly.
   -------------------------------------------------------------------------- */
html[data-theme="goglobal"] {
    /* brand */
    --bs-primary: #FF4D7F;                          /* Magenta    */
    --bs-primary-rgb: 255, 77, 127;
    --bs-link-primary: #FF4D7F;
    --bs-secondary: #708090;                        /* Slate Grey */
    --bs-body-color: #212630;                       /* Charcoal   */

    /* surfaces */
    --theme-page-bg: #FFF8F1;                       /* Pearl */
    --theme-surface-bg: #FFFFFF;                    /* White */

    /* sidebar flips to Charcoal, so its foreground flips to Light Grey and
       Clay becomes the selected-item chip. */
    --theme-sidebar-bg: #212630;                    /* Charcoal   */
    --theme-sidebar-fg: #C3C3D1;                    /* Light Grey */
    --theme-sidebar-active: #FF4D7F;                /* Magenta    */
    --theme-sidebar-selected-bg: #FCE7D2;           /* Clay       */
    --theme-sidebar-selected-fg: #212630;           /* Charcoal on Clay */

    /* data tables */
    --theme-table-header-bg: #212630;               /* Charcoal   */
    --theme-table-header-fg: #FFFFFF;
    --theme-table-border: #C3C3D1;                  /* Light Grey */

    /* semantic buttons. The palette contains no green, so .btn-success -
       226 uses, the Save/Submit action across this app - maps onto Magenta
       as a "key action", and .btn-secondary takes Slate Grey.
       .btn-info / .btn-warning / .btn-danger are deliberately left at their
       current values: they carry meaning (caution / destructive) and the
       palette offers no replacement. */
    --theme-btn-primary-hover: #D51E51;             /* Dark Magenta */
    --theme-btn-success-bg: #FF4D7F;                /* Magenta      */
    --theme-btn-success-hover: #D51E51;             /* Dark Magenta */
    --theme-btn-secondary-bg: #708090;              /* Slate Grey   */
    --theme-btn-secondary-hover: #5d6b78;

    /* The palette lists Dark Magenta for "hover states, pressed buttons", so
       pressed and open-dropdown match hover. */
    --theme-btn-primary-active: #D51E51;
    --theme-btn-secondary-active: #4d5a66;
    --theme-btn-success-active: #D51E51;
    --theme-btn-info-active: #D51E51;

    /* .btn-info is the "+ Create" action on list pages (184 uses), so it
       counts as a key action and takes Magenta. If you would rather keep
       Create visually distinct from Save, set this to Charcoal #212630. */
    --theme-btn-info-bg: #FF4D7F;                   /* Magenta      */
    --theme-btn-info-hover: #D51E51;                /* Dark Magenta */

    /* breadcrumb chip - the palette assigns Magenta to "active tabs". The
       inactive chips become White on Light Grey to sit on the Pearl page. */
    --theme-crumb-bg: #FFFFFF;                      /* White      */
    --theme-crumb-border: #C3C3D1;                  /* Light Grey */
    --theme-crumb-active-bg: #FF4D7F;               /* Magenta      */
    --theme-crumb-active-fg: #FFFFFF;
    --theme-crumb-hover-bg: #D51E51;                /* Dark Magenta */
    /* The strip takes Pearl so it disappears into the page rather than
       reading as a cold grey band. The idle chips stay White and remain
       legible against it via their Light Grey border. */
    --theme-crumb-band-bg: #FFF8F1;                 /* Pearl      */
    --theme-crumb-band-border: #C3C3D1;             /* Light Grey */

    /* The palette assigns Light Grey to disabled states, so every disabled
       button greys out uniformly. This also removes the brief green/teal
       flash on buttons that start disabled and are enabled by script once
       their data loads (e.g. #createClientAction on the Receivable page). */
    --theme-btn-primary-disabled: #C3C3D1;          /* Light Grey */
    --theme-btn-secondary-disabled: #C3C3D1;
    --theme-btn-success-disabled: #C3C3D1;
    --theme-btn-info-disabled: #C3C3D1;
    --theme-btn-disabled-fg: #212630;               /* Charcoal, for contrast */

    /* bootstrap5-toggle pills. The palette has neither green nor amber, and
       these pills read as buttons rather than as a semantic on/off, so they
       take the plain action pairing: Magenta when engaged, Slate Grey when
       not. Both states hover to Dark Magenta - GG-3260 asked for one shared
       hover colour across the whole row - and both grey out to Light Grey
       when the widget is disabled, matching --theme-btn-*-disabled above. */
    --theme-toggle-on-bg: #FF4D7F;                  /* Magenta      */
    --theme-toggle-on-fg: #FFFFFF;
    --theme-toggle-on-hover-bg: #D51E51;            /* Dark Magenta */
    --theme-toggle-off-bg: #708090;                 /* Slate Grey   */
    --theme-toggle-off-fg: #FFFFFF;
    --theme-toggle-off-hover-bg: #D51E51;           /* Dark Magenta */
    --theme-toggle-on-disabled-bg: #C3C3D1;         /* Light Grey   */
    --theme-toggle-off-disabled-bg: #C3C3D1;        /* Light Grey   */
    --theme-toggle-disabled-fg: #212630;            /* Charcoal     */

    /* SweetAlert2 dialogs. The OK / confirm button is the only action in
       these popups, so it is a key action and takes Dark Magenta - the same
       colour the palette assigns to pressed buttons, which is what the
       modal Submit button next to it resolves to. Hover stays Dark Magenta;
       SweetAlert2 layers its own translucent black gradient on :hover, so
       the button still visibly darkens. */
    --theme-dialog-confirm-bg: #D51E51;             /* Dark Magenta */
    --theme-dialog-confirm-hover: #D51E51;          /* Dark Magenta */
    --theme-dialog-confirm-fg: #FFFFFF;
    --theme-dialog-confirm-glow: rgba(213, 30, 81, .45);

    /* Dialog icons. Info is informational, not an action, so it takes Slate
       Grey - the same neutral the palette gives .btn-secondary. Error takes
       Magenta. Both rings are a translucent tint of the glyph colour, which
       is how stock swal2 draws them (pale ring, saturated glyph) rather than
       a flat disc. */
    --theme-dialog-icon-info-fg: #708090;           /* Slate Grey */
    --theme-dialog-icon-info-ring: rgba(112, 128, 144, .45);
    --theme-dialog-icon-error-fg: #FF4D7F;          /* Magenta */
    --theme-dialog-icon-error-ring: rgba(255, 77, 127, .45);

    /* Page tabs - "active tabs" take Magenta, matching the breadcrumb chip.
       Idle tabs become White on Light Grey to sit on the Pearl page. */
    --theme-tab-bg: #FFFFFF;                        /* White      */
    --theme-tab-border: #C3C3D1;                    /* Light Grey */
    --theme-tab-active-bg: #FF4D7F;                 /* Magenta      */
    --theme-tab-active-fg: #FFFFFF;
    --theme-tab-hover-bg: #D51E51;                  /* Dark Magenta */

    /* Dropdown highlight is a selection cue, so it takes Magenta; the focus
       ring uses a translucent Magenta rather than the stock blue glow. */
    --theme-chosen-highlight-bg: #FF4D7F;           /* Magenta */
    --theme-chosen-highlight-fg: #FFFFFF;
    --theme-chosen-focus-border: rgba(255, 77, 127, 0.8);
    --theme-chosen-focus-glow: rgba(255, 77, 127, 0.45);
    --theme-select2-highlight-bg: #FF4D7F;          /* Magenta */
    --theme-select2-highlight-fg: #FFFFFF;
    /* Hover is Dark Magenta so it reads as distinct from the Magenta
       selected row, matching buttons, tabs and breadcrumbs. */
    --theme-chosen-hover-bg: #D51E51;               /* Dark Magenta */
    --theme-select2-hover-bg: #D51E51;              /* Dark Magenta */
    --theme-link-hover: #D51E51;                    /* Dark Magenta */
    --theme-btn-plain-hover-fg: #D51E51;            /* Dark Magenta */

    /* Pagination: current page is a selection cue (Magenta), hovering another
       page is a hover cue (Dark Magenta) - same split as tabs. */
    --theme-page-current-bg: #FF4D7F;               /* Magenta      */
    --theme-page-current-fg: #FFFFFF;
    --theme-page-hover-bg: #D51E51;                 /* Dark Magenta */
    --theme-page-hover-fg: #FFFFFF;

    /* Toolbar inputs: hover tints the border, focus adds the ring on top, so
       the two states stay distinguishable. */
    --theme-input-border: #C3C3D1;                  /* Light Grey */
    --theme-input-hover-border: #FF4D7F;            /* Magenta    */
    --theme-input-focus-border: #FF4D7F;            /* Magenta    */
    --theme-input-focus-glow: 0 0 0 3px rgba(255, 77, 127, 0.25);

    /* Every Bootstrap input focuses Magenta instead of the stock blue. */
    --theme-form-focus-border: #FF4D7F;             /* Magenta */
    --theme-form-focus-glow: 0 0 0 .2rem rgba(255, 77, 127, .25);

    /* Sort arrow - Magenta. */
    --theme-sort-indicator: #FF4D7F;                /* Magenta */
    /* Applied by the GoGlobal-scoped outline rule further down - see the note
       on the Classic side for why it cannot be a shared token. */
}


/* ================================ overrides ================================
   Surfaces hardcoded upstream. Each carries the rule it overrides. All read
   tokens, so a new theme needs no changes here.
   ========================================================================== */

/* Page background - app.css:63 hardcodes #e4e4e4. Same specificity, later
   file, so no !important needed. */
body {
    background-color: var(--theme-page-bg);
}

/* Sidebar shell - the markup carries Bootstrap's .bg-white utility
   (_Layout.cshtml:221), which is itself !important. */
.main-sidebar.bg-white {
    background-color: var(--theme-sidebar-bg) !important;
}

/* Sidebar item text - custom-styles.css:12 sets .nav-pills .nav-link to
   #484c4f. Equal specificity, later file wins. */
.side_nav_menu .nav-link {
    color: var(--theme-sidebar-fg);
}

/* Sidebar hover / focus / active - custom-styles.css:1557 uses !important. */
.side_nav_menu .nav-link:focus,
.side_nav_menu .nav-link.active-light,
.side_nav_menu .nav-link:hover {
    color: var(--theme-sidebar-active) !important;
}

/* Sidebar selected chip. Classic keeps this transparent, so it is inert
   there and only shows under a theme that sets a Clay-style value. */
.side_nav_menu .nav-link.active {
    background-color: var(--theme-sidebar-selected-bg) !important;
    color: var(--theme-sidebar-selected-fg) !important;
}

/* Table headers. THREE separate selectors paint #2c347c upstream, and which
   one applies depends on whether the table is plain, a DataTable, or carries
   .allTablesCustomStyle. All three must be covered or the header stays navy
   on most pages - DataTables pages in particular.
     custom-styles.css:429   .table thead tr > th
     custom-styles.css:1047  table.dataTable thead th
     custom-styles.css:1709  .allTablesCustomStyle thead th */
.table thead tr > th,
.table thead tr > td,
table.dataTable thead th,
.allTablesCustomStyle thead th {
    background-color: var(--theme-table-header-bg) !important;
    color: var(--theme-table-header-fg) !important;
}

/* DataTables sort indicator (custom-styles.css:1667 asc, :1678 desc). The
   upstream sprite is disabled and a Font Awesome glyph is drawn on :after;
   only these two states are visible, since the neutral .sorting arrow is
   display:none. Equal specificity, later file, so no !important needed. */
.new_custom_table table thead .sorting_asc:after,
.new_custom_table table thead .sorting_desc:after {
    color: var(--theme-sort-indicator);
}

/* Table cell borders - custom-styles.css:611. */
.table th,
.table td {
    border-color: var(--theme-table-border);
}

/* Primary button hover / focus - app.css:3215 hardcodes the hover to
   var(--bs-secondary); Classic's token resolves to that same value. */
.btn-primary:hover,
.btn-primary:focus,
.btn-check:focus + .btn-primary {
    background-color: var(--theme-btn-primary-hover);
    border-color: var(--theme-btn-primary-hover);
}

/* .btn-success - app.css:3300 uses !important, so this must too. */
.btn-success {
    background-color: var(--theme-btn-success-bg) !important;
    border-color: var(--theme-btn-success-bg) !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-check:focus + .btn-success {
    background-color: var(--theme-btn-success-hover) !important;
    border-color: var(--theme-btn-success-hover) !important;
}

/* .btn-secondary - app.css:3256, no !important upstream. */
.btn-secondary {
    background-color: var(--theme-btn-secondary-bg);
    border-color: var(--theme-btn-secondary-bg);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-check:focus + .btn-secondary {
    background-color: var(--theme-btn-secondary-hover);
    border-color: var(--theme-btn-secondary-hover);
}

/* .btn-info - app.css:3344. The "+ Create" button on list pages. */
.btn-info {
    background-color: var(--theme-btn-info-bg);
    border-color: var(--theme-btn-info-bg);
}

.btn-info:hover,
.btn-info:focus,
.btn-check:focus + .btn-info {
    background-color: var(--theme-btn-info-hover);
    border-color: var(--theme-btn-info-hover);
}

/* Pressed and open-dropdown state. Declared separately from hover for every
   variant, each with its own hardcoded colour, so a themed button snapped back
   to its stock colour the moment it was pressed or its dropdown opened. The
   reported case was "Download Reports"
   (<button class="btn btn-info dropdown-toggle">) turning dark teal #128293
   when its menu opened.

   TWO upstream rules paint this, at different specificities:
     app.css      .btn-info.active / :active / .show>...      (0,2,0)/(0,3,0)  #128293
     adminlte+bs  .btn-info:not(:disabled):not(.disabled).active (0,4,0)       #117a8b
   Matching only app.css's form left the AdminLTE rule winning for .active and
   :active, so the :not(:disabled):not(.disabled) form is included here too.
   Only .btn-primary's upstream rule uses !important; .btn-success's is
   matched with it for consistency since both are Magenta at rest. */
.btn-check:active + .btn-primary,
.btn-check:checked + .btn-primary,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--theme-btn-primary-active) !important;
    border-color: var(--theme-btn-primary-active) !important;
}

.btn-check:active + .btn-secondary,
.btn-check:checked + .btn-secondary,
.btn-secondary:not(:disabled):not(.disabled).active,
.btn-secondary:not(:disabled):not(.disabled):active,
.show > .btn-secondary.dropdown-toggle {
    background-color: var(--theme-btn-secondary-active);
    border-color: var(--theme-btn-secondary-active);
}

.btn-check:active + .btn-success,
.btn-check:checked + .btn-success,
.btn-success:not(:disabled):not(.disabled).active,
.btn-success:not(:disabled):not(.disabled):active,
.show > .btn-success.dropdown-toggle {
    background-color: var(--theme-btn-success-active) !important;
    border-color: var(--theme-btn-success-active) !important;
}

.btn-check:active + .btn-info,
.btn-check:checked + .btn-info,
.btn-info:not(:disabled):not(.disabled).active,
.btn-info:not(:disabled):not(.disabled):active,
.show > .btn-info.dropdown-toggle {
    background-color: var(--theme-btn-info-active);
    border-color: var(--theme-btn-info-active);
}

/* Breadcrumb / step chip ("1 Projects"), rendered by all three main layouts.
   app.css:16181 paints the inactive chip; :16203 paints the active one with
   background: #2da2ff !important, and :16210 repeats it on the ::before
   numbered segment - all three need covering or the chip stays blue. */
/* The strip itself. Bootstrap and AdminLTE both set .breadcrumb to #e9ecef
   (no !important); this is equal specificity in a later file, so it wins.
   Scoped to .new_custom_breadcrumb so any other .breadcrumb is untouched.
   The border-bottom comes from app.css:16177. */
.new_custom_breadcrumb {
    background-color: var(--theme-crumb-band-bg);
    border-bottom-color: var(--theme-crumb-band-border);
}

.new_custom_breadcrumb a {
    background: var(--theme-crumb-bg);
    border-color: var(--theme-crumb-border);
}

.new_custom_breadcrumb a.active {
    background: var(--theme-crumb-active-bg) !important;
    border-color: var(--theme-crumb-active-bg);
    color: var(--theme-crumb-active-fg) !important;
}

/* Hover must come AFTER .active so hovering the selected chip darkens it,
   matching how .btn-primary behaves. Classic's token equals its active
   colour, so Classic keeps its current single-colour behaviour. */
.new_custom_breadcrumb a:hover {
    background: var(--theme-crumb-hover-bg) !important;
    border-color: var(--theme-crumb-hover-bg);
    color: var(--theme-crumb-active-fg) !important;
}

.new_custom_breadcrumb a.active:before {
    background: var(--theme-crumb-active-bg);
}

/* the numbered segment darkens with the chip it belongs to */
.new_custom_breadcrumb a:hover:before {
    background: var(--theme-crumb-hover-bg);
}

/* Page tabs (.pageBreakTab) - the General / Resources strip. custom-styles.css
   paints the idle tab, and the active and :hover states both use
   background: #2da2ff !important, so ours must be !important too.
   Covers 13 of the 14 tab sets in the app; the exception is the dynamically
   built #excelCountryTabs (Employee/Index.cshtml:566), which uses AdminLTE's
   default white-active styling and is deliberately left alone. */
.pageBreakTab li > a {
    background-color: var(--theme-tab-bg);
    border-color: var(--theme-tab-border);
}

.pageBreakTab li > a.active {
    background: var(--theme-tab-active-bg) !important;
    border-color: var(--theme-tab-active-bg);
    color: var(--theme-tab-active-fg);
}

/* Hover after .active, so hovering the selected tab darkens it the way
   .btn-primary does. Classic's hover token equals its active colour. */
.pageBreakTab li > a:hover {
    background: var(--theme-tab-hover-bg) !important;
    border-color: var(--theme-tab-hover-bg);
    color: var(--theme-tab-active-fg);
}

/* Chosen.js dropdowns - the highlighted option and the focus ring.
   bootstrap-chosen.css:77 (highlight) and :335 / :343 / :361 (focus border +
   glow, repeated for single, open-single and multi-select). Scripts/chosen.css
   is NOT linked by any view, so its gradient variant does not apply here. */
.chosen-container .chosen-results li.highlighted {
    background-color: var(--theme-chosen-highlight-bg);
    color: var(--theme-chosen-highlight-fg);
}

.chosen-container-active .chosen-single,
.chosen-container-active.chosen-with-drop .chosen-single,
.chosen-container-active .chosen-choices {
    border-color: var(--theme-chosen-focus-border);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset,
                0 0 8px var(--theme-chosen-focus-glow);
}

/* Chosen option hover. Chosen has no :hover rule of its own - it moves the
   .highlighted class on mouseover - so without this, hovering an option looks
   identical to the selected row. Needs to outrank
   `.chosen-container .chosen-results li.highlighted` (0,3,1), which the extra
   :hover pseudo-class does (0,4,1). */
.chosen-container .chosen-results li.active-result:hover {
    background-color: var(--theme-chosen-hover-bg);
    color: var(--theme-chosen-highlight-fg);
}

/* Select2 dropdowns - used on 53 controls alongside Chosen. Only the
   --default skin is themed; the --classic skin is not used in this app. */
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--theme-select2-highlight-bg);
    color: var(--theme-select2-highlight-fg);
}

.select2-container--default .select2-results__option--selectable:hover,
.select2-container--default .select2-results__option[aria-selected]:hover {
    background-color: var(--theme-select2-hover-bg);
    color: var(--theme-select2-highlight-fg);
}

/* Link hover - app.css:225 resolves it to var(--bs-body-color), which under a
   theme means links fade to the body text colour instead of showing a brand
   hover. Classic's token repeats var(--bs-body-color), so it is unchanged.
   .btn and .nav-link are excluded: several buttons in this app are anchors
   (the Create button is an <a class="btn btn-info">), and tab / sidebar links
   carry their own hover colour. */
a:not(.btn):not(.nav-link):not(:is(li a)):hover {
    color: var(--theme-link-hover);
}

/* Plain .btn / .btn-default text actions - the toolbar row of Refresh,
   Download Template, Import Resources, Import History, Export Beneficiaries,
   Export IC Report. These are <a class="btn btn-sm"> (61 uses) and
   .btn-default (110 uses), so the rule above deliberately skips them.
   Safe to target .btn broadly: every coloured variant (primary, secondary,
   success, info, warning, danger, dark, light) pins its own hover colour at
   `.btn-X:hover:not(:disabled):not(.disabled)` - specificity (0,4,0) - which
   outranks this (0,2,0), so only the uncoloured buttons are affected. */
.btn:hover,
.btn-default:hover,
.btn-default.hover {
    color: var(--theme-btn-plain-hover-fg);
}

/* Anchors used as buttons WITHOUT an href. Bootstrap and AdminLTE both ship
   `a:not([href]):hover { color: inherit }` at (0,2,1), which outranks the
   (0,2,0) rule above - so those elements silently ignore the hover colour.
   22 anchors in this codebase are written that way, e.g.
     <a role="button" id="export-beneficiaries-btn" class="btn btn-sm" onclick=...>
   (Employee/Index.cshtml:170), versus its neighbour Export IC Report which
   does carry href='javascript:void(0)'.
   a.btn:not([href]):hover is (0,3,1) and wins. Coloured variants stay safe:
   their `.btn-X:hover:not(:disabled):not(.disabled)` guards are (0,4,0). */
a.btn:not([href]):hover {
    color: var(--theme-btn-plain-hover-fg);
}

/* DataTables pagination - the "Previous 1 2 3 4 5" strip. Scoped to
   .new_custom_table to match the upstream rules it overrides
   (custom-styles.css:1613 hover, :1621 current, both #2e71d5, the current
   one !important). Tables without .new_custom_table fall back to
   DataTables' own white/grey gradient, which is palette-neutral. */
.new_custom_table .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.new_custom_table .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--theme-page-current-bg) !important;
    color: var(--theme-page-current-fg) !important;
}

.new_custom_table .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--theme-page-hover-bg) !important;
    color: var(--theme-page-hover-fg) !important;
}

/* DataTables toolbar inputs: the "Show [50] entries" select
   (custom-styles.css:1602) and the Search box (app.css:15809). Neither had a
   hover or focus treatment of any kind - both sat at a flat #ccc border in
   every state - so these rules add them.
   The page-size control is themeable only while CLOSED: its open option list
   is a native popup painted by the browser with the OS highlight colour,
   outside the page's DOM and therefore out of CSS's reach.
   The focus outline is replaced rather than removed. Classic adds no glow, so
   `outline: none` would leave keyboard users with no focus indicator at all;
   Classic's token is `auto` (the UA ring) and GoGlobal swaps in a Magenta one
   so the indicator stays visible without clashing. */
/* Bootstrap form controls - every text input, textarea and .form-select in
   the app, including the company switcher at the top of the layout
   (_Layout.cshtml:149). app.css:2318 / :2528 give them all the same blue
   focus ring; this repoints it at the theme.
   Only border-color and box-shadow are touched, so app.css's background and
   text colour on :focus survive, and the (0,3,0) validation rules keep their
   green / red rings in both themes.
   As with the page-size control, the switcher is a native <select> - its OPEN
   option list is a browser popup and cannot be themed from CSS. */
.form-control:focus,
.form-select:focus {
    border-color: var(--theme-form-focus-border);
    box-shadow: var(--theme-form-focus-glow);
}

.new_custom_table .dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    border-color: var(--theme-input-border);
}

.new_custom_table .dataTables_wrapper .dataTables_length select:hover,
.dataTables_wrapper .dataTables_filter input:hover {
    border-color: var(--theme-input-hover-border);
}

.new_custom_table .dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--theme-input-focus-border);
    box-shadow: var(--theme-input-focus-glow);
}

/* The focus RING is the one theme-scoped rule in this file, and deliberately
   so. The browser draws its focus ring from its own :focus-visible rule, so
   any author `outline` declaration on :focus replaces it whatever the value -
   `auto` resolved to black 2.4px on the search input and `revert` removed the
   ring entirely. Declaring it only under GoGlobal leaves Classic's native
   ring completely untouched, which is both the no-regression answer and the
   accessible one. */
html[data-theme="goglobal"] .new_custom_table .dataTables_wrapper .dataTables_length select:focus,
html[data-theme="goglobal"] .dataTables_wrapper .dataTables_filter input:focus {
    outline: 2px solid var(--theme-input-focus-border);
    outline-offset: 1px;
}

/* Disabled buttons. app.css declares these separately from the enabled state
   (3249 / 3293 / 3337 / 3381) at HIGHER specificity, so without this the
   disabled colour wins and a button that starts disabled shows its old
   palette colour until script enables it - the green/teal flash on
   #createClientAction (Receivable.cshtml:1436) was exactly this. */
.btn-primary.disabled,
.btn-primary:disabled {
    background-color: var(--theme-btn-primary-disabled);
    border-color: var(--theme-btn-primary-disabled);
    color: var(--theme-btn-disabled-fg);
}

.btn-secondary.disabled,
.btn-secondary:disabled {
    background-color: var(--theme-btn-secondary-disabled);
    border-color: var(--theme-btn-secondary-disabled);
    color: var(--theme-btn-disabled-fg);
}

.btn-success.disabled,
.btn-success:disabled {
    background-color: var(--theme-btn-success-disabled) !important;
    border-color: var(--theme-btn-success-disabled) !important;
    color: var(--theme-btn-disabled-fg);
}

.btn-info.disabled,
.btn-info:disabled {
    background-color: var(--theme-btn-info-disabled);
    border-color: var(--theme-btn-info-disabled);
    color: var(--theme-btn-disabled-fg);
}


/* ------------------------------------------------- SweetAlert2 dialogs ----
   The "Info" / "Success" / "Alert" popups raised by ShowMessage(), Confirm()
   and ToastMessage() (wwwroot/Scripts/AlertMessage/SweetalertV01.02.js, on
   top of wwwroot/Scripts/sweetalertlocal.js).

   WHY !important IS UNAVOIDABLE HERE
   getColor() in SweetalertV01.02.js hands SweetAlert2 a hardcoded hex per
   message type (#2ba3b6 for Info, #239B56 for Success, ...) as
   confirmButtonColor. SweetAlert2 does not turn that into a stylesheet rule -
   it writes it straight onto the element as an INLINE style
   (sweetalertlocal.js:555, `t.style.backgroundColor = o.confirmButtonColor`).
   An inline style outranks every selector in every stylesheet, so this file
   could not repaint the button no matter how specific the selector was.
   `!important` on a declaration is the one thing that does beat a
   non-important inline style, which is why it is used below.

   WHY CLASSIC IS EXCLUDED
   The colour is per message type, not per theme: Classic's popups are green
   for success, dark red for error and teal for info. A blanket override
   collapses all of those to one colour, which is correct for GoGlobal (whose
   palette has a single key-action colour) but would be a visible regression
   for Classic. Written as :not(altios-classic) rather than [data-theme=
   "goglobal"] so a new theme copied from the GoGlobal block picks this up
   with no edit here, per the "ADDING A THEME" note at the top of this file.
   -------------------------------------------------------------------------- */
html[data-theme]:not([data-theme="altios-classic"]) .swal2-container .swal2-styled.swal2-confirm,
html[data-theme]:not([data-theme="altios-classic"]) .swal2-popup .swal2-styled.swal2-confirm {
    background-color: var(--theme-dialog-confirm-bg) !important;
    border-color: var(--theme-dialog-confirm-bg) !important;
    color: var(--theme-dialog-confirm-fg) !important;
}

html[data-theme]:not([data-theme="altios-classic"]) .swal2-container .swal2-styled.swal2-confirm:hover,
html[data-theme]:not([data-theme="altios-classic"]) .swal2-container .swal2-styled.swal2-confirm:focus,
html[data-theme]:not([data-theme="altios-classic"]) .swal2-container .swal2-styled.swal2-confirm:active {
    background-color: var(--theme-dialog-confirm-hover) !important;
    border-color: var(--theme-dialog-confirm-hover) !important;
}

/* Stock focus ring is a hardcoded purple rgba(112,102,224,.5)
   (sweetalertlocal.js, .swal2-confirm:focus). Not inline, but the upstream
   rule is inside a :where() wrapper at the same specificity, so !important
   keeps it deterministic alongside the rules above. */
html[data-theme]:not([data-theme="altios-classic"]) .swal2-container .swal2-styled.swal2-confirm:focus {
    box-shadow: 0 0 0 3px var(--theme-dialog-confirm-glow) !important;
}


/* Dialog icons - the circled glyph above the title. Stock values live in the
   stylesheet sweetalertlocal.js injects at runtime, NOT inline, so no
   !important is needed: upstream is `div:where(.swal2-icon).swal2-info`
   (0,1,1 - :where() contributes nothing) and the rules below are (0,2,0).
   Applied to every theme, Classic included, because Classic's tokens repeat
   the stock colours. */
.swal2-icon.swal2-info {
    border-color: var(--theme-dialog-icon-info-ring);
    color: var(--theme-dialog-icon-info-fg);
}

.swal2-icon.swal2-error {
    border-color: var(--theme-dialog-icon-error-ring);
    color: var(--theme-dialog-icon-error-fg);
}

/* The error X is drawn as two positioned <span>s filled with background-color,
   not as text, so the `color` above does not reach it. */
.swal2-icon.swal2-error [class^="swal2-x-mark-line"] {
    background-color: var(--theme-dialog-icon-error-fg);
}