/*
 * VirgilTrack tokens mapped onto Bootstrap 5.3 / Metronic 8 (B-01, B-02, B-03).
 * Loaded straight after assets/css/style.bundle.css, so the same selectors win by source order.
 *
 * Metronic components read these --bs-* variables, so most of the app takes the brand colours, the neutral scale,
 * the AA status colours and the type scale without markup changes. Values come from vt-tokens.css; the only literals
 * here are the r, g, b triplets that Bootstrap needs for rgba(var(--bs-*-rgb), …).
 *
 * Do not add page rules here: shared component rules go in vt-components.css, page rules stay with the page.
 */

/* ── Colours that follow the theme (light and dark resolve through the vt tokens) ── */
:root, [data-bs-theme=light], [data-bs-theme=dark] {
  /* Brand */
  --bs-primary: var(--vt-primary);
  --bs-primary-active: var(--vt-primary-hover);
  --bs-primary-light: var(--vt-primary-soft);
  --bs-primary-inverse: var(--vt-on-primary);
  --bs-text-primary: var(--vt-primary);
  --bs-link-color: var(--vt-link);
  --bs-link-hover-color: var(--vt-primary-hover);
  --bs-component-active-bg: var(--vt-primary);
  --bs-component-active-color: var(--vt-on-primary);
  --bs-component-checked-bg: var(--vt-primary);
  --bs-component-checked-color: var(--vt-on-primary);
  --bs-component-hover-color: var(--vt-primary);
  --bs-component-hover-bg: var(--bs-gray-100);
  --bs-menu-link-color-hover: var(--vt-primary);
  --bs-menu-link-color-show: var(--vt-primary);
  --bs-menu-link-color-here: var(--vt-primary);
  --bs-menu-link-color-active: var(--vt-primary);
  --bs-menu-link-bg-color-hover: var(--bs-gray-100);
  --bs-menu-link-bg-color-show: var(--bs-gray-100);
  --bs-menu-link-bg-color-here: var(--bs-gray-100);
  --bs-menu-link-bg-color-active: var(--bs-gray-100);
  --bs-menu-heading-color: var(--vt-text-subtle);
  --bs-scrolltop-bg-color: var(--vt-primary);
  --bs-scrolltop-bg-color-hover: var(--vt-primary-hover);
  --bs-scrolltop-icon-color: var(--vt-on-primary);
  --bs-scrolltop-icon-color-hover: var(--vt-on-primary);
  --bs-ribbon-label-bg: var(--vt-primary);
  --bs-ribbon-label-border-color: var(--vt-primary-hover);
  --bs-primary-text-emphasis: var(--vt-brand-800);
  --bs-primary-bg-subtle: var(--vt-primary-soft);
  --bs-primary-border-subtle: color-mix(in srgb, var(--vt-primary) 35%, var(--vt-surface));

  /* Status: solid fills (bars, dots, icons), *-light = soft backgrounds, text utilities = the AA *-text colours.
     Metronic's purple info (#7239EA) is retired: info is the brand blue. */
  --bs-success: var(--vt-success);
  --bs-success-active: var(--vt-success-text);
  --bs-success-light: var(--vt-success-soft);
  --bs-text-success: var(--vt-success-text);
  --bs-success-text-emphasis: var(--vt-success-text);
  --bs-success-bg-subtle: var(--vt-success-soft);
  --bs-success-border-subtle: color-mix(in srgb, var(--vt-success) 35%, var(--vt-surface));
  --bs-warning: var(--vt-warning);
  --bs-warning-active: var(--vt-warning-text);
  --bs-warning-light: var(--vt-warning-soft);
  --bs-text-warning: var(--vt-warning-text);
  --bs-warning-text-emphasis: var(--vt-warning-text);
  --bs-warning-bg-subtle: var(--vt-warning-soft);
  --bs-warning-border-subtle: color-mix(in srgb, var(--vt-warning) 35%, var(--vt-surface));
  --bs-danger: var(--vt-danger);
  --bs-danger-active: var(--vt-danger-text);
  --bs-danger-light: var(--vt-danger-soft);
  --bs-text-danger: var(--vt-danger);
  --bs-danger-text-emphasis: var(--vt-danger-text);
  --bs-danger-bg-subtle: var(--vt-danger-soft);
  --bs-danger-border-subtle: color-mix(in srgb, var(--vt-danger) 35%, var(--vt-surface));
  --bs-info: var(--vt-info);
  --bs-info-active: var(--vt-primary-hover);
  --bs-info-light: var(--vt-info-soft);
  --bs-info-inverse: var(--vt-on-primary);
  --bs-text-info: var(--vt-info);
  --bs-info-text-emphasis: var(--vt-info-text);
  --bs-info-bg-subtle: var(--vt-info-soft);
  --bs-info-border-subtle: color-mix(in srgb, var(--vt-info) 35%, var(--vt-surface));
  --bs-form-valid-color: var(--vt-success-text);
  --bs-form-valid-border-color: var(--vt-success);
  --bs-form-invalid-color: var(--vt-danger);
  --bs-form-invalid-border-color: var(--vt-danger);

  /* Text, surfaces and borders */
  --bs-body-color: var(--vt-text);
  --bs-body-bg: var(--vt-surface);
  --bs-heading-color: var(--vt-text);
  --bs-emphasis-color: var(--vt-text);
  --bs-text-muted: var(--vt-text-muted);
  --bs-secondary-color: var(--vt-text-muted);
  --bs-tertiary-color: var(--vt-text-subtle);
  --bs-secondary-bg: var(--vt-surface-muted);
  --bs-tertiary-bg: var(--bs-gray-100);
  --bs-highlight-bg: var(--vt-warning-soft);
  --bs-highlight-color: var(--vt-text);
  --bs-border-color: var(--vt-border);
  --bs-border-dashed-color: var(--vt-border-strong);
  --bs-root-card-border-color: var(--vt-border);
  --bs-root-card-box-shadow: var(--vt-shadow-sm);
  --bs-app-bg-color: var(--vt-bg);
  --bs-app-blank-bg-color: var(--vt-bg);
  --bs-app-header-minimize-bg-color: var(--vt-surface);
  --bs-app-toolbar-base-bg-color: var(--vt-surface);
  --bs-app-toolbar-base-border-top: 1px dashed var(--vt-border-strong);
  --bs-app-aside-base-bg-color: var(--vt-surface);
  --bs-app-sidebar-light-bg-color: var(--vt-surface);
  --bs-dropdown-bg: var(--vt-surface);
  --bs-menu-dropdown-bg-color: var(--vt-surface);
  --bs-drawer-bg-color: var(--vt-surface);
  --bs-input-bg: var(--vt-surface);
  --bs-input-solid-bg: var(--vt-surface);
  --bs-input-solid-bg-focus: var(--vt-surface);
  --bs-input-solid-placeholder-color: var(--vt-text-subtle);
  --bs-scrollbar-color: var(--vt-border);
  --bs-scrollbar-hover-color: var(--vt-border-strong);

  /* Type, shape and depth */
  --bs-font-sans-serif: var(--vt-font-body);
  --bs-body-font-family: var(--vt-font-body);
  --bs-border-radius-sm: var(--vt-radius-sm);
  --bs-border-radius: var(--vt-radius-sm);
  --bs-border-radius-lg: var(--vt-radius);
  --bs-border-radius-xl: var(--vt-radius-lg);
  --bs-border-radius-xxl: var(--vt-radius-lg);
  --bs-border-radius-pill: var(--vt-radius-pill);
  --bs-box-shadow-xs: var(--vt-shadow-sm);
  --bs-box-shadow-sm: var(--vt-shadow-sm);
  --bs-box-shadow: var(--vt-shadow);
  --bs-box-shadow-lg: var(--vt-shadow-lg);
}

