/* ============================================
   RESTO AI — Internal Tool
   Brand system derived from Resto Experience Figma
   ============================================ */

/* Fonts match the Resto Experience marketing site (restoexperience-website):
   Inter for body, Onest for display / brand / headings. Swapped from the
   previous DM Sans + Inter Tight combo to keep the dashboard visually
   aligned with the public-facing brand. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Onest:wght@400;500;600;700;800&display=swap');

:root {
  /* Brand colors — from Figma Brand Lab */
  --brand-orange: #fb5f2c;
  --brand-orange-hover: #e54e1e;
  --brand-orange-light: rgba(251, 95, 44, 0.1);
  --brand-dark: #231f1f;
  --brand-brown: #9e6d40;

  /* Background (body-level gradient) — warm cream base with a subtle
     brand-orange glow. Kept intentionally soft so the dashboard feels
     warm but not "orange-washed". */
  --body-bg-color: #f7f1eb;
  --body-bg-gradient:
    radial-gradient(ellipse 85% 60% at 80% -10%, rgba(251, 100, 50, 0.16) 0%, rgba(248, 140, 90, 0.06) 45%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 100% 40%, rgba(251, 95, 44, 0.08) 0%, transparent 55%),
    linear-gradient(to bottom, rgba(235, 200, 170, 0.12) 0%, rgba(247, 241, 235, 0.0) 65%);

  /* Sidebar / shell panels — LIGHT MODE: warm cream (not pure white) so
     the dashboard reads as warmer and less "cold SaaS". */
  --sidebar-bg: #fdfaf5;
  --sidebar-bg-hover: rgba(251, 95, 44, 0.06);   /* orange-tinted hover */
  --sidebar-text: #7a6f66;                        /* warmer muted text */
  --sidebar-text-active: #1a1a1a;
  --sidebar-width: 260px;
  --sidebar-border: rgba(158, 109, 64, 0.14);     /* warm brown tint */
  --sidebar-shadow: 0 2px 24px rgba(160, 80, 30, 0.08), 0 0 0 1px rgba(158, 109, 64, 0.06);
  --sidebar-logout-border: rgba(158, 109, 64, 0.24);
  /* Active state: orange-on-orange (mirrors dark mode), feels branded
     instead of the previous black-on-black which felt cold. */
  --sidebar-item-active-bg: rgba(251, 95, 44, 0.12);
  --sidebar-item-active-color: var(--brand-orange);
  --sidebar-user-bg: rgba(158, 109, 64, 0.06);

  /* Main area — warmer so the connected shell feels unified. */
  --main-bg: #f7f1eb;
  --card-bg: #ffffff;
  --card-border: rgba(158, 109, 64, 0.12);
  --card-shadow: 0 2px 8px rgba(160, 80, 30, 0.10), 0 0 0 1px rgba(158, 109, 64, 0.05);
  --card-shadow-hover: 0 8px 28px rgba(160, 80, 30, 0.16);

  /* Text */
  --text-primary: #1a1a1a;
  --text-secondary: #6b6b6b;
  --text-muted: #999999;
  --text-inverse: #ffffff;

  /* Output */
  --output-bg: #ffffff;
  --output-font: 'DM Sans', sans-serif;

  /* Semantic */
  --accent: var(--brand-orange);
  --accent-hover: var(--brand-orange-hover);
  --success: #22c55e;
  --success-bg: rgba(34, 197, 94, 0.1);
  --error: #ef4444;
  --error-bg: rgba(239, 68, 68, 0.1);
  --warning: #f59e0b;

  /* Typography */
  --font-brand: 'Onest', 'Inter', sans-serif;
  --font-body: 'Inter', 'Onest', sans-serif;
  --font-display: 'Onest', 'Inter', sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', monospace;

  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 32px;

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

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  /* ── User modal — light mode ── */
  --um-input-bg: #ffffff;
  --um-input-border: rgba(0, 0, 0, 0.14);
  --um-input-color: #1a1a1a;
  --um-input-placeholder: #aaaaaa;
  --um-pwd-icon-bg: rgba(0, 0, 0, 0.04);
  --um-pwd-icon-border: rgba(0, 0, 0, 0.12);
  --um-pwd-icon-color: #888888;
  --um-role-card-border: rgba(0, 0, 0, 0.12);
  --um-role-card-bg: rgba(0, 0, 0, 0.025);
  --um-role-card-text: #1a1a1a;
  --um-role-card-sub: #6b6b6b;
  --um-role-label-color: #6b6b6b;
  --um-select-bg: #ffffff;
  --um-select-color: #1a1a1a;
  --um-select-arrow: rgba(0,0,0,0.45);
  --um-checkbox-label: #3a3a3a;
  --um-wildcard-bg: rgba(251, 95, 44, 0.05);
  --um-wildcard-border: rgba(251, 95, 44, 0.25);
  --um-wildcard-color: #1a1a1a;
  --um-squad-border: rgba(0, 0, 0, 0.08);
  --um-squad-bg: rgba(0, 0, 0, 0.02);
  --um-squad-label: #1a1a1a;
  --um-client-color: #3a3a3a;
  --um-client-hover-bg: rgba(0, 0, 0, 0.04);
  --um-client-hover-border: rgba(0, 0, 0, 0.1);
  --um-coming-soon-bg: rgba(0, 0, 0, 0.06);
  --um-cancel-hover-bg: rgba(0, 0, 0, 0.06);
  --um-cancel-hover-color: #1a1a1a;
  --um-cancel-hover-border: rgba(0, 0, 0, 0.2);
}

/* ============================================
   RESET & BASE
   ============================================ */

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

html, body {
  height: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-primary);
  background-color: var(--body-bg-color);
  background-image: var(--body-bg-gradient);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   AUTH SCREEN
   ============================================ */

.auth-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: var(--brand-dark);
  position: relative;
  overflow: hidden;
}

.auth-screen::before,
.auth-screen::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.35;
  pointer-events: none;
}

.auth-screen::before {
  width: 500px;
  height: 500px;
  background: var(--brand-orange);
  top: -15%;
  right: -10%;
  animation: blob-float 8s ease-in-out infinite alternate;
}

.auth-screen::after {
  width: 400px;
  height: 400px;
  background: #9e6d40;
  bottom: -10%;
  left: -5%;
  animation: blob-float 10s ease-in-out infinite alternate-reverse;
}

.auth-blob-3 {
  position: absolute;
  width: 350px;
  height: 350px;
  background: #e8a87c;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: blob-float 12s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes blob-float {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, -20px) scale(1.05); }
  100% { transform: translate(-20px, 15px) scale(0.95); }
}

.auth-box {
  background: rgba(26, 26, 26, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-xl);
  padding: var(--sp-10);
  width: 380px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.auth-logo-img {
  height: 40px;
  width: auto;
  margin-bottom: var(--sp-3);
}

.auth-box .subtitle {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--sp-8);
}

.auth-input {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-3);
  border: 1px solid #333;
  border-radius: var(--radius-md);
  background: #2a2a2a;
  color: var(--text-inverse);
  font-family: var(--font-body);
  font-size: var(--text-base);
  outline: none;
  transition: border-color var(--transition-fast);
}

.auth-input:focus {
  border-color: var(--brand-orange);
}

.auth-input::placeholder {
  color: var(--text-muted);
}

.auth-btn {
  width: 100%;
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--brand-orange);
  color: var(--text-inverse);
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: var(--text-base);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.auth-btn:hover {
  background: var(--brand-orange-hover);
}

.auth-error {
  color: var(--error);
  font-size: var(--text-sm);
  margin-top: var(--sp-3);
  display: none;
}

.auth-error.visible {
  display: block;
}

/* ============================================
   APP LAYOUT
   ============================================ */

.app {
  display: none;
  height: 100vh;
}

/*
 * Three-region layout (Semrush / Linear / Slack pattern):
 *
 *   ┌──────────────────────────────────────────────┐
 *   │  top-header (56px, full width)               │
 *   ├──────┬──────────────┬────────────────────────┤
 *   │ rail │ secondary-   │                        │
 *   │(~84) │ sidebar      │   main content         │
 *   │      │ (~240)       │                        │
 *   │      │              │                        │
 *   └──────┴──────────────┴────────────────────────┘
 *
 * Grid tracks rather than nested flex so the three sidebars never have
 * to fight each other for height. Rail + secondary scroll independently
 * when they overflow.
 */
.app.visible {
  /*
   * Unified canvas layout (Semrush / Linear style): header spans full
   * width, rail + secondary + main share borders with no gaps. Panels
   * are connected — no floating cards, no rounded corners per-panel.
   * The shell itself stays transparent so the body's warm radial
   * gradient shows through the main area — header / rail / secondary
   * each paint their own warm background.
   */
  display: grid;
  grid-template-rows: 56px 1fr;
  grid-template-columns: 84px 240px 1fr;
  grid-template-areas:
    "header header header"
    "rail   secondary main";
  padding: 0;
  gap: 0;
  background: transparent;
}
.top-header   { grid-area: header; }
.rail         { grid-area: rail; }
.secondary-sidebar { grid-area: secondary; }
.main         { grid-area: main; }

/* Collapsed state: secondary column hidden, main expands to fill. */
.app.visible.secondary-collapsed {
  grid-template-columns: 84px 0 1fr;
}
.app.visible.secondary-collapsed .secondary-sidebar { display: none; }

/* ── Top header ────────────────────────────────────────────────────── */
.top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: var(--sidebar-bg);
  border-bottom: 1px solid var(--sidebar-border);
}
.top-header-left { display: flex; align-items: center; gap: 12px; }
.top-header-logo { height: 28px; width: auto; }
.top-header-right { display: flex; align-items: center; gap: 8px; }

.header-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.header-icon-btn:hover {
  background: var(--sidebar-bg-hover);
  color: var(--text-primary);
  border-color: var(--card-border);
}

/* User avatar button + dropdown */
.user-menu-wrap { position: relative; }
.user-avatar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand-orange);
  color: white;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.3px;
  border: none;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.user-avatar-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(251,95,44,0.3); }
.user-avatar-btn[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--brand-orange-light); }

.user-menu-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 4px;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}
.user-menu-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s;
}
.user-menu-header {
  padding: 10px 12px 10px;
  border-bottom: 1px solid var(--card-border);
  margin-bottom: 4px;
}
.user-menu-name { font-size: 0.88rem; font-weight: 600; color: var(--text-primary); }
.user-menu-role { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.3px; }
.user-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  background: none;
  border: none;
  font-size: 0.85rem;
  color: var(--text-primary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  text-align: left;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.user-menu-item:hover { background: var(--sidebar-bg-hover); }
.user-menu-item-danger { color: #ef4444; }
.user-menu-item-danger:hover { background: rgba(239,68,68,0.08); color: #ef4444; }

/* ── Icon rail (primary nav) ───────────────────────────────────────── */
.rail {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  padding: 12px 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--sidebar-border) transparent;
}
.rail::-webkit-scrollbar { width: 6px; }
.rail::-webkit-scrollbar-track { background: transparent; }
.rail::-webkit-scrollbar-thumb { background: var(--sidebar-border); border-radius: 3px; }

.rail-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 6px;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.rail-item:hover {
  background: var(--sidebar-bg-hover);
  color: var(--text-primary);
}
.rail-item.active {
  background: var(--sidebar-item-active-bg);
  color: var(--sidebar-item-active-color);
  /* Subtle glow on active rail icon — reinforces brand presence. */
  box-shadow: inset 0 0 0 1px rgba(251, 95, 44, 0.18);
}
.rail-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  opacity: 0.85;
}
.rail-item.active .rail-icon { opacity: 1; }
.rail-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-align: center;
  line-height: 1.1;
}
.rail-badge {
  position: absolute;
  top: 4px;
  right: 6px;
  background: var(--brand-orange);
  color: white;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 16px;
  text-align: center;
  line-height: 1;
}

/* SEO in-page tab nav is replaced by sidebar items — hide the legacy
   tab bar on desktop but keep it on mobile where the sidebar isn't
   available. */
.seo-tab-nav { display: none; }
@media (max-width: 640px) { .seo-tab-nav { display: flex; } }

/* ── Secondary sidebar ─────────────────────────────────────────────── */
.secondary-sidebar {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  padding: 16px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--sidebar-border) transparent;
}
.secondary-sidebar::-webkit-scrollbar { width: 6px; }
.secondary-sidebar::-webkit-scrollbar-track { background: transparent; }
.secondary-sidebar::-webkit-scrollbar-thumb { background: var(--sidebar-border); border-radius: 3px; }

.secondary-panel { display: none; flex-direction: column; gap: 2px; }
.secondary-panel.active { display: flex; }

.secondary-header {
  font-family: var(--font-brand);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  padding: 4px 8px 12px;
  border-bottom: 1px solid var(--sidebar-border);
  margin-bottom: 8px;
}

/* ── Shell toggle button (chevron) ────────────────────────────────────
   Floats on the right edge of the secondary sidebar (or the rail when
   secondary is collapsed). Clicking it toggles the secondary sidebar
   open/closed — mirror of clicking the active rail icon. */
.shell-toggle-btn {
  position: absolute;
  /* 84px rail + 240px secondary = 324px. Button sits at the edge (-14px
     pulls half the button into the main area so it reads as floating). */
  left: calc(84px + 240px - 14px);
  top: 88px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--card-bg);
  border: 1px solid var(--sidebar-border);
  color: var(--text-muted);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 80;
  transition: left 0.2s ease, transform 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.app.visible .shell-toggle-btn { display: flex; }
