/* Yukti Quant shared design tokens (2026-08-06 redesign, Phase 0)
   Single source of truth for every page that extends base.html.
   Dark values are lifted verbatim from base.html's old inline :root
   (unchanged - they were already reconciled against the Android app's
   ui/theme/Color.kt on 2026-07-21, confirmed byte-identical again while
   building this file: Background/Surface/SurfaceRaised/Border/TextPrimary/
   TextMuted/TextFaint/Accent/Info/Danger/Warning/CueMixed/CueFought all
   match --bg/--card/--raised/--border/--text/--muted/--faint/--green/
   --blue/--red/--yellow/--purple/--orange exactly).
   Light values are new (Android has no light scheme yet either - see
   ui/theme/Theme.kt Phase 0 companion change) - same hue identity as
   dark, adjusted for contrast on a white surface. --faint in particular
   is NOT a lightened copy of dark's --faint (that would print too dark
   and collide with --text-dim); it's picked to sit visibly lighter than
   --muted the way dark's --faint sits visibly darker than --muted. */

:root, :root[data-theme="dark"]{
  --bg:#0a0e14; --card:#131a24; --raised:#1a2230; --inset:#0d1218;
  --border:#232c38; --text:#e9eef3; --text-dim:#a7b2c0; --muted:#6b7785;
  --faint:#4d5866; --grey-cue:#8b95a1;
  --green:#26d07c; --green-dim:rgba(38,208,124,.15);
  --red:#ff5c72; --red-dim:rgba(255,92,114,.15);
  --yellow:#ffb454; --yellow-dim:rgba(255,180,84,.15);
  --blue:#4c9eff; --blue-dim:rgba(76,158,255,.15);
  --purple:#b98cff; --purple-dim:rgba(185,140,255,.15);
  --orange:#ff9142; --orange-dim:rgba(255,145,66,.15);
  --shadow: 0 1px 3px rgba(0,0,0,.4);
  --hairline: rgba(255,255,255,.03);
}

:root[data-theme="light"]{
  --bg:#f4f6f8; --card:#ffffff; --raised:#eef1f5; --inset:#e8ecf1;
  --border:#dde2e8; --text:#12161f; --text-dim:#48505c; --muted:#67707c;
  --faint:#98a1ac; --grey-cue:#5c6570;
  --green:#12a35e; --green-dim:rgba(18,163,94,.12);
  --red:#e0334f; --red-dim:rgba(224,51,79,.10);
  --yellow:#b5790f; --yellow-dim:rgba(181,121,15,.12);
  --blue:#1f6fd6; --blue-dim:rgba(31,111,214,.10);
  --purple:#7c4fe0; --purple-dim:rgba(124,79,224,.10);
  --orange:#d1650f; --orange-dim:rgba(209,101,15,.12);
  --shadow: 0 1px 3px rgba(20,25,35,.08);
  --hairline: rgba(0,0,0,.05);
}

/* Type scale - matches Android's Fade2pmTypography (ui/theme/Type.kt)
   size-for-size, so a stat tile reads the same size on phone and web. */
:root{
  --fs-display:30px; --fs-h1:24px; --fs-h2:19px; --fs-h3:15px;
  --fs-body:13px; --fs-label:10.5px; --fs-caption:11.5px;

  /* Spacing scale - matches Android's Spacing xxs/xs/sm/md/lg/xl/xxl/xxxl
     (ui/theme/Spacing.kt "base 8 steps"). Android additionally has 6/10/14
     gap-filler steps for its own denser mobile rhythm - deliberately not
     mirrored here, per Spacing.kt's own docstring: those are an
     Android-specific frequency-driven addition, not a cross-platform token. */
  --sp-1:2px; --sp-2:4px; --sp-3:8px; --sp-4:12px;
  --sp-5:16px; --sp-6:24px; --sp-7:36px; --sp-8:56px;

  /* Corner radius - matches Android's Radius sm/md/lg/xl (ui/theme/Spacing.kt) */
  --r-sm:6px; --r-md:8px; --r-lg:10px; --r-xl:14px;
}

*{box-sizing:border-box}
body{
  background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:var(--fs-body);
  margin:0;
  transition:background .15s ease,color .15s ease;
}
a{color:inherit}
h1,h2,h3,h4{margin:0}

/* ---- Status pills - one lifecycle-stage vocabulary, used everywhere
   (home strategy grid, strategy detail header, experiments tags) instead
   of each page inventing its own tag styling. ---- */
