/* ============================================
   EosLog Design System
   ============================================ */

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

/* --- Design Tokens --- */
:root {
  /* Colors — Navy primary, warm neutrals */
  --primary: #294887;
  --primary-dark: #1d3466;
  --primary-light: #eaeef7;
  --success: #059669;
  --success-light: #ecfdf5;
  --warning: #d97706;
  --warning-light: #fffbeb;
  --danger: #dc2626;
  --danger-light: #fef2f2;
  --info: #0891b2;
  --info-light: #ecfeff;

  /* Neutrals */
  --bg: #f5f5f4;
  --bg-secondary: #fafaf9;
  --surface: #ffffff;
  --border: #e7e5e4;
  --border-hover: #d6d3d1;
  --text: #1c1917;
  --text-secondary: #57534e;
  --text-light: #78716c;
  --text-inverse: #ffffff;
  --row-hover: #f1f5f9;

  /* Spacing (4px grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Typography */
  --font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.07), 0 4px 6px -4px rgba(0,0,0,0.04);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04);

  /* Transitions */
  --transition-fast: 0.12s ease;
  --transition-base: 0.2s ease;

  /* Tailwind-compatible color aliases */
  --gray-50: #fafaf9;
  --gray-100: #f5f5f4;
  --gray-200: #e7e5e4;
  --gray-300: #d6d3d1;
  --gray-400: #a8a29e;
  --gray-500: #78716c;
  --gray-600: #57534e;
  --gray-700: #44403c;
  --gray-800: #292524;
  --gray-900: #1c1917;
  --blue-50: #eaeef7;
  --blue-100: #c9d5e8;
  --blue-500: #3a5ea3;
  --blue-600: #294887;
  --green-50: #ecfdf5;
  --green-500: #10b981;
  --green-600: #059669;
  --green-700: #047857;
  --red-50: #fef2f2;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --red-700: #b91c1c;
  --amber-50: #fffbeb;
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --orange-500: #f97316;
  --purple-50: #faf5ff;
  --purple-100: #ede9fe;
  --purple-500: #8b5cf6;
  --purple-600: #7c3aed;
  --purple-900: #4c1d95;
  --primary-50: #eaeef7;
  --primary-100: #c9d5e8;
  --primary-400: #5672a3;
  --primary-500: #3a5ea3;
  --primary-600: #294887;
  --primary-700: #1d3466;
}

/* --- Base --- */
body {
  font-family: var(--font-family);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

/* ============================================
   LAYOUT
   ============================================ */
.app-container {
  display: flex;
  min-height: 100vh;
}

/* --- Sidebar --- */
.sidebar {
  width: 248px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  box-shadow: 1px 0 3px rgba(0,0,0,0.03);
}

.sidebar-header {
  height: 60px;
  padding: 0 var(--space-5);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
}

.logo svg {
  color: var(--primary);
}

.logo-icon {
  width: 32px;
  height: 32px;
  background: var(--primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 16px;
}

.sidebar-nav {
  flex: 1;
  padding: var(--space-4) var(--space-3);
  overflow-y: auto;
}

.nav-section {
  margin-bottom: var(--space-6);
}

.nav-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-light);
  padding: 0 var(--space-3);
  margin-bottom: var(--space-2);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all var(--transition-fast);
}

.nav-item:hover {
  background: var(--bg);
  color: var(--text);
  text-decoration: none;
}

.nav-item.active {
  background: var(--primary-light);
  color: var(--primary);
  border-left: 3px solid var(--primary);
  padding-left: calc(var(--space-3) - 3px);
}

.nav-item.active:hover {
  background: #dde4f1;
  color: var(--primary);
}

.nav-item svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.nav-item:hover svg {
  opacity: 1;
}

.nav-item.active svg {
  opacity: 1;
}

.nav-divider {
  height: 1px;
  background: var(--border);
  margin: var(--space-3) var(--space-3);
}

/* --- Main Wrapper --- */
.main-wrapper {
  flex: 1;
  /* Without min-width:0, this flex child's auto-minimum becomes the
     min-content of its descendants — any wide nested content (long
     tables, the inbox status stepper, embedded chevron bars) would
     bubble up and push the whole page wider than the viewport,
     producing a horizontal page scrollbar on mobile. */
  min-width: 0;
  margin-left: 248px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* --- Header --- */
.header {
  height: 60px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-6);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.header-left {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.search-box {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  width: 320px;
  transition: border-color var(--transition-fast);
}

.search-box svg {
  color: var(--text-light);
  flex-shrink: 0;
}

.search-box:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

.search-box:focus-within svg {
  color: var(--primary);
}

.search-box input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 14px;
  width: 100%;
  color: var(--text);
}

.search-box input::placeholder {
  color: var(--text-light);
}

.header-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.header-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}

.header-btn svg {
  opacity: 0.7;
}

.header-btn:hover {
  background: var(--bg);
  color: var(--text);
}

.header-btn:hover svg {
  opacity: 1;
}

/* Audit §3.10 — hidden by default; revealed in the mobile @media block
   below. Pairs with .header-left being hidden on mobile so phone users
   keep a search affordance. */
.header-search-mobile {
  display: none;
}

/* User Dropdown */
.user-dropdown {
  position: relative;
}

.user-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}

.user-dropdown-trigger:hover {
  background: var(--bg);
  color: var(--text);
}

.user-dropdown-trigger .user-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.user-dropdown-trigger svg {
  opacity: 0.5;
  transition: transform var(--transition-fast);
}

.user-dropdown.is-open .user-dropdown-trigger svg {
  transform: rotate(180deg);
}

/* Dropdown Menu */
.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 280px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all var(--transition-fast);
  z-index: 1000;
  overflow: hidden;
}

.user-dropdown.is-open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-header {
  padding: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.dropdown-user-info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.dropdown-user-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
  letter-spacing: 0.5px;
}

.dropdown-user-details {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.dropdown-user-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-user-email {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-body {
  padding: var(--space-2) 0;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: all var(--transition-fast);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
}

.dropdown-item:hover {
  background: var(--bg);
  color: var(--text);
  text-decoration: none;
}

.dropdown-item svg {
  flex-shrink: 0;
  opacity: 0.6;
}

.dropdown-item:hover svg {
  opacity: 1;
}

.dropdown-item.button_to {
  padding: 0;
}

.dropdown-item.button_to button {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  width: 100%;
  text-align: left;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

.dropdown-item.button_to button:hover {
  background: var(--bg);
  color: var(--text);
}

.dropdown-item-logout {
  color: var(--danger);
}

.dropdown-item-logout:hover {
  background: var(--danger-light);
  color: var(--danger);
}

.dropdown-item-logout svg {
  opacity: 0.7;
}

.dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: var(--space-2) 0;
}

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

.dropdown-item-danger:hover {
  background: var(--danger-light);
  color: var(--danger);
}

.dropdown-item-danger svg {
  opacity: 0.7;
}

/* --- Main Content --- */
.main-content {
  flex: 1;
  /* Same reason as .main-wrapper above — flex children default to
     min-width: auto which propagates inner content's intrinsic min,
     and that's what was making the inbox right pane (max-content
     status stepper) push the whole document beyond the viewport. */
  min-width: 0;
  padding: var(--space-8) var(--space-10);
  max-width: 1400px;
  width: 100%;
}

/* --- Embed mode (homepage iframe) --- */
/* Demo::ReadOnlyController#embed_mode? toggles `.app-container-embed`
   when /demo/<slug>/...?embed=1 is requested. The web header + footer are
   removed by the layout (the demo banner is also suppressed by the
   demo controller); the sidebar stays visible so visitors can click
   through, with the Inbox nav-item pulsing per HOMEPAGE_V2_BUILD_PLAN
   T2.5. We just tighten the content padding so the dashboard density
   reads better inside the iframe frame. */
.app-container-embed .main-content {
  padding: var(--space-4) var(--space-6);
}

/* Pulse attractor on the Inbox sidebar nav-item — see
   HOMEPAGE_V2_BUILD_PLAN.md T2.5. Only emitted by the layout when
   embed_mode? && controller_name != 'inbox', so it pulses for the
   homepage-iframe visitor on the dashboard but stops the moment
   they actually click into the inbox. */
.nav-item.nav-item-pulse {
  position: relative;
  background: rgba(245, 165, 36, 0.08);
}
.nav-item.nav-item-pulse::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 0 0 0 rgba(245, 165, 36, 0.55);
  animation: navItemPulseRing 2s infinite;
  pointer-events: none;
}
@keyframes navItemPulseRing {
  0%   { box-shadow: 0 0 0 0 rgba(245, 165, 36, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(245, 165, 36, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 165, 36, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-item.nav-item-pulse::before { animation: none; }
}

/* --- Footer --- */
.footer {
  height: 44px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-10);
  font-size: 12px;
  color: var(--text-light);
  margin-top: auto;
}

.footer-links {
  display: flex;
  gap: var(--space-4);
}

.footer-links a {
  color: var(--text-light);
  text-decoration: none;
}
.footer-links a:hover {
  color: var(--text-secondary);
}

/* ============================================
   PAGE HEADER
   ============================================ */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
  gap: var(--space-4);
}

.page-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
}

.page-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: var(--space-1);
}

.page-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all var(--transition-fast);
  text-decoration: none;
  line-height: 1.4;
  white-space: nowrap;
  font-family: inherit;
}
.btn:hover {
  text-decoration: none;
}

.btn-primary {
  background: var(--primary);
  color: var(--text-inverse);
}
.btn-primary:hover {
  background: var(--primary-dark);
  text-decoration: none;
}

.btn-success {
  background: var(--success);
  color: var(--text-inverse);
}
.btn-success:hover {
  background: #15803d;
  text-decoration: none;
}

.btn-danger {
  background: var(--danger);
  color: var(--text-inverse);
}
.btn-danger:hover {
  background: #b91c1c;
  text-decoration: none;
}

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
.btn-secondary:hover {
  background: var(--bg);
  border-color: var(--border-hover);
  text-decoration: none;
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
}
.btn-ghost:hover {
  background: var(--bg);
  color: var(--text);
  text-decoration: none;
}

.btn-sm {
  padding: var(--space-1) var(--space-3);
  font-size: 13px;
}

.btn-xs {
  padding: 2px 6px;
  font-size: 12px;
  border-radius: var(--radius-sm);
}

.btn-lg {
  padding: var(--space-3) var(--space-6);
  font-size: 16px;
}

.btn-full {
  width: 100%;
}

/* ============================================
   CARDS
   ============================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
}

.card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.card-body {
  padding: var(--space-5);
}
.card-body-flush {
  padding: 0;
}

.card-footer {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border);
  background: var(--bg-secondary);
}

/* --- Stat Cards --- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.stat-label {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
}

.stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.stat-change {
  font-size: 12px;
  margin-top: var(--space-1);
  font-weight: 500;
}

.stat-change.positive {
  color: var(--success);
}

.stat-change.negative {
  color: var(--danger);
}

/* ============================================
   TABLES
   ============================================ */
.table-container {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

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

thead th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-light);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
}

tbody td {
  padding: var(--space-3) var(--space-4);
  font-size: 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

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

tbody tr {
  transition: background var(--transition-fast);
}

tbody tr:hover td {
  background: var(--row-hover);
}

tbody tr.clickable {
  cursor: pointer;
}

.table-link {
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
}
.table-link:hover {
  color: var(--primary);
  text-decoration: none;
}

.table-sort-link {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  transition: color 0.15s;
}
.table-sort-link:hover {
  color: var(--primary);
  text-decoration: none;
}

.table-empty {
  text-align: center;
  color: var(--text-light);
  padding: var(--space-10) var(--space-4);
}

/* ============================================
   STATUS BADGES
   ============================================ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

.badge-primary {
  background: var(--primary-light);
  color: var(--primary-dark);
}

.badge-success {
  background: var(--success-light);
  color: #15803d;
}

.badge-warning {
  background: var(--warning-light);
  color: #92400e;
}

.badge-danger {
  background: var(--danger-light);
  color: #b91c1c;
}

.badge-info {
  background: var(--info-light);
  color: #0e7490;
}

.badge-neutral {
  background: var(--bg);
  color: var(--text-secondary);
}

/* Status-specific (for jobs) */
.status-new { background: var(--primary-light); color: var(--primary-dark); }
.status-scheduled { background: var(--warning-light); color: #92400e; }
.status-en_route { background: var(--primary-light); color: var(--primary-dark); }
.status-arrived { background: #fce7f3; color: #be185d; }
.status-in_progress { background: var(--primary-light); color: var(--primary-dark); }
.status-on_hold { background: var(--warning-light); color: #92400e; }
.status-completed { background: var(--success-light); color: #15803d; }
.status-cancelled { background: var(--danger-light); color: #b91c1c; }
.status-pending { background: var(--bg); color: var(--text-secondary); }
.status-skipped { background: var(--bg); color: var(--text-light); }

/* Status-specific (for invoices) */
.status-draft { background: var(--bg); color: var(--text-secondary); }
.status-sent { background: #dbeafe; color: #1d4ed8; }
.status-viewed { background: var(--primary-light); color: var(--primary-dark); }
.status-paid { background: var(--success-light); color: #15803d; }
.status-partially_paid { background: #fef9c3; color: #854d0e; }
.status-overdue { background: var(--danger-light); color: #b91c1c; }

/* ============================================
   FORMS
   ============================================ */
.form-group {
  margin-bottom: var(--space-4);
}

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
}

.form-input,
.input,
select.form-input,
select.input,
textarea.form-input,
textarea.input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  line-height: 1.5;
}

.form-input:focus,
.input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

/* Global keyboard-focus ring — applies to buttons, links, .btn-*, etc.
   Form inputs above use a ring-style focus and opt out of this with
   `outline: none`. Audit §3.3 — a11y baseline. */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: inherit;
}

/* Skip-to-content link — visually hidden until focused via Tab.
   Audit §3.5 — a11y baseline. */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  padding: var(--space-2) var(--space-4);
  background: var(--primary);
  color: var(--text-inverse);
  text-decoration: none;
  font-weight: 600;
  border-bottom-right-radius: var(--radius-md);
  transform: translateY(-200%);
  transition: transform var(--transition-fast);
}

.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--text-inverse);
  outline-offset: -4px;
}

.form-input::placeholder,
.input::placeholder {
  color: var(--text-light);
}

.form-hint {
  font-size: 12px;
  color: var(--text-light);
  margin-top: var(--space-1);
}

.form-error {
  font-size: 12px;
  color: var(--danger);
  margin-top: var(--space-1);
}

/* Checkbox & Radio */
.form-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
}

.form-check input[type="checkbox"],
.form-check input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}

/* Inline form row */
.form-row {
  display: grid;
  gap: var(--space-4);
}

.form-row-2 {
  grid-template-columns: 1fr 1fr;
}

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

.form-row-4 {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

/* ============================================
   DETAIL LAYOUTS
   ============================================ */
.detail-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-6);
}

.detail-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.detail-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Detail field */
.detail-field {
  margin-bottom: var(--space-4);
}
.detail-field:last-child {
  margin-bottom: 0;
}

.detail-label {
  font-size: 12px;
  color: var(--text-light);
  margin-bottom: 2px;
  font-weight: 500;
}

.detail-value {
  font-size: 14px;
  color: var(--text);
}

/* ============================================
   INLINE FORMS (add task, line item, etc.)
   ============================================ */
.inline-form {
  display: none;
  padding: var(--space-4);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

.inline-form-grid {
  display: grid;
  gap: var(--space-3);
  align-items: end;
}

.inline-form-checks {
  margin-top: var(--space-2);
  display: flex;
  gap: var(--space-4);
}

/* ============================================
   LIST ITEMS (tasks, workers, etc.)
   ============================================ */
.list-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}

.list-item:hover {
  background: var(--bg);
}

.list-item-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 13px;
}

.list-item-icon.done {
  background: var(--success);
  color: white;
}

.list-item-icon.pending {
  background: var(--border);
  color: var(--text-light);
}

.list-item-content {
  flex: 1;
  min-width: 0;
}

.list-item-title {
  font-weight: 500;
  font-size: 14px;
}

.list-item-desc {
  font-size: 13px;
  color: var(--text-secondary);
}

.list-item-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.list-item-remove {
  background: none;
  border: none;
  color: var(--text-light);
  cursor: pointer;
  font-size: 18px;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  line-height: 1;
}

.list-item-remove:hover {
  color: var(--danger);
  background: var(--danger-light);
}

/* Worker avatar */
.worker-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

/* ============================================
   UNIFIED LINE ITEMS SECTION (Jobber/HCP Style)
   ============================================ */
.line-items-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.line-items-heading {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--text);
}

/* Line Items Table */
.line-items-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
  table-layout: fixed;
}

.line-items-table th {
  text-align: left;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: 0.5rem;
  border-bottom: 2px solid var(--border);
  overflow: hidden;
  text-overflow: ellipsis;
}

.line-items-table td {
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
  overflow: hidden;
}

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

.line-items-table input,
.line-items-table select {
  width: 100%;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.875rem;
  background: var(--bg);
  color: var(--text);
  box-sizing: border-box;
  max-width: 100%;
}

.line-items-table input:focus,
.line-items-table select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-light);
}

.line-items-table input[type="number"] {
  width: 80px;
  text-align: right;
  -moz-appearance: textfield;
}

.line-items-table input[type="number"]::-webkit-inner-spin-button,
.line-items-table input[type="number"]::-webkit-outer-spin-button {
  opacity: 1;
}

.line-item-total {
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.custom-name-field {
  margin-top: 4px;
}

/* Service dropdown full width */
.line-items-table td select.line-item-service {
  width: 100%;
  min-width: 280px;
  box-sizing: border-box;
}

/* Add Item Button */
.line-items-add {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--primary);
  font-weight: 500;
  font-size: 0.875rem;
  cursor: pointer;
  padding: 0.5rem 0;
  border: none;
  background: none;
  transition: color 0.15s ease;
}

