/* ========================================================================
   app-components.css  (formerly clientflow.css)

   The old ClientFlow design system, pruned to the rules templates still
   use: base element styles, components such as .card-body, .form-input and
   the task/scope/panel classes, all built on the --cf-* tokens defined
   below (other stylesheets and inline styles read those tokens too).

   This file is being retired. Load order on every shell page:
   app-components.css -> prolancer.css -> prolancer-bridge.css.
   New code should use the prolancer.css primitives, not these classes.
   ======================================================================== */

/* ========================================================================
   1. RESET / BASE
   ======================================================================== */

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

/* Alpine.js cloak — hide elements until Alpine initializes */
[x-cloak] { display: none !important; }

html {
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  background: var(--cf-bg-base);
  color: var(--cf-text-primary);
  font-family: var(--cf-font-sans);
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font: var(--t-body);
  color: var(--cf-text);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 600;
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
}

ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

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

input, textarea, select {
  font-family: inherit;
}

/* ========================================================================
   2. DESIGN TOKENS (CSS CUSTOM PROPERTIES)
   ======================================================================== */

/* The --cf-* tokens are kept for the old components below and for the other
   stylesheets and inline styles that still read them, but every colour,
   surface, border, radius, shadow and font now points at a prolancer.css
   token. Prolancer tokens already switch with [data-theme], so these are
   defined once here and the light block only holds the few that need a
   different mix in light mode (status text darkened for contrast on white).
   Spacing, transitions and the non-cf scales keep their literal values.
   New code should read the Prolancer tokens directly. */
:root {
  /* Backgrounds / Surfaces */
  --cf-bg-base: var(--bg);
  --cf-surface-0: var(--surface-1);
  --cf-surface-1: var(--surface-1);
  --cf-surface-2: var(--surface-2);
  --cf-surface-3: var(--surface-3);
  --cf-surface-active: var(--color-brand-subtle);

  /* Neutral scale (inverts with theme: low numbers = near the background) */
  --cf-gray-50: var(--surface-2);
  --cf-gray-100: var(--surface-3);
  --cf-gray-200: var(--border-strong);
  --cf-gray-300: var(--text-disabled);
  --cf-gray-400: var(--text-tertiary);
  --cf-gray-500: var(--text-secondary);
  --cf-gray-600: var(--text-secondary);
  --cf-gray-700: var(--text-primary);
  --cf-gray-800: var(--text-primary);
  --cf-gray-900: var(--text-primary);

  /* Accent -> Prolancer brand */
  --cf-accent: var(--color-brand);
  --cf-accent-50: var(--color-brand-subtle);
  --cf-accent-100: color-mix(in srgb, var(--color-brand) 24%, transparent);
  --cf-accent-200: var(--color-brand-active);
  --cf-accent-300: var(--color-brand-hover);
  --cf-accent-400: var(--color-brand);
  --cf-accent-500: color-mix(in srgb, var(--color-brand) 75%, white);
  --cf-accent-600: color-mix(in srgb, var(--color-brand) 55%, white);
  --cf-accent-subtle: var(--color-brand-subtle);
  --cf-accent-muted: color-mix(in srgb, var(--color-brand) 24%, transparent);

  /* Semantic */
  --cf-success-fill: var(--success-subtle);
  --cf-success-text: var(--success);
  --cf-success-dot: var(--success);

  --cf-warning-fill: var(--warning-subtle);
  --cf-warning-text: var(--warning);
  --cf-warning-dot: var(--warning);

  --cf-danger-fill: var(--danger-subtle);
  --cf-danger-text: var(--danger);
  --cf-danger-dot: var(--danger);

  --cf-info-fill: var(--info-subtle);
  --cf-info-text: var(--info);
  --cf-info-dot: var(--info);

  /* Text */
  --cf-text-primary: var(--text-primary);
  --cf-text-secondary: var(--text-secondary);
  --cf-text-tertiary: var(--text-tertiary);
  --cf-text-muted: var(--text-tertiary);

  /* Borders */
  --cf-border: var(--border-subtle);
  --cf-border-subtle: var(--border-subtle);
  --cf-border-active: var(--border-strong);
  --cf-border-strong: var(--border-strong);

  /* Warm gold accent (money) -> Prolancer warning amber */
  --cf-gold-400: var(--warning);
  --cf-gold-500: var(--warning);
  --cf-gold-fill: var(--warning-subtle);
  --cf-gold-text: var(--cf-warning-text);

  /* Phase color palette (wraps after 10) */
  --cf-phase-1:  var(--phase-1);
  --cf-phase-2:  var(--phase-2);
  --cf-phase-3:  var(--phase-3);
  --cf-phase-4:  var(--phase-4);
  --cf-phase-5:  var(--phase-5);
  --cf-phase-6:  var(--phase-6);
  --cf-phase-7:  var(--phase-7);
  --cf-phase-8:  var(--phase-8);
  --cf-phase-9:  var(--phase-9);
  --cf-phase-10: var(--phase-10);

  /* Transitions */
  --cf-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --cf-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --cf-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* Radius -> Prolancer radii (one step rounder than the old scale) */
  --cf-radius-sm: var(--radius-xs);
  --cf-radius-md: var(--radius-sm);
  --cf-radius-lg: var(--radius-md);
  --cf-radius-xl: var(--radius-lg);
  --cf-radius-full: var(--radius-pill);
  --cf-radius: var(--radius-sm); /* legacy alias */

  /* Typography -> Prolancer faces */
  --cf-font-sans: var(--font-sans);
  --cf-font-mono: var(--font-mono);
  --cf-font-serif: var(--font-display);

  /* Shadows -> Prolancer shadows. The old card/pop/floating shadows carried
     a 1px ring that some components rely on for their edge, so the ring is
     kept, drawn with Prolancer border tokens. */
  --cf-shadow-xs: var(--shadow-sm);
  --cf-shadow-sm: var(--shadow-sm);
  --cf-shadow-card: var(--shadow-sm), 0 0 0 1px var(--border-subtle);
  --cf-shadow-pop: var(--shadow-md), 0 0 0 1px var(--border-default);
  --cf-shadow-floating: var(--shadow-lg), 0 0 0 1px var(--border-default);
  --cf-shadow-lg: var(--cf-shadow-floating); /* legacy alias */

  /* ── V3 token aliases ──────────────────────────────────────
     Shorter names; old names stay live for callers that haven't migrated. */
  --cf-bg:            var(--bg);
  --cf-surface:       var(--surface-1);
  --cf-surface-sunk:  var(--surface-inset);
  --cf-surface-hover: var(--surface-2);
  --cf-text:          var(--text-primary);
  --cf-text-subtle:   var(--text-tertiary);
  --cf-border-focus:  var(--color-brand);

  --cf-primary:       var(--color-brand);
  --cf-primary-hover: var(--color-brand-hover);
  --cf-primary-soft:  var(--color-brand-subtle);
  --cf-primary-fg:    var(--text-on-brand);

  /* Status (saturated, used sparingly) */
  --cf-status-done:    var(--success);
  --cf-status-working: var(--warning);
  --cf-status-stuck:   var(--danger);
  --cf-status-info:    var(--info);
  --cf-status-neutral: var(--text-tertiary);

  /* Tag palette for chip-style identifiers (deterministic by ID) */
  --tag-1: #7c3aed; --tag-2: #0ea5e9; --tag-3: #10b981; --tag-4: #f59e0b;
  --tag-5: #ef4444; --tag-6: #ec4899; --tag-7: #14b8a6; --tag-8: #8b5cf6;

  /* Radius — V3 compact aliases */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-full: 9999px;

  /* Motion */
  --mo-fast: 120ms;
  --mo-mid:  200ms;
  --mo-slow: 320ms;
  --mo-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  --cf-font: var(--font-sans);

  /* Tight V3 type scale — workspace, not landing page */
  --t-display: 600 24px/1.2  var(--cf-font);
  --t-h2:      600 16px/1.3  var(--cf-font);
  --t-h3:      600 13px/1.4  var(--cf-font);
  --t-body:    400 14px/1.5  var(--cf-font);
  --t-sm:      400 13px/1.4  var(--cf-font);
  --t-xs:      500 11px/1.3  var(--cf-font);
  --t-data:    500 14px/1.2  var(--cf-font-mono);
  --t-metric:  600 22px/1    var(--cf-font);

  /* ── Compatibility aliases ───────────────────────────────────────────────
     These names are referenced throughout the sheet but were never defined
     originally. Each maps to the canonical token it was meant to reach.
     Prefer the canonical name in new code. */
  --cf-bg-primary:     var(--cf-surface-1);   /* card-level surface */
  --cf-bg-secondary:   var(--cf-surface-1);
  --cf-bg-tertiary:    var(--cf-surface-2);
  --cf-bg-hover:       var(--cf-surface-hover);
  --cf-hover-bg:       var(--cf-surface-hover);
  --cf-input-bg:       var(--cf-surface-2);   /* matches .form-input */
  --cf-border-hover:   var(--cf-border-strong);
  --cf-accent-bg:      var(--cf-accent-subtle);
  --cf-accent-border:  var(--cf-accent-muted);
  --cf-success:        var(--cf-success-text);
  --cf-warning:        var(--cf-warning-text);
  --cf-danger:         var(--cf-danger-text);
  --cf-success-bg:     var(--cf-success-fill);
  --cf-warning-bg:     var(--cf-warning-fill);
  --cf-danger-bg:      var(--cf-danger-fill);

  /* Status borders: same hue as the fill, about twice as strong. */
  --cf-success-border: color-mix(in srgb, var(--success) 30%, transparent);
  --cf-warning-border: color-mix(in srgb, var(--warning) 30%, transparent);
  --cf-danger-border:  color-mix(in srgb, var(--danger) 30%, transparent);
}

