/**
 * FCPX Workspace Remapper - Tool-Specific Styles
 * Namespaced under .workspace-remapper
 *
 * ARCHITECTURE - CSS-FIRST DESIGN SYSTEM:
 * =========================================
 * This stylesheet implements a comprehensive design system with:
 *
 * 1. CSS VARIABLES (lines 10-114)
 *    - Panel colors: FCPX blue theme (#1d3454) for professional look
 *    - Drop zones: Light blue (#607ba1) with alpha variants for highlights
 *    - Control panels: Neutral grey backgrounds (#2d2d2d)
 *    - Text colors: White/grey hierarchy for readability
 *    - Interactive elements: iOS blue toggles (#007AFF), red remove buttons
 *    - Dimensions: Toggle sizes, button sizes, spacing, borders
 *
 * 2. DATA ATTRIBUTE SELECTORS
 *    - [data-panel-type="browser"]: Applies FCPX blue styling
 *    - [data-panel-type="viewer"]: Applies FCPX blue styling
 *    - [data-panel-type="timeline"]: Applies FCPX blue styling
 *    - Enables JavaScript to set semantic attributes, CSS handles appearance
 *
 * 3. CSS CUSTOM PROPERTIES (per-element)
 *    - --node-flex: Dynamic flexbox proportions for layout
 *    - Set via JavaScript: element.style.setProperty('--node-flex', value)
 *    - Used in CSS: flex: var(--node-flex, 1)
 *
 * 4. COLOR-MIX() FUNCTION
 *    - Modern CSS for panel backgrounds: color-mix(in srgb, var(--color-browser) 12%, transparent)
 *    - Replaces old approach: panel.color + '20' (hex opacity)
 *    - Benefits: Cleaner syntax, CSS-only, no JavaScript color manipulation
 *
 * 5. SINGLE SOURCE OF TRUTH
 *    - All colors defined once as CSS variables
 *    - JavaScript reads from CSS via getCSSColor() function
 *    - No color duplication between JS and CSS
 *    - Easy theming: Change variables, entire app updates
 *
 * DESIGN DECISIONS:
 * - Final Cut Pro aesthetic: Dark backgrounds, strategic FCPX blue accents
 * - White/light grey text for maximum readability
 * - Black input backgrounds with white text for distinction
 * - iOS blue (#007AFF) for toggle switches (familiar, accessible)
 * - Light blue (#607ba1) for drop zone highlights (matches FCPX)
 *
 * MAINTAINABILITY:
 * - DRY principle: Zero hardcoded color/size values in components
 * - Clear naming: --drop-zone-alpha-30 is instantly recognizable
 * - Organized sections: Colors, sizing, spacing clearly separated
 * - No inline styles: JavaScript sets structure, CSS controls appearance
 */

/* === Fonts (Optional - can use system fonts from main.css) === */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Outfit:wght@300;400;500;600;700&display=swap');

