/* ==========================================================================
   theme.css — light "InvestIQ"-style look for every page of the app
   ==========================================================================
   Loaded by dashboard.html, app.html and options_engine.html AFTER their own
   styles. Two layers:

     1. TOKENS   the colour/font variables every page already uses
                 (--bg, --panel, --saffron …). Changing them here re-colours
                 cards, tables, pills AND the canvas charts, which read the
                 same variables.
     2. SHAPES   rounder cards, pill-shaped tabs and buttons, softer tables.
                 Prefixed with "html body" so they beat the per-page style
                 blocks that appear later in app.html.

   Dark mode: the moon button in the top bar (or the side menu) switches it.
   The dark colours are the block under "dark mode" below.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/* ---------------------------------------------------------------- 1. tokens */
:root, html:root {
  --bg:       #EFEFED;   /* page background, warm light grey            */
  --panel:    #FFFFFF;   /* cards                                       */
  --panel2:   #F5F4F2;   /* tiles inside cards, inputs, table headers   */
  --line:     #E7E5E1;   /* hairlines                                   */
  --text:     #151515;
  --muted:    #6F6F6F;
  --dim:      #A09E9A;

  --saffron:  #F25A1D;   /* the orange accent (kept the old name so     */
  --accent:   #F25A1D;   /*  every page picks it up without edits)      */
  --accent-soft: rgba(242, 90, 29, .10);
  --ink:      #151515;   /* active pill / dark buttons                  */
  --cocoa:    #3B2416;   /* the dark-brown highlight card               */

  --buy:      #18A058;   --buy-dim:  rgba(24, 160, 88, .10);
  --sell:     #E5484D;   --sell-dim: rgba(229, 72, 77, .10);
  --wait:     #8E8C88;   --wait-dim: rgba(142, 140, 136, .12);

  --disp: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  /* numbers keep their column alignment via tabular figures, so the mono
     font is no longer needed for tables */
  --mono: 'Manrope', 'Segoe UI', system-ui, sans-serif;

  --bar-off:  #E6DFD3;   /* the "loss day" bar colour                    */
  --glass:    rgba(255, 255, 255, .86);   /* bottom bar / drawer backdrop */

  --r-card: 20px;
  --r-tile: 14px;
  --r-pill: 999px;
  --shadow: 0 1px 2px rgba(21, 21, 21, .04);
  color-scheme: light;
}

/* ---------------------------------------------------------------- dark mode
   Switched on by /ui/boot.js, which sets <html data-theme="dark"> before the
   page paints (your choice is remembered; first visit follows the phone or
   PC setting). Only the colours change — every page reads these tokens. */
html[data-theme="dark"]:root {
  --bg:       #0E0E10;
  --panel:    #18181B;
  --panel2:   #222226;
  --line:     #2C2C31;
  --text:     #F1F1EF;
  --muted:    #A1A1A6;
  --dim:      #6E6E74;

  --saffron:  #FF6B2C;
  --accent:   #FF6B2C;
  --accent-soft: rgba(255, 107, 44, .16);
  --ink:      #3A3A41;
  --cocoa:    #2A1A10;

  --buy:      #2FBF71;   --buy-dim:  rgba(47, 191, 113, .16);
  --sell:     #F2555A;   --sell-dim: rgba(242, 85, 90, .16);
  --wait:     #8E8C88;   --wait-dim: rgba(142, 140, 136, .18);

  --bar-off:  #3B342D;
  --glass:    rgba(24, 24, 27, .88);
  --shadow:   none;
  color-scheme: dark;
}
html[data-theme="dark"] body .tab:hover,
html[data-theme="dark"] body nav a:hover { border-color: #45454C; }

html body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--disp);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
html body .wrap { padding-top: 24px; }
html body a { color: var(--accent); }
html body ::selection { background: var(--accent-soft); }

/* ---------------------------------------------------------------- header */
html body header { margin-bottom: 18px; }
html body .brand h1 { font-weight: 800; letter-spacing: -.03em; font-size: 22px; }
html body .brand h1 span { color: var(--accent); }
html body .brand .sub,
html body .stamp { font-family: var(--disp); color: var(--muted); }

