/* =============================================================
   InHandCalc — dark mode stylesheet
   Linked from every page. Overrides CSS variables for dark theme.
   ============================================================= */

/* ---- Noir header (always dark, both light + dark mode) ---- */
header{background:#111827!important;border-bottom-color:#1f2937!important}
.brand{color:#fff!important}
nav a{color:rgba(255,255,255,.7)!important}
nav a:hover{color:#fff!important;background:rgba(255,255,255,.1)!important}
nav a.active{color:#6ee7b7!important;background:rgba(16,185,129,.15)!important}
.nav-drop>button{color:rgba(255,255,255,.7)!important}
.nav-drop>button:hover{color:#fff!important;background:rgba(255,255,255,.1)!important}
.nav-drop.active-drop>button{color:#6ee7b7!important;background:rgba(16,185,129,.15)!important}
.ham-btn{color:rgba(255,255,255,.7)!important}
.ham-btn:hover{background:rgba(255,255,255,.1)!important}
.theme-btn{color:rgba(255,255,255,.7)!important}
.theme-btn:hover{background:rgba(255,255,255,.1)!important}
.mob-menu{background:#1f2937!important;border-top-color:#374151!important}
.mob-menu a{color:#f3f4f6!important;border-bottom-color:#374151!important}
.mob-menu a:hover{color:#34d399!important}
.mob-section{color:#6b7280!important}
/* Drop menu stays light (floats below dark header) */
.drop-menu{background:#fff!important;border-color:#e5e7eb!important}
.drop-menu a{color:#1a1f24!important}
.drop-menu a:hover{background:#f9fafb!important}

/* ---- Dark mode toggle button ---- */
.theme-btn{border:0;cursor:pointer;padding:5px 7px;border-radius:7px;font-size:17px;line-height:1;transition:.15s;margin-right:2px}

/* ---- Dark theme variable overrides ---- */
/* html[data-theme="dark"] beats :root in specificity, ensuring variables always override */
html[data-theme="dark"]{
  --ink:#dce8f0;
  --muted:#7a95a5;
  --hint:#526570;
  --line:#1c2d38;
  --line2:#263a48;
  --paper:#111f2b;
  --canvas:#0b1820;
  --surface:#172532;
  --accent:#34d399;
  --accent-soft:#022c22;
  --accent-ink:#6ee7b7;
  --warn-soft:#231608;
  --warn-ink:#f0b45a;
}
html[data-theme="dark"] body{color-scheme:dark}

/* Inputs */
html[data-theme="dark"] input[type=text],
html[data-theme="dark"] input[type=number],
html[data-theme="dark"] select{
  background:var(--paper);
  color:var(--ink);
  border-color:var(--line2);
}
html[data-theme="dark"] input[type=range]{accent-color:var(--accent)}

/* Calculator-specific */
html[data-theme="dark"] .result-top{background:#064e3b}
html[data-theme="dark"] .toggle button.on{background:var(--surface)}

/* Waterfall (index.html) */
html[data-theme="dark"] .wf-ded .wf-amt{color:#f08080}
html[data-theme="dark"] .wf-tax .wf-amt{color:#f0b45a}

/* Tooltip (index.html) */
html[data-theme="dark"] .tip-box{background:var(--surface);color:var(--ink);border:1px solid var(--line2)}

/* ---- Hardcoded text color overrides (color:#374046 → readable in dark) ---- */
html[data-theme="dark"] .content p,
html[data-theme="dark"] .content ul,
html[data-theme="dark"] .content ol,
html[data-theme="dark"] .article p,
html[data-theme="dark"] .article ul,
html[data-theme="dark"] .article ol,
html[data-theme="dark"] .page p,
html[data-theme="dark"] .page ul,
html[data-theme="dark"] .faq .ans,
html[data-theme="dark"] .step-body p,
html[data-theme="dark"] .checklist li,
html[data-theme="dark"] .compare-card ul{color:var(--ink)}

/* Hardcoded dark green / dark gray column colors */
html[data-theme="dark"] .new-col{color:var(--accent-ink)}
html[data-theme="dark"] .old-col{color:var(--muted)}

/* Hardcoded dark backgrounds used inline */
html[data-theme="dark"] .related-links a:hover{background:var(--accent-soft)}

/* Guide article links and tables */
html[data-theme="dark"] .article a{color:var(--accent-ink)}
html[data-theme="dark"] .content a{color:var(--accent-ink)}
html[data-theme="dark"] .faq details{border-color:var(--line)}
html[data-theme="dark"] .faq summary{color:var(--ink)}
html[data-theme="dark"] .tbl th{background:var(--surface)}
html[data-theme="dark"] .tbl th,
html[data-theme="dark"] .tbl td{border-color:var(--line)}
html[data-theme="dark"] .highlight-row td{background:var(--accent-soft);color:var(--accent-ink)}
html[data-theme="dark"] .warn-row td{background:var(--warn-soft);color:var(--warn-ink)}
html[data-theme="dark"] .total-row td{background:var(--surface)}
html[data-theme="dark"] .callout{background:var(--accent-soft);color:var(--accent-ink)}
html[data-theme="dark"] .warn-callout{background:var(--warn-soft);color:var(--warn-ink)}

/* Income tax calculator */
html[data-theme="dark"] .breakdown td{border-color:var(--line)}
html[data-theme="dark"] .breakdown .total-row td{border-color:var(--line2)}
html[data-theme="dark"] .regime-card{border-color:var(--line2);background:var(--paper)}
html[data-theme="dark"] .regime-card.winner{border-color:var(--accent);background:var(--accent-soft)}
html[data-theme="dark"] .regime-card .tax-total{color:var(--ink)}
html[data-theme="dark"] .savings-banner{background:var(--accent-soft);border-color:var(--accent)}
html[data-theme="dark"] .equal-banner{background:var(--surface);border-color:var(--line2)}
html[data-theme="dark"] .reg-btn{background:var(--paper);border-color:var(--line2);color:var(--muted)}
html[data-theme="dark"] .reg-btn.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}

/* Job offer / salary hike pages */
html[data-theme="dark"] .offer-panel{background:var(--paper);border-color:var(--line)}
html[data-theme="dark"] .result-card{background:var(--paper);border-color:var(--line)}
html[data-theme="dark"] .winner-badge{background:var(--accent-soft);color:var(--accent-ink)}

/* SIP / EPF / Gratuity result panels */
html[data-theme="dark"] .res-box{background:var(--paper);border-color:var(--line)}
html[data-theme="dark"] .res-big{color:var(--ink)}

/* Drop menu in dark */
html[data-theme="dark"] .drop-menu{background:var(--paper);border-color:var(--line)}
html[data-theme="dark"] .drop-menu a{color:var(--ink)}
html[data-theme="dark"] .drop-menu a:hover{background:var(--surface)}