/* YELOW Visa Platform design system (owner-approved visual direction, 2026-10-17).
   Tokens from the approved prototype (Yelow-Visa-Full-Prototype.html), verified against the
   flyelow.com CSS variables. Bootstrap variables are mapped to the tokens so existing markup
   (buttons, forms, tables, alerts, cards) restyles without changing views or behaviour.
   Light theme only in Phase 1. Fonts: the approved families are listed first; until their
   WOFF2 files are self-hosted (CSP allows fonts from this site only), the system fallbacks apply. */
:root {
    --paper: oklch(98.5% .005 215);
    --surface: oklch(100% 0 0);
    --ink: oklch(28% .035 235);
    --ink-2: oklch(33% .04 235);
    --muted: oklch(44% .03 235);
    --primary: oklch(45% .12 248);          /* ≈ #025894 */
    --primary-hover: oklch(40% .12 248);
    --on-primary: oklch(98% .01 215);
    --tint: oklch(93% .03 215);
    --soft: oklch(95% .015 215);
    --line: oklch(90% .015 215);
    --field: oklch(90% .015 215);
    --ring: oklch(60% .12 248);
    --sun: oklch(80% .15 85);               /* yellow accent */
    --bad: oklch(57% .2 27);
    --ok: oklch(45% .1 160); --ok-bg: oklch(95% .04 160);
    --warn: oklch(42% .09 70); --warn-bg: oklch(94% .07 88);
    --bad-bg: oklch(95% .03 25);
    --info: oklch(40% .08 240); --info-bg: oklch(95% .015 215);
    --neutral: oklch(44% .03 235); --neutral-bg: oklch(94% .008 235);
    --font: "Instrument Sans", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
    --display: "Fraunces", Georgia, "Times New Roman", serif;
    --mono: "JetBrains Mono", ui-monospace, Consolas, Menlo, monospace;
    --r: 4px;
    --rc: 8px;

    /* Bootstrap 5.3 mapping */
    --bs-body-font-family: var(--font);
    --bs-body-color: var(--ink);
    --bs-body-bg: var(--paper);
    --bs-emphasis-color: var(--ink);
    --bs-secondary-color: var(--muted);
    --bs-border-color: var(--line);
    --bs-border-radius: var(--r);
    --bs-border-radius-lg: var(--rc);
    --bs-link-color: var(--primary);
    --bs-link-color-rgb: 2, 88, 148;
    --bs-link-hover-color: var(--primary-hover);
    --bs-link-hover-color-rgb: 1, 70, 120;
    --bs-primary: #025894;
    --bs-primary-rgb: 2, 88, 148;
    --bs-focus-ring-color: color-mix(in oklch, var(--ring) 35%, transparent);
}

body { background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.5; }
a { color: var(--primary); }
a:hover { color: var(--primary-hover); }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.vp-content h1, .vp-content .h1 { font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1.15; letter-spacing: -.2px; text-wrap: balance; }
.vp-content h2, .vp-content .h4, .vp-content .h5 { text-wrap: balance; }
.text-secondary, .text-muted { color: var(--muted) !important; }
.num, td.text-end, th.text-end, .statement-amount { font-variant-numeric: tabular-nums; }
code, .mono, kbd, samp { font-family: var(--mono); }

/* Buttons: one primary per card, secondary uses the soft fill, danger is outlined. */
.btn { border-radius: var(--r); min-height: 38px; font-weight: 500; }
.btn-sm { min-height: 30px; }
.btn-primary {
    --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-color: var(--on-primary);
    --bs-btn-hover-bg: var(--primary-hover); --bs-btn-hover-border-color: var(--primary-hover); --bs-btn-hover-color: var(--on-primary);
    --bs-btn-active-bg: var(--primary-hover); --bs-btn-active-border-color: var(--primary-hover);
    --bs-btn-disabled-bg: var(--primary); --bs-btn-disabled-border-color: var(--primary);
}
.btn-outline-primary {
    --bs-btn-color: var(--primary); --bs-btn-border-color: var(--primary);
    --bs-btn-hover-bg: var(--tint); --bs-btn-hover-color: var(--primary); --bs-btn-hover-border-color: var(--primary);
    --bs-btn-active-bg: var(--tint); --bs-btn-active-color: var(--primary);
}
.btn-outline-secondary, .btn-secondary, .btn-light {
    --bs-btn-bg: var(--soft); --bs-btn-color: var(--ink-2); --bs-btn-border-color: var(--line);
    --bs-btn-hover-bg: var(--tint); --bs-btn-hover-color: var(--primary); --bs-btn-hover-border-color: var(--line);
    --bs-btn-active-bg: var(--tint); --bs-btn-active-color: var(--primary);
}
.btn-danger, .btn-outline-danger {
    --bs-btn-bg: transparent; --bs-btn-color: var(--bad); --bs-btn-border-color: var(--bad);
    --bs-btn-hover-bg: var(--bad-bg); --bs-btn-hover-color: var(--bad); --bs-btn-hover-border-color: var(--bad);
    --bs-btn-active-bg: var(--bad-bg); --bs-btn-active-color: var(--bad);
}

