/*
 * PRESS PLAY — INSTRUMENT PAPER
 * JarganApiDemo Operations Console
 *
 * Design System: Monochrome industrial interface
 * Inspired by: Bloomberg Terminal, Apollo mission control, e-ink displays
 *
 * Core Principles:
 * - Paper First: Works in pure black and white
 * - 95% Neutral Tones: Monochrome grayscale palette
 * - Color is Signal: Color only for alerts, selection, state changes
 * - Typography as Structure: Size, weight, spacing create hierarchy
 * - Lines Over Surfaces: Rules, dividers, grids instead of filled panels
 * - Calm Density: High information density without chaos
 * - Tool Not Product: Feels like operating an instrument
 * - Theme Independent: Works identically in light and dark
 */

/* ============================================================
   DESIGN TOKENS
   ============================================================ */

:root {
  /* ========== MONOCHROME BASE (95% of UI) ========== */
  /* Higher contrast - deeper blacks per user request */
  --ip-black: #000000;           /* Pure black for text */
  --ip-gray-900: #0d0d0d;        /* Darker gray (deeper black) */
  --ip-gray-800: #1a1a1a;        /* Darker than before */
  --ip-gray-700: #2d2d2d;        /* Dark gray */
  --ip-gray-600: #4d4d4d;        /* Mid-dark gray (higher contrast) */
  --ip-gray-500: #666666;        /* Mid gray */
  --ip-gray-400: #999999;
  --ip-gray-300: #cccccc;
  --ip-gray-200: #e0e0e0;
  --ip-gray-100: #f0f0f0;
  --ip-gray-50: #f8f8f8;
  --ip-white: #ffffff;           /* Pure white for background */

  /* ========== SIGNAL COLORS - USER'S PALETTE ========== */
  /* ["#9d4edd","#ff6d07","#646e3a","#000000","#ffffff"] */
  --ip-signal-alert: #cc0000;    /* Red for errors/critical */
  --ip-signal-warn: #ff6d07;     /* Orange (user's color) */
  --ip-signal-active: #9d4edd;   /* Purple (user's color) for selection/active */
  --ip-signal-success: #646e3a;  /* Olive/green (user's color) for success */

  /* ========== SEMANTIC MAPPING ========== */
  /* Backgrounds */
  --bg-primary: var(--ip-white);
  --bg-secondary: var(--ip-gray-50);
  --bg-tertiary: var(--ip-gray-100);
  --bg-input: var(--ip-white);
  --bg-hover: var(--ip-gray-50);
  --bg-active: var(--ip-black);

  /* Text */
  --text-primary: var(--ip-black);
  --text-secondary: var(--ip-gray-600);
  --text-muted: var(--ip-gray-400);

  /* Borders */
  --border-default: var(--ip-gray-300);
  --border-heavy: var(--ip-gray-700);

  /* Accent Colors (mapped to signal colors - LAW 3) */
  --accent-primary: var(--ip-signal-active);    /* Blue for selections */
  --accent-secondary: var(--ip-signal-success); /* Green for secondary */
  --accent-jargan: var(--ip-signal-active);     /* Blue for brand */

  /* Status Colors (mapped to signal colors - LAW 3) */
  --success: var(--ip-signal-success);  /* Green */
  --warning: var(--ip-signal-warn);     /* Orange */
  --error: var(--ip-signal-alert);      /* Red */

  /* Platform Colors - Monochrome (no decorative color) */
  --instagram: var(--ip-gray-600);
  --facebook: var(--ip-gray-600);

  /* Chart Colors - Grayscale only */
  --chart-1: var(--ip-gray-900);  /* Near black */
  --chart-2: var(--ip-gray-700);  /* Dark gray */
  --chart-3: var(--ip-gray-500);  /* Mid gray */
  --chart-4: var(--ip-gray-300);  /* Light gray */

  /* ========== TYPOGRAPHY SYSTEM (LAW 4) ========== */
  /* Industrial Typewriter Aesthetic */
  --font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code',
               'Roboto Mono', 'Courier New', monospace;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI',
               'Helvetica Neue', Arial, sans-serif;

  /* Type Scale - Hierarchy via Size Only */
  --text-xs: 9px;    /* Fine print, timestamps */
  --text-sm: 11px;   /* Labels, secondary info */
  --text-base: 13px; /* Body text, form inputs */
  --text-md: 15px;   /* Subheadings */
  --text-lg: 18px;   /* Section headers */
  --text-xl: 24px;   /* Page titles */

  /* Weights - Minimal Variation */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  /* Line Heights - Tight, Dense */
  --leading-tight: 1.2;
  --leading-normal: 1.4;
  --leading-relaxed: 1.6;

  /* ========== SPACING SYSTEM (LAW 8 - Calm Density) ========== */
  /* Grid-Based Spacing - 8px base for better alignment */
  --space-unit: 8px;
  --space-0: 0;
  --space-1: 8px;   /* 1 unit - tight */
  --space-2: 16px;  /* 2 units - comfortable */
  --space-3: 24px;  /* 3 units - section spacing */
  --space-4: 32px;  /* 4 units - major sections */
  --space-6: 48px;  /* 6 units - large gaps */
  --space-8: 64px;  /* 8 units - page sections */

  /* ========== LINE WEIGHTS (LAW 5 - Lines Over Surfaces) ========== */
  /* Border System */
  --line-hairline: 1px;  /* Fine rules, subtle dividers */
  --line-normal: 2px;    /* Standard borders */
  --line-heavy: 3px;     /* Emphasis, headers */
  --line-bold: 4px;      /* Active states */
}

/* ========== DARK MODE - toggled via DevTools drawer ========== */
[data-theme="dark"] {
  --bg-primary: var(--ip-black);
  --bg-secondary: var(--ip-gray-900);
  --bg-tertiary: var(--ip-gray-800);
  --bg-input: var(--ip-gray-900);
  --bg-hover: var(--ip-gray-900);
  --bg-active: var(--ip-white);

  --text-primary: var(--ip-white);
  --text-secondary: var(--ip-gray-400);
  --text-muted: var(--ip-gray-600);

  --border-default: var(--ip-gray-700);
  --border-heavy: var(--ip-gray-300);

  --accent-primary: var(--ip-signal-active);  /* Purple stays */
  --accent-jargan: var(--ip-signal-active);
}

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

/* Universal Reset - Remove All Decorative Elements */
* {
  box-shadow: none !important;      /* LAW 5: No shadows */
  text-shadow: none !important;     /* LAW 5: No shadows */
  border-radius: 0 !important;      /* LAW 9: Sharp corners (industrial) */
  transition: none !important;      /* LAW 7: No smooth animations */
}

/* Exception: State Changes (Instant Feedback) */
.state-change {
  transition: background-color 50ms linear !important,
              color 50ms linear !important;
}

/* Base HTML Elements */
html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--bg-primary);
}

/* ============================================================
   LAYOUT STRUCTURE
   ============================================================ */

/* App Container */
.app-container {
  display: flex;
  height: 100vh;
  width: 100%;
  background: var(--bg-primary);
}

/* Overlay (when pack detail open) */
.app-container.overlay::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--ip-black);
  opacity: 0.3;
  z-index: 50;
}

/* Main Content (Left Sidebar) - LAW 8: Calm Density */
.main-content {
  width: 100%;  /* Take full width of parent .app container */
  background: var(--bg-primary);
  border-right: var(--line-heavy) solid var(--border-heavy);
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;  /* Prevent horizontal scroll */
  flex-shrink: 0;
  flex: 1;  /* Allow it to grow to fill available space */
  scrollbar-gutter: stable;  /* Reserve space for scrollbar to prevent layout shift */
  display: flex;
  flex-direction: column;  /* Stack sections vertically */
}

/* Hide scrollbar when content fits */
.main-content::-webkit-scrollbar {
  width: 8px;
}

.main-content::-webkit-scrollbar-track {
  background: transparent;
}

.main-content::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: 0;
}

.main-content::-webkit-scrollbar-thumb:hover {
  background: var(--border-heavy);
}

/* Form Sections */
.form-section {
  padding: 12px;  /* Reduced from 16px to fit on standard monitors without scroll */
  border-bottom: var(--line-hairline) solid var(--border-default);
}

.section-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  margin-bottom: 6px;  /* Reduced from 8px to save vertical space */
  display: block;
}

/* Results Panel (Right Side) */

/* ============================================================
   COMPONENT STYLES (Preserving all 582 CSS classes)
   ============================================================ */


/* ============================================================
   UNICODE/ASCII ICON REPLACEMENTS
   ============================================================ */
/* Lucide icons enabled - all display rules removed */

/* Smart mode sparkles - shown inline before text */
.mode-btn[data-mode="smart"]::before {
  content: '✦ ';
  margin-right: 4px;
  font-size: 14px;
}

/* Hide <i> tags once Lucide replaces them with SVG */
i[data-lucide] {
  display: none !important;
}

/* Ensure SVG icons from Lucide are visible */
svg.lucide {
  display: inline-block !important;
}

/* Chevron arrows for navigation and toggles - fallback only */
i[data-lucide="chevron-down"]::before { content: '∨'; display: inline-block; font-size: 14px; }
i[data-lucide="chevron-up"]::before { content: '∧'; display: inline-block; font-size: 14px; }
i[data-lucide="chevron-left"]::before { content: '‹'; display: inline-block; font-size: 16px; }
i[data-lucide="chevron-right"]::before { content: '›'; display: inline-block; font-size: 16px; }

/* Close buttons - prominent X symbol */
i[data-lucide="x"]::before {
  content: '×';
  display: inline-block;
  font-size: 20px;
  line-height: 1;
  font-weight: 300;
}

/* Menu/hamburger icon */
i[data-lucide="menu"]::before {
  content: '≡';
  display: inline-block;
  font-size: 18px;
  font-weight: 300;
}