/* Light mode: Prolancer's status hues are bright and fail contrast as TEXT
   on white (amber is ~1.8:1), so the text variants are darkened here. Dots,
   fills and borders keep the plain hue. Everything else follows the
   Prolancer tokens, which already switch with the theme. */
[data-theme="light"] {
  --cf-success-text: color-mix(in srgb, var(--success) 65%, black);
  --cf-warning-text: color-mix(in srgb, var(--warning) 60%, black);
  --cf-danger-text:  color-mix(in srgb, var(--danger) 80%, black);
}

/* ========================================================================
   3. TYPOGRAPHY UTILITIES
   ======================================================================== */

.text-small {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

.text-mono {
  font-family: var(--cf-font-mono);
  font-size: 12px;
  line-height: 16px;
}

/* Color Utilities */
.text-primary {
  color: var(--cf-text-primary);
}

.text-secondary {
  color: var(--cf-text-secondary);
}

.text-tertiary {
  color: var(--cf-text-tertiary);
}

.text-muted {
  color: var(--cf-text-muted);
}

/* ========================================================================
   4. LAYOUT
   ======================================================================== */

/* Sidebar - Mobile-first: hidden by default */
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: 240px;
  height: 100vh;
  background: var(--cf-surface-0);
  border-right: 1px solid var(--cf-border);
  display: flex;
  flex-direction: column;
  z-index: 50;
  transition: transform var(--cf-transition-base), width var(--cf-transition-base);
  transform: translateX(-100%); /* Hidden on mobile by default */
}

.sidebar.collapsed {
  width: 64px;
}

.sidebar-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--cf-accent-muted);
  color: var(--cf-accent-400);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.sidebar-org-avatar {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--cf-accent-muted);
  color: var(--cf-accent-400);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.sidebar-footer-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--cf-radius-sm);
  border: 1px solid var(--cf-border);
  background: var(--cf-surface-2);
  color: var(--cf-text-secondary);
  cursor: pointer;
  transition: all var(--cf-transition-fast);
  text-decoration: none;
  padding: 0;
}

.sidebar-footer-btn:hover {
  background: var(--cf-surface-3);
  border-color: var(--cf-border-hover);
  color: var(--cf-text-primary);
}

/* Settings Dropdown */
.sidebar-settings-dropdown {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 8px;
  min-width: 160px;
  background: var(--cf-surface-1);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius-md);
  box-shadow: var(--cf-shadow-lg);
  z-index: 50;
  overflow: hidden;
}

.sidebar-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--cf-text-primary);
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: none;
  text-align: left;
  font-family: inherit;
}

.sidebar-dropdown-item:hover {
  background: var(--cf-surface-2);
}

.sidebar-dropdown-item--danger {
  color: var(--cf-danger-text);
}

.sidebar-dropdown-item--danger:hover {
  background: var(--cf-danger-bg);
}

.sidebar-dropdown-divider {
  height: 1px;
  background: var(--cf-border-subtle);
  margin: 4px 0;
}

/* Collapsed State */
.sidebar.collapsed .nav-label {
  display: none;
}

/* Topbar - mobile-first padding */
.topbar {
  height: 48px;
  display: flex;
  align-items: center;
  padding: 0 16px; /* Mobile-first: smaller padding */
  border-bottom: 1px solid var(--cf-border-subtle);
  background: var(--cf-surface-1);
  flex-shrink: 0;
}

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--cf-text-tertiary);
}

.breadcrumbs a {
  color: var(--cf-text-tertiary);
  text-decoration: none;
  transition: color var(--cf-transition-fast);
}

.breadcrumbs a:hover {
  color: var(--cf-text-primary);
}

.breadcrumbs .separator {
  color: var(--cf-text-muted);
}

.breadcrumbs .current {
  color: var(--cf-text-secondary);
  font-weight: 500;
}

.topbar-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

/* Page content - mobile-first padding */
.page-content {
  flex: 1;
  padding: 16px; /* Mobile-first: smaller padding */
  max-width: 1280px;
  width: 100%;
}

/* Page header - mobile-first: stack vertically */
.page-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 24px;
}

.page-title {
  font-family: var(--cf-font-serif);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--cf-text-primary);
}

/* Grid Utilities - Mobile-first: single column by default */
.grid {
  display: grid;
}

.grid-cols-2,
.grid-cols-3,
.grid-cols-4 {
  grid-template-columns: 1fr; /* Mobile-first: single column */
}

.gap-2 {
  gap: var(--sp-2);
}

.gap-3 {
  gap: var(--sp-3);
}

.gap-4 {
  gap: var(--sp-4);
}

.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

/* Flex wrap utilities for mobile-friendly layouts */
.flex-wrap {
  flex-wrap: wrap;
}

/* Task rows - prevent overflow on mobile */
.task-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  min-width: 0; /* Allow text truncation */
}

.task-row > * {
  flex-shrink: 0;
}

/* Button groups - wrap on mobile */
.btn-group {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Spacing Utilities */
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }

.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-5 { margin-bottom: var(--sp-5); }
.mb-6 { margin-bottom: var(--sp-6); }

/* ========================================================================
   5. COMPONENTS
   ======================================================================== */

/* Cards */
.card {
  background: var(--cf-surface);
  border: none; /* boundary comes from --cf-shadow-card's inset ring */
  border-radius: var(--r-md);
  box-shadow: var(--cf-shadow-card);
}

.card-body {
  padding: var(--sp-5);
}

/* Section Headers */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
}

.section-title {
  font-family: var(--cf-font-serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--cf-text-primary);
}

.section-count {
  font-size: 12px;
  font-weight: 500;
  color: var(--cf-text-tertiary);
  background: var(--cf-surface-3);
  padding: 2px 8px;
  border-radius: var(--cf-radius-full);
}

/* Status Indicators */
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px 2px 8px;
  border-radius: var(--cf-radius-full);
  font-size: 12px;
  font-weight: 500;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Draft / Not Started */
.status--draft,
.status--not_started {
  background: rgba(113, 113, 122, 0.12);
  color: var(--cf-gray-500);
}

.status--draft .status-dot,
.status--not_started .status-dot {
  background: var(--cf-gray-500);
}

/* Active / In Progress */
.status--active,
.status--in_progress {
  background: var(--cf-accent-subtle);
  color: var(--cf-accent-500);
}

.status--active .status-dot,
.status--in_progress .status-dot {
  background: var(--cf-accent-400);
}

/* On Hold */
.status--on_hold {
  background: var(--cf-warning-fill);
  color: var(--cf-warning-text);
}

.status--on_hold .status-dot {
  background: var(--cf-warning-dot);
}

/* Completed / Approved / Resolved */
.status--completed,
.status--approved,
.status--resolved {
  background: var(--cf-success-fill);
  color: var(--cf-success-text);
}

.status--completed .status-dot,
.status--approved .status-dot,
.status--resolved .status-dot {
  background: var(--cf-success-dot);
}

/* Blocked / Open / Disputed / Rejected */
.status--blocked,
.status--open,
.status--disputed,
.status--rejected {
  background: var(--cf-danger-fill);
  color: var(--cf-danger-text);
}

.status--blocked .status-dot,
.status--open .status-dot,
.status--disputed .status-dot,
.status--rejected .status-dot {
  background: var(--cf-danger-dot);
}

/* Archived / Cancelled / Dismissed */
.status--archived,
.status--cancelled,
.status--dismissed {
  background: rgba(82, 82, 91, 0.12);
  color: var(--cf-gray-400);
}

.status--archived .status-dot,
.status--cancelled .status-dot,
.status--dismissed .status-dot {
  background: var(--cf-gray-400);
}

/* In Review / Requested */
.status--in_review,
.status--requested {
  background: var(--cf-info-fill);
  color: var(--cf-info-text);
}

.status--in_review .status-dot,
.status--requested .status-dot {
  background: var(--cf-info-dot);
}

/* Tables */
.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cf-text-tertiary);
  padding: 8px 16px;
  border-bottom: 1px solid var(--cf-border);
  text-align: left;
}

.data-table td {
  font-size: 13px;
  color: var(--cf-text-primary);
  padding: 12px 16px;
  border-bottom: 1px solid var(--cf-border-subtle);
}

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

.data-table tr:hover td {
  background: var(--cf-surface-3);
}

.data-table .row-link {
  color: var(--cf-text-primary);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--cf-transition-fast);
}

