/* =============================================================
   PASSING PAWS — STAFF CRM DESIGN SYSTEM
   "Calm tool" — neutral, fast, scannable. Inter throughout.
   8pt spacing grid. One semantic color per state.
   ============================================================= */

:root {
  /* ---- Neutral chrome (zinc scale) ---- */
  --bg:            #fafafa;
  --bg-subtle:     #f4f4f5;
  --surface:       #ffffff;
  --surface-2:     #fafafa;
  --border:        #e4e4e7;
  --border-strong: #d4d4d8;
  --text:          #18181b;
  --text-2:        #3f3f46;
  --muted:         #71717a;
  --faint:         #a1a1aa;
  --inverse:       #ffffff;
  --hover:         #f4f4f5;

  /* ---- Semantic (each = exactly one operational meaning) ---- */
  --action:        #2563eb;  /* blue — primary actions, links */
  --action-hover:  #1d4ed8;
  --action-soft:   #dbeafe;
  --action-text:   #1e40af;

  --warn:          #d97706;  /* amber — needs attention */
  --warn-soft:     #fef3c7;
  --warn-text:     #92400e;

  --in-care:       #059669;  /* emerald — pet is with us */
  --in-care-soft:  #d1fae5;
  --in-care-text:  #065f46;

  --crematorium:   #7c3aed;  /* violet — with cremation partner */
  --crematorium-soft: #ede9fe;
  --crematorium-text: #5b21b6;

  --ashes:         #ca8a04;  /* gold — returning to family */
  --ashes-soft:    #fef3c7;
  --ashes-text:    #854d0e;

  --done:          #475569;  /* slate — done / closed */
  --done-soft:     #f1f5f9;
  --done-text:     #334155;

  --danger:        #dc2626;  /* red — rush / fail (sparing) */
  --danger-soft:   #fee2e2;
  --danger-text:   #991b1b;

  /* ---- Brand mark accent (quiet — appears once, in the logo) ---- */
  --brand:         #4a6d5a;

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

  /* ---- Radius ---- */
  --r-1: 4px;
  --r-2: 6px;
  --r-3: 8px;
  --r-4: 12px;

  /* ---- Shadows ---- */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow:    0 4px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);

  /* ---- Layout ---- */
  --sidebar-w: 224px;
  --sidebar-w-collapsed: 56px;
  --topbar-h: 53px;     /* brand-mark 28px + 12px*2 padding + 1px border = 53px */
}

/* Dark mode tokens */
:root[data-theme="dark"] {
  --bg:            #09090b;
  --bg-subtle:     #18181b;
  --surface:       #18181b;
  --surface-2:     #27272a;
  --border:        #27272a;
  --border-strong: #3f3f46;
  --text:          #fafafa;
  --text-2:        #d4d4d8;
  --muted:         #a1a1aa;
  --faint:         #71717a;
  --hover:         #27272a;

  --action-soft:   #1e3a8a;
  --action-text:   #93c5fd;
  --warn-soft:     #78350f;
  --warn-text:     #fbbf24;
  --in-care-soft:  #064e3b;
  --in-care-text:  #6ee7b7;
  --crematorium-soft: #4c1d95;
  --crematorium-text: #c4b5fd;
  --ashes-soft:    #78350f;
  --ashes-text:    #fde047;
  --done-soft:     #1e293b;
  --done-text:     #cbd5e1;
  --danger-soft:   #7f1d1d;
  --danger-text:   #fca5a5;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
h1 { font-size: 22px; line-height: 1.3; }
h2 { font-size: 16px; line-height: 1.4; }
h3 { font-size: 11px; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; }
h4 { font-size: 13px; font-weight: 600; }

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

p { margin: 0; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 12px; }
.xs    { font-size: 11px; }
.mono  { font-family: 'SF Mono', Menlo, monospace; }
.numeric { font-variant-numeric: tabular-nums; }

code {
  font-family: 'SF Mono', Menlo, monospace;
  background: var(--bg-subtle);
  padding: 1px 5px;
  border-radius: var(--r-1);
  font-size: 12px;
}

/* ============ Icons ============ */
.icon {
  width: 16px; height: 16px;
  flex-shrink: 0;
  vertical-align: -2px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-sm { width: 14px; height: 14px; }
.icon-lg { width: 20px; height: 20px; }
.icon-xl { width: 24px; height: 24px; }

/* ============ Layout ============ */
.layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}
.layout[data-sidebar="collapsed"] { grid-template-columns: var(--sidebar-w-collapsed) 1fr; }

.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.brand {
  padding: var(--s-3) var(--s-4);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  flex-shrink: 0;
}
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 28px; height: 28px;
  background: var(--brand);
  color: #fff;
  border-radius: var(--r-2);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.brand-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-name span { color: var(--brand); }
[data-sidebar="collapsed"] .brand-name { display: none; }

.sidenav {
  flex: 1;
  padding: var(--s-2);
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow-y: auto;
}
.sidenav-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 6px var(--s-3);
  border-radius: var(--r-2);
  color: var(--text-2);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
}
.sidenav-item:hover { background: var(--hover); color: var(--text); text-decoration: none; }
.sidenav-item.active { background: var(--bg-subtle); color: var(--text); }
.sidenav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--action);
  border-radius: 1px;
}
.sidenav-item .icon { color: var(--muted); }
.sidenav-item.active .icon { color: var(--action); }
.sidenav-item-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
[data-sidebar="collapsed"] .sidenav-item-label,
[data-sidebar="collapsed"] .sidenav-group .sidenav-sub { display: none; }
[data-sidebar="collapsed"] .sidenav-item { justify-content: center; padding: 8px; }