/* Theme toggle icons */
i[data-lucide="sun"]::before { content: '☀'; display: inline-block; font-size: 16px; }
i[data-lucide="moon"]::before { content: '☾'; display: inline-block; font-size: 16px; }

/* Code/braces for JSON viewer */
i[data-lucide="braces"]::before {
  content: '{}';
  display: inline-block;
  font-family: monospace;
  font-size: 14px;
}

/* List icon for tab navigation */
i[data-lucide="list"]::before { content: '☰'; display: inline-block; font-size: 16px; }

/* Calendar icon */
i[data-lucide="calendar"]::before { content: '⬚'; display: inline-block; font-size: 16px; }

/* Clipboard icon for copy button */
i[data-lucide="clipboard"]::before {
  content: '⎘';
  display: inline-block;
  font-size: 18px;
  line-height: 1;
}

/* Bar chart icon */
i[data-lucide="bar-chart-2"]::before {
  content: '▬';
  display: inline-block;
  font-size: 16px;
}

.app-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* Draggable title bar area */
.app-container::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  -webkit-app-region: drag;
  z-index: 50;
}

.app {
  width: 400px;  /* Slightly wider */
  min-width: 400px;
  max-width: 400px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 12px var(--space-3);  /* Reduced vertical from 16px to 12px */
  padding-top: 32px; /* Space for traffic lights */
  overflow: visible; /* No scroll */
  height: 100vh; /* Full viewport height */
  box-sizing: border-box;
}

/* ============================================
   Header
   ============================================ */

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
  -webkit-app-region: drag;
}

.header-title {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 16px;
  font-weight: 600;
}

.logo {
  color: var(--text-primary);
  font-weight: 700; /* Ensure strong visibility */
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.jargan-mark {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex-shrink: 0;
}

.logo.jargan {
  color: var(--ip-black) !important; /* Force black in light mode */
  font-weight: 700;
}

/* Dark mode override */
@media (prefers-color-scheme: dark) {
  .logo.jargan {
    color: var(--ip-white) !important;
  }
}

.arrow {
  color: var(--text-muted);
  font-size: 14px;
}

.header-right {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  -webkit-app-region: no-drag;
}

.connection-status {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 11px;
  color: var(--text-secondary);
}

/* Theme Toggle */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: 0;
  cursor: pointer;
  font-size: 14px;
  transition: all var(none);
  position: relative;
}

.theme-toggle:hover {
  background: var(--bg-hover);
  border-color: var(--ip-black);
}

/* Riziki Mode Toggle */
.riziki-mode-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: transparent;
  border: 1.5px solid var(--border-default);
  border-radius: 0;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  transition: all var(none);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.riziki-mode-toggle:hover {
  background: var(--bg-hover);
  border-color: var(--ip-black);
}

.riziki-mode-toggle.active {
  background: var(--bg-tertiary);
  border-color: var(--border-default);
  color: white;
}

.riziki-mode-toggle.active .riziki-icon {
  filter: brightness(0) invert(1);
}

.riziki-icon {
  font-size: 12px;
}

.riziki-label {
  line-height: 1;
}

.theme-icon-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--text-primary);
}

.theme-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity var(none), transform var(none);
}

.theme-icon svg {
  width: 16px;
  height: 16px;
}

/* Light theme: show sun, hide moon */
.theme-icon.light {
  opacity: 1;
  transform: scale(1);
}

.theme-icon.dark {
  opacity: 0;
  transform: scale(0.5);
}

/* Dark theme: show moon, hide sun */
body.dark-theme .theme-icon.light {
  opacity: 0;
  transform: scale(0.5);
}

body.dark-theme .theme-icon.dark {
  opacity: 1;
  transform: scale(1);
}

.menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: 0;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 14px;
  transition: all var(none);
}

.menu-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--ip-black);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 0;
  background: var(--warning);
  transition: background var(none);
}

.status-dot.connected {
  background: var(--success);
}

.status-dot.starting {
  background: var(--warning);
  animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

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

/* ============================================
   Settings Dropdown
   ============================================ */

.settings-dropdown {
  position: absolute;
  top: 70px;
  right: var(--space-3);
  width: 280px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: 0;
  z-index: 100;
  display: none;
}

.settings-dropdown.open {
  display: block;
}

.settings-content {
  padding: var(--space-3);
}

.btn-sm {
  padding: var(--space-2) var(--space-3);
  font-size: 12px;
}

/* ============================================
   Mode Toggle (Smart vs Manual)
   ============================================ */

.mode-toggle {
  display: flex;
  gap: 0;
  border: 2px solid var(--border-default);  /* Heavy border - industrial */
  border-radius: 0;
  overflow: hidden;
}

.mode-btn {
  flex: 1;
  padding: 10px 16px;
  background: var(--bg-primary);
  border: none;
  border-right: 1px solid var(--border-default);  /* Hairline divider */
  border-radius: 0;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
  cursor: pointer;
  transition: none;  /* No smooth transitions */
}

.mode-btn:last-child {
  border-right: none;
}

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

.mode-btn.active {
  background: var(--accent-primary);  /* Black background */
  color: var(--bg-primary);  /* White text */
  font-weight: 700;
}

/* ============================================
   Objective Grid (Smart Mode)
   ============================================ */

/* Objective section expands to fill available space */
#objectiveSection {
  flex: 1;  /* Grow to fill space freed by sticky buttons at bottom */
  display: flex;
  flex-direction: column;
  min-height: 0;  /* Allow flex shrinking */
}

.objective-grid {
  display: flex;
  flex-direction: column;  /* Stack vertically, no grid */
  gap: var(--space-1);  /* Tighter spacing between cards */
  flex: 1;  /* Expand to fill parent section */
  overflow-y: auto;  /* Scroll if needed */
  overflow-x: hidden;
}

.objective-card {
  display: flex;
  align-items: center;  /* Center align all items */
  gap: var(--space-1);  /* Consistent 8px internal spacing */
  padding: var(--space-2);  /* Consistent 16px padding */
  background: var(--bg-input);
  border: 2px solid var(--border-default);
  border-radius: 0;
  cursor: pointer;
  transition: none;
  width: 100%;
  box-sizing: border-box;
  position: relative;  /* For absolute positioning of selection box */
}

.objective-card:hover {
  background: var(--bg-hover);
  border-color: var(--border-heavy);
}

.objective-card.active {
  border-color: var(--border-default);  /* Keep default border */
  background: var(--bg-secondary);
}

.objective-icon {
  font-size: 20px;
  flex-shrink: 0;
  width: 24px;  /* Fixed square size */
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);  /* Monochrome by default */
}

.objective-card.active .objective-icon {
  color: var(--accent-primary);  /* Color only when selected */
}

.objective-icon svg,
.objective-icon i {
  width: 20px;
  height: 20px;
}

.objective-content {
  flex: 1;
  min-width: 0;  /* Allow flex shrinking */
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;  /* Prevent text overflow */
}

.objective-name {
  display: block;
  font-size: 13px;  /* Slightly smaller for better fit */
  font-weight: 700;  /* Bolder */
  color: var(--text-primary);
  line-height: 1.3;
  word-wrap: break-word;  /* Allow wrapping */
  overflow-wrap: break-word;
  white-space: normal;  /* Allow multi-line */
}

