/* Brick Maker CRM — warm industrial palette (cement + terracotta brick), Cairo type, RTL.
   Layout: fixed sidebar on desktop, off-canvas + bottom tab bar on phones. */
:root{
  color-scheme: light;
  --page:#f1f4f8; --surface:#ffffff; --surface-2:#f3f6fa; --surface-3:#e6ecf4;
  --ink:#0e1b2c; --ink-2:#3b495c; --muted:#5e6b7f; --line:rgba(14,27,44,.10); --line-2:rgba(14,27,44,.18);
  --accent:#0b4d8e; --accent-2:#083a6c; --accent-ink:#fff; --accent-soft:#e2ecf7; --navy:#032759; --chart:#2463c4;
  --good:#0c8a0c; --good-soft:#e2f3e2; --warn:#b8790a; --warn-soft:#fbf0d9; --bad:#d03b3b; --bad-soft:#fbe4e4; --info:#2a78d6;
  --side:#032759; --side-ink:#e6edf7; --side-muted:#8fa5c6;
  --radius:14px; --shadow:0 1px 2px rgba(35,26,18,.05), 0 4px 16px rgba(35,26,18,.05);
  --font:"Montserrat", "Cairo", Tahoma, "Segoe UI", system-ui, sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--font);font-size:14.5px;line-height:1.6;direction:rtl;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{line-height:1.3;margin:0;text-wrap:balance}
.num,td.num,.kpi .v{font-variant-numeric:tabular-nums}
[hidden]{display:none!important}
svg:not([width]){width:20px;height:20px;flex:none}   /* icons only — an svg with its own size (the map, the QR codes) keeps it */
.leaflet-container svg{max-width:none;flex:none}

/* ---------- shell ---------- */
.side{position:fixed;inset-block:0;right:0;width:250px;background:var(--side);color:var(--side-ink);display:flex;flex-direction:column;z-index:50;padding-top:env(safe-area-inset-top,0)}
.brand{display:flex;gap:10px;align-items:center;padding:18px 18px 14px}
.brand b{display:block;font-size:15px} .brand small{color:var(--side-muted);font-size:11.5px}
.logo{width:38px;height:38px;border-radius:11px;background:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;flex:none}
.side nav{flex:1;overflow-y:auto;padding:4px 10px}
.side nav a{display:flex;align-items:center;gap:11px;color:var(--side-ink);padding:9px 12px;border-radius:10px;margin-bottom:2px;font-weight:600;text-decoration:none;position:relative}
.side nav a:hover{background:rgba(255,255,255,.06)}
.side nav a.on{background:var(--accent);color:#fff}
.side nav .sep{color:var(--side-muted);font-size:11px;font-weight:700;padding:14px 12px 6px;letter-spacing:.3px}
.count{font-style:normal;margin-inline-start:auto;background:var(--bad);color:#fff;font-size:11px;font-weight:800;border-radius:100px;padding:0 7px;min-width:20px;text-align:center;line-height:19px}
.me{display:flex;align-items:center;gap:8px;padding:12px;border-top:1px solid rgba(255,255,255,.08);padding-bottom:calc(12px + env(safe-area-inset-bottom,0))}
.me .who{flex:1;display:flex;gap:10px;align-items:center;color:var(--side-ink);text-decoration:none;min-width:0}
.me .who b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .me .who small{color:var(--side-muted);font-size:11px}
.av{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;font-weight:800;flex:none}
.me .icon-btn{background:transparent;border-color:rgba(255,255,255,.14);color:var(--side-ink)}
.main{margin-right:250px;padding:26px 28px 60px;max-width:1400px}
.bottom,.scrim{display:none}
.icon-btn{width:38px;height:38px;border-radius:11px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.icon-btn.accent{background:var(--accent);color:#fff;border-color:var(--accent)}
body.no-nav .main{margin:0 auto;max-width:460px;padding:40px 16px}

@media (max-width: 900px){
  .side{transform:translateX(105%);transition:transform .22s ease;box-shadow:-8px 0 30px rgba(0,0,0,.2)}
  .side.open{transform:none}
  .scrim{display:block;position:fixed;inset:0;background:rgba(16,12,8,.45);z-index:45;opacity:0;pointer-events:none;transition:opacity .2s}
  .scrim.on{opacity:1;pointer-events:auto}
  .topbar{display:flex;position:sticky;top:0;z-index:30;align-items:center;gap:10px;background:var(--surface);border-bottom:1px solid var(--line);padding:10px 16px;padding-top:calc(10px + env(safe-area-inset-top,0))}
  .topbar b{flex:1;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .main{margin:0;padding:16px 16px calc(90px + env(safe-area-inset-bottom,0))}
  .bottom{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;bottom:0;left:0;right:0;z-index:40;background:var(--surface);border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom,0))}
  .bottom a{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--muted);font-size:11px;font-weight:700;padding:5px 0;position:relative;text-decoration:none}
  .bottom a.on{color:var(--accent)}
  .bottom .count{position:absolute;top:0;left:calc(50% - 22px);margin:0}
}

/* ---------- common ---------- */
.flash{padding:11px 14px;border-radius:12px;margin-bottom:14px;font-weight:600;background:var(--good-soft);color:var(--good)}
.flash.err{background:var(--bad-soft);color:var(--bad)} .flash.warn{background:var(--warn-soft);color:var(--warn)}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.page-head h1{font-size:22px;font-weight:800}
.page-head p{margin:2px 0 0;color:var(--muted);font-size:13px}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);min-width:0}
.card h2{font-size:15.5px;font-weight:800;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.card h2 small{font-size:12px;color:var(--muted);font-weight:600}
.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))}
.g-side{grid-template-columns:minmax(0,1fr) 360px}
@media (max-width:1100px){ .g4{grid-template-columns:repeat(2,minmax(0,1fr))} .g-side{grid-template-columns:1fr} }
@media (max-width:700px){ .g2,.g3{grid-template-columns:1fr} }
.stack{display:flex;flex-direction:column;gap:16px;min-width:0}
.grid > *{min-width:0}
.muted{color:var(--muted)} .small{font-size:12.5px} .nowrap{white-space:nowrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent);border-radius:11px;padding:8px 16px;font-weight:700;cursor:pointer;text-decoration:none;white-space:nowrap;font-size:14px}
.btn:hover{background:var(--accent-2);text-decoration:none}
.btn.sec{background:var(--surface);color:var(--ink);border-color:var(--line-2)} .btn.sec:hover{background:var(--surface-2)}
.btn.ghost{background:transparent;color:var(--accent);border-color:transparent}
.btn.danger{background:var(--surface);color:var(--bad);border-color:var(--bad)}
.btn.good{background:var(--good);border-color:var(--good)}
.btn.sm{padding:5px 11px;font-size:13px;border-radius:9px}
.btn svg{width:17px;height:17px}
.btn:focus-visible,.icon-btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:100px;white-space:nowrap;color:var(--c);background:color-mix(in srgb, var(--c) 13%, transparent)}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c)}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:3px 10px;border-radius:100px;background:var(--surface-2);color:var(--ink-2)}
.chip.late{background:var(--bad-soft);color:var(--bad)} .chip.today{background:var(--warn-soft);color:var(--warn)}
.empty{text-align:center;color:var(--muted);padding:28px 12px;border:1px dashed var(--line-2);border-radius:12px}

/* forms */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.form-grid .full{grid-column:1/-1}
@media (max-width:700px){ .form-grid{grid-template-columns:1fr} }
label.f{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:700;color:var(--ink-2)}
label.f .hint{font-weight:500;color:var(--muted);font-size:12px}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],input[type=date],input[type=time],input[type=search],select,textarea{
  width:100%;background:var(--surface);border:1px solid var(--line-2);border-radius:10px;padding:9px 11px;font-size:14px;min-width:0}
textarea{min-height:90px;resize:vertical}
input[type=tel],input.ltr{direction:ltr;text-align:right}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.filters input[type=search]{flex:1 1 220px;width:auto}
.filters select{width:auto;max-width:190px}
.req{color:var(--bad)}

/* tables */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
table.t{width:100%;border-collapse:collapse;font-size:13.5px}
table.t th{background:var(--surface-2);text-align:right;font-weight:700;color:var(--ink-2);padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;font-size:12.5px}
table.t td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
table.t tr:last-child td{border-bottom:none}
table.t tbody tr:hover{background:var(--surface-2)}
table.t td.name{font-weight:700;max-width:280px}
table.t td.name a{color:var(--ink)}
.phone{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.pager{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:14px;font-size:13px}
.pager a{padding:6px 14px;border:1px solid var(--line-2);border-radius:9px;background:var(--surface);color:var(--ink)}
@media (max-width:700px){
  table.t.cards thead{display:none}
  table.t.cards, table.t.cards tbody, table.t.cards tr, table.t.cards td{display:block;width:100%}
  table.t.cards tr{padding:10px 12px;border-bottom:1px solid var(--line)}
  table.t.cards td{border:none;padding:2px 0}
  table.t.cards td[data-l]::before{content:attr(data-l) ": ";color:var(--muted);font-weight:600;font-size:12px}
  table.t.cards td.name{font-size:15px;max-width:none}
}

/* KPI */
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:15px 16px;box-shadow:var(--shadow);text-decoration:none;color:inherit;display:block}
a.kpi:hover{text-decoration:none;border-color:var(--line-2)}
.kpi .l{font-size:12.5px;color:var(--muted);font-weight:700}
.kpi .v{font-size:27px;font-weight:800;line-height:1.2;margin-top:4px}
.kpi .d{font-size:12px;color:var(--ink-2);margin-top:2px}
.kpi.bad .v{color:var(--bad)} .kpi.warn .v{color:var(--warn)} .kpi.good .v{color:var(--good)}

