/* =============================================================
   THEME-AMBER.CSS
   Dark industrial / amber-accent theme.
   Shared by: main.css, control_styles.css, control_help.css

   Load after base.css, before any page-specific sheet.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Barlow+Condensed:wght@600;700;800;900&family=Barlow:wght@400;500;600&display=swap');

:root {
  /* Backgrounds */
  --bg-base:      #0a0c0f;
  --bg-panel:     #0f1217;
  --bg-panel2:    #141820;
  --bg-input:     #1a1f2a;

  /* Borders */
  --border:       #222a38;
  --border-hi:    #2e3a50;

  /* Accent colours */
  --amber:        #f0a500;
  --amber-dim:    #a06a00;
  --amber-glow:   rgba(240, 165, 0, 0.12);
  --cyan:         #00d4e8;
  --cyan-dim:     #007080;
  --green:        #39e080;
  --green-dim:    #1a6035;
  --red:          #ff4455;
  --red-dim:      #7a1520;
  --purple:       #a080ff;

  /* Semantic accent alias used by base range input */
  --accent-primary: var(--amber);

  /* Text */
  --text-primary: #d8dde8;
  --text-dim:     #6a7590;
  --text-muted:   #929db9;

  /* Typography */
  --font-mono:    'Share Tech Mono', monospace;
  --font-head:    'Barlow Condensed', sans-serif;
  --font-body:    'Barlow', sans-serif;

  /* Spacing */
  --radius:       4px;
  --panel-gap:    10px;
}

html, body {
  min-height: 100vh;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
}

/* ── HEADER ── */
header, #header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  height: 58px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: 16px;
}

.logo-mark {
  font-family: var(--font-mono);
  font-size: 20px;
  color: var(--amber);
  letter-spacing: 0.05em;
  line-height: 1;
}

.app-title, .site-title {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--text-primary);
}

.app-subtitle, .site-sub {
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.08em;
}

/* ── PANELS ── */
.panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--bg-panel2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.panel-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--amber);
  background: var(--amber-glow);
  border: 1px solid var(--amber-dim);
  padding: 1px 5px;
  border-radius: 2px;
}

.panel-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.12em;
  color: var(--text-primary);
  flex: 1;
}

.panel-body {
  padding: 14px;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* ── BUTTONS ── */
.btn {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  padding: 6px 14px;
  border: 1px solid var(--border-hi);
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--bg-panel2);
  color: var(--text-dim);
  transition: all 0.15s;
}
.btn:hover { border-color: var(--amber-dim); color: var(--amber); }
.btn-primary {
  background: var(--amber-glow);
  border-color: var(--amber-dim);
  color: var(--amber);
}
.btn-primary:hover { background: rgba(240,165,0,0.25); border-color: var(--amber); }
.btn-warn { border-color: var(--red-dim); color: var(--red); background: rgba(255,68,85,0.08); }
.btn-warn:hover { background: rgba(255,68,85,0.18); border-color: var(--red); }
.btn-ghost { background: transparent; }
.btn-sm { padding: 4px 10px; font-size: 11px; }
.btn-xs { padding: 2px 8px; font-size: 10px; }

/* ── FORM ELEMENTS ── */
.field-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 5px;
  display: block;
}

.field-input, .field-select {
  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: 5px 8px;
  outline: none;
  transition: border-color 0.15s;
}
.field-input:focus, .field-select:focus { border-color: var(--amber-dim); }
.field-select option { background: var(--bg-panel2); }

/* ── SHARED STATUS DOT ── */
.status-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: background 0.3s, box-shadow 0.3s;
}
.status-dot.running {
  background: var(--green);
  box-shadow: 0 0 10px var(--green);
  animation: pulse 1.2s ease-in-out infinite;
}
.status-dot.stopped { background: var(--red); }

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

/* ── FOOTER ── */
footer {
  padding: 20px 32px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.footer-left {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.08em;
}

/* ── DIVIDER ── */
.divider {
  height: 1px;
  background: var(--border);
  margin: 12px 0;
}

/* ── SCANLINE (shared atmospheric effect) ── */
.scanlines::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.06) 2px,
    rgba(0, 0, 0, 0.06) 4px
  );
}