/* ============================================================
   CarCMMS — Design System
   Ported verbatim from the approved FolksCMMS design system
   (wwwroot/folks/folks.css) and rebranded for CarCMMS, so the
   hi-fi mockups match the production Blazor app 1:1.
   Fonts: IBM Plex Sans / Mono / Sans Arabic via Google Fonts CDN.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root{
  --accent:#d8720d; --accent-strong:#b65f08; --accent-soft:#fbecd8; --accent-text:#ad5a06;
  --canvas:#f3efe7; --surface:#fdfcf9; --surface-2:#f8f5ee; --surface-3:#efe9dd;
  --border:#e7e0d2; --border-strong:#d8cfbc; --text:#28231c; --text-2:#6b6356; --text-3:#9c9382; --text-inv:#fff;
  --nav-bg:#f6f2ea; --nav-bg-2:#f1ece1; --nav-text:#6b6356; --nav-text-strong:#28231c; --nav-muted:#a99f8d;
  --nav-border:#e7e0d2; --nav-active:rgba(201,100,66,0.11);
  --st-info:#2f7d76; --st-info-bg:#e3efec; --st-prog:#7a5fb0; --st-prog-bg:#efeaf6;
  --st-ok:#5b8c4e; --st-ok-bg:#eaf1e3; --st-warn:#b07d22; --st-warn-bg:#f8eed2;
  --st-crit:#c0492f; --st-crit-bg:#f8e6e0; --st-neutral:#7a7164; --st-neutral-bg:#efe9dd;
  --pri-crit:#c0492f; --pri-high:#cf7a2e; --pri-med:#b07d22; --pri-low:#7a7164;
  --r-sm:5px; --r-md:8px; --r-lg:12px; --r-pill:999px;
  --row-h:46px; --pad-y:12px; --gap:16px; --fs-base:13.5px;
  --shadow-sm:0 1px 2px rgba(16,22,34,.06),0 1px 1px rgba(16,22,34,.04);
  --shadow-md:0 4px 14px rgba(16,22,34,.08),0 1px 3px rgba(16,22,34,.06);
  --shadow-lg:0 18px 48px rgba(16,22,34,.18),0 4px 12px rgba(16,22,34,.08);
  --font:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
[data-theme="dark"]{
  --canvas:#0d1117; --surface:#161b22; --surface-2:#1a212b; --surface-3:#202832; --border:#262d38; --border-strong:#313b48;
  --text:#e9edf3; --text-2:#9aa4b2; --text-3:#6b7685; --accent-soft:#3a2a14;
  --nav-bg:#0a0d12; --nav-bg-2:#11151c; --nav-border:#1c222b; --nav-text:#9aa4b2; --nav-text-strong:#e9edf3; --nav-muted:#6b7685; --nav-active:rgba(216,114,13,.16);
  --st-info-bg:#10302c; --st-prog-bg:#221a3d; --st-ok-bg:#13271a; --st-warn-bg:#2c2410; --st-crit-bg:#2e1614; --st-neutral-bg:#1e242e;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{font-family:var(--font);font-size:var(--fs-base);color:var(--text);background:var(--canvas);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button{font-family:inherit;cursor:pointer} input,select,textarea{font-family:inherit}
a{color:inherit}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:99px;border:3px solid var(--surface)}
::-webkit-scrollbar-track{background:transparent}

/* App shell */
.app{display:flex;height:100vh;overflow:hidden}
.nav{width:248px;flex:none;background:linear-gradient(180deg,var(--nav-bg-2),var(--nav-bg));border-right:1px solid var(--nav-border);display:flex;flex-direction:column}
.nav-brand{display:flex;align-items:center;gap:11px;padding:16px 16px 14px;min-height:60px}
.brand-mark{width:38px;height:38px;flex:none;border-radius:9px;background:var(--accent);overflow:hidden;display:grid;place-items:center;color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.14)}
.brand-mark svg{width:22px;height:22px}
.brand-name{display:flex;flex-direction:column;line-height:1.1;overflow:hidden}
.brand-name b{color:var(--nav-text-strong);font-weight:600;font-size:15px;letter-spacing:-.2px}
.brand-name span{color:var(--nav-muted);font-size:10.5px;letter-spacing:.8px;text-transform:uppercase;margin-top:2px}
.nav-scroll{flex:1;overflow-y:auto;padding:6px 10px 16px}
.nav-section-label{color:var(--nav-muted);font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;padding:14px 10px 6px}
.nav-item{display:flex;align-items:center;gap:11px;padding:8.5px 10px;border-radius:var(--r-md);color:var(--nav-text);font-size:13.5px;font-weight:500;cursor:pointer;border:none;background:none;width:100%;text-align:left;position:relative;text-decoration:none;transition:background .12s,color .12s}
.nav-item:hover{background:var(--nav-active);color:var(--nav-text-strong)}
.nav-item.active{background:var(--nav-active);color:var(--nav-text-strong)}
.nav-item.active::before{content:"";position:absolute;left:-10px;top:7px;bottom:7px;width:3px;background:var(--accent);border-radius:0 3px 3px 0}
.nav-item .ni-icon{width:18px;height:18px;flex:none;opacity:.9;display:grid;place-items:center}
.nav-item .ni-icon svg{width:18px;height:18px;display:block}
/* Safety: any icon-container svg without explicit size stays small (fixes standalone pages) */
.ni-icon svg,.k-ic svg,.gi svg,.lf-ic svg,.asset-ic svg,.brand-mark svg{max-width:100%;max-height:100%}
.nav-item.active .ni-icon{opacity:1}
.nav-item .ni-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.nav-item .ni-count{margin-left:auto;font-family:var(--mono);font-size:11px;font-weight:500;background:rgba(40,35,28,.07);color:var(--nav-text);padding:1px 7px;border-radius:99px}
.nav-item.active .ni-count{background:var(--accent);color:#fff}
.nav-item .ni-dot{margin-left:auto;width:7px;height:7px;border-radius:99px;background:var(--st-crit)}
.nav-foot{border-top:1px solid var(--nav-border);padding:10px}
.nav-user{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:var(--r-md);cursor:pointer}
.nav-user:hover{background:var(--nav-active)}
.nav-user-info{overflow:hidden;line-height:1.2}
.nav-user-info b{display:block;color:var(--nav-text-strong);font-size:12.5px;font-weight:600;white-space:nowrap}
.nav-user-info span{color:var(--nav-muted);font-size:11px}

/* Main column */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.topbar{height:60px;flex:none;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:14px;padding:0 22px}
.tb-toggle,.icon-btn{width:38px;height:38px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface);color:var(--text-2);display:grid;place-items:center;position:relative}
.tb-toggle:hover,.icon-btn:hover{background:var(--surface-3);color:var(--text)}
.tb-title{display:flex;flex-direction:column;line-height:1.15}
.tb-title h1{margin:0;font-size:17px;font-weight:600;letter-spacing:-.3px}
.tb-title .crumb{font-size:11.5px;color:var(--text-3);font-weight:500}
.tb-search{margin-left:12px;flex:1;max-width:440px;height:38px;display:flex;align-items:center;gap:9px;padding:0 13px;background:var(--surface-3);border:1px solid transparent;border-radius:var(--r-md);color:var(--text-3)}
.tb-search input{border:none;background:none;outline:none;flex:1;color:var(--text);font-size:13px}
.tb-search kbd{font-family:var(--mono);font-size:10.5px;color:var(--text-3);background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:1px 5px}
.tb-spacer{flex:1}
.tb-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.icon-btn .badge-dot{position:absolute;top:7px;right:8px;width:8px;height:8px;border-radius:99px;background:var(--st-crit);border:2px solid var(--surface)}
.branch-switch{height:38px;display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);font-size:13px;font-weight:500;color:var(--text)}
.branch-switch svg{width:15px;height:15px;color:var(--text-3)}
.lang-toggle{height:38px;padding:0 12px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);font-size:12.5px;font-weight:600;color:var(--text-2)}

