/* KlezcarPay — app.css (Phase 3.9) — Mobile-first, brand #1572E8 */

/* ── Design tokens ──────────────────────────────────────── */
:root {
  --brand:      #1572E8;
  --brand-dk:   #0f5ec4;
  --brand-lt:   #e8f0fd;
  --success:    #16a34a;
  --success-lt: #dcfce7;
  --danger:     #dc2626;
  --danger-lt:  #fee2e2;
  --warn:       #d97706;
  --warn-lt:    #fef3c7;
  --teal:       #0891b2;
  --teal-lt:    #cffafe;
  --grey-1:     #f8fafc;
  --grey-2:     #e2e8f0;
  --grey-3:     #94a3b8;
  --grey-4:     #64748b;
  --grey-5:     #1e293b;
  --white:      #ffffff;
  --radius:     12px;
  --radius-sm:  8px;
  --shadow:     0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:  0 4px 12px rgba(0,0,0,.10);
  --nav-h:      64px;
  --top-h:      52px;
  font-size:    16px;
}

/* ── Reset ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--grey-1);color:var(--grey-5);min-height:100dvh;overscroll-behavior-y:none;}
a{color:var(--brand);text-decoration:none;}
img{max-width:100%;height:auto;display:block;}
button{cursor:pointer;font-family:inherit;}
input,select,textarea{font-family:inherit;}

/* ── Shell ───────────────────────────────────────────────── */
.shell{display:flex;flex-direction:column;min-height:100dvh;max-width:430px;margin:0 auto;background:var(--white);}
.content{flex:1;padding:16px;padding-bottom:calc(var(--nav-h) + 16px);overflow-x:hidden;}

/* ── Topbar ──────────────────────────────────────────────── */
.topbar{height:var(--top-h);background:var(--brand);display:flex;align-items:center;justify-content:space-between;padding:0 16px;position:sticky;top:0;z-index:100;}
.topbar-logo{font-size:17px;font-weight:800;color:var(--white);letter-spacing:-.3px;}
.topbar-user{display:flex;align-items:center;gap:8px;}
.topbar-name{font-size:13px;color:rgba(255,255,255,.85);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.topbar-plate{font-size:14px;font-weight:700;color:var(--white);font-family:monospace;letter-spacing:.5px;}

/* ── Bottom nav ──────────────────────────────────────────── */
.bottomnav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;height:var(--nav-h);background:var(--white);border-top:1px solid var(--grey-2);display:flex;z-index:100;padding-bottom:env(safe-area-inset-bottom,0);}
.bnav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10px;font-weight:500;color:var(--grey-3);text-decoration:none;padding:8px 4px;transition:color .15s;border:none;background:none;}
.bnav-item.active,.bnav-item:hover{color:var(--brand);}
.bnav-icon{width:22px;height:22px;stroke:currentColor;}
.bnav-icon-wrap{position:relative;display:inline-flex;}
.badge-dot{position:absolute;top:-3px;right:-3px;width:8px;height:8px;border-radius:50%;background:var(--brand);border:2px solid var(--white);}
.badge-dot-red{background:var(--danger);}

/* ── Cards ───────────────────────────────────────────────── */
.card{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;margin-bottom:12px;border:1px solid var(--grey-2);}
.card-sm{padding:12px 14px;}
.card-title{font-size:13px;font-weight:600;color:var(--grey-4);text-transform:uppercase;letter-spacing:.4px;margin-bottom:12px;}

/* ── KPI grid ────────────────────────────────────────────── */
.kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;}
.kpi-card{background:var(--white);border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:12px 14px;border:1px solid var(--grey-2);}
.kpi-label{font-size:11px;font-weight:500;color:var(--grey-3);text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px;}
.kpi-value{font-size:24px;font-weight:800;color:var(--grey-5);line-height:1;}
.kpi-unit{font-size:14px;font-weight:500;color:var(--grey-3);margin-right:2px;}

/* ── Pills ───────────────────────────────────────────────── */
.pill{display:inline-flex;align-items:center;font-size:11px;font-weight:600;border-radius:100px;padding:3px 10px;white-space:nowrap;}
.pill-paid{background:var(--success-lt);color:var(--success);}
.pill-unpaid{background:var(--danger-lt);color:var(--danger);}
.pill-warn{background:var(--warn-lt);color:var(--warn);}
.pill-suspend{background:var(--danger-lt);color:var(--danger);}
.pill-brand{background:var(--brand-lt);color:var(--brand);}
.pill-teal{background:var(--teal-lt);color:var(--teal);}
.pill-grey{background:var(--grey-2);color:var(--grey-4);}
.pill-danger{background:var(--danger-lt);color:var(--danger);}

