:root{
  /* ── SURFACES — warm light paper layers ── */
  --bg:#fafaf5;--s1:#eeeee9;--s2:#e3e3de;--s3:#dadad5;
  --b:rgba(140,113,110,.25);--b2:rgba(140,113,110,.15);

  /* ── TEXT ── */
  --text:#1a1c19;--t2:#58413f;--t3:rgba(26,28,25,.4);
  --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(140,113,110,.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(140,113,110,.12);
  --glass-border-light:rgba(140,113,110,.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:#dadad5;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, .cp-card:hover,
.info-card:hover, .alert-item:hover, .attn-item:hover {
  transform: translateY(-2px) scale(1.008);
  box-shadow: 0 4px 16px rgba(26,28,25,.08), 0 1px 3px rgba(26,28,25,.04);
}
/* 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 */
.stat[onclick]:hover, .dash-kpi[onclick]:hover {
  box-shadow: 0 1px 0 rgba(0,0,0,.03) inset, 0 -1px 0 rgba(0,0,0,.03) inset, 0 12px 36px rgba(0,0,0,.06), 0 0 12px rgba(0,0,0,.02) !important;
  border-color: rgba(139,26,26,.2) !important;
}
.stat[onclick]:hover .stat-val { text-shadow: 0 0 3px currentColor; opacity:.95; }

/* ── 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;
}

/* ── 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(140,113,110,.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(40,20,80,.07) 0%, transparent 60%),
    radial-gradient(ellipse 900px 700px at 85% 75%, rgba(15,60,80,.05) 0%, transparent 55%),
    radial-gradient(ellipse 600px 500px at 50% 45%, rgba(var(--acc-rgb),.02) 0%, transparent 50%);
  pointer-events:none;}
.login-box{background:rgba(255,255,255,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(140,113,110,.12);border-radius:20px;padding:44px 40px;width:380px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.08),inset 0 .5px 0 rgba(255,255,255,.5);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-logo{font-size:36px;font-weight:800;color:#ff453a;margin-bottom:2px;letter-spacing:-1px;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:3px;}
.login-sub{font-size:13px;color:rgba(255,255,255,.45);margin-bottom:32px;letter-spacing:.18em;font-weight:500;text-transform:uppercase;}

.login-inp{width:100%;background:#fff;border:1px solid rgba(140,113,110,.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(140,113,110,.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:linear-gradient(135deg,#ff453a,#ff6b6b);color:#1a1c19;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 4px 16px rgba(255,69,58,.2);}
.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 32px rgba(255,69,58,.35),0 0 0 1px rgba(255,69,58,.15);transform:translateY(-2px);}
.login-btn:active{transform:scale(.97) translateY(0);transition-duration:.08s;box-shadow:0 2px 8px rgba(255,69,58,.2);}
.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(140,113,110,.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:rgba(255,255,255,.98);border:1px solid rgba(140,113,110,.15);border-radius:12px;overflow:hidden;z-index:100;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(140,113,110,.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;}
.doc-upload-card{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 12px;background:rgba(0,0,0,.01);border:2px dashed rgba(140,113,110,.15);border-radius:14px;cursor:pointer;transition:all .3s cubic-bezier(.2,1,.3,1);position:relative;overflow:hidden;min-height:120px;}
.doc-upload-card:hover{background:rgba(0,0,0,.02);border-color:rgba(140,113,110,.2);transform:scale(1.02);}
.doc-upload-card:active{transform:scale(.97);}
.doc-upload-card.uploaded{border-style:solid;border-color:rgba(48,209,88,.3);background:rgba(48,209,88,.05);padding:0;}
.doc-upload-card.uploaded > div:not(.doc-preview):not(.doc-check):not(.doc-name-overlay){display:none !important;}
.doc-upload-card .doc-preview{display:none;width:100%;height:100%;object-fit:cover;border-radius:12px;}
.doc-upload-card.uploaded .doc-preview{display:block;}
.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:2;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;bottom:0;left:0;right:0;padding:6px 8px;background:linear-gradient(transparent,rgba(0,0,0,.5));border-radius:0 0 12px 12px;font-size:9px;color:#1a1c19;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.doc-upload-card.uploaded .doc-name-overlay{display:block;}
@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);}

/* TOPBAR */
.topbar{height:48px;min-height:48px;background:#fff;border-bottom:1px solid rgba(140,113,110,.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(140,113,110,.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(140,113,110,.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(140,113,110,.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(140,113,110,.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(140,113,110,.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:#dadad5;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(140,113,110,.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(140,113,110,.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:.7;}.nav-icon svg{width:16px;height:16px;}.nav-item.active .nav-icon,.nav-item:hover .nav-icon{opacity:1;}
.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(140,113,110,.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:color .1s ease;
  letter-spacing:-.01em;
  position:relative;
}
.nav-item .nav-icon svg{shape-rendering:geometricPrecision;}
.nav-item:hover{
  color:#2a2826;
  background:rgba(26,28,25,.05);
  transition:none;
}
.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;}
/* Active page — anchored heavy presence; left maroon bar is the "you are here" */
.nav-item.active{
  font-weight:600;color:var(--acc);
  background:rgba(139,26,26,.06);
  box-shadow:inset 2.5px 0 0 var(--acc);
}
/* Hover on active page — only lift, no zoom (you're already here) */
/* Hover wins on the current page so it still zooms in */
.nav-item.active:hover{
  background:rgba(139,26,26,.09);
  box-shadow:inset 2.5px 0 0 var(--acc);
  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(139,26,26,.12);}
/* 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:#dadad5;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(140,113,110,.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;
}

.stat[onclick]:hover, .dash-kpi[onclick]:hover {
  background: rgba(255,255,255,.9) !important;
  border-color: rgba(139,26,26,0.15) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.8) !important;
  transform: translateY(-3px) scale(1.01) !important;
}

.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(140,113,110,.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);}

.stat-card{cursor:pointer;transition:all .25s var(--spring-snappy);}
.dash-kpi.stat-card{border-color:rgba(140,113,110,.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{transform:translateY(-2px) scale(1.02);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);background:linear-gradient(180deg,rgba(232,243,255,.6) 0%,rgba(210,228,255,.4) 100%);}
.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:#f4f4ef;border:1px solid rgba(140,113,110,.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(140,113,110,.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(140,113,110,.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(140,113,110,.08);}
.btn-p{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;background:#8B1A1A;color:#1a1c19;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(140,113,110,.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(140,113,110,.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(238,238,233,.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(140,113,110,.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(140,113,110,.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:#f5f5f0;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(140,113,110,.1);white-space:nowrap;}
tbody tr{border-bottom:1px solid rgba(140,113,110,.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(140,113,110,.03) !important;box-shadow:0 1px 4px rgba(0,0,0,.04),inset 0 0 0 1px rgba(140,113,110,.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:#f4f4ef;border:1px solid rgba(140,113,110,.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(140,113,110,.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(140,113,110,.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(140,113,110,.06);color:#3a2e2c;border:1px solid rgba(140,113,110,.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(140,113,110,.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;}
.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(140,113,110,.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(140,113,110,.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(140,113,110,.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(140,113,110,.12) !important;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.08),0 0 0 1px rgba(140,113,110,.08),inset 0 1px 0 rgba(255,255,255,.7);width:540px;max-width:95vw;max-height:92vh;overflow-y:auto;animation:modalIn .22s cubic-bezier(.28,1,.52,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(140,113,110,.1) !important;}
.modal-lg{width:720px;}
@keyframes modalIn{
  from{opacity:0}
  to{opacity:1}
}
.modal-hd{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid rgba(140,113,110,.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(140,113,110,.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(140,113,110,.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(140,113,110,.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(140,113,110,.15);border-radius:14px;padding:12px 20px;font-size:13px;font-weight:600;display:none;align-items:center;gap:8px;z-index:300;
  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:18px;right:18px;z-index:9998;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(140,113,110,.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(140,113,110,.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(140,113,110,.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(140,113,110,.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(140,113,110,.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(140,113,110,.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(140,113,110,.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(140,113,110,.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(140,113,110,.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(140,113,110,.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(140,113,110,.12);}
.cp-topbar-actions{display:flex;gap:8px;}
.cp-hero{display:flex;align-items:center;justify-content:space-between;padding:28px 28px 20px;border-bottom:1px solid rgba(140,113,110,.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-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(140,113,110,.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:24px;font-weight:800;letter-spacing:-.5px;margin-bottom:8px;}
.cp-hero-meta{display:flex;align-items:center;flex-wrap:wrap;}
.cp-hero-stats{display:flex;border:1px solid rgba(140,113,110,.12);border-radius:14px;overflow:hidden;background:rgba(255,255,255,.75);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 3px rgba(0,0,0,.04),inset 0 1px 0 rgba(255,255,255,.7);}
.cp-hstat{padding:14px 22px;text-align:center;border-right:1px solid var(--glass-border);}
.cp-hstat:last-child{border-right:none;}
.cp-hstat-val{font-size:20px;font-weight:800;letter-spacing:-.5px;margin-bottom:3px;}
.cp-hstat-label{font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.06em;}
.cp-body{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;padding:20px 28px;}
.cp-col{}
.cp-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: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);}
.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{transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,.06);}
.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(140,113,110,.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(140,113,110,.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(140,113,110,.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(140,113,110,.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:#fafaf5;
  border-color:rgba(140,113,110,.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(140,113,110,.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(140,113,110,.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(140,113,110,.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:#fafaf5;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(140,113,110,.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(140,113,110,.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(140,113,110,.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(140,113,110,.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(140,113,110,.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(140,113,110,.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:#000;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(140,113,110,.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(140,113,110,.08);padding:1px 5px;border-radius:4px;font-family:var(--mono);font-size:12px;}

.ai-msg-body{background:#f5f5f0;border:1px solid rgba(140,113,110,.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(140,113,110,.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(140,113,110,.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(140,113,110,.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(140,113,110,.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(140,113,110,.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(140,113,110,.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(140,113,110,.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(140,113,110,.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(140,113,110,.1);background:#f5f5f0;}
.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(140,113,110,.08);}
.ais-inp{flex:1;background:rgba(140,113,110,.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 ──────────────────────────────────── */

.overlay.open .modal{animation:modalIn .25s ease;}
/* 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 */
.cp-card:hover,.rp-card:hover,.info-card:hover{
  background:rgba(0,0,0,.02);border-color:rgba(140,113,110,.12);box-shadow:inset 0 .5px 0 rgba(0,0,0,.02),0 4px 16px rgba(0,0,0,.15);
}

/* 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(140,113,110,.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;}
.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(140,113,110,.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(140,113,110,.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(140,113,110,.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(255,255,255,.18) !important;border-radius:4px !important;background:#f5f5f0 !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:#f5f5f0 !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);}
.bulk-bar{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(120%);
  background:rgba(255,255,255,.98);border:1px solid rgba(140,113,110,.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(140,113,110,.06);
  z-index:300;transition:transform .25s cubic-bezier(.28,1.2,.52,1);
  min-width:520px;max-width:720px;}
.bulk-bar.visible{transform:translateX(-50%) translateY(0);}
.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(140,113,110,.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: 99;
}
#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: 100 !important;
    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; }
  
  .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: none !important;
  }

  #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(140,113,110,.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: flex; }
  .main { padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important; }
  #map-zoom-btns { display: none !important; }
}

/* ── 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(140,113,110,.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(140,113,110,.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:#000 !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:#000 !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:#000 !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(140,113,110,.18);
  background:linear-gradient(180deg,rgba(255,255,255,.85) 0%,rgba(248,247,243,.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(140,113,110,.32);
  background:linear-gradient(180deg,rgba(248,247,243,.95) 0%,rgba(240,238,233,.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(140,113,110,.16);background:rgba(140,113,110,.06);color:#58413f}
.pm-idle:hover,.pm-idle.active{background:rgba(140,113,110,.1);border-color:rgba(140,113,110,.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(140,113,110,.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)}

/* ── 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(245,245,242,.85) 0%,rgba(230,230,225,.6) 100%);color:#666;border:1px solid rgba(140,113,110,.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(140,113,110,.18);
  background:linear-gradient(180deg,rgba(255,255,255,.85) 0%,rgba(248,247,243,.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);
}

/* PURPLE variant — Filter */
.sal-toggle-purple:hover, .sal-toggle-purple.active{
  border-color:rgba(191,90,242,.28);
  background:linear-gradient(180deg,rgba(241,140,255,.18) 0%,rgba(191,90,242,.10) 100%);
  color:#bf5af2;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(0,0,0,.04),0 8px 20px rgba(191,90,242,.22);
}

/* 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(140,113,110,.18);
  background:linear-gradient(180deg,rgba(255,255,255,.85) 0%,rgba(248,247,243,.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 inside support tab — render at correct optical size + colour */
/* AUDIT FIX May 7 2026 — self-hosted woff2 in /public/fonts/ to eliminate Google Fonts dependency. Was: external Google Fonts CSS link in index.html, broke offline / on slow networks. */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  font-display: fallback; /* AUDIT FIX May 7 2026 — was 'block' which left icons blank forever if woff2 failed to load (no SW caching, browser cache evicted on slow networks). 'fallback' = 100ms block then graceful text fallback. */
  src: url('/fonts/MaterialSymbolsOutlined.woff2?v=1') format('woff2');
}
#page-rider-portal .rv8-msi{
  font-family: 'Material Symbols Outlined';
  font-weight: 400;
  font-style: normal;
  font-size: 22px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
#page-rider-portal .rv8-tile-icon .rv8-msi{ font-size: 22px; }
#page-rider-portal .rv8-kb-msi{ font-size: 20px; 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; }
/* AUDIT FIX May 7 2026 — removed dead `> svg:first-child` rule; first child is now a Material Symbols <span>, not svg. Replaced with explicit icon-span sizing below. */
#page-rider-portal .rv8-kb-row > span{ flex: 1; font-weight: 500; }
/* AUDIT FIX May 7 2026 — was: rule above stretched the icon span to ~50% width because both icon and label are now <span>. This override pins icon to natural width. Higher specificity (.rv8-kb-row > span.rv8-msi) so it wins over the parent rule. */
#page-rider-portal .rv8-kb-row > span.rv8-msi{ flex: 0 0 auto; font-weight: 400; }
#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);
}

/* ═══ Payslip card v3 — period in title, NET AMOUNT label ═══ */
#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;
}
#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, #FFD700 0%, #B8860B 100%);
  box-shadow: 0 2px 8px rgba(184, 134, 11, 0.25);
}
#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{
  position: absolute;
  bottom: 0;
  right: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #1a1c1e;
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
#page-rider-portal .rv8-prof-verified svg{
  width: 18px;
  height: 18px;
}