.line-items-add:hover {
  color: var(--primary-dark);
}

.line-items-add span {
  font-size: 1.125rem;
  font-weight: 600;
}

/* Remove Item Button */
.line-item-remove {
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border: none;
  background: none;
  border-radius: 4px;
  font-size: 0.875rem;
  transition: all 0.15s ease;
}

.line-item-remove:hover {
  color: var(--danger);
  background: var(--danger-light, rgba(239, 68, 68, 0.1));
}

/* Totals Section */
.line-items-totals {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 2px solid var(--border);
}

.total-row {
  display: flex;
  justify-content: space-between;
  width: 280px;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

.total-row .label {
  color: var(--text-muted);
}

.total-row .value {
  font-weight: 500;
  color: var(--text);
}

.total-row.discount .value {
  color: var(--danger);
}

.total-row.grand-total {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary);
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
  margin-top: 0.25rem;
}

/* Discount & Tax Controls */
.line-items-controls {
  display: flex;
  gap: 2rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.control-group {
  flex: 1;
  max-width: 280px;
}

.control-group .form-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 0.375rem;
}

/* Discount Row */
.discount-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.discount-row input {
  width: 80px;
  text-align: right;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.875rem;
  background: var(--bg);
  color: var(--text);
}

.discount-row select {
  width: 180px;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.875rem;
  background: var(--bg);
  color: var(--text);
}

/* Tax Rate Selector */
.tax-rate-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tax-rate-row select {
  flex: 1;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.875rem;
  background: var(--bg);
  color: var(--text);
}

.custom-tax-input {
  width: 80px !important;
  text-align: right;
}

/* Legacy totals styles (for backward compatibility) */
.totals-row {
  border-top: 2px solid var(--border);
}

.totals-label {
  color: var(--text-secondary);
  font-size: 13px;
}

.totals-value {
  font-weight: 600;
}

.text-revenue {
  color: var(--primary);
}

.text-profit {
  color: var(--success);
}

/* ============================================
   ALERTS
   ============================================ */
.alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: 14px;
  margin-bottom: var(--space-4);
}
.alert ul {
  list-style: disc;
  padding-left: 20px;
  margin: 8px 0 0 0;
}
.alert ul li {
  margin-bottom: 2px;
}

.alert-success {
  background: var(--success-light);
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.alert-error {
  background: var(--danger-light);
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.alert-warning {
  background: var(--warning-light);
  color: #92400e;
  border: 1px solid #fde68a;
}

.alert-info {
  background: var(--info-light);
  color: #0e7490;
  border: 1px solid #a5f3fc;
}

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */
.toast {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  animation: toast-slide-in 0.3s ease-out;
  max-width: 420px;
}

.toast-success {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.toast-error {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.toast-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  opacity: 0.5;
  margin-left: auto;
  padding: 0 4px;
  color: inherit;
}

.toast-close:hover { opacity: 1; }

@keyframes toast-slide-in {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes toast-slide-out {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100%); opacity: 0; }
}

.toast.toast-exit {
  animation: toast-slide-out 0.3s ease-in forwards;
}

/* ============================================
   LOGIN PAGE
   ============================================ */
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  padding: var(--space-6);
}

.login-card {
  background: var(--surface);
  padding: var(--space-10);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  width: 100%;
  max-width: 400px;
  box-shadow: var(--shadow-lg);
}

.login-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}

.login-logo .logo-icon {
  width: 40px;
  height: 40px;
  font-size: 20px;
}

.login-logo .logo-text {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
}

.login-title {
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  margin-bottom: var(--space-1);
}

.login-subtitle {
  text-align: center;
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: var(--space-6);
}

.login-form .form-group {
  margin-bottom: var(--space-4);
}

.login-form .btn {
  margin-top: var(--space-4);
}

.login-footer {
  text-align: center;
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.login-footer p {
  color: var(--text-secondary);
  font-size: 14px;
}

.login-footer a {
  color: var(--primary);
  font-weight: 500;
  text-decoration: none;
}

.login-footer a:hover {
  text-decoration: underline;
}

.form-row {
  display: flex;
  gap: var(--space-4);
}

.form-row .form-group {
  flex: 1;
}

/* ============================================
   AUTH SPLIT LAYOUT (signup / signin / passwords)
   ============================================ */
.auth-split {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(380px, 480px) 1fr;
  background: var(--bg);
}

.auth-panel {
  position: relative;
  background: linear-gradient(160deg, var(--primary-700) 0%, var(--primary-600) 55%, var(--primary-500) 100%);
  color: #fff;
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.auth-panel::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -120px;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 70%);
  pointer-events: none;
}

.auth-panel::after {
  content: "";
  position: absolute;
  bottom: -160px;
  left: -100px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 70%);
  pointer-events: none;
}

.auth-panel-logo {
  position: relative;
  z-index: 1;
  display: inline-block;
}

.auth-panel-logo img {
  filter: brightness(0) invert(1);
}

.auth-panel-content {
  position: relative;
  z-index: 1;
  max-width: 380px;
}

.auth-panel-headline {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 20px;
  color: #fff;
}

.auth-panel-sub {
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255,255,255,0.85);
  margin: 0 0 32px;
}

.auth-panel-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth-panel-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255,255,255,0.92);
}

.auth-panel-bullets li svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: #fff;
  background: rgba(255,255,255,0.18);
  border-radius: 999px;
  padding: 3px;
}

.auth-panel-trust {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,0.8);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  padding: 6px 14px;
  margin: 0;
}

.auth-panel-footer {
  position: relative;
  z-index: 1;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  margin: 0;
}

.auth-form-side {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}

.auth-form-card {
  width: 100%;
  max-width: 440px;
}

.auth-form-mobile-logo {
  display: none;
  margin-bottom: 24px;
}

.auth-form-top {
  display: flex;
  justify-content: flex-end;
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.auth-form-top a {
  color: var(--primary);
  font-weight: 500;
  text-decoration: none;
  margin-left: 6px;
}

.auth-form-top a:hover {
  text-decoration: underline;
}

.auth-form-card .auth-title {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--text);
  letter-spacing: -0.01em;
}

.auth-form-card .auth-subtitle {
  font-size: 15px;
  color: var(--text-secondary);
  margin: 0 0 28px;
  line-height: 1.5;
}

.auth-form-card .form-group {
  margin-bottom: 16px;
}

.auth-form-card .btn {
  margin-top: 8px;
}

.auth-form-footer {
  text-align: center;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  color: var(--text-secondary);
}

.auth-form-footer p {
  margin: 0 0 8px;
}

.auth-form-footer p:last-child {
  margin-bottom: 0;
}

.auth-form-footer a {
  color: var(--primary);
  font-weight: 500;
  text-decoration: none;
}

.auth-form-footer a:hover {
  text-decoration: underline;
}

.auth-form-back {
  font-size: 13px;
  color: var(--text-light) !important;
  font-weight: 400 !important;
}

@media (max-width: 900px) {
  .auth-split {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    min-height: 100vh;
  }

  .auth-panel {
    padding: 24px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    min-height: 0;
  }

  .auth-panel-content,
  .auth-panel-footer {
    display: none;
  }

  .auth-form-side {
    padding: 32px 20px 48px;
  }

  .auth-form-mobile-logo {
    display: none;
  }
}

/* ============================================
   AVATAR GROUP (for teams)
   ============================================ */
.avatar-group {
  display: flex;
}

.avatar-group .worker-avatar {
  margin-left: -8px;
  border: 2px solid var(--surface);
}

.avatar-group .worker-avatar:first-child {
  margin-left: 0;
}

/* ============================================
   PRICING DISPLAY
   ============================================ */
.price-large {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.price-unit {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 400;
}

.pricing-check {
  color: var(--success);
  font-weight: 600;
}

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

/* ============================================
   UTILITIES
   ============================================ */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }

.text-sm { font-size: 13px; }
.text-xs { font-size: 12px; }
.text-lg { font-size: 16px; }

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

.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }

.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }

.w-full { width: 100%; }
.w-3 { width: 12px; }
.h-3 { height: 12px; }
.max-w-md { max-width: 28rem; }

.mx-auto { margin-left: auto; margin-right: auto; }
.mb-6 { margin-bottom: var(--space-8); }

.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.p-4 { padding: var(--space-4); }

.rounded-full { border-radius: 9999px; }
.rounded-lg { border-radius: var(--radius-lg); }

.border-b { border-bottom: 1px solid var(--border); }

.bg-success { background-color: var(--success); }

.space-y-4 > * + * { margin-top: var(--space-4); }

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

.hidden { display: none; }

/* Scrollable container */
.overflow-auto {
  overflow-x: auto;
}

/* Divider */
.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-4) 0;
}

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

/* --- Filter Bar (HCP-style) --- */
.calendar-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.calendar-filter-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.calendar-nav {
  display: flex;
  gap: 2px;
}

.calendar-nav-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 18px;
  text-decoration: none;
  transition: all var(--transition-fast);
  line-height: 1;
}

.calendar-nav-btn:hover {
  background: var(--bg);
  color: var(--text);
  text-decoration: none;
}

.calendar-date-display {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.calendar-filter-center {
  display: flex;
  gap: 2px;
  background: var(--bg);
  padding: 3px;
  border-radius: var(--radius-md);
}

.calendar-view-btn {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.calendar-view-btn:hover {
  color: var(--text);
  text-decoration: none;
}

.calendar-view-btn.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.calendar-filter-right {
  display: flex;
  gap: var(--space-2);
}

.calendar-filter-select {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--transition-fast);
  min-width: 110px;
}

.calendar-filter-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

/* --- Calendar Layout (sidebar + main) --- */
.calendar-layout {
  display: block;
}

/* Status Dots */
.calendar-status-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.status-dot-new { background: var(--primary); }
.status-dot-scheduled { background: var(--warning); }
.status-dot-en_route { background: var(--primary); }
.status-dot-arrived { background: #ec4899; }
.status-dot-in_progress { background: #3b82f6; }
.status-dot-on_hold { background: var(--amber-400); }
.status-dot-completed { background: var(--success); }
.status-dot-cancelled { background: var(--danger); }

/* Status Stripes (left border on events) */
.status-stripe-new { border-left: 3px solid var(--primary); background: var(--primary-light); }
.status-stripe-scheduled { border-left: 3px solid var(--warning); background: var(--warning-light); }
.status-stripe-en_route { border-left: 3px solid var(--primary); background: var(--primary-light); }
.status-stripe-arrived { border-left: 3px solid #ec4899; background: #fdf2f8; }
.status-stripe-in_progress { border-left: 3px solid #3b82f6; background: #eff6ff; }
.status-stripe-on_hold { border-left: 3px solid var(--amber-400); background: #fffbeb; }
.status-stripe-completed { border-left: 3px solid var(--success); background: var(--success-light); }
.status-stripe-cancelled { border-left: 3px solid var(--danger); background: var(--danger-light); opacity: 0.6; }

/* --- Calendar Main Content --- */
.calendar-main {
  min-width: 0;
  overflow-x: auto;
}

/* ============================================
   MONTH VIEW
   ============================================ */
.calendar-grid-month {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.calendar-grid-header {
  padding: var(--space-2) var(--space-3);
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  background: var(--bg-secondary);
}

.calendar-cell-month {
  background: var(--surface);
  min-height: 100px;
  padding: var(--space-1);
  position: relative;
}

.calendar-cell-today {
  background: var(--primary-light) !important;
}

.calendar-cell-outside {
  background: var(--bg);
  opacity: 0.5;
}

.calendar-cell-day {
  display: flex;
  justify-content: center;
  margin-bottom: 2px;
}

.calendar-cell-daynum {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.calendar-cell-daynum:hover {
  background: var(--primary-light);
  color: var(--primary);
  text-decoration: none;
}

.calendar-cell-daynum-today {
  background: var(--primary);
  color: var(--text-inverse) !important;
  font-weight: 600;
}

.calendar-cell-daynum-today:hover {
  background: var(--primary-dark);
  color: var(--text-inverse) !important;
}

.calendar-cell-events {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.calendar-mini-event {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
  text-decoration: none;
  color: var(--text);
  transition: opacity var(--transition-fast);
  overflow: hidden;
}

.calendar-mini-event:hover {
  opacity: 0.8;
  text-decoration: none;
}

.calendar-mini-event-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-mini-more {
  font-size: 10px;
  color: var(--text-light);
  padding: 2px 6px;
  cursor: pointer;
}

.calendar-cell-add {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--text-light);
  text-decoration: none;
  opacity: 0;
  transition: all var(--transition-fast);
}

.calendar-cell-month:hover .calendar-cell-add {
  opacity: 1;
}

.calendar-cell-add:hover {
  background: var(--primary-light);
  color: var(--primary);
  text-decoration: none;
}

/* ============================================
   DAY / WEEK / WORK WEEK VIEW
   ============================================ */
.calendar-grid-week {
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Dynamic column count: time label + N days */
.calendar-grid-week {
  grid-template-columns: 64px repeat(var(--cal-days, 7), 1fr);
}

.calendar-time-header {
  background: var(--bg-secondary);
}

.calendar-day-col-header {
  padding: var(--space-2) var(--space-3);
  text-align: center;
  background: var(--bg-secondary);
}

.calendar-cell-today-header {
  background: var(--primary-light) !important;
}

.calendar-day-col-name {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

.calendar-day-col-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-top: 2px;
}

.calendar-time-label {
  padding: var(--space-2) var(--space-2);
  text-align: right;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-light);
  background: var(--surface);
  border-right: 1px solid var(--border);
  height: 72px;
}

.calendar-hour-cell {
  background: var(--surface);
  min-height: 72px;
  padding: 2px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.calendar-cell-quick-add {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--primary-light);
  color: var(--primary);
  font-size: 16px;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.calendar-hour-cell:hover .calendar-cell-quick-add {
  display: flex;
}

/* All-Day Strip */
.calendar-allday-label {
  background: var(--bg-secondary);
  height: auto;
  min-height: 32px;
  padding: var(--space-2);
  text-align: right;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-light);
  border-right: 1px solid var(--border);
}

.calendar-allday-cell {
  background: var(--surface);
  min-height: 32px;
  padding: 3px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.calendar-allday-event {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  text-decoration: none;
  color: var(--text);
  overflow: hidden;
  white-space: nowrap;
}

.calendar-allday-event:hover {
  filter: brightness(0.95);
  text-decoration: none;
}

.calendar-allday-event-title {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-allday-event-client {
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Week Event Card */
.calendar-week-event {
  display: block;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: all var(--transition-fast);
  overflow: hidden;
}

.calendar-week-event:hover {
  filter: brightness(0.95);
  text-decoration: none;
}

.calendar-week-event-time {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
}

.calendar-week-event-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-week-event-client {
  font-size: 10px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-week-event-workers {
  display: flex;
  gap: 2px;
  margin-top: 2px;
}

.calendar-event-avatar {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--text-inverse);
  font-size: 8px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calendar-event-avatar-more {
  background: var(--text-light);
  font-size: 7px;
}

/* ============================================
   RESOURCE TIMELINE VIEW
   ============================================ */
.calendar-grid-resource {
  display: grid;
  grid-template-columns: 180px repeat(var(--cal-days, 5), 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.resource-header-cell {
  padding: var(--space-2) var(--space-3);
  text-align: center;
  background: var(--bg-secondary);
  min-height: 48px;
}

.resource-day-name {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.resource-day-num {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.resource-member-cell {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--surface);
  border-right: 1px solid var(--border);
  min-height: 80px;
}

.resource-member-avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}

.resource-member-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.resource-day-cell {
  background: var(--surface);
  min-height: 80px;
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.resource-job {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: 12px;
  color: var(--text);
  transition: filter var(--transition-fast);
}

.resource-job:hover {
  filter: brightness(0.95);
  text-decoration: none;
}

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

/* ============================================
   DRAG-DROP CALENDAR RESCHEDULE
   ============================================ */

/* Draggable job events */
.cal-draggable {
  cursor: grab;
}
.cal-draggable:active {
  cursor: grabbing;
}
.cal-dragging {
  opacity: 0.45;
  cursor: grabbing;
}

/* Drop zone hover state */
.cal-drop-target {
  background-color: rgba(59, 130, 246, 0.08) !important;
  outline: 2px dashed #3b82f6 !important;
  outline-offset: -2px;
  border-radius: 4px;
}

/* Rescheduled badge on events */
.calendar-reschedule-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: var(--primary);
  margin-left: 3px;
  vertical-align: middle;
  title: "Manually rescheduled";
}

/* Wrappers so drag target doesn't interfere with inner link clicks */
.calendar-mini-event-wrapper,
.calendar-week-event-wrapper {
  position: relative;
}

/* ── Reschedule Confirmation Modal ── */
.cal-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.cal-modal {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  width: 100%;
  max-width: 420px;
  padding: 0;
  overflow: hidden;
}

.cal-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid #f0f0f0;
}

.cal-modal-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.cal-modal-close {
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: #9ca3af;
  padding: 0 2px;
}
.cal-modal-close:hover {
  color: #374151;
}

.cal-modal-body {
  padding: 18px 20px 12px;
}

.cal-modal-job-name {
  font-weight: 600;
  font-size: 15px;
  margin: 0 0 6px;
  color: #111827;
}

.cal-modal-detail {
  font-size: 14px;
  color: #4b5563;
  margin: 0 0 4px;
}

.cal-modal-recurring-warning {
  font-size: 13px;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 6px;
  padding: 8px 12px;
  margin-top: 12px;
}

.cal-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 20px 18px;
  border-top: 1px solid #f0f0f0;
}

/* ============================================
   CLIENT SHOW PAGE
   ============================================ */
.client-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.client-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.client-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  flex-shrink: 0;
}

.client-name {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  line-height: 1.2;
}

.client-company {
  font-size: 14px;
  color: var(--text-secondary);
}

.client-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.client-actions .btn svg {
  margin-right: 4px;
}

/* Dropdown Actions */
.dropdown-actions {
  position: relative;
}

.actions-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  width: 200px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all var(--transition-fast);
  z-index: 100;
  overflow: hidden;
}

.actions-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.actions-dropdown-right {
  left: auto;
  right: 0;
}

.actions-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 13px;
  transition: all var(--transition-fast);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.actions-item:hover {
  background: var(--bg);
  color: var(--text);
  text-decoration: none;
}

.actions-item svg {
  flex-shrink: 0;
  opacity: 0.6;
}

.actions-item-danger {
  color: var(--danger);
}

.actions-item-danger:hover {
  background: var(--danger-light);
  color: var(--danger);
}

.actions-divider {
  height: 1px;
  background: var(--border);
  margin: var(--space-1) 0;
}

/* Client Layout */
.client-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-4);
  align-items: start;
}

.client-main {
  min-width: 0;
}

.client-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Card Tabs */
.card-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
.card-tabs::-webkit-scrollbar { display: none; /* Chrome/Safari */ }

.card-tab {
  padding: var(--space-3) var(--space-4);
  border: none;
  background: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: all var(--transition-fast);
  margin-bottom: -1px;
}

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

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

.card-body-tabbed {
  padding: 0;
}

.tab-content {
  display: none;
  padding: var(--space-4);
}

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

/* Tab Rows */
.tab-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  transition: background var(--transition-fast);
}

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

.tab-row:hover {
  background: var(--bg);
  text-decoration: none;
}

.tab-row-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tab-row-icon.status-new { background: var(--primary-light); color: var(--primary); }
.tab-row-icon.status-scheduled { background: var(--warning-light); color: var(--warning); }
.tab-row-icon.status-in_progress { background: #dbeafe; color: #3b82f6; }
.tab-row-icon.status-completed { background: var(--success-light); color: var(--success); }
.tab-row-icon.status-draft { background: var(--bg); color: var(--text-secondary); }
.tab-row-icon.status-sent { background: #dbeafe; color: #3b82f6; }
.tab-row-icon.status-accepted { background: var(--success-light); color: var(--success); }
.tab-row-icon.status-rejected { background: var(--danger-light); color: var(--danger); }

.tab-row-content {
  flex: 1;
  min-width: 0;
}

.tab-row-title {
  font-size: 14px;
  font-weight: 500;
}

.tab-row-meta {
  font-size: 12px;
  color: var(--text-secondary);
}

/* Tab Empty State */
.tab-empty {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--text-secondary);
}

.tab-empty svg {
  margin-bottom: var(--space-3);
}

.tab-empty h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--space-1);
}

.tab-empty p {
  font-size: 13px;
  margin-bottom: var(--space-3);
}

/* Sidebar Fields */
.card-body-compact {
  padding: var(--space-3) var(--space-4);
}

.sidebar-field {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
}

.sidebar-field:last-child {
  border-bottom: none;
}

.sidebar-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-light);
  margin-bottom: 2px;
}

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

.sidebar-value a {
  color: var(--primary);
  text-decoration: none;
}

.sidebar-value a:hover {
  text-decoration: underline;
}

/* Billing Rows */
.billing-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

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

.billing-balance {
  background: var(--primary-light);
  margin: var(--space-2) calc(-1 * var(--space-4));
  padding: var(--space-2) var(--space-4);
  border-bottom: none;
}

/* Note Content */
.note-content {
  font-size: 13px;
  color: var(--text);
  white-space: pre-wrap;
  line-height: 1.5;
}

/* ============================================
   FORM PAGE LAYOUT (Jobber-style)
   ============================================ */
.form-page {
  max-width: 1200px;
  margin: 0 auto;
}

.form-page-header {
  margin-bottom: var(--space-6);
}

.form-page-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
}

/* Form Row Label-Top (Two Column: Label + Fields) */
.form-row-label-top,
.form-section {
  display: flex;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
  align-items: flex-start;
}

.form-label-col {
  flex: 0 0 220px;
  position: sticky;
  top: 0;
  padding-top: var(--space-1);
}

.form-fields-col {
  flex: 1;
  min-width: 0;
}

.form-section-heading {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 var(--space-1);
}

.form-subsection-heading {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.form-section-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

/* Inline Row */
.form-row-inline {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}

.form-field {
  flex: 1;
  min-width: 140px;
}

.form-field-sm {
  flex: 0 0 120px;
  min-width: 100px;
}

/* Collapsible Sections */
.form-collapsible {
  background: var(--bg);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  overflow: hidden;
}

.form-collapsible-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-align: left;
}

.form-collapsible-header:hover {
  background: var(--surface-hover);
}

.form-collapsible-arrow {
  transition: transform var(--transition-fast);
}

.form-collapsible.is-open .form-collapsible-arrow {
  transform: rotate(180deg);
}

.form-collapsible-body {
  display: none;
  padding: 0 var(--space-4) var(--space-4);
}

.form-collapsible.is-open .form-collapsible-body {
  display: block;
}

/* Form Divider */
.form-divider {
  height: 1px;
  background: var(--border);
  margin: var(--space-6) 0;
}

/* Address Block */
.address-block {
  margin-bottom: var(--space-3);
}

/* Form Footer (Sticky) */
.form-footer {
  position: sticky;
  bottom: 0;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  padding: var(--space-4) var(--space-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-6);
  z-index: 10;
  margin-left: calc(-1 * var(--space-6));
  margin-right: calc(-1 * var(--space-6));
  padding-left: var(--space-6);
  padding-right: var(--space-6);
  backdrop-filter: blur(8px);
}

.form-footer-left {
  display: flex;
}

.form-footer-right {
  display: flex;
  gap: var(--space-2);
}

/* Responsive */
@media (max-width: 768px) {
  .form-row-label-top,
  .form-section {
    flex-direction: column;
    gap: var(--space-3);
  }
  
  .form-label-col {
    flex: none;
    width: 100%;
  }
  
  .form-row-inline {
    flex-direction: column;
  }
  
  .form-field,
  .form-field-sm {
    flex: none;
    width: 100%;
  }
}

/* ============================================
   DASHBOARD
   ============================================ */
.dashboard-container {
  max-width: 1200px;
  margin: 0 auto;
}

.dashboard-greeting {
  margin-bottom: var(--space-6);
}

.dashboard-date {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}

.dashboard-hello {
  font-size: 28px;
  font-weight: 700;
  margin: 4px 0 0 0;
  color: var(--text);
}

.dashboard-section {
  margin-bottom: var(--space-6);
}

.dashboard-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-3);
}

/* Workflow Cards */
.workflow-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}

