/**
 * Brand Tokens CSS Layer
 * =====================
 *
 * This file defines the 10 brand colour tokens + 1 font token specified in the
 * Branding & Whitelabelling spec (Stage 1). These CSS custom properties serve as
 * the single source of truth for the portal's visual identity.
 *
 * HOW IT WORKS:
 * 1. Brand tokens are defined on :root with MultiPortal defaults (spec Section 4.1).
 * 2. In LIGHT MODE ONLY, Velzon's --vz-* variables are overridden to read from brand tokens.
 * 3. Dark mode is left untouched — Velzon's built-in dark theme values are used as-is.
 * 4. A server-rendered <style> block in head-css.php sets token values per-entity.
 *
 * IMPORTANT: All bridges and element overrides are scoped to light mode via
 * :root:not([data-bs-theme="dark"]) or html:not([data-bs-theme="dark"]).
 * This ensures dark mode colours from app.min.css are never overridden.
 *
 * TOKEN MAP (Spec Name -> CSS Variable -> Default — classic MultiPortal appearance):
 *   Primary        -> --color-primary       -> #152961
 *   Primary Dark   -> --color-primary-dark   -> #152961
 *   Accent         -> --color-accent         -> #099885
 *   Background     -> --color-bg             -> #f3f3f9
 *   Surface        -> --color-surface        -> #FFFFFF
 *   Sidebar BG     -> --color-sidebar-bg     -> #152961
 *   Sidebar Text   -> --color-sidebar-text   -> #abb9e8
 *   Text Primary   -> --color-text-primary   -> #212529
 *   Text Secondary -> --color-text-secondary -> #878a99
 *   Border         -> --color-border         -> #e9ebec
 *   Font Family    -> --font-family          -> "Poppins", sans-serif
 */

/* ==========================================================================
   1. BRAND TOKEN DEFINITIONS (always available on :root)
   ========================================================================== */

:root {
    --color-primary: #152961;
    --color-primary-dark: #152961;
    --color-accent: #099885;
    --color-bg: #f3f3f9;
    --color-surface: #FFFFFF;
    --color-sidebar-bg: #152961;
    --color-sidebar-text: #abb9e8;
    --color-text-primary: #212529;
    --color-text-secondary: #878a99;
    --color-border: #e9ebec;
    --font-family: "Poppins", sans-serif;
}


/* ==========================================================================
   2a. BRIDGE: Brand Font -> Velzon Font Variables (ALL MODES, ALL THEMES)
   ==========================================================================
   Velzon hardcodes --vz-font-family-primary/secondary per theme in app.min.css
   (e.g. [data-theme=default]{--vz-font-family-primary:'hkgrotesk',sans-serif}).
   Body, headings, and the sidebar all resolve their font through these vars,
   so the brand --font-family token is invisible without an explicit bridge.

   The selector list covers both:
   1. Layouts that render data-theme on <html> (main.php, login, setup,
      maintenance — via partials/main.php).
   2. Layouts that don't (profile.php, blank.php) — :root still matches.

   :root, [data-theme], and [data-theme=...] all have specificity (0,1,0).
   brand-tokens.css is loaded after app.min.css (head-css.php:87 → :91),
   so source order ensures our bridge wins for every theme value the
   customizer can produce. The logged-in user's resolved brand font
   (SP → Reseller → Tenant cascade from BrandingConfig::resolveForCompany)
   then propagates through every Velzon component that references
   --vz-font-family-primary, --vz-font-family-secondary, or
   --vz-headings-font-family — including body, headings, sidebar items,
   GridView tables, sweetalert, apexcharts, ckeditor, quill, jvm tooltip,
   leaflet, fullcalendar, and select2.
   ========================================================================== */

:root,
[data-theme] {
    --vz-font-family-primary: var(--font-family);
    --vz-font-family-secondary: var(--font-family);
    --vz-headings-font-family: var(--font-family);
}


