/* TradeBridge — navy/blue console theme.
   Chart colours dataviz validator se paas kiye gaye (dark mode, surface #121a2b):
   lightness band, chroma floor, CVD separation, contrast — sab PASS. */

:root {
  --page:        #0b1220;
  --surface:     #121a2b;
  --surface-2:   #172236;
  --surface-3:   #1d2a42;
  --line:        #1e2a41;
  --line-soft:   #182339;

  --ink:         #e8eef8;
  --ink-2:       #93a3bd;
  --ink-3:       #6b7c96;

  --brand:       #3b82f6;
  --brand-dim:   rgba(59, 130, 246, .14);
  --series-1:    #3987e5;   /* validated chart series */

  --good:        #22c55e;   /* 7.63:1 on card surface */
  --bad:         #f87171;   /* 6.28:1 */
  --warn:        #fbbf24;   /* 10.41:1 */
  --violet:      #a78bfa;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;

  --sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);

  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .22);

  /* Theme system (19-Aug) — jo rang pehle jagah-jagah hardcode the, ab token
     hain taaki har theme sirf yahi block override kare. Default = yahi Navy. */
  --sidebar:            #0c1424;
  --scroll-thumb:       #2b3a55;
  --scroll-thumb-hover: #3a4d6e;
  --logo-a: #4d8ff7;  --logo-b: #2563eb;
  --grad-a: #6366f1;  --grad-b: #3b82f6;
  --hero-a: #17264a;
  --legend: #7ab3ff;
  --btn-primary-hover: #2f74e0;
  --on-brand: #fff;
  --bg-input: var(--surface-2);
  --text: var(--ink);
  --border: var(--line);
}

/* ---------------------------------------------------------------- themes
   Char theme (19-Aug, Rahul ka ask — research: trading UIs dark-first, P&L
   green/red semantics har theme me SAME). Default Navy upar `:root` me hai;
   Reset ka matlab: data-theme attribute hatao, Navy wapas.

   Midnight — near-black OLED base (#0b0e13 class), GitHub-dark jaisi palette. */
html[data-theme="midnight"] {
  --page: #0b0e13; --surface: #11151c; --surface-2: #161b24; --surface-3: #1c222d;
  --line: #212835; --line-soft: #181d26;
  --ink: #e6edf3; --ink-2: #8b98a9; --ink-3: #626f80;
  --brand: #2f81f7; --brand-dim: rgba(47, 129, 247, .15); --series-1: #4c8fef;
  --good: #3fb950; --bad: #f85149; --warn: #d29922; --violet: #bc8cff;
  --sidebar: #080b10;
  --scroll-thumb: #29313d; --scroll-thumb-hover: #39434f;
  --logo-a: #58a6ff; --logo-b: #1f6feb;
  --grad-a: #7c72ff; --grad-b: #2f81f7;
  --hero-a: #101a2c;
  --legend: #79b8ff;
  --btn-primary-hover: #2a75e8;
}

/* Day — saaf light, din ke office use ke liye. Good/bad jaan-boojh kar
   gehre (#16a34a/#dc2626): halka green white par padha nahi jaata. */
html[data-theme="day"] {
  --page: #eef1f6; --surface: #ffffff; --surface-2: #f2f5fa; --surface-3: #e9edf4;
  --line: #d7dee9; --line-soft: #e5eaf2;
  --ink: #18202e; --ink-2: #4d5a70; --ink-3: #78849a;
  --brand: #2563eb; --brand-dim: rgba(37, 99, 235, .10); --series-1: #2563eb;
  --good: #16a34a; --bad: #dc2626; --warn: #b45309; --violet: #7c3aed;
  --sidebar: #ffffff;
  --scroll-thumb: #c2cddd; --scroll-thumb-hover: #a8b6ca;
  --logo-a: #4d8ff7; --logo-b: #2563eb;
  --grad-a: #6366f1; --grad-b: #3b82f6;
  --hero-a: #dbe6f8;
  --legend: #2563eb;
  --btn-primary-hover: #1d4fd8;
  --shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 8px 24px rgba(16, 24, 40, .10);
}

/* Neon Gradient (19-Aug, Rahul ka reference image) — deep navy-black cards,
   purple->blue gradient accents, halki glow. Gradient/glow ke asli effects
   neeche alag rules me hain (sirf isi theme par). */