.app.visible.secondary-collapsed .shell-toggle-btn {
  /* With secondary hidden, anchor the button to the rail edge. */
  left: calc(84px - 14px);
}
.app.visible.secondary-collapsed .shell-toggle-btn svg {
  transform: rotate(180deg);  /* chevron points right (open) when collapsed */
}
.shell-toggle-btn:hover {
  color: var(--brand-orange);
  background: var(--sidebar-bg-hover);
  transform: scale(1.08);
}
@media (max-width: 1024px) {
  .shell-toggle-btn { left: calc(76px + 210px - 14px); }
  .app.visible.secondary-collapsed .shell-toggle-btn { left: calc(76px - 14px); }
}
@media (max-width: 768px) {
  .shell-toggle-btn { left: calc(72px + 200px - 14px); }
  .app.visible.secondary-collapsed .shell-toggle-btn { left: calc(72px - 14px); }
}
@media (max-width: 640px) {
  .app.visible .shell-toggle-btn { display: none; }
}

/* ── Rail hover preview popover ──────────────────────────────────────
   Shown when the user hovers a rail icon. Anchored to the right of the
   rail, displays the items inside that group so users can peek without
   switching. Hidden when the popover loses pointer focus. */
.rail-preview {
  position: absolute;
  left: 84px;  /* right edge of rail */
  top: 0;      /* set by JS per-hover */
  min-width: 220px;
  max-width: 260px;
  background: var(--sidebar-bg);
  border: 1px solid var(--sidebar-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 10px;
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
  pointer-events: none;
}
.rail-preview.open {
  opacity: 1;
  visibility: visible;
  transform: translateX(8px);
  pointer-events: auto;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s;
}
.rail-preview-header {
  font-family: var(--font-brand);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 4px 8px 8px;
  border-bottom: 1px solid var(--sidebar-border);
  margin-bottom: 6px;
}
.rail-preview .sidebar-item {
  padding: 8px 10px;
  font-size: 0.88rem;
}
@media (max-width: 1024px) { .rail-preview { left: 76px; } }
@media (max-width: 768px)  { .rail-preview { left: 72px; } }
@media (max-width: 640px)  { .rail-preview { display: none; } }

/* ============================================
   SIDEBAR
   ============================================ */

.sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  height: 100%;
  /* Outer sidebar no longer scrolls — only the .sidebar-scroll middle does,
     so the logo (header) and user/theme/logout (footer) stay anchored. */
  overflow: hidden;
  border-radius: var(--radius-xl);
  box-shadow: var(--sidebar-shadow);
}

.sidebar-header {
  padding: var(--sp-6);
  border-bottom: 1px solid var(--sidebar-border);
  flex-shrink: 0;  /* keep logo pinned at top */
}

.sidebar-scroll {
  /* The only scrollable region of the sidebar — sections live here. */
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;  /* needed for flex children with overflow to actually clip */
  /* Subtle scrollbar styling — visible but not loud. */
  scrollbar-width: thin;
  scrollbar-color: var(--sidebar-border) transparent;
}
.sidebar-scroll::-webkit-scrollbar { width: 8px; }
.sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
.sidebar-scroll::-webkit-scrollbar-thumb {
  background: var(--sidebar-border);
  border-radius: 4px;
}
.sidebar-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

.sidebar-logo-img {
  height: 32px;
  width: auto;
}

.sidebar-tagline {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--sp-1);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.sidebar-section {
  padding: var(--sp-4) var(--sp-4) var(--sp-2);
}
.sidebar-section + .sidebar-section { padding-top: var(--sp-2); }

/* Section title is now a button that toggles collapse. Reset button
   styles, keep the uppercase-muted look, add chevron + pointer. */
.sidebar-section-title {
  font-family: var(--font-brand);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px var(--sp-2);
  margin-bottom: var(--sp-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.sidebar-section-title:hover {
  color: var(--text-primary);
  background: var(--sidebar-bg-hover);
}
.sidebar-chev {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  opacity: 0.6;
  transition: transform 0.18s ease;
}
/* Collapsed state: rotate chevron, hide all children except the title. */
.sidebar-section.collapsed .sidebar-chev { transform: rotate(-90deg); }
.sidebar-section.collapsed > *:not(.sidebar-section-title) { display: none; }

.sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3);
  border-radius: var(--radius-sm);
  color: var(--sidebar-text);
  font-size: var(--text-base);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  /* Room for the active left accent bar without shifting layout. */
  position: relative;
  padding-left: calc(var(--sp-3) + 3px);
}

.sidebar-item:hover {
  background: var(--sidebar-bg-hover);
  color: var(--sidebar-text-active);
}

.sidebar-item.active {
  background: var(--sidebar-item-active-bg);
  color: var(--sidebar-item-active-color);
}
/* Brand-orange left accent on the active secondary-sidebar item — makes
   the active page easy to spot at a glance and reinforces the brand
   color across the shell. */
.sidebar-item.active::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: var(--brand-orange);
  border-radius: 3px;
}

.sidebar-item .icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.75;
}

.sidebar-item.active .icon,
.sidebar-item:hover .icon {
  opacity: 1;
}

/* Legacy — kept for any old code still rendering it, but no longer
   required since .sidebar-scroll now takes the growing space. */
.sidebar-spacer { flex: 1; }

.sidebar-footer {
  padding: var(--sp-4) var(--sp-4);
  border-top: 1px solid var(--sidebar-border);
  flex-shrink: 0;  /* pinned at bottom */
  background: var(--sidebar-bg);
}

.sidebar-logout {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  background: none;
  border: 1px solid var(--sidebar-logout-border);
  border-radius: var(--radius-sm);
  outline: none;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-bottom: var(--sp-3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
}

.sidebar-logout:hover {
  border-color: var(--brand-orange);
  color: var(--brand-orange);
}

.sidebar-copyright {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* ============================================
   MAIN CONTENT
   ============================================ */

.main {
  overflow-y: auto;
  padding: var(--sp-8);
  background: var(--bg-primary, transparent);
  /* No border-radius — the whole shell is one connected canvas, and the
     main area shares its edges with the surrounding panels. */
}

.main-header {
  margin-bottom: var(--sp-8);
}

.main-header h1 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--text-primary);
}

.main-header p {
  color: var(--text-secondary);
  margin-top: var(--sp-1);
  font-size: var(--text-md);
}

/* ============================================
   CARDS GRID
   ============================================ */

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-5);
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  cursor: pointer;
  transition: all var(--transition-base);
  box-shadow: var(--card-shadow);
}

.card:hover {
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-2px);
  border-color: var(--brand-orange);
}

.card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--brand-orange-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: var(--sp-4);
  flex-shrink: 0;
}
.card-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--brand-orange);
  flex-shrink: 0;
}

/* Coming-soon action buttons */
.btn-coming-soon {
  opacity: 0.55;
  cursor: not-allowed;
}
.btn-coming-soon .coming-soon-badge {
  font-size: 0.65rem;
  font-weight: 600;
  background: var(--text-muted);
  color: var(--card-bg);
  border-radius: 4px;
  padding: 1px 4px;
  margin-left: 5px;
  letter-spacing: .03em;
  vertical-align: middle;
}

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

.card-title {
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: var(--text-lg);
  color: var(--text-primary);
  margin-bottom: var(--sp-2);
}

.card-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ============================================
   WIZARD / MODAL
   ============================================ */

.wizard-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

.wizard-overlay.visible {
  display: flex;
}

.wizard {
  background: var(--card-bg);
  border-radius: var(--radius-xl);
  width: 640px;
  max-width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

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

.wizard-title {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: var(--text-xl);
}

.wizard-close {
  background: none;
  border: none;
  font-size: 20px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: var(--sp-1);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast);
}

.wizard-close:hover {
  color: var(--text-primary);
}

/* Progress bar */
.wizard-progress {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-6);
  background: var(--main-bg);
}

.wizard-progress-step {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--card-border);
  transition: background var(--transition-base);
}

.wizard-progress-step.active {
  background: var(--brand-orange);
}

.wizard-progress-step.completed {
  background: var(--success);
}

/* Wizard body */
.wizard-body {
  padding: var(--sp-6);
}

.wizard-step {
  display: none;
}

.wizard-step.active {
  display: block;
}

.wizard-step-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--brand-orange);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--sp-2);
}

.wizard-step-title {
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: var(--text-lg);
  margin-bottom: var(--sp-5);
}

/* Form elements */
.form-group {
  margin-bottom: var(--sp-5);
}

.form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: var(--sp-2);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-primary);
  background: var(--card-bg);
  outline: none;
  transition: border-color var(--transition-fast);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--brand-orange);
}

.form-textarea {
  min-height: 100px;
  resize: vertical;
  line-height: 1.6;
}

.form-hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--sp-1);
}

/* Image upload field */
.image-upload-area {
  border: 1.5px dashed var(--card-border);
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  transition: border-color var(--transition-fast);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.image-upload-area:hover { border-color: var(--brand-orange); }
.image-upload-label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--text-muted);
  user-select: none;
}
.image-upload-area:hover .image-upload-label { color: var(--text-primary); }
.image-upload-preview { margin-left: auto; }

/* Multiselect chips */
.multiselect-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.multiselect-option {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--card-border);
  border-radius: 100px;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  user-select: none;
}

.multiselect-option:hover {
  border-color: var(--brand-orange);
}

.multiselect-option.selected {
  border-color: var(--brand-orange);
  background: var(--brand-orange-light);
  color: var(--brand-orange);
  font-weight: 500;
}

.multiselect-option input[type="checkbox"] {
  display: none;
}

/* ── Squad group collapsible ── */
.squad-group {
  margin-bottom: var(--sp-2);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--card-bg);
}

.squad-group-header {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 12px 16px;
  border: none;
  background: var(--main-bg);
  cursor: pointer;
  font-family: var(--font-body);
  gap: 8px;
  -webkit-tap-highlight-color: transparent;
  transition: background 150ms ease;
}
.squad-group-header:hover { background: var(--sidebar-bg-hover); }

.squad-group-name {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text-primary);
  flex: 1;
  text-align: left;
}

.squad-group-count {
  font-size: var(--text-sm);
  color: var(--text-muted);
  background: var(--card-border);
  border-radius: 20px;
  padding: 1px 8px;
  font-weight: 500;
}

.squad-group-chevron {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform 200ms ease;
}

/* Clients list — hidden by default, shown when .open */
.squad-group-clients {
  display: none;
  padding: 8px;
  gap: 0;
}
.squad-group.open .squad-group-clients { display: block; }
.squad-group.open .squad-group-chevron { transform: rotate(180deg); }

/* Client selector */
.squad-group-clients .client-option:last-child { margin-bottom: 0; }

.client-option {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-bottom: var(--sp-2);
}

.client-option:hover {
  border-color: var(--brand-orange);
  background: var(--brand-orange-light);
}

.client-option.selected {
  border-color: var(--brand-orange);
  background: var(--brand-orange-light);
}

.client-option-name {
  font-weight: 600;
  font-size: var(--text-md);
}

.client-option-type {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.client-option-unconfigured {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 4px;
  opacity: 0.75;
}
.client-option.unconfigured {
  border-style: dashed;
  opacity: 0.8;
}

/* Inline context dots inside selected client card */
.client-option-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}

.client-option-ctx {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(0,0,0,0.07);
}

.client-option-ctx-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.client-option-ctx-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.ctx-dot-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.ctx-dot-wrap .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d1d5db;
  flex-shrink: 0;
  transition: background 200ms ease;
}

.ctx-dot-wrap .dot.loaded  { background: var(--success); }
.ctx-dot-wrap .dot.error   { background: var(--error); }

/* Radio card selector (e.g. strategy mode) */
.radio-cards-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.radio-card-option {
  display: block;
  cursor: pointer;
}

.radio-card-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.radio-card-inner {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.radio-card-option:hover .radio-card-inner {
  border-color: var(--brand-orange);
}

.radio-card-option.selected .radio-card-inner {
  border-color: var(--brand-orange);
  background: var(--brand-orange-light);
}

.radio-card-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--card-border);
  margin-top: 2px;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.radio-card-option.selected .radio-card-dot {
  border-color: var(--brand-orange);
  background: var(--brand-orange);
  box-shadow: inset 0 0 0 3px var(--card-bg);
}

.radio-card-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.radio-card-text strong {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.radio-card-text span {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Ticket selector */
.ticket-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-bottom: var(--sp-2);
}

.ticket-item:hover {
  border-color: var(--brand-orange);
}

.ticket-item.selected {
  border-color: var(--brand-orange);
  background: var(--brand-orange-light);
}

.ticket-radio {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--card-border);
  margin-top: 2px;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.ticket-item.selected .ticket-radio {
  border-color: var(--brand-orange);
  background: var(--brand-orange);
  box-shadow: inset 0 0 0 3px var(--card-bg);
}

.ticket-title {
  font-weight: 500;
  font-size: var(--text-sm);
}

.ticket-meta {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 2px;
}

.ticket-status-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
  white-space: nowrap;
  background: var(--card-border);
  color: var(--text-muted);
}
.ticket-status-to-do          { background: #e8e8e8; color: #555; }
.ticket-status-in-progress     { background: #dbeafe; color: #1d4ed8; }
.ticket-status-pending-feedback { background: #fef3c7; color: #92400e; }
.ticket-status-approved        { background: #dcfce7; color: #166534; }

/* Wizard footer */
.wizard-footer {
  display: flex;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--card-border);
}

.btn {
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--radius-md);
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: var(--text-sm);
  cursor: pointer;
  border: none;
  transition: all var(--transition-fast);
}

.btn-secondary {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--card-border);
}

.btn-secondary:hover {
  background: var(--main-bg);
  color: var(--text-primary);
}

.btn-primary {
  background: var(--brand-orange);
  color: var(--text-inverse);
}

.btn-primary:hover {
  background: var(--brand-orange-hover);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================
   OUTPUT PANEL
   ============================================ */

.output-panel {
  display: none;
}

.output-panel.visible {
  display: block;
}

.output-topbar {
  margin-bottom: var(--sp-5);
}

.output-back {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: none;
  border: none;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  cursor: pointer;
  padding: var(--sp-2) 0;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast);
}

.output-back:hover {
  color: var(--text-primary);
}

.output-header-card {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
}

.output-title-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-5);
  background: var(--brand-orange);
  color: var(--text-inverse);
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: var(--text-md);
  border-radius: 100px;
  letter-spacing: 0.2px;
}

