/* Twitch Theme Overrides */

/* Live indicator pulse */
@keyframes twitch-live-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(145, 70, 255, 0.5); }
    50% { box-shadow: 0 0 0 8px rgba(145, 70, 255, 0); }
}
.twitch-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #9146FF 0%, #7B2FE0 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 6px 14px;
    border-radius: 20px;
    animation: twitch-live-pulse 2s infinite;
}
.twitch-live-dot {
    width: 8px;
    height: 8px;
    background: #ff4444;
    border-radius: 50%;
    animation: twitch-live-pulse 1.5s infinite;
}
.twitch-offline-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.06);
    color: #555;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 6px 14px;
    border-radius: 20px;
}

/* Clip card hover */
.twitch-clip-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.twitch-clip-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(145, 70, 255, 0.2);
}

/* ─── Twitch-tab height caps ───────────────────────────────────────────
 * Every section's glass-card content stays inside a predictable maximum
 * so changing the period selector / data volume doesn't suddenly grow
 * the layout. Charts use fixed-height parents (JS-side wrappers do this
 * for canvases already). Lists with variable item counts get internal
 * scroll.
 * ──────────────────────────────────────────────────────────────────── */
#tab-twitch section > .glass-card { max-height: 420px; overflow-y: auto; }
/* Section with scrollable list bodies (mods, VIPs, titles, search results) */
#tab-twitch [id$="-list"]:not(.no-cap),
#tab-twitch [id="twitch-recent-titles"],
#tab-twitch [id="twitch-language-breakdown"],
#tab-twitch [id="twitch-mods-list"],
#tab-twitch [id="twitch-vips-list"],
#tab-twitch [id="twitch-search-results"],
#tab-twitch [id="twitch-content-search-results"],
#tab-twitch [id="twitch-top-clips"],
#tab-twitch [id="twitch-vods-list"] {
    max-height: 320px;
    overflow-y: auto;
}
/* Cards that hold a single canvas at known fixed height — don't impose
 * scroll on them, the canvas wrapper already controls vertical bounds. */
#tab-twitch section > .glass-card:has(> canvas),
#tab-twitch section > .glass-card:has(> div > canvas:only-child) {
    max-height: none;
    overflow: visible;
}
/* Followers Growth canvas was the explicit "too tall on period change"
 * case in user feedback — cap its height directly. */
#twitch-followers-chart { max-height: 200px !important; }

/* ──────────────────────────────────────────────────────────────────────
 * Light-theme overrides for the whole Twitch tab — attribute-selector
 * pattern (matches theme.css:767 border-bottom approach). 55+ inline
 * styles with hardcoded #fff/#555/#666/#888/#111/etc automatically swap
 * under light theme. Brand colours (Twitch purple #9146FF, live red
 * #ff0000) deliberately stay — they work on both themes.
 *
 * Moved out of partials/twitch-tab.html into css/twitch.css when the
 * Twitch tab got templatized into dashboard_twitch_compose, so the
 * rules live in one place instead of being duplicated per host.
 * ────────────────────────────────────────────────────────────────────── */
html[data-theme="light"] #tab-twitch [style*="color: var(--text-1)"]:not([style*="color:#ffd"]) { color: var(--text-1) !important; }
html[data-theme="light"] #tab-twitch [style*="color:#ccc"],
html[data-theme="light"] #tab-twitch [style*="color:#ddd"]      { color: var(--text-1) !important; }
html[data-theme="light"] #tab-twitch [style*="color:#888"],
html[data-theme="light"] #tab-twitch [style*="color:#666"]      { color: var(--text-2) !important; }
html[data-theme="light"] #tab-twitch [style*="color:#555"],
html[data-theme="light"] #tab-twitch [style*="color:#444"],
html[data-theme="light"] #tab-twitch [style*="color:#333"]      { color: var(--text-3) !important; }
html[data-theme="light"] #tab-twitch [style*="background:#111"] { background: var(--surface-1) !important; }
html[data-theme="light"] #tab-twitch [style*="background:rgba(0,0,0,0.3)"],
html[data-theme="light"] #tab-twitch [style*="background:rgba(0,0,0,0.4)"],
html[data-theme="light"] #tab-twitch [style*="background:rgba(0,0,0,0.75)"]
                                                                { background: rgba(0,0,0,0.04) !important; }
