/* Elsewhere Guitar Wiring Tool - Dark Theme + Layout Fixes */
/* Scoped to #elsewhere-guitar-wiring-tool to prevent leaking */

/* === ISOLATION FROM WORDPRESS THEMES === */
#elsewhere-guitar-wiring-tool,
#elsewhere-guitar-wiring-tool * {
  box-sizing: border-box;
}

#elsewhere-guitar-wiring-tool button,
#elsewhere-guitar-wiring-tool input,
#elsewhere-guitar-wiring-tool select {
  all: revert;
  font: inherit;
  box-sizing: border-box;
}

#elsewhere-guitar-wiring-tool svg {
  max-width: none !important;
}

#elsewhere-guitar-wiring-tool image,
#elsewhere-guitar-wiring-tool svg image {
  max-width: none !important;
  height: auto !important;
}

/* === BASE CONTAINER === */
#elsewhere-guitar-wiring-tool {
  color-scheme: dark;
  font-family: 'Poppins', sans-serif;
  color: #e0e0e0;
  background: #1a1a1a;
  --panel-bg: #2b2b2b;
  --panel-border: rgba(255,255,255,.08);
  --shadow: 0 2px 10px rgba(0,0,0,.3);
  --valid: #63FF07;
  --warning: #FFC725;
  --invalid: #e53e3e;
  --muted: #666;
  border-radius: 12px;
  height: 100%;
  position: relative;
}

/* === HIDE HERO AND FOOTER === */
#elsewhere-guitar-wiring-tool .hero { display: none !important; }
#elsewhere-guitar-wiring-tool .footer-note { display: none !important; }

/* === APP SHELL === */
#elsewhere-guitar-wiring-tool .app-shell {
  padding: 10px !important;
  height: 100%;
}

/* === PANEL DARK STYLING === */
#elsewhere-guitar-wiring-tool .hero-card,
#elsewhere-guitar-wiring-tool .panel {
  background: #2b2b2b !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.25) !important;
  backdrop-filter: none !important;
}

/* === LAYOUT - CONTAINER-BASED, NOT VIEWPORT-BASED === */
#elsewhere-guitar-wiring-tool .layout {
  grid-template-columns: minmax(240px, 300px) minmax(500px, 1fr) minmax(240px, 300px) !important;
  gap: 10px !important;
  height: 100% !important;
  max-height: none !important;
  overflow: hidden !important;
}

/* === LEFT COLUMN === */
#elsewhere-guitar-wiring-tool .left-column {
  height: 100% !important;
  max-height: none !important;
  overflow-y: auto !important;
  scrollbar-width: thin;
  scrollbar-color: #444 transparent;
  gap: 8px !important;
}

/* === CENTER COLUMN === */
#elsewhere-guitar-wiring-tool .center-column {
  height: 100% !important;
  max-height: none !important;
  overflow-y: auto !important;
  scrollbar-width: thin;
  scrollbar-color: #444 transparent;
  gap: 8px !important;
}

/* === PANEL COMPACT === */
#elsewhere-guitar-wiring-tool .panel { padding: 10px 12px !important; }
#elsewhere-guitar-wiring-tool .panel-header { margin-bottom: 4px !important; }

/* === TYPOGRAPHY === */
#elsewhere-guitar-wiring-tool .panel-header h2,
#elsewhere-guitar-wiring-tool .explanation-block h3 {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #fff !important;
}
#elsewhere-guitar-wiring-tool .panel-header p,
#elsewhere-guitar-wiring-tool .explanation-block p,
#elsewhere-guitar-wiring-tool .issue span,
#elsewhere-guitar-wiring-tool .inventory-card__help {
  color: #999 !important;
  font-size: 11px !important;
  margin: 2px 0 0 !important;
}
#elsewhere-guitar-wiring-tool .eyebrow {
  color: #FFC725 !important;
  font-size: 10px !important;
}

/* === FORM ELEMENTS === */
#elsewhere-guitar-wiring-tool .field span,
#elsewhere-guitar-wiring-tool .inventory-card__title {
  font-weight: 500 !important;
  font-size: 11px !important;
  color: #ccc !important;
}
#elsewhere-guitar-wiring-tool .field select,
#elsewhere-guitar-wiring-tool .inventory-card input,
#elsewhere-guitar-wiring-tool .ghost-button,
#elsewhere-guitar-wiring-tool .switch-pill {
  background: #333 !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 6px !important;
  color: #e0e0e0 !important;
  padding: 5px 8px !important;
  font-size: 11px !important;
}
#elsewhere-guitar-wiring-tool .field select:focus,
#elsewhere-guitar-wiring-tool .inventory-card input:focus {
  outline: none;
  border-color: #63FF07 !important;
}

