:root{--navy:#082a4d;--navy2:#0b3d6e;--blue:#0a6fc2;--cyan:#12b5d6;--yel:#ffd400;--red:#e4002b;--green:#12a150;--bg:#eef3f9;--card:#fff;--tx:#12263f;--mu:#6b7c93;--r:20px;--sh:0 10px 30px rgba(8,42,77,.08)}
*{box-sizing:border-box}body{margin:0;font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--tx);background:radial-gradient(900px 400px at 100% -10%,#cfe9ff 0,transparent 60%),radial-gradient(700px 400px at -10% 110%,#fff4b8 0,transparent 55%),var(--bg);min-height:100vh}
h1,h2,h3,h4{margin:0}.muted{color:var(--mu)}.c{text-align:center}.w100{width:100%}small{color:var(--mu)}
aside{position:fixed;inset:0 auto 0 0;width:260px;background:linear-gradient(170deg,var(--navy) 0,var(--navy2) 60%,#0d5a9c 100%);color:#fff;display:flex;flex-direction:column;padding:22px 16px;z-index:20;transition:.3s}
aside:before{content:"";position:absolute;inset:0;background:radial-gradient(240px 240px at 100% 0,rgba(255,212,0,.18),transparent 70%);pointer-events:none}
.brand{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:4px 8px 22px;position:relative}.brand img{width:52px;height:52px;object-fit:cover;border-radius:12px}.brand b{font-size:19px;display:block;letter-spacing:.3px}.brand small{color:#9cc4ea}
nav{display:flex;flex-direction:column;gap:4px;flex:1;position:relative}nav a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;color:#cfe3f7;text-decoration:none;font-weight:600;font-size:15px;transition:.2s}
nav a i{font-size:17px}nav a:hover{background:rgba(255,255,255,.1);color:#fff;transform:translateX(3px)}nav a.on{background:var(--yel);color:var(--navy);box-shadow:0 8px 20px rgba(255,212,0,.35)}
.badge-blink{margin-left:auto;background:var(--red);color:#fff;font-style:normal;font-size:13px;padding:2px 9px;border-radius:99px;animation:blink 1s infinite}
.me{display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.08);padding:10px;border-radius:16px;position:relative}.me b{font-size:14px;display:block;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.me small{color:#9cc4ea}
.av{width:38px;height:38px;border-radius:12px;background:var(--yel);color:var(--navy);display:grid;place-items:center;font-weight:800}
main{margin-left:260px;min-height:100vh}.top{display:flex;gap:14px;align-items:center;padding:26px 40px 6px;max-width:1680px;margin:0 auto}.top h1{font-size:26px;font-weight:800}#burger{display:none;border:0;background:#fff;border-radius:12px;width:42px;height:42px;font-size:22px;box-shadow:var(--sh)}
.content{padding:14px 40px 60px;width:100%;max-width:1680px;margin:0 auto}
.hello{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;background:linear-gradient(120deg,var(--navy),var(--blue));color:#fff;border-radius:var(--r);padding:26px 30px;margin-bottom:8px;position:relative;overflow:hidden}
.hello:after{content:"⚡";position:absolute;right:140px;top:-30px;font-size:150px;opacity:.09}.hello h2{font-size:24px}.hello p{margin:6px 0 0;color:#cfe3f7}
.sec{margin:28px 0 14px;font-size:17px;display:flex;align-items:center;gap:9px}.sec i{color:var(--blue)}.sec.urgent{color:var(--red)}.sec.urgent i{color:var(--red);animation:blink 1s infinite}
.btn{border:0;border-radius:14px;padding:11px 20px;font:700 15px 'Plus Jakarta Sans';cursor:pointer;display:inline-flex;align-items:center;gap:8px;justify-content:center;text-decoration:none;transition:.2s}.btn:hover{transform:translateY(-2px)}.btn.sm{padding:7px 12px;font-size:13px}
.btn-b{background:var(--blue);color:#fff;box-shadow:0 8px 18px rgba(10,111,194,.3)}.btn-y{background:var(--yel);color:var(--navy);box-shadow:0 8px 18px rgba(255,212,0,.4)}.btn-r{background:#fde8ec;color:var(--red)}.btn-g{background:#e6edf5;color:var(--tx)}
.card,.tbl{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:22px}.tbl{padding:6px;overflow-x:auto}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:22px}.stats.s3{grid-template-columns:repeat(3,minmax(0,1fr))}
.stat{border:0;text-align:left;background:var(--card);border-radius:var(--r);padding:18px 20px;box-shadow:var(--sh);display:grid;grid-template-columns:auto 1fr;gap:0 14px;align-items:center;font-family:inherit;cursor:pointer;border-left:6px solid}
.stat i{grid-row:span 2;font-size:28px}.stat b{font-size:30px;line-height:1}.stat span{color:var(--mu);font-size:14px;font-weight:600}
.st-available{border-color:var(--green)}.st-available i{color:var(--green)}.st-used{border-color:var(--red)}.st-used i{color:var(--red)}.st-reserved{border-color:#f2b600}.st-reserved i{color:#f2b600}.st-maint{border-color:#8a97a8}.st-maint i{color:#8a97a8}
.chips{margin:16px 0 4px}.chip{border:0;background:#fff;padding:8px 16px;border-radius:99px;font:600 14px inherit;cursor:pointer;box-shadow:var(--sh)}.chip.on{background:var(--navy);color:#fff}
.fleet,.pending,.sgrid,.mine{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin-top:14px}.pending{grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}.sgrid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.car{background:var(--card);border-radius:var(--r);padding:18px;box-shadow:var(--sh);position:relative;overflow:hidden;transition:.25s;border-top:5px solid}.car:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(8,42,77,.15)}
.car.s-available{border-color:var(--green)}.car.s-used{border-color:var(--red)}.car.s-reserved{border-color:#f2b600}.car.s-maint{border-color:#8a97a8;opacity:.8}
.car-top{display:flex;justify-content:space-between;align-items:center}.car-top>i{font-size:30px;color:var(--blue)}.car-type{font-weight:800;font-size:17px;margin:10px 0 8px}
.plate{display:inline-block;background:#fff;color:#111;border:3px solid #111;border-radius:8px;padding:3px 14px;font:800 18px 'Courier New',monospace;letter-spacing:2px;box-shadow:inset 0 0 0 2px #fff,0 2px 0 #111}.plate.sm{font-size:15px;padding:1px 10px}
.car-info{margin-top:12px;padding-top:12px;border-top:1px dashed #d6e0ec;display:flex;flex-direction:column;gap:3px;font-size:14px}.car-info.muted{color:var(--mu)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:99px;font-size:13px;font-weight:700}
.p-available{background:#e2f6ea;color:var(--green)}.p-used{background:#fde8ec;color:var(--red)}.p-reserved{background:#fff3c4;color:#a67c00}.p-maint{background:#e8ecf1;color:#59677a}
.b-warn{background:#fff3c4;color:#a67c00}.b-ok{background:#e2f6ea;color:var(--green)}.b-bad{background:#fde8ec;color:var(--red)}.b-mute{background:#e8ecf1;color:#59677a}.b-info{background:#dcefff;color:var(--blue)}.b-use{background:#ffe4d1;color:#c2570c}.b-telat{background:#ffd9d9;color:#9c0017;font-weight:800}
.dot{width:8px;height:8px;border-radius:50%;background:var(--red);animation:blink 1s infinite}
.pcard{background:#fffbe6;border-radius:var(--r);padding:20px;position:relative;border:2px solid var(--yel);animation:glow 1.3s ease-in-out infinite}
.pcard h4{font-size:17px;margin-top:6px}.pcard ul{list-style:none;padding:0;margin:14px 0;display:flex;flex-direction:column;gap:7px;font-size:14.5px}.pcard li i{color:var(--blue);margin-right:6px}.warn-t{color:var(--red)}
.ping{position:absolute;right:16px;top:16px;background:var(--red);color:#fff;font-size:12.5px;font-weight:800;padding:3px 10px;border-radius:99px;animation:blink 1s infinite}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(255,212,0,.9),0 0 0 rgba(228,0,43,0)}50%{box-shadow:0 0 0 7px rgba(255,212,0,.25),0 0 26px rgba(228,0,43,.45);border-color:var(--red)}}
@keyframes blink{50%{opacity:.35}}
.empty{background:var(--card);border-radius:var(--r);padding:34px;text-align:center;color:var(--mu);box-shadow:var(--sh)}.empty i{display:block;font-size:38px;margin-bottom:8px;color:var(--cyan)}
table{width:100%;border-collapse:collapse;font-size:14.5px}th{text-align:left;color:var(--mu);font-size:13px;text-transform:uppercase;letter-spacing:.5px;padding:14px}td{padding:12px 14px;border-top:1px solid #edf1f6;vertical-align:middle}tr.off{opacity:.5}.empty-td{text-align:center;color:var(--mu);padding:30px}
.thumb{width:70px;height:50px;object-fit:contain;background:#f2f6fb;padding:3px;border-radius:8px;margin-top:6px}
label{display:block;font-weight:700;font-size:14px;margin:14px 0 6px}input,select,textarea{width:100%;padding:12px 14px;border:2px solid #e1e8f0;border-radius:14px;font:500 15px 'Plus Jakarta Sans';background:#fff;color:var(--tx);outline:0;transition:.2s}input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(10,111,194,.12)}
.inline-form,.filters,.row-form{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}.inline-form>*,.filters>*{flex:1;min-width:150px;margin:0}.filters .btn,.inline-form .btn{flex:0 0 auto}.row-form{margin:0;flex-wrap:nowrap}.row-form input,.row-form select{min-width:120px;padding:8px 10px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;max-width:820px}.form-grid .full{grid-column:1/-1}
.seg{display:flex;gap:10px}.seg label{flex:1;margin:0}.seg input{display:none}.seg span{display:flex;align-items:center;justify-content:center;gap:8px;padding:13px;border:2px solid #e1e8f0;border-radius:14px;cursor:pointer;font-weight:700;transition:.2s}.seg input:checked+span{background:var(--navy);color:#fff;border-color:var(--navy)}.seg.sm span{padding:8px;font-size:14px}
.alert{padding:14px 18px;border-radius:14px;margin-bottom:16px;font-weight:600}.a-success{background:#e2f6ea;color:#0c7a3c}.a-danger{background:#fde8ec;color:#b3002a}
.tip{display:flex;gap:12px;background:#dcefff;color:var(--navy);padding:16px 18px;border-radius:16px;margin-bottom:16px;font-size:15px}.tip i{font-size:20px;color:var(--blue)}
.swap{display:grid;grid-template-columns:1fr auto 1.3fr;gap:18px;align-items:center;margin-bottom:16px}.swap-a{display:flex;flex-direction:column;gap:5px}.swap-ic{font-size:30px;color:var(--blue)}.swap-b .btn{margin-top:12px}
.mcard{background:#fff;border-radius:var(--r);padding:16px;box-shadow:var(--sh);display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.scard{background:#fff;border-radius:var(--r);padding:20px;box-shadow:var(--sh);border-top:6px solid var(--yel)}.scard.out{border-color:var(--red)}.scard .plate{font-size:26px;margin-bottom:8px}.scard ul{list-style:none;padding:0;margin:12px 0 16px;display:flex;flex-direction:column;gap:7px;font-size:15px}.scard li i{color:var(--blue);margin-right:6px}
dialog{border:0;border-radius:24px;padding:26px;width:min(480px,92vw);box-shadow:0 30px 80px rgba(8,42,77,.4)}dialog::backdrop{background:rgba(8,42,77,.55);backdrop-filter:blur(4px)}dialog h3{font-size:20px}
.dlg-act{display:flex;gap:10px;margin-top:18px;justify-content:flex-end}.check{display:flex;gap:10px;align-items:flex-start;font-weight:500}.check input{width:auto;margin-top:3px}.warnbox{background:#fff3c4;padding:12px;border-radius:14px}
.preview{display:none;width:100%;max-height:220px;object-fit:cover;border-radius:14px;margin-top:10px}
/* login */
body.login{display:grid;grid-template-columns:1.2fr 1fr;background:var(--navy)}.login-hero{background:linear-gradient(160deg,rgba(8,42,77,.55),rgba(8,42,77,.9)),var(--bg) center/cover;display:flex;align-items:flex-end;padding:56px;color:#fff;min-height:100vh}
.hero-txt h2{font-size:38px;line-height:1.2;margin:14px 0}.hero-txt p{color:#cfe3f7;max-width:440px}.tag{background:var(--yel);color:var(--navy);padding:6px 14px;border-radius:99px;font-weight:800;font-size:14px}
.login-box{display:grid;place-items:center;padding:24px;background:radial-gradient(500px 300px at 100% 0,#fff4b8,transparent 70%),#fff}.login-card{width:min(390px,100%)}.lg-logo{height:80px;margin-bottom:14px}.login-card h3{font-size:26px}
.ip{position:relative}.ip i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--mu)}.ip input{padding-left:42px}.login-card .btn{margin-top:22px;padding:14px}
@media(max-width:900px){aside{transform:translateX(-100%)}aside.open{transform:none}main{margin-left:0}#burger{display:block}.top,.content{padding-left:16px;padding-right:16px}.stats{grid-template-columns:1fr 1fr}.form-grid,.swap{grid-template-columns:1fr}.swap-ic{transform:rotate(90deg);justify-self:center}
body.login{grid-template-columns:1fr}.login-hero{min-height:230px;padding:26px}.hero-txt h2{font-size:24px}.hero-txt p{display:none}}

/* ===== revisi v2 ===== */
aside{overflow-y:auto}.me-t{min-width:0}.me-t b{max-width:none}
.logout-btn{position:relative;margin-top:12px;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:14px;background:rgba(228,0,43,.18);color:#ffd6dd;text-decoration:none;font-weight:700;border:1px solid rgba(255,255,255,.12);transition:.2s;z-index:2}.logout-btn:hover{background:var(--red);color:#fff}
#scrim{display:none;position:fixed;inset:0;background:rgba(8,42,77,.5);z-index:15;backdrop-filter:blur(2px)}#scrim.on{display:block}
.groups{display:flex;flex-direction:column;gap:12px;margin-top:18px}
details.grp{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;border-left:6px solid}
details.gr-available{border-color:var(--green)}details.gr-used{border-color:var(--red)}details.gr-reserved{border-color:#f2b600}details.gr-maint{border-color:#8a97a8}
details.grp summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:18px 22px;font-weight:800;font-size:16px}details.grp summary::-webkit-details-marker{display:none}
details.grp summary em{font-style:normal;color:var(--mu);font-weight:600;font-size:14px;margin-left:4px}.chev{margin-left:auto;transition:.25s}details[open] .chev{transform:rotate(180deg)}
details.gr-available summary>i:first-child{color:var(--green)}details.gr-used summary>i:first-child{color:var(--red)}details.gr-reserved summary>i:first-child{color:#f2b600}details.gr-maint summary>i:first-child{color:#8a97a8}
details.grp .fleet{padding:0 22px 22px;margin-top:0}.pad{padding:8px 4px}
.stat{transition:.2s}.stat:hover{transform:translateY(-3px)}.stats.s4{grid-template-columns:repeat(4,minmax(0,1fr))}
.dash2{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px;margin-top:18px;align-items:start}.side-col{display:flex;flex-direction:column;gap:18px}
.fm{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px}.fm .full{grid-column:1/-1}.fm .card-t{grid-column:1/-1}.fld{min-width:0}.fld label{margin-top:10px}
.card-t{font-size:17px;display:flex;align-items:center;gap:9px;margin-bottom:6px}.card-t i{color:var(--blue)}
.form-actions{margin-top:22px}.form-actions .btn{margin:0}.form-actions p{margin:12px 0 0;font-size:13.5px}.lg{padding:15px}
.seg{gap:14px;margin-top:2px}.seg span{padding:14px 10px}.seg.sm{gap:10px;margin-bottom:6px}.mt{margin-top:14px}
.swap-b{display:flex;flex-direction:column}.swap-b label{margin-top:12px}.swap{gap:22px}
.mrow{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:13px 0;border-bottom:1px dashed #d9e3ef}.mrow small{display:block;margin-top:3px}
.hint{background:#e8f4ff;color:var(--navy);border-radius:12px;padding:9px 12px;font-size:13.5px;margin-bottom:12px}.hint-w{background:#ffe9c9;color:#8a4b00}
.pf{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:end;margin-bottom:16px;padding:16px 22px}.pf>div{flex:1 1 170px;min-width:0}.pf label{margin-top:0}.pf .pf-btn{flex:0 0 auto}.pf .btn{padding:13px 20px}
.meta{margin:0 0 10px;color:var(--mu);font-size:14px}.meta b{color:var(--tx)}
.acts{white-space:nowrap}.acts>*{display:inline-block;vertical-align:middle;margin-right:6px}.ib{display:inline-block;margin:0}
tr.grp-row td{background:linear-gradient(90deg,#e4f0fc,#f4f8fd);font-weight:800;color:var(--navy);border-top:0}tr.grp-row i{color:var(--blue);margin-right:6px}
code{background:#eef3f9;padding:2px 8px;border-radius:8px;font-weight:700}.cnt{background:var(--navy);color:#fff;border-radius:99px;font-size:13px;padding:2px 10px}
.cred{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap;background:linear-gradient(120deg,#e2f6ea,#f4fff8);border:2px solid var(--green);border-radius:var(--r);padding:20px 24px;margin-bottom:18px}.cred div{display:flex;flex-direction:column;gap:6px}.cred b{color:#0c7a3c;font-size:16px}
button:disabled{opacity:.6;cursor:not-allowed;transform:none!important}
@media(max-width:1100px){.dash2{grid-template-columns:1fr}.stats,.stats.s4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.top,.content{padding-left:16px;padding-right:16px}.top{padding-top:18px}.fm{grid-template-columns:1fr}.hello{padding:20px}.pf>div{flex:1 1 100%}.pf .pf-btn{flex:1 1 100%}.pf .btn{width:100%}.sec{font-size:16px}.top h1{font-size:21px}}
@media(max-width:520px){.stats,.stats.s4{gap:10px}.stat{padding:14px}.stat b{font-size:24px}.fleet,.pending,.sgrid{grid-template-columns:1fr}details.grp .fleet{padding:0 14px 16px}}

/* ===== revisi v3 ===== */
.stats.s2{grid-template-columns:repeat(2,minmax(0,1fr))}.stats.s2 .stat{padding:22px 26px}.stats.s2 .stat b{font-size:38px}
.stat u{grid-column:2;text-decoration:none;font-size:12.5px;color:var(--blue);font-weight:700;opacity:.0;transition:.2s}.stat:hover u{opacity:1}
.stat.active{background:var(--navy);color:#fff}.stat.active span,.stat.active u{color:#cfe3f7;opacity:1}.stat.active b{color:#fff}
.panel{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:20px 22px 24px;margin-top:16px;border-left:6px solid;animation:pop .3s ease}
.panel[hidden]{display:none}.panel .fleet{margin-top:6px}
.panel.gr-available{border-color:var(--green)}.panel.gr-used{border-color:var(--red)}.panel.gr-reserved{border-color:#f2b600}.panel.gr-maint{border-color:#8a97a8}
.panel-h{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px}.panel-h em{font-style:normal;font-weight:600;font-size:14px;color:var(--mu)}
.panel.gr-available .panel-h>i{color:var(--green)}.panel.gr-used .panel-h>i{color:var(--red)}.panel.gr-reserved .panel-h>i{color:#f2b600}.panel.gr-maint .panel-h>i{color:#8a97a8}
.panel .x{margin-left:auto;border:0;background:#eef3f9;border-radius:10px;width:34px;height:34px;cursor:pointer;color:var(--tx)}
@keyframes pop{from{opacity:0;transform:translateY(8px)}}
dialog:not([open]){display:none!important}
/* ===== v5 ===== */
[hidden]{display:none!important}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.pf-btn.two{display:flex;gap:10px}
.car-top{justify-content:flex-end}.car-img{margin:8px 0 4px;height:84px;display:grid;place-items:center;background:linear-gradient(180deg,#eaf4ff,#fff);border-radius:16px}.car-svg{height:68px;width:auto;max-width:92%;filter:drop-shadow(0 6px 6px rgba(8,42,77,.18))}.car.s-maint .car-img{filter:grayscale(1);opacity:.7}
.modebox{margin-top:8px}
.cam{position:relative;border-radius:16px;overflow:hidden;background:#000;aspect-ratio:4/3;margin-top:8px}.cam video,.cam .shot{width:100%;height:100%;object-fit:cover;display:block}
.cam-time{position:absolute;left:10px;bottom:10px;background:rgba(0,0,0,.65);color:#fff;padding:5px 10px;border-radius:8px;font:700 14px monospace}
.cam-msg{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:#fff;padding:20px;background:rgba(8,42,77,.92);font-size:15px}
.cam-btns{display:flex;gap:10px;margin-top:12px}.cam-btns .btn{flex:1}
/* ===== login kaca ===== */
body.lg{margin:0;min-height:100vh;display:flex;justify-content:center;align-items:flex-start;overflow-x:hidden;background:#061c36;position:relative}
.lg-bg{position:fixed;inset:0;background:linear-gradient(180deg,rgba(6,28,54,.55),rgba(8,60,110,.25) 50%,rgba(6,28,54,.6)),var(--bg) center 40%/cover no-repeat;animation:kb 26s ease-in-out infinite alternate}
@keyframes kb{to{transform:scale(1.07)}}
.orb{position:fixed;border-radius:50%;filter:blur(70px);opacity:.5;animation:fl 14s ease-in-out infinite alternate}.o1{width:360px;height:360px;background:var(--yel);left:-90px;top:-80px}.o2{width:400px;height:400px;background:var(--cyan);right:-100px;bottom:-120px;animation-delay:-5s}.o3{width:220px;height:220px;background:#e4002b;right:25%;top:-90px;opacity:.28;animation-delay:-9s}
@keyframes fl{to{transform:translate(50px,40px) scale(1.15)}}
.lg-wrap{position:relative;z-index:2;width:min(520px,92vw);display:flex;flex-direction:column;gap:22px;padding:34px 0 40px}
.lg-left{color:#fff;text-align:center;text-shadow:0 2px 14px rgba(0,0,0,.5)}.lg-left h2{font-size:clamp(25px,5.5vw,38px);line-height:1.18;margin:14px 0 10px;font-weight:800}.lg-left h2 span{color:var(--yel)}
.lg-left p{color:#e3eefb;font-size:15px;line-height:1.6;margin:0 auto;max-width:460px}
.lg-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;justify-content:center}.lg-chips span{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:99px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(10px);font-weight:600;font-size:13.5px;text-shadow:none}.lg-chips i{color:var(--yel)}
.glass{background:linear-gradient(145deg,rgba(255,255,255,.2),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.42);border-radius:30px;backdrop-filter:blur(18px) saturate(170%);-webkit-backdrop-filter:blur(18px) saturate(170%);box-shadow:0 30px 80px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.55);padding:34px 32px;color:#fff}
.lg-logo2{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;margin-bottom:18px}.lg-logo2 .tile{width:60px;height:60px;border-radius:16px;background:var(--yel);overflow:hidden;box-shadow:0 10px 26px rgba(255,212,0,.45)}.lg-logo2 img{width:100%;height:100%;object-fit:cover;display:block}.lg-logo2 b{font-size:21px;display:block}.lg-logo2 small{color:#d5e6f8;display:block}
.glass h3{font-size:25px;margin:0 0 4px}.glass .sub{color:#e0edfb;margin:0 0 4px;font-size:15px}.glass label{color:#f0f6ff;margin-top:16px}
.glass .ip>i{z-index:2;font-size:18px;color:#fff}
.glass .ip input{background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.38);color:#fff;padding:14px 50px 14px 44px}.glass .ip input::placeholder{color:rgba(255,255,255,.65)}.glass .ip input:focus{border-color:var(--yel);background:rgba(255,255,255,.22);box-shadow:0 0 0 4px rgba(255,212,0,.2)}
.glass .ip .eye{position:absolute;left:auto;right:6px;top:50%;transform:translateY(-50%);width:40px;height:40px;padding:0;border:0;background:none;box-shadow:none;border-radius:0;display:grid;place-items:center;cursor:pointer;z-index:3}
.glass .ip .eye i{position:static;transform:none;font-size:22px;color:#fff;line-height:1}.glass .ip .eye:hover i{color:var(--yel)}
.glass input:-webkit-autofill,.glass input:-webkit-autofill:hover,.glass input:-webkit-autofill:focus{-webkit-text-fill-color:#fff;caret-color:#fff;-webkit-box-shadow:0 0 0 1000px rgba(16,58,108,.75) inset;transition:background-color 9999s}
.glass .btn{margin-top:24px;padding:15px;font-size:15.5px;background:linear-gradient(135deg,var(--yel),#ffb800);color:var(--navy);box-shadow:0 12px 28px rgba(255,190,0,.45)}
.glass .alert{margin-top:14px;background:rgba(228,0,43,.28);color:#fff;border:1px solid rgba(255,255,255,.35)}.lg-foot{text-align:center;margin-top:18px;font-size:13px;color:#d0e2f5}
@media(max-width:520px){.glass{padding:28px 22px}.lg-wrap{gap:18px;padding-top:24px}}

/* ===== v6 ===== */
.thumb{width:64px;height:44px;object-fit:contain;background:#f2f6fb;padding:3px;border-radius:8px}
.car-img img{width:100%;height:100%;object-fit:cover;border-radius:16px}
.swapreq{border-left:6px solid var(--yel);margin-bottom:14px}.swapreq p{margin:6px 0}
.swapcompare{display:flex;align-items:center;gap:14px;margin-top:10px;font-size:14px}.swapcompare>div{flex:1;background:#f4f8fd;border-radius:12px;padding:10px 12px}.swapcompare i{color:var(--blue);font-size:20px}
.small{font-size:13px}
/* ===== v7 ===== */
.car-img.editable{border:0;padding:0;cursor:pointer;position:relative;width:100%}
.car-img.editable .cf-ov{position:absolute;inset:0;background:rgba(8,42,77,.72);color:#fff;display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px;font-weight:700;border-radius:16px;opacity:0;transition:.2s}
.car-img.editable:hover .cf-ov{opacity:1}
.warnbox.banner{display:flex;gap:10px;align-items:center;margin-bottom:16px;font-size:14px}
/* ===== v8: pagination, popup kendaraan ===== */
.mt8{margin-top:10px}
.pagin{display:flex;gap:6px;justify-content:center;align-items:center;margin:18px 0 6px;flex-wrap:wrap}
.pagin a{min-width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:#fff;box-shadow:var(--sh);color:var(--tx);text-decoration:none;font-weight:700;font-size:14px}
.pagin a.on{background:var(--navy);color:#fff}
.pagin .dots{padding:0 4px;color:var(--mu)}
/* ===== v9 ===== */
.sec.all-hidden{opacity:.35}
.timepick{display:flex;align-items:center;gap:6px}.timepick select{flex:1;min-width:0}.timepick b{color:var(--mu)}
/* ===== v10: status terlambat kembali ===== */
.stats.s5{grid-template-columns:repeat(5,minmax(0,1fr))}
.st-telat{border-color:#c2001f;animation:pulsebg 1.4s infinite}.st-telat i{color:#c2001f}
@keyframes pulsebg{0%,100%{box-shadow:0 0 0 0 rgba(194,0,31,0)}50%{box-shadow:0 0 0 4px rgba(194,0,31,.18)}}
.p-telat{background:#ffd9d9;color:#9c0017;font-weight:800}
.panel.gr-telat{border-color:#c2001f}.panel.gr-telat .panel-h>i{color:#c2001f}
.car.s-telat{border-color:#c2001f;animation:pulsebg 1.6s infinite}
.warn-t{color:#c2001f;font-weight:700}
.scard.telat{border-top-color:#c2001f;animation:pulsebg 1.6s infinite}
.telat-badge{display:inline-block;margin-bottom:8px}
/* logo sidebar baru (dashboard_logo.png) — gambar sudah memuat nama+tagline sendiri, jadi dibuat lebih lebar & proporsional, tidak dipotong kotak kecil */
.brand.brand-logo{padding-bottom:18px}
.brand.brand-logo img{width:150px;height:auto;max-height:110px;object-fit:contain;border-radius:0}


/* ===== v11: laporan, maintenance, multi-unit, profil, dan tampilan responsif ===== */
.page-tools{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 16px}.export-actions{display:flex;gap:9px;flex-wrap:wrap}.export-actions .btn{box-shadow:0 7px 18px rgba(8,42,77,.11)}
.report-intro{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;padding:24px;margin:0 0 20px;border-radius:24px;color:#fff;background:linear-gradient(125deg,#082a4d 0%,#0a6fc2 55%,#12b5d6 100%);box-shadow:0 16px 38px rgba(8,42,77,.16);position:relative;overflow:hidden}.report-intro:after{content:"";position:absolute;width:220px;height:220px;border:34px solid rgba(255,255,255,.09);border-radius:50%;right:-40px;top:-95px;pointer-events:none}.report-intro>div{position:relative;z-index:1}.report-intro h2{font-size:clamp(21px,2vw,29px);margin:8px 0;color:#fff}.report-intro p{color:#e2f2ff;line-height:1.65;max-width:750px;margin:0}.eyebrow{display:inline-flex;gap:7px;align-items:center;font-weight:800;letter-spacing:.1em;font-size:12.5px;color:#ffdf4d}.report-filters{min-width:min(100%,215px);background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);padding:14px;border-radius:16px;backdrop-filter:blur(10px)}.report-filters form{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:end}.report-filters label{display:block;color:#eaf5ff;font-size:12.5px;font-weight:800}.report-filters select{width:100%;padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,.35);background:#fff;color:var(--tx)}.report-filters button{grid-column:1/-1;width:100%}
.report-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:24px}.report-kpi{position:relative;overflow:hidden;min-height:134px;padding:20px;border-radius:19px;background:#fff;box-shadow:var(--sh);border:1px solid rgba(8,42,77,.07);display:flex;flex-direction:column;gap:5px}.report-kpi>span{font-size:13px;font-weight:800;color:var(--mu);position:relative;z-index:1}.report-kpi>b{font-size:29px;line-height:1.2;letter-spacing:-.03em;position:relative;z-index:1;overflow-wrap:anywhere}.report-kpi>b small{font-size:15px;color:var(--mu)}.report-kpi>small{font-size:12.5px;color:var(--mu);max-width:85%;position:relative;z-index:1}.report-kpi>i{position:absolute;right:12px;bottom:8px;font-size:49px;opacity:.13}.kpi-blue{border-top:4px solid #0a6fc2}.kpi-blue>b,.kpi-blue>i{color:#0a6fc2}.kpi-cyan{border-top:4px solid #12b5d6}.kpi-cyan>b,.kpi-cyan>i{color:#078fae}.kpi-violet{border-top:4px solid #8066db}.kpi-violet>b,.kpi-violet>i{color:#7050cf}.kpi-amber{border-top:4px solid #ffb800}.kpi-amber>b,.kpi-amber>i{color:#a96a00}
.report-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:22px 0 12px}.report-section-head h3{margin:0;font-size:17px;display:flex;align-items:center;gap:8px}.report-section-head h3 i{color:var(--blue)}.report-section-head p{margin:5px 0 0;color:var(--mu);font-size:13px}.subtle-tag,.unit-current{padding:8px 12px;border-radius:99px;background:#e8f4ff;color:#075d9f;font-size:13px;font-weight:800}.report-car-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin:0 0 23px}.report-car{overflow:hidden;min-width:0;border-radius:18px;background:#fff;box-shadow:var(--sh);border:1px solid rgba(8,42,77,.07);transition:transform .2s,box-shadow .2s}.report-car:hover{transform:translateY(-3px);box-shadow:0 16px 30px rgba(8,42,77,.12)}.report-car-visual{height:115px;position:relative;display:grid;place-items:center;background:linear-gradient(145deg,#e8f5ff,#f5fbff 58%,#fff)}.report-car-visual img{width:100%;height:100%;object-fit:contain;object-position:center;padding:9px;box-sizing:border-box}.report-car-visual .car-svg{width:72%;height:75px}.report-car-status{position:absolute;top:9px;left:9px;border-radius:99px;padding:5px 9px;font-size:12px;font-weight:900}.status-active{background:#d8f7e6;color:#087844}.status-inactive{background:#ffe0e5;color:#a80a2d}.status-maint{background:#fff0ca;color:#8b5d00}.report-car-copy{padding:13px}.report-car-copy>small{display:block;color:var(--mu);font-size:12.5px;margin-bottom:4px}.plate-button{display:inline-flex;gap:6px;align-items:center;border:0;background:#edf6ff;color:#075da3;padding:7px 9px;border-radius:9px;cursor:pointer;font:inherit;font-size:14px;font-weight:900}.plate-button:hover{background:#d9edff}.report-car-metrics{display:grid;grid-template-columns:1fr 1.2fr;gap:8px;margin-top:12px}.report-car-metrics>span{min-width:0;padding:9px;background:#f4f8fc;border-radius:10px}.report-car-metrics b{display:block;font-size:14px;overflow-wrap:anywhere}.report-car-metrics small{display:block;font-size:12px;color:var(--mu);margin-top:2px}.report-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:18px}.report-panel{min-width:0;background:#fff;border:1px solid rgba(8,42,77,.08);border-radius:20px;box-shadow:var(--sh);padding:19px;margin-bottom:17px}.report-panel .report-section-head{margin:0 0 15px}.report-panel .tbl{box-shadow:none;margin:0}.hbar-chart{display:flex;flex-direction:column;gap:13px;padding:6px 0}.hbar-row{display:grid;grid-template-columns:minmax(100px,155px) minmax(40px,1fr) 26px;align-items:center;gap:10px}.hbar-label{min-width:0;display:flex;flex-direction:column}.hbar-label b{font-size:13px;overflow-wrap:anywhere}.hbar-label small{color:var(--mu);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hbar-track{height:13px;background:#edf3f9;border-radius:99px;overflow:hidden}.hbar-track span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#0a6fc2,#12b5d6,#7bd8e7);min-width:2px}.hbar-row>strong{font-size:13px;text-align:right}.month-chart{display:flex;align-items:stretch;gap:7px;height:210px;padding:12px 5px 0;border-bottom:1px solid #dfe9f3}.month-column{flex:1;min-width:0;display:flex;align-items:center;flex-direction:column;gap:5px}.month-value{font-size:12px;font-weight:800;color:var(--navy)}.month-bar-wrap{flex:1;width:100%;max-width:30px;display:flex;align-items:flex-end;background:#f0f5fa;border-radius:8px 8px 0 0;overflow:hidden}.month-bar-wrap span{display:block;width:100%;min-height:3px;border-radius:8px 8px 0 0;background:linear-gradient(180deg,#12b5d6,#0a6fc2)}.month-column small{font-size:12px;color:var(--mu)}.metric-pill{display:inline-flex;min-width:28px;justify-content:center;border-radius:99px;background:#e5f3ff;color:#075d9f;padding:4px 9px;font-weight:900}.duration-chip{display:inline-flex;white-space:nowrap;background:#e7f8f2;color:#087751;padding:5px 8px;border-radius:9px;font:800 12.5px ui-monospace,monospace}.report-cell-sub{display:block;color:var(--mu);font-size:12px;margin-top:3px}.vehicle-dialog{width:min(680px,calc(100% - 24px));max-height:88dvh;overflow:auto;border:0;border-radius:22px;padding:22px;box-shadow:0 22px 70px rgba(5,27,50,.28)}.vehicle-dialog::backdrop,dialog::backdrop{background:rgba(5,27,50,.58);backdrop-filter:blur(3px)}.vehicle-modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.vehicle-modal-head h3{margin:0 0 4px}.vehicle-modal-head p{margin:0}.modal-x{flex:0 0 36px;margin-left:auto;font-size:21px;line-height:1}.vehicle-image{height:190px!important;overflow:hidden}.vehicle-image img{width:100%;height:100%;object-fit:contain;object-position:center;background:#f2f6fb;padding:10px;box-sizing:border-box}.vehicle-dual-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 20px}.vehicle-action{display:flex;width:100%;min-height:54px;align-items:center;justify-content:center;gap:8px;padding:10px!important;white-space:normal;text-align:center}.vehicle-action i{font-size:19px;flex-shrink:0}.maintenance-settings,.maintenance-record{margin-top:14px;padding:15px;border-radius:15px;background:#f6faff;border:1px solid #e2edf7}.maintenance-settings label,.maintenance-record h4{margin-top:0}.inline-form{display:flex;align-items:center;gap:8px}.inline-form select{flex:1;min-width:0}.maintenance-record h4{display:flex;gap:7px;align-items:center}.maintenance-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.maintenance-form-grid .full{grid-column:1/-1}.maintenance-history{margin-top:18px}.maintenance-history h4{margin:0 0 10px}.history-list{display:grid;gap:8px}.history-item{display:grid;grid-template-columns:auto auto;gap:4px 10px;padding:12px;border-left:4px solid #12b5d6;background:#f2f8fc;border-radius:10px;font-size:13px}.history-item small{grid-column:1/-1;color:var(--mu)}.history-date{font-weight:900;color:var(--navy)}.maintenance-alert{padding:10px 12px;border-radius:12px;margin:9px 0;font-size:13px;font-weight:800}.alert-warning{background:#fff4cf;color:#865b00}.alert-danger{background:#ffe0e4;color:#a20d2d}.maint-due{display:inline-flex;padding:6px 8px;border-radius:8px;background:#eaf4ff;color:#075d9f;font-size:12.5px;font-weight:800}.maint-due.due-soon{background:#fff1c9;color:#855b00}.maint-due.due-late{background:#ffe0e4;color:#a20d2d}.delete-car-form{margin-top:18px;border-top:1px solid #e7edf4;padding-top:15px}.unit-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:16px;align-items:start}.unit-add-form{display:grid;gap:8px}.unit-add-form label{margin:4px 0 0}.template-links{display:flex;flex-direction:column;gap:8px;margin-top:15px;padding:14px;background:#f5f9fd;border-radius:12px}.template-links a{color:#075da3;text-decoration:none;font-weight:800;font-size:13px}.template-links a:hover{text-decoration:underline}.template-links small{color:var(--mu);line-height:1.55}.unit-current{display:inline-flex;align-items:center;gap:7px;margin-top:14px;background:rgba(255,255,255,.17);color:#fff;border:1px solid rgba(255,255,255,.3)}.unit-current code{color:#fff}.current-unit-row{background:#eaf7ff!important}.vehicle-dialog form label{display:block}.vehicle-dialog input,.vehicle-dialog select,.vehicle-dialog textarea,.unit-add-form input,.unit-add-form select,.profile-form input{max-width:100%}
.profile-wrap{max-width:850px;margin:0 auto}.profile-hero{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:23px;margin-bottom:18px;border-radius:22px;background:linear-gradient(120deg,#082a4d,#0a6fc2 65%,#12b5d6);color:#fff;box-shadow:0 16px 34px rgba(8,42,77,.15)}.profile-avatar{width:62px;height:62px;display:grid;place-items:center;border-radius:20px;background:linear-gradient(135deg,#ffd400,#ffb800);color:#082a4d;font-size:26px;font-weight:900;box-shadow:0 8px 18px rgba(0,0,0,.12)}.profile-hero h2{margin:5px 0;color:#fff}.profile-hero p{margin:0;color:#dceeff;font-size:14px}.profile-hero>.pill{margin-left:auto}.profile-panel{padding:22px}.profile-form{margin-top:15px}.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.profile-grid>div{min-width:0;display:flex;flex-direction:column}.profile-grid label{font-weight:800;font-size:13px;margin-bottom:7px}.profile-grid small{color:var(--mu);font-size:12.5px;margin-top:6px;line-height:1.45}.profile-grid .full{grid-column:1/-1}.profile-grid input:disabled{background:#f2f6fa;color:#60748a}.profile-security-note{display:flex;gap:10px;align-items:flex-start;margin-top:18px;padding:13px;background:#edf7ff;border-radius:12px;color:#245a80;font-size:13px;line-height:1.55}.profile-security-note i{font-size:17px}.profile-form .dlg-act{margin-top:18px}.profile-meta{text-align:center;font-size:12.5px;color:var(--mu)}.required{color:#c60027}
@media(max-width:1250px){.report-car-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.report-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.report-grid-2,.unit-layout{grid-template-columns:1fr}.report-car-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.report-intro{padding:19px}.report-filters{width:100%;max-width:400px}.hbar-row{grid-template-columns:minmax(90px,125px) minmax(35px,1fr) 24px}.page-tools{align-items:flex-start}.export-actions{width:100%}.export-actions .btn{flex:1}.vehicle-dialog{padding:18px}}
@media(max-width:560px){.report-kpis{grid-template-columns:1fr 1fr;gap:9px}.report-kpi{min-height:122px;padding:14px}.report-kpi>b{font-size:23px}.report-kpi>i{font-size:35px}.report-car-grid{grid-template-columns:1fr 1fr;gap:9px}.report-car-visual{height:95px}.report-car-copy{padding:10px}.report-car-metrics{grid-template-columns:1fr;gap:5px}.report-car-metrics>span{padding:7px}.report-car-metrics b{font-size:13px}.report-car-metrics small{font-size:12px}.report-panel{padding:13px;border-radius:16px}.report-intro{border-radius:18px}.report-intro h2{font-size:21px}.report-filters form{grid-template-columns:1fr 1fr}.hbar-row{grid-template-columns:84px minmax(20px,1fr) 20px;gap:6px}.hbar-label b{font-size:12px}.hbar-label small{font-size:12px}.hbar-track{height:11px}.month-chart{height:170px;gap:3px}.month-column small,.month-value{font-size:12px}.vehicle-dialog{width:calc(100% - 14px);padding:14px;border-radius:18px}.vehicle-image{height:145px!important}.vehicle-dual-actions{gap:7px}.vehicle-action{font-size:12.5px!important;min-height:58px}.vehicle-action i{font-size:16px}.maintenance-form-grid,.profile-grid{grid-template-columns:1fr}.maintenance-form-grid .full,.profile-grid .full{grid-column:auto}.inline-form{align-items:stretch;flex-direction:column}.inline-form .btn{width:100%}.profile-hero{padding:16px;gap:12px}.profile-avatar{width:50px;height:50px}.profile-hero h2{font-size:19px}.profile-hero>.pill{margin-left:0}.profile-panel{padding:15px}.export-actions .btn{font-size:12.5px;padding:10px}.page-tools .meta{width:100%}}
@media(prefers-reduced-motion:reduce){.report-car{transition:none}.report-car:hover{transform:none}}

.filter-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.filter-export-actions{display:flex;gap:8px;flex-wrap:wrap}.filter-export-actions .btn{white-space:nowrap}.filter-export-actions .btn-r{background:#fff0f2;color:#b30c2c;border:1px solid #ffd3dc}@media(max-width:900px){.filter-actions,.filter-export-actions{width:100%}.filter-actions>.btn,.filter-export-actions>.btn{flex:1}.filter-export-actions .btn{font-size:12.5px;padding:10px 12px}}


/* ===== FLEETRA VISUAL POLISH — INTERNAL PAGES ONLY (login untouched) ===== */
main .top{position:relative}
main .top:after{content:"";height:3px;width:76px;border-radius:99px;background:linear-gradient(90deg,#ffd400,#12b5d6);position:absolute;left:40px;bottom:-3px;opacity:.9}
main .content{animation:fleetraContentIn .32s ease both}
@keyframes fleetraContentIn{from{opacity:.72;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
main .hello{box-shadow:0 18px 40px rgba(8,42,77,.18),inset 0 1px 0 rgba(255,255,255,.12)}
main .sec:not(.urgent) i{display:inline-grid;place-items:center;width:31px;height:31px;border-radius:10px;background:linear-gradient(135deg,#e0f4ff,#f0fbff);box-shadow:inset 0 0 0 1px rgba(18,181,214,.1)}
main .card,main .tbl,main .report-panel,main .stat,main .car,main .report-car{border:1px solid rgba(8,42,77,.075)}
main .card,main .report-panel,main .stat,main .car{transition:box-shadow .2s ease,border-color .2s ease,transform .2s ease}
main .card:hover,main .report-panel:hover{box-shadow:0 16px 36px rgba(8,42,77,.105);border-color:rgba(18,181,214,.24)}
main .stat{position:relative;overflow:hidden}
main .stat:after{content:"";position:absolute;width:86px;height:86px;border-radius:50%;right:-38px;top:-42px;background:linear-gradient(135deg,rgba(18,181,214,.12),rgba(255,212,0,.2));pointer-events:none}
main .stat:hover{transform:translateY(-3px);box-shadow:0 18px 34px rgba(8,42,77,.12)}
main .tbl{border:1px solid #e3ebf4;background:linear-gradient(180deg,#fff 0%,#fcfdff 100%);box-shadow:0 10px 28px rgba(8,42,77,.055)}
main .tbl table{min-width:680px}
main .tbl th{background:#f2f7fc;color:#49627b;white-space:nowrap;border-top:0}
main .tbl td{border-top:1px solid #edf2f8}
main .tbl tr:hover td{background:rgba(224,243,255,.4)}
main .btn{font-weight:800;letter-spacing:-.01em;box-shadow:0 6px 15px rgba(8,42,77,.075)}
main .btn-b{background:linear-gradient(135deg,#0a6fc2,#07579d);box-shadow:0 8px 18px rgba(10,111,194,.24)}
main .btn-y{background:linear-gradient(135deg,#ffe45c,#ffd000);box-shadow:0 8px 18px rgba(255,196,0,.2)}
main .btn:focus-visible,main a:focus-visible,main button:focus-visible{outline:3px solid rgba(18,181,214,.5);outline-offset:2px}
main input,main select,main textarea{box-shadow:0 2px 4px rgba(8,42,77,.018)}
main input:focus,main select:focus,main textarea:focus{border-color:#12a8cf;box-shadow:0 0 0 4px rgba(18,181,214,.14)}
main .alert{box-shadow:0 8px 22px rgba(8,42,77,.06);border:1px solid rgba(8,42,77,.04)}
main .pagin a{border:1px solid #e5edf6;transition:transform .16s ease,background .16s ease,color .16s ease}
main .pagin a:hover{transform:translateY(-2px);background:#eaf7ff;color:#075d9f}
main .pagin a.on{background:linear-gradient(135deg,#082a4d,#0a6fc2);border-color:transparent;box-shadow:0 8px 16px rgba(8,42,77,.2)}
main dialog{color:var(--tx);border:1px solid rgba(255,255,255,.6);background:linear-gradient(180deg,#fff 0%,#fbfdff 100%)}
main .vehicle-modal-head .x:hover{transform:rotate(90deg);background:#fff0f2;color:#c10b31}
main .report-tags{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
main .most-used-tag{background:linear-gradient(135deg,#fff4ce,#ffed9d);color:#815800;border:1px solid #ffe28a}
main .report-car:hover{border-color:rgba(18,181,214,.4)}
main .history-item{border-radius:12px;transition:transform .16s ease,box-shadow .16s ease}
main .history-item:hover{transform:translateX(2px);box-shadow:0 6px 15px rgba(8,42,77,.07)}
main .profile-hero{position:relative;overflow:hidden}
main .profile-hero:after{content:"";position:absolute;right:-45px;bottom:-95px;width:230px;height:230px;border:26px solid rgba(255,255,255,.12);border-radius:50%;pointer-events:none}
main .profile-panel{border-top:4px solid #12b5d6}
main .unit-directory .current-unit-row td{background:#eaf7ff}
@media(max-width:900px){main .top:after{left:16px}main .tbl{border-radius:15px}main .hello{border-radius:18px}main .report-tags{width:100%}}
@media(max-width:560px){main .tbl table{min-width:620px}main .sec{gap:7px;align-items:flex-start}main .report-tags .subtle-tag{max-width:100%;white-space:normal}main .vehicle-modal-head h3{font-size:17px}main .report-panel:hover,main .card:hover{transform:none}}
@media(prefers-reduced-motion:reduce){main .content{animation:none}main .card,main .report-panel,main .stat,main .car,main .report-car,main .pagin a,main .history-item{transition:none}}


/* ===== FLEETRA 2026 — tampilan internal diselaraskan dengan referensi dashboard ===== */
:root{--navy:#082a55;--navy2:#0a3a70;--blue:#0878e8;--cyan:#13b8db;--yel:#ffd21c;--bg:#f1f6fc;--card:#fff;--tx:#14345d;--mu:#7489a5;--sh:0 8px 26px rgba(27,66,110,.075)}
body:not(.lg){background:linear-gradient(135deg,#f3f8fe 0%,#eef5fd 50%,#f8fbff 100%);color:#15365f}
aside{width:278px;padding:24px 18px 18px;background:linear-gradient(178deg,#08274d 0%,#07386d 70%,#0c569b 100%);box-shadow:8px 0 28px rgba(4,34,69,.08)}
aside:before{background:radial-gradient(290px 250px at 100% 0,rgba(19,184,219,.14),transparent 72%),linear-gradient(145deg,transparent 70%,rgba(12,111,194,.25) 70%);pointer-events:none}
.brand{padding:4px 4px 26px;min-height:88px}.brand img{width:190px!important;height:72px!important;max-width:100%;object-fit:contain!important;border-radius:0!important}
nav{gap:6px}nav a{min-height:45px;padding:12px 14px;border-radius:12px;color:#d7e7f8;font-size:14px;font-weight:650}nav a i{font-size:18px;min-width:20px;text-align:center}nav a:hover{background:rgba(255,255,255,.10);transform:translateX(2px)}nav a.on{background:linear-gradient(120deg,#147fef,#075fbd);color:#fff;box-shadow:0 8px 20px rgba(0,104,219,.28)}
.sidebar-unit-card{display:flex;gap:10px;align-items:center;padding:12px 11px;margin:12px 2px 12px;border:1px solid rgba(67,163,255,.28);border-radius:17px;background:linear-gradient(145deg,rgba(4,68,136,.45),rgba(4,32,68,.32));position:relative;z-index:1;color:#fff}.sidebar-unit-mark{width:38px;height:38px;flex:0 0 38px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#fff,#e6f4ff);color:#1477d2;font-size:18px}.sidebar-unit-card div{min-width:0;flex:1}.sidebar-unit-card b{display:block;font-size:12.5px;line-height:1.4}.sidebar-unit-card small{display:block;color:#bdd8f5;font-size:12px;line-height:1.5;margin-top:3px}.sidebar-unit-card>i{color:#92c8ff;font-size:13px}
.me{background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.06);padding:10px;border-radius:15px}.av{background:#ffd21c;color:#073263;border-radius:12px}.logout-btn{border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.08);color:#edf6ff}
main{margin-left:278px}.top{max-width:none;padding:24px 28px 9px;display:flex;align-items:center;gap:17px}.top h1{font-size:25px;letter-spacing:-.7px;color:#102f5d}.top-title-wrap{min-width:0;display:flex;flex-direction:column;gap:1px}.top-subtitle{display:block;color:#55769f;font-size:13px;font-weight:550}.top #clock{font-size:12.5px;color:#8a9eb7;margin-top:3px}.top-user-actions{display:flex;align-items:center;gap:15px;margin-left:auto}.top-notification{width:38px;height:38px;display:grid;place-items:center;position:relative;text-decoration:none;color:#173b6d;background:#fff;border:1px solid #e2eaf5;border-radius:13px;box-shadow:0 4px 14px rgba(21,55,98,.06)}.top-notification i{font-size:19px}.top-notification em{position:absolute;right:-3px;top:-3px;width:9px;height:9px;border-radius:50%;background:#ff5b65;border:2px solid #fff;font-size:0}.top-user-profile{display:flex;align-items:center;gap:10px;text-decoration:none;color:#14345d}.top-user-avatar{width:39px;height:39px;border-radius:50%;display:grid;place-items:center;background:#0b72e7;color:#fff;font-size:15.5px;font-weight:800;box-shadow:0 5px 12px rgba(11,114,231,.18)}.top-user-profile span:nth-child(2){display:flex;flex-direction:column;gap:2px;max-width:170px}.top-user-profile b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.top-user-profile small{font-size:12px;color:#7890ad}.top-user-profile>i{margin-left:4px;font-size:13px;color:#607e9e}
#burger{color:#123766;border:1px solid #e4edf7;box-shadow:0 4px 14px rgba(18,53,95,.06)}.content{max-width:none;padding:14px 28px 36px}.content>h3:first-child{margin-top:4px}
main .content>.hello:not(.dash-welcome){background:linear-gradient(110deg,#082e5e,#116fc5);border-radius:18px;box-shadow:0 12px 30px rgba(6,50,102,.17)}main .content>.hello:not(.dash-welcome):after{opacity:.12}
main .card,main .tbl,main .report-panel,main .stat,main .car{border:1px solid #e2ebf6;box-shadow:0 8px 25px rgba(23,67,112,.055);border-radius:16px}main .card{padding:19px}main .tbl{padding:5px;background:#fff;overflow-x:auto}main .tbl table{min-width:680px}main .tbl th{background:#f1f6fc;color:#527094;font-size:12.5px;letter-spacing:.15px;border:0;text-transform:none}main .tbl td{font-size:13px;color:#2b4b73;border-top:1px solid #edf2f8}main .tbl tr:hover td{background:#f6faff}
main .btn{border-radius:10px;font-size:13px;padding:10px 14px;box-shadow:0 5px 13px rgba(15,69,122,.07)}main .btn.sm{padding:7px 10px;font-size:12.5px}main .btn-b{background:linear-gradient(135deg,#087ce8,#075fbc);box-shadow:0 6px 15px rgba(8,124,232,.18)}main .btn-y{background:linear-gradient(135deg,#ffe45d,#ffd21c);color:#123b69;box-shadow:0 6px 14px rgba(255,210,28,.16)}main input,main select,main textarea{border:1.5px solid #dce7f4;border-radius:11px;background:#fff;font-size:14px;padding:11px 12px}main label{font-size:13px;color:#34577e}
main .pagin,main .numbered-pagination{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;margin:20px 0 8px}main .numbered-pagination .btn{min-width:38px;height:38px;padding:0 11px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;text-decoration:none;font-size:13px}main .numbered-pagination .btn-b,main .pagin a.on{background:linear-gradient(135deg,#0e80ee,#075ab4);color:#fff;border-color:transparent;box-shadow:0 6px 14px rgba(8,104,204,.2)}main .pagin a{min-width:38px;height:38px;border:1px solid #e1eaf5;box-shadow:none;color:#31547c;border-radius:10px}
/* Dashboard */
.dash-welcome{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:164px;margin:7px 0 20px;padding:26px 32px;border-radius:18px;position:relative;isolation:isolate;overflow:hidden;color:#fff;background:linear-gradient(90deg,rgba(7,42,89,.98) 0%,rgba(9,72,139,.92) 34%,rgba(14,103,186,.58) 63%,rgba(5,47,94,.18) 100%),url('img/background_login.png') center 52%/cover no-repeat;box-shadow:0 12px 30px rgba(12,65,127,.15)}.dash-welcome:after{content:"";position:absolute;right:23%;top:-80px;width:240px;height:240px;border:24px solid rgba(255,255,255,.09);border-radius:50%;z-index:-1;pointer-events:none}.dash-welcome-copy{max-width:600px;position:relative;z-index:1}.dash-eyebrow{display:block;color:#bae5ff;font-size:12px;letter-spacing:1.4px;font-weight:800;margin-bottom:10px}.dash-welcome h2{font-size:25px;line-height:1.2;font-weight:800;letter-spacing:-.5px}.dash-welcome p{font-size:13.5px;line-height:1.7;max-width:560px;color:#e7f3ff;margin:8px 0 0}.dash-welcome-line{height:4px;width:58px;background:linear-gradient(90deg,#00d9e7,#1488ef);border-radius:99px;margin-top:16px}.dash-date{display:flex;align-items:center;gap:12px;min-width:200px;padding:14px 16px;background:rgba(6,56,116,.45);border:1px solid rgba(255,255,255,.22);border-radius:15px;backdrop-filter:blur(8px);position:relative;z-index:1}.dash-date-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:rgba(255,255,255,.16);font-size:19px}.dash-date small{display:block;color:#e0efff;font-size:12px}.dash-date b{display:block;color:#fff;font-size:17px;margin-top:4px}
.dash-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 19px}.dash-kpi{min-width:0;min-height:125px;padding:17px 17px;display:flex;align-items:center;gap:14px;text-decoration:none;color:#14345d;background:linear-gradient(135deg,#fff,#f9fcff);border:1px solid #e3edf8;border-left:4px solid #15c69b;border-radius:15px;box-shadow:0 8px 22px rgba(27,66,110,.05);transition:transform .18s,box-shadow .18s}.dash-kpi:hover{transform:translateY(-3px);box-shadow:0 14px 25px rgba(27,66,110,.1)}.dash-kpi-icon{width:58px;height:58px;flex:0 0 58px;border-radius:50%;display:grid;place-items:center;background:#def7ee;color:#17ae87;font-size:27px}.dash-kpi-copy{display:block;min-width:0;flex:1}.dash-kpi-copy small{display:block;color:#4f7198;font-size:12.5px;font-weight:700;line-height:1.5}.dash-kpi-copy b{display:block;font-size:27px;line-height:1.2;margin:4px 0;color:#103365}.dash-kpi-copy em{display:block;color:#8a9db5;font-size:12px;font-style:normal;line-height:1.5}.dash-kpi-arrow{align-self:flex-start;display:grid;place-items:center;width:26px;height:26px;flex:0 0 26px;border-radius:50%;background:#e7f8f1;color:#1ca987;font-size:12.5px}.dash-kpi.kpi-blue{border-left-color:#187cff}.dash-kpi.kpi-blue .dash-kpi-icon{background:#e1efff;color:#0878e8}.dash-kpi.kpi-blue .dash-kpi-arrow{background:#ecf5ff;color:#0878e8}.dash-kpi.kpi-amber{border-left-color:#ffbb32}.dash-kpi.kpi-amber .dash-kpi-icon{background:#fff1d0;color:#e9a100}.dash-kpi.kpi-amber .dash-kpi-arrow{background:#fff7e7;color:#cf920d}.dash-kpi.kpi-red{border-left-color:#ff5862}.dash-kpi.kpi-red .dash-kpi-icon{background:#ffe6e8;color:#ef4956}.dash-kpi.kpi-red .dash-kpi-arrow{background:#fff0f1;color:#ed4d58}
.dash-main-grid{display:grid;grid-template-columns:minmax(0,1.48fr) minmax(340px,.92fr);gap:17px;align-items:start}.dash-panel{min-width:0;background:#fff;border:1px solid #e2ebf6;border-radius:15px;box-shadow:0 8px 23px rgba(27,66,110,.05);overflow:hidden}.dash-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px;border-bottom:1px solid #edf2f9}.dash-panel-title{display:flex;align-items:center;gap:11px;min-width:0}.dash-panel-title>i{display:grid;place-items:center;width:32px;height:32px;flex:0 0 32px;border-radius:9px;background:#e9f3ff;color:#0878e8;font-size:18px}.dash-panel-title span{display:block;min-width:0}.dash-panel-title b{display:block;font-size:14px;color:#143765}.dash-panel-title small{display:block;font-size:12px;color:#8a9db5;margin-top:3px;font-weight:500}.dash-panel-head>a{display:flex;align-items:center;gap:6px;color:#0878e8;font-size:12px;font-weight:800;text-decoration:none;white-space:nowrap}.dash-panel-head>a:hover{text-decoration:underline}.dash-table{border:0!important;box-shadow:none!important;border-radius:0!important;padding:0!important}.dash-table table{min-width:740px!important}.dash-table th{padding:12px 13px!important}.dash-table td{padding:13px!important;font-size:12px!important;line-height:1.5}.dash-cell-sub{display:block;color:#8a9db5;font-size:12px;margin-top:3px;white-space:normal}.dash-purpose{max-width:140px}.dash-side-stack{display:flex;flex-direction:column;gap:16px;min-width:0}.dash-status-panel .dash-donut-layout{display:grid;grid-template-columns:145px minmax(0,1fr);gap:15px;align-items:center;padding:16px 18px 18px}.dash-donut{width:130px;aspect-ratio:1;border-radius:50%;padding:17px;display:grid;place-items:center;margin:auto;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}.dash-donut>div{width:100%;height:100%;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex-direction:column;box-shadow:0 2px 10px rgba(22,61,107,.04)}.dash-donut b{font-size:22px;color:#163865;line-height:1.2}.dash-donut small{font-size:12px;color:#607d9f}.dash-legend{display:flex;flex-direction:column;gap:14px}.dash-legend-row{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px;color:#5d789a}.dash-legend-name{display:flex;align-items:center;gap:9px;min-width:0}.dash-legend-name i{width:10px;height:10px;border-radius:50%;display:inline-block;flex:0 0 10px}.legend-green{background:#16c79a}.legend-blue{background:#1688ff}.legend-amber{background:#ffbf32}.legend-gray{background:#9ba8ba}.legend-red{background:#ff555d}.dash-legend-row>b{white-space:nowrap;font-size:12px;color:#153866}
.dash-schedule-list{padding:0 18px}.dash-schedule-row{display:grid;grid-template-columns:40px 83px minmax(100px,1fr) minmax(90px,.65fr);align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #edf2f8}.dash-schedule-row:last-child{border-bottom:0}.dash-schedule-date{width:39px;padding:6px 3px;text-align:center;background:#eaf4ff;border-radius:10px;color:#0d65b8}.dash-schedule-date b{display:block;font-size:15px}.dash-schedule-date small{display:block;font-size:12px;color:#3978b6}.dash-schedule-time{font-size:12px;color:#587ba4;font-weight:650;white-space:nowrap}.dash-schedule-details{min-width:0}.dash-schedule-details b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#315984;font-size:12px}.dash-schedule-details small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#8298b3;font-size:12px;margin-top:3px}.dash-schedule-location{display:flex;align-items:center;gap:5px;min-width:0;color:#6885a8;font-size:12px}.dash-schedule-location i{color:#0878e8}.dash-schedule-location span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dash-empty-inline{padding:24px;text-align:center;color:#8498b0;font-size:12.5px}.dash-empty-inline i{margin-right:7px}.dash-footer-note{display:flex;align-items:center;gap:12px;margin-top:8px;padding:13px 18px;background:rgba(255,255,255,.78);border:1px solid #e4edf8;border-radius:13px;color:#6d87a8;font-size:12px}.dash-footer-note i{font-size:22px;color:#0878e8}.dash-footer-note span{flex:1}.dash-footer-brand{margin-left:auto;font-size:12px!important;font-weight:800;color:#6482a5;white-space:nowrap}.dash-extra-section{margin-top:20px}
/* Kendaraan: foto tidak memotong gambar dan tidak pernah bertumpuk dengan tombol pada modal. */
.car{min-width:0}.car-img{box-sizing:border-box;min-width:0;width:100%;height:118px!important;padding:8px!important;overflow:hidden;display:flex!important;align-items:center!important;justify-content:center!important;background:linear-gradient(145deg,#f0f7ff,#e5eff9)!important;border-radius:14px!important;position:relative}.car-img img{display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;object-position:center!important;border-radius:9px!important;position:static!important;transform:none!important}.car-img svg,.car-svg{display:block!important;width:min(100%,215px)!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;filter:drop-shadow(0 4px 6px rgba(8,42,77,.12))}
dialog.kmdlg{box-sizing:border-box;width:min(500px,94vw);max-width:94vw;max-height:90vh;overflow-x:hidden;overflow-y:auto;padding:23px;border:1px solid #dce8f5;border-radius:23px;background:#fff;box-shadow:0 25px 80px rgba(7,35,74,.3);color:#17385f}dialog.kmdlg::backdrop{background:rgba(6,29,58,.58);backdrop-filter:blur(5px)}dialog.kmdlg>h3{padding-right:36px;font-size:19px;line-height:1.35;overflow-wrap:anywhere;color:#133660}dialog.kmdlg .km-badges{display:flex;gap:7px;flex-wrap:wrap;margin:9px 0 12px}dialog.kmdlg .car-img{display:flex!important;align-items:center!important;justify-content:center!important;box-sizing:border-box!important;width:100%!important;height:205px!important;min-height:205px!important;max-height:205px!important;overflow:hidden!important;margin:13px 0 18px!important;padding:13px!important;border:1px solid #e7eff8!important;border-radius:16px!important;background:linear-gradient(145deg,#edf5fd,#f8fbff)!important;position:relative!important;z-index:0!important;isolation:isolate!important;opacity:1!important;filter:none!important}dialog.kmdlg .car-img img{position:static!important;display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;object-position:center!important;transform:none!important;opacity:1!important;filter:none!important;border-radius:9px!important}dialog.kmdlg .car-img svg{position:static!important;display:block!important;width:83%!important;height:82%!important;max-width:270px!important;max-height:170px!important;object-fit:contain!important;transform:none!important}.km-grid{position:relative!important;z-index:1!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;margin:0 0 10px!important}.km-grid form{margin:0!important;min-width:0!important}.km-grid .km-sq{width:100%!important;min-width:0!important;min-height:75px!important;padding:12px 10px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;border-radius:14px!important;white-space:normal!important;line-height:1.35!important}.km-grid .km-sq i{font-size:20px;flex:0 0 auto}.km-grid .km-sq span{display:block;overflow-wrap:anywhere}.kmdlg .w100{width:100%!important}.kmdlg .mt8{margin-top:9px!important}.kmdlg .km-jadwal{position:relative!important;z-index:1!important;margin-top:14px!important;padding-top:15px!important;border-top:1px solid #e6eef7!important}.kmdlg .km-row{display:flex;align-items:center;gap:9px}.kmdlg .km-row input{flex:1;min-width:0}.kmdlg .km-row span{white-space:nowrap;color:#6c83a2;font-weight:700}.kmdlg .km-h{margin:16px 0 8px;font-size:14px;color:#17385f}.kmdlg .mhist{margin:0;padding-left:0;list-style:none;display:grid;gap:7px}.kmdlg .mhist li{font-size:12.5px;color:#6380a4;display:flex;gap:8px}.kmdlg .dlg-x{position:sticky;float:right;top:0;z-index:5;width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:50%;background:#eef5fd;color:#41688f;cursor:pointer;margin:-7px -7px 3px 10px}
/* Pencarian mobil dan modal pada breakpoint kecil */
@media(max-width:1200px){.dash-main-grid{grid-template-columns:minmax(0,1fr)}.dash-side-stack{display:grid;grid-template-columns:1fr 1fr}.dash-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.dash-status-panel .dash-donut-layout{grid-template-columns:130px minmax(0,1fr)}}
@media(max-width:900px){aside{width:278px}main{margin-left:0}.top{padding:16px 16px 8px;gap:10px}.top h1{font-size:21px}.top-subtitle{font-size:12px}.top-user-profile span:nth-child(2){display:none}.top-user-actions{gap:8px}.content{padding:12px 16px 28px}.dash-welcome{align-items:flex-start;flex-direction:column;min-height:0;padding:24px;background-position:center}.dash-date{min-width:0;width:max-content;max-width:100%}.dash-main-grid{grid-template-columns:minmax(0,1fr)}.dash-side-stack{grid-template-columns:1fr 1fr}.dash-kpi{padding:14px;gap:10px}.dash-kpi-icon{width:48px;height:48px;flex-basis:48px;font-size:23px}.dash-kpi-copy b{font-size:24px}.dash-schedule-row{grid-template-columns:38px 78px minmax(0,1fr)}.dash-schedule-location{grid-column:3}.sidebar-unit-card{margin-top:10px}}
@media(max-width:600px){.top-user-actions .top-notification{display:none}.top-user-avatar{width:34px;height:34px}.dash-welcome{margin-top:4px;padding:20px;border-radius:16px}.dash-welcome h2{font-size:22px}.dash-welcome p{font-size:12.5px}.dash-date{padding:10px 12px}.dash-date b{font-size:15.5px}.dash-kpis{gap:9px}.dash-kpi{min-height:108px;padding:12px;gap:8px;border-left-width:3px}.dash-kpi-icon{width:39px;height:39px;flex-basis:39px;font-size:19px}.dash-kpi-copy small{font-size:12px}.dash-kpi-copy b{font-size:21px}.dash-kpi-copy em{font-size:12px}.dash-kpi-arrow{width:22px;height:22px;flex-basis:22px}.dash-main-grid{gap:12px}.dash-side-stack{grid-template-columns:1fr}.dash-panel-head{padding:12px}.dash-panel-title b{font-size:13px}.dash-panel-title small{display:none}.dash-status-panel .dash-donut-layout{grid-template-columns:115px minmax(0,1fr);gap:10px;padding:13px}.dash-donut{width:105px;padding:14px}.dash-donut b{font-size:19px}.dash-legend{gap:10px}.dash-schedule-list{padding:0 12px}.dash-schedule-row{grid-template-columns:37px 73px minmax(0,1fr);gap:7px}.dash-schedule-location{grid-column:3}.dash-footer-note{align-items:flex-start;padding:11px}.dash-footer-brand{display:none}.top-user-profile{gap:5px}.top-user-profile>i{display:none}dialog.kmdlg{width:calc(100vw - 22px);max-width:calc(100vw - 22px);max-height:92vh;padding:17px;border-radius:19px}dialog.kmdlg .car-img{height:165px!important;min-height:165px!important;max-height:165px!important;margin-bottom:14px!important}.km-grid{gap:8px!important}.km-grid .km-sq{min-height:68px!important;font-size:12.5px!important;padding:8px 6px!important}main .numbered-pagination .btn{min-width:34px;height:34px}}
@media(max-width:380px){.dash-kpi{align-items:flex-start;flex-wrap:wrap}.dash-kpi-copy{min-width:70px}.dash-kpi-arrow{margin-left:auto}.dash-status-panel .dash-donut-layout{grid-template-columns:95px minmax(0,1fr)}.dash-donut{width:89px;padding:11px}.dash-legend-row{font-size:12px}.dash-legend-row>b{font-size:12px}}

.dash-section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 13px}.dash-section-heading h3{display:flex;align-items:center;gap:9px;color:#173b6a;font-size:15.5px}.dash-section-heading h3>i{color:#0878e8;font-size:18px}.dash-count-badge{padding:6px 10px;border-radius:99px;background:#e7f3ff;color:#086ac6;font-size:12px;font-weight:800}.dash-footer-divider{display:inline-block;height:10px;width:1px;vertical-align:middle;margin:0 6px;background:#cbd9e9}

/* Tombol ekspor pada Semua Peminjaman */
.riwayat-export-actions{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.riwayat-export-actions .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;text-decoration:none;white-space:nowrap}
@media(max-width:900px){.riwayat-export-actions{display:flex;width:100%;gap:8px}.riwayat-export-actions .btn{flex:1}}


/* ===== Export dropdown — Semua Peminjaman ===== */
.pf .pf-btn{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.riwayat-export-actions{display:inline-flex;position:relative;vertical-align:middle}
.riwayat-export-dropdown{position:relative;margin:0;flex:0 0 auto}
.riwayat-export-dropdown>summary{list-style:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;cursor:pointer;user-select:none}
.riwayat-export-dropdown>summary::-webkit-details-marker{display:none}
.riwayat-export-dropdown>summary .export-chevron{font-size:12.5px;transition:transform .18s ease}
.riwayat-export-dropdown[open]>summary .export-chevron{transform:rotate(180deg)}
.riwayat-export-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:1200;display:none;min-width:178px;padding:6px;background:#fff;border:1px solid #dbe6f2;border-radius:13px;box-shadow:0 14px 34px rgba(16,56,95,.18)}
.riwayat-export-dropdown[open] .riwayat-export-menu{display:flex;flex-direction:column;gap:4px}
.riwayat-export-menu a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;color:#183957;text-decoration:none;font-size:14px;font-weight:700;white-space:nowrap}
.riwayat-export-menu a:hover,.riwayat-export-menu a:focus-visible{background:#eef6fd;color:#0878cb;outline:none}
.riwayat-export-menu a .bi-file-earmark-excel{color:#168a71}.riwayat-export-menu a .bi-file-earmark-pdf{color:#d94c4c}
@media(max-width:900px){.pf .pf-btn{display:flex;gap:8px}.riwayat-export-actions{flex:1 1 100%}.riwayat-export-dropdown{width:100%}.riwayat-export-dropdown>summary{width:100%}.riwayat-export-menu{left:0;right:0;width:100%}}

/* FLEETRA accessibility polish: preserve the complete vehicle photo and improve muted text contrast. */
.report-car-visual{background:linear-gradient(145deg,#edf5fc,#ffffff);}
.report-car-visual img,.vehicle-image img,.thumb{object-fit:contain!important;object-position:center!important;}
.fleet-report .report-intro,.fleet-report .report-head .report-intro{color:#355b7e!important;}
.fleet-report .report-intro strong{color:#123e70!important;}
.fleet-report .report-rank-meta,.fleet-report .report-rank-title small,.fleet-report .kpi em,.fleet-report .month-column small,.fleet-report .trend-legend{color:#536c84!important;}
.fleet-report .report-cell-sub,.fleet-report .report-rank-value small,.fleet-report .report-panel-title small{color:#536c84!important;}

/* Security OCR scan: accessible camera guide and responsive controls. */
.plate-ocr-dialog{width:min(620px,94vw);max-width:94vw;max-height:92vh;overflow:auto;padding:20px;border:1px solid #dbe7f4;border-radius:20px;box-shadow:0 24px 70px rgba(8,42,77,.32)}
.plate-ocr-dialog::backdrop{background:rgba(7,28,53,.65);backdrop-filter:blur(4px)}
.plate-ocr-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:13px}.plate-ocr-head h3{margin:0 0 4px;color:#123b69;font-size:18px}
.plate-ocr-view{position:relative;display:grid;place-items:center;overflow:hidden;min-height:190px;max-height:45vh;background:#071d35;border-radius:15px;margin-bottom:12px}
.plate-ocr-view video,.plate-ocr-view img{display:block;width:100%;max-height:45vh;object-fit:contain}.plate-ocr-guide{position:absolute;width:86%;height:34%;border:2px dashed #ffd21c;border-radius:10px;box-shadow:0 0 0 999px rgba(0,0,0,.18);pointer-events:none}
.plate-ocr-tools{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.plate-ocr-dialog input:not([type=file]){width:100%;box-sizing:border-box}.plate-ocr-dialog .dlg-act{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:14px}.plate-ocr-dialog #plateOcrMessage{min-height:18px}
@media(max-width:600px){.plate-ocr-dialog{padding:15px}.plate-ocr-tools>*{flex:1 1 auto}.plate-ocr-view{min-height:160px}}

/* =====================================================================
   FLEETRA v19 — lapisan penyempurnaan (kartu kendaraan, tukar, pendaftaran unit)
   Ditaruh paling akhir agar menggantikan tumpukan override lama tanpa mengubah markup.
   ===================================================================== */
:root{--f-line:#e2ebf6;--f-ink:#14345d;--f-mute:#6f86a3;--f-blue:#0878e8;--f-green:#12a150;--f-amber:#f2a900;--f-red:#e0243b;--f-gray:#8795a8}
main,.content{min-width:0}
aside .me{display:none!important}               /* profil ganda di sidebar; profil kanan-atas dipertahankan */

/* ---- Kartu ketersediaan kendaraan: putih, tinggi seragam, gambar tidak terpotong ---- */
.fleet{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:16px;align-items:stretch;margin-top:14px;min-width:0}
.fleet>*{min-width:0}
.fleet>.muted.pad{grid-column:1/-1}
.car{--car-c:var(--f-green);display:flex;flex-direction:column;min-width:0;height:100%;padding:14px 14px 16px;background:#fff!important;opacity:1!important;animation:none!important;border:1px solid var(--f-line);border-top:4px solid var(--car-c);border-radius:16px;box-shadow:0 6px 20px rgba(23,67,112,.06);overflow:hidden;transition:box-shadow .2s ease,transform .2s ease}
.car:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(23,67,112,.12)}
.car.s-available{--car-c:var(--f-green)}.car.s-used{--car-c:var(--f-blue)}.car.s-reserved{--car-c:var(--f-amber)}.car.s-maint{--car-c:var(--f-gray)}.car.s-telat{--car-c:var(--f-red)}
.car,.car.s-available,.car.s-used,.car.s-reserved,.car.s-maint,.car.s-telat{border-color:var(--f-line);border-top-color:var(--car-c)}
.car .pill.p-used{background:#e3f0ff;color:#0a62c4}.car .pill.p-used .dot{background:#0a62c4}
.car .pill.p-maint{background:#eef1f5;color:#5d6b7e}
.car>.car-top{display:flex;justify-content:flex-start;align-items:center;min-height:26px;margin:0 0 8px}
.car>.car-top .pill{font-size:11px;line-height:1;padding:6px 11px;white-space:nowrap}
.car>.car-img,.car>button.car-img{box-sizing:border-box;display:flex!important;align-items:center!important;justify-content:center!important;width:100%;height:128px!important;margin:0 0 12px!important;padding:6px!important;overflow:hidden;background:#fff!important;border:1px solid #edf2f9!important;border-radius:12px!important;position:relative}
.car>.car-img img{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;border-radius:8px!important}
.car>.car-img svg,.car>.car-img .car-svg{display:block!important;width:auto!important;height:100%!important;max-width:100%!important;filter:drop-shadow(0 4px 5px rgba(8,42,77,.14))}
.car>.car-img.editable{cursor:pointer}
.car>.car-type{margin:0 0 6px;font-size:15px;font-weight:800;line-height:1.3;color:var(--f-ink);overflow-wrap:anywhere;writing-mode:horizontal-tb}
.car>.plate{align-self:flex-start;max-width:100%;margin:0 0 12px;font-size:16px;padding:2px 12px;letter-spacing:1.5px;white-space:nowrap}
.car>.car-info{margin-top:auto;padding-top:11px;border-top:1px dashed #d6e0ec;display:flex;flex-direction:column;gap:4px;font-size:12.5px;line-height:1.45;color:#2b4b73}
.car>.car-info b{font-size:13px;color:var(--f-ink)}
.car>.car-info small{display:block;color:var(--f-mute);overflow-wrap:anywhere;writing-mode:horizontal-tb}
.car>.car-info.muted{color:var(--f-mute)}
.car>.car-info .warn-t{color:var(--f-red);font-weight:700}
.panels,.panel{min-width:0}
.panel{background:#fff!important;padding:18px 18px 20px;border:1px solid var(--f-line);border-left:5px solid var(--f-gray);border-radius:16px;box-shadow:0 6px 20px rgba(23,67,112,.05)}
.panel.gr-available{border-left-color:var(--f-green)}.panel.gr-used{border-left-color:var(--f-blue)}.panel.gr-reserved{border-left-color:var(--f-amber)}.panel.gr-maint{border-left-color:var(--f-gray)}.panel.gr-telat{border-left-color:var(--f-red)}
.panel-h{flex-wrap:wrap}
@media(max-width:520px){.fleet{grid-template-columns:1fr}.car>.car-img,.car>button.car-img{height:150px!important}}

/* ---- Panel ketersediaan pada dashboard Bidang ---- */
.avail-panel{min-width:0}
.avail-panel .fleet{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}

/* ---- Halaman Tukar (pegawai.php?p=tukar) ---- */
.swap-wrap{max-width:1240px;margin:0 auto;min-width:0}
.swap-wrap .tip{align-items:flex-start;background:#eaf4ff;border:1px solid #d3e6fb;color:#16406e;line-height:1.6;font-size:13px}
.swap-wrap .sec{margin:26px 0 12px;font-size:16px}
.swap-wrap .card{min-width:0}
.swapreq{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;border-left:5px solid #ffd21c;margin-bottom:14px}
.swapreq>div{min-width:0}.swapreq p{margin:8px 0 4px;line-height:1.55;overflow-wrap:anywhere}
.swapreq .dlg-act{margin:0;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.swapcompare{display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr);gap:10px;align-items:stretch;margin-top:10px;font-size:12.5px;line-height:1.5}
.swapcompare>div{background:#f4f8fd;border:1px solid #e3edf8;border-radius:12px;padding:10px 12px;overflow-wrap:anywhere}
.swapcompare>i{align-self:center;text-align:center;color:var(--f-blue);font-size:18px}
.card.swap{display:grid;grid-template-columns:minmax(0,300px) 40px minmax(0,1fr);gap:20px;align-items:start;margin-bottom:16px}
.swap-a{display:flex;flex-direction:column;gap:6px;padding:14px;background:#f6faff;border:1px solid #e0ebf8;border-radius:14px;min-width:0;overflow-wrap:anywhere}
.swap-a b{font-size:14px;color:var(--f-ink)}.swap-a small{font-size:12px;line-height:1.5}
.swap-ic{align-self:center;justify-self:center;font-size:26px;color:var(--f-blue)}
.swap-target-form{min-width:0}
.swap-target-form>label{display:block;margin:10px 0 6px}
.swap-target-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;margin:8px 0 10px}
.swap-target{display:flex;gap:10px;align-items:flex-start;min-width:0;padding:12px 13px;border:1.5px solid #dce7f4;border-radius:13px;background:#fff;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.swap-target:not(.is-disabled):hover{border-color:#8cc0f5;box-shadow:0 6px 16px rgba(8,120,232,.1)}
.swap-target:has(input:checked){border-color:var(--f-blue);box-shadow:0 0 0 3px rgba(8,120,232,.12)}
.swap-target .swap-target-check{flex:0 0 auto;margin-top:3px;width:auto}
.swap-target-main{display:block;min-width:0;flex:1;overflow-wrap:anywhere;line-height:1.5}
.swap-target-main b{display:block;font-size:13px;color:var(--f-ink)}
.swap-target-main small{display:block;margin-top:3px;font-size:12px}
.swap-target-status{display:block;margin-top:6px;font-size:12px;font-weight:700}
.swap-reason{display:block;font-size:12px;margin-top:3px;line-height:1.45}
.swap-target.is-disabled{background:#eef1f5;border-color:#d3dae3;color:#6d7885;cursor:not-allowed;opacity:1;filter:none}
.swap-target.is-disabled .swap-target-main b{color:#5b6773}.swap-target.is-disabled .swap-target-status{color:#7a8592}.swap-target:not(.is-disabled) .swap-target-status{color:#18794e}
.swap-wrap .seg.sm{display:flex;flex-wrap:wrap;gap:8px}.swap-wrap .seg.sm label{flex:1 1 110px}
.swap-wrap .form-actions{margin-top:12px}
.swap-wrap .tbl{margin-top:8px}
@media(max-width:1100px){.card.swap{grid-template-columns:minmax(0,1fr)}.swap-ic{transform:rotate(90deg);margin:-4px 0}}
@media(max-width:700px){.swapreq{grid-template-columns:minmax(0,1fr)}.swapreq .dlg-act{justify-content:stretch}.swapreq .dlg-act .btn{flex:1}.swapcompare{grid-template-columns:minmax(0,1fr)}.swapcompare>i{transform:rotate(90deg)}.swap-target-list{grid-template-columns:minmax(0,1fr)}}

/* ---- Halaman publik pendaftaran unit (daftar_unit.php) ---- */
body.reg-body{margin:0;min-height:100vh;background:linear-gradient(135deg,#f3f8fe 0%,#eaf3fd 50%,#f8fbff 100%);color:var(--f-ink)}
.reg-shell{width:min(1120px,100%);margin:0 auto;padding:28px 24px 48px}
.reg-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.reg-bar img{height:54px;width:auto;max-width:200px;object-fit:contain;display:block}
.reg-back{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid #d8e5f4;border-radius:12px;background:#fff;color:#0b4f96;font-size:13px;font-weight:700;text-decoration:none}
.reg-back:hover{background:#f1f7fe}
.reg-hero{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;min-height:188px;padding:32px 40px;border-radius:20px;color:#fff;background:linear-gradient(90deg,rgba(7,42,89,.97) 0%,rgba(9,72,139,.9) 42%,rgba(14,103,186,.5) 75%,rgba(5,47,94,.2) 100%),url('img/background_login.png') center 55%/cover no-repeat;box-shadow:0 14px 34px rgba(12,65,127,.18)}
.reg-hero:after{content:"";position:absolute;right:12%;top:-90px;width:260px;height:260px;border:26px solid rgba(255,255,255,.08);border-radius:50%;z-index:-1}
.reg-eyebrow{display:block;margin-bottom:10px;color:#bae5ff;font-size:11px;font-weight:800;letter-spacing:1.5px}
.reg-hero h1{font-size:32px;line-height:1.2;letter-spacing:-.6px;font-weight:800}
.reg-hero p{max-width:560px;margin:10px 0 0;color:#e4f1ff;font-size:14.5px;line-height:1.7}
.reg-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:18px 0}
.reg-step{display:flex;gap:12px;align-items:flex-start;min-width:0;padding:15px 16px;background:#fff;border:1px solid var(--f-line);border-radius:14px;box-shadow:0 6px 18px rgba(23,67,112,.05)}
.reg-step>b{flex:0 0 34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#e4f1ff;color:#0a6cd0;font-size:14px}
.reg-step span{display:block;min-width:0;font-size:12.5px;line-height:1.5;color:var(--f-mute)}.reg-step span strong{display:block;font-size:13.5px;color:var(--f-ink);margin-bottom:2px}
.reg-card{padding:34px 38px 30px;background:#fff;border:1px solid var(--f-line);border-radius:20px;box-shadow:0 14px 36px rgba(23,67,112,.08)}
.reg-card h2{font-size:20px;color:var(--f-ink);margin-bottom:4px}
.reg-card .reg-sub{margin:0 0 22px;color:var(--f-mute);font-size:13.5px}
.reg-form{display:block}
.reg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px}
.reg-field{min-width:0}.reg-field.full{grid-column:1/-1}
.reg-field label{display:block;margin:0 0 7px;font-size:13px;font-weight:700;color:#274a75}
.reg-field input{display:block;width:100%;height:50px;padding:0 15px;font:inherit;font-size:14.5px;color:var(--f-ink);background:#fff;border:1.5px solid #d6e3f2;border-radius:12px;outline:0;transition:border-color .15s,box-shadow .15s}
.reg-field input::placeholder{color:#9db0c7}
.reg-field input:focus{border-color:#1a86ee;box-shadow:0 0 0 4px rgba(8,120,232,.12)}
.reg-field small{display:block;margin-top:6px;color:var(--f-mute);font-size:12px;line-height:1.5}
.reg-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:28px;padding-top:22px;border-top:1px solid #edf2f9}
.reg-actions .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 26px;font-size:14px;font-weight:700;border-radius:12px;text-decoration:none;cursor:pointer;border:0}
.reg-actions .btn-b{min-width:220px;color:#fff;background:linear-gradient(135deg,#0a86f0,#0760c2);box-shadow:0 10px 22px rgba(8,124,232,.25)}
.reg-actions .btn-g{background:#eef4fb;color:#25507f;border:1px solid #d8e5f4}
.reg-note{margin:18px 0 0;color:var(--f-mute);font-size:12.5px;line-height:1.6}
.reg-card .alert,.reg-card .tip{margin:0 0 18px}
@media(max-width:860px){.reg-shell{padding:18px 14px 36px}.reg-hero{min-height:0;padding:26px 22px}.reg-hero h1{font-size:25px}.reg-steps{grid-template-columns:minmax(0,1fr)}.reg-card{padding:24px 20px}.reg-grid{grid-template-columns:minmax(0,1fr)}.reg-actions .btn{width:100%}}

/* ---- Dashboard Bidang & Security (selaras referensi) ---- */
.dash-welcome.compact{min-height:132px;padding:22px 30px}
.dash-kpis.k3{grid-template-columns:repeat(3,minmax(0,1fr))}.dash-kpis.k5{grid-template-columns:repeat(5,minmax(0,1fr))}
.dash-kpis.k5 .dash-kpi{padding:14px;gap:10px;min-height:108px}.dash-kpis.k5 .dash-kpi-icon{width:46px;height:46px;flex-basis:46px;font-size:22px}.dash-kpis.k5 .dash-kpi-copy b{font-size:24px}
.dash-kpis .dash-kpi.kpi-static{cursor:default}
.bidang-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr) minmax(0,.9fr);gap:17px;align-items:start}
.bidang-grid>*{min-width:0}
.bidang-grid .dash-panel-body{padding:16px 18px 18px}
.bidang-grid .fm{box-shadow:none;border:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}
.bidang-grid .fm .fld.full{grid-column:1/-1}
.bidang-grid .fm .fld{min-width:0}
.bidang-grid .fm .fld input,.bidang-grid .fm .fld select,.bidang-grid .fm .fld textarea{width:100%}
.bidang-grid .mrow{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid #edf2f8}.bidang-grid .mrow:last-of-type{border-bottom:0}
.bidang-grid .mrow small{display:block;margin-top:3px;overflow-wrap:anywhere}
@media(max-width:1280px){.bidang-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}.bidang-grid>:last-child{grid-column:1/-1}}
@media(max-width:900px){.bidang-grid{grid-template-columns:minmax(0,1fr)}.dash-kpis.k5,.dash-kpis.k3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.bidang-grid .fm{grid-template-columns:minmax(0,1fr)}.dash-kpis.k5,.dash-kpis.k3{grid-template-columns:minmax(0,1fr)}}
.scard{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--f-line);border-top:4px solid var(--f-amber);border-radius:16px;box-shadow:0 6px 20px rgba(23,67,112,.06)}
.scard.out{border-top-color:var(--f-blue)}.scard.telat{border-top-color:var(--f-red);animation:none}
.scard ul{overflow-wrap:anywhere}.scard>.btn:last-of-type,.scard>.btn{margin-top:auto}
.sgrid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));align-items:stretch}
.reg-bar>a:first-child{display:inline-flex;align-items:center;padding:9px 18px;background:linear-gradient(135deg,#08274d,#0a4a8c);border-radius:15px;box-shadow:0 8px 20px rgba(8,39,77,.18)}
.reg-bar img{height:42px}
.reg-actions .btn,.reg-back{font-family:inherit}

/* ---- v19b: layout dashboard Bidang (2 kolom, kartu 3 per baris) + font form ---- */
input,select,textarea,button{font-family:inherit}
.bidang-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);grid-template-areas:"form avail" "mine avail";align-items:start}
.bg-form{grid-area:form}.bg-avail{grid-area:avail}.bg-mine{grid-area:mine}
.avail-panel .stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 4px}
.avail-panel .stat{padding:11px 12px;gap:0 8px;grid-template-columns:auto minmax(0,1fr);min-width:0}
.avail-panel .stat b{font-size:22px}
.avail-panel .stat span{font-size:12px;line-height:1.25;min-width:0;overflow-wrap:anywhere;white-space:normal}
.avail-panel .stat i{display:none}
.avail-panel .fleet{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
@media(max-width:1100px){.bidang-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"form" "avail" "mine"}}
@media(max-width:520px){.avail-panel .stats{grid-template-columns:minmax(0,1fr)}}
.btn{font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Arial,sans-serif}

/* ---- Dialog foto bukti keluar/masuk (dipakai Log Security Admin & Riwayat Security) ---- */
.log-photo-dialog{box-sizing:border-box;width:min(900px,94vw);max-width:94vw;max-height:90vh;overflow:auto;padding:24px;border:1px solid #dce8f5;border-radius:22px;background:#fff;color:#17385f;box-shadow:0 25px 80px rgba(7,35,74,.3)}
.log-photo-dialog::backdrop{background:rgba(6,29,58,.62);backdrop-filter:blur(4px)}
.log-photo-dialog .dlg-x{float:right;display:grid;place-items:center;width:34px;height:34px;margin:-6px -6px 5px 10px;border:0;border-radius:50%;background:#eaf2fa;color:#41688f;cursor:pointer}
.log-photo-dialog .log-photo-title{margin:0 42px 5px 0;font-size:19px;color:#123e70;overflow-wrap:anywhere}
.log-photo-dialog .log-photo-sub{margin:0 0 18px;color:#6c83a2;font-size:12px;line-height:1.6}
.log-photo-dialog .log-photo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.log-photo-dialog .log-photo-card{min-width:0;padding:13px;border:1px solid #e1ebf5;border-radius:16px;background:#f8fbff}
.log-photo-dialog .log-photo-card h4{margin:0 0 8px;font-size:13px;color:#1b4979}
.log-photo-dialog .log-photo-time{margin:0 0 10px;color:#6c83a2;font-size:11px}
.log-photo-dialog .log-photo-frame{display:flex;align-items:center;justify-content:center;min-height:190px;max-height:430px;overflow:hidden;border:1px solid #e1eaf4;border-radius:12px;background:#edf4fb}
.log-photo-dialog .log-photo-frame img{display:block;width:100%;height:auto;max-height:430px;object-fit:contain}
.log-photo-dialog .log-photo-frame .log-no-photo{display:flex;flex-direction:column;align-items:center;gap:8px;padding:28px 14px;color:#8ba0b7;text-align:center;font-size:12px}
.log-photo-dialog .log-photo-frame .log-no-photo i{font-size:28px}
.log-photo-dialog .log-photo-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
@media(max-width:620px){.log-photo-dialog{padding:17px}.log-photo-dialog .log-photo-grid{grid-template-columns:1fr}.log-photo-dialog .log-photo-frame{min-height:140px}}

/* =====================================================================
   FLEETRA v20 — keterbacaan, profil, ekspor, pagination, status kendaraan
   ===================================================================== */
/* ---- Tipografi: ukuran dasar lebih nyaman dibaca ---- */
body{font-size:15px;line-height:1.55}
main table{font-size:14.5px}
main th{font-size:12.5px!important;padding:14px 14px}
main td{font-size:14.5px}
label{font-size:14px}
main input,main select,main textarea{font-size:14.5px}
.btn{font-size:14.5px}.btn.sm{font-size:13px;padding:8px 14px}
aside nav a,nav a{font-size:14.5px!important}
.top h1{font-size:27px}
.top-subtitle{font-size:13.5px!important}
main small,.muted.small{font-size:12.5px}
.pill{font-size:12.5px}
.meta{font-size:14px}
.tip{font-size:14px;line-height:1.6}
.dash-welcome p{font-size:15px!important;line-height:1.6}
.dash-welcome h2{font-size:28px}
.dash-kpi-copy small{font-size:14px!important}
.dash-kpi-copy b{font-size:30px!important}
.dash-kpi-copy em{font-size:12.5px!important}
.dash-kpis.k5 .dash-kpi-copy b{font-size:26px!important}
.dash-panel-title b{font-size:17px!important}
.dash-panel-title small{font-size:12.5px!important}
.stat span{font-size:14px}.stat b{font-size:26px}
.car>.car-type{font-size:16px}
.car>.car-info{font-size:13.5px}.car>.car-info small{font-size:12.5px}
.car>.car-top .pill{font-size:12px}
.mrow b{font-size:14.5px}.mrow small{font-size:13px}
.reg-field label{font-size:14px}.reg-field small{font-size:12.5px}

/* ---- Profil pengguna (kanan-atas) lebih besar ---- */
.top-user-actions{gap:16px}
.top-notification{width:48px;height:48px;border-radius:15px}
.top-notification i{font-size:22px}
.top-user-profile{gap:13px;padding:5px 8px 5px 5px;border-radius:18px}
.top-user-profile:hover{background:rgba(255,255,255,.65)}
.top-user-avatar{width:54px;height:54px;font-size:21px;box-shadow:0 8px 18px rgba(11,114,231,.24)}
.top-user-profile span:nth-child(2){max-width:210px;gap:3px}
.top-user-profile b{font-size:15.5px;line-height:1.2}
.top-user-profile small{font-size:13px;color:#587394}
.top-user-profile>i{font-size:15px;margin-left:2px}
@media(max-width:900px){.top{gap:12px}.top-user-avatar{width:46px;height:46px;font-size:18px}.top-user-profile span:nth-child(2){max-width:140px}.top-user-profile b{font-size:14px}}
@media(max-width:600px){.top-user-avatar{width:44px;height:44px}.top-user-profile{padding:0}.top h1{font-size:21px}}

/* ---- Dropdown Ekspor (satu komponen untuk semua akun) ---- */
details.export-dd{position:relative;display:inline-block;margin:0}
details.export-dd>summary{list-style:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;cursor:pointer;user-select:none;white-space:nowrap;font-weight:700;border-radius:12px}
details.export-dd>summary::-webkit-details-marker{display:none}
details.export-dd>summary .bi-chevron-down{font-size:12px;transition:transform .18s}
details.export-dd[open]>summary .bi-chevron-down{transform:rotate(180deg)}
details.export-dd .export-menu{position:absolute;z-index:60;top:calc(100% + 8px);left:0;min-width:210px;max-width:calc(100vw - 32px);padding:8px;background:#fff;border:1px solid #dbe7f4;border-radius:14px;box-shadow:0 18px 40px rgba(12,45,82,.18)}
details.export-dd .export-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:12px 14px;border:0;border-radius:10px;background:transparent;color:#173b6d;font:inherit;font-size:14.5px;font-weight:650;text-align:left;cursor:pointer}
details.export-dd .export-menu button:hover,details.export-dd .export-menu button:focus-visible{background:#eaf4ff;color:#075d9f;outline:0}
details.export-dd .export-menu button .bi-file-earmark-pdf{color:#d6293e}
details.export-dd .export-menu button .bi-file-earmark-excel{color:#13874f}
.pf-btn details.export-dd,.pf .pf-btn details.export-dd{align-self:end}
@media(max-width:600px){details.export-dd .export-menu{left:auto;right:0}}
.report-export-form details.export-dd>summary{background:linear-gradient(135deg,#0878cb,#1766aa);color:#fff;border:0}

/* ---- Pagination seragam ---- */
.pagin{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;margin:22px 0 8px}
.pagin a,.pagin .pg-arrow{min-width:42px;height:42px;padding:0 6px;display:grid;place-items:center;border-radius:12px;background:#fff;border:1px solid #dbe7f4;color:#173b6d;font-weight:700;font-size:14.5px;text-decoration:none;box-shadow:0 3px 10px rgba(23,67,108,.05)}
.pagin a:hover{background:#eaf4ff;border-color:#9ccbf3}
.pagin a.on{background:#0a3a73;border-color:#0a3a73;color:#fff;box-shadow:0 6px 14px rgba(10,58,115,.28)}
.pagin .pg-arrow.off{opacity:.4;cursor:not-allowed}
.pagin .pg-info{flex:1 0 100%;text-align:center;margin-top:4px;color:#587394;font-size:13px}
@media(max-width:420px){.pagin a,.pagin .pg-arrow{min-width:38px;height:38px}}

/* ---- Kendaraan tidak tersedia: foto abu-abu transparan (status tetap tertulis) ---- */
.car.s-used>.car-img img,.car.s-used>.car-img svg,
.car.s-reserved>.car-img img,.car.s-reserved>.car-img svg,
.car.s-maint>.car-img img,.car.s-maint>.car-img svg,
.car.s-telat>.car-img img,.car.s-telat>.car-img svg{filter:grayscale(1) contrast(.9)!important;opacity:.45!important}
.car.s-used>.car-img,.car.s-reserved>.car-img,.car.s-maint>.car-img,.car.s-telat>.car-img{background:#f3f5f8!important}
.car.s-available>.car-img img,.car.s-available>.car-img svg{filter:none!important;opacity:1!important}

/* ---- Dashboard Bidang: jarak kolom tetap rapat setelah panel dibuka/diganti ---- */
.bidang-grid{grid-template-rows:auto auto 1fr;grid-template-areas:"form avail" "mine avail" "free avail";align-content:start;row-gap:17px}
@media(max-width:1100px){.bidang-grid{grid-template-rows:none;grid-template-areas:"form" "avail" "mine"}}
.avail-panel .panels{margin-top:12px}
.avail-panel .panel{margin:0}

/* ---- Tombol aksi pada tabel (Driver, Pegawai, Akun) ---- */
td.acts{min-width:230px;white-space:normal}
td.acts>form,td.acts>.ib,td.acts>a,td.acts>button{display:inline-block;vertical-align:middle;margin:0 14px 8px 0}
td.acts .btn{min-height:40px;padding:8px 18px;font-size:13.5px}
td.acts>:last-child{margin-right:0}

/* ---- Dashboard Security: Cari + Scan sebaris ---- */
#plateLookupForm .ip{display:flex;align-items:center;gap:10px;position:relative}
#plateLookupForm .ip>i{position:absolute;left:16px;color:#6b86a6;z-index:2;pointer-events:none}
#plateLookupForm .ip>input{flex:1 1 auto;min-width:0;height:50px;padding-left:44px}
#plateLookupForm .ip>.btn{flex:0 0 auto;height:50px;min-width:104px;white-space:nowrap}
#plateLookupForm .ip>.btn i{position:static}
@media(max-width:700px){#plateLookupForm .ip{flex-wrap:wrap}#plateLookupForm .ip>input{flex:1 1 100%}#plateLookupForm .ip>.btn{flex:1 1 calc(50% - 5px)}}

/* ---- Laporan armada: kontras teks (rasio ≥ 4.5:1) dan ukuran minimum 12px ---- */
.fleet-report{--fr-muted:#4d6784}
.fleet-report .kpi small{color:#3f5b78}
.fleet-report .kpi em{color:#4d6784;font-size:12.5px}
.fleet-report .report-panel-title small,.fleet-report .report-rank-title small{color:#4d6784;font-size:12px}
.fleet-report .trend-legend{color:#4d6784;font-size:12px}
.fleet-report .donut-legend-row{font-size:12.5px;color:#34506e}
.fleet-report .donut-legend-row small{color:#536d88;font-size:12px}
.fleet-report .compare-row{font-size:12.5px}
.fleet-report .report-muted-link{font-size:12.5px;color:#0a64a8}
.fleet-report .report-note p{font-size:13.5px;color:#1f4a78}
.fleet-report .fleet-summary-meta{color:#4d6784;font-size:13px}
.fleet-report .fleet-search input{font-size:14px}
.fleet-report .report-intro,.fleet-report .report-intro strong{color:#103d70}
.fleet-report .report-export,.fleet-report .report-export-form details.export-dd>summary{color:#fff}
.fleet-report .kpi b{font-size:26px}
.fleet-report .kpi-click:after{font-size:12px}
.fleet-report *{overflow-wrap:anywhere}
.fleet-report table{font-size:14px}

/* ---- Notifikasi Tukar (Admin) ---- */
.notif-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:26px 0 14px}
.notif-head h3{margin:0;font-size:18px;color:#123e70;display:flex;align-items:center;gap:10px}
.notif-head h3 .cnt{margin-left:2px}
.notif-list{display:grid;gap:14px}
.notif-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:18px 20px;background:#fff;border:1px solid #e2ebf6;border-left:6px solid #8fb3d9;border-radius:16px;box-shadow:0 6px 20px rgba(23,67,112,.06)}
.notif-card.st-wait{border-left-color:#f2a900}.notif-card.st-ok{border-left-color:#12a150}.notif-card.st-no{border-left-color:#e0243b}.notif-card.st-fail{border-left-color:#7a8795}.notif-card.st-sent{border-left-color:#1688ff}
.notif-ic{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:#e6f2ff;color:#0a6fc2;font-size:22px}
.st-wait .notif-ic{background:#fff3d1;color:#a67c00}.st-ok .notif-ic{background:#dcf7e8;color:#12803f}.st-no .notif-ic{background:#fde3e7;color:#c21a31}.st-fail .notif-ic{background:#eceff3;color:#5d6b7e}
.notif-body{min-width:0}
.notif-body b{display:block;font-size:15.5px;color:#14345d;margin-bottom:3px;overflow-wrap:anywhere}
.notif-body p{margin:0 0 6px;font-size:14px;color:#3f5b78;line-height:1.55;overflow-wrap:anywhere}
.notif-meta{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:#587394}
.notif-meta span{display:inline-flex;align-items:center;gap:6px}
.notif-act{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.notif-empty{display:grid;justify-items:center;gap:8px;padding:34px 18px;text-align:center;color:#587394;background:#fff;border:1.5px dashed #cfe0f2;border-radius:16px}
.notif-empty i{font-size:34px;color:#8fb3d9}
@media(max-width:760px){.notif-card{grid-template-columns:auto minmax(0,1fr)}.notif-act{grid-column:1/-1;flex-direction:row;justify-content:flex-start;flex-wrap:wrap}}

/* ---- Penjelasan alur tukar (Admin) ---- */
details.alur-tukar{margin:4px 0 18px;padding:0;overflow:hidden}
details.alur-tukar>summary{display:flex;align-items:center;gap:10px;padding:16px 20px;cursor:pointer;font-weight:700;color:#123e70;font-size:15.5px;list-style:none}
details.alur-tukar>summary::-webkit-details-marker{display:none}
details.alur-tukar>summary i{color:#0a6fc2;font-size:19px}
details.alur-tukar[open]>summary{border-bottom:1px solid #e2ebf6;background:#f5f9ff}
details.alur-tukar ol{margin:0;padding:16px 22px 18px 44px;display:grid;gap:8px;color:#2f4b69;font-size:14.5px;line-height:1.6}

/* ---- Tukar Bidang: banner, langkah, judul bagian, kartu kandidat ---- */
.swap-hero{margin:0 0 16px}
.swap-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 8px}
.swap-steps>div{display:flex;gap:13px;align-items:flex-start;min-width:0;padding:16px 18px;background:#fff;border:1px solid #e2ebf6;border-radius:16px;box-shadow:0 6px 18px rgba(23,67,112,.05)}
.swap-steps b{flex:0 0 38px;height:38px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,#0a84ff,#0760c2);color:#fff;font-size:15px}
.swap-steps span{display:block;min-width:0;font-size:13.5px;line-height:1.5;color:#587394}.swap-steps strong{display:block;font-size:14.5px;color:#14345d;margin-bottom:2px}
@media(max-width:860px){.swap-steps{grid-template-columns:minmax(0,1fr)}}
.swap-wrap .sec{display:flex;align-items:center;gap:10px;margin:30px 0 14px;font-size:18px;color:#123e70}
.swap-wrap .sec>i{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:#e5f3ff;color:#0a6fc2;font-size:17px}
.swap-wrap .sec .cnt{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 8px;border-radius:99px;background:#0a3a73;color:#fff;font-size:13px}
.swap-wrap .empty{display:grid;justify-items:center;gap:8px;padding:34px 18px;text-align:center;color:#587394;background:#fff;border:1.5px dashed #cfe0f2;border-radius:16px;font-size:14.5px}
.swap-wrap .empty i{font-size:34px;color:#8fb3d9}
.swap-wrap .card{background:#fff;border:1px solid #e2ebf6;border-radius:18px;box-shadow:0 8px 24px rgba(23,67,112,.06);padding:20px}
.swapreq p{font-size:15px;color:#24425f}
.swapcompare>div{font-size:13.5px;background:#f3f8fe}
.swap-a{background:linear-gradient(160deg,#f2f8ff,#e8f2fd);border:1px solid #d6e6f7;padding:18px}
.swap-a b{font-size:15.5px}.swap-a small{font-size:13.5px;color:#3d5a78}
.swap-target{padding:15px 16px;border-radius:15px;gap:12px}
.swap-target-main b{font-size:14.5px}.swap-target-main small{font-size:13px;color:#587394}
.swap-target-status{font-size:13px!important}
.swap-reason{font-size:13px!important}
.swap-target.is-disabled{background:#eceff3;border-color:#d3dae3}
.swap-target.is-disabled .swap-target-main small{color:#6d7885}
.swap-wrap .seg.sm label span{font-size:14px;padding:11px 14px}
.swap-wrap .form-actions .btn{min-height:50px;font-size:15px}

/* ---- Alat lanjutan Admin Unit ---- */
details.tools-lanjutan{margin-top:26px;padding:0;overflow:hidden}
details.tools-lanjutan>summary{display:flex;align-items:center;gap:10px;padding:15px 20px;cursor:pointer;font-weight:700;color:#123e70;list-style:none}
details.tools-lanjutan>summary::-webkit-details-marker{display:none}
details.tools-lanjutan[open]>summary{border-bottom:1px solid #e2ebf6;background:#f5f9ff}
.tools-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:18px 20px 20px}
.tools-grid>div{padding:16px;border:1px solid #e2ebf6;border-radius:14px;background:#fafcff}
.tools-grid p{margin:8px 0 12px;font-size:14px;line-height:1.55;color:#3f5b78}
@media(max-width:760px){.tools-grid{grid-template-columns:minmax(0,1fr)}}

/* =====================================================================
   FLEETRA v21 — pendaftaran unit lebih besar, banner laporan terbaca
   ===================================================================== */
/* ---- Halaman publik Pendaftaran Unit: layout & huruf lebih besar ---- */
.reg-shell{width:min(1240px,100%);padding:34px 32px 64px}
.reg-bar{margin-bottom:26px}
.reg-bar img{height:52px}
.reg-back{padding:13px 22px;font-size:15px;border-radius:14px}
.reg-hero{min-height:250px;padding:46px 56px;border-radius:26px}
.reg-eyebrow{font-size:13.5px;letter-spacing:1.8px;margin-bottom:14px}
.reg-hero h1{font-size:42px;letter-spacing:-1px}
.reg-hero p{max-width:720px;margin-top:14px;font-size:17.5px;line-height:1.75}
.reg-steps{gap:20px;margin:24px 0}
.reg-step{gap:16px;padding:22px 24px;border-radius:18px}
.reg-step>b{flex-basis:46px;height:46px;font-size:18px}
.reg-step span{font-size:15px;line-height:1.6}.reg-step span strong{font-size:17px;margin-bottom:4px}
.reg-card{padding:48px 56px 42px;border-radius:26px}
.reg-card h2{font-size:28px;margin-bottom:8px}
.reg-card .reg-sub{font-size:16.5px;margin-bottom:34px}
.reg-grid{gap:30px 36px}
.reg-field label{font-size:16px;margin-bottom:10px}
.reg-field input{height:60px;padding:0 20px;font-size:17px;border-radius:14px}
.reg-field input::placeholder{font-size:16px}
.reg-field small{margin-top:9px;font-size:14px;line-height:1.55}
.reg-actions{gap:16px;margin-top:38px;padding-top:30px}
.reg-actions .btn{min-height:60px;padding:0 36px;font-size:16.5px;border-radius:14px}
.reg-actions .btn-b{min-width:280px}
.reg-note{margin-top:24px;font-size:14.5px;line-height:1.7}
.reg-card .alert,.reg-card .tip{font-size:15.5px;padding:16px 20px}
@media(max-width:1000px){.reg-hero{padding:34px 30px;min-height:0}.reg-hero h1{font-size:32px}.reg-hero p{font-size:16px}.reg-card{padding:34px 28px}}
@media(max-width:860px){.reg-shell{padding:18px 14px 40px}.reg-hero{padding:28px 22px}.reg-hero h1{font-size:28px}.reg-card{padding:26px 20px}.reg-card h2{font-size:23px}.reg-field input{height:56px;font-size:16.5px}.reg-actions .btn{width:100%}.reg-step{padding:18px}}

/* ---- Laporan Armada: banner/ringkasan terbaca (akar masalah: gradasi gelap .report-intro lama + teks gelap) ---- */
.fleet-report .report-head .report-intro,.fleet-report .report-intro{display:block;min-width:220px;padding:0;margin:0;border-radius:0;background:none!important;box-shadow:none!important;border:0;color:#2f557d!important;font-size:15px!important;line-height:1.6!important}
.fleet-report .report-head .report-intro strong,.fleet-report .report-intro strong{display:block;margin-bottom:5px;color:#0f3a69!important;font-size:19px!important;font-weight:800}
.fleet-report .report-head{padding:20px 24px}
.fleet-report .report-actions label{font-size:13.5px!important;color:#3f5b78!important;margin-bottom:4px!important;font-weight:600}
.fleet-report .report-actions select{font-size:15px!important;padding:9px 14px!important;min-height:42px;color:#143c68}
.fleet-report .report-actions .export-dd>summary{min-height:42px}