/* ══════════════════════════════════════════════════════════════════
   CALENDAR PAGE — Premium Analytical Layer
   Scope: #page-calendar only. Loaded after dashboard-premium.css,
   reuses its .pf3-popover-* component styles.
   ══════════════════════════════════════════════════════════════════ */

/* ══ Analytics cards / score / insights / coach — lift + glow ═════ */
#page-calendar .cal-an-card,
#page-calendar .cal2-score-card,
#page-calendar .cal2-insights-card,
#page-calendar .cal2-coach-card,
#page-calendar .cal-week-card{
  transition: transform 220ms cubic-bezier(.16,1,.3,1), box-shadow 220ms ease, border-color 220ms ease;
}
#page-calendar .cal-an-card:hover,
#page-calendar .cal2-score-card:hover,
#page-calendar .cal2-coach-card:hover{
  transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.26); border-color: var(--glass-border-h);
}
#page-calendar .cal-an-card[data-pf3-tap]{ cursor:pointer; }
#page-calendar .cal-an-card .cal-an-toggle-hint,
#page-calendar .cal-an-card .pf3-expand-hint{
  font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.3px;
  color:var(--text3); opacity:0; transition:opacity 200ms ease; margin-left:4px;
}
#page-calendar .cal-an-card:hover .pf3-expand-hint{ opacity:.75; }

/* ══ Trading Score — animated bars + glow-on-improve ══════════════ */
.cal2-score-bar-fill{ transition: width 800ms cubic-bezier(.16,1,.3,1); }
.cal2-score-card.pf3-pulse-up{ animation: pf3-cal-score-glow 1.4s cubic-bezier(.16,1,.3,1); }
@keyframes pf3-cal-score-glow{
  0%{ box-shadow:0 0 0 rgba(52,211,153,0); }
  30%{ box-shadow:0 0 30px rgba(52,211,153,.4); }
  100%{ box-shadow:0 0 0 rgba(52,211,153,0); }
}

/* ══ Monthly Intelligence — confidence bar + stagger entrance ═════ */
.cal2-insight-card{
  position:relative; overflow:hidden;
  animation: pf3-chip-in 320ms cubic-bezier(.16,1,.3,1) backwards;
  transition: transform 200ms cubic-bezier(.16,1,.3,1), border-color 200ms ease;
}
.cal2-insight-card:hover{ transform: translateY(-1px); }
@keyframes pf3-chip-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }
.pf3-insight-conf-track{ height:3px; border-radius:var(--r-full); background:var(--glass-2); margin-top:8px; overflow:hidden; }
.pf3-insight-conf-fill{ height:100%; border-radius:var(--r-full); width:0%; transition:width 900ms cubic-bezier(.16,1,.3,1); }
.cal2-insight-card.green .pf3-insight-conf-fill{ background:var(--green); }
.cal2-insight-card.red .pf3-insight-conf-fill{ background:var(--red); }
.cal2-insight-card.amber .pf3-insight-conf-fill{ background:var(--gold); }
.cal2-insight-card.blue .pf3-insight-conf-fill{ background:var(--blue); }
.pf3-insight-conf-label{ font-size:9px; color:var(--text3); margin-top:3px; font-weight:600; }

/* ══ AI Coach preview — confidence ring ════════════════════════════ */
.pf3-coach-ring-wrap{ display:flex; align-items:center; gap:8px; }
.pf3-coach-ring-wrap svg{ flex-shrink:0; }

/* ══ Day cell — profit ring (replaces flat dot) ════════════════════ */
.cal-day{ position:relative; }
.pf3-day-ring{
  display:none;
  width:14px; height:14px; border-radius:50%; flex-shrink:0;
  align-items:center; justify-content:center;
}
.pf3-day-ring-today{ animation: pf3-day-pulse 1.8s ease-in-out infinite; }
@keyframes pf3-day-pulse{ 0%,100%{ filter:drop-shadow(0 0 0 rgba(96,165,250,0)); } 50%{ filter:drop-shadow(0 0 5px rgba(96,165,250,.7)); } }

/* ══ Day cell — mini intraday sparkline ═══════════════════════════ */
.pf3-day-spark{ width:100%; height:16px; margin-top:2px; opacity:.85; }
.pf3-day-spark path{ vector-effect: non-scaling-stroke; }

/* ══ Reduced motion ═══════════════════════════════════════════════ */
html.nx-reduce-motion .cal2-score-card.pf3-pulse-up,
html.nx-reduce-motion .pf3-day-ring-today,
html.nx-reduce-motion .cal2-insight-card{ animation:none !important; }

/* ══ Tap-to-expand popover ═════════════════════════════════════════
   The shared .pf3-popover-backdrop / .pf3-popover component (used by
   the calendar's Win Rate / P&L / Profit Factor / Day Win Rate cards)
   is defined once in dashboard-premium.css with a solid, opaque
   background so it can't show the page through it in dark mode. */

/* ══ Mobile ═══════════════════════════════════════════════════════ */
@media (max-width:640px){
  .pf3-day-spark{ display:none; } /* keep mobile cells simple/uncluttered per touch-friendly requirement */
  .pf3-day-ring{ width:11px; height:11px; }
}