/* PowerCheck v3.2 — Light/Bright Theme
   Designed to align with foodtruckbattery.com landing page:
   warm, optimistic, clean, professional.
   Color palette: white backgrounds, soft grays, teal accents (#0d9488),
   orange CTA (#FF6B35), warm shadows. "Happy to ditch the generator" energy.
*/

/* ===== Core Variables ===== */
:root {
  --pc-accent: #FF6B35;
  --pc-accent-hover: #e85d2c;
  --pc-accent-dim: rgba(255, 107, 53, 0.10);
  --pc-accent-light: rgba(255, 107, 53, 0.06);
  --pc-teal: #0d9488;
  --pc-teal-dim: rgba(13, 148, 136, 0.08);
  --pc-teal-light: rgba(13, 148, 136, 0.05);

  --pc-bg: #ffffff;
  --pc-bg-page: #f8fafb;
  --pc-bg-card: #ffffff;
  --pc-bg-input: #f4f6f8;
  --pc-bg-header: #ffffff;
  --pc-border: #e2e8f0;
  --pc-border-light: #edf2f7;

  --pc-text: #1e293b;
  --pc-text-secondary: #64748b;
  --pc-text-muted: #94a3b8;
  --pc-text-heading: #0f172a;

  --pc-green: #16a34a;
  --pc-green-dim: rgba(22, 163, 74, 0.10);
  --pc-yellow: #ca8a04;
  --pc-yellow-dim: rgba(202, 138, 4, 0.10);
  --pc-red: #dc2626;
  --pc-red-dim: rgba(220, 38, 38, 0.08);
  --pc-blue: #2563eb;
  --pc-blue-dim: rgba(37, 99, 235, 0.08);
  --pc-purple: #7c3aed;
  --pc-purple-dim: rgba(124, 58, 237, 0.08);

  --pc-shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --pc-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --pc-shadow-md: 0 4px 6px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.03);
  --pc-radius: 10px;
}

html { font-size: 14px; }
body {
  background: var(--pc-bg-page) !important;
  color: var(--pc-text) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* ===== Typography overrides ===== */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--pc-text-heading);
}

/* ===== Primary action button ===== */
.btn-primary {
  --bs-btn-bg: var(--pc-accent);
  --bs-btn-border-color: var(--pc-accent);
  --bs-btn-hover-bg: var(--pc-accent-hover);
  --bs-btn-hover-border-color: var(--pc-accent-hover);
  --bs-btn-active-bg: var(--pc-accent-hover);
  --bs-btn-active-border-color: var(--pc-accent-hover);
  --bs-btn-color: #fff;
  font-weight: 600;
  border-radius: 8px;
}

.btn-outline-secondary {
  --bs-btn-color: var(--pc-text-secondary);
  --bs-btn-border-color: var(--pc-border);
  --bs-btn-hover-bg: var(--pc-bg-input);
  --bs-btn-hover-color: var(--pc-text);
  --bs-btn-hover-border-color: var(--pc-border);
  border-radius: 8px;
}

/* ===== Sticky header ===== */
.app-header {
  background: var(--pc-bg-header);
  border-bottom: 1px solid var(--pc-border);
  box-shadow: var(--pc-shadow-sm);
  z-index: 1030;
}
.app-header h1 {
  color: var(--pc-text-heading);
  font-weight: 700;
}
.app-header .bolt { color: var(--pc-accent); font-size: 1.5rem; }
.app-header .subtitle {
  font-size: 0.8rem;
  color: var(--pc-text-secondary);
  font-weight: 400;
}

/* ===== Cards ===== */
.card {
  background: var(--pc-bg-card);
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius);
  box-shadow: var(--pc-shadow-sm);
}

/* ===== Nav tabs ===== */
.nav-tabs {
  --bs-nav-tabs-border-color: var(--pc-border);
  --bs-nav-tabs-link-active-color: var(--pc-accent);
  --bs-nav-tabs-link-active-border-color: transparent transparent var(--pc-accent);
  --bs-nav-tabs-link-active-bg: transparent;
  border-bottom-color: var(--pc-border);
}
.nav-tabs .nav-link {
  color: var(--pc-text-secondary);
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 8px 8px 0 0;
}
.nav-tabs .nav-link:hover {
  color: var(--pc-text);
  border-color: transparent;
}
.nav-tabs .nav-link.active {
  color: var(--pc-accent);
  font-weight: 600;
}