/* ── Literal values that differ by theme (rgb triplets and the neutral scale) ── */
:root, [data-bs-theme=light] {
  --bs-primary-rgb: 25, 91, 187;
  --bs-primary-clarity: rgb(25 91 187 / .2);
  --bs-link-color-rgb: 25, 91, 187;
  --bs-link-hover-color-rgb: 19, 74, 154;
  --bs-focus-ring-color: rgb(25 91 187 / .25);
  --bs-success-rgb: 18, 161, 80;
  --bs-success-clarity: rgb(18 161 80 / .2);
  --bs-success-inverse: #FFFFFF;
  --bs-warning-rgb: 224, 148, 18;
  --bs-warning-clarity: rgb(224 148 18 / .2);
  --bs-warning-inverse: var(--vt-ink);            /* white on #E09412 is 2.50:1; ink is 6.90:1 */
  --bs-danger-rgb: 216, 27, 74;
  --bs-danger-clarity: rgb(216 27 74 / .2);
  --bs-danger-inverse: #FFFFFF;                   /* 5.03:1 */
  --bs-info-rgb: 43, 102, 194;
  --bs-info-clarity: rgb(43 102 194 / .2);
  --bs-body-color-rgb: 11, 27, 51;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-emphasis-color-rgb: 11, 27, 51;
  --bs-secondary-color-rgb: 77, 90, 112;
  --bs-tertiary-color-rgb: 107, 119, 140;

  /* Metronic's neutral scale moved onto the vt greys (gray-100 is the lightest fill, gray-900 the darkest text) */
  --bs-gray-100: var(--vt-paper);    --bs-gray-100-rgb: 248, 249, 251;
  --bs-gray-200: var(--vt-gray-100); --bs-gray-200-rgb: 238, 241, 245;
  --bs-gray-300: var(--vt-gray-200); --bs-gray-300-rgb: 221, 226, 234;
  --bs-gray-400: var(--vt-gray-300); --bs-gray-400-rgb: 195, 202, 214;
  --bs-gray-500: var(--vt-gray-500); --bs-gray-500-rgb: 107, 119, 140;
  --bs-gray-600: var(--vt-gray-600); --bs-gray-600-rgb: 77, 90, 112;
  --bs-gray-700: var(--vt-gray-700); --bs-gray-700-rgb: 58, 70, 90;
  --bs-gray-800: var(--vt-gray-900); --bs-gray-800-rgb: 23, 35, 56;
  --bs-gray-900: var(--vt-ink);      --bs-gray-900-rgb: 11, 27, 51;
  --bs-gray: var(--vt-gray-600);
  --bs-gray-dark: var(--vt-gray-900);
  /* .text-gray-* utilities: Metronic's #99A1B7 and #78829D fail AA on white (2.58:1, 3.96:1), so both muted steps
     use the muted text colour (6.97:1) and gray-400 the subtle one (4.52:1). */
  --bs-text-gray-100: var(--vt-paper);
  --bs-text-gray-200: var(--vt-gray-100);
  --bs-text-gray-300: var(--vt-gray-200);
  --bs-text-gray-400: var(--vt-text-subtle);
  --bs-text-gray-500: var(--vt-text-muted);
  --bs-text-gray-600: var(--vt-text-muted);
  --bs-text-gray-700: var(--vt-gray-700);
  --bs-text-gray-800: var(--vt-gray-900);
  --bs-text-gray-900: var(--vt-ink);

  --bs-secondary: var(--vt-gray-100);
  --bs-secondary-rgb: 238, 241, 245;
  --bs-secondary-active: var(--vt-gray-200);
  --bs-secondary-light: var(--vt-paper);
  --bs-secondary-inverse: var(--vt-gray-700);
  --bs-text-secondary: var(--vt-gray-100);
  --bs-light: var(--vt-paper);
  --bs-light-rgb: 248, 249, 251;
  --bs-light-active: var(--vt-gray-100);
  --bs-light-inverse: var(--vt-gray-700);
  --bs-text-light: var(--vt-paper);
  --bs-dark: var(--vt-gray-900);
  --bs-dark-rgb: 23, 35, 56;
  --bs-dark-active: var(--vt-ink);
  --bs-dark-light: var(--vt-gray-100);
  --bs-dark-inverse: #FFFFFF;
  --bs-text-dark: var(--vt-gray-900);
}

