/* ══════════════════════════════════════════════════════════════════
   DASHBOARD HEADER — Premium redesign layer
   Scope: .ntg-dh only (the single Dashboard-page instance of the
   shared .ntg-hd header — see css/ntg-page-header.css). Every rule
   here is namespaced under .ntg-dh so the Trade Log / Watchlist /
   Account Tracker / Backtesting Lab / Trash headers, which reuse the
   same .ntg-hd base classes, are completely unaffected.
   Loaded after ntg-page-header.css so it wins the cascade for the
   pieces it overrides.
   ══════════════════════════════════════════════════════════════════ */

/* Quiet entrance — a single settle, not a flourish */
.ntg-dh{ animation: ntgDhIn .5s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes ntgDhIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){ .ntg-dh{ animation:none; } }

/* ── Live clock pill — small pulsing dot instead of a static badge ── */
.ntg-dh .ntg-hd-clock{
  display:inline-flex; align-items:center; gap:7px;
}
.ntg-dh .ntg-hd-clock::before{
  content:''; width:6px; height:6px; border-radius:50%; flex:none;
  background:var(--green); box-shadow:0 0 0 3px rgba(52,211,153,0.16);
  animation:ntgDhLive 2.4s ease-in-out infinite;
}
@keyframes ntgDhLive{ 0%,100%{ opacity:.55; transform:scale(.82); } 50%{ opacity:1; transform:scale(1); } }
@media (prefers-reduced-motion: reduce){ .ntg-dh .ntg-hd-clock::before{ animation:none; opacity:1; transform:none; } }

/* ── Sparkline — fills its container so the JS chart can stay 100%/100% ── */
.ntg-dh .ntg-hd-wave{ width:104px; height:30px; transition:opacity .3s ease; }

/* ── Stat block — period title is the primary contextual line, then a
   lightweight stat row (Net P&L carries the strongest weight), then a
   quiet last-updated line. A hairline divider separates it from the
   hero text above without turning it into a boxed KPI card. ── */
.ntg-dh-stats{
  position:relative; z-index:1;
  margin-top:14px; padding-top:12px;
  border-top:1px solid var(--glass-border);
}
.ntg-dh-period{
  font-family:var(--font-head,inherit);
  font-size:13.5px; font-weight:800; color:var(--text);
  letter-spacing:-.1px; line-height:1.3;
}
.ntg-dh-statrow{
  display:flex; align-items:baseline; flex-wrap:wrap;
  gap:9px; margin-top:6px;
}
.ntg-dh-stat{
  font-size:12px; font-weight:600; color:var(--text2);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.ntg-dh-stat--pnl{
  font-size:13.5px; font-weight:800; color:var(--text);
  letter-spacing:-.1px;
}
.ntg-dh-stat--pnl.pos{ color:var(--green); }
.ntg-dh-stat--pnl.neg{ color:var(--red); }
.ntg-dh-dot{
  width:3px; height:3px; border-radius:50%; background:var(--text3);
  opacity:.55; flex:none; align-self:center;
}
.ntg-dh-updated{
  margin-top:7px; font-size:10.5px; color:var(--text3); opacity:.8;
  letter-spacing:.01em;
}

/* ── Progress row — slightly taller track, calmer proportions ── */
.ntg-dh .ntg-hd-progress{ margin-top:14px; }
.ntg-dh .ntg-hd-progress-track{ height:6px; }
.ntg-dh .ntg-hd-progress-label{ font-size:10.5px; }

/* ══ Responsive — intentional mobile composition, not a shrunken
   desktop header. Breakpoints line up with the base .ntg-hd system
   (720px stacking point) plus two tighter steps for small phones. ══ */
@media (max-width:720px){
  /* Detach the sparkline from the clock row and pin it to the top-right
     corner of the header (anchored to .ntg-hd-top, which is already a
     positioned container) so it sits alongside the eyebrow/title the
     way it does on desktop — instead of stacking with the clock below
     the subtitle and pushing everything else down. The clock stays
     exactly where it already sits (its own row, right-aligned, below
     the subtitle) — only the sparkline moves. */
  .ntg-dh .ntg-hd-top{ position:relative; }
  /* .ntg-hd-right normally establishes its own positioning context
     (position:relative, for z-index stacking) — neutralize that here
     so the wave's position:absolute below resolves against .ntg-hd-top
     instead, which is what actually pins it to the header's corner
     regardless of how tall the title/subtitle block grows. */
  .ntg-dh .ntg-hd-right{ position:static; align-self:flex-end; margin-top:-4px; gap:8px; }
  .ntg-dh .ntg-hd-wave{
    position:absolute; top:0; right:0;
    width:64px; height:22px; margin:0;
  }
  .ntg-dh-stats{ margin-top:12px; padding-top:10px; }
  .ntg-dh-statrow{ font-size:11.5px; gap:7px; }
  .ntg-dh-stat{ font-size:11.5px; }
  .ntg-dh-stat--pnl{ font-size:13px; }
}
@media (max-width:480px){
  .ntg-dh .ntg-hd-clock{ font-size:10.5px; padding:3px 8px; gap:6px; }
  .ntg-dh .ntg-hd-wave{ width:52px; height:20px; }
  .ntg-dh-period{ font-size:12.5px; }
  .ntg-dh-statrow{ gap:6px 9px; }
  .ntg-dh-stat{ font-size:11px; }
  .ntg-dh-stat--pnl{ font-size:12.5px; }
  .ntg-dh-updated{ font-size:9.5px; }
}
@media (max-width:360px){
  .ntg-dh .ntg-hd-wave{ width:40px; height:18px; }
  .ntg-dh .ntg-hd-clock{ padding:3px 7px; }
}