/* ===== Form controls ===== */
.form-control, .form-select {
  background-color: var(--pc-bg-input) !important;
  border-color: var(--pc-border) !important;
  color: var(--pc-text) !important;
  border-radius: 8px;
}
.form-control:focus, .form-select:focus {
  border-color: var(--pc-accent) !important;
  box-shadow: 0 0 0 0.15rem var(--pc-accent-dim) !important;
  background-color: #fff !important;
}
.form-control::placeholder { color: var(--pc-text-muted) !important; }
.form-label { color: var(--pc-text-secondary); }

/* ===== Textarea ===== */
.text-input-area {
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 0.85rem;
  line-height: 1.6;
  min-height: 140px;
}

/* ===== Upload zone ===== */
.upload-zone {
  border: 2px dashed var(--pc-border) !important;
  background: var(--pc-teal-light);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  border-radius: var(--pc-radius);
}
.upload-zone:hover, .upload-zone.dragover {
  border-color: var(--pc-accent) !important;
  background: var(--pc-accent-dim) !important;
}

/* ===== Preset buttons (truck type) ===== */
.preset-btn {
  background: var(--pc-bg-card);
  border: 1px solid var(--pc-border);
  color: var(--pc-text);
  border-radius: 8px;
  transition: all 150ms ease;
}
.preset-btn:hover {
  border-color: var(--pc-teal);
  background: var(--pc-teal-dim);
  color: var(--pc-teal);
}
.preset-btn.active {
  border-color: var(--pc-accent) !important;
  background: var(--pc-accent-dim) !important;
  color: var(--pc-accent) !important;
  font-weight: 600;
}

/* ===== Scenario buttons ===== */
.scenario-btn {
  background: var(--pc-bg-card);
  border: 1px solid var(--pc-border);
  color: var(--pc-text-secondary);
}
.scenario-btn:hover {
  border-color: var(--pc-blue) !important;
  color: var(--pc-blue) !important;
  background: var(--pc-blue-dim) !important;
}

/* ===== Equipment cards ===== */
.equip-card {
  background: var(--pc-bg-card);
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius);
  box-shadow: var(--pc-shadow-sm);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.equip-card:hover {
  border-color: #cbd5e1;
  box-shadow: var(--pc-shadow);
}

/* ===== Behavior badges ===== */
.badge-thermo-heat { background: var(--pc-red-dim) !important; color: var(--pc-red) !important; }
.badge-thermo-cycle { background: var(--pc-blue-dim) !important; color: var(--pc-blue) !important; }
.badge-burst { background: var(--pc-purple-dim) !important; color: var(--pc-purple) !important; }
.badge-motor { background: var(--pc-green-dim) !important; color: var(--pc-green) !important; }
.badge-compressor { background: var(--pc-yellow-dim) !important; color: #a16207 !important; }
.badge-usage-items { background: rgba(219, 39, 119, 0.08) !important; color: #be185d !important; }
.badge-category { background: var(--pc-bg-input) !important; color: var(--pc-text-secondary) !important; }

/* ===== Voltage / size / env selector buttons ===== */
.voltage-btn, .size-btn, .env-btn {
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--pc-bg-input);
  border: 1px solid var(--pc-border);
  color: var(--pc-text-secondary);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 150ms ease;
}
.voltage-btn:hover, .size-btn:hover, .env-btn:hover {
  border-color: var(--pc-teal);
  color: var(--pc-text);
  background: var(--pc-teal-dim);
}
/* beta24 followup: configuration tier buttons (120v_1head, 240v_2head, ...) and
   size / environment buttons — strong orange fill when selected so users can tell
   which configuration is active. Was previously a faint accent-dim background that
   didn't read as "selected". */
.voltage-btn.active, .size-btn.active, .env-btn.active {
  border-color: var(--pc-accent);
  background: var(--pc-accent);
  color: #fff;
  font-weight: 700;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.15);
}
.size-btn { text-transform: uppercase; font-weight: 600; letter-spacing: 0.5px; }
.env-btn { flex: 1; text-align: center; font-size: 0.78rem; }

