/**
 * karnata-theme.css  v3
 * "Karnataka Morning Paper" — warm cream × Karnataka red × Anek Kannada
 * Applied to all tool pages via <link> injection.
 */

/* ── Variables ─────────────────────────────────────────── */
:root {
  --cream:     #FAFAF7;
  --cream2:    #F3F2ED;
  --cream3:    #EAE9E2;
  --red:       #C0392B;
  --red2:      #A93226;
  --red-lt:    #FDECEA;
  --forest:    #1A3A2A;
  --forest-lt: #E8F0EB;
  --amber:     #D4830A;
  --amber-lt:  #FEF6E7;
  --blue:      #1A4F7A;
  --blue-lt:   #E8F1F8;
  --ink:       #1C1209;
  --ink2:      #4A3828;
  --ink3:      #8A7565;
  --ink4:      #BAA898;
  --border:    #E0DAD0;
  --border2:   #CEC6B8;
  --shadow-sm: 0 1px 4px rgba(28,18,9,0.08);
  --shadow:    0 2px 12px rgba(28,18,9,0.10);
  --shadow-lg: 0 6px 28px rgba(28,18,9,0.13);
  --font:      'Anek Kannada', sans-serif;
  --r:         10px;
  --r-lg:      16px;
  /* Backwards compat aliases */
  --white:     #ffffff;
  --bg:        var(--cream);
  --surface:   #ffffff;
  --surface2:  var(--cream2);
}

/* ── Base ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font) !important;
  background: var(--cream) !important;
  color: var(--ink) !important;
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--cream2); }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

/* ── Top nav — applied to tool pages ──────────────────── */
.topnav {
  background: #fff !important;
  border-bottom: 3px solid var(--red) !important;
  box-shadow: none !important;
}

/* Back button */
.back-btn {
  background: var(--red-lt) !important;
  border: 1.5px solid rgba(192,57,43,0.2) !important;
  color: var(--red) !important;
  border-radius: 20px !important;
  font-weight: 700 !important;
}
.back-btn:hover {
  background: var(--red) !important;
  color: #fff !important;
}

/* ── Hero/page header ──────────────────────────────────── */
.hero {
  background: linear-gradient(135deg, var(--cream2) 0%, #fff 100%) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--ink) !important;
}
.hero h1, .hero h2 { color: var(--ink) !important; }
.hero p { color: var(--ink2) !important; }

/* Override any dark hero backgrounds */
.hero[style*="background:linear-gradient(135deg,#C0392B"],
.hero[style*="background:linear-gradient(135deg,#1A5276"],
.hero[style*="background:linear-gradient(135deg,#1B7A4B"],
.hero[style*="background:linear-gradient(135deg,#1A1"] {
  background: linear-gradient(135deg, var(--red) 0%, var(--red2) 100%) !important;
  color: #fff !important;
}
.hero[style*="background:linear-gradient(135deg,#C0392B"] h1,
.hero[style*="background:linear-gradient(135deg,#C0392B"] p { color: #fff !important; }

/* ── Cards / surfaces ──────────────────────────────────── */
.card, .input-card, .result-card-outer,
.forecast-card, .sidebar-card, .info-card,
.popular-card, .links-card, .checker-card,
.phrases-card, .translit-card, .how-card,
.legend-card, .monsoon-card, .editor-card,
.more-card, [class*="-card"]:not(.dam-chip):not(.news-card):not(.live-card) {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow-sm) !important;
  color: var(--ink) !important;
}

.card-head, .cc-head, .section-header {
  background: var(--cream2) !important;
  border-color: var(--border) !important;
  color: var(--ink) !important;
}

/* ── Inputs & selects ──────────────────────────────────── */
input[type="text"], input[type="number"],
textarea, select,
.check-input, .field-input, .field-select,
.civic-input, .editor-area textarea {
  background: var(--cream2) !important;
  border: 1.5px solid var(--border) !important;
  color: var(--ink) !important;
  font-family: var(--font) !important;
  border-radius: 8px !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--red) !important;
  background: #fff !important;
  outline: none !important;
}
input::placeholder, textarea::placeholder { color: var(--ink4) !important; }

/* ── Primary buttons ──────────────────────────────────── */
.calc-btn, .check-btn, .civic-btn,
.tb-btn.primary, .gm-allow, .nb-allow,
button[class*="primary"], button[class*="allow"] {
  background: var(--red) !important;
  color: #fff !important;
  font-family: var(--font) !important;
  font-weight: 800 !important;
  border: none !important;
  border-radius: 8px !important;
}
.calc-btn:hover, .check-btn:hover { background: var(--red2) !important; }

