/* ============================================================
   Sarj Implementation Hub — Design System
   Based on official Sarj.ai Brand Guidelines 2026 V4
   ============================================================ */

/* ---- Fonts ---- */
@font-face {
  font-family: "Nunito";
  src: url("fonts/Nunito-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("fonts/Nunito-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("fonts/Nunito-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("fonts/Nunito-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("fonts/Nunito-ExtraBold.ttf") format("truetype");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Huwiya Arabic";
  src: url("fonts/itfHuwiyaArabic-Light.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Huwiya Arabic";
  src: url("fonts/itfHuwiyaArabic-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Huwiya Arabic";
  src: url("fonts/itfHuwiyaArabic-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ============================================================
   Design Tokens (Sarj official brand)
   ============================================================ */
:root {
  /* Primary palette */
  --black: #000000;
  --white: #FFFFFF;
  --cream: #F1F3F5;            /* soft neutral grey (was Sarj beige) */
  --cream-2: #F7F8FA;          /* lighter grey for subtle backgrounds */
  --cream-3: #FBFCFD;          /* lightest grey, near-white */

  /* Purple shades (Sarj official #6352A2 base) */
  --purple: #6352A2;           /* purple-100 (PANTONE 2587 C) */
  --purple-90: #705FAA;
  --purple-80: #7B6CB1;
  --purple-70: #887AB9;
  --purple-60: #9588C1;
  --purple-50: #A398C9;
  --purple-40: #B3AAD3;
  --purple-30: #C3BCDE;
  --purple-20: #D5D0E8;
  --purple-10: #E7E5F2;
  --purple-soft: #F1EFF8;      /* extra-light wash for backgrounds */
  --purple-dark: #2B165E;      /* secondary purple */

  /* Grayscale (neutral) */
  --ink: #0A0A0B;              /* near-black for text */
  --ink-2: #2A2A30;            /* secondary text */
  --ink-3: #5A5A66;            /* tertiary text */
  --mute: #8A8A95;             /* muted/disabled */
  --line: #E4E7EB;             /* main border (neutral grey) */
  --line-2: #CBD0D6;           /* stronger grey border */
  --line-3: #EDEFF2;           /* very subtle grey divider */

  /* Status colors (formal, muted) */
  --ok: #00807A;               /* teal (Sarj secondary) */
  --ok-soft: #E5F2F0;
  --warn: #B88500;
  --warn-soft: #FBF4E0;
  --bad: #C13530;
  --bad-soft: #FBEBEA;
  --info: #003B71;             /* Sarj secondary blue */
  --info-soft: #E1EAF2;

  /* Shape tokens */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  /* Shadows (very subtle, premium feel) */
  --shadow-xs: 0 1px 2px rgba(10, 10, 15, 0.04);
  --shadow-sm: 0 1px 3px rgba(10, 10, 15, 0.05), 0 1px 2px rgba(10, 10, 15, 0.03);
  --shadow: 0 4px 12px rgba(10, 10, 15, 0.05), 0 2px 4px rgba(10, 10, 15, 0.03);
  --shadow-lg: 0 12px 32px rgba(10, 10, 15, 0.08), 0 4px 8px rgba(10, 10, 15, 0.04);

  /* Layout */
  --sidebar-w: 264px;
  --header-h: 64px;
  --content-max: 1320px;

  /* Transitions */
  --t-fast: 120ms ease;
  --t: 180ms ease;
  --t-slow: 260ms ease;

  /* Fonts */
  --font-en: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-ar: "Huwiya Arabic", "Nunito", -apple-system, sans-serif;
}

/* ============================================================
   Base
   ============================================================ */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--cream-3);
  color: var(--ink);
  font-family: var(--font-en);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body[dir="rtl"], html[dir="rtl"] {
  font-family: var(--font-ar);
}

a { color: var(--purple); text-decoration: none; }
a:hover { text-decoration: underline; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: var(--ink);
}

img { max-width: 100%; display: block; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; border: 2px solid var(--cream-3); }
::-webkit-scrollbar-thumb:hover { background: var(--mute); }

/* ============================================================
   App Shell (Sidebar + Header + Main)
   ============================================================ */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

/* ---- Sidebar ---- */
.sidebar {
  background: var(--white);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

html[dir="rtl"] .sidebar {
  border-right: none;
  border-left: 1px solid var(--line);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line-3);
}

.brand-mark {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: var(--black);
  color: var(--white);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.5px;
  flex-shrink: 0;
}

.brand-mark-purple {
  background: var(--purple);
}

/* Official Sarj wordmark inside the sidebar */
.brand-logo-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 8px;
}

.brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.brand-name {
  font-weight: 800;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: -0.2px;
  line-height: 1.1;
}

.brand-sub {
  font-size: 11px;
  color: var(--mute);
  margin-top: 2px;
  font-weight: 500;
  letter-spacing: 0.2px;
}

/* Workspace switcher */
.ws-switch {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-3);
}

.ws-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 8px;
}

.ws-button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: start;
  transition: var(--t);
}

.ws-button:hover {
  background: var(--purple-soft);
  border-color: var(--purple-30);
}

/* Locked variant — used in client portal so the client can't switch
   workspaces. Same look as the regular button but no hover affordance,
   no cursor pointer, no dropdown. */
.ws-button-locked {
  cursor: default;
  pointer-events: none;
  opacity: 0.95;
}
.ws-button-locked:hover {
  background: var(--cream);
  border-color: var(--line);
}

.ws-button-avatar {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: var(--purple);
  color: var(--white);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
}

.ws-button-meta {
  flex: 1;
  min-width: 0;
}

.ws-button-name {
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ws-button-role {
  font-size: 11px;
  color: var(--mute);
  margin-top: 1px;
}

.ws-chevron {
  color: var(--mute);
  font-size: 14px;
  flex-shrink: 0;
}

/* Workspace dropdown */
.ws-dropdown {
  position: absolute;
  top: 100%;
  left: 16px;
  right: 16px;
  margin-top: 4px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 100;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t), max-height var(--t);
}

.ws-dropdown.open {
  max-height: 480px;
  opacity: 1;
  pointer-events: auto;
}

.ws-section {
  padding: 8px 0;
}

.ws-section + .ws-section { border-top: 1px solid var(--line-3); }

.ws-section-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 6px 14px;
}

.ws-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  cursor: pointer;
  transition: background var(--t-fast);
}

.ws-option:hover {
  background: var(--cream-2);
}

.ws-option.active {
  background: var(--purple-soft);
}

.ws-option-avatar {
  width: 26px; height: 26px;
  border-radius: 6px;
  background: var(--purple);
  color: var(--white);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
}

.ws-option-avatar.admin {
  background: var(--black);
}

.ws-option-name {
  flex: 1;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
}

.ws-option-role {
  font-size: 11px;
  color: var(--mute);
}

.ws-check {
  color: var(--purple);
  font-size: 14px;
  font-weight: 800;
}

/* Sidebar navigation */
.sb-nav {
  flex: 1;
  padding: 12px 10px;
}

.sb-section {
  margin-bottom: 16px;
}

.sb-section-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 8px 12px 6px;
}

.sb-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--ink-2);
  font-weight: 600;
  font-size: 13.5px;
  transition: var(--t-fast);
  cursor: pointer;
  position: relative;
}

.sb-link:hover {
  background: var(--cream);
  color: var(--ink);
  text-decoration: none;
}

/* Active nav item — solid purple pill matching platform.sarj.ai. */
.sb-link.active {
  background: var(--purple);
  color: var(--white);
}
.sb-link.active:hover {
  background: var(--purple);
  color: var(--white);
}
.sb-link.active .sb-icon,
.sb-link.active .sb-icon svg {
  color: var(--white);
  stroke: var(--white);
}

.sb-icon {
  width: 18px; height: 18px;
  display: grid; place-items: center;
  flex-shrink: 0;
}

.sb-icon svg { width: 18px; height: 18px; stroke-width: 1.7; }

.sb-link-badge {
  margin-inline-start: auto;
  background: var(--cream-2);
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
}

.sb-link.active .sb-link-badge {
  background: var(--purple);
  color: var(--white);
  border-color: var(--purple);
}

/* Sidebar footer */
.sb-footer {
  padding: 12px 16px 18px;
  border-top: 1px solid var(--line-3);
  font-size: 11px;
  color: var(--mute);
}

.sb-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}

.sb-footer-link {
  color: var(--ink-3);
  font-weight: 600;
  font-size: 11.5px;
}

/* ============================================================
   Header
   ============================================================ */
.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.header {
  height: var(--header-h);
  background: var(--white);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 50;
  gap: 16px;
}

.header-title {
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-title .crumb-sep {
  color: var(--mute);
  font-weight: 400;
}

.header-title .crumb-now {
  color: var(--ink);
}

.header-search {
  flex: 1;
  max-width: 420px;
  margin-inline: auto 0;
  position: relative;
}

.header-search input {
  width: 100%;
  height: 38px;
  padding-inline: 38px 14px;
  background: var(--cream);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 13px;
  outline: none;
  transition: var(--t);
}

.header-search input:focus {
  background: var(--white);
  border-color: var(--purple-40);
  box-shadow: 0 0 0 3px var(--purple-10);
}

.header-search-icon {
  position: absolute;
  top: 50%;
  inset-inline-start: 12px;
  transform: translateY(-50%);
  color: var(--mute);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lang-toggle {
  display: flex;
  align-items: center;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
}

.lang-toggle button {
  height: 28px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-3);
  border-radius: 999px;
  transition: var(--t-fast);
}

.lang-toggle button.active {
  background: var(--ink);
  color: var(--white);
}

.icon-btn {
  width: 36px; height: 36px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: var(--ink-3);
  transition: var(--t-fast);
  border: 1px solid transparent;
  position: relative;
}

.icon-btn:hover {
  background: var(--cream);
  color: var(--ink);
}

.icon-btn svg { width: 18px; height: 18px; stroke-width: 1.7; }

.notif-dot {
  position: absolute;
  top: 7px;
  inset-inline-end: 8px;
  width: 7px; height: 7px;
  background: var(--purple);
  border-radius: 50%;
  border: 2px solid var(--white);
}

/* Shared-state sync indicator in the header. ✓ = synced, ⟳ = syncing,
   ● = local-only fallback (server unreachable / Vercel Blob not enabled). */
.sync-chip {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--cream-2, #F7F8FA);
  color: var(--mute, #888);
  border: 1px solid var(--line, #E4E7EB);
  letter-spacing: 0.3px;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.1s ease;
}
.sync-chip:hover { opacity: 0.85; }
.sync-chip:active { transform: scale(0.97); }
.sync-chip.synced {
  background: rgba(46, 156, 95, 0.12);
  border-color: rgba(46, 156, 95, 0.30);
  color: #1f8a4f;
}
.sync-chip.syncing {
  background: rgba(120, 86, 209, 0.10);
  border-color: rgba(120, 86, 209, 0.30);
  color: var(--accent, #7856D1);
}
.sync-chip.local-only {
  background: rgba(196, 68, 68, 0.10);
  border-color: rgba(196, 68, 68, 0.30);
  color: #c44;
}

.user-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px 4px 4px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--white);
}

html[dir="rtl"] .user-pill {
  padding: 4px 4px 4px 12px;
}

.user-pill-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--purple);
  color: var(--white);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
}