.data-table .row-link:hover {
  color: var(--cf-accent-400);
}

.data-table .cell-secondary {
  color: var(--cf-text-secondary);
}

.data-table .cell-mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--cf-text-tertiary);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--cf-transition-fast);
}

.btn-primary {
  background: var(--cf-accent-400);
  color: white;
  border-radius: var(--cf-radius-md);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
}

.btn-primary:hover {
  background: var(--cf-accent-300);
}

.btn-primary:active {
  background: var(--cf-accent-500);
}

.btn-secondary {
  background: transparent;
  color: var(--cf-accent-500);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius-md);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
}

.btn-secondary:hover {
  background: var(--cf-accent-subtle);
  border-color: var(--cf-accent-200);
}

.btn-icon {
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  color: var(--cf-text-tertiary);
  border: none;
  border-radius: var(--cf-radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--cf-transition-fast);
}

.btn-icon:hover {
  background: var(--cf-surface-3);
  color: var(--cf-text-primary);
}

.btn-text {
  background: none;
  border: none;
  color: var(--cf-accent-400);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  transition: color var(--cf-transition-fast);
}

.btn-text:hover {
  color: var(--cf-accent-300);
}

/* Filter Pills */
.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.filter-pill {
  padding: 4px 12px;
  border-radius: var(--cf-radius-full);
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--cf-border);
  background: transparent;
  color: var(--cf-text-secondary);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--cf-transition-fast);
}

.filter-pill:hover {
  background: var(--cf-surface-3);
  color: var(--cf-text-primary);
  border-color: var(--cf-border-active);
}

.filter-pill.active {
  background: var(--cf-accent-subtle);
  color: var(--cf-accent-400);
  border-color: var(--cf-accent-200);
}

.progress-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}

.progress-text {
  font-size: 12px;
  font-weight: 500;
  color: var(--cf-text-tertiary);
  white-space: nowrap;
}

/* Tabs */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--cf-border);
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
}

.tab {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--cf-text-tertiary);
  border: none;
  background: none;
  cursor: pointer;
  position: relative;
  transition: color var(--cf-transition-fast);
  display: flex;
  align-items: center;
  gap: 6px;
}

.tab:hover {
  color: var(--cf-text-primary);
}

.tab.active {
  color: var(--cf-accent-400);
}

.tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--cf-accent-400);
  border-radius: 1px 1px 0 0;
}

.tab-count {
  font-size: 11px;
  background: var(--cf-surface-3);
  padding: 1px 6px;
  border-radius: var(--cf-radius-full);
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

/* Forms / Inputs */
.form-input {
  width: 100%;
  padding: 10px 14px;
  background: var(--cf-surface-2);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius-md);
  color: var(--cf-text-primary);
  font-family: inherit;
  font-size: 13px;
  transition: border-color var(--cf-transition-fast);
  outline: none;
}

.form-input:focus,
.form-select:focus,
select.form-input:focus,
textarea.form-input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
  border-color: var(--cf-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--cf-primary) 18%, transparent) !important;
  outline: none !important;
}

.form-input::placeholder {
  color: var(--cf-text-muted);
}

.form-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--cf-text-secondary);
  margin-bottom: 6px;
}

/* Form Groups & Layout */
.form-group {
  margin-bottom: var(--sp-5);
}

.form-group .form-label {
  margin-bottom: 6px;
}

.form-help {
  font-size: 11px;
  color: var(--cf-text-muted);
  margin-top: 4px;
}

.form-error {
  font-size: 12px;
  color: var(--cf-danger-text);
  margin-top: 4px;
}

.form-error-list {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
}

.form-error-list li {
  font-size: 12px;
  color: var(--cf-danger-text);
}

/* Form row - mobile-first: single column by default */
.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}

@media (min-width: 640px) {
  .form-row {
    grid-template-columns: 1fr 1fr;
  }
}

.form-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--cf-border-subtle);
  margin-top: var(--sp-5);
}

/* Select Styling */
select.form-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

/* Textarea Styling */
textarea.form-input {
  min-height: 100px;
  resize: vertical;
  line-height: 1.6;
}

/* Multi-select (used for dependencies) */
select[multiple].form-input {
  min-height: 120px;
  background-image: none;
  padding-right: 14px;
}

/* Form input with error state */
.form-input.is-invalid,
.is-invalid .form-input {
  border-color: var(--cf-danger-text);
}

.form-input.is-invalid:focus,
.is-invalid .form-input:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

/* Alerts */
.alert {
  padding: 12px 16px;
  border-radius: var(--cf-radius-md);
  font-size: 13px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* Dropdown */
.dropdown {
  position: relative;
}

/* Empty States */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-16) var(--sp-8);
  text-align: center;
}

/* Avatar */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 600;
  flex-shrink: 0;
  background: var(--cf-accent-muted);
  color: var(--cf-accent-400);
}

.avatar-sm {
  width: 24px;
  height: 24px;
  font-size: 10px;
}

/* Key-Value Pairs */
.kv-grid {
  display: grid;
  gap: var(--sp-3) var(--sp-6);
}

.kv-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.kv-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.kv-label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cf-text-tertiary);
  margin-bottom: 2px;
}

.kv-value {
  font-size: 13px;
  color: var(--cf-text-primary);
}

/* Comment Thread */
.comment {
  padding: var(--sp-4) 0;
}

.comment + .comment {
  border-top: 1px solid var(--cf-border-subtle);
}

.comment-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-2);
}

.comment-author {
  font-size: 13px;
  font-weight: 500;
  color: var(--cf-text-primary);
}

.comment-time {
  font-size: 12px;
  color: var(--cf-text-tertiary);
}

.comment-body {
  font-size: 13px;
  color: var(--cf-text-secondary);
  line-height: 1.6;
}

.comment-replies {
  margin-left: 24px;
  padding-left: 16px;
  border-left: 2px solid var(--cf-border-subtle);
  margin-top: var(--sp-3);
}

.comment-reply {
  padding: var(--sp-3) 0;
}

.comment-reply + .comment-reply {
  border-top: 1px solid var(--cf-border-subtle);
}

/* List Items */
.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--cf-border-subtle);
  transition: background var(--cf-transition-fast);
}

.list-item:last-child {
  border-bottom: none;
}

.list-item:hover {
  background: var(--cf-surface-3);
}

.list-item-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.list-item-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--cf-text-primary);
}

.list-item-meta {
  font-size: 12px;
  color: var(--cf-text-tertiary);
}

/* Scope Tree */
.scope-tree {
}

.scope-tree-item {
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--cf-border-subtle);
  transition: background var(--cf-transition-fast);
}

.scope-tree-item:hover {
  background: var(--cf-surface-3);
}

.scope-indent-1 {
  padding-left: 32px;
}

.scope-indent-2 {
  padding-left: 56px;
}

.scope-indent-3 {
  padding-left: 80px;
}

/* Landing Page */
.landing-bg {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cf-bg-base);
}

.landing-card {
  width: 100%;
  max-width: 400px;
  padding: var(--sp-10);
  background: var(--cf-surface-2);
  border: 1px solid var(--cf-border-subtle);
  border-radius: var(--cf-radius-lg);
  text-align: center;
}

.landing-logo {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--sp-4);
  color: var(--cf-accent-400);
}

.landing-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--cf-text-primary);
  margin-bottom: var(--sp-2);
}

.landing-subtitle {
  font-size: 13px;
  color: var(--cf-text-tertiary);
  margin-bottom: var(--sp-6);
}

/* Misc Utilities */
.hidden {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.w-full {
  width: 100%;
}

.relative {
  position: relative;
}

/* ========================================================================
   6. RESPONSIVE (Mobile-First: min-width breakpoints)
   ======================================================================== */

/* Tablet and up (640px+) */
@media (min-width: 640px) {
  .grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .kv-grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Tablet landscape and up (768px+) */
@media (min-width: 768px) {
  .grid-cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .kv-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .page-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .topbar {
    padding: 0 24px;
  }

  .page-content {
    padding: 20px 24px;
  }
}

/* Desktop and up (1024px+) */
@media (min-width: 1024px) {
  /* Show sidebar on desktop */
  .sidebar {
    transform: translateX(0);
  }

  .grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .kv-grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .topbar {
    padding: 0 32px;
  }

  .page-content {
    padding: 24px 32px;
  }
}

/* ========================================================================
   7. REDUCED MOTION
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========================================================================
   8. FOCUS
   ======================================================================== */

:focus-visible {
  outline: 2px solid var(--cf-accent-400);
  outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--cf-accent-400);
  outline-offset: 2px;
}

/* ========================================================================
   9. PHASE BOARD (Trello-style scope layout)
   ======================================================================== */

/* Phase Card */
.phase-card {
  background: var(--cf-surface-2);
  border: 1px solid var(--cf-border-subtle);
  border-radius: var(--cf-radius-lg);
  margin-bottom: var(--sp-4);
  transition: border-color var(--cf-transition-fast);
}

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

.phase-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--cf-border-subtle);
}

.phase-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--cf-text-primary);
  text-decoration: none;
  transition: color var(--cf-transition-fast);
}

