/* ══════════════════════════════════════════════════════════════════
   TRADE LOG PAGE — Premium Analytical Layer
   Scope: #page-tradelog only.
   ══════════════════════════════════════════════════════════════════ */

/* ══ Table layout fix ═══════════════════════════════════════════════
   The base table (dashboard-tradelog.css) clips cell overflow — nowrap
   + hidden + ellipsis — which was fine for short plain text but
   truncates/overlaps once we add wider content (direction pill, star
   row, badges, expand-row story). Forcing this with !important since
   the base rule is likely also !important or higher-specificity and
   was winning over the previous non-!important version of this fix. */
#page-tradelog .data-table-wrap{ overflow-x:auto !important; }
#page-tradelog #trade-table{ table-layout:auto !important; width:auto !important; min-width:100% !important; }
#page-tradelog #trade-table td,
#page-tradelog #trade-table th{
  overflow:visible !important; text-overflow:clip !important; white-space:normal !important;
}
/* Column-specific backups, in case the base CSS targets td by position
   rather than by element — column order: 1 checkbox, 2 date, 3 pair,
   4 pos, 5 R:R, 6 PnL, 7 outcome, 8 killzone, 9 model, 10 account,
   11 trade rating (stars). */
#page-tradelog #trade-table td:nth-child(4),
#page-tradelog #trade-table td:nth-child(11){
  overflow:visible !important; text-overflow:clip !important; white-space:nowrap !important;
}

/* ══ Row session color accent ═════════════════════════════════════ */
.trade-log-row{ border-left: 3px solid transparent; transition: border-color 200ms ease, background 150ms ease; }

/* ══ RR mini bar ═══════════════════════════════════════════════════ */
.pf3-tl-rr{ display:flex; flex-direction:column; gap:3px; min-width:56px; }
.pf3-tl-rr-label{ font-family:var(--font-mono); font-size:11px; color:var(--text2); }
.pf3-tl-rr-track{ display:flex; height:4px; border-radius:var(--r-full); overflow:hidden; background:var(--glass-2); width:100%; max-width:64px; }
.pf3-tl-rr-risk{ background:var(--red); opacity:.65; }
.pf3-tl-rr-reward{ background:var(--green); }

/* ══ Direction pill ═══════════════════════════════════════════════ */
.pf3-tl-dir{
  display:inline-flex; align-items:center; gap:3px;
  padding:2px 8px; border-radius:var(--r-full); font-size:10.5px; font-weight:700;
  font-family:var(--font-mono); white-space:nowrap;
}
.pf3-tl-dir.buy{ background:var(--green-dim); color:var(--green); }
.pf3-tl-dir.sell{ background:var(--red-dim); color:var(--red); }
.pf3-tl-dir .icn{ width:9px; height:9px; flex-shrink:0; }

/* ══ PnL count-up flash ════════════════════════════════════════════ */
@keyframes pf3-tl-pnl-flash{
  0%{ opacity:0; transform:translateX(-3px); }
  100%{ opacity:1; transform:translateX(0); }
}
.pf3-pnl-flash{ animation: pf3-tl-pnl-flash 320ms ease both; }

/* ══ Stars cell layout (expand btn + stars + badges) ═══════════════ */
td.stars{ display:flex; align-items:center; flex-wrap:nowrap; gap:6px; white-space:nowrap !important; }
td.stars > *{ flex-shrink:0; } /* nothing in this row is allowed to get squeezed to invisible — the table wrapper scrolls horizontally instead */
td.stars .pf3-tl-badges{ flex-basis:auto; margin-top:0; }

/* ══ Quality + confidence badges ═══════════════════════════════════ */
.pf3-tl-badges{ display:flex; align-items:center; gap:5px; margin-top:0; flex-wrap:nowrap; flex-shrink:0; }
.pf3-tl-quality{
  font-size:9px; font-weight:800; letter-spacing:.3px; padding:1.5px 6px; border-radius:var(--r-full);
  border:1px solid transparent;
}
.pf3-tl-quality.elite{ background:rgba(52,211,153,.15); color:var(--green); border-color:rgba(52,211,153,.3); }
.pf3-tl-quality.strong{ background:rgba(96,165,250,.15); color:var(--blue); border-color:rgba(96,165,250,.3); }
.pf3-tl-quality.average{ background:rgba(251,191,36,.15); color:var(--gold); border-color:rgba(251,191,36,.3); }
.pf3-tl-quality.weak{ background:rgba(248,113,113,.15); color:var(--red); border-color:rgba(248,113,113,.3); }

