/* ──────────────────────────────────────────────────────────────────────────
   TD Pro v2 Polish — design tokens, utilities, animations
   Ported from TraderDaddy Pro - Whop/frontend/app/globals.css.
   Additive: existing classes still work; new pages opt into .tdp-* utilities.
   Loaded AFTER styles.css so it can override where needed.
   ────────────────────────────────────────────────────────────────────────── */

/* Space Mono import removed — JetBrains Mono is now loaded via _base.html
   as part of the TD Pro font pairing (Space Grotesk UI + JetBrains Mono). */

/* All --tdp-* tokens now live in /css/tokens.css (consolidated 2026-05-05).
   This file used to declare its own :root block; that's been removed so
   there's a single source of truth for token values across the project. */

/* Section/stat label — uppercase, tracked, faint slate */
.tdp-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tdp-text-faint);
    line-height: 1;
    margin-bottom: 0.5rem;
}

/* Big tabular number — TD Pro signature for stat values */
.tdp-big-number {
    font-family: var(--tdp-font-mono);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--tdp-text-strong);
    font-variant-numeric: tabular-nums;
}
.tdp-big-number.amber  { color: var(--tdp-accent); }
.tdp-big-number.bull   { color: var(--tdp-bull); }
.tdp-big-number.bear   { color: var(--tdp-bear); }
.tdp-big-number.info   { color: var(--tdp-info); }
.tdp-big-number.purple { color: var(--tdp-purple); }
@media (min-width: 768px) {
    .tdp-big-number { font-size: 2rem; }
}

