/* =====================================================================================================================
   Portal v2 UI QA (round 6, owner 2026-10-14: "check text visibility for both themes, and layout for PC and mobile. nothing
   should go miss."). Loaded last (components/v2/theme/head, after mrcm-theme.css) on every v2 page, sign-in pages and the v2
   error pages. Small, scoped fixes found by scripts/v2-uiqa-browser.cjs; ratios are WCAG 2.x (text 4.5 : 1, large text,
   icons, controls and focus rings 3 : 1). Light-theme shades are the nearest darker shade of the same colour.
   ===================================================================================================================== */

/* ---------- 1. Keyboard focus ----------
   Tixia removes the outline from every button on :focus with !important (.btn:not(.btn-link):focus, style.css), which beat
   the portal's navy :focus-visible ring, so buttons only showed Bootstrap's faint ring (2.8 : 1 light, 1.3 : 1 dark). Same
   specificity, loaded later: the navy ring is back for keyboard focus only (mouse clicks still show no ring). */
.btn:not(.btn-link):focus-visible { outline: 3px solid #1F3A68 !important; outline-offset: 2px !important; }
[data-bs-theme=dark] .btn:not(.btn-link):focus-visible { outline-color: #9DB8EE !important; }
.deznav .btn:not(.btn-link):focus-visible, .bulk-bar .btn:not(.btn-link):focus-visible, .mrcm-cert .btn:not(.btn-link):focus-visible,
[data-bs-theme=dark] .deznav .btn:not(.btn-link):focus-visible, [data-bs-theme=dark] .bulk-bar .btn:not(.btn-link):focus-visible,
[data-bs-theme=dark] .mrcm-cert .btn:not(.btn-link):focus-visible { outline-color: #F7F8FA !important; }
/* the logo link sits on the navy brand bar: a soft-white ring (navy on navy was 1.3 : 1) */
.nav-header .brand-logo:focus-visible { outline-color: #F7F8FA !important; }

/* ---------- 2. Phone / tablet menu ----------
   With the menu open (Tixia .menu-toggle) the active item's icon turned white on the soft-white pill (1.1 : 1). */
body[data-sidebarbg] .menu-toggle .deznav .metismenu > li.mm-active > a i { color: #13294B !important; }
body[data-bs-theme=dark][data-sidebarbg] .menu-toggle .deznav .metismenu > li.mm-active > a i { color: #0E1A30 !important; }

/* ---------- 3. Light theme: buttons and inline code below AA (owner: fix, keep the look) ----------
   Tixia outline buttons and the warning button. Same colour family, the nearest darker shade that reaches 4.5 : 1 on white
   and on the table head (#F1F3F7); hover / active fills use the same shade so white text on them passes too. */
[data-bs-theme=light] .btn-outline-secondary { --bs-btn-color: #CC2E4A; --bs-btn-border-color: #CC2E4A; --bs-btn-hover-bg: #CC2E4A; --bs-btn-hover-border-color: #CC2E4A; --bs-btn-active-bg: #B02640; --bs-btn-active-border-color: #B02640; --bs-btn-disabled-color: #CC2E4A; --bs-btn-disabled-border-color: #CC2E4A; }
[data-bs-theme=light] .btn-outline-success { --bs-btn-color: #177F22; --bs-btn-border-color: #177F22; --bs-btn-hover-bg: #177F22; --bs-btn-hover-border-color: #177F22; --bs-btn-active-bg: #12661B; --bs-btn-active-border-color: #12661B; --bs-btn-disabled-color: #177F22; --bs-btn-disabled-border-color: #177F22; }
[data-bs-theme=light] .btn-outline-danger { --bs-btn-color: #C81E1D; --bs-btn-border-color: #C81E1D; --bs-btn-hover-bg: #C81E1D; --bs-btn-hover-border-color: #C81E1D; --bs-btn-active-bg: #A91918; --bs-btn-active-border-color: #A91918; --bs-btn-disabled-color: #C81E1D; --bs-btn-disabled-border-color: #C81E1D; }
[data-bs-theme=light] .btn-outline-info { --bs-btn-color: #2270B9; --bs-btn-border-color: #2270B9; --bs-btn-hover-bg: #2270B9; --bs-btn-hover-border-color: #2270B9; --bs-btn-active-bg: #1C5E9B; --bs-btn-active-border-color: #1C5E9B; --bs-btn-disabled-color: #2270B9; --bs-btn-disabled-border-color: #2270B9; }
[data-bs-theme=light] .btn-outline-warning { --bs-btn-color: #A34E00; --bs-btn-border-color: #FF7A01; --bs-btn-hover-color: #13213D; --bs-btn-hover-bg: #FF7A01; --bs-btn-hover-border-color: #FF7A01; --bs-btn-active-color: #13213D; --bs-btn-active-bg: #E86E00; --bs-btn-disabled-color: #A34E00; }
/* the orange stays; its text is navy (white on this orange is 2.6 : 1, navy 6.1 : 1). Tixia forces #fff on solid buttons */
[data-bs-theme=light] .btn-warning { --bs-btn-color: #13213D; --bs-btn-hover-color: #13213D; --bs-btn-active-color: #13213D; --bs-btn-disabled-color: #13213D; }
[data-bs-theme=light] .btn.btn-warning, [data-bs-theme=light] .btn.btn-warning:hover, [data-bs-theme=light] .btn.btn-warning:focus, [data-bs-theme=light] .btn.btn-warning:active { color: #13213D; }
/* inline code (discount codes, audit event names, help text): Bootstrap pink #E83E8C (3.8 : 1) to #C2185B (5.9 : 1) */
[data-bs-theme=light] { --bs-code-color: #C2185B; }

/* ---------- 4. Form controls and table heads ---------- */
/* Header search box: a soft-white field on the white header had no visible edge (1.1 : 1). Same border as other inputs
   (3.1 : 1 light, 3.3 : 1 dark); the search button joins it without a seam. */
.header-right .search-area .form-control { border: 1px solid #8A93A6; border-right: 0; }
.header-right .search-area .input-group-text { border: 1px solid #8A93A6 !important; border-left: 0 !important; }
[data-bs-theme=dark] .header-right .search-area .form-control, [data-bs-theme=dark] .header-right .search-area .input-group-text { border-color: #5D6E92 !important; }
/* Placeholder text in dark mode: the light grey #6A7184 was 3.5 : 1 on the dark card; #8D9AB5 is 6.0 : 1 */
[data-bs-theme=dark] .form-control::placeholder, [data-bs-theme=dark] .form-select::placeholder, [data-bs-theme=dark] textarea::placeholder { color: #8D9AB5; }
/* Table sort arrows (light): 45 % opacity was 1.9 : 1 on the table head; 80 % is over 3 : 1 (sorted column stays solid navy) */
[data-bs-theme=light] .sort-btn .bi { opacity: .8; }
/* Input, select and checkbox edges (light): the strong line #8A93A6 was 2.9 : 1 on the soft-white page and 2.8 : 1 on the
   grey table head; one step darker (#828B9E) is 3.2 / 3.1 / 3.4 : 1 on page / table head / card */
body[data-primary][data-bs-theme=light] { --mrcm-line-strong: #828B9E; }

/* ---------- 5. Layout ---------- */
/* Screen-reader text (position: absolute) inside a sideways-scrolling table escaped the scroll box and widened the page:
   Finance > Wallet scrolled sideways at 1280 px (1,304 px). The scroll box is now their containing block. */
.table-responsive { position: relative; }
/* Header at 768-991 px: page title + search + theme + bell + name did not fit (account name cut at the right edge).
   Below 992 px only the avatar is shown (as on phones); the button keeps its "Account menu" name for screen readers. */
@media (max-width: 991.98px) {
  .header-profile .profile-btn .profile-name, .header-profile .profile-btn .bi-chevron-down { display: none !important; }
  .header-profile .profile-btn .visually-hidden.d-md-none { display: block !important; }
}
/* Wizard progress labels on phones (PI wizard, clinic cover, quote pay): the done steps are buttons, which the ellipsis
   could not shorten, so they were cut mid-word ("Your quc"). Below 576 px the labels wrap instead of being cut. */
@media (max-width: 575.98px) {
  .wiz-group .name { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; overflow-wrap: break-word; hyphens: auto; }
  .wiz-group .name .btn { white-space: normal; text-align: left; line-height: 1.25; font-size: inherit; vertical-align: top; }
}

/* ---------- 6. Error pages (errors/v2.blade.php) ---------- */
.v2-error-page .auth-home-link { display: block; width: max-content; }
.v2-error-page .v2-error-code { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: #5A6278; }
.v2-error-page .v2-error-code .bi { width: 2.25rem; height: 2.25rem; border-radius: 50%; display: inline-grid; place-items: center; background: #E8EDF5; color: #1F3A68; font-size: 1.125rem; }
[data-bs-theme=dark] .v2-error-page .v2-error-code { color: #A9B5CC; }
[data-bs-theme=dark] .v2-error-page .v2-error-code .bi { background: #1C2D52; color: #B9CBF2; }

/* ---------- 7. Fixed bars and the chat button ---------- */
/* Act as this client: the fixed banner at the bottom covered whatever had keyboard focus there, and the chat button. The
   page now scrolls a focused element clear of the banner (the chat button is lifted above it by its own script). */
html:has(#v2-act-as-banner) { scroll-padding-bottom: 8.5rem; }
@media (max-width: 575.98px) { html:has(#v2-act-as-banner) { scroll-padding-bottom: 14rem; } }
/* Chat button focus: the portal's navy ring vanished when the button sat over a navy surface (price bar, primary button);
   a soft-white halo inside the ring keeps it visible on any background */
.v2-chat-fab:focus-visible { outline: 3px solid #1F3A68 !important; outline-offset: 3px; box-shadow: 0 0 0 3px #FFFFFF, 0 8px 24px rgba(19, 41, 75, .32); }
[data-bs-theme=dark] .v2-chat-fab:focus-visible { outline-color: #9DB8EE !important; box-shadow: 0 0 0 3px #0B1424, 0 8px 24px rgba(0, 0, 0, .5); }
/* Action buttons in phone cards (stacked tables, e.g. Finance > Wallet: History / Add / Deduct) wrap instead of running out of the card */
@media (max-width: 1199.98px) { .mrcm-table.stack td.cell-actions .d-inline-flex, .mrcm-table.v2-stack-narrow td.cell-actions .d-inline-flex { flex-wrap: wrap; justify-content: flex-end; } }
/* Long unbroken values (e-mail addresses, codes) in phone cards break inside the card instead of running out of it */
@media (max-width: 1199.98px) { .mrcm-table.stack td, .mrcm-table.v2-stack-narrow td { overflow-wrap: anywhere; } }

/* ---------- 8. Analytics on phones ---------- */
/* Month labels under the bars ("Jan 26") were wider than their 24 px column and ran into each other; below 576 px the
   month and year stack on two short lines under each bar. */
@media (max-width: 575.98px) {
  .ins-cols .ins-col .lbl { white-space: normal; width: min-content; margin: 0 auto; height: 2.25rem; line-height: 1.05rem; font-size: .625rem; }
  .ins-cols .ins-col .stack { height: calc(100% - 2.25rem); }
  /* the three-column figure tables (measure, this year, last year) fit the phone card instead of hiding the last column */
  .ins-table { font-size: .8125rem; }
  .ins-table > :not(caption) > * > * { padding: .375rem .25rem; }
}

/* ---------- 9. Document lists on phones ---------- */
/* The action button beside a document left the name ~60 px, so words broke mid-word ("Acknowledgem / ent"). Below 576 px
   the name takes the full line and the button goes under it, lined up with the text. */
@media (max-width: 575.98px) {
  .doc-list li { flex-wrap: wrap; }
  .doc-list .doc-main { flex: 1 1 calc(100% - 3.625rem); }
  .doc-list li > .btn, .doc-list li > .doc-missing, .doc-list li > .dropdown { margin-left: 3.625rem; }
  .doc-list .doc-main strong { overflow-wrap: break-word; }
}
/* Figures kept on one line in wide tables (.tnum) may wrap inside phone cards (Wallet: the masked ID line ran out of the card) */
@media (max-width: 1199.98px) { .mrcm-table.stack td .tnum.d-block, .mrcm-table.v2-stack-narrow td .tnum.d-block { white-space: normal; } }
/* The client feedback pop-up (Livewire, not a Bootstrap modal) left the chat button showing beside it: hide it as for modals */
body:has(.fb-modal) .v2-chat-host { display: none; }
/* Tab strips (.nav-scroll-x: agent page, commissions) hide their scrollbar, so below 992 px the last tabs were cut ("Commissio")
   and could not be reached with a mouse. They wrap onto a second line instead. */
@media (max-width: 991.98px) { .nav-scroll-x { flex-wrap: wrap; overflow-x: visible; row-gap: .25rem; } }