.phase-title:hover {
  color: var(--cf-accent-400);
}

/* Task Rows */
.phase-tasks {
  padding: 0;
}

.task-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px var(--sp-4);
  border-bottom: 1px solid var(--cf-border-subtle);
  text-decoration: none;
  color: inherit;
  transition: background var(--cf-transition-fast);
}

.task-row:last-child {
  border-bottom: none;
}

.task-row:hover {
  background: var(--cf-surface-3);
}

.task-row-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--cf-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-row-status {
  font-size: 11px;
  color: var(--cf-text-tertiary);
  white-space: nowrap;
}

/* Standalone status dots for task rows */
.status-dot--not_started { background: var(--cf-gray-500); }
.status-dot--in_progress { background: var(--cf-accent-400); }
.status-dot--completed { background: var(--cf-success-dot); }
.status-dot--blocked { background: var(--cf-danger-dot); }
.status-dot--on_hold { background: var(--cf-warning-dot); }
.status-dot--in_review { background: var(--cf-info-dot); }
.status-dot--cancelled { background: var(--cf-gray-400); }
.status-dot--draft { background: var(--cf-gray-500); }

.phase-empty {
  padding: var(--sp-4);
  text-align: center;
  font-size: 12px;
  color: var(--cf-text-muted);
}

/* Quick-add — Trello-style two-state */
.quick-add-trigger {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: var(--cf-radius);
  background: transparent;
  color: var(--cf-text-muted);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.quick-add-trigger:hover {
  background: var(--cf-surface-3);
  color: var(--cf-text-secondary);
}

.quick-add-expanded {
  padding: var(--sp-3);
}

.quick-add-expanded textarea {
  width: 100%;
  min-height: 54px;
  padding: 8px 12px;
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius);
  background: var(--cf-surface-1);
  color: var(--cf-text-primary);
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
}

.quick-add-expanded textarea:focus {
  border-color: var(--cf-accent-400);
  box-shadow: 0 0 0 2px var(--cf-accent-subtle);
  outline: none;
}

.quick-add-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

/* Phase-level quick-add wrapper */
.quick-add-phase-wrapper {
  background: var(--cf-surface-2);
  border: 1px dashed var(--cf-border);
  border-radius: var(--cf-radius-lg);
  margin-top: var(--sp-2);
  transition: border-color var(--cf-transition-fast);
}

.quick-add-phase-wrapper:hover {
  border-color: var(--cf-accent-400);
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Inline add-task dropdown inside phase header */
.phase-inline-add-task {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 20;
  width: 300px;
  padding: var(--sp-3);
  background: var(--cf-surface-1);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius-lg);
  box-shadow: var(--cf-shadow-lg);
  margin-top: 4px;
}

/* ========================================================================
   10. SLIDE-OVER PANEL
   ======================================================================== */

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

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Backdrop */
.panel-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  /* Above the Prolancer shell chrome (--z-sticky:100 topbar, --z-sidebar:200)
     so the slide-over overlays them instead of being covered. Legacy chrome is
     ~45-50, so this clears both skins. Stays below toast/command (600/700). */
  z-index: 400;
  opacity: 0;
  transition: opacity var(--cf-transition-base);
  pointer-events: none;
}

.panel-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

/* Panel Container - mobile-first: full width on mobile */
.slide-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100vw; /* Full width on mobile */
  max-width: 100vw;
  background: var(--cf-surface-1);
  border-left: 1px solid var(--cf-border);
  /* One above .panel-backdrop (400); overlays the Prolancer topbar (100) +
     sidebar (200) so the panel header (title + close) isn't clipped behind them. */
  z-index: 401;
  transform: translateX(100%);
  transition: transform var(--cf-transition-slow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.2);
}

.slide-panel.open {
  transform: translateX(0);
}

/* Closed, the panel sits just off-screen; without this its shadow bleeds in. */
.slide-panel:not(.open) {
  box-shadow: none;
}

/* Panel content container must fill panel and flex so panel-body can scroll */
#panel-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Panel Header */
.panel-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--cf-border-subtle);
  flex-shrink: 0;
}

.panel-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--cf-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Panel Scrollable Content */
.panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--sp-5) var(--sp-4);
}

/* Panel Metadata Row */
.panel-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--cf-border-subtle);
  flex-shrink: 0;
}

.panel-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--cf-text-tertiary);
}

/* ── Editable attribute row (assignee, dates, hours) ─────────────────── */

.panel-attrs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--cf-border-subtle);
}

.panel-attr-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border: 1px solid var(--cf-border-subtle);
  border-radius: var(--cf-radius-pill, 999px);
  background: transparent;
  color: var(--cf-text-secondary);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--cf-transition-fast);
}

.panel-attr-btn:hover {
  border-color: var(--cf-border);
  background: var(--cf-surface-2);
  color: var(--cf-text-primary);
}

.panel-attr-empty {
  color: var(--cf-text-tertiary);
}

.panel-attr-hint {
  flex-basis: 100%;
  font-size: 11px;
  color: var(--cf-text-tertiary);
}

.panel-schedule-form {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: flex-end;
}

.panel-schedule-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  color: var(--cf-text-tertiary);
}

.panel-schedule-field .form-input {
  font-size: 12px;
  padding: 5px 8px;
}

.panel-schedule-note {
  flex-basis: 100%;
  margin: 0;
  font-size: 11px;
  color: var(--cf-warning-text, var(--cf-text-tertiary));
}

.panel-schedule-actions {
  display: flex;
  gap: var(--sp-2);
}

/* ── Blocked-by list ─────────────────────────────────────────────────── */

.panel-blockers {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--cf-border-subtle);
}

.panel-blockers-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--cf-danger-text, var(--cf-text-secondary));
  margin-bottom: var(--sp-2);
}

.panel-blocker-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 4px 0;
}

.panel-blocker-title {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--cf-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Panel Sections */
.panel-section {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--cf-border-subtle);
}

.panel-section:last-child {
  border-bottom: none;
}

.panel-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-2);
}

.panel-section-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: var(--sp-2) 0;
  border: none;
  background: transparent;
  color: var(--cf-text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}

.panel-section-toggle:hover {
  color: var(--cf-text-primary);
}

.panel-description {
  font-size: 13px;
  color: var(--cf-text-secondary);
  line-height: 1.6;
  padding: var(--sp-2) 0;
}

/* Checklist Items */
.checklist-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 0;
  border-bottom: 1px solid var(--cf-border-subtle);
}

.checklist-item:last-child {
  border-bottom: none;
}

.checklist-item--indent {
  padding-left: var(--sp-6);
}

.checklist-checkbox-form {
  flex-shrink: 0;
}

.checklist-checkbox {
  width: 18px;
  height: 18px;
  border: 2px solid var(--cf-border-active);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--cf-transition-fast);
  padding: 0;
  color: transparent;
}

.checklist-checkbox:hover {
  border-color: var(--cf-accent-400);
  background: var(--cf-accent-subtle);
}

.checklist-checkbox.checked {
  background: var(--cf-success-dot);
  border-color: var(--cf-success-dot);
  color: white;
}

.checklist-checkbox.checked:hover {
  opacity: 0.8;
}

.checklist-content {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  flex: 1;
}

.checklist-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--cf-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checklist-title.completed {
  text-decoration: line-through;
  color: var(--cf-text-muted);
}

.checklist-assignee {
  width: 20px;
  height: 20px;
  border-radius: var(--cf-radius-full);
  background: var(--cf-accent-subtle);
  color: var(--cf-accent-400);
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.checklist-subtasks {
  padding-left: var(--sp-4);
}

/* Checklist Quick Add */
.checklist-quick-add {
  padding: var(--sp-1) 0;
}

.checklist-quick-add-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  width: 100%;
  padding: 6px 0;
  border: none;
  background: transparent;
  color: var(--cf-text-muted);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: color var(--cf-transition-fast);
}

.checklist-quick-add-btn:hover {
  color: var(--cf-accent-400);
}

.checklist-quick-add-actions {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

/* Panel Footer */
.panel-footer {
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--cf-border-subtle);
  flex-shrink: 0;
}

.panel-full-detail-link {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 12px;
  color: var(--cf-accent-400);
  text-decoration: none;
  transition: color var(--cf-transition-fast);
}

.panel-full-detail-link:hover {
  color: var(--cf-accent-300);
}

/* Panel Loading State */
.panel-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--cf-text-muted);
}

/* Slide panel: restrict width on larger screens */
@media (min-width: 640px) {
  .slide-panel {
    width: 500px;
    max-width: 90vw;
  }
}

/* ── Panel Dropdown Menus (Status/Priority in Task Panel) ──────────── */

.panel-dropdown-menu {
  background: var(--cf-surface-2);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius-lg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  padding: 4px;
}

.panel-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: none;
  border-radius: var(--cf-radius-sm);
  cursor: pointer;
  font-size: 12px;
  color: var(--cf-text-secondary);
  text-align: left;
  font-family: inherit;
  transition: all var(--cf-transition-fast);
}