html[data-theme="neon"] {
  --page: #090d1a; --surface: #10162a; --surface-2: #151c33; --surface-3: #1b2340;
  --line: #232c4d; --line-soft: #1a2138;
  --ink: #eef0ff; --ink-2: #9aa3c7; --ink-3: #6a7398;
  --brand: #8b5cf6; --brand-dim: rgba(139, 92, 246, .18); --series-1: #a78bfa;
  --good: #34d399; --bad: #fb7185; --warn: #fbbf24; --violet: #c084fc;
  --sidebar: #070a14;
  --scroll-thumb: #2b3357; --scroll-thumb-hover: #3a4472;
  --logo-a: #a855f7; --logo-b: #4f46e5;
  --grad-a: #a855f7; --grad-b: #3b82f6;
  --hero-a: #1b1f4a;
  --legend: #b9a8ff;
  --btn-primary-hover: #7c4df1;
}
html[data-theme="neon"] .nav button.active,
html[data-theme="neon"] .btn-primary {
  background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
  border-color: transparent;
  box-shadow: 0 4px 18px rgba(139, 92, 246, .45);
}
html[data-theme="neon"] .btn-primary:hover {
  background: linear-gradient(135deg, #b06cff, #4f8bff);
}
html[data-theme="neon"] .card,
html[data-theme="neon"] .kpi { border-radius: 14px; }
html[data-theme="neon"] .brand .logo {
  box-shadow: 0 0 18px rgba(168, 85, 247, .55);
}

/* Aurora Neon (19-Aug, Rahul ka doosra reference) — near-black par cyan/
   magenta aurora glow, Samsung edge-lighting jaisi feel. Glow PAGE ke
   background me hai — cards saaf rehte hain, padhne me koi rukavat nahi. */
html[data-theme="aurora"] {
  --page: #05070d; --surface: #0b0f1a; --surface-2: #101624; --surface-3: #161e30;
  --line: #1f2940; --line-soft: #141b2b;
  --ink: #e8f4ff; --ink-2: #8fa5c5; --ink-3: #5f7292;
  --brand: #22d3ee; --brand-dim: rgba(34, 211, 238, .15); --series-1: #22d3ee;
  --good: #34d399; --bad: #fb7185; --warn: #fbbf24; --violet: #e879f9;
  --sidebar: #04060b;
  --scroll-thumb: #223048; --scroll-thumb-hover: #2f4160;
  --logo-a: #22d3ee; --logo-b: #a855f7;
  --grad-a: #e879f9; --grad-b: #22d3ee;
  --hero-a: #0e1b33;
  --legend: #7dd3fc;
  --btn-primary-hover: #0fb8d4;
  --on-brand: #04141a;
}
html[data-theme="aurora"] body {
  background:
    radial-gradient(1100px 750px at 88% -12%, rgba(168, 85, 247, .16), transparent 62%),
    radial-gradient(950px 700px at -8% 104%, rgba(34, 211, 238, .13), transparent 60%),
    radial-gradient(800px 500px at 55% 115%, rgba(232, 121, 249, .07), transparent 55%),
    var(--page);
  background-attachment: fixed;
}
html[data-theme="aurora"] .topbar,
html[data-theme="aurora"] .sidebar { background: transparent; }
html[data-theme="aurora"] .nav button.active {
  background: linear-gradient(135deg, rgba(34, 211, 238, .9), rgba(168, 85, 247, .85));
  box-shadow: 0 4px 18px rgba(34, 211, 238, .35);
}
html[data-theme="aurora"] .brand .logo {
  background: linear-gradient(140deg, #22d3ee, #a855f7);
  box-shadow: 0 0 18px rgba(34, 211, 238, .5);
}

/* Terminal — charcoal-green, classic trading-terminal feel. Accent green hai
   par PROFIT wala green (--good) usse alag-sa hi rehta hai; loss laal hi. */
html[data-theme="terminal"] {
  --page: #0a0f0b; --surface: #10160f; --surface-2: #141d13; --surface-3: #1a2618;
  --line: #22301f; --line-soft: #1a2418;
  --ink: #d9e8d4; --ink-2: #93ab8c; --ink-3: #667c60;
  --brand: #22c55e; --brand-dim: rgba(34, 197, 94, .13); --series-1: #34d399;
  --good: #4ade80; --bad: #f87171; --warn: #fbbf24; --violet: #a78bfa;
  --sidebar: #070b07;
  --scroll-thumb: #2b402b; --scroll-thumb-hover: #3a553a;
  --logo-a: #34d399; --logo-b: #059669;
  --grad-a: #34d399; --grad-b: #0d9488;
  --hero-a: #122415;
  --legend: #6ee7a0;
  --btn-primary-hover: #1cae52;
  --on-brand: #04140a;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13.5px;
  -webkit-font-smoothing: antialiased;
}

/* dark scrollbars — default white bars dark theme me bhadde lagte hain */
* { scrollbar-color: var(--scroll-thumb) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 6px; border: 2px solid var(--page); }
*::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }

.app { display: grid; grid-template-columns: 248px minmax(0, 1fr); height: 100%; }

/* ---------------------------------------------------------------- sidebar */
.sidebar {
  background: var(--sidebar);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  padding: 16px 12px;
  overflow-y: auto;
}

.brand { display: flex; align-items: center; gap: 11px; padding: 4px 8px 18px; }
.brand .logo {
  width: 36px; height: 36px; flex: none;
  display: grid; place-items: center;
  color: #fff;
  background: linear-gradient(140deg, var(--logo-a), var(--logo-b));
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(37, 99, 235, .4);
}
.brand strong { display: block; font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
.brand strong span { color: var(--brand); }
.brand em { font-style: normal; font-size: 10.5px; color: var(--ink-3); }
/* 21-Aug rebrand: mataji (Annapurneshwari) ki tasveer hi logo hai — gradient
   box ke andar cover-fit, taaki har theme me kinara us theme ka rahe. */
.brand .logo img {
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
  display: block;
}
/* Naam lamba hai ("Annapurneshwari") — sidebar me thoda chhota rakhna padta
   hai warna wrap hokar do line ho jaata hai. */
.brand strong.brand-long { font-size: 13.5px; letter-spacing: 0; }

/* Login page ka disclaimer — client-facing, isliye English. Rang jaan-boojh
   kar amber/warn ka halka roop: dikhna zaroori hai, chillaana nahi. */
.disclaimer {
  margin-top: 14px; padding: 10px 12px;
  border: 1px solid var(--line); border-left: 3px solid var(--warn);
  border-radius: 8px;
  font-size: 11px; line-height: 1.5; color: var(--ink-2);
  background: var(--surface-2);
}
.disclaimer b { color: var(--warn); }
.login-footer {
  margin-top: 12px; text-align: center;
  font-size: 10.5px; color: var(--ink-3);
}

/* Banner ke andar ka text-jaisa button ("+N aur — sab dekho"). */
.link-btn {
  background: none; border: none; padding: 0;
  font: inherit; color: var(--brand); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.link-btn:hover { opacity: .85; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-group {
  margin: 16px 10px 6px;
  font-size: 10px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3);
}
.nav button {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 9px 11px;
  font: inherit; font-size: 13px; font-weight: 500;
  color: var(--ink-2);
  background: none; border: 0; border-radius: var(--r-sm);
  cursor: pointer; text-align: left;
  transition: background .15s, color .15s;
}
.nav button svg {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.nav button:hover { background: var(--surface-2); color: var(--ink); }
.nav button.active {
  background: var(--brand); color: var(--on-brand);
  box-shadow: 0 4px 14px rgba(59, 130, 246, .32);
}
.pill-new {
  margin-left: auto;
  font-size: 9.5px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px;
  background: var(--brand-dim); color: var(--legend);
}
.nav button.active .pill-new { background: rgba(255, 255, 255, .22); color: #fff; }

.side-card {
  margin-top: auto; padding: 14px;
  background: linear-gradient(150deg, var(--hero-a), var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.side-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.side-card-head b { font-size: 12.5px; }
.side-card p { margin: 0 0 12px; font-size: 11px; line-height: 1.5; color: var(--ink-2); }

/* ------------------------------------------------------------------- main */
.main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  display: flex; align-items: center; gap: 20px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--page);
  position: sticky; top: 0; z-index: 30;
}
/* Title ko sikudne se roko. Pehle iska koi flex declare hi nahi tha (default
   `0 1 auto` = shrink allowed), aur `.ticker` ke `flex: 1` ne ise har view par
   ~80-100px me nichod diya tha — "Strategy Chart" do line me tootta tha aur
   subtitle paanch line me. Ticker ke paas `overflow-x: auto` pehle se hai,
   yani chaudai ka dabav sokhna USKA kaam hai, title ka nahi.
   `max-width` isliye ki bahut lamba title ticker ko screen se bahar na dhakele. */
.page-title { flex: 0 0 auto; min-width: 180px; max-width: 280px; }
.page-title h1 { margin: 0; font-size: 21px; font-weight: 650; letter-spacing: -.02em; }
.page-title p { margin: 2px 0 0; font-size: 12px; color: var(--ink-3); }

.ticker { display: flex; gap: 9px; margin-left: 8px; overflow-x: auto; flex: 1; }
.tick {
  flex: none; min-width: 132px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.tick b { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; color: var(--ink-3); }
.tick .row { display: flex; align-items: baseline; gap: 8px; margin-top: 3px; }
.tick .p { font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }
.tick .c { font-size: 11px; font-weight: 600; margin-left: auto; }

.top-actions { display: flex; align-items: center; gap: 9px; margin-left: auto; }
/* Topbar index ticker — NIFTY/BANKNIFTY live. Iska kaam ek hi hai: ek nazar
   me bharosa dena ki market chal raha hai aur feed asli hai. Isliye number
   mono aur bada, aur change% ka rang hi sabse pehle aankh me aata hai. */
.index-ticker { display: flex; align-items: center; gap: 8px; }
.index-ticker .idx {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 6px 11px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm);
  white-space: nowrap;
}
.index-ticker .idx b {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--ink-2); text-transform: uppercase;
}
.index-ticker .idx i {
  font-family: var(--mono); font-style: normal;
  font-size: 12.5px; font-weight: 600; color: var(--ink);
}
.index-ticker .idx em {
  font-style: normal; font-family: var(--mono);
  font-size: 11px; font-weight: 600;
}
/* Har index clickable hai — TradingView chart nayi window me. Isliye wo
   dikhna bhi chahiye ki click ho sakta hai. */
.index-ticker .idx.clickable { cursor: pointer; transition: border-color .15s, background .15s; }
.index-ticker .idx.clickable:hover { border-color: var(--brand); background: var(--surface-2); }
.index-ticker .idx-add {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  font-size: 15px; line-height: 1; color: var(--ink-3);
  background: var(--surface); border: 1px dashed var(--line);
  border-radius: var(--r-sm); cursor: pointer;
}
.index-ticker .idx-add:hover { color: var(--brand); border-color: var(--brand); }
/* Chhoti screen pe topbar me jagah nahi — ticker sabse pehle hatega,
   kyunki Start/Stop/Square-off buttons usse zyada zaroori hain. */
@media (max-width: 1180px) { .index-ticker { display: none; } }

.clock {
  font-family: var(--mono); font-size: 12px;
  color: var(--ink-2);
  padding: 7px 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.feed {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 600; color: var(--good);
  padding: 7px 11px;
  background: rgba(34, 197, 94, .1);
  border: 1px solid rgba(34, 197, 94, .28);
  border-radius: 999px;
}
.feed.stale { color: var(--bad); background: rgba(248, 113, 113, .1); border-color: rgba(248, 113, 113, .3); }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse 1.8s infinite; }
@keyframes pulse { 50% { opacity: .35; } }

.icon-btn {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.icon-btn svg { width: 15px; height: 15px; fill: currentColor; }
.icon-btn:hover { color: var(--ink); border-color: #2c3c5c; background: var(--surface-2); }
.icon-btn.danger:hover { color: var(--warn); border-color: rgba(251, 191, 36, .5); }

.avatar {
  display: flex; align-items: center; gap: 9px;
  padding: 4px 12px 4px 4px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
}
.avatar span {
  width: 28px; height: 28px; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: #fff;
  background: linear-gradient(140deg, var(--grad-a), var(--grad-b));
  border-radius: 50%;
}
.avatar .who b { display: block; font-size: 12px; font-weight: 600; }
.avatar .who em { font-style: normal; font-size: 10px; color: var(--ink-3); }

.scroll { flex: 1; overflow-y: auto; padding: 20px 22px 26px; }
.view { display: flex; flex-direction: column; gap: 16px; }
.view[hidden] { display: none; }

/* ------------------------------------------------------------------- kpis */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }

.kpi {
  padding: 15px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
}
.kpi-top { display: flex; align-items: center; gap: 11px; }
.kpi .tile {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border-radius: 10px;
  font-size: 16px;
}
.kpi .tile.b { background: rgba(59, 130, 246, .16); }
.kpi .tile.g { background: rgba(34, 197, 94, .15); }
.kpi .tile.v { background: rgba(167, 139, 250, .15); }
.kpi .tile.a { background: rgba(251, 191, 36, .15); }
.kpi label { font-size: 11.5px; color: var(--ink-2); }
.kpi .val { margin-top: 11px; font-size: 25px; font-weight: 650; letter-spacing: -.02em; }
.kpi .sub { margin-top: 5px; font-size: 11px; color: var(--ink-3); }
.kpi .sub .up { color: var(--good); font-weight: 600; }
.kpi .sub .down { color: var(--bad); font-weight: 600; }

/* ------------------------------------------------------------------ cards */
.row-2 { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 14px; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  min-width: 0;
}
.card-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.card-head h2 { margin: 0; font-size: 14.5px; font-weight: 620; }
.card-head h2 small { font-weight: 400; font-size: 11px; color: var(--ink-3); margin-left: 5px; }
.card-tools { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.card-body { padding: 14px 16px; }
.card-body.no-pad { padding: 0; }
.card-note {
  margin: 0; padding: 9px 16px;
  font-size: 11.5px; color: var(--ink-3);
  border-bottom: 1px solid var(--line-soft);
}
.card-note:empty { display: none; }

.chip {
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-2);
  padding: 4px 9px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px;
}
.link {
  margin-left: auto;
  font: inherit; font-size: 12px; font-weight: 600;
  color: var(--brand); background: none; border: 0; cursor: pointer;
}
.link:hover { text-decoration: underline; }

.seg { margin-left: auto; display: flex; background: var(--surface-2); border-radius: var(--r-sm); padding: 3px; }
.seg button {
  font: inherit; font-size: 11.5px; font-weight: 600;
  padding: 4px 11px; border: 0; border-radius: 6px;
  background: none; color: var(--ink-3); cursor: pointer;
}
.seg button.active { background: var(--surface-3); color: var(--ink); }

.search { position: relative; }
.search svg {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; fill: none; stroke: var(--ink-3); stroke-width: 1.8;
}
.search input {
  font: inherit; font-size: 12.5px;
  padding: 7px 11px 7px 31px; width: 210px;
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-sm);
}
.search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-dim); }

/* ------------------------------------------------------------------ chart */
.chart { position: relative; height: 232px; }
.chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.chart .gridline { stroke: var(--line); stroke-width: 1; }        /* solid hairline */
.chart .axis-label { fill: var(--ink-3); font-size: 10px; font-family: var(--sans); }
.chart .area { fill: url(#pnlFill); }
.chart .line { fill: none; stroke: var(--series-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .end-dot { fill: var(--series-1); stroke: var(--surface); stroke-width: 2; }
.chart .crosshair { stroke: var(--ink-3); stroke-width: 1; }
.chart .hit { fill: transparent; }

.tooltip {
  position: fixed; z-index: 200; pointer-events: none;
  padding: 8px 11px;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow);
  font-size: 11.5px;
}
.tooltip b { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tooltip[hidden] { display: none; }

/* -------------------------------------------------------------- bar chart */
.bars { display: flex; flex-direction: column; gap: 13px; }
.bar-row .bar-top { display: flex; align-items: baseline; gap: 8px; font-size: 11.5px; }
.bar-row .bar-top .name { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row .bar-top .v { margin-left: auto; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.bar-track { margin-top: 6px; height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--series-1); border-radius: 4px; transition: width .45s var(--ease); }

/* ------------------------------------------------------------ mini tables */
.mini-table-wrap { max-height: 300px; overflow: auto; }
.mini { width: 100%; border-collapse: collapse; font-size: 12px; }
.mini th {
  position: sticky; top: 0;
  text-align: left; padding: 9px 16px;
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); background: var(--surface);
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}
.mini td {
  padding: 9px 16px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mini td.key { color: var(--ink); font-weight: 500; }
.mini td.num, .mini th.num { text-align: right; }
.mini tr:last-child td { border-bottom: 0; }
.mini tbody tr:hover { background: var(--surface-2); }

/* --------------------------------------------------------------- accounts */
.accounts { display: flex; flex-direction: column; }
.acct {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.acct:last-child { border-bottom: 0; }
.acct .av {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: #fff;
  background: linear-gradient(140deg, var(--grad-a), var(--grad-b));
  border-radius: 50%;
}
.acct .meta b { display: block; font-size: 12.5px; font-weight: 600; }
.acct .meta em { font-style: normal; font-size: 11px; color: var(--ink-3); }
.acct .right { margin-left: auto; text-align: right; }
.acct .right .p { font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }
/* Ab yahan do tag hote hain — broker-sync freshness aur account status. */
.acct .right .tag { margin-top: 4px; }

/* ------------------------------------------------------------------- tags */
.tag {
  display: inline-block;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 6px;
}
.tag.buy      { color: var(--good); background: rgba(34, 197, 94, .13); }
.tag.sell     { color: var(--bad);  background: rgba(248, 113, 113, .13); }
.tag.pending  { color: var(--warn); background: rgba(251, 191, 36, .13); }
.tag.complete { color: #7ab3ff;     background: var(--brand-dim); }
.tag.re       { color: var(--violet); background: rgba(167, 139, 250, .14); }
.tag.muted    { color: var(--ink-3); background: var(--surface-2); }
/* `.tag.rejected` app.js me strategies ke OFF pill par KABHI se laga hua tha
   par yahan rule tha hi nahi — wo pill bina rang ke render hota raha. 25-Aug
   ko accounts aur groups ke toggle bhi isi class par aaye, isliye ab define
   kiya. Rang `sell` se halka: "band hai" chetavni hai, galti nahi. */
.tag.rejected { color: var(--bad);   background: rgba(248, 113, 113, .10); }
/* Toggle ab `<button class="tag">` hain — browser ka apna button-look (border,
   font, background) hataana zaroori hai, warna wo baaki pills se alag dikhte
   hain aur "same button har jagah" ka poora maqsad hi mar jaata hai. */
button.tag {
  border: 0;
  font: inherit;
  cursor: pointer;
  line-height: inherit;
}
button.tag:hover  { filter: brightness(1.18); }
button.tag:active { transform: translateY(1px); }

.pos { color: var(--good); }
.neg { color: var(--bad); }
.zero { color: var(--ink-3); }

/* ------------------------------------------------------------- data grids */
.grid-scroll { overflow: auto; max-height: calc(100vh - 250px); position: relative; }
.grid { width: 100%; border-collapse: collapse; font-size: 12px; }
.grid thead th {
  position: sticky; top: 0; z-index: 5;
  background: var(--surface);
  color: var(--ink-3);
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  text-align: left; padding: 10px 13px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.grid thead th.num { text-align: right; }
.grid tbody tr { border-bottom: 1px solid var(--line-soft); transition: background .12s; }
.grid tbody tr:hover { background: var(--surface-2); }
.grid tbody tr.clickable { cursor: pointer; }
.grid td {
  padding: 0 13px; height: 38px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  font-family: var(--mono); font-size: 11.5px;
}
.grid td.num { text-align: right; }
.grid td.key { color: var(--ink); font-family: var(--sans); font-size: 12px; font-weight: 500; }

/* Strategy modal: index chip + "Add to another index" ek hi line me. */
.index-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.idx-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
/* Jo index tradeable nahi hai wo DIKHTA hai par dab nahi sakta — chhupa dene
   par client Symbol Mapping me dhoondhta rehta. */
.idx-list .btn[disabled] { opacity: .45; cursor: not-allowed; }
/* `.btn.block` (line ~517) `text-align: center` karta hai aur wo is rule ke
   BAAD aata hai — barabar specificity par baad wala jeet-ta hai. Isliye yahan
   `.btn.block` likhna zaroori hai, akela `.btn` nahi. */
.idx-list .btn.block { text-align: left; }

/* Grid ke andar ka section divider (Positions: khuli vs band).
   `thead th` ki tarah dikhta hai par sticky NAHI — sticky hota to scroll par
   do patti (header + section) ek doosre ke upar chadh jaati.
   `:hover` background aur pointer yahan band hain: ye row data nahi hai, aur
   uska clickable lagna hi ek galat click ka nyota hai. */
.grid tbody tr.grid-section { border-bottom: 1px solid var(--line); }
.grid tbody tr.grid-section:hover { background: transparent; }
.grid tbody tr.grid-section td {
  height: 30px;
  background: var(--surface-2);
  color: var(--ink-3);
  font-family: var(--sans);
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  cursor: default;
}

/* Din badalne wali patti — client ka ask (17-Aug): "ek din honeke bad line
   chaiye". Ye `grid-section` se JAAN-BOOJH KAR halki hai: section ("KHULI /
   BAND HO CHUKI") data ko baantta hai, ye sirf ek samay ka nishan hai. Dono
   ek jaise dikhte to aankh yahi maan leti ki din bhi ek "section" hai.

   Taareekh line ke BEECH me baithti hai (do taraf hairline), taaki ye ek row
   se zyada ek seema lage. */
.grid tbody tr.grid-day:hover { background: transparent; }
.grid tbody tr.grid-day td {
  height: 26px;
  padding: 0 14px;
  background: transparent;
  color: var(--ink-3);
  font-family: var(--sans);
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase;
  cursor: default;
  white-space: nowrap;
}
.grid tbody tr.grid-day td::before,
.grid tbody tr.grid-day td::after {
  content: ""; display: inline-block; vertical-align: middle;
  height: 1px; background: var(--line);
}
.grid tbody tr.grid-day td::before { width: 18px; margin-right: 10px; }
.grid tbody tr.grid-day td::after { width: 100%; margin-left: 10px; }

/* 🔴 Orphan strategy — signal side maujood hai, execution rules nahi.
   11-Aug ko `GOD` aur `SENSEX 5 GOD` theek isi haalat me the: signal roz bante
   rahe, har ek `_execute_signal()` me "strategy not found" par mara, aur
   dashboard poori tarah healthy dikhta raha. Ye row us haal ka drishya roop
   hai, isliye laal patti poori row par — ek chhota tag 20-column chaudi grid
   me horizontal scroll ke peeche chhup jaata hai.

   `:hover` ka apna rule JAAN-BOOJH KAR likha hai. `.grid tbody tr:hover`
   (upar) ki specificity is rule ke barabar hai, aur barabar par baad wala
   jeet-ta hai — aaj wo "baad wala" ye hai, par ek naya rule neeche jud'te hi
   laal chup-chaap gaayab ho jaata. Alag `:hover` rule ki specificity zyada
   hai, wo aise nahi tootega. */
.grid tbody tr.row-orphan { background: rgba(248, 113, 113, .09); }
.grid tbody tr.row-orphan:hover { background: rgba(248, 113, 113, .16); }
.grid tbody tr.row-orphan td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
/* Sabse dayina column right edge par CHIPKA hua hai aur uska apna OPAQUE
   background hai (`.grid td.col-actions`, neeche) — bina uske sticky cell ke
   aar-paar guzarti hui rows dikhti hain. Us opaque rang ke neeche row ka laal
   dab jaata tha, yani jis row ka poora maqsad "miss karna namumkin" hai wo
   apne kone par saaf-suthri dikhti thi.

   Do baatein jaan-boojh kar:
   * **Rang layer se aata hai, alpha se nahi.** `linear-gradient` ki ek flat
     laal parat opaque `var(--surface)` ke UPAR — cell opaque rehti hai aur
     laal bhi dikhta hai. Seedha `rgba(...)` dene par cell paardarshi ho jaati
     aur purana bug wapas aa jaata.
   * **Specificity se jeetta hai, kram se nahi.** `.grid td.col-actions` (0,2,1)
     aur `.grid tr:hover td.col-actions` (0,3,2) — ye rules (0,3,3) aur (0,4,3)
     hain, yani file me kahin bhi rahein, jeetenge. Barabar-specificity wala
     jodd aaj chalta aur kal koi neeche ek line likh dene par chup-chaap toot
     jaata (wahi trap `tr.row-orphan:hover` ke upar bhi likha hai). */
.grid tbody tr.row-orphan td.col-actions {
  background: linear-gradient(rgba(248, 113, 113, .09), rgba(248, 113, 113, .09)),
              var(--surface);
}
.grid tbody tr.row-orphan:hover td.col-actions {
  background: linear-gradient(rgba(248, 113, 113, .16), rgba(248, 113, 113, .16)),
              var(--surface-2, var(--surface));
}
/* Naam ke neeche "execution rules missing" wali patti — us ek cell ko do
   line chahiye, warna tag naam ke saath bhid kar kat jaata hai. */
.grid tbody tr.row-orphan td.key { height: 46px; line-height: 1.35; white-space: normal; }

.flash-up   { animation: flashUp .8s var(--ease); }
.flash-down { animation: flashDown .8s var(--ease); }
@keyframes flashUp   { from { background: rgba(34, 197, 94, .2); } }
@keyframes flashDown { from { background: rgba(248, 113, 113, .2); } }

.empty { padding: 40px; text-align: center; color: var(--ink-3); font-size: 12.5px; }
.empty[hidden] { display: none; }

/* ----------------------------------------------------------------- events */
.events { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; }
.events li { padding: 11px 16px; border-bottom: 1px solid var(--line-soft); animation: slideIn .35s var(--ease); }
.events li:last-child { border-bottom: 0; }
@keyframes slideIn { from { opacity: 0; transform: translateX(8px); } }
.events .hd { display: flex; align-items: center; gap: 8px; }
.events .t { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }
.events .k { font-size: 9.5px; font-weight: 700; letter-spacing: .05em; padding: 2px 7px; border-radius: 5px; }
.events .m {
  display: block; margin-top: 4px;
  font-family: var(--mono); font-size: 11px; color: var(--ink-2);
  overflow-wrap: anywhere;
}
.k-SIGNAL     { color: #7ab3ff;       background: var(--brand-dim); }
.k-RE-ENTRY   { color: var(--violet); background: rgba(167, 139, 250, .14); }
.k-TRAIL, .k-LOCK { color: var(--warn); background: rgba(251, 191, 36, .13); }
.k-TARGET     { color: var(--good);   background: rgba(34, 197, 94, .13); }
.k-EXIT, .k-SQUARE-OFF { color: var(--bad); background: rgba(248, 113, 113, .13); }
.k-SETTINGS, .k-SYSTEM, .k-ERROR { color: var(--ink-3); background: var(--surface-2); }

/* --------------------------------------------------------------- buttons */
.btn {
  font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 9px 15px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2);
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.btn:hover { color: var(--ink); border-color: #2c3c5c; }
.btn-primary {
  background: var(--brand); border-color: var(--brand); color: var(--on-brand);
  box-shadow: 0 4px 14px rgba(59, 130, 246, .3);
}
.btn-primary:hover { background: var(--btn-primary-hover); color: var(--on-brand); }
.btn-ghost { background: transparent; }
.btn.block { display: block; width: 100%; text-align: center; text-decoration: none; }

/* ----------------------------------------------------------------- modal */
.modal-back {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(4, 8, 16, .72);
  backdrop-filter: blur(3px);
  display: grid; place-items: center;
  animation: fade .2s var(--ease);
}
.modal-back[hidden] { display: none; }   /* display hamesha [hidden] ko override karta hai */
@keyframes fade { from { opacity: 0; } }

.modal {
  width: min(580px, 94vw); max-height: 88vh; overflow: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  animation: rise .26s var(--ease);
}
@keyframes rise { from { opacity: 0; transform: translateY(12px) scale(.985); } }

.modal-head { display: flex; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 0; font-size: 15px; font-weight: 620; }
.modal-head .x { margin-left: auto; background: none; border: 0; color: var(--ink-3); font-size: 15px; cursor: pointer; }
.modal-head .x:hover { color: var(--bad); }
.modal-warn {
  margin: 0; padding: 11px 20px;
  font-size: 11.5px; color: var(--warn);
  background: rgba(251, 191, 36, .07);
  border-bottom: 1px solid var(--line-soft);
}
.modal-body { padding: 18px 20px; display: grid; gap: 14px; }

.fieldset { border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 15px 16px; background: var(--surface-2); }
.fieldset > legend { font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--legend); padding: 0 7px; }

/* "Advanced" — engine ke andar ki settings, band haalat me.
   Client ne 17-Aug ko Warm-up par laal circle lagakar poochha tha "what is
   this" — wo field unke TradingView panel me hai hi nahi. Ise hatana nahi ja
   sakta (save uske bina value gira deta), isliye ise band karke rakha gaya
   hai: jise chahiye wo khol le, baaki ka form unke panel jaisa dikhe. */
.fieldset > details.advanced { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.fieldset > details.advanced > summary {
  cursor: pointer; list-style: none;
  font-size: 11px; font-weight: 600; color: var(--ink-2);
  padding: 5px 0;
  user-select: none;
}
.fieldset > details.advanced > summary::-webkit-details-marker { display: none; }
/* Apna marker — native triangle har browser me alag dikhta hai aur is
   dashboard ke baaki chevrons se mel nahi khaata. */
.fieldset > details.advanced > summary::before {
  content: "▸"; display: inline-block; width: 14px; color: var(--ink-3);
  transition: transform var(--fast, .15s) ease;
}
.fieldset > details.advanced[open] > summary::before { transform: rotate(90deg); }
.fieldset > details.advanced > summary:hover { color: var(--ink-1); }
.fieldset > details.advanced .hint-inline {
  font-weight: 400; color: var(--ink-3); font-size: 10px; margin-left: 8px;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 11px; }
.field label { display: block; font-size: 11px; color: var(--ink-2); margin-bottom: 6px; }
.field input[type="number"] {
  width: 100%; font-family: var(--mono); font-size: 13px;
  padding: 9px 11px;
  background: var(--page); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-sm);
}
.field input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-dim); }
.field input:disabled { color: var(--ink-3); }
.toggle { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--ink-2); cursor: pointer; }
.toggle input { accent-color: var(--brand); width: 15px; height: 15px; }

.modal-foot { display: flex; justify-content: flex-end; gap: 9px; padding: 14px 20px; border-top: 1px solid var(--line); }

/* ------------------------------------------------------------- responsive */
@media (max-width: 1500px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1280px) {
  .app { grid-template-columns: 74px minmax(0, 1fr); }
  .sidebar { padding: 14px 8px; }
  .brand em, .brand strong, .nav-group, .side-card { display: none; }
  /* label text bare text-node hai, isliye font-size se hide karo (svg par asar nahi) */
  .nav button { justify-content: center; padding: 11px; font-size: 0; gap: 0; }
  .row-2 { grid-template-columns: 1fr; }
  .ticker { display: none; }
}
@media (max-width: 780px) {
  .kpis { grid-template-columns: 1fr; }
  .avatar .who, .clock { display: none; }
  .scroll { padding: 14px; }
}

/* ==========================================================================
   Production console additions — login, credential forms, engine health.
   Base theme demo se aaya hai; neeche sirf wo cheezein hain jo asli product
   me hain aur demo me nahi thi.
   ========================================================================== */

/* ------------------------------------------------------------------ login */
.login-page {
  min-height: 100%;
  display: grid;
  place-items: center;
  /* Do overlapping radial glows — flat navy background pe depth deti hain
     bina koi image load kiye. */
  background:
    radial-gradient(1100px 620px at 12% -10%, rgba(59, 130, 246, .16), transparent 60%),
    radial-gradient(900px 520px at 88% 110%, rgba(167, 139, 250, .12), transparent 60%),
    var(--page);
  padding: 24px;
}

.login-card {
  width: min(420px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 34px 32px 28px;
  box-shadow: var(--shadow);
}

.login-card .brand { margin-bottom: 26px; }
.login-card h1 { font-size: 19px; margin: 0 0 4px; letter-spacing: -.01em; }
.login-card .lede { color: var(--ink-2); font-size: 13px; margin: 0 0 22px; }

.login-card .field { margin-bottom: 15px; }
.login-card .field label {
  display: block; font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3); margin-bottom: 6px;
}
.login-card input {
  width: 100%; padding: 11px 13px; font-size: 14px;
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  transition: border-color var(--duration-fast, 150ms) var(--ease);
}
.login-card input:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-dim);
}
.login-card .btn { width: 100%; padding: 11px; margin-top: 8px; font-size: 14px; }

.login-error {
  background: rgba(248, 113, 113, .1);
  border: 1px solid rgba(248, 113, 113, .3);
  color: var(--bad);
  padding: 10px 12px; border-radius: var(--r-sm);
  font-size: 13px; margin-bottom: 16px;
}
.login-foot {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-soft);
  font-size: 11.5px; color: var(--ink-3); text-align: center;
}

/* ------------------------------------------------------- engine health pill */
.feed.stale   { background: rgba(248, 113, 113, .14); color: var(--bad); }
.feed.warn    { background: rgba(251, 191, 36, .14);  color: var(--warn); }
.feed .pulse.warn { background: var(--warn); }

.engine-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 9px 14px; margin-bottom: 14px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-md); font-size: 12px; color: var(--ink-2);
}
.engine-bar b { color: var(--ink); font-weight: 600; }
.engine-bar .sep { color: var(--ink-3); }
.engine-bar.bad { border-color: rgba(248, 113, 113, .4); }

/* Active Broker selector — topbar, next to the clock */
.active-broker {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: var(--ink-2);
  padding: 6px 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.active-broker span { font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.active-broker select {
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: 12px; padding: 4px 6px; max-width: 150px;
}

/* Active Broker banners — "warn" (gate off, sab trade karenge) alag hai
   "critical" (setting hai par account gone — engine SAB signal reject karta
   hai) se. Critical zyada saaf khatarnak dikhna chahiye, warna client soch
   lega gate off hai jabki asal me trading poori tarah ruki hui hai. */
.banner {
  padding: 10px 14px; margin-bottom: 14px;
  border-radius: var(--r-md); font-size: 12.5px; font-weight: 600; line-height: 1.5;
}
.banner.warn {
  background: rgba(251, 191, 36, .09); border: 1px solid rgba(251, 191, 36, .28);
  color: var(--warn);
}
.banner.critical {
  background: rgba(248, 113, 113, .16); border: 1px solid rgba(248, 113, 113, .55);
  color: var(--bad);
}
/* "Active Broker set nahi hai" ab warning NAHI hai — copy trading / child
   accounts me wahi sahi haalat hai. Peela banner client ko roz batata tha ki
   kuch toota hua hai jabki uska setup theek waisa hi tha jaisa hona chahiye. */
.banner.muted {
  background: var(--surface-2, rgba(147, 163, 189, .07));
  border: 1px solid var(--line); color: var(--ink-2); font-weight: 500;
}

/* ----------------------------------------------------------- toolbar/actions */
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-sm { padding: 6px 11px; font-size: 12px; border-radius: var(--r-sm); }

.btn-danger {
  background: rgba(248, 113, 113, .13); color: var(--bad);
  border: 1px solid rgba(248, 113, 113, .32);
}
.btn-danger:hover { background: rgba(248, 113, 113, .2); }

/* -------------------------------------------------------------- credentials */
.cred-warn {
  background: rgba(251, 191, 36, .09);
  border: 1px solid rgba(251, 191, 36, .28);
  color: var(--warn);
  padding: 9px 12px; border-radius: var(--r-sm);
  font-size: 12px; margin-bottom: 14px; line-height: 1.5;
}
.cred-set   { color: var(--good); font-size: 11.5px; }
.cred-unset { color: var(--ink-3); font-size: 11.5px; }

.modal-tabs { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.modal-tabs button {
  background: none; border: none; color: var(--ink-3);
  padding: 9px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.modal-tabs button:hover { color: var(--ink-2); }
.modal-tabs button.active { color: var(--brand); border-bottom-color: var(--brand); }
.tab-panel[hidden] { display: none; }

/* Strategy dialog ke tab client ke Pine ke `group =` naam hain — 11 hain aur
   ek line me nahi aate. `.modal.wide` par wo lipat jaate hain.
   Selector `.modal.wide .modal-tabs` (0,3,0) hai, akela `.modal-tabs` (0,1,0)
   nahi: upar wala rule baad me aata to nahi, par barabar specificity par
   baad wala jeet'ta hai aur ye rule chup-chaap mar jaata. */
.modal.wide { width: min(880px, 96vw); }
.modal.wide .modal-tabs { flex-wrap: wrap; row-gap: 2px; }
.modal.wide .modal-tabs button { padding: 8px 11px; font-size: 12px; }

.field select {
  width: 100%; padding: 8px 10px; font-size: 13px;
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-sm);
}
.field .hint { font-size: 11px; color: var(--ink-3); margin-top: 4px; line-height: 1.45; }

/* ------------------------------------------- strategy dialog: Inputs pane
   Client ka reference TradingView ka indicator-settings dialog hai: EK pane,
   upar se neeche scroll, aur har row me label BAYEN + control DAYEN. Uska
   Pine panel is dialog ke bagal me khula rehta hai, aur do panel milane ke
   liye aankh ko ek hi seedhi lakeer chahiye.

   Sab kuch `.inputs-pane` ke andar scope hai. `.field` is app me 80 jagah
   use hoti hai (account editor, symbol mapping, user editor…) — global
   badalna baaki har dialog ka roop bhi badal deta, bina kisi ke maange.

   Har override apni SPECIFICITY se jeetta hai, file ke kram se nahi
   (`.inputs-pane .field` = 0,2,0 vs `.field-row` = 0,1,0 …). Barabar
   specificity par baad wala rule jeetta hai, aur wo jodd us din chup-chaap
   toot jaata hai jab koi neeche ek line likh de — is file me wo trap
   `modal-apply`, `.btn.block` aur `row-orphan` par pehle teen baar kaat
   chuka hai. Iska apna test hai. */
.inputs-pane { display: grid; gap: 12px; }
.inputs-pane .field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 210px);
  align-items: center;
  column-gap: 16px;
  margin-top: 11px;
}
.inputs-pane .field:first-child { margin-top: 0; }
.inputs-pane .field > label { margin-bottom: 0; font-size: 12px; }
/* Hint poori chaudai me, control ke NEECHE. TradingView wahan (i) tooltip
   rakhta hai; yahan wo "kyun" likha hota hai jo client ko chahiye — chhupa
   dene par wo har baar poochhega ki ye setting wahi hai ya nahi. */
.inputs-pane .field .hint { grid-column: 1 / -1; margin-top: 6px; }
/* Fieldset ke SEEDHE neeche wale hint (`signalNote`, "ye wahi peeli line hai…"
   jaise) `.field` ke andar hote hi nahi, isliye `.field .hint` unpar kabhi
   laga hi nahi — wo browser ke default paragraph size me chhapte the. Gyarah
   tab me har ek akela dikhta tha to ye kami chhupi rahi; ek pane me wo poore
   form ki lay tod dete hain (chhote label, phir achanak bada paragraph).
   `.fieldset > .hint` (0,3,0) `.field .hint` (0,2,0) se takraata bhi nahi —
   dono alag element chunte hain, ek bhi element dono me nahi aata. */
.inputs-pane .fieldset > .hint {
  font-size: 11px; color: var(--ink-3); line-height: 1.5; margin: 9px 0 0;
}
/* Do-column wali jodi ab ek dhaara me — ek pane ka poora faayda hi yahi hai
   ki har setting apni line par ho. */
.inputs-pane .field-row { grid-template-columns: 1fr; gap: 0; margin-top: 0; }
.inputs-pane .toggle { margin-top: 11px; }
/* Text input ko number jaisa hi rang. Bina iske `Strategy name` browser ka
   safed default rehta hai — ek gehre pane me wo tuta hua dikhta hai. */
.inputs-pane .field input[type="text"],
.inputs-pane .field input[type="date"] {
  width: 100%; font-size: 13px; padding: 9px 11px;
  background: var(--page); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-sm);
}

/* --------------------------------------------------------------- checkboxes */
.check-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px; margin-top: 8px;
}
.check-grid label {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: 12.5px; cursor: pointer;
}
.check-grid label:hover { border-color: var(--surface-3); }

/* -------------------------------------------------------------------- toast */
.toast-host {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  display: flex; flex-direction: column; gap: 8px; max-width: 380px;
}
.toast {
  background: var(--surface-3); border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  padding: 11px 14px; border-radius: var(--r-sm);
  font-size: 12.5px; color: var(--ink); box-shadow: var(--shadow);
  animation: toast-in 240ms var(--ease);
}
.toast.ok  { border-left-color: var(--good); }
.toast.err { border-left-color: var(--bad); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
}

/* --------------------------------------------------------------- empty tips */
.setup-tip {
  padding: 22px; text-align: center; color: var(--ink-2);
  font-size: 13px; line-height: 1.65;
}
.setup-tip b { color: var(--ink); }
.setup-tip code {
  font-family: var(--mono); font-size: 12px;
  background: var(--surface-3); padding: 2px 6px; border-radius: 4px;
  color: var(--ink);
}

/* Market Movers — clickable rows (TradingView chart new window) */
.mini tbody tr.clickable { cursor: pointer; }
.mini tbody tr.clickable:hover td { background: var(--surface-3); }
.mini tbody tr.clickable:hover td.key { color: var(--brand); }


/* ------------------------------------------------- expandable panels
   Har card ka header clickable hai — kahin bhi click karo aur wo panel
   poori window le leta hai. Wajah: Market Movers ka `⛶ Full view` sabko
   pasand aaya, par baaki panels me wo raasta tha hi nahi; chhote box me
   Activity Log ya Orders padhna mushkil hota hai.

   Header ke ANDAR ke button/link apna kaam karte rehte hain (▶ Chart/Table,
   ⛶ Full view, Manage →) — expand sirf khaali jagah par click se hota hai. */
.card-head.expandable { cursor: zoom-in; }
.card-head.expandable:hover h2 { color: var(--brand); }
.card-head .expand-hint {
  margin-left: auto; flex: none;
  font-size: 10.5px; color: var(--ink-3);
  opacity: 0; transition: opacity .15s;
}
.card-head.expandable:hover .expand-hint { opacity: 1; }

.card.expanded {
  position: fixed; inset: 18px; z-index: 80;
  margin: 0; max-height: none;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .6);
}
.card.expanded .card-head { cursor: zoom-out; }
/* Andar ka scroll box apni 300px ki seema chhod de — warna poori screen le
   kar bhi wahi chhota dabba dikhta rahega. */
.card.expanded .mini-table-wrap,
.card.expanded .events { max-height: none; height: calc(100vh - 130px); overflow: auto; }
.card.expanded .card-body { flex: 1 1 auto; min-height: 0; }

.expand-back {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(4, 8, 16, .66);
}

/* ------------------------------------------------- strategy chart (full page)
   Client ka 7-Aug ka screenshot: chart upar-baayen kone me chhota tha aur
   neeche poora area khaali. Height ab viewport se bandhi hai, inline nahi.
   `min-height` isliye ki Lightweight Charts ko mount ke waqt ek ASLI height
   chahiye — 0 par wo chup-chaap khaali render hota hai. */
.chart-tall { height: calc(100vh - 320px); min-height: 420px; }

/* Trade chart usi page par neeche hai, isliye wo thoda chhota — dono ko
   viewport-height dene se scroll do "poore" chart me bant jaata. */
.chart-short { height: calc(100vh - 480px); min-height: 300px; }

.chart-toggles { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.chart-toggles label {
  display: inline-flex; gap: 5px; align-items: center; cursor: pointer;
  font-size: 12px; color: var(--ink-2); white-space: nowrap;
}
.chart-toggles input { accent-color: var(--brand); cursor: pointer; }

/* Action column right edge par CHIPKI rehti hai. Strategies grid 19 column
   chaudi hai — bina iske Copy aur Delete horizontal scroll ke peeche chhup
   jaate the, yani jo feature client ne maanga wo use dikhta hi nahi.
   `background` zaroori hai: sticky cell transparent ho to neeche se guzarti
   hui rows uske aar-paar dikhti hain. */
.grid td.col-actions, .grid th.col-actions {
  position: sticky; right: 0; z-index: 4;
  background: var(--surface);
  box-shadow: -8px 0 12px -8px rgba(0, 0, 0, .55);
  white-space: nowrap;
}
.grid th.col-actions { z-index: 6; }   /* header ko row ke upar rehna hai */
.grid tr:hover td.col-actions { background: var(--surface-2, var(--surface)); }
.grid td.col-actions .tag { margin-left: 4px; }

/* Trading-days picker — Strategy modal ke Session fieldset me. */
.day-picker { display: flex; gap: 12px; flex-wrap: wrap; padding: 6px 0; }
.day-picker label {
  display: inline-flex; gap: 5px; align-items: center; cursor: pointer;
  font-size: 12px; color: var(--ink-2); letter-spacing: .04em;
}
.day-picker input { accent-color: var(--brand); cursor: pointer; }

/* Strategy modal ka Accounts tab — ek row me account, uska size guna aur on/off. */
.link-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 14px;
  align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line);
}
.link-row:last-of-type { border-bottom: 0; }
.link-pick { display: inline-flex; gap: 7px; align-items: center; cursor: pointer; }
.link-mult { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; color: var(--ink-2); }
.link-mult input { width: 72px; }
.link-on { display: inline-flex; gap: 5px; align-items: center; font-size: 12px; color: var(--ink-2); cursor: pointer; }

