/*
 * clickerp-wave3.css — copied from the approved prototype (Click ERP-Final V-modern).
 * Design tokens (colours, radius, shadows, sizes) were moved to foundations.css;
 * use those tokens here — do not add new colours or sizes.
 */
/* =====================================================================
   Wave 3 — UX polish layer (Operations pass)
   Sticky tables, density setting, filter chips, states, micro-interactions.
   Kept as a separate layer so it can be reviewed and ported per module.
   ===================================================================== */

/* ---------- 1. Tables: sticky header, pinned id column, pinned actions ---------- */
.tw{overflow:auto;max-height:72vh;scrollbar-width:thin;overscroll-behavior-x:contain}
.tw table.grp thead th{position:sticky;top:0;z-index:5;background:var(--surface);box-shadow:0 1px 0 var(--line)}
/* pin the checkbox + first data column only on tables that have a selection column */
.tw table.grp:has(th.chk) th.chk,.tw table.grp:has(th.chk) td.chk{position:sticky;inset-inline-start:0;z-index:6;background:var(--surface)}
.tw table.grp:has(th.chk) thead th:nth-child(2),.tw table.grp:has(th.chk) tbody td:nth-child(2){position:sticky;inset-inline-start:42px;z-index:4;background:var(--surface)}
.tw table.grp:has(th.chk) tbody td:nth-child(2)::after,.tw table.grp:has(th.chk) thead th:nth-child(2)::after{content:"";position:absolute;inset-block:0;inset-inline-end:-1px;width:10px;pointer-events:none;background:linear-gradient(to left,rgba(16,26,46,.06),transparent)}
[dir="ltr"] .tw table.grp:has(th.chk) tbody td:nth-child(2)::after,[dir="ltr"] .tw table.grp:has(th.chk) thead th:nth-child(2)::after{background:linear-gradient(to right,rgba(16,26,46,.06),transparent)}
.tw table.grp th.act,.tw table.grp td.act{position:sticky;inset-inline-end:0;z-index:4;background:var(--surface);border-inline-start:1px solid var(--line-2)}
/* corner stacking: pinned headers must sit above scrolling headers */
.tw table.grp thead th.act{z-index:7}
.tw table.grp:has(th.chk) thead th.chk{z-index:8}
.tw table.grp:has(th.chk) thead th:nth-child(2){z-index:7}
/* hover + selection applied on cells so pinned cells follow */
.tw table.grp tbody tr:hover td{background:#f6f9fd}
.tw table.grp tbody tr.selrow td{background:var(--green-soft)}
.tw table.grp tbody td{transition:background .12s ease}
.rowacts .icon-btn{opacity:.78;transition:opacity .12s ease}
.tw table.grp tbody tr:hover .rowacts .icon-btn{opacity:1}

/* ---------- 2. Density: user setting (comfortable default / compact) ---------- */
body[data-density="compact"] .grp td{padding-block:7px}
body[data-density="compact"] .grp th{padding-block:8px}
body[data-density="compact"] .gcell{gap:1px}
body[data-density="compact"] .gcell small{line-height:1.35}
body[data-density="compact"] .card.kpi{padding:10px 14px}
body[data-density="compact"] .scard{padding-block:8px}
body[data-density="compact"] .fbar{padding-block:10px}

/* ---------- 3. Applied-filter chips row ---------- */
.w3-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-4px 0 2px}
.w3-chips .w3c{display:inline-flex;align-items:center;gap:6px;background:var(--navy-soft);color:var(--navy);border:1px solid #d8e0ef;border-radius:999px;padding:3px 6px 3px 10px;font-size:12px;font-weight:600}
.w3-chips .w3c em{font-style:normal;color:var(--muted);font-weight:500}
.w3-chips .w3c button{all:unset;cursor:pointer;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font-size:12px;line-height:1;color:var(--navy)}
.w3-chips .w3c button:hover{background:#d8e0ef}
.w3-chips .w3-clear{all:unset;cursor:pointer;font-size:12px;font-weight:700;color:var(--red-text,#c6352c);padding:3px 8px;border-radius:8px}
.w3-chips .w3-clear:hover{background:var(--red-soft)}
.w3-chips .w3-save{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--muted);padding:3px 8px;border-radius:8px;border:1px dashed var(--line)}
.w3-chips .w3-save:hover{color:var(--navy);border-color:var(--navy-soft);background:var(--navy-soft)}

/* ---------- 4. States: empty-state polish + page transition ---------- */
.tempty{padding:34px 16px}
.tempty svg{width:34px;height:34px;color:var(--muted-2);background:var(--bg);border-radius:50%;padding:7px;box-sizing:content-box;margin-bottom:4px}
.tempty b{font-size:14.5px}
.tempty small{color:var(--muted)}
@keyframes w3in{from{opacity:.92;transform:translateY(5px)}to{opacity:1;transform:none}}
.page.w3-in{animation:w3in .16s ease-out}
@media (prefers-reduced-motion:reduce){.page.w3-in{animation:none}}

/* ---------- 5. Interactive affordances ---------- */
.scard,.pg,.qf{transition:transform .12s ease,box-shadow .12s ease}
.scard:hover,.pg:hover,.qf:hover{transform:translateY(-1px);box-shadow:0 3px 10px -6px rgba(16,26,46,.28)}
.scard:active,.pg:active{transform:none}
.seg.tabs button,.kit-sub button{transition:background .12s ease,color .12s ease}
.btn{transition:background .12s ease,border-color .12s ease,box-shadow .12s ease}
.btn-primary:hover{box-shadow:0 2px 8px -3px rgba(22,35,63,.45)}
@media (prefers-reduced-motion:reduce){.scard,.pg,.qf,.btn{transition:none}.scard:hover,.pg:hover,.qf:hover{transform:none}}

/* density toggle button in topbar */
.w3-density.icon-btn.on{background:var(--navy-soft);color:var(--navy)}

/* ---------- 6. Figma restyle: navy banner page headers (reference: Figma v3 list/record banners) ---------- */
.page-head{background:linear-gradient(135deg,#16233f 0%,#1b2b4d 100%);border-radius:16px;padding:22px 24px 20px;position:relative;overflow:hidden;margin-bottom:14px;flex-wrap:wrap;row-gap:12px}
.page-head::before{content:"";position:absolute;inset:0;pointer-events:none;background:
 radial-gradient(circle 140px at 12% -30%,rgba(255,255,255,.05),transparent 70%),
 radial-gradient(circle 190px at 4% 130%,rgba(122,182,72,.10),transparent 70%);
}
.page-head>div{position:relative}
.page-head h1{color:#fff}
.page-head p{color:rgba(255,255,255,.72)}
.page-head .back{color:rgba(255,255,255,.85)}
.page-head .back:hover{color:#fff}
.page-head .hdrtag{background:rgba(255,255,255,.12);color:#ffd9a8;border:0}
.page-head code{background:rgba(255,255,255,.1);color:rgba(255,255,255,.75)}
.page-head .actions{position:relative;align-self:flex-end}
.page-head .actions .btn-ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff}
.page-head .actions .btn-ghost:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.28)}
.page-head .actions .btn-primary{background:var(--green);border-color:var(--green);color:#fff;font-weight:700}
.page-head .actions .btn-primary:hover{background:var(--green-d);border-color:var(--green-d)}
/* stat tiles moved inside the banner */
.page-head .w3-btiles{flex-basis:100%;display:flex;gap:10px;flex-wrap:wrap;margin-top:6px;position:relative}
.page-head .w3-btiles .scard,.page-head .w3-btiles .card.kpi{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:12px;box-shadow:none;color:#fff;min-width:148px;flex:1 1 150px;max-width:230px}
.page-head .w3-btiles .scard:hover,.page-head .w3-btiles .card.kpi:hover{background:rgba(255,255,255,.12);transform:none;box-shadow:none}
.page-head .w3-btiles .sct,.page-head .w3-btiles .kl span,.page-head .w3-btiles .kc{color:rgba(255,255,255,.72)}
.page-head .w3-btiles b.num,.page-head .w3-btiles .kv{color:#fff}
.page-head .w3-btiles .sci,.page-head .w3-btiles .ni{background:rgba(255,255,255,.10)!important;color:#cfe0f5!important}
.page-head .w3-btiles .sbar{display:none}
.page-head .w3-btiles .scard.on{border-color:#e9a13b;background:rgba(233,161,59,.10)}
.page-head .w3-btiles .scard.on b.num{color:#f0b35f}
.page-head .w3-btiles .scard.on .scon{background:#e9a13b;color:#16233f}
.page-head .w3-btiles .tag{background:rgba(255,255,255,.12);color:#e8f3dd}
.page-head .w3-btiles .tag.r{color:#ffb4ad}.page-head .w3-btiles .tag.a{color:#ffd9a8}.page-head .w3-btiles .tag.g{color:#cfe9b5}
@media (max-width:900px){.page-head{padding:18px 16px}}

/* ---------- 7. banner ring pattern (Figma motif) + home banner internals ---------- */
.page-head::after{content:"";position:absolute;inset:0;pointer-events:none;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Ccircle cx='150' cy='150' r='118' fill='none' stroke='%23ffffff' stroke-opacity='0.055' stroke-width='30'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='230' height='230'%3E%3Ccircle cx='115' cy='115' r='88' fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='24'/%3E%3C/svg%3E");
 background-repeat:no-repeat,no-repeat;
 background-position:left -90px bottom -120px,right -70px top -95px}
.page-head>div,.page-head .actions,.page-head .w3-btiles,.page-head .hh-tiles{position:relative;z-index:1}
.page-head .hh-top{display:block;color:rgba(255,255,255,.55);font-size:12px;margin-bottom:4px}
.page-head .hh-link{color:#cfe9b5;font-size:13px;font-weight:700;display:inline-flex;align-items:center;gap:5px;margin-inline-end:6px}
.page-head .hh-link:hover{color:#e8f6d8}
.page-head .hh-link svg{width:15px;height:15px}
.page-head .hh-tiles{flex-basis:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-top:14px}
.page-head .hh-tile{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:11px 13px;color:#fff;transition:background .12s ease,border-color .12s ease}
.page-head .hh-tile:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.26)}
.page-head .hh-ti{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.1);display:grid;place-items:center;flex:none;color:#cfe0f5}
.page-head .hh-ti svg{width:17px;height:17px}
.page-head .hh-tx{min-width:0;display:flex;flex-direction:column}
.page-head .hh-tx b{font-size:13.5px}
.page-head .hh-tx small{color:rgba(255,255,255,.62);font-size:11.5px}
.page-head .hh-arr{margin-inline-start:auto;color:rgba(255,255,255,.45)}
.page-head .hh-arr svg{width:15px;height:15px}
.page-head .hh-tile:hover .hh-arr{color:#fff}

/* ---------- 8. home: attention tile grid (Figma «يحتاج انتباهك اليوم») ---------- */
.hatt2{display:flex;flex-direction:column;gap:10px}
.hatt2-h{display:flex;align-items:baseline;gap:10px;padding-inline-start:10px;border-inline-start:3px solid var(--navy)}
.hatt2-h h3{margin:0;font-size:15.5px}
.hatt2-h span{color:var(--muted);font-size:12px}
.hatt2-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.h-tile{position:relative;display:flex;flex-direction:column;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;box-shadow:var(--shadow);color:var(--ink);transition:transform .12s ease,box-shadow .12s ease}
.h-tile:hover{transform:translateY(-1px);box-shadow:0 4px 14px -8px rgba(16,26,46,.3)}
.h-tile .ni{position:absolute;inset-inline-end:12px;top:12px}
.h-tile b.num{font-size:24px;line-height:1.15;margin-top:2px}
.h-tile .tt{font-weight:700;font-size:13.5px}
.h-tile small{color:var(--muted);font-size:12px}
@media (prefers-reduced-motion:reduce){.h-tile,.page-head .hh-tile{transition:none}.h-tile:hover{transform:none}}

/* ---------- 9. spacing system + card rhythm fixes ---------- */
/* one vertical rhythm for every page: flex column with a single gap token */
#app .page{display:flex;flex-direction:column;gap:14px}
#app .page>*{margin-block:0}
.page-head{margin-bottom:0}
.hsc{margin:0}
.w3-chips{margin:0}
.fbar.second{margin-top:-6px}
/* attention tiles: reserve the icon corner, equal heights, consistent scale */
.hatt2-g{align-items:stretch}
.h-tile{min-height:116px;padding:14px 16px;padding-inline-end:60px;justify-content:flex-start}
.h-tile .ni{width:34px;height:34px}
.h-tile b.num{font-size:26px;letter-spacing:-.5px}
.h-tile .tt{line-height:1.45}
.h-tile small{line-height:1.5}
/* KPI cards: equal heights + internal rhythm */
.grid-kpi{align-items:stretch}
.card.kpi{display:flex;flex-direction:column;justify-content:space-between;gap:4px}
.card.kpi .kl{display:flex;align-items:center;gap:9px}
/* sections grid: no truncation, aligned cells */
.hs-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1px}
.hs-c{align-items:flex-start;gap:10px;padding:14px 16px}
.hs-c em{white-space:normal;line-height:1.55;display:block}
.hs-c small{line-height:1.4}
.hs-c b.num{font-size:20px;display:block;margin:2px 0}
/* banner quick tiles + banner paddings rhythm */
.page-head{row-gap:14px}
.page-head .hh-tiles{margin-top:10px}

/* ---------- 10. table overflow affordance (pinned actions is an overlay, not a gap) ---------- */
.tw{scrollbar-gutter:stable}
.tw::-webkit-scrollbar{height:8px;width:8px}
.tw::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
.tw::-webkit-scrollbar-thumb:hover{background:var(--muted-2)}
.tw.w3-ovx table.grp td.act,.tw.w3-ovx table.grp th.act{box-shadow:10px 0 14px -10px rgba(16,26,46,.35)}
[dir="ltr"] .tw.w3-ovx table.grp td.act,[dir="ltr"] .tw.w3-ovx table.grp th.act{box-shadow:-10px 0 14px -10px rgba(16,26,46,.35)}
.tw:not(.w3-ovx) table.grp th.act,.tw:not(.w3-ovx) table.grp td.act{position:static;border-inline-start:0;box-shadow:none}
.tw:not(.w3-ovx) table.grp:has(th.chk) th.chk,.tw:not(.w3-ovx) table.grp:has(th.chk) td.chk,
.tw:not(.w3-ovx) table.grp:has(th.chk) thead th:nth-child(2),.tw:not(.w3-ovx) table.grp:has(th.chk) tbody td:nth-child(2){position:static}
.tw:not(.w3-ovx) table.grp:has(th.chk) tbody td:nth-child(2)::after,.tw:not(.w3-ovx) table.grp:has(th.chk) thead th:nth-child(2)::after{display:none}
/* slim scroll affordance on tab strips */
.seg::-webkit-scrollbar,.kit-sub::-webkit-scrollbar{height:4px}
.seg::-webkit-scrollbar-thumb,.kit-sub::-webkit-scrollbar-thumb{background:transparent;border-radius:4px}
.seg:hover::-webkit-scrollbar-thumb,.kit-sub:hover::-webkit-scrollbar-thumb{background:var(--line)}

/* =====================================================================
   11. FIGMA DESIGN SYSTEM (v3) — surfaces, stat cards, section titles
   Source of truth: Figma «نظام التصميم v3» + home frame.
   - Surfaces: white, 1px border #dfe4ee, radius 12, NO elevation.
     Elevation is reserved for overlays (menus, popovers, modals, toasts).
   - Stat number: «v3/رقم الإحصاء» Cairo Bold 24.
   - Card padding 16 · grid gap 12 · section title with lime start-bar.
   ===================================================================== */


/* flat surfaces everywhere inside the page */
#app .page .card,#app .page .kpi,#app .page .scard,#app .page .pg,#app .page .qf,#app .page .h-tile,
#app .page .hs-c,#app .page .cvcard,#app .page .uk-kpi,#app .page .hk,#app .page .ovc,#app .page .pl,
#app .page .fbar,#app .page .flowbar,#app .page .card.flow{box-shadow:none!important}
#app .page .card,#app .page .h-tile,#app .page .scard,#app .page .pg,#app .page .fbar{border:1px solid var(--ds-border);border-radius:var(--ds-radius)}
/* hover = border tone only (no lift, no shadow) */
#app .page .h-tile:hover,#app .page .card.kpi.hk:hover,#app .page .scard:hover,#app .page .pg:hover,#app .page .qf:hover,#app .page .uk-kpi:hover,#app .page .hk:hover{transform:none!important;border-color:var(--ds-border-hover)}
/* selected stat card (Figma state «محدد») = navy 1.5px border, no glow */
#app .page .scard.on,#app .page .pg.on{border-color:var(--navy);box-shadow:inset 0 0 0 .5px var(--navy)!important}
/* the banner stays as-is (it's a hero, not a surface) */
#app .page .page-head{border:0}

/* section titles — Figma lime start-bar */
.hatt2-h{border-inline-start:3px solid var(--ds-accent);padding-inline-start:10px}
.hatt2-h h3{font-size:16px;font-weight:700;color:var(--ink)}
.hatt2-h span{font-size:12px;color:var(--muted)}
.hatt2{gap:var(--ds-gap)}

/* attention cards — Figma anatomy: icon → title → number → caption */
.hatt2-g{display:grid;gap:var(--ds-gap);grid-template-columns:repeat(3,minmax(0,1fr))}
.hatt2-g[data-n="1"]{grid-template-columns:1fr}
.hatt2-g[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.hatt2-g[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.hatt2-g[data-n="5"]{grid-template-columns:repeat(6,minmax(0,1fr))}
.hatt2-g[data-n="5"]>.h-tile{grid-column:span 2}
.hatt2-g[data-n="5"]>.h-tile:nth-child(n+4){grid-column:span 3}
#app .page .h-tile{position:static;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:0;padding:var(--ds-pad);background:var(--surface)}
#app .page .h-tile .ni{position:static;width:32px;height:32px;border-radius:8px;margin-bottom:4px}
#app .page .h-tile .ni svg{width:16px;height:16px}
#app .page .h-tile .tt{font-size:14px;font-weight:600;color:var(--ink);line-height:1.45}
#app .page .h-tile b.num{font-size:24px;font-weight:700;line-height:1.15;letter-spacing:0;color:var(--ink);margin:0}
#app .page .h-tile small{font-size:12px;color:var(--muted);line-height:1.5}

/* stat (KPI) cards — Figma «v3/بطاقة إحصاء» */
#app .page .grid-kpi{gap:var(--ds-gap)}
#app .page .card.kpi{padding:var(--ds-pad);gap:6px;justify-content:flex-start}
#app .page .card.kpi .kl{font-size:14px;font-weight:600;color:var(--ink)}
#app .page .card.kpi .kl .ni{width:32px;height:32px;border-radius:8px}
#app .page .card.kpi .kv{font-size:24px!important;font-weight:700;letter-spacing:0!important;margin:4px 0 0!important;line-height:1.15}
#app .page .card.kpi .kv .cur{font-size:13px;font-weight:600;color:var(--muted)}
#app .page .card.kpi .kb{margin-top:2px;font-size:12px}
#app .page .card.kpi .kc{color:var(--muted)}

/* banner tiles keep their translucent style (override the flat rule above) */
#app .page .page-head .w3-btiles .scard,#app .page .page-head .w3-btiles .card.kpi{border:1px solid rgba(255,255,255,.14)}
#app .page .page-head .w3-btiles .scard.on{border-color:#e9a13b;box-shadow:none!important}
#app .page .page-head .w3-btiles .card.kpi .kl,#app .page .page-head .w3-btiles .card.kpi .kv{color:#fff}

@media (max-width:1100px){.hatt2-g,.hatt2-g[data-n="4"],.hatt2-g[data-n="5"]{grid-template-columns:repeat(2,minmax(0,1fr))}.hatt2-g[data-n="5"]>.h-tile,.hatt2-g[data-n="5"]>.h-tile:nth-child(n+4){grid-column:auto}}
@media (max-width:640px){.hatt2-g,.hatt2-g[data-n]{grid-template-columns:1fr}}

/* 12. icon chips — Figma tonal chip (tinted bg + tone icon), global for page cards */
#app .page .ni{display:grid;place-items:center;flex:none;border-radius:8px;background:var(--navy-soft);color:var(--navy)}
#app .page .ni.r{background:var(--red-soft);color:var(--red)}
#app .page .ni.a{background:var(--amber-soft);color:var(--amber)}
#app .page .ni.g{background:var(--green-soft);color:var(--green-d)}
#app .page .ni.n,#app .page .ni.b{background:var(--navy-soft);color:var(--navy)}
#app .page .ni.gr{background:#eef1f5;color:var(--muted)}

/* 13. home toolbar — every control on one 40px field style */
#app .page .hsc{align-items:center;gap:10px}
#app .page .hsc .seg{height:40px;box-shadow:none}
#app .page .hsc .uk-sel{height:40px;border:1px solid var(--ds-border);border-radius:10px;box-shadow:none}
#app .page .hsc .hrole{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 6px 0 12px;border:1px solid var(--ds-border);border-radius:10px;background:var(--surface);box-shadow:none;color:var(--muted);font-size:13px}
#app .page .hsc .hrole svg{width:16px;height:16px}
#app .page .hsc .hrole select{border:0;background:transparent;box-shadow:none;height:34px;padding:0 4px;font-weight:700;color:var(--ink);font-family:inherit;font-size:13px}

/* =====================================================================
   14. HOME — Figma home frame (000) applied literally
   Sections, stage panels, department cards, chart language, banner 2×2.
   ===================================================================== */
.hsec{display:flex;flex-direction:column;gap:12px}

/* banner: text right, 2×2 quick tiles left (Figma proportions) */
@media(min-width:1101px){
 #app .page .page-head.hh{display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,500px);grid-template-areas:"txt tiles" "act tiles";column-gap:30px;row-gap:12px;align-items:start}
 #app .page .page-head.hh>div:first-child{grid-area:txt}
 #app .page .page-head.hh>.actions{grid-area:act;align-self:end;justify-self:start;width:auto}
 #app .page .page-head.hh .hh-tiles{grid-area:tiles;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0;align-self:center}
}
.page-head.hh h1{font-size:26px;letter-spacing:-.4px}
.hh-hl{color:#f3c66b;font-weight:800}

/* معاينة كـ: keep the select inside its 40px pill (global 42px select rule was overflowing it) */
#app .page .hsc .hrole select{appearance:none;-webkit-appearance:none;height:32px;min-height:32px;line-height:32px;padding:0 8px;padding-inline-end:24px;border-radius:8px;background-color:var(--bg);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235f6c80' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 7px center;background-size:13px}
body[dir="ltr"] #app .page .hsc .hrole select{background-position:right 7px center}

/* stage panels (Figma «قبل الوصول / بعد الوصول») */
.hpath2{display:grid;grid-template-columns:4fr 5fr;gap:12px}
#app .page .hpg{padding:0;overflow:hidden}
.hpg-h{display:flex;align-items:baseline;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--bg)}
.hpg-h b{font-size:13.5px;color:var(--ink)}
.hpg-h span{font-size:11.5px;color:var(--muted)}
.hpg-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.hpg-g.n5{grid-template-columns:repeat(5,minmax(0,1fr))}
.hst{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;padding:16px 8px 14px;border-inline-end:1px solid var(--line-2);color:var(--ink);transition:background .12s ease}
.hst:last-child{border-inline-end:0}
.hst .ni{width:32px;height:32px;margin-bottom:3px}
.hst .ni svg{width:16px;height:16px}
.hst-t{font-size:12.5px;font-weight:600;color:var(--body);line-height:1.35}
.hst>b.num{font-size:24px;font-weight:700;line-height:1.1}
.hst small{font-size:11px;color:var(--muted-2)}
.hst:hover{background:var(--bg)}
.hst.cur{background:var(--amber-soft)}
.hst.cur:hover{background:#fbedd4}
.hst.cur>b.num{color:var(--amber-text,#95641f)}
.hst.x>b.num{color:var(--red-text,#c6352c)}
@media(max-width:1200px){.hpath2{grid-template-columns:1fr}}
@media(max-width:760px){.hpg-g,.hpg-g.n5{grid-template-columns:repeat(3,minmax(0,1fr))}.hst{border-bottom:1px solid var(--line-2)}}

/* department summary cards (Figma «ملخص الأقسام») */
.hdep-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
#app .page .hdep{display:flex;flex-direction:column;gap:6px;padding:14px 16px;color:var(--ink)}
.hdep-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.hdep-top .tag{font-size:11px}
.hdep-go{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;color:var(--muted)}
.hdep-go svg{width:13px;height:13px}
#app .page .hdep:hover .hdep-go{color:var(--navy)}
.hdep-t{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.45;min-height:2.6em;display:flex;align-items:flex-end}
#app .page .hdep>b.num{font-size:24px;font-weight:700;line-height:1.15}
#app .page .hdep>small{font-size:11.5px;color:var(--muted);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
@media(max-width:1300px){.hdep-g{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.hdep-g{grid-template-columns:repeat(2,minmax(0,1fr))}.hdep-t{min-height:0}}
@media(max-width:560px){.hdep-g{grid-template-columns:1fr}}

/* analytics grid: chart spans 2, nationality beside; then occupation + gender + offices */
.hgrid2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:stretch}
.hgrid2>*{min-width:0}
.hgrid2 .hc-trend{grid-column:span 2}
@media(max-width:1200px){.hgrid2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.hgrid2{grid-template-columns:1fr}.hgrid2 .hc-trend{grid-column:auto}}

/* Figma bar chart: value labels, rounded bars, latest month lime */
.hch{display:flex;align-items:stretch;gap:8px;height:206px;padding:10px 2px 0}
.hch-c{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.hch-c>b{font-size:11.5px;color:var(--ink)}
.hch-t{flex:1;width:100%;max-width:34px;display:flex;align-items:flex-end}
.hch-t i{display:block;width:100%;border-radius:6px 6px 2px 2px;background:var(--navy);min-height:3px;transition:height .25s ease}
.hch-t i.lm{background:var(--green)}
.hch-c small{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.hch-y{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.hch-chip{display:flex;flex-direction:column;align-items:center;border:1px solid var(--ds-border);border-radius:10px;padding:5px 14px 6px;background:var(--surface);min-width:64px;transition:border-color .12s ease}
.hch-chip b{font-size:17px;color:var(--ink);line-height:1.2}
.hch-chip span{font-size:11px;color:var(--muted);font-weight:600}
.hch-chip:hover{border-color:var(--ds-border-hover)}
.hch-chip.on{border-color:var(--navy);box-shadow:inset 0 0 0 .5px var(--navy)}
.hch-chip.on span{color:var(--navy)}

/* gender: one stacked bar + legend (Figma) */
.hgen{display:flex;flex-direction:column;gap:14px;padding:4px 0 2px}
.hgen-bar{display:flex;height:16px;border-radius:999px;overflow:hidden}
.hgen-bar i{background:var(--navy)}
.hgen-bar em{background:var(--green)}
.hgen-leg{display:flex;gap:20px;flex-wrap:wrap;font-size:13px;color:var(--body)}
.hgen-leg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-inline-end:6px}
.hgen-leg i.k1{background:var(--navy)}
.hgen-leg i.k2{background:var(--green)}
.hgen-leg b{color:var(--ink)}
.hgen-leg em{font-style:normal;color:var(--muted)}

/* hbar charts: Figma weights (bold counts, 9px rounded track) */
.card .hbar .track{height:9px}
.card .hbar .n{font-weight:700}

/* activity rows: tonal icon chip like Figma */
.ha-list .act-row{gap:11px;align-items:center}
.ha-list .act-row .ni{width:32px;height:32px}
.ha-list .act-row .ni svg{width:15px;height:15px}

/* compact tables inside the analytics third-width cards (no inner scroll) */
.hgrid2 .tw table{min-width:100%}
.hgrid2 .tw th{padding:10px;font-size:11.5px;white-space:nowrap}
.hgrid2 .tw td{padding:10px;font-size:12.5px;white-space:nowrap}
.hgrid2 .uk-long{max-width:112px}
.hgrid2 .tw td .tag{font-size:10.5px;padding:2px 7px}
.hgrid2 .tw td small.cm{font-size:11px}
/* chart filters inline beside the title */
.hc-trend .card-h{flex-wrap:nowrap}
.hc-trend .ha-f{flex-wrap:nowrap}
.hc-trend .ha-f .uk-sel{max-width:140px;min-width:0}

/* =====================================================================
   15. REPORTS CENTRE — Figma 033 (reports) + 034 (analytics)
   ===================================================================== */
.rep-grid{gap:12px}
#app .page .card.rep{gap:12px;padding:16px}
.rep-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.rep-h .si{order:2;width:38px;height:38px;border-radius:10px;background:var(--navy-soft);color:var(--navy);display:grid;place-items:center;flex:none}
.rep-h b{font-size:15px}
.rep-h small{margin-top:4px;line-height:1.55}
.rep-meta{gap:6px}
.rep-meta .tag{font-size:11px}
.fchip{border:1px solid var(--ds-border);border-radius:8px;background:#fff;font-size:11.5px;font-weight:700;color:var(--body);padding:5px 10px;font-family:"IBM Plex Sans",sans-serif;cursor:pointer}
.fchip:hover{border-color:var(--ds-border-hover)}
#app .page .card.rep.sel{border-color:var(--navy);box-shadow:inset 0 0 0 .5px var(--navy)!important}
.rep-f{margin-top:auto}
.rep-f .btn{height:36px;font-size:12.5px}
.fchips{display:flex;gap:6px}
.fchips .fchip{width:auto;height:30px;display:inline-flex;align-items:center;white-space:nowrap}
.newchip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:#95641f;background:var(--amber-soft);border:1px dashed #e4c98f;border-radius:999px;padding:3px 10px;vertical-align:middle;margin-inline-start:8px}
.newchip svg{width:12px;height:12px}
.sched .attn-row .tag{flex:none;margin-inline-end:4px}

/* analytics KPI tiles (Figma 034 anatomy: title right, icon chip left, 24-bold number) */
#app .page .gc{display:flex;flex-direction:column;gap:6px;padding:16px}
.gc .kl{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink)}
.gc .kl svg{order:2;width:32px;height:32px;padding:7px;box-sizing:border-box;border-radius:8px;background:var(--navy-soft);color:var(--navy);flex:none}
#app .page .gc .kv{font-size:24px;font-weight:700;letter-spacing:0;margin:0;line-height:1.15}
#app .page .gc small{font-size:11.5px;color:var(--muted);line-height:1.6}

/* dual-series chart (2025 light / 2026 navy) with value labels */
.hch2{height:230px}
.hch2 .hch-t{max-width:34px}
.hch-t.two{display:flex;align-items:flex-end;gap:3px}
.hch-t.two i{display:block;width:50%;min-height:3px;border-radius:5px 5px 2px 2px;background:var(--navy)}
.hch-t.two i.s25{background:#c9d3e2}

/* banner stat tiles on the reports head */
.page-head .w3-btiles .scard{align-items:flex-start;gap:6px;cursor:default}
.page-head .w3-btiles .scard b.num{font-size:24px}

/* =====================================================================
   16. FINANCE — Figma 063 (journal master-detail) + 070 (documents)
   ===================================================================== */
/* master-detail: table right, entry panel left */
.jeg{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:12px;align-items:start}
@media(max-width:1200px){.jeg{grid-template-columns:minmax(0,1fr)}}
.jet tbody tr{cursor:pointer}
.jetags{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:4px}
.jetags .tag{font-size:10.5px}
.jetags small{color:var(--muted)}
#app .page .jep{padding:16px;position:sticky;top:84px}
@media(max-width:1200px){#app .page .jep{position:static}}
.jep-h b{font-size:15.5px;color:var(--ink)}
.jep-h small{display:block;color:var(--muted);font-size:12px;margin-top:3px;line-height:1.6}
.jep-tags{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 4px}
.jep-kv{display:flex;flex-direction:column;margin-top:4px}
.jep-kv>div{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-2)}
.jep-kv small{color:var(--muted);font-size:12px;flex:none}
.jep-kv b{font-size:12.5px;color:var(--ink);font-weight:600;text-align:start;overflow-wrap:anywhere}
.jep-lines{margin-top:12px}
.jep-lines>b{display:block;font-size:12.5px;color:var(--ink);margin-bottom:6px}
.jep-lines table{width:100%;border:1px solid var(--line);border-radius:8px;border-collapse:separate;border-spacing:0;overflow:hidden}
.jep-lines th{font-size:10.5px;padding:7px 8px;background:var(--bg)}
.jep-lines td{font-size:11.5px;padding:7px 8px;border-bottom:1px solid var(--line-2);white-space:normal}
.jep-lines tr.tot td{background:var(--bg);font-weight:800;border-bottom:0}
.jebal{display:flex;align-items:center;gap:7px;margin-top:12px;background:var(--green-soft);color:var(--green-text,#4a7626);border-radius:8px;padding:9px 11px;font-size:12px;font-weight:700}
.jebal svg{width:14px;height:14px}
.jep-act{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.jep-note{margin:12px 0 0;font-size:11px;color:var(--muted-2);line-height:1.7}
/* ZATCA pills + period chips row (Figma 070) */
.zrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.zrow .zl{font-size:12.5px;font-weight:700;color:var(--ink)}
.zrow .qf{gap:7px;padding:7px 13px;min-height:36px}
.zrow .seg.sm button{white-space:nowrap}
/* finance 6-month chart */
.fin6{height:190px}
.fin6 .hch-t{max-width:30px}
/* journal selected row: navy tint (viewing, not bulk selection) */
.tw table.jet tbody tr.selrow td{background:#eef4ff}
.tw table.jet tbody tr.selrow td:first-child{box-shadow:inset -3px 0 0 var(--navy)}
[dir="ltr"] .tw table.jet tbody tr.selrow td:first-child{box-shadow:inset 3px 0 0 var(--navy)}

/* =====================================================================
   17. OPS AUDIT (UI-UX-Pro-Max pass) — small global corrections
   ===================================================================== */
/* tag pills inside stacked cells must hug their text, not stretch the column */
#app .page .gcell>.tag,#app .page .gcell>.st,#app .page .gcell .jetags .tag{align-self:flex-start}
[dir="ltr"] #app .page .gcell>.tag,[dir="ltr"] #app .page .gcell>.st{align-self:flex-start}

/* finance audit round 2 */
.apr.aprsm{margin-top:5px}
.apr.aprsm i{width:12px;height:5px}
.attn-row .aamt{font-size:15px;white-space:nowrap;margin-inline-end:4px;flex:none}
.num.neg2{color:var(--red-text,#c6352c)}
/* actions column hugs its buttons instead of stretching */
.kit-t th:last-child,.kit-t td:last-child{width:1%;white-space:nowrap}

/* =====================================================================
   18) CRM audit round
   ===================================================================== */
/* phones, dates and other weak-direction runs keep their logical order in RTL cells */
.tw td.num{unicode-bidi:plaintext}
/* count pills on the clients type tabs, same language as KIT tab counts */
#app .seg.tabs button em{font-style:normal;margin-inline-start:7px;padding:1px 7px;border-radius:999px;background:#eef1f5;color:#5a6577;font-size:11px;font-weight:700}
#app .seg.tabs button.on em{background:rgba(255,255,255,.18);color:#fff}
/* 8 banner stat tiles wrap 4+4 instead of 6+2 (container is flex, so size the tiles) */
.page-head .w3-btiles:has(.scard:nth-child(7)) .scard{flex:1 1 calc(25% - 8px);max-width:none}
/* tables inside half-width cards shrink to fit instead of forcing a 760px scroll */
#app .grid-2 .tw table{min-width:0}
#app .grid-2 .tw td{white-space:normal}
/* a number inside a .due amount keeps the red of its parent */
.tw tbody td .due .num{color:inherit}
/* ZATCA status stacked under the payment status (invoices) */
.zline{display:flex;align-items:center;gap:6px;margin-top:6px;flex-wrap:wrap}
.zline small.cm{font-size:10.5px;letter-spacing:.4px}
/* icons inside tag pills stay pill-sized (lucide SVG defaults to 24px) */
#app .tag svg{width:12px;height:12px;vertical-align:-2px;margin-inline-end:4px;flex:none}
/* =====================================================================
   22) t-pro — refined enterprise table layer, built on the §21 tokens.
       Opt-in per table (currently: clients). After approval it merges
       into the base contract for all tables.
   ===================================================================== */

/* geometry: tighter rhythm, breathing room at card edges, middle alignment */
#app .tw table.t-pro td{padding:var(--tbl-pro-py) var(--tbl-pro-px);vertical-align:middle;border-bottom:1px solid var(--tbl-pro-line)}
#app .tw table.t-pro thead th{padding:11px var(--tbl-pro-px);background:var(--tbl-pro-head);color:var(--tbl-pro-head-ink);font-size:12px;font-weight:800;border-bottom:1px solid var(--tbl-head-line);box-shadow:inset 0 -1px 0 transparent}
#app .tw table.t-pro thead th.s-asc,#app .tw table.t-pro thead th.s-desc{background:var(--tbl-pro-head-on)} /* sorted column reads darkest */
#app .tw table.t-pro thead th.s-asc::after,#app .tw table.t-pro thead th.s-desc::after{color:var(--lime,#7ab648)}
#app .tw table.t-pro thead th+th:not(.act):not(.act-h){border-inline-start:0} /* no header column grid — sticky edges keep theirs */
#app .tw table.t-pro td:first-child,#app .tw table.t-pro th:first-child{padding-inline-start:var(--tbl-pro-edge)}
#app .tw table.t-pro td:last-child,#app .tw table.t-pro th:last-child{padding-inline-end:var(--tbl-pro-edge)}
/* identity hierarchy: 14/700 name → 12 secondary → 11.5 reference, tight 2px gaps */
#app table.t-pro .wcell{align-items:center;gap:12px}
#app table.t-pro .wcell>div{display:flex;flex-direction:column;gap:2px;min-width:0}
#app table.t-pro .wcell b{font-size:14px;font-weight:700;line-height:1.35}
#app table.t-pro .wcell small{font-size:12px;line-height:1.35}
#app table.t-pro .wcell small.num,#app table.t-pro .wcell small:last-child{font-size:11.5px;color:#64748b} /* ≥4.5:1 — ids stay readable */
#app table.t-pro .gcell{gap:3px}
/* alignment contract: every stacked line in a cell starts on the same edge.
   - children hug their content instead of stretching (stretched buttons centred their text);
   - block-level .num lines keep LTR digit order via plaintext bidi, but align to the
     cell's start edge instead of the left (global .num is direction:ltr). */
#app table.t-pro .gcell,#app table.t-pro .wcell>div{align-items:flex-start}
#app table.t-pro .gcell>.num,#app table.t-pro .wcell>div>.num{unicode-bidi:plaintext;text-align:right}
[dir="ltr"] #app table.t-pro .gcell>.num,[dir="ltr"] #app table.t-pro .wcell>div>.num{text-align:left}
#app table.t-pro .gcell b{line-height:1.35}
#app table.t-pro .gcell small{font-size:12px;line-height:1.35}
/* data-type alignment: money + counts align to the inline end (left in RTL), tabular digits */
#app table.t-pro td.ta-end,#app table.t-pro th.ta-end{text-align:left}
[dir="ltr"] #app table.t-pro td.ta-end,[dir="ltr"] #app table.t-pro th.ta-end{text-align:right}
#app table.t-pro td.ta-end .gcell{align-items:flex-end}
[dir="ltr"] #app table.t-pro td.ta-end .gcell{align-items:flex-start}
#app table.t-pro .num{font-variant-numeric:tabular-nums}
#app table.t-pro td.ta-end b{font-size:14px}
/* controls: centered checkboxes and actions */
#app table.t-pro td.chk,#app table.t-pro th.chk{text-align:center}
#app table.t-pro td.chk input{width:16px;height:16px;accent-color:var(--navy,#16233f);vertical-align:middle}
#app table.t-pro td.act .rowacts{justify-content:flex-end;gap:2px}
#app table.t-pro td.act .icon-btn{width:32px;height:32px}
/* status badges sit on one predictable line */
#app table.t-pro .st.tag{white-space:nowrap}
/* value semantics: zero = muted number («0 ر.س»), missing = dash (.empty «—»),
   negative = red (.due / .neg2). Three distinct representations by contract. */
#app .tw tbody td.ta-end .zero,#app .tw tbody td.ta-end.zero{color:#64748b;font-weight:600}
#app .tw tbody td.ta-end .zero .cur{color:#93a0b4}
/* KIT t-pro tables: the sticky actions header (ce-act, from shell.css) keeps the t-pro header colour, not white */
#app .tw table.t-pro.ce-act thead th:last-child{background:var(--tbl-pro-head);z-index:6}
/* ^ z-index: every header cell is sticky at z 3 (clickerp.css) while shell.css pins the actions header at z 1,
   so on horizontal scroll neighbouring header titles painted over the pinned actions header */
/* class collision: KIT's actions header is th.act-h, and .act-h is also the dashboard activity-card header
   (clickerp.css: display:flex) — that turned the header cell into a flex box narrower than its column */
#app .tw table.t-pro thead th.act-h{display:table-cell}
/* no truncation of business data in KIT t-pro tables: long names (.uk-long, e.g. agent office) wrap instead of an ellipsis */
#app .tw table.t-pro.kit-t .uk-long{white-space:normal;overflow:visible;text-overflow:clip;max-width:260px}
/* Batch 7 — detail-page tables: lighter t-pro variant (t-lite) without the 20px outer edges; opt-in per table */
#app .tw table.t-pro.t-lite td:first-child,#app .tw table.t-pro.t-lite th:first-child{padding-inline-start:var(--tbl-pro-px)}
#app .tw table.t-pro.t-lite td:last-child,#app .tw table.t-pro.t-lite th:last-child{padding-inline-end:var(--tbl-pro-px)}
/* detail cards are ~725px wide: the global .tw table{min-width:760px} (clickerp.css) forced a 35px scroll on
   even 4-column tables. t-lite tables size to their content; real overflow still scrolls horizontally. */
#app .tw table.t-pro.t-lite{min-width:0}
/* compact density (topbar toggle) drives the table tokens. Since §21 the #app table rules outrank the old
   body[data-density] .grp rules, so the toggle had no effect on unified tables. Default density unchanged. */
body[data-density="compact"]{--tbl-py:var(--tbl-py-d);--tbl-px:var(--tbl-px-d);--tbl-pro-py:8px;--tbl-pro-px:10px;--tbl-pro-edge:16px}
/* plain (non-grp) t-pro tables: keep the actions column reachable when the table
   scrolls horizontally — same behaviour grp tables already have (approved tables are grp, untouched) */
#app .tw table.t-pro:not(.grp) th.act{position:sticky;inset-inline-end:0;z-index:5}
#app .tw table.t-pro:not(.grp) td.act{position:sticky;inset-inline-end:0;z-index:4;background:var(--surface,#fff)}
#app .tw table.t-pro:not(.grp) tbody tr:hover td.act{background:var(--tbl-hover)}
/* KIT t-pro tables with selection: the checkbox column stays pinned at the start edge when the
   table scrolls horizontally (grp tables already pin theirs). Selected rows keep their tint (shell.css !important). */
#app .tw table.t-pro.kit-t.chk th.ck{position:sticky;inset-inline-start:0;z-index:5;background:var(--tbl-pro-head)}
#app .tw table.t-pro.kit-t.chk td.ck{position:sticky;inset-inline-start:0;z-index:4;background:var(--surface,#fff)}
#app .tw table.t-pro.kit-t.chk tbody tr:hover td.ck{background:var(--tbl-hover)}
/* tables inside half-width cards wrap text, but phone numbers / counts must never break mid-value */
#app .grid-2 .tw table.t-pro .num,#app .grid-2 .tw table.t-pro .lnk{white-space:nowrap}
/* refined footer */
#app table.t-pro+ .tfoot,#app .tw:has(table.t-pro)+.tfoot{border-top:1px solid var(--tbl-pro-line)}

/* =====================================================================
   21) UNIFIED TABLE SYSTEM — design tokens + one contract for both
       table families (kit-t and grp). Specialized tables (pm, att-m,
       inv-t, imp-t, ps-*) keep their own documented styles.
   ===================================================================== */

/* one density contract for both families */
#app .tw table td{padding:var(--tbl-py) var(--tbl-px)}
#app .tw table.grp td{padding:var(--tbl-py) var(--tbl-px)}
#app .tw thead th{padding:13px var(--tbl-px);background:var(--tbl-head-bg);color:var(--tbl-head-ink);border-bottom:2px solid var(--tbl-head-line)}
#app .tw table.dense td,#app .tw table.dense th{padding:var(--tbl-py-d) var(--tbl-px-d)}
/* one selection-column width (was 38px grp / 40px kit) */
#app .tw th.chk,#app .tw td.chk,#app .tw th.ck,#app .tw td.ck{width:var(--tbl-chk)}
/* one hover + selected-row treatment */
#app .tw tbody tr:hover td{background:var(--tbl-hover)}
#app .tw tbody tr.totrow:hover td{background:var(--bg,#f4f6fa)}
#app .tw tbody tr.selrow td{background:var(--tbl-sel)}
/* functional sorting — three states on sortable headers */
#app .tw thead th[data-ksort],#app .tw table.grp thead th:not(.act):not(.chk):not(.act-h){cursor:pointer;user-select:none}
#app .tw thead th.s-asc::after{content:"▲";font-size:8px;margin-inline-start:6px;color:var(--navy,#16233f)}
#app .tw thead th.s-desc::after{content:"▼";font-size:8px;margin-inline-start:6px;color:var(--navy,#16233f)}
#app .tw thead th:not(.s-asc):not(.s-desc):not(.act):not(.chk):not(.ck):not(.act-h):hover::after{content:"⇅";font-size:9px;margin-inline-start:6px;opacity:.45}
/* one empty-state look for both families (tempty = grp, kit-empty = kit) */
#app .uk-state.kit-empty{margin:34px auto;gap:6px;color:var(--muted,#5a6577)}
#app .uk-state.kit-empty svg{width:26px;height:26px;color:#c3ccda}
#app .uk-state.kit-empty h4{margin:0;font-size:14px;color:var(--ink,#1b2740)}
#app .tempty b{font-size:14px;color:var(--ink,#1b2740)}
/* pager: identical look in both families (kit now renders chevrons too) */
#app .pager button svg{width:15px;height:15px}

/* =====================================================================
   20) rental & transfer & housing audit
   ===================================================================== */
/* stacked worker cells size to their content instead of a fixed 190px floor */
#app .tw .wcell{min-width:0}
/* dense variant for very wide tables */
.tw table.dense th,.tw table.dense td{padding-inline:12px}
.tw table.dense .kit-pb span{min-width:64px}
/* grp actions column hugs its buttons like kit tables */
.tw table.grp th.act,.tw table.grp td.act{width:1%;white-space:nowrap}
/* sticky-edge legibility: when a table overflows, the pinned action and
   selection columns float over neighbours — give both a clear divider and
   a visible scroll shadow so covered headers read as "behind", not "gone" */
#app .tw.w3-ovx table th.act,#app .tw.w3-ovx table td.act{border-inline-start:1px solid var(--tbl-head-line);box-shadow:14px 0 18px -10px rgba(16,26,46,.28)}
[dir="ltr"] #app .tw.w3-ovx table th.act,[dir="ltr"] #app .tw.w3-ovx table td.act{box-shadow:-14px 0 18px -10px rgba(16,26,46,.28)}
#app .tw.w3-ovx table th.chk,#app .tw.w3-ovx table td.chk,#app .tw.w3-ovx table th.ck,#app .tw.w3-ovx table td.ck{box-shadow:-14px 0 18px -10px rgba(16,26,46,.22)}
[dir="ltr"] #app .tw.w3-ovx table th.chk,[dir="ltr"] #app .tw.w3-ovx table td.chk{box-shadow:14px 0 18px -10px rgba(16,26,46,.22)}
/* seg-tabs row with a list/board toggle at its end (housing) */
.hsbar{display:flex;align-items:center;gap:10px}
.hsbar .sp{flex:1}
.hsbar .seg.tabs{flex:1;min-width:0}
/* housing board: place occupancy strip + state columns */
.hs-occ{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin-bottom:14px}
.hs-occ .card.pl{padding:12px 14px;display:flex;flex-direction:column;gap:9px}
.kan.hsk{align-items:flex-start}
.kan.hsk .kan-i{cursor:default}
.kan.hsk .kan-i .tag,.kan.hsk .kan-i .depcell{align-self:flex-start;margin:2px 0}
.kan.hsk .kan-i .btn{margin-top:6px;align-self:flex-start}

/* client-type selector tiles (add/edit client) */
.modes{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:11px}
.modes .mode{display:flex;flex-direction:column;align-items:center;gap:7px;padding:13px 8px;border:1.5px solid var(--line,#e3e8ef);border-radius:12px;background:#fff;cursor:pointer;font:inherit;font-size:13px;font-weight:700;color:var(--muted,#5a6577)}
.modes .mode svg{width:21px;height:21px}
.modes .mode:hover{border-color:#b9c3d2}
.modes .mode.on{border-color:var(--navy,#16233f);background:#f2f5fa;color:var(--ink,#16233f);box-shadow:inset 0 0 0 1px var(--navy,#16233f)}

/* =====================================================================
   23) BADGE SYSTEM — Batch 1: tone contrast + count badges (approved 2026-11-08)
   Text-only darkening at the same hue; backgrounds unchanged.
   ===================================================================== */
   /* 5.17:1 on #e8f0fc · 4.95:1 on #eef0f3 (was 4.25 / 4.03) */
.tag.b{color:var(--bdg-b-ink)}
.tag.gr{color:var(--bdg-gr-ink)}
/* count badges (.tag.num) inside tables: ".tw tbody td .num" (clickerp.css) paints all numbers ink and
   was overriding the badge tone — amber/red counts rendered navy */
.tw tbody td .tag.num.g{color:var(--green-text)}
.tw tbody td .tag.num.a{color:var(--amber-text)}
.tw tbody td .tag.num.r{color:var(--red-text)}
.tw tbody td .tag.num.b{color:var(--bdg-b-ink)}
.tw tbody td .tag.num.gr{color:var(--bdg-gr-ink)}
.tw tbody td .tag.num.n{color:var(--navy)}

/* =====================================================================
   23b) BADGE SIZES — three-step scale (approved 2026-11-08; supersedes the two-size pass of V40)
   S 10.5px · M 12px · L 14px. Size lives on the badge component (.tag / .st.tag) and on named dense
   contexts only — no page-wide override. Colours, dots and labels are not touched here.
   ===================================================================== */

/* M — component default for every status (.st.tag) and descriptive tag (.tag). inline-block (tags) and
   inline-flex (statuses, dot + gap) keep the height at line-height + padding in any context. Tags must not be
   inline-flex: flex drops the space between a child element and text ("49 يوماً" rendered as "49يوماً"). */
.tag{display:inline-block;vertical-align:middle;font-size:var(--bdg-m-fs);padding:var(--bdg-m-pad);line-height:var(--bdg-m-lh)}
.st.tag{display:inline-flex;align-items:center;font-size:var(--bdg-m-fs);padding:var(--bdg-m-pad);line-height:var(--bdg-m-lh)}
/* S — dense contexts where the badge is secondary metadata */
.jetags .tag,.jep-tags .tag,          /* journal rows + journal side panel */
.hgrid2 .tw td .tag,                   /* dashboard compact tables */
.rep-meta .tag,                        /* report-centre card meta */
.tw td .gcell > .tag:not(.st),         /* secondary line in a stacked table cell: type, category, timers, countdowns */
.kpi .kb .tag,.w3-btiles .tag,.hdep-top .tag{font-size:var(--bdg-s-fs);padding:var(--bdg-s-pad);line-height:var(--bdg-s-lh)}  /* KPI tiles */
/* L — contract stage hero */
.tag.big{font-size:var(--bdg-l-fs);padding:var(--bdg-l-pad);line-height:var(--bdg-l-lh)}
/* documented exception — CV card photo overlay keeps its original 11px */
.cvc-ph .tag{font-size:11px;padding:2px 8px;line-height:16px}
/* journal panel row: tags centre on the row instead of stretching to the tallest sibling */
.jep-tags>.tag{align-self:center}

/* =====================================================================
   24) AA CONTRAST — older colours that failed WCAG AA (approved 2026-11-09)
   Tokens changed at source: --red #c6352c (4.45→5.32), --green-d #4a7626 (3.17→5.37),
   --amber #9a6417 (3.04→4.99), --blue #2a62b8 (4.25→5.17 on its tint).
   ===================================================================== */

/* white text / icons on light lime (2.44) → deeper green (5.99) */
.btn-green,.cp-m em,.cc-ph .play,.bigph .play,.thumb .play,.uk-steps button.done span,.fl-s.done span,.ofs.done .fi,.dstep.done .ds-n,.top [data-pop="chats"] .cnt{background:var(--green-strong)}
/* faint secondary text in tables and finance rows (2.5–3.6) */
.tw tbody td small,.tw tbody td .fl-l,.fl-l,.fline.money .cur{color:#5f6b78}
.tw tbody td .empty,table.rep tbody td .empty,.acdc small,.ccm small,#app .tw tbody td.ta-end .zero .cur{color:#66727f}
.pm-c.l0{color:#5f6b78}
.kit-wa b{color:#3f4a5a}

/* =====================================================================
   25) Banner stat tiles — 7-tile groups (CV management): two rows (4 + 3), equal widths,
   the second row starts at the right (RTL start) — never stretched.
   ===================================================================== */
.page-head .w3-btiles.statgrid:has(> :nth-child(7):last-child){display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.page-head .w3-btiles.statgrid:has(> :nth-child(7):last-child)>*{min-width:0;max-width:none}
/* selected-tile check: in the narrower 7-tile row it collided with the label — sit it on the icon's corner instead */
.page-head .w3-btiles.statgrid:has(> :nth-child(7):last-child) .scard .scon{top:6px;inset-inline-end:auto;inset-inline-start:6px;width:16px;height:16px}
.page-head .w3-btiles.statgrid:has(> :nth-child(7):last-child) .scard .scon svg{width:10px;height:10px}
/* last AA fixes from the rescan */
.fc.today>span,.cms-hero span{background:var(--green-strong)}
.dstep .ds-n b{color:inherit}
.lst-sw button em{opacity:1}
.hb-sos small{color:#fff;opacity:1}

/* =====================================================================
   26) NAVY DESIGN — AA fixes (2026-11-09, after returning to the navy/lime look)
   Measured with a gradient-aware scan (every colour stop of the navy sidebar / banner).
   ===================================================================== */
                                   /* faint text: 3.13–3.36 → ≥4.75 */
/* lime actions keep their lime, with navy text: white on lime was 2.44, navy on lime is 6.40 */
.ce-create{color:var(--navy)!important}
.ce-create:hover{background:#8cc45e!important;border-color:#8cc45e!important}
.page-head .actions .btn-primary{color:#16233f}
.page-head .actions .btn-primary:hover{background:#8cc45e;border-color:#8cc45e}
.side-foot .av{color:#16233f}
/* text on navy surfaces */
.side .ofc-t small span{color:var(--green)}               /* "ClickERP": dark green on navy was 2.90 */
#app .page .page-head .w3-btiles .cur,#app .page .page-head .w3-btiles .kv .cur{color:rgba(255,255,255,.72)}   /* currency in banner tiles was 2.13 */
.page-head .check,.page-head .check span{color:rgba(255,255,255,.85)}
.page-head p .tag{background:rgba(255,255,255,.14);color:#fff}
/* zero amounts on the page background were 4.43 */
#app .tw tbody td.ta-end .zero,#app .tw tbody td.ta-end.zero{color:#5f6b78}
/* CV card photo placeholder: white initials need 3:1 (large text) — deeper gradient */
.cvc-ph{background:linear-gradient(160deg,hsl(var(--h) 35% 40%),hsl(calc(var(--h) + 40) 40% 32%))}