.workflow-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.workflow-card-primary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  text-decoration: none;
  color: var(--text);
  transition: background var(--transition-fast);
}

.workflow-card-primary:hover {
  background: var(--bg);
  text-decoration: none;
}

.workflow-card-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}

.workflow-card-label {
  font-size: 14px;
  font-weight: 600;
  flex: 1;
}

.workflow-card-count {
  text-align: right;
}

.workflow-count-number {
  display: block;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
}

.workflow-count-label {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 500;
}

.workflow-card-links {
  border-top: 1px solid var(--border);
  padding: var(--space-2) var(--space-3);
}

.workflow-link {
  display: block;
  padding: 4px 8px;
  font-size: 12px;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.workflow-link:hover {
  background: var(--bg);
  color: var(--text);
  text-decoration: none;
}

/* Pagination (Pagy 9) */
.pagy.nav,
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: var(--space-3) 0;
}

.pagy.nav a,
.pagination a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 var(--space-3);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all 0.15s ease;
  cursor: pointer;
}

.pagy.nav a:hover,
.pagination a:hover {
  color: var(--text);
  background: var(--bg-secondary);
  border-color: var(--border-hover);
  text-decoration: none;
}

/* Active / current page */
.pagy.nav a.current,
.pagy.nav a[aria-current="page"],
.pagination .active,
.pagination a[aria-current="page"] {
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
}

.pagy.nav a.current:hover,
.pagy.nav a[aria-current="page"]:hover {
  background: var(--primary-dark);
  text-decoration: none;
}

/* Disabled prev/next & gap */
.pagy.nav a[aria-disabled="true"],
.pagy.nav a.gap,
.pagination .disabled {
  color: var(--text-light);
  opacity: 0.5;
  pointer-events: none;
}

/* Revenue KPI Strip */
.revenue-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-4);
}

.revenue-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-4) var(--space-5);
  text-align: center;
}

.revenue-card:not(:last-child) {
  border-right: 1px solid var(--border);
}

.revenue-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
}

.revenue-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

/* Dashboard Main Layout */
.dashboard-main {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-4);
  align-items: start;
}

.dashboard-left {}

.dashboard-right {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Appointments */
.appointments-metrics {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-3);
}

.metric-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.metric-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

.metric-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.appointment-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  transition: background var(--transition-fast);
}

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

.appointment-row:hover {
  background: var(--bg);
  text-decoration: none;
}

.appointment-status-indicator {
  width: 4px;
  height: 40px;
  border-radius: 2px;
  flex-shrink: 0;
}

.appointment-status-indicator.status-new { background: var(--primary); }
.appointment-status-indicator.status-scheduled { background: var(--warning); }
.appointment-status-indicator.status-in_progress { background: #3b82f6; }
.appointment-status-indicator.status-completed { background: var(--success); }

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

.appointment-title {
  font-size: 14px;
  font-weight: 500;
}

.appointment-client {
  font-size: 12px;
  color: var(--text-secondary);
}

.appointment-empty {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  color: var(--text-secondary);
}

.appointment-empty p {
  font-size: 14px;
  margin-bottom: var(--space-3);
}

/* Performance Cards */
.performance-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.performance-card-alert {
  border-color: var(--border);
  background: var(--surface);
}

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

.performance-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

.performance-subtitle {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0 0 var(--space-2) 0;
}

.performance-value {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  color: var(--text);
}

/* ============================================
   FORM FOOTER FIX
   ============================================ */
.form-footer {
  position: sticky;
  bottom: 0;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  z-index: 50;
  margin: 0 calc(-1 * var(--space-4));
  backdrop-filter: blur(8px);
}

.form-footer-left {
  display: flex;
}

.form-footer-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ============================================
   TASK TEMPLATES
   ============================================ */
.template-task-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border-bottom: 1px solid var(--border);
}

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

.template-task-order {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.template-task-content {
  flex: 1;
  min-width: 0;
}

.template-task-title {
  font-size: 14px;
  font-weight: 500;
}

.template-task-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.template-task-actions {
  flex-shrink: 0;
}

/* Inline task fields on job form */
.job-task-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.job-task-field-row {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
}

.job-task-field-row .form-field {
  flex: 1;
  margin-bottom: 0;
}

.job-task-field-row .form-field:first-child {
  flex: 3;
}

.job-task-remove {
  color: var(--danger);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  padding: 8px;
  line-height: 1;
}

/* ============================================
   Data Table
   ============================================ */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.data-table thead {
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}

.data-table th {
  padding: 8px 12px;
  text-align: left;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-500);
}

.data-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--gray-100);
  vertical-align: middle;
}

.data-table tbody tr:hover {
  background: var(--gray-50);
}

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

/* ============================================
   Reports & Analytics
   ============================================ */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

@media (max-width: 1024px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

.kpi-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--gray-100);
}

.kpi-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.kpi-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.2;
}

.kpi-sub {
  font-size: 13px;
  color: var(--gray-500);
  margin-top: 4px;
}

.reports-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

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

.report-bar {
  display: flex;
  height: 32px;
  border-radius: 8px;
  overflow: hidden;
  gap: 2px;
}

.report-bar-item {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 13px;
  font-weight: 600;
  min-width: 24px;
  flex: 0 0 auto;
}

.report-bar-item:empty { flex: 0 !important; }

.report-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--gray-600);
}

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

.report-stat-row {
  display: flex;
  justify-content: space-around;
  gap: 16px;
}

.report-stat-label {
  font-size: 12px;
  color: var(--gray-500);
  text-align: center;
}

.report-stat-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--gray-900);
  text-align: center;
}

.aging-bars {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.aging-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.aging-label {
  font-size: 13px;
  color: var(--gray-600);
  width: 70px;
  flex-shrink: 0;
}

.aging-bar-track {
  flex: 1;
  height: 20px;
  background: var(--gray-100);
  border-radius: 10px;
  overflow: hidden;
}

.aging-bar-fill {
  height: 100%;
  border-radius: 10px;
  min-width: 4px;
  transition: width 0.3s ease;
}

.aging-amount {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-700);
  width: 80px;
  text-align: right;
  flex-shrink: 0;
}

/* ============================================
   Activity Feed / Timeline
   ============================================ */

.activity-timeline {
  padding: 0;
  list-style: none;
}

.activity-entry {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--gray-100);
  position: relative;
}

.activity-entry:last-child { border-bottom: none; }

.activity-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
}

.activity-icon.status-change { background: var(--blue-50); color: var(--blue-600); }
.activity-icon.note { background: var(--amber-50); color: var(--amber-600); }
.activity-icon.assigned { background: var(--green-50); color: var(--green-600); }
.activity-icon.created { background: var(--green-50); color: var(--green-600); }
.activity-icon.payment { background: var(--green-50); color: var(--green-600); }
.activity-icon.credit { background: var(--green-50); color: var(--green-600); }
.activity-icon.converted { background: var(--purple-50); color: var(--purple-600); }
.activity-icon.refunded { background: var(--amber-50); color: var(--amber-600); }
.activity-icon.field-change { background: var(--gray-50); color: var(--gray-500); }

.activity-entry-linked { transition: background 0.12s ease; border-radius: 6px; padding-left: 6px; padding-right: 6px; margin-left: -6px; margin-right: -6px; }
.activity-entry-linked:hover { background: var(--gray-50); }
.activity-link { color: inherit; text-decoration: none; display: block; }
.activity-link:hover { color: inherit; text-decoration: none; }

.activity-body {
  flex: 1;
  min-width: 0;
}

.activity-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.activity-description {
  font-size: 14px;
  color: var(--gray-800);
  line-height: 1.4;
}

.activity-meta {
  font-size: 12px;
  color: var(--gray-400);
  flex-shrink: 0;
}

.activity-note-body {
  margin-top: 8px;
  padding: 12px;
  background: var(--gray-50);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-700);
  border-left: 3px solid var(--amber-400);
}

.activity-badge {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.activity-badge.old {
  background: var(--red-50);
  color: var(--red-700);
  text-decoration: line-through;
}

.activity-badge.new {
  background: var(--green-50);
  color: var(--green-700);
}

/* Note form */
.note-form {
  display: flex;
  gap: 8px;
  padding: 16px;
  background: var(--gray-50);
  border-radius: 10px;
  margin-top: 16px;
}

.note-form textarea {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  font-size: 14px;
  resize: vertical;
  min-height: 40px;
  font-family: inherit;
}

.note-form textarea:focus {
  outline: none;
  border-color: var(--primary-400);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.note-form .btn {
  align-self: flex-end;
}

.field-error {
  color: var(--danger);
  font-size: 0.75rem;
  margin-top: 4px;
}

/* ============================================
   EMPTY STATES
   ============================================ */
.empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  color: var(--text-secondary);
}

.empty-state-icon {
  margin-bottom: var(--space-4);
  opacity: 0.4;
}

.empty-state-icon svg,
.empty-state-icon .icon {
  width: 48px;
  height: 48px;
}

.empty-state-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--space-1);
}