.output-meta {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.output-tag {
  font-size: var(--text-xs);
  padding: var(--sp-1) var(--sp-3);
  border-radius: 100px;
  background: var(--brand-orange-light);
  color: var(--brand-orange);
  font-weight: 600;
  font-family: var(--font-brand);
}

.output-content {
  background: var(--output-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  font-family: var(--output-font);
  font-size: var(--text-md);
  line-height: 1.75;
  white-space: pre-wrap;
  word-wrap: break-word;
  min-height: 200px;
}

.output-content.is-markdown {
  white-space: normal;
}

.output-content[contenteditable="true"] {
  outline: none;
  border-color: var(--brand-orange);
}

/* ─── Markdown rendered content ─────────────────── */
.md-content { font-family: var(--font-brand); }
.md-content h1 { font-size: 1.25rem; font-weight: 700; margin: 1.5rem 0 0.5rem; color: var(--text-primary); border-bottom: 2px solid var(--card-border); padding-bottom: 0.4rem; }
.md-content h2 { font-size: 1.05rem; font-weight: 600; margin: 1.25rem 0 0.4rem; color: var(--text-primary); }
.md-content h3 { font-size: 0.95rem; font-weight: 600; margin: 1rem 0 0.3rem; color: var(--text-secondary); }
.md-content p { margin: 0.4rem 0; line-height: 1.75; }
.md-content hr { border: none; border-top: 1px solid var(--card-border); margin: 1.25rem 0; }
.md-content strong { font-weight: 600; color: var(--text-primary); }
.md-content em { font-style: italic; }
.md-content blockquote { border-left: 3px solid var(--brand-orange); padding: 0.6rem 1rem; background: var(--brand-orange-light); border-radius: 0 6px 6px 0; margin: 0.75rem 0; font-size: 0.9rem; color: var(--text-secondary); }
.md-content ul { padding-left: 1.25rem; margin: 0.5rem 0; }
.md-content li { margin: 0.25rem 0; line-height: 1.6; }
.md-content li.md-check-item { list-style: none; margin-left: -0.5rem; }
.md-content .md-checkbox { font-size: 1rem; margin-right: 0.4rem; color: var(--text-muted); }
.md-content .md-checkbox.checked { color: var(--success); }

/* Proposal / Calendar table */
.md-table { width: 100%; border-collapse: collapse; margin: 0.75rem 0; font-size: 0.875rem; }
.md-table th { background: var(--brand-dark); color: #fff; padding: 0.5rem 0.75rem; text-align: left; font-weight: 600; }
.md-table td { padding: 0.45rem 0.75rem; border-bottom: 1px solid var(--card-border); vertical-align: top; }
.md-table tr:nth-child(even) td { background: #fafafa; }
.md-table tr:hover td { background: var(--brand-orange-light); }

/* AI Edit bar */
.ai-edit-bar {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  background: var(--main-bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--brand-orange);
  align-items: center;
}

.ai-edit-input {
  flex: 1;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-primary);
  background: var(--card-bg);
  outline: none;
  transition: border-color var(--transition-fast);
}

.ai-edit-input:focus {
  border-color: var(--brand-orange);
}

.ai-edit-submit {
  flex-shrink: 0;
}

.output-actions-card {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  padding: var(--sp-3);
  background: var(--main-bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--card-border);
  flex-wrap: wrap;
}

/* ── SEO Actionables Panel ───────────────────────────────────────────────── */
#actionablesPanel { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-5); }
.act-section { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-md); overflow: hidden; }
.act-section-header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-4); background: var(--main-bg); border-bottom: 1px solid var(--card-border); }
.act-section-title { display: flex; align-items: center; gap: var(--sp-2); font-weight: 600; font-size: 0.875rem; color: var(--text-primary); }
.act-badge { background: var(--accent); color: #fff; font-size: 0.65rem; font-weight: 700; padding: 1px 6px; border-radius: 20px; }
.act-select-all { display: flex; align-items: center; gap: var(--sp-1); font-size: 0.75rem; color: var(--text-secondary); cursor: pointer; user-select: none; }
.act-list { max-height: 480px; overflow-y: auto; }
.act-item-wrap { border-bottom: 1px solid var(--card-border); }
.act-item-wrap:last-child { border-bottom: none; }
.act-item { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); transition: background 0.15s; border-bottom: none; }
.act-item:hover { background: var(--main-bg); }
.act-item input[type="checkbox"] { margin-top: 2px; accent-color: var(--accent); flex-shrink: 0; }
.act-item-body { flex: 1; min-width: 0; }
.act-item-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); margin-bottom: 2px; }
.act-item-title { font-size: 0.82rem; font-weight: 600; color: var(--text-primary); }
.act-expand-btn { flex-shrink: 0; font-size: 0.68rem; color: var(--accent); background: rgba(251,95,44,0.08); border: 1px solid rgba(251,95,44,0.2); border-radius: 4px; padding: 2px 7px; cursor: pointer; white-space: nowrap; transition: background 0.15s; }
.act-expand-btn:hover { background: rgba(251,95,44,0.15); }
.act-item-desc { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.45; }

/* Expandable detail panel */
.act-detail-collapsed { display: none; padding: 0 var(--sp-4) var(--sp-3) calc(var(--sp-4) + var(--sp-3) + 16px); }
.act-detail-collapsed.act-detail-open { display: block; }
.act-detail-panel { background: var(--main-bg); border: 1px solid var(--card-border); border-radius: 6px; overflow: hidden; }
.act-detail-row { display: grid; grid-template-columns: 110px 1fr; gap: var(--sp-2); align-items: baseline; padding: 6px 10px; border-bottom: 1px solid var(--card-border); font-size: 0.73rem; }
.act-detail-row:last-child { border-bottom: none; }
.act-detail-row--full { grid-template-columns: 1fr; }
.act-detail-label { font-weight: 600; color: var(--text-muted); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; }
.act-detail-val { color: var(--text-primary); line-height: 1.4; }
.act-detail-slug { font-family: monospace; font-size: 0.78rem; color: var(--accent); font-weight: 600; }
.act-detail-mono { font-family: monospace; font-size: 0.72rem; color: var(--text-secondary); word-break: break-all; }
.act-detail-current { color: var(--text-muted); font-style: italic; }
.act-type-badge { display: inline-block; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; background: rgba(251,95,44,0.1); color: var(--accent); }
.act-detail-code { margin: var(--sp-2) 0 0; font-size: 0.68rem; font-family: monospace; background: #1a1a1a; color: #d4d4d4; padding: var(--sp-3); border-radius: 4px; overflow-x: auto; white-space: pre; max-height: 240px; overflow-y: auto; line-height: 1.5; }
.act-item-meta { display: flex; gap: var(--sp-2); margin-top: 4px; }
.act-priority { font-size: 0.65rem; font-weight: 700; padding: 1px 6px; border-radius: 4px; text-transform: uppercase; }
.act-priority-critical { background: rgba(239,68,68,0.12); color: #ef4444; }
.act-priority-high     { background: rgba(251,95,44,0.12); color: var(--accent); }
.act-priority-medium   { background: rgba(245,158,11,0.12); color: #f59e0b; }
.act-priority-low      { background: rgba(107,107,107,0.1); color: var(--text-muted); }
.act-effort { font-size: 0.65rem; color: var(--text-muted); padding: 1px 6px; background: var(--main-bg); border-radius: 4px; }
.act-footer { padding: var(--sp-3) var(--sp-4); background: var(--main-bg); border-top: 1px solid var(--card-border); display: flex; justify-content: flex-end; }
.act-empty { padding: var(--sp-4); text-align: center; color: var(--text-muted); font-size: 0.8rem; }

/* ── Pre-flight context indicator (top of wizard form step) ────────── */
.pf-context {
  margin: 0 0 var(--sp-4) 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--main-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
}
.pf-context-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  font-size: 0.8rem;
  color: var(--text-secondary);
}
.pf-context-header svg { color: var(--accent); flex-shrink: 0; }
.pf-context-header strong { color: var(--text-primary); font-weight: 600; }
.pf-context-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 2px var(--sp-4);
}
.pf-context-row {
  display: grid;
  grid-template-columns: 12px 110px 1fr;
  gap: var(--sp-2);
  align-items: baseline;
  padding: 3px 0;
  font-size: 0.75rem;
}
.pf-context-icon {
  font-size: 9px;
  line-height: 1;
  text-align: center;
}
.pf-ok .pf-context-icon    { color: var(--success); }
.pf-thin .pf-context-icon  { color: var(--text-muted); }
.pf-context-label {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.75rem;
}
.pf-ok .pf-context-label   { color: var(--text-primary); }
.pf-thin .pf-context-label { color: var(--text-muted); }
.pf-context-detail {
  color: var(--text-secondary);
  font-size: 0.72rem;
}
.pf-thin .pf-context-detail { color: var(--text-muted); }

/* ── "Why this output?" context accountability panel ───────────────── */
.ctx-panel {
  margin: 0 0 var(--sp-4) 0;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.ctx-panel-details { width: 100%; }
.ctx-panel-summary {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  user-select: none;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  list-style: none;
}
.ctx-panel-summary::-webkit-details-marker { display: none; }
.ctx-panel-summary:hover { color: var(--text-primary); background: var(--main-bg); }
.ctx-panel-summary > svg:first-child {
  flex-shrink: 0;
  color: var(--accent);
}
.ctx-panel-summary > span {
  flex: 1;
  color: var(--text-primary);
}
.ctx-panel-count {
  font-weight: 500;
  color: var(--text-muted);
  margin-left: var(--sp-2);
  font-size: 0.78rem;
}
.ctx-panel-chev {
  transition: transform var(--transition-fast);
  color: var(--text-muted);
}
.ctx-panel-details[open] .ctx-panel-chev { transform: rotate(180deg); }
.ctx-panel-body {
  padding: 0 var(--sp-4) var(--sp-4);
  border-top: 1px solid var(--card-border);
}
.ctx-panel-section { margin-top: var(--sp-3); }
.ctx-panel-section-title {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: var(--sp-2);
}
.ctx-panel-section-title-muted { opacity: 0.7; }
.ctx-panel-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  font-size: 0.8rem;
  border-bottom: 1px dashed var(--card-border);
}
.ctx-panel-row:last-child { border-bottom: 0; }
.ctx-panel-row-muted { opacity: 0.55; }
.ctx-panel-source {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.75rem;
}
.ctx-panel-detail {
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ── Housekeeping / Site Health (read-only checklist) ─────────────────── */
.hk-list { padding: var(--sp-2) 0; }
.hk-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--card-border); font-size: 0.82rem; }
.hk-item:last-child { border-bottom: 0; }
.hk-status { flex-shrink: 0; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; border-radius: 50%; }
.hk-status-ok       { background: rgba(34,197,94,0.12);  color: #22c55e; }
.hk-status-missing  { background: rgba(239,68,68,0.12);  color: #ef4444; }
.hk-status-partial  { background: rgba(245,158,11,0.12); color: #f59e0b; }
.hk-status-unknown  { background: rgba(107,107,107,0.1); color: var(--text-muted); }
.hk-body { flex: 1; min-width: 0; }
.hk-title { font-weight: 500; color: var(--text-primary); }
.hk-detail { font-size: 0.73rem; color: var(--text-muted); margin-top: 2px; }
.hk-tier { font-size: 0.63rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 4px; font-weight: 600; flex-shrink: 0; }
.hk-tier-high   { background: rgba(239,68,68,0.12);  color: #ef4444; }
.hk-tier-medium { background: rgba(245,158,11,0.12); color: #f59e0b; }
.hk-tier-low    { background: rgba(107,107,107,0.1); color: var(--text-muted); }

/* ── SEO Tasks Tab ───────────────────────────────────────────────────────── */
.tasks-filters { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.tasks-status-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tasks-status-tab { padding: 5px 14px; border-radius: 20px; border: 1px solid var(--card-border); background: var(--card-bg); color: var(--text-secondary); font-size: 0.78rem; font-weight: 500; cursor: pointer; transition: all 0.15s; }
.tasks-status-tab:hover { border-color: var(--accent); color: var(--accent); }
.tasks-status-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.tasks-tab-count { font-size: 0.7rem; opacity: 0.8; margin-left: 3px; }
.tasks-filter-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tasks-filter-row .field-input { height: 32px; font-size: 0.8rem; padding: 0 10px; min-width: 0; flex: 1; max-width: 160px; }
.tasks-filter-row input[type="date"] { max-width: 140px; }
.tasks-list-wrap { display: flex; flex-direction: column; gap: 8px; }

.task-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-4); display: flex; align-items: flex-start; gap: var(--sp-3); transition: box-shadow 0.15s; }
.task-card:hover { box-shadow: var(--card-shadow); }
.task-card.status-done { opacity: 0.6; }
.task-card.status-dismissed { opacity: 0.4; }
.task-type-pill { flex-shrink: 0; margin-top: 2px; }
.task-type-pill span { font-size: 0.63rem; font-weight: 700; padding: 2px 7px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.03em; }
.task-type-on  { background: rgba(99,102,241,0.1); color: #6366f1; }
.task-type-off { background: rgba(251,95,44,0.1);  color: var(--accent); }
.task-card-body { flex: 1; min-width: 0; }
.task-card-title { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); margin-bottom: 3px; }
.task-card-desc  { font-size: 0.76rem; color: var(--text-secondary); line-height: 1.45; margin-bottom: 6px; }
.task-card-meta  { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.task-meta-tag   { font-size: 0.65rem; padding: 1px 7px; border-radius: 4px; background: var(--main-bg); color: var(--text-muted); border: 1px solid var(--card-border); }
.task-card-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.task-status-select { font-size: 0.75rem; padding: 4px 8px; border: 1px solid var(--card-border); border-radius: var(--radius-sm); background: var(--card-bg); color: var(--text-primary); cursor: pointer; }
.task-notion-link { font-size: 0.7rem; color: var(--text-muted); text-decoration: none; opacity: 0.7; }
.task-notion-link:hover { opacity: 1; color: var(--accent); }

.btn-action {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-action:hover {
  background: var(--card-bg);
  color: var(--text-primary);
}

.btn-action svg {
  flex-shrink: 0;
}

.btn-notion-inline {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--brand-orange);
  color: var(--text-inverse);
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: var(--text-sm);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.btn-notion-inline:hover {
  background: var(--brand-orange-hover);
}


.btn-outline {
  background: transparent;
  border: 1px solid var(--card-border);
  color: var(--text-primary);
}

.btn-outline:hover {
  background: var(--main-bg);
}

/* ============================================
   NOTION CALENDAR PICKER
   ============================================ */

.notion-picker {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-xl);
  margin-top: var(--sp-6);
  overflow: hidden;
}

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

.notion-picker-header h3 {
  font-family: var(--font-brand);
  font-size: var(--text-lg);
  font-weight: 600;
}

.notion-picker-list {
  max-height: 350px;
  overflow-y: auto;
  padding: var(--sp-3);
}

.notion-card-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-bottom: var(--sp-2);
}

.notion-card-item:hover {
  border-color: var(--brand-orange);
}

.notion-card-item.selected {
  border-color: var(--brand-orange);
  background: var(--brand-orange-light);
}

.notion-card-radio {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--card-border);
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.notion-card-item.selected .notion-card-radio {
  border-color: var(--brand-orange);
  background: var(--brand-orange);
  box-shadow: inset 0 0 0 3px var(--card-bg);
}

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

.notion-card-title {
  font-weight: 500;
  font-size: var(--text-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notion-card-meta {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 2px;
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.notion-card-badge {
  font-size: var(--text-xs);
  padding: 1px var(--sp-2);
  border-radius: 100px;
  background: var(--main-bg);
  color: var(--text-secondary);
  font-weight: 500;
}

.notion-card-badge.write-caption {
  background: rgba(245, 158, 11, 0.15);
  color: var(--warning);
}

.notion-picker-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--card-border);
}

.notion-picker-empty {
  padding: var(--sp-8);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* ============================================
   LOADING STATE
   ============================================ */

.loading-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-12);
  color: var(--text-secondary);
}

.loading-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--card-border);
  border-top-color: var(--brand-orange);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: var(--sp-4);
}

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

.loading-text {
  font-size: var(--text-sm);
  font-weight: 500;
}

/* ============================================
   CONTEXT LOADING BAR (client selection)
   ============================================ */

.context-bar {
  display: none;
  padding: var(--sp-4) var(--sp-6);
  background: var(--brand-orange-light);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-4);
}

.context-bar.visible {
  display: block;
}

.context-bar-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--brand-orange);
  margin-bottom: var(--sp-2);
}