.user-pill-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
}

/* ============================================================
   Content area
   ============================================================ */
.content {
  flex: 1;
  padding: 28px 32px 48px;
  max-width: var(--content-max);
  width: 100%;
  margin: 0 auto;
}

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.page-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.5px;
  margin: 0 0 4px;
}

.page-sub {
  color: var(--ink-3);
  font-size: 13.5px;
  margin: 0;
}

.page-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 700;
  border: 1px solid transparent;
  transition: var(--t-fast);
  white-space: nowrap;
}

.btn svg { width: 16px; height: 16px; stroke-width: 2; }

.btn.primary {
  background: var(--ink);
  color: var(--white);
}
.btn.primary:hover { background: var(--purple-dark); }

.btn.accent {
  background: var(--purple);
  color: var(--white);
}
.btn.accent:hover { background: var(--purple-dark); }

.btn.ghost {
  background: var(--white);
  border-color: var(--line);
  color: var(--ink);
}
.btn.ghost:hover { background: var(--cream); border-color: var(--line-2); }

.btn.subtle {
  background: var(--cream);
  color: var(--ink-2);
}
.btn.subtle:hover { background: var(--purple-soft); color: var(--purple-dark); }

.btn.danger {
  background: var(--bad);
  color: var(--white);
}
.btn.danger:hover { opacity: 0.92; }

.btn.small { height: 32px; padding: 0 12px; font-size: 12px; }
.btn.tiny  { height: 26px; padding: 0 10px; font-size: 11.5px; }

/* ============================================================
   Cards
   ============================================================ */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-xs);
}

.card.flat { box-shadow: none; }

.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
}

.card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-title .count {
  background: var(--cream);
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}

.card-sub {
  color: var(--mute);
  font-size: 12px;
  margin-top: 2px;
}

/* ============================================================
   Stat cards (dashboards)
   ============================================================ */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}

.stat {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px 18px 16px;
  position: relative;
  overflow: hidden;
}

.stat-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--cream);
  color: var(--ink-3);
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}

.stat.accent .stat-icon { background: var(--purple-soft); color: var(--purple); }
.stat.warn .stat-icon   { background: var(--warn-soft); color: var(--warn); }
.stat.bad .stat-icon    { background: var(--bad-soft);  color: var(--bad); }
.stat.ok .stat-icon     { background: var(--ok-soft);   color: var(--ok); }
.stat.info .stat-icon   { background: var(--info-soft); color: var(--info); }

.stat-icon svg { width: 18px; height: 18px; stroke-width: 1.8; }

.stat-label {
  font-size: 12px;
  color: var(--ink-3);
  font-weight: 600;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.8px;
  line-height: 1;
}

.stat-trend {
  font-size: 11.5px;
  color: var(--mute);
  margin-top: 6px;
}

.stat-trend.up { color: var(--ok); }
.stat-trend.down { color: var(--bad); }

/* ============================================================
   Client / Project cards (grids)
   ============================================================ */
.entity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.entity-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px;
  transition: var(--t);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.entity-card:hover {
  border-color: var(--purple-30);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.entity-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.entity-avatar {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--purple);
  color: var(--white);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 16px;
  flex-shrink: 0;
  letter-spacing: -0.5px;
}

.entity-avatar.alt-1 { background: var(--ink); }
.entity-avatar.alt-2 { background: var(--info); }
.entity-avatar.alt-3 { background: var(--ok); }
.entity-avatar.alt-4 { background: var(--purple-dark); }

.entity-name {
  font-weight: 800;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: -0.2px;
  margin: 0;
}

.entity-meta {
  font-size: 12px;
  color: var(--mute);
  margin-top: 2px;
}

.entity-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid var(--line-3);
  border-bottom: 1px solid var(--line-3);
}

.entity-stat {
  text-align: center;
}

.entity-stat-val {
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
}

.entity-stat-lbl {
  font-size: 10.5px;
  color: var(--mute);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: 2px;
}

.entity-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-3);
}

/* ============================================================
   Badges / Pills (statuses)
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  background: var(--cream);
  color: var(--ink-3);
  border: 1px solid var(--line);
  white-space: nowrap;
}

.badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--mute);
}

.badge.ok    { background: var(--ok-soft);   color: var(--ok);   border-color: var(--ok-soft); }
.badge.ok::before    { background: var(--ok); }
.badge.warn  { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-soft); }
.badge.warn::before  { background: var(--warn); }
.badge.bad   { background: var(--bad-soft);  color: var(--bad);  border-color: var(--bad-soft); }
.badge.bad::before   { background: var(--bad); }
.badge.info  { background: var(--info-soft); color: var(--info); border-color: var(--info-soft); }
.badge.info::before  { background: var(--info); }
.badge.accent { background: var(--purple-soft); color: var(--purple); border-color: var(--purple-soft); }
.badge.accent::before { background: var(--purple); }

.badge.plain::before { display: none; }

/* ============================================================
   Progress bar
   ============================================================ */
.progress {
  width: 100%;
  height: 6px;
  background: var(--line-3);
  border-radius: 999px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--purple);
  border-radius: 999px;
  transition: width var(--t-slow);
}

.progress-fill.ok { background: var(--ok); }
.progress-fill.warn { background: var(--warn); }
.progress-fill.bad { background: var(--bad); }

.progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.progress-row .progress { flex: 1; }

.progress-row .pct {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  min-width: 36px;
  text-align: end;
}

/* ============================================================
   Tables
   ============================================================ */
.table-wrap {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.table {
  width: 100%;
  border-collapse: collapse;
}

.table thead th {
  text-align: start;
  font-size: 11px;
  font-weight: 700;
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 16px;
  background: var(--cream-2);
  border-bottom: 1px solid var(--line);
}

.table tbody td {
  padding: 14px 16px;
  font-size: 13px;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line-3);
  vertical-align: middle;
}

.table tbody tr:last-child td { border-bottom: none; }

.table tbody tr:hover td { background: var(--cream-3); }

.table tbody tr.clickable { cursor: pointer; }

.table .cell-primary {
  font-weight: 700;
  color: var(--ink);
}

.table .cell-mute { color: var(--mute); font-size: 12px; }

/* ============================================================
   Timeline (12 phases)
   ============================================================ */
.timeline {
  display: flex;
  flex-direction: column;
  position: relative;
}

.timeline-phase {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 16px;
  padding: 14px 0;
  position: relative;
}

.timeline-phase::before {
  content: "";
  position: absolute;
  inset-inline-start: 15px;
  top: 36px;
  bottom: -14px;
  width: 2px;
  background: var(--line);
}

.timeline-phase:last-child::before { display: none; }

.timeline-dot {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--line-2);
  display: grid;
  place-items: center;
  color: var(--mute);
  font-weight: 700;
  font-size: 12px;
  z-index: 1;
}

.timeline-phase.completed .timeline-dot {
  background: var(--ok);
  border-color: var(--ok);
  color: var(--white);
}
.timeline-phase.completed::before { background: var(--ok); }

.timeline-phase.in-progress .timeline-dot {
  background: var(--purple);
  border-color: var(--purple);
  color: var(--white);
  box-shadow: 0 0 0 4px var(--purple-soft);
}

.timeline-phase.blocked .timeline-dot {
  background: var(--bad);
  border-color: var(--bad);
  color: var(--white);
}

.timeline-phase.waiting .timeline-dot {
  background: var(--warn);
  border-color: var(--warn);
  color: var(--white);
}

.timeline-content {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.timeline-phase.in-progress .timeline-content {
  border-color: var(--purple-30);
  background: var(--purple-soft);
}

.timeline-phase.blocked .timeline-content {
  border-color: var(--bad);
  background: var(--bad-soft);
}

.timeline-title {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--ink);
  flex: 1;
  min-width: 160px;
}

.timeline-dates {
  font-size: 11.5px;
  color: var(--mute);
}

.timeline-owner {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-3);
  background: var(--cream);
  padding: 2px 8px;
  border-radius: 999px;
}

/* Clickable phase rows */
.timeline-phase.clickable { cursor: pointer; }
.timeline-phase.clickable:hover .timeline-content {
  border-color: var(--purple-30);
  box-shadow: var(--shadow-xs);
}

/* Inline phase editor */
.timeline-phase.editing .timeline-edit {
  background: var(--white);
  border: 1px solid var(--purple-30);
  border-radius: var(--radius);
  padding: 14px 16px;
  width: 100%;
  box-shadow: var(--shadow);
}

.timeline-edit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-3);
}

.timeline-edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.timeline-edit-grid .form-row { margin-bottom: 0; }
.timeline-edit .form-row { margin-bottom: 12px; }

.timeline-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.timeline-notes-preview {
  flex-basis: 100%;
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--line-3);
  font-style: italic;
}

@media (max-width: 640px) {
  .timeline-edit-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Kanban (tasks board)
   ============================================================ */
.kanban {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  overflow-x: auto;
}

.kanban-col {
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 200px;
}

.kanban-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 4px 8px;
}

.kanban-col-title {
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--ink-2);
}

.kanban-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: var(--t-fast);
}

.kanban-card:hover {
  border-color: var(--purple-30);
  box-shadow: var(--shadow-xs);
}

.kanban-card-title {
  font-weight: 700;
  color: var(--ink);
  font-size: 13px;
}

.kanban-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--mute);
}

.kanban-card-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

/* ============================================================
   File upload (drop zone)
   ============================================================ */
.upload {
  display: block;
  border: 2px dashed var(--line-2);
  border-radius: var(--radius-lg);
  padding: 36px 24px;
  text-align: center;
  background: var(--cream-2);
  cursor: pointer;
  transition: var(--t);
}

/* Side-by-side layout: project selector on one side, drop zone on the other */
.upload-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 20px;
  align-items: stretch;
}

@media (max-width: 780px) {
  .upload-row { grid-template-columns: 1fr; }
}

.upload-side {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.upload-compact {
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 160px;
}

.upload:hover, .upload.dragover {
  border-color: var(--purple);
  background: var(--purple-soft);
}

.upload-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--white);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
  color: var(--purple);
}

.upload-icon svg { width: 22px; height: 22px; stroke-width: 1.7; }

.upload-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 4px;
}

.upload-sub {
  font-size: 12px;
  color: var(--mute);
}

.upload input[type="file"] { display: none; }