/* ===== Watt input ===== */
.watt-input {
  width: 80px;
  background: var(--pc-bg-input);
  border: 1px solid var(--pc-border);
  border-radius: 6px;
  color: var(--pc-text);
  padding: 4px 8px;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: right;
  outline: none;
}
.watt-input:focus {
  border-color: var(--pc-accent);
  box-shadow: 0 0 0 2px var(--pc-accent-dim);
}

/* ===== Range slider ===== */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: #e2e8f0;
  border-radius: 3px;
  outline: none;
  border: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  background: var(--pc-accent);
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px;
  background: var(--pc-accent);
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* ===== Qty buttons ===== */
.qty-btn {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: var(--pc-bg-input);
  border: 1px solid var(--pc-border);
  color: var(--pc-text);
  font-size: 1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 150ms ease;
}
.qty-btn:hover {
  border-color: var(--pc-accent);
  color: var(--pc-accent);
  background: var(--pc-accent-dim);
}

/* ===== Gas warning ===== */
.gas-warning {
  background: rgba(255, 107, 53, 0.08);
  border: 1px solid rgba(255, 107, 53, 0.25);
  border-radius: 8px;
  padding: 6px 10px;
  margin-bottom: 6px;
  font-size: 0.75rem;
  color: #c2410c;
  display: flex; align-items: center; gap: 6px;
}
.gas-warning::before { content: '⚠'; font-size: 1rem; }

/* ===== Control labels ===== */
.control-label {
  font-size: 0.75rem;
  color: var(--pc-text-secondary);
  font-weight: 500;
}
.control-value {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--pc-accent);
}

/* ===== Output panel big numbers ===== */
.big-num-card {
  background: var(--pc-bg-card);
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius);
}
.big-num-card.highlight {
  border-color: var(--pc-accent) !important;
  background: linear-gradient(135deg, rgba(255,107,53,0.06), rgba(255,107,53,0.02)) !important;
  box-shadow: 0 2px 8px rgba(255,107,53,0.10);
}
.big-num-label {
  font-size: 0.7rem;
  color: var(--pc-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  font-weight: 600;
}
.big-num-value {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--pc-text-heading);
}
.big-num-card.highlight .big-num-value { color: var(--pc-accent); }
.big-num-unit {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--pc-text-secondary);
  margin-left: 2px;
}

/* ===== Breakdown table ===== */
#breakdown-table {
  --bs-table-bg: var(--pc-bg-card);
  --bs-table-color: var(--pc-text);
  --bs-table-border-color: var(--pc-border-light);
  --bs-table-striped-bg: var(--pc-bg-input);
  --bs-table-striped-color: var(--pc-text);
  --bs-table-hover-bg: var(--pc-teal-light);
  --bs-table-hover-color: var(--pc-text);
  border-radius: var(--pc-radius);
  overflow: hidden;
}
#breakdown-table thead th {
  background: var(--pc-bg-input);
  color: var(--pc-text-secondary);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-bottom: 2px solid var(--pc-border);
}
.breakdown-bar-cell {
  position: relative;
  padding-right: 8px !important;
}
.breakdown-bar {
  position: absolute;
  left: 0; top: 2px; bottom: 2px;
  border-radius: 3px;
  opacity: 0.12;
}
.breakdown-device-name {
  font-weight: 500;
  position: relative;
  z-index: 1;
  color: var(--pc-text);
}
.breakdown-pct {
  color: var(--pc-accent);
  font-weight: 600;
}

/* ===== Parse results ===== */
.parse-results .match-found { color: var(--pc-green); }
.parse-results .match-partial { color: var(--pc-yellow); }
.parse-results .match-none { color: var(--pc-text-muted); }

/* ===== Upload file info ===== */
.upload-filename {
  background: var(--pc-bg-input);
  border: 1px solid var(--pc-border);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 10px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.8rem;
}
.upload-filename .name { color: var(--pc-text); font-weight: 500; }
.upload-filename .size { color: var(--pc-text-muted); }
.upload-filename .remove {
  color: var(--pc-red);
  cursor: pointer;
  background: none;
  border: none;
  font-size: 1rem;
}