/* === Tool-Specific CSS Variables === */
.workspace-remapper {
  /* ============================================
     PANEL COLORS - FCPX Blue Theme
     ============================================ */
  --color-browser: #1d3454;
  --color-viewer: #1d3454;
  --color-timeline: #1d3454;
  --color-inspector: #1d3454;
  --color-compare: #1d3454;

  /* ============================================
     DROP ZONE COLORS
     ============================================ */
  /* Base drop zone color */
  --drop-zone-active: #607ba1;

  /* Drop zone opacity variants (96, 123, 161 = RGB of #607ba1) */
  --drop-zone-alpha-10: rgba(96, 123, 161, 0.1);
  --drop-zone-alpha-15: rgba(96, 123, 161, 0.15);
  --drop-zone-alpha-20: rgba(96, 123, 161, 0.2);
  --drop-zone-alpha-30: rgba(96, 123, 161, 0.3);
  --drop-zone-alpha-40: rgba(96, 123, 161, 0.4);
  --drop-zone-alpha-50: rgba(96, 123, 161, 0.5);

  /* ============================================
     CONTROL PANEL BACKGROUNDS
     ============================================ */
  --control-bg: #2d2d2d;
  --control-border-accent: #555555;

  /* ============================================
     TEXT COLORS (Tool-specific overrides)
     ============================================ */
  --text-white: #ffffff;
  --text-primary-local: #f0f0f0;
  --text-secondary-local: #999999;
  --text-black: #000000;

  /* ============================================
     INTERACTIVE ELEMENTS
     ============================================ */
  /* Toggle switches - iOS blue */
  --toggle-active: #007AFF;

  /* Remove button - red accent */
  --btn-remove: #EF4444;
  --btn-remove-bg: rgba(239, 68, 68, 0.2);

  /* Border focus state */
  --border-focus-local: #666666;

  /* Export button - bright vivid blue gradient */
  --export-btn-start: #0088FF;
  --export-btn-end: #00D4FF;
  --export-btn-border: #ffffff;
  --export-btn-glow: rgba(0, 212, 255, 0.4);

  /* Dual display mode - FCPX blue accents */
  --dual-display-bg: var(--color-browser);
  --dual-display-bg-hover: color-mix(in srgb, var(--color-browser) 85%, white);
  --dual-display-bg-active: color-mix(in srgb, var(--color-browser) 90%, white);
  --dual-display-border: var(--drop-zone-active);
  --dual-display-border-hover: color-mix(in srgb, var(--drop-zone-active) 80%, white);
  --dual-display-border-active: color-mix(in srgb, var(--drop-zone-active) 90%, white);

  /* ============================================
     SIZING - TOGGLES & BUTTONS
     ============================================ */
  /* Standard toggle dimensions */
  --toggle-width: 36px;
  --toggle-height: 20px;
  --toggle-circle: 16px;
  --toggle-offset: 16px;
  --toggle-radius: 10px;

  /* Small toggle dimensions (viewer options) */
  --toggle-width-small: 28px;
  --toggle-height-small: 16px;
  --toggle-circle-small: 12px;
  --toggle-offset-small: 12px;
  --toggle-radius-small: 8px;

  /* Button dimensions */
  --btn-add-size: 24px;
  --btn-remove-size: 20px;
  --btn-move-size: 22px;

  /* ============================================
     SPACING & LAYOUT
     ============================================ */
  --panel-gap: 6px;
  --panel-padding: 6px;
  --drop-zone-width: 6px;
  --drop-zone-width-active: 8px;
  --drop-zone-edge-width: 12px;
  --drop-zone-edge-width-active: 16px;
  --global-drop-zone-size: 16px;
  --global-drop-zone-size-active: 24px;

  /* Panel edge zones */
  --edge-zone-width: 20%;
  --edge-zone-height: 25%;
  --edge-zone-inset-v: 10%;
  --edge-zone-inset-h: 10%;

  /* ============================================
     BORDERS
     ============================================ */
  --border-width-panel: 2px;
  --border-width-zone: 3px;
}

/* === Main Layout === */
.workspace-remapper .app-main {
  display: grid;
  grid-template-columns: 1fr 360px;
  grid-template-rows: auto 1fr;
  gap: 1.5rem 2rem;
  padding: 2rem;
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
  flex: 1;
}

/* Workspace Name Group (inside export section) */
.workspace-remapper .workspace-name-group {
  margin-bottom: 0.75rem;
}

.workspace-remapper .workspace-name-group label {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-primary-local);
  margin-bottom: 0.35rem;
}

.workspace-remapper .preview-section {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
}

.workspace-remapper .control-panel {
  grid-column: 2;
  grid-row: 1 / -1;
}