/* Mahine wali table ka khaali mahina — dikhta hai par dhyan nahi kheenchta.
   Chhupa dena table ko poora dikha deta hai jabki asli baat ye hoti hai ki us
   mahine strategy chali hi nahi (aur wo khamoshi khud ek nateeja hai). */
.mini tr.mo-empty td { color: var(--ink-3); font-style: italic; }

/* Per-account sizing chunav (14-Aug) — link-row me do naye controls + neeche
   engine ka hisaab. Info poori chaudai leta hai taaki row ka grid na toote. */
.link-row .link-mode select, .link-row .link-lots input { width: 110px; }
/* Group ka apna fund (18-Aug). Thoda chauda kyunki yahan lakh/crore
   ke number aate hain — 110px me `50000000` kat kar dikhta hai. */
.link-row .link-fund input { width: 130px; }

/* Read-only row — client ke account pane me (18-Aug). Ye JAAN-BOOJH KAR input
   jaisa NAHI dikhta: disabled input dekh kar log usme click karte rehte hain
   aur maante hain ki kuch toota hai. Ye saaf kehta hai "ye ek number hai,
   control nahi". */
.ro-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 7px 0; border-bottom: 1px solid var(--line-soft);
}
.ro-row:last-of-type { border-bottom: 0; }
.ro-row span { font-size: 12px; color: var(--ink-2); }
.ro-row b { font-family: var(--mono); font-size: 13px; color: var(--ink); }

