/* RestarFleet buyer portal theme (redesign, approved 30 Sep 2026). Visual only; loaded last.
   Palette: ../shared/restarfleet-app-tokens.css. Colours of the portal's own rules: restarfleet-theme-map.css (generated). */
:root {
  --ink: var(--rf-head); --ink-2: var(--rf-text); --muted: var(--rf-muted); --subtle: var(--rf-muted); --line: var(--rf-line-2);
  --bg: var(--rf-bg); --surface: var(--rf-panel); --brand: var(--rf-accent); --brand-dark: var(--rf-accent-hover);
  --brand-soft: color-mix(in srgb, var(--rf-accent) 12%, transparent); --ok: var(--rf-green); --warn: var(--rf-amber); --bad: var(--rf-red); --shadow: none;
}
html.rf-app body { background: var(--rf-bg); color: var(--rf-text); font-family: var(--rf-font); }
html.rf-app :is(h1, h2, h3, strong) { color: var(--rf-head); }
/* Header and menu bar: the dark brand surface in both modes */
html.rf-app header.top, html.rf-app[data-tenant-theme] header.top { background: var(--rf-side); color: #F3FAF7; border-bottom: 1px solid var(--rf-side-line); box-shadow: none; }
html.rf-app header.top strong { color: #F3FAF7; font-weight: 500; }
html.rf-app header.top span, html.rf-app[data-tenant-theme] header.top span { color: #86A89B; }
html.rf-app .product-kicker { color: var(--rf-accent) !important; font-family: var(--rf-mono); font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 10.5px !important; }
html.rf-app header.top .mark { background: var(--rf-side-2); border: 1px solid color-mix(in srgb, var(--rf-accent) 38%, transparent); box-shadow: none; }
html.rf-app .header-action { background: transparent; border-color: var(--rf-side-line); color: #D6E7E0; }
html.rf-app header.top .rf-mode { margin: 0; border-color: var(--rf-side-line); }
html.rf-app .nav-shell { background: var(--rf-bg); border-bottom-color: var(--rf-line); }
html.rf-app .menu-button { background: var(--rf-panel); border: 1px solid var(--rf-line-2); color: var(--rf-head); box-shadow: none; border-radius: 10px; }
html.rf-app .sidebar { background: var(--rf-panel); border-color: var(--rf-line-2); box-shadow: var(--rf-shadow-lg); }
html.rf-app .side-nav button { color: var(--rf-text); font-weight: 500; }
html.rf-app .side-nav button:hover { background: var(--rf-panel-2); }
html.rf-app .side-nav button[aria-current="page"] { background: color-mix(in srgb, var(--rf-accent) 12%, transparent); color: var(--rf-head); border-color: transparent; box-shadow: inset 3px 0 0 var(--rf-accent); }
html.rf-app .sidebar-backdrop { background: var(--rf-dim); }
/* Page intro: emerald light instead of the navy gradient */
html.rf-app .page-intro { background: radial-gradient(80% 140% at 95% 0%, color-mix(in srgb, #0B6B58 70%, transparent), transparent 70%), var(--rf-panel); border: 1px solid var(--rf-line-2); color: var(--rf-head); box-shadow: none; }
html.rf-app .page-intro :is(h1, h2, p, span, strong, .page-kicker) { color: inherit; }
html.rf-app .page-intro .page-kicker { color: var(--rf-link) !important; font-family: var(--rf-mono); font-weight: 500; letter-spacing: 0; text-transform: none; }
html.rf-app .page-intro p { color: var(--rf-soft) !important; }
/* Cards, rows, tiles */
html.rf-app :is(.card, .tile, .year-group) { background: var(--rf-panel); border-color: var(--rf-line); box-shadow: none; }
html.rf-app .tile { border-top: 2px solid var(--tone, var(--rf-line-2)) !important; }
html.rf-app .tile:nth-child(1) { --tone: var(--rf-red); } html.rf-app .tile:nth-child(2) { --tone: var(--rf-green); }
html.rf-app .tile:nth-child(3) { --tone: var(--rf-blue); } html.rf-app .tile:nth-child(4) { --tone: var(--rf-amber); }
html.rf-app .tile strong { font-family: var(--rf-mono); font-weight: 600; }
html.rf-app :is(.tile small, .row span, th) { text-transform: none; letter-spacing: 0; font-weight: 500; }
html.rf-app .row { background: var(--rf-panel-2); border-color: var(--rf-line); }
html.rf-app .row strong { color: var(--rf-head); font-weight: 500; }
html.rf-app th { background: var(--rf-panel-2); color: var(--rf-muted); border-color: var(--rf-line); font-family: var(--rf-mono); }
html.rf-app td { background: transparent; border-bottom-color: var(--rf-line); color: var(--rf-text); }
html.rf-app tbody tr:hover td { background: var(--rf-panel-2); }
html.rf-app td.num { font-family: var(--rf-mono); }
html.rf-app .year-group summary { background: var(--rf-panel-2); color: var(--rf-head); }
/* Status pills */
html.rf-app :is(.pill, .payment-status) { border-radius: 6px; font-weight: 500; }
html.rf-app :is(.pill.paid, .pill.approved, .payment-status.paid) { background: color-mix(in srgb, var(--rf-green) 15%, transparent); color: var(--rf-green); }
html.rf-app .pill.partial { background: color-mix(in srgb, var(--rf-amber) 15%, transparent); color: var(--rf-amber); }
html.rf-app :is(.pill.overdue, .pill.rejected, .payment-status.overdue) { background: color-mix(in srgb, var(--rf-red) 15%, transparent); color: var(--rf-red); }
html.rf-app .pill.upcoming { background: color-mix(in srgb, var(--rf-grey) 15%, transparent); color: var(--rf-grey); }
html.rf-app :is(.pill.submitted, .payment-status.upcoming) { background: color-mix(in srgb, var(--rf-blue) 15%, transparent); color: var(--rf-blue); }
html.rf-app .banner.info { background: color-mix(in srgb, var(--rf-amber) 12%, transparent); border-color: color-mix(in srgb, var(--rf-amber) 35%, transparent); color: var(--rf-amber); }
html.rf-app .banner.cancel, html.rf-app .msg.error { background: color-mix(in srgb, var(--rf-red) 12%, transparent); border-color: color-mix(in srgb, var(--rf-red) 35%, transparent); color: var(--rf-red); }
html.rf-app .msg.ok { background: color-mix(in srgb, var(--rf-green) 12%, transparent); border-color: color-mix(in srgb, var(--rf-green) 35%, transparent); color: var(--rf-green); }
/* Buttons and fields */
html.rf-app .btn { background: var(--rf-panel); border: 1px solid var(--rf-line-2); color: var(--rf-head); font-weight: 500; }
html.rf-app .btn.primary { background: var(--rf-accent); border-color: var(--rf-accent); color: var(--rf-accent-ink); box-shadow: none; }
html.rf-app :is(input, select, textarea) { background: var(--rf-panel-2); color: var(--rf-head); border: 1px solid var(--rf-line-2); }
html.rf-app :is(input, select, textarea):focus { border-color: var(--rf-accent); background: var(--rf-panel-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rf-accent) 22%, transparent); }
html.rf-app label { color: var(--rf-soft); font-weight: 500; }
html.rf-app .foot, html.rf-app .foot strong { color: var(--rf-muted); }
/* Sign in */
html.rf-app .centre { background: radial-gradient(70% 50% at 80% 10%, rgba(11, 107, 88, .55), transparent 70%), #06120F; }
html.rf-app .centre .card { background: rgba(11, 29, 24, .95); border-color: rgba(174, 238, 214, .2); color: #D6E7E0; }
html.rf-app .centre .card :is(h2, strong) { color: #F3FAF7; }
html.rf-app .centre .card :is(.sub, label, span) { color: #A8C3B9; }
html.rf-app .centre :is(input) { background: #0F2620; color: #F3FAF7; border-color: rgba(174, 238, 214, .2); }
html.rf-app .centre .btn:not(.primary) { background: transparent; color: #D6E7E0; border-color: rgba(174, 238, 214, .2); }
html.rf-app .signin-brand .mark { background: #0E2922; border: 1px solid rgba(70, 226, 195, .4); }
/* Night / day switch in the header */
.rf-mode-compact { display: inline-flex; border: 1px solid var(--rf-side-line); border-radius: 8px; padding: 2px; }
.rf-mode-compact button { display: inline-flex; align-items: center; padding: 4px 6px; border: 0; border-radius: 6px; background: none; color: #86A89B; cursor: pointer; min-height: 0; width: auto; }
.rf-mode-compact button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.rf-mode-compact button[aria-pressed="true"] { background: #F3FAF7; color: #06120F; }
/* Paper: light surfaces and dark text whatever the screen mode */
@media print { html.rf-app body { background: #fff; } html.rf-app :is(.card, .row, td, th) { background: #fff !important; } }
/* Header sign-out icon and the page intro's old decorative circles */
html.rf-app header.top .header-action { background: transparent !important; border: 1px solid var(--rf-side-line) !important; color: #D6E7E0 !important; }
html.rf-app header.top .header-action svg { stroke: currentColor; }
html.rf-app .page-intro::before, html.rf-app .page-intro::after { display: none !important; }
html.rf-app .agreement-chip { background: var(--rf-panel-2) !important; border: 1px solid var(--rf-line-2) !important; color: var(--rf-head) !important; }
html.rf-app .agreement-chip * { color: inherit !important; }
html.rf-app header.top .header-action { width: 34px !important; min-width: 34px; flex: 0 0 34px; }
html.rf-app header.top .header-action svg { width: 16px; height: 16px; flex: 0 0 16px; }
/* Tables stay on one line per row and scroll sideways on small phones, as before */
html.rf-app :is(td, th) { white-space: nowrap; }
html.rf-app td.num { font-family: var(--rf-font); font-variant-numeric: tabular-nums; font-weight: 500; }
