/* =============================================================================
   PANEL TEXTURES — panel-textures.css
   Decorative SVG backgrounds for left and right panels.
   Pure CSS, zero JS. Opacity 2–5% — purely ambient.
   Left  → Infrastructure blueprint: node grid, topology lines, port dots
   Right → Analysis / intelligence: radar arcs, telemetry curves, signal traces
   ============================================================================= */

/* ─── LEFT PANEL — Infrastructure Blueprint ─────────────────────────────────
   Layered SVG patterns via ::before pseudo-element.
   Pattern: faint isometric grid + node boxes connected by topology lines.
   --------------------------------------------------------------------------- */

#left-panel {
  position: relative;
  overflow: hidden; /* keep pseudo-element clipped */
}

#left-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.07;

  /* tiny connection nodes — dots at intersections */
  background-image:
    radial-gradient(circle, #334155 1px, transparent 1px),
    linear-gradient(90deg, transparent 0%, transparent calc(50% - 0.5px), #334155 50%, transparent calc(50% + 0.5px), transparent 100%),
    linear-gradient(180deg, transparent 0%, transparent calc(50% - 0.5px), #334155 50%, transparent calc(50% + 0.5px), transparent 100%);

  background-size:
    28px 28px,
    56px 56px,
    56px 56px;
}

/* SVG topology art — node boxes + connection lines */
#left-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='520' viewBox='0 0 280 520'%3E%3Cg fill='none' stroke='%23334155' stroke-width='1'%3E%3C!-- Node boxes --%3E%3Crect x='20' y='40' width='52' height='28' rx='5'/%3E%3Crect x='114' y='40' width='52' height='28' rx='5'/%3E%3Crect x='208' y='40' width='52' height='28' rx='5'/%3E%3Crect x='66' y='120' width='52' height='28' rx='5'/%3E%3Crect x='162' y='120' width='52' height='28' rx='5'/%3E%3Crect x='114' y='200' width='52' height='28' rx='5'/%3E%3Crect x='20' y='280' width='52' height='28' rx='5'/%3E%3Crect x='208' y='280' width='52' height='28' rx='5'/%3E%3Crect x='114' y='360' width='52' height='28' rx='5'/%3E%3Crect x='66' y='440' width='52' height='28' rx='5'/%3E%3Crect x='162' y='440' width='52' height='28' rx='5'/%3E%3C!-- Connection lines --%3E%3Cline x1='72' y1='54' x2='114' y2='54'/%3E%3Cline x1='166' y1='54' x2='208' y2='54'/%3E%3Cline x1='46' y1='68' x2='92' y2='120'/%3E%3Cline x1='140' y1='68' x2='140' y2='120'/%3E%3Cline x1='234' y1='68' x2='188' y2='120'/%3E%3Cline x1='92' y1='148' x2='140' y2='200'/%3E%3Cline x1='188' y1='148' x2='140' y2='200'/%3E%3Cline x1='140' y1='228' x2='46' y2='280'/%3E%3Cline x1='140' y1='228' x2='234' y2='280'/%3E%3Cline x1='46' y1='308' x2='140' y2='360'/%3E%3Cline x1='234' y1='308' x2='140' y2='360'/%3E%3Cline x1='140' y1='388' x2='92' y2='440'/%3E%3Cline x1='140' y1='388' x2='188' y2='440'/%3E%3C!-- Port dots --%3E%3Ccircle cx='72' cy='54' r='2.5' fill='%23334155'/%3E%3Ccircle cx='114' cy='54' r='2.5' fill='%23334155'/%3E%3Ccircle cx='166' cy='54' r='2.5' fill='%23334155'/%3E%3Ccircle cx='208' cy='54' r='2.5' fill='%23334155'/%3E%3Ccircle cx='92' cy='134' r='2.5' fill='%23334155'/%3E%3Ccircle cx='188' cy='134' r='2.5' fill='%23334155'/%3E%3Ccircle cx='140' cy='214' r='2.5' fill='%23334155'/%3E%3Ccircle cx='46' cy='294' r='2.5' fill='%23334155'/%3E%3Ccircle cx='234' cy='294' r='2.5' fill='%23334155'/%3E%3Ccircle cx='140' cy='374' r='2.5' fill='%23334155'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-y;
  background-position: center 0;
  background-size: 280px auto;
}

/* Ensure panel content sits above the texture */
#left-panel > * { position: relative; z-index: 1; }

/* ─── LEFT PANEL CONTENT — transparent so SVG texture shows through ──────── */
#left-panel .components-section,
#left-panel .inspector-section,
#left-panel .panel-section,
#left-panel .component-grid,
#left-panel .palette,
.inspector,
.inspector-extra,
.inspector-extra-title,
.inspector-extra-body {
  background: transparent !important;
}

.inspector {
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 4px 0;
}


/* ─── RIGHT PANEL — Analysis / Intelligence ──────────────────────────────────
   Pattern: radar arcs, telemetry sine curves, circuit traces, signal flow.
   --------------------------------------------------------------------------- */

#right-panel {
  position: relative;
  overflow: hidden; /* needed to contain ::before pseudo-element */
}