/* Backtest ki hafte/mahine wali table — profit green, loss red (client ka
   ask, 18-Aug). Tint JAAN-BOOJH KAR bahut halka hai: table me saat column
   hain aur gehra rang number padhna mushkil kar deta. Left border wo kaam
   karti hai jo rang akela nahi kar paata — rang-andh aankh ke liye bhi ye
   do row alag dikhti hain, sirf hue par nahi tikti. */
.mini tbody tr.bt-win  { background: rgba(34, 197, 94, .07); box-shadow: inset 3px 0 0 var(--good); }
.mini tbody tr.bt-loss { background: rgba(248, 113, 113, .07); box-shadow: inset 3px 0 0 var(--bad); }
.mini tbody tr.bt-win:hover  { background: rgba(34, 197, 94, .12); }
.mini tbody tr.bt-loss:hover { background: rgba(248, 113, 113, .12); }

/* TRADING pill admin ke liye clickable hai (schedule ka dialog). Dikhna
   chahiye ki click ho sakta hai — warna feature chhupa reh jaata hai. */
.trading-pill.clickable { cursor: pointer; }
.trading-pill.clickable:hover { filter: brightness(1.15); }
.link-row .link-sizing { flex-basis: 100%; margin: 2px 0 6px 24px; }

/* Recent Signals card — REJECTED ka kaaran row me hi (14-Aug ka ask). Chhota
   aur laal-sa, taaki badge ke saath padha jaaye par table na phaile. */