.pill{
  display:inline-flex; align-items:center; gap:4px;
  font-size:var(--fs-label); font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; padding:3px 8px; border-radius:999px;
  line-height:1.4;
}
.pill-live{background:var(--green-dim); color:var(--green)}
.pill-paper{background:var(--blue-dim); color:var(--blue)}
.pill-research{background:var(--yellow-dim); color:var(--yellow)}
/* .pill-draft/.pill-disabled removed 2026-08-06 - "draft"/"disabled"
   dropped from ALLOWED_STATUSES entirely (owner: "draft not needed...
   three only research, paper and then live"), not just hidden. */

/* ---- Shared component patterns ---- */
.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:var(--sp-5);
}
.stat-tile{
  background:var(--raised); border:1px solid var(--border);
  border-radius:var(--r-md); padding:var(--sp-4);
}
.stat-tile .label{
  font-size:var(--fs-label); font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; color:var(--muted); margin-bottom:4px;
}
.stat-tile .value{font-size:var(--fs-h2); font-weight:700; font-variant-numeric:tabular-nums}
.sparkline-card{padding:0; overflow:hidden}

.trade-table{width:100%;border-collapse:collapse;font-size:var(--fs-caption);font-variant-numeric:tabular-nums}
.trade-table th{
  text-align:left; color:var(--muted); font-weight:700; font-size:var(--fs-label);
  text-transform:uppercase; letter-spacing:.03em; padding:6px 8px;
  border-bottom:1px solid var(--border);
}
.trade-table td{padding:6px 8px; border-bottom:1px solid var(--border)}
.tbl-wrap{overflow-x:auto}

.pos-green{color:var(--green)}
.pos-red{color:var(--red)}
.muted{color:var(--muted)}
.faint{color:var(--faint)}

/* ---- Persistent nav (Phase 1) ---- */
/* Always-visible mobile bar (Phase 1 fix, 2026-08-06) - lives OUTSIDE
   .app-nav so its hamburger is reachable even while the nav itself is
   translated off-screen. Hidden entirely on desktop, where the sidebar
   is always visible and needs no toggle. */
.nav-mobile-bar{
  display:none; align-items:center; gap:10px; padding:10px 14px;
  background:var(--card); border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:110;
}
.nav-mobile-bar .nav-logo{flex:1;}

.app-nav{
  position:fixed; top:0; left:0; bottom:0; width:220px; z-index:100;
  background:var(--card); border-right:1px solid var(--border);
  display:flex; flex-direction:column; overflow-y:auto;
  transform:translateX(-100%); transition:transform .18s ease;
}
.nav-top{
  display:flex; align-items:center; gap:8px; padding:var(--sp-4) var(--sp-5);
  border-bottom:1px solid var(--border); flex-shrink:0;
}
.nav-logo{font-weight:800; font-size:16px; letter-spacing:-.02em; text-decoration:none; color:var(--text); flex:1;}
.nav-logo span{color:var(--blue)}
.nav-hamburger{
  display:block; background:none; border:none; color:var(--text);
  font-size:20px; cursor:pointer; padding:0 4px 0 0;
}
.nav-conn{display:flex; align-items:center}
.nav-clock{
  display:flex; flex-direction:column; align-items:flex-end;
  line-height:1.25; flex-shrink:0;
}
.nav-date{
  font-size:10px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted);
}
.nav-time{
  font-family:ui-monospace,"SF Mono",Consolas,monospace; font-size:13px; color:var(--text-dim);
}
/* Shared conn-dot (moved here from home.html 2026-08-06 - it's used by
   nav on every page now, not just home, and previously had no styling
   at all outside home.html's own page-specific CSS block). */
.conn-dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex-shrink:0;}
.conn-dot.green{background:var(--green);animation:pulse 1.6s infinite;}
.conn-dot.green-idle{background:var(--green);}
.conn-dot.red{background:var(--red);}
.conn-dot.grey{background:var(--muted);}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(38,208,124,.55);}
  70%{box-shadow:0 0 0 7px rgba(38,208,124,0);}
  100%{box-shadow:0 0 0 0 rgba(38,208,124,0);}
}
/* Shared download-app link (moved here from home.html 2026-08-06 -
   now lives in nav-bottom, part of the collapsible menu). */