.objective-desc {
  display: block;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;  /* Better line spacing */
  display: -webkit-box;
  -webkit-line-clamp: 2;  /* Max 2 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Selection indicator box on the RIGHT side */
.objective-selection-indicator {
  flex-shrink: 0;
  width: 20px;  /* Smaller, more refined checkbox */
  height: 20px;
  background: var(--bg-primary);
  border: 2px solid var(--border-heavy);  /* Heavier border for clarity */
  border-radius: 0;
  margin-left: auto;  /* Push to far right */
  transition: none;
  position: relative;
}

/* Checkmark when goal is selected - grayscale legible */
.objective-card.active .objective-selection-indicator {
  background: var(--ip-black);  /* Black fill when selected */
  border-color: var(--ip-black);
}

/* Add checkmark symbol using CSS */
.objective-card.active .objective-selection-indicator::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 6px;
  height: 10px;
  border: solid var(--ip-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Gear icon button on the LEFT side */
.objective-detail-btn {
  flex-shrink: 0;
  background: transparent;
  border: none;  /* No border - cleaner look */
  cursor: pointer;
  color: var(--text-muted);
  font-size: 18px;
  padding: 0;
  border-radius: 0;
  opacity: 0.5;
  transition: opacity var(none), color var(none);
  order: -2;  /* Move to far left */
  align-self: center;
  line-height: 1;
  width: 24px;  /* Smaller, just for icon */
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--space-2);  /* Small gap from main icon */
}

.objective-card:hover .objective-detail-btn {
  opacity: 0.8;
}

.objective-detail-btn:hover {
  opacity: 1;
  color: var(--text-primary);
}

.objective-detail-btn.active {
  opacity: 1;
  color: var(--accent-primary);
}

.objective-detail-btn svg,
.objective-detail-btn i {
  width: 18px;
  height: 18px;
  display: block;
}

/* Objective chevron for inline preview */
.objective-chevron {
  margin-left: 4px;
  font-size: 10px;
  color: var(--text-muted);
  flex-shrink: 0;
  cursor: pointer;
}

.objective-card.active .objective-chevron {
  color: var(--text-primary);
}

.objective-card.preview-open .objective-chevron {
  transform: rotate(90deg);
}

/* Inline preview drawer per objective */
.objective-preview-drawer {
  display: none;
  border: 1px solid var(--border-default);
  border-top: none;
  background: var(--bg-secondary);
  padding: var(--space-2) var(--space-3);
  font-size: 11px;
}

.objective-preview-drawer.open {
  display: block;
}

/* Two-column layout: channels left, voices right */
.objective-preview-drawer .preview-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.objective-preview-drawer .preview-column {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.objective-preview-drawer .preview-column-label {
  font-size: 9px;
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid var(--border-default);
  padding-bottom: 3px;
  margin-bottom: 2px;
}

.objective-preview-drawer .preview-column-label svg {
  width: 10px;
  height: 10px;
}

.objective-preview-drawer .preview-packs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
}

.objective-preview-drawer .preview-pack {
  font-size: 10px;
  padding: 2px 6px;
  border: 1px solid var(--border-default);
  background: var(--bg-primary);
  cursor: pointer;
}

.objective-preview-drawer .preview-pack:hover {
  border-color: var(--text-primary);
}

.objective-preview-drawer .preview-adjustments {
  font-size: 10px;
  margin-top: 6px;
  color: var(--text-secondary);
  grid-column: 1 / -1;
}

.objective-preview-drawer .preview-loading {
  padding: var(--space-1);
  font-size: 11px;
  color: var(--text-muted);
}

/* Old .objective-expand styles removed - replaced with .objective-selection-indicator and .objective-detail-btn */

/* Developer toggle for showing internal Master Plan name */
.objective-dev-toggle {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 12px;
  padding: 4px 6px;
  opacity: 0.7;
  transition: opacity var(none), color var(none);
  align-self: center;
}

.objective-card:hover .objective-dev-toggle {
  opacity: 0.9;
}

.objective-dev-toggle:hover,
.objective-dev-toggle.active {
  opacity: 1;
  color: var(--accent-jargan);
}

.objective-dev-info {
  display: none;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 4px 6px;
  background: rgba(64, 64, 64, 0.1);
  border-radius: 0;
  font-family: 'SF Mono', 'Menlo', monospace;
}

.objective-dev-info .dev-label {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.objective-dev-info .dev-value {
  font-size: 10px;
  color: var(--accent-jargan);
  font-weight: 600;
}

.objective-dev-info .dev-id {
  font-size: 9px;
  color: var(--text-muted);
  margin-left: auto;
}

/* Pack detail body - description text */
.pack-objective-desc {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-top: var(--space-1);
}

/* ============================================
   Preview Card (Smart Mode)
   ============================================ */

.preview-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: 12px;
  padding: var(--space-3);
}

.preview-packs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.preview-pack {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: var(--bg-tertiary);
  border-radius: 0;
  font-size: 10px;
  color: var(--text-secondary);
  transition: all var(none);
}

.preview-pack.clickable {
  cursor: pointer;
}

.preview-pack.clickable:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.preview-pack-icon {
  font-size: 12px;
}

.preview-pack-arrow {
  font-size: 12px;
  opacity: 0.5;
  margin-left: 2px;
}

.preview-pack.clickable:hover .preview-pack-arrow {
  opacity: 1;
}

/* Adjustments UI */
.preview-adjustments {
  font-size: 10px;
  color: var(--text-muted);
}

.preview-adjustments-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.preview-adjustment-count {
  color: var(--accent-primary);
  font-weight: 600;
}

.preview-adjustments-toggle {
  padding: 2px 6px;
  font-size: 9px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: 0;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(none);
}

.preview-adjustments-toggle:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.preview-adjustments-list {
  margin-top: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 150px;
  overflow-y: auto;
}

.preview-adjustment-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 6px 8px;
  background: var(--bg-tertiary);
  border-radius: 0;
  cursor: pointer;
  transition: all var(none);
}

.preview-adjustment-item:hover {
  background: var(--bg-hover);
}

.preview-adjustment-item input[type="checkbox"] {
  margin-top: 2px;
  accent-color: var(--accent-primary);
}

.adjustment-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.adjustment-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 0;
  font-size: 10px;
  font-weight: 700;
}

.adjustment-type.frequencyincrease {
  background: rgba(153, 153, 153, 0.1);
  color: var(--success);
}

.adjustment-type.stageremoval {
  background: rgba(204, 204, 204, 0.1);
  color: var(--error);
}

.adjustment-desc {
  flex: 1;
  font-size: 10px;
  color: var(--text-secondary);
  min-width: 0;
}

.adjustment-impact {
  font-size: 9px;
  color: var(--success);
  font-weight: 600;
  white-space: nowrap;
}

.preview-no-adjustments {
  color: var(--success);
  font-style: italic;
}

/* ============================================
   Dev Tools Drawer
   ============================================ */

.btn-devtools {
  width: 100%;  /* Full width within parent padding */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);  /* Reduced from space-2 (16px) to space-1 (8px) */
  padding: 10px;  /* Reduced from space-3 (12px) to 10px */
  margin-top: var(--space-1);  /* Reduced from space-2 (16px) to space-1 (8px) */
  background: var(--bg-secondary);
  border: 2px solid var(--border-heavy);
  border-radius: 0;
  cursor: pointer;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  transition: all var(none);
  position: relative;
  z-index: 10;
  box-sizing: border-box;
}

.btn-devtools:hover {
  background: var(--bg-hover);
  border-color: var(--ip-black);
  color: var(--text-primary);
}

.btn-devtools.active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: white;
}

.devtools-icon {
  font-size: 14px;
}

.devtools-label {
  line-height: 1;
}

.devtools-drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 400px;  /* Full width of sidebar */
  max-height: 60vh;
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-bottom: none;
  border-left: none;
  border-top-right-radius: var(--line-hairline);
  z-index: 1000;
  display: none;
  flex-direction: column;
  overflow: hidden;
}

.devtools-drawer.open {
  display: flex;
}

.devtools-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-default);
}

.devtools-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.devtools-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 14px;
  transition: all var(none);
}

.devtools-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.devtools-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.devtools-footer {
  display: flex;
  border-top: 1px solid var(--border-default);
  flex-shrink: 0;
}

.devtools-footer-btn {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: all var(none);
}

.devtools-footer-save {
  color: var(--text-primary);
  border-right: 1px solid var(--border-default);
}

.devtools-footer-save:hover {
  background: var(--bg-hover);
}

.devtools-footer-close {
  color: var(--text-secondary);
}

.devtools-footer-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* O&R Branding in DevTools */
.devtools-branding {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--border-default);
  opacity: 0.3;
  transition: opacity 0.2s ease;
  flex-shrink: 0;
}

.devtools-branding:hover {
  opacity: 0.6;
}

.or-icon {
  width: 14px;
  height: 15px;
  color: var(--text-primary);
  flex-shrink: 0;
}

.or-text {
  font-family: 'STIXGeneral', 'Times New Roman', Georgia, serif;
  font-size: 11px;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}

.devtools-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.devtools-section-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.devtools-row {
  display: flex;
  gap: var(--space-1);
}

.devtools-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: 0;
  cursor: pointer;
  transition: all var(none);
}

.devtools-item-half {
  flex: 1;
  min-width: 0;
}

.devtools-item:hover {
  background: var(--bg-hover);
  border-color: var(--ip-black);
}

.devtools-item.active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: white;
}

.devtools-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--text-primary);
}

.devtools-item-icon svg {
  width: 16px;
  height: 16px;
}

.devtools-item.active .devtools-item-icon {
  color: white;
}

.devtools-item-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
}

.devtools-toggle-item {
  padding: var(--space-2);
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: 0;
}

.devtools-toggle-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
}

.devtools-toggle-text {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
}

.devtools-toggle-hint {
  font-size: 10px;
  color: var(--text-muted);
}

.devtools-checkbox {
  margin-right: var(--space-1);
}

/* ============================================
   Collapsible Section Header
   ============================================ */

/* ============================================
   Domain Tabs (Demo Mode Selector)
   ============================================ */

.domain-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;  /* Hairline gap */
  border: 2px solid var(--border-default);  /* Heavy outer border - industrial */
  border-radius: 0;
  background: var(--border-default);  /* Gap color */
  padding: 2px;
  transition: opacity 200ms ease, max-height 200ms ease;
  overflow: hidden;
}

.domain-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 8px;  /* Reduced from 12px to 8px vertical */
  background: var(--bg-primary);
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: none;  /* No smooth transitions */
  position: relative;
}

.domain-tab:hover {
  background: var(--bg-secondary);
}

.domain-tab.active {
  background: #000000 !important;  /* Force pure black background */
  color: #ffffff !important;  /* Force pure white text */
}

.domain-tab.active::before {
  /* Signal dot - color indicator for active state */
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-radius: 0;  /* Square dot */
  background: var(--success);  /* Green signal */
}

.domain-tab.active .domain-name {
  color: #ffffff !important;  /* Force pure white text */
}

.domain-tab.active .domain-icon {
  color: #ffffff !important;  /* Force pure white icon */
}

.domain-tab.active svg {
  color: #ffffff !important;  /* Force white for Lucide SVG icons */
  stroke: #ffffff !important;
  fill: none !important;
}

.domain-tab.active i {
  color: #ffffff !important;
}

.domain-icon {
  font-size: 20px;
  line-height: 1;
  color: var(--text-secondary);  /* Match text color for inactive state */
}

/* Ensure Lucide SVG icons match the gray text in inactive state */
.domain-tab:not(.active) .domain-icon svg {
  color: var(--text-secondary);
  stroke: var(--text-secondary);
}

.domain-name {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

/* Domain Icons - Hide fallback glyphs since Lucide provides SVG icons */
.domain-tab[data-domain="Restaurant"] .domain-icon::before,
.domain-tab[data-domain="Real Estate"] .domain-icon::before,
.domain-tab[data-domain="Music"] .domain-icon::before,
.domain-tab[data-domain="Filmmaker"] .domain-icon::before {
  display: none !important;
}

/* Domain-specific accent colors */
.domain-tab[data-domain="Restaurant"].active {
  background: var(--bg-tertiary);
  border-color: var(--border-default);
}

.domain-tab[data-domain="Real Estate"].active {
  background: var(--bg-tertiary);
  border-color: var(--border-default);
}

.domain-tab[data-domain="Music"].active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
}

.domain-tab[data-domain="Filmmaker"].active {
  background: var(--bg-tertiary);
  border-color: var(--border-default);
}

/* ============================================
   Form Elements
   ============================================ */

