/* ════════════════════════════════════════════════════════════════
   TICKERTRADE — MASTER STYLESHEET
   tickertrade.css

   Sections:
     1.  Reset & Base
     2.  Design Tokens (all 6 themes)
     3.  Ticker Tape
     4.  Top Nav Bar
     5.  Nav Dropdowns
     6.  Right Cluster (Indices · Metals · Clock · Themes · User)
     7.  Sub-Nav
     8.  Layout & Page Offset
     9.  Panel Grid
    10.  Panel Cards
    11.  Data Tables
    12.  Badges & Inline Elements
    13.  Range Bar (52W)
    14.  Commodities Strip
    15.  Footer
    16.  Animations & Keyframes
    17.  Legacy Compatibility
    18.  Utility
    19.  Auto-Refresh Module
    20.  FNO Search
    21.  Bootstrap Column Overrides
    22.  Filterable Table Headers
    23.  Bootstrap Grid Resets
    24.  Value-Based Colour Utilities
    25.  BG-One Colour Utilities
    26.  Frozen Symbol Column
    27.  Legacy .up / .dn Aliases
    28.  High-Specificity td Overrides
    29.  Screener Page
    30.  Floating Popup
    31.  Broker API Page
    32.  Tool Cluster
    33.  jQuery UI Datepicker
    34.  Topbar (leftnav layout)
    35.  Theme Switcher
    36.  User Pill
    37.  Sidebar
    38.  Modal (Bootstrap + native dialog)
    39.  Topbar Additions
    40.  Embed / iFrame
    41.  Light Theme Overrides
    42.  Border Fix
    43.  Form Elements (inputs, selects, buttons, labels)
    44.  Generic Form Modal
════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════
   1. RESET & BASE
════════════════════════════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
  font-family: var(--font-mono);
}

/* Restore icon fonts */
i,
[class^="bi-"], [class*=" bi-"],
[class^="fa"],  [class*=" fa"],
[class^="glyphicon"], [class*=" glyphicon"],
.bi, .fa, .fas, .far, .fal, .fab, .fad,
.material-icons,
*::before, *::after { font-family: inherit !important; }

i[class^="bi-"], i[class*=" bi-"]           { font-family: "bootstrap-icons" !important; }
i[class^="fa"],  i[class*=" fa"],
i.fa, i.fas, i.far, i.fal, i.fab            { font-family: "FontAwesome" !important; }
i[class^="glyphicon"], i[class*=" glyphicon"]{ font-family: "Glyphicons Halflings" !important; }

body {
  font-family: var(--font-main);
  font-size: 13px;
  background: var(--bg);
  color: var(--text);
  transition: background .3s, color .3s;
  padding: 0;
  margin: 0;
}

a { text-decoration: none; color: var(--accent2); }

::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: var(--bg3); border-radius: 3px; }
::-webkit-scrollbar-thumb  { background: var(--accent); border-radius: 3px; opacity: .7; }
::-webkit-scrollbar-thumb:hover { background: var(--accent2); }
::-webkit-scrollbar-corner { background: var(--bg3); }
/* Firefox */
* { scrollbar-width: thin; scrollbar-color: var(--accent) var(--bg3); }


/* ════════════════════════════════════════════════════════════════
   2. DESIGN TOKENS — ALL 6 THEMES
════════════════════════════════════════════════════════════════ */
:root,
[data-theme="dark"] {
  --bg:        #0a0c10;
  --bg2:       #0f1117;
  --bg3:       #161b26;
  --bg4:       #1c2333;
  --border:    #22304a;
  --text:      #e2e8f7;
  --text2:     #b8c8e8;   /* was #8899bb — brighter */
  --text3:     #7a90b8;   /* was #4a5f80 — readable */
  --accent:    #00d4aa;
  --accent2:   #0099ff;
  --gain:      #00e676;
  --gain-bg:   rgba(0, 230, 118, .08);
  --loss:      #ff4d6a;
  --loss-bg:   rgba(255, 77, 106, .08);
  --gold:      #ffd166;
  --shadow:    0 4px 32px rgba(0,0,0,.55);
  --glow-gain: 0 0 12px rgba(0, 230, 118, .25);
  --glow-loss: 0 0 12px rgba(255, 77, 106, .25);
  --font-main: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --tn-h:      44px;
  --tn-tape:   26px;
  --header-h:  50px;
  --nav-h:     36px;
}

[data-theme="light"] {
  --bg:        #ffffff;
  --bg2:       #f7f7f7;
  --bg3:       #eeeeee;
  --bg4:       #e2e2e2;
  --border:    #d0d0d0;
  --text:      #111111;
  --text2:     #333333;   /* was #444444 — slightly darker for contrast */
  --text3:     #666666;   /* was #888888 — more readable */
  --accent:    #111111;
  --accent2:   #333333;
  --gain:      #008a3c;
  --gain-bg:   rgba(0,138,60,.08);
  --loss:      #cc0022;
  --loss-bg:   rgba(204,0,34,.08);
  --gold:      #996600;
  --shadow:    0 4px 24px rgba(0,0,0,.10);
  --glow-gain: none;
  --glow-loss: none;
  --font-main: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  color-scheme: light;
}

[data-theme="blue"] {
  --bg:        #020b1a;
  --bg2:       #041225;
  --bg3:       #061a33;
  --bg4:       #0a2040;
  --border:    #0d3060;
  --text:      #c8e0ff;
  --text2:     #90b8ee;   /* was #6090cc */
  --text3:     #507098;   /* was #304870 */
  --accent:    #4db8ff;
  --accent2:   #00aaff;
  --gain:      #00ffcc;
  --gain-bg:   rgba(0,255,204,.08);
  --loss:      #ff6688;
  --loss-bg:   rgba(255,102,136,.08);
  --gold:      #ffe066;
  --shadow:    0 4px 40px rgba(0,80,200,.3);
  --glow-gain: 0 0 16px rgba(0,255,204,.3);
  --glow-loss: 0 0 16px rgba(255,102,136,.3);
  --font-main: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

[data-theme="gray"] {
  --bg:        #13141a;
  --bg2:       #1a1c24;
  --bg3:       #22242e;
  --bg4:       #2a2d38;
  --border:    #363848;
  --text:      #d8dae8;
  --text2:     #a8b0d0;   /* was #7880a0 */
  --text3:     #6870a0;   /* was #454860 */
  --accent:    #9b8aff;
  --accent2:   #7b6adf;
  --gain:      #64ffa0;
  --gain-bg:   rgba(100,255,160,.08);
  --loss:      #ff6b8a;
  --loss-bg:   rgba(255,107,138,.08);
  --gold:      #f7c948;
  --shadow:    0 4px 32px rgba(0,0,0,.6);
  --glow-gain: 0 0 12px rgba(100,255,160,.2);
  --glow-loss: 0 0 12px rgba(255,107,138,.2);
  --font-main: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

[data-theme="green"] {
  --bg:        #030d0a;
  --bg2:       #061510;
  --bg3:       #0a1f18;
  --bg4:       #0e2820;
  --border:    #143d2e;
  --text:      #b8f0d8;
  --text2:     #7ab8a0;   /* was #4a9070 */
  --text3:     #4a7860;   /* was #2a5040 */
  --accent:    #00ffaa;
  --accent2:   #00cc88;
  --gain:      #39ff88;
  --gain-bg:   rgba(57,255,136,.08);
  --loss:      #ff4466;
  --loss-bg:   rgba(255,68,102,.08);
  --gold:      #f4d03f;
  --shadow:    0 4px 40px rgba(0,80,40,.4);
  --glow-gain: 0 0 16px rgba(57,255,136,.35);
  --glow-loss: 0 0 14px rgba(255,68,102,.3);
  --font-main: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

[data-theme="amber"] {
  --bg:        #100a00;
  --bg2:       #1a1000;
  --bg3:       #241800;
  --bg4:       #2e2000;
  --border:    #4a3400;
  --text:      #ffe8b0;
  --text2:     #cca858;   /* was #aa8030 */
  --text3:     #907040;   /* was #6a5020 */
  --accent:    #ffb800;
  --accent2:   #ff8c00;
  --gain:      #80ff44;
  --gain-bg:   rgba(128,255,68,.08);
  --loss:      #ff4444;
  --loss-bg:   rgba(255,68,68,.08);
  --gold:      #ffdd00;
  --shadow:    0 4px 40px rgba(80,40,0,.5);
  --glow-gain: 0 0 14px rgba(128,255,68,.3);
  --glow-loss: 0 0 14px rgba(255,68,68,.3);
  --font-main: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* ════════════════════════════════════════════════════════════════
   3. TICKER TRADE
════════════════════════════════════════════════════════════════ */

#tt-trade-bar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--tn-tape);
  background: var(--bg3); border-bottom: 1px solid var(--border);
  overflow: hidden; z-index: 1100; display: flex; align-items: center;
}
#tt-trade-bar::before,
#tt-trade-bar::after {
  content: ''; position: absolute; top: 0; bottom: 0;
  width: 80px; z-index: 2; pointer-events: none;
}
#tt-trade-bar::before { left: 0;  background: linear-gradient(to right, var(--bg3), transparent); }
#tt-trade-bar::after  { right: 0; background: linear-gradient(to left,  var(--bg3), transparent); }

#tt-trade-inner { display: flex; white-space: nowrap; animation: tt-scroll 40s linear infinite; }

.tt-tick {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0 14px; border-right: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 10.5px; color: var(--text3);
}
.tt-tick .tn { color: var(--text);  font-weight: 600; }
.tt-tick .tv { color: var(--text2); }
.tt-tick .up { color: var(--gain);  }
.tt-tick .dn { color: var(--loss);  }


/* ════════════════════════════════════════════════════════════════
   4. TOP NAV BAR
════════════════════════════════════════════════════════════════ */

#tt-topnav {
  position: fixed; top: var(--tn-tape); left: 0; right: 0;
  height: var(--tn-h);
  background: var(--bg2); border-bottom: 2px solid var(--border);
  display: flex; align-items: stretch;
  z-index: 1000; box-shadow: 0 2px 20px rgba(0,0,0,.4);
  font-family: var(--font-mono);
}

.tn-logo {
  display: flex; align-items: center; gap: 8px;
  padding: 0 16px; border-right: 1px solid var(--border);
  text-decoration: none; flex-shrink: 0; transition: background .15s;
}
.tn-logo:hover { background: var(--bg3); }

.tn-logo-mark {
  width: 26px; height: 26px; border-radius: 5px;
  background: var(--accent); color: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 900;
  box-shadow: 0 0 12px rgba(0,212,170,.3);
}
.tn-logo-text    { font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: -.3px; }
.tn-logo-text em { color: var(--text3); font-style: normal; font-weight: 400; }

.tn-items { display: flex; align-items: stretch; flex: 1; overflow: hidden; }

.tn-item {
  position: relative; display: flex; align-items: center; gap: 6px;
  padding: 0 13px; font-size: 11.5px; font-weight: 600; letter-spacing: .3px;
  color: var(--text2); cursor: pointer; white-space: nowrap;
  border-right: 1px solid var(--border); text-decoration: none;
  transition: color .15s, background .15s;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.tn-item:hover        { color: var(--text); background: var(--bg3); }
.tn-item.active       { color: var(--accent); border-bottom-color: var(--accent); background: rgba(0,212,170,.04); }
.tn-item i            { font-size: 12px; color: var(--text3); transition: color .15s; flex-shrink: 0; }
.tn-item:hover i,
.tn-item.active i     { color: var(--accent); }

.tn-chevron {
  font-size: 8px; color: var(--text3); margin-left: 1px;
  transition: transform .2s, color .2s;
}
.tn-item:hover .tn-chevron,
.tn-item.open  .tn-chevron { transform: rotate(180deg); color: var(--accent); }

.tn-badge {
  font-size: 8.5px; font-weight: 700;
  background: var(--loss); color: #fff;
  border-radius: 9px; padding: 1px 5px; line-height: 1.3; flex-shrink: 0;
}
.tn-badge.info { background: var(--accent); color: var(--bg); }


/* ════════════════════════════════════════════════════════════════
   5. NAV DROPDOWNS
════════════════════════════════════════════════════════════════ */

.tn-drop {
  display: none; position: absolute; top: calc(100% + 2px); left: 0;
  background: var(--bg2); border: 1px solid var(--border);
  border-top: 2px solid var(--accent); border-radius: 0 0 8px 8px;
  box-shadow: 0 16px 48px rgba(0,0,0,.55);
  min-width: 195px; z-index: 9999; overflow: visible;
  max-height: 320px; overflow-y: auto; overflow-x: visible;
  animation: tn-drop-in .14s ease;
}
.tn-item:hover .tn-drop,
.tn-item.open  .tn-drop { display: block; }

.tn-drop a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 8px; font-size: 11.5px; color: var(--text2);
  text-decoration: none; transition: background .12s, color .12s;
  border-bottom: 1px solid var(--border);
}
.tn-drop a:last-child { border-bottom: none; }
.tn-drop a:hover      { background: var(--bg3); color: var(--text); }

.tn-drop a .drop-badge {
  font-size: 8.5px; font-weight: 700; color: var(--text3);
  font-family: var(--font-mono); background: var(--bg4);
  border: 1px solid var(--border); border-radius: 4px; padding: 0 4px;
}

.tn-drop-sec {
  font-size: 8px; text-transform: uppercase; letter-spacing: 1.4px;
  color: var(--text3); font-weight: 700; padding: 8px 14px 3px;
  border-top: 1px solid var(--border); margin-top: 2px;
}
.tn-drop-sec:first-child { border-top: none; margin-top: 0; }

.tn-drop.wide            { min-width: 380px; }
.tn-drop.wide .tn-drop-grid { display: grid; grid-template-columns: 1fr 1fr; }


/* ════════════════════════════════════════════════════════════════
   6. RIGHT CLUSTER — Indices · Metals · Clock · Themes · User
════════════════════════════════════════════════════════════════ */

.tn-right {
  display: flex; align-items: stretch;
  margin-left: auto; flex-shrink: 0;
  border-left: 1px solid var(--border);
}

.tn-idxbar {
  display: flex; align-items: center; gap: 2px;
  padding: 0 10px; border-right: 1px solid var(--border);
  overflow: hidden; max-width: 460px;
}
#nseindx { display: flex; align-items: center; gap: 3px; }
#nseindx .idx-chip {
  display: flex; flex-direction: column; justify-content: center;
  padding: 2px 9px; border-radius: 5px;
  background: var(--bg3); border: 1px solid var(--border);
  min-width: 84px; cursor: default; transition: border-color .2s;
}
#nseindx .idx-chip:hover { border-color: var(--accent); }
#nseindx .idx-name { font-size: 12.5px; text-transform: uppercase; letter-spacing: 1px; color: var(--text3); font-weight: 600; font-family: var(--font-mono); }
#nseindx .idx-val  { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--text); line-height: 1.2; }
#nseindx .idx-chg  { font-family: var(--font-mono); font-size: 12px; }
#nseindx .idx-chg.up { color: var(--gain); }
#nseindx .idx-chg.dn { color: var(--loss); }