.dl-app-link{
  display:block; color:var(--blue); text-decoration:none; font-size:12.5px;
  border:1px solid var(--border); border-radius:var(--r-md); padding:8px 12px;
  margin-bottom:8px; text-align:center; font-weight:600;
}
.dl-app-link:hover{border-color:var(--blue);}
.dl-app-link #dl-app-version{color:var(--muted); margin-left:4px; font-weight:400;}
.nav-links{flex:1; padding:var(--sp-4) var(--sp-3); display:flex; flex-direction:column; gap:2px;}
.nav-link, .nav-sublink{
  display:block; padding:8px 12px; border-radius:var(--r-md);
  color:var(--text-dim); text-decoration:none; font-size:13px; font-weight:600;
}
.nav-link:hover, .nav-sublink:hover{background:var(--raised); color:var(--text)}
.nav-link.active, .nav-sublink.active, .nav-group-label.active{background:var(--blue-dim); color:var(--blue)}
.nav-group{margin-top:6px}
.nav-group-label{
  padding:6px 12px; font-size:var(--fs-label); font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; color:var(--muted); border-radius:var(--r-md);
}
.nav-group .nav-sublink{padding-left:24px; font-size:12.5px; font-weight:500}
.nav-bottom{padding:var(--sp-4) var(--sp-5); border-top:1px solid var(--border); flex-shrink:0;}
.nav-theme-toggle{
  width:100%; display:flex; align-items:center; gap:8px; background:var(--raised);
  border:1px solid var(--border); color:var(--text); border-radius:var(--r-md);
  padding:8px 12px; font-size:12.5px; font-weight:600; cursor:pointer;
}
.nav-theme-toggle:hover{border-color:var(--blue)}
.nav-scrim{display:none;}
/* Search bar + nav-bottom logout row (2026-08-06, owner: "cntr k search
   remove and some search bar needed" / "these both logout should go in
   side bar"). Search bar is a button styled to look like an input - it
   opens the real cmdk overlay (one real input, not two) rather than
   duplicating search logic. */
.nav-search-btn{
  width:calc(100% - var(--sp-3) * 2); margin:0 var(--sp-3) 4px; display:flex; align-items:center; gap:8px;
  background:var(--inset); border:1px solid var(--border); color:var(--muted);
  border-radius:var(--r-md); padding:8px 12px; font-size:12.5px; font-weight:500;
  cursor:pointer; text-align:left; font-family:inherit;
}
.nav-search-btn:hover{border-color:var(--blue); color:var(--text-dim);}
.nav-search-icon{font-size:12px; flex-shrink:0;}
.nav-logout-row{margin-top:10px; padding-top:10px; border-top:1px solid var(--border); text-align:center; font-size:11.5px;}
.nav-bottom-link{color:var(--blue); text-decoration:none;}
.nav-bottom-link:hover{text-decoration:underline;}

@media (min-width:900px){
  .app-nav{transform:none;}
  .nav-hamburger{display:none;}
  .app-main{margin-left:220px;}
}
@media (max-width:899px){
  .nav-mobile-bar{display:flex;}
  .app-nav.open{transform:translateX(0);}
  .app-nav.open ~ .nav-scrim{display:block; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:99;}
}

/* ---- Strategy grid (Phase 3/5) - shared by /strategies and Home ---- */
.sg-section{margin-bottom:var(--sp-6);}
.sg-section-label{
  font-size:var(--fs-label); font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--muted); margin-bottom:var(--sp-3);
  display:flex; align-items:center; gap:6px;
}
.sg-count{
  background:var(--raised); color:var(--text-dim); border-radius:999px;
  padding:1px 7px; font-size:10.5px;
}
.sg-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:var(--sp-4);}
.sg-card{
  display:block; background:var(--card); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:var(--sp-4); text-decoration:none; color:var(--text);
  transition:border-color .12s ease;
}
.sg-card:hover{border-color:var(--blue);}
.sg-card-top{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:var(--sp-4);}
.sg-card-name{font-weight:700; font-size:var(--fs-h3);}
.sg-card-stats{display:flex; flex-direction:column; gap:6px;}
.sg-card-stats > div{display:flex; align-items:center; justify-content:space-between;}
.sg-card-stats .label{font-size:var(--fs-label); font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.03em;}
.sg-card-stats .value{font-size:var(--fs-body); font-weight:700; font-variant-numeric:tabular-nums;}

