/* ============================================================
   LUMO TV — IPTV-Style Live TV Layout + Player Controls Fix
   Target: tv.lumottv.com — Fire Stick, Smart TVs (960px+)
   ============================================================ */

/* ──────────────────────────────────────────────────────────
   SECTION 1 — PLAYER CONTROLS AUTO-HIDE (global, no breakpoint)
   The native app already uses .show-controls to reveal the
   overlay. We reinforce the hidden default and ensure the
   class-based toggle is the only way to show controls.
   ────────────────────────────────────────────────────────── */

.player-overlay,
#playerOverlay {
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    pointer-events: none !important;
}

/* Reveal when the JS toggler adds .show-controls to the container */
.player-container.show-controls .player-overlay,
.player-container.show-controls #playerOverlay {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Explicit .visible class support (used by some builds) */
.player-overlay.visible,
#playerOverlay.visible {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Hover reveal — fallback for mouse/pointer devices */
.player-overlay:hover,
#playerOverlay:hover {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Explicit controls-hidden state overrides hover */
.player-container.controls-hidden .player-overlay,
.player-container.controls-hidden #playerOverlay {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Cursor: hide when controls hidden, show when visible */
.player-container.active:not(.show-controls) {
    cursor: none !important;
}
.player-container.show-controls {
    cursor: default !important;
}


/* ══════════════════════════════════════════════════════════
   TV-SIZE SCREEN RULES (min-width: 960px)
   ══════════════════════════════════════════════════════════ */

