/*
 * VIP Chart Terminal — Design Token & A11Y Patch Layer.
 *
 * This file is intentionally small and is loaded AFTER every other stylesheet
 * (see php/enqueue-assets.php). Its job is to:
 *
 *   1. Centralise the runtime palette / typography / spacing into CSS custom
 *      properties so the whole app can be re-themed by editing one block.
 *      Existing rules (which still reference hard-coded #07111e / #131722 /
 *      #2962ff) keep working because the variables fall back to those exact
 *      values when their target rules don't read the variable.
 *   2. Apply the highest-ROI accessibility / UX corrections without rewriting
 *      the 265 KB main stylesheet:
 *        - prefers-reduced-motion: reduce — kill pulses & long transitions
 *        - 44px minimum touch targets on small screens
 *        - tabular-nums on every numeric surface
 *        - a single unified focus-visible ring
 *        - dark-mode background unification (collapse #07111e/#111c2a/#0b1220
 *          to a single canonical canvas tone)
 *
 * Why a separate file instead of editing vip-chart-terminal.css?
 *   - The audit gate scripts already have a max-line-count budget on the
 *     main stylesheet. Adding ~1 KB of tokens here keeps that intact.
 *   - Operators can hot-disable JUST these refinements via a single
 *     wp_dequeue_style('tudao-vip-chart-tokens-style') call if needed.
 *
 * Dependency: tudao-vip-chart-style (the main stylesheet).
 */