.context-items {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.context-item {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.context-item .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--card-border);
  transition: background var(--transition-base);
}

.context-item .dot.loaded {
  background: var(--success);
}

.context-item .dot.error {
  background: var(--error);
}

.ctx-error-reason {
  font-size: 10px;
  color: var(--error);
  margin-left: 4px;
  opacity: 0.8;
}

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */

.toast {
  position: fixed;
  bottom: var(--sp-6);
  right: var(--sp-6);
  background: #ffffff;
  color: #1a1a1a;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.06);
  transform: translateY(100px);
  opacity: 0;
  transition: all var(--transition-base);
  z-index: 200;
}

.toast.visible {
  transform: translateY(0);
  opacity: 1;
}

.toast.success {
  border-left: 3px solid #22c55e;
}

.toast.error {
  border-left: 3px solid #ef4444;
}

/* Dark mode toast — always high-contrast so it pops on dark bg */
[data-theme="dark"] .toast {
  background: #2c2c2c;
  color: #f0f0f0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* ============================================
   RESPONSIVE — tablet
   ============================================ */

@media (max-width: 1024px) {
  .sidebar {
    width: 220px;
    min-width: 220px;
  }

  .cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}

/* ─── Reviews Section ─────────────────────────────── */
.reviews-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: var(--sp-3);
}
.reviews-search-icon {
  position: absolute;
  left: 10px;
  color: var(--text-muted);
  pointer-events: none;
}
.reviews-search-input {
  width: 100%;
  padding: 8px 32px 8px 32px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: var(--text-sm);
  outline: none;
  transition: border-color 0.15s;
}
.reviews-search-input:focus { border-color: var(--accent); }
.reviews-search-input::placeholder { color: var(--text-muted); }
.reviews-search-clear {
  position: absolute;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 11px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
}
.reviews-search-clear:hover { color: var(--text-primary); background: var(--hover-bg); }

.reviews-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
}

.reviews-client-filter {
  padding: 8px 14px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--text-secondary);
  background: var(--card-bg);
  outline: none;
  cursor: pointer;
  min-width: 0;
  transition: border-color 0.15s, color 0.15s;
}
.reviews-client-filter:hover { border-color: #c0c0c0; color: var(--text-primary); }
.reviews-client-filter:focus { border-color: var(--brand-orange); color: var(--text-primary); }

/* ─── Date Range Picker ────────────────────────────── */
.date-range-picker {
  position: relative;
}

.date-range-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--text-secondary);
  background: var(--card-bg);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s;
}
.date-range-btn:hover { border-color: #c0c0c0; }
.date-range-btn svg { opacity: 0.5; flex-shrink: 0; }
.date-range-btn span { flex: 1; overflow: hidden; text-overflow: ellipsis; }

/* Clear (×) button — shown when a date filter is active */
.date-range-clear-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--card-border);
  border-radius: 50%;
  background: var(--card-bg);
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
  margin-left: 4px;
}
.date-range-clear-btn:hover {
  background: var(--error-bg);
  border-color: var(--error);
  color: var(--error);
}

.date-range-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.13);
  z-index: 200;
  min-width: 210px;
  padding: var(--sp-2);
}
.date-range-dropdown.open { display: block; }

.date-preset-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px var(--sp-3);
  border: none;
  background: none;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 0.1s, color 0.1s;
}
.date-preset-item:hover {
  background: var(--main-bg);
  color: var(--text-primary);
}
.date-preset-item.active {
  background: var(--brand-orange-light);
  color: var(--brand-orange);
  font-weight: 500;
}

.date-custom-range {
  border-top: 1px solid var(--card-border);
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
}
.date-custom-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 0 var(--sp-3) var(--sp-2);
}
.date-custom-inputs {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-2) var(--sp-2);
}
.date-custom-input {
  flex: 1;
  padding: 5px 7px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--text-primary);
  background: var(--card-bg);
  outline: none;
  min-width: 0;
}
.date-custom-input:focus { border-color: var(--brand-orange); }
.date-custom-sep { font-size: var(--text-xs); color: var(--text-muted); flex-shrink: 0; }

/* Tab select hidden on desktop — only shown in mobile media query */
.reviews-tab-select { display: none; }

/* Mobile-only elements hidden on desktop */
.mobile-logout-btn { display: none; }
.mobile-header-right { display: none; }

.reviews-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--card-border);
  margin-bottom: var(--sp-4);
}

.reviews-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}

.reviews-tab:hover { color: var(--text-primary); }
.reviews-tab.active { color: var(--brand-orange); border-bottom-color: var(--brand-orange); font-weight: 600; }

.reviews-tab-count {
  background: var(--card-border);
  color: var(--text-secondary);
  border-radius: 99px;
  padding: 1px 8px;
  font-size: 0.72rem;
  font-weight: 700;
  transition: background 0.15s, color 0.15s;
}

.reviews-tab.active .reviews-tab-count {
  background: var(--brand-orange-light);
  color: var(--brand-orange);
}

.reviews-list {
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--card-shadow);
}

.reviews-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 60px var(--sp-6);
  font-size: var(--text-sm);
}

/* ── Pagination ── */
#reviewsPagination { padding: var(--sp-4) var(--sp-4) var(--sp-2); }

.reviews-new-banner {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #fff8ed;
  border: 1px solid #f59e0b;
  border-radius: 8px;
  padding: 10px 16px;
  margin: 0 16px 12px;
  font-size: 13px;
  color: #92400e;
  font-weight: 500;
}
.reviews-new-banner-btn {
  background: #f59e0b;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.reviews-new-banner-btn:hover { background: #d97706; }

.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.pagination-info {
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pg-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 var(--sp-2);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  background: var(--card-bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pg-btn:hover:not(:disabled) { background: var(--main-bg); border-color: var(--brand-orange); color: var(--brand-orange); }
.pg-btn.active { background: var(--brand-orange); border-color: var(--brand-orange); color: #fff; font-weight: 600; }
.pg-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.pg-nav { font-size: 16px; color: var(--text-muted); }
.pg-ellipsis { font-size: var(--text-sm); color: var(--text-muted); padding: 0 2px; }

.pg-size-select {
  height: 32px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  background: var(--card-bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  cursor: pointer;
  outline: none;
}
.pg-size-select:focus { border-color: var(--brand-orange); }

/* ── Compact row ── */
.review-item {
  border-bottom: 1px solid var(--card-border);
}
.review-item:last-child { border-bottom: none; }

.review-item-row {
  display: grid;
  grid-template-columns: 72px auto 1fr auto 70px 20px;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  transition: background var(--transition-fast);
  user-select: none;
}
.review-item-row:hover { background: var(--main-bg); }
.review-item.expanded .review-item-row { background: var(--main-bg); }

.review-item-stars {
  color: #f59e0b;
  font-size: 11px;
  letter-spacing: 1px;
  white-space: nowrap;
}

.review-item-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}

.review-item.expanded .review-item-preview { visibility: hidden; }

.review-client-tag {
  font-size: var(--text-xs);
  background: var(--brand-orange-light);
  color: var(--brand-orange);
  border-radius: 99px;
  padding: 2px 8px;
  font-weight: 600;
  white-space: nowrap;
}
.review-client-loc {
  opacity: 0.7;
  font-weight: 400;
}

.review-item-author {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}

.review-item-platform {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  color: var(--text-muted);
  background: var(--main-bg);
  border: 1px solid var(--card-border);
  border-radius: 99px;
  padding: 1px 7px;
  white-space: nowrap;
}

.review-item-preview {
  font-size: var(--text-sm);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.review-item-date {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: right;
  white-space: nowrap;
}

.review-item-chevron {
  color: var(--text-muted);
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}
.review-item.expanded .review-item-chevron { transform: rotate(180deg); }

/* ── Expanded body ── */
.review-item-body {
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  border-top: 1px solid var(--card-border);
  background: var(--review-body-bg, var(--main-bg));
  display: none;
}
.review-item.expanded .review-item-body { display: block; }

/* Light mode: expanded body slightly distinct from page bg */
:root {
  --review-body-bg: #f0ebe3;
  --review-quote-bg: #ffffff;
  --review-quote-border: var(--brand-orange);
  --review-response-bg: rgba(255, 255, 255, 0.85);
  --review-response-border: rgba(251, 95, 44, 0.28);
  --review-label-color: #6b5b4e;
}

/* Section headers inside expanded card (Customer Review, Response, etc.) */
.review-section-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--review-label-color);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-bottom: var(--sp-2);
  opacity: 0.85;
}

.review-content {
  font-size: var(--text-sm);
  color: var(--text-primary);
  line-height: 1.7;
  margin-bottom: var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  background: var(--review-quote-bg);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--review-quote-border);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.review-response-section { margin-bottom: var(--sp-4); }

/* Legacy alias — same visual as .review-section-label */
.review-response-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--review-label-color);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-bottom: var(--sp-2);
  opacity: 0.85;
}

.review-response-text {
  font-size: var(--text-sm);
  color: var(--text-primary);
  line-height: 1.7;
  padding: var(--sp-3) var(--sp-4);
  background: var(--review-response-bg);
  border: 1px solid var(--review-response-border);
  border-radius: var(--radius-md);
  white-space: pre-wrap;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.review-response-input {
  width: 100%;
  min-height: 100px;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-primary);
  background: var(--card-bg);
  resize: vertical;
  outline: none;
  transition: border-color var(--transition-fast);
  box-sizing: border-box;
}
.review-response-input:focus { border-color: var(--brand-orange); }

.review-actions {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.btn-approve {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--brand-orange);
  color: #fff;
  border: none;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--transition-fast);
}
.btn-approve:hover { opacity: 0.85; }
.btn-approve:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-delete-review {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: #b5621c;
  border: 1px solid rgba(181, 98, 28, 0.35);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.btn-delete-review:hover {
  background: rgba(181, 98, 28, 0.08);
  border-color: #b5621c;
}
.btn-delete-review:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-delete-review svg { flex-shrink: 0; }

.btn-suggest-ai {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--brand-orange);
  border: 1px solid var(--brand-orange);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.btn-suggest-ai:hover { background: var(--brand-orange-light); }
.btn-suggest-ai svg { flex-shrink: 0; }
.btn-approve svg { flex-shrink: 0; }

.resp-loading {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-style: italic;
  font-size: var(--text-sm);
}
@keyframes spin { to { transform: rotate(360deg); } }
.resp-spin { animation: spin 1s linear infinite; opacity: 0.5; }

.review-error-pill {
  font-size: var(--text-xs);
  font-weight: 600;
  color: #b5621c;
  background: rgba(181, 98, 28, 0.12);
  border-radius: 99px;
  padding: 2px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 400px;
  display: inline-block;
}

.review-auto-error {
  font-size: var(--text-xs);
  color: #b5621c;
  font-weight: 500;
  background: rgba(181, 98, 28, 0.08);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  margin-bottom: var(--sp-2);
}

.review-manual-note {
  font-size: var(--text-xs);
  color: var(--warning);
  font-weight: 500;
  margin-bottom: var(--sp-2);
}

.review-flagged-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: #d97706;
  background: rgba(217, 119, 6, 0.12);
  border-radius: 99px;
  padding: 2px 8px;
  white-space: nowrap;
}

