/* ══════════════════════════════════════════════════════════════════
   Power Supply Modeller — design system
   Graphite / solar-amber / dispatch-teal instrument-panel identity.
   Public Sans for UI text, Roboto Mono for live data readouts.
═══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700&family=Roboto+Mono:wght@500;600;700&display=swap');

:root {
  --ink:        #12181c;   /* primary text / header */
  --ink-soft:   #2c3a40;
  --muted:      #6b7573;   /* secondary text, labels */
  --bg:         #f1f4f1;   /* app background — cool paper */
  --panel:      #ffffff;   /* card surface */
  --line:       #dde2dd;   /* hairline borders */
  --line-soft:  #e8ebe7;

  --amber:      #c2790f;   /* solar / primary accent */
  --amber-dim:  #f4e6cd;
  --teal:       #0e6e5c;   /* BESS / healthy metric (IRR, DSCR) */
  --teal-dim:   #d9ece7;
  --rust:       #9c4a2e;   /* diesel / fuel / caution */
  --rust-dim:   #f2e0d9;

  --focus-ring: rgba(194, 121, 15, .28);
  --font-ui:    'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  'Roboto Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

/* ── Base ─────────────────────────────────────────────────────── */
body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--ink);
}

::selection { background: var(--amber-dim); color: var(--ink); }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: #c3c9c2; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── Header & navigation (retheme of Tailwind utility classes) ──
   These utility classes are used only for this app's header/nav,
   so overriding them here keeps the palette in one place without
   editing every template. */
.bg-slate-900 { background: var(--ink) !important; }
header .text-blue-400 { color: var(--amber) !important; }

.tab {
  position: relative;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .02em;
  transition: color .2s ease;
}
.tab-active   { color: #fff; border-bottom-color: transparent; }
.tab-inactive { color: #7d8a86; border-bottom-color: transparent; }
.tab-inactive:hover { color: #e7e9e6; }

/* Signature: dispatch-trace underline on the active tab */
.tab-active::after {
  content: "";
  position: absolute;
  left: .75rem; right: .75rem; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--amber), var(--teal));
  border-radius: 2px;
}

/* ── Sidebar form ─────────────────────────────────────────────── */
.sec {
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  padding-bottom: .3rem;
  margin-bottom: .75rem;
  margin-top: 1.2rem;
}

.ig label {
  display: block;
  font-size: .68rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: .2rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.ig input, .ig select {
  width: 100%;
  padding: .35rem .5rem;
  border: 1px solid var(--line);
  border-radius: .375rem;
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--ink);
  background: var(--panel);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ig input:hover, .ig select:hover { border-color: #b9c1b8; }
.ig input:focus, .ig select:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.ig input:disabled {
  background: var(--line-soft);
  color: #a3aca6;
  cursor: not-allowed;
}

/* ── Buttons ──────────────────────────────────────────────────── */
.btn-run {
  width: 100%;
  padding: .55rem;
  background: var(--ink);
  color: #fff;
  border-radius: .4rem;
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  border: none;
  transition: background .15s ease;
}
.btn-run:hover { background: var(--amber); }

.btn-auto {
  width: 100%;
  padding: .45rem;
  background: var(--panel);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: .4rem;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.btn-auto:hover { border-color: var(--amber); color: var(--amber); }

/* ── CSV upload zone ──────────────────────────────────────────── */
.upload-zone {
  border: 1.5px dashed #b9c1b8;
  border-radius: .5rem;
  padding: .65rem;
  text-align: center;
  cursor: pointer;
  font-size: .72rem;
  color: var(--muted);
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.upload-zone:hover { border-color: var(--amber); color: var(--amber); background: var(--amber-dim); }
#csv-input { display: none; }

/* ── Loading spinner ──────────────────────────────────────────── */
.spin {
  display: inline-block;
  width: 1rem; height: 1rem;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.hidden-view { display: none !important; }

/* ── Content surface (retheme) ───────────────────────────────── */
.bg-slate-50 { background: var(--bg) !important; }

/* ── Cards: KPI tiles & chart panels ─────────────────────────── */
.bg-white.rounded-xl,
.bg-white.p-4.rounded-xl,
.bg-white.p-5.rounded-xl {
  background: var(--panel) !important;
  border-color: var(--line) !important;
  box-shadow: 0 1px 2px rgba(18, 24, 28, .04) !important;
}

/* KPI labels + values → mono readouts */
.grid .bg-white p:first-child { color: var(--muted) !important; }
.grid .bg-white p.text-xl,
.grid .bg-white p.text-2xl {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.text-slate-800 { color: var(--ink) !important; }
.text-blue-600  { color: var(--teal) !important; }     /* DSCR */
.text-emerald-600 { color: var(--teal) !important; }   /* IRR */

/* Chart panel headers */
.text-slate-700 { color: var(--ink-soft) !important; }

/* Thermal-specific KPI tiles: recolor to the amber/teal/rust set */
.bg-amber-50  { background: var(--amber-dim) !important; border-color: #e6cd9f !important; }
.text-amber-700, .text-amber-900 { color: #8a5a09 !important; }
.bg-orange-50 { background: var(--amber-dim) !important; border-color: #e6cd9f !important; }
.text-orange-700, .text-orange-900 { color: #8a5a09 !important; }
.bg-red-50    { background: var(--rust-dim) !important; border-color: #d9b6a5 !important; }
.text-red-700, .text-red-900 { color: var(--rust) !important; }

/* Sizing view: yellow ready-state icon + blue badge → palette */
.bg-yellow-50 { background: var(--amber-dim) !important; }
.text-yellow-400 { color: var(--amber) !important; }
.bg-blue-50 { background: var(--teal-dim) !important; }
.text-blue-700 { color: var(--teal) !important; }