.empty-state-desc {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

.empty-state-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================
   BREADCRUMBS
   ============================================ */
.breadcrumb {
  margin-bottom: var(--space-4);
}

.breadcrumb-list {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
}

.breadcrumb-link {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.breadcrumb-link:hover {
  color: var(--primary);
  text-decoration: underline;
}

.breadcrumb-sep {
  margin: 0 var(--space-2);
  color: var(--text-light);
  user-select: none;
}

.breadcrumb-current {
  color: var(--text);
  font-weight: 500;
}

/* ============================================
   SVG ICON SIZES
   ============================================ */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.icon svg {
  width: 100%;
  height: 100%;
}

.icon-sm { width: 16px; height: 16px; }
.icon-sm svg { width: 16px; height: 16px; }

.icon-lg { width: 24px; height: 24px; }
.icon-lg svg { width: 24px; height: 24px; }

.icon-xl { width: 32px; height: 32px; }
.icon-xl svg { width: 32px; height: 32px; }

.icon-2xl { width: 48px; height: 48px; opacity: 0.5; }
.icon-2xl svg { width: 48px; height: 48px; }

/* ============================================
   MODALS
   ============================================ */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}

.modal-overlay.modal-open {
  display: flex;
}

.modal-content {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  max-width: 500px;
  width: 100%;
  box-shadow: var(--shadow-xl);
  animation: modal-enter 0.15s ease;
}

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

.modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

@keyframes modal-enter {
  from {
    opacity: 0;
    transform: translateY(-16px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ============================================
   LOADING STATES
   ============================================ */
.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

.spinner-sm { width: 14px; height: 14px; border-width: 1.5px; }
.spinner-lg { width: 28px; height: 28px; border-width: 2.5px; }

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

.skeleton {
  background: linear-gradient(90deg, var(--bg) 25%, var(--bg-secondary) 50%, var(--bg) 75%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

.skeleton-text {
  height: 14px;
  margin-bottom: var(--space-2);
}

.skeleton-text-sm { height: 12px; }
.skeleton-text-lg { height: 20px; }
.skeleton-heading { height: 24px; width: 60%; margin-bottom: var(--space-4); }
.skeleton-avatar { width: 40px; height: 40px; border-radius: var(--radius-full); }
.skeleton-row { height: 48px; margin-bottom: 1px; }

@keyframes skeleton-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.loading-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-10);
  color: var(--text-light);
  gap: var(--space-3);
  font-size: 14px;
}

/* Table loading overlay — shown during navigation/filtering */
.table-loading-overlay {
  position: absolute;
  inset: 0;
  background: var(--bg);
  opacity: 0.95;
  z-index: 10;
}

/* Button loading state */
.btn.is-loading {
  pointer-events: none;
  opacity: 0.7;
}

.btn.is-loading .spinner {
  margin-right: var(--space-2);
}

/* ============================================
   TEXT UTILITIES (extend existing)
   ============================================ */
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-info { color: var(--info); }

/* ============================================
   PORTAL-SPECIFIC COMPONENTS
   ============================================ */

/* Portal stat cards grid */
.portal-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

/* Portal two-column layout */
.portal-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

/* Portal detail layout */
.portal-detail-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-6);
}

/* Portal list item (for dashboard cards) */
.portal-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: background var(--transition-fast);
}

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

.portal-list-item:hover {
  background: var(--bg-secondary);
  text-decoration: none;
}

.portal-list-item-title {
  font-weight: 500;
  font-size: 14px;
}

.portal-list-item-subtitle {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.portal-list-item-value {
  font-weight: 600;
  color: var(--primary);
  font-size: 14px;
}

/* Portal back link */
.portal-back-link {
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  transition: color var(--transition-fast);
}

.portal-back-link:hover {
  color: var(--primary);
  text-decoration: none;
}

/* Balance due alert card */
.alert-balance {
  background: var(--danger-light);
  border: 1px solid #fecaca;
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
}

.alert-balance-label {
  font-weight: 500;
  color: var(--danger);
}

.alert-balance-hint {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.alert-balance-amount {
  font-size: 24px;
  font-weight: 700;
  color: var(--danger);
}

/* Portal Onboarding */
.portal-onboarding {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  padding: var(--space-12) var(--space-4);
}
.portal-onboarding-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-8);
}
.portal-onboarding-label {
  font-size: var(--font-base);
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}
.portal-onboarding-emoji {
  font-size: 48px;
  margin-bottom: var(--space-4);
}
.portal-onboarding-title {
  font-size: var(--font-2xl);
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--space-2);
}
.portal-onboarding-desc {
  font-size: var(--font-lg);
  color: var(--text-secondary);
  margin-bottom: var(--space-8);
  line-height: 1.5;
}
.portal-onboarding-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  text-align: left;
  margin-bottom: var(--space-8);
}
.portal-onboarding-feature {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.portal-onboarding-feature-emoji {
  font-size: var(--font-2xl);
  margin-bottom: var(--space-2);
}
.portal-onboarding-feature-title {
  font-size: var(--font-base);
  font-weight: 600;
  color: var(--text);
}
.portal-onboarding-feature-desc {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin-top: var(--space-1);
}

/* Portal utility classes (replacing inline styles) */
.portal-empty-state {
  text-align: center;
  padding: 48px;
  color: var(--text-secondary);
}

.portal-empty-state-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.3;
}

.portal-empty-state-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.portal-meta {
  font-size: 12px;
  color: var(--text-secondary);
}

.portal-card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

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

.portal-row-actions {
  display: flex;
  gap: 12px;
  align-items: end;
  flex-wrap: wrap;
}

.portal-filter-width {
  width: 150px;
}

/* Pay now card */
.pay-now-card {
  border-color: var(--primary);
}

.pay-now-card .card-header {
  background: var(--primary-light);
}

.pay-now-amount {
  text-align: center;
  margin-bottom: var(--space-4);
}

.pay-now-amount-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.pay-now-amount-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--primary);
}

.pay-now-secure {
  text-align: center;
  margin-top: var(--space-3);
  font-size: 12px;
  color: var(--text-secondary);
}

/* Portal filter bar */
.portal-filter-bar {
  display: flex;
  gap: var(--space-3);
  align-items: flex-end;
  flex-wrap: wrap;
}

.portal-filter-bar .form-group {
  margin-bottom: 0;
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */
@media (max-width: 1024px) {
  .workflow-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dashboard-main {
    grid-template-columns: 1fr;
  }

  /* Pagination responsive */
  .pagy.nav,
  .pagination {
    gap: 3px;
  }
  .pagy.nav a,
  .pagination a {
    min-width: 32px;
    height: 32px;
    padding: 0 var(--space-2);
    font-size: 12px;
  }

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

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

  .portal-grid-2 {
    grid-template-columns: 1fr;
  }

  .portal-detail-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }

  .sidebar.is-open {
    transform: translateX(0);
  }

  .main-wrapper {
    margin-left: 0;
  }

  .main-content {
    padding: var(--space-4) var(--space-5);
  }

  .workflow-grid {
    grid-template-columns: 1fr 1fr;
  }

  .revenue-strip {
    grid-template-columns: 1fr;
  }

  .revenue-card:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .detail-grid {
    grid-template-columns: 1fr;
  }

  .client-layout {
    grid-template-columns: 1fr;
  }

  .form-row-2,
  .form-row-3,
  .form-row-4 {
    grid-template-columns: 1fr;
  }

  .portal-stats {
    grid-template-columns: 1fr 1fr;
  }

  .search-box {
    width: 100%;
  }

  .header-left {
    display: none;
  }

  /* Audit §3.10 — mobile replacement for the hidden .header-left search.
     The icon link sits between the hamburger and the bell + user dropdown,
     and navigates to /web/search (the same destination the desktop form
     POSTs to with empty `q`). */
  .header-search-mobile {
    display: inline-flex;
    margin-left: auto;
  }

  .appointments-metrics {
    flex-wrap: wrap;
  }

  .portal-filter-bar {
    flex-direction: column;
    align-items: stretch;
  }
}

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

  .portal-stats {
    grid-template-columns: 1fr;
  }

  .card-tabs {
    -webkit-overflow-scrolling: touch;
  }

  .portal-list-item {
    padding: var(--space-3);
  }
}

/* ============================================
   MOBILE MENU TOGGLE
   ============================================ */
.mobile-menu-btn {
  display: none;
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 200;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--text-secondary);
}

@media (max-width: 768px) {
  .mobile-menu-btn {
    display: flex;
  }
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 99;
}

@media (max-width: 768px) {
  .sidebar.is-open ~ .sidebar-overlay {
    display: block;
  }
}

/* ============================================
   MOBILE ENHANCEMENTS
   ============================================ */
@media (max-width: 768px) {
  /* Tables: horizontal scroll */
  .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table-container table {
    min-width: 600px;
  }

  /* Touch targets: minimum 44px */
  .btn {
    min-height: 44px;
    padding: var(--space-2) var(--space-4);
  }

  .btn-sm {
    min-height: 36px;
  }

  .nav-item {
    min-height: 44px;
    padding: var(--space-3);
  }

  .header-btn {
    width: 44px;
    height: 44px;
  }

  /* Calendar: hide on mobile, show list instead */
  .calendar-grid {
    display: none;
  }

  /* Footer: stack */
  .footer {
    flex-direction: column;
    height: auto;
    padding: var(--space-3) var(--space-4);
    gap: var(--space-2);
  }

  /* Form page: no side label on mobile */
  .form-section,
  .form-row-label-top {
    flex-direction: column;
    gap: var(--space-4);
  }

  .form-label-col {
    flex: none;
    position: static;
  }

  /* Detail page sidebar values */
  .form-field {
    min-width: 0;
  }
}

/* ============================================
   Signature Pad
   ============================================ */

#signature-pad,
#portal-signature-pad {
  background: #fefefe;
  touch-action: none;
}

#signature-pad:focus,
#portal-signature-pad:focus {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.signature-card {
  border: 2px solid var(--success);
  background: var(--success-light);
}

.signature-card .card-header {
  border-bottom-color: var(--success);
}

/* ============================================
   CONVERSATION LIST (Inbox)
   ============================================ */
.conversation-list {
  display: flex;
  flex-direction: column;
}

.conversation-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  text-decoration: none;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}

.conversation-item:hover {
  background: var(--bg);
  text-decoration: none;
}

.conversation-item.unread {
  background: var(--primary-light);
  border-left: 3px solid var(--primary);
}

.conversation-item.unread:hover {
  background: var(--primary-100);
}

.conversation-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-500);
}

.conversation-content {
  flex: 1;
  min-width: 0;
}

.conversation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}

.conversation-subject {
  font-weight: 600;
  color: var(--text);
}

.conversation-item.unread .conversation-subject {
  font-weight: 700;
}

.conversation-time {
  font-size: 0.75rem;
  color: var(--text-light);
  white-space: nowrap;
}

.conversation-client {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 2px;
}

.conversation-preview {
  font-size: 0.85rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conversation-badge {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* Filter Tabs */
.filter-tabs {
  display: flex;
  gap: var(--space-1);
}

.filter-tab {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.filter-tab:hover {
  color: var(--text);
  background: var(--bg-secondary);
}

.filter-tab.active {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.filter-tab-count {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  margin-left: 4px;
}

.filter-tab.active .filter-tab-count {
  background: color-mix(in srgb, var(--primary) 20%, transparent);
  color: var(--primary);
}

/* ========================================
   Inbox — Slack-style Split Pane
   ======================================== */

.inbox-container {
  display: flex;
  height: calc(100vh - 120px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
}

.inbox-sidebar {
  width: 280px;
  min-width: 280px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  background: var(--stone-50);
}

.inbox-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--card-bg);
}

.inbox-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
}

.inbox-filters {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  background: var(--card-bg);
  /* `min-width: 0` on its own keeps the filter row from forcing the
     sidebar wider; we deliberately do NOT set overflow:hidden here
     because the search dropdown anchors to .inbox-search-wrapper
     and needs to escape this container vertically. Horizontal
     containment is delegated to .inbox-filter-tabs below. */
  min-width: 0;
}

.inbox-search-input {
  width: 100%;
  padding: var(--space-1) var(--space-2);
  font-size: 0.8rem;
  margin-bottom: var(--space-2);
}

.inbox-filter-tabs {
  display: flex;
  gap: var(--space-1);
  /* Six pills don't fit in a 280px sidebar at the current font-size,
     so scroll horizontally rather than wrap (wrapping creates an
     uneven two-row header that pushes the channel list down). Hide
     the scrollbar — when it appeared it sat over the pills and made
     them hard to click. Touch / shift-wheel still scroll the row. */
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.inbox-filter-tabs::-webkit-scrollbar {
  display: none;
}

.filter-tab {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: var(--radius);
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
  white-space: nowrap;
}

.filter-tab:hover {
  color: var(--text);
  background: var(--muted-bg);
}

.filter-tab.active {
  color: var(--primary);
  background: var(--primary-bg);
  font-weight: 600;
}

.inbox-sidebar-content {
  flex: 1;
  overflow-y: auto;
}

.channel-group {
  margin-bottom: var(--space-2);
}

.channel-group-header {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: var(--space-2) var(--space-3);
}

.channel-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  text-decoration: none;
  color: var(--text);
  border-radius: var(--radius);
  margin: 0 var(--space-2);
  transition: background 0.12s, border-color 0.12s;
}

/* Win against the global a:hover { text-decoration: underline; } so list
   items don't pick up underline-as-active visual that conflicts with the
   real `.active` highlight. */
.channel-item:hover,
.channel-item:focus,
.channel-item:visited {
  text-decoration: none;
}

.channel-item.active {
  background: var(--primary-100);
  color: var(--primary-700);
  border-left: 3px solid var(--primary);
}

.channel-item:not(.active) {
  border-left: 3px solid transparent;
}

/* Hover on a non-active row: tint with the same primary palette as
   active, but lighter, plus a translucent left border so the user can
   see exactly which row their cursor is targeting. The previous
   `--stone-100` hover was nearly identical to the sidebar's
   `--stone-50` background — visually a no-op. */
.channel-item:not(.active):hover,
.channel-item:not(.active):focus-visible {
  background: var(--primary-50);
  border-left-color: color-mix(in srgb, var(--primary) 30%, transparent);
}

/* When hovering the already-active row, brighten slightly rather than
   change color — confirms the row is interactive without making it
   look like the selection moved. */
.channel-item.active:hover {
  background: color-mix(in srgb, var(--primary-100) 80%, var(--primary) 8%);
}

.channel-item.unread {
  font-weight: 600;
}

.channel-item.unread .channel-name {
  font-weight: 700;
}

.channel-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

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

.channel-name {
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.channel-preview {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.channel-badge {
  flex-shrink: 0;
}

.archived-channel-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 6px 12px;
  border-radius: var(--radius);
  opacity: 0.7;
  transition: opacity 0.15s;
}

.archived-channel-item:hover {
  opacity: 1;
  background: var(--stone-50);
}

.left-channel-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius);
  opacity: 0.65;
  transition: opacity 0.15s;
}

.left-channel-item:hover {
  opacity: 1;
  background: var(--stone-50);
}

.left-channel-item .channel-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  background: var(--stone-200);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Channel type badges in inbox header */
/* Sidebar channel type indicator dot */
.sidebar-channel-indicator {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid var(--surface);
}

.sidebar-channel-indicator-sms {
  background: #16a34a;
}

.sidebar-channel-indicator-email {
  background: #2563eb;
}

.sidebar-channel-indicator-both {
  background: #d97706;
}

.channel-icon {
  position: relative;
}

/* Members panel (slide-in sidebar) */
.members-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 280px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  display: none;
  flex-direction: column;
  z-index: 100;
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1);
  transform: translateX(8px);
  transition: transform 0.2s ease, opacity 0.2s ease;
  opacity: 0;
}

.members-panel.is-open {
  display: flex;
  transform: translateX(0);
  opacity: 1;
}

.members-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.members-panel-header h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

.members-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.member-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--radius);
  transition: background 0.1s;
}

.member-item:hover {
  background: var(--stone-50);
}

.member-item:hover .member-remove {
  opacity: 1;
}

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

.member-name {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.member-remove {
  opacity: 0;
  transition: opacity 0.15s;
  padding: 4px;
  color: var(--text-muted);
}

.member-remove:hover {
  color: var(--danger);
}

.members-add {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}

/* Channel type badges in inbox header */
.channel-badge-sms,
.channel-badge-email,
.channel-badge-both {
  display: inline-flex;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  vertical-align: middle;
}

.channel-badge-sms {
  background: #dcfce7;
  color: #166534;
}

.channel-badge-email {
  background: #dbeafe;
  color: #1e40af;
}

.channel-badge-both {
  background: #fef3c7;
  color: #92400e;
}

.inbox-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.inbox-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inbox-thread-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--card-bg);
}

.inbox-thread-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.inbox-thread-title h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.inbox-context-badge {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: var(--radius);
  background: var(--stone-100);
  color: var(--text-muted);
}

.inbox-thread-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

.inbox-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: relative;
}

.message {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  padding-right: 40px; /* Space for action button */
  border-radius: var(--radius-md);
  transition: background 0.1s;
  position: relative;
}

.message:hover {
  background: rgba(0, 0, 0, 0.025);
}

/* Hairline between message groups (new-sender / new-time cluster) so a
   DM thread or back-and-forth client convo has visible rhythm at rest.
   Grouped follow-up messages from the same sender stay tight (no
   border) — Slack pattern. The first child has no leading border; the
   border is added when the prior sibling was *not* a grouped message
   (i.e., we just started a fresh group). */
.message + .message:not(.message-grouped) {
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  margin-top: 4px;
  padding-top: calc(var(--space-2) + 4px);
}

.message-system {
  justify-content: center;
}

.message-system-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  background: var(--stone-50);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius);
}

.system-message-icon {
  flex-shrink: 0;
  font-size: 0.875rem;
}

.system-message-text {
  font-style: italic;
}

/* Auto-generated (non-system) messages — visually distinct from real
   conversation so operators can scan past system events to find replies.
   Tighter padding, dimmed avatar/sender, and a subtle gray tint that's
   strong enough to read as "the bot did this" at a glance. */
.message-auto {
  background: transparent;
  border-left: none;
  padding: 2px var(--space-2);
  margin-left: 0;
  border-radius: 0;
  position: relative;
}

/* New compact one-line auto-event row. The previous layout reused the
   avatar+sender pattern, which produced "Sarah Johnson AUTO / Sarah Johnson
   has arrived…" — same name twice with redundant AUTO badging. The body
   already describes the action, so we drop avatar+header and lean on a
   tiny info icon + muted text. */
.message-auto-content {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--text-muted);
  padding: 4px 0;
  width: 100%;
  min-width: 0;
}

.message-auto-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--stone-400);
  flex-shrink: 0;
}

.message-auto-body {
  flex: 1;
  min-width: 0;
  line-height: 1.4;
}

.message-auto-body p {
  display: inline;
  margin: 0;
  color: var(--text-muted);
}

.message-auto-actor {
  color: var(--stone-500);
  font-size: 0.75rem;
  margin-left: 4px;
}

.message-auto-time {
  font-size: 0.7rem;
  color: var(--stone-400);
  white-space: nowrap;
  flex-shrink: 0;
}

.message-auto .message-link-action {
  margin-left: 6px;
  font-size: 0.75rem;
}

.message-internal {
  background: var(--warning-light);
  border-left: 3px solid var(--warning);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
}

.message-internal .message-body {
  color: #92400e;
}

.message-internal-badge {
  font-size: 0.6875rem;
  padding: 1px 6px;
  background: var(--warning);
  color: white;
  border-radius: 3px;
  font-weight: 600;
  white-space: nowrap;
}

.mention {
  color: var(--primary);
  font-weight: 600;
}

.avatar-sm {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 600;
  flex-shrink: 0;
}

.message-content {
  flex: 1;
  min-width: 0;
  position: relative;
  margin-right: 12px; /* Reserve space for action button */
}