#metals {
  display: flex; align-items: center; gap: 10px;
  padding: 0 12px; border-right: 1px solid var(--border); flex-shrink: 0;
}

.tn-clock {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 0 14px; border-right: 1px solid var(--border); flex-shrink: 0;
}
.tn-clock-val { font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: .5px; line-height: 1; }
.tn-clock-sub { font-family: var(--font-mono); font-size: 8px; color: var(--text3); letter-spacing: .5px; margin-top: 1px; }

.tn-themes {
  display: flex; align-items: center; gap: 4px;
  padding: 0 12px; border-right: 1px solid var(--border); flex-shrink: 0;
}
.tn-tbtn {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer;
  transition: transform .16s, border-color .16s; flex-shrink: 0;
}
.tn-tbtn:hover  { transform: scale(1.3); }
.tn-tbtn.active { border-color: var(--text); }
.tn-tbtn[data-t="dark"]  { background: #0a0c10; box-shadow: inset 0 0 0 1px #3a4560; }
.tn-tbtn[data-t="light"] { background: linear-gradient(135deg, #f0f4fc, #c5d4ec); }
.tn-tbtn[data-t="blue"]  { background: linear-gradient(135deg, #020b1a, #0a2040); box-shadow: inset 0 0 5px #0099ff; }
.tn-tbtn[data-t="gray"]  { background: linear-gradient(135deg, #13141a, #2a2d38); box-shadow: inset 0 0 5px #9b8aff; }
.tn-tbtn[data-t="green"] { background: linear-gradient(135deg, #030d0a, #0e2820); box-shadow: inset 0 0 5px #00ffaa; }
.tn-tbtn[data-t="amber"] { background: linear-gradient(135deg, #100a00, #2e2000); box-shadow: inset 0 0 5px #ffb800; }

.tn-user {
  position: relative; display: flex; align-items: center; height: 100%; z-index: 10000;
}
.tn-user-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 0 14px; height: 100%; cursor: pointer;
  border: none; background: none; color: var(--text2);
  font-family: var(--font-mono); font-size: 11.5px;
  transition: background .15s, color .15s;
}
.tn-user-btn:hover { background: var(--bg3); color: var(--text); }
.tn-user-av {
  width: 24px; height: 24px; border-radius: 5px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: var(--bg); font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.tn-user-drop {
  display: none; position: absolute; top: 100%; right: 0;
  background: var(--bg2); border: 1px solid var(--border);
  border-top: 2px solid var(--accent); border-radius: 0 0 8px 8px;
  box-shadow: 0 16px 48px rgba(0,0,0,.55);
  min-width: 160px; overflow: visible; z-index: 10001;
  animation: tn-drop-in .14s ease;
}
.tn-user:hover .tn-user-drop { display: block; }
.tn-user-drop a {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px; font-size: 12px; color: var(--text2);
  text-decoration: none; transition: background .12s, color .12s;
  border-bottom: 1px solid var(--border); font-family: var(--font-mono);
}
.tn-user-drop a:last-child { border-bottom: none; }
.tn-user-drop a:hover      { background: var(--bg3); color: var(--text); }
/* ── Logout link — danger tint ── */
.tn-user-drop a.tt-logout-link { color: var(--loss); border-top: 1px solid var(--border); }
.tn-user-drop a.tt-logout-link:hover { background: var(--loss-bg); color: var(--loss); }

/* ════════════════════════════════════════════════════════════════
   7. SUB-NAV
════════════════════════════════════════════════════════════════ */

.tt-subnav {
  display: flex; align-items: center;
  background: var(--bg2);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  height: 36px; overflow-x: auto; overflow-y: visible; gap: 0;
  position: relative; width: 100%; z-index: 200;
  -webkit-overflow-scrolling: touch; /* smooth momentum scroll on iOS */
}
.tt-subnav::-webkit-scrollbar { display: none; }

.tt-stab {
  display: flex; align-items: center; gap: 5px;
  padding: 0 13px; height: 100%;
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 600;
  letter-spacing: .4px; text-transform: uppercase; color: var(--text2);
  cursor: pointer; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .15s, border-color .15s, background .15s;
  text-decoration: none;
}
.tt-stab:hover  { color: var(--text); background: var(--bg3); }
.tt-stab.active { color: var(--text); border-bottom-color: var(--accent); background: transparent; }
.tt-stab i { font-size: 11px; }

.tt-subnav .tn-item {
  position: relative; height: 36px;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  border-right: none; font-size: 11px; font-weight: 600;
  letter-spacing: .4px; text-transform: uppercase; padding: 0 3px;
}
.tt-subnav .tn-item:hover { color: var(--text); background: var(--bg3); }

/* ── Subnav inside .tt-panel-hd — dropdown must escape panel boundaries ── */
.tt-panel-hd .tt-subnav        { background: transparent; border: none; height: auto; z-index: 200; }
.tt-panel-hd .tn-item          { position: relative; z-index: 200; }
.tt-panel-hd .tn-drop          { z-index: 9999; position: absolute; top: 100%; left: 0; }

.tt-auto-refresh {
  margin-left: auto; display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px; color: var(--text3); flex-shrink: 0;
}

.tt-live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gain); box-shadow: 0 0 6px var(--gain);
  animation: tt-pulse 2s ease-in-out infinite; flex-shrink: 0;
}
/* ── Market Status Dot (NSE clock sub-label) ── */
.tt-market-dot {
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  vertical-align: middle; margin-right: 3px;
  flex-shrink: 0;
}
.tt-market-dot--live {
  background: var(--gain);
  box-shadow: 0 0 6px var(--gain);
  animation: tt-pulse 2s ease-in-out infinite;
}
.tt-market-dot--closed {
  background: var(--loss);
  box-shadow: 0 0 4px var(--loss);
}

/* ════════════════════════════════════════════════════════════════
   8. LAYOUT & PAGE OFFSET
════════════════════════════════════════════════════════════════ */

#main-content {
  margin-left: 220px;
  padding-top: 86px;
  transition: margin-left .25s ease;
}
#sidebar.collapsed ~ #main-content { margin-left: 54px; }

.tt-footer { margin-left: 0 !important; }

/* ── Main content area — always scrollable, never clips page content ── */
#ot-main-content-area {
  overflow-y: auto;
  overflow-x: hidden;
  min-height: calc(100vh - 126px); /* topbar(50) + mainnav(36) + footer(40) */
  padding-bottom: 48px;
  transition: opacity .15s ease;   /* used by AJAX loader */
}


/* ════════════════════════════════════════════════════════════════
   9. PANEL GRID
════════════════════════════════════════════════════════════════ */

.tt-market-grid,
.tt-di-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; padding: 2px 6px;
}
@media (max-width: 1100px) { .tt-market-grid, .tt-di-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px)  { .tt-market-grid, .tt-di-grid { grid-template-columns: 1fr; } }


/* ════════════════════════════════════════════════════════════════
   10. PANEL CARDS
════════════════════════════════════════════════════════════════ */

.tt-panel, .tt-di-panel {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 8px; overflow: visible;
  transition: box-shadow .2s, border-color .2s;
  position: relative; z-index: 10;   /* ← above z-index:0 scroll containers */
}
.tt-panel:hover, .tt-di-panel:hover {
  border-color: rgba(0,212,170,.3);
  box-shadow: 0 0 0 1px rgba(0,212,170,.08), 0 8px 32px rgba(0,0,0,.4);
}

.tt-panel:nth-child(1), .tt-di-panel:nth-child(1) { animation: tt-fadein .3s ease .04s both; }
.tt-panel:nth-child(2), .tt-di-panel:nth-child(2) { animation: tt-fadein .3s ease .08s both; }
.tt-panel:nth-child(3), .tt-di-panel:nth-child(3) { animation: tt-fadein .3s ease .12s both; }
.tt-panel:nth-child(4), .tt-di-panel:nth-child(4) { animation: tt-fadein .3s ease .16s both; }
.tt-panel:nth-child(5), .tt-di-panel:nth-child(5) { animation: tt-fadein .3s ease .20s both; }
.tt-panel:nth-child(6), .tt-di-panel:nth-child(6) { animation: tt-fadein .3s ease .24s both; }

.tt-panel-hd, .tt-di-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 13px; background: var(--bg3); border-bottom: 1px solid var(--border);
  overflow: visible; position: relative; z-index: 100;
}
.tt-panel-title, .tt-di-title {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 14px;
  font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px;
}
.tt-panel-dot, .tt-di-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

.tt-panel.gain .tt-panel-dot  { background: var(--gain); box-shadow: var(--glow-gain); }
.tt-panel.gain .tt-panel-title { color: var(--gain); }
.tt-panel.loss .tt-panel-dot  { background: var(--loss); box-shadow: var(--glow-loss); }
.tt-panel.loss .tt-panel-title { color: var(--loss); }
.tt-panel.vol  .tt-panel-dot  { background: var(--accent); }
.tt-panel.vol  .tt-panel-title { color: var(--accent); }
.tt-panel.high .tt-panel-dot  { background: var(--gold); }
.tt-panel.high .tt-panel-title { color: var(--gold); }
.tt-panel.low  .tt-panel-dot  { background: var(--text3); }
.tt-panel.low  .tt-panel-title { color: var(--text3); }

.tt-di-panel[data-type="gainer"] .tt-di-dot  { background: var(--gain); box-shadow: var(--glow-gain); }
.tt-di-panel[data-type="gainer"] .tt-di-title { color: var(--gain); }
.tt-di-panel[data-type="loser"]  .tt-di-dot  { background: var(--loss); box-shadow: var(--glow-loss); }
.tt-di-panel[data-type="loser"]  .tt-di-title { color: var(--loss); }
.tt-di-panel[data-type="value"]  .tt-di-dot  { background: var(--accent); }
.tt-di-panel[data-type="value"]  .tt-di-title { color: var(--accent); }
.tt-di-panel[data-type="volume"] .tt-di-dot  { background: var(--accent2); }
.tt-di-panel[data-type="volume"] .tt-di-title { color: var(--accent2); }
.tt-di-panel[data-type="h52"]    .tt-di-dot  { background: var(--gold); }
.tt-di-panel[data-type="h52"]    .tt-di-title { color: var(--gold); }
.tt-di-panel[data-type="l52"]    .tt-di-dot  { background: var(--text3); }
.tt-di-panel[data-type="l52"]    .tt-di-title { color: var(--text3); }

.tt-show-all, .tt-di-showall {
  font-family: var(--font-mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--accent); opacity: .6; cursor: pointer;
  transition: opacity .2s; text-decoration: none;
}
.tt-show-all:hover, .tt-di-showall:hover { opacity: 1; color: var(--accent); }

/*changed from 390 to 550 */
.tt-scroll, .tt-di-scroll { max-height: 550px; overflow-y: auto; overflow-x: auto; position: relative; z-index: 0; }
.tt-scroll::-webkit-scrollbar,
.tt-di-scroll::-webkit-scrollbar       { width: 6px; height: 6px; }
.tt-scroll::-webkit-scrollbar-track,
.tt-di-scroll::-webkit-scrollbar-track { background: var(--bg3); border-radius: 3px; }
.tt-scroll::-webkit-scrollbar-thumb,
.tt-di-scroll::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; }
.tt-scroll::-webkit-scrollbar-thumb:hover,
.tt-di-scroll::-webkit-scrollbar-thumb:hover { background: var(--accent2); }

.tt-empty, .tt-di-empty {
  padding: 28px; text-align: center;
  color: var(--text3); font-family: var(--font-mono); font-size: 11px;
}


/* ════════════════════════════════════════════════════════════════
   11. DATA TABLES
════════════════════════════════════════════════════════════════ */

.tt-tbl, .tt-di-tbl { width: 100%; border-collapse: collapse; table-layout: auto; }

.tt-tbl thead th, .tt-di-tbl thead th {
  position: sticky; top: 0; z-index: 2;
  padding: 8px 12px; font-family: var(--font-mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .7px;
  color: var(--text3); font-weight: 600;
  background: var(--bg3); border-bottom: 1px solid var(--border);
  text-align: left; white-space: nowrap;
}
.tt-tbl thead th.r, .tt-di-tbl thead th.r { text-align: right; }
.tt-tbl tbody td.l, .tt-di-tbl tbody td.l { text-align: left; }

.tt-tbl tbody tr, .tt-di-tbl tbody tr {
  border-bottom: 1px solid var(--border); cursor: default; transition: background .12s;
}
.tt-tbl tbody tr:hover, .tt-di-tbl tbody tr:hover { background: var(--bg3); }
.tt-tbl tbody tr:last-child, .tt-di-tbl tbody tr:last-child { border-bottom: none; }

.tt-tbl td, .tt-di-tbl td {
  padding: 4px 8px; vertical-align: middle; white-space: nowrap;
  font-family: var(--font-mono); font-size: 14.5px; color: var(--text2);
}
.tt-tbl td.r, .tt-di-tbl td.r { text-align: right; }
.tt-di-tbl tbody tr td { padding: 6px 13px !important; }


/* ════════════════════════════════════════════════════════════════
   12. BADGES & INLINE ELEMENTS
════════════════════════════════════════════════════════════════ */

.tt-sym, .tt-sym-cell {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
  color: var(--accent2); cursor: pointer; transition: color .15s;
}
.tt-sym:hover, .tt-sym-cell:hover { color: var(--accent); text-decoration: underline; }

.tt-ltp, .tt-ltp-cell { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--text); text-align: right; }
.tt-chg, .tt-chg-cell { font-family: var(--font-mono); font-size: 14px; font-weight: 600; text-align: right; }
.tt-chg.up,  .tt-chg-cell.up  { color: var(--gain); }
.tt-chg.dn,  .tt-chg-cell.dn  { color: var(--loss); }
.tt-chg.neu, .tt-chg-cell.neu { color: var(--text3); }
.tt-vol, .tt-vol-cell { font-family: var(--font-mono); font-size: 14.5px; color: var(--text2); text-align: right; }

.tt-badge {
  display: inline-flex; align-items: center;
  padding: 2px 4px; border-radius: 4px;
  font-family: var(--font-mono); font-size: 14px; font-weight: 700;
  gap: 2px; white-space: nowrap;
}
.tt-badge.up  { background: var(--gain-bg); color: var(--gain); }
.tt-badge.dn  { background: var(--loss-bg); color: var(--loss); }
.tt-badge.neu { background: var(--bg4);     color: var(--text3); }


/* ════════════════════════════════════════════════════════════════
   13. RANGE BAR (52W)
════════════════════════════════════════════════════════════════ */

.tt-rng, .tt-rng-wrap { display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
.tt-rng { flex-direction: row; align-items: center; }
.tt-rng-track { width: 80px; height: 3px; background: var(--bg4); border-radius: 2px; overflow: hidden; flex-shrink: 0; }
.tt-rng-fill         { height: 100%; border-radius: 2px; }
.tt-rng-fill.up      { background: var(--gain); }
.tt-rng-fill.dn      { background: var(--loss); }
.tt-rng-lbl          { font-family: var(--font-mono); font-size: 12.5px; color: var(--text3); }
.tt-rng-cell         { text-align: left; white-space: nowrap; width: 1%; padding: 4px 8px !important; vertical-align: middle !important; }


/* ════════════════════════════════════════════════════════════════
   14. COMMODITIES STRIP
════════════════════════════════════════════════════════════════ */

.tt-comm-strip {
  display: flex; align-items: center; background: var(--bg2);
  border-bottom: 1px solid var(--border); padding: 0 16px; height: 32px; overflow: hidden;
}
.tt-comm-item {
  display: flex; align-items: center; gap: 7px;
  padding: 0 16px; border-right: 1px solid var(--border); height: 100%;
}
.tt-comm-item:first-child { padding-left: 0; }
.tt-comm-icon { font-size: 12px; }
.tt-comm-name { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: .5px; color: var(--text3); font-weight: 600; }
.tt-comm-val  { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; color: var(--text); }
.tt-comm-chg  { font-family: var(--font-mono); font-size: 10px; }
.tt-comm-chg.up { color: var(--gain); }
.tt-comm-chg.dn { color: var(--loss); }
.tt-mkt-status { font-family: var(--font-mono); font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px; }
.tt-mkt-status.open  { background: var(--gain-bg); color: var(--gain); }
.tt-mkt-status.close { background: var(--loss-bg); color: var(--loss); }
.tt-refresh-info { margin-left: auto; display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 9.5px; color: var(--text3); }


/* ════════════════════════════════════════════════════════════════
   15. FOOTER
════════════════════════════════════════════════════════════════ */

footer.tt-footer {
  background: var(--bg2); border-top: 1px solid var(--border);
  padding: 10px 20px; display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px; color: var(--text3);
}
footer.tt-footer a       { color: var(--text3); transition: color .15s; }
footer.tt-footer a:hover { color: var(--accent); }


/* ════════════════════════════════════════════════════════════════
   16. ANIMATIONS & KEYFRAMES
════════════════════════════════════════════════════════════════ */

@keyframes tt-scroll     { from { transform: translateX(0); }          to { transform: translateX(-50%); } }
@keyframes tn-drop-in    { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
@keyframes tt-fadein     { from { opacity:0; } to { opacity:1; } }
@keyframes tt-pulse      { 0%,100%{ opacity:1; } 50%{ opacity:.3; } }
@keyframes tt-flash-gain { 0%{ background: var(--gain-bg); } 100%{ background: transparent; } }
@keyframes tt-flash-loss { 0%{ background: var(--loss-bg); } 100%{ background: transparent; } }

.tt-di-panel[data-type="gainer"] tbody tr { animation: tt-flash-gain 1.2s ease both; }
.tt-di-panel[data-type="loser"]  tbody tr { animation: tt-flash-loss 1.2s ease both; }
.flash-up { animation: tt-flash-gain 1s ease .2s both; }
.flash-dn { animation: tt-flash-loss 1s ease .2s both; }


/* ════════════════════════════════════════════════════════════════
   17. LEGACY COMPATIBILITY
════════════════════════════════════════════════════════════════ */

#sidebar.nav-collapse,
#sidebar:not(.tt-topnav-sidebar),
.nav-collapse  { display: none !important; }
header.header  { display: none !important; }

#tt-mainnav {
  position: fixed; top: 52px; left: 0; right: 0;
  height: 36px; background: var(--bg3);
  border-top: none !important; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: flex-start;
  padding-left: 10px; z-index: 499;
  overflow-x: auto; overflow-y: visible; white-space: nowrap;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  font-family: Arial, sans-serif;
  text-transform: uppercase;
}
#tt-mainnav::-webkit-scrollbar { display: none; }
#sidebar.tt-collapsed ~ #main-content #tt-mainnav { left: 54px; }

.tt-mn-i {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 0 13px; height: 36px; font-size: 14px; font-weight: 600;
  color: var(--text2); text-decoration: none;
  white-space: nowrap; cursor: pointer; flex-shrink: 0;
  border-bottom: 2px solid transparent;
  transition: color .12s, background .12s, border-color .12s;
}
.tt-mn-i:hover, .tt-mn-i.active { color: var(--text); background: var(--bg4); border-bottom-color: var(--text); }
.tt-mn-arr { font-size: 15px; color: var(--text3); }

.tt-mn-d { position: relative; display: inline-flex; align-items: stretch; height: 36px; flex-shrink: 0; }
@media (hover: hover)    { .tt-mn-d:hover > .tt-mn-m { display: block; } }
.tt-mn-d.tt-open > .tt-mn-m { display: block; }

.tt-mn-m {
  display: none; position: fixed; top: 78px;
  min-width: 170px; max-height: 60vh; overflow-y: auto;
  background: var(--bg2); border: 1px solid var(--border);
  border-top: 2px solid var(--text); border-radius: 0 0 8px 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,.6); z-index: 9999;
  -webkit-overflow-scrolling: touch;
}
.tt-mn-m a {
  display: block; padding: 6px 14px; font-size: 13px;
  font-family: Arial, sans-serif; color: var(--text2); text-decoration: none;
  border-bottom: 1px solid rgba(128,128,128,.08);
  transition: background .1s, color .1s; white-space: nowrap;
}
.tt-mn-m a:last-child { border-bottom: none; }
.tt-mn-m a:hover, .tt-mn-m a:active { background: var(--bg3); color: var(--text); }
.tt-mn-sep { font-size: 9px; text-transform: uppercase; letter-spacing: .8px; color: var(--text3); padding: 6px 14px 2px; border-top: 1px solid var(--border); }

@media (max-width: 768px) {
  #sidebar { display: none !important; }
  #tt-mainnav { left: 0 !important; top: 44px; height: 40px; padding-left: 4px; }
  .tt-topbar  { left: 0 !important; height: 44px; }
  #main-content { margin-left: 0 !important; padding-top: 84px !important; }
  .tt-mn-i { font-size: 13px; padding: 0 10px; height: 40px; }
  .tt-mn-m { top: 84px; max-height: 50vh; }
  .tt-tool-cluster { transform: scale(.9); transform-origin: right top; }
}
@media (max-width: 480px) {
  .tt-topbar-logo-text { display: none; }
  .tt-mn-i { font-size: 12px; padding: 0 8px; }
}


/* ════════════════════════════════════════════════════════════════
   18. UTILITY
════════════════════════════════════════════════════════════════ */

.api {
  height: 6px; width: 6px; background-color: rgb(50,207,39);
  border-radius: 100%; display: inline-block;
  box-shadow: 0 0 6px rgba(50,207,39,.6);
}

.ui-datepicker span { color: var(--text); }

.tt-page-header { display: flex; align-items: center; padding: 8px 16px; background: var(--bg2); border-bottom: 1px solid var(--border); min-height: 40px; }
.tt-page-header-left { display: flex; align-items: center; gap: 6px; }
.tt-nav-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 5px;
  color: var(--text3); font-size: 16px !important;
  transition: color .15s, background .15s; text-decoration: none;
}
.tt-nav-arrow:hover  { color: var(--accent); background: var(--bg3); }
.tt-page-divider     { width: 1px; height: 16px; background: var(--border); margin: 0 6px; flex-shrink: 0; }
.tt-page-title       { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--text2); letter-spacing: .3px; margin: 0; white-space: nowrap; }

#ot-main-content-area {
  margin-left: auto; margin-right: auto;
  padding-left: 10px; padding-right: 10px; padding-bottom: 10px; width: 100%;
}

[class*="col-md-"], [class*="col-sm-"] { font-size: 13px !important; }
.container-fluid { padding-left: 6px !important; padding-right: 6px !important; }


/* ════════════════════════════════════════════════════════════════
   19. AUTO-REFRESH MODULE
════════════════════════════════════════════════════════════════ */

.tt-autorefresh {
  display: flex; align-items: center; gap: 7px;
  margin-left: auto; padding: 0 14px; height: 100%;
  border-left: 1px solid var(--border); flex-shrink: 0;
}
.tt-ar-label { font-family: var(--font-mono); font-size: 10px; font-weight: 500; color: var(--text3); white-space: nowrap; transition: color .2s; }
.tt-ar-label #ar { color: var(--text3); }
#countdown        { color: var(--accent); font-weight: 700; }
.tt-autorefresh.active .tt-ar-label { color: var(--text2); }
.tt-autorefresh.active #tt-ar-dot   { background: var(--gain); box-shadow: 0 0 6px var(--gain); }
.tt-autorefresh.paused #tt-ar-dot   { background: var(--text3); box-shadow: none; animation: none; }

.tt-ar-toggle { position: relative; display: inline-flex; align-items: center; cursor: pointer; flex-shrink: 0; }
.tt-ar-toggle input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.tt-ar-track {
  display: flex; align-items: center; width: 32px; height: 16px; border-radius: 8px;
  background: var(--bg4); border: 1px solid var(--border);
  transition: background .2s, border-color .2s; position: relative;
}
.tt-ar-thumb {
  position: absolute; left: 2px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--text3); transition: transform .2s, background .2s;
}
.tt-ar-toggle input:checked ~ .tt-ar-track              { background: var(--gain-bg); border-color: var(--gain); }
.tt-ar-toggle input:checked ~ .tt-ar-track .tt-ar-thumb { transform: translateX(16px); background: var(--gain); box-shadow: 0 0 6px rgba(0,230,118,.4); }
.tt-ar-toggle:hover .tt-ar-track { border-color: var(--accent); }


