/* TTJ Prime Terminal — TradingView-style interface layer.
   Loaded ONLY by the terminal page (index.html); every rule is scoped
   under .tv so login / admin / journal pages (styles.css) are untouched.
   Palette mirrors TradingView's dark chart UI (#131722 family). */

.tv {
  --tv-bg: #131722;
  --tv-panel: #1e2530;
  --tv-panel-2: #171c26;
  --tv-border: rgba(255, 255, 255, 0.08);
  --tv-text: #d1d4dc;
  --tv-dim: #787b86;
  --tv-bright: #ffffff;
  --tv-blue: #2962ff;
  --tv-up: #089981;
  --tv-down: #f23645;
  background: var(--tv-bg);
  color: var(--tv-text);
}

/* ---------- layout: drawing toolbar | chart | right column ---------- */
.tv .main {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 300px;
  min-height: 0;
}
.tv .chart-wrap { background: var(--tv-bg); }

/* ---------- top toolbar ---------- */
.tv .topbar {
  background: var(--tv-panel-2);
  border-bottom: 1px solid var(--tv-border);
  gap: 8px;
  padding: 0 10px;
}
.tv .sym-btn {
  display: flex; align-items: center; gap: 8px;
  background: transparent; border: none; border-radius: 6px;
  color: var(--tv-text); padding: 5px 8px; cursor: pointer; white-space: nowrap;
}
.tv .sym-btn:hover { background: rgba(255, 255, 255, 0.06); }
.tv .sym-btn img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.tv .sym-btn-name { font-size: 13px; font-weight: 600; }
.tv .sym-btn-sym { font-size: 11px; color: var(--tv-dim); font-weight: 500; }

.tv .tf-group {
  background: transparent; border: none; border-radius: 0; padding: 0; gap: 1px;
}
.tv .tf-group button {
  font: 500 12.5px "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--tv-dim); padding: 5px 7px; border-radius: 6px;
}
.tv .tf-group button:hover { color: var(--tv-text); background: rgba(255, 255, 255, 0.06); }
.tv .tf-group button.active { color: var(--tv-bright); background: rgba(41, 98, 255, 0.18); }

.tv .ind-wrap { position: relative; }
.tv .ind-btn {
  display: flex; align-items: center; gap: 7px;
  background: transparent; border: none; border-radius: 6px;
  color: var(--tv-text); font-size: 12.5px; font-weight: 500;
  padding: 6px 9px; cursor: pointer;
}
.tv .ind-btn:hover { background: rgba(255, 255, 255, 0.06); }
.tv .ind-menu {
  position: absolute; top: calc(100% + 8px); left: 0; width: 268px; z-index: 60;
  background: var(--tv-panel); border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px; padding: 6px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
}
.tv .ind-menu.hidden { display: none; }
.tv .ind-menu-head {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--tv-dim); font-weight: 600; padding: 6px 8px 4px;
}
.tv .ind-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 8px; border-radius: 6px;
}
.tv .ind-row:hover { background: rgba(255, 255, 255, 0.04); }
.tv .ind-row .ind-name { font-size: 12.5px; color: var(--tv-text); }
.tv .ind-row.off .ind-name { color: var(--tv-dim); }
.tv .eye {
  width: 28px; height: 22px; padding: 0; cursor: pointer;
  background: transparent; border: none; border-radius: 4px; position: relative;
}
.tv .eye:hover { background: rgba(255, 255, 255, 0.07); }
.tv .eye::before {
  content: ""; position: absolute; inset: 0; background-position: center; background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M1.4 8S3.6 4.1 8 4.1 14.6 8 14.6 8 12.4 11.9 8 11.9 1.4 8 1.4 8Z' stroke='%23d1d4dc' stroke-width='1.15'/%3E%3Ccircle cx='8' cy='8' r='1.9' fill='%23d1d4dc'/%3E%3C/svg%3E");
}
.tv .ind-row.off .eye::before {
  opacity: 0.55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M1.4 8S3.6 4.1 8 4.1 14.6 8 14.6 8 12.4 11.9 8 11.9 1.4 8 1.4 8Z' stroke='%23787b86' stroke-width='1.15'/%3E%3Cpath d='M2.6 13.4 13.4 2.6' stroke='%23787b86' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
}