html[data-theme="light"] #tab-twitch [style*="background:rgba(255,255,255,0.03)"],
html[data-theme="light"] #tab-twitch [style*="background:rgba(255,255,255,0.06)"]
                                                                { background: rgba(0,0,0,0.04) !important; }
html[data-theme="light"] #tab-twitch [style*="border-bottom:1px solid rgba(255,255,255"] { border-color: var(--border-1) !important; }

/* ──────────────────────────────────────────────────────────────────────
 * Dark-theme readability overrides — scoped to #tab-twitch.
 *
 * Direct hex colours used as inline subtitle/hint colours in the compose
 * fragments (color:#555 / color:#666) hit very low contrast on the dark
 * page background (#3A3A3A) — under 2:1, so the labels read as ghosts.
 * Override to brighter mid-greys that clear WCAG AA without forcing a
 * global theme-var bump that would change every other tab.
 *   #555/#666  →  #a6a6a6  (~4.8:1 on #3A3A3A, hint copy)
 *   #888       →  #c0c0c0  (~7.2:1 on #3A3A3A, secondary body)
 *
 * Tailwind's text-gray-400 (=#9ca3af) is also used on the stat-tile
 * uppercase labels — it's borderline on dark and outright fails AA on
 * light (2.5:1). Forcing both themes to var(--text-2) gives readable
 * labels on either background.
 * ────────────────────────────────────────────────────────────────────── */
html[data-theme="dark"] #tab-twitch [style*="color:#555"],
html[data-theme="dark"] #tab-twitch [style*="color: #555"],
html[data-theme="dark"] #tab-twitch [style*="color:#666"],
html[data-theme="dark"] #tab-twitch [style*="color: #666"]      { color: #a6a6a6 !important; }
html[data-theme="dark"] #tab-twitch [style*="color:#888"],
html[data-theme="dark"] #tab-twitch [style*="color: #888"]      { color: #c0c0c0 !important; }

/* Tile labels — Tailwind text-gray-400. Tailwind constant #9ca3af is
   borderline on dark (5:1) and fails on light (2.5:1). Theme-specific
   overrides give both modes ≥7:1. */
html[data-theme="dark"]  #tab-twitch .text-gray-400 { color: #c0c0c0 !important; }
html[data-theme="light"] #tab-twitch .text-gray-400 { color: var(--text-2) !important; }

/* Search dropdown — theme-aware. Dark theme: dark popup. Light theme:
   white popup with dark text. All colours via CSS vars from theme.css
   (--bg-page / --text-1 / --text-2 / --border-1 / ...). */
.tw-search-drop {
    background: #1a1a2e;
    color: var(--text-1);
    border-color: rgba(145,70,255,0.3);
}
html[data-theme="light"] .tw-search-drop {
    background: #ffffff;
    border-color: rgba(145,70,255,0.25);
    box-shadow: 0 12px 32px rgba(15,23,42,0.18);
}
.tw-search-drop .tw-drop-item-name      { color: var(--text-1); }
.tw-search-drop .tw-drop-item-handle    { color: var(--text-2); }
.tw-search-drop .tw-drop-item-sub       { color: var(--text-2); }
.tw-search-drop .tw-drop-item-divider   { border-bottom-color: var(--border-1); }
.tw-search-drop .tw-drop-empty,
.tw-search-drop .tw-drop-clear          { color: var(--text-3); }
.tw-search-drop .tw-drop-item:hover     { background: rgba(145,70,255,0.10); }
html[data-theme="light"] .tw-search-drop .tw-drop-item:hover { background: rgba(145,70,255,0.08); }
.tw-search-drop mark                    { background: rgba(145,70,255,0.35); color: var(--text-1); padding: 0; }
html[data-theme="light"] .tw-search-drop mark { background: rgba(145,70,255,0.22); color: var(--text-1); }
.tw-search-drop .tw-drop-thumb-fallback { background: rgba(145,70,255,0.15); }
html[data-theme="light"] .tw-search-drop .tw-drop-thumb-fallback { background: rgba(145,70,255,0.10); }