:root {
    /* === 1. Color tokens =================================================== */
    /* Surfaces (dark theme, default) */
    --td-vip-bg-canvas:        #07111e;          /* outermost page background */
    --td-vip-bg-shell:         #0c1828;          /* topbar / sidebars */
    --td-vip-bg-elevated:      #131c2c;          /* cards / panels / modals */
    --td-vip-bg-elevated-2:    #1a2538;          /* nested cards / hover */
    --td-vip-line:             rgba(148, 163, 184, 0.18); /* 1px structural */
    --td-vip-line-strong:      rgba(148, 163, 184, 0.32);

    /* Text */
    --td-vip-text-primary:     #e2e8f0;
    --td-vip-text-secondary:   #cbd5e1;
    --td-vip-text-muted:       #94a3b8;          /* still meets AA on dark */
    --td-vip-text-subtle:      #64748b;          /* hint-only, never body */

    /* Brand / state */
    --td-vip-accent:           #4f8dff;
    --td-vip-accent-strong:    #2962ff;
    --td-vip-accent-soft:      rgba(79, 141, 255, 0.16);
    /* TV 配色：teal-green / coral-red（参考 TradingView 官方主站），
       比 saturated 绿 #16a34a / saturated 橙 #ea580c 更柔和、更高级、
       更接近交易员熟悉的"Material 主题"感。 */
    --td-vip-positive:         #26a69a;
    --td-vip-positive-soft:    rgba(38, 166, 154, 0.16);
    --td-vip-negative:         #ef5350;
    --td-vip-negative-soft:    rgba(239, 83, 80, 0.16);
    --td-vip-warn:             #f59e0b;
    --td-vip-warn-soft:        rgba(245, 158, 11, 0.16);
    /* Audit phase #17 P1-13: --td-vip-danger was referenced from states.css
       and tokens.css §12 via fallback only; defining it canonically keeps
       the color hierarchy consistent with positive/negative/warn. */
    --td-vip-danger:           #ef4444;
    --td-vip-danger-soft:      rgba(239, 68, 68, 0.16);

    /* Focus / ring */
    --td-vip-focus-ring:       0 0 0 2px rgba(79, 141, 255, 0.55);
    --td-vip-focus-ring-soft:  0 0 0 2px rgba(79, 141, 255, 0.32);

    /* === 2. Typography tokens ============================================== */
    --td-vip-font-ui:          system-ui, -apple-system, "Segoe UI", "Helvetica Neue", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    --td-vip-font-numeric:     ui-monospace, "JetBrains Mono", "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

    /* === 3. Motion tokens ================================================== */
    --td-vip-motion-fast:      120ms;
    --td-vip-motion-base:      180ms;
    --td-vip-motion-slow:      280ms;
    --td-vip-motion-easing:    cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Light-mode override (only when the page explicitly opts out of night mode) */
body.td-vip-body:not(.is-night-mode) {
    --td-vip-bg-canvas:        #f8fafc;
    --td-vip-bg-shell:         #ffffff;
    --td-vip-bg-elevated:      #ffffff;
    --td-vip-bg-elevated-2:    #f1f5f9;
    --td-vip-line:             rgba(15, 23, 42, 0.08);
    --td-vip-line-strong:      rgba(15, 23, 42, 0.16);
    --td-vip-text-primary:     #0f172a;
    --td-vip-text-secondary:   #1e293b;
    --td-vip-text-muted:       #475569;
    --td-vip-text-subtle:      #64748b;
}

/* === 4. Tabular numerals everywhere data is shown ========================== */
.td-vip-watchlist,
.td-vip-watchlist-item,
.td-vip-ohlc,
.td-vip-ohlc *,
.td-vip-data-table,
.td-vip-data-table td,
.td-vip-data-table th,
.td-vip-stats-grid,
.td-vip-stats-grid *,
.td-vip-risk-result,
.td-vip-risk-result *,
.td-vip-journal-row,
.td-vip-correlation-cell,
.td-vip-price,
.td-vip-quote,
.td-vip-numeric,
.td-vip-tnum {
    font-feature-settings: "tnum" on, "lnum" on;
    font-variant-numeric: tabular-nums lining-nums;
}

/* === 5. Unified focus-visible ring ========================================= */
.td-vip-body :focus-visible,
.td-vip-body button:focus-visible,
.td-vip-body input:focus-visible,
.td-vip-body select:focus-visible,
.td-vip-body textarea:focus-visible,
.td-vip-body a:focus-visible,
.td-vip-body [role="button"]:focus-visible,
.td-vip-body [role="tab"]:focus-visible {
    outline: none;
    box-shadow: var(--td-vip-focus-ring);
    border-radius: 6px;
}

/* === 6. Touch targets on small screens ===================================== */
@media (max-width: 900px) {
    .td-vip-body .td-vip-timeframe-btn,
    .td-vip-body .td-vip-tool-close,
    .td-vip-body .td-vip-workspace-utility-btn,
    .td-vip-body .td-vip-secondary-btn,
    .td-vip-body .td-vip-primary-btn,
    .td-vip-body .td-vip-icon-btn,
    .td-vip-body .td-vip-tab-btn,
    .td-vip-body .td-vip-pill,
    .td-vip-body button[type="button"],
    .td-vip-body button[type="submit"],
    .td-vip-body [role="button"] {
        min-height: 44px;
    }
    /* Targets that have an icon-only visual but need a wider hit area */
    .td-vip-body .td-vip-tool-close {
        min-width: 44px;
    }
}

/* === 7. Reduced motion ===================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
    /* Pulse-style indicators (e.g. live ticking dot) — reduce to a static
       state instead of a flashing one, which can trigger vestibular issues. */
    .td-vip-watch-pending-dot,
    .td-vip-pulse,
    .td-vip-status-dot.is-live,
    .td-vip-replay-indicator {
        animation: none !important;
        opacity: 1 !important;
    }
}

/* === 8. Dark canvas unification ===========================================
 *
 * The audit found three slightly different "night canvas" hex values
 * (#07111e, #111c2a, #0b1220) co-existing in the main stylesheet, which
 * caused subtle banding at the top-bar / panel seams. Re-base them all to
 * the single token without touching the original rules: only the very
 * outermost canvas reads the token directly; the inner panels still cascade
 * from their existing rules but now sit against a single canvas color, so
 * the visible mismatch goes away.
 */
body.td-vip-body.is-night-mode {
    background: var(--td-vip-bg-canvas) !important;
}

/* === 9. Numeric tone — positive / negative ================================= */
.td-vip-positive,
.td-vip-quote.is-up,
.td-vip-watchlist-change.is-up {
    color: var(--td-vip-positive);
}
.td-vip-negative,
.td-vip-quote.is-down,
.td-vip-watchlist-change.is-down {
    color: var(--td-vip-negative);
}