/* Content */
.content{flex:1;overflow-y:auto}
.page{padding:22px 26px 60px;max-width:1500px}
.page-head{display:flex;align-items:flex-end;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.page-head .ph-text h2{margin:0;font-size:21px;font-weight:600;letter-spacing:-.4px}
.page-head .ph-text p{margin:4px 0 0;color:var(--text-2);font-size:13px}
.page-head .ph-actions{margin-left:auto;display:flex;gap:9px;align-items:center}

/* Buttons */
.btn{height:38px;padding:0 15px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;text-decoration:none;transition:background .12s,border-color .12s}
.btn:hover{background:var(--surface-3)}
.btn svg{width:16px;height:16px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:var(--shadow-sm)}
.btn.primary:hover{background:var(--accent-strong);border-color:var(--accent-strong)}
.btn.ghost{border-color:transparent;background:transparent;color:var(--text-2)}
.btn.ghost:hover{background:var(--surface-3);color:var(--text)}
.btn.sm{height:32px;padding:0 11px;font-size:12.5px}
.btn.lg{height:44px;font-size:14px}
.btn.block{width:100%;justify-content:center}
.btn.icon{width:38px;padding:0;justify-content:center}
.btn.danger{color:var(--st-crit)} .btn.danger:hover{background:var(--st-crit-bg);border-color:transparent}

/* Pills / priority */
.pill{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:var(--r-pill);font-size:11.5px;font-weight:600;white-space:nowrap;background:var(--st-neutral-bg);color:var(--st-neutral)}
.pill .dot{width:6px;height:6px;border-radius:99px;background:currentColor}
.pill.info{background:var(--st-info-bg);color:var(--st-info)} .pill.prog{background:var(--st-prog-bg);color:var(--st-prog)}
.pill.ok{background:var(--st-ok-bg);color:var(--st-ok)} .pill.warn{background:var(--st-warn-bg);color:var(--st-warn)}
.pill.crit{background:var(--st-crit-bg);color:var(--st-crit)} .pill.amber{background:var(--accent-soft);color:var(--accent-text)}
.pri{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600}
.pri .bars{display:inline-flex;gap:1.5px;align-items:flex-end;height:12px}
.pri .bars i{width:3px;background:currentColor;border-radius:1px;opacity:.3}
.pri .bars i.on{opacity:1}
.pri.crit{color:var(--pri-crit)} .pri.high{color:var(--pri-high)} .pri.med{color:var(--pri-med)} .pri.low{color:var(--pri-low)}

/* Avatar */
.avatar{width:30px;height:30px;border-radius:99px;flex:none;display:grid;place-items:center;font-size:11px;font-weight:600;color:#fff;letter-spacing:.2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.avatar.sm{width:24px;height:24px;font-size:9.5px} .avatar.lg{width:44px;height:44px;font-size:15px}
.avatar-stack{display:flex} .avatar-stack .avatar{margin-left:-8px;box-shadow:0 0 0 2px var(--surface)} .avatar-stack .avatar:first-child{margin-left:0}

/* Cards */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);min-width:0}
.card-head{display:flex;align-items:center;gap:10px;padding:15px 17px;border-bottom:1px solid var(--border)}
.card-head h3{margin:0;font-size:14px;font-weight:600} .card-head .sub{color:var(--text-3);font-size:12px} .card-head .spacer{flex:1}
.card-body{padding:17px}

