/* RestarFleet app theme (redesign, approved 30 Sep 2026). Visual only: loaded after the app's own
   styles; no ids, JS-queried classes or text are changed. Night / day follow the device unless the user
   picks with the sidebar switch (html[data-rf-theme]). The company colour (tenant preset) sets --rf-accent.
   Status colours keep their meaning in both modes. Remove this <link> to roll back. */

/* Palette: restarfleet-app-tokens.css (shared with the staff app and buyer portal) */
/* The app's own variables follow the theme */
:root {
  --orange: var(--rf-accent); --orange-dark: var(--rf-accent-hover); --orange-light: color-mix(in srgb, var(--rf-accent) 12%, transparent);
  --black: var(--rf-head); --text: var(--rf-head);  /* the app uses --black for dark text; the sidebar sets its own colour below */ --text-muted: var(--rf-muted); --border: var(--rf-line-2);
  --bg: var(--rf-bg); --surface: var(--rf-panel); --radius-sm: 8px; --radius-md: 12px;
  --shadow-sm: var(--rf-shadow); --shadow-md: var(--rf-shadow-lg);
}

/* ================= Base ================= */
html.rf-app body { font-family: var(--rf-font); font-weight: 400; background: var(--rf-bg); color: var(--rf-text); }
html.rf-app :is(button, input, select, textarea) { font-family: inherit; }
html.rf-app :is(h1, h2, h3, h4) { color: var(--rf-head); }
html.rf-app ::-webkit-scrollbar-thumb { background: var(--rf-line-2); }
html.rf-app ::selection { background: color-mix(in srgb, var(--rf-accent) 35%, transparent); }

