/* =====================================================================
   MT5 — Confluence Multi-Market Trade Desk  ·  style.css
   Aesthetic: "Groww Light" — clean, airy fintech dashboard (groww.in-inspired)
   Display/UI: Outfit · Data/numerals: JetBrains Mono
   ===================================================================== */

:root{
  /* surfaces */
  --bg:        #f4f6fa;
  --bg-2:      #e9edf4;
  --panel:     #ffffff;
  --panel-2:   #ffffff;
  --raise:     #eef1f6;
  --line:      rgba(15,23,42,.08);
  --line-2:    rgba(15,23,42,.14);

  /* text */
  --fg:        #1a2233;
  --muted:     #6b7280;
  --dim:       #9aa3b1;

  /* brand + semantic */
  --gold:        #f0a93c;
  --gold-2:      #a3650f;
  --gold-dim:    rgba(240,169,60,.14);
  --green:       #0a8754;
  --red:         #dc2626;
  --teal:        #00a37a;
  --teal-2:      #00805f;
  --teal-dim:    rgba(0,163,122,.12);
  --blue:        #2f80ed;
  --blue-2:      #1c5fc4;
  --blue-dim:    rgba(47,128,237,.12);
  --saffron:     #ff7a45;
  --saffron-2:   #c2410c;
  --saffron-dim: rgba(255,122,69,.12);
  --violet:      #6c5ce7;
  --violet-2:    #4f3dc9;
  --violet-dim:  rgba(108,92,231,.12);
  --crypto:      #f7931a;
  --crypto-2:    #b9670a;
  --crypto-dim:  rgba(247,147,26,.14);

  /* default accent (overridden per-theme) */
  --accent:      var(--gold);
  --accent-2:    var(--gold-2);
  --accent-dim:  var(--gold-dim);

  --radius:    16px;
  --radius-sm: 10px;
  --shadow:    0 18px 46px rgba(15,23,42,.10), 0 2px 10px rgba(15,23,42,.05);
  --shadow-sm: 0 4px 16px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04);

  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ui:   "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;

  --sidebar-w: 264px;
  --bottombar-h: 62px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  font-family:var(--ui);
  background:var(--bg);
  color:var(--fg);
  font-size:13.5px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
a{ color:inherit; text-decoration:none; }

/* ───────────── AURORA BACKGROUND (disabled — flat Groww-style surface) ───────────── */
.aurora{ display:none; }
.bg-grid{ display:none; }

/* numerals tabular everywhere they matter */
.statusbar,td,th,.kv span,.stat-num,.badge,.sig-badge{
  font-variant-numeric:tabular-nums;
}

/* ═════════════════════ APP SHELL ═════════════════════ */
.app-shell{ display:flex; height:100vh; width:100%; align-items:stretch; }

.content-col{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; height:100vh; overflow:hidden; }