.workspace-remapper .preview-section h2 {
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.workspace-remapper .section-hint {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

/* === Layout Preview === */
.workspace-remapper .layout-preview {
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  box-shadow: none;
  position: relative;
  padding: var(--panel-padding);
}

/* Container for layout panels */
.workspace-remapper .layout-container {
  display: flex;
  height: 100%;
  width: 100%;
  gap: var(--panel-gap);
  padding: 0;
  position: relative;
  flex: var(--node-flex, 1);
}

.workspace-remapper .layout-container.horizontal {
  flex-direction: row;
}

.workspace-remapper .layout-container.vertical {
  flex-direction: column;
}

/* Panel wrapper */
.workspace-remapper .layout-panel {
  display: flex;
  position: relative;
  min-width: 60px;
  min-height: 40px;
  flex: var(--node-flex, 1);
}

/* Panel content */
.workspace-remapper .panel-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: var(--border-width-panel) solid;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: grab;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  user-select: none;
  position: relative;
}

/* Panel styling by type - FCPX blue theme */
.workspace-remapper .panel-content[data-panel-type="browser"] {
  background-color: color-mix(in srgb, var(--color-browser) 12%, transparent);
  border-color: var(--color-browser);
}

.workspace-remapper .panel-content[data-panel-type="viewer"] {
  background-color: color-mix(in srgb, var(--color-viewer) 12%, transparent);
  border-color: var(--color-viewer);
}

.workspace-remapper .panel-content[data-panel-type="timeline"] {
  background-color: color-mix(in srgb, var(--color-timeline) 12%, transparent);
  border-color: var(--color-timeline);
}

.workspace-remapper .panel-content[data-panel-type="inspector"] {
  background-color: color-mix(in srgb, var(--color-inspector) 12%, transparent);
  border-color: var(--color-inspector);
}

.workspace-remapper .panel-content[data-panel-type="compare"] {
  background-color: color-mix(in srgb, var(--color-compare) 12%, transparent);
  border-color: var(--color-compare);
}

.workspace-remapper .panel-content:hover {
  box-shadow: var(--shadow-md);
}

.workspace-remapper .panel-content.dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.workspace-remapper .panel-content.drop-target {
  transform: scale(1.02);
  box-shadow: 0 0 0 3px #3b82f6, var(--shadow-lg);
}

.workspace-remapper .panel-content.drag-over {
  background-color: rgba(59, 130, 246, 0.25) !important;
  box-shadow: inset 0 0 0 2px #3b82f6;
}

/* Panel header */
.workspace-remapper .panel-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: white;
}

/* Panel header colors by type */
.workspace-remapper .panel-content[data-panel-type="browser"] .panel-header {
  background-color: var(--color-browser);
}

.workspace-remapper .panel-content[data-panel-type="viewer"] .panel-header {
  background-color: var(--color-viewer);
}

.workspace-remapper .panel-content[data-panel-type="timeline"] .panel-header {
  background-color: var(--color-timeline);
}

.workspace-remapper .panel-content[data-panel-type="inspector"] .panel-header {
  background-color: var(--color-inspector);
}

.workspace-remapper .panel-content[data-panel-type="compare"] .panel-header {
  background-color: var(--color-compare);
}

.workspace-remapper .panel-icon {
  font-size: 1rem;
}

.workspace-remapper .panel-icon.material-icons {
  font-size: 18px;
  vertical-align: middle;
}

.workspace-remapper .panel-label {
  flex: 1;
}

.workspace-remapper .drag-hint {
  opacity: 0.6;
  font-size: 1rem;
  cursor: grab;
}

/* Panel body */
.workspace-remapper .panel-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.workspace-remapper .panel-placeholder {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
}

/* Viewer options inline (inside Viewer panel) */
.workspace-remapper .viewer-options-inline {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-sm);
  max-width: 200px;
}

.workspace-remapper .viewer-option-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.7rem;
  color: var(--text-secondary);
  user-select: none;
}

.workspace-remapper .viewer-option-row:hover {
  color: var(--text-primary);
}

.workspace-remapper .viewer-option-row input[type="checkbox"] {
  display: none;
}