/* ════════════════════════════════════════════════════════════════
   20. FNO SEARCH
════════════════════════════════════════════════════════════════ */

.tt-fno-search {
  position: relative; display: flex; flex-direction: column;
  justify-content: center; padding: 0 8px; height: 100%;
  border-left: 1px solid var(--border); flex-shrink: 0;
}
.tt-fno-search-input-wrap {
  display: flex; align-items: center; background: var(--bg3); border: 1px solid var(--border);
  border-radius: 5px; overflow: hidden; transition: border-color .15s, box-shadow .15s; height: 24px;
}
.tt-fno-search-input-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(0,212,170,.12); }
.tt-fno-search-icon  { font-size: 10px; color: var(--text3); padding: 0 7px; flex-shrink: 0; pointer-events: none; }
.tt-fno-search-input { background: transparent; border: none; outline: none; font-family: var(--font-mono); font-size: 11px; color: var(--text); width: 140px; height: 100%; padding: 0; }
.tt-fno-search-input::placeholder { color: var(--text3); font-size: 10px; }
.tt-fno-search-btn {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 100%; background: var(--bg4);
  border: none; border-left: 1px solid var(--border);
  color: var(--text3); font-size: 16px; cursor: pointer;
  transition: background .15s, color .15s; flex-shrink: 0; padding: 0;
}
.tt-fno-search-btn:hover { background: var(--accent); color: var(--bg); }
.tt-fno-search-results {
  display: none; position: absolute; top: calc(100% + 4px); left: 8px;
  min-width: 220px; background: var(--bg2);
  border: 1px solid var(--border); border-top: 2px solid var(--accent);
  border-radius: 0 0 8px 8px; box-shadow: 0 16px 48px rgba(0,0,0,.55);
  z-index: 9999; max-height: 260px; overflow-y: auto; animation: tn-drop-in .14s ease;
}
.tt-fno-search-results::-webkit-scrollbar       { width: 2px; }
.tt-fno-search-results::-webkit-scrollbar-thumb { background: var(--border); }
.tt-fno-search-results a,
.tt-fno-search-results .fno-result-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; font-family: var(--font-mono); font-size: 11.5px;
  color: var(--text2); text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: background .12s, color .12s; cursor: pointer;
}
.tt-fno-search-results a:last-child,
.tt-fno-search-results .fno-result-item:last-child { border-bottom: none; }
.tt-fno-search-results a:hover,
.tt-fno-search-results .fno-result-item:hover { background: var(--bg3); color: var(--accent); }


/* ════════════════════════════════════════════════════════════════
   21. BOOTSTRAP COLUMN CLASS OVERRIDES
════════════════════════════════════════════════════════════════ */

th.col.small, th.col-md.small, th.col-sm.small,
th.col.medium, th.col-md.medium, th.col-sm.medium {
  font-family: var(--font-mono) !important; font-weight: 600 !important;
  text-transform: uppercase !important; color: var(--text3) !important;
  background: var(--bg3) !important; border: none !important;
  border-bottom: 1px solid var(--border) !important;
  white-space: nowrap; vertical-align: middle !important;
}
th.col.small,   th.col-md.small,   th.col-sm.small   { font-size: 8.5px !important;  letter-spacing: .7px !important; padding: 6px 10px !important; }
th.col.medium,  th.col-md.medium,  th.col-sm.medium  { font-size: 10.5px !important; letter-spacing: .4px !important; padding: 8px 12px !important; }

