/* =======================================================================
   QUẢN LÝ XE ÁNH DƯƠNG — styles.css
   Bảng màu kế thừa từ bản thiết kế gốc của công ty (navy #0B2946 + xanh
   dương #0878BD + huy hiệu vàng kem #F2EAD4), được hệ thống hoá lại với
   thang màu trạng thái riêng biệt cho vận hành đội xe.
   ======================================================================= */
:root{
  --navy:#0B2946;
  --navy-ink:#071A2E;
  --blue:#0878BD;
  --blue-ink:#065E96;
  --blue-soft:#E4F1FA;
  --gold:#F2EAD4;
  --gold-ink:#8A6D1F;

  --bg:#F3F6F9;
  --surface:#FFFFFF;
  --surface-2:#EEF2F6;
  --surface-3:#E2E9EF;
  --border:#DFE7ED;
  --border-soft:#EAF0F4;
  --ink:#17324D;
  --ink-soft:#5C7086;
  --ink-faint:#8FA1B3;

  --good:#0A825F;      --good-soft:#E1F5EC;
  --progress:#B5790C;  --progress-soft:#FBF0D8;
  --bad:#C22A2A;       --bad-soft:#FBE7E7;
  --neutral:#718193;   --neutral-soft:#EAEEF2;

  --shadow-sm:0 1px 2px rgba(11,41,70,.07);
  --shadow-md:0 8px 24px rgba(11,41,70,.12);
  --shadow-lg:0 24px 60px rgba(11,41,70,.28);
  --radius:12px; --radius-sm:8px;

  --font-display:'Be Vietnam Pro',ui-sans-serif,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-body:'Inter',ui-sans-serif,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0D1520; --surface:#151F2C; --surface-2:#1C2836; --surface-3:#263344;
    --border:#2A3A4C; --border-soft:#20303F;
    --ink:#E7EEF4; --ink-soft:#9FB2C4; --ink-faint:#67809A;
    --navy:#0E3358; --navy-ink:#081F38; --blue:#3E9AD6; --blue-ink:#6BB4E0; --blue-soft:#132840;
    --gold:#3A3222; --gold-ink:#E4C878;
    --good:#3FBE8C; --good-soft:#0F2E23;
    --progress:#E3AC3F; --progress-soft:#3A2E12;
    --bad:#F17575; --bad-soft:#3A1B1B;
    --neutral:#93A2AE; --neutral-soft:#1D2733;
    --shadow-sm:0 1px 2px rgba(0,0,0,.35); --shadow-md:0 10px 26px rgba(0,0,0,.45); --shadow-lg:0 26px 64px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:14.5px; line-height:1.5; -webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:700; margin:0; text-wrap:balance;}
button{font-family:inherit;}
::selection{background:var(--blue-soft);}
.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums;}
:focus-visible{outline:2px solid var(--blue); outline-offset:2px; border-radius:4px;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:var(--surface-3); border-radius:8px;}