.workspace-remapper .viewer-option-row .toggle-switch {
  width: var(--toggle-width-small);
  height: var(--toggle-height-small);
  flex-shrink: 0;
  border-radius: var(--toggle-radius-small);
}

.workspace-remapper .viewer-option-row .toggle-switch::after {
  width: var(--toggle-circle-small);
  height: var(--toggle-circle-small);
}

.workspace-remapper .viewer-option-row input[type="checkbox"]:checked + .toggle-switch {
  background: var(--toggle-active);
}

.workspace-remapper .viewer-option-row input[type="checkbox"]:checked + .toggle-switch::after {
  transform: translateX(var(--toggle-offset-small));
  background: white;
}

.workspace-remapper .viewer-option-label {
  white-space: nowrap;
}

/* Hidden panel */
.workspace-remapper .panel-hidden {
  flex: 1;
  display: none;
}

/* Empty layout state */
.workspace-remapper .empty-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted);
}

.workspace-remapper .empty-layout p {
  margin: 0.5rem 0;
  font-size: 1rem;
}

.workspace-remapper .empty-layout .hint {
  font-size: 0.85rem;
  opacity: 0.7;
}

/* === Resize Divider (draggable to adjust panel proportions) === */
.workspace-remapper .resize-divider {
  flex-shrink: 0;
  flex-grow: 0;
  background: transparent;
  transition: background 0.15s ease;
  z-index: 20;
  position: relative;
}

.workspace-remapper .resize-divider.horizontal {
  width: 8px;
  margin: 0 -4px;
  cursor: col-resize;
  align-self: stretch;
  border-radius: 4px;
}

.workspace-remapper .resize-divider.vertical {
  height: 8px;
  margin: -4px 0;
  cursor: row-resize;
  align-self: stretch;
  border-radius: 4px;
}

.workspace-remapper .resize-divider:hover {
  background: #3b82f6 !important;
  opacity: 1 !important;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.8);
}

/* Expand divider slightly on hover for easier grabbing */
.workspace-remapper .resize-divider.horizontal:hover {
  width: 10px;
  margin: 0 -5px;
}

.workspace-remapper .resize-divider.vertical:hover {
  height: 10px;
  margin: -5px 0;
}

.workspace-remapper .resize-divider.active {
  background: #3b82f6 !important;
  opacity: 1 !important;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.8);
}

/* Prevent text selection while resizing */
body.is-resizing {
  cursor: col-resize;
  user-select: none;
}

body.is-resizing * {
  cursor: inherit !important;
}

/* === Drop Zone (divider between panels or at edges) === */
.workspace-remapper .drop-zone {
  flex-shrink: 0;
  flex-grow: 0;
  background: transparent;
  transition: all 0.15s ease;
  pointer-events: none;
  border-radius: 4px;
  overflow: hidden;
}

.workspace-remapper .drop-zone.horizontal {
  width: 0;
  align-self: stretch;
}

.workspace-remapper .drop-zone.vertical {
  height: 0;
  align-self: stretch;
}

.workspace-remapper .drop-zone.visible {
  pointer-events: auto;
  background: var(--border-color);
}

.workspace-remapper .drop-zone.visible.horizontal {
  width: var(--drop-zone-width);
}

.workspace-remapper .drop-zone.visible.vertical {
  height: var(--drop-zone-width);
}

.workspace-remapper .drop-zone.edge-start,
.workspace-remapper .drop-zone.edge-end {
  position: absolute;
  z-index: 15;
}

.workspace-remapper .horizontal > .drop-zone.edge-start {
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
}

.workspace-remapper .horizontal > .drop-zone.edge-end {
  right: 0;
  top: 0;
  bottom: 0;
  width: 0;
}

.workspace-remapper .vertical > .drop-zone.edge-start {
  top: 0;
  left: 0;
  right: 0;
  height: 0;
}

