/*
Copyright (c) 2026 Terry Packer.

This file is part of Terry Packer's Work.
See www.terrypacker.com for further info.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

/* =============================================================
   CONTROL_STYLES.CSS  —  Control Theory page
   Load order:  base.css  →  theme-amber.css  →  control-styles.css
   ============================================================= */

/* ── APP SHELL ── */
html, body { height: 100%; overflow: hidden; font-size: 13px; }

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* ── HEADER SPECIFICS ── */
#header { padding: 0 20px; }

.header-left { display: flex; align-items: center; gap: 12px; }

.logo-mark {
  font-size: 28px;
  filter: drop-shadow(0 0 8px var(--amber));
}

.header-center {
  display: flex;
  align-items: center;
  gap: 24px;
}

.sim-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--text-dim);
}

.sim-time { display: flex; flex-direction: column; align-items: center; }
.sim-time .label { font-size: 9px; color: var(--text-muted); letter-spacing: 0.1em; }
.sim-time .value { font-size: 14px; color: var(--amber); }

/* ── TIME CONTROLS ── */
.time-controls { display: flex; align-items: center; gap: 8px; }

.speed-control {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  padding-left: 12px;
  border-left: 1px solid var(--border);
}
.speed-control .label { font-size: 10px; color: var(--text-dim); letter-spacing: 0.08em; }
.speed-control input[type=range] { width: 90px; }

/* ── MAIN GRID ── */
#mainGrid {
  display: grid;
  grid-template-columns: 260px 1fr 280px;
  grid-template-rows: 1fr;
  gap: var(--panel-gap);
  padding: var(--panel-gap);
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

.right-col {
  display: flex;
  flex-direction: column;
  gap: var(--panel-gap);
  overflow-y: auto;
  min-height: 0;
}

/* ── PANEL VARIANTS ── */
#panelProcess { overflow-y: auto; }
.panel-wide   { overflow: hidden; }

.panel-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--cyan);
  background: rgba(0, 212, 232, 0.08);
  border: 1px solid var(--cyan-dim);
  padding: 2px 8px;
  border-radius: 2px;
  letter-spacing: 0.08em;
}

.panel-controls-inline {
  margin-left: auto;
  display: flex;
  gap: 6px;
}

.panel-body-compact { padding: 10px 14px; }

/* ── FORM ELEMENTS ── */
.field-group          { margin-bottom: 12px; }
.field-group.half     { flex: 1; }
.field-row            { display: flex; gap: 10px; margin-bottom: 12px; }

/* ── SEGMENTED CONTROL ── */
.seg-control {
  display: flex;
  border: 1px solid var(--border-hi);
  border-radius: var(--radius);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.seg {
  flex: 1;
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 5px 8px;
  background: var(--bg-input);
  border: none;
  border-right: 1px solid var(--border-hi);
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.seg:last-child         { border-right: none; }
.seg:hover              { color: var(--text-primary); background: var(--bg-panel2); }
.seg.active             { background: var(--amber-glow); color: var(--amber); border-color: var(--amber-dim); }

/* ── INPUT KNOB ROWS ── */
.input-item {
  background: var(--bg-panel2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
  margin-bottom: 8px;
}
.input-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.input-name {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text-primary);
}
.input-value-display { font-family: var(--font-mono); font-size: 13px; color: var(--amber); }

.input-source-toggle { display: flex; gap: 4px; }
.src-btn {
  font-size: 10px;
  font-family: var(--font-head);
  padding: 2px 7px;
  border-radius: 2px;
  border: 1px solid var(--border-hi);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.src-btn.active { background: var(--amber-glow); color: var(--amber); border-color: var(--amber-dim); }

/* Controller-driven slider variant */
input[type=range].input-slider.controller-driven {
  background: linear-gradient(to right, var(--cyan-dim), var(--cyan-dim));
}
input[type=range].input-slider.controller-driven::-webkit-slider-thumb {
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(0, 212, 232, 0.5);
}

.input-limits {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

/* ── OUTPUT ITEMS ── */
.output-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-panel2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 7px 10px;
  margin-bottom: 6px;
}
.output-name  { font-size: 11px; color: var(--text-dim); font-family: var(--font-head); letter-spacing: 0.06em; }
.output-value { font-family: var(--font-mono); font-size: 14px; color: var(--cyan); }

/* ── SAMPLER ── */
.sampler-live {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--bg-panel2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.big-value { font-size: 22px; color: var(--green); }

/* ── CONTROLLER ── */
.param-row  { display: flex; gap: 8px; margin-bottom: 10px; }
.param-item { flex: 1; }
.param-label { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 3px; }
.param-input {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 4px 6px;
  outline: none;
}
.param-input:focus { border-color: var(--amber-dim); }

.live-output { font-size: 18px; color: var(--purple); padding: 4px 0; }

/* ── CODE EDITOR ── */
.code-editor-wrap { margin-top: 10px; }
.code-label       { font-size: 10px; color: var(--text-dim); letter-spacing: 0.08em; margin-bottom: 5px; }
.code-hint        { color: var(--text-muted); margin-left: 4px; }
.code-editor {
  width: 100%;
  background: #080b10;
  border: 1px solid var(--border-hi);
  border-radius: var(--radius);
  color: #abb2c0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.55;
  padding: 8px 10px;
  resize: vertical;
  outline: none;
}
.code-editor:focus { border-color: var(--amber-dim); }
.code-error { font-family: var(--font-mono); font-size: 11px; color: var(--red); margin-top: 4px; min-height: 16px; }

/* ── MODELER ── */
.toggle-wrap { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.toggle      { position: relative; display: inline-block; width: 34px; height: 18px; }
.toggle input { display: none; }
.toggle-slider {
  position: absolute; inset: 0;
  background: var(--border-hi);
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.2s;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 12px; height: 12px;
  left: 3px; top: 3px;
  background: var(--text-muted);
  border-radius: 50%;
  transition: all 0.2s;
}
.toggle input:checked + .toggle-slider { background: var(--amber-glow); border: 1px solid var(--amber-dim); }
.toggle input:checked + .toggle-slider::before { transform: translateX(16px); background: var(--amber); }

.model-actions  { display: flex; gap: 8px; margin-top: 8px; }
.model-fit-info { font-family: var(--font-mono); font-size: 11px; color: var(--cyan); margin-top: 6px; }

/* ── VISUALS PANEL ── */
.visuals-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding: 10px 14px;
}
.visual-graphic-wrap {
  background: #080b10;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#processGraphic { display: block; max-width: 100%; }

.charts-grid { display: flex; flex-direction: column; gap: 8px; }

.chart-card {
  background: #080b10;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 10px;
}
.chart-label {
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.chart-legend-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.chart-card canvas { display: block; width: 100%; }

.gauges-row { display: flex; gap: 10px; flex-wrap: wrap; }
.gauge-wrap {
  background: #080b10;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px;
  text-align: center;
  flex: 1;
  min-width: 100px;
}
.gauge-label { font-size: 9px; color: var(--text-muted); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 4px; }
.gauge-wrap canvas { display: block; margin: 0 auto; }

/* ── HELP BUTTON (control page variant — inline in header) ── */
#btnHelp {
  font-family: var(--font-mono);
  font-size: 14px;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border-hi);
  background: var(--bg-panel2);
  color: var(--text-dim);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
  margin-left: 10px;
  flex-shrink: 0;
}
#btnHelp:hover {
  border-color: var(--amber);
  color: var(--amber);
  box-shadow: 0 0 10px var(--amber-glow);
}