/* ===== Confidence badges ===== */
.badge-confirmed {
  background: var(--pc-green-dim); color: var(--pc-green); border: 1px solid rgba(22,163,74,0.25);
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.3px;
}
.badge-unconfirmed {
  background: var(--pc-yellow-dim); color: #a16207; border: 1px solid rgba(202,138,4,0.25);
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.3px;
}
.voltage-toggle {
  display: inline-flex; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--pc-border);
  background: var(--pc-bg-input);
}
.voltage-toggle button {
  background: transparent; border: none;
  color: var(--pc-text-secondary); opacity: 0.6;
  padding: 3px 10px;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.3px;
  cursor: pointer; transition: all 0.15s;
}
/* beta24 followup: make the selected 120V/240V row toggle unmistakably orange */
.voltage-toggle button.active {
  background: var(--pc-accent); color: #fff; opacity: 1;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.15);
}
.voltage-toggle button.active::before {
  content: "\2713 "; font-weight: 900;
}
.voltage-toggle button:not(.active):hover {
  color: var(--pc-text); opacity: 0.9;
  background: rgba(255,107,53,0.12);
}
.make-model-input {
  background: var(--pc-bg-input); border: 1px solid var(--pc-border); color: var(--pc-text);
  border-radius: 6px; padding: 2px 6px; font-size: 0.75rem; width: 100%;
}
.make-model-input::placeholder { color: var(--pc-text-muted); }

/* ===== Per-device voltage toggle (beta20 — device config screens) ===== */
/* beta21: strengthened active state so users can clearly see which value is selected */
.watt-volt-toggle {
  display: inline-flex; align-items: stretch; margin-left: 6px;
  border-radius: 6px; overflow: hidden; border: 1px solid var(--pc-border);
  vertical-align: middle; background: var(--pc-bg-input);
}
.volt-btn {
  background: var(--pc-bg-input); border: none;
  color: var(--pc-text-secondary); opacity: 0.55;
  padding: 5px 11px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.4px;
  cursor: pointer; transition: all 0.15s; line-height: 1.4;
  border-right: 1px solid var(--pc-border);
  position: relative;
}
.volt-btn:last-of-type { border-right: none; }
.volt-btn.active {
  background: var(--pc-accent); color: #fff; opacity: 1;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.15), 0 0 0 2px var(--pc-accent);
  z-index: 1;
  transform: scale(1.05);
}
.volt-btn.active::before {
  content: "✓ "; font-weight: 900;
}
.volt-btn:not(.active):hover {
  color: var(--pc-text); opacity: 0.85;
  background: rgba(255,107,53,0.12);
}
.volt-group {
  /* tighten container so the active scale doesn't get clipped */
  padding: 2px;
}
.volt-auto-badge {
  background: var(--pc-yellow-dim, #fef3c7); color: #a16207;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.3px;
  padding: 2px 6px; border-left: 1px solid var(--pc-border);
  text-transform: uppercase; cursor: help; align-self: center;
}

/* beta21: static voltage badge for the results-page equipment breakdown table.
   Shows ONLY the selected value (120V or 240V) — no dual-button toggle to
   avoid confusion. Edit happens back on the device config step. */
.volt-static-badge {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.3px;
  border: 1px solid var(--pc-border);
}
.volt-static-badge.v120 {
  background: rgba(56, 189, 248, 0.12); color: #0369a1; border-color: rgba(56, 189, 248, 0.3);
}
.volt-static-badge.v240 {
  background: rgba(168, 85, 247, 0.12); color: #7e22ce; border-color: rgba(168, 85, 247, 0.3);
}

/* beta21: voltage profile callout on results page (above system cards) */
.volt-profile-callout {
  background: var(--pc-bg-card); border: 1px solid var(--pc-border);
  border-left: 3px solid var(--pc-accent);
  border-radius: 6px; padding: 10px 14px; margin: 12px 0;
  font-size: 0.85rem; color: var(--pc-text);
}
.volt-profile-callout strong { color: var(--pc-accent); }
.volt-profile-callout .vp-detail { color: var(--pc-text-secondary); font-size: 0.8rem; margin-top: 4px; }

@media (max-width: 575.98px) {
  .watt-volt-toggle { margin-left: 4px; margin-top: 4px; }
  .volt-btn { padding: 3px 8px; font-size: 0.66rem; }
  .volt-auto-badge { font-size: 0.58rem; padding: 1px 5px; }
  .volt-static-badge { font-size: 0.66rem; padding: 2px 6px; }
}

/* ===== Sections ===== */
.output-panel {
  background: var(--pc-bg-card);
}

/* ===== Empty state ===== */
.empty-state { color: var(--pc-text-muted); }

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ===== Responsive ===== */
@media (max-width: 767.98px) {
  .breakdown-title-el, #breakdown-table {
    font-size: 0.72rem;
  }
}

