/* =====================================================================================================================
   MRCM Portal v2, theme team (owner 2026-10-13): "small icon on top for light version and dark version; by default follow
   system, with a toggle". Loaded after mrcm-v2.css by <x-v2.theme.head /> (layouts/v2/app + guest).
   1. The switch (both themes)       2. Dark-mode fixes (every rule scoped to [data-bs-theme=dark]; the light theme is unchanged)
   Dark palette = the UI audit's navy set (docs/v2-teams/ui-audit.md section 3): card #111D33, page #0B1424, surface #16233D,
   subtle #1C2D52, line #26365A, text #DCE3EF, heading #F3F6FB, muted #A9B5CC, link #9DB8EE / #B9CBF2, button #2C5291.
   Contrast ratios of every new pair: docs/v2-teams/theme.md section 4.
   ===================================================================================================================== */

/* ---------- 1. The switch ---------- */
/* The button shows the CURRENT choice; body[data-theme-choice] is set before the first paint, so the icon never flashes. */
.v2-theme-btn [data-for] { display: none; line-height: 1; }
body:not([data-theme-choice]) .v2-theme-btn [data-for=system],
body[data-theme-choice=system] .v2-theme-btn [data-for=system],
body[data-theme-choice=light] .v2-theme-btn [data-for=light],
body[data-theme-choice=dark] .v2-theme-btn [data-for=dark] { display: inline-block; }
.header-right .nav-link.v2-theme-btn { padding: 0; width: 44px; }
.dropdown-menu.v2-theme-menu { min-width: 15rem; padding: .375rem; }
.v2-theme-menu .dropdown-item { display: flex; align-items: center; gap: .75rem; min-height: 48px; padding: .5rem .75rem; border-radius: .5rem; white-space: normal; color: #13213D; }
.v2-theme-menu .dropdown-item > .bi:first-child { font-size: 1.125rem; width: 1.25rem; text-align: center; flex: none; }
.v2-theme-text { flex: 1; display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.v2-theme-name { font-weight: 500; }
.v2-theme-text small { color: var(--mrcm-muted); font-size: .75rem; }
.v2-theme-tick { visibility: hidden; flex: none; font-size: 1.125rem; }
.v2-theme-menu .dropdown-item[aria-checked=true] { background: #E8EDF5; color: #172E54; }
.v2-theme-menu .dropdown-item[aria-checked=true] .v2-theme-name { font-weight: 600; }
.v2-theme-menu .dropdown-item[aria-checked=true] .v2-theme-tick { visibility: visible; }
.v2-theme-menu .dropdown-item:hover, .v2-theme-menu .dropdown-item:focus { background: #F1F3F7; color: #13213D; }
.v2-theme-menu .dropdown-item[aria-checked=true]:hover, .v2-theme-menu .dropdown-item[aria-checked=true]:focus { background: #DDE5F1; color: #172E54; }
.v2-theme-menu .dropdown-item:focus-visible { outline-offset: -3px; }
/* Sign-in pages (guest layout): the switch sits in the top-right corner of the page */
.v2-theme-corner { position: absolute; top: .75rem; right: .75rem; z-index: 1030; }
.v2-theme-corner .v2-theme-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: .5rem; border: 1px solid var(--mrcm-line); background: #fff; color: #172E54; font-size: 1.25rem; box-shadow: 0 1px 2px rgba(19, 41, 75, .06); }
.v2-theme-corner .v2-theme-btn:hover { border-color: #1F3A68; }
@media (max-width: 991.98px) { .auth-body .mrcm-auth-form { padding-top: 4.25rem; } }

[data-bs-theme=dark] .v2-theme-menu .dropdown-item { color: #F3F6FB; }
[data-bs-theme=dark] .v2-theme-menu .dropdown-item:hover, [data-bs-theme=dark] .v2-theme-menu .dropdown-item:focus { background: #1F3052; color: #F3F6FB; }
[data-bs-theme=dark] .v2-theme-menu .dropdown-item[aria-checked=true] { background: #1C2D52; color: #F3F6FB; box-shadow: inset 3px 0 0 #9DB8EE; }
[data-bs-theme=dark] .v2-theme-menu .dropdown-item[aria-checked=true] .v2-theme-tick { color: #9DB8EE; }
[data-bs-theme=dark] .v2-theme-corner .v2-theme-btn { background: #111D33; border-color: #26365A; color: #B9CBF2; }
[data-bs-theme=dark] .v2-theme-corner .v2-theme-btn:hover { border-color: #9DB8EE; }

/* ---------- 2. Dark-mode fixes ---------- */
/* 2a. Tokens. mrcm-overrides.css section 1 sets these on body[data-primary=color_3], which out-ranks Tixia's
   [data-bs-theme=dark] block, so in dark mode they kept their LIGHT values (light alert backgrounds under light text,
   dark-grey muted text, navy link hover, dark-red form errors). Same selector weight as section 6, so it wins. */
body[data-bs-theme=dark][data-primary=color_3] {
  --bs-body-color-rgb: 220, 227, 239;
  --bs-emphasis-color: #F3F6FB;
  --bs-emphasis-color-rgb: 243, 246, 251;
  --bs-secondary-color: #A9B5CC;
  --bs-secondary-color-rgb: 169, 181, 204;
  --bs-tertiary-color: #8D9AB5;
  --bs-link-hover-color-rgb: 185, 203, 242;
  --bs-primary-text-emphasis: #B9CBF2;
  --bs-primary-border-subtle: #3A5488;
  --bs-secondary-text-emphasis: #5FCFBF;
  --bs-secondary-bg-subtle: #123A37;
  --bs-secondary-border-subtle: #1F5C55;
  --bs-success-text-emphasis: #7FD49A;
  --bs-success-bg-subtle: #173A25;
  --bs-success-border-subtle: #2A5C3B;
  --bs-info-text-emphasis: #8FC3F0;
  --bs-info-bg-subtle: #18324D;
  --bs-info-border-subtle: #2A527A;
  --bs-warning-text-emphasis: #FFC56B;
  --bs-warning-bg-subtle: #3A2A0E;
  --bs-warning-border-subtle: #6B4D16;
  --bs-danger-text-emphasis: #FF9B8F;
  --bs-danger-bg-subtle: #3D1A1A;
  --bs-danger-border-subtle: #6E2A26;
  --bs-light-bg-subtle: #16233D;
  --bs-dark-bg-subtle: #0E1A30;
  --bs-form-invalid-color: #FF9B8F;
  --bs-form-invalid-border-color: #FF9B8F;
  --bs-form-valid-color: #7FD49A;
  --bs-form-valid-border-color: #7FD49A;
  --mrcm-accent-subtle: #123A37;
}

/* 2b. Text colour utilities: Bootstrap paints them with the light status colours (2.6 : 1 on the dark card) */
[data-bs-theme=dark] .text-success { color: #7FD49A !important; }
[data-bs-theme=dark] .text-danger { color: #FF9B8F !important; }
[data-bs-theme=dark] .text-warning { color: #FFC56B !important; }
[data-bs-theme=dark] .text-info { color: #8FC3F0 !important; }
[data-bs-theme=dark] .text-primary { color: #9DB8EE !important; }
[data-bs-theme=dark] .text-secondary { color: #5FCFBF !important; }
[data-bs-theme=dark] .text-muted, [data-bs-theme=dark] .text-body-secondary { color: #A9B5CC !important; }
[data-bs-theme=dark] .text-dark, [data-bs-theme=dark] .text-body-emphasis { color: #F3F6FB !important; }
[data-bs-theme=dark] .link-primary { color: #9DB8EE !important; }
[data-bs-theme=dark] .save-state .bi { color: #5FCFBF; }

/* 2c. Alerts: Bootstrap's subtle alert colours (now from the dark tokens above) + a readable link colour */
[data-bs-theme=dark] .alert { --bs-alert-link-color: currentColor; }
[data-bs-theme=dark] .alert-primary { --bs-alert-color: #B9CBF2; --bs-alert-bg: #1C2D52; --bs-alert-border-color: #3A5488; }
[data-bs-theme=dark] .alert-secondary { --bs-alert-color: #5FCFBF; --bs-alert-bg: #123A37; --bs-alert-border-color: #1F5C55; }
[data-bs-theme=dark] .alert-success { --bs-alert-color: #7FD49A; --bs-alert-bg: #173A25; --bs-alert-border-color: #2A5C3B; }
[data-bs-theme=dark] .alert-info { --bs-alert-color: #8FC3F0; --bs-alert-bg: #18324D; --bs-alert-border-color: #2A527A; }
[data-bs-theme=dark] .alert-warning { --bs-alert-color: #FFC56B; --bs-alert-bg: #3A2A0E; --bs-alert-border-color: #6B4D16; }
[data-bs-theme=dark] .alert-danger { --bs-alert-color: #FF9B8F; --bs-alert-bg: #3D1A1A; --bs-alert-border-color: #6E2A26; }
[data-bs-theme=dark] .alert-light { --bs-alert-color: #DCE3EF; --bs-alert-bg: #16233D; --bs-alert-border-color: #26365A; }
[data-bs-theme=dark] .alert-dark { --bs-alert-color: #DCE3EF; --bs-alert-bg: #0E1A30; --bs-alert-border-color: #26365A; }
[data-bs-theme=dark] .alert, [data-bs-theme=dark] .alert strong, [data-bs-theme=dark] .alert .alert-heading { color: var(--bs-alert-color); }
[data-bs-theme=dark] .alert .bi { color: inherit; }

/* 2d. Buttons. Tixia's dark .btn-light is near black (#0F1021) on the dark card; outline danger / success / warning /
   info use the light status colours (4.4 : 1 and below). */
body[data-bs-theme=dark] .btn-light {
  --bs-btn-color: #F3F6FB; --bs-btn-bg: #1C2D52; --bs-btn-border-color: #2E4472;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #26395F; --bs-btn-hover-border-color: #3A5488;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #2C4470; --bs-btn-active-border-color: #4A659A;
  --bs-btn-disabled-color: #A9B5CC; --bs-btn-disabled-bg: #16233D; --bs-btn-disabled-border-color: #26365A;
}
body[data-bs-theme=dark] .btn-outline-danger { --bs-btn-color: #FF9B8F; --bs-btn-border-color: #FF9B8F; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #B42318; --bs-btn-hover-border-color: #B42318; --bs-btn-active-color: #fff; --bs-btn-active-bg: #921C13; --bs-btn-active-border-color: #921C13; --bs-btn-disabled-color: #FF9B8F; }
body[data-bs-theme=dark] .btn-outline-success { --bs-btn-color: #7FD49A; --bs-btn-border-color: #7FD49A; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #146C35; --bs-btn-hover-border-color: #146C35; --bs-btn-active-color: #fff; --bs-btn-active-bg: #0F5629; --bs-btn-active-border-color: #0F5629; --bs-btn-disabled-color: #7FD49A; }
body[data-bs-theme=dark] .btn-outline-warning { --bs-btn-color: #FFC56B; --bs-btn-border-color: #FFC56B; --bs-btn-hover-color: #0B1424; --bs-btn-hover-bg: #FFC56B; --bs-btn-hover-border-color: #FFC56B; --bs-btn-active-color: #0B1424; --bs-btn-active-bg: #F0B455; --bs-btn-disabled-color: #FFC56B; }
body[data-bs-theme=dark] .btn-outline-info { --bs-btn-color: #8FC3F0; --bs-btn-border-color: #8FC3F0; --bs-btn-hover-color: #0B1424; --bs-btn-hover-bg: #8FC3F0; --bs-btn-hover-border-color: #8FC3F0; --bs-btn-active-color: #0B1424; --bs-btn-active-bg: #7AB2E2; --bs-btn-disabled-color: #8FC3F0; }
body[data-bs-theme=dark] .btn-outline-secondary { --bs-btn-color: #5FCFBF; --bs-btn-border-color: #5FCFBF; --bs-btn-hover-color: #0B1424; --bs-btn-hover-bg: #5FCFBF; --bs-btn-hover-border-color: #5FCFBF; --bs-btn-active-color: #0B1424; --bs-btn-active-bg: #4FC1B1; --bs-btn-disabled-color: #5FCFBF; }
body[data-bs-theme=dark] .btn-outline-dark, body[data-bs-theme=dark] .btn-outline-light { --bs-btn-color: #DCE3EF; --bs-btn-border-color: #5D6E92; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #26395F; --bs-btn-hover-border-color: #9DB8EE; --bs-btn-active-color: #fff; --bs-btn-active-bg: #2C4470; }
body[data-bs-theme=dark] .btn-link { --bs-btn-color: #9DB8EE; --bs-btn-hover-color: #B9CBF2; --bs-btn-active-color: #B9CBF2; --bs-btn-disabled-color: #8D9AB5; }

/* 2e. Shell and navigation */
[data-bs-theme=dark] .page-title .breadcrumb li.active, [data-bs-theme=dark] .page-title .breadcrumb li.active a,
[data-bs-theme=dark] .page-title .breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: #9DB8EE !important; }
[data-bs-theme=dark] .sort-btn .bi, [data-bs-theme=dark] th[aria-sort] .sort-btn .bi, [data-bs-theme=dark] th .sort-btn .bi.v2-sort-on { color: #B9CBF2; }
[data-bs-theme=dark] .pagination { --bs-pagination-disabled-color: #8D9AB5; --bs-pagination-disabled-bg: transparent; --bs-pagination-disabled-border-color: #26365A; }
[data-bs-theme=dark] .dropdown-menu { --bs-dropdown-bg: #16233D; --bs-dropdown-border-color: #26365A; --bs-dropdown-link-color: #F3F6FB; --bs-dropdown-link-hover-color: #F3F6FB; --bs-dropdown-link-hover-bg: #1F3052; --bs-dropdown-header-color: #A9B5CC; --bs-dropdown-divider-bg: #26365A; --bs-dropdown-link-disabled-color: #8D9AB5; --bs-dropdown-link-active-bg: #2C5291; --bs-dropdown-link-active-color: #fff; }
[data-bs-theme=dark] .notif-item.is-unread .notif-title::after { background: #9DB8EE; }
/* Tixia gives the active sidebar icon a white box; on the dark theme's pale pill it showed as a white square */
body[data-bs-theme=dark][data-sidebarbg] .deznav .metismenu > li.mm-active > a i { background: transparent !important; }

/* 2f. Sign-in page: link tiles and the phone logo (the coloured logo is navy on navy; use the white one, as on the panel) */
[data-bs-theme=dark] .auth-alt a .bi { color: #9DB8EE; }
[data-bs-theme=dark] .auth-alt a:hover { background: #1C2D52; border-color: #9DB8EE; }
[data-bs-theme=dark] .auth-home-link img { content: url("../img/logo-white.png"); filter: brightness(0) invert(1); }
body[data-bs-theme=dark] .btn-warning { --bs-btn-color: #0B1424; --bs-btn-bg: #FFC56B; --bs-btn-border-color: #FFC56B; --bs-btn-hover-color: #0B1424; --bs-btn-hover-bg: #F0B455; --bs-btn-hover-border-color: #F0B455; --bs-btn-active-color: #0B1424; --bs-btn-active-bg: #E5A63F; --bs-btn-active-border-color: #E5A63F; --bs-btn-disabled-color: #0B1424; --bs-btn-disabled-bg: #FFC56B; --bs-btn-disabled-border-color: #FFC56B; }
/* Tixia paints every solid button text white (#fff on the dark-mode amber is 1.6 : 1) */
body[data-bs-theme=dark] .btn.btn-warning, body[data-bs-theme=dark] .btn.btn-warning:hover, body[data-bs-theme=dark] .btn.btn-warning:focus, body[data-bs-theme=dark] .btn.btn-warning:active { color: #0B1424 !important; }

/* 2g. Focus: the light theme's navy focus ring and input focus border disappear on the dark navy surfaces */
[data-bs-theme=dark] .form-control:focus, [data-bs-theme=dark] .form-select:focus { border-color: #9DB8EE; box-shadow: 0 0 0 .2rem rgba(157, 184, 238, .35); }
[data-bs-theme=dark] .yesno .btn-check:focus-visible + .btn, [data-bs-theme=dark] .option-tiles .btn-check:focus-visible + label,
[data-bs-theme=dark] .dropzone-mrcm:focus-within, [data-bs-theme=dark] .screen-card:focus-within { outline-color: #9DB8EE; }

/* 2h. Light-tinted chips, icons, tiles and chart marks (bright squares or invisible navy marks on the dark page) */
[data-bs-theme=dark] .avatar.light-primary { background: #1C2D52; color: #B9CBF2; }
[data-bs-theme=dark] .avatar.light-success { background: #173A25; color: #7FD49A; }
[data-bs-theme=dark] .avatar.light-warning { background: #3A2A0E; color: #FFC56B; }
[data-bs-theme=dark] .avatar.light-danger { background: #3D1A1A; color: #FF9B8F; }
[data-bs-theme=dark] .avatar.light-info { background: #18324D; color: #8FC3F0; }
[data-bs-theme=dark] .doc-list .doc-icon { background: #3D1A1A; color: #FF9B8F; }
[data-bs-theme=dark] .doc-list .doc-icon.img { background: #18324D; color: #8FC3F0; }
[data-bs-theme=dark] .file-thumb { background: #1C2D52; color: #B9CBF2; }
[data-bs-theme=dark] .dropzone-mrcm:hover, [data-bs-theme=dark] .dropzone-mrcm.is-over { background: #1C2D52; border-color: #9DB8EE; }
[data-bs-theme=dark] .dropzone-mrcm .bi { color: #9DB8EE; }
[data-bs-theme=dark] .wiz-steps .n { background: #24314F; color: #C4CCD9; }
[data-bs-theme=dark] .wiz-steps button[aria-current=step] .n { background: #9DB8EE; color: #0B1424; }
[data-bs-theme=dark] .wiz-group .bar > span { background: #7FA2E6; }
[data-bs-theme=dark] .wiz-group.complete .bar > span { background: #4FC1B1; }
[data-bs-theme=dark] .mrcm-steps .current .mark { border-color: #9DB8EE; color: #B9CBF2; box-shadow: 0 0 0 4px #1C2D52; }
[data-bs-theme=dark] .kpi-chip.attn .n { color: #FFC56B; }
[data-bs-theme=dark] .age-hot { color: #FF9B8F; }
[data-bs-theme=dark] .price-rows .minus { color: #7FD49A; }
[data-bs-theme=dark] .bars .bar span, [data-bs-theme=dark] .chart-legend i { background: #7FA2E6; }
[data-bs-theme=dark] .bars .bar span.pending, [data-bs-theme=dark] .chart-legend i.pending { background: #2E4472; border-color: #9DB8EE; }
[data-bs-theme=dark] .toast.mrcm-toast { background: #1C2D52; border: 1px solid #3A5488; box-shadow: 0 12px 32px rgba(0, 0, 0, .5); }