*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Stone Linen — light. Burnt sienna primary on warm linen, ink-on-cream
     surfaces, earthy stage colors. See code/brand_colors_stone_linen.png. */
  --bg: #F1ECE0;                /* Page background — linen */
  --sidebar-bg: #2A2826;        /* Ink — warm near-black */
  --card-bg: #FAF6EB;           /* Surface — cards, modals, elevated panels */
  --card-dark: #2A2826;         /* Ink — dark contrast card / inverse surface */
  --card-lime: #F0DEC8;         /* Primary subtle — kept legacy var name */
  --card-purple: #E0D8E0;       /* Agent guess subtle — dusty plum tint */
  --card-blue: #D4D8D0;         /* Cold subtle — cool slate */
  --accent: #A05A2C;            /* Primary — burnt sienna */
  --accent-dark: #8A4D24;       /* Primary hover */
  --text-primary: #2A2826;      /* Ink */
  --text-secondary: #6E6960;    /* Ink secondary */
  --text-muted: #9A9388;        /* Ink tertiary */
  --border: #D9D2C2;            /* Border */
  --border-light: #E8E2D2;      /* Border subtle / surface muted */
  --danger: #8B3920;            /* Overdue — strong terracotta */
  --success: #3A5230;           /* Active — forest sage */
  --warning: #7A5424;           /* Honey */
  --stage-lead: #5C5042;
  --stage-negotiating: #7A4A20;
  --stage-contract: #6B6128;
  --stage-executing: #4F5E2C;
  --stage-awaiting_invoice: #7A5824;
  --stage-invoiced: #4F5E2C;
  --stage-collected: #3A5230;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,.10);
}

body {
  font-family: 'Inter', -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ============ LOGIN ============ */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}
.login-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 40px;
  width: 380px;
  box-shadow: var(--shadow-md);
}
.login-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}
.logo-mark {
  width: 34px; height: 34px;
  background: var(--card-dark);
  color: var(--accent);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px;
  overflow: hidden;
}
.logo-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.logo-text { font-weight: 700; font-size: 16px; }
.login-card h2 { font-size: 22px; font-weight: 700; margin-bottom: 12px; }

/* ============ USERS TABLE ============ */
.users-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.users-table th { text-align: left; font-weight: 600; font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.users-table td { padding: 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.users-table tr:last-child td { border-bottom: 0; }
.user-row-name { font-weight: 600; }
.user-self-tag { font-size: 11px; font-weight: 500; color: var(--text-muted); background: var(--bg); padding: 2px 6px; border-radius: 4px; margin-left: 6px; }
.user-cell-muted { color: var(--text-secondary); }
.user-cell-actions { white-space: nowrap; text-align: right; }
.user-action-btn { background: transparent; border: 1px solid var(--border); color: var(--text-primary); padding: 6px 10px; border-radius: 6px; font-size: 12px; cursor: pointer; margin-left: 6px; }
.user-action-btn:hover { background: var(--bg); }
.user-action-danger { color: var(--danger); border-color: var(--danger); }
.user-badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 4px; }
.user-badge-active   { background: #dcfce7; color: #166534; }
.user-badge-pending  { background: #fef3c7; color: #92400e; }
.user-badge-expired  { background: #fee2e2; color: #991b1b; }
.user-badge-inactive { background: #f3f4f6; color: #4b5563; }

/* ============ AI MEMORY LIST (Settings → Moment.AI Memory) ============ */
.ai-memory-list { display: flex; flex-direction: column; gap: 10px; }
.ai-memory-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: var(--card-bg, var(--surface, #fff)); border: 1px solid var(--border); border-radius: 10px; }
.ai-memory-row-body { flex: 1; min-width: 0; }
.ai-memory-row-content { font-size: 14px; line-height: 1.45; color: var(--text-primary); white-space: pre-wrap; word-break: break-word; }
.ai-memory-row-meta { font-size: 11px; color: var(--text-muted); margin-top: 6px; }

.login-otp-hint { font-size: 14px; color: var(--text-secondary); margin-bottom: 24px; line-height: 1.5; }
.login-back-btn { display: block; width: 100%; text-align: center; margin-top: 14px; font-size: 13px; color: var(--text-muted); }
.login-back-btn:hover { color: var(--text-secondary); }

/* ============ APP SHELL ============ */
.app-shell {
  display: flex;
  min-height: 100vh;
}
.hidden { display: none !important; }

/* ============ SIDEBAR ============ */
.sidebar {
  width: 320px;
  height: 100vh;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  padding: 20px 12px;
  position: sticky;
  top: 0;
  flex-shrink: 0;
  overflow: hidden;
}
.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 20px;
}
.sidebar-logo .logo-mark { background: var(--accent); color: var(--card-dark); }
.sidebar-logo .logo-text { color: #fff; font-weight: 700; }
.nav-items { flex: 1; display: flex; flex-direction: column; gap: 2px; }

/* ============ SECTION ACCORDION ============ */
.section-accordion {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 0;
  overflow: hidden;
  padding: 0 2px;
}
.section-item {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 44px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  overflow: hidden;
  cursor: pointer;
  transition: flex 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.2s ease;
}
.section-item:hover:not(.active) { background: rgba(255,255,255,.08); }
.section-item.active {
  flex: 5;
  background: rgba(255,255,255,.06);
  cursor: default;
}
.section-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 10px;
  height: 44px;
  flex-shrink: 0;
  color: rgba(255,255,255,.45);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color 0.2s, justify-content 0.3s;
  text-align: center;
}
.section-item.active .section-tab {
  color: var(--accent);
  justify-content: flex-start;
  padding: 0 12px;
  font-size: 10px;
}
.section-tab svg { flex-shrink: 0; opacity: .7; transition: opacity 0.2s; }
.section-item.active .section-tab svg { opacity: 1; }
.section-nav-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease 0.1s;
  padding: 0 4px 6px;
}
.section-item.active .section-nav-content {
  opacity: 1;
  pointer-events: auto;
  overflow-y: auto;
  /* Subtle scrollbar to fit the dark sidebar */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
}
.section-item.active .section-nav-content::-webkit-scrollbar { width: 6px; }
.section-item.active .section-nav-content::-webkit-scrollbar-track { background: transparent; }
.section-item.active .section-nav-content::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.18);
  border-radius: 3px;
}
.section-item.active .section-nav-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.3);
}
.section-coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 8px;
  color: rgba(255,255,255,.3);
  font-size: 12px;
  font-style: italic;
}

