/* ══════════════════════════════════════════════════════════════════════
   base.css — the foundation every other stylesheet builds on:
   reset, theme variables (light + dark), body/typography defaults,
   form inputs, buttons, and the keyframe animations several components
   (modals, the server/session status dots, the summary dashboard) reuse.
   Load this FIRST.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Light mode (default) ── */
:root {
  --bg:          #f5f6fa;
  --surface:     #ffffff;
  --border:      #ddd;
  --text:        #333;
  --text-muted:  #888;
  --text-label:  #555;
  --input-bg:    #fafafa;
  --stat-bg:     #fef9f9;
  --stat-border: #fde8e6;
  --panel-shadow: 0 1px 4px rgba(0,0,0,0.08);
  --log-bg:      #1a1a2e;
  --log-text:    #a8e6cf;
  --progress-bg: #eee;
  --header-from: #c0392b;
  --header-to:   #8e2013;
  --accent:      #c0392b;
  --accent-dark: #a93226;
}

/* ── Dark mode ── */
body.dark {
  --bg:          #0f1117;
  --surface:     #1a1d27;
  --border:      #2e3244;
  --text:        #e2e4ed;
  --text-muted:  #6b7280;
  --text-label:  #9ca3af;
  --input-bg:    #13151f;
  --stat-bg:     #1f2233;
  --stat-border: #2e3244;
  --panel-shadow: 0 1px 4px rgba(0,0,0,0.4);
  --log-bg:      #0a0c14;
  --log-text:    #6ee7b7;
  --progress-bg: #2e3244;
  --accent:      #e05244;
  --accent-dark: #c0392b;
}

body {
  font-family: 'Segoe UI', Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  transition: background 0.25s, color 0.25s;
}

label {
  display: block;
  font-size: 0.82rem;
  color: var(--text-label);
  margin-bottom: 3px;
  margin-top: 10px;
  font-weight: 600;
}

input[type=text], input[type=number], select {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.88rem;
  background: var(--input-bg);
  color: var(--text);
  transition: background 0.25s, border-color 0.25s;
}
input:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
}

.btn {
  display: inline-block;
  padding: 9px 20px;
  border-radius: 7px;
  border: none;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  transition: all 0.15s;
}
.btn-primary              { background: var(--accent); color: white; }
.btn-primary:hover        { background: var(--accent-dark); }
.btn-primary:disabled     { background: #ccc; cursor: not-allowed; }
.btn-secondary            { background: var(--progress-bg); color: var(--text); }
.btn-secondary:hover      { filter: brightness(0.92); }
.btn-green                { background: #27ae60; color: white; }
.btn-green:hover          { background: #219150; }

/* ── Shared animations (modals, status dots, dashboard cards) ── */
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(12px); opacity:0; } to { transform: translateY(0); opacity:1; } }
@keyframes dotPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}