/* ============================================================
   Arbah Al Madina — v3 shared primitives (scoped under .av3)
   ============================================================
   Ported verbatim (values) from the handoff bundle:
     design/arbah-v3/project/arbah.css   (KPI, pill, phase, pbar, triage,
       page header, ButtonGroup, project cards, activity, tabs)
     design/arbah-v3/project/pages.css   (chips, avatars, data table,
       timeline, milestones, mini-chart, swatches, modal, buttons)
     design/arbah-v3/project/shell.css   (skeleton / empty / error states,
       btn-ghost / btn-primary / btn-bronze, states-demo)
   Chrome (sidebar / topbar / brand / nav / bottom-tabs) lives in
   arbah-v3-shell.css — this file is page-body primitives only.
   ============================================================ */

/* ---------- page header ---------- */
.av3 .page { display:flex; flex-direction:column; gap:22px; }
.av3 .page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.av3 .page-title { font-family:var(--font-serif); font-size:32px; font-weight:600; color:var(--arbah-ink); line-height:1.1; letter-spacing:-.3px; }
.av3 .page-meta { display:flex; align-items:center; gap:10px; margin-top:9px; font-size:13px; color:var(--arbah-ink-muted); flex-wrap:wrap; }
.av3 .page-meta .snap { font-family:var(--font-serif); font-style:italic; font-size:14px; color:var(--arbah-ink-muted); }
.av3 .page-meta .sep { color:var(--arbah-border-strong); }
.av3 .page-meta .m-num { font-family:var(--font-mono); font-variant-numeric:tabular-nums; color:var(--arbah-ink); font-weight:500; }
.av3 .page-meta .m-val { font-family:var(--font-mono); font-variant-numeric:tabular-nums; color:var(--arbah-bronze-700); font-weight:600; }
.av3 .live-dot { width:7px; height:7px; border-radius:50%; background:var(--arbah-success); box-shadow:0 0 0 3px var(--arbah-success-soft); display:inline-block; }

.av3 .phead { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; flex-wrap:wrap; row-gap:14px; }
.av3 .phead .page-sub { margin-top:7px; font-size:14px; color:var(--arbah-ink-muted); }
.av3 .phead .page-sub bdi { font-family:var(--font-mono); font-weight:600; color:var(--arbah-ink); }
.av3 .phead-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* ---------- ButtonGroup ---------- */
.av3 .btn-group { display:inline-flex; border:1px solid var(--arbah-border-strong); border-radius:var(--r-8); overflow:hidden; background:var(--arbah-surface); flex-shrink:0; }
.av3 .btn-group button { font-family:var(--font-sans); font-size:12.5px; font-weight:500; color:var(--arbah-ink-muted); border:none; background:var(--arbah-surface); padding:9px 14px; cursor:pointer; border-inline-start:1px solid var(--arbah-border); min-height:38px; white-space:nowrap; }
.av3 .btn-group button:first-child { border-inline-start:none; }
.av3 .btn-group button:hover { background:var(--arbah-surface-sunken); }
.av3 .btn-group button.on { background:var(--arbah-navy-700); color:#fff; }
[dir="rtl"] .av3 .btn-group button { font-family:var(--font-sans-ar); }

/* ---------- section headers ---------- */
.av3 .sec-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:2px; }
.av3 .sec-title { font-family:var(--font-serif); font-size:19px; font-weight:600; color:var(--arbah-ink); white-space:nowrap; }
.av3 .sec-link { font-size:12.5px; font-weight:600; color:var(--arbah-navy-500); cursor:pointer; display:inline-flex; align-items:center; gap:4px; white-space:nowrap; background:none; border:none; }
.av3 .sec-link:hover { color:var(--arbah-navy-700); }
.av3 .sec-title-sm { font-family:var(--font-serif); font-size:16px; font-weight:600; color:var(--arbah-ink); }
[dir="rtl"] .av3 .sec-title, [dir="rtl"] .av3 .sec-link, [dir="rtl"] .av3 .sec-title-sm { font-family:var(--font-sans-ar); }

/* ---------- KPI strip ---------- */
.av3 .kpi-strip { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.av3 .kcols-3 .kpi-strip { grid-template-columns:repeat(3,1fr); }
.av3 .kcols-4 .kpi-strip, .av3.kcols-4 .kpi-strip { grid-template-columns:repeat(4,1fr); }
.av3 .kcols-5 .kpi-strip, .av3.kcols-5 .kpi-strip { grid-template-columns:repeat(5,1fr); }
.av3 .kpi { position:relative; background:var(--arbah-surface); border:1px solid var(--arbah-border); border-radius:var(--r-12); box-shadow:var(--shadow-sm); padding:16px 16px 15px; padding-inline-start:18px; display:flex; flex-direction:column; gap:9px; overflow:hidden; }
.av3 .kpi::before { content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:3px; }
.av3 .kpi.rail-navy::before   { background:var(--arbah-navy-700); }
.av3 .kpi.rail-bronze::before { background:var(--arbah-bronze-500); }
.av3 .kpi.rail-info::before   { background:var(--arbah-info); }
.av3 .kpi.rail-danger::before { background:var(--arbah-danger); }
.av3 .kpi.rail-success::before { background:var(--arbah-success); }
.av3 .kpi-label { font-family:var(--font-mono); font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--arbah-ink-muted); display:flex; align-items:center; gap:6px; }
.av3 .kpi-value { font-family:var(--font-mono); font-size:28px; font-weight:600; line-height:1; color:var(--arbah-ink); font-variant-numeric:tabular-nums; letter-spacing:-.5px; white-space:nowrap; }
.av3 .kpi-value.danger { color:var(--arbah-danger); }
.av3 .kpi-value.serif { font-family:var(--font-serif); letter-spacing:-.3px; font-weight:600; }
.av3 .kpi-foot { margin-top:auto; }
.av3 .kpi.clickable { cursor:pointer; transition:box-shadow .14s, transform .1s; }
.av3 .kpi.clickable:hover { box-shadow:var(--shadow-md); transform:translateY(-1px); }
.av3 .urgent-dot { width:7px; height:7px; border-radius:50%; background:var(--arbah-danger); display:inline-block; box-shadow:0 0 0 3px var(--arbah-danger-soft); }