/* Secondary buttons */
.tb-btn, .key, .phrase-btn, .sug-btn,
.dn-btn, .pop-item, .link-item {
  background: var(--cream2) !important;
  border: 1px solid var(--border) !important;
  color: var(--ink2) !important;
  font-family: var(--font) !important;
  border-radius: 8px !important;
}
.tb-btn:hover, .key:hover, .phrase-btn:hover,
.sug-btn:hover, .dn-btn:hover {
  background: var(--red-lt) !important;
  border-color: rgba(192,57,43,0.3) !important;
  color: var(--red) !important;
}

/* ── Keyboard (typing tool) ───────────────────────────── */
.key {
  background: var(--cream2) !important;
  border: 1px solid var(--border) !important;
  color: var(--ink) !important;
  border-radius: 6px !important;
}
.key:hover, .key:active {
  background: var(--red) !important;
  color: #fff !important;
  border-color: var(--red) !important;
}
.key.special {
  background: var(--blue-lt) !important;
  color: var(--blue) !important;
}

/* ── Tables ────────────────────────────────────────────── */
table { border-collapse: collapse; width: 100%; }
th {
  background: var(--cream2) !important;
  color: var(--ink2) !important;
  border-bottom: 2px solid var(--red) !important;
  font-weight: 700 !important;
}
td {
  color: var(--ink) !important;
  border-bottom: 1px solid var(--border) !important;
}
tr:hover td { background: var(--cream2) !important; }
tr.active-slab td {
  background: var(--red-lt) !important;
  color: var(--red) !important;
  font-weight: 700 !important;
}

/* ── Text colours ──────────────────────────────────────── */
.ir-label, .rb-label, .ic-label, .dc-label,
.lc-label, .stat-label, .cds-label, .field-label,
.pane-label, .officer-role, .sum-label,
.ws-label, .ln-source, .footer-col-title,
.cc-dept, .sb-dept, .dc-tag {
  color: var(--ink4) !important;
}

.ir-value, .ic-val, .rb-value,
.officer-name, .ln-title, .mla-name,
.dc-name-kn, .dw-name, .nc-title, .li-title {
  color: var(--ink) !important;
}

/* Gold / price values */
.rate-value, .lc-val, .dc-pct,
.ar-price, .pr-p, .wb-temp {
  color: var(--red) !important;
  font-variant-numeric: tabular-nums;
}