.reject-why { font-size: 10px; color: var(--bad); margin-top: 2px; max-width: 190px;
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Export range controls (17-Aug) — panel-actions me compact rehte hain */
.export-range { display: inline-flex; gap: 6px; align-items: center; }
.export-range select, .export-range input[type="date"] {
  background: var(--bg-input, #101725); color: var(--text, #d7e3f0);
  border: 1px solid var(--border, #263349); border-radius: 6px;
  padding: 4px 8px; font-size: 12px; height: 28px;
}

/* Trading ON/OFF pill (17-Aug) — "chalu hai ya band" ab chillata hai */
.trading-pill {
  display: inline-flex; align-items: center; padding: 5px 12px;
  border-radius: 999px; font-size: 12px; font-weight: 700;
  letter-spacing: .3px; white-space: nowrap; user-select: none;
}
.trading-pill.on {
  color: var(--good); background: rgba(34, 197, 94, .12);
  border: 1px solid rgba(34, 197, 94, .45);
}
.trading-pill.off {
  color: var(--bad); background: rgba(248, 113, 113, .14);
  border: 1px solid rgba(248, 113, 113, .55);
  animation: pill-blink 1.6s ease-in-out infinite;
}
@keyframes pill-blink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, .0); }
  50%      { box-shadow: 0 0 10px 1px rgba(248, 113, 113, .45); }
}
/* Jo mode ACTIVE hai uska button roshan — Start hara jab ON, Stop jab OFF */
button[data-action="start"].mode-active {
  color: var(--good); border-color: rgba(34, 197, 94, .55);
  background: rgba(34, 197, 94, .10);
}
button[data-action="stop"].mode-active {
  color: var(--bad); border-color: rgba(248, 113, 113, .55);
  background: rgba(248, 113, 113, .10);
}