thead tr.bg-info, tr.bg-info { background: var(--bg3) !important; }
.table .small, .table td.small, .table th.small { font-family: var(--font-mono) !important; }
.bg-primary { background: var(--bg3) !important; color: var(--text)  !important; }
.bg-info    { background: var(--bg3) !important; color: var(--text3) !important; }
.bg-success, tr.bg-success, td.bg-success { background: var(--gain-bg) !important; color: var(--gain) !important; }
.bg-danger,  tr.bg-danger,  td.bg-danger  { background: var(--loss-bg) !important; color: var(--loss) !important; }
.bg-warning, tr.bg-warning, td.bg-warning { background: rgba(255,209,102,.08) !important; color: var(--gold) !important; }
.text-success { color: var(--gain)  !important; }
.text-danger  { color: var(--loss)  !important; }
.text-warning { color: var(--gold)  !important; }
.text-muted   { color: var(--text3) !important; }
.text-white   { color: var(--text)  !important; }

td.col.small, td.col-md.small, td.col-sm.small,
td.col.medium, td.col-md.medium, td.col-sm.medium {
  font-family: var(--font-mono) !important; background: transparent !important;
  border: none !important; border-bottom: 1px solid var(--border) !important;
  white-space: nowrap; vertical-align: middle !important; color: var(--text2);
}
td.col.small,  td.col-md.small,  td.col-sm.small  { font-size: 11px !important;   padding: 6px 10px !important; }
td.col.medium, td.col-md.medium, td.col-sm.medium { font-size: 12.5px !important; padding: 8px 12px !important; }


/* ════════════════════════════════════════════════════════════════
   22. FILTERABLE TABLE HEADERS
════════════════════════════════════════════════════════════════ */

.table-dark thead, thead.table-dark { background: var(--bg3) !important; color: var(--text3) !important; border-color: var(--border) !important; }
th[data-filter] {
  position: relative; cursor: pointer;
  font-family: var(--font-mono) !important; font-size: 11.5px !important;
  text-transform: uppercase !important; letter-spacing: .6px !important; font-weight: 600 !important;
  color: var(--text3) !important; background: var(--bg3) !important;
  border: none !important; border-bottom: 1px solid var(--border) !important;
  border-right: 1px solid var(--border) !important;
  padding: 6px 10px !important; white-space: nowrap; vertical-align: middle !important;
  transition: color .15s, background .15s;
}
th[data-filter]:hover { color: var(--accent) !important; background: var(--bg4) !important; }
.header-label { display: inline-block; font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; color: inherit; text-transform: uppercase; letter-spacing: .6px; line-height: 1.4; cursor: pointer; white-space: nowrap; }
th[data-filter].filtered .header-label { color: var(--accent) !important; }
.header-dropdown {
  display: none; position: absolute; top: calc(100% + 2px); left: 0; min-width: 170px; z-index: 1000;
  background: var(--bg2) !important; color: var(--text) !important;
  border: 1px solid var(--border) !important; border-top: 2px solid var(--accent) !important;
  border-radius: 0 0 6px 6px !important; font-family: var(--font-mono) !important;
  font-size: 11px !important; padding: 0 !important; outline: none !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.5) !important; cursor: pointer;
}
.header-dropdown option { background: var(--bg2); color: var(--text2); padding: 7px 12px; font-family: var(--font-mono); font-size: 11px; }
.header-dropdown option:hover, .header-dropdown option:checked { background: var(--bg3) !important; color: var(--accent) !important; }
.table-bordered, .table-bordered th, .table-bordered td { border-color: var(--border) !important; }

#resultsTable tbody tr { background: transparent !important; border-bottom: 1px solid rgba(255,255,255,.028) !important; transition: background .12s; }
#resultsTable tbody tr:hover { background: var(--bg3) !important; }
#resultsTable tbody td {
  font-family: var(--font-mono) !important; font-size: 13px !important; color: var(--text2);
  border: none !important; border-right: 1px solid var(--border) !important;
  padding: 6px 10px !important; vertical-align: middle !important; white-space: nowrap;
}


/* ════════════════════════════════════════════════════════════════
   23. BOOTSTRAP GRID RESETS
════════════════════════════════════════════════════════════════ */

.table_container .row, .table-responsive .row { margin-left: 0 !important; margin-right: 0 !important; }


/* ════════════════════════════════════════════════════════════════
   24. VALUE-BASED COLOUR UTILITIES
════════════════════════════════════════════════════════════════ */

.tt-bull    { color: var(--gain)  !important; }
.tt-bull-bg { background: var(--gain-bg) !important; color: var(--gain)  !important; }
.tt-bear    { color: var(--loss)  !important; }
.tt-bear-bg { background: var(--loss-bg) !important; color: var(--loss)  !important; }
.tt-neut    { color: var(--text3) !important; }
.tt-neut-bg { background: var(--bg4) !important; color: var(--text3) !important; }
.tt-gold    { color: var(--gold)  !important; }
.tt-gold-bg { background: rgba(255,209,102,.08) !important; color: var(--gold) !important; }


/* ════════════════════════════════════════════════════════════════
   25. BG-ONE COLOUR UTILITIES
════════════════════════════════════════════════════════════════ */

.bg-one-success   { color: var(--gain)  !important; }
.bg-one-danger    { color: var(--loss)  !important; }
.bg-one-warning   { color: var(--gold)  !important; }
.bg-one-neutral   { color: var(--text3) !important; }
.bg-one-success-bg, tr.bg-one-success-bg, tr.bg-one-success-bg td { color: var(--gain) !important; background: var(--gain-bg) !important; }
.bg-one-danger-bg,  tr.bg-one-danger-bg,  tr.bg-one-danger-bg td  { color: var(--loss) !important; background: var(--loss-bg) !important; }
.bg-one-warning-bg { color: var(--gold)  !important; background: rgba(255,209,102,.08) !important; }
.bg-one-neutral-bg { color: var(--text3) !important; background: var(--bg4) !important; }


/* ════════════════════════════════════════════════════════════════
   26. FROZEN SYMBOL COLUMN
════════════════════════════════════════════════════════════════ */

/* ── Table container must have overflow for sticky to work ── */
.table-responsive,
.table_container {
  overflow-x: auto;
  overflow-y: auto;         /* needed so thead sticky top works inside modal */
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  position: relative; z-index: 0;   /* ← keep below dropdowns */
}

/* ── Sticky header row — top axis ── */
.tt-tbl thead th,
.tt-di-tbl thead th,
table.table thead th {
  position: sticky !important;
  top: 0;
  z-index: 3;               /* above body cells */
  background: var(--bg3) !important;
  box-shadow: 0 1px 0 var(--border);  /* bottom border that scrolls with header */
}

/* ── Frozen symbol column — left axis ── */
thead th:first-child,
thead th.tt-sym-cell {
  position: sticky !important;
  left: 0;
  top: 0;
  z-index: 5 !important;    /* HIGHEST — intersection of both sticky axes */
  background: var(--bg3) !important;
  box-shadow: 2px 1px 0 var(--border), 2px 0 6px rgba(0,0,0,.3);
}

td.tt-sym-cell,
td.floating-button-container.tt-sym-cell {
  position: sticky !important;
  left: 0;
  z-index: 3;
  background: var(--bg2) !important;
  box-shadow: 2px 0 6px rgba(0,0,0,.25);
}
tr:hover td.tt-sym-cell,
tr:hover td.floating-button-container.tt-sym-cell { background: var(--bg3) !important; }

/* ── Inside modal — errors div needs height for sticky to engage ── */
#errors, #errors1, #errors2, #errors-m {
  height: 100%;
  overflow: auto;
}


/* ════════════════════════════════════════════════════════════════
   27. LEGACY .up / .dn ALIASES
════════════════════════════════════════════════════════════════ */

.up   { color: var(--gain)  !important; }
.dn   { color: var(--loss)  !important; }
.neu  { color: var(--text3) !important; }
.up-bg  { background: var(--gain-bg) !important; color: var(--gain)  !important; }
.dn-bg  { background: var(--loss-bg) !important; color: var(--loss)  !important; }
.neu-bg { background: var(--bg4)     !important; color: var(--text3) !important; }


/* ════════════════════════════════════════════════════════════════
   28. HIGH-SPECIFICITY td COLOUR OVERRIDES
════════════════════════════════════════════════════════════════ */

td.up,  td.bg-one-success  { color: var(--gain)  !important; }
td.dn,  td.bg-one-danger   { color: var(--loss)  !important; }
td.neu, td.bg-one-neutral  { color: var(--text3) !important; }
td.bg-one-warning          { color: var(--gold)  !important; }
td.bg-one-success-bg { color: var(--gain) !important; background: var(--gain-bg) !important; }
td.bg-one-danger-bg  { color: var(--loss) !important; background: var(--loss-bg) !important; }
td > span.up,  td > span.bg-one-success  { color: var(--gain)  !important; }
td > span.dn,  td > span.bg-one-danger   { color: var(--loss)  !important; }
td > span.neu, td > span.bg-one-neutral  { color: var(--text3) !important; }
td > span.bg-one-warning                 { color: var(--gold)  !important; }


/* ════════════════════════════════════════════════════════════════
   29. SCREENER PAGE
════════════════════════════════════════════════════════════════ */

.tt-screener-tabs.ui-tabs { background: transparent !important; border: none !important; padding: 0 !important; font-family: var(--font-mono) !important; }
.tt-screener-tabs .ui-tabs-nav {
  display: flex !important; align-items: stretch !important;
  background: var(--bg2) !important; border: none !important;
  border-top: 1px solid var(--border) !important; border-bottom: 1px solid var(--border) !important;
  padding: 0 14px !important; height: 36px !important; margin: 0 !important;
  list-style: none !important; border-radius: 0 !important; gap: 0 !important; overflow-x: auto !important;
}
.tt-screener-tabs .ui-tabs-nav::-webkit-scrollbar { display: none; }
.tt-screener-tabs .ui-tabs-nav li {
  background: transparent !important; border: none !important; border-radius: 0 !important;
  margin: 0 !important; padding: 0 !important; top: 0 !important;
  border-bottom: 2px solid transparent !important; margin-bottom: -1px !important; transition: border-color .15s !important;
}
.tt-screener-tabs .ui-tabs-nav li.ui-tabs-active { border-bottom-color: var(--accent) !important; background: transparent !important; }
.tt-screener-tabs .ui-tabs-nav li a {
  display: flex !important; align-items: center !important; gap: 5px !important;
  padding: 0 13px !important; height: 36px !important;
  font-family: var(--font-mono) !important; font-size: 11px !important; font-weight: 600 !important;
  letter-spacing: .4px !important; text-transform: uppercase !important;
  color: var(--text3) !important; white-space: nowrap !important; text-decoration: none !important; transition: color .15s !important;
}
.tt-screener-tabs .ui-tabs-nav li a:hover         { color: var(--text)   !important; }
.tt-screener-tabs .ui-tabs-nav li.ui-tabs-active a { color: var(--accent) !important; }
.tt-screener-tabs .ui-tabs-panel, .ui-tabs .ui-tabs-panel { padding: 0 !important; background: transparent !important; border: none !important; }
.ui-widget-header  { border: none !important; background: transparent !important; }
.ui-widget-content { border: none !important; background: transparent !important; }

.tt-screener-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 1px; }
@media (max-width: 1200px) { .tt-screener-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .tt-screener-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px)  { .tt-screener-grid { grid-template-columns: 1fr; } }

.tt-screener-card {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
  overflow: hidden; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .15s;
  display: flex; flex-direction: column;
}
.tt-screener-card:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(0,212,170,.12), 0 8px 28px rgba(0,0,0,.35);
  transform: translateY(-2px);
}
.tt-screener-card-hd { display: flex; align-items: center; justify-content: space-between; padding: 10px 13px 8px; background: var(--bg3); border-bottom: 1px solid var(--border); gap: 8px; }
.tt-screener-card-name { font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; color: var(--accent2); letter-spacing: .2px; transition: color .15s; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-screener-card:hover .tt-screener-card-name { color: var(--accent); }
.tt-screener-card-count { font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--bg); background: var(--accent); border-radius: 20px; padding: 1px 8px; flex-shrink: 0; line-height: 1.6; }
.tt-screener-card-body { padding: 10px 10px 13px; flex: 1; }
.tt-screener-card-desc { font-family: var(--font-mono); font-size: 11.5px; color: var(--text3); margin: 0; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tt-screener-card-ft { display: flex; align-items: center; justify-content: space-between; padding: 6px 13px; background: var(--bg4); border-top: 1px solid var(--border); }
.tt-screener-status { font-family: var(--font-mono); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--gain); }
.tt-screener-date   { font-family: var(--font-mono); font-size: 9px; color: var(--text3); }
.tt-tab-panel { background: transparent; min-height: 2px; }
.ReportPage   { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; margin-top: 8px; min-height: 40px; }


/* ════════════════════════════════════════════════════════════════
   30. FLOATING POPUP
════════════════════════════════════════════════════════════════ */

[id^="hiddenButtons_"] {
  z-index: 99999 !important; background: var(--bg3) !important;
  border: 1px solid var(--border) !important; border-radius: 0 0 8px 8px !important;
  padding: 6px !important; gap: 4px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.6) !important; outline: none !important;
}
[id^="hiddenButtons_"].btn-group,
[id^="hiddenButtons_"].btn-group-sm { box-shadow: none !important; }
[id^="hiddenButtons_"] .btn-primary + .btn-primary { margin-left: 0 !important; border-left: 1px solid var(--border) !important; }
[id^="hiddenButtons_"] .btn-primary,
[id^="hiddenButtons_"] a.btn-primary,
[id^="hiddenButtons_"] button.btn-primary {
  background: var(--bg4) !important; border: none !important; color: var(--accent) !important;
  font-family: var(--font-mono) !important; font-size: 10px !important; font-weight: 600 !important;
  padding: 5px 9px !important; border-radius: 4px !important;
  transition: background .15s, color .15s !important;
  line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
[id^="hiddenButtons_"] .btn-primary:hover,
[id^="hiddenButtons_"] a.btn-primary:hover,
[id^="hiddenButtons_"] button.btn-primary:hover { background: var(--accent) !important; color: var(--bg) !important; border-color: var(--accent) !important; }
[id^="hiddenButtons_"] .btn-primary i,
[id^="hiddenButtons_"] a.btn-primary i,
[id^="hiddenButtons_"] button.btn-primary i { color: inherit !important; font-size: 11px !important; }


/* ════════════════════════════════════════════════════════════════
   31. BROKER API PAGE
════════════════════════════════════════════════════════════════ */

[id^="connectForm_"] input {
  border-color: var(--border) !important; background: var(--bg4) !important; color: var(--text) !important;
}
[id^="connectForm_"] input:focus {
  border-color: var(--accent) !important; box-shadow: 0 0 0 2px rgba(0,212,170,.12) !important; outline: none !important;
}
.toggle.btn-primary, .toggle.btn-default { background: var(--bg4) !important; border-color: var(--border) !important; }
.toggle.btn-primary .toggle-on  { background: var(--gain-bg) !important; color: var(--gain) !important; }
.toggle.btn-default .toggle-off { background: var(--bg4) !important; color: var(--text3) !important; }
.toggle-handle { background: var(--bg3) !important; border-color: var(--border) !important; }


/* ════════════════════════════════════════════════════════════════
   32. TOOL CLUSTER
════════════════════════════════════════════════════════════════ */

.tt-tool-cluster {
  display: inline-flex; align-items: center; gap: 0;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 6px; padding: 0 4px; height: 28px; vertical-align: middle;
}
.tt-tool-cluster #tt-srch-btn { border: none !important; background: transparent !important; height: 24px !important; width: 24px !important; }
.tt-tool-cluster #tt-srch-btn:hover { background: var(--bg4) !important; color: var(--accent) !important; border-radius: 4px !important; }

.tt-tool-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 4px; border: none;
  background: transparent; color: var(--text3); cursor: pointer;
  transition: background .15s, color .15s; text-decoration: none; font-size: 13px;
}
.tt-tool-btn:hover  { background: var(--bg4); color: var(--accent); }
.tt-tool-btn.active { color: var(--accent); }