/* KPI */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)} .kpi-grid>*{min-width:0}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px 17px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.kpi .k-top{display:flex;align-items:center;gap:9px;color:var(--text-2);font-size:12.5px;font-weight:500}
.kpi .k-ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-text)}
.kpi .k-ic svg{width:17px;height:17px}
.kpi .k-val{font-size:30px;font-weight:600;letter-spacing:-1px;margin:10px 0 2px;font-variant-numeric:tabular-nums}
.kpi .k-delta{font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:4px}
.kpi .k-delta.up{color:var(--st-ok)} .kpi .k-delta.down{color:var(--st-crit)} .kpi .k-delta.flat{color:var(--text-3)}
.kpi .k-sub{color:var(--text-3);font-size:11.5px}

/* Tables */
.tbl-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow-x:auto;box-shadow:var(--shadow-sm)}
.tbl-toolbar{display:flex;align-items:center;gap:9px;padding:11px 13px;border-bottom:1px solid var(--border);flex-wrap:wrap}
table.tbl{width:100%;border-collapse:collapse}
.tbl thead th{text-align:left;font-size:11px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--text-3);padding:9px 14px;border-bottom:1px solid var(--border);white-space:nowrap;background:var(--surface-2)}
.tbl tbody td{padding:0 14px;height:var(--row-h);border-bottom:1px solid var(--border);font-size:13px;color:var(--text);vertical-align:middle}
.tbl tbody tr:hover{background:var(--surface-2)}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl .mono,.tbl .num{font-family:var(--mono);font-size:12px;color:var(--text-2)}
.tbl .strong,td.strong{font-weight:600;color:var(--text)}
.cell-stack{display:flex;flex-direction:column;gap:2px;line-height:1.25} .cell-stack .sub{font-size:11.5px;color:var(--text-3)}
.cell-asset{display:flex;align-items:center;gap:10px}
.asset-ic{width:30px;height:30px;border-radius:7px;background:var(--surface-3);display:grid;place-items:center;color:var(--text-2);flex:none}
.asset-ic svg{width:16px;height:16px}