/* ==========================================================================
   2. BRIDGE: Brand Tokens -> Velzon Variables (LIGHT MODE ONLY)
   ==========================================================================
   Override Velzon's --vz-* variables to read from brand tokens.
   Scoped to light mode so dark mode values from app.min.css are preserved.
   ========================================================================== */

:root:not([data-bs-theme="dark"]) {
    /* Primary colour */
    --vz-primary: var(--color-primary);
    /* --vz-primary-rgb is computed server-side in head-css.php */

    /* Accent/Secondary colour */
    --vz-secondary: var(--color-accent);
    /* --vz-secondary-rgb is computed server-side in head-css.php */

    /* Page background */
    --vz-body-bg: var(--color-bg);

    /* Surface colour */
    --vz-secondary-bg: var(--color-surface);
    --vz-tertiary-bg: var(--color-surface);
    --vz-input-bg-custom: var(--color-surface);
    --vz-input-border-custom: var(--color-border);

    /* Text colours */
    --vz-body-color: var(--color-text-primary);
    --vz-heading-color: var(--color-text-primary);
    --vz-emphasis-color: var(--color-text-primary);
    --vz-highlight-color: var(--color-text-primary);
    --vz-secondary-color: var(--color-text-secondary);
    --vz-tertiary-color: var(--color-text-secondary);

    /* Link colour */
    --vz-link-color: var(--color-accent);
    --vz-link-hover-color: var(--color-primary);

    /* Border colour */
    --vz-border-color: var(--color-border);
    --vz-border-color-translucent: var(--color-border);
}


/* ==========================================================================
   3. SIDEBAR OVERRIDES (Spec Section 4) — LIGHT MODE ONLY
   ==========================================================================
   In light mode, the sidebar uses branded colours.
   In dark mode, Velzon sets [data-bs-theme=dark][data-sidebar=dark] with
   its own dark sidebar (#212529). We must NOT override that.
   ========================================================================== */

[data-theme="default"][data-sidebar="dark"]:not([data-bs-theme="dark"]) {
    --vz-vertical-menu-bg: var(--color-sidebar-bg);
    --vz-vertical-menu-border: var(--color-sidebar-bg);
    --vz-vertical-menu-item-color: var(--color-sidebar-text);
    --vz-vertical-menu-item-hover-color: #fff;
    --vz-vertical-menu-item-active-color: #fff;
    --vz-vertical-menu-item-active-bg: rgba(255, 255, 255, 0.15);
    --vz-vertical-menu-sub-item-color: var(--color-sidebar-text);
    --vz-vertical-menu-sub-item-hover-color: #fff;
    --vz-vertical-menu-sub-item-active-color: #fff;
    --vz-vertical-menu-title-color: var(--color-sidebar-text);
    --vz-sidebar-user-bg: rgba(255, 255, 255, 0.08);
    --vz-sidebar-user-name-text: #fff;
    --vz-sidebar-user-name-sub-text: var(--color-sidebar-text);
}


/* ==========================================================================
   4. LOGIN PAGE OVERRIDES (Spec Section 7)
   ========================================================================== */

.auth-one-bg .bg-overlay {
    background: linear-gradient(to left, var(--color-primary), var(--color-primary-dark)) !important;
    opacity: 0.9;
}

.auth-page-wrapper .btn-login-primary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
}

.auth-page-wrapper .btn-login-primary:hover,
.auth-page-wrapper .btn-login-primary:focus {
    background-color: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
    color: #fff !important;
}


/* ==========================================================================
   5. PAGINATION
   ========================================================================== */