.tt-tool-badge {
  position: absolute; top: 3px; right: 3px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--loss); border: 1px solid var(--bg3);
  animation: tt-pulse 2s ease-in-out infinite;
}
.tt-tool-divider { width: 1px; height: 16px; background: var(--border); flex-shrink: 0; }

/* ── SL Calculator Popup ── */
#tt-sl-calc-panel {
  display: none; position: fixed;
  top: calc(var(--header-h) + 6px); right: 12px;
  width: 300px; background: var(--bg2);
  border: 1px solid var(--border); border-top: 2px solid var(--accent);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 16px 48px rgba(0,0,0,.6);
  z-index: 10002; font-family: var(--font-mono);
  animation: tn-drop-in .14s ease;
}
#tt-sl-calc-panel.open { display: block; }

.tt-calc-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 13px; background: var(--bg3);
  border-bottom: 1px solid var(--border);
}
.tt-calc-hd-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .8px; color: var(--text);
  display: flex; align-items: center; gap: 7px;
}
.tt-calc-hd-title i { color: var(--accent); font-size: 12px; }
.tt-calc-close {
  width: 20px; height: 20px; border-radius: 4px; border: none;
  background: transparent; color: var(--text3); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; transition: background .12s, color .12s;
}
.tt-calc-close:hover { background: var(--loss-bg); color: var(--loss); }

.tt-calc-tabs {
  display: flex; border-bottom: 1px solid var(--border);
}
.tt-calc-tab {
  flex: 1; padding: 7px 0; text-align: center;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--text3); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.tt-calc-tab:hover { color: var(--text2); }
.tt-calc-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.tt-calc-body { padding: 13px; display: flex; flex-direction: column; gap: 9px; }

.tt-calc-row { display: flex; flex-direction: column; gap: 4px; }
.tt-calc-label {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; color: var(--text3);
}
.tt-calc-input {
  height: 30px; background: var(--bg3); border: 1px solid var(--border);
  border-radius: 5px; color: var(--text); font-family: var(--font-mono);
  font-size: 12px; padding: 0 9px; width: 100%; outline: none;
  transition: border-color .15s;
}
.tt-calc-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(0,212,170,.1); }

.tt-calc-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.tt-calc-btn {
  height: 32px; width: 100%; background: var(--accent); color: var(--bg);
  border: none; border-radius: 6px; font-family: var(--font-mono);
  font-size: 11px; font-weight: 700; cursor: pointer; letter-spacing: .3px;
  transition: opacity .15s; margin-top: 2px;
}
.tt-calc-btn:hover { opacity: .88; }

.tt-calc-results {
  background: var(--bg3); border-radius: 6px;
  border: 1px solid var(--border); overflow: hidden;
  display: none;
}
.tt-calc-results.show { display: block; }
.tt-calc-result-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 11px; border-bottom: 1px solid var(--border);
  font-size: 11px;
}
.tt-calc-result-row:last-child { border-bottom: none; }
.tt-calc-result-lbl { color: var(--text3); font-size: 10px; text-transform: uppercase; letter-spacing: .4px; }
.tt-calc-result-val { font-weight: 700; color: var(--text); font-size: 12px; }
.tt-calc-result-val.gain { color: var(--gain); }
.tt-calc-result-val.loss { color: var(--loss); }
.tt-calc-result-val.gold { color: var(--gold); }

.tt-calc-divider { height: 1px; background: var(--border); margin: 2px 0; }
.tt-calc-note { font-size: 9px; color: var(--text3); text-align: center; padding: 6px 13px 10px; line-height: 1.5; }


/* ════════════════════════════════════════════════════════════════
   33. JQUERY UI DATEPICKER
════════════════════════════════════════════════════════════════ */

#ui-datepicker-div {
  background: var(--bg2) !important; border: 1px solid var(--border) !important;
  border-top: 2px solid var(--accent) !important; border-radius: 0 0 8px 8px !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.6) !important;
  font-family: var(--font-mono) !important; font-size: 11px !important;
  z-index: 10003 !important; padding: 8px !important;
}
.ui-datepicker .ui-datepicker-header { background: var(--bg3) !important; border: none !important; border-bottom: 1px solid var(--border) !important; color: var(--text) !important; border-radius: 0 !important; padding: 6px !important; }
.ui-datepicker .ui-datepicker-title { color: var(--text) !important; font-family: var(--font-mono) !important; }
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next { cursor: pointer !important; color: var(--text3) !important; top: 6px !important; }
.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover { background: var(--bg4) !important; border: none !important; color: var(--accent) !important; }
.ui-datepicker table { font-family: var(--font-mono) !important; }
.ui-datepicker th { color: var(--text3) !important; font-size: 10px !important; padding: 4px !important; }
.ui-datepicker td { padding: 1px !important; }
.ui-datepicker td a, .ui-datepicker td span { background: transparent !important; border: none !important; color: var(--text2) !important; border-radius: 4px !important; text-align: center !important; padding: 4px 6px !important; }
.ui-datepicker td a:hover { background: var(--bg4) !important; color: var(--accent) !important; }
.ui-datepicker td.ui-datepicker-today a { background: var(--bg3) !important; color: var(--accent) !important; font-weight: 700 !important; }
.ui-datepicker td.ui-state-active a,
.ui-datepicker td .ui-state-active { background: var(--accent) !important; color: var(--bg) !important; font-weight: 700 !important; }

#tt-cal-picker { font-family: var(--font-mono) !important; }
#tt-cal-picker .datepicker {
  background: var(--bg2) !important; border: 1px solid var(--accent) !important;
  border-radius: 10px !important; font-family: var(--font-mono) !important; font-size: 12px !important;
  padding: 0 !important; box-shadow: 0 20px 60px rgba(0,0,0,.7) !important;
  overflow: hidden !important; min-width: 260px !important;
}
#tt-cal-picker .datepicker-days thead tr:first-child { background: var(--bg3) !important; border-bottom: 1px solid var(--border) !important; }
#tt-cal-picker .datepicker thead tr:first-child th { background: transparent !important; color: var(--text) !important; font-size: 12px !important; font-weight: 700 !important; padding: 10px 8px !important; cursor: pointer !important; border: none !important; letter-spacing: .3px !important; }
#tt-cal-picker .datepicker thead tr:first-child th:hover { background: var(--bg4) !important; color: var(--accent) !important; }
#tt-cal-picker .datepicker .prev,
#tt-cal-picker .datepicker .next { color: var(--accent) !important; font-size: 14px !important; }
#tt-cal-picker .datepicker .dow { color: var(--text3) !important; font-size: 9px !important; text-transform: uppercase !important; letter-spacing: .8px !important; padding: 6px 4px !important; background: var(--bg3) !important; border-bottom: 1px solid var(--border) !important; }
#tt-cal-picker .datepicker table { width: 100% !important; border-collapse: collapse !important; padding: 8px !important; }
#tt-cal-picker .datepicker td { padding: 2px !important; }
#tt-cal-picker .datepicker .day { width: 34px !important; height: 30px !important; line-height: 30px !important; text-align: center !important; border-radius: 6px !important; color: var(--text2) !important; cursor: pointer !important; font-size: 11px !important; transition: background .12s, color .12s !important; }
#tt-cal-picker .datepicker .day:hover { background: var(--bg4) !important; color: var(--accent) !important; }
#tt-cal-picker .datepicker .today { background: rgba(0,212,170,.12) !important; color: var(--accent) !important; font-weight: 700 !important; }
#tt-cal-picker .datepicker .today:hover { background: rgba(0,212,170,.22) !important; }
#tt-cal-picker .datepicker .active,
#tt-cal-picker .datepicker .active:hover { background: var(--accent) !important; color: var(--bg) !important; font-weight: 700 !important; }
#tt-cal-picker .datepicker .old,
#tt-cal-picker .datepicker .new { color: var(--text3) !important; opacity: .4 !important; }
#tt-cal-picker .datepicker td:first-child .day,
#tt-cal-picker .datepicker td:last-child  .day { color: var(--text3) !important; }
#tt-cal-picker .datepicker tfoot tr th { background: var(--bg3) !important; color: var(--accent) !important; border-top: 1px solid var(--border) !important; padding: 8px !important; cursor: pointer !important; font-size: 10px !important; text-transform: uppercase !important; letter-spacing: .6px !important; }
#tt-cal-picker .datepicker tfoot tr th:hover { background: var(--bg4) !important; }

#tt-cal-picker .datepicker-months span,
#tt-cal-picker .datepicker-years  span {
  display: inline-block !important; width: 56px !important; height: 34px !important;
  line-height: 34px !important; margin: 2px !important; text-align: center !important;
  border-radius: 6px !important; color: var(--text2) !important; cursor: pointer !important;
  font-size: 11px !important; font-family: var(--font-mono) !important;
  background: transparent !important; border: none !important;
  transition: background .12s, color .12s !important; box-sizing: border-box !important;
}
#tt-cal-picker .datepicker-months span:hover,
#tt-cal-picker .datepicker-years  span:hover  { background: var(--bg4)   !important; color: var(--accent) !important; }
#tt-cal-picker .datepicker-months span.active,
#tt-cal-picker .datepicker-years  span.active { background: var(--accent) !important; color: var(--bg) !important; font-weight: 700 !important; }
#tt-cal-picker .datepicker-months span.focused,
#tt-cal-picker .datepicker-years  span.focused { background: var(--bg4) !important; }
#tt-cal-picker .datepicker-years  span.old,
#tt-cal-picker .datepicker-years  span.new    { opacity: .35 !important; color: var(--text3) !important; }
#tt-cal-picker .datepicker-months table,
#tt-cal-picker .datepicker-years  table { width: 100% !important; }
#tt-cal-picker .datepicker-months td,
#tt-cal-picker .datepicker-years  td { width: 100% !important; padding: 6px 8px !important; white-space: normal !important; text-align: center !important; }

#tt-cal-picker .datepicker .datepicker-switch { font-family: var(--font-mono) !important; font-size: 12px !important; font-weight: 700 !important; color: var(--text) !important; letter-spacing: .3px !important; text-align: center !important; width: 100% !important; }
#tt-cal-picker .datepicker .prev,
#tt-cal-picker .datepicker .next { font-size: 16px !important; color: var(--accent) !important; width: 30px !important; text-align: center !important; }
#tt-cal-picker .datepicker .prev:hover,
#tt-cal-picker .datepicker .next:hover { background: var(--bg4) !important; border-radius: 4px !important; }

#tt-cal-picker table thead tr th.datepicker-switch,
#tt-cal-picker .datepicker table thead tr th.datepicker-switch { text-align: center !important; vertical-align: middle !important; }

#tt-cal-picker .datepicker-days   thead tr:first-child th.datepicker-switch,
#tt-cal-picker .datepicker-months thead tr:first-child th.datepicker-switch,
#tt-cal-picker .datepicker-years  thead tr:first-child th.datepicker-switch,
#tt-cal-picker .datepicker-decades thead tr:first-child th.datepicker-switch {
  text-align: center !important; font-family: var(--font-mono) !important;
  font-size: 12px !important; font-weight: 700 !important; color: var(--text) !important;
  background: transparent !important; border: none !important; white-space: nowrap !important;
}

#tt-cal-picker .datepicker-years td,
#tt-cal-picker .datepicker-decades td {
  white-space: normal !important; word-break: break-all !important;
  overflow-wrap: break-word !important; display: table-cell !important;
  text-align: center !important; padding: 6px !important; width: 100% !important;
}


/* ════════════════════════════════════════════════════════════════
   34. TOPBAR (leftnav layout)
════════════════════════════════════════════════════════════════ */

.tt-topbar {
  height: var(--header-h);
  background: var(--bg2); border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 5px 10px; gap: 8px;
  flex-shrink: 0; position: sticky; top: 0; z-index: 500;
  overflow: visible;
}
.tt-indices-bar { display: flex; align-items: center; gap: 3px; flex: 1; padding: 0 10px; overflow: hidden; }
.tt-topbar .tt-theme-sw  { margin-left: auto; border-left: 1px solid var(--border); padding: 0 10px; }
.tt-topbar .tt-user-pill { border-left: 1px solid var(--border); border-radius: 0; height: 36px; padding: 0 12px; }


/* ════════════════════════════════════════════════════════════════
   35. THEME SWITCHER
════════════════════════════════════════════════════════════════ */

.tt-theme-sw {
  display: inline-flex; align-items: center; gap: 5px;
  background: transparent; padding: 0 2px; flex-shrink: 0; height: 100%;
}

