/* ============ AutoFleet Manager — base + mobile app shell ============ */
:root{
  --brand:#0f766e;--brand-dark:#115e59;--brand-2:#14b8a6;--brand-soft:#ccfbf1;
  --app-bg:#f3f5f7;--surface:#ffffff;--surface-2:#f6f8f9;--line:#e5e7eb;--ink:#111827;--ink-2:#6b7280;
  --due:#b91c1c;--credit:#15803d;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.04);
  --appbar-h:58px;--bnav-h:66px;
  --safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);
}
[data-bs-theme=dark]{
  --app-bg:#0c1215;--surface:#151d21;--surface-2:#1c262b;--line:#26323a;--ink:#e5e7eb;--ink-2:#94a3ab;
  --brand-soft:#123b37;--due:#f87171;--credit:#4ade80;
  --shadow:0 1px 2px rgba(0,0,0,.4);
  --bs-body-bg:#0c1215;
}
body{font-family:Inter,"Hind Siliguri",system-ui,sans-serif;background:var(--app-bg);font-size:.925rem;-webkit-tap-highlight-color:transparent}
body.lang-bn{font-family:"Hind Siliguri",Inter,system-ui,sans-serif;font-size:.97rem}
.bg-brand{background:var(--brand)!important}
.btn-primary{--bs-btn-bg:var(--brand);--bs-btn-border-color:var(--brand);--bs-btn-hover-bg:var(--brand-dark);--bs-btn-hover-border-color:var(--brand-dark);--bs-btn-active-bg:var(--brand-dark);--bs-btn-active-border-color:var(--brand-dark);--bs-btn-disabled-bg:var(--brand);--bs-btn-disabled-border-color:var(--brand)}
.text-due{color:var(--due)!important}.text-credit{color:var(--credit)!important}

