/* ============================================================================
   Value Wholesaler Portal — portal-specific additions + Bootstrap mapping
   ----------------------------------------------------------------------------
   The Value One design system itself is crm.css — a VERBATIM copy from
   Value-CRM (kept verbatim, crm- class names and all, so CRM shell markup,
   components, and future page borrows work copy-paste and the file can be
   re-synced by re-copying). This file layers on top of it:
     1. --vw-* tokens (same values as crm.css's palette) for portal-only rules
     2. Bootstrap 5 component mapping — the pages ported from the ERP are
        Bootstrap/DataTables-based and live inside the CRM shell until they
        are re-skinned to CRM components page by page
     3. Small vw-* shell add-ons (text brand, avatar circle, sign-out form)
   Load order: bootstrap → fontawesome → crm.css → portal.css (this file).
   ============================================================================ */

:root {
    /* Type */
    --vw-font-display: 'Fraunces', 'Iowan Old Style', Cambria, Georgia, serif;
    --vw-font-body:    'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', sans-serif;
    --vw-font-mono:    'Geist Mono', ui-monospace, 'Cascadia Mono', Menlo, monospace;

    /* Text */
    --vw-text:        #16325c;   /* primary navy */
    --vw-text-strong: #0e2240;   /* headings, active labels */
    --vw-text-muted:  #5e6b7c;   /* secondary copy */
    --vw-text-faint:  #99a4b3;   /* disabled / placeholders */

    /* Surfaces */
    --vw-surface-app:     #f6f7f3;   /* app backdrop */
    --vw-surface-sidebar: #fbfaf5;   /* warm cream */
    --vw-surface-content: #ffffff;
    --vw-surface-subtle:  #fafaf9;
    --vw-hover:           #f1f3ee;

    /* Lines */
    --vw-border:  #e2e0d8;
    --vw-divider: rgba(42, 143, 45, 0.16);

    /* Brand */
    --vw-brand:         #2a8f2d;   /* Value green */
    --vw-brand-strong:  #1f6f22;
    --vw-brand-bg:      #f1f8ed;
    --vw-brand-bg-soft: #f7faf3;

    /* Semantic */
    --vw-link:       #0070d2;
    --vw-link-hover: #005fb2;
    --vw-danger:     #ea001e;
}

/* ── Base ────────────────────────────────────────────────────────────────── */

body {
    font-family: var(--vw-font-body);
    color: var(--vw-text);
    background-color: var(--vw-surface-app);
}

h1, h2, h3, .navbar-brand {
    font-family: var(--vw-font-display);
    color: var(--vw-text-strong);
}

a {
    color: var(--vw-link);
    /* BS4/ERP behavior: links underline on hover only (BS5 underlines always —
       made the NS Stock numbers and grid links look wrong). */
    text-decoration: none;
}
a:hover {
    color: var(--vw-link-hover);
    text-decoration: underline;
}

/* …but never in the shell chrome: the sidebar (brand wordmark, nav items, menus),
   the search overlay, and the tab strip stay underline-free like the CRM. */
aside.crm-sidebar a:hover,
.crm-search-results a:hover,
.crm-avatar-menu a:hover,
.crm-workspace a:hover,
.crm-subtabs-row a:hover,
a.btn:hover {
    text-decoration: none;
}

/* BS5 underlines .btn-link permanently; BS4/ERP underlined on hover only
   ("Don't Know the Exact SKU?", grid × buttons, etc.). */
.btn-link { text-decoration: none; }
.btn-link:hover { text-decoration: underline; }

code {
    font-family: var(--vw-font-mono);
    color: var(--vw-brand-strong);
}

/* ── Bootstrap component mapping ─────────────────────────────────────────── */