.pf3-tl-confidence{ display:inline-flex; align-items:center; gap:4px; font-size:9.5px; color:var(--text3); font-weight:600; }
.pf3-tl-conf-ring{ width:14px; height:14px; flex-shrink:0; }
.pf3-tl-conf-ring circle.pf3-conf-bg{ stroke:var(--glass-3); }
.pf3-tl-conf-ring circle.pf3-conf-fg{ stroke-linecap:round; transition: stroke-dashoffset 500ms cubic-bezier(.16,1,.3,1); }

/* ══ Expand toggle + expanded row ══════════════════════════════════ */
.pf3-tl-expand-btn{
  width:22px; height:22px; border-radius:var(--r-sm); border:1px solid var(--glass-border);
  background:var(--glass-1); color:var(--text3); display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; transition: transform 200ms ease, background 150ms ease, color 150ms ease; margin-right:4px;
}
.pf3-tl-expand-btn:hover{ background:var(--glass-2); color:var(--text2); }
.pf3-tl-expand-btn.open{ transform:rotate(90deg); color:var(--blue); }
.pf3-tl-expand-btn .icn{ width:11px; height:11px; }

.pf3-tl-expand-row td{
  background: var(--glass-0); padding:0 !important; border-top:none;
  white-space:normal; overflow:visible;
}
.pf3-tl-expand-inner{
  padding:16px 20px 18px; animation: pf3-fade-in 220ms cubic-bezier(.16,1,.3,1);
  border-left:2px solid var(--glass-border);
}
@keyframes pf3-fade-in{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:translateY(0); } }
.pf3-tl-timeline{ display:flex; flex-wrap:wrap; gap:0; }
.pf3-tl-tl-step{
  flex:1 1 180px; min-width:180px; position:relative; padding:0 16px 0 20px;
  border-left:2px solid var(--glass-border);
}
.pf3-tl-tl-step:first-child{ border-left:2px solid var(--blue); }
.pf3-tl-tl-step::before{
  content:''; position:absolute; left:-5px; top:2px; width:8px; height:8px; border-radius:50%;
  background:var(--glass-3); border:2px solid var(--bg2,#0b0f17);
}
.pf3-tl-tl-step:first-child::before{ background:var(--blue); }
.pf3-tl-tl-step.win::before{ background:var(--green); }
.pf3-tl-tl-step.loss::before{ background:var(--red); }
.pf3-tl-tl-label{ font-size:9.5px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:var(--text3); margin-bottom:5px; }
.pf3-tl-tl-content{ font-size:12px; color:var(--text2); line-height:1.55; white-space:normal; word-break:break-word; }
.pf3-tl-tl-content .empty{ color:var(--text3); font-style:italic; }
.pf3-tl-tl-tags{ display:flex; gap:5px; flex-wrap:wrap; margin-top:6px; }
.pf3-tl-tag{ font-size:9.5px; padding:2px 7px; border-radius:var(--r-full); background:var(--glass-2); border:1px solid var(--glass-border); color:var(--text3); }
.pf3-tl-tag.warn{ background:rgba(248,113,113,.12); color:var(--red); border-color:rgba(248,113,113,.25); }
.pf3-tl-tag.good{ background:rgba(52,211,153,.12); color:var(--green); border-color:rgba(52,211,153,.25); }

/* ══ Mobile ═══════════════════════════════════════════════════════ */
@media (max-width:768px){
  .pf3-tl-rr-track{ max-width:44px; }
  .pf3-tl-tl-step{ flex:1 1 100%; }
  td.stars{ flex-wrap:wrap; white-space:normal !important; }
  td.stars > *{ flex-shrink:0; }
  td.stars .pf3-tl-badges{ flex-basis:100%; margin-top:4px; }
}

html.nx-reduce-motion .pf3-pnl-flash,
html.nx-reduce-motion .pf3-tl-expand-inner{ animation:none !important; }