.sidenav-group { margin: 2px 0; }
.sidenav-sub {
  display: block;
  padding: 4px 10px 4px var(--s-12);
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  border-radius: var(--r-2);
  white-space: nowrap;
}
.sidenav-sub:hover { color: var(--text); background: var(--hover); text-decoration: none; }
.sidenav-sub.active { color: var(--text); font-weight: 600; background: var(--hover); }

.nav-badge {
  margin-left: auto;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 999px;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}

.sidenav-foot {
  padding: var(--s-2);
  border-top: 1px solid var(--border);
  display: flex;
  gap: var(--s-2);
  align-items: center;
  flex-shrink: 0;
}
.user-chip {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px;
  border-radius: var(--r-2);
  cursor: pointer;
  text-decoration: none;
  color: var(--text);
  min-width: 0;
}
.user-chip:hover { background: var(--hover); text-decoration: none; }
.user-dot {
  width: 24px; height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--brand);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}
.user-meta { flex: 1; min-width: 0; }
.user-name { font-size: 12px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-role { font-size: 10px; color: var(--muted); text-transform: capitalize; line-height: 1.3; }
[data-sidebar="collapsed"] .user-meta { display: none; }

.icon-btn {
  background: none;
  border: none;
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-2);
  cursor: pointer;
  color: var(--muted);
}
.icon-btn:hover { background: var(--hover); color: var(--text); }

/* Topbar */
.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100vh;
}

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  min-height: var(--topbar-h);
  padding: 0 var(--s-4);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar-search {
  flex: 1;
  max-width: 420px;
  position: relative;
}
.topbar .topbar-search input {
  width: 100%;
  background: var(--bg-subtle);
  border: 1px solid transparent;
  border-radius: var(--r-2);
  padding: 6px 36px 6px 32px;
  font-family: inherit;
  font-size: 12px;
  color: var(--text);
  height: 30px;
}
.topbar .topbar-search input:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--border-strong);
}
.topbar-search-icon { line-height: 0; }
.topbar-search-icon .icon { width: 14px; height: 14px; }
.topbar-search-icon {
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.kbd {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-1);
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 10px;
  color: var(--muted);
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.topbar-cta {
  background: var(--text);
  color: var(--inverse);
  padding: 6px var(--s-3);
  border-radius: var(--r-2);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.topbar-cta:hover { background: var(--text-2); color: var(--inverse); text-decoration: none; }

.page {
  flex: 1;
  padding: var(--s-5);
  width: 100%;
}
.page-head { margin-bottom: var(--s-5); }
.page-head h1 { margin-bottom: 4px; }
.page-head .crumb { margin: 0 0 6px; font-size: 12px; color: var(--muted); }
.page-head .crumb a { color: var(--muted); }
.page-sub { color: var(--muted); margin: 0; font-size: 13px; }

@media (max-width: 900px) {
  /* Sidebar flips to a horizontal top bar with icon-only nav. */
  .layout {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
  }

  .sidebar {
    position: sticky;
    top: 0;
    height: auto;
    width: 100%;
    flex-direction: row;
    align-items: stretch;
    border-right: none;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    z-index: 11;
  }
  .sidebar::-webkit-scrollbar { display: none; }

  /* Keep just the PP mark, drop the wordmark + the bottom border around brand. */
  .brand {
    padding: 8px 12px;
    border-bottom: none;
    border-right: 1px solid var(--border);
    flex-shrink: 0;
  }
  .brand-name { display: none; }

  /* Nav: horizontal row, icons only. */
  .sidenav {
    flex-direction: row;
    flex: 1;
    padding: 4px;
    gap: 2px;
    align-items: stretch;
    overflow: visible;
  }
  .sidenav-item {
    flex-direction: column;
    gap: 0;
    padding: 8px 10px;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  /* Active marker moves from a left bar to a bottom underline. */
  .sidenav-item.active::before {
    left: 8px;
    right: 8px;
    top: auto;
    bottom: 2px;
    width: auto;
    height: 2px;
  }
  .sidenav-item-label,
  .sidenav-sub { display: none; }
  .sidenav-group {
    display: inline-flex;
    align-items: stretch;
    margin: 0;
  }

  /* Unread badge pins to the top-right corner of the icon. */
  .nav-badge {
    margin-left: 0;
    position: absolute;
    top: 2px; right: 2px;
    padding: 0 4px;
    font-size: 9px;
    line-height: 1.5;
  }

  /* Foot row: user dot + dark-mode + sign-out, no labels. */
  .sidenav-foot {
    flex-direction: row;
    border-top: none;
    border-left: 1px solid var(--border);
    padding: 4px 8px;
    flex-shrink: 0;
    gap: 4px;
    align-items: center;
  }
  .user-chip { padding: 6px; }
  .user-meta { display: none; }

  /* Topbar: hide the now-irrelevant sidebar-toggle button, collapse the search
     into a single magnifier icon button that opens the command palette. */
  .topbar > .icon-btn:first-child { display: none; }

  .topbar .topbar-search {
    flex: 0 0 36px;
    max-width: 36px;
    cursor: pointer;
  }
  .topbar .topbar-search input,
  .topbar .topbar-search .kbd { display: none; }
  .topbar .topbar-search-icon {
    position: static;
    transform: none;
    width: 36px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-subtle);
    border-radius: var(--r-2);
    color: var(--muted);
  }
  .topbar .topbar-search:hover .topbar-search-icon {
    background: var(--hover);
    color: var(--text);
  }

  .page { padding: var(--s-4); }
}

/* ============ Cards / panels ============ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-3);
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.card-head h2 { margin: 0; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
@media (max-width: 1000px) {
  .two-col, .three-col { grid-template-columns: 1fr; }
}

/* ============ Tabs ============ */
.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s-4);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: 8px var(--s-3);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tab:hover { color: var(--text); text-decoration: none; }
.tab.active { color: var(--text); border-bottom-color: var(--text); font-weight: 600; }
.tab-count {
  background: var(--bg-subtle);
  color: var(--muted);
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.tab.active .tab-count { background: var(--text); color: var(--inverse); }

.subtabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s-4);
}
.subtab {
  padding: 8px var(--s-3);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.subtab:hover { color: var(--text); text-decoration: none; }
.subtab.active { color: var(--text); border-bottom-color: var(--text); font-weight: 600; }

/* ============ Status tabs (Jobs page) ============ */
.status-tabs {
  display: grid;
  /* Always 7 columns on one line; cells shrink uniformly as the viewport narrows. */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  /* Escape the .page padding so the tabs sit flush at the top edge-to-edge. */
  margin: calc(-1 * var(--s-5)) calc(-1 * var(--s-5)) var(--s-4);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  overflow: visible;
}

.status-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  color: var(--text-2);
  background: var(--surface);
  padding: 12px 14px 6px;          /* tight bottom so bar sits close to content */
  min-height: 60px;
  transition: background 0.08s;
  position: relative;
  border-right: 1px solid var(--border);
}
.status-tab:last-child { border-right: none; }
.status-tab:hover { background: color-mix(in srgb, var(--tab-color) 8%, var(--surface)); text-decoration: none; color: var(--text); }
.status-tab.active { background: color-mix(in srgb, var(--tab-color) 18%, var(--surface)); }
.status-tab.active .status-tab-count { color: var(--text); }
.status-tab.active .status-tab-label { color: var(--text); }
/* Colored bar is ALWAYS visible at the bottom of the square. */
.status-tab::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: var(--tab-color, var(--text));
  opacity: 0.55;
  transition: opacity 0.08s;
}
.status-tab:hover::after { opacity: 0.85; }
.status-tab.active::after { opacity: 1; }
.status-tab-bar { display: none; }
.status-tab-body { display: contents; }
.status-tab-count {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-2);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}
.status-tab-label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.status-tab.active .status-tab-label { color: var(--text); }