#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;
  opacity: 0.4;
  position: relative;
  z-index: 1;
}
#page-rider-portal .rv8-lifetime-stat-v4{
  background: #fff;
  border: .5px solid rgba(140, 113, 110, 0.15);
  border-radius: 10px;
  padding: 12px;
}
#page-rider-portal .rv8-lifetime-icon{
  width: 22px;
  height: 22px;
  color: #74777f;
  margin-bottom: 4px;
}
#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: 18px;
  font-weight: 700;
  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 12px -2px rgba(184, 134, 11, 0.20) !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(140,113,110,.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(140,113,110,.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(140,113,110,.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(140,113,110,.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(140,113,110,.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(140,113,110,.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: #fafaf5;
  border: 1px solid rgba(140,113,110,.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(140,113,110,.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: #fafaf5;
  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(140,113,110,.18);
}
.cp-doc-side-thumb.has-file {
  background: #f8f8f5;
  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(140,113,110,.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: #f1efe8;
  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: #fafaf5;
  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(140,113,110,.18);
}
.cp-doc-thumb.has-file {
  background: #f8f8f5;
  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(140,113,110,.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(140,113,110,.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(140,113,110,.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(140,113,110,.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(140,113,110,.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(140,113,110,.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(140,113,110,.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(140,113,110,.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(140,113,110,.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;}
}