:root{
  color-scheme:light; /* light-only app: pin native controls (select popups, date pickers, scrollbars) so macOS dark mode can't paint them dark */
  /* ── SURFACES — warm light paper layers ── */
  --bg:#f8f9fd;--s1:#ecedf1;--s2:#e1e2e6;--s3:#d8d9dd;
  --b:rgba(95,100,120,.25);--b2:rgba(95,100,120,.15);

  /* ── TEXT ── */
  --text:#1a1c19;--t2:#58413f;--t3:rgba(26,28,25,.4);
  /* [9 Sep 2026] --card / --border were referenced by several modals (e.g. the 'riders not found' import modal) but NEVER defined → transparent cards whose text bled into the page. Defined here so every consumer renders a real card. */
  --card:#ffffff;--border:#e1e2e6;
  --accent:var(--accent);--ok:#30d158;--ok-ink:#2d6a2e;--warn:#ff9f0a;--warn-ink:#8a5a00;--bad:#ff453a;--bad-ink:#991b1b;

  /* ── SEMANTIC COLORS ── */
  --acc:#8B1A1A;--green:#2d6a2e;--red:#991b1b;--amber:#B87333;--blue:var(--accent);--purple:#6d3a00;
  --muted:rgba(26,28,25,.55);
  --line:rgba(95,100,120,.14);
  --green-soft:rgba(45,106,46,.12);
  --amber-soft:rgba(184,115,51,.12);
  --pink-soft:rgba(153,27,27,.10);

  /* ── FONTS ── */
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --mono:'JetBrains Mono','SF Mono','Fira Code',monospace;--r:12px;

  /* ── SHADOWS — whisper shadows ── */
  --shadow-sm:0 1px 2px rgba(26,28,25,.04);
  --shadow-md:0 2px 8px rgba(26,28,25,.06);
  --shadow-lg:0 8px 32px rgba(26,28,25,.08);
  --shadow-glow:none;

  /* ── GLASS — frosted on light ── */
  --glass:rgba(255,255,255,.7);
  --glass-border:rgba(95,100,120,.12);
  --glass-border-light:rgba(95,100,120,.08);
  --glass-hover:rgba(255,255,255,.9);
  --glass-blur:saturate(180%) blur(12px);
  --glass-highlight:inset 0 .5px 0 rgba(255,255,255,.8);

  /* ── MOTION — keep existing ── */
  --spring-snappy:cubic-bezier(.2,1,.3,1);
  --spring-smooth:cubic-bezier(.25,.46,.45,.94);
  --spring-bounce:cubic-bezier(.34,1.56,.64,1);
  --spring-gentle:cubic-bezier(.4,0,.2,1);
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --ease-in-out-quint:cubic-bezier(.86,0,.07,1);
  --motion-fast:.15s;--motion-normal:.3s;--motion-slow:.5s;--motion-reveal:.25s;--motion-dramatic:.8s;
}

/* iOS-like scrollbars */
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:#d8d9dd;border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:#8c716e;}
*{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--bg);color:var(--text);font-family:var(--font);height:100vh;display:flex;flex-direction:column;overflow:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:-.01em;--acc-rgb:139,26,26;}

body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 1000px 800px at 10% 15%, rgba(139,26,26,.02) 0%, transparent 60%),
    radial-gradient(ellipse 900px 700px at 85% 75%, rgba(45,106,46,.015) 0%, transparent 55%);
}

/* ── SUBTLE AMBIENT GLOW ── */
.main{position:relative;}
.main::before{
  content:'';position:fixed;top:0;left:220px;right:0;bottom:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 800px 600px at 40% 10%, rgba(139,26,26,.015) 0%, transparent 55%),
    radial-gradient(ellipse 700px 500px at 70% 60%, rgba(24,95,165,.01) 0%, transparent 50%);
}

/* ── GLASS SURFACE MIXIN ────────────────────────────────────── */
.glass{
  background:var(--glass);
  border:1px solid var(--glass-border);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.75),0 1px 3px rgba(26,28,25,.06);
}

/* ── UNIFIED INTERACTION LAYER ─────────────────────────────── */
/* Every interactive element shares the same motion DNA */
.stat, .dash-kpi, .dash-section, .cp-card, .rp-card, .info-card, .alert-item, .rp-stat, .nav-item, .attn-item {
  transition: transform var(--motion-normal) var(--spring-snappy),
              background var(--motion-fast) var(--spring-gentle),
              border-color var(--motion-fast) var(--spring-gentle),
              box-shadow var(--motion-normal) var(--spring-gentle);
}
/* Unified press feedback — everything responds the same way */
.stat:active, .dash-kpi:active, .dash-section:active, .btn-p:active, .btn-g:active,
.nav-item:active, .attn-item:active, .fb:active, .pill-btn:active {
  transform: scale(.97) !important;
  transition-duration: .08s !important;
}
/* Unified hover lift — Apple-inspired depth on hover */
.stat:hover, .dash-kpi:hover, .dash-kpi.stat-card:hover, .cp-card:hover,
.info-card:hover, .alert-item:hover, .attn-item:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(26,28,25,.08), 0 1px 3px rgba(26,28,25,.05), inset 0 1px 0 rgba(255,255,255,.7) !important;
  border-color: rgba(95,100,120,.22) !important;
}
/* Active stat — same brightness as hover, no transform */
.stat.stat-active, .dash-kpi.stat-active {
  border-color: rgba(139,26,26,.2) !important;
  box-shadow: 0 4px 16px rgba(139,26,26,.08), 0 0 0 1px rgba(139,26,26,.1) !important;
  background: rgba(255,255,255,.9) !important;
}

/* Apple-style glow on hover */
/* clickable glow removed - unified card hover governs all cards */

/* ── SCROLL REVEAL SYSTEM ──────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--motion-reveal) var(--spring-snappy),
              transform var(--motion-reveal) var(--spring-snappy);
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
/* Staggered children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--motion-slow) var(--spring-snappy),
              transform var(--motion-slow) var(--spring-snappy);
}
.reveal-stagger.revealed > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.revealed > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.revealed > *:nth-child(2) { transition-delay: 20ms; }
.reveal-stagger.revealed > *:nth-child(3) { transition-delay: 40ms; }
.reveal-stagger.revealed > *:nth-child(4) { transition-delay: 60ms; }
.reveal-stagger.revealed > *:nth-child(5) { transition-delay: 80ms; }
.reveal-stagger.revealed > *:nth-child(6) { transition-delay: 100ms; }
.reveal-stagger.revealed > *:nth-child(7) { transition-delay: 120ms; }
.reveal-stagger.revealed > *:nth-child(8) { transition-delay: 350ms; }

/* ── COUNTER ANIMATIONS ────────────────────────────────────── */
.stat-val, .dash-kpi-val, .cp-hstat-val, .rp-stat-val, .cp-perf-val {
  display: inline-block;
  transition: transform .4s var(--spring-bounce), opacity .3s ease;
}
.stat-val.counting, .dash-kpi-val.counting {
  animation: counterPulse .5s var(--spring-bounce);
}
@keyframes counterPulse {
  0% { transform: scale(1); }
  30% { transform: scale(1.12); color: var(--acc); }
  100% { transform: scale(1); }
}

/* ── STAT VAL GLOW PULSE ───────────────────────────────────── */
.stat-val {
  transition: text-shadow .3s ease;
}
.stat.stat-active .stat-val {
  text-shadow: 0 0 4px currentColor;
  animation: valPulse 3s ease-in-out infinite;
}
@keyframes valPulse {
  0%, 100% { text-shadow: 0 0 3px currentColor; }
  50% { text-shadow: 0 0 6px currentColor; }
}

/* ── ENHANCED BUTTON SYSTEM ────────────────────────────────── */
.btn-p {
  transition: all var(--motion-fast) var(--spring-snappy);
  position: relative;
  overflow: hidden;
}
.btn-p::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.2) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--motion-fast) ease;
}
.btn-p:hover::after { opacity: 1; }
.btn-p:hover {
  box-shadow: 0 4px 20px rgba(var(--acc-rgb),.25), 0 0 0 1px rgba(var(--acc-rgb),.3);
  transform: translateY(-1px);
}

.btn-g {
  transition: all var(--motion-fast) var(--spring-snappy);
}
.btn-g:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}

/* ── LIQUID GLASS SHIMMER — premium highlight sweep ────────── */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.shimmer-border {
  position: relative;
}
.shimmer-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent 30%, rgba(0,0,0,.04) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: shimmer 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  padding: 1px;
}

/* ── SKELETON LOADING ──────────────────────────────────────── */
@keyframes skeletonPulse {
  0%, 100% { opacity: .06; }
  50% { opacity: .12; }
}
.skeleton {
  background: linear-gradient(90deg, rgba(0,0,0,.02) 25%, rgba(0,0,0,.05) 50%, rgba(0,0,0,.02) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 6px;
}

/* ── Kill default mobile tap-highlight (Android WebView paints a blue/teal flash on tap) ── */
* { -webkit-tap-highlight-color: transparent; }

/* ── FOCUS RING — unified keyboard focus ──────────────────── */
*:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
  border-radius: var(--r);
  transition: outline-offset .15s var(--spring-snappy);
}

/* ── BADGE PULSE — for status indicators ─────────────────── */
.bdot {
  animation: dotPulse 2.5s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { opacity: .7; box-shadow: 0 0 4px currentColor; }
  50% { opacity: 1; box-shadow: 0 0 8px currentColor, 0 0 16px currentColor; }
}

/* ── TABLE ROW HOVER GLOW — Mac Dock Effect ──────────────── */
tbody tr {
  border-bottom: 1px solid rgba(95,100,120,.06);
  transition: transform .28s cubic-bezier(.2,1,.3,1), background .18s, box-shadow .28s, border-radius .28s;
  cursor: pointer;
  transform-origin: center;
  position: relative;
  z-index: 1;
}

tbody tr:hover {
  background: rgba(0,0,0,.02) !important;
  box-shadow: 0 0 16px rgba(0,0,0,.03), inset 0 0 0 1px rgba(0,0,0,.02);
  border-radius: 8px;
}

tbody tr:active {
  background: rgba(0,0,0,.03) !important;
}

td {
  backdrop-filter: none;
}

/* LOGIN */
#login-screen{position:fixed;inset:0;background:var(--bg);display:none;align-items:center;justify-content:center;z-index:1000;overflow:visible;}
#login-screen::before{content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 1000px 800px at 10% 15%, rgba(139,26,26,.04) 0%, transparent 60%),
    radial-gradient(ellipse 900px 700px at 85% 75%, rgba(184,115,51,.035) 0%, transparent 55%),
    radial-gradient(ellipse 600px 500px at 50% 45%, rgba(139,26,26,.02) 0%, transparent 50%);
  pointer-events:none;}
.login-box{background:#fff;border:1px solid rgba(95,100,120,.12);border-radius:20px;padding:40px 32px;width:min(380px,calc(100vw - 32px));text-align:center;box-shadow:0 1px 3px rgba(26,28,25,.06);position:relative;z-index:1;animation:loginBoxIn .8s var(--spring-snappy) both;transition:height .35s cubic-bezier(.2,1,.3,1);overflow:visible;}
@keyframes otpSlideIn{0%{opacity:0}100%{opacity:1}}
@keyframes otpSlideOut{0%{opacity:1}100%{opacity:0}}
@keyframes loginBoxIn{
  0%{opacity:0;transform:translateY(24px) scale(.95)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
.login-brand{display:flex;align-items:center;justify-content:center;gap:11px;margin-bottom:6px;}
.login-brand-tile{width:40px;height:40px;border-radius:12px;background:#8B1A1A;color:#fff;font-family:'Plus Jakarta Sans',var(--font);font-weight:800;font-size:19px;display:flex;align-items:center;justify-content:center;}
.login-brand-word{font-family:'Plus Jakarta Sans',var(--font);font-size:26px;font-weight:800;letter-spacing:-.02em;color:#1a1c19;}
.login-sub{font-size:10px;color:#58413f;margin-bottom:28px;letter-spacing:.16em;font-weight:600;text-transform:uppercase;}

.login-inp{width:100%;background:#fff;border:1px solid rgba(95,100,120,.12);color:var(--text);font-family:var(--font);font-size:13px;padding:11px 14px;border-radius:12px;outline:none;margin-bottom:10px;transition:border .2s,box-shadow .2s;}
.login-inp:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(95,100,120,.08);}
.staff-otp-inp{text-align:center;font-size:20px;letter-spacing:8px;padding:12px 16px;border:1px solid rgba(0,0,0,.05);caret-color:var(--acc);}.staff-otp-inp:focus{border-color:rgba(26,28,25,.25);box-shadow:0 0 0 3px rgba(120,120,128,.12);}.staff-otp-inp::placeholder{font-size:13px;letter-spacing:normal;font-family:var(--font);color:rgba(26,28,25,.3);}
.login-btn{width:100%;padding:14px;background:#8B1A1A;color:#fff;font-size:15px;font-weight:700;border-radius:14px;border:none;cursor:pointer;font-family:var(--font);margin-top:6px;transition:all .3s cubic-bezier(.2,1,.3,1);letter-spacing:-.01em;position:relative;overflow:hidden;box-shadow:0 3px 12px rgba(139,26,26,.18);}
.login-btn::before{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(0,0,0,.05),transparent);transition:left .5s ease;}
.login-btn:hover::before{left:120%;}
.login-btn:hover{box-shadow:0 8px 28px rgba(139,26,26,.28),0 0 0 1px rgba(139,26,26,.12);transform:translateY(-2px);}
.login-btn:active{transform:scale(.97) translateY(0);transition-duration:.08s;box-shadow:0 2px 8px rgba(139,26,26,.18);}
.cc-sel{display:flex;align-items:center;gap:6px;padding:0 10px 0 12px;background:rgba(139,26,26,.03);border-right:1px solid rgba(95,100,120,.1);flex-shrink:0;cursor:pointer;user-select:none;transition:background .15s;}
.cc-sel:hover{background:rgba(0,0,0,.03);}
.cc-flag{font-size:16px;line-height:1;}
.cc-code{font-size:13px;color:rgba(26,28,25,.4);font-weight:600;letter-spacing:.3px;white-space:nowrap;}
.cc-caret{color:var(--t3);flex-shrink:0;transition:transform .2s;}
.cc-dd{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid rgba(95,100,120,.15);border-radius:12px;overflow:hidden;z-index:300;box-shadow:0 8px 24px rgba(0,0,0,.08);margin-top:4px;display:none;}
.cc-opt{display:flex;align-items:center;gap:10px;padding:11px 14px;font-size:13px;color:var(--t2);cursor:pointer;transition:background .12s,color .12s;}
.cc-opt:hover{background:rgba(0,0,0,.03);color:var(--text);}
.cc-opt.active{color:var(--acc);font-weight:600;}
.staff-mode-link{background:none;border:none;color:var(--t3);font-size:11px;cursor:pointer;width:100%;text-align:center;padding:6px 0 2px;transition:color .2s;}
.staff-mode-link:hover{color:var(--text);}
@media(max-width:768px){
  #login-screen{align-items:center;justify-content:center;padding:24px;}
  .login-box{width:100%;max-width:360px;border-radius:18px;border:1px solid rgba(95,100,120,.12);box-shadow:0 8px 32px rgba(0,0,0,.06);padding:36px 24px;background:rgba(255,255,255,.97);backdrop-filter:blur(20px);}
}
.login-hint{font-size:11px;color:var(--t3);margin-top:14px;line-height:1.6;}
/* [2 Jul 2026] STEP-2 REDESIGN — bigger tap targets + a persistent footer state pill per card.
   The old design hid the status line behind the photo once picked, so "Uploaded" vs "Ready" vs
   "Didn't reach us" was invisible exactly when it mattered. State classes set by app-core.js:
   doc-saving / doc-dup / doc-uploading / doc-sent / doc-missing / doc-onfile. */
.doc-upload-card{display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:12px;background:#fff;border:1.5px dashed rgba(95,100,120,.35);border-radius:14px;cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .15s;position:relative;overflow:hidden;min-height:124px;-webkit-tap-highlight-color:transparent;}
.doc-upload-card:hover{border-color:rgba(139,26,26,.35);}
.doc-upload-card:active{transform:scale(.97);}
.doc-upload-card .dc-icon{width:38px;height:38px;border-radius:10px;background:rgba(139,26,26,.07);color:#8B1A1A;display:flex;align-items:center;justify-content:center;}
.doc-upload-card .dc-title{font-size:12px;font-weight:700;color:var(--text);line-height:1.25;}
.doc-upload-card .dc-state{font-size:10px;font-weight:600;color:var(--t3);background:rgba(0,0,0,.045);padding:3px 9px;border-radius:999px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:auto;transition:background .2s,color .2s;}
.doc-upload-card.uploaded{border-style:solid;border-color:rgba(48,209,88,.45);}
.doc-upload-card.uploaded .dc-icon,.doc-upload-card.uploaded .dc-title{display:none;}
.doc-upload-card .doc-preview{display:none;position:absolute;top:0;left:0;right:0;bottom:26px;width:100%;height:auto;object-fit:cover;z-index:1;transform:translateZ(0);}
.doc-upload-card.uploaded .doc-preview{display:block;}
.doc-upload-card.uploaded .dc-state{position:absolute;left:8px;right:8px;bottom:5px;z-index:2;background:rgba(48,209,88,.14);color:#1f7a3d;text-align:center;}
.doc-upload-card .doc-check{display:none;position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;background:var(--green);align-items:center;justify-content:center;z-index:3;box-shadow:0 2px 8px rgba(48,209,88,.4);}
.doc-upload-card.uploaded .doc-check{display:flex;}
.doc-upload-card .doc-name-overlay{display:none;position:absolute;top:6px;left:6px;max-width:72%;padding:2px 8px;background:rgba(0,0,0,.55);color:#fff;font-size:8.5px;border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:2;}
.doc-upload-card.uploaded .doc-name-overlay{display:block;}
/* honest state pills — declared after .uploaded so they win on equal specificity */
.doc-upload-card.doc-saving .dc-state{background:rgba(255,159,10,.16);color:#9a6400;}
.doc-upload-card.doc-uploading .dc-state{background:rgba(10,132,255,.13);color:#0a58b0;}
.doc-upload-card.doc-sent .dc-state{background:rgba(48,209,88,.18);color:#1f7a3d;}
.doc-upload-card.doc-dup{border-color:#ff9f0a;}
.doc-upload-card.doc-dup .dc-state{background:rgba(255,159,10,.2);color:#9a6400;}
.doc-upload-card.doc-missing{border-style:solid;border-color:#ff453a;box-shadow:0 0 0 2px rgba(255,69,58,.22);}
.doc-upload-card.doc-missing .dc-state{background:rgba(255,69,58,.12);color:#ff453a;}
/* [19 Jun 2026] Accepted/on-file doc (resubmit): green "done" look but icon+label stay visible (unlike .uploaded). */
.doc-upload-card.doc-onfile{border-style:solid;border-color:rgba(48,209,88,.45);background:rgba(48,209,88,.06);}
.doc-upload-card.doc-onfile .dc-state{background:rgba(48,209,88,.14);color:#1f7a3d;}
.sec-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 8px;}
.sec-label{font-size:10px;font-weight:700;color:var(--t3);letter-spacing:.07em;text-transform:uppercase;}
.sec-count{font-size:10px;font-weight:700;color:#8B1A1A;background:rgba(139,26,26,.08);padding:2px 9px;border-radius:999px;}
@keyframes docUploadPop{0%{transform:scale(.8);opacity:0}50%{transform:scale(1.05)}100%{transform:scale(1);opacity:1}}
.doc-upload-card.just-uploaded{animation:docUploadPop .4s cubic-bezier(.2,1,.3,1);}
/* [14 Jul 2026, step2-ui] Paired-doc grouping (Emirates ID / Licence / Mulkiya). Visual wrapper
   ONLY — each side is still its own real .doc-upload-card with its own file-KEY input, so all
   upload/dedup/counter/ops-modal JS is untouched. .doc-pair spans both grid columns. */
.doc-pair{grid-column:1/-1;border:1px solid rgba(95,100,120,.16);border-radius:14px;padding:11px 11px 12px;background:#fff;}
.doc-pair .dp-head{display:flex;align-items:center;gap:9px;margin-bottom:9px;}
.doc-pair .dp-ic{width:30px;height:30px;border-radius:9px;background:rgba(139,26,26,.06);color:#8B1A1A;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.doc-pair .dp-title{font-size:12px;font-weight:700;color:var(--text);flex:1;min-width:0;}
.doc-pair .dp-count{font-size:9.5px;font-weight:700;color:#8B1A1A;background:rgba(139,26,26,.08);padding:3px 9px;border-radius:999px;flex-shrink:0;transition:background .2s,color .2s;}
.doc-pair.pair-done .dp-count{color:#1f7a3d;background:rgba(48,209,88,.14);}
.doc-pair .dp-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;min-height:0;grid-auto-rows:auto;align-content:normal;}  /* [25 Sep 2026, apply audit #8] the salary date picker's .dp-grid (min-height:214px, 34px rows) leaked in — every document pair box was 278px tall for 30px of tiles */
#apply-passport::placeholder{text-transform:none;}  /* [25 Sep 2026, apply audit #6] uppercase is for the typed value, not the hint */
/* inside a pair the tiles are shorter and the big icon/title are hidden — the pair header carries them */
.doc-pair .doc-upload-card{min-height:78px;padding:10px;gap:5px;}
.doc-pair .doc-upload-card .dc-icon{display:none;}
.doc-pair .doc-upload-card .dc-title{font-size:11px;font-weight:700;}
.doc-pair .doc-upload-card.uploaded .doc-preview{bottom:24px;}
/* [2 Jul 2026, sal-audit] shimmering placeholder rows while a salary month loads */
.sal-skel{background:linear-gradient(90deg,rgba(0,0,0,.05) 25%,rgba(0,0,0,.11) 50%,rgba(0,0,0,.05) 75%);background-size:200% 100%;animation:salSkel 1.1s ease-in-out infinite;}
@keyframes salSkel{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* [2 Jul 2026, apps-redesign] Applications page component classes — hover lift, press scale,
   staggered row entrance, animated doc bars. Class-based so :hover/:active work properly. */
.apx-card{display:flex;align-items:center;gap:11px;padding:13px 15px;background:#fff;border:1px solid rgba(95,100,120,.14);border-radius:12px;cursor:pointer;transition:transform .18s cubic-bezier(.2,1,.3,1),box-shadow .18s,border-color .18s;-webkit-tap-highlight-color:transparent;}
.apx-card:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.06);border-color:rgba(139,26,26,.3);}
.apx-card:active{transform:scale(.98);}
.apx-card.active{border:1.5px solid #8B1A1A;box-shadow:0 3px 12px rgba(139,26,26,.12);}
.apx-cic{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .18s;}
.apx-card:hover .apx-cic{transform:scale(1.06);}
.apx-cval{font-size:18px;font-weight:800;line-height:1;}
.apx-clab{font-size:10.5px;color:var(--t3);margin-top:3px;}
.apx-tr{cursor:pointer;transition:background .12s;animation:apxIn .32s cubic-bezier(.2,1,.3,1) both;}
.apx-tr:hover{background:rgba(139,26,26,.025);}
.apx-tr:active{background:rgba(139,26,26,.05);}
@keyframes apxIn{0%{opacity:0;transform:translateY(4px)}100%{opacity:1;transform:none}}
.apx-th th{position:sticky;top:0;background:#f8f9fd;z-index:2;}
.apx-av{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;flex-shrink:0;transition:transform .15s;}
.apx-tr:hover .apx-av{transform:scale(1.08);}
.apx-dbar{width:64px;height:4px;background:rgba(0,0,0,.06);border-radius:2px;margin-top:4px;overflow:hidden;}
.apx-dbar i{display:block;height:100%;border-radius:2px;transition:width .55s cubic-bezier(.2,1,.3,1);}
.apx-chip{display:inline-block;margin-top:4px;font-size:9.5px;font-weight:600;color:#c22a20;background:rgba(255,69,58,.1);padding:1px 7px;border-radius:6px;white-space:nowrap;max-width:185px;overflow:hidden;text-overflow:ellipsis;}
.apx-chip.warn{color:#b06a00;background:rgba(255,159,10,.12);}
.apx-st{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 10px;border-radius:999px;white-space:nowrap;}
.apx-st i{width:5px;height:5px;border-radius:50%;}
.apx-view{font-size:11px;font-weight:600;color:var(--t2);border:1px solid rgba(95,100,120,.18);padding:6px 14px;border-radius:8px;background:#fff;cursor:pointer;font-family:var(--font);transition:all .15s;}
.apx-view:hover{border-color:rgba(139,26,26,.4);color:#8B1A1A;background:rgba(139,26,26,.04);}
.apx-view:active{transform:scale(.96);}
.apx-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:10px;font-size:12px;font-weight:600;cursor:pointer;border:1px solid rgba(139,26,26,.25);background:#fff;color:#8B1A1A;font-family:var(--font);transition:transform .15s,box-shadow .15s,background .15s;-webkit-tap-highlight-color:transparent;}
.apx-btn:hover{background:rgba(139,26,26,.05);transform:translateY(-1px);box-shadow:0 3px 10px rgba(139,26,26,.08);}
.apx-btn:active{transform:scale(.97);}
.apx-btn.primary{background:#8B1A1A;border-color:#8B1A1A;color:#fff;}
.apx-btn.primary:hover{background:#751616;}
.apx-cp{background:none;border:none;color:var(--t3);cursor:pointer;font-size:12px;padding:0 3px;opacity:.55;transition:opacity .15s,color .15s;font-family:var(--font);}
.apx-cp:hover{opacity:1;color:#8B1A1A;}
/* [2 Jul 2026, apps-redesign] Application Review modal doc cards */
.apx-doc{position:relative;cursor:pointer;background:#fff;border:1px solid rgba(95,100,120,.12);border-radius:11px;overflow:hidden;transition:transform .18s cubic-bezier(.2,1,.3,1),box-shadow .18s,border-color .18s;}
.apx-doc:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.09);border-color:rgba(139,26,26,.3);}
.apx-doc:active{transform:scale(.98);}
.apx-doc-thumb{aspect-ratio:1.4;background-position:center;background-size:cover;background-color:#f3f4f8;transition:transform .35s cubic-bezier(.2,1,.3,1);}
.apx-doc:hover .apx-doc-thumb{transform:scale(1.05);}
.apx-doc-label{position:relative;z-index:1;padding:7px 9px;font-size:10px;font-weight:600;color:var(--text);background:#fff;border-top:1px solid rgba(95,100,120,.08);}
.apx-doc-flag{position:absolute;top:6px;left:6px;z-index:2;font-size:8.5px;font-weight:800;padding:2px 7px;border-radius:6px;letter-spacing:.03em;color:#fff;background:#ff453a;box-shadow:0 1px 4px rgba(0,0,0,.15);}
.apx-doc-flag.warn{background:#e08a00;}
.apx-doc-missing{border:1.5px dashed rgba(255,69,58,.4);border-radius:11px;background:rgba(255,69,58,.03);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:132px;color:#c22a20;transition:background .15s;}
.apx-doc-missing:hover{background:rgba(255,69,58,.06);}
.apx-doc-missing svg{opacity:.5;}
/* [5 Jul 2026, docs-download] PDF tile + per-doc download button */
.apx-doc-pdf{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#8B1A1A;background:linear-gradient(160deg,#faf6f5 0%,#f3ebe9 100%);}
.apx-doc-pdf svg{opacity:.75;}
.apx-doc-pdf span{font-size:9px;font-weight:800;letter-spacing:.08em;background:rgba(139,26,26,.1);padding:2px 8px;border-radius:6px;}
.apx-doc-dl{position:absolute;top:6px;right:6px;z-index:3;width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.92);border:1px solid rgba(95,100,120,.18);color:var(--t2);opacity:0;transition:opacity .15s,transform .15s;box-shadow:0 1px 4px rgba(0,0,0,.12);text-decoration:none;}
.apx-doc:hover .apx-doc-dl{opacity:1;}
.apx-doc-dl:hover{color:#8B1A1A;border-color:rgba(139,26,26,.35);transform:scale(1.08);}
@keyframes apxModalIn{0%{opacity:0;transform:scale(.96) translateY(6px)}100%{opacity:1;transform:none}}

/* TOPBAR */
.topbar{height:48px;min-height:48px;background:#fff;border-bottom:1px solid rgba(95,100,120,.08);display:flex;align-items:center;padding:0 18px;gap:14px;z-index:100;overflow:visible;}
.logo{font-size:.88rem;font-weight:700;color:#1a1c19;letter-spacing:-.01em;flex-shrink:0;white-space:nowrap;display:flex;align-items:center;gap:8px;}
.logo span{letter-spacing:-.3px;}
.logo span+span{margin-left:-2px;}
.helloo-h-mark{width:24px;height:24px;flex-shrink:0;}
/* Rider portal Helloo branding */
.rp-brand-header{display:flex;align-items:center;gap:10px;padding:12px 16px;margin:-4px -4px 12px -4px;border-radius:16px;background:linear-gradient(135deg,rgba(139,26,26,.04) 0%,rgba(139,26,26,.01) 100%);border:1px solid rgba(140,113,110,.2);}
.rp-brand-logo{display:flex;align-items:center;gap:8px;}
.rp-brand-logo .h-mark{width:32px;height:32px;}
.rp-brand-name{font-size:18px;font-weight:900;letter-spacing:-.5px;color:#1a1c19;}
.rp-brand-name .brand-h{color:#8B1A1A;}
.rp-brand-name .brand-dot{color:#8B1A1A;}
.rp-brand-sub{font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.35);font-weight:600;margin-top:-1px;}
.rp-welcome-strip{background:linear-gradient(90deg,rgba(139,26,26,.18),rgba(139,26,26,.06),transparent);border-left:3px solid #8B1A1A;padding:10px 14px;border-radius:0 12px 12px 0;margin-bottom:16px;animation:welcomeSlideIn .6s cubic-bezier(.2,1,.3,1) both;opacity:0;transition:opacity .8s ease,transform .8s cubic-bezier(.4,0,.2,1),max-height .8s cubic-bezier(.4,0,.2,1),margin .8s ease,padding .6s ease .2s;max-height:80px;overflow:hidden;}
@keyframes welcomeSlideIn{0%{opacity:0;transform:translateY(20px);}100%{opacity:1;transform:translateY(0);}}
.rp-welcome-strip.hide{opacity:0;transform:translateY(-30px);max-height:0;margin-bottom:0;padding:0 14px;pointer-events:none;}
.rp-welcome-strip .greeting{font-size:14px;font-weight:700;color:#1a1c19;animation:greetFadeIn .8s cubic-bezier(.2,1,.3,1) .15s both;}
.rp-welcome-strip .greeting-sub{font-size:11px;color:rgba(255,255,255,.4);margin-top:2px;animation:greetFadeIn .8s cubic-bezier(.2,1,.3,1) .3s both;}
@keyframes greetFadeIn{0%{opacity:0;transform:translateY(6px);}100%{opacity:1;transform:translateY(0);}}
.topbar-mid{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;}
#nav-breadcrumb{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:1;min-width:0;}

.user-menu-wrap{position:relative;}

/* TRIGGER */
.user-trigger{display:flex;align-items:center;gap:0;padding:6px 0;cursor:pointer;position:relative;}
.user-trigger:hover .ut-name{color:var(--text);}
.user-trigger:hover .ut-line{width:100%;opacity:1;}
.ut-avatar{width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.04);color:#ff453a;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;border:1.5px solid rgba(255,255,255,.3);position:relative;box-shadow:0 0 0 2px rgba(48,209,88,.25);transition:box-shadow .3s;}
.ut-avatar[data-online="0"]{box-shadow:0 0 0 2px rgba(95,100,120,.1);}
.ut-info{display:none;}
.ut-name{font-size:13px;font-weight:600;color:var(--t2);transition:color .15s;line-height:1.3;}
.ut-role{display:none;}
.ut-status{display:none;}
.ut-line{width:0;height:1px;background:var(--acc);transition:all .25s ease;opacity:0;margin-top:2px;}

/* DROPDOWN */
.user-dropdown{position:absolute;top:calc(100% + 10px);right:0;width:220px;background:rgba(255,255,255,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(95,100,120,.12);border-radius:16px;overflow:hidden;box-shadow:0 16px 48px rgba(0,0,0,.06),inset 0 1px 0 rgba(255,255,255,.7);opacity:0;visibility:hidden;transform:translateY(-6px) scale(.96);transform-origin:top right;transition:all .2s cubic-bezier(.28,1,.52,1);z-index:200;}
.user-dropdown.open{opacity:1;visibility:visible;transform:translateY(0) scale(1);}

/* PROFILE CARD */
.ud-card{position:relative;padding:20px 16px 16px;overflow:hidden;}
.ud-card-bg{position:absolute;inset:0;background:linear-gradient(135deg,rgba(var(--acc-rgb),.04),rgba(96,165,250,.02));pointer-events:none;}
.ud-profile{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;}
.ud-avatar{width:44px;height:44px;border-radius:50%;background:rgba(58,58,60,.4);color:var(--acc);font-size:17px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid var(--acc);box-shadow:0 0 16px rgba(var(--acc-rgb),.15);}
.ud-name{font-size:14px;font-weight:700;color:var(--text);letter-spacing:-.2px;}
.ud-role-badge{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:600;color:var(--t2);background:rgba(120,120,128,.12);padding:3px 10px;border-radius:20px;border:1px solid rgba(95,100,120,.12);}
.ud-role-dot{width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 6px rgba(52,211,153,.4);}

/* MENU ITEMS */
.ud-menu{padding:6px;}
.ud-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;font-size:12px;font-weight:500;color:var(--t2);cursor:pointer;transition:all .12s;}
.ud-item:hover{background:rgba(248,113,113,.06);color:var(--red);}
.ud-item:hover svg{color:var(--red);}
.ud-item svg{flex-shrink:0;color:var(--t3);transition:color .12s;}
.ud-item span:first-of-type{flex:1;}
.ud-shortcut{font-size:10px;font-family:var(--mono);color:var(--t3);font-weight:500;background:#fff;padding:2px 6px;border-radius:4px;border:1px solid rgba(95,100,120,.12);}

/* BODY */
.body{display:flex;flex:1;overflow:hidden;}
.sidebar{width:220px;min-width:220px;background:#f7f7f5 !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;border-right:1px solid rgba(95,100,120,.1) !important;display:flex;flex-direction:column;padding:8px 0;overflow:hidden;position:relative;z-index:1;box-shadow:1px 0 3px rgba(0,0,0,.03);transition:width .3s cubic-bezier(.2,1,.3,1),min-width .3s cubic-bezier(.2,1,.3,1);height:100%;max-height:100vh;}
.sidebar-nav-scroll{flex:1;overflow-y:auto;overflow-x:hidden;min-height:0;}
.sidebar-nav-scroll::-webkit-scrollbar{width:3px;}
.sidebar-nav-scroll::-webkit-scrollbar-track{background:transparent;}
.sidebar-nav-scroll::-webkit-scrollbar-thumb{background:#d8d9dd;border-radius:3px;}
.sidebar-nav-scroll::-webkit-scrollbar-thumb:hover{background:#8c716e;}
.sidebar.collapsed{width:56px;min-width:56px;overflow-x:hidden;}
.sidebar.collapsed .nav-sec-label,.sidebar.collapsed .nav-sec-arrow{opacity:0;width:0;overflow:hidden;pointer-events:none;}
.sidebar.collapsed .nav-sec{padding:4px 0 2px;justify-content:center;border-top:1px solid rgba(95,100,120,.08);}
.sidebar.collapsed .nav-item{justify-content:center;padding:4px 0;margin:0 4px;gap:0;}
.sidebar.collapsed .nav-item .nav-label{opacity:0;width:0;overflow:hidden;pointer-events:none;}
.sidebar.collapsed .inv-sim-badge{display:none;}
.nav-label{white-space:nowrap;overflow:hidden;transition:opacity .25s .05s,width .3s;}
.nav-sec-label,.nav-sec-arrow{transition:opacity .2s,width .3s;}
.sidebar.collapsed .nav-icon{width:16px;height:16px;}
.sidebar.collapsed .nav-icon svg{width:16px;height:16px;}
.sidebar.collapsed .sidebar-brand-text{opacity:0;width:0;overflow:hidden;}
.sidebar-brand-text{transition:opacity .2s,width .3s;}
.sidebar.collapsed .sidebar-user-info{opacity:0;width:0;overflow:hidden;}
.sidebar-user-info{transition:opacity .2s,width .3s;}
.sidebar.collapsed .sidebar-user-avatar{margin:0 auto;}
.sidebar.collapsed .sidebar-footer{flex-direction:column;align-items:center;gap:2px;padding:4px 4px 4px !important;margin-top:auto;}
.sidebar.collapsed .sidebar-footer .sidebar-user-avatar{width:22px;height:22px;border-radius:6px;}
.sidebar.collapsed .sidebar-footer .sidebar-user-avatar svg{width:9px;height:7px;}
.sidebar.collapsed .sidebar-collapse-btn{transform:rotate(180deg);}
.sidebar.collapsed .nav-group-items{padding-bottom:2px;}
.sidebar.collapsed .sidebar-brand{padding:10px 0 6px !important;text-align:center;justify-content:center;}
.sidebar.collapsed .sidebar-brand > div:first-child{margin:0 auto;}
.sidebar.collapsed .sidebar-brand > div:last-child{display:none;}
.sidebar.collapsed .nav-item{position:relative;}
.sidebar.collapsed .nav-item:hover::before{content:attr(data-tip);position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:8px;background:#fff;color:#1a1c19;border:1px solid rgba(95,100,120,.12);box-shadow:0 2px 8px rgba(0,0,0,.06);font-size:12px;font-weight:600;padding:4px 10px;border-radius:6px;white-space:nowrap;z-index:999;pointer-events:none;}
.sidebar::-webkit-scrollbar{width:3px;}.sidebar::-webkit-scrollbar-thumb{background:var(--b2);border-radius:2px;}
/* nav-item styles defined in nav-group section */
.nav-icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:.68;transition:opacity var(--motion-fast) ease,transform var(--motion-normal) var(--spring-bounce);}.nav-icon svg{width:16px;height:16px;}.nav-item.active .nav-icon,.nav-item:hover .nav-icon{opacity:1;}
.nav-item:hover .nav-icon{transform:translateX(1px) scale(1.09);}
.nav-item.active .nav-icon{transform:scale(1.05);}
.nav-group{margin-bottom:0px;}
.nav-sec{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px 3px 14px;
  font-size:10px;font-weight:700;letter-spacing:.06em;
  color:rgba(60,60,58,.45);text-transform:uppercase;
  cursor:pointer;user-select:none;
  border-top:1px solid rgba(95,100,120,.1);
}
.nav-group:first-child .nav-sec{border-top:none;padding-top:6px;}
.nav-sec:hover{color:var(--text);}
.nav-sec-arrow{
  font-size:11px;transition:transform .2s ease;
  color:var(--t3);font-weight:400;
}
.nav-sec-arrow.open{transform:rotate(90deg);}
.nav-group-items{overflow:hidden;transition:max-height .25s ease;padding-bottom:4px;}
.nav-item{
  display:flex;align-items:center;gap:8px;
  padding:5px 10px;margin:1px 8px;border-radius:8px;
  font-size:12.5px;font-weight:500;color:#444240;
  cursor:pointer;
  transition:background var(--motion-fast) var(--spring-gentle),color var(--motion-fast) ease,transform .15s var(--spring-snappy),box-shadow .15s ease;
  letter-spacing:-.01em;
  position:relative;
}
.nav-item .nav-icon svg{shape-rendering:geometricPrecision;}
.nav-item:hover{
  color:#2a2826;
  background:#ffffff;
  transform:translateY(-1.5px);
  box-shadow:0 2px 6px rgba(90,80,70,.08),0 1px 2px rgba(90,80,70,.05);
}
.nav-item:active{
  transform:translateY(0) scale(.985);
  box-shadow:0 1px 2px rgba(90,80,70,.06);
  transition:transform .1s ease;
}
.nav-item:hover .nav-icon{opacity:1;}

.sidebar.collapsed .nav-item{transition:transform .25s cubic-bezier(.2,1,.3,1),background .18s,box-shadow .25s cubic-bezier(.2,1,.3,1);}
.sidebar.collapsed .nav-item:hover{
  transform:scale(1.06) !important;z-index:10;
  background:rgba(26,28,25,.05) !important;
  box-shadow:0 2px 6px rgba(0,0,0,.06) !important;
}

.sidebar.collapsed .nav-item{margin:1px 6px;}
/* [2 Jul 2026, sidebar-glider] Variant C: the active highlight is a white card that GLIDES
   between items (positionNavSlider JS already existed — this styles it). Ring + text adopt
   the section color via --ns/--ni vars. The old pink pill + inset bar on .nav-item.active
   are gone; the glider IS the active surface. */
.sidebar-nav-scroll{position:relative;}
.nav-slider{
  position:absolute;left:8px;right:8px;top:0;height:0;opacity:0;z-index:0;pointer-events:none;
  background:#fff;border-radius:9px;
  box-shadow:0 3px 10px rgba(90,80,70,.11),0 1px 3px rgba(90,80,70,.06);
  transition:top .3s cubic-bezier(.34,1.32,.4,1),height .3s cubic-bezier(.34,1.32,.4,1),opacity .2s ease,box-shadow .28s;
}
.nav-item{z-index:1;}
/* [2 Aug 2026] staggered entrance — items cascade in on nav build (login/role-load only,
   not per-navigation), giving the sidebar a sense of being "alive" on arrival. */
@keyframes navItemIn{from{opacity:0;transform:translateX(-6px);}to{opacity:1;transform:none;}}
.nav-group-items .nav-item{animation:navItemIn .32s var(--spring-snappy) backwards;}
.nav-group-items .nav-item:nth-child(1){animation-delay:.03s;}
.nav-group-items .nav-item:nth-child(2){animation-delay:.06s;}
.nav-group-items .nav-item:nth-child(3){animation-delay:.09s;}
.nav-group-items .nav-item:nth-child(4){animation-delay:.12s;}
.nav-group-items .nav-item:nth-child(5){animation-delay:.15s;}
.nav-group-items .nav-item:nth-child(6){animation-delay:.18s;}
@media (prefers-reduced-motion:reduce){
  .nav-group-items .nav-item{animation:none;}
  .nav-item:hover .nav-icon,.nav-item.active .nav-icon{transform:none;}
  .nav-slider{transition:opacity .15s ease;}
}
/* Active page — the glider carries the surface; the item just changes voice */
.nav-item.active{
  font-weight:600;
  color:rgb(var(--ni-r,139),var(--ni-g,26),var(--ni-b,26));
}
.nav-item.active:hover{
  background:rgba(var(--ni-r,139),var(--ni-g,26),var(--ni-b,26),.04);
  transition:none;
}
/* Tactile press — covers idle, current-page, and current-page-while-hovered */
.nav-item:active{background:rgba(26,28,25,.07);}
.nav-item.active:active{background:rgba(var(--ni-r,139),var(--ni-g,26),var(--ni-b,26),.17);}
/* Keyboard focus ring — brand-tinted, no outline */
.nav-item:focus-visible{
  outline:none;
  box-shadow:
    inset 0 0 0 2px var(--acc),
    0 0 0 3px rgba(139,26,26,.15);
}

.main{flex:1;overflow-y:auto;padding:24px 28px;background:var(--bg);position:relative;z-index:1;}
.main::-webkit-scrollbar{width:5px;}
.main::-webkit-scrollbar-track{background:transparent;}
.main::-webkit-scrollbar-thumb{background:#d8d9dd;border-radius:3px;}
.main::-webkit-scrollbar-thumb:hover{background:var(--b2);}
.page{display:none;animation:none;opacity:0;transform:translateY(8px);}
.page.active{display:block;}
.page.page-enter{animation:pageEnter 0.35s cubic-bezier(.4,0,.2,1) forwards;}
@keyframes pageEnter{
  from{opacity:0;transform:translateY(12px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes pageSlideIn{
  from{opacity:0;transform:translateX(40px);}
  to{opacity:1;transform:translateX(0);}
}
@keyframes pageSlideOut{
  from{opacity:1;transform:translateX(0);}
  to{opacity:0;transform:translateX(-40px);}
}
@keyframes pageSlideBack{
  from{opacity:0;transform:translateX(-40px);}
  to{opacity:1;transform:translateX(0);}
}
.page.page-slide-in{animation:pageSlideIn .3s cubic-bezier(.25,.1,.25,1) forwards;}
.page.page-slide-back{animation:pageSlideBack .3s cubic-bezier(.25,.1,.25,1) forwards;}
.page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px;position:relative;z-index:600;}
.page-title{font-size:24px;font-weight:800;letter-spacing:-.5px;}
.page-sub{font-size:11px;color:var(--t2);margin-top:4px;font-family:var(--mono);font-weight:400;}

/* STATS */
.stats-row{display:grid;gap:10px;margin-bottom:18px;overflow:visible;}
.s4{grid-template-columns:repeat(4,1fr);}
.s3{grid-template-columns:repeat(3,1fr);}
.s2{grid-template-columns:repeat(2,1fr);}

/* Clickable stat filter cards */
.stat{cursor:pointer;user-select:none;}
.stat .stat-label{transition:color .15s;}
.stat.stat-active .stat-label{color:var(--acc) !important;}

.stat, .dash-kpi {
  background: rgba(255,255,255,.75) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border:1px solid rgba(95,100,120,.12);
  border-radius: 22px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.7) !important;
  transition: all 0.3s cubic-bezier(.34,1.56,.64,1) !important;
  padding: 18px !important;
  position: relative;
  overflow: hidden;
}

.stat::before, .dash-kpi::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 5%, rgba(139,26,26,0.04) 30%, rgba(139,26,26,0.06) 50%, rgba(139,26,26,0.04) 70%, transparent 95%);
  border-radius: 22px 22px 0 0;
}

.stat::after, .dash-kpi::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 22px;
  background: transparent;
  pointer-events: none;
}

/* duplicate clickable hover removed - see unified card hover */

.stat.stat-active, .dash-kpi.stat-active {
  background: rgba(255,255,255,.9) !important;
  border-color: rgba(139,26,26,.18) !important;
  box-shadow: 0 0 0 1px rgba(139,26,26,.08), 0 4px 16px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.8) !important;
}

/* Clickable stat filters */

/* Pill toggle buttons */

.pill-group{display:inline-flex;gap:2px;padding:3px;background:rgba(255,255,255,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:10px;border:1px solid rgba(95,100,120,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.7);}
.pill-btn{background:transparent;border:1px solid transparent;color:var(--t3);font-size:11px;font-weight:600;padding:5px 12px;border-radius:8px;cursor:pointer;transition:all .15s;font-family:inherit;}
.pill-btn:hover{background:rgba(240,247,255,.8);color:var(--accent);border:1px solid rgba(24,95,165,.15);box-shadow:0 1px 4px rgba(24,95,165,.1),inset 0 1px 0 rgba(255,255,255,.8);font-weight:600;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.pill-btn.pill-active{background:rgba(240,247,255,.8);color:var(--accent);border:1px solid rgba(24,95,165,.15);box-shadow:0 1px 4px rgba(24,95,165,.1),inset 0 1px 0 rgba(255,255,255,.8);font-weight:600;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.pill-btn:active{transform:scale(.95);}
.pill-slider-wrap{position:relative;}.pill-slider-wrap .pill-btn{position:relative;z-index:1;}
.pill-slider{position:absolute;top:0;left:0;height:100%;background:rgba(0,0,0,.03);border-radius:8px;transition:all .3s cubic-bezier(.2,1,.3,1);pointer-events:none;z-index:0;}
.pill-slider-wrap .pill-btn.pill-active{background:transparent;}
/* Per-platform pill colors — override .pill-active for platform-specific glass tint */
.pill-btn.pill-active.pl-all, .pill-btn.pl-all:hover{background:rgba(0,0,0,.06);color:var(--text);border-color:rgba(0,0,0,.08);box-shadow:0 1px 3px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.7);}
.pill-btn.pill-active.pl-keeta, .pill-btn.pl-keeta:hover{background:rgba(255,203,0,.92);color:#1a1c19;border-color:rgba(212,168,0,.45);box-shadow:0 1px 4px rgba(255,203,0,.28),inset 0 1px 0 rgba(255,255,255,.7);font-weight:800;letter-spacing:-.02em;}
.pill-btn.pill-active.pl-shipa, .pill-btn.pl-shipa:hover{background:rgba(10,132,255,.18);color:#0a84ff;border-color:rgba(10,132,255,.32);box-shadow:0 1px 4px rgba(10,132,255,.18),inset 0 1px 0 rgba(255,255,255,.7);}
.pill-btn.pill-active.pl-comecome, .pill-btn.pl-comecome:hover{background:rgba(52,211,153,.2);color:#1d7847;border-color:rgba(52,211,153,.35);box-shadow:0 1px 4px rgba(52,211,153,.18),inset 0 1px 0 rgba(255,255,255,.7);}
.pill-btn.pill-active.pl-noon, .pill-btn.pl-noon:hover{background:rgba(253,204,2,.45);color:#5a4400;border-color:rgba(253,204,2,.55);box-shadow:0 1px 4px rgba(253,204,2,.22),inset 0 1px 0 rgba(255,255,255,.7);}
/* [6 Sep 2026, client-pill] fixed-deployment client pill (King Vape etc.) — violet, distinct from the 4 platforms */
.pill-btn.pill-active.pl-client, .pill-btn.pl-client:hover{background:rgba(124,58,237,.16);color:#5b21b6;border-color:rgba(124,58,237,.32);box-shadow:0 1px 4px rgba(124,58,237,.18),inset 0 1px 0 rgba(255,255,255,.7);}

.stat-card{cursor:pointer;transition:all .25s var(--spring-snappy);}
.dash-kpi.stat-card{border-color:rgba(95,100,120,.12) !important;box-shadow:0 1px 3px rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.7) !important;}
/* dash-kpi.stat-card hover unified above */
.dash-kpi.stat-card.stat-active{border-color:rgba(24,95,165,.22) !important;box-shadow:0 0 0 1px rgba(24,95,165,.10),0 6px 18px rgba(24,95,165,.10),inset 0 1px 0 rgba(255,255,255,.85) !important;background:linear-gradient(180deg,rgba(232,243,255,.6) 0%,rgba(210,228,255,.4) 100%);}
.stat-card:active{transform:scale(.97);transition:transform .08s;}
.stat[onclick]{cursor:pointer;}
.stat[onclick]:active{transform:scale(.93);transition:transform .08s;}
.stat[onclick]{transition:all .35s var(--spring-bounce);}
.stat.stat-active{border-color:rgba(139,26,26,.18) !important;}
.stat:hover{background:rgba(139,26,26,.03);border-color:rgba(139,26,26,.08);box-shadow:0 4px 12px rgba(0,0,0,.06);}
.stat-label{font-size:10px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;}
.stat-val{font-size:26px;font-weight:800;letter-spacing:-1px;}
.stat-sub{font-size:11px;font-family:var(--mono);color:var(--t2);margin-top:2px;font-weight:400;}

/* TOOLBAR */
.toolbar{display:flex;align-items:center;gap:7px;margin-bottom:12px;flex-wrap:wrap;}
.search{position:relative;}
.search input{background:#f2f3f7;border:1px solid rgba(95,100,120,.15);color:#1a1c19;border-radius:8px;padding:8px 12px 8px 32px;font-size:13px;width:100%;font-family:var(--font);transition:all .15s;}
.search input:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(95,100,120,.08);background:#fff;}
.search input::placeholder{color:var(--t3);}
.si{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--t3);font-size:12px;}
.fb{padding:6px 12px;background:rgba(95,100,120,.08);border:1px solid rgba(120,120,128,.24);color:var(--t2);font-size:12px;font-weight:500;border-radius:8px;cursor:pointer;transition:all .15s;font-family:var(--font);}
.fb:hover,.fb.on{border-color:var(--t3);color:var(--text);background:rgba(95,100,120,.08);}
.btn-p{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;background:#8B1A1A;color:#fff;font-size:13px;font-weight:600;border-radius:8px;border:1px solid #8B1A1A;cursor:pointer;font-family:var(--font);margin-left:auto;transition:all .15s;letter-spacing:-.01em;}
.btn-p:hover{background:#7a1616;border-color:#7a1616;}
.btn-p:active{background:#6a1212;transform:scale(.97);}
.btn-g{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;background:rgba(255,255,255,.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(95,100,120,.12);color:#58413f;font-size:13px;font-weight:500;border-radius:8px;cursor:pointer;font-family:var(--font);transition:all .18s;letter-spacing:-.01em;box-shadow:0 1px 3px rgba(0,0,0,.04),inset 0 1px 0 rgba(255,255,255,.7);}
.btn-g:hover{background:rgba(255,255,255,.9);border-color:rgba(95,100,120,.2);color:#1a1c19;box-shadow:0 2px 6px rgba(0,0,0,.07),inset 0 1px 0 rgba(255,255,255,.8);transform:translateY(-1px);}
.btn-g:active{background:rgba(236,237,241,.8);transform:scale(.97);box-shadow:0 1px 2px rgba(0,0,0,.04),inset 0 1px 2px rgba(0,0,0,.03);}
.btn-red{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.3);color:var(--red);font-size:12px;font-weight:600;border-radius:8px;cursor:pointer;font-family:var(--font);}
.btn-green{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.3);color:var(--green);font-size:12px;font-weight:600;border-radius:8px;cursor:pointer;font-family:var(--font);}

/* TABLE */
.tbl{background:rgba(255,255,255,.75);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(95,100,120,.12);border-radius:22px;overflow:visible;margin-bottom:14px;position:relative;box-shadow:0 1px 3px rgba(0,0,0,.04),inset 0 1px 0 rgba(255,255,255,.7);transition:all .3s cubic-bezier(.34,1.56,.64,1);}
.tbl::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 5%,rgba(255,255,255,.8) 30%,rgba(255,255,255,.9) 50%,rgba(255,255,255,.8) 70%,transparent 95%);z-index:1;}
.tbl table{border-radius:22px;overflow:hidden;}
.tbl thead th:first-child{border-radius:22px 0 0 0;}.tbl thead th:last-child{border-radius:0 22px 0 0;}

/* iOS Glass card style — light theme */
.card {
  background: rgba(255,255,255,.75) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(95,100,120,.12) !important;
  border-radius: 20px !important;
  box-shadow:
    0 1px 3px rgba(0,0,0,.04),
    inset 0 1px 0 rgba(255,255,255,.7) !important;
  transform: translateZ(0);
  transition: transform .3s cubic-bezier(.2,1,.3,1), box-shadow .3s ease;
}
.card:hover {
  transform: translateY(-2px) scale(1.005);
  box-shadow:
    0 2px 6px rgba(0,0,0,.07),
    inset 0 1px 0 rgba(255,255,255,.8) !important;
}
table{width:100%;border-collapse:collapse;}
thead th{background:#f3f4f8;padding:10px 14px;font-size:10px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.06em;text-align:left;border-bottom:1px solid rgba(95,100,120,.1);white-space:nowrap;}
tbody tr{border-bottom:1px solid rgba(95,100,120,.06);cursor:pointer;transition:transform .28s cubic-bezier(.2,1,.3,1),background .18s,box-shadow .28s,border-radius .28s;transform-origin:center;position:relative;z-index:1;}
tbody tr:last-child{border-bottom:none;}
tbody tr:hover{background:rgba(95,100,120,.03) !important;box-shadow:0 1px 4px rgba(0,0,0,.04),inset 0 0 0 1px rgba(95,100,120,.12);border-radius:8px;}
tbody tr:active{background:rgba(0,0,0,.03) !important;}
td{padding:10px 14px;font-size:12.5px;vertical-align:middle;backdrop-filter:none;}
.td-name{display:flex;align-items:center;gap:9px;}
.av{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;}
.nm{font-weight:600;font-size:13px;}
.cd{font-family:var(--mono);font-size:10px;color:var(--t3);margin-top:1px;}
.mono{font-family:var(--mono);font-size:11px;color:var(--t2);}

/* BADGES — platform-style chips (mirrors .plat treatment) */
.badge{display:inline-block;padding:2px 7px;border-radius:4px;font-size:10px;font-weight:700;font-family:var(--mono);text-transform:uppercase;}
.bdot{display:none;}
.b-active,.b-approved,.b-paid,.b-available,.b-locked,.b-rider{background:linear-gradient(180deg,rgba(220,250,235,.85) 0%,rgba(190,240,215,.6) 100%);color:#2d6a2e;border:1px solid rgba(45,106,46,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(0,0,0,.04),0 2px 6px rgba(45,106,46,.1);}
.b-draft,.b-assigned,.b-supervisor{background:linear-gradient(180deg,rgba(232,243,255,.85) 0%,rgba(210,228,255,.6) 100%);color:var(--accent);border:1px solid rgba(24,95,165,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(0,0,0,.04),0 2px 6px rgba(24,95,165,.1);}
.b-admin,.b-inactive,.b-suspended,.b-rejected,.b-unpaid{background:linear-gradient(180deg,rgba(255,232,232,.85) 0%,rgba(255,210,210,.6) 100%);color:#8B1A1A;border:1px solid rgba(139,26,26,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(0,0,0,.04),0 2px 6px rgba(139,26,26,.1);}
.b-pending,.b-deducted{background:linear-gradient(180deg,rgba(255,243,200,.85) 0%,rgba(255,228,150,.6) 100%);color:#8a5a00;border:1px solid rgba(184,115,51,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(0,0,0,.04),0 2px 6px rgba(184,115,51,.1);}
.drp{background:#f2f3f7;border:1px solid rgba(95,100,120,.15);color:#1a1c19;border-radius:8px;padding:6px 10px;font-size:12px;font-family:var(--font);cursor:pointer;transition:all .15s;-webkit-appearance:none;appearance:none;}
.drp-trigger{display:inline-flex;align-items:center;gap:6px;background:rgba(95,100,120,.08);border:1px solid rgba(120,120,128,.24);color:var(--t2);font-family:var(--font);font-size:13px;padding:7px 12px;border-radius:8px;cursor:pointer;transition:transform .35s cubic-bezier(.2,1,.3,1),background .15s,color .15s,border-radius .35s cubic-bezier(.2,1,.3,1);font-weight:500;user-select:none;-webkit-tap-highlight-color:transparent;will-change:transform;}
.drp-trigger:hover{background:rgba(120,120,128,.28);color:var(--text);}
.drp-trigger:active,.drp-trigger.pressing{transform:scale(.92);border-radius:10px;background:rgba(120,120,128,.32);}
.drp-trigger svg.drp-chevron{width:10px;height:6px;flex-shrink:0;opacity:.5;transition:transform .2s;}
.drp-trigger.menu-open svg.drp-chevron{transform:rotate(180deg);}
.drp-menu{position:fixed;z-index:9999;min-width:180px;background:rgba(255,255,255,.98);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);border-radius:13px;border:1px solid rgba(95,100,120,.15);box-shadow:0 8px 32px rgba(0,0,0,.08);padding:4px 0;opacity:0;transform:scale(.92) translateY(-6px);transition:opacity .2s cubic-bezier(.2,1,.3,1),transform .25s cubic-bezier(.2,1,.3,1);pointer-events:none;overflow:hidden;}
.drp-menu.open{opacity:1;transform:scale(1) translateY(0);pointer-events:auto;}
.drp-menu-item{display:flex;align-items:center;gap:10px;padding:11px 16px;font-family:var(--font);font-size:15px;font-weight:400;color:var(--text);cursor:pointer;transition:background .08s;position:relative;-webkit-tap-highlight-color:transparent;}
.drp-menu-item.drag-hover{background:rgba(0,0,0,.04);}
.drp-menu-item:not(:last-child)::after{content:'';position:absolute;bottom:0;left:16px;right:16px;height:.5px;background:rgba(0,0,0,.04);}
.drp-menu-item .drp-check{width:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.drp-menu-item .drp-check svg{opacity:0;transition:opacity .15s;}
.drp-menu-item.selected .drp-check svg{opacity:1;}
.drp-overlay{position:fixed;inset:0;z-index:9998;}
.drp:focus,.drp:hover{background:rgba(120,120,128,.28);color:var(--text);}
/* Unified platform pills — neutral warm-grey base, brand color reduced to a 6px dot.
   Replaces the saturated yellow Keeta/Noon and per-platform tinted backgrounds with
   a single calm peach so the table reads cleaner. Brand identity preserved via dot. */
.plat{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:4px;font-size:10px;font-weight:700;font-family:var(--mono);background:rgba(95,100,120,.06);color:#3a2e2c;border:1px solid rgba(95,100,120,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.6);}
.plat::before{content:'';width:6px;height:6px;border-radius:50%;flex-shrink:0;background:rgba(95,100,120,.4);}
.pk::before{background:#d4a800;} .pk{color:#d4a800;}
.pn::before{background:#fdcc02;} .pn{color:#fdcc02;}
.ps::before{background:var(--accent);} .ps{color:var(--accent);}
.pcc::before{background:#34d399;} .pcc{color:#34d399;}
.pcl::before{background:#7c3aed;} .pcl{color:#6d28d9;} /* [6 Sep 2026, client-pill] fixed-deployment client chip */
.pt{background:linear-gradient(180deg,rgba(255,232,232,.85) 0%,rgba(255,210,210,.6) 100%);color:#8B1A1A;border:1px solid rgba(139,26,26,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(0,0,0,.04),0 2px 6px rgba(139,26,26,.1);}
.pam{background:linear-gradient(180deg,rgba(220,250,235,.85) 0%,rgba(190,240,215,.6) 100%);color:#2d6a2e;border:1px solid rgba(45,106,46,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(0,0,0,.04),0 2px 6px rgba(45,106,46,.1);}

/* PANEL */
.panel{position:fixed;right:0;top:48px;bottom:0;width:380px;background:rgba(255,255,255,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-left:1px solid rgba(95,100,120,.1);transform:translateX(100%);transition:transform .45s var(--spring-snappy), box-shadow .45s var(--spring-gentle);overflow-y:auto;z-index:90;
  box-shadow:-20px 0 60px rgba(0,0,0,0);}
.panel.open{transform:translateX(0);box-shadow:-20px 0 60px rgba(0,0,0,.06);}
.panel-head{padding:16px 18px;border-bottom:1px solid rgba(95,100,120,.12);display:flex;align-items:flex-start;gap:11px;}
.pan-av{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;flex-shrink:0;}
.pan-nm{font-size:15px;font-weight:700;}
.pan-cd{font-family:var(--mono);font-size:10px;color:var(--t3);margin-top:2px;}
.pan-close{margin-left:auto;background:#fff;border:1px solid var(--b2);color:var(--t2);cursor:pointer;font-size:14px;padding:0;width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;transition:all .15s;}
.pan-close:hover{border-color:var(--red);color:var(--red);background:rgba(240,113,107,.08);}
.pan-sec{padding:12px 18px;border-bottom:1px solid rgba(95,100,120,.12);}
.pan-sec-title{font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px;}
.prow{display:flex;justify-content:space-between;align-items:center;padding:4px 0;}
.pkey{font-size:11px;color:var(--t2);}
.pval{font-size:11px;font-weight:600;font-family:var(--mono);}

/* MODAL */
.overlay{position:fixed;inset:0;background:rgba(26,28,25,.25);z-index:250;display:none;align-items:center;justify-content:center;opacity:0;transition:opacity .3s var(--spring-gentle);}
.overlay.open{display:flex;animation:overlayIn .35s var(--spring-snappy) forwards;}
@keyframes overlayIn{from{opacity:0}to{opacity:1}}
.modal{background:#fff !important;backdrop-filter:blur(20px) !important;-webkit-backdrop-filter:blur(20px) !important;border:1px solid rgba(95,100,120,.12) !important;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.08),0 0 0 1px rgba(95,100,120,.08),inset 0 1px 0 rgba(255,255,255,.7);width:540px;max-width:95vw;max-height:92vh;overflow-y:auto;animation:modalIn .42s cubic-bezier(.34,1.4,.5,1);}
.modal-content{background:rgba(255,255,255,.75) !important;backdrop-filter:blur(14px) !important;-webkit-backdrop-filter:blur(14px) !important;border:1px solid rgba(95,100,120,.1) !important;}
.modal-lg{width:720px;}
@keyframes modalIn{
  0%{opacity:0;transform:translateY(16px) scale(.94)}
  60%{opacity:1}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
.modal-hd{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid rgba(95,100,120,.12);}
.modal-title{font-size:16px;font-weight:700;letter-spacing:-.3px;user-select:none;-webkit-user-select:none;}
.modal-close{background:#fff;border:1px solid var(--b2);color:var(--t2);cursor:pointer;font-size:14px;width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:all .15s;}
.modal-close:hover{border-color:var(--red);color:var(--red);background:rgba(240,113,107,.08);}
.modal-body{padding:20px 22px;display:flex;flex-direction:column;gap:12px;}
.modal-ft{padding:14px 22px;border-top:1px solid rgba(95,100,120,.12);display:flex;justify-content:flex-end;gap:8px;}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.fr.full{grid-template-columns:1fr;}
.fr3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;}
.fg{display:flex;flex-direction:column;gap:4px;}
.fg label{font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.08em;}
.fg input,.fg select,.fg textarea{background:#fff;border:1px solid rgba(95,100,120,.12);color:var(--text);font-family:var(--font);font-size:12px;padding:9px 12px;border-radius:12px;outline:none;transition:all .15s;width:100%;}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--b2);box-shadow:0 0 0 3px rgba(95,100,120,.06);background:rgba(58,58,60,.4);}
.fg select option{background:#fff;}

/* MISC */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;color:var(--t3);text-align:center;gap:10px;}
.ei{font-size:24px;opacity:.3;filter:grayscale(1);}
.et{font-size:13px;font-weight:600;color:var(--t2);letter-spacing:-.2px;}
.cp-btn{background:none;border:none;color:rgba(26,28,25,0.55);cursor:pointer;padding:2px 5px;border-radius:5px;font-size:.85rem;margin-left:4px;transition:all .15s;vertical-align:middle;line-height:1;}
.cp-btn:hover{color:var(--accent);background:rgba(24,95,165,.10);box-shadow:inset 0 0 0 1px rgba(24,95,165,.18);}
.cp-btn.cp-done{color:var(--green);}
.toast{position:fixed;top:72px;left:50%;transform:translateX(-50%) translateY(-12px) scale(.95);background:rgba(255,255,255,.98);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(95,100,120,.15);border-radius:14px;padding:12px 20px;font-size:13px;font-weight:600;display:none;align-items:center;gap:8px;z-index:2147483601;
  box-shadow:0 4px 12px rgba(0,0,0,.06);opacity:0;white-space:nowrap;}
.toast.show{display:flex;animation:toastIn .5s cubic-bezier(.34,1.56,.64,1) forwards;}
.toast.hide{display:flex;animation:toastOut .35s cubic-bezier(.4,0,1,1) forwards;}
@keyframes toastIn{
  0%{opacity:0;transform:translateX(-50%) translateY(-20px) scale(.9)}
  60%{opacity:1;transform:translateX(-50%) translateY(4px) scale(1.02)}
  100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
}
@keyframes toastOut{
  0%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
  100%{opacity:0;transform:translateX(-50%) translateY(-16px) scale(.92)}
}
.toast.ok,.toast.success{border-color:var(--green);box-shadow:0 4px 12px rgba(0,0,0,.06),0 0 0 1px rgba(52,211,153,.15);}
.toast.err{border-color:var(--red);box-shadow:0 4px 12px rgba(0,0,0,.06),0 0 0 1px rgba(240,113,107,.15);}
.toast.info{border-color:var(--blue);box-shadow:0 4px 12px rgba(0,0,0,.06),0 0 0 1px rgba(91,156,245,.15);}
/* ── TOAST NOTIFICATION SYSTEM ─────────────────────────────── */
#toast-container{position:fixed;top:calc(96px + env(safe-area-inset-top,0px));right:18px;z-index:2147483601;display:flex;flex-direction:column;gap:10px;pointer-events:none;max-width:400px;width:calc(100% - 32px);}
.toast-n{
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(32px) saturate(180%);-webkit-backdrop-filter:blur(32px) saturate(180%);
  border:1px solid rgba(95,100,120,.14);
  border-radius:18px;
  padding:12px 14px 12px 10px;
  color:var(--fg);font-size:.85rem;
  display:flex;align-items:center;gap:11px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.85) inset,
    0 16px 36px -8px rgba(28,22,22,.18),
    0 8px 16px -4px rgba(28,22,22,.08),
    0 0 0 .5px rgba(95,100,120,.06);
  animation:toastSlideIn .5s cubic-bezier(.2,1.05,.3,1) forwards;
  pointer-events:all;min-width:240px;position:relative;
  overflow:hidden;
}
.toast-n::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,#8B1A1A,#A52020);
  opacity:.85;
  border-radius:18px 0 0 18px;
}
.toast-n.toast-success::before{background:linear-gradient(180deg,#2d8a2d,#34a853);opacity:.9;}
.toast-n.toast-error::before{background:linear-gradient(180deg,#b1271f,#d93025);opacity:.9;}
.toast-n.toast-warning::before{background:linear-gradient(180deg,#c87a0a,#e8a017);opacity:.9;}
.toast-n.toast-info::before{background:linear-gradient(180deg,var(--accent),#2879c8);opacity:.9;}
.toast-close{
  width:24px;height:24px;border-radius:50%;border:none;
  background:rgba(26,28,25,.05);color:rgba(26,28,25,.42);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:14px;line-height:1;transition:all .15s cubic-bezier(.2,1,.3,1);
  padding:0;flex-shrink:0;margin-left:4px;
}
.toast-close:hover{background:rgba(26,28,25,.10);color:rgba(26,28,25,.78);transform:scale(1.05);}
.toast-close:active{transform:scale(.92);}
.toast-icon{
  width:40px;height:40px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:linear-gradient(135deg,#8B1A1A,#A52020);
  box-shadow:0 6px 14px rgba(139,26,26,.24),inset 0 1px 0 rgba(255,255,255,.22);
  position:relative;
}
.toast-icon svg{width:18px;height:18px;}
.toast-icon::after{content:'';position:absolute;bottom:-2px;right:-2px;width:13px;height:13px;border-radius:50%;border:2.5px solid #fff;background:transparent;display:none;box-shadow:0 1px 3px rgba(0,0,0,.12);}
.toast-n.toast-success .toast-icon::after{display:block;background:#34a853;}
.toast-n.toast-error .toast-icon::after{display:block;background:#d93025;}
.toast-n.toast-warning .toast-icon::after{display:block;background:#e8a017;}
.toast-n.toast-info .toast-icon::after{display:none;}
.toast-body{flex:1;min-width:0;}
.toast-title{font-weight:700;font-size:.82rem;color:var(--fg);line-height:1.2;letter-spacing:-.2px;}
.toast-msg{font-size:.78rem;color:var(--t2);margin-top:3px;line-height:1.4;word-wrap:break-word;overflow-wrap:break-word;}
.toast-meta{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0;margin-left:4px;}
.toast-now{font-size:.62rem;color:rgba(26,28,25,.36);letter-spacing:.4px;font-family:var(--mono,'SF Mono',monospace);font-weight:500;text-transform:uppercase;}
.toast-undo{
  font-size:.72rem;font-weight:600;
  background:rgba(139,26,26,.08);color:#8B1A1A;
  border:1px solid rgba(139,26,26,.18);
  border-radius:8px;padding:4px 10px;cursor:pointer;
  margin-left:8px;flex-shrink:0;
  transition:all .15s cubic-bezier(.2,1,.3,1);
  font-family:inherit;letter-spacing:.1px;
}
.toast-n.toast-error .toast-undo{background:rgba(217,48,37,.08);color:#b1271f;border-color:rgba(217,48,37,.2);}
.toast-undo:hover{background:rgba(139,26,26,.14);transform:translateY(-1px);box-shadow:0 2px 8px rgba(139,26,26,.14);}
.toast-undo:active{transform:translateY(0);}
.toast-n.toast-bump{animation:toastBump .35s cubic-bezier(.2,1.4,.3,1);}
@keyframes toastSlideIn{from{opacity:0;transform:translateX(20px) scale(.94);}to{opacity:1;transform:translateX(0) scale(1);}}
@keyframes toastSlideOut{to{opacity:0;transform:translateX(12px) scale(.94);}}
@keyframes toastBump{0%{transform:scale(1);}50%{transform:scale(1.025);}100%{transform:scale(1);}}
@media(max-width:768px){#toast-container{top:56px;left:16px;right:16px;width:auto;}}
.info-card{background:rgba(255,255,255,.75);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(95,100,120,.12);border-radius:22px;padding:18px;margin-bottom:12px;position:relative;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.04),inset 0 1px 0 rgba(255,255,255,.7);transition:all .3s cubic-bezier(.34,1.56,.64,1);}
.info-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 5%,rgba(255,255,255,.20) 30%,rgba(255,255,255,.25) 50%,rgba(255,255,255,.20) 70%,transparent 95%);}
.info-card:hover{transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,.06);}
.info-card:hover{border-color:var(--b2);}
.ict{font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;}
.irow{display:flex;justify-content:space-between;font-size:12px;padding:5px 0;border-bottom:1px solid rgba(95,100,120,.12);}
.irow:last-child{border:none;}
.ikey{color:var(--t2);}
.ival{font-weight:600;font-family:var(--mono);}
.alert-item{display:flex;align-items:center;gap:11px;padding:12px 14px;background:rgba(255,255,255,.75);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(95,100,120,.12);border-radius:18px;margin-bottom:8px;position:relative;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.04),inset 0 1px 0 rgba(255,255,255,.7);transition:all .3s cubic-bezier(.34,1.56,.64,1);}
.alert-item::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 5%,rgba(255,255,255,.18) 30%,rgba(255,255,255,.22) 50%,rgba(255,255,255,.18) 70%,transparent 95%);}
.alert-item:hover{transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,.06);}
.alert-item:hover{border-color:var(--b2);background:rgba(255,255,255,.85);}
.a-ico{font-size:15px;}
.a-text{font-size:12px;font-weight:500;flex:1;}
.a-sub{font-size:11px;color:var(--t2);margin-top:1px;}
.a-days{font-size:11px;font-weight:700;font-family:var(--mono);padding:2px 7px;border-radius:4px;}
.d30{background:rgba(248,113,113,.15);color:var(--red);}
.d60{background:rgba(251,191,36,.15);color:var(--amber);}
.d90{background:rgba(96,165,250,.15);color:var(--blue);}

/* PAYSLIP */
.payslip{background:#fff;color:#111;padding:28px 32px;font-family:'Plus Jakarta Sans','Segoe UI',sans-serif;max-width:760px;margin:0 auto;border:none;border-radius:14px;box-shadow:0 4px 20px rgba(0,0,0,.15);}
.ps-header{display:flex;align-items:center;gap:16px;margin-bottom:16px;padding-bottom:14px;border-bottom:2px solid #8b1f1f;}
.ps-logo-box{background:#8b1f1f;color:#1a1c19;padding:8px 14px;border-radius:4px;font-size:11px;font-weight:700;line-height:1.3;}
.ps-company{font-size:20px;font-weight:800;color:#8b1f1f;text-align:center;flex:1;}
.ps-addr{font-size:10px;color:#666;text-align:center;margin-top:2px;}
.ps-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#ddd;border:1px solid #ddd;margin-bottom:14px;}
.ps-info-cell{background:#fff;padding:7px 10px;font-size:11px;}
.ps-info-label{font-weight:700;color:#333;}
.ps-info-val{color:#555;margin-top:1px;}
.ps-table-header{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-bottom:0;}
.ps-col-header{background:#8b1f1f;color:#1a1c19;padding:8px 12px;font-size:12px;font-weight:700;text-align:center;}
.ps-rows{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid #ddd;border-top:none;}
.ps-row{display:flex;justify-content:space-between;padding:6px 10px;border-bottom:1px solid #eee;font-size:11px;}
.ps-row:last-child{border-bottom:none;}
.ps-left{border-right:1px solid #ddd;}
.ps-total-row{display:grid;grid-template-columns:1fr 1fr;background:#f5f5f5;border:1px solid #ddd;border-top:2px solid #8b1f1f;}
.ps-total-cell{padding:8px 10px;font-size:12px;font-weight:700;}
.ps-net{display:grid;grid-template-columns:1fr 1fr;background:#8b1f1f;color:#1a1c19;margin-top:2px;border-radius:4px;}
.ps-net-label{padding:10px 12px;font-size:13px;font-weight:700;text-align:center;}
.ps-net-val{padding:10px 12px;font-size:14px;font-weight:800;text-align:center;}
.ps-sigs{display:flex;justify-content:space-between;margin-top:20px;padding-top:14px;border-top:1px solid #ddd;}
.ps-sig{font-size:11px;color:#666;}

/* PERFORMANCE TABLE */
.perf-table-wrap{overflow-x:auto;margin-bottom:14px;}
.perf-table{border-collapse:collapse;font-size:11px;width:100%;}
.perf-table th{background:#fff;padding:8px 10px;text-align:center;border:1px solid rgba(95,100,120,.12);font-size:10px;font-weight:700;color:var(--t3);white-space:nowrap;letter-spacing:.04em;}
.perf-table th.name-col{text-align:left;}
.perf-table td{padding:6px 10px;border:1px solid rgba(95,100,120,.12);text-align:center;font-family:var(--mono);font-size:11px;}
.perf-table td.name-col{text-align:left;font-family:var(--font);font-weight:500;color:var(--text);}
.perf-cell-high{background:rgba(74,222,128,.15);color:var(--green);font-weight:700;}
.perf-cell-mid{background:rgba(251,191,36,.12);color:var(--amber);}
.perf-cell-low{background:rgba(248,113,113,.15);color:var(--red);font-weight:700;}
.perf-cell-ok{background:rgba(74,222,128,.08);color:var(--t2);}

/* RIDER PORTAL */
.rider-portal{max-width:600px;margin:0 auto;}
.rp-card{background:rgba(255,255,255,.75);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(140,113,110,.12);border-radius:22px;padding:20px;margin-bottom:14px;position:relative;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.04),inset 0 1px 0 rgba(255,255,255,.7);transition:all .3s cubic-bezier(.34,1.56,.64,1);}
.rp-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 5%,rgba(255,255,255,.8) 30%,rgba(255,255,255,.9) 50%,rgba(255,255,255,.8) 70%,transparent 95%);}
.rp-card:hover{transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,.06);}
.rp-card-title{font-size:13px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:8px;}
.rp-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px;}
.rp-stat{background:rgba(255,255,255,.75);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:22px;padding:18px;text-align:center;border:1px solid rgba(140,113,110,.12);position:relative;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.04),inset 0 1px 0 rgba(255,255,255,.7);transition:all .3s cubic-bezier(.34,1.56,.64,1);}
.rp-stat::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 5%,rgba(255,255,255,.35) 30%,rgba(255,255,255,.45) 50%,rgba(255,255,255,.35) 70%,transparent 95%);}
.rp-stat:hover{transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,.06);}
.rp-stat-val{font-size:22px;font-weight:800;letter-spacing:-.5px;}
.rp-stat-label{font-size:10px;color:var(--t2);margin-top:2px;}
@media(max-width:480px){
  .rp-stat{padding:10px;border-radius:14px;}
  .rp-stat-val{font-size:17px;}
  .rp-stat-label{font-size:9px;}
  .rp-stat-grid{gap:6px;}
}
#rider-bottom-nav.active{display:flex !important;position:fixed !important;bottom:0 !important;left:0 !important;right:0 !important;z-index:98 !important;}
.advance-req-box{background:rgba(255,255,255,.75);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(95,100,120,.12);border-radius:18px;padding:16px;position:relative;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.04),inset 0 1px 0 rgba(255,255,255,.7);}
.advance-req-box::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 5%,rgba(255,255,255,.8) 30%,rgba(255,255,255,.9) 50%,rgba(255,255,255,.8) 70%,transparent 95%);}
.progress-bar{height:6px;background:rgba(58,58,60,.4);border-radius:3px;overflow:hidden;margin-top:4px;}
.progress-fill{height:100%;border-radius:3px;background:var(--acc);}

/* ── COURIER FULL PROFILE ─────────────────────────────────────── */
.cp-overlay{position:fixed;inset:0;background:var(--bg);z-index:200;display:none;overflow-y:auto;}
.cp-overlay.open{display:block;animation:slideInRight .5s var(--spring-snappy);}
@keyframes slideInRight{
  0%{opacity:0;transform:translateX(20px)}
  100%{opacity:1;transform:translateX(0)}
}
.cp-page{max-width:1200px;margin:0 auto;padding:0 0 60px;}
.cp-topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 28px;border-bottom:1px solid rgba(95,100,120,.12);position:sticky;top:0;background:var(--bg);z-index:10;}
.cp-back{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid rgba(95,100,120,.12);color:var(--t2);font-size:12px;font-weight:600;padding:7px 14px;border-radius:8px;cursor:pointer;font-family:var(--font);transition:all .15s;}
.cp-back:hover{color:var(--text);border-color:rgba(95,100,120,.12);}
.cp-topbar-actions{display:flex;gap:8px;}
.cp-topbar-mini{position:absolute;left:50%;top:50%;transform:translate(-50%,calc(-50% + 4px));display:flex;align-items:center;gap:9px;opacity:0;pointer-events:none;transition:opacity .25s var(--spring-smooth),transform .25s var(--spring-smooth);}
.cp-topbar-mini.show{opacity:1;transform:translate(-50%,-50%);}
.cp-tbm-avatar{width:26px;height:26px;border-radius:8px;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex-shrink:0;}
.cp-tbm-name{font-size:13px;font-weight:700;letter-spacing:-.2px;color:var(--text);white-space:nowrap;max-width:240px;overflow:hidden;text-overflow:ellipsis;}
.cp-tbm-score{font-size:11px;font-weight:800;padding:1px 8px;border-radius:999px;background:var(--s1);}
.cp-hstat-delta{font-size:10px;font-weight:700;margin-top:2px;min-height:11px;line-height:1.1;}
@media(max-width:640px){.cp-topbar-mini{display:none;}}
.cp-hero{display:flex;align-items:center;justify-content:space-between;padding:28px 28px 20px;border-bottom:1px solid rgba(95,100,120,.12);}
.cp-hero-left{display:flex;align-items:center;gap:18px;}
.cp-photo-wrap{position:relative;flex-shrink:0;}
.cp-avatar{width:68px;height:68px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;overflow:hidden;transition:all .2s;background-size:cover;background-position:center;}
.cp-photo-overlay{position:absolute;inset:0;border-radius:16px;background:rgba(0,0,0,.6);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;opacity:0;transition:opacity .15s;z-index:2;}
.cp-photo-wrap:hover .cp-photo-overlay{opacity:1;}
.cp-photo-wrap.is-active .cp-avatar{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--green);}
.cp-photo-wrap.is-warn   .cp-avatar{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--amber);}
.cp-photo-wrap.is-bad    .cp-avatar{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--red);}
.cp-photo-wrap.is-idle   .cp-avatar{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--t3);}
.cp-po-btn{display:flex;align-items:center;gap:5px;padding:4px 10px;border-radius:6px;font-size:10px;font-weight:600;color:#1a1c19;background:rgba(120,120,128,.32);border:none;cursor:pointer;font-family:var(--font);transition:background .12s;white-space:nowrap;}
.cp-po-btn:hover{background:rgba(255,255,255,.3);}
label.cp-po-btn{cursor:pointer;}

/* Photo position editor */
.photo-editor-overlay{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:300;display:none;align-items:center;justify-content:center;flex-direction:column;gap:16px;}
.photo-editor-overlay.open{display:flex;}
.photo-editor{width:280px;height:280px;border-radius:20px;overflow:hidden;position:relative;border:2px solid var(--b2);cursor:grab;background:var(--bg);}
.photo-editor:active{cursor:grabbing;}
.photo-editor img{position:absolute;user-select:none;-webkit-user-drag:none;pointer-events:none;}
.photo-editor-hint{font-size:12px;color:var(--t2);text-align:center;}
.photo-editor-actions{display:flex;gap:10px;}
.photo-editor-zoom{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid rgba(95,100,120,.12);border-radius:12px;padding:8px 14px;}
.photo-editor-zoom input[type="range"]{width:120px;accent-color:var(--acc);}
.photo-editor-zoom span{font-size:11px;color:var(--t3);font-weight:600;}

/* Fullscreen photo viewer */
.photo-viewer{position:fixed;inset:0;background:rgba(0,0,0,.7);/* heavy blur removed for perf */z-index:300;display:none;align-items:center;justify-content:center;cursor:zoom-out;}
.photo-viewer.open{display:flex;}
.photo-viewer img{max-width:80vw;max-height:80vh;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.06);}
.cp-hero-name{font-size:22px;font-weight:600;letter-spacing:-.01em;margin-bottom:7px;}
.cp-hero-meta{display:flex;align-items:center;flex-wrap:wrap;}
.cp-hero-stats{display:flex;align-items:stretch;border:1px solid #e2e3e7;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(40,30,20,.04),0 2px 8px rgba(40,30,20,.03);}
.cp-hstat{flex:1 1 0;min-width:0;padding:14px 18px;border-right:1px solid #eaebef;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;transition:background .16s;white-space:nowrap;}
.cp-hstat:last-child{border-right:none;}
.cp-hstat::after{content:'';position:absolute;inset:0;background:transparent;transition:background .14s;pointer-events:none;}
.cp-hstat:hover::after{background:rgba(40,30,20,.035);}
/* value block: currency prefix on its own tiny line above the number, so every cell aligns identically */
.cp-hstat-val{position:relative;display:flex;align-items:center;justify-content:center;height:44px;line-height:1;font-variant-numeric:tabular-nums;color:#211e1a;}
.cp-hstat-val .cp-cur{position:absolute;top:1px;left:0;right:0;text-align:center;font-size:10px;font-weight:600;letter-spacing:.05em;color:#b3aaa0;}
.cp-hstat-val>span:not(.cp-cur){font-size:22px;font-weight:650;letter-spacing:-.02em;}
.cp-hstat-val>div{position:absolute;left:0;right:0;bottom:-1px;text-align:center;font-size:9px;font-weight:600;line-height:1.1;opacity:.85;}
.cp-hstat-label{font-size:10px;font-weight:600;color:#a89f95;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;line-height:1.2;margin-top:9px;}
/* score cell: ring now sized to the number line, so no extra top padding */
.cp-hstat.cp-hs-score{padding-top:0;}
.cp-hstat.cp-hs-score .cp-hstat-val{height:44px;}
.cp-body{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;padding:20px 28px;}
.cp-col{}
.cp-card{background:#fff;border:1px solid rgba(95,100,120,.12);border-radius:14px;padding:16px;margin-bottom:12px;position:relative;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.04),inset 0 1px 0 rgba(255,255,255,.7);transition:all .3s cubic-bezier(.34,1.56,.64,1);}
.cp-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 5%,rgba(255,255,255,.20) 30%,rgba(255,255,255,.25) 50%,rgba(255,255,255,.20) 70%,transparent 95%);}
/* cp-card hover unified above */
@keyframes cpCardRise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.cp-cascade>.cp-card{animation:cpCardRise .45s var(--spring-snappy) both;}
.cp-cascade>.cp-card:nth-child(1){animation-delay:.03s;}
.cp-cascade>.cp-card:nth-child(2){animation-delay:.07s;}
.cp-cascade>.cp-card:nth-child(3){animation-delay:.11s;}
.cp-cascade>.cp-card:nth-child(4){animation-delay:.15s;}
.cp-cascade>.cp-card:nth-child(5){animation-delay:.19s;}
.cp-cascade>.cp-card:nth-child(6){animation-delay:.23s;}
.cp-cascade>.cp-card:nth-child(7){animation-delay:.27s;}
.cp-cascade>.cp-card:nth-child(8){animation-delay:.31s;}
.cp-cascade>.cp-card:nth-child(n+9){animation-delay:.34s;}
@media (prefers-reduced-motion: reduce){.cp-cascade>.cp-card{animation:none;}}
.cp-card-title{font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px;}
.cp-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid rgba(95,100,120,.12);}
.cp-row:last-of-type{border-bottom:none;}
.cp-key{font-size:12px;color:var(--t2);}
.cp-val{font-size:12px;font-weight:600;text-align:right;}
.cp-val.mono{font-family:var(--mono);}
.cp-perf-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:8px;}
.cp-perf-box{background:rgba(255,255,255,.75);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(95,100,120,.12);border-radius:18px;padding:12px;text-align:center;position:relative;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.04),inset 0 1px 0 rgba(255,255,255,.7);transition:all .3s cubic-bezier(.34,1.56,.64,1);}
.cp-perf-box::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 5%,rgba(255,255,255,.8) 30%,rgba(255,255,255,.9) 50%,rgba(255,255,255,.8) 70%,transparent 95%);}
.cp-perf-val{font-size:18px;font-weight:800;letter-spacing:-.5px;}
.cp-perf-lbl{font-size:10px;color:var(--t3);margin-top:3px;font-weight:600;text-transform:uppercase;}
.cp-link-btn{display:flex;align-items:center;background:none;border:none;color:var(--acc);font-size:11px;font-weight:700;cursor:pointer;padding:5px 0;font-family:var(--font);}
.cp-link-btn:hover{opacity:.7;}
.cp-list-item{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(95,100,120,.12);}
.cp-list-item:last-child{border-bottom:none;}
.cp-empty{font-size:12px;color:var(--t3);padding:8px 0;text-align:center;}

/* ── DASHBOARD ─────────────────────────────────────────────────── */
.dash-greeting{font-size:22px;font-weight:700;letter-spacing:-.5px;margin-bottom:14px;color:var(--text);}
.dash-greeting span{color:var(--acc);text-shadow:0 0 30px rgba(var(--acc-rgb),.15);}

.dash-kpi-row{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:16px;}
.dash-kpi{cursor:pointer;}
.dash-kpi::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(24,95,165,.03) 0%,transparent 50%,rgba(24,95,165,.02) 100%);opacity:0;transition:opacity var(--motion-normal) ease;pointer-events:none;}
.dash-kpi:hover::after{opacity:1;}
.dash-kpi-icon{width:36px;height:36px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:10px;}
.dash-kpi-val{font-size:32px;font-weight:800;letter-spacing:-1.5px;margin-bottom:2px;line-height:1;}
.dash-kpi-label{font-size:11px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.06em;}
.dash-kpi-sub{font-size:11px;color:var(--t2);margin-top:4px;}

.dash-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;}
.dash-section{
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(95,100,120,.12);
  border-radius:22px;
  padding:18px;margin-bottom:0;
  position:relative;overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.04),inset 0 1px 0 rgba(255,255,255,.7);
  transition:all .3s cubic-bezier(.34,1.56,.64,1);
}
.dash-section::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent 5%,rgba(255,255,255,.20) 30%,rgba(255,255,255,.25) 50%,rgba(255,255,255,.20) 70%,transparent 95%);
  border-radius:22px 22px 0 0;
}
.dash-section:hover{
  background:#f8f9fd;
  border-color:rgba(95,100,120,.12);
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  transform:translateY(-1px) scale(1.008);
}
.dash-section-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.dash-section-title{font-size:13px;font-weight:700;color:var(--text);}
.dash-section-count{font-size:11px;font-weight:700;color:var(--red);background:rgba(248,113,113,.12);padding:2px 8px;border-radius:12px;}
.dash-link{background:none;border:none;color:var(--acc);font-size:11px;font-weight:700;cursor:pointer;font-family:var(--font);}
.dash-link:hover{opacity:.7;}

/* Attention items */
.attn-item{display:flex;align-items:center;gap:12px;padding:12px 14px;background:rgba(255,255,255,.75);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(95,100,120,.12);border-radius:18px;margin-bottom:8px;cursor:pointer;position:relative;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.04),inset 0 1px 0 rgba(255,255,255,.7);transition:all .3s cubic-bezier(.34,1.56,.64,1);}
.attn-item::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 5%,rgba(255,255,255,.18) 30%,rgba(255,255,255,.22) 50%,rgba(255,255,255,.18) 70%,transparent 95%);}
.attn-item:hover{transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,.06);}
.attn-item:hover{background:rgba(255,255,255,.85);}
.attn-item:last-child{margin-bottom:0;}
.attn-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.attn-text{flex:1;font-size:13px;font-weight:600;}
.attn-sub{font-size:11px;color:var(--t2);margin-top:1px;}
.attn-chip{font-size:10px;font-weight:700;padding:3px 8px;border-radius:6px;flex-shrink:0;}

/* Fleet donut */
.dash-donut-wrap{display:flex;align-items:center;gap:20px;}
.dash-donut-legend{flex:1;}
.dash-legend-item{display:flex;align-items:center;justify-content:space-between;padding:5px 0;border-bottom:1px solid rgba(95,100,120,.12);}
.dash-legend-item:last-child{border-bottom:none;}
.dash-legend-dot{width:8px;height:8px;border-radius:50%;margin-right:7px;flex-shrink:0;}
.dash-legend-label{font-size:12px;color:var(--t2);display:flex;align-items:center;}
.dash-legend-val{font-size:13px;font-weight:700;}

.dash-pstat{background:rgba(255,255,255,.75);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(95,100,120,.12);border-radius:22px;padding:14px;position:relative;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.04),inset 0 1px 0 rgba(255,255,255,.7);transition:all .3s cubic-bezier(.34,1.56,.64,1);}
.dash-pstat::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 5%,rgba(255,255,255,.8) 30%,rgba(255,255,255,.9) 50%,rgba(255,255,255,.8) 70%,transparent 95%);border-radius:22px 22px 0 0;}
.dash-pstat:hover{background:#f8f9fd;border-color:rgba(139,26,26,.1);box-shadow:0 2px 8px rgba(0,0,0,.06);transform:translateY(-1px) scale(1.008);}
.dash-pstat-label{font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px;}
.dash-pstat-val{font-size:22px;font-weight:800;letter-spacing:-.5px;}

/* Expiry list */
.dash-expiry-item{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid rgba(95,100,120,.12);}
.dash-expiry-item:last-child{border-bottom:none;}
.dash-expiry-name{font-size:12px;font-weight:600;}
.dash-expiry-type{font-size:11px;color:var(--t2);}
.dash-expiry-days{font-size:12px;font-weight:700;padding:2px 8px;border-radius:6px;}

/* Recent fines */
.dash-fine-item{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid rgba(95,100,120,.12);}
.dash-fine-item:last-child{border-bottom:none;}

/* ── ADD FINE MODAL ───────────────────────────────────────────── */

/* ── GLOBAL PERIOD PICKER ─────────────────────────────────────── */
.period-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:rgba(95,100,120,.08);border:1px solid rgba(120,120,128,.24);color:var(--text);font-size:12px;font-weight:500;border-radius:8px;cursor:pointer;font-family:var(--font);transition:all .15s;}
.period-btn:hover{background:rgba(120,120,128,.28);}
.period-btn svg{color:var(--t3);flex-shrink:0;}
.gmp-overlay{position:fixed;inset:0;background:rgba(26,28,25,.25);z-index:250;display:none;align-items:center;justify-content:center;}
.gmp-overlay.open{display:flex;}
.gmp{background:rgba(255,255,255,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(95,100,120,.12);border-radius:16px;width:340px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.05),inset 0 1px 0 rgba(255,255,255,.7);animation:modalIn .22s cubic-bezier(.28,1,.52,1);}
.gmp-head{padding:18px 20px 14px;display:flex;align-items:center;justify-content:space-between;}
.gmp-title{font-size:14px;font-weight:700;letter-spacing:-.2px;}
.gmp-nav{display:flex;align-items:center;justify-content:space-between;padding:0 20px 14px;}
.gmp-year{font-size:18px;font-weight:800;letter-spacing:-.5px;color:var(--text);}
.gmp-arrow{width:32px;height:32px;border-radius:8px;border:1px solid rgba(95,100,120,.12);background:#fff;color:var(--t2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;font-size:14px;}
.gmp-arrow:hover{border-color:var(--t3);color:var(--text);background:rgba(58,58,60,.4);}
.gmp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:0 20px 20px;}
.gmp-month{padding:10px 4px;border-radius:10px;font-size:12px;font-weight:600;border:1px solid transparent;background:transparent;color:var(--t2);cursor:pointer;transition:all .12s;text-align:center;}
.gmp-month:hover{background:rgba(95,100,120,.06);color:var(--text);}
.gmp-month.selected{background:var(--acc);color:#fff;border-color:var(--acc);font-weight:700;}
.gmp-month.in-range{background:rgba(var(--acc-rgb),.12);color:var(--acc);border-color:rgba(var(--acc-rgb),.2);}
.gmp-month.preview{background:rgba(var(--acc-rgb),.08);color:var(--acc);border-color:rgba(var(--acc-rgb),.15);}
.gmp-month.preview.selected{background:var(--acc);color:#fff;border-color:var(--acc);}
.gmp-month.current:not(.selected):not(.in-range){border-color:var(--b2);color:var(--text);}
.gmp-month.disabled{color:var(--t3);opacity:.4;cursor:default;}
.gmp-month.disabled:hover{background:transparent;color:var(--t3);}
.gmp-hint{font-size:11px;color:var(--t3);text-align:center;padding:0 20px 16px;}

/* ── AI ASSISTANT ─────────────────────────────────────────── */
.ai-quick{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;background:rgba(120,120,128,.12);border:1px solid var(--glass-border);border-radius:12px;color:var(--t2);font-size:12px;font-weight:500;cursor:pointer;font-family:var(--font);transition:all .15s;/* no blur */}
.ai-quick:hover{background:rgba(120,120,128,.24);color:var(--text);border-color:var(--glass-border-light);}
.ai-quick:active{transform:scale(.97);}
.ai-quick svg{color:var(--blue);flex-shrink:0;}

.ai-chat-wrap{background:rgba(255,255,255,.75);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(95,100,120,.12);border-radius:16px;display:flex;flex-direction:column;height:calc(100vh - 300px);min-height:400px;box-shadow:0 1px 3px rgba(0,0,0,.04),inset 0 1px 0 rgba(255,255,255,.7);}
.ai-messages{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:16px;}
.ai-messages::-webkit-scrollbar{width:4px;}.ai-messages::-webkit-scrollbar-thumb{background:var(--b2);border-radius:2px;}

.ai-msg{display:flex;gap:10px;max-width:85%;}
.ai-msg.ai-user{align-self:flex-end;flex-direction:row-reverse;}
.ai-msg-avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:rgba(10,132,255,.15);color:var(--blue);}
.ai-msg.ai-user .ai-msg-avatar{background:rgba(var(--acc-rgb),.15);color:var(--acc);}
.ai-msg-name{font-size:11px;font-weight:600;color:var(--t3);margin-bottom:4px;}
.ai-msg.ai-user .ai-msg-name{text-align:right;}
.ai-msg-text{font-size:13px;line-height:1.6;color:var(--text);}
.ai-msg-text code{background:rgba(95,100,120,.08);padding:1px 5px;border-radius:4px;font-family:var(--mono);font-size:12px;}

.ai-msg-body{background:#f3f4f8;border:1px solid rgba(95,100,120,.2);border-radius:14px;padding:10px 14px;}
.ai-msg.ai-user .ai-msg-body{background:rgba(10,132,255,.08);border-color:rgba(10,132,255,.15);}

.ai-input-wrap{display:flex;align-items:center;gap:8px;padding:12px 16px;border-top:1px solid var(--glass-border);}
.ai-input{flex:1;background:rgba(95,100,120,.06);border:1px solid var(--glass-border);color:var(--text);font-family:var(--font);font-size:13px;padding:10px 14px;border-radius:12px;outline:none;transition:all .2s;}
.ai-input:focus{border-color:rgba(10,132,255,.5);box-shadow:0 0 0 3px rgba(10,132,255,.1);}
.ai-input::placeholder{color:var(--t3);}
.ai-send{width:36px;height:36px;border-radius:12px;border:none;background:var(--blue);color:#1a1c19;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0;}
.ai-send:hover{filter:brightness(1.1);}
.ai-send:active{transform:scale(.93);}

.ai-typing{display:flex;gap:4px;padding:4px 0;}
.ai-typing span{width:6px;height:6px;border-radius:50%;background:var(--t3);animation:aiDot 1.2s infinite;}
.ai-typing span:nth-child(2){animation-delay:.2s;}
.ai-typing span:nth-child(3){animation-delay:.4s;}
@keyframes aiDot{0%,60%,100%{opacity:.3;transform:scale(.8)}30%{opacity:1;transform:scale(1)}}

/* ── FLOATING AI ─────────────────────────────────────────── */
.ai-fab.hidden{transform:scale(0);opacity:0;pointer-events:none;}

.ai-panel{position:fixed;bottom:84px;right:24px;width:380px;height:520px;background:rgba(255,255,255,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(95,100,120,.12);border-radius:16px;display:flex;flex-direction:column;z-index:250;box-shadow:0 20px 60px rgba(0,0,0,.06),inset 0 1px 0 rgba(255,255,255,.7);opacity:0;visibility:hidden;transform:translateY(12px) scale(.95);transform-origin:bottom right;transition:all .35s cubic-bezier(.28,1,.52,1);}
.ai-panel.open{opacity:1;visibility:visible;transform:translateY(0) scale(1);}

.ai-panel-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--glass-border);}
.ai-panel-title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;}
.ai-panel-close{background:rgba(95,100,120,.08);border:1px solid var(--glass-border);color:var(--t2);width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;transition:all .15s;}
.ai-panel-close:hover{color:var(--text);background:rgba(120,120,128,.28);}

.ai-panel-quick{display:flex;flex-wrap:wrap;gap:6px;padding:12px 14px;border-bottom:1px solid var(--glass-border);}
.ai-pq{padding:5px 10px;background:rgba(120,120,128,.12);border:1px solid var(--glass-border);border-radius:8px;color:var(--t2);font-size:11px;font-weight:500;cursor:pointer;font-family:var(--font);transition:all .12s;}
.ai-pq:hover{background:rgba(120,120,128,.24);color:var(--text);}

.ai-panel-msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:12px;}
.ai-panel-msgs::-webkit-scrollbar{width:3px;}
.ai-panel-msgs::-webkit-scrollbar-thumb{background:var(--b2);border-radius:2px;}
.ai-panel-msgs .ai-msg{max-width:95%;}
.ai-panel-msgs .ai-msg-body{padding:8px 12px;font-size:12px;}
.ai-panel-msgs .ai-msg-text{font-size:12px;line-height:1.5;}
.ai-panel-msgs .ai-msg-avatar{width:24px;height:24px;font-size:10px;}

.ai-panel-input{display:flex;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid var(--glass-border);}
.ai-panel-input input{flex:1;background:rgba(95,100,120,.06);border:1px solid var(--glass-border);color:var(--text);font-family:var(--font);font-size:12px;padding:8px 12px;border-radius:8px;outline:none;transition:all .15s;}
.ai-panel-input input:focus{border-color:rgba(10,132,255,.5);box-shadow:0 0 0 2px rgba(10,132,255,.1);}
.ai-panel-input input::placeholder{color:var(--t3);}
.ai-panel-input button{width:32px;height:32px;border-radius:8px;border:none;background:var(--blue);color:#1a1c19;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s;flex-shrink:0;}
.ai-panel-input button:hover{filter:brightness(1.1);}
.ai-panel-input button:active{transform:scale(.9);}

/* ── AI SIDEBAR ──────────────────────────────────────────── */
.ai-sidebar{display:none !important;width:0;min-width:0;overflow:hidden;}
.ai-sidebar.open{width:360px;min-width:360px;}

.ais-head{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--glass-border);min-height:47px;}
.ais-title{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;}
.ais-title svg{color:var(--blue);}
.ais-model-sel{flex:1;display:flex;justify-content:center;}
.ais-model-badge{font-size:10px;font-weight:600;color:var(--t3);background:rgba(120,120,128,.12);border:1px solid var(--glass-border);padding:3px 8px;border-radius:5px;letter-spacing:.02em;}
.ais-model-drp{background:rgba(95,100,120,.08);border:1px solid var(--glass-border);color:var(--t2);font-family:var(--font);font-size:11px;padding:4px 8px;border-radius:6px;outline:none;cursor:pointer;font-weight:500;-webkit-appearance:none;appearance:none;text-align:center;min-width:80px;}
.ais-model-drp:hover{background:rgba(120,120,128,.28);color:var(--text);}
.ais-close{background:rgba(95,100,120,.08);border:1px solid var(--glass-border);color:var(--t3);width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .12s;}
.ais-close:hover{color:var(--text);background:rgba(120,120,128,.28);}

.ais-role-info{padding:8px 14px;border-bottom:1px solid var(--glass-border);font-size:10px;color:var(--t3);display:flex;align-items:center;gap:6px;}
.ais-role-dot{width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 4px rgba(48,209,88,.4);}

.ais-actions{display:flex;flex-wrap:wrap;gap:4px;padding:10px 14px;border-bottom:1px solid var(--glass-border);}
.ais-act{padding:4px 10px;background:rgba(0,0,0,.03);border:1px solid rgba(95,100,120,.2);border-radius:7px;color:var(--t2);font-size:10px;font-weight:500;cursor:pointer;font-family:var(--font);transition:all .12s;white-space:nowrap;}
.ais-act:hover{background:rgba(0,0,0,.06);color:var(--text);}

.ais-msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;}
.ais-msgs::-webkit-scrollbar{width:3px;}.ais-msgs::-webkit-scrollbar-thumb{background:var(--b2);border-radius:2px;}

.ais-welcome{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;text-align:center;padding:40px 20px;min-height:200px;}

.ais-msg{display:flex;gap:8px;max-width:100%;animation:fadeUp .2s ease;}
.ais-msg.user{flex-direction:row-reverse;}
.ais-msg-bub{padding:8px 12px;border-radius:14px;font-size:12px;line-height:1.5;max-width:85%;}
.ais-msg.bot .ais-msg-bub{background:rgba(120,120,128,.12);border:1px solid var(--glass-border);color:var(--text);}
.ais-msg.user .ais-msg-bub{background:rgba(10,132,255,.12);border:1px solid rgba(10,132,255,.2);color:var(--text);}
.ais-msg-bub code{background:rgba(95,100,120,.08);padding:1px 4px;border-radius:3px;font-family:var(--mono);font-size:11px;}
.ais-msg-bub strong{font-weight:600;}
.ais-msg-file{display:flex;align-items:center;gap:6px;padding:6px 10px;background:rgba(120,120,128,.12);border:1px solid var(--glass-border);border-radius:8px;font-size:11px;color:var(--t2);margin-bottom:4px;}

.ais-upload-preview{display:flex;align-items:center;gap:8px;padding:6px 14px;border-top:1px solid rgba(95,100,120,.1);background:#f3f4f8;}
.ais-upload-file{flex:1;font-size:11px;color:var(--t2);display:flex;align-items:center;gap:6px;overflow:hidden;}
.ais-upload-clear{background:none;border:none;color:var(--t3);cursor:pointer;font-size:12px;padding:2px;}
.ais-upload-clear:hover{color:var(--text);}

.ais-input-area{padding:10px 14px;border-top:1px solid var(--glass-border);}
.ais-input-row{display:flex;align-items:center;gap:6px;}
.ais-attach{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;cursor:pointer;color:var(--t3);transition:all .12s;}
.ais-attach:hover{color:var(--text);background:rgba(95,100,120,.08);}
.ais-inp{flex:1;background:rgba(95,100,120,.06);border:1px solid var(--glass-border);color:var(--text);font-family:var(--font);font-size:12px;padding:8px 12px;border-radius:8px;outline:none;transition:all .15s;}
.ais-inp:focus{border-color:rgba(10,132,255,.4);box-shadow:0 0 0 2px rgba(10,132,255,.08);}
.ais-inp::placeholder{color:var(--t3);}
.ais-send{width:32px;height:32px;border-radius:8px;border:none;background:var(--blue);color:#1a1c19;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s;flex-shrink:0;}
.ais-send:hover{filter:brightness(1.1);}
.ais-send:active{transform:scale(.9);}

.ais-toggle{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;border:1px solid var(--glass-border);background:rgba(120,120,128,.12);color:var(--t2);cursor:pointer;transition:all .15s;margin-right:8px;}
.ais-toggle:hover{background:rgba(10,132,255,.1);color:var(--blue);border-color:rgba(10,132,255,.2);}
.ais-toggle.active{background:rgba(10,132,255,.15);color:var(--blue);border-color:rgba(10,132,255,.3);}

.ais-typing{display:flex;gap:3px;padding:2px 0;}
.ais-typing span{width:5px;height:5px;border-radius:50%;background:var(--t3);animation:aiDot 1.2s infinite;}
.ais-typing span:nth-child(2){animation-delay:.2s;}
.ais-typing span:nth-child(3){animation-delay:.4s;}
@keyframes aiDot{0%,60%,100%{opacity:.3;transform:scale(.8)}30%{opacity:1;transform:scale(1)}}

/* ── OVERLAY ANIMATIONS ──────────────────────────────────── */

/* [5 Sep 2026] duplicate flat modalIn override removed — the spring keyframe on .modal is the one */
/* Morph animation — modal grows from source element */
.modal.morph-in,.modal.morphed{animation:none !important;transition:transform .4s cubic-bezier(.2,1,.3,1),opacity .3s ease,border-radius .4s cubic-bezier(.2,1,.3,1);}
.modal.morph-out{transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .25s ease,border-radius .35s cubic-bezier(.4,0,.2,1);}
.overlay.morphed{animation:none !important;opacity:1;}
.overlay.morphed .modal{animation:none !important;}
/* Courier profile morph */
.cp-overlay.morph-in,.cp-overlay.morphed{animation:none !important;transition:transform .45s cubic-bezier(.2,1,.3,1),opacity .3s ease,clip-path .45s cubic-bezier(.2,1,.3,1);}
.cp-overlay.morph-out{transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .25s ease,clip-path .35s cubic-bezier(.4,0,.2,1);}
@keyframes rowIn{
  0%{opacity:0;transform:translateX(-8px)}
  100%{opacity:1;transform:translateX(0)}
}
.row-anim{animation:rowIn .28s var(--spring-snappy) both;}
@keyframes countUp{from{opacity:0;transform:translateY(10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes slideRight{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:translateX(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@keyframes barGrow{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
/* glowPulse and breathe removed — infinite animations kill perf */

/* Animated number counter class */
.anim-num{animation:countUp .45s var(--spring-snappy) both;}
.anim-slide{animation:slideRight .4s var(--spring-snappy) both;}
.anim-scale{animation:scaleIn .35s var(--spring-snappy) both;}

/* Stagger delays */
.delay-1{animation-delay:.05s}.delay-2{animation-delay:.1s}.delay-3{animation-delay:.15s}
.delay-4{animation-delay:.2s}.delay-5{animation-delay:.25s}.delay-6{animation-delay:.3s}

/* Apple press effect on interactive elements */
.btn-p:active,.btn-g:active,.period-btn:active,.ais-act:active,.ai-pq:active,.fb:active,.drp:active{
  transform:scale(.96);transition:transform .08s ease;
}

/* Hover glow on cards */
/* [20 Oct 2026 design batch 2] cards stay pure white on hover (they washed grey and threw a heavy shadow) */
.cp-card:hover,.rp-card:hover,.info-card:hover{
  background:#fff;border-color:rgba(95,100,120,.2);box-shadow:0 4px 14px rgba(26,28,25,.07);
}

/* Table row press — tap feedback */
tbody tr[onclick]{cursor:pointer;transition:background .12s;}
tbody tr[onclick]:active{background:rgba(0,0,0,.02);}

/* Onboarding Steps */
.ob-steps{display:flex;gap:0;margin:16px 0;padding:0 28px;}
.ob-step{flex:1;text-align:center;position:relative;padding-bottom:8px;}
.ob-step-num{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;margin:0 auto 6px;border:2px solid var(--glass-border);color:var(--t3);background:var(--bg);position:relative;z-index:2;transition:all .4s ease;}
.ob-step.done .ob-step-num{background:var(--green);border-color:var(--green);color:#000;}
.ob-step.current .ob-step-num{background:var(--blue);border-color:var(--blue);color:#1a1c19;box-shadow:0 0 12px rgba(10,132,255,.3);}
.ob-step-label{font-size:9px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.04em;}
.ob-step.done .ob-step-label{color:var(--green);}
.ob-step.current .ob-step-label{color:var(--blue);}
.ob-step-line{position:absolute;top:14px;left:50%;right:-50%;height:2px;background:var(--glass-border);z-index:1;}
.ob-step.done .ob-step-line{background:var(--green);}
.ob-step:last-child .ob-step-line{display:none;}

.af-field{padding:10px 22px 0;} 
.af-field-full{grid-column:span 2;}
.af-label{font-size:10px;font-weight:600;color:var(--t2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;}
.af-required{color:var(--red);margin-left:2px;}
.af-inp{width:100%;background:#fff;border:1.5px solid rgba(95,100,120,.18);color:var(--text);font-family:var(--font);font-size:13px;padding:10px 14px;border-radius:10px;outline:none;transition:all .15s;box-sizing:border-box;color-scheme:light;box-shadow:0 1px 3px rgba(0,0,0,.04);}select.af-inp option{background:#fff;color:#1a1c19;}
/* [17 Jun 2026] Light-only app: pin EVERY native select popup so macOS dark mode can't paint inline-styled selects (e.g. P&L visa/bike modals) black. Mirrors the per-element fix .af-inp already uses. */
select{color-scheme:light;}
select option{background:#fff;color:#1a1c19;}
.af-inp:focus{border-color:rgba(10,132,255,.4);box-shadow:0 0 0 3px rgba(10,132,255,.1);background:rgba(255,255,255,.8);}
.af-inp::placeholder{color:var(--t3);}
.af-inp::placeholder{color:var(--t3);}
.af-inp.af-mono{font-family:var(--mono);font-weight:500;letter-spacing:.04em;font-size:13px;}
.af-source-row{display:flex;gap:8px;}
.af-source-btn{flex:1;padding:9px 12px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;border-radius:10px;border:1.5px solid rgba(95,100,120,.15);color:var(--t2);cursor:pointer;transition:all .2s var(--spring-snappy);background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.04);}
.af-source-btn:hover{border-color:var(--t3);color:var(--text);background:rgba(255,255,255,.9);transform:translateY(-1px);box-shadow:0 3px 10px rgba(0,0,0,.06);}
.af-source-btn.active{background:rgba(var(--acc-rgb),.12);color:var(--acc);border-color:rgba(var(--acc-rgb),.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 2px 6px rgba(var(--acc-rgb),.12);font-weight:700;}
.af-source-btn.active svg{color:var(--acc);}
.af-confirm-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid rgba(95,100,120,.12);}
.af-confirm-row:last-child{border-bottom:none;}
.af-confirm-key{font-size:12px;color:var(--t2);}
.af-confirm-val{font-size:12px;font-weight:700;}
.af-step-btn{width:38px;height:38px;border-radius:10px;border:1.5px solid rgba(95,100,120,.15);background:#fff;color:var(--t2);font-size:18px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s var(--spring-snappy);font-family:var(--font);line-height:1;box-shadow:0 1px 3px rgba(0,0,0,.04);}
.af-step-btn:hover{border-color:var(--t3);background:rgba(255,255,255,.95);color:var(--text);transform:translateY(-1px);box-shadow:0 3px 10px rgba(0,0,0,.06);}
.af-step-btn:active{transform:scale(.93);}

/* ── BULK ACTIONS ─────────────────────────────────────────────── */
input[type="checkbox"]{-webkit-appearance:none !important;appearance:none !important;width:16px !important;height:16px !important;border:1.5px solid rgba(95,100,120,.6) !important;border-radius:4px !important;background:#f3f4f8 !important;cursor:pointer;flex-shrink:0;position:relative;transition:all .15s ease;vertical-align:middle;}
input[type="checkbox"]:hover{border-color:rgba(26,28,25,.4) !important;background:rgba(0,0,0,.04) !important;}
input[type="checkbox"]:checked{background:linear-gradient(135deg,#8B1A1A,#A52020) !important;border-color:#58413f !important;box-shadow:0 0 6px rgba(255,255,255,.35) !important;}
input[type="checkbox"]:checked::after{content:'';position:absolute;left:4.5px;top:1.5px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}
.fn-cb{-webkit-appearance:none !important;appearance:none !important;width:16px !important;height:16px !important;border:1.5px solid rgba(255,255,255,.18) !important;border-radius:4px !important;background:#f3f4f8 !important;cursor:pointer;flex-shrink:0;position:relative;transition:all .15s ease;vertical-align:middle;}
.fn-cb:checked{background:linear-gradient(135deg,#8B1A1A,#A52020) !important;border-color:#58413f !important;}
.fn-cb:checked::after{content:'';position:absolute;left:4.5px;top:1.5px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}
/* [20 Oct 2026 design batch 1] the hidden bar used to slide only 120% of its own height, which
   no longer cleared its 24px bottom gap once the buttons wrapped to two lines — a thin white edge +
   shadow peeked up at the bottom-centre of EVERY page. Now it slides fully past the edge AND is
   visibility:hidden while idle (delayed so the slide-out still animates). */
.bulk-bar{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(calc(100% + 64px));
  background:rgba(255,255,255,.98);border:1px solid rgba(95,100,120,.12);border-radius:16px;
  padding:12px 18px;display:flex;align-items:center;gap:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.08),0 0 0 1px rgba(95,100,120,.06);
  z-index:300;transition:transform .25s cubic-bezier(.28,1.2,.52,1),visibility 0s linear .25s;
  visibility:hidden;pointer-events:none;
  min-width:520px;max-width:720px;}
.bulk-bar.visible{transform:translateX(-50%) translateY(0);visibility:visible;pointer-events:auto;
  transition:transform .25s cubic-bezier(.28,1.2,.52,1),visibility 0s;}
.bulk-count{font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;padding-right:10px;border-right:1px solid var(--b2);}
.bulk-count span{color:var(--acc);}
.bulk-actions{display:flex;gap:7px;flex:1;flex-wrap:wrap;}
.bulk-btn{display:flex;align-items:center;gap:5px;padding:7px 13px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;border:1px solid var(--b2);background:#fff;color:var(--t2);font-family:var(--font);transition:all .12s;white-space:nowrap;}
.bulk-btn:hover{color:var(--text);border-color:rgba(95,100,120,.12);}
.bulk-btn.helloo{background:rgba(232,197,71,.1);border-color:rgba(232,197,71,.3);color:var(--acc);}
.bulk-btn.helloo:hover{background:rgba(232,197,71,.2);}
.bulk-btn.easylease{background:rgba(96,165,250,.1);border-color:rgba(96,165,250,.3);color:var(--blue);}
.bulk-btn.easylease:hover{background:rgba(96,165,250,.2);}
.bulk-btn.rider{background:rgba(74,222,128,.1);border-color:rgba(74,222,128,.3);color:var(--green);}
.bulk-btn.rider:hover{background:rgba(74,222,128,.2);}
.bulk-btn.deduct{background:rgba(248,113,113,.1);border-color:rgba(248,113,113,.3);color:var(--red);}
.bulk-btn.deduct:hover{background:rgba(248,113,113,.2);}
.bulk-clear{background:none;border:none;color:var(--t3);font-size:18px;cursor:pointer;padding:0 4px;line-height:1;margin-left:4px;}
.bulk-clear:hover{color:var(--text);}

.copy-btn{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:4px;border:none;background:none;cursor:pointer;color:var(--t3);padding:0;margin-left:5px;vertical-align:middle;flex-shrink:0;transition:color .12s;}
.copy-btn:hover{color:var(--acc);}
.copy-btn svg{width:11px;height:11px;}

/* ── ANIMATED PARTICLE BACKGROUND ──────────────────────────── */
body { position: relative; }
#bg-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
body::before {
  content: '';
  position: fixed;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(40,20,80,.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ── Mobile sidebar overlay ── */
#sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(26,28,25,.25);
  backdrop-filter: blur(4px);
  z-index: 199; /* [20 Jun] above topbar (100) so the open menu dims the header too — no more topbar poking through */
}
#sidebar-overlay.active { display: block; }

/* ── Hamburger button ── */
#mob-menu-btn {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 0;
  flex-shrink: 0;
}
#mob-menu-btn span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all 0.3s ease;
}

#notif-bell { display: none; }

.notif-item {
  padding: 12px 20px;
  border-bottom: 1px solid rgba(0,0,0,.02);
  display: flex;
  gap: 12px;
  align-items: flex-start;
  transition: background .2s;
}
.notif-item:hover { background: rgba(255,255,255,.02); }
.notif-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(var(--acc-rgb),.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .sidebar-collapse-btn { display: none !important; }
  .sidebar {
    position: fixed !important;
    left: -280px !important;
    top: 0 !important;
    height: 100vh !important;
    z-index: 200 !important; /* [20 Jun] proper modal drawer above the topbar (matches supervisor drawer) */
    transition: left 0.3s cubic-bezier(.4,0,.2,1) !important;
    width: 260px !important;
  }
  
  .sidebar.mob-open {
    left: 0 !important;
    width: 260px !important;
    min-width: 260px !important;
    background: rgba(255,255,255,.98) !important;
    backdrop-filter: blur(40px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
    box-shadow: 8px 0 40px rgba(0,0,0,.08) !important;
  }
  .sidebar.mob-open .nav-label,
  .sidebar.mob-open .nav-sec-label,
  .sidebar.mob-open .nav-sec-arrow,
  .sidebar.mob-open .sidebar-brand-text,
  .sidebar.mob-open .sidebar-user-info,
  .sidebar.mob-open .nav-item span:not(.nav-icon) {
    display: initial !important;
  }
  .sidebar.mob-open .nav-item {
    justify-content: flex-start !important;
    padding: 8px 12px !important;
    gap: 10px !important;
  }
  .sidebar.mob-open .sidebar-brand::before {
    display: none !important;
  }
  
  .main {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 12px max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left)) !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .page-header { margin-bottom: 8px !important; gap: 6px !important; flex-wrap: wrap !important; }
  .page-title { font-size: 18px !important; }
  .page-sub { font-size: 9px !important; margin-top: 1px !important; }
  .page-header button, .page-header select, .page-header a, .page-header .btn-p, .page-header .btn-g, .page-header .pill-btn { font-size: 10px !important; padding: 5px 8px !important; border-radius: 8px !important; }
  .btn-p, .btn-g { font-size: 11px !important; padding: 6px 10px !important; }
  .pill-btn { font-size: 11px !important; padding: 5px 10px !important; }

  /* [20 Jun] Mobile horizontal-overflow fix - page-header & toolbar action rows.
     Outer rows already wrap, but their NESTED flex children (action-button row,
     pill groups) did not, so they ran off the right edge ('truncated'). Wrap the
     nested rows + filter pills; keep slider-backed status tabs on one scrollable
     row so the active-pill slider stays aligned. Shared classes => every page. */
  .page-header > div { flex-wrap: wrap !important; }
  .toolbar > div { flex-wrap: wrap; }
  .pill-group:not(.pill-slider-wrap) { flex-wrap: wrap !important; }
  .pill-slider-wrap { flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .pill-slider-wrap::-webkit-scrollbar { display: none; }
  
  .stats-row.s4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .stats-row.s3 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  
  .stats-row.s2 {
    grid-template-columns: 1fr 1fr !important;
  }
  
  /* Tables scroll horizontally on mobile */
  .tbl-wrap, table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    display: block !important;
  }
  
  /* Page header stacks on mobile */
  .page-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  
  /* Search bar full width */
  .search-bar, input[type="text"][id*="search"], input[type="search"] {
    width: 100% !important;
  }
  
  /* Buttons wrap on mobile */
  .page-head > div {
    flex-wrap: wrap !important;
    width: 100% !important;
  }
  
  /* Compact stat cards on mobile — fit in one row */
  .stat, .dash-kpi {
    padding: 10px 12px !important;
    min-width: 0 !important;
    border-radius: 14px !important;
  }
  .stat .stat-icon, .dash-kpi .dash-kpi-icon { display: none !important; }
  .stat-val { font-size: 1.1rem !important; }
  .stat-label { font-size: .55rem !important; letter-spacing: .04em !important; margin-bottom: 2px !important; }
  .stat-sub { font-size: .55rem !important; margin-top: 1px !important; }
  .dash-kpi-val { font-size: 1.1rem !important; }
  .dash-kpi-label { font-size: .55rem !important; }
  .dash-kpi-sub { font-size: .55rem !important; margin-top: 1px !important; }

  /* Stats rows: scroll horizontally in one line */
  .stats-row, .dash-kpi-row {
    display: flex !important;
    overflow-x: auto !important;
    gap: 6px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px !important;
  }
  .stats-row::-webkit-scrollbar, .dash-kpi-row::-webkit-scrollbar { display: none; }
  .stats-row > *, .dash-kpi-row > * {
    flex: 1 0 auto !important;
    min-width: 0 !important;
  }

  /* Dashboard chart grid: stack on mobile */
  .dash-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .dash-grid .dash-section[style*="grid-column"] {
    grid-column: span 1 !important;
  }

  /* Stats row with 5 cols */
  .stats-row.s5 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Mobile topbar: hamburger | logo | spacer | bell ── */
  .topbar {
    padding: env(safe-area-inset-top) calc(12px + env(safe-area-inset-right)) 0 calc(12px + env(safe-area-inset-left)) !important;
    height: calc(52px + env(safe-area-inset-top)) !important;
    gap: 10px !important;
  }
  .logo { font-size: 14px !important; }

  #mob-menu-btn {
    display: flex !important; /* [20 Jun] show hamburger on mobile for admin/staff; rider hides via inline JS */
  }

  #notif-bell {
    display: flex !important;
    position: static !important;
    width: 36px !important;
    height: 36px !important;
    flex-shrink: 0;
  }
  body.rider-mode #notif-bell {
    display: flex !important;
    border-radius: 16px !important;
    width: auto !important;
    height: auto !important;
  }
  /* Rider mode — subtle red borders on all cards, stats, sections */
  body.rider-mode .topbar { border-bottom-color: rgba(0,0,0,.05) !important; }
  body.rider-mode .rp-card:hover { border-color: rgba(0,0,0,.05) !important; background:rgba(139,26,26,.03) !important; box-shadow:0 2px 0 rgba(0,0,0,.04) inset,0 -1px 0 rgba(0,0,0,.03) inset,0 12px 40px rgba(0,0,0,.05),0 4px 12px rgba(0,0,0,.03) !important; }
  body.rider-mode .stat:hover { border-color: rgba(0,0,0,.04) !important; background:rgba(139,26,26,.03) !important; box-shadow:0 4px 12px rgba(0,0,0,.06) !important; }
  body.rider-mode .cp-card:hover, body.rider-mode .info-card:hover { background:rgba(139,26,26,.03) !important; border-color:rgba(0,0,0,.04) !important; box-shadow:inset 0 .5px 0 rgba(0,0,0,.02),0 4px 16px rgba(0,0,0,.15) !important; }
  body.rider-mode .main { -webkit-overflow-scrolling: touch; overscroll-behavior-y: auto; }

  /* Hide desktop-only topbar elements on mobile */
  .topbar > div:nth-child(3) { display: none !important; } /* back/fwd + breadcrumb */
  #theme-switcher-wrap { display: none !important; }
  #ais-toggle { display: none !important; }
  .user-menu-wrap { display: none !important; }

  /* Theme picker responsive */
  #theme-picker {
    right: -40px !important;
    min-width: 160px !important;
  }
}

@media (max-width: 480px) {
  .main { padding: 8px !important; padding-top: 8px !important; }
  .stat-val { font-size: 1rem !important; }
  .dash-kpi-val { font-size: 1rem !important; }
}

#mob-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 98;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border-top: 1px solid rgba(95,100,120,.1);
  padding: 8px 0 max(8px, env(safe-area-inset-bottom));
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

.mob-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.45);
  font-size: .65rem;
  padding: 4px 12px;
  cursor: pointer;
  transition: color .2s, transform .15s;
  flex: 1;
}

.mob-tab:active { transform: scale(0.9); }
.mob-tab.mob-tab-active { color: var(--acc); }
#rider-bottom-nav .mob-tab.mob-tab-active { color: #ff453a; }
#rider-bottom-nav .mob-tab.mob-tab-active svg { stroke: #ff453a; }
#supervisor-bottom-nav.active{display:flex !important;position:fixed !important;bottom:0 !important;left:0 !important;right:0 !important;z-index:98 !important;}
#supervisor-bottom-nav .mob-tab.mob-tab-active { color: #ff453a; }
#supervisor-bottom-nav .mob-tab.mob-tab-active svg { stroke: #ff453a; }
body.sup-mode #theme-switcher-wrap { display:none !important; }
body.sup-mode #user-menu-wrap { display:none !important; }
body.sup-mode #clock-in-btn { display:none !important; }
body.sup-mode #header-nav-area { display:none !important; }
body.sup-mode .sidebar-collapse-btn { display:none !important; }
body.sup-mode #notif-bell { display:flex !important; }
.sup-drawer-item{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;color:#58413f;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease;margin:1px 8px;}
.sup-drawer-item:hover,.sup-drawer-item:active{background:rgba(var(--di-r,139),var(--di-g,26),var(--di-b,26),.1);color:#1a1c19;box-shadow:0 0 12px rgba(var(--di-r,139),var(--di-g,26),var(--di-b,26),.12),inset 0 0 0 1px rgba(var(--di-r,139),var(--di-g,26),var(--di-b,26),.15);}
.sup-drawer-item svg{flex-shrink:0;opacity:.5;}
.sup-drawer-item:hover svg,.sup-drawer-item:active svg{opacity:1;filter:drop-shadow(0 0 3px rgba(var(--di-r,139),var(--di-g,26),var(--di-b,26),.4));}
.mob-tab-center { flex: 1.2; }

@media (max-width: 768px) {
  #mob-bottom-nav { display: none; } /* [20 Jun] admin/staff use the top hamburger -> full sidebar; removed broken white-on-white bottom nav */
  .main { padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important; }
  #map-zoom-btns { display: none !important; }

  /* [20 Jun] Mobile truncation fixes — shared components, so every page benefits */
  /* KPI/stat rows: wrap to ~3-per-row instead of overflowing off-screen (overrides inline repeat(N,1fr)) */
  .dash-kpi-row { grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)) !important; }
  /* Data tables: scroll horizontally so the last columns (status, IDs) are reachable, not clipped */
  .tbl { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
}

/* ── CUSTOM APPLE DATE PICKER ─────────────────────────────── */
.hd-date-trigger{display:flex;align-items:center;gap:6px;padding:6px 12px;background:rgba(0,0,0,.02);border:1px solid rgba(0,0,0,.03);border-radius:10px;cursor:pointer;transition:all .2s var(--spring-snappy);font-family:var(--font);font-size:12px;color:var(--text);user-select:none;position:relative;}
.hd-date-trigger:hover{background:rgba(0,0,0,.03);border-color:rgba(95,100,120,.18);}
.hd-date-trigger svg{opacity:.5;flex-shrink:0;}
.hd-date-trigger .hd-date-text{white-space:nowrap;}

.hd-cal-wrap{position:absolute;top:calc(100% + 8px);right:0;z-index:500;opacity:0;visibility:hidden;transform:translateY(-8px) scale(.96);transform-origin:top right;transition:all .25s var(--spring-snappy);}
.hd-cal-wrap.open{opacity:1;visibility:visible;transform:translateY(0) scale(1);}
.hd-cal{width:200px;background:rgba(255,255,255,.98);backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);border:1px solid rgba(95,100,120,.15);border-radius:12px;box-shadow:0 16px 48px rgba(0,0,0,.06),inset 0 .5px 0 rgba(0,0,0,.02);padding:8px;overflow:hidden;}
.hd-cal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.hd-cal-title{font-size:12px;font-weight:700;color:var(--text);letter-spacing:-.01em;}
.hd-cal-nav{display:flex;gap:2px;}
.hd-cal-nav button{width:24px;height:24px;border-radius:6px;border:none;background:transparent;color:var(--t2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s;font-size:11px;}
.hd-cal-nav button:hover{background:rgba(0,0,0,.03);color:var(--text);}
.hd-cal-nav button:active{transform:scale(.9);}
.hd-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;text-align:center;}
.hd-cal-dow{font-size:9px;font-weight:600;color:var(--t3);padding:3px 0;text-transform:uppercase;letter-spacing:.03em;}
.hd-cal-day{width:24px;height:24px;margin:0 auto;border-radius:6px;border:none;background:transparent;color:var(--t2);font-size:10px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s;font-family:var(--font);position:relative;}
.hd-cal-day:hover{background:rgba(0,0,0,.03);color:var(--text);}
.hd-cal-day:active{transform:scale(.88);transition-duration:.06s;}
.hd-cal-day.today{color:var(--acc);font-weight:700;}
.hd-cal-day.today::after{content:'';position:absolute;bottom:1px;width:3px;height:3px;border-radius:50%;background:var(--acc);}
.hd-cal-day.selected{background:var(--acc) !important;color:#fff !important;font-weight:700;box-shadow:0 2px 8px rgba(var(--acc-rgb),.3);}
.hd-cal-day.selected::after{display:none;}
.hd-cal-day.range-start{background:var(--acc) !important;color:#fff !important;font-weight:700;border-radius:6px 3px 3px 6px !important;box-shadow:0 2px 8px rgba(var(--acc-rgb),.3);}
.hd-cal-day.range-start::after{display:none;}
.hd-cal-day.range-end{background:var(--acc) !important;color:#fff !important;font-weight:700;border-radius:3px 6px 6px 3px !important;box-shadow:0 2px 8px rgba(var(--acc-rgb),.3);}
.hd-cal-day.range-end::after{display:none;}
.hd-cal-day.in-range{background:rgba(var(--acc-rgb),.15) !important;color:var(--text) !important;border-radius:3px !important;}
.hd-cal-day.in-range:hover{background:rgba(var(--acc-rgb),.25) !important;}
.hd-cal-day.range-preview{background:rgba(var(--acc-rgb),.08) !important;border-radius:3px !important;}
.hd-cal-day.other-month{color:var(--t3);opacity:.25;}
.hd-cal-day.has-data{color:var(--green);font-weight:700;}
.hd-cal-day.has-data::after{content:'';position:absolute;bottom:1px;width:3px;height:3px;border-radius:50%;background:var(--green);}
.hd-cal-day.has-data.selected::after,.hd-cal-day.has-data.range-start::after,.hd-cal-day.has-data.range-end::after{display:none;}
.hd-cal-day.other-month:hover{opacity:.5;}
.hd-cal-foot{display:flex;justify-content:space-between;align-items:center;margin-top:6px;padding-top:6px;border-top:1px solid rgba(0,0,0,.02);}
.hd-cal-foot button{border:none;background:transparent;font-size:10px;font-weight:600;cursor:pointer;padding:3px 8px;border-radius:6px;transition:all .12s;font-family:var(--font);}
.hd-cal-foot .hd-cal-clear{color:var(--t3);}
.hd-cal-foot .hd-cal-clear:hover{color:var(--text);background:rgba(0,0,0,.02);}
.hd-cal-foot .hd-cal-week{color:var(--blue);font-size:10px;}
.hd-cal-foot .hd-cal-week:hover{background:rgba(10,132,255,.12);}
.hd-cal-foot .hd-cal-today{color:var(--acc);}
.hd-cal-foot .hd-cal-today:hover{background:rgba(var(--acc-rgb),.12);}
.fetch-opt{display:block;width:100%;text-align:left;padding:8px 12px;border:none;background:transparent;color:var(--text);font-size:12px;font-weight:500;cursor:pointer;border-radius:8px;transition:all .12s;font-family:var(--font);}
.fetch-opt:hover{background:rgba(10,132,255,.12);color:#0a84ff;}
.fk-dow{font-size:9px;font-weight:600;color:var(--t3);padding:3px 0;text-transform:uppercase;letter-spacing:.03em;}
.fk-day{width:22px;height:22px;margin:0 auto;border-radius:6px;border:none;background:transparent;color:var(--t2);font-size:10px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s;font-family:var(--font);position:relative;}
.fk-day:hover{background:rgba(10,132,255,.15);color:#0a84ff;}
.fk-day.fk-today{color:#0a84ff;font-weight:700;}
.fk-day.fk-has-data{color:#0a84ff;font-weight:700;}
.fk-day.fk-has-data::after{content:'';position:absolute;bottom:1px;width:3px;height:3px;border-radius:50%;background:#0a84ff;}
.fk-day.fk-selected{background:rgba(10,132,255,.2) !important;color:#0a84ff !important;font-weight:700;}
.fk-day.fk-other{opacity:.25;}

/* Select Date calendar — all green (scoped to hd-cal-grid) */
#hd-cal-grid .fk-day:hover{background:rgba(48,209,88,.15);color:#30d158;}
#hd-cal-grid .fk-day.fk-today{color:#30d158;font-weight:700;}
#hd-cal-grid .fk-day.fk-today::after{background:#30d158;}
#hd-cal-grid .fk-day.fk-selected{background:rgba(48,209,88,.25) !important;color:#30d158 !important;font-weight:700;}
#hd-cal-grid .fk-day.fk-has-data{color:#30d158;}
#hd-cal-grid .fk-day.fk-has-data::after{background:#30d158;}
#adv-cal-grid .fk-day:hover,#fines-cal-grid .fk-day:hover{background:rgba(48,209,88,.15);color:#30d158;}
#adv-cal-grid .fk-day.fk-today,#fines-cal-grid .fk-day.fk-today{color:#30d158;font-weight:700;}
#adv-cal-grid .fk-day.fk-selected,#fines-cal-grid .fk-day.fk-selected{background:rgba(48,209,88,.25) !important;color:#30d158 !important;font-weight:700;}

/* Alert badges */
/* HELLOO-PERF-BADGE-GLASS-V1 */
.perf-badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:7px 14px;border-radius:11px;border:1px solid;
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  font-size:11px;font-weight:600;cursor:pointer;font-family:var(--font);
  transition:all .2s cubic-bezier(.2,1,.3,1);white-space:nowrap;
}
.perf-badge:hover{transform:translateY(-1px);}
.perf-badge:active{transform:scale(.97);}

.perf-badge-grey{
  border-color:rgba(95,100,120,.18);
  background:linear-gradient(180deg,rgba(255,255,255,.85) 0%,rgba(245,246,250,.65) 100%);
  color:#58413f;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(0,0,0,.04),0 3px 8px rgba(0,0,0,.04);
}
.perf-badge-grey.active{
  border-color:rgba(95,100,120,.32);
  background:linear-gradient(180deg,rgba(245,246,250,.95) 0%,rgba(236,237,241,.75) 100%);
  color:var(--text);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(0,0,0,.04),0 4px 12px rgba(0,0,0,.08);
}

.perf-badge-red{
  border-color:rgba(255,69,58,.28);
  background:linear-gradient(180deg,rgba(255,232,232,.82) 0%,rgba(255,210,210,.55) 100%);
  color:#c93826;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(0,0,0,.04),0 3px 8px rgba(255,69,58,.12);
}
.perf-badge-red:hover, .perf-badge-red.active{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(0,0,0,.04),0 8px 20px rgba(255,69,58,.22);
}
.perf-badge-red.active{
  border-color:rgba(255,69,58,.45);
  background:linear-gradient(180deg,rgba(255,220,220,.92) 0%,rgba(255,195,195,.70) 100%);
}

.perf-badge-yellow{
  border-color:rgba(255,159,10,.28);
  background:linear-gradient(180deg,rgba(255,243,200,.85) 0%,rgba(255,228,150,.6) 100%);
  color:#cc7a00;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(0,0,0,.04),0 3px 8px rgba(255,159,10,.12);
}
.perf-badge-yellow:hover, .perf-badge-yellow.active{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(0,0,0,.04),0 8px 20px rgba(255,159,10,.22);
}
.perf-badge-yellow.active{
  border-color:rgba(255,159,10,.45);
  background:linear-gradient(180deg,rgba(255,235,180,.95) 0%,rgba(255,215,120,.75) 100%);
}

.perf-badge-green{
  border-color:rgba(45,106,46,.40);
  background:linear-gradient(180deg,rgba(45,106,46,.20) 0%,rgba(45,106,46,.12) 100%);
  color:#1f4a20;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 2px rgba(0,0,0,.04),0 3px 8px rgba(45,106,46,.18);
}
.perf-badge-green:hover, .perf-badge-green.active{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 2px rgba(0,0,0,.04),0 8px 20px rgba(45,106,46,.32);
}
.perf-badge-green.active{
  border-color:rgba(45,106,46,.55);
  background:linear-gradient(180deg,rgba(45,106,46,.30) 0%,rgba(45,106,46,.18) 100%);
}

.perf-badge-count{font-weight:800;font-size:12px;}
.perf-badge-hidden{display:none;}

/* D1 fleet-status alert meter — glass segments (mirror .btn-glass-*) */
.perf-meter{flex:1 1 100%;width:100%;display:flex;flex-direction:column;gap:7px}
.perf-meter-bar{display:flex;gap:4px;height:24px}
.perf-meter-seg{display:flex;align-items:center;gap:5px;padding:0 10px;min-width:44px;overflow:hidden;border-radius:8px;border:1px solid;cursor:pointer;white-space:nowrap;font-size:11px;font-weight:600;transition:all .15s cubic-bezier(.2,1,.3,1)}
.perf-meter-seg b{font-weight:800}
.perf-meter-seg-lbl{overflow:hidden;text-overflow:ellipsis}
.perf-meter-seg svg{display:none}
.perf-meter-seg:active{transform:scale(.98)}
.perf-meter-seg.dim{opacity:.42}
.pm-good{border-color:rgba(45,106,46,.20);background:rgba(45,106,46,.10);color:#2d6a2e}
.pm-good:hover,.pm-good.active{background:rgba(45,106,46,.17);border-color:rgba(45,106,46,.34)}
.pm-action{border-color:rgba(229,57,53,.20);background:rgba(229,57,53,.08);color:#a72824}
.pm-action:hover,.pm-action.active{background:rgba(229,57,53,.14);border-color:rgba(229,57,53,.34)}
.pm-idle{border-color:rgba(95,100,120,.16);background:rgba(95,100,120,.06);color:#58413f}
.pm-idle:hover,.pm-idle.active{background:rgba(95,100,120,.1);border-color:rgba(95,100,120,.26)}
.perf-meter-reasons{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:11px;font-weight:600}
.perf-meter-rlbl{color:rgba(26,28,25,.4)}
.perf-meter-sep{color:rgba(26,28,25,.25)}
.perf-reason{cursor:pointer;border-radius:6px;padding:2px 6px;transition:all .15s}
.perf-reason:hover{background:rgba(26,28,25,.04);transform:translateY(-1px)}
.perf-reason.active{text-decoration:underline;text-underline-offset:2px;background:rgba(26,28,25,.05)}
.pr-crit{color:#991b1b}
.pr-warn{color:#8a5a00}

/* Resizable column handles */
.perf-col-resize{position:absolute;right:-2px;top:0;bottom:0;width:5px;cursor:col-resize;z-index:2;}
.perf-col-resize:hover,.perf-col-resize:active{background:rgba(var(--acc-rgb),.4);}
.perf-resizable-table th{overflow:hidden;text-overflow:ellipsis;}

/* DP Checker status bar */
#dp-checker-bar{padding:8px 16px;border-radius:10px;font-size:12px;display:flex;align-items:center;gap:6px;margin-bottom:12px;transition:all .3s ease}

/* Review mode */
.review-container{background:rgba(255,255,255,.98);border:1px solid rgba(95,100,120,.12);border-radius:20px;padding:28px;width:420px;max-width:95vw;backdrop-filter:blur(20px);box-shadow:0 12px 40px rgba(0,0,0,.08)}
.review-card{transition:transform .4s cubic-bezier(.2,1,.3,1),opacity .35s ease}
.review-card.swipe-right{transform:translateX(120%) rotate(8deg);opacity:0}
.review-card.swipe-left{transform:translateX(-120%) rotate(-8deg);opacity:0}
.review-btn-skip:hover{background:rgba(0,0,0,.02) !important;color:var(--text) !important}
.review-btn-approve:hover{filter:brightness(1.15)}

/* Fines screenshot modal overlay */
.fines-ss-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:10000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.2s}
.fines-ss-overlay.open{opacity:1;pointer-events:auto}
.fines-ss-overlay img{max-width:90vw;max-height:85vh;object-fit:contain;border-radius:8px;box-shadow:0 4px 40px rgba(0,0,0,0.5)}
.fines-ss-overlay .ss-close{position:absolute;top:16px;right:24px;color:white;font-size:32px;cursor:pointer;opacity:0.7;background:none;border:none;z-index:1}
.fines-ss-overlay .ss-close:hover{opacity:1}
.fines-ss-overlay .ss-nav{position:absolute;top:50%;transform:translateY(-50%);color:white;font-size:48px;cursor:pointer;opacity:0.6;background:none;border:none;user-select:none;padding:16px}
.fines-ss-overlay .ss-nav:hover{opacity:1}
.fines-ss-overlay .ss-nav.prev{left:12px}
.fines-ss-overlay .ss-nav.next{right:12px}
.fines-ss-overlay .ss-spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,0.2);border-top-color:white;border-radius:50%;animation:spin 0.8s linear infinite}
.fines-ss-overlay .ss-empty{color:rgba(255,255,255,0.6);font-size:15px;text-align:center}
.fines-ss-overlay .ss-counter{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,0.7);font-size:13px}
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

.dp-fm-item{padding:8px 12px;border-radius:8px;font-size:13px;cursor:pointer;color:var(--text);transition:background .15s}
.dp-fm-item:hover{background:rgba(0,0,0,.02)}

/* [18 Jun 2026] Applicant lockdown: when the public apply/join page is active, hide ALL
   portal navigation so an applicant can never reach internal pages via a stray nav button. */
body.apply-active #mob-bottom-nav,
body.apply-active #rider-bottom-nav,
body.apply-active #supervisor-bottom-nav,
body.apply-active #sidebar,
body.apply-active #mob-menu-btn,
body.apply-active #header-nav-area,
body.apply-active #theme-switcher-wrap,
body.apply-active #user-menu-wrap { display: none !important; }
/* [18 Jun 2026] ...but the applicant Exit button MUST stay visible on the apply page even when
   showApplyPage didn't style it (apply reached via the router). Smaller pill, kept on-screen. */
body.apply-active #applicant-exit-btn { display: flex !important; }

/* ── MOBILE WEBVIEW SAFE AREA EXTENSIONS (added 2026-04-28) ─── */
@media (max-width: 768px) {
  #rider-bottom-nav, #supervisor-bottom-nav, #mob-bottom-nav {
    padding-left: env(safe-area-inset-left) !important;
    padding-right: env(safe-area-inset-right) !important;
  }
}
@media (hover: none) and (pointer: coarse) {
  .stat:hover, .dash-kpi:hover, .cp-card:hover,
  .info-card:hover, .alert-item:hover, .attn-item:hover, .nav-item:hover {
    transform: none !important;
    box-shadow: 0 1px 3px rgba(26,28,25,.06) !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   RIDER PORTAL v8 (Apr 29 2026) — scoped under .rv8-*
   Cream blend header #fdf6f1, pure white body, liquid glass on interactive
   ═══════════════════════════════════════════════════════════ */

/* Outer wrap — only applies when inside #page-rider-portal */
#page-rider-portal .rv8-wrap{
  position:fixed; inset:0; background:#fff;
  display:flex; flex-direction:column;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter',system-ui,sans-serif;
  color:var(--text); letter-spacing:-.01em;
  overflow:hidden; padding-bottom:74px;
}
body.rider-mode #page-rider-portal .rv8-wrap{ z-index:50; }

/* HERO (cream) */
.rv8-hero{
  background:#fdf6f1;
  padding:14px 16px 12px;
  display:flex; align-items:center; gap:12px;
  border-bottom:.5px solid rgba(140,113,110,.14);
  padding-top:max(14px, env(safe-area-inset-top));
}
.rv8-hero-h{
  width:38px; height:38px; border-radius:7px;
  background:var(--acc); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 1px 2px rgba(139,26,26,.25);
  flex-shrink:0;
}
.rv8-hero-text{ flex:1; min-width:0; }
.rv8-hero-name{ font-size:16px; font-weight:800; color:var(--text); letter-spacing:-.01em; }
.rv8-hero-tag{ font-size:11px; font-weight:500; color:var(--muted); margin-top:1px; }
.rv8-hero-bell{
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); cursor:pointer; position:relative;
  flex-shrink:0;
}
.rv8-hero-bell svg{ width:20px; height:20px; }
.rv8-bell-dot{
  position:absolute; top:7px; right:7px;
  width:8px; height:8px; border-radius:50%;
  background:var(--acc); border:1.5px solid #fdf6f1;
}

/* SCROLL */
.rv8-scroll{
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:14px 16px 24px; background:#fff;
}

/* TAB visibility */
.rv8-tab{ display:none; }
.rv8-tab[style*="block"]{ display:block; }

/* CARDS (base) */
.rv8-card{
  background:#fff;
  border:.5px solid var(--line);
  border-radius:14px;
  padding:14px;
  margin-bottom:12px;
  box-shadow:0 1px 2px rgba(0,0,0,.02);
}
.rv8-card-h{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.rv8-card-t{ font-size:13px; font-weight:700; color:var(--text); }

/* GREET CARD */
.rv8-greet{
  background:#fdf6f1;
  border:.5px solid var(--line);
  border-radius:14px;
  padding:14px;
  margin-bottom:12px;
}
.rv8-greet-row{ display:flex; align-items:center; gap:12px; }
.rv8-avatar{
  width:52px; height:52px; border-radius:50%;
  background:var(--acc); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:22px; flex-shrink:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.15);
}
.rv8-avatar-lg{ width:64px; height:64px; font-size:26px; }
.rv8-greet-text{ flex:1; min-width:0; }
.rv8-greet-name{ font-size:16px; font-weight:700; color:var(--text); margin-bottom:4px; }

/* PILLS */
.rv8-pill{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px; border-radius:999px;
  font-size:11px; font-weight:600;
  background:rgba(0,0,0,.04); color:var(--muted);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.rv8-pill-active{ background:var(--green-soft); color:var(--green); }
.rv8-pill-active .rv8-dot{ width:6px; height:6px; border-radius:50%; background:var(--green); }
.rv8-pill-green{ background:var(--green-soft); color:var(--green); }
.rv8-pill-amber{ background:var(--amber-soft); color:var(--amber); }
.rv8-pill-red{ background:var(--pink-soft); color:var(--red); }

/* Empty state placeholder (Pass 3) */
.rv8-empty{ font-size:13px; color:var(--muted); padding:14px 4px; line-height:1.5; }

/* Skeleton hint — subtle pulse while data loads (Pass 3) */
@keyframes rv8-pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.6 } }
.rv8-loading .rv8-greet,
.rv8-loading .rv8-card{ animation:rv8-pulse 1.4s ease-in-out infinite; }
.rv8-pill-soft{ background:rgba(0,0,0,.04); color:var(--muted); }

/* CLOCK button */
.rv8-clock{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:.5px solid var(--line);
  border-radius:10px;
  padding:7px 12px;
  font-size:12px; font-weight:600; color:var(--text);
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 1px 2px rgba(0,0,0,.05);
  transition:transform .1s;
}
.rv8-clock:active{ transform:scale(.97); }
.rv8-clock.online{ background:var(--green); color:#fff; border-color:var(--green); }

/* MINI STATS */
.rv8-mini-stats{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:0; margin-top:14px; padding-top:14px; border-top:.5px solid var(--line); }
.rv8-mini{ text-align:center; padding:0 4px; border-right:.5px solid var(--line); }
.rv8-mini:last-child{ border-right:none; }
.rv8-mini-l{ font-size:10px; font-weight:500; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:3px; }
.rv8-mini-v{ font-size:14px; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; }
.rv8-mini-sm{ font-size:10px; color:var(--muted); font-weight:500; }

/* ACTION CARD (combined alerts) */
.rv8-action{ border-color:rgba(184,115,51,.25); background:linear-gradient(180deg,#fff,var(--amber-soft)); }
.rv8-badge{ font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; }
.rv8-badge-amber{ background:var(--amber); color:#fff; }
.rv8-action-row{ display:flex; align-items:center; gap:10px; padding:8px 0; border-top:.5px solid rgba(184,115,51,.15); font-size:13px; color:var(--text); }
.rv8-action-row:first-child{ border-top:none; padding-top:4px; }
.rv8-action-row-i{ width:18px; height:18px; flex-shrink:0; }

/* BALANCE */
.rv8-balance{ background:linear-gradient(180deg,#fff,var(--pink-soft)); border-color:rgba(153,27,27,.18); }
.rv8-bal-l{ font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px; }
.rv8-bal-row{ display:flex; align-items:center; justify-content:space-between; }
.rv8-bal-amt{ font-size:22px; font-weight:800; color:var(--red); font-variant-numeric:tabular-nums; }

/* PAYSLIP */
.rv8-pay-period{ font-size:12px; font-weight:500; color:var(--muted); margin-bottom:4px; }
.rv8-pay-amt{ font-size:24px; font-weight:800; color:var(--text); font-variant-numeric:tabular-nums; margin-bottom:10px; }
.rv8-pay-bar{ height:6px; background:rgba(0,0,0,.05); border-radius:3px; overflow:hidden; margin-bottom:10px; }
.rv8-pay-bar-fill{ height:100%; background:linear-gradient(90deg,var(--green),#5dad5e); border-radius:3px; transition:width .4s; }
.rv8-pay-foot{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.rv8-pay-l{ font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:3px; }
.rv8-pay-v{ font-size:14px; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; }
.rv8-pay-v-red{ color:var(--red); }

/* BIKE */
.rv8-bike-row{ display:flex; align-items:center; gap:12px; margin:8px 0; }
.rv8-plate{ background:#fff; border:1.5px solid #000; border-radius:6px; padding:6px 10px; min-width:90px; text-align:center; flex-shrink:0; }
.rv8-plate-code{ font-size:9px; font-weight:600; color:#000; line-height:1; margin-bottom:2px; }
.rv8-plate-num{ font-size:18px; font-weight:800; color:#000; line-height:1; font-variant-numeric:tabular-nums; }
.rv8-bike-meta{ flex:1; }
.rv8-bike-model{ font-size:13px; font-weight:600; color:var(--text); }
.rv8-bike-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.rv8-chip{ font-size:11px; font-weight:600; padding:4px 9px; border-radius:999px; }
.rv8-chip-amber{ background:var(--amber-soft); color:var(--amber); }
.rv8-chip-red{ background:var(--pink-soft); color:var(--red); }
.rv8-chip-grey{ background:rgba(0,0,0,.04); color:var(--muted); }

/* ACTIVITY */
.rv8-act-row{ display:flex; align-items:center; gap:10px; padding:8px 0; border-top:.5px solid var(--line); font-size:13px; }
.rv8-act-row:first-child{ border-top:none; padding-top:4px; }
.rv8-act-i{ width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:rgba(0,0,0,.03); }
.rv8-act-i svg{ width:16px; height:16px; color:var(--muted); }
.rv8-act-text{ flex:1; min-width:0; }
.rv8-act-t{ font-weight:600; color:var(--text); }
.rv8-act-s{ font-size:11px; color:var(--muted); margin-top:1px; }
.rv8-act-time{ font-size:11px; color:var(--muted); white-space:nowrap; }

/* TIP */
.rv8-tip{ background:#fdf6f1; border-color:rgba(140,113,110,.18); }
.rv8-tip-row{ display:flex; align-items:flex-start; gap:10px; }
.rv8-tip-h{ width:28px; height:28px; border-radius:7px; background:var(--acc); color:#fff; font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.rv8-tip-text{ font-size:13px; color:var(--text); line-height:1.45; }

/* QUICK ACTIONS */
.rv8-quick{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:6px; }
.rv8-q-btn{
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:.5px solid var(--line);
  border-radius:12px;
  padding:14px 12px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  font-size:12px; font-weight:600; color:var(--text); cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 1px 3px rgba(0,0,0,.04);
  transition:transform .1s;
  position:relative; overflow:hidden;
}
.rv8-q-btn::before{
  content:''; position:absolute; top:0; left:0; right:0; height:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.5),transparent);
  pointer-events:none;
}
.rv8-q-btn:active{ transform:scale(.97); }
.rv8-q-btn svg{ width:20px; height:20px; color:var(--acc); }

/* SUPPORT — help rows */
.rv8-help-row{
  display:flex; align-items:center; gap:12px;
  padding:12px 0; border-top:.5px solid var(--line);
  text-decoration:none; color:var(--text);
}
.rv8-help-row:first-of-type{ border-top:none; }
.rv8-help-row svg{ width:22px; height:22px; color:var(--green); flex-shrink:0; }
.rv8-help-t{ font-size:13px; font-weight:600; color:var(--text); }
.rv8-help-s{ font-size:11px; color:var(--muted); margin-top:1px; }

/* PROFILE */
.rv8-prof-hero{ display:flex; align-items:center; gap:14px; }
.rv8-prof-name{ font-size:18px; font-weight:800; color:var(--text); }
.rv8-prof-sub{ font-size:12px; color:var(--muted); margin-top:2px; }
.rv8-info-row{ display:flex; justify-content:space-between; padding:10px 0; border-top:.5px solid var(--line); font-size:13px; }
.rv8-info-row:first-of-type{ border-top:none; }
.rv8-info-row span:first-child{ color:var(--muted); }
.rv8-info-row span:last-child{ color:var(--text); font-weight:600; font-variant-numeric:tabular-nums; }
.rv8-signout{
  width:100%; margin-top:12px;
  background:transparent; border:.5px solid var(--line); border-radius:10px;
  padding:11px; font-size:13px; font-weight:600; color:var(--red); cursor:pointer;
}

/* COMING SOON */
.rv8-soon{
  background:#fdf6f1;
  border:.5px dashed var(--line);
  border-radius:14px;
  padding:30px 20px;
  text-align:center;
  margin-bottom:12px;
}
.rv8-soon-h{ font-size:16px; font-weight:700; color:var(--text); margin-bottom:6px; }
.rv8-soon-t{ font-size:12px; color:var(--muted); line-height:1.5; margin-bottom:14px; }

/* BOTTOM NAV v8 — replaces #rider-bottom-nav inline styles */
/* Gated to body.rider-mode so admins/supervisors never see the rider nav. */
body.rider-mode #rider-bottom-nav.rv8-bnav{
  background:#fff !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border-top:.5px solid var(--line) !important;
  padding:6px 0 max(6px, env(safe-area-inset-bottom)) !important;
  display:flex !important;
}
body:not(.rider-mode) #rider-bottom-nav.rv8-bnav{ display:none !important; }
#rider-bottom-nav.rv8-bnav .rv8-bn{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  padding:6px 4px; background:transparent; border:none; cursor:pointer;
  font-size:10px; font-weight:600; color:var(--muted);
  transition:color .15s;
}
#rider-bottom-nav.rv8-bnav .rv8-bn svg{ width:22px; height:22px; }
#rider-bottom-nav.rv8-bnav .rv8-bn .rv8-aed{ font-size:13px; font-weight:800; font-family:'SF Mono','Menlo',monospace; letter-spacing:-.5px; }
#rider-bottom-nav.rv8-bnav .rv8-bn.active{ color:var(--acc); }
#rider-bottom-nav.rv8-bnav .rv8-bn-h{
  width:56px; flex:0 0 56px; display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; cursor:pointer; padding:0;
}
#rider-bottom-nav.rv8-bnav .rv8-bn-h-bubble{
  width:48px; height:48px; border-radius:50%;
  background:var(--acc); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:20px;
  box-shadow:0 4px 12px rgba(139,26,26,.35), inset 0 1px 0 rgba(255,255,255,.2);
}

/* HIDE the old admin chrome when in rider mode (preserved from existing) */
body.rider-mode .desktop-sidebar,
body.rider-mode #mobile-menu-toggle,
body.rider-mode .theme-switcher,
body.rider-mode .topbar{ display:none !important; }

/* TRANSFORM-FIX MAY 1 — kills containing-block bug on rider portal
   .page.page-enter animation ends with transform:translateY(0) which creates
   a new containing block, breaking position:fixed on .rv8-wrap inside.
   Result: .rv8-scroll collapses to ~38px instead of filling viewport.
   Fix: force transform:none on rider portal page so .rv8-wrap is positioned
   relative to the actual viewport. TRANSFORM-FIX END */
#page-rider-portal,
#page-rider-portal.active,
#page-rider-portal.page-enter {
  transform: none !important;
  animation: none !important;
  opacity: 1 !important;
}
/* NAV-ICON-FIX MAY 1 — active state for home bubble (was missing) NAV-ICON-FIX END */
#rider-bottom-nav.rv8-bnav .rv8-bn-h.active .rv8-bn-h-bubble {
  background: var(--acc) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(139,26,26,.35), inset 0 1px 0 rgba(255,255,255,.2) !important;
  transform: translateY(-2px);
}
#rider-bottom-nav.rv8-bnav .rv8-bn-h .rv8-bn-h-bubble {
  transition: all .2s cubic-bezier(.4,0,.2,1);
}

/* TAP-FIX MAY1 START — kill browser default tap/focus highlight on rider bottom nav */
#rider-bottom-nav.rv8-bnav button,
#rider-bottom-nav.rv8-bnav .rv8-bn,
#rider-bottom-nav.rv8-bnav .rv8-bn-h{
  -webkit-tap-highlight-color: transparent !important;
}
#rider-bottom-nav.rv8-bnav button:focus,
#rider-bottom-nav.rv8-bnav button:active,
#rider-bottom-nav.rv8-bnav button:focus-visible,
#rider-bottom-nav.rv8-bnav .rv8-bn:focus,
#rider-bottom-nav.rv8-bnav .rv8-bn:active,
#rider-bottom-nav.rv8-bnav .rv8-bn-h:focus,
#rider-bottom-nav.rv8-bnav .rv8-bn-h:active{
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}
/* Re-assert bubble fill when home button has focus/active/active-class so H stays visible */
#rider-bottom-nav.rv8-bnav .rv8-bn-h:focus .rv8-bn-h-bubble,
#rider-bottom-nav.rv8-bnav .rv8-bn-h:active .rv8-bn-h-bubble,
#rider-bottom-nav.rv8-bnav .rv8-bn-h.active .rv8-bn-h-bubble{
  background: #8B1A1A !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(139,26,26,.35), inset 0 1px 0 rgba(255,255,255,.2) !important;
}
/* Page transition: kill any lingering hover/focus background on .page during enter */
.page.page-enter, .page.page-leave{
  -webkit-tap-highlight-color: transparent !important;
}
/* TAP-FIX MAY1 END */

/* BUBBLE-FIX MAY1 START - H brand bubbles maroon, avatars golden (per design) */

/* H BRAND BUBBLES - maroon (header + bottom nav + tip H) */
#page-rider-portal .rv8-hero-h{
  background:#8B1A1A !important; color:#fff !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
}
#rider-bottom-nav.rv8-bnav .rv8-bn-h-bubble{
  background:#8B1A1A !important; color:#fff !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
}
#page-rider-portal .rv8-tip-h{
  background:#8B1A1A !important; color:#fff !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
}

/* USER AVATAR - golden gradient + initial (NOT the H brand mark) */
#page-rider-portal .rv8-avatar,
#page-rider-portal .rv8-avatar-lg{
  background: linear-gradient(135deg, #c9a87c, #8a6f4a) !important;
  color:#fff !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  font-weight:700 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 3px rgba(0,0,0,.1) !important;
}

/* BOTTOM NAV active state visibility */
#rider-bottom-nav.rv8-bnav .rv8-bn{
  visibility:visible !important; opacity:1 !important;
}
#rider-bottom-nav.rv8-bnav .rv8-bn.active{
  color:#8B1A1A !important; font-weight:800 !important;
}
#rider-bottom-nav.rv8-bnav .rv8-bn.active svg{ stroke-width:2.2 !important; }
#rider-bottom-nav.rv8-bnav .rv8-bn.active .rv8-aed{ color:#8B1A1A !important; }
/* BUBBLE-FIX MAY1 END */

/* DESIGN-MATCH MAY1 START - bring home tab in line with home-refined.html */
/* Score in blue per design */
#page-rider-portal #rv8-score{ color:var(--accent) !important; font-weight:800 !important; }
#page-rider-portal .rv8-mini:last-child .rv8-mini-sm{ color:var(--muted) !important; }

/* Tip card 3px maroon left border */
#page-rider-portal .rv8-tip{ border-left:3px solid #8B1A1A !important; }

/* Activity icon color variants */
#page-rider-portal .rv8-act-i.rv8-i-blue{ background:rgba(24,95,165,.12) !important; }
#page-rider-portal .rv8-act-i.rv8-i-blue svg{ color:var(--accent) !important; stroke:var(--accent) !important; }
#page-rider-portal .rv8-act-i.rv8-i-green{ background:rgba(45,106,46,.14) !important; }
#page-rider-portal .rv8-act-i.rv8-i-green svg{ color:#2d6a2e !important; stroke:#2d6a2e !important; }
#page-rider-portal .rv8-act-i.rv8-i-amber{ background:rgba(184,115,51,.14) !important; }
#page-rider-portal .rv8-act-i.rv8-i-amber svg{ color:#B87333 !important; stroke:#B87333 !important; }
#page-rider-portal .rv8-act-i.rv8-i-red{ background:rgba(153,27,27,.12) !important; }
#page-rider-portal .rv8-act-i.rv8-i-red svg{ color:#991b1b !important; stroke:#991b1b !important; }

/* Eye-style accent line before card titles (matches design) */
#page-rider-portal .rv8-card-t::before{
  content:''; display:inline-block; width:16px; height:2px;
  background:#8B1A1A; border-radius:2px; vertical-align:middle;
  margin-right:8px; margin-bottom:2px;
}

/* Brand footer */
#page-rider-portal .rv8-brand-footer{
  text-align:center; margin:18px 0 4px; padding:6px 0;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
#page-rider-portal .rv8-brand-footer .rv8-brand-tag{
  font-style:italic; color:#8B1A1A; font-weight:700; font-size:14px; letter-spacing:-.02em;
}
#page-rider-portal .rv8-brand-footer .rv8-brand-dot{
  width:3px; height:3px; border-radius:50%; background:var(--muted);
}
#page-rider-portal .rv8-brand-footer .rv8-brand-text{
  font-size:11px; color:var(--muted); font-weight:500;
}
/* DESIGN-MATCH MAY1 END */

/* Status badges - glass recipe matching platform pills */
.sb{display:inline-block;padding:3px 10px;border-radius:6px;font-size:10px;font-weight:700;font-family:var(--mono);text-transform:capitalize;letter-spacing:.02em;}
.sb-pending{background:linear-gradient(180deg,rgba(255,243,200,.85) 0%,rgba(255,228,150,.6) 100%);color:#8a5a00;border:1px solid rgba(184,115,51,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(0,0,0,.04),0 2px 6px rgba(184,115,51,.1);}
.sb-approved,.sb-active,.sb-paid,.sb-resolved{background:linear-gradient(180deg,rgba(220,250,235,.85) 0%,rgba(190,240,215,.6) 100%);color:#2d6a2e;border:1px solid rgba(45,106,46,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(0,0,0,.04),0 2px 6px rgba(45,106,46,.1);}
.sb-rejected,.sb-suspended,.sb-cancelled,.sb-escalated{background:linear-gradient(180deg,rgba(255,232,232,.85) 0%,rgba(255,210,210,.6) 100%);color:#8B1A1A;border:1px solid rgba(139,26,26,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(0,0,0,.04),0 2px 6px rgba(139,26,26,.1);}
.sb-onboarding,.sb-processing,.sb-confirmed{background:linear-gradient(180deg,rgba(232,243,255,.85) 0%,rgba(210,228,255,.6) 100%);color:var(--accent);border:1px solid rgba(24,95,165,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(0,0,0,.04),0 2px 6px rgba(24,95,165,.1);}
.sb-inactive,.sb-draft,.sb-archived{background:linear-gradient(180deg,rgba(243,244,248,.85) 0%,rgba(228,229,233,.6) 100%);color:#666;border:1px solid rgba(95,100,120,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(0,0,0,.04);}

/* HELLOO-SAL-TOGGLE-NEUTRAL-V1 */
/* Salary Lock Period & Filter buttons — white/neutral default, colored on hover OR .active */
.sal-toggle-neutral{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 16px;border-radius:11px;
  border:1px solid rgba(95,100,120,.18);
  background:linear-gradient(180deg,rgba(255,255,255,.85) 0%,rgba(245,246,250,.65) 100%);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  color:#58413f;
  font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(0,0,0,.04),0 3px 8px rgba(0,0,0,.04);
  transition:all .2s cubic-bezier(.2,1,.3,1);
}
.sal-toggle-neutral:hover{transform:translateY(-1px);}
.sal-toggle-neutral:active{transform:scale(.97);}

/* AMBER variant — Lock Period */
.sal-toggle-amber:hover, .sal-toggle-amber.active{
  border-color:rgba(255,159,10,.28);
  background:linear-gradient(180deg,rgba(255,209,60,.18) 0%,rgba(255,159,10,.10) 100%);
  color:#cc7a00;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(0,0,0,.04),0 8px 20px rgba(255,159,10,.22);
}

/* CRIMSON variant — Filter (was purple #bf5af2: off-palette, read as alien
   against the silk-crimson/copper/cream language; 09 Jul 2026) */
.sal-toggle-purple:hover, .sal-toggle-purple.active{
  border-color:rgba(139,26,26,.28);
  background:linear-gradient(180deg,rgba(139,26,26,.10) 0%,rgba(139,26,26,.05) 100%);
  color:#8B1A1A;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(0,0,0,.04),0 8px 20px rgba(139,26,26,.16);
}

/* HELLOO-GLASS-BTN-CLASSES-V1 */
/* Reusable glass button classes — replace btn-p across the app */
.btn-glass-green, .btn-glass-maroon, .btn-glass-blue, .btn-glass-neutral, .btn-glass-amber, .btn-glass-red {
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 16px;border-radius:11px;
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font);
  transition:all .2s cubic-bezier(.2,1,.3,1);
}
.btn-glass-green:active, .btn-glass-maroon:active, .btn-glass-blue:active, .btn-glass-neutral:active, .btn-glass-amber:active, .btn-glass-red:active {
  transform:scale(.97);
}

/* GREEN — create actions (+ New X, + Add X, Submit) */
.btn-glass-green {
  border:1px solid rgba(45,106,46,.40);
  background:linear-gradient(180deg,rgba(45,106,46,.20) 0%,rgba(45,106,46,.12) 100%);
  color:#1f4a20;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 2px rgba(0,0,0,.04),0 3px 8px rgba(45,106,46,.18);
}
.btn-glass-green:hover {
  transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 2px rgba(0,0,0,.04),0 8px 20px rgba(45,106,46,.32);
}

/* MAROON — commit/warning actions (Confirm, Save, Issue, Apply, Assign) */
.btn-glass-maroon {
  border:1px solid rgba(139,26,26,.28);
  background:linear-gradient(180deg,rgba(255,232,232,.82) 0%,rgba(255,210,210,.55) 100%);
  color:#8B1A1A;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(0,0,0,.04),0 3px 8px rgba(139,26,26,.12);
}
.btn-glass-maroon:hover {
  transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(0,0,0,.04),0 8px 20px rgba(139,26,26,.22);
}

/* BLUE — navigation (Live Map, Attendance, Export) */
.btn-glass-blue {
  border:1px solid rgba(24,95,165,.28);
  background:linear-gradient(180deg,rgba(232,243,255,.82) 0%,rgba(210,228,255,.55) 100%);
  color:var(--accent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(0,0,0,.04),0 3px 8px rgba(24,95,165,.12);
}
.btn-glass-blue:hover {
  transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(0,0,0,.04),0 8px 20px rgba(24,95,165,.22);
}

/* AMBER — warning actions (Start Offboarding, Mark for Review) */
.btn-glass-amber {
  border:1px solid rgba(184,115,51,.32);
  background:linear-gradient(180deg,rgba(255,243,200,.82) 0%,rgba(255,228,150,.55) 100%);
  color:#8a5a00;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(0,0,0,.04),0 3px 8px rgba(184,115,51,.14);
}
.btn-glass-amber:hover {
  transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(0,0,0,.04),0 8px 20px rgba(184,115,51,.26);
}

/* RED — destructive actions (Suspend, Delete) */
.btn-glass-red {
  border:1px solid rgba(229,57,53,.32);
  background:linear-gradient(180deg,rgba(255,225,222,.82) 0%,rgba(255,200,195,.55) 100%);
  color:#a72824;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(0,0,0,.04),0 3px 8px rgba(229,57,53,.14);
}
.btn-glass-red:hover {
  transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(0,0,0,.04),0 8px 20px rgba(229,57,53,.26);
}

/* NEUTRAL — utility/period selectors (date pickers) */
.btn-glass-neutral {
  border:1px solid rgba(95,100,120,.18);
  background:linear-gradient(180deg,rgba(255,255,255,.85) 0%,rgba(245,246,250,.65) 100%);
  color:#58413f;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(0,0,0,.04),0 3px 8px rgba(0,0,0,.04);
}
.btn-glass-neutral:hover {
  transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(0,0,0,.04),0 6px 16px rgba(0,0,0,.08);
}
/* Active state for toggleable filter buttons — blue tint, matches pill-active */
.btn-glass-neutral.active {
  background:linear-gradient(180deg,rgba(240,247,255,.95) 0%,rgba(220,235,250,.85) 100%);
  border-color:rgba(24,95,165,.32);
  color:var(--accent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 1px 4px rgba(24,95,165,.15);
  font-weight:600;
}
.btn-glass-neutral.active:hover {
  background:linear-gradient(180deg,rgba(245,250,255,.98) 0%,rgba(225,238,250,.9) 100%);
  border-color:rgba(24,95,165,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 6px 16px rgba(24,95,165,.20);
}
/* ═══════════════════════════════════════════════════════════════════
   RV8 v2 — Rider portal redesign (May 7 2026)
   Per "plain.zip" design spec from Stitch (helloo_delivery_system).
   Additive — sits AFTER the existing rv8 block, overrides where needed.
   All existing rv8-* class names + IDs are preserved.
   ═══════════════════════════════════════════════════════════════════ */

/* —————— GLASS HEADER —————— */
#page-rider-portal .rv8-hero-glass{
  background: rgba(253, 246, 241, 0.72) !important;
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border-top: 1px solid rgba(255, 255, 255, 0.7);
  border-bottom: .5px solid rgba(140, 113, 110, 0.18) !important;
  box-shadow: 0 6px 16px -8px rgba(139, 26, 26, 0.08);
  z-index: 60;
}

/* Notification bell — refined per design */
#page-rider-portal .rv8-hero-bell{
  background: rgba(255, 255, 255, 0.4);
  border: .5px solid rgba(140, 113, 110, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0,0,0,0.03);
}

/* —————— BODY BG (light grey per design) —————— */
#page-rider-portal .rv8-scroll{
  background: #f8f8f8 !important;
}

/* —————— PAYSLIP COLUMN BAR CHART —————— */
#page-rider-portal .rv8-pay-chart{
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 48px;
  margin-bottom: 8px;
}
#page-rider-portal .rv8-pay-col{
  flex: 1;
  min-height: 8px;
  border-radius: 2px 2px 0 0;
}
#page-rider-portal .rv8-pay-col-income{ background: #2d6a2e; }
#page-rider-portal .rv8-pay-col-deduct{ background: #d1d5db; }

/* —————— FORM ELEMENTS —————— */
#page-rider-portal .rv8-input{
  width: 100%;
  background: #fff;
  border: .5px solid rgba(140, 113, 110, 0.25);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--text);
  font-family: inherit;
  margin-bottom: 12px;
  -webkit-appearance: none;
  appearance: none;
}
#page-rider-portal .rv8-input:focus{
  outline: none;
  border-color: var(--acc);
}
#page-rider-portal select.rv8-input{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2358413f' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}
#page-rider-portal .rv8-textarea{
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}
#page-rider-portal .rv8-form-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
#page-rider-portal .rv8-form-l{
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  margin-top: 4px;
}

/* —————— BUTTONS —————— */
#page-rider-portal .rv8-btn-primary{
  background: var(--acc);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 11px 18px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 2px rgba(139,26,26,.25);
  transition: transform .1s, opacity .15s;
}
#page-rider-portal .rv8-btn-primary:active{ transform: scale(.97); }
#page-rider-portal .rv8-btn-primary:disabled{ opacity: .5; cursor: not-allowed; }
#page-rider-portal .rv8-btn-ghost{
  background: transparent;
  color: var(--text);
  border: .5px solid rgba(140, 113, 110, 0.2);
  border-radius: 10px;
  padding: 11px 18px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
#page-rider-portal .rv8-btn-full{
  width: 100%;
  margin-top: 4px;
}
#page-rider-portal .rv8-link-btn{
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  padding: 12px 0 4px;
  margin-top: 8px;
  border-top: .5px solid rgba(140, 113, 110, 0.12);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--acc);
  cursor: pointer;
  font-family: inherit;
}

/* —————— EARNINGS TAB —————— */
#page-rider-portal .rv8-earn-balance{
  padding: 18px 14px;
}
#page-rider-portal .rv8-earn-amt{
  font-size: 32px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin: 8px 0 4px;
}
#page-rider-portal .rv8-earn-since{
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 14px;
}
#page-rider-portal .rv8-earn-actions{
  display: flex;
  gap: 10px;
}
#page-rider-portal .rv8-earn-actions .rv8-btn-primary,
#page-rider-portal .rv8-earn-actions .rv8-btn-ghost{
  flex: 1;
}

/* Khata ledger rows */
#page-rider-portal .rv8-khata-list{ }
#page-rider-portal .rv8-khata-row{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px 0;
  border-top: .5px solid rgba(140, 113, 110, 0.12);
}
#page-rider-portal .rv8-khata-row:first-child{ border-top: none; padding-top: 4px; }
#page-rider-portal .rv8-khata-l{ flex: 1; min-width: 0; }
#page-rider-portal .rv8-khata-date{
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}
#page-rider-portal .rv8-khata-desc{
  font-size: 13px;
  color: var(--text);
}
#page-rider-portal .rv8-khata-r{ text-align: right; }
#page-rider-portal .rv8-khata-amt{
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
#page-rider-portal .rv8-khata-amt-pos{ color: var(--green); }
#page-rider-portal .rv8-khata-amt-neg{ color: var(--red); }
#page-rider-portal .rv8-khata-tag{
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: 3px;
}
#page-rider-portal .rv8-khata-tag-green{ background: rgba(45,106,46,.12); color: var(--green); }
#page-rider-portal .rv8-khata-tag-red{ background: rgba(153,27,27,.1); color: var(--red); }
#page-rider-portal .rv8-khata-tag-grey{ background: rgba(0,0,0,.04); color: var(--muted); }

/* Payslip history rows */
#page-rider-portal .rv8-pslp-row{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: .5px solid rgba(140, 113, 110, 0.12);
}
#page-rider-portal .rv8-pslp-row:first-child{ border-top: none; padding-top: 4px; }
#page-rider-portal .rv8-pslp-icon{
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(0,0,0,.03);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#page-rider-portal .rv8-pslp-icon svg{ width: 18px; height: 18px; color: var(--muted); }
#page-rider-portal .rv8-pslp-text{ flex: 1; min-width: 0; }
#page-rider-portal .rv8-pslp-period{
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
#page-rider-portal .rv8-pslp-status{
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--green);
  margin-top: 2px;
}
#page-rider-portal .rv8-pslp-pdf{
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--acc);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px 8px;
  font-family: inherit;
}

/* —————— PERFORMANCE TAB —————— */
#page-rider-portal .rv8-perf-score{
  padding: 18px 14px 14px;
}
#page-rider-portal .rv8-ring-wrap{
  display: flex;
  justify-content: center;
  margin: 8px 0 14px;
}
#page-rider-portal .rv8-ring{
  width: 160px;
  height: 160px;
}
#page-rider-portal .rv8-ring-num{
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
#page-rider-portal .rv8-ring-label{
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
#page-rider-portal .rv8-perf-stats{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
#page-rider-portal .rv8-perf-stat{
  background: #f5f5f5;
  border: .5px solid rgba(140, 113, 110, 0.1);
  border-radius: 10px;
  padding: 10px 6px;
  text-align: center;
}
#page-rider-portal .rv8-perf-stat-l{
  font-size: 9px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
#page-rider-portal .rv8-perf-stat-v{
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* 7-day activity bar chart */
#page-rider-portal .rv8-week-chart{
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 100px;
  padding-bottom: 8px;
  border-bottom: .5px solid rgba(140, 113, 110, 0.12);
  margin-bottom: 8px;
}
#page-rider-portal .rv8-week-bar{
  flex: 1;
  background: var(--acc);
  border-radius: 4px 4px 0 0;
  min-height: 6px;
  position: relative;
  transition: height .3s;
}
#page-rider-portal .rv8-week-bar.rv8-week-today{
  background: linear-gradient(180deg, var(--acc), #6d1414);
  box-shadow: 0 2px 6px rgba(139,26,26,.25);
}
#page-rider-portal .rv8-week-bar.rv8-week-empty{
  background: rgba(0,0,0,.06);
}
#page-rider-portal .rv8-week-labels{
  display: flex;
  gap: 6px;
}
#page-rider-portal .rv8-week-labels span{
  flex: 1;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
}
#page-rider-portal .rv8-week-labels span.rv8-week-today-l{
  color: var(--text);
  font-weight: 800;
}

/* Trend line chart */
#page-rider-portal .rv8-trend-svg{
  width: 100%;
  height: 80px;
  margin: 8px 0;
}
#page-rider-portal .rv8-trend-foot{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-top: 8px;
  border-top: .5px solid rgba(140, 113, 110, 0.12);
}

/* Areas to improve */
#page-rider-portal .rv8-improve-row{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: #f5f5f5;
  border-radius: 10px;
  margin-top: 8px;
  font-size: 13px;
}
#page-rider-portal .rv8-improve-row svg{
  width: 20px;
  height: 20px;
  color: var(--muted);
  flex-shrink: 0;
}
#page-rider-portal .rv8-improve-t{ font-weight: 600; color: var(--text); }
#page-rider-portal .rv8-improve-s{ font-size: 11px; color: var(--muted); margin-top: 1px; }

/* —————— SUPPORT TAB —————— */
#page-rider-portal .rv8-support-hero{
  /* Warm premium gradient — peach top, deeper plum bottom, with maroon accent corner */
  background:
    radial-gradient(120% 80% at 12% 18%, rgba(255,238,220,.42) 0%, transparent 55%),
    radial-gradient(140% 100% at 90% 110%, rgba(139,26,26,.55) 0%, transparent 55%),
    linear-gradient(150deg, #3a2a26 0%, #2a1f1c 55%, #1f1614 100%);
  border-radius: 16px;
  padding: 28px 20px;
  margin-bottom: 12px;
  display: flex;
  align-items: flex-end;
  min-height: 160px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 8px 24px -10px rgba(139,26,26,0.28),
    0 2px 8px -2px rgba(0,0,0,0.18);
}
#page-rider-portal .rv8-support-hero::before{
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 80% at 80% 20%, rgba(255,255,255,.10) 0%, transparent 60%);
  pointer-events: none;
}
#page-rider-portal .rv8-support-hero-text{
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.1;
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,.18);
}
#page-rider-portal .rv8-support-tiles{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
#page-rider-portal .rv8-support-tile{
  background: #fff;
  border: .5px solid rgba(140, 113, 110, 0.15);
  border-radius: 14px;
  padding: 18px 12px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: transform .1s;
}
#page-rider-portal .rv8-support-tile:active{ transform: scale(.97); }
#page-rider-portal .rv8-tile-icon{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#page-rider-portal .rv8-tile-icon svg{ width: 22px; height: 22px; }
#page-rider-portal .rv8-tile-icon-green{ background: rgba(45,106,46,.12); color: var(--green); }
#page-rider-portal .rv8-tile-icon-blue{ background: rgba(24,95,165,.12); color: var(--blue); }
#page-rider-portal .rv8-tile-label{
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

/* Material Symbols font removed 19 Jun 2026: support icons are inline SVG; woff2 no longer loaded. */
#page-rider-portal .rv8-kb-icon{ color: var(--muted); }

/* Knowledge base list */
#page-rider-portal .rv8-kb-list{ }
#page-rider-portal .rv8-kb-row{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: .5px solid rgba(140, 113, 110, 0.12);
  background: transparent;
  border-left: none;
  border-right: none;
  border-bottom: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  text-align: left;
}
#page-rider-portal .rv8-kb-row:first-child{ border-top: none; padding-top: 4px; }
#page-rider-portal .rv8-kb-row > span{ flex: 1; font-weight: 500; }
#page-rider-portal .rv8-kb-chev{
  width: 14px;
  height: 14px;
  color: var(--muted);
  flex-shrink: 0;
}

/* —————— PROFILE TAB —————— */
#page-rider-portal .rv8-prof-top{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0 20px;
  margin-bottom: 4px;
}
#page-rider-portal .rv8-prof-top .rv8-avatar-lg{
  width: 80px;
  height: 80px;
  font-size: 30px;
  margin-bottom: 12px;
  position: relative;
}
#page-rider-portal .rv8-prof-name{
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
#page-rider-portal .rv8-prof-sub{
  font-size: 12px;
  color: var(--muted);
}

/* Lifetime stats */
#page-rider-portal .rv8-lifetime{
  position: relative;
  background: #f5f5f5 !important;
}
#page-rider-portal .rv8-lifetime-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 8px 0;
}
#page-rider-portal .rv8-lifetime-stat{
  background: rgba(255,255,255,.6);
  border: .5px solid rgba(140, 113, 110, 0.1);
  border-radius: 10px;
  padding: 12px;
}
#page-rider-portal .rv8-lifetime-l{
  font-size: 9px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
#page-rider-portal .rv8-lifetime-v{
  font-size: 16px;
  font-weight: 700;
  color: var(--muted);
}
#page-rider-portal .rv8-lifetime-tag{
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  background: rgba(0,0,0,.05);
  padding: 4px 10px;
  border-radius: 999px;
  margin-top: 4px;
}

/* Document center */
#page-rider-portal .rv8-doc-row{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: .5px solid rgba(140, 113, 110, 0.12);
}
#page-rider-portal .rv8-doc-row:first-child{ border-top: none; padding-top: 4px; }
#page-rider-portal .rv8-doc-icon{
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(0,0,0,.03);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#page-rider-portal .rv8-doc-icon svg{ width: 18px; height: 18px; color: var(--muted); }
#page-rider-portal .rv8-doc-text{ flex: 1; min-width: 0; }
#page-rider-portal .rv8-doc-name{
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
#page-rider-portal .rv8-doc-exp{
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
#page-rider-portal .rv8-doc-exp.rv8-doc-exp-warn{ color: var(--amber); font-weight: 600; }
#page-rider-portal .rv8-doc-exp.rv8-doc-exp-bad{ color: var(--red); font-weight: 600; }
#page-rider-portal .rv8-doc-status{
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
#page-rider-portal .rv8-doc-status-ok{ background: rgba(45,106,46,.12); color: var(--green); }
#page-rider-portal .rv8-doc-status-warn{ background: rgba(184,115,51,.14); color: var(--amber); }
#page-rider-portal .rv8-doc-status-bad{ background: rgba(153,27,27,.1); color: var(--red); }

/* Profile version footer */
#page-rider-portal .rv8-prof-version{
  text-align: center;
  font-size: 10px;
  color: var(--muted);
  margin-top: 14px;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════════
   RV8 v3 — Home tab design-faithful patches (May 7 2026)
   Brings the home tab into pixel-match with helloo_delivery_system spec.
   Appended AFTER v2 block; uses higher specificity to win cascade.
   ═══════════════════════════════════════════════════════════════════ */

/* Greet card — vertical stack on right (ACTIVE pill + GO ONLINE button) */
#page-rider-portal .rv8-greet-v3{
  background: #fff !important;
  padding: 18px 16px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.02);
}
#page-rider-portal .rv8-greet-top{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}
#page-rider-portal .rv8-greet-id{
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
#page-rider-portal .rv8-greet-hello{
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  margin-bottom: 2px;
}
#page-rider-portal .rv8-greet-name-big{
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
}
#page-rider-portal .rv8-greet-actions{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}
/* GO ONLINE button — maroon solid per design (offline state) */
#page-rider-portal .rv8-clock-v3{
  background: var(--acc) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 3px rgba(139,26,26,.3);
}
#page-rider-portal .rv8-clock-v3.online{
  background: var(--green) !important;
  border-color: var(--green) !important;
}
/* ACTIVE pill — uppercase per design */
#page-rider-portal .rv8-greet-actions .rv8-pill-active{
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.5px;
}

/* Score color — maroon per design (override v2 blue) */
#page-rider-portal .rv8-mini-v.rv8-score-maroon{
  color: var(--acc) !important;
}
#page-rider-portal .rv8-mini-v.rv8-score-maroon #rv8-score{
  color: var(--acc) !important;
  font-weight: 800;
}
#page-rider-portal .rv8-mini-v.rv8-score-maroon .rv8-mini-sm{
  color: var(--muted) !important;
  font-weight: 600;
}
/* Mini stats label refinement */
#page-rider-portal .rv8-greet-v3 .rv8-mini-l{
  font-weight: 700;
  letter-spacing: 0.6px;
}
#page-rider-portal .rv8-greet-v3 .rv8-mini-v{
  font-size: 22px;
  font-weight: 800;
}

/* ═══ Action card v3 — count INLINE, white sub-cards ═══ */
#page-rider-portal .rv8-action-v3{
  background: #f8f8f8 !important;
  border-color: rgba(140, 113, 110, 0.15) !important;
}
#page-rider-portal .rv8-action-v3 .rv8-card-t{
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.6px;
}
#page-rider-portal .rv8-action-v3 .rv8-action-count-pill{
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--amber);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Action rows become white sub-cards */
#page-rider-portal .rv8-action-v3 .rv8-action-row{
  background: #fff;
  border: .5px solid rgba(140, 113, 110, 0.15) !important;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
#page-rider-portal .rv8-action-v3 .rv8-action-row:last-child{ margin-bottom: 0; }
#page-rider-portal .rv8-action-v3 .rv8-action-row:first-child{
  border-top: .5px solid rgba(140, 113, 110, 0.15) !important;
  padding-top: 10px !important;
}

/* ═══ Pending balance v3 — AED circle on left ═══ */
#page-rider-portal .rv8-balance-v3{
  background: #fff !important;
}
#page-rider-portal .rv8-balance-v3 .rv8-card-t-caps{
  display: block;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
}
#page-rider-portal .rv8-bal-row-v3{
  display: flex;
  align-items: center;
  gap: 14px;
}
#page-rider-portal .rv8-bal-circle{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #f5f5f5;
  border: .5px solid rgba(140, 113, 110, 0.2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#page-rider-portal .rv8-bal-stack{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
#page-rider-portal .rv8-balance-v3 .rv8-bal-amt{
  font-size: 28px;
  font-weight: 800;
  color: var(--red);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
#page-rider-portal .rv8-bal-items-pill{
  background: #fafafa;
  border: .5px solid rgba(140, 113, 110, 0.18);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text);
}

/* ═══ Balance you owe — [1 Sep 2026] replaces the "PENDING BALANCE / 7 ITEMS" card.
   Own class (.rv8-owe) so none of the .rv8-balance-v3 / .rv8-bal-* overrides above apply. ═══ */
#page-rider-portal .rv8-owe{ background:#fff !important; }
#page-rider-portal .rv8-owe .rv8-owe-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
#page-rider-portal .rv8-owe .rv8-owe-t{ font-size:13px; font-weight:600; color:#20211f; letter-spacing:-.01em; }
#page-rider-portal .rv8-owe .rv8-owe-total{ font-size:19px; font-weight:700; letter-spacing:-.02em; color:#8B1A1A; font-variant-numeric:tabular-nums; white-space:nowrap; }
#page-rider-portal .rv8-owe .rv8-owe-rows{ margin-top:12px; }
#page-rider-portal .rv8-owe .rv8-owe-row{ display:flex; align-items:baseline; justify-content:space-between; padding:8px 0; font-size:13px; border-top:.5px solid rgba(140,113,110,.12); font-variant-numeric:tabular-nums; }
#page-rider-portal .rv8-owe .rv8-owe-l{ color:#4a453f; font-weight:400; }
#page-rider-portal .rv8-owe .rv8-owe-c{ color:#b0a09b; font-weight:400; }
#page-rider-portal .rv8-owe .rv8-owe-v{ color:#20211f; font-weight:500; }
#page-rider-portal .rv8-owe .rv8-owe-note{ font-size:11px; color:#9a8a85; margin-top:10px; }
#page-rider-portal .rv8-payslip-v3{
  background: #f8f8f8 !important;
}
#page-rider-portal .rv8-payslip-v3 .rv8-card-t-caps{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
#page-rider-portal .rv8-pay-net-l{
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 4px;
  margin-top: 8px;
}
#page-rider-portal .rv8-payslip-v3 .rv8-pay-amt{
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 14px;
}
#page-rider-portal .rv8-pay-foot-v3{
  margin-top: 8px;
}
#page-rider-portal .rv8-pay-foot-v3 .rv8-pay-l{
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
}
#page-rider-portal .rv8-pay-foot-v3 .rv8-pay-foot-r{
  text-align: right;
}

/* ═══ Bike card v3 — proper plate, chips at bottom ═══ */
#page-rider-portal .rv8-bike-v3{
  background: #fff !important;
}
#page-rider-portal .rv8-bike-v3 .rv8-card-t-caps{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  margin-bottom: 12px;
  display: block;
}
#page-rider-portal .rv8-bike-row-v3{
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}
#page-rider-portal .rv8-plate-v3{
  background: #fafafa;
  border: 1px solid rgba(140, 113, 110, 0.25);
  border-radius: 6px;
  padding: 8px 10px;
  min-width: 100px;
  text-align: center;
  flex-shrink: 0;
}
#page-rider-portal .rv8-plate-emirate-row{
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding-bottom: 4px;
  margin-bottom: 4px;
  border-bottom: .5px solid rgba(140, 113, 110, 0.2);
}
#page-rider-portal .rv8-plate-num-row{
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
#page-rider-portal .rv8-bike-v3 .rv8-bike-meta{ flex: 1; }
#page-rider-portal .rv8-bike-v3 .rv8-bike-model{
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}
#page-rider-portal .rv8-bike-v3 .rv8-bike-fleet{
  font-size: 12px;
  color: var(--muted);
}
/* Bike chips — INSURANCE / LAST SERVICE info tiles */
#page-rider-portal .rv8-bike-chips-v3{
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
#page-rider-portal .rv8-bike-chips-v3 .rv8-bike-info-chip{
  background: #fafafa;
  border: .5px solid rgba(140, 113, 110, 0.18);
  border-radius: 10px;
  padding: 10px 12px;
  display: block;
  width: auto;
}
#page-rider-portal .rv8-bike-chips-v3 .rv8-bike-info-l{
  font-size: 9px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
#page-rider-portal .rv8-bike-chips-v3 .rv8-bike-info-v{
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
#page-rider-portal .rv8-bike-chips-v3 .rv8-bike-info-v.rv8-info-warn{ color: var(--amber); }
#page-rider-portal .rv8-bike-chips-v3 .rv8-bike-info-v.rv8-info-bad{ color: var(--red); }

/* ═══ Heatwave / tip v3 — maroon left border, icon circle ═══ */
#page-rider-portal .rv8-tip-v3{
  background: #fafafa !important;
  border-left: 3px solid var(--acc) !important;
  padding: 14px !important;
}
#page-rider-portal .rv8-tip-v3 .rv8-tip-row{
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
/* [25 Sep 2026, rider-app audit #8] The admin theme picker writes --acc onto <html> (the default "mono" theme
   sets it to WHITE) for every visitor. Rider-side rules that read var(--acc) — the tip title and icon, the
   login focus ring, quick-action icons — rendered white-on-white. Riders and the login screen always get the
   brand maroon: a custom property set on these subtrees wins over the inline value on <html>. */
#login-screen, #page-rider-portal, body.rider-mode { --acc:#8B1A1A; --acc-rgb:139,26,26; }

/* [25 Sep 2026, rider-app audit #26] Readable in daylight. Measured: 13 labels at 9.5–10.5 px and helper text at
   2.0–3.7:1 contrast on the cream. Floor: caps labels 11 px, helper text 13 px, one muted grey (#6b5f5b ≈ 5:1).
   html body … specificity beats the per-tab !important blocks in index.html; the [style*=] rules catch the
   inline sizes/colours written by the JS renderers. */
html body #page-rider-portal .rv8-v6-cap, html body #page-rider-portal .rv8-card-t-caps, html body #page-rider-portal .rv8-card-t,
html body #page-rider-portal .rv8-pay-t-l, html body #page-rider-portal .rv8-lifetime-l, html body #page-rider-portal .rv8-sl-lbl,
html body #page-rider-portal .rv8-owe-gh, html body #page-rider-portal .rv8-sl-sec > span:first-child, html body #page-rider-portal .rv8-sl-stat span,
html body #page-rider-portal .rv8-earn-hero-l, html body #page-rider-portal .rv8-form-l, html body #page-rider-portal .rv8-pstat .l,
html body #page-rider-portal .rv8-pill, html body #page-rider-portal .rv8-pslp-status, html body #page-rider-portal .rv8-pslp-idtag,
html body #page-rider-portal .rv8-doc-status, html body #page-rider-portal .rv8-v6-ringc small, html body #page-rider-portal .rv8-gt-warn,
html body #page-rider-portal [style*="font-size:10.5px"], html body #page-rider-portal [style*="font-size:10px"],
html body #page-rider-portal [style*="font-size:9.5px"], html body #page-rider-portal [style*="font-size:9px"],
html body #page-rider-portal [style*="font-size: 10.5px"], html body #page-rider-portal [style*="font-size: 10px"],
html body #page-rider-portal [style*="font-size: 9.5px"], html body #page-rider-portal [style*="font-size: 9px"] { font-size:11.5px !important; }
html body #page-rider-portal .rv8-pstat-h, html body #page-rider-portal .rv8-owe-note, html body #page-rider-portal .rv8-act-s,
html body #page-rider-portal .rv8-v6-sub, html body #page-rider-portal .rv8-empty, html body #page-rider-portal .rv8-tip-text,
html body #page-rider-portal .rv8-info-label, html body #page-rider-portal .rv8-info-l, html body #page-rider-portal .rv8-doc-exp { font-size:13px !important; }
/* one readable grey for every muted text — class-based and inline */
html body #page-rider-portal .rv8-v6-cap, html body #page-rider-portal .rv8-card-t-caps, html body #page-rider-portal .rv8-card-t,
html body #page-rider-portal .rv8-pay-t-l, html body #page-rider-portal .rv8-lifetime-l, html body #page-rider-portal .rv8-sl-lbl,
html body #page-rider-portal .rv8-pstat-h, html body #page-rider-portal .rv8-owe-note, html body #page-rider-portal .rv8-owe-c,
html body #page-rider-portal .rv8-act-s, html body #page-rider-portal .rv8-v6-sub, html body #page-rider-portal .rv8-empty,
html body #page-rider-portal .rv8-tip-text, html body #page-rider-portal .rv8-info-label, html body #page-rider-portal .rv8-info-l,
html body #page-rider-portal .rv8-doc-exp, html body #page-rider-portal .rv8-v6-ringc small, html body #page-rider-portal .rv8-pstat .l,
html body #page-rider-portal .rv8-form-l, html body #page-rider-portal #rv8-tab-performance .l,
html body #page-rider-portal [style*="color:#8c716e"], html body #page-rider-portal [style*="color:#8C716E"], html body #page-rider-portal [style*="color: #8c716e"],
html body #page-rider-portal [style*="color:#a79e95"], html body #page-rider-portal [style*="color: #a79e95"],
html body #page-rider-portal [style*="color:#b0a09b"], html body #page-rider-portal [style*="color:#b3a29e"], html body #page-rider-portal [style*="color:#9a8a85"],
html body #page-rider-portal [style*="color:#74777f"], html body #page-rider-portal [style*="color:#9a8a7e"] { color:#6b5f5b !important; }
/* keep the coloured badges coloured */
html body #page-rider-portal .rv8-pill-green, html body #page-rider-portal .rv8-pslp-status, html body #page-rider-portal .rv8-doc-status { color:inherit; }
html body #page-rider-portal .rv8-earn-since, html body #page-rider-portal .rv8-earn-hero-l { color:rgba(255,255,255,.85) !important; }
html body #page-rider-portal .rv8-card-h .rv8-card-t, html body #page-rider-portal .rv8-card > .rv8-card-t, html body #page-rider-portal .rv8-card > h3.rv8-card-t,
html body #page-rider-portal .rv8-p7-tile .l, html body #page-rider-portal .rv8-earn-trend-label span,
html body #page-rider-portal .rv8-prof-version, html body #page-rider-portal .rv8-prof-version * { font-size:11.5px !important; color:#6b5f5b !important; }
html body #page-rider-portal #rv8-tab-home .rv8-card-t.rv8-card-t-caps, html body #page-rider-portal #rv8-tab-home .rv8-card-h .rv8-card-t, html body #page-rider-portal #rv8-tab-home .rv8-card-t, html body #page-rider-portal #rv8-tab-earnings .rv8-earn-trend-labels span,
html body #page-rider-portal #rv8-tab-earnings .rv8-card-t, html body #page-rider-portal #rv8-tab-performance .rv8-card-t, html body #page-rider-portal #rv8-tab-support .rv8-card-t,
html body #page-rider-portal #rv8-tab-profile .rv8-card-t { font-size:11.5px !important; color:#6b5f5b !important; }
html body #page-rider-portal [style*="color:#a1948f"], html body #page-rider-portal [style*="color:#b08a86"], html body #page-rider-portal [style*="color:#a89f95"], html body #page-rider-portal [style*="color:#8a827a"], html body #page-rider-portal .rv8-p7-rule small,
html body #page-rider-portal [style*="color:#b8aca7"], html body #page-rider-portal [style*="color:#c9bfb9"], html body #page-rider-portal [style*="color:#9c9c9c"],
html body #page-rider-portal [style*="color:rgba(26,28,25,.46)"], html body #page-rider-portal [style*="color:rgba(26,28,25,.55)"],
html body #page-rider-portal [style*="color: rgba(26, 28, 25, 0.46)"], html body #page-rider-portal [style*="color: rgba(26, 28, 25, 0.55)"] { color:#6b5f5b !important; }
#page-rider-portal .rv8-earn-since { color:rgba(255,255,255,.82) !important; }

#page-rider-portal .rv8-tip-h-v3{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#page-rider-portal .rv8-tip-h-v3 svg{ width: 20px; height: 20px; }
#page-rider-portal .rv8-tip-text-wrap{ flex: 1; }
#page-rider-portal .rv8-tip-title{
  font-size: 13px;
  font-weight: 800;
  color: var(--acc);
  margin-bottom: 4px;
}
#page-rider-portal .rv8-tip-v3 .rv8-tip-text{
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

/* ═══ Quick actions v3 — maroon outline buttons ═══ */
#page-rider-portal .rv8-quick-v3{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 4px;
  padding-bottom: 8px;
}
#page-rider-portal .rv8-q-btn-v3{
  background: transparent !important;
  border: .5px solid var(--acc) !important;
  color: var(--acc) !important;
  border-radius: 12px !important;
  padding: 13px 12px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: center;
  gap: 8px !important;
  box-shadow: none !important;
}
#page-rider-portal .rv8-q-btn-v3::before{ display: none !important; }
#page-rider-portal .rv8-q-btn-v3 svg{
  width: 18px !important;
  height: 18px !important;
  color: var(--acc) !important;
}
#page-rider-portal .rv8-q-btn-v3:active{
  background: rgba(139, 26, 26, 0.05) !important;
}

/* Hide the legacy inline rv8-greet-name (from existing rv8 block) since v3 structure replaces it */
/* Actually keep visible — we just renamed greet-name to greet-hello, but JS still sets text on rv8-greet-name id */

/* ═══════════════════════════════════════════════════════════════════
   RV8 v4 — Header + greet card pixel-match (May 7 2026)
   Patches H logo, bell, avatar, and stats divider to match design code.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ H logo bubble — 3D embossed shadow stack ═══ */
#page-rider-portal .rv8-hero-h{
  width: 38px !important;
  height: 38px !important;
  border-radius: 8px !important;
  background: var(--acc) !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -1.5px 1px rgba(0, 0, 0, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 1px 1px rgba(139, 26, 26, 0.45),
    0 3px 8px rgba(139, 26, 26, 0.32),
    0 6px 14px -2px rgba(139, 26, 26, 0.18) !important;
}

/* ═══ Bell button — refined size + notification dot ═══ */
#page-rider-portal .rv8-hero-bell{
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.4) !important;
  border: .5px solid rgba(140, 113, 110, 0.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 1px 2px rgba(0, 0, 0, 0.03) !important;
  position: relative !important;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--t2);
}
#page-rider-portal .rv8-hero-bell svg{
  width: 18px;
  height: 18px;
}
/* Notification dot */
#page-rider-portal .rv8-bell-dot{
  position: absolute !important;
  top: 7px !important;
  right: 9px !important;
  width: 8px !important;
  height: 8px !important;
  background: var(--acc) !important;
  border-radius: 50% !important;
  border: 1.5px solid #fff !important;
  box-shadow: 0 0 0 2px rgba(139, 26, 26, 0.4) !important;
}

/* ═══ Avatar — gradient bg with 2px white border ═══ */
#page-rider-portal .rv8-greet-v3 .rv8-avatar{
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #f3f4f6, #d1d5db) !important;
  border: 2px solid #fff !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 .5px rgba(140, 113, 110, 0.08) !important;
  color: var(--t2) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
  overflow: hidden;
}

/* ═══ Stats row — vertical hairlines (border-x on middle) ═══ */
#page-rider-portal .rv8-greet-v3 .rv8-mini-stats{
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 0 !important;
  border-top: .5px solid rgba(140, 113, 110, 0.18) !important;
  padding-top: 14px !important;
  margin-top: 4px;
}
#page-rider-portal .rv8-greet-v3 .rv8-mini{
  text-align: center;
  padding: 0 4px;
}
/* Middle column gets vertical divider lines on both sides */
#page-rider-portal .rv8-greet-v3 .rv8-mini:nth-child(2){
  border-left: .5px solid rgba(140, 113, 110, 0.18);
  border-right: .5px solid rgba(140, 113, 110, 0.18);
}
#page-rider-portal .rv8-greet-v3 .rv8-mini-l{
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--muted) !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
#page-rider-portal .rv8-greet-v3 .rv8-mini-v{
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
#page-rider-portal .rv8-greet-v3 .rv8-mini-v.rv8-score-maroon{
  color: var(--acc) !important;
}
#page-rider-portal .rv8-greet-v3 .rv8-mini-sm{
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
}

/* ═══ Header text refinement ═══ */
#page-rider-portal .rv8-hero-glass{
  height: 64px !important;
  padding: 0 16px !important;
}
#page-rider-portal .rv8-hero-text{
  flex: 1;
  min-width: 0;
}
#page-rider-portal .rv8-hero-name{
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1;
  margin-bottom: 3px;
}
#page-rider-portal .rv8-hero-tag{
  font-size: 10px !important;
  font-weight: 500 !important;
  color: var(--muted) !important;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  line-height: 1;
}

/* ═══ Active pill — match design (emerald-100 / emerald-800) ═══ */
#page-rider-portal .rv8-greet-actions .rv8-pill-active{
  background: rgba(167, 243, 208, 0.5) !important;
  color: #065f46 !important;
  border: none !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  padding: 4px 10px !important;
}
#page-rider-portal .rv8-greet-actions .rv8-pill-active .rv8-dot{
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   RV8 v4 — Profile tab design-faithful CSS (May 7 2026)
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ PROFILE HERO — gold ring avatar + verified badge ═══ */
#page-rider-portal .rv8-prof-hero-v4{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0 8px;
  margin-bottom: 4px;
}
#page-rider-portal .rv8-prof-avatar-wrap{
  position: relative;
  width: 96px;
  height: 96px;
  margin-bottom: 12px;
}
#page-rider-portal .rv8-prof-avatar-ring{
  width: 96px;
  height: 96px;
  border-radius: 50%;
  padding: 4px;
  background: linear-gradient(45deg, #a83232 0%, #5e0f0f 100%);
  box-shadow: 0 2px 10px rgba(139, 26, 26, 0.28);
}
#page-rider-portal .rv8-prof-avatar-inner{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, #f3f4f6, #d1d5db);
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 800;
  color: var(--t2);
  overflow: hidden;
}
#page-rider-portal .rv8-prof-verified{
  /* [4 Aug 2026] was a dark blob clipping the ring corner. Now a clean green check badge
     seated just inside the ring's lower-right; z-index over the ring so it never clips. */
  position: absolute;
  bottom: 4px;
  right: 4px;
  z-index: 3;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #2d9d4f;
  border: 2.5px solid #faf9f6;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 2px 6px rgba(45, 157, 79, 0.4);
}
#page-rider-portal .rv8-prof-verified svg{
  width: 15px;
  height: 15px;
}
/* [4 Aug 2026] avatar photo fades in once the authed blob loads (was a hard pop after the
   network round-trip — read as "broken then photo") */
#page-rider-portal .rv8-prof-avatar-inner img{
  animation: rv8AvFade .35s ease both;
}
@keyframes rv8AvFade{ from{ opacity:0 } to{ opacity:1 } }
/* Document rows are tappable now → show it */
#page-rider-portal .rv8-doc-row{ cursor:pointer; transition: background .15s; }
#page-rider-portal .rv8-doc-row:active{ background: rgba(139,26,26,.05); }

#page-rider-portal .rv8-prof-hero-v4 .rv8-prof-name{
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  margin-top: 8px;
}
#page-rider-portal .rv8-prof-hero-v4 .rv8-prof-sub{
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

/* ═══ ACCOUNT INFO CARD — header bar + rows with icons ═══ */
#page-rider-portal .rv8-info-card{
  background: #fff;
  border: .5px solid rgba(140, 113, 110, 0.15);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}
#page-rider-portal .rv8-info-card-h{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #fff;
  border-bottom: .5px solid rgba(140, 113, 110, 0.15);
}
#page-rider-portal .rv8-card-dash{
  width: 14px;
  height: 2px;
  background: var(--text);
  flex-shrink: 0;
}
#page-rider-portal .rv8-info-card-h-t{
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
#page-rider-portal .rv8-info-card-body{
  padding: 4px 16px;
}
#page-rider-portal .rv8-info-row-v4{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: .5px solid rgba(140, 113, 110, 0.15);
}
#page-rider-portal .rv8-info-row-v4:last-child,
#page-rider-portal .rv8-info-row-v4.rv8-info-row-last:last-child{
  border-bottom: none;
}
#page-rider-portal .rv8-info-l{
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
#page-rider-portal .rv8-info-icon{
  width: 18px;
  height: 18px;
  color: #74777f;
  flex-shrink: 0;
}
#page-rider-portal .rv8-info-label{
  font-size: 13px;
  color: var(--muted);
}
#page-rider-portal .rv8-info-value{
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-align: right;
}
#page-rider-portal .rv8-info-platform-r{
  display: flex;
  align-items: center;
  gap: 8px;
}
#page-rider-portal .rv8-platform-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FF6000;
  flex-shrink: 0;
}

/* ═══ LIFETIME STATS — faded bg icon + 2 stat boxes ═══ */
#page-rider-portal .rv8-lifetime-v4{
  background: #f9fafb;
  border: .5px solid rgba(140, 113, 110, 0.15);
  border-radius: 12px;
  padding: 16px;
  position: relative;
  overflow: hidden;
}
#page-rider-portal .rv8-lifetime-bg-icon{
  position: absolute;
  right: -16px;
  top: -16px;
  opacity: 0.05;
  pointer-events: none;
}
#page-rider-portal .rv8-lifetime-bg-icon svg{
  width: 120px;
  height: 120px;
  color: var(--text);
}
#page-rider-portal .rv8-lifetime-h{
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin-bottom: 14px;
}
#page-rider-portal .rv8-lifetime-grid-v4{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  /* [4 Aug 2026] was opacity:.4 — made the whole Activity card look disabled/broken */
  position: relative;
  z-index: 1;
}
#page-rider-portal .rv8-lifetime-stat-v4{
  background: #fbf9f6;
  border: .5px solid rgba(140, 113, 110, 0.15);
  border-radius: 10px;
  padding: 13px 12px;
}
#page-rider-portal .rv8-lifetime-icon{
  width: 22px;
  height: 22px;
  color: #8B1A1A;
  margin-bottom: 5px;
}
#page-rider-portal .rv8-lifetime-v4 .rv8-lifetime-l{
  font-size: 10px;
  font-weight: 600;
  color: #74777f;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 2px;
}
#page-rider-portal .rv8-lifetime-v4 .rv8-lifetime-v{
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
#page-rider-portal .rv8-lifetime-tag-v4{
  display: block;
  width: fit-content;
  margin: 14px auto 0;
  background: #e5e7eb;
  color: #4b5563;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 5px 12px;
  border-radius: 999px;
  position: relative;
  z-index: 1;
}

/* ═══ DOCUMENT CENTER — header bar OUTSIDE card ═══ */
#page-rider-portal .rv8-doc-section{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#page-rider-portal .rv8-doc-section-h{
  background: transparent !important;
  border: none !important;
  padding: 0 4px !important;
}
#page-rider-portal .rv8-doc-card{
  background: #fff;
  border: .5px solid rgba(140, 113, 110, 0.15);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}
/* Override v2 doc-row styling to match design */
#page-rider-portal .rv8-doc-card .rv8-doc-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px !important;
  border-top: none !important;
  border-bottom: .5px solid rgba(140, 113, 110, 0.15);
  gap: 12px;
}
#page-rider-portal .rv8-doc-card .rv8-doc-row:last-child{ border-bottom: none; }
#page-rider-portal .rv8-doc-card .rv8-doc-row:first-child{ padding-top: 14px !important; }
#page-rider-portal .rv8-doc-card .rv8-doc-l-wrap{
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
#page-rider-portal .rv8-doc-card .rv8-doc-icon{
  width: 40px !important;
  height: 40px !important;
  border-radius: 8px !important;
  background: #f9fafb !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#page-rider-portal .rv8-doc-card .rv8-doc-icon svg{
  width: 22px !important;
  height: 22px !important;
  color: var(--text) !important;
}
#page-rider-portal .rv8-doc-card .rv8-doc-text{ flex: 1; min-width: 0; }
#page-rider-portal .rv8-doc-card .rv8-doc-name{
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
#page-rider-portal .rv8-doc-card .rv8-doc-exp{
  font-size: 12px;
  color: #74777f;
  margin-top: 2px;
}
#page-rider-portal .rv8-doc-card .rv8-doc-exp.rv8-doc-exp-warn,
#page-rider-portal .rv8-doc-card .rv8-doc-exp.rv8-doc-exp-bad{
  color: var(--red);
  font-weight: 500;
}
/* Status pills — match design (green-50 / amber-50 / red-50 backgrounds) */
#page-rider-portal .rv8-doc-card .rv8-doc-status{
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 5px 10px;
  border-radius: 6px;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
#page-rider-portal .rv8-doc-card .rv8-doc-status-ok{
  background: #ecfdf5;
  color: #047857;
}
#page-rider-portal .rv8-doc-card .rv8-doc-status-warn{
  background: #fffbeb;
  color: #b45309;
}
#page-rider-portal .rv8-doc-card .rv8-doc-status-bad{
  background: #fef2f2;
  color: #b91c1c;
}

/* ═══ SIGN OUT + VERSION FOOTER ═══ */
#page-rider-portal .rv8-prof-footer-v4{
  padding-top: 16px;
  padding-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}
#page-rider-portal .rv8-signout-v4{
  width: 100%;
  padding: 14px;
  background: #fff;
  border: .5px solid #d1d5db;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  transition: background .15s;
}
#page-rider-portal .rv8-signout-v4:active{ background: #f9fafb; }
#page-rider-portal .rv8-prof-footer-v4 .rv8-prof-version{
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #9ca3af;
  line-height: 1.7;
}

/* ═══ HEADER — make title context-aware ═══ */
/* When body has a tab class (set via JS), header structure changes */
#page-rider-portal.rv8-tab-active-non-home .rv8-hero-h{
  border-radius: 50% !important; /* Round bubble for non-home tabs per design */
  width: 36px !important;
  height: 36px !important;
}
#page-rider-portal.rv8-tab-active-non-home .rv8-hero-text{
  display: flex;
  align-items: center;
}
#page-rider-portal.rv8-tab-active-non-home .rv8-hero-name{
  font-size: 18px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 0 !important;
}
#page-rider-portal.rv8-tab-active-non-home .rv8-hero-tag{
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   RV8 v5 — Card contrast fix (May 7 2026)
   Body bg gets a warm cream tint, cards get clearer borders + shadows.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ Body background — warm cream so cards stand out ═══ */
#page-rider-portal .rv8-scroll{
  background: #f5efe8 !important;  /* Warm taupe-cream — distinct from #fff and #f8f8f8 */
}

/* All cards get clearer borders + soft shadow for definition */
#page-rider-portal .rv8-card,
#page-rider-portal .rv8-greet,
#page-rider-portal .rv8-greet-v3,
#page-rider-portal .rv8-action-v3,
#page-rider-portal .rv8-balance-v3,
#page-rider-portal .rv8-payslip-v3,
#page-rider-portal .rv8-bike-v3{
  border: .5px solid rgba(140, 113, 110, 0.22) !important;
  box-shadow: 0 2px 8px -2px rgba(140, 113, 110, 0.08), 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

/* "Light grey" cards — keep different from white cards but distinct from body */
#page-rider-portal .rv8-action-v3,
#page-rider-portal .rv8-payslip-v3{
  background: #ebe5dc !important;  /* Slightly darker warm grey — distinct from cream body */
  border-color: rgba(140, 113, 110, 0.28) !important;
}

/* Sub-cards inside action card — ensure they pop on the darker grey */
#page-rider-portal .rv8-action-v3 .rv8-action-row{
  background: #fff !important;
  border-color: rgba(140, 113, 110, 0.18) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

/* White cards keep white but with stronger separation */
#page-rider-portal .rv8-greet-v3,
#page-rider-portal .rv8-balance-v3,
#page-rider-portal .rv8-bike-v3,
#page-rider-portal .rv8-info-card,
#page-rider-portal .rv8-doc-card{
  background: #fff !important;
}

/* Tip card (heatwave) — keep cream tone but distinct from body */
#page-rider-portal .rv8-tip-v3{
  background: #fff !important;
  border-left: 3px solid var(--acc) !important;
  border: .5px solid rgba(140, 113, 110, 0.22) !important;
  border-left: 3px solid var(--acc) !important;
  box-shadow: 0 2px 8px -2px rgba(140, 113, 110, 0.08);
}

/* Lifetime stats — distinct from body */
#page-rider-portal .rv8-lifetime-v4{
  background: #f0ebe4 !important;  /* Slightly darker than body */
  border-color: rgba(140, 113, 110, 0.22) !important;
}

/* Quick action buttons — slight lift */
#page-rider-portal .rv8-q-btn-v3{
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(140, 113, 110, 0.08) !important;
}

/* ═══ FIX: H logo bubble — ensure maroon shows through ═══ */
/* Stronger override in case shadows are washing it out */
#page-rider-portal .rv8-hero .rv8-hero-h{
  background: #8B1A1A !important;
  background-color: #8B1A1A !important;
  color: #fff !important;
}

/* ═══ FIX: GO ONLINE button — ensure maroon fill + white text visible ═══ */
#page-rider-portal .rv8-greet-actions .rv8-clock,
#page-rider-portal .rv8-greet-actions .rv8-clock-v3{
  background: #8B1A1A !important;
  background-color: #8B1A1A !important;
  color: #fff !important;
  border: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  min-width: 90px;
  text-align: center;
}
/* Online state — green */
#page-rider-portal .rv8-greet-actions .rv8-clock.online,
#page-rider-portal .rv8-greet-actions .rv8-clock-v3.online{
  background: #2d6a2e !important;
  background-color: #2d6a2e !important;
}

/* ═══ Body brand footer — readable on cream bg ═══ */
#page-rider-portal .rv8-brand-footer{
  background: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════════
   RV8 v7 — Header sticky reinforcement (May 7 2026)
   The .rv8-wrap is already position:fixed inset:0 with flex-column.
   This patch ensures the header never collapses and the scroll area
   actually scrolls internally instead of pushing header off-screen.
   ═══════════════════════════════════════════════════════════════════ */

/* Bulletproof rv8-wrap — fixed full-viewport, dynamic viewport height for mobile URL bar */
#page-rider-portal .rv8-wrap{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  height: 100dvh !important;
  /* Don't override z-index — let body.rider-mode rule manage it */
}

/* Header — never shrinks, always at top, above scroll content */
#page-rider-portal .rv8-hero,
#page-rider-portal .rv8-hero-glass{
  flex: 0 0 auto !important;
  position: relative !important;
  z-index: 60 !important;
  width: 100% !important;
}

/* Scroll body — flex:1 with min-height:0 (CRITICAL for flex scroll containers) */
#page-rider-portal .rv8-scroll{
  flex: 1 1 0% !important;
  min-height: 0 !important;       /* Without this, content can push parent taller than viewport */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}

/* ═══════════════════════════════════════════════════════════════════
   RV8 v8 — Design system unification (May 7 2026)
   One palette. One spacing scale. Three radii. Three shadows.
   Sits as final override layer — wins everything in cascade.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ Design tokens — scoped to rider portal ═══ */
#page-rider-portal{
  --rv-bg: #faf6f1;
  --rv-surface: #ffffff;
  --rv-surface-2: #f5f0e9;
  --rv-border: rgba(140, 113, 110, 0.20);
  --rv-border-strong: rgba(140, 113, 110, 0.32);
  --rv-text: #1a1c19;
  --rv-text-2: rgba(26, 28, 25, 0.60);
  --rv-text-3: rgba(26, 28, 25, 0.40);
  --rv-acc: #8B1A1A;
  --rv-success: #2d6a2e;
  --rv-warn: #B87333;
  --rv-danger: #991b1b;

  --rv-radius-sm: 8px;
  --rv-radius-md: 12px;
  --rv-radius-lg: 16px;

  --rv-pad-md: 16px;
  --rv-pad-lg: 18px;

  --rv-gap: 12px;
  --rv-gap-lg: 16px;

  --rv-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --rv-shadow-md: 0 2px 8px -2px rgba(140, 113, 110, 0.12), 0 1px 2px rgba(0, 0, 0, 0.03);
  --rv-shadow-lg: 0 4px 14px -4px rgba(140, 113, 110, 0.18), 0 2px 4px rgba(0, 0, 0, 0.04);
}

/* ═══ Body background — clean warm cream ═══ */
#page-rider-portal .rv8-scroll{
  background: var(--rv-bg) !important;
  padding: var(--rv-pad-md) !important;
  padding-bottom: 32px !important;
}
#page-rider-portal .rv8-tab{ display: none; }
#page-rider-portal .rv8-tab[style*="block"]{
  display: flex !important;
  flex-direction: column !important;
  gap: var(--rv-gap) !important;
}

/* ═══ Unified card baseline ═══ */
#page-rider-portal .rv8-card,
#page-rider-portal .rv8-greet,
#page-rider-portal .rv8-greet-v3,
#page-rider-portal .rv8-action-v3,
#page-rider-portal .rv8-balance-v3,
#page-rider-portal .rv8-payslip-v3,
#page-rider-portal .rv8-bike-v3,
#page-rider-portal .rv8-tip-v3,
#page-rider-portal .rv8-info-card,
#page-rider-portal .rv8-doc-card,
#page-rider-portal .rv8-lifetime-v4,
#page-rider-portal .rv8-earn-balance,
#page-rider-portal .rv8-perf-score,
#page-rider-portal .rv8-support-tile,
#page-rider-portal .rv8-prof-hero-v4 + section{
  background: var(--rv-surface) !important;
  border: .5px solid var(--rv-border) !important;
  border-radius: var(--rv-radius-md) !important;
  box-shadow: var(--rv-shadow-md) !important;
  padding: var(--rv-pad-md) !important;
  margin: 0 !important;
}

/* ═══ Secondary cards — slightly darker bg in same warm family ═══ */
#page-rider-portal .rv8-action-v3,
#page-rider-portal .rv8-payslip-v3,
#page-rider-portal .rv8-lifetime-v4{
  background: var(--rv-surface-2) !important;
  border-color: var(--rv-border-strong) !important;
}

/* Sub-cards inside action card — pop on the secondary bg */
#page-rider-portal .rv8-action-v3 .rv8-action-row{
  background: var(--rv-surface) !important;
  border: .5px solid var(--rv-border) !important;
  border-radius: var(--rv-radius-sm) !important;
  padding: 12px 14px !important;
  margin-bottom: 8px !important;
  box-shadow: var(--rv-shadow-sm) !important;
}
#page-rider-portal .rv8-action-v3 .rv8-action-row:last-child{ margin-bottom: 0 !important; }

/* ═══ Tip card — keep maroon left stripe accent ═══ */
#page-rider-portal .rv8-tip-v3{
  border-left: 3px solid var(--rv-acc) !important;
}

/* ═══ Card titles — unified typography ═══ */
#page-rider-portal .rv8-card-t,
#page-rider-portal .rv8-card-t-caps,
#page-rider-portal .rv8-info-card-h-t{
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  color: var(--rv-text-2) !important;
  margin: 0 !important;
}

/* Dash prefix — consistent across all titles that have ::before */
#page-rider-portal .rv8-card-t::before,
#page-rider-portal .rv8-card-t-caps::before{
  content: '';
  display: inline-block;
  width: 14px;
  height: 2px;
  background: var(--rv-acc);
  margin-right: 8px;
  vertical-align: middle;
  border-radius: 1px;
}

/* Card-h row spacing */
#page-rider-portal .rv8-card-h{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 12px !important;
  gap: 12px !important;
}

/* ═══ Display numerics — strong + tabular ═══ */
#page-rider-portal .rv8-bal-amt,
#page-rider-portal .rv8-pay-amt,
#page-rider-portal .rv8-earn-amt{
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1.1 !important;
}
#page-rider-portal .rv8-bal-amt{ color: var(--rv-acc) !important; }

#page-rider-portal .rv8-mini-v{
  font-size: 22px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.01em !important;
}
#page-rider-portal .rv8-mini-l{
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  color: var(--rv-text-2) !important;
}
#page-rider-portal .rv8-mini-sm{
  font-size: 13px !important;
  color: var(--rv-text-2) !important;
  font-weight: 600 !important;
}

/* ═══ Pills — unified ═══ */
#page-rider-portal .rv8-pill{
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
#page-rider-portal .rv8-pill-active{
  background: rgba(45, 106, 46, 0.10) !important;
  color: var(--rv-success) !important;
  border: none !important;
}
#page-rider-portal .rv8-pill-green{
  background: rgba(45, 106, 46, 0.10) !important;
  color: var(--rv-success) !important;
}
#page-rider-portal .rv8-pill-amber{
  background: rgba(184, 115, 51, 0.12) !important;
  color: var(--rv-warn) !important;
}
#page-rider-portal .rv8-pill-red{
  background: rgba(153, 27, 27, 0.10) !important;
  color: var(--rv-danger) !important;
}
#page-rider-portal .rv8-pill-soft{
  background: rgba(0, 0, 0, 0.04) !important;
  color: var(--rv-text-2) !important;
}

/* ═══ Buttons — unified ═══ */
#page-rider-portal .rv8-clock,
#page-rider-portal .rv8-clock-v3{
  background: var(--rv-acc) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--rv-radius-sm) !important;
  padding: 8px 14px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  box-shadow: var(--rv-shadow-sm) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
#page-rider-portal .rv8-clock.online,
#page-rider-portal .rv8-clock-v3.online{
  background: var(--rv-success) !important;
}

#page-rider-portal .rv8-q-btn,
#page-rider-portal .rv8-q-btn-v3{
  background: var(--rv-surface) !important;
  border: .5px solid var(--rv-acc) !important;
  color: var(--rv-acc) !important;
  border-radius: var(--rv-radius-md) !important;
  padding: 13px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: var(--rv-shadow-sm) !important;
}
#page-rider-portal .rv8-q-btn:active,
#page-rider-portal .rv8-q-btn-v3:active{
  background: rgba(139, 26, 26, 0.04) !important;
  transform: scale(0.98);
}

/* ═══ Greet card spacing ═══ */
#page-rider-portal .rv8-greet-v3{
  padding: var(--rv-pad-lg) !important;
}
#page-rider-portal .rv8-greet-v3 .rv8-greet-top{
  margin-bottom: 14px !important;
}
#page-rider-portal .rv8-greet-v3 .rv8-mini-stats{
  border-top: .5px solid var(--rv-border) !important;
  padding-top: 14px !important;
  margin-top: 0 !important;
}
#page-rider-portal .rv8-greet-v3 .rv8-mini:nth-child(2){
  border-left: .5px solid var(--rv-border) !important;
  border-right: .5px solid var(--rv-border) !important;
}

/* ═══ Avatar consistency ═══ */
#page-rider-portal .rv8-avatar{
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #f3f4f6 0%, #d1d5db 100%) !important;
  border: 2px solid #fff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  color: var(--rv-text-2) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* ═══ Bike plate — clean ═══ */
#page-rider-portal .rv8-plate-v3{
  background: var(--rv-surface) !important;
  border: 1px solid var(--rv-border-strong) !important;
  border-radius: var(--rv-radius-sm) !important;
  padding: 8px 10px !important;
  min-width: 100px !important;
  box-shadow: var(--rv-shadow-sm) !important;
}
#page-rider-portal .rv8-plate-emirate-row{
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--rv-text-2) !important;
  letter-spacing: 0.5px !important;
}
#page-rider-portal .rv8-plate-num-row{
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--rv-text) !important;
  font-variant-numeric: tabular-nums !important;
}

/* ═══ Bike chips — same surface, no double card-in-card feeling ═══ */
#page-rider-portal .rv8-bike-chips-v3 .rv8-bike-info-chip{
  background: var(--rv-surface-2) !important;
  border: .5px solid var(--rv-border) !important;
  border-radius: var(--rv-radius-sm) !important;
  padding: 10px 12px !important;
  box-shadow: none !important;
}

/* ═══ Account info card / Document card — header + rows alignment ═══ */
#page-rider-portal .rv8-info-card,
#page-rider-portal .rv8-doc-card{
  padding: 0 !important;
  overflow: hidden !important;
}
#page-rider-portal .rv8-info-card-h{
  padding: 12px var(--rv-pad-md) !important;
  border-bottom: .5px solid var(--rv-border) !important;
  background: var(--rv-surface) !important;
}
#page-rider-portal .rv8-info-card-body{
  padding: 4px var(--rv-pad-md) !important;
}
#page-rider-portal .rv8-info-row-v4{
  padding: 12px 0 !important;
  border-bottom: .5px solid var(--rv-border) !important;
}
#page-rider-portal .rv8-info-row-v4:last-child{ border-bottom: none !important; }

#page-rider-portal .rv8-doc-card .rv8-doc-row{
  padding: 14px var(--rv-pad-md) !important;
  border-top: none !important;
  border-bottom: .5px solid var(--rv-border) !important;
}
#page-rider-portal .rv8-doc-card .rv8-doc-row:last-child{ border-bottom: none !important; }
#page-rider-portal .rv8-doc-card .rv8-doc-icon{
  width: 40px !important;
  height: 40px !important;
  border-radius: var(--rv-radius-sm) !important;
  background: var(--rv-surface-2) !important;
}

/* ═══ Doc status pills — match warm palette ═══ */
#page-rider-portal .rv8-doc-status-ok{
  background: rgba(45, 106, 46, 0.10) !important;
  color: var(--rv-success) !important;
}
#page-rider-portal .rv8-doc-status-warn{
  background: rgba(184, 115, 51, 0.12) !important;
  color: var(--rv-warn) !important;
}
#page-rider-portal .rv8-doc-status-bad{
  background: rgba(153, 27, 27, 0.10) !important;
  color: var(--rv-danger) !important;
}

/* ═══ Lifetime stats — sub-cards ═══ */
#page-rider-portal .rv8-lifetime-stat-v4{
  background: var(--rv-surface) !important;
  border: .5px solid var(--rv-border) !important;
  border-radius: var(--rv-radius-sm) !important;
  box-shadow: none !important;
}

/* ═══ Sign out button — consistent with quick action style ═══ */
#page-rider-portal .rv8-signout-v4{
  background: var(--rv-surface) !important;
  border: .5px solid var(--rv-border-strong) !important;
  border-radius: var(--rv-radius-md) !important;
  box-shadow: var(--rv-shadow-sm) !important;
  font-weight: 600 !important;
}

/* ═══ Earnings tab — current balance card spacing ═══ */
#page-rider-portal .rv8-earn-balance{
  padding: var(--rv-pad-lg) !important;
}
#page-rider-portal .rv8-earn-amt{
  margin: 8px 0 4px !important;
}
#page-rider-portal .rv8-btn-primary{
  background: var(--rv-acc) !important;
  border-radius: var(--rv-radius-sm) !important;
  box-shadow: var(--rv-shadow-sm) !important;
}

/* ═══ Perf score ring — unified spacing ═══ */
#page-rider-portal .rv8-perf-score{
  padding: var(--rv-pad-lg) !important;
}
#page-rider-portal .rv8-perf-stat{
  background: var(--rv-surface-2) !important;
  border: .5px solid var(--rv-border) !important;
  border-radius: var(--rv-radius-sm) !important;
  box-shadow: none !important;
}

/* ═══ Brand footer — quiet ═══ */
#page-rider-portal .rv8-brand-footer{
  padding: 16px 0 8px !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-size: 10px !important;
  color: var(--rv-text-3) !important;
  letter-spacing: 0.5px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   RV8 v9 — Sleek palette refinement (May 7 2026)
   Body becomes warm grey (~7% darker than cards) so white cards
   visibly elevate. Borders thinner. Shadows stronger.
   ═══════════════════════════════════════════════════════════════════ */

/* Override v8 design tokens with refined values */
#page-rider-portal{
  --rv-bg: #ece8e0 !important;            /* warm grey — cards visibly lift */
  --rv-surface: #ffffff !important;       /* unchanged */
  --rv-surface-2: #f9f5ef !important;     /* between body + white — secondary cards */

  --rv-border: rgba(140, 113, 110, 0.14) !important;        /* thinner / softer */
  --rv-border-strong: rgba(140, 113, 110, 0.22) !important;

  --rv-text: #1a1c19 !important;
  --rv-text-2: rgba(26, 28, 25, 0.62) !important;
  --rv-text-3: rgba(26, 28, 25, 0.40) !important;

  /* Stronger shadow scale — cards now genuinely elevate */
  --rv-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  --rv-shadow-md: 0 3px 12px -3px rgba(140, 113, 110, 0.18), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  --rv-shadow-lg: 0 8px 24px -8px rgba(140, 113, 110, 0.25), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

/* Header — refined frosted glass on warmer body */
#page-rider-portal .rv8-hero-glass{
  background: rgba(255, 255, 255, 0.65) !important;
  backdrop-filter: blur(20px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
  border-bottom: .5px solid rgba(140, 113, 110, 0.14) !important;
  box-shadow: 0 4px 12px -6px rgba(140, 113, 110, 0.10) !important;
}

/* Body now warm grey — cards lift cleanly */
#page-rider-portal .rv8-scroll{
  background: var(--rv-bg) !important;
}

/* All white cards — stronger shadow for visible elevation */
#page-rider-portal .rv8-greet-v3,
#page-rider-portal .rv8-balance-v3,
#page-rider-portal .rv8-bike-v3,
#page-rider-portal .rv8-tip-v3,
#page-rider-portal .rv8-info-card,
#page-rider-portal .rv8-doc-card,
#page-rider-portal .rv8-earn-balance,
#page-rider-portal .rv8-perf-score,
#page-rider-portal .rv8-card{
  background: var(--rv-surface) !important;
  border: .5px solid var(--rv-border) !important;
  box-shadow: var(--rv-shadow-md) !important;
}

/* Secondary cards — softer, no shadow (recessed feel) */
#page-rider-portal .rv8-action-v3,
#page-rider-portal .rv8-payslip-v3,
#page-rider-portal .rv8-lifetime-v4{
  background: var(--rv-surface-2) !important;
  border: .5px solid var(--rv-border) !important;
  box-shadow: none !important;
}

/* Sub-cards inside secondary cards — white pop */
#page-rider-portal .rv8-action-v3 .rv8-action-row{
  background: var(--rv-surface) !important;
  border: .5px solid var(--rv-border) !important;
  box-shadow: var(--rv-shadow-sm) !important;
}

/* Bike chips inside white bike card — secondary tone */
#page-rider-portal .rv8-bike-chips-v3 .rv8-bike-info-chip{
  background: var(--rv-surface-2) !important;
  border: .5px solid var(--rv-border) !important;
  box-shadow: none !important;
}

/* Lifetime stat sub-cards */
#page-rider-portal .rv8-lifetime-stat-v4{
  background: var(--rv-surface) !important;
  border: .5px solid var(--rv-border) !important;
  box-shadow: var(--rv-shadow-sm) !important;
}

/* Perf stats inside white score card — secondary tone */
#page-rider-portal .rv8-perf-stat{
  background: var(--rv-surface-2) !important;
  border: .5px solid var(--rv-border) !important;
}

/* Tip card — keep maroon stripe, refresh borders to v9 tokens */
#page-rider-portal .rv8-tip-v3{
  border-left: 3px solid var(--rv-acc) !important;
}

/* Quick action buttons — sleeker shadow */
#page-rider-portal .rv8-q-btn,
#page-rider-portal .rv8-q-btn-v3{
  background: var(--rv-surface) !important;
  border: .5px solid var(--rv-acc) !important;
  box-shadow: var(--rv-shadow-sm) !important;
}

/* Sign-out — match new shadow scale */
#page-rider-portal .rv8-signout-v4{
  background: var(--rv-surface) !important;
  border: .5px solid var(--rv-border-strong) !important;
  box-shadow: var(--rv-shadow-sm) !important;
}

/* Profile avatar gold ring — softer in new palette */
#page-rider-portal .rv8-prof-avatar-ring{
  box-shadow: 0 4px 14px -2px rgba(139, 26, 26, 0.25) !important;
}

/* Bottom nav — refined to match v9 tokens (the "tabs" the user sees) */
#rider-bottom-nav.rv8-bnav{
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(20px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
  border-top: .5px solid rgba(140, 113, 110, 0.14) !important;
  box-shadow: 0 -4px 12px -6px rgba(140, 113, 110, 0.10) !important;
}

/* ═══ Polish: card padding consistency and rhythm ═══ */
#page-rider-portal .rv8-card,
#page-rider-portal .rv8-greet-v3,
#page-rider-portal .rv8-action-v3,
#page-rider-portal .rv8-balance-v3,
#page-rider-portal .rv8-payslip-v3,
#page-rider-portal .rv8-bike-v3,
#page-rider-portal .rv8-tip-v3{
  padding: 16px !important;
}

/* Hero greet card — slightly more breathing room */
#page-rider-portal .rv8-greet-v3{
  padding: 18px !important;
}

/* Card titles — slightly stronger color contrast on new palette */
#page-rider-portal .rv8-card-t,
#page-rider-portal .rv8-card-t-caps,
#page-rider-portal .rv8-info-card-h-t{
  color: var(--rv-text) !important;
  opacity: 0.85 !important;
}

/* Brand footer — quiet, integrated into body bg */
#page-rider-portal .rv8-brand-footer{
  color: var(--rv-text-3) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   RV8 v11 — Truly unsticky header (May 7 2026)
   Wrap itself becomes the scroll container — header scrolls away with content.
   ═══════════════════════════════════════════════════════════════════ */

/* Wrap — fixed full screen frame, but NOW the scroll container itself */
#page-rider-portal .rv8-wrap{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: block !important;        /* not flex anymore */
  height: 100dvh !important;
  overflow-y: auto !important;       /* THIS is the scroll context now */
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}

/* Header — natural block in flow, scrolls with everything else */
#page-rider-portal .rv8-hero,
#page-rider-portal .rv8-hero-glass{
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  height: auto !important;
  z-index: auto !important;
  flex: none !important;
  margin: 0 !important;
}

/* Scroll body — no longer scrolls itself. Just a content wrapper. */
#page-rider-portal .rv8-scroll{
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;       /* don't trap scroll here */
  flex: none !important;
  padding-top: 16px !important;
}

/* Account for fixed bottom nav so last card isn't hidden under it */
#page-rider-portal .rv8-scroll{
  padding-bottom: 90px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   RV8 v12 — Status bar safe-area padding (May 7 2026)
   Adds top padding so content starts BELOW the device status bar.
   ═══════════════════════════════════════════════════════════════════ */

/* Push header content below status bar — works on Android + iOS notches */
#page-rider-portal .rv8-hero,
#page-rider-portal .rv8-hero-glass{
  padding-top: max(14px, env(safe-area-inset-top, 28px)) !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  padding-bottom: 12px !important;
  box-sizing: border-box !important;
}

/* If wrap is the scroll container (post-v11), make sure status bar area has bg matching header
   so when you scroll, you see the header bg behind the status bar, not page bg poking through */
#page-rider-portal .rv8-wrap{
  /* padding-top is NOT added here — header carries it. Wrap stays inset:0. */
}

/* Bottom nav also needs safe-area padding for gesture/notch bars */
#rider-bottom-nav.rv8-bnav{
  padding-bottom: max(8px, env(safe-area-inset-bottom, 8px)) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   RV8 v13 — Status bar clearance, hardcoded (May 7 2026)
   env(safe-area-inset-top) returns 0 because viewport-fit=cover isn't set
   on the page meta. Hardcode a sufficient minimum header top padding.
   ═══════════════════════════════════════════════════════════════════ */

/* Force generous top padding on header — clears Android status bar (typically 24-28dp) */
#page-rider-portal .rv8-hero,
#page-rider-portal .rv8-hero-glass{
  padding-top: 32px !important;     /* Guaranteed clearance regardless of env() */
  padding-left: 16px !important;
  padding-right: 16px !important;
  padding-bottom: 14px !important;
  box-sizing: border-box !important;
  min-height: 80px !important;       /* 32 + 38 (H logo) + 14 = 84, give breathing room */
}

/* H logo — ensure it never overflows the header upward */
#page-rider-portal .rv8-hero .rv8-hero-h,
#page-rider-portal .rv8-hero-glass .rv8-hero-h{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  position: relative !important;
  flex-shrink: 0 !important;
}

/* Bottom nav — generous bottom padding for gesture bar devices */
#rider-bottom-nav.rv8-bnav{
  padding-bottom: 12px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   RV8 v14 — Wrap bg matches body (May 7 2026)
   The .rv8-wrap had background:#fff which showed as a white strip
   under the status bar. Match it to the warm-grey body bg.
   ═══════════════════════════════════════════════════════════════════ */

#page-rider-portal .rv8-wrap{
  background: var(--rv-bg) !important;     /* warm grey, matches body */
}

/* Also ensure the page-rider-portal page itself has matching bg
   in case the wrap is briefly hidden during nav transitions */
#page-rider-portal{
  background: var(--rv-bg) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   RV8 v15 — Push wrap below status bar (May 7 2026)
   The .rv8-wrap was drawing behind the device status bar. Reserve
   space for it at the top of the wrap, so header sits cleanly below.
   ═══════════════════════════════════════════════════════════════════ */

/* Reserve status bar zone at top of wrap — header won't touch status bar */
#page-rider-portal .rv8-wrap{
  padding-top: 36px !important;     /* status bar height (24-32dp typical) + buffer */
  background: var(--rv-bg) !important;
}

/* Header — normal inner padding, not 32px (no longer needed at this level) */
#page-rider-portal .rv8-hero,
#page-rider-portal .rv8-hero-glass{
  padding-top: 14px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  padding-bottom: 12px !important;
  min-height: auto !important;     /* let header size naturally */
}

/* ═══════════════════════════════════════════════════════════════════
   RV8 v16 — Header bg extends behind status bar (May 7 2026)
   Remove wrap padding (no more grey gap), give header big top padding
   so its cream bg fills the status bar zone naturally.
   ═══════════════════════════════════════════════════════════════════ */

/* Wrap — back to no top padding */
#page-rider-portal .rv8-wrap{
  padding-top: 0 !important;
  background: var(--rv-bg) !important;
}

/* Header — big top padding so its bg extends behind status bar,
   while H logo + title + bell sit safely below status bar */
#page-rider-portal .rv8-hero,
#page-rider-portal .rv8-hero-glass{
  padding-top: 48px !important;     /* status bar (~28-32px) + breathing room */
  padding-left: 16px !important;
  padding-right: 16px !important;
  padding-bottom: 14px !important;
  min-height: auto !important;
  margin-top: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   RV8 v17 — Native status bar fix landed (May 8 2026)
   APK v2.1.2 paints the native status bar cream (#FDF6F1) via
   AppTheme.NoActionBar (postSplashScreenTheme) + programmatic
   setStatusBarColor in MainActivity. The v15/v16 padding-top hacks
   were workarounds for the missing native fix — they create a 48px
   cream void above the H logo now. Revert hero to natural 14px.
   ═══════════════════════════════════════════════════════════════════ */

#page-rider-portal .rv8-wrap{
  padding-top: 0 !important;
  background: var(--rv-bg) !important;
}

#page-rider-portal .rv8-hero,
#page-rider-portal .rv8-hero-glass{
  padding-top: 14px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  padding-bottom: 14px !important;
  min-height: auto !important;
  margin-top: 0 !important;
}

/* 8 May 2026 — Live Map controls float on dark map tiles. The default pill/input
   styling is built for light backgrounds (var(--t3) text, dark input text) and
   becomes nearly invisible against the dark navy glass wrappers. These scoped
   overrides give the floating map controls white-on-dark legibility. */
#page-map #map-controls .pill-btn { color: rgba(255,255,255,.78); }
#page-map #map-controls .pill-btn:hover { background: rgba(255,255,255,.12); color:#fff; border-color: rgba(255,255,255,.20); box-shadow:none; }
#page-map #map-search { color:#fff !important; background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.14) !important; }
#page-map #map-search::placeholder { color: rgba(255,255,255,.55); }
#page-map #map-zoom-btns button { color: rgba(255,255,255,.85) !important; }
#page-map #map-zoom-btns button:hover { background: rgba(255,255,255,.10) !important; }


/* ─── Glass Confirm Modal — unified replacement for window.confirm() ─── */
.glass-confirm-overlay{
  position:fixed;inset:0;z-index:10000;
  background:rgba(20,18,18,0.32);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .18s cubic-bezier(.2,1,.3,1);
  padding:24px;
}
.glass-confirm-overlay.show{opacity:1;pointer-events:auto}
.glass-confirm-card{
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(95,100,120,.18);
  border-radius:18px;
  box-shadow:0 24px 64px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.7);
  padding:24px 24px 20px;
  width:min(440px,100%);
  transform:scale(.94) translateY(8px);
  transition:transform .22s cubic-bezier(.2,1,.3,1);
}
.glass-confirm-overlay.show .glass-confirm-card{transform:scale(1) translateY(0)}
.glass-confirm-title{
  font-size:16px;font-weight:700;color:var(--t1,#1c1c1e);
  margin-bottom:8px;letter-spacing:-.2px;
}
.glass-confirm-msg{
  font-size:13.5px;line-height:1.55;color:var(--t2,#555);
  white-space:pre-wrap;margin-bottom:20px;
}
.glass-confirm-actions{
  display:flex;justify-content:flex-end;gap:8px;
}
.glass-confirm-actions button{
  min-width:96px;font-size:13px;font-weight:600;
  padding:9px 18px;border-radius:10px;border:1px solid;
  cursor:pointer;font-family:inherit;
  transition:transform .12s cubic-bezier(.3,1,.5,1),box-shadow .12s;
}
.glass-confirm-actions button:active{transform:scale(.97)}
.glass-confirm-actions .gc-cancel{
  background:rgba(255,255,255,.7);color:var(--t2,#555);
  border-color:rgba(95,100,120,.18);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.glass-confirm-actions .gc-cancel:hover{
  background:rgba(255,255,255,.92);
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.glass-confirm-actions .gc-ok{
  background:rgba(139,26,26,.92);color:#fff;
  border-color:rgba(139,26,26,.55);
  box-shadow:0 2px 8px rgba(139,26,26,.18);
}
.glass-confirm-actions .gc-ok:hover{
  background:rgba(139,26,26,1);
  box-shadow:0 4px 14px rgba(139,26,26,.28);
}
.glass-confirm-actions .gc-ok.gc-danger{
  background:rgba(180,30,30,.92);
  border-color:rgba(180,30,30,.55);
  box-shadow:0 2px 8px rgba(180,30,30,.22);
}
.glass-confirm-actions .gc-ok.gc-danger:hover{
  background:rgba(180,30,30,1);
  box-shadow:0 4px 14px rgba(180,30,30,.32);
}
.glass-confirm-actions .gc-ok.gc-info{
  background:rgba(24,95,165,.92);
  border-color:rgba(24,95,165,.55);
  box-shadow:0 2px 8px rgba(24,95,165,.18);
}
.glass-confirm-actions .gc-ok.gc-info:hover{
  background:rgba(24,95,165,1);
  box-shadow:0 4px 14px rgba(24,95,165,.28);
}
@media (max-width:480px){
  .glass-confirm-card{padding:20px 18px 16px}
  .glass-confirm-actions button{min-width:0;flex:1}
}

/* Compact filter bars inside the New Advance modal — refined polish pass */
#na-plat-row.pill-slider-wrap,
#na-veh-row.pill-slider-wrap {
  padding: 3px !important;
  border-radius: 8px !important;
  gap: 1px !important;
  background: rgba(120,120,128,.06) !important;
  border: 1px solid rgba(95,100,120,.10) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.02);
  width: 100%;
  justify-content: space-between;
}
#na-plat-row .pill-btn,
#na-veh-row .pill-btn {
  font-size: 10.5px !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  letter-spacing: -.005em;
  flex: 1;
  text-align: center;
}
/* Tighten af-inp inside the modal to match the compact density */
#fa-body #na-courier-search,
#fa-body #na-amt,
#fa-body #na-note {
  background: rgba(120,120,128,.06) !important;
  border: 1px solid rgba(95,100,120,.10) !important;
}
#fa-body #na-courier-search:focus,
#fa-body #na-amt:focus,
#fa-body #na-note:focus {
  background: #fff !important;
  border-color: rgba(10,132,255,.40) !important;
  box-shadow: 0 0 0 3px rgba(10,132,255,.10) !important;
}
/* Period select softer focus */
#fa-body #na-period:focus {
  outline: none;
  border-color: rgba(139,26,26,.40) !important;
  box-shadow: 0 0 0 2px rgba(139,26,26,.10) !important;
}

/* Onboarding picker — mirror of New Advance compact filter bars (13 May 2026 v2) */
#ob-plat-row.pill-slider-wrap,
#ob-veh-row.pill-slider-wrap {
  padding: 3px !important;
  border-radius: 8px !important;
  gap: 1px !important;
  background: rgba(120,120,128,.06) !important;
  border: 1px solid rgba(95,100,120,.10) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.02);
  width: 100%;
  justify-content: space-between;
  display: inline-flex;
}
#ob-plat-row .pill-btn,
#ob-veh-row .pill-btn {
  font-size: 10.5px !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  letter-spacing: -.005em;
  flex: 1;
  text-align: center;
}
#onboard-form-overlay #ob-rider-search {
  background: rgba(120,120,128,.06) !important;
  border: 1px solid rgba(95,100,120,.10) !important;
}
#onboard-form-overlay #ob-rider-search:focus {
  background: #fff !important;
  border-color: rgba(10,132,255,.40) !important;
  box-shadow: 0 0 0 3px rgba(10,132,255,.10) !important;
}

/* [22 May 2026, docs-tab-visual-redesign] */

.cp-docs-section {
  background: #f8f9fd;
  border: 1px solid rgba(95,100,120,.08);
  border-radius: 14px;
  padding: 16px;
}
.cp-docs-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.cp-docs-section-title {
  font-size: 14px;
  font-weight: 600;
  color: #1a1c19;
  letter-spacing: -.005em;
}
.cp-docs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 900px) {
  .cp-docs-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .cp-docs-grid { grid-template-columns: 1fr; }
}

/* [28 May 2026] Paired IDs section above the main grid */
.cp-docs-pairs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.cp-doc-pair {
  background: rgba(255,255,255,.7);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border: 1px solid rgba(95,100,120,.12);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: inset 0 .5px 0 rgba(255,255,255,.6), 0 1px 3px rgba(26,28,25,.06);
  transition: box-shadow .15s ease;
}
.cp-doc-pair:hover {
  box-shadow: inset 0 .5px 0 rgba(255,255,255,.6), 0 4px 16px rgba(26,28,25,.08);
}
.cp-doc-pair-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.cp-doc-pair-title {
  font-size: 13px;
  font-weight: 600;
  color: #1a1c19;
  letter-spacing: -.005em;
}
.cp-doc-pair-sides {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 480px) {
  .cp-doc-pair-sides { grid-template-columns: 1fr; }
}
.cp-doc-side {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cp-doc-side-label {
  font-size: 10px;
  font-weight: 600;
  color: rgba(26,28,25,.45);
  text-transform: uppercase;
  letter-spacing: .06em;
  text-align: center;
}
.cp-doc-side-thumb {
  background: #f8f9fd;
  border-radius: 10px;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.cp-doc-side-thumb.is-empty {
  border: 1.5px dashed rgba(95,100,120,.18);
}
.cp-doc-side-thumb.has-file {
  background: #f6f7fb;
  cursor: pointer;
}
.cp-doc-side-thumb.has-file:hover { filter: brightness(.96); }
.cp-doc-side-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cp-doc-side-btn {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(139,26,26,.25);
  background: rgba(255,255,255,.7);
  color: #8B1A1A;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: -.005em;
  font-family: var(--font);
  text-align: center;
  transition: all .15s ease;
}
.cp-doc-side-btn:hover { background: #8B1A1A; color: #fff; }
.cp-doc-side-btn.primary { background: #8B1A1A; color: #fff; }
.cp-doc-side-btn.primary:hover { background: #701515; }

.cp-doc-card {
  background: rgba(255,255,255,.7);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border: 1px solid rgba(95,100,120,.12);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 188px;
  box-shadow: inset 0 .5px 0 rgba(255,255,255,.6), 0 1px 3px rgba(26,28,25,.06);
  transition: box-shadow .15s ease, transform .15s ease;
}
.cp-doc-card:hover {
  box-shadow: inset 0 .5px 0 rgba(255,255,255,.6), 0 4px 16px rgba(26,28,25,.08);
}

.cp-doc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.cp-doc-title {
  font-size: 12px;
  font-weight: 600;
  color: #1a1c19;
  letter-spacing: -.005em;
}
.cp-doc-status {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: -.005em;
}
.cp-doc-status-on {
  background: #eef6ee;
  color: #2d6a2e;
}
.cp-doc-status-miss {
  background: #edeef2;
  color: rgba(26,28,25,.5);
}
.cp-doc-status-warn {
  background: #fef3e2;
  color: #854F0B;
}
.cp-doc-status-danger {
  background: #fdf0ee;
  color: #991b1b;
}
.cp-doc-status-bike {
  background: #e6f1fb;
  color: var(--accent);
}

.cp-doc-thumb {
  background: #f8f9fd;
  border-radius: 8px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: rgba(26,28,25,.4);
  font-size: 11px;
  position: relative;
}
.cp-doc-thumb.is-empty {
  border: 1px dashed rgba(95,100,120,.18);
}
.cp-doc-thumb.has-file {
  background: #f6f7fb;
  cursor: pointer;
}
.cp-doc-thumb.has-file:hover { filter: brightness(.96); }
.cp-doc-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cp-doc-meta {
  font-size: 11px;
  color: rgba(26,28,25,.5);
  font-family: var(--mono, monospace);
  letter-spacing: -.02em;
  min-height: 14px;
}
.cp-doc-meta-empty { color: rgba(26,28,25,.3); font-family: var(--font); }

.cp-doc-actions {
  display: flex;
  gap: 6px;
  margin-top: auto;
}
.cp-doc-btn-upload {
  flex: 1;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid rgba(139,26,26,.25);
  background: rgba(255,255,255,.7);
  backdrop-filter: saturate(180%) blur(12px);
  color: #8B1A1A;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: -.005em;
  font-family: var(--font);
  box-shadow: inset 0 .5px 0 rgba(255,255,255,.6);
  transition: all .15s ease;
}
.cp-doc-btn-upload:hover { background: #8B1A1A; color: #fff; }
.cp-doc-btn-upload.primary { background: #8B1A1A; color: #fff; }
.cp-doc-btn-upload.primary:hover { background: #701515; }
.cp-doc-btn-icon {
  padding: 7px 9px;
  border-radius: 8px;
  border: 1px solid rgba(95,100,120,.2);
  background: rgba(255,255,255,.7);
  backdrop-filter: saturate(180%) blur(12px);
  color: #58413f;
  cursor: pointer;
  font-size: 0;
  line-height: 0;
  transition: all .15s ease;
}
.cp-doc-btn-icon:hover { background: #fff; color: #991b1b; border-color: rgba(196,48,43,.3); }
.cp-doc-btn-icon svg { display: block; }

.cp-doc-mulkiya-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: #e6f1fb;
  border: 1px solid rgba(24,95,165,.15);
  border-radius: 10px;
  gap: 12px;
}
.cp-doc-mulkiya-banner-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: -.005em;
}
.cp-doc-mulkiya-banner-sub {
  font-size: 11px;
  color: rgba(24,95,165,.7);
  margin-top: 2px;
  font-weight: 400;
}
.cp-doc-mulkiya-banner button {
  font-size: 11px;
  color: var(--accent);
  border: 1px solid rgba(24,95,165,.25);
  background: rgba(255,255,255,.7);
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--font);
  font-weight: 500;
  white-space: nowrap;
}
.cp-doc-mulkiya-banner button:hover { background: var(--accent); color: #fff; }

.cp-docs-expiry-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  margin-left: 6px;
  letter-spacing: -.005em;
}
.cp-docs-expiry-pill.ok { background: #eef6ee; color: #2d6a2e; }
.cp-docs-expiry-pill.warn { background: #fef3e2; color: #854F0B; }
.cp-docs-expiry-pill.danger { background: #fdf0ee; color: #991b1b; }

/* [22 May 2026, docs-addcat] Add doc category button + modal fade animation */
.btn-add-doc-cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px dashed rgba(139,26,26,.4);
  background: rgba(139,26,26,.04);
  color: #8B1A1A;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font);
  letter-spacing: -.005em;
  transition: all .15s ease;
}
.btn-add-doc-cat:hover {
  background: rgba(139,26,26,.08);
  border-color: rgba(139,26,26,.55);
}
.btn-add-doc-cat svg {
  display: block;
}
@keyframes docsCatFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Searchable courier picker (cpick-*) — clones .af-inp + .drp-menu using existing :root tokens. */
.cpick-wrap{position:relative;}
.cpick-input{padding-left:34px;}
.cpick-icon{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--t3);font-size:12px;pointer-events:none;z-index:1;display:flex;align-items:center;justify-content:center;}
.cpick-panel{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:9999;background:rgba(255,255,255,.98);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);border-radius:13px;border:1px solid var(--b2);box-shadow:0 8px 32px rgba(0,0,0,.08);padding:4px 0;max-height:280px;overflow-y:auto;opacity:0;transform:scale(.92) translateY(-6px);transition:opacity .2s var(--spring-snappy),transform .25s var(--spring-snappy);pointer-events:none;}
.cpick-panel.open{opacity:1;transform:scale(1) translateY(0);pointer-events:auto;}
.cpick-row{display:flex;align-items:center;gap:10px;padding:10px 14px;font-family:var(--font);font-size:14px;font-weight:400;color:var(--text);cursor:pointer;transition:background .08s;position:relative;-webkit-tap-highlight-color:transparent;}
.cpick-row:not(:last-child)::after{content:'';position:absolute;bottom:0;left:14px;right:14px;height:.5px;background:rgba(0,0,0,.04);}
.cpick-row:hover,.cpick-row.active{background:rgba(0,0,0,.04);}
.cpick-avatar{width:28px;height:28px;border-radius:50%;background:rgba(139,26,26,.12);color:var(--acc);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.cpick-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cpick-empty{padding:18px 14px;text-align:center;color:var(--t3);font-size:13px;font-family:var(--font);}
/* Action Board — animated fold + detail + 4D card polish */
.pb-det{overflow:hidden;max-height:0;opacity:0;transition:max-height .32s cubic-bezier(.4,0,.2,1),opacity .26s}
.pb-secwrap{will-change:max-height}
.pb-chev{transition:transform .3s cubic-bezier(.4,0,.2,1)}
.pb-sechead:active{transform:scale(.992)}
@media (prefers-reduced-motion:reduce){.pb-det,.pb-secwrap,.pb-chev{transition:none}}

/* ── Action Board filter toolbar — clean glass pills (Stage 3c polish) ── */
.abf-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.abf-seg{display:inline-flex;align-items:center;gap:3px;padding:3px;background:rgba(255,255,255,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(95,100,120,.14);border-radius:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 1px 2px rgba(0,0,0,.03)}
.abf-pill{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid transparent;color:var(--t3);font-size:11.5px;font-weight:600;padding:6px 12px;border-radius:9px;cursor:pointer;transition:all .15s;font-family:inherit;white-space:nowrap;line-height:1.15}
.abf-pill:hover{background:#fff;color:var(--accent);border-color:rgba(24,95,165,.2);box-shadow:0 1px 4px rgba(24,95,165,.14),inset 0 1px 0 rgba(255,255,255,.9);font-weight:700}
.abf-pill.on{background:#fff;color:var(--accent);border-color:rgba(24,95,165,.2);box-shadow:0 1px 4px rgba(24,95,165,.14),inset 0 1px 0 rgba(255,255,255,.9);font-weight:700}
.abf-pill:active{transform:scale(.96)}
.abf-n{font-size:9.5px;font-weight:700;min-width:16px;height:16px;padding:0 4px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;background:rgba(95,100,120,.14);color:var(--t3);transition:all .15s}
.abf-pill.on .abf-n{background:rgba(24,95,165,.14);color:var(--accent)}
.abf-btn{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(95,100,120,.14);color:var(--t2);font-size:11.5px;font-weight:600;padding:7px 13px;border-radius:11px;cursor:pointer;transition:all .15s;font-family:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 1px 2px rgba(0,0,0,.03);line-height:1.15}
.abf-btn:hover{color:var(--accent);border-color:rgba(24,95,165,.2)}
.abf-btn:active{transform:scale(.97)}
.abf-scope{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--accent);background:rgba(24,95,165,.08);border:1px solid rgba(24,95,165,.2);padding:6px 11px;border-radius:999px;box-shadow:inset 0 1px 0 rgba(255,255,255,.6);white-space:nowrap}
.abf-scope-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(24,95,165,.14)}
.abf-search{flex:1;min-width:170px;max-width:280px;font-family:var(--font);font-size:12px;padding:7px 12px;border:1px solid rgba(95,100,120,.16);border-radius:11px;background:#fff;color:var(--text);outline:none;box-sizing:border-box;transition:all .15s}
.abf-search:focus{border-color:rgba(24,95,165,.32);box-shadow:0 0 0 3px rgba(24,95,165,.08)}
@media(max-width:640px){.abf-search{max-width:none;width:100%;flex-basis:100%}.abf-scope{margin-left:0!important}}

/* ── Action Board layouts: Compact / Table / Grid (Stage 3c) ── */
.pbl-sec{margin-bottom:14px}
.pbl-sechd{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--text);padding:7px 4px 9px}
.pbl-dot{width:9px;height:9px;border-radius:50%;display:inline-block;box-shadow:0 0 0 3px rgba(0,0,0,.03)}
.pbl-rows{display:flex;flex-direction:column;gap:5px}
.pbl-row{display:grid;grid-template-columns:24px minmax(110px,1.4fr) minmax(80px,1fr) 48px minmax(120px,2fr);align-items:center;gap:10px;background:#fff;border:1px solid rgba(95,100,120,.16);border-radius:10px;padding:7px 11px;cursor:pointer;transition:all .12s;box-shadow:0 1px 2px rgba(0,0,0,.02)}
.pbl-row:hover{border-color:rgba(24,95,165,.28);box-shadow:0 2px 9px rgba(24,95,165,.09);transform:translateY(-1px)}
.pbl-nm{font-size:12.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pbl-sub{font-size:11px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pbl-stat{font-size:12.5px;font-weight:700;color:var(--text);text-align:right;font-variant-numeric:tabular-nums}
.pbl-reason{font-size:11px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:720px){.pbl-row{grid-template-columns:24px 1fr 48px;gap:8px}.pbl-sub,.pbl-reason{display:none}}
.pbl-tablewrap{overflow-x:auto;border:1px solid rgba(95,100,120,.16);border-radius:12px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.02)}
.pbl-table{width:100%;border-collapse:collapse;font-size:12px;font-family:var(--font)}
.pbl-table thead th{position:sticky;top:0;background:#fbfafa;text-align:left;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--t3);padding:9px 12px;border-bottom:1px solid rgba(95,100,120,.16);cursor:pointer;white-space:nowrap;user-select:none;transition:color .12s}
.pbl-table thead th:hover{color:var(--accent)}
.pbl-th-active{color:var(--accent)!important}
.pbl-table td{padding:8px 12px;border-bottom:1px solid rgba(95,100,120,.07);color:var(--text);white-space:nowrap;vertical-align:middle}
.pbl-trow{cursor:pointer;transition:background .12s}
.pbl-trow:hover{background:rgba(24,95,165,.045)}
.pbl-tname{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.pbl-bpill{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;padding:2px 9px;border-radius:999px;white-space:nowrap}
.pbl-treason{color:var(--t2)!important;white-space:normal!important;max-width:300px;font-size:11.5px}
.pbl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:8px}
.pbl-tile{position:relative;border-radius:12px;padding:12px 10px 11px;cursor:pointer;border:1px solid;transition:all .12s;text-align:center;overflow:hidden}
.pbl-tile:hover{transform:translateY(-2px);box-shadow:0 7px 18px rgba(0,0,0,.11)}
.pbl-tile-nm{font-size:11.5px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:7px}
.pbl-tile-st{font-size:10px;color:var(--t2);margin-top:2px}


/* Advances stats — all 6 cards on one desktop line, compact (mobile keeps flex-scroll) */
@media (min-width: 769px){
  #advance-stats{grid-template-columns:repeat(6,minmax(0,1fr)) !important;gap:8px !important;}
  #advance-stats .dash-kpi{padding:13px 12px !important;border-radius:16px !important;}
  #advance-stats .dash-kpi-icon{width:28px !important;height:28px !important;border-radius:9px !important;margin-bottom:7px !important;}
  #advance-stats .dash-kpi-icon svg{width:15px !important;height:15px !important;}
  #advance-stats .dash-kpi-val{font-size:21px !important;letter-spacing:-.8px !important;}
  #advance-stats .dash-kpi-label{font-size:9.5px !important;letter-spacing:.03em !important;line-height:1.2;}
  #advance-stats .dash-kpi-sub{font-size:9px !important;margin-top:3px !important;}
}

/* RV8-HOME-GRADIENT 2026-06-19 */
#page-rider-portal .rv8-greet-v3{
  background: url('/img/hero-art.svg') right -14px center / 170px auto no-repeat, radial-gradient(120% 100% at 90% 8%, rgba(255,255,255,.06) 0%, transparent 50%), #131313 !important;
  border: none !important;
  border-radius: 20px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 10px 30px -12px rgba(0,0,0,.45) !important;
}
#page-rider-portal .rv8-greet-v3 .rv8-greet-hello{ color: rgba(255,255,255,.72) !important; }
#page-rider-portal .rv8-greet-v3 .rv8-greet-name-big{ color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,.18); }
#page-rider-portal .rv8-greet-v3 .rv8-avatar{
  border: 2px solid rgba(255,255,255,.85) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.10) !important;
}
#page-rider-portal .rv8-greet-v3 .rv8-mini-stats{ border-top: .5px solid rgba(255,255,255,.16) !important; }
#page-rider-portal .rv8-greet-v3 .rv8-mini:nth-child(2){
  border-left: .5px solid rgba(255,255,255,.16) !important;
  border-right: .5px solid rgba(255,255,255,.16) !important;
}
#page-rider-portal .rv8-greet-v3 .rv8-mini-l{ color: rgba(255,255,255,.62) !important; }
#page-rider-portal .rv8-greet-v3 .rv8-mini-v{ color: #fff !important; }
#page-rider-portal .rv8-greet-v3 .rv8-mini-v.rv8-score-maroon,
#page-rider-portal .rv8-greet-v3 .rv8-mini-v.rv8-score-maroon #rv8-score{ color: #F5C97B !important; }
#page-rider-portal .rv8-greet-v3 .rv8-mini-v.rv8-score-maroon .rv8-mini-sm,
#page-rider-portal .rv8-greet-v3 .rv8-mini-sm{ color: rgba(255,255,255,.5) !important; }
#page-rider-portal .rv8-greet-v3 .rv8-greet-actions .rv8-pill-active{
  background: rgba(52,211,153,.22) !important;
  color: #6ee7b7 !important;
}

/* RV8-HEADER-PAYSLIP 2026-06-19 */
/* Minimal header: small rounded-square brand mark + lowercase wordmark (killed the big HELLOO DELIVERY block) */
#page-rider-portal .rv8-hero-glass .rv8-hero-h{
  width: 26px !important; height: 26px !important;
  border-radius: 7px !important;
  font-size: 13px !important; font-weight: 800 !important;
}
#page-rider-portal .rv8-hero-name{
  font-size: 15px !important; font-weight: 700 !important;
  text-transform: none !important; letter-spacing: -.01em !important; color: var(--text) !important;
}
#page-rider-portal .rv8-hero-name .rv8-hero-name-dim{ color: rgba(26,28,25,.4) !important; font-weight: 700; }
/* Payslip card: match the other white cards (was #ebe5dc, clashing with the cream body) */
#page-rider-portal .rv8-payslip-v3{ background: #fff !important; }

/* RV8-HOME-POLISH 2026-06-20 */
#page-rider-portal #rv8-tab-home .rv8-pay-chart{ display: none !important; }

/* ═══ RV8-HOME-V4 2026-06-20 — option 4: photo banner + stat card ═══ */
#page-rider-portal .rv8-greet-v4{
  background:#fff;
  border:.5px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  margin-bottom:14px;
  box-shadow:0 12px 30px -16px rgba(60,30,20,.32);
}
#page-rider-portal .rv8-greet-banner{
  position:relative;
  min-height:126px;
  padding:15px 16px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  color:#fff;
  background:linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.18) 42%, rgba(0,0,0,.64) 100%), url('/img/rider-hero-pro.jpg') center 44%/cover no-repeat;
}
#page-rider-portal .rv8-greet-banner .rv8-greet-pill{
  align-self:flex-end;
  background:rgba(0,0,0,.34) !important;
  color:#fff !important;
  border:.5px solid rgba(255,255,255,.22) !important;
}
#page-rider-portal .rv8-greet-banner .rv8-greet-pill .rv8-dot{ background:#5EE6A8 !important; }
#page-rider-portal .rv8-greet-banner .rv8-greet-hello{
  font-size:13px !important; font-weight:500 !important;
  color:rgba(255,255,255,.90) !important;
  text-shadow:0 1px 3px rgba(0,0,0,.40); margin-bottom:1px;
}
#page-rider-portal .rv8-greet-banner .rv8-greet-name-big{
  font-size:22px !important; font-weight:800 !important;
  color:#fff !important; line-height:1.15;
  text-shadow:0 1px 4px rgba(0,0,0,.45);
}
#page-rider-portal .rv8-greet-statcard{ padding:14px 16px; background:#fff; }
#page-rider-portal .rv8-greet-statcard .rv8-mini-stats{
  margin-top:0 !important; padding-top:0 !important; border-top:none !important;
}

/* ═══ RV8-HOME-V4b 2026-06-20 — heading-dash removal + broken-accent repair (rider portal) ═══ */
/* Root bug: line 9 has --accent:var(--accent) (self-ref) and --blue:var(--accent), so every
   var(--accent)/var(--blue) is invalid -> blue icons get stroke:none (invisible). Define the
   intended blue within the rider portal ONLY (admin UI untouched). */
#page-rider-portal{ --accent:#185FA5 !important; --blue:#185FA5 !important; }
/* Remove the decorative maroon dash before every card heading (PAYSLIP / YOUR BIKE / RECENT ACTIVITY / etc.) */
#page-rider-portal .rv8-card-t::before,
#page-rider-portal .rv8-card-t-caps::before{ content:none !important; display:none !important; }
/* Score number on the white stat card -> force brand maroon (was invisible) */
#page-rider-portal .rv8-greet-v4 .rv8-mini-v.rv8-score-maroon #rv8-score{ color:#8B1A1A !important; }
/* Recent-activity "blue" icons (salary/advance) -> ensure visible even if the var repair is bypassed */
#page-rider-portal .rv8-act-i.rv8-i-blue svg{ color:#185FA5 !important; stroke:#185FA5 !important; }

/* ═══ RV8-EARN-V2 — earnings tab: maroon balance hero + net-trend line + statement feed (2026-06-20) ═══ */
#page-rider-portal .rv8-earn-hero{
  background:radial-gradient(120% 100% at 88% 6%,rgba(0,0,0,.22),transparent 55%),#8B1A1A;
  color:#fff;border-radius:18px;padding:17px;margin-bottom:14px;
  box-shadow:0 12px 28px -14px rgba(139,26,26,.5);
}
#page-rider-portal .rv8-earn-hero .rv8-earn-hero-l{font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:rgba(255,255,255,.72)}
#page-rider-portal .rv8-earn-hero .rv8-earn-amt{font-size:30px;font-weight:800;letter-spacing:-.02em;color:#fff !important;margin:3px 0 2px}
#page-rider-portal .rv8-earn-hero .rv8-earn-amt.rv8-earn-amt-neg{color:#ffd2d2 !important}
#page-rider-portal .rv8-earn-hero .rv8-earn-since{font-size:12px;color:rgba(255,255,255,.7)}
#page-rider-portal .rv8-earn-hero .rv8-earn-actions{display:flex;gap:9px;margin-top:14px;border:none}
#page-rider-portal .rv8-earn-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:12px;border-radius:12px;font-size:13px;font-weight:700;border:none;font-family:inherit;cursor:pointer;line-height:1}
#page-rider-portal .rv8-earn-btn svg{width:15px;height:15px;flex-shrink:0}
#page-rider-portal .rv8-earn-btn-p{background:#fff;color:#8B1A1A}
#page-rider-portal .rv8-earn-btn-g{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.28)}
#page-rider-portal .rv8-earn-btn-p:active,#page-rider-portal .rv8-earn-btn-g:active{transform:translateY(1px)}
#page-rider-portal .rv8-earn-trend-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
#page-rider-portal .rv8-earn-trend-now{font-size:14px;font-weight:800;color:#8B1A1A}
#page-rider-portal .rv8-earn-trend-labels{display:flex;justify-content:space-between;margin-top:4px}
#page-rider-portal .rv8-earn-trend-labels span{font-size:9.5px;color:rgba(26,28,25,.55);font-weight:600}
#page-rider-portal .rv8-earn-advlink{text-align:center;font-size:12px;color:rgba(26,28,25,.55);padding:8px 4px 2px}
#page-rider-portal .rv8-earn-advlink a{color:#8B1A1A;font-weight:600;cursor:pointer}

/* ═══ RV8-PAY-E — home payslip card as a clean income/deducted/net stat trio (2026-06-20) ═══ */
#page-rider-portal .rv8-payslip-e .rv8-pay-trio{ display:flex; margin-top:6px; }
#page-rider-portal .rv8-payslip-e .rv8-pay-t{ flex:1; text-align:center; padding:2px 4px; min-width:0; }
#page-rider-portal .rv8-payslip-e .rv8-pay-t-mid{ border-left:1px solid rgba(140,113,110,.14); border-right:1px solid rgba(140,113,110,.14); }
#page-rider-portal .rv8-payslip-e .rv8-pay-t-l{ font-size:10px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; color:rgba(26,28,25,.55); }
#page-rider-portal .rv8-payslip-e .rv8-pay-t-v{ font-size:16px; font-weight:800; margin-top:4px; font-variant-numeric:tabular-nums; color:#1a1c19; line-height:1.1; }
#page-rider-portal .rv8-payslip-e .rv8-pay-t-ded .rv8-pay-t-v{ color:#991b1b; }
#page-rider-portal .rv8-payslip-e .rv8-pay-t-net .rv8-pay-t-v{ color:#2d6a2e; font-size:19px; }

/* RV8-PAY-E frame match — align the live card to the approved mock (beat inherited rv8-payslip-v3 !important rules; this block is last in source so equal-specificity wins) */
#page-rider-portal .rv8-payslip-e{ padding:18px !important; background:#fff !important; border:1px solid rgba(140,113,110,.14) !important; border-radius:18px !important; box-shadow:0 6px 16px -12px rgba(60,30,20,.22) !important; }
#page-rider-portal .rv8-payslip-e .rv8-card-h{ margin-bottom:14px !important; }
#page-rider-portal .rv8-payslip-e .rv8-card-t-caps{ font-size:12px !important; font-weight:800 !important; letter-spacing:.4px !important; color:rgba(26,28,25,.55) !important; opacity:1 !important; }

/* ============================================================
   RV8 BIKE CARD — option B (license-plate visual)
   Scoped to #page-rider-portal .rv8-bike-b. Frame (bg/border/
   shadow) inherited from .rv8-bike-v3; we style inner + override
   the v3 caps/padding rules at equal-or-higher specificity.
   ============================================================ */
#page-rider-portal .rv8-bike-b{ padding:18px !important; }
#page-rider-portal .rv8-bike-b .rv8-bikeb-head{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;
}
#page-rider-portal .rv8-bike-b .rv8-bikeb-head .rv8-card-t-caps{
  margin-bottom:0 !important; font-size:12px !important; font-weight:800 !important;
  letter-spacing:.4px !important; color:rgba(26,28,25,.55) !important; display:block;
}
#page-rider-portal .rv8-bike-b .rv8-bikeb-status{
  font-size:10px; font-weight:800; letter-spacing:.3px; padding:4px 10px; border-radius:8px; white-space:nowrap;
}
#page-rider-portal .rv8-bike-b .rv8-bikeb-status.is-amber{ background:rgba(184,115,51,.14); color:#B87333; }
#page-rider-portal .rv8-bike-b .rv8-bikeb-status.is-green{ background:rgba(45,106,46,.12); color:#2d6a2e; }
#page-rider-portal .rv8-bike-b .rv8-bikeb-status.is-grey{ background:rgba(0,0,0,.05); color:#666; }
#page-rider-portal .rv8-bike-b .rv8-bikeb-status.is-red{ background:rgba(153,27,27,.1); color:#991b1b; }

#page-rider-portal .rv8-bike-b .rv8-plateb{
  display:flex; align-items:stretch; border:2.5px solid #1a1c19; border-radius:9px;
  overflow:hidden; background:#fff; margin-bottom:12px;
}
#page-rider-portal .rv8-bike-b .rv8-plateb-em{
  background:#1a1c19; color:#fff; display:flex; flex-direction:column; align-items:center;
  justify-content:center; padding:8px 13px; gap:2px; min-width:62px;
}
#page-rider-portal .rv8-bike-b .rv8-plateb-ar{ font-size:11px; font-weight:700; line-height:1; }
#page-rider-portal .rv8-bike-b .rv8-plateb-en{ font-size:13px; font-weight:800; letter-spacing:1px; line-height:1; }
#page-rider-portal .rv8-bike-b .rv8-plateb-body{
  flex:1; display:flex; align-items:center; justify-content:center; gap:12px; padding:8px 10px;
}
#page-rider-portal .rv8-bike-b .rv8-plateb-cat{
  font-size:20px; font-weight:700; color:#666; font-variant-numeric:tabular-nums;
}
#page-rider-portal .rv8-bike-b .rv8-plateb-cat:empty{ display:none; }
#page-rider-portal .rv8-bike-b .rv8-plateb-num{
  font-size:26px; font-weight:800; letter-spacing:1px; color:#1a1c19; font-variant-numeric:tabular-nums;
}
#page-rider-portal .rv8-bike-b .rv8-bikeb-foot{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
}
#page-rider-portal .rv8-bike-b .rv8-bikeb-foot .rv8-bike-model{
  font-size:15px !important; font-weight:800 !important; color:var(--text) !important;
}
#page-rider-portal .rv8-bike-b .rv8-bikeb-foot .rv8-bike-fleet{
  font-size:12px !important; font-weight:600 !important; color:rgba(26,28,25,.55) !important;
}



/* Flat advance action buttons (Mark settled / Undo) — flat, but with real hover + click feedback */
.adv-flat-btn{ padding:4px 10px; font-size:11px; font-weight:600; border:none; border-radius:7px; cursor:pointer; transition:background .15s ease, transform .08s ease; }
.adv-flat-btn:active{ transform:scale(.94); }
.adv-flat-green{ background:rgba(45,106,46,.12); color:#2d6a2e; }
.adv-flat-green:hover{ background:rgba(45,106,46,.22); }
.adv-flat-grey{ background:rgba(0,0,0,.06); color:var(--t2); }
.adv-flat-grey:hover{ background:rgba(0,0,0,.12); }


/* ═══ Invoice creation modals (Shipa / ComeCome / Keeta) ═══ */
.inv-modal{--inv-acc:#7B1A1A;--inv-soft:rgba(123,26,26,.08)}
.inv-field{margin-bottom:14px}
.inv-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.inv-grid-nm{display:grid;grid-template-columns:1fr 2fr;gap:14px;margin-bottom:14px}
.inv-label{font-size:9.5px;letter-spacing:1px;color:#9a8f8c;text-transform:uppercase;font-weight:700;margin-bottom:6px}
.inv-inp{width:100%;padding:9px 12px;background:#fff;border:1px solid rgba(95,100,120,.16);border-radius:9px;color:#1a1c19;font-size:13px;font-family:var(--font);outline:none;transition:border-color .15s,box-shadow .15s;box-sizing:border-box}
.inv-inp:focus{border-color:var(--inv-acc);box-shadow:0 0 0 3px var(--inv-soft)}
.inv-inp[readonly]{background:rgba(0,0,0,.025);color:#6b6461;cursor:default}
.inv-inp[readonly]:focus{border-color:rgba(95,100,120,.16);box-shadow:none}
select.inv-inp{cursor:pointer}
.inv-mono{font-family:var(--mono);font-weight:700}
.inv-seg{display:flex;background:rgba(0,0,0,.045);border-radius:10px;padding:3px;gap:3px;margin-bottom:10px}
.inv-seg button{flex:1;padding:7px 0;border:none;border-radius:8px;background:transparent;color:#8f8a87;font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font);transition:all .15s}
.inv-seg button.active{background:#fff;color:var(--inv-acc);box-shadow:0 1px 4px rgba(0,0,0,.1)}
.inv-drop{border:1.5px dashed rgba(95,100,120,.25);border-radius:12px;padding:26px 20px;text-align:center;cursor:pointer;transition:all .15s;background:rgba(0,0,0,.012);color:#a8a09d}
.inv-drop:hover,.inv-drop.drag{border-color:var(--inv-acc);background:var(--inv-soft);color:var(--inv-acc)}
.inv-help{margin-top:12px;background:rgba(0,0,0,.012);border:1px solid rgba(95,100,120,.1);border-radius:10px;overflow:hidden}
.inv-help summary{list-style:none;display:flex;align-items:center;gap:6px;padding:9px 12px;font-size:11px;font-weight:600;color:#8f8a87;cursor:pointer;user-select:none}
.inv-help summary::-webkit-details-marker{display:none}
.inv-help summary::after{content:'\25B8';margin-left:auto;font-size:10px;transition:transform .15s;color:#b5aeab}
.inv-help[open] summary::after{transform:rotate(90deg)}
.inv-help-body{padding:0 12px 12px}
.inv-tablewrap{max-height:340px;overflow-y:auto;border:1px solid rgba(95,100,120,.14);border-radius:12px}
.inv-table{width:100%;border-collapse:collapse;font-size:12px}
.inv-table th{position:sticky;top:0;z-index:1;padding:8px 10px;text-align:left;font-size:9.5px;font-weight:700;letter-spacing:.6px;color:#9a8f8c;text-transform:uppercase;background:#faf9f8;border-bottom:1px solid rgba(95,100,120,.16)}
.inv-table th.num{text-align:right}
.inv-table th.ctr{text-align:center}
.inv-table td{padding:7px 10px;border-bottom:1px solid rgba(95,100,120,.07)}
.inv-table tbody tr:nth-child(even){background:rgba(0,0,0,.014)}
.inv-table tbody tr:hover{background:rgba(0,0,0,.03)}
.inv-table td.num{text-align:right;font-family:var(--mono)}
.inv-table td.ctr{text-align:center}
.inv-table td[contenteditable]:focus{outline:2px solid var(--inv-acc);outline-offset:-2px;background:#fff;border-radius:4px}
.inv-totals{background:rgba(0,0,0,.015);border:1px solid rgba(95,100,120,.1);border-radius:12px;padding:12px 14px;margin-top:10px}
.inv-totals .row{display:flex;justify-content:space-between;margin-bottom:6px;font-size:12px;color:var(--t2)}
.inv-totals .row .val{font-size:13px;font-weight:600;font-family:var(--mono);color:var(--text)}
.inv-totals .net{display:flex;justify-content:space-between;border-top:1px solid rgba(0,0,0,.05);padding-top:8px;font-size:13px;font-weight:700;color:var(--text)}
.inv-totals .net .val{font-size:15px;font-weight:800;font-family:var(--mono);color:var(--inv-acc)}
.inv-btn-ghost{flex:1;padding:10px;background:transparent;border:1px solid rgba(95,100,120,.18);color:#8f8a87;font-size:13px;font-weight:600;border-radius:9px;cursor:pointer;font-family:var(--font);transition:background .15s}
.inv-btn-ghost:hover{background:rgba(0,0,0,.025)}
.inv-btn-primary{flex:2;padding:10px;background:var(--inv-acc);border:1px solid var(--inv-acc);color:#fff;font-size:13px;font-weight:600;border-radius:9px;cursor:pointer;font-family:var(--font);transition:filter .15s}
.inv-btn-primary:hover:not([disabled]){filter:brightness(1.15)}
.inv-btn-primary[disabled]{opacity:.35;cursor:not-allowed}
.inv-hint{font-size:11px;color:#8f8a87;margin-top:4px;min-height:16px}
.inv-note{font-size:11px;color:var(--t3);margin-bottom:8px}

/* [12 Jul 2026] Offboarding rebuild — dedicated overlay above the profile (cp-overlay z200) */
#offboard-overlay{z-index:350;}
.ob2-sec{font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.4px;margin:14px 0 6px;}
.ob2-sec:first-child{margin-top:0;}
.ob2-row{display:flex;align-items:center;gap:10px;padding:9px 12px;background:#f3f4f8;border:1px solid rgba(95,100,120,.12);border-radius:10px;margin-bottom:5px;}
.ob2-row.done{background:rgba(45,106,46,.06);border-color:rgba(45,106,46,.18);}
.ob2-chk{flex:0 0 16px;width:16px;height:16px;border:1.5px solid rgba(95,100,120,.35);border-radius:5px;position:relative;background:#fff;box-sizing:border-box;}
.ob2-chk.done{background:#2d6a2e;border-color:#2d6a2e;}
.ob2-chk.done:after{content:'';position:absolute;left:4.5px;top:1.5px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}
.ob2-info{flex:1;min-width:0;}
.ob2-main{font-size:13px;font-weight:600;color:var(--text);}
.ob2-sub{font-size:10.5px;color:var(--t3);margin-top:1px;}
.ob2-btns{display:flex;gap:6px;flex:0 0 auto;}
.ob2-act{padding:4px 10px;font-size:11px;}
.ob2-act.ob2-danger{color:#991B1B;}
.ob2-money{margin-top:12px;padding:10px 12px;background:rgba(255,159,10,.07);border:1px solid rgba(255,159,10,.2);border-radius:10px;font-size:11.5px;color:var(--t2);line-height:1.5;}


/* ── Salary close strip pills (v=1693, hiring-row style) ─────────── */
.sal-st-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 13px;border-radius:999px;border:1px solid transparent;background:rgba(95,100,120,.06);font-size:11px;font-weight:600;cursor:pointer;font-family:var(--font);line-height:1.4;transition:all .15s ease;}
.sal-st-pill:hover{background:rgba(95,100,120,.13);transform:translateY(-1px);box-shadow:0 2px 6px rgba(0,0,0,.05);}
.sal-st-pill:active{transform:scale(.96);}
.sal-st-pill.on{box-shadow:0 1px 4px rgba(0,0,0,.06);}
.sal-st-pill.on:hover{transform:translateY(-1px);}
.sal-st-pill.zero{opacity:.4;pointer-events:none;}

/* [13 Jul 2026] pf-chip — unified filter chips (Performance + Couriers toolbars).
   Selects and toggle buttons share one look; .pf-on = engaged filter (brand tint),
   .pf-on-warn = engaged caution toggle (Borrowed ID). */
.pf-chip{font-size:12px;font-family:var(--font);font-weight:500;color:var(--t2);padding:8px 13px;border-radius:10px;background:#fff;border:1px solid rgba(95,100,120,.16);cursor:pointer;outline:none;white-space:nowrap;line-height:1.1;transition:border-color .15s,background-color .15s,box-shadow .15s,color .15s,padding .15s;} /* [17 Jul 2026] rounded square — matches search box + pill group + toolbar buttons */
select.pf-chip,.pf-dd{-webkit-appearance:none;appearance:none;text-align:left;padding-right:30px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238c716e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 10px center/12px 12px;}
.pf-chip:hover{border-color:rgba(95,100,120,.34);box-shadow:0 1px 5px rgba(30,20,18,.07);}
.pf-chip:active{transform:translateY(.5px);}
.pf-chip:focus-visible{border-color:rgba(139,26,26,.4);box-shadow:0 0 0 3px rgba(139,26,26,.08);}
/* [17 Jul 2026] Engaged filter = crisp, not flooded: white keeps, brand border + ink, and a
   small brand dot replaces the pink wash. Selects layer dot (left) + brand chevron (right). */
.pf-chip.pf-on{background-color:#fff;border-color:rgba(139,26,26,.34);color:#6d1414;font-weight:650;}
.pf-chip.pf-on:hover{border-color:rgba(139,26,26,.52);}
select.pf-chip.pf-on,.pf-dd.pf-on{padding-left:26px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3.2' fill='%238B1A1A'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238B1A1A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5l4 4 4-4'/%3E%3C/svg%3E");background-position:left 11px center,right 10px center;background-size:7px 7px,12px 12px;background-repeat:no-repeat,no-repeat;}

/* [17 Jul 2026, pf-dd] The designed dropdown popover that replaces the OS-generic select menu. */
.pf-dd-pop{position:fixed;z-index:100000;background:#fff;border:1px solid rgba(95,100,120,.14);border-radius:14px;box-shadow:0 14px 38px rgba(30,20,18,.15),0 2px 8px rgba(30,20,18,.06);padding:5px;opacity:0;transform:translateY(-4px) scale(.98);transform-origin:top left;transition:opacity .13s ease,transform .13s ease;} /* [17 Jul 2026] z above modal overlays (ksi import = 9000) */
.pf-dd-pop.in{opacity:1;transform:none;}
.pf-dd-it{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 11px;border-radius:9px;font-size:12.5px;font-weight:500;color:var(--t2);cursor:pointer;font-family:var(--font);line-height:1.3;white-space:nowrap;}
.pf-dd-it:hover{background:#f4f5f9;color:var(--text);}
.pf-dd-it:active{background:#edeef2;}
.pf-dd-it.on{color:#6d1414;font-weight:650;}
.pf-dd-it.on svg{color:#8B1A1A;flex:0 0 auto;}
/* [7 Oct 2026] Labelled filter chips (Emirate / Vehicle): icon + key + value on the chip, a designed list with
   tiles, live rider counts and keyboard in the popover. Sleek: 6–10px corners, hairlines, spring motion. */
.pf-dd.pfx{display:inline-flex!important;align-items:center;gap:7px;padding-left:11px!important;padding-right:30px!important;white-space:nowrap}
.pf-dd.pfx.pf-on{padding-left:11px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238B1A1A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5l4 4 4-4'/%3E%3C/svg%3E")!important;background-position:right 10px center!important;background-size:12px 12px!important;background-repeat:no-repeat!important}
.pfx-ic{display:inline-flex;line-height:0;color:#9d9a95;transition:color .2s ease}
.pfx-k{color:#8c8984;font-weight:500}
.pfx-v{color:#1a1c19;font-weight:600}
.pf-dd.pfx.pf-on .pfx-ic,.pf-dd.pfx.pf-on .pfx-v{color:#8B1A1A}
.pf-dd.pfx:hover .pfx-ic{color:#57544f}
.pf-dd-pop.pfx-pop{border-radius:10px;padding:6px;border:1px solid #e6e7eb;box-shadow:0 1px 2px rgba(16,16,16,.04),0 22px 44px -18px rgba(16,16,16,.32);transform:translateY(-6px) scale(.97);transition:opacity .18s ease,transform .32s cubic-bezier(.16,1,.3,1)}
.pf-dd-pop.pfx-pop.in{transform:none}
.pfx-hd{font-size:10px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:#a09d98;padding:6px 10px 7px;font-family:var(--font)}
.pfx-sep{height:1px;background:#ecedf1;margin:4px 8px}
.pf-dd-it.pfx-it{justify-content:flex-start;gap:11px;padding:6px 10px 6px 7px;border-radius:7px;font-size:13px;font-weight:500;color:#3b3936;min-height:38px;box-sizing:border-box;opacity:0;translate:0 -4px;transition:background-color .15s ease,color .15s ease}
.pf-dd-pop.pfx-pop.in .pfx-it{opacity:1;translate:0 0;transition:opacity .28s ease calc(var(--i,0)*28ms),translate .42s cubic-bezier(.16,1,.3,1) calc(var(--i,0)*28ms),background-color .15s ease,color .15s ease}
.pfx-tile{width:28px;height:28px;border-radius:7px;background:#f3f3f2;color:#57544f;display:grid;place-items:center;flex:0 0 auto;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.04em;box-shadow:inset 0 0 0 1px rgba(16,16,16,.04);transition:background-color .2s ease,color .2s ease,box-shadow .2s ease,scale .35s cubic-bezier(.34,1.56,.64,1);scale:1}
.pfx-l{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.pfx-n{font-size:12px;font-weight:550;color:#9d9a95;font-variant-numeric:tabular-nums;padding-left:6px}
.pfx-ck{width:16px;display:inline-flex;justify-content:flex-end;color:#8B1A1A;flex:0 0 auto}
.pfx-it:hover,.pfx-it.kb{background:#f6f6f5;color:#1a1c19}
.pfx-it:hover .pfx-tile,.pfx-it.kb .pfx-tile{background:#fff;box-shadow:inset 0 0 0 1px #e0e1e5,0 2px 6px -3px rgba(16,16,16,.25);scale:1.06}
.pfx-it.on{background:rgba(139,26,26,.055);color:#7a1616;font-weight:600}
.pfx-it.on .pfx-tile{background:#8B1A1A;color:#fff;box-shadow:0 4px 10px -4px rgba(139,26,26,.6)}
.pfx-it.on .pfx-tile svg{color:#fff}
.pfx-it.on .pfx-n{color:rgba(139,26,26,.75)}
.pfx-it.zero:not(.on) .pfx-l,.pfx-it.zero:not(.on) .pfx-n,.pfx-it.zero:not(.on) .pfx-tile{opacity:.5}
@media (prefers-reduced-motion:reduce){.pf-dd-pop.pfx-pop,.pf-dd-it.pfx-it,.pf-dd-pop.pfx-pop.in .pfx-it,.pfx-tile{transition:none}.pf-dd-it.pfx-it{opacity:1;translate:0 0}}

.pf-chip.pf-on-warn{background-color:#fff;border-color:rgba(138,90,0,.42);color:var(--warn-ink);font-weight:650;}
.pf-chip.pf-on-warn:hover{border-color:rgba(138,90,0,.6);}
select.pf-chip.pf-on-warn{padding-left:26px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3.2' fill='%238a5a00'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238a5a00' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5l4 4 4-4'/%3E%3C/svg%3E");background-position:left 11px center,right 10px center;background-size:7px 7px,12px 12px;background-repeat:no-repeat,no-repeat;}

/* [15 Jul 2026] Force light native popovers (select menus etc.) on dark-mode Macs —
   meta color-scheme alone isn't honored for form controls; same per-element fix
   as the date pickers. */
select, input, textarea { color-scheme: light; }

/* [17 Jul 2026, native-lock] Real-app feel inside the APK / installed PWA.
   app-core adds body.native-lock only in native contexts (Capacitor bridge,
   Android WebView UA, standalone display-mode) — desktop and plain mobile
   browsers keep normal selection so staff can copy EIDs, phones, plates.
   Inputs stay selectable/editable everywhere. */
body.native-lock, body.native-lock *{-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none;}
body.native-lock input, body.native-lock textarea, body.native-lock [contenteditable="true"]{-webkit-user-select:text;-moz-user-select:text;user-select:text;-webkit-touch-callout:default;}
body.native-lock #page-whatsapp .wa-m, body.native-lock #page-whatsapp .wa-m *{-webkit-user-select:text;-moz-user-select:text;user-select:text;-webkit-touch-callout:default;}
body.native-lock{-webkit-tap-highlight-color:transparent;}
body.native-lock img{-webkit-user-drag:none;user-drag:none;}

/* ═══ [18 Jul 2026, login-P1] Segmented OTP boxes + button spinner ═══ */
.otp-boxes{display:flex;gap:8px;justify-content:center;margin-bottom:12px}
.otp-box{flex:1;min-width:0;max-width:48px;height:52px;border-radius:12px;border:1px solid rgba(140,113,110,.14);background:#fff;text-align:center;font-size:20px;font-weight:600;color:var(--text);font-family:var(--font);outline:none;transition:border-color .15s,box-shadow .15s,background .15s;font-variant-numeric:tabular-nums;padding:0;caret-color:var(--acc)}
.otp-box::-webkit-outer-spin-button,.otp-box::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.otp-box:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(139,26,26,.08)}
.otp-box.filled{border-color:rgba(140,113,110,.32);background:#fffdfb;animation:otpPop .26s cubic-bezier(.2,1,.3,1)}
@keyframes otpPop{0%{transform:scale(.82)}55%{transform:scale(1.07)}100%{transform:scale(1)}}
.btn-spin{width:14px;height:14px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;display:inline-block;animation:btnspin .7s linear infinite;flex-shrink:0}
@keyframes btnspin{to{transform:rotate(360deg)}}
/* ═══ [18 Jul 2026, login-polish] Language chips + OTP help + error shake ═══ */
.otp-help{margin-top:10px;padding:11px 14px;border-radius:12px;background:rgba(139,26,26,.03);border:1px solid rgba(140,113,110,.1);text-align:left}
.otp-help-row{font-size:11.5px;color:var(--t2);line-height:1.55;padding:2px 0}
.otp-help-contact{display:block;margin-top:7px;font-size:11.5px;font-weight:600;color:#2d6a2e;text-decoration:none}
@keyframes otpshake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.otp-boxes.otp-err{animation:otpshake .4s ease}
.otp-boxes.otp-err .otp-box{border-color:#E24B4A}

/* [29 Jul 2026 v3, contact-toggle] Phone/Email segmented switch + chip collapse on the two public OTP gates */
#cc-sel-rider,#cc-sel-apply{max-width:120px;overflow:hidden;transition:max-width .32s cubic-bezier(.4,0,.2,1),opacity .2s ease,padding .32s cubic-bezier(.4,0,.2,1),border-right-width .32s ease;}
#cc-sel-rider.cc-off,#cc-sel-apply.cc-off{max-width:0;opacity:0;padding-left:0;padding-right:0;border-right-width:0;pointer-events:none;}
.mode-seg{position:relative;display:flex;width:216px;max-width:100%;margin:0 auto 12px;background:rgba(95,100,120,.08);border-radius:999px;padding:3px;}
.mode-seg .ms-thumb{position:absolute;top:3px;left:3px;width:calc(50% - 3px);height:calc(100% - 6px);background:#fff;border-radius:999px;box-shadow:0 1px 4px rgba(0,0,0,.1),0 0 0 1px rgba(95,100,120,.08);transition:transform .28s cubic-bezier(.4,0,.2,1);will-change:transform;}
.mode-seg.email .ms-thumb{transform:translateX(100%);}
.mode-seg .ms-btn{flex:1;position:relative;z-index:1;background:none;border:none;font-family:var(--font);font-size:12px;font-weight:600;color:var(--t3);padding:7px 0;cursor:pointer;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:6px;transition:color .28s ease;-webkit-tap-highlight-color:transparent;}
.mode-seg .ms-btn.on{color:#8B1A1A;}
.mode-seg .ms-btn svg{flex-shrink:0;}
#login-contact,#apply-phone{transition:opacity .15s ease;}
@media (prefers-reduced-motion:reduce){.mode-seg .ms-thumb,#cc-sel-rider,#cc-sel-apply,#login-contact,#apply-phone{transition:none;}}

/* ═══ [30 Jul 2026, login-polish v2] Entrance stagger + ambient blobs + OTP success morph ═══ */
@keyframes lpUp{0%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:translateY(0)}}
.login-brand{animation:lpUp .55s cubic-bezier(.2,1,.3,1) both;animation-delay:.12s}
.login-sub{animation:lpUp .55s cubic-bezier(.2,1,.3,1) both;animation-delay:.2s}
#login-chooser>*,#otp-step1>*,#apply-otp-step1>*,#staff-otp-step1>*{animation:lpUp .5s cubic-bezier(.2,1,.3,1) both;animation-delay:.42s}
#login-chooser>*:nth-child(1),#otp-step1>*:nth-child(1),#apply-otp-step1>*:nth-child(1),#staff-otp-step1>*:nth-child(1){animation-delay:.08s}
#login-chooser>*:nth-child(2),#otp-step1>*:nth-child(2),#apply-otp-step1>*:nth-child(2),#staff-otp-step1>*:nth-child(2){animation-delay:.15s}
#login-chooser>*:nth-child(3),#otp-step1>*:nth-child(3),#apply-otp-step1>*:nth-child(3),#staff-otp-step1>*:nth-child(3){animation-delay:.22s}
#login-chooser>*:nth-child(4),#otp-step1>*:nth-child(4),#apply-otp-step1>*:nth-child(4),#staff-otp-step1>*:nth-child(4){animation-delay:.29s}
#login-chooser>*:nth-child(5),#otp-step1>*:nth-child(5),#apply-otp-step1>*:nth-child(5),#staff-otp-step1>*:nth-child(5){animation-delay:.36s}
.login-blob{position:absolute;border-radius:50%;pointer-events:none;z-index:0;}
.login-blob.b1{width:340px;height:340px;background:rgba(139,26,26,.05);top:-110px;right:-120px;animation:blobDrift 14s ease-in-out infinite alternate;}
.login-blob.b2{width:280px;height:280px;background:rgba(184,115,51,.045);bottom:-90px;left:-100px;animation:blobDrift2 17s ease-in-out infinite alternate;}
@keyframes blobDrift{0%{transform:translate(0,0)}100%{transform:translate(34px,-26px)}}
@keyframes blobDrift2{0%{transform:translate(0,0)}100%{transform:translate(-28px,22px)}}
.login-btn.login-ok{background:#2d6a2e!important;box-shadow:0 3px 12px rgba(45,106,46,.25)!important;}
@media (prefers-reduced-motion:reduce){.login-brand,.login-sub,#login-chooser>*,#otp-step1>*,#apply-otp-step1>*,#staff-otp-step1>*,.login-blob,.otp-box.filled,.login-box{animation:none!important;}}

/* ═══ [30 Jul 2026, login-polish v3] Desktop split brand panel (≥900×600 only — phones untouched) ═══ */
.login-split{display:contents;}
.login-brand-panel{display:none;}
@media (min-width:900px) and (min-height:600px){
  .login-split{display:flex;align-items:stretch;position:relative;z-index:1;width:790px;max-width:calc(100vw - 48px);animation:loginBoxIn .8s var(--spring-snappy) both;}
  .login-brand-panel{display:flex;flex-direction:column;justify-content:space-between;position:relative;width:46%;min-height:520px;background:#8B1A1A;border-radius:24px 0 0 24px;padding:30px 28px;overflow:hidden;box-shadow:0 1px 3px rgba(26,28,25,.06);}
  .login-split .login-box{width:54%;flex:1;border-radius:0 24px 24px 0;height:auto!important;display:flex;flex-direction:column;justify-content:center;animation:none;}
  .login-split .login-brand,.login-split .login-sub{display:none;}
  .lbp-route{position:absolute;inset:0;width:100%;height:100%;}
  .lbp-path{stroke:rgba(255,255,255,.32);stroke-width:2;stroke-dasharray:5 9;animation:lbpDash 2.6s linear infinite;}
  .lbp-dot{fill:rgba(255,255,255,.5);}
  .lbp-ping{fill:rgba(255,255,255,.25);transform-box:fill-box;transform-origin:center;animation:lbpPulse 1.9s ease-out infinite;}
  .lbp-pin{fill:#fff;}
  .lbp-top{position:relative;display:flex;align-items:center;gap:10px;}
  .lbp-tile{width:38px;height:38px;border-radius:11px;background:#fff;color:#8B1A1A;font-family:'Plus Jakarta Sans',var(--font);font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .lbp-word{font-family:'Plus Jakarta Sans',var(--font);font-size:20px;font-weight:800;letter-spacing:-.02em;color:#fff;line-height:1.1;}
  .lbp-subword{font-size:8px;font-weight:600;letter-spacing:.15em;color:rgba(255,255,255,.65);text-transform:uppercase;}
  .lbp-chip{position:absolute;display:flex;align-items:center;gap:7px;padding:7px 11px;border-radius:11px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.16);font-size:11px;font-weight:500;color:#fff;white-space:nowrap;animation:lbpFloat 3.4s ease-in-out infinite;}
  .lbp-chip svg{flex-shrink:0;}
  .lbp-chip.c1{top:128px;left:22px;animation-delay:.2s;}
  .lbp-chip.c2{top:218px;right:18px;animation-delay:1.1s;}
  .lbp-chip.c3{top:304px;left:32px;animation-delay:1.9s;}
  .lbp-tag{position:relative;font-size:12px;line-height:1.55;color:rgba(255,255,255,.75);}
  .lbp-tag b{color:#fff;font-weight:600;}
}
@keyframes lbpDash{to{stroke-dashoffset:-56}}
@keyframes lbpPulse{0%{transform:scale(.55);opacity:.55}100%{transform:scale(2.1);opacity:0}}
@keyframes lbpFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media (prefers-reduced-motion:reduce){.login-split,.lbp-path,.lbp-ping,.lbp-chip{animation:none!important;}}

/* [8 Aug 2026] Corner "proper" notifications — persistent, dismissible, slide in from
   the right. Distinct from the center-top .tisl quick toasts (which stay for click
   reactions + inline errors). Rendered into #notif-stack via notify() / _docProgressToast. */
/* [18 Sep 2026] top 14px sat on the header bar and covered the page-title/filter row's right end
   (Applications button); Matti asked for it lower — 130px clears the header, title and filters
   on desktop. Mobile keeps 14px (no room to give away there). */
#notif-stack{position:fixed;top:130px;right:16px;z-index:2147483601;display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none;max-width:380px;width:calc(100% - 32px)}
#notif-stack>*{pointer-events:auto}
@keyframes nfiSpin{to{transform:rotate(360deg)}}
@keyframes nfBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
/* [9 Sep 2026] slim corner card: one line when there's no body, small icon, colored edge, auto-dismiss bar */
.notif{position:relative;width:auto;min-width:240px;max-width:100%;box-sizing:border-box;background:#fff;border:1px solid #e1e2e6;border-radius:12px;box-shadow:0 10px 28px rgba(26,28,25,.12),0 1px 3px rgba(26,28,25,.05);display:flex;gap:10px;align-items:center;padding:9px 11px 9px 12px;font-family:var(--font);overflow:hidden;transform:translateX(14px);opacity:0;transition:transform .34s cubic-bezier(.22,1,.36,1),opacity .24s}
/* [17 Sep 2026] left accent strip (.notif::before) and the draining bottom bar (.nfbar) removed — Matti: ugly. Type is carried by the icon tint only. */
.notif.open{transform:translateX(0);opacity:1}
.notif.out{transform:translateX(14px);opacity:0}
.notif .nfi{width:26px;height:26px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
.notif .nfi svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.notif .nfi.spin{border:2.2px solid rgba(139,26,26,.18);border-top-color:#8B1A1A;background:none;animation:nfiSpin .7s linear infinite}
.notif .nfb{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.notif .nft{font-size:12.5px;font-weight:600;color:#1c1d1a;line-height:1.3;letter-spacing:-.005em}
.notif .nfx{font-size:11.5px;color:#7a746c;margin-top:2px;line-height:1.45;word-break:break-word}
.notif .nfx:empty{display:none}
.notif .nfc{background:none;border:none;cursor:pointer;color:#c4beb7;padding:4px;line-height:1;flex-shrink:0;border-radius:6px;transition:color .15s,background .15s;margin:0 -2px 0 2px;font-size:11px}
.notif .nfc:hover{color:#6b6560;background:rgba(95,100,120,.08)}
/* thin auto-dismiss bar along the bottom */
.nfi-ok{background:#e6f3e8;color:#2d6a2e}
.nfi-err{background:#fbe6e3;color:#b3462f}
.nfi-info{background:#e5eefb;color:#28517f}
.nfi-warn{background:#fbefdb;color:#8a5300}
@media(max-width:768px){#notif-stack{top:14px;right:14px;left:14px;align-items:stretch;max-width:none;width:auto}.notif{width:auto}}
/* [30 Aug 2026, hisaab-sleek] editable amounts read like the slip's bold values — no box, no spinner; maroon underline on focus */
.psd-earn-input,.psd-plat-input,.psd-other-input,.psd-fine-amt,.psd-adv-amt,.psd-khata-input,.psd-slip-amt{border:none !important;border-bottom:1px solid transparent !important;border-radius:0 !important;background:transparent !important;box-shadow:none !important;-moz-appearance:textfield;appearance:textfield}
.psd-earn-input::-webkit-inner-spin-button,.psd-plat-input::-webkit-inner-spin-button,.psd-other-input::-webkit-inner-spin-button,.psd-fine-amt::-webkit-inner-spin-button,.psd-adv-amt::-webkit-inner-spin-button,.psd-khata-input::-webkit-inner-spin-button,.psd-slip-amt::-webkit-inner-spin-button,
.psd-earn-input::-webkit-outer-spin-button,.psd-plat-input::-webkit-outer-spin-button,.psd-other-input::-webkit-outer-spin-button,.psd-fine-amt::-webkit-outer-spin-button,.psd-adv-amt::-webkit-outer-spin-button,.psd-khata-input::-webkit-outer-spin-button,.psd-slip-amt::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.psd-earn-input:hover,.psd-plat-input:hover,.psd-other-input:hover,.psd-fine-amt:hover,.psd-adv-amt:hover,.psd-khata-input:hover,.psd-slip-amt:hover{border-bottom-color:rgba(139,26,26,.25) !important}
.psd-earn-input:focus,.psd-plat-input:focus,.psd-other-input:focus,.psd-fine-amt:focus,.psd-adv-amt:focus,.psd-khata-input:focus,.psd-slip-amt:focus{color:#8B1A1A !important;border-bottom-color:#8B1A1A !important;opacity:1 !important}

/* [16 Aug 2026, redesign inc-1] perf view switcher — sliding maroon thumb */
/* [19 Sep 2026] Matti: the maroon-gradient switcher "looks too much" -> same quiet look as the shared Seg pill (All / Dubai / Abu Dhabi): plain warm track, white thumb, dark text. Values copied from seg.js. */
#perf-view-switch{position:relative;display:inline-flex;align-items:center;gap:0;background:#ecedf1;backdrop-filter:none;-webkit-backdrop-filter:none;border:0;border-radius:9px;padding:2px;box-shadow:none;isolation:isolate}
#perf-view-switch .pv-thumb{position:absolute;top:2px;left:4px;width:0;height:calc(100% - 4px);border-radius:7px;background:#fff;box-shadow:0 1px 2px rgba(34,31,28,.12);transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1);z-index:0;pointer-events:none}
#perf-view-switch .abf-pill{position:relative;z-index:1;border:0;background:transparent;box-shadow:none;color:#8a827a;font-size:12px;font-weight:600;padding:6px 13px;border-radius:7px;transition:color .22s cubic-bezier(.4,0,.2,1)}
#perf-view-switch .abf-pill:hover{background:transparent;border-color:transparent;box-shadow:none;color:#58413f;font-weight:600}
#perf-view-switch .abf-pill.on{background:transparent;border-color:transparent;box-shadow:none;color:#1a1c19;font-weight:600}
#perf-view-switch .abf-pill svg{opacity:.7;transition:opacity .3s}
#perf-view-switch .abf-pill.on svg{opacity:1}
/* [16 Aug 2026, redesign inc-1] perf KPI cards */
.pk-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px;margin-bottom:14px}
.pk-card{background:#fff;border:1px solid rgba(95,100,120,.14);border-radius:14px;padding:14px 16px 12px;transition:transform .2s,box-shadow .2s;animation:pkUp .5s cubic-bezier(.16,1,.3,1) both}
.pk-card:nth-child(2){animation-delay:.05s}.pk-card:nth-child(3){animation-delay:.1s}.pk-card:nth-child(4){animation-delay:.15s}
.pk-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(60,50,40,.07)}
.pk-ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.pk-n{font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.1;color:var(--text)}
.pk-l{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#918F88;margin-top:5px;white-space:nowrap}
.pk-s{font-size:10.5px;color:#b8b5ac;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes pkUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#perf-view-switch .pv-thumb{transition:none}.pk-card{animation:none}}

/* [16 Aug 2026, redesign inc-2] anx health spine — slow pulse on red (act) rows only */
@keyframes anxSpP{0%,100%{border-left-color:var(--bad-ink)}50%{border-left-color:rgba(214,69,65,.35)}}
.anx-r>td.anx-spr{animation:anxCellIn .4s cubic-bezier(.16,1,.3,1) var(--d,0ms) both,anxSpP 2.2s ease-in-out .6s infinite}
@media (prefers-reduced-motion:reduce){.anx-r>td.anx-spr{animation:none!important}}

/* ===== Date picker — copied verbatim from hi-portal (hi.helloodelivery.com) =====
   Scoped var block makes the picker render identically to hi-portal regardless of
   the ops portal's own theme vars. Everything below the var line is hi-portal's CSS. */
.dpwrap{--accent:#8B1A1A;--accent-soft:#F4E9E6;--panel:#FFFFFF;--panel2:#f8f9fd;--ink:#221F1C;--ink2:#6E655D;--line:rgba(34,31,28,.08);--line2:rgba(34,31,28,.13);--track:rgba(34,31,28,.06);--muted:#A79E95;--ease:cubic-bezier(.4,0,.2,1);--ease-out:cubic-bezier(.2,.8,.2,1)}
.dpwrap{position:relative}
.dpbtn{display:inline-flex;align-items:center;gap:7px;background:var(--panel);border:1px solid var(--line2);border-radius:11px;padding:8px 12px;font:inherit;font-size:13px;font-weight:560;color:var(--ink);cursor:pointer;transition:border-color .16s var(--ease),background .16s var(--ease)}
.dpbtn:hover{border-color:var(--muted);background:var(--panel2)}
.dpbtn .chev{color:var(--muted);transition:transform .2s var(--ease)}
.dpbtn[aria-expanded="true"]{border-color:var(--accent)}
.dpbtn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.dppop{position:absolute;top:calc(100% + 8px);left:0;z-index:60;background:var(--panel);border:1px solid var(--line2);border-radius:16px;box-shadow:0 18px 48px rgba(34,31,28,.16);width:454px;overflow:hidden;transform-origin:top left;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px) scale(.96);transition:opacity .18s var(--ease),transform .24s var(--ease-out),visibility 0s linear .18s}
.dppop.open{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .18s var(--ease),transform .24s var(--ease-out),visibility 0s}
.dp-body{display:flex}
.dp-rail{width:132px;padding:10px 8px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:2px;background:var(--panel2)}
.dp-pr{text-align:left;background:transparent;border:0;border-radius:9px;padding:8px 10px;font:inherit;font-size:12.5px;font-weight:560;color:var(--ink2);cursor:pointer;transition:background .14s var(--ease),color .14s var(--ease)}
.dp-pr:hover{background:var(--panel);color:var(--ink)}
.dp-pr.on{background:var(--accent-soft);color:var(--accent);font-weight:680}
.dp-calside{flex:1;padding:12px 14px 8px}
.dp-cmh{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.dp-mt{font-size:13.5px;font-weight:680;color:var(--ink);display:inline-flex;align-items:center;cursor:pointer;border-radius:7px;padding:2px 7px;transition:background .14s var(--ease)}
.dp-mt:hover{background:var(--track)}
.dp-mt::after{content:"";width:0;height:0;margin-left:6px;border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-top:4px solid var(--muted);transition:transform .16s var(--ease)}
.dp-mt.jmp::after{transform:rotate(180deg)}
.dp-nav{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid var(--line2);background:var(--panel);border-radius:8px;color:var(--ink2);cursor:pointer;transition:background .14s var(--ease),border-color .14s var(--ease)}
.dp-nav:hover:not(:disabled){background:var(--panel2);color:var(--ink)}
.dp-nav:disabled{opacity:.32;cursor:not-allowed}
.dp-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.dp-dow span{text-align:center;font-size:10.5px;font-weight:640;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px 0;grid-auto-rows:34px;min-height:214px;align-content:start}
.dp-grid.aniL{animation:dpML .18s var(--ease-out)}
.dp-grid.aniR{animation:dpMR .18s var(--ease-out)}
@keyframes dpML{from{opacity:.3;transform:translateX(-9px)}to{opacity:1;transform:none}}
@keyframes dpMR{from{opacity:.3;transform:translateX(9px)}to{opacity:1;transform:none}}
.dp-day{position:relative;height:34px;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:560;color:var(--ink);cursor:pointer;border:0;background:transparent;padding:0}
.dp-day.emp{visibility:hidden;pointer-events:none}
.dp-day.fut{color:var(--muted);opacity:.4;cursor:not-allowed;pointer-events:none}
.dp-day .n{position:relative;z-index:2;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .12s var(--ease)}
.dpwrap .dp-day:hover{background:transparent}
.dp-day:hover:not(.fut):not(.sel) .n{background:var(--track)}
.dp-day.rng::before{content:"";position:absolute;inset:2px 0;background:rgba(139,26,26,.09);z-index:0}
.dp-day.rs::before{left:50%;border-radius:16px 0 0 16px}
.dp-day.re::before{right:50%;border-radius:0 16px 16px 0}
.dp-day.rs.re::before{display:none}
.dp-day.prv::before{content:"";position:absolute;inset:2px 0;background:rgba(139,26,26,.05);z-index:0}
.dp-day.prv.pvs::before{left:50%;border-radius:16px 0 0 16px}
.dp-day.prv.pve::before{right:50%;border-radius:0 16px 16px 0}
.dp-day.prv.pvs.pve::before{display:none}
.dp-day.sel .n{background:var(--accent);color:#fff;font-weight:680;box-shadow:0 1px 3px rgba(139,26,26,.32)}
.dp-day.today:not(.sel) .n{box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent);font-weight:680}
.dp-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;border-top:1px solid var(--line);background:var(--panel2)}
.dp-sum{font-size:12px;color:var(--ink2);font-weight:560}
.dp-sum b{color:var(--ink);font-weight:680}
.dp-acts{display:flex;gap:8px}
.dp-cancel{background:transparent;border:1px solid var(--line2);border-radius:9px;padding:7px 13px;font:inherit;font-size:12.5px;font-weight:600;color:var(--ink2);cursor:pointer;transition:background .14s var(--ease)}
.dp-cancel:hover{background:var(--panel)}
.dp-apply{background:var(--accent);border:0;border-radius:9px;padding:7px 15px;font:inherit;font-size:12.5px;font-weight:640;color:#fff;cursor:pointer;box-shadow:0 2px 8px rgba(139,26,26,.24)}
.dp-apply:hover{filter:brightness(1.06)}
.dp-apply:active,.dp-cancel:active,.dp-nav:active:not(:disabled),.dp-pr:active{transform:translateY(1px)}
@media(prefers-reduced-motion:reduce){.dppop,.dppop.open{transition:none}.dp-grid.aniL,.dp-grid.aniR{animation:none}.dp-day .dp-cv{animation:none!important}.dp-day:hover:not(.fut):not(.sel) .n{transform:none}}
@media(max-width:520px){.dppop{width:min(454px,92vw)}}
.dp-day .dp-cv{position:absolute;left:50%;transform:translateX(-50%);bottom:2px;width:4px;height:4px;border-radius:50%;background:var(--accent);opacity:.45;pointer-events:none}
@keyframes dpDotIn{from{opacity:0;transform:translateX(-50%) scale(.3)}}
.dp-day.sel .dp-cv{background:#fff;opacity:.9}

/* Date picker — month/year quick-jump (click the month title) */
.dp-jump{display:none;padding:4px 0 8px;animation:dpJumpIn .18s var(--ease-out)}
.dp-jump.show{display:block}
@keyframes dpJumpIn{from{opacity:0;transform:translateY(-5px)}}
.dp-jmonths{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.dp-jm{padding:13px 0;border:1px solid var(--line2);background:var(--panel);border-radius:10px;font:inherit;font-size:12.5px;font-weight:560;color:var(--ink);cursor:pointer;transition:background .14s var(--ease),border-color .14s var(--ease),color .14s var(--ease),transform .1s var(--ease)}
.dp-jm:hover:not(:disabled){background:var(--panel2);border-color:var(--muted)}
.dp-jm:active:not(:disabled){transform:translateY(1px)}
.dp-jm:disabled{opacity:.3;cursor:not-allowed}
.dp-jm.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:680;box-shadow:0 2px 8px rgba(139,26,26,.22)}
@media(prefers-reduced-motion:reduce){.dp-jump{animation:none}}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   [30 Aug 2026] HELLOO STATEMENT DESIGN SYSTEM
   One source of truth for the "statement" look used on profile tabs (Account, Advances, Fines)
   and everywhere financial data is listed. Reference these vars + .hs-* classes instead of inline
   hex, so the whole app's professional look is defined once and changed once.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
:root{
  /* ink */
  --hs-ink:#1a1815;          /* primary figures / strong text */
  --hs-ink-2:#1c1a17;        /* body text */
  --hs-mute:#8a827a;         /* secondary text */
  --hs-mute-2:#a89f95;       /* labels, captions */
  --hs-faint:#b0a59a;        /* dimmed / struck-through */
  /* meaning */
  --hs-debt:#a5352b;         /* money owed / remaining (ink-red) */
  --hs-debt-strong:#b23325;  /* overdue / open badge text */
  --hs-good:#2d6a2e;         /* recovered / paid / cleared */
  --hs-info:#185FA5;         /* Dubai Police / informational */
  --hs-warn:#8a5300;         /* Abu Dhabi / warning / mid-age */
  /* surfaces + lines */
  --hs-line:#dbdce0;         /* card / header hairline */
  --hs-line-2:#e7e8ec;       /* inner divider (summary cells) */
  --hs-row:#ebecf0;          /* row separator (active) */
  --hs-row-2:#eeeff3;        /* row separator (settled) */
  --hs-chip:#eff0f4;         /* code chip / neutral fill */
  --hs-track:#e7e8ec;        /* progress-bar track */
  --hs-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
/* Summary strip: bordered row of monospace figures. <div class="hs-sum"><div class="hs-sc">…</div></div> */
.hs-sum{display:flex;border:1px solid var(--hs-line);border-radius:8px;overflow:hidden;margin:0 0 16px;font-variant-numeric:tabular-nums}
.hs-sc{flex:1;padding:10px 14px;border-right:1px solid var(--hs-line-2)}
.hs-sc:last-child{border-right:none}
.hs-sl{font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--hs-mute-2)}
.hs-sv{font-size:16px;font-weight:600;margin-top:2px;font-family:var(--hs-mono);color:var(--hs-ink)}
.hs-sv.debt{color:var(--hs-debt)}.hs-sv.good{color:var(--hs-good)}
/* Section label */
.hs-sec{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--hs-mute-2);margin:0 0 6px}
.hs-sec.mt{margin-top:22px}
/* List row (active) + settled variant */
.hs-row{display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--hs-row);cursor:pointer}
.hs-row.first{border-top:none}
.hs-row.settled{gap:12px;padding:8px 0;border-top-color:var(--hs-row-2);opacity:.72}
/* Code chip */
.hs-code{font-family:var(--hs-mono);font-size:10px;color:var(--hs-mute);background:var(--hs-chip);padding:2px 6px;border-radius:4px;flex-shrink:0}
.hs-code.dim{color:var(--hs-faint)}
/* Primary label (truncates) + sub-line */
.hs-main{flex:1;min-width:0}
.hs-title{font-size:13px;color:var(--hs-ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs-sub{font-size:11px;color:var(--hs-mute-2);margin-top:3px}
/* Amount (right) */
.hs-amt{font-family:var(--hs-mono);font-weight:600;text-align:right;white-space:nowrap;flex-shrink:0}
.hs-amt .v{font-size:14px;color:var(--hs-debt)}
.hs-amt .age{font-size:10px;margin-top:2px;font-family:var(--hs-mono)}
.hs-amt.struck .v{color:var(--hs-faint);text-decoration:line-through}
/* Progress bar */
.hs-bar{height:4px;border-radius:99px;background:var(--hs-track);overflow:hidden;flex-shrink:0}
.hs-bar>span{display:block;height:100%;background:var(--hs-mute)}
.hs-bar>span.done{background:#2d8a3e}
/* Status pill */
.hs-pill{font-size:10px;font-weight:600;padding:2px 8px;border-radius:5px;flex-shrink:0}
.hs-pill.debt{background:rgba(178,51,37,.09);color:var(--hs-debt-strong)}
.hs-pill.info{background:rgba(24,95,165,.1);color:var(--hs-info)}
.hs-pill.warn{background:rgba(184,110,0,.1);color:var(--hs-warn)}
.hs-pill.good{background:rgba(45,106,46,.1);color:var(--hs-good)}
.hs-pill.mute{background:var(--hs-chip);color:var(--hs-mute)}

/* ═══ BIKE DETAIL DRAWER [31 Aug 2026] — light sleek right slide-over ═══ */
.bike-drawer-scrim{position:fixed;inset:0;background:rgba(90,80,70,.18);z-index:260;display:none;justify-content:flex-end;opacity:0;transition:opacity .28s ease,backdrop-filter .28s ease;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}
.bike-drawer-scrim.open{display:flex;opacity:1;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.bike-drawer{width:432px;max-width:94vw;height:100%;background:#fff;box-shadow:-10px 0 50px rgba(90,80,70,.16),-1px 0 0 rgba(0,0,0,.03);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .46s cubic-bezier(.16,.84,.28,1);position:relative;overflow:hidden;will-change:transform}
.bike-drawer-scrim.open .bike-drawer{transform:translateX(0)}
@media (prefers-reduced-motion: reduce){.bike-drawer{transition:transform .2s ease}.bike-drawer-scrim{transition:opacity .2s ease}}
.bike-drawer::before{display:none}
.bike-drawer-body{flex:1;overflow-y:auto;position:relative;z-index:1}
.bike-drawer-foot{position:relative;z-index:1;border-top:1px solid #ebecf0;background:rgba(248,249,253,.75);backdrop-filter:blur(8px)}
/* drawer inner design tokens (bd-*) */
.bd-hd{padding:24px 24px 18px;display:flex;flex-direction:column;gap:14px}
.bd-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.bd-code{font-family:var(--mono);font-size:24px;font-weight:500;letter-spacing:-.02em;color:#16181a;line-height:1.1}
.bd-plate{font-family:var(--mono);font-size:13px;font-weight:400;color:#6f675f}
.bd-x{margin-left:auto;flex-shrink:0;width:40px;height:40px;border-radius:10px;border:1px solid #e5e6ea;background:rgba(255,255,255,.8);color:#a0988f;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 2px rgba(90,80,70,.05);transition:background .18s,color .18s,transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .18s}
.bd-x:hover{background:#fff;color:#b0453c;transform:rotate(90deg);box-shadow:0 2px 8px rgba(90,80,70,.12)}
.bd-x:active{transform:rotate(90deg) scale(.86)}
.bd-sub{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:13px;color:#6f675f;letter-spacing:-.005em}
.bd-dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:8px;vertical-align:middle}
.bd-figs{display:flex;padding:6px 26px 22px;gap:0;flex-wrap:nowrap}
.bd-figs>div{flex:1;min-width:0}
.bd-figs>div+div{padding-left:18px;margin-left:18px;border-left:1px solid #ebecf0}
.bd-figl{font-size:9.5px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:#b3aaa0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-figv{font-family:var(--mono);font-size:19px;font-weight:500;font-variant-numeric:tabular-nums;margin-top:8px;letter-spacing:-.02em;color:#16181a;line-height:1}
.bd-figv .un{color:#c0b8ae;font-weight:400;font-size:12px}
.bd-figv.mut{color:#9a928a}.bd-figv.warn{color:#c88a1a}
.bd-rule{border:none;border-top:1px solid #ebecf0;margin:0}
.bd-tabs{display:flex;padding:0 24px;gap:24px;overflow-x:auto;scrollbar-width:none}
.bd-tabs::-webkit-scrollbar{display:none}
.bd-tab{position:relative;padding:14px 0;font-size:13px;font-weight:400;color:#9a928a;border:none;background:none;margin-bottom:-1px;cursor:pointer;letter-spacing:-.006em;white-space:nowrap;font-family:var(--font);transition:color .2s ease}
.bd-tab::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1.5px;background:#33b866;border-radius:2px;transform:scaleX(0);transform-origin:center;transition:transform .28s cubic-bezier(.34,1.4,.5,1)}
.bd-tab:hover{color:#5a534c}
.bd-tab.on{color:#16181a;font-weight:500}
#bd-tab-slider{position:absolute;bottom:0;height:2px;background:#16181a;border-radius:2px;left:0;width:0;opacity:0;transition:left .3s cubic-bezier(.4,.8,.3,1),width .3s cubic-bezier(.4,.8,.3,1),opacity .2s ease;pointer-events:none}
.bd-b{padding:20px 24px;animation:bdTabIn .26s cubic-bezier(.2,.8,.25,1)}
@keyframes bdTabIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.bd-sect{margin-bottom:26px}
.bd-st{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#b0a89e;margin:0 0 14px}
.bd-rn{font-size:15px;font-weight:600;letter-spacing:-.01em;color:#16181a}
.bd-rmeta{font-size:12.5px;color:#8a827a;margin-top:6px;letter-spacing:-.004em}
.bd-rmeta .m{font-family:var(--mono);font-size:11.5px;color:#5a534c}
.bd-field{border:1px solid #e2e3e7;border-radius:9px;padding:9px 12px;font-size:13.5px;color:#a8a099;display:flex;align-items:center;gap:9px;background:#fff;letter-spacing:-.006em}
.bd-field .m{font-family:var(--mono);font-size:13px;color:#5a534c}
.bd-row{display:flex;gap:12px;margin-top:12px}
.bd-mlbl{font-size:10.5px;font-weight:500;letter-spacing:.03em;text-transform:uppercase;color:#b0a89e;margin-bottom:6px}
.bd-acts{display:flex;gap:10px;margin-top:22px;align-items:center}
.bd-pri{padding:11px 22px;border-radius:10px;font-size:12.5px;font-weight:600;background:#16181a;color:#fff;border:1px solid #16181a;cursor:pointer;letter-spacing:-.008em;box-shadow:0 1px 2px rgba(22,24,26,.12),0 2px 8px rgba(22,24,26,.14);font-family:var(--font);transition:transform .24s cubic-bezier(.34,1.56,.64,1),box-shadow .24s ease,background .18s}
.bd-pri:not(:disabled):hover{transform:translateY(-1.5px);background:#000;box-shadow:0 4px 10px rgba(22,24,26,.2),0 8px 22px rgba(22,24,26,.22)}
.bd-pri:not(:disabled):active{transform:translateY(0) scale(.96);box-shadow:0 1px 3px rgba(22,24,26,.18);transition:transform .1s ease}
.bd-pri:disabled{background:#f5f6fa;color:#b8afa5;box-shadow:none;cursor:not-allowed;border:1px solid #e5e6ea;font-weight:500}
.bd-lnk{font-size:12.5px;font-weight:600;color:#a5453c;background:#fff;border:1px solid #ecdcd9;cursor:pointer;letter-spacing:-.008em;font-family:var(--font);padding:11px 20px;border-radius:10px;border-radius:8px;transition:background .18s,transform .2s cubic-bezier(.34,1.56,.64,1)}
.bd-lnk:hover{background:#fdf6f5;border-color:#e3cac6;transform:translateY(-1.5px);box-shadow:0 3px 8px rgba(165,69,60,.1)}
.bd-lnk:active{transform:scale(.94);transition:transform .1s ease}
.bd-statusrow{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border:1px solid #e8e9ed;border-radius:11px;margin-top:10px;cursor:pointer;width:100%;background:#fff;transition:border-color .15s,background .15s,box-shadow .15s;border-left:none;border-right:none;border-bottom:none;text-align:left;font-family:var(--font);border-radius:10px;transition:background .2s ease}
.bd-statusrow:hover{border-color:#dedfe3;box-shadow:0 2px 8px rgba(90,80,70,.05)}
.bd-statusrow:active{transform:scale(.99)}
.bd-statusrow svg{transition:transform .22s cubic-bezier(.34,1.56,.64,1)}
.bd-statusrow:hover svg{transform:translateX(2px)}
.bd-sric{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bd-srl{font-size:13.5px;color:#a5453c;font-weight:600;letter-spacing:-.008em}
.bd-srl.green{color:#2a9455}
.bd-srd{font-size:12px;color:#a8a099;margin-top:3px;letter-spacing:-.004em}
.bd-hrow{display:flex;align-items:baseline;gap:12px;padding:12px 0;border-top:1px solid #ebecf0}
.bd-hrow:first-of-type{border-top:none}
.bd-hcn{font-size:13.5px;font-weight:500;color:#2a2824;letter-spacing:-.008em}
.bd-hcd{font-family:var(--mono);font-size:11.5px;color:#9a928a;margin-top:3px}
.bd-num{font-family:var(--mono);font-size:11.5px;color:#8a827a;font-variant-numeric:tabular-nums;margin-left:auto}
.bd-ftrow{padding:14px 24px;display:flex;align-items:center}
.bd-fb{font-size:13px;font-weight:500;border:none;background:none;color:#8a827a;cursor:pointer;letter-spacing:-.006em;display:inline-flex;align-items:center;gap:7px;font-family:var(--font);padding:8px 12px;border-radius:8px;transition:background .18s,color .18s,transform .2s cubic-bezier(.34,1.56,.64,1)}
.bd-fb:hover{background:rgba(200,138,26,.08);color:#b06a10;transform:translateY(-1px)}
.bd-fb:active{transform:scale(.94);transition:transform .1s ease}
.bd-fb svg{transition:transform .22s cubic-bezier(.34,1.56,.64,1)}
.bd-fb:hover svg{transform:scale(1.12) rotate(-4deg)}
.bd-fbp{padding:10px 22px;border-radius:9px;background:#fff;border:1px solid #dedfe3;color:#2a2824;font-weight:500;font-size:13px;letter-spacing:-.006em;cursor:pointer;box-shadow:0 1px 2px rgba(90,80,70,.05);font-family:var(--font);transition:transform .24s cubic-bezier(.34,1.56,.64,1),box-shadow .22s ease,border-color .18s}
.bd-fbp:hover{transform:translateY(-1.5px);border-color:#d8cfc4;box-shadow:0 4px 12px rgba(90,80,70,.12)}
.bd-fbp:active{transform:translateY(0) scale(.96);box-shadow:0 1px 2px rgba(90,80,70,.06);transition:transform .1s ease}
/* [7 Oct 2026] bike drawer, Manage tab — premium pass v2. Same language as the staff login page (blur rise-in,
   spring hovers, ring cards, maroon go-circles, cursor spotlight, count-up numbers), checked with the design
   skills: colour tokens instead of loose hex, individual transform properties with identity bases (no
   stacking-context jumps on hover), hover effects only on real pointers, 44px targets, visible focus, AA
   contrast, finite pulses, and nothing moves for reduced-motion users. */
.bike-drawer,#bike-usage-editor-overlay,#bike-backfill-overlay,#bike-maint-overlay{
  --bd-ease:cubic-bezier(.32,.72,0,1);--bd-spring:cubic-bezier(.34,1.56,.64,1);
  --bd-acc:#8B1A1A;--bd-acc-d:#7d1717;--bd-ink:#1a1714;--bd-mut:#6f675f;--bd-faint:#a39a90;--bd-paper:#fff;--bd-warm:#f5f4f3;
  --bd-hair:rgba(90,58,50,.10);--bd-hair2:rgba(90,58,50,.16);
  --bd-ok:#1f6b3a;--bd-ok-bg:#e8f3ec;--bd-live:#2f9e5e;
  --bd-warn:#8a5a12;--bd-warn-bg:#f8efdf;
  --bd-danger:#a5453c;--bd-danger-bg:#f8e9e7;--bd-danger-ink:#8f3a32;
  --bd-neutral:#4f4842;--bd-neutral-bg:#eeeff3
}
/* rise-in, staggered; plays when a bike opens, not on tab switches or refreshes */
.bd-in{opacity:0;transform:translateY(12px);filter:blur(5px);animation:bdRise .8s var(--bd-ease) forwards}
.bd-d1{animation-delay:.04s}.bd-d2{animation-delay:.1s}.bd-d3{animation-delay:.16s}.bd-d4{animation-delay:.22s}.bd-d5{animation-delay:.28s}.bd-d6{animation-delay:.34s}.bd-d7{animation-delay:.4s}
@keyframes bdRise{to{opacity:1;transform:none;filter:blur(0)}}
.bd-noanim .bd-in{animation:none;opacity:1;transform:none;filter:none}
.bd-noanim .bd-hb-s{animation:none;transform:none}
.bd-b.bd-noanim{animation:none}
/* header */
.bd-idc{display:flex;flex-direction:column;gap:6px;min-width:0}
.bd-idr{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bd-x{width:44px;height:44px}
.bd-pill{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;padding:4px 11px 4px 9px;border-radius:999px;white-space:nowrap;letter-spacing:-.005em}
.bd-pill i{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.bd-pill.ok{color:var(--bd-ok);background:var(--bd-ok-bg)}
.bd-pill.warn{color:var(--bd-warn);background:var(--bd-warn-bg)}
.bd-pill.danger{color:var(--bd-danger);background:var(--bd-danger-bg)}
.bd-pill.neutral{color:var(--bd-neutral);background:var(--bd-neutral-bg)}
.bd-pill.live i{background:var(--bd-live);box-shadow:0 0 0 3px rgba(47,158,94,.18);animation:bdPulse 2.4s ease-in-out .6s 2}
@keyframes bdPulse{50%{box-shadow:0 0 0 6px rgba(47,158,94,.05)}}
/* rider card: ring card + cursor spotlight + maroon go-circle */
.bd-spot{--mx:50%;--my:-400px}
.bd-rider{display:flex;align-items:center;gap:12px;width:100%;padding:12px 12px 12px 14px;border:0;border-radius:16px;background:radial-gradient(240px circle at var(--mx) var(--my),rgba(139,26,26,.08),transparent 62%),var(--bd-paper);box-shadow:0 0 0 1px var(--bd-hair2),0 10px 24px -20px rgba(70,30,20,.35);text-align:left;cursor:pointer;font-family:var(--font);scale:1;transition:box-shadow .35s var(--bd-ease),scale .4s var(--bd-ease)}
.bd-rider:active{scale:.985}
.bd-rider:disabled{cursor:default}
.bd-av{width:40px;height:40px;border-radius:50%;background:linear-gradient(150deg,#a32222,#6f1515);color:#fff;display:grid;place-items:center;font-size:13.5px;font-weight:700;letter-spacing:.02em;flex-shrink:0;box-shadow:0 6px 14px -6px rgba(139,26,26,.55);rotate:0deg;scale:1;transition:rotate .55s var(--bd-spring),scale .55s var(--bd-spring)}
.bd-rtx{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.bd-rnm{font-size:14.5px;font-weight:600;color:var(--bd-ink);letter-spacing:-.008em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bd-rsub{font-size:12.5px;color:var(--bd-mut)}
.bd-go{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;background:rgba(139,26,26,.07);color:var(--bd-acc);translate:0;transition:translate .55s var(--bd-spring),background .3s var(--bd-ease),color .3s var(--bd-ease)}
/* money strip */
.bd-figw{display:flex;flex-direction:column;gap:8px}
.bd-figlbl{font-size:12px;color:var(--bd-mut)}
.bd-fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.bd-fc{background:var(--bd-paper);border-radius:14px;padding:11px 12px;box-shadow:0 0 0 1px var(--bd-hair);display:flex;flex-direction:column;gap:4px;min-width:0;translate:0;transition:translate .45s var(--bd-ease),box-shadow .45s var(--bd-ease)}
.bd-fcl{font-size:12px;color:var(--bd-mut)}
.bd-fcv{font-family:var(--mono);font-size:18px;font-weight:500;color:var(--bd-ink);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-fcs{font-family:var(--mono);font-size:12px;color:var(--bd-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-fcs.ok{font-family:var(--font);color:var(--bd-ok)}.bd-fcs.warn{font-family:var(--font);color:var(--bd-warn)}
/* Mulkiyya nudge */
.bd-alert{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:46px;padding:0 14px;margin-bottom:12px;border:0;border-radius:14px;background:#fdf5f3;box-shadow:0 0 0 1px rgba(165,69,60,.2);cursor:pointer;font-family:var(--font);text-align:left;scale:1;transition:box-shadow .35s var(--bd-ease),scale .4s var(--bd-ease)}
.bd-alert:active{scale:.985}
.bd-alert.soon{background:#f4f5f9;box-shadow:0 0 0 1px rgba(154,106,28,.22)}
.bd-alt{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:500;color:var(--bd-danger-ink)}
.bd-alt svg{flex-shrink:0;animation:bdNudge 2.2s var(--bd-ease) 1s 2}
@keyframes bdNudge{0%,60%,100%{rotate:0deg;scale:1}12%{rotate:-14deg;scale:1.1}24%{rotate:12deg;scale:1.1}36%{rotate:-6deg}48%{rotate:3deg}}
.bd-alert.soon .bd-alt{color:var(--bd-warn)}
.bd-ala{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--bd-acc);white-space:nowrap}
.bd-ala svg,.bd-lk svg{translate:0;transition:translate .5s var(--bd-spring)}
/* grouped actions */
.bd-alist{border-radius:16px;overflow:hidden;background:var(--bd-paper);box-shadow:0 0 0 1px var(--bd-hair2),0 12px 30px -24px rgba(70,30,20,.4)}
.bd-arow{display:flex;align-items:center;gap:12px;width:100%;min-height:66px;padding:12px 14px 12px 16px;border:none;background:transparent;text-align:left;cursor:pointer;font-family:var(--font);transition:background .3s var(--bd-ease)}
.bd-arow+.bd-arow{border-top:1px solid var(--bd-hair)}
.bd-arow:active{background:#ecedf1}
.bd-arow .bd-go{background:transparent;color:var(--bd-faint)}
.bd-aic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex-shrink:0;rotate:0deg;scale:1;transition:rotate .55s var(--bd-spring),scale .55s var(--bd-spring)}
.bd-aic.ok{background:var(--bd-ok-bg);color:var(--bd-ok)}
.bd-aic.warn{background:var(--bd-warn-bg);color:var(--bd-warn)}
.bd-aic.danger{background:var(--bd-danger-bg);color:var(--bd-danger)}
.bd-aic.neutral{background:var(--bd-neutral-bg);color:var(--bd-neutral)}
.bd-atx{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.bd-atl{font-size:14px;font-weight:600;color:var(--bd-ink);letter-spacing:-.008em}
.bd-atl.danger{color:var(--bd-danger)}
.bd-atd{font-size:12.5px;color:var(--bd-mut)}
/* sections */
.bd-sec{margin-top:24px}
.bd-sech{font-size:13px;font-weight:600;color:var(--bd-ink);margin:0 0 8px;letter-spacing:-.005em}
.bd-sechr{display:flex;justify-content:space-between;align-items:center}
.bd-sechr .bd-sech{margin:0}
.bd-lk{display:inline-flex;align-items:center;gap:5px;min-height:44px;border:none;background:none;padding:0 2px;color:var(--bd-acc);font-size:13px;font-weight:600;cursor:pointer;font-family:var(--font)}
/* riders bar: grows in left to right; hover swaps the caption for that rider */
.bd-hb{display:flex;gap:2px;height:12px;margin-top:6px}
.bd-hb-s{min-width:3px;height:100%;border-radius:3px;transform-origin:left center;transform:scaleX(0);scale:1;animation:bdGrow .75s var(--bd-ease) forwards;transition:scale .35s var(--bd-spring),filter .2s ease}
.bd-hb-s:first-child{border-radius:6px 3px 3px 6px}.bd-hb-s:last-child{border-radius:3px 6px 6px 3px}.bd-hb-s:only-child{border-radius:6px}
@keyframes bdGrow{to{transform:scaleX(1)}}
.bd-hb-s.a{background:#9c8d7f}.bd-hb-s.b{background:#7a6b5f}
.bd-hb-s.idle{background:repeating-linear-gradient(135deg,#e2e3e7 0 3px,#f1f2f6 3px 6px)}
.bd-hb-s.now{background:linear-gradient(90deg,#a32222,var(--bd-acc));box-shadow:0 0 0 3px rgba(139,26,26,.10)}
.bd-hbl{position:relative;display:flex;justify-content:space-between;gap:8px;margin-top:9px;font-size:12px;color:var(--bd-mut);min-height:16px}
.bd-hbl>span{transition:opacity .2s ease}
.bd-hbl.tip>span:not(.bd-hbc){opacity:0}
.bd-hbl.tip .bd-hbc{position:absolute;left:0;right:0;text-align:center;color:var(--bd-ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* idle bike: double-bezel card + pill CTA (the login card) */
.bd-idle{padding:6px;margin-bottom:12px;border-radius:22px;background:radial-gradient(260px circle at var(--mx) var(--my),rgba(139,26,26,.12),transparent 62%),linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.45));box-shadow:0 0 0 1px var(--bd-hair),0 24px 50px -30px rgba(70,30,20,.32)}
.bd-idle-in{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:17px;background:var(--bd-paper);box-shadow:inset 0 1px 0 #fff,0 0 0 1px var(--bd-hair)}
.bd-idt{display:flex;flex-direction:column;gap:4px}
.bd-idh{font-size:17px;font-weight:700;color:var(--bd-ink);letter-spacing:-.015em}
.bd-ids{font-size:13px;color:var(--bd-mut)}
.bd-idr2{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--bd-warn)}
.bd-idr2 .m{font-family:var(--mono)}
.bd-cta{position:relative;width:100%;height:50px;margin-top:2px;border:0;border-radius:999px;background:var(--bd-acc);color:#fff;font-family:var(--font);font-weight:700;font-size:14.5px;cursor:pointer;display:flex;align-items:center;gap:10px;padding:0 6px 0 22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 12px 24px -12px rgba(139,26,26,.55);scale:1;transition:scale .45s var(--bd-ease),background .3s var(--bd-ease),box-shadow .3s var(--bd-ease)}
.bd-cta:active{scale:.98}
.bd-cta .t{flex:1;text-align:center;margin-left:32px}
.bd-cta .ic{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center;translate:0;scale:1;transition:translate .55s var(--bd-spring),scale .55s var(--bd-spring),background .3s var(--bd-ease)}
/* footer */
.bd-ftrow .bd-fb{color:#3d3833;font-size:13.5px;min-height:44px}
.bd-fbd{min-height:44px;padding:0 24px;border-radius:999px;border:0;background:var(--bd-ink);color:#fff;font-size:13.5px;font-weight:600;cursor:pointer;font-family:var(--font);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 20px -12px rgba(26,23,20,.6);translate:0;scale:1;transition:translate .45s var(--bd-ease),scale .3s var(--bd-ease),box-shadow .3s var(--bd-ease),background .3s var(--bd-ease)}
.bd-fbd:active{scale:.97}
/* keyboard focus */
.bd-rider:focus-visible,.bd-arow:focus-visible,.bd-alert:focus-visible,.bd-cta:focus-visible,.bd-lk:focus-visible,.bd-fbd:focus-visible,.bd-ftrow .bd-fb:focus-visible,.bd-x:focus-visible{outline:2px solid var(--bd-acc);outline-offset:2px}
/* hover only where there is a real pointer, so taps on phones don't leave things stuck "hovered" */
@media (hover:hover){
  .bd-rider:hover{box-shadow:0 0 0 1.5px var(--bd-acc),0 12px 26px -14px rgba(139,26,26,.42)}
  .bd-rider:hover .bd-av{rotate:-6deg;scale:1.05}
  .bd-rider:hover .bd-go,.bd-arow:hover .bd-go{background:var(--bd-acc);color:#fff;translate:3px 0}
  .bd-arow.danger:hover .bd-go{background:var(--bd-danger)}
  .bd-fc:hover{translate:0 -2px;box-shadow:0 0 0 1px var(--bd-hair2),0 14px 26px -18px rgba(70,30,20,.45)}
  .bd-alert:hover{box-shadow:0 0 0 1.5px var(--bd-danger),0 10px 22px -16px rgba(165,69,60,.5)}
  .bd-alert.soon:hover{box-shadow:0 0 0 1.5px #9a6a1c,0 10px 22px -16px rgba(154,106,28,.45)}
  .bd-alert:hover .bd-ala svg,.bd-lk:hover svg{translate:3px 0}
  .bd-arow:hover{background:var(--bd-warm)}
  .bd-arow:hover .bd-aic{rotate:-6deg;scale:1.08}
  .bd-hb-s:hover{scale:1 1.6;filter:brightness(.92)}
  .bd-cta:hover{background:var(--bd-acc-d);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 16px 30px -12px rgba(139,26,26,.6)}
  .bd-cta:hover .ic{translate:3px 0;scale:1.06;background:rgba(255,255,255,.22)}
  .bd-ftrow .bd-fb:hover{background:rgba(139,26,26,.05);color:var(--bd-ink);transform:none}
  .bd-fbd:hover{background:#000;translate:0 -1px;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 14px 26px -12px rgba(26,23,20,.65)}
}
@media (prefers-reduced-motion:reduce){
  .bike-drawer .bd-in,.bike-drawer .bd-hb-s{animation:none;opacity:1;transform:none;filter:none}
  .bd-pill.live i,.bd-alt svg{animation:none}
  .bike-drawer .bd-av,.bike-drawer .bd-go,.bike-drawer .bd-aic,.bike-drawer .bd-fc,.bike-drawer .bd-cta .ic,.bike-drawer .bd-hb-s{transition:none}
}
/* [7 Oct 2026] bike drawer — Overview, Cost and History tabs plus the Edit dates / End assignment screen,
   in the same premium language as the Manage tab (ring cards, pill buttons, spring hovers, maroon focus). */
.bd-card{background:var(--bd-paper);border-radius:16px;padding:14px 16px;box-shadow:0 0 0 1px var(--bd-hair2),0 12px 30px -24px rgba(70,30,20,.4)}
.bd-card+.bd-card{margin-top:12px}
.bd-card .bd-sech{margin:0 0 6px}
.bd-kv{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:42px;font-size:13.5px;color:var(--bd-mut)}
.bd-kv+.bd-kv{border-top:1px solid var(--bd-hair)}
.bd-kv>b{font-weight:500;color:var(--bd-ink);text-align:right}
.bd-kv>b.m,.bd-kv .m{font-family:var(--mono);font-variant-numeric:tabular-nums}
.bd-kv>b.danger{color:var(--bd-danger);font-weight:600}.bd-kv>b.warn{color:var(--bd-warn)}.bd-kv>b.mut{color:var(--bd-faint);font-weight:400}
.bd-kvr{display:inline-flex;align-items:center;gap:12px}
.bd-kv .bd-lk{min-height:36px}
.bd-tag{display:inline-flex;align-items:center;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:999px;white-space:nowrap;vertical-align:1px;font-family:var(--font)}
.bd-tag.ok{color:var(--bd-ok);background:var(--bd-ok-bg)}.bd-tag.warn{color:var(--bd-warn);background:var(--bd-warn-bg)}.bd-tag.danger{color:var(--bd-danger);background:var(--bd-danger-bg)}.bd-tag.neutral{color:var(--bd-neutral);background:var(--bd-neutral-bg)}.bd-tag.info{color:#1f4f86;background:#e8f0fa}
.bd-seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:4px;border-radius:14px;background:var(--bd-neutral-bg);margin:6px 0 14px}
.bd-segb{min-height:40px;border:0;border-radius:10px;background:transparent;color:var(--bd-mut);font-family:var(--font);font-size:13.5px;font-weight:500;cursor:pointer;transition:background .3s var(--bd-ease),color .3s var(--bd-ease),box-shadow .3s var(--bd-ease)}
.bd-segb.on{background:#fff;color:var(--bd-ink);font-weight:600;box-shadow:0 0 0 1px var(--bd-hair2),0 4px 10px -6px rgba(70,30,20,.3)}
.bd-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.bd-fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.bd-fll{font-size:12.5px;color:var(--bd-mut)}
.bd-opt{color:var(--bd-mut)}
.bd-inp{width:100%;height:44px;box-sizing:border-box;padding:0 12px;border:0;border-radius:12px;background:#fff;box-shadow:0 0 0 1px var(--bd-hair2);font-family:var(--font);font-size:14px;color:var(--bd-ink);outline:none;transition:box-shadow .25s var(--bd-ease)}
.bd-inp:focus{box-shadow:0 0 0 1.5px var(--bd-acc),0 0 0 5px rgba(139,26,26,.10)}
input[type="datetime-local"].bd-inp,input[type="number"].bd-inp{font-family:var(--mono);font-size:13.5px}
.bd-sel{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236f675f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px;cursor:pointer}
.bd-inp-wrap{display:flex;align-items:center;height:44px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px var(--bd-hair2);transition:box-shadow .25s var(--bd-ease)}
.bd-inp-wrap:focus-within{box-shadow:0 0 0 1.5px var(--bd-acc),0 0 0 5px rgba(139,26,26,.10)}
.bd-inp-wrap .bd-inp{box-shadow:none;background:transparent;height:100%;padding:0 10px}
.bd-inp-wrap .bd-inp:focus{box-shadow:none}
.bd-pre{padding-left:12px;font-size:12.5px;color:var(--bd-mut);flex-shrink:0}.bd-pre.post{padding:0 12px 0 0}
.bd-save{width:100%;height:46px;margin-top:14px;border:0;border-radius:999px;background:var(--bd-ink);color:#fff;font-family:var(--font);font-size:14px;font-weight:600;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 20px -12px rgba(26,23,20,.6);scale:1;transition:scale .3s var(--bd-ease),background .3s var(--bd-ease),box-shadow .3s var(--bd-ease)}
.bd-save.acc{background:var(--bd-acc);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 12px 24px -12px rgba(139,26,26,.55)}
.bd-save:active{scale:.98}
.bd-save:disabled,.bd-save.acc:disabled{background:#e4e5e9;color:#857b72;box-shadow:none;cursor:not-allowed}
.bd-ftrow .bd-save{width:auto;margin:0;padding:0 22px;height:44px}
.bd-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.bd-btn2{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 14px;border:0;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--bd-hair2);color:var(--bd-ink);font-family:var(--font);font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;scale:1;transition:box-shadow .3s var(--bd-ease),background .3s var(--bd-ease),scale .3s var(--bd-ease)}
.bd-btn2.acc{color:var(--bd-acc);background:#fdf5f3;box-shadow:0 0 0 1px rgba(139,26,26,.2)}
.bd-btn2.danger{color:var(--bd-danger)}
.bd-btn2:active{scale:.97}
.bd-btn2:disabled{opacity:.55;cursor:default}
.bd-ghost{min-height:44px;padding:0 14px;border:0;border-radius:999px;background:none;color:var(--bd-mut);font-family:var(--font);font-size:13.5px;font-weight:500;cursor:pointer;transition:background .3s var(--bd-ease),color .3s var(--bd-ease)}
.bd-hhead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.bd-hhead .bd-sech{font-size:15px;margin:0}
.bd-hsub{font-size:12.5px;color:var(--bd-mut);margin-top:3px}
.bd-hcard{background:var(--bd-paper);border-radius:16px;padding:14px 16px 12px;margin-bottom:12px;box-shadow:0 0 0 1px var(--bd-hair2)}
.bd-hcard .bd-hb{margin-top:0}
.bd-htot{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;padding-top:10px;border-top:1px solid var(--bd-hair);font-size:12.5px;color:var(--bd-mut)}
.bd-htot b{color:var(--bd-ink);font-weight:600}.bd-htot .m{font-family:var(--mono)}
.bd-hlist{display:flex;flex-direction:column;gap:10px}
.bd-hitem{display:flex;gap:12px;align-items:flex-start;padding:14px 14px 12px;border-radius:16px;background:var(--bd-paper);box-shadow:0 0 0 1px var(--bd-hair2),0 10px 24px -22px rgba(70,30,20,.4);transition:box-shadow .35s var(--bd-ease)}
.bd-hitem.now{box-shadow:0 0 0 1.5px rgba(139,26,26,.35),0 12px 26px -18px rgba(139,26,26,.35)}
.bd-hav{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;font-size:12.5px;font-weight:700;color:var(--bd-neutral);background:var(--bd-neutral-bg)}
.bd-hitem.now .bd-hav{color:#fff;background:linear-gradient(150deg,#a32222,#6f1515);box-shadow:0 6px 14px -6px rgba(139,26,26,.55)}
.bd-hmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.bd-htop{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.bd-hname{border:0;background:none;padding:0;font-family:var(--font);font-size:14px;font-weight:600;color:var(--bd-ink);cursor:pointer;text-align:left;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color .25s var(--bd-ease),color .25s var(--bd-ease)}
span.bd-hname{cursor:default}
.bd-hname.ws{color:var(--bd-danger)}
.bd-hdates{font-family:var(--mono);font-size:12px;color:var(--bd-mut);display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
.bd-hdates .arr{color:var(--bd-faint)}
.bd-hdates .dur{margin-left:2px;padding:1px 7px;border-radius:999px;background:var(--bd-neutral-bg);color:var(--bd-neutral);font-size:11.5px}
.bd-hmeta{font-size:12px;color:var(--bd-mut)}
.bd-hnote{font-size:12px;color:var(--bd-warn);font-style:italic}
.bd-hvids{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.bd-vchip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 11px;border:0;border-radius:999px;background:var(--bd-neutral-bg);color:var(--bd-neutral);font-family:var(--font);font-size:12px;font-weight:600;cursor:pointer;transition:background .25s var(--bd-ease),color .25s var(--bd-ease)}
.bd-himp{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.bd-chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;padding:3px 9px;border-radius:999px;background:#eeeff3;color:var(--bd-neutral);font-variant-numeric:tabular-nums;white-space:nowrap}
.bd-chip.danger{background:var(--bd-danger-bg);color:var(--bd-danger)}.bd-chip.ok{background:var(--bd-ok-bg);color:var(--bd-ok)}.bd-chip.ghost{background:transparent;color:var(--bd-faint)}
.bd-hfoot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px}
.bd-hfoot .bd-himp{margin-top:0}
.bd-hacts{display:flex;gap:2px;flex-shrink:0;margin:-6px -8px -6px auto}
.bd-ib{width:40px;height:40px;border-radius:12px;border:0;background:transparent;color:var(--bd-faint);display:grid;place-items:center;cursor:pointer;scale:1;transition:background .25s var(--bd-ease),color .25s var(--bd-ease),scale .3s var(--bd-spring)}
.bd-ib.on{color:var(--bd-ok);background:var(--bd-ok-bg)}
.bd-ib:active{scale:.92}
.bd-subh{display:flex;align-items:center;gap:12px;padding:18px 24px 16px;border-bottom:1px solid var(--bd-hair)}
.bd-back{width:44px;height:44px;border-radius:50%;border:0;background:#fff;box-shadow:0 0 0 1px var(--bd-hair2);color:var(--bd-ink);display:grid;place-items:center;flex-shrink:0;cursor:pointer;translate:0;transition:translate .5s var(--bd-spring),box-shadow .3s var(--bd-ease)}
.bd-subt{display:flex;flex-direction:column;gap:2px;min-width:0}
.bd-subt h2{margin:0;font-size:17px;font-weight:700;color:var(--bd-ink);letter-spacing:-.015em}
.bd-subt span{font-size:12.5px;color:var(--bd-mut)}
.bd-subb{padding:18px 24px 22px;display:flex;flex-direction:column;gap:14px}
.bd-bue-intro{margin:0;font-size:13.5px;line-height:1.55;color:var(--bd-mut)}
.bd-dates{display:grid;grid-template-columns:1fr;gap:12px}
.bd-dates.two{grid-template-columns:1fr 1fr}
.bd-impact{background:var(--bd-paper);border-radius:16px;padding:14px 16px;box-shadow:0 0 0 1px var(--bd-hair2);font-size:13px;color:var(--bd-mut)}
.bd-imph{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px;font-size:12.5px}
.bd-imph b{font-family:var(--mono);font-weight:500;color:var(--bd-ink);font-size:12px;text-align:right}
.bd-impg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.bd-call{margin-top:10px;padding:11px 13px;border-radius:12px;font-size:12.5px;line-height:1.55}
.bd-call.ok{background:var(--bd-ok-bg);color:var(--bd-ok)}
.bd-call.warn{background:#fcf3e3;color:#6f4710;box-shadow:0 0 0 1px rgba(154,106,28,.22)}
.bd-call.stop{background:#fbeeec;color:#8f2f28;box-shadow:0 0 0 1px rgba(165,69,60,.22)}
.bd-callh{font-weight:600;margin-bottom:4px;display:flex;align-items:center;gap:6px}
.bd-calls{margin:7px 0 5px;padding:8px 10px;border-radius:9px;background:rgba(154,106,28,.08)}
.bd-vids{display:flex;flex-direction:column;gap:10px}
.bd-vids>.bd-sech{margin:6px 0 0}
.bd-vid{background:var(--bd-paper);border-radius:16px;padding:12px 14px;box-shadow:0 0 0 1px var(--bd-hair2)}
.bd-vidh{display:flex;align-items:center;gap:10px}
.bd-vidi{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--bd-neutral-bg);color:var(--bd-neutral);flex-shrink:0}
.bd-vidt{display:flex;flex-direction:column;gap:2px;min-width:0}
.bd-vidt b{font-size:13.5px;font-weight:600;color:var(--bd-ink)}
.bd-vidt span{font-size:12px;color:var(--bd-mut)}
.bd-vidb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.bd-vidn{font-size:12px;color:var(--bd-mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.bd-vidp{margin-top:8px;font-size:12px;color:var(--bd-ok)}
.bd-modal{position:relative;background:var(--bd-paper);border-radius:22px;max-width:640px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 0 0 1px var(--bd-hair),0 30px 80px -30px rgba(70,30,20,.4);font-family:var(--font)}
.bd-modal .bd-ftrow{padding:0;margin-top:4px}
.bd-back:focus-visible,.bd-btn2:focus-visible,.bd-save:focus-visible,.bd-ghost:focus-visible,.bd-segb:focus-visible,.bd-ib:focus-visible,.bd-hname:focus-visible,.bd-vchip:focus-visible{outline:2px solid var(--bd-acc);outline-offset:2px}
@media (hover:hover){
  .bd-btn2:hover{box-shadow:0 0 0 1.5px var(--bd-acc),0 8px 18px -12px rgba(139,26,26,.4)}
  .bd-btn2.danger:hover{box-shadow:0 0 0 1.5px var(--bd-danger)}
  .bd-save:not(:disabled):hover{background:#000}
  .bd-save.acc:not(:disabled):hover{background:var(--bd-acc-d)}
  .bd-ghost:hover{background:rgba(139,26,26,.05);color:var(--bd-ink)}
  .bd-segb:not(.on):hover{color:var(--bd-ink)}
  .bd-hitem:hover{box-shadow:0 0 0 1px rgba(90,58,50,.24),0 14px 28px -20px rgba(70,30,20,.45)}
  .bd-hitem.now:hover{box-shadow:0 0 0 1.5px var(--bd-acc),0 14px 28px -18px rgba(139,26,26,.4)}
  .bd-hname:hover{text-decoration-color:currentColor;color:var(--bd-acc)}
  .bd-vchip:hover{background:var(--bd-acc);color:#fff}
  .bd-ib:hover{background:var(--bd-warm);color:var(--bd-ink)}
  .bd-ib.danger:hover{background:var(--bd-danger-bg);color:var(--bd-danger)}
  .bd-back:hover{translate:-3px 0;box-shadow:0 0 0 1.5px var(--bd-acc)}
}
@media (prefers-reduced-motion:reduce){.bd-btn2,.bd-ib,.bd-back,.bd-save,.bd-segb{transition:none}}
/* [7 Oct 2026] bike drawer flows — Hand over / Assign, Out of service, Maintenance, Add past rider, maintenance list */
.bd-save.ok{background:var(--bd-ok);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 12px 24px -12px rgba(31,107,58,.55)}
.bd-save.danger{background:var(--bd-danger);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 12px 24px -12px rgba(165,69,60,.55)}
.bd-srch{position:relative}
.bd-srch .bd-srch-i{position:absolute;left:15px;top:50%;translate:0 -50%;color:var(--bd-faint);pointer-events:none}
.bd-srch .bd-inp{padding-left:42px;height:50px;border-radius:14px;font-size:14.5px}
.bd-sel-empty{font-size:12.5px;color:var(--bd-mut);padding:0 2px}
.bd-plist{border-radius:16px;background:var(--bd-paper);box-shadow:0 0 0 1px var(--bd-hair2),0 16px 34px -24px rgba(70,30,20,.45);max-height:320px;overflow-y:auto;padding:4px}
.bd-prow{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:8px 10px;border:0;border-radius:12px;background:transparent;text-align:left;cursor:pointer;font-family:var(--font);color:var(--bd-ink);transition:background .2s var(--bd-ease)}
.bd-prtx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.bd-prn{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--bd-ink);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-psel{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 14px;border-radius:16px;background:var(--bd-paper);box-shadow:0 0 0 1.5px rgba(31,107,58,.45),0 10px 24px -18px rgba(31,107,58,.4);animation:bdPick .45s var(--bd-spring)}
@keyframes bdPick{from{scale:.97;opacity:.4}}
.bd-hint{font-size:12px;color:var(--bd-mut);line-height:1.5;margin-top:8px}
textarea.bd-inp{height:auto;min-height:72px;padding:10px 12px;resize:vertical;line-height:1.5}
.bd-panel{position:relative;background:var(--bd-paper);display:flex;flex-direction:column;font-family:var(--font);color:var(--bd-ink);overflow:hidden}
.bd-panel.side{width:432px;max-width:94vw;height:100%;box-shadow:-18px 0 60px -20px rgba(70,30,20,.35);animation:bdPanel .38s var(--bd-ease)}
.bd-panel.center{max-width:560px;width:100%;max-height:92vh;border-radius:22px;box-shadow:0 0 0 1px var(--bd-hair),0 30px 80px -30px rgba(70,30,20,.4)}
@keyframes bdPanel{from{translate:28px 0;opacity:0}}
.bd-panel .bd-pbody{flex:1;overflow-y:auto}
.bd-panel>.bd-ftrow{border-top:1px solid var(--bd-hair);padding:12px 18px}
.bd-mlist{border-radius:14px;background:var(--bd-paper);box-shadow:0 0 0 1px var(--bd-hair2)}
.bd-mrow{padding:10px 14px}
.bd-mrow+.bd-mrow{border-top:1px solid var(--bd-hair)}
.bd-mtop{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;color:var(--bd-mut)}
.bd-mtop .m{font-family:var(--mono)}.bd-mtop .arr{color:var(--bd-faint)}
.bd-mr{font-size:12.5px;color:var(--bd-ink);margin-top:3px}
.bd-prow:focus-visible,.bd-psel .bd-btn2:focus-visible{outline:2px solid var(--bd-acc);outline-offset:2px}
@media (hover:hover){
  .bd-prow:hover{background:var(--bd-warm)}
  .bd-save.ok:not(:disabled):hover{background:#18572f}
  .bd-save.danger:not(:disabled):hover{background:#8f3a32}
}
@media (prefers-reduced-motion:reduce){.bd-psel,.bd-panel.side{animation:none}}
/* [7 Oct 2026] rider photos in the drawer avatars; initials sit underneath as the fallback */
.bd-av,.bd-hav{position:relative;overflow:hidden}
.bd-av img,.bd-hav img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;background:#e9eaee}
.bd-av:has(img){box-shadow:0 0 0 2px #fff,0 0 0 3.5px rgba(139,26,26,.55),0 8px 16px -8px rgba(139,26,26,.5)}
.bd-hitem.now .bd-hav:has(img){box-shadow:0 0 0 2px #fff,0 0 0 3.5px rgba(139,26,26,.5)}


/* ═══ NOTIFICATIONS PAGE [3 Sep 2026] ═══ */
.ntf-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border,#e0e1e5);margin:0 0 18px}
.ntf-tab{background:none;border:none;padding:9px 14px;font:inherit;font-size:13px;font-weight:600;color:var(--t2,#8a827a);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.ntf-tab.active{color:#8B1A1A;border-bottom-color:#8B1A1A}
.ntf-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:16px;align-items:start}
@media(max-width:900px){.ntf-grid{grid-template-columns:1fr}}
.ntf-card{background:var(--card,#fff);border:1px solid var(--border,#e0e1e5);border-radius:12px;padding:16px 18px}
.ntf-card-hd{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8B1A1A;margin-bottom:12px}
.ntf-lbl{display:block;font-size:11.5px;font-weight:600;color:var(--t2,#8a827a);margin:10px 0 5px}
.ntf-in{width:100%;box-sizing:border-box;font:inherit;font-size:13.5px;padding:9px 11px;border:1px solid var(--border,#e0e1e5);border-radius:9px;background:var(--bg,#f7f8fc);color:var(--t1,#1f1a1a)}
.ntf-in:focus{outline:none;border-color:#8B1A1A;box-shadow:0 0 0 3px rgba(139,26,26,.10)}
textarea.ntf-in{resize:vertical;min-height:84px;line-height:1.45}
.ntf-hint{font-size:11.5px;color:var(--t2,#8a827a);margin-top:8px;line-height:1.5}
.ntf-hint code{font-family:ui-monospace,Menlo,monospace;font-size:11px;background:rgba(139,26,26,.08);color:#8B1A1A;padding:1px 5px;border-radius:5px}
.ntf-vars{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.ntf-var{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--t2,#8a827a)}
.ntf-var .ntf-in{padding:6px 9px;font-size:13px}
.ntf-var-k{max-width:130px}.ntf-var-v{flex:1}
.ntf-var-x{background:none;border:none;font-size:18px;line-height:1;color:var(--t2,#8a827a);cursor:pointer;padding:2px 6px;border-radius:6px}
.ntf-var-x:hover{background:rgba(139,26,26,.08);color:#8B1A1A}
.ntf-addvar{margin-top:8px;font-size:12px}
.ntf-seg{display:flex;background:var(--bg,#edeef2);border-radius:10px;padding:3px;gap:2px;margin-bottom:10px}
.ntf-seg-b{flex:1;background:none;border:none;font:inherit;font-size:13px;font-weight:600;padding:8px;border-radius:8px;color:var(--t2,#8a827a);cursor:pointer}
.ntf-seg-b.active{background:#fff;color:#8B1A1A;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.ntf-tgtbox{margin-bottom:8px}
.ntf-row2{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
.ntf-rlist{margin-top:6px;border:1px solid var(--border,#e0e1e5);border-radius:9px;max-height:210px;overflow:auto;background:#fff}
.ntf-rlist:empty{display:none}
.ntf-r{padding:8px 11px;font-size:13px;cursor:pointer;border-bottom:1px solid var(--border,#e9eaee)}
.ntf-r:last-child{border-bottom:none}.ntf-r:hover{background:rgba(139,26,26,.05)}
.ntf-chosen{margin-top:8px;padding:9px 11px;border:1px solid rgba(139,26,26,.25);background:rgba(139,26,26,.05);border-radius:9px;font-size:13px;display:flex;align-items:center;gap:8px}
.ntf-nopush{font-size:10.5px;font-weight:600;color:#9a6a12;background:#faf3e6;padding:2px 7px;border-radius:999px}
.ntf-dim{color:var(--t2,#8a827a)}.ntf-err{color:#b3261e}
.ntf-reach{margin:12px 0 4px;font-size:13.5px;padding:10px 12px;background:rgba(139,26,26,.05);border-radius:9px}
.ntf-preview-hd{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t2,#8a827a);margin:14px 0 8px}
.ntf-phone{background:#1c1c1e;color:#fff;border-radius:14px;padding:12px 14px;max-width:340px;box-shadow:0 6px 20px rgba(0,0,0,.18)}
.ntf-phone-app{font-size:11px;color:rgba(255,255,255,.6);display:flex;align-items:center;gap:6px;margin-bottom:5px}
.ntf-phone-dot{width:14px;height:14px;border-radius:4px;background:#8B1A1A;display:inline-block}
.ntf-phone-t{font-size:14px;font-weight:600;margin-bottom:2px}
.ntf-phone-b{font-size:13px;color:rgba(255,255,255,.85);line-height:1.4;white-space:pre-wrap}
.ntf-send{margin-top:14px;width:100%;background:#8B1A1A;color:#fff;border:none;border-radius:10px;padding:12px;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.ntf-send:hover{background:#7a1414}.ntf-send:disabled{opacity:.6;cursor:default}
.ntf-send-sm{width:auto;padding:8px 16px;font-size:13px;margin-top:0}
.ntf-note{font-size:11.5px;color:var(--t2,#8a827a);margin-top:8px;text-align:center}
.ntf-tpl-list{display:flex;flex-direction:column;gap:10px}
.ntf-tpl{border:1px solid var(--border,#e0e1e5);border-radius:10px;padding:12px 14px}
.ntf-tpl-n{font-size:14px;font-weight:700;color:#8B1A1A}
.ntf-tpl-t{font-size:13px;font-weight:600;margin-top:4px}
.ntf-tpl-b{font-size:13px;color:var(--t2,#8a827a);margin-top:3px;line-height:1.45}
.ntf-tpl-a{display:flex;gap:6px;margin-top:10px;align-items:center}
.ntf-tpl-e{border:1px solid rgba(139,26,26,.3);border-radius:10px;padding:12px 14px;background:rgba(139,26,26,.03)}
.ntf-danger{color:#b3261e}
.ntf-table{width:100%;border-collapse:collapse;font-size:13px}
.ntf-table th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--t2,#8a827a);padding:8px 10px;border-bottom:1px solid var(--border,#e0e1e5)}
.ntf-table td{padding:10px;border-bottom:1px solid var(--border,#e9eaee);vertical-align:top}
.ntf-clip{max-width:380px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}
.ntf-hd{background:rgba(139,26,26,.03)}
.ntf-hd-grid{display:flex;flex-wrap:wrap;gap:6px}
.ntf-hd-i{font-size:12px;padding:4px 9px;border-radius:999px;background:#edeef2}
.ntf-hd-i em{font-style:normal;opacity:.7}
.ntf-hd-i.ntf-ok{background:#eaf5ee;color:#2f7d4f}.ntf-hd-i.ntf-err{background:#fbeaea;color:#b3261e}

/* ═══ [5 Sep 2026, ID audit — UI refresh] Keeta ID attention panel + modal ═══ */
.kiw-summary{display:flex;background:var(--card,#fff);border:1px solid var(--line,#e7e8ec);border-radius:13px;overflow:hidden;margin:2px 0 16px;box-shadow:0 1px 2px rgba(50,35,25,.03),0 3px 14px rgba(50,35,25,.04)}
.kiw-stat{flex:1;padding:13px 18px;border-right:1px solid var(--line,#e7e8ec);display:flex;align-items:center;justify-content:center;gap:9px;transition:background .2s}
.kiw-stat:last-child{border-right:none}.kiw-stat:hover{background:#eef1f4}
.kiw-stat .kd{width:8px;height:8px;border-radius:50%;flex:none}
.kiw-stat .kv{font-size:18px;font-weight:700;letter-spacing:-.02em}
.kiw-stat .kk{font-size:12px;color:var(--t2,#6b625b);font-weight:450}
@keyframes kiwpulse{0%,100%{box-shadow:0 0 0 0 var(--kc)}50%{box-shadow:0 0 0 5px transparent}}
.kiw-stat .kd.on{animation:kiwpulse 2.6s cubic-bezier(.4,0,.2,1) infinite}
.kiw-att{display:grid;grid-template-columns:repeat(2,1fr);gap:13px;margin-bottom:16px}
@media(max-width:760px){.kiw-att{grid-template-columns:1fr}.kiw-summary{flex-wrap:wrap}.kiw-stat{flex:1 0 40%}}
.kiw-card{background:var(--card,#fff);border:1px solid var(--line,#e7e8ec);border-radius:15px;overflow:hidden;box-shadow:0 1px 2px rgba(50,35,25,.03),0 3px 14px rgba(50,35,25,.04);transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s;opacity:0;animation:kiwrise .5s cubic-bezier(.4,0,.2,1) forwards}
.kiw-card:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(50,35,25,.04),0 12px 28px rgba(50,35,25,.08)}
@keyframes kiwrise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.kiw-ah{display:flex;align-items:center;gap:11px;padding:14px 16px 12px}
.kiw-ic{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex:none;background:color-mix(in srgb,var(--kc) 11%,transparent);color:var(--kc);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.kiw-card:hover .kiw-ic{transform:scale(1.1) rotate(-4deg)}
.kiw-ic svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.kiw-an{font-size:13.5px;font-weight:600;color:var(--t1,#211b17)}
.kiw-as{font-size:11px;color:var(--t3,#a89e94);margin-top:1px;font-weight:400}
.kiw-cnt{margin-left:auto;font-size:16px;font-weight:700;color:var(--kc)}
.kiw-row{display:flex;align-items:center;gap:11px;padding:9px 16px;border-top:1px solid var(--line,#e7e8ec);transition:background .15s,box-shadow .15s;opacity:0;animation:kiwslide .4s cubic-bezier(.4,0,.2,1) forwards}
.kiw-row:hover{background:rgba(95,100,120,.03);box-shadow:0 1px 4px rgba(0,0,0,.04),inset 0 0 0 1px rgba(95,100,120,.12);border-radius:8px}
@keyframes kiwslide{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.kiw-row .krn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:500;color:var(--t1,#211b17)}
.kiw-row .krm{color:var(--t3,#a89e94);font-size:11.5px;font-weight:400}
.kiw-mono{font-family:ui-monospace,SFMono-Regular,monospace;font-size:11px;color:var(--t2,#6b625b);background:#eeeff3;padding:2px 7px;border-radius:6px;letter-spacing:-.03em}
.kiw-av{border-radius:9px;display:flex;align-items:center;justify-content:center;font-weight:600;color:#fff;flex:none;font-size:11px}
.kiw-empty{padding:20px 16px;text-align:center;color:var(--t3,#a89e94);font-size:12px;display:flex;align-items:center;justify-content:center;gap:6px}
.kiw-empty svg{width:14px;height:14px;color:var(--green,#2f7d44);stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.kiw-b{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line2,#e5ddd3);background:var(--card,#fff);color:var(--t1,#211b17);font:inherit;font-size:12px;font-weight:600;padding:5px 11px;border-radius:9px;cursor:pointer;white-space:nowrap;transition:transform .18s cubic-bezier(.34,1.56,.64,1),background .14s,border-color .14s}
.kiw-b:hover{border-color:#d5cabd;background:#f5f6fa;transform:translateY(-1px)}.kiw-b:active{transform:scale(.95)}
.kiw-b svg{width:13px;height:13px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
.kiw-b.pri{background:var(--maroon,#8B1A1A);color:#fff;border-color:var(--maroon,#8B1A1A)}.kiw-b.pri:hover{background:#761414}.kiw-b.pri:hover svg{transform:rotate(90deg)}
.kiw-b.dng{color:var(--red,#b3261e)}.kiw-b.dng:hover{border-color:color-mix(in srgb,var(--red,#b3261e) 40%,var(--line2,#e5ddd3));background:#fdf3f3}
.kiw-tun{--kc:var(--maroon,#8B1A1A)}.kiw-tst{--kc:var(--amber,#b0770e)}.kiw-tgh{--kc:var(--red,#b3261e)}.kiw-tcf{--kc:var(--purple,#7c4daa)}
@keyframes kiwpop{0%{opacity:0;transform:scale(.9)}100%{opacity:1;transform:scale(1)}}
.ki-sel{animation:kiwpop .45s cubic-bezier(.34,1.56,.64,1)}
.ki-mb>*{opacity:0;animation:kiwrise .5s cubic-bezier(.4,0,.2,1) forwards}
.ki-mb>*:nth-child(1){animation-delay:.04s}.ki-mb>*:nth-child(2){animation-delay:.09s}.ki-mb>*:nth-child(3){animation-delay:.14s}.ki-mb>*:nth-child(4){animation-delay:.19s}.ki-mb>*:nth-child(5){animation-delay:.24s}.ki-mb>*:nth-child(6){animation-delay:.29s}.ki-mb>*:nth-child(7){animation-delay:.34s}.ki-mb>*:nth-child(8){animation-delay:.39s}
@media (prefers-reduced-motion: reduce){.kiw-card,.kiw-row,.ki-sel,.ki-mb>*{animation:none!important;opacity:1!important;transform:none!important}.kiw-stat .kd.on{animation:none!important}.kiw-card:hover,.kiw-b:hover,.kiw-card:hover .kiw-ic{transform:none!important}}

/* ═══ [5 Sep 2026] Keeta IDs main table — same polish as the attention panel ═══ */
.ki-tr{cursor:pointer;transition:background .14s,box-shadow .14s}
.ki-tr td{padding:8px 14px;vertical-align:middle}
.ki-rav{width:28px;height:28px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:600;color:#fff;background:#b3a597}
.ki-tr .ki-num{text-align:center;color:var(--t3,#a89e94);font-size:11px;font-family:ui-monospace,monospace}
.ki-idcell{display:flex;align-items:center;gap:8px}
.ki-idcell .kid{font-family:ui-monospace,SFMono-Regular,monospace;font-size:11.5px;font-weight:600;letter-spacing:-.02em;color:var(--t1,#211b17)}
.ki-copy{cursor:pointer;font-size:12px;color:var(--t3,#a89e94);opacity:0;transition:opacity .15s}
.ki-tr:hover .ki-copy{opacity:.5}
.ki-copy:hover{opacity:1 !important;color:var(--maroon,#8B1A1A)}
.ki-rider{display:flex;align-items:center;gap:10px}
.ki-rname{font-size:13.5px;font-weight:600;color:var(--t1,#211b17)}
.ki-rearlier{font-size:10.5px;color:var(--t3,#a89e94);font-weight:400;margin-left:6px}
.ki-pill{display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;padding:3px 10px;border-radius:999px;letter-spacing:.01em}
.ki-pill.on{color:#2f7d44;background:rgba(47,125,68,.11)}
.ki-pill.off{color:#b0770e;background:rgba(176,119,14,.13)}
.ki-pill.own{color:#2f7d44;background:rgba(47,125,68,.11)}
.ki-pill.brw{color:#7c4daa;background:rgba(124,77,170,.12)}
.ki-pill.dash{color:var(--t3,#a89e94);background:transparent;padding-left:0}
.ki-tag-res{font-size:9px;font-weight:700;color:#991B1B;background:rgba(179,38,30,.1);padding:1px 7px;border-radius:999px;margin-left:6px;vertical-align:middle}
.ki-mng{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line2,#e5ddd3);background:var(--card,#fff);color:var(--t1,#211b17);font:inherit;font-size:12px;font-weight:600;padding:6px 14px;border-radius:9px;cursor:pointer;transition:transform .16s cubic-bezier(.34,1.56,.64,1),background .14s,border-color .14s}
.ki-mng:hover{border-color:#d5cabd;background:#f5f6fa;transform:translateY(-1px)}
.ki-mng.map{background:var(--maroon,#8B1A1A);color:#fff;border-color:var(--maroon,#8B1A1A)}
.ki-mng.map:hover{background:#761414}
.ki-mng.map svg{width:13px;height:13px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}

/* [5 Sep 2026] Keeta row "open" affordance — a chevron that slides in + colours on row hover,
   telling you the row is clickable (opens the manage modal). Hidden until hover so it's clean. */
.ki-chev{display:inline-flex;align-items:center;justify-content:center;width:16px;color:var(--t3,#a89e94);opacity:0;transform:translateX(-4px);transition:opacity .16s ease,transform .2s cubic-bezier(.34,1.56,.64,1),color .16s}
.ki-chev svg{width:15px;height:15px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ki-tr:hover .ki-chev{opacity:1;transform:translateX(0);color:var(--maroon,#8B1A1A)}

/* ═══ [5 Sep 2026] Keeta modal buttons — clean, solid, consistent (replaces the muddy glass set here) ═══ */
.kib{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-size:13px;font-weight:600;padding:11px 18px;border-radius:11px;cursor:pointer;border:1px solid transparent;transition:transform .16s cubic-bezier(.34,1.56,.64,1),background .15s,border-color .15s,box-shadow .15s,opacity .15s;white-space:nowrap;letter-spacing:-.01em}
.kib:active{transform:scale(.97)}
.kib svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* primary — solid maroon */
.kib-primary{background:var(--maroon,#8B1A1A);color:#fff;box-shadow:0 2px 8px rgba(139,26,26,.26)}
.kib-primary:hover{background:#791414;transform:translateY(-1px);box-shadow:0 4px 14px rgba(139,26,26,.32)}
.kib-primary:disabled,.kib-primary.is-disabled{background:#e7e8ec;color:#b8afa6;box-shadow:none;cursor:not-allowed;transform:none;pointer-events:none}
/* primary green — reactivate/confirm positive */
.kib-green{background:#2f7d44;color:#fff;box-shadow:0 2px 8px rgba(47,125,68,.26)}
.kib-green:hover{background:#286c3a;transform:translateY(-1px);box-shadow:0 4px 14px rgba(47,125,68,.32)}
.kib-green:disabled,.kib-green.is-disabled{background:#e7e8ec;color:#b8afa6;box-shadow:none;cursor:not-allowed;transform:none;pointer-events:none}
/* secondary — clean white outline */
.kib-ghost{background:#fff;color:var(--t1,#211b17);border-color:#e5ddd3;box-shadow:0 1px 2px rgba(60,40,30,.04)}
.kib-ghost:hover{background:#f5f6fa;border-color:#d5cabd;transform:translateY(-1px)}
/* danger — red text ghost */
.kib-danger{background:#fff;color:var(--red,#b3261e);border-color:#eaddda;box-shadow:0 1px 2px rgba(60,40,30,.04)}
.kib-danger:hover{background:#fdf3f3;border-color:color-mix(in srgb,var(--red,#b3261e) 35%,#eaddda);transform:translateY(-1px)}
/* [5 Sep 2026] generic "this row opens something" chevron reveal — reuse on any clickable table row */
.row-open .ki-chev{opacity:0;transform:translateX(-4px)}
.row-open:hover .ki-chev{opacity:1;transform:translateX(0);color:var(--maroon,#8B1A1A)}

/* ═══ [5 Sep 2026] SALIK page redesign — clean professional command bar + folded tools + search-on-table ═══ */
/* KPI card → flat professional (overrides the JS-injected .slc-* glass styles) */
#page-salik .slc-card{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;border:1px solid #dcdde1;border-radius:14px;box-shadow:0 1px 2px rgba(40,30,20,.04),0 1px 3px rgba(40,30,20,.03);padding:0;overflow:hidden}
#page-salik .slc-top{padding:15px 20px 14px;margin-bottom:0;align-items:flex-start}
#page-salik .slc-ll{font-size:11px;font-weight:500;color:#9c948b;text-transform:none;letter-spacing:.01em}
#page-salik .slc-tot{font-size:25px;font-weight:600;letter-spacing:-.025em;color:#232019;margin-top:8px;font-family:inherit}
#page-salik .slc-sub{font-size:11px;color:#9c948b;margin-top:7px}
#page-salik .slc-stats{gap:0;border:1px solid #e8e9ed;border-radius:10px;overflow:hidden}
#page-salik .slc-st{text-align:left;padding:11px 18px;border-right:1px solid #e8e9ed;min-width:150px}
#page-salik .slc-st:last-child{border-right:none}
#page-salik .slc-sl{font-size:11px;font-weight:500;text-transform:none;letter-spacing:.01em;color:#9c948b!important}
#page-salik .slc-sv{font-size:21px;font-weight:600;letter-spacing:-.02em;margin-top:5px;font-family:inherit}
#page-salik .slc-ss{font-size:11px;color:#9c948b;margin-top:4px}
#page-salik .slc-bar{height:8px;border-radius:5px;border:none;gap:2px;margin:0 20px 10px}
#page-salik .slc-seg{border-radius:3px;font-size:0}
#page-salik .slc-seg.slc-on{box-shadow:0 0 0 2px #fff,0 0 0 3px currentColor}
#page-salik .slc-leg{padding:0 20px 14px;gap:18px}
#page-salik .slc-lg{font-size:12px}
#page-salik .slc-brk{display:none}

/* header: page-title smaller, tighter */
#page-salik .page-header{margin-bottom:12px}
#page-salik .page-title{font-size:20px}
#page-salik .page-sub{display:none}
#page-salik #salik-period-nav{margin:0 0 12px}

/* integrity banner → quieter, since the KPI carries the money */
#page-salik #salik-integrity-banner{margin-bottom:10px}

/* controls row (view/sort/filters, no search) */
#page-salik #salik-controls.toolbar{margin-bottom:10px}

/* folded tool rows (EasyLease pack, import history) */
.slk-fold{border:1px solid #dcdde1!important;border-radius:12px!important;background:#fff!important}
.slk-foldhd{display:flex;align-items:center;gap:10px;padding:11px 16px;cursor:pointer;font-size:13px;color:#65605a;user-select:none;transition:background .12s}
.slk-foldhd:hover{background:#f6f7fb}
.slk-foldhd b{color:#232019;font-weight:600}
.slk-foldsub{font-size:12px;color:#9c948b}
.slk-foldic{width:28px;height:28px;border-radius:8px;background:#eeeff3;color:#65605a;display:flex;align-items:center;justify-content:center;flex:none}
.slk-foldchev{margin-left:auto;color:#9c948b;display:flex;transition:transform .18s}
.slk-foldhd.open .slk-foldchev{transform:rotate(90deg)}

/* table block with the search strip bolted on */
.slk-tblwrap{background:#fff;border:1px solid #dcdde1;border-radius:14px;overflow:hidden;box-shadow:0 1px 2px rgba(40,30,20,.04),0 1px 3px rgba(40,30,20,.03)}
.slk-tblwrap #salik-table-wrap.tbl{border:none;border-radius:0;box-shadow:none;margin:0;background:transparent}
.slk-searchrow{display:flex;align-items:center;gap:9px;padding:10px 16px;border-bottom:1px solid #e8e9ed;color:#9c948b}
.slk-searchrow input{flex:1;border:none;outline:none;background:transparent;font:inherit;font-size:13px;color:#232019;padding:2px 0}
.slk-searchrow input::placeholder{color:#a49b92}
.slk-searchrow:focus-within{background:#f9fafe}
/* import history card → same fold styling as EasyLease */
#page-salik #salik-invoice-history > div{border:1px solid #dcdde1!important;border-radius:12px!important;padding:11px 16px!important}
/* [5 Sep 2026] SALIK motion — staggered entrance + spring hovers (opt-out via prefers-reduced-motion) */
@keyframes slkrise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
#page-salik.slk-anim .page-header{opacity:0;animation:slkrise .5s cubic-bezier(.4,0,.2,1) .02s forwards}
#page-salik.slk-anim #salik-period-nav{opacity:0;animation:slkrise .5s cubic-bezier(.4,0,.2,1) .06s forwards}
#page-salik.slk-anim #salik-integrity-banner{opacity:0;animation:slkrise .5s cubic-bezier(.4,0,.2,1) .10s forwards}
#page-salik.slk-anim #salik-kpi-row{opacity:0;animation:slkrise .5s cubic-bezier(.4,0,.2,1) .14s forwards}
#page-salik.slk-anim #salik-controls{opacity:0;animation:slkrise .5s cubic-bezier(.4,0,.2,1) .20s forwards}
#page-salik.slk-anim #el-pack-row{opacity:0;animation:slkrise .5s cubic-bezier(.4,0,.2,1) .24s forwards}
#page-salik.slk-anim #salik-invoice-history{opacity:0;animation:slkrise .5s cubic-bezier(.4,0,.2,1) .27s forwards}
#page-salik.slk-anim .slk-tblwrap{opacity:0;animation:slkrise .5s cubic-bezier(.4,0,.2,1) .31s forwards}
#page-salik .slc-st{transition:background .16s}
#page-salik .slc-st:hover{background:#f7f8fc}
#page-salik .slc-lg{transition:background .14s;padding:2px 5px;border-radius:6px}
#page-salik .slc-lg:hover{background:#eff0f4}
#page-salik .slk-foldhd{transition:background .14s,transform .16s cubic-bezier(.34,1.4,.5,1)}
#page-salik .slk-fold:hover{box-shadow:0 2px 8px rgba(40,30,20,.06)}
#page-salik .slk-foldhd:hover .slk-foldchev{transform:translateX(3px);color:#8B1A1A}
#page-salik .slk-foldhd.open:hover .slk-foldchev{transform:rotate(90deg) translateY(-3px)}
@media (prefers-reduced-motion: reduce){#page-salik.slk-anim *{animation:none!important;opacity:1!important;transform:none!important}}

/* ═══ [5 Sep 2026 v2] SALIK KPI bar — the ACTUAL 4-tile mockup (replaces the old glass .slc-card) ═══ */
.slk-kpibar{display:flex;background:#fff;border:1px solid #dcdde1;border-radius:14px;box-shadow:0 1px 2px rgba(40,30,20,.04),0 1px 3px rgba(40,30,20,.03);overflow:hidden}
.slk-kpi{flex:1;padding:17px 20px 17px;border-right:1px solid #e8e9ed;position:relative;transition:background .18s,box-shadow .18s;overflow:hidden}
.slk-kpi::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:transparent;transition:background .18s}
.slk-kpi:last-child{border-right:none}
.slk-kpi:hover{background:#f7f8fc}
.slk-kpi.warn:hover{background:#fdf6f4}
.slk-kpi.amber:hover{background:#f7f8fc}
.slk-kpi.green:hover{background:#f4faf5}
.slk-kpi.warn::before{background:#d8543f}
.slk-kpi.amber::before{background:#e0a53a}
.slk-kpi.green::before{background:#4e9e63}
.slk-kpi-r1{display:flex;align-items:center;gap:8px;min-height:26px}
.slk-kpi-ic{width:26px;height:26px;flex:0 0 auto;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;background:#ecedf1;color:#a49a8f}
.slk-kpi-ic svg{width:15px;height:15px}
.slk-kpi.warn .slk-kpi-ic{background:rgba(216,84,63,.11);color:#c14a37}
.slk-kpi.amber .slk-kpi-ic{background:rgba(224,165,58,.13);color:#b07d1e}
.slk-kpi.green .slk-kpi-ic{background:rgba(78,158,99,.13);color:#3f8552}
.slk-kpi-k{font-size:11.5px;font-weight:500;color:#8b847b;letter-spacing:.005em}
.slk-kpi.warn .slk-kpi-k{color:#c14a37;font-weight:600}
.slk-kpi-flag{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;color:#c14a37;margin-left:auto;padding:3px 8px;border-radius:6px;background:rgba(216,84,63,.09)}
.slk-kpi-flag svg{width:11px;height:11px;stroke:currentColor;fill:none}
.slk-kpi-v{display:flex;align-items:baseline;gap:5px;margin-top:12px}
.slk-kpi-cur{font-size:11px;font-weight:600;color:#a49a8f;letter-spacing:.03em}
.slk-kpi-n{font-size:28px;font-weight:650;letter-spacing:-.03em;line-height:1;color:#211e1a;font-variant-numeric:tabular-nums}
.slk-kpi-s{font-size:11px;color:#a49a8f;margin-top:9px;letter-spacing:.005em}
.slk-kpi.warn .slk-kpi-n{color:#c14a37}.slk-kpi.warn .slk-kpi-cur{color:rgba(193,74,55,.5)}
.slk-kpi.amber .slk-kpi-n{color:#b07d1e}.slk-kpi.amber .slk-kpi-cur{color:rgba(176,125,30,.5)}
.slk-kpi.green .slk-kpi-n{color:#3f8552}.slk-kpi.green .slk-kpi-cur{color:rgba(63,133,82,.5)}
.slk-kpi.mute .slk-kpi-n,.slk-kpi.mute .slk-kpi-cur{color:#c3bcb2}
.slk-kpi-act{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:#c14a37;margin-top:12px;cursor:pointer;text-decoration:none}
.slk-kpi-act:hover{gap:8px}.slk-kpi-act svg{width:12px;height:12px;stroke:currentColor;fill:none;transition:.16s cubic-bezier(.34,1.4,.5,1)}
/* salik table lifecycle pill (mockup) */
.slk-lcpill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:6px}
.slk-lcpill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.slk-lcpill.p-q{color:#a8710d;background:rgba(168,113,13,.09)}
.slk-lcpill.p-c{color:#2f7d44;background:rgba(47,125,68,.09)}
.slk-lcpill.p-u{color:#b3261e;background:rgba(179,38,30,.08)}
/* [6 Sep 2026, salik-audit p1] search in the control bar · lifecycle split bar + label · sortable headers */
.slk-tbsearch{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 10px;min-width:240px;background:#fff;border:1px solid rgba(95,100,120,.18);border-radius:10px;color:#9c948b;transition:border-color .15s,box-shadow .15s}
.slk-tbsearch input{flex:1;border:none;outline:none;background:transparent;font:inherit;font-size:12.5px;color:#232019;min-width:0}
.slk-tbsearch input::placeholder{color:#a49b92}
.slk-tbsearch:focus-within{border-color:rgba(139,26,26,.45);box-shadow:0 0 0 3px rgba(139,26,26,.08)}
.slk-lcbar{display:inline-flex;width:44px;height:5px;border-radius:3px;overflow:hidden;background:#ecedf1;vertical-align:middle;margin-right:8px;flex:none}
.slk-lcbar i{display:block;height:100%}
.slk-lclbl{font-size:11px;font-weight:500;color:#58413f}
#salik-table-wrap th.slk-th-sort{cursor:pointer;user-select:none;white-space:nowrap;transition:color .12s}
#salik-table-wrap th.slk-th-sort:hover{color:#1a1c19}
#salik-table-wrap th.slk-th-sort .slk-th-arr{display:inline-block;width:0;height:0;margin-left:5px;vertical-align:middle;border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-top:5px solid currentColor;opacity:0;transition:opacity .12s}
#salik-table-wrap th.slk-th-sort:hover .slk-th-arr{opacity:.35}
#salik-table-wrap th.slk-th-sort.on{color:#8B1A1A}
#salik-table-wrap th.slk-th-sort.on .slk-th-arr{opacity:1}
#salik-table-wrap th.slk-th-sort.on.asc .slk-th-arr{border-top:none;border-bottom:5px solid currentColor}
/* [6 Sep 2026, salik-audit p2] Salik view switch = the Performance page switch, same thumb, same pills */
/* [19 Sep 2026] same quiet Seg-pill look as the Performance switcher (was maroon gradient + glow) */
#salik-view-switch{position:relative;display:inline-flex;align-items:center;gap:0;background:#ecedf1;backdrop-filter:none;-webkit-backdrop-filter:none;border:0;border-radius:9px;padding:2px;box-shadow:none;isolation:isolate}
#salik-view-switch .pv-thumb{position:absolute;top:2px;left:4px;width:0;height:calc(100% - 4px);border-radius:7px;background:#fff;box-shadow:0 1px 2px rgba(34,31,28,.12);transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1);z-index:0;pointer-events:none}
#salik-view-switch .abf-pill{position:relative;z-index:1;border:0;background:transparent;box-shadow:none;color:#8a827a;font-size:12px;font-weight:600;padding:6px 13px;border-radius:7px;transition:color .22s cubic-bezier(.4,0,.2,1)}
#salik-view-switch .abf-pill:hover{background:transparent;border-color:transparent;box-shadow:none;color:#58413f;font-weight:600}
#salik-view-switch .abf-pill.on{background:transparent;border-color:transparent;box-shadow:none;color:#1a1c19;font-weight:600}
#salik-view-switch .abf-pill svg{opacity:.7;transition:opacity .3s}
#salik-view-switch .abf-pill.on svg{opacity:1}
#salik-view-switch .abf-pill .abf-n{margin-left:6px}
#salik-view-switch .abf-pill.on .abf-n{background:rgba(139,26,26,.10);color:#8B1A1A}
/* section headers inside the Easy Lease / Invoices views are titles, not fold toggles */
.slk-foldhd.static,.slk-ih-hd.static{cursor:default}
.slk-foldhd.static:hover,.slk-ih-hd.static:hover{background:transparent}
.slk-fold:has(.slk-foldhd.static):hover{box-shadow:none}
@media (prefers-reduced-motion:reduce){#salik-view-switch .pv-thumb{transition:none}}
/* [6 Sep 2026, couriers-audit] compact status tiles · sortable headers · attention flags · count footer */
.cs-strip{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.cs-tile{display:inline-flex;align-items:baseline;gap:6px;background:#fff;border:1px solid rgba(95,100,120,.14);border-radius:10px;padding:8px 12px;cursor:pointer;font-family:var(--font);color:var(--t2);font-size:12px;line-height:1;transition:border-color .15s,box-shadow .15s,transform .15s}
.cs-tile b{font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--text)}
.cs-tile small{font-size:10.5px;color:var(--t3)}
.cs-tile:hover{transform:translateY(-1px)}
.cs-tile.cs-mute{opacity:.55}
.cs-tile.cs-mute b{color:var(--t3)!important}
#page-couriers th.th-sort{cursor:pointer;user-select:none;white-space:nowrap;transition:color .12s}
#page-couriers th.th-sort:hover{color:#1a1c19}
#page-couriers th.th-sort .th-arr{display:inline-block;width:0;height:0;margin-left:5px;vertical-align:middle;border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-top:5px solid currentColor;opacity:0;transition:opacity .12s}
#page-couriers th.th-sort:hover .th-arr{opacity:.35}
#page-couriers th.th-sort.on{color:#8B1A1A}
#page-couriers th.th-sort.on .th-arr{opacity:1}
#page-couriers th.th-sort.on.asc .th-arr{border-top:none;border-bottom:5px solid currentColor}
.cs-att{display:inline-flex;gap:4px;flex-wrap:wrap}
.cs-att span{font-size:10px;font-weight:600;border-radius:5px;padding:2px 7px;white-space:nowrap}
.cs-att .f{color:#991b1b;background:rgba(153,27,27,.10)}
.cs-att .a{color:#185FA5;background:rgba(24,95,165,.10)}
.cs-att .id{color:#854F0B;background:rgba(184,115,51,.12)}
.cs-att .v{color:#854F0B;background:rgba(184,115,51,.12)}
.cs-att .v.hot{color:#991b1b;background:rgba(153,27,27,.10)}
.cs-count{font-size:11px;color:var(--t3);padding:10px 4px 0;text-align:right}
/* [5 Sep 2026] SALIK clean top buttons (replace the glass/blur look) */
.slk-topbtn{display:inline-flex;align-items:center;gap:6px;font-family:var(--font);font-size:12.5px;font-weight:600;padding:8px 14px;border-radius:10px;cursor:pointer;border:1px solid #dcdde1;background:#fff;color:#65605a;transition:border-color .14s,background .14s,color .14s,transform .16s cubic-bezier(.34,1.4,.5,1);margin:0}
.slk-topbtn:hover{border-color:#d6cec4;background:#f5f6fa;color:#232019;transform:translateY(-1px)}
.slk-topbtn:active{transform:translateY(0)}
.slk-topbtn svg{width:14px;height:14px;color:#9c948b}
/* Salik pill controls (By Bike / sorts) — flatten, no blur */
#page-salik .toolbar .pill-slider-wrap,#page-salik .toolbar .pill-btn{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
#page-salik .toolbar .pill-btn{transition:background .14s,color .14s}


/* import-history → same fold treatment as the EasyLease pack */
#page-salik #salik-invoice-history > div{padding:0!important;overflow:hidden}
#page-salik .slk-ih-hd{display:flex;align-items:center;gap:10px;padding:11px 16px;cursor:pointer;font-size:13px;color:#65605a;user-select:none;transition:background .12s}
#page-salik .slk-ih-hd:hover{background:#f6f7fb}
#page-salik .slk-ih-hd b{color:#232019;font-weight:600}
#page-salik .slk-ih-meta{font-size:12px;color:#9c948b;margin-left:auto}
#page-salik .slk-ih-chev{color:#9c948b;display:flex;transition:transform .18s;margin-left:8px}
#page-salik .slk-ih-hd.open .slk-ih-chev{transform:rotate(90deg)}

/* [5 Sep 2026] buttery grid-fold: 0fr→1fr height, GPU-friendly, no layout thrash */
.slk-foldwrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s cubic-bezier(.4,0,.2,1)}
.slk-foldwrap>*{overflow:hidden;min-height:0;opacity:0;transform:translateY(-4px);transition:opacity .22s ease,transform .3s cubic-bezier(.4,0,.2,1)}
.slk-foldwrap.open{grid-template-rows:1fr}
.slk-foldwrap.open>*{opacity:1;transform:none;transition-delay:.06s}
/* import-history body: match the polished main table */
#page-salik #salik-invoice-history table{border-collapse:collapse}
#page-salik #salik-invoice-history thead th{font-size:10px!important;letter-spacing:.06em;color:#9c948b;font-weight:600;padding:10px 12px!important;border-bottom:1px solid #e8e9ed;background:#f6f7fb}
#page-salik #salik-invoice-history tbody td{padding:10px 12px!important;border-top:1px solid #edeef2!important;vertical-align:middle}
#page-salik #salik-invoice-history tbody tr{transition:background .12s}
#page-salik #salik-invoice-history tbody tr:hover td{background:#f7f8fc}
@media (prefers-reduced-motion: reduce){.slk-foldwrap,.slk-foldwrap>*{transition:none!important}#page-salik .pill-slider{transition:none!important}}

/* [5 Sep 2026] Salik period picker: lift its stacking context above the banner/KPI siblings so the
   calendar popup never paints underneath them; and has-data dots (perf-style) if not already styled */
#page-salik #salik-period-nav{position:relative;z-index:120}
#page-salik.slk-anim #salik-period-nav{z-index:120}
/* [5 Sep 2026] Salik empty month — designed state, not a dead end */
.slk-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:38px 20px 34px;gap:6px}
.slk-empty-ic{width:44px;height:44px;border-radius:12px;background:#eeeff3;color:#9c948b;display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.slk-empty-t{font-size:14px;font-weight:600;color:#232019;letter-spacing:-.01em}
.slk-empty-s{font-size:12.5px;color:#7a746c;max-width:440px;line-height:1.5}
.slk-empty-s b{color:#232019;font-weight:600}
.slk-empty-btn{margin-top:12px;display:inline-flex;align-items:center;gap:7px;font-family:var(--font);font-size:12.5px;font-weight:600;padding:8px 15px;border-radius:10px;border:1px solid #dcdde1;background:#fff;color:#232019;cursor:pointer;transition:border-color .14s,background .14s,transform .16s cubic-bezier(.34,1.4,.5,1)}
.slk-empty-btn:hover{border-color:#d6cec4;background:#f5f6fa;transform:translateY(-1px)}
.slk-empty-btn svg{color:#9c948b}
/* muted Total tile on an empty month */
.slk-kpi.mute .slk-kpi-n,.slk-kpi.mute .slk-kpi-cur{color:#b5aea5}
/* [5 Sep 2026] Import-history rows: quiet icon delete that reddens on hover, row hover reveal */
#page-salik #salik-invoice-history .slk-ih-row{transition:background .12s}
#page-salik #salik-invoice-history .slk-ih-row:hover td{background:#f7f8fc}
.slk-ih-del{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;background:transparent;border:1px solid transparent;color:#c3bcb2;cursor:pointer;opacity:.55;transition:opacity .14s,color .14s,background .14s,border-color .14s}
#page-salik #salik-invoice-history .slk-ih-row:hover .slk-ih-del{opacity:1}
.slk-ih-del:hover{color:#c14a37;background:rgba(216,84,63,.08);border-color:rgba(216,84,63,.2)}
.slk-ih-del svg{width:14px;height:14px}
/* riders modal */
#slk-recovery-modal{position:fixed;inset:0;z-index:2000;display:none}
.slk-rcm-bg{position:absolute;inset:0;background:rgba(20,15,10,.32);backdrop-filter:blur(2px)}
.slk-rcm{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,94vw);max-height:80vh;background:#fff;border-radius:16px;box-shadow:0 24px 64px rgba(20,15,10,.22);display:flex;flex-direction:column;overflow:hidden;animation:modalIn .42s cubic-bezier(.34,1.4,.5,1)}
.slk-rcm-hd{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 12px;border-bottom:1px solid #e8e9ed}
.slk-rcm-title{font-size:15px;font-weight:650;letter-spacing:-.012em;color:#211e1a}
.slk-rcm-sub{font-size:12px;color:#8b847b;margin-top:2px}
.slk-rcm-x{width:30px;height:30px;border-radius:8px;border:none;background:#eeeff3;color:#65605a;cursor:pointer;font-size:12px}
.slk-rcm-list{overflow-y:auto;padding:6px 8px 10px}
.slk-rcm-row{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:10px}
.slk-rcm-row.is-link{cursor:pointer}.slk-rcm-row.is-link:hover{background:#f6f7fb}
.slk-rcm-av{width:32px;height:32px;border-radius:9px;background:#e9eaee;color:#8b847b;font-size:11px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;object-fit:cover}
.slk-rcm-main{flex:1;min-width:0}
.slk-rcm-n{font-size:13px;font-weight:600;color:#211e1a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slk-rcm-m{font-size:11px;color:#a49a8f;margin-top:1px}
.slk-rcm-r{text-align:right;flex:0 0 auto}
.slk-rcm-aed{font-size:13px;font-weight:650;font-variant-numeric:tabular-nums}
.slk-rcm-aed.red{color:#c14a37}.slk-rcm-aed.amber{color:#b07d1e}.slk-rcm-aed.grey{color:#65605a}
.slk-rcm-t{font-size:10.5px;color:#a49a8f}
.slk-rcm-empty{padding:30px;text-align:center;color:#a49a8f;font-size:12.5px}
/* [5 Sep 2026 v2] COMPACT recovery bar — one clean line, calm by default */
.slk-rc2{display:flex;align-items:center;gap:14px;padding:9px 14px 9px 12px;border-radius:12px;background:#fff;border:1px solid #e1e2e6;flex-wrap:wrap}
.slk-rc2.red{border-color:#f0cfc7;background:#fdf6f4}
.slk-rc2.amber{border-color:#eddcb3;background:#f7f8fc}
.slk-rc2.green{border-color:#cfe6d5;background:#f4faf5}
.slk-rc2-meter{width:52px;height:6px;border-radius:3px;background:#e5e6ea;overflow:hidden;flex:0 0 auto}
.slk-rc2-meter>span{display:block;height:100%;border-radius:3px;background:#4e9e63;transition:width .5s cubic-bezier(.4,0,.2,1)}
.slk-rc2.red .slk-rc2-meter>span{background:#d8543f}
.slk-rc2.amber .slk-rc2-meter>span{background:#e0a53a}
.slk-rc2-lead{display:flex;flex-direction:column;gap:1px;min-width:0;margin-right:auto}
.slk-rc2-hd{font-size:13px;font-weight:600;letter-spacing:-.01em;color:#211e1a}
.slk-rc2.red .slk-rc2-hd{color:#b3462f}
.slk-rc2.amber .slk-rc2-hd{color:#7a5410}
.slk-rc2.green .slk-rc2-hd{color:#2f6a3f}
.slk-rc2-sub{font-size:11px;color:#8b847b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slk-rc2-chips{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.slk-rc2-chip{font-family:var(--font);display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;color:#4a453e;background:#fff;border:1px solid #dcdde1;border-radius:9px;padding:5px 11px;cursor:pointer;white-space:nowrap;transition:border-color .14s,background .14s,transform .15s cubic-bezier(.34,1.4,.5,1)}
.slk-rc2-chip:hover{border-color:#d0c8bd;background:#f5f6fa;transform:translateY(-1px)}
.slk-rc2-dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:#b9b1a7}
.slk-rc2-chip.red .slk-rc2-dot{background:#d8543f}
.slk-rc2-chip.amber .slk-rc2-dot{background:#e0a53a}
.slk-rc2-chip.grey .slk-rc2-dot{background:#b9b1a7}
.slk-rc2-a{font-weight:600;font-variant-numeric:tabular-nums;color:#211e1a}
.slk-rc2-chip.red .slk-rc2-a{color:#c14a37}
.slk-rc2-chip.amber .slk-rc2-a{color:#b07d1e}
.slk-rc2-l{color:#8b847b;font-size:11px}
.slk-rc2-chip.def{color:#7a5410;background:rgba(224,165,58,.1);border-color:rgba(224,165,58,.3);font-weight:600}
.slk-rcm-act{font-family:var(--font);font-size:11px;font-weight:600;color:#2f6a3f;background:rgba(78,158,99,.1);border:1px solid rgba(78,158,99,.3);border-radius:8px;padding:5px 10px;cursor:pointer;white-space:nowrap;margin-left:8px;transition:background .14s,transform .15s cubic-bezier(.34,1.4,.5,1)}
.slk-rcm-act:hover{background:rgba(78,158,99,.18);transform:translateY(-1px)}
.slk-rcm-act.is-off{color:#a49a8f;background:#eeeff3;border-color:#dcdde1;cursor:default}
.slk-rcm-act.is-off:hover{transform:none}
/* ═══ [6 Sep 2026] Fixed-salary riders — monthly confirm strip + panel ═══ */
.sfx{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;border:1px solid #e1e2e6;background:#fff;margin-bottom:12px}
.sfx.amber{background:#f7f8fc;border-color:#eddcb3}.sfx.green{background:#f4faf5;border-color:#cfe6d5}
.sfx-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:#b9b1a7}.sfx.amber .sfx-dot{background:#e0a53a}.sfx.green .sfx-dot{background:#4e9e63}
.sfx-t{font-size:13px;font-weight:600;color:#211e1a;letter-spacing:-.01em}.sfx.amber .sfx-t{color:#7a5410}.sfx.green .sfx-t{color:#2f6a3f}
.sfx-s{font-size:11.5px;color:#8b847b;margin-left:2px}
.sfx-btn{margin-left:auto;font-family:var(--font);display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:7px 13px;border-radius:9px;border:1px solid #dcdde1;background:#fff;color:#232019;cursor:pointer;transition:border-color .14s,background .14s,transform .15s cubic-bezier(.34,1.4,.5,1)}
.sfx-btn:hover{border-color:#d6cec4;background:#f5f6fa;transform:translateY(-1px)}
#sal-fixed-modal{position:fixed;inset:0;z-index:2000;display:none}
/* [6 Sep 2026, salik-external] settle-outside-slip modal reuses the sfx modal shell */
#slk-ext-modal{position:fixed;inset:0;z-index:2000;display:none}
.slk-ext-lab{font-size:10px;font-weight:600;color:#a89f95;text-transform:uppercase;letter-spacing:.06em;margin:12px 0 6px}
.slk-ext-lab span{font-weight:400;text-transform:none;letter-spacing:0}
.slk-ext-in{width:100%;box-sizing:border-box;font-size:12.5px;padding:8px 10px;border:1px solid rgba(95,100,120,.22);border-radius:9px;background:#fff;color:#1a1c19;outline:none;font-family:inherit}
.slk-ext-in:focus{border-color:#8B1A1A}
.slk-ext-btn{margin-left:8px;font-family:inherit;font-size:11px;font-weight:600;padding:5px 11px;border-radius:8px;border:1px solid #8B1A1A;background:#8B1A1A;color:#fff;cursor:pointer;white-space:nowrap;transition:opacity .15s}
.slk-ext-btn:disabled{background:#fff;color:#8a827a;border-color:#d6cec4;cursor:default;opacity:.7}
.sfx-bg{position:absolute;inset:0;background:rgba(20,15,10,.38);opacity:0;animation:sfxFade .14s ease-out forwards} /* [6 Sep 2026] no backdrop-filter: blurring the whole page delayed the modal's first paint */
@keyframes sfxFade{to{opacity:1}}
@keyframes sfxPop{from{opacity:0;transform:translate(-50%,-50%) scale(.97)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.sfx-m2{opacity:0;animation:sfxPop .18s cubic-bezier(.2,.8,.2,1) forwards;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(860px,95vw);max-height:84vh;background:#fff;border-radius:16px;box-shadow:0 24px 64px rgba(20,15,10,.22);display:flex;flex-direction:column;overflow:hidden}
.sfx-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 18px 12px;border-bottom:1px solid #e8e9ed}
.sfx-title{font-size:15px;font-weight:650;letter-spacing:-.012em;color:#211e1a}
.sfx-sub{font-size:11.5px;color:#8b847b;margin-top:3px;line-height:1.45;max-width:640px}
.sfx-x{width:30px;height:30px;border-radius:8px;border:none;background:#eeeff3;color:#65605a;cursor:pointer;font-size:12px;flex:0 0 auto}
.sfx-list{overflow-y:auto;padding:6px 10px 10px}
.sfx-row{display:flex;align-items:center;gap:12px;padding:11px 8px;border-bottom:1px solid #edeef2}
.sfx-row:last-child{border-bottom:none}
.sfx-row.is-done{opacity:.72}
.sfx-av{width:34px;height:34px;border-radius:10px;background:#e9eaee;color:#8b847b;font-size:11px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;object-fit:cover}
.sfx-main{min-width:0;flex:1 1 200px}
.sfx-n{font-size:13px;font-weight:600;color:#211e1a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sfx-m{font-size:11px;color:#a49a8f;margin-top:2px}
.sfx-ded{color:#b07d1e}
.sfx-ctl{display:flex;gap:10px;align-items:flex-end;flex:0 0 auto}
.sfx-ctl label{font-size:10px;font-weight:600;color:#9c948b;text-transform:uppercase;letter-spacing:.05em;position:relative}
.sfx-in{font-family:var(--font);display:block;margin-top:3px;width:104px;font-size:13px;font-weight:600;color:#211e1a;padding:6px 9px;border:1px solid #dcdde1;border-radius:8px;background:#fff;font-variant-numeric:tabular-nums}
.sfx-in.sfx-days{width:64px;padding-right:26px}
.sfx-in:focus{outline:none;border-color:#c9b9a6;box-shadow:0 0 0 3px rgba(139,26,26,.08)}
.sfx-of{position:absolute;right:9px;bottom:7px;font-size:11px;color:#a49a8f;font-weight:500;text-transform:none;letter-spacing:0}
.sfx-ov{position:absolute;right:0;top:0;font-size:9px;color:#b07d1e;background:rgba(224,165,58,.14);padding:1px 6px;border-radius:5px;letter-spacing:.02em}
.sfx-ok{font-family:var(--font);font-size:12px;font-weight:600;padding:8px 14px;border-radius:9px;border:1px solid #8B1A1A;background:#8B1A1A;color:#fff;cursor:pointer;flex:0 0 auto;transition:background .14s,transform .15s cubic-bezier(.34,1.4,.5,1)}
.sfx-ok:hover{background:#751616;transform:translateY(-1px)}
.sfx-ok:disabled{background:#e1e2e6;border-color:#e1e2e6;color:#a49a8f;cursor:default;transform:none}
.sfx-done{font-size:12px;font-weight:600;color:#2f6a3f;flex:0 0 auto}
.sfx-done a{color:#8B1A1A;cursor:pointer;margin-left:8px;font-weight:500}
.sfx-ft{padding:12px 18px;border-top:1px solid #e8e9ed;display:flex;justify-content:flex-end}
.sfx-all{font-family:var(--font);font-size:12.5px;font-weight:600;padding:9px 16px;border-radius:10px;border:1px solid #8B1A1A;background:#8B1A1A;color:#fff;cursor:pointer}
.sfx-all:hover{background:#751616}

/* [8 Sep 2026] Couriers Roster/App-status switch — identical to the Salik switch */
/* [19 Sep 2026] same quiet Seg-pill look as the Performance switcher (was maroon gradient + glow) */
#cour-view-switch{position:relative;display:inline-flex;align-items:center;gap:0;background:#ecedf1;backdrop-filter:none;-webkit-backdrop-filter:none;border:0;border-radius:9px;padding:2px;box-shadow:none;isolation:isolate}
#cour-view-switch .pv-thumb{position:absolute;top:2px;left:4px;width:0;height:calc(100% - 4px);border-radius:7px;background:#fff;box-shadow:0 1px 2px rgba(34,31,28,.12);transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1);z-index:0;pointer-events:none}
#cour-view-switch .abf-pill{position:relative;z-index:1;border:0;background:transparent;box-shadow:none;color:#8a827a;font-size:12px;font-weight:600;padding:6px 13px;border-radius:7px;transition:color .22s cubic-bezier(.4,0,.2,1)}
#cour-view-switch .abf-pill:hover{background:transparent;border-color:transparent;box-shadow:none;color:#58413f;font-weight:600}
#cour-view-switch .abf-pill.on{background:transparent;border-color:transparent;box-shadow:none;color:#1a1c19;font-weight:600}
#cour-view-switch .abf-pill svg{opacity:.7;transition:opacity .3s}
#cour-view-switch .abf-pill.on svg{opacity:1}
#cour-view-switch .abf-pill .abf-n{margin-left:6px}
#cour-view-switch .abf-pill.on .abf-n{background:rgba(139,26,26,.10);color:#8B1A1A}
#cour-view-switch .pv-thumb{transition:none}
/* ═══ [9 Sep 2026] Low-performance panel (Penalties) — rebuilt ═══ */
.lp-gap{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;border-radius:11px;background:#f7f8fc;border:1px solid #eddcb3;font-size:12.5px;color:#5b4a1e;line-height:1.5;margin-bottom:12px}
.lp-gap b{color:#7a5410}
.lp-gap-dot{width:8px;height:8px;border-radius:50%;background:#e0a53a;flex:0 0 auto;margin-top:6px}
.lp-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-bottom:14px}
.lp-tile{background:#fff;border:1px solid #e2e3e7;border-radius:11px;padding:10px 12px;position:relative;overflow:hidden}
.lp-tile::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:#d1d2d6}
.lp-tile.red::before{background:#d8543f}.lp-tile.amber::before{background:#e0a53a}.lp-tile.green::before{background:#4e9e63}.lp-tile.grey::before{background:#c7c8cc}
.lp-tile-l{font-size:10px;font-weight:600;color:#9c948b;text-transform:uppercase;letter-spacing:.05em}
.lp-tile-v{font-size:17px;font-weight:650;letter-spacing:-.02em;color:#211e1a;margin-top:3px;font-variant-numeric:tabular-nums}
.lp-tile.red .lp-tile-v{color:#c14a37}.lp-tile.amber .lp-tile-v{color:#b07d1e}.lp-tile.green .lp-tile-v{color:#3f8552}.lp-tile.grey .lp-tile-v{color:#7a746c}
.lp-tile-s{font-size:10.5px;color:#a49a8f;margin-top:2px}
.lp-bulk{display:flex;align-items:center;gap:12px;padding:8px 10px;border:1px solid #e2e3e7;border-radius:10px;background:#f7f8fc;margin-bottom:8px;font-size:12px}
.lp-chk{display:flex;align-items:center;gap:7px;cursor:pointer;color:#4a453e;font-weight:500}
.lp-bulk-n{color:#8b847b;margin-left:auto}
.lp-bulk-acts{display:flex;gap:6px}
.lp-btn{font-family:var(--font);font-size:11.5px;font-weight:600;padding:6px 12px;border-radius:8px;border:1px solid #dcdde1;background:#fff;color:#4a453e;cursor:pointer;transition:background .14s,border-color .14s,transform .15s cubic-bezier(.34,1.4,.5,1);white-space:nowrap}
.lp-btn:hover:not(:disabled){background:#f5f6fa;border-color:#d6cec4;transform:translateY(-1px)}
.lp-btn:disabled{opacity:.45;cursor:default}
.lp-btn-primary{background:#8B1A1A;border-color:#8B1A1A;color:#fff}.lp-btn-primary:hover:not(:disabled){background:#751616}
.lp-btn-green{color:#2f6a3f;border-color:rgba(78,158,99,.4);background:rgba(78,158,99,.08)}.lp-btn-green:hover:not(:disabled){background:rgba(78,158,99,.16)}
.lp-btn-red{color:#b3462f;border-color:rgba(216,84,63,.35);background:rgba(216,84,63,.07)}.lp-btn-red:hover:not(:disabled){background:rgba(216,84,63,.14)}
.lp-tblwrap{overflow-x:auto;border:1px solid #e2e3e7;border-radius:12px;background:#fff}
.lp-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.lp-tbl th{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#9c948b;padding:10px 12px;text-align:left;background:#f6f7fb;border-bottom:1px solid #e8e9ed;white-space:nowrap}
.lp-tbl td{padding:10px 12px;border-top:1px solid #edeef2;vertical-align:middle}
.lp-tbl .lp-r{text-align:right}.lp-tbl .lp-c{width:30px;text-align:center}
.lp-row{transition:background .12s}.lp-row:hover td{background:#f7f8fc}
.lp-row-gap td{color:#a49a8f}
.lp-name{font-weight:600;color:#211e1a;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.lp-sub{font-size:10.5px;color:#a49a8f;margin-top:2px;white-space:nowrap}
.lp-sub a{color:#8B1A1A;cursor:pointer;font-weight:600}
.lp-sub.lp-warn{color:#b07d1e}
.lp-sub.lp-neg{color:#c14a37}.lp-sub.lp-pos{color:#3f8552}
.lp-num{font-variant-numeric:tabular-nums}.lp-dim{color:#a49a8f}.lp-strong{font-weight:650;color:#211e1a}
.lp-unk{color:#c3bcb2;font-style:italic;font-size:11px}
.lp-flag{font-size:9.5px;font-weight:600;color:#b07d1e;background:rgba(224,165,58,.13);padding:1.5px 6px;border-radius:5px;white-space:nowrap}
.lp-pill{font-size:10px;font-weight:600;padding:2.5px 8px;border-radius:6px;text-transform:capitalize;background:#eeeff3;color:#6a655e}
.lp-pill-paid{background:#e6f3e8;color:#2f6a3f}.lp-pill-confirmed{background:#e5eefb;color:#28517f}.lp-pill-draft{background:#eeeff3;color:#8b847b}
.lp-verdict{font-size:12px;font-weight:600}

/* [12 Sep 2026] .cp-id — inline copy-ID icon button (Employee ID cell, rider ID chips). Restored: the original rule was lost with the 11 Sep server-side edit. */
.cp-id{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:6px;color:#b5aca2;cursor:pointer;flex:none;vertical-align:middle;transition:color .15s,background .15s,opacity .15s}
.cp-id svg{width:12px;height:12px;display:block}
.cp-id:hover{color:#8B1A1A;background:rgba(139,26,26,.08)}
.cp-id:active{transform:scale(.92)}
.cp-id.cp-done{color:#2f6a3f;background:rgba(47,106,63,.1)}
.cp-id.cp-id-lg{width:24px;height:24px;border-radius:7px}
.cp-id.cp-id-lg svg{width:14px;height:14px}
tr:not(:hover) td .cp-id{opacity:.45}
tr:hover td .cp-id{opacity:1}
/* [13 Sep 2026] Penalties page: drop the faint top-rail line on the stat cards (looked like a stray line above each number) */
#penalty-stats .dash-kpi::before{ display:none; }

/* Couriers audit, 20 Sep 2026: keep actions and all columns reachable at narrow widths. */
#page-couriers .page-header { flex-wrap: wrap; gap: 14px; }
#page-couriers .page-header > div { min-width: 0; flex-wrap: wrap; }
#page-couriers .page-header > div:last-child { max-width: 100%; }
#page-couriers .page-header button { white-space: nowrap; }
#page-couriers .tbl { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
#page-couriers .tbl table { min-width: 1080px; }
#page-couriers .tbl td:first-child { min-width: 230px; }
#page-couriers :is(button,[role="button"],th[tabindex]):focus-visible { outline: 2px solid #8b1a1a; outline-offset: 3px; }
@media (max-width: 1100px) {
  #page-couriers #courier-stats { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; overflow: visible; }
  #page-couriers #courier-stats .dash-kpi { min-width: 0; }
}
@media (max-width: 600px) {
  #page-couriers #courier-stats { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  #page-couriers #courier-stats .dash-kpi { min-width: 0 !important; flex: initial !important; }
  #page-couriers .toolbar .search { min-width: 0 !important; flex: 1 1 100% !important; }
  #page-couriers .page-header button,
  #page-couriers .toolbar button,
  #page-couriers #hiring-toggles-courier button,
  #page-couriers .cs-app-tile { min-height: 44px; }
}

#page-couriers .cour-sort-btn { appearance: none; border: 0; padding: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; text-align: left; }
#page-couriers .tbl table { display: table !important; }
@media (max-width: 600px) { #page-couriers .cour-sort-btn { min-height: 44px; } }

#page-couriers { --t3: #6a6863; }


/* ═══ EasyLease unified month import — modal (scoped to .eli-scope) ═══ */
.eli-overlay{position:fixed;inset:0;z-index:9400;background:rgba(26,28,25,.40);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .2s ease}
.eli-overlay.in{opacity:1}
.eli-scope{font-family:var(--font,'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif);color:#1a1c19;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;max-height:100%;display:flex}
.eli-scope .m{width:820px;max-width:96vw;max-height:90vh;background:#fff;border:1px solid rgba(95,100,120,.13);border-radius:20px;box-shadow:0 30px 70px -20px rgba(26,28,25,.34),0 8px 20px rgba(26,28,25,.06);overflow:hidden;display:flex;flex-direction:column;transform:scale(.97) translateY(10px);opacity:0;transition:transform .32s cubic-bezier(.2,1,.3,1),opacity .22s ease}
.eli-overlay.in .m{transform:none;opacity:1}
.eli-scope .hd{display:flex;align-items:center;gap:14px;padding:18px 22px;border-bottom:1px solid rgba(95,100,120,.12)}
.eli-scope .hd.wtile{gap:12px}
.eli-scope .eltile{width:32px;height:32px;border-radius:9px;background:#8B1A1A;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;letter-spacing:-.3px;flex:none}
.eli-scope .ttl{font-size:16px;font-weight:700;letter-spacing:-.3px}
.eli-scope .sub{font-size:12px;color:rgba(26,28,25,.55);margin-top:3px}
.eli-scope .stepper{display:flex;align-items:center;margin-left:auto}
.eli-scope .st{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:rgba(26,28,25,.45)}
.eli-scope .st i{width:18px;height:18px;border-radius:50%;border:1.5px solid rgba(95,100,120,.3);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:10px;font-weight:700;color:rgba(26,28,25,.45);background:#fff}
.eli-scope .st.cur{color:#1a1c19}.eli-scope .st.cur i{background:#8B1A1A;border-color:#8B1A1A;color:#fff}
.eli-scope .st.done{color:#2d6a2e}.eli-scope .st.done i{background:#2d6a2e;border-color:#2d6a2e;color:#fff}
.eli-scope .stl{width:26px;height:1.5px;background:rgba(95,100,120,.25);margin:0 8px}
.eli-scope .x{width:28px;height:28px;border-radius:8px;border:1px solid rgba(95,100,120,.15);background:#fff;color:#58413f;display:flex;align-items:center;justify-content:center;font-size:15px;flex:none;cursor:pointer}
.eli-scope .bd{padding:20px 22px;display:flex;flex-direction:column;gap:14px;overflow-y:auto;flex:1 1 auto;min-height:0;overscroll-behavior:contain}
.eli-scope .hd,.eli-scope .ft{flex:0 0 auto}
.eli-scope .ft{padding:14px 22px;border-top:1px solid rgba(95,100,120,.12);display:flex;align-items:center;gap:8px;background:#fff}
.eli-scope .btn-p,.eli-scope .btn-g{transition:transform .15s cubic-bezier(.2,1,.3,1),box-shadow .15s,background .15s}
.eli-scope .btn-p:hover{background:#7a1414;box-shadow:0 6px 16px -6px rgba(139,26,26,.5)}
.eli-scope .btn-g:hover{background:#f6f7fb}
.eli-scope .btn-p:active,.eli-scope .btn-g:active{transform:scale(.98)}
.eli-scope .x{transition:background .15s,color .15s}
.eli-scope .x:hover{background:#faf5f3;color:#8B1A1A}
.eli-scope .btn-p{display:inline-flex;align-items:center;padding:9px 16px;background:#8B1A1A;color:#fff;font-size:13px;font-weight:600;border-radius:8px;border:1px solid #8B1A1A;text-decoration:none;white-space:nowrap;cursor:pointer;font-family:inherit}
.eli-scope .btn-g{display:inline-flex;align-items:center;padding:9px 14px;background:#fff;border:1px solid rgba(95,100,120,.18);color:#58413f;font-size:13px;font-weight:500;border-radius:8px;text-decoration:none;white-space:nowrap;cursor:pointer;font-family:inherit}
.eli-scope .drop{border:1.5px dashed rgba(95,100,120,.3);border-radius:12px;background:#f8f9fd;padding:26px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.eli-scope .drop.drag{border-color:#8B1A1A;background:#fff}
.eli-scope .mono{font-family:'JetBrains Mono','SF Mono',Menlo,monospace;font-size:12px}
.eli-scope .mut{color:rgba(26,28,25,.55)}
.eli-scope .warn{color:#8a5a00;font-weight:600}
.eli-scope .ok{color:#2d6a2e;font-weight:600}
.eli-scope .note{font-size:12px;color:rgba(26,28,25,.6);line-height:1.55;display:flex;flex-direction:column;gap:6px}
.eli-scope .note div::before{content:"·";margin-right:8px;color:rgba(26,28,25,.35)}
.eli-scope .tie{display:flex;align-items:center;gap:16px;padding:14px 16px;border:1px solid #e1e2e6;border-radius:12px;background:#fff}
.eli-scope .tk{font-size:14px;font-weight:700;letter-spacing:-.2px}
.eli-scope .tk small{display:block;font-size:12px;font-weight:500;color:rgba(26,28,25,.55);margin-top:2px;letter-spacing:0}
.eli-scope .eq{margin-left:auto;display:flex;align-items:center;gap:12px}
.eli-scope .amt{font-family:'JetBrains Mono','SF Mono',Menlo,monospace;font-size:15px;font-weight:600;text-align:right}
.eli-scope .amt small{display:block;font-family:var(--font);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:rgba(26,28,25,.45);margin-bottom:1px}
.eli-scope .arw{color:rgba(26,28,25,.3);font-size:16px}
.eli-scope .tiepill{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:999px;background:rgba(45,106,46,.1);color:#2d6a2e;font-size:12px;font-weight:700}
.eli-scope .summary{border:1px solid #e1e2e6;border-radius:12px;background:#fff;box-shadow:0 1px 3px rgba(26,28,25,.05);overflow:hidden}
.eli-scope .summary .top{display:flex;align-items:center;gap:16px;padding:16px 18px 15px}
.eli-scope .divln{height:1px;background:#eaebef}
.eli-scope .lands3{padding:14px 18px 16px}
.eli-scope .lh{font-size:12px;font-weight:700;margin-bottom:12px;display:flex;align-items:baseline;gap:8px}
.eli-scope .lh small{font-size:11.5px;font-weight:500;color:rgba(26,28,25,.5)}
.eli-scope .lrow{display:grid;grid-template-columns:172px 1fr 96px;align-items:center;gap:14px;padding:5px 0}
.eli-scope .lbl{font-size:12.5px;font-weight:600;line-height:1.25}
.eli-scope .lbl small{display:block;font-weight:500;color:rgba(26,28,25,.5);font-size:11px}
.eli-scope .bar{height:9px;border-radius:5px;background:#eaebef;position:relative;overflow:hidden}
.eli-scope .bar i{position:absolute;left:0;top:0;height:100%;border-radius:5px;display:block}
.eli-scope .val{text-align:right;font-family:'JetBrains Mono','SF Mono',Menlo,monospace;font-size:12.5px;font-weight:500}
.eli-scope .clist{border:1px solid #e1e2e6;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 1px 3px rgba(26,28,25,.04)}
.eli-scope .crow{display:grid;grid-template-columns:34px 1fr 122px 30px;align-items:center;gap:14px;padding:13px 16px;border-top:1px solid rgba(95,100,120,.1)}
.eli-scope .crow:first-child{border-top:none}
.eli-scope .chip{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;letter-spacing:-.5px}
.eli-scope .nm{font-size:13.5px;font-weight:700;letter-spacing:-.2px}
.eli-scope .ds{font-size:12px;color:rgba(26,28,25,.6);margin-top:2px;line-height:1.4}
.eli-scope .am{text-align:right;font-family:'JetBrains Mono','SF Mono',Menlo,monospace;font-size:13px;font-weight:600}
.eli-scope .am small{display:block;font-family:'Inter',system-ui,sans-serif;font-size:11px;font-weight:500;color:rgba(26,28,25,.5);margin-top:1px}
.eli-scope .flag{width:22px;height:22px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;justify-self:end}
.eli-scope .flag.a{background:rgba(184,115,51,.16);color:#8a5a00}
.eli-scope .flag.k{color:#2d6a2e;background:rgba(45,106,46,.12)}
.eli-scope .need{border:1px solid #ead9c0;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 1px 3px rgba(26,28,25,.04)}
.eli-scope .nhd{display:flex;align-items:center;gap:9px;padding:11px 16px;background:#f5f6fa;border-bottom:1px solid #f0e6d6}
.eli-scope .nt{font-size:13px;font-weight:700}
.eli-scope .nc{font-size:11px;font-weight:700;color:#8a5a00;background:rgba(184,115,51,.14);padding:2px 8px;border-radius:999px}
.eli-scope .nrow{display:grid;grid-template-columns:20px 1fr auto;gap:10px;align-items:start;padding:11px 16px;border-top:1px solid rgba(95,100,120,.1);font-size:12.5px;line-height:1.5}
.eli-scope .nrow:first-of-type{border-top:none}
.eli-scope .nrow .ic{width:18px;height:18px;border-radius:50%;background:rgba(184,115,51,.14);color:#8a5a00;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:1px}
.eli-scope .ac{white-space:nowrap;font-size:12px;padding-top:1px}
.eli-scope .ac a{color:#8B1A1A;font-weight:600;text-decoration:none;cursor:pointer}
.eli-busy{opacity:.55;pointer-events:none}


/* ═══ EasyLease month-coverage card (Fines page) ═══ */
.elcov{background:#fff;border:1px solid rgba(95,100,120,.14);border-radius:14px;padding:14px 16px;box-shadow:0 1px 2px rgba(26,28,25,.04);font-family:var(--font);animation:elcovIn .38s cubic-bezier(.2,1,.3,1) both}
.elcov-hd{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.elcov.closed{padding:9px 16px}
.elcov.closed .elcov-hd{margin-bottom:0}
.elcov-toggle{cursor:pointer;user-select:none;-webkit-user-select:none}
.elcov-chev{font-size:11px;color:#a89f95;display:inline-block;transition:transform .2s cubic-bezier(.2,1,.3,1);margin-left:-4px}
.elcov-chev.on{transform:rotate(180deg)}
.elcov-toggle:hover .elcov-chev{color:#8B1A1A}
.elcov-sum{font-size:12px;color:#8a837c}
.elcov-sum .g{color:#2d6a2e;font-weight:600}
.elcov-sum .a{color:#854F0B;font-weight:600}
.elcov-hd .t{font-size:14px;font-weight:700;letter-spacing:-.2px;color:#1a1c19}
.elcov-hd .s{font-size:12px;color:#8a837c}
.elcov-imp{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:9px;background:#8B1A1A;color:#fff;font-size:12px;font-weight:700;border:1px solid #8B1A1A;cursor:pointer;font-family:var(--font)}
.elcov-row{display:grid;grid-template-columns:84px 168px 150px 1fr 44px;align-items:center;gap:14px;padding:7px 0;border-top:1px solid rgba(95,100,120,.09)}
.elcov-undo{text-align:right;font-size:11.5px;font-weight:600;color:#b5ada5;cursor:pointer;background:none;border:none;font-family:var(--font);padding:0;transition:color .15s}
.elcov-row:hover .elcov-undo{color:#8B1A1A}
.elcov-row.hdr{border-top:none;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#a89f95;padding:0 0 4px}
.elcov-row.hdr>div{white-space:nowrap}
.elcov-m{font-size:13px;font-weight:700;color:#1a1c19}
.elcov-segs{display:flex;gap:4px;width:168px}
.elcov-seg{flex:1;height:7px;border-radius:4px;background:#e1e2e6;transition:background .2s}
.elcov-more{padding:8px 0 0;font-size:12px}
.elcov-more a{color:#8B1A1A;font-weight:600;cursor:pointer;text-decoration:none}
.elcov-more a:hover{text-decoration:underline}
@keyframes elcovIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.elcov-seg.g{background:#2d6a2e}
.elcov-seg.a{background:#B87333}
.elcov-amt{text-align:right;font-family:var(--mono);font-size:12.5px;color:#1a1c19;font-variant-numeric:tabular-nums}
.elcov-st{text-align:right;font-size:12px;font-weight:600}
.elcov-st.g{color:#2d6a2e}
.elcov-st.a{color:#854F0B}
.elcov-leg{margin-top:10px;font-size:11px;color:#a89f95;line-height:1.5}

/* [17 Oct 2026] iPhone dawn on the phone sign-in */
@media (max-width:600px){#login-screen{background:linear-gradient(180deg,#FFEFE6 0%,#FFF6F1 45%,#FFFAF8 100%)!important}#login-screen::before{background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20402%20260%22%20preserveAspectRatio%3D%22xMidYMax%20slice%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22h%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%22.95%22%2F%3E%3Cstop%20offset%3D%22.7%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22p%22%20cx%3D%22.42%22%20cy%3D%22.38%22%20r%3D%22.72%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23FFFFFF%22%2F%3E%3Cstop%20offset%3D%22.45%22%20stop-color%3D%22%23FFFBF8%22%2F%3E%3Cstop%20offset%3D%22.85%22%20stop-color%3D%22%23F5EAE3%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23EEDCD1%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Ccircle%20cx%3D%22290%22%20cy%3D%22128%22%20r%3D%22150%22%20fill%3D%22url%28%23h%29%22%2F%3E%3Ccircle%20cx%3D%22290%22%20cy%3D%22128%22%20r%3D%2296%22%20fill%3D%22url%28%23p%29%22%20stroke%3D%22%23C9A46A%22%20stroke-opacity%3D%22.35%22%2F%3E%3Cg%20transform%3D%22translate%280%2058%29%22%20fill%3D%22%23FBEDE6%22%20stroke%3D%22%238B1A1A%22%20stroke-opacity%3D%22.24%22%20stroke-width%3D%221.4%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20vector-effect%3D%22non-scaling-stroke%22%20d%3D%22M0%20200V160H30V200Z%22%2F%3E%3Cpath%20vector-effect%3D%22non-scaling-stroke%22%20d%3D%22M44%20200V130H52V116H62V130H70V200Z%22%2F%3E%3Cpath%20vector-effect%3D%22non-scaling-stroke%22%20d%3D%22M88%20200V146H120V200Z%22%2F%3E%3Cpath%20vector-effect%3D%22non-scaling-stroke%22%20d%3D%22M136%20200V160Q150%20140%20164%20160V200Z%22%2F%3E%3Cpath%20vector-effect%3D%22non-scaling-stroke%22%20d%3D%22M190%20200V96L204%2070L218%2096V200Z%22%2F%3E%3Cpath%20vector-effect%3D%22non-scaling-stroke%22%20d%3D%22M232%20200V40L242%200L252%2040V200Z%22%2F%3E%3Cpath%20vector-effect%3D%22non-scaling-stroke%22%20d%3D%22M266%20200V116H274V90H288V116H296V200Z%22%2F%3E%3Cpath%20vector-effect%3D%22non-scaling-stroke%22%20d%3D%22M312%20200V140H346V200Z%22%2F%3E%3Cpath%20vector-effect%3D%22non-scaling-stroke%22%20d%3D%22M356%20200V100H388V200Z%22%2F%3E%3Cpath%20vector-effect%3D%22non-scaling-stroke%22%20d%3D%22M0%20200H402%22%20fill%3D%22none%22%20stroke-opacity%3D%22.3%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center bottom/100% auto!important}#login-screen .login-blob{display:none!important}#login-screen .login-box{background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.7))!important;border:1px solid rgba(255,255,255,.9)!important;box-shadow:0 20px 48px rgba(107,58,46,.15),0 2px 6px rgba(107,58,46,.06),inset 0 1px 0 #fff!important;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}}

/* ═══════════════════════════════════════════════════════════════════
   [20 Oct 2026] IMPORT POP-UP SYSTEM (imp-*) — one look for every import door.
   Matti: "not consistent ... poorly designed ... fix it all". Built from the looks he approved:
   the 9 Oct overwrite box (white surface, soft dim, one maroon action), the Salary page and the
   client dashboard (flat, solid maroon, white outlined secondary, no glass, no 3D).
   Colours are set here on purpose, NOT from var(--acc): the old theme picker paints --acc white.
   ═══════════════════════════════════════════════════════════════════ */
.imp-ov{position:fixed;inset:0;z-index:9500;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(26,28,25,.34);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .18s ease;font-family:var(--font);color:#1a1c19;text-align:left;
  --imp-brand:#8B1A1A;--imp-brand-hover:#731515;--imp-brand-soft:rgba(139,26,26,.075);--imp-ink:#1a1c19;--imp-ink2:#45454d;--imp-mute:#71717b;--imp-line:rgba(95,100,120,.20);--imp-line2:rgba(95,100,120,.11);--imp-sunk:#f5f6fa;
  --imp-ok:#2d6a2e;--imp-ok-soft:rgba(45,106,46,.09);--imp-warn:#8a5a14;--imp-warn-soft:rgba(184,115,51,.11);--imp-bad:#991b1b;--imp-bad-soft:rgba(153,27,27,.075)}
.imp-ov.in{opacity:1}
.imp-ov.top{z-index:9700}
.imp{position:relative;display:flex;flex-direction:column;width:560px;max-width:100%;max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);background:#fff;border:1px solid var(--imp-line);border-radius:16px;box-shadow:0 2px 6px rgba(26,28,25,.05),0 30px 70px -28px rgba(26,28,25,.40);overflow:hidden;transform:translateY(8px) scale(.985);transition:transform .22s cubic-bezier(.2,.9,.3,1)}
.imp-ov.in .imp{transform:none}
.imp.sm{width:440px}.imp.lg{width:760px}.imp.xl{width:900px}
.imp-hd{display:flex;align-items:flex-start;gap:12px;padding:18px 18px 16px 22px;border-bottom:1px solid var(--imp-line2);flex:none}
.imp-ic{width:36px;height:36px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--imp-brand-soft);color:var(--imp-brand)}
.imp-ic.warn{background:var(--imp-warn-soft);color:var(--imp-warn)}.imp-ic.bad{background:var(--imp-bad-soft);color:var(--imp-bad)}.imp-ic.ok{background:var(--imp-ok-soft);color:var(--imp-ok)}
.imp-tt{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;padding-top:1px}
.imp-tt h3{margin:0;font-size:16px;font-weight:700;letter-spacing:-.2px;line-height:1.25;color:var(--imp-ink)}
.imp-sub{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:12.5px;color:var(--imp-mute);line-height:1.4}
.imp-file{font-family:var(--mono);font-size:11.5px;color:var(--imp-ink2);background:var(--imp-sunk);border:1px solid var(--imp-line2);border-radius:6px;padding:1px 7px;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.imp-x{flex:none;width:32px;height:32px;margin:-3px 0 0;border-radius:9px;border:1px solid transparent;background:transparent;color:var(--imp-mute);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background .15s,color .15s,border-color .15s}
.imp-x:hover{background:var(--imp-sunk);color:var(--imp-ink);border-color:var(--imp-line2)}
.imp-steps{flex:none;display:flex;align-items:center;gap:8px;padding:10px 22px;border-bottom:1px solid var(--imp-line2);font-size:12px;font-weight:600;color:var(--imp-mute)}
.imp-steps span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.imp-steps span i{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:11px;font-weight:700;border:1px solid var(--imp-line);color:var(--imp-mute);background:#fff}
.imp-steps span.on{color:var(--imp-ink)}.imp-steps span.on i{background:var(--imp-brand);border-color:var(--imp-brand);color:#fff}
.imp-steps span.done i{background:var(--imp-ok-soft);border-color:transparent;color:var(--imp-ok)}
.imp-steps b{flex:1;max-width:48px;height:1px;background:var(--imp-line)}
.imp-sum{flex:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;padding:12px 22px;background:var(--imp-sunk);border-bottom:1px solid var(--imp-line2);font-size:13px;color:var(--imp-ink2);line-height:1.45}
.imp-sum b{font-size:15px;font-weight:700;color:var(--imp-ink);font-variant-numeric:tabular-nums}
.imp-sum .lead{flex-basis:100%;font-size:13px;color:var(--imp-ink2)}
.imp-sum .lead b{font-size:13px}
.imp-bd{flex:1 1 auto;min-height:0;overflow-y:auto;padding:16px 22px 18px;display:flex;flex-direction:column;gap:10px;font-size:13px;line-height:1.5;color:var(--imp-ink2)}
.imp-ft{flex:none;display:flex;align-items:center;gap:12px;padding:14px 18px 14px 22px;border-top:1px solid var(--imp-line2);background:#fff}
.imp-hint{flex:1;min-width:0;font-size:12px;color:var(--imp-mute);line-height:1.45}
.imp-hint b{color:var(--imp-ink2)}
.imp-btns{display:flex;gap:8px;flex:none;margin-left:auto}
.imp-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 16px;border-radius:10px;border:1px solid var(--imp-line);background:#fff;color:var(--imp-ink);font-family:inherit;font-size:13px;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;text-decoration:none;box-shadow:none;transition:background .15s,border-color .15s}
.imp-btn:hover{background:var(--imp-sunk);border-color:rgba(95,100,120,.34)}
.imp-btn.p{background:var(--imp-brand);border-color:var(--imp-brand);color:#fff}
.imp-btn.p:hover{background:var(--imp-brand-hover);border-color:var(--imp-brand-hover)}
.imp-btn.danger{background:var(--imp-bad);border-color:var(--imp-bad);color:#fff}
.imp-btn:disabled,.imp-btn[disabled]{opacity:.45;cursor:default;pointer-events:none}
.imp-btn.sm{height:30px;padding:0 11px;font-size:12px;border-radius:8px}
.imp-btn svg{width:15px;height:15px;flex:none}
.imp-btn:focus-visible,.imp-x:focus-visible,.imp-seg button:focus-visible{outline:2px solid rgba(139,26,26,.45);outline-offset:2px}
.imp-group{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin-top:6px;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--imp-mute)}
.imp-group:first-child{margin-top:0}
.imp-group .n{font-variant-numeric:tabular-nums;color:var(--imp-ink2);background:var(--imp-sunk);border:1px solid var(--imp-line2);border-radius:999px;padding:0 7px;letter-spacing:0;font-size:11px;line-height:18px}
.imp-group .d{text-transform:none;letter-spacing:0;font-weight:500;color:var(--imp-mute);font-size:12px}
.imp-list{border:1px solid var(--imp-line);border-radius:12px;overflow:hidden;background:#fff;flex:none}
.imp-row{display:flex;align-items:center;gap:12px;padding:10px 14px;border-top:1px solid var(--imp-line2);min-width:0;background:#fff}
.imp-row:first-child{border-top:0}
label.imp-row{cursor:pointer}label.imp-row:hover{background:var(--imp-sunk)}
.imp-row.off{cursor:not-allowed}.imp-row.off .who{opacity:.6}
.imp-row input[type=checkbox]{width:16px;height:16px;accent-color:var(--imp-brand);flex:none;margin:0}
.imp-row .who{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.imp-row .nm{font-size:13.5px;font-weight:600;color:var(--imp-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.imp-row .nm span{font-weight:500;color:var(--imp-mute)}
.imp-row .meta{font-size:11.5px;color:var(--imp-mute);font-family:var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.imp-row .why{font-size:12px;color:var(--imp-ink2)}.imp-row .why.bad{color:var(--imp-bad)}
.imp-row .amt{font-weight:700;font-variant-numeric:tabular-nums;color:var(--imp-ink);white-space:nowrap}
.imp-chip{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:6px;font-size:11px;font-weight:700;white-space:nowrap;background:var(--imp-sunk);color:var(--imp-ink2);border:1px solid var(--imp-line2);flex:none}
.imp-chip.ok{background:var(--imp-ok-soft);color:var(--imp-ok);border-color:transparent}
.imp-chip.warn{background:var(--imp-warn-soft);color:var(--imp-warn);border-color:transparent}
.imp-chip.bad{background:var(--imp-bad-soft);color:var(--imp-bad);border-color:transparent}
.imp-chip.brand{background:var(--imp-brand-soft);color:var(--imp-brand);border-color:transparent}
.imp-chip svg{width:12px;height:12px}
.imp-note{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:10px;background:var(--imp-sunk);border:1px solid var(--imp-line2);font-size:12.5px;color:var(--imp-ink2);line-height:1.5}
.imp-note svg{width:16px;height:16px;flex:none;margin-top:1px;color:var(--imp-mute)}
.imp-note.warn{background:var(--imp-warn-soft);border-color:rgba(184,115,51,.24)}.imp-note.warn svg{color:var(--imp-warn)}
.imp-note.bad{background:var(--imp-bad-soft);border-color:rgba(153,27,27,.18)}.imp-note.bad svg{color:var(--imp-bad)}
.imp-note.ok{background:var(--imp-ok-soft);border-color:rgba(45,106,46,.2)}.imp-note.ok svg{color:var(--imp-ok)}
.imp-note b{color:var(--imp-ink)}
.imp-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.imp-tools .sp{flex:1}
.imp-seg{display:inline-flex;padding:2px;border-radius:9px;background:var(--imp-sunk);border:1px solid var(--imp-line2)}
.imp-seg button{height:28px;padding:0 11px;border:0;border-radius:7px;background:transparent;font-family:inherit;font-size:12px;font-weight:600;color:var(--imp-mute);cursor:pointer}
.imp-seg button.on{background:#fff;color:var(--imp-ink);box-shadow:0 1px 2px rgba(26,28,25,.10)}
.imp-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:26px 18px;border:1.5px dashed rgba(95,100,120,.35);border-radius:12px;background:var(--imp-sunk);color:var(--imp-ink2);cursor:pointer;transition:border-color .15s,background .15s}
.imp-drop:hover,.imp-drop.over{border-color:var(--imp-brand);background:var(--imp-brand-soft)}
.imp-drop svg{width:22px;height:22px;color:var(--imp-brand)}
.imp-drop b{font-size:14px;color:var(--imp-ink)}
.imp-drop small{font-size:12px;color:var(--imp-mute)}
.imp-drop.has{border-style:solid;border-color:rgba(45,106,46,.4);background:var(--imp-ok-soft)}
.imp-drop.has svg{color:var(--imp-ok)}
.imp-drop input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.imp-kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.imp-kv>div{border:1px solid var(--imp-line);border-radius:10px;padding:10px 12px;background:#fff;display:flex;flex-direction:column;gap:2px;min-width:0}
.imp-kv small{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--imp-mute)}
.imp-kv b{font-size:16px;font-weight:700;color:var(--imp-ink);font-variant-numeric:tabular-nums}
.imp-kv b.bad{color:var(--imp-bad)}.imp-kv b.ok{color:var(--imp-ok)}.imp-kv b.warn{color:var(--imp-warn)}
@media (max-width:560px){
  .imp-ov{padding:0;align-items:flex-end}
  .imp,.imp.sm,.imp.lg,.imp.xl{width:100%;max-height:92vh;max-height:92dvh;border-radius:16px 16px 0 0;border-bottom:0;transform:translateY(24px)}
  .imp-hd{padding:16px 14px 14px 18px}
  .imp-sum,.imp-bd,.imp-steps{padding-left:18px;padding-right:18px}
  .imp-ft{flex-wrap:wrap;padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px))}
  .imp-hint{flex-basis:100%}
  .imp-btns{width:100%}
  .imp-btns .imp-btn{flex:1;height:44px}
  .imp-x{width:38px;height:38px}
  .imp-steps b{max-width:16px}
}
@media (prefers-reduced-motion:reduce){.imp-ov,.imp{transition:none}}
/* [20 Oct 2026, imp] older import bodies still carry inline "glass" boxes — flatten them inside the shared shell */
.imp-bd [style*="var(--glass)"]{background:#fff!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important;border-color:var(--imp-line)!important}
/* [20 Oct 2026, imp] EasyLease month import + its undo window brought onto the shared import pop-up look */
.eli-overlay{z-index:9500;background:rgba(26,28,25,.34);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.eli-scope .m{border-radius:16px;border-color:rgba(95,100,120,.20);box-shadow:0 2px 6px rgba(26,28,25,.05),0 30px 70px -28px rgba(26,28,25,.40)}
.eli-scope .eltile{width:36px;height:36px;border-radius:10px;background:rgba(139,26,26,.075);color:#8B1A1A}
.eli-scope .eltile svg{width:18px;height:18px}
.eli-scope .x{width:32px;height:32px;border-radius:9px;border-color:transparent;background:transparent;color:#7b726d;padding:0}
.eli-scope .x:hover{background:#f5f6fa;color:#1a1c19;border-color:rgba(95,100,120,.11)}
.eli-scope .st.done{color:#2d6a2e}.eli-scope .st.done i{background:rgba(45,106,46,.09);border-color:transparent;color:#2d6a2e}
.eli-scope .btn-p,.eli-scope .btn-g{height:38px;padding:0 16px;border-radius:10px;font-weight:600;justify-content:center;box-shadow:none}
.eli-scope .btn-g{border-color:rgba(95,100,120,.20);color:#1a1c19}
.eli-scope .btn-p:hover{background:#731515;border-color:#731515;box-shadow:none}
.eli-scope .btn-p:active,.eli-scope .btn-g:active{transform:none}
.eli-scope .drop{border-color:rgba(95,100,120,.35);background:#f5f6fa}
@media (max-width:560px){.eli-overlay{padding:0;align-items:flex-end}.eli-scope{width:100%}.eli-scope .m{width:100%;max-width:100%;max-height:92vh;border-radius:16px 16px 0 0}.eli-scope .btn-p,.eli-scope .btn-g{height:44px}}
/* [20 Oct 2026, imp] pop-ups with a dropdown inside (rider picker) let it spill over the card edge */
.imp.imp-open{overflow:visible}.imp.imp-open .imp-bd{overflow:visible}.imp.imp-open .imp-ft{border-radius:0 0 16px 16px}
/* [20 Oct 2026, imp] rider day note: same dim, close button and corners as the import pop-ups */
#rn-overlay.rn-open{background:rgba(26,28,25,.34)!important;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
#rn-overlay .rn-panel{border:1px solid rgba(95,100,120,.20);box-shadow:0 2px 6px rgba(26,28,25,.05),0 30px 70px -28px rgba(26,28,25,.40)!important}
#rn-overlay .rn-px{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:9px;border:1px solid transparent;color:#7b726d;padding:0}
#rn-overlay .rn-px:hover{background:#f5f6fa;color:#1a1c19;border-color:rgba(95,100,120,.11)}
/* [20 Oct 2026, imp] tokens also on :root so .imp-btn / .imp-x / .imp-chip work in the few import windows that keep their own frame */
:root{--imp-brand:#8B1A1A;--imp-brand-hover:#731515;--imp-brand-soft:rgba(139,26,26,.075);--imp-ink:#1a1c19;--imp-ink2:#45454d;--imp-mute:#71717b;--imp-line:rgba(95,100,120,.20);--imp-line2:rgba(95,100,120,.11);--imp-sunk:#f5f6fa;--imp-ok:#2d6a2e;--imp-ok-soft:rgba(45,106,46,.09);--imp-warn:#8a5a14;--imp-warn-soft:rgba(184,115,51,.11);--imp-bad:#991b1b;--imp-bad-soft:rgba(153,27,27,.075)}
.imp-drop.has{padding:14px 18px}
@media (max-width:560px){
  .eli-scope .hd{flex-wrap:wrap;position:relative;padding-right:56px}
  .eli-scope .hd .stepper{order:3;flex-basis:100%;margin-left:0}
  .eli-scope .hd .x{position:absolute;top:14px;right:14px;width:38px;height:38px}
  #rn-overlay .rn-save{min-height:44px}
}
@media (max-width:560px){
  .eli-scope .ft{flex-wrap:wrap;gap:8px}
  .eli-scope .ft>div:first-child{flex-basis:100%}
  .eli-scope .ft .btn-p,.eli-scope .ft .btn-g{flex:1;margin-left:0!important}
}

/* ═══════════════════════════════════════════════════════════════════
   [20 Oct 2026] PORTAL LIGHT — the same light the public website (helloodelivery.com) and the client
   dashboard use. Matti: "our public website looks better, it has a better background colour, this one
   looks dull". Measured causes: flat warm cream page (#fafaf5) with the ambient glows at 1–2% (invisible),
   75%-white glass cards on it (almost no edge), labels at 40% opacity, warm-brown greys. The website:
   white → cool mist page, soft maroon glows, solid white cards with a crisp cool line + soft shadow,
   solid cool greys. Token-level, so every page picks it up. The rider portal keeps its own look.
   ═══════════════════════════════════════════════════════════════════ */
body:not(.rider-mode){   /* staff portal only — the rider app (body.rider-mode) keeps its own look */
  --bg:#f4f5f8;--s1:#eef0f4;--s2:#e5e7ed;--s3:#d9dce4;
  --b:rgba(20,20,40,.13);--b2:#e3e5eb;
  --text:#141416;--t2:#45454d;--t3:#71717b;--muted:#696973;
  --border:#e6e7ec;--line:#e9eaef;
  --glass:#ffffff;--glass-hover:#ffffff;--glass-border:#e6e7ec;--glass-border-light:#eef0f3;
  --font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;   /* the website + client dashboard face (already loaded in index.html) */
  --shadow-sm:0 1px 2px rgba(20,20,22,.05);
  --shadow-md:0 1px 2px rgba(20,20,22,.05),0 4px 12px -8px rgba(20,20,22,.16);
  --shadow-lg:0 1px 2px rgba(20,20,22,.05),0 10px 24px -16px rgba(20,20,22,.24);
}
/* page: cool mist with a white top fade and one soft maroon glow top-right (stays put while the page scrolls).
   [20 Oct 2026] top-left glow removed — Matti: "i'm hating that tint on top left side" */
body:not(.rider-mode) .main{
  background-color:#f4f5f8;
  background-image:
    radial-gradient(closest-side, rgba(128,37,32,.08), rgba(128,37,32,0)),
    linear-gradient(180deg, #ffffff 0, rgba(255,255,255,0) 380px);
  background-size:760px 520px, 100% 100%;
  background-position:calc(100% + 260px) -230px, 0 0;
  background-repeat:no-repeat;
}
.main::before{display:none}
body:not(.rider-mode) .sidebar{background:#fbfbfc !important;border-right:1px solid #e6e7ec !important;box-shadow:none !important}
body:not(.rider-mode) .topbar{background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(160%) blur(12px);backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid #e6e7ec}
/* cards: solid white, crisp cool edge, soft shadow — no frosted glass over a flat page */
body:not(.rider-mode) .dash-kpi,body:not(.rider-mode) .dash-section,body:not(.rider-mode) .tbl,body:not(.rider-mode) .glass{
  background:#fff !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  border-color:#e6e7ec !important;box-shadow:0 1px 2px rgba(20,20,22,.05),0 4px 12px -8px rgba(20,20,22,.16) !important}
body:not(.rider-mode) .dash-kpi:hover,body:not(.rider-mode) .dash-section:hover{box-shadow:0 1px 2px rgba(20,20,22,.05),0 10px 24px -16px rgba(20,20,22,.24) !important}
::-webkit-scrollbar-thumb{background:#d6d9e0}
::-webkit-scrollbar-thumb:hover{background:#a9adb8}

/* ═══════════════════════════════════════════════════════════════════
   [20 Oct 2026] EVERY POP-UP, ONE LOOK — Matti: "keep clicking everywhere ... lots of modals are ugly, incomplete".
   1. Confirm window (helloo_confirm / glassConfirm / glassAlert -> _impAsk): the import window at small size.
   2. Drawn close X (.ic-x) replaces typed ✕ / × glyphs — no quotes in the markup, so it drops into any JS string.
   3. Static windows (.overlay > .modal in index.html) get the same frame, header, close and footer.
   Rider app (body.rider-mode) is left exactly as it was.
   ═══════════════════════════════════════════════════════════════════ */
.imp-cf .imp-bd{padding:14px 22px 18px}
.imp-msg{margin:0;white-space:pre-line;font-size:13.5px;line-height:1.6;color:var(--imp-ink2);overflow-wrap:anywhere}
.imp-in{display:block;width:100%;box-sizing:border-box;height:40px;margin:2px 0 0;padding:0 12px;border-radius:10px;border:1px solid var(--imp-line);background:#fff;color:var(--imp-ink);font:inherit;font-size:13.5px;outline:none;transition:border-color .15s,box-shadow .15s}
.imp-in:focus{border-color:var(--imp-brand);box-shadow:0 0 0 3px var(--imp-brand-soft)}
.imp-cf .imp-hint:empty{display:none}
.ic-x{display:inline-block;flex:none;width:.72em;height:.72em;min-width:10px;min-height:10px;vertical-align:-.08em;background-color:currentColor;pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat}
body:not(.rider-mode) .overlay{background:rgba(26,28,25,.34);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);padding:24px;box-sizing:border-box}
body:not(.rider-mode) .modal{border:1px solid rgba(95,100,120,.20) !important;border-radius:16px;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;box-shadow:0 2px 6px rgba(26,28,25,.05),0 30px 70px -28px rgba(26,28,25,.40) !important;max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);max-width:100%;color:#1a1c19}
body:not(.rider-mode) .modal-hd{padding:16px 16px 14px 22px;border-bottom:1px solid rgba(95,100,120,.11);gap:12px}
body:not(.rider-mode) .modal-title{font-size:16px;font-weight:700;letter-spacing:-.2px;line-height:1.25;color:#1a1c19}
body:not(.rider-mode) .modal-close{flex:none;width:32px;height:32px;padding:0;border-radius:9px;border:1px solid transparent;background:transparent;color:#71717b;font-size:16px;line-height:1}
body:not(.rider-mode) .modal-close:hover{background:#f5f6fa;color:#1a1c19;border-color:rgba(95,100,120,.11)}
body:not(.rider-mode) .modal-close:focus-visible{outline:2px solid rgba(139,26,26,.45);outline-offset:2px}
body:not(.rider-mode) .modal-body{padding:16px 22px 18px}
body:not(.rider-mode) .modal-ft{padding:14px 18px 14px 22px;border-top:1px solid rgba(95,100,120,.11);background:#fff}
@media (max-width:560px){ body:not(.rider-mode) .overlay{padding:12px} }

/* [20 Oct 2026, imp] buttons inside windows: flat like the pop-up buttons (solid maroon action, white outlined
   secondary) instead of the frosted 3D glass pills. Page-level glass buttons are not touched. */
body:not(.rider-mode) :is(.modal,.imp) :is(.btn-glass-green,.btn-glass-maroon,.btn-glass-blue,.btn-glass-neutral,.btn-glass-amber,.btn-glass-red){-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border-radius:10px;min-height:36px;transition:background .15s,border-color .15s,color .15s}
body:not(.rider-mode) :is(.modal,.imp) :is(.btn-glass-green,.btn-glass-maroon,.btn-glass-blue,.btn-glass-neutral,.btn-glass-amber,.btn-glass-red):hover{transform:none;box-shadow:none}
body:not(.rider-mode) :is(.modal,.imp) .btn-glass-maroon{background:#8B1A1A;border-color:#8B1A1A;color:#fff}
body:not(.rider-mode) :is(.modal,.imp) .btn-glass-maroon:hover{background:#731515;border-color:#731515}
body:not(.rider-mode) :is(.modal,.imp) .btn-glass-red{background:#991b1b;border-color:#991b1b;color:#fff}
body:not(.rider-mode) :is(.modal,.imp) .btn-glass-red:hover{background:#7f1616;border-color:#7f1616}
body:not(.rider-mode) :is(.modal,.imp) .btn-glass-neutral{background:#fff;border-color:rgba(95,100,120,.20);color:#1a1c19}
body:not(.rider-mode) :is(.modal,.imp) .btn-glass-neutral:hover{background:#f5f6fa;border-color:rgba(95,100,120,.34)}
body:not(.rider-mode) :is(.modal,.imp) .btn-glass-neutral.active{background:rgba(139,26,26,.075);border-color:rgba(139,26,26,.32);color:#8B1A1A}
body:not(.rider-mode) :is(.modal,.imp) .btn-glass-green{background:rgba(45,106,46,.09);border-color:rgba(45,106,46,.28);color:#1f4a20}
body:not(.rider-mode) :is(.modal,.imp) .btn-glass-green:hover{background:rgba(45,106,46,.15)}
body:not(.rider-mode) :is(.modal,.imp) .btn-glass-amber{background:rgba(184,115,51,.11);border-color:rgba(184,115,51,.28);color:#8a5a14}
body:not(.rider-mode) :is(.modal,.imp) .btn-glass-blue{background:#fff;border-color:rgba(24,95,165,.28);color:#185fa5}

/* [20 Oct 2026 design batch 2] ONE main button. The page-header "+ New / + Add" buttons were sage green on
   Contracts, Fines, SIM Cards, Users & Access and Settlement while every other page used filled maroon
   ("+ New invoice", "+ Add bike"). Header buttons in green now take that same maroon; the light-blue header
   button (Users › Attendance) becomes the plain white secondary. Modals keep their own button rules. */
.page-header .btn-glass-green{
  height:36px;padding:0 15px;border-radius:10px;border:0;
  background:#8B1A1A;color:#fff;font-size:13px;font-weight:600;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:0 1px 2px rgba(139,26,26,.2);
  transition:filter .15s,box-shadow .15s,transform .1s;
}
.page-header .btn-glass-green:hover{transform:none;filter:brightness(1.08);box-shadow:0 4px 12px rgba(139,26,26,.28);}
.page-header .btn-glass-green:active{transform:scale(.97);}
.page-header .btn-glass-blue{
  border:1px solid rgba(95,100,120,.18);background:#fff;color:var(--text);
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.page-header .btn-glass-blue:hover{transform:none;border-color:rgba(95,100,120,.3);box-shadow:0 2px 8px rgba(0,0,0,.06);}