:root{--bg:#F3F7FB;--surface:#FFFFFF;--sunk:#EAF1F7;--line:#D8E2EC;--ink:#08172C;--muted:#5A6A80;--brand:#0C79BC;--lift:#3FA3DD;--brand-soft:#E3F1FA;--deep:#0A2A5E;--night:#020C1F;--ok:#12855C;--ok-soft:#E2F4EC;--warn:#B5780F;--warn-soft:#FBF1DE;--crit:#B5342A;--crit-soft:#FBE6E3;--soft-crit:#D98C83;--soft-crit-bg:#F3CFCA;--r:8px;--ar:'Tajawal','Noto Sans Arabic',system-ui,sans-serif;--en:'Plus Jakarta Sans',system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,monospace;--side:248px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ar);font-size:15px;line-height:1.6;direction:rtl}
a{color:var(--brand)}button{font-family:inherit;font-size:inherit}
h1,h2,h3,h4{margin:0;line-height:1.3;font-weight:800}
.mono{font-family:var(--mono);direction:ltr;unicode-bidi:isolate}
.en{font-family:var(--en);direction:ltr;unicode-bidi:isolate}
.num{font-family:var(--en);font-variant-numeric:tabular-nums;unicode-bidi:isolate}
[hidden]{display:none!important}
.muted{color:var(--muted)}.small{font-size:13px}.xs{font-size:12px}
/* ---------- login ---------- */
#login{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(1200px 600px at 80% -10%,#E3F1FA 0,transparent 60%),var(--bg)}
.login-card{width:min(960px,100%);background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 60px rgba(8,23,44,.08);display:grid;grid-template-columns:1.1fr 1fr;overflow:hidden}
.login-card .art{background:linear-gradient(160deg,var(--deep),var(--night));color:#EAF2FA;padding:40px;display:flex;flex-direction:column;justify-content:space-between;min-height:520px}
.login-card .art h1{font-size:30px;color:#fff}.login-card .art p{color:#8FA6C2}
.login-card .form{padding:40px}
.persona{display:grid;gap:10px;margin-top:16px}
.persona button{display:flex;align-items:center;gap:14px;text-align:start;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;transition:.15s}
.persona button:hover{border-color:var(--brand);background:var(--brand-soft)}
.persona .ic{width:40px;height:40px;border-radius:10px;background:var(--brand-soft);display:grid;place-items:center;color:var(--brand);flex:none}
.persona b{display:block}.persona small{color:var(--muted)}
.logo{font-family:var(--en);font-weight:800;letter-spacing:-.02em;direction:ltr;unicode-bidi:isolate;text-decoration:none;color:inherit}
.logo b{color:var(--brand)}
/* ---------- shell ---------- */
#shell{display:grid;grid-template-columns:var(--side) 1fr;min-height:100vh}
.side{background:var(--surface);border-inline-start:1px solid var(--line);padding:18px 14px;position:sticky;top:0;height:100vh;overflow:auto;display:flex;flex-direction:column;gap:14px}
.side .logo{font-size:22px;padding:4px 8px}
.tenant{background:var(--sunk);border-radius:var(--r);padding:10px 12px;font-size:13px;color:var(--muted)}
.tenant b{display:block;color:var(--ink);font-size:14px}
.tenant select{width:100%;margin-top:8px;border:1px solid var(--line);border-radius:6px;padding:6px 8px;background:#fff;font-family:inherit}
.nav{display:flex;flex-direction:column;gap:2px}
.nav .grp{font-size:11px;letter-spacing:.08em;color:var(--muted);padding:10px 10px 4px;font-family:var(--en);text-transform:uppercase;direction:ltr;text-align:right}
.nav a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r);color:var(--ink);text-decoration:none;font-weight:500}
.nav a:hover{background:var(--sunk)}.nav a.active{background:var(--brand-soft);color:var(--brand);font-weight:700}
.nav a svg{width:18px;height:18px;flex:none;opacity:.8}
.nav a .badge{margin-inline-start:auto}
.side .foot{margin-top:auto;font-size:12px;color:var(--muted)}
.main{min-width:0}
.topbar{position:sticky;top:0;z-index:20;background:rgba(243,247,251,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:10px 24px}
.topbar .search{flex:1;max-width:420px;display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 14px}
.topbar .search input{border:0;outline:0;background:none;flex:1;font-family:inherit;font-size:14px}
.topbar .who{margin-inline-start:auto;display:flex;align-items:center;gap:10px;font-size:13px}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--deep);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px;overflow:hidden}.avatar img{width:100%;height:100%;object-fit:cover}.staff{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line)}.staff img{width:34px;height:34px;border-radius:50%}.staff .nm{flex:1;min-width:0}.staff .nm b{display:block;font-size:13px}.staff .nm small{color:var(--muted);font-size:11px}.staff .bar{width:120px}.staff .bar .meter{height:6px}.staff .val{font-family:var(--en);font-weight:700;font-size:13px;min-width:48px;text-align:left}.hero .kpis{grid-template-columns:repeat(3,1fr)}
.page{padding:22px 24px 60px;max-width:1380px}
.page-head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.page-head h1{font-size:24px}.page-head .sub{color:var(--muted);font-size:14px}
.page-head .actions{margin-inline-start:auto;display:flex;gap:8px;flex-wrap:wrap}
.crumbs{font-size:13px;color:var(--muted);margin-bottom:6px}.crumbs a{color:var(--muted);text-decoration:none}.crumbs a:hover{color:var(--brand)}
/* ---------- primitives ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:9px 16px;border-radius:var(--r);cursor:pointer;font-weight:700;text-decoration:none;line-height:1.2;transition:.15s;white-space:nowrap}
.btn:hover{border-color:var(--brand);color:var(--brand)}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}.btn-primary:hover{background:#0A66A0;color:#fff}
.btn-ghost{background:transparent}.btn-sm{padding:6px 12px;font-size:13px}.btn-lg{padding:12px 22px;font-size:16px}
.btn-danger{color:var(--crit);border-color:#E7C2BD}.btn-danger:hover{background:var(--crit-soft)}
.btn-ok{background:var(--ok);border-color:var(--ok);color:#fff}
.btn:disabled{opacity:.5;cursor:not-allowed}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px}
.card h3{font-size:16px;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.card h3 .more{margin-inline-start:auto;font-size:13px;font-weight:500}
.grid{display:grid;gap:16px}.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.g-main{grid-template-columns:2fr 1fr}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.kpis.k4{grid-template-columns:repeat(4,1fr)}@media (max-width:1100px){.kpis.k4{grid-template-columns:repeat(2,1fr)}}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-width:0}
.kpi .l{font-size:12px;color:var(--muted)}.kpi .v{font-family:var(--en);font-size:19px;font-weight:800;line-height:1.25;margin-top:2px;direction:ltr;text-align:right;white-space:nowrap}
.kpi .v small{font-size:11px;color:var(--muted);font-weight:600}.kpi .cmp{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);margin-top:4px}.kpi .cmp .meter{flex:1;height:4px}.kpi .cmp .meter i.over{background:var(--ok)}.kpi .cmp .meter i.under{background:var(--soft-crit)}
.kpi .d{font-size:11px;margin-top:3px}.up{color:var(--ok)}.dn{color:var(--crit)}
.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:700;background:var(--sunk);color:var(--muted);white-space:nowrap}
.b-ok{background:var(--ok-soft);color:var(--ok)}.b-warn{background:var(--warn-soft);color:var(--warn)}.b-crit{background:var(--crit-soft);color:var(--crit)}.b-info{background:var(--brand-soft);color:var(--brand)}.b-night{background:var(--deep);color:#fff}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:start;font-size:12px;color:var(--muted);font-weight:700;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}.tbl tr.row:hover td{background:#F7FAFD;cursor:pointer}
.tbl .sub{display:block;font-size:12px;color:var(--muted)}
.tbl .num{text-align:left}
.tbl .thumb{width:64px;height:44px;object-fit:cover;border-radius:6px;background:var(--sunk)}
.empty{padding:40px;text-align:center;color:var(--muted)}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.toolbar .chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 12px;font-size:13px;cursor:pointer}
.toolbar .chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.toolbar input,.toolbar select{border:1px solid var(--line);border-radius:var(--r);padding:7px 10px;font-family:inherit;background:#fff}
/* forms */
.form{display:grid;gap:14px}.form.g2{grid-template-columns:1fr 1fr}.form.g3{grid-template-columns:1fr 1fr 1fr}
.f{display:flex;flex-direction:column;gap:5px}.f label{font-size:13px;font-weight:700;color:var(--ink)}.f label .req{color:var(--crit)}
.f input,.f select,.f textarea{border:1px solid var(--line);border-radius:var(--r);padding:9px 12px;font-family:inherit;font-size:14px;background:#fff;color:var(--ink);width:100%}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--brand-soft);border-color:var(--brand)}
.f .hint{font-size:12px;color:var(--muted)}.f.err input,.f.err select{border-color:var(--crit)}.f .errmsg{font-size:12px;color:var(--crit)}
.f.span{grid-column:1/-1}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.seg button{border:0;background:#fff;padding:7px 14px;cursor:pointer}.seg button.on{background:var(--brand);color:#fff}
.fieldset{border:1px solid var(--line);border-radius:12px;padding:16px;background:#fff}
.fieldset legend{font-weight:800;padding:0 8px;font-size:14px}
.steps{display:flex;gap:0;margin-bottom:20px;counter-reset:s}
.steps div{flex:1;padding:10px 12px;border-bottom:3px solid var(--line);color:var(--muted);font-size:13px;font-weight:700}
.steps div.on{border-color:var(--brand);color:var(--brand)}.steps div.done{border-color:var(--ok);color:var(--ok)}
/* vehicle cards */
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.vcard{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;cursor:pointer;transition:.15s;text-decoration:none;color:inherit;display:block}
.vcard:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(8,23,44,.08);border-color:#BFD3E4}
.vcard .ph{aspect-ratio:4/3;background:var(--sunk) center/cover;position:relative}
.vcard .ph .st{position:absolute;top:10px;right:10px}
.vcard .ph .cls{position:absolute;bottom:10px;left:10px;background:rgba(2,12,31,.7);color:#fff;font-size:11px;padding:2px 8px;border-radius:999px;font-family:var(--en)}
.vcard .bd{padding:12px 14px}.vcard .bd b{display:block;font-size:15px}
.plate{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--ink);border-radius:5px;padding:1px 8px;font-family:var(--mono);font-size:12px;font-weight:700;direction:ltr;background:#fff}
.plate::before{content:"KSA";font-size:9px;color:var(--brand);border-right:1px solid var(--line);padding-right:5px}
.vcard .meta{display:flex;justify-content:space-between;align-items:center;margin-top:6px;font-size:12px;color:var(--muted)}.vcard .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}.vcard .stats div{font-size:10px;color:var(--muted)}.vcard .stats b{display:block;font-family:var(--en);font-size:13px;color:var(--ink)}.vcard .renter{display:flex;align-items:center;gap:8px;margin-top:8px;background:var(--sunk);border-radius:8px;padding:6px 8px;font-size:12px}.vcard .renter .av{width:26px;height:26px;border-radius:50%;background:var(--deep);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700;flex:none}.vcard .renter b{display:inline}.vcard .renter small{display:block;color:var(--muted);font-size:11px}
.hero{display:grid;grid-template-columns:420px 1fr;gap:20px;align-items:stretch}
.hero .ph{border-radius:12px;background:var(--sunk) center/cover;min-height:280px;border:1px solid var(--line)}
.hero .info{display:flex;flex-direction:column;gap:10px}
.hero h1{font-size:26px}
.dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:14px}.dl dt{color:var(--muted)}.dl dd{margin:0;font-weight:600}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:18px 0 16px;overflow:auto}
.tabs button{border:0;background:none;padding:10px 14px;cursor:pointer;color:var(--muted);font-weight:700;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs button.on{color:var(--brand);border-color:var(--brand)}
/* bars chart */
.bars{display:flex;gap:6px;height:112px;position:relative}.bars .b{flex:1;display:flex;flex-direction:column;min-width:0}.bars .b .trk{flex:1;display:flex;align-items:flex-end;gap:2px}.bars .b .trk i{flex:1;background:var(--brand);border-radius:3px 3px 0 0;display:block;max-width:22px;margin:0 auto}.bars .b .trk i.c{background:var(--soft-crit);opacity:.9}.bars .b .trk i.g{background:#CBD8E4}.bars .b span{text-align:center;font-size:10px;color:var(--muted);font-family:var(--en);padding-top:3px}.bars .avg{position:absolute;left:0;right:0;border-top:1.5px dashed #8CA3BA;pointer-events:none}.bars .avg b{position:absolute;right:0;top:-14px;font-size:10px;color:#5A6A80;font-weight:600;background:#fff;padding:0 4px}.legend{display:flex;gap:12px;font-size:11px;color:var(--muted);margin-top:6px;flex-wrap:wrap}.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;vertical-align:-1px;margin-inline-end:4px}
.meter{height:8px;background:var(--sunk);border-radius:999px;overflow:hidden}.meter i{display:block;height:100%;background:var(--brand);border-radius:999px}
.timeline{display:flex;flex-direction:column;gap:0;position:relative;padding-inline-start:18px}
.timeline::before{content:"";position:absolute;inset-inline-start:5px;top:6px;bottom:6px;width:2px;background:var(--line)}
.timeline .t{position:relative;padding:6px 0 14px}.timeline .t::before{content:"";position:absolute;inset-inline-start:-18px;top:12px;width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid var(--brand)}
.timeline .t.c::before{border-color:var(--crit)}.timeline .t.o::before{border-color:var(--ok)}
.timeline .t b{display:block}.timeline .t small{color:var(--muted)}
/* drawer / modal */
.overlay{position:fixed;inset:0;background:rgba(8,23,44,.45);z-index:50;display:grid;place-items:center;padding:20px}
.modal{background:var(--surface);border-radius:14px;width:min(760px,100%);max-height:92vh;overflow:auto;padding:22px;box-shadow:0 30px 80px rgba(0,0,0,.25)}
.modal.wide{width:min(1040px,100%)}
.modal h2{font-size:20px;margin-bottom:14px}
.modal .foot{display:flex;gap:8px;justify-content:flex-start;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.toast{position:fixed;bottom:22px;left:22px;z-index:99;background:var(--ink);color:#fff;padding:12px 18px;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.25);font-weight:700;max-width:420px}
.toast.ok{background:var(--ok)}.toast.crit{background:var(--crit)}
/* inspection */
.insp{display:grid;grid-template-columns:1.25fr 1fr;gap:18px}
.carmap{position:relative;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px}
.carmap svg{width:100%;max-width:300px;height:auto;display:block;margin:0 auto}
.carmap .zone{fill:#EAF1F7;stroke:#BFD3E4;stroke-width:1.5;cursor:pointer;transition:.15s}
.carmap .zone:hover{fill:#D7E9F7}.carmap .zone.d1{fill:#FBF1DE;stroke:#B5780F}.carmap .zone.d2{fill:#FBE6E3;stroke:#B5342A}
.carmap text{font-size:9px;fill:#5A6A80;pointer-events:none;font-family:var(--ar)}
.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.photos .p{aspect-ratio:4/3;border-radius:8px;background:var(--sunk) center/cover;position:relative;border:1px solid var(--line);overflow:hidden}
.photos .p span{position:absolute;bottom:0;inset-inline:0;background:rgba(2,12,31,.65);color:#fff;font-size:11px;padding:2px 6px}
.photos .add{aspect-ratio:4/3;border:2px dashed var(--line);border-radius:8px;display:grid;place-items:center;color:var(--muted);cursor:pointer;font-size:13px;text-align:center}
.photos .add:hover{border-color:var(--brand);color:var(--brand)}
.ai-box{background:linear-gradient(135deg,#F0F7FD,#FFFFFF);border:1px solid #BFD3E4;border-radius:12px;padding:16px}
.ai-box .scan{height:6px;background:var(--sunk);border-radius:999px;overflow:hidden;margin:10px 0}
.ai-box .scan i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand),var(--lift));transition:width .4s}
.finding{display:flex;gap:10px;align-items:flex-start;padding:10px;border:1px solid var(--line);border-radius:8px;margin-top:8px;background:#fff}
.finding .sev{width:10px;height:10px;border-radius:50%;margin-top:6px;flex:none}
.sev1{background:var(--warn)}.sev2{background:var(--crit)}.sev0{background:var(--ok)}
/* qr/invoice */
.inv{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px;max-width:720px}
.inv .hd{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:14px}
.inv .qr{width:120px;height:120px}
.inv table{width:100%;border-collapse:collapse;font-size:14px}.inv td,.inv th{padding:8px;border-bottom:1px solid var(--line);text-align:start}
.inv .tot td{font-weight:800;border-bottom:0}
/* integrations */
.int{display:flex;gap:14px;align-items:flex-start}
.int .ic{width:46px;height:46px;border-radius:10px;display:grid;place-items:center;font-family:var(--en);font-weight:800;font-size:13px;flex:none;color:#fff;background:var(--deep)}
.int .bd{flex:1}.int .bd b{display:block;font-size:15px}.int .bd p{margin:4px 0 8px;font-size:13px;color:var(--muted)}
.int .ic.gov{background:#0A5C36}.int .ic.ent{background:var(--brand)}.int .ic.pay{background:#7B2CBF}.int .ic.tel{background:#B5780F}
.pill-row{display:flex;gap:6px;flex-wrap:wrap}
.notice{background:var(--warn-soft);border:1px solid #EBD9B0;border-radius:var(--r);padding:10px 14px;font-size:13px}
.notice.info{background:var(--brand-soft);border-color:#BFD3E4}
.demo-flag{font-family:var(--en);font-size:10px;letter-spacing:.1em;background:var(--warn-soft);color:var(--warn);padding:2px 8px;border-radius:999px;font-weight:800}
.mtop{display:none}
.print-only{display:none}
@media print{.side,.topbar,.actions,.tabs,.btn{display:none!important}#shell{grid-template-columns:1fr}.page{padding:0}.print-only{display:block}}
@media (max-width:1100px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}.g-main{grid-template-columns:1fr}.hero{grid-template-columns:1fr}}
@media (max-width:860px){.card>.tbl{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}.page{overflow-x:hidden}#shell{grid-template-columns:1fr}.side{display:none}.side.open{display:flex;position:fixed;inset:0;z-index:60;height:100vh;width:min(300px,85vw);right:0}.mtop{display:flex;align-items:center;gap:10px}.g2,.g3,.g4,.form.g2,.form.g3{grid-template-columns:1fr}.insp{grid-template-columns:1fr}.login-card{grid-template-columns:1fr}.login-card .art{min-height:0}.page{padding:14px 14px 60px}.topbar{padding:10px 14px}.topbar .search{display:none}}