.form-section {
  margin-bottom: 6px;  /* Reduced from 8px to eliminate scroll on standard monitors */
}

.form-row {
  display: flex;
  gap: var(--space-3);
}

.form-col {
  flex: 1;
  min-width: 0;  /* Allow flex items to shrink below content size */
}

.form-col-wide {
  flex: 1.6;  /* Give duration column more space for 4 buttons */
}

.form-col .slider {
  width: 100%;
}

.section-label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hint {
  font-weight: 400;
  text-transform: none;
  color: var(--text-muted);
}

.form-group {
  margin-bottom: 12px;  /* Reduced from 16px to eliminate scroll on standard monitors */
}

.form-group label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: 11px;
  color: var(--text-secondary);
}

/* Inputs */
.text-input,
.select-input,
.date-input,
.settings-content input {
  width: 100%;
  padding: 10px 12px;  /* Fixed padding for consistent height */
  background: var(--bg-input);
  border: 2px solid var(--border-default);
  border-radius: 0;
  color: var(--text-primary);
  font-size: 13px;
  font-family: var(--font-sans);
  line-height: 1.4;
  transition: all var(none);
  box-sizing: border-box;
  min-width: 0;
  height: 40px;  /* Fixed height for alignment */
}

.text-input:focus,
.select-input:focus,
.date-input:focus,
.settings-content input:focus {
  outline: none;
  border-color: var(--ip-black);
  background: var(--bg-secondary);
}

.select-input {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a0a0a0' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

.date-input {
  color-scheme: light;
}

/* Duration Toggle - Industrial radio button group */
.duration-toggle {
  display: flex;
  gap: 0;
  border: 2px solid var(--border-default);  /* Heavy outer border */
  border-radius: 0;
  overflow: hidden;
}

.duration-btn {
  flex: 1;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  background: var(--bg-primary);
  border: none;
  border-right: 1px solid var(--border-default);  /* Hairline dividers */
  border-radius: 0;
  text-align: center;
  color: var(--text-secondary);
  cursor: pointer;
  transition: none;  /* No smooth transitions */
}

.duration-btn:last-child {
  border-right: none;
}

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

.duration-btn.active {
  background: var(--accent-primary);  /* Black background */
  color: var(--bg-primary);  /* White text */
  font-weight: 700;
}

/* ============================================
   Checkbox & Radio
   ============================================ */

.checkbox-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1);
  max-height: 140px;  /* ~4 rows */
  overflow-y: auto;
  padding-right: var(--space-1);
}

.checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  border-radius: 0;
  cursor: pointer;
  transition: all var(none);
  font-size: 11px;
}

.checkbox-label:hover {
  background: var(--bg-hover);
  border-color: var(--ip-black);
}

.checkbox-label input {
  accent-color: var(--text-primary);
}

.checkbox-label.checked {
  background: var(--bg-hover);
}

/* Channel Groups - Row per Platform with Scroll */
.channel-groups {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 88px;
  overflow-y: auto;
  padding-right: 4px;
}

.channel-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.channel-group-header {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 70px;
  flex-shrink: 0;
}

.channel-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Channel Chips */
.channel-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  font-size: 10px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: 0;
  cursor: pointer;
  transition: all var(none);
  user-select: none;
  color: var(--text-secondary);
}

.channel-chip:hover {
  background: var(--bg-hover);
  border-color: var(--text-muted);
}

.channel-chip.selected {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: white;
}

.channel-chip input[type="checkbox"] {
  display: none;
}

.channel-chip .chip-check {
  font-size: 8px;
}

.channel-chip:not(.selected) .chip-check {
  display: none;
}

.no-channels {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  padding: var(--space-2);
}

/* ============================================
   Slider
   ============================================ */

.slider-container {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.slider-label {
  font-size: 10px;
  color: var(--text-muted);
  min-width: 30px;
}

.slider-label:last-child {
  text-align: right;
}

.slider {
  flex: 1;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--border-default);
  border-radius: 0;
  outline: none;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background: var(--text-primary);
  border-radius: 0;
  cursor: pointer;
  transition: transform var(none);
}

.slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

.intensity-value {
  font-weight: 600;
  color: var(--text-primary);
}

/* ============================================
   Buttons
   ============================================ */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--accent-primary);  /* Heavy border - industrial */
  border-radius: 0;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: none;  /* No smooth transitions */
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  border-color: var(--border-default);
  color: var(--text-muted);
}

/* Generate controls group — visual cohesion for Duration/Start Date/Intensity/Generate */
.generate-controls {
  border-top: 2px solid var(--border-default);
  padding: var(--space-2);
  margin-top: auto;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.generate-controls .form-section {
  padding: 0;
}

/* Sticky button container pinned to bottom */
.sticky-buttons {
  position: sticky;
  bottom: 0;
  background: var(--bg-primary);
  border-top: var(--line-normal) solid var(--border-heavy);
  padding: var(--space-2);  /* Consistent 16px padding */
  display: flex;
  flex-direction: column;
  gap: var(--space-1);  /* Tighter gap between buttons */
  z-index: 10;
  margin-top: auto;  /* Push to bottom in flex layout */
  flex-shrink: 0;  /* Prevent shrinking */
  /* Shadow removed for cleaner instrument aesthetic */
}

.btn-primary {
  background: var(--accent-primary);  /* Black background */
  color: var(--bg-primary);  /* White text */
  border-color: var(--accent-primary);
}

.btn-primary:hover:not(:disabled) {
  background: var(--bg-primary);  /* Invert on hover */
  color: var(--accent-primary);
}

.btn-secondary {
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 2px solid var(--border-default);
}

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

.btn-loading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 0;
  animation: spin 0.8s linear infinite;
}

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

/* ============================================
   Jargan 3-Circle Loading Animation
   ============================================ */

.jargan-loader {
  position: relative;
  width: 32px;
  height: 32px;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

.jargan-loader-dot {
  position: absolute;
  width: 9px;
  height: 9px;
  background: var(--accent-primary, #667eea);
  border-radius: 50%;
}

/* Circle 1: starts top-right */
.jargan-loader-c1 {
  top: 6px;
  left: 17px;
  animation: jLoad1 2.5s ease-in-out infinite;
}

/* Circle 2: starts bottom-right */
.jargan-loader-c2 {
  top: 17px;
  left: 17px;
  animation: jLoad2 2.5s ease-in-out infinite;
}

/* Circle 3: starts bottom-left */
.jargan-loader-c3 {
  top: 17px;
  left: 6px;
  animation: jLoad3 2.5s ease-in-out infinite;
}

@keyframes jLoad1 {
  0% { top: 6px; left: 17px; }
  25%, 50%, 75% { top: 6px; left: 6px; }
  100% { top: 17px; left: 6px; }
}

@keyframes jLoad2 {
  0%, 25% { top: 17px; left: 17px; }
  50%, 75%, 100% { top: 6px; left: 17px; }
}

@keyframes jLoad3 {
  0%, 25%, 50% { top: 17px; left: 6px; }
  75%, 100% { top: 17px; left: 17px; }
}

/* White dots when inside primary button */
.btn-primary .jargan-loader-dot {
  background: var(--ip-white, #fff);
}

/* Small variant: scales the 32px loader down to 14px */
.jargan-loader-sm {
  display: inline-block;
  width: 14px;
  height: 14px;
  position: relative;
  vertical-align: middle;
  flex-shrink: 0;
}

.jargan-loader-sm .jargan-loader {
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(0.4375);
  transform-origin: 0 0;
}

/* ============================================
   Divider
   ============================================ */

.divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-6) 0;
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-default);
}

/* ============================================
   Schedule List
   ============================================ */

.schedule-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-height: 100px;
  overflow-y: auto;
}

.schedule-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-input);
  border-radius: 0;
  font-size: 12px;
  color: var(--text-secondary);
}

.schedule-item::before {
  content: '•';
  color: var(--text-muted);
}

.schedule-item.active {
  color: var(--accent-secondary);
}

.schedule-item.active::before {
  color: var(--accent-secondary);
}

/* ============================================
   Results Section
   ============================================ */

.results-section {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-default);
}

.results-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);  /* Reduced from space-3 for compact layout */
}

.results-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.results-count {
  font-size: 12px;
  color: var(--text-muted);
  padding: 2px 8px;
  background: var(--bg-tertiary);
  border-radius: 0;
}

.copy-btn {
  margin-left: auto;
  padding: var(--space-1) var(--space-2);
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: 0;
  cursor: pointer;
  font-size: 14px;
  transition: all var(none);
}

.copy-btn:hover {
  background: var(--bg-hover);
  border-color: var(--ip-black);
}

/* Results Table */
.table-container {
  max-height: 250px;
  overflow-y: auto;
  border: 1px solid var(--border-default);
  border-radius: 0;
}

.results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.results-table th {
  position: sticky;
  top: 0;
  background: var(--bg-tertiary);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-default);
}

.results-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-default);
  color: var(--text-primary);
}

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

.results-table tr:hover td {
  background: var(--bg-hover);
}

.results-table tr.selected td {
  background: var(--bg-tertiary);
}

/* Expandable deliverable detail rows */
.deliverable-detail-row {
  display: none;
}

.deliverable-detail-row.visible {
  display: table-row;
}

.deliverable-detail-row td {
  background: var(--bg-secondary);
  padding: var(--space-2) var(--space-3);
}

.deliverable-detail {
  font-size: 12px;
  line-height: 1.6;
}

.deliverable-detail-field {
  margin-bottom: var(--space-1);
}

.deliverable-detail-field:last-child {
  margin-bottom: 0;
}

.deliverable-detail-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.deliverable-detail-value {
  color: var(--text-primary);
}