/* ============================================================
   File list
   ============================================================ */
.file-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.file-item + .file-item { margin-top: 8px; }

.file-icon {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: var(--purple-soft);
  color: var(--purple);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}

.file-meta {
  flex: 1;
  min-width: 0;
}

.file-name {
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-sub {
  font-size: 11.5px;
  color: var(--mute);
  margin-top: 2px;
}

/* ============================================================
   Detail rows / Definition lists
   ============================================================ */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.detail-item {
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
}

.detail-lbl {
  font-size: 11px;
  color: var(--mute);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}

.detail-val {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

/* ============================================================
   Empty states
   ============================================================ */
.empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--mute);
}

.empty-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--cream);
  color: var(--purple);
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
}

.empty-icon svg { width: 24px; height: 24px; stroke-width: 1.5; }

.empty-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}

.empty-sub {
  font-size: 13px;
  color: var(--ink-3);
  margin-bottom: 14px;
}

/* ============================================================
   Modals / Drawers
   ============================================================ */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 15, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t);
  z-index: 200;
  backdrop-filter: blur(2px);
}

.overlay.open { opacity: 1; pointer-events: auto; }

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -45%) scale(0.96);
  opacity: 0;
  pointer-events: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  max-width: 560px;
  width: calc(100% - 32px);
  max-height: 86vh;
  overflow-y: auto;
  transition: var(--t);
  z-index: 201;
}

.modal.open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.modal-head {
  padding: 20px 24px 14px;
  border-bottom: 1px solid var(--line-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.modal-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  margin: 0;
}

.modal-body {
  padding: 20px 24px;
}

.modal-footer {
  padding: 14px 24px 20px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--line-3);
}

/* ============================================================
   Form fields
   ============================================================ */
.form-row {
  margin-bottom: 14px;
}

.form-row label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  margin-bottom: 6px;
}

.form-row label .req { color: var(--bad); }

.input, .select, .textarea {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 13px;
  outline: none;
  transition: var(--t-fast);
}

.textarea {
  height: auto;
  min-height: 90px;
  padding: 10px 12px;
  resize: vertical;
}

.select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A8A95' stroke-width='2.5' stroke-linecap='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-inline-end: 32px;
}

html[dir="rtl"] .select {
  background-position: left 12px center;
}

.input:focus, .select:focus, .textarea:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px var(--purple-10);
}

.input-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Tag input (for scope items, multi-value fields) */
.tag-input {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px;
  background: var(--white);
}

.tag-input:focus-within { border-color: var(--purple); box-shadow: 0 0 0 3px var(--purple-10); }

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.tag-list:empty { display: none; }

.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 10px;
  background: var(--purple-soft);
  color: var(--purple-dark);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.tag-pill button {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--purple);
  color: var(--white);
  font-size: 14px;
  display: grid; place-items: center;
  line-height: 1;
  padding: 0;
}

.tag-input input {
  width: 100%;
  border: none;
  outline: none;
  padding: 6px;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
}

/* ============================================================
   Filter chips bar
   ============================================================ */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-3);
  cursor: pointer;
  transition: var(--t-fast);
}

.chip:hover { border-color: var(--line-2); }

.chip.active {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

.chip-count {
  background: var(--cream-2);
  color: var(--ink-3);
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  font-weight: 700;
}

.chip.active .chip-count {
  background: rgba(255, 255, 255, 0.18);
  color: var(--white);
}

/* ============================================================
   Two-column layout (Project Detail)
   ============================================================ */
.split-2 {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 20px;
}

.split-2 > .col { display: flex; flex-direction: column; gap: 18px; }

/* Section header */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 12px;
}

.section-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ============================================================
   Project components (3 fixed: Agent / Integration / Telephony)
   ============================================================ */
.components-grid {
  display: grid;
  /* minmax(0, 1fr) is what lets columns shrink below their intrinsic content
     width — without it, a long card title pushes the third column off-screen. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 1180px) {
  .components-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  .components-grid { grid-template-columns: minmax(0, 1fr); }
}

.component-card {
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 16px;
  cursor: pointer;
  transition: var(--t);
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Reset default <button> styles so the card renders as a card. */
  text-align: inherit;
  font: inherit;
  color: inherit;
  width: 100%;
}

.component-card:hover {
  border-color: var(--purple-30);
  background: var(--white);
  box-shadow: var(--shadow-xs);
  transform: translateY(-1px);
}

.component-card:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}

.component-card.active {
  background: var(--white);
  border-color: var(--purple);
  box-shadow: 0 0 0 2px var(--purple-soft);
}

.component-open-chev {
  margin-inline-start: auto;
  color: var(--mute);
  display: inline-flex;
  align-items: center;
  transition: transform var(--t), color var(--t);
}
.component-card:hover .component-open-chev {
  color: var(--purple);
  transform: translateX(2px);
}
html[dir="rtl"] .component-card:hover .component-open-chev {
  transform: translateX(-2px);
}
.component-stat.mute-text {
  color: var(--mute);
}

.component-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.component-icon {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: var(--purple);
  color: var(--white);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
}

.component-card[data-component-id="integration"] .component-icon { background: var(--info); }
.component-card[data-component-id="telephony"] .component-icon { background: var(--ok); }

.component-meta { flex: 1; min-width: 0; }

.component-name {
  font-weight: 800;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 2px;
  overflow-wrap: break-word;
  word-break: normal;
}

.component-desc {
  font-size: 11.5px;
  color: var(--mute);
  line-height: 1.4;
  overflow-wrap: break-word;
  word-break: normal;
}

.component-progress {
  margin-top: 2px;
}

.component-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--ink-3);
}

.component-stat strong {
  color: var(--ink);
  font-weight: 700;
}

.component-stat.ok-text { color: var(--ok); }
.component-stat.bad-text { color: var(--bad); }

.component-view-all {
  background: transparent;
  border: 0;
  padding: 2px 4px;
  font: inherit;
  font-size: 11.5px;
  color: var(--ink-3);
  text-decoration: underline dashed;
  text-underline-offset: 3px;
  cursor: pointer;
  border-radius: 4px;
}
.component-view-all:hover {
  color: var(--accent);
  text-decoration-style: solid;
}
.component-view-all:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.component-notes {
  font-size: 12px;
  color: var(--ink-3);
  background: var(--cream);
  border: 1px dashed var(--line-2);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  line-height: 1.5;
}

/* Extracted-data preview inside component cards on Project Detail.
   The renderer uses .comp-extracted / .comp-extracted-item — these
   styles surface the AI-extracted agents/systems/provider right inside
   each component card so you don't need to leave the project page. */
.comp-extracted {
  margin-top: 10px;
  background: var(--purple-soft);
  border: 1px solid var(--purple-30);
  border-radius: var(--radius);
  padding: 8px 10px;
}

.comp-extracted-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  padding: 2px 0;
}

.comp-extracted-bar:hover .comp-extracted-label {
  color: var(--purple);
}

.comp-extracted-body {
  margin-top: 8px;
}

.comp-extracted-chev {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  color: var(--purple-dark);
  margin-inline-start: auto;
  transition: transform var(--t);
}

.comp-extracted-chev.collapsed {
  transform: rotate(-90deg);
}

html[dir="rtl"] .comp-extracted-chev.collapsed {
  transform: rotate(90deg);
}

.comp-extracted-label {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--purple-dark);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex: 1;
}

.comp-extracted-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--white);
  border: 1px solid var(--purple-30);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}

.comp-extracted-item:last-child { margin-bottom: 0; }

.comp-ex-kind {
  font-size: 13px;
  flex-shrink: 0;
}

/* Direction tag (Inbound/Outbound) used in extracted-agent rows.
   Replaced the previous emoji icons with a clean text pill. */
.comp-ex-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 4px;
  flex-shrink: 0;
  line-height: 1.4;
  border: 1px solid transparent;
}
.comp-ex-tag.in {
  background: rgba(46, 95, 156, 0.08);
  color: #2E5F9C;
  border-color: rgba(46, 95, 156, 0.18);
}
.comp-ex-tag.out {
  background: rgba(120, 86, 209, 0.10);
  color: var(--accent, #7856D1);
  border-color: rgba(120, 86, 209, 0.22);
}

.comp-ex-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.comp-ex-meta {
  font-size: 11px;
  color: var(--mute);
  font-weight: 600;
}

/* Extracted entities preview inside each component card */
.comp-extracted {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.comp-extracted-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.comp-extracted-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--cream-2);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
}

.comp-ex-kind {
  font-size: 13px;
  flex-shrink: 0;
}

/* Direction tag (Inbound/Outbound) used in extracted-agent rows.
   Replaced the previous emoji icons with a clean text pill. */
.comp-ex-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 4px;
  flex-shrink: 0;
  line-height: 1.4;
  border: 1px solid transparent;
}
.comp-ex-tag.in {
  background: rgba(46, 95, 156, 0.08);
  color: #2E5F9C;
  border-color: rgba(46, 95, 156, 0.18);
}
.comp-ex-tag.out {
  background: rgba(120, 86, 209, 0.10);
  color: var(--accent, #7856D1);
  border-color: rgba(120, 86, 209, 0.22);
}

.comp-ex-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comp-ex-meta {
  font-size: 10.5px;
  color: var(--mute);
  font-weight: 600;
  background: var(--white);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--line);
}

/* ============================================================
   Attio page — deals grouped by company
   ============================================================ */
.company-block {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  margin-bottom: 14px;
  background: var(--white);
  overflow: hidden;
}

.company-block:last-child { margin-bottom: 0; }

.company-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--cream-2);
  border-bottom: 1px solid var(--line);
}

.company-avatar {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--white);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 13px;
  flex-shrink: 0;
}

.company-meta { flex: 1; }

.company-name {
  font-weight: 800;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: -0.2px;
}

.company-sub {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 2px;
}

.company-deals {
  display: flex;
  flex-direction: column;
}

.deal-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line-3);
  transition: var(--t-fast);
}

.deal-row:last-child { border-bottom: none; }
.deal-row:hover { background: var(--cream-3); }

.deal-main {
  flex: 1;
  min-width: 0;
}

.deal-name {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--ink);
  margin-bottom: 4px;
}

.deal-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.deal-action {
  flex-shrink: 0;
}

/* Delete button on file rows (faded; red on hover) */
.file-delete {
  width: 30px; height: 30px;
  color: var(--mute);
  opacity: 0.55;
  border-radius: 7px;
  transition: var(--t-fast);
}
.file-delete:hover {
  opacity: 1;
  background: var(--bad-soft);
  color: var(--bad);
}
.file-delete svg { width: 15px; height: 15px; stroke-width: 1.8; }

/* Tiny "AI" badge on AI-extracted tasks */
.ai-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-inline-start: 6px;
  padding: 1px 6px;
  background: linear-gradient(135deg, var(--purple) 0%, var(--purple-dark) 100%);
  color: var(--white);
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  vertical-align: middle;
  cursor: help;
}