.pagination li.active {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* Pager links → primary, primary-dark on hover. Covers both the Bootstrap 5
   pager (.page-item/.page-link) and the plain Yii LinkPager markup
   (.pagination > li > a). The active page keeps white text on the primary
   fill. Light mode only. */
html:not([data-bs-theme="dark"]) .pagination li > a {
    color: var(--color-primary);
}

html:not([data-bs-theme="dark"]) .pagination li > a:hover,
html:not([data-bs-theme="dark"]) .page-link:hover {
    color: var(--color-primary-dark);
}

html:not([data-bs-theme="dark"]) .page-item.active .page-link,
html:not([data-bs-theme="dark"]) .pagination li.active > a,
html:not([data-bs-theme="dark"]) .pagination li.active > span {
    color: #fff;
}


/* ==========================================================================
   5b. LINK COLOUR OVERRIDE (LIGHT MODE ONLY)
   ========================================================================== */

html:not([data-bs-theme="dark"]) a {
    color: var(--color-accent);
}

html:not([data-bs-theme="dark"]) a:hover {
    color: var(--color-primary);
}


/* ==========================================================================
   5c. DIRECT ELEMENT TEXT COLOUR OVERRIDES (LIGHT MODE ONLY)
   ==========================================================================
   Many Bootstrap/Velzon components use rgba(var(--vz-*-rgb), ...) for text
   which breaks with hex vars. Override directly, but ONLY in light mode.
   ========================================================================== */

/* --- PRIMARY TEXT (light mode only) --- */

html:not([data-bs-theme="dark"]) body {
    color: var(--color-text-primary);
}

html:not([data-bs-theme="dark"]) h1,
html:not([data-bs-theme="dark"]) h2,
html:not([data-bs-theme="dark"]) h3,
html:not([data-bs-theme="dark"]) h4,
html:not([data-bs-theme="dark"]) h5,
html:not([data-bs-theme="dark"]) h6,
html:not([data-bs-theme="dark"]) .h1,
html:not([data-bs-theme="dark"]) .h2,
html:not([data-bs-theme="dark"]) .h3,
html:not([data-bs-theme="dark"]) .h4,
html:not([data-bs-theme="dark"]) .h5,
html:not([data-bs-theme="dark"]) .h6 {
    color: var(--color-text-primary);
}

html:not([data-bs-theme="dark"]) .table > :not(caption) > * > * {
    color: var(--color-text-primary);
}

/* The cell-colour rule above applies a direct colour to every td/th, which
   defeats Bootstrap's .text-white utility on a table row (the cell's own colour
   beats the colour inherited from the row). Honour .text-white rows so stat
   tables on dark cards (e.g. the data-center bg-primary card) stay legible. */
html:not([data-bs-theme="dark"]) .table > :not(caption) > .text-white > * {
    color: #fff !important;
}

html:not([data-bs-theme="dark"]) .table th,
html:not([data-bs-theme="dark"]) .table th.text-muted,
html:not([data-bs-theme="dark"]) .table th a {
    color: var(--color-text-primary) !important;
}

html:not([data-bs-theme="dark"]) .table td a {
    color: var(--color-primary);
}

html:not([data-bs-theme="dark"]) .table td a:hover {
    color: var(--color-primary-dark);
}

html:not([data-bs-theme="dark"]) .card-animate .text-uppercase.text-muted,
html:not([data-bs-theme="dark"]) .card-body .text-uppercase.text-muted {
    color: var(--color-text-primary) !important;
}

html:not([data-bs-theme="dark"]) .card-title {
    color: var(--color-text-primary);
}

html:not([data-bs-theme="dark"]) .page-title-box h4,
html:not([data-bs-theme="dark"]) .page-title-box .page-title {
    color: var(--color-text-primary);
}

html:not([data-bs-theme="dark"]) .breadcrumb-item a {
    color: var(--color-primary);
}

html:not([data-bs-theme="dark"]) .breadcrumb-item a:hover {
    color: var(--color-primary-dark);
}

html:not([data-bs-theme="dark"]) .breadcrumb-item.active {
    color: var(--color-text-secondary);
}

html:not([data-bs-theme="dark"]) .breadcrumb-item + .breadcrumb-item::before {
    color: var(--color-text-secondary);
}

html:not([data-bs-theme="dark"]) .dropdown-item {
    color: var(--color-text-primary);
}

html:not([data-bs-theme="dark"]) .dropdown-header {
    color: var(--color-text-secondary);
}

html:not([data-bs-theme="dark"]) .form-label,
html:not([data-bs-theme="dark"]) .col-form-label {
    color: var(--color-text-primary);
}

html:not([data-bs-theme="dark"]) .form-control {
    color: var(--color-text-primary);
}

html:not([data-bs-theme="dark"]) .form-select {
    color: var(--color-text-primary);
}

/* --- SECONDARY TEXT (light mode only) --- */

html:not([data-bs-theme="dark"]) .text-muted {
    color: var(--color-text-secondary) !important;
}

html:not([data-bs-theme="dark"]) .accordion-body {
    color: var(--color-text-primary);
}

html:not([data-bs-theme="dark"]) .main-content .nav-link,
html:not([data-bs-theme="dark"]) .card .nav-link,
html:not([data-bs-theme="dark"]) .modal .nav-link,
html:not([data-bs-theme="dark"]) .offcanvas .nav-link {
    color: var(--color-text-primary);
}

/* --- UTILITY CLASS OVERRIDES (light mode only) --- */

html:not([data-bs-theme="dark"]) .text-dark {
    color: var(--color-text-primary) !important;
}

/* Bootstrap's .text-dark does not flip in dark mode, so dark-on-dark text (e.g.
   a reseller/company name rendered as a .text-dark link) becomes invisible.
   Force it light in dark mode. */
[data-bs-theme="dark"] .text-dark {
    color: #fff !important;
}

html:not([data-bs-theme="dark"]) .text-body {
    color: var(--color-text-primary) !important;
}

html:not([data-bs-theme="dark"]) .text-body-secondary {
    color: var(--color-text-secondary) !important;
}

html:not([data-bs-theme="dark"]) .text-body-tertiary {
    color: var(--color-text-secondary) !important;
}

html:not([data-bs-theme="dark"]) .text-black {
    color: var(--color-text-primary) !important;
}

html:not([data-bs-theme="dark"]) .text-primary {
    color: var(--color-primary) !important;
}

html:not([data-bs-theme="dark"]) .text-secondary {
    color: var(--color-accent) !important;
}

html:not([data-bs-theme="dark"]) .text-primary-emphasis {
    color: var(--color-primary-dark) !important;
}


/* ==========================================================================
   5d. REMAINING ELEMENT OVERRIDES (LIGHT MODE ONLY)
   ========================================================================== */

html:not([data-bs-theme="dark"]) .form-floating > .form-control:focus ~ label,
html:not([data-bs-theme="dark"]) .form-floating > .form-control:not(:placeholder-shown) ~ label,
html:not([data-bs-theme="dark"]) .form-floating > .form-control-plaintext ~ label,
html:not([data-bs-theme="dark"]) .form-floating > .form-select ~ label {
    color: var(--color-text-secondary);
}

html:not([data-bs-theme="dark"]) .form-text {
    color: var(--color-text-secondary);
}

html:not([data-bs-theme="dark"]) .input-group-text {
    color: var(--color-text-primary);
}

html:not([data-bs-theme="dark"]) .blockquote-footer {
    color: var(--color-text-secondary);
}

html:not([data-bs-theme="dark"]) legend {
    color: var(--color-text-primary);
}

html:not([data-bs-theme="dark"]) dt {
    color: var(--color-text-primary);
}

html:not([data-bs-theme="dark"]) dd {
    color: var(--color-text-primary);
}

html:not([data-bs-theme="dark"]) .list-group-item {
    color: var(--color-text-primary);
}

html:not([data-bs-theme="dark"]) .modal-title {
    color: var(--color-text-primary);
}

html:not([data-bs-theme="dark"]) .offcanvas-title {
    color: var(--color-text-primary);
}

html:not([data-bs-theme="dark"]) .toast-header {
    color: var(--color-text-primary);
}

html:not([data-bs-theme="dark"]) .alert {
    color: var(--color-text-primary);
}

/* Accent alert variant — used in place of Bootstrap's .alert-info so contextual
   notes follow the brand accent instead of the default blue. Properties are set
   directly (not just the --bs-alert-* vars) because this Bootstrap build does
   not consume those variables on .alert. Theme-aware: the tint mixes from the
   surface colour so it works in light and dark mode and re-themes with the
   accent token. */
.alert-accent {
    --bs-alert-bg: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
    --bs-alert-border-color: var(--color-accent);
    --bs-alert-link-color: var(--color-accent);
    background-color: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
    border-color: var(--color-accent);
}

.alert-accent .alert-link {
    color: var(--color-accent);
}

/* Dark mode: fall back to the default Bootstrap info alert (as in 1.1.3).
   The accent tint reads poorly on dark surfaces, so restore the stock
   .alert-info look using the theme-aware info tokens. Direct properties are
   needed because .alert-accent sets background/border-color directly, which
   would otherwise win over the base .alert variable consumption. */
html[data-bs-theme="dark"] .alert-accent {
    --vz-alert-color: var(--vz-info-text-emphasis);
    --vz-alert-bg: var(--vz-info-bg-subtle);
    --vz-alert-border-color: var(--vz-info-border-subtle);
    --vz-alert-link-color: var(--vz-info-text-emphasis);
    background-color: var(--vz-info-bg-subtle);
    border-color: var(--vz-info-border-subtle);
    color: var(--vz-info-text-emphasis);
}

html[data-bs-theme="dark"] .alert-accent .alert-link {
    color: var(--vz-info-text-emphasis);
}

/* Data Center status badges: light mode keeps the inline green/red keywords for
   palette consistency with the usage columns. Those inline colours are too dark
   on dark surfaces, so override them here with brighter, accessible variants.
   !important is required to beat the element's inline style. */
html[data-bs-theme="dark"] .dc-status-enabled {
    color: #51cf66 !important;
}

html[data-bs-theme="dark"] .dc-status-disabled {
    color: #ff6b6b !important;
}

html:not([data-bs-theme="dark"]) .page-link {
    color: var(--color-primary);
}

html:not([data-bs-theme="dark"]) ::placeholder {
    color: var(--color-text-secondary) !important;
}

html:not([data-bs-theme="dark"]) .counter-value,
html:not([data-bs-theme="dark"]) .counter-suffix {
    color: var(--color-text-primary);
}

html:not([data-bs-theme="dark"]) .ff-secondary {
    color: var(--color-text-primary);
}


/* ==========================================================================
   5e. BUTTON OVERRIDES (LIGHT MODE ONLY)
   ==========================================================================
   In light mode, btn-primary uses the brand colour.
   In dark mode, Velzon's built-in dark button styles apply untouched.
   ========================================================================== */

html:not([data-bs-theme="dark"]) .btn-primary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
}