/* === INVENTORY - COMPACT GRID WITH SCROLL === */
#elsewhere-guitar-wiring-tool .inventory-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4px !important;
  max-height: 200px !important;
  overflow-y: auto !important;
  scrollbar-width: thin;
  scrollbar-color: #444 transparent;
}
#elsewhere-guitar-wiring-tool .inventory-card {
  padding: 6px 8px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  background: #333 !important;
  gap: 2px !important;
}

/* === SWITCH PILLS === */
#elsewhere-guitar-wiring-tool .switch-pill {
  font-size: 11px !important;
  padding: 4px 8px !important;
}
#elsewhere-guitar-wiring-tool .switch-pill--active {
  background: #63FF07 !important;
  color: #1a1a1a !important;
  border-color: #63FF07 !important;
  font-weight: 600 !important;
}

/* === GHOST BUTTONS === */
#elsewhere-guitar-wiring-tool .ghost-button {
  font-size: 11px !important;
  padding: 5px 10px !important;
}
#elsewhere-guitar-wiring-tool .ghost-button:hover { border-color: #FFC725 !important; }

/* === GUIDED STEPS === */
#elsewhere-guitar-wiring-tool .current-step-card { background: rgba(99,255,7,.06) !important; }
#elsewhere-guitar-wiring-tool .current-step-card__eyebrow { color: #63FF07 !important; }
#elsewhere-guitar-wiring-tool .success-state { background: rgba(99,255,7,.08) !important; }
#elsewhere-guitar-wiring-tool .guided-step { background: #333 !important; font-size: 11px !important; padding: 8px !important; }
#elsewhere-guitar-wiring-tool .guided-step--completed { border-color: rgba(99,255,7,.35) !important; background: rgba(99,255,7,.06) !important; }
#elsewhere-guitar-wiring-tool .guided-step--active { border-color: rgba(255,199,37,.4) !important; background: rgba(255,199,37,.06) !important; }

/* === SWITCH SYSTEM CARDS === */
#elsewhere-guitar-wiring-tool .switch-system-card {
  background: #333 !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 8px !important;
  padding: 10px !important;
}
#elsewhere-guitar-wiring-tool .switch-system-card__header p,
#elsewhere-guitar-wiring-tool .switch-summary p { color: #999 !important; }

/* === TOGGLE CARDS === */
#elsewhere-guitar-wiring-tool .toggle-card {
  background: #333 !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 8px !important;
  padding: 10px !important;
}
#elsewhere-guitar-wiring-tool .toggle-card p { color: #999 !important; }

/* === SVG CANVAS - THE CRITICAL FIX === */
#elsewhere-guitar-wiring-tool .svg-wrap {
  background: #222 !important;
  border-radius: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: auto !important;
}

#elsewhere-guitar-wiring-tool .svg-wrap--interactive {
  min-height: 350px !important;
}

/* FIX: Override the base CSS min-width:760px that causes overflow */
#elsewhere-guitar-wiring-tool .svg-wrap svg {
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
}

/* === SVG COMPONENT STYLING FOR DARK THEME === */
#elsewhere-guitar-wiring-tool .component { fill: #2b2b2b !important; stroke: rgba(255,255,255,.12) !important; }
#elsewhere-guitar-wiring-tool .component--pickup { fill: #2e2e2e !important; }
#elsewhere-guitar-wiring-tool .component--volume-pot,
#elsewhere-guitar-wiring-tool .component--tone-pot { fill: #2d2d2d !important; }
#elsewhere-guitar-wiring-tool .component--3-way-switch,
#elsewhere-guitar-wiring-tool .component--5-way-switch { fill: #2c2c2c !important; }
#elsewhere-guitar-wiring-tool .component--ground-wire { fill: #282828 !important; }
#elsewhere-guitar-wiring-tool .component-label {
  fill: #e0e0e0 !important;
  stroke: #1a1a1a !important;
  font-size: 14px !important;
}
#elsewhere-guitar-wiring-tool .component-note,
#elsewhere-guitar-wiring-tool .lug-label,
#elsewhere-guitar-wiring-tool .svg-label {
  fill: #aaa !important;
  stroke: #1a1a1a !important;
  font-size: 11px !important;
}
#elsewhere-guitar-wiring-tool .lug { fill: #444 !important; stroke: #888 !important; }
#elsewhere-guitar-wiring-tool .lug--active { fill: #FFC725 !important; stroke: #FFC725 !important; }