/* lists */
.list{display:flex;flex-direction:column}
.li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line)}
.li:last-child{border-bottom:none}
@media (max-width:700px){ .li{flex-wrap:wrap} .li > .actions{width:100%} .li > .actions form{flex:1 1 auto} .li input[type=date]{flex:1;width:auto!important} }
.li .b{flex:1;min-width:0}
.li .t1{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li .t2{font-size:12.5px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.dotic{width:34px;height:34px;border-radius:10px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;flex:none;font-weight:800}
.dotic svg{width:17px;height:17px}

/* customer profile */
.profile-head{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.profile-head .big{width:54px;height:54px;border-radius:15px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;flex:none}
.profile-head h1{font-size:20px}
.kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px}
.kv div{min-width:0} .kv .k{font-size:12px;color:var(--muted);font-weight:700} .kv .v{font-weight:600;word-break:break-word}
.kv .full{grid-column:1/-1}
.contact-actions{display:flex;gap:8px;flex-wrap:wrap}
.btn.wa{background:#1f9d55;border-color:#1f9d55} .btn.wa:hover{background:#17804a}
.timeline{position:relative;padding-right:20px}
.timeline::before{content:"";position:absolute;right:6px;top:4px;bottom:4px;width:2px;background:var(--line)}
.tl{position:relative;padding:0 0 16px}
.tl::before{content:"";position:absolute;right:-19px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--surface);border:2px solid var(--accent)}
.tl .h{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:var(--muted)}
.tl .h b{color:var(--ink);font-size:13px}
.tl .n{white-space:pre-wrap;word-break:break-word;margin-top:2px}
.stage-bar{display:flex;gap:4px;flex-wrap:wrap}
.stage-bar button{border:1px solid var(--line-2);background:var(--surface);border-radius:100px;padding:4px 11px;font-size:12px;font-weight:700;cursor:pointer;color:var(--ink-2)}
.stage-bar button.on{background:var(--c);border-color:var(--c);color:#fff}

/* pipeline */
.pipe{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
.pipe a{display:block;background:var(--surface-2);border-radius:10px;padding:8px 10px;text-decoration:none;color:var(--ink);border-top:3px solid var(--c)}
.pipe a b{display:block;font-size:20px;font-variant-numeric:tabular-nums} .pipe a span{font-size:11.5px;color:var(--ink-2);font-weight:700}
@media (max-width:1100px){ .pipe{grid-template-columns:repeat(4,minmax(0,1fr))} }

/* calendar */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal .wd{font-size:12px;color:var(--muted);text-align:center;font-weight:700;padding:4px 0}
.cal .d{min-height:96px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:5px 6px;display:flex;flex-direction:column;gap:3px;min-width:0}
.cal .d.out{background:transparent;opacity:.55}
.cal .d.today{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.cal .d .n{font-size:12px;font-weight:800;color:var(--ink-2)}
.cal .ev{font-size:11px;border-radius:6px;padding:1px 6px;background:var(--accent-soft);color:var(--accent-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;text-decoration:none}
.cal .ev.late{background:var(--bad-soft);color:var(--bad)} .cal .ev.done{background:var(--surface-2);color:var(--muted);text-decoration:line-through}
.cal .more{font-size:11px;color:var(--muted)}
@media (max-width:700px){ .cal .d{min-height:58px;padding:3px} .cal .ev{font-size:0;height:6px;padding:0;border-radius:3px} .cal .more{font-size:10px} }

/* quote builder */
.items-table input,.items-table select{padding:7px 8px;font-size:13px}
.items-table td{padding:6px}
.items-table .w-s{width:90px} .items-table .w-m{width:120px}
.totals{display:flex;justify-content:flex-end;gap:24px;font-size:15px;margin-top:10px;flex-wrap:wrap}
.totals b{font-size:20px;font-variant-numeric:tabular-nums}
.ai{display:flex;gap:10px;flex-wrap:wrap;align-items:center;background:var(--surface-2);border-radius:12px;padding:10px 12px;margin-bottom:12px}

/* charts */
.chart-box{position:relative;height:260px}
.bars{display:flex;flex-direction:column;gap:9px}
.bars .r{display:grid;grid-template-columns:minmax(90px,150px) 1fr auto;gap:10px;align-items:center;font-size:13px}
.bars .r .n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-2)}
.bars .r .tr{height:14px;background:var(--surface-2);border-radius:5px;overflow:hidden}
.bars .r .fl{height:100%;background:var(--accent);border-radius:5px 0 0 5px;margin-inline-start:auto}
.bars .r .v{font-weight:700;font-variant-numeric:tabular-nums;min-width:40px;text-align:left}

/* login */
.login-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:28px 24px;box-shadow:var(--shadow)}
.login-card .logo{width:52px;height:52px;font-size:20px;margin-bottom:12px}

/* print */
.print-page{background:#fff;color:#0e1b2c;max-width:820px;margin:0 auto;padding:36px 40px;border-radius:12px;box-shadow:var(--shadow);font-size:14px}
.pp-head{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:3px solid var(--accent);padding-bottom:12px;margin-bottom:16px;gap:12px}
.pp-head .co{font-size:24px;font-weight:800;color:var(--accent)} .pp-head .tg{font-size:12px;color:#5b687b;font-weight:600}
.pp-title{background:var(--accent-soft);color:var(--accent-2);border-radius:100px;padding:6px 18px;font-weight:800;font-size:16px;white-space:nowrap}
.pp-meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;background:#eef3f9;border-radius:10px;padding:10px 16px;font-weight:600;margin-bottom:14px}
.pp-info{width:100%;border-collapse:collapse;margin-bottom:14px} .pp-info td{border:1px solid #d3dbe6;padding:8px 12px} .pp-info b{color:#5b687b;margin-inline-end:6px}
.pp-items{width:100%;border-collapse:collapse;margin-bottom:14px} .pp-items th{background:var(--accent);color:#fff;padding:9px;font-size:13px}
.pp-items td{border:1px solid #d3dbe6;padding:8px;text-align:center} .pp-items td:first-child{text-align:right;font-weight:700} .pp-items tr:nth-child(even) td{background:#f6f9fc}
.pp-total{display:flex;justify-content:flex-end;font-size:16px;font-weight:800;margin-bottom:14px;gap:16px}
.pp-terms{background:#eef3f9;border-radius:10px;padding:12px 16px;font-size:13px;white-space:pre-wrap}
.pp-sign{display:flex;gap:24px;margin-top:40px} .pp-sign div{flex:1;border-top:2px solid #c9d3e0;padding-top:8px;text-align:center;font-weight:700;color:#243246}
@media screen and (max-width:700px){
  .print-page{padding:18px 12px;font-size:12.5px;overflow-x:auto}
  .pp-head{flex-wrap:wrap} .pp-head .co{font-size:19px}
  .pp-items{min-width:560px} .pp-info td{display:block;border-bottom:none} .pp-info tr td:last-child{border-bottom:1px solid #d3dbe6}
}
.print-bar{display:flex;gap:8px;justify-content:center;margin-bottom:16px;flex-wrap:wrap}
@media print{
  body{background:#fff} .side,.topbar,.bottom,.print-bar,.flash{display:none!important} .main{margin:0;padding:0!important}
  .print-page{box-shadow:none;border-radius:0;padding:0;max-width:none}
  @page{size:A4;margin:14mm}
}

/* ---------- ERP (accounting / inventory) ---------- */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;border-bottom:1px solid var(--line);padding-bottom:8px}
.tabs a{padding:6px 14px;border-radius:9px;font-weight:700;font-size:13.5px;color:var(--ink-2);text-decoration:none;background:var(--surface);border:1px solid var(--line)}
.tabs a.on{background:var(--accent);border-color:var(--accent);color:#fff}
.pos{color:var(--good)} .neg{color:var(--bad)}
table.t tfoot td{background:var(--surface-2);font-weight:800;border-top:2px solid var(--line-2)}
table.t td.num,table.t th.num{text-align:left;white-space:nowrap}
table.t tr.grp td{background:var(--surface-2);font-weight:800}
table.t tr.sub td{font-weight:800;border-top:1px solid var(--line-2)}
table.t td.ind1{padding-right:28px} table.t td.ind2{padding-right:44px} table.t td.ind3{padding-right:60px}
.sumrow{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px dashed var(--line)}
.sumrow:last-child{border-bottom:0} .sumrow b{font-variant-numeric:tabular-nums}
.sumrow.big{font-size:17px;font-weight:800;border-top:2px solid var(--line-2);border-bottom:0;padding-top:10px}
.vbars{display:flex;align-items:flex-end;gap:10px;height:190px;padding-top:10px}
.vbars .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;height:100%;justify-content:flex-end}
.vbars .pair{display:flex;gap:3px;align-items:flex-end;width:100%;justify-content:center;flex:1}
.vbars .b{width:42%;max-width:26px;border-radius:5px 5px 0 0;background:var(--accent);min-height:2px}
.vbars .b.alt{background:#2a78d6} .vbars .lbl{font-size:11px;color:var(--muted);white-space:nowrap}
.legend{display:flex;gap:14px;font-size:12px;color:var(--ink-2);flex-wrap:wrap} .legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-inline-end:5px;vertical-align:middle}
@media print{ .no-print,.filters,.tabs,.page-head .actions{display:none!important} .card{box-shadow:none;border:0;padding:0} }

/* ---------- charts (assets/charts.js) & reports ---------- */
.viz{position:relative;min-height:60px}
.viz svg{display:block;max-width:100%;overflow:visible;direction:ltr}
.viz-grid{stroke:var(--line);stroke-width:1} .viz-base{stroke:var(--line-2);stroke-width:1}
.viz-ax{fill:var(--muted);font-size:11px;font-family:var(--font)}
.viz-band{fill:var(--ink);opacity:.05}
.viz-tip{position:absolute;z-index:5;pointer-events:none;background:var(--ink);color:#fff;border-radius:9px;padding:7px 10px;font-size:12px;line-height:1.6;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.viz-tip i,.legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-inline-end:5px;vertical-align:middle}
.hb{display:flex;flex-direction:column;gap:7px}
.hb-r{display:grid;grid-template-columns:minmax(80px,170px) 1fr auto;gap:10px;align-items:center;font-size:12.5px;border-radius:6px;padding:1px 2px}
.hb-r:hover{background:var(--surface-2)}
.hb-l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-2)} .hb-l a{color:var(--ink-2)}
.hb-t{height:12px;display:block}
.hb-b{display:block;height:100%;background:var(--chart);border-radius:4px 0 0 4px;margin-inline-start:0}
.hb-b.neg{background:var(--bad)}
.hb-v{font-weight:700;font-variant-numeric:tabular-nums;min-width:48px;text-align:left}
.rc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.rc-card{display:block;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:13px 15px;color:inherit;text-decoration:none}
.rc-card:hover{border-color:var(--accent);text-decoration:none}
.rc-card b{display:block;font-size:14.5px;margin-bottom:3px} .rc-card span{font-size:12.5px;color:var(--muted)}
.scope-note{display:inline-flex;gap:6px;align-items:center;font-size:12.5px;font-weight:700;padding:4px 12px;border-radius:100px;background:var(--surface-2);color:var(--ink-2)}
@media print{ .viz-tip{display:none!important} }
@media (max-width:700px){
  table.t.cards tfoot, table.t.cards tfoot tr, table.t.cards tfoot td{display:block;width:100%}
  table.t.cards tfoot tr{padding:10px 12px}
  table.t.cards tfoot td{border:none;padding:2px 0;text-align:right}
  table.t.cards tfoot td:empty{display:none}
  table.t.cards tfoot td[data-l]::before{content:attr(data-l) ": ";color:var(--muted);font-weight:600;font-size:12px}
  table.t.cards td.num{text-align:right}
}
@media (max-width:900px){ html,body{overflow-x:clip} }


/* ================= UX layer (v2.4) ================= */
.skip{position:absolute;right:-999px;top:8px;z-index:100;background:var(--accent);color:#fff;padding:8px 14px;border-radius:10px}
.skip:focus{right:12px}
/* top bar (desktop + phone) */
.topbar{display:flex;position:sticky;top:0;z-index:30;align-items:center;gap:10px;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(8px);-webkit-backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--line);padding:10px 28px;margin-right:250px}
.topbar .tb-title{flex:1;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.only-m{display:none!important}
.gsearch{position:relative;flex:1;max-width:560px;display:flex;align-items:center}
.gsearch > svg{position:absolute;right:12px;color:var(--muted);pointer-events:none;width:18px;height:18px}
.gsearch input{padding:9px 40px 9px 70px;border-radius:12px;background:var(--surface-2);border-color:transparent}
.gsearch input:focus{background:var(--surface);border-color:var(--line-2)}
.gsearch kbd{position:absolute;left:10px;font:600 11px var(--font);color:var(--muted);background:var(--surface);border:1px solid var(--line-2);border-radius:6px;padding:1px 6px;direction:ltr}
.gs-results{position:absolute;top:calc(100% + 6px);right:0;left:0;background:var(--surface);border:1px solid var(--line-2);border-radius:14px;box-shadow:0 12px 36px rgba(35,26,18,.16);max-height:min(70vh,520px);overflow:auto;padding:6px;z-index:60}
.gs-g{font-size:11.5px;font-weight:800;color:var(--muted);padding:8px 10px 4px}
.gs-i{display:block;padding:8px 10px;border-radius:9px;color:var(--ink);text-decoration:none}
.gs-i b{display:block;font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .gs-i small{color:var(--muted);font-size:12px}
.gs-i:hover,.gs-i.on{background:var(--accent-soft);text-decoration:none}
.gs-empty{padding:14px;color:var(--muted);text-align:center;font-size:13px}
.topbar .bell{position:relative;margin-inline-start:auto}
.topbar .bell .count{position:absolute;top:-6px;left:-6px;margin:0}
.newmenu{position:relative}
.newmenu .btn svg{width:18px;height:18px}
.menu{position:absolute;top:calc(100% + 6px);left:0;min-width:210px;background:var(--surface);border:1px solid var(--line-2);border-radius:14px;box-shadow:0 12px 36px rgba(35,26,18,.16);padding:6px;z-index:60}
.menu a{display:flex;gap:10px;align-items:center;padding:9px 10px;border-radius:9px;color:var(--ink);font-weight:600;text-decoration:none;white-space:nowrap}
.menu a:hover,.menu a:focus{background:var(--accent-soft);outline:none} .menu a svg{color:var(--accent);width:18px;height:18px}
/* sidebar sections */
.side nav .sep{display:flex;width:100%;align-items:center;justify-content:space-between;background:none;border:0;cursor:pointer;font:inherit;font-size:11px;font-weight:700;color:var(--side-muted);text-align:right;border-radius:8px}
.side nav .sep:hover{color:var(--side-ink)} .side nav .sep svg{width:14px;height:14px;transition:transform .15s}
.side nav .sep.closed svg{transform:rotate(90deg)}
/* flash */
.flash{display:flex;align-items:flex-start;gap:10px;transition:opacity .4s}
.flash > span{flex:1} .flash.fade{opacity:0}
.flash-x{background:none;border:0;color:inherit;font-size:20px;line-height:1;cursor:pointer;opacity:.6;padding:0 2px} .flash-x:hover{opacity:1}
/* confirm dialog */
.modal{position:fixed;inset:0;z-index:200;background:rgba(16,12,8,.45);display:flex;align-items:center;justify-content:center;padding:16px}
.modal[hidden]{display:none}
.modal-box{background:var(--surface);border-radius:16px;padding:22px;max-width:420px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.modal-box p{margin:0 0 18px;font-size:15.5px;font-weight:700;line-height:1.7}
/* busy buttons */
.btn[disabled]{opacity:.65;cursor:not-allowed}
.spin{display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .7s linear infinite;vertical-align:-2px}
@keyframes spin{to{transform:rotate(360deg)}}
/* clickable rows */
table.t tr.rowlink{cursor:pointer}
/* forms: clearer focus & bigger touch targets */
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:none}
@media (max-width:900px){
  .only-m{display:inline-flex!important} .only-d{display:none!important}
  .topbar{margin:0;padding:8px 12px;padding-top:calc(8px + env(safe-area-inset-top,0));gap:6px}
  .gsearch{display:none;position:absolute;inset:0;max-width:none;background:var(--surface);padding:8px 12px;z-index:5}
  .gsearch.open{display:flex}
  .gsearch > svg{right:24px}
  .gsearch input{padding-left:14px}
  .gs-results{position:fixed;top:58px;right:8px;left:8px}
  .topbar .bell{margin-inline-start:0}
  .menu{position:fixed;top:58px;left:8px;right:auto}
  .btn{min-height:40px} .btn.sm{min-height:34px}
  .bottom{grid-template-columns:repeat(5,1fr)}
  .bottom button{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--muted);font:700 11px var(--font);padding:5px 0;background:none;border:0}
  .main{padding-top:14px}
}
@media print{ .topbar,.skip,.modal{display:none!important} }
@media (max-width:560px){ .pipe{grid-template-columns:repeat(2,minmax(0,1fr))} .pipe a span{font-size:12px} }
/* report builder */
.rc-builder{display:block;border:2px dashed var(--accent);background:var(--accent-soft);text-decoration:none;color:var(--ink);margin-bottom:6px}
.rc-builder:hover{text-decoration:none;border-style:solid} .rc-builder b{display:block;font-size:16px;color:var(--accent-2)} .rc-builder span{font-size:13px;color:var(--ink-2)}
.rb-ds{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.rb-ds > div{display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start}
.rb-ds .small{width:100%}
.rb-fields{display:flex;flex-wrap:wrap;gap:6px}
.rb-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);border-radius:100px;padding:5px 12px;font-size:13px;font-weight:600;cursor:pointer;background:var(--surface);user-select:none}
.rb-chip input{width:auto;margin:0;accent-color:var(--accent)}
.rb-chip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-2)}
.rb-cond{display:flex;gap:6px;align-items:center;flex-wrap:wrap} .rb-cond select,.rb-cond input{width:auto;flex:1 1 150px}
/* customer full statement */
.print-page.wide{max-width:1120px}
.pp-h{font-size:15px;font-weight:800;color:var(--accent-2);margin:22px 0 8px;padding-bottom:4px;border-bottom:2px solid var(--accent-soft)}
.ca-sum{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.ca-sum > div{background:#eef3f9;border-radius:10px;padding:8px 12px;display:flex;flex-direction:column}
.ca-sum span{font-size:11.5px;color:#5b687b;font-weight:700} .ca-sum b{font-size:18px;font-variant-numeric:tabular-nums} .ca-sum small{font-size:11px;color:#5b687b}
.ca-sum .hl{background:var(--accent-soft)} .ca-sum .hl b{color:var(--accent-2)}
.ca-sub{font-weight:800;font-size:13px;margin:12px 0 6px;color:#243246}
.ca-t td{padding:6px;font-size:12.5px} .ca-t th{padding:7px;font-size:12px} .ca-t tfoot td{font-weight:800;background:#eef3f9;border:1px solid #d3dbe6;padding:7px;text-align:center}
.ca-small td{font-size:11.5px;padding:5px} .ca-small th{font-size:11px}
.ca-open td{background:#eef4fb!important}
.ca-empty{color:#5b687b;font-size:13px;margin:4px 0 10px}
@media screen and (max-width:700px){ .print-page.wide .pp-items{min-width:640px} .print-page.wide{overflow-x:auto} }
@media print{ .ca-t{page-break-inside:auto} .ca-t tr{page-break-inside:avoid} .pp-h{page-break-after:avoid} }
.print-page,.print-page *{-webkit-print-color-adjust:exact;print-color-adjust:exact}


/* ================= quote / supply order print (qp) — 3 styles ================= */
.qp-styles{display:inline-flex;gap:6px;align-items:center;font-weight:700;font-size:13px;color:var(--ink-2)}
.qp{--qa:#0b4d8e;--qa2:#032759;--qink:#0e1b2c;--qmut:#5b687b;--qline:#c9d3e0;--qsoft:#eef3f9;
  max-width:794px;min-height:1123px;padding:44px 48px 36px;font-size:13px;line-height:1.85;color:var(--qink);display:flex;flex-direction:column}
.qp .phone{direction:ltr;unicode-bidi:isolate}
.qp-head{display:flex;justify-content:space-between;align-items:center;gap:20px}
.qp-brand{display:flex;gap:14px;align-items:center}
.qp-logoimg{max-height:64px;max-width:170px;object-fit:contain}
.qp-mono{width:56px;height:56px;border-radius:12px;background:var(--qa);color:#fff;font:800 26px var(--font);display:flex;align-items:center;justify-content:center}
.qp-co{font:800 23px/1.2 var(--font);color:var(--qink)} .qp-tag{font-size:11.5px;color:var(--qmut);font-weight:600;margin-top:2px}
.qp-contact{font-size:11px;line-height:1.7;text-align:left;direction:rtl}
.qp-contact div{display:flex;gap:6px;justify-content:flex-end} .qp-contact span{color:var(--qmut)} .qp-contact b{font-weight:600}
.qp-titlebar{display:flex;justify-content:space-between;align-items:flex-end;margin:22px 0 16px;gap:16px}
.qp-titlebar h1{font:800 26px/1.2 var(--font);margin:0;letter-spacing:.3px}
.qp-meta{display:flex;gap:0;border:1px solid var(--qline)}
.qp-meta div{padding:5px 14px;border-inline-start:1px solid var(--qline);text-align:center} .qp-meta div:first-child{border-inline-start:0}
.qp-meta span{display:block;font-size:10.5px;color:var(--qmut);font-weight:600} .qp-meta b{font-size:12.5px;white-space:nowrap}
.qp-letter{font-family:var(--font);font-size:14px;line-height:1.9;margin-bottom:12px}
.qp-letter p{margin:0}
.qp-to{font-size:15px} .qp-to span{margin-inline-start:18px}
.qp-subject{margin:8px 0 6px!important;font-weight:700} .qp-subject span{text-decoration:underline;text-underline-offset:4px}
.qp-facts{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--qline);margin-bottom:14px}
.qp-facts div{padding:6px 12px;border-inline-start:1px solid var(--qline)} .qp-facts div:first-child{border-inline-start:0}
.qp-facts span{display:block;font-size:10.5px;color:var(--qmut);font-weight:600} .qp-facts b{font-size:12.5px}
.qp-items{width:100%;border-collapse:collapse;margin-bottom:6px;font-size:12.5px}
.qp-items th{font-weight:700;font-size:12px;padding:8px 10px;text-align:right;white-space:nowrap}
.qp-items td{padding:8px 10px;vertical-align:top}
.qp-items .c{text-align:center} .qp-items .n{text-align:left;font-variant-numeric:tabular-nums;white-space:nowrap}
.qp-items .w-no{width:34px}
.qp-item{font-weight:700;font-size:13px} .qp-spec{font-size:11px;color:var(--qmut)} .qp-break{font-size:10.5px;color:var(--qmut)}
.qp-items tfoot td{padding:7px 10px;font-weight:700} .qp-items tfoot .lbl{text-align:left}
.qp-items tfoot .lbl small{font-weight:500;color:var(--qmut)}
.qp-items tfoot tr.grand td{font-size:15px;font-weight:800}
.qp-words{font-family:var(--font);font-weight:700;margin:4px 0 14px;font-size:13.5px}
.qp-words span{font-weight:400;color:var(--qmut);font-size:12px}
.qp-notes{font-size:12.5px;margin-bottom:12px;padding:8px 12px;border:1px dashed var(--qline)}
.qp-terms{margin-top:6px;font-family:var(--font)}
.qp-terms h2{font:800 15px var(--font);margin:0 0 8px}
.qp-term{break-inside:avoid;page-break-inside:avoid;margin-bottom:8px}
.qp-term h3{font:700 13px var(--font);margin:0 0 3px} .qp-term h3 span{color:var(--qa)}
.qp-term ol{margin:0;padding:0 22px 0 0;font-size:12.5px;line-height:1.85} .qp-term li{padding-inline-start:2px}
.qp-close{margin-top:auto;padding-top:18px;break-inside:avoid;page-break-inside:avoid}
.qp-close > p{font-family:var(--font);font-size:14px;margin:0 0 14px;text-align:center;font-weight:600}
.qp-sign{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.qp-signer{display:flex;flex-direction:column;gap:2px;min-width:220px} .qp-signer span{font-size:11.5px;color:var(--qmut);font-weight:700} .qp-signer b{font-size:14px} .qp-signer i{font-style:normal;color:var(--qmut);font-size:11.5px;margin-top:14px}
.qp-stamp{width:112px;height:112px;border:1.5px dashed var(--qline);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#9aa6b8;font-size:11.5px;font-weight:700}
.qp-foot{margin-top:18px;padding-top:8px;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;font-size:10.5px;color:var(--qmut)}
.qp-foot span:first-child{font-weight:800;color:var(--qink)}

/* style 1: رسمي — black & white letterhead, accent only in rules */
.qp-formal .qp-head{padding-bottom:14px;border-bottom:4px double var(--qink)}
.qp-formal .qp-mono{background:var(--qink)}
.qp-formal .qp-titlebar h1{border-bottom:2px solid var(--qa);padding-bottom:4px}
.qp-formal .qp-items th{background:#ececec;color:var(--qink);border:1px solid #97a3b5}
.qp-formal .qp-items td{border:1px solid #c5cedb}
.qp-formal .qp-items tfoot td{border:1px solid #97a3b5;background:#f7f7f7}
.qp-formal .qp-items tfoot tr.grand td{background:#ececec}
.qp-formal .qp-facts,.qp-formal .qp-meta{border-color:#97a3b5}
.qp-formal .qp-terms h2{border-bottom:1px solid var(--qink);padding-bottom:3px}
.qp-formal .qp-foot{border-top:4px double var(--qink)}

/* style 2: حديث — airy, accent-coloured type, hairlines */
.qp-modern .qp-head{padding-bottom:18px}
.qp-modern .qp-titlebar{margin-top:6px;padding:14px 0;border-top:3px solid var(--qa);border-bottom:1px solid var(--qline)}
.qp-modern .qp-titlebar h1{color:var(--qa);font-size:30px}
.qp-modern .qp-meta{border:0} .qp-modern .qp-meta div{border:0;border-inline-start:1px solid var(--qline)}
.qp-modern .qp-facts{border:0;background:var(--qsoft);border-radius:10px} .qp-modern .qp-facts div{border-color:#e3e9f1}
.qp-modern .qp-items th{border-bottom:2px solid var(--qa);color:var(--qa2);background:none}
.qp-modern .qp-items td{border-bottom:1px solid #e6ecf3}
.qp-modern .qp-items tbody tr:nth-child(even) td{background:#f7f9fc}
.qp-modern .qp-items tfoot tr.grand td{color:var(--qa2);border-top:2px solid var(--qa);font-size:17px}
.qp-modern .qp-notes{border:0;background:var(--qsoft);border-radius:8px}
.qp-modern .qp-terms h2{color:var(--qa)}
.qp-modern .qp-foot{border-top:1px solid var(--qline)}

/* style 3: شركات — dark header band, strong table */
.qp-corporate{padding-top:0}
.qp-corporate .qp-head{margin:0 -48px;padding:22px 48px;background:#032759;color:#fff;border-bottom:5px solid var(--qa)}
.qp-corporate .qp-co{color:#fff} .qp-corporate .qp-tag,.qp-corporate .qp-contact span{color:#aebdd4}
.qp-corporate .qp-logoimg{background:#fff;border-radius:8px;padding:4px}
.qp-corporate .qp-titlebar h1{color:#032759}
.qp-corporate .qp-meta{border:0;background:var(--qsoft)} .qp-corporate .qp-meta div{border-color:#dbe3ee}
.qp-corporate .qp-facts{border:0;border-right:4px solid var(--qa);background:var(--qsoft)} .qp-corporate .qp-facts div{border-color:#dbe3ee}
.qp-corporate .qp-items th{background:#032759;color:#fff}
.qp-corporate .qp-items td{border-bottom:1px solid #e3e9f1}
.qp-corporate .qp-items tbody tr:nth-child(even) td{background:#f6f9fc}
.qp-corporate .qp-items tfoot td{background:var(--qsoft)}
.qp-corporate .qp-items tfoot tr.grand td{background:var(--qa);color:#fff}
.qp-corporate .qp-items tfoot tr.grand small{color:#d6e4f5}
.qp-corporate .qp-terms h2{background:#032759;color:#fff;padding:4px 12px;display:inline-block;border-radius:4px}
.qp-corporate .qp-foot{margin:18px -48px -36px;padding:10px 48px;background:#032759;color:#aebdd4} .qp-corporate .qp-foot span:first-child{color:#fff}

@media screen and (max-width:760px){
  .qp{padding:18px 14px;min-height:0} .qp-corporate .qp-head{margin:0 -14px;padding:16px 14px} .qp-corporate .qp-foot{margin:18px -14px -18px;padding:10px 14px}
  .qp-head,.qp-titlebar{flex-direction:column;align-items:flex-start} .qp-contact{text-align:right} .qp-contact div{justify-content:flex-start}
  .qp-facts{grid-template-columns:1fr 1fr} .qp-facts div:nth-child(3){border-inline-start:0}
  .qp-items{display:block;overflow-x:auto} .qp-meta{flex-wrap:wrap}
}
@media print{
  .qp{max-width:none;min-height:calc(297mm - 30mm);padding:0;box-shadow:none}
  .qp-corporate .qp-head{margin:0 0 0;padding:18px 20px} .qp-corporate .qp-foot{margin:18px 0 0;padding:8px 20px}
  .qp-items tr{page-break-inside:avoid}
}
.qp-items th.n{text-align:left} .qp-items th.c{text-align:center}
.qp-terms h2{break-after:avoid;page-break-after:avoid}
.qp-corporate .qp-break{display:none}

/* ---------- brand (logo) ---------- */
.brand .brand-logo{height:34px;width:auto;display:block}
.brand small{display:block;margin-top:4px}
.side nav a.on{background:var(--accent);box-shadow:inset -3px 0 0 #fff}
.login-card .login-logo{height:56px;width:auto;display:block;margin:0 auto 10px}
.login-card{text-align:center} .login-card form{text-align:right}
.qp-logoimg{max-height:58px;max-width:190px}
.qp-brand .qp-sep{width:1px;align-self:stretch;background:var(--qline)}
.qp-corporate .qp-brand .qp-sep{background:rgba(255,255,255,.25)}
.qp-corporate .qp-logoimg{background:none;padding:0}
.pp-head > div:first-child{padding-inline-start:128px;background:url(brand/logo-blue.svg) no-repeat right center/112px auto;min-height:48px}
.qp-co{font-size:19px;white-space:nowrap} .qp-tag{max-width:260px}
.qp-brand{flex:1;min-width:0} .qp-contact{flex:none}
.qp-co{font-size:17px;white-space:normal} .qp-brand > div{min-width:0} .qp-tag{font-size:10.5px} .qp-head{gap:24px} .qp-contact{max-width:46%}

/* ---- trip returns / transfers ---- */
.flash.info{background:var(--accent-soft,#e8f0fa);color:var(--accent)}
.li.trip-off{background:var(--surface-2)} .li.trip-off .b .t1,.li.trip-off .chip{opacity:.75}
.li.trip-off .chip b{text-decoration:line-through}
.trip-note{font-size:12.5px;margin-top:4px;padding:4px 8px;border-radius:7px;background:var(--surface-2);display:inline-block}
.trip-note.bad{background:var(--bad-soft);color:var(--bad)}
.trip-note.warn{background:var(--warn-soft);color:var(--warn)}
.btn.warn-b{background:var(--surface);color:var(--warn);border-color:var(--warn)}
details.trip-ret{position:relative;display:inline-block}
details.trip-ret>summary{list-style:none;cursor:pointer} details.trip-ret>summary::-webkit-details-marker{display:none}
details.trip-ret[open]>summary{background:var(--warn-soft)}
.trip-ret-f{position:absolute;inset-inline-end:0;top:calc(100% + 6px);z-index:30;width:270px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px;box-shadow:0 10px 30px rgba(3,39,89,.18);display:flex;flex-direction:column;gap:9px}
@media (max-width:700px){.trip-ret-f{position:fixed;inset:auto 12px 76px 12px;width:auto}}

/* ---- trip discount ---- */
.trip-note.good{background:var(--good-soft,#e6f4ea);color:var(--good,#0c8a0c)}
.btn.good-b{background:var(--surface);color:var(--good,#0c8a0c);border-color:var(--good,#0c8a0c)}
details.trip-ret[open]>summary.good-b{background:var(--good-soft,#e6f4ea)}
.trip-disc-f{width:300px;max-height:70vh;overflow:auto}
#trips .li{flex-wrap:wrap}
#trips .li>.b{flex:1 1 260px;min-width:0}
#trips .li>.actions{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-start;padding-inline-start:52px}
@media (max-width:700px){#trips .li>.actions{padding-inline-start:0}}
@media (min-width:701px){#trips .trip-ret-f{inset-inline-end:auto;inset-inline-start:0}}
.disc-in{display:flex;align-items:center;gap:6px} .disc-in input{flex:1} .disc-in em{font-style:normal;font-size:12.5px;color:var(--muted);white-space:nowrap}

/* ---- customer report ---- */
.cr-sum{max-width:520px} .cr-sum td{text-align:right} .cr-sum td.num{text-align:left;width:160px;font-variant-numeric:tabular-nums}
.cr-sum small{color:#5b687b;font-weight:600} .cr-sum tr.hl td{background:var(--accent-soft);font-weight:800;color:var(--accent-2)}
.cr-disc td{color:#0c8a0c} .cr-vat td{color:#5b687b}
.ca-t td.num{font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---- dashboards (إدارة عروض الأسعار / مرصد العملاء) ---- */
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1250px){.g5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.g5{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dkpis{margin-bottom:16px;gap:12px}
.kpi.dk{padding:13px 14px} .kpi.dk .v{font-size:24px} .kpi.dk .v small{font-size:13px;color:var(--muted)}
a.kpi.dk{transition:border-color .15s,box-shadow .15s} a.kpi.dk:hover{border-color:var(--accent)} .kpi.dk.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.dcard h2 small{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-top:2px}
.grid.g2,.grid.g3{margin-bottom:16px}
.dsec{font-size:16px;margin:8px 0 10px} .dsec small{font-size:12px;color:var(--muted);font-weight:600;margin-inline-start:8px}
.dtabs{display:flex;gap:4px;border-bottom:2px solid var(--line);margin-bottom:12px;overflow-x:auto}
.dtabs a{padding:8px 14px;font-weight:700;color:var(--ink-2);text-decoration:none;border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap}
.dtabs a.on{color:var(--accent);border-color:var(--accent)}
.dfilters{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px}
.prange{display:flex;flex-direction:column;gap:8px}
.pr-row{display:grid;grid-template-columns:minmax(120px,230px) 1fr 150px;gap:10px;align-items:center;font-size:12.5px}
.pr-l{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pr-l small{color:var(--muted);font-weight:600}
.pr-t{position:relative;height:12px;background:var(--surface-2);border-radius:6px}
.pr-bar{position:absolute;top:3px;height:6px;border-radius:3px;background:#2463c4;opacity:.55}
.pr-dot{position:absolute;top:0;width:12px;height:12px;border-radius:50%;background:#e8913a;border:2px solid #fff;margin-inline-start:-6px;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.pr-v{font-variant-numeric:tabular-nums;font-weight:700} .pr-v small{display:block;color:var(--muted);font-weight:600}
@media (max-width:700px){.pr-row{grid-template-columns:1fr 1fr} .pr-l{grid-column:1/-1}}
.dq{display:grid;grid-template-columns:120px 1fr 44px;gap:10px;align-items:center;font-size:12.5px;margin-bottom:8px}
.dq-t{height:8px;background:var(--surface-2);border-radius:4px;overflow:hidden} .dq-t i{display:block;height:100%} .dq b{text-align:left;font-variant-numeric:tabular-nums}
.dt-counts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}
.dt-counts a{display:flex;flex-direction:column;align-items:center;padding:8px 4px;border-radius:10px;background:var(--surface-2);color:var(--ink-2);text-decoration:none;font-size:12px;font-weight:700}
.dt-counts a b{font-size:20px;color:var(--ink)} .dt-counts a.bad b{color:var(--bad)} .dt-counts a.good b{color:var(--good)}
.dtasks{margin-bottom:16px}
.dins{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.dins li{padding:9px 12px;border-radius:10px;background:var(--surface-2);font-size:13.5px;border-inline-start:4px solid var(--info)}
.dins li.good{border-color:var(--good)} .dins li.bad{border-color:var(--bad)} .dins li.warn{border-color:var(--warn)}
/* detailed customer report: per-trip total + conclusion */
.cr-ttot td{background:#eef3f9;font-weight:700}
.cr-final{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.cr-final>div{border:1px solid #d3dbe6;border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;background:#fff}
.cr-final span{font-size:12px;font-weight:700;color:#5b687b} .cr-final b{font-size:20px;font-variant-numeric:tabular-nums;margin:2px 0} .cr-final small{font-size:11px;color:#5b687b}
.cr-final .g b{color:#0c8a0c}
.cr-final .res{border-width:2px} .cr-final .res.due{border-color:#c0392b;background:#fdf1f0} .cr-final .res.due b{color:#c0392b}
.cr-final .res.cr{border-color:#0c8a0c;background:#eef8ee} .cr-final .res.cr b{color:#0c8a0c} .cr-final .res.ok{border-color:#0b4d8e}

/* قوايم الاختيارات */
.lists-nav{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.lists-nav a{padding:5px 12px;border-radius:100px;background:var(--surface);border:1px solid var(--line-2);font-size:12.5px;font-weight:700;color:var(--ink-2);text-decoration:none}
.lists-nav a:hover{border-color:var(--accent);color:var(--accent)}
.lst{scroll-margin-top:80px} .lst h2 small{font-size:11.5px;font-weight:700;color:var(--muted);margin-inline-start:6px}
.lst-rows{display:flex;flex-direction:column;gap:6px}
.lst-row{display:flex;gap:8px;align-items:center} .lst-row input[type=text]{flex:1}
.lst-row.new input{border-style:dashed}
.lst-n{min-width:34px;text-align:center;font-size:12px;font-weight:700;color:var(--ink-2);background:var(--surface-2);border-radius:100px;padding:3px 8px;font-variant-numeric:tabular-nums}
.lst-del{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--bad);white-space:nowrap;cursor:pointer} .lst-del input{width:auto}
.lst-legacy{display:flex;flex-wrap:wrap;gap:4px}
.rep-chg .trip-ret-f{width:280px}

.bulk-bar{position:sticky;top:64px;z-index:20;display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--accent-soft);border:1px solid var(--accent);border-radius:12px;padding:8px 12px;margin-bottom:10px}
.bulk-bar select{width:auto;min-width:180px} th.sel,td.sel{width:34px;text-align:center} td.sel input,th.sel input{width:18px;height:18px}
@media (max-width:700px){ table.cards td.sel{position:absolute;inset-inline-end:10px;top:10px} table.cards tr{position:relative} }
.row-acts{width:1%;white-space:nowrap} .row-acts .btn{display:flex;justify-content:center;margin:3px 0}

/* ================= quick-access dock (وصول سريع) ================= */
.dock-wrap{position:fixed;bottom:16px;left:0;right:250px;z-index:35;display:flex;justify-content:center;pointer-events:none}
.dock{pointer-events:auto;position:relative;display:flex;align-items:flex-end;gap:6px;padding:8px 10px;border-radius:22px;
  background:linear-gradient(180deg,rgba(11,77,142,.88),rgba(3,39,89,.94));border:1px solid rgba(255,255,255,.16);
  box-shadow:0 18px 40px -12px rgba(3,39,89,.55),0 2px 0 rgba(255,255,255,.12) inset;backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
  animation:dockIn .55s cubic-bezier(.2,.9,.25,1.2) both}
.dock::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.14) 45%,transparent 60%);background-size:250% 100%;animation:dockShine 7s ease-in-out infinite;pointer-events:none}
.dock-it{--s:1;position:relative;width:46px;height:46px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;border-radius:14px;color:#fff;text-decoration:none;
  transform-origin:50% 100%;transform:translateY(calc((1 - var(--s)) * 14px)) scale(var(--s));transition:transform .18s cubic-bezier(.3,.7,.4,1.3),background .2s;
  animation:dockItem .5s cubic-bezier(.2,.9,.25,1.25) both;animation-delay:calc(var(--i) * 45ms + .15s)}
.dock-ic{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);transition:background .2s}
.dock-ic svg{width:21px;height:21px}
.dock-it:hover .dock-ic,.dock-it:focus-visible .dock-ic{background:rgba(255,255,255,.22)}
.dock-it.on .dock-ic{background:#fff;color:var(--accent);box-shadow:0 4px 14px rgba(0,0,0,.25)}
.dock-it.on::after{content:"";position:absolute;bottom:-5px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#7fc4ff;box-shadow:0 0 8px #7fc4ff}
.dock-it:focus-visible{outline:2px solid #7fc4ff;outline-offset:2px}
.dock-tip{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translate(-50%,6px) scale(.9);white-space:nowrap;padding:5px 10px;border-radius:8px;background:#0e1b2c;color:#fff;
  font-size:12px;font-weight:700;opacity:0;pointer-events:none;transition:opacity .15s,transform .18s;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.dock-tip::after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;border:5px solid transparent;border-top-color:#0e1b2c}
.dock-it:hover .dock-tip,.dock-it:focus-visible .dock-tip{opacity:1;transform:translate(-50%,0) scale(1)}
.dock-badge{position:absolute;top:-4px;right:-4px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:#f2a33a;color:#1b1206;font-size:11px;font-weight:800;font-style:normal;
  display:flex;align-items:center;justify-content:center;border:2px solid #0b3a6e;animation:dockPulse 2.2s ease-out infinite}
.dock-sep{width:1px;align-self:stretch;margin:6px 4px;background:linear-gradient(transparent,rgba(255,255,255,.35),transparent)}
.dock-min{pointer-events:auto;width:26px;height:46px;border:0;background:transparent;color:rgba(255,255,255,.7);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:10px}
.dock-min svg{width:16px;height:16px;transform:rotate(90deg)} .dock-min:hover{color:#fff;background:rgba(255,255,255,.1)}
.dock-pill{pointer-events:auto;display:none;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.18);border-radius:100px;padding:7px 14px;cursor:pointer;
  background:linear-gradient(180deg,#0b4d8e,#032759);color:#fff;font:inherit;font-size:13px;font-weight:700;box-shadow:0 10px 24px -8px rgba(3,39,89,.6);animation:dockIn .4s cubic-bezier(.2,.9,.25,1.2) both}
.dock-wrap.min .dock{display:none} .dock-wrap.min .dock-pill{display:inline-flex}
body.has-dock .main{padding-bottom:110px}
.dock-fab{display:none}
@keyframes dockIn{from{opacity:0;transform:translateY(30px) scale(.92)}to{opacity:1;transform:none}}
@keyframes dockItem{from{opacity:0;transform:translateY(18px) scale(.6)}to{opacity:1}}
@keyframes dockShine{0%,70%{background-position:120% 0}100%{background-position:-120% 0}}
@keyframes dockPulse{0%{box-shadow:0 0 0 0 rgba(242,163,58,.7)}70%{box-shadow:0 0 0 9px rgba(242,163,58,0)}100%{box-shadow:0 0 0 0 rgba(242,163,58,0)}}

/* phones: the bottom bar is already there → a round ⚡ button that opens the same shortcuts */
@media (max-width:900px){
  .dock-wrap{left:12px;right:auto;bottom:calc(84px + env(safe-area-inset-bottom,0));justify-content:flex-start;z-index:42}
  .dock-wrap .dock{display:none;flex-direction:column;align-items:stretch;gap:4px;padding:8px;border-radius:18px;min-width:210px;transform-origin:0 100%}
  .dock-wrap.open .dock{display:flex;animation:dockPop .32s cubic-bezier(.2,.9,.25,1.2) both}
  .dock-wrap.open .dock::before{display:none}
  .dock-wrap .dock-pill,.dock-wrap.min .dock-pill{display:none}
  .dock-it{width:auto;height:auto;justify-content:flex-start;gap:10px;padding:4px 6px 4px 10px;transform:none !important;animation:dockRow .3s ease both;animation-delay:calc(var(--i) * 35ms)}
  .dock-it .dock-tip{position:static;opacity:1;transform:none;background:none;box-shadow:none;padding:0;font-size:13.5px}
  .dock-it .dock-tip::after,.dock-it.on::after,.dock-min{display:none}
  .dock-sep{width:auto;height:1px;margin:4px 6px;background:rgba(255,255,255,.2)}
  .dock-badge{position:static;margin-inline-start:auto;border:0}
  .dock-fab{display:flex;position:fixed;left:14px;bottom:calc(80px + env(safe-area-inset-bottom,0) + 0px);z-index:43;width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;
    align-items:center;justify-content:center;font-size:22px;color:#fff;background:linear-gradient(145deg,#1d6fc2,#032759);box-shadow:0 10px 24px -6px rgba(3,39,89,.65);transition:transform .25s cubic-bezier(.3,.7,.4,1.4)}
  .dock-fab .dock-badge{position:absolute;top:-2px;right:-2px;border:2px solid #fff}
  .dock-fab span{position:absolute;transition:transform .3s cubic-bezier(.3,.7,.4,1.4),opacity .2s}
  .dock-fab .fab-x{opacity:0;transform:rotate(-90deg) scale(.5);font-size:20px}
  .dock-fab[aria-expanded=true]{transform:scale(.94)}
  .dock-fab[aria-expanded=true] .fab-a{opacity:0;transform:rotate(90deg) scale(.5)}
  .dock-fab[aria-expanded=true] .fab-x{opacity:1;transform:none}
  .dock-wrap.open + .dock-fab .dock-badge{display:none}
  .dock-wrap{bottom:calc(142px + env(safe-area-inset-bottom,0))}
  body.has-dock .main{padding-bottom:calc(90px + env(safe-area-inset-bottom,0))}
}
@keyframes dockPop{from{opacity:0;transform:scale(.6) translateY(20px)}to{opacity:1;transform:none}}
@keyframes dockRow{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .dock,.dock-it,.dock-badge,.dock::before,.dock-pill,.dock-fab{animation:none !important;transition:none !important} .dock-it{transform:none !important} }
@media print{ .dock-wrap,.dock-fab{display:none !important} }

/* ================= unified table alignment (RTL) — easy to read ================= */
/* every column reads from the right: header and its values sit under each other */
table.t th, table.t td, table.t td.num, table.t th.num, table.t tfoot td{text-align:right}
table.t th[colspan]{text-align:center}
table.t td[colspan].muted, table.t td.empty{text-align:center}
/* headers: bold, darker, a clear line under them */
table.t thead th{font-weight:800;color:var(--ink);font-size:13px;letter-spacing:0;padding:11px 14px;border-bottom:2px solid var(--line-2);vertical-align:bottom;background:var(--surface-2)}
/* cells: comfortable spacing, numbers the same width so they line up */
table.t td{padding:11px 14px;line-height:1.55;vertical-align:middle}
table.t td.num, table.t td .num{font-variant-numeric:tabular-nums;white-space:nowrap}
table.t td.num b, table.t td.num strong{font-weight:800}
/* the main column (name / item) gets room so its details don't break word by word */
table.t td.name{min-width:170px;max-width:340px}
table.t td.name .small, table.t td.name .muted{font-weight:600;line-height:1.45}
/* light alternate rows + clear hover */
@media (min-width:701px){
  table.t tbody tr:nth-child(even) td{background:rgba(11,77,142,.025)}
  table.t tbody tr:hover td{background:var(--accent-soft)}
  table.t td:first-child, table.t th:first-child{padding-inline-start:18px}
  table.t td:last-child, table.t th:last-child{padding-inline-end:18px}
}
table.t tfoot td{font-weight:800;color:var(--ink)}
/* buttons / small actions inside a row stay on one line, at the row's end */
table.t td .btn.sm{vertical-align:middle}
.table-wrap{border-radius:var(--radius)}
/* printed documents & statements: same rule — header and values aligned to the right, under each other */
.pp-items th{text-align:right;font-weight:800;padding:9px 10px;white-space:nowrap}
.pp-items td, .pp-items td:first-child, .ca-t td, .ca-t tfoot td{text-align:right;padding:7px 10px}
.pp-items th[colspan]{text-align:center}
.pp-items td.num, .ca-t td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.pp-items tbody td:first-child{font-weight:700}
.cr-sum td.num{text-align:right}

/* balanced spacing (more columns fit) + the side panel goes under the content on medium screens */
table.t thead th{padding:10px 11px}
table.t td{padding:9px 11px;line-height:1.5}
@media (min-width:701px){ table.t td:first-child, table.t th:first-child{padding-inline-start:14px} table.t td:last-child, table.t th:last-child{padding-inline-end:14px} }
table.t td.name{min-width:140px}
.g-side{grid-template-columns:minmax(0,1fr) clamp(280px,26vw,360px)}
/* pages whose main column holds a wide table: below 1350px the side panel goes under it */
@media (max-width:1350px){ .g-side.g-wide{grid-template-columns:1fr} }
.q-items td.name .small{font-weight:600}

/* ===== v3.9 فريق العمل: المحادثات + المهام ===== */
[data-badge][hidden]{display:none!important}
.btn.xs{padding:3px 9px;font-size:12px;border-radius:8px;min-height:0}
.chat{display:grid;grid-template-columns:300px 1fr;gap:14px;height:calc(100vh - 275px);min-height:440px}
.chat .card{margin:0;padding:0;display:flex;flex-direction:column;overflow:hidden}
.chat-side .chat-new{display:flex;gap:6px;padding:10px;border-bottom:1px solid var(--line);flex-wrap:wrap;position:relative}
.chat-new details{position:static}
.chat-new summary{list-style:none;cursor:pointer}.chat-new summary::-webkit-details-marker{display:none}
.chat-new details[open]>summary{box-shadow:0 0 0 2px var(--accent) inset}
.chat-pick,.chat-grp{position:absolute;inset-inline:8px;top:52px;z-index:30;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.15);padding:10px;max-height:380px;overflow:auto;display:flex;flex-direction:column;gap:4px}
.chat-grp label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:700}
.chat-checks{display:flex;flex-direction:column;gap:2px;max-height:200px;overflow:auto;margin:6px 0}
.chat-checks label{display:flex!important;flex-direction:row!important;align-items:center;gap:6px;font-weight:500!important;padding:3px 4px;border-radius:6px}
.chat-checks label:hover{background:var(--surface-2)}
.chat-u{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;padding:6px;border-radius:9px;cursor:pointer;text-align:start;font:inherit;color:inherit}
.chat-u:hover{background:var(--surface-2)}
.chat-u span:last-child{display:flex;flex-direction:column}.chat-u small{color:var(--muted)}
.chat .av,.chat-u .av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#e8eef8,#d5e1f3);color:#1f4f8f;display:flex;align-items:center;justify-content:center;font-weight:800;flex:none;font-size:16px}
.chat .av.grp{background:linear-gradient(135deg,#fdf1dc,#f7dfb4)}
.chat-list{overflow:auto;flex:1}
.chat-room{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line);color:inherit;text-decoration:none;transition:background .15s}
.chat-room:hover{background:var(--surface-2)}.chat-room.on{background:#e9f1fc;box-shadow:inset -3px 0 0 var(--accent)}
.cr-txt{display:flex;flex-direction:column;min-width:0;flex:1}.cr-txt b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-txt small{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line)}
.ch-t{display:flex;flex-direction:column;min-width:0;flex:1}.ch-t small{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-menu{position:relative}.ch-menu summary{list-style:none;cursor:pointer}.ch-menu summary::-webkit-details-marker{display:none}
.ch-pop{position:absolute;inset-inline-end:0;top:40px;z-index:30;width:280px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.15);padding:10px;display:flex;flex-direction:column;gap:8px;max-height:420px;overflow:auto}
.ch-mem{display:flex;align-items:center;justify-content:space-between;gap:6px}
.ch-add{display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--line);padding-top:8px}
.chat-msgs{flex:1;overflow:auto;padding:14px 16px;display:flex;flex-direction:column;gap:6px;background:linear-gradient(180deg,#f7f9fc,#f2f5f9)}
.cm{max-width:72%;align-self:flex-start;background:#fff;border:1px solid var(--line);border-radius:14px 14px 14px 4px;padding:7px 11px 5px;box-shadow:0 1px 2px rgba(0,0,0,.04);position:relative}
.cm.me{align-self:flex-end;background:#e3effd;border-color:#cfe0f6;border-radius:14px 14px 4px 14px}
.cm-who{display:block;font-size:12px;color:#1f4f8f;margin-bottom:2px}
.cm-txt{white-space:normal;word-wrap:break-word;overflow-wrap:anywhere;line-height:1.6}
.cm-t{display:block;font-size:10.5px;color:var(--muted);text-align:end;margin-top:2px}
.cm-day{align-self:center;font-size:11.5px;background:#fff;border:1px solid var(--line);border-radius:100px;padding:1px 12px;color:var(--muted);margin:6px 0}
.cm-sys{align-self:center;font-size:12px;color:var(--muted);background:rgba(0,0,0,.04);border-radius:8px;padding:2px 10px}
.cm-sys.err{color:#fff;background:var(--bad)}
.cm-none{align-self:center;margin:auto}
.cm-older{align-self:center}
.cm-in{animation:cmIn .25s ease-out}
@keyframes cmIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.chat-send{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line);align-items:flex-end;background:var(--surface)}
.chat-send textarea{flex:1;resize:none;min-height:42px;max-height:160px;border-radius:12px;line-height:1.5}
.chat-empty{margin:auto;text-align:center;color:var(--muted)}.chat-empty div{font-size:46px}
@media (max-width:860px){
  .chat{grid-template-columns:1fr;height:calc(100vh - 210px)}
  .chat.has-room .chat-side{display:none}.chat:not(.has-room) .chat-main{display:none}
  .cm{max-width:86%}
}
/* tasks */
.tk-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:12px}
.tk-s{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;color:inherit;text-decoration:none;transition:transform .15s,box-shadow .15s}
.tk-s:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.07)}
.tk-s b{font-size:24px;color:#1f4f8f}.tk-s span{font-size:13px;color:var(--muted)}
.tk-s *{text-decoration:none!important}.tk-s.warn b{color:#b8790a}.tk-s.bad b{color:#d03b3b}
.tabs-row{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.tabs-row form.inline select{min-width:160px}
.tk-list{display:flex;flex-direction:column}
.tk-row{display:flex;align-items:center;gap:12px;padding:10px 6px;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
a.tk-row:hover{background:var(--surface-2)}
.tk-row:last-child{border-bottom:0}
.tk-row.new{background:#f2f8ff}.tk-row.done .tk-main b{text-decoration:line-through;color:var(--muted)}
.tk-pri{width:5px;align-self:stretch;border-radius:4px;background:var(--c);flex:none}
.tk-main{display:flex;flex-direction:column;flex:1;min-width:0}.tk-main small{color:var(--muted)}
.tk-side{display:flex;align-items:center;gap:8px;flex:none}
.tk-side form{margin:0}
.tk-pill{display:inline-block;font-size:12px;font-weight:700;padding:1px 9px;border-radius:100px;color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent);border:1px solid color-mix(in srgb,var(--c) 30%,transparent)}
.tk-due{font-size:12.5px;white-space:nowrap}.tk-due.late{color:#d03b3b;font-weight:700}.tk-due.today{color:#b8790a;font-weight:700}
.tk-newb{font-style:normal;font-size:11px;background:#2a78d6;color:#fff;border-radius:100px;padding:0 7px;margin-inline-start:4px;vertical-align:middle}
.tk-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px;font-size:14px}
.tk-details{line-height:1.8;background:var(--surface-2);border-radius:10px;padding:12px;margin-bottom:12px}
.tk-acts{display:flex;flex-wrap:wrap;gap:6px}.tk-acts form{margin:0}
.tk-c{border-bottom:1px solid var(--line);padding:8px 0}.tk-c p{margin:4px 0 0;line-height:1.7}.tk-c.me b{color:#1f4f8f}
.tk-cform{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.card h2 small{font-weight:500;color:var(--muted);font-size:12px}
.card h2:has(> a.btn){display:flex;align-items:center;gap:8px}
@media (max-width:640px){.tk-row{flex-wrap:wrap}.tk-side{width:100%;justify-content:flex-start;padding-inline-start:17px}}
.main a.tk-s,.main a.tk-row,.main a.chat-room{text-decoration:none!important;color:inherit}
@media (max-width:860px){
  .main:has(.chat.has-room) .page-head{display:none}
  .chat.has-room{height:calc(100vh - 205px);height:calc(100dvh - 205px);min-height:360px}
  body:has(.chat.has-room) .dock-fab{display:none!important}
}
/* v3.9.2 نقلات اليوم */
.day-bar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}
.day-btn,.day-pick label{display:flex;flex-direction:column;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px 14px;color:var(--ink);text-decoration:none!important;transition:transform .15s,box-shadow .15s,border-color .15s}
.day-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.07);border-color:var(--accent)}
.day-btn b,.day-pick b{font-size:15px}.day-btn small{color:var(--muted)}
.day-btn em{font-style:normal;font-weight:800;color:var(--accent);font-size:13px}
.day-btn.on{background:var(--accent);border-color:var(--accent);color:#fff}.day-btn.on small,.day-btn.on em{color:#fff}
.day-pick{margin:0}.day-pick label{height:100%;font-weight:400}.day-pick input{margin-top:4px}
@media (max-width:760px){.day-bar{grid-template-columns:1fr 1fr}}
/* v3.10 طلبات الخصم */
.trip-note.warn{background:var(--warn-soft);color:#7a5206;display:block}
.disc-dec{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.disc-dec form{display:flex;gap:6px;margin:0;align-items:center}.disc-dec input[type=text]{width:180px;min-height:30px;padding:3px 8px}
.dr-list{display:flex;flex-direction:column;gap:12px}
.dr{padding:14px 16px;margin:0}
.dr-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.dr-st{font-size:12px;font-weight:800;border-radius:100px;padding:2px 10px;background:var(--surface-2);color:var(--muted)}
.dr-st.good{background:var(--good-soft);color:var(--good)}.dr-st.bad{background:var(--bad-soft);color:var(--bad)}.dr-st.warn{background:var(--warn-soft);color:var(--warn)}
.dr-body{display:flex;justify-content:space-between;gap:14px;margin:10px 0;flex-wrap:wrap}
.dr-items{line-height:1.9}
.dr-amt{display:flex;flex-direction:column;text-align:end}.dr-amt b{font-size:22px;color:var(--accent)}.dr-amt small{color:var(--muted)}
.dr-meta{border-top:1px solid var(--line);padding-top:8px;line-height:1.8}.dr-meta .ink{color:var(--ink)}
.dr-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;align-items:center}.dr-acts form{display:flex;gap:6px;align-items:center;margin:0}.dr-acts input[type=text]{width:200px;min-height:32px;padding:4px 8px}
@media (max-width:640px){.dr-amt{text-align:start}.dr-acts form{width:100%}.dr-acts input[type=text]{flex:1;width:auto}}

/* v3.11 list footer: x–y of n · pages · records per page */
.list-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px;padding:10px 4px;font-size:13px;color:var(--muted)}
.list-foot b{color:var(--ink)}
.list-foot .pager{margin:0;gap:6px;flex-wrap:wrap}
.list-foot .pager a,.list-foot .pager span{min-width:34px;text-align:center;padding:5px 10px;border-radius:9px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);text-decoration:none}
.list-foot .pager a:hover{border-color:var(--accent);color:var(--accent)}
.list-foot .pager .pg-on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:800}
.list-foot .pager .pg-off{opacity:.45}.list-foot .pager .pg-gap{border:0;background:none;min-width:0;padding:5px 2px}
.lf-per{margin:0}.lf-per label{display:flex;align-items:center;gap:8px;margin:0;font-weight:600;white-space:nowrap}
.lf-per select{width:auto;min-width:72px;padding:4px 10px;min-height:32px}
.t-time{display:block;font-size:11.5px;color:var(--muted)}
@media (max-width:640px){.list-foot{justify-content:center}.lf-info{width:100%;text-align:center}}
@media (min-width:861px){.main:has(.list-foot){padding-bottom:110px}}   /* room so the floating dock never covers the page links */
/* v3.12 مكان التوريد + المندوب جنب رقم النقلة */
.trip-meta{display:flex;flex-wrap:wrap;gap:2px 6px;font-size:12px;font-weight:500;color:var(--muted);margin-top:2px;line-height:1.5}
span.trip-meta{display:inline-flex;margin:0 6px;vertical-align:middle}
.trip-meta i{font-style:normal;opacity:.6}
.trip-meta span{white-space:nowrap}
td .trip-meta{max-width:260px}
@media print{.trip-meta{color:#444;font-size:10.5px}}

/* v3.13 تفريغ البيانات */
.rs-list{display:flex;flex-direction:column;gap:8px}
.rs-it{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:10px;background:var(--bad-soft)}
.rs-it.opt{background:var(--surface-2);cursor:pointer;font-weight:400}.rs-it.opt input{margin-top:4px;width:auto}
.rs-chk{color:var(--bad);font-weight:900}

/* QR: scan the printed quote / supply order to open it on a phone */
.qp-qr{display:flex;align-items:center;gap:10px;margin-top:14px;align-self:flex-end;break-inside:avoid;page-break-inside:avoid;direction:rtl}
.qp-qr svg{width:92px;height:92px;flex:none;background:#fff}
.qp-qr div{display:flex;flex-direction:column;gap:2px;font-size:10.5px;color:var(--qmut);max-width:150px;line-height:1.5} .qp-qr b{font-size:11.5px;color:var(--qink)}
.share-row{display:flex;gap:14px;align-items:flex-start}
.share-qr{flex:none;background:#fff;padding:6px;border:1px solid var(--line);border-radius:10px;line-height:0} .share-qr svg{width:132px;height:132px}
.share-txt{flex:1;min-width:0}
.share-link{width:100%;font:500 12px/1.4 Montserrat,monospace;direction:ltr;text-align:left;color:var(--muted)}
.pub-bar{position:sticky;top:0;z-index:5;background:var(--bg,#f4f6fa);padding:10px 8px;margin:-8px -8px 12px}
body.pub-doc .main{max-width:900px;margin:0 auto;padding:12px}
@media (max-width:520px){ .share-row{flex-direction:column;align-items:center} .share-txt{width:100%} }
@media print{ .pub-bar{display:none!important} body.pub-doc .main{padding:0;max-width:none} }

/* تأكيد الاستلام (public page, phone-first) */
.rcv{max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.rcv-head{display:flex;align-items:center;gap:12px;padding:4px 2px} .rcv-head img{height:40px;max-width:150px;object-fit:contain}
.rcv-head div{display:flex;flex-direction:column} .rcv-head b{font-size:18px} .rcv-head span{font-size:12px;color:var(--muted)}
.rcv-no{display:flex;align-items:center;gap:8px;margin-bottom:12px} .rcv-no span{color:var(--muted);font-weight:700} .rcv-no b{font:800 20px Montserrat,var(--font);direction:ltr}
.rcv-box{padding:14px 16px;border-radius:12px;background:var(--surface-2);font-weight:700;line-height:1.8;text-align:center}
.rcv-box.good{background:#e7f6ec;color:#11703a} .rcv-box.bad{background:#fdecea;color:#b42318}
.rcv-code{font:800 26px/1.2 Montserrat,monospace!important;letter-spacing:8px;text-align:center;direction:ltr}
.rcv-it{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.rcv-it input{width:110px;text-align:center;font-weight:800;font-size:16px}
.rcv-btn{width:100%;padding:14px;font-size:16px}
.rcv-ask{text-align:center}
.rcv-tag{display:inline-block;font-size:12px;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--surface-2)}
.rcv-tag.good{background:#e7f6ec;color:#11703a} .rcv-tag.bad{background:#fdecea;color:#b42318} .rcv-tag.warn{background:#fff4e0;color:#93600a}
.rcv-code-card{border:2px solid var(--good);background:#f2fbf5}
.rcv-code-card .big{font:800 30px Montserrat,monospace;letter-spacing:6px;direction:ltr;display:inline-block;margin:4px 0}

/* أمر التوريد: bigger, calmer text (the trips list is read all day) */
.order-page{font-size:15px;line-height:1.7}
.order-page .card h2{font-size:18.5px}
.order-page .li{padding:16px 0;gap:14px}
.order-page .li .t1{font-size:17px;white-space:normal}
.order-page .li .t2{font-size:14.5px;color:var(--ink-2);gap:6px 12px;margin-top:3px}
.order-page .trip-meta{font-size:14px;color:var(--ink-2)}
.order-page .chip{font-size:14px;padding:5px 12px}
.order-page .trip-note{font-size:14.5px;padding:8px 12px;line-height:1.85;margin-top:6px;border-radius:9px}
.order-page .small{font-size:14px}
.order-page .muted{color:#56637a}
.order-page .btn.sm{font-size:14px;padding:7px 13px}
.order-page .t td,.order-page .t th{font-size:15px}
.order-page .kv .k{font-size:13.5px} .order-page .kv .v{font-size:15.5px}
.order-page label.f{font-size:14.5px} .order-page input,.order-page select,.order-page textarea{font-size:15px}
.order-page .hint{font-size:13px}
.order-page .rcv-code-card .big{font-size:32px}

/* الأرصدة واجبة التحصيل */
.rcb-filters{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:flex-end;margin-bottom:14px}
.rcb-filters .f{margin:0;min-width:140px} .rcb-years{width:100%;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.rcb-t td{font-size:14.5px;vertical-align:top} .rcb-t .name a{font-weight:800}
.rcb-bal b{display:block;font-size:16px} .rcb-bal small{font-size:12px;font-weight:700}
.rcb-bal.due{color:var(--bad)} .rcb-bal.cred{color:var(--good)}
.rcb-t tfoot td{font-weight:800;background:var(--surface-2)}
.rcb-print-head{display:none}
.rcb-dash-row{display:grid;grid-template-columns:1fr 1fr 2fr;gap:14px;align-items:stretch}
.rcb-tot{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:12px;text-decoration:none;color:inherit;border:1px solid var(--line)}
.rcb-tot span{font-size:13px;font-weight:700;color:var(--muted)} .rcb-tot b{font-size:24px;font-weight:800} .rcb-tot small{color:var(--ink-2)}
.rcb-tot.due{background:var(--bad-soft)} .rcb-tot.due b{color:var(--bad)} .rcb-tot.cred{background:var(--good-soft)} .rcb-tot.cred b{color:var(--good)}
.rcb-top a{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.rcb-top a:last-child{border-bottom:0} .rcb-top a span{display:flex;flex-direction:column;font-weight:700} .rcb-top a small{font-weight:500;color:var(--muted);font-size:12px} .rcb-top a b{color:var(--bad);white-space:nowrap}
@media (max-width:860px){ .rcb-dash-row{grid-template-columns:1fr 1fr} .rcb-top{grid-column:1/-1} }
@media print{
  .rcb-print-head{display:flex;flex-direction:column;gap:2px;margin-bottom:10px;border-bottom:2px solid #032759;padding-bottom:6px} .rcb-print-head b{font-size:16px} .rcb-print-head span{font-size:11px;color:#444}
  .rcb-kpis{grid-template-columns:repeat(4,1fr)!important;margin-bottom:8px!important} .rcb-kpis .kpi{padding:6px 8px;box-shadow:none} .rcb-kpis .kpi .v{font-size:15px}
  .rcb-t td,.rcb-t th{font-size:10.5px;padding:4px 5px} .rcb-t thead{display:table-header-group} .rcb-t tr{page-break-inside:avoid}
  .page-head{display:none}
}
.rcb-filters .f{flex:1 1 150px} .rcb-filters input[type=search]{flex:0 0 auto;width:100%} .rcb-filters select{max-width:none;width:100%}
.rcb-filters > .f:last-child{flex:0 0 auto}
.rcb-tot,.rcb-tot *{text-decoration:none!important}
@media print{
  .rcb-card .table-wrap{overflow:visible!important} .rcb-t{width:100%!important;min-width:0!important;table-layout:fixed}
  .rcb-t th,.rcb-t td{white-space:normal!important;word-break:break-word} .rcb-t th:first-child,.rcb-t td:first-child{width:24%}
  .rcb-t .nowrap{white-space:normal!important}
}
@media print{ .rcb-t td.num{white-space:nowrap!important;word-break:normal} .rcb-t th:first-child,.rcb-t td:first-child{width:26%} }

/* تقرير التحصيل */
.col-t td{font-size:15px;vertical-align:top} .col-t .name a{font-weight:800}
.col-bal b{display:block;font-size:16.5px} .col-bal small{font-size:12px;font-weight:700;color:var(--muted)}
.col-t tr.col-now .col-bal b{color:var(--bad)} .col-t tr.col-later .col-bal b{color:var(--warn)} .col-t tr.col-cred .col-bal b{color:var(--good)}
.col-tag{display:inline-block;margin:2px 0 2px 6px;padding:4px 10px;border-radius:8px;font-size:13.5px;line-height:1.6}
.col-tag.now{background:var(--bad-soft);color:var(--bad)} .col-tag.later{background:var(--warn-soft);color:#7a5206}
.col-t tfoot td{font-weight:800;background:var(--surface-2)}
@media print{
  .col-kpis{grid-template-columns:repeat(3,1fr)!important} .col-kpis .kpi{padding:6px 8px;box-shadow:none} .col-kpis .kpi .v{font-size:16px}
  .col-card .table-wrap{overflow:visible!important} .col-t{width:100%!important;table-layout:fixed} .col-t td,.col-t th{font-size:10.5px;padding:4px 5px;white-space:normal!important}
  .col-t th:first-child{width:27%} .col-t th:last-child{width:30%} .col-tag{font-size:10px;padding:2px 6px} .col-t tr{page-break-inside:avoid}
}

/* دفتر الشيكات */
.chq-form-card > summary{cursor:pointer;list-style:none;font-size:16px} .chq-form-card > summary::-webkit-details-marker{display:none}
.chq-t td{font-size:14.5px;vertical-align:top} .chq-t td.num b{font-size:16px}
.chq-late{color:var(--bad);font-weight:800;font-size:12.5px} .chq-today{color:var(--warn);font-weight:800;font-size:12.5px}
.chq-acts{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start;min-width:230px}
.chq-act{position:relative} .chq-act > summary{list-style:none} .chq-act > summary::-webkit-details-marker{display:none}
.chq-act[open] > form{position:absolute;inset-inline-end:0;top:calc(100% + 6px);z-index:20;background:var(--surface);border:1px solid var(--line-2);border-radius:12px;box-shadow:var(--shadow);padding:12px;display:flex;flex-direction:column;gap:8px;min-width:240px}
.chq-act .f{margin:0}
.btn.chq-bad{color:var(--bad);border-color:var(--bad)}
.chq-hist{margin-top:4px} .chq-hist summary{cursor:pointer;color:var(--accent)} .chq-hist div{margin-top:3px;line-height:1.6}
.col-tag.chq{background:#e8f1fb;color:#1d5aa3}
@media (max-width:700px){ .chq-act[open] > form{position:static;margin-top:6px} .chq-acts{min-width:0} }

/* report download buttons */
.btn.exp-xl{background:#1d6f42;border-color:#1d6f42;color:#fff} .btn.exp-xl:hover{filter:brightness(1.08)}
.btn.exp-pdf{background:#b3261e;border-color:#b3261e;color:#fff} .btn.exp-pdf:hover{filter:brightness(1.08)}
.exp-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 10px;padding:10px 12px;border:1px dashed var(--line-2);border-radius:12px;background:var(--surface)}
.exp-bar>span{font-weight:700;font-size:14px;margin-inline-end:auto}
@media (max-width:600px){.exp-bar>span{width:100%}.exp-bar .btn{flex:1}}
.auto-dt{padding:9px 12px;border:1px solid var(--line-2);border-radius:10px;background:var(--surface-2);font-weight:700;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center}
.auto-dt span{font-weight:500;font-size:13px;color:var(--muted)}
.team-pick{border:1px solid var(--line-2);border-radius:12px;padding:10px 12px;margin:0}
.team-pick legend{font-weight:700;padding:0 6px}
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px 12px;margin-top:6px}
.team-it{display:flex;gap:8px;align-items:flex-start;font-weight:500;cursor:pointer}
.team-it input{width:auto;margin-top:4px}
.wh-pick{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:flex-end}
.wh-pick .f{min-width:240px;flex:0 1 320px}
.wh-msg{flex:1 1 260px;padding:9px 12px;border-radius:10px;font-weight:700;font-size:14px;background:var(--surface-2)}
.wh-msg.good{color:var(--good);background:color-mix(in srgb,var(--good) 10%,transparent)}
.wh-msg.bad{color:var(--bad);background:color-mix(in srgb,var(--bad) 10%,transparent)}
.wh-av.neg b{color:var(--bad)}
.trip-wh-f{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.trip-wh-f select{width:auto;min-width:140px}
/* calendar: all events */
.cal .ev{border-inline-start:3px solid var(--c,var(--accent));background:color-mix(in srgb,var(--c,var(--accent)) 12%,var(--surface));color:var(--ink)}
.cal .ev.late{border-inline-start-color:var(--bad)}
.cal .d .n{text-decoration:none;color:var(--ink-2);align-self:flex-start;border-radius:6px;padding:0 4px}
.cal .d .n:hover{background:var(--surface-2)}
.cal .d.sel{border-color:var(--accent-2);background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
.cal-filters{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.cal-types{display:flex;flex-wrap:wrap;gap:6px}
.cal-chip{cursor:pointer}
.cal-chip input{position:absolute;opacity:0;pointer-events:none}
.cal-chip span{display:inline-flex;gap:6px;align-items:center;padding:6px 11px;border-radius:999px;border:1px solid color-mix(in srgb,var(--c) 45%,var(--line));font-size:13px;font-weight:700;background:var(--surface)}
.cal-chip span b{background:color-mix(in srgb,var(--c) 15%,transparent);color:var(--c);border-radius:999px;padding:0 7px;font-size:12px}
.cal-chip input:checked+span{background:var(--c);color:#fff;border-color:var(--c)}
.cal-chip input:checked+span b{background:rgba(255,255,255,.25);color:#fff}
.cal-chip input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.cal-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.cal-row select{width:auto}
.cal-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:10px 0 16px}
.cal-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-inline-end:5px;vertical-align:-1px}
.cal-day{margin-top:6px}
.cal-li{color:inherit;text-decoration:none;border-inline-start:4px solid var(--c);padding-inline-start:10px}
.cal-li.done .t1{text-decoration:line-through;color:var(--muted)}
.cal-li.late{border-inline-start-color:var(--bad)}
.cal-li .tag{color:var(--c);font-weight:700}
@media (max-width:700px){ .cal .ev{background:var(--c,var(--accent));border:0} .cal .ev.late{background:var(--bad)} }
/* رؤى وتوصيات */
.ins-box{background:var(--surface);border:1px solid var(--line);border-inline-start:4px solid var(--accent);border-radius:14px;padding:10px 16px;margin:0 0 16px;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.ins-box>summary{cursor:pointer;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;font-weight:800;font-size:15.5px;list-style:none}
.ins-box>summary::-webkit-details-marker{display:none}
.ins-box>summary::after{content:'▾';margin-inline-start:auto;color:var(--muted);font-size:13px}
.ins-box:not([open])>summary::after{content:'◂'}
.ins-box>summary small{font-weight:500;color:var(--muted);font-size:13px}
.ins-box>summary small b{color:var(--bad)}
.ins-box ul{list-style:none;margin:10px 0 2px;padding:0;display:grid;gap:6px}
.ins-box li{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:10px;background:var(--surface-2);font-size:14px;line-height:1.7}
.ins-box li.ins-bad{background:color-mix(in srgb,var(--bad) 8%,var(--surface))}
.ins-box li.ins-warn{background:color-mix(in srgb,#c46a12 9%,var(--surface))}
.ins-box li.ins-good{background:color-mix(in srgb,var(--good) 9%,var(--surface))}
.ins-box .ins-ic{font-size:11px;line-height:2.3}
.ins-box .ins-t{flex:1;min-width:0}
.ins-box .ins-a{white-space:nowrap;font-weight:700;font-size:13px;align-self:center}
.ins-more>summary{cursor:pointer;color:var(--accent);font-size:13px;font-weight:700;margin-top:6px}
@media (max-width:600px){.ins-box li{flex-wrap:wrap}.ins-box .ins-t{flex:1 1 calc(100% - 30px)}.ins-box .ins-a{margin-inline-start:22px}}

/* ================= themes (chosen per user from حسابي). On screen only: printed documents always stay light ================= */
@media screen{
html[data-theme=dark]{color-scheme:dark;--page:#0e141d;--surface:#161e2a;--surface-2:#1d2735;--surface-3:#263243;--ink:#e6ecf4;--ink-2:#c2ccda;--muted:#8f9cb1;--line:rgba(230,236,244,.10);--line-2:rgba(230,236,244,.20);--accent:#3f86dc;--accent-2:#78aef0;--accent-ink:#fff;--accent-soft:#1b3150;--navy:#0a111c;--chart:#5d9cec;--good:#49c06a;--good-soft:#15301f;--warn:#e2a540;--warn-soft:#3a2c10;--bad:#f06c6c;--bad-soft:#3e1d1d;--info:#5d9cec;--side:#0a111c;--side-ink:#dbe3ef;--side-muted:#7d8ba3;--shadow:0 1px 2px rgba(0,0,0,.35), 0 4px 16px rgba(0,0,0,.25);}
html[data-theme=lux]{color-scheme:dark;--page:#0b0b0f;--surface:#16161d;--surface-2:#1d1d26;--surface-3:#272732;--ink:#f3eee3;--ink-2:#d2cab8;--muted:#9c9482;--line:rgba(243,238,227,.09);--line-2:rgba(243,238,227,.18);--accent:#a8792c;--accent-2:#d9b56b;--accent-ink:#fff;--accent-soft:#2c2414;--navy:#0b0b0f;--chart:#d4ad62;--good:#5cc98a;--good-soft:#132a1d;--warn:#e2a540;--warn-soft:#3a2c10;--bad:#f07070;--bad-soft:#3e1d1d;--info:#86b5ee;--side:#0e0e13;--side-ink:#efe8d8;--side-muted:#8f8774;--shadow:0 1px 2px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.35);}
html[data-theme=brick]{color-scheme:light;--page:#f6f1ec;--surface:#ffffff;--surface-2:#f8f2ec;--surface-3:#efe4d8;--ink:#2a1d15;--ink-2:#55433a;--muted:#7a685d;--line:rgba(42,29,21,.10);--line-2:rgba(42,29,21,.19);--accent:#b4532a;--accent-2:#8f3f1d;--accent-ink:#fff;--accent-soft:#f6e3d8;--navy:#3a2418;--chart:#c2602f;--good:#2e7d32;--good-soft:#e3f1e3;--warn:#a86b00;--warn-soft:#f8ecd3;--bad:#c62828;--bad-soft:#f9e1e0;--info:#2f6fb2;--side:#3a2418;--side-ink:#f3e7de;--side-muted:#bfa493;--shadow:0 1px 2px rgba(58,36,24,.06), 0 4px 16px rgba(58,36,24,.06);}
html[data-theme=olive]{color-scheme:light;--page:#f1f4ef;--surface:#ffffff;--surface-2:#f2f6f0;--surface-3:#e3ebdf;--ink:#18231a;--ink-2:#3e4d40;--muted:#627064;--line:rgba(24,35,26,.10);--line-2:rgba(24,35,26,.18);--accent:#2f6b3a;--accent-2:#22512b;--accent-ink:#fff;--accent-soft:#dfeee2;--navy:#16301c;--chart:#3b8a4a;--good:#2e7d32;--good-soft:#e3f1e3;--warn:#a86b00;--warn-soft:#f8ecd3;--bad:#c62828;--bad-soft:#f9e1e0;--info:#2f6fb2;--side:#16301c;--side-ink:#e3eee5;--side-muted:#93ac98;--shadow:0 1px 2px rgba(22,48,28,.05), 0 4px 16px rgba(22,48,28,.05);}
html[data-theme=slate]{color-scheme:light;--page:#f2f3f5;--surface:#ffffff;--surface-2:#f4f5f7;--surface-3:#e6e8ec;--ink:#1b1f27;--ink-2:#434956;--muted:#666d7a;--line:rgba(27,31,39,.10);--line-2:rgba(27,31,39,.18);--accent:#0f7c86;--accent-2:#0b5f67;--accent-ink:#fff;--accent-soft:#dcf0f1;--navy:#22262e;--chart:#1391a0;--good:#2e7d32;--good-soft:#e3f1e3;--warn:#a86b00;--warn-soft:#f8ecd3;--bad:#c62828;--bad-soft:#f9e1e0;--info:#2f6fb2;--side:#22262e;--side-ink:#e7e9ee;--side-muted:#9aa1ae;--shadow:0 1px 2px rgba(27,31,39,.05), 0 4px 16px rgba(27,31,39,.05);}
html:is([data-theme=dark],[data-theme=lux]) .ca-sum > div,html:is([data-theme=dark],[data-theme=lux]) .ca-t tfoot td,html:is([data-theme=dark],[data-theme=lux]) .cr-ttot td{background:var(--surface-2)!important;border-color:var(--line-2)!important}
html:is([data-theme=dark],[data-theme=lux]) .ca-open td{background:var(--accent-soft)!important}
html:is([data-theme=dark],[data-theme=lux]) .cr-final>div{background:var(--surface);border-color:var(--line-2)}
html:is([data-theme=dark],[data-theme=lux]) .cr-final .res.due{background:var(--bad-soft)}
html:is([data-theme=dark],[data-theme=lux]) .cr-final .res.cr{background:var(--good-soft)}
html:is([data-theme=dark],[data-theme=lux]) .chat-room.on{background:var(--accent-soft)}
html:is([data-theme=dark],[data-theme=lux]) .cm,html:is([data-theme=dark],[data-theme=lux]) .cm-day{background:var(--surface-2)}
html:is([data-theme=dark],[data-theme=lux]) .tk-row.new{background:var(--accent-soft)}
html:is([data-theme=dark],[data-theme=lux]) .rcv-box.good,html:is([data-theme=dark],[data-theme=lux]) .rcv-tag.good{background:var(--good-soft);color:var(--good)}
html:is([data-theme=dark],[data-theme=lux]) .rcv-box.bad,html:is([data-theme=dark],[data-theme=lux]) .rcv-tag.bad{background:var(--bad-soft);color:var(--bad)}
html:is([data-theme=dark],[data-theme=lux]) .rcv-tag.warn{background:var(--warn-soft);color:var(--warn)}
html:is([data-theme=dark],[data-theme=lux]) .rcv-code-card{background:var(--good-soft)}
html:is([data-theme=dark],[data-theme=lux]) .col-tag.chq{background:var(--accent-soft);color:var(--accent-2)}
html:is([data-theme=dark],[data-theme=lux]) .dock-it.on .dock-ic{background:var(--surface)}
}
@media screen and (prefers-color-scheme: dark){
html[data-theme=auto]{color-scheme:dark;--page:#0e141d;--surface:#161e2a;--surface-2:#1d2735;--surface-3:#263243;--ink:#e6ecf4;--ink-2:#c2ccda;--muted:#8f9cb1;--line:rgba(230,236,244,.10);--line-2:rgba(230,236,244,.20);--accent:#3f86dc;--accent-2:#78aef0;--accent-ink:#fff;--accent-soft:#1b3150;--navy:#0a111c;--chart:#5d9cec;--good:#49c06a;--good-soft:#15301f;--warn:#e2a540;--warn-soft:#3a2c10;--bad:#f06c6c;--bad-soft:#3e1d1d;--info:#5d9cec;--side:#0a111c;--side-ink:#dbe3ef;--side-muted:#7d8ba3;--shadow:0 1px 2px rgba(0,0,0,.35), 0 4px 16px rgba(0,0,0,.25);}
html[data-theme=auto] .ca-sum > div,html[data-theme=auto] .ca-t tfoot td,html[data-theme=auto] .cr-ttot td{background:var(--surface-2)!important;border-color:var(--line-2)!important}
html[data-theme=auto] .ca-open td{background:var(--accent-soft)!important}
html[data-theme=auto] .cr-final>div{background:var(--surface);border-color:var(--line-2)}
html[data-theme=auto] .cr-final .res.due{background:var(--bad-soft)}
html[data-theme=auto] .cr-final .res.cr{background:var(--good-soft)}
html[data-theme=auto] .chat-room.on{background:var(--accent-soft)}
html[data-theme=auto] .cm,html[data-theme=auto] .cm-day{background:var(--surface-2)}
html[data-theme=auto] .tk-row.new{background:var(--accent-soft)}
html[data-theme=auto] .rcv-box.good,html[data-theme=auto] .rcv-tag.good{background:var(--good-soft);color:var(--good)}
html[data-theme=auto] .rcv-box.bad,html[data-theme=auto] .rcv-tag.bad{background:var(--bad-soft);color:var(--bad)}
html[data-theme=auto] .rcv-tag.warn{background:var(--warn-soft);color:var(--warn)}
html[data-theme=auto] .rcv-code-card{background:var(--good-soft)}
html[data-theme=auto] .col-tag.chq{background:var(--accent-soft);color:var(--accent-2)}
html[data-theme=auto] .dock-it.on .dock-ic{background:var(--surface)}
}
/* text size */
@media screen{ html[data-fs=lg] .main{zoom:1.08} html[data-fs=xl] .main{zoom:1.16} html[data-fs=lg] .side nav{font-size:15.5px} html[data-fs=xl] .side nav{font-size:16.5px} }
/* theme picker (حسابي) */
.th-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.th-card{position:relative;cursor:pointer;display:block}
.th-card input{position:absolute;opacity:0;pointer-events:none}
.th-prev{display:flex;height:84px;border-radius:12px;overflow:hidden;border:2px solid var(--line-2);box-shadow:var(--shadow)}
.th-prev .s{width:30%;background:var(--ps)} .th-prev .m{flex:1;background:var(--pp);padding:8px;display:flex;flex-direction:column;gap:5px}
.th-prev .m i{display:block;height:12px;border-radius:4px;background:var(--pc)} .th-prev .m i:nth-child(2){width:70%;background:var(--pa);height:10px} .th-prev .m i:nth-child(3){width:45%;height:10px;background:var(--pc)}
.th-card b{display:block;margin-top:6px;font-size:13.5px;text-align:center}
.th-card input:checked+.th-prev{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.th-card input:checked~b::before{content:'✓ ';color:var(--accent)}
.th-card input:focus-visible+.th-prev{outline:2px solid var(--accent);outline-offset:2px}
.th-auto .s{background:linear-gradient(180deg,#032759 50%,#0a111c 50%)} .th-auto .m{background:linear-gradient(180deg,#f1f4f8 50%,#0e141d 50%)}
.fs-row{display:flex;gap:8px;flex-wrap:wrap}
.fs-row label{cursor:pointer} .fs-row input{position:absolute;opacity:0} .fs-row span{display:inline-block;padding:7px 16px;border:1px solid var(--line-2);border-radius:999px;font-weight:700;background:var(--surface)}
.fs-row input:checked+span{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.me .icon-btn.th-btn{font-size:16px;line-height:1}
/* theme-aware bits that had fixed colours */
@media screen{
  html:not([data-theme=classic]) .topbar{background:color-mix(in srgb,var(--surface) 92%,transparent)}
  html:not([data-theme=classic]) .dock{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 88%,transparent),color-mix(in srgb,var(--navy) 94%,transparent))}
}

/* ======================================================================
   الواجهة: picker in حسابي (both layouts)
   ====================================================================== */
.ui-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.ui-card{position:relative;cursor:pointer;display:flex;gap:12px;align-items:center;padding:10px;border:2px solid var(--line-2);border-radius:12px;background:var(--surface)}
.ui-card input{position:absolute;opacity:0;pointer-events:none}
.ui-card:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.ui-card:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.ui-txt b{display:block;font-size:14px} .ui-txt small{display:block;color:var(--muted);font-size:12px;line-height:1.6}
.ui-card input:checked~.ui-txt b::before{content:'✓ ';color:var(--accent)}
.ui-prev{flex:none;width:96px;height:64px;border-radius:8px;background:var(--page);border:1px solid var(--line-2);position:relative;overflow:hidden}
.ui-prev span{position:absolute;display:block;border-radius:2px}
.ui-prev-classic .a{inset:0 0 0 auto;width:30%;background:var(--side)}
.ui-prev-classic .b{top:8px;right:36%;left:8px;height:9px;background:var(--surface);border:1px solid var(--line)}
.ui-prev-classic .c{top:22px;right:36%;left:8px;bottom:8px;background:var(--surface);border:1px solid var(--line)}
.ui-prev-classic .d{display:none}
.ui-prev-interlock .a{inset:0 0 0 auto;width:11%;background:var(--side)}
.ui-prev-interlock .b{top:6px;right:16%;left:6px;height:14px;background:color-mix(in srgb,var(--accent) 16%,var(--surface));border-bottom:2px solid var(--accent)}
.ui-prev-interlock .c{top:24px;right:16%;left:34%;bottom:6px;background:var(--surface);border:1px solid var(--line)}
.ui-prev-interlock .d{top:24px;left:6px;width:24%;bottom:6px;background:color-mix(in srgb,var(--warn) 18%,var(--surface));border-inline-start:2px solid var(--warn)}

/* ======================================================================
   واجهة إنترلوك (html[data-ui=interlock]) — slim section rail, paver
   launcher, a "slab" page header, the insights box as a side column.
   Colours always come from the chosen theme; only shapes, type and
   placement change here.
   ====================================================================== */
html[data-ui=interlock]{
  --il-rail:84px; --il-r:12px; --il-r-s:8px;
  --il-body:var(--font); --il-disp:var(--font);   /* the font each user picks in حسابي */
  --il-slab:color-mix(in srgb,var(--accent) 6%,var(--surface));
  --il-paver:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='36'%3E%3Cpath d='M1 1h26v5h-3v6h3v5h-26v-5h3v-6h-3z M29 1h26v5h-3v6h3v5h-26v-5h3v-6h-3z M-13 19h26v5h-3v6h3v5h-26v-5h3v-6h-3z M15 19h26v5h-3v6h3v5h-26v-5h3v-6h-3z M43 19h26v5h-3v6h3v5h-26v-5h3v-6h-3z' fill='none' stroke='black' stroke-width='1.3'/%3E%3C/svg%3E");
}
html[data-ui=interlock] body{font-family:var(--il-body);font-size:14.5px;line-height:1.65}
html[data-ui=interlock] :is(h1,h2,h3,.kpi .v,.btn,.il-zone,.il-crumb,.pipe b,table.t th,.tabs-row .btn){font-family:var(--il-disp)}
html[data-ui=interlock] .num,html[data-ui=interlock] td.num{font-family:var(--il-disp);font-weight:500}

/* ---- the rail ---- */
.il-rail{position:fixed;inset-block:0;right:0;width:var(--il-rail);background:var(--side);color:var(--side-ink);z-index:55;display:flex;flex-direction:column;align-items:stretch;padding:12px 8px calc(10px + env(safe-area-inset-bottom,0));gap:6px}
.il-mark{display:flex;justify-content:center;padding:4px 0 10px}
.il-mark img{width:42px;height:42px}
.il-zones{flex:1;display:flex;flex-direction:column;gap:4px;overflow-y:auto;scrollbar-width:none}
.il-zones::-webkit-scrollbar{display:none}
.il-zone{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:9px 2px 8px;border-radius:10px;border:0;background:transparent;color:var(--side-muted);font-size:11px;font-weight:500;line-height:1.3;text-align:center;cursor:pointer;text-decoration:none}
.il-zone svg{width:22px;height:22px}
.il-zone:hover{color:var(--side-ink);background:rgba(255,255,255,.06);text-decoration:none}
.il-zone.open{color:var(--side-ink);background:rgba(255,255,255,.1)}
.il-zone.on{color:#fff;background:rgba(255,255,255,.12)}
/* the section you're in: a small paver set into the rail's inner edge */
.il-zone.on::before{content:"";position:absolute;left:-8px;top:50%;width:6px;height:28px;margin-top:-14px;background:var(--accent-2,var(--accent));border-radius:0 3px 3px 0;
  clip-path:polygon(0 0,100% 0,100% 30%,60% 30%,60% 70%,100% 70%,100% 100%,0 100%)}
.il-zone:focus-visible,.il-me:focus-visible,.il-mark:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.il-dot{position:absolute;top:7px;left:calc(50% - 16px);width:8px;height:8px;border-radius:2px;background:var(--bad);box-shadow:0 0 0 2px var(--side)}
.il-all{border-top:1px solid rgba(255,255,255,.1);border-radius:0 0 10px 10px;padding-top:12px}
.il-me{display:flex;justify-content:center;padding:6px 0 0;text-decoration:none}
.il-me .av{width:40px;height:40px;background:rgba(255,255,255,.14);color:var(--side-ink);border:2px solid transparent}
.il-me.on .av{border-color:var(--accent-2,var(--accent))}

/* ---- a section's panel (opens next to the rail) ---- */
.il-fly{position:fixed;right:calc(var(--il-rail) + 8px);top:80px;width:290px;max-height:calc(100vh - 16px);overflow:auto;z-index:56;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--il-r);box-shadow:0 18px 50px rgba(10,20,40,.22);padding:8px}
.il-fly-h{display:flex;align-items:baseline;justify-content:space-between;padding:6px 10px 8px;border-bottom:1px solid var(--line);margin-bottom:6px}
.il-fly-h b{font-family:var(--il-disp);font-size:15px;font-weight:600} .il-fly-h small{color:var(--muted);font-size:12px}
.il-fly a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--il-r-s);color:var(--ink);font-weight:500;text-decoration:none}
.il-fly a svg{color:var(--muted);width:19px;height:19px}
.il-fly a:hover,.il-fly a:focus-visible{background:var(--surface-2);outline:none}
.il-fly a.on{background:var(--accent-soft);color:var(--accent-2,var(--accent));font-weight:600}
.il-fly a.on svg{color:inherit}
@media (prefers-reduced-motion:no-preference){ .il-fly:not([hidden]){animation:il-in .16s ease-out} @keyframes il-in{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}} }

/* ---- top bar ---- */
html[data-ui=interlock] .topbar.il-top{margin-right:var(--il-rail);padding:10px 28px;gap:12px;background:color-mix(in srgb,var(--surface) 90%,transparent);border-bottom:1px solid var(--line)}
.il-crumb{display:flex;flex-direction:column;min-width:0;flex:0 1 auto;max-width:30%;line-height:1.3}
.il-crumb span{font-size:11.5px;color:var(--muted)}
.il-crumb b{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-ui=interlock] .il-top .gsearch{margin-inline:auto}
html[data-ui=interlock] .il-top .bell:first-of-type{margin-inline-start:0}
html[data-ui=interlock] .gsearch input{border-radius:var(--il-r-s)}

/* ---- page body ---- */
html[data-ui=interlock] .main{margin-right:var(--il-rail);max-width:1560px;padding:24px 28px 60px}
/* the page title becomes a "slab": a band with a faint interlock pattern fading in from the right */
html[data-ui=interlock] .main > .page-head{position:relative;isolation:isolate;align-items:center;background:var(--il-slab);border:1px solid var(--line);border-radius:var(--il-r);padding:20px 24px;margin-bottom:20px;overflow:hidden}
html[data-ui=interlock] .main > .page-head::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent);opacity:.09;
  -webkit-mask-image:var(--il-paver),linear-gradient(to left,#000,transparent 60%);-webkit-mask-size:56px 36px,100% 100%;-webkit-mask-repeat:repeat,no-repeat;-webkit-mask-composite:source-in;
  mask-image:var(--il-paver),linear-gradient(to left,#000,transparent 60%);mask-size:56px 36px,100% 100%;mask-repeat:repeat,no-repeat;mask-composite:intersect}
html[data-ui=interlock] .page-head h1{font-size:26px;font-weight:600;letter-spacing:0}
html[data-ui=interlock] .page-head p{font-size:13.5px;margin-top:4px}

/* insights: on wide screens a fixed column beside the page instead of a box above it */
@media (min-width:1280px){
  html[data-ui=interlock] .main:has(> .ins-box){display:grid;grid-template-columns:minmax(0,1fr) 330px;column-gap:24px;align-items:start}
  html[data-ui=interlock] .main:has(> .ins-box) > *{grid-column:1;min-width:0}
  html[data-ui=interlock] .main:has(> .ins-box) > .ins-box{grid-column:2;grid-row:1 / span 60;position:sticky;top:78px;max-height:calc(100vh - 96px);overflow:auto;margin:0}
  html[data-ui=interlock] .main > .ins-box:not([open]){max-height:none}
  html[data-ui=interlock] .ins-box ul{grid-template-columns:1fr}
}
html[data-ui=interlock] .ins-box{border:1px solid var(--line);border-top:4px solid var(--warn);border-radius:var(--il-r);padding:12px 14px;background:var(--surface);box-shadow:none}
html[data-ui=interlock] .ins-box>summary{font-family:var(--il-disp);font-weight:600;font-size:15px}
html[data-ui=interlock] .ins-box li{flex-wrap:wrap;border-radius:var(--il-r-s);font-size:13.5px;line-height:1.75;padding:9px 11px;border-inline-start:3px solid transparent}
html[data-ui=interlock] .ins-box li.ins-bad{border-inline-start-color:var(--bad)} html[data-ui=interlock] .ins-box li.ins-warn{border-inline-start-color:var(--warn)}
html[data-ui=interlock] .ins-box li.ins-good{border-inline-start-color:var(--good)} html[data-ui=interlock] .ins-box li.ins-info{border-inline-start-color:var(--info)}
html[data-ui=interlock] .ins-box .ins-ic{display:none}
html[data-ui=interlock] .ins-box .ins-t{flex:1 1 100%}
html[data-ui=interlock] .ins-box .ins-a{margin-inline-start:auto;font-size:12.5px}
/* narrower screens: the insights become a strip you swipe sideways */
@media (max-width:1279px){
  html[data-ui=interlock] .ins-box[open] > ul{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding-bottom:6px}
  html[data-ui=interlock] .ins-box[open] > ul > li{flex:0 0 min(300px,80%);scroll-snap-align:start;align-content:space-between}
}

/* blocks: KPI tiles stand on a thick "face" in their status colour */
html[data-ui=interlock] .kpi{border-radius:var(--il-r) var(--il-r) 6px 6px;box-shadow:none;border:1px solid var(--line);border-bottom:5px solid var(--line-2);padding:16px 18px 14px}
html[data-ui=interlock] .kpi.bad{border-bottom-color:var(--bad)} html[data-ui=interlock] .kpi.warn{border-bottom-color:var(--warn)} html[data-ui=interlock] .kpi.good{border-bottom-color:var(--good)}
html[data-ui=interlock] a.kpi:hover{border-bottom-color:var(--accent);text-decoration:none}
html[data-ui=interlock] .kpi .l{font-weight:500;font-size:12.5px}
html[data-ui=interlock] .kpi .v{font-size:30px;font-weight:600;line-height:1.25}
html[data-ui=interlock] .card{border-radius:var(--il-r);box-shadow:none}
html[data-ui=interlock] .card h2{font-weight:600;font-size:16px}
html[data-ui=interlock] .btn{border-radius:var(--il-r-s);font-weight:500}
html[data-ui=interlock] :is(input:not([type=checkbox]):not([type=radio]),select,textarea){border-radius:var(--il-r-s)}
html[data-ui=interlock] table.t th{background:transparent;color:var(--muted);font-weight:500;font-size:12.5px;border-bottom:2px solid var(--line-2)}
html[data-ui=interlock] table.t td{padding:11px 12px}
html[data-ui=interlock] table.t tbody tr:hover{background:var(--il-slab)}
html[data-ui=interlock] .pipe a{border-radius:var(--il-r-s)}

/* ---- "كل الصفحات": every page as a paver ---- */
.il-launch{position:fixed;inset:0;z-index:80;background:color-mix(in srgb,var(--navy) 55%,transparent);display:flex;justify-content:center;align-items:flex-start;padding:4vh 16px;overflow:auto;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.il-launch[hidden]{display:none}
body.il-locked{overflow:hidden}
.il-l-in{width:min(1080px,100%);background:var(--page);border-radius:16px;padding:18px 20px 22px;box-shadow:0 30px 80px rgba(0,0,0,.35);position:relative;isolation:isolate;overflow:hidden}
.il-l-in::before{content:"";position:absolute;inset:0 0 auto 0;height:120px;z-index:-1;background:var(--accent);opacity:.08;-webkit-mask:var(--il-paver) 0 0/56px 36px repeat;mask:var(--il-paver) 0 0/56px 36px repeat}
.il-l-head{display:flex;gap:10px;align-items:center;margin-bottom:6px}
.il-l-find{flex:1;position:relative;display:flex;align-items:center}
.il-l-find svg{position:absolute;right:14px;color:var(--muted)}
.il-l-find input{padding:13px 44px 13px 14px;font-size:16px;border-radius:10px;background:var(--surface);border:1px solid var(--line-2)}
.il-l-empty{color:var(--muted);margin:16px 4px}
.il-l-zone{margin-top:16px}
.il-l-zone h3{font-family:var(--il-disp);font-size:14px;font-weight:600;color:var(--ink-2);margin:0 4px 8px}
.il-pavers{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:6px}
/* the tile: an I-shaped (dogbone) paver — the narrow waist is cut from the middle of the long sides */
.il-paver{--n:7px;position:relative;display:flex;align-items:center;gap:9px;min-height:62px;padding:12px 16px;background:var(--surface);color:var(--ink);font:500 13.5px/1.45 var(--il-body);text-decoration:none;border:0;cursor:pointer;text-align:start;width:100%;
  clip-path:polygon(0 0,36% 0,36% var(--n),64% var(--n),64% 0,100% 0,100% 100%,64% 100%,64% calc(100% - var(--n)),36% calc(100% - var(--n)),36% 100%,0 100%)}
.il-paver svg{flex:none;width:20px;height:20px;color:var(--accent)}
.il-paver span{flex:1;min-width:0}
.il-paver .count{flex:none}
.il-paver:hover{background:color-mix(in srgb,var(--accent) 10%,var(--surface));text-decoration:none}
.il-paver:focus-visible{outline:none;background:var(--accent);color:var(--accent-ink)}
.il-paver:focus-visible svg{color:inherit}
.il-paver.on{background:var(--accent-soft);color:var(--accent-2,var(--accent));font-weight:600}
.il-paver[hidden],.il-paver-f[hidden]{display:none}
.il-paver-f{margin:0;display:flex}
.il-l-new .il-paver{background:color-mix(in srgb,var(--good) 9%,var(--surface))}
.il-l-new .il-paver svg{color:var(--good)}
@media (prefers-reduced-motion:no-preference){ .il-launch:not([hidden]) .il-l-in{animation:il-up .2s ease-out} @keyframes il-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} }

/* ---- phones ---- */
.il-bar{display:none}
@media (max-width:900px){
  .il-rail,.il-fly{display:none!important}
  html[data-ui=interlock] .topbar.il-top{margin:0;padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top,0))}
  .il-crumb{flex:1;max-width:none}
  html[data-ui=interlock] .il-top .gsearch:not(.open){display:none}
  html[data-ui=interlock] .main{margin:0;padding:14px 14px calc(104px + env(safe-area-inset-bottom,0))}
  html[data-ui=interlock] .main > .page-head{padding:16px;border-radius:10px}
  html[data-ui=interlock] .page-head h1{font-size:21px}
  .il-bar{display:grid;grid-template-columns:repeat(5,1fr);align-items:end;position:fixed;z-index:40;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0));
    background:var(--surface);border:1px solid var(--line-2);border-radius:16px;box-shadow:0 10px 30px rgba(10,20,40,.18);padding:6px 4px}
  .il-bar a{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--muted);font:500 11px/1.3 var(--il-disp);padding:6px 0;text-decoration:none;position:relative}
  .il-bar a.on{color:var(--accent)}
  .il-bar a .count{position:absolute;top:0;left:calc(50% - 22px);margin:0}
  .il-bar-all{display:flex;flex-direction:column;align-items:center;gap:3px;border:0;background:none;color:var(--ink);font:500 11px/1.3 var(--il-disp);padding:0 0 4px;cursor:pointer}
  .il-bar-all > span{display:flex;align-items:center;justify-content:center;width:54px;height:46px;margin-top:-26px;background:var(--accent);color:var(--accent-ink);box-shadow:0 8px 18px color-mix(in srgb,var(--accent) 40%,transparent);
    clip-path:polygon(0 0,34% 0,34% 6px,66% 6px,66% 0,100% 0,100% 100%,66% 100%,66% calc(100% - 6px),34% calc(100% - 6px),34% 100%,0 100%)}
  .il-bar-all svg{width:24px;height:24px}
  .il-launch{padding:0;align-items:stretch}
  .il-l-in{border-radius:0;min-height:100%;padding:14px 14px calc(24px + env(safe-area-inset-bottom,0))}
  .il-pavers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .il-paver{min-height:58px;padding:10px 12px;font-size:13px}
}
@media print{ .il-rail,.il-fly,.il-bar,.il-launch{display:none!important} html[data-ui=interlock] .main{margin:0} html[data-ui=interlock] .main > .page-head{background:none;border:0;padding:0} html[data-ui=interlock] .main > .page-head::before{display:none} }
@media screen{ html[data-ui=interlock][data-fs=lg] .il-zone{font-size:12px} html[data-ui=interlock][data-fs=xl] .il-zone{font-size:12.5px} }

/* ======================================================================
   نوع الخط (each user picks it in حسابي; Cairo = the original look)
   ====================================================================== */
html[data-font=tajawal]{--font:"Tajawal","Cairo",Tahoma,"Segoe UI",system-ui,sans-serif}
html[data-font=almarai]{--font:"Almarai","Cairo",Tahoma,"Segoe UI",system-ui,sans-serif}
html[data-font=plex]{--font:"IBM Plex Sans Arabic","Cairo",Tahoma,"Segoe UI",system-ui,sans-serif}
html[data-font=kufi]{--font:"Noto Kufi Arabic","Cairo",Tahoma,"Segoe UI",system-ui,sans-serif}
html[data-font=readex]{--font:"Readex Pro","Cairo",Tahoma,"Segoe UI",system-ui,sans-serif}
html[data-font=vazir]{--font:"Vazirmatn","Cairo",Tahoma,"Segoe UI",system-ui,sans-serif}
html[data-font=notosans]{--font:"Noto Sans Arabic","Cairo",Tahoma,"Segoe UI",system-ui,sans-serif}
html[data-font=alexandria]{--font:"Alexandria","Cairo",Tahoma,"Segoe UI",system-ui,sans-serif}
html[data-font=changa]{--font:"Changa","Cairo",Tahoma,"Segoe UI",system-ui,sans-serif}
html[data-font=messiri]{--font:"El Messiri","Cairo",Tahoma,"Segoe UI",system-ui,sans-serif}
html[data-font=kufi] body{line-height:1.75}
.font-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.font-card{position:relative;cursor:pointer;display:block;border:2px solid var(--line-2);border-radius:12px;background:var(--surface);padding:10px 12px}
.font-card input{position:absolute;opacity:0;pointer-events:none}
.font-card:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.font-card:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.font-prev{display:block;line-height:1.6}
.font-prev b{display:block;font-size:17px;font-weight:700} .font-prev small{display:block;font-size:13px;color:var(--ink-2)}
.font-name{display:block;margin-top:6px;font-size:12px;color:var(--muted)}
.font-card input:checked~.font-name::before{content:'✓ ';color:var(--accent);font-weight:800}

/* وصول سريع in the interlock layout: sits over the page area (not under the rail), and above the phone bar */
html[data-ui=interlock] .dock-wrap{right:var(--il-rail)}
html[data-ui=interlock] body.has-dock .main{padding-bottom:110px}
@media (max-width:900px){
  html[data-ui=interlock] .dock-fab{bottom:calc(96px + env(safe-area-inset-bottom,0))}
  html[data-ui=interlock] .dock-wrap{right:auto;bottom:calc(158px + env(safe-area-inset-bottom,0))}
  html[data-ui=interlock] body.has-dock .main{padding-bottom:calc(160px + env(safe-area-inset-bottom,0))}
}

/* شجرة الحسابات: customers / suppliers as sub-accounts under العملاء / الموردين */
.acc-tog{border:0;background:none;padding:0 2px 0 4px;margin:0;cursor:pointer;color:var(--accent);font-size:13px;line-height:1;vertical-align:middle}
.acc-tog span{display:inline-block;transition:transform .15s}
.acc-tog[aria-expanded=true] span{transform:rotate(-90deg)}
.acc-sub-n{border:1px solid var(--line-2);background:var(--surface-2);color:var(--accent);border-radius:999px;font:600 11px/1.6 var(--font);padding:0 8px;margin-inline-start:6px;cursor:pointer}
table.t tr.acc-sub td{padding-top:6px;padding-bottom:6px;font-size:13px;background:color-mix(in srgb,var(--accent) 3%,var(--surface))}
tr.acc-sub-find td{background:var(--surface-2)!important}
tr.acc-sub-find input[type=search]{width:min(320px,100%);display:inline-block;margin-inline-end:12px;padding:6px 10px}
/* شيكات تحت التحصيل in the customer statements */
.chq-net{margin-top:10px}
.chq-t td a{font-weight:700}
/* مراكز التكلفة: pick some centers in the report */
.cc-pick{position:relative}
.cc-pick>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;padding:9px 14px;border:1px solid var(--line-2);border-radius:11px;background:var(--surface);font-weight:600;white-space:nowrap}
.cc-pick>summary::-webkit-details-marker{display:none}
.cc-pick>summary::after{content:'▾';color:var(--muted);font-size:12px}
.cc-pick[open]>summary{border-color:var(--accent)}
.cc-pick-box{position:absolute;z-index:40;top:calc(100% + 6px);inset-inline-start:0;min-width:260px;max-height:340px;overflow:auto;background:var(--surface);border:1px solid var(--line-2);border-radius:12px;box-shadow:0 12px 30px rgba(10,20,40,.18);padding:10px;display:grid;gap:6px}
.cc-pick-box label{display:flex;gap:8px;align-items:center;font-size:13.5px;cursor:pointer}
.cc-pick-box input{width:auto}
.cc-pick-acts{display:flex;gap:6px;margin-top:4px}
/* التقارير المالية: reports grouped by subject */
.fr-nav{display:grid;gap:8px;margin:0 0 16px;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.fr-grp{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.fr-grp>span{font-size:12px;font-weight:800;color:var(--muted);min-width:132px}
.fr-grp a{padding:5px 12px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink);font-size:13px;font-weight:600;text-decoration:none;background:var(--surface)}
.fr-grp a:hover{background:var(--surface-2);text-decoration:none}
.fr-grp a.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
table.t.fr-wide td,table.t.fr-wide th{white-space:nowrap}
table.t.fr-daybook td{vertical-align:top}
@media (max-width:700px){.fr-grp>span{min-width:100%}}
/* ---------- بطل الأسبوع ---------- */
.hero-card{border:1px solid var(--warn);background:linear-gradient(135deg,var(--warn-soft),var(--surface) 70%);margin-bottom:14px}
.hero-top{display:flex;gap:14px;align-items:center}
.hero-cup{font-size:40px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.15))}
.hero-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.hero-t small{color:var(--muted);font-weight:700}
.hero-t b{font-size:1.35em;color:var(--ink)}
.hero-tops{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:.9em;color:var(--ink-2)}
.hero-tops em{font-style:normal;background:var(--surface);border:1px solid var(--line-2);border-radius:999px;padding:2px 10px;font-weight:700}
.hero-me{margin-top:12px;border-top:1px dashed var(--line-2);padding-top:10px}
.hero-row{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:5px 0;border-bottom:1px solid var(--line)}
.hero-row:last-child{border-bottom:0}
.hero-row b{font-variant-numeric:tabular-nums}
.hero-row>span:last-child{font-size:.85em;font-weight:700;min-width:90px;text-align:end}
.hero-toast{position:fixed;z-index:80;inset-inline-start:16px;bottom:90px;max-width:min(380px,calc(100vw - 32px));display:flex;gap:10px;align-items:center;background:var(--surface);border:1px solid var(--warn);border-radius:14px;box-shadow:var(--shadow);padding:12px 14px;animation:heroIn .5s ease-out}
.hero-toast .hero-cup{font-size:30px}
.hero-toast div{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.hero-toast small{color:var(--muted);font-weight:700}
.hero-toast span{font-size:.85em;color:var(--ink-2)}
.hero-x{border:0;background:none;font-size:20px;color:var(--muted);cursor:pointer;padding:0 4px}
@keyframes heroIn{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
@media (max-width:600px){.hero-row{grid-template-columns:1fr auto}.hero-row>span:last-child{grid-column:1/-1;text-align:start}.hero-row>span:last-child:empty{display:none}}
/* ---------- مقاولين النقل والعربيات ---------- */
.tr{display:grid;gap:16px}
.tr-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.tr-id{display:flex;align-items:center;gap:14px;min-width:0}
.tr-av{width:54px;height:54px;border-radius:16px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:800;flex:none}
.tr-id h1{font-size:22px;font-weight:800;margin:0 0 6px;line-height:1.3}
.tr-chips{display:flex;flex-wrap:wrap;gap:6px}
.tr-chips .chip a{color:inherit}
.tr-chips .chip.off{background:var(--bad-soft);color:var(--bad)}
.tr-sub{color:var(--muted);font-size:13px;margin:0}
.tr-tabs{display:inline-flex;gap:4px;padding:4px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;width:max-content;max-width:100%}
.tr-tabs a{padding:8px 16px;border-radius:9px;font-weight:700;color:var(--ink-2);text-decoration:none;display:flex;gap:8px;align-items:center}
.tr-tabs a em{font-style:normal;font-size:12px;background:var(--surface-3);border-radius:99px;padding:0 8px}
.tr-tabs a.on{background:var(--surface);color:var(--accent);box-shadow:var(--shadow)}
.tr-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px;box-shadow:var(--shadow)}
.tr-bar .tr-search{flex:1 1 220px;min-width:180px}
.tr-bar input,.tr-bar select{height:40px;margin:0}
.tr-bar select{width:auto;flex:0 1 220px;min-width:150px}
.tr-date{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--muted)}
.tr-date input{width:150px}
.tr-ranges{display:flex;gap:6px;flex-wrap:wrap;width:100%;padding-top:2px}
.tr-ranges a{font-size:12px;font-weight:700;padding:4px 11px;border-radius:99px;border:1px solid var(--line-2);color:var(--ink-2);text-decoration:none}
.tr-ranges a.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.tr-check{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.tr-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:12px}
.tr-kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:4px;min-width:0}
.tr-kpi span{font-size:12.5px;font-weight:700;color:var(--muted)}
.tr-kpi b{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.2}
.tr-kpi small{font-size:12px;color:var(--muted)}
.tr-kpi.hl{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.tr-kpi.hl span,.tr-kpi.hl small{color:inherit;opacity:.85}
.tr-kpi.hl.cr{background:var(--good);border-color:var(--good)}
.tr-card{padding:0;overflow:hidden}
.tr-card>header{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid var(--line)}
.tr-card>header h2{margin:0;font-size:15.5px;font-weight:800}
.tr-card>header small{color:var(--muted);font-size:12.5px}
.tr-card>.tr-body{padding:16px 18px}
.tr-card>.tr-foot{padding:10px 18px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);background:var(--surface-2)}
.tr-card .table-wrap{border:0;border-radius:0;margin:0}
.tr-card table.t{margin:0}
table.t td.tr-bal{font-weight:800}
table.t tr.tr-set td{background:var(--good-soft)}
table.t tr.tr-open td{background:var(--surface-2);font-weight:700}
.tr-name{display:flex;align-items:center;gap:10px}
.tr-name .tr-av{width:36px;height:36px;border-radius:10px;font-size:15px}
.tr-name a{font-weight:800}
.tr-pill{display:inline-block;font-weight:800;border-radius:8px;padding:3px 10px;font-variant-numeric:tabular-nums}
.tr-pill.due{background:var(--bad-soft);color:var(--bad)} .tr-pill.cr{background:var(--good-soft);color:var(--good)} .tr-pill.zero{background:var(--surface-2);color:var(--muted)}
.tr-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.tr-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tr-form .full{grid-column:1/-1}
.tr-add>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;font-weight:800;padding:14px 18px}
.tr-add>summary::-webkit-details-marker{display:none}
.tr-add>summary .plus{width:28px;height:28px;border-radius:8px;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1}
.tr-add[open]>summary{border-bottom:1px solid var(--line)}
.tr-add>form{padding:16px 18px}
.tr-list .li{padding:10px 0;border-bottom:1px solid var(--line)} .tr-list .li:last-child{border-bottom:0}
.tr-note{font-size:12.5px;color:var(--muted);line-height:1.8;margin:0}
.tr-log{display:grid;gap:6px;margin-top:10px;font-size:12.5px;color:var(--ink-2)}
.tr-log div{padding:6px 10px;background:var(--surface-2);border-radius:8px}
@media (max-width:900px){.tr-grid{grid-template-columns:1fr}}
@media (max-width:600px){.tr-form{grid-template-columns:1fr}.tr-date{flex:1 1 45%}.tr-date input{width:100%}.tr-id h1{font-size:19px}.tr-av{width:44px;height:44px;font-size:21px}.tr-tabs{width:100%}.tr-tabs a{flex:1;justify-content:center}}
@media print{.tr-bar,.tr-tabs,.tr-add{display:none!important}.tr-kpi.hl{color:inherit;background:none}}
/* ---------- خريطة العملاء ---------- */
.map-wrap{display:grid;grid-template-columns:1fr;gap:16px}
.map-wrap:has(.map-side:not([hidden])){grid-template-columns:minmax(0,1fr) 320px}
.cmap{height:calc(100vh - 290px);min-height:420px;border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow);background:var(--surface-2);z-index:0}
.map-side{max-height:calc(100vh - 290px);overflow:auto}
.map-legend{display:flex;flex-wrap:wrap;gap:12px;font-size:12.5px;color:var(--ink-2)}
.map-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-inline-end:5px}
.msite{background:none;border:0}
.msite span{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#fff;border:2px solid #e8590c;box-shadow:0 2px 6px rgba(0,0,0,.35);font-size:15px}
.msite-key{display:inline-flex;width:18px;height:18px;align-items:center;justify-content:center;border:2px solid #e8590c;border-radius:50%;font-size:10px;margin-inline-end:5px;background:#fff}
.msite-tag{display:inline-block;font-size:11.5px;font-weight:700;color:#e8590c;background:#fff4e6;border-radius:99px;padding:1px 8px}
.map-pop{direction:rtl;text-align:right;font-family:inherit;line-height:1.8}
.leaflet-container{font-family:inherit}
@media (max-width:900px){.map-wrap:has(.map-side:not([hidden])){grid-template-columns:1fr}.cmap{height:60vh}}
/* ---------- 3.45: أهداف · واتساب · السواق · كشف الحساب بلينك ---------- */
.tg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.tg-bar{min-width:130px}
.tg-top{display:flex;align-items:baseline;gap:4px;font-variant-numeric:tabular-nums}
.tg-top em{font-style:normal;font-weight:800;margin-inline-start:auto;font-size:12.5px}
.tg-track{height:8px;border-radius:99px;background:var(--surface-3);overflow:hidden;margin-top:5px}
.tg-track i{display:block;height:100%;border-radius:99px;transition:width .4s}
.wa-row{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line)}
.wa-row:last-child{border-bottom:0}
.wa-row .b{min-width:0;flex:1}
.wa-row .t1{font-weight:800}
.wa-row details summary{cursor:pointer;color:var(--accent);margin-top:4px}
.wa-row.done{opacity:.7}
.wa-act{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.wa-text{white-space:pre-wrap;font-family:inherit;font-size:13px;background:var(--surface-2);border-radius:10px;padding:10px 12px;margin:6px 0 0;line-height:1.8;max-width:560px}
.drv{max-width:520px;margin:0 auto;display:grid;gap:14px}
.drv-head{text-align:center}
.drv-head .co{font-weight:800;color:var(--accent)}
.drv-head h1{font-size:24px;margin:6px 0 2px}
.drv-head p{color:var(--muted);margin:0}
.drv-row{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.drv-row span{color:var(--muted)}
.drv-items{display:grid;gap:6px;margin-top:10px}
.drv-items div{display:flex;justify-content:space-between;gap:10px;background:var(--surface-2);border-radius:10px;padding:8px 12px}
.drv-steps{display:grid;gap:10px}
.drv-step{display:flex;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow)}
.drv-step>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.drv-step .n{width:34px;height:34px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}
.drv-step.done{border-color:var(--good);background:var(--good-soft)}
.drv-step.done .n{background:var(--good);color:#fff}
.drv-step small{color:var(--good);font-weight:700}
.drv-step .btn{min-width:84px;justify-content:center;font-size:16px;padding:12px 16px}
.pst-bal{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--good-soft);color:var(--good);border-radius:var(--radius);padding:16px;margin:14px 0}
.pst-bal.due{background:var(--bad-soft);color:var(--bad)}
.pst-bal b{font-size:26px;font-weight:800}
.pst-bal span,.pst-bal small{font-weight:700}

/* ======================================================================
   واجهة آيلاند (html[data-ui=island]) — floating glass bar with a dark
   "island" (clock + search), a dock of app icons that grow under the
   mouse, folder-like stacks, a launchpad, iPhone-style widgets on the
   home page, and soft motion. Colours come from the chosen theme;
   the app icons keep their own gradients. Motion is off for people who
   ask their device for less motion.
   ====================================================================== */
@property --p{syntax:'<number>';inherits:true;initial-value:0}
html[data-ui=island]{
  --is-r:22px; --is-spring:cubic-bezier(.34,1.56,.64,1); --is-ease:cubic-bezier(.22,1,.36,1);
  --is-glass:color-mix(in srgb,var(--surface) 70%,transparent);
  --is-glass-b:color-mix(in srgb,var(--ink) 9%,transparent);
  --is-blur:saturate(1.8) blur(22px);
  --is-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 18px 40px -18px rgba(10,15,30,.35),0 2px 8px -2px rgba(10,15,30,.12);
  scroll-behavior:smooth;
}
html[data-ui=island] body{background:var(--page);min-height:100vh}
html[data-ui=island] .dock-wrap,html[data-ui=island] .dock-fab{display:none!important}   /* its links live in the dock / launchpad here */

/* ---- moving light behind everything ---- */
.is-aura{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.is-aura i{position:absolute;width:46vmax;height:46vmax;border-radius:50%;filter:blur(70px);opacity:.30;will-change:transform;
  translate:calc(var(--ax,0) * 1px) calc(var(--ay,0) * 1px)}
.is-aura i:nth-child(1){background:var(--accent);top:-18vmax;right:-10vmax;animation:is-drift1 26s ease-in-out infinite alternate}
.is-aura i:nth-child(2){background:var(--info);bottom:-22vmax;left:-12vmax;opacity:.22;animation:is-drift2 32s ease-in-out infinite alternate}
.is-aura i:nth-child(3){background:color-mix(in srgb,var(--warn) 70%,#f472b6);top:30%;left:35%;width:30vmax;height:30vmax;opacity:.14;animation:is-drift3 38s ease-in-out infinite alternate}
html[data-theme=dark][data-ui=island] .is-aura i,html[data-theme=lux][data-ui=island] .is-aura i{opacity:.18}
@keyframes is-drift1{to{transform:translate3d(-14vmax,10vmax,0) scale(1.15)}}
@keyframes is-drift2{to{transform:translate3d(12vmax,-8vmax,0) scale(.9)}}
@keyframes is-drift3{to{transform:translate3d(-10vmax,-12vmax,0) scale(1.3)}}
.is-progress{position:fixed;top:0;right:0;left:0;height:3px;z-index:70;transform-origin:right;transform:scaleX(var(--sp,0));background:linear-gradient(90deg,var(--info),var(--accent),#f472b6);pointer-events:none}

/* ---- the floating top bar ---- */
html[data-ui=island] .topbar.is-top{position:sticky;top:10px;z-index:40;margin:10px 18px 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,560px) minmax(0,1fr);align-items:center;gap:12px;
  padding:8px 10px;border-radius:var(--is-r);background:var(--is-glass);backdrop-filter:var(--is-blur);-webkit-backdrop-filter:var(--is-blur);border:1px solid var(--is-glass-b);box-shadow:var(--is-shadow)}
.is-head{display:flex;align-items:center;gap:10px;min-width:0}
.is-mark{flex:none;width:40px;height:40px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,var(--accent),var(--navy));box-shadow:0 6px 16px -6px var(--accent);transition:transform .5s var(--is-spring)}
.is-mark:hover{transform:rotate(-8deg) scale(1.08)}
.is-mark img{width:26px;height:26px}
.is-crumb{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.is-crumb span{font-size:11.5px;color:var(--muted);font-weight:600}
.is-crumb b{font-size:16px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.is-acts{display:flex;align-items:center;gap:8px;justify-self:end}
.is-glass{background:color-mix(in srgb,var(--surface) 60%,transparent)!important;border:1px solid var(--is-glass-b)!important;border-radius:14px!important;transition:transform .35s var(--is-spring),background .2s}
.is-glass:hover{background:var(--surface)!important;transform:translateY(-2px)}
html[data-ui=island] .topbar .bell{margin-inline-start:0}
.is-new{border-radius:999px!important;padding-inline:16px!important;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 60%,#f472b6))!important;border:0!important;box-shadow:0 8px 20px -8px var(--accent)}
.is-me{display:flex;text-decoration:none}
.is-me .av{width:40px;height:40px;color:#fff;background:linear-gradient(145deg,var(--accent),var(--info));box-shadow:0 0 0 2px var(--surface),0 0 0 4px transparent;transition:box-shadow .3s,transform .4s var(--is-spring)}
.is-me:hover .av,.is-me.on .av{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent);transform:scale(1.06)}
/* the island */
.is-island{justify-self:center;width:100%;max-width:440px;display:flex;align-items:center;gap:8px;padding:5px 6px 5px 8px;border-radius:999px;background:#0b0c10;color:#fff;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.06);transition:max-width .55s var(--is-spring),box-shadow .3s,transform .4s var(--is-spring)}
.is-island:hover{transform:scale(1.015)}
.is-island:focus-within{max-width:560px;box-shadow:0 18px 50px -12px rgba(0,0,0,.7),0 0 0 3px color-mix(in srgb,var(--accent) 45%,transparent)}
.is-clock{flex:none;display:inline-flex;align-items:center;gap:7px;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.08);font-weight:800;font-size:13px;font-variant-numeric:tabular-nums;letter-spacing:.5px}
.is-clock::before{content:"";width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 0 0 rgba(52,211,153,.6);animation:is-ping 2.4s infinite}
@keyframes is-ping{70%{box-shadow:0 0 0 8px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
.is-island .gsearch{max-width:none}
.is-island .gsearch > svg{color:rgba(255,255,255,.7)}
.is-island .gsearch input{background:transparent!important;border:0!important;color:#fff;box-shadow:none!important;padding-block:7px}
.is-island .gsearch input::placeholder{color:rgba(255,255,255,.55)}
.is-island .gsearch kbd{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.15);color:rgba(255,255,255,.75)}
.is-island .gs-results{top:calc(100% + 14px);color:var(--ink);background:var(--is-glass);backdrop-filter:var(--is-blur);-webkit-backdrop-filter:var(--is-blur);border-radius:20px;animation:is-pop .35s var(--is-spring)}

/* ---- page ---- */
html[data-ui=island] .main{position:relative;z-index:1;margin:0 auto;max-width:1480px;padding:24px 28px 140px}
html[data-ui=island] .page-head h1{font-size:27px;letter-spacing:-.2px}
html[data-ui=island] .card{border-radius:var(--is-r);background-color:color-mix(in srgb,var(--surface) 90%,transparent);border-color:var(--is-glass-b);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 12px 32px -20px rgba(10,15,30,.35);
  background-image:radial-gradient(520px circle at var(--mx,-999px) var(--my,-999px),color-mix(in srgb,var(--accent) 8%,transparent),transparent 60%);transition:box-shadow .3s,border-color .3s}
html[data-ui=island] .card:hover{border-color:color-mix(in srgb,var(--accent) 22%,var(--line))}
html[data-ui=island] .kpi{border-radius:20px;border-color:var(--is-glass-b);background-color:color-mix(in srgb,var(--surface) 90%,transparent);
  background-image:radial-gradient(260px circle at var(--mx,-999px) var(--my,-999px),color-mix(in srgb,var(--accent) 12%,transparent),transparent 65%);
  transition:transform .45s var(--is-spring),box-shadow .3s;transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0))}
html[data-ui=island] .kpi:hover{--ty:-3px;box-shadow:0 18px 36px -18px rgba(10,15,30,.45)}
html[data-ui=island] .btn{border-radius:13px;transition:transform .35s var(--is-spring),box-shadow .25s,background .2s;position:relative;
  transform:translate(var(--bx,0),var(--by,0))}
html[data-ui=island] .btn:not(.sec):not(.ghost):not(.danger){background-image:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0));box-shadow:0 8px 18px -10px var(--accent)}
html[data-ui=island] .btn:hover{box-shadow:0 12px 24px -12px var(--accent)}
html[data-ui=island] .btn:active{transform:scale(.95)}
html[data-ui=island] :is(input,select,textarea){border-radius:12px}
html[data-ui=island] table.t tbody tr{transition:background .2s}
html[data-ui=island] .flash{border-radius:16px;animation:is-drop .55s var(--is-spring) both;box-shadow:0 10px 30px -16px rgba(0,0,0,.4)}
html[data-ui=island] .menu{border-radius:18px;background:var(--is-glass);backdrop-filter:var(--is-blur);-webkit-backdrop-filter:var(--is-blur);transform-origin:top left;animation:is-pop .35s var(--is-spring)}
html[data-ui=island] .modal{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:is-fade .25s}
html[data-ui=island] .modal-box{border-radius:24px;animation:is-pop .45s var(--is-spring)}
.is-rippling{overflow:hidden!important}
.is-ripple{position:absolute;border-radius:50%;pointer-events:none;background:currentColor;opacity:.28;transform:scale(0);animation:is-ripple .65s ease-out forwards}
@keyframes is-ripple{to{transform:scale(1);opacity:0}}
/* the page comes in, a card at a time */
html[data-ui=island] .main > :is(div,section,form,details,nav,table,p){animation:is-rise .7s var(--is-ease) backwards}
html[data-ui=island] .main > :nth-child(2){animation-delay:.04s} html[data-ui=island] .main > :nth-child(3){animation-delay:.08s}
html[data-ui=island] .main > :nth-child(4){animation-delay:.12s} html[data-ui=island] .main > :nth-child(5){animation-delay:.16s}
html[data-ui=island] .main > :nth-child(6){animation-delay:.2s} html[data-ui=island] .main > :nth-child(n+7){animation-delay:.24s}
@keyframes is-rise{from{opacity:0;transform:translateY(18px) scale(.985);filter:blur(4px)}}
@keyframes is-pop{from{opacity:0;transform:scale(.85)}}
@keyframes is-fade{from{opacity:0}}
@keyframes is-drop{from{opacity:0;transform:translateY(-14px) scale(.96)}}
::view-transition-old(root){animation:.22s ease-in both is-vt-out}
::view-transition-new(root){animation:.38s var(--is-ease,ease-out) both is-vt-in}
@keyframes is-vt-out{to{opacity:0;transform:scale(.99)}}
@keyframes is-vt-in{from{opacity:0;transform:translateY(10px)}}

/* ---- widgets (home) ---- */
.is-widgets{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-bottom:22px}
.is-w{grid-column:span 1;position:relative;overflow:hidden;isolation:isolate;min-height:168px;border-radius:26px;padding:16px 18px;display:flex;flex-direction:column;gap:6px;color:#fff;text-decoration:none!important;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 20px 40px -22px rgba(10,15,30,.55);
  transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0)) scale(var(--sc,1));transition:transform .5s var(--is-spring),box-shadow .3s;
  animation:is-widget .8s var(--is-spring) backwards}
.is-w:nth-child(2){animation-delay:.07s} .is-w:nth-child(3){animation-delay:.14s} .is-w:nth-child(4){animation-delay:.21s} .is-w:nth-child(5){animation-delay:.28s}
@keyframes is-widget{from{opacity:0;transform:perspective(800px) translateY(30px) scale(.85)}}
.is-w::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(300px circle at var(--mx,50%) var(--my,-40%),rgba(255,255,255,.22),transparent 60%);opacity:0;transition:opacity .3s}
.is-w:hover{--ty:-4px;--sc:1.015;box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 30px 50px -24px rgba(10,15,30,.6)}
.is-w:hover::after{opacity:1}
.is-w:active{--sc:.97}
.is-w-m{grid-column:span 2}
.is-w-col{grid-column:span 1;display:grid;gap:16px;min-width:0}
.is-w-col.two .is-w{min-height:0;padding:12px 16px}
.is-w-col.two .is-w-big b{font-size:32px}
.is-w-col.two .is-w-row{display:none}
.is-w-col.two .is-w-truck{font-size:22px;top:10px;left:10px}
.is-w-col .is-w:nth-child(2){animation-delay:.18s}
.is-w-t{font-size:12.5px;font-weight:800;opacity:.85;letter-spacing:.2px}
.is-w-time{background:linear-gradient(125deg,#0b1026,#1e3a8a 45%,#6d28d9 80%,#db2777);background-size:220% 220%;animation:is-widget .8s var(--is-spring) backwards,is-shift 14s ease-in-out infinite alternate;justify-content:center}
@keyframes is-shift{to{background-position:100% 100%}}
.is-w-time small{font-size:13px;opacity:.85;font-weight:700}
.is-w-clock{font-size:54px;font-weight:800;line-height:1;letter-spacing:1px;font-variant-numeric:tabular-nums;text-shadow:0 6px 24px rgba(0,0,0,.35)}
.is-w-time span{font-size:14px;font-weight:700;opacity:.92}
.is-w-time em{font-style:normal;font-size:11.5px;opacity:.6;margin-top:auto}
.is-w-sheen{position:absolute;inset:-40%;z-index:-1;background:conic-gradient(from 0deg,transparent,rgba(255,255,255,.10),transparent 35%);filter:blur(24px);animation:spin 18s linear infinite}
.is-w-fu{background:color-mix(in srgb,var(--surface) 92%,transparent);color:var(--ink);border:1px solid var(--is-glass-b);align-items:flex-start}
.is-ring{position:relative;align-self:center;width:84px;height:84px;display:grid;place-items:center;margin:2px 0}
.is-ring::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--c,var(--good)) calc(var(--p) * 1%),color-mix(in srgb,var(--ink) 10%,transparent) 0);
  -webkit-mask:radial-gradient(circle,transparent 31px,#000 32px);mask:radial-gradient(circle,transparent 31px,#000 32px);animation:is-ring 1.4s var(--is-ease) backwards .25s}
.is-ring b{font-size:19px;font-weight:800;font-variant-numeric:tabular-nums}
@keyframes is-ring{from{--p:0}}
.is-w-row{display:flex;gap:12px;font-size:12px;opacity:.9;margin-top:auto;flex-wrap:wrap}
.is-w-row b{font-size:15px;font-weight:800}
.is-w-row .bad b{color:var(--bad)}
.is-w-team{background:linear-gradient(150deg,#38bdf8,#2563eb 70%,#1e40af)}
.is-w-trip{background:linear-gradient(150deg,#fbbf24,#f97316 60%,#c2410c)}
.is-w-big{display:flex;flex-direction:column;margin-top:auto}
.is-w-big b{font-size:46px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.is-w-big small{font-size:13px;font-weight:700;opacity:.9}
.is-w-truck{position:absolute;top:12px;left:12px;font-size:30px;animation:is-truck 3.2s ease-in-out infinite;transform-origin:bottom}
@keyframes is-truck{0%,100%{transform:translateX(0) rotate(0)}40%{transform:translateX(-6px) rotate(-3deg)}60%{transform:translateX(4px) rotate(2deg)}}
.is-w-sc{background:color-mix(in srgb,var(--surface) 92%,transparent);color:var(--ink);border:1px solid var(--is-glass-b)}
.is-sc{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.is-sc a{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:16px;background:var(--g);color:#fff;font-weight:700;font-size:13px;text-decoration:none;
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 8px 16px -10px rgba(0,0,0,.5);transition:transform .4s var(--is-spring)}
.is-sc a:hover{transform:translateY(-3px) scale(1.03)}
.is-sc a svg{width:20px;height:20px;flex:none}
.is-sc a span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- the dock ---- */
.is-dock{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);z-index:50;display:flex;align-items:flex-end;gap:8px;padding:9px 12px;border-radius:26px;
  background:var(--is-glass);backdrop-filter:var(--is-blur);-webkit-backdrop-filter:var(--is-blur);border:1px solid var(--is-glass-b);box-shadow:var(--is-shadow);
  animation:is-dock-in .9s var(--is-spring) backwards .15s}
@keyframes is-dock-in{from{opacity:0;transform:translate(-50%,40px)}}
.is-app{position:relative;display:block;width:50px;height:50px;padding:0;border:0;background:none;cursor:pointer;text-decoration:none!important;
  transform-origin:bottom center;transform:translateY(calc((var(--s,1) - 1) * -14px)) scale(var(--s,1));transition:transform .2s var(--is-ease)}
.is-ico{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:15px;background:var(--g,linear-gradient(145deg,#64748b,#334155));color:#fff;overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 -2px 0 rgba(0,0,0,.12) inset,0 8px 16px -8px rgba(0,0,0,.45)}
.is-ico::after{content:"";position:absolute;inset:0 0 50%;background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0));pointer-events:none}
.is-ico svg{width:25px;height:25px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.2))}
.is-ico-pad{background:linear-gradient(145deg,color-mix(in srgb,var(--ink) 55%,#888),color-mix(in srgb,var(--ink) 80%,#000))}
.is-ico-pad svg{width:22px;height:22px}
.is-ico-me{background:linear-gradient(145deg,var(--accent),var(--info));font-weight:800;font-size:19px}
.is-app.on::before{content:"";position:absolute;bottom:-7px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--ink);opacity:.7}
.is-hot{position:absolute;top:-3px;left:-3px;width:12px;height:12px;border-radius:50%;background:var(--bad);border:2px solid var(--surface);animation:is-ping-r 2s infinite}
@keyframes is-ping-r{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--bad) 60%,transparent)}70%,100%{box-shadow:0 0 0 7px transparent}}
.is-tip{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translate(-50%,6px);white-space:nowrap;pointer-events:none;opacity:0;
  background:rgba(12,14,20,.88);color:#fff;font-size:12px;font-weight:700;padding:5px 11px;border-radius:9px;transition:opacity .15s,transform .25s var(--is-spring)}
.is-app:hover .is-tip,.is-app:focus-visible .is-tip{opacity:1;transform:translate(-50%,0)}
.is-app[aria-expanded=true] .is-tip{opacity:0}
.is-app:focus-visible{outline:none} .is-app:focus-visible .is-ico{box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--accent)}
.is-app.bounce{animation:is-bounce .7s var(--is-ease)}
@keyframes is-bounce{30%{translate:0 -22px}55%{translate:0 0}75%{translate:0 -8px}100%{translate:0 0}}
.is-dock-sep{align-self:stretch;width:1px;margin:4px 2px;background:var(--is-glass-b)}
/* a section's pages (like an iPhone folder) */
.is-stack{position:fixed;bottom:96px;left:50%;z-index:52;width:min(380px,calc(100vw - 24px));padding:14px;border-radius:28px;
  background:color-mix(in srgb,var(--surface) 86%,transparent);backdrop-filter:var(--is-blur);-webkit-backdrop-filter:var(--is-blur);border:1px solid var(--is-glass-b);box-shadow:0 30px 60px -20px rgba(10,15,30,.5);
  transform-origin:var(--ox,50%) 110%;animation:is-folder .45s var(--is-spring)}
@keyframes is-folder{from{opacity:0;transform:scale(.4) translateY(40px)}}
.is-stack-h{display:flex;align-items:baseline;justify-content:space-between;padding:0 6px 10px}
.is-stack-h b{font-size:16px;font-weight:800} .is-stack-h small{color:var(--muted);font-size:12px}
.is-stack-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 6px}
.is-stack-g a{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 2px;border-radius:14px;color:var(--ink);font-size:12px;font-weight:600;text-align:center;line-height:1.3;text-decoration:none;
  animation:is-tile .5s var(--is-spring) backwards;animation-delay:calc(var(--i,0) * 25ms)}
.is-stack-g a .is-ico{width:54px;height:54px;border-radius:16px;transition:transform .35s var(--is-spring)}
.is-stack-g a:hover .is-ico,.is-stack-g a:focus-visible .is-ico{transform:translateY(-3px) scale(1.08)}
.is-stack-g a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.is-stack-g a.on{color:var(--accent);font-weight:800}
.is-stack-g a .count,.is-tile .count{position:absolute;top:0;left:calc(50% - 34px);margin:0}
@keyframes is-tile{from{opacity:0;transform:scale(.6) translateY(10px)}}
/* launchpad: every page */
.is-pad{position:fixed;inset:0;z-index:90;overflow:auto;background:color-mix(in srgb,var(--page) 55%,transparent);backdrop-filter:blur(30px) saturate(1.7);-webkit-backdrop-filter:blur(30px) saturate(1.7);animation:is-fade .3s}
.is-pad-in{max-width:1100px;margin:0 auto;padding:36px 24px 120px;animation:is-zoom .5s var(--is-ease)}
@keyframes is-zoom{from{transform:scale(1.08);opacity:0}}
.is-pad-head{display:flex;gap:10px;align-items:center;margin-bottom:22px;position:sticky;top:0;z-index:2}
.is-pad-find{flex:1;max-width:520px;margin:0 auto;display:flex;align-items:center;gap:10px;padding:0 16px;border-radius:999px;background:var(--is-glass);border:1px solid var(--is-glass-b);box-shadow:var(--is-shadow)}
.is-pad-find svg{color:var(--muted)}
.is-pad-find input{border:0!important;background:transparent!important;box-shadow:none!important;padding:12px 0;font-size:15px}
.is-pad-empty{text-align:center;color:var(--muted)}
.is-pad-z{margin-bottom:22px}
.is-pad-z h3{font-size:12.5px;font-weight:800;color:var(--muted);margin:0 6px 10px;letter-spacing:.3px}
.is-pad-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:16px 8px}
.is-tile-f{display:contents}
.is-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 4px;border:0;background:none;cursor:pointer;border-radius:16px;color:var(--ink);font:inherit;font-size:12.5px;font-weight:600;text-align:center;line-height:1.35;text-decoration:none!important;
  animation:is-tile .55s var(--is-spring) backwards;animation-delay:min(calc(var(--i,0) * 14ms),.6s)}
.is-tile .is-ico{width:64px;height:64px;border-radius:19px;transition:transform .4s var(--is-spring),box-shadow .3s}
.is-tile .is-ico svg{width:30px;height:30px}
.is-tile:hover .is-ico,.is-tile:focus-visible .is-ico{transform:translateY(-4px) scale(1.08);box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 16px 26px -12px rgba(0,0,0,.55)}
.is-tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.is-tile.on span{color:var(--accent);font-weight:800}
body.is-locked{overflow:hidden}
/* phones: tab bar */
.is-tabs{display:none}

@media (max-width:900px){
  html[data-ui=island] .topbar.is-top{top:0;margin:0;border-radius:0 0 20px 20px;grid-template-columns:minmax(0,1fr) auto;padding:8px 10px;padding-top:calc(8px + env(safe-area-inset-top,0));border-top:0}
  .is-island{display:contents}
  .is-island .gsearch.open{background:var(--surface);border-radius:0 0 20px 20px}
  .is-island .gsearch input{color:var(--ink)}
  .is-island .gsearch input::placeholder{color:var(--muted)}
  .is-island .gsearch > svg{color:var(--muted)}
  .is-mark{width:36px;height:36px;border-radius:12px} .is-mark img{width:22px;height:22px}
  .is-acts{gap:6px}
  html[data-ui=island] .main{padding:16px 14px calc(110px + env(safe-area-inset-bottom,0))}
  .is-dock,.is-stack{display:none!important}
  .is-tabs{display:grid;grid-template-columns:repeat(5,1fr);align-items:end;position:fixed;bottom:calc(10px + env(safe-area-inset-bottom,0));left:10px;right:10px;z-index:50;padding:6px 4px;border-radius:24px;
    background:var(--is-glass);backdrop-filter:var(--is-blur);-webkit-backdrop-filter:var(--is-blur);border:1px solid var(--is-glass-b);box-shadow:var(--is-shadow);animation:is-dock-in-m .8s var(--is-spring) backwards}
  @keyframes is-dock-in-m{from{opacity:0;transform:translateY(40px)}}
  .is-tabs a{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;color:var(--muted);font-size:11px;font-weight:700;text-decoration:none;transition:transform .35s var(--is-spring)}
  .is-tabs a:active{transform:scale(.9)}
  .is-tabs a.on{color:var(--accent)}
  .is-tabs a.on svg{transform:translateY(-2px)}
  .is-tabs a .count{position:absolute;top:0;left:calc(50% - 22px);margin:0}
  .is-tabs-pad{display:flex;flex-direction:column;align-items:center;gap:3px;border:0;background:none;color:var(--ink);font:700 11px var(--font);padding:0}
  .is-tabs-pad span{display:flex;align-items:center;justify-content:center;width:52px;height:52px;margin-top:-22px;border-radius:18px;color:#fff;background:linear-gradient(145deg,var(--accent),var(--info));box-shadow:0 10px 20px -8px var(--accent);transition:transform .4s var(--is-spring)}
  .is-tabs-pad:active span{transform:scale(.9) rotate(-6deg)}
  .is-tabs-pad svg{width:24px;height:24px}
  .is-widgets{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .is-w-col{display:contents}
  .is-w-col.two .is-w{min-height:120px}
  .is-w{min-height:150px;border-radius:24px;padding:14px}
  .is-w-clock{font-size:44px}
  .is-w-big b{font-size:38px}
  .is-pad-in{padding:18px 14px 120px}
  .is-pad-g{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}
  .is-tile .is-ico{width:58px;height:58px}
}
@media (min-width:901px) and (max-width:1200px){ .is-widgets{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (prefers-reduced-motion:reduce){
  html[data-ui=island] *,html[data-ui=island] *::before,html[data-ui=island] *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .is-aura{display:none}
}
@media print{ .is-aura,.is-progress,.is-dock,.is-stack,.is-tabs,.is-pad,.is-widgets{display:none!important} html[data-ui=island] .main > *{animation:none!important} }
/* the layout picker preview */
.ui-prev-island{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 18%,var(--page)),color-mix(in srgb,var(--info) 14%,var(--page)))}
.ui-prev-island .a{top:5px;left:28%;right:28%;height:9px;border-radius:9px;background:#0b0c10}
.ui-prev-island .b{top:19px;right:7px;width:34%;height:22px;border-radius:7px;background:linear-gradient(135deg,#1e3a8a,#db2777)}
.ui-prev-island .c{top:19px;left:7px;width:46%;height:22px;border-radius:7px;background:var(--surface);border:1px solid var(--line)}
.ui-prev-island .d{bottom:4px;left:26%;right:26%;height:11px;border-radius:5px;background:color-mix(in srgb,var(--surface) 70%,transparent);border:1px solid var(--line-2);box-shadow:inset 6px 0 0 -3px #f97316,inset -6px 0 0 -3px #3b82f6}
/* لينك العميل: متابعة الطلبات */
.pst-tabs{display:flex;gap:6px;margin:4px 0 14px;flex-wrap:wrap}
.pst-tabs a{flex:1;min-width:140px;text-align:center;padding:10px 12px;border-radius:12px;border:1px solid var(--line-2);font-weight:700;color:var(--ink-2);text-decoration:none;background:var(--surface)}
.pst-tabs a.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.pst-ord{border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:14px;background:var(--surface)}
.pst-oh{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap}
.pst-oh small{display:block;color:var(--muted);font-size:12.5px}
.pst-prog{height:8px;border-radius:99px;background:var(--surface-3);overflow:hidden;margin:10px 0 4px}
.pst-prog i{display:block;height:100%;background:var(--good);border-radius:99px}
.pst-trips{display:grid;gap:6px;margin-top:10px}
.pst-trip{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:var(--surface-2)}
.pst-trip .trip-note{margin:0;white-space:nowrap}
@media print{.pst-tabs{display:none}}
/* صحة السيستم */
.hl-sum{padding:14px 18px;border-radius:var(--radius);margin-bottom:16px;font-size:16px}
.hl-sum.ok{background:var(--good-soft);color:var(--good)} .hl-sum.warn{background:var(--warn-soft);color:var(--warn)} .hl-sum.bad{background:var(--bad-soft);color:var(--bad)}
.hl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:16px;align-items:start}
.hl-row{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-top:1px solid var(--line)}
.hl-row:first-of-type{border-top:0}
.hl-row b{display:block;font-size:14px} .hl-row small{display:block;color:var(--muted);font-size:12.5px;line-height:1.6}
.hl-row small.hl-fix{color:var(--ink-2)}
.hl-ic{flex:none;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;color:#fff;background:var(--muted)}
.hl-row.ok .hl-ic{background:var(--good)} .hl-row.warn .hl-ic{background:var(--warn)} .hl-row.bad .hl-ic{background:var(--bad)} .hl-row.info .hl-ic{background:var(--info)}
.hl-log{max-height:260px;overflow:auto;font-size:11.5px;background:var(--surface-2);padding:10px;border-radius:10px;white-space:pre-wrap;word-break:break-all}
/* دليل الاستخدام */
.gd-toc{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.gd-toc a{padding:6px 12px;border-radius:99px;background:var(--surface);border:1px solid var(--line-2);font-weight:700;font-size:13px;text-decoration:none}
.gd-sec{margin-bottom:14px;scroll-margin-top:90px}
.gd-it{border-top:1px solid var(--line);padding:8px 0}
.gd-it:first-of-type{border-top:0}
.gd-it summary{cursor:pointer;font-weight:800;font-size:14.5px;padding:4px 0}
.gd-it ol{margin:6px 0 8px;padding-inline-start:22px;line-height:1.9}
/* 3.49 smart map layers */
.map-layers{margin-top:-6px;flex-wrap:wrap}
.map-layers .ml-k{font-size:12px;color:var(--muted);align-self:center;padding-inline-end:6px}
.ml-hint{margin:6px 0 10px;padding:8px 12px;border-radius:10px;background:color-mix(in srgb,var(--accent) 9%,transparent);font-size:13px;line-height:1.7}
.ml-list{margin:0;padding-inline-start:18px;display:grid;gap:8px}
.ml-list li{line-height:1.6;border-bottom:1px solid var(--line);padding-bottom:6px}
.ml-pill{font-size:11px;padding:1px 7px;border-radius:99px;background:var(--line);color:var(--muted)}
.ml-x{background:none;border:0;color:var(--bad);cursor:pointer;font-size:12px;padding:0 4px}
.ml-go{margin-top:12px;display:grid;gap:6px}
.ml-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
.ml-tables{margin-top:16px}
/* 3.50 ملف العميل الكامل */
.cf-nav{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;position:sticky;top:0;z-index:5;background:var(--page);padding:6px 0}
.cf-nav a{padding:6px 12px;border-radius:99px;background:var(--surface);border:1px solid var(--line);font-size:13px;text-decoration:none;color:var(--ink)}
.cf-nav a:hover{border-color:var(--accent);color:var(--accent)}
.cf-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:16px}
.cf-k{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:grid;gap:2px}
.cf-k small{color:var(--muted);font-size:12px}.cf-k b{font-size:22px;line-height:1.3}.cf-k span{font-size:12px;color:var(--muted)}
.cf-k.due b{color:var(--bad)}.cf-k.ok b{color:var(--good)}
.cf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;margin-bottom:16px}
.cf-dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0}.cf-dl dt{color:var(--muted);font-size:13px}.cf-dl dd{margin:0}
.cf-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}.cf-list li{border-bottom:1px solid var(--line);padding-bottom:8px;line-height:1.7}.cf-list li.done{opacity:.6}
section.card[id^=cf-]{margin-bottom:16px;scroll-margin-top:60px}
.cf-btn{white-space:nowrap}
@media print{.cf-nav,.no-print{display:none!important}.cf-k{break-inside:avoid}section.card[id^=cf-]{break-inside:auto}}
/* 3.51 الدخول بالبصمة */
.pk-or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;margin:14px 0 10px}.pk-or::before,.pk-or::after{content:"";flex:1;height:1px;background:var(--line)}
.pk-list{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:8px}
.pk-list li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px}
.pk-list li div{display:grid;gap:2px}
/* 3.52 مواقيت الصلاة */
.pray-btn{width:auto!important;padding:0 10px!important;gap:6px;font-size:16px;display:inline-flex;align-items:center}
.pray-btn .pray-next{font-size:12px;font-weight:700;white-space:nowrap}
@media (max-width:700px){.pray-btn .pray-next{display:none}}
.pray-pop{position:fixed;top:64px;inset-inline-end:16px;z-index:200;width:min(300px,calc(100vw - 32px));background:var(--surface);color:var(--ink);border:1px solid var(--line-2);border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.18);padding:14px}
.pray-pop .pp-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}.pray-pop .pp-h small{color:var(--muted)}
.pray-pop .pp-r{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:7px 10px;border-radius:10px}
.pray-pop .pp-r b{font-variant-numeric:tabular-nums}.pray-pop .pp-r.sr{opacity:.6}
.pray-pop .pp-r.on{background:var(--accent-soft);color:var(--accent);font-weight:700}.pray-pop .pp-r em{grid-column:1/-1;font-style:normal;font-size:12px}
.pray-pop .pp-d{margin:10px 0 6px;padding:10px;border-radius:10px;background:var(--surface-2);font-size:13.5px;line-height:1.8;text-align:center}
.pray-pop .pp-s{font-size:12px}
.pray-toast{position:fixed;bottom:22px;inset-inline-start:50%;transform:translateX(50%);z-index:210;display:flex;align-items:center;gap:10px;background:var(--surface);color:var(--ink);border:1px solid var(--line-2);border-inline-start:4px solid var(--good);border-radius:14px;padding:12px 14px;box-shadow:0 18px 50px rgba(0,0,0,.2);max-width:calc(100vw - 24px);animation:prayIn .35s ease}
[dir=rtl] .pray-toast{transform:translateX(50%)}
.pray-toast{width:max-content;min-width:min(320px,calc(100vw - 24px))}
@media (max-width:900px){.pray-toast{bottom:92px}}
.pray-toast span{font-size:22px}.pray-toast button{border:0;background:none;color:var(--muted);font-size:16px;cursor:pointer;padding:2px 6px}
.pray-toast .pt-stop{background:var(--good-soft);color:var(--good);border-radius:999px;font-size:13px;font-weight:700;padding:5px 12px;white-space:nowrap}
@keyframes prayIn{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
.pray-today{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-top:14px}
.pray-today span{display:grid;text-align:center;padding:8px 4px;border:1px solid var(--line);border-radius:10px}.pray-today span.sr{opacity:.6}
.pray-today small{color:var(--muted);font-size:12px}.pray-today b{font-variant-numeric:tabular-nums;font-size:14px}
@media (max-width:560px){.pray-today{grid-template-columns:repeat(3,1fr)}}
@media print{.pray-btn,.pray-pop,.pray-toast{display:none!important}}
/* 3.53 شؤون العاملين */
input:not([type]){width:100%;background:var(--surface);border:1px solid var(--line-2);border-radius:10px;padding:9px 11px;font-size:14px;min-width:0;color:var(--ink);font:inherit}
.hr-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.hr-row > input[type=text]{flex:1 1 140px;width:auto}.hr-row select{width:auto;flex:0 1 180px}.hr-row input[type=time],.hr-row input[type=date]{width:auto}
.hr-row.hr-new{border-bottom:0;background:var(--surface-2);border-radius:12px;padding:10px;margin-top:8px}
.hr-days{display:inline-flex;gap:4px;flex-wrap:wrap}.hr-days label{display:inline-flex;gap:3px;align-items:center;font-size:12px;padding:3px 7px;border:1px solid var(--line);border-radius:8px}
.hr-punch{text-align:center;padding:26px 16px}
.hr-clock{font-size:52px;font-weight:800;letter-spacing:2px;font-variant-numeric:tabular-nums;line-height:1.1;direction:ltr}
.hr-today{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:10px 0 18px;font-size:14px}
.hr-btn{font-size:20px;padding:16px 34px;border-radius:16px;min-width:min(320px,100%)}
.hr-btn.in{background:var(--good,#2b8a3e);border-color:var(--good,#2b8a3e)}.hr-btn.out{background:var(--warn,#e8590c);border-color:var(--warn,#e8590c)}
.hr-bal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.hr-bal b{font-size:20px}
.hr-who{font-size:12px;color:var(--muted);margin-top:3px}.hr-who b{color:var(--ink);font-weight:700}
.hr-sub{font-size:14px;margin:12px 0 6px;color:var(--muted)}.hr-sub:first-of-type{margin-top:0}
.hr-note{background:var(--warn-soft);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.7}
.fu-note{margin-top:6px;font-size:13px;color:var(--ink)}
.fu-last{margin-top:6px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:12.5px;line-height:1.7;color:var(--ink-2)}.fu-last b{color:var(--ink)}.fu-said{color:var(--ink);margin:2px 0}
table.hr-month tr.hr-absent td{background:color-mix(in srgb,var(--bad) 6%,transparent)}
table.hr-month tr.hr-off td,table.hr-month tr.hr-holiday td{color:var(--muted)}
/* 3.54 المرتبات */
.slip{max-width:820px}
.slip-h{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid var(--line-2);padding-bottom:10px;margin-bottom:12px}
.slip-who{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 16px;margin-bottom:14px}.slip-who div{display:grid}
.slip-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}.slip-cols h3{font-size:14px;margin:0 0 6px}
.slip-r{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed var(--line);font-size:13.5px}.slip-r b{font-variant-numeric:tabular-nums;white-space:nowrap}
.slip-r.tot{border-bottom:0;border-top:2px solid var(--line-2);font-weight:800}
.slip-net{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding:12px 16px;border-radius:12px;background:var(--good-soft);color:var(--good);font-size:18px}
@media (max-width:700px){.slip-who{grid-template-columns:1fr 1fr}.slip-cols{grid-template-columns:1fr}}
@media print{.slip{border:0;box-shadow:none;max-width:none}}