/* Mono tabular text */
.tdp-mono {
    font-family: var(--tdp-font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

/* TD Pro card — drop-in container with the signature glass + blue tint */
.tdp-card {
    background: var(--tdp-card-bg);
    border: 1px solid var(--tdp-card-border);
    border-radius: 1rem;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.2s ease;
}
.tdp-card:hover {
    border-color: rgba(63, 123, 255, 0.32);
    box-shadow: 0 0 0 1px rgba(63, 123, 255, 0.08), 0 12px 32px rgba(2, 6, 23, 0.55);
}
.tdp-card.amber-glow {
    border-color: rgba(232, 181, 77, 0.20);
    box-shadow: 0 0 24px rgba(232, 181, 77, 0.05);
}
.tdp-card.amber-glow:hover {
    border-color: rgba(232, 181, 77, 0.45);
    box-shadow: 0 0 32px rgba(232, 181, 77, 0.12), 0 12px 32px rgba(2, 6, 23, 0.55);
}

/* TD Pro panels — split a card into 4 vertical panels with column dividers */
.tdp-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
@media (min-width: 768px) {
    .tdp-panels { grid-template-columns: repeat(4, 1fr); }
}
.tdp-panel {
    padding: 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-right: 1px solid var(--tdp-card-divider);
    border-bottom: 1px solid var(--tdp-card-divider);
}
@media (min-width: 640px) { .tdp-panel { padding: 1.5rem; } }
@media (max-width: 767px) {
    .tdp-panel:nth-child(2n) { border-right: none; }
    .tdp-panel:nth-child(3),
    .tdp-panel:nth-child(4) { border-bottom: none; }
}
@media (min-width: 768px) {
    .tdp-panel { border-bottom: none; }
    .tdp-panel:last-child { border-right: none; }
}

/* TD Pro badges — call/put/golden/sweep/block/info/amber */
.tdp-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border-radius: 0.3rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
    border: 1px solid transparent;
    font-family: var(--tdp-font-display);
}
.tdp-badge.call    { background: rgba(16,185,129,0.15);  color: #10b981; border-color: rgba(16,185,129,0.30); }
.tdp-badge.put     { background: rgba(239,68,68,0.10);   color: #ef5d60; border-color: rgba(239,68,68,0.25); }
.tdp-badge.golden  { background: rgba(232,181,77,0.15);  color: #f0c674; border-color: rgba(232,181,77,0.30); }
.tdp-badge.sweep   { background: rgba(249,115,22,0.15);  color: #e8b54d; border-color: rgba(249,115,22,0.30); }
.tdp-badge.block   { background: rgba(147,51,234,0.15);  color: #5b8def; border-color: rgba(147,51,234,0.30); }
.tdp-badge.info    { background: rgba(63,123,255,0.15);  color: #6f9bff; border-color: rgba(63,123,255,0.30); }
.tdp-badge.amber   { background: rgba(232,181,77,0.18);  color: var(--tdp-accent-hot); border-color: rgba(232,181,77,0.32); }
.tdp-badge.muted   { background: rgba(148,163,184,0.10); color: #9fb0cf; border-color: rgba(148,163,184,0.20); }

/* Live pulse — green dot animation for "scanning right now" indicators */
.tdp-pulse-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tdp-bull);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55);
    animation: tdpPulse 2s ease-in-out infinite;
    flex-shrink: 0;
    vertical-align: middle;
}
.tdp-pulse-dot.amber { background: var(--tdp-accent); box-shadow: 0 0 0 0 rgba(232,181,77,0.55); }
.tdp-pulse-dot.red   { background: var(--tdp-bear);   box-shadow: 0 0 0 0 rgba(239,68,68,0.55); }

@keyframes tdpPulse {
    0%, 100% { opacity: 1;    box-shadow: 0 0 0 0   rgba(16,185,129,0.55); }
    50%      { opacity: 0.55; box-shadow: 0 0 0 6px rgba(16,185,129,0); }
}

/* Row entrance animation */
@keyframes tdpFadeSlideIn {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: translateX(0); }
}
.tdp-row-in { animation: tdpFadeSlideIn 0.35s ease backwards; }

/* Dual gradient sentiment bar */
.tdp-sentiment-bar {
    height: 6px;
    border-radius: 9999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
}
.tdp-sentiment-bar > .bull {
    background: linear-gradient(90deg, #0e9b73, #10b981);
    transition: width 600ms ease;
    height: 100%;
}
.tdp-sentiment-bar > .bear {
    background: linear-gradient(90deg, #d6494c, #ef5d60);
    transition: width 600ms ease;
    height: 100%;
}

/* Section header (page-level h2) */
.tdp-section-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 28px 0 16px;
}
.tdp-section-head .title {
    font-family: var(--tdp-font-display);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tdp-text-mute);
}
.tdp-section-head .count {
    font-family: var(--tdp-font-mono);
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--tdp-accent-glow);
    color: var(--tdp-accent-hot);
    border: 1px solid rgba(232, 181, 77, 0.30);
    font-weight: 700;
}
.tdp-section-head .rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, var(--tdp-card-divider), transparent);
}

/* Hero banner */
.tdp-hero {
    background: linear-gradient(135deg,
                rgba(63, 123, 255, 0.10),
                rgba(232, 181, 77, 0.06) 60%,
                rgba(15, 23, 42, 0.4));
    border: 1px solid rgba(63, 123, 255, 0.25);
    border-radius: 16px;
    padding: 22px 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}
.tdp-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 80% at 100% 50%, rgba(232, 181, 77, 0.08), transparent 70%);
    pointer-events: none;
}
.tdp-hero-title {
    font-family: var(--tdp-font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--tdp-text-strong);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.tdp-hero-sub {
    font-size: 0.88rem;
    color: var(--tdp-text);
    line-height: 1.55;
    max-width: 60ch;
}
.tdp-hero .btn-primary {
    background: linear-gradient(135deg, var(--tdp-accent), var(--tdp-accent-hot));
    border: 0;
    color: #0a1430;
    font-weight: 700;
    text-shadow: none;
}

/* Refined polish for existing classes — additive overrides where harmless */

/* metric-card hover shifts to subtle border + glow instead of transform */
.metric-card {
    border-radius: 1rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.metric-card:hover {
    border-color: rgba(63, 123, 255, 0.30) !important;
    box-shadow: 0 0 0 1px rgba(63, 123, 255, 0.08), 0 12px 30px rgba(2, 6, 23, 0.5) !important;
    transform: none !important;
}

/* Stat values get the mono treatment */
.metric-value,
.csp-stat-value,
.weekly-summary strong {
    font-family: var(--tdp-font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.005em;
}

/* CSP stat labels get TD Pro label treatment */
.csp-stat-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tdp-text-faint);
}

/* Strategy ladder polish — ladder counts go mono */
.sl-counts, .sl-ts {
    font-family: var(--tdp-font-mono);
    font-variant-numeric: tabular-nums;
}

/* Buttons — slightly tighter, amber-tinted hover for primary */
.btn-primary:hover {
    box-shadow: 0 0 0 1px rgba(232, 181, 77, 0.25), 0 6px 18px rgba(232, 181, 77, 0.15);
}

/* Section nav — TD Pro look. Active state uses indigo (was amber) to match
   the Agent Marketplace's indigo accent system. tdpro-theme.css provides
   the final override; this block aligns the intermediate state. */
.section-nav-link {
    transition: color 0.15s ease, background 0.15s ease;
}
.section-nav-link.is-active {
    background: rgba(63, 123, 255, 0.14);
    color: #a5b4fc !important;
    border: 1px solid rgba(63, 123, 255, 0.35);
    border-radius: 8px;
    box-shadow: 0 0 0 1px rgba(63, 123, 255, 0.06);
}

/* Polish: amber focus ring (override default for keyboard nav) */
*:focus-visible {
    outline: 2px solid var(--tdp-accent);
    outline-offset: 2px;
    border-radius: 4px;
}
*:focus:not(:focus-visible) { outline: none; }

/* Reduced motion — disable all our animations gracefully */
@media (prefers-reduced-motion: reduce) {
    @keyframes tdpPulse        { from, to { opacity: 1; box-shadow: none; } }
    @keyframes tdpFadeSlideIn  { from, to { opacity: 1; transform: none; } }
    @keyframes sl-pulse        { from, to { opacity: 1; box-shadow: none; } }
    .tdp-row-in { animation: none; }
    .tdp-pulse-dot { animation: none; }
    .sl-watching { animation: none; }
}