/* ---------- shell ---------- */
.app{display:grid; grid-template-columns:248px 1fr; min-height:100vh;}
.sidebar{background:var(--navy); color:#C8D8E5; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; z-index:95;}
.brand{display:flex; align-items:center; gap:.7rem; padding:1.2rem 1.1rem 1rem; border-bottom:1px solid rgba(255,255,255,.1);}
.logo{width:40px;height:40px;border-radius:50%; background:var(--gold); color:var(--good); display:flex; align-items:center; justify-content:center; font-weight:800; font-family:var(--font-display); font-size:.95rem; flex:none;}
.brand b{display:block; color:#fff; font-size:1.02rem; letter-spacing:.02em; font-family:var(--font-display); font-weight:800;}
.brand small{font-size:.6rem; letter-spacing:.09em; color:#9FB6CC;}
.drawer-close{display:none; margin-left:auto; background:none; border:none; color:#fff; font-size:1.4rem; cursor:pointer; line-height:1;}
.nav{flex:1; overflow-y:auto; padding:.7rem .65rem;}
.nav-item{display:flex; align-items:center; gap:.6rem; padding:.6rem .7rem; border-radius:9px; color:#C8D8E5; font-weight:600; font-size:.85rem; cursor:pointer; margin-bottom:2px; user-select:none;}
.nav-item svg{width:16px;height:16px; flex:none; opacity:.85;}
.nav-item:hover{background:rgba(255,255,255,.08); color:#fff;}
.nav-item.active{background:var(--blue); color:#fff;}
.nav-item .nav-badge{margin-left:auto; background:var(--bad); color:#fff; font-size:.64rem; font-weight:700; padding:1px 6px; border-radius:99px; font-family:var(--font-mono);}
.nav-sep{height:1px; background:rgba(255,255,255,.1); margin:.55rem .3rem;}
.sidebar-foot{padding:.85rem; border-top:1px solid rgba(255,255,255,.1);}
.role-box{background:rgba(255,255,255,.06); border-radius:var(--radius-sm); padding:.6rem .65rem;}
.role-box label{display:block; font-size:.6rem; text-transform:uppercase; letter-spacing:.06em; color:#9FB6CC; font-weight:700; margin-bottom:3px;}
.role-box select{width:100%; margin-bottom:.4rem; background:rgba(255,255,255,.92);}
.storage-note{font-size:.66rem; color:#8199B0; margin-top:.6rem; line-height:1.45; display:flex; gap:.35rem;}
.storage-note svg{width:12px;height:12px; flex:none; margin-top:2px;}

.main{min-width:0; display:flex; flex-direction:column;}
.topbar{position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--border-soft); display:flex; align-items:center; gap:.8rem; padding:.9rem 1.4rem;}
.hamburger{display:none; width:36px;height:36px;border-radius:9px;border:1px solid var(--border); background:var(--surface); align-items:center; justify-content:center; flex:none; cursor:pointer; color:var(--ink);}
.topbar-title{flex:1; min-width:0;}
.topbar-title h1{font-size:1.18rem;}
.topbar-sub{font-size:.78rem; color:var(--ink-faint); font-weight:500; margin-top:1px;}
.content{padding:1.35rem 1.5rem 4rem; flex:1;}
.view{display:none;}
.view.active{display:block; animation:fade .22s ease;}
@keyframes fade{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion: reduce){.view.active{animation:none;}}

/* ---------- primitives ---------- */
.btn{display:inline-flex; align-items:center; gap:.4rem; border-radius:9px; border:1px solid var(--border); background:var(--surface); color:var(--ink); font-weight:600; font-size:.83rem; padding:.52rem .85rem; cursor:pointer; white-space:nowrap; box-shadow:var(--shadow-sm); transition:filter .12s ease, transform .08s ease;}
.btn:hover{filter:brightness(0.97);}
.btn:active{transform:translateY(1px);}
.btn[disabled]{opacity:.42; cursor:not-allowed;}
.btn svg{width:15px;height:15px;}
.btn-primary{background:var(--blue); border-color:var(--blue); color:#fff;}
.btn-primary:hover{filter:brightness(1.07);}
.btn-navy{background:var(--navy); border-color:var(--navy); color:#fff;}
.btn-danger{background:var(--bad); border-color:var(--bad); color:#fff;}
.btn-ghost{background:transparent; border-color:transparent; box-shadow:none;}
.btn-ghost:hover{background:var(--surface-2);}
.btn-sm{padding:.32rem .6rem; font-size:.76rem; border-radius:7px;}
.btn-row{display:flex; gap:.5rem; flex-wrap:wrap;}

input,select,textarea{width:100%; border:1px solid var(--border); background:var(--surface); color:var(--ink); border-radius:8px; padding:.52rem .65rem; font-size:.85rem; font-family:inherit;}
textarea{resize:vertical; min-height:64px;}
label.field-label{display:block; font-size:.71rem; font-weight:700; color:var(--ink-soft); margin-bottom:.3rem; text-transform:uppercase; letter-spacing:.03em;}
.field{margin-bottom:.85rem;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 1rem;}
.form-grid .span2{grid-column:1/-1;}
.hint{font-size:.72rem; color:var(--ink-faint); margin-top:.25rem;}
.err-text{font-size:.75rem; color:var(--bad); margin-top:.3rem; font-weight:600;}

.card{background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius); box-shadow:var(--shadow-sm);}
.card-pad{padding:1.1rem 1.2rem;}
.card-header{display:flex; align-items:center; gap:.7rem; padding:1rem 1.2rem; border-bottom:1px solid var(--border-soft);}
.card-header h3{font-size:.98rem;}
.card-header-actions{margin-left:auto; display:flex; gap:.5rem;}

.hero{background:linear-gradient(135deg, var(--navy), var(--blue-ink)); color:#fff; border-radius:var(--radius); padding:1.4rem 1.6rem; margin-bottom:1.1rem; position:relative; overflow:hidden;}
.hero h2{color:#fff; font-size:1.25rem;}
.hero p{margin:.35rem 0 0; color:#C9DCEC; font-size:.86rem; max-width:46ch;}
.hero-badge{position:absolute; right:1.4rem; top:1.3rem; background:rgba(255,255,255,.14); color:#fff; font-size:.68rem; font-weight:700; padding:.3rem .6rem; border-radius:99px; letter-spacing:.03em;}

.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:.85rem; margin-bottom:1.2rem;}
.stat-tile{background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius); padding:1rem 1.1rem; box-shadow:var(--shadow-sm); position:relative; overflow:hidden; cursor:pointer;}
.stat-tile:hover{border-color:var(--blue);}
.stat-tile .stat-num{font-family:var(--font-display); font-size:1.85rem; font-weight:800; line-height:1;}
.stat-tile .stat-label{font-size:.75rem; color:var(--ink-soft); font-weight:600; margin-top:.4rem;}
.stat-tile .stat-icon{position:absolute; top:.8rem; right:.8rem; width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;}
.stat-tile .stat-icon svg{width:16px;height:16px;}
.stat-accent .stat-icon{background:var(--blue-soft); color:var(--blue-ink);}
.stat-good .stat-icon{background:var(--good-soft); color:var(--good);}
.stat-progress .stat-icon{background:var(--progress-soft); color:var(--progress);}
.stat-bad .stat-icon{background:var(--bad-soft); color:var(--bad);}

.chip{display:inline-flex; align-items:center; gap:.35rem; font-size:.71rem; font-weight:700; padding:.24rem .55rem; border-radius:99px; white-space:nowrap;}
.chip::before{content:''; width:6px;height:6px;border-radius:99px; background:currentColor;}
.chip-good{background:var(--good-soft); color:var(--good);}
.chip-progress{background:var(--progress-soft); color:var(--progress);}
.chip-bad{background:var(--bad-soft); color:var(--bad);}
.chip-neutral{background:var(--neutral-soft); color:var(--neutral);}

.table-wrap{overflow-x:auto; border-radius:var(--radius);}
table{width:100%; border-collapse:collapse; font-size:.83rem;}
thead th{text-align:left; font-size:.67rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); font-weight:700; padding:.55rem .8rem; border-bottom:1px solid var(--border); white-space:nowrap; background:var(--surface-2);}
tbody td{padding:.65rem .8rem; border-bottom:1px solid var(--border-soft); vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:var(--surface-2);}
tbody tr.clickable{cursor:pointer;}
.plate{font-family:var(--font-mono); font-weight:600; background:var(--surface-2); padding:.1rem .4rem; border-radius:5px; letter-spacing:.02em;}
.link-btn{background:none;border:none;color:var(--blue-ink);font-weight:600;cursor:pointer;padding:0;font-size:inherit;}
.link-btn:hover{text-decoration:underline;}
.muted{color:var(--ink-faint);}
.small{font-size:.76rem;}
.empty-state{padding:2.4rem 1rem; text-align:center; color:var(--ink-faint);}
.empty-state svg{width:34px;height:34px; margin-bottom:.6rem; opacity:.55;}

@media (max-width:800px){
  table.responsive thead{display:none;}
  table.responsive, table.responsive tbody, table.responsive tr, table.responsive td{display:block; width:100%;}
  table.responsive tr{border:1px solid var(--border-soft); border-radius:10px; margin-bottom:.6rem; padding:.5rem .75rem; background:var(--surface);}
  table.responsive td{display:flex; justify-content:space-between; gap:1rem; padding:.32rem 0; border:none; text-align:right;}
  table.responsive td::before{content:attr(data-label); font-weight:700; color:var(--ink-faint); font-size:.66rem; text-transform:uppercase; letter-spacing:.04em; text-align:left;}
  table.responsive td:empty{display:none;}
}

.filter-bar{display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; margin-bottom:.9rem;}
.filter-bar select, .filter-bar input{width:auto; min-width:150px;}
.filter-bar .grow{flex:1; min-width:180px;}

.tabs{display:flex; gap:.3rem; border-bottom:1px solid var(--border); margin-bottom:1rem; overflow-x:auto;}
.tab-btn{padding:.55rem .9rem; font-weight:700; font-size:.82rem; color:var(--ink-faint); background:none; border:none; border-bottom:2px solid transparent; cursor:pointer; white-space:nowrap;}
.tab-btn.active{color:var(--blue-ink); border-color:var(--blue);}

.modal-overlay{position:fixed; inset:0; background:rgba(7,20,35,.52); display:none; align-items:flex-start; justify-content:center; z-index:100; padding:3vh 1rem; overflow-y:auto;}
.modal-overlay.open{display:flex;}
.modal{background:var(--surface); border-radius:var(--radius); width:100%; max-width:640px; box-shadow:var(--shadow-lg); border:1px solid var(--border-soft); margin-bottom:3vh;}
.modal.modal-wide{max-width:900px;}
.modal-header{display:flex; align-items:flex-start; gap:.8rem; padding:1.1rem 1.3rem; border-bottom:1px solid var(--border-soft);}
.modal-header h3{font-size:1.05rem;}
.modal-close{margin-left:auto; background:none;border:none;cursor:pointer;color:var(--ink-faint); width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex:none;}
.modal-close:hover{background:var(--surface-2); color:var(--ink);}
.modal-body{padding:1.2rem 1.3rem; max-height:70vh; overflow-y:auto;}
.modal-footer{display:flex; gap:.6rem; justify-content:flex-end; padding:1rem 1.3rem; border-top:1px solid var(--border-soft); flex-wrap:wrap;}

.timeline{position:relative; padding-left:1.6rem;}
.timeline::before{content:'';position:absolute; left:5px; top:4px; bottom:4px; width:2px; background:var(--border);}
.tl-item{position:relative; padding-bottom:1.05rem;}
.tl-item:last-child{padding-bottom:0;}
.tl-dot{position:absolute; left:-1.6rem; top:2px; width:12px;height:12px;border-radius:99px; background:var(--blue); border:2px solid var(--surface); box-shadow:0 0 0 2px var(--blue);}
.tl-dot.dot-bad{background:var(--bad); box-shadow:0 0 0 2px var(--bad);}
.tl-dot.dot-good{background:var(--good); box-shadow:0 0 0 2px var(--good);}
.tl-time{font-family:var(--font-mono); font-size:.72rem; color:var(--ink-faint); font-weight:600;}
.tl-text{font-size:.86rem; font-weight:600; margin-top:1px;}
.tl-sub{font-size:.78rem; color:var(--ink-soft); margin-top:1px;}

.toast-wrap{position:fixed; bottom:1.2rem; left:50%; transform:translateX(-50%); z-index:300; display:flex; flex-direction:column; gap:.5rem; align-items:center; width:calc(100% - 2rem); max-width:420px;}
.toast{background:var(--navy); color:#fff; padding:.65rem 1rem; border-radius:9px; font-size:.83rem; font-weight:600; box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:.5rem; width:100%; justify-content:center; text-align:center;}
.toast.toast-bad{background:var(--bad);}
.toast.toast-good{background:var(--good);}

.drawer-overlay{position:fixed; inset:0; background:rgba(7,20,35,.45); z-index:90; display:none;}
.drawer-overlay.open{display:block;}
.bottom-tabs{display:none;}

@media (max-width:960px){
  .form-grid{grid-template-columns:1fr;}
  .stat-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:800px){
  .app{display:block;}
  .sidebar{position:fixed; left:0; top:0; bottom:0; width:270px; transform:translateX(-100%); transition:transform .22s ease; box-shadow:var(--shadow-lg);}
  .sidebar.open{transform:translateX(0);}
  .drawer-close{display:block;}
  .hamburger{display:flex;}
  .content{padding:1rem 1rem 5.5rem;}
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  .bottom-tabs{display:flex; position:fixed; bottom:0; left:0; right:0; z-index:60; background:var(--surface); border-top:1px solid var(--border); padding:.35rem .2rem calc(.35rem + env(safe-area-inset-bottom));}
  .bt-item{flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:.3rem 0; color:var(--ink-faint); background:none; border:none; font-size:.6rem; font-weight:700; cursor:pointer;}
  .bt-item svg{width:19px;height:19px;}
  .bt-item.active{color:var(--blue-ink);}
}
@media (max-width:520px){
  .stat-grid{grid-template-columns:1fr 1fr;}
  .modal-body{max-height:75vh;}
  .hero-badge{position:static; display:inline-block; margin-top:.6rem;}
}

.kv{display:grid; grid-template-columns:auto 1fr; gap:.35rem 1rem; font-size:.85rem;}
.kv dt{color:var(--ink-faint); font-weight:600;}
.kv dd{margin:0;}
.divider{height:1px; background:var(--border-soft); margin:1rem 0;}
.pill-list{display:flex; gap:.4rem; flex-wrap:wrap;}
.section-title{font-size:.67rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); font-weight:700; margin:0 0 .55rem;}
.banner{display:flex; gap:.6rem; align-items:flex-start; padding:.75rem .9rem; border-radius:9px; font-size:.82rem; margin-bottom:1rem;}
.banner-warn{background:var(--progress-soft); color:var(--progress);}
.banner-bad{background:var(--bad-soft); color:var(--bad);}
.banner-info{background:var(--blue-soft); color:var(--blue-ink);}
.banner svg{width:16px;height:16px;flex:none;margin-top:1px;}
.test-card{border:1px solid var(--border-soft); border-radius:var(--radius); padding:1rem 1.1rem; margin-bottom:.7rem;}
.test-card.pass{border-color:color-mix(in srgb, var(--good) 45%, var(--border-soft));}
.test-card.fail{border-color:color-mix(in srgb, var(--bad) 45%, var(--border-soft));}
.test-head{display:flex; align-items:center; gap:.6rem; margin-bottom:.4rem;}
.test-head b{font-size:.88rem;}
.step-list{margin:.4rem 0 0; padding-left:1.1rem; font-size:.78rem; color:var(--ink-soft);}
.step-list li{margin-bottom:.15rem;}
.rule-badge{font-family:var(--font-mono); font-size:.68rem; background:var(--surface-2); padding:.1rem .4rem; border-radius:5px; color:var(--ink-soft); font-weight:600;}