/*
 * NTherm — Dark Theme
 * Same palette as index.html — applied to all inner pages
 *
 * #0b0e07  bg          | #e8e4d2  text         | #c8b87a  gold
 * #0e120a  bg-2        | rgba(e8e4d2,.50)  muted | #6b9e4a  green
 */

/* ═══════════════════════════════════════════════════
   1. CSS VARIABLES
═══════════════════════════════════════════════════ */
:root {
  --bg:           #0b0e07 !important;
  --bg2:          #0e120a !important;
  --bg3:          #10140b !important;
  --bg-2:         #0e120a !important;
  --bg-3:         #10140b !important;
  --surf:         rgba(232,228,210,0.05) !important;
  --surf2:        rgba(232,228,210,0.08) !important;
  --surface:      rgba(232,228,210,0.04) !important;
  --surface2:     rgba(232,228,210,0.06) !important;
  --cream:        #e8e4d2 !important;
  --cream70:      rgba(232,228,210,0.72) !important;
  --cream50:      rgba(232,228,210,0.50) !important;
  --cream30:      rgba(232,228,210,0.30) !important;
  --cream-dim:    rgba(232,228,210,0.50) !important;
  --cream-sub:    rgba(232,228,210,0.32) !important;
  --text:         #e8e4d2 !important;
  --text2:        rgba(232,228,210,0.60) !important;
  --muted:        rgba(232,228,210,0.52) !important;
  --muted2:       rgba(232,228,210,0.32) !important;
  --border:       rgba(232,228,210,0.10) !important;
  --border2:      rgba(232,228,210,0.18) !important;
  --gold:         #c8b87a !important;
  --gold-dim:     rgba(200,184,122,0.15) !important;
  --gold-bdr:     rgba(200,184,122,0.30) !important;
  --gold-d:       rgba(200,184,122,0.12) !important;
  --gold-b:       rgba(200,184,122,0.30) !important;
  --green:        #6b9e4a !important;
  --green-dim:    rgba(107,158,74,0.14) !important;
  --green-bdr:    rgba(107,158,74,0.28) !important;
  --green-d:      rgba(107,158,74,0.10) !important;
  --green-b:      rgba(107,158,74,0.26) !important;
  --rust:         #b06a3a !important;
  --rust-dim:     rgba(176,100,58,0.14) !important;
  --rust-bdr:     rgba(176,100,58,0.28) !important;
  --teal:         #4a9e8a !important;
  --teal-d:       rgba(74,158,138,0.12) !important;
  --teal-b:       rgba(74,158,138,0.26) !important;
  --blue:         #4a9e8a !important;
  --serif:        'Cormorant Garamond', Georgia, serif !important;
  --sans:         'DM Sans', 'Helvetica Neue', sans-serif !important;
  --mono:         'DM Mono', 'Courier New', monospace !important;
  --shadow-card:  0 20px 60px rgba(0,0,0,0.55) !important;
  --r:            14px !important;

  /* shared.css compat vars */
  --bg-primary:     #0b0e07 !important;
  --bg-secondary:   #0e120a !important;
  --text-primary:   #e8e4d2 !important;
  --text-secondary: rgba(232,228,210,0.60) !important;
  --text-tertiary:  rgba(232,228,210,0.35) !important;
  --border-color:   rgba(232,228,210,0.10) !important;
  --primary-blue:   #4a9e8a !important;
  --primary-green:  #6b9e4a !important;
}