.review-flagged-note {
  font-size: var(--text-xs);
  color: #d97706;
  font-weight: 500;
  background: rgba(217, 119, 6, 0.08);
  border: 1px solid rgba(217, 119, 6, 0.2);
  border-radius: var(--radius-md);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-2);
}


.review-ai-edit-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  background: var(--main-bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--card-border);
}
.review-ai-edit-input {
  flex: 1;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-primary);
  background: var(--card-bg);
  outline: none;
}
.review-ai-edit-input:focus { border-color: var(--brand-orange); }
.btn-ai-edit-apply {
  padding: var(--sp-2) var(--sp-4);
  background: var(--brand-orange);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity var(--transition-fast);
}
.btn-ai-edit-apply:hover { opacity: 0.85; }
.btn-ai-edit-apply:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-close-ai-edit {
  padding: var(--sp-1) var(--sp-2);
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: var(--text-base);
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  transition: color var(--transition-fast);
}
.btn-close-ai-edit:hover { color: var(--text-primary); }

.review-responded-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--brand-orange);
  background: rgba(251, 95, 44, 0.1);
  border-radius: 99px;
  padding: 3px 10px;
}

/* ─── Sidebar user info ──────────────────────── */
.sidebar-user-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-2);
  border-radius: var(--radius-md);
  background: var(--sidebar-user-bg);
}
.sidebar-user-info:empty {
  display: none;
}
.sidebar-user-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--sidebar-text-active);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-user-role {
  font-size: 11px;
  color: var(--sidebar-text);
}

/* ─── Sidebar footer settings button ────────── */
.sidebar-footer-item {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: 4px;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.sidebar-footer-item:hover {
  border-color: var(--card-border);
  color: var(--text-secondary);
}
.sidebar-footer-item.active {
  border-color: var(--brand-orange);
  color: var(--brand-orange);
}

/* ─── User Management ────────────────────────── */
#userMgmtView {
  padding: var(--sp-10) var(--sp-10) var(--sp-8);
  max-width: 1100px;
}
.um-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: 32px;
}
.um-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 4px;
}
.um-subtitle {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
}
.um-btn-new {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: var(--brand-orange);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity var(--transition-fast);
  flex-shrink: 0;
}
.um-btn-new:hover { opacity: 0.88; }

.um-table-wrap {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.um-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.um-table thead th {
  padding: 12px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid var(--card-border);
  white-space: nowrap;
}
.um-table tbody tr {
  border-bottom: 1px solid var(--card-border);
  transition: background var(--transition-fast);
}
.um-table tbody tr:last-child { border-bottom: none; }
.um-table tbody tr:hover { background: rgba(255,255,255,0.03); }
.um-table tbody td {
  padding: 13px 16px;
  vertical-align: middle;
}
.um-loading {
  text-align: center;
  color: var(--text-muted);
  padding: 40px 16px !important;
  font-size: var(--text-sm);
}
.um-td-name { font-weight: 600; color: var(--text-primary); }
.um-td-username { color: var(--text-muted); font-family: var(--font-mono, monospace); font-size: 12px; }
.um-td-email { color: var(--text-secondary); }
.um-td-muted { color: var(--text-muted); font-size: 12px; }
.um-td-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
}
.um-btn-edit,
.um-btn-del {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
}
.um-btn-edit {
  background: rgba(255,255,255,0.06);
  border-color: var(--card-border);
  color: var(--text-secondary);
}
.um-btn-edit:hover { background: rgba(255,255,255,0.1); color: var(--text-primary); }
.um-btn-del {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
}
.um-btn-del:hover { background: rgba(239, 68, 68, 0.1); border-color: rgba(239,68,68,0.3); color: #ef4444; }

.um-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.um-badge-admin { background: rgba(251, 95, 44, 0.14); color: var(--brand-orange); }
/* Staff role badge — warm brown, on-brand */
.um-badge-role { background: rgba(158, 109, 64, 0.13); color: #9e6d40; }
[data-theme="dark"] .um-badge-role { background: rgba(158, 109, 64, 0.18); color: #c4915a; }

.um-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
}
.um-status::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
/* Active — brand orange instead of generic green */
.um-status-active { color: var(--brand-orange); }
.um-status-active::before { background: var(--brand-orange); }
.um-status-inactive { color: var(--text-muted); }
.um-status-inactive::before { background: var(--text-muted); }

/* ─── User modal ──────────────────────────────── */
.um-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--sp-4);
}
.um-modal {
  background: var(--sidebar-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.um-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--card-border);
  flex-shrink: 0;
}
.um-modal-header h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}
.um-modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.um-modal-close:hover { color: var(--text-primary); background: var(--um-client-hover-bg); }
.um-modal-body {
  padding: var(--sp-6);
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.um-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--sp-4);
  row-gap: var(--sp-5);
}
.um-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.um-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.um-field input,
.um-field select {
  padding: 9px 12px;
  background: var(--um-input-bg);
  border: 1px solid var(--um-input-border);
  border-radius: var(--radius-md);
  color: var(--um-input-color);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  outline: none;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  width: 100%;
  box-sizing: border-box;
}
.um-field input::placeholder { color: var(--um-input-placeholder); }
.um-field input:focus,
.um-field select:focus {
  border-color: var(--brand-orange);
  background: var(--um-input-bg);
}
.um-field select option { background: var(--card-bg); color: var(--text-primary); }
.um-field-full { grid-column: 1 / -1; }

/* Password field with toggle + generate */
.um-password-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.um-password-wrap input {
  flex: 1;
}
.um-pwd-icon {
  background: var(--um-pwd-icon-bg);
  border: 1px solid var(--um-pwd-icon-border);
  border-radius: var(--radius-sm);
  color: var(--um-pwd-icon-color);
  cursor: pointer;
  padding: 8px 9px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.um-pwd-icon:hover { color: var(--um-input-color); background: var(--um-client-hover-bg); }
.um-pwd-generate {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 11px;
  background: rgba(251,146,60,0.12);
  border: 1px solid rgba(251,146,60,0.3);
  border-radius: var(--radius-sm);
  color: var(--brand-orange);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.um-pwd-generate:hover { background: rgba(251,146,60,0.2); border-color: rgba(251,146,60,0.5); }
.um-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.um-checkboxes label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--um-checkbox-label);
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
}
.um-checkboxes input[type="checkbox"] {
  accent-color: var(--brand-orange);
  width: 14px;
  height: 14px;
  cursor: pointer;
  flex-shrink: 0;
}
/* ─── Role radio buttons ─────────────────────── */
.um-role-options {
  display: flex;
  gap: 10px;
}
.um-role-option {
  flex: 1;
  display: flex;
  cursor: pointer;
}
.um-role-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.um-role-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 13px 14px;
  border: 1.5px solid var(--um-role-card-border);
  border-radius: var(--radius-md);
  background: var(--um-role-card-bg);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.um-role-option:hover .um-role-card {
  border-color: rgba(251, 95, 44, 0.45);
  background: rgba(251, 95, 44, 0.05);
}
.um-role-option input[type="radio"]:checked + .um-role-card {
  border-color: var(--brand-orange);
  background: rgba(251, 95, 44, 0.08);
}
.um-role-card strong {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--um-role-card-text);
}
.um-role-card span {
  font-size: 11px;
  color: var(--um-role-card-sub);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}
.um-role-select-wrap {
  margin-top: 10px;
}
.um-role-select-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--um-role-label-color);
  margin-bottom: 6px;
}
.um-role-select {
  width: 100%;
  padding: 9px 32px 9px 12px;
  background-color: var(--um-select-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(0,0,0,0.45)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  border: 1px solid var(--um-input-border);
  border-radius: var(--radius-md);
  color: var(--um-select-color);
  font-size: var(--text-sm);
  font-family: var(--font-brand);
  cursor: pointer;
  appearance: none;
  transition: border-color var(--transition-fast);
}
[data-theme="dark"] .um-role-select {
  background-color: var(--um-select-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.um-role-select:focus {
  outline: none;
  border-color: var(--brand-orange);
}
.um-role-select option {
  background: var(--card-bg);
  color: var(--text-primary);
}

/* ─── Client access — wildcard + squads ──────── */
.um-wildcard-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--um-wildcard-color);
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--um-wildcard-border);
  background: var(--um-wildcard-bg);
  margin-bottom: 12px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color var(--transition-fast);
}
.um-wildcard-label:hover { border-color: rgba(251, 95, 44, 0.55); }
.um-wildcard-label input[type="checkbox"] {
  accent-color: var(--brand-orange);
  width: 14px;
  height: 14px;
  cursor: pointer;
  flex-shrink: 0;
}
.um-squads-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: opacity var(--transition-fast);
}
.um-squads-wrap.um-disabled { opacity: 0.4; pointer-events: none; }

/* Squad accordion */
.um-squad {
  border: 1px solid var(--um-squad-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--um-squad-bg);
}
.um-squad-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  gap: 8px;
}
.um-squad-all-label {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  flex: 1;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--um-squad-label);
  text-transform: none;
  letter-spacing: normal;
}
.um-squad-all-label input[type="checkbox"] {
  accent-color: var(--brand-orange);
  width: 14px;
  height: 14px;
  cursor: pointer;
  flex-shrink: 0;
}
.um-squad-toggle {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  transition: color var(--transition-fast), transform var(--transition-fast);
}
.um-squad-toggle:hover { color: var(--text-secondary); }
.um-squad.is-collapsed .um-squad-toggle { transform: rotate(-90deg); }

.um-squad-clients {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 6px;
  padding: 0 12px 12px;
  border-top: 1px solid var(--card-border);
}
.um-squad-clients.collapsed {
  display: none;
}
.um-client-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--um-client-color);
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.um-client-item:hover { background: var(--um-client-hover-bg); border-color: var(--um-client-hover-border); }
.um-client-item input[type="checkbox"] {
  accent-color: var(--brand-orange);
  width: 13px;
  height: 13px;
  cursor: pointer;
  flex-shrink: 0;
}

/* Coming soon squads */
.um-squad-soon { opacity: 0.5; }
.um-squad-soon .um-squad-header { padding: 10px 12px; }
.um-squad-name { font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); }
.um-coming-soon-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  background: var(--um-coming-soon-bg);
  border-radius: 99px;
  padding: 2px 8px;
}
.um-modal-footer {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--card-border);
  flex-shrink: 0;
}
.um-modal-error {
  flex: 1;
  font-size: var(--text-sm);
  color: #f87171;
  min-height: 20px;
}
.um-btn-cancel {
  padding: 9px 18px;
  background: transparent;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.um-btn-cancel:hover { background: var(--um-cancel-hover-bg); color: var(--um-cancel-hover-color); border-color: var(--um-cancel-hover-border); }
.um-btn-save {
  padding: 9px 22px;
  background: var(--brand-orange);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--transition-fast);
}
.um-btn-save:hover { opacity: 0.88; }
.um-btn-save:disabled { opacity: 0.5; cursor: not-allowed; }

/* ============================================
   MOBILE ELEMENTS — hidden on desktop by default
   ============================================ */

.mobile-header { display: none; }
.mobile-nav    { display: none; }

/* ============================================
   TABLET (≤ 768px)
   ============================================ */