html:not([data-bs-theme="dark"]) .btn-primary:hover,
html:not([data-bs-theme="dark"]) .btn-primary:focus,
html:not([data-bs-theme="dark"]) .btn-primary:active,
html:not([data-bs-theme="dark"]) .btn-primary.active {
    background-color: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
    color: #fff !important;
}

html:not([data-bs-theme="dark"]) .btn-primary:disabled,
html:not([data-bs-theme="dark"]) .btn-primary.disabled {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    opacity: 0.65;
}

html:not([data-bs-theme="dark"]) .btn-outline-primary {
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

html:not([data-bs-theme="dark"]) .btn-outline-primary:hover,
html:not([data-bs-theme="dark"]) .btn-outline-primary:focus,
html:not([data-bs-theme="dark"]) .btn-outline-primary:active,
html:not([data-bs-theme="dark"]) .btn-outline-primary.active,
html:not([data-bs-theme="dark"]) .btn-check:checked + .btn-outline-primary,
html:not([data-bs-theme="dark"]) .btn-check:active + .btn-outline-primary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
}

/* --- Success button — uses accent colour in light mode for brand consistency.
   Dark mode reverts to Velzon's default green. --- */

html:not([data-bs-theme="dark"]) .btn-success {
    background-color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: #fff !important;
}

