/* ============================================================================
   theme.css — Global Dark / Night Mode (SOC — Smart Option Chain)
   ----------------------------------------------------------------------------
   Approach: jab <html data-theme="dark"> ho, poore page par invert+hue-rotate
   laga dete hain — light background dark ho jaata hai, dark text light ho
   jaata hai, aur colors (red/green/yellow etc.) roughly apni hue par hi
   rehte hain. Ye technique har existing page (jitne bhi hard-coded rangeen
   inline styles hon) par bina un sabko haath lagaye kaam karti hai.

   Jo cheezein waisi ki waisi rakhni hain (dobara invert laga ke undo kar
   dete hain — double invert = original):
     - Images / icons / video / canvas ka apna asli rang.
     - index.html aur backtest.html ka RESISTANCE/SUPPORT header (.header-2,
       .call-header, .put-header) aur column sub-header (.sub-header-3) —
       jaisa the waise hi rahenge, theme se koi farak nahi padega.
   ============================================================================ */

html[data-theme="dark"] {
    filter: invert(1) hue-rotate(180deg);
    background: #ffffff;
}

/* Media ka apna original rang wapas (double invert = no change) */
html[data-theme="dark"] img,
html[data-theme="dark"] svg,
html[data-theme="dark"] video,
html[data-theme="dark"] iframe,
html[data-theme="dark"] canvas {
    filter: invert(1) hue-rotate(180deg);
}

/* ── EXEMPT: index.html / backtest.html ke RESISTANCE-SUPPORT header aur
   column sub-header — inke colors theme se untouched rahenge ── */
html[data-theme="dark"] .header-2,
html[data-theme="dark"] .call-header,
html[data-theme="dark"] .put-header,
html[data-theme="dark"] .sub-header-3 {
    filter: invert(1) hue-rotate(180deg);
}