@media (max-width: 1024px) {
  /* Tablet: keep the three-region grid but narrow everything a notch. */
  .app.visible {
    grid-template-columns: 76px 210px 1fr;
    padding: 8px;
    gap: 8px;
  }
  .rail-label { font-size: 0.62rem; }
}
@media (max-width: 768px) {
  .app.visible {
    grid-template-columns: 72px 200px 1fr;
    padding: 8px;
    gap: 8px;
  }
  .main { padding: var(--sp-5); }
  .wizard { width: 95vw; }
  .cards-grid { grid-template-columns: 1fr; }
  .um-form-grid { grid-template-columns: 1fr; }
  #userMgmtView { padding: var(--sp-5); }
  .um-clients-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================
   MOBILE (≤ 640px) — full mobile redesign
   ============================================ */
@media (max-width: 640px) {

  /* ── App shell ── */
  /* Hide the desktop rail / secondary / top header — mobile uses the
     mobile-header + mobile-nav pattern and a single scrollable main. */
  .sidebar { display: none; }
  .top-header { display: none; }
  .rail { display: none; }
  .secondary-sidebar { display: none; }

  /* App fills exact viewport height — header + main + nav in flow (no fixed elements) */
  .app { display: none; flex-direction: column; }
  .app.visible {
    /* Override the desktop grid — on mobile we want flex column instead. */
    display: flex;
    grid-template-columns: unset;
    grid-template-rows: unset;
    grid-template-areas: unset;
    flex-direction: column;
    height: 100dvh;       /* dynamic viewport height: adjusts when browser UI shows/hides */
    overflow: hidden;     /* only .main scrolls, not the whole page */
    padding: 0;
    gap: 0;
  }

  /* Main scrolls independently — no padding needed for fixed header/nav */
  .main {
    flex: 1;
    min-height: 0;        /* critical for flex overflow scrolling */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px 16px 24px;
  }

  /* ── Mobile top header — in flow, not fixed ── */
  .mobile-header {
    display: flex;
    position: relative;   /* in flow, not fixed */
    flex-shrink: 0;
    width: 100%;
    height: 56px;
    background: #1a1a1a;
    border-bottom: 1px solid #2a2a2a;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    padding-top: env(safe-area-inset-top); /* respect notch */
    height: calc(56px + env(safe-area-inset-top));
  }

  .mobile-header-logo {
    height: 26px;
    width: auto;
  }

  .mobile-header-right {
    display: flex !important;
    align-items: center;
    gap: 10px;
  }

  .mobile-header-user {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
  }

  .mobile-header-user .mhu-name {
    font-size: 13px;
    font-weight: 600;
    color: #e0e0e0;
    line-height: 1.2;
  }

  .mobile-header-user .mhu-role {
    font-size: 10px;
    color: rgba(255,255,255,0.38);
    text-transform: uppercase;
    letter-spacing: 0.4px;
  }

  .mobile-logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    background: rgba(255,255,255,0.07);
    border-radius: 50%;
    color: rgba(255,255,255,0.55);
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition: background 150ms ease, color 150ms ease;
  }

  .mobile-logout-btn:hover, .mobile-logout-btn:active {
    background: rgba(251,95,44,0.15);
    color: var(--brand-orange);
  }

  /* ── Mobile bottom nav — in flow, not fixed ── */
  .mobile-nav {
    display: flex;
    position: relative;   /* in flow, not fixed */
    flex-shrink: 0;
    width: 100%;
    background: #1a1a1a;
    border-top: 1px solid #2a2a2a;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .mobile-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: none;
    background: none;
    color: rgba(255,255,255,0.38);
    cursor: pointer;
    padding: 10px 4px 8px;
    min-height: 58px;
    transition: color 150ms ease;
    -webkit-tap-highlight-color: transparent;
    font-family: var(--font-body);
  }

  .mobile-nav-item:not(:disabled):hover,
  .mobile-nav-item.active {
    color: var(--brand-orange);
  }

  .mobile-nav-item:disabled {
    opacity: 0.28;
    cursor: not-allowed;
  }

  .mobile-nav-item svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
  }

  .mobile-nav-item span {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1px;
    line-height: 1;
  }

  /* ── Main header ── */
  .main-header {
    margin-bottom: 16px;
    margin-top: 0;
  }

  .main-header h1 { font-size: 22px; }
  .main-header p  { font-size: 13px; }

  /* ── Cards — horizontal list style ── */
  .cards-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
  }

  .card-icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    margin-bottom: 0;
    font-size: 22px;
    border-radius: 12px;
  }

  .card-title { font-size: 15px; margin-bottom: 3px; }
  .card-desc  { font-size: 12px; line-height: 1.4; }

  .card:hover { transform: none; }

  /* ── Wizard — full-screen on mobile ── */
  .wizard-overlay {
    align-items: stretch;
    z-index: 400; /* above mobile header + nav (300) */
  }

  .wizard {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* Sticky header */
  .wizard-header {
    flex-shrink: 0;
    padding: calc(env(safe-area-inset-top) + 16px) 20px 16px;
    position: sticky;
    top: 0;
    background: var(--card-bg);
    z-index: 1;
  }

  /* Scrollable body */
  .wizard-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 20px;
  }

  .wizard-progress {
    flex-shrink: 0;
    padding: 12px 20px;
    background: var(--main-bg);
  }

  /* Sticky footer with Continue button */
  .wizard-footer {
    flex-shrink: 0;
    padding: 14px 20px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--card-border);
    background: var(--card-bg);
    gap: 10px;
  }

  .wizard-footer .btn { flex: 1; justify-content: center; }

  /* ── Output panel ── */
  .output-topbar { margin-bottom: 10px; }

  .output-actions-card {
    flex-wrap: wrap;
    gap: 8px;
  }

  .output-actions-card .btn {
    flex: 1;
    min-width: calc(50% - 4px);
    justify-content: center;
  }

  .output-actions-card .btn-notion-inline {
    flex: 0 0 100%;
    justify-content: center;
  }

  .output-header-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* ── Reviews ── */
  #reviewsView .main-header { margin-bottom: 14px; }

  .reviews-search-wrap { margin-bottom: 10px; }

  /* Tab select (mobile-only) */
  .reviews-tab-select {
    display: block;
    width: 100%;
    padding: 11px 16px;
    margin-bottom: 10px;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 600;
    font-family: var(--font-body);
    color: var(--text-primary);
    background: var(--card-bg);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
    cursor: pointer;
  }

  /* Hide desktop tab bar on mobile */
  .reviews-tabs { display: none; }

  .reviews-controls {
    flex-wrap: nowrap;
    gap: 8px;
    margin-bottom: 10px;
  }

  /* All 3 filter controls equal width and consistent look */
  .reviews-client-filter {
    flex: 1 1 0;
    min-width: 0;
    font-size: 13px !important;
    padding: 9px 10px;
  }

  .date-range-picker { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 6px; }
  .date-range-btn {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    padding: 9px 10px;
    white-space: nowrap;
    overflow: hidden;
  }
  .date-range-btn span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }

  /* Review card — 2-row grid: meta (location+author) top, stars+date+chevron bottom */
  .review-item-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-rows: auto auto;
    gap: 5px 8px;
    padding: 13px 16px;
  }

  /* Row 1: meta spans full width — author left, client tag right */
  .review-item-meta {
    grid-column: 1 / 4;
    grid-row: 1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
  }

  /* Author on the left, truncated */
  .review-item-author {
    order: 1;
    flex: 1 1 0;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  /* Client/location tag pushed to the right */
  .review-client-tag {
    order: 2;
    flex-shrink: 0;
    font-size: 11px;
    max-width: 50%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Row 2 left: stars */
  .review-item-stars {
    grid-column: 1;
    grid-row: 2;
    font-size: 12px;
    align-self: center;
  }

  /* Row 2 middle: date (now below the location name) */
  .review-item-date {
    grid-column: 2;
    grid-row: 2;
    font-size: 11px;
    white-space: nowrap;
    text-align: right;
    align-self: center;
    color: var(--text-muted);
  }

  /* Row 2 right: chevron */
  .review-item-chevron {
    grid-column: 3;
    grid-row: 2;
    align-self: center;
    justify-self: end;
  }

  /* Hide preview and platform badge */
  .review-item-preview { display: none !important; }
  .review-item-platform { display: none; }

  /* ── User Management ── */
  .um-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
  }

  .um-btn-new { width: 100%; justify-content: center; }

  /* User Management: card-based layout instead of scrollable table */
  .um-table-wrap { overflow: visible; }

  .um-table, .um-table tbody { display: block; }

  .um-table thead { display: none; }

  .um-table tr {
    display: block;
    position: relative;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 14px 100px 14px 16px; /* right padding for actions */
    margin-bottom: 10px;
    box-shadow: var(--card-shadow);
  }

  .um-table td {
    display: block;
    border: none;
    padding: 1px 0;
    font-size: 13px;
  }

  .um-td-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    padding-bottom: 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--card-border);
  }

  .um-td-username { color: var(--text-secondary); font-size: 12px; }
  .um-td-email    { color: var(--text-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .um-td-role    { display: inline-block !important; margin-top: 6px; }
  .um-td-sections { display: inline !important; font-size: 12px; color: var(--text-secondary); }
  .um-td-sections::before { content: ' · '; color: var(--text-muted); }
  .um-td-clients  { display: none !important; }
  .um-td-status   { display: none !important; }

  .um-td-actions {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex !important;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
  }

  /* UM modal — full screen, same as wizard */
  .um-modal-overlay {
    align-items: stretch;
    padding: 0;
    z-index: 400;
  }

  .um-modal {
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .um-modal-header {
    flex-shrink: 0;
    padding: calc(env(safe-area-inset-top) + 16px) 20px 16px;
  }

  .um-modal-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 20px;
  }

  .um-modal-footer {
    flex-shrink: 0;
    padding: 14px 20px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255,255,255,0.08);
  }

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

  .um-clients-grid { grid-template-columns: 1fr 1fr; }

  /* ── User card: compact spacing ── */
  .um-table tr {
    padding: 11px 90px 11px 14px;
  }

  .um-td-name {
    font-size: 15px;
    padding-bottom: 5px;
    margin-bottom: 2px;
  }

  .um-table td { padding: 0; }

  /* ── Auth screen ── */
  .auth-box {
    width: calc(100% - 32px);
    padding: 32px 22px;
    border-radius: 18px;
  }

  /* ── Toast — nav is in-flow so just a small bottom offset ── */
  .toast {
    left: 12px;
    right: 12px;
    bottom: 16px;
    width: auto;
    text-align: center;
    transform: translateY(0);
  }

  /* ── Notion picker ── */
  .notion-picker {
    margin: 0;
    border-radius: 16px 16px 0 0;
  }

  /* ── Social media cards — no scroll needed while cards fit on screen ── */
  .main.cards-no-scroll {
    overflow-y: hidden;
  }

  /* ── iOS auto-zoom prevention — text inputs trigger zoom when font-size < 16px ── */
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="search"],
  input:not([type]),
  textarea {
    font-size: 16px !important;
  }


  /* ── Date range dropdown — prevent viewport overflow ── */
  .date-range-dropdown {
    left: auto;
    right: 0;
    min-width: 0;
    width: calc(100vw - 32px);
    max-width: 320px;
  }

  /* ── Remove floating sidebar padding on mobile ── */
  .app.visible {
    padding: 0;
    gap: 0;
  }
  .main {
    border-radius: 0;
  }
}

/* ============================================
   THEME TOGGLE BUTTON
   ============================================ */

.theme-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  background: none;
  border: 1px solid var(--sidebar-logout-border);
  border-radius: var(--radius-sm);
  outline: none;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-bottom: var(--sp-2);
  justify-content: center;
}
.theme-toggle:hover {
  border-color: var(--brand-orange);
  color: var(--brand-orange);
}
.theme-toggle svg {
  flex-shrink: 0;
}
/* ── Logo theme swap ── */
/* Light mode: show light logo, hide dark logo */
.logo-for-dark  { display: none; }
.logo-for-light { display: block; }
/* Dark mode: show dark logo, hide light logo */
[data-theme="dark"] .logo-for-dark  { display: block; }
[data-theme="dark"] .logo-for-light { display: none; }

/* Light mode: show moon (invite to go dark) */
.theme-icon-sun { display: none; }
.theme-icon-moon { display: inline; }

/* Dark mode: show sun (invite to go light) */
[data-theme="dark"] .theme-icon-sun { display: inline; }
[data-theme="dark"] .theme-icon-moon { display: none; }

/* ============================================
   DARK MODE OVERRIDES
   ============================================ */

[data-theme="dark"] {
  /* Warm dark palette — shifts away from the cool gray black toward a
     brand-dark brown, matches the Resto Experience aesthetic much better
     than a generic SaaS dark mode. */
  --body-bg-color: #17130f;
  --body-bg-gradient:
    radial-gradient(ellipse 70% 55% at 92% 0%, rgba(251, 95, 44, 0.14) 0%, transparent 65%),
    radial-gradient(ellipse 38% 35% at 0% 92%, rgba(251, 95, 44, 0.06) 0%, transparent 60%);

  /* Sidebar — warm dark (slightly lighter than body for separation) */
  --sidebar-bg: #1c1814;
  --sidebar-bg-hover: rgba(251, 95, 44, 0.10);    /* orange-tinted hover */
  --sidebar-text: #a89c90;                         /* warmer muted text */
  --sidebar-text-active: #f5ebe0;
  --sidebar-border: rgba(251, 95, 44, 0.10);       /* subtle orange glow */
  --sidebar-shadow: 0 2px 20px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(251, 95, 44, 0.04);
  --sidebar-logout-border: rgba(251, 95, 44, 0.16);

  /* Cards & surfaces — warm dark, less clinical than previous pure gray */
  --main-bg: #201b16;
  --card-bg: #221d18;
  --card-border: rgba(251, 95, 44, 0.10);
  --card-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  --card-shadow-hover: 0 8px 28px rgba(0, 0, 0, 0.55);

  /* Text */
  --text-primary: #e8e8e8;
  --text-secondary: #a0a0a0;
  --text-muted: #5e5e5e;
  --text-inverse: #1a1a1a;

  /* Output */
  --output-bg: #1c1c1c;

  /* Orange accent stays vivid in dark */
  --brand-orange-light: rgba(251, 95, 44, 0.15);

  /* Active sidebar item: orange in dark mode (high contrast on dark bg) */
  --sidebar-item-active-bg: rgba(251, 95, 44, 0.15);
  --sidebar-item-active-color: var(--brand-orange);
  --sidebar-user-bg: rgba(255, 255, 255, 0.05);

  /* ── User modal — dark mode overrides ── */
  --um-input-bg: rgba(255, 255, 255, 0.07);
  --um-input-border: rgba(255, 255, 255, 0.12);
  --um-input-color: #e8e8e8;
  --um-input-placeholder: rgba(255, 255, 255, 0.3);
  --um-pwd-icon-bg: rgba(255, 255, 255, 0.07);
  --um-pwd-icon-border: rgba(255, 255, 255, 0.12);
  --um-pwd-icon-color: rgba(255, 255, 255, 0.5);
  --um-role-card-border: rgba(255, 255, 255, 0.12);
  --um-role-card-bg: rgba(255, 255, 255, 0.06);
  --um-role-card-text: #e8e8e8;
  --um-role-card-sub: rgba(255, 255, 255, 0.45);
  --um-role-label-color: rgba(255, 255, 255, 0.4);
  --um-select-bg: rgba(255, 255, 255, 0.06);
  --um-select-color: #e8e8e8;
  --um-select-arrow: rgba(255,255,255,0.4);
  --um-checkbox-label: #d0d0d0;
  --um-wildcard-bg: rgba(251, 146, 60, 0.06);
  --um-wildcard-border: rgba(251, 146, 60, 0.3);
  --um-wildcard-color: #d8d8d8;
  --um-squad-border: rgba(255, 255, 255, 0.1);
  --um-squad-bg: rgba(255, 255, 255, 0.03);
  --um-squad-label: #c8c8c8;
  --um-client-color: #d0d0d0;
  --um-client-hover-bg: rgba(255, 255, 255, 0.06);
  --um-client-hover-border: rgba(255, 255, 255, 0.12);
  --um-coming-soon-bg: rgba(255, 255, 255, 0.06);
  --um-cancel-hover-bg: rgba(255, 255, 255, 0.1);
  --um-cancel-hover-color: #e8e8e8;
  --um-cancel-hover-border: rgba(255, 255, 255, 0.2);
}