html:not([data-bs-theme="dark"]) .btn-success:hover,
html:not([data-bs-theme="dark"]) .btn-success:focus,
html:not([data-bs-theme="dark"]) .btn-success:active,
html:not([data-bs-theme="dark"]) .btn-success.active {
    background-color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    filter: brightness(0.9);
    color: #fff !important;
}

html:not([data-bs-theme="dark"]) .btn-outline-success {
    color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
}

html:not([data-bs-theme="dark"]) .btn-outline-success:hover,
html:not([data-bs-theme="dark"]) .btn-outline-success:focus,
html:not([data-bs-theme="dark"]) .btn-outline-success:active {
    background-color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: #fff !important;
}

/* --- Danger button — keep Velzon's danger-red background (destructive action
   must stay visually distinct) but force WHITE label text. Without this, a
   .btn-danger rendered as an anchor (e.g. the VDC view "Delete" button) inherits
   the generic light-mode `a { color: var(--color-accent) }` rule above, so its
   label takes the brand accent colour and blends into the button / branded
   background. .btn-primary and .btn-success already force white text the same
   way; this restores parity for .btn-danger. --- */

html:not([data-bs-theme="dark"]) .btn-danger {
    color: #fff !important;
}

html:not([data-bs-theme="dark"]) .btn-danger:hover,
html:not([data-bs-theme="dark"]) .btn-danger:focus,
html:not([data-bs-theme="dark"]) .btn-danger:active,
html:not([data-bs-theme="dark"]) .btn-danger.active {
    color: #fff !important;
}