/* Change indicators */
.rate-change.up, .lc-change.up, .ar-ch.up { color: #16A34A !important; }
.rate-change.dn, .lc-change.dn, .ar-ch.dn { color: var(--red) !important; }
.rate-change.nc, .lc-change.nc              { color: var(--ink4) !important; }

/* ── Tags / eyebrows ───────────────────────────────────── */
.nc-tag, .nc-eyebrow { border-radius: 4px !important; font-weight: 800 !important; }
.tag-water, .ey-blue   { background: var(--blue-lt) !important;   color: var(--blue) !important; }
.tag-gold, .ey-amber   { background: var(--amber-lt) !important;  color: var(--amber) !important; }
.tag-rain              { background: var(--blue-lt) !important;   color: var(--blue) !important; }
.tag-fact, .ey-forest  { background: var(--forest-lt) !important; color: var(--forest) !important; }
.ey-red                { background: var(--red-lt) !important;    color: var(--red) !important; }

/* Status badges */
.badge.gg, .status-full { background: var(--forest-lt) !important; color: var(--forest) !important; }
.badge.yw               { background: var(--amber-lt) !important;  color: var(--amber) !important; }
.badge.rd               { background: var(--red-lt) !important;    color: var(--red) !important; }

/* ── Progress bars ─────────────────────────────────────── */
.prog-bg, .dc-bar-bg, .mc-progress { background: var(--cream3) !important; }

/* ── Tabs ──────────────────────────────────────────────── */
.regime-tabs, .mode-tabs, .city-tabs {
  background: var(--cream2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 9px !important;
  overflow: hidden !important;
}
.regime-tab, .mode-tab, .city-tab {
  color: var(--ink2) !important;
  background: transparent !important;
  font-family: var(--font) !important;
}
.regime-tab.active, .mode-tab.active,
.regime-tab:hover,  .mode-tab:hover {
  background: var(--red) !important;
  color: #fff !important;
}

/* ── Section headers (sh pattern) ─────────────────────── */
.sh {
  border-bottom: 2px solid var(--red) !important;
  padding-bottom: 8px !important;
  margin-bottom: 14px !important;
}
.sh-title { color: var(--ink) !important; }
.sh-icon  { background: var(--red) !important; color: #fff !important; }
.sh-link, .sec-link { color: var(--red) !important; }

/* ── Alert strip ───────────────────────────────────────── */
.alert-strip {
  background: linear-gradient(90deg, var(--red), var(--red2)) !important;
  color: #fff !important;
  border: none !important;
}
.alert-strip.info {
  background: linear-gradient(90deg, var(--blue), #1558A0) !important;
}

/* Info banners */
.info-banner {
  background: var(--blue-lt) !important;
  border: 1px solid rgba(26,79,122,0.2) !important;
  color: var(--blue) !important;
}

/* Result boxes */
.result-box.success { background: var(--forest-lt) !important; border-color: rgba(26,58,42,0.2) !important; }
.result-box.pending { background: var(--amber-lt) !important;  border-color: rgba(212,131,10,0.2) !important; }
.result-box.notfound { background: var(--red-lt) !important;   border-color: rgba(192,57,43,0.2) !important; }

.rb-row { background: rgba(0,0,0,0.02) !important; }
.rb-action { background: var(--cream2) !important; border-color: var(--border) !important; color: var(--ink2) !important; }
.rb-action.primary { background: var(--red) !important; color: #fff !important; border: none !important; }

/* ── District page cards ───────────────────────────────── */
.dw-card {
  background: #fff !important;
  border: 1px solid var(--border) !important;
}
.dw-card:hover { border-color: var(--red) !important; box-shadow: var(--shadow) !important; }
.dw-card.alert-red    { border-left: 4px solid var(--red) !important; }
.dw-card.alert-orange { border-left: 4px solid var(--amber) !important; }
.dw-temp  { color: var(--ink) !important; }
.dw-desc  { color: var(--ink2) !important; }
.dw-stats { color: var(--ink4) !important; }

/* ── AQI ───────────────────────────────────────────────── */
.aqi-item { background: #fff !important; border-color: var(--border) !important; }
.aqi-city { color: var(--ink4) !important; }

/* ── Links ─────────────────────────────────────────────── */
a { color: inherit; }
.officer-phone, .footer-link { color: var(--red) !important; }
.footer-link:hover { color: var(--red2) !important; }

/* ── Footer ────────────────────────────────────────────── */
footer, .footer {
  background: var(--ink) !important;
  color: rgba(255,255,255,0.65) !important;
}
.footer-brand-name, .footer-brand { color: #fff !important; }
.footer-col-title { color: rgba(255,255,255,0.4) !important; }
.footer-link { color: rgba(255,255,255,0.65) !important; }
.footer-copy, .footer-source, .footer-bottom { color: rgba(255,255,255,0.35) !important; }

/* ── Mobile bottom nav ─────────────────────────────────── */
.mobile-nav, #nk-mobile-nav {
  background: #fff !important;
  border-top: 1px solid var(--border) !important;
  box-shadow: 0 -4px 20px rgba(28,18,9,0.08) !important;
}
.mn-label, .nk-mn-label { color: var(--ink4) !important; }
.mn-btn.active .mn-label { color: var(--red) !important; }

/* ── Nav component (injected by nav-component.js) ─────── */
.nk-topnav {
  background: #fff !important;
  border-bottom: 3px solid var(--red) !important;
  backdrop-filter: none !important;
}

/* ── Wrap ──────────────────────────────────────────────── */
.wrap { max-width: 960px; margin: 0 auto; padding: 20px; }

/* ── Notifications ─────────────────────────────────────── */
.notif-banner, #notif-banner {
  background: #fff !important;
  border: 1.5px solid var(--border) !important;
  border-top: 4px solid var(--red) !important;
  box-shadow: var(--shadow-lg) !important;
}
.nb-title { color: var(--ink) !important; }
.nb-body  { color: var(--ink2) !important; }

/* Toast */
.toast {
  background: var(--ink) !important;
  color: #fff !important;
}
.toast-title { color: #fff !important; }
.toast-body  { color: rgba(255,255,255,0.75) !important; }