/* ==========================================================
   SHARED THEME SYSTEM — TOW Calculators
   Themes: dark (default) | light | fantasy
   Applied via: html[data-theme="dark|light|fantasy"]
   Landing page body gets class "is-landing"
   ========================================================== */

/* Google Fonts — loaded for fantasy mode */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;800&family=Crimson+Text:ital,wght@0,400;1,400&display=swap');

/* ----------------------------------------------------------
   THEME SWITCHER WIDGET (injected by theme.js)
   ---------------------------------------------------------- */
.theme-switcher {
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(0,0,0,0.38);
  border: 1px solid rgba(255,255,255,0.13);
  box-shadow: 0 4px 16px rgba(0,0,0,0.40);
  flex-shrink: 0;
}
.theme-switcher.fixed {
  position: fixed;
  top: 12px;
  right: 16px;
  z-index: 10001;
}
.theme-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  color: rgba(255,255,255,0.55);
  transition: background 140ms, color 140ms;
  white-space: nowrap;
  font-family: ui-sans-serif, system-ui, Arial;
}
.theme-btn:hover { background: rgba(255,255,255,0.14); color: rgba(255,255,255,0.90); }
.theme-btn.active { background: rgba(255,255,255,0.20); color: #fff; }

html[data-theme="light"] .theme-switcher {
  background: rgba(255,255,255,0.82);
  border-color: rgba(0,0,0,0.12);
  box-shadow: 0 4px 16px rgba(0,0,0,0.14);
}
html[data-theme="light"] .theme-btn { color: rgba(0,0,0,0.48); }
html[data-theme="light"] .theme-btn:hover { background: rgba(0,0,0,0.07); color: rgba(0,0,0,0.82); }
html[data-theme="light"] .theme-btn.active { background: rgba(42,60,255,0.12); color: #2a3cff; }

html[data-theme="fantasy"] .theme-switcher {
  background: rgba(15,8,2,0.62);
  border-color: rgba(212,168,83,0.32);
}
html[data-theme="fantasy"] .theme-btn { color: rgba(212,168,83,0.55); }
html[data-theme="fantasy"] .theme-btn:hover { background: rgba(212,168,83,0.14); color: rgba(212,168,83,0.90); }
html[data-theme="fantasy"] .theme-btn.active { background: rgba(212,168,83,0.22); color: #d4a853; }

/* ----------------------------------------------------------
   LANDING PAGE — DARK MODE
   (landing default CSS = fantasy; override here for dark)
   ---------------------------------------------------------- */
html[data-theme="dark"] body.is-landing::before {
  background:
    radial-gradient(ellipse 80% 60% at 70% 55%, rgba(10,15,42,0.42) 0%, rgba(5,8,24,0.82) 100%),
    linear-gradient(to bottom, rgba(10,15,36,0.56) 0%, rgba(4,7,20,0.90) 100%);
}
html[data-theme="dark"] body.is-landing .container {
  background: rgba(8,12,30,0.56);
  border-color: rgba(80,100,200,0.22);
  box-shadow: 0 20px 60px rgba(0,0,0,0.72), inset 0 1px 0 rgba(130,155,255,0.08);
}
html[data-theme="dark"] .fancy-title {
  color: #c8d2ff;
  text-shadow: 0 2px 0 #060c2a, 0 4px 14px rgba(0,0,0,0.92), 0 0 30px rgba(80,110,255,0.25);
}
html[data-theme="dark"] .subtitle { color: rgba(130,152,220,0.65); }
html[data-theme="dark"] body.is-landing .btn {
  background: rgba(70,90,200,0.14);
  border-color: rgba(100,128,255,0.25);
  color: rgba(210,220,255,0.92);
}
html[data-theme="dark"] body.is-landing .btn:hover {
  background: rgba(70,90,200,0.26);
  border-color: rgba(100,128,255,0.48);
  box-shadow: 0 16px 44px rgba(0,0,0,0.65), 0 0 18px rgba(80,110,255,0.12);
}
html[data-theme="dark"] .btn-label { color: #c8d2ff; }
html[data-theme="dark"] .btn-desc { color: rgba(130,152,220,0.62); }
html[data-theme="dark"] .rule-line { background: linear-gradient(to right, transparent, rgba(80,110,255,0.60), transparent); }
html[data-theme="dark"] .rule-diamond { background: #5060cc; }
html[data-theme="dark"] .beta-notice { color: rgba(130,152,220,0.55); }
html[data-theme="dark"] .beta-pill {
  background: rgba(80,110,255,0.14);
  border-color: rgba(80,110,255,0.38);
  color: #8090ff;
}

/* ----------------------------------------------------------
   LANDING PAGE — LIGHT MODE
   ---------------------------------------------------------- */
html[data-theme="light"] body.is-landing::before {
  background:
    radial-gradient(ellipse 80% 60% at 70% 55%, rgba(255,248,228,0.32) 0%, rgba(220,204,172,0.64) 100%),
    linear-gradient(to bottom, rgba(255,248,232,0.40) 0%, rgba(198,182,148,0.64) 100%);
}
html[data-theme="light"] body.is-landing .container {
  background: rgba(255,252,242,0.74);
  border-color: rgba(120,90,40,0.18);
  box-shadow: 0 20px 60px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,240,200,0.55);
}
html[data-theme="light"] .fancy-title {
  color: #2c1608;
  text-shadow: 0 2px 0 rgba(0,0,0,0.08), 0 4px 10px rgba(0,0,0,0.10);
}
html[data-theme="light"] .subtitle { color: rgba(80,50,15,0.65); }
html[data-theme="light"] body.is-landing .btn {
  background: rgba(255,248,228,0.52);
  border-color: rgba(120,90,40,0.22);
  color: #2c1608;
  box-shadow: 0 8px 24px rgba(0,0,0,0.16);
}
html[data-theme="light"] body.is-landing .btn:hover {
  background: rgba(255,245,218,0.70);
  border-color: rgba(120,90,40,0.44);
  box-shadow: 0 14px 36px rgba(0,0,0,0.20);
}
html[data-theme="light"] .btn-label { color: #2c1608; }
html[data-theme="light"] .btn-desc { color: rgba(80,50,15,0.64); }
html[data-theme="light"] .rule-line { background: linear-gradient(to right, transparent, rgba(120,90,40,0.55), transparent); }
html[data-theme="light"] .rule-diamond { background: #7a5820; }
html[data-theme="light"] .beta-notice { color: rgba(60,38,10,0.56); }
html[data-theme="light"] .beta-pill {
  background: rgba(120,90,40,0.12);
  border-color: rgba(120,90,40,0.36);
  color: #7a5820;
}

/* ----------------------------------------------------------
   CALCULATORS — LIGHT MODE
   ---------------------------------------------------------- */
html[data-theme="light"] {
  --bs-body-bg: #f1f4fa;
  --bs-body-color: #1a1f2e;
  --bs-border-color: #d4d9e8;
  --bs-secondary-color: #5e6880;
  --bg: #f1f4fa;
  --card: #ffffff;
  --text: #1a1f2e;
  --muted: #5e6880;
  --line: #d4d9e8;
}
html[data-theme="light"] body:not(.is-landing) { background-color: #f1f4fa; }

html[data-theme="light"] body:not(.is-landing) .navbar {
  background-color: #ffffff;
  border-bottom-color: #d4d9e8;
}
html[data-theme="light"] .card {
  background-color: #ffffff !important;
  border-color: #d4d9e8 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important;
}
html[data-theme="light"] .form-control,
html[data-theme="light"] .form-select {
  background-color: #f7f9fc !important;
  border-color: #d4d9e8 !important;
  color: #1a1f2e !important;
}
html[data-theme="light"] .form-control:focus,
html[data-theme="light"] .form-select:focus {
  background-color: #ffffff !important;
  border-color: #4d6bff !important;
  color: #1a1f2e !important;
  box-shadow: 0 0 0 0.25rem rgba(42,60,255,0.15) !important;
}
html[data-theme="light"] .form-control:disabled { color: #8896aa !important; }
html[data-theme="light"] .form-control::placeholder { color: #9ca5b8 !important; }
html[data-theme="light"] .form-label { color: #5e6880 !important; }
html[data-theme="light"] .form-floating > label { color: #5e6880 !important; }
html[data-theme="light"] .form-floating > .form-control:focus ~ label,
html[data-theme="light"] .form-floating > .form-control:not(:placeholder-shown) ~ label,
html[data-theme="light"] .form-floating > .form-select ~ label { color: #4d6bff !important; }

html[data-theme="light"] .btn-primary { background-color: #2a3cff !important; border-color: #2a3cff !important; color: #fff !important; }
html[data-theme="light"] .btn-primary:hover { background-color: #1f2ecc !important; border-color: #1f2ecc !important; }
html[data-theme="light"] .btn-secondary {
  background-color: #e8ecf6 !important;
  border-color: #d4d9e8 !important;
  color: #1a1f2e !important;
}
html[data-theme="light"] .btn-secondary:hover {
  background-color: #dde3f2 !important;
  border-color: #c4cadc !important;
  color: #1a1f2e !important;
}
html[data-theme="light"] .kpi { background: #f7f9fc !important; border-color: #d4d9e8 !important; }
html[data-theme="light"] .kpi .v { color: #1a1f2e !important; }
html[data-theme="light"] .kpi .k { color: #5e6880 !important; }
html[data-theme="light"] canvas { background: #f7f9fc !important; border-color: #d4d9e8 !important; }
html[data-theme="light"] .chart-note { color: #5e6880 !important; }
html[data-theme="light"] .section-title { color: #5e6880 !important; }
html[data-theme="light"] .form-check-input { background-color: #f7f9fc !important; border-color: #d4d9e8 !important; }
html[data-theme="light"] .form-check-input:checked { background-color: #2a3cff !important; border-color: #2a3cff !important; }
html[data-theme="light"] .form-check-label { color: #1a1f2e !important; }
html[data-theme="light"] hr { border-color: #d4d9e8 !important; opacity: 1; }
html[data-theme="light"] .hint { color: #5e6880 !important; }
html[data-theme="light"] .hint.warn { color: #b85c00 !important; }
html[data-theme="light"] .mod-btn {
  background: #e8ecf6 !important;
  border-color: #d4d9e8 !important;
  color: #1a1f2e !important;
}
html[data-theme="light"] .mod-btn:hover { background: #dde3f2 !important; border-color: #c4cadc !important; }
html[data-theme="light"] .mod-btn.active { background: #2a3cff !important; border-color: #2a3cff !important; color: #fff !important; }
html[data-theme="light"] .report-box { background: #ffffff !important; border-color: #d4d9e8 !important; }
html[data-theme="light"] .report-hdr { border-bottom-color: #d4d9e8 !important; }
html[data-theme="light"] .report-ftr { border-top-color: #d4d9e8 !important; }
html[data-theme="light"] .report-close { color: #5e6880 !important; }
html[data-theme="light"] .flow-step { background: #f7f9fc !important; border-color: #d4d9e8 !important; }
html[data-theme="light"] .step-detail { color: #5e6880 !important; }
html[data-theme="light"] .step-detail b { color: #1a1f2e !important; }
html[data-theme="light"] .tooltip-custom,
html[data-theme="light"] .tooltip { background: #ffffff !important; border-color: #d4d9e8 !important; color: #1a1f2e !important; box-shadow: 0 12px 36px rgba(0,0,0,0.16) !important; }
html[data-theme="light"] .tip-title { color: #1a1f2e !important; }
html[data-theme="light"] .tip-body { color: #5e6880 !important; }
html[data-theme="light"] .rule-link { color: #4d6bff !important; }
/* iOS toggle switch */
html[data-theme="light"] .slider { background: #d4d9e8 !important; }
html[data-theme="light"] input:checked + .slider { background: #2a3cff !important; }
html[data-theme="light"] .slider:before { background: #ffffff !important; }
/* Hub back link */
html[data-theme="light"] .navbar a[href="../index.html"] { color: #5e6880 !important; }
html[data-theme="light"] .navbar a[href="../index.html"]:hover { color: #1a1f2e !important; }

/* ----------------------------------------------------------
   CALCULATORS — FANTASY MODE
   ---------------------------------------------------------- */
html[data-theme="fantasy"] {
  --bs-body-bg: transparent;
  --bs-body-color: #f5e0b0;
  --bs-border-color: rgba(212,168,83,0.30);
  --bg: transparent;
  --card: rgba(18,10,2,0.70);
  --text: #f5e0b0;
  --muted: rgba(212,168,83,0.80);
  --line: rgba(212,168,83,0.28);
}
html[data-theme="fantasy"] body:not(.is-landing) {
  background: url('./landing_page_BG.png') center/cover no-repeat fixed;
  font-family: 'Crimson Text', Georgia, serif;
  color: #f5e0b0;
}
html[data-theme="fantasy"] body:not(.is-landing)::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 70% 55%, rgba(30,16,4,0.28) 0%, rgba(12,6,2,0.72) 100%),
    linear-gradient(to bottom, rgba(18,10,3,0.48) 0%, rgba(10,5,1,0.80) 100%);
  pointer-events: none;
  z-index: 0;
}
html[data-theme="fantasy"] body:not(.is-landing) > * {
  position: relative;
  z-index: 1;
}

html[data-theme="fantasy"] body:not(.is-landing) .navbar {
  background: rgba(10,5,1,0.60);
  border-bottom-color: rgba(212,168,83,0.28);
  backdrop-filter: blur(10px);
}
html[data-theme="fantasy"] .h5,
html[data-theme="fantasy"] .h6,
html[data-theme="fantasy"] h1,
html[data-theme="fantasy"] h2,
html[data-theme="fantasy"] h3 {
  font-family: 'Cinzel', serif;
  color: #f5e0b0;
}
html[data-theme="fantasy"] .text-muted { color: rgba(212,168,83,0.78) !important; }
html[data-theme="fantasy"] .card {
  background-color: rgba(18,10,2,0.72) !important;
  border-color: rgba(212,168,83,0.28) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,220,130,0.08) !important;
  backdrop-filter: blur(10px);
}
html[data-theme="fantasy"] .form-control,
html[data-theme="fantasy"] .form-select {
  background-color: rgba(12,6,2,0.58) !important;
  border-color: rgba(212,168,83,0.30) !important;
  color: #f5e0b0 !important;
}
html[data-theme="fantasy"] .form-control:focus,
html[data-theme="fantasy"] .form-select:focus {
  background-color: rgba(18,10,3,0.70) !important;
  border-color: #d4a853 !important;
  color: #f5e0b0 !important;
  box-shadow: 0 0 0 0.25rem rgba(212,168,83,0.22) !important;
}
html[data-theme="fantasy"] .form-control:disabled { color: rgba(212,168,83,0.45) !important; }
html[data-theme="fantasy"] .form-control::placeholder { color: rgba(212,168,83,0.40) !important; }
html[data-theme="fantasy"] .form-label { color: rgba(212,168,83,0.78) !important; }
html[data-theme="fantasy"] .form-floating > label { color: rgba(212,168,83,0.78) !important; }
html[data-theme="fantasy"] .form-floating > .form-control:focus ~ label,
html[data-theme="fantasy"] .form-floating > .form-control:not(:placeholder-shown) ~ label,
html[data-theme="fantasy"] .form-floating > .form-select ~ label { color: #d4a853 !important; }

html[data-theme="fantasy"] .btn-primary { background-color: #7a4e08 !important; border-color: #9a6510 !important; color: #f5e0b0 !important; }
html[data-theme="fantasy"] .btn-primary:hover { background-color: #9a6510 !important; border-color: #ba7e20 !important; }
html[data-theme="fantasy"] .btn-secondary {
  background-color: rgba(28,15,3,0.58) !important;
  border-color: rgba(212,168,83,0.30) !important;
  color: #f5e0b0 !important;
}
html[data-theme="fantasy"] .btn-secondary:hover {
  background-color: rgba(42,22,5,0.68) !important;
  border-color: rgba(212,168,83,0.52) !important;
  color: #f5e0b0 !important;
}
html[data-theme="fantasy"] .kpi { background: rgba(12,6,2,0.58) !important; border-color: rgba(212,168,83,0.24) !important; }
html[data-theme="fantasy"] .kpi .v { color: #f5e0b0 !important; }
html[data-theme="fantasy"] .kpi .k { color: rgba(212,168,83,0.78) !important; }
html[data-theme="fantasy"] canvas { background: rgba(10,5,1,0.58) !important; border-color: rgba(212,168,83,0.24) !important; }
html[data-theme="fantasy"] .chart-note { color: rgba(212,168,83,0.65) !important; font-style: italic; }
html[data-theme="fantasy"] .section-title { font-family: 'Cinzel', serif; color: rgba(212,168,83,0.80) !important; letter-spacing: 1px; }
html[data-theme="fantasy"] hr { border-color: rgba(212,168,83,0.24) !important; opacity: 1; }
html[data-theme="fantasy"] .form-check-input { background-color: rgba(12,6,2,0.55) !important; border-color: rgba(212,168,83,0.32) !important; }
html[data-theme="fantasy"] .form-check-input:checked { background-color: #7a4e08 !important; border-color: #d4a853 !important; }
html[data-theme="fantasy"] .form-check-label { color: #f5e0b0 !important; font-family: 'Crimson Text', Georgia, serif; }
html[data-theme="fantasy"] .hint { color: rgba(212,168,83,0.65) !important; font-style: italic; }
html[data-theme="fantasy"] .hint.warn { color: #e8a040 !important; }
html[data-theme="fantasy"] .mod-btn { background: rgba(28,15,3,0.55) !important; border-color: rgba(212,168,83,0.28) !important; color: #f5e0b0 !important; }
html[data-theme="fantasy"] .mod-btn:hover { background: rgba(42,22,5,0.65) !important; border-color: rgba(212,168,83,0.50) !important; }
html[data-theme="fantasy"] .mod-btn.active { background: rgba(130,85,12,0.65) !important; border-color: #d4a853 !important; color: #f5e0b0 !important; }
html[data-theme="fantasy"] .btn-export { background-color: rgba(25,55,8,0.65) !important; border-color: rgba(50,110,15,0.58) !important; color: #b8e090 !important; }
html[data-theme="fantasy"] .report-box { background: rgba(15,8,1,0.95) !important; border-color: rgba(212,168,83,0.34) !important; }
html[data-theme="fantasy"] .report-hdr { border-bottom-color: rgba(212,168,83,0.24) !important; }
html[data-theme="fantasy"] .report-ftr { border-top-color: rgba(212,168,83,0.24) !important; }
html[data-theme="fantasy"] .report-close { color: rgba(212,168,83,0.65) !important; }
html[data-theme="fantasy"] .flow-step { background: rgba(12,6,2,0.65) !important; border-color: rgba(212,168,83,0.22) !important; }
html[data-theme="fantasy"] .step-detail { color: rgba(212,168,83,0.78) !important; }
html[data-theme="fantasy"] .step-detail b { color: #f5e0b0 !important; }
html[data-theme="fantasy"] .tooltip-custom,
html[data-theme="fantasy"] .tooltip { background: rgba(18,10,2,0.96) !important; border-color: rgba(212,168,83,0.36) !important; color: #f5e0b0 !important; }
html[data-theme="fantasy"] .tip-title { color: #f5e0b0 !important; }
html[data-theme="fantasy"] .tip-body { color: rgba(212,168,83,0.78) !important; }
html[data-theme="fantasy"] .rule-link { color: rgba(212,168,83,0.75) !important; }
html[data-theme="fantasy"] .rule-link:hover { color: #d4a853 !important; }
/* iOS toggle switch */
html[data-theme="fantasy"] .slider { background: rgba(212,168,83,0.25) !important; }
html[data-theme="fantasy"] input:checked + .slider { background: #7a4e08 !important; border-color: #d4a853 !important; }
html[data-theme="fantasy"] .slider:before { background: #f5e0b0 !important; }
/* Hub back link */
html[data-theme="fantasy"] .navbar a[href="../index.html"] { color: rgba(212,168,83,0.75) !important; }
html[data-theme="fantasy"] .navbar a[href="../index.html"]:hover { color: #d4a853 !important; }
/* Help button (combat) */
html[data-theme="fantasy"] .help { background: rgba(30,16,4,0.70) !important; border-color: rgba(212,168,83,0.30) !important; color: rgba(212,168,83,0.80) !important; }
html[data-theme="fantasy"] .help:hover,
html[data-theme="fantasy"] .help-active { background: rgba(212,168,83,0.18) !important; color: #d4a853 !important; }
html[data-theme="fantasy"] .ruleRow { background: rgba(12,6,2,0.45) !important; border-bottom-color: rgba(212,168,83,0.15) !important; }
html[data-theme="fantasy"] .mount-section { background: rgba(12,6,2,0.45) !important; border-color: rgba(212,168,83,0.22) !important; }

/* ==========================================================
   MOBILE — Responsive overrides
   ========================================================== */

/* ---- Phones ≤575px: theme switcher icon-only, navbar wrap ---- */
@media (max-width: 575px) {
  /* Hide the text label inside theme buttons */
  .theme-label { display: none; }
  .theme-btn   { padding: 5px 7px; }
  .theme-switcher { gap: 0; }

  /* Fixed theme switcher (landing page) — tuck to corner */
  .theme-switcher.fixed { top: 8px; right: 8px; }

  /* Navbar flex row: wrap so switcher can drop to second line */
  .navbar .container-md .d-flex {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  /* Shrink the page title */
  .navbar h1.h5 { font-size: 0.875rem !important; }
}

/* ---- Tablets / small phones ≤767px ---- */
@media (max-width: 767px) {
  /* KPI grid: 2 columns instead of 3 */
  .kpis { grid-template-columns: 1fr 1fr !important; }

  /* Card body: tighter padding + horizontal scroll enabled */
  .card-body {
    padding: 12px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Custom canvases with hardcoded [width] attr (magic, shooting):
     keep at a readable minimum; parent card-body will scroll. */
  canvas[width] {
    min-width: 480px;
    max-width: none !important;
  }

  /* Report modal: use nearly full screen width */
  .report-box {
    width: 98vw !important;
    max-height: 92vh !important;
  }
  .report-hdr, .report-ftr { padding: 12px 14px !important; }
  .report-scroll { padding: 14px !important; }

  /* Modifier toggle buttons: smaller tap targets on mobile */
  .mod-btn { padding: 6px 10px; font-size: 12px; }

  /* Main section: reduce vertical breathing room */
  .container-md.py-4 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }
}