/* ================= Sidebar ================= */
html.rf-app #sidebar { background: var(--rf-side); border-inline-end: 1px solid var(--rf-side-line); box-shadow: none; }
html.rf-app #sidebar .brand { border-bottom-color: var(--rf-side-line); padding: 18px 16px; }
html.rf-app #sidebar .brand-icon { background: var(--rf-side-2); color: var(--rf-accent); border: 1px solid color-mix(in srgb, var(--rf-accent) 38%, transparent); width: 40px; height: 40px; font-weight: 600; font-size: 17px; }
html.rf-app #sidebar .brand-icon.has-logo { background: transparent; border: 0; }
html.rf-app #sidebar .brand-name { font-weight: 500; font-size: 14.5px; letter-spacing: 0; }
html.rf-app #sidebar .brand-sub { font-family: var(--rf-mono); font-size: 10.5px; letter-spacing: 0; text-transform: none; color: var(--rf-side-muted); }
html.rf-app .nav-section-label { font-family: var(--rf-mono); font-weight: 500; font-size: 11px; letter-spacing: .01em; text-transform: none; color: #5F8174; padding: 6px 20px 6px; }
html.rf-app .nav-item { color: var(--rf-side-text); font-weight: 400; font-size: 13.5px; border: 0; }
html.rf-app .nav-item svg { color: #7E9E92; }
html.rf-app .nav-item:hover { background: rgba(70, 226, 195, .06); color: #F3FAF7; }
html.rf-app .nav-item.active { background: color-mix(in srgb, var(--rf-accent) 11%, transparent); color: #F3FAF7; font-weight: 500; border: 0; }
html.rf-app .nav-item.active svg { color: var(--rf-accent); }
html.rf-app .nav-item.active::before { background: var(--rf-accent); width: 4px; }
html.rf-app .nav-badge { background: #F87171; color: #1A0505; font-family: var(--rf-mono); border-radius: 6px; font-weight: 600; }
html.rf-app .addon-tag { border-color: color-mix(in srgb, var(--rf-accent) 45%, transparent); color: var(--rf-accent); background: transparent; font-family: var(--rf-mono); border-radius: 5px; font-weight: 600; }
html.rf-app .sidebar-user { background: transparent; border: 0; border-top: 1px solid var(--rf-side-line); border-radius: 0; box-shadow: none; margin: auto 0 0; padding: 14px 16px 12px; }
html.rf-app .sidebar-user-email { font-weight: 400; color: #D6E7E0; }
html.rf-app .sidebar-user-role { font-family: var(--rf-mono); }
html.rf-app .sidebar-logout { background: transparent; border-color: var(--rf-side-line); color: #A8C3B9; }
html.rf-app .sidebar-logout:hover { background: rgba(70, 226, 195, .08); border-color: color-mix(in srgb, var(--rf-accent) 45%, transparent); color: #F3FAF7; }
.rf-mode { display: inline-flex; border: 1px solid var(--rf-side-line); border-radius: 8px; padding: 2px; margin-top: 8px; }
.rf-mode button { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border: 0; border-radius: 6px; background: none; color: #7E9E92; font: 500 11.5px var(--rf-font); cursor: pointer; }
.rf-mode button svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.rf-mode button[aria-pressed="true"] { background: #F3FAF7; color: #06120F; }
.rf-powered { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: #5F8174; font: 500 10px var(--rf-mono); }
.rf-powered img { width: 16px; height: 16px; }

/* ================= Main + header ================= */
html.rf-app #main { background: var(--rf-bg); padding-top: 0; }
html.rf-app .page-header { background: color-mix(in srgb, var(--rf-bg) 92%, transparent); border-bottom: 1px solid var(--rf-line); box-shadow: none; min-height: 72px; }
html.rf-app .page-title { font-weight: 600; font-size: 21px; letter-spacing: -.015em; color: var(--rf-head); }
html.rf-app .page-title::before { display: none; }
html.rf-app .page-subtitle { margin-inline-start: 0; font-family: var(--rf-mono); font-size: 12px; color: var(--rf-muted); }
html.rf-app .period-label { font-family: var(--rf-mono); font-weight: 500; font-size: 14px; color: var(--rf-head); }

/* ================= Buttons ================= */
html.rf-app .btn { border-radius: 9px; font-weight: 500; min-height: 36px; }
html.rf-app :is(.btn-primary, .dash-action-btn.primary, .dash-lookup-btn, .dash-close-btn, .dash-btn-orange, .login-btn) { background: var(--rf-accent); color: var(--rf-accent-ink); border-color: var(--rf-accent); box-shadow: none; }
html.rf-app :is(.btn-primary, .dash-action-btn.primary, .dash-lookup-btn, .dash-close-btn, .dash-btn-orange, .login-btn):hover:not(:disabled) { background: var(--rf-accent-hover); border-color: var(--rf-accent-hover); box-shadow: none; }
html.rf-app :is(.btn-ghost, .btn-icon, .dash-action-btn, .dash-btn, .pb-filter-clear) { background: var(--rf-panel); color: var(--rf-head); border: 1px solid var(--rf-line-2); box-shadow: none; }
html.rf-app :is(.btn-ghost, .btn-icon, .dash-action-btn, .dash-btn, .pb-filter-clear):hover { background: var(--rf-panel-2); border-color: var(--rf-accent); color: var(--rf-head); }
html.rf-app .btn-success { background: var(--rf-green); color: #fff; }
html.rf-app .btn-danger { background: var(--rf-red); color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-rf-theme="day"]).rf-app :is(.btn-success) { color: #03140A; } :root:not([data-rf-theme="day"]).rf-app .btn-danger { color: #1A0505; } }
:root[data-rf-theme="night"].rf-app .btn-success { color: #03140A; }
:root[data-rf-theme="night"].rf-app .btn-danger { color: #1A0505; }
html.rf-app .btn-today { background: var(--rf-panel); color: var(--rf-head); border: 1px solid var(--rf-line-2); }
html.rf-app .view-toggle { border-color: var(--rf-line-2); box-shadow: none; padding: 3px; gap: 2px; background: var(--rf-panel); }
html.rf-app .view-toggle .vtbtn { background: transparent; color: var(--rf-soft); border: 0 !important; border-radius: 6px; }
html.rf-app .view-toggle .vtbtn.active { background: var(--rf-head); color: var(--rf-bg); font-weight: 500; }

/* ================= Forms ================= */
html.rf-app :is(.form-control, .pb-filter-input, .dash-lookup-input, .dash-close-input, .login-field input),
html.rf-app #main :is(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]):not([type=range]), select, textarea) {
  background: var(--rf-panel-2); color: var(--rf-head); border: 1px solid var(--rf-line-2); border-radius: 9px; box-shadow: none;
}
html.rf-app :is(.form-control, .pb-filter-input, .dash-lookup-input, .dash-close-input, .login-field input):focus,
html.rf-app #main :is(input, select, textarea):focus { border-color: var(--rf-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rf-accent) 22%, transparent); outline: none; }
html.rf-app :is(input, textarea)::placeholder { color: var(--rf-muted); }
html.rf-app .form-control[readonly] { background: transparent; border-style: dashed; color: var(--rf-soft); }
html.rf-app .form-label { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--rf-soft); }
html.rf-app .form-section { border-top-color: var(--rf-line); }
html.rf-app .form-section-title { font-family: var(--rf-mono); font-weight: 500; font-size: 12px; text-transform: none; letter-spacing: 0; color: var(--rf-link); display: inline-flex; align-items: center; gap: 8px; }
html.rf-app .form-section-title::before { content: ''; width: 12px; height: 4px; background: currentColor; transform: skewX(-32deg); border-radius: 1px; }
html.rf-app .btn-add-cust { background: transparent; border: 1px solid var(--rf-line-2); color: var(--rf-head); border-radius: 8px; }
html.rf-app .rental-type-toggle { border: 1px solid var(--rf-line-2); border-radius: 9px; padding: 3px; gap: 3px; background: var(--rf-panel); }
html.rf-app .rental-type-toggle button { background: transparent; border: 0 !important; border-radius: 7px; color: var(--rf-soft); }
html.rf-app .rental-type-toggle button.active { background: var(--rf-accent); color: var(--rf-accent-ink); font-weight: 500; }
html.rf-app .duration-chip { 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); font-family: var(--rf-mono); font-weight: 500; }
html.rf-app .conflict-warn, html.rf-app .rp-late-warn { background: color-mix(in srgb, var(--rf-red) 12%, transparent); border-color: color-mix(in srgb, var(--rf-red) 40%, transparent); color: var(--rf-red); }
html.rf-app :is(.balance-row, .rp-balance-box) { background: var(--rf-panel-2); border: 1px solid var(--rf-line-2); }
html.rf-app :is(.balance-row, .rp-balance-box) .bal-amount { font-family: var(--rf-mono); font-weight: 600; }
html.rf-app :is(.balance-row, .rp-balance-box) .bal-amount.owed { color: var(--rf-red); }
html.rf-app :is(.balance-row, .rp-balance-box) .bal-amount.settled { color: var(--rf-green); }
html.rf-app :is(.balance-row, .rp-balance-box) .bal-amount.refund { color: var(--rf-amber); }
html.rf-app .source-chip { background: transparent; border: 1px solid var(--rf-line-2); color: var(--rf-soft); border-radius: 8px; }
html.rf-app .source-chip.active { background: color-mix(in srgb, var(--rf-accent) 12%, transparent); border-color: var(--rf-accent); color: var(--rf-head); font-weight: 500; }

/* ================= Dashboard ================= */
html.rf-app #dashboard-page { background: var(--rf-bg); }
html.rf-app .dash-hdr { background: var(--rf-bg); border-bottom: 1px solid var(--rf-line); }
html.rf-app .dash-hdr-date { font-family: var(--rf-mono); font-weight: 400; color: var(--rf-muted); }
html.rf-app .dash-kpi { background: var(--rf-panel); border: 1px solid var(--rf-line); border-radius: 12px; box-shadow: none; min-height: 108px; padding: 14px 16px; }
html.rf-app .dash-kpi.kpi-green  { --dash-kpi-accent: var(--rf-green); }
html.rf-app .dash-kpi.kpi-blue   { --dash-kpi-accent: var(--rf-blue); }
html.rf-app .dash-kpi.kpi-orange { --dash-kpi-accent: var(--rf-mint); }
html.rf-app .dash-kpi.kpi-red    { --dash-kpi-accent: var(--rf-red); }
html.rf-app .dash-kpi.kpi-yellow { --dash-kpi-accent: var(--rf-amber); }
html.rf-app .dash-kpi.kpi-purple { --dash-kpi-accent: var(--rf-purple); }
html.rf-app .dash-kpi.kpi-teal   { --dash-kpi-accent: var(--rf-teal); }
/* the slanted bar from the logo replaces the coloured top strip */
html.rf-app .dash-kpi::before { left: auto; inset-inline-end: 16px; top: 18px; width: 22px; height: 5px; border-radius: 1px; transform: skewX(-32deg); background: var(--dash-kpi-accent); }
html.rf-app .dash-kpi:hover { transform: translateY(-1px); box-shadow: none; border-color: color-mix(in srgb, var(--dash-kpi-accent) 55%, transparent); }
html.rf-app .dash-kpi-icon { background: color-mix(in srgb, var(--dash-kpi-accent) 13%, transparent); border: 0; color: var(--dash-kpi-accent); }
html.rf-app .dash-kpi-num { color: var(--rf-head); font-weight: 600; font-size: 30px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
html.rf-app .dash-kpi-label { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 12.5px; color: var(--rf-soft); }
html.rf-app :is(.dash-panel, .dash-section) { background: var(--rf-panel); border: 1px solid var(--rf-line); box-shadow: none; border-radius: 12px; }
html.rf-app :is(.dash-panel-hdr, .dash-sec-hdr) { background: transparent; border-bottom: 1px solid var(--rf-line); }
html.rf-app :is(.dash-panel-title, .dash-sec-title) { font-weight: 500; font-size: 14px; color: var(--rf-head); }
html.rf-app .dash-sec-link { color: var(--rf-link); }
html.rf-app .dash-lookup-hit { background: var(--rf-panel-2); border-color: var(--rf-line-2); }
html.rf-app .dash-lookup-hit:hover { background: color-mix(in srgb, var(--rf-accent) 10%, transparent); border-color: var(--rf-accent); }
html.rf-app .dash-lookup-hit-name { color: var(--rf-head); font-weight: 500; }
html.rf-app .dash-vstatus-label { color: var(--rf-text); }
html.rf-app .dash-vstatus-val { font-family: var(--rf-mono); font-weight: 500; color: var(--rf-head) !important; }
html.rf-app .dot-green { background: var(--rf-green); } html.rf-app .dot-orange { background: var(--rf-mint); } html.rf-app .dot-red { background: var(--rf-red); }
html.rf-app .dash-item { border-bottom-color: var(--rf-line); }
html.rf-app .dash-item:hover { background: var(--rf-panel-2); }
html.rf-app .dash-item-name { color: var(--rf-head); font-weight: 500; }
html.rf-app .dash-item-badge { font-family: var(--rf-mono); font-weight: 500; border-radius: 6px; }
html.rf-app .badge-due    { background: color-mix(in srgb, var(--rf-amber) 15%, transparent); color: var(--rf-amber); }
html.rf-app .badge-over   { background: color-mix(in srgb, var(--rf-red) 15%, transparent); color: var(--rf-red); }
html.rf-app :is(.badge-paid, .badge-refund) { background: color-mix(in srgb, var(--rf-green) 15%, transparent); color: var(--rf-green); }
html.rf-app .dash-empty { color: var(--rf-muted); }

/* ================= Planning board ================= */
html.rf-app :is(.stats-bar, .legend-bar) { background: var(--rf-bg); border-bottom-color: var(--rf-line); }
html.rf-app .stat-item:not(:first-child) { border-inline-start-color: var(--rf-line); }
html.rf-app .stat-count { font-family: var(--rf-mono); font-weight: 600; color: var(--rf-head); }
html.rf-app .stat-label, html.rf-app .legend-item { color: var(--rf-soft); font-weight: 400; }
html.rf-app .stats-right, html.rf-app .legend-hint { font-family: var(--rf-mono); color: var(--rf-muted); }
html.rf-app .stat-dot.ongoing { background: var(--rf-mint); } html.rf-app .stat-dot.upcoming { background: var(--rf-purple); }
html.rf-app .stat-dot.overdue { background: var(--rf-red); } html.rf-app .stat-dot.finished { background: var(--rf-green); }
html.rf-app .legend-swatch { border: 0; height: 8px; width: 16px; border-radius: 3px; }
html.rf-app .legend-swatch.ongoing { background: var(--rf-mint); } html.rf-app .legend-swatch.overdue { background: var(--rf-red); }
html.rf-app .legend-swatch.maintenance { background: var(--rf-grey); } html.rf-app .legend-swatch.finished { background: var(--rf-green); }
html.rf-app #pb-filter-bar { background: var(--rf-bg); border-bottom-color: var(--rf-line); }
html.rf-app .board-wrapper { background: var(--rf-bg); }
html.rf-app .board-card { background: var(--rf-panel); border: 1px solid var(--rf-line); box-shadow: none; border-radius: 12px; }
html.rf-app .pb-table thead th { background: var(--rf-panel); border-bottom: 1px solid var(--rf-line); color: var(--rf-muted); }
html.rf-app .th-vehicle { border-inline-end: 1px solid var(--rf-line) !important; box-shadow: none !important; font-family: var(--rf-mono); font-weight: 500; }
html.rf-app .th-day-num { font-family: var(--rf-mono); font-weight: 500; color: var(--rf-head); }
html.rf-app .th-day-name { color: var(--rf-muted); text-transform: none; letter-spacing: 0; font-size: 10.5px; }
html.rf-app .th-day.weekend-hdr { background: color-mix(in srgb, var(--rf-panel-2) 70%, var(--rf-panel)) !important; }
html.rf-app .th-day.weekend-hdr :is(.th-day-num, .th-day-name) { color: var(--rf-muted); }
/* Today: a mint rule down the column, the logo's orange node marks "now" */
html.rf-app .th-day.today-hdr { background: color-mix(in srgb, var(--rf-accent) 10%, var(--rf-panel)) !important; box-shadow: none; position: sticky; }
html.rf-app .th-day.today-hdr .th-day-num { background: none; color: var(--rf-link); box-shadow: none; }
html.rf-app .th-day.today-hdr::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--rf-node); box-shadow: 0 0 0 2.5px var(--rf-node-ring); z-index: 2; }
html.rf-app :is(.td-empty.today-col, .td-res.today-col) { background: color-mix(in srgb, var(--rf-accent) 6%, transparent); box-shadow: inset 1px 0 color-mix(in srgb, var(--rf-accent) 45%, transparent), inset -1px 0 color-mix(in srgb, var(--rf-accent) 45%, transparent); }
html.rf-app .pb-table tbody tr { border-bottom-color: var(--rf-line); }
html.rf-app .td-empty { border-inline-end-color: var(--rf-line); }
html.rf-app .td-empty.weekend-col { background: color-mix(in srgb, var(--rf-panel-2) 60%, transparent); }
html.rf-app .td-empty:hover { background: color-mix(in srgb, var(--rf-accent) 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rf-accent) 30%, transparent); }
html.rf-app .td-empty:hover::after { color: var(--rf-accent); opacity: .8; }
html.rf-app .td-vehicle { background: var(--rf-panel); border-inline-end: 1px solid var(--rf-line); box-shadow: none; }
html.rf-app .pb-table tbody tr:hover .td-vehicle { background: var(--rf-panel-2); }
html.rf-app .vehicle-name { color: var(--rf-head); font-weight: 500; }
html.rf-app .vehicle-plate { font-family: var(--rf-mono); font-weight: 500; color: var(--rf-muted); }
html.rf-app .pb-cat-row { --cat-bg: var(--rf-panel-2); --cat-text: var(--rf-soft); --cat-border: var(--rf-line); }
html.rf-app .pb-cat-sticky { box-shadow: none; }
html.rf-app .pb-cat-name { font-family: var(--rf-mono); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 12px; display: inline-flex; align-items: center; gap: 8px; }
html.rf-app .pb-cat-name::before { content: ''; width: 14px; height: 4px; border-radius: 1px; transform: skewX(-32deg); background: var(--cat-accent); }
html.rf-app .pb-cat-badge { background: transparent; border: 0; font-family: var(--rf-mono); color: var(--rf-muted); }
html.rf-app .pb-cat-tone-green { --cat-accent: var(--rf-green); } html.rf-app .pb-cat-tone-blue { --cat-accent: var(--rf-blue); }
html.rf-app .pb-cat-tone-orange { --cat-accent: var(--rf-amber); } html.rf-app .pb-cat-tone-yellow { --cat-accent: var(--rf-amber); }
html.rf-app .pb-cat-tone-purple { --cat-accent: var(--rf-purple); } html.rf-app .pb-cat-tone-teal { --cat-accent: var(--rf-teal); }
html.rf-app .pb-cat-row :is(.pb-cat-sticky, .pb-cat-stripe) { background: var(--rf-panel-2); border-color: var(--rf-line); }
/* Bookings: soft tint with a coloured leading edge */
html.rf-app .res-bar { border: 0 !important; color: var(--rf-head); font-weight: 500; background: color-mix(in srgb, var(--c) 16%, transparent); }
html.rf-app .td-res.r-start .res-bar { border-inline-start: 3px solid var(--c) !important; }
html.rf-app .res-bar.s-ongoing { --c: var(--rf-mint); } html.rf-app .res-bar.s-upcoming { --c: var(--rf-purple); }
html.rf-app .res-bar.s-overdue { --c: var(--rf-red); } html.rf-app .res-bar.s-maintenance { --c: var(--rf-grey); } html.rf-app .res-bar.s-finished { --c: var(--rf-green); }
html.rf-app .res-bar:is(.s-ongoing, .s-upcoming, .s-overdue, .s-maintenance, .s-finished) { background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--rf-head); }
@keyframes rf-pulse { 50% { background: color-mix(in srgb, var(--rf-red) 30%, transparent); } }
html.rf-app .res-bar.s-overdue { animation: rf-pulse 2s ease-in-out infinite; }
html.rf-app .res-label-meta { color: var(--rf-soft); opacity: 1; font-weight: 400; }

/* ================= Popups ================= */
html.rf-app :is(#popup-overlay, #cust-overlay, #return-overlay) { background: var(--rf-dim); }
html.rf-app :is(.detail-popup, .booking-popup, .add-cust-popup, .return-popup) { background: var(--rf-panel); border: 1px solid var(--rf-line-2); box-shadow: var(--rf-shadow-lg); border-radius: 16px; color: var(--rf-text); }
html.rf-app :is(.dp-header, .bp-header) { border-bottom-color: var(--rf-line); }
html.rf-app :is(.dp-actions, .bp-footer) { border-top-color: var(--rf-line); }
html.rf-app :is(.dp-vehicle-name, .bp-title) { color: var(--rf-head); font-weight: 600; }
html.rf-app .bp-title { font-size: 18px; }
html.rf-app .dp-plate { font-family: var(--rf-mono); }
html.rf-app .dp-close { background: transparent; border: 1px solid var(--rf-line-2); border-radius: 8px; color: var(--rf-soft); }
html.rf-app .dp-close:hover { background: var(--rf-panel-2); color: var(--rf-head); }
html.rf-app .dp-section-title { font-family: var(--rf-mono); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--rf-link); }
html.rf-app .dp-label { color: var(--rf-muted); }
html.rf-app .dp-value { color: var(--rf-head); font-weight: 500; }
html.rf-app .dp-value.big { color: var(--rf-link); font-family: var(--rf-mono); }
html.rf-app .dp-value.green { color: var(--rf-green); } html.rf-app .dp-value.red { color: var(--rf-red); }
html.rf-app .dp-divider { border-top-color: var(--rf-line); }
html.rf-app .dp-note { background: var(--rf-panel-2); color: var(--rf-soft); }
html.rf-app .dp-res-id-bar { background: var(--rf-panel-2); border-color: var(--rf-line-2); }
html.rf-app .dp-res-id-label { font-family: var(--rf-mono); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--rf-muted); }
html.rf-app .dp-res-id-val { color: var(--rf-head); font-family: var(--rf-mono); }
html.rf-app .dp-res-id-copy { border-color: var(--rf-line-2); color: var(--rf-head); }
html.rf-app .status-pill { border-radius: 6px; font-weight: 500; }
html.rf-app .status-pill.ongoing { background: color-mix(in srgb, var(--rf-mint) 15%, transparent); color: var(--rf-mint); }
html.rf-app .status-pill.upcoming { background: color-mix(in srgb, var(--rf-purple) 15%, transparent); color: var(--rf-purple); }
html.rf-app .status-pill.overdue { background: color-mix(in srgb, var(--rf-red) 15%, transparent); color: var(--rf-red); }
html.rf-app .status-pill.maintenance, html.rf-app .status-pill.cancelled { background: color-mix(in srgb, var(--rf-grey) 15%, transparent); color: var(--rf-grey); }
html.rf-app .status-pill.finished { background: color-mix(in srgb, var(--rf-green) 15%, transparent); color: var(--rf-green); }
html.rf-app .rp-summary { background: var(--rf-panel-2); border-color: var(--rf-line); }
html.rf-app .rp-sum-label { color: var(--rf-muted); }
html.rf-app .rp-sum-val { color: var(--rf-head); font-weight: 500; }
html.rf-app .buyer-profile-section { background: color-mix(in srgb, var(--rf-accent) 7%, transparent); border-color: color-mix(in srgb, var(--rf-accent) 30%, transparent); }
html.rf-app :is(.buyer-profile-title, .buyer-profile-help) { color: var(--rf-link); }

/* ================= Toast ================= */
html.rf-app .toast { background: var(--rf-head); color: var(--rf-bg); font-weight: 500; border-radius: 10px; }
html.rf-app .toast.info { border-inline-start-color: var(--rf-accent); }

/* ================= Login =================
   The sign-in is always the dark brand surface (as approved), in night and day mode.
   apps/shared/login-background.css styles this card with id selectors (#login-page > .login-card) and
   forces it white under prefers-reduced-transparency, so every rule here carries #login-page plus the
   rf-app class to outrank it. Colours are fixed (not night/day tokens) because the card never turns light. */
html.rf-app #login-page { background: radial-gradient(50% 60% at 75% 40%, rgba(11, 107, 88, .5), transparent 70%), #06120F; }
html.rf-app #login-page::before, html.rf-app #login-page::after { display: none; }
html.rf-app #login-page > .login-card,
html.rf-app #login-page > .tenant-login-shell {
  background: #0B1D18; border: 1px solid rgba(174, 238, 214, .2); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
@media (prefers-reduced-transparency: reduce) {
  html.rf-app #login-page > .login-card,
  html.rf-app #login-page > .tenant-login-shell { background: #0B1D18; }
}
html.rf-app #login-page .tenant-login-brand-panel {
  background: radial-gradient(90% 70% at 20% 0%, rgba(11, 107, 88, .7), transparent 70%), #06120F;
  color: #F3FAF7; border-inline-end: 1px solid rgba(174, 238, 214, .12);
}
html.rf-app #login-page .tenant-login-brand-panel::after { display: none; }
html.rf-app #login-page .tenant-login-brand-panel .login-brand-name { color: #F3FAF7; font-weight: 600; }
html.rf-app #login-page :is(.tenant-login-brand-panel .login-brand-sub, .login-brand-assurance) { color: #A8C3B9; }
html.rf-app #login-page .login-brand-icon { background: #0E2922; color: #46E2C3; border: 1px solid rgba(70, 226, 195, .4); box-shadow: none; }
html.rf-app #login-page .login-brand-icon.has-logo { background: #fff; border: 0; }
html.rf-app #login-page .tenant-login-form-panel { background: #0B1D18; }
html.rf-app #login-page .login-title { color: #F3FAF7; font-weight: 600; }
html.rf-app #login-page .login-subtitle { color: #A8C3B9; }
html.rf-app #login-page .login-field label { color: #D6E7E0; font-weight: 500; }
html.rf-app #login-page :is(.login-input-wrap, .login-field input) { background: #0F2620; color: #F3FAF7; border-color: rgba(174, 238, 214, .2); }
html.rf-app #login-page .login-input-wrap input { background: transparent; color: #F3FAF7; }
html.rf-app #login-page :is(.login-input-icon, .login-password-toggle) { color: #86A89B; }
html.rf-app #login-page .login-field input::placeholder { color: #7E9E92; }
html.rf-app #login-page .interface-language-control select { background: #0F2620; color: #D6E7E0; border: 1px solid rgba(174, 238, 214, .2); }
html.rf-app #login-page .login-error { background: rgba(248, 113, 113, .12); border-color: rgba(248, 113, 113, .4); color: #F87171; }
html.rf-app #login-page .login-btn { background: var(--rf-accent); color: var(--rf-accent-ink); box-shadow: none; }

/* ================= Fixes after first run ================= */
html.rf-app .pb-table thead th.th-vehicle { background: var(--rf-panel) !important; color: var(--rf-muted); }
/* Sidebar footer: language + mode on one row, email, role + sign out, powered-by */
html.rf-app #sidebar-user-strip { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; align-items: center; }
html.rf-app #sidebar-user-strip:not([style*="none"]) { display: grid !important; }
html.rf-app #sidebar-user-strip > [data-i18n-switch] { grid-column: 1; grid-row: 1; }
html.rf-app #sidebar-user-strip > .rf-mode { grid-column: 2; grid-row: 1; margin: 0; }
html.rf-app #sidebar-user-strip > .sidebar-user-email { grid-column: 1 / -1; grid-row: 2; }
html.rf-app #sidebar-user-strip > .sidebar-user-role { grid-column: 1; grid-row: 3; margin: 0; }
html.rf-app #sidebar-user-strip > .sidebar-logout { grid-column: 2; grid-row: 3; width: auto; margin: 0; padding: 4px 10px; font-size: 12px; }
html.rf-app #sidebar-user-strip > .rf-powered { grid-column: 1 / -1; grid-row: 4; margin: 2px 0 0; }
html.rf-app .sidebar-user .interface-language-control select { background: var(--rf-side-2); color: #D6E7E0; border: 1px solid var(--rf-side-line); font: 500 12.5px var(--rf-font); height: 30px; }
/* "Show Finished" (colours are set by the app's script) */
html.rf-app #btn-show-finished { background: var(--rf-panel) !important; color: var(--rf-soft) !important; border: 1px solid var(--rf-line-2) !important; border-radius: 7px !important; font-family: var(--rf-font) !important; }
html.rf-app #btn-show-finished[style*="F0FDF4"], html.rf-app #btn-show-finished[style*="f0fdf4"] { background: color-mix(in srgb, var(--rf-green) 14%, transparent) !important; color: var(--rf-green) !important; border-color: color-mix(in srgb, var(--rf-green) 45%, transparent) !important; }

/* Buttons that used the old navy as a fill */
html.rf-app :is(.notif-filters .btn, .notif-act-btn) { background: var(--rf-panel); color: var(--rf-head); border: 1px solid var(--rf-line-2); }
html.rf-app :is(.notif-filters .btn, .notif-act-btn):hover { border-color: var(--rf-accent); }

/* KPI bar sits at the end edge in both directions */
html.rf-app .dash-kpi::before { inset-inline: auto 16px; }
/* Instalment chart: the current month is the logo's orange node (the chart note says "orange") */
html.rf-app .sbd-bar.current { background: var(--rf-node); }

/* Icon-only sidebar (641-900px, 64px wide): the account footer stacks in one column and drops the long
   text, like the rest of that sidebar; the full footer returns when the sidebar is opened. */
@media (min-width: 641px) and (max-width: 900px) {
  html.rf-app #sidebar:not(.sb-open) #sidebar-user-strip { grid-template-columns: minmax(0, 1fr); justify-items: stretch; gap: 6px; padding: 10px 6px; }
  html.rf-app #sidebar:not(.sb-open) #sidebar-user-strip > * { grid-column: 1; grid-row: auto; }
  html.rf-app #sidebar:not(.sb-open) #sidebar-user-strip > :is(.sidebar-user-email, .sidebar-user-role) { display: none; }
  html.rf-app #sidebar:not(.sb-open) #sidebar-user-strip .interface-language-control select { min-width: 0; width: 100%; padding: 0 14px 0 4px; font-size: 10px; background-position: right 3px center; }
  html.rf-app #sidebar:not(.sb-open) #sidebar-user-strip > .rf-mode { flex-direction: column; justify-self: center; }
  html.rf-app #sidebar:not(.sb-open) #sidebar-user-strip > .sidebar-logout { width: 100%; padding: 4px 0; font-size: 10px; }
  html.rf-app #sidebar:not(.sb-open) #sidebar-user-strip > .rf-powered { justify-content: center; font-size: 0; }
  html.rf-app #sidebar:not(.sb-open) #sidebar-user-strip > .rf-powered img { width: 18px; height: 18px; }
  /* keep the app's own icon-only behaviour: menu words hidden (font-size 0), icons centred */
  html.rf-app #sidebar:not(.sb-open) .nav-item { font-size: 0; gap: 0; padding: 10px 0; justify-content: center; }
  html.rf-app #sidebar:not(.sb-open) .nav-item.active::before { inset-inline-start: -10px; }
}

/* Tile numbers read as headings; the tile's colour stays on its icon and edge (as on the dashboard) */
html.rf-app .ops2-tab-num { color: var(--rf-head); font-weight: 600; }
html.rf-app #login-page .login-brand-assurance svg { color: #46E2C3; stroke: #46E2C3; }