/* ==========================================================================
   👑 Superchain Unified Hub CSS (Vanilla, Modern, Glassmorphism)
   ========================================================================== */

:root {
  --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Theme Core Colors */
  --bg-app: #030206;
  --panel-bg: rgba(12, 11, 20, 0.55);
  --panel-border: rgba(255, 255, 255, 0.05);
  --panel-border-hover: rgba(255, 255, 255, 0.12);

  --text-primary: #f3f4f6;
  --text-secondary: #9ca3af;
  --text-muted: #555866;

  /* Ambient Colors */
  --accent-indigo: #6366f1;
  --accent-indigo-glow: rgba(99, 102, 241, 0.15);
  --accent-pink: #ec4899;
  --accent-emerald: #10b981;
  --accent-amber: #f59e0b;

  /* Agent Accent Colors */
  --color-antigrav: #06b6d4;      /* Gemini Cyan */
  --color-antigrav-glow: rgba(6, 182, 212, 0.15);
  --color-openai: #10b981;        /* GPT Green */
  --color-openai-glow: rgba(16, 185, 129, 0.15);
  --color-claude: #f97316;        /* Claude Coral */
  --color-claude-glow: rgba(249, 115, 22, 0.15);

  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset and Global Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-app);
  color: var(--text-primary);
  font-family: var(--font-sans);
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  position: relative;
}

/* Ambient glow nodes in the background */
.ambient-glow {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(140px);
  opacity: 0.18;
}
.spot-1 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, var(--accent-indigo) 0%, transparent 70%);
  top: -10%;
  right: 5%;
}
.spot-2 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, var(--accent-pink) 0%, transparent 70%);
  bottom: -15%;
  left: 2%;
}
.spot-3 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, var(--accent-emerald) 0%, transparent 70%);
  top: 30%;
  left: 35%;
}

/* Glassmorphic card definition */
.glass-panel {
  background: var(--panel-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.45);
  transition: var(--transition-smooth);
}
.glass-panel:hover {
  border-color: var(--panel-border-hover);
}

/* ==========================================
   1. LOGIN PORTAL STYLING
   ========================================== */
.login-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10;
  background: radial-gradient(circle at center, rgba(12, 10, 24, 0.8) 0%, #030206 100%);
  gap: 20px;
}

/* Simulated Hosts Router bar styling */
.dev-host-router {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  border-color: rgba(99, 102, 241, 0.25);
  background: rgba(15, 12, 35, 0.7);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  z-index: 12;
}

.router-tag {
  font-size: 0.82rem;
  font-weight: 700;
  color: #a5b4fc;
}

.router-link {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.router-link:hover, .router-link.active {
  color: #fff;
  background: var(--accent-indigo);
  border-color: var(--accent-indigo);
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.4);
}

.login-card {
  width: 440px;
  padding: 40px;
  border-color: rgba(99, 102, 241, 0.25);
  background: linear-gradient(135deg, rgba(15, 12, 35, 0.6) 0%, rgba(10, 10, 18, 0.7) 100%);
  position: relative;
  overflow: hidden;
  z-index: 11;
}

.login-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--accent-indigo) 50%, transparent 100%);
}

.login-logo {
  text-align: center;
  margin-bottom: 24px;
}
.logo-icon {
  font-size: 2.5rem;
  display: inline-block;
  margin-bottom: 12px;
  filter: drop-shadow(0 0 12px var(--accent-indigo-glow));
}
.login-logo h2 {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  background: linear-gradient(135deg, #ffffff 0%, #a5b4fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.login-logo p {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-top: 4px;
}

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

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.form-group label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.form-group input, .form-group select {
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 12px 16px;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  outline: none;
  transition: var(--transition-smooth);
  /* Absolute fix for focus typing issues */
  pointer-events: auto !important;
  cursor: text !important;
}
.form-group input:focus, .form-group select:focus {
  border-color: var(--accent-indigo);
  box-shadow: 0 0 12px var(--accent-indigo-glow);
  background: rgba(10, 10, 20, 0.6) !important;
}

.error-msg {
  color: #ef4444;
  font-size: 0.85rem;
  font-weight: 500;
  text-align: center;
}

.submit-btn {
  background: linear-gradient(135deg, var(--accent-indigo) 0%, #4f46e5 100%);
  color: #fff;
  border: none;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 14px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.35);
  transition: var(--transition-smooth);
}
.submit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.55);
}

.submit-btn.accent {
  background: linear-gradient(135deg, var(--accent-pink) 0%, #c026d3 100%);
  box-shadow: 0 4px 15px rgba(236, 72, 153, 0.35);
}
.submit-btn.accent:hover {
  box-shadow: 0 6px 20px rgba(236, 72, 153, 0.55);
}

/* Secondary actions on the login card — "Forgot your password?" and the way
   back from it. A <button> rather than an <a>: these switch what the card is
   showing, they do not navigate, and a link that goes nowhere is a link the
   browser offers to open in a new tab. */
.login-alt-row {
  margin-top: 12px;
  text-align: center;
}

.login-linkbtn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.78rem;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 0.18s ease;
}

.login-linkbtn:hover { color: var(--text-primary, #fff); }
.login-linkbtn:focus-visible { outline: 2px solid rgba(255,255,255,.35); outline-offset: 3px; border-radius: 3px; }

.login-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0 0 14px;
}

.login-terms {
  margin-top: 20px;
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.4;
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  padding-top: 12px;
  text-align: center;
  font-style: italic;
}

.login-footer {
  margin-top: 16px;
  font-size: 0.68rem;
  color: var(--text-muted);
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.02);
  padding-top: 10px;
}

.login-help {
  margin-top: 16px;
  font-size: 0.7rem;
  color: var(--text-muted);
  line-height: 1.4;
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  padding-top: 12px;
}

/* ==========================================
   2. ENTERPRISE PORTAL WRAPPER
   ========================================== */
.portal-wrapper {
  display: flex;
  width: 100vw;
  height: 100vh;
  position: relative;
  z-index: 1;
}

/* Sidebar structure */
.sidebar-panel {
  width: 280px;
  height: 100vh;
  border-radius: 0;
  border-left: none;
  border-top: none;
  border-bottom: none;
  background: rgba(8, 7, 12, 0.75);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex-shrink: 0;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand-icon {
  font-size: 2rem;
}
.brand-text h3 {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  background: linear-gradient(135deg, #ffffff 0%, #a5b4fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.brand-text p {
  font-size: 0.72rem;
  color: var(--accent-indigo);
  font-weight: 700;
  text-transform: uppercase;
}

.user-badge-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.04);
  padding: 12px;
  border-radius: 12px;
}
.user-avatar {
  font-size: 1.4rem;
  background: rgba(255, 255, 255, 0.04);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.user-info h4 {
  font-size: 0.88rem;
  font-weight: 700;
}
.role-pill {
  display: inline-block;
  font-size: 0.65rem;
  background: var(--accent-indigo-glow);
  color: #a5b4fc;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(99, 102, 241, 0.2);
  margin-top: 2px;
  font-weight: 700;
}

.sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
}

.nav-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nav-title {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  padding-left: 10px;
  margin-bottom: 6px;
}

.nav-item {
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.88rem;
  padding: 10px 14px;
  border-radius: 8px;
  text-align: left;
  transition: var(--transition-smooth);
  position: relative;
}
.nav-item:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.03);
}
.nav-item.active {
  color: #fff;
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.18);
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 25%;
  height: 50%;
  width: 3px;
  background-color: var(--accent-indigo);
  border-radius: 0 4px 4px 0;
}

/* The sidebar's functional groups. Six of them inside one .nav-section, each
   its own column so a group can be hidden whole when the permission gate has
   hidden everything in it. */
.nav-sec {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nav-sec + .nav-sec {
  margin-top: 14px;
}

/* The shortcut rail — the pages this person opens most, above every group.
   It reads as part of the nav rather than as a widget on top of it: the same
   row, one shade lighter, and a rule under it so the groups below still read
   as the full map. */
#nav-section-frequent {
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.nav-item.nav-freq {
  background: rgba(255, 255, 255, 0.02);
}
.nav-item.nav-freq:hover {
  background: rgba(255, 255, 255, 0.06);
}
.nav-freq-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  padding-top: 16px;
}

.logout-btn {
  width: 100%;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.04);
  outline: none;
  cursor: pointer;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-weight: 700;
  padding: 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: var(--transition-smooth);
}
.logout-btn:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.sidebar-copyright {
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 12px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.6;
}

/* Workspace Frame */
.workspace-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.workspace-header {
  height: 70px;
  border-bottom: 1px solid var(--panel-border);
  padding: 0 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(5, 5, 8, 0.4);
}

.header-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 600;
}
.crumb-parent { color: var(--text-secondary); }
.crumb-arrow { color: var(--text-muted); font-size: 0.75rem; }
.crumb-active { color: #fff; }

.header-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.03);
  padding: 6px 12px;
  border-radius: 12px;
}

.pulse-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.pulse-indicator.green { background-color: var(--accent-emerald); box-shadow: 0 0 8px var(--accent-emerald); }

.workspace-body {
  flex: 1;
  padding: 32px;
  overflow-y: auto;
}

/* Views framework */
.tab-view {
  display: none;
  flex-direction: column;
  gap: 24px;
}
.tab-view.active {
  display: flex;
}

.view-header {
  margin-bottom: 8px;
}
.view-header h2 {
  font-size: 1.6rem;
  font-weight: 700;
}
.view-header p {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.view-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

/* Phase 4 — per-workflow configurable top actions + batch readout */
.gen-module-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gen-module-bulkbar { display: inline-flex; align-items: center; gap: 8px; }
.gen-module-bulk-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: 8px; cursor: pointer; font-size: 0.82rem; font-weight: 600;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); color: var(--text-primary);
  transition: background .12s, border-color .12s;
}
.gen-module-bulk-btn:hover { background: rgba(99,102,241,0.16); border-color: rgba(99,102,241,0.4); }
.gen-module-bulk-btn:disabled { opacity: 0.5; cursor: progress; }
.gen-module-batch {
  margin: 0 0 12px; padding: 10px 14px; border-radius: 8px; font-size: 0.82rem;
  background: rgba(99,102,241,0.10); border: 1px solid rgba(99,102,241,0.3); color: var(--text-primary);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.gen-module-batch.is-error { background: rgba(248,113,113,0.10); border-color: rgba(248,113,113,0.34); }
.gen-module-batch.is-warn { background: rgba(251,191,36,0.10); border-color: rgba(251,191,36,0.34); }
.gen-module-batch .gen-batch-close { margin-left: auto; cursor: pointer; opacity: 0.6; background: none; border: none; color: inherit; font-size: 1rem; }
.gen-module-batch .gen-batch-close:hover { opacity: 1; }
/* Create-modal required-field highlight (replaces silent native validation) */
.gen-field-invalid {
  border-color: #f43f5e !important;
  box-shadow: 0 0 0 2px rgba(244,63,94,0.18) !important;
}
/* Operational grid multi-select + bulk bar */
.gen-bulk-bar {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 10px; padding: 8px 12px; border-radius: 8px;
  background: rgba(99,102,241,0.12); border: 1px solid rgba(99,102,241,0.34);
}
.gen-bulk-bar.hidden { display: none; }
.gen-bulk-bar .gen-bulk-count { font-size: 0.8rem; font-weight: 600; color: #c7d2fe; margin-right: auto; }
tr.gen-row-checked > td { background: rgba(99,102,241,0.10); }
.gen-row-sel, #gen-sel-all { cursor: pointer; width: 15px; height: 15px; }

/* ==========================================
   3. METRIC CARDS & GRIDS
   ========================================== */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.metric-card {
  padding: 24px;
}
.metric-card.border-indigo { border-color: rgba(99, 102, 241, 0.15); }
.metric-card.border-indigo:hover { border-color: var(--accent-indigo); }
.metric-card.border-green { border-color: rgba(16, 185, 129, 0.15); }
.metric-card.border-green:hover { border-color: var(--accent-emerald); }
.metric-card.border-pink { border-color: rgba(236, 72, 153, 0.15); }
.metric-card.border-pink:hover { border-color: var(--accent-pink); }

.metric-card .tag {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.metric-val {
  font-size: 2rem;
  font-weight: 800;
  margin: 8px 0;
  background: linear-gradient(135deg, #ffffff 0%, #d1d5db 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.metric-card .desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* Row elements */
.view-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.col-span-3 { grid-column: span 3; }

.activity-panel {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  padding-bottom: 12px;
}
.panel-header h3 {
  font-size: 1.1rem;
  font-weight: 700;
}
.badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.badge.accent {
  background: var(--accent-indigo-glow);
  border-color: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
}

/* Dynamic ledger logs list */
.audit-ledger-list {
  max-height: 380px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ledger-item {
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  transition: var(--transition-smooth);
}
.ledger-item:hover {
  background: rgba(255, 255, 255, 0.01);
  border-color: rgba(255, 255, 255, 0.06);
}
.ledger-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ledger-action {
  font-weight: 700;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--accent-indigo);
  text-transform: uppercase;
}
.ledger-desc {
  color: var(--text-primary);
}
.ledger-meta {
  text-align: right;
  font-size: 0.72rem;
  color: var(--text-secondary);
}
.ledger-time {
  color: var(--text-muted);
}
.ledger-user {
  font-weight: 700;
  color: #fff;
}

/* ==========================================
   4. AG-GRID LAYOUTS & ACTION BARS
   ========================================== */
.grid-table-container {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.grid-actions-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.grid-action-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  font-family: var(--font-sans);
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: var(--transition-smooth);
  margin-right: 8px;
}
.grid-action-btn:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.12);
}
.grid-action-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.grid-search {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.04);
  color: #fff;
  border-radius: 8px;
  padding: 8px 16px;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  outline: none;
  width: 260px;
  transition: var(--transition-smooth);
}
.grid-search:focus {
  border-color: var(--accent-indigo);
}

.table-wrapper {
  max-height: 480px;
  overflow-y: auto;
}

.grid-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.85rem;
}
.grid-table th {
  padding: 12px 16px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--text-secondary);
  border-bottom: 2px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.01);
}
.grid-table td {
  padding: 14px 16px;
  color: var(--text-primary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.grid-table tbody tr {
  cursor: pointer;
  transition: var(--transition-smooth);
}
.grid-table tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.01);
}
.grid-table tbody tr:hover td {
  background: rgba(99, 102, 241, 0.05);
}
.grid-table tbody tr.selected td {
  background: rgba(99, 102, 241, 0.12);
  border-bottom-color: rgba(99, 102, 241, 0.3);
}

.grid-table .td-time { color: var(--text-muted); font-family: var(--font-mono); font-size: 0.75rem; }
.grid-table .td-code { font-family: var(--font-mono); font-size: 0.78rem; background: rgba(255, 255, 255, 0.05); padding: 2px 6px; border-radius: 4px; }

/* ==========================================
   5. SLIDING AG-GRID DETAILS DRAWER CARD
   ========================================== */
.details-drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: flex;
  justify-content: flex-end;
}

.drawer-card {
  width: 600px;
  height: 100vh;
  border-radius: 0;
  border-right: none;
  border-top: none;
  border-bottom: none;
  padding: 32px 24px;
  background: linear-gradient(135deg, rgba(16, 15, 26, 0.95) 0%, rgba(8, 8, 12, 0.98) 100%);
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.6);
}

.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 16px;
}
.drawer-header h3 {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #fff;
  text-transform: uppercase;
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Detail Card Styling */
.details-avatar-row {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  padding: 16px;
  border-radius: 12px;
}
.details-avatar {
  font-size: 2.2rem;
  background: rgba(99, 102, 241, 0.1);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(99, 102, 241, 0.2);
}
.details-avatar-info h3 {
  font-size: 1.15rem;
  font-weight: 700;
}

.details-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.details-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.02);
  padding: 12px;
  border-radius: 8px;
}
.details-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.details-value {
  font-size: 0.92rem;
  color: #fff;
}
.details-value code {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Animations for slide */
.animate-slide-left {
  animation: slideLeft 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideLeft {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

/* ==========================================
   6. ROLE & LANGUAGE CARDS
   ========================================== */
.roles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.role-card {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-color: rgba(255, 255, 255, 0.04);
}
.role-card-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  padding-bottom: 10px;
}
.role-card-header h3 {
  font-size: 1.1rem;
  font-weight: 700;
}
.role-card-body h4 {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.role-perms-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.role-perm-item {
  font-size: 0.78rem;
  font-family: var(--font-mono);
  color: var(--text-secondary);
}

/* ==========================================
   7. MULTI-MODEL ORCHESTRATOR TERMINAL
   ========================================== */
.console-box {
  overflow: hidden;
  border-color: rgba(99, 102, 241, 0.15);
}
.console-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--panel-border);
}
.console-dot { width: 8px; height: 8px; border-radius: 50%; }
.console-dot.red { background-color: #ef4444; }
.console-dot.yellow { background-color: #eab308; }
.console-dot.green { background-color: #22c55e; }
.console-title { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; color: var(--text-muted); margin-left: 8px; }
.console-body { display: flex; padding: 16px; gap: 12px; }
.input-wrapper { display: flex; align-items: center; gap: 10px; flex: 1; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.03); border-radius: 8px; padding: 10px 16px; }
.prompt-arrow { font-family: var(--font-mono); font-weight: 700; color: var(--accent-indigo); }
#orchestrator-input { background: transparent; border: none; outline: none; color: #fff; font-family: var(--font-sans); font-size: 0.95rem; flex: 1; }
#orchestrator-input::placeholder { color: var(--text-muted); }

.thinking-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
  gap: 14px;
}
.spinner { width: 30px; height: 30px; position: relative; }
.double-bounce1, .double-bounce2 { width: 100%; height: 100%; border-radius: 50%; background-color: var(--accent-indigo); opacity: 0.6; position: absolute; top: 0; left: 0; animation: sk-bounce 2.0s infinite ease-in-out; }
.double-bounce2 { animation-delay: -1.0s; background-color: var(--accent-pink); }
@keyframes sk-bounce { 0%, 100% { transform: scale(0.0) } 50% { transform: scale(1.0) } }

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.synthesis-card {
  padding: 24px;
  border-color: rgba(99, 102, 241, 0.25);
  background: linear-gradient(135deg, rgba(15, 10, 30, 0.5) 0%, rgba(10, 10, 16, 0.5) 100%);
}
.panel-tag { font-family: var(--font-mono); font-size: 0.65rem; font-weight: 700; color: #a5b4fc; text-transform: uppercase; margin-bottom: 8px; }
.panel-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding-bottom: 10px; margin-bottom: 14px; }
.panel-header h3 { font-size: 1.25rem; font-weight: 700; }
.action-btn { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); font-family: var(--font-sans); color: var(--text-primary); font-weight: 600; padding: 6px 12px; border-radius: 6px; cursor: pointer; transition: var(--transition-smooth); }
.action-btn:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); }