@media (min-width: 960px) {

    /* ──────────────────────────────────────────────────────
       SECTION 2 — SIDEBAR: REMOVE DOWNLOAD ICON
       ────────────────────────────────────────────────────── */

    .sidebar-item[onclick*="openDownloadPage"],
    .sidebar-item[title="Baixar App"],
    .sidebar-item[title="Download"] {
        display: none !important;
    }


    /* ──────────────────────────────────────────────────────
       SECTION 3 — LIVE PAGE IPTV LAYOUT SCAFFOLD
       When #livePage is active, replace the grid view with
       a two-column IPTV layout:  [320px channel list] + [player/epg]
       ────────────────────────────────────────────────────── */

    /* Root layout wrapper when live page is active */
    #livePage.active {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        height: calc(100vh - 60px) !important; /* below fixed nav */
        margin-top: 60px !important;
        overflow: hidden !important;
        background: #0a0a0f !important;
        padding: 0 !important;
    }

    /* Override the default page padding that safe-zones / tv-design adds */
    #livePage.active .grid-page-header,
    #livePage.active .content-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* ── Hide the original grid page header (title + arrow nav)
          when in IPTV mode — category tabs move into the sidebar  ── */
    #livePage.active .grid-page-header {
        display: none !important;
    }

    /* ── Hide the landscape grid (replaced by sidebar list) ── */
    #livePage.active .grid-container.grid-landscape,
    #livePage.active #liveGrid {
        display: none !important;
    }


    /* ──────────────────────────────────────────────────────
       SECTION 4 — LEFT SIDEBAR: CHANNEL LIST
       ────────────────────────────────────────────────────── */

    /* The channel sidebar is injected by the IPTV layout JS;
       we also handle the case where the existing grid is
       repurposed.  Primary selector: .iptv-channel-sidebar */

    .iptv-channel-sidebar {
        width: 320px !important;
        min-width: 320px !important;
        max-width: 320px !important;
        flex-shrink: 0 !important;
        height: 100% !important;
        background: #0d0d14 !important;
        border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        position: relative !important;
    }

    /* ── Category tabs strip (top of sidebar) ── */
    .iptv-channel-sidebar .iptv-category-tabs,
    .iptv-category-tabs {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        padding: 10px 12px 8px !important;
        gap: 6px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        flex-shrink: 0 !important;
        background: #0d0d14 !important;
    }

    .iptv-channel-sidebar .iptv-category-tabs::-webkit-scrollbar,
    .iptv-category-tabs::-webkit-scrollbar {
        display: none !important;
        height: 0 !important;
    }

    .iptv-category-tab {
        font-size: 11px !important;
        font-weight: 500 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.8px !important;
        color: #e8e8ed !important;
        opacity: 0.4 !important;
        white-space: nowrap !important;
        padding: 4px 10px !important;
        border-radius: 4px !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        background: transparent !important;
        cursor: pointer !important;
        transition: opacity 0.15s ease, background 0.15s ease !important;
        flex-shrink: 0 !important;
        outline: none !important;
    }

    .iptv-category-tab:hover,
    .iptv-category-tab:focus {
        opacity: 0.8 !important;
        background: rgba(255, 255, 255, 0.06) !important;
    }

    .iptv-category-tab.active,
    .iptv-category-tab[aria-selected="true"] {
        opacity: 1 !important;
        color: #0099dd !important;
        border-color: rgba(0, 153, 221, 0.5) !important;
        background: rgba(0, 153, 221, 0.1) !important;
    }

    /* ── Channel list scroll area ── */
    .iptv-channel-list {
        flex: 1 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    .iptv-channel-list::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
    }

    /* ── Category group header ── */
    .iptv-category-header {
        font-size: 11px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        color: #e8e8ed !important;
        opacity: 0.3 !important;
        padding: 12px 16px 4px !important;
        pointer-events: none !important;
        user-select: none !important;
    }

    /* ── Individual channel item ── */
    .iptv-channel-item {
        height: 56px !important;
        min-height: 56px !important;
        padding: 8px 16px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        cursor: pointer !important;
        border-left: 3px solid transparent !important;
        transition: background 0.15s ease, border-color 0.15s ease !important;
        position: relative !important;
        outline: none !important;
        overflow: hidden !important;
    }

    .iptv-channel-item:hover,
    .iptv-channel-item:focus {
        background: rgba(255, 255, 255, 0.05) !important;
    }

    .iptv-channel-item:hover .iptv-channel-name,
    .iptv-channel-item:focus .iptv-channel-name {
        opacity: 1 !important;
    }

    /* Active / currently playing channel */
    .iptv-channel-item.active,
    .iptv-channel-item[aria-current="true"],
    .iptv-channel-item.playing {
        border-left-color: #0099dd !important;
        background: rgba(0, 153, 221, 0.08) !important;
    }

    .iptv-channel-item.active .iptv-channel-name,
    .iptv-channel-item[aria-current="true"] .iptv-channel-name,
    .iptv-channel-item.playing .iptv-channel-name {
        opacity: 1 !important;
        color: #e8e8ed !important;
    }

    /* ── Channel logo ── */
    .iptv-channel-logo {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        border-radius: 50% !important;
        object-fit: contain !important;
        background: #1a1a2a !important;
        flex-shrink: 0 !important;
        display: block !important;
    }

    /* Fallback placeholder when no logo image */
    .iptv-channel-logo-placeholder {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        border-radius: 50% !important;
        background: #1a1a2a !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 14px !important;
        color: rgba(255, 255, 255, 0.25) !important;
    }

    /* ── Channel text block ── */
    .iptv-channel-text {
        flex: 1 !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
        overflow: hidden !important;
    }

    .iptv-channel-name {
        font-size: 14px !important;
        font-weight: 400 !important;
        color: #e8e8ed !important;
        opacity: 0.7 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        transition: opacity 0.15s ease !important;
        line-height: 1.3 !important;
    }

    .iptv-channel-epg {
        font-size: 12px !important;
        font-weight: 400 !important;
        color: #e8e8ed !important;
        opacity: 0.35 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        line-height: 1.2 !important;
    }

    /* ── Channel number badge (optional) ── */
    .iptv-channel-number {
        font-size: 11px !important;
        color: #e8e8ed !important;
        opacity: 0.2 !important;
        flex-shrink: 0 !important;
        min-width: 24px !important;
        text-align: right !important;
    }


    /* ──────────────────────────────────────────────────────
       SECTION 5 — RIGHT AREA: PLAYER + EPG INFO BAR
       ────────────────────────────────────────────────────── */

    .iptv-player-area {
        flex: 1 1 0% !important;
        min-width: 0 !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        background: #0a0a0f !important;
        overflow: hidden !important;
    }

    /* ── Embedded video player (aspect-ratio 16:9, max 60vh) ── */
    .iptv-player-wrapper {
        width: 100% !important;
        max-height: 60vh !important;
        aspect-ratio: 16 / 9 !important;
        background: #000 !important;
        position: relative !important;
        flex-shrink: 0 !important;
        overflow: hidden !important;
    }

    /* When no channel is selected — show a placeholder */
    .iptv-player-placeholder {
        width: 100% !important;
        max-height: 60vh !important;
        aspect-ratio: 16 / 9 !important;
        background: #0d0d14 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 12px !important;
        flex-shrink: 0 !important;
    }

    .iptv-player-placeholder-icon {
        font-size: 48px !important;
        opacity: 0.15 !important;
        color: #e8e8ed !important;
    }

    .iptv-player-placeholder-text {
        font-size: 14px !important;
        opacity: 0.25 !important;
        color: #e8e8ed !important;
        font-weight: 300 !important;
        letter-spacing: 1px !important;
    }

    /* ── EPG info bar ── */
    .iptv-epg-bar {
        background: #111118 !important;
        padding: 16px 24px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 24px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
        flex-shrink: 0 !important;
        min-height: 64px !important;
    }

    .iptv-epg-current {
        display: flex !important;
        flex-direction: column !important;
        gap: 3px !important;
        min-width: 0 !important;
        flex: 1 !important;
    }

    .iptv-epg-current-title {
        font-size: 16px !important;
        font-weight: 500 !important;
        color: #e8e8ed !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        line-height: 1.3 !important;
    }

    .iptv-epg-current-time {
        font-size: 12px !important;
        color: #e8e8ed !important;
        opacity: 0.4 !important;
        font-weight: 400 !important;
    }

    .iptv-epg-next {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
        max-width: 40% !important;
        overflow: hidden !important;
    }

    .iptv-epg-next-label {
        font-size: 11px !important;
        font-weight: 500 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        color: #e8e8ed !important;
        opacity: 0.3 !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    .iptv-epg-next-title {
        font-size: 13px !important;
        color: #e8e8ed !important;
        opacity: 0.4 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-weight: 400 !important;
    }

    /* ── EPG programme grid (below info bar, scrollable) ── */
    .iptv-epg-grid {
        flex: 1 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        background: #0a0a0f !important;
        padding: 12px 24px !important;
    }

    .iptv-epg-grid::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
    }

    /* Programme row within EPG grid */
    .iptv-epg-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 16px !important;
        padding: 8px 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    }

    .iptv-epg-row-time {
        font-size: 12px !important;
        color: #e8e8ed !important;
        opacity: 0.3 !important;
        min-width: 48px !important;
        flex-shrink: 0 !important;
        font-variant-numeric: tabular-nums !important;
    }

    .iptv-epg-row-title {
        font-size: 13px !important;
        color: #e8e8ed !important;
        opacity: 0.65 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .iptv-epg-row.current .iptv-epg-row-title {
        opacity: 1 !important;
        color: #e8e8ed !important;
    }

    .iptv-epg-row.current .iptv-epg-row-time {
        color: #0099dd !important;
        opacity: 0.8 !important;
    }


    /* ──────────────────────────────────────────────────────
       SECTION 6 — PLAYER EMBEDDED IN IPTV LAYOUT
       When a channel is playing inside the IPTV layout (not
       full-screen), the player-container sits inside
       .iptv-player-wrapper.  Full-screen mode keeps z-index.
       ────────────────────────────────────────────────────── */

    .iptv-player-wrapper .player-container,
    .iptv-player-wrapper .player-container.active {
        position: absolute !important;
        inset: 0 !important;
        z-index: 10 !important;
        display: flex !important;
    }

    /* Keep full-screen z-index for when player detaches */
    .player-container.fullscreen {
        position: fixed !important;
        inset: 0 !important;
        z-index: 9999 !important;
    }


    /* ──────────────────────────────────────────────────────
       SECTION 7 — CHANNEL LIST LOADING / EMPTY STATES
       ────────────────────────────────────────────────────── */

    .iptv-channel-loading {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 40px 16px !important;
        gap: 10px !important;
        opacity: 0.3 !important;
        color: #e8e8ed !important;
        font-size: 13px !important;
    }

    .iptv-channel-empty {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 60px 16px !important;
        gap: 8px !important;
        color: #e8e8ed !important;
        opacity: 0.2 !important;
        text-align: center !important;
    }

    .iptv-channel-empty-icon {
        font-size: 32px !important;
        margin-bottom: 4px !important;
    }

    .iptv-channel-empty-text {
        font-size: 13px !important;
        font-weight: 400 !important;
    }


    /* ──────────────────────────────────────────────────────
       SECTION 8 — FOCUS RING (D-pad / remote navigation)
       ────────────────────────────────────────────────────── */

    .iptv-channel-item:focus-visible {
        outline: 2px solid rgba(0, 153, 221, 0.7) !important;
        outline-offset: -2px !important;
        background: rgba(255, 255, 255, 0.07) !important;
    }

    .iptv-category-tab:focus-visible {
        outline: 2px solid rgba(0, 153, 221, 0.7) !important;
        outline-offset: 2px !important;
    }


    /* ──────────────────────────────────────────────────────
       SECTION 9 — LIVE BADGE IN CHANNEL LIST
       ────────────────────────────────────────────────────── */

    .iptv-live-dot {
        width: 6px !important;
        height: 6px !important;
        border-radius: 50% !important;
        background: #ff3b30 !important;
        flex-shrink: 0 !important;
        animation: iptv-live-pulse 2s ease-in-out infinite !important;
    }

    @keyframes iptv-live-pulse {
        0%,  100% { opacity: 1; }
        50%        { opacity: 0.35; }
    }


    /* ──────────────────────────────────────────────────────
       SECTION 10 — MISC LIVE PAGE OVERRIDES
       Make sure safe-zone / tv-design rules don't break the
       two-column layout.
       ────────────────────────────────────────────────────── */

    /* Kill the top padding that pushes content down when livePage is active */
    #livePage.active {
        padding-top: 0 !important;
    }

    /* Prevent the app-level content container from adding lateral padding
       inside the live page */
    #livePage.active > *,
    #livePage.active .content-container,
    #livePage.active .page-wrapper,
    #livePage.active .main-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Scrollbar suppression for the whole live page */
    #livePage.active,
    #livePage.active * {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    #livePage.active *::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

} /* end @media (min-width: 960px) */