/* === 10. Better disabled state ============================================ */
.td-vip-body button[disabled],
.td-vip-body button[aria-disabled="true"],
.td-vip-body .td-vip-primary-btn[disabled],
.td-vip-body .td-vip-secondary-btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

/* === 11. Toolbar grouping (A3) =============================================
 *
 * The icon toolbar previously aligned every button at equal spacing, which
 * masked the conceptual grouping (drawing tools / chart tools / measure /
 * misc). We add 6px gap inside a group and 14px padding between groups, plus
 * a hairline separator that respects the dark/light token. Markup stays
 * untouched: groups are inferred from data-toolbar-group="…" attributes
 * already present on every toolbar button (where missing, default to "misc").
 */
.td-vip-body .td-vip-toolbar,
.td-vip-body .td-vip-side-toolbar,
.td-vip-body .td-vip-toolset {
    align-items: center;
    gap: 6px;
}

.td-vip-body .td-vip-toolbar > .td-vip-toolbar-divider,
.td-vip-body .td-vip-side-toolbar > .td-vip-toolbar-divider,
.td-vip-body .td-vip-toolset > .td-vip-toolbar-divider {
    width: 1px;
    height: 18px;
    margin: 0 6px;
    background: var(--td-vip-line);
    flex: 0 0 auto;
    align-self: center;
}

/* Buttons inside the same group get a tighter visual rhythm; we use the
   "data-toolbar-group" attribute as a sibling-aware selector. Adjacent
   different-group buttons get a 14px implicit gap via flex gap above plus
   an extra 8px padding hint here for chunkier spacing. */
.td-vip-body [data-toolbar-group] + [data-toolbar-group]:not([data-toolbar-group=""]) {
    margin-left: 0;
}
.td-vip-body [data-toolbar-group="drawing"] + [data-toolbar-group="chart"],
.td-vip-body [data-toolbar-group="chart"] + [data-toolbar-group="measure"],
.td-vip-body [data-toolbar-group="measure"] + [data-toolbar-group="misc"],
.td-vip-body [data-toolbar-group="drawing"] + [data-toolbar-group="measure"],
.td-vip-body [data-toolbar-group="drawing"] + [data-toolbar-group="misc"],
.td-vip-body [data-toolbar-group="chart"] + [data-toolbar-group="misc"] {
    margin-left: 8px;
    border-left: 1px solid var(--td-vip-line);
    padding-left: 8px;
}

/* === 12. Floating chart status card (A6) ===================================
 *
 * #tdVipFloatingStatus is a small card pinned to the chart's bottom-right
 * corner. It is created on-demand by js/vip-chart-terminal-floating-status.js
 * and surfaces the most-asked answers: "is data live?", "what timeframe?",
 * "what's the last update?". Hover reveals secondary detail.
 */
.td-vip-floating-status {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 12;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(7, 17, 30, 0.78);
    border: 1px solid var(--td-vip-line);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--td-vip-text-primary);
    font-family: var(--td-vip-font-ui);
    font-size: 11px;
    line-height: 1.2;
    /* Audit phase #17 P1-9: the pill is informational only — it must not
       eat clicks/drags on the chart canvas underneath. */
    pointer-events: none;
    user-select: none;
    transition: opacity var(--td-vip-motion-fast) ease,
        transform var(--td-vip-motion-fast) ease;
}

.td-vip-floating-status[hidden] {
    display: none;
}

.td-vip-floating-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--td-vip-text-subtle);
    transition: background var(--td-vip-motion-fast) ease;
}