/* ===== Footer ===== */
.app-footer {
  background: var(--pc-bg-card);
  border-top: 1px solid var(--pc-border);
}
.app-footer a {
  color: var(--pc-text-secondary);
  text-decoration: none;
}
.app-footer a:hover { color: var(--pc-accent); }

/* ===== Equip controls grid ===== */
.equip-controls {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.equip-controls .control-group.full-width {
  grid-column: 1 / -1;
}

/* ===== Compact card (simple devices) ===== */
.equip-card .card-body.p-2 .watt-input {
  -moz-appearance: textfield;
}
.equip-card .card-body.p-2 .watt-input::-webkit-outer-spin-button,
.equip-card .card-body.p-2 .watt-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Responsive compact cards on small screens */
@media (max-width: 575.98px) {
  .equip-card .d-flex.flex-shrink-0 {
    flex-wrap: wrap;
    gap: 4px !important;
  }
  .equip-card .watt-input {
    width: 55px !important;
    font-size: 0.75rem !important;
  }
  .equip-card .qty-btn {
    width: 24px !important;
    height: 24px !important;
  }
  .equip-controls {
    grid-template-columns: 1fr 1fr;
  }
}

/* ===== Section labels ===== */
.text-uppercase.fw-bold {
  color: var(--pc-text-secondary) !important;
}

/* ===== Override inline styles from HTML that reference dark theme vars ===== */
[style*="color:var(--pc-text)"] { color: var(--pc-text) !important; }
[style*="color:var(--pc-text-secondary)"] { color: var(--pc-text-secondary) !important; }
[style*="color:var(--pc-text-muted)"] { color: var(--pc-text-muted) !important; }
[style*="background:var(--pc-bg-input)"] { background: var(--pc-bg-input) !important; }
[style*="background:var(--bs-secondary-bg)"] { background: var(--pc-bg-card) !important; }
[style*="border-color:var(--bs-border-color)"] { border-color: var(--pc-border) !important; }
[style*="background:var(--pc-bg-card)"] { background: var(--pc-bg-card) !important; }
[style*="background:var(--pc-accent)"] { background: var(--pc-accent) !important; }

/* ===== Override Bootstrap's dark table class ===== */
.table-dark {
  --bs-table-bg: var(--pc-bg-card) !important;
  --bs-table-color: var(--pc-text) !important;
  --bs-table-border-color: var(--pc-border-light) !important;
  --bs-table-striped-bg: var(--pc-bg-input) !important;
  --bs-table-striped-color: var(--pc-text) !important;
  color: var(--pc-text) !important;
  background: var(--pc-bg-card) !important;
}
.table-dark thead th {
  background: var(--pc-bg-input) !important;
  color: var(--pc-text-secondary) !important;
}

/* ===== Override text-light class used on device count ===== */
.text-light {
  color: var(--pc-text-heading) !important;
}

/* ===== Override btn-outline-light ===== */
.btn-outline-light {
  --bs-btn-color: var(--pc-text-secondary);
  --bs-btn-border-color: var(--pc-border);
  --bs-btn-hover-bg: var(--pc-bg-input);
  --bs-btn-hover-color: var(--pc-text);
  --bs-btn-hover-border-color: var(--pc-border);
}

/* ===== Section dividers for visual structure ===== */
.container > .mb-3,
.container > .mb-4,
.container > .mb-0 {
  background: var(--pc-bg-card);
  border-radius: var(--pc-radius);
  box-shadow: var(--pc-shadow-sm);
  margin-bottom: 12px !important;
}