/* Edit icon at the end of editable rows (fades in on hover) */
.row-edit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 6px;
  color: var(--mute);
  opacity: 0;
  transition: var(--t-fast);
}

.row-edit-icon svg { width: 14px; height: 14px; stroke-width: 1.8; }

tr.clickable:hover .row-edit-icon {
  opacity: 1;
  background: var(--purple-soft);
  color: var(--purple);
}

/* Small pill used inside the tasks table to show the component */
.comp-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--purple-dark);
  background: var(--purple-soft);
  padding: 3px 8px;
  border-radius: 6px;
}

/* Mini-breakdown shown on project cards (3 dots / mini-bars) */
.component-mini {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--cream-2);
  border-radius: var(--radius-sm);
  font-size: 11px;
}

.component-mini-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}

.component-mini-icon {
  width: 18px; height: 18px;
  border-radius: 4px;
  background: var(--purple);
  color: var(--white);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 10px;
  flex-shrink: 0;
}

.component-mini-row[data-id="integration"] .component-mini-icon { background: var(--info); }
.component-mini-row[data-id="telephony"] .component-mini-icon { background: var(--ok); }

.component-mini-bar {
  flex: 1;
  height: 4px;
  background: var(--line-3);
  border-radius: 999px;
  overflow: hidden;
}

.component-mini-bar > span {
  display: block;
  height: 100%;
  background: var(--purple);
  border-radius: 999px;
}

.component-mini-row[data-id="integration"] .component-mini-bar > span { background: var(--info); }
.component-mini-row[data-id="telephony"] .component-mini-bar > span { background: var(--ok); }

.component-mini-pct {
  font-weight: 700;
  color: var(--ink-2);
  min-width: 26px;
  text-align: end;
  font-size: 10.5px;
}

/* ============================================================
   Blockers list
   ============================================================ */
.blocker-item {
  background: var(--bad-soft);
  border: 1px solid #F0D5D3;
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.blocker-item + .blocker-item { margin-top: 8px; }

.blocker-icon {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: var(--bad);
  color: var(--white);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-weight: 800;
}

.blocker-meta { flex: 1; }
.blocker-title { font-weight: 700; color: var(--ink); font-size: 13.5px; }
.blocker-desc { color: var(--ink-3); font-size: 12.5px; margin-top: 3px; line-height: 1.5; }
.blocker-foot { font-size: 11.5px; color: var(--mute); margin-top: 6px; }

/* ============================================================
   Notes / updates feed
   ============================================================ */
.note {
  padding: 12px 14px;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  gap: 12px;
}

.note + .note { margin-top: 8px; }

.note-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--purple);
  color: var(--white);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.note-body { flex: 1; }
.note-head { display: flex; gap: 8px; align-items: baseline; }
.note-author { font-weight: 700; color: var(--ink); font-size: 13px; }
.note-time { color: var(--mute); font-size: 11.5px; }
.note-text { color: var(--ink-2); font-size: 13px; margin-top: 3px; line-height: 1.55; }

/* ============================================================
   Requirement classification (4 categories)
   ============================================================ */
.req-cat {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.req-cat + .req-cat { margin-top: 14px; }

.req-cat-head {
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--cream-2);
  border-bottom: 1px solid var(--line);
}

.req-cat-icon {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: var(--purple);
  color: var(--white);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
}

.req-cat-title {
  flex: 1;
  font-weight: 800;
  font-size: 14px;
  color: var(--ink);
}

.req-cat-body {
  padding: 14px 18px;
}

.req-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.req-field {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  background: var(--white);
}

.req-field-lbl {
  font-size: 11px;
  color: var(--mute);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.req-field-val {
  font-size: 13px;
  color: var(--ink);
  font-weight: 600;
  margin-top: 3px;
}

.req-field-val.empty { color: var(--mute); font-weight: 400; font-style: italic; }

/* Integration cards (collapsible — click header to expand) */
.integ-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: none;
  overflow: hidden;
  transition: background var(--t-fast);
}
.integ-card:hover .integ-head { background: var(--cream-3); }
.integ-card.open .integ-head { background: var(--cream-2); }

.integ-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  user-select: none;
}

.integ-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.integ-title {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
}

.integ-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.2px;
}

.integ-type {
  font-size: 12px;
  color: var(--ink-3);
  background: var(--cream);
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 600;
  border: 1px solid var(--line);
}

.integ-chev {
  width: 20px; height: 20px;
  display: grid; place-items: center;
  color: var(--mute);
  transition: transform var(--t);
  flex-shrink: 0;
}

.integ-card.open .integ-chev { transform: rotate(180deg); }

.integ-body {
  padding: 6px 18px 18px;
  border-top: 1px solid var(--line-3);
  background: var(--white);
}

/* ============================================================
   New 3-layer requirements UI (purpose + capability bullets)
   ============================================================ */
.layer-section {
  margin-bottom: 28px;
}

.layer-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.layer-icon {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: var(--purple);
  color: var(--white);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
}

.layer-section:nth-of-type(2) .layer-icon { background: var(--info); }
.layer-section:nth-of-type(3) .layer-icon { background: var(--ok); }

.layer-title {
  flex: 1;
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  margin: 0;
}

.layer-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: none;
  padding: 18px 20px;
}

.layer-card:last-child {
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.layer-card + .layer-card {
  border-top: 1px solid var(--line-3);
}

.layer-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.layer-card-title {
  flex: 1;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Inline input inside layer-card titles (for system name / provider) */
.input-inline {
  height: 32px;
  font-size: 14px;
  font-weight: 700;
  padding: 0 10px;
  max-width: 320px;
}

/* Key-value field */
.kv-field { margin-bottom: 10px; }
.kv-field:last-child { margin-bottom: 0; }

.kv-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}

.kv-value {
  font-size: 13.5px;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.5;
}

.kv-value.empty { color: var(--mute); font-weight: 400; font-style: italic; }

.kv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 780px) {
  .kv-grid { grid-template-columns: 1fr; }
}

/* Bullet list — the main UI for capabilities */
.bullet-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bullet-item {
  position: relative;
  padding: 8px 12px 8px 26px;
  background: var(--cream-2);
  border: 1px solid var(--line-3);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.5;
}

.bullet-item::before {
  content: "";
  position: absolute;
  inset-inline-start: 12px;
  top: 14px;
  width: 6px;
  height: 6px;
  background: var(--purple);
  border-radius: 50%;
}

html[dir="rtl"] .bullet-item {
  padding: 8px 26px 8px 12px;
}

.bullet-empty {
  font-style: italic;
  color: var(--mute);
  font-size: 13px;
  padding: 8px 0;
}

/* Edit mode bullet rows */
.bullet-edit {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
}

.bullet-input {
  flex: 1;
  height: 34px;
  border: 1px solid var(--purple-30);
  border-radius: var(--radius-sm);
  padding: 0 10px;
  font-size: 13px;
}

.bullet-input:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 2px var(--purple-10);
  outline: none;
}

.bullet-remove {
  width: 30px; height: 30px;
  border-radius: 6px;
  color: var(--mute);
  opacity: 0.6;
  flex-shrink: 0;
}
.bullet-remove:hover {
  background: var(--bad-soft);
  color: var(--bad);
  opacity: 1;
}
.bullet-remove svg { width: 14px; height: 14px; }

.bullet-add-row {
  padding-top: 4px;
}

/* Section subheader inside a layer card (e.g. "Inbound agents") */
.req-subhead {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--purple-dark);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin: 18px 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.req-subhead:first-child { margin-top: 0; }

.req-count {
  background: var(--purple-soft);
  color: var(--purple-dark);
  font-size: 10px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 999px;
  letter-spacing: 0;
}

/* List of structured items (e.g. multiple inbound agents) */
.req-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }

.req-list-item {
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
}

.req-list-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.req-list-row .req-field { background: var(--white); }

@media (max-width: 780px) {
  .req-list-row { grid-template-columns: 1fr; }
}

/* When in edit mode, replace static value with an inline input */
.req-field .req-edit {
  width: 100%;
  height: 34px;
  padding: 0 8px;
  border: 1px solid var(--purple-30);
  border-radius: var(--radius-sm);
  font-size: 13px;
  background: var(--white);
}
.req-field textarea.req-edit { height: auto; min-height: 50px; padding: 6px 8px; }
.req-field .req-edit:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 2px var(--purple-10);
  outline: none;
}

/* Layer-card head now has an Edit button on the end */
.req-cat-head { gap: 10px; }
.req-cat-head .btn { margin-inline-start: auto; }

/* ============================================================
   Go-live readiness checklist
   ============================================================ */
.check-list { display: flex; flex-direction: column; gap: 6px; }

.check-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  font-size: 13px;
}

.check-box {
  width: 18px; height: 18px;
  border-radius: 5px;
  border: 2px solid var(--line-2);
  display: grid;
  place-items: center;
  color: var(--white);
  flex-shrink: 0;
  background: var(--white);
}

.check-item.done .check-box { background: var(--ok); border-color: var(--ok); }
.check-item.done .check-label { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--line-2); }
.check-item.done .check-box::after { content: "✓"; font-size: 12px; font-weight: 800; }

.check-label { flex: 1; font-weight: 600; color: var(--ink); }
.check-owner { font-size: 11.5px; color: var(--mute); font-weight: 600; }

/* Pulsing "live" indicator next to the connected-to-Attio badge */
.live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--ok);
  border-radius: 50%;
  margin-inline-end: 4px;
  position: relative;
  animation: live-pulse 1.6s ease-in-out infinite;
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(0, 128, 122, 0.5); }
  50%      { opacity: 0.75; box-shadow: 0 0 0 4px rgba(0, 128, 122, 0); }
}

/* ============================================================
   Toggle switch (on / off)
   ============================================================ */
.toggle-switch {
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: var(--line-2);
  position: relative;
  cursor: pointer;
  transition: var(--t);
  padding: 0;
  border: none;
  flex-shrink: 0;
}

.toggle-switch.on { background: var(--purple); }

.toggle-slider {
  position: absolute;
  top: 3px;
  inset-inline-start: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform var(--t);
}

.toggle-switch.on .toggle-slider {
  transform: translateX(18px);
}

html[dir="rtl"] .toggle-switch.on .toggle-slider {
  transform: translateX(-18px);
}

/* ============================================================
   Toast / notifications
   ============================================================ */
.toast {
  position: fixed;
  bottom: 24px;
  inset-inline-end: 24px;
  background: var(--ink);
  color: var(--white);
  padding: 12px 18px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  z-index: 300;
  opacity: 0;
  transform: translateY(8px);
  transition: var(--t);
  pointer-events: none;
}

