/* ══════════════════════════════════════════════════════════════════════════
   Live Contracts Tracker — isolated CSS (Phase 6 · Step 2)
   متتبع العقود اللحظي

   CONTAINMENT: every selector below is scoped under #lc-root. There is no
   :root rule, no body rule, no bare element rule and no global reset, because
   this file is injected onto the shared /flowmap page and must not be able to
   restyle anything outside its own container. The design tokens are declared
   ON #lc-root itself, not on :root, for the same reason.

   RTL is scoped to #lc-root[dir="rtl"]. This file never writes to
   documentElement or body.
   ══════════════════════════════════════════════════════════════════════════ */

#lc-root{
  /* Tokens mirror the FlowMap dark palette (flow_pulse.css) but stay local. */
  --lc-bg:        #0b0d12;
  --lc-bg2:       #111319;
  --lc-bg3:       #181c25;
  --lc-bg-hover:  #1c2130;
  --lc-border:    #232736;
  --lc-border-lt: #2e3446;
  --lc-text:      #e2e8f0;
  --lc-text-dim:  #64748b;
  --lc-text-mid:  #94a3b8;
  --lc-green:     #10b981;
  --lc-red:       #ef4444;
  --lc-amber:     #f59e0b;
  --lc-blue:      #3b82f6;

  /* The unrealized tone. % Peak never uses green/red — that palette is
     reserved for % Close, the only column that is an actual session result. */
  --lc-unreal:    #d9a441;
  --lc-unreal-bg: rgba(217,164,65,.07);

  display:block;
  box-sizing:border-box;
  background:var(--lc-bg);
  color:var(--lc-text);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,'Noto Sans Arabic',sans-serif;
  font-size:13px;
  line-height:1.45;
  padding:14px 16px 22px;
}
#lc-root *,
#lc-root *::before,
#lc-root *::after{ box-sizing:border-box; }

/* ── Header ─────────────────────────────────────────────────────────────── */
#lc-root .lc-head{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding-bottom:10px; border-bottom:1px solid var(--lc-border);
}
#lc-root .lc-title{
  font-size:15px; font-weight:700; color:#fff; white-space:nowrap; margin:0;
}
#lc-root .lc-session{
  font-size:11px; color:var(--lc-text-dim);
  background:var(--lc-bg3); border:1px solid var(--lc-border);
  border-radius:5px; padding:2px 8px;
}
#lc-root .lc-counts{
  margin-inline-start:auto;
  font-size:11px; color:var(--lc-text-dim); white-space:nowrap;
}
#lc-root .lc-counts b{ color:var(--lc-text-mid); font-weight:600; }

/* ── Legend: the whole point of the tab, stated before the data ─────────── */
#lc-root .lc-legend{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin:10px 0 12px; padding:9px 12px;
  background:var(--lc-bg2); border:1px solid var(--lc-border);
  border-radius:7px; font-size:11.5px; color:var(--lc-text-dim);
}
#lc-root .lc-legend-item{ display:flex; align-items:center; gap:6px; }
#lc-root .lc-chip{
  font-size:11px; font-weight:700; padding:1px 7px; border-radius:4px;
  white-space:nowrap;
}
#lc-root .lc-chip.unreal{
  color:var(--lc-unreal); background:var(--lc-unreal-bg);
  border:1px dashed rgba(217,164,65,.45);
}
#lc-root .lc-chip.real{
  color:var(--lc-green); background:rgba(16,185,129,.10);
  border:1px solid rgba(16,185,129,.35);
}

