/* ============================================================
   TERMINAL SHELL — reset, chrome, layout, responsive
   ------------------------------------------------------------
   Layout desktop-first hai kyunki asli use ek bade monitor par hai. Do
   breakpoints niche hain (1400 -> 2 column, 900 -> stacked), aur wahi
   teen states poore product ke liye kaafi hain.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;               /* scroll sirf main pane mein */
}

/* Har number tabular — warna columns dance karte hain aur terminal
   turant "website" jaisa lagne lagta hai. */
.num, .mono, td.num, th.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; }
p { margin: 0; }
button { font: inherit; color: inherit; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: var(--surface-3);
  border-radius: 6px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: #2C3547; }

:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 1px;
  border-radius: var(--r-sm);
}

/* ============================================================
   SHELL GRID
   ============================================================ */
.shell {
  display: grid;
  grid-template-columns: var(--rail-w) 1fr;
  grid-template-rows: var(--topbar-h) auto 1fr;
  grid-template-areas:
    "brand  topbar"
    "rail   banner"
    "rail   main";
  height: 100vh;
  width: 100%;
}

.shell__brand  { grid-area: brand; }
.shell__topbar { grid-area: topbar; }
.shell__rail   { grid-area: rail; }
.shell__banner { grid-area: banner; }
.shell__main   { grid-area: main; overflow-y: auto; overflow-x: hidden; }

/* ---- brand block (top-left corner) ---- */
.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--topbar-h);
  background: var(--bg-elevated);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.brand__mark {
  width: 26px;
  height: 26px;
  border-radius: var(--r);
  background: linear-gradient(150deg, var(--bull) 0%, #1E7F93 100%);
  display: grid;
  place-items: center;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: #04121A;
  letter-spacing: -0.02em;
}

/* ---- top bar ---- */
.topbar {
  display: flex;
  align-items: center;
  gap: var(--s4);
  height: var(--topbar-h);
  padding: 0 var(--s4);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}
.topbar__title {
  font-size: var(--fs-base);
  font-weight: 650;
  letter-spacing: 0.01em;
  white-space: nowrap;
  /* Chhoti screen par NAAM sikudta hai, market status nahi. Status ek
     data point hai; brand sirf sajaavat. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar__title span {
  color: var(--text-dim);
  font-weight: 400;
  margin-left: var(--s2);
}
.topbar__spacer { flex: 1 1 auto; min-width: 0; }
.topbar__meta {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex: 0 0 auto;
}

/* Tang jagah: pehle ghadi jaati hai (wall clock kahin aur bhi mil jaati
   hai), phir gaps sikudte hain. Market status aur data-state badge AAKHIR
   TAK rehte hain — wahi do cheezein user ko galat padhne se rokti hain. */
@media (max-width: 760px) {
  .topbar { gap: var(--s2); padding: 0 var(--s3); }
  .topbar__meta { gap: var(--s2); }
  .clock { display: none; }
}

/* ---- left nav rail ---- */
.rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s1);
  padding-top: var(--s3);
  background: var(--bg-elevated);
  border-right: 1px solid var(--border);
}
.rail__item {
  position: relative;
  width: 58px;
  height: 44px;
  overflow: hidden;
  display: grid;
  place-items: center;
  gap: 2px;
  border: 0;
  border-radius: var(--r);
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  text-decoration: none;
  transition: color 0.12s, background 0.12s;
}
.rail__item:hover { color: var(--text-2); background: var(--surface); }
.rail__item.is-active { color: var(--bull-bright); background: var(--bull-wash); }
.rail__item.is-active::before {
  content: "";
  position: absolute;
  left: -1px; top: 9px; bottom: 9px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--bull-bright);
}
.rail__icon { font-size: 15px; line-height: 1; }
.rail__label {
  font-size: 8.5px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 600;
}
.rail__item.is-locked { cursor: default; }
.rail__item.is-locked:hover { color: var(--text-faint); background: transparent; }

/* ============================================================
   MAIN / SCREEN LAYOUT
   ============================================================ */
.screen { padding: var(--s4) var(--s5) var(--s8); }

.screen__head {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  margin-bottom: var(--s4);
}
.screen__title {
  font-size: var(--fs-lg);
  font-weight: 650;
  letter-spacing: -0.01em;
}
.screen__sub {
  font-size: var(--fs-sm);
  color: var(--text-dim);
}

/* ---- Overview layout ----------------------------------------
   Do macro columns: ek chaudi MAIN dhaara aur ek patli SIDE rail.
   Yeh 12-column flat grid se behtar hai kyunki cards ki oonchaai bahut
   alag-alag hai (Top Bull 5 rows ka hai, Unusual Volume 1 row ka) —
   flat grid mein chhota card apni row ki poori oonchaai ghere rehta hai
   aur neeche ek bada khaali gaddha chhod deta hai. Do dhaaraon mein har
   column apne aap bharti jaati hai.                               */
.ov {
  display: grid;
  grid-template-columns: minmax(0, 2.35fr) minmax(290px, 1fr);
  gap: var(--s3);
  align-items: start;
}
.ov__main, .ov__side { display: grid; gap: var(--s3); align-content: start; }

/* Main dhaara ka sirhaana: market view + indices saath mein. */
.ov__head {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(0, 1.55fr);
  gap: var(--s3);
  align-items: start;
}
/* Top Bull aur Top Bear hamesha BARABAR chaudai — do alag chaudai
   dena ek anjaane mein diya gaya sanket hota hai ki ek zyada zaroori hai. */
.ov__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
  align-items: start;
}

/* 1400px and below: side rail neeche chali jaati hai, par bull/bear
   jodi saath rehti hai — unki tulna hi unka matlab hai. */
@media (max-width: 1400px) {
  .ov { grid-template-columns: minmax(0, 1fr); }
  .ov__side {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    align-items: start;
  }
}

/* 900px and below: sab kuch ek dhaara mein. */
@media (max-width: 900px) {
  .ov__head, .ov__pair, .ov__side { grid-template-columns: minmax(0, 1fr); }
  .screen { padding: var(--s3) var(--s3) var(--s6); }
  .shell {
    grid-template-columns: 100%;
    grid-template-rows: var(--topbar-h) auto 1fr auto;
    grid-template-areas:
      "topbar"
      "banner"
      "main"
      "rail";
  }
  .shell__brand { display: none; }
  .rail {
    flex-direction: row;
    justify-content: space-around;
    padding: var(--s1) 0;
    border-right: 0;
    border-top: 1px solid var(--border);
  }
  .rail__item.is-active::before {
    left: 9px; right: 9px; top: -1px; bottom: auto;
    width: auto; height: 2px;
    border-radius: 0 0 2px 2px;
  }
  .topbar__title span { display: none; }
}

/* Wide tables/rows kabhi page ko side mein scroll nahi karaate — woh apne
   container mein scroll karte hain. */
.scroll-x { overflow-x: auto; }