/* Forms */
.form-control, .form-select { border-color: var(--field); border-radius: var(--r); min-height: 38px; background-color: var(--surface); color: var(--ink); }
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--ring); box-shadow: 0 0 0 .2rem color-mix(in oklch, var(--ring) 25%, transparent);
}
.form-label, label { font-weight: 600; }
.form-check-label { font-weight: 400; }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.text-danger, .field-validation-error, .validation-summary-errors { color: var(--bad) !important; }
.input-validation-error { border-color: var(--bad) !important; }

/* Cards and panels */
.card { border-color: var(--line); border-radius: var(--rc); background: var(--surface); }

/* Tables: header row in paper, numbers right-aligned, scroll inside their own box on phones. */
.table { --bs-table-bg: var(--surface); --bs-table-striped-bg: color-mix(in oklch, var(--soft) 70%, var(--surface)); --bs-table-hover-bg: var(--tint); border-color: var(--line); font-size: 14px; }
.table > thead th, .table > thead td {
    background: var(--paper); color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
}
.table > tfoot td, .table > tfoot th { background: var(--paper); font-weight: 700; border-top: 2px solid var(--line); }
@media (max-width: 860px) {
    .vp-content table.table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* Notices: short bold lead, then a plain sentence. */
.alert { border-radius: 10px; border: 1px solid transparent; font-size: 14px; }
.alert-info, .alert-secondary, .alert-light { background: var(--info-bg); color: var(--info); border-color: transparent; }
.alert-warning { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.alert-danger { background: var(--bad-bg); color: var(--bad); border-color: transparent; }
.alert-success { background: var(--ok-bg); color: var(--ok); border-color: transparent; }

/* Badges used for counts and legacy markers */
.badge.text-bg-secondary, .badge.text-bg-light { background: var(--neutral-bg) !important; color: var(--neutral) !important; }
.badge.text-bg-success { background: var(--ok-bg) !important; color: var(--ok) !important; }
.badge.text-bg-warning { background: var(--warn-bg) !important; color: var(--warn) !important; }
.badge.text-bg-danger { background: var(--bad-bg) !important; color: var(--bad) !important; }

/* Status pills: label + shape + colour, never colour alone. */
.pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 2px 10px 2px 8px; font-size: 12.5px; font-weight: 650; white-space: nowrap; color: var(--neutral); background: var(--neutral-bg); }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.s-Draft, .s-Cancelled { color: var(--neutral); background: var(--neutral-bg); }
.s-Cancelled::before { border-radius: 1px; }
.s-Submitted, .s-UnderReview, .s-Pending, .s-Requested { color: var(--info); background: var(--info-bg); }
.s-Submitted::before, .s-UnderReview::before, .s-Pending::before, .s-Requested::before { background: transparent; border: 2px solid currentColor; width: 5px; height: 5px; }
.s-AwaitingDocuments { color: var(--warn); background: var(--warn-bg); }
.s-AwaitingDocuments::before { border-radius: 1px; transform: rotate(45deg); }
.s-Processing { color: var(--primary); background: var(--tint); }
.s-Approved, .s-Executed, .s-Clean, .s-Resolved { color: var(--ok); background: var(--ok-bg); }
.s-Rejected, .s-Infected { color: var(--bad); background: var(--bad-bg); }
.s-Rejected::before, .s-Infected::before { border-radius: 1px; }

/* Top bar: unread messages */
.vp-unread { position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 8px; color: var(--ink-2); text-decoration: none; }
.vp-unread:hover { background: var(--tint); color: var(--primary); }
.vp-unread-count {
    position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: var(--primary); color: var(--on-primary); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
    box-shadow: 0 0 0 2px var(--surface);
}

/* Session expiry dialogs (issue #128) */
.vp-session-dialog { max-width: min(480px, calc(100vw - 32px)); padding: 24px; border: 1px solid var(--line); border-radius: var(--rc); background: var(--surface); color: var(--ink); box-shadow: 0 12px 32px oklch(20% .03 235 / .25); }
.vp-session-dialog::backdrop { background: oklch(20% .03 235 / .55); }
.vp-session-dialog h2 { font-size: 1.25rem; margin: 0 0 12px; }
.vp-session-dialog ol { padding-left: 1.25rem; }
.vp-session-countdown { font-size: 1.1rem; }
.vp-session-countdown strong { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.vp-session-error { color: var(--bad); }
.vp-session-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.vp-session-primary, .vp-session-secondary { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: var(--r); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.vp-session-primary { border: 1px solid var(--primary); background: var(--primary); color: var(--on-primary); }
.vp-session-primary:hover { background: var(--primary-hover); color: var(--on-primary); }
.vp-session-secondary { border: 1px solid var(--line); background: var(--soft); color: var(--ink-2); }
.vp-session-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--primary); }
.vp-session-dialog :focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.vp-session-restored-notice { padding: 12px 16px; border-radius: var(--r); background: var(--ok-bg); color: var(--ok); }
.mfa-codes { font-family: var(--mono); font-size: 1.1rem; }
.mfa-code-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 16px; }