/* ============================================================
   Arbah v3 — Projects (owner portfolio) page styles
   Source: design/arbah-v3/project/projects.css — every rule scoped
   under .av3. Reuses .proj-card / .pill / .phase / .pbar / .kpi-strip
   from arbah-v3-primitives.css; this file only adds the page-level
   layout (4-col KPI strip, toolbar row) + the list-view table that has
   no primitive equivalent.
   ============================================================ */

/* 4-up KPI strip (handled by .kcols-4 on the page root, but pin it here
   defensively so the Projects portfolio always reads as four columns). */
.av3 .projects-v3-page .kpi-strip { grid-template-columns:repeat(4,1fr); }

/* toolbar: status tabs (start) + grid/list view toggle (end) */
.av3 .projects-v3-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; row-gap:12px; }
.av3 .projects-v3-viewtoggle { flex-shrink:0; }
.av3 .projects-v3-viewtoggle .btn-group button { padding:8px 11px; min-height:38px; display:inline-flex; align-items:center; justify-content:center; }
.av3 .projects-v3-viewtoggle .btn-group button svg { display:block; }

/* ---------- list view ---------- */
.av3 .projects-v3-list-wrap {
  background:var(--arbah-surface); border:1px solid var(--arbah-border);
  border-radius:var(--r-12); box-shadow:var(--shadow-card); overflow-x:auto;
}
.av3 .projects-v3-list { min-width:760px; }
.av3 .pjv3-row {
  display:grid; grid-template-columns:58px minmax(0,2fr) 104px 1.5fr 1.1fr 96px;
  gap:16px; align-items:center; padding:14px 18px;
  border-bottom:1px solid var(--arbah-border); cursor:pointer;
}
.av3 .pjv3-row:last-child { border-bottom:none; }
.av3 .pjv3-row:hover { background:var(--arbah-surface-sunken); }
.av3 .pjv3-row:focus-visible { outline:2px solid var(--arbah-navy-500); outline-offset:-2px; }
.av3 .pjv3-row.head { background:var(--arbah-surface-sunken); border-bottom:1px solid var(--arbah-border); cursor:default; }
.av3 .pjv3-row.head:hover { background:var(--arbah-surface-sunken); }
.av3 .pjv3-row.head .plh {
  font-family:var(--font-mono); font-size:10px; letter-spacing:1px;
  text-transform:uppercase; color:var(--arbah-ink-muted); font-weight:600;
}

.av3 .pjv3-name { min-width:0; }
.av3 .pjv3-name .n {
  font-family:var(--font-serif); font-size:15px; font-weight:600; color:var(--arbah-ink);
  line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
[dir="rtl"] .av3 .pjv3-name .n { font-family:var(--font-sans-ar); }
.av3 .pjv3-name .l {
  font-size:12px; color:var(--arbah-ink-muted); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.av3 .pjv3-prog { display:flex; align-items:center; gap:9px; }
.av3 .pjv3-prog .pct {
  font-family:var(--font-mono); font-size:12.5px; font-weight:600; color:var(--arbah-ink);
  font-variant-numeric:tabular-nums; width:34px; flex-shrink:0;
}
.av3 .pjv3-prog .pbar { flex:1; min-width:40px; margin-top:0; }

.av3 .pjv3-bud {
  font-family:var(--font-mono); font-size:12.5px; color:var(--arbah-ink); font-variant-numeric:tabular-nums;
}
.av3 .pjv3-bud .bud-sub { color:var(--arbah-ink-subtle); font-size:11px; margin-top:2px; }
.av3 .pjv3-bud .bud-sub.danger { color:var(--arbah-danger); }

.av3 .pjv3-date {
  font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--arbah-bronze-700);
  font-variant-numeric:tabular-nums; text-align:end; white-space:nowrap;
}

@container app (max-width: 760px) {
  .av3 .projects-v3-page .kpi-strip { grid-template-columns:none; }
  .av3 .projects-v3-toolbar { align-items:stretch; }
  .av3 .projects-v3-viewtoggle .btn-group { width:100%; }
  .av3 .projects-v3-viewtoggle .btn-group button { flex:1; }
}