:root{
  /* Händler Auto Service brand */
  --navy:#20305A; --navy-2:#16213F; --red:#CB2335; --red-2:#A81B2B; --beige:#C7CAAA;
  --bg:#F2F2EC; --panel:#fff; --ink:#1B2236; --muted:#69708A; --line:#E2E2DA; --brand:var(--navy); --brand-2:var(--red);
  --ok:#1f8a4c; --warn:#b7791f; --bad:#c53030; --chip:#ECECE4; --focus:#2A4A8C;
  --font: "Inter","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 var(--font)}
a{color:var(--focus);text-decoration:none} a:hover{text-decoration:underline}
header.top{background:linear-gradient(180deg,var(--navy),var(--navy-2));color:#fff;display:flex;align-items:center;gap:18px;padding:0 18px;height:56px;position:sticky;top:0;z-index:20;box-shadow:inset 0 -3px 0 var(--red)}
header.top .logo{font-weight:800;letter-spacing:.5px;white-space:nowrap;display:flex;align-items:center;gap:10px;color:var(--beige)}
header.top .logo img{height:38px;display:block}
header.top .logo span{color:#fff}
header.top img.logo2{height:32px}
nav.main{display:flex;gap:2px;flex:1;overflow-x:auto}
nav.main a{color:#D9DCE6;padding:17px 10px;white-space:nowrap;font-weight:500}
nav.main a.on,nav.main a:hover{color:#fff;text-decoration:none;box-shadow:inset 0 -3px 0 var(--brand-2)}
header.top form{margin:0} header.top select{background:var(--navy-2);color:#fff;border:1px solid #3A4A78;border-radius:6px;padding:5px 8px}
header.top .who{font-size:12px;color:var(--beige);white-space:nowrap}
.sub{background:#fff;border-bottom:1px solid var(--line);padding:0 18px;display:flex;gap:4px;overflow-x:auto}
.sub a{padding:10px 10px;color:var(--muted);white-space:nowrap} .sub a.on{color:var(--navy);font-weight:600;box-shadow:inset 0 -2px 0 var(--red)}
main{padding:18px;max-width:1400px;margin:0 auto}
h1{font-size:20px;margin:4px 0 14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
h1 .spacer{flex:1}
h2{font-size:15px;margin:0 0 10px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px;margin-bottom:16px}
.grid{display:grid;gap:16px} .g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.g2,.g3,.g4{grid-template-columns:1fr}}
table{width:100%;border-collapse:collapse;background:#fff}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);background:#fafbfc;font-weight:600}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tr.total td{font-weight:700;border-top:2px solid var(--ink)}
tbody tr:hover{background:#fafcff}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:#fff;margin-bottom:16px}
.tablewrap table th:first-child,.tablewrap table td:first-child{padding-left:14px}
label{display:block;font-size:12px;color:var(--muted);margin:0 0 4px;font-weight:500}
input,select,textarea{width:100%;padding:8px 10px;border:1px solid #cfd5df;border-radius:7px;font:inherit;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid #C9D3EA;border-color:var(--focus)}
input[type=checkbox]{width:auto} textarea{min-height:70px}
.field{margin-bottom:12px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end} .row>.field{flex:1;min-width:140px}
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;font-size:14px;border-radius:7px;border:1px solid #cfd5df;background:#fff;color:var(--ink);font-family:inherit;font-weight:600;cursor:pointer;white-space:nowrap}
.btn:hover{text-decoration:none;background:#f3f6fa}
.btn.primary{background:var(--red);border-color:var(--red);color:#fff} .btn.primary:hover{background:var(--red-2)}
.btn.good{background:var(--ok);border-color:var(--ok);color:#fff} .btn.danger{color:var(--bad);border-color:#f0c4c4}
.btn.sm{padding:4px 9px;font-size:12px}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-block;padding:2px 9px;border-radius:999px;background:var(--chip);font-size:12px;font-weight:600;color:#3a4458;white-space:nowrap}
.chip.booked,.chip.quote,.chip.draft{background:#eef1f6}
.chip.checked_in,.chip.ordered{background:#e6f0fb;color:#1f4f86}
.chip.in_progress,.chip.partial{background:#fff3db;color:#8a5a00}
.chip.waiting_parts,.chip.on_hold{background:#fde8e8;color:#9b2c2c}
.chip.ready,.chip.accepted{background:#e3f6ea;color:#1c6b3d}
.chip.invoiced,.chip.finalized,.chip.posted,.chip.received,.chip.closed,.chip.converted{background:#e2e8f0;color:#2d3748}
.chip.cancelled,.chip.void,.chip.declined{background:#f7e1e1;color:#9b2c2c;text-decoration:line-through}
.flash{padding:10px 14px;border-radius:8px;margin-bottom:12px;font-weight:500}
.flash.ok{background:#e3f6ea;color:#1c6b3d;border:1px solid #b9e3c9} .flash.error{background:#fde8e8;color:#9b2c2c;border:1px solid #f3c1c1}
.kpi{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px}
.kpi .v{font-size:22px;font-weight:800} .kpi .l{color:var(--muted);font-size:12px}
.muted{color:var(--muted)} .small{font-size:12px} .right{text-align:right}
dl.kv{display:grid;grid-template-columns:140px 1fr;gap:6px 12px;margin:0} dl.kv dt{color:var(--muted)} dl.kv dd{margin:0}
.search{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap} .search input,.search select{max-width:260px}
.ac{position:relative} .ac-list{position:absolute;z-index:30;left:0;right:0;top:100%;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);max-height:280px;overflow:auto}
.ac-list div{padding:7px 10px;cursor:pointer;border-bottom:1px solid #f0f2f5} .ac-list div:hover,.ac-list div.on{background:#eef5ff}
.perm-grid{columns:3 280px;column-gap:24px} .perm-grid .mod{break-inside:avoid;margin-bottom:14px}
.perm-grid .mod h3{font-size:12px;text-transform:uppercase;color:var(--brand);margin:0 0 6px}
.perm-grid label{display:flex;gap:8px;align-items:flex-start;color:var(--ink);font-size:13px;margin-bottom:4px;font-weight:400}
.ovr{display:flex;gap:6px;align-items:center;font-size:13px;margin-bottom:4px}.ovr select{width:auto;padding:2px 4px;font-size:12px}
.warn{color:var(--warn)} .bad{color:var(--bad)} .good{color:var(--ok)}
.login{max-width:360px;margin:10vh auto}
.print-only{display:none}
@media print{header.top,.sub,.no-print,.flash{display:none!important} body{background:#fff} main{padding:0} .panel,.tablewrap{border:none} .print-only{display:block}}

/* phase 2 */
h1{color:var(--navy)}
.chip.diagnosis{background:#EFE6FA;color:#5B2C91} .chip.waiting_approval{background:#FFF7D6;color:#7A5B00} .chip.road_test{background:#DFF5F2;color:#0B6B5F}
.tag{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:700;color:#fff;white-space:nowrap}
.alert{padding:10px 14px;border-radius:8px;margin-bottom:12px;font-weight:600;background:#FDE8E8;color:#8B1A1A;border:1px solid #F3C1C1}
.timeline{list-style:none;margin:0;padding:0} .timeline li{padding:8px 0;border-bottom:1px dashed var(--line)}
.timeline .when{font-size:11px;color:var(--muted)} .timeline .note{white-space:pre-wrap}
.thumbs{display:flex;flex-wrap:wrap;gap:8px} .thumbs a{display:block;width:96px;height:72px;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:#fafafa;position:relative}
.thumbs img{width:100%;height:100%;object-fit:cover} .thumbs .pdf{display:flex;align-items:center;justify-content:center;height:100%;font-weight:800;color:var(--red);font-size:12px;padding:4px;text-align:center}
.checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px} .checks label{display:flex;gap:6px;align-items:center;color:var(--ink);font-weight:400}
/* diary */
.diary{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px} @media(max-width:900px){.diary{grid-template-columns:1fr}}
.dcol{background:#fff;border:1px solid var(--line);border-radius:10px;min-height:160px;display:flex;flex-direction:column}
.dcol.off{background:repeating-linear-gradient(45deg,#f6f6f1,#f6f6f1 8px,#efefe8 8px,#efefe8 16px)}
.dcol.today{border-color:var(--red);box-shadow:0 0 0 2px rgba(203,35,53,.15)}
.dcol h3{margin:0;padding:8px 10px;font-size:13px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;color:var(--navy)}
.bk{margin:6px 8px;padding:6px 8px;border-radius:8px;border-left:4px solid var(--navy);background:#F7F7F2;font-size:12px}
.bk.checked_in,.bk.in_progress,.bk.diagnosis,.bk.road_test{border-left-color:#2A7AE2} .bk.ready{border-left-color:var(--ok)} .bk.invoiced,.bk.closed{border-left-color:#999;opacity:.7}
.bk b{display:block} .dslot{display:grid;grid-template-columns:64px 1fr;border-bottom:1px solid var(--line)} .dslot .h{padding:8px;color:var(--muted);font-weight:600;border-right:1px solid var(--line)}
/* workshop board */
.hall{margin-bottom:18px} .hall h2{display:flex;gap:10px;align-items:center}
.floor{display:grid;gap:10px;background:#E4E4DA;border-radius:12px;padding:12px}
.aisle{grid-column:1/-1;height:18px;border-top:2px dashed #B9B9AE;border-bottom:2px dashed #B9B9AE;margin:4px 0;font-size:10px;color:#8A8A7E;text-align:center;line-height:14px;letter-spacing:4px}
.bay{background:#fff;border-radius:10px;border:2px solid #D2D2C8;min-height:132px;padding:8px;position:relative;font-size:12px;display:flex;flex-direction:column;gap:3px}
.bay .code{font-weight:800;color:var(--navy);display:flex;justify-content:space-between;align-items:center}
.bay .lift{position:absolute;inset:auto 8px 6px 8px;height:6px;display:flex;justify-content:space-between} .bay .lift i{width:12px;height:6px;background:#B9B9AE;border-radius:2px}
.bay.ground .lift{display:none}
.bay.free{background:#FAFAF6;color:#8A8A7E} .bay.working{border-color:#2E9D57;background:#F1FBF4} .bay.parked{border-color:#C9A227;background:#FFFBEA}
.bay.parts{border-color:#E07B00;background:#FFF3E3} .bay.approval{border-color:#7A5B00;background:#FFF9DB}
.bay .job a{font-weight:700} .bar{height:6px;border-radius:4px;background:#E6E6DE;overflow:hidden} .bar span{display:block;height:100%;background:#2E9D57}
.bar.over span{background:var(--red)} .due-soon{color:#B26A00;font-weight:700} .due-overdue{color:var(--red);font-weight:800}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted)} .legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:4px;vertical-align:-2px}
.techs{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px} .tech{background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px;font-size:12px}
.tech.on{border-left:4px solid #2E9D57} .tech.free{border-left:4px solid #B9B9AE}
.pct{font-weight:800;font-size:18px} .pct.good{color:var(--ok)} .pct.mid{color:#B26A00} .pct.low{color:var(--red)}
/* ── Arabic (right-to-left) ── */
[dir=rtl] body{font-family:"Segoe UI",Tahoma,"Noto Sans Arabic","Noto Naskh Arabic",Arial,sans-serif}
[dir=rtl] th,[dir=rtl] td{text-align:right}
[dir=rtl] td.n,[dir=rtl] th.n,[dir=rtl] .right{text-align:left}
[dir=rtl] .tablewrap table th:first-child,[dir=rtl] .tablewrap table td:first-child{padding-left:10px;padding-right:14px}
[dir=rtl] .bk{border-left:0;border-right:4px solid var(--navy)}
[dir=rtl] .dslot .h{border-right:0;border-left:1px solid var(--line)}
[dir=rtl] .legend i{margin-right:0;margin-left:4px}
[dir=rtl] .tech.on{border-left:0;border-right:4px solid #2E9D57} [dir=rtl] .tech.free{border-left:0;border-right:4px solid #B9B9AE}
header.top a.lang{color:var(--beige);font-size:12px;border:1px solid #3A4A78;border-radius:6px;padding:4px 8px;white-space:nowrap}
header.top a.bell{color:#fff;position:relative;font-size:16px;text-decoration:none}
header.top a.bell b{position:absolute;top:-6px;right:-10px;background:var(--red);color:#fff;border-radius:9px;font-size:10px;padding:1px 5px}
.ltr{direction:ltr;unicode-bidi:embed}
/* ── HR ── */
.kv{display:grid;grid-template-columns:180px 1fr;gap:6px 12px} .kv div:nth-child(odd){color:var(--muted)}
.doc-ok{color:var(--ok);font-weight:700} .doc-miss{color:var(--bad);font-weight:700}
.payslip{max-width:760px;margin:0 auto} .payslip table td{padding:6px 8px}
.notif{border-left:4px solid var(--navy);padding:10px 12px;background:#fff;border-radius:8px;margin-bottom:8px}
.notif.unread{border-left-color:var(--red);background:#FFF8F8}
[dir=rtl] .notif{border-left:0;border-right:4px solid var(--navy)} [dir=rtl] .notif.unread{border-right-color:var(--red)}
@media print{header.top,.sub,.noprint,.flash{display:none!important} main{padding:0} .panel{border:0}}