[data-bs-theme=dark] {
  --bs-primary-rgb: 79, 138, 224;
  --bs-primary-clarity: rgb(79 138 224 / .2);
  --bs-link-color-rgb: 140, 181, 238;
  --bs-link-hover-color-rgb: 185, 209, 244;
  --bs-link-hover-color: var(--vt-brand-200);
  --bs-focus-ring-color: rgb(79 138 224 / .35);
  --bs-success-rgb: 47, 191, 111;
  --bs-success-clarity: rgb(47 191 111 / .2);
  --bs-success-inverse: var(--vt-brand-950);     /* white on #2FBF6F is 2.39:1 */
  --bs-warning-rgb: 242, 169, 59;
  --bs-warning-clarity: rgb(242 169 59 / .2);
  --bs-warning-inverse: var(--vt-brand-950);
  --bs-danger-rgb: 242, 85, 122;
  --bs-danger-clarity: rgb(242 85 122 / .2);
  --bs-danger-inverse: var(--vt-brand-950);      /* white on #F2557A is 3.30:1; navy 5.19:1 */
  --bs-info-rgb: 79, 138, 224;
  --bs-info-clarity: rgb(79 138 224 / .2);
  --bs-body-color-rgb: 232, 237, 245;
  --bs-body-bg-rgb: 14, 26, 46;
  --bs-emphasis-color-rgb: 232, 237, 245;
  --bs-secondary-color-rgb: 169, 180, 198;
  --bs-tertiary-color-rgb: 138, 151, 172;

  /* Dark neutral scale: gray-100 is the darkest fill, gray-900 the lightest text (the order Metronic's dark theme uses) */
  --bs-gray-100: var(--vt-surface-muted); --bs-gray-100-rgb: 19, 34, 58;
  --bs-gray-200: var(--vt-border);        --bs-gray-200-rgb: 36, 50, 74;
  --bs-gray-300: var(--vt-border-strong); --bs-gray-300-rgb: 51, 68, 95;
  --bs-gray-400: #4A5A75;                 --bs-gray-400-rgb: 74, 90, 117;
  --bs-gray-500: var(--vt-text-subtle);   --bs-gray-500-rgb: 138, 151, 172;
  --bs-gray-600: var(--vt-text-muted);    --bs-gray-600-rgb: 169, 180, 198;
  --bs-gray-700: var(--vt-gray-300);      --bs-gray-700-rgb: 195, 202, 214;
  --bs-gray-800: var(--vt-gray-200);      --bs-gray-800-rgb: 221, 226, 234;
  --bs-gray-900: var(--vt-text);          --bs-gray-900-rgb: 232, 237, 245;
  --bs-gray: var(--vt-text-muted);
  --bs-gray-dark: var(--vt-gray-200);
  --bs-text-gray-100: var(--vt-surface-muted);
  --bs-text-gray-200: var(--vt-border);
  --bs-text-gray-300: var(--vt-border-strong);
  --bs-text-gray-400: var(--vt-text-subtle);
  --bs-text-gray-500: var(--vt-text-muted);
  --bs-text-gray-600: var(--vt-text-muted);
  --bs-text-gray-700: var(--vt-gray-300);
  --bs-text-gray-800: var(--vt-gray-200);
  --bs-text-gray-900: var(--vt-text);

  --bs-secondary: var(--vt-border);
  --bs-secondary-rgb: 36, 50, 74;
  --bs-secondary-active: var(--vt-border-strong);
  --bs-secondary-light: var(--vt-surface-muted);
  --bs-secondary-inverse: var(--vt-text);
  --bs-text-secondary: var(--vt-border);
  --bs-light: var(--vt-surface-muted);
  --bs-light-rgb: 19, 34, 58;
  --bs-light-active: var(--vt-border);
  --bs-light-inverse: var(--vt-text-muted);
  --bs-text-light: var(--vt-surface-muted);
  --bs-dark: var(--vt-neutral-soft);
  --bs-dark-rgb: 26, 38, 57;
  --bs-dark-active: var(--vt-border);
  --bs-dark-light: var(--vt-surface-muted);
  --bs-dark-inverse: var(--vt-text);
  --bs-text-dark: var(--vt-text);
  --bs-app-header-base-bg-color: var(--vt-bg);
  --bs-drawer-overlay-bg-color: rgb(0 0 0 / .5);
}