.toast.show { opacity: 1; transform: translateY(0); }
.toast.success { background: var(--ok); }
.toast.error { background: var(--bad); }

/* ============================================================
   Loader
   ============================================================ */
.spinner {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2px solid var(--line-2);
  border-top-color: var(--purple);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   Tabs
   ============================================================ */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}

.tab {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: var(--t-fast);
}

.tab:hover { color: var(--ink); }

.tab.active {
  color: var(--purple);
  border-bottom-color: var(--purple);
}

/* ============================================================
   Phase pill (small status descriptor)
   ============================================================ */
.phase-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--purple-soft);
  color: var(--purple-dark);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
}

.phase-pill .phase-num {
  background: var(--purple);
  color: var(--white);
  width: 18px; height: 18px;
  border-radius: 4px;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    width: 280px;
    transform: translateX(-100%);
    transition: transform var(--t);
    z-index: 100;
    box-shadow: var(--shadow-lg);
  }
  html[dir="rtl"] .sidebar { transform: translateX(100%); }
  .sidebar.open { transform: translateX(0); }
  .header { padding: 0 16px; }
  .content { padding: 20px 16px 40px; }
  .split-2 { grid-template-columns: 1fr; }
  .header-search { display: none; }
}

@media (max-width: 640px) {
  .header-title { font-size: 14px; }
  .page-title { font-size: 20px; }
  .stat-value { font-size: 24px; }
  .entity-grid { grid-template-columns: 1fr; }
}

/* Mobile menu trigger */
.menu-trigger {
  display: none;
  width: 36px; height: 36px;
  border-radius: 9px;
  align-items: center;
  justify-content: center;
  color: var(--ink-2);
}

@media (max-width: 980px) {
  .menu-trigger { display: grid; }
}

/* ============================================================
   Utilities
   ============================================================ */