/* ── Table ──────────────────────────────────────────────────────────────── */
#lc-root .lc-scroll{
  overflow-x:auto; overflow-y:visible;
  border:1px solid var(--lc-border); border-radius:8px;
  background:var(--lc-bg2);
}
#lc-root table.lc-table{
  width:100%; border-collapse:separate; border-spacing:0;
  font-size:12px; white-space:nowrap;
}
#lc-root .lc-table thead th{
  position:sticky; top:0; z-index:2;
  background:var(--lc-bg3);
  color:var(--lc-text-mid);
  font-size:10.5px; font-weight:700; letter-spacing:.2px;
  text-align:center; padding:8px 10px;
  border-bottom:1px solid var(--lc-border-lt);
  user-select:none;
}
#lc-root .lc-table thead th.lc-th-sorted{
  color:var(--lc-text); background:#1e2431;
}
#lc-root .lc-table thead th .lc-sort-caret{
  font-size:9px; color:var(--lc-blue); margin-inline-start:3px;
}
/* The unrealized column is marked in the HEADER too, not only in the cells. */
#lc-root .lc-table thead th.lc-th-unreal{
  color:var(--lc-unreal); background:rgba(217,164,65,.06);
}

#lc-root .lc-table tbody td{
  padding:7px 10px; text-align:center;
  border-bottom:1px solid rgba(35,39,54,.7);
  color:var(--lc-text);
}
#lc-root .lc-table tbody tr:last-child td{ border-bottom:0; }
#lc-root .lc-table tbody tr:nth-child(even) td{ background:rgba(255,255,255,.014); }
#lc-root .lc-table tbody tr:hover td{ background:var(--lc-bg-hover); }

/* Numeric / date cells force LTR so Latin digits never reorder inside RTL. */
#lc-root .lc-num{ font-variant-numeric:tabular-nums; }

#lc-root .lc-ticker{ font-weight:700; color:#fff; letter-spacing:.2px; }
#lc-root .lc-dim{ color:var(--lc-text-dim); font-size:11px; }

/* Side badges */
#lc-root .lc-side{
  display:inline-block; min-width:44px;
  font-size:10px; font-weight:800; letter-spacing:.4px;
  padding:2px 7px; border-radius:4px;
}
#lc-root .lc-side.call{ color:var(--lc-green); background:rgba(16,185,129,.12); border:1px solid rgba(16,185,129,.30); }
#lc-root .lc-side.put { color:var(--lc-red);   background:rgba(239,68,68,.12);  border:1px solid rgba(239,68,68,.30); }

/* ── % Peak — UNREALIZED. Deliberately not green/red. ───────────────────── */
#lc-root .lc-pct-peak{
  color:var(--lc-unreal);
  background:var(--lc-unreal-bg);
  font-weight:600;
  border-bottom:1px dashed rgba(217,164,65,.5);
}
#lc-root .lc-pct-peak .lc-unreal-mark{
  font-size:9px; opacity:.85; margin-inline-end:3px;
}

/* ── % Close — the actual session result. ───────────────────────────────── */
#lc-root .lc-pct-close{ font-weight:700; }
#lc-root .lc-pct-close.up  { color:var(--lc-green); }
#lc-root .lc-pct-close.down{ color:var(--lc-red); }
#lc-root .lc-pct-close.flat{ color:var(--lc-text-mid); }

/* Index / reference-only rows */
#lc-root tr.lc-index-row td{ background:rgba(59,130,246,.045); }
#lc-root .lc-index-tag{
  font-size:9px; font-weight:700; color:var(--lc-blue);
  border:1px solid rgba(59,130,246,.35); background:rgba(59,130,246,.10);
  border-radius:3px; padding:0 4px; margin-inline-start:5px;
}

/* Round separator: a hairline where the round-robin rolls to the next round */
#lc-root tr.lc-round-start td{ border-top:1px solid var(--lc-border-lt); }
#lc-root .lc-round-badge{
  font-size:9px; color:var(--lc-text-dim);
  border:1px solid var(--lc-border); border-radius:3px; padding:0 4px;
}