.badge{
  font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.4px;
  padding:3px 9px; border-radius:999px; min-width:46px; text-align:center;
  background:rgba(15,23,42,.05); color:var(--muted); border:1px solid var(--line-2);
}
.badge.b-on{ color:#fff; background:var(--green); border-color:transparent; }
.badge.b-off{ color:#fff; background:var(--red); border-color:transparent; }

/* ───────────── MAIN ───────────── */
#main{ flex:1 1 auto; overflow-y:auto; padding:20px; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none; } }
#main{ animation:fadeUp .35s ease; }

/* in-page tab strip (e.g. India Market: Paper Trade / Backtesting / API & Broker) */
.page-tabs{ display:flex; gap:6px; margin-bottom:18px; flex-wrap:wrap; }
.page-tab-btn{
  font-family:var(--ui); font-size:13px; font-weight:600; color:var(--muted);
  padding:9px 16px; border-radius:999px; border:1px solid var(--line);
  background:var(--panel); cursor:pointer; transition:background .15s, color .15s, border-color .15s;
}
.page-tab-btn:hover{ color:var(--fg); border-color:var(--line-2); }
.page-tab-btn.active{ color:var(--accent-2); background:var(--accent-dim); border-color:transparent; }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

/* cards & grids */
.card{
  background:#ffffff;
  border:1px solid var(--line); border-radius:var(--radius);
  padding:17px; box-shadow:var(--shadow-sm); margin-bottom:16px;
  transition:border-color .2s, transform .2s, box-shadow .2s;
}
.card:hover{ border-color:var(--line-2); box-shadow:var(--shadow); transform:translateY(-1px); }
.card-title{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:12px; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--muted); font-weight:600; margin-bottom:14px;
}
.card-hint{ font-size:10px; letter-spacing:.5px; text-transform:none; color:var(--dim); margin-left:auto; font-weight:400; }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.grid-3{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
.grid-4{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
@media (max-width:1080px){
  .grid-2{ grid-template-columns:1fr; }
  .grid-3,.grid-4{ grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
  .grid-3{ grid-template-columns:1fr; }
}

/* ───────────── BENTO GRID (India Market live console) ───────────── */
.bento-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-bottom:16px; align-items:start; }
.bento-grid .span-2{ grid-column:span 2; }
.bento-grid .hero-tile{ min-height:118px; }
.bento-grid .sig-card{ min-height:118px; }
@media (max-width:1080px){
  .bento-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .bento-grid{ grid-template-columns:1fr; }
  .bento-grid [class*="span-"]{ grid-column:span 1; }
}

.hero-tile{
  background:linear-gradient(135deg, var(--saffron-dim) 0%, #ffffff 65%);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px; display:flex; flex-direction:column; gap:6px; justify-content:center;
  transition:border-color .2s, box-shadow .2s;
}
.hero-tile:hover{ border-color:var(--line-2); box-shadow:var(--shadow); }
.hero-tile label{ font-size:11px; letter-spacing:1.2px; text-transform:uppercase; color:var(--dim); display:flex; align-items:center; gap:8px; }
.hero-num{ font-family:var(--mono); font-size:36px; font-weight:700; line-height:1.15; }
.hero-sub{ font-size:12px; color:var(--muted); font-family:var(--mono); }

/* key-value rows */
.kv{ display:flex; justify-content:space-between; align-items:center; padding:7px 0; border-bottom:1px dashed var(--line); }
.kv:last-child{ border-bottom:0; }
.kv label{ font-size:12px; color:var(--muted); }
.kv span{ font-family:var(--mono); font-size:13.5px; color:var(--fg); }

/* signal cards / badges */
.sig-card .card-title{ justify-content:space-between; }
.sig-badge{
  font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.6px;
  padding:3px 11px; border-radius:7px; text-transform:uppercase;
  background:rgba(15,23,42,.05); color:var(--muted); border:1px solid var(--line-2);
}
.sig-badge.buy,.sig-badge.true,.sig-badge.bull{ color:#fff; background:var(--green); border-color:transparent; }
.sig-badge.sell,.sig-badge.false,.sig-badge.bear{ color:#fff; background:var(--red); border-color:transparent; }
.sig-badge.none,.sig-badge.wait{ color:var(--gold-2); background:var(--gold-dim); border-color:rgba(240,169,60,.3); }

/* stat tiles (paper / backtest) */
.stat-tile{
  background:var(--raise);
  border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:14px 14px 13px; display:flex; flex-direction:column; gap:6px;
}
.stat-tile label{ font-size:10px; letter-spacing:1.2px; text-transform:uppercase; color:var(--dim); }
.stat-num{ font-family:var(--mono); font-size:24px; font-weight:600; }
.stat-num.green{ color:var(--green); }
.stat-num.red{ color:var(--red); }

.equity-container{ position:relative; height:220px; border-radius:12px; overflow:hidden; background:#ffffff; border:1px solid var(--line); }
.equity-container canvas{ width:100%; height:100%; display:block; }

/* tables */
.table-wrap{ overflow:auto; max-height:360px; border-radius:10px; border:1px solid var(--line); }
table{ width:100%; border-collapse:collapse; font-size:12px; }
thead th{
  position:sticky; top:0; z-index:1; text-align:right;
  background:var(--raise); color:var(--muted);
  font-weight:600; font-size:10.5px; letter-spacing:.6px; text-transform:uppercase;
  padding:9px 12px; border-bottom:1px solid var(--line-2); white-space:nowrap;
}
thead th:first-child,tbody td:first-child{ text-align:left; }
thead th:nth-child(2),tbody td:nth-child(2){ text-align:left; }
tbody td{ font-family:var(--mono); text-align:right; padding:7px 12px; border-bottom:1px solid var(--line); color:var(--fg); white-space:nowrap; }
tbody tr:hover td{ background:rgba(15,23,42,.035); }
tbody tr:last-child td{ border-bottom:0; }
.empty-row td{ text-align:center !important; color:var(--dim); padding:22px; font-family:var(--ui); }

.signal-buy{ color:var(--green) !important; font-weight:600; }
.signal-sell{ color:var(--red) !important; font-weight:600; }
.signal-none{ color:var(--dim) !important; }
.bull-text{ color:var(--green) !important; font-weight:600; }
.bear-text{ color:var(--red) !important; font-weight:600; }
.profit-pos{ color:var(--green) !important; font-weight:600; }
.profit-neg{ color:var(--red) !important; font-weight:600; }
.side-buy{ color:var(--gold-2) !important; font-weight:600; }
.side-sell{ color:var(--red) !important; font-weight:600; }

/* buttons */
.btn{
  font:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
  border-radius:9px; padding:9px 16px; border:1px solid var(--line-2);
  background:var(--raise); color:var(--fg); transition:.15s; display:inline-flex; align-items:center; gap:8px;
}
.btn:hover{ border-color:var(--line-2); background:#e3e8f0; transform:translateY(-1px); }
.btn-gold{ background:linear-gradient(180deg, var(--gold), var(--gold-2)); color:#fff; border-color:transparent; box-shadow:0 4px 14px rgba(240,169,60,.35); }
.btn-gold:hover{ filter:brightness(1.06); }
.btn-green{ border-color:rgba(10,135,84,.35); color:var(--green); }
.btn-green.active-green{ background:var(--green); color:#fff; border-color:transparent; }
.btn-red{ border-color:rgba(220,38,38,.35); color:var(--red); }
.btn-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* credential / connect forms */
.field{ margin-bottom:12px; }
.field label{ display:block; font-size:11.5px; color:var(--muted); margin-bottom:5px; font-weight:600; letter-spacing:.2px; }
.field input{
  width:100%; font:inherit; font-family:var(--mono); font-size:13px;
  padding:9px 11px; border-radius:9px; border:1px solid var(--line-2);
  background:var(--raise); color:var(--fg); transition:border-color .15s, background .15s;
}
.field input:focus{ outline:none; border-color:var(--accent); background:#fff; }
.field-hint{ font-size:10.5px; color:var(--dim); margin-top:4px; }

/* stock instrument search (Live Data / Paper Trade pickers) */
.instrument-search{ position:relative; max-width:320px; }
.instrument-search input{
  width:100%; font:inherit; font-family:var(--mono); font-size:13px;
  padding:9px 30px 9px 11px; border-radius:9px; border:1px solid var(--line-2);
  background:var(--raise); color:var(--fg);
}
.instrument-search input:focus{ outline:none; border-color:var(--accent); background:#fff; }
.instrument-search-clear{
  position:absolute; top:50%; right:8px; transform:translateY(-50%);
  width:20px; height:20px; border:none; background:none; cursor:pointer;
  color:var(--dim); font-size:16px; line-height:1; border-radius:50%;
}
.instrument-search-clear:hover{ color:var(--fg); background:var(--line); }
.instrument-search-results{
  position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:20;
  background:var(--panel); border:1px solid var(--line-2); border-radius:9px;
  box-shadow:var(--shadow); max-height:240px; overflow-y:auto;
}
.instrument-search-row{ padding:8px 11px; cursor:pointer; font-size:12.5px; display:flex; justify-content:space-between; gap:8px; }
.instrument-search-row:hover, .instrument-search-row-active{ background:var(--raise); }
.instrument-search-row .isr-symbol{ font-weight:700; font-family:var(--mono); }
.instrument-search-row .isr-name{ color:var(--dim); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.instrument-search-empty{ padding:8px 11px; font-size:11.5px; color:var(--dim); }
.conn-status{
  display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600;
  letter-spacing:.3px; text-transform:uppercase; padding:5px 11px; border-radius:999px;
  background:var(--raise); color:var(--muted); border:1px solid var(--line-2);
}
.conn-status .conn-dot{ width:7px; height:7px; border-radius:50%; background:var(--dim); }
.conn-status.conn-up{ background:rgba(10,135,84,.1); color:var(--green); border-color:rgba(10,135,84,.3); }
.conn-status.conn-up .conn-dot{ background:var(--green); box-shadow:0 0 6px var(--green); }
.conn-status.conn-down{ background:rgba(220,38,38,.1); color:var(--red); border-color:rgba(220,38,38,.3); }
.conn-status.conn-down .conn-dot{ background:var(--red); }

.broker-card-head{ display:flex; align-items:flex-start; gap:12px; margin-bottom:16px; }
.broker-badge{
  flex:0 0 auto; width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:15px; color:#fff;
}
.broker-badge-dhan{ background:linear-gradient(160deg, var(--crypto), var(--crypto-2)); }
.broker-card-title{ flex:1 1 auto; min-width:0; }
.broker-card-title .t{ font-size:14px; font-weight:700; color:var(--fg); }
.broker-card-sub{ font-size:11px; color:var(--muted); margin-top:2px; }

/* paper control widget */
.ctrl-dot{ width:9px; height:9px; border-radius:50%; display:inline-block; background:var(--dim); }
.ctrl-dot.on{ background:var(--green); box-shadow:0 0 8px var(--green); animation:ctrl-dot-pulse 1.6s ease-in-out infinite; }
.ctrl-dot.off{ background:var(--red); }
.ctrl-state{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; }
@keyframes ctrl-dot-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(10,135,84,.45); }
  50%{ box-shadow:0 0 0 5px rgba(10,135,84,0); }
}

/* ───────────── STATUS BAR ───────────── */
.statusbar{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  height:30px; padding:0 16px; font-size:11.5px; font-family:var(--mono);
  background:linear-gradient(90deg, rgba(240,169,60,.10), #ffffff 60%);
  border-top:1px solid var(--line); color:var(--muted);
}
.sb-left,.sb-right{ display:flex; align-items:center; gap:14px; }
.statusbar b{ color:var(--fg); font-weight:600; }
.conn-dot{ width:8px; height:8px; border-radius:50%; background:var(--dim); }

/* ───────────── TOAST ───────────── */
.toast{
  position:fixed; left:50%; bottom:54px; transform:translateX(-50%) translateY(20px);
  background:var(--panel-2); border:1px solid var(--gold); color:var(--fg);
  padding:11px 20px; border-radius:11px; font-size:13px; font-weight:500;
  box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:.25s; z-index:200;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* scrollbars */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:#cbd3e0; border-radius:6px; border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover{ background:#aab4c4; background-clip:padding-box; }
::-webkit-scrollbar-track{ background:transparent; }


/* ───────────── INDIA MARKET ───────────── */
.india-banner{
  display:flex; align-items:center; gap:14px;
  background:linear-gradient(135deg, rgba(255,122,69,.12), #ffffff 65%);
  border:1px solid rgba(255,122,69,.28); border-radius:var(--radius);
  padding:16px 20px; margin-bottom:18px; box-shadow:var(--shadow-sm);
}
.india-banner-icon{
  width:42px; height:42px; border-radius:11px; flex:0 0 auto;
  display:grid; place-items:center; background:rgba(255,122,69,.16); color:var(--saffron-2);
}
.india-banner-icon svg{ width:22px; height:22px; }
.india-banner-title{ font-size:14.5px; font-weight:700; }
.india-banner-sub{ font-size:12px; color:var(--muted); margin-top:2px; }

.tag{
  display:inline-flex; align-items:center; gap:6px; font-family:var(--mono);
  font-size:10.5px; font-weight:600; letter-spacing:.5px; text-transform:uppercase;
  padding:3px 10px; border-radius:999px; border:1px solid var(--line-2);
  background:var(--raise); color:var(--muted);
}
.tag.tag-paper{ color:var(--gold-2); background:var(--gold-dim); border-color:rgba(240,169,60,.3); }
.tag.tag-live{ color:#fff; background:var(--green); border-color:transparent; }

/* ───────────── PAPER/LIVE MODE TOGGLE ───────────── */
.mode-toggle{ display:inline-flex; border-radius:999px; border:1px solid var(--line-2); overflow:hidden; }
.mode-btn{
  font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; border:0;
  padding:9px 16px; background:var(--raise); color:var(--muted); transition:.15s;
}
.mode-btn-paper.active{ background:var(--green); color:#fff; }
.mode-btn-live.active{ background:var(--red); color:#fff; }
.mode-btn:not(.active):hover{ background:#e3e8f0; }
/* the live-armed warning reuses .india-banner's layout, just swapped to a red/amber treatment */
.india-banner-live-warning{
  background:linear-gradient(135deg, rgba(220,38,38,.14), #ffffff 65%);
  border-color:rgba(220,38,38,.32);
}
.india-banner-live-warning .india-banner-icon{ background:rgba(220,38,38,.16); color:var(--red); }
.india-banner-live-warning .india-banner-title{ color:var(--red); }

/* ───────────── COLLAPSIBLE STRATEGY SETTINGS ───────────── */
.settings-disclosure summary{ cursor:pointer; list-style:none; display:flex; }
.settings-disclosure summary::-webkit-details-marker{ display:none; }
.settings-disclosure summary::before{ content:"▸ "; color:var(--dim); }
.settings-disclosure[open] summary::before{ content:"▾ "; }

.india-rules{ display:grid; grid-template-columns:repeat(2, 1fr); gap:10px 22px; }
.india-rule{
  display:flex; justify-content:space-between; align-items:center;
  border-bottom:1px dashed var(--line); padding-bottom:7px; font-size:12.5px;
}
.india-rule label{ color:var(--muted); }
.india-rule span{ font-family:var(--mono); color:var(--fg); }

/* ═════════════════════ RESPONSIVE ═════════════════════ */
@media (max-width:760px){
  .grid-4{ grid-template-columns:1fr; }
  #main{ padding:14px; }
  .statusbar{ padding-bottom:env(safe-area-inset-bottom); }
}