.panel-dropdown-item:hover {
  background: var(--cf-surface-3);
  color: var(--cf-text-primary);
}

.panel-dropdown-item.active {
  background: var(--cf-surface-3);
  color: var(--cf-text-primary);
}

/* ── Status Dropdown (Project Header) ──────────────────────────────── */

.status-dropdown-wrap {
  display: inline-block;
}

.status-dropdown-trigger {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  font-family: inherit;
}

.status-dropdown-trigger:hover {
  filter: brightness(1.15);
}

.status-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 180px;
  background: var(--cf-surface-2);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius-lg);
  box-shadow: var(--cf-shadow-lg);
  padding: 4px;
  z-index: 60;
}

.status-dropdown-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--cf-text-secondary);
  background: none;
  border: none;
  border-radius: var(--cf-radius-md);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.status-dropdown-option:hover {
  background: var(--cf-hover-bg);
  color: var(--cf-text-primary);
}

.status-dropdown-option.active {
  color: var(--cf-accent-400);
  font-weight: 500;
}

/* Status dots per status */
.status-dot--not_started { background: var(--cf-text-muted); }
.status-dot--in_progress { background: var(--cf-info-text); }
.status-dot--in_review { background: var(--cf-warning-text); }
.status-dot--completed { background: var(--cf-success-text); }
.status-dot--disputed { background: var(--cf-danger-text); }
.status-dot--blocked { background: var(--cf-danger-text); }

/* ── Stuck Indicators ─────────────────────────────────────────────── */

.stuck-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--cf-warning-text);
  background: var(--cf-warning-bg);
  border: 1px solid var(--cf-warning-border);
  padding: 1px 8px;
  border-radius: var(--cf-radius-full);
}

.overdue-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--cf-danger-text);
  background: var(--cf-danger-bg);
  border: 1px solid var(--cf-danger-border);
  padding: 1px 8px;
  border-radius: var(--cf-radius-full);
}

/* Blocked-by badge — a dependency is holding this item up. Info-toned, not
   danger: unlike "stuck" or "overdue" this is expected sequencing, and the
   row stays readable. Pairs with .row--blocked below. */
.blocked-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  max-width: 240px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--cf-status-info);
  background: rgba(59, 130, 246, 0.14);
  border: 1px solid rgba(59, 130, 246, 0.28);
  padding: 1px 8px;
  border-radius: var(--cf-radius-full);
}

.task-row-due {
  font-size: 11px;
  color: var(--cf-text-muted);
  white-space: nowrap;
}

.task-row-due.overdue {
  color: var(--cf-danger-text);
  font-weight: 500;
}

.stuck-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--cf-text-muted);
  background: none;
  border: 1px solid var(--cf-border);
  padding: 4px 10px;
  border-radius: var(--cf-radius-md);
  cursor: pointer;
  font-family: inherit;
  transition: all var(--cf-transition-fast);
  flex-shrink: 0;
}

.stuck-toggle:hover {
  border-color: var(--cf-warning-border);
  color: var(--cf-warning-text);
  background: var(--cf-warning-bg);
}

.stuck-toggle--active {
  color: var(--cf-warning-text);
  background: var(--cf-warning-bg);
  border-color: var(--cf-warning-border);
}

.stuck-toggle--active:hover {
  background: transparent;
  color: var(--cf-text-muted);
  border-color: var(--cf-border);
}

.stuck-reason-text {
  font-size: 12px;
  color: var(--cf-warning-text);
  font-style: italic;
}

.panel-stuck-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.checklist-item--stuck {
  border-left: 2px solid var(--cf-warning-border);
  padding-left: 6px;
}

/* ── Stuck Blocker Picker & Display ───────────────────────────────── */

.stuck-form-fields {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  width: 100%;
}

.stuck-form-fields--sm {
  gap: var(--sp-1);
}

.stuck-blocker-display {
  font-size: 12px;
  color: var(--cf-text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.stuck-blocker-link {
  color: var(--cf-warning-text);
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
}

.stuck-blocker-link:hover {
  text-decoration: underline;
}

.stuck-on-me-indicator {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: var(--sp-2);
  padding: 6px 8px;
  font-size: 12px;
  color: var(--cf-text-secondary);
  background: var(--cf-warning-bg);
  border: 1px solid var(--cf-warning-border);
  border-radius: var(--cf-radius-md);
}

/* ── Panel Notes / Description ────────────────────────────────────── */

.panel-notes-textarea {
  width: 100%;
  background: var(--cf-input-bg);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius-md);
  color: var(--cf-text-primary);
  font-size: 13px;
  font-family: inherit;
  padding: 8px 10px;
  resize: vertical;
  line-height: 1.5;
  transition: border-color var(--cf-transition-fast);
}

.panel-notes-textarea:focus {
  outline: none;
  border-color: var(--cf-accent-400);
}

.panel-notes-textarea::placeholder {
  color: var(--cf-text-muted);
}

/* ── Checklist Notes Area ─────────────────────────────────────────── */

.checklist-notes-area {
  padding: 4px 0 8px 32px;
}

.checklist-notes-preview {
  font-size: 12px;
  color: var(--cf-text-tertiary);
  line-height: 1.5;
  margin-bottom: var(--sp-2);
  padding: 4px 0;
}

/* ── Checklist Timestamps ─────────────────────────────────────────── */

.checklist-timestamps {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 1px;
}

.checklist-timestamps span {
  font-size: 10px;
  color: var(--cf-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* ── Inline Title Edit ────────────────────────────────────────────── */

.inline-title-edit {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex: 1;
  min-width: 0;
}

.inline-title-input {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 600;
  background: var(--cf-input-bg);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius-md);
  color: var(--cf-text-primary);
  font-family: inherit;
  padding: 4px 8px;
  transition: border-color var(--cf-transition-fast);
}

.inline-title-input:focus {
  outline: none;
  border-color: var(--cf-accent);
}

.checklist-title-label {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: 13px;
}

.checklist-title-label .btn-icon {
  opacity: 0;
  transition: opacity var(--cf-transition-fast);
}

.checklist-title-label:hover .btn-icon {
  opacity: 1;
}

/* ── Inline Confirm Delete ────────────────────────────────────────── */

.inline-confirm-delete {
  padding: var(--sp-1) 0;
  font-size: 12px;
  color: var(--cf-warning-text);
}

.inline-confirm-delete .flex {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.template-item-type-badge {
  font-size: 11px;
  padding: 1px 8px;
  border-radius: var(--cf-radius-full);
  background: var(--cf-bg-tertiary);
  color: var(--cf-text-secondary);
  font-weight: 500;
  text-transform: capitalize;
}

/* ── AI Review Tree ──────────────────────────────────────────────── */

.ai-review-tree {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.ai-review-item {
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius-md);
  padding: var(--sp-3);
}

.ai-review-item--child {
  border-color: var(--cf-border-subtle);
  padding: var(--sp-2);
}

.ai-review-item--grandchild {
  border-color: var(--cf-border-subtle);
  padding: var(--sp-1) var(--sp-2);
}

.ai-review-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.ai-review-children {
  margin-top: var(--sp-2);
  margin-left: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-left: var(--sp-3);
  border-left: 2px solid var(--cf-border-subtle);
}

/* ── Panel Compact Tabs ──────────────────────────────────────────── */

.panel-body .tabs {
  margin-bottom: var(--sp-3);
}

.panel-body .tab {
  padding: 8px 10px;
  font-size: 12px;
}

/* ── Risk Badges (Scope Creep) ────────────────────────────────────── */

.risk-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--cf-radius-full);
  text-transform: capitalize;
}

.risk-badge--low {
  background: var(--cf-success-bg);
  color: var(--cf-success-text);
  border: 1px solid var(--cf-success-border);
}

.risk-badge--moderate {
  background: var(--cf-warning-bg);
  color: var(--cf-warning-text);
  border: 1px solid var(--cf-warning-border);
}

.risk-badge--high {
  background: rgba(234, 88, 12, 0.12);
  color: #ea580c;
  border: 1px solid rgba(234, 88, 12, 0.25);
}

[data-theme="dark"] .risk-badge--high {
  background: rgba(251, 146, 60, 0.12);
  color: #fb923c;
  border: 1px solid rgba(251, 146, 60, 0.25);
}

.risk-badge--critical {
  background: var(--cf-danger-bg);
  color: var(--cf-danger-text);
  border: 1px solid var(--cf-danger-border);
}

/* Stat-icon variants live near the .stat-card rules above (flat ink, no pill).
   The duplicate pastel-background overrides that used to live here were
   defeating the V3 §2 "no pastel pills" directive. */

/* ── Loading Spinner ───────────────────────────────────────────────── */
.loading-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--cf-border);
  border-top-color: var(--cf-accent-400);
  border-radius: 50%;
  animation: cf-spin 0.6s linear infinite;
  flex-shrink: 0;
}

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

button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* ── Organization Type Pills ──────────────────────────────────────── */

.org-type-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--cf-radius-full);
  text-transform: capitalize;
  flex-shrink: 0;
  line-height: 1.4;
}