button.tt-theme-btn,
.tt-theme-sw button.tt-theme-btn {
  -webkit-appearance: none !important; appearance: none !important;
  width: 16px !important; height: 16px !important;
  min-width: 16px !important; min-height: 16px !important;
  max-width: 16px !important; max-height: 16px !important;
  border-radius: 50% !important; border: 2px solid var(--border) !important;
  cursor: pointer !important; padding: 0 !important; margin: 0 1px !important;
  line-height: 0 !important; font-size: 0 !important;
  display: inline-block !important; flex-shrink: 0 !important;
  vertical-align: middle !important; box-shadow: none !important; outline: none !important;
  transition: transform .15s, border-color .15s;
}
button.tt-theme-btn:hover  { transform: scale(1.25) !important; }
button.tt-theme-btn.active { border-color: var(--text) !important; transform: scale(1.2) !important; }

button.tt-theme-btn[data-t="dark"]  { background:#0a0c10 !important; box-shadow: inset 0 0 0 1px #3a4560, 0 0 0 1px #3a4560 !important; }
button.tt-theme-btn[data-t="light"] { background:#f0f4fc !important; box-shadow: inset 0 0 0 1px #aaa,    0 0 0 1px #aaa !important; }
button.tt-theme-btn[data-t="blue"]  { background:#041225 !important; box-shadow: inset 0 0 3px #0099ff,   0 0 0 1px #0099ff !important; }
button.tt-theme-btn[data-t="gray"]  { background:#1a1c24 !important; box-shadow: inset 0 0 3px #9b8aff,   0 0 0 1px #9b8aff !important; }
button.tt-theme-btn[data-t="green"] { background:#030d0a !important; box-shadow: inset 0 0 3px #00ffaa,   0 0 0 1px #00ffaa !important; }
button.tt-theme-btn[data-t="amber"] { background:#100a00 !important; box-shadow: inset 0 0 3px #ffb800,   0 0 0 1px #ffb800 !important; }
button.tt-theme-btn.active[data-t="dark"]  { box-shadow: inset 0 0 0 1px #3a4560, 0 0 0 3px #e2e8f7 !important; }
button.tt-theme-btn.active[data-t="light"] { box-shadow: inset 0 0 0 1px #aaa,    0 0 0 3px #0070e0 !important; }
button.tt-theme-btn.active[data-t="blue"]  { box-shadow: inset 0 0 3px #0099ff,   0 0 0 3px #0099ff !important; }
button.tt-theme-btn.active[data-t="gray"]  { box-shadow: inset 0 0 3px #9b8aff,   0 0 0 3px #9b8aff !important; }
button.tt-theme-btn.active[data-t="green"] { box-shadow: inset 0 0 3px #00ffaa,   0 0 0 3px #00ffaa !important; }
button.tt-theme-btn.active[data-t="amber"] { box-shadow: inset 0 0 3px #ffb800,   0 0 0 3px #ffb800 !important; }


/* ════════════════════════════════════════════════════════════════
   36. USER PILL
════════════════════════════════════════════════════════════════ */

.tt-user-pill {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  height: 100%; padding: 0 14px;
  background: transparent; border: none; border-left: 1px solid var(--border);
  cursor: pointer; flex-shrink: 0; transition: background .15s;
  overflow: visible; z-index: 10000;
}
.tt-user-pill:hover { background: var(--bg3); }

.tt-user-pill-av {
  width: 22px; height: 22px; border-radius: 6px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: var(--bg); font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; letter-spacing: 0;
}
.tt-user-pill-name {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  color: var(--text2); white-space: nowrap; transition: color .15s;
}
.tt-user-pill:hover .tt-user-pill-name { color: var(--text); }
.tt-user-pill::after {
  content: ''; display: inline-block; width: 0; height: 0;
  border-left: 3px solid transparent; border-right: 3px solid transparent;
  border-top: 4px solid var(--text3); margin-left: 2px; transition: border-top-color .15s;
}
.tt-user-pill:hover::after { border-top-color: var(--accent); }

.tt-user-dropdown {
  display: none; position: absolute; top: 100%; right: 0; min-width: 160px;
  background: var(--bg2); border: 1px solid var(--border);
  border-top: 2px solid var(--accent); border-radius: 0 0 8px 8px;
  box-shadow: 0 16px 48px rgba(0,0,0,.55); z-index: 10002; overflow: visible;
  animation: tn-drop-in .14s ease;
}
.tt-user-pill:hover .tt-user-dropdown { display: block; }
.tt-user-dropdown a {
  display: flex; align-items: center; gap: 8px; padding: 9px 14px;
  font-family: var(--font-mono); font-size: 11px; color: var(--text2);
  text-decoration: none; border-bottom: 1px solid var(--border);
  transition: background .12s, color .12s;
}
.tt-user-dropdown a:last-child { border-bottom: none; }
.tt-user-dropdown a:hover { background: var(--bg3); color: var(--accent); }
.tt-user-dropdown a i { color: var(--text3); font-size: 12px; transition: color .12s; }
.tt-user-dropdown a:hover i { color: var(--accent); }
/* ── Logout link — danger tint ── */
.tt-user-dropdown a.tt-logout-link { color: var(--loss); border-top: 1px solid var(--border); }
.tt-user-dropdown a.tt-logout-link:hover { background: var(--loss-bg); color: var(--loss); }
.tt-user-dropdown a.tt-logout-link i { color: var(--loss); }
.tt-user-dropdown a.tt-logout-link:hover i { color: var(--loss); }

/* ── Fixed user pill — outside all stacking contexts, always on top ── */
.tt-user-fixed {
  position: fixed; top: 0; right: 0;
  height: var(--header-h); z-index: 9999;
  border-left: 1px solid var(--border);
  background: var(--bg2);
}
.tt-login-fixed {
  position: fixed; top: 0; right: 0;
  height: var(--header-h); z-index: 9999;
  display: flex; align-items: center; padding: 0 14px;
  font-size: 12px; color: var(--accent);
  text-decoration: none; font-family: var(--font-mono);
  background: var(--bg2); border-left: 1px solid var(--border);
}
/* Spacer reserves space in topbar where pill used to sit */
.tt-user-spacer { width: 130px; flex-shrink: 0; }


/* ════════════════════════════════════════════════════════════════
   37. SIDEBAR
════════════════════════════════════════════════════════════════ */

#sidebar {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 220px; background: var(--bg2); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; z-index: 1000; overflow: hidden;
  transition: width .25s ease; border-bottom: none;
}
#sidebar.collapsed { width: 54px; }

#sidebar::after {
  content: ''; position: fixed; top: 50px; left: 0;
  width: 220px; height: 36px; background: var(--bg3);
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  z-index: 498; pointer-events: none;
}
#sidebar.tt-collapsed::after { width: 54px; }

.tt-sb-logo {
  display: flex; align-items: center; gap: 9px; padding: 0 14px; height: 48px;
  text-decoration: none; border-bottom: 1px solid var(--border);
  flex-shrink: 0; transition: background .15s; overflow: hidden;
}
.tt-sb-logo:hover { background: var(--bg3); }
.tt-sb-logo-icon {
  width: 28px; height: 28px; border-radius: 7px; background: var(--accent); color: var(--bg);
  font-family: var(--font-mono); font-size: 15px; font-weight: 900;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: 0 0 12px rgba(0,212,170,.25);
}
.tt-sb-logo-text { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: -.2px; white-space: nowrap; overflow: hidden; }
.tt-sb-logo-text span { color: var(--accent); }

.tt-sb-user { display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0; overflow: hidden; }
.tt-sb-avatar {
  width: 30px; height: 30px; border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: var(--bg); font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.tt-sb-uinfo { overflow: hidden; }
.tt-sb-uname { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-sb-usub  { font-family: var(--font-mono); font-size: 9px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }

.tt-sb-clock { display: flex; flex-direction: column; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.tt-sb-clock-val { font-family: var(--font-mono); font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: 1px; line-height: 1; }
/* ── Clock sub-label: no ::before dot — dot is controlled via .tt-market-dot in HTML ── */
.tt-sb-clock-sub { font-family: var(--font-mono); font-size: 9px; color: var(--text3); text-transform: uppercase; letter-spacing: .8px; margin-top: 2px; display: flex; align-items: center; gap: 4px; }


.tt-sb-items { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 6px 0; }
.tt-sb-items::-webkit-scrollbar       { width: 2px; }
.tt-sb-items::-webkit-scrollbar-thumb { background: var(--border); }

.tt-sb-section { font-family: var(--font-mono); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text3); padding: 10px 16px 4px; }

.tt-nav-item {
  display: flex; align-items: center; gap: 9px; padding: 7px 16px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--text2);
  text-decoration: none; border-left: 2px solid transparent;
  transition: background .12s, color .12s, border-color .12s;
  white-space: nowrap; overflow: hidden; cursor: pointer;
}
.tt-nav-item:hover { background: var(--bg3); color: var(--text); border-left-color: var(--border); }
.tt-nav-item.active, .tt-nav-item.tt-active { background: rgba(0,212,170,.06); color: var(--accent); border-left-color: var(--accent); }
.tt-nav-icon  { font-size: 14px; flex-shrink: 0; width: 18px; text-align: center; display: inline-block; }
.tt-nav-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }

.tt-nav-sub { display: none; padding-left: 8px; border-left: 1px solid var(--border); margin-left: 24px; }
.tt-nav-item.open + .tt-nav-sub, .tt-nav-sub.open { display: block; }
.tt-nav-sub .tt-nav-item { font-size: 11px; padding: 5px 14px; }

.tt-sb-toggle {
  display: flex; align-items: center; gap: 8px; padding: 10px 16px;
  border-top: 1px solid var(--border); cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; color: var(--text3);
  flex-shrink: 0; transition: background .15s, color .15s; user-select: none;
}
.tt-sb-toggle:hover { background: var(--bg3); color: var(--text2); }
.tt-sb-toggle-icon { font-size: 10px; transition: transform .25s; flex-shrink: 0; }
#sidebar.collapsed .tt-sb-toggle-icon { transform: rotate(180deg); }
.tt-sb-toggle-lbl  { overflow: hidden; white-space: nowrap; }

#sidebar.collapsed .tt-sb-logo-text,
#sidebar.collapsed .tt-sb-uinfo,
#sidebar.collapsed .tt-sb-clock-sub,
#sidebar.collapsed .tt-sb-section,
#sidebar.collapsed .tt-nav-label,
#sidebar.collapsed .tt-sb-toggle-lbl { display: none; }
#sidebar.collapsed .tt-sb-clock-val  { font-size: 11px; }
#sidebar.collapsed .tt-nav-item      { padding: 8px; justify-content: center; }
#sidebar.collapsed .tt-nav-icon      { width: auto; }
#sidebar.collapsed .tt-sb-logo       { justify-content: center; padding: 0; }
#sidebar.collapsed .tt-sb-user       { justify-content: center; padding: 8px 0; }
#sidebar.collapsed .tt-sb-toggle     { justify-content: center; padding: 10px 0; }
#sidebar.collapsed .tt-sb-clock      { padding: 6px 0; }


/* ════════════════════════════════════════════════════════════════
   38. MODAL (Bootstrap + native dialog)
   Note: .modal label / input / select / textarea styles are in
   section 43 (Form Elements) to avoid duplication.
════════════════════════════════════════════════════════════════ */

/* ── Modal dialog — flex column so body can scroll independently ── */
.modal-dialog {
  display: flex !important;
  flex-direction: column !important;
  max-height: calc(100vh - 60px) !important;  /* never taller than viewport */
  margin: 30px auto !important;
}

.modal-content {
  background: var(--bg2) !important; border: 1px solid var(--border) !important;
  border-top: 2px solid var(--accent) !important; border-radius: 0 0 10px 10px !important;
  color: var(--text) !important; box-shadow: 0 24px 80px rgba(0,0,0,.7) !important;
  /* Critical flex layout — header fixed, body scrolls, footer fixed */
  display: flex !important;
  flex-direction: column !important;
  max-height: calc(100vh - 60px) !important;
  min-height: 200px !important;
  overflow: hidden !important;   /* clip corners, body handles its own scroll */
}

.modal-header {
  background: var(--bg3) !important; border-bottom: 1px solid var(--border) !important;
  padding: 10px 16px !important;
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  flex-shrink: 0 !important;    /* header never shrinks — always visible */
}

.modal-title {
  font-family: var(--font-mono) !important; font-size: 13px !important; font-weight: 700 !important;
  color: var(--text) !important; text-align: left !important; margin: 0 !important; flex: 1 !important;
}

.modal-body {
  background: var(--bg2) !important; color: var(--text2) !important;
  flex: 1 !important;            /* fills remaining space between header and footer */
  min-height: 0 !important;     /* critical — without this flex child won't shrink/scroll */
  overflow-y: auto !important;  /* vertical scroll when content overflows */
  overflow-x: auto !important;  /* horizontal scroll for wide tables */
  padding: 0 !important;
}
.modal-body::-webkit-scrollbar         { width: 6px !important; height: 6px !important; }
.modal-body::-webkit-scrollbar-track   { background: var(--bg3) !important; border-radius: 3px !important; }
.modal-body::-webkit-scrollbar-thumb   { background: var(--accent) !important; border-radius: 3px !important; }
.modal-body::-webkit-scrollbar-thumb:hover { background: var(--accent2) !important; }
.modal-body::-webkit-scrollbar-corner  { background: var(--bg3) !important; }

.modal-footer {
  background: var(--bg3) !important; border-top: 1px solid var(--border) !important;
  padding: 8px 16px !important;
  flex-shrink: 0 !important;    /* footer never shrinks — always visible */
}

/* ── Modal width utilities — add to .modal-dialog via data-size or JS ── */
/* Usage: <a class="launchDialog" data-size="lg" ...> */
/* Or JS:  $('#myModal .modal-dialog').attr('data-modal-size','xl') */
.modal-dialog[data-modal-size="sm"]   { max-width: 400px  !important; min-width: 300px  !important; }
.modal-dialog[data-modal-size="md"]   { max-width: 640px  !important; min-width: 400px  !important; }
.modal-dialog[data-modal-size="lg"]   { max-width: 900px  !important; min-width: 600px  !important; }
.modal-dialog[data-modal-size="xl"]   { max-width: 1200px !important; min-width: 800px  !important; }
.modal-dialog[data-modal-size="full"] { max-width: 92vw   !important; min-width: 50vw   !important; }
/* Default (no data-modal-size) keeps Bootstrap's own max-width from model.html inline styles */
.modal-backdrop      { background: #000 !important; }
.modal-backdrop.show { opacity: .65 !important; }

/* ── Close button (consolidated) ── */
.close, .custom-close {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 26px !important; height: 26px !important; border-radius: 5px !important;
  background: transparent !important; color: var(--text3) !important; opacity: 1 !important;
  font-size: 16px !important; cursor: pointer !important;
  transition: background .12s, color .12s !important;
  text-shadow: none !important; float: none !important;
  text-decoration: none !important; line-height: 1 !important;
  margin-left: auto !important; flex-shrink: 0 !important;
  border: none !important;
}
.close:hover, .custom-close:hover { background: var(--loss-bg) !important; color: var(--loss) !important; }

/* ── Modal body text brightness (consolidated) ── */
.modal-body, .modal-body td, .modal-body th, .modal-body p,
.modal-body span, .modal-body div, .modal-body a,
#errors, #errors1, #errors2, #errors-m,
#errors td, #errors th, #errors div, #errors span { color: var(--text) !important; }
.modal-body thead th, .modal-body .tt-di-tbl thead th, #errors thead th { color: var(--text2) !important; background: var(--bg3) !important; }

.modal-body .bg-one-success, .modal-body td.bg-one-success, #errors .bg-one-success { color: var(--gain) !important; }
.modal-body .bg-one-danger,  .modal-body td.bg-one-danger,  #errors .bg-one-danger  { color: var(--loss) !important; }
.modal-body .bg-one-warning, #errors .bg-one-warning { color: var(--gold) !important; }
.modal-body .bg-one-success-bg, .modal-body tr.bg-one-success-bg td { color: var(--gain) !important; background: var(--gain-bg) !important; }
.modal-body .bg-one-danger-bg,  .modal-body tr.bg-one-danger-bg td  { color: var(--loss) !important; background: var(--loss-bg) !important; }

.modal-body .tt-stab, #errors .tt-stab { color: var(--text2) !important; }
.modal-body .tt-stab.active, #errors .tt-stab.active { color: var(--accent) !important; }
.modal-body a       { color: var(--accent2) !important; }
.modal-body a:hover { color: var(--accent)  !important; }

.modal table { font-family: var(--font-mono) !important; }
.modal thead th { background: var(--bg3) !important; color: var(--text3) !important; border-color: var(--border) !important; font-size: 10px !important; text-transform: uppercase !important; letter-spacing: .6px !important; }
.modal tbody td { color: var(--text2) !important; border-color: var(--border) !important; }
.modal tbody tr:hover td { background: var(--bg3) !important; }

/* ── Bootstrap button overrides in modal ── */
.modal .btn-primary   { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--bg) !important; font-family: var(--font-mono) !important; font-size: 11px !important; font-weight: 700 !important; }
.modal .btn-secondary { background: transparent !important; border-color: var(--border) !important; color: var(--text2) !important; font-family: var(--font-mono) !important; font-size: 11px !important; }
.modal .btn-secondary:hover { border-color: var(--text2) !important; color: var(--text) !important; }

/* ── Native stockDialog ── */
#stockDialog {
  border: 1px solid var(--border); border-top: 2px solid var(--accent);
  border-radius: 0 0 10px 10px; background: var(--bg2); color: var(--text);
  padding: 0; max-width: 90vw; max-height: 90vh;
  font-family: var(--font-mono); box-shadow: 0 24px 80px rgba(0,0,0,.7);
}
#stockDialog::backdrop { background: rgba(0,0,0,.65); }
.dialog-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; background: var(--bg3); border-bottom: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--text);
}
.dialog-close { cursor: pointer; color: var(--text3); font-size: 18px; line-height: 1; transition: color .12s; }
.dialog-close:hover { color: var(--loss); }
#dialogContent { padding: 12px 16px; overflow-y: auto; max-height: 70vh; }


/* ════════════════════════════════════════════════════════════════
   39. TOPBAR ADDITIONS
════════════════════════════════════════════════════════════════ */

.tt-topbar-logo {
  display: flex; align-items: center; gap: 7px; padding: 0 14px; height: 100%; flex-shrink: 0;
  text-decoration: none; border-right: 0px solid var(--border); background: var(--bg2); transition: background .15s;
}
.tt-topbar-logo:hover { background: var(--bg3); }
.tt-topbar-logo-mark { width: 22px; height: 22px; border-radius: 4px; background: var(--text); color: var(--bg); font-size: 12px; font-weight: 900; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tt-topbar-logo-text { font-size: 16px; font-weight: 700; color: var(--text); white-space: nowrap; font-family: Arial, sans-serif; letter-spacing: -.2px; }

.tt-topbar-clock { display: flex; align-items: center; padding: 0 12px; height: 100%; flex-shrink: 0; border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
.tt-topbar-clock span { font-size: 13px; font-weight: 700; color: var(--text); font-family: Arial, sans-serif; letter-spacing: .5px; }

.tt-theme-toggle {
  display: flex; align-items: center; gap: 5px; height: 100%; padding: 0 12px; flex-shrink: 0;
  border: none; border-left: 1px solid var(--border); background: transparent; color: var(--text2);
  cursor: pointer; font-size: 12px; font-weight: 600; font-family: Arial, sans-serif; transition: background .15s, color .15s;
}
.tt-theme-toggle:hover { background: var(--bg3); color: var(--text); }
.tt-theme-toggle span:first-child { font-size: 14px; }


/* ════════════════════════════════════════════════════════════════
   40. EMBED / IFRAME
════════════════════════════════════════════════════════════════ */

embed, iframe { background: var(--bg2); border: none; display: block; color-scheme: dark; }
[id*="chart"], [id*="Chart"], #otchart, #otkeydata, .tt-embed-wrap { background: var(--bg2); overflow: hidden; }
iframe[data-themed="pending"] { opacity: 0.95; filter: brightness(0.97); }
[data-theme="light"] embed, [data-theme="light"] iframe { filter: none; background: var(--bg2); }
#fileViewer { background: var(--bg2); width: 100%; border: none; }


/* ════════════════════════════════════════════════════════════════
   41. LIGHT THEME OVERRIDES
════════════════════════════════════════════════════════════════ */

[data-theme="light"] body, body[data-theme="light"] { background: #ffffff; color: #111111; }

[data-theme="light"] .tt-di-tbl tbody tr,
[data-theme="light"] .tt-tbl tbody tr { border-bottom: 1px solid #d0d0d0; }
[data-theme="light"] .tt-di-tbl tbody tr:hover,
[data-theme="light"] .tt-tbl tbody tr:hover { background: #eeeeee; }
[data-theme="light"] .tt-di-tbl td,
[data-theme="light"] .tt-tbl td { color: #444444; }
[data-theme="light"] .tt-di-tbl thead th,
[data-theme="light"] .tt-tbl thead th { background: #eeeeee; color: #888888; border-bottom: 1px solid #d0d0d0; }

[data-theme="light"] td.col.small, [data-theme="light"] td.col-md.small, [data-theme="light"] td.col-sm.small,
[data-theme="light"] td.col.medium,[data-theme="light"] td.col-md.medium,[data-theme="light"] td.col-sm.medium { border-bottom: 1px solid #d0d0d0 !important; color: #444444; }
[data-theme="light"] th.col.small, [data-theme="light"] th.col-md.small, [data-theme="light"] th.col-sm.small { background: #eeeeee !important; color: #888888 !important; border-bottom: 1px solid #d0d0d0 !important; }

[data-theme="light"] .bg-primary { background: #eeeeee !important; color: #111111 !important; }
[data-theme="light"] .bg-info    { background: #eeeeee !important; color: #888888 !important; }
[data-theme="light"] .table-dark thead, [data-theme="light"] thead.table-dark { background: #eeeeee !important; color: #888888 !important; border-color: #d0d0d0 !important; }
[data-theme="light"] th[data-filter] { background: #eeeeee !important; color: #888888 !important; border-bottom: 1px solid #d0d0d0 !important; border-right: 1px solid #d0d0d0 !important; }

[data-theme="light"] .tt-panel, [data-theme="light"] .tt-di-panel { background: #f7f7f7; border-color: #d0d0d0; }
[data-theme="light"] .tt-panel:hover, [data-theme="light"] .tt-di-panel:hover { border-color: #999999; box-shadow: 0 4px 16px rgba(0,0,0,.08); }

[data-theme="light"] #sidebar { background: #f7f7f7; border-right-color: #d0d0d0; }
[data-theme="light"] .tt-sb-section { color: #888888; }
[data-theme="light"] .tt-nav-item { color: #444444; }
[data-theme="light"] .tt-nav-item:hover, [data-theme="light"] .tt-nav-item.active { background: #eeeeee; color: #111111; }
[data-theme="light"] .tt-sub a { color: #444444; }
[data-theme="light"] .tt-sub a:hover { background: #eeeeee; color: #111111; }
[data-theme="light"] .tt-sb-toggle { border-top-color: #d0d0d0; color: #888888; }

[data-theme="light"] .tt-topbar { background: #f7f7f7; border-bottom-color: #d0d0d0; }
[data-theme="light"] .tt-user-pill:hover { background: #eeeeee; }
[data-theme="light"] .tt-user-dropdown { background: #f7f7f7; border-color: #d0d0d0; }
[data-theme="light"] .tt-user-dropdown a { color: #444444; border-bottom-color: #d0d0d0; }
[data-theme="light"] .tt-user-dropdown a:hover { background: #eeeeee; color: #111111; }

[data-theme="light"] #tt-mainnav { background: #eeeeee; border-bottom-color: #d0d0d0; }
[data-theme="light"] .tt-mn-i { color: #444444; }
[data-theme="light"] .tt-mn-i:hover, [data-theme="light"] .tt-mn-i.active { color: #111111; background: #e2e2e2; border-bottom-color: #111111; }
[data-theme="light"] .tt-mn-m { background: #f7f7f7; border-color: #d0d0d0; border-top-color: #111111; }
[data-theme="light"] .tt-mn-m a { color: #444444; border-bottom-color: #d0d0d0; }
[data-theme="light"] .tt-mn-m a:hover { background: #eeeeee; color: #111111; }

[data-theme="light"] .tt-subnav { background: #f7f7f7; border-bottom-color: #d0d0d0; }
[data-theme="light"] .tt-stab { color: #888888; }
[data-theme="light"] .tt-stab:hover { color: #111111; background: #eeeeee; }
[data-theme="light"] .tt-stab.active { color: #111111; border-bottom-color: #111111; }

[data-theme="light"] .modal-content { background: #f7f7f7 !important; border-color: #d0d0d0 !important; }
[data-theme="light"] .modal-header  { background: #eeeeee !important; border-bottom-color: #d0d0d0 !important; }
[data-theme="light"] .modal-footer  { background: #eeeeee !important; border-top-color: #d0d0d0 !important; }
[data-theme="light"] .modal-body    { background: #f7f7f7 !important; color: #444444 !important; }
[data-theme="light"] .modal-title   { color: #111111 !important; }
[data-theme="light"] .custom-close  { color: #888888 !important; }
[data-theme="light"] .custom-close:hover { background: rgba(204,0,34,.08) !important; color: #cc0022 !important; }

[data-theme="light"] .tt-tool-cluster { background: #eeeeee; border-color: #d0d0d0; }
[data-theme="light"] .tt-tool-btn { color: #444444; }
[data-theme="light"] .tt-tool-btn:hover { background: #d0d0d0; color: #111111; }

[data-theme="light"] .idx-chip { background: #eeeeee; border-color: #d0d0d0; }
[data-theme="light"] .idx-name { color: #888888; }
[data-theme="light"] .idx-val  { color: #111111; }

[data-theme="light"] ::-webkit-scrollbar-track { background: #eeeeee; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: #aaaaaa; }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #333333; }
[data-theme="light"] * { scrollbar-color: #aaaaaa #eeeeee; }


/* ════════════════════════════════════════════════════════════════
   42. BORDER FIX
════════════════════════════════════════════════════════════════ */

#tt-mainnav { border-top: none !important; }


/* ════════════════════════════════════════════════════════════════
   43. FORM ELEMENTS — input, select, textarea, button, label
   Covers: standalone forms, modal forms, and generic form wrap.
════════════════════════════════════════════════════════════════ */

/* ── Label ── */
.tt-label, label.tt-label {
  display: block; font-family: var(--font-mono);
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .7px; color: var(--text3); margin-bottom: 5px;
}

/* Modal label (Bootstrap uses .modal label) — unified with tt-label */
.modal label,
.modal .col-form-label {
  display: block !important;
  font-family: var(--font-mono) !important; font-size: 10px !important;
  font-weight: 600 !important; text-transform: uppercase !important;
  letter-spacing: .7px !important; color: var(--text3) !important; margin-bottom: 5px !important;
}

/* ── Form group ── */
.tt-form-group { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.tt-form-group:last-child { margin-bottom: 0; }

.tt-form-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.tt-form-row .tt-label { margin-bottom: 0; white-space: nowrap; flex-shrink: 0; min-width: 90px; }

/* ── Base input/select/textarea ── */
/* Applies to both .tt-* classed elements AND unclassed elements
   inside .tt-generic-form-wrap or .modal */
.tt-input, .tt-select, .tt-textarea,
input.tt-input, select.tt-select, textarea.tt-textarea,
.tt-generic-form-wrap input[type="text"],
.tt-generic-form-wrap input[type="number"],
.tt-generic-form-wrap input[type="email"],
.tt-generic-form-wrap input[type="password"],
.tt-generic-form-wrap input[type="date"],
.tt-generic-form-wrap input[type="datetime-local"],
.tt-generic-form-wrap input[type="tel"],
.tt-generic-form-wrap input[type="url"],
.tt-generic-form-wrap select,
.tt-generic-form-wrap textarea,
.modal .form-control,
.modal input[type=text], .modal input[type=password],
.modal input[type=email], .modal input[type=number],
.modal input[type=date], .modal input[type=datetime-local],
.modal select, .modal textarea {
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  border-radius: 5px !important;
  color: var(--text) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  padding: 6px 10px !important;
  width: 100%;
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
  -webkit-appearance: none;
  appearance: none;
}

/* Height — single-line */
.tt-input, .tt-select, input.tt-input, select.tt-select,
.tt-generic-form-wrap input:not(textarea),
.modal input:not(textarea) { height: 32px; }

/* Textarea */
.tt-textarea, textarea.tt-textarea,
.tt-generic-form-wrap textarea,
.modal textarea {
  height: auto !important; min-height: 80px !important;
  resize: vertical; line-height: 1.5;
}

/* Hover */
.tt-input:hover, .tt-select:hover, .tt-textarea:hover,
.tt-generic-form-wrap input:hover, .tt-generic-form-wrap select:hover, .tt-generic-form-wrap textarea:hover,
.modal .form-control:hover { border-color: var(--text3) !important; }

/* Focus */
.tt-input:focus, .tt-select:focus, .tt-textarea:focus,
.tt-generic-form-wrap input:focus, .tt-generic-form-wrap select:focus, .tt-generic-form-wrap textarea:focus,
.modal .form-control:focus, .modal input:focus, .modal select:focus, .modal textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px rgba(0,212,170,.12) !important;
  background: var(--bg4) !important;
  outline: none !important;
}

/* Disabled */
.tt-input:disabled, .tt-select:disabled, .tt-textarea:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }

/* Placeholder */
.tt-input::placeholder, .tt-textarea::placeholder,
.tt-generic-form-wrap input::placeholder, .tt-generic-form-wrap textarea::placeholder,
.modal input::placeholder, .modal textarea::placeholder { color: var(--text3); font-size: 11px; }

/* Select arrow */
.tt-select, select.tt-select,
.tt-generic-form-wrap select,
.modal select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%234a5f80' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  padding-right: 28px !important;
  cursor: pointer;
}

/* Date picker icon */
.tt-generic-form-wrap input[type="date"]::-webkit-calendar-picker-indicator,
.tt-generic-form-wrap input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.modal input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.5); cursor: pointer; opacity: .6; transition: opacity .15s; }
.tt-generic-form-wrap input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }

/* Sizes */
.tt-input-sm { height: 26px !important; font-size: 11px !important; padding: 4px 8px !important; }
.tt-input-lg { height: 38px !important; font-size: 13px !important; padding: 8px 12px !important; }

/* Input wrap (prefix/suffix) */
.tt-input-wrap { position: relative; display: flex; align-items: center; width: 100%; }
.tt-input-wrap .tt-input,
.tt-input-wrap input { padding-left: 24px !important; }
.tt-input-prefix { position: absolute; left: 9px; font-size: 12px; color: var(--text3); pointer-events: none; z-index: 1; }
.tt-input-suffix { position: absolute; right: 9px; font-size: 11px; color: var(--text3); pointer-events: none; }
.tt-currency-prefix { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--accent); left: 10px; }

/* Validation */
.tt-input.is-valid, .tt-select.is-valid, .tt-textarea.is-valid     { border-color: var(--gain) !important; }
.tt-input.is-invalid, .tt-select.is-invalid, .tt-textarea.is-invalid { border-color: var(--loss) !important; }
.tt-input.is-valid:focus, .tt-textarea.is-valid:focus     { box-shadow: 0 0 0 2px rgba(0,230,118,.12) !important; }
.tt-input.is-invalid:focus, .tt-textarea.is-invalid:focus { box-shadow: 0 0 0 2px rgba(255,77,106,.12) !important; }

.tt-field-hint         { font-family: var(--font-mono); font-size: 9.5px; color: var(--text3); margin-top: 3px; }
.tt-field-hint.error   { color: var(--loss); }
.tt-field-hint.success { color: var(--gain); }

/* ── Buttons ── */
.tt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 14px; border-radius: 5px;
  border: 1px solid var(--border); background: var(--bg4); color: var(--text2);
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .3px;
  cursor: pointer; text-decoration: none; white-space: nowrap; flex-shrink: 0; outline: none;
  transition: background .15s, color .15s, border-color .15s;
}
.tt-btn:hover  { background: var(--bg3); color: var(--text); border-color: var(--text3); }
.tt-btn:active { transform: scale(.98); }
.tt-btn:focus-visible { box-shadow: 0 0 0 2px rgba(0,212,170,.25); }
.tt-btn:disabled, .tt-btn[disabled] { opacity: .4; cursor: not-allowed; pointer-events: none; }

.tt-btn-primary { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.tt-btn-primary:hover { background: color-mix(in srgb, var(--accent) 85%, #fff); border-color: color-mix(in srgb, var(--accent) 85%, #fff); color: var(--bg); }
.tt-btn-danger  { background: var(--loss-bg); border-color: var(--loss); color: var(--loss); }
.tt-btn-danger:hover { background: var(--loss); color: #fff; }
.tt-btn-ghost   { background: transparent; border-color: transparent; color: var(--text3); }
.tt-btn-ghost:hover { background: var(--bg3); color: var(--text2); border-color: var(--border); }

.tt-btn-sm { height: 26px !important; padding: 0 10px !important; font-size: 10px !important; }
.tt-btn-lg { height: 38px !important; padding: 0 18px !important; font-size: 12px !important; }

.tt-btn-group        { display: inline-flex; align-items: center; gap: 6px; }
.tt-btn-group-joined { display: inline-flex; }
.tt-btn-group-joined .tt-btn { border-radius: 0; border-right-width: 0; }
.tt-btn-group-joined .tt-btn:first-child { border-radius: 5px 0 0 5px; }
.tt-btn-group-joined .tt-btn:last-child  { border-radius: 0 5px 5px 0; border-right-width: 1px; }

/* ── Form grid ── */
.tt-form-grid   { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 16px; }
.tt-form-grid-3 { grid-template-columns: repeat(3, 1fr); }
.tt-form-grid.span-2 > .tt-form-group:last-child { grid-column: span 2; }
.tt-form-group--full { grid-column: 1 / -1; }
@media (max-width: 720px) {
  .tt-form-grid, .tt-form-grid-3 { grid-template-columns: 1fr; }
  .tt-form-grid.span-2 > .tt-form-group:last-child, .tt-form-group--full { grid-column: span 1; }
}

/* ── Checkbox & Radio ── */
.tt-check-group, .tt-radio-group { display: flex; flex-direction: column; gap: 7px; }
.tt-check-group.inline, .tt-radio-group.inline { flex-direction: row; flex-wrap: wrap; gap: 12px; }
.tt-check, .tt-radio { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-family: var(--font-mono); font-size: 12px; color: var(--text2); user-select: none; }
.tt-check input[type="checkbox"], .tt-radio input[type="radio"] {
  width: 14px; height: 14px; border: 1px solid var(--border); border-radius: 3px;
  background: var(--bg3); appearance: none; -webkit-appearance: none;
  cursor: pointer; flex-shrink: 0; position: relative;
  transition: border-color .15s, background .15s;
}
.tt-radio input[type="radio"] { border-radius: 50%; }
.tt-check input[type="checkbox"]:checked,
.tt-radio  input[type="radio"]:checked  { background: var(--accent); border-color: var(--accent); }
.tt-check input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 3px; top: 1px; width: 5px; height: 8px; border: 2px solid var(--bg); border-top: none; border-left: none; transform: rotate(45deg); }
.tt-radio  input[type="radio"]:checked::after  { content: ''; position: absolute; left: 3px; top: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--bg); }
.tt-check:hover input, .tt-radio:hover input { border-color: var(--accent); }

/* ── Required indicator ── */
.tt-required-dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--loss); vertical-align: super; margin-left: 3px; flex-shrink: 0; }

/* ── Generic form wrap (Django auto-rendered forms) ── */
.tt-generic-form-wrap { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.tt-generic-fields    { padding: 20px 20px 8px; }

.tt-form-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; background: var(--bg3); border-top: 1px solid var(--border);
  gap: 12px; flex-wrap: wrap;
}
.tt-required-legend { display: flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 9.5px; color: var(--text3); }

/* ── Light theme overrides for forms ── */
[data-theme="light"] .tt-input,
[data-theme="light"] .tt-select,
[data-theme="light"] .tt-textarea,
[data-theme="light"] .tt-generic-form-wrap input,
[data-theme="light"] .tt-generic-form-wrap select,
[data-theme="light"] .tt-generic-form-wrap textarea,
[data-theme="light"] .modal .form-control,
[data-theme="light"] .modal input,
[data-theme="light"] .modal select,
[data-theme="light"] .modal textarea { background: #ffffff !important; border-color: #d0d0d0 !important; color: #111111 !important; }

[data-theme="light"] .tt-input:hover, [data-theme="light"] .tt-select:hover, [data-theme="light"] .tt-textarea:hover,
[data-theme="light"] .tt-generic-form-wrap input:hover, [data-theme="light"] .tt-generic-form-wrap select:hover { border-color: #888888 !important; }

[data-theme="light"] .tt-input:focus, [data-theme="light"] .tt-select:focus, [data-theme="light"] .tt-textarea:focus,
[data-theme="light"] .tt-generic-form-wrap input:focus, [data-theme="light"] .tt-generic-form-wrap select:focus, [data-theme="light"] .tt-generic-form-wrap textarea:focus,
[data-theme="light"] .modal input:focus, [data-theme="light"] .modal select:focus { border-color: #111111 !important; box-shadow: 0 0 0 2px rgba(0,0,0,.08) !important; background: #f7f7f7 !important; }

[data-theme="light"] .tt-input::placeholder, [data-theme="light"] .tt-textarea::placeholder,
[data-theme="light"] .tt-generic-form-wrap input::placeholder { color: #aaa; }

[data-theme="light"] .tt-btn { background: #eeeeee; border-color: #d0d0d0; color: #444444; }
[data-theme="light"] .tt-btn:hover { background: #e2e2e2; color: #111111; border-color: #999; }
[data-theme="light"] .tt-btn-primary { background: #111111 !important; border-color: #111111 !important; color: #fff !important; }
[data-theme="light"] .tt-btn-primary:hover { background: #333333 !important; border-color: #333333 !important; }

[data-theme="light"] .tt-select,
[data-theme="light"] .tt-generic-form-wrap select,
[data-theme="light"] .modal select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}
[data-theme="light"] .tt-check input[type="checkbox"],
[data-theme="light"] .tt-radio  input[type="radio"] { background: #fff; border-color: #d0d0d0; }
[data-theme="light"] .tt-label, [data-theme="light"] .modal label { color: #888888 !important; }
[data-theme="light"] .tt-generic-form-wrap input[type="date"]::-webkit-calendar-picker-indicator { filter: none; opacity: .5; }


/* ════════════════════════════════════════════════════════════════
   44. GENERIC FORM MODAL OVERRIDES
   Add class="tt-form-modal" to the .modal div for compact forms
════════════════════════════════════════════════════════════════ */

.tt-form-modal .modal-dialog { max-width: 520px !important; width: 100% !important; margin: 40px auto !important; }
.tt-form-modal .modal-body   { padding: 16px 16px 8px !important; }

/* Strip border/bg from form wrap inside modal */
.tt-form-modal .tt-generic-form-wrap { border: none !important; border-radius: 0 !important; background: transparent !important; }
.tt-form-modal .tt-generic-fields    { padding: 0 0 8px !important; }
.tt-form-modal .tt-form-footer       { margin: 0 -16px -8px !important; padding: 10px 16px !important; border-radius: 0 !important; }


/* ════════════════════════════════════════════════════════════════
   45. OPTION CHAIN PAGE LAYOUT
   .option_container  — flex row: chain left, graph right
   .optiondetail-div  — left pane (option chain table)
   .graphdetail       — right pane (OI graphs + sub-tabs)
════════════════════════════════════════════════════════════════ */

/* ── Outer wrapper: side-by-side ── */
.option_container {
  display: flex;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  min-height: 0;
}

/* ── Left pane — option chain ── */
.optiondetail-div {
  flex: 0 0 auto;          /* shrink to content width */
  width: 38%;              /* ~option-chain natural width */
  min-width: 0;
  overflow-x: auto;        /* horizontal scroll if table too wide */
  border-right: 1px solid var(--border);
  background: var(--bg);
}

/* Inner content wrapper — no extra padding */
.optiondetail-div .oddata {
  width: 100%;
}

/* ── Right pane — graphs + secondary tabs ── */
.graphdetail {
  flex: 1 1 0%;            /* takes remaining space */
  min-width: 0;
  overflow: hidden;
  background: var(--bg);
}

.graphdetail .gddata {
  width: 100%;
}

/* ── Responsive: stack vertically below 1100px ── */
@media (max-width: 1100px) {
  .option_container {
    flex-direction: column;
  }
  .optiondetail-div {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}

/* ════════════════════════════════════════════════════════
   46. MOBILE NAV DROPDOWN FIX
   Prevents .tt-mn-m dropdowns from overflowing off-screen
   ════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Reset fixed positioning — anchor to parent instead */
  .tt-mn-d {
    position: relative;
  }

  .tt-mn-m {
    position: absolute !important;
    top: 40px !important;        /* height of .tt-mn-i on mobile */
    left: 0 !important;          /* align to parent nav item */
    right: auto !important;
    min-width: 160px;
    max-width: 92vw;             /* never wider than screen */
    max-height: 50vh;
    z-index: 9999;
  }

  /* Last few items: flip dropdown to the left so it doesn't clip */
  .tt-mn-d:nth-last-child(-n+3) .tt-mn-m {
    left: auto !important;
    right: 0 !important;
  }
}

@media (max-width: 768px) {
  #tt-mainnav {
    overflow-x: auto;
    overflow-y: visible !important;  /* critical: allows dropdown to escape */
  }
  .tt-mn-d {
    position: static;               /* don't create a containing block */
  }
  .tt-mn-m {
    position: fixed !important;     /* escape the overflow:auto trap */
    top: 84px !important;
    left: auto !important;
    right: 4px !important;          /* pin to right edge, always visible */
    min-width: 160px;
    max-width: calc(100vw - 8px);
    z-index: 99999;
  }
}

/* ════════════════════════════════════════════════════════
   46. GLOBAL BRIGHTNESS BOOST — dark theme
   Lifts text2 and text3 so body content reads more clearly
   ════════════════════════════════════════════════════════ */

:root,
[data-theme="dark"] {
  --text2: #b8c8e8;   /* was #8899bb — noticeably brighter */
  --text3: #7a90b8;   /* was #4a5f80 — readable instead of dim */
}

[data-theme="blue"] {
  --text2: #90b8ee;   /* was #6090cc */
  --text3: #507098;   /* was #304870 */
}

[data-theme="gray"] {
  --text2: #a8b0d0;   /* was #7880a0 */
  --text3: #6870a0;   /* was #454860 */
}

[data-theme="green"] {
  --text2: #7ab8a0;   /* was #4a9070 */
  --text3: #4a7860;   /* was #2a5040 */
}

[data-theme="amber"] {
  --text2: #cca858;   /* was #aa8030 */
  --text3: #907040;   /* was #6a5020 */
}