/*
 * IPTV Scanner — Phase 3
 * -----------------------
 * Tailwind CDN (loaded in index.html) owns layout, colors, and utilities.
 * This file is intentionally minimal so utility classes never fight overrides.
 * Keep only:
 *   - light native-control polish (scrollbars, select accents)
 *   - progressive disclosure (`<details>`) plumbing
 *   - reduced-motion niceties
 * Anything visual should be added as Tailwind classes in the HTML instead.
 */

/* Root canvas */
html,
body {
    background-color: #050812;
    color-scheme: dark;
}

body {
    /* Buttery scrolling on iOS Safari for the channel list. */
    -webkit-overflow-scrolling: touch;
}

/* Native controls: pick up the brand color for checkboxes / radios / range. */
:root {
    accent-color: #2d9dff;
}

/* Slightly nicer scrollbars in the channels list (WebKit only). */
#channelsList::-webkit-scrollbar {
    width: 8px;
}
#channelsList::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
}
#channelsList::-webkit-scrollbar-thumb:hover {
    background: rgba(45, 157, 255, 0.35);
}
#channelsList::-webkit-scrollbar-track {
    background: transparent;
}

/* Remove default triangle from `<details><summary>` so Tailwind chevrons look clean. */
details > summary {
    list-style: none;
}
details > summary::-webkit-details-marker {
    display: none;
}

/* Floating channel action menu is portaled to body (see scripts.js). */
#channelActionMenu[hidden] {
    display: none !important;
}

/* Fullscreen video niceties. */
video::-webkit-media-controls-panel {
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.6));
}

/* Reduced motion respect. */
@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 0.001ms !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Print: never print the app. */
@media print {
    body {
        display: none;
    }
}