/* ═══════════════════════════════════════════════════
   2. BASE
═══════════════════════════════════════════════════ */
html { background: #0b0e07 !important; }
html, body {
  background: #0b0e07 !important;
  color: #e8e4d2 !important;
  -webkit-font-smoothing: antialiased;
}

/* ═══════════════════════════════════════════════════
   3. KILL ALL AMBIENT / PAGE OVERLAYS
═══════════════════════════════════════════════════ */
body::before, body::after {
  display: none !important;
  opacity: 0 !important;
}
.bg-ambient,
.amb-1, .amb-2, .amb-3,
[class*="ambient"],
[id*="ambient"] {
  display: none !important;
  opacity: 0 !important;
}

/* ═══════════════════════════════════════════════════
   4. KILL backdrop-filter on non-modal elements
   (prevents .nb-overlay and glass cards from blurring page)
═══════════════════════════════════════════════════ */
.nb-overlay,
.calc-card,
.progress-container,
.warm-card,
.result-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ═══════════════════════════════════════════════════
   5. NAVBAR (shared.css header + navbar.js bar)
═══════════════════════════════════════════════════ */
.sh-header,
#nb-bar,
nav[id="nb-bar"] {
  background: rgba(11,14,7,0.96) !important;
  border-bottom-color: rgba(232,228,210,0.08) !important;
}
.sh-logo-icon {
  background: linear-gradient(135deg, #c8b87a, #a09050) !important;
}
.sh-logo-text h1 { color: #e8e4d2 !important; }
.sh-logo-text p   { color: rgba(232,228,210,0.45) !important; }
.sh-nav a         { color: rgba(232,228,210,0.65) !important; }
.sh-nav a:hover   { color: #e8e4d2 !important; }
.sh-mobile-menu {
  background: rgba(11,14,7,0.99) !important;
  border-color: rgba(232,228,210,0.08) !important;
}
.sh-mobile-menu a { color: rgba(232,228,210,0.70) !important; border-color: rgba(232,228,210,0.08) !important; }

/* ═══════════════════════════════════════════════════
   6. CARDS / PANELS
═══════════════════════════════════════════════════ */
.calc-card,
.progress-container {
  background: rgba(232,228,210,0.05) !important;
  border-color: rgba(232,228,210,0.10) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.4) !important;
}
.warm-card {
  background: rgba(232,228,210,0.04) !important;
  border-color: rgba(232,228,210,0.08) !important;
}
.result-card,
.chart-card,
.u-table-wrap,
.monthly-table-wrap {
  background: rgba(232,228,210,0.04) !important;
  border-color: rgba(232,228,210,0.10) !important;
}

/* ═══════════════════════════════════════════════════
   7. FORM ELEMENTS
═══════════════════════════════════════════════════ */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
  background: rgba(232,228,210,0.06) !important;
  border-color: rgba(232,228,210,0.14) !important;
  color: #e8e4d2 !important;
}
input:focus, select:focus, textarea:focus {
  border-color: rgba(200,184,122,0.45) !important;
  box-shadow: 0 0 0 3px rgba(200,184,122,0.10) !important;
}
input::placeholder, textarea::placeholder {
  color: rgba(232,228,210,0.30) !important;
}
select option {
  background: #0e120a !important;
  color: #e8e4d2 !important;
}
label { color: rgba(232,228,210,0.85); }
.form-label { color: rgba(232,228,210,0.45) !important; }

/* ═══════════════════════════════════════════════════
   8. TABLES
═══════════════════════════════════════════════════ */
table { border-color: rgba(232,228,210,0.10) !important; }
th {
  color: rgba(232,228,210,0.55) !important;
  background: rgba(232,228,210,0.04) !important;
  border-color: rgba(232,228,210,0.08) !important;
}
td {
  color: rgba(232,228,210,0.80) !important;
  border-color: rgba(232,228,210,0.07) !important;
}
tr:nth-child(even) td { background: rgba(232,228,210,0.02) !important; }

/* ═══════════════════════════════════════════════════
   9. BUTTONS
═══════════════════════════════════════════════════ */
.btn-primary,
[class*="btn-primary"] {
  background: #c8b87a !important;
  color: #0b0e07 !important;
  border-color: #c8b87a !important;
}
.btn-primary:hover { background: #b8a86a !important; }
.btn-secondary,
[class*="btn-secondary"] {
  background: rgba(232,228,210,0.07) !important;
  color: rgba(232,228,210,0.80) !important;
  border-color: rgba(232,228,210,0.14) !important;
}
.btn-secondary:hover { background: rgba(232,228,210,0.12) !important; }

/* ═══════════════════════════════════════════════════
   10. MODALS — only explicit selectors, no broad [class*]
═══════════════════════════════════════════════════ */
.moverlay {
  background: rgba(0,0,0,0.85) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
.mbox {
  background: #141810 !important;
  border: 1px solid rgba(232,228,210,0.12) !important;
  color: #e8e4d2 !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6) !important;
}
#upgradeModal {
  background: rgba(0,0,0,0.85) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
.upgrade-modal-box {
  background: #141810 !important;
  border: 1px solid rgba(200,184,122,0.25) !important;
  color: #e8e4d2 !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7) !important;
}
.upgrade-modal-title { color: #e8e4d2 !important; }
.upgrade-modal-title em { color: #c8b87a !important; }
.upgrade-modal-desc { color: rgba(232,228,210,0.58) !important; }
.upgrade-feat {
  background: rgba(232,228,210,0.05) !important;
  border-color: rgba(232,228,210,0.10) !important;
  color: rgba(232,228,210,0.65) !important;
}
.upgrade-modal-close {
  background: rgba(232,228,210,0.06) !important;
  border-color: rgba(232,228,210,0.12) !important;
  color: rgba(232,228,210,0.45) !important;
}
.upg-price-card {
  background: rgba(232,228,210,0.04) !important;
  border-color: rgba(232,228,210,0.10) !important;
}
.upg-price-card:hover,
.upg-price-card.active {
  background: rgba(200,184,122,0.08) !important;
  border-color: rgba(200,184,122,0.40) !important;
}
.upg-price-amount { color: #e8e4d2 !important; }
.upg-price-label,
.upg-price-period { color: rgba(232,228,210,0.40) !important; }
.upgrade-btn-primary {
  background: #c8b87a !important;
  color: #0b0e07 !important;
}

/* ═══════════════════════════════════════════════════
   11. SIDEBAR / ADMIN
═══════════════════════════════════════════════════ */
.sidebar,
.side-nav {
  background: rgba(11,14,7,0.98) !important;
  border-color: rgba(232,228,210,0.08) !important;
}

/* ═══════════════════════════════════════════════════
   12. PAGE LOADER
═══════════════════════════════════════════════════ */
#page-loader {
  background: #0b0e07 !important;
}

/* ═══════════════════════════════════════════════════
   13. SCROLLBAR
═══════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; background: #0b0e07; }
::-webkit-scrollbar-thumb {
  background: rgba(200,184,122,0.20);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(200,184,122,0.35); }