/* ── States ─────────────────────────────────────────────────────────────── */
#lc-root .lc-state{
  padding:34px 16px; text-align:center;
  color:var(--lc-text-dim); font-size:12.5px;
}
#lc-root .lc-state.error{ color:var(--lc-red); }
#lc-root .lc-spinner{
  display:inline-block; width:15px; height:15px; margin-inline-end:8px;
  vertical-align:-3px; border-radius:50%;
  border:2px solid var(--lc-border-lt); border-top-color:var(--lc-blue);
  animation:lc-spin .8s linear infinite;
}
@keyframes lc-spin{ to{ transform:rotate(360deg); } }

/* ── RTL / LTR — scoped to the container only ───────────────────────────── */
#lc-root[dir="rtl"]{ text-align:right; }
#lc-root[dir="ltr"]{ text-align:left; }
#lc-root[dir="rtl"] .lc-table thead th,
#lc-root[dir="rtl"] .lc-table tbody td,
#lc-root[dir="ltr"] .lc-table thead th,
#lc-root[dir="ltr"] .lc-table tbody td{ text-align:center; }

/* ── Narrow screens ─────────────────────────────────────────────────────── */
@media (max-width:820px){
  #lc-root{ padding:10px 8px 18px; font-size:12px; }
  #lc-root .lc-table{ font-size:11px; }
  #lc-root .lc-table thead th{ padding:7px 7px; }
  #lc-root .lc-table tbody td{ padding:6px 7px; }
  #lc-root .lc-counts{ margin-inline-start:0; width:100%; }
}

/* ── Panel: controls + filters (Step 3) ─────────────────────────────────── */
/* Display-only. Nothing in here can affect what is tracked, stored, or any
   threshold — it selects and hides rows that the endpoint already returned. */
#lc-root .lc-panel{ display:flex; flex-direction:column; gap:8px; margin:12px 0 14px; }

#lc-root .lc-panel-row{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:9px 14px;
  padding:10px 12px;
  background:var(--lc-bg2);
  border:1px solid var(--lc-border);
  border-radius:10px;
}

#lc-root .lc-panel-tag{
  align-self:center; min-width:52px;
  font-size:11px; font-weight:700;
  color:var(--lc-text-dim);
  padding-inline-end:8px;
  border-inline-end:1px solid var(--lc-border);
}

#lc-root .lc-field{ display:flex; flex-direction:column; gap:3px; }
#lc-root .lc-field-lbl{ font-size:10.5px; color:var(--lc-text-dim); white-space:nowrap; }

#lc-root .lc-input{
  background:var(--lc-bg3);
  color:var(--lc-text);
  border:1px solid var(--lc-border-lt);
  border-radius:7px;
  padding:5px 8px;
  font-size:12px;
  font-family:inherit;
  min-height:29px;
  outline:none;
}
#lc-root .lc-input:focus{ border-color:var(--lc-blue); }
#lc-root select.lc-input{ cursor:pointer; }
#lc-root .lc-num-in{ width:74px; }
#lc-root .lc-search{ width:112px; }
#lc-root .lc-range-pair{ display:flex; gap:5px; }

#lc-root .lc-toggle{
  display:flex; align-items:center; gap:6px; padding-bottom:6px;
  font-size:12px; color:var(--lc-text-mid);
  cursor:pointer; user-select:none;
}
#lc-root .lc-toggle input{
  accent-color:var(--lc-blue); width:14px; height:14px; cursor:pointer; margin:0;
}

#lc-root .lc-reset{
  background:transparent; color:var(--lc-text-dim);
  border:1px solid var(--lc-border-lt); border-radius:7px;
  padding:5px 10px; font-size:11.5px; font-family:inherit;
  cursor:pointer; min-height:29px;
}
#lc-root .lc-reset:hover{ color:var(--lc-text); border-color:var(--lc-text-dim); }

/* "filtered" chip in the header — the count above is a subset, say so. */
#lc-root .lc-filtered{
  font-size:10.5px; font-weight:700;
  color:var(--lc-blue);
  border:1px solid var(--lc-blue);
  border-radius:20px; padding:1px 8px;
}
#lc-root .lc-filtered[hidden]{ display:none; }