/* Desktop sidebar */
.sidebar{width:230px;flex-shrink:0;min-height:calc(100vh - 56px);background:var(--surface);border-right:1px solid var(--line)}
@media (min-width:992px){.sidebar{position:sticky;top:56px;height:calc(100vh - 56px);overflow-y:auto}}
.sidebar .nav-link{color:var(--ink);opacity:.85;padding:.55rem 1.1rem;border-left:3px solid transparent}
.sidebar .nav-link i{width:1.4rem;display:inline-block}
.sidebar .nav-link:hover{background:var(--surface-2);color:var(--brand);opacity:1}
.sidebar .nav-link.active{background:var(--brand-soft);color:var(--brand);border-left-color:var(--brand);font-weight:600;opacity:1}
[data-bs-theme=dark] .sidebar .nav-link.active{color:#5eead4}
.main-content{min-width:0;animation:pagein .22s ease-out}
@keyframes pagein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Cards / tables */
.card{--bs-card-bg:var(--surface);border:0;box-shadow:var(--shadow);border-radius:.8rem}
.card-header.bg-white,.bg-white{background:var(--surface)!important}
[data-bs-theme=dark] .bg-light{background:var(--surface-2)!important}
.stat-card .label{font-size:.75rem;color:var(--ink-2);text-transform:uppercase;letter-spacing:.03em}
.stat-card .value{font-size:1.35rem;font-weight:700}
.stat-card .icon{font-size:1.8rem;opacity:.22}
.table{--bs-table-bg:transparent}
.table thead th{font-size:.75rem;text-transform:uppercase;color:var(--ink-2);font-weight:600;white-space:nowrap}
.table-card{background:var(--surface);border-radius:.8rem;box-shadow:var(--shadow)}
[data-bs-theme=dark] .table-light{--bs-table-bg:var(--surface-2);--bs-table-color:var(--ink);--bs-table-border-color:var(--line)}
.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.sheet input.form-control,.sheet select{min-width:90px}.sheet select[data-f=driver]{min-width:140px}
.legend-sw{display:inline-block;width:10px;height:10px;border-radius:2px;vertical-align:middle}
.avatar{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.2);color:#fff;font-weight:700;font-size:.9rem}
.avatar-lg{width:44px;height:44px;background:var(--brand);font-size:1.1rem}
#navprogress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,#fbbf24,#5eead4);z-index:2000;transition:width .4s ease;pointer-events:none}
#navprogress.go{width:75%;transition:width 6s cubic-bezier(.1,.7,.1,1)}
.offline-bar{display:none;position:sticky;top:0;z-index:1025;background:#7c2d12;color:#fff;font-size:.82rem;text-align:center;padding:4px 8px}
body.is-offline .offline-bar{display:block}
.lock-banner{border:1px dashed var(--brand);background:var(--brand-soft);border-radius:.8rem}
tr.row-locked input,tr.row-locked select{background-color:var(--surface-2)!important}
.edited-tag{font-size:.7rem}

/* Login */
.login-wrap{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;background:radial-gradient(1200px 600px at 10% -10%,#2dd4bf 0,transparent 55%),linear-gradient(160deg,#0f766e,#134e4a)}
.login-logo{width:84px;height:84px;border-radius:22px;box-shadow:0 12px 30px rgba(0,0,0,.25)}

/* ============ Phone / tablet: native app shell ============ */
@media (max-width:991.98px){
  body{font-size:.95rem;padding-top:calc(var(--appbar-h) + var(--safe-t));padding-bottom:calc(var(--bnav-h) + var(--safe-b) + 8px);overscroll-behavior-y:contain}
  .main-content{padding:14px 14px 20px!important}
  input.form-control,select.form-select,textarea.form-control{font-size:16px} /* no iOS zoom */
  .form-control,.form-select{border-radius:.7rem}
  .btn{border-radius:.7rem}

  /* App bar */
  .appbar{position:fixed;top:0;left:0;right:0;z-index:1030;height:calc(var(--appbar-h) + var(--safe-t));padding:var(--safe-t) 6px 0;display:flex;align-items:center;gap:4px;
    background:linear-gradient(135deg,#0f766e,#115e59);color:#fff;box-shadow:0 2px 10px rgba(15,118,110,.25)}
  .appbar-btn{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;border-radius:50%;font-size:1.35rem;flex-shrink:0}
  .appbar-btn:active{background:rgba(255,255,255,.15)}
  .appbar-logo{padding:0 6px 0 8px}.appbar-logo img{width:34px;height:34px;border-radius:10px;box-shadow:0 2px 6px rgba(0,0,0,.2)}
  .appbar-title{flex:1;min-width:0;line-height:1.15;padding-left:4px}
  .appbar-title .t{font-weight:700;font-size:1.06rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .appbar-title .s{font-size:.72rem;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lang-pill{font-size:.75rem;font-weight:700;border:1.5px solid rgba(255,255,255,.7);border-radius:999px;padding:2px 8px}
  .offline-bar{top:calc(var(--appbar-h) + var(--safe-t));position:fixed;left:0;right:0}

  /* Bottom navigation with center FAB */
  .bottomnav{position:fixed;left:0;right:0;bottom:0;z-index:1030;height:calc(var(--bnav-h) + var(--safe-b));padding-bottom:var(--safe-b);display:flex;align-items:stretch;
    background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -4px 18px rgba(0,0,0,.06)}
  .bottomnav>a,.bottomnav>button:not(.fab){flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:0;background:none;color:var(--ink-2);text-decoration:none;font-size:.7rem;font-weight:500}
  .bottomnav i{font-size:1.35rem;line-height:1}
  .bottomnav .active{color:var(--brand)}
  [data-bs-theme=dark] .bottomnav .active{color:#5eead4}
  .bottomnav .active span{font-weight:700}
  .bottomnav .active i{transform:translateY(-1px)}
  .fab{flex:0 0 64px;align-self:center;width:58px;height:58px;margin:-28px 6px 0;border-radius:20px;border:4px solid var(--app-bg);background:linear-gradient(145deg,#14b8a6,#0f766e);color:#fff;font-size:1.7rem;
    box-shadow:0 8px 20px rgba(15,118,110,.45);display:flex;align-items:center;justify-content:center;transition:transform .15s}
  .fab:active{transform:scale(.92)}
  .fab.open i{transform:rotate(45deg)}.fab i{transition:transform .2s}

  /* Bottom sheets */
  .sheet-panel.offcanvas-bottom{height:auto;max-height:78vh;border-radius:22px 22px 0 0;border:0;background:var(--surface);padding-bottom:var(--safe-b)}
  .sheet-tall.offcanvas-bottom{max-height:88vh}
  .sheet-handle{width:42px;height:5px;border-radius:9px;background:var(--line);margin:9px auto 0}
  .qa-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 6px}
  .qa-tile{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:var(--ink);text-align:center}
  .qa-tile:active .qa-ic{transform:scale(.9)}
  .qa-ic{width:54px;height:54px;border-radius:17px;display:flex;align-items:center;justify-content:center;font-size:1.45rem;color:#fff;transition:transform .12s}
  .qa-lb{font-size:.72rem;line-height:1.2;font-weight:500}
  .qa-tile.on .qa-ic{outline:2px solid var(--brand);outline-offset:2px}
  .c-teal{background:linear-gradient(145deg,#2dd4bf,#0f766e)}.c-green{background:linear-gradient(145deg,#4ade80,#15803d)}
  .c-orange{background:linear-gradient(145deg,#fb923c,#c2410c)}.c-blue{background:linear-gradient(145deg,#60a5fa,#1d4ed8)}
  .c-purple{background:linear-gradient(145deg,#c084fc,#7e22ce)}.c-amber{background:linear-gradient(145deg,#fcd34d,#d97706)}
  .c-slate{background:linear-gradient(145deg,#94a3b8,#475569)}.c-pink{background:linear-gradient(145deg,#f472b6,#be185d)}
  .c-indigo{background:linear-gradient(145deg,#818cf8,#4338ca)}.c-red{background:linear-gradient(145deg,#f87171,#b91c1c)}
  .c-soft{background:var(--brand-soft);color:var(--brand)}
  [data-bs-theme=dark] .c-soft{color:#5eead4}

  /* Page head: title lives in app bar; actions become a swipeable chip row */
  .page-head{flex-wrap:nowrap!important;margin-bottom:12px!important}
  .page-sub-title{font-size:1.05rem!important;font-weight:700}
  .page-actions{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;margin:0 -14px;padding:2px 14px;width:calc(100% + 28px)}
  .page-head:has(.page-sub-title) .page-actions{margin:0;width:auto;padding:2px 0}
  .page-actions::-webkit-scrollbar{display:none}
  .page-actions .btn{white-space:nowrap;border-radius:999px;padding:.35rem .85rem}
  .page-head:has(.page-sub-title){flex-direction:column;align-items:flex-start!important}
  .chip-scroll,.nav-tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;white-space:nowrap;gap:6px}
  .chip-scroll::-webkit-scrollbar,.nav-tabs::-webkit-scrollbar{display:none}
  .chip-scroll .btn{border-radius:999px}
  .nav-tabs{border:0}.nav-tabs .nav-link{border:0;border-radius:999px;background:var(--surface);color:var(--ink-2);padding:.35rem .9rem}
  .nav-tabs .nav-link.active{background:var(--brand);color:#fff}
  .filter-toggle{background:var(--surface);border:1px solid var(--line);border-radius:.8rem;text-align:left;color:var(--ink)}

  /* Flash messages become toasts */
  .flash{position:fixed;left:12px;right:12px;top:calc(var(--appbar-h) + var(--safe-t) + 8px);z-index:1050;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.18);animation:toastin .25s ease-out}
  @keyframes toastin{from{transform:translateY(-16px);opacity:0}to{transform:none;opacity:1}}

  /* Tables turn into cards */
  .table-card{background:transparent;box-shadow:none}
  .table-card>.p-3{padding:4px 2px 8px!important;font-size:1rem}
  table.m-stack thead{display:none}
  table.m-stack,table.m-stack tbody,table.m-stack tfoot,table.m-stack tr,table.m-stack td{display:block;width:100%}
  table.m-stack tr{background:var(--surface);border-radius:14px;margin-bottom:10px;padding:10px 14px;box-shadow:var(--shadow)}
  table.m-stack tr.table-light{background:var(--brand-soft)}
  table.m-stack td{border:0;padding:3px 0;display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:right;white-space:normal;min-height:26px}
  table.m-stack td::before{content:attr(data-label);color:var(--ink-2);font-size:.78rem;text-align:left;font-weight:500;flex-shrink:0}
  table.m-stack td:empty{display:none}
  table.m-stack td:first-child{font-size:1rem;font-weight:600;justify-content:flex-start;text-align:left;padding-bottom:6px;border-bottom:1px solid var(--line);margin-bottom:4px}
  table.m-stack td:first-child::before{display:none}
  table.m-stack td.text-end:last-child{justify-content:flex-end;border-top:1px solid var(--line);margin-top:6px;padding-top:8px}
  table.m-stack td.text-end:last-child::before{display:none}
  table.m-stack td.text-end:last-child .btn{padding:.3rem .8rem}
  table.m-stack td[colspan]{justify-content:flex-start}
  /* Daily sheet cards: label above each field */
  .sheet table.m-stack td{display:block;text-align:left}
  .sheet table.m-stack td::before{display:block;margin-bottom:2px}
  .sheet table.m-stack td:first-child{display:flex}
  .sheet table.m-stack tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:10px}
  .sheet table.m-stack td:first-child::before{display:none}
  .sheet.table-responsive{overflow:visible}
  .sheet input.form-control,.sheet select.form-select,.sheet select[data-f=driver]{min-width:0;width:100%}
  .sheet .short-wrap select{width:100%!important;margin-top:2px}
  .sheet table.m-stack td:nth-child(1),.sheet table.m-stack td:nth-child(2),.sheet table.m-stack td:nth-child(7){grid-column:1/-1}
  .sheet table.m-stack tfoot tr{display:flex;flex-wrap:wrap;justify-content:space-between}
  .sheet table.m-stack tfoot td{width:auto;display:flex}
  .sheet-actions{position:sticky;bottom:calc(var(--bnav-h) + var(--safe-b) + 8px);z-index:5;background:var(--app-bg);padding:8px 0}
  .sheet-actions .btn-primary{width:100%;padding:.7rem;font-weight:600;border-radius:14px;box-shadow:0 8px 20px rgba(15,118,110,.3)}

  /* Pull to refresh */
  #ptr{position:fixed;top:calc(var(--appbar-h) + var(--safe-t) + 6px);left:50%;transform:translate(-50%,-70px);z-index:1029;width:40px;height:40px;border-radius:50%;background:var(--surface);box-shadow:0 4px 14px rgba(0,0,0,.18);
    display:flex;align-items:center;justify-content:center;color:var(--brand);font-size:1.3rem;transition:transform .2s;opacity:0}
  #ptr.pull{opacity:1}#ptr.spin i{animation:spin .8s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
}
/* Mobile dashboard hero */
.hero{background:radial-gradient(500px 220px at 100% 0,rgba(94,234,212,.35),transparent 60%),linear-gradient(145deg,#0f766e,#134e4a);color:#fff;border-radius:22px;padding:18px;box-shadow:0 10px 26px rgba(15,118,110,.3)}
.hero .muted{opacity:.8;font-size:.82rem}
.hero .big{font-size:1.9rem;font-weight:800;letter-spacing:-.02em}
.hero .progress{height:8px;background:rgba(255,255,255,.2);border-radius:9px}
.hero .progress-bar{background:linear-gradient(90deg,#fbbf24,#fde68a);border-radius:9px}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.hero-stats div{background:rgba(255,255,255,.12);border-radius:14px;padding:8px 10px}
.hero-stats b{display:block;font-size:.98rem}
.hero-stats span{font-size:.7rem;opacity:.85}
.qa-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.qa-row a{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:var(--ink);font-size:.72rem;font-weight:500;text-align:center}
.qa-row .qa-ic{width:52px;height:52px;border-radius:17px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:#fff}
.m-section-title{font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2);font-weight:600;margin:18px 2px 8px}
.install-card{background:var(--surface);border-radius:16px;box-shadow:var(--shadow)}
.kpi-scroll{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;margin:0 -14px;padding:2px 14px 6px}
.kpi-scroll::-webkit-scrollbar{display:none}
.kpi-scroll .kpi{flex:0 0 46%;background:var(--surface);border-radius:16px;padding:12px 14px;box-shadow:var(--shadow)}
.kpi .l{font-size:.72rem;color:var(--ink-2)}.kpi .v{font-size:1.1rem;font-weight:700}

.is-standalone body{user-select:none}
.is-standalone input,.is-standalone textarea{user-select:text}
@media print{body{background:#fff;font-size:11px;padding:0!important}.card,.table-card{box-shadow:none}.main-content{padding:0!important}a{text-decoration:none;color:#000}}
/* Driver images */
.upload-box{height:120px;border:1.5px dashed var(--line);border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--surface-2);color:var(--ink-2);font-size:2.4rem}
.upload-box img{width:100%;height:100%;object-fit:cover}
.driver-photo{width:72px;height:72px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--brand-soft)}
.placeholder-photo{display:inline-flex;align-items:center;justify-content:center;background:var(--brand);color:#fff;font-size:1.8rem;font-weight:700}
.nid-thumb{position:relative;display:block;width:50%;max-width:180px;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.nid-thumb img{width:100%;height:96px;object-fit:cover;display:block}
.nid-thumb span{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.55);color:#fff;font-size:.7rem;padding:2px 6px}
.mini-avatar{width:30px;height:30px;border-radius:50%;object-fit:cover;display:inline-flex;align-items:center;justify-content:center;background:var(--brand-soft);color:var(--brand);font-size:.8rem;font-weight:700;flex-shrink:0}
@media (max-width:991.98px){.route-dashboard .page-head{display:none!important}}
.login-page{padding:0!important}
.login-inner{width:100%;max-width:400px}
.login-card{border-radius:24px}
@media (max-width:575.98px){
  .login-wrap{align-items:stretch;padding:0!important}
  .login-inner{display:flex;flex-direction:column;justify-content:flex-end;min-height:100dvh;padding-top:calc(40px + var(--safe-t))}
  .login-inner>.text-center:first-child{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}
  .login-card{border-radius:28px 28px 0 0;padding-bottom:var(--safe-b)}
  .login-inner>.text-white-50{display:none}
}
/* Daily sheet collection states */
.collect-summary{background:var(--surface);border-radius:.8rem;padding:12px 14px;box-shadow:var(--shadow)}
.row-state{font-size:.72rem;font-weight:600;border-radius:999px;padding:2px 8px;white-space:nowrap}
.state-done{background:#dcfce7;color:#166534}
.state-pending{background:#fef3c7;color:#92400e}
[data-bs-theme=dark] .state-done{background:#14532d;color:#bbf7d0}
[data-bs-theme=dark] .state-pending{background:#78350f;color:#fde68a}
tr.row-open td:first-child{box-shadow:inset 3px 0 0 #f59e0b}
tr.row-locked td:first-child{box-shadow:inset 3px 0 0 #16a34a}
tr.row-unlocked td:first-child{box-shadow:inset 3px 0 0 var(--brand)}
@keyframes rowflash{from{background:rgba(20,184,166,.25)}to{background:transparent}}
tr.row-flash td{animation:rowflash 2s ease-out}
@media (max-width:991.98px){
  .sheet table.m-stack td:first-child{box-shadow:none}
  .sheet table.m-stack tr.row-open{border-left:4px solid #f59e0b}
  .sheet table.m-stack tr.row-locked{border-left:4px solid #16a34a}
  .sheet table.m-stack tr.row-unlocked{border-left:4px solid var(--brand)}
  .sheet table.m-stack td:nth-child(8){grid-column:1/-1;border-top:1px solid var(--line);margin-top:6px;padding-top:8px}
  .sheet table.m-stack td:nth-child(8)::before{display:none}
  .sheet table.m-stack td.row-actions .btn{width:100%;padding:.55rem;border-radius:12px;font-weight:600}
  .sheet table.m-stack tr.row-flash{animation:rowflash 2s ease-out}
}