.org-type-pill--internal {
  background: var(--cf-accent-bg);
  color: var(--cf-accent);
  border: 1px solid var(--cf-accent-border);
}

.org-type-pill--client {
  background: var(--cf-success-bg);
  color: var(--cf-success-text);
  border: 1px solid var(--cf-success-border);
}

/* ========================================================================
   LOADING STATES
   ======================================================================== */

.spinner-sm {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  vertical-align: middle;
}

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

/* ========================================================================
   WARM DESIGN COMPONENTS
   ======================================================================== */

/* Progress battery (multi-segment composition bar) */
.progress-battery {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--cf-gray-100);
}
.battery-segment {
  height: 100%;
  transition: width 0.3s ease;
}
.battery-segment--success { background: var(--cf-success-dot); }
.battery-segment--accent  { background: var(--cf-accent-400); }
.battery-segment--warning { background: var(--cf-warning-dot); }

.battery-segment--gray    { background: var(--cf-gray-200); }

/* Celebratory pulse on task completion */
@keyframes complete-pulse {
  0%   { background-color: transparent; }
  30%  { background-color: var(--cf-success-fill); }
  100% { background-color: transparent; }
}
.task-row--just-completed {
  animation: complete-pulse 600ms ease-out;
}

/* Conditional row tinting */
tr.row--overdue td { background: var(--cf-danger-fill); }
tr.row--stuck td   { background: var(--cf-warning-fill); }
.task-row.row--overdue { background: var(--cf-danger-fill); }
.task-row.row--stuck   { background: var(--cf-warning-fill); }
/* Blocked wins over overdue/stuck in the template's if-chain: a task waiting
   on a dependency needs the blocker cleared first, whatever else is true. */
.task-row.row--blocked { background: var(--cf-info-fill); }

/* Selected row highlight (multi-select) */
.bg-selected { background: var(--cf-info-fill); }

/* Phase card color border */
.phase-card[style*="--phase-color"] {
  border-left: 4px solid var(--phase-color);
}

/* Battery legend */
.battery-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  font-size: 11px;
  color: var(--cf-text-tertiary);
  margin-top: var(--sp-2);
}
.battery-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.battery-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ========================================================================
   MOBILE RESPONSIVENESS (Mobile-First)
   ======================================================================== */

/* Mobile-first base styles for grids and forms */
.kv-grid-3 {
  grid-template-columns: 1fr; /* Single column on mobile */
}

.form-row {
  grid-template-columns: 1fr; /* Single column on mobile */
}

.form-actions {
  flex-wrap: wrap; /* Wrap by default */
}

.page-header .flex {
  flex-wrap: wrap; /* Wrap by default */
}

/* Tablet and up: expand grids */
@media (min-width: 640px) {

  .kv-grid-3 {
    grid-template-columns: 1fr 1fr;
  }
}

/* Desktop: full grid columns */
@media (min-width: 1024px) {
  .kv-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .form-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Touch-friendly targets — 44px minimum by default (mobile-first) */
.btn {
  min-height: 44px;
  min-width: 44px;
}

.btn-icon {
  min-height: 44px;
  min-width: 44px;
  padding: 10px;
}

.form-input,
select.form-input,
textarea.form-input {
  min-height: 44px;
  font-size: 16px; /* Prevents iOS zoom on focus */
}

.form-checkbox {
  width: 20px;
  height: 20px;
}

/* Desktop: can reduce touch targets slightly */
@media (min-width: 1024px) {
  .btn {
    min-height: 36px;
    min-width: auto;
  }

  .btn-icon {
    min-height: 32px;
    min-width: 32px;
    padding: 6px;
  }

  .form-input,
  select.form-input,
  textarea.form-input {
    min-height: 36px;
    font-size: 13px;
  }

  .form-checkbox {
    width: 16px;
    height: 16px;
  }
}

/* ========================================================================
   V3 FACELIFT — "Productive Surface"
   ======================================================================== */

/* ── 2.9 Timer pill ──
   Dark hardware look, even in light mode. Mono-green readout, red pulsing
   dot, floating shadow. Sits in the sidebar; never on the page background. */

.timer-pill {
  margin: var(--sp-2) var(--sp-3);
  padding: 10px 12px;
  background: #18181b;
  color: #fafafa;
  border-radius: var(--r-md);
  box-shadow: var(--cf-shadow-floating);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
}

.timer-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cf-status-stuck);
  animation: pulse 1.6s ease-in-out infinite;
}

.timer-pill__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.timer-pill__project {
  font: var(--t-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #a1a1aa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timer-pill__time {
  font: 600 16px/1 var(--cf-font-mono);
  color: var(--cf-status-done);
  font-variant-numeric: tabular-nums;
}

.timer-pill__stop {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--cf-status-stuck);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--mo-fast);
}

.timer-pill__stop:hover { background: #c0364c; }

.timer-pill__idle-warning {
  margin: 6px var(--sp-3) 0;
  padding: 6px 10px;
  background: rgba(253, 171, 61, 0.14);
  border: 1px solid rgba(253, 171, 61, 0.35);
  border-radius: var(--r-sm);
  font: 500 11px/1.3 var(--cf-font);
  color: var(--cf-status-working);
  display: flex;
  align-items: center;
  gap: 6px;
}

.timer-pill__idle-warning button {
  margin-left: auto;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
  padding: 0;
}

/* Idle state — ghost button per V3 §2.2 "Start Timer" directive */
.timer-pill-idle {
  margin: var(--sp-2) var(--sp-3);
  position: relative;
}

.timer-pill-start {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: #18181b;
  border: none;
  border-radius: var(--r-md);
  color: #fafafa;
  font: 500 12px/1 var(--cf-font);
  cursor: pointer;
  transition: background var(--mo-fast);
  box-shadow: var(--cf-shadow-floating);
}

.timer-pill-start:hover { background: #27272a; }

.timer-pill-start__icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 200, 117, 0.18);
  color: var(--cf-status-done);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.timer-pill-picker {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  padding: 12px;
  background: #18181b;
  border-radius: var(--r-md);
  box-shadow: var(--cf-shadow-floating);
}

.timer-pill-picker select {
  background: #0c0c0e;
  color: #fafafa;
  border: 1px solid #3f3f46;
}

/* ========================================================================
   V3 COMPONENTS — Solid badges, table row accents, avatars, segmented bars
   ======================================================================== */

/* ── §5 Row status bar (Monday signature) ──
   Applied via inline `style="--row-status: var(--cf-status-XXX)"` on <tr>.
   Renders as a 3px inset bar on the first cell. */

.data-table tr[style*="--row-status"] td:first-child {
  box-shadow: inset 3px 0 0 var(--row-status, transparent);
}

/* ── §2.11 Avatar chips ──
   People = circle. Deterministic background from --tag-1..--tag-8 picked
   via the `tag_index` template filter. Initials from `initials` filter. */

.avatar-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font: 600 10px/1 var(--cf-font, var(--cf-font-sans));
  color: #fff;
  flex-shrink: 0;
  letter-spacing: 0.02em;
  border: 1px solid var(--cf-surface);
}

.avatar-chip--sm { width: 20px; height: 20px; font-size: 9px; }

.avatar-chip[data-tag="1"] { background: var(--tag-1); }
.avatar-chip[data-tag="2"] { background: var(--tag-2); }
.avatar-chip[data-tag="3"] { background: var(--tag-3); }
.avatar-chip[data-tag="4"] { background: var(--tag-4); }
.avatar-chip[data-tag="5"] { background: var(--tag-5); }
.avatar-chip[data-tag="6"] { background: var(--tag-6); }
.avatar-chip[data-tag="7"] { background: var(--tag-7); }
.avatar-chip[data-tag="8"] { background: var(--tag-8); }

/* ── §2.12 Segmented progress ──
   Two stacked colored fills (done + working) over a neutral track.
   Replaces the V2 single-fill bar that throws away in-flight information. */

.progress-segmented {
  position: relative;
  height: 6px;
  background: var(--cf-surface-sunk);
  border-radius: 3px;
  overflow: hidden;
  flex: 1;
  min-width: 60px;
}

.progress-segmented__seg {
  position: absolute;
  top: 0;
  bottom: 0;
  transition: width var(--mo-slow, 320ms) var(--mo-ease, cubic-bezier(.2,.8,.2,1));
}

.progress-segmented__seg--done    { left: 0; background: var(--cf-status-done); }
.progress-segmented__seg--working { background: var(--cf-status-working); }

.progress-inline .progress-segmented { flex: 1; }

.progress-text--mono {
  font-family: var(--cf-font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--cf-text-muted);
  white-space: nowrap;
  min-width: 32px;
  text-align: right;
}

/* ── §5 Hover-reveal row actions ── */

.data-table .row-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  opacity: 0;
  transition: opacity var(--mo-fast, 120ms);
}

.data-table tr:hover .row-actions { opacity: 1; }

.row-action-btn {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  border: none;
  background: transparent;
  color: var(--cf-text-muted);
  cursor: pointer;
  transition: background var(--mo-fast), color var(--mo-fast);
}