/* === TOOLTIPS === */
#elsewhere-guitar-wiring-tool .tooltip--valid { background: rgba(99,255,7,.08) !important; }
#elsewhere-guitar-wiring-tool .tooltip--warning { background: rgba(255,199,37,.08) !important; }
#elsewhere-guitar-wiring-tool .tooltip--invalid { background: rgba(229,62,62,.08) !important; }

/* === RIGHT COLUMN EXPLANATION === */
#elsewhere-guitar-wiring-tool .explanation-panel {
  height: 100% !important;
  max-height: none !important;
  overflow-y: auto !important;
  scrollbar-width: thin;
  scrollbar-color: #444 transparent;
}
#elsewhere-guitar-wiring-tool .explanation-block + .explanation-block { margin-top: 8px !important; }

/* === ISSUES === */
#elsewhere-guitar-wiring-tool .issue { font-size: 11px !important; border-radius: 6px !important; padding: 6px 8px !important; }
#elsewhere-guitar-wiring-tool .issue--warning { background: rgba(255,199,37,.08) !important; }
#elsewhere-guitar-wiring-tool .issue--invalid { background: rgba(229,62,62,.08) !important; }
#elsewhere-guitar-wiring-tool .issue--valid { background: rgba(99,255,7,.08) !important; }
#elsewhere-guitar-wiring-tool .issue--neutral { background: rgba(255,255,255,.03) !important; }
#elsewhere-guitar-wiring-tool .diagnostic-group__title { color: #999 !important; }

/* === LEGEND === */
#elsewhere-guitar-wiring-tool .legend { color: #999 !important; font-size: 11px !important; }
#elsewhere-guitar-wiring-tool .legend-chip--valid { background: #63FF07 !important; }
#elsewhere-guitar-wiring-tool .legend-chip--warning { background: #FFC725 !important; }
#elsewhere-guitar-wiring-tool .legend-chip--glow { background: #63FF07 !important; box-shadow: 0 0 6px rgba(99,255,7,.5) !important; }

/* === FULLSCREEN === */
#elsewhere-guitar-wiring-tool .panel--fullscreen {
  background: #1a1a1a !important;
  z-index: 99999 !important;
}

/* === PROGRESS BAR === */
#elsewhere-guitar-wiring-tool .guided-progress__fill { background: linear-gradient(90deg, #63FF07, #4dcc06) !important; }
#elsewhere-guitar-wiring-tool .guided-progress__meter { background: #444 !important; }

/* === MISC === */
#elsewhere-guitar-wiring-tool .mobile-hint { color: #999 !important; }
#elsewhere-guitar-wiring-tool .hero-copy { color: #999 !important; }

/* === SPACING === */
#elsewhere-guitar-wiring-tool .stack { gap: 8px !important; }
#elsewhere-guitar-wiring-tool .field { gap: 4px !important; }
#elsewhere-guitar-wiring-tool .toggle-row { gap: 6px !important; }
#elsewhere-guitar-wiring-tool .switch-positions,
#elsewhere-guitar-wiring-tool .legend,
#elsewhere-guitar-wiring-tool .pill-row,
#elsewhere-guitar-wiring-tool .canvas-actions { gap: 5px !important; }
#elsewhere-guitar-wiring-tool .guided-progress,
#elsewhere-guitar-wiring-tool .guided-step-list,
#elsewhere-guitar-wiring-tool .guided-actions,
#elsewhere-guitar-wiring-tool .current-step-card,
#elsewhere-guitar-wiring-tool .success-state { gap: 6px !important; }
#elsewhere-guitar-wiring-tool .current-step-card,
#elsewhere-guitar-wiring-tool .success-state { padding: 10px !important; }
#elsewhere-guitar-wiring-tool .switch-system-card { gap: 6px !important; }

/* === RESPONSIVE === */
@media (max-width: 1100px) {
  #elsewhere-guitar-wiring-tool .layout { grid-template-columns: 1fr !important; height: auto !important; }
  #elsewhere-guitar-wiring-tool .left-column { max-height: 300px !important; height: auto !important; }
  #elsewhere-guitar-wiring-tool .explanation-panel { position: static !important; max-height: 300px !important; height: auto !important; }
}
@media (max-width: 700px) {
  #elsewhere-guitar-wiring-tool .app-shell { padding: 6px !important; }
  #elsewhere-guitar-wiring-tool .inventory-grid { grid-template-columns: 1fr !important; max-height: 150px !important; }
}