/* Platform badge in deliverable detail */
.deliverable-platform-badge {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 6px;
  border: 1px solid var(--border-default);
  font-size: 10px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.deliverable-row {
  cursor: pointer;
}

.deliverable-row.expanded td {
  border-bottom-color: transparent;
}

/* Brief Preview */
.brief-preview {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: 0;
}

.brief-header {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.brief-content {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-primary);
}

/* JGN Viewer */
.jgn-toggle {
  margin-top: var(--space-3);
}

.jgn-viewer {
  margin-top: var(--space-2);
  max-height: 200px;
  overflow: auto;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: 0;
}

.jgn-viewer pre {
  padding: var(--space-3);
  margin: 0;
  font-family: 'SF Mono', Monaco, 'Courier New', monospace;
  font-size: 10px;
  line-height: 1.5;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-all;
}

/* ============================================
   Scrollbar
   ============================================ */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
  border-radius: 0;
}

::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--ip-black);
}

/* ============================================
   Toast Notifications
   ============================================ */

.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  padding: var(--space-2) var(--space-4);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: 0;
  font-size: 12px;
  color: var(--text-primary);
  opacity: 0;
  transition: all var(none);
  z-index: 1000;
}

.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.toast.success {
  border-color: var(--success);
  background: rgba(153, 153, 153, 0.1);
}

.toast.error {
  border-color: var(--error);
  background: rgba(204, 204, 204, 0.1);
}

/* ============================================
   Results Drawer Panel
   ============================================ */

.results-panel {
  flex: 1;
  min-width: 0;
  background: var(--bg-primary);
  border-left: 1px solid var(--border-default);
  display: none;
  flex-direction: column;
  overflow: hidden;
}

.results-panel.visible {
  display: flex;
}

/* Compact Header */
.results-panel-header {
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-default);
  flex-shrink: 0;
  -webkit-app-region: drag;
  padding: var(--space-1) var(--space-3);
  padding-top: 36px; /* Space for traffic lights */
}

.results-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.results-header-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.results-header-right {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  -webkit-app-region: no-drag;
}

.schedule-name-input-compact {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0;
  padding: 2px 6px;
  transition: all 0.2s ease;
  width: 100%;
  letter-spacing: -0.01em;
}

.schedule-name-input-compact::placeholder {
  color: var(--text-tertiary);
  font-weight: 600;
}

.schedule-name-input-compact:hover {
  border-color: var(--border-default);
  background: var(--bg-secondary);
}

.schedule-name-input-compact:focus {
  outline: none;
  border-color: var(--accent-primary);
  background: var(--bg-primary);
}

.results-meta-compact {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.results-meta-compact #resultsCount {
  font-weight: 600;
  color: var(--text-secondary);
}

.view-tabs-compact {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: 0;
}

.view-tab-compact {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: 0;
  cursor: pointer;
  font-size: 14px;
  transition: all var(none);
  color: var(--text-primary);
}

.view-tab-compact:hover {
  background: var(--bg-hover);
  border-color: var(--ip-black);
  color: var(--text-primary);
}

.view-tab-compact.active {
  background: var(--accent-primary);
  color: var(--ip-white);
  border-color: var(--accent-primary);
}

.view-tab-compact .tab-icon {
  line-height: 1;
}

.results-header-info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.results-header-info .results-count {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.results-meta {
  font-size: 11px;
  color: var(--text-muted);
}

.results-panel-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  -webkit-app-region: no-drag;
}

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--bg-primary);
  border: 2px solid var(--border-default);  /* Heavy border */
  border-radius: 0;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: none;  /* No smooth transitions */
  color: var(--text-primary);
}

.icon-btn:hover {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--bg-primary);
}

.icon-btn.close-btn {
  background: var(--bg-primary);
  border-color: var(--border-default);
}

.icon-btn.close-btn:hover {
  background: var(--accent-primary);
  color: var(--bg-primary);
}

.results-panel-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary);
}

/* Results Layout - Stacked (Schedule + Viz Drawer) */
.results-layout {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.results-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 0;
  overflow: hidden;
  padding: var(--space-2) var(--space-3);
  position: relative;
}

.schedule-name-header {
  text-align: center;
  margin-bottom: var(--space-2);  /* Reduced from space-3 for compact layout */
  padding-bottom: var(--space-2);  /* Reduced from space-3 for compact layout */
  border-bottom: 1px solid var(--border-default);
}

.schedule-name-input {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  background: transparent;
  border: 2px solid transparent;
  border-radius: 0;
  padding: var(--space-2) var(--space-3);
  text-align: center;
  transition: all 0.2s ease;
  width: 100%;
  max-width: 600px;
  letter-spacing: -0.02em;
}

.schedule-name-input::placeholder {
  color: var(--text-tertiary);
  font-weight: 600;
}

.schedule-name-input:hover {
  border-color: var(--border-default);
  background: var(--bg-secondary);
}

.schedule-name-input:focus {
  outline: none;
  border-color: var(--accent-primary);
  background: var(--bg-primary);
}

/* Viz Drawer (collapsible) */
.viz-drawer {
  border-top: 1px solid var(--border-default);
  background: var(--bg-secondary);
  flex-shrink: 0;
}

.viz-drawer-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: all var(none);
}

.viz-drawer-toggle:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.viz-toggle-icon {
  font-size: 14px;
}

.viz-toggle-text {
  text-align: left;
}

.viz-toggle-arrow {
  font-size: 10px;
  transition: transform var(none);
}

.viz-drawer.open .viz-toggle-arrow {
  transform: rotate(180deg);
}

.viz-drawer-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(none);
}

.viz-drawer.open .viz-drawer-content {
  max-height: 600px;
  overflow-y: auto;
}

/* Inline Metrics in Toggle */
.viz-metrics-inline {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: auto;
  margin-right: var(--space-1);
  background: var(--bg-tertiary);
  padding: 2px 8px;
  border-radius: 0;
}

.viz-metrics-inline span {
  font-weight: 600;
  color: var(--text-primary);
}

/* Funnel Section - Prominent */
.funnel-section {
  padding: var(--space-3);
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-default);
}

.funnel-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.funnel-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

.funnel-subtitle {
  font-size: 10px;
  color: var(--text-muted);
}

.funnel-bar {
  display: flex;
  height: 24px;
  border-radius: 0;
  overflow: hidden;
  background: var(--bg-tertiary);
}

.funnel-segment {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  color: white;
  transition: all var(none);
  min-width: 0;
  cursor: default;
  overflow: hidden;
  position: relative;
}

.funnel-segment span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 4px;
}

.funnel-segment:hover {
  filter: brightness(1.1);
}

.funnel-legend {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-2);
  flex-wrap: wrap;
}

.funnel-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--text-secondary);
}

.funnel-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 0;
  flex-shrink: 0;
}

/* Analytics Grid - Clean 3-column layout */
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  padding: var(--space-2);
}

.pie-panel .pie-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
}

.pie-panel .pie-container {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}

.pie-panel .pie-legend {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 9px;
  min-width: 0;
  overflow: hidden;
}

.pie-legend-item {
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pie-legend-dot {
  width: 5px;
  height: 5px;
  border-radius: 0;
  flex-shrink: 0;
}

.pie-legend-label {
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
}

.pie-legend-value {
  color: var(--text-muted);
}

.analytics-panel {
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: 0;
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  min-height: 80px;
}

.analytics-panel.pie-panel {
  justify-content: center;
}

.panel-header {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--border-default);
}

/* Heatmap */
.heatmap-panel {
  min-width: 0;
  overflow: hidden;
}

/* Breakdown panels */
.breakdown-panel {
  min-width: 120px;
}

.heatmap-container {
  display: grid;
  gap: 2px;
  font-size: 9px;
  min-width: 0;
  width: 100%;
}

.heatmap-row {
  display: contents;
}

.heatmap-cell {
  padding: 4px 6px;
  text-align: center;
  border-radius: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.heatmap-header {
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  font-size: 9px;
}

.heatmap-label {
  font-weight: 500;
  color: var(--text-secondary);
  text-align: left;
  background: transparent;
  font-size: 9px;
}

.heatmap-value {
  background: var(--bg-tertiary);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 10px;
}

.heatmap-value.heat-1 { background: rgba(102, 102, 102, 0.1); color: var(--chart-1); }
.heatmap-value.heat-2 { background: rgba(102, 102, 102, 0.1); color: var(--chart-1); }
.heatmap-value.heat-3 { background: rgba(102, 102, 102, 0.1); color: white; }
.heatmap-value.heat-4 { background: var(--chart-1); color: white; }

/* Weekly Chart */
.weekly-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 60px;
  padding: var(--space-1) 0;
}

.weekly-bar-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.weekly-bar {
  width: 100%;
  max-width: 40px;
  background: var(--bg-secondary);
  border-radius: 0;
  min-height: 3px;
  transition: all var(none);
}

.weekly-bar:hover {
  filter: brightness(1.15);
  transform: scaleY(1.05);
  transform-origin: bottom;
}

.weekly-label {
  font-size: 9px;
  color: var(--text-muted);
  font-weight: 500;
}

.weekly-value {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-primary);
}

/* ============================================
   Health Score System (NEW)
   ============================================ */

/* Health Badge in Toggle Bar */
.health-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 0;
  background: var(--bg-tertiary);
  color: var(--text-muted);
  margin-left: auto;
  margin-right: var(--space-1);
}

.health-badge.excellent {
  background: var(--text-secondary);
  color: white;
}

.health-badge.good {
  background: var(--text-primary);
  color: white;
}

.health-badge.fair {
  background: var(--text-secondary);
  color: white;
}

.health-badge.poor {
  background: var(--text-secondary);
  color: white;
}

/* Health Hero Section */
.health-hero {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-default);
}

/* Health Score Ring */
.health-score-ring {
  position: relative;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}

.health-score-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.health-ring-bg {
  fill: none;
  stroke: var(--bg-tertiary);
  stroke-width: 6;
}

.health-ring-fill {
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.6s ease-out, stroke 0.3s ease;
}

.health-ring-fill.excellent { stroke: var(--text-secondary); }
.health-ring-fill.good { stroke: var(--text-primary); }
.health-ring-fill.fair { stroke: var(--text-secondary); }
.health-ring-fill.poor { stroke: var(--text-secondary); }