/* chips / inputs / seg */
.chip{height:32px;padding:0 11px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface);color:var(--text-2);font-size:12.5px;font-weight:500;display:inline-flex;align-items:center;gap:6px}
.chip:hover{background:var(--surface-3);color:var(--text)} .chip.active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-text)}
.chip svg{width:14px;height:14px}
.seg{display:inline-flex;background:var(--surface-3);border-radius:var(--r-md);padding:3px;gap:2px}
.seg button{height:28px;padding:0 12px;border:none;background:none;border-radius:6px;font-size:12.5px;font-weight:500;color:var(--text-2)}
.seg button.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}
.search-in{height:32px;display:flex;align-items:center;gap:7px;padding:0 10px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);color:var(--text-3);min-width:210px}
.search-in input{border:none;outline:none;background:none;color:var(--text);font-size:12.5px;width:100%}
.spacer{flex:1}
.input,.field-in{height:38px;width:100%;padding:0 12px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);color:var(--text);font-size:13px;font-family:inherit;outline:none}
textarea.input{height:auto;padding:9px 12px;line-height:1.5} select.input{cursor:pointer}
.input:focus,.field-in:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.input::placeholder{color:var(--text-3)}
.label{font-size:11.5px;color:var(--text-3);font-weight:600;display:block;margin-bottom:6px}
.bar{height:6px;border-radius:99px;background:var(--surface-3);overflow:hidden} .bar>i{display:block;height:100%;background:var(--accent);border-radius:99px}