/* --- A .btn-danger rendered as a dropdown menu item (e.g. the VM actions
   "Delete" link) sits on the white dropdown surface, where the forced white
   label above is invisible. Restore dark text for this combination only so it
   matches the other items in the menu; standalone .btn-danger buttons keep
   their white-on-red label. More specific (.dropdown-item.btn-danger) so it
   wins over the rule above, including hover/focus/active. --- */

html:not([data-bs-theme="dark"]) .dropdown-item.btn-danger,
html:not([data-bs-theme="dark"]) .dropdown-item.btn-danger:hover,
html:not([data-bs-theme="dark"]) .dropdown-item.btn-danger:focus,
html:not([data-bs-theme="dark"]) .dropdown-item.btn-danger:active,
html:not([data-bs-theme="dark"]) .dropdown-item.btn-danger.active {
    color: var(--color-text-primary) !important;
}

/* --- Info button — keep Velzon's info background but force WHITE label text.
   Same anchor-leak fix as .btn-danger above: a .btn-info rendered as an anchor
   (e.g. the VDC view "Console" button) would otherwise inherit the generic
   `a { color: var(--color-accent) }` rule and lose its white label. --- */

html:not([data-bs-theme="dark"]) .btn-info {
    color: #fff !important;
}

html:not([data-bs-theme="dark"]) .btn-info:hover,
html:not([data-bs-theme="dark"]) .btn-info:focus,
html:not([data-bs-theme="dark"]) .btn-info:active,
html:not([data-bs-theme="dark"]) .btn-info.active {
    color: #fff !important;
}

/* --- Secondary button — keep Velzon's secondary (grey) background but force
   WHITE label text. Same anchor-leak fix as above: a .btn-secondary rendered as
   an anchor (e.g. the "Cancel" link on the login form) would otherwise inherit
   the generic `a { color: var(--color-accent) }` rule and lose its white label. --- */

html:not([data-bs-theme="dark"]) .btn-secondary {
    color: #fff !important;
}

html:not([data-bs-theme="dark"]) .btn-secondary:hover,
html:not([data-bs-theme="dark"]) .btn-secondary:focus,
html:not([data-bs-theme="dark"]) .btn-secondary:active,
html:not([data-bs-theme="dark"]) .btn-secondary.active {
    color: #fff !important;
}