/* ============ SECTION LANDING ============ */
.section-landing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 75vh;
  padding: 40px 24px;
  text-align: center;
}
.section-landing-eyebrow {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.section-landing-title {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 44px;
  color: var(--text-primary);
}
.section-landing-cards {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}
.section-landing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 36px 28px 28px;
  width: 210px;
  background: var(--card-bg);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  font-family: inherit;
  text-align: center;
}
.section-landing-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.section-landing-card--soon {
  opacity: .7;
}
.section-landing-card--soon:hover { border-color: var(--text-secondary); }
.section-landing-icon {
  width: 68px;
  height: 68px;
  border-radius: 18px;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: background .2s, color .2s;
}
.section-landing-card:not(.section-landing-card--soon):hover .section-landing-icon {
  background: var(--accent);
  color: var(--card-dark);
}
.section-landing-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.section-landing-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}
.section-landing-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-muted);
  font-family: inherit;
}
.section-landing-default-toggle {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-muted);
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, color .15s;
  user-select: none;
  -webkit-user-select: none;
}
.section-landing-default-toggle:hover {
  background: var(--border-light);
  color: var(--text-primary);
}
.section-landing-default-toggle.is-active {
  background: var(--accent);
  color: var(--card-dark, #0b0d12);
}
.section-landing-default-toggle.is-active:hover {
  background: var(--accent);
  filter: brightness(0.95);
}
body.dark-mode .section-landing-default-toggle { background: var(--bg); color: var(--text-muted); }
body.dark-mode .section-landing-default-toggle:hover { background: var(--border); color: var(--text-primary); }

/* ============ COMING SOON VIEW ============ */
.coming-soon-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 65vh;
  gap: 16px;
  text-align: center;
  padding: 40px 24px;
}
.coming-soon-view .coming-soon-icon {
  color: var(--text-muted);
  margin-bottom: 8px;
}
.coming-soon-view h1 {
  font-size: 24px;
  font-weight: 700;
}
.coming-soon-view p {
  color: var(--text-muted);
  font-size: 15px;
  max-width: 340px;
  line-height: 1.6;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: #9ca3af;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, color .15s;
  text-decoration: none;
}
.nav-item svg {
  width: 18px; height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.nav-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-item.active { background: rgba(204,233,62,.12); color: var(--accent); }
.sidebar-global-nav {
  padding: 8px 2px 4px;
  border-top: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}
.sidebar-footer {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sidebar-footer span { color: #9ca3af; font-size: 12px; padding: 0 4px; }
.btn-ghost {
  background: none;
  border: none;
  color: #6b7280;
  font-size: 13px;
  cursor: pointer;
  padding: 6px 4px;
  text-align: left;
  border-radius: var(--radius-sm);
  transition: color .15s;
}
.btn-ghost:hover { color: var(--danger); }

/* ============ MAIN ============ */
.main-content { flex: 1; overflow-x: hidden; }
.view { padding: 28px 32px; }

/* ============ PAGE HEADER ============ */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.page-header h1 { font-size: 24px; font-weight: 700; }
.page-subtitle { color: var(--text-secondary); font-size: 13px; margin-top: 2px; }
.page-header-actions { display: inline-flex; align-items: center; gap: 8px; }

/* "Show completed" toggle — sits next to "+ New task" in CM page headers. */
.cm-show-completed-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.cm-show-completed-toggle:hover { background: var(--border-light); }
.cm-show-completed-toggle.is-on {
  background: var(--card-lime);
  border-color: var(--card-lime);
  color: var(--card-dark);
}
.cm-show-completed-toggle .cm-toggle-dot {
  width: 14px;
  height: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  background: var(--border-light);
  color: var(--text-muted);
}
.cm-show-completed-toggle.is-on .cm-toggle-dot {
  background: var(--card-dark);
  color: var(--card-lime);
}

/* ============ STAT CARDS ============ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}
.stat-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}
.stat-card.dark { background: var(--card-dark); color: #fff; }
.stat-card.lime { background: var(--card-lime); }
.stat-label { font-size: 12px; font-weight: 500; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.stat-card.dark .stat-label { color: rgba(255,255,255,.5); }
.stat-card.lime .stat-label { color: rgba(0,0,0,.5); }
.stat-value { font-size: 26px; font-weight: 700; }
.stat-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.stat-card.dark .stat-sub { color: rgba(255,255,255,.4); }

/* ============ SECTION ============ */
.section-title {
  font-size: 16px; font-weight: 600;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-title .count-badge {
  background: var(--border-light);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 8px;
}

/* ============ STAGE TABS ============ */
.stage-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.stage-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1.5px solid var(--border);
  background: var(--card-bg);
  color: var(--text-secondary);
  transition: all .15s;
}
.stage-tab:hover { border-color: var(--text-secondary); color: var(--text-primary); }
.stage-tab.active { border-color: transparent; color: var(--text-primary); }
.stage-tab .tab-count {
  background: rgba(0,0,0,.07);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 11px;
}
.stage-tab[data-stage="all"].active { background: var(--card-dark); color: #fff; }
.stage-tab[data-stage="all"].active .tab-count { background: rgba(255,255,255,.15); color: #fff; }
.stage-tab[data-stage="lead"].active { background: #f3f4f6; }
.stage-tab[data-stage="negotiating"].active { background: #dbeafe; color: #1d4ed8; }
.stage-tab[data-stage="contract_signed"].active { background: #ede9fe; color: #6d28d9; }
.stage-tab[data-stage="executing"].active { background: var(--card-lime); }
.stage-tab[data-stage="invoiced"].active { background: #ffedd5; color: #c2410c; }
.stage-tab[data-stage="collected"].active { background: #dcfce7; color: #15803d; }
.stage-tab[data-stage="terminated"].active { background: #fee2e2; color: #991b1b; }

/* ============ DEAL CARDS ============ */
.deals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
.deal-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: box-shadow .15s, transform .15s;
  position: relative;
  overflow: hidden;
}
.deal-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.deal-card.stage-collected { border-left: 3px solid var(--stage-collected); }
.deal-card.stage-invoiced { border-left: 3px solid var(--stage-invoiced); }
.deal-card.stage-awaiting_invoice { border-left: 3px solid var(--stage-awaiting_invoice); }
.deal-card.stage-executing { border-left: 3px solid var(--stage-executing); }
.deal-card.stage-contract_signed { border-left: 3px solid var(--stage-contract); }
.deal-card.stage-negotiating { border-left: 3px solid var(--stage-negotiating); }
.deal-card.stage-lead { border-left: 3px solid var(--stage-lead); }
.deal-card.stage-terminated { border-left: 3px solid #fca5a5; opacity: 0.7; }
.deal-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}
.deal-card-title { font-weight: 600; font-size: 15px; line-height: 1.3; }
.deal-card-brand { color: var(--text-secondary); font-size: 12px; margin-top: 2px; }
.deal-card-arrow {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  margin-left: 8px;
}
.deal-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
}
.deal-card-amount { font-weight: 700; font-size: 18px; }
.deal-card-fee { color: var(--text-secondary); font-size: 12px; }
.deal-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-light);
}
.stage-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
}
button.stage-badge {
  border: none;
  font-family: inherit;
  cursor: pointer;
}
button.stage-badge:focus { outline: none; }
button.stage-badge:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 1px; }
/* Stage badges — Stone Linen palette (refreshed 2026-05-08).
   Lifecycle reads, light mode:
   pale stone (Lead) → warm clay (Negotiating) → honey (Terms Agreed) →
   olive cream (Contract Signed) → bright sage (Executing) → pumpkin
   (Awaiting Invoice) → pale moss (Invoiced) → forest sage (Collected) →
   dusty rose (Lost). Dark-mode overrides live further down (search
   "Dark mode stage badges"). */
.badge-lead             { background: #E5E0D2; color: #5C5042; }
.badge-negotiating      { background: #F0D4B0; color: #7A4A20; }
.badge-terms_agreed     { background: #F0E0A8; color: #6E5A1C; }
.badge-contract_signed  { background: #DCDDB4; color: #605E20; }
.badge-executing        { background: #C8DDB8; color: #3F5E2C; }
.badge-awaiting_invoice { background: #E8C8B0; color: #8E4424; }
.badge-invoiced         { background: #D8DCC2; color: #4F5E2C; }
.badge-collected        { background: #A8C8B0; color: #2F4A30; }
.badge-terminated       { background: #D4B8B4; color: #7A3F38; }
.badge-lost             { background: #D4B8B4; color: #7A3F38; }
.phase-count { font-size: 12px; color: var(--text-muted); }

/* ============ DEAL DETAIL ============ */
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  margin-bottom: 20px;
  padding: 6px 0;
}
.back-btn:hover { color: var(--text-primary); }
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
  font-size: 13px;
  flex-wrap: wrap;
}
.breadcrumb-link {
  color: var(--text-secondary);
  cursor: pointer;
}
.breadcrumb-link:hover { color: var(--text-primary); text-decoration: underline; }
.breadcrumb-sep { color: var(--text-muted); }
.breadcrumb-current { color: var(--text-primary); font-weight: 500; }
.deal-detail-header {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
}
.deal-detail-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}
.deal-detail-title { font-size: 22px; font-weight: 700; }
.deal-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 12px;
}
.deal-meta-item { display: flex; flex-direction: column; gap: 2px; }
.deal-meta-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; }
.deal-meta-value { font-weight: 600; font-size: 14px; }
.deal-totals {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
}
.deal-total-item { text-align: center; }
.deal-total-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; }
.deal-total-value { font-size: 20px; font-weight: 700; margin-top: 2px; }
/* Tiny text-button that sits under a deal-totals tile (currently used for
   "Split" under Contracted). Looks like a subtle link, not a primary CTA —
   the action's a power-user / accountant move, not the main flow. */
.deal-total-action {
  display: inline-block;
  margin-top: 4px;
  background: transparent;
  border: none;
  padding: 2px 6px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 4px;
}
.deal-total-action:hover { background: var(--border-light); color: var(--text-primary); }

/* ──────────────────────────────────────────────────────────────
   Finance > Projects pager
   Sits at the bottom of the list; same control on table + card views.
   Two visual rows on mobile (info on top, controls below) so the
   button cluster never wraps awkwardly mid-pager.
   ────────────────────────────────────────────────────────────── */
.deals-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
  padding: 12px 14px;
  border-top: 1px solid var(--border-light);
  font-size: 12px;
  color: var(--text-secondary);
}
.pager-info { font-size: 12px; color: var(--text-muted); }
.pager-controls {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.pager-size { display: inline-flex; align-items: center; gap: 4px; }
.pager-size-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
}
.pager-size-btn:hover { background: var(--border-light); color: var(--text-primary); }
.pager-size-btn.is-current {
  background: var(--card-dark);
  border-color: var(--card-dark);
  color: var(--accent);
  font-weight: 600;
}
.pager-size-label { font-size: 11px; color: var(--text-muted); margin-left: 4px; }
.pager-nav { display: inline-flex; align-items: center; gap: 4px; }
.pager-num {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  min-width: 30px;
  padding: 4px 8px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
}
.pager-num:hover:not(:disabled) { background: var(--border-light); }
.pager-num.is-current {
  background: var(--card-dark);
  border-color: var(--card-dark);
  color: var(--accent);
  font-weight: 700;
}
.pager-num:disabled { opacity: .4; cursor: default; }
.pager-num.is-current:disabled { opacity: 1; }
.pager-ellipsis {
  padding: 0 4px;
  color: var(--text-muted);
}
@media (max-width: 720px) {
  .deals-pager { padding: 10px 4px; gap: 8px; }
  .pager-controls { width: 100%; justify-content: space-between; gap: 8px; }
  .pager-info { width: 100%; }
}

/* Split modal — count step inline error */
.split-count-err {
  margin-top: 6px;
  font-size: 12px;
  color: #dc2626;
}

/* Split modal — "Split evenly" checkbox row.
   Wrapping <label> means the whole row (text included) is clickable. We
   intentionally use a custom class so the global `.form-group label
   { display: block }` rule doesn't push the text across to the right. */
.split-evenly-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  margin: -8px -10px 12px;       /* negative margins offset the padding so
                                    the visual block aligns with form fields */
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
}
.split-evenly-row:hover { background: var(--border-light); }
.split-evenly-row input { width: 16px; height: 16px; cursor: pointer; margin: 0; }

/* Split modal — table step */
.split-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.split-table th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}
.split-table tbody td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-light);
}
.split-table .form-input {
  font-size: 13px;
  padding: 6px 8px;
}
.split-table tfoot td { padding: 8px; }
.split-foot td { border-top: 1px solid var(--border); }

/* ============ PHASES ============ */
.phases-section { margin-top: 20px; }
.phase-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow);
  margin-bottom: 10px;
  border-left: 3px solid var(--border);
}
.phase-card.stage-collected { border-left-color: var(--stage-collected); }
.phase-card.stage-invoiced { border-left-color: var(--stage-invoiced); }
.phase-card.stage-awaiting_invoice { border-left-color: var(--stage-awaiting_invoice); }
.phase-card.stage-executing { border-left-color: var(--stage-executing); }
.phase-card.stage-contract_signed { border-left-color: var(--stage-contract); }
.phase-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.phase-label { font-weight: 600; font-size: 14px; }

/* Left side of the phase header — keeps the label, optional rate-override
   tag, and note on the same baseline so the note reads as anchored to the
   label rather than floating somewhere else on the card. */
.phase-header-left {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
/* Inline phase note: muted, separated from the label by a thin divider
   so it doesn't blur into the title but doesn't shout either. Truncates on
   narrow rows so the right-side amount/actions stay locked in place. */
.phase-note {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 400;
  padding-left: 12px;
  margin-left: 4px;
  border-left: 1px solid var(--border-light);
  max-width: 60ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.phase-amount { font-weight: 700; font-size: 16px; }
.phase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.phase-field { display: flex; flex-direction: column; gap: 2px; }
.phase-field-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; }
.phase-field-value { font-size: 13px; font-weight: 500; }
.payment-status {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-light);
  flex-wrap: wrap;
  align-items: center;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
/* Pills — semantic accents from the brand's Status accents row.
   yes = active sage; no = inactive border tone; mm = warm clay
   (negotiating); client = dusty plum (agent guess subtle). */
.pill-yes    { background: #C8D6C2; color: #3A5230; }
.pill-no     { background: #E8E2D2; color: #9A9388; }
.pill-mm     { background: #F0DEC8; color: #7A4A20; }
.pill-client { background: #E0D8E0; color: #544A6A; }
.phase-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

/* ============ TABLE ============ */
.table-wrap {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
/* Scroll-hint shell — wraps any .table-wrap that the JS detects can
   scroll horizontally so we can pin a "more →" arrow to the right edge
   without it scrolling away with the content. The arrow only renders
   when `.has-overflow-right` is set, and the JS removes that class
   once the user has scrolled near the end. */
.table-wrap-shell { position: relative; }
.scroll-hint-arrow {
  display: none;
  position: absolute;
  top: 50%; right: 8px;
  transform: translateY(-50%);
  width: 30px; height: 30px;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent, #A05A2C);
  background: rgba(255, 255, 255, .96);
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
  z-index: 5;
  animation: scroll-hint-pulse 1.4s ease-in-out infinite;
}
.table-wrap-shell.has-overflow-right .scroll-hint-arrow { display: flex; }
@keyframes scroll-hint-pulse {
  0%, 100% { opacity: .65; transform: translateY(-50%) translateX(0); }
  50%      { opacity: 1;   transform: translateY(-50%) translateX(4px); }
}
body.dark-mode .scroll-hint-arrow {
  background: rgba(40, 38, 36, .96);
  box-shadow: 0 2px 10px rgba(0,0,0,.5);
}
table { width: 100%; border-collapse: collapse; }
thead th {
  background: var(--border-light);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-secondary);
  padding: 10px 16px;
  text-align: left;
}
tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
  font-size: 13px;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #fafafa; }
tbody tr.clickable { cursor: pointer; }

/* ============ FORMS ============ */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 12px; font-weight: 500; color: var(--text-secondary); margin-bottom: 6px; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color .15s;
  background: var(--card-bg);
  color: var(--text-primary);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none;
  border-color: var(--text-primary);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all .15s;
  text-decoration: none;
  font-family: inherit;
  /* App-wide convention: button labels render in Title Case regardless
     of how the underlying text is written. CSS only capitalizes the
     first letter of each word — it never lowercases anything, so
     ALL-CAPS acronyms (PDF, URL, BD) stay intact. */
  text-transform: capitalize;
}
.btn-primary { background: var(--card-dark); color: var(--card-bg); }
.btn-primary:hover { background: #3D3934; }
/* .btn-lime is the brand's primary action button — burnt sienna with
   cream label. Class name kept for backwards-compat with templates. */
.btn-lime { background: var(--accent); color: var(--card-bg); }
.btn-lime:hover { background: var(--accent-dark); }
.btn-outline { background: transparent; border: 1.5px solid var(--border); color: var(--text-primary); }
.btn-outline:hover { border-color: var(--text-secondary); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-sm { padding: 5px 12px; font-size: 12px; }
.full-width { width: 100%; justify-content: center; }
.error-msg { color: var(--danger); font-size: 13px; margin-bottom: 12px; padding: 8px 12px; background: #fef2f2; border-radius: var(--radius-sm); }

/* ============ UNDO MODAL ============ */
.undo-list { display: flex; flex-direction: column; gap: 6px; }
.undo-row {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 10px 12px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer; text-align: left;
  font: inherit; color: inherit;
}
.undo-row:hover { background: var(--card-hover, #f5f6f8); border-color: var(--text-secondary); }
.undo-row-main { flex: 1; min-width: 0; }
.undo-row-summary { font-size: 13px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.undo-row-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.undo-row-arrow { font-size: 16px; color: var(--text-muted); margin-left: 12px; flex-shrink: 0; }
.undo-row:hover .undo-row-arrow { color: var(--accent, var(--text-primary)); }

/* ============ FUZZY COMBOBOX ============ */
.fz-combo { position: relative; }
.fz-combo-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: var(--card-bg);
  color: var(--text-primary);
}
.fz-combo-list {
  position: absolute; top: 100%; left: 0; right: 0;
  margin-top: 2px;
  max-height: 220px; overflow-y: auto;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  z-index: 1100;
  display: none;
}
.fz-combo-item {
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
}
.fz-combo-item:hover { background: var(--card-hover, #f5f6f8); }
.fz-combo-empty { padding: 8px 12px; font-size: 13px; color: var(--text-muted); }
.fz-combo-toggle-row {
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  border-top: 1px solid var(--border-light, var(--border));
  background: var(--card-hover, #f8f9fa);
  text-align: center;
  user-select: none;
}
.fz-combo-toggle-row:hover { color: var(--text-primary); background: var(--card-hover, #eef0f3); }
.fz-combo-tag {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-left: 6px;
}

/* ============ FILTERS ============ */
.filters-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
  align-items: center;
}
.search-input {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  font-size: 13px;
  font-family: inherit;
  background: var(--card-bg);
  color: var(--text-primary);
  min-width: 220px;
}
.search-input:focus { outline: none; border-color: var(--text-primary); }
.filter-select {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 13px;
  font-family: inherit;
  background: var(--card-bg);
  color: var(--text-primary);
  cursor: pointer;
}
.filter-select:focus { outline: none; border-color: var(--text-primary); }

/* ============ MODAL ============ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.modal {
  background: var(--card-bg);
  border-radius: var(--radius);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
}
.modal.modal-wide {
  max-width: 860px;
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 0;
  margin-bottom: 20px;
}
.modal-header h3 { font-size: 17px; font-weight: 700; }
.modal-close {
  background: none; border: none;
  color: var(--text-secondary); font-size: 18px;
  cursor: pointer; padding: 4px 8px; border-radius: 6px;
}
.modal-close:hover { background: var(--bg); }
#modal-body { padding: 0 24px 24px; }

/* ============ FEE TOAST ============ */
.fee-toast {
  position: fixed;
  bottom: 24px; right: 24px;
  background: var(--card-dark);
  color: #fff;
  border-radius: var(--radius);
  padding: 16px 20px;
  max-width: 300px;
  box-shadow: var(--shadow-md);
  font-size: 13px;
  z-index: 500;
  line-height: 1.6;
}
.fee-toast a { color: var(--accent); text-decoration: none; }
.fee-toast p { margin-bottom: 4px; }

/* ============ TASK PANEL (slide-in) ============ */
:root {
  /* Stone Linen — priority + overdue accents. From brand Priority and
     Status accents rows. */
  --priority-high:     #9A3F1C;   /* terracotta — same hue family as Hot/Overdue */
  --priority-med:      #7A5824;   /* warm amber — wheat */
  --pill-overdue-bg:   #E5C2B0;
  --pill-overdue-text: #8B3920;
}
body.dark-mode {
  --pill-overdue-bg:   #4D2820;
  --pill-overdue-text: #E89070;
}

.task-panel-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  display: flex; justify-content: flex-end;
  z-index: 1100;
}
.task-panel {
  background: var(--card-bg);
  width: 100%;
  max-width: 540px;
  height: 100%;
  overflow-y: auto;
  box-shadow: -10px 0 30px rgba(0,0,0,.18);
  animation: tpSlideIn .2s ease-out;
  display: flex; flex-direction: column;
}
@keyframes tpSlideIn {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* Centered modal variant — applied when opening the New Task flow.
   Same DOM, the JS adds .is-modal to the overlay. */
.task-panel-overlay.is-modal {
  justify-content: center;
  align-items: center;
  padding: 24px;
}
.task-panel-overlay.is-modal .task-panel {
  width: 100%;
  max-width: 540px;
  height: auto;
  max-height: calc(100vh - 48px);
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0,0,0,.32);
  animation: tpModalIn .18s ease-out;
}
@keyframes tpModalIn {
  from { transform: translateY(8px) scale(.98); opacity: 0; }
  to   { transform: translateY(0)    scale(1);  opacity: 1; }
}
@media (max-width: 720px) {
  .task-panel-overlay.is-modal { padding: 12px; }
  .task-panel-overlay.is-modal .task-panel { max-height: calc(100vh - 24px); }
}

#task-panel-body { padding: 18px 24px 28px; flex: 1; }

.tp-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.tp-complete {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-secondary); cursor: pointer;
}
.tp-complete input { width: 16px; height: 16px; cursor: pointer; }
.tp-actions { display: inline-flex; align-items: center; gap: 4px; }
.tp-link {
  background: none; border: none;
  font-family: inherit; font-size: 13px; color: var(--text-secondary);
  cursor: pointer; padding: 4px 8px; border-radius: 6px;
}
.tp-link:hover { background: var(--border-light); color: var(--text-primary); }
.tp-link-danger:hover { color: var(--danger); }
.tp-close {
  background: none; border: none;
  font-size: 22px; line-height: 1;
  color: var(--text-secondary); cursor: pointer;
  padding: 2px 10px; border-radius: 6px;
}
.tp-close:hover { background: var(--border-light); color: var(--text-primary); }

.tp-title {
  width: 100%;
  font-size: 22px; font-weight: 700;
  font-family: inherit;
  color: var(--text-primary);
  background: transparent;
  border: none;
  resize: vertical;
  padding: 6px 0;
  outline: none;
  line-height: 1.3;
  margin-bottom: 14px;
}
.tp-title::placeholder { color: var(--text-muted); font-weight: 400; }

.tp-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 18px;
}
.tp-chip-pick {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--border-light);
  border: none;
  border-radius: 999px;
  padding: 5px 10px 5px 12px;
  font-family: inherit;
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
  max-width: 240px;
}
.tp-chip-pick:hover:not(:disabled) { background: var(--border); }
.tp-chip-pick:disabled,
.tp-chip-pick.is-disabled { opacity: 0.55; cursor: not-allowed; }
.tp-chip-label {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .02em;
}
.tp-chip-value {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 160px;
}
.tp-chip-caret { color: var(--text-muted); font-size: 10px; }

/* Searchable popover picker */
.tp-picker {
  position: fixed;
  width: 280px;
  max-height: 320px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  z-index: 1200;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.tp-picker-search {
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-bottom: 1px solid var(--border-light);
  font-family: inherit; font-size: 13px;
  background: transparent;
  color: var(--text-primary);
  outline: none;
}
.tp-picker-list {
  overflow-y: auto;
  flex: 1;
  padding: 4px;
}
.tp-picker-item {
  display: flex; flex-direction: column; align-items: flex-start;
  width: 100%;
  background: none;
  border: none;
  padding: 8px 10px;
  border-radius: 6px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .12s;
}
.tp-picker-item:hover  { background: var(--border-light); }
.tp-picker-item.is-selected { background: var(--card-dark); color: var(--accent); }
.tp-picker-item.is-selected .tp-picker-item-sub { color: var(--accent); opacity: 0.7; }
.tp-picker-item-label { font-size: 13px; font-weight: 500; }
.tp-picker-item-sub   { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.tp-picker-empty {
  padding: 16px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}
.tp-pill-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.tp-pill-chip.tp-priority-high { background: rgba(216,90,48,0.10); color: var(--priority-high); }
.tp-pill-chip.tp-priority-med  { background: rgba(239,159,39,0.10); color: var(--priority-med); }
.tp-pill-chip.tp-priority-low  { background: var(--border-light);   color: var(--text-secondary); }
.tp-prio-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}

.tp-fields { display: flex; flex-direction: column; gap: 10px; }
.tp-field {
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: center;
  gap: 14px;
}
.tp-field-label {
  font-size: 12px; color: var(--text-muted);
  font-weight: 500;
}
.tp-field-control {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.tp-field-control input[type="date"] {
  padding: 6px 10px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  font-family: inherit; font-size: 13px;
  background: var(--card-bg);
  color: var(--text-primary);
}
.tp-pill-row { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.tp-pill {
  background: var(--border-light);
  border: none;
  padding: 5px 12px;
  border-radius: 999px;
  font-family: inherit; font-size: 12px; font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.tp-pill:hover { background: var(--border); }
.tp-pill:disabled { opacity: 0.5; cursor: not-allowed; }
.tp-pill-prio.active           { background: var(--card-dark); color: var(--accent); font-weight: 600; }
.tp-pill-prio-high.active      { background: var(--priority-high); color: #fff; }
.tp-pill-prio-med.active       { background: var(--priority-med);  color: #fff; }

.tp-created { font-size: 13px; color: var(--text-secondary); }
.tp-meta    { color: var(--text-muted); font-style: italic; }

.tp-divider {
  border: none;
  border-top: 1px solid var(--border-light);
  margin: 18px 0 14px;
}
.tp-section-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.tp-notes {
  width: 100%;
  font-family: inherit; font-size: 14px; line-height: 1.55;
  color: var(--text-primary);
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  resize: vertical;
  outline: none;
}
.tp-notes:focus { border-color: var(--text-primary); }

.tp-create-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 18px;
}

.tp-footer {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--text-muted);
  flex-wrap: wrap; gap: 8px;
}
.tp-footer a { color: var(--text-primary); text-decoration: none; font-weight: 600; }
.tp-footer a:hover { text-decoration: underline; }

.tp-status {
  margin-top: 14px;
  font-size: 11px; color: var(--text-muted);
  min-height: 14px;
}
.tp-status.tp-status-err { color: var(--danger); }

/* Pills used inside task lists too */
.pill-overdue {
  display: inline-flex; align-items: center;
  background: var(--pill-overdue-bg); color: var(--pill-overdue-text);
  font-size: 11px; font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.prio-dot {
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  margin-right: 7px;
  vertical-align: middle;
}
.prio-dot-high { background: var(--priority-high); }
.prio-dot-med  { background: var(--priority-med); }

/* ============ CM PAGES SHARED ============ */
.cm-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.cm-stat-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}
/* Active-deal table on the CM client page (replaces the old card grid).
   Clickable rows → project detail; stage shown as a colored pill that
   abbreviates to initials on mobile. */
.cmcd-deals-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 22px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.cmcd-deals-table th {
  text-align: left;
  font-size: 11px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted);
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.cmcd-deals-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-light);
  font-size: 14px;
  vertical-align: middle;
}
.cmcd-deals-table tbody tr:last-child td { border-bottom: none; }
.cmcd-deals-row { cursor: pointer; transition: background .12s; }
.cmcd-deals-row:hover { background: var(--border-light); }
.cmcd-deals-name { font-weight: 600; color: var(--text-primary); }
.cmcd-deals-amt {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-weight: 600;
}
.cmcd-deals-status { color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.cm-stage-pill { white-space: nowrap; }
.cm-stage-pill-abbr { display: none; }
@media (max-width: 768px) {
  /* Mobile reflow: each row becomes a flex strip — Stage pill first, then
     the project name (wraps for long names), then the contract value at
     the far end. Status column is dropped (the pill carries the stage).
     Desktop keeps the normal table column order. */
  .cmcd-deals-table thead { display: none; }
  .cmcd-deals-table,
  .cmcd-deals-table tbody { display: block; }
  /* Defensive — a display:block <table> can still carry an intrinsic
     min-content width from its cells. Force it to honor the container so
     the grid rows can't overflow the viewport. */
  .cmcd-deals-table { width: 100%; max-width: 100%; min-width: 0; table-layout: fixed; }
  .cmcd-deals-row {
    display: grid;
    /* minmax(0,1fr) is the key — it lets the name column shrink below its
       content width so long names wrap instead of bleeding off-screen.
       Stage + value size to content. */
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid var(--border-light);
  }
  .cmcd-deals-table tbody tr:last-child { border-bottom: none; }
  .cmcd-deals-row td { padding: 0; border-bottom: none; }
  .cmcd-deals-stage { order: 1; }
  .cmcd-deals-name  { order: 2; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
  .cmcd-deals-amt   { order: 3; text-align: right; white-space: nowrap; }
  /* Stage pill abbreviates to initials to save width. */
  .cm-stage-pill-full { display: none; }
  .cm-stage-pill-abbr { display: inline; }
  /* Status text gets tight on small screens — drop it. */
  .cmcd-deals-status-col { display: none; }
}

/* Active-deal card on CM client page (legacy — kept in case other views
   still reference the class). */
.cm-deal-card {
  cursor: pointer;
  transition: border-color .12s, transform .12s;
}
.cm-deal-card:hover {
  border-color: var(--text-secondary);
  transform: translateY(-1px);
}
.cm-deal-card-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 4px 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.3;
  min-height: 2.6em;
}
.cm-stat-label {
  font-size: 11px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.cm-stat-value {
  font-size: 22px; font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
}
.cm-stat-sub {
  font-size: 12px; color: var(--text-muted); margin-top: 4px;
}

.cm-section-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px; margin-bottom: 14px;
}
.cm-section-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.cm-task-group-head {
  font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted);
  padding: 12px 16px 6px;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 10px;
}
.cm-task-group-head > .cm-task-group-head-label { flex: 1; min-width: 0; }
.cm-task-group-head:first-child { padding-top: 14px; }

/* Inline variant: label + button hug the left, no flex-grow spacer.
   Used on the client detail page where the project link is the click target. */
.cm-task-group-head--inline { gap: 8px; }
.cm-task-group-head-link {
  /* Project name reads as the primary content of the row, so override
     the parent's muted color with text-primary while the · stage
     suffix stays muted (see .cm-task-group-head-stage). */
  color: var(--text-primary);
  text-decoration: none;
  border-radius: 4px;
  padding: 1px 4px;
  margin-left: -4px;
  transition: background .12s, color .12s;
}
.cm-task-group-head-link:hover {
  background: var(--border-light);
  color: var(--text-primary);
}
.cm-task-group-head-link--general { cursor: default; }
.cm-task-group-head-link--general:hover { background: transparent; color: inherit; }
/* Project-stage suffix in the task-group header. Muted weight + same
   uppercase as the project name itself so it reads as inline meta. */
.cm-task-group-head-stage {
  color: var(--text-muted);
  font-weight: 500;
  margin-left: 2px;
}

/* Open-task count next to the project name. Visible only when the group
   is collapsed — when expanded the rows themselves convey the count, so
   the badge would just be visual noise. */
.cm-task-group-count {
  display: none;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--border-light);
  border-radius: 999px;
  padding: 1px 8px;
  line-height: 1.4;
}
.cm-task-group.is-collapsed .cm-task-group-count { display: inline-block; }

/* Drag handle that lives in each CM client-card header. Fills the empty
 * space between the client name area and the +Task button — clicking and
 * dragging anywhere here starts a card reorder. Cursor cue tells the user
 * the strip is grabbable. */
.cm-card-drag-handle {
  flex: 1 1 auto;
  align-self: stretch;
  min-width: 40px;
  min-height: 32px;
  cursor: grab;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Keep the area pointer-active even when nested inside flex parents
   * with funky overflow — prevents the rare "second card's handle stops
   * receiving events" bug. */
  pointer-events: auto;
}
.cm-card-drag-handle:active { cursor: grabbing; }
.cm-card-drag-dots {
  pointer-events: none;
  color: var(--text-muted);
  opacity: 0.25;
  font-size: 16px;
  letter-spacing: -2px;
  line-height: 1;
  user-select: none;
  transition: opacity .15s ease;
}
.cm-card-drag-handle:hover .cm-card-drag-dots { opacity: 0.6; }

/* While a card is being dragged, every card collapses to its header bar
 * so the user can see the whole list and drop into a new slot. */
body.cm-cards-dragging .cm-day-card-body { display: none; }
body.cm-cards-dragging .cm-day-card { user-select: none; }
.cm-day-card.is-dragging { opacity: 0.45; }

/* Drop zones during card reorder. A glowing lime bar appears in the gap
 * above the target card (or below the last card for "drop at end") so the
 * user sees exactly where the dragged card will land before they release. */
.cm-day-card { position: relative; }
.cm-day-card.drop-indicator-above::before,
.cm-day-card.drop-indicator-end::after {
  content: '';
  position: absolute;
  left: 8px; right: 8px;
  height: 5px;
  background: var(--accent, #c0e84a);
  border-radius: 999px;
  pointer-events: none;
  z-index: 5;
  box-shadow: 0 0 0 2px rgba(192,232,74,0.25), 0 0 12px rgba(192,232,74,0.55);
  animation: cm-drop-pulse .9s ease-in-out infinite alternate;
}
.cm-day-card.drop-indicator-above::before { top: -3px; }
.cm-day-card.drop-indicator-end::after    { bottom: -3px; }
@keyframes cm-drop-pulse {
  from { opacity: 0.7; transform: scaleY(1); }
  to   { opacity: 1;   transform: scaleY(1.15); }
}

/* Wraps all reorderable client cards so the drag-reorder module has a
 * single rooted target to query. */
.cm-card-grid { display: flex; flex-direction: column; gap: 0; }

/* Collapsible project groups: chevron sits at the right of the header. The
 * collapse strip fills all space to the right of the + button so the user
 * can click anywhere over there to toggle. Clicking the project name still
 * navigates (its onclick sits inside the same row but stops propagation). */
.cm-task-group-collapse {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  min-width: 24px;
  padding: 4px 6px;
  cursor: pointer;
  color: var(--text-muted);
  border-radius: 4px;
}
.cm-task-group-collapse:hover { background: var(--border-light); color: var(--text-primary); }
.cm-task-group-chevron {
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  transition: transform .15s ease;
}
.cm-task-group.is-collapsed .cm-task-group-chevron { transform: rotate(-90deg); }
.cm-task-group.is-collapsed .cm-task-group-body { display: none; }

/* Same collapse pattern applies to the top-level "General" card, which
 * uses .cm-day-card / .cm-day-card-body instead of the project-group
 * classes. Behaviour and visuals match the project-group collapse. */
.cm-day-card.is-collapsed .cm-day-card-body { display: none; }
.cm-day-card.is-collapsed .cm-task-group-chevron { transform: rotate(-90deg); }

@media (max-width: 720px) {
  .cm-stat-grid { grid-template-columns: 1fr 1fr; }
}

/* ============ CM PROJECT DETAIL ============ */
.cmpd-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 22px;
}
.cmpd-header-main { flex: 1; min-width: 0; }
.cmpd-title-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cmpd-meta { font-size: 13px; color: var(--text-secondary); margin-top: 6px; }
.cmpd-meta-link { color: var(--text-primary); text-decoration: underline dotted; }
.cmpd-meta-link:hover { color: var(--accent-dark); }
.cmpd-meta-sep { color: var(--text-muted); margin: 0 6px; }
.cmpd-header-actions { flex-shrink: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
@media (max-width: 720px) {
  /* On narrow viewports the parent's flex-wrap pushes actions to its own
     row; force full-width so the inner buttons wrap instead of overflowing
     off the right edge. */
  .cmpd-header-actions { width: 100%; justify-content: flex-start; }
}

.cmpd-stage-select {
  border: none;
  border-radius: 999px;
  padding: 6px 14px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
  outline: none;
}
.cmpd-stage-select:hover { filter: brightness(0.96); }

.cm-card-section {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 18px;
}
.cmpd-empty-row {
  font-size: 13px; color: var(--text-muted);
  padding: 8px 4px;
  font-style: italic;
}

/* Deliverables card — display + edit rows, type picker popover.
   The card lives inside .cmpd-card; this block styles only the rows.
   Grouping wrapper (Ship 2) will share .cmpd-deliv-list as the inner
   container so visual changes are scoped to its own selectors. */
.cmpd-deliv-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.cmpd-deliv-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border-light);
}
.cmpd-deliv-row:last-child { border-bottom: none; }
.cmpd-deliv-row--edit {
  /* Visually separate edit rows from display rows so the user clearly knows
     they're in input mode. Slight inset + tinted bg, no border-bottom collapse. */
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  margin: 6px 0;
}
.cmpd-deliv-details-text {
  flex: 1;
  font-size: 14px;
  color: var(--text-primary);
  min-width: 0;
  /* Wrap long details onto multiple lines instead of truncating with an
     ellipsis — users want to see the full text. The row's flex layout
     grows vertically to fit. */
  word-break: break-word;
  white-space: normal;
}
.cmpd-deliv-details-input {
  flex: 1;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 14px;
  background: var(--bg);
  color: var(--text-primary);
  outline: none;
  min-width: 120px;
}
.cmpd-deliv-details-input:focus { border-color: var(--text-primary); }
.cmpd-deliv-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.cmpd-deliv-add-wrap { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border-light); }
.cmpd-deliv-add-btn { padding: 7px 14px; }

/* Type pill — display-mode badge identifying the deliverable kind. Sienna
   tint on warm linen ground; legible at the row's 14px scale. Clickable
   variant adds cursor + hover state to invite the grouping interaction. */
.cmpd-type-pill {
  display: inline-flex; align-items: center;
  background: var(--card-lime);
  color: var(--accent);
  font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
  border: none;
  outline: none;
  font-family: inherit;
}
.cmpd-type-pill:focus,
.cmpd-type-pill:focus-visible { outline: none; }
.cmpd-type-pill--clickable {
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.cmpd-type-pill--clickable:hover {
  background: var(--accent);
  color: var(--card-lime);
}
.cmpd-type-pill--clickable:active { transform: scale(0.97); }

/* Grouped deliverables wrapper. The border + tinted background come from
   per-group CSS vars set inline (--group-border, --group-bg) so each
   distinct group reads visually distinct without needing a class explosion.
   Rows inside lose their individual bottom-borders so the group reads as
   one unit. */
.cmpd-deliv-group {
  border: 2px solid var(--group-border, var(--accent));
  background: var(--group-bg, transparent);
  border-radius: 12px;
  padding: 6px 12px;
  margin: 8px 0;
}
.cmpd-deliv-group .cmpd-deliv-row { border-bottom-color: var(--group-border, var(--border-light)); opacity: 1; }
.cmpd-deliv-group .cmpd-deliv-row:last-child { border-bottom: none; }

/* Grouping-mode top bar — sticky-feeling action strip above the list with
   hint copy on the left and Done / Clear All on the right. */
.cmpd-grouping-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: var(--card-lime);
  border: 1px solid var(--accent);
  border-radius: 10px;
}
.cmpd-grouping-hint { font-size: 13px; color: var(--text-primary); flex: 1; min-width: 0; }
.cmpd-grouping-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Grouping-mode row variants. The row is the click target; a leading
   checkmark slot shows membership. Anchor gets a stronger accent ring
   and a not-allowed cursor — clicking it does nothing. */
.cmpd-deliv-list.is-grouping .cmpd-deliv-row { cursor: pointer; border-radius: 8px; }
.cmpd-deliv-row--selectable {
  border-bottom: 1px solid var(--border-light);
  transition: background .12s;
}
.cmpd-deliv-row--selectable:hover { background: var(--border-light); }
.cmpd-deliv-row--anchor {
  background: var(--card-lime);
  box-shadow: inset 0 0 0 2px var(--accent);
  cursor: default;
}
.cmpd-deliv-row--anchor:hover { background: var(--card-lime); }
.cmpd-deliv-row--member {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.cmpd-grouping-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 1.5px solid var(--border);
  background: var(--card-bg);
  color: var(--accent);
  font-size: 13px; font-weight: 700;
  flex-shrink: 0;
}
.cmpd-deliv-row--member .cmpd-grouping-check {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.cmpd-deliv-row--anchor .cmpd-grouping-check {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Type picker — button + popover menu (Common + collapsed More section).
   Used inside .cmpd-deliv-row--edit. State lives in data-value on the
   .cmpd-type-picker wrapper; .is-open exposes the menu. */
.cmpd-type-picker { position: relative; flex-shrink: 0; }
.cmpd-type-picker-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-family: inherit; font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
  min-width: 170px;
  text-align: left;
}
.cmpd-type-picker-btn:hover { border-color: var(--text-muted); }
.cmpd-type-picker.is-open .cmpd-type-picker-btn { border-color: var(--accent); }
.cmpd-type-picker-btn.is-placeholder .cmpd-type-picker-label { color: var(--text-muted); }
.cmpd-type-picker-label { flex: 1; }
.cmpd-type-picker-caret { font-size: 10px; color: var(--text-muted); }
/* The `hidden` HTML attribute on .cmpd-type-picker-menu / .cmpd-type-more
   would normally hide them via the UA stylesheet's `[hidden] { display: none }`,
   but a class-level `display: flex` here would win the cascade and the menu
   would stay visible. Gate the flex layout behind :not([hidden]) so the
   hidden attribute is honored. */
.cmpd-type-picker-menu {
  position: absolute; top: calc(100% + 4px); left: 0;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  padding: 6px;
  min-width: 220px;
  z-index: 50;
  flex-direction: column;
}
.cmpd-type-picker-menu:not([hidden]) { display: flex; }
.cmpd-type-option,
.cmpd-type-more-toggle {
  text-align: left;
  background: none;
  border: none;
  padding: 8px 12px;
  border-radius: 6px;
  font-family: inherit; font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
}
.cmpd-type-option:hover { background: var(--border-light); }
.cmpd-type-more-toggle {
  font-size: 12px; font-weight: 600;
  color: var(--text-muted);
  border-top: 1px solid var(--border-light);
  margin-top: 4px; padding-top: 8px;
  text-align: center;
}
.cmpd-type-more-toggle:hover { color: var(--text-primary); }
.cmpd-type-more { flex-direction: column; }
.cmpd-type-more:not([hidden]) { display: flex; }

/* Edit/Delete icon buttons. --always variant skips the hover-to-reveal
   pattern from .cmpd-row-action (the user wants the icons discoverable
   without hovering, especially on touch). */
.cmpd-row-action {
  font-size: 14px;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 9px;
  border-radius: 6px;
  opacity: 0;
  transition: opacity .15s, background .15s, color .15s;
  line-height: 1;
}
.cmpd-row-action--always { opacity: 1; }
.cmpd-deliv-row:hover .cmpd-row-action,
.cm-task-row:hover .cmpd-row-action { opacity: 1; }
.cmpd-row-action:hover { background: var(--border-light); color: var(--text-primary); }

/* Mobile: stack the edit row vertically so the type picker and details
   input both get the full width instead of fighting for it. */
@media (max-width: 720px) {
  .cmpd-deliv-row--edit { flex-wrap: wrap; }
  .cmpd-deliv-row--edit .cmpd-type-picker,
  .cmpd-deliv-row--edit .cmpd-deliv-details-input { width: 100%; }
  .cmpd-type-picker-btn { width: 100%; }
  .cmpd-deliv-row--edit .cmpd-deliv-actions { width: 100%; justify-content: flex-end; }
}

/* Toggle pills (By project / By phase) — matches .tp-pill */
.cmpd-deliv-toggle {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cmpd-deliv-toggle button {
  background: var(--border-light);
  border: none;
  padding: 5px 12px;
  border-radius: 999px;
  font-family: inherit; font-size: 12px; font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.cmpd-deliv-toggle button:hover { background: var(--border); }
.cmpd-deliv-toggle button.is-active {
  background: var(--card-dark);
  color: var(--accent);
  font-weight: 600;
}

/* Page-level "Group by" row that sits between Phases and Deliverables.
   Reuses .cmpd-deliv-toggle for the pill button styling but adds an outer
   row with a label so the affordance reads as a global page control. */
.cmpd-groupby {
  display: flex; align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 0 4px;
}
.cmpd-groupby-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Tasks grouped by phase (CM project page, "By phase" view). */
.cmpd-task-ph-group { margin-bottom: 14px; }
.cmpd-task-ph-group:last-child { margin-bottom: 0; }
.cmpd-task-ph-head {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 4px;
  margin-bottom: 4px;
}
.cmpd-task-ph-label {
  font-size: 12px; font-weight: 700;
  letter-spacing: .03em;
  color: var(--text-primary);
}
.cmpd-task-ph-count {
  font-size: 11px; font-weight: 600;
  color: var(--text-muted);
  background: var(--border-light);
  border-radius: 999px;
  padding: 1px 8px;
  margin-left: auto;
}

/* Phase select inside the task drilldown modal. */
.td-phase-row { display: flex; flex-direction: column; }
.td-phase-select {
  width: 100%;
  background: var(--bg-subtle, var(--border-light));
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-primary);
}
.td-phase-select:focus { outline: none; border-color: var(--card-lime); background: var(--card-bg); }
.td-phase-empty {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--text-muted);
  background: var(--border-light);
  border-radius: 8px;
}

/* Per-phase deliverable group */
.cmpd-deliv-group {
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.cmpd-deliv-group:last-child { margin-bottom: 0; }
.cmpd-deliv-group-head {
  font-size: 11px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.cmpd-deliv-group .cmpd-add-row { border-top: none; padding-top: 6px; margin-top: 4px; }

/* Phase sublabel on flat-view rows */
.cmpd-checklist-sublabel {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 8px;
  font-weight: 500;
}

.cmpd-text-block { margin-bottom: 14px; }
.cmpd-text-block:last-child { margin-bottom: 0; }
.cmpd-text-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}

/* ============ FINANCE DEAL DETAIL — DELIVERABLES READ-ONLY ============ */
.deal-deliverables-ro {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 18px;
}
.deal-deliverables-ro-head {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 8px;
  margin-bottom: 10px;
}
.deal-deliverables-ro-edit {
  font-size: 12px;
  color: var(--text-secondary);
  text-decoration: none;
}
.deal-deliverables-ro-edit:hover { color: var(--text-primary); text-decoration: underline; }
.deal-deliverables-ro-list {
  display: flex; flex-direction: column; gap: 4px;
}
.deal-deliverables-ro-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 4px;
  font-size: 13px;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-light);
}
.deal-deliverables-ro-row:last-child { border-bottom: none; }
.deal-deliverables-ro-row.is-done .deal-deliverables-ro-label {
  text-decoration: line-through;
  color: var(--text-muted);
}
.deal-deliverables-ro-mark {
  width: 16px; text-align: center;
  font-size: 14px;
  color: var(--text-muted);
}
.deal-deliverables-ro-row.is-done .deal-deliverables-ro-mark {
  color: var(--success);
}

/* ============ CM SIDEBAR ============ */
.cm-nav-section-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: #6b7280;
  padding: 14px 12px 6px;
  margin-top: 6px;
  border-top: 1px solid rgba(255,255,255,.05);
}
.nav-item-sub {
  padding-left: 18px !important;
  font-size: 13px;
  display: flex; align-items: center; gap: 8px;
}
.cm-nav-client-name {
  flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cm-nav-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: #9ca3af;
  font-size: 11px; font-weight: 600;
  margin-left: auto;
}
.cm-nav-count.cm-nav-count-empty { display: none; }
.cm-nav-count-danger { background: rgba(216,90,48,.18); color: #f3a587; }
.cm-nav-count-danger.cm-nav-count-empty { display: none; }
.cm-nav-more {
  font-size: 12px;
  color: #6b7280 !important;
  cursor: pointer;
}

/* ============ CM TODAY DASHBOARD ============ */
.cm-day-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
  overflow: hidden;
}
.cm-day-card-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-light);
}
.cm-day-avatar {
  width: 32px; height: 32px;
  background: var(--card-dark);
  color: var(--accent);
  border-radius: 8px;
  font-weight: 700; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
  flex-shrink: 0;
  transition: transform .15s ease, box-shadow .2s ease;
}
.cm-day-avatar:hover { transform: scale(1.06); }
/* Pulse triggered on click — quick scale-up with an expanding lime ripple,
 * then settles back. Cued by JS adding .is-blinking, removed after the
 * animation length below. */
.cm-day-avatar.is-blinking {
  animation: cm-avatar-pulse .55s ease-out;
}
@keyframes cm-avatar-pulse {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0    rgba(192,232,74, 0.75); }
  35%  { transform: scale(1.18); box-shadow: 0 0 0 10px rgba(192,232,74, 0.10); }
  70%  { transform: scale(1.05); box-shadow: 0 0 0 16px rgba(192,232,74, 0);    }
  100% { transform: scale(1);    box-shadow: 0 0 0 0    rgba(192,232,74, 0);    }
}
.cm-pinned-tag {
  display: inline-block;
  background: var(--border-light);
  color: var(--text-muted);
  font-size: 10px; font-weight: 700;
  letter-spacing: .07em;
  padding: 3px 9px;
  border-radius: 999px;
  margin-right: 8px;
}

/* ============ CM TASK LIST (dev) ============ */
.cm-task-list {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.cm-task-row {
  position: relative;
  display: grid;
  grid-template-columns: 28px auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
  transition: background .12s;
}
/* Paperclip indicator — Lucide Paperclip, 16×16, oriented vertically
   (rotated -45° from the icon's native diagonal so the loop sits at the
   top, tip at the bottom — like a real paperclip standing upright).
   Lives in .cm-task-right alongside the assignee chip and date pill.
   Render rule: only when the task has at least one attachment OR a
   non-empty notes field. To revert: drop this rule and the SVG span. */
.cm-task-clip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  transform: rotate(-45deg);
  color: #A8A39A;          /* muted cream — meta-icon family */
  pointer-events: none;
  flex-shrink: 0;
}
.cm-task-clip svg { display: block; }

/* Tiny hitbox extension on the inline-editable task title — adds a few
   pixels of clickable area past the last character so the cursor lands
   on the end of the line easily. Visual layout is unchanged. */
.cm-task-title [data-task-title] {
  padding-right: 8px;
}
/* Only the title text triggers inline edit — the rest of the row is
 * intentionally a no-op so users have safe empty space to scroll past on
 * touch devices and to grab without accidentally opening an editor. */
.cm-task-title [data-task-title] { cursor: text; }
@media (max-width: 720px) {
  /* Extra right buffer on mobile gives the user a touch-safe strip beyond
   * the date pill to land scroll gestures and avoid the more (⋯) button. */
  .cm-task-row { padding-right: 28px; }
}
.cm-task-row,
.cm-task-row * {
  -webkit-touch-callout: none !important;
  -webkit-user-select: none;
  user-select: none;
}
.cm-task-row input,
.cm-task-row .task-edit-input,
.cm-task-row [contenteditable="true"] {
  -webkit-touch-callout: default !important;
  -webkit-user-select: text;
  user-select: text;
}
/* Inline edit on the title span itself — no form chrome, just a caret.
   The browser default outline on contenteditable focus would draw a blue
   box around the title; suppress it so the editing state matches the
   surrounding text exactly. The caret + selection highlight are visible
   feedback enough. */
.cm-task-title [data-task-title].is-editing {
  outline: none;
  cursor: text;
  white-space: pre-wrap;
  word-break: break-word;
}
.cm-task-row:last-child { border-bottom: none; }
.cm-task-row:hover { background: var(--border-light); }
/* Drag-and-drop reorder. Ghosted source row + colored line at the drop edge
   on the target. Cross-bucket targets stay neutral (no marker) since
   _taskDragOver bails before adding the marker class. */
.cm-task-row.is-dragging { opacity: .35; cursor: grabbing; }
.cm-task-row.is-drop-above { box-shadow: inset 0 2px 0 0 var(--accent-dark); }
.cm-task-row.is-drop-below { box-shadow: inset 0 -2px 0 0 var(--accent-dark); }
.cm-task-row[draggable="true"] { cursor: grab; }
.cm-task-row[draggable="true"]:active { cursor: grabbing; }
.cm-task-row.is-completed .cm-task-title { text-decoration: line-through; color: var(--text-muted); }
/* Custom-rendered checkbox so the priority colors live in the BORDER instead
 * of an outer ring — every checkbox is the same 16×16 footprint regardless
 * of priority, so rows align cleanly. Unchecked: 2px colored border, empty
 * interior. Checked: filled with the same color + white checkmark. */
/* Center the 16px checkbox inside its 28px grid column so the visual
   gap to the ⋯ button matches the math (otherwise the empty space on
   the right of the left-aligned checkbox makes the ⋯ look closer to
   the checkbox than to the title). */
.cm-task-check {
  display: flex;
  align-items: center;
  justify-content: center;
}
.cm-task-check input {
  width: 16px; height: 16px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 2px solid var(--border, #d1d5db);
  border-radius: 5px;
  margin: 0;
  position: relative;
  vertical-align: middle;
  flex-shrink: 0;
}
.cm-task-check input:hover { border-color: var(--text-secondary); }
/* Completed = solid filled box. The previous design drew a tiny rotated
   rectangle as a checkmark via ::after; subpixel positioning was off and
   it never sat dead-center. A filled box reads as "done" cleanly without
   the alignment quirk. */
.cm-task-check input:checked {
  background: var(--text-secondary);
  border-color: var(--text-secondary);
}
.cm-task-row[data-priority="high"] .cm-task-check input { border-color: var(--priority-high); }
.cm-task-row[data-priority="high"] .cm-task-check input:checked {
  background: var(--priority-high); border-color: var(--priority-high);
}
.cm-task-row[data-priority="med"]  .cm-task-check input { border-color: var(--priority-med); }
.cm-task-row[data-priority="med"]  .cm-task-check input:checked {
  background: var(--priority-med);  border-color: var(--priority-med);
}

/* Assignee chip — colored circle with a single initial, sits to the left
 * of the task title. No chip is rendered for No-Tag tasks. Color is
 * computed from user_id so each teammate gets a stable hue. */
.cm-task-assignee-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  margin-right: 8px;
  flex-shrink: 0;
  letter-spacing: 0;
}
/* The data-task-title span hugs its rendered text width — clicks past
 * the end of the title (in the empty space to the right) miss it and
 * don't open the editor, leaving that area as a touch-safe gutter. The
 * span CAN grow when the editor textarea is inside (textarea drives
 * width via its `cols` attr), but max-width: 100% caps it so a very
 * long title still wraps inside the row instead of bleeding past it.
 * `overflow-wrap: anywhere` handles long unbreakable strings (URLs). */
.cm-task-title [data-task-title] {
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word; /* fallback for older Safari */
}
/* Faint phase suffix that sits to the right of the task title text.
   Lives outside [data-task-title] so the inline-edit textarea — which reads
   that span's textContent — never picks it up. Read-only by design.
   Inherit font-size and line-height from .cm-task-title so the glyph
   baseline lines up with the title (a smaller font-size shifts the line
   box and the glyph reads as visually higher). */
.cm-task-ph-suffix {
  margin-left: 6px;
  color: var(--text-muted);
  font-weight: 400;
  font-size: 12px;
  line-height: inherit;
  /* Parent .cm-task-title is flex with align-items:center, which would
     vertically center the smaller text mid-line and make it look like
     it's floating. align-self:baseline drops the suffix onto the title's
     baseline so the text bottoms line up. */
  align-self: baseline;
  /* Note preview gives up space first when the row is tight on mobile.
     Without this, the suffix held its natural ~30-char width and the
     title got squeezed to a single character per line. flex:0 1 auto
     + min-width:0 + the overflow trio lets it shrink below content size
     and ellipsize, so the title keeps its room to wrap normally. */
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}
.cm-task-row.is-completed .cm-task-ph-suffix { text-decoration: line-through; }
@media (max-width: 720px) {
  .cm-task-ph-suffix { display: none; }
}
/* Inline links inside a task title — standard browser-blue look. Click
 * navigates as expected; the parent click handler skips the editor when
 * the click target is an <a>, so a link click never opens quick-edit. */
.cm-task-link {
  color: #2563eb;
  text-decoration: underline;
  cursor: pointer;
}
.cm-task-link:hover { color: #1d4ed8; }
.cm-task-row.is-completed .cm-task-link { color: var(--text-muted); }

/* Assignee picker buttons inside the task context menu */
.task-ctx-assignee-btn {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--text-muted);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.task-ctx-assignee-btn.is-selected { border-color: var(--text-primary); }
.task-ctx-assignee-none {
  background: transparent;
  border: 2px dashed var(--border);
  color: var(--text-muted);
}
.task-ctx-assignee-none.is-selected { border-style: solid; border-color: var(--text-primary); color: var(--text-primary); }

/* CM "hide other users' tasks" toggle. Two visual states:
 *   .cm-others-toggle      — viewing all (muted icon)
 *   .cm-others-toggle.is-on — filtered to me + no-tag (lime accent)
 * Same component is mounted on the desktop CM accordion header and on the
 * mobile top bar; .hidden class controls visibility per context. */
.cm-others-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 6px;
  transition: background .12s, color .12s;
  padding: 0;
}
.cm-others-toggle:hover { background: rgba(255,255,255,.08); color: var(--text-primary); }
.cm-others-toggle.is-on { color: var(--accent, #c0e84a); }
.cm-others-toggle.is-on:hover { background: rgba(192,232,74,.12); }
/* Mobile button is anchored to the right edge of the centered section
 * button (Client Mgmt) instead of sitting next to the profile icon — keeps
 * the two person-shaped icons from blurring together visually. */
.cm-others-toggle-mobile {
  position: absolute;
  left: 50%;
  margin-left: 60px;          /* half of "Client Mgmt v" pill + small gap */
  top: 50%;
  transform: translateY(-50%);
}
.cm-task-main { min-width: 0; }
.cm-task-title { font-size: 14px; font-weight: 400; color: var(--text-primary); display: flex; align-items: baseline; }
.cm-task-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; text-transform: uppercase; letter-spacing: .03em; }
.cm-task-meta { color: var(--text-muted); }
/* Right cluster — paperclip + assignee chip + date pill. Both meta
   icons "fight to be rightmost": when both are present the assignee
   sits adjacent to the date pill; when only one is present, that one
   sits adjacent to the date pill. DOM order (paperclip → assignee →
   date) plus inline-flex with a small gap delivers that behavior with
   no extra spacer logic. */
.cm-task-right {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.cm-task-due { color: var(--text-secondary); }

/* Clickable date pill (own click target — opens schedule popover) */
.cm-task-due-pill {
  cursor: pointer;
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  transition: background .12s;
}
.cm-task-due-pill.cm-task-due:hover { background: var(--border); }
.cm-task-due-pill.cm-task-overdue {
  color: var(--pill-overdue-text);
  font-weight: 600;
}
.cm-task-due-pill.cm-task-overdue:hover { background: var(--pill-overdue-bg); }

/* Inline title edit textarea. Width is driven by the `cols` attribute
 * (set in JS from the value length) so the editor hugs the text. Height
 * is set in JS via scrollHeight so it grows vertically as text wraps —
 * the user always sees all of the text they're editing, especially on
 * mobile where long URLs would otherwise scroll off. */
.task-edit-input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 14px !important;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text-primary);
  background: var(--card-bg);
  border: 1.5px solid var(--accent);
  border-radius: 6px;
  padding: 4px 8px;
  outline: none;
  display: block;
  /* Native textarea defaults we don't want here. */
  resize: none;
  overflow: hidden;          /* JS auto-grow drives the visible height */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;    /* Safari fallback for very long URLs */
  /* Stop iOS from inflating form-element text under accessibility settings. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-appearance: none;
  appearance: none;
}


/* Draft row (quick-add) */
.cm-task-row-draft {
  background: var(--border-light);
  cursor: default;
}
.cm-task-row-draft:hover { background: var(--border-light); }

/* Bare "+" quick-add button (per project sub-header) */
.cm-quick-add-btn {
  background: none;
  border: 1.5px dashed var(--border);
  color: var(--text-muted);
  width: 22px; height: 22px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit;
  transition: border-color .15s, color .15s, background .15s;
  padding: 0;
}
.cm-quick-add-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  border-style: solid;
}

/* "⋯" button between the checkbox and the task title — always visible
   so its prominent position doesn't read as a layout glitch. Subtle by
   default; gets a stronger fill on hover so the affordance is obvious.
   Horizontal padding (8px) widens the click target a touch beyond the
   glyph itself without making the rows feel spread out. The row's grid
   gap (14px) provides the rest of the breathing room on each side, so
   no margin nudges are needed for visual centering — the checkbox is
   also centered in its column (see .cm-task-check above). */
.cm-task-more-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1;
  opacity: .45;
  transition: opacity .12s, background .12s, color .12s;
}
.cm-task-row:hover .cm-task-more-btn,
.cm-task-row:focus-within .cm-task-more-btn { opacity: 1; }
.cm-task-more-btn:hover { background: var(--border); color: var(--text-primary); opacity: 1; }
@media (hover: none) { .cm-task-more-btn { opacity: 1; } }

/* Right-click context menu */
.task-ctx-menu {
  position: fixed;
  z-index: 1000;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  min-width: 200px;
  padding: 6px;
  font-family: inherit;
}
.task-ctx-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  background: none; border: none;
  padding: 8px 10px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
}
.task-ctx-item:hover { background: var(--border-light); }
.task-ctx-item .task-ctx-arrow { margin-left: auto; color: var(--text-muted); }
.task-ctx-danger { color: var(--danger); }
.task-ctx-danger:hover { background: rgba(220,38,38,0.08); }

/* ============ PROJECT DOCUMENTS ============
   Shared component used by every project-detail view. Drop zone hugs
   center-aligned content when empty; once docs exist it shrinks into a
   smaller "+ Add document" tile above the list. The contract gets a
   lime border + corner badge so it pops at a glance. */
/* The section is intentionally flat (no border/background) so each
   project page's existing wrapper provides the card chrome. On Finance
   (deal-detail) it sits under .deal-docs-section which mirrors
   .expenses-section's top-border separator; on CM and BD it sits inside
   .cm-card-section / .bdpd-docs-section, both of which are full cards.
   That keeps the Documents heading aligned with Phases / Expenses. */
.pd-section { margin: 0; }
.deal-docs-section {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border-light);
}
.bdpd-docs-section {
  margin-top: 16px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
}
.pd-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 14px;
}
.pd-section-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}
.pd-section-meta {
  font-size: 12px; color: var(--text-muted);
}
.pd-loading {
  padding: 18px; color: var(--text-muted); font-size: 13px;
}

/* Drop zone — large + centered when empty, slim + clickable when populated. */
.pd-dropzone {
  position: relative;
  border: 2px dashed var(--border);
  border-radius: 12px;
  background: var(--bg-subtle, var(--border-light));
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
  text-align: center;
}
.pd-dropzone:hover { border-color: var(--card-lime); }
.pd-dropzone.is-dragging {
  border-color: var(--card-lime);
  background: rgba(214,255,0,0.08);
}
.pd-dropzone.is-uploading { opacity: .6; pointer-events: none; }
.pd-dropzone-empty { padding: 44px 22px; }
.pd-dropzone:not(.pd-dropzone-empty) { padding: 14px 22px; margin-bottom: 14px; }

.pd-dropzone-inner { pointer-events: none; }
.pd-dropzone-icon {
  font-size: 32px; line-height: 1;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.pd-dropzone:not(.pd-dropzone-empty) .pd-dropzone-icon { display: none; }
.pd-dropzone-title {
  font-size: 14px; color: var(--text-primary); font-weight: 500;
}
.pd-dropzone-title .pd-link {
  color: var(--accent-dark, #2563eb);
  text-decoration: underline;
}
.pd-dropzone-sub {
  margin-top: 4px;
  font-size: 12px; color: var(--text-muted);
}
.pd-dropzone:not(.pd-dropzone-empty) .pd-dropzone-sub { display: none; }
.pd-uploading {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 500; color: var(--text-secondary);
  background: rgba(255,255,255,0.6);
  border-radius: 12px;
}
/* Class selectors win over the [hidden] UA rule, so re-assert it here. */
.pd-uploading[hidden] { display: none; }

/* Document cards. */
.pd-list { display: flex; flex-direction: column; gap: 8px; }
.pd-card {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pd-card:hover { border-color: var(--text-muted); }
.pd-card.is-contract {
  border-color: var(--card-lime);
  box-shadow: 0 0 0 1px var(--card-lime) inset;
  background: linear-gradient(0deg, rgba(214,255,0,0.04), rgba(214,255,0,0.04)), var(--card-bg);
}
.pd-card.is-brief {
  border-color: var(--card-blue);
  box-shadow: 0 0 0 1px var(--card-blue) inset;
  background: linear-gradient(0deg, rgba(107,123,140,0.04), rgba(107,123,140,0.04)), var(--card-bg);
}
/* Both badges share shape + chip styling; the wrapper holds them in a
   horizontal row at the top-left so a doc tagged as both renders cleanly. */
.pd-card-badges {
  position: absolute; top: -8px; left: 12px;
  display: flex; gap: 6px;
}
.pd-badge {
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  color: var(--card-dark);
  white-space: nowrap;
}
.pd-badge-contract { background: var(--card-lime); }
.pd-badge-brief    { background: var(--card-blue); }
.pd-card-main {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 12px;
  text-decoration: none;
  color: var(--text-primary);
}
.pd-card-icon {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--border-light);
  border-radius: 8px;
  font-size: 18px;
  flex-shrink: 0;
}
.pd-card-text {
  display: flex; flex-direction: column;
  min-width: 0;
}
.pd-card-name {
  font-size: 14px; font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pd-card-meta {
  font-size: 12px; color: var(--text-muted);
  margin-top: 2px;
}
.pd-card-actions {
  display: inline-flex; gap: 6px; align-items: center;
  flex-shrink: 0;
}
.pd-action-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px; font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.pd-action-btn:hover { background: var(--border-light); color: var(--text-primary); }
.pd-action-danger { color: var(--danger); border-color: rgba(220,38,38,0.3); }
.pd-action-danger:hover { background: rgba(220,38,38,0.08); color: var(--danger); }

@media (max-width: 720px) {
  .pd-section { padding: 16px; }
  .pd-card { flex-wrap: wrap; }
  .pd-card-actions { width: 100%; justify-content: flex-end; }
}

/* ============ TASK DRILLDOWN — INLINE SHADE ============
   Drops out of the bottom of a task row when the row's "⋯" button is
   clicked. Pushes subsequent rows down (no overlay) so context stays
   visible. Caller (task-drilldown.js) scrolls the page if any of the
   shade falls below the viewport after open. */
.cm-task-shade {
  position: relative;
  background: var(--bg);
  border-bottom: 1px solid var(--border-light);
  padding: 18px 22px 22px 58px;   /* 58px = 16 row pad + 28 checkbox + 14 gap */
  animation: tdShadeIn .18s ease-out;
}
@keyframes tdShadeIn {
  from { transform: translateY(-4px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@media (max-width: 720px) {
  .cm-task-shade { padding-left: 22px; padding-right: 18px; }
}
.td-close {
  position: absolute; top: 12px; right: 14px;
  background: none; border: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  font-size: 22px; line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
}
.td-close:hover { background: var(--border-light); color: var(--text-primary); }

.td-loading { padding: 30px; text-align: center; color: var(--text-muted); }

.td-header { padding-right: 32px; margin-bottom: 16px; }
.td-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
  word-break: break-word;
}
.td-subtitle {
  margin-top: 4px;
  font-size: 12px; color: var(--text-muted);
}

.td-section { margin-top: 18px; }
.td-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 8px;
}
.td-label {
  display: block;
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.td-section-meta { font-size: 11px; color: var(--text-muted); }

.td-notes {
  width: 100%;
  background: var(--bg-subtle, var(--border-light));
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text-primary);
  resize: vertical;
  min-height: 72px;
}
.td-notes:focus { outline: none; border-color: var(--card-lime); background: var(--card-bg); }

.td-subtask-list { display: flex; flex-direction: column; gap: 4px; }
.td-subtask {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px;
  border-radius: 6px;
}
.td-subtask:hover { background: var(--border-light); }
.td-subtask input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.td-subtask-title { flex: 1; font-size: 14px; color: var(--text-primary); word-break: break-word; }
.td-subtask.is-done .td-subtask-title {
  color: var(--text-muted);
  text-decoration: line-through;
}
.td-subtask-add { margin-top: 8px; }
.td-subtask-input {
  width: 100%;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-primary);
}
.td-subtask-input:focus { outline: none; border-color: var(--card-lime); border-style: solid; }

.td-icon-btn {
  background: none; border: none;
  width: 24px; height: 24px;
  border-radius: 4px;
  font-size: 16px; line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s ease;
}
.td-subtask:hover .td-icon-btn { opacity: 1; }
.td-icon-btn:hover { background: rgba(220,38,38,0.08); color: var(--danger); }

.td-dropzone {
  position: relative;
  border: 2px dashed var(--border);
  border-radius: 10px;
  background: var(--bg-subtle, var(--border-light));
  padding: 14px 18px;
  text-align: center;
  cursor: pointer;
  font-size: 13px; color: var(--text-secondary);
  transition: border-color .15s ease, background .15s ease;
}
.td-dropzone:hover { border-color: var(--card-lime); }
.td-dropzone.is-dragging { border-color: var(--card-lime); background: rgba(214,255,0,0.08); }
.td-dropzone.is-uploading { opacity: .6; pointer-events: none; }
.td-dropzone-inner { pointer-events: none; }
.td-uploading {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 500; color: var(--text-secondary);
  background: rgba(255,255,255,0.6);
  border-radius: 10px;
}
.td-uploading[hidden] { display: none; }

.td-doc-list {
  margin-top: 10px;
  display: flex; flex-direction: column; gap: 8px;
}
.td-doc-card {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
}
.td-doc-card.is-contract {
  border-color: var(--card-lime);
  box-shadow: 0 0 0 1px var(--card-lime) inset;
}
.td-doc-card.is-brief {
  border-color: var(--card-blue);
  box-shadow: 0 0 0 1px var(--card-blue) inset;
}
.td-doc-main {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  text-decoration: none;
  color: var(--text-primary);
}

.td-docs-disabled {
  padding: 12px 14px;
  background: var(--border-light);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}

.td-picker-wrap { margin-top: 12px; }
.td-picker {
  background: var(--bg-subtle, var(--border-light));
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.td-picker-head {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.td-picker-search {
  flex: 1;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  font-family: inherit;
}
.td-picker-search:focus { outline: none; border-color: var(--card-lime); }
.td-picker-list { max-height: 220px; overflow-y: auto; }
.td-picker-item {
  display: flex; align-items: baseline; gap: 8px;
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border-light);
  padding: 8px 12px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.td-picker-item:hover { background: var(--border-light); }
.td-picker-item:last-child { border-bottom: none; }
.td-picker-empty { padding: 18px; color: var(--text-muted); font-size: 13px; text-align: center; }

@media (max-width: 720px) {
  .td-icon-btn { opacity: 1; }
}

/* ============ PROJECT PHASES (shared CM/BD section) ============
   Finance has its richer phase UI in deal-detail.js with commission
   + collected fields; this component is the upstream-friendly variant
   used inside the standard card-section wrappers (.cm-card-section /
   .bdpd-docs-section). Keep this section flat — no double-card chrome. */
.pp-section { /* lives inside an outer card on both CM and BD */ }
/* Click anywhere on the header bar (not the + Add phase button) toggles
   the collapsed state. Module-level _ppCollapsed in project-phases.js
   tracks the flag; not persisted across reloads. */
.pp-section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
  cursor: pointer;
  user-select: none;
}
.pp-section-head:hover .pp-collapse-chevron { color: var(--text-secondary); }
.pp-collapse-chevron {
  font-size: 12px;
  color: var(--text-muted);
  transition: transform .15s;
}
.pp-section.is-collapsed .pp-collapse-chevron { transform: rotate(-90deg); }
.pp-section.is-collapsed .pp-list,
.pp-section.is-collapsed .pp-empty { display: none; }
.pp-section.is-collapsed .pp-section-head { margin-bottom: 0; }
.pp-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}
.pp-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--border-light);
  border-radius: 999px;
  padding: 2px 8px;
}
.pp-loading,
.pp-empty {
  padding: 14px 16px;
  background: var(--border-light);
  border-radius: 10px;
  font-size: 13px;
  color: var(--text-muted);
}
.pp-list { display: flex; flex-direction: column; gap: 8px; }
.pp-card {
  position: relative;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
  transition: border-color .12s ease;
}
.pp-card:hover { border-color: var(--text-muted); }
.pp-card-main {
  flex: 1; min-width: 0;
  padding: 12px 14px;
  cursor: pointer;
}
.pp-card-row1 {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 4px;
}
.pp-card-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  word-break: break-word;
}
.pp-card-row2 {
  display: flex; flex-wrap: wrap; gap: 18px;
  font-size: 12px;
  color: var(--text-secondary);
}
.pp-card-meta-k {
  color: var(--text-muted);
  font-weight: 500;
  margin-right: 4px;
}
.pp-card-del {
  flex-shrink: 0;
  background: none; border: none;
  width: 36px;
  font-size: 18px; line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  border-left: 1px solid transparent;
  border-radius: 0 10px 10px 0;
  transition: background .12s ease, color .12s ease;
}
.pp-card-del:hover { background: rgba(220,38,38,0.08); color: var(--danger); }

@media (max-width: 720px) {
  .pp-card-row2 { gap: 12px; }
}

/* Slash-command autocomplete popup (desktop only — JS attaches the
   handlers behind a viewport check). Anchored below the active task
   editor input. */
.cm-slash-popup {
  position: absolute;
  z-index: 9000;
  display: none;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  padding: 4px;
  min-width: 220px;
  font-family: inherit;
  font-size: 13px;
}
.cm-slash-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-primary);
}
.cm-slash-item.is-active,
.cm-slash-item:hover {
  background: var(--border-light);
}
.cm-slash-token {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--text-primary);
  font-weight: 500;
}
.cm-slash-label {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 12px;
}