.row-action-btn:hover {
  background: var(--cf-surface-sunk);
  color: var(--cf-text);
}

.row-action-btn--danger:hover { color: var(--cf-status-stuck); }

/* ── Filter pill count badge ── */

.filter-pill-count {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  border-radius: var(--r-xs);
  background: var(--cf-surface-sunk);
  color: var(--cf-text-muted);
  font-variant-numeric: tabular-nums;
}

.filter-pill.active .filter-pill-count {
  background: rgba(255, 255, 255, 0.25);
  color: inherit;
}

/* ────────────────────────────────────────────────────────────────────
   Settings hub — left-nav + content layout
   ──────────────────────────────────────────────────────────────────── */

.settings-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
  max-width: 1120px;
}

@media (max-width: 900px) {
  .settings-layout { grid-template-columns: 1fr; gap: var(--sp-4); }
}

.settings-nav {
  position: sticky;
  top: 64px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.settings-nav-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.settings-nav-label {
  font: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cf-text-subtle);
  padding: 0 10px;
  margin-bottom: 4px;
}

.settings-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  color: var(--cf-text-muted);
  text-decoration: none;
  font: 500 13px/1 var(--cf-font);
  transition: background var(--mo-fast), color var(--mo-fast);
}

.settings-nav-item:hover {
  background: var(--cf-surface-sunk);
  color: var(--cf-text);
}

.settings-nav-item.is-active {
  background: var(--cf-primary-soft);
  color: var(--cf-primary);
  font-weight: 600;
}

.settings-nav-item.is-active i {
  color: var(--cf-primary);
}

/* ── Settings content column ── */

.settings-content {
  min-width: 0;
  max-width: 720px;
}

.settings-section-head {
  margin-bottom: var(--sp-4);
}

.settings-section-title {
  font: var(--t-h2);
  font-family: var(--cf-font-serif);
  font-size: 18px;
  color: var(--cf-text);
  margin: 0 0 4px;
}

.settings-section-sub {
  font: var(--t-sm);
  color: var(--cf-text-muted);
  margin: 0;
}

/* ── Settings card ── */

.settings-card {
  background: var(--cf-surface);
  border-radius: var(--r-md);
  box-shadow: var(--cf-shadow-card);
  margin: 0;
  display: block;
}

.settings-card + .settings-card {
  margin-top: var(--sp-4);
}

.settings-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: 14px 16px;
  border-bottom: 1px solid var(--cf-border);
}

.settings-card-head--avatar {
  align-items: center;
  gap: var(--sp-3);
}

.settings-card-title {
  font: var(--t-h3);
  color: var(--cf-text);
  margin: 0;
}

.settings-card-sub {
  font: var(--t-sm);
  color: var(--cf-text-muted);
  margin: 2px 0 0;
}

.settings-card-meta {
  font: var(--t-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cf-text-subtle);
  white-space: nowrap;
}

.settings-card-body { padding: 16px; }

.settings-card-foot {
  padding: 12px 16px;
  border-top: 1px solid var(--cf-border);
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  background: var(--cf-surface-sunk);
  border-bottom-left-radius: var(--r-md);
  border-bottom-right-radius: var(--r-md);
}

/* Two-column field grid inside a settings card body */
.settings-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3) var(--sp-4);
}

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

/* Input with $ prefix and /hr suffix — used by the rates form */
.input-with-prefix {
  position: relative;
  display: flex;
  align-items: center;
}

.input-with-prefix .input-prefix,
.input-with-prefix .input-suffix {
  position: absolute;
  color: var(--cf-text-muted);
  font: 500 13px/1 var(--cf-font-mono);
  pointer-events: none;
}

.input-with-prefix .input-prefix { left: 12px; }
.input-with-prefix .input-suffix { right: 12px; }

.input-with-prefix .form-input {
  padding-left: 26px;
  padding-right: 44px;
  font-family: var(--cf-font-mono);
  font-variant-numeric: tabular-nums;
}

/* Notification-pref row */
.settings-pref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 12px 16px;
  border-bottom: 1px solid var(--cf-border);
}

.settings-pref-row:last-child { border-bottom: none; }

.settings-pref-label {
  font: var(--t-body);
  color: var(--cf-text);
  cursor: pointer;
}

.form-help {
  font: var(--t-sm);
  color: var(--cf-text-muted);
  margin: 4px 0 0;
}

/* ========================================================================
   BOARDS (Phase 1 — read-only kanban)
   Column colour tokens map to scope statuses:
     slate -> NOT_STARTED, blue -> IN_PROGRESS,
     amber -> IN_REVIEW,   green -> COMPLETED
   ======================================================================== */

/* -- Page shell ----------------------------------------------------------- */
.board-page {
  padding: var(--sp-4);
  max-width: 100%;
}

.board-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5, 24px);
  flex-wrap: wrap;
}
.board-header__left {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.board-header__titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.board-header__title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--cf-text-primary);
  line-height: 1.2;
}
.board-header__sub {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--cf-text-muted);
}
.board-header__divider { opacity: 0.6; }
.board-header__right {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* -- Phase filter bar ---------------------------------------------------- */
.board-filters {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.board-filter {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.board-filter__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--cf-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.board-filter__select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.board-filter__select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--cf-surface);
  border: 1px solid var(--cf-border);
  border-radius: 8px;
  padding: 6px 30px 6px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--cf-text-primary);
  cursor: pointer;
  min-width: 180px;
  font-family: inherit;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.board-filter__select:hover { border-color: var(--cf-border-strong); }
.board-filter__select:focus {
  outline: none;
  border-color: var(--cf-status-info);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}
.board-filter__chev {
  position: absolute;
  right: 10px;
  pointer-events: none;
  color: var(--cf-text-muted);
}
.board-filter__clear {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--cf-text-muted);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background-color 120ms ease, color 120ms ease;
}
.board-filter__clear:hover {
  background: var(--cf-bg-hover);
  color: var(--cf-text-primary);
}

/* -- Board container & column grid -------------------------------------- */
.board-scroll {
  overflow-x: auto;
  background: var(--cf-bg-base);
  border: 1px solid var(--cf-border);
  border-radius: 14px;
  padding: var(--sp-3);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.board-columns {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 1fr);
  gap: var(--sp-3);
  align-items: start;
  min-width: 100%;
}

.board-column {
  display: flex;
  flex-direction: column;
  min-height: 200px;
  background: rgba(var(--board-accent-rgb), 0.05);
  border: 1px solid rgba(var(--board-accent-rgb), 0.10);
  border-radius: 12px;
  padding: var(--sp-3);
  gap: var(--sp-2);
}
[data-theme="light"] .board-column {
  background: rgba(var(--board-accent-rgb), 0.07);
}
.board-column__header {
  position: sticky;
  top: 0;
  z-index: 1;
  padding-bottom: 4px;
}
.board-column__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.board-column__empty {
  padding: var(--sp-3);
  text-align: center;
  font-size: 11px;
  color: var(--cf-text-muted);
  border: 1px dashed rgba(var(--board-accent-rgb), 0.25);
  border-radius: 8px;
  font-style: italic;
}

/* Column header pill (lives in .board-column__header) */
.board-col-head__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  background: rgba(var(--board-accent-rgb), 0.18);
  border: 1px solid rgba(var(--board-accent-rgb), 0.25);
}
.board-col-head__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--board-accent);
  box-shadow: 0 0 0 3px rgba(var(--board-accent-rgb), 0.15);
  flex-shrink: 0;
}
.board-col-head__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--cf-text-primary);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.board-col-head__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  font-size: 10px;
  font-weight: 700;
  color: var(--board-accent);
  background: rgba(var(--board-accent-rgb), 0.25);
  border-radius: 999px;
  letter-spacing: 0;
}

/* -- Card ----------------------------------------------------------------- */
.board-card {
  position: relative;
  display: block;
  width: 100%;
  background: var(--cf-surface);
  border: 1px solid var(--cf-border);
  border-radius: 10px;
  padding: 0;
  margin: 0;
  text-align: left;
  text-decoration: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.02);
  transition:
    transform 120ms ease,
    box-shadow 150ms ease,
    border-color 120ms ease;
}
.board-card:focus-visible {
  outline: none;
  border-color: var(--cf-status-info);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

/* -- Sortable drag states ------------------------------------------------ */
/* Make the whole card the drag handle — Lucide replaces <i> tags with SVG
   elements that absorb mousedown and block Sortable's pickup, leaving the
   plain-text title as the only reliable grab target. Children stay visible
   but transparent to mouse events; clicks and drags register on the card. */
.board-page:not([data-locked="true"]) .board-card {
  cursor: grab;
}
.board-card * {
  pointer-events: none;
}
.board-card[data-card-locked="true"] {
  cursor: not-allowed;
  opacity: 0.7;
}
.board-card--chosen {
  cursor: grabbing !important;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35), 0 4px 10px rgba(0, 0, 0, 0.2) !important;
}
[data-theme="light"] .board-card--chosen {
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.18), 0 4px 10px rgba(15, 23, 42, 0.1) !important;
}
.board-card--ghost {
  opacity: 0.35;
  background: rgba(var(--board-accent-rgb, 148, 163, 184), 0.18);
  filter: grayscale(0.4);
}
/* NOTE: do NOT set `transform` on --dragging — Sortable uses transform
   internally to position the card under the cursor in forceFallback mode,
   and any author transform here clobbers it (card rotates but won't move). */