/* ── B-02: soft badges and light buttons carry the AA *-text colour ──
   Scoping the variable on the element keeps Metronic's hover rules working: the hover fill becomes the same deep
   colour with white (light) or navy (dark) text, which also passes. */
.badge-light-success, .btn.btn-light-success { --bs-success: var(--vt-success-text); }
.badge-light-warning, .btn.btn-light-warning { --bs-warning: var(--vt-warning-text); --bs-warning-inverse: var(--vt-surface); }
.badge-light-danger,  .btn.btn-light-danger  { --bs-danger: var(--vt-danger-text); --bs-danger-inverse: var(--vt-surface); }
.badge-light-info,    .btn.btn-light-info    { --bs-info: var(--vt-info-text); --bs-info-inverse: var(--vt-surface); }
.badge-light-primary, .btn.btn-light-primary { --bs-primary: var(--vt-primary-hover); }
.badge-light, .badge-light-secondary, .badge-light-dark { color: var(--vt-neutral-text); background-color: var(--vt-neutral-soft); }
/* Solid success buttons and badges carry text: white on #12A150 is 3.37:1, so they use the deep green (6.63:1). */
.btn.btn-success, .badge-success {
  --bs-success: var(--vt-success-text);
  --bs-success-active: color-mix(in srgb, var(--vt-success-text) 82%, var(--vt-ink));
}
[data-bs-theme=dark] .btn.btn-success, [data-bs-theme=dark] .badge-success {
  --bs-success-active: color-mix(in srgb, var(--vt-success-text) 82%, var(--vt-white));
}

/* Cards: one border, one radius, one shadow */
.card {
  --bs-card-border-radius: var(--vt-radius);
  --bs-card-inner-border-radius: calc(var(--vt-radius) - 1px);
}

