/* =====================================================================
   RAYA · dash — internal management system surface (desktop-first, responsive to 390px)
   Calm base · dense & useful · ONE pop element per screen · interpretation lines on charts
   ===================================================================== */
body.dash{font-size:15px;line-height:1.7;--side-w:264px}
.dshell{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);min-height:100vh;align-items:start}
.dwrap{min-width:0;min-height:100vh;display:flex;flex-direction:column}

/* ── sidebar (always ink) ─────────────────────────────────────────── */
.side{position:sticky;inset-block-start:0;height:100vh;display:flex;flex-direction:column;gap:6px;padding:16px 14px 14px;background:#120D09;color:#F5EEE2;border-inline-end:1.5px solid rgba(245,238,226,.08);overflow:hidden auto;scrollbar-width:thin;scrollbar-color:#3A2D20 transparent;z-index:40;--text-2:#BBAA8F}
.side-top{display:flex;align-items:center;justify-content:space-between;padding:4px 6px 10px}
.side-x{display:none}
.side-ws{display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;background:rgba(245,238,226,.06);border:1.5px solid rgba(245,238,226,.1);margin-block-end:4px;font-size:13px}
.side-ws b{display:block;font-family:var(--f-display);font-size:13.5px;line-height:1.3}.side-ws small{color:#A09078;font-size:11px}
.side-ws .ic-tile{--s:34px}
.side-nav{display:flex;flex-direction:column;gap:2px;flex:1}
.sn-g{font-size:11px;letter-spacing:.06em;color:#8B7A62;padding:14px 12px 4px;font-weight:700}
.side-nav a{display:flex;align-items:center;gap:12px;padding:.55rem .8rem;border-radius:12px;color:#D0C0A6;font-weight:500;font-size:14px;transition:background var(--t-fast),color var(--t-fast);position:relative}
.side-nav a .ic{width:19px;height:19px;opacity:.9}
.side-nav a:hover{background:rgba(245,238,226,.08);color:#fff}
.side-nav a.on{background:var(--amber);color:var(--ink);font-weight:700;box-shadow:3px 3px 0 #000}
.side-nav a .badge-n{margin-inline-start:auto}
.side-foot{display:grid;gap:10px;padding-block-start:10px;border-block-start:1.5px solid rgba(245,238,226,.1)}
.side-foot a{padding:6px;border-radius:12px}.side-foot a:hover{background:rgba(245,238,226,.06)}
.demo-chip{display:inline-flex;gap:6px;align-items:center;font-size:11.5px;font-weight:700;color:var(--amber-dp);background:var(--amber-bg);border:1.5px dashed var(--amber-dp);padding:.12rem .7rem;border-radius:var(--r-pill);line-height:1.7;white-space:nowrap}
.side .demo-chip{color:var(--amber-lt);background:rgba(242,163,58,.1);border-color:rgba(242,163,58,.5)}
.side-scrim{position:fixed;inset:0;background:var(--overlay);backdrop-filter:blur(4px);z-index:520;opacity:0;visibility:hidden;transition:opacity var(--t-base),visibility var(--t-base)}
.side-burger{display:none}

/* ── top bar ──────────────────────────────────────────────────────── */
.dtop{position:sticky;inset-block-start:0;z-index:60;display:flex;align-items:center;gap:12px;padding:12px clamp(14px,2.4vw,32px);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);border-block-end:1.5px solid var(--hair-c)}
.dt-h{font-family:var(--f-display);font-size:1.3rem;font-weight:800;line-height:1.35;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.dtop .xs{margin:0}
.dsearch{display:flex;gap:10px;align-items:center;min-width:250px;height:42px;padding:0 8px 0 14px;border:var(--bw) solid var(--ol);border-radius:var(--r-pill);background:var(--surface);color:var(--text-2);font-size:13.5px;transition:box-shadow var(--t-fast)}
.dsearch:hover{box-shadow:var(--sh-1)}
.dsearch>span:first-of-type{flex:1;text-align:start}
.dtop .dd{position:relative}
.bell-dot{position:absolute;inset-block-start:8px;inset-inline-end:9px;width:10px;height:10px;border-radius:50%;background:var(--rust);border:2px solid var(--bg)}
.dd-menu.notif{inset-inline-start:auto;inset-inline-end:0;width:340px;color:var(--text)}
.dd-menu.notif a{align-items:flex-start}
.dd-menu.notif b{display:block;font-size:13.5px}

/* ── main ─────────────────────────────────────────────────────────── */
.dmain{padding:clamp(14px,2.2vw,30px);display:grid;gap:20px;width:100%;max-width:1720px;margin-inline:auto;align-content:start;min-width:0}
.dmain>*{min-width:0}
.ph{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap}
.ph h2{font-size:clamp(1.4rem,1.1rem + 1vw,2rem);line-height:1.3}
.ph .acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.cols{display:grid;gap:20px;grid-template-columns:repeat(var(--c,2),minmax(0,1fr))}
.cols.c-21{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}.cols.c-12{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}.cols.c-32{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}.cols.c-23{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
@media (max-width:1180px){.cols,.cols.c-21,.cols.c-12,.cols.c-32,.cols.c-23{grid-template-columns:minmax(0,1fr)}}
.panel{background:var(--surface);border:var(--bw-h) solid var(--hair-c);border-radius:20px;padding:1.15rem 1.25rem;min-width:0;position:relative}
.panel.pop{border:var(--bw) solid var(--ol);box-shadow:var(--sh-2)}
.panel.flush{padding:0;overflow:hidden}
.panel-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-block-end:1rem;flex-wrap:wrap}
.panel-h h3{font-size:1.02rem;font-weight:700;line-height:1.4}
.panel-h .sub{font-size:12px;color:var(--text-2);display:block;font-weight:400;font-family:var(--f-body)}
.panel.flush .panel-h{padding:1rem 1.25rem 0}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:1180px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.kpis{grid-template-columns:minmax(0,1fr)}}
.kpi .k-ic{position:absolute;inset-block-start:14px;inset-inline-end:14px}
body.dash .kpi .k-ic{inset-inline-end:auto;left:14px}
body.dash .kpi .k-l{padding-left:50px;min-height:2.6em;align-items:flex-start}
body.dash .kpi .k-v{direction:ltr;justify-content:flex-end}
body.dash .kpi .k-d{margin-block-start:auto}
.kpi.hero{background:var(--ink);color:#F5EEE2;border:var(--bw) solid var(--ink);box-shadow:var(--sh-2);overflow:hidden}
[data-theme="dark"] .kpi.hero{background:#241A12;border-color:var(--amber);box-shadow:4px 4px 0 var(--amber)}
.kpi.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 90% 0,rgba(242,163,58,.28),transparent 70%),repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 2px,transparent 2px 20px);pointer-events:none}
.kpi.hero>*:not(.k-ic){position:relative;z-index:1}
.kpi .k-v{font-size:clamp(1.7rem,1.2rem + 1.2vw,2.4rem)}
.interp{display:flex;gap:10px;align-items:flex-start;padding:.7rem 1rem;border-radius:14px;background:var(--amber-bg);color:var(--text);font-size:13.5px;line-height:1.75;border:1.5px solid color-mix(in srgb,var(--amber-dp) 35%,transparent)}
.interp .ic{color:var(--amber-dp);margin-block-start:3px;width:18px;height:18px}
[data-theme="dark"] .interp .ic{color:var(--amber)}
.interp.bad{background:var(--rust-bg)}.interp.bad .ic{color:var(--rust)}
.interp.ok{background:var(--sage-bg)}.interp.ok .ic{color:var(--sage-dp)}
.fbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.fbar .search{flex:1 1 240px;max-width:360px}
.fbar .sel{width:auto;min-height:42px;padding-block:.35rem;font-size:14px}
.tbl.dense td{padding:.6rem .85rem}
.tbl .cell-main{display:flex;align-items:center;gap:10px;min-width:0}
.tbl .cell-main b{font-weight:600;display:block;line-height:1.4}
.tbl .cell-main small{color:var(--text-2);font-size:12px;display:block;line-height:1.4}
.tbl a.row-link{color:inherit}.tbl a.row-link:hover b{text-decoration:underline;text-decoration-color:var(--amber);text-underline-offset:3px}
.tbl tr.is-click{cursor:pointer}
.tbl .acts{display:flex;gap:6px;justify-content:flex-end}
.tbl .neg{color:var(--rust-dp);font-weight:700}.tbl .pos{color:var(--sage-dp);font-weight:700}
[data-theme="dark"] .tbl .neg{color:#FFA08C}[data-theme="dark"] .tbl .pos{color:#9FD392}
.chk-bar{display:flex;align-items:center;gap:10px;padding:.6rem 1rem;background:var(--ink);color:#F5EEE2;border-radius:14px;font-size:13px}
.big-q{display:flex;flex-direction:column;gap:.3rem}
.big-q .q{font-family:var(--f-display);font-weight:700;font-size:var(--fs-15);color:var(--text-2)}
.big-q .a{display:flex;align-items:baseline;gap:.6rem}
.mini-stat{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}
.mini-stat>div{padding:.8rem 1rem;border-radius:14px;background:var(--surface-2)}
.mini-stat b{display:block;font-family:var(--f-num);font-weight:800;font-size:1.3rem;line-height:1.3;direction:ltr;text-align:start}
.mini-stat span{font-size:12px;color:var(--text-2)}

/* funnel / bars */
.funnel{display:grid;gap:10px}
.fn{display:grid;grid-template-columns:84px minmax(0,1fr) 128px;gap:12px;align-items:center;font-size:13.5px}
.fn .bar{height:32px;border-radius:10px;background:var(--surface-2);position:relative;overflow:hidden}
.fn .bar i{position:absolute;inset-block:0;inset-inline-start:0;width:var(--w);background:var(--c,var(--amber));border:var(--bw) solid var(--ol);border-radius:10px;transition:width 1s var(--ease)}
.fn .bar span{position:absolute;inset-inline-start:12px;inset-block:0;display:flex;align-items:center;font-family:var(--f-num);font-weight:800;font-size:13px;z-index:1;color:var(--ink)}
.fn .v{text-align:end;color:var(--text-2);font-size:12.5px}.fn .v b{color:var(--text);font-family:var(--f-num)}
/* feed */
.feed{display:grid}
.fi{display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;padding:.7rem 0;border-block-end:var(--bw-h) solid var(--hair-c);font-size:13.5px;line-height:1.65}
.fi:last-child{border-block-end:0}
.fi small{display:block;color:var(--text-3);font-size:11.5px}
/* line chart */
.lc{width:100%;height:auto;display:block;overflow:visible}
.lc .ax{stroke:var(--hair-c);stroke-width:1.5}.lc .tk{fill:var(--text-2);font:600 11px var(--f-body)}
.lc .l-in{fill:none;stroke:var(--sage);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}.lc .l-out{fill:none;stroke:var(--rust);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 0}
.lc .a-in{fill:var(--sage);opacity:.14}.lc .a-out{fill:var(--rust);opacity:.1}
.lc .dot-in{fill:var(--surface);stroke:var(--sage);stroke-width:3}.lc .dot-out{fill:var(--surface);stroke:var(--rust);stroke-width:3}
.lc .hit{fill:transparent;cursor:crosshair}
.lc .hov{stroke:var(--ol);stroke-width:1.5;stroke-dasharray:4 4;opacity:0}
.chart-tip{position:absolute;z-index:5;pointer-events:none;background:var(--ink);color:#F5EEE2;padding:.5rem .8rem;border-radius:12px;font-size:12px;line-height:1.7;opacity:0;transition:opacity .12s;box-shadow:var(--sh-pop);white-space:nowrap;border:1.5px solid var(--amber)}
.chart-tip b{color:var(--amber);font-family:var(--f-num)}
.chart-box{position:relative}
.hbar{display:grid;gap:12px}
.hb{display:grid;grid-template-columns:130px minmax(0,1fr) 82px;gap:10px;align-items:center;font-size:13px}
.hb .tr{height:14px;border-radius:7px;background:var(--surface-2);overflow:hidden;position:relative}
.hb .tr i{position:absolute;inset-block:0;inset-inline-start:0;width:var(--w);background:var(--c,var(--amber));border-radius:7px;transition:width 1s var(--ease)}
.hb b{font-family:var(--f-num);text-align:end}
/* budget bar: budget outline + actual fill */
.bva{display:grid;gap:5px;font-size:12.5px}
.bva .tr{height:16px;border-radius:8px;background:var(--surface-2);position:relative;border:1.5px solid var(--hair-c)}
.bva .tr i{position:absolute;inset-block:0;inset-inline-start:0;border-radius:7px;background:var(--amber);width:var(--w)}
.bva .tr i.over{background:var(--rust)}.bva .tr i.ok{background:var(--sage)}
.bva .tr u{position:absolute;inset-block:-4px;width:3px;background:var(--ol);border-radius:2px;inset-inline-start:var(--b);text-decoration:none}

/* ── kanban (leads) ───────────────────────────────────────────────── */
.kanban{grid-auto-columns:minmax(264px,1fr);padding-block-end:14px}
.kcol-h b{display:flex;gap:8px;align-items:center;font-size:14px}
.kcol-h .sum{font:700 11.5px var(--f-num);color:var(--text-2)}
.kcard{font-size:13.5px}
.kcard .kc-t{font-family:var(--f-display);font-weight:700;font-size:14px;line-height:1.4}
.kcard .kc-m{display:flex;gap:8px;flex-wrap:wrap;color:var(--text-2);font-size:12px}
.kcard .kc-v{font-family:var(--f-num);font-weight:800;direction:ltr;font-size:13px}
.kcard.won{border-inline-start:5px solid var(--sage)}.kcard.lost{border-inline-start:5px solid var(--rust);opacity:.8}
.kcol-add{border:2px dashed var(--hair-c);border-radius:12px;padding:.55rem;color:var(--text-2);font-size:13px;text-align:center;transition:all var(--t-fast)}.kcol-add:hover{border-color:var(--ol);color:var(--text);background:var(--surface)}

/* ── slat wall inside dashboards ──────────────────────────────────── */
.wall.edit .w{cursor:pointer}
.wall.edit .slat{--sh:clamp(90px,10vw,150px)}
.wall.edit .w[aria-selected=true] .slat{outline:3px solid var(--amber);outline-offset:4px}
.wall.edit .w span{color:var(--text-2)}
.st-pick{display:flex;flex-wrap:wrap;gap:8px}
.st-pick button{display:inline-flex;gap:8px;align-items:center;padding:.4rem .9rem;border-radius:var(--r-pill);border:var(--bw-h) solid var(--hair-c);font-size:13px;font-weight:600;background:var(--surface);transition:all var(--t-fast)}
.st-pick button:hover{border-color:var(--ol)}.st-pick button.on{background:var(--ink);color:#F5EEE2;border-color:var(--ink)}
[data-theme="dark"] .st-pick button.on{background:var(--amber);color:var(--ink)}
.row-wall{display:inline-flex;gap:3px;direction:rtl;align-items:flex-end}
.row-wall .slat{--sw:7px;--sh:22px;border-width:1px}
.pct{font-family:var(--f-num);font-weight:800;direction:ltr;display:inline-block}
.prog-mini{display:flex;align-items:center;gap:10px;min-width:150px}
.prog-mini .progress{flex:1;height:10px;border-width:1.5px}
.prog-mini .progress>i{border-inline-end-width:1.5px}

/* ── gantt ────────────────────────────────────────────────────────── */
.gantt{--cw:44px;--lab:220px;overflow:auto;border:var(--bw-h) solid var(--hair-c);border-radius:18px;background:var(--surface);position:relative;max-height:70vh}
.g-in{position:relative;width:max-content;min-width:100%}
.g-head,.g-row{display:grid;grid-template-columns:var(--lab) repeat(var(--cols),var(--cw));align-items:stretch}
.g-head{position:sticky;inset-block-start:0;z-index:4;background:var(--surface-2);border-block-end:var(--bw-h) solid var(--hair-c);font-size:11.5px;font-weight:700;color:var(--text-2)}
.g-head>div{padding:.55rem .3rem;border-inline-start:1px solid var(--hair-c);white-space:nowrap;overflow:hidden}
.g-head .g-lab{padding-inline:1rem}
.g-lab{position:sticky;inset-inline-start:0;z-index:3;background:var(--surface);padding:.6rem 1rem;border-inline-end:var(--bw-h) solid var(--hair-c);font-size:13px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.g-head .g-lab{background:var(--surface-2);z-index:5}
.g-lab b{font-family:var(--f-display);font-weight:700;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-lab small{color:var(--text-2);font-size:11px}
.g-row{border-block-end:1px solid var(--hair-c);min-height:54px}
.g-row:last-child{border-block-end:0}
.g-track{grid-column:2/-1;position:relative;background-image:repeating-linear-gradient(90deg,transparent 0 calc(var(--cw) - 1px),var(--hair-c) calc(var(--cw) - 1px) var(--cw));opacity:1}
.g-seg{position:absolute;inset-block:12px;border-radius:9px;border:var(--bw) solid var(--ol);background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;overflow:hidden;cursor:pointer;transition:transform var(--t-fast),filter var(--t-fast);color:var(--ink);white-space:nowrap}
.g-seg:hover{transform:translateY(-3px);z-index:2;filter:brightness(1.05)}
.g-seg[data-s=done]{background:var(--sage);color:#fff}.g-seg[data-s=doing]{background:linear-gradient(90deg,var(--amber) var(--p),var(--amber-bg) var(--p))}.g-seg[data-s=wait]{background:var(--dusk);color:#fff}.g-seg[data-s=late]{background:var(--rust);color:#fff}.g-seg[data-s=off]{background:var(--surface-2);color:var(--text-2);border-color:var(--hair-c);border-style:dashed}
.g-seg.thin{inset-block:8px}
.g-today{position:absolute;inset-block:0;width:3px;background:var(--rust);z-index:2;pointer-events:none;box-shadow:0 0 10px var(--rust)}
.g-today::before{content:"اليوم";position:absolute;inset-block-start:4px;inset-inline-start:6px;background:var(--rust);color:#fff;font-size:10px;font-weight:800;padding:1px 7px;border-radius:8px}
.g-late{position:absolute;inset-block:0;background:repeating-linear-gradient(135deg,rgba(196,69,42,.16) 0 6px,transparent 6px 12px);pointer-events:none}
.g-tip{position:fixed;z-index:700;pointer-events:none;background:var(--ink);color:#F5EEE2;border:1.5px solid var(--amber);border-radius:12px;padding:.5rem .8rem;font-size:12px;line-height:1.7;opacity:0;transition:opacity .1s;max-width:260px}
.g-tip b{color:var(--amber)}

/* ── paper (quotation) ────────────────────────────────────────────── */
.paper{--text:#17110C;--text-2:#6F5F49;--hair-c:#DFD2BA;--surface:#FFFCF6;--surface-2:#F5EEE2;background:#FFFCF6;color:#17110C;border-radius:6px;box-shadow:0 1px 0 #fff inset,0 24px 60px -20px rgba(23,17,12,.35),0 0 0 1px rgba(23,17,12,.08);padding:clamp(1.4rem,3vw,3rem);position:relative;max-width:900px;margin-inline:auto;width:100%}
.paper::before{content:"";position:absolute;inset-inline:0;inset-block-start:0;height:10px;background:repeating-linear-gradient(90deg,#17110C 0 8px,var(--amber) 8px 16px);border-radius:6px 6px 0 0}
.paper h4{font-size:15px}
.paper .p-h{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-block:12px 20px;border-block-end:2px solid #17110C}
.paper table{width:100%;font-size:13px}
.paper th{background:#17110C;color:#F5EEE2;padding:.5rem .7rem;font-size:11.5px;text-align:start;font-family:var(--f-display)}
.paper td{padding:.45rem .7rem;border-block-end:1px solid #E5DAC4}
.paper .g-row-t td{background:#F5EEE2;font-weight:700;font-family:var(--f-display)}
.paper .tot{display:grid;gap:4px;margin-inline-start:auto;width:min(360px,100%);font-size:14px;margin-block-start:14px}
.paper .tot div{display:flex;justify-content:space-between;padding:.3rem .2rem}
.paper .tot .grand{background:#17110C;color:var(--amber);padding:.7rem .9rem;border-radius:10px;font-family:var(--f-display);font-weight:800;font-size:17px}
.paper .stamp{position:absolute;inset-block-start:90px;inset-inline-start:30px;transform:rotate(-12deg);border:3px solid var(--sage);color:var(--sage-dp);font-family:var(--f-display);font-weight:900;padding:.2rem 1rem;border-radius:10px;font-size:1.2rem;opacity:.85;pointer-events:none}
.paper .stamp.draft{border-color:var(--soft);color:var(--soft)}.paper .stamp.sent{border-color:var(--dusk);color:var(--dusk)}.paper .stamp.expired{border-color:var(--rust);color:var(--rust)}
.rev{display:grid;gap:0}
.rev-i{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;padding-block-end:1.1rem;position:relative}
.rev-i::before{content:"";position:absolute;inset-inline-start:16px;inset-block:34px 0;width:2px;background:var(--hair-c)}.rev-i:last-child::before{display:none}
.rev-i .v{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:800 12px var(--f-num);background:var(--surface-2);border:var(--bw) solid var(--hair-c)}
.rev-i.cur .v{background:var(--amber);border-color:var(--ink)}
@media print{
  body.dash{background:#fff!important}.side,.dtop,.side-scrim,.no-print,.toasts,.fab-wa{display:none!important}
  .dshell{display:block}.dmain{padding:0}.paper{box-shadow:none;border:0;max-width:none;padding:0}.paper::before{display:none}
}

/* ── drawers / bottom bar / misc ──────────────────────────────────── */
.side-panel.dr{width:min(520px,100vw);padding:0;display:flex;flex-direction:column}
.dr-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:1.3rem 1.4rem;border-block-end:var(--bw-h) solid var(--hair-c);position:sticky;inset-block-start:0;background:var(--surface);z-index:2}
.dr-b{padding:1.3rem 1.4rem;display:grid;gap:1.2rem;align-content:start;flex:1}
.dr-f{display:flex;gap:10px;padding:1rem 1.4rem;border-block-start:var(--bw-h) solid var(--hair-c);position:sticky;inset-block-end:0;background:var(--surface)}
.flow{display:flex;gap:0;align-items:stretch;overflow-x:auto;padding-block-end:4px}
.flow .fs{flex:1 0 auto;display:flex;align-items:center;gap:8px;padding:.5rem .9rem;font-size:12.5px;font-weight:600;background:var(--surface-2);color:var(--text-2);position:relative;white-space:nowrap}
.flow .fs:first-child{border-radius:0 12px 12px 0}.flow .fs:last-child{border-radius:12px 0 0 12px}
[dir="ltr"] .flow .fs:first-child{border-radius:12px 0 0 12px}[dir="ltr"] .flow .fs:last-child{border-radius:0 12px 12px 0}
.flow .fs+.fs{margin-inline-start:2px}
.flow .fs.done{background:var(--sage-bg);color:var(--sage-dp)}.flow .fs.on{background:var(--amber);color:var(--ink)}
.po-board{display:grid;grid-template-columns:repeat(5,minmax(230px,1fr));gap:12px;overflow-x:auto}
.po-col{background:var(--surface-2);border-radius:16px;padding:10px;display:flex;flex-direction:column;gap:10px;min-height:200px}
.po-card{background:var(--surface);border:var(--bw-h) solid var(--hair-c);border-radius:12px;padding:10px 12px;display:grid;gap:6px;font-size:13px;cursor:pointer;transition:all var(--t-fast)}
.po-card:hover{border-color:var(--ol);box-shadow:var(--sh-1)}
.po-card.late{border-color:var(--rust)}
.matrix{border-collapse:separate;border-spacing:0;width:100%;font-size:13px;min-width:760px}
.matrix th,.matrix td{padding:.55rem .6rem;text-align:center;border-block-end:1px solid var(--hair-c)}
.matrix th:first-child,.matrix td:first-child{text-align:start;position:sticky;inset-inline-start:0;background:var(--surface);z-index:1;min-width:190px}
.matrix th{font-family:var(--f-display);font-size:12px;background:var(--surface-2);position:sticky;inset-block-start:0}
.pm-cell{width:44px;height:30px;border-radius:9px;border:var(--bw-h) solid var(--hair-c);font:800 11px var(--f-num);transition:all var(--t-fast);background:var(--surface)}
.pm-cell[data-v="1"]{background:var(--dusk-bg);color:var(--dusk);border-color:var(--dusk)}.pm-cell[data-v="2"]{background:var(--amber);color:var(--ink);border-color:var(--ink)}
.pm-cell:hover{transform:scale(1.08)}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.photo-grid .ph{border-radius:14px;overflow:hidden;aspect-ratio:4/3;border:var(--bw-h) solid var(--hair-c);cursor:zoom-in;position:relative;display:block}
.photo-grid .ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}.photo-grid .ph:hover img{transform:scale(1.07)}
.person{display:flex;align-items:center;gap:8px;font-size:13px;white-space:nowrap}
.tabs.inpanel{margin-block-end:1rem}
.sw-row{display:flex;gap:8px}
.token-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.token{border-radius:14px;overflow:hidden;border:var(--bw-h) solid var(--hair-c);font-size:12px}.token i{display:block;height:56px;background:var(--c)}.token div{padding:.5rem .7rem;background:var(--surface)}.token b{display:block;font-family:var(--f-num);font-size:12.5px}
.empty-t{padding:2.4rem 1rem;text-align:center;color:var(--text-2)}
.boq-in{width:100%;min-width:70px;border:1.5px solid transparent;background:transparent;border-radius:8px;padding:.3rem .4rem;font:600 13.5px var(--f-num);text-align:end;direction:ltr;transition:all var(--t-fast)}
.boq-in:hover{border-color:var(--hair-c)}.boq-in:focus{outline:none;border-color:var(--ink);background:var(--card);box-shadow:3px 3px 0 var(--amber)}
.boq-in.txt-in{font-family:var(--f-body);text-align:start;direction:rtl;font-weight:500;min-width:190px}
.boq-g td{background:var(--surface-2);font-family:var(--f-display);font-weight:700;font-size:13px}
.boq-sum{display:grid;gap:6px;font-size:14px}.boq-sum>div{display:flex;justify-content:space-between;gap:10px;align-items:center}
.boq-sum .grand{margin-block-start:6px;padding:.85rem 1rem;background:var(--ink);color:var(--amber);border-radius:14px;font-family:var(--f-display);font-weight:800;font-size:1.1rem}
.boq-sum .grand span:last-child{font-family:var(--f-num)}
.ctrl-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;font-size:13.5px}
.ctrl-row .inp{min-height:38px;width:90px;padding:.3rem .6rem;text-align:center;font-family:var(--f-num);font-weight:700;direction:ltr}
.warn-banner{display:flex;gap:12px;align-items:flex-start;padding:.9rem 1.1rem;border-radius:14px;background:var(--rust-bg);border:var(--bw) solid var(--rust);font-size:13.5px;line-height:1.7}
.warn-banner .ic{color:var(--rust);margin-block-start:2px}
.chips-sm .chip{min-height:34px;padding:.2rem .8rem;font-size:13px}

/* ── login ────────────────────────────────────────────────────────── */
body.login-page{background:var(--bg)}
.login{display:grid;grid-template-columns:1.1fr 1fr;min-height:100vh}
.login-art{position:relative;background:#0E0A07;color:#F5EEE2;padding:clamp(28px,4vw,56px);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;isolation:isolate}
.login-art .bg{position:absolute;inset:0;z-index:-2}.login-art .bg img{width:100%;height:100%;object-fit:cover;opacity:.55;transform:scaleX(-1)}
.login-art::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(14,10,7,.92),rgba(14,10,7,.2) 55%,rgba(14,10,7,.7)),repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 2px,transparent 2px 26px)}
.login-art h1{font-size:clamp(2rem,1rem + 3vw,3.6rem);max-width:13ch}
.login-art .wall{--n:8;max-width:520px;margin-block-start:1.5rem}
.login-art .wall .slat{--sh:clamp(70px,8vw,110px);background:rgba(245,238,226,.12);border-color:rgba(245,238,226,.4)}
.login-art .wall .w span{color:rgba(245,238,226,.7);font-size:10px}
.login-form{display:flex;align-items:center;justify-content:center;padding:clamp(24px,4vw,56px)}
.login-card{width:min(440px,100%);display:grid;gap:1.3rem}
@media (max-width:900px){.login{grid-template-columns:1fr}.login-art{min-height:46vh}}

/* ── gallery (dashboard/index.html) ───────────────────────────────── */
.gal-hero{position:relative;background:var(--night);color:#F5EEE2;padding:clamp(3rem,6vw,6rem) 0 clamp(2.5rem,4vw,4rem);overflow:hidden;isolation:isolate}
.gal-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(55% 90% at 12% 0,rgba(242,163,58,.32),transparent 70%),repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 2px,transparent 2px 28px)}
.gal-hero h1{font-size:clamp(2.2rem,1rem + 4.4vw,4.8rem);line-height:1.2;max-width:16ch}
.gal-wrap{max-width:1380px;margin-inline:auto;padding-inline:clamp(16px,3vw,40px)}
.gal-grp{margin-block:clamp(2.5rem,5vw,4.5rem)}
.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,400px),1fr));gap:clamp(16px,2vw,28px)}
.gcard{display:flex;flex-direction:column;gap:.9rem}
.gframe{position:relative;aspect-ratio:16/10;border-radius:18px;overflow:hidden;border:var(--bw) solid var(--ink);box-shadow:var(--sh-2);background:var(--surface-2);cursor:pointer;transition:transform var(--t-base) var(--ease),box-shadow var(--t-base)}
.gcard:hover .gframe{transform:translate(-3px,-3px);box-shadow:var(--sh-3)}
.gframe iframe{position:absolute;inset-block-start:0;inset-inline-start:0;width:1440px;height:900px;border:0;transform-origin:top left;pointer-events:none;background:var(--bg)}
[dir="rtl"] .gframe iframe{inset-inline-start:auto;left:0}
.gframe .go{position:absolute;inset:0;display:grid;place-items:center;background:rgba(14,10,7,0);transition:background var(--t-base);z-index:2}
.gcard:hover .gframe .go{background:rgba(14,10,7,.35)}
.gframe .go span{opacity:0;transform:scale(.8);transition:all var(--t-base) var(--ease-spring)}.gcard:hover .gframe .go span{opacity:1;transform:none}
.gcard h3{font-size:1.1rem;display:flex;gap:8px;align-items:center}
.gcard h3 .n{font:800 12px var(--f-num);background:var(--ink);color:var(--amber);padding:.1rem .55rem;border-radius:8px}
.gcard p{font-size:13.5px;color:var(--text-2);line-height:1.8}
.pv{position:fixed;inset:0;z-index:700;background:rgba(8,6,4,.92);display:none;flex-direction:column;padding:14px}
.pv.open{display:flex}
.pv-bar{display:flex;align-items:center;gap:10px;color:#F5EEE2;padding:6px 6px 14px;flex-wrap:wrap}
.pv-bar b{font-family:var(--f-display);margin-inline-end:auto}
.pv iframe{flex:1;width:100%;border:0;border-radius:14px;background:var(--bg)}
.legend-ideas{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}

/* ── responsive shell ─────────────────────────────────────────────── */
@media (max-width:1100px){
  .dshell{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;inset-block:0;inset-inline-start:0;width:min(300px,86vw);transform:translateX(105%);transition:transform .45s var(--ease);z-index:530;height:100dvh}
  [dir="ltr"] .side{transform:translateX(-105%)}
  body.side-open .side{transform:none}
  body.side-open .side-scrim{opacity:1;visibility:visible}
  .side-x,.side-burger{display:inline-grid}
  .dsearch{min-width:0;padding-inline:12px}.dsearch>span{display:none}
  .dsearch::after{content:none}
}
@media (max-width:640px){
  .dtop{flex-wrap:wrap}.dt-h{font-size:1.1rem}.dtop .btn-sm:last-child{display:none}
  .dd-menu.notif{position:fixed;inset-inline:12px;inset-block-start:64px;width:auto}
  .hb{grid-template-columns:90px minmax(0,1fr) 64px}.fn{grid-template-columns:62px minmax(0,1fr) 84px}
  .login-form{padding:20px}
}

/* ── BOQ cost column toggle ───────────────────────────────────────── */
.boq-t .c-cost{display:none}.boq-t.show-cost .c-cost{display:table-cell}
.boq-t th,.boq-t td{vertical-align:middle}
.boq-sticky{position:sticky;inset-block-start:calc(var(--proto-h,0px) + 78px);display:grid;gap:16px;align-content:start}
@media (max-width:1180px){.boq-sticky{position:static}}
.legend-row{display:flex;gap:6px 16px;flex-wrap:wrap;font-size:12.5px;color:var(--text-2)}
.legend-row span{display:inline-flex;gap:6px;align-items:center}.legend-row i{display:inline-block;width:12px;height:12px;border-radius:4px;border:1.5px solid var(--ol)}

/* table cells must stay table cells even with .num */
.tbl td.num,.tbl th.num,.paper td.num,.paper th.num,.matrix td.num{display:table-cell}
.paper .stamp{inset-block-start:34px;inset-inline-start:auto;left:46%;transform:rotate(-8deg)}
.boq-t{min-width:0!important;width:100%}
.boq-t .boq-in{min-width:56px}.boq-t .boq-in.txt-in{min-width:110px}
.boq-t td:nth-child(2){width:38%}
.boq-t .tag{font-size:10.5px;padding:0 .5rem}

/* site reports list */
.sr-list{display:grid;gap:8px}
.sr-i{display:flex;align-items:center;gap:12px;width:100%;padding:.7rem .85rem;border-radius:14px;border:var(--bw-h) solid var(--hair-c);background:var(--surface);transition:all var(--t-fast)}
.sr-i:hover{border-color:var(--ol)}.sr-i.on{border-color:var(--ink);box-shadow:var(--sh-1);background:var(--amber-bg)}
[data-theme="dark"] .sr-i.on{border-color:var(--amber);box-shadow:3px 3px 0 var(--amber)}
.sr-i .ti{font-weight:600;font-size:14px}.sr-i .su{font-size:12px;color:var(--text-2)}
@media (max-width:640px){#phead>.row{flex-direction:column;align-items:stretch}#phead .col{align-items:flex-start!important}.ph .acts{width:100%}}

/* forms inside modals */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.form-grid .full{grid-column:1/-1}
@media (max-width:560px){.form-grid{grid-template-columns:minmax(0,1fr)}}
.modal .lbl .opt{margin-inline-start:6px}
.modal .lbl,.dr .lbl{justify-content:flex-start;gap:6px}
.panel.flush .tbl-wrap .tbl.dense td,.panel.flush .tbl-wrap .tbl.dense th{padding-inline:.6rem}