.workspace-remapper .vertical > .drop-zone.edge-end {
  bottom: 0;
  left: 0;
  right: 0;
  height: 0;
}

.workspace-remapper .drop-zone.visible.edge-start,
.workspace-remapper .drop-zone.visible.edge-end {
  background: var(--drop-zone-alpha-30);
}

.workspace-remapper .horizontal > .drop-zone.visible.edge-start,
.workspace-remapper .horizontal > .drop-zone.visible.edge-end {
  width: var(--drop-zone-edge-width);
}

.workspace-remapper .vertical > .drop-zone.visible.edge-start,
.workspace-remapper .vertical > .drop-zone.visible.edge-end {
  height: var(--drop-zone-edge-width);
}

.workspace-remapper .horizontal > .drop-zone.active.edge-start,
.workspace-remapper .horizontal > .drop-zone.active.edge-end {
  width: var(--drop-zone-edge-width-active);
  background: #3b82f6 !important;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.8);
}

.workspace-remapper .vertical > .drop-zone.active.edge-start,
.workspace-remapper .vertical > .drop-zone.active.edge-end {
  height: var(--drop-zone-edge-width-active);
  background: #3b82f6 !important;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.8);
}

.workspace-remapper .drop-zone.active {
  background: #3b82f6 !important;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.8);
}

.workspace-remapper .drop-zone.horizontal.active {
  width: var(--drop-zone-width-active);
}

.workspace-remapper .drop-zone.vertical.active {
  height: var(--drop-zone-width-active);
}

/* === Global Edge Drop Zones === */
.workspace-remapper .global-drop-zone {
  position: absolute;
  z-index: 25;
  opacity: 0;
  pointer-events: none;
  transition: all 0.15s ease;
  background: transparent;
}

body.is-dragging .workspace-remapper .global-drop-zone {
  opacity: 1;
  pointer-events: auto;
}

.workspace-remapper .global-top {
  top: 0;
  left: 0;
  right: 0;
  height: var(--global-drop-zone-size);
  background: linear-gradient(to bottom, var(--drop-zone-alpha-15), transparent);
  border-bottom: 2px solid transparent;
}

.workspace-remapper .global-bottom {
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--global-drop-zone-size);
  background: linear-gradient(to top, var(--drop-zone-alpha-15), transparent);
  border-top: 2px solid transparent;
}

.workspace-remapper .global-left {
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--global-drop-zone-size);
  background: linear-gradient(to right, var(--drop-zone-alpha-15), transparent);
  border-right: 2px solid transparent;
}

.workspace-remapper .global-right {
  top: 0;
  bottom: 0;
  right: 0;
  width: var(--global-drop-zone-size);
  background: linear-gradient(to left, var(--drop-zone-alpha-15), transparent);
  border-left: 2px solid transparent;
}

.workspace-remapper .global-drop-zone.active {
  background: rgba(59, 130, 246, 0.3) !important;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.6);
}

.workspace-remapper .global-top.active {
  border-bottom-color: #3b82f6;
  height: var(--global-drop-zone-size-active);
}

.workspace-remapper .global-bottom.active {
  border-top-color: #3b82f6;
  height: var(--global-drop-zone-size-active);
}

.workspace-remapper .global-left.active {
  border-right-color: #3b82f6;
  width: var(--global-drop-zone-size-active);
}

.workspace-remapper .global-right.active {
  border-left-color: #3b82f6;
  width: var(--global-drop-zone-size-active);
}

/* === Panel Inner Edge Drop Zones === */
.workspace-remapper .panel-edge-zone {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, background 0.15s ease;
  z-index: 20;
}

.workspace-remapper .panel-content.drag-target .panel-edge-zone,
body.is-dragging .workspace-remapper .panel-edge-zone {
  opacity: 1;
  pointer-events: auto;
}