/* One outlined input style (the solid grey fill is retired) */
.form-control.form-control-solid, .form-select.form-select-solid {
  background-color: var(--vt-surface);
  border-color: var(--vt-border-strong);
}
.dropdown.show > .form-control.form-control-solid, .form-control.form-control-solid:active, .form-control.form-control-solid.active,
.form-control.form-control-solid:focus, .form-control.form-control-solid.focus,
.form-select.form-select-solid:focus, .form-select.form-select-solid:active {
  background-color: var(--vt-surface);
  border-color: var(--vt-primary);
}

/* B-22: checkboxes and radios. Unticked is an outline on the surface, never the grey fill that read as disabled; ticked
   is the brand blue; disabled is faded on the muted surface with a dashed edge. A switch that is off has a grey track,
   so its white knob stays visible. */
.form-check-input:not(:checked):not(:indeterminate),
.form-check.form-check-solid .form-check-input:not(:checked):not(:indeterminate) {
  background-color: var(--vt-surface);
  border: 1px solid var(--vt-border-strong);
}
.form-check-input:checked, .form-check-input[type=checkbox]:indeterminate,
.form-check.form-check-solid .form-check-input[type=checkbox]:indeterminate {
  background-color: var(--vt-primary);
  border-color: var(--vt-primary);
}
.form-check.form-switch .form-check-input:not(:checked):not(:indeterminate),
.form-check.form-switch.form-check-solid .form-check-input:not(:checked):not(:indeterminate) {
  background-color: var(--vt-border-strong);
  border: 1px solid var(--vt-border-strong);
}
.form-check-input:disabled:not(:checked):not(:indeterminate),
.form-check.form-check-solid .form-check-input:disabled:not(:checked):not(:indeterminate) {
  background-color: var(--vt-surface-muted);
  border-style: dashed;
}
.form-check.form-switch .form-check-input:disabled:not(:checked):not(:indeterminate),
.form-check.form-switch.form-check-solid .form-check-input:disabled:not(:checked):not(:indeterminate) {
  background-color: var(--vt-border-strong);
  border-style: solid;
}
.form-check-input:disabled { cursor: not-allowed; }

/* A visible keyboard focus ring everywhere (mouse clicks don't show it) */
a:focus-visible, button:focus-visible, .btn:focus-visible, .menu-link:focus-visible, [role=button]:focus-visible,
[tabindex]:focus-visible, .form-check-input:focus-visible {
  outline: 2px solid var(--vt-primary);
  outline-offset: 2px;
}

/* ── B-03: type scale. Root 14 px at every width (OD-08); nothing renders below 12 px ── */
html, body {
  font-size: 14px !important;
  font-family: var(--vt-font-body);
}
body { line-height: var(--vt-leading-normal); }

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { line-height: var(--vt-leading-tight); }
h1, .h1 { font-size: var(--vt-text-2xl); }   /* page title */
h2, .h2 { font-size: var(--vt-text-xl); }    /* section and dialog title */
h3, .h3, h4, .h4 { font-size: var(--vt-text-lg); } /* card title */
h5, .h5, h6, .h6 { font-size: var(--vt-text-md); }
h1, .h1, h2, .h2, h3, .h3, .page-heading { font-family: var(--vt-font-display); }

/* The small utilities: Metronic's .fs-9 was 9.75 px and .fs-10 6.5 px at the old 13 px root */
.fs-5 { font-size: var(--vt-text-lg) !important; }
.fs-6, .fs-base { font-size: var(--vt-text-md) !important; }
.fs-7, .fs-sm { font-size: var(--vt-text-sm) !important; }
.fs-8, .fs-9, .fs-10 { font-size: var(--vt-text-xs) !important; }
.fs-lg { font-size: var(--vt-text-lg) !important; }

/* Buttons, inputs and labels at 14 px (13 px small, 16 px large) */
.btn { --bs-btn-font-size: var(--vt-text-md); }
.btn.btn-sm, .btn-group-sm > .btn { --bs-btn-font-size: var(--vt-text-sm); }
.btn.btn-lg, .btn-group-lg > .btn { --bs-btn-font-size: var(--vt-text-lg); }
.form-control, .form-select { font-size: var(--vt-text-md); }
.form-control.form-control-sm, .form-select.form-select-sm { font-size: var(--vt-text-sm); }
.form-control.form-control-lg, .form-select.form-select-lg { font-size: var(--vt-text-lg); }
.form-label { font-size: var(--vt-text-md); }
.badge { --bs-badge-font-size: var(--vt-text-xs); }