/* --- Warning button — keep Velzon's warning background but force WHITE label
   text. Same anchor-leak fix as above: a .btn-warning rendered as an anchor
   (e.g. the user "Reset Password" button) would otherwise inherit the generic
   `a { color: var(--color-accent) }` rule and lose its white label. --- */

html:not([data-bs-theme="dark"]) .btn-warning {
    color: #fff !important;
}

html:not([data-bs-theme="dark"]) .btn-warning:hover,
html:not([data-bs-theme="dark"]) .btn-warning:focus,
html:not([data-bs-theme="dark"]) .btn-warning:active,
html:not([data-bs-theme="dark"]) .btn-warning.active {
    color: #fff !important;
}

/* --- GridView column-selector button — kartik GridView renders the "Columns"
   toggle as a .btn-outline-secondary with id "{gridId}-cols". Retint it to the
   brand primary (outline-primary look) so it matches the primary action style;
   fills primary on hover / when the dropdown is open. Scoped to the -cols id so
   other outline-secondary buttons keep their grey. --- */

html:not([data-bs-theme="dark"]) .btn-outline-secondary[id$="-cols"] {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

html:not([data-bs-theme="dark"]) .btn-outline-secondary[id$="-cols"]:hover,
html:not([data-bs-theme="dark"]) .btn-outline-secondary[id$="-cols"]:focus,
html:not([data-bs-theme="dark"]) .btn-outline-secondary[id$="-cols"]:active,
html:not([data-bs-theme="dark"]) .btn-outline-secondary[id$="-cols"].show {
    color: #fff;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* --- SweetAlert2 confirm button — retint to the brand primary. SweetAlert2
   writes confirmButtonColor as an inline background-color, so instead of matching
   the library's default blue (which would break silently if that default or its
   whitespace ever changed), we retint EVERY confirm button that is NOT the
   destructive red (#d33 → rgb(221, 51, 51)). This covers the default blue, the
   explicit #3085d6 sites, and call sites that set no colour at all, while leaving
   delete/destructive dialogs red. Both spaced and unspaced rgb() forms of the red
   are excluded so the exclusion stays robust across library versions. Applies in
   both themes since the dialog button is brand-coloured in both. --- */
.swal2-popup .swal2-styled.swal2-confirm:not([style*="221, 51, 51"]):not([style*="221,51,51"]) {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

/* --- Firewall-management toggle — ON = brand accent, OFF = theme default.
   ActiveForm also adds Bootstrap's .is-valid class to this input, which tints
   the switch success-green (green border even when unchecked, green fill when
   checked). The .is-valid selectors below neutralise that so the toggle reads
   purely as on/off, not validation state. Scoped to this switch by id. --- */
#firewall_enabled:checked,
#firewall_enabled.is-valid:checked,
#firewall_enabled.is-invalid:checked {
    background-color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
}

#firewall_enabled:not(:checked),
#firewall_enabled.is-valid:not(:checked),
#firewall_enabled.is-invalid:not(:checked) {
    background-color: var(--vz-form-check-bg) !important;
    border-color: var(--vz-border-color-translucent) !important;
}

/* Focus ring: .is-valid:focus paints a green glow that lingers after clicking
   (the toggle keeps focus), so replace it with a neutral brand-primary glow in
   both checked/unchecked states. */
#firewall_enabled:focus {
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--color-primary) 20%, transparent) !important;
}

/* Firewall toggle label + ⓘ icon follow the switch state: accent when ON,
   muted grey when OFF (the icon inherits this colour, so it has no class of its
   own). Also overrides the .is-valid green-label leak. :has() is used because
   the label sits before the input in this markup, so a sibling selector can't
   reach back to it. */
html:not([data-bs-theme="dark"]) .form-switch:has(#firewall_enabled:checked) label[for="firewall_enabled"] {
    color: var(--color-accent) !important;
}

