/* ══════════════════════════════════════════════════════════
   PROGRAMS MODULE STYLES — Control Panel
   ══════════════════════════════════════════════════════════ */

/* Legacy quick-modals built by _createModal — Add Milestone, Add
   Project (fallback), Log Time, etc. These are appended to <body>
   and given an inline z-index of 100000 in JS, but this CSS rule
   adds a !important floor so even cached/older programs.js builds
   land cleanly above engagement-profile (12000), wdp-popup (55000),
   project-builder-drawer (65000) and the materials browser (70000).
   Pairs with the inline z-index in programs.js's _createModal. */
.wk-modal-overlay.is-visible { z-index: 250000 !important; }

/* ── Program Header ──────────────────────────────────── */
.prog-header {
  padding: 0 14px 12px; margin-bottom: 12px;
  border: 1px solid var(--wt-border, #e2e8f0);
  border-radius: 14px; overflow: hidden;
  background: var(--wt-card-bg, #fff);
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.prog-header-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.prog-header-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.prog-header-title h2 { margin: 0; font-size: 1.35rem; font-weight: 700; color: var(--wt-text, #1e293b); }
.prog-header-actions { display: flex; gap: 8px; flex-shrink: 0; }

.prog-status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 11px 3px 10px;
  font-size: 0.72rem; font-weight: 700; border-radius: 20px; text-transform: capitalize;
  letter-spacing: .02em;
  background: var(--_pscBg, #dcfce7);
  color: var(--_psc, #166534);
  border: 1px solid var(--_pscRing, #86efac);
  white-space: nowrap;
}
.prog-status-pill-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--_psc, #166534);
  box-shadow: 0 0 0 2px var(--_pscBg, rgba(255,255,255,.6));
  flex-shrink: 0;
}
.prog-status-pill[data-prog-status="draft"] .prog-status-pill-dot,
.prog-status-pill[data-prog-status="on-hold"] .prog-status-pill-dot {
  animation: prog-status-pulse 2.4s ease-in-out infinite;
}
@keyframes prog-status-pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--_pscBg, rgba(255,255,255,.6)); }
  50%      { box-shadow: 0 0 0 3px var(--_pscRing, rgba(0,0,0,.1)); }
}
/* Legacy fallbacks for any consumer still emitting the old class names. */
.prog-status-active    { background: #dcfce7; color: #166534; border-color: #86efac; }
.prog-status-draft     { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }
.prog-status-planning  { background: #f3e8ff; color: #6b21a8; border-color: #c4b5fd; }
.prog-status-on-hold   { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.prog-status-completed { background: #e0f2fe; color: #075985; border-color: #7dd3fc; }
.prog-status-cancelled { background: #f1f5f9; color: #475569; border-color: #94a3b8; }

.prog-type-pill {
  display: inline-flex; align-items: center; padding: 2px 10px;
  font-size: 0.72rem; font-weight: 500; border-radius: 20px;
  background: var(--wt-theme-primary-mist, #ede9fe); color: var(--wt-theme-primary, #6366f1);
}

/* ── KPI Row ─────────────────────────────────────────── */
.prog-kpi-row {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px;
}
.prog-kpi {
  flex: 1 1 110px; min-width: 100px; padding: 14px 14px 12px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--_kpi-c, #6366f1) 4%, #fff), #fff);
  border: 1px solid var(--wt-border, #e2e8f0);
  border-radius: 16px; text-align: center;
  transition: all .35s cubic-bezier(.22,1,.36,1);
  position: relative; overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.prog-kpi::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3.5px;
  background: linear-gradient(90deg, var(--_kpi-c, #6366f1), color-mix(in srgb, var(--_kpi-c, #6366f1) 60%, #fff));
  border-radius: 16px 16px 0 0;
}
.prog-kpi:hover { box-shadow: 0 8px 28px rgba(0,0,0,.09), 0 2px 8px rgba(0,0,0,.04); transform: translateY(-3px); }
.prog-kpi-value { font-size: 1.5rem; font-weight: 900; color: var(--wt-text, #1e293b); letter-spacing: -.5px; transition: transform .3s cubic-bezier(.22,1,.36,1); }
.prog-kpi:hover .prog-kpi-value { transform: scale(1.06); }
.prog-kpi-label { font-size: 0.68rem; font-weight: 600; color: var(--wt-text-muted, #64748b); margin-top: 3px; text-transform: uppercase; letter-spacing: .03em; }
.prog-kpi-sub   { font-size: 0.64rem; color: var(--wt-text-muted, #94a3b8); margin-top: 2px; }

/* ── Health Status Bar ───────────────────────────────── */
.prog-health-bar {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px;
  padding: 10px 12px; background: var(--wt-card-bg, #fff);
  border: 1px solid var(--wt-border, #e2e8f0); border-radius: 12px;
}
.prog-health-chip {
  display: flex; align-items: center; gap: 6px; padding: 6px 10px;
  border-radius: 8px; min-width: 100px; flex: 1 1 100px;
  cursor: default; transition: all .2s cubic-bezier(.22,1,.36,1);
  border: 1.5px solid transparent;
}
.prog-health-chip:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.prog-health-dot {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}
.prog-health-green .prog-health-dot { background: #059669; }
.prog-health-yellow .prog-health-dot { background: #d97706; }
.prog-health-red .prog-health-dot { background: #dc2626; }
.prog-health-gray .prog-health-dot { background: #94a3b8; }
.prog-health-green { background: #f0fdf4; }
.prog-health-yellow { background: #fffbeb; }
.prog-health-red { background: #fef2f2; }
.prog-health-gray { background: #f8fafc; }
.prog-health-label { font-size: 0.65rem; color: var(--wt-text-muted, #64748b); text-transform: uppercase; letter-spacing: 0.04em; }
.prog-health-value { font-size: 0.78rem; font-weight: 600; color: var(--wt-text, #1e293b); }
.prog-health-info { display: flex; flex-direction: column; gap: 1px; }

/* ── AI Intelligence Block ───────────────────────────── */
.prog-intel {
  margin-bottom: 10px; padding: 12px;
  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
  border: 1px solid var(--wt-theme-primary-mist, #ddd6fe); border-radius: 12px;
}
.prog-intel.is-collapsed .prog-intel-grid,
.prog-intel.is-collapsed .prog-signals { display: none; }
.prog-intel-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  font-size: 0.82rem; font-weight: 700; color: var(--wt-theme-primary, #6366f1);
  cursor: pointer; user-select: none;
}
.prog-intel.is-collapsed .prog-intel-header { margin-bottom: 0; }
.prog-intel-toggle {
  margin-left: auto; font-size: 0.72rem; font-weight: 600;
  color: var(--wt-theme-primary, #6366f1); opacity: .7;
  transition: transform .2s ease;
}
.prog-intel.is-collapsed .prog-intel-toggle { transform: rotate(-90deg); }
.prog-intel-icon { font-size: 1rem; }
.prog-intel-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px;
}
@media (max-width: 768px) { .prog-intel-grid { grid-template-columns: 1fr; } }
.prog-intel-card {
  padding: 8px 12px; background: rgba(255,255,255,0.85); border-radius: 8px;
  border: 1px solid rgba(99,102,241,0.1);
}
.prog-intel-title { font-size: 0.65rem; font-weight: 600; color: var(--wt-theme-primary, #6366f1); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; }
.prog-intel-text { font-size: 0.76rem; color: var(--wt-text, #334155); line-height: 1.35; }

/* ── Signal Badges ───────────────────────────────────── */
.prog-signals { display: flex; flex-direction: column; gap: 6px; }
.prog-signal {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px;
  font-size: 0.78rem; border-radius: 6px;
}
.prog-signal-red { background: #fef2f2; color: #991b1b; border-left: 3px solid #dc2626; }
.prog-signal-yellow { background: #fffbeb; color: #92400e; border-left: 3px solid #d97706; }
.prog-signal-type {
  font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
  padding: 1px 6px; border-radius: 3px; background: rgba(0,0,0,0.06);
}

/* ── Quick Actions Bar ───────────────────────────────── */
.prog-quick-actions {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px;
  padding: 8px 12px; background: var(--wt-card-bg, #fff);
  border: 1px solid var(--wt-border, #e2e8f0); border-radius: 10px;
}
.prog-qa-btn {
  padding: 6px 14px; font-size: 0.78rem; font-weight: 500; cursor: pointer;
  border: 1px solid var(--wt-border, #e2e8f0); border-radius: 6px;
  background: var(--wt-card-bg, #fff); color: var(--wt-text, #334155);
  transition: background 0.15s, border-color 0.15s;
}
.prog-qa-btn:hover {
  background: var(--wt-theme-primary-mist, #ede9fe);
  border-color: var(--wt-theme-primary, #6366f1);
  color: var(--wt-theme-primary, #6366f1);
}

/* ── Hero gradient strip (top of program header card) ── */
.prog-hero-strip {
  height: 5px;
  border-radius: 14px 14px 0 0;
  margin: -1px -1px 14px;
  background: linear-gradient(90deg, var(--_ph-c1, #6366f1) 0%, var(--_ph-c2, #818cf8) 100%);
  box-shadow: 0 1px 8px rgba(0,0,0,.10);
}

/* ── Pill Nav Tabs (segmented control) ───────────────── */
.prog-nav-tabs {
  display: flex; gap: 2px; flex-wrap: nowrap; overflow-x: auto;
  background: var(--wt-bg, #f1f5f9);
  border: 1px solid var(--wt-border, #e2e8f0);
  border-radius: 11px; padding: 3px;
  margin-bottom: 14px;
  scrollbar-width: none;
}
.prog-nav-tabs::-webkit-scrollbar { display: none; }

.prog-nav-tab {
  flex: 1 1 0; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 6px 8px; border-radius: 8px;
  border: none; cursor: pointer; font-size: 0.72rem; font-weight: 600;
  color: var(--wt-text-muted, #64748b);
  background: transparent; white-space: nowrap;
  transition: background .2s cubic-bezier(.22,1,.36,1),
              color .2s cubic-bezier(.22,1,.36,1),
              box-shadow .2s cubic-bezier(.22,1,.36,1);
  font-family: inherit;
}
.prog-nav-tab.is-active {
  background: linear-gradient(135deg, var(--wt-theme-primary, #6366f1) 0%, #818cf8 100%);
  color: #fff;
  box-shadow: 0 2px 10px rgba(99,102,241,.30), 0 1px 3px rgba(0,0,0,.08);
}
.prog-nav-tab:not(.is-active):hover {
  background: var(--wt-card-bg, #fff);
  color: var(--wt-text, #1e293b);
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
}
.prog-nav-icon {
  display: inline-flex; align-items: center; flex-shrink: 0;
  opacity: .75;
}
.prog-nav-label {
  overflow: hidden; text-overflow: ellipsis;
}
.prog-nav-tab.is-active .prog-nav-icon { opacity: 1; }

/* Narrow widths: collapse to icon-only — tooltips via title attr keep names discoverable */
@media (max-width: 900px) {
  .prog-nav-tab { padding: 7px 6px; gap: 0; }
  .prog-nav-label { display: none; }
}

/* ── Overview ↔ Scope toggle (inside Overview tab) ───── */
.prog-overview-toggle {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--wt-bg, #f1f5f9);
  border: 1px solid var(--wt-border, #e2e8f0);
  border-radius: 10px; margin-bottom: 14px;
}
.prog-ov-tog {
  padding: 6px 16px; border-radius: 7px; border: none; cursor: pointer;
  font-size: 0.78rem; font-weight: 600; font-family: inherit;
  color: var(--wt-text-muted, #64748b);
  background: transparent;
  transition: background .2s, color .2s, box-shadow .2s;
}
.prog-ov-tog.is-active {
  background: var(--wt-card-bg, #fff);
  color: var(--wt-text, #1e293b);
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.prog-ov-tog:not(.is-active):hover { color: var(--wt-text, #1e293b); }

/* Scope panel — phase rows in the work-breakdown table */
.prog-scope-phase-row td {
  background: linear-gradient(90deg, rgba(99,102,241,.06), rgba(99,102,241,.02));
  border-top: 2px solid var(--wt-border, #e2e8f0) !important;
  padding-top: 10px !important; padding-bottom: 10px !important;
}
.prog-scope-phase-row strong { font-size: 0.85rem; color: var(--wt-text, #1e293b); }

/* ── Legacy sub-tabs (kept for any external reference) ── */
.prog-sub-tabs {
  display: flex; gap: 4px; border-bottom: 1px solid var(--wt-border, #e2e8f0);
  margin-bottom: 10px; overflow-x: auto;
}
.prog-sub-tab {
  padding: 10px 16px; font-size: 0.82rem; font-weight: 500; cursor: pointer;
  border: none; background: none; color: var(--wt-text-muted, #64748b);
  border-bottom: 2.5px solid transparent; transition: all .2s cubic-bezier(.22,1,.36,1);
  white-space: nowrap; position: relative;
}
.prog-sub-tab:hover { color: var(--wt-text, #1e293b); background: var(--wt-bg, #f8fafc); border-radius: 8px 8px 0 0; }
.prog-sub-tab.is-active {
  color: var(--wt-theme-primary, #6366f1);
  border-bottom-color: var(--wt-theme-primary, #6366f1);
  font-weight: 700;
}

/* ── Tab Content ─────────────────────────────────────── */
.prog-tab-content { min-height: 200px; animation: progFadeIn .25s ease both; }
@keyframes progFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.prog-section { margin-bottom: 14px; }
.prog-section h3 { font-size: 0.95rem; font-weight: 600; margin: 0 0 8px; color: var(--wt-text, #1e293b); }
.prog-section h4 { font-size: 0.85rem; font-weight: 600; margin: 12px 0 6px; color: var(--wt-text-muted, #475569); }
.prog-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.prog-section-header h3 { margin: 0; }

/* ── Tables ──────────────────────────────────────────── */
.prog-table {
  width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.82rem;
  background: var(--wt-card-bg, #fff); border: 1px solid var(--wt-border, #e2e8f0);
  border-radius: 12px; overflow: hidden;
}
.prog-table th {
  text-align: left; padding: 12px 16px; font-weight: 700; font-size: 0.72rem;
  color: var(--wt-text-muted, #64748b); border-bottom: 2px solid var(--wt-border, #e2e8f0);
  text-transform: uppercase; letter-spacing: 0.05em;
  background: var(--wt-bg, #f8fafc);
}
.prog-table td {
  padding: 12px 16px; border-bottom: 1px solid var(--wt-border-light, #f1f5f9);
  color: var(--wt-text, #334155); transition: background .15s ease;
}
.prog-table tbody tr:last-child td { border-bottom: none; }
.prog-table tr:hover td { background: var(--wt-hover-bg, #f8fafc); }
.prog-row-overdue td { background: #fef2f2 !important; }

/* ── Progress Bar ────────────────────────────────────── */
.prog-bar {
  height: 8px; background: var(--wt-border, #e2e8f0); border-radius: 4px;
  min-width: 60px; display: inline-block; width: 100px; vertical-align: middle;
}
.prog-bar-fill {
  height: 100%; border-radius: 4px; transition: width 0.4s cubic-bezier(.22,1,.36,1);
}
.prog-bar-label { font-size: 0.74rem; color: var(--wt-text-muted, #64748b); margin-left: 8px; }

/* ── Status Pills ────────────────────────────────────── */
.prog-pill {
  display: inline-flex; align-items: center; padding: 3px 10px; font-size: 0.72rem;
  font-weight: 700; border-radius: 12px; text-transform: capitalize; letter-spacing: .02em;
}
.prog-pill-green  { background: #dcfce7; color: #166534; }
.prog-pill-blue   { background: #dbeafe; color: #1e40af; }
.prog-pill-yellow { background: #fef3c7; color: #92400e; }
.prog-pill-red    { background: #fee2e2; color: #991b1b; }
.prog-pill-gray   { background: #f1f5f9; color: #64748b; }
.prog-pill-purple { background: #f3e8ff; color: #7e22ce; }

/* ── Detail Grid ─────────────────────────────────────── */
.prog-detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.prog-detail-row  { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; background: var(--wt-card-bg, #fff); border-radius: 6px; border: 1px solid var(--wt-border-light, #f1f5f9); }
.prog-detail-label { font-size: 0.68rem; color: var(--wt-text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.04em; }
.prog-detail-value { font-size: 0.85rem; color: var(--wt-text, #1e293b); font-weight: 500; }

/* ── Phase Cards ─────────────────────────────────────── */
.prog-phases { display: flex; gap: 10px; flex-wrap: wrap; }
.prog-phase-card {
  display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; min-width: 140px;
  background: var(--wt-card-bg, #fff); border: 1px solid var(--wt-border, #e2e8f0); border-radius: 8px;
}
.prog-phase-active { border-left: 3px solid var(--wt-theme-primary, #6366f1); }
.prog-phase-status { font-size: 0.7rem; color: var(--wt-text-muted, #64748b); text-transform: capitalize; }
.prog-phase-date { font-size: 0.7rem; color: var(--wt-text-muted, #94a3b8); }

/* ── Warnings, Risks, Evidence ───────────────────────── */
.prog-warnings { margin-top: 16px; padding: 14px; background: #fffbeb; border: 1px solid #fcd34d; border-radius: 10px; }
.prog-warnings h3 { color: #92400e; }
.prog-warnings p { font-size: 0.82rem; color: #78350f; margin: 4px 0; }

.prog-warning-card {
  display: flex; align-items: flex-start; gap: 12px; padding: 10px 14px; margin-bottom: 8px;
  border-radius: 8px;
}
.prog-risk-red { background: #fef2f2; border: 1px solid #fecaca; }
.prog-risk-yellow { background: #fffbeb; border: 1px solid #fcd34d; }
.prog-warning-severity {
  font-size: 0.65rem; font-weight: 700; padding: 2px 8px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: 0.06em; flex-shrink: 0;
}
.prog-risk-red .prog-warning-severity { background: #fee2e2; color: #991b1b; }
.prog-risk-yellow .prog-warning-severity { background: #fef3c7; color: #92400e; }
.prog-warning-msg { flex: 1; font-size: 0.82rem; color: var(--wt-text, #334155); }
.prog-warning-action { font-size: 0.75rem; color: var(--wt-text-muted, #64748b); font-style: italic; }

.prog-danger { color: #dc2626; font-weight: 600; }
.prog-warn { color: #d97706; font-weight: 600; }

.prog-evidence-yes { color: #059669; font-weight: 600; font-size: 0.78rem; }
.prog-evidence-no { color: #dc2626; font-weight: 600; font-size: 0.78rem; }

/* ── Outcome Cards (base — overridden by outcomes.css) ─ */
/* Removed: definitions moved to outcomes.css for single source of truth */

/* ── Guidance ────────────────────────────────────────── */
.prog-guidance {
  margin-top: 16px; padding: 20px 24px; background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%);
  border: 1px solid var(--wt-border, #e2e8f0); border-radius: 14px;
  border-left: 4px solid var(--wt-theme-primary, #6366f1);
}
.prog-guidance h4 { margin: 0 0 8px; font-size: 0.95rem; font-weight: 700; color: var(--wt-text, #1e293b); }
.prog-guidance p { font-size: 0.84rem; color: var(--wt-text-muted, #64748b); margin: 0 0 10px; line-height: 1.5; }
.prog-guidance ul { margin: 0; padding-left: 18px; }
.prog-guidance li { font-size: 0.84rem; color: var(--wt-text, #334155); margin: 5px 0; line-height: 1.5; }

/* ── Sidebar Items ───────────────────────────────────── */
.prog-add-btn { color: var(--wt-theme-primary, #6366f1) !important; font-weight: 600 !important; }
.prog-sep { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; padding-top: 8px; }

/* ── Empty Sub States ────────────────────────────────── */
.prog-empty-sub {
  text-align: center; padding: 48px 32px; color: var(--wt-text-muted, #94a3b8); font-size: 0.88rem;
  background: var(--wt-bg, #f8fafc); border: 2px dashed var(--wt-border, #e2e8f0);
  border-radius: 16px; line-height: 1.6;
}
.prog-empty-sub::before {
  content: ''; display: block; width: 48px; height: 48px; margin: 0 auto 14px;
  background: var(--wt-border, #e2e8f0); border-radius: 50%; opacity: .5;
}
.prog-empty-sub.prog-empty-iconed::before { display: none; }
.prog-empty-sub .prog-empty-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%;
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  color: #6366f1;
}
.prog-empty-sub .prog-empty-icon svg {
  width: 30px; height: 30px; display: block;
}
.prog-empty-sub strong { color: var(--wt-text, #334155); }
.prog-empty-sub .wk-btn { margin-top: 12px; }

/* ── Modal ───────────────────────────────────────────── */
.prog-modal-overlay {
  position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: progOverlayIn .25s cubic-bezier(.22,1,.36,1) both;
}
@keyframes progOverlayIn { from { opacity: 0; } to { opacity: 1; } }
.prog-modal {
  background: var(--wt-card-bg, #fff); border-radius: 18px; min-width: 480px; max-width: 640px; width: 92vw;
  box-shadow: 0 32px 100px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,.05); overflow: hidden;
  animation: progModalIn .35s cubic-bezier(.22,1,.36,1) both;
}
@keyframes progModalIn { from { opacity: 0; transform: translateY(20px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
.prog-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; border-bottom: 1px solid var(--wt-border, #e2e8f0);
}
.prog-modal-header h3 { margin: 0; font-size: 1.1rem; font-weight: 700; }
.prog-modal-close {
  border: none; background: none; font-size: 1.4rem; cursor: pointer; color: var(--wt-text-muted, #94a3b8);
  line-height: 1; padding: 6px; border-radius: 8px; transition: all .2s ease;
}
.prog-modal-close:hover { background: #fee2e2; color: #ef4444; }
.prog-modal-body { padding: 24px; display: flex; flex-direction: column; gap: 14px; max-height: 65vh; overflow-y: auto; }
.prog-modal-body label { display: flex; flex-direction: column; gap: 5px; font-size: 0.82rem; font-weight: 600; color: var(--wt-text, #334155); }
.prog-modal-footer {
  display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px;
  border-top: 1px solid var(--wt-border, #e2e8f0);
}

/* ── Clickable Initiative Rows ───────────────────────── */
.prog-table tr.prog-initiative-row { cursor: pointer; }
.prog-table tr.prog-initiative-row:hover td { background: var(--wt-theme-primary-mist, #ede9fe) !important; }
.prog-table tr.prog-initiative-row.is-active td {
  background: var(--wt-theme-primary-mist, #ede9fe) !important;
  border-left: 3px solid var(--wt-theme-primary, #6366f1);
}
.prog-initiative-detail {
  animation: progFadeIn .25s ease both;
  padding: 16px 20px; margin-top: 12px;
  background: var(--wt-card-bg, #fff); border: 1.5px solid var(--wt-border, #e2e8f0);
  border-radius: 12px; border-left: 3px solid var(--wt-theme-primary, #6366f1);
}
.prog-initiative-detail h4 { margin: 0 0 10px; font-size: 0.92rem; font-weight: 700; color: var(--wt-text, #1e293b); }

/* ── Quick Actions hover refinement ──────────────────── */
.prog-qa-btn {
  padding: 7px 15px; font-size: 0.78rem; font-weight: 600; cursor: pointer;
  border: 1.5px solid var(--wt-border, #e2e8f0); border-radius: 8px;
  background: var(--wt-card-bg, #fff); color: var(--wt-text, #334155);
  transition: all .2s cubic-bezier(.22,1,.36,1);
}
.prog-qa-btn:hover {
  background: var(--wt-theme-primary-mist, #ede9fe);
  border-color: var(--wt-theme-primary, #6366f1);
  color: var(--wt-theme-primary, #6366f1);
  transform: translateY(-1px); box-shadow: 0 2px 8px rgba(99,102,241,.12);
}

/* ═══════════════════════════════════════════════════════
   OVERVIEW SNAPSHOT ROW — Budget · Time · People at a glance
   ═══════════════════════════════════════════════════════ */
.prog-snapshot-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px; margin-bottom: 14px;
}
.prog-snap-card {
  background: var(--wt-card-bg, #fff); border: 1.5px solid var(--wt-border, #e2e8f0);
  border-radius: 14px; padding: 18px 20px; position: relative; overflow: hidden;
  transition: box-shadow .2s cubic-bezier(.22,1,.36,1), transform .2s cubic-bezier(.22,1,.36,1);
}
.prog-snap-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.07); transform: translateY(-2px); }
.prog-snap-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
}
.prog-snap-budget::before { background: linear-gradient(90deg, #059669, #34d399); }
.prog-snap-time::before   { background: linear-gradient(90deg, #d97706, #fbbf24); }
.prog-snap-people::before { background: linear-gradient(90deg, #6366f1, #818cf8); }

.prog-snap-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
}
.prog-snap-icon { font-size: 1.2rem; }
.prog-snap-title {
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--wt-text-muted, #64748b);
}

.prog-snap-metrics { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.prog-snap-metric { display: flex; flex-direction: column; gap: 1px; }
.prog-snap-val {
  font-size: 1.15rem; font-weight: 800; color: var(--wt-text, #1e293b); line-height: 1.2;
}
.prog-snap-lbl {
  font-size: 0.62rem; font-weight: 600; color: var(--wt-text-muted, #94a3b8);
  text-transform: uppercase; letter-spacing: .04em;
}

/* Budget burn bar */
.prog-snap-bar {
  height: 6px; background: var(--wt-border, #e2e8f0); border-radius: 3px; margin-bottom: 4px;
}
.prog-snap-bar-fill {
  height: 100%; border-radius: 3px; transition: width .5s cubic-bezier(.22,1,.36,1);
}
.prog-snap-bar-label {
  font-size: 0.65rem; color: var(--wt-text-muted, #94a3b8); font-weight: 600;
}

/* People mini-list inside snapshot cards */
.prog-snap-people { display: flex; flex-direction: column; gap: 8px; }
.prog-snap-person {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--wt-border-light, #f1f5f9);
}
.prog-snap-person:last-child { border-bottom: none; }
.prog-snap-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.62rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #6366f1, #818cf8);
}
.prog-snap-time .prog-snap-avatar { background: linear-gradient(135deg, #d97706, #f59e0b); }
.prog-snap-people .prog-snap-avatar { background: linear-gradient(135deg, #6366f1, #818cf8); }
.prog-snap-person-info { flex: 1; min-width: 0; }
.prog-snap-person-name {
  display: block; font-size: 0.78rem; font-weight: 600; color: var(--wt-text, #1e293b);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prog-snap-person-hrs {
  display: block; font-size: 0.66rem; color: var(--wt-text-muted, #94a3b8);
}
.prog-snap-person-bar {
  width: 60px; height: 4px; background: var(--wt-border, #e2e8f0); border-radius: 2px; flex-shrink: 0;
}
.prog-snap-person-bar-fill {
  height: 100%; border-radius: 2px; background: #d97706; transition: width .4s ease;
}
.prog-snap-util {
  font-size: 0.72rem; font-weight: 700; flex-shrink: 0; min-width: 36px; text-align: right;
}

/* ═══════════════════════════════════════════════════════
   TIME PANEL — Weekly chart bars
   ═══════════════════════════════════════════════════════ */
.prog-week-chart {
  display: flex; align-items: flex-end; gap: 6px; height: 120px;
  padding: 12px 8px 0; background: var(--wt-card-bg, #fff);
  border: 1px solid var(--wt-border, #e2e8f0); border-radius: 12px;
}
.prog-week-bar-wrap {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  height: 100%; justify-content: flex-end;
}
.prog-week-bar {
  width: 100%; max-width: 40px; min-height: 4px; border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, #6366f1, #818cf8);
  transition: height .4s cubic-bezier(.22,1,.36,1);
}
.prog-week-label {
  font-size: 0.58rem; color: var(--wt-text-muted, #94a3b8); margin-top: 4px;
  font-weight: 600; letter-spacing: .02em;
}

/* ══════════════════════════════════════════════════════════
   ALL PROGRAMS — Scorecard Row + Card Grid
   ══════════════════════════════════════════════════════════ */
.prog-all-scorecards {
  display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap;
}
.prog-all-sc {
  flex: 1; min-width: 120px; padding: 16px 18px;
  background: var(--surf, #fff); border: 1.5px solid var(--border-s, #f3f4f6);
  border-radius: 14px; text-align: center;
  transition: border-color .2s, box-shadow .2s;
}
.prog-all-sc:hover {
  border-color: var(--border, #e5e7eb);
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.prog-all-sc-value {
  font-size: 24px; font-weight: 800; line-height: 1.2;
}
.prog-all-sc-label {
  font-size: 11px; font-weight: 700; color: var(--ink2, #6b7280);
  text-transform: uppercase; letter-spacing: .4px; margin-top: 2px;
}
.prog-all-sc-sub {
  font-size: 11px; color: var(--ink3, #9ca3af); margin-top: 2px; line-height: 1.3;
}

.prog-all-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.prog-all-card {
  padding: 18px 20px; background: var(--surf, #fff);
  border: 1.5px solid var(--border, #e5e7eb); border-radius: 14px;
  cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s;
  position: relative; overflow: hidden;
}
.prog-all-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--prog-accent, #6366f1); border-radius: 14px 14px 0 0;
}
.prog-all-card:hover {
  border-color: var(--prog-accent, #6366f1);
  box-shadow: 0 4px 16px rgba(99, 102, 241, .1);
  transform: translateY(-2px);
}
.prog-all-card-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
}
.prog-all-card-health {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.prog-all-card-title {
  font-size: 14px; font-weight: 700; color: var(--ink, #111);
  flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prog-all-card-type {
  font-size: 11px; color: var(--ink3, #9ca3af); font-weight: 500; margin-bottom: 10px;
}
.prog-all-card-stats {
  display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 12px;
  color: var(--ink2, #6b7280); margin-bottom: 10px;
}
.prog-all-card-stats strong { color: var(--ink, #111); }
.prog-all-card-bar {
  height: 6px; background: #e5e7eb; border-radius: 3px; overflow: hidden;
  margin-bottom: 4px;
}
.prog-all-card-bar-fill {
  height: 100%; border-radius: 3px;
  transition: width .4s cubic-bezier(.22,1,.36,1);
}
.prog-all-card-pct {
  font-size: 11px; font-weight: 600; text-align: right;
}
.prog-all-card-alert {
  display: inline-block; margin-top: 8px; padding: 2px 8px; font-size: 11px;
  font-weight: 600; color: #ef4444; background: #fef2f2;
  border: 1px solid #fecaca; border-radius: 6px;
}
@media (max-width: 600px) {
  .prog-all-scorecards { gap: 8px; }
  .prog-all-sc { min-width: 90px; padding: 12px 10px; }
  .prog-all-sc-value { font-size: 18px; }
  .prog-all-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════
   PROGRAM CARD v2 — Rich, large, client-aware
   ══════════════════════════════════════════════════════════ */
.prog-all-grid {
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 18px;
}
.prog-card {
  position: relative;
  background: var(--surf, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 16px;
  padding: 20px 22px 18px;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .25s ease, transform .2s ease;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 280px;
}
.prog-card:hover {
  border-color: var(--prog-accent, #6366f1);
  box-shadow: 0 10px 28px -8px rgba(15, 23, 42, .15),
              0 4px 12px -4px rgba(99, 102, 241, .18);
  transform: translateY(-3px);
}
.prog-card-rail {
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--prog-accent, #6366f1), var(--prog-bar, #3b82f6));
  border-radius: 16px 16px 0 0;
}
.prog-card-top {
  display: flex; align-items: flex-start; gap: 12px;
  justify-content: space-between;
}
.prog-card-client {
  display: flex; align-items: center; gap: 10px;
  min-width: 0; flex: 1;
}
.prog-card-logo {
  width: 44px; height: 44px; border-radius: 50%;
  background: #f3f4f6;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
  border: 1px solid var(--border, #e5e7eb);
}
.prog-card-logo img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 50%;
}
.prog-card-logo-initials {
  font-size: 13px; font-weight: 800; color: #374151;
  letter-spacing: .5px;
  background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
}
.prog-card-logo-empty {
  color: #9ca3af;
  background: #f9fafb;
}
.prog-card-client-meta { min-width: 0; }
.prog-card-client-name {
  font-size: 13px; font-weight: 700; color: var(--ink, #0f172a);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 200px;
}
.prog-card-client-sub {
  font-size: 11px; color: var(--ink3, #9ca3af); font-weight: 500;
  margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 200px;
}
.prog-card-title {
  font-size: 18px; font-weight: 800; color: var(--ink, #0f172a);
  line-height: 1.3;
  /* Clamp 2 lines */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.prog-card-sub {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; margin-top: -6px;
  flex-wrap: wrap;
}
.prog-card-type {
  font-weight: 600; color: var(--ink2, #6b7280);
  padding: 3px 9px; background: #f3f4f6;
  border-radius: 999px;
}
.prog-card-health {
  display: inline-flex; align-items: center; gap: 5px;
  font-weight: 700;
}
.prog-card-health-dot {
  width: 7px; height: 7px; border-radius: 50%; display: inline-block;
}
.prog-card-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--border, #eef0f3);
  border-bottom: 1px solid var(--border, #eef0f3);
}
.prog-card-stat { text-align: left; min-width: 0; }
.prog-card-stat-v {
  font-size: 15px; font-weight: 800; color: var(--ink, #0f172a);
  line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prog-card-stat-l {
  font-size: 10px; font-weight: 700; color: var(--ink3, #9ca3af);
  text-transform: uppercase; letter-spacing: .5px;
  margin-top: 2px;
}
.prog-card-progress { display: flex; flex-direction: column; gap: 4px; }
.prog-card-progress-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; font-weight: 700; color: var(--ink2, #6b7280);
  text-transform: uppercase; letter-spacing: .4px;
}
.prog-card-progress-head-2 { margin-top: 6px; }
.prog-card-progress-pct { font-size: 12px; font-weight: 800; }
.prog-card-bar {
  height: 8px; background: #eef0f3; border-radius: 999px; overflow: hidden;
}
.prog-card-bar-fill {
  height: 100%; border-radius: 999px;
  transition: width .5s cubic-bezier(.22, 1, .36, 1);
}
.prog-card-badges {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 2px;
}
.prog-card-badge {
  display: inline-flex; align-items: center;
  padding: 3px 9px; font-size: 11px; font-weight: 700;
  border-radius: 999px; border: 1px solid transparent;
}
.prog-card-badge-alert { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }
.prog-card-badge-soon { color: #b45309; background: #fffbeb; border-color: #fde68a; }
.prog-card-badge-past { color: #6b7280; background: #f3f4f6; border-color: #e5e7eb; }

/* Tier accents (subtle) */
.prog-card.tier-platinum .prog-card-rail { background: linear-gradient(90deg, #64748b, #334155); }
.prog-card.tier-gold .prog-card-rail { background: linear-gradient(90deg, #f59e0b, #d97706); }
.prog-card.tier-silver .prog-card-rail { background: linear-gradient(90deg, #94a3b8, #64748b); }
.prog-card.tier-bronze .prog-card-rail { background: linear-gradient(90deg, #d97706, #92400e); }

@media (max-width: 720px) {
  .prog-all-grid { grid-template-columns: 1fr; }
  .prog-card-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════════════════
   PROGRAMS OVERVIEW — left panel grouped row design
   Compact list rows used inside #progOverviewPanel.
   ══════════════════════════════════════════════════════════ */
.prog-overview-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
  margin-bottom: 8px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.prog-overview-row:hover {
  transform: translateY(-1px);
  border-color: #c7d2fe;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
}
.prog-overview-logo {
  width: 36px; height: 36px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #f1f5f9; color: #475569; font-size: 12px; font-weight: 700;
  overflow: hidden; flex-shrink: 0;
}
.prog-overview-logo img { width: 100%; height: 100%; object-fit: cover; }
.prog-overview-logo-init { letter-spacing: .5px; }
.prog-overview-mid { flex: 1; min-width: 0; }
.prog-overview-name {
  font-weight: 600; font-size: 14px; color: #0f172a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prog-overview-meta {
  font-size: 12px; color: #64748b; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prog-overview-bar {
  margin-top: 6px; height: 4px; border-radius: 999px;
  background: #f1f5f9; overflow: hidden;
}
.prog-overview-bar-fill {
  height: 100%; border-radius: 999px;
  transition: width .25s ease;
}
.prog-overview-right {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.prog-overview-health {
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block;
}
.prog-overview-pct {
  font-size: 12px; font-weight: 700; color: #334155;
  min-width: 36px; text-align: right;
}
.prog-overview-chip {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 600;
  padding: 3px 8px; border-radius: 999px;
  background: #f1f5f9; color: #475569;
  border: 1px solid #e2e8f0;
}
.prog-overview-chip-soon { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.prog-overview-chip-late { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }

/* Soft empty state (less aggressive than wk-empty) */
.wk-empty-soft {
  font-size: 13px; color: #94a3b8;
  padding: 8px 4px; font-style: italic;
}

/* Right-side mini-stat rows (used in support modules) */
.wk-stat-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0;
  border-bottom: 1px dashed #f1f5f9;
  font-size: 13px;
}
.wk-stat-row:last-child { border-bottom: none; }
.wk-stat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.wk-stat-lbl { color: #475569; flex: 1; }
.wk-stat-val { font-weight: 700; color: #0f172a; }

/* ══════════════════════════════════════════════════════════
   PROGRAMS → STAFFING — clickable consultant card grid
   Replaces the old table view; cards are buttons that open
   the person detail popup. Filter visibility is driven by
   data-filter-tag (matches scorecard data-wk-filter values).
   ══════════════════════════════════════════════════════════ */
.prog-staff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  padding: 12px 16px 16px;
}
.prog-staff-card {
  display: flex; flex-direction: column; gap: 9px;
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #ffffff;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
/* ⚠️ THIS CARD IS A <button>, and dashboard-meta.js injects
   `button:not(.ax-card):not(.tcd-view-btn):not(.tcd-filter-btn):not(.tcd-ai-btn):not(.tmbp-add-btn)
    { border-radius: var(--wt-theme-btn-radius) !important; }`
   at runtime. That selector scores (0,5,1) and beats `.prog-staff-card` (0,1,0)
   even with !important, so under the tenant theme's large button radius these
   cards rendered as OVALS — Tyler: "I hate that the cards have a circle
   effect." Anything whose SHAPE is semantic (a card, a tile, a pill) must be
   ID-SCOPED to win: an id puts this at (1,1,0). Don't "fix" this by lowering
   the theme radius — every real button in the app wants it. */
#progStaffingCards .prog-staff-card { border-radius: 14px !important; }
.prog-staff-card:hover {
  transform: translateY(-2px);
  border-color: #c7d2fe;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.07);
}
.prog-staff-card:focus-visible {
  outline: 2px solid #6366f1; outline-offset: 2px;
}
.prog-staff-card-head {
  display: flex; align-items: center; gap: 10px;
}
.prog-staff-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff; font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  letter-spacing: .5px; flex-shrink: 0; overflow: hidden;
}
/* These are our own people and every other surface shows their photo. The
   gradient stays underneath as the initials tile, so a dead URL degrades to
   what the card looked like before rather than to a blank circle. */
.prog-staff-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prog-staff-avatar.has-photo { background: #eef2f7; }
.prog-staff-id { flex: 1; min-width: 0; }
.prog-staff-name {
  font-weight: 600; font-size: 14px; color: #0f172a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prog-staff-role {
  font-size: 12px; color: #64748b; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The headline used to be "Allocation %" — actual ÷ task estimates, which
   produced 575% for 11.5h against 2h of estimates. It is HOURS LOGGED now: the
   one number on this card that is unambiguously true. */
.prog-staff-hero {
  flex-shrink: 0; text-align: right; line-height: 1.1;
}
.prog-staff-hero-v {
  display: block; font-weight: 750; font-size: 18px; color: #0f172a;
  letter-spacing: -.02em;
}
.prog-staff-hero-l {
  display: block; font-size: 10px; color: #94a3b8;
  text-transform: uppercase; letter-spacing: .4px; margin-top: 1px;
}
/* Share of the team's logged hours — the same question the allocation bar was
   reaching for, against a denominator that is real. */
.prog-staff-bar {
  height: 5px; border-radius: 999px; background: #f1f5f9; overflow: hidden;
}
.prog-staff-bar-fill {
  height: 100%; border-radius: 999px; transition: width .25s ease;
  background: linear-gradient(90deg, #0d9488, #16a34a);
}
.prog-staff-share {
  font-size: 11px; color: #64748b; margin-top: -3px;
}
.prog-staff-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
.prog-staff-stat {
  text-align: center; padding: 6px 4px;
  background: #f8fafc; border-radius: 8px;
}
.prog-staff-stat-val {
  font-size: 13px; font-weight: 700; color: #0f172a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prog-staff-stat-lbl {
  font-size: 10px; color: #64748b; margin-top: 1px;
  text-transform: uppercase; letter-spacing: .3px;
}
.prog-staff-foot {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.prog-staff-stat-val.is-missing { color: #b45309; font-weight: 650; }
.prog-staff-chip {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 600;
  padding: 3px 8px; border-radius: 999px;
  background: #f1f5f9; color: #475569;
  border: 1px solid #e2e8f0;
}
/* Actionable, not decorative: their logged hours cannot be valued until someone
   sets a rate, and that is the whole point of showing it. */
.prog-staff-chip--warn { background: #fffbeb; color: #b45309; border-color: #fde68a; }
/* Hours logged against somebody who isn't in Settings → Users — a person record
   to fix. The hours stay; the row says why it looks odd. */
.prog-staff-notuser {
  display: inline-block; margin-left: 6px; vertical-align: middle;
  font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: #92400e; background: #fef3c7; border-radius: 5px; padding: 1px 5px;
}
/* The one chip that DOES something — it filters the work log to this person. */
.prog-staff-chip--act { cursor: pointer; background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.prog-staff-chip--act:hover { background: #dbeafe; }

/* ══════════════════════════════════════════════════════════════════════
   FILTERED TO SOMEBODY → THE FOCUS CARD
   Tyler, 2026-08-05: "when I filter to the staffing's specific person's
   name, I only want to see their card at the top. You can make it wide
   then, at that point, to really give, 'Hey, this is everything of this
   person.'" The grid drops to ONE column and the card gets the width.
   ⚠️ Width has to earn itself: this card carries what the small one
   cannot (where the hours went, when, every rate actually billed), never
   the same four tiles stretched across 1400px.
   ══════════════════════════════════════════════════════════════════════ */
.prog-staff-grid.is-focus { grid-template-columns: 1fr; }
.prog-staff-focus {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px 18px; background: #fff;
  border: 1px solid #dbe3ee; border-radius: 16px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .06);
  border-left: 3px solid #6366f1;
}
.psf-head { display: flex; align-items: center; gap: 12px; }
.psf-face {
  width: 54px; height: 54px; border-radius: 50%; flex-shrink: 0; overflow: hidden; cursor: pointer;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff; font-size: 17px; font-weight: 700; letter-spacing: .5px;
  display: inline-flex; align-items: center; justify-content: center;
}
.psf-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.psf-face.has-photo { background: #eef2f7; }
.psf-id { flex: 1 1 auto; min-width: 0; }
.psf-name {
  font-size: 19px; font-weight: 750; color: #0f172a; letter-spacing: -.01em; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.psf-name:hover { color: #4338ca; }
.psf-sub { font-size: 12.5px; color: #64748b; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psf-hero { flex: 0 0 auto; text-align: right; line-height: 1.05; }
.psf-hero-v { display: block; font-size: 30px; font-weight: 780; color: #0f172a; letter-spacing: -.025em; }
.psf-hero-l { display: block; font-size: 10.5px; color: #94a3b8; text-transform: uppercase; letter-spacing: .4px; margin-top: 2px; }
/* The way out of the filter lives ON the filtered thing. */
.psf-clear {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  border: 1px solid #e2e8f0; background: #fff; border-radius: 999px;
  font: inherit; font-size: 11.5px; font-weight: 700; color: #64748b; padding: 5px 11px; cursor: pointer;
}
.psf-clear:hover { border-color: #cbd5e1; background: #f8fafc; color: #0f172a; }
.psf-clear svg { width: 11px; height: 11px; }
.psf-share { font-size: 12px; color: #64748b; margin-top: -3px; }
.psf-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 8px; }
.psf-tile { padding: 9px 10px; background: #f8fafc; border-radius: 10px; text-align: center; }
.psf-tile-v { font-size: 16px; font-weight: 750; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.psf-tile-l { font-size: 10px; color: #64748b; text-transform: uppercase; letter-spacing: .3px; margin-top: 2px; }
/* Client work vs our own — the split every money question here turns on. */
.psf-split { display: flex; flex-direction: column; gap: 5px; }
.psf-split-bar { height: 7px; border-radius: 999px; background: #e0f2fe; overflow: hidden; }
.psf-split-bill { display: block; height: 100%; background: linear-gradient(90deg, #0d9488, #16a34a); }
.psf-split-lbl { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11.5px; color: #64748b; }
.psf-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.psf-dot--bill { background: #16a34a; }
.psf-dot--int { background: #38bdf8; }
.psf-warn { color: #b45309; font-weight: 700; }
.psf-when { margin-left: auto; color: #94a3b8; }
/* Where the hours went — the reason the card is wide. */
.psf-work { margin-top: 2px; border-top: 1px solid #eef2f7; padding-top: 10px; }
.psf-work-h { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; margin-bottom: 6px; }
.psf-work-row {
  display: grid; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 9px; cursor: pointer;
  grid-template-columns: 20px minmax(150px, 1.5fr) minmax(90px, .9fr) minmax(80px, 1fr) 58px 74px;
  font-size: 12.5px;
}
.psf-work-row:hover { background: #f8fafc; }
.psf-work-logo { display: flex; align-items: center; }
.psf-work-nm { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 650; color: #1d4ed8;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psf-work-co { color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psf-work-track { height: 6px; border-radius: 999px; background: #f1f5f9; overflow: hidden; }
.psf-work-fill { display: block; height: 100%; background: linear-gradient(90deg, #0d9488, #16a34a); }
.psf-work-fill.is-int { background: linear-gradient(90deg, #0284c7, #38bdf8); }
.psf-work-h2 { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: #0f172a; }
.psf-work-amt { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: #047857; }
.psf-work-more { padding: 7px 8px 0; font-size: 11.5px; color: #94a3b8; }
@media (max-width: 1100px) {
  .psf-work-row { grid-template-columns: 20px minmax(120px, 1.6fr) 58px 74px; }
  .psf-work-co, .psf-work-track { display: none; }
  .psf-hero-v { font-size: 24px; }
}

/* ══════════════════════════════════════════════════════════════════════
   WORK LOG — what the hours on those cards actually were.
   Seven columns on a grid so the numbers line up down the page without a
   <table>; the note column is the one that gets the slack.
   ══════════════════════════════════════════════════════════════════════ */
.prog-staff-log { display: flex; flex-direction: column; }
.prog-staff-log-row {
  display: grid; align-items: center; gap: 10px;
  grid-template-columns: 92px minmax(140px, 1.1fr) minmax(150px, 1.4fr) minmax(90px, .9fr) minmax(0, 1.6fr) 62px 78px;
  padding: 8px 10px; border-bottom: 1px solid var(--wk-border, #eef2f7);
  cursor: pointer; font-size: 12.5px;
}
.prog-staff-log-row:hover { background: #f8fafc; }
.prog-staff-log-row:last-child { border-bottom: 0; }
.psl-date { color: #64748b; font-weight: 600; white-space: nowrap; }
.psl-who { display: flex; align-items: center; gap: 7px; min-width: 0; }
.psl-who .ep-circle { flex: 0 0 auto; }
.psl-who-nm { font-weight: 650; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psl-scope { display: flex; align-items: center; gap: 6px; min-width: 0; }
.psl-scope-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #1d4ed8; font-weight: 600; }
.psl-muted { color: #94a3b8; font-weight: 500; }
.psl-client { color: #475569; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psl-int {
  font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: #0369a1; background: #e0f2fe; border-radius: 5px; padding: 1px 5px;
}
.psl-note { color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psl-hrs { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: #0f172a; }
.psl-amt { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: #047857; }
.prog-staff-log-sum { font-size: 12px; font-weight: 700; color: #475569; }
/* A cap has to admit it is a cap — see the note in programs.js. */
.prog-staff-log-more { padding: 10px 12px; font-size: 11.5px; color: #94a3b8; }
/* Narrow: the note and the client are the first things to go. */
@media (max-width: 1180px) {
  .prog-staff-log-row { grid-template-columns: 84px minmax(120px, 1fr) minmax(130px, 1.2fr) 58px 74px; }
  .psl-client, .psl-note { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   BUDGET & ACTUALS — project cards, then the breakdown of one project.
   Replaces the nine-column "Line Item" table whose rows were projects.
   ══════════════════════════════════════════════════════════════════════ */
.pb-grid {
  display: grid; gap: 12px; padding: 4px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.pb-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 15px; cursor: pointer;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
  border-left: 3px solid #cbd5e1;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.pb-card:hover { box-shadow: 0 6px 18px rgba(15,23,42,.09); transform: translateY(-1px); }
.pb-card:focus-visible { outline: 2px solid var(--c-blue, #3A86FF); outline-offset: 2px; }
.pb-card--ok    { border-left-color: #16a34a; }
.pb-card--watch { border-left-color: #f59e0b; }
.pb-card--over  { border-left-color: #dc2626; }
.pb-card--none  { border-left-color: #cbd5e1; }
.pb-card-head { display: flex; align-items: flex-start; gap: 10px; }
.pb-card-logo { flex: 0 0 auto; }
.pb-card-logo .wt-dd-mark { width: 30px; height: 30px; border-radius: 8px; font-size: 11px; }
/* text-align is explicit here: the panel these cards sit in centres its text,
   and a centred two-line project name beside a left-aligned logo reads broken. */
.pb-card-id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.pb-card-name {
  font-size: 13.5px; font-weight: 800; color: #0f172a; line-height: 1.3; text-align: left;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pb-card-client { font-size: 11px; color: #64748b; font-weight: 600; text-align: left; }
.pb-figs, .pb-rows, .pb-row-main, .pb-row-figs, .pb-block-head { text-align: left; }
.pb-pill {
  flex: 0 0 auto; padding: 3px 8px; border-radius: 999px; white-space: nowrap;
  font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0;
}
.pb-pill--ok    { background: #ecfdf5; color: #15803d; border-color: #a7f3d0; }
.pb-pill--watch { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.pb-pill--over  { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.pb-bar { height: 5px; border-radius: 999px; background: #eef2f7; overflow: hidden; }
.pb-bar-fill { height: 100%; border-radius: 999px; }
.pb-bar-fill--ok { background: #16a34a; }
.pb-bar-fill--watch { background: #f59e0b; }
.pb-bar-fill--over { background: #dc2626; }
.pb-bar-fill--none { background: transparent; }
.pb-figs { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.pb-fig { display: flex; flex-direction: column; gap: 1px; }
.pb-fig-lbl {
  font-size: 9px; font-weight: 700; color: #94a3b8;
  text-transform: uppercase; letter-spacing: .05em;
}
.pb-fig-val { font-size: 12.5px; font-weight: 800; color: #0f172a; font-variant-numeric: tabular-nums; }
.pb-fig-val--bad { color: #dc2626; }
.pb-card-foot {
  display: flex; align-items: center; gap: 6px;
  border-top: 1px solid #f1f5f9; padding-top: 9px;
}
.pb-card-foot .wk-pp-face { margin-left: -6px; }
.pb-card-foot .wk-pp-face:first-child { margin-left: 0; }
.pb-card-foot-txt { font-size: 11px; color: #64748b; font-weight: 600; margin-left: 4px; }

/* One project: the four breakdown blocks. */
.pb-block { padding: 4px 4px 16px; }
.pb-block-head { display: flex; align-items: baseline; gap: 8px; padding: 8px 6px 6px; }
.pb-block-title {
  font-size: 10.5px; font-weight: 800; color: #475569;
  text-transform: uppercase; letter-spacing: .06em;
}
.pb-block-note { font-size: 11px; color: #94a3b8; font-weight: 600; }
.pb-block-empty {
  font-size: 12px; color: #94a3b8; padding: 12px 14px; line-height: 1.5;
  background: #fbfdff; border: 1px dashed #e2e8f0; border-radius: 10px;
}
.pb-rows { display: flex; flex-direction: column; gap: 6px; }
.pb-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 11px 14px; background: #fff;
  border: 1px solid #e8edf3; border-radius: 10px;
}
.pb-row--link { cursor: pointer; }
.pb-row--link:hover { border-color: #bfdbfe; background: #f8fbff; }
.pb-row--link:focus-visible { outline: 2px solid var(--c-blue, #3A86FF); outline-offset: 1px; }
.pb-row-main { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pb-row-name {
  font-size: 13px; font-weight: 700; color: #1e293b;
  display: flex; align-items: center; gap: 6px;
}
.pb-row-go { color: #cbd5e1; flex: 0 0 auto; }
.pb-row--link:hover .pb-row-go { color: var(--c-blue, #3A86FF); }
.pb-row-sub { font-size: 11px; color: #94a3b8; font-weight: 600; }
.pb-row-bar { display: block; height: 4px; border-radius: 999px; background: #eef2f7; overflow: hidden; margin-top: 3px; max-width: 260px; }
.pb-row-bar-fill { display: block; height: 100%; border-radius: 999px; }
.pb-row-bar-fill--ok { background: #16a34a; }
.pb-row-bar-fill--watch { background: #f59e0b; }
.pb-row-bar-fill--over { background: #dc2626; }
.pb-row-bar-fill--none { background: #cbd5e1; }
.pb-row-figs { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.pb-row-fig { display: flex; flex-direction: column; gap: 1px; min-width: 62px; }
.pb-row-fig-lbl {
  font-size: 9px; font-weight: 700; color: #94a3b8;
  text-transform: uppercase; letter-spacing: .05em;
}
.pb-row-fig-val { font-size: 12.5px; font-weight: 800; color: #0f172a; font-variant-numeric: tabular-nums; }

@media (prefers-color-scheme: dark) {
  .pb-card, .pb-row { background: #161b26; border-color: #2a3140; }
  .pb-card-name, .pb-fig-val, .pb-row-fig-val { color: #f3f4f6; }
  .pb-row-name { color: #e5e7eb; }
  .pb-card-foot { border-top-color: #2a3140; }
  .pb-bar, .pb-row-bar { background: #232a38; }
  .pb-block-empty { background: #141926; border-color: #2a3140; }
  .pb-block-title { color: #cbd5e1; }
  .prog-staff-log-row { border-bottom-color: #232a38; }
  .prog-staff-log-row:hover { background: #161b26; }
  .psl-who-nm, .psl-hrs { color: #f3f4f6; }
  .psl-client { color: #cbd5e1; }
  .psl-scope-nm { color: #93c5fd; }
  .prog-staff-chip--act { background: #17233a; color: #93c5fd; border-color: #26456e; }
  /* Focus card (filtered to specific people) */
  .prog-staff-focus { background: #161b26; border-color: #2a3140; }
  .psf-name, .psf-hero-v, .psf-tile-v, .psf-work-h2 { color: #f3f4f6; }
  .psf-tile { background: #141926; }
  .psf-work { border-top-color: #232a38; }
  .psf-work-row:hover { background: #1b2130; }
  .psf-work-nm { color: #93c5fd; }
  .psf-work-co { color: #cbd5e1; }
  .psf-work-track, .psf-split-bar { background: #232a38; }
  .psf-clear { background: #141926; border-color: #2a3140; color: #cbd5e1; }
  .psf-clear:hover { background: #1b2130; color: #f3f4f6; }
}