/* ApexOS workspace shell — sidebar, KPI strip, command palette, mobile nav.
   Loaded by public/app.html as a separate sheet so the standalone CRM SPA
   gets the workspace primitives WITHOUT the claims-app overflow constraints
   in public/css/app.css.
   Light-touch: reuses the CSS variables declared in public/css/theme.css
   (--bg-2, --surface, --border, --fg, --accent, --sidebar-w, --topbar-h,
   --font-display, --font-body, --radius, --radius-sm). */

:root {
  --sidebar-w: 260px;
  --topbar-h: 60px;
}

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

/* ── APP SHELL LAYOUT ─────────────────────────────────────────────────── */
#workspace-shell {
  display: flex;
  flex: 1;
  min-height: 0;
  width: 100%;
}

/* ── SIDEBAR ───────────────────────────────────────────────────────────── */
#workspace-sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--bg-2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  transition: transform 0.22s ease;
}

.workspace-sidebar-header {
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.workspace-sidebar-logo-icon {
  width: 32px; height: 32px;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display, 'Sora', sans-serif);
  font-size: 15px; color: white; font-weight: 700;
}

.workspace-sidebar-logo-text {
  font-family: var(--font-display, 'Sora', sans-serif);
  font-weight: 700; font-size: 16px; letter-spacing: -0.02em;
}

.workspace-sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 10px 8px 16px;
}

.workspace-nav-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 10px 12px 6px;
}

.workspace-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--radius-sm, 8px);
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-2);
  text-decoration: none;
  cursor: pointer;
  border: none;
  background: none;
  text-align: left;
  border-left: 2px solid transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  font-family: var(--font-body, 'DM Sans', sans-serif);
}
.workspace-nav-item:hover { background: var(--surface, #18181b); color: var(--fg); }
.workspace-nav-item.active {
  background: var(--bg-2, #111114);
  color: var(--fg);
  border-left-color: var(--accent);
}
.workspace-nav-item svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.85; }
.workspace-nav-item.active svg { opacity: 1; color: var(--accent); }

.workspace-nav-item .count-pill {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--surface-2, #222228);
  color: var(--fg-2);
}

.workspace-sidebar-footer {
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--fg-3);
}

/* ── SLIM TOPBAR ───────────────────────────────────────────────────────── */
#workspace-topbar {
  height: var(--topbar-h);
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  flex-shrink: 0;
}

