/* ROILEASS — dark by default (the owner's choice, 28/9): strong contrast, big clear text, big icons for the daily work.
   Light mode = «☀» in the top bar (remembered per device). Printing is always black on white. */
/* 30/9 — the colours of the NEW logo (ROILEASS · Business Finance Solutions): its teal #1A7F9C + deep navy.
   Three looks: غامق (default) · فاتح · كحلي وذهبي («✦» in the top bar, remembered per device). */
:root{
  --bg:#0b141a; --side:#08111a; --top:rgba(13,24,31,.86); --card:#122029; --soft:#172a34; --th:#1a2f3a; --zebra:#142530; --hover:#1c3441;
  --line:#243d4a; --line2:#325262; --text:#eef5f8; --muted:#a2b8c2; --head:#ffffff;
  --accent:#3fb4d1; --accent2:#1a7f9c; --accent-soft:rgba(63,180,209,.14); --btn:#1a7f9c; --btn-h:#2394b3; --btn-text:#ffffff;
  --ok:#46e0a0; --okbg:rgba(70,224,160,.13); --warn:#ffcb5c; --warnbg:rgba(255,203,92,.13); --err:#ff7373; --errbg:rgba(255,115,115,.13);
  --info:#7ab3ff; --infobg:rgba(122,179,255,.14); --purple:#c3a4ff; --purplebg:rgba(195,164,255,.14); --orange:#ffa36b; --orangebg:rgba(255,163,107,.14);
  --input:#0c1a21; --input-line:#36566a; --focus:rgba(63,180,209,.35);
  --radius:14px; --shadow:0 1px 2px rgba(0,0,0,.35),0 4px 14px rgba(0,0,0,.18);
  --shadow-2:0 2px 4px rgba(0,0,0,.3),0 12px 32px rgba(0,0,0,.28); --brand-ring:#1a7f9c; --gold:#d4af5a;
  color-scheme:dark;
}
:root[data-theme=light]{
  --bg:#eef3f6; --side:#0f2b3a; --top:rgba(255,255,255,.88); --card:#ffffff; --soft:#f4f8fa; --th:#e8f0f4; --zebra:#fafcfd; --hover:#edf6f9;
  --line:#d6e2e8; --line2:#c0d1d9; --text:#132029; --muted:#566b76; --head:#0e3446;
  --accent:#1a7f9c; --accent2:#115e75; --accent-soft:#e1f1f6; --btn:#1a7f9c; --btn-h:#115e75; --btn-text:#ffffff;
  --ok:#157a4c; --okbg:#e2f5ea; --warn:#9a6300; --warnbg:#fdf1d6; --err:#b42318; --errbg:#fde7e4; --info:#1d4ed8; --infobg:#e3ecfe;
  --purple:#6b35c9; --purplebg:#efe7fd; --orange:#b54708; --orangebg:#feeadb;
  --input:#ffffff; --input-line:#bccdd6; --focus:rgba(26,127,156,.25); --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);
  --shadow-2:0 2px 6px rgba(16,24,40,.06),0 14px 34px rgba(16,24,40,.10); --gold:#a8832e;
  color-scheme:light;
}
/* كحلي وذهبي — the formal office look: navy layers, gold for what matters, the logo's teal as the second colour */
:root[data-theme=navy]{
  --bg:#0d1626; --side:#09101c; --top:rgba(15,26,44,.88); --card:#14223a; --soft:#192a45; --th:#1c2f4d; --zebra:#172741; --hover:#1f3456;
  --line:#2a3d5e; --line2:#3a5179; --text:#eef2f8; --muted:#a9b6cc; --head:#ffffff;
  --accent:#d4af5a; --accent2:#9c7a2e; --accent-soft:rgba(212,175,90,.14); --btn:#b8913a; --btn-h:#d4af5a; --btn-text:#101624;
  --ok:#5fd8a4; --okbg:rgba(95,216,164,.13); --warn:#ffcb5c; --warnbg:rgba(255,203,92,.13); --err:#ff7b7b; --errbg:rgba(255,123,123,.13);
  --info:#8fb8ff; --infobg:rgba(143,184,255,.14); --purple:#c9adff; --purplebg:rgba(201,173,255,.14); --orange:#ffab78; --orangebg:rgba(255,171,120,.14);
  --input:#0f1b2e; --input-line:#3a5179; --focus:rgba(212,175,90,.35); --shadow:0 1px 2px rgba(0,0,0,.35),0 4px 14px rgba(0,0,0,.22);
  --shadow-2:0 2px 4px rgba(0,0,0,.3),0 12px 32px rgba(0,0,0,.32); --gold:#d4af5a;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:"Segoe UI",Tahoma,"Noto Naskh Arabic",Arial,sans-serif;background:var(--bg);color:var(--text);font-size:15px;line-height:1.6}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:23px;margin:0 0 12px;color:var(--head);font-weight:700}
h2{font-size:17.5px;margin:0 0 10px;color:var(--head)}
h3{font-size:15.5px;margin:0 0 8px;color:var(--accent)}
small,.muted{color:var(--muted)}
b,strong{font-weight:700}
::selection{background:var(--accent);color:#001014}

/* ---------- frame ---------- */
.layout{display:flex;min-height:100vh}
.side{width:236px;background:var(--side);color:#fff;flex-shrink:0;position:sticky;top:0;height:100vh;overflow:auto;padding:14px 10px;border-left:1px solid var(--line)}
/* the round logo on the navy menu — no white box around it any more (the logo has its own white disc) */
.side a.brand{display:flex;flex-direction:column;align-items:center;gap:6px;background:transparent;padding:6px 4px 12px;margin:0 2px 10px;
  border-bottom:1px solid rgba(255,255,255,.08);border-radius:0;box-shadow:none}
.side a.brand:hover{background:transparent}
.side .brand img{width:112px;height:112px;display:block;border-radius:50%;box-shadow:0 0 0 3px rgba(255,255,255,.07),0 8px 24px rgba(0,0,0,.35)}
.side .brand small{display:block;color:#b9d3dc;font-weight:700;font-size:12px;letter-spacing:.4px}
.side a{display:flex;align-items:center;gap:9px;color:#cfe6e8;padding:9px 11px;border-radius:9px;margin:2px 0;font-size:15px;font-weight:500}
.side a .i{font-size:19px;width:24px;text-align:center;flex-shrink:0}
.side a:hover{background:rgba(255,255,255,.08);color:#fff;text-decoration:none}
.side a.on{background:rgba(44,192,201,.18);color:#fff;box-shadow:inset -4px 0 0 var(--accent)}
.side .sec{color:#7fb7bd;font-size:12px;font-weight:700;letter-spacing:.3px;margin:16px 10px 4px}
.side .btn{display:block;text-align:center;margin:6px 4px 10px;font-size:15px;padding:9px}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{background:var(--top);border-bottom:1px solid var(--line);padding:9px 18px;display:flex;gap:12px;align-items:center;position:sticky;top:0;z-index:5}
.top form{flex:1;max-width:620px}
.top input[type=search]{width:100%;font-size:15.5px;padding:9px 12px}
.top .sp{flex:1}
.top .who{white-space:nowrap}
.bell{position:relative;font-size:21px}
.bell b{position:absolute;top:-7px;left:-10px;background:var(--err);color:#fff;border-radius:10px;font-size:11px;padding:0 6px}
.theme-btn{background:transparent;border:1px solid var(--line2);color:var(--text);border-radius:9px;padding:4px 9px;cursor:pointer;font-size:16px}
main{padding:18px;max-width:1560px;width:100%}

/* ---------- the daily-work icons (الأيقونات الدورية للتشغيل) ---------- */
.quick{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px;margin:0 0 16px}
.qa-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:104px;padding:12px 8px;
  border-radius:14px;background:var(--card);border:1px solid var(--line);color:var(--text);text-align:center;box-shadow:var(--shadow);transition:transform .08s,border-color .08s}
.qa-tile:hover{text-decoration:none;border-color:var(--accent);transform:translateY(-2px);background:var(--hover)}
.qa-tile .ico{font-size:34px;line-height:1;display:flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:16px;background:var(--accent-soft)}
.qa-tile .lbl{font-weight:700;font-size:14.5px;line-height:1.25}
.qa-tile .sub{font-size:11.5px;color:var(--muted);line-height:1.2}
.qa-tile .cnt{position:absolute;top:8px;left:8px;min-width:24px;height:24px;border-radius:12px;background:var(--err);color:#fff;font-weight:700;font-size:13px;
  display:flex;align-items:center;justify-content:center;padding:0 7px}
.qa-tile .cnt.info{background:var(--btn)}
.qa-tile.t-mission .ico{background:rgba(44,192,201,.18)}.qa-tile.t-wa .ico{background:rgba(70,224,160,.16)}.qa-tile.t-money .ico{background:rgba(255,203,92,.16)}
.qa-tile.t-legal .ico{background:rgba(195,164,255,.16)}.qa-tile.t-client .ico{background:rgba(122,179,255,.16)}.qa-tile.t-report .ico{background:rgba(255,163,107,.16)}
.qa-tile.t-renew .ico{background:rgba(255,115,115,.15)}
.quick-strip{display:flex;flex-wrap:wrap;gap:6px;padding:7px 18px;background:var(--top);border-bottom:1px solid var(--line);position:sticky;top:57px;z-index:4}
.quick-strip a{display:flex;align-items:center;gap:6px;white-space:nowrap;padding:6px 12px;border-radius:10px;background:var(--soft);border:1px solid var(--line);
  color:var(--text);font-weight:600;font-size:14px}
.quick-strip a .i{font-size:18px}
.quick-strip a:hover{border-color:var(--accent);text-decoration:none}
.quick-strip a b{background:var(--err);color:#fff;border-radius:9px;font-size:11.5px;padding:0 6px;margin-inline-start:2px}

/* ---------- blocks ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;margin-bottom:14px}
.grid{display:grid;gap:14px}
.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))}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin-bottom:14px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;box-shadow:var(--shadow);display:block;color:var(--text)}
.kpi:hover{border-color:var(--accent);text-decoration:none}
.kpi .n{font-size:30px;font-weight:800;color:var(--accent);line-height:1.2}
.kpi .l{color:var(--muted);font-size:13.5px}
.kpi.bad .n{color:var(--err)}.kpi.warn .n{color:var(--warn)}.kpi.good .n{color:var(--ok)}
table{width:100%;border-collapse:collapse;background:var(--card)}
th,td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:right;vertical-align:top}
th{background:var(--th);color:var(--head);font-weight:700;font-size:13.5px;white-space:nowrap}
tr:nth-child(even) td{background:var(--zebra)}
tr:hover td{background:var(--hover)}
.tw{overflow:auto;border:1px solid var(--line);border-radius:var(--radius)}
.badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:12.5px;font-weight:600;background:var(--soft);color:var(--text);border:1px solid var(--line);white-space:nowrap}
.b-green{background:var(--okbg);color:var(--ok);border-color:transparent}.b-red{background:var(--errbg);color:var(--err);border-color:transparent}
.b-amber{background:var(--warnbg);color:var(--warn);border-color:transparent}.b-blue{background:var(--infobg);color:var(--info);border-color:transparent}
.b-purple{background:var(--purplebg);color:var(--purple);border-color:transparent}.b-teal,.b-navy{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.b-orange{background:var(--orangebg);color:var(--orange);border-color:transparent}.b-gray{background:var(--soft);color:var(--muted)}
/* the client's file number — everywhere the same chip */
.cnum{display:inline-block;font-family:Consolas,"Segoe UI",monospace;font-weight:800;letter-spacing:.3px;background:var(--accent-soft);color:var(--accent);
  border:1px solid var(--accent2);border-radius:8px;padding:1px 8px;font-size:14px;direction:ltr;unicode-bidi:isolate}
.cnum:hover{text-decoration:none;background:var(--accent);color:#001014}
.cnum.big{font-size:19px;padding:2px 10px;vertical-align:middle}
.btn{display:inline-block;border:1px solid var(--btn);background:var(--btn);color:var(--btn-text);padding:8px 16px;border-radius:9px;cursor:pointer;font:inherit;font-size:14.5px;font-weight:600}
.btn:hover{background:var(--btn-h);border-color:var(--btn-h);text-decoration:none;color:var(--btn-text)}
.btn.sec{background:transparent;color:var(--accent);border-color:var(--accent2)}.btn.sec:hover{background:var(--accent-soft)}
.btn.sm{padding:4px 11px;font-size:13px}.btn.danger{background:#c43d3d;border-color:#c43d3d;color:#fff}
.btn.ok{background:#1f9d68;border-color:#1f9d68;color:#fff}.btn.ok:hover{background:#27b87a}
.btn.big{padding:13px 22px;font-size:17px;border-radius:12px}
input,select,textarea{font:inherit;font-size:15px;border:1px solid var(--input-line);border-radius:8px;padding:8px 10px;background:var(--input);color:var(--text);max-width:100%}
textarea{width:100%;min-height:70px}
input:focus,select:focus,textarea:focus{outline:3px solid var(--focus);border-color:var(--accent)}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent)}
label{display:block;font-size:13.5px;color:var(--muted);margin-bottom:4px;font-weight:600}
.form{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px 14px;align-items:end}
.form .full{grid-column:1/-1}
.form input:not([type=checkbox]),.form select{width:100%}
.inline{display:flex;gap:8px;flex-wrap:wrap;align-items:end}
.chk{display:flex;gap:7px;align-items:center;font-size:14px;color:var(--text)}
fieldset{border:1px dashed var(--line2);border-radius:10px;padding:10px 12px}
details.act{border:1px dashed var(--line2);border-radius:var(--radius);padding:10px 14px;margin-bottom:12px;background:var(--soft)}
details.act>summary{cursor:pointer;font-weight:700;color:var(--accent);list-style:none;font-size:15px}
details.act>summary::before{content:"＋ "}
details.act[open]>summary::before{content:"－ "}
details.act[open]>summary{margin-bottom:10px}
.flash{padding:10px 14px;border-radius:10px;margin-bottom:10px;background:var(--okbg);color:var(--ok);border:1px solid rgba(70,224,160,.35);font-weight:600}
.flash.err{background:var(--errbg);color:var(--err);border-color:rgba(255,115,115,.4)}
.flash.warn{background:var(--warnbg);color:var(--warn);border-color:rgba(255,203,92,.4)}
.tabs{display:flex;gap:3px;border-bottom:2px solid var(--line);margin:4px 0 14px;flex-wrap:wrap}
.tabs a{padding:9px 14px;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-2px;border-radius:9px 9px 0 0;font-weight:600}
.tabs a:hover{color:var(--text);text-decoration:none;background:var(--soft)}
.tabs a.on{color:var(--head);border-bottom-color:var(--accent);background:var(--card)}
.tabs a b{background:var(--soft);color:var(--text);border-radius:10px;padding:0 7px;font-size:11.5px;font-weight:700;margin-right:5px}
.head{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.head .title h1{margin:0}
.head .title .sub{color:var(--muted);margin-top:4px}
.qa{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:9px;margin-top:10px}
.qa div{background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:8px 11px}
.qa > div > span:first-child{display:block;font-size:12.5px;color:var(--muted);font-weight:600}
.qa .bad{background:var(--errbg);border-color:rgba(255,115,115,.4)}.qa .good{background:var(--okbg);border-color:rgba(70,224,160,.35)}
.tl{list-style:none;margin:0;padding:0}
.tl li{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.tl .ic{width:32px;height:32px;border-radius:50%;background:var(--soft);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:15px}
.tl .ic.legacy{background:rgba(255,203,92,.12)}.tl .ic.fin{background:var(--warnbg)}
.tl .body{flex:1;min-width:0}
.tl .meta{font-size:12.5px;color:var(--muted)}
.tl .det{white-space:pre-wrap;font-size:14px;color:var(--text);opacity:.9;margin-top:2px;word-break:break-word}
.pill-row{display:flex;gap:6px;flex-wrap:wrap}
.doc-grp{margin-bottom:12px}
.pipeline{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.pipe{border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;background:var(--card)}
.pipe .h{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.thumbs{display:flex;gap:8px;flex-wrap:wrap}
.thumbs a{display:block;border:1px solid var(--line);border-radius:8px;padding:4px;font-size:12.5px;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thumbs img{width:150px;height:100px;object-fit:cover;border-radius:5px;display:block}
.boxed{background:var(--soft);border-radius:9px;padding:9px 11px;margin:6px 0;font-size:14px;border:1px solid var(--line)}
.bar{background:var(--line);height:9px;border-radius:5px}.bar>i{display:block;height:100%;border-radius:5px;background:var(--accent)}
.login{max-width:400px;margin:9vh auto;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:var(--shadow)}
.login h1{color:var(--head);text-align:center}
.login .login-logo{display:block;width:170px;height:170px;margin:0 auto;border-radius:50%;box-shadow:0 10px 30px rgba(0,0,0,.28)}
.login input{width:100%;margin-bottom:12px;font-size:16px;padding:10px 12px}
.login input[type=checkbox]{width:18px;height:18px;margin:0;padding:0}
.login .btn{width:100%;padding:11px;font-size:16px}
.pw-box{position:relative}.pw-box input{padding-left:46px}
.pw-box .eye{position:absolute;left:6px;top:6px;border:0;background:transparent;font-size:20px;cursor:pointer;color:var(--text);padding:2px 6px}
.caps{color:var(--warn);font-weight:700;font-size:13.5px;margin:-6px 0 8px}
/* ---- invoice: same layout as the company's printed invoices (always on white paper) ---- */
.inv-wrap{overflow-x:auto}
.inv-sheet{position:relative;width:190mm;min-height:270mm;margin:0 auto;background:#fff;color:#111;padding:12mm 12mm 8mm;box-shadow:var(--shadow);
  font-family:Arial,"Segoe UI",Tahoma,sans-serif;-webkit-print-color-adjust:exact;print-color-adjust:exact;display:flex;flex-direction:column}
.inv-sheet svg{display:block;width:100%;height:100%}
.inv-wm{position:absolute;left:50%;top:44%;width:125mm;height:105mm;transform:translate(-50%,-50%);fill:#9fd0e3;opacity:.32;pointer-events:none}
.inv-logo{display:flex;align-items:center;gap:6px;position:relative}
.inv-logo .ic{width:46px;height:40px;fill:#1f4e6e;flex-shrink:0}
.inv-logo b{display:block;font:700 34px/1 "Arial Black",Arial,sans-serif;color:#1f4e6e;letter-spacing:.5px}
.inv-logo i{display:block;font:700 14px/1.4 Arial,sans-serif;color:#c55a11;font-style:normal}
.inv-logo.sm .ic{width:24px;height:21px}.inv-logo.sm b{display:inline;font-size:13px}.inv-logo.sm i{display:inline;font-size:11px}
.inv-title{display:flex;align-items:baseline;justify-content:center;position:relative;margin-top:8px}
.inv-title .t{font-size:19px;font-weight:600}.inv-title .d{position:absolute;right:0;font-size:12px;font-weight:600}
.inv-no{text-align:center;font-size:19px;font-weight:600;margin:6px 0 10px;position:relative}
.inv-void{color:#c00;border:2px solid #c00;padding:0 8px;font-size:15px;margin-inline-start:8px}
.inv-ref-stamp{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%) rotate(-24deg);font:800 44px/1.2 Arial,sans-serif;color:rgba(200,0,0,.22);
  border:6px solid rgba(200,0,0,.22);padding:6px 20px;border-radius:12px;white-space:nowrap;pointer-events:none;z-index:2}
.inv-to{text-align:right;font-size:16px;font-weight:600;margin:4px 0;position:relative}
.inv-sp{text-align:center;font-size:11px;margin:10px 0 4px;position:relative}
.inv-t{width:100%;border-collapse:collapse;background:transparent;position:relative;font-size:12.5px;color:#111}
.inv-t th,.inv-t td{border:1px solid #333;padding:4px 6px;text-align:center;vertical-align:middle;background:transparent!important;color:#111}
.inv-t th{font:700 15px Georgia,"Times New Roman",serif;text-decoration:underline;white-space:normal}
.inv-t th:last-child{font-family:"Courier New",monospace}
.inv-t td.p{font-weight:700;white-space:nowrap}.inv-t td.s{line-height:1.6}.inv-t td.dx{font-weight:600}
.inv-t td.s .svc{font-weight:700;margin-bottom:2px}.inv-t td.s .svc~div{font-size:.93em}
.inv-t tr.gap td{height:14px;padding:0}
.inv-t td.red{color:#e03a2f}.inv-t td.big{font-size:15px}.inv-t td.lbl{font-weight:600}.inv-t td.lbl.due{color:#a0452d;font-size:15px}
.inv-bank{margin-top:8px;font-size:12px;position:relative}
.inv-sign{display:flex;justify-content:space-between;font-weight:700;font-size:12px;margin:26px 10mm 0;position:relative}
.inv-foot{margin-top:auto;padding-top:14mm;font-size:11px;font-weight:600;line-height:1.5;position:relative}
.inv-foot .web{color:#2b6cb0}
.print-page{padding:12px}.print-bar{max-width:190mm;margin:0 auto 10px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
/* printable reports (A4, on white) */
.report{background:#fff;color:#111;max-width:277mm;margin:0 auto;padding:10mm;box-shadow:var(--shadow);font-size:12.5px}
.report h1{color:#0b3d43;font-size:20px;margin:0}.report h2{color:#0b3d43;font-size:15px;margin:14px 0 6px}
.report .rhead{display:flex;justify-content:space-between;align-items:center;border-bottom:3px solid #187880;padding-bottom:8px;margin-bottom:10px}
.report .rhead img{height:44px}
.report table{background:#fff;font-size:12px}.report th{background:#e8f1f2!important;color:#0b3d43}.report td{background:#fff!important;color:#111}
.report th,.report td{border:1px solid #9fb3b7;padding:4px 6px}
.report .muted,.report small{color:#555}
.report .sum{display:flex;gap:14px;flex-wrap:wrap;margin:8px 0}.report .sum div{border:1px solid #9fb3b7;border-radius:6px;padding:4px 10px}
.report .sum b{font-size:16px;color:#0b3d43}
.right{text-align:left}
.nowrap{white-space:nowrap}
.pre{white-space:pre-wrap}
.row-late td{background:var(--errbg)!important}
.row-ref td{opacity:.62}
.empty{color:var(--muted);padding:16px;text-align:center}
.pager{display:flex;gap:8px;align-items:center;margin-top:10px}
/* home page: things to act on, one per line */
.kpis-sm{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.kpis-sm .kpi .n{font-size:26px}
.todo{display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;color:var(--text);background:var(--soft)}
.todo:hover{text-decoration:none;border-color:var(--accent)}
.todo.bad{border-right:6px solid var(--err);background:var(--errbg)}.todo.warn{border-right:6px solid var(--warn);background:var(--warnbg)}
.todo .ic{font-size:21px}.todo b{font-size:22px;min-width:38px;text-align:center}.todo .t{flex:1;font-weight:600}.todo .go{color:var(--accent);font-size:13.5px;white-space:nowrap;font-weight:700}
.line{padding:7px 0;border-bottom:1px dashed var(--line)}.line:last-child{border-bottom:0}
.help-step{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.help-step .num{flex:0 0 36px;height:36px;border-radius:50%;background:var(--btn);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800}
.help-step h3{margin:0 0 4px;font-size:16px}.help-step ol{margin:4px 0 0;padding-right:18px}
.side details.more{margin-top:10px}.side details.more summary{cursor:pointer;color:#a8cfd3;font-size:13px;padding:7px 11px;list-style:none;font-weight:600}
.side details.more summary::before{content:"▾ "}
/* الموظفين: one line per employee */
.staff-row,.staff-head{display:grid;grid-template-columns:1.4fr 1.1fr .9fr .9fr 1.25fr auto auto auto auto auto;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.staff-head{font-size:12.5px;color:var(--muted);padding-top:0}
.staff-row input:not([type=checkbox]),.staff-row select{width:100%}
.pw{display:flex;gap:4px;align-items:center}.pw input{flex:1;min-width:0;font-family:Consolas,monospace}
/* field missions (phone) */
.price-tag{background:var(--warnbg);color:var(--warn);border:1px solid rgba(255,203,92,.4);border-radius:12px;padding:6px 12px;font-weight:800;font-size:18px;text-align:center}
.price-tag small{display:block;font-size:11.5px;font-weight:600;color:var(--muted)}
.mission-card h2 a{color:var(--head)}
.mission-card .btn.big{min-width:150px}
/* HR tree */
.tree{list-style:none;margin:0;padding:0}
.tree>li{margin-bottom:14px}
.tree .dept{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:800;color:var(--head);padding:8px 12px;background:var(--soft);border:1px solid var(--line);border-radius:12px}
.tree .people{list-style:none;margin:6px 26px 0 0;padding:0 14px 0 0;border-right:2px dashed var(--line2)}
.tree .people li{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:7px 10px;border-bottom:1px dashed var(--line)}
.tree .people li.head-of{background:var(--accent-soft);border-radius:10px;border-bottom:0;margin-bottom:4px}
.tree .people .nm{font-weight:700;min-width:170px}
.tree .miss{color:var(--warn);font-size:12.5px}
/* toasts (arrivals / finished missions) */
.toasts{position:fixed;bottom:16px;left:16px;z-index:50;display:flex;flex-direction:column;gap:8px;max-width:380px}
.toast{background:var(--card);border:1px solid var(--accent);border-radius:12px;padding:11px 14px;box-shadow:0 8px 30px rgba(0,0,0,.45);font-weight:600}
.toast a{display:block;margin-top:4px;font-size:13.5px}
/* batch 3 — the credit chain (الفحص الأول ← الميزانيات ← الموقف الضريبي ← الأوراق) and the system's decision */
.chain{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:6px 0 12px}
.chain .st{position:relative;border:1px solid var(--line);border-top-width:4px;border-radius:12px;padding:10px 12px;background:var(--soft)}
.chain .st .n{font-weight:700;color:var(--head);font-size:14.5px}
.chain .st .tx{font-size:13.5px;margin-top:4px}
.chain .st .hn{font-size:12px;color:var(--muted);margin-top:4px}
.chain .st.done{border-top-color:var(--ok)}.chain .st.done .n::after{content:" ✅"}
.chain .st.wait{border-top-color:var(--warn)}.chain .st.wait .n::after{content:" ⏳"}
.chain .st.stop{border-top-color:var(--err);background:var(--errbg)}.chain .st.stop .n::after{content:" ⛔"}
.decision{border-radius:12px;padding:12px 14px;font-weight:700;font-size:16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.decision small{font-weight:500;font-size:13px}
.decision.ready{background:var(--okbg);color:var(--ok);border:1px solid var(--ok)}
.decision.wait{background:var(--warnbg);color:var(--warn);border:1px solid var(--warn)}
.decision.stop{background:var(--errbg);color:var(--err);border:1px solid var(--err)}
.dots{white-space:nowrap;font-size:17px;letter-spacing:2px}
.inv-table td{vertical-align:middle}.inv-table .opts{display:flex;gap:4px;flex-wrap:wrap}
.inv-table .opts label{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line2);border-radius:9px;padding:4px 10px;cursor:pointer;font-size:13.5px;margin:0}
.inv-table .opts input{margin:0}
.inv-table .opts label:has(input:checked){border-color:var(--accent);background:var(--accent-soft);font-weight:700}
.inv-table .opts label.o-miss:has(input:checked){border-color:var(--err);background:var(--errbg)}
/* company paper forms (تقرير زيارة العميل · Action plan · Daily Report) — an A4 sheet, black on white, like the Word originals */
.sheet{background:#fff;color:#000;width:210mm;max-width:100%;min-height:270mm;margin:14px auto;padding:14mm 14mm 12mm;box-shadow:0 2px 14px rgba(0,0,0,.25);
  font-size:14.5px;line-height:1.75;border-radius:2px}
.sheet h1,.sheet h2,.sheet h3{color:#0b3d43}.sheet .logo{height:46px;display:block;margin:0 auto 6px}
.sheet .line{border-bottom:1px dotted #555;display:inline-block;min-width:220px;padding:0 6px;font-weight:700}
.sheet .q{display:grid;grid-template-columns:1fr 70px 70px;gap:8px;padding:5px 0;border-bottom:1px solid #ddd;align-items:center}
.sheet .q .o{text-align:center}.sheet .q .o b{border:1.5px solid #000;border-radius:4px;padding:0 8px}
.sheet .grp{border-top:2px solid #0b3d43;margin-top:10px;padding-top:4px}
.sheet table{width:100%;border-collapse:collapse;font-size:13px}.sheet th,.sheet td{border:1px solid #444;padding:5px 6px;vertical-align:top;color:#000}
.sheet th{background:#e8f0f1}.sheet .sign{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}
.sheet .muted,.sheet small{color:#444}
.sheet.wide{width:287mm;min-height:190mm}
.analysis-form .grp{border-top:1px solid var(--line);margin-top:10px;padding-top:6px}.analysis-form h3{margin:4px 0}
.yn{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:5px 0;border-bottom:1px dashed var(--line)}
.yn>span{flex:1;min-width:230px}.yn label{display:inline-flex;gap:4px;align-items:center;margin:0;cursor:pointer}.yn input[inputmode]{width:90px}
.needs{display:flex;flex-direction:column;gap:6px}.need{border-radius:10px;padding:7px 11px;border:1px solid var(--line);background:var(--soft)}
.need.stop{border-color:var(--err);background:var(--errbg)}.need.review{border-color:var(--warn);background:var(--warnbg)}
.need.legal{border-color:var(--purple);background:var(--purplebg)}.need.paper{border-color:var(--info);background:var(--infobg)}
.menu-item{display:grid;grid-template-columns:1fr auto;gap:10px;padding:10px 4px;border-bottom:1px dashed var(--line)}
.menu-item .pr{text-align:left;white-space:nowrap}.menu-item .avg{font-size:17px;font-weight:700;color:var(--ok)}
@media (max-width:900px){
  .chain{grid-template-columns:1fr 1fr}
  body{font-size:15.5px}
  .staff-head{display:none}.staff-row{grid-template-columns:1fr 1fr;padding:10px 0}
  .side details.more{display:inline-block;margin:0}.side details.more[open]{display:block;width:100%}  /* phone (field staff): the menu becomes a scrollable bar on top */
  .layout{flex-direction:column}
  .side{width:100%;height:auto;position:static;display:flex;align-items:center;gap:2px;overflow-x:auto;white-space:nowrap;padding:6px;border-left:0}
  .side a{display:inline-flex;padding:7px 10px}
  .side a.brand{padding:4px 6px;margin:0 0 0 6px;flex-shrink:0}.side .brand img{width:110px}.side .brand small,.side .sec{display:none}
  .side .btn{display:inline-block;margin:0 4px}
  .top{flex-wrap:wrap;position:static}.top form{max-width:none;flex-basis:100%}
  .quick-strip{position:static;flex-wrap:nowrap;overflow-x:auto}
  .quick{grid-template-columns:repeat(3,minmax(0,1fr))}.qa-tile{min-height:96px}.qa-tile .ico{font-size:30px;width:52px;height:52px}
  .g2,.g3,.g4{grid-template-columns:1fr}main{padding:10px}}
@media print{
  :root{--bg:#fff;--card:#fff;--soft:#fff;--th:#eef3f4;--zebra:#fff;--hover:#fff;--line:#999;--text:#000;--muted:#444;--head:#0b3d43;--accent:#0b4f57}
  .side,.top,.quick,.quick-strip,.noprint,.toasts{display:none!important}main{padding:0;max-width:none}.card{box-shadow:none;border:0}
  body,.print-page{background:#fff;color:#000;padding:0}.inv-sheet{box-shadow:none;width:auto;min-height:275mm;padding:4mm 6mm}
  .sheet{box-shadow:none;margin:0;width:auto;min-height:0;padding:0}.sheet+.sheet{page-break-before:always}
  .report{box-shadow:none;max-width:none;padding:0}
  a{color:#000}.badge{border:1px solid #999;background:#fff!important;color:#000!important}}

/* ==================================================================
   Polish layer — 29/9 (حسن الشكل لأعلى جودة): خط أنعم، عمق وحركة هادئة،
   فوكس واضح للكيبورد، جداول برؤوس ثابتة، سكرول بار مرتب. فوق كل اللي قبلها،
   وتشتغل مع الوضعين الغامق والفاتح — بدون تغيير أي ألوان أساسية.
   ================================================================== */
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1{letter-spacing:.2px}
a{text-underline-offset:3px}
.card,.kpi,.pipe,.qa-tile,.login,.decision,.chain .st,.todo,.pipe{transition:border-color .15s ease,box-shadow .18s ease,background-color .15s ease,transform .15s ease}
.card:hover{border-color:var(--line2)}
/* لوحة مفاتيح واضحة على كل زر ورابط */
a:focus-visible,summary:focus-visible,.btn:focus-visible,button:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:8px}
/* الشريط الجانبي والعلوي: عمق هادي */
.side{border-left:0;box-shadow:8px 0 24px rgba(0,0,0,.22)}
.side a{transition:background-color .12s ease,color .12s ease}
.side a.on{box-shadow:inset -4px 0 0 var(--accent),inset 0 0 0 1px rgba(44,192,201,.18)}
.side .sec{letter-spacing:.8px}
.top{box-shadow:0 1px 0 rgba(255,255,255,.04),0 6px 18px rgba(0,0,0,.16)}
/* الجداول: رأس ثابت جوه الحاوية الملفوفة + انتقال هادي للصفوف */
.tw th{position:sticky;top:0;z-index:1}
th{letter-spacing:.2px}
td{transition:background-color .1s ease}
/* الأزرار: نعومة وضغط محسوس */
.btn{transition:background-color .12s ease,transform .08s ease,box-shadow .12s ease;border-radius:10px}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{box-shadow:0 0 0 3px var(--focus)}
.btn.big{box-shadow:0 6px 18px rgba(21,144,154,.22)}
.btn.danger:focus-visible,.btn.ok:focus-visible{box-shadow:0 0 0 3px rgba(255,255,255,.25)}
/* البادجات والأرقام */
.badge{border-radius:999px;padding:2.5px 10px}
.kpi:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.24)}
.kpi .n{letter-spacing:.3px}
/* الحقول */
input,select,textarea{transition:border-color .12s ease,box-shadow .12s ease;border-radius:9px}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px var(--focus)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.7}
/* تابات وتايم لاين */
.tabs a{transition:color .12s ease,background-color .12s ease}
.tl .ic{box-shadow:inset 0 0 0 1px var(--line)}
/* سكرول بار مرتب (ويندوز) */
*{scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:8px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background-color:var(--accent2)}
::-webkit-scrollbar-track{background:transparent}
/* لمسات أخيرة */
.empty{font-weight:600}
.price-tag{box-shadow:0 4px 14px rgba(255,203,92,.12)}
.qa-tile:active{transform:translateY(0) scale(.99)}
.qa-tile .ico{box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.login{border-radius:20px}
.inv-sheet{border-radius:4px}

/* ---- طبقات النوافذ وأداء الرسم (الإنتاج 29/9) ----
   ترتيب واضح للطبقات: رأس الصفحة فوق الشريط السريع فوق الجداول — والتنبيهات الطايرة فوق الكل. */
.top{z-index:7}
.quick-strip{z-index:6}
.toasts{z-index:100}
.tw th{z-index:2}
/* أداء: الحركة هادئة أصلاً — ومن بيطلب من الويندوز تقليل الحركة نشيلها عنه تمامًا */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}
/* أداء الرسم على الجداول الطويلة والشبكات الكبيرة */
.tw{contain:paint}
.quick{contain:layout paint}

/* ---- الالتقاط الذكي (29/9): الصق أي بيانات → كل حاجة في مكانها + «متسجل قبل كده؟» ---- */
.capture{border:1px dashed var(--accent);background:linear-gradient(180deg,var(--accent-soft),transparent 70%)}
.capture label{display:block;margin-bottom:6px}
.capture textarea{width:100%;min-height:74px;font-size:15px}
.cap-bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:8px}
.cap-hits{border-color:var(--warn);background:var(--warnbg);padding:12px 16px}
.cap-hits ul{margin:6px 0 0;padding:0 18px 0 0}
.cap-hits li{margin:4px 0}
.cap-hits .tag{display:inline-block;font-size:12px;font-weight:700;border-radius:999px;padding:1px 9px;background:var(--soft);border:1px solid var(--line2)}
.cap-hits .s-sign .tag{background:var(--errbg);color:var(--err);border-color:var(--err)}
.cap-hits .s-strong .tag{background:var(--warnbg);color:var(--warn);border-color:var(--warn)}
.cap-hits .s-medium .tag{background:var(--infobg);color:var(--info)}
.form .hint{display:block;font-size:12.5px;margin-top:3px;min-height:0}
.form .hint.ok{color:var(--ok)}.form .hint.bad{color:var(--err);font-weight:600}
.form input.filled{border-color:var(--ok);box-shadow:0 0 0 2px var(--okbg)}
.ctitle{font-size:.8em;font-weight:600;color:var(--muted)}
/* ---- HR: المرتبات · السلف · الحضور · الأداء (30/9) ---- */
.hr-nav{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 14px}
.hr-nav a{padding:7px 13px;border-radius:10px;background:var(--soft);border:1px solid var(--line);color:var(--text);font-weight:600}
.hr-nav a.on{background:var(--accent-soft);border-color:var(--accent);color:var(--head)}
.hr-nav a:hover{text-decoration:none;border-color:var(--accent)}
.hr-nav select{width:auto}
.hr-status{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin:0 0 12px;padding:9px 14px;
  border-radius:12px;border:1px solid var(--line);background:var(--soft);font-weight:600}
.hr-status.off{border-color:var(--warn)}
/* ---- دورة حياة الملف (30/9) ---- */
.lifecycle{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin:10px 0 0}
.lifecycle .lc{white-space:nowrap;font-size:11.5px;font-weight:600;color:var(--muted);background:var(--soft);border:1px solid var(--line);
  border-radius:999px;padding:3px 9px}
.lifecycle .lc.done{color:var(--text);border-color:var(--ok)}
.lifecycle .lc.done::before{content:"✓ ";color:var(--ok);font-weight:800}
.lifecycle .lc.now{color:#fff;background:var(--accent);border-color:var(--accent);font-weight:800}
.lifecycle .lc.end{background:var(--muted);border-color:var(--muted)}
.pay-t td,.pay-t th{white-space:nowrap}
.pay-t tr.tot td{font-weight:700;background:var(--th)}
.pay-edit{padding:4px 6px}
.pay-row{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:end}
.pay-row .n{color:var(--muted);min-width:22px}.pay-row .nm{font-weight:700;min-width:130px}
.pay-row label{display:flex;flex-direction:column;font-size:12px;color:var(--muted);margin:0}
.pay-row input{width:84px;padding:5px 7px}
.bad{color:var(--err);font-weight:700}
.adv-months{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.adv-months a{display:flex;flex-direction:column;align-items:center;padding:5px 9px;border-radius:9px;background:var(--soft);border:1px solid var(--line);color:var(--text)}
.adv-months a small{color:var(--muted);font-size:11px}
.att-wrap{max-height:620px;overflow:auto}
.att td,.att th{padding:4px 5px;text-align:center;font-size:12.5px;white-space:nowrap}
.att .nm{text-align:right;position:sticky;right:0;background:var(--card);z-index:1;min-width:130px}
.att .st-ok{color:var(--text)}.att .st-mis{background:var(--infobg);color:var(--info);font-weight:700}
.att .st-abs{background:var(--errbg);color:var(--err);font-weight:700}.att .st-lv{background:var(--okbg);color:var(--ok);font-weight:700}
.att .st-perm{background:var(--warnbg);color:var(--warn)}.att .st-uni{background:var(--purplebg);color:var(--purple)}.att .st-oth{color:var(--muted)}
.perf td,.perf th{white-space:nowrap}
.eval-row{border-top:1px solid var(--line);padding:8px 0}
/* متصفح قديم (إنترنت إكسبلورر): رسالة واضحة بدل صفحة مكسورة */
.oldbrowser{display:none;background:#b42318;color:#fff;padding:12px 16px;font-weight:700;text-align:center}

/* ==================================================================
   Design 30/9 — «مكتبي فخم وطبقات واضحة»: the new logo's colours, three looks, clear depth.
   Layer 1 = the departments (big squares) · layer 2 = what waits for you · layer 3 = the details.
   ================================================================== */
/* frame: the top bar floats over the page (glass), the menu is the darkest layer */
.top{background:var(--top);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px)}
.side{background:linear-gradient(180deg,var(--side),color-mix(in srgb,var(--side) 82%,var(--accent2)))}
.side a.on{background:rgba(255,255,255,.11);color:#fff;box-shadow:inset -4px 0 0 var(--accent)}   /* the menu is dark in all three looks */
:root[data-theme=light] .side a.on{box-shadow:inset -4px 0 0 #3fb4d1}
.side .sec{color:color-mix(in srgb,var(--accent) 55%,#cfe2e8);opacity:.9}
.theme-btn{min-width:38px;font-weight:700}
/* cards: a thin top light + a deeper shadow for the ones you act on */
.card{border-radius:var(--radius);background:linear-gradient(180deg,color-mix(in srgb,var(--card) 96%,#fff 4%),var(--card))}
.card>h2:first-child,.card>.head h2{display:flex;align-items:center;gap:8px}
.card>h2:first-child::before{content:"";width:4px;height:18px;border-radius:3px;background:var(--accent);flex-shrink:0}
main>.head h1{font-size:25px}
/* the page title band */
main>.head{padding-bottom:10px;margin-bottom:14px;border-bottom:1px solid var(--line)}
/* buttons in the gold look read dark text */
:root[data-theme=navy] .btn:not(.sec){color:var(--btn-text)}
:root[data-theme=navy] .side a.on{color:var(--gold)}

/* ---- layer 1: the departments (المربعات الكبيرة) ---- */
.depts{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin:4px 0 18px}
.dept{position:relative;display:flex;flex-direction:column;gap:10px;padding:16px 16px 14px;border-radius:18px;background:var(--card);
  border:1px solid var(--line);box-shadow:var(--shadow);color:var(--text);overflow:hidden;transition:transform .15s ease,box-shadow .18s ease,border-color .15s}
.dept::after{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--dc,var(--accent))}
.dept:hover{text-decoration:none;transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:var(--dc,var(--accent))}
.dept .top-row{display:flex;align-items:center;gap:12px}
.dept .ic{width:54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:28px;
  background:color-mix(in srgb,var(--dc,var(--accent)) 18%,transparent);flex-shrink:0}
.dept .nm{font-size:18px;font-weight:800;color:var(--head);line-height:1.25}
.dept .job{font-size:12.5px;color:var(--muted);line-height:1.4}
.dept .nums{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.dept .nums div{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:6px 4px;text-align:center}
.dept .nums b{display:block;font-size:22px;line-height:1.2;color:var(--head)}
.dept .nums span{display:block;font-size:11.5px;color:var(--muted);line-height:1.2}
.dept .nums .late b{color:var(--err)}.dept .nums .late{border-color:color-mix(in srgb,var(--err) 40%,var(--line))}
.dept .nums .zero b{color:var(--muted);opacity:.7}
.dept.d-sales{--dc:#4f9dff}.dept.d-credit{--dc:#1a9fbf}.dept.d-legal{--dc:#a47cff}.dept.d-control{--dc:#e0a93b}.dept.d-mgmt{--dc:#ef6f6f}.dept.d-hr{--dc:#3fc38a}

/* ---- «الملف واقف فين» (tracker) ---- */
.stages{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-bottom:14px}
.stg{display:block;border:1px solid var(--line);border-radius:14px;padding:9px 11px;background:var(--card);color:var(--text)}
.stg:hover{text-decoration:none;border-color:var(--accent)}
.stg .n{font-size:24px;font-weight:800;color:var(--head);line-height:1.1}
.stg .t{font-size:13px;font-weight:700}
.stg .m{font-size:11.5px;color:var(--muted)}
.stg.hot{border-color:color-mix(in srgb,var(--err) 55%,var(--line));background:linear-gradient(180deg,var(--errbg),var(--card))}
.stg.hot .n{color:var(--err)}
.stg.on{outline:2px solid var(--accent)}
.late-days{font-weight:800;color:var(--err);white-space:nowrap}
.ok-days{color:var(--ok);white-space:nowrap}
.why{display:flex;flex-wrap:wrap;gap:4px}
.why span{font-size:12px;border-radius:999px;padding:1px 8px;background:var(--soft);border:1px solid var(--line);white-space:nowrap}
.why span.r{background:var(--errbg);color:var(--err);border-color:transparent}.why span.a{background:var(--warnbg);color:var(--warn);border-color:transparent}
.next{font-weight:700;color:var(--accent)}
.funnel{display:flex;flex-direction:column;gap:5px}
.funnel .f{display:grid;grid-template-columns:170px 1fr 70px;gap:8px;align-items:center;font-size:13px}
.funnel .f .bar{height:12px}
.sla-form{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.sla-form label{display:flex;justify-content:space-between;align-items:center;gap:6px;margin:0;background:var(--soft);border:1px solid var(--line);
  border-radius:10px;padding:5px 8px;font-size:12.5px}
.sla-form input{width:62px;padding:4px 6px}

/* ---- «مين يشوف إيه» ---- */
.permmap td,.permmap th{text-align:center;white-space:nowrap}
.permmap td:first-child,.permmap th:first-child{text-align:right;white-space:normal}
.permmap .y{color:var(--ok);font-weight:800}.permmap .h{color:var(--warn);font-weight:700}.permmap .n{color:var(--muted);opacity:.55}

@media (max-width:900px){
  .side a.brand{flex-direction:row;padding:2px 6px;margin:0 0 0 6px;border:0;flex-shrink:0}
  .side .brand img{width:40px;height:40px}
  .depts{grid-template-columns:1fr 1fr}
  .dept{padding:12px}.dept .nums b{font-size:19px}
  .funnel .f{grid-template-columns:110px 1fr 50px}
}
@media (max-width:560px){.depts{grid-template-columns:1fr}}


/* 30/9 — wave 3: the charts of «أداء الموظفين» · the full price menu's source badges · «الخطوة الجاية» on the client page */
.perf-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:14px;margin-bottom:14px}
@media (max-width:900px){.perf-grid{grid-template-columns:1fr}}
.hbar{display:grid;grid-template-columns:minmax(120px,38%) 1fr 44px;gap:8px;align-items:center;margin:5px 0}
.hbar-l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbar-t{height:12px;background:var(--soft);border-radius:7px;overflow:hidden;border:1px solid var(--line)}
.hbar-f{display:block;height:100%;background:linear-gradient(90deg,var(--accent2),var(--accent));border-radius:7px}
.hbar-f.alt{background:linear-gradient(90deg,#7c5cc4,#a78bfa)}
.hbar-n{text-align:left;font-variant-numeric:tabular-nums}
.vbars{display:flex;gap:10px;align-items:flex-end;height:150px;padding:8px 4px;border-bottom:1px solid var(--line)}
.vb{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;height:100%}
.vb-cols{flex:1;display:flex;gap:3px;align-items:flex-end;width:100%;justify-content:center}
.vb-c{width:28%;min-height:2px;border-radius:4px 4px 0 0}
.c1{background:var(--accent)} .c2{background:#a78bfa} .c3{background:var(--warn)}
.legend{font-size:12.5px;color:var(--muted)} .legend .dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin:0 6px 0 2px;vertical-align:-1px}
.mini-bar{display:inline-block;width:52px;height:7px;background:var(--soft);border-radius:4px;overflow:hidden;vertical-align:middle;border:1px solid var(--line)}
.mini-bar span{display:block;height:100%;background:var(--ok)}
.stars{color:#f5b301;letter-spacing:1px}
.badge.src-business{background:var(--accent-soft);color:var(--accent)} .badge.src-pro{background:rgba(124,92,196,.16);color:#a78bfa}
.badge.src-company{background:var(--okbg);color:var(--ok)} .badge.src-mostandi{background:var(--warnbg);color:var(--warn)}
.next-box{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;border:1px solid var(--line);border-inline-start:5px solid var(--accent);
  background:var(--accent-soft);border-radius:12px;padding:10px 14px;margin:10px 0 4px}
.next-box.late{border-inline-start-color:var(--err);background:var(--errbg)}
.next-box .big{font-size:26px} .next-box .what{font-size:15.5px;font-weight:700;color:var(--head)} .next-box .why{font-size:12.5px;color:var(--muted)}
.journey{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}
.journey .j{display:flex;flex-direction:column;align-items:center;min-width:92px;padding:6px 8px;border-radius:10px;border:1px solid var(--line);background:var(--soft);font-size:12px}
.journey .j b{font-size:12.5px} .journey .j.now{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)} .journey .j.done{opacity:.7}
.journey .j .dept{font-size:11px;color:var(--muted)}
@media print{.perf-grid{grid-template-columns:1fr 1fr}.hbar-t,.mini-bar{print-color-adjust:exact;-webkit-print-color-adjust:exact}}

/* أداء أشرطة عامة (شجرة/أداء الكريدت — 1/10): إضافة جنب الموجود */
.perf-bar{height:8px;border-radius:6px;background:var(--soft);overflow:hidden;border:1px solid var(--line)}
.perf-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent2),var(--accent))}

/* دليل شغلك — كروت الأقسام (1/10) */
.guide-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin:10px 0 18px}
.guide-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;box-shadow:var(--shadow)}
.guide-card h3{margin:0 0 6px;display:inline-block}
.guide-card ul{margin:6px 0 0;padding-inline-start:18px}
.guide-card li{margin-bottom:4px;font-size:13.5px}
.guide-card.mine{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.guide-card .badge{margin-inline-start:8px}

/* 📊 الرسومات البيانية (1/10) — رسوم CSS خفيفة من الداتا الحقيقية */
.chart-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.chart-card h2{margin:0 0 10px;font-size:16px}
.bars{display:flex;gap:8px;align-items:flex-end;height:170px;padding:6px 2px 0}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px}
.bar-col i{display:block;width:70%;max-width:44px;background:linear-gradient(180deg,var(--accent),var(--accent2));border-radius:6px 6px 0 0;min-height:2px}
.bar-col b{font-size:13px}
.bar-col small{color:var(--muted);font-size:11px}
.bars.dual .bar-col .pair{display:flex;flex-direction:row;align-items:flex-end;gap:3px;height:100%}
.bars.dual .bar-col .pair i{width:14px}
.bars.dual .bar-col .pair i.g{background:linear-gradient(180deg,var(--ok),#2a8f62)}
.bars.dual .bar-col .pair i.r{background:linear-gradient(180deg,var(--err),#a34)}
.legend{margin-top:8px;font-size:12px;color:var(--muted)}
.stage-list{display:flex;flex-direction:column;gap:8px}
.st-row{display:grid;grid-template-columns:110px 1fr;gap:10px;align-items:center}
.st-row small{color:var(--muted)}
.hbar{position:relative;height:18px;background:var(--soft);border-radius:8px;overflow:hidden}
.hbar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent2),var(--accent));border-radius:8px 0 0 8px}
.hbar b{position:absolute;inset-inline-end:8px;top:0;line-height:18px;font-size:12px}

/* الثيم الرابع — «زمردي» (إضافة المالك 1/10: بتضيف ثيمات مش بتحذف) — أخضر زمردي + نحاسي دافي، هوية خاصة بالنسخة */
:root[data-theme=emerald]{
  --bg:#0a1410; --side:#071009; --top:rgba(11,24,18,.88); --card:#122019; --soft:#17291f; --th:#1b3126; --zebra:#152619; --hover:#1e3529;
  --line:#26473a; --line2:#375f4c; --text:#eefaf3; --muted:#a3c2b1; --head:#fff;
  --accent:#e0a458; --accent2:#c78d3f; --accent-soft:rgba(224,164,88,.14); --btn:#1d8a5f; --btn-h:#26a873; --btn-text:#fff;
  --ok:#5fd8a4; --okbg:rgba(95,216,164,.13); --warn:#ffcb5c; --warnbg:rgba(255,203,92,.13); --err:#ff7b7b; --errbg:rgba(255,123,123,.13);
  --info:#8fd8c8; --infobg:rgba(143,216,200,.14); --purple:#c9adff; --purplebg:rgba(201,173,255,.14); --orange:#ffab78; --orangebg:rgba(255,171,120,.14);
  --input:#0e1d15; --input-line:#375f4c; --focus:rgba(224,164,88,.35); --shadow:0 1px 2px rgba(0,0,0,.35),0 4px 14px rgba(0,0,0,.2);
  --shadow-2:0 2px 4px rgba(0,0,0,.3),0 12px 32px rgba(0,0,0,.3); --brand-ring:#1d8a5f; --gold:#e0a458;
  color-scheme:dark;
}
:root[data-theme=emerald] .side a.on{box-shadow:inset -4px 0 0 var(--accent)}

/* سلسلة الإدارات على صفحة العميل (1/10): السلسلة كاملة واضحة — فين دلوقتي وإيه اللي فات */
.stage-chain{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin:8px 0 0;font-size:12px}
.stage-chain .sc{padding:3px 10px;border-radius:9px;border:1px solid var(--line);background:var(--soft);color:var(--muted)}
.stage-chain .sc.done{color:var(--text);background:var(--okbg);border-color:transparent}
.stage-chain .sc.now{color:var(--head);background:var(--btn);border-color:var(--btn);font-weight:700}
.stage-chain .sc-sep{color:var(--muted)}
.stage-chain .sc.act{color:var(--warn);border-color:var(--warn)}

/* أزرار رجوع/تقدم المراحل (1/10) */
.stage-move{display:flex;gap:6px;align-items:center}
.stage-move form{margin:0}


/* 1/10 (Claude): شارة تحذير عامة — «12 شهر افتراضي» وأمثالها */
.badge.warn{background:var(--warnbg);color:var(--warn);border-color:var(--warn)} .badge.bad{background:var(--errbg);color:var(--err);border-color:var(--err)} .badge.ok{background:var(--okbg);color:var(--ok);border-color:var(--ok)}

/* 1/10 (Claude) — الثيم الخامس «عاجي وطوبي» ☕: فاتح دافي لشغل النهار — خلفية عاجي، طوبي للمهم، نص بني غامق بتباين عالي، جانب غامق دافي.
   إضافة جنب الأربعة (غامق · فاتح · كحلي وذهبي · زمردي) — مفيش حاجة اتشالت. */
:root[data-theme=clay]{
  --bg:#f6f1ea; --side:#2b211c; --top:rgba(255,252,247,.9); --card:#fffdf9; --soft:#f3ece2; --th:#efe5d8; --zebra:#fbf7f1; --hover:#f4ebdf;
  --line:#e3d6c5; --line2:#d3c1aa; --text:#2a211b; --muted:#6e5f53; --head:#3a2418;
  --accent:#c4552d; --accent2:#9c3f1f; --accent-soft:#f8e3d8; --btn:#c4552d; --btn-h:#a8461f; --btn-text:#ffffff;
  --ok:#2f7a4f; --okbg:#e3f1e7; --warn:#8a5a00; --warnbg:#fbefd2; --err:#b3261e; --errbg:#fbe4e1; --info:#2f5f8a; --infobg:#e2ecf5;
  --purple:#6b4c9a; --purplebg:#eee7f7; --orange:#a8521a; --orangebg:#fbe9dc;
  --input:#fffdf9; --input-line:#d3c1aa; --focus:rgba(196,85,45,.25); --shadow:0 1px 2px rgba(58,36,24,.06),0 1px 3px rgba(58,36,24,.09);
  --shadow-2:0 2px 6px rgba(58,36,24,.07),0 14px 34px rgba(58,36,24,.11); --brand-ring:#c4552d; --gold:#b07d2b;
  color-scheme:light;
}
:root[data-theme=clay] .side a.on{box-shadow:inset -4px 0 0 #e08a5f}
/* 1/10 (Claude): طبقة «المطلوب منك النهارده» في صفحة كل قسم */
.todo-list{list-style:none;margin:0;padding:0}
.todo-list li{padding:9px 12px;border:1px solid var(--line);border-radius:10px;margin-bottom:6px;background:var(--soft);font-size:15px}
.todo-list li.late{border-color:var(--err);background:var(--errbg)}
.todo-list li a{font-weight:700}
.layer-today h2,.layer-team h2{font-size:18px}
/* 1/10 (Claude): رحلة الطلب القانوني */
.journey .j{font-size:16px;color:var(--muted);margin-left:2px}.journey .j.ok{color:var(--ok)}
.pay-warn{margin:4px 0 2px;padding:4px 10px;border-radius:8px;background:var(--errbg);color:var(--err);font-size:12.5px}
/* 1/10: قايمة الأدمن مجموعات بتتفتح (بدل 50 رابط) — نفس شكل «المزيد» */
.side details.grp{margin-top:6px;border-radius:10px}.side details.grp summary{cursor:pointer;color:#cfe2e8;font-size:13.5px;padding:8px 11px;list-style:none;font-weight:700;border-radius:10px}
.side details.grp summary::-webkit-details-marker{display:none}.side details.grp summary::before{content:"◂ ";opacity:.7}.side details.grp[open] summary::before{content:"▾ "}
.side details.grp[open]{background:rgba(255,255,255,.04)}.side details.grp summary:hover{background:rgba(255,255,255,.06)}
@media (max-width:760px){.side details.grp{display:inline-block;margin:0}.side details.grp[open]{display:block;width:100%}}
/* 1/10: «الماكينة» — لوحة الإدارة */
.machine{display:flex;align-items:stretch;gap:6px;overflow-x:auto;padding:4px 2px 10px}
.machine .st{flex:1 0 128px;min-width:128px;background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:10px 12px;color:var(--text);text-decoration:none;display:flex;flex-direction:column;gap:3px}
.machine .st:hover{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.machine .st.late{border-color:var(--err)}
.machine .st-top{display:flex;justify-content:space-between;align-items:center}.machine .st-ic{font-size:22px}.machine .st-n{font-size:26px;font-weight:800;color:var(--head)}
.machine .st-t{font-weight:700;font-size:13.5px}.machine .st-d{font-size:12px;color:var(--muted)}
.machine .st-bar{height:6px;background:var(--card);border-radius:4px;overflow:hidden;margin:4px 0}.machine .st-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent2),var(--accent))}
.machine .st-flags{display:flex;flex-wrap:wrap;gap:6px;font-size:12px}.machine .st-flags .bad{color:var(--err)}.machine .st-flags .warn{color:var(--warn)}.machine .st-flags .ok{color:var(--ok)}
.machine .st-arrow{align-self:center;color:var(--muted);font-size:18px}
.inbox .line.warn-line{border-inline-start:3px solid var(--warn);padding-inline-start:8px}
/* 1/10: المنيو الواحد — فهرس الخدمات + المصادر كمرجع */
.menu-toc{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px}.menu-toc a{background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:13px;color:var(--text)}
.menu-toc a b{color:var(--accent);margin-inline-start:4px}.menu-toc a:hover{border-color:var(--accent)}
.menu-src{margin-top:8px}.menu-src summary{cursor:pointer;color:var(--muted);font-size:13px}
/* 2/10 — الثيم السادس «وردي ولافندر» 🌸 (إضافة جنب الخمسة — ولا ثيم اتمسح): فاتح ناعم · شريط جانبي برقوقي غامق · أزرار وردي
   التباين مراجَع: النص #2d1f2b على الخلفية ≈ 14:1 · زرار وردي بنص أبيض ≈ 5:1 */
:root[data-theme=rose]{
  --bg:#fbf5f8; --side:#3a1f37; --top:rgba(255,250,252,.92); --card:#ffffff; --soft:#f7edf3; --th:#f1e2ec; --zebra:#fdf8fb; --hover:#f6e8f0;
  --line:#ecd9e4; --line2:#dcc0d1; --text:#2d1f2b; --muted:#76606f; --head:#4a2346;
  --accent:#b8436f; --accent2:#8e5bb5; --accent-soft:#f9e1eb; --btn:#b8436f; --btn-h:#9b335b; --btn-text:#ffffff;
  --ok:#2e7d5b; --okbg:#e2f3ea; --warn:#8a5a00; --warnbg:#fbefd6; --err:#b3261e; --errbg:#fbe4e1; --info:#5a4fa0; --infobg:#ece9f8;
  --purple:#7a4fa6; --purplebg:#f0e8f8; --orange:#a8521a; --orangebg:#fbe9dc;
  --input:#ffffff; --input-line:#dcc0d1; --focus:rgba(184,67,111,.25); --shadow:0 1px 2px rgba(74,35,70,.06),0 1px 3px rgba(74,35,70,.09);
  --shadow-2:0 2px 6px rgba(74,35,70,.07),0 14px 34px rgba(74,35,70,.12); --brand-ring:#b8436f; --gold:#a8743a;
  color-scheme:light;
}
:root[data-theme=rose] .side a.on{box-shadow:inset -4px 0 0 #e7a3c0}
:root[data-theme=rose] body{background:radial-gradient(900px 420px at 90% -10%,rgba(184,67,111,.07),transparent),radial-gradient(700px 380px at 0% 110%,rgba(142,91,181,.07),transparent),var(--bg)}
/* 2/10 — رجوع / قدّام + النافذة الجانبية (الطبقات) */
.navbtns{display:inline-flex;gap:4px;margin-inline-end:8px}
.navbtns button{background:var(--soft);border:1px solid var(--line);color:var(--text);border-radius:9px;padding:6px 10px;font:inherit;font-size:13px;cursor:pointer;white-space:nowrap}
.navbtns button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.navbtns button:disabled{opacity:.4;cursor:default}
.in-frame .side,.in-frame header.top,.in-frame .quick-strip,.in-frame .toasts,.in-frame #peek{display:none!important}
.in-frame .layout{display:block}.in-frame .main{margin:0;padding:0}.in-frame main{padding:14px 16px}
.peek{position:fixed;inset:0;z-index:60}
.peek[hidden]{display:none}
.peek-back{position:absolute;inset:0;background:rgba(10,14,20,.45);backdrop-filter:blur(2px)}
.peek-win{position:absolute;top:0;bottom:0;inset-inline-start:0;width:min(980px,94vw);background:var(--bg);box-shadow:var(--shadow-2);display:flex;flex-direction:column;
  border-inline-end:1px solid var(--line);animation:peekIn .18s ease-out}
@keyframes peekIn{from{transform:translateX(-24px);opacity:.4}to{transform:none;opacity:1}}
.peek-bar{display:flex;align-items:center;gap:6px;padding:8px 12px;background:var(--card);border-bottom:1px solid var(--line)}
.peek-bar button{background:var(--soft);border:1px solid var(--line);color:var(--text);border-radius:9px;padding:6px 11px;font:inherit;font-size:13px;cursor:pointer}
.peek-bar button:hover{border-color:var(--accent);color:var(--accent)}
.peek-bar .sp{flex:1}.peek-title{font-size:14.5px;color:var(--head);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}
.peek-frame{flex:1;width:100%;border:0;background:var(--bg)}
html.peek-open{overflow:hidden}
@media (max-width:760px){.peek-win{width:100vw}.navbtns button{padding:6px 8px}}
@media print{.navbtns,.peek{display:none!important}}
/* 2/10 — خط رحلة الملف (بدل الصفين) */
.jline{position:relative;display:grid;grid-template-columns:repeat(8,minmax(92px,1fr));gap:6px;margin:12px 0 6px;padding:14px 2px 4px;overflow-x:auto}
.jtrack{position:absolute;top:31px;inset-inline:6%;height:4px;background:var(--line);border-radius:4px;z-index:0}
.jtrack i{display:block;height:100%;width:var(--jpct);background:linear-gradient(90deg,var(--ok),var(--accent));border-radius:4px;margin-inline-start:0}
.jstep{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;color:var(--text);text-decoration:none;
  padding:0 2px 8px;border-radius:12px;min-width:92px}
.jstep .jdot{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:14px;background:var(--card);
  border:2px solid var(--line2);color:var(--muted);margin-bottom:4px;transition:transform .15s}
.jstep b{font-size:12.5px;line-height:1.35}.jstep .jdept{font-size:11px;color:var(--muted)}
.jstep.done .jdot{background:var(--ok);border-color:var(--ok);color:#fff}
.jstep.done b{color:var(--ok)}
.jstep.next{opacity:.55}
.jstep.now{background:var(--accent-soft);box-shadow:0 0 0 2px var(--accent) inset;padding-top:6px;margin-top:-6px}
.jstep.now .jdot{background:var(--accent);border-color:var(--accent);color:var(--btn-text);transform:scale(1.12);box-shadow:0 0 0 5px var(--accent-soft)}
.jstep.now b{color:var(--head)}
.jstep .jnow{font-size:11.5px;font-weight:700;color:var(--accent);margin-top:2px}.jstep .jstage{font-size:11px;color:var(--muted)}
.jstep:hover .jdot{transform:scale(1.08)}
.jside{margin:8px 0;padding:8px 12px;border-radius:10px;background:var(--warnbg);color:var(--warn);font-size:14px}
@media (max-width:760px){.jline{grid-template-columns:repeat(8,96px)}}

/* ==================================================================
   2/10 — الموجة 5 (المالك: «الخط محتاج تبسيط وتوضيح · ناقص أنميشن · قوايم العملاء وصفحاتهم مع الموظفين والأحداث ·
   كل كيسة فيها مشتملاتها بوضوح · الترتيب الهرمي»). طبقة فوق اللي قبلها — شغالة على الستة ثيمات.
   ================================================================== */
/* الخط: «دبي» (خط ويندوز 10/11 العربي الواضح) — ولو مش موجود على جهاز يرجع للـ Segoe UI زي الأول */
body{font-family:"Dubai","Segoe UI",Tahoma,"Noto Sans Arabic","Noto Naskh Arabic",Arial,sans-serif;font-size:15.5px;line-height:1.7;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
input,select,textarea,button,.btn{font-family:inherit}
h1{font-size:24px;line-height:1.35;font-weight:700}
h2{font-size:18px;line-height:1.4;font-weight:700}
h3{font-size:16px;line-height:1.45;font-weight:700}
td,th{line-height:1.55}
th{font-weight:700;font-size:13.5px}
small{font-size:12.5px}
.cnum,.pw input{font-family:Consolas,"Segoe UI",monospace}

/* الحركة: دخول هادي للصفحة · الكروت ورا بعض · من غير ما تتقل على الجهاز */
@keyframes rl-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes rl-fade{from{opacity:0}to{opacity:1}}
@keyframes rl-pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@keyframes rl-pulse{0%,100%{box-shadow:0 0 0 0 var(--focus)}50%{box-shadow:0 0 0 7px transparent}}
@keyframes rl-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
main > *{animation:rl-up .32s cubic-bezier(.2,.7,.2,1) both}
main > *:nth-child(2){animation-delay:.03s}main > *:nth-child(3){animation-delay:.06s}main > *:nth-child(4){animation-delay:.09s}
main > *:nth-child(5){animation-delay:.12s}main > *:nth-child(n+6){animation-delay:.15s}
.flash{animation:rl-up .35s ease both}
details[open] > *:not(summary){animation:rl-fade .2s ease both}
.badge,.cnt{transition:transform .15s ease}
a.badge:hover{transform:translateY(-1px);text-decoration:none}
.qa-tile .cnt{animation:rl-pop .4s ease both .15s}
.card{transition:border-color .15s ease,box-shadow .2s ease,transform .2s ease}
tr{transition:background-color .12s ease}

/* 📦 مشتملات الملف — الشريط نفسه بعدّاداته وحالته */
.ftabs{gap:6px;border-bottom:0;margin:10px 0 14px;display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
.ftabs a{display:flex;flex-direction:column;gap:1px;padding:8px 11px 7px;border:1px solid var(--line);border-radius:12px;background:var(--card);
  margin:0;color:var(--text);position:relative;overflow:hidden;box-shadow:var(--shadow);transition:transform .15s ease,border-color .15s ease,background-color .15s ease}
.ftabs a::after{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .25s ease}
.ftabs a:hover{transform:translateY(-2px);border-color:var(--line2);text-decoration:none;background:var(--hover)}
.ftabs a.on{border-color:var(--accent);background:var(--accent-soft)}
.ftabs a.on::after{transform:scaleX(1)}
.ftabs .fi{font-size:18px;line-height:1.2}
.ftabs .fl{font-weight:700;font-size:14px;display:flex;align-items:center;gap:5px}
.ftabs .fl b{background:var(--soft);border-radius:10px;padding:0 7px;font-size:12px;margin:0}
.ftabs small{font-size:11.5px;line-height:1.3;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ftabs a.st-bad{border-inline-start:4px solid var(--err)}.ftabs a.st-bad small{color:var(--err);font-weight:600}
.ftabs a.st-warn{border-inline-start:4px solid var(--warn)}
.ftabs a.st-ok{border-inline-start:4px solid var(--ok)}

/* 👥 فريق الملف */
.team{display:flex;flex-direction:column;gap:2px}
.tm{display:flex;gap:10px;align-items:flex-start;padding:8px 6px;border-radius:10px;transition:background-color .12s ease}
.tm:hover{background:var(--soft)}
.tm .tb{display:flex;flex-direction:column;min-width:0;line-height:1.45}
.tm .td{font-size:12.5px;color:var(--muted)}
.tm .td i{font-style:normal;color:var(--text)}.tm .td i.now{color:var(--accent);font-weight:700}
.tm .tw2{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12.5px}
.tm .tw2 a.bad{color:var(--err);font-weight:700}
.tm.legacy{opacity:.78}
.tm .tb .badge{align-self:flex-start;padding:0 8px}
.edit-inline{margin-top:4px}.edit-inline > summary{cursor:pointer;color:var(--accent);font-size:12.5px;font-weight:700;list-style:none;display:inline-block}
.edit-inline > summary::-webkit-details-marker{display:none}
.edit-inline[open]{background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin:6px 0}
.tm.small{padding:4px 6px}
.av{flex-shrink:0;width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;
  background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 2px currentColor;opacity:.95}
.av.sm{width:26px;height:26px;font-size:12px;box-shadow:inset 0 0 0 1.5px currentColor;vertical-align:middle}
.av.t-s{color:var(--info);background:var(--infobg)}.av.t-c{color:var(--accent);background:var(--accent-soft)}
.av.t-o{color:var(--orange);background:var(--orangebg)}.av.t-l{color:var(--purple);background:var(--purplebg)}
.av.t-f{color:var(--warn);background:var(--warnbg)}.av.t-m{color:var(--ok);background:var(--okbg)}
.av.t-h,.av.t-k{color:var(--err);background:var(--errbg)}.av.t-x{color:var(--muted);background:var(--soft)}
.team details.more summary{cursor:pointer;color:var(--accent);font-size:13px;padding:4px 6px}

/* 🕘 الأحداث متقسمة بالأيام */
.tlf{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:6px}
.tlf .badge b{background:rgba(0,0,0,.12);border-radius:8px;padding:0 6px;margin-inline-start:3px;font-size:11px}
.tlf select{margin-inline-start:auto;padding:4px 8px}
.tlday{position:relative}
.tld{position:sticky;top:58px;z-index:1;display:flex;align-items:baseline;gap:10px;margin:14px 0 2px;padding:6px 10px;border-radius:10px;
  background:var(--soft);color:var(--head);font-size:14.5px;border:1px solid var(--line)}
.tld small{color:var(--muted);font-weight:500}
.tlday .tl{border-inline-start:2px solid var(--line);margin-inline-start:15px;padding-inline-start:0}
.tlday .tl li{position:relative;padding-inline-start:4px;border-bottom:1px dashed var(--line)}
.tlday .tl li:last-child{border-bottom:0}
.tlday .tl .ic{margin-inline-start:-17px;background:var(--card)}
.tl .meta{display:flex;flex-wrap:wrap;gap:4px 10px}
.tl .meta .tm-t{font-family:Consolas,monospace;font-size:12px}
.tl .meta .who{color:var(--text);font-weight:600}
.tl .meta .dp{background:var(--soft);border-radius:8px;padding:0 7px;font-size:11.5px}
.tl li{animation:rl-fade .3s ease both}
.tl-mini li{padding:7px 0}

/* 🧭 قايمة العملاء: محطات الرحلة فوق + كل صف بيقول الملف فين وعند مين */
.phasebar{display:flex;gap:6px;overflow-x:auto;padding:2px 0 10px;margin-bottom:4px}
.phasebar a{flex:1 0 auto;min-width:96px;display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 10px;border-radius:12px;
  background:var(--card);border:1px solid var(--line);color:var(--text);box-shadow:var(--shadow);transition:transform .15s ease,border-color .15s ease}
.phasebar a:hover{transform:translateY(-2px);text-decoration:none;border-color:var(--accent)}
.phasebar a b{font-size:20px;line-height:1.2;color:var(--head)}
.phasebar a span{font-size:12.5px;font-weight:600;white-space:nowrap}
.phasebar a.on{background:var(--accent-soft);border-color:var(--accent)}
.phasebar a.on b{color:var(--accent)}
.phasebar a.zero{opacity:.55}
.phasebar a.offj{border-style:dashed}
.clist td{vertical-align:top}
.clist .cl-name small,.clist .cl-where small,.clist .cl-team small,.clist .cl-ev small{display:block;margin-top:1px}
.clist .cl-where b{font-size:14px}
.clist .cl-ev span{display:block;max-width:280px}
.clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ftabs{scroll-margin-top:136px}.tld{top:128px}
.in-frame .ftabs{scroll-margin-top:8px}.in-frame .tld{top:0}
.tl .det.clamp6{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.tl .more-btn{background:none;border:0;color:var(--accent);cursor:pointer;padding:2px 0;font:inherit;font-size:12.5px;font-weight:700}
.clist .cl-where{min-width:210px}.clist .cl-team{min-width:150px}.clist .cl-team > span:not(.av){white-space:nowrap;font-weight:600}
.clist .cl-name{min-width:200px}
.clist .cl-ev{min-width:230px}.clist .cl-ev span.clamp2{display:-webkit-box}
.phasebar{flex-wrap:wrap;overflow:visible}.phasebar a{flex:1 1 96px}
.phasebar small{font-size:11.5px;font-weight:600}.phasebar .ok-t{color:var(--ok)}
.stations{margin:10px 0 12px}.stations a{flex:1 1 150px}
.inrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;justify-content:space-between}
.inrow .in-t{flex:1 1 320px;min-width:0}.inrow .in-act{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.inrow .in-act select{padding:3px 6px;max-width:190px}
.bulkbar{position:sticky;top:128px;z-index:3;display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 10px;margin:0 0 8px;border-radius:10px;background:var(--accent-soft);border:1px solid var(--accent)}
.bulkbar select{max-width:280px}.in-frame .bulkbar{top:0}
.peek-q{display:inline-flex;align-items:center;gap:6px;margin-inline-start:10px;padding-inline-start:10px;border-inline-start:1px solid var(--line)}
.peek-q .peek-pos{font-size:12.5px;color:var(--muted);white-space:nowrap;font-weight:600}
.peek-q button:disabled{opacity:.4;cursor:default}
.peek-bar button{white-space:nowrap}
@media (max-width:700px){.peek-bar{flex-wrap:wrap;row-gap:4px}.peek-bar .peek-title{order:9;flex-basis:100%}.peek-q{margin-inline-start:4px;padding-inline-start:6px}}.inrow .inline-form{display:inline-flex;gap:4px;align-items:center;margin:0}
.clist .cl-has .badge{margin:1px 0}
.clist tr.is-late td:first-child{box-shadow:inset -4px 0 0 var(--err)}
.clist .bad,.bad{color:var(--err)}
.mj{display:flex;gap:3px;margin-bottom:3px}
.mj i{width:16px;height:5px;border-radius:3px;background:var(--line);transform-origin:right;animation:rl-grow .4s ease both}
.mj i.d{background:var(--ok)}.mj i.n{background:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}

/* 📝 المسودات: كل اللي بتكتبه بيتحفظ لوحده لحد ما يتسجل */
.draft-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 10px;padding:8px 12px;border-radius:10px;
  background:var(--warnbg);border:1px dashed var(--warn);color:var(--text);font-size:13.5px;animation:rl-up .3s ease both}
.draft-bar .btn{padding:3px 10px;font-size:13px}
.draft-chip{display:inline-block;margin-inline-start:8px;font-size:12px;color:var(--ok);opacity:0;transition:opacity .3s ease}
.draft-chip.on{opacity:1}
@media (max-width:760px){
  .ftabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .phasebar a{min-width:84px}
  .tld{top:0}
}
@media print{.ftabs,.phasebar,.draft-bar,.draft-chip{display:none!important}main > *{animation:none!important}}

/* ==================================================================
   2/10 — الفلوس في صفحة كل عميل · معاينة/صياغة الفاتورة · كشف الحساب
   ================================================================== */
.moneybar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin:12px 0 4px;padding:10px 12px;border-radius:14px;
  background:linear-gradient(180deg,var(--soft),transparent);border:1px solid var(--line);border-inline-start:5px solid var(--ok)}
.moneybar.lvl-warn{border-inline-start-color:var(--warn)}.moneybar.lvl-alert{border-inline-start-color:var(--err)}
.moneybar.lvl-no_advance{border-inline-start-color:var(--purple)}.moneybar.lvl-none{border-inline-start-color:var(--line2)}
.moneybar .mb-nums{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 640px}
.moneybar .mb{display:flex;flex-direction:column;gap:1px;min-width:118px;padding:6px 10px;border-radius:10px;background:var(--card);border:1px solid var(--line);color:var(--text)}
.moneybar a.mb:hover{text-decoration:none;border-color:var(--accent);transform:translateY(-1px)}
.moneybar .mb span{font-size:12px;color:var(--muted);font-weight:600}
.moneybar .mb b{font-size:17px;color:var(--head);font-variant-numeric:tabular-nums}
.moneybar .mb small{font-size:11.5px;font-weight:700}
.moneybar .mb.bad b,.moneybar .mb .bad{color:var(--err)}.moneybar .mb.good b{color:var(--ok)}.moneybar .mb.warn b{color:var(--warn)}
.moneybar .mb-bar{min-width:190px;flex:1 1 190px}
.moneybar .mbt{position:relative;height:9px;border-radius:5px;background:var(--line);margin-top:6px;overflow:visible}
.moneybar .mbt i{position:absolute;inset-block:0;inset-inline-start:0;border-radius:5px;background:linear-gradient(90deg,var(--ok),var(--warn) 60%,var(--err));
  transform-origin:right;animation:rl-grow .6s ease both}
.moneybar .mbt u{position:absolute;top:-3px;width:2px;height:15px;background:var(--text);opacity:.45}
.moneybar .mb-act{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.moneybar.mini .mb-nums{flex-basis:100%}
.inv-prev .inv-line{border:1px solid var(--line);border-radius:10px;padding:8px;margin-bottom:8px;background:var(--soft)}
.inv-prev .il-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}
.inv-prev textarea{width:100%;min-height:64px;font-size:13.5px;line-height:1.6}
.inv-prev .inv-total{display:flex;flex-wrap:wrap;gap:8px 18px;padding:10px;border-radius:10px;background:var(--accent-soft);margin-top:8px}
.inv-prev .inv-total .bad b{color:var(--err)}.inv-prev .inv-total .good b{color:var(--ok)}
.inv-wrap.draft{position:relative}
.draft-mark{position:absolute;top:38%;inset-inline:0;text-align:center;font-size:34px;font-weight:800;color:rgba(200,30,30,.18);transform:rotate(-14deg);
  pointer-events:none;z-index:2;letter-spacing:1px}
.inv-prev .inv-wrap{max-height:820px;overflow:auto;border-radius:10px}
/* كشف الحساب — ورقة A4 */
.stmt-sheet{background:#fff;color:#111;max-width:800px;margin:12px auto;padding:22px 26px;border-radius:6px;box-shadow:0 6px 24px rgba(0,0,0,.12);
  font-family:"Dubai","Segoe UI",Tahoma,Arial,sans-serif}
.stmt-head{display:flex;gap:16px;align-items:center;justify-content:space-between;border-bottom:3px solid #1a7f9c;padding-bottom:10px}
.stmt-head img{width:74px;height:74px;object-fit:contain}
.stmt-head h1{margin:0;color:#0e3446;font-size:24px}
.stmt-client{text-align:left;font-size:13.5px;line-height:1.6}
.stmt-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
.stmt-sum div{border:1px solid #d6e2e8;border-radius:8px;padding:8px 10px;background:#f4f8fa}
.stmt-sum span{display:block;font-size:12px;color:#566b76}.stmt-sum b{font-size:18px}
.stmt-sum .neg b,.stmt-t .neg{color:#b42318}.stmt-sum .pos b{color:#157a4c}
.stmt-t{width:100%;border-collapse:collapse;font-size:13px}
.stmt-t th{background:#0e3446;color:#fff;padding:6px;text-align:right}
.stmt-t td{border-bottom:1px solid #e3e9ec;padding:5px 6px;vertical-align:top}
.stmt-t td:nth-child(n+3){white-space:nowrap;font-variant-numeric:tabular-nums}
.stmt-t tr.tot td{font-weight:800;background:#eef3f6;border-top:2px solid #0e3446}
.stmt-note{font-size:12.5px;color:#333;margin:10px 0 0}
.stmt-foot{margin-top:16px;border-top:1px solid #d6e2e8;padding-top:8px;font-size:11.5px;color:#566b76;text-align:center}
@media print{.stmt-sheet{box-shadow:none;margin:0;padding:0;max-width:none}.moneybar{display:none!important}}

/* 2/10 — لوحة المحطة في الملف (بدل ما المحطة تودّي على «إزاي أشتغل») */
.stpanel{border-inline-start:5px solid var(--accent);scroll-margin-top:136px;animation:rl-up .3s ease both}
.stpanel.st-done{border-inline-start-color:var(--ok)}.stpanel.st-next{border-inline-start-color:var(--line2)}
.stp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;margin:6px 0 10px}
.stp-grid div{background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:7px 10px;display:flex;flex-direction:column}
.stp-grid span{font-size:12px;color:var(--muted);font-weight:600}.stp-grid b{font-size:15.5px}.stp-grid small{color:var(--muted)}
.jstep.picked{outline:3px solid var(--accent);outline-offset:2px}
.in-frame .stpanel{scroll-margin-top:8px}

.billsteps{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 10px}
.billsteps a,.billsteps span{flex:1 1 220px;padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--muted);font-weight:600}
.billsteps b{display:inline-flex;width:24px;height:24px;border-radius:50%;align-items:center;justify-content:center;background:var(--soft);color:var(--text);margin-inline-end:6px}
.billsteps .on{border-color:var(--accent);background:var(--accent-soft);color:var(--head)}.billsteps .on b{background:var(--accent);color:var(--btn-text)}
.inv-prev .il-head{flex-wrap:wrap;gap:6px 12px}.inv-prev .il-amt input{width:110px;font-weight:700}.inv-prev .il-skip{margin-inline-start:auto}

.fillcard{border-inline-start:5px solid var(--purple)}
.fillrow{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;padding:7px 0;border-bottom:1px dashed var(--line)}
.fillrow:last-child{border-bottom:0}.fillrow .fl{min-width:150px;font-weight:600}.fillrow b{font-family:Consolas,monospace}

/* 2/10 — إشعار خدمة (فاتورة صغيرة لكل خدمة) */
.slip{background:#fff;color:#111;max-width:560px;margin:12px auto;padding:18px 22px;border-radius:8px;box-shadow:0 6px 24px rgba(0,0,0,.12);font-family:"Dubai","Segoe UI",Tahoma,Arial,sans-serif}
.slip-head{display:flex;gap:12px;align-items:center;justify-content:space-between;border-bottom:3px solid #1a7f9c;padding-bottom:8px}
.slip-head img{width:56px;height:56px;object-fit:contain}.slip-head h1{margin:0;font-size:21px;color:#0e3446}
.slip-client{text-align:left;font-size:13px}
.slip-svc{margin:12px 0;padding:10px 12px;border-radius:10px;background:#f2f8f5;border:1px solid #cfe7da}
.slip-svc h2{margin:2px 0 4px;font-size:17px;color:#0e3446}.slip-svc p{margin:0;font-size:12.5px;color:#333;line-height:1.7}
.slip-done{display:inline-block;background:#157a4c;color:#fff;border-radius:20px;padding:0 10px;font-size:12px;font-weight:700}
.slip-t{width:100%;border-collapse:collapse;font-size:13px;margin:6px 0}
.slip-t th{text-align:right;width:42%;color:#566b76;font-weight:600;padding:5px 6px;border-bottom:1px solid #e3e9ec}
.slip-t td{padding:5px 6px;border-bottom:1px solid #e3e9ec}
.slip-t.money td{text-align:left;font-variant-numeric:tabular-nums;white-space:nowrap}
.slip-t tr.tot th,.slip-t tr.tot td{font-weight:800;font-size:15px;color:#0e3446;border-top:2px solid #0e3446}
.slip-adv{display:flex;flex-wrap:wrap;gap:6px 14px;margin:10px 0;padding:8px 10px;border-radius:8px;background:#f4f8fa;font-size:12.5px}
.slip-adv .neg b{color:#b42318}.slip-adv .pos b{color:#157a4c}
.slip-note{font-size:12px;color:#444;margin:8px 0 0}
@media print{.slip{box-shadow:none;margin:0;max-width:none}}
.stmt-t td.by small{color:#566b76}
.overlimit{border-inline-start:5px solid var(--err)}.overlimit .olt td{vertical-align:middle}

/* 2/10: الورق المطبوع (كشف الحساب · إشعار الخدمة) أبيض دايمًا — ألوان الثيم الغامق ما بتدخلش جوه */
.print-page .stmt-sheet,.print-page .slip{color-scheme:light}
.stmt-t tr,.stmt-t td,.slip-t tr,.slip-t td,.slip-t th{background:#fff!important;color:#111!important}
.stmt-t tr:nth-child(even) td{background:#f7fafb!important}
.stmt-t th{background:#0e3446!important;color:#fff!important}
.stmt-t tr.tot td{background:#eef3f6!important;font-weight:800}
.stmt-t td.neg,.stmt-t .neg{color:#b42318!important}.stmt-t td.by small{color:#566b76!important}
.slip-t th{color:#566b76!important}.slip-t tr.tot th,.slip-t tr.tot td{color:#0e3446!important}
.print-bar input[type=date]{color-scheme:light}

.inv-prev .inv-wrap{overflow:auto}.inv-prev .inv-wrap .inv-sheet{zoom:.74}

/* ==================================================================
   2/10 — الطباعة النضيفة (المالك: «طبقة زرقاء في مربع الفاتورة — والمشكلة دي في مستندات كتير»)
   السبب: قواعد الطباعة كانت على :root بس، والثيم المختار (:root[data-theme=…]) أقوى منها — فألوانه وخلفياته كانت بتتطبع.
   دلوقتي: الورق أبيض والكتابة سودا مهما كان الثيم · العلامة المائية رمادي خفيف جدًا · رؤوس الجداول الغامقة بتتطبع أبيض/أسود.
   ================================================================== */
.inv-wm{fill:#7c868b!important;opacity:.06!important}
@media print{
  :root,:root[data-theme]{--bg:#fff!important;--side:#fff!important;--top:#fff!important;--card:#fff!important;--soft:#fff!important;--th:#f3f3f3!important;
    --zebra:#fff!important;--hover:#fff!important;--line:#999!important;--line2:#888!important;--text:#000!important;--muted:#444!important;--head:#000!important;
    --accent:#000!important;--accent2:#000!important;--accent-soft:#fff!important;--input:#fff!important;--input-line:#999!important;
    --okbg:#fff!important;--warnbg:#fff!important;--errbg:#fff!important;--infobg:#fff!important;--purplebg:#fff!important;--orangebg:#fff!important;color-scheme:light}
  html,body,.print-page{background:#fff!important;color:#000!important}
  *,*::before,*::after{box-shadow:none!important;text-shadow:none!important;animation:none!important}
  main > *{opacity:1!important;transform:none!important}
  .inv-wm{fill:#000!important;opacity:.04!important}
  .stmt-t th{background:#fff!important;color:#000!important;border-bottom:2px solid #000!important}
  .stmt-t tr:nth-child(even) td,.stmt-t tr.tot td{background:#fff!important}
  .stmt-sum div,.slip-svc,.slip-adv,.billsteps,.moneybar{background:#fff!important;border-color:#999!important}
  .slip-done{background:#fff!important;color:#000!important;border:1px solid #000}
  .stmt-head,.slip-head{border-bottom-color:#000!important}
  table,tr,td,th{background:transparent!important}
  .inv-t td.red,.inv-t td.lbl.due{color:#000!important}
  .draft-mark{color:rgba(0,0,0,.12)!important}
}
@media print{.inv-wm{opacity:.025!important}}

.chstat{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin:8px 0 12px}
.chs{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--card);border-inline-start:5px solid var(--line2)}
.chs.ok{border-inline-start-color:var(--ok)}.chs.warn{border-inline-start-color:var(--warn)}.chs span{font-size:13px}.chs small{color:var(--muted)}
.evt td,.evt th{text-align:center}.evt td:first-child,.evt th:first-child{text-align:start}
.ch-card .muted{margin:6px 0}

/* 5/10 (visual review): a file code or a row button never breaks into two lines · the accounts' two working lists full width,
   each scrolling inside its own box */
.cnum{white-space:nowrap}
td .btn,td form .btn{white-space:nowrap}
.stack-lists{display:grid;gap:16px;margin-bottom:16px}
.tw.tall{max-height:560px}