/* ── Banners ─────────────────────────────────────────────── */
.banner{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--radius-sm);margin-bottom:10px;font-size:13px;line-height:1.5;}
.banner-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:3px;}
.banner-warn{background:var(--warn-lt);color:#92400e;}.banner-warn .banner-dot{background:var(--warn);}
.banner-error{background:var(--danger-lt);color:#991b1b;}.banner-error .banner-dot{background:var(--danger);}
.banner-success{background:var(--success-lt);color:#14532d;}.banner-success .banner-dot{background:var(--success);}
.banner-info{background:var(--brand-lt);color:#1e3a8a;}.banner-info .banner-dot{background:var(--brand);}

/* ── Vehicle rows ────────────────────────────────────────── */
.vehicle-row{display:flex;align-items:center;gap:10px;background:var(--white);border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:12px 14px;margin-bottom:8px;border:1px solid var(--grey-2);text-decoration:none;color:var(--grey-5);}
.plate-badge{background:var(--grey-5);color:var(--white);font-size:13px;font-weight:800;font-family:monospace;letter-spacing:1px;padding:5px 10px;border-radius:6px;white-space:nowrap;flex-shrink:0;}
.vehicle-info{flex:1;min-width:0;}
.vehicle-driver{font-size:14px;font-weight:600;color:var(--grey-5);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.vehicle-model{font-size:12px;color:var(--grey-3);margin-top:2px;}
.chevron{color:var(--grey-3);flex-shrink:0;}

/* ── Section headers ─────────────────────────────────────── */
.section-header{font-size:12px;font-weight:600;color:var(--grey-3);text-transform:uppercase;letter-spacing:.6px;margin:14px 0 8px;}

/* ── Chip tabs ───────────────────────────────────────────── */
.chip-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.chip-tabs::-webkit-scrollbar{display:none;}
.chip-tab{flex-shrink:0;font-size:13px;font-weight:500;padding:7px 14px;border-radius:100px;border:1.5px solid var(--grey-2);background:var(--white);color:var(--grey-4);cursor:pointer;transition:all .15s;}
.chip-tab.active,.chip-tab:hover{background:var(--brand);color:var(--white);border-color:var(--brand);}

/* ── History rows ────────────────────────────────────────── */
.history-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--grey-2);}
.history-row:last-child{border-bottom:none;}
.history-date{font-size:14px;font-weight:600;color:var(--grey-5);}
.history-time{font-size:12px;color:var(--grey-3);}
.history-amount{font-size:15px;font-weight:700;color:var(--success);margin-left:auto;flex-shrink:0;}
.history-amount-muted{color:var(--grey-3);}

/* ── Stats row ───────────────────────────────────────────── */
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px;}
.stat-item{background:var(--white);border-radius:var(--radius-sm);padding:10px;text-align:center;border:1px solid var(--grey-2);}
.stat-num{font-size:20px;font-weight:800;color:var(--grey-5);}
.stat-label{font-size:11px;color:var(--grey-3);margin-top:2px;}

/* ── QR display ──────────────────────────────────────────── */
.qr-frame{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--white);border-radius:var(--radius);border:2px solid var(--grey-2);padding:24px;margin-bottom:16px;position:relative;overflow:hidden;}
.qr-label{font-size:15px;font-weight:700;color:var(--grey-5);margin-top:16px;text-align:center;}
.qr-sub{font-size:12px;color:var(--grey-3);text-align:center;margin-top:4px;}
.qr-dim{opacity:.25;filter:grayscale(1);}
.qr-paid-overlay::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,.6);}
.qr-paid-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--success);color:var(--white);font-size:16px;font-weight:700;padding:10px 20px;border-radius:100px;z-index:2;white-space:nowrap;}

/* ── Income card ─────────────────────────────────────────── */
.income-card{background:linear-gradient(135deg,var(--brand),var(--brand-dk));color:var(--white);border-radius:var(--radius);padding:18px;margin-bottom:12px;}
.income-label{font-size:12px;font-weight:600;opacity:.8;text-transform:uppercase;letter-spacing:.4px;}
.income-value{font-size:32px;font-weight:800;margin:6px 0;line-height:1;}
.income-unit{font-size:18px;font-weight:600;}
.income-row{display:flex;justify-content:space-between;font-size:13px;opacity:.85;margin-top:6px;}

/* ── Maintenance items ───────────────────────────────────── */
.maint-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--grey-2);}
.maint-item:last-child{border-bottom:none;}
.maint-icon{font-size:22px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:8px;flex-shrink:0;}
.maint-icon.maint-ok{background:var(--success-lt);}
.maint-icon.maint-warn{background:var(--warn-lt);}
.maint-icon.maint-urgent,.maint-icon.maint-overdue{background:var(--danger-lt);}
.maint-name{font-size:14px;font-weight:600;color:var(--grey-5);}
.maint-due{font-size:12px;margin-top:2px;}
.maint-due-ok{color:var(--success);}
.maint-due-warn{color:var(--warn);}
.maint-due-urgent,.maint-due-overdue{color:var(--danger);font-weight:600;}

/* ── Calendar ────────────────────────────────────────────── */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;}
.cal-header{text-align:center;font-size:10px;font-weight:600;color:var(--grey-3);padding:4px 0;}
.cal-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:11px;border-radius:5px;}
.cal-empty{background:transparent;}
.cal-paid{background:var(--success-lt);color:var(--success);font-weight:600;}
.cal-unpaid{background:var(--danger-lt);color:var(--danger);font-weight:600;}
.cal-today{outline:2px solid var(--brand);outline-offset:-2px;}