.workspace-remapper .edge-left {
  left: 0;
  top: var(--edge-zone-inset-v);
  bottom: var(--edge-zone-inset-v);
  width: var(--edge-zone-width);
  background: linear-gradient(to right, var(--drop-zone-alpha-10), transparent);
  border-left: var(--border-width-zone) solid transparent;
  border-radius: 0;
}

.workspace-remapper .edge-left.active {
  background: linear-gradient(to right, rgba(59, 130, 246, 0.4), transparent);
  border-left-color: #3b82f6;
}

.workspace-remapper .edge-right {
  right: 0;
  top: var(--edge-zone-inset-v);
  bottom: var(--edge-zone-inset-v);
  width: var(--edge-zone-width);
  background: linear-gradient(to left, var(--drop-zone-alpha-10), transparent);
  border-right: var(--border-width-zone) solid transparent;
  border-radius: 0;
}

.workspace-remapper .edge-right.active {
  background: linear-gradient(to left, rgba(59, 130, 246, 0.4), transparent);
  border-right-color: #3b82f6;
}

.workspace-remapper .edge-top {
  top: 0;
  left: var(--edge-zone-inset-h);
  right: var(--edge-zone-inset-h);
  height: var(--edge-zone-height);
  background: linear-gradient(to bottom, var(--drop-zone-alpha-10), transparent);
  border-top: var(--border-width-zone) solid transparent;
  border-radius: 0;
}

.workspace-remapper .edge-top.active {
  background: linear-gradient(to bottom, rgba(59, 130, 246, 0.4), transparent);
  border-top-color: #3b82f6;
}

.workspace-remapper .edge-bottom {
  bottom: 0;
  left: var(--edge-zone-inset-h);
  right: var(--edge-zone-inset-h);
  height: var(--edge-zone-height);
  background: linear-gradient(to top, var(--drop-zone-alpha-10), transparent);
  border-bottom: var(--border-width-zone) solid transparent;
  border-radius: 0;
}

.workspace-remapper .edge-bottom.active {
  background: linear-gradient(to top, rgba(59, 130, 246, 0.4), transparent);
  border-bottom-color: #3b82f6;
}

/* === Control Panel === */
.workspace-remapper .control-panel {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.workspace-remapper .control-section {
  background: var(--control-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.25rem;
}

.workspace-remapper .control-section h2 {
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-primary-local);
  margin-bottom: 1rem;
}

/* Workspace Name Input */
.workspace-remapper .workspace-name-input {
  width: 100%;
  padding: 0.5rem 0.5rem;
  background: var(--text-black);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-white);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  transition: border-color 0.2s ease;
}

.workspace-remapper .workspace-name-input:focus {
  outline: none;
  border-color: var(--border-focus-local);
}

.workspace-remapper .workspace-name-input::placeholder {
  color: var(--text-muted);
}

/* Visibility Toggles */
.workspace-remapper .visibility-toggles {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.workspace-remapper .visibility-toggle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
}

.workspace-remapper .visibility-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Custom toggle switch */
.workspace-remapper .toggle-switch {
  position: relative;
  width: var(--toggle-width);
  height: var(--toggle-height);
  background: var(--bg-tertiary);
  border-radius: var(--toggle-radius);
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.workspace-remapper .toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: var(--toggle-circle);
  height: var(--toggle-circle);
  background: white;
  border-radius: 50%;
  transition: transform 0.2s ease, background 0.2s ease;
}

.workspace-remapper .visibility-toggle input:checked + .toggle-switch {
  background: var(--toggle-active);
}

.workspace-remapper .visibility-toggle input:checked + .toggle-switch::after {
  transform: translateX(var(--toggle-offset));
  background: white;
}