.btn-primary {
    --bs-btn-bg: var(--vw-brand);
    --bs-btn-border-color: var(--vw-brand);
    --bs-btn-hover-bg: var(--vw-brand-strong);
    --bs-btn-hover-border-color: var(--vw-brand-strong);
    --bs-btn-active-bg: var(--vw-brand-strong);
    --bs-btn-active-border-color: var(--vw-brand-strong);
    --bs-btn-disabled-bg: var(--vw-brand);
    --bs-btn-disabled-border-color: var(--vw-brand);
    --bs-btn-focus-shadow-rgb: 42, 143, 45;
}

.btn-outline-primary {
    --bs-btn-color: var(--vw-brand-strong);
    --bs-btn-border-color: var(--vw-brand);
    --bs-btn-hover-bg: var(--vw-brand);
    --bs-btn-hover-border-color: var(--vw-brand);
    --bs-btn-active-bg: var(--vw-brand-strong);
    --bs-btn-active-border-color: var(--vw-brand-strong);
    --bs-btn-focus-shadow-rgb: 42, 143, 45;
}

.form-control:focus,
.form-check-input:focus {
    border-color: var(--vw-brand);
    box-shadow: 0 0 0 0.25rem rgba(42, 143, 45, 0.15);
}

.form-check-input:checked {
    background-color: var(--vw-brand);
    border-color: var(--vw-brand);
}

.card {
    border-color: var(--vw-border);
    background-color: var(--vw-surface-content);
}

/* Status badges — the EXACT BS4 palette the ERP's order pages were designed on.
   BS5 shifted these hexes (info went pale cyan, success went dark green) and stopped
   setting text color on plain .bg-* badges, so both are pinned here. */