.agent-card { padding: 16px; display: flex; flex-direction: column; gap: 12px; height: 380px; }
.agent-badge { align-self: flex-start; font-size: 0.65rem; font-weight: 700; padding: 2px 8px; border-radius: 20px; text-transform: uppercase; }
.badge-antigrav { background: rgba(6, 182, 212, 0.12); border: 1px solid rgba(6, 182, 212, 0.2); color: #22d3ee; }
.badge-openai { background: rgba(16, 185, 129, 0.12); border: 1px solid rgba(16, 185, 129, 0.2); color: #34d399; }
.badge-claude { background: rgba(249, 115, 22, 0.12); border: 1px solid rgba(249, 115, 22, 0.2); color: #fb923c; }
.agent-meta { display: flex; justify-content: space-between; align-items: center; }
.agent-meta h4 { font-size: 0.95rem; font-weight: 700; }
.agent-time { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); }
.agent-response-box { flex: 1; overflow-y: auto; padding: 10px; background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.02); border-radius: 8px; font-size: 0.8rem; line-height: 1.4; }

.feedback-panel { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255, 255, 255, 0.03); padding-top: 8px; }
.feedback-label { font-size: 0.72rem; color: var(--text-secondary); }
.rating-stars { display: flex; gap: 2px; }
.star { font-size: 1.1rem; color: var(--text-muted); cursor: pointer; transition: var(--transition-smooth); }
.star:hover, .star.active { color: #fbbf24; }

.submit-rating-panel { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; border-color: rgba(236, 72, 153, 0.2); background: linear-gradient(90deg, rgba(20, 10, 20, 0.3) 0%, rgba(10, 10, 16, 0.35) 100%); }
.submit-rating-panel p { font-size: 0.82rem; color: var(--text-secondary); }

.section-divider { border-bottom: 1px solid rgba(255, 255, 255, 0.04); padding-bottom: 6px; margin-top: 12px; }
.section-divider h4 { font-size: 1.05rem; font-weight: 700; }
.section-divider p { font-size: 0.78rem; color: var(--text-secondary); }

.border-antigrav { border-color: rgba(6, 182, 212, 0.15); }
.border-antigrav:hover { border-color: var(--color-antigrav); box-shadow: 0 0 16px var(--color-antigrav-glow); }
.border-openai { border-color: rgba(16, 185, 129, 0.15); }
.border-openai:hover { border-color: var(--color-openai); box-shadow: 0 0 16px var(--color-openai-glow); }
.border-claude { border-color: rgba(249, 115, 22, 0.15); }
.border-claude:hover { border-color: var(--color-claude); box-shadow: 0 0 16px var(--color-claude-glow); }

.markdown-body { color: #e5e7eb; font-size: 0.88rem; }
.markdown-body h3 { font-size: 1.15rem; font-weight: 700; margin-top: 12px; margin-bottom: 6px; color: #fff; }
.markdown-body h4 { font-size: 0.95rem; font-weight: 600; margin-top: 10px; margin-bottom: 4px; color: #fff; }
.markdown-body p { margin-bottom: 8px; }
.markdown-body ul { margin-left: 16px; margin-bottom: 8px; }
.markdown-body li { margin-bottom: 2px; }
.markdown-body pre { background: rgba(0, 0, 0, 0.3) !important; border: 1px solid rgba(255, 255, 255, 0.04); border-radius: 6px; padding: 10px; margin-bottom: 8px; overflow-x: auto; }
.markdown-body code { font-family: var(--font-mono); font-size: 0.8rem; background: rgba(255, 255, 255, 0.05); padding: 1px 3px; border-radius: 3px; }
.markdown-body pre code { background: transparent; padding: 0; }

/* ==========================================
   8. AI ANALYTICS WINDOWS & WEIGHT BARS
   ========================================== */
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.stats-panel { padding: 20px; }
.metric-stats { display: flex; flex-direction: column; gap: 2px; font-size: 0.78rem; color: var(--text-secondary); }
.metric-stats strong { color: #fff; }

.weights-panel { padding: 20px; }
.weights-panel p { font-size: 0.75rem; color: var(--text-secondary); margin-bottom: 16px; }

.weight-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.02); padding-bottom: 8px; }
.weight-row:last-child { border-bottom: none; padding-bottom: 0; }
.weight-label { display: flex; justify-content: space-between; font-weight: 700; font-size: 0.82rem; text-transform: capitalize; }
.weight-bars { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: rgba(255, 255, 255, 0.02); }
.weight-segment { height: 100%; transition: var(--transition-smooth); }
.seg-antigrav { background-color: var(--color-antigrav); }
.seg-openai { background-color: var(--color-openai); }
.seg-claude { background-color: var(--color-claude); }
.weight-legends { display: flex; gap: 10px; font-size: 0.68rem; color: var(--text-muted); margin-top: 4px; }
.legend-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; margin-right: 3px; }

.history-panel { padding: 20px; }
.history-panel p { font-size: 0.75rem; color: var(--text-secondary); margin-bottom: 16px; }
.history-list { max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.history-item { padding: 12px; background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.02); border-radius: 8px; display: flex; flex-direction: column; gap: 6px; }
.history-meta { display: flex; justify-content: space-between; font-size: 0.7rem; }
.hist-cat { font-weight: 700; text-transform: uppercase; color: var(--accent-indigo); }
.hist-time { color: var(--text-muted); }
.history-prompt { font-size: 0.85rem; font-weight: 600; color: #fff; }
.history-details { display: flex; justify-content: space-between; align-items: center; font-size: 0.74rem; color: var(--text-secondary); }
.hist-winner { padding: 1px 6px; border-radius: 3px; font-weight: 700; text-transform: uppercase; font-size: 0.62rem; }
.win-antigrav { background: rgba(6, 182, 212, 0.12); color: #22d3ee; }
.win-openai { background: rgba(16, 185, 129, 0.12); color: #34d399; }
.win-claude { background: rgba(249, 115, 22, 0.12); color: #fb923c; }

/* Custom dashboard widgets widgets styles */
.widget-delete-btn {
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 1rem;
  transition: var(--transition-smooth);
}
.widget-delete-btn:hover {
  color: #ef4444;
}

.widget-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.widget-progress-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.widget-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--text-secondary);
}
.widget-progress-bar-bg {
  height: 6px;
  background-color: rgba(255, 255, 255, 0.03);
  border-radius: 3px;
  overflow: hidden;
}
.widget-progress-bar-fill {
  height: 100%;
  background-color: var(--accent-indigo);
  border-radius: 3px;
  transition: var(--transition-smooth);
}

/* ==========================================
   9. MODAL DIALOGS
   ========================================== */
.modal-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(3, 2, 6, 0.65);
  backdrop-filter: blur(8px);
}

.modal-box {
  /* Responsive default: comfortable on laptop monitors, never wider than 92vw
     on small screens. Specific modals can opt into wider/narrower variants
     via the .modal-box--wide / .modal-box--narrow classes below. */
  width: min(640px, 92vw);
  padding: 28px;
  border-color: rgba(255, 255, 255, 0.08);
  background: linear-gradient(135deg, rgba(16, 15, 26, 0.95) 0%, rgba(10, 10, 16, 0.98) 100%);
  position: relative;
  max-height: 92vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.modal-box--narrow { width: min(440px, 92vw); }
.modal-box--wide   { width: min(900px, 95vw); }
.modal-box--xwide  { width: min(1180px, 96vw); }
.modal-box--tall   { max-height: 96vh; }
/* The body slot scrolls; header + actions stay anchored. */
.modal-box .modal-body { flex: 1 1 auto; overflow-y: auto; }
.modal-box .modal-actions {
  flex-shrink: 0;
  display: flex; gap: 10px; justify-content: flex-end;
  padding-top: 14px; margin-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  padding-bottom: 12px;
  margin-bottom: 20px;
}
.modal-header h3 {
  font-size: 1.15rem;
  font-weight: 700;
}
.close-btn {
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 1.4rem;
}
.close-btn:hover {
  color: #fff;
}

.modal-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.border-top-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  padding-top: 14px;
}

.checkbox-row {
  display: flex;
  gap: 16px;
  margin-top: 4px;
}
.checkbox-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--text-primary);
  cursor: pointer;
}
.checkbox-label input {
  margin-top: 3px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}

.action-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-family: var(--font-sans);
  color: var(--text-primary);
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transition-smooth);
}
.action-btn:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* ==========================================
   10. SCROLLBARS & ANIMS & TOASTS
   ========================================== */
.scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.scrollbar::-webkit-scrollbar-track { background: transparent; }
.scrollbar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 10px; }
.scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.15); }

/* Animation Keyframes */
.animate-fade-in { animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-scale-up { animation: scaleUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes scaleUp {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Toasts */
.toast-notification {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
  background: rgba(14, 13, 22, 0.85);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(99, 102, 241, 0.35);
  border-radius: 12px;
  padding: 14px 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  animation: slide-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  max-width: 360px;
}
.toast-content { display: flex; align-items: flex-start; gap: 12px; }
.toast-icon { font-size: 1.4rem; }
.toast-text h5 { font-size: 0.95rem; font-weight: 700; color: #fff; margin-bottom: 2px; }
.toast-text p { font-size: 0.8rem; color: var(--text-secondary); }

@keyframes slide-in {
  from { transform: translateY(100px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.hidden { display: none !important; }

/* Responsive adjustments */
@media (max-width: 1100px) {
  .portal-wrapper { flex-direction: column; }
  .sidebar-panel { width: 100vw; height: auto; border-right: none; border-bottom: 1px solid var(--panel-border); }
  .metrics-grid, .tenants-list-container, .roles-grid, .analytics-grid { grid-template-columns: 1fr; }
  .col-span-2 { grid-column: span 1; }
}

/* Premium Drawer Form Controls */
.drawer-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.details-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.details-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.03);
  padding: 14px;
  border-radius: 10px;
  transition: all 0.25s ease;
}

.details-item:hover, .details-item:focus-within {
  border-color: rgba(99, 102, 241, 0.3);
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.05);
  background: rgba(10, 8, 20, 0.4);
}

.drawer-input-title {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  padding: 2px 0 !important;
  outline: none !important;
  width: 100% !important;
  border-radius: 0 !important;
  transition: border-color 0.25s !important;
}

.drawer-input-title:focus {
  border-color: var(--accent-indigo) !important;
}

.drawer-field-input, .drawer-field-select, .drawer-field-textarea {
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  font-size: 0.88rem !important;
  font-family: var(--font-sans) !important;
  outline: none !important;
  width: 100% !important;
  transition: all 0.25s ease !important;
}

.drawer-field-input:focus, .drawer-field-select:focus, .drawer-field-textarea:focus {
  border-color: var(--accent-indigo) !important;
  box-shadow: 0 0 8px var(--accent-indigo-glow) !important;
  background: rgba(10, 10, 20, 0.5) !important;
}

.drawer-field-textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.4;
}

.drawer-field-readonly {
  background: rgba(255, 255, 255, 0.01) !important;
  border-color: rgba(255, 255, 255, 0.02) !important;
  color: var(--text-secondary) !important;
  cursor: not-allowed !important;
}

.drawer-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

/* ==========================================
   🔒 PREMIUM DRAWER DETAILS SUB-LIST & WORKFLOW SIMULATOR
   ========================================== */
.drawer-sub-list {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 12px;
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Simulated Step Items */
.sim-generic-step-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  font-size: 0.72rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sim-generic-step-item span.step-check {
  font-size: 0.8rem;
  font-weight: 700;
  transition: color 0.3s ease;
}

/* Glowing Neon buttons inside sandbox */
#sandbox-neon-btn:hover {
  filter: brightness(1.2);
  box-shadow: 0 0 20px rgba(124, 58, 237, 0.6) !important;
}

.sandbox-theme-toggle {
  transition: transform 0.2s ease, filter 0.2s ease;
}

.sandbox-theme-toggle:hover {
  transform: scale(1.2);
  filter: brightness(1.1);
}

/* Custom Scrollbar for Drawer Lists */
.drawer-sub-list::-webkit-scrollbar {
  width: 5px;
}
.drawer-sub-list::-webkit-scrollbar-track {
  background: transparent;
}
.drawer-sub-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}
.drawer-sub-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ==========================================
   11. DYNAMIC GRANULAR PERMISSIONS MATRIX HIERARCHY
   ========================================== */
.permissions-tree-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 380px;
  overflow-y: auto;
  padding: 4px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.module-permission-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.module-permission-card:hover {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.module-permission-header {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  padding-bottom: 10px;
}

.module-permission-icon {
  font-size: 1.35rem;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.module-permission-title {
  font-weight: 700;
  color: #ffffff;
  font-size: 0.92rem;
  letter-spacing: 0.2px;
}

.module-permission-desc {
  font-size: 0.76rem;
  color: var(--text-secondary);
  line-height: 1.3;
  margin-top: 2px;
}

.module-permission-levels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.permission-level-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(255, 255, 255, 0.04);
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.permission-level-label:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}

.permission-level-label input[type="checkbox"] {
  margin-top: 3px;
  accent-color: var(--accent-indigo);
  cursor: pointer;
}

.permission-level-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.permission-level-title {
  font-weight: 700;
  color: #ffffff;
  font-size: 0.78rem;
}

.permission-level-desc {
  font-size: 0.68rem;
  color: var(--text-muted);
  line-height: 1.25;
}

.permission-level-readonly {
  cursor: not-allowed;
  opacity: 0.65;
}
.permission-level-readonly:hover {
  background: rgba(255, 255, 255, 0.01);
  border-color: rgba(255, 255, 255, 0.04);
  transform: none;
}

/* ==========================================
   TRANSLATION ENGINE — SPLIT VIEW LAYOUT
   ========================================== */

.translations-split-view {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 16px;
  height: calc(100vh - 230px);
  min-height: 480px;
}

.translations-lang-list {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 14px;
}

.translations-lang-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.translations-lang-items {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.lang-select-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 6px;
  background: rgba(255,255,255,0.02);
}

.lang-select-card:hover {
  background: rgba(99,102,241,0.12);
  border-color: rgba(99,102,241,0.3);
}

.lang-select-card.active {
  background: rgba(99,102,241,0.2);
  border-color: rgba(99,102,241,0.5);
}

.lang-select-card .lang-card-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lang-select-card .lang-card-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
}

.lang-select-card .lang-card-code {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-family: monospace;
}

.lang-select-card .lang-card-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.lang-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.lang-badge.active {
  background: rgba(34,197,94,0.2);
  color: #4ade80;
  border: 1px solid rgba(34,197,94,0.35);
}

.lang-badge.inactive {
  background: rgba(148,163,184,0.15);
  color: #94a3b8;
  border: 1px solid rgba(148,163,184,0.2);
}

.lang-badge.default {
  background: rgba(250,204,21,0.2);
  color: #fbbf24;
  border: 1px solid rgba(250,204,21,0.35);
}

.lang-override-count {
  font-size: 0.65rem;
  color: #a5b4fc;
  background: rgba(99,102,241,0.15);
  padding: 2px 6px;
  border-radius: 10px;
}

.lang-select-card .lang-card-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.lang-card-action-btn {
  font-size: 0.65rem;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.lang-card-action-btn:hover {
  background: rgba(99,102,241,0.2);
  color: #a5b4fc;
  border-color: rgba(99,102,241,0.4);
}

.lang-card-action-btn.danger:hover {
  background: rgba(239,68,68,0.2);
  color: #f87171;
  border-color: rgba(239,68,68,0.4);
}

/* RIGHT PANEL — Label Editor */
.translations-label-editor {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 14px;
}

.translations-editor-header {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.translations-editor-toolbar {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  gap: 10px;
}

.translations-label-table-wrapper {
  flex: 1;
  overflow-y: auto;
}

.translations-label-table {
  width: 100%;
  table-layout: fixed;
}

.translations-label-table td:first-child {
  width: 200px;
  font-family: monospace;
  font-size: 0.78rem;
  color: #a5b4fc;
}

.translations-label-table td:nth-child(2) {
  color: var(--text-muted);
  font-size: 0.84rem;
}

.label-override-input {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-primary);
  padding: 5px 9px;
  border-radius: 7px;
  font-size: 0.83rem;
  transition: border-color 0.2s ease;
  outline: none;
}

.label-override-input:focus {
  border-color: rgba(99,102,241,0.5);
  background: rgba(99,102,241,0.08);
}

.label-override-input.has-override {
  border-color: rgba(99,102,241,0.4);
  background: rgba(99,102,241,0.07);
  color: #c4b5fd;
}

.label-reset-btn {
  font-size: 0.7rem;
  padding: 4px 9px;
  border-radius: 6px;
  border: 1px solid rgba(239,68,68,0.3);
  background: rgba(239,68,68,0.08);
  color: #f87171;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.label-reset-btn:hover {
  background: rgba(239,68,68,0.2);
}

.label-save-btn {
  font-size: 0.7rem;
  padding: 4px 9px;
  border-radius: 6px;
  border: 1px solid rgba(34,197,94,0.3);
  background: rgba(34,197,94,0.08);
  color: #4ade80;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.label-save-btn:hover {
  background: rgba(34,197,94,0.2);
}

.label-action-cell {
  display: flex;
  gap: 5px;
  align-items: center;
}

/* Available language activation cards in modal */
.available-lang-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  transition: all 0.2s;
}

.available-lang-card.already-active {
  opacity: 0.5;
  cursor: not-allowed;
}

.available-lang-card:not(.already-active):hover {
  background: rgba(99,102,241,0.12);
  border-color: rgba(99,102,241,0.3);
}

.available-lang-info .name {
  font-weight: 600;
  font-size: 0.88rem;
}

.available-lang-info .meta {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ==========================================
   SMTP CONFIGURATION PANEL
   ========================================== */

.smtp-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

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

.smtp-config-panel,
.smtp-test-panel {
  border-radius: 14px;
  padding: 24px;
}

.smtp-panel-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.smtp-panel-icon {
  font-size: 1.6rem;
  line-height: 1;
  margin-top: 2px;
}

.smtp-panel-header h3 {
  margin: 0 0 4px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
}

.smtp-panel-header p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.smtp-env-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(251,191,36,0.1);
  border: 1px solid rgba(251,191,36,0.25);
  border-radius: 8px;
  color: #fbbf24;
  font-size: 0.82rem;
  margin-bottom: 16px;
}

.smtp-form .form-group {
  position: relative;
}

.smtp-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.env-lock-badge {
  position: absolute;
  top: 32px;
  right: 10px;
  font-size: 0.65rem;
  font-weight: 700;
  color: #fbbf24;
  background: rgba(251,191,36,0.12);
  border: 1px solid rgba(251,191,36,0.3);
  padding: 2px 7px;
  border-radius: 20px;
  pointer-events: none;
}

/* SMTP Toggle Switch */
.smtp-secure-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  position: relative;
}

.smtp-toggle-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 0.84rem;
  color: var(--text-secondary);
  user-select: none;
}

.smtp-toggle-input {
  display: none;
}

.smtp-toggle-slider {
  position: relative;
  width: 38px;
  height: 20px;
  background: rgba(255,255,255,0.12);
  border-radius: 20px;
  transition: background 0.3s ease;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.15);
}

.smtp-toggle-slider::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255,255,255,0.6);
  top: 2px;
  left: 2px;
  transition: all 0.3s ease;
}

.smtp-toggle-input:checked + .smtp-toggle-slider {
  background: rgba(99,102,241,0.7);
  border-color: rgba(99,102,241,0.6);
}

.smtp-toggle-input:checked + .smtp-toggle-slider::after {
  transform: translateX(18px);
  background: #fff;
}

.smtp-actions {
  margin-top: 4px;
  display: flex;
  justify-content: flex-end;
}

/* SMTP Test Panel */
.smtp-test-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 16px;
}

.smtp-test-result {
  padding: 12px 16px;
  border-radius: 9px;
  font-size: 0.85rem;
  margin-bottom: 20px;
}

.smtp-test-result.success {
  background: rgba(34,197,94,0.12);
  border: 1px solid rgba(34,197,94,0.3);
  color: #4ade80;
}