.workspace-remapper .toggle-label {
  font-size: 0.95rem;
  color: var(--text-primary-local);
  transition: color 0.15s ease, opacity 0.15s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.workspace-remapper .toggle-label .icon {
  font-size: 1.1rem;
  opacity: 0.8;
  color: var(--text-white);
}

.workspace-remapper .toggle-switch.small {
  width: var(--toggle-width-small);
  height: var(--toggle-height-small);
  border-radius: var(--toggle-radius-small);
}

.workspace-remapper .toggle-switch.small::after {
  width: var(--toggle-circle-small);
  height: var(--toggle-circle-small);
}

.workspace-remapper .visibility-toggle input:checked + .toggle-switch.small::after {
  transform: translateX(var(--toggle-offset-small));
}

.workspace-remapper .visibility-toggle input:not(:checked) ~ .toggle-label {
  opacity: 0.5;
}

/* Simple toggle row */
.workspace-remapper .simple-toggle {
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-color);
}

.workspace-remapper .simple-toggle:last-child {
  border-bottom: none;
}

.workspace-remapper .simple-toggle-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--text-primary-local);
}

.workspace-remapper .simple-toggle-label .icon {
  font-size: 1rem;
  color: var(--text-white);
}

.workspace-remapper .simple-toggle-label .icon.material-icons {
  font-size: 18px;
  vertical-align: middle;
}

.workspace-remapper .simple-toggle-label .hidden-hint {
  font-size: 0.7rem;
  color: var(--text-secondary-local);
  font-style: italic;
  margin-left: 0.25rem;
}

.workspace-remapper .simple-toggle:has(input:not(:checked)) .simple-toggle-label {
  opacity: 0.5;
}

/* Panel type row */
.workspace-remapper .panel-type-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 0.5rem;
}

.workspace-remapper .panel-type-row:not(:first-child) {
  margin-top: 0.75rem;
}

.workspace-remapper .panel-type-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-primary-local);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.workspace-remapper .panel-type-label .icon {
  font-size: 1rem;
  color: var(--text-white);
}

.workspace-remapper .panel-type-label .icon.material-icons {
  font-size: 18px;
  vertical-align: middle;
}

.workspace-remapper .panel-type-label .hidden-hint {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--text-secondary-local);
  font-style: italic;
  margin-left: 0.25rem;
}

.workspace-remapper .add-instance-btn {
  width: var(--btn-add-size);
  height: var(--btn-add-size);
  padding: 0;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.workspace-remapper .add-instance-btn:hover {
  background: var(--bg-elevated);
  border-color: var(--border-focus-local);
  color: var(--text-secondary-local);
}

.workspace-remapper .instance-toggle {
  padding-left: 0.5rem;
  position: relative;
}

.workspace-remapper .remove-instance-btn {
  width: var(--btn-remove-size);
  height: var(--btn-remove-size);
  padding: 0;
  margin-left: auto;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

.workspace-remapper .instance-toggle:hover .remove-instance-btn {
  opacity: 1;
}

.workspace-remapper .remove-instance-btn:hover {
  background: var(--btn-remove-bg);
  border-color: var(--btn-remove);
  color: var(--btn-remove);
}

/* Export Section */
.workspace-remapper .export-section {
  background: var(--control-bg);
  border-color: var(--control-border-accent);
}

/* Download Button */
.workspace-remapper .download-button {
  width: 100%;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, var(--export-btn-start), var(--export-btn-end));
  border: 1px solid var(--export-btn-border);
  border-radius: var(--radius-sm);
  color: white;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.workspace-remapper .download-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px var(--export-btn-glow);
}

.workspace-remapper .download-button:active {
  transform: translateY(0);
}

.workspace-remapper .export-steps {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 1rem;
  padding-left: 1.25rem;
  line-height: 1.7;
}

.workspace-remapper .export-steps li {
  margin-bottom: 0.5rem;
}

.workspace-remapper .export-steps li:last-child {
  margin-bottom: 0;
}

.workspace-remapper .export-steps code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  background: var(--text-black);
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  word-break: break-all;
  color: var(--text-white);
}

/* === Dual Display Mode === */
.workspace-remapper .preview-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.workspace-remapper .preview-title-group {
  flex: 1;
}