.badge.bg-primary   { background-color: #007bff !important; color: #fff; }
.badge.bg-success   { background-color: #28a745 !important; color: #fff; }
.badge.bg-info      { background-color: #17a2b8 !important; color: #fff; }
.badge.bg-warning   { background-color: #ffc107 !important; color: #212529; }
.badge.bg-danger    { background-color: #dc3545 !important; color: #fff; }
.badge.bg-secondary { background-color: #6c757d !important; color: #fff; }

/* ── Shell (template navbar/footer) ──────────────────────────────────────── */

.navbar.bg-white {
    background-color: var(--vw-surface-sidebar) !important;
    border-bottom: 1px solid var(--vw-border) !important;
}

.navbar .nav-link.text-dark,
.navbar .btn-link.text-dark {
    color: var(--vw-text) !important;
}

.navbar .nav-link.text-dark:hover,
.navbar .btn-link.text-dark:hover {
    color: var(--vw-brand-strong) !important;
}

.navbar-brand {
    color: var(--vw-brand-strong) !important;
    font-weight: 600;
}

.footer {
    color: var(--vw-text-muted);
    border-top-color: var(--vw-border) !important;
}

/* ── CRM-shell add-ons (portal-specific slots in the copied shell) ───────── */

/* The CRM centers its logo via a 28px ::before spacer in the head row — the portal wants
   the brand near-left instead: shrink the spacer rather than dropping it entirely
   (collapsed mode hides it via crm.css). */
.crm-sidebar-head::before { width: 10px; }

/* "Portal" wordmark next to the company logo in the sidebar brand slot. Bottom-aligned so
   it sits on the logo's WHOLESALER line rather than floating at mid-height. Hidden on
   collapse together with the whole .crm-sidebar-brand (crm.css handles that). */
/* "CRM" beside the Viterra wordmark — same treatment as the login lockup:
   bold Geist, tight tracking, riding just above the logo's SYSTEMS subline.
   (Was the Portal's serif "Portal" word.) */
.vw-brand-portal {
    align-self: flex-end;
    margin-left: 7px;
    margin-bottom: 7px;
    font-family: var(--vw-font-body);
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: 0.08em;
    line-height: 1;
    color: var(--vw-brand-strong);
    white-space: nowrap;
}

/* ── AdminLTE card-outline reproduction ──────────────────────────────────── */
/* The ERP's order pages were designed on AdminLTE's `card-outline card-<color>` accents
   (3px colored top border). Reproduced here with the SAME class names + colors so ported
   views keep their carefully-designed look verbatim. */
.card-outline { border-top: 3px solid transparent !important; }
.card-primary.card-outline   { border-top-color: #007bff !important; }
.card-secondary.card-outline { border-top-color: #6c757d !important; }
.card-success.card-outline   { border-top-color: #28a745 !important; }
.card-info.card-outline      { border-top-color: #17a2b8 !important; }
.card-warning.card-outline   { border-top-color: #ffc107 !important; }
.card-danger.card-outline    { border-top-color: #dc3545 !important; }
.card-dark.card-outline      { border-top-color: #343a40 !important; }

/* AdminLTE's card-title sizing, for ported headers that use it. */
.card-title {
    font-size: 1.1rem;
    font-weight: 400;
    margin: 0;
}

/* ── Select2 — Value One skin ────────────────────────────────────────────── */
/* The customer pickers (Catalog "Ordering for", Quick Order, Users) ship with Select2's
   generic gray theme — restyled to the system: navy text, vw borders, brand-green focus
   and highlight, sized like form-select-sm, dropdown shadowed like the shell's menus. */
.select2-container--default .select2-selection--single {
    height: calc(1.5em + 0.5rem + 2px);
    border: 1px solid var(--vw-border);
    border-radius: 0.25rem;
    background: var(--vw-surface-content);
    display: flex;
    align-items: center;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--vw-text);
    font-size: 0.875rem;
    line-height: normal;
    padding-left: 0.5rem;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--vw-text-faint);
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--vw-text-muted) transparent transparent transparent;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--vw-brand) transparent;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--vw-brand);
    box-shadow: 0 0 0 0.2rem rgba(42, 143, 45, 0.15);
}
.select2-dropdown {
    border: 1px solid var(--vw-border);
    border-radius: 0.375rem;
    box-shadow: 0 6px 18px rgba(22, 50, 92, 0.14);
    overflow: hidden;
    font-size: 0.875rem;
    color: var(--vw-text);
}
.select2-search--dropdown {
    padding: 0.45rem;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--vw-border);
    border-radius: 0.25rem;
    padding: 0.3rem 0.5rem;
    outline: none;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--vw-brand);
    box-shadow: 0 0 0 0.15rem rgba(42, 143, 45, 0.15);
}
.select2-results__option {
    padding: 0.4rem 0.6rem;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
    background-color: var(--vw-brand);
    color: #fff;
}
.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option[data-selected=true] {
    background-color: var(--vw-brand-bg);
    color: var(--vw-text-strong);
}
.select2-container--default .select2-results > .select2-results__options {
    max-height: 260px;
}

/* ── SweetAlert2 — Value One skin ────────────────────────────────────────── */
/* All Swal dialogs (catalog's "Pick a customer first", Quick Order's submit confirm,
   warnings): Fraunces title, Geist body, Value-green confirm, outlined cancel. The
   !importants beat Swal's inline confirmButtonColor styles so every dialog matches
   without per-call colors. */
.swal2-popup {
    border-radius: 0.75rem;
    padding: 1.75rem;
    font-family: var(--vw-font-body);
    color: var(--vw-text);
}
.swal2-title {
    font-family: var(--vw-font-display);
    color: var(--vw-text-strong);
}
.swal2-content {
    color: var(--vw-text);
    font-size: 0.95rem;
}
.swal2-styled.swal2-confirm {
    background-color: var(--vw-brand) !important;
    border-radius: 0.375rem;
    box-shadow: none;
}
.swal2-styled.swal2-confirm:hover {
    background-color: var(--vw-brand-strong) !important;
}
.swal2-styled.swal2-cancel {
    background-color: #fff !important;
    color: var(--vw-text) !important;
    border: 1px solid var(--vw-border) !important;
    border-radius: 0.375rem;
}
.swal2-styled.swal2-cancel:hover {
    background-color: var(--vw-hover) !important;
}
.swal2-styled:focus {
    box-shadow: 0 0 0 0.2rem rgba(42, 143, 45, 0.25) !important;
}
/* !important because sweetalert2.min.css loads AFTER portal.css on the pages
   (page @section Styles render below the global sheets) and would win the tie. */
.swal2-icon.swal2-info {
    border-color: rgba(0, 112, 210, 0.4) !important;
    color: var(--vw-link) !important;
}
.swal2-icon.swal2-question {
    border-color: rgba(42, 143, 45, 0.4) !important;
    color: var(--vw-brand) !important;
}

/* Quick Order button — purple with a proper hover darken (was an inline style,
   which can't have hover states). */
.vw-btn-quickorder {
    color: #fff;
    background-color: #6f42c1;
    border-color: #6f42c1;
}
.vw-btn-quickorder:hover,
.vw-btn-quickorder:focus {
    color: #fff;
    background-color: #5d37a8;
    border-color: #58339e;
}
.vw-btn-quickorder:active {
    color: #fff;
    background-color: #533093;
    border-color: #4e2d8a;
}

/* Catalog toolbar — ALWAYS one row (owner): as horizontal space tightens, label words are
   dropped progressively; they must NEVER wrap into two-line buttons (flex was compressing
   the buttons before the tiers fired — hence the nowrap + shrink lock below). Tier 1 sheds
   the low-value words ("Ordering for:", "per page"); tier 2 shrinks buttons to icon+verb
   ("Add", "Sync", cart icon) and narrows the search box and customer picker. */
.vw-catalog-card .card-header .btn,
.vw-catalog-card .card-header .cart-icon-btn,
.vw-catalog-card .card-header .fw-bold {
    white-space: nowrap;
    flex-shrink: 0;
}
@media (max-width: 1750px) {
    .vw-tb-t1 { display: none !important; }
}
@media (max-width: 1500px) {
    .vw-tb-t2 { display: none !important; }
    .vw-catalog-card #dtSearchContainer .dataTables_filter input { width: 130px !important; }
    #portalCustomerPicker + .select2-container { width: 190px !important; min-width: 190px !important; }
}
@media (max-width: 1250px) {
    .vw-tb-t3 { display: none !important; }
}

/* The NS-Stock location selector (stock-visible users only) takes ~220px of the same row,
   so for toolbars that contain it every hide tier fires ~230px EARLIER — the row must
   never wrap. Below the last tier the selector itself gives ground (clipped, full name
   in the title tooltip and the open list). */
@media (max-width: 1980px) {
    .vw-catalog-card:has(#nsStockLocSel) .vw-tb-t1 { display: none !important; }
}
@media (max-width: 1730px) {
    .vw-catalog-card:has(#nsStockLocSel) .vw-tb-t2 { display: none !important; }
    .vw-catalog-card:has(#nsStockLocSel) #dtSearchContainer .dataTables_filter input { width: 130px !important; }
    .vw-catalog-card:has(#nsStockLocSel) #portalCustomerPicker + .select2-container { width: 190px !important; min-width: 190px !important; }
}
@media (max-width: 1480px) {
    .vw-catalog-card:has(#nsStockLocSel) .vw-tb-t3 { display: none !important; }
}
@media (max-width: 1250px) {
    #nsStockLocSel { max-width: 150px; }
}

/* DataTables pagination — Value One skin (the catalog grids in both modules). Bootstrap's
   default blue active page clashed with the system; active = brand green, quiet borders,
   green focus ring. ERP-shell pages (Audit Logs, Login History) keep AdminLTE's look. */
.dataTables_wrapper .pagination .page-link {
    color: var(--vw-text);
    border-color: var(--vw-border);
    padding: 0.25rem 0.6rem;
    font-size: 0.85rem;
}
.dataTables_wrapper .pagination .page-link:hover {
    background-color: var(--vw-brand-bg);
    color: var(--vw-brand-strong);
    text-decoration: none;
}
.dataTables_wrapper .pagination .page-item.active .page-link {
    background-color: var(--vw-brand);
    border-color: var(--vw-brand);
    color: #fff;
}
.dataTables_wrapper .pagination .page-item.disabled .page-link {
    color: var(--vw-text-faint);
}
.dataTables_wrapper .pagination .page-link:focus {
    box-shadow: 0 0 0 0.2rem rgba(42, 143, 45, 0.15);
}

/* Segmented control (Orders page's My/Internal/All filter) — modern pill style: a soft
   rounded track, the active option a raised white pill with brand-green text (same accent
   language as the sidebar's active item). */
.vw-seg {
    display: inline-flex;
    align-items: center;
    background: var(--vw-hover);
    border: 1px solid var(--vw-border);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
}
.vw-seg .vw-seg-opt {
    border: 0;
    background: transparent;
    color: var(--vw-text-muted);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.42rem 0.9rem;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease;
}
.vw-seg .vw-seg-opt:hover {
    color: var(--vw-text-strong);
    text-decoration: none;
}
.vw-seg .vw-seg-opt.active {
    background: var(--vw-surface-content);
    color: var(--vw-brand-strong);
    box-shadow: 0 1px 3px rgba(22, 50, 92, 0.18);
}

/* Clickable order numbers — brand green; the NetSuite SO# wears the NetSuite navy
   (swapped by owner request: green = ours, navy = NetSuite's number). */
.vw-order-link {
    color: var(--vw-brand-strong);
}
.vw-order-link:hover {
    color: #17541a;
}
.vw-so-num {
    color: #003865 !important;
}
a.vw-so-num:hover {
    color: #002a4d !important;
}

/* NetSuite-branded indicator color — the same navy the "Sync NetSuite" button wears
   (#003865, NetSuite's theme color). Used for NetSuite-related badges/timeline points
   instead of Bootstrap's light-blue bg-info. */
.vw-bg-nsnavy {
    background-color: #003865 !important;
    color: #fff !important;
}

/* "Viewing as" bar — internal preview of the Wholesaler Portal (layout-rendered, customers
   never see it). Soft amber so it reads as a preview notice, not part of the storefront. */
.vw-viewas-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    background: #fff8e6;
    border-bottom: 1px solid #f0e2bb;
    color: #7a5d1c;
    font-size: 0.85rem;
}
.vw-viewas-bar .fa-eye { color: #b08a2e; }
.vw-viewas-bar .vw-viewas-label { font-weight: 600; white-space: nowrap; }
.vw-viewas-bar .select2-container { max-width: 300px; }

/* Soft Value-blue modal header (stock-by-location popup, etc.) — light blue tint with
   the system's navy heading, instead of Bootstrap's loud teal bg-info. */
.vw-modal-header-blue {
    background-color: #e8f1fb;
    color: var(--vw-text-strong);
    border-bottom: 1px solid #cfe2f6;
}
.vw-modal-header-blue .modal-title { color: var(--vw-text-strong); }

/* Font Awesome glyph sitting in a CRM sidebar icon slot (used where SLDS has no
   matching glyph, e.g. the Quick Order lightning). Sized/colored like the SLDS icons. */
.crm-sidebar-item-icon .vw-fa-nav-icon {
    font-size: 17px;
    line-height: 1;
}

/* Sidebar nav items — one size up from the CRM's 13px/8px (crm.css squeezes a LONG nav;
   the portal shows a handful of items, so larger targets scan and click better).
   Override-only: crm.css stays a verbatim copy. */
.crm-sidebar-item {
    font-size: 14.5px;
    padding: 11px 12px;
    gap: 11px;
}
.crm-sidebar-item .crm-sidebar-item-icon {
    width: 24px;
    height: 24px;
}
.crm-sidebar-item-icon .crm-sidebar-item-svg {
    width: 22px;
    height: 22px;
}

/* Sign-out lives in a <form> (antiforgery POST) inside the CRM's avatar-menu bottom row —
   display:contents makes the button a direct flex child of .crm-avatar-menu-row, so the
   Exit/Sign Out split renders exactly as the CRM's (button styling comes from
   .crm-avatar-menu-signout in crm.css). */
.vw-signout-form { display: contents; }

/* ── Tasks list (map right panel + /Tasks page) ──────────────────────────── */
.vt-tasks-head { margin-bottom: 12px; }
.vt-tasks-title { font-family: var(--vw-font-display); font-size: 17px; font-weight: 600;
    color: var(--vw-text-strong); margin-bottom: 8px; }
.vt-tasks-goal-bar { height: 8px; background: var(--vw-surface-subtle); border: 1px solid var(--vw-border);
    border-radius: 999px; overflow: hidden; }
.vt-tasks-goal-bar > div { height: 100%; background: var(--vw-brand); transition: width .5s; }
.vt-tasks-goal-text { font-size: 12.5px; color: var(--vw-text-muted); margin-top: 5px; }
.vt-tasks-section h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .8px;
    color: var(--vw-text-faint); margin: 14px 0 6px; display: flex; justify-content: space-between; }
.vt-tasks-section h4 span { font-weight: 600; color: var(--vw-text-muted); }
.vt-tasks-empty { font-size: 12.5px; color: var(--vw-text-faint); padding: 6px 0; }
.vt-task { border: 1px solid var(--vw-border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px;
    background: var(--vw-surface-content); }
.vt-task-top { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.vt-task-type { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    border-radius: 999px; padding: 2px 8px; color: #fff; background: #1e7845; }
.vt-task-type-Reorder { background: #00314c; }
.vt-task-type-FirstOrder { background: #2e6f96; }
.vt-task-fit { font-size: 11px; font-weight: 700; color: var(--vw-brand); }
.vt-task-src { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    border-radius: 999px; padding: 2px 8px; color: var(--vw-brand); background: var(--vw-brand-bg); }
.vt-task-instruction { font-size: 12.5px; color: var(--vw-text-strong); margin-top: 3px;
    background: var(--vw-brand-bg-soft); border-left: 3px solid var(--vw-brand); padding: 4px 8px; border-radius: 0 6px 6px 0; }
.vt-task-instruction span { color: var(--vw-text-muted); }
.vt-task-name { font-weight: 600; color: var(--vw-text-strong); font-size: 14px; }
.vt-task-name[role="button"] { cursor: pointer; }
.vt-task-name[role="button"]:hover { text-decoration: underline; }
.vt-task-reason { font-size: 12.5px; color: #9a6a10; font-weight: 600; margin-top: 2px; }
.vt-task-why { font-size: 12.5px; color: var(--vw-text); font-style: italic; margin-top: 3px; }
.vt-task-meta { display: flex; flex-direction: column; gap: 2px; font-size: 12px; margin-top: 6px; }
.vt-task-actions { display: flex; gap: 6px; margin-top: 8px; }
.vt-task-done { background: var(--vw-brand); border: 1px solid var(--vw-brand); color: #fff;
    border-radius: 6px; padding: 4px 12px; font-size: 12.5px; cursor: pointer; }
.vt-task-skip { background: transparent; border: 1px solid var(--vw-border); color: var(--vw-text-muted);
    border-radius: 6px; padding: 4px 10px; font-size: 12.5px; cursor: pointer; }

/* ── Confirm modal — Max asks the question ───────────────────────────────── */
/* Layout for the crmConfirm dialog body: Max (question-marks sticker) beside the
   message text. The sticker has a white background, invisible on the white card. */
.vt-confirm-row {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
}
.vt-confirm-max {
    width: 122px;   /* Max is the one asking — let him be seen */
    height: auto;
    flex-shrink: 0;
}

/* Confirm-dialog-only chrome tweaks: slimmer top/bottom bands (it's a one-line
   question, not a form) and Viterra-navy accents so the card reads on-brand. */
.crm-confirm-dialog .crm-post-modal-header {
    padding: 10px 18px;
    border-bottom: 2px solid var(--crm-brand);
}
.crm-confirm-dialog .crm-post-modal-header h3 {
    /* Fraunces looks cramped below ~18px — keep the title at a size the serif carries. */
    font-size: 19px;
    color: var(--crm-brand-strong);
}
.crm-confirm-dialog .crm-post-modal-footer {
    padding: 10px 18px;
    background: var(--crm-brand-bg-soft);
    border-top: 1px solid var(--crm-brand-bg);
}
.crm-confirm-dialog .crm-confirm-message {
    font-size: 15px;
}

/* ── Admin list pages (Login history, Audit log) — CMMS list shell add-ons ──
   The page shell itself is crm.css's crm-list-* classes; these are the chip
   filters, pills, sort markers, diff table and expandable detail rows. */
.vt-list-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
.vt-multi { position: relative; display: inline-block; }
.vt-multi-btn { padding: 5px 12px; font-size: 12.5px; background: var(--crm-surface-content); color: var(--crm-text);
    border: 1px solid var(--crm-border); border-radius: 6px; cursor: pointer; white-space: nowrap; }
.vt-multi-btn.is-on { border-color: var(--crm-brand); color: var(--crm-brand); font-weight: 600; }
.vt-multi-panel { position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; min-width: 190px; max-width: 320px;
    background: var(--crm-surface-content); border: 1px solid var(--crm-border); border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 49, 76, .14); padding: 6px; }
.vt-multi-option { display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 13px; border-radius: 6px;
    cursor: pointer; white-space: nowrap; }
.vt-multi-option:hover { background: var(--crm-hover); }
.vt-multi-option input { margin: 0; }
.vt-multi-options { max-height: 260px; overflow-y: auto; }
.vt-multi-search { width: calc(100% - 12px); margin: 4px 6px 6px; padding: 5px 9px; font-size: 12.5px;
    border: 1px solid var(--crm-border); border-radius: 7px; }
.vt-filter-reset { font-size: 12.5px; color: var(--crm-link); margin-left: 4px; white-space: nowrap; }
.vt-load-more { display: flex; justify-content: center; padding: 12px 0 16px; }
.vt-pill { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.vt-pill--ok { background: var(--crm-brand-bg); color: var(--crm-brand-strong); }
.vt-pill--high { background: #fdd9dd; color: #c4314b; }
.vt-pill--medium { background: #fdeacc; color: #a05a00; }
.vt-pill--low { background: #d9e8fd; color: #1d5bb9; }
.vt-pill--none { background: var(--crm-hover); color: var(--crm-text-muted); }
/* Toast glyph (crmToast in the layout): a small ring holding ✓ / ! / i instead of the CRM's SLDS icon. */
.vt-toast-glyph { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
    border-radius: 50%; background: rgba(255, 255, 255, .22); font-size: 12px; font-weight: 700; line-height: 1; }
.crm-toast-warning .vt-toast-glyph { background: rgba(22, 50, 92, .12); }
th.vt-sortable { cursor: pointer; user-select: none; }
th.vt-sortable::after { content: ' \2195'; color: var(--crm-text-faint); font-size: 11px; }
th.vt-sortable.is-sort-asc::after { content: ' \25B2'; color: var(--crm-brand); }
th.vt-sortable.is-sort-desc::after { content: ' \25BC'; color: var(--crm-brand); }
tr[data-detail] { cursor: pointer; }
tr[data-detail].is-open td { background: var(--crm-surface-subtle); }
.vt-detail-row > td { background: var(--crm-surface-subtle); padding: 10px 16px 14px !important; }
.vt-audit-changed { max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-audit-key { margin-left: 6px; font-size: 12px; font-weight: 400; color: var(--crm-text-muted); }
.vt-diff { width: 100%; max-width: 900px; table-layout: fixed; border-collapse: collapse; font-size: 12.5px;
    background: var(--crm-surface-content); border: 1px solid var(--crm-border); }
.vt-diff th, .vt-diff td { padding: 6px 10px; border-bottom: 1px solid var(--crm-hover); text-align: left;
    vertical-align: top; word-break: break-word; }
.vt-diff thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--crm-text-muted);
    background: var(--crm-surface-subtle); }
.vt-diff tbody th { width: 30%; font-weight: 600; color: var(--crm-text-strong); }
.vt-diff-before { background: #fdf1f2; color: var(--crm-text-muted); }
.vt-diff-after { background: var(--crm-brand-bg); color: var(--crm-text-strong); }
.vt-diff-row--meta th, .vt-diff-row--meta td { font-size: 11.5px; color: var(--crm-text-muted); background: transparent; }
.vt-diff td:empty::after { content: "\2014"; opacity: .5; }
.vt-diff-note { font-size: 12px; color: var(--crm-text-faint); margin-top: 6px; }

/* ── Page sheet — one white frame per page (Dashboard, Tasks, Team, Admin…) ──
   The gradient backdrop stays a thin margin; the title lives in the sheet's
   header band; the body is white for tables or a soft canvas for card layouts. */
.crm-main:has(> .vt-sheet-page), .crm-main:has(> .vt-list-page) { padding: 0; }
.vt-sheet-page, .vt-list-page { padding: 10px 12px 12px; min-height: calc(100vh - 28px); display: flex; }
.vt-sheet { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--crm-surface-content);
    border: 1px solid var(--crm-border); border-radius: 12px; box-shadow: 0 2px 10px rgba(0, 22, 36, .06); overflow: hidden; }
.vt-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    padding: 16px 22px 14px; border-bottom: 1px solid var(--crm-border); }
/* The title block shrinks (its sub-line wraps) before the actions get pushed to a new row. */
.vt-sheet-head > :first-child { flex: 1 1 320px; min-width: 0; }
.vt-sheet-head .vt-page-title { font-family: var(--crm-font-display); font-size: 22px; color: var(--crm-text-strong); margin: 0; }
.vt-sheet-sub { font-size: 13px; color: var(--crm-text-muted); margin: 3px 0 0; }
.vt-sheet-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.vt-sheet-body { flex: 1; padding: 18px 22px 22px; }
.vt-sheet-body--canvas { background: var(--crm-surface-app); }
.vt-sheet-body--narrow > * { max-width: 780px; margin-left: auto; margin-right: auto; }
/* Cards and tables inside a sheet: white on the canvas, one shared table look. */
.vt-card { background: var(--crm-surface-content); border: 1px solid var(--crm-border); border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 22, 36, .05); }
.vt-card--table { overflow: hidden; }
.vt-card--pad { padding: 16px 18px; }
.vt-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.vt-table th { text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px;
    color: var(--crm-text-muted); background: var(--crm-surface-app); padding: 10px 14px;
    border-bottom: 1px solid var(--crm-border); white-space: nowrap; }
.vt-table td { padding: 12px 14px; border-bottom: 1px solid #eef1f4; vertical-align: middle; color: var(--crm-text); }
.vt-table tbody tr:last-child td { border-bottom: none; }
.vt-table tbody tr:hover td { background: #f8fafc; }
.vt-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.vt-table tfoot td { font-weight: 700; color: var(--crm-text-strong); background: var(--crm-surface-app);
    border-top: 1px solid var(--crm-border); }
/* Profile pictures (uploaded or generated initials — see AvatarHelper). */
.vt-avatar { border-radius: 50%; object-fit: cover; flex: none; border: 1px solid var(--crm-border); background: #fff; }
.vt-team-who { display: flex; align-items: center; gap: 12px; }
/* The admin list pages already render crm.css's white list card — let it fill the sheet slot. */
.vt-list-page > .crm-list-page { flex: 1; min-width: 0; display: flex; flex-direction: column;
    border-radius: 12px; box-shadow: 0 2px 10px rgba(0, 22, 36, .06); }
.vt-list-page .crm-list-table-wrap { flex: 1; }