.row { display: flex; align-items: center; gap: 8px; }
.col { display: flex; flex-direction: column; gap: 8px; }
.grow { flex: 1; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.text-mute { color: var(--mute); }
.text-small { font-size: 12px; }
.text-tiny { font-size: 11px; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
.hidden { display: none !important; }
.text-end { text-align: end; }

/* ============================================================
   Clickable extracted items
   Each extracted agent/system/provider row is clickable: tapping
   it filters the tasks panel to only show tasks tied to that
   specific item. Click again (or the chip × in the filter bar)
   to clear.
   ============================================================ */
.comp-extracted-item.clickable {
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}
.comp-extracted-item.clickable:hover {
  background: var(--cream-3, #efeae0);
  border-color: var(--line, #E4E7EB);
}
.comp-extracted-item.clickable.active {
  background: rgba(120, 86, 209, 0.10);
  border-color: var(--accent, #7856D1);
  box-shadow: 0 0 0 1px var(--accent, #7856D1) inset;
}
.comp-extracted-item.clickable.active .comp-ex-name {
  color: var(--accent, #7856D1);
  font-weight: 700;
}

/* Right-aligned chevron + "done/total" badge inside each item row */
.comp-extracted-item.clickable .comp-ex-name { flex: 1 1 auto; }
.comp-ex-chev {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mute, #888);
  transition: transform 0.18s ease;
  flex-shrink: 0;
}
.comp-ex-chev.open { transform: rotate(180deg); color: var(--accent, #7856D1); }
html[dir="rtl"] .comp-ex-chev { /* keep rotation symmetric */ }
.ref-pct {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--line, #E4E7EB);
  color: var(--ink-2, #444);
  flex-shrink: 0;
}
.ref-pct.mute { color: var(--mute, #888); }
.ref-pct.active { background: rgba(120, 86, 209, 0.10); border-color: rgba(120, 86, 209, 0.30); color: var(--accent, #7856D1); }
.ref-pct.done { background: rgba(46, 156, 95, 0.12); border-color: rgba(46, 156, 95, 0.30); color: #1f8a4f; }

/* The expanded checkboxes panel that drops down under a clicked item.
   Each row is a label wrapping a checkbox + the task title + an edit icon. */
.comp-extracted-group { display: flex; flex-direction: column; gap: 4px; }
.ref-tasks-panel {
  padding: 8px 10px 8px 32px;
  margin-bottom: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--cream-2, #F7F8FA);
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--line, #E4E7EB);
  border-top: none;
  margin-top: -4px;
}
html[dir="rtl"] .ref-tasks-panel {
  padding: 8px 32px 8px 10px;
}
.ref-tasks-empty {
  font-size: 12px;
  color: var(--mute, #888);
  font-style: italic;
  padding: 4px 0;
}
.ref-task {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  background: var(--white);
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--line, #E4E7EB);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.ref-task:hover { border-color: var(--accent, #7856D1); }
.ref-task input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--accent, #7856D1);
  flex-shrink: 0;
}
.ref-task-label {
  flex: 1;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink, #222);
  line-height: 1.4;
}
.ref-task.done .ref-task-label {
  text-decoration: line-through;
  color: var(--mute, #888);
  font-weight: 500;
}
.ref-task-edit {
  opacity: 0.6;
  transition: opacity 0.12s ease;
}
.ref-task:hover .ref-task-edit { opacity: 1; }
.ref-task-add {
  margin-top: 4px;
  align-self: flex-start;
}

/* Inline-editable date inputs in the project header. Looks like static text
   until clicked. */
.detail-date-input {
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink, #222);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 6px);
  padding: 4px 6px;
  margin-top: 2px;
  width: 100%;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.detail-date-input:hover { background: var(--cream-2, #F7F8FA); border-color: var(--line, #E4E7EB); }
.detail-date-input:focus {
  outline: none;
  background: var(--white);
  border-color: var(--accent, #7856D1);
}

/* ============================================================
   Ref-tasks popup modal
   Opens when an extracted item is clicked. Lists that item's tasks
   with inline edit/owner/checkbox/delete controls + an Add row.
   ============================================================ */
.modal.ref-modal {
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
}
.modal.ref-modal .modal-head {
  align-items: flex-start;
}
.ref-modal-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--mute, #888);
  margin-bottom: 4px;
}
.ref-modal-stats {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--line, #E4E7EB);
  background: var(--cream-2, #F7F8FA);
}
.ref-modal-pct {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ref-modal-pct-bar {
  flex: 1;
  height: 6px;
  background: var(--line, #E4E7EB);
  border-radius: 999px;
  overflow: hidden;
}
.ref-modal-pct-fill {
  height: 100%;
  background: var(--accent, #7856D1);
  border-radius: 999px;
  transition: width 0.25s ease;
}
.ref-modal-pct-num {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink, #222);
  min-width: 40px;
  text-align: end;
}
.ref-modal-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--mute, #888);
}
.ref-modal-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 16px;
}
.ref-modal-tasks {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ref-modal-task {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--white);
  border: 1px solid var(--line, #E4E7EB);
  border-radius: var(--radius-sm, 6px);
  transition: border-color 0.12s ease;
}
.ref-modal-task:hover {
  border-color: var(--accent, #7856D1);
}
.ref-modal-task input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--accent, #7856D1);
  flex-shrink: 0;
}
.ref-modal-task-title {
  flex: 1 1 auto;
  width: 100%;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink, #222);
  padding: 4px 6px;
  border-radius: var(--radius-sm, 6px);
  min-width: 120px;
  resize: none;
  overflow: hidden;
  line-height: 1.4;
  /* Break on word boundaries (and only fall back to char-break for very long
     unbreakable strings) so the title never renders vertically character by
     character when squeezed by sibling controls. */
  overflow-wrap: break-word;
  word-break: normal;
  field-sizing: content;
}
/* Fallback for browsers without field-sizing — auto-grow on input via JS */
.ref-modal-task-title:not([style*="height"]) {
  min-height: 22px;
}
.ref-modal-task-title:hover {
  background: var(--cream-2, #F7F8FA);
}
.ref-modal-task-title:focus {
  outline: none;
  background: var(--cream-2, #F7F8FA);
  box-shadow: 0 0 0 1px var(--accent, #7856D1) inset;
}
.ref-modal-task.done .ref-modal-task-title {
  text-decoration: line-through;
  color: var(--mute, #888);
  font-weight: 500;
}
.ref-modal-task-owner {
  width: auto;
  min-width: 110px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  background: var(--cream-2, #F7F8FA);
  border: 1px solid var(--line, #E4E7EB);
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  flex-shrink: 0;
}
.ref-modal-task-del {
  color: var(--bad, #c44);
  opacity: 0.65;
  flex-shrink: 0;
}
.ref-modal-task:hover .ref-modal-task-del {
  opacity: 1;
}
.ref-modal-add-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  background: var(--cream-2, #F7F8FA);
  border: 1px dashed var(--line, #E4E7EB);
  border-radius: var(--radius-sm, 6px);
  /* Stick to the bottom of the scrollable modal body so the input + Add task
     button stay reachable no matter how many tasks are in the list. */
  position: sticky;
  bottom: 0;
  margin-top: 10px;
  /* Solid backdrop so tasks scrolling underneath don't bleed through. Slight
     top shadow so users see the sticky boundary. */
  box-shadow: 0 -8px 12px -6px rgba(0, 0, 0, 0.06);
  z-index: 2;
}
.ref-modal-add-input {
  flex: 1;
  font-size: 13px;
  padding: 8px 10px;
  min-width: 0;
}
.ref-modal-add-owner {
  width: auto;
  min-width: 110px;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

/* ----------------------------------------------------------------
   Sub-tasks (checklist items inside a task in the ref popup)
   Each task can expand to show its sub-tasks, where each sub-task
   has its own owner + checkbox + delete.
   ---------------------------------------------------------------- */
.ref-modal-task-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ref-modal-task.has-subs {
  background: var(--cream-2, #F7F8FA);
}
.subtask-count {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(120, 86, 209, 0.10);
  color: var(--accent, #7856D1);
  border: 1px solid rgba(120, 86, 209, 0.22);
  flex-shrink: 0;
}
.subtask-toggle {
  color: var(--mute, #888);
  transition: transform 0.18s ease, color 0.12s ease;
  flex-shrink: 0;
}
.subtask-toggle.open {
  transform: rotate(180deg);
  color: var(--accent, #7856D1);
}
.ref-modal-subtasks {
  margin-inline-start: 28px;
  padding: 6px 10px;
  background: var(--white);
  border: 1px solid var(--line, #E4E7EB);
  border-top: none;
  border-radius: var(--radius-sm, 6px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: -4px;
}
html[dir="rtl"] .ref-modal-subtasks {
  margin-inline-start: 0;
  margin-inline-end: 28px;
}
.ref-modal-sub-empty {
  font-size: 11.5px;
  font-style: italic;
  color: var(--mute, #888);
  padding: 4px 0;
}
.ref-modal-subtask {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  background: var(--cream-2, #F7F8FA);
  border: 1px solid var(--line, #E4E7EB);
  border-radius: var(--radius-sm, 6px);
  transition: border-color 0.12s ease;
}
.ref-modal-subtask:hover { border-color: var(--accent, #7856D1); }
.ref-modal-subtask input[type="checkbox"] {
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: var(--accent, #7856D1);
  flex-shrink: 0;
}
.ref-modal-subtask-title {
  flex: 1;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink, #222);
  padding: 3px 5px;
  border-radius: var(--radius-sm, 6px);
  min-width: 0;
}
.ref-modal-subtask-title:hover { background: var(--white); }
.ref-modal-subtask-title:focus {
  outline: none;
  background: var(--white);
  box-shadow: 0 0 0 1px var(--accent, #7856D1) inset;
}
.ref-modal-subtask.done .ref-modal-subtask-title {
  text-decoration: line-through;
  color: var(--mute, #888);
}
.ref-modal-subtask-owner {
  width: auto;
  min-width: 100px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 7px;
  background: var(--white);
  border: 1px solid var(--line, #E4E7EB);
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  flex-shrink: 0;
}
.ref-modal-sub-add-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  background: var(--cream-2, #F7F8FA);
  border: 1px dashed var(--line, #E4E7EB);
  border-radius: var(--radius-sm, 6px);
  margin-top: 4px;
}
.ref-modal-sub-add-input {
  flex: 1;
  font-size: 12px;
  padding: 6px 8px;
  min-width: 0;
}
.ref-modal-sub-add-owner {
  width: auto;
  min-width: 100px;
  font-size: 11.5px;
  font-weight: 600;
  flex-shrink: 0;
}

/* ----------------------------------------------------------------
   Assignee cell (Side + Name) — replaces the plain owner select.
   Two compact inputs side-by-side: owner side (Sarj/Client/Joint) and
   a name input with autocomplete from the saved people registry.
   Typing a new name auto-adds the person under the current side.
   ---------------------------------------------------------------- */
.assignee-cell {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.assignee-cell .ref-modal-task-owner,
.assignee-cell .ref-modal-subtask-owner {
  min-width: 80px;
  width: auto;
}
.assignee-cell .assignee-name {
  width: 110px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  background: var(--white);
  border: 1px solid var(--line, #E4E7EB);
  border-radius: var(--radius-sm, 6px);
  color: var(--ink, #222);
}
.assignee-cell .assignee-name::placeholder {
  color: var(--mute, #888);
  font-weight: 500;
  font-style: italic;
}
.assignee-cell .assignee-name:focus {
  outline: none;
  border-color: var(--accent, #7856D1);
  box-shadow: 0 0 0 1px var(--accent, #7856D1) inset;
}
.assignee-cell.sub .assignee-name {
  width: 95px;
  font-size: 11.5px;
  padding: 3px 7px;
}
.assignee-cell.sub .ref-modal-subtask-owner {
  min-width: 75px;
}

/* ----------------------------------------------------------------
   Sign-in screen — shown full-screen when no auth token.
   ---------------------------------------------------------------- */
.signin-screen {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--cream-2, #F7F8FA) 0%, var(--cream, #F1F3F5) 100%);
  padding: 24px;
}
.signin-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 440px;
  width: 100%;
  text-align: center;
}
.signin-logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
}
.signin-project-name {
  font-size: 17px;
  font-weight: 800;
  color: var(--ink, #222);
}
.signin-fineprint {
  font-size: 11.5px;
  color: var(--mute, #888);
  margin: 24px 0 0;
  line-height: 1.5;
}
.signin-warning {
  font-size: 12px;
  color: #c44;
  background: rgba(196, 68, 68, 0.06);
  border: 1px solid rgba(196, 68, 68, 0.2);
  border-radius: 8px;
  padding: 12px;
  text-align: start;
}
.signin-warning code {
  background: var(--cream-2, #F7F8FA);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 11px;
}

/* User chip in header (replaces workspace switcher) */
.user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  background: var(--cream-2, #F7F8FA);
  border: 1px solid var(--line, #E4E7EB);
  border-radius: 999px;
}
.user-chip-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}
.user-chip-avatar.fallback {
  background: var(--accent, #7856D1);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-weight: 800;
}
.user-chip-meta {
  display: flex; flex-direction: column; line-height: 1.1;
}
.user-chip-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink, #222);
}
.user-chip-role {
  font-size: 10px;
  color: var(--mute, #888);
}

/* Login form + error inside signin card */
.signin-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--mute, #888);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.signin-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 22px;
}
.signin-form input[type="password"] {
  font-size: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line, #E4E7EB);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink, #222);
}
.signin-form input[type="password"]:focus {
  outline: none;
  border-color: var(--accent, #7856D1);
  box-shadow: 0 0 0 3px rgba(120, 86, 209, 0.12);
}
.signin-form button[type="submit"] {
  padding: 12px;
  font-size: 14px;
  font-weight: 700;
}
.signin-form button[type="submit"]:disabled {
  opacity: 0.5;
  cursor: progress;
}
.signin-error {
  color: #c44;
  font-size: 12.5px;
  min-height: 16px;
  font-weight: 600;
}
.signin-altlink {
  display: inline-block;
  margin-top: 18px;
  color: var(--mute, #888);
  font-size: 12px;
  text-decoration: none;
}
.signin-altlink:hover { color: var(--accent, #7856D1); }

/* Admin tools on project card */
.entity-card-admin {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  display: flex;
  gap: 4px;
  z-index: 2;
}
.entity-card { position: relative; }
.btn.xsmall {
  font-size: 10.5px;
  padding: 3px 8px;
  border-radius: 6px;
  line-height: 1.3;
}
.btn.warn-pill {
  background: rgba(196, 68, 68, 0.08);
  border-color: rgba(196, 68, 68, 0.2);
  color: #c44;
}

/* "+ Add agent / system / provider" buttons inside component sections */
.comp-add-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent, #7856D1);
  background: transparent;
  border: 1px dashed var(--line, #E4E7EB);
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  margin-top: 6px;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.comp-add-btn:hover {
  background: rgba(120, 86, 209, 0.06);
  border-color: var(--accent, #7856D1);
}
.comp-add-btn svg {
  width: 14px; height: 14px; stroke-width: 2;
}

/* Description textarea inside task row */
.ref-modal-task {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 10px 12px;
}
.ref-modal-task-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ref-modal-task-row.top {
  align-items: flex-start;
}
/* Title sits on its own row alongside the checkbox and delete button, so it
   gets the full available width and never collapses to one character. */
.ref-modal-task-row.top .ref-modal-task-title {
  flex: 1 1 0;
}
/* Meta row indented under the checkbox column so it lines up visually with
   the title above it. */
.ref-modal-task-row.meta {
  margin-top: 4px;
  padding-inline-start: 56px;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
html[dir="rtl"] .ref-modal-task-row.meta {
  padding-inline-start: 0;
  padding-inline-end: 56px;
}
.ref-modal-task-desc {
  /* width:100% + margin together made the textarea overshoot the row by the
     margin amount. Subtract the indent so the right edge lines up with the
     task box. box-sizing is border-box already (global rule) so padding is
     included. */
  width: calc(100% - 28px);
  margin-inline-start: 28px;
  border: 1px solid var(--line, #E4E7EB);
  background: var(--white, #fff);
  border-radius: var(--radius-sm, 6px);
  padding: 6px 8px;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-2, #444);
  /* Auto-grow with content in modern browsers. The manual resize handle is
     removed since the textarea sizes itself; JS fallback below covers older
     browsers that don't support field-sizing. */
  field-sizing: content;
  resize: none;
  overflow: hidden;
  min-height: 32px;
}
.ref-modal-task-desc:focus {
  outline: none;
  border-color: var(--accent, #7856D1);
  box-shadow: 0 0 0 2px rgba(120, 86, 209, 0.12);
}
.ref-modal-task-desc::placeholder {
  color: var(--mute, #888);
  font-style: italic;
}

/* Hover-revealed edit/delete buttons on each extracted item
   (agent / system / channel). They sit between the progress badge and
   the chevron, fade in on hover, and bail out the row click via the
   data-action stopPropagation in bindEvents. */
.comp-ex-actions {
  display: inline-flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
  flex-shrink: 0;
}
.comp-extracted-item:hover .comp-ex-actions,
.comp-ex-actions:focus-within {
  opacity: 1;
}
.comp-ex-action {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line, #E4E7EB);
  background: var(--white, #fff);
  color: var(--ink-2, #444);
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.comp-ex-action svg {
  width: 13px;
  height: 13px;
  stroke-width: 1.8;
}
.comp-ex-action:hover {
  background: var(--cream-2, #F7F8FA);
  border-color: var(--accent, #7856D1);
  color: var(--accent, #7856D1);
}
.comp-ex-action.danger:hover {
  background: rgba(196, 68, 68, 0.08);
  border-color: rgba(196, 68, 68, 0.4);
  color: #c44;
}

/* Per-component files panel — sits at the bottom of each component card. */
.comp-files {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--line, #E4E7EB);
}
.comp-files-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.comp-files-label {
  flex: 1;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--mute, #888);
}
.comp-files-upload {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 6px;
  border: 1px solid var(--line, #E4E7EB);
  background: var(--white, #fff);
  color: var(--ink-2, #444);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.comp-files-upload:hover {
  background: var(--cream-2, #F7F8FA);
  border-color: var(--accent, #7856D1);
  color: var(--accent, #7856D1);
}
.comp-files-upload svg { width: 12px; height: 12px; stroke-width: 1.8; }
.hidden { display: none !important; }
.comp-files-list {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.comp-file-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--cream-2, #F7F8FA);
  border: 1px solid var(--line, #E4E7EB);
  border-radius: var(--radius-sm, 6px);
}
.comp-file-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--white, #fff);
  border: 1px solid var(--line, #E4E7EB);
  border-radius: 4px;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--accent, #7856D1);
}
.comp-file-meta {
  flex: 1;
  min-width: 0;
}
.comp-file-name {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink, #222);
  text-decoration: none;
  text-align: start;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.comp-file-name:hover { color: var(--accent, #7856D1); text-decoration: underline; }
.comp-file-sub { font-size: 10.5px; color: var(--mute, #888); }

/* Reorder arrows on each task row in the ref popup. Sit on the far left
   so the user's eye can scan a column of arrows; disabled state dimmed. */
.ref-modal-task-reorder {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  flex-shrink: 0;
}
.ref-modal-task-reorder .icon-btn.xsmall {
  width: 18px;
  height: 14px;
  font-size: 9px;
  line-height: 1;
  padding: 0;
  color: var(--mute, #888);
  background: transparent;
  border: 1px solid var(--line, #E4E7EB);
  border-radius: 3px;
  cursor: pointer;
}
.ref-modal-task-reorder .icon-btn.xsmall:hover:not([disabled]) {
  background: var(--cream-2, #F7F8FA);
  color: var(--accent, #7856D1);
  border-color: var(--accent, #7856D1);
}
.ref-modal-task-reorder .icon-btn.xsmall[disabled] {
  opacity: 0.25;
  cursor: not-allowed;
}

/* ETA date picker per task — narrow, sits between the title and the
   assignee cell. Empty state shows the browser's "mm/dd/yyyy" placeholder. */
.ref-modal-task-eta {
  width: 130px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 7px;
  border: 1px solid var(--line, #E4E7EB);
  border-radius: var(--radius-sm, 6px);
  background: var(--white, #fff);
  color: var(--ink, #222);
  flex-shrink: 0;
}
.ref-modal-task-eta:focus {
  outline: none;
  border-color: var(--accent, #7856D1);
  box-shadow: 0 0 0 1px var(--accent, #7856D1) inset;
}
.ref-modal-task.done .ref-modal-task-eta {
  opacity: 0.5;
}

/* ============================================================
   Component-overview drill-down modal (layer 1)
   Opens from a component card. Lists agents/systems/channels as
   big rows; clicking a row opens the ref-tasks modal on top.
   ============================================================ */
.overlay.comp-overview-overlay { z-index: 210; }
.modal.comp-overview-modal {
  z-index: 211;
  width: min(760px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  padding: 0;
}

/* Ref-tasks modal stacks ABOVE the component modal when drilled in. */
.overlay.ref-overlay { z-index: 220; }
.modal.ref-modal { z-index: 221; }

/* New-task creation modal stacks on top of everything else. */
.overlay.new-task-overlay { z-index: 230; }
.modal.new-task-modal {
  z-index: 231;
  width: min(720px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  padding: 0;
}
.new-task-body {
  padding: 22px 26px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.new-task-form { display: flex; flex-direction: column; gap: 16px; }
.new-task-form .form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.new-task-form label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.45px;
  text-transform: uppercase;
  color: var(--mute);
}
.new-task-form .req { color: var(--bad); }
.new-task-form .input,
.new-task-form .textarea,
.new-task-form .select {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--white);
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  transition: border-color var(--t), box-shadow var(--t);
}
.new-task-form .input:focus,
.new-task-form .textarea:focus,
.new-task-form .select:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px var(--purple-soft);
}
.new-task-form .textarea {
  min-height: 72px;
  resize: vertical;
  font-family: inherit;
}
.form-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.modal.new-task-modal .modal-head {
  padding: 20px 26px 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal.new-task-modal .modal-title {
  font-size: 20px;
  font-weight: 800;
  margin: 0;
}
.modal.new-task-modal .modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 26px 20px;
  border-top: 1px solid var(--line);
}

/* Enlarge existing modals for a more comfortable layout. */
.modal { max-width: 720px; }
.modal.ref-modal { width: min(960px, calc(100vw - 32px)); max-width: none; }
.modal.comp-overview-modal { width: min(1040px, calc(100vw - 32px)); }
.modal.new-task-modal { width: min(820px, calc(100vw - 32px)); }

/* Comp modal stats bar wraps nicely with the two right-aligned buttons. */
.comp-modal-stats { flex-wrap: wrap; }
.comp-modal-newtask { margin-inline-start: auto; }
.comp-modal-viewall { /* keeps its own right-align via the auto margin above when alone */ }
.comp-modal-stats .comp-modal-newtask + .comp-modal-viewall { margin-inline-start: 0; }

/* Ref-modal stats bar tucks the New task button on the far right. */
.ref-modal-stats .ref-modal-newtask { margin-inline-start: auto; }

/* File filter dropdown + per-file "Link to" dropdown. */
.comp-files-filter,
.comp-file-link {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink-2);
  border-radius: 6px;
  padding: 4px 26px 4px 10px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--mute) 50%),
    linear-gradient(-45deg, transparent 50%, var(--mute) 50%);
  background-position:
    calc(100% - 12px) center,
    calc(100% - 8px) center;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  transition: border-color var(--t);
}
html[dir="rtl"] .comp-files-filter,
html[dir="rtl"] .comp-file-link {
  padding: 4px 10px 4px 26px;
  background-position:
    12px center,
    16px center;
}
.comp-files-filter:hover,
.comp-file-link:hover { border-color: var(--purple-30); }
.comp-files-filter:focus,
.comp-file-link:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px var(--purple-soft);
}
.comp-file-link.linked {
  background-color: var(--purple-soft);
  color: var(--purple);
  border-color: var(--purple-30);
}
.comp-file-link.unlinked {
  color: var(--mute);
  font-style: italic;
}

.comp-files-empty {
  padding: 12px;
  text-align: center;
  color: var(--mute);
  font-size: 12px;
  font-style: italic;
}

/* Ref-tasks modal files section — visually distinct from the tasks list. */
.ref-modal-files {
  margin: 18px 22px 6px;
  padding: 14px 16px;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* ============================================================
   Segmented (two-phase) progress bar
   Phase 1 on the left, divider marker, Phase 2 on the right.
   Segments are proportional to task counts; each carries its own fill.
   ============================================================ */
.seg-bar-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.seg-bar-container.large { gap: 10px; }

.seg-bar-labels {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.seg-bar-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  align-items: flex-start;
  padding-inline-end: 16px;
}
.seg-bar-label.p2 { padding-inline-end: 4px; }
.phase-heading {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}
.seg-bar-label .phase-eyebrow {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--mute);
  position: relative;
  padding-inline-start: 12px;
}
.seg-bar-label .phase-eyebrow::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
}
.seg-bar-label.p1 .phase-eyebrow { color: var(--purple); }
.seg-bar-label.p2 .phase-eyebrow { color: var(--mute); }
.seg-bar-label .phase-pct {
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  line-height: 1;
}
.seg-bar-label.p2 .phase-pct { color: var(--ink-2); }
.seg-bar-label .phase-timeline {
  font-size: 11.5px;
  color: var(--ink-3);
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-inline-start: 12px;
}
.seg-bar-label.p2 .phase-timeline {
  color: var(--mute);
  font-style: italic;
}
.seg-bar-labels-gap {
  flex: 0 0 8px;
}

/* Color variants — the phase-1 dot picks up the bar's semantic color. */
.seg-bar-container.info .seg-bar-label.p1 .phase-eyebrow { color: var(--info); }
.seg-bar-container.ok   .seg-bar-label.p1 .phase-eyebrow { color: var(--ok); }

.seg-bar {
  display: flex;
  align-items: stretch;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  flex: 1;
  min-width: 60px;
  background: transparent;
}
.seg-bar.large  { height: 10px; }
.seg-bar.small  { height: 6px; }

/* When nested inside seg-bar-container (column flow), don't let the bar
   stretch vertically — pin it to its intrinsic height. */
.seg-bar-container > .seg-bar { flex: 0 0 auto; width: 100%; }

/* Plain (single-phase) bar: fill also rounds on the right side since there's
   no divider chopping the segment. */
.seg-bar.plain > .seg-bar-phase.p1 { border-radius: 999px; }
.phase-pct.plain {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
}

.seg-bar-phase {
  position: relative;
  background: var(--cream);
  min-width: 0;
  overflow: hidden;
}
.seg-bar-phase.p1 { border-start-start-radius: 999px; border-end-start-radius: 999px; }
.seg-bar-phase.p2 { border-start-end-radius: 999px;   border-end-end-radius: 999px;   }
/* When only phase 1 exists (no phase 2 segment), round both ends. */
.seg-bar > .seg-bar-phase.p1:only-child {
  border-radius: 999px;
}

.seg-bar-fill {
  height: 100%;
  background: var(--purple);
  transition: width var(--t);
}
.seg-bar-fill.p2 {
  /* Phase 2 uses a striped pattern to signal "future / parked" work,
     staying purple so the visual language is consistent. */
  background:
    repeating-linear-gradient(45deg,
      var(--purple) 0 6px,
      color-mix(in srgb, var(--purple) 65%, white) 6px 12px);
}

.seg-bar-divider {
  width: 2px;
  background: var(--white);
  border-inline: 1px solid var(--line-2);
  flex-shrink: 0;
}

/* Color variants for Systems / Channels bars. */
.seg-bar.info .seg-bar-fill { background: var(--info); }
.seg-bar.info .seg-bar-fill.p2 {
  background: repeating-linear-gradient(45deg,
    var(--info) 0 6px,
    color-mix(in srgb, var(--info) 65%, white) 6px 12px);
}
.seg-bar.ok .seg-bar-fill { background: var(--ok); }
.seg-bar.ok .seg-bar-fill.p2 {
  background: repeating-linear-gradient(45deg,
    var(--ok) 0 6px,
    color-mix(in srgb, var(--ok) 65%, white) 6px 12px);
}

/* Phase pill on the task row — smaller than the status pill, no fancy chev. */
.task-phase-pill {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  background: var(--white);
  cursor: pointer;
  transition: border-color var(--t), background var(--t);
}
.task-phase-pill:hover:not([disabled]) { border-color: var(--purple-30); }
.task-phase-pill:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}
.task-phase-pill.phase-1 {
  background: var(--purple-soft);
  border-color: var(--purple-30);
  color: var(--purple);
}
.task-phase-pill.phase-2 {
  background: var(--cream);
  border-color: var(--line);
  color: var(--ink-3);
}
.task-phase-pill[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.comp-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--line);
}
.comp-modal-head-left {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex: 1;
  min-width: 0;
}
.comp-modal-icon {
  width: 44px; height: 44px;
  border-radius: 11px;
  background: var(--purple);
  color: var(--white);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 16px;
  flex-shrink: 0;
}
.comp-modal-icon[data-component-id="integration"] { background: var(--info); }
.comp-modal-icon[data-component-id="telephony"]   { background: var(--ok); }
.comp-modal-title-wrap { flex: 1; min-width: 0; }
.comp-modal-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 4px;
}
.modal.comp-overview-modal .modal-title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--ink);
}
.comp-modal-desc {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.5;
}

.comp-modal-body {
  padding: 0;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.comp-modal-stats {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--cream-2);
  flex-wrap: wrap;
}
.comp-modal-viewall { margin-inline-start: auto; }

/* Big list rows inside the component modal */
.comp-list {
  padding: 18px 22px 6px;
}
.comp-list-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.comp-list-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--mute);
}
.comp-list-count {
  background: var(--cream);
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}
.comp-list-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.comp-list-empty {
  color: var(--mute);
  font-size: 12.5px;
  padding: 14px;
  text-align: center;
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
  background: var(--cream-3);
}

.comp-list-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 240px) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--t);
}
.comp-list-item:hover {
  border-color: var(--purple-30);
  background: var(--cream-3);
  transform: translateY(-1px);
  box-shadow: var(--shadow-xs);
}

.comp-list-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.comp-list-item-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comp-list-item-bar-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.comp-list-item-bar {
  flex: 1;
  height: 6px;
  background: var(--cream);
  border-radius: 999px;
  overflow: hidden;
  min-width: 60px;
}
.comp-list-item-bar-fill {
  height: 100%;
  background: var(--purple);
  transition: width var(--t);
  width: 0;
}
.comp-list-item-bar-fill.done { background: var(--ok); }
.comp-list-item-bar-fill.active { background: var(--purple); }
.comp-list-item-count {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  min-width: 42px;
  text-align: end;
}

.comp-list-item-tail {
  display: flex;
  align-items: center;
  gap: 4px;
}
.comp-list-item-tail .comp-ex-action {
  opacity: 0;
  transition: opacity var(--t);
}
.comp-list-item:hover .comp-list-item-tail .comp-ex-action {
  opacity: 1;
}
.comp-list-item-chev {
  color: var(--mute);
  display: inline-flex;
  align-items: center;
  transition: transform var(--t), color var(--t);
}
.comp-list-item:hover .comp-list-item-chev {
  color: var(--purple);
  transform: translateX(2px);
}
html[dir="rtl"] .comp-list-item:hover .comp-list-item-chev {
  transform: translateX(-2px);
}

/* Files & notes inside the modal — reuse existing classes but tighten padding. */
.modal.comp-overview-modal .comp-files {
  padding: 18px 22px;
  border-top: 1px solid var(--line);
  margin-top: 10px;
}
.modal.comp-overview-modal .component-notes {
  margin: 0 22px 20px;
}

/* Narrow viewports: stack the middle progress column under the name. */
@media (max-width: 640px) {
  .comp-list-item {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .comp-list-item-bar-wrap {
    grid-column: 1 / -1;
  }
}

/* ============================================================
   Task status system — pills, categorized cells, semantic colors
   ============================================================ */
:root {
  --status-pending-bg:     #ECEDF0;
  --status-pending-fg:     #4A5560;
  --status-wip-bg:         #EBE6F7;
  --status-wip-fg:         #4A2E9E;
  --status-onhold-bg:      #D9DCE1;
  --status-onhold-fg:      #3B4046;
  --status-blocked-bg:     #FDECD5;
  --status-blocked-fg:     #8A4A0A;
  --status-completed-bg:   #DCEEE5;
  --status-completed-fg:   #135E3B;
  --status-overdue-bg:     #FBE2E0;
  --status-overdue-fg:     #971814;
  /* Solid marker colors used for progress-bar segments and count chips. */
  --status-pending-solid:   #A0A7B0;
  --status-wip-solid:       #6352A2;
  --status-onhold-solid:    #8A8F97;
  --status-blocked-solid:   #E38321;
  --status-completed-solid: #00807A;
  --status-overdue-solid:   #C13530;
}

/* Meta row uses a wrap-friendly grid so cells sit in the requested order:
   Category | Assignee | Status | ETA (right→left in RTL). */
.ref-modal-task-row.meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px 14px;
  align-items: flex-end;
}
.task-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.task-cell-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--mute);
}
.task-category-badge {
  display: inline-block;
  background: var(--cream);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--line);
  align-self: flex-start;
}

/* Status pill — colored dropdown that reads at a glance. */
.task-status-pill {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 6px 26px 6px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(-45deg, transparent 50%, currentColor 50%);
  background-position:
    calc(100% - 12px) center,
    calc(100% - 8px) center;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  transition: filter var(--t), transform var(--t);
}
html[dir="rtl"] .task-status-pill {
  padding: 6px 12px 6px 26px;
  background-position:
    12px center,
    16px center;
}
.task-status-pill:hover { filter: brightness(0.97); }
.task-status-pill:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}
.task-status-pill.status-pending {
  background-color: var(--status-pending-bg);
  color: var(--status-pending-fg);
}
.task-status-pill.status-in_progress {
  background-color: var(--status-wip-bg);
  color: var(--status-wip-fg);
}
.task-status-pill.status-on_hold {
  background-color: var(--status-onhold-bg);
  color: var(--status-onhold-fg);
}
.task-status-pill.status-blocked {
  background-color: var(--status-blocked-bg);
  color: var(--status-blocked-fg);
}
.task-status-pill.status-completed {
  background-color: var(--status-completed-bg);
  color: var(--status-completed-fg);
}
/* Overdue overlay — takes precedence, tints the pill red regardless of stored status. */
.task-status-pill.overdue {
  background-color: var(--status-overdue-bg);
  color: var(--status-overdue-fg);
}

/* Overdue ETA gets a red frame so the date visually agrees with the pill. */
.ref-modal-task-eta.eta-overdue {
  border-color: var(--status-overdue-solid);
  color: var(--status-overdue-fg);
  font-weight: 700;
}

/* Blocker reason chip — clickable, edits reason. */
.task-blocker-reason {
  margin-inline-start: 28px;
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--status-blocked-bg);
  color: var(--status-blocked-fg);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: border-color var(--t);
}
.task-blocker-reason:hover { border-color: var(--status-blocked-fg); }
.blocker-icon {
  font-weight: 700;
  display: inline-flex;
  align-items: center;
}

/* Completed tasks: soften — but keep the status pill fully visible. */
.ref-modal-task.done .ref-modal-task-title,
.ref-modal-task.done .ref-modal-task-desc {
  opacity: 0.55;
}

/* ============================================================
   Project Detail — hero card (replaces the old header + detail grid)
   Full page-width, with 3 component rows and their status chips.
   ============================================================ */
.project-hero {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-xs);
}
.project-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.project-hero-identity {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  flex: 1;
}
.project-hero-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  color: var(--white);
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 22px;
  flex-shrink: 0;
}
.project-hero-title-wrap { min-width: 0; flex: 1; }
.project-hero-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.project-hero-name {
  font-size: 26px;
  font-weight: 900;
  color: var(--ink);
  margin: 0;
  line-height: 1.15;
  text-wrap: balance;
}
.project-hero-back {
  color: var(--mute);
}
.project-hero-back:hover { color: var(--purple); }
.project-hero-subtitle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--ink-3);
  margin-top: 4px;
}
.project-hero-subtitle .hero-pm { font-weight: 600; color: var(--ink-2); }
.project-hero-subtitle .hero-sep { color: var(--line-2); }
.project-hero-subtitle .hero-golive {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.project-hero-subtitle .hero-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--mute);
}
.project-hero-subtitle .hero-date { font-weight: 600; color: var(--ink-2); }
.project-hero-subtitle .hero-days { font-weight: 500; }
.project-hero-subtitle .hero-days.bad { color: var(--bad); font-weight: 700; }
.project-hero-subtitle .detail-date-input.tight {
  padding: 3px 8px;
  font-size: 13px;
}
.project-hero-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.project-hero-overall {
  display: flex;
  align-items: center;
  gap: 14px;
}
.project-hero-overall-bar {
  flex: 1;
  height: 10px;
  background: var(--cream);
  border-radius: 999px;
  overflow: hidden;
}
.project-hero-overall-fill {
  height: 100%;
  background: var(--purple);
  transition: width var(--t);
}
.project-hero-overall-fill.ok { background: var(--ok); }
.project-hero-overall-pct {
  font-weight: 800;
  font-size: 18px;
  color: var(--ink);
  min-width: 52px;
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.project-hero-components {
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-top: 1px solid var(--line-3);
  padding-top: 20px;
}
.project-hero-comp {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.project-hero-comp-row {
  display: grid;
  grid-template-columns: auto minmax(140px, 220px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 4px;
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  text-align: inherit;
  font: inherit;
  color: inherit;
  transition: background var(--t);
}
.project-hero-comp-row:hover { background: var(--cream-2); }
.project-hero-comp-row:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}
.project-hero-comp-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--purple);
  color: var(--white);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 13px;
  flex-shrink: 0;
}
.project-hero-comp-icon[data-component-id="integration"] { background: var(--info); }
.project-hero-comp-icon[data-component-id="telephony"]   { background: var(--ok); }
.project-hero-comp-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-hero-comp-bar-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.project-hero-comp-bar {
  flex: 1;
  height: 8px;
  background: var(--cream);
  border-radius: 999px;
  overflow: hidden;
  min-width: 80px;
}
.project-hero-comp-bar-fill {
  height: 100%;
  background: var(--purple);
  transition: width var(--t);
}
.project-hero-comp-bar-fill[data-component-id="integration"] { background: var(--info); }
.project-hero-comp-bar-fill[data-component-id="telephony"]   { background: var(--ok); }
.project-hero-comp-pct {
  font-weight: 800;
  font-size: 14px;
  color: var(--ink);
  min-width: 44px;
  text-align: end;
  font-variant-numeric: tabular-nums;
}
.project-hero-comp-chev {
  color: var(--mute);
  transition: transform var(--t), color var(--t);
}
.project-hero-comp-row:hover .project-hero-comp-chev {
  color: var(--purple);
  transform: translateX(2px);
}
html[dir="rtl"] .project-hero-comp-row:hover .project-hero-comp-chev {
  transform: translateX(-2px);
}

.project-hero-comp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-inline-start: 48px;
}
html[dir="rtl"] .project-hero-comp-chips {
  padding-inline-start: 0;
  padding-inline-end: 48px;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: var(--t);
  font-family: inherit;
}
.status-chip:hover:not([disabled]) {
  background: var(--white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-xs);
}
.status-chip[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
.status-chip:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}
.status-chip .chip-dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--mute);
  flex-shrink: 0;
}
.status-chip .chip-count {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.status-chip .chip-label {
  color: var(--ink-3);
  font-weight: 600;
}
/* Semantic dot colors — order per user spec: red / orange / purple / green / grey. */
.status-chip.status-overdue     .chip-dot { background: var(--status-overdue-solid); }
.status-chip.status-blocked     .chip-dot { background: var(--status-blocked-solid); }
.status-chip.status-in_progress .chip-dot { background: var(--status-wip-solid); }
.status-chip.status-completed   .chip-dot { background: var(--status-completed-solid); }
.status-chip.status-on_hold     .chip-dot { background: var(--status-onhold-solid); }

.project-hero-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--ink-3);
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid var(--line-3);
}
.project-hero-foot-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.project-hero-foot-lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--mute);
}
.project-hero-foot-sep { color: var(--line-2); }

.detail-date-input.tight {
  padding: 4px 8px;
  font-size: 13px;
  border-radius: 6px;
}

@media (max-width: 780px) {
  .project-hero-top {
    flex-direction: column;
    align-items: stretch;
  }
  .project-hero-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .project-hero-comp-row {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .project-hero-comp-bar-wrap {
    grid-column: 1 / -1;
  }
  .project-hero-comp-chev { display: none; }
  .project-hero-comp-chips {
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
  }
}