/* ---------- trend chip ---------- */
.av3 .trend { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; padding:3px 8px; border-radius:999px; border:1px solid transparent; white-space:nowrap; }
.av3 .trend .t-num { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.av3 .trend--good    { background:var(--arbah-success-soft); color:var(--arbah-success); }
.av3 .trend--warn    { background:var(--arbah-warning-soft); color:var(--arbah-warning); }
.av3 .trend--bad     { background:var(--arbah-danger-soft);  color:var(--arbah-danger); }
.av3 .trend--neutral { background:var(--arbah-surface-raised); color:var(--arbah-ink-muted); }

/* ---------- triage band (v3 NEW) ---------- */
.av3 .triage { position:relative; border:1px solid var(--arbah-border); border-radius:var(--r-12); box-shadow:var(--shadow-sm); overflow:hidden; background:linear-gradient(100deg,var(--arbah-danger-soft) 0%, #FDECEC 26%, var(--arbah-surface) 60%); padding:18px 20px; padding-inline-start:22px; }
.av3 .triage::before { content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:4px; background:var(--arbah-danger); }
[dir="rtl"] .av3 .triage { background:linear-gradient(260deg,var(--arbah-danger-soft) 0%, #FDECEC 26%, var(--arbah-surface) 60%); }
.av3 .triage-grid { display:flex; gap:24px; align-items:flex-start; }
.av3 .triage-main { flex:1; min-width:0; }
.av3 .triage-head { display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.av3 .triage-head .ttl { white-space:nowrap; font-family:var(--font-serif); font-size:17px; font-weight:600; color:var(--arbah-ink); }
.av3 .triage-head .sub { white-space:nowrap; font-size:12.5px; color:var(--arbah-ink-muted); }
.av3 .triage-head .sub::before { content:"·"; color:var(--arbah-border-strong); margin-right:9px; }
.av3 .triage-head .badge { font-family:var(--font-mono); font-size:15px; font-weight:700; color:#fff; background:var(--arbah-danger); min-width:28px; height:28px; padding:0 7px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums; align-self:center; }
[dir="rtl"] .av3 .triage-head .ttl { font-family:var(--font-sans-ar); }
.av3 .chip-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:13px; }
.av3 .tchip { display:inline-flex; align-items:center; gap:7px; cursor:pointer; font-size:12.5px; font-weight:600; padding:7px 11px; border-radius:999px; border:1px solid transparent; background:var(--arbah-surface); min-height:34px; transition:transform .1s, box-shadow .12s; white-space:nowrap; }
.av3 .tchip:hover { box-shadow:var(--shadow-sm); transform:translateY(-1px); }
.av3 .tchip .tdot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.av3 .tchip .tnum2 { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.av3 .tchip--danger { background:var(--arbah-danger-soft); color:var(--arbah-danger); border-color:#F6C6C6; }
.av3 .tchip--danger .tdot { background:var(--arbah-danger); }
.av3 .tchip--warn   { background:var(--arbah-warning-soft); color:var(--arbah-warning); border-color:#F3D9A0; }
.av3 .tchip--warn .tdot { background:var(--arbah-warning); }
.av3 .tchip--bronze { background:var(--arbah-bronze-100); color:var(--arbah-bronze-700); border-color:var(--arbah-bronze-200); }
.av3 .tchip--bronze .tdot { background:var(--arbah-bronze-500); }
.av3 .ob-panel { margin-top:14px; background:rgba(255,255,255,.72); border:1px solid var(--arbah-border); border-radius:var(--r-8); padding:11px 13px; max-width:480px; backdrop-filter:blur(2px); }
.av3 .ob-cap { font-family:var(--font-mono); font-size:9.5px; letter-spacing:1px; text-transform:uppercase; color:var(--arbah-ink-muted); margin-bottom:7px; }
.av3 .ob-row { display:flex; align-items:center; gap:10px; padding:5px 0; font-size:12.5px; border-top:1px solid var(--arbah-border); }
.av3 .ob-row:first-of-type { border-top:none; }
.av3 .ob-row .ob-id { font-family:var(--font-mono); font-size:11px; font-weight:600; color:var(--arbah-ink-muted); background:var(--arbah-surface-raised); border-radius:var(--r-4); padding:2px 6px; white-space:nowrap; }
.av3 .ob-row .ob-name { flex:1; color:var(--arbah-ink); font-weight:500; min-width:0; }
.av3 .ob-row .ob-amt { font-family:var(--font-mono); font-variant-numeric:tabular-nums; color:var(--arbah-danger); font-weight:600; white-space:nowrap; }
.av3 .ob-row .ob-pct { font-family:var(--font-mono); font-variant-numeric:tabular-nums; color:var(--arbah-danger); font-size:11px; width:46px; text-align:end; }
.av3 .ob-row.total { border-top:1.5px solid var(--arbah-border-strong); margin-top:2px; padding-top:8px; }
.av3 .ob-row.total .ob-name { font-weight:700; color:var(--arbah-ink); }

/* ---------- status pill ---------- */
.av3 .pill { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; padding:4px 9px 4px 8px; border-radius:999px; border:1px solid; white-space:nowrap; }
.av3 .pill .pdot { width:6px; height:6px; border-radius:50%; }
.av3 .pill--ontrack { background:var(--arbah-success-soft); color:var(--arbah-success); border-color:#A7E3CB; }
.av3 .pill--ontrack .pdot { background:var(--arbah-success); }
.av3 .pill--atrisk { background:var(--arbah-warning-soft); color:var(--arbah-warning); border-color:#F0D69A; }
.av3 .pill--atrisk .pdot { background:var(--arbah-warning); }
.av3 .pill--delayed { background:var(--arbah-danger-soft); color:var(--arbah-danger); border-color:#F2C2C2; }
.av3 .pill--delayed .pdot { background:var(--arbah-danger); }
.av3 .pill--onhold { background:var(--arbah-surface-raised); color:var(--arbah-ink-muted); border-color:var(--arbah-border-strong); }
.av3 .pill--onhold .pdot { background:var(--arbah-ink-subtle); }

/* ---------- phase chip ---------- */
.av3 .phase { font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:.8px; text-transform:uppercase; padding:3px 7px; border-radius:var(--r-4); }
.av3 .phase--foundation { background:var(--arbah-info-soft); color:var(--arbah-info); }
.av3 .phase--structure  { background:var(--arbah-navy-100); color:var(--arbah-navy-500); }
.av3 .phase--mep        { background:var(--arbah-bronze-100); color:var(--arbah-bronze-700); }
.av3 .phase--finishes   { background:var(--arbah-success-soft); color:var(--arbah-success); }
.av3 .phase--handover   { background:#E3EAF3; color:var(--arbah-navy-900); border:1px solid var(--arbah-border-strong); padding:2px 6px; }
.av3 .phase--bronze     { background:var(--arbah-bronze-100); color:var(--arbah-bronze-700); border:1px solid var(--arbah-bronze-200); }

/* ---------- progress bars ---------- */
.av3 .pbar { height:6px; border-radius:999px; background:var(--arbah-surface-raised); overflow:hidden; margin-top:6px; }
.av3 .pbar > i { display:block; height:100%; border-radius:999px; }
.av3 .pbar.fill-navy > i    { background:var(--arbah-navy-700); }
.av3 .pbar.fill-warn > i    { background:var(--arbah-warning); }
.av3 .pbar.fill-danger > i  { background:var(--arbah-danger); }
.av3 .pbar.fill-success > i { background:var(--arbah-success); }
.av3 .pbar.fill-bronze > i  { background:var(--arbah-bronze-500); }
.av3 .pbar.thin { height:5px; }

/* ---------- project cards ---------- */
.av3 .proj-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.av3 .proj-card { background:var(--arbah-surface); border:1px solid var(--arbah-border); border-radius:var(--r-12); box-shadow:var(--shadow-card); padding:16px 16px 15px; display:flex; flex-direction:column; gap:12px; transition:box-shadow .14s, border-color .14s, transform .1s; cursor:pointer; }
.av3 .proj-card:hover { box-shadow:var(--shadow-md); border-color:var(--arbah-border-strong); transform:translateY(-1px); }
.av3 .pc-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.av3 .id-chip { font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.4px; color:var(--arbah-navy-500); background:var(--arbah-navy-100); border-radius:var(--r-4); padding:3px 7px; white-space:nowrap; }
.av3 .pc-name { font-family:var(--font-serif); font-size:18px; font-weight:600; color:var(--arbah-ink); line-height:1.2; }
[dir="rtl"] .av3 .pc-name { font-family:var(--font-sans-ar); }
.av3 .pc-loc { display:flex; align-items:center; gap:8px; margin-top:-4px; font-size:12.5px; color:var(--arbah-ink-muted); }
.av3 .pc-loc .loc-ico { color:var(--arbah-ink-subtle); }
.av3 .pc-prog-top { display:flex; align-items:baseline; justify-content:space-between; }
.av3 .pc-prog-top .lbl { font-family:var(--font-mono); font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--arbah-ink-muted); }
.av3 .pc-prog-top .pct { font-family:var(--font-mono); font-size:14px; font-weight:600; color:var(--arbah-ink); font-variant-numeric:tabular-nums; }
.av3 .pc-budget { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.av3 .bud-cell .bl { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.8px; text-transform:uppercase; color:var(--arbah-ink-muted); }
.av3 .bud-cell .bv { font-family:var(--font-mono); font-size:13.5px; font-weight:600; color:var(--arbah-ink); font-variant-numeric:tabular-nums; margin-top:2px; display:flex; align-items:center; gap:6px; }
.av3 .bud-cell .bv.danger { color:var(--arbah-danger); }
.av3 .overrun { font-family:var(--font-mono); font-size:10px; font-weight:600; color:var(--arbah-danger); background:var(--arbah-danger-soft); border:1px solid #F2C2C2; border-radius:var(--r-4); padding:1px 5px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.av3 .pc-divider { height:1px; background:var(--arbah-border); }
.av3 .pc-ms { display:flex; align-items:center; gap:9px; }
.av3 .pc-ms .ms-ico { color:var(--arbah-ink-subtle); flex-shrink:0; }
.av3 .pc-ms .ms-lbl { flex:1; font-size:12.5px; color:var(--arbah-ink-muted); min-width:0; }
.av3 .pc-ms .ms-lbl b { color:var(--arbah-ink); font-weight:600; }
.av3 .pc-ms .ms-date { font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--arbah-bronze-700); font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ---------- activity feed ---------- */
.av3 .activity { background:var(--arbah-surface); border:1px solid var(--arbah-border); border-radius:var(--r-12); box-shadow:var(--shadow-card); overflow:hidden; }
.av3 .activity-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 18px 13px; border-bottom:1px solid var(--arbah-border); flex-wrap:wrap; }
.av3 .act-group-sep { font-family:var(--font-mono); font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--arbah-ink-subtle); padding:11px 18px 7px; background:var(--arbah-surface-sunken); border-bottom:1px solid var(--arbah-border); }
.av3 .act-list { display:flex; flex-direction:column; }
.av3 .act-row { display:flex; align-items:center; gap:12px; padding:11px 18px; border-bottom:1px solid var(--arbah-border); }
.av3 .act-row:last-child { border-bottom:none; }
.av3 .act-row:hover { background:var(--arbah-surface-sunken); }
.av3 .act-avatar { position:relative; width:34px; height:34px; flex-shrink:0; }
.av3 .act-avatar .av { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:11px; font-weight:600; color:#fff; letter-spacing:.3px; }
.av3 .act-avatar .type-badge { position:absolute; inset-inline-end:-3px; bottom:-3px; width:17px; height:17px; border-radius:50%; border:2px solid var(--arbah-surface); display:flex; align-items:center; justify-content:center; }
.av3 .tb--task { background:var(--arbah-navy-500); color:#fff; }
.av3 .tb--photo { background:var(--arbah-info); color:#fff; }
.av3 .tb--risk { background:var(--arbah-danger); color:#fff; }
.av3 .tb--approval { background:var(--arbah-bronze-500); color:#fff; }
.av3 .act-body { flex:1; min-width:0; }
.av3 .act-line { font-size:13px; color:var(--arbah-ink-muted); line-height:1.4; }
.av3 .act-line .actor { color:var(--arbah-ink); font-weight:700; }
.av3 .act-line .target { font-family:var(--font-serif); font-style:italic; color:var(--arbah-ink); font-weight:500; }
[dir="rtl"] .av3 .act-line .target { font-family:var(--font-sans-ar); font-style:normal; font-weight:600; }
.av3 .act-sub { display:flex; align-items:center; gap:8px; margin-top:3px; font-size:11.5px; color:var(--arbah-ink-subtle); flex-wrap:nowrap; overflow:hidden; }
.av3 .act-sub > span { white-space:nowrap; }
.av3 .act-sub .a-detail { overflow:hidden; text-overflow:ellipsis; min-width:0; }
.av3 .act-sub .id-chip { font-size:10px; padding:2px 6px; }
.av3 .act-sub .a-proj { color:var(--arbah-ink-muted); font-weight:500; }
.av3 .act-sub .dot-sep { width:3px; height:3px; border-radius:50%; background:var(--arbah-border-strong); }
.av3 .act-time { font-family:var(--font-mono); font-size:11.5px; color:var(--arbah-ink-subtle); font-variant-numeric:tabular-nums; white-space:nowrap; flex-shrink:0; }
.av3 .activity-foot { padding:12px 18px; text-align:center; }
.av3 .activity-foot button { font-family:var(--font-sans); font-size:12.5px; font-weight:600; color:var(--arbah-navy-500); background:transparent; border:none; cursor:pointer; padding:6px 12px; border-radius:var(--r-6); }
.av3 .activity-foot button:hover { background:var(--arbah-surface-sunken); }

/* ---------- tabs ---------- */
.av3 .tabs { display:inline-flex; gap:3px; background:var(--arbah-surface-sunken); border:1px solid var(--arbah-border); border-radius:999px; padding:3px; }
.av3 .tab { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--arbah-ink-muted); border:none; background:transparent; padding:6px 12px; border-radius:999px; cursor:pointer; min-height:32px; }
.av3 .tab .t-count { font-family:var(--font-mono); font-size:11px; font-variant-numeric:tabular-nums; color:var(--arbah-ink-subtle); }
.av3 .tab.on { background:var(--arbah-surface); color:var(--arbah-ink); box-shadow:var(--shadow-sm); }
.av3 .tab.on .t-count { color:var(--arbah-navy-500); }
.av3 .ptoolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; row-gap:12px; }
.av3 .ptoolbar .tabs { flex-wrap:nowrap; max-width:100%; overflow-x:auto; scrollbar-width:none; }
.av3 .ptoolbar .tabs::-webkit-scrollbar { display:none; }
.av3 .ptoolbar .tab { flex-shrink:0; }

/* ---------- generic card ---------- */
.av3 .card { background:var(--arbah-surface); border:1px solid var(--arbah-border); border-radius:var(--r-12); box-shadow:var(--shadow-card); }
.av3 .card-head { padding:15px 18px 13px; border-bottom:1px solid var(--arbah-border); display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.av3 .card-head .ch-title { font-family:var(--font-serif); font-size:16px; font-weight:600; color:var(--arbah-ink); }
.av3 .card-head .ch-sub { font-size:12px; color:var(--arbah-ink-muted); margin-top:2px; }
.av3 .card-pad { padding:16px 18px; }
[dir="rtl"] .av3 .card-head .ch-title { font-family:var(--font-sans-ar); }

/* ---------- data table ---------- */
.av3 .dtable-wrap { background:var(--arbah-surface); border:1px solid var(--arbah-border); border-radius:var(--r-12); box-shadow:var(--shadow-card); overflow:hidden; }
.av3 .dtable-scroll { overflow-x:auto; }
.av3 .dtable { width:100%; border-collapse:collapse; min-width:720px; }
.av3 .dtable thead th { text-align:start; font-family:var(--font-mono); font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--arbah-ink-muted); font-weight:600; padding:11px 16px; background:var(--arbah-surface-sunken); border-bottom:1px solid var(--arbah-border); white-space:nowrap; }
.av3 .dtable tbody td { padding:12px 16px; border-bottom:1px solid var(--arbah-border); font-size:13px; color:var(--arbah-ink); vertical-align:middle; }
.av3 .dtable tbody tr:last-child td { border-bottom:none; }
.av3 .dtable tbody tr:hover { background:var(--arbah-surface-sunken); }
.av3 .dt-id { font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--arbah-navy-500); white-space:nowrap; font-variant-numeric:tabular-nums; }
.av3 .dt-title { font-family:var(--font-serif); font-size:14px; font-weight:600; color:var(--arbah-ink); }
[dir="rtl"] .av3 .dt-title { font-family:var(--font-sans-ar); }
.av3 .dt-mono { font-family:var(--font-mono); font-size:12.5px; color:var(--arbah-ink-muted); white-space:nowrap; font-variant-numeric:tabular-nums; }
.av3 .dt-amt { font-family:var(--font-serif); font-size:15px; font-weight:600; color:var(--arbah-ink); text-align:end; white-space:nowrap; font-variant-numeric:tabular-nums; }
.av3 .dt-amt bdi { font-family:var(--font-mono); }
.av3 .dt-proj { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.av3 .dt-proj .id-chip { font-size:10px; padding:2px 6px; }
.av3 .dt-proj .pn { color:var(--arbah-ink-muted); font-size:12.5px; }
.av3 .dt-actions { display:flex; gap:6px; justify-content:flex-end; }

/* ---------- chips ---------- */
.av3 .chip { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; padding:4px 9px; border-radius:999px; white-space:nowrap; border:1px solid transparent; }
.av3 .chip .cdot { width:6px; height:6px; border-radius:50%; }
.av3 .chip--success { background:var(--arbah-success-soft); color:var(--arbah-success); border-color:#A7E3CB; }
.av3 .chip--success .cdot { background:var(--arbah-success); }
.av3 .chip--warning { background:var(--arbah-warning-soft); color:var(--arbah-warning); border-color:#F0D69A; }
.av3 .chip--warning .cdot { background:var(--arbah-warning); }
.av3 .chip--danger { background:var(--arbah-danger-soft); color:var(--arbah-danger); border-color:#F2C2C2; }
.av3 .chip--danger .cdot { background:var(--arbah-danger); }
.av3 .chip--info { background:var(--arbah-info-soft); color:var(--arbah-info); border-color:#BFD3F5; }
.av3 .chip--info .cdot { background:var(--arbah-info); }
.av3 .chip--neutral { background:var(--arbah-surface-raised); color:var(--arbah-ink-muted); border-color:var(--arbah-border-strong); }
.av3 .chip--neutral .cdot { background:var(--arbah-ink-subtle); }
.av3 .chip--bronze { background:var(--arbah-bronze-100); color:var(--arbah-bronze-700); border-color:var(--arbah-bronze-200); }
.av3 .chip--bronze .cdot { background:var(--arbah-bronze-500); }
.av3 .chip--navy { background:var(--arbah-navy-100); color:var(--arbah-navy-500); border-color:var(--arbah-border-strong); }
.av3 .needs-data { display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.3px; color:var(--arbah-ink-subtle); padding:3px 8px; border-radius:999px; border:1px dashed var(--arbah-border-strong); background:var(--arbah-surface-sunken); white-space:nowrap; }

/* ---------- avatars ---------- */
.av3 .avatar-sm { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:10px; font-weight:600; color:#fff; letter-spacing:.2px; flex-shrink:0; }
.av3 .avatar-md { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:12px; font-weight:600; color:#fff; flex-shrink:0; }
.av3 .avatar-row { display:inline-flex; align-items:center; gap:9px; }
.av3 .avatar-stack { display:inline-flex; }
.av3 .avatar-stack .avatar-sm { border:2px solid var(--arbah-surface); margin-inline-start:-8px; }
.av3 .avatar-stack .avatar-sm:first-child { margin-inline-start:0; }

/* ---------- buttons ---------- */
.av3 .btn-primary { display:inline-flex; align-items:center; gap:7px; min-height:40px; padding:10px 16px; border:none; border-radius:var(--r-8); background:var(--arbah-navy-700); color:#fff; font-family:var(--font-sans); font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; box-shadow:0 1px 2px rgba(16,42,67,.2); }
.av3 .btn-primary:hover { background:var(--arbah-navy-900); }
.av3 .btn-secondary { display:inline-flex; align-items:center; gap:7px; min-height:40px; padding:10px 15px; border:1px solid var(--arbah-border-strong); border-radius:var(--r-8); background:var(--arbah-surface); color:var(--arbah-navy-700); font-family:var(--font-sans); font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; }
.av3 .btn-secondary:hover { background:var(--arbah-surface-sunken); }
.av3 .btn-ghost { display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:8px 13px; border:1px solid var(--arbah-border-strong); border-radius:var(--r-8); background:var(--arbah-surface); color:var(--arbah-navy-700); font-family:var(--font-sans); font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap; }
.av3 .btn-ghost:hover { background:var(--arbah-surface-sunken); }
.av3 .btn-bronze { display:inline-flex; align-items:center; gap:7px; min-height:40px; padding:10px 16px; border:none; border-radius:var(--r-8); background:var(--arbah-bronze-500); color:#fff; font-family:var(--font-sans); font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; }
.av3 .btn-bronze:hover { background:var(--arbah-bronze-700); }
.av3 .btn-danger { display:inline-flex; align-items:center; gap:7px; font-family:var(--font-sans); font-size:13px; font-weight:600; color:#fff; background:var(--arbah-danger); border:none; border-radius:var(--r-8); padding:10px 16px; cursor:pointer; min-height:44px; white-space:nowrap; box-shadow:0 1px 2px rgba(185,28,28,.25); }
.av3 .btn-danger:hover { background:#a01818; }
.av3 .btn-sm { display:inline-flex; align-items:center; gap:5px; min-height:32px; padding:6px 10px; border:1px solid var(--arbah-border-strong); border-radius:var(--r-6); background:var(--arbah-surface); color:var(--arbah-navy-700); font-family:var(--font-sans); font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; }
.av3 .btn-sm:hover { background:var(--arbah-surface-sunken); }
.av3 .btn-icon { width:32px; height:32px; padding:0; justify-content:center; color:var(--arbah-ink-muted); }
[dir="rtl"] .av3 .btn-primary, [dir="rtl"] .av3 .btn-secondary, [dir="rtl"] .av3 .btn-ghost, [dir="rtl"] .av3 .btn-bronze, [dir="rtl"] .av3 .btn-danger, [dir="rtl"] .av3 .btn-sm { font-family:var(--font-sans-ar); }

/* Navy is a strong foreground on the light surface, but becomes the dark
   surface itself in dark mode. Keep all shared secondary controls readable
   by switching their labels and icons to the high-contrast text token. */
html[data-color-scheme="dark"] .av3 .btn-secondary,
html[data-color-scheme="dark"] .av3 .btn-ghost,
html[data-color-scheme="dark"] .av3 .btn-sm { color:var(--arbah-ink); }
html[data-color-scheme="dark"] .av3 .btn-secondary:disabled,
html[data-color-scheme="dark"] .av3 .btn-ghost:disabled,
html[data-color-scheme="dark"] .av3 .btn-sm:disabled { color:var(--arbah-ink-muted); opacity:.72; }
html[data-color-scheme="dark"] .av3 .sec-link:hover { color:var(--arbah-ink); }
html[data-color-scheme="dark"] .av3 .triage,
html[data-color-scheme="dark"] [dir="rtl"] .av3 .triage {
  background:linear-gradient(100deg,var(--arbah-danger-soft) 0%,var(--arbah-surface) 72%);
}

/* ---------- card grids / layout helpers ---------- */
.av3 .cardgrid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.av3 .cardgrid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.av3 .split { display:grid; grid-template-columns:1.7fr 1fr; gap:18px; align-items:start; }
.av3 .stack { display:flex; flex-direction:column; gap:18px; }

/* ---------- mini chart (no chart lib) ---------- */
.av3 .mini-legend { display:flex; gap:14px; }
.av3 .mini-legend .lg { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--arbah-ink-muted); font-weight:500; }
.av3 .mini-legend .lg i { width:10px; height:10px; border-radius:3px; display:inline-block; }
.av3 .mchart { display:flex; align-items:flex-end; gap:0; height:170px; border-bottom:1px solid var(--arbah-border); position:relative; }
.av3 .mchart .gl { position:absolute; left:0; right:0; border-top:1px dashed var(--arbah-border); }
.av3 .mchart .gl span { position:absolute; inset-inline-start:0; top:-8px; font-family:var(--font-mono); font-size:9px; color:var(--arbah-ink-subtle); background:var(--arbah-surface); padding-inline-end:5px; }
.av3 .mcol { flex:1; display:flex; align-items:flex-end; justify-content:center; gap:4px; height:100%; z-index:1; padding:0 3px; }
.av3 .mbar { width:14px; border-radius:3px 3px 0 0; }
.av3 .maxis { display:flex; }
.av3 .maxis span { flex:1; text-align:center; font-family:var(--font-mono); font-size:10px; color:var(--arbah-ink-muted); padding-top:7px; }
.av3 .mfill-in { background:var(--arbah-success); }
.av3 .mfill-out { background:var(--arbah-navy-500); }
.av3 .mfill-budget { background:var(--arbah-navy-500); }
.av3 .mfill-actual { background:var(--arbah-bronze-500); }
.av3 .mfill-pos { background:var(--arbah-success); }
.av3 .mfill-neg { background:var(--arbah-danger); }
.av3 .mfill-tasks { background:var(--arbah-info); }

/* ---------- selection swatches ---------- */
.av3 .sel-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.av3 .sel-card { display:flex; flex-direction:column; gap:12px; padding:16px; }
.av3 .sel-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.av3 .sel-cat { font-family:var(--font-serif); font-size:16px; font-weight:600; color:var(--arbah-ink); }
.av3 .sel-meta { font-size:12px; color:var(--arbah-ink-muted); margin-top:2px; display:flex; align-items:center; gap:7px; }
.av3 .swatch-row { display:flex; gap:8px; }
.av3 .swatch { flex:1; height:52px; border-radius:var(--r-8); border:1px solid rgba(15,23,42,.12); position:relative; cursor:pointer; }
.av3 .swatch.chosen { box-shadow:0 0 0 2px var(--arbah-surface), 0 0 0 4px var(--arbah-success); }
.av3 .swatch .chk { position:absolute; inset-inline-end:4px; bottom:4px; width:16px; height:16px; border-radius:50%; background:var(--arbah-success); color:#fff; display:flex; align-items:center; justify-content:center; }
.av3 .sel-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid var(--arbah-border); padding-top:12px; }
.av3 .sel-chosen { font-size:12.5px; color:var(--arbah-ink-muted); }
.av3 .sel-chosen b { color:var(--arbah-ink); font-weight:600; }

/* ---------- phase timeline (project detail / progress) ---------- */
.av3 .timeline { display:flex; gap:0; }
.av3 .tl-step { flex:1; display:flex; flex-direction:column; gap:8px; position:relative; }
.av3 .tl-bar { height:6px; border-radius:999px; background:var(--arbah-surface-raised); margin:0 2px; }
.av3 .tl-step.done .tl-bar { background:var(--arbah-success); }
.av3 .tl-step.now .tl-bar { background:var(--arbah-navy-700); }
.av3 .tl-label { display:flex; align-items:center; gap:7px; padding:0 2px; }
.av3 .tl-dot { width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--arbah-surface-raised); color:var(--arbah-ink-subtle); }
.av3 .tl-step.done .tl-dot { background:var(--arbah-success); color:#fff; }
.av3 .tl-step.now .tl-dot { background:var(--arbah-navy-700); color:#fff; }
.av3 .tl-name { font-size:12px; font-weight:600; color:var(--arbah-ink); }
.av3 .tl-step.todo .tl-name { color:var(--arbah-ink-subtle); }
.av3 .tl-sub { font-family:var(--font-mono); font-size:10.5px; color:var(--arbah-ink-subtle); padding:0 2px; }

/* ---------- milestones list ---------- */
.av3 .ms-list { display:flex; flex-direction:column; }
.av3 .ms-item { display:flex; align-items:center; gap:12px; padding:12px 18px; border-bottom:1px solid var(--arbah-border); }
.av3 .ms-item:last-child { border-bottom:none; }
.av3 .ms-item .ms-ic { width:30px; height:30px; border-radius:var(--r-8); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.av3 .ms-item .mt { flex:1; min-width:0; }
.av3 .ms-item .mt .t { font-size:13.5px; font-weight:600; color:var(--arbah-ink); }
.av3 .ms-item .mt .s { font-size:12px; color:var(--arbah-ink-muted); margin-top:1px; }
.av3 .ms-item .md { font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--arbah-bronze-700); white-space:nowrap; }

/* ---------- modal overlay ---------- */
.av3 .modal-backdrop { position:fixed; inset:0; background:rgba(10,27,46,.55); z-index:80; display:flex; align-items:center; justify-content:center; padding:24px; }
.av3 .modal { width:min(580px, 94%); max-height:90%; overflow-y:auto; background:var(--arbah-surface); border-radius:var(--r-12); box-shadow:0 24px 80px rgba(10,27,46,.45); }
.av3 .modal-head { padding:16px 20px; border-bottom:1px solid var(--arbah-border); display:flex; align-items:center; justify-content:space-between; gap:12px; position:sticky; top:0; background:var(--arbah-surface); }
.av3 .modal-x { width:34px; height:34px; border-radius:var(--r-8); border:1px solid var(--arbah-border); background:var(--arbah-surface); cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--arbah-ink-muted); flex-shrink:0; }
.av3 .modal-x:hover { background:var(--arbah-surface-sunken); }
.av3 .modal-body { padding:18px 20px; display:flex; flex-direction:column; gap:18px; }
.av3 .modal-foot { padding:14px 20px; border-top:1px solid var(--arbah-border); display:flex; justify-content:flex-end; gap:10px; }
.av3 .msub { font-family:var(--font-mono); font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--arbah-ink-subtle); margin-bottom:9px; }
.av3 .check-row { display:flex; align-items:center; gap:10px; font-size:13px; padding:5px 0; color:var(--arbah-ink); }
.av3 .check-box { width:18px; height:18px; border-radius:5px; border:1.5px solid var(--arbah-border-strong); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#fff; }
.av3 .check-box.on { background:var(--arbah-success); border-color:var(--arbah-success); }
.av3 .check-row.on .ct { color:var(--arbah-ink-subtle); text-decoration:line-through; }
.av3 .thumb-strip { display:flex; gap:8px; }
.av3 .thumb-strip .th { flex:1; height:64px; border-radius:var(--r-8); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.6); }

/* ============================================================
   STATE COMPONENTS (skeleton / empty / error) — reusable
   ============================================================ */
@keyframes av3-sk-shimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
.av3 .sk { background:linear-gradient(90deg, var(--arbah-surface-raised) 25%, #F7F9FC 38%, var(--arbah-surface-raised) 55%); background-size:200% 100%; animation:av3-sk-shimmer 1.5s ease-in-out infinite; border-radius:var(--r-6); }
.av3 .sk-card { background:var(--arbah-surface); border:1px solid var(--arbah-border); border-radius:var(--r-12); padding:16px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:12px; }
.av3 .sk-line { height:11px; }
.av3 .sk-row { display:flex; align-items:center; gap:12px; }
.av3 .sk-avatar { width:34px; height:34px; border-radius:50%; flex-shrink:0; }
.av3 .empty-state { border:1.5px dashed var(--arbah-border-strong); border-radius:var(--r-12); padding:30px 24px; text-align:center; background:var(--arbah-surface-sunken); display:flex; flex-direction:column; align-items:center; gap:9px; }
.av3 .empty-ico { width:46px; height:46px; border-radius:50%; background:var(--arbah-surface-raised); color:var(--arbah-ink-subtle); display:flex; align-items:center; justify-content:center; margin-bottom:2px; }
.av3 .empty-title { font-family:var(--font-serif); font-size:17px; font-weight:600; color:var(--arbah-ink); line-height:1.3; }
[dir="rtl"] .av3 .empty-title { font-family:var(--font-sans-ar); }
.av3 .empty-hint { font-size:13px; color:var(--arbah-ink-muted); max-width:340px; line-height:1.5; margin:0; }
.av3 .empty-state .btn-ghost { margin-top:6px; }
.av3 .error-banner { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--r-8); background:var(--arbah-danger-soft); border:1px solid #F2C2C2; color:var(--arbah-danger); font-size:13px; }
.av3 .error-banner.notice { background:var(--arbah-info-soft); border-color:#BFD3F5; color:var(--arbah-info); }
.av3 .error-banner .eb-ico { flex-shrink:0; }
.av3 .error-banner .eb-body { flex:1; min-width:0; }
.av3 .error-banner .eb-body b { font-weight:700; }
.av3 .error-banner .eb-action { border:none; background:transparent; color:inherit; font-weight:700; font-size:12.5px; cursor:pointer; text-decoration:underline; white-space:nowrap; font-family:var(--font-sans); }
.av3 .states-demo { margin-top:8px; }
.av3 .states-demo .sd-label { font-family:var(--font-mono); font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--arbah-ink-subtle); margin-bottom:9px; }
.av3 .states-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:start; }

/* ============================================================
   RESPONSIVE — container queries key off the .av3 surface width
   ============================================================ */
@container app (max-width: 760px) {
  .av3 .page { gap:18px; }
  .av3 .page-title { font-size:25px; }
  .av3 .page-head { width:100%; flex-direction:column; gap:14px; }
  .av3 .page-head > * { min-width:0; max-width:100%; }
  .av3 .page-meta { gap:6px 8px; }
  .av3 .page-head > .btn-group { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; }
  .av3 .page-head > .btn-group button { min-width:0; padding:9px 8px; overflow:hidden; text-overflow:ellipsis; }
  .av3 .kcols-4 .kpi-strip, .av3 .kcols-5 .kpi-strip, .av3 .kcols-3 .kpi-strip,
  .av3.kcols-4 .kpi-strip, .av3.kcols-5 .kpi-strip,
  .av3 .kpi-strip { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-flow:row; gap:12px; overflow:visible; }
  .av3 .kpi-strip > :last-child:nth-child(odd) { grid-column:1 / -1; }
  .av3 .kpi { min-width:0; padding:14px; padding-inline-start:16px; }
  .av3 .kpi-value { font-size:22px; }
  .av3 .proj-grid, .av3 .split, .av3 .cardgrid-2, .av3 .cardgrid-3, .av3 .sel-grid { grid-template-columns:1fr; }
  .av3 .states-grid { grid-template-columns:1fr; }
  .av3 .phead-actions .btn-primary, .av3 .phead-actions .btn-secondary { width:100%; justify-content:center; }
  .av3 .triage-grid { flex-direction:column; gap:14px; }
  .av3 .triage { padding:16px; padding-inline-start:18px; }
  .av3 .triage-head .ttl, .av3 .triage-head .sub { white-space:normal; }
  .av3 .triage-head .sub::before { display:none; }
  .av3 .triage-grid > .btn-danger { width:100%; justify-content:center; }
  .av3 .sec-head { align-items:center; }
  .av3 .sec-title { font-size:18px; white-space:normal; }
  .av3 .pc-name { overflow-wrap:anywhere; }
  .av3 .pc-loc { align-items:flex-start; flex-wrap:wrap; }
  .av3 .pc-loc .phase { flex-basis:calc(100% - 24px); max-width:calc(100% - 24px); margin-inline-start:24px; white-space:normal; overflow-wrap:anywhere; }
  .av3 .pc-prog-top { flex-direction:column; align-items:flex-start; gap:5px; }
  .av3 .pc-prog-top .pct { font-size:12px; }
  .av3 .activity-head { align-items:stretch; flex-direction:column; }
  .av3 .activity-head .tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; border-radius:var(--r-10); overflow:hidden; }
  .av3 .activity-head .tab { min-width:0; justify-content:center; padding:7px 5px; }
}