/* layout helpers */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.grid-2>*,.grid-3>*{min-width:0}
.row{display:flex;align-items:center;gap:10px} .col{display:flex;flex-direction:column}
.between{justify-content:space-between} .wrap{flex-wrap:wrap}
.muted{color:var(--text-2)} .faint{color:var(--text-3)} .mono{font-family:var(--mono)} .tnum{font-variant-numeric:tabular-nums} .strong{font-weight:600}
.field-row{display:flex;padding:11px 0;border-bottom:1px solid var(--border);font-size:13px}
.field-row .fr-label{width:150px;flex:none;color:var(--text-3);font-weight:500} .field-row .fr-val{flex:1;color:var(--text);font-weight:500}
.section-title{font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--text-3);margin:20px 0 10px}
hr.sep{border:none;border-top:1px solid var(--border);margin:18px 0}
.tag{font-family:var(--mono);font-size:11px;color:var(--text-2);background:var(--surface-3);padding:2px 7px;border-radius:5px}
.subtabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:var(--gap);flex-wrap:wrap}
.subtab{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border:none;background:none;color:var(--text-2);font-size:13px;font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px;text-decoration:none}
.subtab:hover{color:var(--text)} .subtab.on{color:var(--accent-text);border-bottom-color:var(--accent);font-weight:600}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
@media(max-width:640px){.form-grid{grid-template-columns:1fr}}

/* timeline */
.tl{position:relative;padding-left:22px}
.tl::before{content:"";position:absolute;left:6px;top:4px;bottom:4px;width:2px;background:var(--border)}
.tl-item{position:relative;padding:0 0 16px}
.tl-item::before{content:"";position:absolute;left:-19px;top:3px;width:11px;height:11px;border-radius:99px;background:var(--surface);border:2px solid var(--border-strong)}
.tl-item.done::before{background:var(--st-ok);border-color:var(--st-ok)}
.tl-item.active::before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.tl-item .tl-time{font-size:11px;color:var(--text-3);font-family:var(--mono)} .tl-item .tl-text{font-size:12.5px;margin-top:1px}

/* kanban */
.kanban{display:grid;grid-auto-flow:column;grid-auto-columns:300px;gap:14px;overflow-x:auto;padding-bottom:8px;align-items:start}
.kcol{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-lg);display:flex;flex-direction:column;max-height:calc(100vh - 250px)}
.kcol-head{padding:12px 13px;display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600}
.kcol-head .cnt{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--text-3);background:var(--surface-3);padding:1px 7px;border-radius:99px}
.kcol-body{padding:0 9px 10px;overflow-y:auto;display:flex;flex-direction:column;gap:9px}
.kcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:11px 12px;box-shadow:var(--shadow-sm);cursor:pointer}
.kcard:hover{box-shadow:var(--shadow-md)}
.kcard .kc-top{display:flex;align-items:center;gap:7px;margin-bottom:7px}
.kcard .kc-id{font-family:var(--mono);font-size:11px;color:var(--text-3)}
.kcard .kc-title{font-size:13px;font-weight:600;line-height:1.3;margin-bottom:8px}
.kcard .kc-meta{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--text-3)}

/* donut/legend/bars */
.legend{display:flex;flex-direction:column;gap:9px}
.legend .lg-row{display:flex;align-items:center;gap:9px;font-size:12.5px}
.legend .lg-sw{width:10px;height:10px;border-radius:3px;flex:none}
.legend .lg-val{margin-left:auto;font-weight:600;font-variant-numeric:tabular-nums}
.bars-chart{display:flex;align-items:flex-end;gap:10px;height:160px;padding-top:10px}
.bars-chart .bc{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;height:100%;justify-content:flex-end}
.bars-chart .bc .stack{width:100%;max-width:34px;display:flex;flex-direction:column-reverse;border-radius:4px 4px 0 0;overflow:hidden}
.bars-chart .bc .seg-b{width:100%} .bars-chart .bc .lab{font-size:10.5px;color:var(--text-3);font-weight:500}