#right-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='600' viewBox='0 0 360 600'%3E%3Cg fill='none' stroke='%23334155' stroke-width='0.8'%3E%3C!-- Radar arcs from bottom-right origin --%3E%3Ccircle cx='360' cy='600' r='100' stroke-dasharray='4 6'/%3E%3Ccircle cx='360' cy='600' r='180' stroke-dasharray='4 6'/%3E%3Ccircle cx='360' cy='600' r='260' stroke-dasharray='4 6'/%3E%3Ccircle cx='360' cy='600' r='340' stroke-dasharray='4 6'/%3E%3Ccircle cx='360' cy='600' r='420' stroke-dasharray='4 6'/%3E%3C!-- Radar cross-hairs --%3E%3Cline x1='360' y1='600' x2='0' y2='200' stroke-dasharray='3 8' stroke-opacity='0.6'/%3E%3Cline x1='360' y1='600' x2='60' y2='0' stroke-dasharray='3 8' stroke-opacity='0.6'/%3E%3Cline x1='360' y1='600' x2='180' y2='0' stroke-dasharray='3 8' stroke-opacity='0.6'/%3E%3C!-- Telemetry sine curve (top region) --%3E%3Cpath d='M0,80 C30,60 60,100 90,80 C120,60 150,100 180,80 C210,60 240,100 270,80 C300,60 330,100 360,80' stroke-width='1'/%3E%3Cpath d='M0,100 C30,80 60,120 90,100 C120,80 150,120 180,100 C210,80 240,120 270,100 C300,80 330,120 360,100' stroke-width='0.6' stroke-opacity='0.5'/%3E%3C!-- Circuit traces (mid region) --%3E%3Cpolyline points='20,260 60,260 60,240 120,240 120,260 180,260' stroke-width='0.9'/%3E%3Cpolyline points='200,260 240,260 240,280 300,280 300,260 340,260' stroke-width='0.9'/%3E%3Ccircle cx='60' cy='260' r='3' fill='%23334155'/%3E%3Ccircle cx='120' cy='260' r='3' fill='%23334155'/%3E%3Ccircle cx='240' cy='260' r='3' fill='%23334155'/%3E%3Ccircle cx='300' cy='260' r='3' fill='%23334155'/%3E%3C!-- Signal flow arrows --%3E%3Cline x1='0' y1='380' x2='360' y2='380' stroke-dasharray='6 4' stroke-opacity='0.4'/%3E%3Cpolygon points='350,376 360,380 350,384' fill='%23334155' stroke='none' opacity='0.4'/%3E%3Cline x1='0' y1='400' x2='280' y2='400' stroke-dasharray='6 4' stroke-opacity='0.25'/%3E%3C!-- Corner tick marks (observability grid) --%3E%3Cline x1='0' y1='460' x2='8' y2='460'/%3E%3Cline x1='0' y1='480' x2='8' y2='480'/%3E%3Cline x1='0' y1='500' x2='8' y2='500'/%3E%3Cline x1='0' y1='520' x2='8' y2='520'/%3E%3Cline x1='0' y1='540' x2='6' y2='540' stroke-opacity='0.5'/%3E%3Cline x1='0' y1='560' x2='6' y2='560' stroke-opacity='0.5'/%3E%3C!-- Top-left bracket --%3E%3Cpath d='M20,10 L10,10 L10,50' stroke-width='1.2'/%3E%3Cpath d='M340,10 L350,10 L350,50' stroke-width='1.2'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
}

/* Subtle horizontal scan-line shimmer at top (telemetry bar feel) */
#right-panel::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(59,130,246,0.35) 30%,
    rgba(99,102,241,0.45) 60%,
    transparent 100%
  );
}

/* Ensure panel content sits above the texture */
#right-panel > * { position: relative; z-index: 1; }

/* ─── RIGHT PANEL CONTENT — transparent so SVG texture shows through ─────────
   These containers have white backgrounds that cover the ::before SVG.
   Make them transparent so the panel texture is visible on all tabs.
   --------------------------------------------------------------------------- */
#right-panel .simulation-panel,
#right-panel #practice-content,
#right-panel #simulate-view,
#right-panel #faq-view,
#right-panel .stage-theory,
#right-panel #stage-theory,
#right-panel #lrp-pane-problem,
#right-panel #lrp-pane-simulate,
#right-panel #lrp-pane-discuss,
#right-panel .panel-view,
#right-panel #simulate-panel-actions {
  background: transparent !important;
}