/* RideCabby — App CSS v1.1 */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --c-brand:#0B1220;--c-accent:#F5A623;--c-primary:#2563EB;
  --c-bg:#F3F4F8;--c-surface:#FFFFFF;--c-border:#E2E6EF;
  --c-text:#0B1220;--c-muted:#6B7280;--c-success:#16A34A;
  --c-danger:#DC2626;--c-warning:#D97706;--c-info:#2563EB;
  --radius:10px;--radius-sm:6px;--shadow:0 1px 6px rgba(0,0,0,.07);
  --sidebar-w:240px;
}
html,body{height:100%}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:15px;color:var(--c-text);background:var(--c-bg);line-height:1.55}

/* ── AUTH PAGES ─────────────────────────────────────────── */
.auth-page{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#0B1220 0%,#1e3a5f 100%);padding:20px}
.auth-container{width:100%;max-width:440px}
.auth-brand{text-align:center;margin-bottom:28px}
.auth-logo-icon{font-size:48px;line-height:1}
.auth-logo-text{font-size:28px;font-weight:800;color:#fff;letter-spacing:-.5px;margin-top:8px}
.auth-tagline{font-size:14px;color:rgba(255,255,255,.55);margin-top:4px}
.auth-card{background:#fff;border-radius:16px;padding:36px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.auth-card h1{font-size:22px;font-weight:700;margin-bottom:24px;color:var(--c-text)}
.auth-link{text-align:center;margin-top:20px;font-size:14px;color:var(--c-muted)}
.auth-link a{color:var(--c-primary);font-weight:600;text-decoration:none}
.auth-link a:hover{text-decoration:underline}

/* ── SIDEBAR LAYOUT ─────────────────────────────────────── */
.driver-portal{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar-w);background:var(--c-brand);display:flex;flex-direction:column;position:fixed;top:0;left:0;height:100vh;z-index:200;transition:transform .25s}
.sidebar-brand{display:flex;align-items:center;gap:10px;padding:22px 20px 18px;border-bottom:1px solid rgba(255,255,255,.08)}
.sidebar-icon{font-size:24px}
.sidebar-title{font-size:19px;font-weight:800;color:var(--c-accent);letter-spacing:-.3px}
.sidebar-nav{list-style:none;padding:12px 0;flex:1;overflow-y:auto}
.sidebar-nav li a{display:flex;align-items:center;gap:10px;padding:11px 20px;color:rgba(255,255,255,.65);text-decoration:none;font-size:14px;font-weight:500;border-left:3px solid transparent;transition:all .15s}
.sidebar-nav li a:hover{color:#fff;background:rgba(255,255,255,.06);border-left-color:rgba(255,255,255,.3)}
.sidebar-nav li a.active{color:#fff;background:rgba(245,166,35,.12);border-left-color:var(--c-accent)}
.nav-icon{font-size:16px;width:20px;text-align:center}
.sidebar-footer{padding:16px 20px;border-top:1px solid rgba(255,255,255,.08)}
.sidebar-user-name{font-size:13px;font-weight:600;color:#fff;margin-bottom:6px}
.sidebar-booking-link,.sidebar-logout{display:block;font-size:12px;color:rgba(255,255,255,.5);text-decoration:none;margin-top:4px}
.sidebar-booking-link:hover,.sidebar-logout:hover{color:#fff}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:190}
.sidebar-overlay.show{display:block}

/* ── MAIN CONTENT ───────────────────────────────────────── */
.main-wrapper{margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;min-height:100vh}
.topbar{height:60px;background:#fff;border-bottom:1px solid var(--c-border);display:flex;align-items:center;gap:14px;padding:0 28px;position:sticky;top:0;z-index:100}
.topbar-menu-btn{display:none;background:none;border:none;font-size:22px;cursor:pointer;color:var(--c-text);padding:4px}
.topbar-title{font-size:16px;font-weight:700;color:var(--c-text);flex:1}
.topbar-right{display:flex;align-items:center;gap:8px}
.main-content{padding:28px 32px;flex:1;max-width:1100px}

/* ── PAGE HEADER ────────────────────────────────────────── */
.page-header{margin-bottom:24px}
.page-header h1{font-size:24px;font-weight:800;color:var(--c-text)}
.page-sub{font-size:14px;color:var(--c-muted);margin-top:4px}

/* ── STATS GRID ─────────────────────────────────────────── */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px}
.stat-card{background:#fff;border:1px solid var(--c-border);border-radius:var(--radius);padding:18px;display:flex;align-items:center;gap:14px;box-shadow:var(--shadow)}
.stat-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.stat-icon--green{background:#DCFCE7}
.stat-icon--blue{background:#DBEAFE}
.stat-icon--amber{background:#FEF3C7}
.stat-icon--purple{background:#EDE9FE}
.stat-label{font-size:12px;color:var(--c-muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.stat-value{font-size:22px;font-weight:800;color:var(--c-text)}

/* ── CALLOUT ────────────────────────────────────────────── */
.callout{background:#EFF6FF;border:1px solid #BFDBFE;border-radius:var(--radius);padding:16px 20px;margin-bottom:24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.callout--info{background:#EFF6FF;border-color:#BFDBFE}
.callout-body{flex:1;font-size:14px;color:#1E40AF}
.callout-action{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.link-input{font-size:13px;padding:7px 10px;border:1.5px solid #BFDBFE;border-radius:var(--radius-sm);background:#fff;color:var(--c-text);min-width:200px;max-width:320px}

/* ── SECTION CARD ───────────────────────────────────────── */
.section-card{background:#fff;border:1px solid var(--c-border);border-radius:var(--radius);padding:22px 24px;margin-bottom:24px;box-shadow:var(--shadow)}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.section-header h2{font-size:16px;font-weight:700}
.link-muted{color:var(--c-muted);font-size:13px;text-decoration:none;font-weight:500}
.link-muted:hover{color:var(--c-primary)}

/* ── RIDE LIST ──────────────────────────────────────────── */
.ride-list{display:flex;flex-direction:column}
.ride-row{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-bottom:1px solid var(--c-border)}
.ride-row:last-child{border-bottom:none}
.ride-avatar{width:38px;height:38px;border-radius:50%;background:#DBEAFE;color:#1E40AF;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0;margin-top:2px}
.ride-info{flex:1;min-width:0}
.ride-customer{font-size:14px;font-weight:700;color:var(--c-text)}
.ride-meta{display:flex;gap:12px;font-size:12px;color:var(--c-muted);margin-top:3px;flex-wrap:wrap}
.ride-route{font-size:13px;color:var(--c-muted);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ride-notes{font-size:12px;color:var(--c-muted);margin-top:3px;font-style:italic}
.ride-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}
.ride-price{font-size:16px;font-weight:800;color:var(--c-text)}
.ride-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}

/* ── STATUS BADGES ──────────────────────────────────────── */
.status-badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.status-pending  {background:#FEF9C3;color:#854D0E}
.status-requested{background:#FEF3C7;color:#B45309}
.status-confirmed{background:#DBEAFE;color:#1E40AF}
.status-completed{background:#DCFCE7;color:#14532D}
.status-cancelled{background:#FEE2E2;color:#7F1D1D}

/* ── FILTER BAR ─────────────────────────────────────────── */
.filter-bar{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}
.filter-btn{padding:7px 16px;border-radius:20px;font-size:13px;font-weight:600;text-decoration:none;color:var(--c-muted);background:#fff;border:1.5px solid var(--c-border);transition:all .15s}
.filter-btn:hover{border-color:var(--c-primary);color:var(--c-primary)}
.filter-btn.active{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}

/* ── CUSTOMER GRID ──────────────────────────────────────── */
.customer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.customer-card{background:var(--c-bg);border-radius:var(--radius);padding:16px;display:flex;align-items:flex-start;gap:12px}
.customer-avatar{width:44px;height:44px;border-radius:50%;background:#DBEAFE;color:#1E40AF;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}
.customer-name{font-size:14px;font-weight:700;margin-bottom:4px}
.customer-contact{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--c-muted);margin-bottom:8px}
.customer-stats{display:flex;gap:10px;font-size:12px;color:var(--c-muted)}
.cstat strong{color:var(--c-text)}

/* ── FORM CARDS ─────────────────────────────────────────── */
.form-card{background:#fff;border:1px solid var(--c-border);border-radius:var(--radius);padding:22px 24px;margin-bottom:18px;box-shadow:var(--shadow)}
.form-card h2{font-size:15px;font-weight:700;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--c-border)}
.link-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.save-banner{background:#DCFCE7;color:#14532D;border:1px solid #86EFAC;border-radius:var(--radius);padding:12px 18px;font-size:14px;font-weight:600;margin-bottom:16px}

/* ── DATA TABLE ─────────────────────────────────────────── */
.data-table{width:100%;border-collapse:collapse;font-size:14px}
.data-table th{text-align:left;padding:10px 12px;border-bottom:2px solid var(--c-border);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--c-muted)}
.data-table td{padding:11px 12px;border-bottom:1px solid var(--c-border);color:var(--c-text)}
.data-table tr:last-child td{border-bottom:none}
.data-table tr:hover td{background:var(--c-bg)}
.route-cell{max-width:300px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--c-muted)}

/* ── EMPTY STATE ────────────────────────────────────────── */
.empty-state{text-align:center;padding:40px 20px;color:var(--c-muted)}
.empty-icon{font-size:40px;margin-bottom:12px}
.empty-state p{font-size:15px;font-weight:500}
.empty-sub{font-size:13px;margin-top:4px;color:var(--c-muted)}

/* ── BUTTONS ────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 18px;border-radius:var(--radius-sm);border:1.5px solid transparent;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;transition:all .15s;white-space:nowrap;line-height:1}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-primary{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}
.btn-primary:hover:not(:disabled){background:#1D4ED8}
.btn-outline{background:transparent;color:var(--c-text);border-color:var(--c-border)}
.btn-outline:hover:not(:disabled){background:var(--c-bg);border-color:#aaa}
.btn-success{background:#16A34A;color:#fff;border-color:#16A34A}
.btn-success:hover:not(:disabled){background:#15803D}
.btn-danger{background:transparent;color:var(--c-danger);border-color:var(--c-danger)}
.btn-danger:hover:not(:disabled){background:var(--c-danger);color:#fff}
.btn-sm{padding:6px 12px;font-size:13px}
.btn-xs{padding:4px 9px;font-size:12px;border-radius:5px}
.btn-full{width:100%;display:flex}

/* ── FORMS ──────────────────────────────────────────────── */
.form-group{margin-bottom:16px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--c-text)}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],input[type=datetime-local],select,textarea{
  width:100%;padding:10px 13px;border:1.5px solid var(--c-border);border-radius:8px;font-size:14px;font-family:inherit;
  background:#fff;color:var(--c-text);transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--c-primary);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
input:disabled{background:#f8f8f8;cursor:not-allowed}
textarea{resize:vertical}
.optional{color:var(--c-muted);font-weight:400}

/* ── ERROR BOX ──────────────────────────────────────────── */
.error-box{background:#FEF2F2;border:1px solid #FECACA;border-radius:var(--radius-sm);padding:12px 16px;color:#7F1D1D;font-size:14px;margin-top:4px}
.error-box p{margin:0 0 4px}
.error-box p:last-child{margin:0}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media(max-width:900px){
  .stats-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .main-wrapper{margin-left:0}
  .topbar-menu-btn{display:block}
  .main-content{padding:16px}
  .stats-grid{grid-template-columns:1fr 1fr}
  .form-row{grid-template-columns:1fr}
  .ride-row{flex-wrap:wrap}
  .ride-right{flex-direction:row;align-items:center;width:100%;justify-content:space-between}
}
@media(max-width:480px){
  .stats-grid{grid-template-columns:1fr}
  .auth-card{padding:24px}
}

/* v1.3 additions */
.nav-badge{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;font-size:10px;font-weight:800;margin-left:6px;vertical-align:middle}
.nav-badge--warn{background:#F59E0B;color:#fff}
.nav-badge--danger{background:#DC2626;color:#fff}
.billing-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--c-border);font-size:14px}
.billing-row:last-of-type{border-bottom:none}

/* ── v1.5 Phase B: Availability, Documents, CRM badges ─────────── */
.section-title{font-size:15px;font-weight:700;color:var(--c-text);margin-bottom:14px}
.avail-table{display:flex;flex-direction:column;gap:10px}
.avail-row{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--c-border)}
.avail-row:last-child{border-bottom:none}
.avail-day{display:flex;align-items:center;gap:8px;min-width:130px;font-size:14px;font-weight:600;color:var(--c-text)}
.avail-day input[type=checkbox]{width:16px;height:16px;accent-color:var(--c-primary)}
.avail-row input[type=time]{padding:7px 10px;border:1.5px solid var(--c-border);border-radius:var(--radius-sm);font-size:13px}
.avail-to{font-size:13px;color:var(--c-muted)}
.save-confirm{margin-left:10px;font-size:13px;font-weight:600;color:var(--c-success)}
.inline-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px}
.inline-form input[type=date],.inline-form input[type=text]{padding:9px 12px;border:1.5px solid var(--c-border);border-radius:var(--radius-sm);font-size:14px}
.inline-form input[type=text]{flex:1;min-width:160px}
.blackout-list{display:flex;flex-direction:column;gap:8px}
.blackout-item{display:flex;justify-content:space-between;align-items:center;background:var(--c-bg);border-radius:var(--radius-sm);padding:10px 14px;font-size:13.5px}
.btn-remove-blackout{background:none;border:none;color:var(--c-muted);font-size:15px;cursor:pointer;padding:2px 6px;border-radius:4px}
.btn-remove-blackout:hover{background:#FEE2E2;color:var(--c-danger)}

.doc-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.doc-form select,.doc-form input[type=text],.doc-form input[type=date]{padding:9px 12px;border:1.5px solid var(--c-border);border-radius:var(--radius-sm);font-size:14px}
.doc-form input[type=file]{font-size:13px}
.doc-list{display:flex;flex-direction:column;gap:10px}
.doc-item{display:flex;justify-content:space-between;align-items:center;background:var(--c-bg);border-radius:var(--radius);padding:14px 16px;border-left:4px solid var(--c-border)}
.doc-status-expiring{border-left-color:var(--c-warning)}
.doc-status-expired{border-left-color:var(--c-danger)}
.doc-status-valid{border-left-color:var(--c-success)}
.doc-name{font-size:14px;font-weight:700;color:var(--c-text);display:flex;align-items:center;gap:8px}
.doc-meta{font-size:12.5px;color:var(--c-muted);margin-top:3px}
.doc-badge{font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:10px;text-transform:uppercase;letter-spacing:.3px}
.doc-badge-valid{background:#DCFCE7;color:#15803D}
.doc-badge-expiring{background:#FEF3C7;color:#B45309}
.doc-badge-expired{background:#FEE2E2;color:#B91C1C}

.badge-top{display:inline-block;font-size:10.5px;font-weight:800;color:#B45309;background:#FEF3C7;padding:2px 8px;border-radius:10px;margin-left:8px;vertical-align:middle}

/* ── Mobile-first bottom tab bar (Uber-style) ───────────────────── */
.bottom-tabbar{display:none}
@media(max-width:768px){
  .bottom-tabbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:250;
    background:#fff;border-top:1px solid var(--c-border);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow:0 -2px 10px rgba(0,0,0,.06);
  }
  .tab-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;color:var(--c-muted);padding:6px 0;border-radius:10px}
  .tab-icon{font-size:20px;line-height:1}
  .tab-label{font-size:10.5px;font-weight:600}
  .tab-item.active{color:var(--c-primary)}
  .tab-item.active .tab-icon{transform:translateY(-1px)}
  .main-content{padding-bottom:88px}
  .sidebar-nav li a{font-size:15px}
}

/* ── v1.8 i18n language switcher ─────────────────────────────── */
.lang-switcher select{padding:5px 8px;border:1.5px solid var(--c-border);border-radius:6px;font-size:12.5px;background:#fff;color:var(--c-text);cursor:pointer}
[dir="rtl"] .sidebar{right:0;left:auto}
[dir="rtl"] .main-wrapper{margin-left:0;margin-right:var(--sidebar-w)}
@media(max-width:768px){[dir="rtl"] .main-wrapper{margin-right:0}}

/* v1.10 ride requests, nav links, balance */
.nav-links{display:flex;gap:6px;margin:4px 0}
.balance-hero{background:linear-gradient(135deg,var(--c-brand),#1E3A8A);border-radius:14px;padding:26px;color:#fff;margin-bottom:20px}
.balance-hero .bal-label{font-size:12.5px;opacity:.8;text-transform:uppercase;letter-spacing:.05em}
.balance-hero .bal-amount{font-size:38px;font-weight:800;margin:6px 0}
.balance-hero .bal-sub{font-size:12.5px;opacity:.85}
.ledger-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--c-border);font-size:13.5px}
.ledger-row:last-child{border-bottom:none}
.ledger-amt-credit{color:#16A34A;font-weight:700}
.ledger-amt-debit{color:#DC2626;font-weight:700}