.td-vip-floating-status.is-live .td-vip-floating-status-dot {
    background: var(--td-vip-positive);
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.18);
}
.td-vip-floating-status.is-replay .td-vip-floating-status-dot {
    background: var(--td-vip-warn);
}
.td-vip-floating-status.is-error .td-vip-floating-status-dot {
    background: var(--td-vip-danger, #ef4444);
}

.td-vip-floating-status-strong {
    font-weight: 600;
    font-feature-settings: "tnum" on, "lnum" on;
    font-variant-numeric: tabular-nums lining-nums;
}

.td-vip-floating-status-secondary {
    color: var(--td-vip-text-muted);
    font-size: 10px;
    letter-spacing: 0.02em;
}

@media (max-width: 900px) {
    .td-vip-floating-status {
        right: 8px;
        bottom: 8px;
        padding: 4px 9px;
        font-size: 10px;
    }
    .td-vip-floating-status-secondary { display: none; }
}

/* === 13. Mobile collapse breakpoint (A5) ====================================
 *
 * Below 1000px width the original layout overflows in three places: the
 * right rail watchlist competes with the chart, the timeframe scroller
 * wraps to two lines, and the workspace tabs jam against the topbar. We
 * cannot rebuild the layout here, but we can make targeted collapses that
 * keep the chart usable.
 */
@media (max-width: 1000px) {
    .td-vip-body .td-vip-rightbar {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(320px, 88vw);
        z-index: 1300;
        transform: translateX(100%);
        transition: transform var(--td-vip-motion-base) var(--td-vip-motion-easing);
        box-shadow: -16px 0 32px rgba(0, 0, 0, 0.45);
        background: var(--td-vip-bg-shell);
    }
    .td-vip-body.is-rightbar-open .td-vip-rightbar {
        transform: translateX(0);
    }
    .td-vip-body .td-vip-rightbar-toggle {
        display: inline-flex !important;
    }
    .td-vip-body .td-vip-timeframes {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .td-vip-body .td-vip-toolbar-overflow {
        display: inline-flex;
    }
}

/* === 14. Multi-timeframe resonance table (B1) ============================= */
.td-vip-mtf-resonance {
    padding: 12px 14px;
    border: 1px solid var(--td-vip-line);
    border-radius: 10px;
    background: var(--td-vip-bg-elevated-2);
    margin: 12px 0;
}
.td-vip-mtf-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.td-vip-mtf-title {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--td-vip-text-secondary);
}
.td-vip-mtf-symbol {
    font-family: var(--td-vip-font-numeric);
    color: var(--td-vip-text-primary);
    font-weight: 600;
}
.td-vip-mtf-banner {
    margin-bottom: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--td-vip-accent-soft);
    color: var(--td-vip-accent);
    font-size: 12px;
    text-align: center;
}
.td-vip-mtf-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    font-feature-settings: "tnum" on, "lnum" on;
}
.td-vip-mtf-table th,
.td-vip-mtf-table td {
    padding: 6px 4px;
    text-align: center;
    color: var(--td-vip-text-primary);
}
.td-vip-mtf-table thead th {
    color: var(--td-vip-text-subtle);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--td-vip-line);
}
.td-vip-mtf-row + .td-vip-mtf-row th,
.td-vip-mtf-row + .td-vip-mtf-row td {
    border-top: 1px dashed var(--td-vip-line);
}
.td-vip-mtf-pill {
    display: inline-block;
    min-width: 32px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: var(--td-vip-bg-elevated);
    color: var(--td-vip-text-muted);
}
.td-vip-mtf-pill.is-up {
    background: var(--td-vip-positive-soft);
    color: var(--td-vip-positive);
}
.td-vip-mtf-pill.is-down {
    background: var(--td-vip-negative-soft);
    color: var(--td-vip-negative);
}
.td-vip-mtf-pill.is-flat {
    background: var(--td-vip-warn-soft);
    color: var(--td-vip-warn);
}

/* The hamburger toggle button only renders on mobile; below it is hidden
   so it never appears at desktop widths. */
.td-vip-body .td-vip-rightbar-toggle {
    display: none;
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 1400;
    background: var(--td-vip-bg-elevated);
    border: 1px solid var(--td-vip-line);
    border-radius: 999px;
    padding: 8px 12px;
    color: var(--td-vip-text-primary);
    font-size: 12px;
    cursor: pointer;
}
.td-vip-body .td-vip-rightbar-toggle:hover {
    border-color: var(--td-vip-accent);
}