html:not([data-bs-theme="dark"]) .form-switch:has(#firewall_enabled:not(:checked)) label[for="firewall_enabled"] {
    color: var(--color-text-secondary) !important;
}


/* ==========================================================================
   5f. BACKGROUND COLOUR OVERRIDES (LIGHT MODE ONLY)
   ========================================================================== */

html:not([data-bs-theme="dark"]) .bg-primary-subtle {
    background-color: color-mix(in srgb, var(--color-primary) 10%, white) !important;
}

html:not([data-bs-theme="dark"]) .badge.bg-primary-subtle {
    color: var(--color-primary) !important;
}

html:not([data-bs-theme="dark"]) .bg-secondary-subtle {
    background-color: color-mix(in srgb, var(--color-accent) 10%, white) !important;
}

html:not([data-bs-theme="dark"]) .badge.bg-secondary-subtle {
    color: var(--color-accent) !important;
}

/* Dashboard VDC grid: the "Running VMs" count is a neutral status indicator,
   not a brand element. Exempt it from the accent override above so an idle
   (0 running) VDC keeps Bootstrap's native secondary colours — restores the
   pre-branding (v1.1.3) appearance without unbranding secondary badges
   elsewhere in the app. */
html:not([data-bs-theme="dark"]) #vdc-index .badge.bg-secondary-subtle {
    background-color: var(--vz-secondary-bg-subtle) !important;
    color: var(--vz-secondary-color) !important;
}


/* ==========================================================================
   5g. FORM INPUT BACKGROUND & BORDER (LIGHT MODE ONLY)
   ========================================================================== */

html:not([data-bs-theme="dark"]) .form-control,
html:not([data-bs-theme="dark"]) .form-select {
    background-color: var(--color-surface);
    border-color: var(--color-border);
}

html:not([data-bs-theme="dark"]) .form-control:focus,
html:not([data-bs-theme="dark"]) .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--color-primary) 25%, transparent);
}


/* ==========================================================================
   5h. CARD & SURFACE BACKGROUND (LIGHT MODE ONLY)
   ========================================================================== */

html:not([data-bs-theme="dark"]) .card {
    background-color: var(--color-surface);
    border-color: var(--color-border);
}

html:not([data-bs-theme="dark"]) .modal-content {
    background-color: var(--color-surface);
}

html:not([data-bs-theme="dark"]) .offcanvas {
    background-color: var(--color-surface);
}

html:not([data-bs-theme="dark"]) .dropdown-menu {
    background-color: var(--color-surface);
    border-color: var(--color-border);
}


/* ==========================================================================
   5i. VM / CATALOGUE SUMMARY CARD (.card-vm on .bg-primary)
   ==========================================================================
   The summary card sits on the primary (navy) fill, so its content must be
   white. The view markup carries inline `color: var(--color-text-primary)` /
   `--color-text-secondary` styles that render near-black on that fill. Override
   exactly those inline-styled elements (their child icons/text inherit) to
   white. Scoped to the inline tokens so badges, the Actions dropdown items
   (white popover) and .btn-* buttons keep their own colours. Applies in both
   themes because the card is navy in light and dark mode alike. */
.card-vm [style*="--color-text-primary"],
.card-vm [style*="--color-text-secondary"],
.card-vm .table th,
.card-vm .table td,
.card-vm .table a {
    color: #fff !important;
}


/* ==========================================================================
   6. UTILITY: ACCENT TEXT (LIGHT MODE ONLY)
   Uses --color-accent in light mode, inherits default body colour in dark mode.
   ========================================================================== */

html:not([data-bs-theme="dark"]) .text-brand-accent {
    color: var(--color-accent) !important;
}

/* Primary counterpart of .text-brand-accent — for icons/badges that should
   carry the primary brand colour rather than the accent. Light mode only;
   inherits the default body colour in dark mode (primary is too dark to read
   on a dark surface). */
html:not([data-bs-theme="dark"]) .text-brand-primary {
    color: var(--color-primary) !important;
}