.task-ctx-snooze-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.task-ctx-snooze-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: none; border: none;
  padding: 8px 6px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.task-ctx-snooze-btn:hover { background: var(--border-light); }
.task-ctx-snooze-btn svg { color: var(--text-secondary); flex-shrink: 0; }
.task-ctx-snooze-btn:hover svg { color: var(--text-primary); }

.task-ctx-prio {
  padding: 6px 10px 8px;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  margin: 4px 0;
}
.task-ctx-prio-label {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.task-ctx-prio-row { display: flex; gap: 4px; }
.task-ctx-prio-btn {
  background: var(--border-light);
  border: none;
  width: 32px; height: 28px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  transition: background .12s, color .12s;
}
.task-ctx-prio-btn:hover { background: var(--border); }
.task-ctx-prio-low  { color: #2563eb; }
.task-ctx-prio-med  { color: var(--priority-med, #ef9f27); }
.task-ctx-prio-high { color: var(--priority-high, #d85a30); }
.task-ctx-prio-btn.is-selected                    { color: #fff; background: var(--text-secondary, #6b7280); }
.task-ctx-prio-btn.is-selected.task-ctx-prio-low  { background: #2563eb; }
.task-ctx-prio-btn.is-selected.task-ctx-prio-med  { background: var(--priority-med, #ef9f27); }
.task-ctx-prio-btn.is-selected.task-ctx-prio-high { background: var(--priority-high, #d85a30); }

/* Inline delete confirmation (replaces the menu contents in place) */
.task-ctx-confirm { padding: 12px 12px 10px; min-width: 220px; }
.task-ctx-confirm-msg {
  font-size: 13px;
  color: var(--text-primary);
  margin-bottom: 12px;
  line-height: 1.4;
}
.task-ctx-confirm-actions {
  display: flex; justify-content: flex-end; gap: 8px;
}
.task-ctx-confirm-cancel,
.task-ctx-confirm-delete {
  font-family: inherit;
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  border: none;
  font-weight: 600;
}
.task-ctx-confirm-cancel {
  background: var(--border-light);
  color: var(--text-primary);
}
.task-ctx-confirm-cancel:hover { background: var(--border); }
.task-ctx-confirm-delete {
  background: var(--danger);
  color: #fff;
}
.task-ctx-confirm-delete:hover { filter: brightness(0.9); }

/* Schedule popover */
.task-sched-popover {
  position: fixed;
  z-index: 1000;
  width: 280px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  padding: 10px;
  font-family: inherit;
}
.task-sched-quick {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 8px;
}
.task-sched-quick-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: none;
  padding: 8px 4px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 10px;
  color: var(--text-secondary);
  font-weight: 500;
  transition: background .12s, color .12s;
}
.task-sched-quick-btn:hover { background: var(--border-light); color: var(--text-primary); }
.task-sched-quick-btn svg { color: var(--text-secondary); }
.task-sched-quick-btn:hover svg { color: var(--text-primary); }

.task-sched-cal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 6px 8px;
}
.task-sched-cal-month { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.task-sched-cal-nav {
  background: none; border: none; cursor: pointer;
  width: 26px; height: 26px;
  border-radius: 6px;
  font-size: 16px; line-height: 1;
  color: var(--text-secondary);
  font-family: inherit;
}
.task-sched-cal-nav:hover { background: var(--border-light); color: var(--text-primary); }

.task-sched-cal-dow {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  padding: 0 4px 4px;
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
  font-weight: 600;
}
.task-sched-cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  padding: 0 4px 4px;
}
.task-sched-cal-cell {
  background: none; border: none;
  padding: 6px 0;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  color: var(--text-primary);
  text-align: center;
  transition: background .12s, color .12s;
}
.task-sched-cal-cell:hover { background: var(--border-light); }
.task-sched-cal-cell.is-blank { cursor: default; }
.task-sched-cal-cell.is-blank:hover { background: none; }
.task-sched-cal-cell.is-today {
  background: var(--card-dark);
  color: var(--accent);
  font-weight: 600;
}
.task-sched-cal-cell.is-today:hover { background: var(--card-dark); }

@media (max-width: 720px) {
  .task-panel { max-width: 100%; }
  .tp-field { grid-template-columns: 1fr; gap: 4px; }
  .tp-field-label { font-size: 11px; }
}

/* ============ EMPTY STATE ============ */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}
.empty-state h3 { font-size: 16px; color: var(--text-secondary); margin-bottom: 8px; }

/* ============ DASHBOARD SECTION HEADERS ============ */
.dash-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.dash-section-label {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.dash-section-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.dash-section-sub {
  font-size: 12px;
  color: var(--text-muted);
}

/* ============ YEAR PILLS ============ */
.year-pills {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.year-pill {
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1.5px solid var(--border);
  background: var(--card-bg);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
}
.year-pill:hover {
  border-color: var(--text-secondary);
  color: var(--text-primary);
}
.year-pill.active {
  background: var(--card-dark);
  border-color: var(--card-dark);
  color: var(--accent);
}
/* Future years (e.g. 2027 when collections are already booked) get a soft
   blue tint so they read as "looking ahead" at a glance. Active state still
   wins (dark bg + accent text) so the selected pill is unambiguous. */
.year-pill.year-pill-future {
  background: #dbeafe;
  border-color: #93c5fd;
  color: #1d4ed8;
}
.year-pill.year-pill-future:hover {
  border-color: #1d4ed8;
}

/* ============ CLIENT CARDS ============ */
.client-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.client-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: box-shadow .15s, transform .15s;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.client-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.client-card-avatar {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--card-dark);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}
.client-card-body { flex: 1; min-width: 0; }
.client-card-name {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.client-card-fee {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.client-card-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
}
.client-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.client-stat-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.client-stat-value {
  font-size: 13px;
  font-weight: 600;
}
.client-card-row-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.client-card-outstanding {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ============ VIEW TOGGLE ============ */
.view-toggle {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}
.view-toggle-btn {
  background: var(--card-bg);
  border: none;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .15s, color .15s;
  white-space: nowrap;
  text-transform: capitalize;
}
.view-toggle-btn:hover { background: var(--border-light); }
.view-toggle-btn.active {
  background: var(--card-dark);
  color: var(--accent);
  font-weight: 600;
}
.view-toggle-btn.active:hover { background: var(--card-dark); }
.view-toggle-btn span { vertical-align: middle; line-height: 1; }

/* ============ SECTION TELEPORT (detail-page section switcher) ============
   Renders just below the breadcrumb on client/project detail pages so users
   can jump to the same entity in another section (Finance/CM/BD) without
   backing out to a list. Lighter visual weight than .view-toggle so it
   doesn't compete with in-page tabs.
*/
.section-teleport {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  margin: 4px 0 16px;
}
.section-teleport-pill {
  background: transparent;
  border: 0;
  padding: 4px 12px;
  border-radius: 999px;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.section-teleport-pill:hover { background: var(--border-light); color: var(--text-primary); }
.section-teleport-pill.is-current {
  background: var(--card-dark);
  color: var(--accent);
  font-weight: 600;
  cursor: default;
}
.section-teleport-pill.is-current:hover { background: var(--card-dark); }

/* ============ DEALS FILTER BAR ============ */
.filter-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}
.filter-row .search-input {
  width: 100%;
  max-width: 420px;
  min-width: 240px;
  justify-self: center;
}
.filter-row-spacer { /* mirrors filters column for centering */ }
@media (max-width: 720px) {
  .filter-row { grid-template-columns: 1fr; }
  .filter-row .search-input { justify-self: stretch; max-width: none; }
  .filter-row-spacer { display: none; }
}
.filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 0;
}
.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
  font-family: inherit;
  white-space: nowrap;
}
.filter-btn:hover { border-color: var(--text-secondary); }
.filter-btn.open  { border-color: var(--text-primary); background: var(--card-dark); color: #fff; }
.filter-btn.has-value { border-color: var(--card-dark); }
.filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--card-dark);
  color: #fff;
  border-radius: 999px;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}
.filter-btn.open .filter-count { background: rgba(255,255,255,.25); }
.filter-caret { font-size: 9px; opacity: .7; }
.filter-clear-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  padding: 4px 6px;
  text-decoration: underline;
}
.filter-clear-btn:hover { color: var(--danger); }
.filter-panel {
  margin-top: 10px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  box-shadow: var(--shadow-md);
  margin-bottom: 4px;
}
.filter-panel-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.filter-panel-tags {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.filter-tag-group {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-light);
}
.filter-panel-tags .filter-tag-group:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.filter-panel-tags .filter-tag-group:first-child {
  padding-top: 0;
}
.filter-tag-group-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.filter-pill-parent {
  width: 140px;
  flex-shrink: 0;
  background: #e2e4ec;
  color: #374151;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  line-height: 1.4;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-wrap: break-word;
  word-break: break-word;
  transition: background .12s;
  align-self: center;
}
.filter-pill-parent:hover { background: #d5d8e3; color: #1f2937; }
.filter-pill-parent.active { background: var(--accent); color: #111318; }
.filter-tag-children {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}
.filter-tag-children .filter-pill {
  background: #eef0f7;
  border: 1px solid #d8dbe8;
  border-radius: 6px;
  color: #4b5563;
  padding: 4px 10px;
  font-size: 12px;
}
.filter-tag-children .filter-pill:hover {
  background: #e4e7f2;
  border-color: #c5c9da;
  color: var(--text-primary);
}
.filter-tag-children .filter-pill.active {
  background: var(--card-dark);
  border-color: var(--card-dark);
  color: #fff;
}

/* ============ DEALS FILTER ROWS (legacy — kept for compat) ============ */
.deals-filter-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.deals-filter-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  padding-top: 7px;
  flex-shrink: 0;
  width: 44px;
}
.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  border: 1.5px solid var(--border);
  background: var(--card-bg);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
}
.filter-pill:hover {
  border-color: var(--text-secondary);
  color: var(--text-primary);
}
.filter-pill.active {
  background: var(--card-dark);
  border-color: var(--card-dark);
  color: #fff;
}
.filter-pill-count {
  background: rgba(255,255,255,.15);
  border-radius: 999px;
  padding: 1px 6px;
  font-size: 10px;
}
.filter-pill:not(.active) .filter-pill-count {
  background: rgba(0,0,0,.06);
  color: var(--text-muted);
}
/* Stage-coloured active pills */
.stage-pill-lead.active          { background: #4b5563; border-color: #4b5563; }
.stage-pill-negotiating.active   { background: #1d4ed8; border-color: #1d4ed8; }
.stage-pill-contract_signed.active { background: #6d28d9; border-color: #6d28d9; }
.stage-pill-executing.active       { background: var(--card-lime); border-color: var(--card-lime); color: #3a4700; }
.stage-pill-executing.active .filter-pill-count { background: rgba(0,0,0,.1); color: #3a4700; }
.stage-pill-awaiting_invoice.active { background: #d97706; border-color: #d97706; color: #fff; }
.stage-pill-invoiced.active        { background: #c2410c; border-color: #c2410c; }
.stage-pill-collected.active     { background: #15803d; border-color: #15803d; }
.stage-pill-terminated.active    { background: #991b1b; border-color: #991b1b; }

/* ============ MISC ============ */
.tag { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 500; background: var(--bg); color: var(--text-secondary); }
.divider { height: 1px; background: var(--border-light); margin: 20px 0; }
.text-right  { text-align: right; }
.text-center { text-align: center; }

/* ============ SORTABLE TABLE COLUMNS ============ */
.sortable-col {
  cursor: pointer;
  user-select: none;
  transition: color .12s;
  white-space: nowrap;
}
.sortable-col:hover { color: var(--text-primary) !important; }
.sortable-col.sorted { color: var(--text-primary); }

/* ============ GROUP HEADER ROWS ============ */
.group-header-row td {
  background: var(--bg);
  padding: 7px 14px;
  font-size: 12px;
  border-top: 2px solid var(--border);
}

/* ============ GROUP BY SELECT ============ */
.group-by-select {
  height: 34px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--card-bg);
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s;
}
.group-by-select:focus { outline: none; border-color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger { color: var(--danger); }
.font-mono { font-family: 'SF Mono', 'Courier New', monospace; }
.flex { display: flex; }
.items-center { align-items: center; }
.gap-8 { gap: 8px; }

/* ============ MOBILE TOP BAR ============ */
.mobile-topbar {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 52px;
  background: var(--sidebar-bg);
  z-index: 200;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  flex-shrink: 0;
}
.mobile-topbar-logo {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mobile-topbar-logo .logo-mark {
  background: var(--accent);
  color: var(--card-dark);
  width: 28px; height: 28px;
  font-size: 13px;
}
.mobile-topbar-title {
  color: #fff;
  font-weight: 700;
  font-size: 15px;
}
.mobile-profile-btn {
  position: relative;
  z-index: 2;
  background: transparent;
  border: 0;
  color: #fff;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: rgba(255,255,255,0.1);
}
.mobile-profile-btn:active { background: rgba(255,255,255,0.08); }

.mobile-profile-menu {
  position: fixed;
  top: 56px;
  right: 12px;
  background: var(--card-bg);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  border: 1px solid var(--border);
  padding: 6px;
  z-index: 250;
  min-width: 180px;
}
.mobile-profile-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 10px 12px;
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 14px;
  cursor: pointer;
  text-align: left;
}
.mobile-profile-menu-item:hover,
.mobile-profile-menu-item:active { background: var(--bg); }
.mobile-profile-menu-item svg { color: var(--text-secondary); flex-shrink: 0; }

/* ============ MOBILE SECTION PICKER BUTTON ============ */
.mobile-section-btn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  padding: 5px 13px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}
.mobile-section-btn:hover { background: rgba(255,255,255,.16); }

/* ============ SECTION PICKER OVERLAY ============ */
.section-picker-overlay {
  position: fixed;
  inset: 0;
  background: #0d0f12;
  z-index: 500;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 24px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.section-picker-overlay.sp-open {
  opacity: 1;
  pointer-events: all;
}
.section-picker-close {
  position: absolute;
  top: 18px;
  right: 18px;
  background: rgba(255,255,255,.07);
  border: none;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.section-picker-close:hover { background: rgba(255,255,255,.13); color: #fff; }
.section-picker-content { display: flex; flex-direction: column; }
.section-picker-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #4b5563;
  margin-bottom: 20px;
}
.section-picker-options { display: flex; flex-direction: column; gap: 12px; }
.section-picker-option {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 18px;
  padding: 22px 20px;
  cursor: pointer;
  text-align: left;
  color: #fff;
  transition: opacity 0.4s cubic-bezier(0.16,1,0.3,1), transform 0.4s cubic-bezier(0.16,1,0.3,1), background .15s, border-color .15s;
  opacity: 0;
  transform: translateY(20px);
}
.section-picker-option:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.14);
}
.section-picker-option.sp-active {
  border-color: var(--accent);
  background: rgba(204,233,62,.06);
}
.section-picker-icon {
  color: #6b7280;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,.05);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.section-picker-option.sp-active .section-picker-icon { color: var(--accent); background: rgba(204,233,62,.1); }
.section-picker-text { flex: 1; }
.section-picker-name {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 3px;
}
.section-picker-desc { font-size: 13px; color: #6b7280; }
.section-picker-check {
  color: var(--accent);
  opacity: 0;
  transition: opacity .2s;
  flex-shrink: 0;
}
.section-picker-option.sp-active .section-picker-check { opacity: 1; }
.sp-soon-tag {
  font-size: 10px;
  font-weight: 600;
  background: rgba(255,255,255,.1);
  border-radius: 4px;
  padding: 1px 6px;
  color: #6b7280;
  vertical-align: middle;
  margin-left: 6px;
  letter-spacing: 0;
}
.section-picker-default-toggle {
  display: inline-block;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: #9ca3af;
  cursor: pointer;
  transition: background .15s, color .15s;
  user-select: none;
  -webkit-user-select: none;
}
.section-picker-default-toggle:hover {
  background: rgba(255,255,255,.12);
  color: #fff;
}
.section-picker-default-toggle.is-active {
  background: var(--accent);
  color: #0b0d12;
}
.section-picker-default-toggle.is-active:hover { filter: brightness(0.95); }

/* ============ PHONE TRAY ============
   Right-side fixed iframe that renders the app at mobile width so the user
   can be in two places at once. Persistent toggle button top-right; both
   the tray and the button hide entirely below the 1300px viewport
   threshold (phone-tray.js enforces this in JS too; CSS is the redundant
   guard so there's no flash before the script binds the resize listener). */
#phone-tray-toggle {
  position: fixed;
  top: 12px; right: 12px;
  z-index: 260;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: color .15s, background .15s, border-color .15s;
}
#phone-tray-toggle:hover {
  color: var(--text-primary);
  border-color: var(--text-muted);
}
#phone-tray-toggle.is-active {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--card-lime);
}

#phone-tray {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 430px;
  z-index: 240;
  background: var(--sidebar-bg);
  border-left: 1px solid rgba(255,255,255,0.06);
  transform: translateX(100%);
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
  display: flex; flex-direction: column;
  pointer-events: none;
}
#phone-tray.is-open {
  transform: translateX(0);
  pointer-events: auto;
}
/* Tray frame is just a borderless container; the iframe fills it
   edge-to-edge with no bezel/rounded-corner/shadow phone-mockup look. */
.phone-tray-bezel {
  flex: 1;
  display: flex;
}
#phone-tray-iframe {
  flex: 1;
  width: 100%; height: 100%;
  border: 0;
  background: var(--bg);
  display: block;
}

/* Push the main app left when the tray is open so they don't overlap.
   The sidebar is fixed-width and main-content is flex:1, so the shrink
   happens naturally inside .app-shell. */
body.phone-tray-open {
  padding-right: 430px;
}

/* Below the viewport threshold, hide everything so the tray doesn't
   appear on small windows. JS also hides the toggle/tray but this
   prevents the brief flash before phone-tray.js runs. */
@media (max-width: 1299px) {
  #phone-tray-toggle,
  #phone-tray { display: none !important; }
  body.phone-tray-open { padding-right: 0 !important; }
}

/* ============ MOBILE BOTTOM NAV ============ */
/* Hardened against iOS PWA fixed-position jank (May 2026):
   - `padding-bottom: env(safe-area-inset-bottom)` honors the home indicator
     strip when launched as a standalone PWA (paired with viewport-fit=cover
     in the <meta viewport> tag).
   - `transform: translateZ(0)` promotes this element to its own compositing
     layer so iOS doesn't "lose" the fixed positioning during state changes
     (keyboard show/hide, status-bar style transitions, multitask switch). */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  /* Global box-sizing is border-box, so padding-bottom (the safe-area
     inset, ~34px on iPhones with a home indicator) eats into the height
     and squashes the icons. Build the height to be 60px of CONTENT plus
     the safe-area inset so labels and icons get the full 60px regardless
     of device. */
  height: calc(60px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--sidebar-bg);
  border-top: 1px solid rgba(255,255,255,.08);
  z-index: 200;
  align-items: stretch;
  transform: translateZ(0);
}
.mobile-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: #6b7280;
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: color .15s;
  padding: 8px 4px;
}
.mobile-nav-item svg {
  width: 20px; height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mobile-nav-item.active { color: var(--accent); }

.mobile-nav-item:hover { color: #fff; }

/* ============ CM PROJECT — PRODUCTION TAB ============
   Display-only by default with an out-of-the-way "Edit" button. Editor
   replaces the body when toggled. Empty-state CTA sits centered.
   Yes/No questions render as pills outside the editor; sub-items indent
   under their parent and only show when the parent is Yes. */
.cmpd-prod-empty {
  text-align: center;
  padding: 56px 24px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  margin-top: 8px;
}
.cmpd-prod-empty h3 { margin: 0 0 6px; font-size: 18px; color: var(--text-primary); }
.cmpd-prod-empty p  { margin: 0 0 18px; font-size: 14px; color: var(--text-muted); }

.cmpd-prod-display, .cmpd-prod-editor { display: flex; flex-direction: column; gap: 14px; }
.cmpd-prod-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-bottom: -4px;        /* tuck up against the first section */
}
.cmpd-prod-actions--editor { position: sticky; top: 0; background: var(--bg); padding: 6px 0; z-index: 5; }

.cmpd-prod-section {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 22px;
}
.cmpd-prod-section-head {
  font-size: 13px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-light);
}
.cmpd-prod-subsection {
  padding: 10px 12px;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  margin-bottom: 10px;
  background: var(--bg);
}
.cmpd-prod-subsection:last-child { margin-bottom: 0; }
.cmpd-prod-subsection-head {
  font-size: 12px; font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

/* Post tab — one card per deliverable. Header is clickable to collapse
   the body (display mode); editor mode reuses the same card frame but
   doesn't collapse. */
.cmpd-post-card-list {
  display: flex; flex-direction: column;
  gap: 12px;
  margin-top: 6px;
}
.cmpd-post-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-bg);
  overflow: hidden;
}
.cmpd-post-card-head {
  display: flex; align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
  background: var(--card-bg);
  transition: background .12s ease;
}
.cmpd-post-card-head:hover { background: var(--border-light); }
.cmpd-post-card-head--editor { cursor: default; }
.cmpd-post-card-head--editor:hover { background: var(--card-bg); }
.cmpd-post-card-heading {
  flex: 1; min-width: 0;
  font-size: 15px; font-weight: 700;
  color: var(--text-primary);
}
.cmpd-post-card-date {
  font-size: 12px; font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
  flex-shrink: 0;
}
.cmpd-post-card-chevron {
  font-size: 12px;
  color: var(--text-muted);
  transition: transform .18s ease;
  flex-shrink: 0;
}
.cmpd-post-card.is-collapsed .cmpd-post-card-chevron { transform: rotate(-90deg); }
.cmpd-post-card-body {
  padding: 6px 16px 14px;
}
.cmpd-post-card.is-collapsed .cmpd-post-card-body { display: none; }
.cmpd-post-card.is-collapsed .cmpd-post-card-head { border-bottom: none; }

/* ============ ALL TAB — collapsible, drag-reorderable summary cards.
   Each card has a left drag handle (⋮⋮), a clickable heading, and a
   collapse chevron on the right. While dragging, the body collapses
   visually so the list reads as a flat reorderable strip. */
.cmpd-all { padding-top: 6px; }
.cmpd-all-list { display: flex; flex-direction: column; gap: 10px; }
.cmpd-all-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-bg);
  /* No overflow:hidden — the drop-indicator pseudo-elements live just
     outside the card box (in the inter-card gap) and would be clipped. */
  position: relative;
  transition: box-shadow .12s ease, transform .12s ease;
}
.cmpd-all-card-head {
  display: flex; align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--card-bg);
  transition: background .12s ease;
}
.cmpd-all-card-head:hover { background: var(--border-light); }
.cmpd-all-drag {
  cursor: grab;
  color: var(--text-muted);
  font-size: 14px;
  user-select: none;
  padding: 2px 4px;
  border-radius: 4px;
  line-height: 1;
  flex-shrink: 0;
}
.cmpd-all-drag:hover { color: var(--text-primary); background: var(--border-light); }
.cmpd-all-card-heading {
  flex: 1; min-width: 0;
  font-size: 14px; color: var(--text-primary);
  cursor: pointer;
  user-select: none;
}
.cmpd-all-card-chevron {
  background: none; border: none;
  font-size: 12px; color: var(--text-muted);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  transition: transform .18s ease, background .12s ease;
  flex-shrink: 0;
}
.cmpd-all-card-chevron:hover { background: var(--border-light); }
.cmpd-all-card.is-collapsed .cmpd-all-card-chevron { transform: rotate(-90deg); }
.cmpd-all-card-body { padding: 4px 14px 12px; }
.cmpd-all-card.is-collapsed .cmpd-all-card-body { display: none; }

/* Dragging state. The dragged card lifts via shadow + slight scale.
   Drop indicators are a thin accent bar above the would-be drop slot
   (or under the last card when dropping at the end). */
body.cmpd-all-dragging { cursor: grabbing !important; user-select: none; }
body.cmpd-all-dragging .cmpd-all-card { transition: none; }
/* During a drag, collapse every card to its header strip so the order
   reads cleanly and the drop indicator has unambiguous targets. Mirrors
   the Today-page client reorder pattern. Reverts the instant drag ends —
   each card returns to whatever expanded/collapsed state the user had. */
body.cmpd-all-dragging .cmpd-all-card-body { display: none; }
body.cmpd-all-dragging .cmpd-all-card-head  { border-bottom: none; }
body.cmpd-all-dragging .cmpd-all-card-chevron { transform: rotate(-90deg); }
.cmpd-all-card.is-dragging {
  opacity: 0.6;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}
/* Drop indicator — a saturated accent bar sitting in the inter-card gap.
   The list uses gap:10px between cards, so positioning the bar 7px off
   the card's edge lands it roughly centered in that gap. Subtle glow
   makes it pop against the warm linen background. */
.cmpd-all-card.drop-above::before,
.cmpd-all-card.drop-end::after {
  content: '';
  position: absolute;
  left: 4px; right: 4px;
  height: 4px;
  background: var(--accent);
  border-radius: 2px;
  box-shadow: 0 0 0 2px rgba(160, 90, 44, 0.18);
  z-index: 2;
  pointer-events: none;
}
.cmpd-all-card.drop-above::before { top:    -7px; }
.cmpd-all-card.drop-end::after    { bottom: -7px; }

/* Legacy "Posts" summary line styles — kept for back-compat in case any
   other code paths still reference them. The Post tab no longer uses
   them after the per-deliverable card rewrite. */
.cmpd-post-summary-line {
  display: flex;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 14px;
  align-items: flex-start;
}
.cmpd-post-summary-line:last-child { border-bottom: none; }
/* Name column is capped at 55% of the row so a long deliverable name
   (e.g. "Instagram Stories — 2 frames, mix of photo/video, video only")
   wraps within its own column instead of stealing the caption's space.
   word-break lets it break on any character if needed. */
.cmpd-post-summary-name {
  font-weight: 600;
  color: var(--text-primary);
  flex: 0 0 55%;
  word-break: break-word;
}
.cmpd-post-summary-caption {
  flex: 1;
  min-width: 0;
  color: var(--text-primary);
  word-break: break-word;
}

/* Row layout: label on the left, value (or input) on the right. The label
   column is fixed-ish so values align across rows. Sub-items indent by
   shifting the entire row, keeping label-value alignment within the indent. */
.cmpd-prod-row {
  display: grid;
  grid-template-columns: minmax(180px, 220px) 1fr;
  gap: 14px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-light);
}
.cmpd-prod-row:last-child { border-bottom: none; }
/* Sub-rows hang under their parent with a vertical tree-line and use an
   auto-width label so the value sits right next to it instead of marooning
   on the far side of the grid. Smaller muted label communicates hierarchy
   at a glance. */
.cmpd-prod-row--sub {
  grid-template-columns: auto 1fr;
  gap: 10px;
  margin-left: 18px;
  padding-left: 14px;
  border-left: 2px solid var(--border-light);
  border-bottom: none;
}
.cmpd-prod-row--sub + .cmpd-prod-row--sub { margin-top: -4px; }
.cmpd-prod-row--sub .cmpd-prod-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}
.cmpd-prod-label {
  font-size: 13px; font-weight: 600;
  color: var(--text-primary);
}
.cmpd-prod-value {
  font-size: 14px;
  color: var(--text-primary);
  word-break: break-word;
}
.cmpd-prod-link {
  color: #2563eb;
  text-decoration: none;
  word-break: break-all;
}
.cmpd-prod-link:hover { text-decoration: underline; }

/* Notes editor — display renders markdown; edit mode is a contenteditable
   that mirrors the .notes-source styling so the typing experience matches
   the Home tab's Project Notes. We keep the same selector hooks the
   notes-editor.js helpers expect (.notes-source) so its keyboard handlers
   work without modification. */
.cmpd-prod-notes-display {
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.5;
}
.cmpd-prod-notes-display p { margin: 0 0 8px; }
.cmpd-prod-notes-display p:last-child { margin-bottom: 0; }
.cmpd-prod-notes-display ul { margin: 4px 0 8px; padding-left: 22px; }
.cmpd-prod-notes-source {
  min-height: 96px;
  max-height: 320px;
  overflow-y: auto;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  outline: none;
}
.cmpd-prod-notes-source:focus { border-color: var(--text-primary); }
.cmpd-prod-notes-source p { margin: 0 0 8px; }
.cmpd-prod-notes-source p:last-child { margin-bottom: 0; }
.cmpd-prod-notes-source ul { margin: 4px 0 8px; padding-left: 22px; }
.cmpd-prod-notes-source[data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  pointer-events: none;
}

/* PDF widget. Edit mode: dropzone (click or drop) → uploaded chip with a
   filename + remove ✕. Display mode: a long clickable card mirroring the
   pd-card shape from the Documents section so it reads as the same kind of
   object. */
.cmpd-prod-pdf-widget { min-width: 0; }
.cmpd-prod-pdf-dropzone {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border: 1.5px dashed var(--border);
  border-radius: 10px;
  background: var(--bg);
  cursor: pointer;
  color: var(--text-muted);
  font-size: 13px;
  transition: border-color .15s, background .15s, color .15s;
}
.cmpd-prod-pdf-dropzone:hover,
.cmpd-prod-pdf-dropzone.is-dragging {
  border-color: var(--accent);
  background: var(--card-lime);
  color: var(--accent);
}
.cmpd-prod-pdf-dropzone-icon { font-size: 18px; }
.cmpd-prod-pdf-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
}
.cmpd-prod-pdf-chip-icon { font-size: 18px; flex-shrink: 0; }
.cmpd-prod-pdf-chip-name {
  flex: 1; min-width: 0;
  font-size: 14px; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cmpd-prod-pdf-chip-remove {
  background: none; border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 4px 8px;
  border-radius: 6px;
}
.cmpd-prod-pdf-chip-remove:hover { background: var(--border-light); color: var(--text-primary); }
.cmpd-prod-pdf-uploading {
  padding: 14px 16px;
  border: 1.5px dashed var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 13px;
  font-style: italic;
}

/* Content's "(related) appears to the right" fields — text shown inline
   next to a Yes/No pill instead of as an indented sub-row. */
.cmpd-prod-yesno-inline {
  margin-left: 10px;
  font-size: 14px;
  color: var(--text-primary);
  word-break: break-word;
}

/* Brand Logos — multi-image widget. Editor: a dropzone (reuses the PDF
   dropzone styling) plus a vertical list of image chips. Display: a wrap
   of clickable image cards (reuses .cmpd-prod-pdf-display). */
.cmpd-content-logos-widget { display: flex; flex-direction: column; gap: 8px; }
.cmpd-content-logos-list { display: flex; flex-direction: column; gap: 6px; }
.cmpd-content-logos-list:empty { display: none; }
.cmpd-content-logos-display { display: flex; flex-wrap: wrap; gap: 8px; }

/* Display-mode PDF card — clickable, opens the file in a new tab. */
.cmpd-prod-pdf-display {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
  text-decoration: none;
  color: var(--text-primary);
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.cmpd-prod-pdf-display:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transform: translateY(-1px);
}
.cmpd-prod-pdf-display-icon { font-size: 18px; flex-shrink: 0; }
.cmpd-prod-pdf-display-text { display: flex; flex-direction: column; min-width: 0; }
.cmpd-prod-pdf-display-name {
  font-size: 14px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmpd-prod-pdf-display-meta {
  font-size: 12px; color: var(--text-muted); margin-top: 2px;
}

/* Textarea block — full-width label above, body below. Shooting Notes
   uses this so the prose has room to breathe. Display mode preserves
   user line breaks via white-space: pre-wrap. */
.cmpd-prod-textarea-block {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
}
.cmpd-prod-textarea-block:last-child { border-bottom: none; }
.cmpd-prod-textarea-block .cmpd-prod-label { display: block; margin-bottom: 6px; }
.cmpd-prod-textarea-body {
  white-space: pre-wrap;
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.5;
}

/* Editor inputs — match the existing form-control look used elsewhere. */
.cmpd-prod-input, .cmpd-prod-textarea {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 14px;
  background: var(--bg);
  color: var(--text-primary);
  outline: none;
}
.cmpd-prod-input:focus, .cmpd-prod-textarea:focus { border-color: var(--text-primary); }
.cmpd-prod-textarea { resize: vertical; min-height: 80px; }

/* Yes/No pill toggle pair. Neutral by default; active pill takes the
   pill-yes / pill-no palette so the active state reads at a glance and
   matches what the display mode shows. */
.cmpd-prod-yesno { display: inline-flex; gap: 6px; }
.cmpd-prod-yesno-btn {
  background: var(--border-light);
  color: var(--text-muted);
  border: none;
  padding: 4px 14px;
  border-radius: 999px;
  font-family: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.cmpd-prod-yesno-btn:hover { background: var(--border); color: var(--text-primary); }
/* Active states use a colored inset ring + darker text so "selected" reads
   clearly. Without the ring, .is-no's pale linen background was visually
   indistinguishable from the unselected state. */
.cmpd-prod-yesno-btn.is-yes {
  background: #C8D6C2;
  color: #3A5230;
  box-shadow: inset 0 0 0 2px #3A5230;
}
.cmpd-prod-yesno-btn.is-no {
  background: #E8E2D2;
  color: #2A2826;
  box-shadow: inset 0 0 0 2px #9A9388;
}
body.dark-mode .cmpd-prod-yesno-btn.is-yes {
  background: #243A2C;
  color: #90B888;
  box-shadow: inset 0 0 0 2px #90B888;
}
body.dark-mode .cmpd-prod-yesno-btn.is-no {
  background: #2F2920;
  color: #C8C2B6;
  box-shadow: inset 0 0 0 2px #6E685D;
}

@media (max-width: 720px) {
  .cmpd-prod-row { grid-template-columns: 1fr; gap: 4px; }
  .cmpd-prod-row--sub {
    grid-template-columns: 1fr;
    margin-left: 12px;
    padding-left: 10px;
  }
  /* Yes/No rows stay inline even on mobile — the pills are tiny and
     don't need the full row width like text inputs / textareas do.
     Flex (not grid) so label + pill sit left-aligned with a small gap
     between them, instead of grid pushing the pill to the far right. */
  .cmpd-prod-row--yesno {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .cmpd-prod-section { padding: 14px 16px; }
}

/* ============ CM TASKS DRAWER (mobile only) ============
   Tap the Today bottom-nav button while already on any task-list view
   (Today / Tomorrow / Next 7 / Overdue / General) to surface this
   curved drawer. Gives users access to all five views from a single
   bottom-nav slot. Badges share [data-cm-count] with the sidebar so
   they stay in sync via the existing refreshCmSidebar pass. */
.cm-task-drawer-backdrop {
  position: fixed;
  inset: 0;
  bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  background: rgba(0,0,0,0.42);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease-out;
  z-index: 198;
}
.cm-task-drawer-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.cm-task-drawer {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  background: var(--sidebar-bg);
  color: #fff;
  /* Wide horizontal arch — the drawer reads as bowing up from the nav.
     The 50% × 56px pair stretches the curve across the full width
     instead of just rounding the corners like a bubble. */
  border-top-left-radius:  50% 56px;
  border-top-right-radius: 50% 56px;
  padding: 64px 14px 14px;
  box-shadow: 0 -10px 30px rgba(0,0,0,0.32);
  transform: translateY(110%);
  opacity: 0;
  transition: transform .36s cubic-bezier(.22,1.05,.36,1),
              opacity   .22s ease-out;
  z-index: 199;
  pointer-events: none;
}
.cm-task-drawer.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.cm-task-drawer__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border-radius: 12px;
  color: rgba(255,255,255,0.78);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
  opacity: 0;
  transform: translateY(8px);
}
.cm-task-drawer__item + .cm-task-drawer__item { margin-top: 2px; }
.cm-task-drawer.is-open .cm-task-drawer__item {
  animation: cmTaskDrawerIn .32s cubic-bezier(.22,1.05,.36,1) forwards;
}
.cm-task-drawer.is-open .cm-task-drawer__item:nth-child(1) { animation-delay:  60ms; }
.cm-task-drawer.is-open .cm-task-drawer__item:nth-child(2) { animation-delay: 110ms; }
.cm-task-drawer.is-open .cm-task-drawer__item:nth-child(3) { animation-delay: 160ms; }
.cm-task-drawer.is-open .cm-task-drawer__item:nth-child(4) { animation-delay: 210ms; }
.cm-task-drawer.is-open .cm-task-drawer__item:nth-child(5) { animation-delay: 260ms; }
@keyframes cmTaskDrawerIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cm-task-drawer__item:active { background: rgba(255,255,255,0.08); color: #fff; }
.cm-task-drawer__item.is-active {
  background: rgba(160,90,44,0.18);
  color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}
.cm-task-drawer__item svg {
  width: 22px; height: 22px;
  flex-shrink: 0;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.cm-task-drawer__label { flex: 1; }
.cm-task-drawer__count {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.1);
  border-radius: 999px;
  padding: 2px 10px;
  min-width: 22px;
  text-align: center;
}
.cm-task-drawer__count.cm-nav-count-danger { color: #fff; background: var(--danger); }
.cm-task-drawer__count.cm-nav-count-empty,
.cm-task-drawer__count:empty { display: none; }

/* Desktop never sees the drawer — sidebar already shows the five views. */
@media (min-width: 769px) {
  .cm-task-drawer,
  .cm-task-drawer-backdrop { display: none !important; }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 768px) {

  /* Show mobile chrome, hide sidebar */
  .mobile-topbar { display: flex; }
  .mobile-nav    { display: flex; }
  .sidebar       { display: none; }

  /* Prevent iOS Safari auto-zoom when focusing form inputs (only triggers below 16px) */
  input, textarea, select { font-size: 16px !important; }

  /* App shell stacks, content gets top + bottom padding for bars */
  .app-shell { flex-direction: column; }
  .main-content { padding-top: 52px; padding-bottom: 60px; }
  .view { padding: 16px; }

  /* Page headers stack on small screens */
  .page-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .page-header .btn,
  .page-header .btn-lime { align-self: stretch; justify-content: center; }
  .page-header-actions { width: 100%; justify-content: space-between; gap: 8px; }
  .page-header-actions .btn-lime { flex: 1; }

  /* Stat cards: 2 columns on mobile */
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-value  { font-size: 20px; }

  /* Deals grid: single column */
  .deals-grid { grid-template-columns: 1fr; }

  /* Client cards: single column */
  .client-cards-grid { grid-template-columns: 1fr; }

  /* Dashboard section headers stack */
  .dash-section-header { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
  .year-pills { width: 100%; margin-top: 4px; }
  .year-pill  { flex: 1; text-align: center; padding: 6px 8px; }

  /* Search inputs go full width */
  .search-input { min-width: 0; width: 100%; }
  .filters-bar  { flex-direction: column; align-items: stretch; }
  .filter-select { width: 100%; }

  /* Form rows stack */
  .form-row { grid-template-columns: 1fr; gap: 0; }

  /* Modal: slide up from bottom */
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
    height: 100vh;
    height: 100dvh;
  }
  .modal {
    max-width: 100%;
    /* Conservative fallback for browsers without dvh support */
    max-height: 80vh;
    /* iOS 15.4+ / Chrome 108+ — adapts to URL bar */
    max-height: 92dvh;
    border-radius: var(--radius) var(--radius) 0 0;
  }

  /* Deal detail header adjustments */
  .deal-detail-top { flex-direction: column; gap: 12px; }
  .deal-detail-top > div:last-child { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
  .deal-detail-title { font-size: 18px; }
  .deal-totals { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .deal-total-value { font-size: 16px; }

  /* Phase cards */
  .phase-header { flex-wrap: wrap; gap: 8px; }
  .phase-actions { margin-left: 0; }

  /* Tables: horizontal scroll */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 480px; }

  /* Stage tabs scroll horizontally instead of wrapping */
  .stage-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .stage-tabs::-webkit-scrollbar { display: none; }
  .stage-tab { flex-shrink: 0; }

  /* Client card inner stats can wrap a bit tighter */
  .client-card-stats { gap: 12px; }

  /* Deals filter rows stack on mobile */
  .deals-filter-row { flex-direction: column; gap: 6px; }
  .deals-filter-label { padding-top: 0; width: auto; }
  .filter-pills { gap: 5px; }
  .filter-bar { gap: 6px; }
  .filter-btn { padding: 6px 11px; font-size: 12px; }
  .filter-panel { padding: 12px 14px; }
  .section-landing-cards { flex-direction: column; align-items: center; }
  .section-landing-card { width: 100%; max-width: 320px; }
  .section-landing-title { font-size: 20px; margin-bottom: 28px; }

  /* View toggle stays compact */
  .view-toggle-btn { padding: 7px 8px; }

  /* Fee toast above bottom nav */
  .fee-toast { bottom: 72px; right: 12px; left: 12px; max-width: none; }
}

@media (max-width: 400px) {
  .stats-grid { grid-template-columns: 1fr; }
  .deal-totals { grid-template-columns: 1fr; gap: 8px; }
  .deal-total-item { text-align: left; }
}

/* ============ SETTINGS — LANDING ============ */
.settings-menu { display: flex; flex-direction: column; gap: 10px; max-width: 480px; }
.settings-menu-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.settings-menu-card:hover { border-color: var(--text-secondary); box-shadow: var(--shadow); }
.settings-menu-card-icon {
  width: 40px; height: 40px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.settings-menu-card-title { font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.settings-menu-card-desc { font-size: 12px; color: var(--text-muted); }
.settings-menu-card-arrow { margin-left: auto; font-size: 18px; color: var(--text-muted); }

/* ============ SETTINGS — TAG MANAGEMENT ============ */
.settings-tag-list {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.settings-tag-group {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-light);
  transition: background .12s;
}
.settings-tag-group:last-child { border-bottom: none; }
.settings-tag-group:hover { background: #fafbfc; }
.settings-tag-parent {
  /* Width is a range, not fixed. Long category labels (e.g.
     "RIDESHARE/TRANSPORTATION") would overflow a hard 170px column and
     bleed into the children/`+ Add` area. Min keeps short labels
     visually aligned across rows; max keeps even longer ones from
     pushing children into a narrow strip. */
  min-width: 170px;
  max-width: 240px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 20px;
  padding-top: 1px;
}
.settings-tag-parent-name {
  display: inline-block;
  background: #e2e4ec;
  color: #374151;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 6px;
  align-self: flex-start;
  line-height: 1.4;
}
.settings-tag-parent-actions {
  display: none;
  gap: 4px;
}
.settings-tag-group:hover .settings-tag-parent-actions { display: flex; }
.settings-tag-parent-actions button {
  background: none;
  border: none;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  color: var(--text-muted);
  transition: background .1s, color .1s;
}
.settings-tag-parent-actions button:hover { background: var(--border-light); color: var(--text-primary); }
.settings-tag-children {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.settings-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  background: #eef0f7;
  color: #4b5563;
  border: 1px solid #d8dbe8;
}
.settings-tag-actions { display: none; gap: 2px; }
.settings-tag-chip:hover .settings-tag-actions { display: inline-flex; }
.settings-tag-actions button {
  background: none; border: none; cursor: pointer;
  padding: 0 2px; font-size: 12px; color: var(--text-muted);
  line-height: 1;
}
.settings-tag-actions button:hover { color: var(--text-primary); }
.settings-tag-add-chip {
  padding: 4px 10px; border-radius: 6px; font-size: 12px;
  background: none; border: 1px dashed #d0d3e0;
  color: var(--text-muted); cursor: pointer;
  transition: border-color .12s, color .12s;
}
.settings-tag-add-chip:hover { border-color: #9ca3af; color: var(--text-secondary); }

/* ============ TAG PICKER (edit deal modal) ============ */
.tag-picker {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tag-picker-group { display: flex; flex-direction: column; gap: 5px; }
.tag-picker-group-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
}
.tag-picker-subs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.tag-picker-sub-label, .tag-picker-parent-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-secondary);
}
.tag-picker-sub-label:hover, .tag-picker-parent-check:hover { color: var(--text-primary); }
.tag-picker-sub-label input, .tag-picker-parent-check input { width: auto; cursor: pointer; }

/* ============ DASHBOARD PIPELINE ============ */
.dash-pipeline {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  margin-bottom: 24px;
}
.dash-pipeline-col {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dash-pipeline-col-header {
  padding: 14px 16px;
  background: var(--card-dark);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.dash-pipeline-col-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  opacity: .6;
  margin-bottom: 4px;
}
.dash-pipeline-col-total {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1;
}
.dash-pipeline-col-body {
  flex: 1;
  overflow-y: auto;
  max-height: 300px;
  padding: 4px 0;
}
.dash-pipeline-count {
  background: rgba(255,255,255,.18);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  line-height: 1.3;
  flex-shrink: 0;
}
.dash-overdue-btn {
  background: none;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,.45);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
  letter-spacing: .02em;
  font-family: inherit;
  white-space: nowrap;
}
.dash-overdue-btn:hover {
  border-color: rgba(249,115,22,.6);
  color: #f97316;
}
.dash-overdue-btn.active {
  background: rgba(249,115,22,.18);
  border-color: #f97316;
  color: #f97316;
}
.dash-pipeline-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border-light);
  transition: background .1s;
}
.dash-pipeline-row:last-child { border-bottom: none; }
.dash-pipeline-row:hover { background: var(--bg); }
.dash-pipeline-row-main { flex: 1; min-width: 0; }
.dash-pipeline-name {
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-pipeline-client {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}
.dash-pipeline-amount {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 1px;
}

/* ============ DASHBOARD PIE CHART ============ */
.dash-pie-outer {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 24px;
  margin-bottom: 32px;
}
.dash-pie-wrap {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}
.dash-pie-svg {
  width: 200px;
  height: 200px;
  flex-shrink: 0;
}
.dash-pie-legend {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: 4px;
  min-width: 0;
  max-width: 380px;
}
.dash-pie-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.dash-pie-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.dash-pie-legend-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-pie-legend-val {
  color: var(--text-secondary);
  font-weight: 500;
  white-space: nowrap;
}
.dash-pie-legend-pct {
  color: var(--text-muted);
  font-size: 12px;
  min-width: 38px;
  text-align: right;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .dash-pipeline { grid-template-columns: 1fr; }
  .dash-pie-wrap  { flex-direction: column; }
  .dash-pie-svg   { width: 160px; height: 160px; align-self: center; }
}

/* ============ APPEARANCE SETTINGS ============ */
.appearance-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.appearance-card-left { flex: 1; }
.appearance-card-title { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.appearance-card-desc { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.appearance-toggle {
  width: 50px;
  height: 28px;
  border-radius: 999px;
  background: var(--border);
  border: none;
  cursor: pointer;
  position: relative;
  transition: background .2s;
  flex-shrink: 0;
}
.appearance-toggle.on { background: var(--accent); }
.appearance-toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform .2s;
}
.appearance-toggle.on .appearance-toggle-knob { transform: translateX(22px); }

/* ============ DARK MODE ============ */
/* Stone Linen — dark. Warm near-black instead of pure black, cream
   instead of white. Burnt sienna lifted +5% lightness for contrast.
   See code/brand_colors_stone_linen_dark.png. */
body.dark-mode {
  --bg: #1A1612;                /* Page background — warm near-black */
  --sidebar-bg: #1A1612;        /* same as bg — sidebar reads as page */
  --card-bg: #252019;           /* Surface — cards and modals */
  --card-dark: #1A1612;         /* deepest tone for stat-card.dark */
  --card-lime: #3A2920;         /* Primary subtle dark — sienna tint */
  --card-purple: #2D2838;       /* Agent guess subtle dark */
  --card-blue: #2A3438;         /* Cold subtle dark */
  --accent: #B86A3C;            /* Burnt sienna — lifted +5% lightness */
  --accent-dark: #A05A2C;       /* Returns to light-mode primary on press */
  --text-primary: #E8DFCB;      /* Cream — never pure white */
  --text-secondary: #A8A092;    /* Cream secondary */
  --text-muted: #6E685D;        /* Cream tertiary */
  --border: #3A3328;
  --border-light: #2F2920;
  --danger: #E89070;            /* Glowing terracotta — alarm in dark */
  --success: #90B888;           /* Forest sage lifted */
  --warning: #E8B870;
  --stage-lead: #C8C0AC;
  --stage-negotiating: #E8B888;
  --stage-contract: #C8C088;
  --stage-executing: #A8C078;
  --stage-awaiting_invoice: #D8B070;
  --stage-invoiced: #A8B888;
  --stage-collected: #90B888;
  --shadow: 0 1px 3px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 4px 16px rgba(0,0,0,.55);
}

body.dark-mode .btn-primary { background: var(--card-bg); color: var(--text-primary); }
body.dark-mode .btn-primary:hover { background: #2F2920; }
body.dark-mode .btn-outline { border-color: var(--border); color: var(--text-primary); }

body.dark-mode .filter-pill-parent { background: #2a2d38; color: #9ca3af; }
body.dark-mode .filter-pill-parent:hover { background: #30344a; color: var(--text-primary); }
body.dark-mode .filter-pill-parent.active { background: var(--accent); color: #090b0f; }
body.dark-mode .filter-tag-children .filter-pill { background: #1e2230; border-color: #2a2d38; color: #9ca3af; }
body.dark-mode .filter-tag-children .filter-pill:hover { background: #252840; border-color: #2a2d38; color: var(--text-primary); }
body.dark-mode .filter-tag-children .filter-pill.active { background: var(--card-dark); border-color: var(--card-dark); color: #fff; }

body.dark-mode .settings-tag-group:hover { background: rgba(255,255,255,.03); }
body.dark-mode .settings-tag-parent-name { background: #2a2d38; color: #9ca3af; }
body.dark-mode .settings-tag-chip { background: #1e2230; border-color: #2a2d38; color: #9ca3af; }
body.dark-mode .settings-tag-add-chip { border-color: #2a2d38; color: var(--text-muted); }
body.dark-mode .settings-tag-add-chip:hover { border-color: #6b7280; color: var(--text-secondary); }

body.dark-mode .error-msg { background: #3b1010; color: #fca5a5; }
body.dark-mode .pill-yes    { background: #243A2C; color: #90B888; }
body.dark-mode .pill-no     { background: #2F2920; color: #6E685D; }
body.dark-mode .pill-mm     { background: #4A3520; color: #E8B888; }
body.dark-mode .pill-client { background: #2D2838; color: #B0A8D0; }

/* Dark-mode stage badges — saturation up so badges lift off the dark
   surface. From brand dark guide. */
/* Dark mode stage badges (refreshed 2026-05-08 alongside the light-mode set). */
body.dark-mode .badge-lead             { background: #3A352B; color: #C8C0AC; }
body.dark-mode .badge-negotiating      { background: #4A3520; color: #E8B888; }
body.dark-mode .badge-terms_agreed     { background: #4A4220; color: #E8D080; }
body.dark-mode .badge-contract_signed  { background: #3D3D24; color: #C8C880; }
body.dark-mode .badge-executing        { background: #2F3A24; color: #A8C078; }
body.dark-mode .badge-awaiting_invoice { background: #4D2F20; color: #E8A070; }
body.dark-mode .badge-invoiced         { background: #2D3520; color: #A8B888; }
body.dark-mode .badge-collected        { background: #243A2C; color: #90B888; }
body.dark-mode .badge-terminated       { background: #3A2D28; color: #C89888; }
body.dark-mode .badge-lost             { background: #3A2D28; color: #C89888; }

body.dark-mode .stage-tab { background: var(--card-bg); border-color: var(--border); color: var(--text-secondary); }
body.dark-mode .stage-tab:hover { border-color: var(--text-secondary); color: var(--text-primary); }
body.dark-mode .stage-tab[data-stage="all"].active             { background: var(--card-dark); color: var(--text-primary); }
body.dark-mode .stage-tab[data-stage="lead"].active            { background: #3A352B; color: #C8C0AC; }
body.dark-mode .stage-tab[data-stage="negotiating"].active     { background: #4A3520; color: #E8B888; }
body.dark-mode .stage-tab[data-stage="contract_signed"].active { background: #3D3A24; color: #C8C088; }
body.dark-mode .stage-tab[data-stage="executing"].active       { background: #2F3A24; color: #A8C078; }
body.dark-mode .stage-tab[data-stage="invoiced"].active        { background: #2D3520; color: #A8B888; }
body.dark-mode .stage-tab[data-stage="collected"].active       { background: #243A2C; color: #90B888; }
body.dark-mode .stage-tab[data-stage="terminated"].active      { background: #3A2D28; color: #C89888; }
body.dark-mode .stage-tab .tab-count { background: rgba(255,255,255,.08); }

body.dark-mode .stage-pill-lead.active             { background: #3A352B; border-color: #3A352B; color: #C8C0AC; }
body.dark-mode .stage-pill-negotiating.active      { background: #4A3520; border-color: #4A3520; color: #E8B888; }
body.dark-mode .stage-pill-contract_signed.active  { background: #3D3A24; border-color: #3D3A24; color: #C8C088; }
body.dark-mode .stage-pill-executing.active        { background: #2F3A24; border-color: #2F3A24; color: #A8C078; }
body.dark-mode .stage-pill-executing.active .filter-pill-count { background: rgba(255,255,255,.08); color: #A8C078; }
body.dark-mode .stage-pill-awaiting_invoice.active { background: #3D3220; border-color: #3D3220; color: #D8B070; }
body.dark-mode .stage-pill-invoiced.active         { background: #2D3520; border-color: #2D3520; color: #A8B888; }
body.dark-mode .stage-pill-collected.active        { background: #243A2C; border-color: #243A2C; color: #90B888; }
body.dark-mode .stage-pill-terminated.active       { background: #3A2D28; border-color: #3A2D28; color: #C89888; }

body.dark-mode .deal-card-arrow { background: var(--bg); }
body.dark-mode .section-landing-card { background: var(--card-bg); border-color: var(--border); }
body.dark-mode .section-landing-card:hover { border-color: var(--accent); }
body.dark-mode .section-landing-card--soon:hover { border-color: var(--text-muted); }
body.dark-mode .section-landing-icon { background: var(--bg); color: var(--text-secondary); }
body.dark-mode .section-landing-card:not(.section-landing-card--soon):hover .section-landing-icon { background: var(--accent); color: #090b0f; }
body.dark-mode .section-landing-badge { background: var(--bg); color: var(--text-muted); }

/* ── Client breakdown modal table ─────────────────────────────── */
.bd-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.bd-th {
  padding: 7px 14px 7px 0;
  text-align: right;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
  cursor: help;
}
.bd-th:first-child { text-align: left; }
.bd-name {
  padding: 8px 14px 8px 0;
  font-weight: 500;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-light);
}
.bd-cell {
  padding: 8px 14px 8px 0;
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-light);
  font-variant-numeric: tabular-nums;
}
.bd-table tfoot td { border-bottom: none; border-top: 2px solid var(--border); padding-top: 10px; }
.bd-table tbody tr:hover td { background: var(--border-light); }

/* ── Client stats cards ───────────────────────────────────────── */
.cs-wrap {
  margin-bottom: 16px;
}
.cs-year-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.cs-year-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 60px;
}
.cs-year-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.cs-year-pill {
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, border-color .15s, color .15s;
}
.cs-year-pill:hover { border-color: var(--accent); color: var(--text-primary); }
.cs-year-pill.active { background: var(--accent); border-color: var(--accent); color: #111318; font-weight: 700; }
.cs-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.cs-loading {
  font-size: 13px;
  color: var(--text-muted);
  padding: 10px 0;
}
.cs-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
}
.cs-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.cs-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.cs-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
}
@media (max-width: 600px) {
  .cs-cards { grid-template-columns: repeat(2, 1fr); }
}
body.dark-mode .cs-card { background: var(--card-bg); border-color: var(--border); }
body.dark-mode .cs-year-pill { background: var(--card-bg); border-color: var(--border); color: var(--text-secondary); }
body.dark-mode .cs-year-pill.active { background: var(--accent); border-color: var(--accent); color: #090b0f; }

/* ── Expenses ─────────────────────────────────────────────────── */
.expenses-section {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border-light);
}
.expense-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.expense-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.expense-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
}
.expense-date {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.expense-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 6px;
}
.expense-amount {
  font-weight: 700;
  font-size: 16px;
  color: var(--text-primary);
  white-space: nowrap;
  padding-top: 2px;
}
.expense-files {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border-light);
}
.expense-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 11px;
  color: var(--text-secondary);
  text-decoration: none;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: border-color .15s, color .15s;
}
.expense-file-chip:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}
.expense-file-remove {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  color: var(--text-muted);
  padding: 0 2px;
  line-height: 1;
  margin-left: -2px;
}
.expense-file-remove:hover { color: #ef4444; }

body.dark-mode .expense-card { background: var(--card-bg); border-color: var(--border); }
body.dark-mode .expense-file-chip { background: var(--bg); border-color: var(--border); }

/* ============================================================
   BUSINESS DEVELOPMENT — Pipeline view
   ============================================================ */

/* Pipeline reuses .page-header + .page-subtitle from the shared header
   convention used by Today, Dashboard, etc. — no BD-specific header rules. */

/* Stat cards: 4 across on desktop, 2 across on tablet, stacked on mobile */
.bd-stat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.bd-stat-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.bd-stat-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.bd-stat-count {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}
.bd-stat-card.bd-stat-hot .bd-stat-count { color: #d85a30; }
.bd-stat-sub { font-size: 12px; color: var(--text-muted); }

/* Group-by + temperature legend row */
.bd-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.bd-group-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.bd-group-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-right: 4px;
}
/* Group-by chips reuse the existing .year-pill component — no BD-specific
   chip styles. Active = dark bg + accent text, matching dashboards/year filters. */

.bd-temp-legend {
  display: flex;
  gap: 4px;
}
.bd-temp-legend-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--card-bg);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all .15s;
}
.bd-temp-legend-pill:hover { border-color: var(--text-secondary); color: var(--text-primary); }
.bd-temp-legend-pill.active {
  background: var(--card-dark);
  border-color: var(--card-dark);
  color: var(--accent);
}
.bd-temp-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.bd-temp-legend-pill.bd-temp-hot  .bd-temp-dot { background: #d85a30; }
.bd-temp-legend-pill.bd-temp-warm .bd-temp-dot { background: #ef9f27; }
.bd-temp-legend-pill.bd-temp-cold .bd-temp-dot { background: #3c5c82; }
.bd-temp-count { color: var(--text-muted); font-weight: 500; }
.bd-temp-legend-pill.active .bd-temp-count { color: var(--card-bg); opacity: .7; }

/* Stage card (Negotiating / Lead block) */
.bd-stage-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
  overflow: hidden;
}
.bd-stage-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border-light);
}
.bd-stage-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.bd-stage-sub {
  font-size: 13px;
  color: var(--text-muted);
}

/* Table grid: Project | Brand | Agency/Source | Client | Value | Temp | Status/Age */
.bd-table { display: flex; flex-direction: column; }
.bd-row {
  display: grid;
  grid-template-columns: minmax(180px, 2fr) 1fr 1.2fr 1fr 90px 80px 100px;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  transition: background .12s;
  font-size: 13px;
}
.bd-row:last-child { border-bottom: none; }
.bd-row:hover:not(.bd-row-head) { background: var(--border-light); }
/* Center every column except the first (Project) — matches the table
   convention used on the Finance Projects list. */
.bd-row > *:not(:first-child) { text-align: center; }
.bd-row-head {
  cursor: default;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: 10px 20px;
  background: var(--border-light);
  border-bottom: 1px solid var(--border);
}
.bd-row-head:hover { background: var(--border-light); }
.bd-cell-deal { min-width: 0; }
.bd-deal-name {
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Tag pill row under the project name (matches Finance Projects). */
.bd-deal-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.bd-cell-value { font-weight: 600; color: var(--text-primary); }
.bd-cell-last { color: var(--text-secondary); }
.bd-muted { color: var(--text-muted); }

/* Temperature pill (in row) */
.bd-temp-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
}
.bd-temp-pill.bd-temp-hot  { background: #faece7; color: #993c1d; }
.bd-temp-pill.bd-temp-warm { background: #faeeda; color: #854f0b; }
.bd-temp-pill.bd-temp-cold { background: #e5edf5; color: #3c5c82; }

/* Group-by sub-headers */
.bd-group-header {
  padding: 10px 20px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--border-light);
  border-bottom: 1px solid var(--border-light);
}
.bd-group-count { color: var(--text-muted); font-weight: 500; }

.bd-table-empty {
  padding: 32px 20px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}

/* "Show N more" / "Show less" footer on stage tables. */
.bd-show-more {
  text-align: center;
  padding: 12px 20px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  border-top: 1px solid var(--border-light);
  transition: color .12s, background .12s;
  user-select: none;
}
.bd-show-more:hover {
  color: var(--text-primary);
  background: var(--border-light);
}

/* Lost table: same 6-col grid as Pipeline but resized for the
   Reason / Lost date / Value columns instead of Temp / Status. */
.bd-lost-table .bd-row {
  grid-template-columns: minmax(180px, 2fr) 1.4fr 1fr 1.2fr 120px 100px;
}

/* Mobile: collapse the table to a card-stack so it stays usable.
   Pipeline row order: 1=Project 2=Brand 3=Agency 4=Client 5=Value 6=Temp 7=Status/Age */
@media (max-width: 720px) {
  .bd-stat-cards { grid-template-columns: 1fr 1fr; }
  .bd-row {
    grid-template-columns: 1fr auto;
    gap: 6px 12px;
    padding: 14px 16px;
    text-align: left;
  }
  .bd-row > *:not(:first-child) { text-align: left; }
  .bd-row-head { display: none; }
  .bd-cell-deal  { grid-column: 1 / 3; grid-row: 1; }
  .bd-row > div:nth-child(2)  { /* brand */     grid-column: 1 / 3; grid-row: 2; font-size: 12px; color: var(--text-secondary); }
  .bd-row > div:nth-child(3)  { /* agency */    grid-column: 1 / 3; grid-row: 3; font-size: 12px; color: var(--text-secondary); }
  .bd-row > div:nth-child(4)  { /* client */    grid-column: 1 / 3; grid-row: 4; font-size: 12px; color: var(--text-secondary); }
  .bd-cell-value { grid-column: 1 / 2; grid-row: 5; font-weight: 700; }
  .bd-row > div:nth-child(6)  { /* temp pill */ grid-column: 2 / 3; grid-row: 5; text-align: right; }
  .bd-row > div:nth-child(7)  { /* status/age */ grid-column: 1 / 3; grid-row: 6; font-size: 12px; color: var(--text-secondary); }
  .bd-controls { gap: 8px; }
  .bd-temp-legend { flex-wrap: wrap; }

  /* Lost table (still 6 cols: Project | Agency | Client | Reason | Lost date | Value) */
  .bd-lost-table .bd-row > div:nth-child(2)  { /* agency */    grid-column: 1 / 3; grid-row: 2; }
  .bd-lost-table .bd-row > div:nth-child(3)  { /* client */    grid-column: 1 / 3; grid-row: 3; }
  .bd-lost-table .bd-row > div:nth-child(4)  { /* reason */    grid-column: 1 / 3; grid-row: 4; }
  .bd-lost-table .bd-row > div:nth-child(5)  { /* lost date */ grid-column: 1 / 2; grid-row: 5; }
  .bd-lost-table .bd-row > div:nth-child(6)  { /* value */     grid-column: 2 / 3; grid-row: 5; text-align: right; font-weight: 700; }
}
@media (max-width: 480px) {
  .bd-stat-cards { grid-template-columns: 1fr; }
}

/* Dark mode */
body.dark-mode .bd-stat-card,
body.dark-mode .bd-stage-card { background: var(--card-bg); border-color: var(--border); }
body.dark-mode .bd-row-head,
body.dark-mode .bd-group-header { background: var(--bg); }
body.dark-mode .bd-chip.active { background: var(--accent); color: var(--card-dark); }
body.dark-mode .bd-temp-legend-pill.active { background: var(--accent); color: var(--card-dark); border-color: var(--accent); }

/* ============================================================
   BUSINESS DEVELOPMENT — New Deal modal
   ============================================================ */

.bd-new-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  padding: 24px;
}

.bd-new-modal {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  width: 100%;
  max-width: 720px;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.bd-new-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border-light);
}
.bd-new-head h2 { margin: 0; font-size: 18px; font-weight: 700; }
.bd-new-sub { margin: 4px 0 0; font-size: 12px; color: var(--text-muted); }
.bd-new-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  color: var(--text-muted);
  transition: background .12s, color .12s;
}
.bd-new-close:hover { background: var(--border-light); color: var(--text-primary); }

.bd-new-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 24px 8px;
}

.bd-new-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 16px 0 10px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.bd-new-section-label:first-child { margin-top: 0; }
.bd-section-help {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
}

.bd-new-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}
.bd-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bd-field-full { grid-column: 1 / -1; }
.bd-field-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}
.bd-field-help {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}
.bd-req { color: var(--danger); }

.bd-input {
  width: 100%;
  font-family: inherit;
  font-size: 13px;
  padding: 8px 10px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -webkit-appearance: none;
  appearance: none;
}
.bd-input:focus {
  outline: none;
  border-color: var(--text-primary);
}
.bd-input:disabled {
  background: var(--border-light);
  color: var(--text-muted);
  cursor: not-allowed;
}
.bd-textarea {
  resize: vertical;
  min-height: 60px;
  font-family: inherit;
}

.bd-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
}
.bd-toggle input { margin: 0; }
.bd-no-agency-row { margin-top: 6px; }

.bd-temp-picker {
  display: flex;
  gap: 6px;
}
.bd-temp-choose {
  flex: 1;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.bd-temp-choose:hover { background: var(--border-light); }
.bd-temp-choose.bd-temp-hot.active  { background: #faece7; color: #993c1d; border-color: #f5d3c5; }
.bd-temp-choose.bd-temp-warm.active { background: #faeeda; color: #854f0b; border-color: #f3dfb8; }
.bd-temp-choose.bd-temp-cold.active { background: #e5edf5; color: #3c5c82; border-color: #c8d8eb; }

/* Email-paste callout */
.bd-paste-callout {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  background: #fff8e1;
  border: 1px solid #f5e3a8;
  margin-bottom: 14px;
}
body.dark-mode .bd-paste-callout { background: rgba(245, 227, 168, .08); border-color: rgba(245, 227, 168, .3); }
.bd-paste-icon { color: #8a6d12; flex-shrink: 0; }
.bd-paste-text { flex: 1; min-width: 0; }
.bd-paste-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.bd-paste-sub   { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.bd-paste-area { margin-bottom: 14px; }
.bd-paste-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}
.btn-sm { padding: 5px 12px; font-size: 12px; }

/* Phases list */
.bd-phases { display: flex; flex-direction: column; gap: 6px; }
.bd-phase-row {
  display: grid;
  grid-template-columns: 1.5fr 0.8fr 0.9fr 28px;
  gap: 6px;
  align-items: center;
}
.bd-ph-remove {
  background: none;
  border: none;
  font-size: 16px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bd-ph-remove:hover { background: var(--border-light); color: var(--danger); }
.bd-add-phase { margin-top: 8px; }
.bd-phases-total {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  text-align: right;
}
.bd-phases-total strong { color: var(--text-primary); font-weight: 700; }

/* ============================================================
   BUSINESS DEVELOPMENT — Project Detail page
   ============================================================ */

.bdpd-header {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 16px;
}
.bdpd-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.bdpd-header-titles { min-width: 0; flex: 1; }
.bdpd-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.bdpd-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  cursor: text;
}
.bdpd-title:hover { background: var(--border-light); border-radius: 4px; padding: 0 4px; margin: 0 -4px; }
.bdpd-subtitle {
  margin-top: 4px;
  font-size: 13px;
  color: var(--text-muted);
}
.bdpd-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Stat strip */
.bdpd-stat-strip {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border-light);
}
.bdpd-stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bdpd-stat-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.bdpd-stat-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

/* Tabs */
.bdpd-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.bdpd-tab {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  cursor: pointer;
  margin-bottom: -1px;
}
.bdpd-tab:hover { color: var(--text-primary); }
.bdpd-tab.active {
  color: var(--text-primary);
  border-bottom-color: var(--text-primary);
}

.bdpd-tab-body { padding-bottom: 24px; }

/* Overview key/value grid */
.bdpd-overview-grid {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.bdpd-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-light);
  min-height: 44px;
}
.bdpd-row:last-child { border-bottom: none; }
.bdpd-row-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}
.bdpd-row-value {
  font-size: 13px;
  color: var(--text-primary);
  word-break: break-word;
}
.bdpd-row-value.is-editable {
  cursor: pointer;
  border-radius: 4px;
  padding: 4px 6px;
  margin: -4px -6px;
}
.bdpd-row-value.is-editable:hover { background: var(--border-light); }
.bdpd-empty { color: var(--text-muted); font-style: italic; }
.bdpd-edit-input { width: 100%; }
.bdpd-edit-stack { display: flex; flex-direction: column; gap: 8px; }
.bdpd-edit-actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: 4px; }
.bdpd-temp-edit {
  display: flex;
  gap: 6px;
}

/* Phases section */
.bdpd-phases-section {
  margin-top: 16px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
}
.bdpd-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.bdpd-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}
.bdpd-section-sub {
  font-size: 12px;
  color: var(--text-muted);
}
.bdpd-section-sub strong { color: var(--text-primary); }
.bdpd-phase-row {
  display: grid;
  grid-template-columns: 1.6fr 0.9fr 1fr 28px 28px;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
}
.bdpd-ph-save, .bdpd-ph-remove {
  background: none;
  border: none;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--text-muted);
}
.bdpd-ph-save { color: var(--success); }
.bdpd-ph-save:hover { background: rgba(34, 197, 94, .12); }
.bdpd-ph-remove:hover { color: var(--danger); background: rgba(239, 68, 68, .08); }
.bdpd-empty-block {
  font-size: 12px;
  color: var(--text-muted);
  padding: 16px 0 8px;
  text-align: center;
}
.bdpd-add-phase { margin-top: 8px; }

.bdpd-footer-note {
  font-size: 11px;
  color: var(--text-muted);
  text-align: right;
  margin-top: 12px;
}

/* Lost-state banner inside the project detail header */
.bdpd-lost-banner {
  margin-top: 18px;
  padding: 12px 16px;
  background: #fdecea;
  border: 1px solid #f5c2bd;
  border-radius: var(--radius-sm);
}
body.dark-mode .bdpd-lost-banner { background: rgba(220, 38, 38, .08); border-color: rgba(220, 38, 38, .25); }
.bdpd-lost-banner-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
}
.bdpd-lost-banner-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: #c0392b;
  color: #fff;
  padding: 2px 8px;
  border-radius: 999px;
}
.bdpd-lost-banner-reason { font-weight: 600; color: #7a1810; }
body.dark-mode .bdpd-lost-banner-reason { color: #ffb3a8; }
.bdpd-lost-banner-date   { color: var(--text-muted); }
.bdpd-lost-banner-note   {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Activity timeline */
.bdpd-activity {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 0;
}
.bdpd-activity-item {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-light);
}
.bdpd-activity-item:last-child { border-bottom: none; }
.bdpd-activity-dot {
  width: 8px; height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--text-muted);
}
.bdpd-activity-dot.bdpd-dot-create { background: var(--success); }
.bdpd-activity-dot.bdpd-dot-update { background: var(--warning); }
.bdpd-activity-dot.bdpd-dot-delete { background: var(--danger); }
.bdpd-activity-summary {
  font-size: 13px;
  color: var(--text-primary);
}
.bdpd-activity-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Mobile */
@media (max-width: 720px) {
  .bdpd-header-top { flex-direction: column; align-items: stretch; }
  .bdpd-header-actions { justify-content: flex-end; }
  .bdpd-stat-strip { grid-template-columns: 1fr; gap: 10px; }
  .bdpd-row { grid-template-columns: 1fr; gap: 4px; padding: 10px 16px; }
  .bdpd-phase-row { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 6px; }
  .bdpd-phase-row > input[data-bdpd-ph="label"] { grid-column: 1 / 3; }
  .bdpd-phase-row > .bdpd-ph-save,
  .bdpd-phase-row > .bdpd-ph-remove { grid-row: 2; }
}

/* Dark mode */
body.dark-mode .bdpd-header,
body.dark-mode .bdpd-overview-grid,
body.dark-mode .bdpd-phases-section,
body.dark-mode .bdpd-activity { background: var(--card-bg); border-color: var(--border); }

/* Tag picker (reuses .filter-btn / .filter-panel / .filter-panel-tags) */
.bd-tag-picker-wrap { display: block; }
.bd-tag-picker-wrap .filter-btn { width: auto; }
.bd-tag-panel { margin-top: 8px; }
.bd-tag-empty {
  font-size: 12px;
  color: var(--text-muted);
  padding: 8px 0;
}

/* Footer */
.bd-new-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 24px;
  border-top: 1px solid var(--border-light);
  background: var(--card-bg);
  position: sticky;
  bottom: 0;
}
.bd-new-counter { font-size: 11px; color: var(--text-muted); }
.bd-new-actions { display: flex; gap: 8px; }

/* Mobile: full-screen modal, single-column grid */
@media (max-width: 720px) {
  .bd-new-overlay { padding: 0; }
  .bd-new-modal {
    max-width: 100%;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
  }
  .bd-new-grid { grid-template-columns: 1fr; }
  .bd-phase-row {
    grid-template-columns: 1fr 28px;
    grid-template-rows: auto auto;
    gap: 6px;
  }
  .bd-phase-row .bd-ph-label   { grid-column: 1 / 2; grid-row: 1; }
  .bd-phase-row .bd-ph-remove  { grid-column: 2 / 3; grid-row: 1; }
  .bd-phase-row .bd-ph-value   { grid-column: 1 / 2; grid-row: 2; }
  .bd-phase-row .bd-ph-date    { grid-column: 2 / 3; grid-row: 2; width: auto; }
  .bd-new-head     { padding: 16px 16px 12px; }
  .bd-new-body     { padding: 12px 16px 8px; }
  .bd-new-footer   { padding: 12px 16px; }
}

/* Dark mode */
body.dark-mode .bd-new-modal { background: var(--card-bg); }
body.dark-mode .bd-input { background: var(--bg); border-color: var(--border); }
body.dark-mode .bd-input:disabled { background: var(--card-bg); }
body.dark-mode .bd-temp-choose { background: var(--bg); border-color: var(--border); }
body.dark-mode .bd-new-footer { border-color: var(--border); }

/* ============================================================
   BD Pipeline (Phase B) — re-uses the app's existing page-header,
   view-toggle, and pill conventions to stay visually consistent
   with Finance Clients and CM Projects pages.
   ============================================================ */

.bd-filter-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Phase C — exclusivity conflict warning. Loud red badge so the
   conflict can't be missed at a glance; click opens the rich popover
   below with the specific reason + dates. */
.excl-conflict-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #C8503A;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 3px 8px 3px 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  /* Single baseline for icon + text. Without this, the ⚠ glyph's
     intrinsic line-height pushes it off-center relative to the
     uppercase label even under align-items:center. */
  line-height: 1;
  cursor: pointer;
  margin-right: 8px;
  vertical-align: 1px;
  box-shadow: 0 1px 2px rgba(0,0,0,.18);
  transition: background .12s, transform .12s;
}
.excl-conflict-badge:hover {
  background: #A04030;
  transform: translateY(-1px);
}
.excl-conflict-badge-icon,
.excl-conflict-badge-text {
  display: inline-block;
  font-family: inherit;
  line-height: 1;
}

/* Click-to-show popover. Pinned to body, positioned by JS, dismissed
   on outside click or Escape. Wider than a native title can be, with
   real HTML formatting so the conflict reason + dates read clearly. */
.excl-conflict-pop {
  position: fixed;
  z-index: 1400;
  background: var(--card-bg, #FFFFFF);
  border: 1px solid var(--border, #E5DFD0);
  border-left: 4px solid #C8503A;
  border-radius: 8px;
  padding: 14px 16px 12px;
  width: 360px;
  max-width: calc(100vw - 16px);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.excl-conflict-pop-header {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #C8503A;
  margin-bottom: 10px;
}
.excl-conflict-link {
  color: var(--accent, #A05A2C);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  cursor: pointer;
}
.excl-conflict-link:hover {
  color: var(--accent-dark, #7d4521);
  text-decoration-thickness: 2px;
}
body.dark-mode .excl-conflict-pop { background: var(--card-bg); }
.bd-filter-chip-wrap { position: relative; }

/* Filter chips share the view-toggle-btn shape so they sit naturally
   alongside it. Inactive state matches view-toggle-btn idle (light bg).
   Active state matches view-toggle-btn.active (dark bg + sienna text). */
.bd-filter-chip {
  background: var(--card-bg);
  border: none;
  color: var(--text-primary);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .15s, color .15s;
  white-space: nowrap;
  text-transform: capitalize;
}
.bd-filter-chip:hover { background: var(--border-light); }
.bd-filter-chip.is-active {
  background: var(--card-dark);
  color: var(--accent);
  font-weight: 600;
}
.bd-filter-chip-arrow { font-size: 9px; opacity: .6; }
.bd-filter-chip-clear {
  background: transparent;
  color: var(--text-muted, #A8A39A);
  font-size: 12px;
}
.bd-filter-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  background: #FFFFFF;
  border: 1px solid var(--border, #E5DFD0);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  min-width: 220px;
  max-width: 320px;
  max-height: 360px;
  display: flex;
  flex-direction: column;
}
.bd-filter-dropdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border, #E5DFD0);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted, #A8A39A);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.bd-filter-dropdown-clear {
  background: none;
  border: none;
  color: var(--accent, #A05A2C);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.bd-filter-dropdown-options {
  overflow-y: auto;
  padding: 4px 0;
}
.bd-filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
}
.bd-filter-option:hover { background: var(--surface-2, #F7F2E5); }
.bd-filter-option input { margin: 0; cursor: pointer; }
.bd-filter-option.is-on { background: var(--accent-soft, rgba(160,90,44,.06)); }
.bd-filter-dropdown-empty {
  padding: 12px;
  font-size: 12px;
  color: var(--text-muted, #A8A39A);
  text-align: center;
}
/* Search input pinned above the options list inside a chip dropdown.
   Sits between the header and the options so the typeahead is always
   reachable without scrolling. */
.bd-filter-dropdown-search {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border, #E5DFD0);
}
.bd-filter-dropdown-search-input {
  width: 100%;
  padding: 6px 8px;
  font-size: 13px;
  border: 1px solid var(--border, #E5DFD0);
  border-radius: 4px;
  background: var(--card-bg);
  color: var(--text-primary);
  outline: none;
}
.bd-filter-dropdown-search-input:focus { border-color: var(--accent, #A05A2C); }
/* Section divider between active and inactive in the Clients chip. */
.bd-filter-dropdown-divider {
  padding: 8px 12px 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted, #A8A39A);
  text-transform: uppercase;
  letter-spacing: .04em;
  border-top: 1px solid var(--border, #E5DFD0);
  margin-top: 4px;
}
/* Tags chip uses the shared pill-tag picker; pills want more horizontal
   room than a checkbox list, so widen the dropdown when this body class
   is present. */
.bd-filter-dropdown-pillbody { padding: 8px 10px; }
.bd-filter-chip-wrap.is-open .bd-filter-dropdown:has(.bd-filter-dropdown-pillbody) {
  max-width: 460px;
  min-width: 320px;
}
/* Bottom toggle row, mirrors fz-combo-toggle-row. */
.bd-filter-dropdown-toggle {
  padding: 8px 12px;
  font-size: 12px;
  color: var(--accent, #A05A2C);
  border-top: 1px solid var(--border, #E5DFD0);
  cursor: pointer;
  text-align: center;
  user-select: none;
}
.bd-filter-dropdown-toggle:hover { background: var(--surface-2, #F7F2E5); }

/* BD priority pills — kept because Priority needs visible color coding.
   Tag pills use the existing app-wide `.tag` class (subtle muted style). */
.pill-priority-high   { background: #F0D8C8; color: #8C3F1A; }
.pill-priority-medium { background: #F0E0C8; color: #8C601A; }
.pill-priority-low    { background: #DCE3D8; color: #4F6444; }

/* BD Pipeline stage sections — one per stage. Stage title row and the
   column-header row share the same background so they read as one
   continuous header strip. */
.bd-stage-section { margin-bottom: 14px; }

/* Title row spans all columns. Keep the <th> as a real table cell so its
   background reaches the right edge — flex layout for title + bubble lives
   on an inner div, not the th itself. */
.bd-stage-toprow > th {
  background: var(--border-light);
  padding: 12px 16px 6px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-primary);
}
.bd-stage-toprow-inner {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Stretching click target — fills the rest of the title row. Clicking
   anywhere in this region toggles the stage's collapsed state. */
.bd-stage-toprow-clickspace {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: none;
  border: none;
  padding: 4px 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  color: var(--text-muted);
  height: 100%;
  align-self: stretch;
}
.bd-stage-toprow-clickspace:hover .bd-collapse-chevron { color: var(--text-secondary); }
.bd-collapse-chevron {
  font-size: 12px;
  transition: transform .15s;
}
.bd-stage-section.is-collapsed .bd-collapse-chevron { transform: rotate(-90deg); }
.bd-stage-section.is-collapsed .bd-stage-colrow { display: none; }
.bd-stage-section.is-collapsed tbody { display: none; }

/* Force identical column widths across every stage table so rows line up
   visually even though each stage has its own <table>. Cells wrap on word
   boundaries (multi-creator names like "Abel Campuzano, Alex Ernst" can
   take a second line instead of pushing other columns off the right). */
.bd-stage-table { table-layout: fixed; }
.bd-stage-table tbody td {
  word-wrap: break-word;
  overflow-wrap: break-word;
  vertical-align: middle;
}
.bd-stage-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--text-primary);
  line-height: 1.2;
}
.bd-stage-count-bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Fixed square-ish dimensions so a single digit sits truly centered.
     line-height:1 + equal padding kills the natural digit baseline lean. */
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  background: var(--card-dark);
  color: var(--card-bg);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

/* Tighten the gap between the title row and the column-header row so they
   visually belong to the same header strip. */
.bd-stage-colrow > th {
  padding-top: 6px;
}

.bd-stage-empty-cell {
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
  padding: 14px;
}

/* ============ NOTES EDITOR ============
   Inline markdown-backed notes editor used on every project detail
   page (Finance / CM / BD). Click the .notes-display to swap to the
   <textarea> source view; blurring the textarea saves + re-renders.
*/
.notes-editor { position: relative; min-height: 60px; }
.notes-display {
  cursor: text;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-primary);
  background: transparent;
  transition: background .12s, border-color .12s;
  min-height: 38px;
}
.notes-display:hover { background: var(--border-light); border-color: var(--border-light); }
.notes-display p { margin: 0 0 6px; }
.notes-display p:last-child { margin-bottom: 0; }
.notes-display ul.notes-list { margin: 4px 0 8px 22px; padding: 0; }
.notes-display ul.notes-list li { margin: 2px 0; }
.notes-display .notes-blank { height: 10px; }
.notes-display .notes-empty {
  color: var(--text-muted);
  font-style: italic;
  margin: 0;
}
.notes-source {
  /* Contenteditable WYSIWYG view — same vertical rhythm as .notes-display
     so swapping from display→edit doesn't shift content. */
  width: 100%;
  min-height: 80px;
  padding: 12px 14px;
  border: 1.5px solid var(--accent);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-primary);
  background: var(--card-bg);
  outline: none;
  box-sizing: border-box;
  /* JS sets max-height + overflow on autogrow. */
}
.notes-source p { margin: 0 0 6px; }
.notes-source p:last-child { margin-bottom: 0; }
.notes-source ul { margin: 4px 0 8px 22px; padding: 0; }
.notes-source ul li { margin: 2px 0; }
/* Empty-state placeholder for the contenteditable. The :empty selector
   doesn't fire when the editor has a stray <br> or <p><br></p>, so we
   target both shapes. */
.notes-source:empty::before,
.notes-source:has(> p:only-child:empty)::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  font-style: italic;
  pointer-events: none;
}

/* Stage-level offer total — sums each section's Offer column, sits as
   muted subtext after the count bubble. Updates with filters since the
   whole pipeline re-renders. */
.bd-stage-offer-total {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  margin-left: 2px;
}

/* Dark mode — filter-dropdown background tweak; the rest inherits. */
body.dark-mode .bd-filter-dropdown { background: var(--card-bg); }
body.dark-mode .bd-stage-count-bubble {
  background: var(--card-bg);
  color: var(--text-primary);
}

/* ============================================================
   BD project detail (Phase B4)
   Reuses cmpd-* shell + cm-card-section. These styles are only
   for the small bits unique to BD detail (label/value rows and
   inline text blocks inside sections).
   ============================================================ */
.bdpd-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.bdpd-section-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}
.bdpd-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px 20px;
}

/* Two cm-card-sections sharing one row on the BD project detail page
   (Exclusivity + Tasks). 50/50 split + inline-collapsed Exclusivity
   detail rows so both cards stay roughly the same compact height
   (header + 2 lines of content). Stacks below 720px. */
.bdpd-side-by-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin-bottom: 18px;
}
.bdpd-side-by-side > .cm-card-section { margin-bottom: 0; }

/* Inside the side-by-side wrapper, Exclusivity's detail rows display
   inline as "LABEL: value" pairs that wrap as space allows — keeps the
   card short instead of stacking each field on its own row. Outside
   the wrapper, .bdpd-detail-grid keeps its normal stacked layout. */
.bdpd-side-by-side .bdpd-detail-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}
.bdpd-side-by-side .bdpd-detail-row {
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
}
.bdpd-side-by-side .bdpd-detail-label::after { content: ":"; }

@media (max-width: 720px) {
  .bdpd-side-by-side { grid-template-columns: 1fr; }
  .bdpd-side-by-side > .cm-card-section { margin-bottom: 18px; }
}
.bdpd-detail-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bdpd-detail-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.bdpd-detail-value {
  font-size: 14px;
  color: var(--text-primary);
}
.bdpd-text-block {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--border-light);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.5;
}
.bdpd-text-block .bdpd-text-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 6px;
}

/* BD Options list rows (Settings → Lists → BD Options) */
.bdopt-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bdopt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--card-bg);
}
.bdopt-row-inactive { opacity: .55; }
.bdopt-row-label { font-size: 14px; font-weight: 500; color: var(--text-primary); }
.bdopt-row-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* Collapsible header used inside form-groups for picker sections that
   would otherwise dominate the modal (e.g. exclusivity Category tags
   has 30+ pills). Click anywhere on the row to toggle. */
.bdpd-collapse-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  padding: 4px 0;
}
.bdpd-collapse-header:hover .bd-collapse-chevron {
  color: var(--text-secondary);
}

/* New-project modal — BD additions (Phase B3) */
.form-section-header {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted, #A8A39A);
  margin: 22px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border, #E5DFD0);
}
.bd-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  cursor: pointer;
}
/* Override the global `.form-group input { width: 100% }` so the checkbox
   stays its natural size and sits inline with the label text. */
.bd-checkbox-label input[type="checkbox"] {
  width: auto;
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.bd-excl-fields {
  border-left: 3px solid var(--accent-soft, rgba(160,90,44,.25));
  padding-left: 14px;
  margin-left: 4px;
  margin-top: 4px;
}
.bd-excl-fields.hidden { display: none; }

/* Reason-row visibility (used by the (None) agency picker) */
.agency-reason-row.hidden { display: none; }

/* ============================================================
   MOMENT.AI
   ============================================================
   Launch button (sidebar header on desktop, reveal pill on mobile)
   + the slide-out chat panel with message bubbles.
   ============================================================ */

/* Launch pill — small, accent-tinted, sits inline next to the
   "Moment" wordmark in the sidebar header on desktop. Hidden on
   mobile (mobile uses the reveal pattern below). */
.momai-launch {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark, #7d4521) 100%);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .03em;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
  transition: transform .12s, box-shadow .12s, filter .12s;
}
.momai-launch:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0,0,0,.22);
  filter: brightness(1.07);
}

.momai-launch--desktop {
  /* Push to the right edge of the sidebar header so the pill doesn't
     float in the middle of the nav panel. `.sidebar-logo` is already
     a flex row; auto margin claims the remaining space. */
  margin-left: auto;
  vertical-align: middle;
}

/* Mobile: launch button is hidden by default. Tapping the topbar logo
   slides it down from beneath the topbar (`is-revealed`). Hidden on
   desktop entirely. */
.momai-launch--mobile {
  display: none;  /* shown only inside the mobile breakpoint */
  position: fixed;
  top: 52px;       /* directly under the mobile topbar (52px tall) */
  left: 12px;
  z-index: 95;     /* above main content, below modals */
  padding: 6px 14px;
  font-size: 12px;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.momai-launch--mobile.is-revealed {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Chat-panel overlay */
.momai-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(0,0,0,.35);
  display: flex;
  justify-content: flex-end;
}
.momai-overlay.hidden { display: none; }

.momai-panel {
  background: var(--card-bg);
  width: 100%;
  max-width: 440px;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 24px rgba(0,0,0,.18);
  animation: momai-slide-in .22s ease-out;
}
@keyframes momai-slide-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

.momai-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border, #E5DFD0);
}
.momai-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark, #7d4521) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.momai-header-actions {
  display: flex;
  gap: 4px;
}
.momai-header-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: var(--text-muted);
  transition: background .12s, color .12s;
}
.momai-header-btn:hover {
  background: var(--border-light);
  color: var(--text-primary);
}

.momai-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.momai-empty {
  margin: auto 0;
  padding: 8px 4px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
}
.momai-empty p { margin: 0 0 8px; }

.momai-msg {
  max-width: 88%;
  padding: 10px 13px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.45;
}
.momai-msg--user {
  align-self: flex-end;
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 3px;
}
.momai-msg--ai {
  align-self: flex-start;
  background: var(--bg);
  color: var(--text-primary);
  border: 1px solid var(--border-light, #ECE6D6);
  border-bottom-left-radius: 3px;
}
.momai-msg--error {
  border-color: var(--danger, #C8503A);
  background: rgba(200,80,58,.06);
}
.momai-msg--user code,
.momai-msg--ai code {
  background: rgba(0,0,0,.08);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}
.momai-msg--user code { background: rgba(255,255,255,.18); color: #fff; }

.momai-msg-badges {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.momai-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(0,0,0,.05);
  color: var(--text-secondary);
  letter-spacing: .03em;
}
.momai-badge--sql  { background: rgba(160,90,44,.12); color: var(--accent); cursor: help; }
.momai-badge--mem  { background: rgba(45,138,78,.12); color: var(--success, #2d8a4e); }
.momai-badge--cost { background: rgba(0,0,0,.05); color: var(--text-muted); }

/* Typing indicator while the AI is thinking */
.momai-msg--pending .momai-msg-body {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.momai-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: momai-dot 1.2s ease-in-out infinite;
}
.momai-dot:nth-child(2) { animation-delay: .15s; }
.momai-dot:nth-child(3) { animation-delay: .30s; }
@keyframes momai-dot {
  0%, 80%, 100% { opacity: .25; transform: translateY(0); }
  40%           { opacity:  1;  transform: translateY(-2px); }
}

.momai-input-row {
  border-top: 1px solid var(--border, #E5DFD0);
  padding: 10px 12px;
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.momai-input-row textarea {
  flex: 1;
  resize: none;
  border: 1px solid var(--border, #E5DFD0);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.4;
  background: var(--card-bg);
  color: var(--text-primary);
  outline: none;
  transition: border-color .12s;
  /* Auto-grow: JS sizes height to content; min keeps the empty state
     readable; max + scroll lets long pastes scroll inside the field
     instead of pushing the Send button off-screen. */
  min-height: 56px;
  max-height: 200px;
  overflow-y: auto;
}
.momai-input-row textarea:focus {
  border-color: var(--accent);
}
.momai-input-row button { flex-shrink: 0; }

/* Mobile: shrink the panel to fill, show the mobile reveal button */
@media (max-width: 768px) {
  .momai-launch--desktop { display: none; }
  .momai-launch--mobile  { display: inline-flex; }
  .momai-panel { max-width: 100%; }
  /* sidebar header stays vertical on desktop only — on mobile the
     whole sidebar is hidden anyway, so nothing to adjust. */
}

/* Dark mode */
body.dark-mode .momai-msg--ai {
  background: var(--bg);
  border-color: rgba(255,255,255,.06);
}
body.dark-mode .momai-badge--sql  { background: rgba(184,106,60,.18); }
body.dark-mode .momai-badge--mem  { background: rgba(144,184,136,.18); }