/* ========================================
   PROJECT MAP — CLIENT PORTAL STYLES
   ======================================== */

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

:root {
  /* ──── Legacy palette (kept for backwards compat — do not remove until Step 9) ──── */
  --bg: #FAF9F6;
  --bg-alt: #F4F2EE;
  --surface: #FFFFFF;
  --surface-hover: #F7F6F3;
  --text: #1A1A1A;
  --text-secondary: #6B6B6B;
  --text-tertiary: #767676; /* Audit #4.14: was #999 (2.8:1 on #FAF9F6) → 4.5:1 WCAG AA */
  --border: #E5E3DE;
  --border-light: #EDEBE7;
  --accent-warm: #C4A57B;
  --accent-warm-light: #E8DCC8;
  --success: #8A7B6B;
  --success-bg: #F0EDE8;
  --in-progress: #1A1A1A;
  --in-progress-bg: #F0EDE8;
  --upcoming: #BBBBBB;
  --upcoming-bg: #F5F5F5;
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
  --font-nav: 'Inter', 'Helvetica Neue', sans-serif;
  --transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ════════════════════════════════════════════════════════════
     STEP 0 — ADMIN DESIGN SYSTEM TOKENS
     Source of truth: design/admin-implementation-brief.md
     These tokens are referenced by the canonical .t-* / .btn-* /
     .table / .input / .tabs / .status / .card / .surface-group
     utility classes defined later in this file.
     For Step 0 they alias the legacy palette so screens render
     identically. Steps 1+ will gradually shift them toward the
     warm-dark target values per the brief.
     ═════════════════════════════════════════════════════════════ */

  /* Surface */
  --surface-elevated:  var(--surface);
  --hairline:          var(--border-light);
  --hairline-strong:   var(--border);

  /* Text */
  --text-disabled:     #B8B8B8;
  --text-inverse:      #1A1411;

  /* Accent + tone (canonical names) */
  --accent:            var(--accent-warm);
  --accent-soft:       rgba(196, 165, 123, 0.12);
  --accent-strong:     #B5946C;
  --tone-positive:     #5A8A5C;
  --tone-warn:         #A0705A;
  --tone-info:         var(--text-secondary);
  --focus-ring:        rgba(196, 165, 123, 0.35);

  /* Effect */
  --shadow-modal:      0 16px 48px rgba(0, 0, 0, 0.18);
  --shadow-card:       none;

  /* Radius */
  --radius-sm:         3px;
  --radius-md:         4px;
  --radius-lg:         6px;

  /* Spacing scale */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;

  /* Page gutter — responsive */
  --page-gutter: clamp(24px, 4vw, 80px);

  /* Type families (canonical name; --font-nav kept as legacy alias) */
  --font-body:    var(--font-nav);
}

/* Dune-dark tenant override: applyTheme() in app.js sets --bg, --text, etc.
   at runtime. We bind the canonical dark values here so any tenant whose
   --bg falls below ~#444 luminance opts into the dark-mode shadow. */
@media (prefers-color-scheme: dark) {
  :root {
    --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.32);
  }
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  min-height: 100dvh;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.1;
}

/* ========================================
   LAYOUT
   ======================================== */

.app-container {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ========================================
   NAV BAR
   ======================================== */

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;
  border-bottom: 1px solid var(--shell-nav-border, var(--border));
  background: var(--shell-nav-bg, var(--bg));
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--shell-nav-text-active, var(--text));
}

.nav-logo span {
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.15em;
  color: var(--shell-nav-text, var(--text-secondary));
  display: block;
  margin-top: 2px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-link {
  font-family: var(--font-nav);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--shell-nav-text, var(--text-secondary));
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  transition: color var(--transition);
}

.nav-link:hover { color: var(--shell-nav-text-active, var(--text)); }
.nav-link.active { color: var(--shell-nav-text-active, var(--text)); }

/* ========================================
   MAIN CONTENT
   ======================================== */

.main-content {
  flex: 1;
  /* Match the admin shell's gutter math so the client portal lines
     up visually with the admin portal at every viewport size.
     --page-gutter is clamp(24px, 4vw, 80px). */
  padding: 32px var(--page-gutter, 56px) 96px;
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* ========================================
   LOADING SCREEN
   ======================================== */

.loading-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  flex-direction: column;
  gap: 16px;
}

.loading-screen .spinner-large {
  width: 24px;
  height: 24px;
  border: 2px solid var(--border);
  border-top-color: var(--text);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

.loading-screen p {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-tertiary);
}

/* ========================================
   LOGIN PAGE
   ======================================== */

.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 40px 20px;
  flex-direction: column;
}

.login-container {
  width: 100%;
  max-width: 380px;
  text-align: center;
}

.login-brand {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 56px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 6px;
  line-height: 1;
}

.login-subtitle {
  font-family: var(--font-nav);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 56px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}

.form-group label {
  display: block;
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.form-input {
  width: 100%;
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  outline: none;
  transition: border-color var(--transition);
}

.form-input:focus { border-color: var(--text); }
.form-input::placeholder { color: var(--text-tertiary); }

.login-btn {
  width: 100%;
  padding: 14px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--bg);
  background: var(--text);
  border: none;
  border-radius: 2px;
  cursor: pointer;
  margin-top: 8px;
  transition: opacity var(--transition);
}

.login-btn:hover { opacity: 0.85; }
.login-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.login-error {
  font-size: 12px;
  color: #A12C3B;
  margin-top: 4px;
  min-height: 18px;
}

.login-forgot {
  font-family: var(--font-nav);
  font-size: 11px;
  font-weight: 400;
  color: var(--text-secondary);
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  margin-top: 4px;
  transition: color var(--transition);
  text-align: center;
  display: block;
}

.login-forgot:hover { color: var(--text); }

.login-success {
  font-size: 12px;
  color: var(--success);
  margin-top: 4px;
  min-height: 18px;
}

/* ========================================
   SETUP PAGE (First-run admin creation)
   ======================================== */

.setup-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 40px 20px;
  flex-direction: column;
}

.setup-container {
  width: 100%;
  max-width: 420px;
  text-align: center;
}

.setup-container .login-brand { margin-bottom: 6px; }
.setup-container .login-subtitle { margin-bottom: 12px; }

.setup-desc {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 40px;
  line-height: 1.7;
}

/* ========================================
   CLIENT DASHBOARD
   ======================================== */

.project-hero {
  width: 100%;
  height: 380px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  margin-bottom: 32px;
}
.project-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.6) 100%);
  display: flex;
  align-items: flex-end;
}
.project-hero-content {
  padding: 32px 40px;
  color: #fff;
}
.project-hero-welcome {
  font-family: var(--font-heading);
  font-size: 42px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 6px;
  color: #fff;
  line-height: 1;
}
.project-hero-subtitle {
  font-family: var(--font-nav);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.8);
  margin: 0;
}

.welcome-header {
  margin-bottom: 56px;
}

.welcome-header h1 {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 800;
  margin-bottom: 8px;
}

.welcome-header p {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-secondary);
}

/* Dashboard 2-column top grid */
.dashboard-top-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
  align-items: start;
}
@media (max-width: 860px) {
  .dashboard-top-grid { grid-template-columns: 1fr; }
}

/* Project Overview Card */
.project-overview {
  padding: 28px 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 0;
}

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

.project-name {
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 800;
  letter-spacing: 0.02em;
}

.project-phase-badge {
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 6px 14px;
  background: var(--in-progress-bg);
  color: var(--text);
  border-radius: 2px;
  white-space: nowrap;
}

.project-meta {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}

.project-meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.project-meta-label {
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
}

.project-meta-value {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
}

/* ========================================
   TIMELINE
   ======================================== */

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.section-title {
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 800;
}

.section-subtitle {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-tertiary);
}

.timeline {
  position: relative;
  margin-bottom: 56px;
}

.timeline-track {
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border-light);
}

.timeline-progress {
  position: absolute;
  left: 20px;
  top: 0;
  width: 2px;
  background: var(--text);
  transition: height 0.6s ease;
}

.timeline-item {
  position: relative;
  padding-left: 56px;
  padding-bottom: 32px;
}

.timeline-item:last-child { padding-bottom: 0; }

.timeline-dot {
  position: absolute;
  left: 12px;
  top: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.timeline-item.completed .timeline-dot {
  border-color: var(--success);
  background: var(--success);
}

.timeline-item.completed .timeline-dot::after {
  content: '';
  width: 6px;
  height: 3px;
  border-left: 1.5px solid white;
  border-bottom: 1.5px solid white;
  transform: rotate(-45deg) translateY(-1px);
}

.timeline-item.in-progress .timeline-dot {
  border-color: var(--text);
  background: var(--text);
  box-shadow: 0 0 0 4px rgba(26, 26, 26, 0.12);
}

.timeline-item.in-progress .timeline-dot::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--surface);
}

.timeline-item.upcoming .timeline-dot {
  border-color: var(--border);
  background: var(--bg);
}

.timeline-item-content {
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 2px;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.timeline-item.in-progress .timeline-item-content {
  border-color: var(--text);
  box-shadow: 0 2px 12px rgba(26, 26, 26, 0.06);
}

.timeline-item.upcoming .timeline-item-content { opacity: 0.6; }

.timeline-phase-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.timeline-phase-number {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-tertiary);
  margin-right: 8px;
}

.timeline-phase-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  flex: 1;
}

.timeline-phase-status {
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 2px;
}

.status-completed { background: var(--success-bg); color: var(--success); }
.status-in-progress { background: var(--text); color: var(--bg); }
.status-upcoming { background: var(--upcoming-bg); color: var(--upcoming); }

.timeline-phase-dates {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-tertiary);
  margin-bottom: 8px;
}

.timeline-phase-desc {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ========================================
   RECENT UPDATES
   ======================================== */

.updates-section { margin-bottom: 56px; }

.update-item {
  display: flex;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border-light);
}

.update-item:first-child { padding-top: 0; }

.update-date {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-tertiary);
  white-space: nowrap;
  min-width: 90px;
  padding-top: 2px;
}

.update-content h4 {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
}

.update-content p {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.update-type {
  font-family: var(--font-nav);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 2px;
  background: var(--bg-alt);
  color: var(--text-secondary);
  margin-top: 8px;
  display: inline-block;
}

.update-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  margin-bottom: 6px;
}
.update-photos img {
  width: 120px;
  height: 90px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 0.15s;
}
.update-photos img:hover {
  opacity: 0.8;
}
#photoLightboxOverlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.85);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
#photoLightboxOverlay img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 6px;
}

.update-delete-btn {
  font-family: var(--font-nav);
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #A0705A;
  background: none;
  border: none;
  cursor: pointer;
  padding: 3px 8px;
  margin-top: 8px;
  margin-left: 8px;
  transition: opacity var(--transition);
}

.update-delete-btn:hover { opacity: 0.6; }

/* ========================================
   ADMIN DASHBOARD
   ======================================== */

.admin-overview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  margin-bottom: 56px;
}

.admin-project-card {
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.admin-project-card:hover {
  border-color: var(--text);
  box-shadow: 0 2px 12px rgba(26, 26, 26, 0.06);
}

.admin-card-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}

.admin-card-location {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.admin-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.admin-card-phase {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
}

.admin-card-progress {
  width: 80px;
  height: 5px;
  background: #D6D3CD;
  border-radius: 3px;
  overflow: hidden;
}

.admin-card-progress-bar {
  height: 100%;
  background: #C4A57B;
  border-radius: 3px;
  transition: width 0.4s ease;
}

.admin-card-link {
  display: inline-block;
  font-family: var(--font-nav);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text);
  text-decoration: none;
  margin-top: 16px;
  cursor: pointer;
  transition: opacity var(--transition);
}

.admin-card-link:hover { opacity: 0.6; }

/* Admin Detail */
.admin-detail-back {
  font-family: var(--font-nav);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 32px;
  transition: color var(--transition);
}

.admin-detail-back:hover { color: var(--text); }

.admin-section { margin-bottom: 48px; }

.admin-section-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

/* Admin Table */
.admin-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-table th {
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.admin-table td {
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
}

.admin-table tr:hover td { background: var(--surface-hover); }

/* Admin Forms */
.admin-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.admin-form-full { grid-column: 1 / -1; }

.admin-form-group label {
  display: block;
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.admin-input {
  width: 100%;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: none;
  transition: border-color var(--transition);
}

.admin-input:focus { border-color: var(--accent-warm); }

.admin-textarea {
  resize: vertical;
  min-height: 80px;
}

.admin-select {
  width: 100%;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}

.btn {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 10px 20px;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: opacity var(--transition);
}

.btn:hover { opacity: 0.8; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary { background: var(--text); color: var(--bg); }
.btn-secondary { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn-small { padding: 6px 14px; font-size: 11px; }
.btn-danger { background: #A0705A; color: #fff; }

.btn-group {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

/* Status badge in tables */
.table-status {
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 2px;
  display: inline-block;
}

/* Toast */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 14px 24px;
  background: var(--text);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 13px;
  border-radius: 2px;
  z-index: 1000;
  transform: translateY(80px);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

/* ========================================
   ADMIN CLIENT MANAGEMENT
   ======================================== */

.admin-client-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

/* Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 26, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.modal {
  width: 100%;
  max-width: 480px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 32px;
  transform: translateY(16px);
  transition: transform 0.2s ease;
}

.modal-overlay.active .modal { transform: translateY(0); }

.modal h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 24px;
}

/* ========================================
   TABS
   ======================================== */

.admin-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 32px;
}

.admin-tab {
  font-family: var(--font-nav);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  background: none;
  border: none;
  padding: 12px 20px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--transition), border-color var(--transition);
}

.admin-tab:hover { color: var(--text); }
.admin-tab.active { color: var(--text); border-bottom-color: var(--text); }

/* ========================================
   ADD UPDATE FORM
   ======================================== */

.add-update-form {
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  margin-bottom: 24px;
}

.add-update-form h4 {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 16px;
}

/* ========================================
   BUDGET TRACKING
   ======================================== */

.budget-summary {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  margin-bottom: 32px;
}

.budget-summary-main {
  grid-column: 1 / -1;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-light);
}

.budget-summary-project {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.budget-summary-amounts {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 20px;
}

.budget-amount-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.budget-amount-label {
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
}

.budget-amount-value {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--text);
  line-height: 1;
}

.budget-amount-value.spent { font-size: clamp(20px, 2.5vw, 26px); font-weight: 700; }
.budget-amount-value.remaining { font-size: clamp(20px, 2.5vw, 26px); font-weight: 700; color: var(--text); }

.budget-progress-bar {
  width: 100%;
  height: 6px;
  background: var(--border-light);
  border-radius: 1px;
  overflow: hidden;
}

.budget-progress-fill {
  height: 100%;
  background: var(--text);
  border-radius: 1px;
  transition: width 0.6s ease;
}

.budget-progress-label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 8px;
}

.budget-stat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}

.budget-stat-card {
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
}

.budget-stat-value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
  margin-bottom: 6px;
}

.budget-stat-value.over-budget { color: #A0705A; }
.budget-stat-value.on-track { color: var(--text); }

.budget-stat-label {
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
}

.budget-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.budget-sync-info {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-tertiary);
}

.budget-refresh-btn {
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  background: none;
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 6px 14px;
  cursor: pointer;
  transition: all var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.budget-refresh-btn:hover { border-color: var(--text); color: var(--text); }

.budget-refresh-btn .spinner {
  display: none;
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--border);
  border-top-color: var(--text);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

.budget-refresh-btn.loading .spinner { display: inline-block; }

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

.budget-table-wrapper {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Self-contained scroll region. Long budgets used to push the whole
     page down, hiding the Contract / Spent / To Bill KPIs as soon as
     you started scanning lines. Now the table scrolls inside this
     wrapper while the page header, tab strip, finance summary, and
     subnav stay locked in place.

     Subtracted vertical chrome (~380px on admin):
       admin nav (~60) + project header (~150) + tab strip (~50)
       + finance summary KPIs (~100) + subnav (~40) + card padding
     Tighter on mobile to claim more of the screen for the table.

     Sticky <th> already declared below — column headers stay visible
     as you scroll the body. */
  max-height: calc(100vh - 380px);
  min-height: 360px;
  overflow-y: auto;
}
@media (max-width: 720px) {
  .budget-table-wrapper {
    max-height: calc(100vh - 280px);
    min-height: 280px;
  }
}

.budget-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 700px;
}

.budget-table th {
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--surface);
}

.budget-table th:not(:first-child) { text-align: right; }

.budget-table td {
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
  height: 0;
  overflow: hidden;
  transition: none;
}

.budget-table td:not(:first-child) { text-align: right; }

.budget-row-category {
  cursor: pointer;
  transition: background var(--transition);
}

.budget-row-category:hover { background: var(--surface-hover); }

.budget-row-category td {
  font-weight: 600;
  padding-top: 14px;
  padding-bottom: 14px;
  height: auto;
  overflow: visible;
  color: var(--text);
}

.budget-row-category td:first-child {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.budget-category-toggle {
  display: inline-block;
  width: 16px;
  font-size: 11px;
  color: var(--text-tertiary);
  transition: transform 0.25s ease;
  margin-right: 8px;
}

.budget-category-toggle.open { transform: rotate(90deg); }

.budget-row-sub {
  visibility: collapse;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.budget-row-sub td {
  font-size: 12px;
  color: var(--text-secondary);
  padding-top: 0;
  padding-bottom: 0;
  line-height: 0;
  border-bottom-color: transparent;
  transition: padding 0.25s ease, line-height 0.25s ease, border-bottom-color 0.2s ease;
}

.budget-row-sub.expanded {
  visibility: visible;
  opacity: 1;
}

.budget-row-sub.expanded td {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 1.65;
  border-bottom-color: var(--border-light);
}

.budget-row-sub td:first-child { padding-left: 40px; }

.budget-row-total {
  visibility: collapse;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.budget-row-total td {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary);
  background: var(--bg-alt);
  padding-top: 0;
  padding-bottom: 0;
  line-height: 0;
  border-bottom-color: transparent;
  transition: padding 0.25s ease, line-height 0.25s ease, border-bottom-color 0.2s ease;
}

.budget-row-total.expanded {
  visibility: visible;
  opacity: 1;
}

.budget-row-total.expanded td {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 1.65;
  border-bottom-color: var(--border-light);
}

.budget-row-grand td {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding-top: 16px;
  padding-bottom: 16px;
  height: auto;
  overflow: visible;
  background: var(--bg-alt);
  border-top: 2px solid var(--text);
  border-bottom: none;
  color: var(--text);
}

.budget-table td.variance-under { color: var(--text-secondary); }
.budget-table td.variance-over { color: #A0705A; }

.budget-status-badge {
  font-family: var(--font-nav);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 2px;
  display: inline-block;
  white-space: nowrap;
}

.budget-status-complete { background: var(--success-bg); color: var(--success); }
.budget-status-in-progress { background: var(--in-progress-bg); color: var(--text); }

.budget-edit-link {
  font-family: var(--font-nav);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text);
  text-decoration: none;
  transition: opacity var(--transition);
}

.budget-edit-link:hover { opacity: 0.6; }

/* Audit #4.17: responsive budget table — stacked cards on mobile */
@media (max-width: 768px) {
  .budget-table { min-width: 0; }
  .budget-table thead { display: none; }
  .budget-table,
  .budget-table tbody,
  .budget-table tr,
  .budget-table td { display: block; width: 100%; }
  .budget-table tr {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light);
  }
  .budget-table td { height: auto; overflow: visible; border-bottom: none; padding: 3px 0; text-align: left !important; }
  .budget-table td::before {
    content: attr(data-label);
    display: inline-block;
    width: 80px;
    font-family: var(--font-nav);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
    vertical-align: middle;
  }
  .budget-table td:first-child { font-weight: 600; padding-bottom: 4px; }
  .budget-table td:first-child::before { display: none; }
  .budget-row-category td { padding-top: 8px; padding-bottom: 8px; }
  .budget-row-sub td { padding-left: 0 !important; }
  .budget-row-sub td:first-child { padding-left: 16px !important; }
  .budget-row-grand td { padding-top: 8px; padding-bottom: 8px; }
  .budget-row-grand td::before { display: none; }
}

.budget-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  gap: 12px;
}

.budget-loading .spinner-large {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--text);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

.budget-loading-text {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-tertiary);
}

/* ========================================
   HORIZONTAL MINI TIMELINE
   ======================================== */

.mini-timeline {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border-light);
  overflow-x: auto;
}

.mini-timeline-step {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.mini-timeline-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
}

.mini-timeline-step.completed .mini-timeline-dot {
  border-color: var(--success);
  background: var(--success);
}

.mini-timeline-step.in-progress .mini-timeline-dot {
  border-color: var(--text);
  background: var(--text);
  box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.1);
}

.mini-timeline-line {
  width: 24px;
  height: 2px;
  background: var(--border-light);
  flex-shrink: 0;
}

.mini-timeline-step.completed .mini-timeline-line { background: var(--success); }

.mini-timeline-label {
  font-family: var(--font-nav);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  margin-left: 6px;
  display: none;
}

.mini-timeline-step.in-progress .mini-timeline-label {
  display: inline;
  color: var(--text);
  font-weight: 600;
}

/* Admin actions column */
.action-btn {
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  transition: opacity var(--transition);
}

.action-btn:hover { opacity: 0.6; }

/* ========================================
   VIEW TRANSITIONS
   ======================================== */

.view {
  display: none;
  animation: fadeIn 0.25s ease;
}

.view.active { display: block; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ========================================
   RESPONSIVE — Tablet, Mobile, Small Mobile
   ======================================== */

/* ── Tablet (≤768px) ── */
@media (max-width: 768px) {

  /* --- Navigation --- */
  .nav-bar { padding: 14px 20px; }
  .nav-links { gap: 12px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .nav-link { font-size: 10px; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }

  /* --- Layout --- */
  .main-content { padding: 28px 20px 60px; }

  /* --- Login / Setup --- */
  .login-page { padding: 32px 16px; }
  .login-container { max-width: 100%; }
  .setup-container { max-width: 100%; }

  /* --- Project Overview --- */
  .project-overview { padding: 20px; }
  .project-overview-header { flex-direction: column; align-items: flex-start; }
  .project-meta { gap: 20px; }
  .welcome-header { margin-bottom: 36px; }

  /* --- Admin Overview Cards --- */
  .admin-overview { grid-template-columns: 1fr; gap: 16px; }

  /* --- Admin Detail Tabs --- */
  .admin-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-bottom: 0;
    gap: 0;
  }
  .admin-tab { font-size: 10px; padding: 10px 14px; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }
  .admin-detail-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
  .admin-detail-tab { font-size: 10px; padding: 10px 14px; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }

  /* --- Admin Forms --- */
  .admin-form-row { grid-template-columns: 1fr; }
  .admin-input, .admin-select, .admin-textarea {
    padding: 12px 14px;
    font-size: 14px;
    min-height: 44px;
  }
  .btn { min-height: 44px; padding: 12px 20px; }
  .btn-group { flex-wrap: wrap; }

  /* --- Timeline (vertical) --- */
  .timeline-item { padding-left: 44px; padding-bottom: 24px; }
  .timeline-track, .timeline-progress { left: 14px; }
  .timeline-dot { left: 6px; width: 16px; height: 16px; }
  .timeline-phase-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .timeline-item-content { padding: 16px; }

  /* --- Admin Table (horizontal scroll wrapper) --- */
  .admin-table { font-size: 12px; min-width: 520px; }
  .admin-table th, .admin-table td { padding: 10px 10px; }
  .admin-section > .admin-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Wrap any admin-table that isn't already in a scroll wrapper */
  .admin-section { overflow: visible; }

  /* --- Budget --- */
  .budget-summary { padding: 20px; }
  .budget-summary-amounts { gap: 20px; }
  .budget-stat-cards { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .budget-stat-card { padding: 16px; }
  .budget-stat-value { font-size: 22px; }
  .budget-toolbar { flex-direction: column; align-items: flex-start; gap: 10px; }
  .budget-admin-toolbar { flex-direction: column; align-items: flex-start; }
  .budget-admin-toolbar-actions { flex-wrap: wrap; }
  .modal.modal-budget .admin-form-row { grid-template-columns: 1fr; }

  /* --- Updates --- */
  .update-item { flex-direction: column; gap: 8px; }
  .update-date { min-width: unset; }
  .update-photos img { width: 100px; height: 75px; }
  .add-update-form { padding: 16px; }

  /* --- Photo Gallery --- */
  .photo-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  .photo-card img { height: 120px; }
  .photo-lightbox { padding: 16px; }
  .photo-lightbox img { max-width: 95vw; max-height: 80vh; }
  .photo-delete-btn { opacity: 1; width: 32px; height: 32px; } /* Always visible on touch */

  /* --- Documents --- */
  .doc-list-item { flex-wrap: wrap; gap: 10px; }
  .doc-download-btn { min-height: 40px; padding: 8px 14px; }

  /* --- Selections --- */
  .selection-card { flex-direction: column; gap: 12px; }
  .selection-image, .selection-image-placeholder { width: 100%; height: 160px; }
  .selection-admin-actions { flex-direction: row; align-items: center; flex-wrap: wrap; }

  /* --- Change Orders --- */
  .co-card { padding: 16px; }
  .co-card-header { flex-direction: column; gap: 8px; }
  .co-card-footer { gap: 10px; }
  .co-approve-btn, .co-deny-btn { min-height: 44px; padding: 10px 18px; flex: 1; text-align: center; }
  .co-summary-bar { gap: 16px; padding: 16px; }
  .co-summary-value { font-size: 18px; }

  /* --- Messages --- */
  .message-bubble { max-width: 85%; }
  .messages-container { height: 460px; }
  .messages-input-area button { min-height: 44px; padding: 10px 16px; }
  .messages-input-area input { min-height: 44px; font-size: 14px; }

  /* --- Visual (horizontal) Timeline --- */
  .visual-timeline { padding: 20px 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .visual-timeline-phase { min-width: 70px; }

  /* --- Modal --- */
  .modal { padding: 24px 20px; }

  /* --- Toast --- */
  .toast { left: 16px; right: 16px; bottom: 16px; text-align: center; }

  /* --- Dashboard --- */
  .dashboard-stats { grid-template-columns: 1fr 1fr; }
  .dashboard-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ── Mobile (≤600px) ── */
@media (max-width: 600px) {

  /* Prevent horizontal overflow on page */
  html, body { overflow-x: hidden; }
  .app-container { max-width: 100vw; overflow-x: hidden; }

  /* --- Navigation: wrap to two rows or scroll --- */
  .nav-bar {
    padding: 12px 16px;
    flex-wrap: wrap;
    gap: 10px;
  }
  .nav-logo { flex-shrink: 0; }
  .nav-links {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0;
    padding-bottom: 0;
    border-top: 1px solid var(--border-light);
    padding-top: 8px;
    margin-top: 2px;
  }
  .nav-link {
    font-size: 10px;
    padding: 8px 10px;
    white-space: nowrap;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    letter-spacing: 0.08em;
  }

  /* --- Main Content --- */
  .main-content { padding: 20px 16px 72px; }

  /* --- Section headers --- */
  .section-header { flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 20px; }
  .admin-client-header { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* --- Login Page --- */
  .login-brand { font-size: 44px; }
  .login-subtitle { margin-bottom: 40px; font-size: 10px; }
  .login-container { padding: 0 4px; }
  .form-input { padding: 14px 16px; font-size: 15px; min-height: 48px; }
  .login-btn { padding: 16px; font-size: 14px; min-height: 52px; }

  /* --- Project Overview Card --- */
  .project-overview { padding: 16px; }
  .project-name { font-size: clamp(18px, 5vw, 24px); }
  .project-meta { flex-direction: column; gap: 12px; }
  .project-meta-item { flex-direction: row; justify-content: space-between; align-items: baseline; padding-bottom: 8px; border-bottom: 1px solid var(--border-light); }
  .project-meta-label { min-width: 110px; }
  .welcome-header { margin-bottom: 24px; }
  .welcome-header h1 { font-size: clamp(24px, 6vw, 32px); }

  /* --- Admin Tabs (always scroll) --- */
  .admin-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    border-bottom: 1px solid var(--border);
    /* Hide scrollbar visually but keep functional */
    scrollbar-width: none;
  }
  .admin-tabs::-webkit-scrollbar { display: none; }
  .admin-tab { font-size: 10px; padding: 10px 12px; white-space: nowrap; }
  .admin-detail-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .admin-detail-tabs::-webkit-scrollbar { display: none; }
  .admin-detail-tab { font-size: 9px; padding: 10px 11px; white-space: nowrap; letter-spacing: 0.08em; }

  /* --- Admin Cards --- */
  .admin-project-card { padding: 18px 16px; }
  .admin-card-meta { flex-direction: column; align-items: flex-start; gap: 8px; }
  .admin-card-progress { width: 100%; }
  .admin-new-project-card { min-height: 100px; }

  /* --- Admin Detail Back Button --- */
  .admin-detail-back { margin-bottom: 20px; min-height: 44px; display: inline-flex; align-items: center; }

  /* --- Admin Forms --- */
  .admin-form-row { grid-template-columns: 1fr; gap: 12px; }
  .admin-input, .admin-select { min-height: 48px; padding: 12px 14px; font-size: 14px; }
  .admin-textarea { min-height: 80px; }
  .btn { min-height: 48px; font-size: 12px; width: 100%; }
  .btn-small { min-height: 40px; font-size: 11px; width: auto; }
  .btn-group { flex-direction: column; gap: 10px; }

  /* --- Admin Tables: horizontal scroll wrapper --- */
  .admin-section {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .admin-table { min-width: 480px; font-size: 12px; }
  .admin-table th, .admin-table td { padding: 10px 8px; }

  /* --- Budget Section --- */
  .budget-summary { padding: 16px; }
  .budget-summary-main { margin-bottom: 16px; padding-bottom: 16px; }
  .budget-summary-amounts { flex-direction: column; gap: 14px; }
  .budget-amount-value { font-size: clamp(20px, 6vw, 28px); }
  .budget-stat-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .budget-stat-card { padding: 14px 12px; }
  .budget-stat-value { font-size: 20px; }
  .budget-toolbar { flex-direction: column; align-items: flex-start; gap: 10px; }
  .budget-toolbar .budget-sync-info { font-size: 11px; }
  .budget-refresh-btn { width: 100%; justify-content: center; min-height: 44px; }
  .budget-admin-toolbar { flex-direction: column; align-items: flex-start; }
  .budget-import-btn { min-height: 44px; width: 100%; justify-content: center; }

  /* --- Updates --- */
  .update-item { flex-direction: column; gap: 6px; padding: 16px 0; }
  .update-date { font-size: 11px; }
  .update-content p { font-size: 13px; }
  .update-photos { gap: 6px; }
  .update-photos img { width: calc(50% - 3px); height: auto; aspect-ratio: 4/3; }
  .add-update-form { padding: 16px; }
  .add-update-form textarea { width: 100%; font-size: 14px; min-height: 100px; }

  /* --- Photo Gallery --- */
  .photo-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .photo-card img { height: 110px; }
  .photo-filter-bar { gap: 6px; }
  .photo-filter-btn { padding: 8px 12px; min-height: 40px; font-size: 10px; }
  .photo-upload-area { padding: 16px; }
  .photo-delete-btn { opacity: 1; width: 32px; height: 32px; top: 6px; right: 6px; }
  .photo-lightbox { padding: 12px; }
  .photo-lightbox img { max-width: 98vw; max-height: 82vh; }
  .photo-lightbox-caption { font-size: 12px; padding: 6px 12px; bottom: 14px; }
  #photoLightboxOverlay img { max-width: 95vw; max-height: 85vh; }

  /* --- Documents --- */
  .doc-list-item {
    flex-wrap: wrap;
    padding: 14px 12px;
    gap: 10px;
  }
  .doc-info { flex-basis: calc(100% - 56px); }
  .doc-actions { width: 100%; justify-content: flex-end; padding-top: 4px; }
  .doc-download-btn { min-height: 44px; padding: 10px 16px; font-size: 11px; }
  .doc-delete-btn { min-height: 44px; padding: 10px 8px; }
  .doc-upload-area { padding: 16px; }

  /* --- Selections --- */
  .selection-add-area { padding: 16px; }
  .selection-card { flex-direction: column; gap: 12px; padding: 16px; }
  .selection-image, .selection-image-placeholder { width: 100%; height: 180px; border-radius: 2px; }
  .selection-admin-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .selection-status-select { min-height: 40px; }
  .selection-edit-btn, .selection-delete-btn { min-height: 36px; padding: 6px 8px; }

  /* --- Change Orders --- */
  .co-card { padding: 16px; margin-bottom: 10px; }
  .co-card-header { flex-direction: column; gap: 8px; }
  .co-card-title { font-size: 14px; }
  .co-card-meta { gap: 8px; }
  .co-card-footer {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }
  .co-approve-btn, .co-deny-btn {
    display: block;
    width: 100%;
    text-align: center;
    min-height: 48px;
    padding: 12px 16px;
    font-size: 12px;
  }
  .co-summary-bar { flex-direction: column; gap: 12px; padding: 14px 16px; }
  .co-summary-value { font-size: 20px; }
  .co-response-area { padding: 12px; }

  /* --- Messages --- */
  .messages-container { height: 420px; border-radius: 4px; }
  .messages-thread { padding: 12px; gap: 8px; }
  .message-bubble { max-width: 88%; padding: 10px 12px; font-size: 13px; }
  .messages-input-area {
    padding: 10px 12px;
    gap: 8px;
  }
  .messages-input-area input {
    min-height: 48px;
    font-size: 14px;
    padding: 10px 12px;
  }
  .messages-input-area button {
    min-height: 48px;
    padding: 10px 14px;
    white-space: nowrap;
    font-size: 10px;
  }

  /* --- Visual Horizontal Timeline --- */
  .visual-timeline {
    padding: 16px 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .visual-timeline-track { min-width: max-content; }
  .visual-timeline-phase { min-width: 64px; }
  .visual-timeline-label { font-size: 8px; }

  /* --- Mini Timeline (project overview) --- */
  .mini-timeline { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }

  /* --- Modal --- */
  .modal-overlay { padding: 12px; align-items: flex-end; }
  .modal {
    max-width: 100%;
    padding: 24px 16px;
    border-radius: 6px 6px 0 0;
    max-height: 90vh;
    overflow-y: auto;
  }
  .modal h3 { font-size: 16px; margin-bottom: 20px; }

  /* --- Toast --- */
  .toast {
    left: 12px;
    right: 12px;
    bottom: 12px;
    text-align: center;
    font-size: 12px;
    padding: 12px 16px;
  }

  /* --- Section spacing --- */
  .timeline { margin-bottom: 36px; }
  .updates-section { margin-bottom: 36px; }
  .admin-section { margin-bottom: 32px; }

  /* --- Dashboard --- */
  .dashboard-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .dashboard-stat-number { font-size: 28px; }
  .dashboard-stat-card { padding: 14px 12px; }
  .dashboard-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dashboard-project-table { min-width: 480px; }
}

/* ── Small Mobile (≤380px) ── */
@media (max-width: 380px) {

  /* --- Navigation --- */
  .nav-bar { padding: 10px 12px; }
  .nav-logo { font-size: 17px; }
  .nav-logo span { font-size: 10px; }
  .nav-link { font-size: 9px; padding: 6px 8px; letter-spacing: 0.06em; }

  /* --- Main Content --- */
  .main-content { padding: 16px 12px 68px; }

  /* --- Login --- */
  .login-brand { font-size: 36px; }
  .login-container { padding: 0; }

  /* --- Budget stat cards: always 2 col --- */
  .budget-stat-cards { grid-template-columns: 1fr 1fr; gap: 8px; }
  .budget-stat-card { padding: 12px 10px; }
  .budget-stat-value { font-size: 18px; }
  .budget-amount-value { font-size: clamp(18px, 5vw, 22px); }

  /* --- Photo grid: 2 col tight --- */
  .photo-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .photo-card img { height: 90px; }

  /* --- Change order buttons stacked --- */
  .co-approve-btn, .co-deny-btn { font-size: 11px; }

  /* --- Message bubbles wider --- */
  .message-bubble { max-width: 92%; }

  /* --- Tabs even more compact --- */
  .admin-detail-tab { font-size: 9px; padding: 9px 10px; }
  .admin-tab { font-size: 9px; padding: 9px 10px; }

  /* --- Buttons full width on tiny screens --- */
  .btn:not(.btn-small) { width: 100%; }
  .btn-group { flex-direction: column; }
}

/* Add new project card */
.admin-new-project-card {
  padding: 24px;
  background: var(--bg-alt);
  border: 2px dashed var(--border);
  border-radius: 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  transition: border-color var(--transition);
}

.admin-new-project-card:hover { border-color: var(--text-secondary); }

.admin-new-project-card span {
  font-family: var(--font-nav);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
}

/* ========================================
   ADMIN DETAIL SUB-TABS
   ======================================== */

.admin-detail-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 32px;
  margin-top: -8px;
}

.admin-detail-tab {
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-tertiary);
  background: none;
  border: none;
  padding: 12px 20px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--transition), border-color var(--transition);
}

.admin-detail-tab:hover { color: var(--text-secondary); }
.admin-detail-tab.active { color: var(--text); border-bottom-color: var(--text); }

.admin-detail-tab-content {
  animation: fadeIn 0.25s ease;
}

/* ========================================
   ADMIN BUDGET TABLE ACTIONS
   ======================================== */

.budget-action-btn {
  font-family: var(--font-nav);
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: none;
  border: none;
  cursor: pointer;
  padding: 3px 6px;
  transition: opacity var(--transition);
  display: inline-block;
}

.budget-action-btn:hover { opacity: 0.6; }
.budget-action-btn.edit { color: var(--text-secondary); }
.budget-action-btn.delete { color: #A0705A; }

.budget-import-btn {
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  background: none;
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 8px 16px;
  cursor: pointer;
  transition: all var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.budget-import-btn:hover { border-color: var(--text); color: var(--text); }
.budget-import-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.budget-admin-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

/* ========================================
   BUDGET SHEET MODE
   ======================================== */

.budget-sheet-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 2px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.budget-sheet-banner-text {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
}

.budget-sheet-banner-icon {
  font-size: 16px;
  color: var(--accent-warm);
}

.budget-sheet-banner-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.budget-unlink-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-tertiary);
  background: none;
  border: 1px solid var(--border-light);
  border-radius: 2px;
  padding: 5px 10px;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
  letter-spacing: 0.04em;
}

.budget-unlink-btn:hover {
  color: #A0705A;
  border-color: #A0705A;
}

.budget-sync-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.budget-fetch-error {
  padding: 24px;
  background: #FDF5F3;
  border: 1px solid #E8C9BF;
  border-radius: 2px;
  margin-top: 8px;
}

.budget-fetch-error-msg {
  font-family: var(--font-mono);
  font-size: 12px;
  color: #A0705A;
  line-height: 1.6;
}

.budget-sheet-hint {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
}

.budget-admin-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Budget modal (wider for the form) */
.modal.modal-budget {
  max-width: 560px;
}

/* ================================================
   PROJECT CREATION WIZARD
   ================================================ */
.modal.modal-wizard {
  max-width: 520px;
  padding: 0;
  overflow: hidden;
}
.wizard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px 20px;
  border-bottom: 1px solid var(--border);
}
.wizard-header h3 {
  margin: 0;
  font-family: var(--font-nav);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.wizard-step-counter {
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.wizard-body {
  padding: 24px 28px;
  min-height: 200px;
  max-height: calc(80vh - 140px);
  overflow-y: auto;
}
.wizard-step-title {
  font-family: var(--font-nav);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 20px;
}
.wizard-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  border-top: 1px solid var(--border);
  gap: 8px;
}
.wizard-footer span { flex: 1; }
/* Choices (radio buttons) */
.wizard-choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wizard-choice {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.wizard-choice input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.wizard-choice:hover { border-color: var(--text-secondary); }
.wizard-choice.selected {
  border-color: var(--accent);
  background: rgba(196,165,123,0.06);
}
.wizard-choice-label {
  font-family: var(--font-nav);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.02em;
}
.wizard-choice-desc {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
}
/* Module checkboxes */
.wizard-modules {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.wizard-module {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font-nav);
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
  transition: border-color var(--transition), background var(--transition);
}
.wizard-module input[type="checkbox"] {
  accent-color: var(--accent);
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.wizard-module:hover { border-color: var(--text-secondary); }
.wizard-module.selected {
  border-color: var(--accent);
  background: rgba(196,165,123,0.06);
}
/* Review step */
.wizard-review {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.wizard-review-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.wizard-review-row:last-child { border-bottom: none; }
.wizard-review-row span {
  color: var(--text-secondary);
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.wizard-review-row strong {
  color: var(--text);
  font-weight: 500;
  font-size: 12px;
}

/* Step 4 — Pick a starting point */
.wizard-section-label {
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary, var(--text-secondary));
  margin-bottom: 8px;
}
.wizard-choice-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(196, 165, 123, 0.12);
  border-radius: 3px;
  vertical-align: 1px;
}
.wizard-loading-row,
.wizard-empty-row {
  font-size: 12px;
  color: var(--text-secondary);
  padding: 14px 16px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  text-align: center;
}
.wizard-skip-row {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}
.wizard-skip-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.wizard-skip-link {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 6px 4px;
  transition: color var(--transition), text-decoration-color var(--transition);
}
.wizard-skip-link:hover {
  color: var(--text);
  text-decoration-color: var(--text-secondary);
}
.wizard-skip-radio:checked + .wizard-skip-link {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

/* ================================================
   TEMPLATE BUDGET ENTRY UI
   ================================================ */
.tbudget-info-bar {
  display: flex;
  gap: 24px;
  padding: 10px 0 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-wrap: wrap;
}
.tbudget-info-bar strong {
  color: var(--text);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.tbudget-col-headers {
  display: grid;
  grid-template-columns: 80px 1fr 110px 110px 100px 130px 56px;
  gap: 0;
  padding: 8px 12px;
  font-family: var(--font-nav);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.tbudget-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tbudget-category {
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface);
}
.tbudget-cat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  cursor: pointer;
  user-select: none;
  transition: background var(--transition);
}
.tbudget-cat-header:hover { background: var(--surface-hover); }
.tbudget-cat-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tbudget-cat-chevron {
  font-size: 10px;
  color: var(--text-secondary);
  width: 10px;
  text-align: center;
  flex-shrink: 0;
}
.tbudget-cat-code {
  font-family: var(--font-nav);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  min-width: 24px;
}
.tbudget-cat-name {
  font-family: var(--font-nav);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
}
.tbudget-cat-count {
  font-family: var(--font-nav);
  font-size: 10px;
  color: var(--text-secondary);
}
.tbudget-cat-right {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-shrink: 0;
}
.tbudget-cat-budget,
.tbudget-cat-actual {
  font-family: var(--font-nav);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  min-width: 90px;
  text-align: right;
}
.tbudget-cat-variance {
  font-family: var(--font-nav);
  font-size: 11px;
  font-weight: 600;
  min-width: 80px;
  text-align: right;
}
.tbudget-lines {
  border-top: 1px solid var(--border);
  padding: 4px 0;
}
.tbudget-line {
  display: grid;
  grid-template-columns: 80px 1fr 110px 110px 100px 130px 56px;
  gap: 0;
  align-items: center;
  padding: 7px 14px;
  border-bottom: 1px solid var(--border-light, #f0ede8);
  transition: background var(--transition);
}
.tbudget-line:last-child { border-bottom: none; }
.tbudget-line:hover { background: var(--surface-hover); }
.tbudget-line.inactive { opacity: 0.55; }
.tbudget-line-code {
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
}
.tbudget-line-name {
  font-size: 12px;
  color: var(--text);
  padding-right: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.tbudget-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--border);
  font-size: 9px;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: help;
  flex-shrink: 0;
}
.tbudget-inactive-badge {
  font-family: var(--font-nav);
  font-size: 9px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--border);
  padding: 1px 6px;
  border-radius: 10px;
  letter-spacing: 0.05em;
}
.tbudget-input {
  width: 100%;
  max-width: 96px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 4px 6px;
  text-align: right;
  transition: border-color var(--transition), background var(--transition);
  -moz-appearance: textfield;
}
.tbudget-input::-webkit-outer-spin-button,
.tbudget-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tbudget-input:hover { border-color: var(--border); }
.tbudget-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--background);
}
.tbudget-line-variance {
  font-family: var(--font-nav);
  font-size: 11px;
  font-weight: 500;
  text-align: right;
  padding-right: 8px;
}
.tbudget-status {
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 500;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 6px;
  width: 100%;
  cursor: pointer;
}
.tbudget-optional-toggle {
  padding: 8px 14px;
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  letter-spacing: 0.04em;
  border-top: 1px dashed var(--border);
  display: flex;
  align-items: center;
  gap: 6px;
}
.tbudget-optional-toggle:hover { color: var(--text); }

/* Action buttons (edit / delete) */
.tbudget-line-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition: opacity var(--transition);
}
.tbudget-line:hover .tbudget-line-actions { opacity: 1; }
.tbudget-action-edit,
.tbudget-action-delete {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  padding: 3px 5px;
  border-radius: 3px;
  line-height: 1;
  transition: background var(--transition);
}
.tbudget-action-edit  { color: var(--text-secondary); }
.tbudget-action-edit:hover  { background: var(--border); color: var(--text); }
.tbudget-action-delete { color: var(--text-secondary); }
.tbudget-action-delete:hover { background: #f5ddd8; color: #A0705A; }

/* Custom line badge */
.tbudget-custom-badge {
  font-family: var(--font-nav);
  font-size: 9px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(196,165,123,0.12);
  padding: 1px 6px;
  border-radius: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Inline edit row */
.tbudget-edit-row,
.tbudget-add-row {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-hover);
}
.tbudget-add-row {
  border-top: 1px dashed var(--accent);
  border-bottom: none;
  background: rgba(196,165,123,0.04);
}
.tbudget-edit-fields {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.tbudget-edit-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 100px;
}
.tbudget-edit-field label {
  font-family: var(--font-nav);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}
.tbudget-edit-name { flex: 1; min-width: 200px; }
.tbudget-edit-notes { flex: 1; min-width: 160px; }
.tbudget-edit-select {
  font-family: var(--font-nav);
  font-size: 11px;
  color: var(--text);
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 8px;
  cursor: pointer;
}
.tbudget-edit-actions {
  display: flex;
  gap: 8px;
}

/* + Add line button row */
.tbudget-add-btn-row {
  padding: 8px 14px;
  border-top: 1px solid var(--border);
}
.tbudget-add-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.06em;
  padding: 4px 0;
  transition: color var(--transition);
}
.tbudget-add-btn:hover { color: var(--accent); }

/* Restore buttons */
.tbudget-restore-all {
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(196,165,123,0.1);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: background var(--transition);
}
.tbudget-restore-all:hover { background: rgba(196,165,123,0.2); }
.tbudget-all-present {
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 500;
  color: var(--success, #5a8a6a);
  letter-spacing: 0.04em;
}
.tbudget-cat-restore {
  font-family: var(--font-nav);
  font-size: 9px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(196,165,123,0.1);
  border: 1px solid rgba(196,165,123,0.4);
  border-radius: 3px;
  padding: 2px 7px;
  cursor: pointer;
  margin-left: 6px;
  transition: background var(--transition);
}
.tbudget-cat-restore:hover { background: rgba(196,165,123,0.25); }

.modal.modal-budget .admin-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.budget-empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-tertiary);
}

.budget-empty-state p {
  font-family: var(--font-mono);
  font-size: 13px;
  margin-bottom: 20px;
}

.admin-budget-table-wrapper {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.admin-budget-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 800px;
}

.admin-budget-table th {
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--surface);
  white-space: nowrap;
}

.admin-budget-table th.right { text-align: right; }

.admin-budget-table td {
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
}

.admin-budget-table td.right { text-align: right; }

.admin-budget-table tr:hover td { background: var(--surface-hover); }

.admin-budget-table .cat-header-row td {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  background: var(--bg-alt);
  color: var(--text);
  padding: 10px 16px;
}

.admin-budget-table .cat-header-row:hover td { background: var(--bg-alt); }

.admin-budget-table .grand-total-row td {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding-top: 16px;
  padding-bottom: 16px;
  background: var(--bg-alt);
  border-top: 2px solid var(--text);
  border-bottom: none;
  color: var(--text);
}

.admin-budget-table .grand-total-row:hover td { background: var(--bg-alt); }

.admin-budget-table td.variance-over { color: #A0705A; }
.admin-budget-table td.variance-under { color: var(--text-secondary); }

.budget-status-pending { background: var(--upcoming-bg); color: var(--upcoming); }

/* ========================================
   PHOTO GALLERY
   ======================================== */

.photo-upload-area {
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  margin-bottom: 24px;
}

.photo-upload-area h4 {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 16px;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.photo-card {
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid var(--border-light);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.photo-card:hover {
  border-color: var(--text);
  box-shadow: 0 2px 12px rgba(26, 26, 26, 0.06);
}

.photo-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.photo-card-info {
  padding: 10px 12px;
}

.photo-card-caption {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.photo-card-meta {
  font-family: var(--font-nav);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}

.photo-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 26, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
  padding: 40px;
  cursor: pointer;
}

.photo-lightbox img {
  max-width: 90%;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 2px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
}

.photo-lightbox-caption {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 13px;
  color: #FAF9F6;
  background: rgba(26, 26, 26, 0.7);
  padding: 8px 16px;
  border-radius: 2px;
  white-space: nowrap;
}

.photo-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.photo-filter-btn {
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  background: none;
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 6px 14px;
  cursor: pointer;
  transition: all var(--transition);
}

.photo-filter-btn:hover { border-color: var(--text); color: var(--text); }
.photo-filter-btn.active { background: var(--text); color: var(--bg); border-color: var(--text); }

.photo-delete-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(26, 26, 26, 0.7);
  color: #FAF9F6;
  border: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition);
}

.photo-card:hover .photo-delete-btn { opacity: 1; }
.photo-delete-btn:hover { background: #A0705A; }

/* ========================================
   DOCUMENT VAULT
   ======================================== */

.doc-upload-area {
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  margin-bottom: 24px;
}

.doc-upload-area h4 {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 16px;
}

.doc-category-group {
  margin-bottom: 24px;
}

.doc-category-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text);
}

.doc-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 2px;
  margin-bottom: 8px;
  transition: border-color var(--transition);
}

.doc-list-item:hover { border-color: var(--text); }

.doc-icon {
  width: 36px;
  height: 36px;
  border-radius: 2px;
  background: var(--bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-nav);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

.doc-icon.pdf { background: #F0E0D8; color: #A0705A; }
.doc-icon.img { background: #E0ECE8; color: #5A8070; }
.doc-icon.doc { background: #D8E4F0; color: #5A70A0; }

.doc-info {
  flex: 1;
  min-width: 0;
}

.doc-name {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.doc-meta {
  font-family: var(--font-nav);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.doc-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.doc-download-btn {
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text);
  text-decoration: none;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 2px;
  transition: all var(--transition);
}

.doc-download-btn:hover { border-color: var(--text); background: var(--text); color: var(--bg); }

.doc-delete-btn {
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #A0705A;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 8px;
  transition: opacity var(--transition);
}

.doc-delete-btn:hover { opacity: 0.6; }

.doc-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 13px;
}

/* ========================================
   SELECTIONS TRACKER
   ======================================== */

.selection-add-area {
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  margin-bottom: 24px;
}

.selection-add-area h4 {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 16px;
}

.selection-category-group {
  margin-bottom: 32px;
}

.selection-category-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding-bottom: 10px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text);
}

.selection-card {
  display: flex;
  gap: 16px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 2px;
  margin-bottom: 12px;
  transition: border-color var(--transition);
}

.selection-card:hover { border-color: var(--border); }

.selection-image {
  width: 80px;
  height: 80px;
  border-radius: 2px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg-alt);
  cursor: pointer;
}

.selection-image-placeholder {
  width: 80px;
  height: 80px;
  border-radius: 2px;
  flex-shrink: 0;
  background: var(--bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  font-family: var(--font-nav);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.selection-details {
  flex: 1;
  min-width: 0;
}

.selection-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}

.selection-notes {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 8px;
}

.selection-meta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.selection-status {
  font-family: var(--font-nav);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: 2px;
}

.selection-status.pending { background: var(--upcoming-bg); color: var(--upcoming); }
.selection-status.approved { background: #E0ECE8; color: #5A8070; }
.selection-status.ordered { background: var(--in-progress-bg); color: var(--text); }
.selection-status.installed { background: var(--success-bg); color: var(--success); }

.selection-cost {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
}

.selection-admin-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
  flex-shrink: 0;
}

.selection-status-select {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 22px;
}

.selection-edit-btn,
.selection-delete-btn {
  font-family: var(--font-nav);
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  transition: opacity var(--transition);
}

.selection-edit-btn { color: var(--text-secondary); }
.selection-delete-btn { color: #A0705A; }
.selection-edit-btn:hover, .selection-delete-btn:hover { opacity: 0.6; }

.selection-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 13px;
}

/* ========================================
   VISUAL CLIENT TIMELINE (Horizontal)
   ======================================== */

.visual-timeline {
  margin-bottom: 48px;
  padding: 28px 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  overflow-x: auto;
}

.visual-timeline-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.visual-timeline-track {
  display: flex;
  align-items: stretch;
  gap: 0;
  position: relative;
  min-width: max-content;
}

.visual-timeline-phase {
  flex: 1;
  min-width: 100px;
  position: relative;
  text-align: center;
}

.visual-timeline-bar {
  height: 8px;
  border-radius: 1px;
  margin-bottom: 12px;
  transition: background 0.3s ease;
}

.visual-timeline-phase.completed .visual-timeline-bar { background: var(--text); }
.visual-timeline-phase.in-progress .visual-timeline-bar { background: var(--accent-warm); }
.visual-timeline-phase.upcoming .visual-timeline-bar { background: var(--border-light); }

.visual-timeline-label {
  font-family: var(--font-nav);
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  padding: 0 4px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 2.6em;
}

.visual-timeline-phase.completed .visual-timeline-label { color: var(--text); font-weight: 600; }
.visual-timeline-phase.in-progress .visual-timeline-label { color: var(--text); font-weight: 600; }

.visual-timeline-marker {
  font-family: var(--font-nav);
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-warm);
  margin-top: 6px;
  display: none;
}

.visual-timeline-phase.in-progress .visual-timeline-marker { display: block; }

.visual-timeline-connector {
  width: 2px;
  flex-shrink: 0;
}

/* Photo grid, selections, and visual timeline responsive rules are consolidated in the
   RESPONSIVE section above. */

/* ========================================
   CHANGE ORDERS
   ======================================== */

.co-status-pending {
  background: #FEF3C7;
  color: #92400E;
  font-family: var(--font-nav);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: 2px;
  display: inline-block;
  white-space: nowrap;
}

.co-status-approved {
  background: #D1FAE5;
  color: #065F46;
  font-family: var(--font-nav);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: 2px;
  display: inline-block;
  white-space: nowrap;
}

.co-status-denied {
  background: #FEE2E2;
  color: #991B1B;
  font-family: var(--font-nav);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: 2px;
  display: inline-block;
  white-space: nowrap;
}

.co-cost-positive {
  color: #A0705A;
  font-weight: 600;
}

.co-cost-negative {
  color: #065F46;
  font-weight: 600;
}

.co-approve-btn {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 8px 16px;
  background: #D1FAE5;
  color: #065F46;
  border: 1px solid #A7F3D0;
  border-radius: 2px;
  cursor: pointer;
  transition: all var(--transition);
}

.co-approve-btn:hover { background: #065F46; color: #D1FAE5; }

.co-deny-btn {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 8px 16px;
  background: #FEE2E2;
  color: #991B1B;
  border: 1px solid #FECACA;
  border-radius: 2px;
  cursor: pointer;
  transition: all var(--transition);
}

.co-deny-btn:hover { background: #991B1B; color: #FEE2E2; }

.co-card {
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 2px;
  margin-bottom: 12px;
  transition: border-color var(--transition);
}

.co-card:hover { border-color: var(--border); }

.co-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.co-card-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  flex: 1;
}

.co-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.co-card-desc {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 10px;
}

.co-card-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.co-response-area {
  margin-top: 16px;
  padding: 16px;
  background: var(--bg-alt);
  border-radius: 2px;
  border: 1px solid var(--border-light);
}

.co-response-note {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 8px;
  font-style: italic;
}

.co-summary-bar {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.co-summary-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.co-summary-label {
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
}

.co-summary-value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}

.co-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 13px;
}

/* ========================================
   INVOICES
   ======================================== */

.invoice-status-pending {
  background: #F3F3F3;
  color: #555555;
  font-family: var(--font-nav);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: 2px;
  display: inline-block;
  white-space: nowrap;
}

.invoice-status-sent {
  background: #FEF3C7;
  color: #92400E;
  font-family: var(--font-nav);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: 2px;
  display: inline-block;
  white-space: nowrap;
}

.invoice-status-paid {
  background: #D1FAE5;
  color: #065F46;
  font-family: var(--font-nav);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: 2px;
  display: inline-block;
  white-space: nowrap;
}

.invoice-status-overdue {
  background: #FEE2E2;
  color: #991B1B;
  font-family: var(--font-nav);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: 2px;
  display: inline-block;
  white-space: nowrap;
}

.invoice-summary {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.invoice-summary-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.invoice-summary-label {
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
}

.invoice-summary-value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}

.invoice-item {
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 2px;
  margin-bottom: 12px;
  transition: border-color var(--transition);
}

.invoice-item:hover { border-color: var(--border); }

.invoice-item.is-paid {
  opacity: 0.65;
}

.invoice-item-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.invoice-item-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  flex: 1;
}

.invoice-amount {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
}

.invoice-item-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.invoice-item-notes {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-top: 6px;
  font-style: italic;
}

.invoice-item-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.invoice-pay-btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 9px 20px;
  background: var(--text);
  color: var(--bg);
  border: none;
  border-radius: 2px;
  cursor: pointer;
  text-decoration: none;
  transition: opacity var(--transition);
}

.invoice-pay-btn:hover { opacity: 0.8; }

.invoice-view-btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 8px 18px;
  background: var(--bg-alt);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 2px;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition);
}

.invoice-view-btn:hover { background: var(--surface-hover); }

/* ================================================
   FINANCES TAB
   ================================================ */
.finances-section {
  margin-bottom: 48px;
}
.finances-section-label {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 20px;
  letter-spacing: -0.01em;
}
.finances-details {
  margin-top: 20px;
}
.finances-details-summary {
  font-family: var(--font-nav);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 10px 0;
  list-style: none;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.finances-details-summary::-webkit-details-marker { display: none; }
.finances-details-summary::before {
  content: '+';
  font-size: 14px;
  color: var(--accent);
  line-height: 1;
}
details[open] .finances-details-summary::before { content: '−'; }
.finances-details-summary:hover { color: var(--text); }

/* ================================================
   ACTION NEEDED BANNER (Home dashboard)
   ================================================ */
.action-needed {
  margin-bottom: 28px;
}
.action-needed-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: none;
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 13px 16px;
  margin-bottom: 8px;
  cursor: pointer;
  text-align: left;
  transition: background var(--transition), border-color var(--transition);
}
.action-needed-item:hover {
  background: rgba(196, 165, 123, 0.06);
}
.action-needed-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.action-needed-text {
  flex: 1;
  font-family: var(--font-nav);
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.02em;
}
.action-needed-arrow {
  font-size: 13px;
  color: var(--accent);
}

.invoice-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 13px;
}

/* ========================================
   MESSAGES
   ======================================== */

.messages-container {
  display: flex;
  flex-direction: column;
  height: 500px;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface);
}
.messages-thread {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.message-bubble {
  max-width: 70%;
  padding: 10px 14px;
  border-radius: 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
  position: relative;
}
.message-bubble.sent {
  align-self: flex-end;
  background: var(--text);
  color: var(--bg);
  border-bottom-right-radius: 4px;
}
.message-bubble.received {
  align-self: flex-start;
  background: var(--bg-alt);
  color: var(--text);
  border-bottom-left-radius: 4px;
}
.message-meta {
  font-family: var(--font-nav);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 3px;
  opacity: 0.7;
}
.message-role-badge {
  font-family: var(--font-nav);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 1px 5px;
  border-radius: 2px;
  margin-left: 6px;
}
.message-role-admin { background: #1a1a1a; color: #FAF9F6; }
.message-role-client { background: #C4A57B; color: #fff; }
.message-role-employee { background: #8A7B6B; color: #fff; }
.message-time {
  font-size: 9px;
  opacity: 0.5;
  margin-top: 4px;
}
.messages-input-area {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.messages-input-area input {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  outline: none;
}
.messages-input-area input:focus {
  border-color: var(--accent-warm);
}
.messages-input-area button {
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 10px 20px;
  background: #1a1a1a;
  color: #FAF9F6;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.messages-empty {
  text-align: center;
  padding: 40px;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 13px;
}

/* ========================================
   UPDATES THREAD EXTENSIONS
   ======================================== */

.update-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.message-bubble.sent .update-title { color: var(--bg); }
.message-bubble.received .update-title { color: var(--text); }

.update-type-tag {
  display: inline-block;
  font-family: var(--font-nav);
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 2px 6px;
  border-radius: 3px;
  margin-top: 6px;
  background: rgba(196,165,123,0.25);
  color: #8A7B6B;
}
.message-bubble.sent .update-type-tag {
  background: rgba(255,255,255,0.2);
  color: rgba(250,249,246,0.85);
}

.update-photos-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.update-photos-grid img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 150ms;
}
.update-photos-grid img:hover { opacity: 0.85; }

.update-files-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}
.update-files-list a {
  font-family: var(--font-nav);
  font-size: 11px;
  color: inherit;
  opacity: 0.85;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.update-files-list a:hover { opacity: 1; }

.messages-input-area {
  flex-direction: column;
  gap: 0;
  padding: 0;
}
.update-input-row {
  display: flex;
  gap: 8px;
  padding: 10px 12px 6px;
}
.update-input-row textarea {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  outline: none;
  resize: none;
  min-height: 42px;
  max-height: 120px;
  line-height: 1.5;
}
.update-input-row textarea:focus { border-color: var(--accent-warm); }
.update-send-btn {
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 9px 18px;
  background: #1a1a1a;
  color: #FAF9F6;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  align-self: flex-end;
  white-space: nowrap;
}
.update-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.update-input-extras {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px 10px;
  flex-wrap: wrap;
}
.update-extras-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-secondary);
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  white-space: nowrap;
}
.update-extras-btn:hover { border-color: var(--accent-warm); color: var(--text); }
.update-extras-btn input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}
.update-extras-btn-wrap {
  position: relative;
  display: inline-flex;
}
.update-extras-btn-wrap input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  font-size: 0;
}
.update-type-select {
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-secondary);
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 6px;
  cursor: pointer;
  outline: none;
}
.update-type-select:hover, .update-type-select:focus { border-color: var(--accent-warm); color: var(--text); }
.update-title-toggle {
  font-family: var(--font-nav);
  font-size: 10px;
  color: var(--text-tertiary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 4px;
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-left: auto;
}
.update-title-row {
  padding: 0 12px 6px;
  display: none;
}
.update-title-row.visible { display: block; }
.update-title-row input {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface);
  outline: none;
}
.update-title-row input:focus { border-color: var(--accent-warm); }
.update-selected-files {
  font-family: var(--font-nav);
  font-size: 10px;
  color: var(--text-secondary);
  padding: 0 12px 6px;
  display: none;
}
.update-selected-files.visible { display: block; }

/* ========================================
   ADMIN DASHBOARD
   ======================================== */

.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.dashboard-stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  text-align: center;
}
.dashboard-stat-number {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 800;
  color: var(--primary, #1a1a1a);
  line-height: 1;
  margin-bottom: 6px;
}
.dashboard-stat-label {
  font-family: var(--font-nav);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
}
.dashboard-project-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 32px;
  font-family: var(--font-mono);
  font-size: 13px;
}
.dashboard-project-table th {
  font-family: var(--font-nav);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  padding: 8px 12px;
  text-align: left;
  border-bottom: 2px solid var(--border);
}
.dashboard-project-table td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.dashboard-project-table tr {
  cursor: pointer;
  transition: background 0.15s;
}
.dashboard-project-table tr:hover {
  background: #f8f7f5;
}
.dashboard-progress-bar {
  width: 100%;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.dashboard-progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s;
}
.dashboard-section-title {
  font-family: var(--font-nav);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.dashboard-table-wrap {
  margin-bottom: 32px;
}

/* ========================================
   PHASE CALENDAR
   ======================================== */

.phases-layout {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}
.phases-layout > :first-child {
  flex: 1;
  min-width: 0;
}
.phase-calendar {
  width: 420px;
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
}
.phase-cal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.phase-cal-month {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.phase-cal-nav {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
}
.phase-cal-nav:hover {
  background: var(--bg-alt);
}
.phase-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.phase-cal-day-header {
  text-align: center;
  font-family: var(--font-nav);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
  padding: 4px 0 8px;
}
.phase-cal-day {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 6px 2px;
  border-radius: 4px;
  position: relative;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}
.phase-cal-day.dimmed {
  color: var(--text-tertiary);
  opacity: 0.4;
}
.phase-cal-day.today {
  font-weight: 700;
  box-shadow: inset 0 0 0 2px #1a1a1a;
}
.phase-cal-day.has-phase {
  color: #fff;
  font-weight: 500;
}
.phase-cal-day.has-phase.today {
  box-shadow: inset 0 0 0 2px #1a1a1a, inset 0 0 0 4px rgba(255,255,255,0.4);
}
.phase-cal-legend {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}
.phase-cal-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
}
.phase-cal-legend-color {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .phases-layout {
    flex-direction: column;
  }
  .phase-calendar {
    width: 100%;
  }
}

/* ── CLIENT FOOTER ─────────────────────────────── */
.client-footer {
  margin-top: 48px;
  padding: 24px 40px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.client-footer-item {
  font-family: var(--font-nav);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-tertiary);
}
.client-footer-item a {
  color: var(--text-tertiary);
  text-decoration: none;
}
.client-footer-item a:hover {
  color: var(--text-secondary);
}
.client-footer-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--border);
}

/* ── DASHBOARD FIELD NOTES ──────────────────────── */
.dashboard-fieldnotes {
  margin-top: 32px;
}
.dashboard-fieldnotes-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.dashboard-fieldnotes-title {
  font-family: var(--font-nav);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
}
.dashboard-fieldnotes-viewall {
  font-family: var(--font-nav);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}
.dashboard-fieldnotes-viewall:hover { color: var(--text); }
.dashboard-fn-item {
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 8px;
}
.dashboard-fn-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.dashboard-fn-sender {
  font-family: var(--font-nav);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}
.dashboard-fn-time {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--text-tertiary);
}
.dashboard-fn-text {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
  white-space: pre-wrap;
}
.dashboard-fn-photos {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 4px;
}

/* Audit #4.6, #4.7: consolidated empty-state component.
   Both .empty-state and .finances-invoices-empty share the same base. */
.empty-state,
.finances-invoices-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-tertiary);
}
.empty-state-icon,
.finances-invoices-empty-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--accent-warm);
  color: var(--accent-warm);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}
/* SVG illustration slot: sits above title when present */
.empty-state-illustration {
  width: 48px;
  height: 48px;
  margin: 0 auto 14px;
  color: var(--accent-warm);
  opacity: 0.7;
}
.empty-state-illustration svg {
  width: 100%;
  height: 100%;
}
.empty-state-title,
.finances-invoices-empty-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.empty-state-message,
.finances-invoices-empty-msg {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  max-width: 320px;
  margin: 0 auto;
  color: var(--text-tertiary);
}


/* ================================================
   DASHBOARD FINANCE SNAPSHOT
   ================================================ */
.dash-finances {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 0;
}
.dash-finances-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.dash-finances-title {
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
}
.dash-finances-link {
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 500;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  letter-spacing: 0.04em;
  padding: 0;
  transition: opacity var(--transition);
}
.dash-finances-link:hover { opacity: 0.7; }
.dash-finances-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 16px;
}
.dash-fin-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dash-fin-label {
  font-family: var(--font-nav);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-secondary);
}
.dash-fin-value {
  font-size: 18px;
  font-weight: 300;
  color: var(--text);
  letter-spacing: -0.01em;
}
.dash-fin-paid    { color: var(--success, #3d7a5a); }
.dash-fin-owed    { color: #A0705A; }
.dash-fin-positive { color: var(--success, #3d7a5a); }
.dash-fin-negative { color: #A0705A; }

@media (max-width: 480px) {
  .dash-finances-items { grid-template-columns: 1fr 1fr; }
}

.dash-fin-bar {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin-top: 16px;
  overflow: hidden;
}
.dash-fin-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.4s ease;
}
.dash-fin-bar-label {
  font-family: var(--font-nav);
  font-size: 9px;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 6px;
}

.finances-empty-note {
  font-size: 13px;
  color: var(--text-secondary);
  padding: 8px 0;
  margin: 0;
}

/* ================================================
   MOBILE IMPROVEMENTS
   ================================================ */

/* Scroll-hint fade on nav links */
.nav-links-wrap {
  position: relative;
  overflow: hidden;
}
.nav-links-wrap::after {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 32px;
  background: linear-gradient(to right, transparent, var(--bg));
  pointer-events: none;
  display: none;
}
@media (max-width: 768px) {
  /* Hide tagline on mobile to give tabs more room */
  .nav-logo span { display: none; }

  /* Tighten budget table on mobile */
  .tbudget-col-headers { display: none; }
  .tbudget-line {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    padding: 10px 12px;
    gap: 2px;
  }
  .tbudget-line-code {
    grid-column: 1; grid-row: 1;
    font-size: 9px;
  }
  .tbudget-line-name {
    grid-column: 1; grid-row: 2;
    font-size: 11px;
    padding-right: 8px;
  }
  .tbudget-line-budget {
    grid-column: 2; grid-row: 1;
    text-align: right;
  }
  .tbudget-line-actual {
    grid-column: 2; grid-row: 2;
    text-align: right;
  }
  /* Hide variance + status columns on mobile */
  .tbudget-line-variance,
  .tbudget-line-status,
  .tbudget-line-actions { display: none; }

  /* Category header: stack totals below name on mobile */
  .tbudget-cat-header { flex-wrap: wrap; gap: 4px; }
  .tbudget-cat-right { gap: 12px; }
  .tbudget-cat-budget, .tbudget-cat-actual { min-width: 60px; font-size: 10px; }
  .tbudget-cat-variance { min-width: 60px; font-size: 10px; }

  /* Budget input: full width on mobile */
  .tbudget-input { max-width: 80px; font-size: 11px; }

  /* Dashboard top grid: already collapses at 860px, just ensure no overflow */
  .dashboard-top-grid { gap: 12px; }

  /* Wizard: more compact on mobile */
  .modal.modal-wizard { max-width: 100%; margin: 0; border-radius: 0; min-height: 100vh; }
  .wizard-modules { grid-template-columns: 1fr; }

  /* Finances section: tighter */
  .finances-section { margin-bottom: 32px; }

  /* Info bar: wrap on mobile */
  .tbudget-info-bar { gap: 12px; }

  /* Budget edit row: wrap fields */
  .tbudget-edit-fields { flex-direction: column; }
  .tbudget-edit-field { min-width: 100%; }
}

@media (max-width: 480px) {
  /* Nav: even tighter */
  .nav-logo { font-size: 14px; letter-spacing: 0.06em; }
  .nav-link { font-size: 9px; padding: 6px 8px; }

  /* Finance snapshot: 2-col on smallest screens */
  .dash-finances-items { grid-template-columns: 1fr 1fr; }
  .dash-fin-value { font-size: 15px; }

  /* Action needed text: wrap */
  .action-needed-text { font-size: 11px; }

  /* Budget category: simplified */
  .tbudget-cat-right { flex-direction: column; align-items: flex-end; gap: 2px; }
}

/* Budget tab page header (admin template budget view) */
.budget-page-header {
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.budget-page-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
  margin: 0 0 4px;
  text-transform: uppercase;
}
.budget-page-subtitle {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0;
}

/* ================================================
   FINANCES — CARD-BASED REDESIGN
   ================================================ */

/* Page title block */
.finances-page-header {
  margin-bottom: 28px;
}
.finances-page-title {
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}
.finances-page-subtitle {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0;
}

/* Financial Overview hero card */
.finances-overview-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent-warm);
  border-radius: 10px;
  padding: 24px 28px 22px;
  margin-bottom: 20px;
}
.finances-overview-eyebrow {
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-warm);
  margin-bottom: 20px;
}

/* KPI row */
.finances-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 20px;
}
.finances-kpi-item {
  padding-right: 24px;
}
.finances-kpi-item + .finances-kpi-item {
  border-left: 1px solid var(--border);
  padding-left: 24px;
  padding-right: 24px;
}
.finances-kpi-item:last-child {
  padding-right: 0;
}
.finances-kpi-label {
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 6px;
}
.finances-kpi-value {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.finances-kpi-value.positive { color: #065F46; }
.finances-kpi-value.negative { color: #924014; }

/* Progress bar */
.finances-progress-track {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.finances-progress-fill {
  height: 100%;
  background: var(--accent-warm);
  border-radius: 2px;
  transition: width 0.5s ease;
}

/* Sync row (Google Sheets) */
.finances-sync-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-light);
}
.finances-sync-label {
  font-family: var(--font-nav);
  font-size: 11px;
  color: var(--text-tertiary);
}

/* Empty budget state (inside overview card) */
.finances-empty-budget {
  padding: 12px 0 4px;
}

/* Generic content card (invoices, breakdown) */
.finances-content-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
}
.finances-content-card-header {
  padding: 18px 24px 16px;
  border-bottom: 1px solid var(--border);
}
.finances-content-card-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  margin: 0 0 2px;
}
.finances-content-card-desc {
  font-family: var(--font-nav);
  font-size: 12px;
  color: var(--text-tertiary);
  margin: 3px 0 0;
}
.finances-content-card-body {
  padding: 20px 24px;
}
.finances-content-card-body--table {
  /* table extends to card edges */
}
.finances-content-card-body--table .budget-table-wrapper {
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* Empty invoices state */
/* .finances-invoices-empty rules consolidated with .empty-state above (audit #4.6) */

/* Mobile: 2-column KPI grid */
@media (max-width: 600px) {
  .finances-kpi-row {
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  .finances-kpi-item {
    padding: 0 16px 16px 0;
  }
  .finances-kpi-item + .finances-kpi-item {
    padding: 0 0 16px 16px;
  }
  .finances-kpi-item:nth-child(3) {
    border-left: none;
    border-top: 1px solid var(--border);
    padding: 16px 16px 0 0;
  }
  .finances-kpi-item:nth-child(4) {
    border-top: 1px solid var(--border);
    padding: 16px 0 0 16px;
  }
  .finances-overview-card {
    padding: 20px 20px 18px;
  }
  .finances-content-card-header {
    padding: 16px 20px 14px;
  }
  .finances-content-card-body {
    padding: 16px 20px;
  }
}

/* Budget Breakdown card — warm tint title header */
.finances-content-card-header--warm {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  padding: 20px 24px 18px;
  border-top: 3px solid var(--accent-warm);
}
.finances-content-card-header--warm .finances-content-card-title {
  color: var(--text);
  font-size: 18px;
  letter-spacing: -0.01em;
}
.finances-content-card-header--warm .finances-content-card-desc {
  color: var(--text-tertiary);
  margin-top: 4px;
}
@media (max-width: 600px) {
  .finances-content-card-header--warm {
    padding: 18px 20px 16px;
  }
}

/* ================================================
   ADMIN / SHARED — Premium header upgrades
   ================================================ */

/* Gold accent on all admin page headers */
.budget-page-header {
  border-top: 3px solid var(--accent-warm);
  padding-top: 20px;
}

/* Doc list items inside card body — remove top border on first item */
.finances-content-card-body .doc-list-item:first-child {
  border-top: none;
}

/* Selection cards inside card body — remove padding gap at top */
.finances-content-card-body .selection-category-group:first-child {
  padding-top: 0;
}

/* CO summary bar inside card body — remove top margin */
.finances-content-card-body .co-summary-bar {
  margin-top: 0;
}

/* Selections card body — zero padding so cards sit flush */
.finances-content-card .selection-card {
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
}
.finances-content-card .selection-card:last-child {
  border-bottom: none;
}

/* ================================================
   STYLED FILE UPLOAD
   ================================================ */
.styled-file-upload {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed var(--border);
  border-radius: 8px;
  padding: 24px 16px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  background: var(--surface);
}
.styled-file-upload:hover {
  border-color: var(--accent-warm);
  background: rgba(196, 165, 123, 0.04);
}
.styled-file-upload input[type="file"] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0.001;
  cursor: pointer;
  z-index: 2;
  font-size: 0;
  -webkit-appearance: none;
  appearance: none;
}
.styled-file-upload-label {
  font-family: var(--font-nav);
  font-size: 12px;
  color: var(--text-tertiary);
  text-align: center;
  pointer-events: none;
}
.styled-file-upload-label strong {
  color: var(--accent-warm);
  font-weight: 600;
}
.styled-file-upload.has-file {
  border-style: solid;
  border-color: var(--accent-warm);
  background: rgba(196, 165, 123, 0.06);
}
.styled-file-upload.has-file .styled-file-upload-label {
  color: var(--text);
  font-weight: 500;
}

/* ─── Super-admin impersonation banner ─────────────── */
.impersonation-banner {
  position: sticky;
  top: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px;
  background: #6B4F1F;
  color: #FAF6E8;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-bottom: 1px solid #503A14;
  box-shadow: 0 1px 0 rgba(0,0,0,0.25);
}
.impersonation-banner code {
  background: rgba(255,255,255,0.12);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 11px;
}
.impersonation-banner strong { font-weight: 600; }
.impersonation-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FFD15A;
  box-shadow: 0 0 8px #FFD15A;
  flex-shrink: 0;
}
.impersonation-leave {
  margin-left: auto;
  color: #FAF6E8;
  text-decoration: underline;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  flex-shrink: 0;
}
.impersonation-leave:hover { color: #FFD15A; }

/* ── Hero image picker (project Details tab) ─────────────── */
/* Mirrors admin-app .logo-picker but tuned for a wide 16:9 banner. */
.hero-picker {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  background: var(--surface);
  transition: border-color var(--transition), background var(--transition);
}
/* Drag-and-drop hover state. */
.hero-picker.is-dragover {
  border-color: var(--accent-warm, var(--accent));
  border-style: solid;
  background: var(--surface-hover);
}
.hero-preview {
  /* Modest preview — the form is wide; we don't want a 700px-tall image
     blowing out the Details tab. Cap absolute height so the picker reads
     as "a sample of the banner" not "the banner itself." */
  width: 100%;
  max-width: 480px;
  height: 200px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-preview-empty {
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-nav);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
}
.hero-drop-icon { opacity: 0.7; }
.hero-drop-hint {
  font-size: 11px;
  color: var(--text-tertiary);
}
.hero-picker-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* Crop dialog */
.hero-crop-wrap { max-height: 60vh; }
.hero-crop-wrap img { max-width: 100%; display: block; }

/* Hero banner on the proposal preview (below the logo/company header). */
.spm-doc-hero {
  margin: 16px 0 4px;
  border-radius: 8px;
  overflow: hidden;
}
.spm-doc-hero img {
  width: 100%;
  display: block;
  object-fit: cover;
  max-height: 240px;
}
.hero-picker-btn {
  cursor: pointer;
  margin: 0;
}
.hero-picker-btn[aria-disabled="true"] {
  opacity: 0.6;
  pointer-events: none;
}
.hero-help {
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.5;
}
.hero-error {
  font-size: 12px;
  color: #C8553D;
  background: rgba(200, 85, 61, 0.08);
  padding: 8px 10px;
  border-radius: 4px;
}

/* ── Phase reorder (Timeline tab) ────────────────────────── */
.phase-table th.phase-grip-col,
.phase-table th.phase-actions-col {
  width: 1%;
  white-space: nowrap;
}
.phase-grip-cell {
  width: 1%;
  cursor: grab;
  text-align: center;
  user-select: none;
  color: var(--text-tertiary);
  padding-right: 0 !important;
}
.phase-grip {
  display: inline-block;
  font-size: 16px;
  letter-spacing: -2px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 3px;
  cursor: grab;
}
.phase-grip:hover {
  background: var(--surface-hover);
  color: var(--text-secondary);
}
.phase-grip:active { cursor: grabbing; }

.phase-row-actions {
  white-space: nowrap;
  text-align: right;
}
.phase-insert-btn,
.phase-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  margin-left: 4px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.phase-insert-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--surface-hover);
}
.phase-delete-btn:hover {
  border-color: #C8553D;
  color: #C8553D;
  background: rgba(200, 85, 61, 0.08);
}

/* Drag visual states */
.phase-row-ghost {
  opacity: 0.4;
  background: var(--surface-hover);
}
.phase-row-chosen {
  background: var(--surface-hover);
}
.phase-row-drag {
  background: var(--surface);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.phase-reorder-help {
  font-size: 11px;
  color: var(--text-tertiary);
  margin: 8px 0 12px;
  font-style: italic;
}

/* ── Project Thread (Phase 1) ────────────────────────────── */
/* Layout: main stream + sticky right-rail Action Queue.
   Below 980px, queue collapses to a top accordion. */

.thread-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 32px;
  align-items: start;
}
@media (max-width: 980px) {
  .thread-shell { grid-template-columns: 1fr; }
}

.thread-stream {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
}
.thread-stream::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--border-light);
  pointer-events: none;
}

/* ── Item card ── */
.thread-item {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  align-items: start;
  position: relative;
  padding: 4px 0;
  transition: background var(--transition);
  border-radius: 6px;
}
.thread-item-action {
  /* warm-tan left tick for items needing action */
  box-shadow: inset 3px 0 0 var(--accent-warm);
  padding-left: 12px;
  margin-left: -12px;
}
.thread-flash {
  background: rgba(196, 165, 123, 0.12);
  transition: background 1.2s ease;
}

/* avatar */
.thread-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--accent-warm-light);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-nav);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  user-select: none;
  z-index: 1;
}
.thread-avatar-system {
  background: var(--surface);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
}

.thread-body { min-width: 0; }
.thread-item-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.thread-author {
  font-family: var(--font-nav);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.thread-time {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-tertiary);
  white-space: nowrap;
}

/* ── Pills & status ── */
.thread-pill {
  display: inline-block;
  font-family: var(--font-nav);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  background: var(--bg-alt);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.thread-pill-update { color: var(--accent-warm); border-color: var(--accent-warm-light); }
.thread-pill-co     { color: var(--accent-warm); border-color: var(--accent-warm); background: rgba(196,165,123,0.06); }
.thread-pill-sel    { color: var(--text); }
.thread-pill-inv    { color: var(--text); }
.thread-pill-log    { color: var(--text-secondary); }

.thread-status {
  font-family: var(--font-nav);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  padding: 3px 7px;
  border-radius: 3px;
}
.thread-status-pending  { background: rgba(196,165,123,0.14); color: #8A6D3B; }
.thread-status-approved { background: #EAEFE6; color: #56715A; }
.thread-status-declined { background: #F0E6E2; color: #8A4A3F; }
.thread-status-paid     { background: #EAEFE6; color: #56715A; }
.thread-status-sent     { background: var(--bg-alt); color: var(--text-secondary); }
.thread-status-void     { background: var(--bg-alt); color: var(--text-tertiary); }

/* ── Item title / text ── */
.thread-item-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 6px;
  line-height: 1.25;
}
.thread-text {
  font-family: var(--font-nav);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
}
.thread-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px;
  margin-top: 10px;
}
.thread-photo {
  width: 100%;
  border-radius: 4px;
  display: block;
  cursor: pointer;
}
.thread-files {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 8px;
}
.thread-file {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 3px;
  display: inline-block;
  width: fit-content;
}
.thread-file:hover { color: var(--accent-warm); border-color: var(--accent-warm-light); }

/* ── Cards (CO / Selection / Invoice) ── */
.thread-card {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  padding: 14px 16px;
  margin-top: 4px;
}
.thread-card-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.thread-card-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.thread-card-body {
  font-family: var(--font-nav);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 8px 0;
}
.thread-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.thread-money {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.thread-money.is-charge { color: var(--text); }
.thread-money.is-credit { color: #56715A; }

.thread-help {
  font-family: var(--font-nav);
  font-size: 11px;
  color: var(--text-tertiary);
  font-style: italic;
}

/* ── Lightweight rows: resolution / milestone ── */
.thread-resolution,
.thread-milestone {
  font-family: var(--font-nav);
  font-size: 12px;
  color: var(--text-secondary);
  padding: 8px 0 8px 54px;     /* aligns with avatar column */
  border-top: 1px dashed var(--border-light);
  border-bottom: 1px dashed var(--border-light);
  margin-left: 0;
}
.thread-resolution .thread-time,
.thread-milestone .thread-time { margin-left: 0; }

/* ── Empty state ── */
.thread-empty {
  text-align: center;
  padding: 64px 24px;
  color: var(--text-tertiary);
}
.thread-empty-title {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--text);
  margin-bottom: 8px;
}
.thread-empty-sub {
  font-family: var(--font-nav);
  font-size: 13px;
}

/* ── Action Queue ── */
.thread-queue {
  position: sticky;
  top: 24px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 18px;
  background: var(--surface);
}
.thread-queue-title {
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-secondary);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-light);
}
.thread-queue-empty {
  font-family: var(--font-nav);
  font-size: 12px;
  color: var(--text-tertiary);
  font-style: italic;
}
.thread-queue-bucket { margin-bottom: 16px; }
.thread-queue-bucket:last-child { margin-bottom: 0; }
.thread-queue-bucket-title {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
  margin-bottom: 8px;
}
.thread-queue-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  padding: 8px 10px;
  margin-bottom: 4px;
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--transition);
}
.thread-queue-item:hover {
  background: var(--surface-hover);
  border-color: var(--border-light);
}
.thread-queue-item-label {
  display: block;
  font-family: var(--font-nav);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.thread-queue-item-sub {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
}

/* Legacy admin tabs marked subtly so user can see they're being phased out */
.admin-detail-tab-legacy {
  opacity: 0.55;
}
.admin-detail-tab-legacy.active { opacity: 1; }
.admin-detail-tab-legacy::after {
  content: '·';
  margin-left: 4px;
  color: var(--accent-warm);
}

/* Thread card actions — note textarea + button row */
.thread-co-note {
  width: 100%;
  font-family: var(--font-nav);
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  resize: vertical;
  margin-bottom: 8px;
}
.thread-co-note:focus {
  outline: none;
  border-color: var(--accent-warm);
}
.thread-card-actions-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Thread composer ─────────────────────────────────────── */
.thread-composer {
  margin-top: 24px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  position: relative;
  transition: border-color var(--transition);
}
.thread-composer-closed { padding: 14px 16px; }
.thread-composer-open   { padding: 18px 20px; border-color: var(--accent-warm-light); }

.composer-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.composer-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  font-family: var(--font-nav);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: all var(--transition);
}
.composer-btn:hover {
  border-color: var(--accent-warm);
  color: var(--accent-warm);
  background: var(--surface-hover);
}
.composer-btn-primary {
  background: var(--text);
  border-color: var(--text);
  color: var(--surface);
}
.composer-btn-primary:hover {
  background: var(--accent-warm);
  border-color: var(--accent-warm);
  color: var(--text);
}
.composer-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 14px;
  line-height: 1;
}

.composer-mobile-note {
  font-family: var(--font-nav);
  font-size: 12px;
  color: var(--text-tertiary);
  font-style: italic;
}

.composer-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: transparent;
  border: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 3px;
}
.composer-close:hover { color: var(--text); background: var(--bg-alt); }

.composer-form { display: flex; flex-direction: column; gap: 10px; }
.composer-pill {
  display: inline-block;
  font-family: var(--font-nav);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  padding: 3px 8px;
  border-radius: 3px;
  background: rgba(196, 165, 123, 0.10);
  color: var(--accent-warm);
  border: 1px solid var(--accent-warm-light);
  align-self: flex-start;
}

.composer-input,
.composer-textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-nav);
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 12px;
  line-height: 1.5;
  transition: border-color var(--transition);
}
.composer-input:focus,
.composer-textarea:focus {
  outline: none;
  border-color: var(--accent-warm);
  background: var(--surface);
}
.composer-textarea {
  resize: vertical;
  min-height: 140px;       /* was 80 — too short for multi-sentence messages */
  line-height: 1.55;
  padding: 12px 14px;
  font-size: 14px;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.composer-input::placeholder,
.composer-textarea::placeholder { color: var(--text-tertiary); }

.composer-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 600px) { .composer-row { grid-template-columns: 1fr; } }

.composer-field { display: flex; flex-direction: column; gap: 4px; }
.composer-label {
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.composer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.composer-spacer { flex: 1; }
.composer-help {
  font-family: var(--font-nav);
  font-size: 11px;
  color: var(--text-tertiary);
}
.composer-attach-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition);
}
.composer-attach-btn:hover {
  border-color: var(--accent-warm);
  color: var(--accent-warm);
  background: var(--surface-hover);
}
.composer-photo-row {
  justify-content: flex-start;
  padding: 10px 12px;
  font-family: var(--font-nav);
  font-size: 13px;
  width: 100%;
}

.composer-attachments { /* reserved for selected-photo thumbnails (future polish) */ }

/* Thread unread badge */
.thread-unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 9px;
  background: var(--accent-warm);
  color: var(--text);
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: middle;
}

/* ── Thread Step 7 polish ────────────────────────────────── */

/* Empty state */
.thread-empty {
  text-align: center;
  padding: 80px 24px;
  color: var(--text-tertiary);
  border: 1px dashed var(--border-light);
  border-radius: 8px;
  background: var(--bg);
}
.thread-empty-glyph {
  font-size: 32px;
  color: var(--accent-warm);
  margin-bottom: 12px;
  line-height: 1;
}
.thread-empty-title {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 6px;
}
.thread-empty-sub {
  font-family: var(--font-nav);
  font-size: 13px;
  max-width: 360px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Loading skeleton */
.thread-skel { display: flex; flex-direction: column; gap: 24px; }
.thread-skel-item {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  align-items: start;
}
.thread-skel-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(110deg, var(--bg-alt) 30%, var(--surface-hover) 50%, var(--bg-alt) 70%);
  background-size: 200% 100%;
  animation: skel-pulse 1.4s ease-in-out infinite;
}
.thread-skel-body { display: flex; flex-direction: column; gap: 8px; }
.thread-skel-line {
  height: 12px;
  border-radius: 3px;
  background: linear-gradient(110deg, var(--bg-alt) 30%, var(--surface-hover) 50%, var(--bg-alt) 70%);
  background-size: 200% 100%;
  animation: skel-pulse 1.4s ease-in-out infinite;
}
.thread-skel-line.w50 { width: 50%; }
.thread-skel-line.w70 { width: 70%; }
.thread-skel-line.w90 { width: 90%; }
@keyframes skel-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Audit #4.9: generic skeleton loaders for Finances, Documents, Photos */
.skel-block {
  background: linear-gradient(110deg, var(--bg-alt) 30%, var(--surface-hover) 50%, var(--bg-alt) 70%);
  background-size: 200% 100%;
  animation: skel-pulse 1.4s ease-in-out infinite;
  border-radius: 4px;
}
.skeleton-row { display: flex; gap: 12px; align-items: center; padding: 12px 0; }
.skeleton-row .skel-block:first-child { width: 48px; height: 48px; border-radius: 6px; flex-shrink: 0; }
.skeleton-row .skel-block:nth-child(2) { flex: 1; height: 14px; }
.skeleton-row .skel-block:nth-child(3) { width: 60px; height: 14px; }
.skeleton-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--border-light); border-radius: 8px; }
.skeleton-card .skel-block:first-child { height: 16px; width: 60%; }
.skeleton-card .skel-block:nth-child(2) { height: 12px; width: 40%; }
.skeleton-thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
.skeleton-thumb { aspect-ratio: 1; border-radius: 6px; }

/* Composer: subtle sticky behavior on tall threads.
   Stays at bottom of the viewport so the composer is always reachable. */
@media (min-width: 981px) {
  .thread-composer-closed,
  .thread-composer-open {
    position: sticky;
    bottom: 16px;
    z-index: 5;
    box-shadow: 0 -8px 24px -16px rgba(0, 0, 0, 0.18);
  }
}

/* Mobile: action queue moves to top, becomes collapsible-feeling. */
@media (max-width: 980px) {
  .thread-shell { gap: 16px; }
  .thread-queue {
    position: static;
    order: -1;
    margin-bottom: 8px;
    padding: 14px 16px;
  }
  .thread-queue-empty { display: none; }    /* don't waste space when empty */
  .thread-empty { padding: 48px 20px; }
  .composer-btn { padding: 10px 14px; }
  .thread-stream::before { left: 14px; }
}

/* Slightly tighter composer button row on phone-sized */
@media (max-width: 540px) {
  .composer-bar { gap: 8px; }
  .composer-btn { font-size: 12px; padding: 8px 10px; }
  .composer-actions .composer-help { display: none; }
}

/* ════════════════════════════════════════════════════════════
   PHASE 2 — INLINE BUDGET WORKSPACE
   Premium spreadsheet feel without the popups. Tight typographic
   hierarchy, generous row height, calm color, warm-tan accents.
   ════════════════════════════════════════════════════════════ */

/* ── Sticky summary bar ── */
.budget-summary {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--bg);
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  margin: -8px -20px 24px;
}
.budget-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 14px;
}
@media (max-width: 720px) { .budget-summary-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
.budget-summary-cell { min-width: 0; }
.budget-summary-label {
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}
.budget-summary-value {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.budget-progress {
  height: 4px;
  background: var(--bg-alt);
  border-radius: 2px;
  overflow: hidden;
}
.budget-progress-fill {
  height: 100%;
  background: var(--accent-warm);
  transition: width 300ms ease;
}

/* ── Toolbar ── */
.budget-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.budget-toolbar-help {
  font-family: var(--font-nav);
  font-size: 12px;
  color: var(--text-tertiary);
}
.budget-toolbar-spacer { flex: 1; }

/* ── Empty state ── */
.budget-empty {
  text-align: center;
  padding: 80px 24px;
  border: 1px dashed var(--border-light);
  border-radius: 8px;
  background: var(--bg);
}
.budget-empty-glyph {
  font-size: 32px;
  color: var(--accent-warm);
  margin-bottom: 12px;
}
.budget-empty-title {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  color: var(--text);
}
.budget-empty-sub {
  font-family: var(--font-nav);
  font-size: 13px;
  color: var(--text-tertiary);
  max-width: 440px;
  margin: 0 auto 18px;
  line-height: 1.6;
}

/* ── Workspace ── */
.budget-workspace {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ── Category section ── */
.budget-cat {
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface);
  transition: box-shadow var(--transition);
}
.budget-cat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
  background: var(--surface);
  transition: background var(--transition);
}
.budget-cat-head:hover { background: var(--surface-hover); }
.budget-cat-chev {
  font-size: 14px;
  color: var(--text-tertiary);
  transition: transform 200ms ease;
}
.budget-cat.is-collapsed .budget-cat-chev { transform: rotate(-90deg); }
.budget-cat-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text);
}
.budget-cat-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-tertiary);
}
.budget-cat-spacer { flex: 1; }
.budget-cat-tot {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-width: 100px;
  text-align: right;
}
.budget-cat-tot-budget,
.budget-cat-tot-actual { color: var(--text-secondary); }

/* ── Rows ── */
.budget-cat-rows {
  border-top: 1px solid var(--border-light);
  background: var(--bg);
}
.budget-row {
  display: grid;
  grid-template-columns: 2fr 1.4fr 1fr 1fr 1fr 0.9fr 0.7fr;
  gap: 0;
  align-items: center;
  border-bottom: 1px solid var(--border-light);
  min-height: 48px;
  transition: background var(--transition);
}
.budget-row:hover:not(.budget-row-head):not(.budget-row-add) { background: var(--surface-hover); }
.budget-row:last-child { border-bottom: none; }
.budget-row-head {
  background: var(--bg-alt);
  min-height: 36px;
}
.budget-row-head .budget-cell {
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.budget-cell {
  padding: 8px 12px;
  font-family: var(--font-nav);
  font-size: 13px;
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.budget-cell-money {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.budget-cell-status,
.budget-cell-actions {
  text-align: center;
}

/* ── Inline inputs (the premium feel comes from these) ── */
.budget-inline-input {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  padding: 6px 8px;
  border-radius: 3px;
  font-family: var(--font-nav);
  font-size: 13px;
  color: var(--text);
  transition: border-color var(--transition), background var(--transition);
}
.budget-money-input {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.budget-inline-input:hover {
  border-color: var(--border-light);
  background: var(--surface);
}
.budget-inline-input:focus {
  outline: none;
  border-color: var(--accent-warm);
  background: var(--surface);
}
.budget-inline-input::placeholder {
  color: var(--text-tertiary);
  font-style: italic;
}

/* ── Status chip ── */
.budget-status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  transition: all var(--transition);
  min-width: 84px;
}
.budget-status-pending     { background: var(--bg-alt); color: var(--text-secondary); border-color: var(--border-light); }
.budget-status-in-progress { background: rgba(196, 165, 123, 0.12); color: #8A6D3B; border-color: rgba(196, 165, 123, 0.3); }
.budget-status-complete    { background: #EAEFE6; color: #56715A; border-color: rgba(86, 113, 90, 0.2); }
.budget-status-chip:hover { filter: brightness(0.97); }

/* ── Variance tone ── */
.budget-variance-neutral { color: var(--text-tertiary); }
.budget-variance-on      { color: var(--text-secondary); }
.budget-variance-under   { color: #56715A; }       /* sage \u2014 under budget */
.budget-variance-over    { color: #8A4A3F; }       /* warm sienna \u2014 over budget */

/* ── Save indicator ── */
.budget-save-indicator {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  margin-right: 6px;
}
.budget-save-indicator.is-saving { color: var(--text-tertiary); }
.budget-save-indicator.is-saved  { color: #56715A; }
.budget-save-indicator.is-error  { color: #8A4A3F; }

/* ── Delete button ── */
.budget-row-delete {
  background: transparent;
  border: 0;
  font-size: 16px;
  line-height: 1;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 3px;
  opacity: 0;
  transition: all var(--transition);
}
.budget-row:hover .budget-row-delete,
.estimate-line:hover .budget-row-delete { opacity: 1; }
.budget-row-delete:hover { background: rgba(200, 85, 61, 0.08); color: #8A4A3F; }
/* Touch / no-hover devices — always visible so the row stays usable. */
@media (hover: none) {
  .budget-row-delete { opacity: 0.65; }
  .budget-row-delete:hover { opacity: 1; }
}

/* ── Add line button + add row ── */
.budget-add-row {
  border-top: 1px dashed var(--border-light);
  background: var(--bg);
}
.budget-add-btn {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 12px 16px;
  font-family: var(--font-nav);
  font-size: 12px;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
}
.budget-add-btn:hover {
  color: var(--accent-warm);
  background: var(--surface-hover);
}
.budget-row-add {
  background: var(--surface);
  border-top: 1px solid var(--accent-warm-light);
  border-bottom: 1px solid var(--accent-warm-light);
}
.budget-row-add .budget-cell { padding: 10px 12px; }

.budget-add-toplevel {
  text-align: center;
  padding: 8px 0;
}

/* ════════════════════════════════════════════════════════════
   PHASE 3 — ESTIMATE TAB
   Builds on the same calm/premium palette as the Budget workspace.
   ════════════════════════════════════════════════════════════ */

.estimate-empty {
  text-align: center;
  padding: 96px 24px;
  border: 1px dashed var(--border-light);
  border-radius: 8px;
  background: var(--bg);
}
.estimate-empty-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 18px;
}

.estimate-header {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
}
.estimate-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}
.estimate-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
.estimate-version {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-tertiary);
  margin-left: 6px;
  vertical-align: middle;
}
.estimate-meta {
  font-family: var(--font-nav);
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 6px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.estimate-meta-sep { color: var(--text-tertiary); }

.estimate-totals-card {
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 16px 20px;
  background: var(--bg-alt);
  min-width: 280px;
}
.estimate-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 0;
}
.estimate-total-label {
  font-family: var(--font-nav);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
}
.estimate-total-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.estimate-total-secondary { color: var(--text-secondary); font-weight: 500; }
.estimate-total-grand {
  border-top: 1px solid var(--border-light);
  margin-top: 8px;
  padding-top: 10px;
}
.estimate-total-grand .estimate-total-label { color: var(--text); font-weight: 600; }
.estimate-total-grand .estimate-total-value {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--accent-warm);
}

.estimate-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border-light);
}

/* ════════════════════════════════════════════════════════════
   ESTIMATE WORKSPACE
   Three-tier responsive layout:
   - Desktop ≥1280px: full 13-column table
   - Laptop 1024-1279px: same table, tighter columns
   - Tablet 768-1023px: column visibility menu hides optional columns
   - Mobile <768px: stacked card layout (override grid → block)
   ════════════════════════════════════════════════════════════ */

/* Toolbar above the table */
.est-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.est-toolbar-search {
  position: relative;
  flex: 1 1 280px;
  min-width: 200px;
  max-width: 480px;
}
.est-toolbar-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  font-size: 14px;
  pointer-events: none;
}
.est-toolbar-search-input {
  width: 100%;
  padding: 8px 30px 8px 32px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text);
  transition: border-color var(--transition);
}
.est-toolbar-search-input:focus {
  outline: none;
  border-color: var(--accent-warm, var(--accent));
}
.est-toolbar-search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: var(--text-tertiary);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}
.est-toolbar-search-clear:hover { color: var(--text); background: var(--surface); }
.est-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.est-toolbar-btn {
  font-family: var(--font-nav);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border);
  padding: 7px 12px;
  border-radius: 5px;
  cursor: pointer;
  transition: all var(--transition);
}
.est-toolbar-btn:hover {
  color: var(--text);
  border-color: var(--text-tertiary);
  background: var(--surface);
}
.est-toolbar-cols-wrap { position: relative; }

/* ============================================================
   bpmPopover — unified floating-panel base class.
   All estimate popovers (Unit, Cost Type, Columns) use this
   as their base; per-surface classes only override width/height.
   ============================================================ */
.bpm-popover {
  position: fixed;
  z-index: 9999;
  background: var(--surface-elevated, var(--surface));
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
  padding: 6px 0;
  /* Prevent tap-highlight on mobile */
  -webkit-tap-highlight-color: transparent;
}
/* Shared header (small uppercase label at top of any bpm popover) */
.bpm-pop-head {
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-light);
}
.bpm-pop-body { padding: 4px 0; }
/* Single-select option row (buttons) */
.bpm-pop-row {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 14px;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: background var(--transition);
}
.bpm-pop-row:hover { background: var(--surface); }
.bpm-pop-row.is-selected {
  background: var(--accent-warm-soft, rgba(196,165,123,0.12));
  color: var(--accent-warm, var(--accent));
  font-weight: 600;
}
/* Multi-select / checkbox row */
.bpm-pop-check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background var(--transition);
  font-size: 13px;
  color: var(--text);
  user-select: none;
}
.bpm-pop-check-row:hover { background: var(--surface); }
.bpm-pop-check-row.is-disabled { cursor: not-allowed; opacity: 0.5; }
/* Custom checkbox square */
.bpm-pop-checkbox {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--border);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
  background: transparent;
  transition: all var(--transition);
}
.bpm-pop-checkbox.is-checked {
  background: var(--accent-warm, var(--accent));
  border-color: var(--accent-warm, var(--accent));
  color: #fff;
}
.bpm-pop-check-row .bpm-pop-row-label {
  flex: 1 1 auto;
  font-size: 13px;
  color: var(--text);
}
.bpm-pop-check-row .bpm-pop-row-hint {
  font-size: 11px;
  color: var(--text-tertiary);
  flex: 0 0 auto;
}
.bpm-pop-foot {
  padding: 8px 14px;
  border-top: 1px solid var(--border-light);
}
.bpm-pop-hint {
  font-size: 10px;
  color: var(--text-tertiary);
  font-style: italic;
}

/* Per-surface overrides — width / max-height only */
/* Columns popover (rendered into <body> by JS for z-index escape).
   Widened so hints have breathing room and labels don't get squeezed.
   Combined with stacking label + hint vertically (see .est-cols-row),
   we avoid the right-edge overflow that previous horizontal layout
   caused on long hint strings like 'Cost-code name (auto-filled)'. */
.est-cols-popover {
  width: 320px;
  max-width: calc(100vw - 32px);
}
.est-cols-pop-head {
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-light);
}
.est-cols-pop-body { padding: 4px 0; }
.est-cols-row {
  /* Vertical stack so the hint line can be as long as it needs without
     fighting the label for horizontal space. Checkbox sits in the
     gutter, label + hint stack to its right. */
  display: grid;
  grid-template-columns: 16px 1fr;
  align-items: start;
  column-gap: 10px;
  row-gap: 2px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background var(--transition);
}
.est-cols-row:hover { background: var(--surface); }
.est-cols-row input[type="checkbox"] {
  grid-row: 1 / span 2;
  align-self: center;
  cursor: pointer;
}
.est-cols-row input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 0.5; }
.est-cols-row-label {
  grid-column: 2;
  font-size: 13px;
  color: var(--text);
  line-height: 1.3;
}
.est-cols-row-hint {
  grid-column: 2;
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.35;
  word-wrap: break-word;
}

/* Bulk action bar — appears when any line is selected */
.est-bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  background: var(--surface);
  border: 1px solid var(--accent-warm-light, var(--border));
  border-radius: 6px;
  margin-bottom: 8px;
}
.est-bulk-count {
  font-family: var(--font-nav);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-warm, var(--accent));
}
.est-bulk-actions { display: flex; gap: 8px; }

/* Lines table — base */
.estimate-lines {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  /* Self-contained scroll region for the estimate / inline budget
     workspace. Long line lists used to push the whole admin page
     down, hiding the toolbar (search, expand/collapse, contract PDF
     buttons) the moment you started scanning. Now the body of the
     table scrolls inside this container while the project header,
     tab strip, and toolbar stay locked.

     Note: .estimate-line-head is `position: sticky; top: 0`. With
     overflow-y: auto here, sticky now resolves relative to this
     container — the column header row stays visible at the top of
     the scroll area as you scan lines.

     Horizontal: overflow-x: auto lets the 14-column grid scroll on
     narrower viewports without forcing a layout reflow. */
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100vh - 360px);
  min-height: 360px;
  /* Smooth touch scroll on iOS / iPad admin use. */
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 720px) {
  .estimate-lines {
    max-height: calc(100vh - 280px);
    min-height: 280px;
  }
}
.estimate-line-head,
.estimate-line,
.estimate-add-row,
.estimate-line-foot {
  display: grid;
  /* Columns: sel | code | item | desc | notes | qty | unit | unit_cost | cost | markup | margin | ctype | price | actions
     Widths sized for ≥1200px content area.
     Numeric columns: 80→100 (unit cost), 80→110 (cost), 70→100 (markup),
     56→62 (margin), 96→110 (price), 130→106 (ctype). Old widths assumed
     small line totals; once the wrapper introduced overflow context the
     content area shrunk a hair (scrollbar) and values like $13,500.00
     visually overlapped adjacent cells. New widths fit values up to
     $999,999.99 with breathing room. Belt-and-suspenders: cells now
     also clip + nowrap (see .el-cell rule below) so any future overflow
     truncates instead of colliding. */
  /* sel  code   item                 desc                 notes               qty   unit  uc    cost  mu    margin ctype  price acts */
  grid-template-columns: 36px 76px minmax(140px, 1.1fr) minmax(140px, 1.1fr) minmax(120px, 0.9fr) 50px 60px 100px 110px 100px 76px 106px 110px 40px;
  gap: 0;
  align-items: center;
  border-bottom: 1px solid var(--border-light);
  min-height: 48px;
}
/* Locked (post-acceptance) view drops the bulk-select column and the
   per-row delete cell since neither action is available once the
   estimate is signed. Without this, every cell after the missing select
   slot shifts into the wrong column track and numbers overlap. */
.estimate-lines.is-locked .estimate-line-head,
.estimate-lines.is-locked .estimate-line,
.estimate-lines.is-locked .estimate-line-foot {
  /*           code   item                 desc                 notes               qty   unit  uc    cost  mu    margin ctype  price acts */
  grid-template-columns: 76px minmax(140px, 1.1fr) minmax(140px, 1.1fr) minmax(120px, 0.9fr) 50px 60px 100px 110px 100px 76px 106px 110px 40px;
}
.estimate-line-head {
  background: var(--bg-alt);
  min-height: 36px;
  position: sticky;
  top: 0;
  z-index: 5;
}
.estimate-line-head .el-cell {
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.estimate-line-foot {
  background: var(--bg-alt);
  min-height: 44px;
  border-top: 2px solid var(--border);
  border-bottom: 0;
  position: sticky;
  bottom: 0;
  z-index: 5;
}
.estimate-line-foot .el-cell {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.estimate-line-foot .col-price { color: var(--accent-warm, var(--accent)); font-size: 14px; }

.el-cell {
  padding: 8px 10px;
  font-family: var(--font-nav);
  font-size: 13px;
  min-width: 0;
  /* Hard-clip horizontally so a too-wide value can't spill into the
     adjacent grid track. Text cells (item/desc/notes) wrap naturally
     and stay multi-line. Numeric cells get the nowrap + ellipsis
     treatment below. */
  overflow: hidden;
}
.el-cell-num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  /* Numeric cells must be single-line and clip cleanly. Wrapping
     a number across lines would be unreadable, and overflow without
     clipping was the original bug (values painting over neighbors). */
  white-space: nowrap;
  text-overflow: ellipsis;
}
.el-cell-price { font-weight: 600; color: var(--accent-warm); }
.el-cell-actions { text-align: center; padding: 4px; }
.el-cell-sel { padding: 4px; text-align: center; }
.el-cell-sel input[type="checkbox"] { cursor: pointer; }

.el-cell-name { display: flex; align-items: center; gap: 4px; min-width: 0; }
.el-cell-name .budget-inline-input { flex: 1 1 auto; min-width: 0; }
.el-notes-icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.35;
  transition: all var(--transition);
  padding: 0;
}
.el-notes-icon svg {
  display: block;
  width: 14px;
  height: 14px;
}
.estimate-line:hover .el-notes-icon { opacity: 0.9; }
.el-notes-icon.has-notes { opacity: 1; color: var(--accent-warm, var(--accent)); }
.el-notes-icon:hover {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
  opacity: 1;
}

.el-cell-unit input,
.el-unit-input {
  text-align: left;
  text-transform: none; /* Full-word units like "Each", "Lump sum" */
  font-size: 12px;
}
/* Tighten the unit cell padding so the full-word label has more room. */
.el-cell.el-cell-unit { padding: 4px 4px; }
.el-qty-input { max-width: 50px; text-align: center; }

/* Unit picker button — looks like a select (full-word label + chevron),
   opens a popover with the tenant's full unit list. Replaces the
   native <datalist> which filtered by the current value. */
.el-unit-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  width: 100%;
  padding: 6px 4px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  font: inherit;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: all var(--transition);
  white-space: nowrap;
  overflow: hidden;
}
.el-unit-btn:hover {
  background: var(--surface);
  border-color: var(--border);
}
.el-unit-btn-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.el-unit-btn-chev {
  flex: 0 0 auto;
  font-size: 9px;
  color: var(--text-tertiary);
  margin-left: 0;
}
/* Unit popover — width + scroll override; base styles from .bpm-popover */
.est-unit-popover {
  max-height: 300px;
  overflow-y: auto;
}
/* Legacy inner-element classes kept for rollback safety */
.est-unit-pop-head {
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-light);
}
.est-unit-pop-body { padding: 4px 0; display: flex; flex-direction: column; }
.est-unit-pop-row {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 14px;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: background var(--transition);
}
.est-unit-pop-row:hover { background: var(--surface); }
.est-unit-pop-row.is-selected {
  background: var(--accent-warm-soft, rgba(196, 165, 123, 0.12));
  color: var(--accent-warm, var(--accent));
  font-weight: 600;
}
.est-unit-pop-foot {
  padding: 8px 14px;
  border-top: 1px solid var(--border-light);
}
.est-unit-pop-hint {
  font-size: 10px;
  color: var(--text-tertiary);
  font-style: italic;
}

/* Item column — cost-code's auto-filled standard name (read-only context) */
.el-cell-name.col-item {
  color: var(--text-secondary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Cost Type column — multi-select tag button + popover */
.el-cell-cost-type {
  text-align: center;
  padding: 4px;
}
.el-ctype-btn {
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 4px;
  padding: 4px 6px;
  font: inherit;
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: all var(--transition);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.el-ctype-btn:hover {
  border-color: var(--accent-warm, var(--accent));
  color: var(--text);
  border-style: solid;
}
.el-ctype-list { color: var(--text); font-weight: 500; }
.el-ctype-empty { color: var(--text-tertiary); font-style: italic; }
/* Cost type popover — width override; base styles from .bpm-popover */
.est-ctype-popover {
  width: 220px;
}
/* Legacy inner-element classes kept for rollback safety */
.est-ctype-pop-head {
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-light);
}
.est-ctype-pop-body { padding: 4px 0; }
.est-ctype-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background var(--transition);
  font-size: 13px;
  color: var(--text);
}
.est-ctype-row:hover { background: var(--surface); }
.est-ctype-row input[type="checkbox"] { flex: 0 0 auto; cursor: pointer; }
.est-ctype-pop-foot {
  padding: 8px 14px;
  border-top: 1px solid var(--border-light);
}
.est-ctype-pop-hint {
  font-size: 10px;
  color: var(--text-tertiary);
  font-style: italic;
}

.el-markup {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 2px;
  padding-right: 4px;
}
.el-markup .budget-inline-input {
  width: 36px !important;
  max-width: 36px !important;
  min-width: 0;
  text-align: right;
  padding: 6px 4px;
}
.el-markup-suffix {
  font-family: var(--font-mono);
  color: var(--text-tertiary);
  font-size: 12px;
  flex: 0 0 auto;
}

/* Allowance toggle / pill */
.el-cell-alw { text-align: center; padding: 4px; }
.el-alw-toggle {
  font-family: var(--font-nav);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 4px 8px;
  border-radius: 10px;
  background: transparent;
  color: var(--text-tertiary);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all var(--transition);
  min-width: 36px;
}
.el-alw-toggle:hover { color: var(--text); border-color: var(--text-tertiary); }
.el-alw-toggle.is-on {
  background: var(--accent-warm-soft, rgba(196, 165, 123, 0.18));
  color: var(--accent-warm, var(--accent));
  border-color: var(--accent-warm, var(--accent));
}
.el-alw-pill {
  display: inline-block;
  font-family: var(--font-nav);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 4px 8px;
  border-radius: 10px;
  background: var(--accent-warm-soft, rgba(196, 165, 123, 0.18));
  color: var(--accent-warm, var(--accent));
}

/* Allowance row tone — subtle warm tint */
.estimate-line.is-allowance .el-cell-price,
.estimate-line.is-allowance .el-cell-num.col-price {
  font-style: italic;
}

/* Selected row tone */
.estimate-line.is-selected {
  background: var(--accent-warm-soft, rgba(196, 165, 123, 0.08));
}

/* Empty state inside the table */
.estimate-line-empty {
  padding: 36px;
  text-align: center;
  font-family: var(--font-nav);
  font-size: 13px;
  color: var(--text-tertiary);
  font-style: italic;
}
.estimate-line-empty .btn-link {
  background: transparent;
  border: 0;
  font: inherit;
  color: var(--accent-warm, var(--accent));
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  margin-left: 4px;
}

/* Category header — full width spanning all grid columns */
.estimate-cat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-alt, var(--bg));
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
  transition: background var(--transition);
}
.estimate-cat-head:hover { background: var(--surface-elevated, var(--surface)); }
.estimate-cat-head:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.estimate-cat-head .el-cat-chev {
  font-family: var(--font-mono);
  font-size: 14px;
  width: 18px;
  text-align: center;
  color: var(--text-secondary);
  transition: color var(--transition);
  line-height: 1;
  flex: 0 0 auto;
}
.estimate-cat-head:hover .el-cat-chev { color: var(--text); }
.estimate-cat-head .el-cat-label {
  font-family: var(--font-display, var(--font-body));
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.estimate-cat-head .el-cat-count {
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  flex: 0 0 auto;
}
.estimate-cat-head .el-cat-subtotal-cost,
.estimate-cat-head .el-cat-subtotal-markup {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  flex: 0 0 auto;
}
.estimate-cat-head .el-cat-subtotal-price {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-warm, var(--accent));
  flex: 0 0 auto;
  min-width: 100px;
  text-align: right;
}
.el-cat-add-btn {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text-secondary);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}
.el-cat-add-btn:hover {
  background: var(--accent-warm, var(--accent));
  color: white;
  border-color: var(--accent-warm, var(--accent));
}

/* Delete-category control. Subtle by default — destructive, so we
   don't want it to compete with the primary + add action visually.
   Foregrounds to a muted red on hover so it's clearly destructive
   without screaming. Sits right of the + add button with a small gap. */
.el-cat-del-btn {
  flex: 0 0 auto;
  margin-left: 6px;
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.55;
}
.el-cat-del-btn:hover {
  background: rgba(200, 85, 61, 0.10);
  color: #C8553D;
  border-color: rgba(200, 85, 61, 0.32);
  opacity: 1;
}
.el-cat-del-btn:focus-visible {
  outline: 2px solid #C8553D;
  outline-offset: 1px;
  opacity: 1;
}
.el-cat-del-btn:disabled {
  opacity: 0.3;
  cursor: wait;
}

.estimate-cat-head.is-collapsed { background: var(--surface, transparent); }
.estimate-cat-head.is-collapsed .el-cat-chev { color: var(--text-tertiary); }
.estimate-cat-head.is-collapsed .el-cat-subtotal-cost,
.estimate-cat-head.is-collapsed .el-cat-subtotal-markup { display: none; }

/* Inline notes editor row (full-width, appears below a line) */
.estimate-notes-editor {
  padding: 12px 14px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border-light);
  border-left: 3px solid var(--accent-warm, var(--accent));
}
.estimate-notes-label {
  display: block;
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 6px;
}
.estimate-notes-textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text);
  resize: vertical;
  min-height: 56px;
}
.estimate-notes-textarea:focus { outline: none; border-color: var(--accent-warm, var(--accent)); }
.estimate-notes-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

/* Inline add-line — bottom & category-scoped variants */
.estimate-add-row {
  display: grid;
  grid-template-columns: 220px minmax(160px, 1fr) 60px 56px 100px auto auto;
  gap: 8px;
  padding: 12px;
  background: var(--surface);
  border-top: 2px solid var(--accent-warm-light, var(--border));
  align-items: center;
}
.estimate-add-row.is-cat-scoped {
  grid-template-columns: 220px minmax(160px, 1fr) 60px 56px 100px auto auto;
  background: var(--accent-warm-soft, rgba(196, 165, 123, 0.06));
  border-top: 1px solid var(--accent-warm-light, var(--border));
  border-left: 3px solid var(--accent-warm, var(--accent));
  border-bottom: 1px solid var(--border-light);
}
.estimate-add-cat-label {
  grid-column: 1 / -1;
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-warm, var(--accent));
  margin-bottom: 4px;
}
.estimate-add-row .budget-inline-input { background: var(--bg); }

/* ── Responsive: hide-by-column class system ──
   .col-hide-<id> on the table hides every cell with class .col-<id>. */
.estimate-lines.col-hide-notes .col-notes,
.estimate-lines.col-hide-qty .col-qty,
.estimate-lines.col-hide-unit .col-unit,
.estimate-lines.col-hide-unit_cost .col-unit_cost,
.estimate-lines.col-hide-cost .col-cost,
.estimate-lines.col-hide-markup .col-markup,
.estimate-lines.col-hide-margin .col-margin,
.estimate-lines.col-hide-alw .col-alw {
  display: none !important;
}
/* When a column is hidden we collapse its grid track too. Use grid-template-areas variations
   for the simplest case: regenerate the grid for each hide combination. We achieve this by
   setting display:none on the cell which collapses its track in CSS Grid only when the row
   is `display: contents`. Keeping tracks visible is fine — the empty cells just disappear,
   which is acceptable visually for the low number of cells. */

/* Laptop tighten (1024-1279px) */
@media (max-width: 1279px) {
  .estimate-line-head,
  .estimate-line,
  .estimate-line-foot {
    grid-template-columns: 32px 70px minmax(130px, 1.1fr) minmax(130px, 1fr) minmax(110px, 0.8fr) 46px 56px 76px 76px 64px 52px 116px 88px 36px;
  }
  .el-cell { padding: 7px 8px; font-size: 12px; }
  .estimate-line-head .el-cell { font-size: 9px; }
}

/* Tablet (768-1023px): default-hide notes, cost, markup; user can re-enable via Columns menu */
@media (max-width: 1023px) {
  .estimate-line-head,
  .estimate-line,
  .estimate-line-foot {
    grid-template-columns: 32px 64px minmax(120px, 1.2fr) minmax(120px, 1fr) minmax(100px, 0.8fr) 42px 52px 72px 72px 62px 50px 110px 84px 34px;
  }
  /* Default-hide a few columns at this width — user can override via Columns menu. */
  .estimate-lines:not(.col-hide-cost):not(.col-hide-cost) .col-cost,
  .estimate-lines:not(.col-hide-markup) .col-markup,
  .estimate-lines:not(.col-hide-notes) .col-notes {
    /* No-op default; let user choose what to show. */
  }
  .est-toolbar-search { flex: 1 1 100%; max-width: 100%; }
}

/* ── Mobile (<768px): cards layout ── */
@media (max-width: 767px) {
  .estimate-lines { border-radius: 6px; }
  .estimate-line-head { display: none !important; }
  .estimate-line-foot {
    display: flex !important;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    position: sticky;
    bottom: 0;
  }
  .estimate-line-foot .el-cell { display: none; }
  .estimate-line-foot .col-desc,
  .estimate-line-foot .col-price { display: block; padding: 0; }

  /* Each line becomes a stacked card */
  .estimate-line {
    display: block !important;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    min-height: auto;
  }
  .estimate-line .el-cell { padding: 4px 0; display: block; }

  /* Top row of card: code + price + alw */
  .estimate-line .el-cell-sel {
    float: left;
    margin-right: 10px;
    margin-top: 2px;
  }
  .estimate-line .col-code {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 13px;
    color: var(--text-secondary);
    display: inline-block !important;
    margin-right: 8px;
  }
  .estimate-line .col-price {
    float: right;
    font-weight: 700;
    color: var(--accent-warm, var(--accent));
    font-size: 16px;
    display: inline-block !important;
  }
  .estimate-line .col-alw { display: inline-block !important; padding: 0; margin-left: 6px; }

  .estimate-line .col-desc {
    display: block !important;
    margin-top: 4px;
    margin-bottom: 6px;
    clear: both;
  }
  .estimate-line .col-desc .budget-inline-input {
    width: 100%;
    font-size: 14px;
    font-weight: 600;
  }

  /* Numeric block: qty × unit_cost = cost · markup · margin */
  .estimate-line .col-qty,
  .estimate-line .col-unit,
  .estimate-line .col-unit_cost,
  .estimate-line .col-cost,
  .estimate-line .col-markup,
  .estimate-line .col-margin {
    display: inline-block !important;
    width: auto;
    margin-right: 12px;
    font-size: 12px;
    color: var(--text-secondary);
    text-align: left;
  }
  .estimate-line .col-qty::before  { content: 'Qty: '; color: var(--text-tertiary); font-size: 10px; }
  .estimate-line .col-unit::before { content: 'Unit: '; color: var(--text-tertiary); font-size: 10px; }
  .estimate-line .col-unit_cost::before { content: '@ '; color: var(--text-tertiary); font-size: 10px; }
  .estimate-line .col-cost::before { content: 'Cost '; color: var(--text-tertiary); font-size: 10px; }
  .estimate-line .col-markup::before { content: 'MU '; color: var(--text-tertiary); font-size: 10px; }
  .estimate-line .col-margin::before { content: 'Margin '; color: var(--text-tertiary); font-size: 10px; }

  /* Inputs full width inside their cells */
  .estimate-line .budget-inline-input {
    width: 100%;
    max-width: 120px;
    display: inline-block;
  }

  /* Notes column on mobile: full width below */
  .estimate-line .col-notes {
    display: block !important;
    margin-top: 6px;
  }
  .estimate-line .col-notes .budget-inline-input { width: 100%; max-width: 100%; }

  /* Actions cell (delete) tucked in top-right */
  .estimate-line .el-cell-actions {
    position: absolute;
    right: 8px;
    top: 8px;
    width: auto;
  }
  .estimate-line { position: relative; }

  /* Category header — drop subtotals into a stacked layout */
  .estimate-cat-head {
    flex-wrap: wrap;
    gap: 6px;
  }
  .estimate-cat-head .el-cat-subtotal-cost,
  .estimate-cat-head .el-cat-subtotal-markup { display: none; }
  .estimate-cat-head .el-cat-subtotal-price { font-size: 14px; }

  /* Add row: stacked inputs */
  .estimate-add-row,
  .estimate-add-row.is-cat-scoped {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 14px 12px;
  }
  .estimate-add-row .cc-combobox,
  .estimate-add-row #estAddName { grid-column: 1 / -1; }
  .estimate-add-row .estAddQty,
  .estimate-add-row .estAddUnit,
  .estimate-add-row .estAddUnitCost { width: 100%; }
  .estimate-add-row #estAddSave,
  .estimate-add-row [data-est-cat-add-cancel] { grid-column: 1 / -1; }
  .estimate-add-cat-label { grid-column: 1 / -1; }

  /* Toolbar: buttons wrap, search full width */
  .est-toolbar { gap: 8px; }
  .est-toolbar-search { flex: 1 1 100%; max-width: 100%; }
  .est-toolbar-actions { flex: 1 1 100%; flex-wrap: wrap; }
}


/* ════════════════════════════════════════════════════════════
   BUDGET ROW: defensive overrides
   The .budget-row grid layout was being overridden by something on
   narrow viewports. Make the rule more specific and add a labeled
   stacked layout below 720px so cells are usable at any width.
   ════════════════════════════════════════════════════════════ */

.budget-cat-rows .budget-row {
  display: grid !important;
  grid-template-columns: 2fr 1.4fr 1fr 1fr 1fr 0.9fr 0.7fr;
  align-items: center;
  border-bottom: 1px solid var(--border-light);
  min-height: 48px;
}
.budget-cat-rows .budget-row > .budget-cell {
  display: block;
  padding: 8px 12px;
  min-width: 0;
}

/* Below 760px: collapse the 7-column grid into a 2-column key/value
   layout. Each cell becomes a labeled row using ::before pseudo from
   the column header. */
@media (max-width: 760px) {
  .budget-cat-rows .budget-row {
    grid-template-columns: 1fr;
    padding: 12px 10px;
    border-bottom: 1px solid var(--border);
  }
  .budget-cat-rows .budget-row.budget-row-head {
    display: none !important;             /* hide column headers, use field labels instead */
  }
  .budget-cat-rows .budget-row > .budget-cell {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 8px;
    padding: 4px 0;
    align-items: center;
  }
  .budget-cat-rows .budget-row > .budget-cell::before {
    content: attr(data-label);
    font-family: var(--font-nav);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-tertiary);
  }
  .budget-cat-rows .budget-row > .budget-cell-actions {
    grid-template-columns: 1fr auto;
    margin-top: 4px;
  }
  .budget-money-input { text-align: left; }
}

/* ════════════════════════════════════════════════════════════
   FINANCE TAB — v1 (Monarch-inspired: calm, horizontal, fewer borders)
   ════════════════════════════════════════════════════════════ */

/* The page header for Finance is suppressed in app.js (the active tab name
   above the work area is enough). If one ever shows up, keep it quiet. */
.finance-page .budget-page-header { display: none; }

/* Inline KPI row — no cards, no borders, no progress bar.
   Six values across one line at desktop. Wraps to 3 columns at narrow. */
.finance-summary {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 4px 0 8px 0;
  margin: 0 0 28px 0;
  border-bottom: 1px solid var(--border-light);
}
.finance-summary-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
  margin: 0 0 20px 0;
}
@media (max-width: 1100px) { .finance-summary-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; row-gap: 22px; } }
@media (max-width: 540px)  { .finance-summary-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; row-gap: 18px; } }

.finance-kpi { min-width: 0; }
.finance-kpi-label {
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 6px;
}
.finance-kpi-value {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.finance-kpi.is-emph .finance-kpi-value { color: var(--text); }
.finance-kpi-value.is-positive { color: #5A8A5C; }
.finance-kpi-value.is-warn     { color: #A0705A; }
.finance-kpi-sub { display: none; } /* No sub-labels under KPIs in v1 */
.finance-progress, .finance-progress-fill, .finance-progress-label { display: none; } /* Cut */

/* Subtab nav — text links separated by a thin · dot, tan underline on active */
.finance-subnav {
  display: flex;
  align-items: baseline;
  gap: 0;
  border-bottom: 0;
  margin: 0 0 24px 0;
  padding: 0;
}
.finance-subnav-sep {
  font-family: var(--font-nav);
  font-size: 14px;
  color: var(--text-tertiary);
  margin: 0 14px;
  user-select: none;
}
.finance-subnav-btn {
  font-family: var(--font-nav);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-tertiary);
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid transparent;
  padding: 4px 0 6px 0;
  margin: 0;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}
.finance-subnav-btn:hover { color: var(--text-secondary); }
.finance-subnav-btn.is-active {
  color: var(--text);
  border-bottom-color: var(--accent-warm);
  font-weight: 600;
}

/* Hide the inner subview's own page header when nested inside Finance */
.finance-subview .budget-page-header { display: none; }

/* Strip decorative borders inside the budget subview when nested in Finance.
   The top 6-KPI row IS the summary now — hide the inner budget summary
   block + progress bar so it doesn't duplicate or overlap. */
.finance-subview .budget-summary,
.finance-subview .budget-stat-cards { display: none !important; }
.finance-subview .budget-stat-card,
.finance-subview .budget-toolbar    { border: 0; background: transparent; }
.finance-subview .budget-toolbar    { padding: 0 0 12px 0; margin: 0 0 8px 0; }

/* Invoices subview toolbar */
.finance-invoices-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 16px 0;
  flex-wrap: wrap;
}
.finance-invoices-toolbar .finance-toolbar-help { margin-left: auto; }
.finance-toolbar-help {
  font-family: var(--font-nav);
  font-size: 12px;
  color: var(--text-tertiary);
}

/* Plain-text status (no chips) inside Finance — flatten existing pills */
.finance-subview [class*="invoice-status-"],
.finance-subview .budget-status-badge,
.finance-subview .budget-status-chip,
.finance-subview .thread-status {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-family: var(--font-nav) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  text-transform: capitalize !important;
  color: var(--text-secondary) !important;
  display: inline !important;
}
.finance-subview .invoice-status-paid     { color: #5A8A5C !important; }
.finance-subview .invoice-status-overdue,
.finance-subview .invoice-status-warn     { color: #A0705A !important; }
.finance-subview .invoice-status-sent     { color: var(--text) !important; }
.finance-subview .invoice-status-pending  { color: var(--text-tertiary) !important; }
.finance-subview .budget-status-complete    { color: #5A8A5C !important; }
.finance-subview .budget-status-in-progress { color: var(--text) !important; }
.finance-subview .budget-status-pending     { color: var(--text-tertiary) !important; }

/* Plain-text status (no chips) — used directly in v1 finance code */
.finance-status {
  font-family: var(--font-nav);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  color: var(--text-secondary);
}
.finance-status.tone-positive { color: #5A8A5C; }
.finance-status.tone-warn     { color: #A0705A; }
.finance-status.tone-neutral  { color: var(--text-secondary); }
.finance-status.tone-muted    { color: var(--text-tertiary); }

/* Hide the success-path Saving/Saved indicator inside Finance (v1).
   Keep the Error indicator visible. */
.finance-subview .budget-save-indicator.is-saving,
.finance-subview .budget-save-indicator.is-saved { display: none !important; }

/* Inside the Finance > Invoices subview, hide legacy chrome that the
   v1 toolbar replaces: duplicate QBO banner, manual invoice form, and
   the duplicate KPI bar. The composer + table are what's left. */
.finance-subview-invoices .admin-section > div:first-child { display: none !important; } /* QBO banner */
.finance-subview-invoices .add-update-form { display: none !important; }                /* manual form */
.finance-subview-invoices .finances-kpi-row { display: none !important; }                 /* dup summary bar */
.finance-subview-invoices .admin-section { padding: 0; }
.finance-subview-invoices .invoice-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-light);
  border-radius: 0;
  padding: 14px 0;
  margin: 0;
  box-shadow: none;
}
.finance-subview-invoices .invoice-item:hover { border-color: var(--border-light); background: transparent; }

/* Split button + dropdown for + New Invoice */
.finance-split-btn {
  display: inline-flex;
  align-items: stretch;
  position: relative;
  isolation: isolate;
}
.finance-split-btn .btn { border-radius: 4px 0 0 4px; }
.finance-split-btn .finance-split-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  background: var(--accent-warm);
  color: #fff;
  border: 0;
  border-left: 1px solid rgba(0,0,0,0.12);
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  transition: filter var(--transition);
}
.finance-split-btn .finance-split-chevron:hover { filter: brightness(0.95); }
.finance-split-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(20,20,20,0.08);
  padding: 6px;
  z-index: 40;
  display: none;
}
.finance-split-menu.is-open { display: block; }
.finance-split-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  font-family: var(--font-nav);
  font-size: 13px;
  color: var(--text);
  padding: 8px 10px;
  border-radius: 4px;
  cursor: pointer;
}
.finance-split-menu button:hover { background: var(--surface-hover); }
.finance-split-menu .finance-split-divider {
  height: 1px;
  background: var(--border-light);
  margin: 4px 2px;
}

/* Sync with QuickBooks text-link */
.finance-sync-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 6px 4px;
  font-family: var(--font-nav);
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.finance-sync-link:hover { color: var(--text); border-bottom-color: var(--accent-warm); }
.finance-sync-link .finance-sync-icon {
  font-family: var(--font-mono);
  font-size: 13px;
  display: inline-block;
  transform: translateY(-0.5px);
}
.finance-sync-link.is-syncing .finance-sync-icon { animation: finance-spin 800ms linear infinite; }
@keyframes finance-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.finance-sync-meta {
  font-family: var(--font-nav);
  font-size: 11px;
  color: var(--text-tertiary);
  margin-left: 4px;
}

/* Toast (used by 'Push to QBO coming soon' + sync feedback) */
.finance-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--text);
  color: #fff;
  padding: 10px 16px;
  border-radius: 6px;
  font-family: var(--font-nav);
  font-size: 13px;
  box-shadow: 0 6px 24px rgba(20,20,20,0.16);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
  z-index: 1000;
}
.finance-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Invoice composer — v1: full-page slide-over inside the work area */
.invoice-composer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 20, 0.28);
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.invoice-composer-overlay.is-open { opacity: 1; pointer-events: auto; }
.invoice-composer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(880px, 100%);
  background: var(--surface);
  border: 0;
  border-left: 1px solid var(--border);
  border-radius: 0;
  padding: 28px 32px 24px 32px;
  margin: 0;
  z-index: 70;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 240ms ease;
  box-shadow: -16px 0 48px rgba(20,20,20,0.10);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.invoice-composer.is-open { transform: translateX(0); }
.invoice-composer-back {
  align-self: flex-start;
  background: transparent;
  border: 0;
  font-family: var(--font-nav);
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
}
.invoice-composer-back:hover { color: var(--text); }
.invoice-composer-pull {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-nav);
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: -4px;
}
.invoice-composer-pull label { color: var(--text-secondary); cursor: pointer; }
.invoice-composer-pull input[type="radio"] { margin-right: 4px; }
.invoice-composer-totals {
  display: flex;
  justify-content: flex-end;
  gap: 32px;
  padding: 12px 0 4px 0;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.invoice-composer-totals .total-final { color: var(--text); font-weight: 700; }
.invoice-composer-qbo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-nav);
  font-size: 13px;
  color: var(--text-secondary);
  padding: 10px 0;
  border-top: 1px solid var(--border-light);
  margin-top: 4px;
}
.invoice-composer-qbo input[type="checkbox"] { width: 16px; height: 16px; }
.invoice-composer-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}
.invoice-composer-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.invoice-composer-meta {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.invoice-composer-empty {
  padding: 36px;
  text-align: center;
  font-family: var(--font-nav);
  font-size: 13px;
  color: var(--text-tertiary);
  font-style: italic;
}
.invoice-composer-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 420px;
  overflow-y: auto;
  padding-right: 4px;
}
.invoice-composer-cat {
  border: 1px solid var(--border-light);
  border-radius: 6px;
  background: var(--bg);
  overflow: hidden;
}
.invoice-composer-cat-head {
  background: var(--bg-alt);
  padding: 8px 12px;
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-light);
}
.invoice-line-pick {
  display: grid;
  grid-template-columns: 24px 1fr 1.2fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  transition: background var(--transition);
}
.invoice-line-pick:last-child { border-bottom: 0; }
.invoice-line-pick:hover { background: var(--surface-hover); }
.invoice-line-pick.is-selected { background: rgba(196, 165, 123, 0.10); }
.invoice-line-pick input[type="checkbox"] { width: 16px; height: 16px; }
.invoice-line-pick-code {
  font-family: var(--font-nav);
  font-size: 13px;
  color: var(--text);
}
.invoice-line-pick-vendor {
  font-family: var(--font-nav);
  font-size: 12px;
  color: var(--text-secondary);
}
.invoice-line-pick-amount {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.invoice-composer-form {
  margin-top: 16px;
}
.invoice-composer-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
  flex-wrap: wrap;
}


/* ════════════════════════════════════════════════════════════════════
   ADMIN DESIGN SYSTEM — CANONICAL UTILITY CLASSES (STEP 0)
   Source of truth: design/admin-implementation-brief.md
   These classes are namespaced by an .ads-scope wrapper to avoid
   colliding with legacy markup. To opt a screen into the new system,
   wrap its container in <div class="ads-scope"> and use the .t-*,
   .btn-*, .input, .table, .tabs, .status, .card, .surface-group,
   .section, .page primitives below.

   No screen consumes these classes yet — Step 0 only defines them.
   Steps 1–3 will swap the global shell, project header, and tab
   strip to use them. Tabs migrate one at a time after that.
   ════════════════════════════════════════════════════════════════════ */

.ads-scope { color: var(--text); font-family: var(--font-body); }

/* ── Type scale ──────────────────────────────────────────────────── */
.ads-scope .t-eyebrow {
  font: 600 11px/1.3 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.ads-scope .t-meta {
  font: 500 11px/1.4 var(--font-body);
  color: var(--text-tertiary);
}
.ads-scope .t-body      { font: 400 14px/1.55 var(--font-body); color: var(--text); }
.ads-scope .t-body-sec  { font: 400 14px/1.55 var(--font-body); color: var(--text-secondary); }
.ads-scope .t-control   { font: 500 13px/1.4 var(--font-body); color: var(--text); }
.ads-scope .t-table     { font: 400 13px/1.5 var(--font-body); color: var(--text); }
.ads-scope .t-table-num {
  font: 400 13px/1.5 var(--font-mono);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.ads-scope .t-table-h {
  font: 600 11px/1.3 var(--font-body);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.ads-scope .t-h3 { font: 600 16px/1.3 var(--font-body); color: var(--text); margin: 0; }
.ads-scope .t-h2 { font: 600 22px/1.2 var(--font-display); color: var(--text); letter-spacing: -0.005em; margin: 0; }
.ads-scope .t-h1 {
  font: 600 32px/1.1 var(--font-display);
  color: var(--text);
  letter-spacing: -0.01em;
  margin: 0;
}
.ads-scope .t-display {
  font: 600 56px/1.0 var(--font-display);
  color: var(--text);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin: 0;
}

/* ── Layout ──────────────────────────────────────────────────────── */
.ads-scope.page,
.ads-scope .page {
  background: var(--bg);
  min-height: 100vh;
  color: var(--text);
}
.ads-scope .page-inner {
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
  padding-bottom: 80px;
  /* Fluid: fill the space next to the sidebar rather than capping at
     1600px and centering (which left large equal gaps on wide screens).
     The --page-gutter still provides comfortable edge padding. */
  max-width: none;
  margin: 0;
}
.ads-scope .section            { margin: 32px 0; }
.ads-scope .section + .section { margin-top: 48px; }
.ads-scope .section-head       { margin-bottom: 16px; display: flex; align-items: baseline; gap: 16px; }
.ads-scope .section-head h3    { font: 600 16px/1.3 var(--font-body); color: var(--text); margin: 0; }
.ads-scope .section-head .actions { margin-left: auto; }

/* ── Project header strip (Step 2) ──────────────────────────────── */
.ads-scope .project-header {
  padding: 48px var(--page-gutter) 24px;
  border-bottom: 1px solid var(--hairline);
  background: var(--bg);
}
.ads-scope .project-header-inner { max-width: none; margin: 0; position: relative; }
.ads-scope .project-eyebrow      { margin-bottom: 6px; }
.ads-scope .project-title        { margin: 0 0 8px 0; }
.ads-scope .project-meta {
  font: 500 12px/1.5 var(--font-body);
  color: var(--text-tertiary);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
}
.ads-scope .project-meta .sep { margin: 0 12px; color: var(--text-tertiary); }
.ads-scope .project-meta .num {
  font-family: var(--font-mono);
  color: var(--text-secondary);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.ads-scope .project-header-actions {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  gap: 16px;
}

/* ── Tabs + subtabs (Step 3) ────────────────────────────────────── */
.ads-scope .tabs {
  display: flex;
  align-items: baseline;
  gap: 0;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--hairline);
}
.ads-scope .tab {
  font: 500 13px/1 var(--font-body);
  color: var(--text-tertiary);
  background: transparent;
  border: 0;
  padding: 14px 0;
  margin-right: 28px;
  cursor: pointer;
  border-bottom: 1.5px solid transparent;
  margin-bottom: -1px;
  transition: color 150ms ease, border-color 150ms ease;
}
.ads-scope .tab:hover            { color: var(--text-secondary); }
.ads-scope .tab.is-active        { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }
.ads-scope .tab:focus-visible    { outline: 2px solid var(--focus-ring); outline-offset: 4px; border-radius: 2px; }

.ads-scope .subtabs              { display: flex; align-items: baseline; }
.ads-scope .subtab {
  font: 500 13px/1 var(--font-body);
  color: var(--text-tertiary);
  background: transparent;
  border: 0;
  padding: 4px 0 6px;
  cursor: pointer;
  border-bottom: 1.5px solid transparent;
  transition: color 150ms ease, border-color 150ms ease;
}
.ads-scope .subtab:hover         { color: var(--text-secondary); }
.ads-scope .subtab.is-active     { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }
.ads-scope .subtab-sep {
  font: 400 14px/1 var(--font-body);
  color: var(--text-tertiary);
  margin: 0 14px;
  user-select: none;
}

/* ── Buttons (4 variants × 3 sizes) ──────────────────────────────── */
.ads-scope .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  font: 500 13px/1 var(--font-body);
  border-radius: var(--radius-md);
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
  white-space: nowrap;
}
.ads-scope .btn-sm { height: 32px; padding: 0 14px; font-size: 12px; }
.ads-scope .btn-lg { height: 48px; padding: 0 22px; font-size: 14px; }

.ads-scope .btn-primary {
  background: var(--accent);
  color: var(--text-inverse);
}
.ads-scope .btn-primary:hover         { background: var(--accent-strong); }
.ads-scope .btn-primary:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--focus-ring); }

.ads-scope .btn-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--hairline-strong);
}
.ads-scope .btn-secondary:hover         { background: var(--surface); border-color: var(--accent); }
.ads-scope .btn-secondary:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--focus-ring); }

.ads-scope .btn-quiet {
  background: transparent;
  color: var(--text-secondary);
  border: 0;
  height: auto;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
}
.ads-scope .btn-quiet:hover         { color: var(--text); border-bottom-color: var(--accent); }
.ads-scope .btn-quiet:focus-visible { outline: 0; color: var(--text); border-bottom-color: var(--accent); }

.ads-scope .btn-danger {
  background: transparent;
  color: var(--tone-warn);
  border: 1px solid transparent;
}
.ads-scope .btn-danger:hover         { border-color: var(--tone-warn); }
.ads-scope .btn-danger:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(160, 112, 90, 0.30); }

.ads-scope .btn[disabled],
.ads-scope .btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }

/* Allowed icon-only buttons (×, ⋮, ⋮⋮, ↓, ↻) */
.ads-scope .btn-icon {
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
}
.ads-scope .btn-icon:hover { background: var(--surface); color: var(--text); }

/* ── Forms ───────────────────────────────────────────────────────── */
.ads-scope .label {
  display: block;
  font: 600 11px/1.3 var(--font-body);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 6px;
}
.ads-scope .input {
  background: transparent;
  color: var(--text);
  border: 0;
  border-bottom: 1px solid var(--hairline);
  padding: 10px 0;
  font: 400 14px/1.4 var(--font-body);
  width: 100%;
  outline: none;
  transition: border-color 150ms ease;
  border-radius: 0;
}
.ads-scope .input::placeholder { color: var(--text-tertiary); font-style: italic; }
.ads-scope .input:hover        { border-bottom-color: var(--hairline-strong); }
.ads-scope .input:focus        { border-bottom-color: var(--accent); border-bottom-width: 1.5px; padding-bottom: 9.5px; }
.ads-scope .input.is-error     { border-bottom-color: var(--tone-warn); }

/* Form-shaped variant — bordered, surface bg, for 6+ field forms */
.ads-scope .input-card {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font: 400 14px/1.4 var(--font-body);
  width: 100%;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.ads-scope .input-card::placeholder { color: var(--text-tertiary); }
.ads-scope .input-card:hover        { border-color: var(--hairline-strong); }
.ads-scope .input-card:focus        { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.ads-scope .input-card.is-error     { border-color: var(--tone-warn); }

.ads-scope .input-money {
  font-family: var(--font-mono);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ads-scope .helper      { font: 400 12px/1.4 var(--font-body); color: var(--text-tertiary); margin-top: 6px; }
.ads-scope .helper.is-error { color: var(--tone-warn); }

/* ── Tables ──────────────────────────────────────────────────────── */
.ads-scope .table { width: 100%; border-collapse: collapse; }
.ads-scope .table th,
.ads-scope .table td {
  padding: 0 16px;
  height: 52px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: middle;
  text-align: left;
}
.ads-scope .table thead th {
  height: 40px;
  border-bottom: 1px solid var(--hairline-strong);
  font: 600 11px/1.3 var(--font-body);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  background: transparent;
}
.ads-scope .table thead th.is-numeric,
.ads-scope .table tbody td.is-numeric {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.ads-scope .table tbody td        { font: 400 13px/1.5 var(--font-body); color: var(--text); }
.ads-scope .table tbody tr:hover  { background: var(--surface); }
.ads-scope .table tbody tr.is-selected {
  background: var(--accent-soft);
  box-shadow: inset 2px 0 0 0 var(--accent);
}

.ads-scope .table-group-head {
  padding: 32px 16px 12px;
  font: 600 16px/1.3 var(--font-body);
  color: var(--text);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.ads-scope .table-group-head .count {
  font: 500 12px/1 var(--font-body);
  color: var(--text-tertiary);
}
.ads-scope .table-group-head .totals {
  margin-left: auto;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

.ads-scope .table-foot {
  position: sticky;
  bottom: 0;
  background: var(--bg);
  border-top: 1px solid var(--hairline-strong);
  padding: 16px;
  display: flex;
  justify-content: flex-end;
  gap: 32px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  z-index: 5;
}
.ads-scope .table-foot .label {
  font: 600 11px/1 var(--font-body);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-right: 8px;
}
.ads-scope .table-foot .value { color: var(--text); font-weight: 700; }

/* ── Status (plain-text + optional dot for dense lists) ────────── */
.ads-scope .status {
  font: 500 12px/1.4 var(--font-body);
  text-transform: capitalize;
  color: var(--text-secondary);
  display: inline;
}
.ads-scope .status-positive { color: var(--tone-positive); }
.ads-scope .status-warn     { color: var(--tone-warn); }
.ads-scope .status-info     { color: var(--text-secondary); }
.ads-scope .status-muted    { color: var(--text-tertiary); }
.ads-scope .status-dot::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 8px;
  vertical-align: middle;
  transform: translateY(-1px);
}

/* ── Surfaces (cards used sparingly + grouped surface for dense flows) */
.ads-scope .card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-card);
}
.ads-scope .surface-group {
  background: var(--surface);
  border: 0;
  border-radius: var(--radius-md);
  padding: 16px 20px;
}

/* ── Modal / overlay ─────────────────────────────────────────────── */
.ads-scope .modal {
  background: var(--surface-elevated);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
  border: 1px solid var(--hairline);
}


/* ════════════════════════════════════════════════════════════════════
   STEPS 1–3 — ADMIN SHELL · PROJECT HEADER · TAB STRIP (live)
   The admin shell wraps everything in .ads-scope.admin-shell so the
   canonical utility classes apply. Legacy nav-bar / budget-page-header
   styles still exist for the client portal — they are not touched.
   ════════════════════════════════════════════════════════════════════ */

/* ── Reset legacy main padding inside admin shell so .page-inner can own gutters */
.ads-scope.admin-shell .main-content { max-width: none; padding: 0; }

/* ── Step 1: global app shell ──────────────────────────────────── */
.ads-scope .app-shell {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--hairline);
}
.ads-scope .app-shell-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 56px;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 var(--page-gutter);
}
.ads-scope .app-shell-brand {
  display: flex;
  flex-direction: column;
  line-height: 1;
  white-space: nowrap;
}
.ads-scope .app-shell-tenant {
  font: 600 14px/1 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}
.ads-scope .app-shell-sub {
  margin-top: 4px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ads-scope .app-shell-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}
.ads-scope .app-shell-nav-link {
  font: 500 13px/1 var(--font-body);
  color: var(--text-tertiary);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 4px 0;
  border-bottom: 1.5px solid transparent;
  transition: color 150ms ease, border-color 150ms ease;
}
.ads-scope .app-shell-nav-link:hover    { color: var(--text-secondary); }
.ads-scope .app-shell-nav-link.is-active{
  color: var(--text);
  font-weight: 600;
  border-bottom-color: var(--accent);
}
.ads-scope .app-shell-spacer    { flex: 1; }
.ads-scope .app-shell-switcher  { white-space: nowrap; }
.ads-scope .app-shell-account   { display: flex; align-items: center; }
.ads-scope .app-shell-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-secondary);
  font: 600 11px/1 var(--font-body);
  letter-spacing: 0.04em;
}
.ads-scope .app-shell-avatar:hover { background: var(--surface-hover); color: var(--text); }

/* ── Shell popovers (project switcher + account menu) ───────────────── */
.ads-scope .app-shell-switcher-wrap { position: relative; }
.ads-scope .app-shell-account       { position: relative; }
.ads-scope .app-shell-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 200;
  min-width: 240px;
  max-width: 360px;
  max-height: 70vh;
  overflow-y: auto;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--hairline-strong, var(--border-light));
  border-radius: 12px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.08);
  animation: appShellPopIn 140ms ease-out;
}
.ads-scope .app-shell-switcher-pop { min-width: 260px; }
.ads-scope .app-shell-account-pop  { min-width: 200px; }
@keyframes appShellPopIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ads-scope .app-shell-pop-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 9px 12px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  font: 500 13px/1.2 var(--font-body);
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.ads-scope .app-shell-pop-item:hover {
  background: var(--bg-alt, rgba(196, 165, 123, 0.08));
  color: var(--text);
}
.ads-scope .app-shell-pop-item.is-current {
  color: var(--text);
  font-weight: 600;
}
.ads-scope .app-shell-pop-item--quiet {
  color: var(--text-tertiary);
  font-weight: 400;
}
.ads-scope .app-shell-pop-item--danger { color: #C8553D; }
.ads-scope .app-shell-pop-item--danger:hover {
  background: rgba(200, 85, 61, 0.10);
  color: #C8553D;
}
.ads-scope .app-shell-pop-item-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ads-scope .app-shell-pop-item-check {
  flex-shrink: 0;
  color: var(--accent, var(--accent-warm));
  font-size: 12px;
}
.ads-scope .app-shell-pop-sep {
  height: 1px;
  background: var(--hairline, var(--border-light));
  margin: 6px 4px;
}
.ads-scope .app-shell-pop-empty {
  padding: 14px 12px;
  font: 400 12px/1.4 var(--font-body);
  color: var(--text-tertiary);
  text-align: center;
}

/* ── Step 2: project header strip ─────────────────────────────── */
.ads-scope .project-header-back {
  display: inline-block;
  margin-bottom: 12px;
  font: 500 12px/1 var(--font-body);
}
.ads-scope .project-meta .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--text-secondary);
}
.ads-scope .project-meta .status { margin: 0; }

/* Hide every duplicate inner page header inside admin tab content.
   Each tab still emits its own .budget-page-header for legacy reasons;
   the project header strip already says the project name + meta. */
.ads-scope .admin-detail-tab-content .budget-page-header,
.ads-scope .admin-detail-tab-content .finances-page-header { display: none !important; }

/* Hide legacy admin-detail-back inside admin tab content (it's in the strip now) */
.ads-scope .admin-detail-tab-content .admin-detail-back { display: none !important; }

/* ── Step 3: tab strip ────────────────────────────────────────── */
.ads-scope .admin-detail-body {
  padding-top: 24px;
}
.ads-scope .admin-detail-tabs {
  margin-bottom: 32px;
}
.ads-scope .admin-detail-tab-content {
  /* All tab content sits inside .page-inner; tabs supply their own
     internal section spacing. Reset legacy admin-section padding. */
}
.ads-scope .admin-detail-tab-content .admin-section {
  padding: 0;
  border: 0;
  background: transparent;
  margin: 0;
}

/* When the legacy .admin-detail-tab class is also present (it is — we kept
   the data-detail-tab attribute), the canonical .tab styles already win.
   This block is just a safety override for any leftover legacy styling. */
.ads-scope .admin-detail-tab,
.ads-scope .admin-detail-tabs .tab {
  /* canonical .tab applies */
}

/* ── Pre-existing admin styles that conflict at the top level ── */
/* The legacy .nav-bar inside the admin shell is replaced by .app-shell.
   If any code path still emits one, hide it inside the admin-shell so
   we don't get a double header. */
/* Hide ONLY the legacy top-level admin nav-bar (which sits as a direct
   sibling of the new app-shell). The client preview view also renders
   <nav class="nav-bar"> inside .admin-main (the client portal nav), and
   that one MUST stay visible so preview mode has its tabs. */
.ads-scope.admin-shell > nav.nav-bar { display: none !important; }

/* Top-level admin pages (Projects index, Clients, Team) get the same
   air a project header strip would give them. */
.ads-scope.admin-shell .main-content > .page-inner {
  padding-top: 48px;
}


/* ════════════════════════════════════════════════════════════════════
   STEP 4 — DETAILS TAB
   Re-skin the legacy admin-section / admin-form-row / admin-input form
   at the canonical tokens. No markup changes. Bottom-hairline inputs
   per the brief. Adds a section header as a typographic lead.
   ════════════════════════════════════════════════════════════════════ */

/* The Details tab itself wraps in admin-section. Add a lead. */
.ads-scope .admin-detail-tab-content .admin-section > form#adminProjectForm::before {
  content: "Project facts";
  display: block;
  font: 600 16px/1.3 var(--font-body);
  color: var(--text);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
}

/* Grid: 2-column form-row. The input bottom-hairlines do the divider work,
   so the row itself stays unbordered. Generous vertical gap. */
.ads-scope .admin-detail-tab-content .admin-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 32px;
  padding: 8px 0 20px 0;
  margin: 0;
  border: 0;
}
.ads-scope .admin-detail-tab-content .admin-form-full {
  grid-column: 1 / -1;
}
.ads-scope .admin-detail-tab-content .admin-form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ads-scope .admin-detail-tab-content .admin-form-group > label {
  font: 600 11px/1.3 var(--font-body);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0;
}

/* Inputs: bottom-hairline-only ledger style (the canonical Project facts feel) */
.ads-scope .admin-detail-tab-content .admin-input,
.ads-scope .admin-detail-tab-content .admin-select,
.ads-scope .admin-detail-tab-content .admin-textarea {
  background: transparent !important;
  color: var(--text) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--hairline) !important;
  border-radius: 0 !important;
  padding: 8px 0 !important;
  font: 400 14px/1.5 var(--font-body) !important;
  outline: none;
  width: 100%;
  transition: border-color 150ms ease;
  min-height: 0 !important;
}
.ads-scope .admin-detail-tab-content .admin-input:hover,
.ads-scope .admin-detail-tab-content .admin-select:hover {
  border-bottom-color: var(--hairline-strong) !important;
}
.ads-scope .admin-detail-tab-content .admin-input:focus,
.ads-scope .admin-detail-tab-content .admin-select:focus,
.ads-scope .admin-detail-tab-content .admin-textarea:focus {
  border-bottom-color: var(--accent) !important;
  border-bottom-width: 1.5px !important;
  padding-bottom: 7.5px !important;
  box-shadow: none !important;
}
.ads-scope .admin-detail-tab-content .admin-input::placeholder,
.ads-scope .admin-detail-tab-content .admin-textarea::placeholder {
  color: var(--text-tertiary);
  font-style: italic;
}

/* Hero picker: lighten the surrounding chrome */
.ads-scope .admin-detail-tab-content .hero-picker {
  background: transparent;
  border: 0;
  padding: 0;
}
.ads-scope .admin-detail-tab-content .hero-preview {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
}

/* Save button row — lift padding, no border */
.ads-scope .admin-detail-tab-content .btn-group {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  display: flex;
  gap: 12px;
}


/* ════════════════════════════════════════════════════════════════════
   STEP 5 — FINANCE TAB RE-SKIN
   The v1 structure is correct. This pass swaps the legacy palette
   for canonical tokens, drops bordered category cards in favor of
   typographic group heads, lifts row height to 52px, ships a sticky
   bottom totals row on Budget.
   ════════════════════════════════════════════════════════════════════ */

/* Promote the v1 KPI row labels to canonical type. */
.ads-scope .finance-summary { padding: 0 0 24px 0; margin: 0 0 24px 0; border-bottom: 1px solid var(--hairline); }
.ads-scope .finance-kpi-label { font-weight: 600; letter-spacing: 0.14em; }

/* Subnav already canonical via .subtab in CSS — make sure spacing matches */
.ads-scope .finance-subnav { margin-bottom: 32px; }

/* Strip the bordered category cards in the inline workspace. Whitespace
   + a heavier type-weight header does the grouping. */
.ads-scope .finance-subview .budget-workspace { gap: 0; }
.ads-scope .finance-subview .budget-cat {
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  margin-top: 24px;
}
.ads-scope .finance-subview .budget-cat:first-child { margin-top: 8px; }
.ads-scope .finance-subview .budget-cat-head {
  background: transparent !important;
  padding: 16px 0 12px 0 !important;
  border-bottom: 1px solid var(--hairline-strong);
  display: flex;
  align-items: baseline;
}
.ads-scope .finance-subview .budget-cat-head:hover {
  background: transparent !important;
}
.ads-scope .finance-subview .budget-cat-name {
  font: 600 16px/1.3 var(--font-body) !important;
  letter-spacing: 0 !important;
  color: var(--text);
}
.ads-scope .finance-subview .budget-cat-tot {
  color: var(--text-secondary);
  font-weight: 500;
}

/* Rows: lift to ~52px, hairlines only, no zebra */
.ads-scope .finance-subview .budget-cat-rows {
  background: transparent !important;
  border-top: 0 !important;
}
.ads-scope .finance-subview .budget-row {
  min-height: 52px !important;
  border-bottom: 1px solid var(--hairline) !important;
}
.ads-scope .finance-subview .budget-row-head {
  background: transparent !important;
  min-height: 40px !important;
  border-bottom: 1px solid var(--hairline-strong) !important;
}
.ads-scope .finance-subview .budget-row-head .budget-cell {
  font: 600 11px/1.3 var(--font-body) !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: var(--text-tertiary) !important;
}
.ads-scope .finance-subview .budget-row:hover:not(.budget-row-head):not(.budget-row-add) {
  background: var(--surface) !important;
}
.ads-scope .finance-subview .budget-cell {
  padding: 12px 16px !important;
}
.ads-scope .finance-subview .budget-cell-money {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums !important;
}

/* Inline editable cells: bottom-hairline ledger style */
.ads-scope .finance-subview .budget-inline-input {
  border: 0 !important;
  border-bottom: 1px solid transparent !important;
  background: transparent !important;
  padding: 6px 0 !important;
  border-radius: 0 !important;
}
.ads-scope .finance-subview .budget-inline-input:hover {
  border-bottom-color: var(--hairline) !important;
  background: transparent !important;
}
.ads-scope .finance-subview .budget-inline-input:focus {
  border-bottom-color: var(--accent) !important;
  border-bottom-width: 1.5px !important;
  background: transparent !important;
  outline: none !important;
}

/* Add-line ghost button at bottom of each category */
.ads-scope .finance-subview .budget-add-row { padding: 8px 0; border-bottom: 1px solid var(--hairline); }
.ads-scope .finance-subview .budget-add-btn {
  background: transparent;
  border: 0;
  color: var(--text-tertiary);
  font: 400 13px/1.4 var(--font-body);
  padding: 8px 0;
  cursor: pointer;
  width: 100%;
  text-align: left;
}
.ads-scope .finance-subview .budget-add-btn:hover { color: var(--text); }

/* Top-level add */
.ads-scope .finance-subview .budget-add-toplevel { padding: 24px 0 0 0; }

/* Sticky bottom total bar (canonical .table-foot for Finance) */
.ads-scope .finance-table-foot {
  position: sticky;
  bottom: 0;
  background: var(--bg);
  border-top: 1px solid var(--hairline-strong);
  padding: 16px 0;
  margin-top: 32px;
  display: flex;
  justify-content: flex-end;
  gap: 48px;
  z-index: 5;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.ads-scope .finance-table-foot .label {
  font: 600 11px/1 var(--font-body);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-right: 10px;
}
.ads-scope .finance-table-foot .value { color: var(--text); font-weight: 700; }
.ads-scope .finance-table-foot .value.tone-warn { color: var(--tone-warn); }

/* Estimate subview header strip — promote to surface-group treatment.
   Drops the boxed estimate-header card per the brief. */
.ads-scope .finance-subview .estimate-header {
  background: transparent !important;
  border: 0 !important;
  padding: 0 0 24px 0 !important;
  margin: 0 0 24px 0 !important;
  border-bottom: 1px solid var(--hairline) !important;
}
.ads-scope .finance-subview .estimate-title {
  font: 600 22px/1.2 var(--font-display) !important;
  color: var(--text);
  letter-spacing: -0.005em;
}

/* Invoices subview row tightening — already partly done in v1; align row
   height + remove invoice-amount label background */
.ads-scope .finance-subview-invoices .invoice-item {
  padding: 16px 0 !important;
  border-bottom: 1px solid var(--hairline) !important;
}


/* ════════════════════════════════════════════════════════════════════
   STEP 6 — TIMELINE TAB
   Active-phase hero + canonical phase table.
   ════════════════════════════════════════════════════════════════════ */

.ads-scope .timeline-hero {
  padding: 0 0 32px 0;
  margin: 0 0 32px 0;
  border-bottom: 1px solid var(--hairline);
}
.ads-scope .timeline-hero .t-eyebrow { margin-bottom: 8px; }
.ads-scope .timeline-hero-name {
  font: 600 clamp(40px, 5vw, 56px)/1.0 var(--font-display);
  letter-spacing: -0.02em;
  margin: 0 0 12px 0;
}
.ads-scope .timeline-hero-meta { margin: 0; }

/* Phase table re-skin — strip the legacy admin-table chrome */
.ads-scope .admin-detail-tab-content .phase-table {
  border-collapse: collapse;
  width: 100%;
  background: transparent;
  border: 0;
}
.ads-scope .admin-detail-tab-content .phase-table thead th {
  font: 600 11px/1.3 var(--font-body);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  background: transparent;
  border-bottom: 1px solid var(--hairline-strong);
  padding: 10px 12px;
  text-align: left;
}
.ads-scope .admin-detail-tab-content .phase-table tbody td {
  border-bottom: 1px solid var(--hairline);
  padding: 10px 12px;
  background: transparent;
  height: 52px;
  vertical-align: middle;
}
.ads-scope .admin-detail-tab-content .phase-table tbody tr:hover td {
  background: var(--surface);
}
.ads-scope .admin-detail-tab-content .phase-table .phase-num {
  font-family: var(--font-mono);
  color: var(--text-tertiary);
}
.ads-scope .admin-detail-tab-content .phase-table .phase-grip {
  color: var(--text-tertiary);
  cursor: grab;
}
.ads-scope .admin-detail-tab-content .phase-table .admin-input,
.ads-scope .admin-detail-tab-content .phase-table .admin-select {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid transparent !important;
  border-radius: 0 !important;
  padding: 6px 0 !important;
}
.ads-scope .admin-detail-tab-content .phase-table .admin-input:hover,
.ads-scope .admin-detail-tab-content .phase-table .admin-select:hover {
  border-bottom-color: var(--hairline) !important;
}
.ads-scope .admin-detail-tab-content .phase-table .admin-input:focus,
.ads-scope .admin-detail-tab-content .phase-table .admin-select:focus {
  border-bottom-color: var(--accent) !important;
  border-bottom-width: 1.5px !important;
}

/* Phase calendar legend below the table — keep, but lighten chrome */
.ads-scope .phase-calendar {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--hairline);
}

/* Reorder help line + insert/delete buttons */
.ads-scope .phase-reorder-help { color: var(--text-tertiary); font: 400 12px/1.5 var(--font-body); margin-top: 12px; }
.ads-scope .phase-insert-btn,
.ads-scope .phase-delete-btn {
  background: transparent;
  border: 0;
  color: var(--text-tertiary);
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 13px;
}
.ads-scope .phase-insert-btn:hover { background: var(--surface); color: var(--text); }
.ads-scope .phase-delete-btn:hover { background: var(--surface); color: var(--tone-warn); }


/* ════════════════════════════════════════════════════════════════════
   STEP 7 — DOCUMENTS TAB
   Recent-5 lead + canonical archive list (typographic categories).
   ════════════════════════════════════════════════════════════════════ */

.ads-scope .docs-recent {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--hairline);
}
.ads-scope .docs-recent-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}
.ads-scope .docs-recent-list {
  display: flex;
  flex-direction: column;
}
.ads-scope .docs-recent-item {
  display: grid;
  grid-template-columns: 1fr 140px 100px 100px;
  gap: 24px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
}
.ads-scope .docs-recent-item:last-child { border-bottom: 0; }
.ads-scope .docs-recent-name {
  font: 500 13px/1.4 var(--font-body);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ads-scope .docs-recent-action { text-align: right; }

.ads-scope .docs-archive-head { margin-bottom: 12px; }

/* Strip the bordered category card chrome inside the documents archive */
.ads-scope .admin-detail-tab-content .docs-archive .finances-content-card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin-bottom: 24px !important;
  box-shadow: none !important;
}
.ads-scope .admin-detail-tab-content .docs-archive .finances-content-card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--hairline-strong) !important;
  padding: 16px 0 12px 0 !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 12px !important;
}
.ads-scope .admin-detail-tab-content .docs-archive .finances-content-card-title {
  font: 600 16px/1.3 var(--font-body) !important;
  letter-spacing: 0 !important;
  color: var(--text) !important;
  text-transform: none !important;
}
.ads-scope .admin-detail-tab-content .docs-archive .finances-content-card-desc {
  font: 500 11px/1 var(--font-body) !important;
  color: var(--text-tertiary) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.ads-scope .admin-detail-tab-content .docs-archive .finances-content-card-body {
  padding: 0 !important;
}
.ads-scope .admin-detail-tab-content .docs-archive .doc-list-item {
  background: transparent !important;
  border-bottom: 1px solid var(--hairline) !important;
  padding: 14px 0 !important;
}

/* Upload area: simplify (it was on a card-shaped surface previously) */
.ads-scope .docs-archive .doc-upload-area {
  background: transparent;
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--radius-md);
  padding: 24px;
  margin-bottom: 32px;
}


/* ════════════════════════════════════════════════════════════════════
   STEP 8 — THREAD TAB
   Composer is the lead. Strip thread-card chrome inside admin so
   synthesizer items look like editorial entries, not boxed widgets.
   Plain-text status + denser feed.
   ════════════════════════════════════════════════════════════════════ */

.ads-scope .admin-detail-tab-content .thread-composer-closed,
.ads-scope .admin-detail-tab-content .thread-composer-open {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin: 0 0 32px 0;
  box-shadow: none;
}
.ads-scope .admin-detail-tab-content .thread-composer-open {
  border-color: var(--hairline-strong);
}

/* Strip the thread-card chrome inside admin (keeps client portal styling) */
.ads-scope .admin-detail-tab-content .thread-card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 8px 0 !important;
  margin-top: 0;
}
.ads-scope .admin-detail-tab-content .thread-card-title {
  font: 600 15px/1.3 var(--font-body) !important;
  color: var(--text);
  letter-spacing: 0;
}
.ads-scope .admin-detail-tab-content .thread-card-meta {
  font: 500 11px/1.4 var(--font-body) !important;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
}

/* Plain-text status everywhere in the admin thread */
.ads-scope .admin-detail-tab-content .thread-status {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font: 500 11px/1.4 var(--font-body) !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
}
.ads-scope .admin-detail-tab-content .thread-status-pending  { color: var(--text-secondary) !important; }
.ads-scope .admin-detail-tab-content .thread-status-approved,
.ads-scope .admin-detail-tab-content .thread-status-paid     { color: var(--tone-positive) !important; }
.ads-scope .admin-detail-tab-content .thread-status-declined { color: var(--tone-warn) !important; }
.ads-scope .admin-detail-tab-content .thread-status-sent     { color: var(--text-secondary) !important; }
.ads-scope .admin-detail-tab-content .thread-status-void     { color: var(--text-tertiary) !important; }

/* Action queue — strip its boxed treatment */
.ads-scope .admin-detail-tab-content .action-queue {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--hairline) !important;
  border-radius: 0 !important;
  padding: 0 0 24px 0 !important;
  margin-bottom: 32px !important;
}

/* Tighter feed rows */
.ads-scope .admin-detail-tab-content .thread-item {
  padding: 16px 0;
  border-bottom: 1px solid var(--hairline);
}
.ads-scope .admin-detail-tab-content .thread-item:last-child {
  border-bottom: 0;
}


/* ════════════════════════════════════════════════════════════════════
   STEP 9 — TOP-LEVEL ADMIN PAGES (Projects index, Clients, Team)
   Re-skin admin-table, admin-project-card, dashboard-stats, table-status
   pills, and the hard-coded inline button styles for delete actions.
   ════════════════════════════════════════════════════════════════════ */

/* Page header strip stays as the canonical t-h1 + t-meta; legacy
   budget-page-header still emits inside these pages. Skin it down
   so it reads as a section opener, not as a giant heading. */
.ads-scope.admin-shell .main-content > .page-inner > .budget-page-header {
  padding: 0 0 24px 0;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 32px;
  display: block;
}
.ads-scope.admin-shell .main-content > .page-inner > .budget-page-header .budget-page-title {
  font: 600 32px/1.1 var(--font-display);
  color: var(--text);
  letter-spacing: -0.01em;
  text-transform: none;
  margin: 0 0 6px 0;
}
.ads-scope.admin-shell .main-content > .page-inner > .budget-page-header .budget-page-subtitle {
  font: 500 12px/1.4 var(--font-body);
  color: var(--text-tertiary);
  margin: 0;
}

/* Top-level dashboard stat cards: drop the boxed style, lift to inline KPI row */
.ads-scope.admin-shell .dashboard-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin: 0 0 48px 0;
  padding: 0;
  border: 0;
}
.ads-scope.admin-shell .dashboard-stat-card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.ads-scope.admin-shell .dashboard-stat-number {
  font: 600 32px/1.1 var(--font-display) !important;
  color: var(--text) !important;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
}
.ads-scope.admin-shell .dashboard-stat-label {
  font: 600 11px/1.3 var(--font-body) !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: var(--text-tertiary) !important;
}

/* admin-table — canonical 52px row table */
.ads-scope.admin-shell .admin-table {
  border-collapse: collapse;
  width: 100%;
  border: 0;
  background: transparent;
}
.ads-scope.admin-shell .admin-table thead th {
  font: 600 11px/1.3 var(--font-body);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  background: transparent;
  border-bottom: 1px solid var(--hairline-strong);
  padding: 14px 16px;
  text-align: left;
}
.ads-scope.admin-shell .admin-table tbody td {
  border-bottom: 1px solid var(--hairline);
  padding: 14px 16px;
  background: transparent;
  height: 52px;
  vertical-align: middle;
  font: 400 13px/1.5 var(--font-body);
  color: var(--text);
}
.ads-scope.admin-shell .admin-table tbody tr:hover { background: var(--surface); }

/* table-status (legacy chip in Clients) → plain text in tone color */
.ads-scope.admin-shell .table-status {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font: 500 12px/1.4 var(--font-body) !important;
  letter-spacing: 0.02em !important;
  text-transform: capitalize !important;
}
.ads-scope.admin-shell .table-status.status-in-progress { color: var(--tone-positive) !important; }
.ads-scope.admin-shell .table-status.status-upcoming    { color: var(--text-tertiary) !important; }

/* Section header above tables (Clients/Team add-button row) */
.ads-scope.admin-shell .admin-client-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 16px 0;
  padding: 0;
  border: 0;
}
.ads-scope.admin-shell .admin-client-header .admin-section-title {
  font: 600 16px/1.3 var(--font-body);
  color: var(--text);
  letter-spacing: 0;
  text-transform: none;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Project cards in the index — switch from heavy card to editorial list-card. */
.ads-scope.admin-shell .admin-project-grid,
.ads-scope.admin-shell .overview-projects-grid,
.ads-scope.admin-shell .admin-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}
.ads-scope.admin-shell .admin-project-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 24px;
  cursor: pointer;
  transition: border-color 150ms ease, transform 150ms ease;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ads-scope.admin-shell .admin-project-card:hover {
  border-color: var(--hairline-strong);
}
.ads-scope.admin-shell .admin-card-name {
  font: 600 18px/1.2 var(--font-display) !important;
  color: var(--text) !important;
  letter-spacing: -0.005em;
  margin: 0;
}
.ads-scope.admin-shell .admin-card-location {
  font: 500 12px/1.4 var(--font-body) !important;
  color: var(--text-tertiary) !important;
  margin: 0;
}
.ads-scope.admin-shell .admin-card-meta {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}
.ads-scope.admin-shell .admin-card-phase {
  font: 500 11px/1.4 var(--font-body);
  color: var(--text-secondary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 8px;
}
.ads-scope.admin-shell .admin-card-progress {
  height: 4px;
  background: var(--hairline);
  border-radius: 2px;
  overflow: hidden;
}
.ads-scope.admin-shell .admin-card-progress-bar {
  height: 100%;
  background: var(--accent);
  transition: width 300ms ease;
}
.ads-scope.admin-shell .admin-card-link {
  color: var(--accent);
  font: 500 12px/1 var(--font-body);
  letter-spacing: 0.04em;
  margin-top: 12px;
  align-self: flex-start;
}

/* "+ New Project" tile */
.ads-scope.admin-shell .admin-new-project-card {
  background: transparent !important;
  border: 1px dashed var(--hairline-strong) !important;
  border-radius: var(--radius-md) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  cursor: pointer;
  color: var(--text-tertiary);
  font: 500 14px/1 var(--font-body);
  transition: border-color 150ms ease, color 150ms ease;
}
.ads-scope.admin-shell .admin-new-project-card:hover {
  border-color: var(--accent);
  color: var(--text);
}


/* ════════════════════════════════════════════════════════════════════
   UPDATES TAB v1 — admin only
   2-widget decision row + conversation feed + sticky composer.
   Pending decisions live in widgets, settled go in the feed as quiet
   tone-colored status cards.
   ════════════════════════════════════════════════════════════════════ */

.ads-scope .updates-page {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 280px);  /* header + tab strip + page padding */
  padding-bottom: 0;
}

/* ── Decision row (top) ─── */
.ads-scope .updates-decision-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 0 0 32px 0;
}
@media (max-width: 768px) {
  .ads-scope .updates-decision-row {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 24px;
  }
}

.ads-scope .updates-widget {
  display: flex;
  flex-direction: column;
  padding: 18px 20px 14px 20px;
  background: var(--surface);
  border-radius: var(--radius-md);
}

.ads-scope .updates-widget-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 10px;
}

.ads-scope .updates-widget-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.ads-scope .updates-widget-item {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
  cursor: pointer;
  transition: color 150ms ease;
}
.ads-scope .updates-widget-delete {
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  border-radius: var(--radius-sm);
  opacity: 0;
  transition: opacity 150ms ease, color 150ms ease, background 150ms ease;
}
.ads-scope .updates-widget-item:hover .updates-widget-delete { opacity: 1; }
.ads-scope .updates-widget-delete:hover {
  color: var(--tone-warn);
  background: var(--surface-hover);
}
.ads-scope .updates-widget-delete:focus-visible { opacity: 1; outline: 0; box-shadow: 0 0 0 2px rgba(160, 112, 90, 0.30); }
.ads-scope .updates-widget-item:last-child {
  border-bottom: 0;
}
.ads-scope .updates-widget-item:hover {
  color: var(--text);
}
.ads-scope .updates-widget-title {
  font: 500 13px/1.4 var(--font-body);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ads-scope .updates-widget-meta {
  font: 400 12px/1.4 var(--font-body);
  color: var(--text-tertiary);
}
.ads-scope .updates-widget-time {
  font: 500 11px/1.4 var(--font-mono);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.ads-scope .updates-widget-empty {
  padding: 24px 0;
  text-align: center;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 18px;
}
.ads-scope .updates-widget-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 10px;
  margin-top: auto;
  border-top: 1px solid var(--hairline);
  gap: 12px;
}

/* ── Conversation feed eyebrow ─── */
.ads-scope .updates-feed-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hairline);
}

.ads-scope .updates-feed {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 32px;
}
.ads-scope .updates-feed-empty {
  padding: 32px 0;
  color: var(--text-tertiary);
  text-align: center;
}

.ads-scope .updates-load-earlier {
  align-self: center;
  margin: 8px 0 16px 0;
}

/* ── Status card (settled decision) ─── */
.ads-scope .updates-status-card {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
}
.ads-scope .updates-status-delete {
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  border-radius: var(--radius-sm);
  opacity: 0;
  transition: opacity 150ms ease, color 150ms ease, background 150ms ease;
}
.ads-scope .updates-status-card:hover .updates-status-delete { opacity: 1; }
.ads-scope .updates-status-delete:hover {
  color: var(--tone-warn);
  background: var(--surface-hover);
}
.ads-scope .updates-status-delete:focus-visible { opacity: 1; outline: 0; box-shadow: 0 0 0 2px rgba(160, 112, 90, 0.30); }
.ads-scope .updates-status-icon {
  font: 500 14px/1 var(--font-body);
  width: 18px;
  text-align: center;
}
.ads-scope .updates-status-icon.tone-positive { color: var(--tone-positive); }
.ads-scope .updates-status-icon.tone-warn     { color: var(--tone-warn); }
.ads-scope .updates-status-icon.tone-neutral  { color: var(--text-secondary); }
.ads-scope .updates-status-title {
  font: 500 13px/1.4 var(--font-body);
}
.ads-scope .updates-status-title.tone-positive { color: var(--tone-positive); }
.ads-scope .updates-status-title.tone-warn     { color: var(--tone-warn); }
.ads-scope .updates-status-title.tone-neutral  { color: var(--text); }
.ads-scope .updates-status-meta {
  font: 400 12px/1.4 var(--font-body);
  color: var(--text-tertiary);
  margin-top: 2px;
}
.ads-scope .updates-status-time {
  font: 500 11px/1.4 var(--font-mono);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The .thread-flash highlight already exists; reuse it for status cards too */
.ads-scope .updates-status-card.thread-flash,
.ads-scope .thread-item.thread-flash {
  background: var(--accent-soft);
  transition: background 1400ms ease;
}

/* ── Re-skin existing thread-item rendering inside the new feed ─── */
.ads-scope .updates-feed .thread-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  padding: 16px 0;
}
.ads-scope .updates-feed .thread-item:last-child {
  border-bottom: 0;
}

/* ── Sticky composer ─── */
.ads-scope .updates-composer-sticky {
  position: sticky;
  bottom: 0;
  background: var(--bg);
  border-top: 1px solid var(--hairline);
  padding: 16px 0 24px 0;
  margin-top: auto;
  z-index: 4;
}
.ads-scope .updates-composer-sticky::before {
  /* Soft fade at top so feed items don't look hard-cut as they scroll under */
  content: '';
  position: absolute;
  left: 0; right: 0; top: -32px; height: 32px;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
}

@media (max-width: 768px) {
  .ads-scope .updates-composer-sticky {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px var(--page-gutter);
    z-index: 50;
    background: var(--bg);
  }
  /* Pad the bottom of the page so feed items don't hide behind the composer */
  .ads-scope .updates-page { padding-bottom: 120px; }
}

/* ── Skeleton (loading) ─── */
.ads-scope .updates-skel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 0;
}


/* Scoped-render slot divs — defensive fallback in case inline display:contents
   gets stripped. They should never affect layout. */
.admin-impersonation-slot,
.admin-modals-slot {
  display: contents;
}

/* ============================================================
   COST-CODE COMBOBOX (Estimate + Budget add-rows)
   ============================================================ */
.cc-combobox {
  position: relative;
  display: block;
  width: 100%;
}
.cc-combobox-input {
  width: 100%;
}
.cc-popover {
  /* Fixed positioning so the popover escapes any ancestor with
     overflow:hidden / transform / contain (e.g. .estimate-lines).
     Coordinates are set imperatively in JS from the input's rect. */
  position: fixed;
  top: 0;
  left: 0;
  width: 420px;
  max-width: 90vw;
  max-height: 360px;
  overflow-y: auto;
  background: var(--surface-elevated);
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  z-index: 9999;
  padding: 4px 0;
  font-family: var(--font-body);
}
.cc-popover[hidden] { display: none; }

.cc-section + .cc-section {
  border-top: 1px solid var(--hairline);
  margin-top: 4px;
  padding-top: 4px;
}
.cc-section-label {
  font: 500 10px/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 8px 12px 4px;
}
.cc-option {
  display: grid;
  grid-template-columns: 68px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text);
}
.cc-option:hover,
.cc-option.is-active {
  background: var(--accent-soft);
  color: var(--text);
}
.cc-option-code {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.cc-option.is-active .cc-option-code { color: var(--accent-strong); }
.cc-option-name {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cc-option-cat {
  font-size: 11px;
  color: var(--text-tertiary);
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cc-option-custom {
  grid-template-columns: 1fr;
  color: var(--accent-strong);
  font-style: italic;
}
.cc-section-custom {
  border-top: 1px solid var(--hairline);
  margin-top: 4px;
  padding-top: 4px;
}
.cc-empty {
  padding: 12px 14px;
  font-size: 13px;
  color: var(--text-tertiary);
  text-align: center;
}

/* Ensure the combobox can open outward from a compressed budget-cell */
.budget-cell-code { overflow: visible; }
.budget-row-add { overflow: visible; }
.estimate-add-row { overflow: visible; position: relative; }

/* ============================================================
   UNIFIED LINES — lock + visibility flags on Budget rows
   ============================================================ */
.budget-row.is-locked {
  /* Soft indicator — locked rows still look editable for unlocked fields
     (vendor, actual, status). Subtle left accent stripe. */
  position: relative;
}
.budget-row.is-locked::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--accent);
  border-radius: 2px;
  opacity: 0.7;
}
.budget-row.is-internal {
  /* Internal-only: faint text, hatched accent */
  opacity: 0.88;
}
.budget-row.is-internal .budget-cell-code {
  color: var(--text-secondary);
}
.budget-row-flag {
  display: inline-block;
  margin-left: 6px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 4px;
  vertical-align: middle;
}
.budget-row-flag-lock {
  color: var(--accent);
  font-size: 11px;
  background: var(--accent-soft);
  padding: 0 4px;
  cursor: help;
}
.budget-row-flag-internal {
  color: var(--text-tertiary);
  background: rgba(125, 116, 104, 0.12);
  text-transform: uppercase;
  cursor: help;
}
/* Locked money input: styled differently so user knows it's not editable */
.budget-inline-input[data-locked-field="1"] {
  cursor: not-allowed;
  color: var(--text-secondary);
  background: transparent;
}
.budget-inline-input[data-locked-field="1"]:focus {
  outline: none;
  box-shadow: none;
}

/* ============================================================
   Project cards — money + attention rows
   ============================================================ */
.ads-scope.admin-shell .admin-card-money {
  margin-top: 10px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.ads-scope.admin-shell .admin-card-money-label {
  font: 500 10px/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.ads-scope.admin-shell .admin-card-money-value {
  font: 600 16px/1.1 var(--font-display);
  color: var(--text);
  letter-spacing: -0.005em;
}
.ads-scope.admin-shell .admin-card-money-quiet .admin-card-money-label {
  color: var(--text-tertiary);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
}

.ads-scope.admin-shell .admin-card-attention {
  margin-top: 6px;
  font: 500 11px/1.4 var(--font-body);
  color: var(--accent);
  letter-spacing: 0.01em;
}

.ads-scope.admin-shell .admin-card-link {
  margin-top: auto;
  padding-top: 16px;
}

.ads-scope.admin-shell .admin-card-delete {
  display: block;
  margin-top: 10px;
  padding: 6px 10px;
  background: transparent;
  color: var(--text-tertiary);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  font: 500 9px/1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease;
}
.ads-scope.admin-shell .admin-card-delete:hover {
  border-color: var(--tone-warn, #A0705A);
  color: var(--tone-warn, #A0705A);
}

/* ============================================================
   Settings page layout (page header + grouped sections)

   Hierarchy: Page title → group label → section title → content.
   Groups have a centered label with hairlines either side so the
   eye can find conceptual boundaries between Integrations, Estimate
   defaults, and Tenant data — without crowding the section H3s.
   ============================================================ */
.ads-scope.admin-shell .settings-page {
  /* No max-width cap — inherit page-inner's natural width so the page
     uses the screen instead of looking like a narrow column. */
  padding-bottom: 80px;
}
.ads-scope.admin-shell .settings-page-header {
  padding: 0 0 24px 0;
  margin: 0 0 40px 0;
  border-bottom: 1px solid var(--hairline);
}
.ads-scope.admin-shell .settings-page-title {
  font: 600 32px/1.1 var(--font-display);
  color: var(--text);
  letter-spacing: -0.01em;
  text-transform: none;
  margin: 0 0 6px 0;
}
.ads-scope.admin-shell .settings-page-subtitle {
  font: 500 12px/1.4 var(--font-body);
  color: var(--text-tertiary);
  margin: 0;
}

/* Group: a conceptual cluster of sections under one labeled divider. */
.ads-scope.admin-shell .settings-group {
  margin-top: 48px;
}
.ads-scope.admin-shell .settings-group-label {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 28px 0;
  font: 600 11px/1 var(--font-nav, var(--font-body));
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.ads-scope.admin-shell .settings-group-label::before,
.ads-scope.admin-shell .settings-group-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--hairline);
}

/* Section inside a group / at top level. Resets .admin-section's
   bulky default bottom-margin since we want consistent inter-section
   gaps controlled here. */
.ads-scope.admin-shell .settings-section {
  margin-bottom: 32px;
}
.ads-scope.admin-shell .settings-group .settings-section:last-child,
.ads-scope.admin-shell .settings-group .admin-section:last-child {
  margin-bottom: 0;
}
.ads-scope.admin-shell .settings-section .admin-section-title {
  font: 600 16px/1.2 var(--font-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  margin: 0 0 6px 0;
  padding: 0;
  border-bottom: 0;
}
.ads-scope.admin-shell .settings-section-desc {
  font-size: 13px;
  color: var(--text-tertiary);
  margin: 0 0 16px 0;
  max-width: 640px;
  line-height: 1.5;
}
.ads-scope.admin-shell .settings-section-empty {
  font-size: 13px;
  color: var(--text-tertiary);
  font-style: italic;
  padding: 6px 0;
}

/* Chip grid — used for Units and Cost types. Each chip is a toggle:
   active chips are filled with the accent and have a small filled dot;
   archived chips are outlined and muted. Click to flip between states.

   The grid uses flex-wrap with consistent gaps so chips fill rows
   naturally regardless of label length. Way more compact than the
   old one-row-per-item bordered cards. */
.ads-scope.admin-shell .settings-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0;
}
.ads-scope.admin-shell .settings-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 12px;
  background: transparent;
  border: 1px solid var(--hairline-strong, var(--border-light));
  border-radius: 999px;
  font: 500 13px/1 var(--font-body);
  color: var(--text-tertiary);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease, transform 60ms ease;
  user-select: none;
}
.ads-scope.admin-shell .settings-chip:hover {
  border-color: var(--accent-warm, #C4A57B);
  color: var(--text);
}
.ads-scope.admin-shell .settings-chip:active {
  transform: scale(0.97);
}
.ads-scope.admin-shell .settings-chip.is-active {
  background: var(--accent-warm, #C4A57B);
  border-color: var(--accent-warm, #C4A57B);
  color: #1a1a1a;
}
.ads-scope.admin-shell .settings-chip.is-active:hover {
  background: var(--accent-warm-hover, #B8966C);
  border-color: var(--accent-warm-hover, #B8966C);
}
.ads-scope.admin-shell .settings-chip.is-archived {
  color: var(--text-tertiary);
  border-style: dashed;
  opacity: 0.72;
}
.ads-scope.admin-shell .settings-chip.is-archived:hover {
  opacity: 1;
}
.ads-scope.admin-shell .settings-chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(26, 26, 26, 0.55);
  flex-shrink: 0;
}
.ads-scope.admin-shell .settings-chip.is-active .settings-chip-dot {
  background: rgba(26, 26, 26, 0.55);
}
.ads-scope.admin-shell .settings-chip-label {
  white-space: nowrap;
}

/* Add-new-item row used under Units / Cost types / Custom cost codes.
   The input is a real input with a permanent border so it doesn't
   look like floating placeholder text. Button stays the same width
   regardless of input length. */
.ads-scope.admin-shell .settings-add-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--hairline, var(--border-light));
}
.ads-scope.admin-shell .settings-add-row .budget-inline-input,
.ads-scope.admin-shell .settings-add-row input[type="text"] {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--hairline-strong, var(--border-light));
  background: var(--surface);
  padding: 9px 12px;
  border-radius: 8px;
  font: 500 13px/1.2 var(--font-body);
  color: var(--text);
  transition: border-color 120ms ease, background 120ms ease;
}
.ads-scope.admin-shell .settings-add-row .budget-inline-input:hover,
.ads-scope.admin-shell .settings-add-row input[type="text"]:hover {
  border-color: var(--accent-warm, #C4A57B);
}
.ads-scope.admin-shell .settings-add-row .budget-inline-input:focus,
.ads-scope.admin-shell .settings-add-row input[type="text"]:focus {
  outline: none;
  border-color: var(--accent-warm, #C4A57B);
  background: var(--surface-elevated, var(--surface));
}
.ads-scope.admin-shell .settings-add-row .btn {
  flex-shrink: 0;
}

/* 2-up row for the symmetrical Units + Cost types lists. Collapses
   to single-column on narrow viewports. */
.ads-scope.admin-shell .settings-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 32px;
}
@media (max-width: 860px) {
  .ads-scope.admin-shell .settings-row-2col {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
.ads-scope.admin-shell .settings-row-2col > .settings-section,
.ads-scope.admin-shell .settings-row-2col > .admin-section {
  margin-bottom: 0;
}

/* ============================================================
   Settings — integrations
   ============================================================ */
.ads-scope.admin-shell .settings-integration {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  margin-bottom: 8px;
}
.ads-scope.admin-shell .settings-integration-info { flex: 1; min-width: 0; }
.ads-scope.admin-shell .settings-integration-name {
  font: 600 14px/1.2 var(--font-display);
  color: var(--text);
  letter-spacing: -0.005em;
}
.ads-scope.admin-shell .settings-integration-status {
  font: 500 10px/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-top: 4px;
}
.ads-scope.admin-shell .settings-integration-status-ok {
  color: var(--tone-positive, #5A8A5C);
}
.ads-scope.admin-shell .settings-integration-desc {
  font: 400 12px/1.5 var(--font-body);
  color: var(--text-secondary);
  margin-top: 6px;
}

/* ============================================================
   Dashboard — attention strip + per-card next step
   ============================================================ */
.ads-scope.admin-shell .dashboard-attention {
  margin-top: 24px;
  margin-bottom: 28px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 8px;
}
.ads-scope.admin-shell .dashboard-attention-label {
  font: 500 10px/1 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 10px;
}
.ads-scope.admin-shell .dashboard-attention-empty {
  font: 400 13px/1.5 var(--font-body);
  color: var(--text-secondary);
  font-style: italic;
  padding: 4px 0;
}
.ads-scope.admin-shell .dashboard-attention-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ads-scope.admin-shell .dashboard-attention-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--hairline);
  cursor: pointer;
  transition: padding-left 150ms ease;
  font: 400 13px/1.3 var(--font-body);
}
.ads-scope.admin-shell .dashboard-attention-item:first-child { border-top: 0; }
.ads-scope.admin-shell .dashboard-attention-item:hover {
  padding-left: 6px;
}
.ads-scope.admin-shell .dashboard-attention-item:hover .dashboard-attention-arrow {
  color: var(--accent-strong);
  transform: translateX(3px);
}
.ads-scope.admin-shell .dashboard-attention-project {
  font-weight: 600;
  color: var(--text);
  min-width: 140px;
  flex-shrink: 0;
}
.ads-scope.admin-shell .dashboard-attention-sep {
  color: var(--text-tertiary);
}
.ads-scope.admin-shell .dashboard-attention-text {
  color: var(--text-secondary);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ads-scope.admin-shell .dashboard-attention-arrow {
  color: var(--text-tertiary);
  font-size: 14px;
  transition: transform 150ms ease, color 150ms ease;
}

/* Per-card next step button */
.ads-scope.admin-shell .admin-card-next {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 10px;
  background: var(--accent-soft);
  border: 1px solid transparent;
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
  color: var(--text);
  font: 500 12px/1.4 var(--font-body);
  transition: background 150ms ease, border-color 150ms ease;
  width: 100%;
}
.ads-scope.admin-shell .admin-card-next:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.ads-scope.admin-shell .admin-card-next-arrow {
  color: var(--accent-strong);
  font-weight: 600;
  flex-shrink: 0;
}
.ads-scope.admin-shell .admin-card-next-text {
  flex: 1;
  color: var(--text);
}

/* ============================================================
   Settings — list rows (templates, custom codes)
   ============================================================ */
.ads-scope.admin-shell .settings-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ads-scope.admin-shell .settings-list-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 6px;
}
.ads-scope.admin-shell .settings-list-info { flex: 1; min-width: 0; }
.ads-scope.admin-shell .settings-list-name {
  font: 600 14px/1.2 var(--font-display);
  color: var(--text);
  letter-spacing: -0.005em;
}
.ads-scope.admin-shell .settings-list-meta {
  font: 400 12px/1.4 var(--font-body);
  color: var(--text-secondary);
  margin-top: 4px;
}
.ads-scope.admin-shell .settings-list-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* Inline editable input inside settings list rows */
.ads-scope.admin-shell .settings-inline-input {
  font: 500 13px/1.4 var(--font-body);
  background: transparent;
  color: var(--text);
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 6px 8px;
  width: 100%;
  max-width: 320px;
  transition: border-color var(--transition), background var(--transition);
}
.ads-scope.admin-shell .settings-inline-input:hover { background: var(--surface); }
.ads-scope.admin-shell .settings-inline-input:focus {
  outline: none;
  background: var(--surface-elevated, var(--surface));
  border-color: var(--accent-warm, var(--accent));
}

/* Add-row at the bottom of each settings list */
.ads-scope.admin-shell .settings-add-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.ads-scope.admin-shell .settings-add-row .budget-inline-input {
  flex: 1 1 auto;
  max-width: 360px;
}

/* Tax settings grid */
.ads-scope.admin-shell .settings-tax-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 16px;
  margin-bottom: 8px;
}
.ads-scope.admin-shell .settings-tax-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ads-scope.admin-shell .settings-tax-field-toggle {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text);
  margin-top: 4px;
}
.ads-scope.admin-shell .settings-tax-label {
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* Variance tones reused for Margin so far */
.ads-scope.admin-shell .budget-variance-positive { color: var(--tone-positive, #5A8A5C); }
.ads-scope.admin-shell .budget-variance-negative { color: var(--tone-warn, #A0705A); }

/* ============================================================
   SEND PROPOSAL MODAL
   Two-pane: controls left, live WYSIWYG preview right.
   Premium styling — uses design tokens, tabular nums, subtle motion.
   ============================================================ */
.ads-scope .modal-send-proposal {
  /* The base .modal rule (root scope) clamps every modal to
     max-width: 480px. We need to break out of that for the two-pane
     proposal view. Setting both width and max-width ensures we win
     against the base rule on the relevant axis. */
  width: min(1280px, 96vw);
  max-width: min(1280px, 96vw);
  max-height: 92vh;
  height: 92vh;
  padding: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}

/* ── Header ─────────────────────────────────────────── */
.ads-scope .spm-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 22px 28px 20px;
  border-bottom: 1px solid var(--hairline);
  background: var(--surface-elevated);
}
.ads-scope .spm-header-left { display: flex; flex-direction: column; gap: 4px; }
.ads-scope .spm-title {
  margin: 0;
  font: 700 24px/1.1 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--text);
}
.ads-scope .spm-subtitle {
  margin: 0;
  font: 500 12px/1.3 var(--font-body);
  letter-spacing: 0.02em;
  color: var(--text-tertiary);
}
.ads-scope .spm-close {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-tertiary);
  font-size: 20px;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
  line-height: 1;
}
.ads-scope .spm-close:hover {
  background: var(--bg);
  color: var(--text);
  border-color: var(--hairline);
}

/* ── Body: two-pane ─────────────────────────────────── */
.ads-scope .spm-body {
  flex: 1;
  display: grid;
  grid-template-columns: 360px 1fr;
  min-height: 0;
}

/* LEFT PANE — controls */
.ads-scope .spm-controls {
  padding: 24px 24px 40px;
  overflow-y: auto;
  border-right: 1px solid var(--hairline);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.ads-scope .spm-control-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ads-scope .spm-label {
  font: 600 11px/1 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
}
.ads-scope .spm-help {
  margin: 0;
  font: 400 12px/1.5 var(--font-body);
  color: var(--text-tertiary);
}
.ads-scope .spm-textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  color: var(--text);
  font: 400 13px/1.55 var(--font-body);
  padding: 10px 12px;
  min-height: 100px;
  resize: vertical;
  transition: border-color 150ms ease, background 150ms ease;
}
.ads-scope .spm-textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface-elevated);
}
.ads-scope .spm-textarea-short { min-height: 80px; }

/* Switches — iOS-style toggle without looking like iOS */
.ads-scope .spm-switches { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.ads-scope .spm-switch {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: center;
  cursor: pointer;
  user-select: none;
  font: 400 13px/1.3 var(--font-body);
  color: var(--text);
}
.ads-scope .spm-switch input {
  /* Visually hidden but still receives clicks via standard label-input
   * semantics. clip-path keeps it accessible to screen readers. We
   * deliberately do NOT set pointer-events: none here — doing so used
   * to break the label click proxy on some browsers, which manifested
   * as 'the toggle visually flips but the preview never updates'. */
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.ads-scope .spm-switch-track {
  position: relative;
  width: 34px;
  height: 20px;
  background: var(--hairline-strong);
  border-radius: 10px;
  transition: background 180ms ease;
  flex-shrink: 0;
}
.ads-scope .spm-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text);
  transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), background 180ms ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.ads-scope .spm-switch input:checked + .spm-switch-track {
  background: var(--accent);
}
.ads-scope .spm-switch input:checked + .spm-switch-track .spm-switch-knob {
  transform: translateX(14px);
  background: var(--text);
}
.ads-scope .spm-switch-label { color: var(--text); }

/* Line checkboxes */
.ads-scope .spm-line-row {
  display: grid;
  grid-template-columns: 28px 68px 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 6px;
  border-radius: 4px;
  cursor: pointer;
  font: 400 13px/1.3 var(--font-body);
  transition: background 120ms ease;
}
.ads-scope .spm-line-row:hover { background: var(--bg); }
.ads-scope .spm-line-row-header {
  cursor: default;
  font: 600 10px/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 6px 6px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 4px;
}
.ads-scope .spm-line-row-header:hover { background: transparent; }
.ads-scope .spm-line-code {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ads-scope .spm-line-name {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Checkmark — custom so it matches the design language */
.ads-scope .spm-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}
.ads-scope .spm-check input {
  /* See note on .spm-switch input — same rationale. */
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.ads-scope .spm-check > span {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1.5px solid var(--hairline-strong);
  background: var(--bg);
  transition: background 150ms ease, border-color 150ms ease;
  position: relative;
}
.ads-scope .spm-check > span::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 6px;
  height: 10px;
  border: solid var(--text);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ads-scope .spm-check input:checked + span {
  background: var(--accent);
  border-color: var(--accent);
}
.ads-scope .spm-check input:checked + span::after {
  transform: rotate(45deg) scale(1);
  border-color: var(--bg);
}
.ads-scope .spm-check input:indeterminate + span {
  background: var(--accent);
  border-color: var(--accent);
}
.ads-scope .spm-check input:indeterminate + span::after {
  content: '';
  width: 8px;
  height: 0;
  border: solid var(--bg);
  border-width: 0 0 2px 0;
  transform: rotate(0) scale(1);
  top: 7px;
  left: 3px;
}

/* ── RIGHT PANE — live preview ─────────────────────── */
.ads-scope .spm-preview-wrap {
  background: #f4efe6;  /* warm off-white paper color, fixed — this is
                           the *document*, not the admin UI */
  overflow-y: auto;
  padding: 32px 40px 56px;
}
.ads-scope .spm-preview-doc {
  max-width: 820px;
  margin: 0 auto;
  background: #ffffff;
  color: #1a1815;
  padding: 64px 72px;
  border-radius: 4px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.12);
  min-height: 600px;
}
.ads-scope .spm-doc-inner {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.55;
  color: #1a1815;
}

/* Head */
.ads-scope .spm-doc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 24px;
  border-bottom: 1px solid #e4ddd0;
  margin-bottom: 32px;
}
.ads-scope .spm-doc-logo { max-height: 48px; width: auto; }
.ads-scope .spm-doc-wordmark {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #1a1815;
}
.ads-scope .spm-doc-head-right { text-align: right; }
.ads-scope .spm-doc-eyebrow {
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #7a7060;
  font-weight: 600;
}
.ads-scope .spm-doc-date {
  font-size: 13px;
  color: #3a3530;
  margin-top: 2px;
}

/* Meta row */
.ads-scope .spm-doc-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 32px;
}
.ads-scope .spm-doc-meta-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7a7060;
  font-weight: 600;
  margin-bottom: 4px;
}
.ads-scope .spm-doc-meta-value {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #1a1815;
  line-height: 1.2;
}
.ads-scope .spm-doc-meta-sub {
  font-size: 13px;
  color: #5a5248;
  margin-top: 3px;
}

/* Cover */
.ads-scope .spm-doc-cover {
  font-size: 14px;
  line-height: 1.65;
  color: #3a3530;
  padding: 16px 18px;
  border-left: 3px solid #c4a57b;
  background: #faf7f1;
  border-radius: 0 4px 4px 0;
  margin-bottom: 32px;
}

/* Lines table */
.ads-scope .spm-doc-lines {
  margin-bottom: 24px;
}
.ads-scope .spm-doc-line {
  /* Fixed-width flex columns. Each row was previously its own CSS grid with
     max-content tracks, so column widths varied row-to-row ("wavy"). Fixed
     widths on the code/numeric/cost-type columns + a flexible name column
     make every row (and the header) align, regardless of which optional
     columns are shown. */
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid #f0eae0;
  font-size: 13px;
  line-height: 1.45;
}
.ads-scope .spm-doc-line-head {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7a7060;
  font-weight: 600;
  border-bottom: 1px solid #d8cfbd;
  padding: 12px 0 10px;
  align-items: end;
}
.ads-scope .spm-doc-cat-head {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1a1815;
  padding: 24px 0 8px;
  border-bottom: 1px solid #1a1815;
  margin-top: 8px;
}
.ads-scope .spm-doc-cat-head:first-child { margin-top: 0; }
.ads-scope .spm-dcol-code {
  flex: 0 0 44px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  color: #7a7060;
}
.ads-scope .spm-dcol-name {
  flex: 1 1 auto;
  color: #1a1815;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  /* Keep multi-word item names from breaking awkwardly mid-phrase. */
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}
.ads-scope .spm-doc-line-desc { font-size: 12px; color: #7a7060; display: block; margin-top: 2px; }
.ads-scope .spm-doc-line-notes { font-size: 11px; color: #8c8270; display: block; margin-top: 4px; font-style: italic; line-height: 1.45; }
.ads-scope .spm-doc-line-allowance { background: rgba(196, 165, 123, 0.06); }
.ads-scope .spm-doc-line-item { font-weight: 600; color: #1a1815; }
.ads-scope .spm-dcol-ctype {
  flex: 0 0 84px;
  font-size: 11px;
  color: #5a5248;
  white-space: normal;
  line-height: 1.35;
}
.ads-scope .spm-doc-line-head .spm-dcol-ctype { color: #7a7060; }
.ads-scope .spm-doc-cat-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0 16px;
  border-bottom: 2px solid #1a1815;
  margin-bottom: 4px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1a1815;
}
.ads-scope .spm-doc-cat-subtotal .num {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0;
}

/* Approval banner — sits above the branded header on accepted documents */
.ads-scope .spm-doc-approval {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ecf6ec;
  color: #2e6038;
  padding: 10px 16px;
  border-radius: 4px;
  margin-bottom: 18px;
}
.ads-scope .spm-doc-approval-badge {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: #2e6038;
  color: #ffffff;
  padding: 4px 10px;
  border-radius: 3px;
}
.ads-scope .spm-doc-approval-text {
  font-size: 12px;
  font-weight: 500;
  color: #3a4e3c;
}
.ads-scope .spm-dcol-num {
  flex: 0 0 92px;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: #3a3530;
}
.ads-scope .spm-doc-line-head .spm-dcol-num { color: #7a7060; }
.ads-scope .spm-doc-empty {
  text-align: center;
  color: #9a9080;
  padding: 40px 0;
  font-style: italic;
  font-size: 13px;
}

/* Summary-only proposal (all lines hidden). Replaces the bare empty
   error with a quiet, intentional eyebrow + meta so the layout looks
   like a deliberate minimal proposal, not a broken state. */
.ads-scope .spm-doc-summary {
  text-align: center;
  padding: 56px 24px 32px;
}
.ads-scope .spm-doc-summary-eyebrow {
  font: 600 11px/1 var(--font-nav, var(--font-body));
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9a9080;
  margin-bottom: 8px;
}
.ads-scope .spm-doc-summary-meta {
  font: 400 12px/1.5 var(--font-body);
  color: #b5ad9d;
  font-style: italic;
}

/* Totals */
.ads-scope .spm-doc-totals {
  margin-left: auto;
  max-width: 360px;
  margin-top: 24px;
}
.ads-scope .spm-doc-total-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
  color: #5a5248;
  font-variant-numeric: tabular-nums;
}
.ads-scope .spm-doc-total-grand {
  border-top: 2px solid #c4a57b;
  padding-top: 14px;
  margin-top: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #1a1815;
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.ads-scope .spm-doc-total-grand span:last-child { font-size: 22px; }

/* Terms */
.ads-scope .spm-doc-terms {
  font-size: 11px;
  line-height: 1.7;
  color: #5a5248;
  padding: 20px 0;
  margin-top: 32px;
  border-top: 1px solid #e4ddd0;
}

/* Signature */
.ads-scope .spm-doc-sig {
  display: grid;
  grid-template-columns: 1fr 180px;
  gap: 32px;
  margin-top: 32px;
}
.ads-scope .spm-doc-sig-line {
  border-bottom: 1px solid #1a1815;
  height: 40px;
}
.ads-scope .spm-doc-sig-label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7a7060;
  font-weight: 600;
  margin-top: 6px;
}

/* ── Footer ─────────────────────────────────────────── */
.ads-scope .spm-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 28px;
  border-top: 1px solid var(--hairline);
  background: var(--surface-elevated);
  gap: 16px;
}
.ads-scope .spm-footer-note {
  font: 400 12px/1.4 var(--font-body);
  color: var(--text-tertiary);
  font-style: italic;
}
.ads-scope .spm-footer-actions { display: flex; gap: 10px; }

/* Responsive: stack panes on narrow screens */
@media (max-width: 900px) {
  .ads-scope .spm-body { grid-template-columns: 1fr; }
  .ads-scope .spm-controls { border-right: 0; border-bottom: 1px solid var(--hairline); max-height: 50vh; }
  .ads-scope .modal-send-proposal { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
  .ads-scope .spm-preview-wrap { padding: 16px 12px 40px; }
  .ads-scope .spm-preview-doc { padding: 32px 28px; }
}

/* ============================================================
   CLIENT PROPOSAL REVIEW MODAL
   What the client sees when they click "Review & sign". Reuses
   the .spm-doc-* preview body so look exactly matches what the
   builder approved in the Send Proposal modal.
   ============================================================ */
.ads-scope .modal-review-proposal {
  width: min(960px, 96vw);
  max-height: 92vh;
  height: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}

.ads-scope .crm-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 22px 28px 20px;
  border-bottom: 1px solid var(--hairline);
  background: var(--surface-elevated);
}
.ads-scope .crm-header-left { display: flex; flex-direction: column; gap: 4px; }
.ads-scope .crm-title {
  margin: 0;
  font: 700 24px/1.1 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--text);
}
.ads-scope .crm-subtitle {
  margin: 0;
  font: 500 12px/1.3 var(--font-body);
  letter-spacing: 0.02em;
  color: var(--text-tertiary);
  text-transform: uppercase;
}
.ads-scope .crm-close {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-tertiary);
  font-size: 22px;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
  line-height: 1;
}
.ads-scope .crm-close:hover {
  background: var(--bg);
  color: var(--text);
  border-color: var(--hairline);
}

.ads-scope .crm-body {
  flex: 1;
  overflow-y: auto;
  background: #f4efe6;
  padding: 28px 32px;
  min-height: 0;
}
.ads-scope .crm-preview-doc {
  max-width: 820px;
  margin: 0 auto;
  background: #ffffff;
  color: #1a1815;
  padding: 56px 64px;
  border-radius: 4px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.12);
  min-height: 600px;
}

/* Sign block — sticky at bottom */
.ads-scope .crm-sign-block {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 28px;
  border-top: 1px solid var(--hairline);
  background: var(--surface-elevated);
}
.ads-scope .crm-sign-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}
.ads-scope .crm-sign-label {
  font: 500 12px/1.4 var(--font-body);
  color: var(--text-secondary);
}
.ads-scope .crm-sign-input {
  font: 500 14px/1.3 var(--font-body);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 10px 12px;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  width: 100%;
  max-width: 360px;
}
.ads-scope .crm-sign-input:focus {
  border-color: var(--accent, #c4a57b);
  box-shadow: 0 0 0 3px rgba(196, 165, 123, 0.18);
}
.ads-scope .crm-sign-actions {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}

.ads-scope .crm-sign-block-done {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ads-scope .crm-sign-status {
  font: 600 13px/1 var(--font-body);
  letter-spacing: 0.02em;
}
.ads-scope .crm-sign-status-ok { color: var(--tone-positive, #5A8A5C); }
.ads-scope .crm-sign-status-declined { color: var(--tone-warn, #A0705A); }
.ads-scope .crm-sign-meta {
  font: 500 12px/1 var(--font-body);
  color: var(--text-tertiary);
}

/* Responsive */
@media (max-width: 720px) {
  .ads-scope .modal-review-proposal { width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
  .ads-scope .crm-body { padding: 16px 12px; }
  .ads-scope .crm-preview-doc { padding: 32px 24px; }
  .ads-scope .crm-sign-block { padding: 14px 16px; }
  .ads-scope .crm-sign-actions { width: 100%; }
  .ads-scope .crm-sign-actions .btn { flex: 1; }
}

/* ═══════════════════════════════════════════════════════════════
   CLIENT HOME v2
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. PREMIUM HOME HERO ─────────────────────────────────────── */
/* Big cinematic header. The thin "project-strip" v1 felt cold;
   clients wanted the glamour shot back. This is the "wow" moment
   when they open the app. Gradient scrim ensures text reads on
   any project hero photo. */
.home-hero {
  position: relative;
  width: 100%;
  /* Hero height scales with viewport width so it never feels
     skinny on iMac aspect ratios. Baseline 420px, growing up to
     520px on ultra-wides. Was fixed 360px which read as a banner
     on a 27" screen. */
  min-height: clamp(380px, 30vw, 520px);
  border-radius: 16px;
  overflow: hidden;
  background-color: var(--accent-soft, rgba(196,165,123,0.12));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}
.home-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.15) 0%,
    rgba(0,0,0,0.35) 55%,
    rgba(0,0,0,0.78) 100%
  );
  pointer-events: none;
}
.home-hero-content {
  position: relative;
  z-index: 1;
  padding: 40px 44px 34px;
  /* Match the new viewport-scaled hero height so content sits
     flush to the bottom regardless of screen aspect. */
  min-height: clamp(380px, 30vw, 520px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
}
.home-hero-greeting {
  font: 500 12px/1 var(--font-nav);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  margin-bottom: 10px;
}
.home-hero-project {
  font-family: var(--font-heading);
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 6px;
  color: #fff;
  line-height: 1.05;
  text-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
.home-hero-address {
  font: 400 14px/1.4 var(--font-body);
  color: rgba(255,255,255,0.88);
  margin-bottom: 18px;
  letter-spacing: 0.01em;
}
.home-hero-pill {
  display: inline-block;
  align-self: flex-start;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  font: 600 10px/1 var(--font-nav);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
@media (max-width: 720px) {
  .home-hero { min-height: 280px; border-radius: 12px; }
  .home-hero-content { min-height: 280px; padding: 28px 22px 24px; }
  .home-hero-greeting { font-size: 11px; letter-spacing: 0.18em; }
  .home-hero-project { font-size: clamp(24px, 7vw, 32px); }
  .home-hero-address { font-size: 13px; margin-bottom: 14px; }
}

/* ── 2. ACTION STACK ───────────────────────────────────────────── */
.action-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.action-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  background: var(--surface-elevated, var(--surface));
  border: 1px solid var(--hairline, var(--border-light));
  border-radius: 10px;
}

.action-card-left {
  flex: 1;
  min-width: 0;
}
.action-card-amount {
  font: 700 20px/1 var(--font-body);
  color: var(--text);
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}
.action-card-label {
  font: 400 13px/1.4 var(--font-body);
  color: var(--text-secondary);
}

.action-card-btn {
  flex: 0 0 auto;
  padding: 9px 18px;
  font: 600 12px/1 var(--font-nav);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-inverse, #1A1411);
  background: var(--accent-warm, #C4A57B);
  border: none;
  border-radius: 7px;
  cursor: pointer;
  transition: opacity 150ms ease;
  white-space: nowrap;
}
.action-card-btn:hover { opacity: 0.85; }

@media (max-width: 600px) {
  .action-card { flex-wrap: wrap; gap: 10px; }
  .action-card-btn { width: 100%; text-align: center; padding: 11px; }
}

/* ── 3. SCHEDULE STRIP + PREMIUM CALENDAR ────────────────────────
   The schedule sentence sits on the left; the calendar on the
   right. Calendar cells are generous (40px tall), the active
   phase paints a subtle band across its days, today is a small
   filled accent dot above the number, and days with updates get
   a small dot below. Reads like a magazine spread, not a grid. */
.home-schedule-strip {
  display: flex;
  align-items: stretch;
  gap: 28px;
  padding: 24px 26px;
  background: var(--surface-elevated, var(--surface));
  border: 1px solid var(--hairline, var(--border-light));
  border-radius: 16px;
  margin-bottom: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.home-schedule-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4px 0;
}
.home-schedule-eyebrow {
  font: 600 10px/1 var(--font-nav);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-warm, #C4A57B);
  margin-bottom: 12px;
}
.home-schedule-sentence {
  font-family: var(--font-heading);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 700;
  letter-spacing: 0.005em;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 8px;
}
.home-schedule-next {
  font: 400 13px/1.5 var(--font-body);
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}

.home-schedule-cal {
  flex: 0 0 auto;
  padding-left: 28px;
  border-left: 1px solid var(--hairline, var(--border-light));
}

/* Premium Calendar */
.home-cal {
  width: 320px;
  max-width: 100%;
}
.home-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding: 0 4px;
}
.home-cal-month-label {
  font: 700 12px/1 var(--font-nav);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text);
}
.home-cal-nav {
  background: transparent;
  border: 1px solid var(--hairline, var(--border-light));
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
  border-radius: 999px;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.home-cal-nav:hover {
  color: var(--text);
  border-color: rgba(196,165,123,0.4);
  background: var(--accent-soft, rgba(196,165,123,0.08));
}
.home-cal-nav:active { transform: scale(0.94); }

.home-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.home-cal-dow {
  font: 600 9px/1 var(--font-nav);
  text-align: center;
  color: var(--text-tertiary);
  padding: 6px 0 10px;
  letter-spacing: 0.14em;
}
.home-cal-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 2px;
  border-radius: 8px;
  cursor: pointer;
  height: 40px;
  transition: background 160ms ease, transform 160ms ease;
}
.home-cal-cell:hover:not(.home-cal-empty) {
  background: var(--accent-soft, rgba(196,165,123,0.08));
}
.home-cal-empty { cursor: default; pointer-events: none; }

.home-cal-day-num {
  font: 500 13px/1 var(--font-body);
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}

/* Today: filled gold dot above the number, bold weight */
.home-cal-today {
  background: var(--accent-soft, rgba(196,165,123,0.10));
}
.home-cal-today .home-cal-day-num {
  color: var(--text);
  font-weight: 700;
}
.home-cal-today::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-warm, #C4A57B);
  box-shadow: 0 0 0 2px rgba(196,165,123,0.18);
}

/* Days inside an active phase: subtle warm tint */
.home-cal-in-phase {
  background: rgba(196, 165, 123, 0.05);
}
.home-cal-in-phase .home-cal-day-num {
  color: var(--text);
}

/* Dot for days with builder updates (sits below the number) */
.home-cal-dot {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-warm, #C4A57B);
}

@media (max-width: 900px) {
  .home-schedule-strip { flex-direction: column; gap: 22px; padding: 22px; }
  .home-schedule-cal {
    padding-left: 0;
    padding-top: 22px;
    border-left: none;
    border-top: 1px solid var(--hairline, var(--border-light));
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .home-cal { width: 100%; max-width: 360px; }
}


/* ── 4. PHASE STACK ──────────────────────────────────────────────
   Each phase is its own card, not a spreadsheet row. The active
   phase is a hero card (generous padding, big type, photo strip).
   Past + upcoming phases are compact summary cards that still
   feel substantial — not a data table. */
.phase-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

/* Base card shell shared across all three states */
.phase-stack-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  background: var(--surface-elevated, var(--surface));
  border: 1px solid var(--hairline, var(--border-light));
  border-radius: 12px;
  user-select: none;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

/* ── Completed phase card ────────────────────────────────────── */
.phase-stack-completed {
  cursor: pointer;
  opacity: 0.78;
}
.phase-stack-completed:hover {
  opacity: 1;
  border-color: rgba(196,165,123,0.35);
  transform: translateY(-1px);
}
.phase-stack-check {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-warm, #C4A57B);
  background: var(--accent-soft, rgba(196,165,123,0.12));
  border-radius: 999px;
}
.phase-stack-row-text {
  flex: 1;
  font: 500 15px/1.4 var(--font-body);
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.phase-stack-chevron {
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 1;
  color: var(--text-tertiary);
  transition: transform 200ms ease, color 160ms ease;
}
.phase-stack-row:hover .phase-stack-chevron {
  color: var(--accent-warm, #C4A57B);
  transform: translateX(2px);
}

/* ── Active / in-progress phase — hero card ──────────────────── */
.phase-stack-active {
  flex-direction: column;
  align-items: stretch;
  padding: 28px 28px 24px;
  cursor: default;
  background: linear-gradient(
    180deg,
    rgba(196,165,123,0.06) 0%,
    transparent 100%
  ), var(--surface-elevated, var(--surface));
  border: 1px solid rgba(196,165,123,0.35);
  box-shadow:
    0 8px 28px rgba(0,0,0,0.12),
    0 0 0 1px rgba(196,165,123,0.08);
}
.phase-stack-active-header { }
.phase-stack-active-badge {
  display: inline-block;
  padding: 5px 10px;
  font: 700 9px/1 var(--font-nav);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-warm, #C4A57B);
  background: var(--accent-soft, rgba(196,165,123,0.12));
  border: 1px solid rgba(196,165,123,0.28);
  border-radius: 999px;
  margin-bottom: 14px;
}
.phase-stack-active-name {
  font-family: var(--font-heading);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--text);
  margin-bottom: 6px;
  line-height: 1.15;
}
.phase-stack-active-dates {
  font: 500 13px/1.4 var(--font-body);
  color: var(--text-secondary);
  margin-bottom: 8px;
  letter-spacing: 0.01em;
}
.phase-stack-active-desc {
  font: 400 14px/1.55 var(--font-body);
  color: var(--text-secondary);
  margin-top: 8px;
  max-width: 720px;
}
.phase-stack-hairline-wrap {
  height: 3px;
  background: var(--hairline, var(--border-light));
  border-radius: 2px;
  margin: 20px 0 18px;
  overflow: hidden;
}
.phase-stack-hairline-fill {
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--accent-warm, #C4A57B) 0%,
    rgba(196,165,123,0.6) 100%
  );
  border-radius: 2px;
  transition: width 800ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.phase-stack-photos {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.phase-stack-photo {
  width: 128px;
  height: 96px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  background-color: var(--accent-soft, rgba(196,165,123,0.08));
  cursor: pointer;
  transition: opacity 160ms ease, transform 160ms ease;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.04);
}
.phase-stack-photo:hover { opacity: 0.92; transform: translateY(-1px); }
.phase-stack-see-all {
  display: inline-block;
  margin-top: 14px;
  font: 600 12px/1 var(--font-body);
  color: var(--accent-warm, #C4A57B);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  letter-spacing: 0.03em;
}
.phase-stack-see-all:hover { opacity: 0.8; }

/* ── Future / upcoming phase card ─────────────────────────────── */
.phase-stack-future {
  cursor: pointer;
}
.phase-stack-future:hover {
  border-color: rgba(196,165,123,0.35);
  transform: translateY(-1px);
}
.phase-stack-future-num {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 11px/1 var(--font-nav);
  color: var(--text-tertiary);
  background: var(--surface-hover, rgba(255,255,255,0.03));
  border: 1px solid var(--hairline, var(--border-light));
  border-radius: 999px;
  letter-spacing: 0.04em;
}

/* ── Expand body (photos + description when expanding past/future) ── */
.phase-stack-expand {
  padding: 0 22px 18px;
  margin-top: -6px;
  background: var(--surface-elevated, var(--surface));
  border: 1px solid var(--hairline, var(--border-light));
  border-top: none;
  border-radius: 0 0 12px 12px;
  font: 400 14px/1.55 var(--font-body);
  color: var(--text-secondary);
}

@media (max-width: 720px) {
  .phase-stack-row { padding: 14px 16px; gap: 12px; }
  .phase-stack-active { padding: 22px 18px 18px; }
  .phase-stack-active-name { font-size: 20px; }
  .phase-stack-photo { width: 104px; height: 78px; }
}


/* ── 5. FINANCES (already has existing .dash-finances styles — no change needed) ── */

/* ── 6. SELECTIONS SECTION ─────────────────────────────────────── */
.home-section {
  margin-bottom: 16px;
}
.home-section-eyebrow {
  font: 700 10px/1 var(--font-nav);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-warm, #C4A57B);
  margin-bottom: 10px;
  padding-left: 2px;
}
/* When inside a flex .home-section-header, kill the bottom margin
   — the header itself owns the spacing. */
.home-section-header .home-section-eyebrow {
  margin-bottom: 0;
}

.home-sel-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.home-sel-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  background: var(--surface-elevated, var(--surface));
  border: 1px solid var(--hairline, var(--border-light));
  border-radius: 10px;
}
.home-sel-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.home-sel-name {
  font: 500 14px/1.3 var(--font-body);
  color: var(--text);
}
.home-sel-deadline {
  font: 500 11px/1 var(--font-nav);
  color: var(--text-tertiary);
  background: var(--surface-hover, #F7F6F3);
  border: 1px solid var(--hairline, var(--border-light));
  border-radius: 20px;
  padding: 3px 9px;
}

/* ── 7. LATEST UPDATE CARD ─────────────────────────────────────── */
.latest-update-card {
  padding: 16px 18px;
  background: var(--surface-elevated, var(--surface));
  border: 1px solid var(--hairline, var(--border-light));
  border-radius: 12px;
}
.latest-update-header {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 10px;
}
.latest-update-avatar {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent-soft, rgba(196,165,123,0.15));
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 12px/1 var(--font-nav);
  color: var(--accent-warm, #C4A57B);
  letter-spacing: 0.03em;
}
.latest-update-meta { flex: 1; min-width: 0; }
.latest-update-name {
  font: 600 13px/1.2 var(--font-body);
  color: var(--text);
}
.latest-update-time {
  font: 400 11px/1.4 var(--font-body);
  color: var(--text-tertiary);
  margin-top: 2px;
}
.latest-update-text {
  font: 400 14px/1.6 var(--font-body);
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.latest-update-photo {
  width: 100%;
  height: 180px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  background-color: var(--surface-hover, #F7F6F3);
  cursor: pointer;
  margin-bottom: 12px;
  transition: opacity 150ms ease;
}
.latest-update-photo:hover { opacity: 0.9; }
.latest-update-see-all {
  font: 500 12px/1 var(--font-body);
  color: var(--accent-warm, #C4A57B);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  letter-spacing: 0.01em;
}
.latest-update-see-all:hover { opacity: 0.75; }

/* ── Mobile tightening ─────────────────────────────────────────── */
@media (max-width: 600px) {
  .phase-stack-active { padding: 16px; }
  .phase-stack-photo { width: 70px; height: 56px; }
  .home-sel-card { flex-wrap: wrap; }
  .home-sel-card .action-card-btn { width: 100%; text-align: center; }
  .latest-update-photo { height: 140px; }
}

/* ═══════════════════════════════════════════════════════════════
   CLIENT HOME v2 — magazine layout (rows + side-by-side)
   ═══════════════════════════════════════════════════════════════ */

/* ── Row scaffolding ──────────────────────────────────────────── */
.home-row {
  margin-bottom: 28px;
}
.home-row:last-child { margin-bottom: 16px; }

/* Side-by-side rows: main column (~58%) + side column (~42%) */
.home-row-split {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
}
.home-row-main,
.home-row-side {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
/* Side-panel card fills the side column by default. On wide
   viewports the sticky rule below takes over instead. */
.home-row-side > * { flex: 1; }

@media (max-width: 980px) {
  .home-row-split {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .home-row { margin-bottom: 20px; }
}

/* ── Refresh dashboard finances as a magazine-style infographic ── */
.dash-finances {
  background: var(--surface-elevated, var(--surface));
  border: 1px solid var(--hairline, var(--border-light));
  border-radius: 14px;
  padding: 22px 24px 20px;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}
.dash-finances-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.dash-finances-title {
  font: 700 10px/1 var(--font-nav);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-warm, #C4A57B);
}
.dash-finances-link {
  font: 600 11px/1 var(--font-body);
  color: var(--text-secondary);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: color 160ms ease;
}
.dash-finances-link:hover { color: var(--accent-warm, #C4A57B); }

.dash-finances-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 28px;
  flex: 1;
  align-content: center;
  padding: 8px 0;
}
.dash-fin-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dash-fin-label {
  font: 600 10px/1 var(--font-nav);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.dash-fin-value {
  font-family: var(--font-heading);
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 800;
  letter-spacing: 0.005em;
  color: var(--text);
  line-height: 1.1;
}
.dash-fin-owed { color: #D49A47; }
.dash-fin-paid { color: var(--text); }

.dash-fin-bar {
  margin-top: 18px;
  height: 4px;
  background: var(--hairline, var(--border-light));
  border-radius: 2px;
  overflow: hidden;
}
.dash-fin-bar-fill {
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--accent-warm, #C4A57B) 0%,
    rgba(196,165,123,0.65) 100%
  );
  border-radius: 2px;
  transition: width 800ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dash-fin-bar-label {
  margin-top: 8px;
  font: 500 11px/1 var(--font-body);
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
}

/* If no actions, budget gets a hero row with bigger numbers */
.home-row-budget-full .dash-finances {
  padding: 32px 36px 28px;
}
.home-row-budget-full .dash-finances-items {
  grid-template-columns: repeat(4, 1fr);
  gap: 18px 36px;
}
.home-row-budget-full .dash-fin-value {
  font-size: clamp(26px, 2.4vw, 34px);
}
@media (max-width: 760px) {
  .home-row-budget-full .dash-finances-items {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── This Week feature panel ─────────────────────────────────── */
.this-week {
  background: var(--surface-elevated, var(--surface));
  border: 1px solid var(--hairline, var(--border-light));
  border-radius: 14px;
  padding: 22px 24px 20px;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}
.this-week-eyebrow {
  font: 700 10px/1 var(--font-nav);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-warm, #C4A57B);
  margin-bottom: 6px;
}
.this-week-range {
  font-family: var(--font-heading);
  font-size: clamp(18px, 1.7vw, 22px);
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.005em;
  margin-bottom: 16px;
}

/* 7-day strip */
.this-week-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 18px;
  padding: 10px 4px 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--hairline, var(--border-light));
  border-radius: 10px;
}
.tw-day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 2px 10px;
  border-radius: 8px;
  transition: background 160ms ease;
}
.tw-day-dow {
  font: 700 9px/1 var(--font-nav);
  letter-spacing: 0.12em;
  color: var(--text-tertiary);
}
.tw-day-num {
  font: 600 14px/1 var(--font-body);
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}
.tw-day-dot {
  position: absolute;
  bottom: 5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: transparent;
}
.tw-day-has-post .tw-day-dot {
  background: var(--accent-warm, #C4A57B);
}
.tw-day-today {
  background: rgba(196, 165, 123, 0.10);
}
.tw-day-today .tw-day-num {
  color: var(--text);
  font-weight: 800;
}
.tw-day-today .tw-day-dow {
  color: var(--accent-warm, #C4A57B);
}

/* This-week stat lines */
.this-week-stats {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  justify-content: flex-start;
}
.this-week-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.this-week-stat-label {
  font: 600 10px/1 var(--font-nav);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.this-week-stat-value {
  font: 600 14px/1.4 var(--font-body);
  color: var(--text);
  letter-spacing: 0.005em;
}

/* ── Updates feed (3 most recent) ─────────────────────────────── */
.updates-feed-section {
  margin-bottom: 8px;
}
.home-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.home-section-link {
  font: 600 11px/1 var(--font-body);
  color: var(--text-secondary);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: color 160ms ease;
}
.home-section-link:hover { color: var(--accent-warm, #C4A57B); }

.updates-feed-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.updates-feed-card {
  background: var(--surface-elevated, var(--surface));
  border: 1px solid var(--hairline, var(--border-light));
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 160ms ease, transform 160ms ease;
}
.updates-feed-card:hover {
  border-color: rgba(196,165,123,0.35);
  transform: translateY(-1px);
}
.updates-feed-card-body {
  padding: 18px 20px 12px;
  flex: 1;
}
.updates-feed-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.updates-feed-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-soft, rgba(196,165,123,0.16));
  color: var(--accent-warm, #C4A57B);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 11px/1 var(--font-nav);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.updates-feed-name {
  font: 600 13px/1.2 var(--font-body);
  color: var(--text);
  letter-spacing: 0.005em;
}
.updates-feed-time {
  font: 400 11px/1.2 var(--font-body);
  color: var(--text-tertiary);
  margin-top: 2px;
}
.updates-feed-text {
  font: 400 13px/1.55 var(--font-body);
  color: var(--text-secondary);
  letter-spacing: 0.005em;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.updates-feed-photo {
  position: relative;
  width: 100%;
  height: 180px;
  background-size: cover;
  background-position: center;
  background-color: var(--accent-soft, rgba(196,165,123,0.08));
  cursor: pointer;
  margin-top: auto;
  transition: opacity 160ms ease;
}
.updates-feed-photo:hover { opacity: 0.92; }
.updates-feed-photo-badge {
  position: absolute;
  bottom: 10px;
  right: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font: 600 11px/1 var(--font-nav);
  letter-spacing: 0.06em;
}

@media (max-width: 980px) {
  .updates-feed-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .updates-feed-photo { height: 200px; }
}

/* Side panels stick to top on wide viewports so they don't elongate
   awkwardly when the main column (timeline / actions) is much taller.
   display:block overrides the flex on .home-row-side just for sticky
   positioning to work correctly. */
@media (min-width: 981px) {
  .home-row-side { display: block; }
  .home-row-split .home-row-side > .this-week,
  .home-row-split .home-row-side > .dash-finances {
    position: sticky;
    top: 28px;
  }
}

/* Home section header utilities (used by action stack + updates feed) */
.home-section-count {
  font: 500 11px/1 var(--font-body);
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
}
.action-stack-section { display: flex; flex-direction: column; }
.action-stack-section .action-stack { flex: 1; }

/* ═══════════════════════════════════════════════════════════════
   ADMIN PROJECT TIMELINE — phases column + premium schedule calendar
   ═══════════════════════════════════════════════════════════════ */

/* Top-level wrapper for the Timeline tab. Vertical stack: the
   Calendar/Gantt toggle leads, then the chosen view fills the full
   content width. The earlier 2-col grid here was the bug that
   pushed the Gantt into half the page and made the calendar mode
   render the toggle next to the table+calendar split. */
.timeline-layout {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  margin-top: 16px;
  width: 100%;
}

/* Calendar mode: phases table (left) + month grid (right) inside
   the layout. This is the only place the 2-col grid lives now. */
.timeline-split {
  display: grid;
  grid-template-columns: minmax(480px, 1.15fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  width: 100%;
}
.timeline-phases-col { min-width: 0; }
.timeline-cal-col    { min-width: 0; position: sticky; top: 24px; }

@media (max-width: 1100px) {
  .timeline-split {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .timeline-cal-col { position: static; }
}

/* Phase table sizing inside the timeline layout. Keep the type at
   12px so the table feels like a tool, not a hero — but force the
   per-cell inputs/selects to actually fill the column so phase
   names like 'Design & Planning' don't truncate to 'Design'. */
.timeline-phases-col .admin-table.phase-table {
  font-size: 12px;
  width: 100%;
  table-layout: auto;
}
.timeline-phases-col .admin-table.phase-table input,
.timeline-phases-col .admin-table.phase-table select {
  font-size: 12px !important;
  /* Override the inline max-widths set in the row template so the
     fields breathe inside the wider phase column. */
  max-width: none !important;
  width: 100%;
  box-sizing: border-box;
}
.timeline-phases-col .admin-table.phase-table th,
.timeline-phases-col .admin-table.phase-table td {
  padding: 8px 6px;
}
.timeline-phases-col .admin-table.phase-table .phase-grip-cell { width: 24px; padding-left: 8px; }
.timeline-phases-col .admin-table.phase-table .phase-num { width: 28px; text-align: center; padding-right: 4px; }
.timeline-phases-col .admin-table.phase-table .phase-row-actions { width: 60px; }

/* ── Schedule calendar card ─────────────────────────────────── */
.sched-cal-card {
  background: var(--surface-elevated, var(--surface));
  border: 1px solid var(--hairline, var(--border-light));
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.10);
  position: relative;
}

.sched-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 26px 18px;
  border-bottom: 1px solid var(--hairline, var(--border-light));
}
.sched-cal-eyebrow {
  font: 700 10px/1 var(--font-nav);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-warm, #C4A57B);
  margin-bottom: 6px;
}
.sched-cal-title {
  font-family: var(--font-heading);
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.005em;
}
.sched-cal-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sched-cal-nav-btn {
  background: transparent;
  border: 1px solid var(--hairline, var(--border-light));
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-secondary);
  font-family: var(--font-body);
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.sched-cal-nav-btn:hover {
  color: var(--text);
  border-color: rgba(196,165,123,0.42);
  background: var(--accent-soft, rgba(196,165,123,0.08));
}
.sched-cal-nav-btn:active { transform: scale(0.96); }
.sched-cal-nav-today {
  width: auto;
  padding: 0 14px;
  font: 600 11px/1 var(--font-nav);
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

/* ── Day-of-week + grid ─────────────────────────────────────── */
.sched-cal-grid-wrap { padding: 14px 16px 16px; }
.sched-cal-dow-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  padding: 0 4px 10px;
}
.sched-cal-dow {
  font: 700 10px/1 var(--font-nav);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  text-align: center;
  padding: 4px 0;
}
.sched-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

/* ── Day cell ───────────────────────────────────────────────── */
.sched-cal-cell {
  position: relative;
  min-height: 78px;
  padding: 7px 7px 6px;
  border: 1px solid var(--hairline, var(--border-light));
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
  overflow: hidden;
}
.sched-cal-cell:hover:not(.sched-cal-empty) {
  background: var(--accent-soft, rgba(196,165,123,0.06));
  border-color: rgba(196,165,123,0.32);
}
.sched-cal-empty {
  border-color: transparent;
  cursor: default;
  pointer-events: none;
}
.sched-cal-day-num {
  font: 600 14px/1 var(--font-body);
  color: var(--text-secondary);
  letter-spacing: 0.005em;
  position: relative;
  z-index: 2;
}
.sched-cal-today {
  background: rgba(196, 165, 123, 0.10);
  border-color: rgba(196, 165, 123, 0.42);
}
.sched-cal-today .sched-cal-day-num {
  color: var(--text);
  font-weight: 800;
}
.sched-cal-today::before {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-warm, #C4A57B);
  box-shadow: 0 0 0 3px rgba(196,165,123,0.18);
  z-index: 3;
}

/* ── Phase band (ribbon across multiple days) ───────────────── */
.sched-cal-band {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--accent-warm, #C4A57B) 0%,
    rgba(196, 165, 123, 0.7) 100%
  );
  z-index: 1;
}
.phase-band-start {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  margin-left: 4px;
}
.phase-band-end {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  margin-right: 4px;
}
.phase-band-only {
  border-radius: 3px;
  margin: 0 4px;
}
.sched-cal-in-phase {
  background: rgba(196, 165, 123, 0.04);
}
.sched-cal-phase-label {
  font: 500 10px/1.2 var(--font-nav);
  letter-spacing: 0.04em;
  /* Mid-phase days: muted-warm chip so the calendar feels populated
     without screaming. Boundary days (start/end) get a brighter
     treatment via .is-phase-start / .is-phase-end below. */
  color: rgba(196, 165, 123, 0.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  z-index: 2;
  margin-top: 2px;
  text-transform: none;
}
.sched-cal-phase-label.is-phase-start,
.sched-cal-phase-label.is-phase-end {
  /* Boundary day: the phase name pops to make the milestone obvious. */
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-warm, #C4A57B);
}

/* ── Event chip ─────────────────────────────────────────────── */
.sched-cal-events {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: auto;
  position: relative;
  z-index: 2;
}
.sched-cal-event {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline, var(--border-light));
  color: var(--text);
  font: 500 11px/1.25 var(--font-body);
  text-align: left;
  padding: 4px 7px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.005em;
  transition: background 140ms ease, border-color 140ms ease;
}
.sched-cal-event:hover {
  background: var(--accent-soft, rgba(196,165,123,0.16));
  border-color: rgba(196, 165, 123, 0.55);
}
.sched-cal-event-more {
  font: 600 10px/1 var(--font-nav);
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
  padding-left: 4px;
}

.sched-cal-footer {
  padding: 12px 26px 18px;
  border-top: 1px solid var(--hairline, var(--border-light));
}
.sched-cal-hint {
  font: 400 11px/1.4 var(--font-body);
  color: var(--text-tertiary);
  letter-spacing: 0.005em;
}

/* ── Schedule event modal ──────────────────────────────────── */
.sched-event-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
}
.sched-event-modal {
  background: var(--surface-elevated, var(--surface));
  border: 1px solid var(--hairline, var(--border-light));
  border-radius: 16px;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.32);
  overflow: hidden;
}
.sched-event-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 14px;
  border-bottom: 1px solid var(--hairline, var(--border-light));
}
.sched-event-modal-eyebrow {
  font: 700 10px/1 var(--font-nav);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-warm, #C4A57B);
}
.sched-event-modal-close {
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: color 140ms ease, background 140ms ease;
}
.sched-event-modal-close:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}
.sched-event-modal-body {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sched-event-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sched-event-field-label {
  font: 600 10px/1 var(--font-nav);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.sched-event-input {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--hairline, var(--border-light));
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text);
  font: 500 14px/1.4 var(--font-body);
  width: 100%;
  box-sizing: border-box;
  transition: border-color 140ms ease, background 140ms ease;
}
.sched-event-input:focus {
  outline: none;
  border-color: rgba(196, 165, 123, 0.6);
  background: rgba(255, 255, 255, 0.06);
}
.sched-event-textarea {
  resize: vertical;
  font-family: var(--font-body);
  min-height: 80px;
}
.sched-event-fields-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.sched-event-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px 20px;
  border-top: 1px solid var(--hairline, var(--border-light));
}
.sched-event-actions {
  display: flex;
  gap: 8px;
}
.sched-event-delete {
  color: #d7757b !important;
}
.sched-event-delete:hover {
  background: rgba(215, 117, 123, 0.08) !important;
  color: #e08a8f !important;
}

/* ═══════════════════════════════════════════════════════════════
   CLIENT HOME v3 — magazine/zine layout
   ═══════════════════════════════════════════════════════════════ */

/* Reset the home rows to give the magazine spread room. */
.home-row-main-grid {
  grid-template-columns: minmax(0, 1.55fr) minmax(340px, 1fr);
  gap: 28px;
  align-items: start;
}
.home-row-main-grid .home-row-main,
.home-row-main-grid .home-row-side {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (max-width: 1100px) {
  .home-row-main-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ── Budget strip ───────────────────────────────────────────── */
.home-budget-strip {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 0;
  background: var(--surface-elevated, var(--surface));
  border: 1px solid var(--hairline, var(--border-light));
  border-radius: 16px;
  padding: 20px 28px;
  margin-bottom: 20px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.08);
}

/* Pricing-pending card — shown in place of the home budget strip
   and the Finances tab content while project.contractAccepted is
   not yet true. Same vertical rhythm as .home-budget-strip so the
   page composition stays balanced; quieter type so it reads as a
   waiting state, not a value display. */
.client-pricing-pending {
  background: var(--surface-elevated, var(--surface));
  border: 1px solid var(--hairline, var(--border-light));
  border-radius: 16px;
  padding: 28px 32px;
  margin-bottom: 20px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.client-pricing-pending-eyebrow {
  font: 600 11px/1 var(--font-nav, var(--font-body));
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-warm, #C4A57B);
  margin-bottom: 14px;
}
.client-pricing-pending-title {
  font: 500 22px/1.25 var(--font-display, var(--font-body));
  color: var(--text);
  letter-spacing: -0.005em;
  margin: 0 0 8px 0;
}
.client-pricing-pending-body {
  font: 400 14px/1.55 var(--font-body);
  color: var(--text-secondary);
  margin: 0;
  max-width: 560px;
}
.bs-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: none;
  color: inherit;
  padding: 2px 14px;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
  transition: background 140ms ease;
}
.bs-stat:hover { background: var(--accent-soft, rgba(196,165,123,0.05)); }
.bs-stat-label {
  font: 600 10px/1 var(--font-nav);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.bs-stat-value {
  font-family: var(--font-heading);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 800;
  letter-spacing: 0.005em;
  color: var(--text);
  line-height: 1.1;
}
.bs-stat-sub {
  font: 500 11px/1.2 var(--font-body);
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
}
.bs-stat-accent .bs-stat-value { color: #D49A47; }
.bs-stat-accent .bs-stat-sub { color: #D49A47; opacity: 0.85; }
.bs-divider {
  width: 1px;
  background: var(--hairline, var(--border-light));
  margin: 6px 0;
}
@media (max-width: 760px) {
  .home-budget-strip {
    grid-template-columns: 1fr;
    padding: 16px 18px;
  }
  .bs-divider { width: 100%; height: 1px; margin: 10px 0; }
}

/* ── Phase + Week card ─────────────────────────────────────── */
.hpw-card {
  display: grid;
  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
  gap: 0;
  background: var(--surface-elevated, var(--surface));
  border: 1px solid var(--hairline, var(--border-light));
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.10);
}
.hpw-phase-col {
  padding: 24px 22px 22px;
  border-right: 1px solid var(--hairline, var(--border-light));
  background: linear-gradient(
    180deg,
    rgba(196, 165, 123, 0.06) 0%,
    transparent 100%
  );
  display: flex;
  flex-direction: column;
}
.hpw-phase-eyebrow {
  font: 700 10px/1 var(--font-nav);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-warm, #C4A57B);
  margin-bottom: 10px;
}
.hpw-phase-name {
  font-family: var(--font-heading);
  font-size: clamp(20px, 1.9vw, 24px);
  font-weight: 800;
  line-height: 1.15;
  color: var(--text);
  margin: 0 0 6px;
  letter-spacing: 0.005em;
}
.hpw-phase-dates {
  font: 500 12px/1.4 var(--font-body);
  color: var(--text-secondary);
  letter-spacing: 0.01em;
  margin-bottom: 10px;
}
.hpw-phase-desc {
  font: 400 13px/1.55 var(--font-body);
  color: var(--text-secondary);
  margin: 0 0 12px;
}
.hpw-phase-progress {
  height: 3px;
  background: var(--hairline, var(--border-light));
  border-radius: 2px;
  overflow: hidden;
  margin: 8px 0 14px;
}
.hpw-phase-progress-fill {
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--accent-warm, #C4A57B) 0%,
    rgba(196,165,123,0.6) 100%
  );
}
.hpw-phase-next {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline, var(--border-light));
  margin-top: auto;
}
.hpw-phase-next-label {
  font: 600 10px/1 var(--font-nav);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.hpw-phase-next-name {
  font: 600 13px/1.3 var(--font-body);
  color: var(--text);
}
.hpw-phase-next-date {
  font: 500 12px/1.3 var(--font-body);
  color: var(--text-secondary);
}
.hpw-phase-fulltimeline {
  display: block;
  margin-top: 14px;
  font: 600 11px/1 var(--font-body);
  color: var(--accent-warm, #C4A57B);
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
}
.hpw-phase-fulltimeline:hover { opacity: 0.75; }

/* Week column */
.hpw-week-col {
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.hpw-week-eyebrow {
  font: 700 10px/1 var(--font-nav);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 14px;
}
.hpw-week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  flex: 1;
}
.hpw-day {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 140px;
  padding: 10px 8px 8px;
  border: 1px solid var(--hairline, var(--border-light));
  border-radius: 10px;
  transition: background 160ms ease, border-color 160ms ease;
}
.hpw-day-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hpw-day-dow {
  font: 700 9px/1 var(--font-nav);
  letter-spacing: 0.12em;
  color: var(--text-tertiary);
}
.hpw-day-num {
  font: 700 18px/1 var(--font-heading, var(--font-body));
  color: var(--text-secondary);
  letter-spacing: 0.005em;
}
.hpw-day-month {
  font: 600 10px/1 var(--font-nav);
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}
.hpw-day-today {
  background: rgba(196, 165, 123, 0.10);
  border-color: rgba(196, 165, 123, 0.42);
}
.hpw-day-today .hpw-day-num {
  color: var(--text);
  font-weight: 800;
}
.hpw-day-today .hpw-day-dow {
  color: var(--accent-warm, #C4A57B);
}
.hpw-day-events {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: auto;
}
.hpw-event {
  font: 500 10px/1.3 var(--font-body);
  padding: 3px 6px;
  border-radius: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.005em;
}
.hpw-event-phase-start,
.hpw-event-phase-end {
  background: var(--accent-soft, rgba(196,165,123,0.14));
  color: var(--accent-warm, #C4A57B);
  border: 1px solid rgba(196, 165, 123, 0.32);
}
/* Active phase — quiet chip that tells the client "this is what's
   happening today." Lower-key than the start/end milestones so phase
   boundaries still pop. Always renders first in the day's event
   stack so it reads as the day's default context. */
.hpw-event-phase-active {
  background: rgba(196, 165, 123, 0.06);
  color: rgba(196, 165, 123, 0.85);
  border: 1px solid rgba(196, 165, 123, 0.18);
  font-weight: 500;
}
.hpw-event-event {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  border: 1px solid var(--hairline, var(--border-light));
}
.hpw-event-invoice {
  background: rgba(212, 154, 71, 0.12);
  color: #D49A47;
  border: 1px solid rgba(212, 154, 71, 0.32);
}
.hpw-event-selection {
  background: rgba(126, 181, 167, 0.12);
  color: #7EB5A7;
  border: 1px solid rgba(126, 181, 167, 0.32);
}
.hpw-event-post {
  background: rgba(196, 165, 123, 0.08);
  color: var(--text-secondary);
  border: 1px solid var(--hairline, var(--border-light));
}
.hpw-event-more {
  font: 600 10px/1 var(--font-nav);
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
  padding-left: 2px;
}
.hpw-event-empty {
  flex: 1;
}

@media (max-width: 900px) {
  .hpw-card { grid-template-columns: 1fr; }
  .hpw-phase-col { border-right: none; border-bottom: 1px solid var(--hairline, var(--border-light)); }
  .hpw-week-grid { gap: 3px; }
  .hpw-day { min-height: 110px; }
}

/* ── Messages panel (Home side column) ─────────────────────── */
.hmp-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-elevated, var(--surface));
  border: 1px solid var(--hairline, var(--border-light));
  border-radius: 16px;
  overflow: hidden;
  max-height: 720px;
  min-height: 480px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.10);
}
.hmp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--hairline, var(--border-light));
}
.hmp-eyebrow {
  font: 700 10px/1 var(--font-nav);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-warm, #C4A57B);
}
.hmp-link {
  font: 600 11px/1 var(--font-body);
  color: var(--text-secondary);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: color 140ms ease;
}
.hmp-link:hover { color: var(--accent-warm, #C4A57B); }

.hmp-feed {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hmp-feed::-webkit-scrollbar { width: 8px; }
.hmp-feed::-webkit-scrollbar-track { background: transparent; }
.hmp-feed::-webkit-scrollbar-thumb { background: var(--hairline, var(--border-light)); border-radius: 4px; }

.hmp-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary);
}
.hmp-empty-title {
  font: 600 14px/1.3 var(--font-body);
  color: var(--text);
  margin-bottom: 6px;
}
.hmp-empty-sub {
  font: 400 12px/1.5 var(--font-body);
  color: var(--text-tertiary);
}

.hmp-msg {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.hmp-msg-avatar {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-soft, rgba(196, 165, 123, 0.18));
  color: var(--accent-warm, #C4A57B);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 10px/1 var(--font-nav);
  letter-spacing: 0.04em;
}
.hmp-msg-body { flex: 1; min-width: 0; }
.hmp-msg-meta {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 4px;
}
.hmp-msg-name {
  font: 600 12px/1.2 var(--font-body);
  color: var(--text);
}
.hmp-msg-time {
  font: 400 10px/1.2 var(--font-body);
  color: var(--text-tertiary);
}
.hmp-msg-text {
  font: 400 13px/1.5 var(--font-body);
  color: var(--text-secondary);
  letter-spacing: 0.005em;
  word-break: break-word;
}
.hmp-msg-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.hmp-photo {
  width: 80px;
  height: 80px;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  background-color: var(--accent-soft, rgba(196,165,123,0.08));
  cursor: pointer;
  transition: opacity 140ms ease;
}
.hmp-photo:hover { opacity: 0.88; }

.hmp-msg-mine {
  flex-direction: row-reverse;
}
.hmp-msg-mine .hmp-msg-body {
  text-align: right;
}
.hmp-msg-mine .hmp-msg-meta {
  justify-content: flex-end;
}
.hmp-msg-mine .hmp-msg-text {
  display: inline-block;
  background: var(--accent-soft, rgba(196, 165, 123, 0.14));
  border: 1px solid rgba(196, 165, 123, 0.30);
  padding: 8px 12px;
  border-radius: 10px;
  text-align: left;
}

.hmp-compose {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--hairline, var(--border-light));
  background: rgba(255, 255, 255, 0.01);
}
.hmp-compose-input {
  width: 100%;
  min-height: 40px;
  max-height: 96px;
  padding: 10px 12px;
  background: var(--surface, rgba(255,255,255,0.03));
  border: 1px solid var(--hairline, var(--border-light));
  border-radius: 10px;
  color: var(--text);
  font: 400 13px/1.45 var(--font-body);
  resize: none;
  box-sizing: border-box;
  transition: border-color 140ms ease;
}
.hmp-compose-input:focus {
  outline: none;
  border-color: rgba(196, 165, 123, 0.55);
}
.hmp-compose-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hmp-compose-photo {
  background: transparent;
  border: 1px solid var(--hairline, var(--border-light));
  width: 36px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 16px;
  transition: background 140ms ease, border-color 140ms ease;
}
.hmp-compose-photo:hover {
  background: var(--accent-soft, rgba(196, 165, 123, 0.08));
  border-color: rgba(196, 165, 123, 0.4);
}
.hmp-compose-send {
  background: var(--accent-warm, #C4A57B);
  color: #fff;
  border: 1px solid rgba(196, 165, 123, 0.55);
  padding: 8px 18px;
  border-radius: 8px;
  cursor: pointer;
  font: 700 11px/1 var(--font-nav);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: opacity 140ms ease, transform 140ms ease;
}
.hmp-compose-send:hover { opacity: 0.9; }
.hmp-compose-send:active { transform: scale(0.97); }
.hmp-compose-send:disabled { opacity: 0.6; cursor: progress; }
.hmp-compose-attached {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hmp-attached-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: var(--accent-soft, rgba(196,165,123,0.12));
  border: 1px solid rgba(196, 165, 123, 0.32);
  border-radius: 999px;
  font: 500 11px/1 var(--font-body);
  color: var(--text);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hmp-attached-remove {
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 0;
  font-size: 14px;
  line-height: 1;
}

/* ── Action items card ───────────────────────────────────────
   Sits between the hero and the budget strip when anything is
   pending. Standalone full-width card. The .home-row > .hai-card
   selector below tightens vertical rhythm when it appears.
   ───────────────────────────────────────────────────── */
.hai-card {
  background: var(--surface-elevated, var(--surface));
  border: 1px solid var(--hairline, var(--border-light));
  border-radius: 16px;
  padding: 20px 22px 18px;
  margin: 24px clamp(24px, 4vw, 80px) 20px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
}
/* When hai-card is inside .home-row (nested layout), drop the
   outer margin since the row provides the gutter. */
.home-row .hai-card { margin: 0; }
.hai-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.hai-eyebrow {
  font: 700 10px/1 var(--font-nav);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-warm, #C4A57B);
}
.hai-count {
  font: 500 11px/1 var(--font-body);
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
}
.hai-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hai-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--hairline, var(--border-light));
  border-radius: 12px;
  transition: border-color 140ms ease, transform 140ms ease;
}
.hai-item:hover {
  border-color: rgba(196, 165, 123, 0.4);
  transform: translateY(-1px);
}
.hai-item-tag {
  font: 700 9px/1 var(--font-nav);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
}
.hai-item-tag-co {
  color: #D49A47;
  background: rgba(212, 154, 71, 0.12);
  border: 1px solid rgba(212, 154, 71, 0.32);
}
.hai-item-tag-sel {
  color: #7EB5A7;
  background: rgba(126, 181, 167, 0.12);
  border: 1px solid rgba(126, 181, 167, 0.32);
}
.hai-item-body { min-width: 0; }
.hai-item-title {
  font: 600 14px/1.3 var(--font-body);
  color: var(--text);
  letter-spacing: 0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hai-item-meta {
  font: 400 12px/1.4 var(--font-body);
  color: var(--text-secondary);
  margin-top: 2px;
}
.hai-item-cta {
  background: var(--accent-warm, #C4A57B);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font: 700 11px/1 var(--font-nav);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity 140ms ease, transform 140ms ease;
}
.hai-item-cta:hover { opacity: 0.9; }
.hai-item-cta:active { transform: scale(0.97); }

/* ── Full timeline modal ───────────────────────────────────── */
.ftl-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 24px;
}
.ftl-modal {
  background: var(--surface-elevated, var(--surface));
  border: 1px solid var(--hairline, var(--border-light));
  border-radius: 16px;
  width: 100%;
  max-width: 620px;
  max-height: calc(100vh - 48px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.38);
}
.ftl-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 14px;
  border-bottom: 1px solid var(--hairline, var(--border-light));
}
.ftl-eyebrow {
  font: 700 10px/1 var(--font-nav);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-warm, #C4A57B);
}
.ftl-close {
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 28px;
  height: 28px;
}
.ftl-close:hover { color: var(--text); }
.ftl-list {
  padding: 20px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ftl-row {
  display: flex;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--hairline, var(--border-light));
  border-radius: 12px;
  transition: border-color 140ms ease;
}
.ftl-row-completed { opacity: 0.65; }
.ftl-row-in-progress {
  border-color: rgba(196, 165, 123, 0.42);
  background: rgba(196, 165, 123, 0.05);
}
.ftl-num {
  font: 700 11px/1 var(--font-nav);
  letter-spacing: 0.12em;
  color: var(--text-tertiary);
  padding-top: 2px;
  min-width: 24px;
}
.ftl-body { flex: 1; min-width: 0; }
.ftl-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 700 14px/1.3 var(--font-body);
  color: var(--text);
  margin-bottom: 4px;
}
.ftl-status {
  font: 700 9px/1 var(--font-nav);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
.ftl-status-done {
  color: var(--text-tertiary);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline, var(--border-light));
}
.ftl-status-active {
  color: var(--accent-warm, #C4A57B);
  background: var(--accent-soft, rgba(196, 165, 123, 0.12));
  border: 1px solid rgba(196, 165, 123, 0.32);
}
.ftl-status-upcoming {
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--hairline, var(--border-light));
}
.ftl-dates {
  font: 500 12px/1.3 var(--font-body);
  color: var(--text-secondary);
  letter-spacing: 0.005em;
  margin-bottom: 6px;
}
.ftl-desc {
  font: 400 12px/1.55 var(--font-body);
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.ftl-progress {
  height: 2px;
  background: var(--hairline, var(--border-light));
  border-radius: 1px;
  overflow: hidden;
  margin-top: 8px;
}
.ftl-progress-fill {
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--accent-warm, #C4A57B) 0%,
    rgba(196, 165, 123, 0.6) 100%
  );
}

/* ════════════════════════════════════════════════════════════
   SALES TAX — wizard, project edit, estimate totals popover
   Added with the per-project sales tax feature so the rate
   shows up everywhere it's needed (wizard, edit, totals card)
   without rebuilding shared form CSS.
   ════════════════════════════════════════════════════════════ */

/* Wizard step 1 + project Details edit form — softly grouped section */
.wizard-tax-block,
.details-tax-block {
  margin-top: 18px;
  padding: 14px 16px 8px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--bg-alt, rgba(196,165,123,0.04));
}

/* Billing mode radio block on wizard Step 1 + project Details. Same
   visual treatment as .wizard-choice but inline-stackable inside the
   wizard-tax-block container. Two cards stacked vertically. */
.wizard-billing-mode {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 6px;
}
.wizard-billing-choice {
  position: relative;
  display: block;
  padding: 12px 14px 12px 38px;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  background: var(--bg-card, rgba(255,255,255,0.02));
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}
.wizard-billing-choice:hover { border-color: var(--text-secondary); }
.wizard-billing-choice.selected {
  border-color: var(--accent, #C4A57B);
  background: rgba(196,165,123,0.06);
}
.wizard-billing-choice input[type="radio"] {
  position: absolute;
  left: 14px;
  top: 14px;
  margin: 0;
}
.wizard-billing-label {
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.wizard-billing-desc {
  display: block;
  margin-top: 3px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.4;
}
.wizard-tax-title,
.details-tax-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--font-nav);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.wizard-tax-help,
.details-tax-help {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-tertiary);
}
/* Override .admin-form-group label uppercase styling — the toggle label
   is read as a sentence next to a checkbox, not a form-field eyebrow. */
.admin-form-group label.wizard-tax-toggle,
.admin-form-group label.details-tax-toggle,
.wizard-tax-toggle,
.details-tax-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
  margin-bottom: 0;
}
.wizard-tax-toggle input[type="checkbox"],
.details-tax-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* Inline pencil / "+ tax" affordance on the totals card */
.estimate-tax-edit {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-nav);
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.estimate-tax-edit:hover {
  background: var(--accent-warm, #C4A57B);
  border-color: var(--accent-warm, #C4A57B);
  color: #fff;
}
.estimate-tax-edit-add {
  font-size: 10px;
  letter-spacing: 0.04em;
}

/* Floating tax popover anchored to the pencil */
.estimate-tax-pop {
  position: absolute;
  z-index: 9999;
  width: 280px;
  padding: 14px 16px 12px;
  background: var(--bg, #fff);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
  font-family: var(--font-body);
  color: var(--text);
}
.estimate-tax-pop-title {
  font-family: var(--font-nav);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.estimate-tax-pop-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.estimate-tax-pop-row label {
  flex: 0 0 70px;
  font-size: 12px;
  color: var(--text-secondary);
}
.estimate-tax-pop-row input[type="text"] {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  background: var(--bg-alt, transparent);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
}
.estimate-tax-pop-row input[type="text"]:focus {
  outline: none;
  border-color: var(--accent-warm, #C4A57B);
}
.estimate-tax-pop-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 12px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.estimate-tax-pop-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.estimate-tax-pop-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.btn-xsmall {
  padding: 4px 10px;
  font-size: 11px;
  font-family: var(--font-nav);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Autosave reassurance — bottom of the totals card + per-input pulse */
.estimate-saved-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-light);
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
}
.estimate-saved-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6BA876;     /* sage green — calm, not loud */
  box-shadow: 0 0 0 0 rgba(107, 168, 118, 0.6);
  animation: estimate-saved-pulse 1.6s ease-out 0s 1;
}
@keyframes estimate-saved-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(107, 168, 118, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(107, 168, 118, 0); }
  100% { box-shadow: 0 0 0 0 rgba(107, 168, 118, 0); }
}
/* Per-input flash when an inline cell save just persisted. The animation
   runs once for ~600ms, after which the class is removed. */
.budget-inline-input.field-just-saved,
.estimate-notes-textarea.field-just-saved {
  animation: estimate-field-saved 700ms ease-out;
  background-image: linear-gradient(90deg, transparent, rgba(107,168,118,0.18), transparent);
  background-size: 200% 100%;
  background-repeat: no-repeat;
}
@keyframes estimate-field-saved {
  0%   { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}

/* ════════════════════════════════════════════════════════════
   bpmConfirm / bpmPrompt — centered replacements for the
   browser's native confirm() / prompt() dialogs (which Safari
   anchors to the top of the page and won't reposition).
   ════════════════════════════════════════════════════════════ */

.bpm-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(20, 20, 22, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}
.bpm-dialog-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.bpm-dialog {
  width: min(440px, 92vw);
  background: var(--surface, #fff);
  border: 1px solid var(--hairline-strong, rgba(0,0,0,0.08));
  border-radius: 10px;
  padding: 24px 24px 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  font-family: var(--font-body);
  color: var(--text);
  transform: translateY(8px) scale(0.99);
  transition: transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.bpm-dialog-overlay.is-open .bpm-dialog {
  transform: translateY(0) scale(1);
}
.bpm-dialog-title {
  font-family: var(--font-display, var(--font-body));
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.25;
}
.bpm-dialog-message {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary, var(--text));
  margin-bottom: 16px;
}
.bpm-dialog-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-light, rgba(0,0,0,0.12));
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text);
  background: var(--bg, #fff);
  margin-bottom: 18px;
  box-sizing: border-box;
}
.bpm-dialog-input:focus {
  outline: none;
  border-color: var(--accent-warm, #C4A57B);
  box-shadow: 0 0 0 3px rgba(196, 165, 123, 0.18);
}
.bpm-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}
.bpm-dialog-actions .btn {
  min-width: 88px;
}

/* ════════════════════════════════════════════════════════════
   Inline Add Client (wizard step 1 + project Details edit)
   Expands beneath the client <select> when '+ Add new client'
   is picked. Match the wizard's nested-block aesthetic.
   ════════════════════════════════════════════════════════════ */

.inline-add-client {
  margin: 12px 0 20px;
  padding: 16px 18px 14px;
  border: 1px solid var(--border-light, rgba(0,0,0,0.10));
  border-radius: 8px;
  background: var(--bg-alt, rgba(196,165,123,0.06));
  animation: inline-add-client-slide 180ms ease-out;
}
@keyframes inline-add-client-slide {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.inline-add-client-title {
  font-family: var(--font-nav);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.inline-add-client-error {
  margin: 4px 0 12px;
  padding: 8px 12px;
  border-radius: 6px;
  background: rgba(190, 64, 64, 0.08);
  border: 1px solid rgba(190, 64, 64, 0.25);
  color: #b14040;
  font-size: 12.5px;
  line-height: 1.4;
}
.inline-invite-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 4px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
}
.inline-invite-check input { width: 15px; height: 15px; flex: 0 0 auto; cursor: pointer; }
.inline-invite-hint {
  font-size: 11.5px;
  color: var(--text-tertiary);
  line-height: 1.45;
  margin: 0 0 10px 23px;
}
.inline-add-client-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

/* ════════════════════════════════════════════════════════════
   Client activation tracking
   - Status sub-line under the Invited/Active badge in Clients tab
   - Stale-invite banner on admin project pages
   ════════════════════════════════════════════════════════════ */

.client-status-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}
.client-status-sub {
  font-size: 11px;
  color: var(--text-tertiary);
  font-family: var(--font-body);
  letter-spacing: 0.01em;
}

.client-activation-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 clamp(24px, 4vw, 80px) 18px;
  padding: 14px 18px;
  background: rgba(196, 165, 123, 0.10);
  border: 1px solid rgba(196, 165, 123, 0.28);
  border-radius: 10px;
  font-family: var(--font-body);
}
.client-activation-banner-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-warm, #C4A57B);
  color: #fff;
  font-family: var(--font-display, var(--font-body));
  font-weight: 700;
  font-size: 16px;
  line-height: 28px;
  text-align: center;
}
.client-activation-banner-body {
  flex: 1;
  min-width: 0;
}
.client-activation-banner-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.client-activation-banner-meta {
  font-size: 12px;
  color: var(--text-tertiary);
  letter-spacing: 0.01em;
}
.client-activation-banner .btn {
  flex-shrink: 0;
}

/* Billing-mode nudge banner — same visual rhythm as the activation
   banner, two action buttons stacked horizontally on the right. Shows
   only on legacy projects without a billingMode set; disappears once
   the admin picks a mode. */
.billing-mode-nudge-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 clamp(24px, 4vw, 80px) 18px;
  padding: 14px 18px;
  background: rgba(196, 165, 123, 0.06);
  border: 1px solid rgba(196, 165, 123, 0.20);
  border-radius: 10px;
  font-family: var(--font-body);
}
.billing-mode-nudge-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-warm, #C4A57B);
  color: #fff;
  font-family: var(--font-display, var(--font-body));
  font-weight: 700;
  font-size: 14px;
  line-height: 28px;
  text-align: center;
}
.billing-mode-nudge-body { flex: 1; min-width: 0; }
.billing-mode-nudge-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.billing-mode-nudge-meta {
  font-size: 12px;
  color: var(--text-tertiary);
  letter-spacing: 0.01em;
}
.billing-mode-nudge-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .billing-mode-nudge-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .billing-mode-nudge-actions { width: 100%; }
  .billing-mode-nudge-actions .btn { flex: 1; }
}


/* ════════════════════════════════════════════════════════════════════
   ADMIN TIMELINE — Calendar / Gantt view toggle + premium Gantt chart
   Builder-only. Client portal never renders the Gantt.
   ════════════════════════════════════════════════════════════════════ */

/* ── Toolbar (Calendar / Gantt view switcher) ─────────────────── */
.timeline-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.timeline-view-toggle {
  display: inline-flex;
  background: var(--bg-alt, rgba(196, 165, 123, 0.08));
  border: 1px solid var(--border-light);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.timeline-view-btn {
  appearance: none;
  background: transparent;
  border: 0;
  font-family: var(--font-nav);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  padding: 7px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.timeline-view-btn:hover { color: var(--text); }
.timeline-view-btn.is-active {
  background: var(--surface, #fff);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
}

/* Gantt mode fills the full content column. */
.timeline-layout--gantt > .gantt-wrap,
.timeline-layout--gantt .gantt-wrap { width: 100%; display: block; }

/* ── Gantt wrap ──────────────────────────────────────────────── */
.gantt-wrap {
  background: var(--surface);
  border: 1px solid var(--hairline-strong, var(--border-light));
  border-radius: 14px;
  padding: 18px 18px 14px;
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.06);
  font-family: var(--font-body);
}
.gantt-wrap--empty { padding: 36px 28px; }

/* Empty state card (no phase dates set yet) */
.gantt-empty-card {
  text-align: center;
  max-width: 520px;
  margin: 0 auto;
}
.gantt-empty-eyebrow {
  font-family: var(--font-nav);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.gantt-empty-msg {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0 0 16px;
}

/* Toolbar inside the Gantt (scale switch + legend) */
.gantt-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.gantt-scale-toggle {
  display: inline-flex;
  background: var(--bg-alt, rgba(196, 165, 123, 0.08));
  border: 1px solid var(--border-light);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.gantt-scale-btn {
  appearance: none;
  background: transparent;
  border: 0;
  font-family: var(--font-nav);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.gantt-scale-btn:hover { color: var(--text); }
.gantt-scale-btn.is-active {
  background: var(--surface, #fff);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.gantt-legend {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-size: 11.5px;
  color: var(--text-tertiary);
  font-family: var(--font-body);
}
.gantt-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.gantt-legend-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
}
.gantt-legend--done    { background: var(--accent-warm, #C4A57B); }
.gantt-legend--active  { background: rgba(196, 165, 123, 0.55); border: 1px solid rgba(196, 165, 123, 0.7); }
.gantt-legend--planned { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border-light); }
.gantt-legend--critical { background: #D97B4F; }

/* Critical-path toggle styled as an interactive legend item */
.gantt-legend-toggle {
  appearance: none;
  background: transparent;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 11.5px;
  color: var(--text-tertiary);
  padding: 3px 8px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, opacity 120ms ease;
  opacity: 0.55;
}
.gantt-legend-toggle:hover { color: var(--text); background: var(--bg-alt, rgba(196, 165, 123, 0.06)); }
.gantt-legend-toggle.is-active {
  color: var(--text);
  opacity: 1;
  background: rgba(217, 123, 79, 0.10);
}
.gantt-legend--today {
  display: inline-block;
  width: 1px;
  height: 14px;
  background: #b14040;
  position: relative;
}
.gantt-legend--today::before,
.gantt-legend--today::after {
  content: '';
  display: block;
  position: absolute;
  left: -3px;
  width: 7px;
  height: 1px;
  background: #b14040;
}
.gantt-legend--today::before { top: 0; }
.gantt-legend--today::after  { bottom: 0; }

/* ── Grid: sticky left rail + scrollable timeline pane ───────── */
.gantt-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  border: 1px solid var(--hairline, var(--border-light));
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
}

/* Top-left header above the rail — labels the Phase + Duration columns */
.gantt-rail-header {
  border-bottom: 1px solid var(--hairline, var(--border-light));
  border-right: 1px solid var(--hairline, var(--border-light));
  background: var(--bg-alt, rgba(196, 165, 123, 0.04));
  height: 56px;
  display: flex;
  align-items: flex-end;
  padding: 0 14px 10px;
  font-family: var(--font-nav);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-secondary);
  gap: 10px;
  box-sizing: border-box;
}
.gantt-rail-header-main { flex: 1; min-width: 0; }
.gantt-rail-header-dur {
  width: 60px;
  text-align: right;
  flex-shrink: 0;
}

/* Top axis (months + day numbers) — scrolls horizontally with the timeline below */
.gantt-axis-scroll {
  overflow-x: hidden;       /* synced via JS to ganttTimelineScroll */
  border-bottom: 1px solid var(--hairline, var(--border-light));
  background: var(--bg-alt, rgba(196, 165, 123, 0.03));
}
.gantt-axis-inner { min-width: 100%; }
.gantt-axis-svg { display: block; }
.gantt-axis-bg { fill: transparent; }

/* Left rail with phase names + status dot + dates + duration.
   Wrapped in .gantt-rail-scroll so it can scroll vertically in
   lockstep with the timeline pane when the phase list overflows. */
.gantt-rail-scroll {
  max-height: 60vh;
  overflow-y: auto;
  overflow-x: hidden;
  border-right: 1px solid var(--hairline, var(--border-light));
  background: var(--bg-alt, rgba(196, 165, 123, 0.03));
  /* Hide the scrollbar visually — the timeline pane shows one */
  scrollbar-width: none;
}
.gantt-rail-scroll::-webkit-scrollbar { width: 0; height: 0; }
.gantt-rail {
  background: transparent;
}
.gantt-rail-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  height: 44px;
  box-sizing: border-box;
  overflow: hidden;
  border-bottom: 1px solid var(--hairline, var(--border-light));
}
.gantt-rail-row:last-child { border-bottom: 0; }
.gantt-rail-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.gantt-rail-dur {
  flex-shrink: 0;
  width: 60px;
  text-align: right;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
  line-height: 1;
}
.gantt-rail-dur-unit {
  font-weight: 500;
  color: var(--text-tertiary);
}
.gantt-rail-dur-empty {
  color: var(--text-tertiary);
  font-weight: 400;
}
.gantt-rail-num {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  width: 24px;
  flex-shrink: 0;
}
.gantt-rail-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.gantt-rail-dot--done    { background: var(--accent-warm, #C4A57B); }
.gantt-rail-dot--active  { background: rgba(196, 165, 123, 0.5); border: 1px solid var(--accent-warm, #C4A57B); }
.gantt-rail-dot--planned { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border-light); }
.gantt-rail-meta {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.25;
}
.gantt-rail-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.005em;
  line-height: 1.2;
}
.gantt-rail-dates {
  font-size: 10.5px;
  color: var(--text-tertiary);
  font-family: var(--font-mono, ui-monospace, monospace);
  letter-spacing: 0.02em;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

/* Scrollable timeline pane. Horizontal scrolling is independent of the
   sticky axis (axis mirrors x via JS). Vertical scrolling is synced to
   the left rail via JS so phase names stay aligned with their bars
   when the phase list overflows. */
.gantt-timeline-scroll {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 60vh;
}
.gantt-timeline-scroll::-webkit-scrollbar { height: 10px; }
.gantt-timeline-scroll::-webkit-scrollbar-thumb {
  background: rgba(196, 165, 123, 0.30);
  border-radius: 999px;
}
.gantt-timeline-svg { display: block; user-select: none; }

/* SVG primitives — palette tokens swap for dark/light theme */
.gantt-grid-day   { stroke: rgba(0, 0, 0, 0.04); stroke-width: 1; }
.gantt-grid-week  { stroke: rgba(0, 0, 0, 0.07); stroke-width: 1; }
.gantt-grid-month { stroke: rgba(0, 0, 0, 0.13); stroke-width: 1; }
.gantt-row-sep    { stroke: var(--hairline, rgba(0, 0, 0, 0.08)); stroke-width: 1; }
.gantt-row-stripe { fill: rgba(196, 165, 123, 0.025); }

@media (prefers-color-scheme: dark) {
  .gantt-grid-day   { stroke: rgba(255, 255, 255, 0.04); }
  .gantt-grid-week  { stroke: rgba(255, 255, 255, 0.07); }
  .gantt-grid-month { stroke: rgba(255, 255, 255, 0.13); }
  .gantt-row-stripe { fill: rgba(255, 255, 255, 0.02); }
}

.gantt-day-label {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10.5px;
  fill: var(--text-tertiary, #888);
}
.gantt-month-label {
  font-family: var(--font-nav);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  fill: var(--text-secondary, #555);
}

.gantt-today {
  stroke: #b14040;
  stroke-width: 1.4;
  stroke-dasharray: 5 4;
  pointer-events: none;
  filter: drop-shadow(0 0 3px rgba(177, 64, 64, 0.3));
}
.gantt-today-pill {
  fill: #b14040;
  pointer-events: none;
  animation: ganttTodayPulse 2.4s ease-in-out infinite;
}
@keyframes ganttTodayPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}
.gantt-today-label {
  font-family: var(--font-nav);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  fill: #fff;
  pointer-events: none;
}

/* ── Bars ──────────────────────────────────────────────────────
   Three states: planned (default), in-progress (active), done.
   Single warm accent ramp instead of a per-row HSL rainbow so
   the chart reads as one composition. ─────────────────────── */
.gantt-bar-base { transition: filter 140ms ease; }
.gantt-bar-fill { pointer-events: none; }

.gantt-bar-group.is-planned .gantt-bar-base {
  fill: rgba(196, 165, 123, 0.16);
  stroke: rgba(196, 165, 123, 0.55);
  stroke-width: 1;
}
.gantt-bar-group.is-planned .gantt-bar-fill { fill: rgba(196, 165, 123, 0.32); }

.gantt-bar-group.is-active .gantt-bar-base {
  fill: rgba(196, 165, 123, 0.32);
  stroke: var(--accent-warm, #C4A57B);
  stroke-width: 1.2;
}
.gantt-bar-group.is-active .gantt-bar-fill { fill: var(--accent-warm, #C4A57B); }

.gantt-bar-group.is-done .gantt-bar-base { fill: var(--accent-warm, #C4A57B); }
.gantt-bar-group.is-done .gantt-bar-fill { fill: var(--accent-warm, #C4A57B); }

/* Past-due: phase end date has elapsed but status isn't 'completed'.
   Red border + subtle red tint draws builder attention. */
.gantt-bar-group.is-past-due .gantt-bar-base {
  stroke: var(--danger, #b14040);
  stroke-width: 1.6;
}
.gantt-bar-group.is-past-due .gantt-bar-fill { fill: rgba(177, 64, 64, 0.45); }

/* Critical path overlay — single new warm-red/amber accent on top of
   whatever state styling the bar already has. Past-due wins on stroke
   color (existing rule) when both apply; critical adds a glow halo. */
.gantt-bar-group.is-critical .gantt-bar-base {
  stroke: #D97B4F;
  stroke-width: 2;
  filter: drop-shadow(0 0 3px rgba(217, 123, 79, 0.4));
}

.gantt-bar-label {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  fill: var(--text);
  pointer-events: none;
  letter-spacing: 0.005em;
}
.gantt-bar-group.is-done .gantt-bar-label,
.gantt-bar-group.is-active .gantt-bar-label { fill: #1a1815; }
.gantt-bar-group.is-active.is-darkbg .gantt-bar-label { fill: #fff; }

.gantt-bar-hit { fill: transparent; cursor: grab; }
.gantt-bar-handle { fill: transparent; cursor: ew-resize; }
.gantt-bar-group:hover .gantt-bar-base { filter: brightness(1.06); }
.gantt-bar-group.is-dragging .gantt-bar-base { filter: brightness(1.08); }
.gantt-bar-group.is-dragging .gantt-bar-hit { cursor: grabbing; }

/* Drag tooltip — small "±N days" badge near cursor during drag */
.gantt-drag-tip {
  position: fixed;
  z-index: 9100;
  padding: 3px 8px;
  background: var(--surface);
  border: 1px solid var(--accent-warm, #C4A57B);
  border-radius: 6px;
  font-family: var(--font-nav);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--accent-warm, #C4A57B);
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* "+ Set dates" placeholder for phases without start/end */
.gantt-bar-empty-bg {
  fill: transparent;
  stroke: var(--border-light);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  cursor: pointer;
  transition: fill 120ms ease, stroke 120ms ease;
}
.gantt-bar-empty-group:hover .gantt-bar-empty-bg {
  fill: rgba(196, 165, 123, 0.06);
  stroke: var(--accent-warm, #C4A57B);
}
.gantt-bar-empty {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 500;
  fill: var(--text-tertiary);
  pointer-events: none;
  letter-spacing: 0.01em;
}

/* Dependency arrows — wrapped in a clickable <g class="gantt-dep">. */
.gantt-dep { cursor: pointer; }
.gantt-dep-arrow {
  fill: none;
  stroke: var(--accent-warm, #C4A57B);
  stroke-width: 1.5;
  opacity: 0.8;
  pointer-events: none;
}
.gantt-dep-head {
  fill: var(--accent-warm, #C4A57B);
  opacity: 0.8;
  pointer-events: none;
}
/* Wide invisible hit-path makes the thin arrow easy to click */
.gantt-dep-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 14;
  pointer-events: stroke;
}
/* × badge at the arrow's bend — only visible on hover */
.gantt-dep-delete { opacity: 0; transition: opacity 120ms ease; pointer-events: none; }
.gantt-dep:hover .gantt-dep-delete { opacity: 1; pointer-events: all; }
.gantt-dep-delete-bg { fill: var(--surface, #fff); stroke: var(--accent-warm, #C4A57B); stroke-width: 1.2; }
.gantt-dep-delete-x {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  fill: var(--accent-warm, #C4A57B);
  pointer-events: none;
  user-select: none;
}
.gantt-dep:hover .gantt-dep-arrow,
.gantt-dep:hover .gantt-dep-head { opacity: 1; }

/* Right-edge connector handle — appears on bar hover, drag to connect */
.gantt-bar-connector {
  fill: var(--accent-warm, #C4A57B);
  stroke: var(--surface, #fff);
  stroke-width: 1.5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease, r 120ms ease;
}
.gantt-bar-connector-hit {
  fill: transparent;
  cursor: crosshair;
  pointer-events: all;
}
.gantt-bar-group:hover .gantt-bar-connector,
.gantt-bar-group.is-connector-source .gantt-bar-connector { opacity: 1; }
.gantt-bar-connector-hit:hover + .gantt-bar-connector,
.gantt-bar-group .gantt-bar-connector-hit:hover ~ .gantt-bar-connector { opacity: 1; }

/* Source bar highlight while dragging a connector */
.gantt-bar-group.is-connector-source .gantt-bar-base {
  stroke: var(--accent-warm, #C4A57B);
  stroke-width: 2;
}
/* Target bar highlight as cursor hovers over candidate successor */
.gantt-bar-group.is-connector-target .gantt-bar-base {
  stroke: var(--accent-warm, #C4A57B);
  stroke-width: 2.4;
  filter: drop-shadow(0 0 4px rgba(196, 165, 123, 0.6));
}

/* Rubber-band preview path during drag */
.gantt-dep-preview-path {
  fill: none;
  stroke: var(--accent-warm, #C4A57B);
  stroke-width: 1.6;
  stroke-dasharray: 5 4;
  opacity: 0.9;
  pointer-events: none;
}

/* Critical-path arrows — warm red/amber, matches critical bars */
.gantt-dep.gantt-dep-arrow--critical .gantt-dep-arrow,
.gantt-dep-arrow--critical.gantt-dep-arrow { stroke: #D97B4F; opacity: 1; }
.gantt-dep.gantt-dep-arrow--critical .gantt-dep-head,
.gantt-dep-arrow--critical.gantt-dep-head { fill: #D97B4F; opacity: 1; }

/* Inline lag/lead badge on the arrow (only shown when lag != 0) */
.gantt-dep-lag-badge { pointer-events: none; }
.gantt-dep-lag-bg {
  fill: var(--surface, #fff);
  stroke: var(--accent-warm, #C4A57B);
  stroke-width: 1;
  opacity: 0.95;
}
.gantt-dep-lag-text {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9.5px;
  font-weight: 700;
  fill: var(--accent-warm, #C4A57B);
  letter-spacing: 0.02em;
}

/* ── Dependency editor popover ─────────────────────────────── */
.gantt-dep-popover {
  position: fixed;
  z-index: 9000;
  width: 340px;
  max-width: calc(100vw - 16px);
  background: var(--surface);
  border: 1px solid var(--hairline-strong, var(--border-light));
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);
  font-family: var(--font-body);
  animation: ganttPopIn 160ms ease-out;
}
@keyframes ganttPopIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.gantt-dep-pop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--hairline, var(--border-light));
}
.gantt-dep-pop-title {
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-nav);
  letter-spacing: 0.02em;
  color: var(--text);
}
.gantt-dep-pop-close {
  appearance: none;
  background: transparent;
  border: 0;
  font-size: 18px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  line-height: 1;
  transition: background 120ms ease;
}
.gantt-dep-pop-close:hover { background: var(--bg-alt, rgba(196, 165, 123, 0.08)); }

.gantt-dep-pop-section {
  padding: 12px 16px;
}
.gantt-dep-pop-section + .gantt-dep-pop-section {
  border-top: 1px solid var(--hairline, var(--border-light));
}
.gantt-dep-pop-label {
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-tertiary);
  margin-bottom: 8px;
}
.gantt-dep-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.gantt-dep-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 10px;
  background: var(--bg-alt, rgba(196, 165, 123, 0.08));
  border: 1px solid var(--border-light);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.gantt-dep-chip:hover {
  background: rgba(196, 165, 123, 0.14);
  border-color: var(--accent-warm, #C4A57B);
}
.gantt-dep-chip-x {
  appearance: none;
  background: transparent;
  border: 0;
  font-size: 14px;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.gantt-dep-chip-x:hover { color: var(--danger, #b14040); }

/* Chip subparts when the dependency carries a lag value */
.gantt-dep-chip-label {
  cursor: pointer;
}
.gantt-dep-chip-lag {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--surface, #fff);
  border: 1px solid var(--border-light);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-secondary);
}
.gantt-dep-chip-lag-input {
  appearance: none;
  background: transparent;
  border: 0;
  width: 32px;
  text-align: right;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  padding: 0;
  margin: 0;
  outline: none;
}
.gantt-dep-chip-lag-input:focus { color: var(--accent-warm, #C4A57B); }
.gantt-dep-chip-lag-input::-webkit-outer-spin-button,
.gantt-dep-chip-lag-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.gantt-dep-chip-lag-input { -moz-appearance: textfield; }
.gantt-dep-chip-lag-unit {
  font-size: 10px;
  color: var(--text-tertiary);
  font-weight: 500;
}

.gantt-dep-none {
  font-size: 12px;
  color: var(--text-tertiary);
  font-style: italic;
}
.gantt-dep-add-row {
  margin-top: 8px;
}
.gantt-dep-add-select {
  width: 100%;
  appearance: none;
  background: var(--bg-alt, rgba(196, 165, 123, 0.04));
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 7px 10px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  transition: border-color 120ms ease;
}
.gantt-dep-add-select:hover,
.gantt-dep-add-select:focus {
  border-color: var(--accent-warm, #C4A57B);
  outline: none;
}
.gantt-dep-drives {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gantt-dep-drives-item {
  font-size: 12px;
  color: var(--text-secondary);
}

/* Gantt empty-state (no phases at all) */
.gantt-empty {
  padding: 32px 24px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 13px;
  background: var(--bg-alt, rgba(196, 165, 123, 0.04));
  border: 1px dashed var(--border-light);
  border-radius: 10px;
}

.gantt-footer { margin-top: 12px; text-align: center; }
.gantt-hint {
  font-size: 11px;
  color: var(--text-tertiary);
  font-family: var(--font-body);
  letter-spacing: 0.01em;
}

/* ═══════════════════════════════════════════════════════════════
   BUDGET DRAWS / SCHEDULE OF VALUES — Phase 1
   ═══════════════════════════════════════════════════════════════ */

/* Chevron on each budget row (inside .budget-cell-code, before code). */
.budget-row-chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-right: 4px;
  border: 0;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 11px;
  line-height: 1;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 120ms ease, color 120ms ease, background 120ms ease;
  vertical-align: middle;
}
.budget-row-chev:hover { color: var(--text); background: rgba(196, 165, 123, 0.10); }
.budget-row-chev.is-open { transform: rotate(90deg); color: var(--accent-warm, #C4A57B); }

/* Subtitle under the cost code when collapsed — "2 draws · $356.97 billed" */
.budget-row-draws-summary {
  display: block;
  margin-top: 2px;
  margin-left: 22px;          /* aligns under code, past the chevron */
  font-size: 10.5px;
  color: var(--text-tertiary);
  letter-spacing: 0.01em;
}

/* When a row's draws are expanded, give it a subtle anchor to its panel. */
.budget-row.is-draws-expanded {
  border-bottom: 0;
}

/* Variance pill — sits inline at the end of the Remaining cell. */
.line-variance-pill {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  border-radius: 999px;
  white-space: nowrap;
  vertical-align: middle;
  font-family: var(--font-body, 'Inter', sans-serif);
}
.line-variance-pill.is-under {
  background: rgba(74, 107, 63, 0.12);
  color: #6B8B5C;
  border: 1px solid rgba(74, 107, 63, 0.22);
}
.line-variance-pill.is-over {
  background: rgba(196, 165, 123, 0.16);
  color: #B8915A;
  border: 1px solid rgba(196, 165, 123, 0.28);
}
.line-variance-pill.is-way-over {
  background: rgba(176, 57, 43, 0.13);
  color: #C8553D;
  border: 1px solid rgba(176, 57, 43, 0.25);
}

/* ── Draws panel — expanded under a budget line ───────────────── */
.line-draws-panel {
  display: block;
  background: rgba(196, 165, 123, 0.04);
  border-bottom: 1px solid var(--hairline, var(--border-light));
  border-left: 2px solid var(--accent-warm, #C4A57B);
  margin: 0;
}
.line-draws-panel-inner {
  padding: 12px 18px 14px 22px;
  display: block;
}

.line-draws-head {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--hairline, var(--border-light));
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.line-draws-title {
  font-weight: 600;
  letter-spacing: 0.06em;
}
.line-draws-spacer { flex: 1; }
.line-draws-meta strong {
  font-weight: 600;
  color: var(--text);
  font-family: var(--font-body, 'Inter', sans-serif);
  letter-spacing: 0;
  text-transform: none;
  margin-left: 4px;
}

/* Empty state inside the draws panel. */
.line-draws-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  color: var(--text-tertiary);
  font-size: 13px;
}

/* A single draw row inside the panel. */
.draw-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(196, 165, 123, 0.08);
  position: relative;
}
.draw-row:last-of-type { border-bottom: 0; }

.draw-row-marker {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-warm, #C4A57B);
  opacity: 0.55;
  flex-shrink: 0;
}

.draw-row-input {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 5px 8px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 13px;
  color: var(--text);
  transition: border-color 120ms ease, background 120ms ease;
}
.draw-row-input:hover {
  border-color: var(--hairline, var(--border-light));
  background: var(--surface);
}
.draw-row-input:focus {
  outline: none;
  border-color: var(--accent-warm, #C4A57B);
  background: var(--surface);
  box-shadow: 0 0 0 2px rgba(196, 165, 123, 0.18);
}

.draw-row-description {
  flex: 1 1 auto;
  min-width: 0;
}
.draw-row-amount {
  flex: 0 0 110px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12.5px;
}
.draw-row-spacer { flex: 1; }

.draw-row-invoice-link {
  font-size: 11px;
  color: var(--accent-warm, #C4A57B);
  text-decoration: none;
  border-bottom: 1px dotted rgba(196, 165, 123, 0.5);
  padding-bottom: 1px;
}
.draw-row-invoice-link:hover { color: var(--text); border-bottom-color: var(--text); }

.draw-source-tag {
  display: inline-block;
  padding: 1px 6px;
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline, var(--border-light));
  border-radius: 999px;
}
.draw-source-tag.is-invoice {
  color: var(--accent-warm, #C4A57B);
  border-color: rgba(196, 165, 123, 0.3);
  background: rgba(196, 165, 123, 0.08);
}

.draw-row-delete {
  width: 22px;
  height: 22px;
  border: 0;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 14px;
  line-height: 1;
  border-radius: 5px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms, color 120ms, background 120ms;
}
.draw-row:hover .draw-row-delete { opacity: 0.7; }
.draw-row-delete:hover { color: #C8553D; background: rgba(200, 85, 61, 0.08); opacity: 1; }

.draw-row--add { background: transparent; }
.draw-row-add-cta {
  display: flex;
  justify-content: flex-start;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed rgba(196, 165, 123, 0.18);
}

.line-draws-add-btn { font-size: 12px; padding: 4px 10px; }

/* Tiny button variant used in the inline draw add row. */
.btn.btn-tiny {
  font-size: 11.5px;
  padding: 4px 10px;
  height: auto;
  min-height: 0;
  line-height: 1.2;
}

/* Backfill mode toggle — pill-style on/off. */
.budget-backfill-toggle {
  border: 1px solid var(--hairline, var(--border-light));
  background: transparent;
  color: var(--text-secondary);
}
.budget-backfill-toggle:hover {
  border-color: var(--accent-warm, #C4A57B);
  color: var(--text);
}
.budget-backfill-toggle.is-on {
  background: rgba(196, 165, 123, 0.16);
  color: #B8915A;
  border-color: rgba(196, 165, 123, 0.4);
  font-weight: 600;
}

/* Mobile / narrow widths — stack draw row content. */
@media (max-width: 720px) {
  .draw-row {
    flex-wrap: wrap;
    gap: 6px;
  }
  .draw-row-description { flex: 1 1 100%; }
  .draw-row-amount { flex: 1 1 auto; }
}

/* ═══════════════════════════════════════════════════════════════
   BUDGET DRAWS — Phase 2: project rollup strip, CO nudge, client view
   ═══════════════════════════════════════════════════════════════ */

/* ── Project-level rollup strip (admin only) ───────────────── */
.budget-rollup-strip {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 12px 0 0;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--hairline, var(--border-light));
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.budget-rollup-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4px 24px 4px 0;
  border-right: 1px solid var(--hairline, var(--border-light));
  flex: 0 0 auto;
}
.budget-rollup-cell:last-of-type { border-right: 0; }
.budget-rollup-strip .budget-rollup-cell + .budget-rollup-cell { padding-left: 24px; }
.budget-rollup-cell--variance { flex: 1 1 auto; padding-right: 16px; }
.budget-rollup-cell--variance[data-budget-rollup-toggle-filter] {
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
  border-radius: 8px;
  padding: 4px 12px 4px 24px;
  border-right: 0;
}
.budget-rollup-cell--variance[data-budget-rollup-toggle-filter]:hover {
  background: rgba(196, 165, 123, 0.06);
}
.budget-rollup-cell--variance.is-active-filter {
  background: rgba(196, 165, 123, 0.10);
  outline: 1px solid rgba(196, 165, 123, 0.35);
}
.budget-rollup-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}
.budget-rollup-value {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.budget-rollup-cell--variance.is-under .budget-rollup-value { color: #6B8B5C; }
.budget-rollup-cell--variance.is-on .budget-rollup-value { color: var(--text-secondary); }
.budget-rollup-cell--variance.is-over .budget-rollup-value { color: #B8915A; }
.budget-rollup-cell--variance.is-way-over .budget-rollup-value { color: #C8553D; }

.budget-rollup-count {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 999px;
  background: rgba(196, 165, 123, 0.14);
  color: #B8915A;
  vertical-align: middle;
  border: 1px solid rgba(196, 165, 123, 0.28);
}
.budget-rollup-cell--variance.is-way-over .budget-rollup-count {
  background: rgba(176, 57, 43, 0.13);
  color: #C8553D;
  border-color: rgba(176, 57, 43, 0.25);
}

.budget-rollup-clear-filter {
  align-self: center;
  margin-left: auto;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--hairline, var(--border-light));
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: border-color 120ms, color 120ms;
}
.budget-rollup-clear-filter:hover { border-color: var(--text); color: var(--text); }

@media (max-width: 720px) {
  .budget-rollup-strip { flex-wrap: wrap; gap: 8px; padding: 12px; }
  .budget-rollup-cell { flex: 1 1 33%; padding: 4px; border-right: 0; }
  .budget-rollup-strip .budget-rollup-cell + .budget-rollup-cell { padding-left: 4px; }
  .budget-rollup-clear-filter { margin: 0; flex: 1 1 100%; }
}

/* ── Change-order nudge inside the draws panel ───────────────── */
.co-nudge {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  margin: 0 0 12px;
  background: rgba(176, 57, 43, 0.06);
  border: 1px solid rgba(176, 57, 43, 0.18);
  border-radius: 8px;
}
.co-nudge-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #C8553D;
}
.co-nudge-text {
  flex: 1 1 auto;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text);
}
.co-nudge-text strong { font-weight: 600; }
.co-nudge-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  align-items: center;
}

/* ── Client portal billing-history view ───────────────────── */
.client-draws-chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 0;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 11px;
  line-height: 1;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 6px;
  vertical-align: middle;
  transition: transform 120ms ease, color 120ms;
}
.client-draws-chev:hover { color: var(--text); }
.client-draws-chev.is-open { transform: rotate(90deg); color: var(--accent-warm, #C4A57B); }

.client-draws-summary {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  color: var(--text-tertiary);
}

.budget-row-sub.has-draws { cursor: pointer; }
.budget-row-sub.has-draws:hover td:first-child { background: rgba(196, 165, 123, 0.04); }

.client-draws-expanded-row td {
  padding: 0 !important;
  background: rgba(196, 165, 123, 0.03);
  border-top: 0;
}
.client-draws-panel {
  padding: 12px 18px 14px 36px;
  border-left: 2px solid var(--accent-warm, #C4A57B);
  margin: 0;
}
.client-draws-head {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--hairline, var(--border-light));
}

.client-draw-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(196, 165, 123, 0.06);
}
.client-draw-row:last-of-type { border-bottom: 0; }

.client-draw-marker {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-warm, #C4A57B);
  opacity: 0.55;
  flex-shrink: 0;
}
.client-draw-meta {
  flex: 1 1 auto;
  min-width: 0;
}
.client-draw-desc {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
}
.client-draw-sub {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 0.005em;
}
.client-draw-amount {
  flex-shrink: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono, ui-monospace, monospace);
}

/* ═══════════════════════════════════════════════════════════════
   BUDGET DRAWS — Phase 3: reallocate (move budget between lines)
   ═══════════════════════════════════════════════════════════════ */

/* "Move budget" button inside the line draws panel header. Quiet, not
   the primary action — sits to the right of the totals. */
.line-draws-move-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--hairline, var(--border-light));
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.005em;
  text-transform: none;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
  margin-left: 12px;
}
.line-draws-move-btn:hover {
  border-color: var(--accent-warm, #C4A57B);
  color: var(--text);
  background: rgba(196, 165, 123, 0.06);
}

/* Reallocation rows — distinct from draws, sit ABOVE them in the panel */
.line-reallocs {
  margin-bottom: 6px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(196, 165, 123, 0.14);
}
.realloc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}
.realloc-row + .realloc-row {
  border-top: 1px solid rgba(196, 165, 123, 0.06);
}
.realloc-row-marker {
  width: 6px;
  height: 6px;
  border-radius: 1px;       /* square instead of circle so it visually reads "different from draws" */
  background: rgba(120, 130, 150, 0.6);
  flex-shrink: 0;
}
.realloc-row.is-in  .realloc-row-marker { background: #6B8B5C; }
.realloc-row.is-out .realloc-row-marker { background: #B8915A; }

.realloc-row-meta {
  flex: 1 1 auto;
  min-width: 0;
}
.realloc-row-line {
  font-size: 12.5px;
  color: var(--text);
  letter-spacing: 0.005em;
}
.realloc-row-direction {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  margin-right: 6px;
}
.realloc-row-sub {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-tertiary);
}
.realloc-row-amount {
  flex-shrink: 0;
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono, ui-monospace, monospace);
}
.realloc-row.is-in  .realloc-row-amount { color: #6B8B5C; }
.realloc-row.is-out .realloc-row-amount { color: #B8915A; }

/* ── Move Budget modal (custom bpm-dialog) ───────────────────── */
.bpm-dialog.bpm-dialog--custom {
  width: min(500px, calc(100vw - 32px));
  padding: 28px 28px 24px;
}

.bpm-dialog-body {
  margin-top: 12px;
}

.bpm-dialog-error {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(176, 57, 43, 0.08);
  border: 1px solid rgba(176, 57, 43, 0.25);
  color: #C8553D;
  border-radius: 6px;
  font-size: 12.5px;
  line-height: 1.4;
}

.move-budget-source {
  background: rgba(196, 165, 123, 0.06);
  border: 1px solid rgba(196, 165, 123, 0.18);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.move-budget-source-label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}
.move-budget-source-line {
  font-size: 14.5px;
  color: var(--text);
  margin-bottom: 4px;
  font-weight: 500;
}
.move-budget-source-line strong { font-weight: 600; }
.move-budget-source-meta {
  font-size: 12px;
  color: var(--text-secondary);
}
.move-budget-source-meta strong {
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.move-budget-field {
  margin-bottom: 14px;
}
.move-budget-field-label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.move-budget-field-optional {
  font-weight: 400;
  color: var(--text-tertiary);
  letter-spacing: 0;
  text-transform: none;
}
.move-budget-input {
  width: 100%;
  padding: 9px 12px;
  background: var(--surface);
  border: 1px solid var(--hairline, var(--border-light));
  border-radius: 6px;
  color: var(--text);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 13.5px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.move-budget-input:hover { border-color: var(--hairline-strong, var(--border-light)); }
.move-budget-input:focus {
  outline: none;
  border-color: var(--accent-warm, #C4A57B);
  box-shadow: 0 0 0 3px rgba(196, 165, 123, 0.16);
}
.move-budget-input--money {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono, ui-monospace, monospace);
}
.move-budget-field-hint {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-tertiary);
}

/* ═══════════════════════════════════════════════════════════════
   BUDGET DRAWS — Phase 4: invoice composer per-line draw entry
   ═══════════════════════════════════════════════════════════════ */

/* Replaces the old single-row .invoice-line-pick. Each line is now a
   small card that expands a 'this period' form when selected. */
.invoice-pick-row {
  display: block;
  border: 1px solid var(--hairline, var(--border-light));
  border-radius: 8px;
  margin-bottom: 8px;
  background: var(--surface);
  transition: border-color 120ms ease, background 120ms ease;
  overflow: hidden;
}
.invoice-pick-row:hover { border-color: var(--hairline-strong, var(--border-light)); }
.invoice-pick-row.is-selected {
  border-color: rgba(196, 165, 123, 0.5);
  background: rgba(196, 165, 123, 0.03);
}
.invoice-pick-row.is-fully-billed {
  opacity: 0.5;
}
.invoice-pick-row.is-fully-billed .invoice-pick-row-head {
  cursor: not-allowed;
}

.invoice-pick-row-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
}
.invoice-pick-row-head input[type="checkbox"] {
  flex-shrink: 0;
  margin: 0;
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--accent-warm, #C4A57B);
}
.invoice-pick-row-meta {
  flex: 1 1 auto;
  min-width: 0;
}
.invoice-pick-row-name {
  font-size: 13.5px;
  color: var(--text);
  font-weight: 500;
  letter-spacing: 0.005em;
}
.invoice-pick-row-subname {
  color: var(--text-secondary);
  font-weight: 400;
}
.invoice-pick-row-meta-line {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--text-tertiary);
}
.invoice-pick-row-meta-line strong {
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono, ui-monospace, monospace);
  margin-left: 4px;
}
.invoice-pick-row-remaining {
  color: #6B8B5C;
  font-weight: 500;
}
.invoice-pick-row-remaining.is-zero {
  color: var(--text-tertiary);
  font-style: italic;
}

/* Expanded form below the head when row is selected. */
.invoice-pick-row-form {
  display: grid;
  grid-template-columns: 1fr 130px;
  gap: 10px;
  padding: 10px 14px 14px 42px;
  border-top: 1px solid var(--hairline, var(--border-light));
  background: rgba(196, 165, 123, 0.05);
  align-items: end;
}
.invoice-pick-form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.invoice-pick-form-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}
.invoice-pick-form-input {
  padding: 7px 10px;
  background: var(--surface);
  border: 1px solid var(--hairline, var(--border-light));
  border-radius: 6px;
  color: var(--text);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 13px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.invoice-pick-form-input:focus {
  outline: none;
  border-color: var(--accent-warm, #C4A57B);
  box-shadow: 0 0 0 3px rgba(196, 165, 123, 0.16);
}
.invoice-pick-form-input--money {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono, ui-monospace, monospace);
}

.invoice-pick-form-quick {
  grid-column: 1 / -1;
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.invoice-pick-quick-btn {
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--hairline, var(--border-light));
  border-radius: 4px;
  color: var(--text-secondary);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.invoice-pick-quick-btn:hover {
  border-color: var(--accent-warm, #C4A57B);
  color: var(--text);
  background: rgba(196, 165, 123, 0.06);
}

@media (max-width: 720px) {
  .invoice-pick-row-form {
    grid-template-columns: 1fr;
    padding-left: 14px;
  }
}

/* Phase 4 follow-up: when a line's Actual is derived from draws, show
   it as read-only text styled to match the input's metrics so the
   column doesn't shift between editable and derived rows. */
.budget-actual-derived {
  display: inline-block;
  width: 100%;
  padding: 7px 10px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--text);
  text-align: right;
  border: 1px dashed transparent;
  border-radius: 5px;
  cursor: help;
}
.budget-actual-derived:hover {
  border-color: rgba(196, 165, 123, 0.18);
  background: rgba(196, 165, 123, 0.04);
}

/* ═══════════════════════════════════════════════════════════════
   DOCUMENTS — card grid (replaces cramped row list)
   ═══════════════════════════════════════════════════════════════ */

.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
  padding: 18px;
}

.doc-card {
  display: flex;
  flex-direction: column;
  background: var(--surface, #232320);
  border: 1px solid var(--hairline, var(--border-light));
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
  cursor: pointer;
}
.doc-card:hover {
  border-color: rgba(196, 165, 123, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
.doc-card:focus-visible {
  outline: 2px solid var(--accent-warm, #C4A57B);
  outline-offset: 2px;
}

/* Thumbnail area — image preview or styled type tile. */
.doc-card-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background-color: rgba(196, 165, 123, 0.05);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--hairline, var(--border-light));
}

/* Type tile (PDF / DOC / XLS / FILE) — premium centered tag on a tinted bg */
.doc-card-thumb--type {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    140deg,
    rgba(196, 165, 123, 0.10) 0%,
    rgba(196, 165, 123, 0.04) 100%
  );
}
.doc-card-thumb-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: 10px 16px;
  font-family: var(--font-nav, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  background: var(--surface, #232320);
  border: 1px solid var(--hairline-strong, var(--border-light));
  border-radius: 6px;
}
.doc-card-thumb--pdf .doc-card-thumb-tag {
  color: #C8553D;
  border-color: rgba(200, 85, 61, 0.32);
  background: rgba(200, 85, 61, 0.08);
}
.doc-card-thumb--doc .doc-card-thumb-tag,
.doc-card-thumb--spreadsheet .doc-card-thumb-tag {
  color: #B8915A;
  border-color: rgba(184, 145, 90, 0.32);
  background: rgba(184, 145, 90, 0.08);
}

/* PDF first-page preview — PDF.js renders into the canvas. While the
   PDF is downloading + rendering, an overlay PDF tag shows so the card
   doesn't sit empty. Once the canvas paints, the wrapper gains
   .is-rendered and the overlay fades out. On render failure, .is-failed
   keeps the overlay visible (graceful fallback to the type tile look). */
.doc-card-thumb--pdf-preview {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    140deg,
    rgba(196, 165, 123, 0.10) 0%,
    rgba(196, 165, 123, 0.04) 100%
  );
  overflow: hidden;
}
.doc-card-thumb-canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  background: #fff;
  opacity: 0;
  transition: opacity 220ms ease;
}
.doc-card-thumb--pdf-preview.is-rendered .doc-card-thumb-canvas {
  opacity: 1;
}
.doc-card-thumb-tag--overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #C8553D;
  border-color: rgba(200, 85, 61, 0.32);
  background: rgba(200, 85, 61, 0.08);
  pointer-events: none;
  transition: opacity 180ms ease;
}
.doc-card-thumb--pdf-preview.is-rendered .doc-card-thumb-tag--overlay {
  opacity: 0;
}
/* Failed render: keep the overlay visible — acts like the old type tile. */
.doc-card-thumb--pdf-preview.is-failed .doc-card-thumb-canvas {
  display: none;
}

/* Body — filename + meta */
.doc-card-body {
  padding: 14px 14px 8px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.doc-card-name {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.005em;
  line-height: 1.35;
  /* Two-line clamp so longer filenames don't blow the card height. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  margin-bottom: 4px;
}
.doc-card-meta {
  margin-top: auto;
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
}

/* Actions row */
.doc-card-actions {
  display: flex;
  gap: 6px;
  padding: 10px 14px 14px;
  border-top: 1px solid rgba(196, 165, 123, 0.08);
  background: rgba(196, 165, 123, 0.02);
}

.doc-card-btn {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
  text-align: center;
  white-space: nowrap;
}
.doc-card-btn--primary {
  background: var(--accent-warm, #C4A57B);
  color: #1A1A17;
  border-color: var(--accent-warm, #C4A57B);
}
.doc-card-btn--primary:hover {
  background: #B8915A;
  border-color: #B8915A;
}
.doc-card-btn--secondary {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--hairline, var(--border-light));
}
.doc-card-btn--secondary:hover {
  color: var(--text);
  border-color: var(--text);
}
.doc-card-btn--danger {
  flex: 0 0 auto;
  background: transparent;
  color: var(--text-tertiary);
  border-color: var(--hairline, var(--border-light));
  font-size: 11px;
  padding: 8px 10px;
}
.doc-card-btn--danger:hover {
  color: #C8553D;
  border-color: rgba(200, 85, 61, 0.4);
  background: rgba(200, 85, 61, 0.06);
}

/* Mobile / narrow */
@media (max-width: 540px) {
  .doc-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px;
  }
  .doc-card-thumb { aspect-ratio: 16 / 9; }
}

/* ═══════════════════════════════════════════════════════════════
   CLIENT JOURNAL — magazine-style activity feed (Updates page)
   ═══════════════════════════════════════════════════════════════ */

.jrn-masthead {
  padding: 32px 0 28px;
  margin-bottom: 8px;
}
.jrn-masthead-eyebrow {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-warm, #C4A57B);
  margin-bottom: 14px;
}
.jrn-masthead-title {
  margin: 0 0 14px;
  font-family: var(--font-heading, 'Inter', serif);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--text);
  text-transform: none;
}
.jrn-masthead-rule {
  height: 1px;
  background: var(--accent-warm, #C4A57B);
  width: 80px;
  margin: 0 0 14px;
}
.jrn-masthead-meta {
  font-size: 13px;
  color: var(--text-tertiary);
  letter-spacing: 0.005em;
  font-style: italic;
}

/* ── Filter chips ─────────────────────────────────────────── */
.jrn-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 0 28px;
  border-top: 1px solid var(--hairline, var(--border-light));
  border-bottom: 1px solid var(--hairline, var(--border-light));
  margin-bottom: 32px;
}
.jrn-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: transparent;
  border: 1px solid var(--hairline, var(--border-light));
  border-radius: 999px;
  color: var(--text-secondary);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.jrn-filter-chip:hover:not(.is-disabled) {
  border-color: var(--text);
  color: var(--text);
}
.jrn-filter-chip.is-active {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg, #1A1A17);
}
.jrn-filter-chip.is-active .jrn-filter-count {
  color: rgba(26, 26, 23, 0.55);
}
.jrn-filter-chip.is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.jrn-filter-count {
  font-size: 10.5px;
  color: var(--text-tertiary);
  font-weight: 500;
}

/* ── Date group ───────────────────────────────────────────── */
.jrn-group {
  margin: 0 0 56px;
}
.jrn-group-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 24px;
}
.jrn-group-title {
  margin: 0;
  font-family: var(--font-heading, 'Inter', serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  text-transform: none;
}
.jrn-group-count {
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.jrn-entries {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ── Entry frame ──────────────────────────────────────────── */
.jrn-entry {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--hairline, var(--border-light));
}
.jrn-entry:last-child { border-bottom: 0; padding-bottom: 0; }

.jrn-entry-date {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 4px;
  font-family: var(--font-body, 'Inter', sans-serif);
  letter-spacing: 0.005em;
}
.jrn-entry-date-num {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.jrn-entry-date-time {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.jrn-entry-content { min-width: 0; }

.jrn-entry-title {
  margin: 0 0 8px;
  font-family: var(--font-heading, 'Inter', sans-serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
  line-height: 1.35;
  text-transform: none;
}
.jrn-entry-title--display {
  font-size: 24px;
  letter-spacing: -0.015em;
  line-height: 1.2;
  text-transform: none;
}
.jrn-entry-body {
  margin: 0 0 12px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Message entry ────────────────────────────────────────── */
.jrn-entry-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.jrn-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(196, 165, 123, 0.18);
  color: var(--accent-warm, #C4A57B);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.jrn-byline {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.005em;
}
.jrn-tag {
  margin-left: 4px;
  display: inline-block;
  padding: 1px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  border: 1px solid var(--hairline, var(--border-light));
  border-radius: 999px;
}

/* ── Photo gallery (1, 2, 3, many) ────────────────────────── */
.jrn-photos {
  display: grid;
  gap: 6px;
  margin: 14px 0 4px;
  border-radius: 6px;
  overflow: hidden;
}
.jrn-photo {
  display: block;
  width: 100%;
  background-color: rgba(196, 165, 123, 0.05);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 0;
  cursor: pointer;
  border-radius: 4px;
  transition: transform 240ms cubic-bezier(.2,.7,.2,1);
}
.jrn-photo:hover { transform: scale(1.005); }

.jrn-photos-1 { grid-template-columns: 1fr; }
.jrn-photos-1 .jrn-photo { aspect-ratio: 16 / 10; }

.jrn-photos-2 { grid-template-columns: 1fr 1fr; }
.jrn-photos-2 .jrn-photo { aspect-ratio: 1 / 1; }

.jrn-photos-3 {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  height: 360px;
}
.jrn-photos-3 .jrn-photo:first-child { grid-row: 1 / span 2; }

.jrn-photos-many {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.jrn-photos-many .jrn-photo { aspect-ratio: 1 / 1; }

.jrn-files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 4px;
}
.jrn-file {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: rgba(196, 165, 123, 0.06);
  border: 1px solid var(--hairline, var(--border-light));
  border-radius: 4px;
  color: var(--text-secondary);
  font-size: 12px;
  text-decoration: none;
}
.jrn-file:hover { color: var(--text); border-color: var(--text); }

/* ── Milestone / Money / Decision / Document tags ──────────── */
.jrn-milestone-tag,
.jrn-money-tag,
.jrn-decision-tag,
.jrn-document-tag {
  display: inline-block;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  margin-bottom: 10px;
}

.jrn-milestone-tag { color: var(--accent-warm, #C4A57B); border: 1px solid rgba(196, 165, 123, 0.4); }
.jrn-money-tag    { color: #6B8B5C; border: 1px solid rgba(107, 139, 92, 0.4); }
.jrn-decision-tag { color: #B8915A; border: 1px solid rgba(184, 145, 90, 0.4); }
.jrn-document-tag { color: var(--text-tertiary); border: 1px solid var(--hairline-strong, var(--border-light)); }

.jrn-money-amount {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0;
  margin: 8px 0 12px;
  font-variant-numeric: tabular-nums;
}

.jrn-decision-img {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(196, 165, 123, 0.05);
  border-radius: 6px;
  margin-top: 10px;
  cursor: pointer;
  transition: transform 240ms cubic-bezier(.2,.7,.2,1);
}
.jrn-decision-img:hover { transform: scale(1.005); }

.jrn-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 14px;
  background: transparent;
  border: 1px solid var(--text);
  border-radius: 4px;
  color: var(--text);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.jrn-cta:hover {
  background: var(--text);
  color: var(--bg, #1A1A17);
}

/* ── Empty state ──────────────────────────────────────────── */
.jrn-empty {
  text-align: center;
  padding: 80px 24px;
}
.jrn-empty-mark {
  width: 36px;
  height: 36px;
  margin: 0 auto 18px;
  border: 1px solid var(--accent-warm, #C4A57B);
  border-radius: 50%;
}
.jrn-empty-title {
  margin: 0 0 6px;
  font-family: var(--font-heading, 'Inter', sans-serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  text-transform: none;
  letter-spacing: -0.01em;
}
.jrn-empty-sub {
  margin: 0;
  font-size: 14px;
  color: var(--text-tertiary);
  font-style: italic;
}
.jrn-empty-link {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: var(--accent-warm, #C4A57B);
  font: inherit;
  cursor: pointer;
  border-bottom: 1px solid var(--accent-warm, #C4A57B);
}

/* ── Compose footer ──────────────────────────────────────── */
.jrn-compose {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--accent-warm, #C4A57B);
}
.jrn-compose-eyebrow {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-warm, #C4A57B);
  margin-bottom: 12px;
}
.jrn-compose-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.jrn-compose-input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--hairline, var(--border-light));
  border-radius: 8px;
  padding: 14px 16px;
  color: var(--text);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 14.5px;
  line-height: 1.5;
  resize: none;
  min-height: 60px;
  max-height: 220px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.jrn-compose-input:focus {
  outline: none;
  border-color: var(--accent-warm, #C4A57B);
  box-shadow: 0 0 0 3px rgba(196, 165, 123, 0.16);
}
.jrn-compose-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.jrn-compose-photo-btn {
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--hairline, var(--border-light));
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: border-color 120ms, color 120ms;
}
.jrn-compose-photo-btn:hover { border-color: var(--text); color: var(--text); }
.jrn-compose-send {
  margin-left: auto;
  padding: 9px 22px;
  background: var(--accent-warm, #C4A57B);
  border: 1px solid var(--accent-warm, #C4A57B);
  border-radius: 6px;
  color: #1A1A17;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 120ms;
}
.jrn-compose-send:hover { background: #B8915A; border-color: #B8915A; }
.jrn-compose-send:disabled { opacity: 0.6; cursor: not-allowed; }
.jrn-compose-attached {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.jrn-compose-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(196, 165, 123, 0.08);
  border: 1px solid rgba(196, 165, 123, 0.3);
  border-radius: 999px;
  font-size: 11.5px;
  color: var(--text-secondary);
}
.jrn-compose-chip button {
  border: 0;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.jrn-compose-chip button:hover { color: var(--text); }

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 720px) {
  .jrn-entry {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .jrn-entry-date {
    flex-direction: row;
    gap: 10px;
    align-items: baseline;
    padding-top: 0;
  }
  .jrn-photos-3 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    height: auto;
  }
  .jrn-photos-3 .jrn-photo:first-child { grid-row: auto; grid-column: 1 / span 2; aspect-ratio: 16/10; }
  .jrn-photos-3 .jrn-photo:not(:first-child) { aspect-ratio: 1/1; }
  .jrn-masthead { padding: 24px 0 20px; }
  .jrn-group { margin-bottom: 40px; }
}

/* ════════════════════════════════════════════════════════════════════
   ADMIN SIDEBAR NAV — warm dark design
   Fixed left sidebar with brand gold active pill, icon + label nav,
   warm dark background. Data-driven from ADMIN_NAV_CONFIG in app.js.
   Client portal is unaffected — all rules scoped to .ads-scope.admin-shell.
   ════════════════════════════════════════════════════════════════════ */

/* ── Local design tokens (dark sidebar surface) ─────────────────── */
.ads-scope .app-shell {
  --sb-bg:           #1A1714;
  --sb-border:       rgba(196, 165, 123, 0.10);
  --sb-text:         rgba(255, 255, 255, 0.60);
  --sb-text-strong:  rgba(255, 255, 255, 0.88);
  --sb-text-muted:   rgba(255, 255, 255, 0.28);
  --sb-active-bg:    var(--accent-warm);        /* #C4A57B */
  --sb-active-text:  #1A1411;
  --sb-hover-bg:     rgba(196, 165, 123, 0.09);
}

/* ── Shell layout: sidebar + body side by side ──────────────────── */
.ads-scope.admin-shell {
  display: flex;
  flex-direction: row;
  min-height: 100dvh;
}

/* ── Sidebar (overrides the sticky top-bar) ─────────────────────── */
.ads-scope .app-shell {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 224px;
  background: var(--sb-bg);
  border-bottom: none;
  border-right: 1px solid var(--sb-border);
  z-index: 100;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

/* ── Sidebar inner: vertical flex column ───────────────────────── */
.ads-scope .app-shell-inner {
  height: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: none;
  margin: 0;
  padding: 20px 0 16px;
}

/* ── Brand block ────────────────────────────────────────────────── */
.ads-scope .app-shell-brand {
  padding: 0 18px 18px;
  border-bottom: 1px solid var(--sb-border);
  margin-bottom: 10px;
}
.ads-scope .app-shell-tenant {
  font: 700 14px/1.1 var(--font-display);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--sb-text-strong);
}
.ads-scope .app-shell-sub {
  margin-top: 4px;
  font: 400 9px/1 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sb-text-muted);
}

/* ── Nav: vertical, full-width ─────────────────────────────────── */
.ads-scope .app-shell-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  padding: 0 8px;
}

/* ── Nav group container ────────────────────────────────────────── */
.app-shell-nav-group {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: 4px;
}

/* ── Nav group label: hidden ────────────────────────────────────── */
.app-shell-nav-group-label { display: none; }

/* ── Nav link: icon + label, filled pill on active ──────────────── */
.ads-scope .app-shell-nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border: none;
  outline: none;
  border-radius: 7px;
  background: transparent;
  color: var(--sb-text);
  font: 500 12.5px/1 var(--font-body);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.ads-scope .app-shell-nav-link:focus-visible {
  box-shadow: 0 0 0 2px rgba(196, 165, 123, 0.50);
}
.ads-scope .app-shell-nav-link svg {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  opacity: 0.60;
  transition: opacity 120ms ease;
}
.ads-scope .app-shell-nav-link:hover:not(.is-active) {
  background: var(--sb-hover-bg);
  color: var(--sb-text-strong);
}
.ads-scope .app-shell-nav-link:hover:not(.is-active) svg { opacity: 0.85; }

/* Active = slim gold pill */
.ads-scope .app-shell-nav-link.is-active {
  background: var(--sb-active-bg);
  color: var(--sb-active-text);
  font-weight: 600;
}
.ads-scope .app-shell-nav-link.is-active svg {
  opacity: 1;
  color: var(--sb-active-text);
}

/* ── Spacer: pushes foot to bottom ─────────────────────────────── */
.ads-scope .app-shell-spacer { flex: 1; }

/* ── Sidebar footer ─────────────────────────────────────────────── */
.app-shell-foot {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 8px 8px;
  border-top: 1px solid var(--sb-border);
  margin-top: 6px;
}
.ads-scope .app-shell-foot .app-shell-switcher-wrap { position: relative; }
.ads-scope .app-shell-foot .app-shell-account { position: relative; }

/* Popovers fly out to the right of the sidebar ─────────────────── */
.ads-scope .app-shell-foot .app-shell-popover {
  top: auto;
  bottom: 0;
  left: calc(100% + 8px);
  right: auto;
}

/* Account avatar: slim full-width row ──────────────────────────── */
.ads-scope .app-shell-foot .app-shell-avatar-btn {
  width: 100%;
  border-radius: 7px;
  outline: none;
}
.ads-scope .app-shell-foot .app-shell-avatar-btn:focus-visible {
  box-shadow: 0 0 0 2px rgba(196, 165, 123, 0.50);
}

/* ── Body: content + footer to the right of the sidebar ─────────── */
.admin-shell-body {
  margin-left: 224px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  min-width: 0;
}

/* ── Mobile hamburger (hidden on desktop) ───────────────────────── */
.app-shell-hamburger { display: none; }
.app-shell-overlay   { display: none; }

/* ── Mobile: sidebar becomes a slide-in drawer ───────────────────── */
@media (max-width: 768px) {
  .app-shell-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 200;
    width: 36px;
    height: 36px;
    padding: 7px;
    background: #1A1714;
    border: 1px solid rgba(196, 165, 123, 0.18);
    border-radius: 8px;
    cursor: pointer;
  }
  .app-shell-hamburger span {
    display: block;
    width: 18px;
    height: 1.5px;
    background: rgba(255, 255, 255, 0.65);
    border-radius: 2px;
  }

  .ads-scope .app-shell {
    transform: translateX(-100%);
    transition: transform 220ms ease;
    z-index: 160;
    box-shadow: none;
  }
  .ads-scope .app-shell.is-open {
    transform: translateX(0);
    box-shadow: 6px 0 32px rgba(0, 0, 0, 0.40);
  }

  .app-shell-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 150;
    background: rgba(0, 0, 0, 0.50);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
  }
  .app-shell-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
  }

  .admin-shell-body {
    margin-left: 0;
    padding-top: 56px;
  }

  .ads-scope .app-shell-foot .app-shell-popover {
    left: 0;
    right: auto;
    bottom: calc(100% + 6px);
    top: auto;
  }
}

/* ── Project switcher (inline dropdown in sidebar) ───────────────── */
.ads-scope .app-shell-switcher-wrap {
  position: relative;
  padding: 0 8px 6px;
}

/* Collapsed trigger: slim, borderless-ish */
.ads-scope .app-shell-project-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 6px 10px;
  background: rgba(196, 165, 123, 0.08);
  border: none;
  border-radius: 7px;
  color: var(--sb-text-strong);
  font: 500 12px/1.2 var(--font-body);
  text-align: left;
  cursor: pointer;
  outline: none;
  transition: background 120ms ease;
  overflow: hidden;
}
.ads-scope .app-shell-project-btn:hover {
  background: rgba(196, 165, 123, 0.15);
}
.ads-scope .app-shell-project-btn:focus-visible {
  box-shadow: 0 0 0 2px rgba(196, 165, 123, 0.45);
}

/* Caret: smaller, quieter */
.ads-scope .app-shell-caret {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  opacity: 0.40;
  margin-left: 4px;
  transition: transform 160ms ease;
}
.ads-scope .app-shell-project-btn[aria-expanded="true"] .app-shell-caret {
  transform: rotate(180deg);
}
#adminProjectSwitcherLabel {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Dropdown panel: one floating surface, no inner bordered boxes */
.ads-scope .app-shell-switcher-drop {
  margin-top: 3px;
  background: #211e1a;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.45), 0 1px 4px rgba(0,0,0,0.30);
  overflow: hidden;
}

/* Search: borderless, subtle inset */
.ads-scope .app-shell-swsearch-wrap {
  padding: 8px 8px 4px;
}
.ads-scope .app-shell-swsearch {
  width: 100%;
  padding: 6px 10px;
  background: rgba(255,255,255,0.05);
  border: none;
  border-radius: 6px;
  color: var(--sb-text-strong);
  font: 400 12px/1 var(--font-body);
  outline: none;
  transition: background 120ms ease, box-shadow 120ms ease;
}
.ads-scope .app-shell-swsearch::placeholder { color: var(--sb-text-muted); }
.ads-scope .app-shell-swsearch:focus {
  background: rgba(255,255,255,0.07);
  box-shadow: 0 0 0 1.5px rgba(196,165,123,0.40);
}

/* Project rows: flat, no borders */
.ads-scope .app-shell-swlist {
  max-height: 220px;
  overflow-y: auto;
  padding: 3px 0 6px;
}
.ads-scope .app-shell-swlist-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 7px 12px;
  font: 400 12px/1.2 var(--font-body);
  color: var(--sb-text);
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background 100ms ease, color 100ms ease;
  gap: 6px;
  outline: none;
}
.ads-scope .app-shell-swlist-item:hover {
  background: var(--sb-hover-bg);
  color: var(--sb-text-strong);
}
.ads-scope .app-shell-swlist-item.is-current {
  color: var(--sb-text-strong);
}
.ads-scope .app-shell-swlist-check {
  color: var(--accent-warm);
  flex-shrink: 0;
  font-size: 11px;
}
.ads-scope .app-shell-swlist-header {
  padding: 5px 12px 2px;
  font: 600 9px/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sb-text-muted);
}
.ads-scope .app-shell-swlist-sep {
  height: 1px;
  margin: 3px 8px;
  background: var(--sb-border);
}
.ads-scope .app-shell-swlist-empty {
  padding: 8px 12px;
  font: 400 12px/1 var(--font-body);
  color: var(--sb-text-muted);
}

/* "+ New Project" action pinned at bottom of switcher dropdown */
.ads-scope .app-shell-swlist-new {
  color: var(--sb-active-bg, #C4A57B) !important;
  font-weight: 600;
}
.ads-scope .app-shell-swlist-new:hover {
  background: rgba(196,165,123,0.12) !important;
}
.ads-scope .app-shell-swlist-new-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-size: 13px;
  line-height: 1;
  margin-right: 6px;
  flex-shrink: 0;
}

/* ── Hide old horizontal tab strip (nav is now the sidebar) ─────── */
.ads-scope.admin-shell .admin-detail-tabs,
.ads-scope.admin-shell #adminTabStrip { display: none !important; }

/* ── Details tab: People sections ───────────────────────────────── */
.details-people-list { display: flex; flex-direction: column; gap: 0; }
.details-people-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-light, #eee);
}
.details-people-row:last-child { border-bottom: none; }
.details-people-name { font: 500 14px/1 var(--font-body); color: var(--text-primary); }
.details-people-email { font: 400 12px/1 var(--font-body); color: var(--text-tertiary); }
.details-people-empty { padding: 8px 0; font: 400 13px/1 var(--font-body); color: var(--text-tertiary); }
.admin-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.admin-section-title {
  font: 600 14px/1 var(--font-body);
  color: var(--text-primary);
  margin: 0;
}

/* ════════════════════════════════════════════════════════════════════
   DAILY LOG — admin/builder only
   ════════════════════════════════════════════════════════════════════ */

.dl-page { padding: 0; }

/* Header */
.dl-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.dl-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.dl-title {
  font: 600 20px/1 var(--font-display);
  color: var(--text-primary);
  margin: 0;
}

/* Empty state */
.dl-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 24px;
  text-align: center;
  gap: 8px;
}
.dl-empty-icon { font-size: 32px; opacity: 0.4; }
.dl-empty-text { font: 600 15px/1 var(--font-body); color: var(--text-secondary); }
.dl-empty-sub  { font: 400 13px/1.4 var(--font-body); color: var(--text-tertiary); max-width: 320px; }

/* Log list */
.dl-list { display: flex; flex-direction: column; gap: 0; }
.dl-row {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 16px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-light, #eee);
  transition: background 100ms ease;
}
.dl-row:last-child { border-bottom: none; }
.dl-row:hover { background: var(--bg-hover, rgba(0,0,0,0.025)); }
.dl-row-date {
  font: 500 12px/1 var(--font-body);
  color: var(--text-tertiary);
  padding-top: 2px;
  white-space: nowrap;
}
.dl-row-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dl-row-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 400 12px/1 var(--font-body);
  color: var(--text-tertiary);
  flex-wrap: wrap;
}
.dl-row-notes {
  font: 400 13px/1.45 var(--font-body);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dl-row-actions {
  display: flex;
  gap: 6px;
  opacity: 0;
  transition: opacity 120ms ease;
}
.dl-row:hover .dl-row-actions { opacity: 1; }

/* Badges */
.dl-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 4px;
  font: 600 10px/1 var(--font-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.dl-badge-draft { background: rgba(0,0,0,0.06); color: var(--text-tertiary); }
.dl-badge-ai    { background: rgba(196,165,123,0.15); color: #8a6a3a; }

/* ── Composer — warm dark surface, cohesive with the sidebar ────── */

/* Dark tokens scoped to the composer */
.dl-composer {
  --dlc-bg:         #211e1a;           /* lifted from sidebar, slightly warmer */
  --dlc-bg-input:   rgba(255,255,255,0.05);
  --dlc-border:     rgba(196,165,123,0.13);
  --dlc-border-hover: rgba(196,165,123,0.30);
  --dlc-text:       rgba(255,255,255,0.85);
  --dlc-text-muted: rgba(255,255,255,0.42);
  --dlc-gold:       #C4A57B;
  background: var(--dlc-bg);
  border: 1px solid var(--dlc-border);
  box-shadow: 0 4px 24px rgba(0,0,0,0.28);
  border-radius: 12px;
  padding: 20px 22px 18px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dl-composer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}
.dl-composer-title {
  font: 600 14px/1 var(--font-body);
  color: var(--dlc-text);
}
/* Cancel button: quiet but visible on dark */
.dl-composer #dlComposerClose {
  color: var(--dlc-text-muted);
}
.dl-composer #dlComposerClose:hover {
  color: var(--dlc-text);
}

/* Labels: light-on-dark muted */
.dl-composer .dl-label {
  color: var(--dlc-text-muted);
}
.dl-composer .dl-label-hint {
  color: var(--dlc-text-muted);
  opacity: 0.8;
}
.dl-field { display: flex; flex-direction: column; }

/* Date input: dark inset, hairline border, gold focus */
.dl-date-input { max-width: 180px; }
.dl-composer .dl-date-input,
.dl-composer .admin-input {
  background: var(--dlc-bg-input);
  border-color: var(--dlc-border);
  color: var(--dlc-text);
  color-scheme: dark;
}
.dl-composer .dl-date-input:focus,
.dl-composer .admin-input:focus {
  border-color: var(--dlc-gold);
  box-shadow: 0 0 0 2px rgba(196,165,123,0.20);
  outline: none;
}

/* Draft bar: gold-tinted, clearly actionable */
.dl-draft-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(196,165,123,0.10);
  border: 1px solid rgba(196,165,123,0.22);
  border-radius: 8px;
}
/* "Draft from today's activity" — primary gold button */
.dl-composer #dlDraftActivityBtn {
  background: var(--dlc-gold);
  color: #1A1411;
  border: none;
  font-weight: 600;
}
.dl-composer #dlDraftActivityBtn:hover {
  background: #d4b58b;
}
.dl-draft-hint {
  font: 400 11px/1.3 var(--font-body);
  color: var(--dlc-text-muted);
}

/* Source activity breadcrumbs */
.dl-sources {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  background: rgba(196,165,123,0.07);
  border-radius: 8px;
  border-left: 2px solid rgba(196,165,123,0.40);
}
.dl-source-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font: 400 12px/1.4 var(--font-body);
  color: rgba(255,255,255,0.65);
}
.dl-source-type {
  font: 600 9px/1 var(--font-body);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--dlc-gold);
  flex-shrink: 0;
  min-width: 80px;
}

/* Notes textarea: dark inset matching the composer */
.dl-notes-area {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--dlc-border);
  border-radius: 8px;
  font: 400 14px/1.55 var(--font-body);
  color: var(--dlc-text);
  background: var(--dlc-bg-input);
  resize: vertical;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.dl-notes-area::placeholder { color: var(--dlc-text-muted); }
.dl-notes-area:focus {
  border-color: var(--dlc-gold);
  box-shadow: 0 0 0 2px rgba(196,165,123,0.18);
}

/* Personnel chips */
.dl-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.dl-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: rgba(196,165,123,0.16);
  border-radius: 6px;
  font: 500 12px/1 var(--font-body);
  color: rgba(255,255,255,0.80);
}
.dl-chip-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--dlc-text-muted);
  font-size: 14px;
  line-height: 1;
  padding: 0 1px;
  transition: color 100ms ease;
}
.dl-chip-remove:hover { color: var(--dlc-text); }
.dl-chip-add-wrap { flex: 1; min-width: 120px; }
.dl-chip-input {
  width: 100%;
  padding: 5px 8px;
  border: 1px dashed rgba(196,165,123,0.25);
  border-radius: 6px;
  font: 400 12px/1 var(--font-body);
  color: var(--dlc-text);
  background: var(--dlc-bg-input);
  outline: none;
}
.dl-chip-input::placeholder { color: var(--dlc-text-muted); }
.dl-chip-input:focus {
  border-color: var(--dlc-gold);
  box-shadow: 0 0 0 1.5px rgba(196,165,123,0.22);
}

/* Action items */
.dl-action-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--dlc-border);
}
.dl-action-item:last-child { border-bottom: none; }
.dl-action-check { flex-shrink: 0; accent-color: var(--dlc-gold); }
.dl-action-text { font: 400 13px/1 var(--font-body); color: rgba(255,255,255,0.75); }
.dl-action-text.is-done {
  text-decoration: line-through;
  color: var(--dlc-text-muted);
}
.dl-action-empty { font: 400 12px/1 var(--font-body); color: var(--dlc-text-muted); padding: 4px 0; }

/* Photos */
.dl-photo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
}
.dl-photo-thumb {
  position: relative;
  width: 100px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dl-photo-thumb img {
  width: 100px;
  height: 75px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--dlc-border);
}
.dl-photo-caption {
  width: 100%;
  box-sizing: border-box;
  padding: 3px 6px;
  border: 1px solid var(--dlc-border);
  border-radius: 5px;
  font: 400 10px/1 var(--font-body);
  color: rgba(255,255,255,0.65);
  background: var(--dlc-bg-input);
  outline: none;
}
.dl-photo-caption::placeholder { color: var(--dlc-text-muted); }
.dl-photo-caption:focus { border-color: var(--dlc-gold); }
.dl-photo-remove {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0,0,0,0.65);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 120ms ease;
}
.dl-photo-thumb:hover .dl-photo-remove { opacity: 1; }
.dl-photo-add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 75px;
  border: 1.5px dashed rgba(196,165,123,0.25);
  border-radius: 6px;
  cursor: pointer;
  font: 500 12px/1 var(--font-body);
  color: var(--dlc-text-muted);
  transition: border-color 120ms ease, color 120ms ease;
}
.dl-photo-add:hover { border-color: var(--dlc-gold); color: rgba(255,255,255,0.80); }
.dl-uploading { opacity: 0.6; animation: dl-pulse 1s infinite; }
@keyframes dl-pulse { 0%,100%{opacity:0.4} 50%{opacity:0.9} }

/* Composer footer */
.dl-composer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--dlc-border);
}
.dl-foot-right {
  display: flex;
  gap: 8px;
}

/* ═══════════════════════════════════════════════════
   WEEKLY UPDATE GENERATOR
   Dark-themed, matches .dl-composer palette
═══════════════════════════════════════════════════ */

/* Toolbar row injected above the message thread */
.wu-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0 14px;
  border-bottom: 1px solid rgba(196,165,123,0.12);
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.wu-toggle-btn {
  white-space: nowrap;
}

/* Week stepper */
.wu-week-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(196,165,123,0.12);
  border-radius: 6px;
  padding: 2px 6px;
}

.wu-step-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.55);
  font-size: 18px;
  line-height: 1;
  padding: 2px 6px;
  cursor: pointer;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.wu-step-btn:hover {
  color: #C4A57B;
  background: rgba(196,165,123,0.10);
}

.wu-week-label {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.70);
  white-space: nowrap;
  min-width: 90px;
  text-align: center;
}

/* Pre-generate hint panel */
.wu-panel {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(196,165,123,0.10);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 16px;
  color: rgba(255,255,255,0.50);
  font-size: 13px;
}

/* Composer */
.wu-composer {
  --wuc-bg: #211e1a;
  --wuc-bg-input: rgba(255,255,255,0.05);
  --wuc-border: rgba(196,165,123,0.14);
  --wuc-text: rgba(255,255,255,0.85);
  --wuc-text-muted: rgba(255,255,255,0.42);
  --wuc-gold: #C4A57B;
  background: var(--wuc-bg);
  border: 1px solid var(--wuc-border);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.28);
}

.wu-composer-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--wuc-border);
}

.wu-composer-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--wuc-text);
  flex: 1;
}

.wu-ai-badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--wuc-gold);
  background: rgba(196,165,123,0.12);
  border: 1px solid rgba(196,165,123,0.22);
  border-radius: 4px;
  padding: 2px 6px;
  text-transform: uppercase;
}

/* Sections list */
.wu-sections {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 16px;
}

.wu-section {}

.wu-section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wuc-gold);
  margin-bottom: 5px;
}

.wu-note-area {
  width: 100%;
  box-sizing: border-box;
  background: var(--wuc-bg-input);
  border: 1px solid var(--wuc-border);
  border-radius: 6px;
  color: var(--wuc-text);
  font-size: 13px;
  line-height: 1.55;
  padding: 9px 11px;
  resize: vertical;
  min-height: 72px;
  font-family: inherit;
  transition: border-color 0.15s;
}
.wu-note-area:focus {
  outline: none;
  border-color: var(--wuc-gold);
  box-shadow: 0 0 0 2px rgba(196,165,123,0.15);
}

/* Footer */
.wu-composer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--wuc-border);
}

.wu-foot-right {
  display: flex;
  gap: 8px;
}

/* ═══════════════════════════════════════════════════
   ACCOUNT SETTINGS PAGE (.acct-page)
   Dark-themed, matches daily-log / weekly-update palette
═══════════════════════════════════════════════════ */

.acct-page {
  --acp-bg-section: #211e1a;
  --acp-border: rgba(196,165,123,0.13);
  --acp-text: rgba(255,255,255,0.85);
  --acp-text-muted: rgba(255,255,255,0.42);
  --acp-gold: #C4A57B;
  width: 100%;
  max-width: 960px;
  padding: 0 0 40px;
}

/* Two-column body: profile left, security right */
.acct-body {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 300px;
  gap: 0 32px;
  align-items: start;
}

.acct-col-main { min-width: 0; }
.acct-col-side { min-width: 0; }

@media (max-width: 900px) {
  .acct-body {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

.acct-page-header {
  padding-bottom: 16px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--acp-border);
}

.acct-page-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--acp-text);
  margin: 0;
  letter-spacing: -0.01em;
}

/* Sections */
.acct-section {
  background: var(--acp-bg-section);
  border: 1px solid var(--acp-border);
  border-radius: 10px;
  padding: 20px 22px;
  margin-top: 16px;
}

.acct-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--acp-gold);
  margin-bottom: 14px;
}

.acct-section-hint {
  font-size: 13px;
  color: var(--acp-text-muted);
  margin: 0 0 12px;
  line-height: 1.5;
}

/* Avatar row */
.acct-avatar-row {
  display: flex;
  align-items: center;
  gap: 18px;
}

.acct-avatar-wrap {
  flex-shrink: 0;
}

.acct-avatar-img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--acp-border);
}

.acct-avatar-initials {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(196,165,123,0.18);
  border: 2px solid var(--acp-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: var(--acp-gold);
  letter-spacing: -0.01em;
}

.acct-avatar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.acct-photo-label {
  cursor: pointer;
}

.acct-photo-input {
  display: none;
}

/* Form fields */
.acct-field-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 14px;
}
.acct-field-row:last-of-type {
  margin-bottom: 0;
}

.acct-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--acp-text-muted);
  letter-spacing: 0.02em;
}

.acct-input.admin-input {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--acp-border);
  border-radius: 6px;
  color: var(--acp-text);
  font-size: 13px;
  padding: 9px 11px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.acct-input.admin-input:focus {
  outline: none;
  border-color: var(--acp-gold);
  box-shadow: 0 0 0 2px rgba(196,165,123,0.15);
}

.acct-save-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.acct-save-status {
  font-size: 12px;
  color: var(--acp-gold);
}

/* Danger section */
.acct-section--danger {
  border-color: rgba(220,60,60,0.20);
}
.acct-section--danger .acct-section-title {
  color: rgba(220,80,80,0.80);
}

/* Account chip button — replaces plain .btn-icon avatar */
.ads-scope .app-shell-avatar-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 5px 8px 5px 5px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: background 0.15s;
}
.ads-scope .app-shell-avatar-btn:hover {
  background: var(--sb-hover-bg, rgba(196,165,123,0.09));
}
.ads-scope .app-shell-avatar-btn.is-active {
  background: var(--sb-active-bg, #C4A57B);
}
.ads-scope .app-shell-avatar-btn.is-active .app-shell-avatar-chip {
  background: rgba(0,0,0,0.18);
  color: var(--sb-active-text, #1A1411);
}
.ads-scope .app-shell-avatar-btn.is-active .app-shell-avatar-label {
  color: var(--sb-active-text, #1A1411);
}

.ads-scope .app-shell-avatar-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(196,165,123,0.18);
  color: var(--sb-active-bg, #C4A57B);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  flex-shrink: 0;
  font-family: var(--font-nav, sans-serif);
}

.ads-scope .app-shell-avatar-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--sb-text, rgba(255,255,255,0.60));
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-nav, sans-serif);
}

/* ═══════════════════════════════════════════════════
   BRANDING & APPEARANCE SETTINGS SECTION
═══════════════════════════════════════════════════ */

.brand-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 20px;
}

@media (max-width: 680px) {
  .brand-settings-grid { grid-template-columns: 1fr; gap: 20px; }
}

.brand-col {}

.brand-col-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent-warm, #C4A57B);
  margin-bottom: 14px;
}

.brand-field-row {
  margin-bottom: 16px;
}

.brand-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.brand-hint {
  font-size: 11px;
  color: var(--text-secondary);
  margin: 4px 0 0;
  line-height: 1.5;
  opacity: 0.7;
}

/* Logo */
.brand-logo-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand-logo-preview {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
}

.brand-logo-empty {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  color: var(--accent-warm, #C4A57B);
  letter-spacing: -0.01em;
}

.brand-logo-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.brand-file-input {
  display: none;
}

/* Mode toggle */
.brand-mode-toggle {
  display: flex;
  gap: 8px;
}

.brand-mode-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 16px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all 0.15s;
}

.brand-mode-btn:hover {
  border-color: var(--accent-warm, #C4A57B);
  color: var(--text);
}

.brand-mode-btn.is-active {
  background: var(--accent-warm, #C4A57B);
  border-color: var(--accent-warm, #C4A57B);
  color: #1A1411;
  font-weight: 600;
}

.brand-mode-icon {
  font-size: 13px;
  line-height: 1;
}

/* Accent color */
.brand-accent-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-color-swatch {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  border: 1px solid var(--border);
  padding: 2px;
  background: var(--surface);
  cursor: pointer;
  flex-shrink: 0;
}

.brand-hex-input {
  width: 100px;
  flex-shrink: 0;
}

.brand-input.admin-input {
  width: 100%;
  box-sizing: border-box;
}

/* Save row */
.brand-save-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}

.brand-save-status {
  font-size: 12px;
  color: var(--accent-warm, #C4A57B);
}

/* ── Cost Catalog (tenant-wide library) ─────────────────────────── */
/* Wider + left-aligned so it fills space next to the sidebar (was a
   skinny centered 1100px column). Cap keeps prose line-length readable. */
.catalog-page { max-width: 1500px; margin: 0; }

/* De-box the list: instead of one bordered card per item (tall + chunky),
   each category becomes a single surface panel with tight, hairline-
   separated rows — reads like a clean table. Scoped to .catalog-page so
   the Settings page keeps its card style. */
.ads-scope.admin-shell .catalog-page .settings-group { margin-bottom: 28px; }
.ads-scope.admin-shell .catalog-page .settings-list {
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  overflow: hidden;
}
.ads-scope.admin-shell .catalog-page .settings-list-row {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  padding: 11px 18px;
  transition: background var(--transition);
}
.ads-scope.admin-shell .catalog-page .settings-list-row:last-child { border-bottom: none; }
.ads-scope.admin-shell .catalog-page .settings-list-row:hover { background: var(--surface-hover); }

/* "Cost items" sub-heading above the browse list. */
.ads-scope.admin-shell .catalog-page .catalog-items-label { margin-top: 28px; }

/* The browse list lives in its own scroll region so the long catalog
   scrolls internally while templates + toolbar stay put above it. */
.ads-scope.admin-shell .catalog-page .catalog-list-scroll {
  max-height: calc(100vh - 360px);
  min-height: 240px;
  overflow-y: auto;
  padding-right: 4px;
}
/* Inside the scroller, drop the per-group bottom margin on the last group
   so there's no dead space at the end of the scroll. */
.ads-scope.admin-shell .catalog-page .catalog-list-scroll .settings-group:last-child { margin-bottom: 0; }

/* Two-column body: cost items (main) + templates (side). */
.ads-scope.admin-shell .catalog-page .catalog-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 28px;
  align-items: start;
}
.ads-scope.admin-shell .catalog-page .catalog-main { min-width: 0; }
.ads-scope.admin-shell .catalog-page .catalog-side .settings-group { margin-bottom: 0; }
.ads-scope.admin-shell .catalog-page .catalog-items-label { margin-top: 0; }
@media (max-width: 1100px) {
  .ads-scope.admin-shell .catalog-page .catalog-body { grid-template-columns: 1fr; }
}

/* Compact horizontal rows — code + name on one line, description on a
   single truncated line. Keeps the list dense rather than tall. */
.ads-scope.admin-shell .catalog-page .catalog-row {
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
}
.ads-scope.admin-shell .catalog-page .catalog-row-check { flex: 0 0 auto; margin: 0; }
.ads-scope.admin-shell .catalog-page .catalog-row-main { flex: 1 1 auto; min-width: 0; }
.ads-scope.admin-shell .catalog-page .catalog-row-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.ads-scope.admin-shell .catalog-page .catalog-row-code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-tertiary);
  flex: 0 0 auto;
}
.ads-scope.admin-shell .catalog-page .catalog-row-name {
  font: 600 14px/1.2 var(--font-display);
  color: var(--text);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.ads-scope.admin-shell .catalog-page .catalog-row-desc {
  font: 400 12px/1.4 var(--font-body);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.ads-scope.admin-shell .catalog-page .catalog-row-meta {
  flex: 0 0 auto;
  font: 400 12px/1.4 var(--font-body);
  color: var(--text-secondary);
  text-align: right;
  white-space: nowrap;
}
.ads-scope.admin-shell .catalog-page .catalog-row-act {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  align-items: center;
}
.ads-scope.admin-shell .catalog-page .catalog-row-std { opacity: 0.5; }

/* Sub-category heading between the main label and its item panel. */
.ads-scope.admin-shell .catalog-page .catalog-sub-label {
  font: 600 11px/1 var(--font-nav);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 12px 0 6px 4px;
}

/* Sub-category sub-header inside the estimate line table. Full-width block
   (each .estimate-line is its own grid; the wrapper is not), subtle. */
.ads-scope .estimate-subcat-head {
  padding: 7px 16px 6px 44px;
  font: 600 10px/1 var(--font-nav);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border-light);
}

/* Inline add-row sub-category picker — full-width line under the cat label. */
.ads-scope .estimate-add-sub {
  grid-column: 1 / -1;
  max-width: 280px;
  font-size: 13px;
  margin-bottom: 4px;
}

/* ── Premium template cards (Cost Catalog side panel) ─────────────── */
.ads-scope.admin-shell .catalog-page .catalog-tpl-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: calc(100vh - 300px);
  overflow-y: auto;
  padding-right: 2px;
}
.ads-scope.admin-shell .catalog-page .catalog-tpl-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  transition: border-color var(--transition), background var(--transition);
}
.ads-scope.admin-shell .catalog-page .catalog-tpl-card:hover { border-color: var(--accent-warm, var(--accent)); }
.ads-scope.admin-shell .catalog-page .catalog-tpl-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.ads-scope.admin-shell .catalog-page .catalog-tpl-name {
  font: 600 14px/1.3 var(--font-display);
  color: var(--text);
  letter-spacing: -0.005em;
}
.ads-scope.admin-shell .catalog-page .catalog-tpl-meta {
  font: 400 12px/1.5 var(--font-body);
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.ads-scope.admin-shell .catalog-page .catalog-tpl-lines { color: var(--text-tertiary); }
.ads-scope.admin-shell .catalog-page .catalog-tpl-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 3px;
}
.ads-scope.admin-shell .catalog-page .catalog-tpl-actions {
  display: flex;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--border-light);
}
.ads-scope.admin-shell .catalog-page .catalog-tpl-btn {
  flex: 1 1 auto;
  font: 600 10px/1 var(--font-nav);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 7px 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  border-radius: 6px;
  cursor: pointer;
  transition: color var(--transition), background var(--transition), border-color var(--transition);
}
.ads-scope.admin-shell .catalog-page .catalog-tpl-btn:hover {
  background: var(--surface-hover);
  color: var(--text);
  border-color: var(--accent-warm, var(--accent));
}
.ads-scope.admin-shell .catalog-page .catalog-tpl-btn-danger:hover {
  color: #C0573D;
  border-color: #C0573D;
  background: transparent;
}

/* ── Estimate import dialog (template / catalog items) ──────────────
   Mounts on <body> inside .bpm-dialog, so these are unscoped and rely on
   the global theme tokens applyTheme() sets on :root. */
.imp-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.imp-tab {
  font: 600 11px/1 var(--font-nav);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 12px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  border-radius: 6px;
  cursor: pointer;
}
.imp-tab.is-active {
  background: var(--surface-hover);
  color: var(--text);
  border-color: var(--accent-warm, var(--accent));
}
.imp-hint { margin-top: 8px; }
.imp-item-list {
  margin-top: 10px;
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.imp-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.imp-item:last-child { border-bottom: none; }
.imp-item:hover { background: var(--surface-hover); }
.imp-item-code { font-family: var(--font-mono); font-size: 12px; color: var(--text-tertiary); flex: 0 0 auto; }
.imp-item-name { font-size: 13px; color: var(--text); }
.imp-empty { padding: 16px; color: var(--text-secondary); font-size: 13px; text-align: center; }

/* Small pill reused for Custom / Starter tags on catalog + template rows.
   Inherits theme tokens so it tracks light/dark + accent automatically. */
.catalog-badge {
  display: inline-block;
  font-family: var(--font-nav);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-warm, var(--accent));
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 6px;
  vertical-align: middle;
}

/* Tenant-wide nav group sits just under the project tabs; a hairline
   separates it so it reads as library-level, not a project tab. */
.ads-scope .app-shell-nav-tenant {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--sb-border);
}