/* ====== Page-specific additions for CarCMMS mockups ====== */
/* Login */
.login{display:grid;grid-template-columns:1.05fr .95fr;min-height:100vh}
.login-aside{position:relative;overflow:hidden;padding:48px 56px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;gap:30px;background:radial-gradient(900px 520px at 18% -12%,rgba(255,255,255,.12),transparent 60%),radial-gradient(700px 480px at 110% 120%,rgba(0,0,0,.18),transparent 60%),linear-gradient(158deg,var(--accent),var(--accent-strong) 62%,#7c3f06 100%)}
.login-aside h2{color:#fff;margin:0;font-size:30px;letter-spacing:-.5px}
.login-aside p{color:rgba(255,255,255,.86);line-height:1.6}
.login-feat{display:flex;align-items:center;gap:11px;color:#fff;font-size:13.5px;margin:9px 0}
.login-feat .lf-ic{width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.16);display:grid;place-items:center;flex:none}
.login-feat .lf-ic svg{width:16px;height:16px}
.login-form-wrap{display:flex;align-items:center;justify-content:center;padding:40px 26px;background:var(--canvas)}
.login-card{width:100%;max-width:404px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:30px;box-shadow:var(--shadow-lg)}
@media(max-width:880px){.login{grid-template-columns:1fr}.login-aside{display:none}}

/* Document sheet (invoice / payslip / statement) */
.sheet{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-md);padding:34px 38px;max-width:820px;margin:0 auto;color:#1c1812}
[data-theme="dark"] .sheet{background:var(--surface);color:var(--text)}
.sheet h1{font-size:22px;margin:0 0 2px} .sheet .sub{color:var(--text-3);font-size:12px}
.inv-grid{width:100%;border-collapse:collapse;margin:16px 0}
.inv-grid th{background:var(--surface-2);text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--text-3);padding:9px 12px;border-bottom:1px solid var(--border)}
.inv-grid td{padding:10px 12px;border-bottom:1px solid var(--border);font-size:13px}
.inv-tot{display:flex;justify-content:space-between;padding:6px 0;font-size:13px} .inv-tot.grand{font-size:17px;font-weight:700;border-top:2px solid var(--text);margin-top:6px;padding-top:10px}
.qr{width:120px;height:120px;border-radius:10px;background:#fff;border:1px solid var(--border);display:grid;place-items:center}
.zatca-badge{display:inline-flex;align-items:center;gap:7px;background:var(--st-ok-bg);color:var(--st-ok);border-radius:var(--r-pill);padding:4px 12px;font-size:12px;font-weight:600}

/* Vehicle inspection diagram */
.inspect{display:grid;grid-template-columns:1fr 280px;gap:var(--gap)}
.car-diagram{position:relative;background:var(--surface-2);border:1px dashed var(--border-strong);border-radius:var(--r-lg);padding:18px;min-height:320px;display:grid;place-items:center}
.dmg{position:absolute;width:26px;height:26px;border-radius:99px;display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff;box-shadow:var(--shadow-md);cursor:pointer;transform:translate(-50%,-50%)}
.dmg.scratch{background:var(--st-warn)} .dmg.dent{background:var(--st-crit)} .dmg.chip{background:var(--st-prog)}

/* Mobile / PWA frame */
.phone-wrap{display:flex;gap:30px;flex-wrap:wrap;justify-content:center;padding:20px}
.phone{width:360px;background:var(--surface);border:1px solid var(--border-strong);border-radius:34px;box-shadow:var(--shadow-lg);overflow:hidden;display:flex;flex-direction:column;height:740px}
.phone-status{height:34px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 18px;font-size:11px;font-family:var(--mono)}
.phone-top{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.phone-body{flex:1;overflow-y:auto;padding:14px 16px;background:var(--canvas)}
.phone-tabbar{height:62px;border-top:1px solid var(--border);background:var(--surface);display:flex;align-items:center;justify-content:space-around}
.phone-tab{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;color:var(--text-3)}
.phone-tab.on{color:var(--accent-text)} .phone-tab svg{width:21px;height:21px}
.m-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:13px 14px;box-shadow:var(--shadow-sm);margin-bottom:11px}

/* index gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.gcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);overflow:hidden;text-decoration:none;color:inherit;transition:box-shadow .15s,transform .06s}
.gcard:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.gcard .gc-prev{height:120px;background:linear-gradient(135deg,var(--accent-soft),var(--surface-3));display:grid;place-items:center;color:var(--accent-text);border-bottom:1px solid var(--border)}
.gcard .gc-prev svg{width:38px;height:38px}
.gcard .gc-body{padding:13px 15px} .gcard .gc-body b{font-size:13.5px} .gcard .gc-body p{margin:3px 0 0;font-size:12px;color:var(--text-3)}

/* Modal (centered) — mirrors reference Modal component */
/* hidden by default; shell.js adds .open to show */
.scrim{position:fixed;inset:0;background:rgba(16,22,34,.42);z-index:60;display:none}
.scrim.open{display:block}
.modal{position:fixed;inset:0;display:none;place-items:center;z-index:61;padding:20px}
.modal.open{display:grid}
.modal-card{width:560px;max-width:94vw;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;max-height:88vh}
.modal-head{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.modal-head h3{margin:0;font-size:15px;font-weight:600} .modal-head .x{margin-left:auto;color:var(--text-3);background:none;border:none;font-size:18px}
.modal-body{padding:18px 20px;overflow-y:auto} .modal-foot{padding:13px 20px;border-top:1px solid var(--border);display:flex;gap:9px;justify-content:flex-end;background:var(--surface-2)}
.fl-banner{margin-bottom:14px;padding:10px 14px;border-radius:10px;background:var(--st-info-bg);color:var(--st-info);font-size:13px;font-weight:500}
.row-actions{display:inline-flex;gap:4px;white-space:nowrap;justify-content:flex-end}
.priv-cell{width:24px;height:24px;border-radius:6px;border:1.5px solid var(--border-strong);background:var(--surface);display:inline-grid;place-items:center;color:#fff}
.priv-cell.on{background:var(--accent);border-color:var(--accent)}
.tree-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--border);font-size:13px}
.tree-row .ind{display:inline-block}

/* Calendar (bookings page) */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:var(--gap)}
.cal-dow{font-size:11px;font-weight:600;text-align:center;color:var(--text-3);padding:4px 0;text-transform:uppercase;letter-spacing:.5px}
.cal-cell{min-height:100px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:8px;display:flex;flex-direction:column;gap:4px;cursor:pointer;transition:background .1s}
.cal-cell:hover{background:var(--surface-2)}
.cal-cell.today{border-color:var(--accent);background:var(--accent-soft)}
.cal-cell.dim{background:var(--surface-3);opacity:.7;cursor:default}
.cnum{font-size:12px;font-weight:600;color:var(--text-3);margin-bottom:2px;display:block}
.cal-ev{font-size:11px;font-weight:500;padding:3px 7px;border-radius:4px;border-left:3px solid;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:opacity .1s}
.cal-ev:hover{opacity:.8}

/* RTL */
[dir="rtl"] .nav{border-right:none;border-left:1px solid var(--nav-border)}
[dir="rtl"] .nav-item.active::before{left:auto;right:-10px;border-radius:3px 0 0 3px}
[dir="rtl"] .nav-item .ni-count,[dir="rtl"] .nav-item .ni-dot{margin-left:0;margin-right:auto}
[dir="rtl"] .tb-actions{margin-left:0;margin-right:auto}
[dir="rtl"] .tb-search{margin-left:0;margin-right:12px}
[dir="rtl"] .ph-actions{margin-left:0;margin-right:auto}
[dir="rtl"] .kpi .k-delta,[dir="rtl"] .nav-item .ni-count{direction:ltr}
[dir="rtl"] .tbl thead th{text-align:right}
[dir="rtl"] .field-row .fr-label{text-align:right}
[dir="rtl"] .mono,[dir="rtl"] .tnum,[dir="rtl"] .k-val{direction:ltr;unicode-bidi:plaintext}
[lang="ar"],[lang="ar"] body{font-family:"IBM Plex Sans Arabic","IBM Plex Sans",system-ui,sans-serif}
[dir="rtl"] .ni-label{text-align:right}