.health-score-value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
}

.health-score-value.excellent { color: var(--text-secondary); }
.health-score-value.good { color: var(--text-primary); }
.health-score-value.fair { color: var(--text-secondary); }
.health-score-value.poor { color: var(--text-secondary); }

/* Health Summary (header) */
.health-summary {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.health-toggle {
  font-size: 10px;
  color: var(--text-secondary);
  user-select: none;
}

/* Health Details (collapsible body) */
.health-details {
  padding: var(--space-3);
  padding-top: 0;
}

.health-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.health-factors {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 12px;
}

.health-factor {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
}

.factor-icon {
  font-size: 10px;
  flex-shrink: 0;
}

.factor-label {
  color: var(--text-secondary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.factor-value {
  font-weight: 600;
  color: var(--text-muted);
  flex-shrink: 0;
}

.factor-value.excellent { color: var(--text-secondary); }
.factor-value.good { color: var(--text-primary); }
.factor-value.fair { color: var(--text-secondary); }
.factor-value.poor { color: var(--text-secondary); }

/* Content Gaps Alert */
.content-gaps {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-2);
  padding: 4px 8px;
  border-radius: 0;
  font-size: 10px;
  background: var(--bg-tertiary);
}

.content-gaps.success {
  background: rgba(153, 153, 153, 0.1);
  color: var(--text-secondary);
}

.content-gaps.info {
  background: rgba(102, 102, 102, 0.1);
  color: var(--text-primary);
}

.content-gaps.warning {
  background: rgba(179, 179, 179, 0.1);
  color: var(--text-secondary);
}

.gaps-icon {
  font-size: 12px;
}

.gaps-text {
  font-weight: 500;
}

/* Hide inline metrics when health badge is shown */
.viz-drawer-toggle .viz-metrics-inline {
  display: none;
}

@media (min-width: 500px) {
  .viz-drawer-toggle .viz-metrics-inline {
    display: inline;
  }
}

/* Heatmap improvements */
.heatmap-more {
  font-size: 9px;
  color: var(--text-muted);
  text-align: center;
  padding: 4px;
  font-style: italic;
}

.heatmap-empty {
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
  padding: var(--space-3);
}

/* Analytics Grid Layout Rules */
.heatmap-panel {
  grid-column: span 1;
}

.breakdown-panel {
  grid-column: span 1;
}

/* Platform bar specific styling */
.platform-bar .mini-bar-fill {
  transition: width 0.4s ease-out;
}

/* Mini Bars (Channel/Voice/Platform breakdown) */
.mini-bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.mini-bar-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mini-bar-label {
  font-size: 10px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.mini-bar-track-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.mini-bar-track {
  flex: 1;
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: 0;
  overflow: hidden;
}

.mini-bar-fill {
  height: 100%;
  border-radius: 0;
  transition: width 0.4s ease-out;
}

.mini-bar-value {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-primary);
  flex-shrink: 0;
  min-width: 20px;
  text-align: right;
}

/* Pie Charts (hidden but keep for compatibility) */
.pie-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: 0;
  padding: var(--space-3);
}

.pie-container {
  width: 64px;
  height: 64px;
  position: relative;
  flex-shrink: 0;
}

.pie-label {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-2);  /* Reduced from space-3 for compact layout */
}

.pie-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.pie-legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pie-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  color: var(--text-secondary);
}

.pie-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 0;
  flex-shrink: 0;
}

/* Pie chart SVG styling */
.pie-container svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.pie-segment {
  fill: none;
  stroke-width: 20;
  transition: opacity var(none);
}

.pie-segment:hover {
  opacity: 0.8;
}

.pie-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.pie-center-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.pie-center-label {
  font-size: 8px;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* View Tabs (old - hidden, using compact version in header) */
.view-tabs {
  display: none;
}

.view-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(none);
}

.view-tab:hover {
  color: var(--text-primary);
}

.view-tab.active {
  background: var(--bg-primary);
  color: var(--text-primary);
}

.tab-icon {
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Ensure Lucide icons are properly sized */
.tab-icon svg,
.tab-icon i {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

/* Global Lucide icon sizing fix */
i[data-lucide] {
  display: inline-block;
  width: 16px;
  height: 16px;
}

i[data-lucide] svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* View Content */
.view-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.view-content.hidden {
  display: none;
}

/* Table Scroll - FIXED */
.table-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: 0;
  max-height: calc(100vh - 180px);
}

.results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  table-layout: fixed;
}

/* Calendar Layout with Detail Sidebar */
.calendar-layout {
  display: flex;
  gap: var(--space-2);
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.calendar-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-y: auto; /* Allow vertical scrolling when expanded cells exceed height */
  overflow-x: hidden;
}

/* Calendar Detail Sidebar */
.calendar-detail {
  width: 0;
  overflow: hidden;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: 0;
  display: flex;
  flex-direction: column;
  transition: width var(none);
}

.calendar-detail.visible {
  width: 240px;
}

.detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2);
  border-bottom: 1px solid var(--border-default);
  flex-shrink: 0;
}

.detail-date {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

.detail-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
  border-radius: 0;
  transition: all var(none);
}

.detail-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.detail-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2);
}

.detail-field {
  margin-bottom: var(--space-2);
}

.detail-label {
  display: block;
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.detail-value {
  font-size: 12px;
  color: var(--text-primary);
}

.detail-brief {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-default);
}

.detail-brief-content {
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-top: var(--space-1);
}

.detail-actions {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-default);
}

.btn-copy-prompt {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 2px solid var(--border-heavy);
  border-radius: 0;
  font-size: 12px;
  font-family: inherit;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-transform: uppercase;
}

.btn-copy-prompt:hover {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--bg-primary);
}

.btn-copy-prompt.copied {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--bg-primary);
}

/* JGN Modal */
.jgn-modal {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.jgn-modal.visible {
  display: flex;
}

.jgn-modal-content {
  width: 90%;
  max-width: 600px;
  max-height: 80%;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.jgn-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-default);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

.jgn-modal-content pre {
  flex: 1;
  overflow: auto;
  padding: var(--space-3);
  margin: 0;
  font-family: 'SF Mono', Monaco, 'Courier New', monospace;
  font-size: 10px;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* Visualization Cards */
.viz-card {
  border: 1px solid var(--border-default);
  border-radius: 0;
  padding: var(--space-3);
}

.viz-header {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-2);  /* Reduced from space-3 for compact layout */
}

.viz-chart {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Bar Chart Rows */
.chart-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.chart-label {
  font-size: 11px;
  color: var(--text-secondary);
  width: 90px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chart-bar-container {
  flex: 1;
  height: 18px;
  background: var(--bg-tertiary);
  border-radius: 0;
  overflow: hidden;
}

.chart-bar {
  height: 100%;
  border-radius: 0;
  transition: width 0.3s ease;
}

.chart-bar.platform-instagram {
  background: var(--bg-secondary);
}

.chart-bar.platform-facebook {
  background: var(--text-primary);
}

.chart-bar.voice {
  background: var(--accent-jargan);
}

.chart-bar.channel {
  background: var(--accent-secondary);
}

.chart-value {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  width: 28px;
  text-align: right;
  flex-shrink: 0;
}

/* Stacked Bar Chart Layout */
.chart-row-stacked {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--space-2);
}

.chart-label-full {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chart-bar-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Chart Legend */
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-default);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  color: var(--text-muted);
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 0;
  flex-shrink: 0;
}

.legend-dot.channel { background: var(--accent-secondary); }
.legend-dot.voice { background: var(--accent-jargan); }

/* ============================================
   Calendar View
   ============================================ */

.calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-bottom: none;
  border-radius: 0;
}

.cal-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: 0;
  color: var(--text-primary);
  font-size: 16px;
  cursor: pointer;
  transition: all var(none);
}

.cal-nav-btn:hover {
  background: var(--bg-hover);
  border-color: var(--ip-black);
}

.cal-month {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

/* Today button in calendar nav */
.cal-today-btn {
  padding: 2px 8px;
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid var(--border-default);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  cursor: pointer;
  line-height: 1.4;
  margin-left: 8px;
}

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

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-top: none;
  border-radius: 0;
  overflow: visible; /* Allow expanded cells to extend beyond grid */
  flex: 1;
  min-height: min-content; /* Allow grid to grow with expanded cells */
}

.cal-header {
  background: var(--bg-secondary);
  padding: var(--space-2);
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-default);
}

.cal-body {
  display: contents;
}

.cal-day {
  background: var(--bg-primary);
  min-height: 70px;
  padding: var(--space-1);
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Clip overflow in normal state */
  border-right: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
}

.cal-day:nth-child(7n) {
  border-right: none;
}

.cal-day.other-month {
  background: var(--bg-secondary);
}

.cal-day.other-month .cal-day-num {
  color: var(--text-muted);
}

.cal-day.today {
  background: rgba(102, 102, 102, 0.1);
}

.cal-day-num {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
}

.cal-day.today .cal-day-num {
  color: var(--accent-primary);
  font-weight: 600;
}

.cal-events {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}

.cal-event {
  font-size: 9px;
  padding: 3px 4px;  /* Increased from 2px to 3px vertical padding for better readability */
  border-radius: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: opacity var(none);
  line-height: 1.3;  /* Added line-height to ensure proper text spacing */
}

.cal-event:hover {
  opacity: 0.8;
}

.cal-event.instagram {
  background: rgba(102, 102, 102, 0.1);
  color: var(--instagram);
}

.cal-event.facebook {
  background: rgba(102, 102, 102, 0.1);
  color: var(--facebook);
}

.cal-event-more {
  font-size: 9px;
  color: var(--accent-primary);
  padding: 2px 4px;
  cursor: pointer;
  font-weight: 500;
}

.cal-event-more:hover {
  text-decoration: underline;
}