/* --------------------------------------------------------- theme picker
   Topbar ka chhota palette menu (19-Aug). Menu khud bhi theme-tokens par hai
   taaki har theme me apna hi roop dikhe. */
.theme-wrap { position: relative; }
.theme-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  width: 262px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow);
}
.theme-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; font: inherit; font-size: 12.5px; font-weight: 500;
  color: var(--ink); background: none; border: 0; border-radius: var(--r-sm);
  cursor: pointer; text-align: left;
}
.theme-menu button:hover { background: var(--surface-2); }
.theme-menu button.current { background: var(--brand-dim); }
.theme-dot {
  width: 16px; height: 16px; border-radius: 50%; flex: none;
  border: 1px solid var(--line);
}
.theme-menu .theme-hint { font-size: 10px; color: var(--ink-3); padding: 5px 10px 6px; }

/* Custom rang (19-Aug): swatches + native color-picker. Picker ka input
   chhota chip jaisa dikhna chahiye, browser ka default 44px box nahi. */
.theme-sep { height: 1px; background: var(--line); margin: 6px 4px; }
.theme-custom { padding: 6px 10px 2px; border-radius: var(--r-sm); }
.theme-custom.current { background: var(--brand-dim); }
.theme-custom label {
  display: block; font-size: 12.5px; font-weight: 500;
  color: var(--ink); margin-bottom: 7px; cursor: pointer;
}
.theme-custom-row { display: flex; align-items: center; gap: 7px; padding-bottom: 6px; }
/* `.theme-menu button { width:100% }` in gol swatches ko lambi pill bana
   deta tha (Rahul ka screenshot, 19-Aug) — isliye yahan specificity + sab
   properties wapas pin. */
