/* RestarFleet staff app theme (redesign, approved 30 Sep 2026). Visual only; loaded last.
   Palette: ../../shared/restarfleet-app-tokens.css. Colours of the app's own rules: restarfleet-theme-map.css (generated). */

/* The app's variables follow the theme (the company colour no longer overwrites them, see js/app.js) */
:root {
  --orange: var(--rf-accent); --orange-dark: var(--rf-accent-hover);
  --navy: var(--rf-head); --black: var(--rf-head); --white: var(--rf-panel);
  --bg: var(--rf-bg); --border: var(--rf-line-2); --muted: var(--rf-muted); --silver: var(--rf-line-2);
  --yellow: var(--rf-amber); --green: var(--rf-green); --red: var(--rf-red); --amber: var(--rf-amber);
  --shadow-sm: none; --shadow-md: var(--rf-shadow-lg);
}
html.rf-app, html.rf-app body { font-family: var(--rf-font); background: var(--rf-bg); color: var(--rf-text); }
html.rf-app .page-h, html.rf-app :is(h1, h2) { color: var(--rf-head); font-weight: 600; letter-spacing: -.01em; }

/* ---------- Top bar and bottom navigation: always the dark brand surface ---------- */
html.rf-app #topbar, html.rf-app[data-tenant-theme] #topbar { background: var(--rf-side); color: #F3FAF7; border-bottom: 1px solid var(--rf-side-line); box-shadow: none; }
html.rf-app #topbar .tb-title { font-weight: 500; font-size: 16px; }
html.rf-app #topbar .tb-title .dot { width: 30px; height: 30px; border-radius: 9px; background: var(--rf-side-2); border: 1px solid color-mix(in srgb, var(--rf-accent) 38%, transparent); }
html.rf-app #topbar .tb-back { background: transparent; border: 1px solid var(--rf-side-line); color: #F3FAF7; }
html.rf-app #topbar .tb-user { color: #A8C3B9; font-size: 10.5px; }
html.rf-app #topbar .tb-logout { border-color: var(--rf-side-line); color: #D6E7E0; background: transparent; }
html.rf-app #topbar .interface-language-control select { background: var(--rf-side-2); color: #D6E7E0; border-color: var(--rf-side-line); }
html.rf-app #topbar .rf-mode { margin: 0 8px 0 auto; border-color: var(--rf-side-line); }
html.rf-app #bottom-nav { background: color-mix(in srgb, var(--rf-side) 97%, transparent); border-top: 1px solid var(--rf-side-line); box-shadow: none; }
html.rf-app .nav-btn { color: #86A89B; font-weight: 500; }
html.rf-app .nav-btn.active { color: var(--rf-accent); background: transparent; }
html.rf-app .nav-btn.active::before { background: var(--rf-accent); top: -6px; }

/* ---------- Home ---------- */
html.rf-app .home-hero { background: radial-gradient(80% 120% at 90% 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; border-radius: 16px; }
html.rf-app .home-hero::after { content: ''; width: 9px; height: 9px; right: 18px; bottom: auto; top: 18px; background: var(--rf-node); box-shadow: 0 0 0 2px var(--rf-node-ring); }
html.rf-app .home-eyebrow { font-family: var(--rf-mono); font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 11.5px; color: var(--rf-link); }
html.rf-app .home-hero h1 { color: var(--rf-head); font-weight: 600; }
html.rf-app .home-hero p { color: var(--rf-soft); }
html.rf-app .home-hero-mark { background: var(--rf-side-2); color: var(--rf-accent); border: 1px solid color-mix(in srgb, var(--rf-accent) 38%, transparent); box-shadow: none; font-weight: 600; }
html.rf-app .home-section-head h2 { font-weight: 500; }
html.rf-app .home-live { background: color-mix(in srgb, var(--rf-green) 14%, transparent); border: 0; color: var(--rf-green); font-weight: 500; }
html.rf-app .home-card { background: var(--rf-panel); border: 1px solid var(--rf-line); border-radius: 14px; box-shadow: none; }
html.rf-app .home-card::after { content: ''; position: absolute; inset-inline-end: 12px; top: 14px; width: 18px; height: 5px; border-radius: 1px; background: var(--tone); transform: skewX(-32deg); }
html.rf-app .home-card.tone-blue { --tone: var(--rf-blue); } html.rf-app .home-card.tone-orange { --tone: var(--rf-mint); }
html.rf-app .home-card.tone-red { --tone: var(--rf-red); } html.rf-app .home-card.tone-yellow { --tone: var(--rf-amber); } html.rf-app .home-card.tone-green { --tone: var(--rf-green); }
html.rf-app .home-card .hc-num { color: var(--rf-head); font-weight: 600; font-size: 28px; }
html.rf-app .home-card .hc-label { color: var(--rf-text); font-weight: 500; font-size: 12.5px; }
html.rf-app .home-card .hc-hint { color: var(--rf-muted); font-size: 11px; }
html.rf-app .home-actions { border-top-color: var(--rf-line); }
html.rf-app .home-action { background: var(--rf-panel); border-color: var(--rf-line-2); color: var(--rf-head); box-shadow: none; }
html.rf-app .home-action > span { background: color-mix(in srgb, var(--rf-accent) 13%, transparent); color: var(--rf-link); }
html.rf-app .home-action.primary { background: var(--rf-accent); border-color: var(--rf-accent); color: var(--rf-accent-ink); box-shadow: none; }
html.rf-app .home-action.primary > span { background: color-mix(in srgb, var(--rf-accent-ink) 12%, transparent); color: var(--rf-accent-ink); }
html.rf-app .home-action.primary small { color: color-mix(in srgb, var(--rf-accent-ink) 70%, transparent); }

/* ---------- Cards and lists: neutral panel, coloured leading edge ---------- */
html.rf-app :is(.card, .res-row, .ret-card, .ongoing-card, .pending-card, .available-card, .customer-form-panel, .expense-form-panel, .payment-summary-card, .payment-history-card, .payment-entry-panel, .return-form-panel, .modal-card, .suggest-row) {
  background: var(--rf-panel); border-color: var(--rf-line); box-shadow: none;
}
html.rf-app .ongoing-card { border-inline-start: 3px solid var(--rf-mint); }
html.rf-app .returns-list .ret-card { background: var(--rf-panel); border-inline-start: 3px solid var(--rf-blue); }
html.rf-app .returns-list .ret-card.is-overdue, html.rf-app .overdue-list .ret-card { border-inline-start-color: var(--rf-red); background: var(--rf-panel); }
html.rf-app .pending-list .pending-card { background: var(--rf-panel); border-inline-start: 3px solid var(--rf-amber); }
html.rf-app .available-card { background: var(--rf-panel); border-inline-start: 3px solid var(--rf-green); }
html.rf-app :is(.og-customer, .rc-name, .res-name, .available-card-head strong) { color: var(--rf-head); font-weight: 500; }
html.rf-app :is(.og-return b, .rc-date, .rc-return strong, .pending-date strong, .rc-payment-grid strong) { font-family: var(--rf-mono); font-weight: 500; }
html.rf-app .og-return b { color: var(--rf-head); }
html.rf-app :is(.og-divider) { background: var(--rf-line); }
html.rf-app .ret-page-head strong { color: var(--rf-head); font-weight: 600; }
html.rf-app .ret-page-head > span { background: color-mix(in srgb, var(--rf-blue) 14%, transparent); color: var(--rf-blue); border: 0; font-weight: 500; }
html.rf-app .overdue-page-head > span { background: color-mix(in srgb, var(--rf-red) 14%, transparent); color: var(--rf-red); }
html.rf-app .payment-page-head > span { background: color-mix(in srgb, var(--rf-amber) 14%, transparent); color: var(--rf-amber); }
html.rf-app .available-page-head > span { background: color-mix(in srgb, var(--rf-green) 14%, transparent); color: var(--rf-green); }
html.rf-app .ret-filter-btn { background: transparent; border: 1px solid var(--rf-line-2); color: var(--rf-soft); border-radius: 9px; font-weight: 500; }
html.rf-app .ret-filter-btn.active { background: var(--rf-head); color: var(--rf-bg); border-color: var(--rf-head); box-shadow: none; }
html.rf-app .badge { border-radius: 6px; font-weight: 500; text-transform: none; letter-spacing: 0; }
html.rf-app .b-ongoing { background: color-mix(in srgb, var(--rf-mint) 15%, transparent); color: var(--rf-mint); }
html.rf-app .b-upcoming { background: color-mix(in srgb, var(--rf-purple) 15%, transparent); color: var(--rf-purple); }
html.rf-app :is(.b-overdue, .b-unpaid) { background: color-mix(in srgb, var(--rf-red) 15%, transparent); color: var(--rf-red); }
html.rf-app .b-finished { background: color-mix(in srgb, var(--rf-grey) 15%, transparent); color: var(--rf-grey); }
html.rf-app .b-paid { background: color-mix(in srgb, var(--rf-green) 15%, transparent); color: var(--rf-green); }
html.rf-app :is(.b-partial, .b-deposit) { background: color-mix(in srgb, var(--rf-amber) 15%, transparent); color: var(--rf-amber); }
html.rf-app :is(.b-cancelled, .b-unknown) { background: color-mix(in srgb, var(--rf-grey) 15%, transparent); color: var(--rf-grey); }
html.rf-app :is(.home-card.tone-neutral) { --tone: var(--rf-grey); }

/* ---------- Detail, forms, buttons ---------- */
html.rf-app .dt-row { border-bottom: 1px dashed var(--rf-line); }
html.rf-app .dt-label { color: var(--rf-muted); }
html.rf-app .dt-value { color: var(--rf-head); font-weight: 500; }
html.rf-app .dt-value.big { color: var(--rf-link); font-family: var(--rf-mono); }
html.rf-app .btn { border-radius: 11px; font-weight: 500; }
html.rf-app .btn-primary { background: var(--rf-accent); color: var(--rf-accent-ink); box-shadow: none; }
html.rf-app .btn-dark { background: var(--rf-accent); color: var(--rf-accent-ink); }
html.rf-app .btn-outline, html.rf-app .btn-ghost { background: var(--rf-panel); border: 1px solid var(--rf-line-2); color: var(--rf-head); }
html.rf-app .btn-green { background: var(--rf-green); color: var(--rf-on-status); }
html.rf-app .contact-btn { background: var(--rf-panel); border: 1px solid var(--rf-line-2); color: var(--rf-head); }
html.rf-app .contact-btn.wa { color: var(--rf-green); background: var(--rf-panel); border-color: color-mix(in srgb, var(--rf-green) 40%, transparent); }
html.rf-app .form-label { color: var(--rf-soft); font-weight: 400; }
html.rf-app :is(.form-control, .ret-custom-date, .login-form input) { background: var(--rf-panel-2); color: var(--rf-head); border: 1px solid var(--rf-line-2); }
html.rf-app :is(.form-control, .ret-custom-date, .login-form input):focus { border-color: var(--rf-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rf-accent) 22%, transparent); }
html.rf-app .form-control:disabled { background: transparent; border-style: dashed; color: var(--rf-soft); }
html.rf-app .section-title { font-family: var(--rf-mono); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--rf-link); display: flex; align-items: center; gap: 8px; }
html.rf-app .section-title::before { content: ''; width: 12px; height: 4px; flex: none; background: currentColor; transform: skewX(-32deg); border-radius: 1px; }
html.rf-app :is(.customer-form-panel, .expense-form-panel, .payment-summary-card, .payment-entry-panel, .return-form-panel) .section-title { color: var(--rf-link); }
html.rf-app :is(.customer-required-panel, .expense-details-panel, .payment-summary-card, .payment-entry-panel, .return-details-panel, .return-charges-panel, .return-payment-panel) { border-top: 1px solid var(--rf-line); }
html.rf-app :is(.payment-balance.is-due, .return-balance-row) { 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(.payment-balance, .return-balance-row) strong { font-family: var(--rf-mono); font-weight: 600; }
html.rf-app .payment-summary-grid > div { background: var(--rf-panel-2); border-color: var(--rf-line); }
html.rf-app :is(.customer-form-intro, .expense-form-intro, .payment-customer-head, .return-form-intro) strong { color: var(--rf-head); font-weight: 500; }
html.rf-app .doc-row { border-color: var(--rf-line-2); }
html.rf-app .doc-actions :is(label, button) { background: var(--rf-panel); color: var(--rf-head); border-color: var(--rf-line-2); }
html.rf-app .doc-actions :is(label.btn-up, button.btn-up) { color: var(--rf-link); border-color: var(--rf-accent); }
html.rf-app .modal-overlay { background: var(--rf-dim); }
html.rf-app #toast { background: var(--rf-head); color: var(--rf-bg); font-weight: 500; }
html.rf-app #toast.error { background: var(--rf-red); color: var(--rf-on-status); }
html.rf-app #toast.success { background: var(--rf-green); color: var(--rf-on-status); }

/* ---------- Sign in ---------- */
html.rf-app #login-page { background: radial-gradient(70% 50% at 80% 10%, rgba(11, 107, 88, .55), transparent 70%), #06120F; }
html.rf-app #login-page::before, html.rf-app #login-page::after { display: none; }
html.rf-app .login-panel { background: rgba(11, 29, 24, .94); border: 1px solid rgba(174, 238, 214, .2); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8); color: #D6E7E0; }
html.rf-app .login-logo { background: #0E2922; color: #46E2C3; border: 1px solid rgba(70, 226, 195, .4); box-shadow: none; font-weight: 600; }
html.rf-app .login-kicker { color: #46E2C3; font-family: var(--rf-mono); font-weight: 500; letter-spacing: .02em; }
html.rf-app .login-title { color: #F3FAF7; font-weight: 600; }
html.rf-app :is(.login-sub, .login-secure) { color: #A8C3B9; }
html.rf-app .login-field > span { color: #D6E7E0; font-weight: 500; }
html.rf-app #login-page .login-form input { background: #0F2620; color: #F3FAF7; border-color: rgba(174, 238, 214, .2); }
html.rf-app .login-btn { background: var(--rf-accent); color: var(--rf-accent-ink); box-shadow: none; font-weight: 600; }
html.rf-app .login-forgot-password { color: #46E2C3; }

/* ---------- Night / day switch in the top bar ---------- */
.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 7px; border: 0; border-radius: 6px; background: none; color: #86A89B; cursor: pointer; }
.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; }

/* Top bar on phones: title + language + mode + sign out on one row, account line underneath */
html.rf-app #topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 6px 8px; min-height: 0; padding-block: max(10px, env(safe-area-inset-top)) 8px; }
html.rf-app #topbar > div:first-child { min-width: 0; }
html.rf-app #topbar #tb-title-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; min-width: 0; }
html.rf-app #topbar .tb-title { min-width: 0; font-size: 15px; }
html.rf-app #topbar .tb-user { display: contents; }
html.rf-app #topbar .tb-user > [data-i18n-switch] { grid-column: 2; grid-row: 1; }
html.rf-app #topbar .rf-mode { grid-column: 3; grid-row: 1; margin: 0; }
html.rf-app #topbar .tb-user > .tb-logout { grid-column: 4; grid-row: 1; margin: 0; padding: 5px 9px; }
html.rf-app #topbar .tb-user > #tb-user-email { grid-column: 1 / -1; grid-row: 2; font-size: 10.5px; color: #86A89B; text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.rf-app #topbar .interface-language-control select { height: 28px; min-width: 0; width: auto; padding-inline: 8px 22px; font-size: 11.5px; }
/* hidden logo images must stay hidden (the fallback letter shows instead) */
html.rf-app :is(.home-hero-mark, .login-logo, .tb-brand-logo) img[hidden] { display: none !important; }
html.rf-app #topbar .tb-brand-logo { width: 30px; height: 30px; }
html.rf-app #topbar .tb-title .dot { display: grid; place-items: center; color: var(--rf-accent); font-weight: 600; font-size: 14px; }
html.rf-app #topbar .interface-language-control select { max-width: 84px; }
html.rf-app #topbar .rf-mode-compact button { padding: 4px 6px; }

/* ---------- Sign-in card: must beat apps/shared/login-background.css ----------
   That file styles the card with an id selector (#login-page > .login-panel) and switches it to plain
   white under prefers-reduced-transparency. The redesign's light text needs an opaque dark card in
   every case, so these rules use the same id plus the rf-app class (higher specificity). */
html.rf-app #login-page > .login-panel,
html.rf-app #login-page > .compact-login-card {
  background: #0B1D18;
  border: 1px solid rgba(174, 238, 214, .2);
  border-top: 1px solid rgba(174, 238, 214, .2);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8);
  color: #D6E7E0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
@media (prefers-reduced-transparency: reduce) {
  html.rf-app #login-page > .login-panel,
  html.rf-app #login-page > .compact-login-card { background: #0B1D18; }
}
html.rf-app #login-page .compact-login-card .login-logo { border-color: #0B1D18; box-shadow: 0 16px 30px rgba(0, 0, 0, .35); }
html.rf-app #login-page .compact-login-card .login-btn { box-shadow: none; }
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-error.success { background: rgba(74, 222, 128, .12); border-color: rgba(74, 222, 128, .4); color: #4ADE80; }
/* Language menu: pinned to the card's top corner so it never overlaps the raised logo or the heading */
html.rf-app #login-page > .login-panel > [data-i18n-switch] { position: absolute; top: 14px; inset-inline-end: 14px; width: 104px; margin: 0; z-index: 2; }
html.rf-app #login-page .interface-language-control select { background: #0F2620; color: #D6E7E0; border: 1px solid rgba(174, 238, 214, .2); height: 30px; font: 500 12px var(--rf-font); }
html.rf-app #login-page > .compact-login-card { padding-top: 92px; }
@media (max-width: 640px) { html.rf-app #login-page > .compact-login-card { padding-top: 88px; } }