/* ── Rate bar ────────────────────────────────────────────── */
.rate-bar-wrap{height:6px;background:var(--grey-2);border-radius:100px;overflow:hidden;}
.rate-bar-fill{height:100%;background:var(--success);border-radius:100px;transition:width .4s ease;}

/* ── Bar chart ───────────────────────────────────────────── */
.bar-chart{display:flex;flex-direction:column;gap:6px;}
.bar-row{display:flex;align-items:center;gap:8px;}
.bar-label{font-size:11px;color:var(--grey-3);width:22px;flex-shrink:0;text-align:right;}
.bar-track{flex:1;height:22px;background:var(--grey-1);border-radius:4px;overflow:hidden;}
.bar-fill{height:100%;background:var(--brand-lt);border-radius:4px;display:flex;align-items:center;padding-left:6px;font-size:11px;color:var(--brand);font-weight:600;transition:width .4s ease;min-width:4px;}

/* ── Forms ───────────────────────────────────────────────── */
.form-group{margin-bottom:14px;}
.form-label{display:block;font-size:13px;font-weight:600;color:var(--grey-4);margin-bottom:5px;}
.form-control{display:block;width:100%;padding:12px 14px;border:1.5px solid var(--grey-2);border-radius:var(--radius-sm);font-size:15px;color:var(--grey-5);background:var(--white);transition:border-color .15s;outline:none;-webkit-appearance:none;}
.form-control:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(21,114,232,.12);}

/* ── Buttons ─────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;padding:12px 20px;border-radius:var(--radius-sm);border:none;cursor:pointer;transition:background .15s,opacity .15s;text-decoration:none;}
.btn-submit{width:100%;min-height:50px;}
.btn-brand{background:var(--brand);color:var(--white);}
.btn-brand:hover{background:var(--brand-dk);}
.btn-outline{background:var(--white);color:var(--brand);border:1.5px solid var(--brand);}
.btn-ghost{background:var(--grey-2);color:var(--grey-5);}
.btn-sm{font-size:13px;padding:8px 14px;}
.btn:disabled{opacity:.5;cursor:not-allowed;}

/* ── Login page ──────────────────────────────────────────── */
.login-page{min-height:100dvh;display:flex;flex-direction:column;max-width:430px;margin:0 auto;}
.login-hero{background:var(--brand);padding:48px 24px 40px;display:flex;flex-direction:column;align-items:center;text-align:center;}
.login-logo{font-size:28px;font-weight:800;color:var(--white);letter-spacing:-.5px;}
.login-tagline{font-size:13px;color:rgba(255,255,255,.75);margin-top:6px;}
.login-sheet{background:var(--white);border-radius:20px 20px 0 0;margin-top:-16px;flex:1;padding:28px 24px 32px;}
.login-sheet h2{font-size:22px;font-weight:800;margin-bottom:24px;}

/* ── Suspension screen ───────────────────────────────────── */
.suspension-screen{text-align:center;padding:48px 20px;}
.suspension-icon{font-size:64px;margin-bottom:16px;}
.suspension-title{font-size:22px;font-weight:800;color:var(--danger);margin-bottom:12px;}
.suspension-msg{font-size:15px;color:var(--grey-4);line-height:1.6;}

/* ── Error page ──────────────────────────────────────────── */
.error-page{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100dvh;padding:32px 20px;text-align:center;}
.error-code{font-size:80px;font-weight:900;color:var(--grey-2);}
.error-title{font-size:24px;font-weight:700;color:var(--grey-5);margin-bottom:8px;}
.error-msg{font-size:15px;color:var(--grey-4);line-height:1.6;}

/* ── Driver registration steps ───────────────────────────── */
.steps-row{display:flex;align-items:center;justify-content:center;gap:0;}
.step-dot{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;}
.step-dot.done{background:var(--success);color:var(--white);}
.step-dot.current{background:var(--brand);color:var(--white);}
.step-dot.todo{background:var(--grey-2);color:var(--grey-3);}
.step-line{width:32px;height:2px;background:var(--grey-2);}
.step-line.done{background:var(--success);}

/* ── Utilities ───────────────────────────────────────────── */
.flex-between{display:flex;align-items:center;justify-content:space-between;}
.flex-center{display:flex;align-items:center;justify-content:center;}
.gap-8{gap:8px;}
.text-xs{font-size:11px;}
.text-sm{font-size:13px;}
.text-muted{color:var(--grey-3);}
.text-success{color:var(--success);}
.text-danger{color:var(--danger);}
.disabled-tab{opacity:.5;pointer-events:none;}

/* ── Responsive: wider screens ───────────────────────────── */
@media(min-width:480px){
  .bottomnav{left:50%;transform:translateX(-50%);}
  .shell{box-shadow:0 0 40px rgba(0,0,0,.08);}
}