.message-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.message-sender {
  font-weight: 600;
  font-size: 0.875rem;
  flex-shrink: 0;
}

.message-header .message-time {
  margin-left: auto;
  flex-shrink: 0;
}

.message-time {
  font-size: 0.7rem;
  color: var(--text-muted);
  opacity: 0.6;
  transition: opacity 0.1s;
  flex-shrink: 0;
  white-space: nowrap;
}

.message:hover .message-time {
  opacity: 0;
}

.message-body {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text);
  word-break: break-word;
}

/* --- Message Grouping (Slack-style) ---
   Same-sender follow-up messages stay tight (no avatar, no header
   re-render) but get a small vertical breath so the bodies are still
   visually distinguishable as separate thought-units. Pre-fix, they
   could look like one paragraph. */
.message-grouped {
  padding-top: 3px;
  padding-bottom: 3px;
  margin-top: 0;
  position: relative;
}

.message-grouped .message-gutter {
  width: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.message-time-hover {
  font-size: 0.6rem;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.1s;
  white-space: nowrap;
}

.message-grouped:hover .message-time-hover {
  opacity: 1;
}

/* --- Message Actions (3-dot menu) ---
   Always-visible-but-quiet at rest (40% opacity) so operators
   discover the affordance without needing to hover-hunt. Full opacity
   on row hover or when the menu is open. Slack uses a similar
   "subtle kebab → loud on hover" pattern. */
.message-actions {
  position: absolute;
  right: 8px;
  top: 4px;
  opacity: 0.4;
  transition: opacity 0.15s;
  z-index: 10;
}

.message:hover .message-actions,
.message-actions:focus-within {
  opacity: 1;
}

.message-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: none;
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}

.message-action-btn:hover,
.message-action-btn.active {
  background: var(--primary);
  color: white;
}

.message-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 220px;
  z-index: 100;
  overflow: hidden;
}

.message-menu-item svg {
  flex-shrink: 0;
  color: var(--text-muted);
}
.message-menu-item:hover svg { color: white; }
.message-menu-item-danger svg { color: var(--danger); }

.message-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: none;
  font-size: 0.85rem;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}

.message-menu-item:hover {
  background: var(--primary);
  color: white;
}

.message-menu-item-danger:hover {
  background: var(--danger);
  color: white;
}

/* Divider between the per-message quick-actions cluster (Create job /
   quote / attach / convert to request) and the operator-only edit /
   delete cluster, when both are present in the same kebab menu. */
.message-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* Work-item lifecycle strip — shown above the page title on Job pages
   that originated from a Request and/or Quote. Renders the
   Request → Quote → Job chain as clickable badges. The conversation
   that advanced with the lifecycle holds all of the message history;
   this strip just makes the FK chain navigable. */
.lifecycle-strip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 0.8rem;
  flex-wrap: wrap;
}
.lifecycle-strip-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface-muted, #f1f5f9);
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--border);
  transition: background 0.1s, border-color 0.1s;
}
.lifecycle-strip-step:hover {
  background: var(--primary-light);
  border-color: var(--primary);
}
.lifecycle-strip-current {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
  cursor: default;
}
.lifecycle-strip-current:hover {
  background: var(--primary);
}
.lifecycle-strip-label {
  font-weight: 500;
}
.lifecycle-strip-date {
  font-size: 0.72rem;
  opacity: 0.75;
}
.lifecycle-strip-arrow {
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* Inline "Open job →" link rendered after the body of a linked_record
   system message. Uses metadata jsonb on the message so the body stays
   plain text (see Conversations::LinkRecordToMessage). */
.message-link-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 4px 10px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--primary);
  background: var(--primary-light);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.1s;
}
.message-link-action:hover {
  background: var(--primary);
  color: white;
}

/* --- Attach-to-existing-job modal (per-message quick action) ---
   Lives inside #inbox-modal-frame; injected by inbox#openAttachToJob
   and removed by inbox#closeAttachToJob. */
.inbox-attach-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}

.inbox-attach-modal {
  background: var(--surface);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  max-width: 520px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.inbox-attach-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.inbox-attach-modal-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}

.inbox-attach-modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0 4px;
}
.inbox-attach-modal-close:hover { color: var(--text); }

.inbox-attach-modal-source {
  padding: 12px 20px;
  background: var(--surface-muted, #f8fafc);
  border-bottom: 1px solid var(--border);
}

.inbox-attach-modal-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 6px;
  font-weight: 600;
}

.inbox-attach-modal-quote {
  font-size: 0.85rem;
  color: var(--text);
  line-height: 1.4;
  font-style: italic;
}

.inbox-attach-modal-form {
  padding: 16px 20px 20px;
  overflow-y: auto;
}

.inbox-attach-modal-job-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.inbox-attach-modal-job {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.1s, background 0.1s;
}
.inbox-attach-modal-job:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}
.inbox-attach-modal-job input[type="radio"] {
  margin-top: 3px;
}
.inbox-attach-modal-job-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.inbox-attach-modal-job-title {
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--text);
}
.inbox-attach-modal-job-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.inbox-attach-modal-empty {
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 12px 0;
  text-align: center;
}

.inbox-attach-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* --- Message Inline Edit --- */
.message-inline-edit {
  position: relative;
}

.message-edit-form {
  padding: 4px 0;
}

.message-edit-form textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--primary);
  border-radius: 4px;
  font-size: 0.9rem;
  line-height: 1.4;
  resize: none;
  font-family: inherit;
}

.message-edit-form textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}

.message-edit-form textarea.error {
  border-color: var(--danger);
}

.message-edit-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

/* --- Message Edited Label --- */
.message-edited-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-left: 4px;
  font-style: italic;
}

/* --- Deleted Message --- */
.message-deleted {
  color: var(--text-muted);
  font-style: italic;
}

/* --- Date Separator --- */
.date-separator {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.date-separator::before,
.date-separator::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--border);
}

/* --- Unread Messages Divider --- */
.unread-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  margin: 0.25rem 0;
}

.unread-divider::before,
.unread-divider::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--danger);
}

.unread-divider-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--danger);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* --- Sidebar Channel Name Row (timestamp + name) --- */
.channel-name-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-1);
}

.channel-time {
  font-size: 0.65rem;
  color: var(--text-muted);
  flex-shrink: 0;
  font-weight: 400;
}

.channel-item.unread .channel-time {
  color: var(--primary);
  font-weight: 600;
}

.channel-item.unread .channel-preview {
  font-weight: 600;
  color: var(--text);
}

.channel-preview-sender {
  font-weight: 500;
}

/* --- Drag & Drop Overlay --- */
.drag-overlay {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(var(--primary-rgb, 59, 130, 246), 0.08);
  border: 2px dashed var(--primary);
  border-radius: var(--radius-md);
  z-index: 100;
  align-items: center;
  justify-content: center;
}

.drag-overlay.active {
  display: flex;
}

.drag-overlay-content {
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary);
  background: white;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* --- Emoji Picker --- */
.emoji-picker-wrapper {
  position: relative;
}

.emoji-picker {
  position: absolute;
  bottom: 100%;
  left: 0;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  padding: var(--space-2);
  margin-bottom: 4px;
  z-index: 1000;
  width: 280px;
}

.emoji-picker.hidden {
  display: none;
}

.emoji-picker-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
}

.emoji-picker-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s;
  padding: 0;
}

.emoji-picker-btn:hover {
  background: var(--stone-100);
}

.emoji-trigger-btn {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
  padding: 0;
  opacity: 0.5;
}

.emoji-trigger-btn:hover {
  opacity: 1;
  background: var(--stone-100);
}

.inbox-composer {
  padding: var(--space-2) var(--space-4) var(--space-3);
  border-top: 1px solid var(--border);
  background: var(--card-bg);
}

.composer-form {
  display: flex;
  flex-direction: column;
}

/* Slack-style message input area */
.message-input-area {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: border-color 0.15s;
}

.message-input-area:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-bg);
}

.internal-toggle-btn {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
  padding: 0;
}

.internal-toggle-btn:hover {
  background: var(--stone-100);
}

.internal-toggle-btn.active {
  background: var(--warning-light);
  border-color: var(--warning);
}

/* Composer footer — labeled mode toggle (replaces icon-only lock).
   Sits below the input, shows the current send mode in plain text so
   operators don't have to discover what the icon means. */
.composer-footer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2) 0;
}

.composer-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: all 0.15s;
}

.composer-mode-toggle:hover {
  background: var(--stone-100);
  color: var(--text);
}

.composer-mode-toggle.active {
  background: var(--warning-light);
  border-color: var(--warning);
  color: #92400e;
}

.composer-mode-toggle-icon {
  display: inline-flex;
  align-items: center;
}

.composer-mode-toggle-icon.hidden {
  display: none;
}

/* When in internal mode, tint the whole input area subtly so the
   operator can't miss that they're typing a private note. */
.inbox-composer.composer-internal .message-input-area {
  background: var(--warning-light);
  border-color: var(--warning);
}

/* Client-page timeline composer — Phase 4.1 surface. Reuses the inbox
   composer's input + send button styling so operators see one
   consistent send-message pattern across both surfaces. The channel
   pills below add the explicit SMS / Email / In-app / Internal choice
   that's meaningful here (the inbox composer inherits the channel from
   the conversation; this one is starting from a client and picks). */
.timeline-composer {
  padding: var(--space-3) var(--space-4) var(--space-2);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.timeline-composer .message-input-area {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  transition: border-color 0.15s;
}

.timeline-composer .message-input-area:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-bg);
}

.timeline-composer-subject {
  width: 100%;
  margin-top: var(--space-2);
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.8125rem;
}

.composer-channel-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.channel-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: all 0.15s;
}

.channel-pill input[type="radio"] {
  display: none;
}

.channel-pill:hover {
  background: var(--stone-100);
  color: var(--text);
}

.channel-pill:has(input:checked) {
  background: var(--primary-bg);
  border-color: var(--primary);
  color: var(--primary);
}

.channel-pill-internal:has(input:checked) {
  background: var(--warning-light);
  border-color: var(--warning);
  color: #92400e;
}

.channel-pill-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.channel-pill-disabled:hover {
  background: transparent;
  color: var(--text-muted);
}

.channel-pill-icon {
  display: inline-flex;
  align-items: center;
}

.message-input-area .composer-input-wrapper {
  flex: 1;
  min-width: 0;
  position: relative;
  border: none;
  border-radius: 0;
  overflow: visible;
}

.message-input {
  width: 100%;
  border: none;
  outline: none;
  font-size: 0.9375rem;
  background: transparent;
  font-family: inherit;
  padding: 6px 0;
  resize: none;
  line-height: 1.4;
  min-height: 44px;
}

.message-input::placeholder {
  /* --text-muted isn't defined in this codebase (only --text, --text-secondary,
     --text-light) — the var() resolved to currentColor, so the placeholder
     rendered nearly as dark as real input text. Use --text-light for the
     proper "this is hint copy, not your text" gray. */
  color: var(--text-light);
  opacity: 1;
}

.attachment-upload-icon {
  font-size: 1rem;
  opacity: 0.6;
  transition: opacity 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.attachment-upload:hover .attachment-upload-icon {
  opacity: 1;
}

.send-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--primary);
  color: white;
  cursor: pointer;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
  padding: 0;
}

.send-btn:hover {
  background: var(--primary-dark);
  transform: scale(1.05);
}

.empty-state-sm {
  padding: var(--space-4);
  text-align: center;
  color: var(--text-muted);
}

.empty-state-sm p {
  margin-bottom: var(--space-2);
}

/* Avatar coloring by sender polymorphic type. The same plain stone-200
   circle for every avatar made it impossible at a glance to tell whether
   "S" is Sarah-the-operator or Steve-the-client. Industry tools (Front,
   Intercom, Slack-Connect) consistently differentiate operator vs
   external sender; we mirror that with a teammate-blue tint for User
   senders and a sage-green tint for Client senders. Auto / system rows
   keep the muted stone treatment via the existing .message-auto rule. */
.avatar-sm.avatar-sender-user {
  background: var(--primary-bg);
  color: var(--primary);
}

.avatar-sm.avatar-sender-client {
  background: #d1fae5;
  color: #065f46;
}

/* Thread context strip — surfaces the linked record's state inline so
   operators don't have to click into the Job/Quote/Invoice/Request to
   see basic facts. Replaces a redundant context-link that just repeated
   the conversation title. */
.thread-context-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--stone-50);
  border-bottom: 1px solid var(--border);
  font-size: 0.8125rem;
  color: var(--text-muted);
  flex-wrap: wrap;
}

.thread-context-facts {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

.thread-context-fact {
  display: inline-flex;
  align-items: center;
}

.thread-context-divider {
  color: var(--stone-400);
  user-select: none;
}

.thread-context-client {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
}

.thread-context-client:hover {
  text-decoration: underline;
}

/* Status pills in the context strip — borrow color from the existing
   status-* classes when available, otherwise neutral. */
.thread-context-status {
  text-transform: capitalize;
  font-weight: 500;
  color: var(--text);
}

.thread-context-priority {
  color: var(--warning);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
}

.thread-context-channel {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.thread-context-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--primary);
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

.thread-context-link:hover {
  text-decoration: underline;
}

/* Inbox header overflow menu — kebab dropdown that gathers occasional
   actions (mark all read, browse channels, archived view). Burying these
   matches Slack/Outlook/Discord patterns where mark-all-read is hidden
   to prevent accidental clicks from nuking unread state. */
.inbox-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  position: relative;
}

.inbox-overflow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
}

.inbox-overflow-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  z-index: 50;
  padding: 4px;
  display: flex;
  flex-direction: column;
}

.inbox-overflow-menu.hidden {
  display: none;
}

.inbox-overflow-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.8125rem;
  color: var(--text);
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-family: inherit;
  transition: background 0.1s;
}

.inbox-overflow-item:hover {
  background: var(--stone-100);
}

.inbox-overflow-item form {
  margin: 0;
  width: 100%;
}

/* Defeat button_to's default form-wrapping so the item lays out flat
   inside the menu like a regular link. */
.inbox-overflow-menu form .inbox-overflow-item {
  width: 100%;
}

/* Mobile-only chevron-back in the thread header. Hidden on desktop where
   the sidebar conversation list is always visible. */
.inbox-thread-back {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-right: var(--space-2);
  border-radius: 6px;
  color: var(--text);
  text-decoration: none;
  flex-shrink: 0;
}

.inbox-thread-back:hover {
  background: var(--stone-100);
}

/* List-OR-thread mobile pattern.
   Desktop is a permanent two-pane split; phones can't comfortably show
   both. Toggle visibility based on `data-active-pane` set server-side
   when @active_channel is loaded — same pattern Slack uses on iOS. */
@media (max-width: 768px) {
  .inbox-sidebar,
  .inbox-main {
    width: 100%;
    min-width: 0;
    flex: 1 1 100%;
  }

  .inbox-container[data-active-pane="list"] .inbox-main {
    display: none;
  }

  .inbox-container[data-active-pane="thread"] .inbox-sidebar {
    display: none;
  }

  .inbox-thread-back {
    display: inline-flex;
  }
}

/* --- Collapsible Sidebar Sections --- */
.sidebar-section {
  margin-bottom: var(--space-1);
}

.sidebar-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  transition: color 0.15s;
}

.sidebar-section-header > span:not(.chevron):not(.sidebar-section-actions) {
  flex: 1;
  text-align: left;
  padding-left: 4px;
}

.sidebar-section-header:hover {
  color: var(--text);
}

.sidebar-section-header .chevron {
  font-size: 1rem;
  transition: transform 0.2s ease;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar-section.collapsed .chevron {
  transform: rotate(-90deg);
}

.sidebar-section.collapsed .sidebar-section-content {
  display: none;
}

/* --- Internal Toggle (Slack pattern: lock + "Internal") --- */
.internal-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  color: var(--text-muted);
  border: 1px solid var(--border);
  background: transparent;
  transition: all 0.15s ease;
  user-select: none;
}

.internal-toggle:hover {
  background: var(--bg-secondary);
}

.internal-toggle.internal-active {
  background: var(--warning-light);
  border-color: var(--warning);
}

.internal-toggle.internal-active span {
  color: var(--warning);
}

.internal-toggle input {
  display: none;
}

/* ============================================
   Inbox — Extended Styles
   ============================================ */

/* Sidebar header */
.inbox-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.inbox-new-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  padding: 4px 10px;
}

.inbox-unread-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: var(--primary);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0 4px;
  margin-left: 4px;
}

/* Search wrapper with icon */
.inbox-search-wrapper {
  position: relative;
  margin-bottom: var(--space-2);
}

.inbox-search-icon {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.inbox-search-input {
  width: 100%;
  padding: var(--space-1) var(--space-2) var(--space-1) 28px !important;
  font-size: 0.8rem;
}

/* ── Slack-style instant search dropdown (top of inbox column) ──
   Lives inside .inbox-search-wrapper which is position:relative; the
   dropdown floats just under the input. Three sections (Conversations,
   Work items, Clients) each with a small uppercase label header and
   keyboard-navigable item rows. */
.inbox-search-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
  z-index: 200;
  max-height: 480px;
  overflow-y: auto;
  padding: 6px 0;
}

.inbox-search-section + .inbox-search-section {
  border-top: 1px solid var(--border);
  margin-top: 4px;
  padding-top: 4px;
}

.inbox-search-section-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 600;
  padding: 6px 14px 4px;
}

.inbox-search-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  text-decoration: none;
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
  border-left: 2px solid transparent;
}
.inbox-search-item:hover,
.inbox-search-item.selected {
  background: var(--primary-light);
  border-left-color: var(--primary);
  color: var(--text);
}