.workspace-topbar-hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--fg-2);
  cursor: pointer;
  width: 32px; height: 32px;
  border-radius: 6px;
  align-items: center; justify-content: center;
}
.workspace-topbar-hamburger:hover { background: var(--surface, #18181b); color: var(--fg); }

.workspace-topbar-title {
  font-family: var(--font-display, 'Sora', sans-serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.workspace-topbar-breadcrumb {
  font-size: 12px;
  color: var(--fg-3);
  margin-left: 4px;
}
.workspace-topbar-spacer { flex: 1; }
.workspace-topbar-actions { display: flex; align-items: center; gap: 10px; }

/* Per-workspace sub-tab pill nav (replaces old 11-tab row). */
.workspace-subtabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.workspace-subtab {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-3);
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.workspace-subtab:hover { background: var(--surface, #18181b); color: var(--fg); }
.workspace-subtab.active {
  background: var(--accent-dim, rgba(139,92,246,0.15));
  color: var(--accent);
  border-color: rgba(139,92,246,0.35);
}

/* Hide the legacy 11-tab bar — sidebar replaces it. */
.tab-bar-legacy { display: none !important; }

/* ── KPI STRIP (Home + Production) ─────────────────────────────────────── */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
.kpi-card {
  background: var(--surface, #18181b);
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 96px;
}
.kpi-card-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-3);
}
.kpi-card-value {
  font-family: var(--font-display, 'Sora', sans-serif);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.kpi-card-delta { font-size: 11px; color: var(--fg-3); }
.kpi-card-delta.pos { color: var(--green); }
.kpi-card-delta.neg { color: var(--red); }

.kpi-row.v2 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}
.role-panel {
  background: var(--surface, #18181b);
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  padding: 20px;
}
.role-panel-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 14px;
}

/* ── PRODUCTION WORKSPACE ──────────────────────────────────────────────── */
.view-toggle-group {
  display: inline-flex;
  background: var(--surface, #18181b);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  padding: 3px;
  gap: 2px;
}
.view-toggle-btn {
  border: none; background: transparent;
  color: var(--fg-3);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.view-toggle-btn.active { background: var(--accent-dim, rgba(139,92,246,0.15)); color: var(--accent); }
.view-toggle-btn:hover:not(.active) { color: var(--fg); }

.production-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 20px;
  align-items: start;
}
.production-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.production-rail { display: flex; flex-direction: column; gap: 14px; position: sticky; top: calc(var(--topbar-h) + 24px); }

.job-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.job-card {
  background: var(--surface, #18181b);
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  padding: 16px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.12s;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.job-card:hover { border-color: rgba(139,92,246,0.4); transform: translateY(-1px); }
.job-card-title { font-family: var(--font-display, 'Sora', sans-serif); font-size: 14px; font-weight: 700; }
.job-card-meta { font-size: 12px; color: var(--fg-3); }
.job-card-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.job-progress { height: 6px; border-radius: 999px; background: var(--bg-3, #1a1a20); overflow: hidden; }
.job-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, #6d28d9 100%);
  border-radius: 999px;
  transition: width 0.4s ease;
}

#map-canvas { height: 480px; border-radius: var(--radius, 12px); border: 1px solid var(--border); background: var(--bg-3, #1a1a20); }

.timeline-lanes { display: flex; flex-direction: column; gap: 8px; }
.timeline-lane {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 12px;
  align-items: center;
  background: var(--surface, #18181b);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  padding: 10px 14px;
}
.timeline-lane-label { font-size: 12px; font-weight: 600; color: var(--fg-2); }
.timeline-bar {
  height: 22px; border-radius: 5px;
  background: var(--accent-dim, rgba(139,92,246,0.15));
  color: var(--accent);
  font-size: 11px; font-weight: 600;
  padding: 0 8px;
  display: flex; align-items: center;
  border: 1px solid rgba(139,92,246,0.3);
}

/* ── COMMAND PALETTE ───────────────────────────────────────────────────── */
#command-palette {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(6px);
  z-index: 200;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 14vh;
}
#command-palette.show { display: flex; animation: fadeIn 0.18s ease-out; }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
#command-palette .command-palette-panel {
  width: 100%;
  max-width: 560px;
  background: var(--bg-2);
  border: 1px solid var(--border-2, rgba(255,255,255,0.12));
  border-radius: var(--radius, 12px);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
}
#command-palette-input {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--fg);
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  outline: none;
}
#command-palette-results { max-height: 50vh; overflow-y: auto; }
.command-palette-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 18px;
  cursor: pointer;
  font-size: 13px;
  color: var(--fg-2);
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}
.command-palette-item:last-child { border-bottom: none; }
.command-palette-item.active { background: var(--accent-dim, rgba(139,92,246,0.15)); color: var(--fg); }
.command-palette-item-label { font-weight: 600; }
.command-palette-item-sub { font-size: 11px; color: var(--fg-3); }
.command-palette-empty { padding: 20px; text-align: center; color: var(--fg-3); font-size: 13px; }
.command-palette-footer {
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--fg-3);
  display: flex;
  gap: 14px;
  background: var(--bg-3, #1a1a20);
}
.command-palette-footer kbd {
  background: var(--surface, #18181b);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 10px;
}

/* ── MOBILE BOTTOM NAV + RESPONSIVE ───────────────────────────────────── */
#mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  z-index: 80;
  justify-content: space-around;
  align-items: stretch;
  padding: 0 6px env(safe-area-inset-bottom, 0);
}
.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 1;
  text-decoration: none;
  color: var(--fg-3);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.mobile-nav-item.active { color: var(--accent); }
.mobile-nav-item svg { width: 20px; height: 20px; }

.mobile-fab {
  display: none;
  position: fixed;
  right: 16px;
  bottom: 76px;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  border: none;
  cursor: pointer;
  align-items: center; justify-content: center;
  box-shadow: 0 10px 24px rgba(139,92,246,0.35);
  z-index: 90;
  font-size: 22px;
}
.mobile-fab:hover { background: #7c3aed; }
.mobile-fab-menu {
  display: none;
  position: fixed;
  right: 16px;
  bottom: 138px;
  background: var(--bg-2);
  border: 1px solid var(--border-2, rgba(255,255,255,0.12));
  border-radius: var(--radius, 12px);
  padding: 8px;
  z-index: 91;
  min-width: 180px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.45);
}
.mobile-fab-menu.show { display: flex; flex-direction: column; gap: 2px; }
.mobile-fab-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--fg-2);
  text-decoration: none;
  font-weight: 600;
}
.mobile-fab-menu a:hover { background: var(--surface, #18181b); color: var(--fg); }

@media (max-width: 768px) and (orientation: portrait) {
  #workspace-sidebar { display: none; }
  #workspace-sidebar.open {
    display: flex;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 95;
    width: 280px; min-width: 280px;
    background: var(--bg-2);
    box-shadow: 16px 0 40px rgba(0,0,0,0.4);
  }
  .workspace-topbar-hamburger { display: flex; }
  .kpi-strip { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .kpi-strip.scroll { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .kpi-strip.scroll .kpi-card { min-width: 220px; scroll-snap-align: start; flex-shrink: 0; }
  .production-grid { grid-template-columns: 1fr; }
  .production-rail { position: static; }
  #mobile-bottom-nav { display: flex; }
  .mobile-fab { display: flex; }
  .workspace-subtabs { flex-wrap: nowrap; overflow-x: auto; }
  /* Legacy pages — drop the centering container on mobile too. */
  main, #content { padding: 16px !important; }
}

@media (min-width: 1280px) {
  .production-grid { grid-template-columns: 1fr 320px; }
}
@media (min-width: 769px) and (max-width: 1279px) {
  .production-rail { display: none; }
  .production-grid { grid-template-columns: 1fr; }
}

/* ── Field-worker Quick View panel ─────────────────────────────────────────
 * Floating "Quick View" button + slide-up contact panel that surfaces the
 * active job/lead card on mobile breakpoints. The FAB uses the `hidden`
 * HTML attribute for show/hide; the mobile media query turns it back on
 * when a context-bearing card is active. The panel and overlay use a
 * dedicated `.qv-open` class to drive the slide-up transition rather
 * than display:none, so transform can animate cleanly off-screen too.
 * Tokens (--accent, --surface, --bg-2, --border, --radius, --fg-3) reuse
 * job-card / comms-row chrome so the panel lands visually consistent
 * without forking the theme.
 */
@media (max-width: 768px) {
  .qv-fab[data-context="available"]:not([hidden]) { display: flex; }
}

.qv-fab {
  position: fixed;
  right: 16px;
  bottom: 76px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 22px;
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  cursor: pointer;
  align-items: center; justify-content: center;
  gap: 8px;
  z-index: 90;
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.qv-fab svg { color: var(--accent); }
.qv-fab:hover { background: rgba(255,255,255,0.06); }
.qv-fab.qv-fab-active {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.qv-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 28, 0.55);
  z-index: 95;
}

.qv-panel {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  max-height: 80vh;
  background: var(--bg-2);
  color: var(--fg);
  border-top-left-radius: var(--radius, 14px);
  border-top-right-radius: var(--radius, 14px);
  border-top: 1px solid var(--border, rgba(255,255,255,0.12));
  box-shadow: 0 -16px 40px rgba(0,0,0,0.5);
  z-index: 96;
  display: flex; flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom, 0);
  transform: translateY(100%);
  transition: transform 0.25s ease;
  visibility: hidden;
  pointer-events: none;
}
/* When JS opens the panel, slide up + accept clicks. The `hidden`
 * attribute is removed at the same time so the UA stylesheet's
 * `display:none` no longer applies. */
.qv-panel.qv-open {
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}
/* When desktop — never show regardless of class state. */
@media (min-width: 769px) {
  .qv-fab,
  .qv-panel,
  .qv-overlay { display: none !important; }
}

.qv-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 10px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.10));
}
.qv-head-main { min-width: 0; flex: 1; }
.qv-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.10em;
  color: var(--accent); text-transform: uppercase;
}
.qv-title {
  margin: 4px 0 0; padding: 0;
  font-size: 18px; line-height: 1.25; font-weight: 700;
  color: var(--fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qv-close {
  background: transparent; border: 0; cursor: pointer;
  color: var(--fg-3); font-size: 24px; line-height: 1;
  padding: 4px 8px; border-radius: 6px;
}
.qv-close:hover { color: var(--fg); background: var(--surface); }

.qv-body {
  padding: 14px 18px 22px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; gap: 14px;
}
.qv-empty { color: var(--fg-3); font-size: 13px; padding: 12px 0; }
.qv-section { display: flex; flex-direction: column; gap: 6px; }
.qv-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.10em;
  color: var(--fg-3); text-transform: uppercase;
}
.qv-row-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qv-badge {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  font-size: 12px; font-weight: 700; color: var(--fg);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.qv-badge-scheduled { color: #93c5fd; border-color: rgba(147,197,253,0.4); }
.qv-badge-in_progress { color: #fbbf24; border-color: rgba(251,191,36,0.4); }
.qv-badge-on_hold { color: #f87171; border-color: rgba(248,113,113,0.4); }
.qv-badge-completed { color: #34d399; border-color: rgba(52,211,153,0.4); }
.qv-badge-closed { color: var(--fg-3); }
.qv-meta { font-size: 12px; color: var(--fg-3); }
.qv-sync { margin-left: auto; font-size: 11px; color: var(--fg-3); }

.qv-address .qv-link { color: var(--fg); text-decoration: none; font-size: 14px; }

.qv-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.qv-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 10px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.02em;
  text-decoration: none; cursor: pointer;
  background: var(--accent); color: white;
  border: 1px solid var(--accent);
}
.qv-btn-call { background: #34d399; border-color: #34d399; color: #0f172a; }
.qv-btn-map { background: transparent; color: var(--fg); border-color: var(--border, rgba(255,255,255,0.18)); }
.qv-btn-map svg { color: var(--accent); }
.qv-btn-disabled { background: var(--surface); border-color: var(--border); color: var(--fg-3); cursor: not-allowed; }

.qv-contact-row {
  display: flex; align-items: center; gap: 8px;
  color: var(--fg-2); font-size: 13px;
}
.qv-contact-row svg { color: var(--accent); flex-shrink: 0; }
.qv-link { color: var(--fg); text-decoration: none; }
.qv-link:hover { text-decoration: underline; }

.qv-status-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
}
.qv-status-btn {
  appearance: none;
  background: var(--surface);
  color: var(--fg-2);
  border: 1px solid var(--border, rgba(255,255,255,0.10));
  border-radius: 8px;
  padding: 9px 10px;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  text-transform: capitalize;
  letter-spacing: 0.02em;
}
.qv-status-btn.is-current {
  border-color: var(--accent);
  color: var(--fg);
  background: rgba(139,92,246,0.12);
}
.qv-status-error {
  color: #f87171; font-size: 12px; min-height: 14px;
}

/* Swipe cards. */
.swipe-card { will-change: transform; touch-action: pan-y; }
@media (prefers-reduced-motion: reduce) {
  .swipe-card { transform: none !important; }
  #command-palette.show { animation: none; }
}

/* Automation workspace — tabbed shell with slide-in detail panel.
 * Composes existing workspace tokens (--bg-2/--bg-3, --fg-2/--fg-3,
 * --accent) so the chrome matches CRM/Production rails without forking
 * the theme. .panel-slide mirrors the slide-from-right transform idiom
 * that `.qv-panel` already uses for the mobile quick view.
 */
.aut-shell { position: relative; }
.aut-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.aut-tab {
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-3);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.aut-tab:hover { color: var(--fg); background: var(--bg-3); }
.aut-tab[aria-selected="true"] {
  background: var(--bg-3);
  color: var(--accent-2, var(--accent));
  border-color: var(--accent);
}
.aut-list {
  background: var(--bg-2);
  border: 1px solid var(--border, rgba(255,255,255,0.10));
  border-radius: 10px;
  overflow: hidden;
}
.aut-detail.panel-slide {
  position: fixed;
  right: 0;
  top: 64px;
  bottom: 0;
  width: min(480px, 100%);
  background: var(--bg-2);
  border-left: 1px solid var(--border, rgba(255,255,255,0.10));
  transform: translateX(100%);
  transition: transform 220ms ease;
  z-index: 50;
  overflow: auto;
  padding: 20px;
  box-shadow: -16px 0 32px rgba(0, 0, 0, 0.4);
}
.aut-detail.panel-slide[data-open="true"] { transform: translateX(0); }
.aut-detail h2 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--fg);
}
.aut-detail pre {
  background: var(--bg-3);
  color: var(--fg-2);
  border: 1px solid var(--border, rgba(255,255,255,0.10));
  border-radius: 8px;
  padding: 12px;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow: auto;
  max-height: calc(100vh - 200px);
  white-space: pre-wrap;
  word-break: break-word;
}
.aut-detail .btn-ghost {
  background: transparent;
  color: var(--fg-3);
  border: 1px solid var(--border, rgba(255,255,255,0.10));
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  margin-bottom: 14px;
}
.aut-detail .btn-ghost:hover { color: var(--fg); border-color: var(--accent); }

/* Dashboard tile. */
.dashboard-tile {
  background: var(--surface, #18181b);
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 160px;
}
.dashboard-tile-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Clickable variant of .kpi-card — used by the Dashboard CRM Workspace
 * strip. Keeps the card chrome identical to its non-clickable sibling
 * (border, background, padding) and only adds the hover affordance so
 * the strip reads as a quick-jump strip, not a primary CTA. */
.kpi-card--clickable { cursor: pointer; transition: transform .15s ease; text-decoration: none; color: inherit; }
.kpi-card--clickable:hover { transform: translateY(-1px); border-color: var(--border-2); }
.feed-row {
  display: flex; gap: 10px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--border);
  font-size: 12px; color: var(--fg-2);
}
.feed-row:last-child { border-bottom: none; }

/* ── COMMUNICATIONS WORKSPACE ───────────────────────────────────────────
   Component classes for the unified inbox, per-entity timeline, templates,
   campaigns, and analytics views. Loaded alongside workspace.css so the
   SPA renders inside the existing AppShell. */
.comms-inbox,
.comms-timeline,
.comms-templates,
.comms-analytics,
.comms-settings {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 20px;
  padding: 24px;
}
.comms-timeline,
.comms-templates,
.comms-analytics,
.comms-settings { grid-template-columns: 1fr; }
.comms-section-header {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.comms-section-header h2 {
  font-family: var(--font-display, 'Sora', sans-serif);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}
.comms-filter-rail {
  background: var(--surface, #18181b);
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  padding: 14px 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  align-self: start;
  position: sticky;
  top: calc(var(--topbar-h, 60px) + 24px);
}
.comms-filter-rail label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-top: 4px;
}
.comms-filter-rail select,
.comms-filter-rail input[type="checkbox"] {
  background: var(--bg-3, #1a1a20);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 13px;
  font-family: var(--font-body, 'DM Sans', sans-serif);
}
.comms-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.comms-row {
  background: var(--surface, #18181b);
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.12s;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.comms-row:hover { border-color: rgba(139,92,246,0.4); transform: translateY(-1px); }
.comms-row-unread { border-left: 3px solid var(--accent); }
.comms-row-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--fg-3);
  flex-wrap: wrap;
}
.comms-row-meta time { margin-left: auto; }
.comms-row-direction {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 10px;
  color: var(--fg-2);
}
.comms-row-subject {
  font-family: var(--font-display, 'Sora', sans-serif);
  font-size: 14px;
  font-weight: 700;
  margin: 0;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.comms-row-preview {
  font-size: 12px;
  color: var(--fg-2);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.comms-row-from-to {
  font-size: 11px;
  color: var(--fg-3);
}
.comms-channel-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  line-height: 1.4;
}
.comms-thread {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 760px;
}
.comms-msg {
  background: var(--surface, #18181b);
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.comms-msg-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--fg-3);
  flex-wrap: wrap;
}
.comms-msg h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
}
.comms-msg-body {
  font-size: 13px;
  color: var(--fg-2);
  white-space: pre-wrap;
  line-height: 1.55;
}
.comms-msg-from-to { font-size: 11px; color: var(--fg-3); }

.comms-tpl-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.comms-tpl-row {
  background: var(--surface, #18181b);
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.comms-tpl-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--fg-3);
}
.comms-tpl-row h3 {
  font-family: var(--font-display, 'Sora', sans-serif);
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}
.comms-tpl-body {
  font-size: 12px;
  color: var(--fg-2);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.comms-tpl-vars {
  font-size: 11px;
  color: var(--fg-3);
}
.comms-tpl-vars code {
  background: var(--bg-3, #1a1a20);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  margin-right: 4px;
}

.comms-stat-card {
  background: var(--surface, #18181b);
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 180px;
}
.comms-stat-value {
  font-family: var(--font-display, 'Sora', sans-serif);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.comms-stat-label {
  font-size: 11px;
  color: var(--fg-3);
}

@media (max-width: 768px) {
  .comms-inbox { grid-template-columns: 1fr; padding: 16px; }
  .comms-filter-rail { position: static; }
  .comms-tpl-list { grid-template-columns: 1fr; }
}

/* ── MARKETPLACE WORKSPACE ──────────────────────────────────────────────
   Participant directory + listing cards. Mirrors the slide-in detail
   idiom from .aut-detail.panel-slide and the sticky filter rail from
   .comms-filter-rail so the Marketplace workspace composes with the
   existing tokens (--surface, --border, --accent, --accent-2) rather
   than forking the theme. */
.mp-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 20px;
  padding: 24px;
}
.mp-filter-rail {
  background: var(--surface, #18181b);
  border: 1px solid var(--border, rgba(255,255,255,0.10));
  border-radius: var(--radius, 12px);
  padding: 14px 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  align-self: start;
  position: sticky;
  top: calc(var(--topbar-h, 60px) + 24px);
}
.mp-filter-rail .mp-rail-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 6px 0 4px;
}
.mp-filter-rail .mp-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--fg-2);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.mp-filter-rail .mp-tab:hover {
  color: var(--fg);
  background: var(--bg-3, #1a1a20);
}
.mp-filter-rail .mp-tab[aria-selected="true"] {
  background: var(--bg-3, #1a1a20);
  color: var(--accent-2, var(--accent));
  border-color: var(--accent);
}
.mp-filter-rail .mp-tab-count {
  margin-left: auto;
  font-size: 11px;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}
.mp-filter-rail input.mp-rail-search {
  background: var(--bg-3, #1a1a20);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 13px;
  font-family: var(--font-body, 'DM Sans', sans-serif);
}
.mp-grid-wrap { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mp-grid-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.mp-grid-head h2 {
  font-family: var(--font-display, 'Sora', sans-serif);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}
.mp-grid-head .mp-count {
  font-size: 12px;
  color: var(--fg-3);
}
.mp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.mp-card {
  background: var(--surface, #18181b);
  border: 1px solid var(--border, rgba(255,255,255,0.10));
  border-radius: var(--radius, 12px);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.12s;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 110px;
}
.mp-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.mp-card-type {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 600;
}
.mp-card-title {
  font-family: var(--font-display, 'Sora', sans-serif);
  font-weight: 600;
  font-size: 14px;
  color: var(--fg);
  line-height: 1.3;
}
.mp-card-rating {
  color: var(--accent-2, var(--accent));
  font-size: 12px;
  font-weight: 600;
}
.mp-card-rating .mp-card-rating-placeholder { color: var(--fg-3); font-weight: 400; font-style: italic; }
.mp-card-tier {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-3);
  background: var(--bg-3, #1a1a20);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
  align-self: flex-start;
}
.mp-card-contact {
  font-size: 12px;
  color: var(--fg-2);
  margin-top: 4px;
}
.mp-card-contact a { color: var(--accent-2, var(--accent)); text-decoration: none; }
.mp-card-contact a:hover { text-decoration: underline; }
.mp-empty {
  background: var(--surface, #18181b);
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  padding: 24px;
  color: var(--fg-3);
  font-size: 13px;
  text-align: center;
}
.mp-detail.panel-slide {
  position: fixed;
  right: 0;
  top: 64px;
  bottom: 0;
  width: min(480px, 100%);
  background: var(--bg-2);
  border-left: 1px solid var(--border, rgba(255,255,255,0.10));
  transform: translateX(100%);
  transition: transform 220ms ease;
  z-index: 50;
  overflow: auto;
  padding: 20px;
  box-shadow: -16px 0 32px rgba(0, 0, 0, 0.4);
}
.mp-detail.panel-slide[data-open="true"] { transform: translateX(0); }
.mp-detail h2 {
  font-family: var(--font-display, 'Sora', sans-serif);
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--fg);
}
.mp-detail .mp-detail-type {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 14px;
}
.mp-detail .mp-detail-row {
  font-size: 13px;
  color: var(--fg-2);
  margin: 6px 0;
}
.mp-detail .mp-detail-row strong {
  display: block;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 600;
  margin-bottom: 2px;
}
.mp-detail .mp-detail-bio {
  font-size: 13px;
  color: var(--fg-2);
  margin: 10px 0 14px;
  line-height: 1.5;
}
.mp-detail .mp-detail-specialties {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mp-detail .mp-detail-specialties .mp-chip {
  background: var(--bg-3, #1a1a20);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11px;
  color: var(--fg-2);
}
.mp-detail .btn-ghost {
  background: transparent;
  color: var(--fg-3);
  border: 1px solid var(--border, rgba(255,255,255,0.10));
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  margin-bottom: 14px;
}
.mp-detail .btn-ghost:hover { color: var(--fg); border-color: var(--accent); }
@media (max-width: 900px) {
  .mp-shell { grid-template-columns: 1fr; padding: 16px; }
  .mp-filter-rail { position: static; }
}

/* ── APP SHELL — dynamic section visibility ────────────────────────────── */
/* The SPA shell (public/js/shell.js) hides inactive sections with the
   [hidden] attribute rather than swap classes, so the legacy [.page]
   default { display: none; } needs an override here. */
.page.app-section[hidden] { display: none !important; }
.page.app-section { display: block; }
.app-section[hidden] { display: none !important; }
.app-section { display: block; }
.app-section-empty { padding: 14px 0; }
.workspace-nav-item.active { color: var(--accent); background: rgba(var(--accent-rgb, 217, 119, 6), 0.12); border-radius: 8px; }