/* Expanded calendar day */
.cal-day.expanded {
  min-height: auto;
  height: auto; /* Allow natural height expansion */
  max-height: none; /* Remove max-height constraint */
  z-index: 10;
  position: relative;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  overflow: visible !important; /* Override base overflow: hidden to allow expansion */
}

.cal-day.expanded .cal-events {
  height: 110px; /* Fixed height to ensure scrolling with 5 events + collapse */
  max-height: 110px;
  min-height: 110px;
  overflow-y: auto !important; /* Force scrolling when content exceeds height */
  overflow-x: hidden;
  flex: none; /* Disable flex grow to use fixed height */
  gap: 2px;  /* Maintain same gap as collapsed state for consistency */
  /* Smooth scrolling */
  scroll-behavior: smooth;
  /* Custom scrollbar styling */
  scrollbar-width: thin;
  scrollbar-color: var(--accent-primary) transparent;
  /* Add subtle padding for scrollbar */
  padding-right: 6px; /* More space for scrollbar visibility */
}

.cal-day.expanded .cal-events::-webkit-scrollbar {
  width: 4px;
}

.cal-day.expanded .cal-events::-webkit-scrollbar-track {
  background: transparent;
}

.cal-day.expanded .cal-events::-webkit-scrollbar-thumb {
  background-color: var(--accent-primary);
  border-radius: 0;
}

.cal-day.expanded .cal-event {
  padding: 3px 4px;  /* Maintain same padding as collapsed state */
  font-size: 9px;  /* Maintain same font size as collapsed state */
}

.cal-event-collapse {
  font-size: 9px;
  color: var(--text-muted);
  padding: 4px;
  cursor: pointer;
  text-align: center;
  margin-top: 4px;
  border-top: 1px solid var(--border-default);
}

.cal-event-collapse:hover {
  color: var(--accent-primary);
}

/* ============================================
   API Call Viewer
   ============================================ */

.api-viewer-toggle {
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: 0;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-secondary);
  transition: all var(none);
}

.api-viewer-toggle:hover {
  background: var(--bg-hover);
  color: var(--accent-primary);
}

.api-viewer-toggle.active {
  background: var(--accent-primary);
  color: white;
  border-color: var(--accent-primary);
}

.api-icon {
  font-family: monospace;
  font-weight: bold;
}

.api-viewer {
  position: absolute;
  top: 48px;
  right: 0;
  width: 480px;
  max-width: calc(100vw - 440px);
  max-height: calc(100vh - 80px);
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: 0;
  z-index: 1000;
  display: none;
  flex-direction: column;
  overflow: hidden;
}

.api-viewer.visible {
  display: flex;
}

.api-viewer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-secondary);
}

.api-viewer-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary);
}

.api-viewer-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.api-viewer-clear {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 11px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 0;
}

.api-viewer-clear:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.api-viewer-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}

.api-viewer-close:hover {
  color: var(--error);
}

.api-viewer-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  font-family: 'SF Mono', Monaco, 'Consolas', monospace;
  font-size: 11px;
}

.api-viewer-empty {
  color: var(--text-muted);
  text-align: center;
  padding: 32px;
  font-style: italic;
}

.api-call {
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: 0;
  margin-bottom: 8px;
  overflow: hidden;
}

.api-call-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  background: var(--bg-tertiary);
}

.api-call-header:hover {
  background: var(--bg-hover);
}

.api-call-method {
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 0;
  font-size: 10px;
  text-transform: uppercase;
}

.api-call-method.get {
  background: rgba(102, 102, 102, 0.1);
  color: var(--accent-primary);
}

.api-call-method.post {
  background: rgba(22, 163, 74, 0.15);
  color: var(--success);
}

.api-call-method.put {
  background: rgba(255, 109, 7, 0.15);
  color: var(--warning);
}

.api-call-endpoint {
  flex: 1;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.api-call-status {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 0;
}

.api-call-status.success {
  background: rgba(22, 163, 74, 0.15);
  color: var(--success);
}

.api-call-status.error {
  background: rgba(220, 38, 38, 0.15);
  color: var(--error);
}

.api-call-status.pending {
  background: rgba(255, 109, 7, 0.15);
  color: var(--warning);
}

.api-call-time {
  font-size: 10px;
  color: var(--text-muted);
}

.api-call-details {
  display: none;
  padding: 10px;
  border-top: 1px solid var(--border-default);
  background: var(--bg-primary);
}

.api-call.expanded .api-call-details {
  display: block;
}

.api-call-section {
  margin-bottom: 10px;
}

.api-call-section:last-child {
  margin-bottom: 0;
}

.api-call-section-title {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.api-call-section-content {
  background: var(--bg-secondary);
  padding: 8px;
  border-radius: 0;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 200px;
  overflow-y: auto;
  color: var(--text-primary);
}

/* ============================================
   Table Filter Drawer (slide-in from right)
   ============================================ */

.table-filter-drawer {
  position: absolute;
  top: 0;
  right: -300px;
  width: 280px;
  height: 100%;
  background: var(--bg-primary);
  border-left: var(--line-hairline) solid var(--border-default);
  display: flex;
  flex-direction: column;
  z-index: 10;
  transition: right 0.15s linear !important;
}

.table-filter-drawer.open {
  right: 0;
}

.table-filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border-bottom: var(--line-hairline) solid var(--border-default);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.table-filter-title {
  font-size: var(--text-sm);
}

.table-filter-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 4px;
}

.table-filter-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-1) var(--space-2);
}

.table-filter-section {
  margin-bottom: var(--space-2);
}

.table-filter-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.table-filter-select {
  width: 100%;
  padding: 6px 8px;
  font-size: var(--text-sm);
  font-family: var(--font-mono);
  background: var(--bg-input);
  color: var(--text-primary);
  border: var(--line-hairline) solid var(--border-default);
}

.table-filter-checks {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.table-filter-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  cursor: pointer;
  color: var(--text-primary);
}

.table-filter-check input[type="checkbox"] {
  accent-color: var(--accent-primary);
}

.table-filter-actions {
  display: flex;
  gap: var(--space-1);
  padding-top: var(--space-1);
  border-top: var(--line-hairline) solid var(--border-default);
}

.table-filter-apply {
  flex: 1;
  padding: 6px 12px;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--bg-active);
  color: var(--bg-primary);
  border: none;
  cursor: pointer;
}

.table-filter-reset {
  padding: 6px 12px;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: none;
  color: var(--text-secondary);
  border: var(--line-hairline) solid var(--border-default);
  cursor: pointer;
}

/* ============================================
   Pack Detail Panel (Master Plan Drawer)
   ============================================ */

.pack-detail-panel {
  width: 0;
  overflow: hidden;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border-default);
  display: flex;
  flex-direction: column;
  transition: width 250ms ease;
  flex-shrink: 0;
  position: relative;
  z-index: 60;
  box-sizing: border-box;  /* Include borders in width calculation */
}

.pack-detail-panel.open {
  width: 340px;
  overflow-x: auto;  /* Allow horizontal scroll if content is too wide */
  overflow-y: hidden;  /* Body handles vertical scroll */
}

.pack-detail-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-default);
  flex-shrink: 0;
  width: 100%;  /* Take full width of parent */
  box-sizing: border-box;  /* Include padding in width */
}

.pack-detail-icon {
  font-size: 16px;
}

.pack-detail-title {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pack-detail-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  padding: 2px 6px;
  border-radius: 0;
  transition: background var(none);
  line-height: 1;
}

.pack-detail-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.pack-detail-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;  /* Prevent horizontal scroll within body */
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;  /* Take full width of parent */
  box-sizing: border-box;  /* Include padding in width */
}

.pack-detail-body::-webkit-scrollbar {
  width: 4px;
}

.pack-detail-body::-webkit-scrollbar-track {
  background: transparent;
}

.pack-detail-body::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: 0;
}

/* KPI Strip */
.pack-kpi-strip {
  display: flex;
  gap: var(--space-2);
}

.pack-kpi-item {
  flex: 1;
  background: var(--bg-tertiary);
  border-radius: 0;
  padding: var(--space-2) var(--space-3);
  text-align: center;
}

.pack-kpi-value {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.pack-kpi-label {
  display: block;
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}

/* Section Title */
.pack-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pack-section-title {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Channel List */
.pack-channel-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.pack-channel-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  border-radius: 0;
}

.pack-channel-platform-dot {
  width: 8px;
  height: 8px;
  border-radius: 0;
  flex-shrink: 0;
}

.pack-channel-name {
  flex: 1;
  font-size: 12px;
  color: var(--text-primary);
  font-weight: 500;
}

.pack-channel-freq {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Voice List */
.pack-voice-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.pack-voice-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  border-radius: 0;
}

.pack-voice-name {
  flex: 1;
  font-size: 12px;
  color: var(--accent-jargan);
  font-weight: 500;
}

.pack-voice-position {
  font-size: 9px;
  padding: 2px 6px;
  background: rgba(64, 64, 64, 0.1);
  color: var(--accent-jargan);
  border-radius: 0;
  white-space: nowrap;
}

/* ============================================
   Expandable Items (Channels & Voices in Detail)
   ============================================ */
.expandable-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.expandable-item {
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  border-radius: 0;
  overflow: hidden;
  transition: all 0.2s ease;
}

.expandable-item.expanded {
  border-color: var(--accent-primary);
}

.expandable-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  transition: background 0.15s ease;
}

.expandable-header:hover {
  background: var(--bg-hover);
}

.expandable-header .expand-arrow {
  font-size: 12px;
  color: var(--text-muted);
  transition: transform 0.2s ease;
  margin-left: auto;
}

.expandable-item.expanded .expand-arrow {
  transform: rotate(90deg);
}

.expandable-content {
  display: none;
  padding: var(--space-3);
  padding-top: 0;
  border-top: 1px solid var(--border-default);
  background: var(--bg-secondary);
}

.expandable-item.expanded .expandable-content {
  display: block;
}

/* Item detail grid */
.item-detail-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: var(--space-2);
}