.smtp-test-result.error {
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.3);
  color: #f87171;
}

.smtp-cloud-note {
  padding: 18px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
}

.smtp-cloud-note h4 {
  margin: 0 0 8px;
  font-size: 0.88rem;
  color: var(--text-primary);
}

.smtp-cloud-note p {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0 0 12px;
}

.smtp-env-vars {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  line-height: 2;
}

.smtp-env-vars code {
  background: rgba(99,102,241,0.12);
  border: 1px solid rgba(99,102,241,0.25);
  color: #a5b4fc;
  padding: 2px 9px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-family: monospace;
}

/* Language selector in the modal activation list */
@media (max-width: 768px) {
  .translations-split-view {
    grid-template-columns: 1fr;
    grid-template-rows: 240px 1fr;
    height: auto;
  }
}

/* 🕶️ PREMIUM OVERLAY AG-GRID DRAWER MATRIX WIDE & TABS UPGRADES */
.drawer-card {
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.drawer-card.wide {
  width: 1000px !important;
  max-width: 95vw !important;
}

.drawer-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 10px;
  margin-bottom: 22px;
  margin-top: 6px;
}
.drawer-tab-btn {
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  padding: 8px 18px;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 8px;
}
.drawer-tab-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.1);
}
.drawer-tab-btn.active {
  background: rgba(99, 102, 241, 0.12);
  color: #a5b4fc;
  border-color: rgba(99, 102, 241, 0.35);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1);
}

.drawer-tab-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: fadeIn 0.25s ease-out;
}
.drawer-tab-content.hidden {
  display: none !important;
}

/* Dynamic Modules Grid */
.drawer-modules-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  max-height: 480px;
  overflow-y: auto;
  padding-right: 6px;
}
.drawer-module-item {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.drawer-module-item:hover {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(99, 102, 241, 0.25);
  transform: translateY(-1px);
}
.drawer-module-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 78%;
}
.drawer-module-name {
  font-weight: 700;
  font-size: 0.86rem;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}
.drawer-module-desc {
  font-size: 0.72rem;
  color: var(--text-secondary);
  line-height: 1.35;
}

/* Micro Toggle switch */
.drawer-toggle-switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 20px;
}
.drawer-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.drawer-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255,255,255,0.08);
  transition: .3s;
  border-radius: 34px;
  border: 1px solid rgba(255,255,255,0.08);
}
.drawer-toggle-slider:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 3px;
  bottom: 3px;
  background-color: rgba(255,255,255,0.6);
  transition: .3s;
  border-radius: 50%;
}
.drawer-toggle-switch input:checked + .drawer-toggle-slider {
  background-color: rgba(99, 102, 241, 0.4);
  border-color: rgba(99, 102, 241, 0.6);
}
.drawer-toggle-switch input:checked + .drawer-toggle-slider:before {
  transform: translateX(18px);
  background-color: #a5b4fc;
}

/* Premium Sub Grid styling inside the wide panel */
.drawer-sub-grid-container {
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.15);
  margin-top: 4px;
  max-height: 400px;
  overflow-y: auto;
}
.drawer-sub-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  text-align: left;
}
.drawer-sub-grid th {
  background: rgba(255, 255, 255, 0.03);
  color: #fff;
  font-weight: 700;
  padding: 12px 16px;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.drawer-sub-grid td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  vertical-align: middle;
}
.drawer-sub-grid tr:last-child td {
  border-bottom: none;
}
.drawer-sub-grid tr:hover td {
  background: rgba(255, 255, 255, 0.015);
  color: #fff;
}