.inbox-search-item-icon {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-muted, #f1f5f9);
  color: var(--text-muted);
  flex-shrink: 0;
}
.inbox-search-item-icon[data-kind="job"]     { background: #fef3c7; color: #b45309; }
.inbox-search-item-icon[data-kind="quote"]   { background: #dbeafe; color: #1d4ed8; }
.inbox-search-item-icon[data-kind="request"] { background: #ede9fe; color: #6d28d9; }
.inbox-search-item-icon[data-kind="client"]  { background: #d1fae5; color: #047857; }

.inbox-search-item-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.inbox-search-item-title {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inbox-search-item-subtitle {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inbox-search-empty {
  padding: 16px 14px;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
}

/* Section header with action buttons */
.sidebar-section-header {
  gap: 4px;
  position: relative;
}

.sidebar-section-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.15s;
}

.sidebar-section-header:hover .sidebar-section-actions {
  opacity: 1;
}

.sidebar-section-btn {
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  padding: 0;
  transition: all 0.15s;
  text-decoration: none;
}

.sidebar-section-btn:hover {
  background: var(--stone-200);
  color: var(--text);
}

/* Sidebar empty hint */
.sidebar-empty-hint {
  padding: 4px 12px 8px;
}

.sidebar-empty-btn {
  font-size: 0.75rem;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  text-align: left;
  transition: color 0.15s;
}

.sidebar-empty-btn:hover {
  color: var(--primary);
}

/* Welcome state when no conversations */
.inbox-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  gap: 12px;
  color: var(--text-muted);
}

.inbox-welcome-icon {
  opacity: 0.4;
}

.inbox-welcome-text {
  font-size: 0.875rem;
  margin: 0;
}

/* Thread header improvements
 *
 * Layout invariants the conversation header relies on:
 *   .inbox-thread-header  →  flex row, justify-content: space-between
 *     .inbox-thread-title  →  flex row, must shrink under pressure
 *       .inbox-thread-name →  icon + h3, must let h3 truncate
 *         h3 → white-space: nowrap + ellipsis
 *     .inbox-thread-actions → pin/members/settings icons, fixed-size
 *
 * The h3's truncation rules only fire when EVERY ancestor flex item up
 * to the header has min-width: 0 (default is min-width: auto, which
 * blocks shrinking below content size). Without min-width: 0 on
 * .inbox-thread-title and .inbox-thread-name, a long subject like
 * "Request #514 — Weekly residential clean (3 BR ranch)" pushes the
 * h3 out of its container and crashes into the action buttons on the
 * right. Symptom is most visible at narrow widths (the embedded demo
 * iframe at ~1034px). See Drew 2026-05-09. */
.inbox-thread-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 0;
  overflow: hidden;
}

.inbox-thread-icon {
  color: var(--text-muted);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.inbox-thread-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  flex: 1 1 0;
  overflow: hidden;
}

.inbox-thread-title h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.inbox-thread-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.inbox-meta-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  padding: 2px 7px;
  border-radius: var(--radius);
  background: var(--stone-100);
  color: var(--text-muted);
  text-decoration: none;
  transition: background 0.15s;
  white-space: nowrap;
}

.inbox-meta-badge:hover {
  background: var(--stone-200);
  color: var(--text);
}

.inbox-meta-client {
  color: var(--primary-700);
  background: var(--primary-100);
}

.inbox-meta-client:hover {
  background: var(--primary-200);
}

.inbox-meta-context {
  color: var(--stone-600);
}

/* Members count badge on button */
.members-count-badge {
  font-size: 11px;
  font-weight: 600;
  margin-left: 2px;
  color: var(--text-muted);
}

/* Member avatar */
.member-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}

/* Members add form */
.members-add-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 8px;
}

.members-add-row {
  display: flex;
  gap: 6px;
}

.members-add-select {
  flex: 1;
  font-size: 13px;
  padding: 6px 8px;
}

/* Btn icon-only variant */
.btn-icon-only {
  padding: 6px;
  min-width: 32px;
}

/* Composer channel hint */
.composer-channel-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  padding: 5px 12px;
  border-radius: var(--radius) var(--radius) 0 0;
  margin-bottom: -1px;
  position: relative;
  z-index: 1;
}

.composer-channel-hint-sms {
  background: #dcfce7;
  color: #166534;
}

.composer-channel-hint-email {
  background: #dbeafe;
  color: #1e40af;
}

/* EDGE_CASES.md §8.5 — SMS segment-count badge in the composer hint.
   Default tone matches the surrounding hint; warning + error tones
   step up as the operator drifts toward the per-message cap. */
.sms-counter {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}

.sms-counter-warning {
  color: #92400e;
  background: #fef3c7;
  padding: 2px 8px;
  border-radius: var(--radius);
  opacity: 1;
}

.sms-counter-error {
  color: #991b1b;
  background: #fee2e2;
  padding: 2px 8px;
  border-radius: var(--radius);
  font-weight: 600;
  opacity: 1;
}

/* Internal note visual state in composer */
.message-input-area.is-internal {
  border-color: var(--warning);
  background: #fffbeb;
}

/* Closed conversation notice */
.inbox-closed-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--stone-50);
  border-top: 1px solid var(--border);
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* ---- New Conversation Dialog ---- */
.inbox-dialog {
  border: none;
  padding: 0;
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
  width: 580px;
  max-width: 92vw;
  max-height: 88vh;
  overflow-y: auto;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

.inbox-dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
}

.inbox-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px 24px 16px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}

.inbox-dialog-title {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 2px;
}

.inbox-dialog-subtitle {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin: 0;
}

.inbox-dialog-body {
  padding: 20px 24px;
  padding-top: 0;
}

.settings-section {
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

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

.settings-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 0 0 12px 0;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.settings-row-info {
  flex: 1;
}

.settings-row-label {
  font-size: 14px;
  font-weight: 500;
}

.settings-row-desc {
  font-size: 12px;
  margin-top: 2px;
}

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

.settings-info-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.settings-info-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.settings-info-value {
  font-size: 14px;
  font-weight: 500;
}

.settings-actions-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settings-action-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: transparent;
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  transition: background 0.1s;
  text-align: left;
}

.settings-action-btn:hover {
  background: var(--stone-100);
}

.settings-action-btn svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

.settings-action-btn-danger {
  color: var(--danger);
}

.settings-action-btn-danger svg {
  color: var(--danger);
}

.settings-action-btn-danger:hover {
  background: var(--danger-light);
}
  padding: 20px 24px;
}

.inbox-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  margin-top: 16px;
}

/* Channel type picker (radio buttons styled as cards) */
.channel-type-options {
  display: flex;
  gap: 10px;
}

.channel-type-option {
  flex: 1;
  cursor: pointer;
}

.channel-type-option input[type="radio"] {
  display: none;
}

.channel-type-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 10px;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  text-align: center;
  transition: all 0.15s;
  color: var(--text-muted);
  background: var(--bg);
}

.channel-type-card span {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
}

.channel-type-card small {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.channel-type-card:hover {
  border-color: var(--primary-300);
  background: var(--primary-50, #f0f4ff);
}

.channel-type-option input[type="radio"]:checked + .channel-type-card {
  border-color: var(--primary);
  background: var(--primary-50, #f0f4ff);
  color: var(--primary);
}

.channel-type-option input[type="radio"]:checked + .channel-type-card span {
  color: var(--primary);
}

/* ---- Browse Channels Modal ---- */
#inbox-modal-frame:not(:empty) {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: block;
}

.inbox-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.inbox-modal-card {
  background: white;
  border-radius: 14px;
  width: 540px;
  max-width: 92vw;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
}

.browse-channels-section-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 0 0 8px;
}

.browse-channels-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.browse-channels-joined {
  opacity: 0.7;
}

.browse-channel-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  transition: background 0.1s;
}

.browse-channel-item:hover {
  background: var(--stone-50);
}

.browse-channel-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--primary-100);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

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

.browse-channel-name {
  font-size: 0.875rem;
  font-weight: 600;
}

.browse-channel-meta {
  font-size: 0.75rem;
}

.browse-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.875rem;
}

/* ============================================
   V2 DASHBOARD: Business Pulse Layout
   ============================================ */

/* --- Today's Focus Card (full-width) --- */
.dashboard-pulse {
  margin-bottom: var(--space-4);
}

.dashboard-pulse .card-body {
  padding: var(--space-5) var(--space-6);
}

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

.pulse-stats {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.pulse-stat {
  flex: 1;
  min-width: 120px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pulse-stat-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.pulse-stat-label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}

/* --- What Needs Attention (2-column) --- */
.dashboard-attention {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.attention-card .card-body {
  padding: var(--space-4) var(--space-5);
}

.attention-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
}

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

.attention-item-alert {
  background: var(--danger-light);
  margin: 0 calc(var(--space-3) * -1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border-bottom: none;
  margin-bottom: var(--space-2);
}

.attention-item-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.attention-item-detail {
  font-size: 13px;
  color: var(--text-secondary);
}

.attention-item-action {
  font-size: 13px;
  font-weight: 500;
  color: var(--primary);
  text-decoration: none;
}

.attention-item-action:hover {
  text-decoration: underline;
}

/* --- Revenue Trend Card --- */
.revenue-trend .card-body {
  padding: var(--space-4) var(--space-5);
}

.trend-row {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}

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

.trend-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.trend-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

.trend-amount {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.trend-indicator {
  font-size: 12px;
  font-weight: 600;
  margin-left: var(--space-2);
}

.trend-indicator.up {
  color: var(--success);
}

.trend-indicator.down {
  color: var(--danger);
}

/* --- Responsive: V2 stacks on mobile --- */
@media (max-width: 768px) {
  .pulse-stats {
    gap: var(--space-2);
  }

  .pulse-stat {
    min-width: 100px;
  }

  .dashboard-attention {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   Status Path (Salesforce-style chevron bar)
   ============================================ */

.status-path-wrapper {
  margin-bottom: var(--space-4);
}

.status-path {
  display: flex;
  align-items: stretch;
  height: 46px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  overflow: hidden;
  background: var(--gray-100);
}

.status-path-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--surface);
  cursor: pointer;
  border: none;
  border-right: 1px solid var(--border);
  padding: 0 4px 0 18px;
  position: relative;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
  text-decoration: none;
}

/* Chevron arrow pointing right using ::after */
.status-path-stage:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -14px;
  top: -1px;
  width: 0;
  height: 0;
  border-top: 24px solid transparent;
  border-bottom: 24px solid transparent;
  border-left: 14px solid var(--surface);
  z-index: 2;
  transition: border-left-color var(--transition-fast);
}

/* Non-first stages get extra left padding to accommodate the arrow indent */
.status-path-stage:not(:first-child) {
  padding-left: 20px;
}

.status-path-stage:first-child {
  padding-left: 14px;
}

.status-path-stage:last-child {
  border-right: none;
  padding-right: 14px;
}

/* Stacking: earlier stages sit on top so their arrow appears above the next stage */
.status-path-stage:nth-child(1) { z-index: 12; }
.status-path-stage:nth-child(2) { z-index: 11; }
.status-path-stage:nth-child(3) { z-index: 10; }
.status-path-stage:nth-child(4) { z-index: 9; }
.status-path-stage:nth-child(5) { z-index: 8; }
.status-path-stage:nth-child(6) { z-index: 7; }
.status-path-stage:nth-child(7) { z-index: 6; }
.status-path-stage:nth-child(8) { z-index: 5; }

/* Past stages — completed steps */
.status-path-stage.is-past {
  background: var(--primary-light);
  color: var(--primary-dark);
}
.status-path-stage.is-past::after {
  border-left-color: var(--primary-light);
}

/* Current stage */
.status-path-stage.is-current {
  background: var(--primary);
  color: var(--text-inverse);
  font-weight: 600;
  cursor: default;
}
.status-path-stage.is-current::after {
  border-left-color: var(--primary);
}

/* Terminal success (completed / converted) */
.status-path-stage.is-terminal-success.is-current {
  background: var(--success);
  color: var(--text-inverse);
}
.status-path-stage.is-terminal-success.is-current::after {
  border-left-color: var(--success);
}
.status-path-stage.is-terminal-success.is-past {
  background: var(--success-light);
  color: var(--green-700);
}
.status-path-stage.is-terminal-success.is-past::after {
  border-left-color: var(--success-light);
}

/* Terminal danger (cancelled / rejected) */
.status-path-stage.is-terminal-danger.is-current {
  background: var(--danger);
  color: var(--text-inverse);
}
.status-path-stage.is-terminal-danger.is-current::after {
  border-left-color: var(--danger);
}

/* Hover on non-current stages */
.status-path-stage:not(.is-current):not([disabled]):hover {
  background: var(--gray-100);
  color: var(--text);
}
.status-path-stage:not(.is-current):not([disabled]):hover::after {
  border-left-color: var(--gray-100);
}
.status-path-stage.is-past:not(.is-current):hover {
  background: var(--blue-100);
  color: var(--primary-dark);
}
.status-path-stage.is-past:not(.is-current):hover::after {
  border-left-color: var(--blue-100);
}

/* Disabled state */
.status-path-stage[disabled],
.status-path-stage.is-current {
  pointer-events: none;
}

/* Check icon inside past stages */
.status-path-check {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* Footer row below the path for secondary actions */
.status-path-footer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* Converted-job banner shown on converted requests */
.converted-job-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--success-light);
  border: 1px solid #86efac;
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--green-700);
  margin-bottom: var(--space-4);
}

.converted-job-banner a {
  color: var(--green-700);
  font-weight: 600;
  text-decoration: underline;
}

/* Inbox-scoped status-path wrapper. The shared status-path uses flex:1 on
   each stage which is fine on a Job/Quote show page (full content width)
   but clips labels and chevron points when squeezed into the inbox right
   pane (~750px at 1200vw). Scroll the wrapper instead. Critical: the
   scroll container itself needs min-width:0 so the layout doesn't bubble
   the inner max-content min back up — otherwise main expands wider than
   viewport on mobile and the whole page gains a horizontal scrollbar. */
.thread-status-path {
  padding: 0 var(--space-4) var(--space-3);
  min-width: 0;
}

.thread-status-path .status-path-wrapper {
  margin-bottom: 0;
  min-width: 0;
  overflow-x: auto;
}

.thread-status-path .status-path {
  min-width: max-content;
  height: 38px;
}

.thread-status-path .status-path-stage {
  flex: 0 0 auto;
  min-width: 0;
  padding: 0 14px 0 22px;
  font-size: 11px;
}

.thread-status-path .status-path-stage:first-child {
  padding-left: 14px;
}

.thread-status-path .status-path-stage:not(:last-child)::after {
  border-top-width: 20px;
  border-bottom-width: 20px;
  border-left-width: 12px;
  right: -12px;
}

/* Source request banner shown on jobs created from a request */
.source-request-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--primary-light);
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--primary-dark);
  margin-bottom: var(--space-4);
}

.source-request-banner a {
  color: var(--primary-dark);
  font-weight: 600;
  text-decoration: underline;
}

@media (max-width: 768px) {
  .status-path {
    height: auto;
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .status-path-stage {
    min-width: 80px;
    font-size: 11px;
    padding: 10px 4px 10px 14px;
  }
}

/* Notification Dropdown */
.notification-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  width: 380px;
  max-height: 500px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.12);
  overflow: hidden;
  z-index: 1000;
  display: flex;
  flex-direction: column;
}

.notification-bell {
  position: relative;
}

/* Notification badge — uses the same primary-blue treatment as the
   inbox unread count and per-conversation badges. The previous red
   (#ef4444) was visually inconsistent with the rest of the app's
   "X items awaiting your attention" indicators. Reserve red for
   actual error / urgent / destructive states. */
.notification-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--primary);
  color: white;
  font-size: 10px;
  font-weight: 600;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
}

.notification-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  width: 380px;
  max-height: 500px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.12);
  overflow: hidden;
  display: none;
  z-index: 1000;
}

.notification-menu.is-open {
  display: block;
}

.notification-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}

.notification-header strong {
  font-size: 14px;
  color: #1e293b;
}

.notification-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.notification-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #f1f5f9;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
  position: relative;
}

.notification-item:hover {
  background: #f8fafc;
}

.notification-item.unread {
  background: #eff6ff;
}

.notification-item.unread:hover {
  background: #dbeafe;
}

.notification-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #64748b;
}

.notification-item.unread .notification-icon {
  background: #dbeafe;
  color: #3b82f6;
}

.notification-content {
  flex: 1;
  min-width: 0;
}

.notification-title {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 2px;
}

.notification-body {
  font-size: 12px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notification-time {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 4px;
}

.notification-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3b82f6;
  flex-shrink: 0;
  margin-top: 6px;
}

.notification-empty {
  text-align: center;
  padding: 40px 20px;
  color: #94a3b8;
}

.notification-empty svg {
  margin-bottom: 12px;
}

.notification-empty p {
  font-size: 13px;
}

.notification-footer {
  padding: 12px 16px;
  text-align: center;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
}

.notification-footer a {
  font-size: 13px;
  font-weight: 500;
  color: #3b82f6;
  text-decoration: none;
}

.notification-footer a:hover {
  text-decoration: underline;
}

.notification-bell-trigger {
  position: relative;
}

@media (max-width: 768px) {
  .notification-menu {
    width: calc(100vw - 32px);
    right: -8px;
  }
}

/* Toggle Switch */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid #e2e8f0;
}

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

.toggle-info {
  flex: 1;
  padding-right: 16px;
}

.toggle-label {
  font-weight: 500;
  font-size: 15px;
  color: #1e293b;
}