.board-card--dragging {
  pointer-events: none;
  opacity: 0.95;
}
/* Highlight the column being hovered with a card mid-drag. */
.board-column__body.sortable-receiving {
  background: rgba(var(--board-accent-rgb), 0.10);
  border-radius: 8px;
}
[data-theme="light"] .board-card {
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
}
.board-card:hover {
  transform: translateY(-1px);
  border-color: var(--cf-border-strong);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.05);
}
[data-theme="light"] .board-card:hover {
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
}
.board-card:active { transform: translateY(0); }

/* Top accent strip — coloured by priority/state */
.board-card__topline {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: transparent;
}
.board-card--prio-urgent    .board-card__topline { background: var(--cf-status-stuck); }
.board-card--prio-important .board-card__topline { background: var(--cf-status-working); }
.board-card--prio-nice_to_have .board-card__topline { background: var(--cf-status-info); opacity: 0.6; }
.board-card--stuck          .board-card__topline { background: var(--cf-status-stuck); }
.board-card--disputed       .board-card__topline { background: var(--cf-status-stuck); }
.board-card--blocked        .board-card__topline { background: var(--cf-text-muted); }
.board-card--done           .board-card__topline { background: var(--cf-status-done); }
.board-card--done           { opacity: 0.85; }

/* Corner status icon (top-right) */
.board-card__corner {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.board-card__corner--done   { background: rgba(34, 197, 94, 0.16); color: var(--cf-status-done); }
.board-card__corner--warn   { background: rgba(245, 158, 11, 0.16); color: var(--cf-status-working); }
.board-card__corner--muted  { background: rgba(148, 163, 184, 0.16); color: var(--cf-text-muted); }

/* Card body */
.board-card__body {
  padding: 12px 14px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.board-card__title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--cf-text-primary);
  line-height: 1.4;
  letter-spacing: -0.005em;
  padding-right: 24px; /* leave room for corner icon */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.board-card__phase {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--cf-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  background: var(--cf-bg-hover);
  border-radius: 4px;
  align-self: flex-start;
}

.board-card__pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.board-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  font-size: 11px;
  color: var(--cf-text-muted);
}
.board-card__icons {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.board-card__sub-indicator {
  display: inline-flex;
  align-items: center;
  color: var(--cf-text-muted);
  opacity: 0.7;
}

/* -- Generic pill --------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.pill--danger { background: rgba(239, 68, 68, 0.12); color: var(--cf-status-stuck); }
.pill--warn   { background: rgba(245, 158, 11, 0.14); color: var(--cf-status-working); }
.pill--muted  { background: rgba(148, 163, 184, 0.16); color: var(--cf-text-muted); }
.pill--info   { background: rgba(59, 130, 246, 0.14); color: var(--cf-status-info); }
.pill--ghost {
  background: transparent;
  border: 1px solid var(--cf-border);
  color: var(--cf-text-secondary);
}
.pill--overdue {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.25);
  color: var(--cf-status-stuck);
  font-weight: 700;
}
.pill--readonly {
  font-style: italic;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

/* -- Avatar (xs variant for cards) --------------------------------------- */
.avatar.avatar--xs {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--cf-bg-hover);
  color: var(--cf-text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
  border: 1.5px solid var(--cf-surface);
  box-shadow: 0 0 0 1px var(--cf-border);
}
.avatar--empty {
  background: transparent;
  color: var(--cf-text-muted);
  box-shadow: 0 0 0 1px var(--cf-border) inset;
  border-color: transparent;
}

/* -- Locked banner badge ------------------------------------------------- */
.badge--locked {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.12);
  color: var(--cf-status-stuck);
  letter-spacing: 0.02em;
}

/* -- Task panel (V3 §6 right slide-over, replaces the prior center modal)
   The hosted scope-item panel template owns its own header / body / footer
   chrome — the slide-over is just the framing container (backdrop, slide
   animation, drop shadow). No author transforms inside; Sortable doesn't
   apply here but the principle from the boards drag work still applies. */
.card-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: transparent;
  pointer-events: none;
  transition: background-color var(--mo-mid) var(--mo-ease);
}
.card-modal-backdrop[data-open="true"] {
  background: rgba(24, 24, 27, 0.32);
  pointer-events: auto;
}
[data-theme="light"] .card-modal-backdrop[data-open="true"] {
  background: rgba(15, 23, 42, 0.28);
}

.card-modal {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 640px;
  max-width: 100vw;
  background: var(--cf-surface);
  border-left: 1px solid var(--cf-border-strong);
  box-shadow: -20px 0 48px -8px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(100%);
  transition: transform var(--mo-mid) var(--mo-ease);
  will-change: transform;
}
.card-modal[data-open="true"] {
  transform: translateX(0);
}
[data-theme="light"] .card-modal {
  background: #ffffff;
  box-shadow: -20px 0 48px -8px rgba(15, 23, 42, 0.18);
}

/* The HTMX-swap target spans the full panel height so the hosted
   `panel-header` / `panel-body` / `panel-footer` flex children handle
   their own sticky/scroll behaviour rather than the whole panel
   scrolling as one. */
.card-modal #panel-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.card-modal__loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--cf-text-muted);
  padding: var(--sp-5);
}

@keyframes spin { to { transform: rotate(360deg); } }
.opacity-0 { opacity: 0; }
.opacity-100 { opacity: 1; }
.scale-95 { transform: scale(0.95); }
.scale-100 { transform: scale(1); }

/* -- Board toast (drag failures, etc) ----------------------------------- */
.board-toast {
  position: fixed;
  bottom: var(--sp-4);
  right: var(--sp-4);
  z-index: 1100;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--cf-surface);
  border: 1px solid var(--cf-border);
  border-left: 3px solid var(--cf-status-stuck);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
  font-size: 12px;
  color: var(--cf-text-primary);
  max-width: 360px;
}
[data-theme="light"] .board-toast {
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

/* ========================================================================
   Sunk-Cost Mirror modal (Execution Plan Item 2)
   ======================================================================== */

.sc-mirror {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.sc-mirror__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(4px);
}
.sc-mirror__panel {
    position: relative;
    width: 100%;
    max-width: 520px;
    background: var(--cf-surface);
    border: 1px solid var(--cf-border-strong, var(--cf-border, #2a2a2e));
    border-radius: 16px;
    padding: 40px 36px 32px;
    box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.5);
    text-align: center;
}
.sc-mirror__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    margin: 0 auto 20px;
}
.sc-mirror__title {
    font: 700 22px/1.3 var(--cf-font);
    color: var(--cf-text);
    margin: 0 0 14px;
    letter-spacing: -0.01em;
}
.sc-mirror__amount {
    display: inline-block;
    color: #ef4444;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    margin-left: 6px;
}
.sc-mirror__sub {
    font: 500 15px/1.55 var(--cf-font);
    color: var(--cf-text);
    margin: 0 0 12px;
}
.sc-mirror__hint {
    font: 400 13px/1.55 var(--cf-font);
    color: var(--cf-text-muted);
    margin: 0 0 24px;
}
.sc-mirror__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}
.sc-mirror__bill {
    width: 100%;
    height: 44px;
    font-size: 15px;
    font-weight: 600;
}
.sc-mirror__absorb {
    width: 100%;
    height: 40px;
    color: var(--cf-text-muted);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
.sc-mirror__absorb:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.sc-mirror__close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--cf-text-muted);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}
.sc-mirror__close:hover {
    background: var(--cf-surface-hover);
    color: var(--cf-text);
}

/* Cash actions card */
.cash-card { margin-bottom: var(--space-4); }
.cash-head { display:flex; align-items:center; gap:6px; font-size:14px; margin-bottom:var(--space-3); }
.cash-head strong { font-size:16px; }
.cash-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.cash-row { display:grid; grid-template-columns: 110px 1fr auto auto auto; gap:var(--space-3); align-items:center;
padding:6px 8px; border-radius:var(--radius-md); background:var(--surface-2); font-size:13px; }
.cash-row--chase_overdue { border-left:3px solid var(--danger); }
.cash-row--send_invoice { border-left:3px solid var(--warning); }
.cash-row--request_signoff { border-left:3px solid var(--info); }
.cash-row--coming_due { border-left:3px solid var(--text-tertiary); opacity:.8; }
.cash-kind { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-tertiary); }
.cash-amount { font-variant-numeric: tabular-nums; font-weight:600; }
.cash-late { font-size:11px; color:var(--text-tertiary); }
.cash-actions-btns { display:flex; gap:4px; }
.cash-empty { font-size:13px; color:var(--text-tertiary); display:flex; align-items:center; gap:6px; }
@media (max-width: 720px) { .cash-row { grid-template-columns: 1fr 1fr; } .cash-actions-btns { grid-column: 1 / -1; }
}