/* ── Scope hint (Step 4) ────────────────────────────────────────────────── */
/* Sits directly under the row counter it qualifies, never inside the guide.
   Only rendered when a filter is active AND the per-ticker cap is on, so it
   is never noise. It is not dismissible on purpose: it already self-clears
   the moment either condition stops holding, and a sticky dismissal would
   permanently hide a warning that explains a missing row. */
#lc-root .lc-hint{
  display:flex; align-items:flex-start; gap:8px;
  margin:9px 0 0; padding:7px 11px;
  background:rgba(217,164,65,.07);
  border:1px solid rgba(217,164,65,.32);
  border-radius:7px;
  font-size:11.5px; line-height:1.6;
  color:var(--lc-text-mid);
}
#lc-root .lc-hint[hidden]{ display:none; }
#lc-root .lc-hint-ico{
  flex:0 0 auto;
  width:15px; height:15px; margin-top:1px;
  border-radius:50%;
  background:rgba(217,164,65,.18);
  color:var(--lc-unreal);
  font-size:10px; font-weight:800; line-height:15px; text-align:center;
}
/* The fix is a control, not a description of a control — one tap away. */
#lc-root .lc-hint-act{
  display:inline; padding:0 4px; margin:0 1px;
  background:transparent; border:0; border-bottom:1px dashed var(--lc-unreal);
  color:var(--lc-unreal);
  font-family:inherit; font-size:inherit; font-weight:700;
  cursor:pointer;
}
#lc-root .lc-hint-act:hover{ color:#f0c069; border-bottom-style:solid; }

/* ── Guide accordion (Step 4) ───────────────────────────────────────────── */
#lc-root .lc-guide-btn{
  background:transparent; color:var(--lc-text-dim);
  border:1px solid var(--lc-border-lt); border-radius:20px;
  padding:2px 10px; font-size:11px; font-family:inherit;
  cursor:pointer; white-space:nowrap;
}
#lc-root .lc-guide-btn:hover{ color:var(--lc-text); border-color:var(--lc-text-dim); }

/* display, not max-height: a max-height accordion silently clips whatever
   overflows the guessed value, and this panel's height is language- and
   width-dependent. */
#lc-root .lc-guide{ display:none; }
#lc-root .lc-guide.open{ display:block; animation:lc-guide-in .18s ease-out; }
@keyframes lc-guide-in{ from{ opacity:0; transform:translateY(-4px); } }

#lc-root .lc-guide-inner{
  margin:10px 0 2px; padding:14px 16px;
  max-width:900px;
  background:var(--lc-bg2);
  border:1px solid var(--lc-border);
  border-radius:10px;
  font-size:12px; line-height:1.75;
  color:var(--lc-text-mid);
}
#lc-root .lc-g-sec + .lc-g-sec{
  margin-top:13px; padding-top:13px;
  border-top:1px solid var(--lc-border);
}
#lc-root .lc-guide-inner h4{
  margin:0 0 5px; font-size:12.5px; font-weight:700; color:var(--lc-text);
}
#lc-root .lc-guide-inner p{ margin:0 0 6px; }
#lc-root .lc-guide-inner p:last-child{ margin-bottom:0; }
#lc-root .lc-guide-inner b{ color:var(--lc-text); font-weight:700; }
#lc-root .lc-guide-inner ul{ margin:0; padding-inline-start:18px; }
#lc-root .lc-guide-inner li{ margin:0 0 3px; }
#lc-root .lc-g-note{ color:var(--lc-text-dim); font-size:11px; }
#lc-root .lc-g-note h4{ color:var(--lc-text-dim); }

@media (max-width:640px){
  #lc-root .lc-guide-inner{ padding:11px 12px; font-size:11.5px; }
  #lc-root .lc-panel-row{ gap:8px 10px; }
  #lc-root .lc-num-in{ width:64px; }
  #lc-root .lc-search{ width:96px; }
  #lc-root .lc-panel-tag{
    min-width:100%; border-inline-end:0; padding:0 0 2px;
  }
}