/* ---------------------------------------------------------------- nav pills */
html body .tabs,
html body nav {
  gap: 8px;
}
html body .tab,
html body nav a {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 9px 16px;
  font-weight: 600;
  font-size: 13px;
  box-shadow: var(--shadow);
  transition: background .15s, color .15s, border-color .15s;
  text-decoration: none;
}
html body .tab:hover,
html body nav a:hover { border-color: #D6D3CE; }
html body .tab.on,
html body nav a.on,
html body .tab[aria-current="page"] {
  background: var(--ink);
  color: #FFFFFF;
  border-color: var(--ink);
}

/* ---------------------------------------------------------------- buttons */
html body button.rescan,
html body .btn {
  border-radius: var(--r-pill);
  font-family: var(--disp);
  font-weight: 700;
  padding: 10px 20px;
}
html body button.rescan:not([style*="background"]),
html body .btn:not(.ghost):not(.danger):not(.seg):not(.seg2) {
  background: var(--accent);
  color: #FFFFFF;
}
html body .btn.ghost {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
}
html body .btn.danger { background: var(--sell); color: #FFFFFF; }
html body .btn.seg.on,
html body .btn.seg2.on,
html body .seg button.on {
  background: var(--ink);
  color: #FFFFFF;
  border-color: var(--ink);
}
html body .seg button { border-radius: var(--r-pill); }

/* ---------------------------------------------------------------- cards */
html body .card,
html body .d2-card,
html body .dsh-card,
html body .hero-card,
html body .sec-card,
html body .co-card,
html body .profcard,
html body .rd-panel,
html body .tbl-wrap,
html body .drawer,
html body .dbox,
html body .gs-box {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
}
html body .card { padding: 20px 22px; }
html body .card h2 {
  color: var(--text);
  text-transform: none;
  letter-spacing: -.01em;
  font-size: 16px;
  font-weight: 700;
}

/* tiles inside cards: stat boxes, KPIs */
html body .stat,
html body .mc-stat,
html body .co-kpi,
html body .dk-nums > div {
  background: var(--panel2);
  border: 0;
  border-radius: var(--r-tile);
}
html body .stat .lbl,
html body .mc-stat .lbl {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  color: var(--muted);
}
html body .stat .val { font-family: var(--disp); font-weight: 600; letter-spacing: -.02em; }

/* the first stat on the options page gets the dark-brown highlight card
   from the design, so the engine's on/off state is the thing you see first */
html body #stats .stat:first-child {
  background: var(--cocoa);
}
html body #stats .stat:first-child .lbl { color: rgba(255, 255, 255, .6); }
html body #stats .stat:first-child .val { color: #FFFFFF; }

/* notes / call-outs */
html body .note,
html body .closed-note {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 0;
  border-radius: var(--r-tile);
  box-shadow: var(--shadow);
}

/* ---------------------------------------------------------------- tables */
html body table { font-family: var(--disp); }
html body th {
  background: var(--panel);
  color: var(--dim);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  border-bottom: 1px solid var(--line);
}
html body td { border-bottom: 1px solid var(--line); }
html body tr:last-child td { border-bottom: 0; }
html body tr.stock:hover td,
html body tr.chartable:hover { background: var(--panel2); }

/* ---------------------------------------------------------------- pills/tags */
html body .pill {
  border-radius: var(--r-pill);
  font-weight: 600;
}

/* ---------------------------------------------------------------- forms */
html body input,
html body select,
html body textarea {
  background: var(--panel2);
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--text);
  font-family: var(--disp);
}
html body input:focus,
html body select:focus,
html body textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--panel);
}
html body label { color: var(--muted); }

/* collapsible groups on the options settings */
html body details.grp {
  background: var(--panel2);
  border: 0;
  border-radius: var(--r-tile);
}

/* ---------------------------------------------------------------- charts */
html body .chartwrap canvas {
  background: var(--panel);
  border-radius: var(--r-tile);
}
html body .bar { background: var(--panel2); }
html body .bar i { background: var(--accent); opacity: .85; }

/* ---------------------------------------------------------------- misc */
html body .whyrow {
  background: var(--panel2);
  border: 0;
  border-left: 3px solid var(--dim);
  border-radius: var(--r-tile);
}
html body .whyrow.go   { border-left-color: var(--buy); }
html body .whyrow.wait { border-left-color: var(--accent); }
html body .whyrow.bad  { border-left-color: var(--sell); }

html body .navmenu,
html body .ribbon {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-tile);
}

/* phones */
@media (max-width: 720px) {
  html body .card { padding: 16px; border-radius: 18px; }
  html body .tab, html body nav a { padding: 8px 13px; font-size: 12px; }
}