/* ==========================================================================
   👑 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;
}

.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  (src/public/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; }
}