.toggle-description {
  font-size: 13px;
  color: #64748b;
  margin-top: 2px;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #cbd5e1;
  transition: 0.2s;
  border-radius: 24px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.2s;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked + .toggle-slider {
  background-color: #3b82f6;
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(20px);
}

.card-footer {
  padding: 16px 24px;
  border-top: 1px solid #e2e8f0;
  display: flex;
  justify-content: flex-end;
}

/* ============================================
   Message Attachments
   ============================================ */

.message-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.attachment-thumbnail {
  position: relative;
  max-width: 200px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
}

.attachment-thumbnail img {
  width: 100%;
  max-height: 150px;
  object-fit: cover;
  display: block;
}

.attachment-thumbnail .attachment-info {
  padding: 6px 8px;
  font-size: 12px;
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.attachment-thumbnail .attachment-name {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}

.attachment-thumbnail .attachment-size {
  display: block;
  color: var(--text-light);
  font-size: 11px;
}

.attachment-file {
  display: inline-flex;
  align-items: center;
}

.attachment-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  transition: all 0.15s ease;
}

.attachment-link:hover {
  background: var(--primary-light);
  border-color: var(--primary);
}

.attachment-icon {
  font-size: 20px;
}

.attachment-details {
  display: flex;
  flex-direction: column;
}

.attachment-name {
  font-size: 13px;
  font-weight: 500;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.attachment-size {
  font-size: 11px;
  color: var(--text-light);
}

/* Attachment Upload Button */
.attachment-upload {
  cursor: pointer;
}

.attachment-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s ease;
}

.attachment-upload-btn:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
}

/* Attachment Preview in Form */
.attachment-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0;
}

.attachment-preview:empty {
  display: none;
}

.attachment-preview-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 13px;
}

.attachment-preview-item img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
}

.attachment-preview-icon {
  font-size: 20px;
}

.attachment-preview-info {
  display: flex;
  flex-direction: column;
}

.attachment-preview-name {
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}

.attachment-preview-size {
  font-size: 11px;
  color: var(--text-light);
}

.attachment-preview-remove {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--text-light);
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.attachment-preview-remove:hover {
  color: var(--danger);
}

/* Mentions Dropdown */
.mentions-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
  margin-bottom: 4px;
}

.mentions-dropdown.hidden {
  display: none;
}

.mention-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.1s;
}

.mention-option:hover {
  background: var(--primary-light);
}

.mention-name {
  font-weight: 500;
  color: var(--text);
}

.mention-role {
  font-size: 12px;
  color: var(--text-light);
  text-transform: capitalize;
}

/* Selected Mentions */
.selected-mentions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.mention-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--primary-light);
  color: var(--primary);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 500;
}

.mention-remove {
  cursor: pointer;
  font-size: 14px;
  opacity: 0.7;
}

.mention-remove:hover {
  opacity: 1;
}

/* Internal Toggle */
.internal-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-md);
  transition: all 0.15s ease;
}

.internal-toggle:hover {
  background: var(--bg-secondary);
}

.internal-toggle.internal-active {
  background: var(--warning-light);
}

.internal-toggle.internal-active span {
  color: var(--warning);
}

/* ============================================
   MARKETING SITE
   ============================================ */

.marketing-body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-family);
  line-height: 1.6;
}

/* --- Nav --- */
.marketing-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.marketing-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.marketing-logo {
  font-size: 20px;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  letter-spacing: -0.5px;
}

.marketing-logo:hover {
  color: var(--primary-dark);
  text-decoration: none;
}

.marketing-nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.marketing-nav-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color var(--transition-fast);
}

.marketing-nav-links a:hover {
  color: var(--text);
  text-decoration: none;
}

.marketing-nav-login {
  margin-right: var(--space-2);
}

.marketing-nav-links .btn-primary {
  color: #ffffff;
}

.marketing-nav-links .btn-primary:hover {
  color: #ffffff;
}

.marketing-nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  padding: var(--space-2);
}

/* --- Hero --- */
.marketing-hero {
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--bg) 100%);
  padding: var(--space-12) var(--space-6);
  text-align: center;
}

.marketing-hero-inner {
  max-width: 800px;
  margin: 0 auto;
}

.marketing-hero h1 {
  font-size: 48px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -1px;
  color: var(--text);
  margin-bottom: var(--space-4);
}

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

.marketing-hero-subtitle {
  font-size: 20px;
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto var(--space-8);
  line-height: 1.6;
}

.marketing-hero-cta {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  margin-bottom: var(--space-10);
  flex-wrap: wrap;
}

.marketing-hero-cta .btn-primary {
  color: #ffffff;
}

.marketing-hero-cta .btn-primary:hover {
  color: #ffffff;
}

.marketing-hero-mockup {
  max-width: 900px;
  margin: 0 auto;
}

.marketing-hero-placeholder {
  background: var(--surface);
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-12) var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: var(--text-light);
  font-size: 14px;
  min-height: 200px;
}

.marketing-screenshot-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: 0 20px 40px -12px rgba(15, 23, 42, 0.18), 0 8px 16px -8px rgba(15, 23, 42, 0.08);
}

/* --- Sections --- */
.marketing-section {
  padding: var(--space-12) var(--space-6);
}

.marketing-section-alt {
  background: var(--surface);
}

.marketing-container {
  max-width: 1200px;
  margin: 0 auto;
}

.marketing-container-narrow {
  max-width: 700px;
  margin: 0 auto;
}

.marketing-center {
  text-align: center;
}

.marketing-section-title {
  font-size: 36px;
  font-weight: 700;
  text-align: center;
  margin-bottom: var(--space-3);
  letter-spacing: -0.5px;
  color: var(--text);
}

.marketing-section-subtitle {
  font-size: 18px;
  color: var(--text-secondary);
  text-align: center;
  max-width: 600px;
  margin: 0 auto var(--space-8);
  line-height: 1.6;
}

/* --- Feature Grid --- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
}

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

.feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.feature-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.feature-card-icon {
  font-size: 32px;
  margin-bottom: var(--space-3);
}

.feature-card h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: var(--space-2);
  color: var(--text);
}

.feature-card p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* --- Feature Detail Pages --- */
.marketing-feature-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  align-items: center;
}

.marketing-feature-reverse {
  direction: rtl;
}

.marketing-feature-reverse > * {
  direction: ltr;
}

.marketing-feature-text h2 {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 30px;
  font-weight: 700;
  margin-bottom: var(--space-4);
  color: var(--text);
}

.marketing-feature-text h2 .feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  flex-shrink: 0;
  line-height: 0;
}

.marketing-feature-text p {
  font-size: 16px;
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
  line-height: 1.7;
}

.marketing-feature-text ul {
  list-style: none;
  padding: 0;
}

.marketing-feature-text ul li {
  padding: var(--space-2) 0;
  font-size: 14px;
  color: var(--text-secondary);
  position: relative;
  padding-left: var(--space-6);
}

.marketing-feature-text ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--success);
  font-weight: 700;
}

.marketing-feature-image {
  display: flex;
  justify-content: center;
}

/* --- How It Works --- */
.how-it-works {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.how-step {
  text-align: center;
  max-width: 280px;
}

.how-step-number {
  width: 48px;
  height: 48px;
  background: var(--primary);
  color: var(--text-inverse);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  margin: 0 auto var(--space-4);
}

.how-step h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.how-step p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.how-step-arrow {
  font-size: 24px;
  color: var(--text-light);
  padding-top: var(--space-3);
}

/* --- FAQ --- */
.faq-list {
  max-width: 700px;
  margin: 0 auto;
}

.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  background: var(--surface);
}

.faq-item summary {
  padding: var(--space-4) var(--space-5);
  font-weight: 600;
  cursor: pointer;
  font-size: 15px;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  font-size: 20px;
  color: var(--text-light);
  font-weight: 300;
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-item p {
  padding: 0 var(--space-5) var(--space-4);
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* --- CTA Section --- */
.marketing-cta-section {
  background: var(--primary);
  padding: var(--space-12) var(--space-6);
  text-align: center;
}

.marketing-cta-section h2 {
  font-size: 36px;
  font-weight: 700;
  color: var(--text-inverse);
  margin-bottom: var(--space-3);
}

.marketing-cta-section p {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: var(--space-6);
}

.marketing-cta-section .btn-primary {
  background: var(--surface);
  color: var(--primary);
}

.marketing-cta-section .btn-primary:hover {
  background: var(--bg);
}

/* --- Pricing --- */
.pricing-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.pricing-toggle-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
}

.pricing-switch {
  position: relative;
  width: 48px;
  height: 26px;
}

.pricing-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.pricing-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--border);
  border-radius: var(--radius-full);
  transition: var(--transition-fast);
}

.pricing-slider::before {
  content: "";
  position: absolute;
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background: var(--surface);
  border-radius: 50%;
  transition: var(--transition-fast);
}

.pricing-switch input:checked + .pricing-slider {
  background: var(--primary);
}

.pricing-switch input:checked + .pricing-slider::before {
  transform: translateX(22px);
}

.pricing-badge {
  background: var(--success-light);
  color: var(--success);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  vertical-align: middle;
}

.pricing-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}

.pricing-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  position: relative;
  display: flex;
  flex-direction: column;
}

.pricing-card-popular {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}

.pricing-popular-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: var(--text-inverse);
  font-size: 12px;
  font-weight: 600;
  padding: 2px 14px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.pricing-card-name {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.pricing-card-price {
  margin-bottom: var(--space-3);
}

.pricing-amount {
  font-size: 40px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -1px;
}

.pricing-period {
  font-size: 14px;
  color: var(--text-light);
}

.pricing-card-desc {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: var(--space-5);
}

.pricing-card-features {
  list-style: none;
  padding: 0;
  margin-bottom: var(--space-6);
  flex: 1;
}

.pricing-card-features li {
  padding: var(--space-2) 0;
  font-size: 13px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--bg);
}

.pricing-card-features li:last-child {
  border-bottom: none;
}

.pricing-feature-no {
  opacity: 0.5;
}

/* Footer rules used to live here under .marketing-footer-*; deleted
 * 2026-05-09 once every marketing page consolidated onto the shared
 * .hv2-footer markup in app/views/layouts/marketing.html.erb (styled
 * in app/views/marketing/_styles.html.erb under "Footer (T1.8)"). */

/* --- Legal Pages --- */
.marketing-legal {
  max-width: 750px;
}

.marketing-legal h1 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.marketing-legal-updated {
  color: var(--text-light);
  font-size: 14px;
  margin-bottom: var(--space-8);
}

.marketing-legal h2 {
  font-size: 20px;
  font-weight: 600;
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
  color: var(--text);
}

.marketing-legal p,
.marketing-legal li {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: var(--space-3);
}

.marketing-legal ul {
  padding-left: var(--space-6);
}

.marketing-legal a {
  color: var(--primary);
}

/* --- About Page --- */
.marketing-about-content {
  max-width: 700px;
  margin: 0 auto;
}

.marketing-about-content h2 {
  font-size: 24px;
  font-weight: 600;
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
  color: var(--text);
}

.marketing-about-content p {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: var(--space-4);
}

/* --- Contact Page --- */
.marketing-contact-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-10);
}

.marketing-contact-item {
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.marketing-contact-item h3 {
  font-size: 16px;
  margin-bottom: var(--space-2);
}

.marketing-contact-item p {
  font-size: 14px;
  color: var(--text-secondary);
}

.marketing-contact-form h2 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: var(--space-5);
  text-align: center;
}

.marketing-contact-form .form-group {
  margin-bottom: var(--space-4);
}

.marketing-contact-form textarea.form-input {
  resize: vertical;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .pricing-cards {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .marketing-feature-detail {
    grid-template-columns: 1fr;
  }

  .marketing-feature-reverse {
    direction: ltr;
  }
}

@media (max-width: 768px) {
  .marketing-nav-toggle {
    display: block;
  }

  .marketing-nav-links {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--surface);
    flex-direction: column;
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--border);
    gap: var(--space-3);
  }

  .marketing-nav-links.open {
    display: flex;
  }

  .marketing-hero h1 {
    font-size: 32px;
  }

  .marketing-hero-subtitle {
    font-size: 16px;
  }

  .marketing-section-title {
    font-size: 28px;
  }

  .pricing-cards {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
  }

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

  .how-it-works {
    flex-direction: column;
    align-items: center;
  }

  .how-step-arrow {
    transform: rotate(90deg);
  }

  .marketing-contact-info {
    grid-template-columns: 1fr;
  }

  .marketing-cta-section h2 {
    font-size: 28px;
  }
}

/* Form details/summary */
.form-details {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0;
}

.form-details[open] {
  padding-bottom: 1rem;
}

.form-details-summary {
  padding: 0.75rem 1rem;
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--text-muted);
  cursor: pointer;
  list-style: none;
}

.form-details-summary::-webkit-details-marker {
  display: none;
}

.form-details-summary::before {
  content: "▸";
  margin-right: 0.5rem;
  display: inline-block;
  transition: transform 0.2s;
}

.form-details[open] .form-details-summary::before {
  transform: rotate(90deg);
}

.form-details-summary:hover {
  color: var(--text);
}

/* Confirmation Dialog (turbo_confirm) */
dialog {
  border: none;
  border-radius: 12px;
  padding: 0;
  max-width: 400px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

dialog::backdrop {
  background: rgba(0,0,0,0.5);
}

dialog .modal-header {
  padding: 1.5rem;
  border-bottom: 1px solid var(--border);
}

dialog .modal-body {
  padding: 1.5rem;
}

dialog .modal-footer {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
  border-radius: 0 0 12px 12px;
}

/* ============================================
   Photo Grid / Attachments
   ============================================ */

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

.photo-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: box-shadow var(--transition-fast);
}

.photo-card:hover {
  box-shadow: var(--shadow-md);
}

.photo-thumb {
  position: relative;
  aspect-ratio: 1;
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-link {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.photo-link-doc {
  flex-direction: column;
  padding: 20px;
}

.photo-category-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0,0,0,0.6);
  color: white;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  text-transform: capitalize;
}

.photo-remove-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.photo-card:hover .photo-remove-btn {
  opacity: 1;
}

.photo-remove-btn:hover {
  background: var(--danger);
}

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

.photo-caption {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.photo-meta {
  font-size: 11px;
  color: var(--text-light);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
}

/* Lightbox */
.photo-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  z-index: 2000;
  align-items: center;
  justify-content: center;
}

.photo-lightbox.is-open {
  display: flex;
}

.photo-lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--radius-lg);
}

.photo-lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  color: white;
  font-size: 32px;
  background: none;
  border: none;
  cursor: pointer;
}

/* ── SMS Styles ── */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--gray-300);
  transition: 0.3s;
  border-radius: 24px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked + .toggle-slider {
  background-color: var(--primary);
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(20px);
}

.sms-message-outbound {
  background: var(--primary-50);
  margin-left: 24px;
}

.sms-message-inbound {
  background: var(--gray-50);
  margin-right: 24px;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .photo-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  
  .photo-remove-btn {
    opacity: 1;
  }
}

/* Notifications Page */
.notification-list-page {
  display: flex;
  flex-direction: column;
}
.notification-item-page {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.notification-item-page:last-child {
  border-bottom: none;
}
.notification-item-page:hover {
  background: var(--bg-secondary);
}
.notification-item-page.unread {
  background: #eff6ff;
}
.notification-item-page.unread:hover {
  background: #dbeafe;
}
.notification-mark-read {
  background: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  flex-shrink: 0;
  margin-top: 2px;
}
.notification-mark-read:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

/* ===== Assessment Job Calendar Events ===== */
.calendar-mini-event-assessment,
.calendar-week-event-assessment,
.resource-job-assessment {
  border-left: 3px solid var(--purple-500, #8b5cf6);
}

.calendar-assessment-tag {
  display: inline-block;
  padding: 1px 6px;
  margin-right: 4px;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--purple-900, #4c1d95);
  background: var(--purple-100, #ede9fe);
  border-radius: var(--radius-sm, 3px);
  vertical-align: middle;
}

/* ===== Client Typeahead Picker (audit P0 #1) ===== */
.client-typeahead {
  position: relative;
}

.client-typeahead-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 4px 0 0;
  padding: 4px 0;
  list-style: none;
  background: white;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius-md, 6px);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));
  max-height: 300px;
  overflow-y: auto;
  z-index: 50;
  display: none;
}

.client-typeahead-results.is-open {
  display: block;
}

.client-typeahead-item {
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
}

.client-typeahead-item.is-active,
.client-typeahead-item:hover {
  background: var(--gray-50, #f9fafb);
}

.client-typeahead-item strong {
  font-weight: 500;
  color: var(--text, #111827);
}

.client-typeahead-meta {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
}

.client-typeahead-empty {
  padding: 12px;
  text-align: center;
  color: var(--text-muted, #6b7280);
  font-size: 13px;
}

/* ─── Phase 5.5: mobile-first time tracking ─────────────────────────
   Workers use phones on jobsites. The hero stacks vertically with a
   thumb-sized primary CTA, a 4rem live timer, and big-tap job rows.
   Desktop gets a more comfortable layout via the media query below. */

/* Two-column grid: hero/empty + today on top row, week + team below.
   Mobile collapses to a single stack. */
.timeclock-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}

@media (min-width: 960px) {
  .timeclock-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }

  /* When the Worker view has no Team card to render, the Week card
     ends up alone on its row with an awkward gap to the right.
     Span both columns so the grid stays full-bleed. */
  .timeclock-grid > .timeclock-week-card:last-child {
    grid-column: 1 / -1;
  }
}

.timeclock-hero,
.timeclock-empty,
.timeclock-today-card,
.timeclock-week-card,
.timeclock-team-card {
  margin: 0;
}

.timeclock-hero {
  text-align: center;
}

.timeclock-hero-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
}

.timeclock-timer-wrap {
  margin: 8px 0 20px;
}

.timeclock-timer {
  font-size: 4rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text, #111827);
}

.timeclock-timer-sub {
  margin-top: 4px;
}

.timeclock-stage-stats {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 20px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.timeclock-stage-stat {
  text-align: center;
}

.timeclock-stage-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #6b7280);
  margin-bottom: 2px;
}