.workspace-remapper .preview-title-group h1 {
  font-size: 1.5rem;
  line-height: 1.4;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.workspace-remapper .preview-title-group h2 {
  margin-bottom: 0.25rem;
}

.workspace-remapper .dual-display-inline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  background: var(--dual-display-bg);
  border: 1px solid var(--dual-display-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s ease;
}

.workspace-remapper .dual-display-inline:hover {
  border-color: var(--dual-display-border-hover);
  background: var(--dual-display-bg-hover);
}

.workspace-remapper .dual-display-inline input[type="checkbox"] {
  display: none;
}

.workspace-remapper .dual-display-inline .toggle-switch {
  order: -1;
}

.workspace-remapper .dual-display-inline input[type="checkbox"]:checked + .toggle-switch {
  background: var(--toggle-active);
}

.workspace-remapper .dual-display-inline input[type="checkbox"]:checked + .toggle-switch::after {
  transform: translateX(var(--toggle-offset));
  background: white;
}

.workspace-remapper .dual-display-inline:has(input:checked) {
  border-color: var(--dual-display-border-active);
  background: var(--dual-display-bg-active);
}

.workspace-remapper .dual-display-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-white);
  white-space: nowrap;
}

.workspace-remapper .dual-display-label .icon {
  font-size: 0.9rem;
  color: var(--text-white);
}

/* Controls Row (Dual Display + Reset) */
.workspace-remapper .controls-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 0.75rem;
}

/* History Controls Container */
.workspace-remapper .history-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* History Buttons (Undo/Redo) */
.workspace-remapper .history-btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.workspace-remapper .history-btn:hover:not(:disabled) {
  color: var(--text-white);
}

.workspace-remapper .history-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.workspace-remapper .history-btn .material-icons {
  font-size: 0.95rem;
}

.workspace-remapper .history-btn .undo-text,
.workspace-remapper .history-btn .redo-text {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Reset Button */
.workspace-remapper .reset-layout-btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.workspace-remapper .reset-layout-btn:hover {
  color: var(--text-white);
}

.workspace-remapper .reset-layout-btn .material-icons {
  font-size: 0.95rem;
}

.workspace-remapper .reset-layout-btn .reset-text {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.workspace-remapper .secondary-display-container {
  display: none;
  margin-top: 1.5rem;
}

.workspace-remapper .secondary-display-container.visible {
  display: block;
}

.workspace-remapper .display-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  padding-left: 0.25rem;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.workspace-remapper .display-hint {
  font-size: 0.7rem;
  font-weight: 400;
  color: #FFD700;
  text-transform: none;
  letter-spacing: normal;
  opacity: 1;
}

.workspace-remapper .primary-display-label {
  margin-top: 0;
}

.workspace-remapper .secondary-display-label {
  margin-top: 0;
  color: var(--text-secondary);
}

.workspace-remapper .secondary-preview {
  border-color: var(--border-color);
  background: transparent;
}

.workspace-remapper .move-display-btn {
  width: var(--btn-move-size);
  height: var(--btn-move-size);
  padding: 0;
  margin-right: 0.25rem;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  color: white;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.workspace-remapper .move-display-btn:hover {
  background: rgba(255, 255, 255, 0.35);
  border-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.1);
}

.workspace-remapper .move-display-btn:active {
  transform: scale(0.95);
}

/* === Responsive === */
@media (max-width: 1024px) {
  .workspace-remapper .app-main {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
  }

  .workspace-remapper .control-panel {
    grid-column: 1;
    grid-row: 2;
  }

  .workspace-remapper .preview-section {
    grid-column: 1;
    grid-row: 3;
  }
}

@media (max-width: 640px) {
  .workspace-remapper .app-main {
    padding: 1rem;
    gap: 1rem;
  }

  .workspace-remapper .layout-preview {
    aspect-ratio: 4 / 3;
  }
}