.tv .session-pill { color: var(--tv-dim); }
.tv .member-box { color: var(--tv-dim); }
.tv .member-box button { border-color: var(--tv-border); }
.tv .admin-link { color: var(--tv-dim); }
.tv .admin-link:hover { color: var(--tv-blue); }

/* ---------- left drawing toolbar ---------- */
.tv .draw-tools {
  background: var(--tv-panel-2); border-right: 1px solid var(--tv-border);
  display: flex; flex-direction: column; align-items: center;
  padding-top: 6px; gap: 2px; z-index: 7;
}
.tv .draw-tools .tool {
  width: 36px; height: 36px; display: grid; place-items: center;
  background: transparent; border: none; border-radius: 6px;
  color: var(--tv-dim); cursor: pointer; padding: 0;
}
.tv .draw-tools .tool:hover { color: var(--tv-text); background: rgba(255, 255, 255, 0.06); }
.tv .draw-tools .tool.active { color: var(--tv-blue); background: rgba(41, 98, 255, 0.14); }
.tv .draw-tools .tool-sep { width: 22px; border-top: 1px solid var(--tv-border); margin: 5px 0; }
.tv .chart-wrap.tool-armed #chart { cursor: crosshair; }

/* ---------- chart legend (OHLC overlay) ---------- */
.tv .chart-legend {
  position: absolute; top: 8px; left: 10px; z-index: 6; pointer-events: none;
  font-size: 12px; line-height: 1.5; color: var(--tv-text);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tv .chart-legend .lg-title { color: var(--tv-text); }
.tv .chart-legend .lg-title b { font-weight: 600; }
.tv .chart-legend .lg-dim { color: var(--tv-dim); }
.tv .chart-legend .lg-up { color: var(--tv-up); }
.tv .chart-legend .lg-down { color: var(--tv-down); }
.tv .chart-legend .lg-ema9 { color: #ff9800; }
.tv .chart-legend .lg-ema21 { color: #f23645; }

.tv .chart-status { top: auto; bottom: 36px; left: 10px; }

/* ---------- candle countdown: axis label stacked under the live price tag (TV style) ---------- */
.tv .candle-countdown {
  position: absolute; right: 1px; z-index: 6;
  text-align: center; color: #ffffff; border-radius: 3px;
  padding: 2px 0 3px; pointer-events: none; font-variant-numeric: tabular-nums;
}
.tv .candle-countdown span { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; }

/* ---------- symbol detail card (under the watchlist, TV style) ---------- */
.tv .detail-card { padding: 12px; border-top: 1px solid var(--tv-border); }
.tv .dt-head { display: flex; align-items: center; gap: 8px; }
.tv .dt-head img { width: 26px; height: 26px; border-radius: 50%; }
.tv .dt-badge {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: var(--tv-blue); color: #fff; font-size: 10px; font-weight: 700;
  display: grid; place-items: center;
}
.tv .dt-sym { font-size: 14px; font-weight: 600; color: var(--tv-text); }
.tv .dt-name { margin-top: 10px; font-size: 12.5px; color: var(--tv-text); }
.tv .dt-type { margin-top: 2px; font-size: 11.5px; color: var(--tv-dim); }
.tv .dt-price { margin-top: 10px; font-size: 27px; font-weight: 600; color: var(--tv-text); font-variant-numeric: tabular-nums; }
.tv .dt-price .dt-cur { font-size: 12px; font-weight: 500; color: var(--tv-dim); }
.tv .dt-chg { margin-top: 3px; font-size: 13px; font-variant-numeric: tabular-nums; }
.tv .dt-chg.up { color: var(--tv-up); }
.tv .dt-chg.down { color: var(--tv-down); }
.tv .dt-status { margin-top: 8px; font-size: 11.5px; color: var(--tv-up); display: flex; align-items: center; gap: 6px; }
.tv .dt-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tv-dim); flex: none; }
.tv .dt-dot.live { background: var(--tv-up); }
.tv .dt-vol {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--tv-border);
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11.5px; color: var(--tv-dim);
}
.tv .dt-vol b { font-family: var(--mono); font-size: 12.5px; font-weight: 500; color: var(--tv-text); }