/* ---- Strategy detail page tabs (Phase 3) ---- */
.sd-header{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-4); margin-bottom:var(--sp-5);}
.sd-title{font-size:var(--fs-h1); font-weight:800; display:flex; align-items:center; gap:10px;}
.sd-stat-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:var(--sp-3); margin-bottom:var(--sp-5);}
.sd-tabs{display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:var(--sp-5); overflow-x:auto;}
.sd-tab{
  background:none; border:none; color:var(--muted); font-weight:700; font-size:13px;
  padding:10px 14px; cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap;
}
.sd-tab.active{color:var(--text); border-bottom-color:var(--blue);}
.sd-tab:hover{color:var(--text);}
.sd-panel{display:none;}
.sd-panel.active{display:block;}
.sd-empty{color:var(--faint); font-size:13px; padding:var(--sp-6) 0; text-align:center;}
.sd-chart-wrap{position:relative; height:220px; margin-bottom:var(--sp-4);}
.sd-capital-form{display:flex; gap:8px; align-items:center; margin-top:var(--sp-3);}
.sd-capital-form input{
  background:var(--inset); border:1px solid var(--border); color:var(--text);
  border-radius:var(--r-md); padding:7px 10px; font-size:13px; width:140px;
}
.sd-capital-form button{
  background:var(--blue); color:#04101f; border:none; border-radius:var(--r-md);
  padding:7px 14px; font-size:12.5px; font-weight:700; cursor:pointer;
}
.sd-status-select{
  background:var(--raised); color:var(--text); border:1px solid var(--border);
  border-radius:var(--r-md); padding:5px 8px; font-size:12px; font-weight:600; cursor:pointer;
}
.sd-status-select:disabled{opacity:.55; cursor:not-allowed;}

/* ---- Hypothesis accordion (Phase 7 mid-execution addition) ---- */
.sd-hyp-group{margin-bottom:var(--sp-3);}
.sd-hyp-group-header{
  width:100%; display:flex; align-items:center; gap:8px; background:var(--card);
  border:1px solid var(--border); border-radius:var(--r-md); padding:10px 12px;
  cursor:pointer; text-align:left;
}
.sd-hyp-group-header:hover{border-color:var(--blue);}
.sd-hyp-chevron{margin-left:auto; color:var(--muted); transition:transform .15s ease; font-size:16px;}
.sd-hyp-group-header.open .sd-hyp-chevron{transform:rotate(90deg);}
.sd-hyp-rows{display:none; padding:6px 4px 4px;}
.sd-hyp-rows.open{display:block;}
.sd-hyp-row{
  padding:8px 10px; border-bottom:1px solid var(--border); cursor:pointer;
}
.sd-hyp-row:last-child{border-bottom:none;}
.sd-hyp-row-top{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.sd-hyp-title{font-size:13px; font-weight:600;}
.sd-hyp-headline{
  font-size:12px; color:var(--text-dim); margin-top:4px; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}
.sd-hyp-row.expanded .sd-hyp-headline{-webkit-line-clamp:unset; overflow:visible;}

/* ---- Shared buttons/process-rows/confirm-modal/toast (moved here from
   home.html 2026-08-06, owner: "this live start should go to stratagy
   page not on home screen") - the Engine Status card (Switch to Live/
   Stop/paper-strategy checklist) moved to strategy_detail.html
   (fade_2pm_nifty only), so these need to be available on both pages
   now instead of being home-page-only. ---- */
.btn{border:none;border-radius:var(--r-md);padding:9px;font-size:12.5px;font-weight:700;cursor:pointer;transition:filter .15s ease,transform .1s ease;text-decoration:none;display:block;text-align:center;}
.btn:active{transform:scale(.98);}
.btn.green{background:var(--green);color:#04150c;}
.btn.red{background:var(--red);color:#210007;}
.btn.blue{background:var(--blue);color:#04101c;}
.btn.grey{background:var(--border);color:var(--text);}
.btn:disabled{opacity:.5;cursor:not-allowed;}
.btn-stop-secondary{background:transparent;border:1.5px solid var(--red);color:var(--red);}
.btn-row{display:flex;gap:10px;}
.btn-row>*{flex:1;}

.proc-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid var(--border);font-size:12.5px;}
.proc-row:last-of-type{border-bottom:none;}
.proc-left{display:flex;align-items:center;gap:8px;}

#confirm-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.6);z-index:100;padding:20px;}
#confirm-modal .modal-card{background:var(--card);border:1px solid var(--red);border-radius:14px;padding:22px;max-width:340px;width:100%;}
#confirm-modal.variant-green .modal-card{border-color:var(--green);}
#confirm-modal.variant-blue .modal-card{border-color:var(--blue);}
#confirm-modal h3{color:var(--red);margin:0 0 10px;font-size:16px;}
#confirm-modal.variant-green h3{color:var(--green);}
#confirm-modal.variant-blue h3{color:var(--blue);}
#confirm-modal p{font-size:13.5px;color:var(--text-dim);line-height:1.5;margin:0 0 16px;}

#toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);
  background:var(--card);border:1px solid var(--border);color:var(--text);
  padding:10px 18px;border-radius:10px;font-size:13px;opacity:0;pointer-events:none;
  transition:all .25s ease;z-index:200;box-shadow:0 8px 24px rgba(0,0,0,.4);max-width:88vw;text-align:center;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

.perf-link{color:var(--blue);text-decoration:none;font-weight:600;}
.perf-link:hover{text-decoration:underline;}