/* SS Fleet Management — app.css
   Strategy: Desktop-first defaults, mobile via @media, Samsung via .force-mobile class */

/* ── VARIABLES ─────────────────────────────────────────── */
:root{
  --or:#D4621A;--or-dk:#A84D12;--or-lt:#FEF0E7;
  --bl:#185FA5;--bl-lt:#E6F0FB;
  --gn:#28A745;--gn-lt:#E8F5EC;
  --rd:#DC3545;--rd-lt:#FCECEA;
  --am:#E67E22;--am-lt:#FEF3E2;
  --bg:#F5F4F0;--bg2:#ECEAE4;
  --t1:#1A1A1A;--t2:#4A4A4A;--t3:#888888;--gy:#6C757D;
  --bd:#E0DDDA;
  --r:12px;--sh:0 1px 4px rgba(0,0,0,.07);
}

/* ── RESET ─────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--t1);line-height:1.5}

/* ── AUTH ───────────────────────────────────────────────── */
#auth-screen{display:none;min-height:100%;position:fixed;inset:0;align-items:center;justify-content:center;padding:20px;background:linear-gradient(145deg,#1a1a2e,#16213e);overflow:hidden}
.auth-box{background:#fff;border-radius:20px;padding:28px 22px;width:100%;max-width:400px;box-shadow:0 20px 60px rgba(0,0,0,.5);max-height:calc(100vh - 40px);overflow-y:auto;-webkit-overflow-scrolling:touch}
.auth-logo{text-align:center;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--bd)}
.auth-logo-wrap{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:10px}
.auth-logo-name{font-size:23px;font-weight:900;color:var(--or);letter-spacing:-.5px;line-height:1.05}
.auth-logo-sub{font-size:11px;font-weight:700;color:var(--t2);letter-spacing:2px;text-transform:uppercase;margin-top:2px}
.auth-title{font-size:14px;font-weight:600;color:var(--gy)}
.role-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}
.role-card{border:2px solid var(--bd);border-radius:12px;padding:20px 12px;cursor:pointer;text-align:center;background:#fff;transition:all .15s;-webkit-user-select:none;user-select:none}
.role-card:active,.role-card.active{border-color:var(--or);background:var(--or-lt)}
.role-card.admin.active{border-color:var(--bl);background:var(--bl-lt)}
.role-card-icon{font-size:30px;margin-bottom:7px}
.role-card-label{font-weight:700;font-size:14px}
.role-card-sub{font-size:11px;color:var(--t3);margin-top:2px}
.auth-info{background:var(--bg);border-radius:10px;padding:11px 13px;font-size:12px;color:var(--t3);margin-top:4px}
.auth-back{text-align:center;margin-top:14px;font-size:13px;color:var(--t3);cursor:pointer}
.auth-err{display:none;background:var(--rd-lt);border:1.5px solid #f5a5a5;border-radius:9px;padding:10px 13px;font-size:13px;color:var(--rd);margin-bottom:12px}

/* ── FORMS ─────────────────────────────────────────────── */
.fg{margin-bottom:14px}
.fg label{display:block;font-size:11px;font-weight:700;color:var(--t3);letter-spacing:.5px;text-transform:uppercase;margin-bottom:5px}
.fg input,.fg select,.fg textarea,.inp{width:100%;padding:12px 13px;border:1.5px solid var(--bd);border-radius:9px;font-size:15px;font-family:inherit;background:#fff;color:var(--t1);outline:none;transition:border .15s;-webkit-appearance:none;appearance:none;display:block}
.fg input:focus,.fg select:focus,.inp:focus{border-color:var(--or)}
.fg .hint{font-size:11px;color:var(--bl);margin-top:4px}
.pww{position:relative}
.pww input{padding-right:44px}
.pwe{position:absolute;right:12px;top:50%;transform:translateY(-50%);border:none;background:none;font-size:18px;cursor:pointer;color:var(--gy);padding:4px;line-height:1}
.r2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ── BUTTONS ───────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:11px 18px;border-radius:9px;font-size:14px;font-weight:600;cursor:pointer;border:none;font-family:inherit;transition:all .12s;min-height:42px;-webkit-user-select:none;user-select:none}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn-p{background:var(--or);color:#fff}
.btn-p:hover{background:var(--or-dk)}
.btn-g{background:var(--bg2);color:var(--t1);border:1px solid var(--bd)}
.btn-g:hover{background:var(--bd)}
.btn-s{background:var(--gn);color:#fff}
.btn-d{background:var(--rd);color:#fff}
.btn-b{background:var(--bl);color:#fff}
.btn-fw{width:100%}
.btn-sm{padding:7px 13px;font-size:12px;min-height:32px}
.btn-xs{padding:5px 9px;font-size:11px;min-height:26px;border-radius:6px}
.btn-icon{padding:7px;min-height:36px;width:36px}

/* ── APP SHELL — desktop default ───────────────────────── */
#app-shell{display:flex;height:100vh;overflow:hidden}

/* ── SIDEBAR — visible by default (desktop) ────────────── */
.sidebar{width:220px;background:#fff;border-right:1px solid var(--bd);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto}
.sb-logo{padding:16px 14px;display:flex;align-items:center;gap:11px;border-bottom:1px solid var(--bd)}
.sb-logo-name{font-size:15px;font-weight:900;color:var(--or);letter-spacing:-.3px;line-height:1.1}
.sb-logo-sub{font-size:9px;font-weight:700;color:var(--t3);letter-spacing:1px;text-transform:uppercase}
.sb-sect{padding:8px 10px 2px;font-size:10px;font-weight:700;color:var(--t3);letter-spacing:1.5px;text-transform:uppercase}
.sb-item{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;border-radius:9px;margin:2px 6px;font-size:13px;font-weight:500;color:var(--t2);transition:all .1s;position:relative;-webkit-user-select:none;user-select:none}
.sb-item:hover{background:var(--bg);color:var(--t1)}
.sb-item.active{background:var(--or-lt);color:var(--or);font-weight:700}
.sb-item.active::before{content:'';position:absolute;left:-6px;top:50%;transform:translateY(-50%);width:4px;height:24px;background:var(--or);border-radius:2px}
.sb-item-icon{font-size:16px;width:20px;text-align:center;flex-shrink:0}
.sb-badge{margin-left:auto;background:var(--rd);color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px;min-width:18px;text-align:center}
.sb-footer{margin-top:auto;padding:12px 10px;border-top:1px solid var(--bd)}
.sb-user{display:flex;align-items:center;gap:9px;padding:9px 10px;margin-bottom:8px;border-radius:9px;cursor:pointer}
.sb-user:hover{background:var(--bg)}
.sb-user-name{font-size:13px;font-weight:600;line-height:1.2}
.sb-user-role{font-size:11px;color:var(--t3)}

/* ── PAGE AREA ─────────────────────────────────────────── */
.page-area{flex:1;overflow-y:auto;display:flex;flex-direction:column;min-width:0}

/* ── TOPBAR — hidden on desktop, shown on mobile ────────── */
.topbar{height:56px;background:#fff;border-bottom:1px solid var(--bd);display:none;align-items:center;padding:0 16px;gap:12px;flex-shrink:0;position:sticky;top:0;z-index:100}
.topbar-logo{display:flex;align-items:center;gap:9px}
.topbar-title{font-size:15px;font-weight:800;color:var(--or);letter-spacing:-.3px}
.topbar-sub{font-size:10px;color:var(--t3)}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.content{padding:18px;flex:1}
.content-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:8px}
.content-title{font-size:20px;font-weight:700;letter-spacing:-.3px}
.content-sub{font-size:13px;color:var(--t3);margin-top:2px}

/* ── BOTTOM NAV — hidden on desktop ────────────────────── */
.bnav{display:none;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--bd);z-index:500}
.bnav-inner{display:flex;align-items:stretch;height:58px;width:100%}
.bnav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;font-size:10px;font-weight:500;color:var(--t3);position:relative;-webkit-user-select:none;user-select:none;padding:6px 2px;min-width:0;overflow:hidden}
.bnav-item.active{color:var(--or)}
.bnav-item.active .bnav-icon{transform:scale(1.1)}
.bnav-icon{font-size:20px;line-height:1;transition:transform .15s}
.bnav-label{font-size:9px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;text-align:center}
.bnav-badge{position:absolute;top:4px;right:calc(50% - 18px);background:var(--rd);color:#fff;font-size:9px;font-weight:700;padding:1px 5px;border-radius:8px;min-width:16px;text-align:center}

/* ── DRAWER ─────────────────────────────────────────────── */
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:700;display:none}
.drawer{position:fixed;top:0;right:0;bottom:0;width:260px;background:#fff;z-index:800;transform:translateX(100%);transition:transform .25s ease;overflow-y:auto;display:flex;flex-direction:column}
.drawer.open{transform:translateX(0)}
.drawer-head{padding:18px 16px 12px;border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between}
.drawer-item{display:flex;align-items:center;gap:12px;padding:13px 16px;cursor:pointer;font-size:14px;color:var(--t2);border-bottom:1px solid var(--bg);min-height:48px}
.drawer-item:hover,.drawer-item.active{background:var(--or-lt);color:var(--or)}
.drawer-item-icon{font-size:18px;width:22px;text-align:center;flex-shrink:0}
.drawer-badge{margin-left:auto;background:var(--rd);color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px}

/* ── CARDS ──────────────────────────────────────────────── */
.card{background:#fff;border-radius:var(--r);border:1px solid var(--bd);margin-bottom:12px;overflow:hidden;box-shadow:var(--sh)}
.card-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--bd);gap:8px;flex-wrap:wrap}
.card-head h3{font-size:14px;font-weight:700}
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:12px}
.stat-grid-4{grid-template-columns:repeat(4,1fr)}
.stat-card{background:#fff;border-radius:var(--r);border:1px solid var(--bd);padding:14px 16px;box-shadow:var(--sh)}
.stat-card.clickable{cursor:pointer;transition:background .1s}
.stat-card.clickable:hover{background:var(--bg)}
.stat-lbl{font-size:11px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px}
.stat-val{font-size:22px;font-weight:800;line-height:1}
.stat-sub{font-size:11px;color:var(--t3);margin-top:3px}

/* ── LIST ROWS ──────────────────────────────────────────── */
.list-row{display:flex;align-items:center;gap:11px;padding:13px 16px;border-bottom:1px solid var(--bg2);cursor:pointer;transition:background .1s}
.list-row:last-child{border-bottom:none}
.list-row:hover{background:var(--bg)}
.list-row-main{flex:1;min-width:0}
.list-row-title{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list-row-sub{font-size:12px;color:var(--t2);margin-top:2px}
.list-row-right{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:4px}

/* ── MISC ───────────────────────────────────────────────── */
.av{border-radius:50%;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:700;background:var(--or);color:#fff}
.av img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.bdg{display:inline-block;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700;text-transform:capitalize;white-space:nowrap}
.bdg-ok{background:var(--gn-lt);color:#1a6b2e}
.bdg-warn{background:var(--am-lt);color:#7a4e00}
.bdg-err{background:var(--rd-lt);color:#922020}
.bdg-info{background:var(--bl-lt);color:#0a4a8f}
.bdg-gy{background:var(--bg2);color:var(--t2)}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1000;display:flex;align-items:flex-end;justify-content:center}
.modal-box{background:#fff;border-radius:20px 20px 0 0;width:100%;max-width:520px;max-height:92vh;display:flex;flex-direction:column;animation:mup .25s ease}
@keyframes mup{from{transform:translateY(100%)}to{transform:translateY(0)}}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--bd);flex-shrink:0}
.modal-title{font-size:16px;font-weight:700}
.modal-close{background:var(--bg2);border:none;width:32px;height:32px;border-radius:50%;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.modal-body{overflow-y:auto;padding:18px 20px;flex:1}
.modal-foot{padding:14px 20px;border-top:1px solid var(--bd);display:flex;gap:10px;flex-shrink:0}
.photo-preview{width:80px;height:80px;border-radius:50%;border:2.5px dashed var(--bd);overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:pointer;background:var(--bg);margin:0 auto 8px;font-size:28px}
.photo-preview.has-photo{border-style:solid;border-color:var(--gn)}
.photo-preview img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.empty{padding:36px 20px;text-align:center;color:var(--t3)}
.empty-icon{font-size:36px;margin-bottom:8px}
.empty-title{font-size:15px;font-weight:600;color:var(--t2);margin-bottom:5px}
.empty-sub{font-size:13px}
.page-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;gap:14px;color:var(--t3);font-size:13px}
.spin{display:inline-block;width:18px;height:18px;border:2.5px solid var(--bd);border-top-color:var(--or);border-radius:50%;animation:sp .7s linear infinite;flex-shrink:0}
.spin-sm{width:14px;height:14px;border-width:2px}
@keyframes sp{to{transform:rotate(360deg)}}
.gps-box{background:var(--bg);border-radius:9px;padding:11px 13px;font-size:13px;display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.gps-box.ok{background:var(--gn-lt);color:#1a6b2e}
.gps-box.err{background:var(--am-lt);color:#7a4e00}
.form-rest{display:none}
.form-rest.visible{display:block}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{padding:9px 12px;text-align:left;font-size:10px;font-weight:700;color:var(--t3);letter-spacing:.5px;text-transform:uppercase;border-bottom:2px solid var(--bd);background:var(--bg)}
.tbl td{padding:11px 12px;border-bottom:1px solid var(--bg2);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:var(--bg)}
#toasts{position:fixed;bottom:72px;left:50%;transform:translateX(-50%);z-index:9000;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;width:min(92vw,360px)}
.toast{padding:11px 18px;border-radius:24px;font-size:13px;font-weight:600;color:#fff;animation:tin .25s ease;text-align:center}
.toast-ok{background:#1d7a34}
.toast-err{background:#c0392b}
.toast-warn{background:#b7770d}
@keyframes tin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ══ MOBILE (≤768px) — switch to topbar + bottom nav ══════ */
@media(max-width:768px){
  #app-shell{height:auto;min-height:100vh;overflow:visible;flex-direction:column}
  .sidebar{display:none!important}
  .topbar{display:flex!important}
  .bnav{display:block!important}
  .stat-grid-4{grid-template-columns:repeat(2,1fr)}
  .content{padding:12px;padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))}
  .content-header{margin-bottom:12px}
  .modal-box{border-radius:20px 20px 0 0;max-height:88vh}
  .bnav{padding-bottom:env(safe-area-inset-bottom,0px)}
  /* Prevent iOS zoom on inputs */
  .fg input,.fg select,.fg textarea,.inp{font-size:16px}
}

/* ══ SAMSUNG BROWSER FIX — .force-mobile added by JS ══════ */
#app-shell.force-mobile .sidebar{display:none!important}
#app-shell.force-mobile .topbar{display:flex!important}
#app-shell.force-mobile .bnav{display:block!important}
#app-shell.force-mobile{height:auto;min-height:100vh;overflow:visible;flex-direction:column}
#app-shell.force-mobile .content{padding:12px;padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))}
#app-shell.force-mobile .stat-grid-4{grid-template-columns:repeat(2,1fr)}

/* ══ DRIVER MOBILE COMPONENTS ══════════════════════════════ */
.driver-hero{display:flex;align-items:center;justify-content:space-between;padding:4px 0 16px}
.driver-hero-name{font-size:22px;font-weight:800;letter-spacing:-.3px}
.driver-hero-date{font-size:12px;color:var(--t3);margin-top:2px}
.driver-stats{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px;margin-bottom:14px}
.driver-stats::-webkit-scrollbar{display:none}
.driver-stat{background:#fff;border:1px solid var(--bd);border-radius:12px;padding:12px 16px;flex-shrink:0;min-width:96px;box-shadow:var(--sh)}
.driver-stat-lbl{font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.driver-stat-val{font-size:18px;font-weight:800;color:var(--t1)}
.driver-stat-mono{font-family:monospace;font-size:14px;font-weight:700}
.action-card{background:#fff;border-radius:16px;border:1px solid var(--bd);padding:20px 18px;margin-bottom:14px;box-shadow:0 4px 20px rgba(0,0,0,.08)}
.action-card-green{background:linear-gradient(135deg,#f0fff4,#e6f7eb);border-color:#a8e8bb}
.action-card-title{font-size:18px;font-weight:800;margin-bottom:20px;letter-spacing:-.3px}
.step-block{margin-bottom:20px}
.step-block:last-child{margin-bottom:0}
.step-label{font-size:12px;font-weight:700;color:var(--t2);margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}
.step-label-required::after{content:' *';color:var(--rd)}
.selfie-tap{border:3px dashed var(--rd);border-radius:16px;padding:32px 20px;text-align:center;cursor:pointer;background:#fff9f9;min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.selfie-tap:active{background:var(--or-lt);border-color:var(--or)}
.selfie-tap-icon{font-size:50px;margin-bottom:10px;line-height:1}
.selfie-tap-text{font-size:17px;font-weight:800;color:var(--rd);margin-bottom:4px}
.selfie-tap-sub{font-size:13px;color:var(--t3)}
.selfie-preview-img{width:100%;max-height:240px;object-fit:cover;border-radius:14px;display:block}
.btn-xl{min-height:56px;font-size:16px;border-radius:14px}
.inp{width:100%;padding:14px 16px;border:1.5px solid var(--bd);border-radius:10px;font-size:16px;font-family:inherit;color:var(--t1);background:#fff;outline:none;-webkit-appearance:none;appearance:none;display:block}
.inp:focus{border-color:var(--or)}
.checkedin-status{text-align:center;padding:8px 0 20px}
.checkedin-icon{font-size:56px;margin-bottom:8px;line-height:1}
.checkedin-time{font-size:36px;font-weight:900;color:var(--gn);letter-spacing:-1px;line-height:1}
.checkedin-ist{font-size:14px;font-weight:600;color:var(--gn)}
.checkedin-loc{font-size:13px;color:var(--t2);margin-top:8px}
.checkedin-selfie{width:80px;height:80px;border-radius:50%;object-fit:cover;border:3px solid var(--gn);margin:12px auto 0;display:block}
.shift-summary{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--bd);border-radius:12px;overflow:hidden;margin-bottom:18px}
.shift-col{background:#fff;padding:16px 12px;text-align:center}
.shift-col-label{font-size:9px;font-weight:700;color:var(--t3);letter-spacing:1px;text-transform:uppercase;margin-bottom:6px}
.shift-col-time{font-size:24px;font-weight:900;line-height:1}
.shift-col-in .shift-col-time{color:var(--gn)}
.shift-col-out .shift-col-time{color:var(--rd)}
.shift-col-loc{font-size:11px;color:var(--t3);margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hist-row{padding:14px 16px;border-bottom:1px solid var(--bg2)}
.hist-row:last-child{border-bottom:none}
.hist-row-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:5px}
.hist-row-title{font-weight:700;font-size:14px}
.hist-row-amount{font-weight:800;color:var(--or);font-size:16px;flex-shrink:0}
.hist-row-sub{font-size:12px;color:var(--t2)}
.hist-row-meta{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}
.fuel-calc-preview{background:var(--gn-lt);border:1px solid #a8e8bb;border-radius:10px;padding:12px 14px;font-size:13px;font-weight:600;color:#1a6b2e;margin-bottom:16px;display:none}