.drawer-grid-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.drawer-grid-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Micro Action Buttons */
.drawer-micro-btn {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.7rem;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.drawer-micro-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.drawer-micro-btn.danger:hover {
  background: rgba(244, 63, 94, 0.15);
  border-color: rgba(244, 63, 94, 0.3);
  color: #f43f5e;
}

/* Tenant Status Badges */
.tenant-status-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.tenant-status-badge.status-active {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.2);
  color: #34d399;
}
.tenant-status-badge.status-inactive {
  background: rgba(244, 63, 94, 0.12);
  border: 1px solid rgba(244, 63, 94, 0.2);
  color: #f43f5e;
}
.tenant-status-badge.status-expired {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

/* Column-level filters */
.drawer-filter-row th {
  padding: 6px 12px !important;
  background: rgba(255, 255, 255, 0.01) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.drawer-filter-input {
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  color: #fff;
  padding: 4px 8px;
  font-size: 0.72rem;
  transition: all 0.2s;
}
.drawer-filter-input:focus {
  border-color: rgba(99, 102, 241, 0.5);
  background: rgba(0, 0, 0, 0.4);
  outline: none;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}


/* ==========================================
   WORKFLOW DESIGNER CANVAS (Step 2)
   ========================================== */
#workflow-canvas-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: #0b1020;
  display: flex;
  flex-direction: column;
}
#workflow-canvas-overlay.hidden { display: none; }

.wfc-toolbar {
  min-height: 56px;
  flex-shrink: 0;
  display: flex; flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 8px 18px;
  background: rgba(17, 24, 39, 0.95);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  gap: 8px;
}
@media (max-width: 900px) {
  /* On narrow viewports, hide the long shortcut hint so the toolbar
     buttons stay reachable without horizontal overflow. */
  .wfc-toolbar .wfc-hint { display: none; }
}
.wfc-title { display: flex; align-items: center; gap: 12px; font-size: 1rem; font-weight: 700; color: #e5e7eb; }
.wfc-step-badge {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 1px;
  background: linear-gradient(135deg,#6366f1,#a5b4fc); color: #0b1020;
  padding: 3px 8px; border-radius: 5px;
}
.wfc-toolbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wfc-hint { font-size: 0.72rem; color: var(--text-muted); margin-right: 6px; }

.wfc-body { flex: 1; display: flex; overflow: hidden; }

/* Palette */
.wfc-palette {
  width: 210px; flex-shrink: 0;
  background: rgba(17,24,39,0.6);
  border-right: 1px solid rgba(255,255,255,0.07);
  padding: 16px 14px; overflow-y: auto;
}
.wfc-palette-title { font-size: 0.66rem; font-weight: 700; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 12px; }
.wfc-palette-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; margin-bottom: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 9px; cursor: grab; user-select: none;
  transition: background .15s, border-color .15s;
}
.wfc-palette-item:hover { background: rgba(99,102,241,0.12); border-color: rgba(99,102,241,0.5); }
.wfc-palette-item:active { cursor: grabbing; }
.wfc-palette-item strong { display: block; font-size: 0.82rem; color: #e5e7eb; }
.wfc-palette-item small { display: block; font-size: 0.68rem; color: var(--text-muted); }
.wfc-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.wfc-dot.start { background: #22c55e; }
.wfc-dot.stage { background: #6366f1; }
.wfc-dot.end { background: #ef4444; }
.wfc-palette-legend { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.07); }
.wfc-palette-legend p { font-size: 0.68rem; color: var(--text-muted); margin: 5px 0; }

/* Surface */
.wfc-surface-wrap { flex: 1; overflow: auto; position: relative; background:
  radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 22px 22px; background-color: #0d1326; }
.wfc-surface { position: relative; width: 4000px; height: 2600px; }
#wfc-edges { position: absolute; top: 0; left: 0; pointer-events: none; }
#wfc-nodes { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Swimlanes — horizontal bands rendered behind edges + nodes. The layer is
   empty (and draws nothing) when the workflow has no lanes, so a lane-less
   workflow is byte-identical to today. */
#wfc-lanes { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.wfc-lane {
  position: absolute; left: 0; box-sizing: border-box;
  border-top: 1px dashed rgba(129,140,248,0.28);
  border-bottom: 1px dashed rgba(129,140,248,0.28);
  background: rgba(129,140,248,0.04);
}
.wfc-lane:nth-child(even) { background: rgba(129,140,248,0.07); }
.wfc-lane-label {
  position: absolute; top: 0; left: 0; box-sizing: border-box;
  height: 100%; display: flex; flex-direction: column; justify-content: flex-start;
  padding: 8px 10px; gap: 2px;
  background: rgba(13,19,38,0.78);
  border-right: 1px solid rgba(129,140,248,0.22);
  font-size: 0.74rem; font-weight: 700; color: #c7d2fe; letter-spacing: 0.02em;
}
.wfc-lane-role { font-size: 0.66rem; font-weight: 500; color: #818cf8; text-transform: uppercase; }

/* Nodes */
.wfc-node {
  position: absolute; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 0.82rem; font-weight: 600; color: #fff;
  cursor: grab; user-select: none; padding: 8px 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  border: 2px solid transparent;
}
.wfc-node:active { cursor: grabbing; }
.wfc-node.selected { border-color: #fff; box-shadow: 0 0 0 3px rgba(99,102,241,0.55); }
.wfc-node.start { width: 130px; height: 54px; border-radius: 27px; background: linear-gradient(135deg,#16a34a,#22c55e); }
.wfc-node.end   { width: 130px; height: 54px; border-radius: 27px; background: linear-gradient(135deg,#dc2626,#ef4444); }
.wfc-node.stage { width: 180px; min-height: 66px; border-radius: 12px; background: linear-gradient(135deg,#4f46e5,#6366f1); }
.wfc-node-kicker { font-size: 0.58rem; letter-spacing: 1px; opacity: 0.8; display:block; }

/* Config-status badge tray rendered inside each canvas node. Hugs the
   bottom-right so node-label legibility stays clear. Each badge: emoji +
   tiny count chip. Designed to be visible across all three node colors. */
.wfc-node-badges {
  position: absolute; right: 6px; bottom: 4px;
  display: flex; gap: 3px; align-items: center;
  pointer-events: none;
}
.wfc-node-badge {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 11px; line-height: 1;
  padding: 2px 5px; border-radius: 10px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff; backdrop-filter: blur(2px);
}
.wfc-node-badge i {
  font-style: normal; font-weight: 700; font-size: 9px;
  padding-left: 2px; color: #c7d2fe;
}
.wfc-node.stage { padding-bottom: 18px; }   /* room for the badge row */
.wfc-node.start, .wfc-node.end { padding-bottom: 14px; }


/* Connection handles */
.wfc-handle {
  position: absolute; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 2px solid #6366f1; top: 50%; transform: translateY(-50%);
  cursor: crosshair; z-index: 5;
}
.wfc-handle.out { right: -8px; }
.wfc-handle.in  { left: -8px; background: #c7d2fe; }
.wfc-node.start .wfc-handle.in { display: none; }
.wfc-node.end .wfc-handle.out { display: none; }

/* Edges */
.wfc-edge { fill: none; stroke: #818cf8; stroke-width: 2.5; }
.wfc-edge-hit { fill: none; stroke: transparent; stroke-width: 14px; cursor: pointer; pointer-events: stroke; }
#wfc-temp-edge { fill: none; stroke: #a5b4fc; stroke-width: 2.5; stroke-dasharray: 6 4; }

/* Inspector — wider for breathing room; resizable; sectioned */
.wfc-inspector {
  width: 360px; flex-shrink: 0; min-width: 280px; max-width: 640px;
  background: rgba(17,24,39,0.6);
  border-left: 1px solid rgba(255,255,255,0.07);
  padding: 16px 16px 80px; overflow-y: auto;
  position: relative;
}
/* Drag handle on the inspector's left edge — drag to resize. */
.wfc-inspector-resizer {
  position: absolute; top: 0; left: -4px; width: 8px; height: 100%;
  cursor: ew-resize; z-index: 6; background: transparent;
  transition: background .15s;
}
.wfc-inspector-resizer:hover,
.wfc-inspector-resizer.active { background: rgba(99,102,241,0.25); }

/* Collapsible inspector subsections.
   Each section gets a single-row header (icon + title + count + chevron)
   that toggles the body. State is remembered in window._wfcCollapse so
   re-opening the same node keeps the user's folds. */
.wfc-section-head {
  display: flex; align-items: center; gap: 8px;
  margin: 16px -4px 6px; padding: 6px 4px;
  cursor: pointer; user-select: none;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 11px; letter-spacing: 0.06em; color: var(--text-muted);
  text-transform: uppercase;
}
.wfc-section-head:first-of-type { border-top: none; margin-top: 4px; }
.wfc-section-head:hover { color: #e5e7eb; }
.wfc-section-head .wfc-chev {
  margin-left: auto; transition: transform .18s ease;
  font-size: 10px; color: var(--text-muted);
}
.wfc-section.is-collapsed .wfc-chev { transform: rotate(-90deg); }
.wfc-section.is-collapsed .wfc-section-body { display: none; }
.wfc-section-body { padding-top: 4px; }
/* Visual badge for sections that have items (e.g. "3 actions"). */
.wfc-section-count {
  font-size: 10px; font-weight: 700; letter-spacing: 0;
  padding: 2px 7px; border-radius: 9px;
  background: rgba(99,102,241,0.18); color: #c7d2fe;
}
.wfc-section-count.zero { background: rgba(255,255,255,0.05); color: var(--text-muted); }

/* Sticky inspector footer — Delete Node stays visible even on long forms. */
.wfc-inspector-footer {
  position: sticky; bottom: -16px; left: 0; right: 0;
  margin: 18px -16px -16px;
  padding: 12px 16px;
  background: linear-gradient(180deg, rgba(17,24,39,0.0), rgba(17,24,39,0.92) 30%);
  border-top: 1px solid rgba(255,255,255,0.06);
  z-index: 4;
}
.wfc-inspector-footer .action-btn { width: 100%; }

.wfc-inspector-empty { font-size: 0.78rem; color: var(--text-muted); text-align: center; padding-top: 24px; }
.wfc-inspector-type { font-size: 0.66rem; font-weight: 700; letter-spacing: 1px; color: #a5b4fc; margin-bottom: 14px; }
.wfc-field-label { display: block; font-size: 0.72rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 5px; }
.wfc-input {
  width: 100%; box-sizing: border-box; padding: 8px 10px; font-size: 0.82rem;
  background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 7px; color: #e5e7eb; outline: none;
}
.wfc-input:focus { border-color: #6366f1; }
.action-btn.danger { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.5); color: #fca5a5; }
.action-btn.danger:hover { background: rgba(239,68,68,0.28); }

/* Canvas — empty state, validation, edge labels, invalid highlight */
.wfc-empty-hint {
  position: absolute; top: 90px; left: 50%; transform: translateX(-50%);
  text-align: center; color: var(--text-muted); pointer-events: none;
  max-width: 420px; padding: 24px;
}
.wfc-empty-hint.hidden { display: none; }
.wfc-empty-icon { font-size: 2.6rem; color: #6366f1; opacity: 0.7; margin-bottom: 8px; }
.wfc-empty-hint h3 { font-size: 1.05rem; color: #cbd5e1; margin: 0 0 8px; font-weight: 600; }
.wfc-empty-hint p { font-size: 0.82rem; margin: 0; line-height: 1.5; }
.wfc-empty-hint strong { color: #a5b4fc; }

.wfc-validation {
  flex-shrink: 0; background: rgba(127, 29, 29, 0.25);
  border-bottom: 1px solid rgba(239,68,68,0.4); padding: 10px 18px; max-height: 180px; overflow-y: auto;
}
.wfc-validation.ok { background: rgba(6, 78, 59, 0.3); border-bottom-color: rgba(34,197,94,0.4); }
.wfc-validation.hidden { display: none; }
.wfc-validation-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
#wfc-validation-title { font-size: 0.8rem; font-weight: 700; color: #fca5a5; }
.wfc-validation.ok #wfc-validation-title { color: #6ee7b7; }
.wfc-validation-close { background: none; border: none; color: var(--text-muted); font-size: 1.2rem; cursor: pointer; line-height: 1; }
#wfc-validation-list { margin: 0; padding-left: 0; list-style: none; }
#wfc-validation-list li { font-size: 0.76rem; color: #fecaca; margin: 3px 0; }
.wfc-validation.ok #wfc-validation-list li { color: #a7f3d0; }

/* Structured validation rows — icon + message + jump button. */
.wfc-val-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; margin: 2px 0;
  background: rgba(0, 0, 0, 0.15); border-radius: 5px;
  border-left: 2px solid rgba(239, 68, 68, 0.7);
  font-size: 12px;
}
.wfc-val-row.wfc-val-warning {
  border-left-color: rgba(251, 191, 36, 0.75);
}
.wfc-val-icon {
  font-weight: 700; color: #fca5a5;
  width: 16px; text-align: center; flex-shrink: 0;
}
.wfc-val-row.wfc-val-warning .wfc-val-icon { color: #fcd34d; }
.wfc-val-msg { flex: 1; color: #fecaca; }
.wfc-val-row.wfc-val-warning .wfc-val-msg { color: #fde68a; }
.wfc-val-jump {
  flex-shrink: 0; font-size: 11px;
  background: rgba(99,102,241,0.18); color: #c7d2fe;
  border: 1px solid rgba(99,102,241,0.4);
  border-radius: 4px; padding: 3px 8px; cursor: pointer;
  transition: background .15s;
}
.wfc-val-jump:hover { background: rgba(99,102,241,0.34); color: #fff; }

.wfc-node.invalid { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239,68,68,0.45) !important; }

/* Edge condition labels + selection */
.wfc-edge.selected { stroke: #fbbf24; stroke-width: 3.5; }
.wfc-edge-label-bg { fill: #1e1b4b; stroke: rgba(129,140,248,0.5); stroke-width: 1; rx: 4; }
.wfc-edge-label { fill: #c7d2fe; font-size: 11px; font-weight: 600; pointer-events: none; }
.wfc-edge-label.default { fill: #fbbf24; }

.wfc-edge-route {
  font-size: 0.74rem; color: var(--text-muted); background: rgba(0,0,0,0.25);
  padding: 6px 9px; border-radius: 6px; margin-bottom: 14px; line-height: 1.4;
}

/* Canvas — workflow-level settings panel */
.wfc-settings {
  flex-shrink: 0; background: rgba(30, 27, 75, 0.55);
  border-bottom: 1px solid rgba(129,140,248,0.35); padding: 14px 18px;
}
.wfc-settings.hidden { display: none; }
.wfc-settings-row { display: flex; gap: 14px; align-items: flex-end; }
.wfc-settings-field { flex: 1; }
.wfc-settings-hint { font-size: 0.72rem; color: var(--text-muted); margin: 10px 0 0; }

/* Phase 2 — Operations & Tabs config (workflow inspector) */
.wfc-ops-tabs-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.wfc-ops-tab-row {
  border: 1px solid rgba(255,255,255,0.08); border-radius: 8px;
  background: rgba(255,255,255,0.02); padding: 10px 12px;
}
.wfc-ops-tab-head { display: flex; align-items: center; gap: 8px; }
.wfc-ops-tab-grip { cursor: default; color: var(--text-muted); font-size: 0.8rem; user-select: none; }
.wfc-ops-tab-type {
  font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(99,102,241,0.16); color: #c7d2fe; font-weight: 700;
}
.wfc-ops-tab-label { flex: 1; min-width: 120px; }
.wfc-ops-tab-btns { display: flex; gap: 4px; }
.wfc-ops-tab-btns button {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-secondary); border-radius: 6px; cursor: pointer;
  width: 26px; height: 26px; font-size: 0.8rem; line-height: 1;
}
.wfc-ops-tab-btns button:hover:not(:disabled) { background: rgba(255,255,255,0.12); color: var(--text-primary); }
.wfc-ops-tab-btns button:disabled { opacity: 0.35; cursor: not-allowed; }
.wfc-ops-tab-vis { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.wfc-ops-vis-field { flex: 1; min-width: 160px; }
.wfc-ops-vis-field > label {
  display: block; font-size: 0.64rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 4px;
}
.wfc-ops-chalso { font-size: 0.66rem; color: var(--text-muted); margin-top: 2px; }
.wfc-ops-add-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wfc-ops-empty {
  font-size: 0.74rem; color: var(--text-muted); padding: 12px;
  border: 1px dashed rgba(255,255,255,0.12); border-radius: 8px; text-align: center;
}
.wfc-ops-multi {
  width: 100%; min-height: 58px; background: var(--input-bg, rgba(255,255,255,0.05));
  border: 1px solid var(--border-color, rgba(255,255,255,0.12)); border-radius: 6px;
  color: var(--text-primary); font-size: 0.74rem; padding: 4px;
}
.wfc-ops-cfg { margin-top: 8px; }
.wfc-ops-cfg > label {
  display: block; font-size: 0.64rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 4px;
}
.wfc-ops-cfg-note {
  margin-top: 8px; font-size: 0.7rem; color: var(--text-muted);
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
  border-radius: 6px; padding: 7px 10px;
}

/* Canvas — edge group hover (AC22 hover experience) + active button */
.wfc-edge-group { cursor: pointer; transition: opacity .15s; }
.wfc-edge-group:hover .wfc-edge { stroke: #fbbf24; stroke-width: 3.5; }
.wfc-edge-group:hover .wfc-edge-label-bg { stroke: rgba(251,191,36,0.7); fill: #2a1f05; }
.wfc-edge-group:hover .wfc-edge-label { fill: #fde68a; }
.wfc-edge.default:not(.selected) { stroke: #fbbf24; }
.wfc-edge-group.selected .wfc-edge { stroke: #fbbf24; stroke-width: 3.5; }

.action-btn.active { background: rgba(99,102,241,0.25); border-color: rgba(99,102,241,0.7); color: #c7d2fe; }

/* Role chip picker — used by the workflow permission editor.
   Each chip is a togglable button; '*' is the wildcard. A free-text input
   on the right lets the operator add unknown role ids. */
.wfc-role-pick {
  display: flex; flex-wrap: wrap; gap: 5px; align-items: center;
}
.wfc-rolechip {
  background: rgba(255,255,255,0.04); color: var(--text-secondary);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 999px;
  padding: 3px 10px; font-size: 11px; cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.wfc-rolechip:hover { background: rgba(99,102,241,0.12); color: #fff; border-color: rgba(99,102,241,0.3); }
.wfc-rolechip.is-on {
  background: rgba(99,102,241,0.28); color: #fff;
  border-color: rgba(99,102,241,0.7);
}
.wfc-rolechip.wildcard.is-on {
  background: rgba(250,204,21,0.22); color: #fde047;
  border-color: rgba(250,204,21,0.7);
}
.wfc-rolechip.extra { font-family: monospace; }
.wfc-rolechip-add {
  flex: 1 1 120px; min-width: 100px;
  background: rgba(0,0,0,0.25); color: #d4d4d8;
  border: 1px dashed rgba(255,255,255,0.12); border-radius: 999px;
  padding: 3px 10px; font-size: 11px;
}
.wfc-rolechip-add:focus { outline: none; border-color: rgba(99,102,241,0.6); background: rgba(0,0,0,0.4); }

/* Canvas right-click context menu */
.wfc-context-menu {
  position: fixed; display: none; z-index: 10001;
  min-width: 200px;
  background: rgba(15, 18, 27, 0.98); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.55);
  padding: 6px;
}
.wfc-context-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: transparent; border: none; cursor: pointer;
  padding: 8px 10px; border-radius: 4px;
  font-size: 12.5px; color: var(--text-secondary, #d4d4d8);
  text-align: left;
}
.wfc-context-item:hover { background: rgba(99,102,241,0.16); color: #fff; }
.wfc-context-item.danger { color: #fca5a5; }
.wfc-context-item.danger:hover { background: rgba(239,68,68,0.18); color: #fff; }
.wfc-context-icon { width: 18px; text-align: center; font-size: 13px; }
.wfc-context-divider { height: 1px; margin: 4px 6px; background: rgba(255,255,255,0.07); }

/* Toast stack — multiple toasts visible at once. Anchored top-right,
   each card slides in from the right and auto-dismisses after 4s. */
#toast-stack {
  position: fixed; top: 16px; right: 16px; z-index: 10000;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;     /* container ignores clicks; cards take them */
}
.toast-stack-item {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: 10px;
  min-width: 280px; max-width: 420px;
  padding: 12px 14px;
  background: rgba(15, 18, 27, 0.96);
  border: 1px solid rgba(255,255,255,0.1);
  border-left: 3px solid #6366f1;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.45);
  opacity: 0; transform: translateX(40px);
  transition: opacity .22s ease, transform .22s ease;
}
.toast-stack-item.is-visible { opacity: 1; transform: translateX(0); }
.toast-stack-item.toast-success { border-left-color: #22c55e; }
.toast-stack-item.toast-warning { border-left-color: #fbbf24; }
.toast-stack-item.toast-error   { border-left-color: #ef4444; }
.toast-stack-icon { font-size: 18px; line-height: 1; padding-top: 1px; }
.toast-stack-text { flex: 1; min-width: 0; }
.toast-stack-text h5 {
  margin: 0 0 3px; font-size: 13px; font-weight: 700; color: #fff;
}
.toast-stack-text p {
  margin: 0; font-size: 12px; color: var(--text-secondary, #d4d4d8);
  word-wrap: break-word; line-height: 1.4;
}
.toast-stack-close {
  flex-shrink: 0; background: transparent; border: none;
  color: var(--text-muted); font-size: 14px; cursor: pointer;
  padding: 0 4px; opacity: 0.6;
  transition: opacity .15s, color .15s;
}
.toast-stack-close:hover { opacity: 1; color: #fff; }

/* Form validation highlight — applied by hookWizardModalForm on missing required fields */
.modal-form input.input-invalid,
.modal-form select.input-invalid,
.modal-form textarea.input-invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25);
  background: rgba(239, 68, 68, 0.06);
}
.modal-form .field-error {
  color: #fca5a5;
  font-size: 0.7rem;
  margin-top: 4px;
  display: block;
}

/* #7 — collapsible canvas side panels + zoom. Collapsing gives the canvas the
   full width; the toolbar toggle re-expands. Width transitions for a smooth feel. */
.wfc-left, .wfc-inspector { transition: width .18s ease, min-width .18s ease, padding .18s ease; }
.wfc-left.wfc-collapsed,
.wfc-inspector.wfc-collapsed {
  width: 0 !important;
  min-width: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: hidden !important;
  border-left: none !important;
  border-right: none !important;
}
.wfc-toolbar-actions .action-btn.is-active { background: rgba(99,102,241,0.32); color: #fff; }
#wfc-surface { transition: transform .15s ease; }
/* #1 — generated-module List/Board view toggle */
.gen-view-btn.is-active { background: rgba(99,102,241,0.32); color: #fff; }
.gen-board-card:hover { border-color: rgba(99,102,241,0.6) !important; }

/* #4 — flash a stage node when the user clicks "Jump to node" on a validation
   issue, so they immediately see which stage to fix. */
@keyframes wfcNodeFlash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99,102,241,0); }
  20%      { box-shadow: 0 0 0 4px rgba(99,102,241,0.9), 0 0 22px 6px rgba(99,102,241,0.55); }
  60%      { box-shadow: 0 0 0 4px rgba(245,158,11,0.9), 0 0 22px 6px rgba(245,158,11,0.45); }
}
.wfc-node.wfc-node-flash { animation: wfcNodeFlash 1.5s ease-in-out; z-index: 50; }

/* ============================================================================
   PHONE RESPONSIVENESS (≤600px) — RAD mobile pass.
   Additive only: this block is last in the file and width-scoped to phones, so
   desktop/tablet layouts are untouched. Makes the main portal usable on a phone
   — full-screen modals/drawers, horizontally-scrollable tables, a workable
   canvas, no sideways page scroll, comfortable tap targets.
   ============================================================================ */
@media (max-width: 600px) {
  /* No accidental horizontal page scroll; respect the notch. */
  html, body { overflow-x: hidden; }
  .portal-wrapper { overflow-x: hidden; }

  /* Workspace breathes less on a small screen. */
  .workspace-panel { padding: 0; }
  .workspace-header { flex-wrap: wrap; gap: 8px; padding: 12px 14px; padding-top: calc(12px + env(safe-area-inset-top)); }
  .workspace-header h1, .workspace-header h2 { font-size: 1.05rem; }
  .workspace-body { padding: 12px 14px calc(80px + env(safe-area-inset-bottom)); }

  /* Wide data tables scroll sideways instead of breaking the layout. */
  .table-container, .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-container table, .table-wrapper table { min-width: 560px; }

  /* Modals go near-full-screen and their actions stack to full-width buttons. */
  .modal-box, .modal-box--narrow, .modal-box--wide, .modal-box--xwide {
    width: 96vw !important; max-width: 96vw !important; max-height: 92vh; border-radius: 16px;
  }
  .modal-form { gap: 14px; }
  .modal-actions { flex-direction: column-reverse; gap: 8px; }
  .modal-actions .btn { width: 100%; }

  /* Detail drawers take the whole screen (they're 1000px on desktop). */
  .drawer-card, .drawer-card.wide { width: 100vw !important; max-width: 100vw !important; }
  .drawer-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Grids collapse to a single column (covers anything the 1100px rule missed). */
  .metrics-grid, .roles-grid, .analytics-grid, .tenants-list-container,
  .smtp-layout, .details-grid { grid-template-columns: 1fr !important; }

  /* The workflow canvas is a desktop tool; make it at least operable on a phone:
     a slimmer palette and a horizontally-scrollable body rather than a crush. */
  .wfc-palette { width: 150px; }
  .wfc-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .wfc-toolbar { flex-wrap: wrap; gap: 6px; }
  .wfc-hint { display: none; }

  /* Comfortable tap targets for primary controls (≥44px, Apple HIG). */
  .modal-actions .btn, .drawer-card .btn-primary, .workspace-header .btn { min-height: 44px; }

  /* Forms: inputs full-width + 16px font so iOS doesn't zoom on focus. */
  .modal-form input, .modal-form select, .modal-form textarea,
  .drawer-form input, .drawer-form select, .drawer-form textarea { font-size: 16px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SUPER-ADMIN GENERIC CONSOLE  (superchain/platform/webui/admin-console.js)
   ──────────────────────────────────────────────────────────────────────────
   The generic console emitted fourteen class names that had no rule anywhere
   in this stylesheet — sa-tile, sa-tab, sa-action, sa-row, sa-filter, sa-col,
   sa-sort, sa-pick, sa-bulk, and every badge tone. It leaned on inline styles
   for the rest, so eleven detail tabs rendered as an undifferentiated heap of
   grey buttons, status badges had no colour, and the controls bar crushed a
   dozen inputs onto one non-wrapping row. This section is the missing half.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── controls bar: it receives 8–12 children, not the 2–3 it was built for ── */
.grid-actions-bar { flex-wrap: wrap; gap: 8px; justify-content: flex-start; }
.sa-filter { min-width: 150px; }

/* ── status badge tones ──────────────────────────────────────────────────── */
.badge-success { background: rgba(16,185,129,.16); color: #34d399; border: 1px solid rgba(16,185,129,.28); }
.badge-warning { background: rgba(245,158,11,.16); color: #fbbf24; border: 1px solid rgba(245,158,11,.28); }
.badge-danger  { background: rgba(244, 63, 94,.16); color: #fb7185; border: 1px solid rgba(244,63,94,.28); }
.badge-info    { background: rgba( 99,102,241,.16); color: #a5b4fc; border: 1px solid rgba(99,102,241,.28); }

/* ── dashboard tiles ─────────────────────────────────────────────────────── */
.sa-tile { transition: transform .15s ease, border-color .15s ease; }
.sa-tile:hover { transform: translateY(-2px); border-color: rgba(99,102,241,.4); }

/* ── list grid ───────────────────────────────────────────────────────────── */
.sa-row:hover { background: rgba(99,102,241,.07); }
.sa-sort:hover { color: #a5b4fc; }
/* Numbers are compared down a column, so they align right and share one glyph
   width — proportional digits make a column of figures unreadable. */
.sa-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── resolved reference: name in front, id one click away ────────────────── */
.sa-ref { display: inline-flex; align-items: center; gap: 5px; }
.sa-copy {
  background: none; border: none; cursor: pointer; padding: 0 2px;
  color: #64748b; font-size: .78rem; line-height: 1; opacity: 0; transition: opacity .12s, color .12s;
}
.sa-ref:hover .sa-copy, .sa-idchip .sa-copy, .sa-copy:focus { opacity: 1; }
.sa-copy:hover { color: #a5b4fc; }
.sa-idchip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; color: #94a3b8;
  background: rgba(148,163,184,.1); border-radius: 5px; padding: 2px 8px;
}

/* ── full-screen detail modal ────────────────────────────────────────────── */
body.sa-modal-open { overflow: hidden; }
.sa-modal {
  position: fixed; inset: 0; z-index: 200; display: flex;
  align-items: center; justify-content: center; padding: 2vh 2vw;
  background: rgba(2, 6, 23, .72); backdrop-filter: blur(6px);
}
.sa-modal.hidden { display: none; }
.sa-modal-card {
  width: 100%; height: 96vh; display: flex; flex-direction: column;
  background: #0f172a; border: 1px solid rgba(148,163,184,.16);
  border-radius: 14px; box-shadow: 0 24px 70px rgba(0,0,0,.55); overflow: hidden;
}
.sa-modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 22px; border-bottom: 1px solid rgba(148,163,184,.14);
  background: rgba(30,41,59,.5); flex: 0 0 auto;
}
.sa-modal-titles { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sa-modal-title { font-size: 1.05rem; font-weight: 700; color: #e2e8f0; }
.sa-modal-close {
  background: rgba(148,163,184,.12); border: none; color: #cbd5e1; cursor: pointer;
  width: 34px; height: 34px; border-radius: 8px; font-size: .95rem; flex: 0 0 auto;
}
.sa-modal-close:hover { background: rgba(244,63,94,.2); color: #fb7185; }
/* The body is the ONLY scroller, and it scrolls in both directions — a wide
   line table must be reachable rather than forcing the page sideways. */
.sa-modal-body { flex: 1 1 auto; overflow: auto; padding: 20px 22px 40px; }

/* ── action toolbar ──────────────────────────────────────────────────────── */
.sa-actionbar {
  background: rgba(30,41,59,.55); border: 1px solid rgba(148,163,184,.14);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 20px;
}
.sa-actionbar-label {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .07em;
  font-weight: 700; color: #818cf8; margin-bottom: 9px;
}
.sa-actionbar-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.sa-action {
  background: rgba(99,102,241,.14); border: 1px solid rgba(99,102,241,.3);
  color: #c7d2fe; border-radius: 7px; padding: 7px 13px;
  font-size: .78rem; font-weight: 600; cursor: pointer; transition: background .13s, border-color .13s;
}
.sa-action:hover { background: rgba(99,102,241,.28); border-color: rgba(99,102,241,.55); }
.sa-req { color: #fbbf24; margin-left: 4px; font-weight: 700; }
.sa-actionbar-note { font-size: .68rem; color: #64748b; margin-top: 9px; }

/* ── detail tab strip ────────────────────────────────────────────────────── */
.sa-tabstrip {
  display: flex; flex-wrap: wrap; gap: 4px;
  border-bottom: 1px solid rgba(148,163,184,.16); padding-bottom: 0; margin-bottom: 0;
}
.sa-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  color: #94a3b8; cursor: pointer; padding: 9px 13px;
  font-size: .8rem; font-weight: 600; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px; transition: color .13s, border-color .13s;
}
.sa-tab:hover { color: #cbd5e1; }
.sa-tab.active { color: #a5b4fc; border-bottom-color: #6366f1; }
.sa-tab-count {
  background: rgba(148,163,184,.16); color: #94a3b8;
  border-radius: 9px; padding: 1px 7px; font-size: .68rem; font-weight: 700;
}
.sa-tab.active .sa-tab-count { background: rgba(99,102,241,.3); color: #c7d2fe; }
.sa-tab-body { padding-top: 16px; min-height: 120px; }
.sa-tab-count-line { font-size: .72rem; color: #64748b; margin-bottom: 8px; }
.sa-tab-msg { padding: 26px 14px; color: #94a3b8; font-size: .85rem; text-align: center; }
.sa-tab-empty strong { color: #cbd5e1; }
.sa-tab-err { color: #fb7185; }

/* ── line tables and blocks ──────────────────────────────────────────────── */
.sa-block { margin: 22px 0; }
.sa-block-h {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .07em;
  font-weight: 700; color: #818cf8; margin: 0 0 10px;
}
.sa-lines th { white-space: nowrap; }
.sa-lines td { vertical-align: top; }

/* ── status timeline ─────────────────────────────────────────────────────── */
.sa-timeline { list-style: none; margin: 0; padding: 0 0 0 6px; }
.sa-tl-item { position: relative; padding: 0 0 18px 26px; border-left: 2px solid rgba(148,163,184,.2); }
.sa-tl-item:last-child { border-left-color: transparent; padding-bottom: 0; }
.sa-tl-dot {
  position: absolute; left: -7px; top: 2px; width: 12px; height: 12px;
  border-radius: 50%; background: #334155; border: 2px solid #0f172a;
}
.sa-tl-now .sa-tl-dot { background: #6366f1; box-shadow: 0 0 0 4px rgba(99,102,241,.18); }
.sa-tl-step { font-weight: 650; color: #e2e8f0; font-size: .84rem; }
.sa-tl-when { font-size: .72rem; color: #94a3b8; margin-top: 2px; }
.sa-tl-meta { font-size: .7rem; color: #64748b; margin-top: 2px; }

/* ── collapsed raw field dump ────────────────────────────────────────────── */
.sa-raw { margin-top: 26px; border-top: 1px solid rgba(148,163,184,.14); padding-top: 14px; }
.sa-raw > summary {
  cursor: pointer; font-size: .74rem; color: #94a3b8; font-weight: 600;
  list-style: none; user-select: none;
}
.sa-raw > summary::before { content: '▸ '; color: #6366f1; }
.sa-raw[open] > summary::before { content: '▾ '; }
.sa-raw > summary:hover { color: #cbd5e1; }
.sa-raw table { margin-top: 12px; }
.sa-raw-k { color: #94a3b8; width: 30%; vertical-align: top; }
/* A long unbroken value (a ULID, a URL, a JSON blob) must wrap inside its cell
   instead of forcing the table wider than the modal. */
.sa-raw td { word-break: break-word; }

@media (max-width: 700px) {
  .sa-modal { padding: 0; }
  .sa-modal-card { height: 100vh; border-radius: 0; }
  .sa-modal-body { padding: 14px 12px 32px; }
}

/* A blocked action stays visible so the rule is legible, but must not look
   clickable — and the reason is spelled out beneath the bar, not only on hover,
   because a tooltip is invisible to anyone not already suspicious. */
.sa-action.is-off {
  opacity: .4; cursor: not-allowed;
  background: rgba(148,163,184,.08); border-color: rgba(148,163,184,.2); color: #94a3b8;
}
.sa-action.is-off:hover { background: rgba(148,163,184,.08); border-color: rgba(148,163,184,.2); }
.sa-actionbar-why { margin: 10px 0 0; padding-left: 18px; font-size: .7rem; color: #94a3b8; line-height: 1.55; }
.sa-actionbar-why b { color: #cbd5e1; font-weight: 650; }

/* Short id: monospace so the tail is scannable down a column, muted so it does
   not compete with the name beside it. */
.sa-shortid {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .74rem; color: #94a3b8;
  background: rgba(148,163,184,.1); border-radius: 4px; padding: 1px 5px;
}
.badge[title] { cursor: help; }

/* ── generated record form ────────────────────────────────────────────────── */
.sa-new { font-weight: 700; }
.sa-action.is-ghost { background: none; border-color: rgba(148,163,184,.28); color: #94a3b8; }
.sa-action.is-ghost:hover { background: rgba(148,163,184,.1); }
.sa-form-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px; margin-bottom: 20px;
}
.sa-field { display: flex; flex-direction: column; gap: 6px; }
.sa-field-label { font-size: .72rem; font-weight: 650; color: #cbd5e1; }
.sa-field-hint { font-size: .68rem; color: #64748b; }
.sa-input {
  width: 100%; background: rgba(15,23,42,.85); color: #e2e8f0;
  border: 1px solid rgba(148,163,184,.24); border-radius: 7px;
  padding: 9px 11px; font-size: .84rem; font-family: inherit;
}
.sa-input:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.18); }
.sa-input:invalid:not(:placeholder-shown) { border-color: rgba(244,63,94,.55); }
textarea.sa-input { resize: vertical; }
.sa-form-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  border-top: 1px solid rgba(148,163,184,.14); padding-top: 16px;
}
.sa-form-err { color: #fb7185; font-size: .78rem; min-height: 18px; margin-bottom: 8px; }

/* A basket, and the address that goes with it, need the full width of the
   form — squeezed into a 260px grid cell the product picker truncates every
   name to "Tamatar (Tom…". */
.sa-field.is-wide { grid-column: 1 / -1; }

/* ── the repeating product/quantity editor ──────────────────────────────────
   Named .sa-lineset, NOT .sa-lines: that class already exists and styles the
   READ-ONLY items table in the detail view. Reusing it would have given the
   editor table padding and given the table the editor's flex layout, breaking
   a screen I was not touching. */
.sa-lineset { display: flex; flex-direction: column; gap: 8px; }
.sa-lineset-rows { display: flex; flex-direction: column; gap: 8px; }
.sa-line-row {
  display: grid; grid-template-columns: minmax(0,1fr) 110px 44px 32px;
  gap: 8px; align-items: center;
}
.sa-line-product, .sa-line-qty {
  width: 100%; background: rgba(15,23,42,.85); color: #e2e8f0;
  border: 1px solid rgba(148,163,184,.24); border-radius: 7px;
  padding: 9px 11px; font-size: .84rem; font-family: inherit; min-width: 0;
}
.sa-line-product:focus, .sa-line-qty:focus {
  outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.18);
}
.sa-line-qty { text-align: right; }
/* The unit is shown, never typed — it belongs to the product. */
.sa-line-unit { font-size: .76rem; color: #94a3b8; text-align: center; }
.sa-line-del {
  background: transparent; border: 1px solid rgba(148,163,184,.24); border-radius: 7px;
  color: #94a3b8; cursor: pointer; padding: 8px 0; font-size: .8rem; line-height: 1;
}
.sa-line-del:hover { border-color: rgba(244,63,94,.5); color: #fb7185; }
.sa-line-add { align-self: flex-start; }
@media (max-width: 560px) {
  .sa-line-row { grid-template-columns: minmax(0,1fr) 88px 36px 30px; gap: 6px; }
}

/* ── Super-admin: styles for classes the console emits but nothing styled ────
   Found by a check that reads every `class="sa-…"` out of admin-console.js and
   asserts a matching rule exists. Eight had none — including the action form's
   own shell, which would have rendered as unstyled boxes over the page. A
   class the markup emits and the stylesheet has never heard of is invisible in
   review and obvious to the first person who opens the screen. */

.sa-modal-form { max-width: 640px; }
.sa-modal-id {
  font-size: 12px; color: var(--muted, #6b7280); margin-top: 2px;
}
.sa-form { display: contents; }
.sa-form .sa-modal-body { padding-bottom: 8px; }

/* the ref picker used by both the record form and the action form */
.sa-ref-picker { position: relative; }
.sa-pick {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line, #d8dee9);
  border-radius: 8px; background: var(--card, #fff); font: inherit; color: inherit;
}
.sa-pick:focus { outline: 2px solid var(--accent, #2f7d5a); outline-offset: 1px; }

/* bulk-selection bar above a grid */
.sa-bulk {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; margin: 0 0 10px;
  background: var(--accent-weak, #eef6f1); border: 1px solid var(--line, #d8dee9);
  border-radius: 8px; font-size: 13px;
}
.sa-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sa-tl-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

@media (prefers-color-scheme: dark) {
  .sa-pick { background: #10161d; border-color: #263140; }
  .sa-bulk { background: #14202b; border-color: #263140; }
}

/* ── §46 smart empty states ────────────────────────────────────────────────
   An empty grid that says WHY it is empty and offers the way out. The old
   "No records match this view." was one sentence for four situations, and
   only one of them meant there was nothing there. */
.sa-empty-cell { padding: 34px 18px !important; text-align: center; }
.sa-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sa-empty-t { font-size: .95rem; font-weight: 600; color: #cbd5e1; }
.sa-empty-s { font-size: .8rem; color: #94a3b8; max-width: 46ch; line-height: 1.5; }
.sa-empty-act { margin-top: 6px; }

/* ── §45 global create ─────────────────────────────────────────────────────
   One place to start a record from anywhere. Every page has its own "+ New",
   which is useless until you already know which of eighteen pages owns the
   thing you want to make. */
.nav-item.sa-create-any { font-weight: 600; }
.sa-create-menu {
  margin: 2px 0 8px 0; padding: 6px; border-radius: 10px;
  background: rgba(15, 23, 42, .96); border: 1px solid rgba(148, 163, 184, .22);
  max-height: 340px; overflow-y: auto;
}
.sa-create-menu.hidden { display: none; }
.sa-create-group {
  font-size: .62rem; letter-spacing: .08em; text-transform: uppercase;
  color: #818cf8; font-weight: 700; padding: 8px 8px 4px;
}
.sa-create-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 9px; border: 0; border-radius: 7px; background: transparent;
  color: #cbd5e1; font-size: .82rem; text-align: left; cursor: pointer;
}
.sa-create-item:hover { background: rgba(129, 140, 248, .16); color: #fff; }

/* ── §6/§11 product photographs ─────────────────────────────────────────────
   Replaces two text boxes ("Primary image URL", "Gallery image URLs, one per
   line") that between them asked an operations manager to host an image
   somewhere else and keep the primary in step with the gallery by hand. The
   ORDER carries the meaning here — the first picture is the primary — which is
   why the tiles are draggable and why the first one is labelled. */
.sa-photos { display: flex; flex-direction: column; gap: 10px; }
.sa-photo-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.sa-photo {
  position: relative; width: 96px; height: 96px; border-radius: 9px;
  overflow: hidden; border: 1px solid rgba(148, 163, 184, .24);
  background: rgba(15, 23, 42, .85); cursor: grab;
}
.sa-photo.is-dragging { opacity: .4; }
.sa-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sa-photo-primary {
  position: absolute; left: 0; bottom: 0; right: 0; text-align: center;
  background: rgba(99, 102, 241, .92); color: #fff;
  font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; padding: 2px 0;
}
.sa-photo-tools { position: absolute; top: 3px; right: 3px; display: flex; gap: 3px; }
.sa-photo-first, .sa-photo-del {
  width: 22px; height: 22px; padding: 0; line-height: 1; font-size: .72rem;
  border: 0; border-radius: 5px; cursor: pointer;
  background: rgba(15, 23, 42, .82); color: #cbd5e1;
}
.sa-photo-first:hover { background: rgba(99, 102, 241, .92); color: #fff; }
.sa-photo-del:hover { background: rgba(244, 63, 94, .92); color: #fff; }
.sa-photo-empty { font-size: .78rem; color: #94a3b8; }
.sa-photo-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sa-photo-file { display: none; }
.sa-photo-add, .sa-photo-link { flex: 0 0 auto; }
.sa-photo-msg { font-size: .76rem; color: #94a3b8; }

/* "One per line" — units, aliases, grades, varieties. Every one of these
   fields already SAYS "one per line" in its hint, so a textarea is not a
   compromise; it is what was declared. Before this they rendered as the
   order-basket editor, because both shapes were called `lines`. */
.sa-strlist { min-height: 84px; font-family: inherit; line-height: 1.5; }

/* Crop before upload. A phone photograph is 4 MB and 4000px wide; a product
   thumbnail is 600. Shipping the original means every shop on a 2G connection
   downloads it. */
.sa-crop-backdrop {
  position: fixed; inset: 0; z-index: 4000; display: flex;
  align-items: center; justify-content: center;
  background: rgba(2, 6, 23, .78); backdrop-filter: blur(3px);
}
.sa-crop-box {
  background: #0f172a; border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 14px; padding: 18px; max-width: min(92vw, 680px);
  display: flex; flex-direction: column; gap: 12px;
}
.sa-crop-title { font-weight: 600; font-size: .92rem; color: #e2e8f0; }
.sa-crop-stage { position: relative; line-height: 0; max-height: 60vh; overflow: hidden; }
.sa-crop-img { max-width: 100%; max-height: 60vh; display: block; user-select: none; }
.sa-crop-sel {
  position: absolute; border: 2px solid #6366f1; cursor: move;
  box-shadow: 0 0 0 9999px rgba(2, 6, 23, .55);
}
.sa-crop-handle {
  position: absolute; right: -7px; bottom: -7px; width: 14px; height: 14px;
  background: #6366f1; border-radius: 3px; cursor: nwse-resize;
}
.sa-crop-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.sa-crop-cancel, .sa-crop-whole, .sa-crop-ok { flex: 0 0 auto; }

/* Network → Service Area. The city list is a set of checkboxes rather than a
   comma-separated box, so a typo cannot silently shrink the area served. */
.sa-city { accent-color: #6366f1; margin-right: 4px; }

/* A photograph in the grid. The `image` column type was declared on Products
   from the start; nothing rendered it, so the cell printed the raw path as
   text. Invisible for as long as no product had a photo — which was until the
   upload control existed. */
.grid-table .td-thumb {
  width: 34px; height: 34px; border-radius: 6px; object-fit: cover;
  display: block; background: rgba(148, 163, 184, .12);
}
.grid-table .td-thumb.is-empty {
  border: 1px dashed rgba(148, 163, 184, .28);
}

/* §22 — where a product is sold. The city list appears only when the chosen
   mode needs one: "sold everywhere" with a set of ticked cities underneath is
   a screen that invites somebody to tick one and wonder why nothing changed. */
.sa-regions { display: flex; flex-direction: column; gap: 6px; }
.sa-region-mode { display: block; cursor: pointer; font-size: .84rem; }
.sa-region-mode input { accent-color: #6366f1; margin-right: 6px; }
.sa-region-help {
  display: block; margin-left: 22px; font-size: .74rem; color: #94a3b8;
}
.sa-region-cities {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  margin: 6px 0 0 22px; padding: 8px 10px; border-radius: 8px;
  background: rgba(15, 23, 42, .6); border: 1px solid rgba(148, 163, 184, .18);
}
.sa-region-city { font-size: .8rem; cursor: pointer; }
.sa-region-city input { accent-color: #6366f1; margin-right: 4px; }

/* ===================================================================
   SC CONSOLE v2 — the layout grammar the SC-* redlines specify
   (stream console-v2-portal · docs/60-design-v2/specs/redlines/SC-*.md)

   ── WHY THIS BLOCK EXISTS, AND WHY IT IS ONE BLOCK ─────────────────────────

   Five console panes were refit to the v2 redlines: SC-01 Tenants, SC-03
   Module registry, SC-08 Console home, SC-12/SC-15 List view + Data tables,
   SC-19 Experience builder. Each redline names the SAME six elements — a
   title, a subline, a tab strip, section labels, surface cards and bands —
   with the same measurements. Writing those six six times is how a look
   drifts one pane at a time, so they are declared once, here, and the panes
   reference them.

   ── WHY THE CONSOLE STAYS DARK ─────────────────────────────────────────────

   The redline TABLES quote the phone's light tokens (`--fg-surface`,
   `--fg-ink-3`) because they are generated from one template. The extracted
   FRAMES disagree, and they are the measurement:

     specs/frames/SC-01.html   background:#0F1117  color:#E7E9EF   ← dark
     specs/frames/SC-03.html   background:#0F1117  color:#E7E9EF   ← dark
     specs/frames/SC-08.html   background:#F4F5F2                  ← light
     design-tokens.md §18      "The console … is a separate design system on
                                its own dark palette"

   And the built portal is dark end to end (`--bg-app: #030206`). Repainting
   five panes light inside a dark portal would produce a third look rather
   than conformance, so the redlines' GEOMETRY and TYPE are taken exactly and
   the colour ROLES are mapped onto the console's own dark family — measured
   out of SC-01.html, not invented. The four meanings the spec says the whole
   signalling system depends on are preserved: amber = needs attention, red =
   wrong or overdue, green = done, violet/blue = this is an explanation.

   ── WHAT IS DELIBERATELY ABSENT ────────────────────────────────────────────

   No empty-state classes. `admin-console.js` already renders the four-case
   empty state (`.sa-empty` / `.sa-empty-t` / `.sa-empty-s` / `.sa-empty-act`,
   styled around line 3275 of this file) and it distinguishes searched-to-
   nothing from filtered-to-nothing from genuinely-empty. A second empty-state
   vocabulary would be two rules for one thing; the refit panes reuse those.
   ========================================================================== */

:root {
  /* Console surfaces — read off specs/frames/SC-01.html. */
  --sc-canvas:      #0F1117;   /* pane background                            */
  --sc-panel:       #171A22;   /* bar, rail, sticky header                   */
  --sc-card:        #1C202A;   /* surface card                               */
  --sc-card-2:      #222733;   /* card nested inside a card                  */
  --sc-line:        #262B36;   /* outer border                               */
  --sc-line-soft:   #21252F;   /* row divider — never on the last row        */
  --sc-line-in:     #2C3240;   /* border inside a card                       */

  --sc-ink:         #F2F4F8;   /* primary text, figures                      */
  --sc-ink-2:       #B6BCCB;   /* body text                                  */
  --sc-ink-3:       #8A90A2;   /* meta, captions, SECTION LABELS             */

  --sc-accent:      #6E5BE6;   /* active tab, focus, primary fill            */
  --sc-accent-2:    #8B7BF0;   /* text on the accent, active label           */
  --sc-ok:          #3FCF8E;   /* done or good                               */
  --sc-warn:        #E0A44B;   /* needs attention — NOT the user's fault     */
  --sc-danger:      #C2185B;   /* wrong or overdue                           */

  /* Band fills. The light spec ships opaque tints; on a dark surface a tint
     has to be an alpha of its own ink or it fights whatever card it sits on. */
  --sc-ok-bg:       rgba(63, 207, 142, 0.10);
  --sc-ok-line:     rgba(63, 207, 142, 0.30);
  --sc-warn-bg:     rgba(224, 164, 75, 0.10);
  --sc-warn-line:   rgba(224, 164, 75, 0.30);
  --sc-danger-bg:   rgba(194, 24, 91, 0.12);
  --sc-danger-line: rgba(194, 24, 91, 0.34);
  --sc-info-bg:     rgba(110, 91, 230, 0.10);
  --sc-info-line:   rgba(110, 91, 230, 0.30);
}

/* ── pane head · title 16.5/500 · subline 11 ──────────────────────────────
   Every SC redline that carries a header specifies exactly two lines: a
   title that ellipsises at one line and a subline underneath it. The title
   NEVER wraps — a wrapped title moves everything below it, which is what the
   character caps in the redlines exist to prevent. */
.sc-pane-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding-bottom: 12px; margin-bottom: 16px;
  border-bottom: 1px solid var(--sc-line);
}
.sc-pane-head > .sc-pane-titles { flex: 1; min-width: 0; }
.sc-title {
  font-size: 16.5px; font-weight: 500; line-height: 1.25; color: var(--sc-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0;
}
.sc-subline {
  font-size: 11px; line-height: 1.45; color: var(--sc-ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin: 2px 0 0;
}
/* A subline is allowed to breathe where the redline's own copy is a sentence
   rather than a breadcrumb (SC-19). Two lines maximum, still never three. */
.sc-subline.sc-subline-wrap {
  white-space: normal; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; max-width: 78ch;
}
.sc-pane-head-actions { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }

/* ── section label · 11.5/700/uppercase/0.05em ────────────────────────────
   The label that sits ABOVE a card group. It is a label, not a heading: rule
   9 of the build agreement says a section with no data renders nothing, so a
   pane must hide the label with the group, never leave it over a void. */
.sc-label {
  font-size: 11.5px; font-weight: 700; line-height: 1.4;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--sc-ink-3);
  margin: 0 0 9px;
}

/* ── tab strip · 4 equal cells, glyph 22 sw 1.7, label 10px ───────────────
   `grid-auto-columns: 1fr` is what makes the cells EQUAL. A flex strip with
   `flex:1` sizes to content and the four cells come out four widths, which
   is the thing the redline's "4 equal cells" is there to stop. */
.sc-tabstrip {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  border-bottom: 1px solid var(--sc-line);
  margin-bottom: 14px;
}
.sc-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; min-height: 44px; padding: 8px 6px;      /* 44 is the hit target */
  background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--sc-ink-3); font-family: inherit; font-size: 10px; font-weight: 500;
  letter-spacing: 0.02em; cursor: pointer; white-space: nowrap;
  transition: color .13s ease, border-color .13s ease;
}
.sc-tab > svg { width: 22px; height: 22px; stroke-width: 1.7; fill: none; }
.sc-tab:hover { color: var(--sc-ink-2); }
.sc-tab.active {
  color: var(--sc-accent-2); font-weight: 600; border-bottom-color: var(--sc-accent);
}
.sc-tab-count {
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em;
  color: var(--sc-ink-3);
}
.sc-tab.active .sc-tab-count { color: var(--sc-accent-2); }

/* ── surface card · radius 12 · padding 14/15 · gutter 14 ─────────────────── */
.sc-card {
  background: var(--sc-card); border: 1px solid var(--sc-line);
  border-radius: 12px; padding: 14px 15px;
}
.sc-cards { display: grid; gap: 14px; }
.sc-cards-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* ── band · radius 11 · padding 11/13 · 1px matching border · 16px icon ──── */
.sc-band {
  display: flex; align-items: flex-start; gap: 10px;
  border-radius: 11px; padding: 11px 13px;
  border: 1px solid transparent;
  font-size: 12.5px; line-height: 1.45;
}
.sc-band > svg,
.sc-band > .sc-band-icon { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.sc-band > svg { stroke-width: 1.9; fill: none; }
.sc-band-ok     { background: var(--sc-ok-bg);     border-color: var(--sc-ok-line);     color: var(--sc-ok); }
.sc-band-warn   { background: var(--sc-warn-bg);   border-color: var(--sc-warn-line);   color: var(--sc-warn); }
.sc-band-danger { background: var(--sc-danger-bg); border-color: var(--sc-danger-line); color: var(--sc-danger); }
.sc-band-info   { background: var(--sc-info-bg);   border-color: var(--sc-info-line);   color: var(--sc-accent-2); }
.sc-band strong { color: inherit; font-weight: 700; }
.sc-bands { display: flex; flex-direction: column; gap: 11px; }

/* ── stat strip (SC-08's four cells) ──────────────────────────────────────
   A stat is a DOOR in the redline — every cell in SC-08 is a button that goes
   somewhere. Anything rendered here that does not navigate is a figure with
   nowhere to go, which is the console equivalent of a dead end. */
.sc-statstrip { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 16px; }
.sc-stat {
  background: var(--sc-card); border: 1px solid var(--sc-line);
  border-left: 4px solid var(--sc-line-in);
  border-radius: 10px; padding: 13px 14px; text-align: left;
  font-family: inherit; cursor: pointer; transition: border-color .13s ease, transform .11s ease;
}
.sc-stat:hover { border-color: var(--sc-line-in); transform: translateY(-1px); }
.sc-stat-v { font-size: 23px; font-weight: 600; color: var(--sc-ink); margin-top: 2px; line-height: 1.15; }
.sc-stat-s { font-size: 11px; color: var(--sc-ink-3); margin-top: 1px; }
.sc-stat-ok     { border-left-color: var(--sc-ok); }
.sc-stat-warn   { border-left-color: var(--sc-warn); }
.sc-stat-danger { border-left-color: var(--sc-danger); }

/* ── SC-15's left rail · "Tables · 11" ────────────────────────────────────── */
.sc-rail {
  flex: 0 0 176px; background: var(--sc-panel);
  border: 1px solid var(--sc-line); border-radius: 12px;
  padding: 12px 0; align-self: flex-start; max-height: 62vh; overflow-y: auto;
}
.sc-rail > .sc-label { padding: 0 13px; }
.sc-rail-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 13px; background: none; border: 0; border-left: 3px solid transparent;
  color: var(--sc-ink-2); font-family: inherit; font-size: 12px; text-align: left;
  cursor: pointer; transition: color .12s ease, background-color .12s ease;
}
.sc-rail-item:hover { color: var(--sc-ink); background: rgba(255, 255, 255, 0.03); }
.sc-rail-item.active {
  color: var(--sc-accent-2); background: var(--sc-info-bg); border-left-color: var(--sc-accent);
}
.sc-split { display: flex; gap: 14px; align-items: flex-start; }
.sc-split > .sc-split-main { flex: 1; min-width: 0; }

/* ── SC-19's stat line under the builder title ────────────────────────────── */
.sc-statline { display: flex; flex-wrap: wrap; gap: 14px; font-size: 11.5px; color: var(--sc-ink-3); }
.sc-statline strong { color: var(--sc-ink); font-weight: 700; }

/* Narrow console: the rail stops being a rail rather than squeezing the table
   it exists to navigate. */
@media (max-width: 900px) {
  .sc-split { flex-direction: column; }
  .sc-rail { flex: 1 1 auto; width: 100%; max-height: none; }
}
=======
/* Business Partners */
/* ── the console's Business Partners work ───────────────────────────────────
   Everything below is ADDED for the partner page's controls — a file drop
   zone inside an action form, a filter and refresh on every ref picker, tab
   headers with an Add button, clickable tab rows, a document row's verbs,
   and the back link a child record gets when opened from a parent's tab.
   Nothing above this line changed. */

/* A page that cannot be authored says why, where the "+ New" button would be. */
.sa-not-creatable {
  font-size: .74rem; color: #94a3b8; max-width: 34ch; line-height: 1.35;
  padding: 6px 10px; border: 1px dashed rgba(148,163,184,.28); border-radius: 7px;
  white-space: normal;
}

/* ── ref picker tools: a filter box and a refresh, above the select ──────── */
.sa-ref-tools { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; }
.sa-ref-filter { flex: 1 1 auto; padding: 6px 10px; font-size: .78rem; }
.sa-ref-filter[hidden] { display: none; }
.sa-ref-refresh {
  flex: 0 0 auto; width: 32px; height: 32px; padding: 0; line-height: 1;
  background: rgba(148,163,184,.1); border: 1px solid rgba(148,163,184,.24);
  border-radius: 7px; color: #cbd5e1; cursor: pointer; font-size: .9rem;
  margin-left: auto;
}
.sa-ref-refresh:hover { background: rgba(99,102,241,.22); border-color: rgba(99,102,241,.5); color: #c7d2fe; }

/* ── a file, inside an action form ──────────────────────────────────────── */
.sa-file { display: flex; flex-direction: column; gap: 6px; }
.sa-file-drop {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 18px 14px; text-align: center; cursor: pointer;
  border: 2px dashed rgba(148,163,184,.3); border-radius: 10px;
  background: rgba(15,23,42,.6); color: #94a3b8; font-size: .8rem;
  transition: border-color .13s, background .13s;
}
.sa-file-drop:hover, .sa-file-drop:focus { border-color: rgba(99,102,241,.55); outline: none; }
.sa-file-drop.is-over { border-color: #6366f1; background: rgba(99,102,241,.12); }
.sa-file.has-file .sa-file-drop { border-style: solid; border-color: rgba(34,197,94,.45); }
.sa-file-input { display: none; }
.sa-file-prompt { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.sa-file-pick { flex: 0 0 auto; }
.sa-file-name { font-size: .8rem; font-weight: 600; color: #e2e8f0; word-break: break-all; }
.sa-file-name:empty { display: none; }
.sa-file-msg { font-size: .76rem; color: #94a3b8; min-height: 1em; }

/* ── the sentence above an action form ──────────────────────────────────── */
.sa-form-note {
  margin: 0 0 14px; padding: 10px 12px; border-radius: 8px; font-size: .82rem;
  background: rgba(99,102,241,.1); border: 1px solid rgba(99,102,241,.25); color: #c7d2fe;
}
/* The confirmation for a high-risk action, in words that stay on screen. */
.sa-form-warn {
  margin: 0 0 14px; padding: 10px 12px; border-radius: 8px; font-size: .82rem; line-height: 1.45;
  background: rgba(244,63,94,.1); border: 1px solid rgba(244,63,94,.35); color: #fda4af;
}
.sa-form-warn b { color: #fff; }

/* ── tabs: a header with an Add button, rows that open or expand ────────── */
.sa-tab-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.sa-tab-head .sa-tab-count-line { margin-bottom: 0; }
.sa-tab-add { margin-left: auto; padding: 5px 11px; font-size: .74rem; }
.sa-tab-why { flex-basis: 100%; font-size: .7rem; color: #94a3b8; }
.sa-tab-row { cursor: pointer; }
.sa-tab-row:hover { background: rgba(99,102,241,.07); }
.sa-tab-expand > td { background: rgba(15,23,42,.55); padding: 10px 14px !important; }
.sa-kv { margin: 0; }
.sa-kv td { font-size: .8rem; word-break: break-word; }
.sa-tab-acts { white-space: nowrap; text-align: right; }
.sa-tab-acts .sa-action { padding: 4px 9px; font-size: .72rem; margin-left: 4px; }
/* View is the safe verb and reads as the primary one; the rest are ghosts. */
.sa-doc-view { color: #a5b4fc; border-color: rgba(99,102,241,.45); }
.sa-doc-act:hover { border-color: rgba(251,191,36,.55); color: #fde68a; }

/* ── the way back from a child record opened out of a parent's tab ──────── */
.sa-modal-back {
  flex: 0 0 auto; background: none; border: 1px solid rgba(148,163,184,.28);
  color: #cbd5e1; border-radius: 7px; padding: 6px 11px; font-size: .76rem;
  font-weight: 600; cursor: pointer; white-space: nowrap;
}
.sa-modal-back:hover { background: rgba(148,163,184,.1); }
.sa-modal-back.hidden { display: none; }

/* ── Field Sales & Beats console (beats-console.js) ── */
/* Beats console */
/* ── Field Sales & Beats (superchain/platform/webui/beats-console.js) ────────
   Everything below is ADDED for the beats console — the sub-nav strip, the
   level chip, the five primitives (modal parts, drawer content, table, form,
   steps), the band, the first-run checklist — and one scoped disabled state.
   Nothing above this line changed. Every class beats-console.js emits is
   prefixed bc- and has a rule here (scripts/test-beats-console.js asserts it).
   Reused from the kit, NOT re-declared: .glass-panel, .panel-header,
   .metrics-grid, .metric-card, .action-btn, .wfc-input, .grid-table,
   .modal-wrapper/.modal-box(--narrow/--wide/--xwide/--tall)/.modal-header/
   .modal-body/.modal-actions, .badge + .badge-success/-warning/-danger/-info,
   .sa-empty/.sa-empty-t/.sa-empty-s/.sa-empty-act, .sa-num, .close-btn, and the
   portal's own #details-drawer.
   `.action-btn.primary` has never had a rule in this file (verified 2026-09-13
   — every "primary" button in the portal renders as a plain one); .bc-btn-primary
   is the emphasis the markup was always asking for, scoped to bc- so no other
   console changes look. `--accent-green` is not a defined variable anywhere;
   greens here use --accent-emerald. */

/* ── the header controls host: the sub-nav lives in #beats-console-controls ── */
.bc-controls { flex: 1 1 auto; min-width: 0; display: flex; justify-content: flex-end; }
.bc-subnav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.bc-subnav-group { display: inline-flex; align-items: center; gap: 2px; padding: 4px 6px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid var(--panel-border); }
.bc-subnav-label { font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin: 0 6px 0 4px; }
/* .action-btn.ps-subtab is the portal's own sub-tab markup; .bc-tab is the look
   it never had (ps-subtab.is-active has no rule in this file). */
.bc-subnav .bc-tab {
  appearance: none; cursor: pointer; position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 7px; font-family: var(--font-sans); font-size: .8rem; font-weight: 600; line-height: 1;
  color: var(--text-secondary); background: transparent; border: 1px solid transparent;
  transition: background .12s, color .12s, border-color .12s;
}
.bc-subnav .bc-tab:hover { color: var(--text-primary); background: rgba(255,255,255,.05); border-color: transparent; }
.bc-subnav .bc-tab.is-active { color: #c7d2fe; background: rgba(99,102,241,.16); border-color: rgba(99,102,241,.34); }
.bc-tab-count { font-size: .64rem; font-weight: 700; min-width: 18px; text-align: center; padding: 2px 6px; border-radius: 999px; background: rgba(255,255,255,.10); color: var(--text-muted); }
.bc-subnav .bc-tab.is-active .bc-tab-count { background: rgba(99,102,241,.30); color: #e0e7ff; }
.bc-tab-count.is-hot { background: rgba(245,158,11,.25); color: #fbbf24; }  /* items waiting on the user */
.bc-tab-count:empty { display: none; }
/* the 'setup' dot: this tab's first-run row is not ✓ yet */
.bc-tab-dot { position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-amber); box-shadow: 0 0 0 2px var(--bg-app); }
.bc-tab-dot[hidden] { display: none; }

/* ── level chip: the level the SERVER will honour, never the UI's opinion ── */
.bc-level {
  margin-left: 6px; display: inline-flex; align-items: center; gap: 6px; cursor: help;
  font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 20px; border: 1px solid transparent; white-space: nowrap;
}
.bc-level-read   { background: rgba(148,163,184,.12); border-color: rgba(148,163,184,.30); color: #94a3b8; }
.bc-level-update { background: rgba(245,158,11,.14);  border-color: rgba(245,158,11,.35);  color: #fbbf24; }
.bc-level-delete { background: rgba(99,102,241,.16);  border-color: rgba(99,102,241,.40);  color: #c7d2fe; }

/* ── page host ── */
.bc-page { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.bc-refused { padding: 22px 24px; }
.bc-refused h3 { font-size: 1.05rem; margin-bottom: 8px; }
.bc-refused p { color: var(--text-secondary); font-size: .9rem; line-height: 1.5; }

/* ── buttons: emphasis, danger, ghost, and the in-flight state the kit lacks ── */
.bc-btn { font-size: .8rem; line-height: 1.2; padding: 8px 14px; white-space: nowrap; }
.action-btn.bc-btn-primary {
  background: linear-gradient(135deg, var(--accent-indigo) 0%, #4f46e5 100%);
  border-color: transparent; color: #fff; box-shadow: 0 4px 15px rgba(99,102,241,.35);
}
.action-btn.bc-btn-primary:hover { background: linear-gradient(135deg, #7377f5 0%, #5b52ea 100%); border-color: transparent; }
.action-btn.bc-btn-danger { background: rgba(244,63,94,.16); border-color: rgba(244,63,94,.5); color: #fda4af; box-shadow: none; }
.action-btn.bc-btn-danger:hover { background: rgba(244,63,94,.28); border-color: rgba(244,63,94,.6); }
.action-btn.bc-btn-ghost { background: transparent; border-color: rgba(255,255,255,.12); color: var(--text-secondary); }
.action-btn.bc-btn-ghost:hover { color: var(--text-primary); background: rgba(255,255,255,.05); }
/* a write in flight: 'Saving…', disabled, no second click */
#view-beats-console .action-btn:disabled, .bc-modal .action-btn:disabled, .bc-drawer-body .action-btn:disabled,
.bc-subnav .bc-tab:disabled { opacity: .5; cursor: progress; box-shadow: none; }
.bc-modal .action-btn:disabled:hover { background: inherit; }

/* ── section: a glass-panel with a header, a banner slot, a body ── */
.bc-section { padding: 18px 20px; min-width: 0; }
.bc-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bc-section-head h3 { font-size: 1.05rem; }
.bc-section-count { font-weight: 500; color: var(--text-secondary); font-size: .9rem; }
.bc-section-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* the portal's .wfc-input is width:100% — in a header row that stacked the
   Today date picker, Refresh and Open trips in a column */
.bc-section-actions .wfc-input { width: auto; }
.bc-section-banner:empty { display: none; }
.bc-section-body { min-width: 0; }
.bc-section-pink   { border-left: 4px solid var(--accent-pink); }
.bc-section-amber  { border-left: 4px solid var(--accent-amber); }
.bc-section-green  { border-left: 4px solid var(--accent-emerald); }
.bc-section-indigo { border-left: 4px solid var(--accent-indigo); }
/* 403 inside a section: the sentence, not an empty list */
.bc-notlevel { padding: 14px 4px; color: var(--text-secondary); font-size: .86rem; font-style: italic; }
.bc-code { font-family: var(--font-mono); font-size: .66rem; color: var(--text-muted); margin-left: 6px; letter-spacing: .02em; }
.bc-door { font-family: var(--font-mono); font-size: .66rem; color: var(--text-muted); margin-left: 6px; }

/* ── band: a sentence inside its own section — never a modal, never an empty list ── */
.bc-band { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 10px 13px; border-radius: 10px; border: 1px solid transparent; font-size: .82rem; line-height: 1.45; margin: 8px 0; }
.bc-band-error { background: rgba(236,72,153,.10); border-color: rgba(236,72,153,.35); color: #fbcfe8; }  /* a door that refused / failed: the words, the door, Retry */
.bc-band-warn  { background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.35); color: #fde68a; }  /* not a refusal; never blocks the primary */
.bc-band-ok    { background: rgba(16,185,129,.10); border-color: rgba(16,185,129,.30); color: #a7f3d0; }
.bc-band-info  { background: rgba(99,102,241,.10); border-color: rgba(99,102,241,.30); color: #c7d2fe; }
.bc-band strong { color: inherit; font-weight: 700; }
.bc-band .action-btn { margin-left: auto; padding: 5px 10px; font-size: .74rem; align-self: center; flex: 0 0 auto; }
.bc-band-x { flex: 0 0 auto; margin-left: auto; align-self: flex-start; background: transparent; border: none; color: inherit; opacity: .6; cursor: pointer; font-size: .8rem; padding: 0 2px; }
.bc-band-x:hover { opacity: 1; }

/* ── empty state: reuses .sa-empty*; one sentence, one action ── */
.bc-empty { padding: 30px 16px; text-align: center; }
.bc-table-empty { padding: 0; }

/* ── badge: the kit's .badge tones, minus the uppercase that mangles names ── */
.badge.bc-badge { text-transform: none; letter-spacing: 0; font-size: .7rem; white-space: nowrap; }
.badge.bc-badge-stage { background: rgba(129,140,248,.18); border-color: rgba(129,140,248,.4); color: #c7d2fe; }

/* ── modal parts: the existing .modal-wrapper/.modal-box do the shell ── */
.bc-modal-host { display: contents; }
/* 300: clears .sa-modal (200) and the portal drawer (100); stacked bc modals
   sit at the same z and paint in DOM order, so the last opened is on top. */
.modal-wrapper.bc-modal { z-index: 300; }
.bc-modal-box { gap: 0; }
.bc-modal-head h3 { font-size: 1.05rem; padding-right: 12px; }
.bc-modal-body { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.bc-modal-banner:empty, .bc-modal-content:empty, .bc-modal-form:empty { display: none; }
.bc-modal-banner .bc-band { margin: 0; }
.bc-modal-content { font-size: .88rem; line-height: 1.5; color: var(--text-primary); }
.bc-modal-actions { flex-wrap: wrap; }
.bc-modal-actions .bc-modal-secondary { margin-right: auto; }
.bc-modal-cancel, .bc-modal-primary, .bc-modal-title, .bc-modal-x { /* hooks for the kit; the look is the shell's */ }
.bc-modal.is-busy .bc-modal-x { pointer-events: none; opacity: .4; }

/* confirmDiff: field · was → now, a consequence per row */
.bc-diff { width: 100%; border-collapse: collapse; font-size: .84rem; margin: 4px 0 12px; }
.bc-diff th { text-align: left; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); padding: 6px 10px; border-bottom: 1px solid var(--panel-border-hover); }
.bc-diff td { padding: 8px 10px; border-bottom: 1px solid var(--panel-border); vertical-align: top; }
.bc-diff-field { color: var(--text-secondary); white-space: nowrap; }
.bc-diff-before { color: var(--text-muted); text-decoration: line-through; }
.bc-diff-arrow { color: var(--text-muted); width: 24px; text-align: center; }
.bc-diff-after  { color: #c7d2fe; font-weight: 600; }
.bc-diff-none { color: var(--text-muted); text-decoration: none; font-style: italic; }
.bc-diff-why td { padding-top: 0; border-bottom: 1px solid var(--panel-border); }
.bc-consequence { margin: 0 0 6px; font-size: .84rem; line-height: 1.5; color: var(--text-primary); }
.bc-diff-why .bc-consequence { color: var(--text-secondary); font-size: .8rem; margin: 0 0 8px; }

/* ── drawer: the PORTAL'S drawer (#details-drawer) with bc content inside ── */
.drawer-card.bc-drawer-on .drawer-header h3 { text-transform: none; letter-spacing: 0; font-size: 1rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-drawer-body { display: flex; flex-direction: column; gap: 18px; min-width: 0; font-size: .88rem; }
.bc-drawer-sub { font-size: .78rem; color: var(--text-secondary); }
.bc-drawer-sub[hidden], .bc-drawer-banner:empty { display: none; }
.bc-drawer-banner .bc-band { margin: 0; }
.bc-drawer-content { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.bc-drawer-content .bc-section { padding: 14px 16px; }
.bc-drawer-content .metrics-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.bc-drawer-content .metric-card { padding: 14px; }
.bc-drawer-content .metric-card .metric-val { font-size: 1.3rem; margin: 4px 0; }
/* content helpers pages reuse inside a drawer or a section */
.bc-drawer-label { font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 6px; }
.bc-kv { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 6px 12px; font-size: .84rem; margin: 0; }
.bc-kv dt { color: var(--text-secondary); }
.bc-kv dd { color: var(--text-primary); word-break: break-word; margin: 0; }

/* ── table: the kit's grid-table inside a scroller that owns BOTH axes ── */
.bc-table-host { min-width: 0; }
.bc-table-wrap { overflow: auto; max-height: calc(100vh - 260px); border: 1px solid var(--panel-border); border-radius: 10px; }
.bc-table-wrap.is-sticky .grid-table th { position: sticky; top: 0; z-index: 2; background: #0d0c14; }  /* opaque: rows scroll beneath */
.bc-table { font-size: .84rem; }
.bc-table th { white-space: nowrap; }
.bc-table td { padding: 11px 14px; vertical-align: middle; }
.bc-table td .action-btn { padding: 5px 10px; font-size: .74rem; }
.grid-table tbody tr.bc-static { cursor: default; }
.grid-table tbody tr.bc-static:hover td { background: inherit; }
.bc-sort { cursor: pointer; user-select: none; }
.bc-sort:hover { color: #a5b4fc; }
.bc-sort.is-asc::after { content: ' ▲'; font-size: .6rem; }
.bc-sort.is-desc::after { content: ' ▼'; font-size: .6rem; }
/* the row a write just created or changed */
.grid-table tbody tr.bc-hl td { background: rgba(16,185,129,.14); transition: background 1.2s ease; }
.bc-drawer-content .bc-table-wrap { max-height: 40vh; }

/* ── form: label, control (+ unit tag), default, hint, inline error ── */
.bc-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.bc-form.is-one-col { grid-template-columns: 1fr; }
.bc-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.bc-field[hidden] { display: none; }
.bc-field.is-wide { grid-column: 1 / -1; }
.bc-label { font-size: .72rem; font-weight: 650; color: var(--text-secondary); }
.bc-req { color: var(--accent-amber); margin-left: 3px; font-weight: 700; }
.bc-opt { color: var(--text-muted); font-weight: 400; }
.bc-reader { color: var(--text-muted); font-weight: 400; }  /* who reads this note */
.bc-hint { font-size: .68rem; line-height: 1.4; color: var(--text-muted); }
.bc-control { position: relative; display: flex; align-items: center; min-width: 0; }
.bc-field.is-pick .bc-control, .bc-field.is-radio .bc-control, .bc-field.is-check .bc-control { display: block; }
.bc-field.is-textarea .bc-control { align-items: stretch; }
.bc-control > .bc-input { flex: 1; font-family: inherit; min-width: 0; }
.bc-control.has-unit > .bc-input { padding-right: 52px; }
.bc-input { font-family: var(--font-sans); }
.bc-unit { position: absolute; right: 10px; font-size: .7rem; font-weight: 700; color: var(--text-muted); pointer-events: none; }
.bc-default { font-size: .66rem; color: var(--text-muted); cursor: pointer; align-self: flex-start; border-bottom: 1px dotted var(--text-muted); }
.bc-default:hover { color: #a5b4fc; border-bottom-color: #a5b4fc; }
.bc-field.is-invalid .bc-input, .bc-field.is-invalid .bc-pick-list { border-color: #f43f5e; box-shadow: 0 0 0 2px rgba(244,63,94,.18); }
.bc-error { display: block; font-size: .72rem; line-height: 1.4; color: #fca5a5; }
.bc-error:empty { display: none; }
.bc-form-err { grid-column: 1 / -1; color: #fb7185; font-size: .78rem; }  /* the refusal no field claims */
.bc-form-err:empty { display: none; }
/* radios: a card per option with its explanation */
.bc-radios { display: flex; flex-direction: column; gap: 6px; }
.bc-radios.is-inline { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.bc-radio { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: start; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.2); cursor: pointer; font-size: .82rem; }
.bc-radio:hover { border-color: rgba(255,255,255,.16); }
.bc-radio.is-off { opacity: .5; cursor: not-allowed; }
.bc-radio input { margin-top: 3px; accent-color: var(--accent-indigo); }
.bc-radio-t { color: var(--text-primary); font-weight: 600; }
.bc-radio-h { grid-column: 2; font-size: .7rem; color: var(--text-muted); line-height: 1.4; }
.bc-check { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--text-primary); cursor: pointer; }
.bc-check input { accent-color: var(--accent-indigo); }
/* search-pick: a text filter over a checkbox / radio list */
.bc-pick-q { margin-bottom: 6px; }
.bc-pick-list { max-height: 240px; overflow: auto; border: 1px solid rgba(255,255,255,.12); border-radius: 7px; background: rgba(0,0,0,.3); }
.bc-pick-item { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; padding: 7px 10px; font-size: .82rem; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,.04); }
.bc-pick-item:hover { background: rgba(99,102,241,.08); }
.bc-pick-item.is-off { opacity: .5; cursor: not-allowed; }
.bc-pick-item[hidden] { display: none; }
.bc-pick-item input { accent-color: var(--accent-indigo); }
.bc-pick-t { color: var(--text-primary); }
.bc-pick-hint { grid-column: 2; font-size: .68rem; color: var(--text-muted); }
.bc-pick-count { font-size: .68rem; color: var(--text-muted); margin-top: 4px; }

/* ── steps: a left rail and one pane at a time, Review last ── */
.bc-steps { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 18px; min-height: 320px; }
.bc-steps-rail { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; border-right: 1px solid var(--panel-border); padding-right: 12px; }
.bc-step { display: grid; grid-template-columns: 22px 1fr; column-gap: 8px; align-items: center; padding: 6px 8px; border-radius: 8px; font-size: .78rem; font-weight: 600; color: var(--text-muted); border: 1px solid transparent; cursor: default; }
.bc-step.is-reachable { cursor: pointer; }
.bc-step.is-reachable:hover { background: rgba(255,255,255,.04); }
.bc-step-n { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .66rem; font-weight: 700; background: rgba(255,255,255,.08); color: var(--text-secondary); }
.bc-step-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-step-badge { grid-column: 2; font-size: .64rem; font-weight: 600; color: #fbbf24; }
.bc-step-badge:empty { display: none; }
.bc-step.is-current { color: #c7d2fe; background: rgba(99,102,241,.16); border-color: rgba(99,102,241,.4); }
.bc-step.is-current .bc-step-n { background: var(--accent-indigo); color: #fff; }
.bc-step.is-done { color: #34d399; }
.bc-step.is-done .bc-step-n { background: rgba(16,185,129,.25); color: #34d399; }
.bc-steps-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bc-steps-banner:empty { display: none; }
.bc-steps-panes { flex: 1 1 auto; min-height: 0; }
.bc-step-pane { display: flex; flex-direction: column; gap: 14px; font-size: .86rem; line-height: 1.5; }
.bc-step-pane[hidden] { display: none !important; }
.bc-steps-foot { display: flex; align-items: center; gap: 10px; justify-content: flex-end; padding-top: 14px; border-top: 1px solid var(--panel-border); }
.bc-steps-err { margin-right: auto; color: #fb7185; font-size: .78rem; }
.bc-steps-err:empty { display: none; }
.bc-steps-cancel { margin-right: auto; }
.bc-steps-err:not(:empty) + .bc-steps-cancel { margin-right: 0; }
.bc-steps-back, .bc-steps-next, .bc-steps-primary { /* hooks for the kit; the look is .bc-btn's */ }
.bc-steps-back[hidden], .bc-steps-next[hidden], .bc-steps-primary[hidden] { display: none; }

/* ── two side-by-side panels (Team & Fleet), stacked on a narrow screen ── */
.bc-two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }

/* ── first run: the setup checklist above Today's table ── */
.bc-setup { padding: 16px 20px; border-left: 4px solid var(--accent-indigo); }
.bc-setup-head h3 { font-size: 1rem; }
.bc-setup-count { font-weight: 500; color: var(--text-secondary); font-size: .85rem; }
.bc-setup-lead { font-size: .76rem; color: var(--text-muted); }
.bc-setup-loading { color: var(--text-secondary); font-size: .85rem; }
.bc-setup-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.bc-setup-row { display: grid; grid-template-columns: 24px 1fr auto; column-gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--panel-border); font-size: .86rem; }
.bc-setup-row:last-child { border-bottom: none; }
.bc-setup-row.is-done { color: var(--text-secondary); }
.bc-setup-mark { font-weight: 700; text-align: center; color: var(--accent-amber); }
.bc-setup-row.is-done .bc-setup-mark { color: var(--accent-emerald); }
.bc-setup-text { color: var(--text-primary); line-height: 1.4; }
.bc-setup-row.is-done .bc-setup-text { color: var(--text-secondary); }
.bc-setup-why { display: block; font-size: .74rem; color: var(--text-muted); margin-top: 2px; }
.bc-setup-wait { font-size: .74rem; color: var(--text-muted); font-style: italic; white-space: nowrap; }
.bc-setup-act { display: flex; justify-content: flex-end; }
.bc-setup-act:empty { display: none; }
.bc-setup.is-strip { display: flex; align-items: center; gap: 6px; padding: 10px 16px; font-size: .82rem; color: var(--text-secondary); border-left-color: var(--accent-emerald); }
.bc-setup-ok { color: #34d399; font-weight: 700; }
.bc-setup-toggle { margin-left: auto; padding: 5px 10px; font-size: .74rem; }

/* ── toasts: the support code and one follow-up link inside the portal's card ── */
.bc-toast-code { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: .64rem; color: var(--text-muted); letter-spacing: .02em; }
.bc-toast-link { display: inline-block; margin-top: 6px; padding: 4px 10px; border-radius: 6px; border: 1px solid rgba(99,102,241,.4); background: rgba(99,102,241,.16); color: #c7d2fe; font: inherit; font-size: .74rem; font-weight: 600; cursor: pointer; }
.bc-toast-link:hover { background: rgba(99,102,241,.28); }

@media (max-width: 1100px) {                /* the kit's tablet breakpoint (1385) */
  .bc-two-col { grid-template-columns: 1fr; }
  .bc-steps { grid-template-columns: 1fr; }
  .bc-steps-rail { flex-direction: row; flex-wrap: wrap; border-right: none; padding-right: 0; border-bottom: 1px solid var(--panel-border); padding-bottom: 8px; }
  .bc-step-badge { display: none; }
}
@media (max-width: 600px) {                 /* the kit's phone breakpoint (2945) */
  .bc-controls { justify-content: flex-start; }
  .bc-subnav { justify-content: flex-start; }
  .bc-form { grid-template-columns: 1fr; }
  .bc-setup-row { grid-template-columns: 20px 1fr; }
  .bc-setup-act { grid-column: 2; justify-content: flex-start; margin-top: 4px; }
  .bc-table-wrap { max-height: none; }
}
/* ── Today page + Trip drawer (page-today.js, trip-actions.js) ──────────────
   Rules for every bc-* class THESE two modules emit that the core's block
   (beats-console.css, per bc-map-css.md §12) does not already define. The
   integrator appends this inside the one marked bc block in style.css. If the
   core already carries a rule with the same name and intent (bc-muted, bc-lead,
   bc-link …) keep the core's and drop the duplicate here — one rule per thing.
   Colours are the kit's own families (bc-map-css.md §12): indigo #c7d2fe /
   #a5b4fc, green #34d399, amber #fbbf24, rose #fb7185 / #fca5a5. */

/* text tones — the console's idiom: amber is a warning, rose a refusal or a gap */
.bc-muted { color: var(--text-muted); }
.bc-amber { color: #fbbf24; }
.bc-ok    { color: #34d399; }
.bc-bad   { color: #fb7185; }
.bc-code  { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .68rem; }
.bc-lead  { margin: 0 0 12px; font-size: .86rem; line-height: 1.5; color: var(--text-secondary); }
.bc-link  { color: #a5b4fc; text-decoration: none; cursor: pointer; }
.bc-link:hover { text-decoration: underline; }
.bc-link-danger { color: #fb7185; }
.bc-danger-text { color: #fb7185 !important; }

/* small buttons inside bands, cells and menus */
.action-btn.bc-btn-sm { padding: 4px 9px; font-size: .74rem; }

/* toolbars: the date/refresh/open row, a search + mode row in a modal */
.bc-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 10px; }
.bc-toolbar .wfc-input { max-width: 280px; }
.bc-radio { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--text-secondary); cursor: pointer; }

/* stage filter chips (the sub-tab markup, scoped so the shell's tabs are untouched) */
.bc-filters { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 12px; }
.action-btn.bc-chip { padding: 5px 11px; font-size: .76rem; border-radius: 999px; }
.action-btn.bc-chip.is-active { color: #c7d2fe; background: rgba(99,102,241,.16); border-color: rgba(99,102,241,.34); }

/* 'Whose turn' strip */
.bc-turn { flex-wrap: wrap; gap: 6px 18px; }
.bc-turn-item { white-space: nowrap; }
.bc-turn-line { margin-top: 6px; font-size: .84rem; }

/* the row-end Open button is the row click made visible */
.bc-row-open { white-space: nowrap; }

/* tables in the drawer and in modals: compact rows, no click affordance */
.grid-table.bc-mini th { padding: 8px 10px; font-size: .66rem; }
.grid-table.bc-mini td { padding: 8px 10px; font-size: .8rem; }
.grid-table.bc-mini tbody tr.is-invalid td { background: rgba(244,63,94,.08); }
.bc-table-wrap--flat { max-height: none; border: none; border-radius: 0; }
.wfc-input.bc-qty { width: 96px; text-align: right; }

/* trip drawer sections */
.bc-trip-section { padding: 0 0 14px; border-bottom: 1px solid var(--panel-border); font-size: .86rem; line-height: 1.5; }
.bc-trip-section:last-child { border-bottom: none; }
.bc-trip-head { display: flex; flex-direction: column; gap: 4px; }
.bc-trip-title { font-size: 1.02rem; font-weight: 700; color: #fff; }
.bc-metrics { margin: 0; }
.bc-metrics .metric-card { padding: 10px 12px; }
.bc-inline-stats { display: flex; gap: .9rem; flex-wrap: wrap; align-items: center; margin: 4px 0 8px; }
.bc-dispute > div { flex: 1; }
.bc-dispute .grid-table { margin: 8px 0; }

/* the stage strip — the old console's chips, as classes (who/when tooltip on title) */
.bc-stage-strip { display: flex; gap: .25rem; flex-wrap: wrap; align-items: stretch; margin-top: .5rem; }
.bc-stage-chip { display: inline-flex; flex-direction: column; align-items: center; min-width: 64px; padding: .2rem .4rem; border-radius: 6px; font-size: .72em; background: rgba(255,255,255,.05); opacity: .55; cursor: help; }
.bc-stage-chip.is-done { background: rgba(34,197,94,.22); opacity: 1; }
.bc-stage-chip.is-now  { background: rgba(129,140,248,.35); opacity: 1; }
.bc-stage-chip.is-now .bc-stage-label, .bc-stage-chip.is-owed .bc-stage-label { font-weight: 700; }
.bc-stage-chip.is-owed { background: rgba(244,63,94,.25); opacity: 1; }
.bc-stage-label { font-weight: 500; }
.bc-stage-when { opacity: .75; }
.bc-stage-sep { opacity: .4; align-self: center; }

/* receipts (cheque / UPI / bank) as chips; a voided one is struck through */
.bc-receipts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.bc-receipt { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: .76rem; background: rgba(255,255,255,.05); border: 1px solid var(--panel-border); }
.bc-receipt.is-voided { text-decoration: line-through; opacity: .6; }

/* THE ACTION BLOCK: one primary, the rest under '…More' */
.bc-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 4px; }
.bc-primary-text { font-size: .84rem; }
.bc-more { position: relative; }
.bc-menu { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 30; min-width: 260px; display: flex; flex-direction: column; padding: 6px; border-radius: 10px; background: #14131d; border: 1px solid var(--panel-border-hover); box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.bc-menu[hidden] { display: none; }
.action-btn.bc-menu-item { justify-content: flex-start; text-align: left; width: 100%; border: none; background: transparent; box-shadow: none; padding: 8px 10px; font-size: .8rem; }
.action-btn.bc-menu-item:hover { background: rgba(99,102,241,.12); }
/* the Next sentence: a table cell ignores min-width, an inner block does not
   (at 800px the column squeezed to one word and every row was ten lines) */
.bc-next { display: block; min-width: 240px; }
/* ── Set-up pages (page-beats.js, page-shops.js, page-team.js, page-plan.js) ──
   One rule per class those four modules emit that neither the core block nor
   today-trip.css defines. The assembler's class scan (scripts/test-beats-
   console.js) fails on any emitted bc-* class without a rule — the wizard's
   shop picker ran every shop together on one line until these were merged. */
/* the two `hidden` toggles the pages rely on: an author `display` beats the
   UA's [hidden]{display:none}, so a band toggled with .hidden stayed painted
   ('No reasons configured' on every Decide modal, on a tenant that had them) */
.bc-band[hidden] { display: none !important; }
.bc-modal-actions[hidden] { display: none; }
/* form footer inside a modal form grid (bc-map-css.md §12) */
.bc-form-actions { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; justify-content: flex-end; padding-top: 14px; border-top: 1px solid var(--panel-border); }
/* shared by beats / shops / team drawers */
.bc-toolbar-spacer { flex: 1 1 auto; }
.bc-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8em; }
.bc-drawer-sections { display: flex; flex-direction: column; gap: 16px; }
.bc-card { padding: 12px 14px; border: 1px solid var(--panel-border); border-radius: 10px; background: rgba(255,255,255,.02); }
.bc-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.bc-card-head .bc-drawer-label { margin: 0; }
.bc-card-warn { border-color: rgba(245,158,11,.45); background: rgba(245,158,11,.06); }
.bc-links { margin: 6px 0 0; padding-left: 18px; font-size: .82rem; }
.bc-drawer-foot { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: flex-end; padding-top: 12px; border-top: 1px solid var(--panel-border); }
.bc-actions-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: flex-end; padding-top: 12px; border-top: 1px solid var(--panel-border); }
.bc-actions-row .wfc-input { flex: 1 1 220px; min-width: 0; }
.bc-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 24px; margin-bottom: 12px; }
.bc-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.bc-beat-chip a { margin-left: 4px; color: inherit; text-decoration: none; opacity: .7; }
.bc-beat-chip a:hover { opacity: 1; color: #fb7185; }
.bc-pending { margin: 0 0 14px; }
.bc-pending:empty { display: none; }
/* the wizard's shop picker and the step notes */
.bc-check-list { max-height: 44vh; overflow: auto; border: 1px solid var(--panel-border); border-radius: 10px; padding: 4px 0; }
.bc-check-row { display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: .84rem; cursor: pointer; }
.bc-check-row:hover { background: rgba(255,255,255,.04); }
.bc-check-main { font-weight: 600; }
.bc-step-note { margin: 10px 0 0; }
.bc-step-links { margin: 10px 0 0; font-size: .82rem; }
/* empty state with a prerequisite checklist (Beats, Shops) */
.bc-empty-card { max-width: 640px; margin: 24px auto; padding: 24px 28px; text-align: center; }
.bc-empty-lead { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin: 0 0 6px; }
.bc-checklist { list-style: none; margin: 16px 0 0; padding: 0; text-align: left; font-size: .84rem; }
.bc-checklist li { display: flex; gap: 8px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--panel-border); color: var(--text-secondary); }
.bc-checklist li.is-ok { color: var(--text-primary); }
.bc-check-mark { width: 18px; text-align: center; font-weight: 700; color: var(--accent-amber); }
.bc-checklist li.is-ok .bc-check-mark { color: #34d399; }
/* Plan page */
.bc-page-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.bc-page-head .wfc-input { width: auto; min-width: 160px; }
.bc-page-head-spacer { flex: 1 1 auto; }
.bc-page-title { font-size: 1rem; font-weight: 700; color: var(--text-primary); }
.bc-plan-none { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bc-plan-none .bc-band { flex: 1 1 320px; margin: 0; }
.bc-plan-lead { font-size: .84rem; line-height: 1.5; margin: 0 0 12px; }
.bc-plan-tiles { margin: 6px 0 16px; }
.bc-plan-tiles .metric-val { font-size: 1.5rem; }
.bc-verdicts { list-style: none; margin: 4px 0 12px; padding: 0; display: grid; gap: 4px; }
.bc-verdict { display: grid; grid-template-columns: minmax(160px, 1.2fr) 1fr auto; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 8px; font-size: .84rem; background: rgba(255,255,255,.03); border: 1px solid var(--panel-border); }
.bc-verdict-behind { border-color: rgba(244,63,94,.35); }
.bc-verdict-on-track { border-color: rgba(16,185,129,.28); }
.bc-verdict-no-plan { opacity: .75; }
.bc-verdict-label { color: var(--text-secondary); }
.bc-verdict-figs { color: var(--text-primary); }
.bc-verdict-mark { justify-self: end; }
/* the same two tones inline inside a tile's description */
span.bc-verdict-behind { color: #fb7185; border: 0; }
span.bc-verdict-on-track { color: #34d399; border: 0; }
.bc-plan-links { font-size: .82rem; margin-top: 6px; }
.bc-plan-links a { color: #a5b4fc; }
.bc-plan-version { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; font-size: .9rem; }
.bc-plan-version .wfc-input { width: auto; margin-left: 6px; }
.bc-plan-editor { min-height: 60vh; }
.bc-plan-form { margin: 4px 0 8px; }
.bc-plan-changes { margin-top: 10px; }
.bc-plan-change { font-size: .8rem; padding: 4px 0; border-top: 1px solid var(--panel-border); }
.bc-plan-change a { color: #a5b4fc; }
.bc-plan-diff-wrap { max-height: 40vh; margin-bottom: 14px; }
.bc-plan-save-sentence { margin-top: 10px; }
.bc-season-row { display: grid; grid-template-columns: repeat(12, minmax(56px, 1fr)); gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.bc-season-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bc-season-cell .wfc-input { padding: 6px 6px; text-align: center; font-size: .82rem; }
@media (max-width: 900px) { .bc-season-row { grid-template-columns: repeat(6, minmax(56px, 1fr)); } }
.bc-brand { border: 1px solid var(--panel-border); border-radius: 10px; padding: 8px 12px; margin: 0 0 8px; }
.bc-brand > summary { cursor: pointer; font-size: .9rem; padding: 4px 0; }
.bc-brand-count { margin-left: 6px; }
/* ── Orders — the purchase orders shops send you, planned per beat for a day (page-orders) ──
   The plan strip and its pills, the ONE plan-status chip (BC.planChip — one
   tone per derived status), the Not-on-any-van / per-beat cards, the key-in
   modal's lines editor, the sheet upload, the printable pack sheet. Money and
   status words come from beat-orders.js; nothing here invents a state. */
.bc-page-intro { margin-bottom: 8px; }
.bc-plan-strip { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 0 0 12px; }
.bc-plan-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: .78rem; background: rgba(255,255,255,.04); border: 1px solid var(--panel-border); color: var(--text-secondary); }
.bc-plan-pill-total { font-size: .84rem; color: var(--text-primary); background: rgba(99,102,241,.10); border-color: rgba(99,102,241,.30); }
.bc-plan-pill-warn { color: #fbbf24; background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.35); }
/* the plan-status chip: the owner's word for where an order is */
.bc-plan-chip { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .02em; line-height: 1.5; white-space: nowrap; background: rgba(148,163,184,.14); border: 1px solid rgba(148,163,184,.30); color: #cbd5e1; }
.bc-plan-chip-unassigned { background: rgba(244,63,94,.14); border-color: rgba(244,63,94,.45); color: #fda4af; }
.bc-plan-chip-assigned   { background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.40); color: #fbbf24; }
.bc-plan-chip-approved   { background: rgba(16,185,129,.14); border-color: rgba(16,185,129,.40); color: #6ee7b7; }
.bc-plan-chip-packed     { background: rgba(99,102,241,.14); border-color: rgba(99,102,241,.40); color: #c7d2fe; }
.bc-plan-chip-on_van     { background: rgba(99,102,241,.20); border-color: rgba(99,102,241,.50); color: #e0e7ff; }
.bc-plan-chip-out        { background: rgba(56,189,248,.14); border-color: rgba(56,189,248,.45); color: #7dd3fc; }
.bc-plan-chip-refused    { background: rgba(244,63,94,.14); border-color: rgba(244,63,94,.45); color: #fda4af; }
.bc-plan-chip-delivered  { background: rgba(16,185,129,.14); border-color: rgba(16,185,129,.40); color: #6ee7b7; }
.bc-plan-chip-unbilled   { background: rgba(244,63,94,.18); border-color: rgba(244,63,94,.55); color: #fecdd3; }
.bc-plan-chip-billed     { background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.40); color: #fbbf24; }
.bc-plan-chip-paid       { background: rgba(16,185,129,.20); border-color: rgba(16,185,129,.50); color: #a7f3d0; }
.bc-plan-chip-closed     { background: rgba(148,163,184,.10); border-color: rgba(148,163,184,.25); color: #94a3b8; }
.bc-plan-chip-disputed   { background: rgba(244,63,94,.14); border-color: rgba(244,63,94,.45); color: #fda4af; }
.bc-plan-chip-cancelled  { background: rgba(148,163,184,.08); border-color: rgba(148,163,184,.20); color: #94a3b8; text-decoration: line-through; }
.bc-plan-chip-none       { color: var(--text-muted); }
/* a row that needs a hand (stuck, or a beat to be named) */
.bc-table tr.bc-row-attn td:first-child { box-shadow: inset 3px 0 0 var(--accent-amber); }
.bc-table tr.bc-row-attn { background: rgba(245,158,11,.05); }
/* one card per beat */
.bc-plan-beat { margin-top: 4px; }
.bc-plan-beat .bc-section-head h3 strong { font-weight: 700; }
.bc-beat-sub { font-size: .82rem; color: var(--text-secondary); margin: 0 0 10px; }
.bc-carried { font-size: .82rem; line-height: 1.6; }
.bc-carried a { color: #fde68a; }
.bc-plan-quiet { font-size: .82rem; padding: 4px 2px; }
/* the Today column's orders cell and the open-trips 'put packed orders on' box */
.bc-orders-cell { white-space: nowrap; font-size: .82rem; }
.bc-dispatch-after { margin: 10px 0 4px; }
/* a shop on no beat in the key-in picker: listed, never disabled, said in amber */
.bc-pick-item.bc-pick-warn .bc-pick-hint { color: #fbbf24; }
/* the key-in modal's lines editor: product · qty · unit · ✕ */
.bc-lines-editor { border: 1px solid var(--panel-border); border-radius: 10px; padding: 8px 10px 6px; margin: 0 0 12px; background: rgba(255,255,255,.02); }
.bc-lines-head, .bc-lines-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px 110px 36px; gap: 8px; align-items: center; }
.bc-lines-head { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); padding: 0 0 6px; }
.bc-lines-row { padding: 3px 0; border-radius: 8px; }
.bc-lines-row .wfc-input { width: 100%; min-width: 0; }
.bc-lines-row.is-invalid { background: rgba(244,63,94,.08); }
.bc-lines-row.is-invalid .wfc-input { border-color: rgba(244,63,94,.6); }
.bc-lines-x { padding: 6px 8px; }
.bc-lines-foot { display: flex; align-items: center; gap: 12px; padding: 6px 0 2px; }
.bc-lines-add { font-size: .78rem; }
.bc-lines-err { display: block; min-height: 0; }
.bc-lines-err:empty { display: none; }
/* CREDIT_HOLD in the key-in modal: the sentence, and the owner's audited way past it */
.bc-credit-hold { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.bc-credit-override { display: flex; gap: 8px; align-items: center; }
.bc-credit-override .wfc-input { flex: 1 1 auto; width: auto; }
.bc-credit-override .wfc-input.is-invalid { border-color: rgba(244,63,94,.6); }
/* the sheet upload */
.bc-sheet-drop { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px dashed rgba(255,255,255,.22); border-radius: 10px; cursor: pointer; font-size: .86rem; color: var(--text-secondary); margin: 0 0 8px; }
.bc-sheet-drop:hover { border-color: rgba(99,102,241,.6); color: var(--text-primary); }
.bc-sheet-drop input[type=file] { font-size: .8rem; }
.bc-sheet-paste { width: 100%; font-family: var(--font-mono); font-size: .76rem; margin: 6px 0 4px; }
.bc-sheet-guide { margin-top: 10px; font-size: .82rem; color: var(--text-secondary); }
.bc-sheet-guide summary { cursor: pointer; }
.bc-sheet-guide ul { margin: 6px 0; padding-left: 18px; line-height: 1.6; }
.bc-sheet-result { margin: 8px 0; }
.bc-sheet-result .bc-table-wrap { max-height: 46vh; }
/* the approve batch's failures, each with its fix */
.bc-approve-fails { margin: 6px 0 0; padding-left: 18px; font-size: .82rem; line-height: 1.7; }
/* the order drawer's history */
.bc-timeline { margin: 4px 0 0; padding-left: 16px; font-size: .8rem; line-height: 1.7; }
/* the printable pack sheet: the godown's docket */
.bc-print { font-size: .86rem; }
.bc-print-head { font-size: 1rem; margin: 0 0 10px; }
.bc-print-order { padding: 8px 0; border-top: 1px solid var(--panel-border); }
.bc-print-order ul { margin: 4px 0 0; padding-left: 18px; }
.bc-printing .bc-print { color: #000; }
@media print {
  body > *:not(#bc-modal) { display: none !important; }
  #bc-modal .bc-modal:not(.bc-printing) { display: none !important; }
  .bc-printing { position: static !important; background: #fff !important; }
  .bc-printing .modal-box { position: static !important; max-height: none !important; box-shadow: none !important; background: #fff !important; border: 0 !important; transform: none !important; animation: none !important; }
  .bc-printing .bc-modal-actions, .bc-printing .bc-modal-x { display: none !important; }
  .bc-printing, .bc-printing * { color: #000 !important; }
  .bc-printing .bc-plan-chip { border-color: #000 !important; background: none !important; }
}
/* ── round ux (C-1): the Usage page and the Today strip ── */
/* the filter head: the same flex row Review draws inline, as a class */
.bc-usage-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding: 14px 16px; margin-bottom: 18px; }
/* four metric-cards (the kit's), one row on a laptop, two on a narrow screen */
.bc-usage-tiles { margin: 4px 0 8px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bc-usage-tiles .metric-card { padding: 14px 16px; }
.bc-usage-tiles .metric-val { font-size: 1.5rem; margin: 2px 0; }
.bc-usage-tiles .desc { font-size: .78rem; color: var(--text-secondary); }
/* a code or a word in a tile (the top error) — smaller than the figures beside it */
.bc-usage-tiles .bc-usage-word { font-size: 1.05rem; font-weight: 600; word-break: break-word; }
@media (max-width: 900px) { .bc-usage-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* the strip on Today: a section below the vans; the muted fallback is one line */
.bc-usage-strip { margin-top: 18px; }
div.bc-muted.bc-usage-strip { font-size: .8rem; padding: 6px 2px; }
/* one funnel table per role, side by side when the width allows */
.bc-usage-funnel, .bc-usage-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; align-items: start; }
.bc-usage-funnel-role { font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 6px; }
/* the person drawer's day: the clock in front of every row */
.bc-usage-tl-time { color: var(--text-muted); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .68rem; margin-right: 6px; }
/* ── round ux (C-2): maps — one loader (BC.map), three hosts ── */
/* a map host: the links fallback is inline text; the LIVE map needs a height or Google draws nothing */
.bc-map { position: relative; }
.bc-map.bc-map-live { height: 280px; border-radius: 12px; overflow: hidden; border: 1px solid var(--panel-border); margin: 8px 0; background: rgba(148, 163, 184, .08); }
.bc-map-small.bc-map-live, .bc-map-small .bc-map.bc-map-live { height: 180px; }
.bc-map-slot { margin: 6px 0; }
.bc-map-slot[hidden] { display: none; }
/* the link fallback — one BC.mapLink per pin, wrapped */
.bc-map-links { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .84rem; }
/* under the trip map: the ETA sentence and the legend */
.bc-map-eta { font-size: .84rem; margin: 6px 0 2px; }
.bc-map-eta-next { font-weight: 600; }
.bc-map-legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: .72rem; color: var(--text-muted); margin-top: 4px; }
.bc-map-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: middle; border: 1.5px solid #fff; }
.bc-map-dot-van, .bc-map-dot-shop { background: #6366f1; }
.bc-map-dot-done { background: #22c55e; }
.bc-map-dot-next { background: #f59e0b; }
.bc-map-dot-pending { background: #94a3b8; }
.bc-map-dot-proposed { background: #ec4899; }
/* the beat drawer's Map / Suggest order row, and the shop drawer's Accept / Keep */
.bc-map-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.bc-map-tools [aria-pressed="true"] { border-color: var(--accent-indigo); color: var(--accent-indigo); }
/* the proposal beside the current order; a changed row is tinted */
.bc-map-suggest:empty { display: none; }
.bc-map-suggest { margin: 8px 0; }
.bc-map-suggest tr.is-changed td { background: rgba(99, 102, 241, .08); }
/* D-31: the driver's proposal — amber, because a decision is owed */
.bc-map-pending { margin-top: 8px; padding: 8px 10px; border-radius: 10px; border: 1px solid #fbbf24; font-size: .84rem; }
.bc-map-pending .bc-map-tools { margin-bottom: 0; }
/* SP-9 seam 3: where the shop's own phone last was — one line under the Pin row */
.bc-map-seen { font-size: .84rem; margin: 4px 0 2px; }
.bc-map-dot-me { background: #0ea5e9; }
/* ── round ux (C-3): segments, contacts, the call list ── */
/* ONE chip for every role's segments (BC.segChip); the server's reason is its title */
.bc-seg { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .68rem; font-weight: 600; letter-spacing: .02em; line-height: 1.5; border: 1px solid var(--panel-border); color: var(--text-secondary); background: rgba(148, 163, 184, .10); white-space: nowrap; cursor: help; }
.bc-seg-ok { color: #34d399; border-color: rgba(52, 211, 153, .45); background: rgba(52, 211, 153, .10); }
.bc-seg-warn { color: #fbbf24; border-color: rgba(251, 191, 36, .45); background: rgba(251, 191, 36, .10); }
.bc-seg-bad { color: #fb7185; border-color: rgba(251, 113, 133, .45); background: rgba(251, 113, 133, .10); }
.bc-seg-info { color: var(--accent-indigo); border-color: rgba(99, 102, 241, .45); background: rgba(99, 102, 241, .10); }
.bc-seg-muted { color: var(--text-muted); }
/* the drawer card: the chip and its sentence on one row each */
.bc-seg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .84rem; }
.bc-seg-list li { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.bc-seg-reason { color: var(--text-secondary); }
.bc-seg-at { font-size: .72rem; }
/* D-25's flag on a Today row (a cash_variance driver, a response_time distributor) */
.bc-flag { display: inline-block; margin-left: 6px; font-size: .68rem; font-weight: 700; cursor: help; }
.bc-flag-bad { color: #fb7185; }
.bc-flag-warn { color: #fbbf24; }
.bc-flag-ok { color: #34d399; }
.bc-flag-info, .bc-flag-muted { color: var(--text-muted); }
/* tel: / wa.me beside a phone (the console draws raw phones already) */
.bc-contact-links { display: inline-flex; gap: 8px; margin-left: 8px; font-size: .78rem; }
.bc-contact-links a { color: var(--accent-indigo); text-decoration: none; }
.bc-contact-links a:hover { text-decoration: underline; }
.bc-contact-what { font-weight: 600; }
/* the Today call list: a section below the usage strip; the muted fallback is one line */
.bc-call-list { margin-top: 18px; }
div.bc-muted.bc-call-list { font-size: .8rem; padding: 6px 2px; }
.bc-call-list .bc-seg { margin: 1px 2px 1px 0; }
/* Scan a written order (C-4): the lines editor with a lead column — the
   written text and its tier chip before the product the office confirms. */
.bc-lines-editor--lead .bc-lines-head, .bc-lines-editor--lead .bc-lines-row { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) 96px 110px 36px; }
.bc-lines-lead { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: .82rem; }
.bc-cap-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
.bc-cap-source { color: var(--text-muted); font-size: .78rem; }
@media (max-width: 900px) { .bc-lines-editor--lead .bc-lines-head, .bc-lines-editor--lead .bc-lines-row { grid-template-columns: minmax(0, 1fr) 80px 96px 32px; } .bc-lines-editor--lead .bc-lines-head > span:first-child, .bc-lines-lead { grid-column: 1 / -1; } }
/* THE CREW PICKER (round rights) — who rides, and what each of them handles.
   One row per person on the vehicle's transport; the money column is a RADIO
   because exactly one person carries it, and the other two are checkboxes
   because they are not tied to each other. Narrow, centred columns so the
   ticks line up and the eye can run down "who has the invoice today". */
.bc-crew-pick { width: 100%; }
.bc-crew-pick th { font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; padding: 6px 8px; }
.bc-crew-pick th:not(:first-child), .bc-crew-pick td:not(:first-child) { width: 92px; }
.bc-crew-pick td { padding: 7px 8px; border-top: 1px solid var(--panel-border); vertical-align: top; }
.bc-crew-pick input[type="checkbox"], .bc-crew-pick input[type="radio"] { width: 17px; height: 17px; accent-color: #6366f1; cursor: pointer; }
.bc-crew-pick .bc-hint { margin-top: 2px; }


/* The morning's ladder on a Dispatch row: six rungs in the order the warehouse
   works them. Done is quiet, the NEXT one is the only thing that draws the eye,
   and the rest are there so nobody has to remember what comes after. */
.bc-pips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.bc-pip {
  font-size: 0.62rem;
  line-height: 1.6;
  letter-spacing: 0.02em;
  padding: 1px 7px;
  border-radius: 10px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.bc-pip.is-done {
  color: var(--accent-emerald, #34d399);
  background: rgba(52, 211, 153, 0.10);
  border-color: rgba(52, 211, 153, 0.28);
}
.bc-pip.is-now {
  color: var(--accent-amber, #fbbf24);
  background: rgba(251, 191, 36, 0.14);
  border-color: rgba(251, 191, 36, 0.45);
  font-weight: 700;
}
.bc-pip.is-later {
  color: var(--text-muted, #64748b);
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.07);
}
/* The reason under the next action — why this rung is not done yet. */
.bc-why {
  margin-top: 3px;
  max-width: 22ch;
}

/* ── end Field Sales & Beats console ── */