.item-detail-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.item-detail-label {
  font-size: 10px;
  color: var(--text-muted);
  width: 70px;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.item-detail-value {
  font-size: 12px;
  color: var(--text-primary);
  flex: 1;
}

/* Editable channel inputs - subtle, refined Instrument Paper style */
.editable-row {
  margin: 6px 0;
}

.editable-row .item-detail-label {
  color: var(--text-muted);
  font-size: 9px;
}

.channel-name-input {
  flex: 1;
  font-size: 11px;
  padding: 2px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  color: var(--text-primary);
  font-family: var(--font-sans);
  transition: border-color 150ms ease;
}

.channel-name-input:hover {
  border-bottom-color: var(--border-default);
}

.channel-name-input:focus {
  outline: none;
  border-bottom-color: var(--text-primary);
}

/* FREQUENCY EDITING STYLES (SHELVED)
   These styles are preserved for when API supports channel frequency overrides.
   Currently only name editing is active - frequency displays as read-only text.
*/
.frequency-edit-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}

.channel-freq-input {
  width: 36px;
  font-size: 11px;
  padding: 2px 4px;
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  color: var(--text-primary);
  font-family: var(--font-mono);
  text-align: right;
  transition: border-color 150ms ease;
}

.channel-freq-input:hover {
  border-bottom-color: var(--border-default);
}

.channel-freq-input:focus {
  outline: none;
  border-bottom-color: var(--text-primary);
}

.freq-separator {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: lowercase;
}

.channel-unit-select {
  font-size: 10px;
  padding: 2px 4px 2px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  color: var(--text-primary);
  font-family: var(--font-sans);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg fill="gray" height="8" viewBox="0 0 12 8" width="12" xmlns="http://www.w3.org/2000/svg"><path d="M1 1l5 5 5-5"/></svg>');
  background-repeat: no-repeat;
  background-position: right center;
  padding-right: 14px;
  transition: border-color 150ms ease;
}

.channel-unit-select:hover {
  border-bottom-color: var(--border-default);
}

.channel-unit-select:focus {
  outline: none;
  border-bottom-color: var(--text-primary);
}

/* Edited indicator */
.edited-indicator {
  font-size: 8px;
  color: var(--accent-primary);
  margin-left: 4px;
}

/* Reset button */
.channel-reset-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
  line-height: 1;
  transition: color 150ms ease;
}

.channel-reset-btn:hover {
  color: var(--text-primary);
}

.item-stages {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.item-stage-badge {
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 0;
  color: white;
  font-weight: 500;
}

.platform-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 0;
  color: white;
  font-weight: 500;
}

/* Voice expandable content - only show when expanded */
.expandable-item.expanded .voice-expandable {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.voice-definition {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: var(--space-2) 0 0 0;
  padding: var(--space-2);
  background: var(--bg-tertiary);
  border-radius: 0;
  border-left: 3px solid var(--accent-jargan);
}

.voice-stages-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  padding-top: var(--space-1);
}

.voice-viz-container {
  margin-top: var(--space-2);
  background: white;
  border-radius: 0;
  padding: var(--space-2);
}

.voice-viz-container .voice-viz-diagram {
  max-width: 100%;
  overflow: hidden;
}

.voice-viz-container .voice-viz-diagram svg {
  width: 100%;
  height: auto;
  max-height: 200px;
}

.voice-attrs-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.voice-attr-group {
  background: var(--bg-tertiary);
  border-radius: 0;
  padding: var(--space-2);
}

.voice-attr-role {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
}

.voice-attr-item {
  padding: 4px 0;
  border-bottom: 1px solid var(--border-default);
}

.voice-attr-item:last-child {
  border-bottom: none;
}

.voice-attr-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
}

.voice-attr-desc {
  font-size: 10px;
  color: var(--text-secondary);
  display: block;
  margin-top: 2px;
  line-height: 1.4;
}

/* Platform bar chart */
.pack-platform-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pack-bar-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.pack-bar-label {
  width: 72px;
  font-size: 10px;
  color: var(--text-secondary);
  text-align: right;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pack-bar-container {
  flex: 1;
  height: 6px;
  background: var(--bg-tertiary);
  border-radius: 0;
  overflow: hidden;
}

.pack-bar {
  height: 100%;
  border-radius: 0;
  transition: width 0.4s ease;
}

.pack-bar-value {
  font-size: 10px;
  color: var(--text-muted);
  width: 24px;
  text-align: right;
  flex-shrink: 0;
}

/* Active state for clickable pack chips */
.preview-pack.active {
  background: var(--accent-primary);
  color: white;
}

.preview-pack.active .preview-pack-arrow {
  opacity: 1;
}

/* Mini funnel visualization in pack/objective detail */
.pack-funnel-bar {
  display: flex;
  height: 8px;
  border-radius: 0;
  overflow: hidden;
  gap: 2px;
  margin: var(--space-1) 0;
}

.pack-funnel-segment {
  border-radius: 0;
  transition: flex 0.3s ease;
  min-width: 4px;
}

.pack-funnel-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.pack-funnel-item {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  color: var(--text-secondary);
}

.pack-funnel-dot {
  width: 6px;
  height: 6px;
  border-radius: 0;
  flex-shrink: 0;
}

.pack-funnel-count {
  color: var(--text-muted);
}

/* Pack loading / error states */
.pack-state-msg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: 12px;
  padding: var(--space-6) 0;
}

/* ============================================
   Voice Pack Cards (Rich Display)
   ============================================ */

.pack-voice-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pack-voice-card {
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  border-radius: 0;
  padding: var(--space-2) var(--space-3);
}

.pack-voice-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 5px;
}

/* Position type badge color variants */
.pack-voice-position.coin { background: rgba(230, 230, 230, 0.5); color: var(--accent-primary); }
.pack-voice-position.flywheel { background: rgba(230, 230, 230, 0.5); color: var(--text-secondary); }
.pack-voice-position.hub-and-spoke { background: rgba(230, 230, 230, 0.5); color: var(--accent-primary); }
.pack-voice-position.barbell { background: rgba(230, 230, 230, 0.5); color: var(--text-secondary); }
.pack-voice-position.pyramid { background: rgba(230, 230, 230, 0.5); color: var(--text-secondary); }

.pack-voice-definition {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 4px 0 6px;
}

.pack-voice-stages {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}

.voice-stage-badge {
  font-size: 9px;
  font-weight: 700;
  color: white;
  padding: 1px 5px;
  border-radius: 0;
  letter-spacing: 0.3px;
}

/* Voice attributes (Insight Language structure) */
.pack-voice-attrs {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-top: 1px solid var(--border-default);
  padding-top: 6px;
  margin-top: 2px;
}

.pack-voice-attr {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.pack-attr-role {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 5px;
  border-radius: 0;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 1px;
  background: var(--bg-tertiary);
  color: var(--text-muted);
}

/* Flywheel roles */
.pack-attr-role.driver { background: rgba(230, 230, 230, 0.5); color: var(--text-secondary); }
.pack-attr-role.node { background: rgba(230, 230, 230, 0.5); color: var(--accent-primary); }
/* Coin roles */
.pack-attr-role.side-a,
.pack-attr-role.side-b { background: rgba(230, 230, 230, 0.5); color: var(--accent-primary); }
/* Hub and Spoke roles */
.pack-attr-role.hub { background: rgba(230, 230, 230, 0.5); color: var(--accent-primary); }
.pack-attr-role.spoke { background: rgba(230, 230, 230, 0.5); color: var(--text-secondary); }
/* Barbell roles */
.pack-attr-role.fulcrum { background: rgba(230, 230, 230, 0.5); color: var(--text-secondary); }
.pack-attr-role.weight-a,
.pack-attr-role.weight-b { background: rgba(230, 230, 230, 0.5); color: var(--text-secondary); }
/* Pyramid roles */
.pack-attr-role.base { background: rgba(230, 230, 230, 0.5); color: var(--text-secondary); }
.pack-attr-role.tier { background: rgba(230, 230, 230, 0.5); color: var(--text-secondary); }
.pack-attr-role.apex { background: rgba(230, 230, 230, 0.5); color: var(--text-secondary); }

.pack-attr-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.pack-attr-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
}

.pack-attr-desc {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ============================================
   Voice Viz Panel (Insight Language SVG)
   ============================================ */

.voice-viz-tabs {
  display: flex;
  gap: 4px;
  padding: var(--space-2) var(--space-3) 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--border-default);
}

.voice-viz-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}

.voice-viz-tab:hover { color: var(--text-primary); }

.voice-viz-tab.active {
  color: var(--text-primary);
  border-bottom-color: var(--accent-primary);
  font-weight: 600;
}

.voice-viz-panel { display: none; }
.voice-viz-panel.active { display: block; }

.voice-viz-header {
  padding: var(--space-3) var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--border-default);
}

.voice-viz-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.voice-viz-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

/* SVG diagram container — takes as much vertical height as available */
.voice-viz-diagram {
  padding: 12px 8px 8px;
  border-bottom: 1px solid var(--border-default);
}

.viz-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Active node highlight */
.viz-node-circle[data-active] {
  stroke-width: 3 !important;
  filter: drop-shadow(0 0 4px currentColor);
}

/* Attribute detail card */
.voice-viz-attr-detail {
  padding: 10px var(--space-3) 6px;
}

.viz-attr-card {
  border-left: 3px solid var(--accent-primary);
  background: var(--bg-tertiary);
  border-radius: 0;
  padding: 8px 10px;
}

.viz-attr-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}

.viz-attr-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.viz-attr-role-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 0;
  flex-shrink: 0;
}

.viz-attr-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

.viz-attr-hint {
  text-align: center;
  font-size: 10px;
  color: var(--text-muted);
  margin: 4px 0 10px;
  letter-spacing: 0.2px;
}

/* ============================================
   Health Score Card (in results panel)
   ============================================ */

#healthScoreCard {
  border-bottom: 1px solid var(--border-default);
}