.timeclock-stage-stat-value {
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.timeclock-action-form {
  margin: 0;
}

.timeclock-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 64px;
  font-size: 18px;
  font-weight: 600;
  border-radius: 12px;
  margin-bottom: 10px;
}

.timeclock-clockout-btn {
  width: 100%;
  min-height: 48px;
  font-size: 15px;
}

/* Empty state — not clocked in */
.timeclock-empty {
  text-align: center;
}

.timeclock-empty-icon {
  display: flex;
  justify-content: center;
  color: var(--text-muted, #6b7280);
  margin-bottom: 8px;
}

.timeclock-empty-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 4px;
}

.timeclock-empty-sub {
  margin: 0 0 20px;
}

.timeclock-job-section {
  margin-top: 20px;
  text-align: left;
}

.timeclock-section-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #6b7280);
  margin: 0 0 8px;
  font-weight: 600;
}

.timeclock-job-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 64px;
  padding: 12px 16px;
  margin-bottom: 8px;
  background: var(--gray-50, #f9fafb);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, transform 0.05s;
}

.timeclock-job-row:hover {
  background: var(--gray-100, #f3f4f6);
}

.timeclock-job-row:active {
  transform: scale(0.99);
}

.timeclock-job-row-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.timeclock-job-row-title {
  font-weight: 600;
  font-size: 15px;
  color: var(--text, #111827);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeclock-job-row-sub {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeclock-job-row-cta {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary, #2563eb);
  white-space: nowrap;
  margin-left: 12px;
}

/* Today's entries — mobile card stack */
.timeclock-today-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.timeclock-today-entry {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--gray-50, #f9fafb);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.timeclock-today-entry-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.timeclock-today-entry-job {
  font-weight: 600;
  font-size: 14px;
}

.timeclock-today-entry-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.timeclock-today-entry-pins {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Location pins */
.timeclock-pin {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--border);
}

.timeclock-pin-present {
  color: var(--primary, #2563eb);
  background: rgba(37, 99, 235, 0.06);
  border-color: rgba(37, 99, 235, 0.2);
}

.timeclock-pin-present:hover {
  background: rgba(37, 99, 235, 0.12);
}

.timeclock-pin-missing {
  color: var(--text-muted, #6b7280);
  background: transparent;
  cursor: help;
}

/* Phase 5.6: edit form + audit trail */
.grid-2-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 900px) {
  .grid-2-col { grid-template-columns: 1fr; }
}

.audit-trail {
  list-style: none;
  padding: 0;
  margin: 0;
}

.audit-trail-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

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

.audit-trail-meta {
  margin-bottom: 4px;
}

.audit-trail-diff code {
  background: var(--gray-100, #f3f4f6);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.audit-trail-reason {
  margin-top: 4px;
  font-style: italic;
}

@media (min-width: 720px) {
  .timeclock-hero-meta {
    flex-direction: row;
    justify-content: center;
  }

  .timeclock-action-btn {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }

  .timeclock-clockout-btn {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  .timeclock-today-entry {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* Desktop hero: tighten vertical rhythm so the card doesn't dominate
   the page when there's a Today panel sitting next to it. Mobile
   keeps the original generous spacing — that's where it's the only
   thing on screen. */
@media (min-width: 960px) {
  .timeclock-timer {
    font-size: 3.5rem;
  }

  .timeclock-timer-wrap {
    margin: 4px 0 14px;
  }

  .timeclock-stage-stats {
    margin-bottom: 14px;
    padding: 10px 0;
  }

  .timeclock-action-btn {
    min-height: 56px;
    margin-bottom: 8px;
  }

  .timeclock-clockout-btn {
    min-height: 40px;
  }

  .timeclock-hero .card-body,
  .timeclock-empty .card-body {
    padding-top: 18px;
    padding-bottom: 18px;
  }
}

/* Blog post table of contents (in-page anchor nav).
   Injected after the tool-callout on every post by
   /sessions/.../mnt/outputs/retrofit_blog_toc.py. The TOC styles live in
   web.css (not per-post style blocks) so they apply across the whole blog
   without having to duplicate into every post template. */
.blog-post-toc {
  background: var(--bg-subtle, #f6f7f9);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  padding: 14px 18px 16px;
  margin: 0 0 32px;
}
.blog-post-toc-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted, #6b7280);
  margin: 0 0 8px;
}
.blog-post-toc-list {
  list-style: decimal;
  padding-left: 22px;
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-muted, #6b7280);
}
.blog-post-toc-list li {
  margin: 0;
  padding-left: 2px;
}
.blog-post-toc-list a {
  color: var(--primary, #294887);
  text-decoration: none;
}
.blog-post-toc-list a:hover {
  text-decoration: underline;
}
/* Smooth-scroll when a TOC link is clicked, so the jump isn't jarring. */
html { scroll-behavior: smooth; }
/* Give the anchor target a little breathing room from the page top
   so the heading isn't flush against any sticky bar. */
.blog-post-body h2,
.blog-post-body h3 {
  scroll-margin-top: 18px;
}

/* ========================================================================
   Cleaning / STR pricing calculator — shared styles for both calculators
   (cleaning-pricing-guide.html.erb + how-to-land-airbnb-cleaning-contracts.html.erb).
   Hoisted from the post files so future polish lands in one place.
   ======================================================================== */
/* Flagship pricing calculator. Visual rhythm: 4px base unit
   (4 / 8 / 12 / 16 / 24). All inherited margins are explicitly
   reset so the layout controls its own spacing rather than picking
   up the blog body's 16px paragraph margins. */
.cleaning-calc {
  background: var(--primary-light, #eaeef7);
  border: 1px solid #c9d5e8;
  border-radius: 12px;
  padding: 20px;
  margin: 8px 0 28px;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(220px, 1fr);
  gap: 20px;
  font-size: 15px;
  color: var(--text, #1f2433);
  align-items: start;
}
/* Reset inherited margins on every text element inside the calc so
   spacing comes from the calc's own rules, not the article body. The
   compound selector wins specificity against .blog-post-body p. */
.blog-post-body .cleaning-calc p,
.blog-post-body .cleaning-calc ul,
.blog-post-body .cleaning-calc ol,
.cleaning-calc p,
.cleaning-calc ul,
.cleaning-calc ol {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}
.blog-post-body .cleaning-calc li,
.cleaning-calc li {
  margin: 0;
}
@media (max-width: 720px) {
  .cleaning-calc { grid-template-columns: 1fr; padding: 16px; gap: 16px; }
  /* On mobile, show the live result card ABOVE the form so visitors
     (mostly Facebook mobile traffic) see the price update inline as
     they change inputs, instead of having to scroll down past the
     form to find it. */
  .cleaning-calc-result { order: -1; }
}
.cleaning-calc-form { margin: 0; }
.cleaning-calc-grid {
  display: grid;
  gap: 14px;
}
.cleaning-calc-field { display: flex; flex-direction: column; gap: 6px; }
.cleaning-calc-field label,
.cleaning-calc-field > label {
  font-size: 12.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--primary-dark, #1d3466);
  margin: 0;
}
.cleaning-calc-field select,
.cleaning-calc-field input[type="number"] {
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  border: 1px solid #c9d5e8;
  border-radius: 7px;
  padding: 10px 12px;
  font-size: 15px;
  color: var(--text, #1f2433);
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
}
.cleaning-calc-field select:focus,
.cleaning-calc-field input[type="number"]:focus {
  outline: 2px solid var(--primary, #294887);
  outline-offset: 1px;
  border-color: var(--primary, #294887);
}
.cleaning-calc-toggle {
  display: inline-flex;
  background: #fff;
  border: 1px solid #c9d5e8;
  border-radius: 7px;
  padding: 3px;
  gap: 2px;
  flex-wrap: wrap;
}
.cleaning-calc-toggle button {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 8px 14px;
  border-radius: 5px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text-muted, #5e6573);
  cursor: pointer;
  flex: 1 0 auto;
  min-width: 0;
  white-space: nowrap;
}
.cleaning-calc-toggle button.is-on {
  background: var(--primary, #294887);
  color: #fff;
  font-weight: 600;
}
.cleaning-calc-toggle button:focus-visible {
  outline: 2px solid var(--primary, #294887);
  outline-offset: 2px;
}
.cleaning-calc-stepper {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid #c9d5e8; border-radius: 7px;
  padding: 3px 8px 3px 3px;
}
.cleaning-calc-stepper input[type="number"] {
  border: 0; box-shadow: none; outline: none; padding: 8px 6px;
  width: 56px; text-align: center; font-weight: 600; font-size: 16px;
}
/* Hide the spinner buttons on number inputs */
.cleaning-calc-stepper input[type=number]::-webkit-inner-spin-button,
.cleaning-calc-stepper input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.cleaning-calc-stepper input[type=number] { -moz-appearance: textfield; }
.cleaning-calc-stepper button {
  appearance: none; background: var(--primary-light, #eaeef7); border: 0;
  width: 32px; height: 32px; border-radius: 5px; font-size: 18px; line-height: 1;
  color: var(--primary, #294887); cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center;
}
.cleaning-calc-stepper button:hover { background: #d6e0f0; }
.cleaning-calc-stepper .cleaning-calc-unit {
  margin-left: auto; padding-right: 6px;
  font-size: 13.5px; color: var(--text-muted, #5e6573);
}
.cleaning-calc-hint {
  font-size: 12.5px; line-height: 1.45;
  color: var(--text-muted, #5e6573); margin: 4px 0 0;
}
.cleaning-calc-hint a { color: var(--primary, #294887); text-decoration: none; }
.cleaning-calc-checks { display: grid; gap: 6px; }
.cleaning-calc-check {
  display: flex; align-items: center; gap: 10px;
  text-transform: none; font-weight: 400; font-size: 14.5px;
  letter-spacing: normal; color: var(--text, #1f2433);
  background: #fff; border: 1px solid #c9d5e8; border-radius: 6px;
  padding: 8px 12px; cursor: pointer;
}
.cleaning-calc-check:hover { border-color: var(--primary, #294887); }
.cleaning-calc-check input[type="checkbox"] { accent-color: var(--primary, #294887); margin: 0; }
.cleaning-calc-check em { font-style: normal; color: var(--text-muted, #5e6573); margin-left: auto; font-size: 13px; }

.cleaning-calc-actions {
  display: flex; justify-content: flex-end;
  margin: 4px 0 0;
}
.cleaning-calc-reset {
  appearance: none; background: transparent; border: 0;
  color: var(--text-muted, #5e6573); font-family: inherit;
  font-size: 13px; padding: 4px 2px; cursor: pointer;
  text-decoration: underline; text-decoration-color: rgba(94,101,115,0.4);
  text-underline-offset: 3px;
}
.cleaning-calc-reset:hover { color: var(--primary, #294887); text-decoration-color: var(--primary, #294887); }

.cleaning-calc-result {
  background: #fff;
  border: 1px solid #c9d5e8;
  border-radius: 10px;
  padding: 18px 18px 16px;
  display: flex; flex-direction: column;
  align-self: start;
  /* Stay in view while the user fills out the form. The 80px top offset
     clears the marketing site's sticky header. Only kicks in at desktop
     widths where the two-column layout is active. */
  position: sticky;
  top: 80px;
}
@media (max-width: 720px) {
  .cleaning-calc-result { position: static; top: auto; }
}
.cleaning-calc-result-label {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-muted, #5e6573);
  margin: 0 0 6px;
}
/* Stacked price comparison inside the narrow result column: primary
   (labor-based) on top, secondary (per-sqft) below, with a horizontal
   rule between them so they read as two co-located pricing models. */
.cleaning-calc-prices {
  display: block;
  margin: 0 0 12px;
}
/* Gap between the primary and secondary price blocks — no divider line,
   just whitespace + the typographic hierarchy of the two labels. */
.cleaning-calc-price-block.is-secondary {
  margin-top: 16px;
}
.cleaning-calc-price-block { min-width: 0; }
/* Override the .blog-post-body .cleaning-calc p reset (specificity 0,2,1)
   by tagging the element type; later rule with matching specificity wins. */
p.cleaning-calc-price-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-muted, #5e6573);
  margin: 0 0 4px;
}
.cleaning-calc-price-block.is-secondary .cleaning-calc-price-label {
  color: var(--text-muted, #5e6573);
}
/* Primary: the labor-based recommended quote. Big and bold. */
.cleaning-calc-result-price {
  margin: 0;
  font-weight: 800;
  color: var(--primary-dark, #1d3466);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  /* Flex with baseline alignment puts the $ sitting on the same
     baseline as the digit — no more float-above. */
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  font-size: 40px;
}
.cleaning-calc-result-price .cleaning-calc-currency {
  font-size: 18px;
  color: var(--text-muted, #5e6573);
  font-weight: 700;
}
/* Secondary: the per-sqft comparison price. Smaller, same family.
   p.* tag matches the .blog-post-body .cleaning-calc p reset specificity;
   source order makes this rule win. */
p.cleaning-calc-result-price-secondary {
  margin: 0;
  font-weight: 700;
  color: var(--text, #1f2433);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  font-size: 24px;
}
.cleaning-calc-result-price-secondary .cleaning-calc-currency-sec {
  font-size: 12px;
  color: var(--text-muted, #5e6573);
  font-weight: 700;
}
p.cleaning-calc-price-context {
  font-size: 12px; color: var(--text-muted, #5e6573);
  margin: 4px 0 0; line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.cleaning-calc-price-context span { color: var(--text, #1f2433); font-weight: 600; }
/* Pulse animation on the primary price every time it updates. */
.cleaning-calc-result-price.is-pulsing {
  animation: cleaningCalcPulse 380ms ease-out;
}
@keyframes cleaningCalcPulse {
  0%   { color: var(--primary-dark, #1d3466); transform: scale(1); }
  40%  { color: #2c64c4; transform: scale(1.04); }
  100% { color: var(--primary-dark, #1d3466); transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .cleaning-calc-result-price.is-pulsing { animation: none; }
}
p.cleaning-calc-result-time {
  font-size: 13px; color: var(--text-muted, #5e6573);
  margin: 16px 0 16px; line-height: 1.45;
  padding-top: 12px;
  border-top: 1px solid #eaeef7;
}
.cleaning-calc-result-time span { color: var(--text, #1f2433); font-weight: 600; }
.cleaning-calc-yearly {
  background: linear-gradient(135deg, var(--primary-light, #eaeef7) 0%, #dbe4f3 100%);
  border-radius: 7px;
  padding: 12px 14px;
  margin: 0 0 16px;
}
.cleaning-calc-yearly-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--primary, #294887);
  margin: 0 0 2px;
}
.cleaning-calc-yearly-line {
  font-size: 14px; color: var(--text, #1f2433);
  margin: 0; line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.cleaning-calc-yearly-line strong { color: var(--primary-dark, #1d3466); font-weight: 800; }
/* Hide the yearly block when the visit type is first-deep-clean (one-off). */
.cleaning-calc[data-frequency="deep"] .cleaning-calc-yearly { display: none; }

.cleaning-calc-cta-row {
  display: flex; flex-direction: column; gap: 8px;
  margin: 0 0 12px;
}
.cleaning-calc-cta {
  appearance: none; border: 0;
  font-family: inherit; font-weight: 600; font-size: 13.5px;
  border-radius: 7px; padding: 10px 12px;
  cursor: pointer; transition: background 120ms ease, transform 80ms ease;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  white-space: nowrap;
}
.cleaning-calc-cta.is-primary {
  background: var(--primary, #294887); color: #fff;
  width: 100%;
}
.cleaning-calc-cta.is-primary:hover { background: var(--primary-dark, #1d3466); }
.cleaning-calc-cta.is-secondary {
  background: #fff; color: var(--primary, #294887);
  border: 1px solid #c9d5e8;
  width: 100%;
}
.cleaning-calc-cta.is-secondary:hover { background: var(--primary-light, #eaeef7); }
.cleaning-calc-cta:active { transform: translateY(1px); }
.cleaning-calc-cta-icon { font-size: 12px; transform: translateY(-1px); }
.cleaning-calc-share-status {
  font-size: 12px; color: var(--text-muted, #5e6573);
  margin: -6px 0 12px; text-align: right;
  transition: opacity 240ms ease;
}
.cleaning-calc-share-status.is-visible { display: block; }

.cleaning-calc-math summary {
  cursor: pointer; font-size: 13.5px; color: var(--primary, #294887);
  font-weight: 600; padding: 6px 0; user-select: none;
}
.cleaning-calc-math summary:hover { text-decoration: underline; }
.cleaning-calc-math[open] summary { margin-bottom: 8px; }
.cleaning-calc-math-grid {
  display: grid; gap: 5px 20px;
  grid-template-columns: 1fr auto;
  font-size: 13px; color: var(--text-muted, #5e6573);
  background: #f6f7f9; border-radius: 6px; padding: 14px 16px;
  font-variant-numeric: tabular-nums;
}
.cleaning-calc-math-grid > div {
  display: contents;
}
.cleaning-calc-math-grid > div > span:first-child {
  /* Operator rows (× +, =) sit slightly indented so the calculation
     reads as a flow, not a list. */
  padding-left: 0;
}
.cleaning-calc-math-grid > div > span:last-child {
  color: var(--text, #1f2433);
  white-space: nowrap;
  text-align: right;
  font-weight: 600;
}
.cleaning-calc-math-grid .is-total > span:first-child,
.cleaning-calc-math-grid .is-total > span:last-child {
  border-top: 1px solid #d8dde6;
  padding-top: 7px; margin-top: 4px;
  font-weight: 700; color: var(--primary-dark, #1d3466);
}
.cleaning-calc-math-note {
  font-size: 12px; line-height: 1.5; color: var(--text-muted, #5e6573);
  margin: 10px 0 0;
}
.cleaning-calc-math-note a { color: var(--primary, #294887); }