/* ---------- bottom bar: ranges + IST clock ---------- */
.tv .chart-bottom {
  position: absolute; left: 0; right: 0; bottom: 0; height: 28px; z-index: 6;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 10px; background: rgba(23, 28, 38, 0.94);
  border-top: 1px solid var(--tv-border);
}
.tv .range-group { display: flex; gap: 1px; }
.tv .range-group button {
  background: transparent; border: none; color: var(--tv-dim);
  font-size: 11px; font-weight: 500; padding: 3px 7px; border-radius: 4px; cursor: pointer;
}
.tv .range-group button:hover { color: var(--tv-text); background: rgba(255, 255, 255, 0.06); }
.tv .chart-clock { font-size: 11px; color: var(--tv-dim); }

/* ---------- right column: TV watchlist + rail sections ---------- */
.tv .rail { background: var(--tv-panel-2); border-left: 1px solid var(--tv-border); width: auto; }

/* watchlist drawer controls exist in the DOM on every viewport but are
   only displayed under the ≤980px media query below (mobile slide-over) */
.tv .wl-toggle { display: none; }
.tv .rail-close { display: none; }
.tv .rail-backdrop { display: none; }
.tv .rail h2 { color: var(--tv-dim); padding-top: 8px; }

/* ---------- watchlist header, cloud save state, symbol search ---------- */
.tv .wl-head { display: flex; align-items: baseline; justify-content: space-between; padding-right: 12px; }
.tv .save-state { font-size: 10.5px; color: var(--tv-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tv .save-state.on { color: var(--tv-up); }
.tv .wl-search { position: relative; padding: 2px 12px 6px; }
.tv .wl-search input {
  width: 100%; box-sizing: border-box;
  background: var(--tv-panel); border: 1px solid var(--tv-border); border-radius: 6px;
  color: var(--tv-text); font: 500 12px "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  padding: 6px 8px; outline: none;
}
.tv .wl-search input::placeholder { color: var(--tv-dim); }
.tv .wl-search input:focus { border-color: var(--tv-blue); }
.tv .wl-results {
  position: absolute; top: calc(100% + 2px); left: 12px; right: 12px; z-index: 50;
  background: var(--tv-panel); border: 1px solid rgba(127, 127, 127, 0.25);
  border-radius: 8px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  padding: 4px; max-height: 320px; overflow-y: auto;
}
.tv .wl-results.hidden { display: none; }
.tv .wl-result {
  display: flex; align-items: baseline; gap: 8px;
  padding: 7px 8px; border-radius: 5px; cursor: pointer;
}
.tv .wl-result:hover { background: rgba(127, 127, 127, 0.14); }
.tv .wl-res-sym { font-weight: 600; font-size: 12.5px; color: var(--tv-text); }
.tv .wl-res-name { font-size: 11.5px; color: var(--tv-dim); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv .wl-res-kind { font-size: 10px; color: var(--tv-dim); white-space: nowrap; }
.tv .wl-inlist { color: var(--tv-up); font-weight: 600; }
.tv .wl-noresult { padding: 8px; font-size: 12px; color: var(--tv-dim); }
.tv .wl-remove {
  display: none; width: 17px; height: 17px; flex: none; margin-left: 6px;
  place-items: center; padding: 0;
  background: rgba(127, 127, 127, 0.16); border: none; border-radius: 4px;
  color: var(--tv-dim); font-size: 13px; line-height: 1; cursor: pointer;
}
.tv .wl-remove:hover { color: #ffffff; background: var(--tv-down); }
.tv .wl-row:hover .wl-remove { display: grid; }

.tv .wl-cat {
  color: var(--tv-dim); font-size: 10px; font-weight: 600;
  letter-spacing: 0.12em; margin: 12px 0 2px; padding: 0 12px;
}
.tv .wl-cat:first-child { margin-top: 2px; }
.tv .wl-row {
  padding: 7px 12px; cursor: pointer; border-left: 2px solid transparent;
}
.tv .wl-row:hover { background: rgba(255, 255, 255, 0.03); }
.tv .wl-row.active { background: var(--tv-panel); border-left-color: var(--tv-blue); }
.tv .wl-row.flash { background: rgba(41, 98, 255, 0.16); }
.tv .wl-main { display: flex; justify-content: space-between; align-items: baseline; }
.tv .wl-sym { font-weight: 600; font-size: 12.5px; color: var(--tv-text); }
.tv .wl-px { font-family: var(--mono); font-size: 12.5px; color: var(--tv-text); }
.tv .wl-sub { display: flex; justify-content: space-between; align-items: baseline; margin-top: 2px; }
.tv .wl-feed { font-size: 10px; color: var(--tv-dim); }
.tv .wl-chg { font-family: var(--mono); font-size: 11px; }
.tv .wl-chg.up { color: var(--tv-up); }
.tv .wl-chg.down { color: var(--tv-down); }

.tv .setup-card, .tv .matrix-strip { background: var(--tv-panel); border-color: var(--tv-border); }
.tv .mini-row { background: var(--tv-panel); border-color: var(--tv-border); }
.tv .inst-card { background: var(--tv-panel); border-color: var(--tv-border); }

/* ---------- theme toggle + LIGHT theme (TradingView light palette) ---------- */
.tv .theme-btn {
  display: grid; place-items: center; width: 32px; height: 32px; flex: none;
  background: transparent; border: 1px solid var(--tv-border); border-radius: 6px;
  color: var(--tv-dim); cursor: pointer; padding: 0;
}
.tv .theme-btn:hover { color: var(--tv-text); background: rgba(127, 127, 127, 0.14); }
.tv .theme-btn svg { width: 17px; height: 17px; }
.tv .theme-btn .ic-moon { display: none; }
html.ttj-light .theme-btn .ic-moon { display: block; }
html.ttj-light .theme-btn .ic-sun { display: none; }

html.ttj-light body { background: #ffffff; }
html.ttj-light .tv {
  --tv-bg: #ffffff;
  --tv-panel: #f0f3fa;
  --tv-panel-2: #ffffff;
  --tv-border: #e0e3eb;
  --tv-text: #131722;
  --tv-dim: #6a6d78;
  --tv-bright: #131722;
  --bg: #ffffff;
  --panel: #f0f3fa;
  --panel-2: #ffffff;
  --border: #e0e3eb;
  --text: #131722;
  --text-dim: #6a6d78;
  --accent: #7ba300;
}
html.ttj-light .tv .sym-btn:hover,
html.ttj-light .tv .tf-group button:hover,
html.ttj-light .tv .ind-btn:hover,
html.ttj-light .tv .ind-row:hover,
html.ttj-light .tv .eye:hover,
html.ttj-light .tv .draw-tools .tool:hover,
html.ttj-light .tv .wl-row:hover,
html.ttj-light .tv .range-group button:hover { background: rgba(0, 0, 0, 0.05); }
html.ttj-light .tv .ind-menu { border-color: rgba(0, 0, 0, 0.12); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18); }
html.ttj-light .tv .chart-bottom { background: rgba(255, 255, 255, 0.95); }
html.ttj-light .tv .watermark span { color: #131722; }
html.ttj-light .tv .eye::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M1.4 8S3.6 4.1 8 4.1 14.6 8 14.6 8 12.4 11.9 8 11.9 1.4 8 1.4 8Z' stroke='%23131722' stroke-width='1.15'/%3E%3Ccircle cx='8' cy='8' r='1.9' fill='%23131722'/%3E%3C/svg%3E");
}
html.ttj-light .tv .guardian { background: rgba(0, 0, 0, 0.04); }
html.ttj-light .tv .sc-wm { color: rgba(19, 23, 34, 0.35); }
html.ttj-light .tv .member-box button:hover { border-color: rgba(0, 0, 0, 0.25); }

/* ---------- mobile: full-screen chart + watchlist slide-over drawer ---------- */
@media (max-width: 980px) {
  /* the page is one 100dvh column: topbar (auto) + chart (flex-1), no
     body scroll; the rail leaves the grid and becomes a fixed drawer */
  .tv { height: 100dvh; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
  .tv .main { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); overflow: hidden; }
  .tv .draw-tools { display: none; }
  .tv .chart-wrap { min-height: 0; }

  /* compact single-row topbar */
  .tv .topbar { flex-wrap: nowrap; height: 44px; gap: 6px; padding: 0 8px; }
  .tv .sym-btn { padding: 4px 6px; }
  .tv .sym-btn img { width: 20px; height: 20px; }
  .tv .sym-btn-name { display: none; }
  .tv .sym-btn-sym { font-size: 11.5px; }
  .tv .tf-group {
    display: flex; flex: 1 1 auto; min-width: 0;
    overflow-x: auto; scrollbar-width: none;
  }
  .tv .tf-group::-webkit-scrollbar { display: none; }
  .tv .tf-group button { padding: 4px 6px; font-size: 12px; white-space: nowrap; }
  .tv .ind-btn { padding: 5px 6px; }
  .tv .ind-btn span { display: none; }
  .tv .ind-menu { position: fixed; top: 48px; left: 8px; right: 8px; width: auto; }
  .tv .session-pill { font-size: 10px; padding: 3px 7px; white-space: nowrap; }
  .tv .spacer { flex: 0 0 2px; }
  .tv .wl-toggle {
    display: flex; align-items: center; gap: 6px;
    background: rgba(41, 98, 255, 0.14); border: 1px solid rgba(41, 98, 255, 0.35);
    border-radius: 6px; color: var(--tv-text);
    font-size: 12px; font-weight: 600; padding: 5px 9px; cursor: pointer; white-space: nowrap;
  }
  .tv .member-box { gap: 8px; font-size: 11px; }
  .tv .member-box .admin-link { font-size: 11px; white-space: nowrap; }
  .tv .member-box #memberEmail { display: none; }
  .tv .member-box button { padding: 4px 8px; font-size: 11px; white-space: nowrap; }

  /* status strip: one slim line that never blankets the volume bars */
  .tv .chart-status {
    font-size: 10.5px; max-width: 62vw; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; padding: 3px 7px;
  }

  /* right rail as a slide-over drawer (content unchanged, scrollable) */
  .tv .rail {
    position: fixed; top: 0; right: 0; height: 100dvh; z-index: 90;
    width: min(86vw, 340px);
    border-left: 1px solid var(--tv-border); border-top: none;
    transform: translateX(105%); transition: transform 0.26s ease;
    box-shadow: -14px 0 34px rgba(0, 0, 0, 0.45);
  }
  .tv.rail-open .rail { transform: translateX(0); }
  .tv .rail-backdrop {
    display: block; position: fixed; inset: 0; z-index: 85;
    background: rgba(4, 6, 10, 0.55);
    opacity: 0; pointer-events: none; transition: opacity 0.26s ease;
  }
  .tv.rail-open .rail-backdrop { opacity: 1; pointer-events: auto; }
  .tv .rail-close {
    display: block; margin-left: auto; width: 28px; height: 28px;
    background: transparent; border: none; color: var(--tv-text);
    font-size: 20px; line-height: 1; cursor: pointer; padding: 0;
  }
}