.theme-menu button.theme-swatch {
  display: block; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .28);
  cursor: pointer; padding: 0; flex: none;
  transition: transform .12s var(--ease);
}
.theme-menu button.theme-swatch:hover { transform: scale(1.18); background: inherit; }

/* --- Google-style picker --- */
.picker-sq {
  position: relative; width: 100%; height: 130px;
  border-radius: 8px; border: 1px solid var(--line);
  cursor: crosshair; touch-action: none;
}
.picker-dot {
  position: absolute; width: 14px; height: 14px;
  border: 2px solid #fff; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .55);
  transform: translate(-50%, -50%); pointer-events: none;
}
.picker-hue {
  position: relative; height: 12px; margin-top: 10px;
  border-radius: 999px; cursor: pointer; touch-action: none;
  background: linear-gradient(to right,
    #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}
.picker-hue-dot {
  position: absolute; top: 50%; width: 16px; height: 16px;
  border: 2px solid #fff; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .55);
  transform: translate(-50%, -50%); pointer-events: none;
  background: transparent;
}
.picker-meta { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
#picker-hex {
  width: 84px; font-family: var(--mono); font-size: 12px;
  padding: 5px 8px; background: var(--page); color: var(--ink);
  border: 1px solid var(--line); border-radius: 6px;
}
.picker-vals { font-size: 10px; color: var(--ink-3); font-family: var(--mono); }
.picker-ramp {
  display: flex; gap: 2px; margin-top: 10px;
  border-radius: 6px; overflow: hidden;
}
.picker-ramp span { flex: 1; height: 16px; }
.theme-custom .theme-custom-row { margin-top: 10px; }

/* User dialog ka accounts/API section (19-Aug) */
.user-acct-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--line-soft);
  font-size: 12px; line-height: 1.9;
}
.user-acct-row:last-of-type { border-bottom: 0; }
.pill-mini {
  display: inline-block; padding: 1px 8px; margin-right: 4px;
  border-radius: 999px; font-size: 10px; font-weight: 600;
  border: 1px solid var(--line);
}
.pill-mini.ok { color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, transparent); }
.pill-mini.off { color: var(--ink-3); }
/* User dialog ka "account jodo" hissa — upar ki list se saaf alag dikhe. */
.user-acct-add {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px dashed var(--line-soft);
}