/* Dark mode: review card expanded body */
[data-theme="dark"] {
  --review-body-bg: #161616;
  --review-quote-bg: #222222;
  --review-quote-border: var(--brand-orange);
  --review-response-bg: rgba(251, 95, 44, 0.07);
  --review-response-border: rgba(251, 95, 44, 0.22);
  --review-label-color: #a09080;
}

/* Dark mode: platform badge (Google/Yelp) — more visible on dark bg */
[data-theme="dark"] .review-item-platform {
  background: #2a2a2a;
  border-color: rgba(255, 255, 255, 0.12);
  color: #c0c0c0;
}

/* Dark mode: mobile header stays consistent */
[data-theme="dark"] .mobile-header {
  background: #0f0f0f;
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .mobile-nav {
  background: #0f0f0f;
  border-top-color: rgba(255, 255, 255, 0.06);
}

/* ============================================
   ACTIVITY LOG SECTION
   ============================================ */

.activity-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: var(--sp-6);
}

.activity-header h1 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.activity-header p {
  color: var(--text-secondary);
  margin-top: var(--sp-1);
  font-size: var(--text-md);
}

.activity-filters {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  margin-bottom: var(--sp-5);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  box-shadow: var(--card-shadow);
}

.activity-filters select,
.activity-filters input[type="date"] {
  flex: 1;
  min-width: 120px;
  max-width: 180px;
  height: 36px;
  padding: 0 10px;
  font-size: 0.82rem;
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--main-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  outline: none;
  cursor: pointer;
  transition: border-color var(--transition-fast);
  appearance: none;
  -webkit-appearance: none;
}

.activity-filters select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

.activity-filters select:focus,
.activity-filters input[type="date"]:focus {
  border-color: var(--accent);
}

.activity-date-range {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 240px;
}

.activity-date-range span {
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.activity-date-range input[type="date"] {
  max-width: none;
}

.activity-table-wrap {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--card-shadow);
}

.activity-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}

.activity-table thead tr {
  background: var(--main-bg);
}

.activity-table th {
  padding: 10px 16px;
  text-align: left;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--card-border);
  white-space: nowrap;
}

.activity-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--card-border);
  vertical-align: middle;
}

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

.activity-table tbody tr {
  transition: background var(--transition-fast);
  cursor: pointer;
}

.activity-table tbody tr:hover {
  background: var(--main-bg);
}

.activity-row-date-main {
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--text-primary);
}

.activity-row-date-time {
  font-size: 0.73rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.activity-row-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  flex-shrink: 0;
}

.activity-row-user-name {
  font-weight: 500;
  color: var(--text-primary);
  font-size: 0.84rem;
}

.activity-row-user-role {
  font-size: 0.71rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: 1px;
}

.activity-task-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--main-bg);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 0.76rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--text-primary);
}

.activity-row-client {
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--text-primary);
}

.activity-row-detail {
  font-size: 0.81rem;
  color: var(--text-muted);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-table-footer {
  font-size: 0.76rem;
  color: var(--text-muted);
  padding: 9px 16px;
  border-top: 1px solid var(--card-border);
  background: var(--main-bg);
}

.activity-empty {
  padding: 48px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.87rem;
}

/* Dark mode: date input calendar icon visibility */
[data-theme="dark"] .activity-filters input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(0.5);
}