.jobs-toolbar {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  margin-bottom: var(--s-3);
}

/* ============ Jobs grid (9 columns) ============ */
.jobs-scroll {
  /* No container of its own — the table sits flush on the page background. */
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
}
.jobs-table {
  display: grid;
  /* One column track set — every row reuses these via subgrid so columns stay
     aligned. Columns compress (minmax with 0 min) instead of forcing a scroll. */
  grid-template-columns:
    4px                       /* status bar (slightly wider to read as a card edge) */
    minmax(0, 1.4fr)          /* pet */
    minmax(0, 0.9fr)          /* service */
    minmax(0, 1.2fr)          /* owner */
    minmax(0, 1.5fr)          /* address */
    minmax(0, 0.9fr)          /* tech */
    minmax(0, 1fr)            /* dispatcher (always select-width) */
    minmax(78px, auto)        /* send auth */
    minmax(78px, auto)        /* schedule */
    minmax(78px, auto);       /* complete (label varies) */
  row-gap: 10px;              /* space between cards */
}
.job-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  gap: var(--s-3);
  padding: 10px var(--s-4) 10px 0;
  background: var(--surface);
  border-radius: var(--r-3);
  overflow: hidden;
  /* "Border" via inset shadow so the colored bar can fill the row edge-to-edge,
     plus a soft drop shadow so cards feel slightly lifted off the page. */
  box-shadow:
    inset 0 0 0 1px var(--border),
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 2px 8px rgba(15, 23, 42, 0.05);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.job-row:hover {
  /* Subtle lift — just a touch more shadow than resting, 1px of vertical pop. */
  box-shadow:
    inset 0 0 0 1px var(--border),
    0 2px 4px rgba(15, 23, 42, 0.05),
    0 4px 12px rgba(15, 23, 42, 0.04);
  transform: translateY(-1px);
}
.job-bar {
  width: 4px;
  align-self: stretch;
  /* Extend through the row's vertical padding so the bar runs the full height. */
  margin-block: -10px;
}
/* (no global hover state — keep cards visually static) */
.job-bar { width: 3px; align-self: stretch; }
.job-cell {
  font-size: 12px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.job-cell.job-service { text-transform: capitalize; }
.job-primary {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.job-primary a { color: var(--text); }
.job-primary a:hover { color: var(--action); }
.job-sub {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.3;
}
.job-link { color: var(--action); }
.job-link:hover { color: var(--action-hover); text-decoration: underline; }

/* Address: neutral text, map pin on the left, underline on hover only. */
.job-address {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--text-2);
  line-height: 1.3;
  text-decoration: none;
}
.job-address:hover { color: var(--text); text-decoration: none; }
.job-address:hover .job-address-text { text-decoration: underline; }
.job-address-pin {
  flex-shrink: 0;
  margin-top: 1px;
  width: 13px; height: 13px;
  color: var(--muted);
}
.job-address:hover .job-address-pin { color: var(--action); }
.job-address-text { min-width: 0; }
.job-address .job-sub { color: var(--muted); }

.job-action { text-align: right; }

.job-select {
  width: 100%;
  min-width: 0;
  height: 28px;
  font-size: 12px;
  padding: 4px 22px 4px 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  border-radius: var(--r-2);
}
.job-select:hover { border-color: var(--text-2); color: var(--text); }
.job-select:focus { outline: none; border-color: var(--action); box-shadow: 0 0 0 2px var(--action-soft); }

.btn-static {
  cursor: default;
  background: var(--in-care-soft);
  color: var(--in-care-text);
  border-color: var(--in-care);
}
.btn-static:hover { background: var(--in-care-soft); color: var(--in-care-text); }

/* State badge — only rendered visible in card mode (hidden at desktop widths).
   Colors match the corresponding status-tab + card-bar palette so the whole row
   reads in a single color from edge to badge. */
.job-state-badge { display: none; }
.job-state-offered     { color: #22c55e; }  /* green */
.job-state-awaiting    { color: #22c55e; }
.job-state-scheduled   { color: #3b82f6; }  /* blue */
.job-state-in-care     { color: #eab308; }  /* yellow */
.job-state-crematorium { color: #f97316; }  /* orange */
.job-state-ashes       { color: #ef4444; }  /* red */
.job-state-done        { color: #3f3f46; }  /* dark grey */

/* ============ Responsive: jobs collapse to clean cards ============ */
@media (max-width: 1100px) {
  .jobs-scroll { background: transparent; border: none; }
  .jobs-table { display: flex; flex-direction: column; gap: var(--s-3); }

  .job-row {
    display: grid;
    grid-column: auto;
    grid-template-columns: 4px 1fr 140px;
    grid-template-areas:
      "bar header     badge"
      "bar owner      owner"
      "bar address    address"
      "bar dispatcher action";
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-3);
    padding: 0;
    gap: 0;
    align-items: stretch;
    box-shadow: var(--shadow-xs);
  }

  /* Reset every child to a clean slate. */
  .job-row > * {
    border: none !important;
    padding: 0;
    margin: 0;
    text-align: left;
  }

  /* Bar */
  .job-row > .job-bar {
    grid-area: bar;
    width: 4px;
    border-radius: var(--r-3) 0 0 var(--r-3);
  }

  /* Header — pet */
  .job-row > .cell-pet {
    grid-area: header;
    padding: 14px 0 6px 16px;
  }
  .job-row > .cell-pet .job-primary { font-size: 16px; font-weight: 700; }

  /* State badge — top right */
  .job-row > .job-state-badge {
    display: inline-block;
    grid-area: badge;
    justify-self: end;
    align-self: start;
    padding: 16px 16px 0 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  /* Hidden cells/actions in card mode */
  .job-row > .cell-service,
  .job-row > .cell-tech,
  .job-row > .action-auth,
  .job-row > .action-schedule { display: none; }

  /* Owner */
  .job-row > .cell-owner {
    grid-area: owner;
    padding: 4px 16px 2px;
  }
  .job-row > .cell-owner .job-primary { font-size: 14px; font-weight: 500; }
  .job-row > .cell-owner .job-sub { font-size: 12px; }

  /* Address */
  .job-row > .cell-address {
    grid-area: address;
    padding: 0 16px 12px;
    font-size: 13px;
  }

  /* Dispatcher (bottom left of card) */
  .job-row > .cell-dispatcher {
    grid-area: dispatcher;
    padding: 10px 8px 12px 16px;
  }
  .job-row > .cell-dispatcher form { width: 100%; }
  .job-row > .cell-dispatcher .job-select { width: 100%; height: 36px; font-size: 13px; }

  /* Next-step button (bottom right) */
  .job-row > .action-next {
    grid-area: action;
    padding: 10px 16px 12px 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .job-row > .action-next form { width: 100%; }
  .job-row > .action-next .btn {
    width: 100%;
    min-width: 0;        /* fills the card column width — overrides .btn-primary's 132px */
    height: 38px;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Status tabs: hide labels on narrower screens, keep colored bar + count visible */
@media (max-width: 900px) {
  .status-tab-label { display: none; }
  .status-tab { padding: 10px 6px 0; min-height: 56px; }
  .status-tab-count { font-size: 18px; }
}

/* ============ Row list ============ */
.rowlist {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  overflow: hidden;
}
.rowlist-row {
  display: grid;
  grid-template-columns: 3px 1.6fr 1fr 1fr 1.2fr auto;
  align-items: center;
  border-top: 1px solid var(--border);
  padding: var(--s-2) var(--s-4) var(--s-2) 0;
  text-decoration: none;
  color: inherit;
  gap: var(--s-3);
  min-height: 40px;
  transition: background 0.06s;
}
.rowlist-row:first-child { border-top: none; }
.rowlist-row:hover { background: var(--hover); text-decoration: none; }
.rowlist-bar { width: 3px; align-self: stretch; }
.rowlist-primary {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rowlist-secondary {
  font-size: 11px;
  color: var(--muted);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rowlist-meta {
  font-size: 12px;
  color: var(--text-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.rowlist-meta .iconline {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rowlist-meta .iconline .icon { width: 12px; height: 12px; }
.rowlist-action { padding-left: var(--s-3); }
.rowlist-labels { display: flex; flex-wrap: wrap; gap: 4px; padding-right: var(--s-2); }

/* Status bar colors map to the same palette as the status tabs at the top:
   Green (New Offers) · Blue (Scheduled) · Yellow (In Our Care) ·
   Orange (With Crematorium) · Red (Deliver Ashes) · Dark Grey (Done). */
.bar-new,
.bar-consult_in_progress,
.bar-awaiting_authorization,
.bar-contacted                                  { background: #22c55e; } /* green */
.bar-pickup_scheduled,
.bar-delivery_scheduled,
.bar-picked_up                                  { background: #3b82f6; } /* blue */
.bar-in_freezer                                 { background: #eab308; } /* yellow */
.bar-at_cremation                               { background: #f97316; } /* orange */
.bar-ashes_received,
.bar-ashes_verified                             { background: #ef4444; } /* red */
.bar-delivered, .bar-closed, .bar-converted     { background: #3f3f46; } /* dark grey */
.bar-cancelled, .bar-dismissed                  { background: #a1a1aa; } /* grey */
.bar-on_hold                                    { background: #eab308; } /* yellow (paused, still in care) */

@media (max-width: 1000px) {
  .rowlist-row { grid-template-columns: 3px 1fr; padding: var(--s-3) var(--s-4) var(--s-3) 0; }
  .rowlist-meta, .rowlist-action, .rowlist-labels { grid-column: 2; }
  .rowlist-meta { margin-top: 4px; }
  .rowlist-action { margin-top: 6px; padding-left: 0; }
}

/* ============ Chips ============ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: var(--r-1);
  font-size: 11px;
  font-weight: 500;
  background: var(--bg-subtle);
  color: var(--text-2);
  white-space: nowrap;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}
.chip-status { font-weight: 600; }
.chip-new, .chip-contacted, .chip-consult_in_progress, .chip-dismissed { background: var(--bg-subtle); color: var(--muted); }
.chip-awaiting_authorization, .chip-pending, .chip-ordered { background: var(--warn-soft); color: var(--warn-text); }
.chip-pickup_scheduled, .chip-delivery_scheduled, .chip-scheduled { background: var(--action-soft); color: var(--action-text); }
.chip-picked_up { background: var(--action-soft); color: var(--action-text); }
.chip-in_freezer { background: var(--in-care-soft); color: var(--in-care-text); }
.chip-at_cremation { background: var(--crematorium-soft); color: var(--crematorium-text); }
.chip-ashes_received, .chip-ashes_verified, .chip-received_from_supplier, .chip-ready_for_delivery { background: var(--ashes-soft); color: var(--ashes-text); }
.chip-delivered, .chip-closed, .chip-complete, .chip-paid, .chip-converted { background: var(--done-soft); color: var(--done-text); }
.chip-cancelled, .chip-stubbed, .chip-no_show { background: var(--bg-subtle); color: var(--muted); }
.chip-on_hold, .chip-in_progress { background: var(--warn-soft); color: var(--warn-text); }
.chip-rush, .chip-failed, .chip-refunded { background: var(--danger-soft); color: var(--danger-text); }

/* ============ Buttons ============ */
.btn, button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-family: inherit;
  font-weight: 500;
  font-size: 12px;
  padding: 6px var(--s-3);
  border-radius: var(--r-2);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.4;
  height: 28px;
  transition: background 0.08s, border-color 0.08s;
}
.btn:hover { text-decoration: none; }
/* Primary buttons — the prominent CTA. Uniform across the app: tall, wide,
   centered label. Higher selector specificity than `button.btn` so font-weight
   and sizing always win regardless of which size modifier is applied. */
.btn.btn-primary,
button.btn-primary,
a.btn-primary {
  background: #002BFF;
  color: var(--inverse);
  border-color: #002BFF;
  font-weight: 600;
  height: 38px;
  min-width: 132px;
  padding: 0 18px;
  font-size: 13px;
  letter-spacing: 0.01em;
  justify-content: center;
  text-align: center;
}
.btn.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover {
  background: #0023D9;
  color: var(--inverse);
  border-color: #0023D9;
}
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--hover); border-color: var(--faint); }
.btn-quiet { background: transparent; color: var(--text-2); border-color: var(--border); }
.btn-quiet:hover { color: var(--text); border-color: var(--border-strong); background: var(--hover); }
.btn-success { background: var(--in-care); color: #fff; border-color: var(--in-care); }
.btn-success:hover { background: var(--in-care-text); }
.btn-danger { background: var(--surface); color: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: #fff; }
.btn-sm { font-size: 11px; padding: 4px 10px; height: 24px; }
.btn-lg { font-size: 13px; padding: 8px 16px; height: 36px; }

.link-button {
  background: none; border: none; padding: 0;
  color: var(--action);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
}

/* ============ Forms ============ */
label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-2);
}
label.check {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  font-size: 13px;
  color: var(--text);
}
label.check input { width: auto; margin: 0; }

input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="number"], input[type="search"], input[type="datetime-local"], input[type="date"],
input[type="color"],
select, textarea {
  font-family: inherit;
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-2);
  background: var(--surface);
  color: var(--text);
  height: 32px;
}
input[type="color"] { padding: 2px; height: 28px; width: 48px; }
textarea { resize: vertical; min-height: 64px; height: auto; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--action);
  box-shadow: 0 0 0 3px var(--action-soft);
}

.stack { display: flex; flex-direction: column; gap: var(--s-3); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.inline-form {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  align-items: center;
}

fieldset { border: 1px solid var(--border); border-radius: var(--r-3); padding: var(--s-3) var(--s-4); margin: 0; display: flex; flex-direction: column; gap: var(--s-3); }
legend { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding: 0 6px; font-weight: 600; }

.form-error {
  background: var(--danger-soft);
  color: var(--danger-text);
  padding: 10px 12px;
  border-radius: var(--r-2);
  font-size: 12px;
  margin-bottom: var(--s-3);
}

/* ============ Tables ============ */
.table { width: 100%; border-collapse: collapse; font-size: 12px; }
.table th, .table td { padding: 8px var(--s-3); text-align: left; border-bottom: 1px solid var(--border); }
.table th {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 600;
  background: var(--bg-subtle);
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--hover); }
.table tfoot td { border-top: 1px solid var(--border-strong); padding-top: var(--s-3); }

/* ============ KV ============ */
.kv { display: grid; grid-template-columns: 100px 1fr; gap: 6px var(--s-4); font-size: 13px; margin: 0; }
.kv dt { color: var(--muted); font-size: 11px; padding-top: 2px; font-weight: 500; }
.kv dd { margin: 0; }

/* ============ Stats / dashboard tiles ============ */
.stats-grid {
  display: grid;
  /* Always render as a single horizontal row — divide available width evenly. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s-2);
  margin-bottom: 0;
}
@media (max-width: 700px) {
  /* Below phone-portrait width, allow wrapping so cards stay readable. */
  .stats-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  padding: var(--s-3) var(--s-4);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  transition: border-color 0.1s;
}
.stat-card:hover { border-color: var(--text-2); text-decoration: none; }
.stat-label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ============ Dashboard widget grid ============ */
.widget-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.widget { min-width: 0; display: flex; }
.widget > .card, .widget > .widget-card, .widget .widget-card { width: 100%; margin: 0; }
/* Wide always takes the full row; thirds fit up to 3 per row, halves up to 2.
   With flex-grow, fewer cards expand to fill the row evenly. */
.widget-wide  { flex: 1 1 100%; }
.widget-half  { flex: 1 1 calc(50% - var(--s-3) / 2); min-width: 280px; }
.widget-third { flex: 1 1 calc(33.333% - var(--s-3) * 2 / 3); min-width: 260px; }
@media (max-width: 700px) {
  .widget-half, .widget-third { flex-basis: 100%; }
}

.widget-card .card-head { margin-bottom: var(--s-3); }
.widget-card .pet-list li { font-size: 13px; }

/* Customize-widgets picker — checkbox-left, bold readable name, tight rows. */
.widgets-picker {
  background: var(--surface);
  padding: var(--s-3) var(--s-4);
  gap: 0;
}
.widgets-group + .widgets-group { margin-top: 10px; }
.widgets-group-head {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--muted);
  padding: 2px 2px 4px;
}
.widget-pick {
  display: flex;
  flex-direction: row;   /* override base label flex-direction: column */
  align-items: center;
  gap: 10px;
  padding: 4px 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  border-radius: var(--r-2);
  line-height: 1.3;
}
.widget-pick:hover { background: var(--bg-subtle); }
.widget-pick input {
  margin: 0;
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--action);
  flex-shrink: 0;
}
.widget-pick input:checked + span { color: var(--text); }
.widget-pick input:not(:checked) + span { color: var(--text-2); font-weight: 500; }

/* This-week strip */
.week-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.week-day {
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 4px;
  background: var(--bg-subtle);
  border-radius: var(--r-2);
}
.week-day.is-today { background: var(--action-soft); }
.week-day.is-today .week-num { color: var(--action-text); }
.week-dow { font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 600; }
.week-num { font-size: 18px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1; margin: 2px 0; }
.week-count { font-size: 10px; color: var(--muted); }

/* Revenue tile */
.revenue-total {
  font-size: 32px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  margin: 4px 0 var(--s-3);
}

/* ============ Callout ============ */
.callout {
  background: var(--warn-soft);
  border-left: 3px solid var(--warn);
  border-radius: var(--r-2);
  padding: 10px var(--s-3);
  margin-bottom: var(--s-3);
  font-size: 12px;
  color: var(--warn-text);
}
.ok-line { color: var(--in-care-text); font-size: 13px; }

/* ============ Ledger ============ */
.ledger { list-style: none; padding: 0; margin: 0; }
.ledger li {
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 4px var(--s-3);
  align-items: baseline;
}
.ledger li:last-child { border-bottom: none; }
.ledger-when { color: var(--muted); font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ledger-type { font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-2); }
.ledger-actor { color: var(--muted); font-size: 11px; }
.ledger-detail { grid-column: 1 / -1; padding-left: 0; color: var(--text); font-size: 12px; }

.pet-list { list-style: none; padding: 0; margin: 0; }
.pet-list li { padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.pet-list li:last-child { border-bottom: none; }

/* ============ Calendar (week + day lane) ============ */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--s-2);
}
@media (max-width: 900px) { .calendar-grid { grid-template-columns: 1fr; } }
.cal-day {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  padding: 10px;
  min-height: 130px;
}
.cal-day.today { border-color: var(--action); box-shadow: 0 0 0 1px var(--action); }
.cal-day-head {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-2);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cal-empty { color: var(--faint); font-size: 11px; }
.cal-event {
  display: block;
  background: var(--bg-subtle);
  border-left: 3px solid var(--action);
  padding: 4px 6px;
  border-radius: 4px;
  margin-bottom: 4px;
  text-decoration: none;
  color: var(--text);
  font-size: 11px;
  line-height: 1.4;
}
.cal-event:hover { background: var(--hover); text-decoration: none; }
.cal-type-delivery { border-left-color: var(--ashes); }
.cal-type-partner_handoff { border-left-color: var(--crematorium); }
.cal-time { font-weight: 600; font-size: 10px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.cal-title { font-weight: 500; }
.cal-sub { color: var(--muted); font-size: 10px; }

.lane-board {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  padding: var(--s-4);
  overflow-x: auto;
}
.lane-hours {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
  margin-bottom: 6px;
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.lane-hour-strip { display: grid; grid-template-columns: repeat(13, 1fr); gap: 1px; }
.lane-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: stretch;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  min-height: 46px;
}
.lane-row:last-child { border-bottom: none; }
.lane-label { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.lane-track { position: relative; background: var(--bg-subtle); border-radius: var(--r-2); height: 32px; }
.lane-event {
  position: absolute; top: 3px; bottom: 3px;
  border-radius: var(--r-2);
  padding: 3px 8px;
  font-size: 11px;
  color: #fff;
  display: flex; align-items: center;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--action);
}
.lane-event:hover { filter: brightness(1.1); text-decoration: none; color: #fff; }

/* ============ Job detail (3-col with action rail) ============ */
.detail-layout {
  display: grid;
  grid-template-columns: 56px 1fr 300px;
  gap: var(--s-3);
  align-items: start;
}
@media (max-width: 1100px) {
  .detail-layout { grid-template-columns: 56px 1fr; }
  .detail-right { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .detail-layout { grid-template-columns: 1fr; }
  .action-rail { flex-direction: row; }
}

.action-rail {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 60px;
}
.action-rail-form { width: 100%; }
.action-rail-btn {
  background: none;
  border: none;
  padding: 8px 4px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border-radius: var(--r-2);
  text-decoration: none;
  color: var(--text-2);
  cursor: pointer;
  font-family: inherit;
}
.action-rail-btn:hover { background: var(--hover); text-decoration: none; color: var(--text); }
.action-rail-btn .icon { color: var(--text-2); }
.action-rail-btn:hover .icon { color: var(--text); }
.action-rail-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }

.detail-center, .detail-right { display: flex; flex-direction: column; gap: var(--s-3); }
.detail-center .card, .detail-right .card { margin-bottom: 0; }
.detail-section-head { margin-top: 0; margin-bottom: 10px; }

.contact-line {
  display: flex; align-items: center; gap: var(--s-2);
  padding: 4px 0;
  font-size: 13px;
}
.contact-icon {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-subtle); color: var(--text-2);
  border-radius: 50%;
}
.notif-on { margin-left: auto; color: var(--in-care-text); font-size: 10px; }

.label-pick {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  cursor: pointer;
}

/* ============ Lifecycle stepper ============ */
.stepper {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  padding: var(--s-3) var(--s-4);
  overflow-x: auto;
  scrollbar-width: none;
}
.stepper::-webkit-scrollbar { display: none; }
.step {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--faint);
  position: relative;
  white-space: nowrap;
}
.step::after {
  content: '';
  width: 16px;
  height: 1px;
  background: var(--border);
  margin: 0 4px;
}
.step:last-child::after { display: none; }
.step-dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px;
  font-weight: 600;
  color: var(--faint);
  flex-shrink: 0;
}
.step-done .step-dot {
  background: var(--in-care);
  border-color: var(--in-care);
  color: #fff;
}
.step-done { color: var(--text-2); }
.step-current .step-dot {
  background: var(--action);
  border-color: var(--action);
  color: #fff;
  box-shadow: 0 0 0 3px var(--action-soft);
}
.step-current { color: var(--text); font-weight: 600; }
.step-cancelled .step-dot { background: var(--danger); border-color: var(--danger); color: #fff; }
.step-cancelled { color: var(--danger-text); }

/* ============ Empty states ============ */
.empty-state {
  text-align: center;
  padding: var(--s-12) var(--s-6);
  color: var(--muted);
}
.empty-state .icon { width: 32px; height: 32px; color: var(--faint); margin-bottom: var(--s-3); stroke-width: 1.5; }
.empty-state h3 { font-size: 14px; color: var(--text); text-transform: none; letter-spacing: 0; margin-bottom: 6px; }
.empty-state p { color: var(--muted); font-size: 13px; max-width: 360px; margin: 0 auto var(--s-3); }
.empty {
  color: var(--muted);
  padding: var(--s-6) 0;
  text-align: center;
  font-size: 13px;
}

/* ============ Modal ============ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: none;
  z-index: 60;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 16px;
  overflow-y: auto;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--surface);
  border-radius: var(--r-4);
  box-shadow: var(--shadow-lg);
  max-width: 520px;
  width: 100%;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 96px);
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--border);
}
.modal-head h2 { font-size: 14px; }
.modal-head button.close { background: none; border: none; cursor: pointer; color: var(--muted); display: inline-flex; padding: 4px; }
.modal-head button.close:hover { color: var(--text); }
.modal-body { padding: var(--s-4) var(--s-5); overflow-y: auto; flex: 1; }
.modal-foot { padding: var(--s-3) var(--s-5); border-top: 1px solid var(--border); display: flex; gap: var(--s-2); justify-content: flex-end; }
.modal-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin: calc(-1 * var(--s-4)) calc(-1 * var(--s-5)) var(--s-4); }
.modal-tab {
  flex: 1; padding: 10px;
  font-size: 12px; font-weight: 500;
  color: var(--muted);
  text-align: center;
  cursor: pointer;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: inherit;
}
.modal-tab.active { color: var(--text); border-bottom-color: var(--text); font-weight: 600; }

.date-strip {
  display: grid;
  grid-template-columns: 28px repeat(7, 1fr);
  gap: 6px;
  align-items: center;
  margin-bottom: var(--s-3);
}
.date-strip-cal {
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
}
.date-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  padding: 8px 4px;
  cursor: pointer;
  transition: border-color 0.08s, background 0.08s;
}
.date-card:hover { border-color: var(--text-2); }
.date-card-day { font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 2px; }
.date-card-num { font-size: 18px; font-weight: 700; color: var(--text); line-height: 1; font-variant-numeric: tabular-nums; }
.date-card-mon { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }
.date-card.selected { border-color: var(--action); background: var(--action-soft); }
.date-card.selected .date-card-num { color: var(--action-text); }

.time-row { display: grid; grid-template-columns: 1fr 24px 1fr; gap: var(--s-2); align-items: center; }
.time-row .sep { text-align: center; color: var(--muted); font-size: 11px; }
.time-input { display: grid; grid-template-columns: 1fr 64px; gap: 4px; }

.section-rule {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  margin: var(--s-4) 0 8px;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.section-rule::before, .section-rule::after { content: ''; height: 1px; background: var(--border); }

/* ============ Side panel (slide-out) ============ */
.sidepanel-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.30);
  display: none;
  z-index: 50;
}
.sidepanel-overlay.open { display: block; }
.sidepanel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 100%; max-width: 420px;
  background: var(--surface);
  z-index: 60;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.18s ease;
  box-shadow: var(--shadow-lg);
}
.sidepanel.sidepanel-left {
  right: auto;
  left: 0;
  transform: translateX(-100%);
}
.sidepanel.open { transform: translateX(0); }
.sidepanel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--border);
}
.sidepanel-head h2 { font-size: 14px; }
.sidepanel-head button { background: none; border: none; cursor: pointer; color: var(--muted); padding: 4px; display: inline-flex; }
.sidepanel-body { flex: 1; overflow-y: auto; padding: var(--s-4) var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.sidepanel-foot { padding: var(--s-3) var(--s-5); border-top: 1px solid var(--border); display: flex; gap: var(--s-2); justify-content: flex-end; }

/* ============ Toasts ============ */
.toast-stack {
  position: fixed;
  bottom: var(--s-4);
  right: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  z-index: 80;
  pointer-events: none;
}
.toast {
  background: var(--text);
  color: var(--inverse);
  padding: 10px var(--s-3);
  border-radius: var(--r-3);
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-lg);
  min-width: 240px;
  max-width: 360px;
  animation: toast-in 0.18s ease;
  pointer-events: auto;
}
.toast-success { background: var(--in-care); }
.toast-error   { background: var(--danger); }
.toast a { color: var(--inverse); text-decoration: underline; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============ Command palette ============ */
.cmdk-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: none;
  z-index: 100;
  align-items: flex-start;
  justify-content: center;
  padding-top: 96px;
}
.cmdk-overlay.open { display: flex; }
.cmdk {
  background: var(--surface);
  border-radius: var(--r-4);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  max-height: 60vh;
  overflow: hidden;
}
.cmdk-input-row {
  display: flex;
  align-items: center;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
  gap: var(--s-2);
}
.cmdk-input-row .icon { color: var(--muted); }
.cmdk-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 15px;
  color: var(--text);
  font-family: inherit;
  height: auto;
  padding: 0;
}
.cmdk-results {
  overflow-y: auto;
  padding: var(--s-2);
}
.cmdk-group {
  padding: 4px var(--s-2) 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 600;
}
.cmdk-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px var(--s-2);
  border-radius: var(--r-2);
  cursor: pointer;
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
}
.cmdk-item:hover, .cmdk-item.active { background: var(--bg-subtle); text-decoration: none; }
.cmdk-item .icon { color: var(--muted); }
.cmdk-item-sub { color: var(--muted); font-size: 11px; margin-left: auto; }

/* ============ Status banner (case detail) ============ */
.status-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px var(--s-4);
  border-radius: var(--r-3);
  margin-bottom: var(--s-3);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}
.status-banner-icon { font-size: 8px; }
.status-banner-cta { font-weight: 500; opacity: 0.8; }
.status-banner-offer     { background: var(--in-care-soft); color: var(--in-care-text); border-color: var(--in-care); }
.status-banner-progress  { background: var(--action-soft); color: var(--action-text); border-color: transparent; }
.status-banner-care      { background: var(--in-care-soft); color: var(--in-care-text); }
.status-banner-success   { background: var(--done-soft); color: var(--done-text); }
.status-banner-warn      { background: var(--warn-soft); color: var(--warn-text); border-color: var(--warn); }
.status-banner-cancelled { background: var(--bg-subtle); color: var(--muted); }

/* ============ Inbox thread ============ */
.thread-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--s-3);
}
@media (max-width: 1000px) { .thread-layout { grid-template-columns: 1fr; } }
.thread-card { display: flex; flex-direction: column; min-height: 70vh; }
.thread { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 6px 0; max-height: 60vh; overflow-y: auto; }
.bubble {
  max-width: 75%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.45;
}
.bubble-body { white-space: pre-wrap; word-wrap: break-word; }
.bubble-meta { margin-top: 4px; font-size: 10px; color: var(--faint); font-variant-numeric: tabular-nums; }
.bubble-inbound { align-self: flex-start; background: var(--bg-subtle); color: var(--text); border-bottom-left-radius: 3px; }
.bubble-outbound { align-self: flex-end; background: var(--action); color: #fff; border-bottom-right-radius: 3px; }
.bubble-outbound .bubble-meta { color: rgba(255,255,255,0.75); }
.bubble-failed { background: var(--danger); color: #fff; }
.bubble-failed .bubble-meta { color: rgba(255,255,255,0.85); }
.reply-form { display: flex; flex-direction: column; gap: 8px; padding-top: var(--s-3); border-top: 1px solid var(--border); }
.reply-form textarea { min-height: 60px; }
.inbox-row.unread .rowlist-primary { font-weight: 700; }

/* ============ Auth login screen ============ */
.auth-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-6);
  background: var(--bg-subtle);
}
.auth-card {
  background: var(--surface);
  border-radius: var(--r-4);
  padding: 40px;
  max-width: 380px;
  width: 100%;
  box-shadow: var(--shadow-lg);
}
.auth-card .brand { padding: 0; border: none; justify-content: center; margin-bottom: var(--s-5); }
.auth-card h1 { font-size: 20px; text-align: center; margin-bottom: var(--s-5); }
.auth-card form { display: flex; flex-direction: column; gap: var(--s-3); }
.auth-card .btn { margin-top: var(--s-2); padding: 10px; height: 38px; }

/* ============ Source tiles ============ */
.source-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--s-3);
}
.source-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  padding: var(--s-4) var(--s-3) 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: border-color 0.08s;
}
.source-tile:hover { border-color: var(--text-2); }
.source-tile.is-inactive { opacity: 0.55; }
.source-avatar {
  width: 48px; height: 48px;
  border-radius: var(--r-3);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
}
.source-name { font-weight: 500; font-size: 12px; color: var(--text); }