/* Modal ke andar ki galti-line (P2c, 22-Aug) — udta toast kaafi nahi tha. */
.modal-error {
  margin: 10px 0 0;
  padding: 8px 12px;
  border: 1px solid var(--sell, #b3435a);
  border-radius: 8px;
  color: var(--sell, #ff7a90);
  background: color-mix(in srgb, var(--sell, #b3435a) 12%, transparent);
  font-size: 13px;
}
/* Backtest ki hafta/mahina rows ab clickable hain (P2b). */
tr.bt-drill { cursor: pointer; }
tr.bt-drill:hover td { filter: brightness(1.25); }

/* Group modal — members ab USER-wise (P4a, 22-Aug). */
.group-owner-block { margin: 10px 0 4px; padding: 6px 8px;
  border: 1px solid var(--border, #263349); border-radius: 8px; }
.group-owner-block.house { opacity: .75; }
.group-owner-head { font-size: 13px; margin-bottom: 4px;
  color: var(--text-dim, #8ea0b8); }
.group-owner-head b { color: var(--text, #d7e3f0); }
/* User dialog — account ke strategies inline (P4b). */
.user-acct-strats { margin: 2px 0 10px; }
.user-acct-strats summary { cursor: pointer; font-size: 12px;
  color: var(--text-dim, #8ea0b8); }
.user-acct-strats label.link-pick { display: block; padding: 2px 0 2px 14px; }
/* Matrix mode-switch + user filter (P4c). */
#matrix-user-filter { margin-left: 6px; }

/* Topbar: har client-group ka ON/OFF button (27-Aug) — Active dropdown ke
   bagal me. <optgroup> me checkbox nahi ho sakta, isliye ye row. */
.group-switches { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.group-switches:empty { display: none; }
.group-switches .tag { cursor: pointer; white-space: nowrap; }
.group-switches .tag.static { cursor: default; }

/* Password "dikhao / chhupao" — har password field ke bagal (27-Aug, client). */
.pw-wrap { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pw-wrap input { flex: 1 1 auto; min-width: 0; }
.pw-toggle {
  flex: 0 0 auto; padding: 2px 9px; font-size: 11px; line-height: 1.6;
  border-radius: 999px; border: 1px solid var(--line, #2a3446);
  background: transparent; color: inherit; cursor: pointer; vertical-align: middle;
  white-space: nowrap;
}
.pw-toggle:hover { border-color: var(--accent, #3b82f6); }