/* ─── Team Request badges ──────────────────── */
.tr-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}
.tr-badge-pending  { background: rgba(234,179,8,.15);  color: #ca8a04; }
.tr-badge-approved { background: rgba(34,197,94,.15);  color: #16a34a; }
.tr-badge-rejected { background: rgba(239,68,68,.15);  color: #dc2626; }

[data-theme="dark"] .tr-badge-pending  { background: rgba(234,179,8,.18);  color: #fbbf24; }
[data-theme="dark"] .tr-badge-approved { background: rgba(34,197,94,.18);  color: #4ade80; }
[data-theme="dark"] .tr-badge-rejected { background: rgba(239,68,68,.18);  color: #f87171; }

/* ─── Sidebar badge ─────────────────────────── */
.sidebar-badge {
  margin-left: auto;
  background: #ef4444;
  color: #fff;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 1px 7px;
  min-width: 18px;
  text-align: center;
  line-height: 1.5;
}

/* ─── SEO Plans ─────────────────────────────── */
.sp-plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.sp-plan-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.sp-plan-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.10);
  border-color: var(--accent);
}
.sp-plan-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}
.sp-plan-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}
.sp-plan-card-client {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.sp-plan-progress-wrap {
  margin-bottom: 10px;
}
.sp-plan-progress-bar-bg {
  background: var(--bg-secondary);
  border-radius: 999px;
  height: 5px;
  overflow: hidden;
}
.sp-plan-progress-bar {
  background: var(--accent);
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
}
.sp-plan-card-meta {
  display: flex;
  gap: 12px;
  font-size: 0.76rem;
  color: var(--text-muted);
}

/* Plan detail — item rows */
.sp-item-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  margin-bottom: 6px;
  transition: opacity 0.15s;
}
.sp-item-row.done {
  opacity: 0.5;
}
.sp-item-row:hover {
  border-color: var(--accent);
}
.sp-item-check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--accent);
  cursor: pointer;
}
.sp-item-body {
  flex: 1;
  min-width: 0;
}
.sp-item-title {
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 3px;
  line-height: 1.35;
}
.sp-item-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 6px;
}
.sp-item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.sp-item-tag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 500;
  background: var(--bg-secondary);
  color: var(--text-muted);
}
.sp-item-tag.priority-critical { background: #fee2e2; color: #991b1b; }
.sp-item-tag.priority-high     { background: #fef3c7; color: #92400e; }
.sp-item-tag.priority-medium   { background: #d1fae5; color: #065f46; }
.sp-item-tag.priority-low      { background: var(--bg-secondary); color: var(--text-muted); }
.sp-item-tag.type-tag          { background: #dbeafe; color: #1e40af; }
[data-theme="dark"] .sp-item-tag.priority-critical { background:#7f1d1d40; color:#fca5a5; }
[data-theme="dark"] .sp-item-tag.priority-high     { background:#78350f40; color:#fcd34d; }
[data-theme="dark"] .sp-item-tag.priority-medium   { background:#06402040; color:#6ee7b7; }
[data-theme="dark"] .sp-item-tag.type-tag          { background:#1e3a8a40; color:#93c5fd; }
.sp-item-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  align-items: flex-start;
}
.sp-item-btn {
  background: none;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 3px 8px;
  font-size: 0.72rem;
  cursor: pointer;
  color: var(--text-muted);
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}
.sp-item-btn:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}
.sp-item-btn.queue-btn {
  border-color: var(--accent);
  color: var(--accent);
}
.sp-item-btn.queue-btn:hover {
  background: var(--accent);
  color: #fff;
}
.sp-item-btn.queue-btn.queued {
  background: var(--accent);
  color: #fff;
  cursor: default;
}
.sp-phase-header {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 10px 0 6px;
  margin-top: 8px;
  border-bottom: 1px solid var(--card-border);
  margin-bottom: 8px;
}

/* ─── SEO Queue ─────────────────────────────── */
.sq-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg-secondary);
  border-radius: var(--radius);
  padding: 3px;
}
.sq-tab {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px 12px;
  border-radius: calc(var(--radius) - 2px);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: background 0.15s, color 0.15s;
  display: flex;
  align-items: center;
  gap: 5px;
}
.sq-tab:hover {
  color: var(--text-primary);
}
.sq-tab.active {
  background: var(--card-bg);
  color: var(--text-primary);
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
}
.sq-tab-count {
  background: #ef4444;
  color: #fff;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0 5px;
  min-width: 16px;
  text-align: center;
  line-height: 1.55;
}
.sq-status-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
}
.sq-status-badge.pending  { background: #fef3c7; color: #92400e; }
.sq-status-badge.approved { background: #d1fae5; color: #065f46; }
.sq-status-badge.published{ background: #dbeafe; color: #1e40af; }
.sq-status-badge.rejected { background: #fee2e2; color: #991b1b; }
.sq-status-badge.partial  { background: #ede9fe; color: #5b21b6; }
[data-theme="dark"] .sq-status-badge.pending  { background: #78350f40; color: #fcd34d; }
[data-theme="dark"] .sq-status-badge.approved { background: #06402040; color: #6ee7b7; }
[data-theme="dark"] .sq-status-badge.published{ background: #1e3a8a40; color: #93c5fd; }
[data-theme="dark"] .sq-status-badge.rejected { background: #7f1d1d40; color: #fca5a5; }
[data-theme="dark"] .sq-status-badge.partial  { background: #4c1d9540; color: #c4b5fd; }

.sq-type-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 500;
  background: var(--bg-secondary);
  color: var(--text-muted);
  text-transform: capitalize;
}

/* Detail modal change list */
.sq-changes-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.sq-change-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--card-border);
  background: var(--bg-secondary);
  font-size: 0.85rem;
}
.sq-change-item input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  cursor: pointer;
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
}
.sq-change-item.applied {
  opacity: 0.55;
}
.sq-change-item .sq-change-label {
  flex: 1;
  min-width: 0;
}
.sq-change-item .sq-change-field {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.sq-change-item .sq-change-value {
  color: var(--text-muted);
  word-break: break-word;
}
.sq-detail-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--card-border);
}
.sq-content-preview {
  background: var(--bg-secondary);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 14px;
  font-size: 0.84rem;
  color: var(--text-secondary);
  white-space: pre-wrap;
  max-height: 280px;
  overflow-y: auto;
  line-height: 1.6;
  margin-top: 8px;
}
.sq-meta-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.sq-meta-row strong {
  color: var(--text-primary);
}

/* ─── Floating Chat Widget ──────────────────── */
.chat-widget-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 900;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.22);
  color: #fff;
  transition: transform 0.15s, box-shadow 0.15s;
}
.chat-widget-fab:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 28px rgba(0,0,0,0.28);
}
.chat-widget-fab.chat-fab-open {
  background: var(--text-muted);
}
.chat-widget-fab-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
  border: 2px solid var(--main-bg);
}

.chat-widget-panel {
  position: fixed;
  bottom: 88px;
  right: 24px;
  z-index: 900;
  width: 360px;
  max-width: calc(100vw - 32px);
  height: 480px;
  max-height: calc(100vh - 120px);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 48px rgba(0,0,0,0.22);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: chatPanelIn 0.18s ease;
}
@keyframes chatPanelIn {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.chat-widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--card-border);
  flex-shrink: 0;
}
.chat-widget-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
}
.chat-widget-close {
  background: none;
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
  color: var(--text-muted);
  line-height: 1;
  padding: 0 2px;
}
.chat-widget-close:hover { color: var(--text-primary); }

.chat-widget-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
}

.chat-msg {
  max-width: 88%;
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 0.85rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.chat-msg-user {
  align-self: flex-end;
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-msg-assistant {
  align-self: flex-start;
  background: var(--main-bg);
  border: 1px solid var(--card-border);
  color: var(--text-primary);
  border-bottom-left-radius: 4px;
}

/* Typing dots */
.chat-typing {
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 10px 14px;
}
.chat-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: chatDot 1.2s infinite ease-in-out;
}
.chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes chatDot {
  0%, 80%, 100% { transform: scale(0.7); opacity: 0.5; }
  40%            { transform: scale(1);   opacity: 1;   }
}

.chat-widget-input-area {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--card-border);
  flex-shrink: 0;
}
.chat-widget-input {
  flex: 1;
  resize: none;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 8px 11px;
  font-size: 0.84rem;
  line-height: 1.45;
  background: var(--input-bg, var(--main-bg));
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s;
  font-family: inherit;
  max-height: 120px;
  overflow-y: auto;
}
.chat-widget-input:focus { border-color: var(--accent); }
.chat-widget-send {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}
.chat-widget-send:hover { background: var(--accent-hover, var(--accent)); filter: brightness(1.1); }

@media (max-width: 500px) {
  .chat-widget-panel { right: 0; bottom: 80px; width: 100vw; max-width: 100vw; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .chat-widget-fab   { bottom: 84px; right: 16px; }
}

/* ═══════════════════════════════════════════════
   SEO SECTION — TAB NAVIGATION
   ═══════════════════════════════════════════════ */
.seo-tab-nav {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--card-border);
  margin: 16px 0 0;
  padding: 0;
}
.seo-tab {
  padding: 10px 20px;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.seo-tab:hover { color: var(--text-primary); }
.seo-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.seo-tab-badge {
  background: var(--accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  line-height: 1.4;
}
.seo-tab-panel {
  padding-top: 20px;
}

/* ═══════════════════════════════════════════════
   SEO OVERVIEW TAB
   ═══════════════════════════════════════════════ */

/* Controls */
.seo-ov-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.seo-ov-client-sel { min-width: 180px; }
.seo-ov-loc-sel    { min-width: 150px; }
.seo-ov-refresh-btn { padding: 6px 10px; }
.seo-ov-range-btns {
  display: flex;
  gap: 3px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  padding: 3px;
}
.seo-range-btn {
  padding: 4px 12px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: calc(var(--radius-sm) - 2px);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.seo-range-btn:hover { color: var(--text-primary); }
.seo-range-btn.active {
  background: var(--card-bg);
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

/* Metric cards */
.seo-ov-metrics {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
@media (max-width: 1100px) { .seo-ov-metrics { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 700px)  { .seo-ov-metrics { grid-template-columns: repeat(2, 1fr); } }

.seo-ov-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
}
.seo-ov-card--ahrefs {
  border-top: 2px solid #fb5f2c;
}
.seo-ov-card-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.seo-ov-card-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.seo-ov-card-sub {
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-top: 4px;
}
.seo-ov-card-trend {
  margin-top: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 3px;
  min-height: 16px;
}
.trend-up   { color: #22c55e; }
.trend-down { color: #ef4444; }
.trend-pos-up   { color: #22c55e; } /* position improved (lower number) */
.trend-pos-down { color: #ef4444; } /* position worsened */

/* Main grid: chart + right col */
.seo-ov-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 12px;
  margin-bottom: 12px;
}
@media (max-width: 900px) { .seo-ov-grid { grid-template-columns: 1fr; } }

.seo-ov-chart-wrap {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 16px;
}
.seo-ov-chart-wrap canvas { display: block; }
#seoOvChartPerf, #seoOvChartPos { position: relative; }
.seo-ov-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.seo-ov-chart-tabs {
  display: flex;
  gap: 2px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  padding: 3px;
}
.seo-ov-chart-tab {
  padding: 3px 12px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: calc(var(--radius-sm) - 2px);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.seo-ov-chart-tab.active {
  background: var(--card-bg);
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

.seo-ov-right-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.seo-ov-activity-wrap {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 16px;
  flex: 1;
}
.seo-ov-section-title {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 10px;
}
.seo-ov-activity-list {
  display: flex;
  flex-direction: column;
  max-height: 230px;
  overflow-y: auto;
}
.seo-ov-activity-item {
  padding: 7px 0;
  border-bottom: 1px solid var(--card-border);
}
.seo-ov-activity-item:last-child { border-bottom: none; }
.seo-ov-activity-task {
  font-size: 0.77rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 1px;
}
.seo-ov-activity-meta {
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* Bottom: keyword table + top pages side by side */
.seo-ov-bottom {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 12px;
  margin-top: 0;
}
@media (max-width: 1000px) { .seo-ov-bottom { grid-template-columns: 1fr; } }

.seo-ov-pages-wrap { overflow: hidden; }

.seo-ov-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 8px;
}
.seo-ov-kw-legend {
  display: flex;
  gap: 4px;
}
.seo-ov-kw-table td, .seo-ov-kw-table th { font-size: 0.78rem; }

/* Position badges */
.kw-pos-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
}
.kw-pos-top3  { background: rgba(34,197,94,0.15);  color: #16a34a; }
.kw-pos-top10 { background: rgba(99,102,241,0.12); color: #6366f1; }
.kw-pos-top20 { background: rgba(245,158,11,0.12); color: #d97706; }
.kw-pos-beyond{ background: rgba(239,68,68,0.10);  color: #dc2626; }
.kw-pos-none  { background: var(--bg-secondary);   color: var(--text-muted); }

/* Keyword delta */
.kw-delta-up   { color: #22c55e; font-weight: 700; font-size: 0.78rem; }
.kw-delta-down { color: #ef4444; font-weight: 700; font-size: 0.78rem; }
.kw-delta-flat { color: var(--text-muted); font-size: 0.78rem; }

/* URL truncation in pages table */
.seo-ov-page-url {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.77rem;
  color: var(--text-primary);
}
.seo-ov-page-url a {
  color: inherit;
  text-decoration: none;
}
.seo-ov-page-url a:hover { color: var(--accent); }

/* Tab count badge (e.g. "Plans (3)") */
.seo-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  color: var(--text-muted);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 4px;
}

/* Avg Position — no # prefix, show rank number big */
.seo-ov-position-val { color: var(--text-primary); }

/* Keyword location select + compare selector */
.seo-ov-loc-sel, .seo-ov-compare-sel {
  font-size: 0.75rem;
  padding: 4px 8px;
  height: 28px;
  min-width: 120px;
  max-width: 180px;
}

/* Trend badge — replaces the old inline span styles */
.trend-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
}
.trend-badge.trend-up   { background: rgba(34,197,94,0.12);  color: #16a34a; }
.trend-badge.trend-down { background: rgba(239,68,68,0.10);  color: #dc2626; }

/* Pending approval items */
.seo-ov-queue-item {
  padding: 8px 0;
  border-bottom: 1px solid var(--card-border);
}
.seo-ov-queue-item:last-child { border-bottom: none; }
.seo-ov-queue-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}
.seo-ov-queue-type {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.seo-ov-queue-date { font-size: 0.68rem; color: var(--text-muted); }
.seo-ov-queue-title {
  font-size: 0.77rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.seo-ov-queue-actions { display: flex; gap: 6px; }
.seo-ov-queue-approve, .seo-ov-queue-reject {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: opacity 0.15s;
}
.seo-ov-queue-approve { background: rgba(34,197,94,0.15); color: #16a34a; }
.seo-ov-queue-reject  { background: rgba(239,68,68,0.10);  color: #dc2626; }
.seo-ov-queue-approve:hover { background: rgba(34,197,94,0.25); }
.seo-ov-queue-reject:hover  { background: rgba(239,68,68,0.18); }
.seo-ov-queue-approve:disabled, .seo-ov-queue-reject:disabled { opacity: 0.5; cursor: default; }

/* ── Apply to Website Modal ──────────────────────────────────────────────── */
.apply-row {
  padding: 16px 24px;
  border-bottom: 1px solid var(--card-border);
}
.apply-row:last-child { border-bottom: none; }
.apply-row-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.apply-row-title {
  font-size: 0.875rem;
  color: var(--text-primary);
  font-weight: 600;
}
.apply-row-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0 0 12px;
  line-height: 1.5;
}
.apply-row-type-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}
.apply-type-meta_tags, .apply-type-seo_meta { background: rgba(99,102,241,0.12); color: #6366f1; }
.apply-type-canonical  { background: rgba(251,95,44,0.12);  color: var(--brand-orange); }
.apply-type-schema     { background: rgba(16,185,129,0.12); color: #10b981; }
.apply-type-headings   { background: rgba(245,158,11,0.12); color: #d97706; }
.apply-type-images     { background: rgba(14,165,233,0.12); color: #0ea5e9; }
.apply-type-internal_links { background: rgba(158,107,64,0.12); color: var(--brand-brown); }
.apply-type-sitemap, .apply-type-robots, .apply-type-other { background: var(--card-bg); color: var(--text-muted); }
.apply-row-fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.apply-field-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 2px;
}
.apply-row-manual-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-muted);
  background: var(--card-bg);
  border-radius: var(--radius-md);
  padding: 8px 12px;
}
.apply-row-auto .apply-row-fields .field-input { font-size: 0.82rem; }

/* ─── DM Agents view ───────────────────────────────────────────── */
.dma-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 4px 0 24px;
  border-bottom: 1px solid var(--card-border);
  margin-bottom: 24px;
}
.dma-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 0.82rem;
  margin-top: 6px;
}
.dma-back:hover { border-color: var(--brand-orange); color: var(--brand-orange); }
.dma-title h1 { font-size: 1.75rem; margin: 0 0 4px; font-weight: 600; }
.dma-title p  { color: var(--text-muted); margin: 0; font-size: 0.9rem; }

.dma-list-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.dma-toolbar-info { color: var(--text-muted); font-size: 0.85rem; }

.dma-client-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}
.dma-client-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 18px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dma-client-card:hover { border-color: var(--brand-orange); transform: translateY(-1px); }
.dma-client-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.dma-client-card-name {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 2px;
}
.dma-client-card-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.dma-client-card-badge {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
}
.dma-badge-pilot    { background: rgba(251,95,44,0.15); color: var(--brand-orange); }
.dma-badge-active   { background: rgba(16,185,129,0.15); color: #10b981; }
.dma-badge-pending  { background: rgba(245,158,11,0.15); color: #d97706; }
.dma-badge-disabled { background: rgba(107,114,128,0.15); color: #6b7280; }
.dma-badge-locked   { background: rgba(239,68,68,0.15); color: #ef4444; }

.dma-client-card-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--card-border);
  border-bottom: 1px solid var(--card-border);
}
.dma-stat-label { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 2px; }
.dma-stat-value { font-size: 1.1rem; font-weight: 600; color: var(--text-primary); }
.dma-stat-value.warn { color: #d97706; }
.dma-stat-value.error { color: #ef4444; }

.dma-client-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Drill-down view */
.dma-client-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--card-border);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.dma-client-meta h2 { font-size: 1.5rem; margin: 0 0 6px; font-weight: 600; }
.dma-client-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.dma-client-actions { display: flex; gap: 8px; flex-shrink: 0; }

.dma-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--card-border);
  overflow-x: auto;
  margin-bottom: 20px;
}
.dma-tab {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 10px 16px;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dma-tab:hover { color: var(--text-primary); }
.dma-tab.active {
  color: var(--brand-orange);
  border-bottom-color: var(--brand-orange);
  font-weight: 600;
}
.dma-tab-badge {
  font-size: 0.68rem;
  font-weight: 700;
  background: var(--brand-orange);
  color: white;
  padding: 2px 7px;
  border-radius: 10px;
  line-height: 1.2;
}

.dma-tab-content { padding: 8px 0 40px; }

/* Overview tab */
.dma-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.dma-ov-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.dma-ov-label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 6px; }
.dma-ov-value { font-size: 1.5rem; font-weight: 600; color: var(--text-primary); line-height: 1.2; }
.dma-ov-sub   { font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; }

.dma-section-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 20px 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Conversations / escalations table */
.dma-list { display: flex; flex-direction: column; gap: 6px; }
.dma-list-row {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: border-color 0.1s ease;
}
.dma-list-row:hover { border-color: var(--brand-orange); }
.dma-list-row-main { flex: 1; min-width: 0; }
.dma-list-row-top { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; flex-wrap: wrap; }
.dma-list-row-title { font-weight: 500; color: var(--text-primary); font-size: 0.9rem; }
.dma-list-row-preview { color: var(--text-muted); font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dma-list-row-meta { color: var(--text-muted); font-size: 0.75rem; flex-shrink: 0; text-align: right; }

.dma-status-badge {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 2px 7px;
  border-radius: 10px;
}
.dma-status-active      { background: rgba(16,185,129,0.15); color: #10b981; }
.dma-status-resolved    { background: rgba(107,114,128,0.15); color: #6b7280; }
.dma-status-escalated   { background: rgba(239,68,68,0.15); color: #ef4444; }
.dma-status-abandoned   { background: rgba(245,158,11,0.15); color: #d97706; }
.dma-status-pending     { background: rgba(245,158,11,0.15); color: #d97706; }
.dma-status-acknowledged{ background: rgba(59,130,246,0.15); color: #3b82f6; }

/* Conversation detail */
.dma-convo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
}
.dma-convo-thread { display: flex; flex-direction: column; gap: 8px; }
.dma-msg {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
}
.dma-msg-role {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  flex-shrink: 0;
  width: 70px;
  padding-top: 2px;
}
.dma-msg-body { flex: 1; color: var(--text-primary); font-size: 0.9rem; line-height: 1.5; white-space: pre-wrap; }
.dma-msg-ts { font-size: 0.7rem; color: var(--text-muted); text-align: right; flex-shrink: 0; }
.dma-msg.assistant { border-left: 3px solid var(--brand-orange); }
.dma-msg-feedback { display: flex; gap: 4px; margin-top: 6px; }
.dma-feedback-btn {
  background: transparent;
  border: 1px solid var(--card-border);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 0.75rem;
  cursor: pointer;
  color: var(--text-muted);
}
.dma-feedback-btn:hover { border-color: var(--brand-orange); color: var(--brand-orange); }
.dma-feedback-btn.active-up   { background: rgba(16,185,129,0.15); border-color: #10b981; color: #10b981; }
.dma-feedback-btn.active-down { background: rgba(239,68,68,0.15); border-color: #ef4444; color: #ef4444; }

/* Prompt editor */
.dma-prompt-wrap { display: flex; flex-direction: column; gap: 12px; }
.dma-prompt-textarea {
  width: 100%;
  min-height: 320px;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 0.85rem;
  line-height: 1.5;
  padding: 12px;
  background: var(--card-bg);
  color: var(--text-primary);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  resize: vertical;
}
.dma-prompt-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.dma-prompt-versions { display: flex; flex-direction: column; gap: 6px; }
.dma-prompt-version {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  font-size: 0.82rem;
  cursor: pointer;
}
.dma-prompt-version:hover { border-color: var(--brand-orange); }

/* KB Explorer */
.dma-kb-paragraph {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 8px;
}
.dma-kb-para-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.dma-kb-para-key { font-family: var(--font-mono, monospace); font-size: 0.78rem; color: var(--brand-orange); font-weight: 600; }
.dma-kb-para-len { font-size: 0.72rem; color: var(--text-muted); }
.dma-kb-para-body {
  font-size: 0.85rem;
  color: var(--text-primary);
  line-height: 1.5;
  white-space: pre-wrap;
  max-height: 120px;
  overflow: hidden;
  position: relative;
}
.dma-kb-para-body.expanded { max-height: none; }
.dma-kb-para-expand {
  font-size: 0.75rem;
  color: var(--brand-orange);
  cursor: pointer;
  margin-top: 6px;
  font-weight: 600;
}

/* Sandbox */
.dma-sandbox {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 780px;
}
.dma-sandbox-chat {
  min-height: 300px;
  max-height: 500px;
  overflow-y: auto;
  padding: 12px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
}
.dma-sandbox-input-row {
  display: flex;
  gap: 8px;
}
.dma-sandbox-input {
  flex: 1;
  padding: 10px 14px;
  background: var(--card-bg);
  color: var(--text-primary);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
}
.dma-sandbox-hint { font-size: 0.78rem; color: var(--text-muted); }
.dma-sandbox-notice {
  background: rgba(251,95,44,0.08);
  border: 1px solid rgba(251,95,44,0.3);
  color: var(--brand-orange);
  padding: 10px 12px;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
}

/* Sync log */
.dma-sync-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  margin-bottom: 6px;
}
.dma-sync-counts { font-family: var(--font-mono, monospace); font-size: 0.8rem; display: flex; gap: 10px; }
.dma-sync-count-add    { color: #10b981; }
.dma-sync-count-update { color: #3b82f6; }
.dma-sync-count-delete { color: #ef4444; }
.dma-sync-count-unchanged { color: var(--text-muted); }

.dma-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
  font-size: 0.9rem;
  background: var(--card-bg);
  border: 1px dashed var(--card-border);
  border-radius: var(--radius-md);
}

.card-badge {
  display: inline-block;
  background: var(--brand-orange);
  color: white;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: 6px;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}