/* ============================================================================

   ECHOSTREAM MODULE SYSTEM CSS

   Tabs, Staging Area, Module-Specific Layouts

   ============================================================================ */



/* ----------------------------------------------------------------------------

   MODULE TAB NAVIGATION

   ---------------------------------------------------------------------------- */

.es-module-tabs {

    display: flex;

    gap: 4px;

    padding: 12px 16px;

    background: var(--es-bg-secondary, #1a1a1a);

    border-bottom: 1px solid var(--es-border, #333);

    overflow-x: auto;

    scrollbar-width: none;

}



.es-module-tabs::-webkit-scrollbar {

    display: none;

}



.es-tab {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 10px 16px;

    background: transparent;

    border: none;

    border-radius: 8px;

    color: var(--es-text-secondary, #888);

    font-size: 14px;

    font-weight: 500;

    text-decoration: none;

    white-space: nowrap;

    transition: all 0.2s ease;

    position: relative;

}



.es-tab:hover {

    background: var(--es-bg-hover, #252525);

    color: var(--es-text-primary, #fff);

}



.es-tab.active {

    background: var(--tab-color, var(--es-accent));

    color: #fff;

}



.es-tab i {

    font-size: 16px;

}



.es-live-dot {

    width: 8px;

    height: 8px;

    background: #ef4444;

    border-radius: 50%;

    animation: pulse-live 1.5s infinite;

}



@keyframes pulse-live {

    0%, 100% { opacity: 1; transform: scale(1); }

    50% { opacity: 0.5; transform: scale(1.2); }

}



/* ----------------------------------------------------------------------------

   SUB-NAVIGATION (Pills)

   ---------------------------------------------------------------------------- */

.es-subnav {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 12px 16px;

    background: var(--es-bg-primary, #121212);

    border-bottom: 1px solid var(--es-border, #333);

    gap: 16px;

}



.es-pills {

    display: flex;

    gap: 8px;

    overflow-x: auto;

    scrollbar-width: none;

    flex: 1;

}



.es-pills::-webkit-scrollbar {

    display: none;

}



.es-pill {

    padding: 8px 16px;

    background: var(--es-bg-tertiary, #252525);

    border: 1px solid var(--es-border, #333);

    border-radius: 20px;

    color: var(--es-text-secondary, #888);

    font-size: 13px;

    font-weight: 500;

    text-decoration: none;

    white-space: nowrap;

    transition: all 0.2s ease;

}



.es-pill:hover {

    background: var(--es-bg-hover, #333);

    color: var(--es-text-primary, #fff);

    border-color: var(--es-accent, #00e676);

}



.es-pill.active {

    background: var(--es-accent, #00e676);

    border-color: var(--es-accent, #00e676);

    color: #000;

}



.es-view-toggle {

    display: flex;

    gap: 4px;

    background: var(--es-bg-tertiary, #252525);

    padding: 4px;

    border-radius: 8px;

}



.es-view-btn {

    padding: 8px 12px;

    background: transparent;

    border: none;

    border-radius: 6px;

    color: var(--es-text-secondary, #888);

    cursor: pointer;

    transition: all 0.2s ease;

}



.es-view-btn:hover {

    color: var(--es-text-primary, #fff);

}



.es-view-btn.active {

    background: var(--es-accent, #00e676);

    color: #000;

}



/* ----------------------------------------------------------------------------

   MAIN CONTENT AREA - Module Layouts

   ---------------------------------------------------------------------------- */

.es-content {

    padding: 16px;

    min-height: calc(100vh - 200px);

}



/* VIDEO LAYOUT - Grid cards with duration badges */

.es-content[data-layout="video"] .es-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

    gap: 16px;

}



/* PHOTOS LAYOUT - Masonry / Pinterest style */

.es-content[data-layout="photos"] .es-grid {

    column-count: 4;

    column-gap: 16px;

}



.es-content[data-layout="photos"] .es-card {

    break-inside: avoid;

    margin-bottom: 16px;

}



/* AUDIO LAYOUT - List with waveforms */

.es-content[data-layout="audio"] .es-grid {

    display: flex;

    flex-direction: column;

    gap: 8px;

}



/* SHORTS LAYOUT - Vertical scroll cards */

.es-content[data-layout="shorts"] .es-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));

    gap: 12px;

}



/* LIVE LAYOUT - Featured + grid */

.es-content[data-layout="live"] .es-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

    gap: 16px;

}



/* CHANNELS LAYOUT - TV style cards */

.es-content[data-layout="channels"] .es-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));

    gap: 20px;

}



/* COLISEUMS LAYOUT - Competition cards */

.es-content[data-layout="coliseums"] .es-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));

    gap: 20px;

}



/* LIBRARY LAYOUT - Compact list */

.es-content[data-layout="library"] .es-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

    gap: 12px;

}



/* List view mode override */

.es-content[data-view-mode="list"] .es-grid {

    display: flex !important;

    flex-direction: column;

    gap: 8px;

    column-count: unset !important;

}



.es-content[data-view-mode="list"] .es-card {

    display: flex;

    flex-direction: row;

    gap: 16px;

}



/* ----------------------------------------------------------------------------

   STAGING AREA DRAWER

   ---------------------------------------------------------------------------- */

.es-staging-drawer {

    position: fixed;

    right: -400px;

    top: 0;

    width: 380px;

    height: 100vh;

    background: var(--es-bg-secondary, #1a1a1a);

    border-left: 1px solid var(--es-border, #333);

    z-index: 1000;

    display: flex;

    flex-direction: column;

    transition: right 0.3s ease;

    box-shadow: -4px 0 20px rgba(0,0,0,0.5);

}



.es-staging-drawer.open {

    right: 0;

}



.es-staging-header {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 16px;

    border-bottom: 1px solid var(--es-border, #333);

}



.es-staging-header h3 {

    margin: 0;

    font-size: 16px;

    color: var(--es-text-primary, #fff);

    flex: 1;

}



.es-staging-count {

    font-size: 13px;

    color: var(--es-text-secondary, #888);

    background: var(--es-bg-tertiary, #252525);

    padding: 4px 10px;

    border-radius: 12px;

}



.es-staging-close {

    background: transparent;

    border: none;

    color: var(--es-text-secondary, #888);

    cursor: pointer;

    padding: 8px;

    border-radius: 6px;

}



.es-staging-close:hover {

    background: var(--es-bg-hover, #333);

    color: var(--es-text-primary, #fff);

}



.es-staging-items {

    flex: 1;

    overflow: visible;

    padding: 16px;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 8px;

    align-content: start;

}



.es-staging-item {

    position: relative;

    aspect-ratio: 1;

    border-radius: 8px;

    overflow: hidden;

    cursor: pointer;

}



.es-staging-item img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.es-staging-item-type {

    position: absolute;

    bottom: 4px;

    left: 4px;

    background: rgba(0,0,0,0.7);

    color: #fff;

    font-size: 10px;

    padding: 2px 6px;

    border-radius: 4px;

    text-transform: uppercase;

}



.es-staging-remove {

    position: absolute;

    top: 4px;

    right: 4px;

    background: rgba(239,68,68,0.9);

    border: none;

    color: #fff;

    width: 20px;

    height: 20px;

    border-radius: 50%;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 10px;

    opacity: 0;

    transition: opacity 0.2s ease;

}



.es-staging-item:hover .es-staging-remove {

    opacity: 1;

}



.es-staging-actions {

    display: flex;

    gap: 8px;

    padding: 16px;

    border-top: 1px solid var(--es-border, #333);

}



.es-staging-actions .es-btn {

    flex: 1;

    padding: 12px;

    border-radius: 8px;

    font-weight: 600;

    cursor: pointer;

    border: none;

    transition: all 0.2s ease;

}



.es-btn-secondary {

    background: var(--es-bg-tertiary, #252525);

    color: var(--es-text-primary, #fff);

}



.es-btn-secondary:hover {

    background: var(--es-bg-hover, #333);

}



.es-btn-primary {

    background: var(--es-accent, #00e676);

    color: #000;

}



.es-btn-primary:hover {

    background: #00c864;

}



/* Floating Action Button for Staging */

.es-staging-fab {

    position: fixed;

    bottom: 24px;

    right: 24px;

    width: 56px;

    height: 56px;

    background: var(--es-accent, #00e676);

    border: none;

    border-radius: 50%;

    color: #000;

    font-size: 20px;

    cursor: pointer;

    box-shadow: 0 4px 20px rgba(0,230,118,0.4);

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 999;

    transition: transform 0.2s ease;

}



.es-staging-fab:hover {

    transform: scale(1.1);

}



.es-staging-badge {

    position: absolute;

    top: -4px;

    right: -4px;

    background: #ef4444;

    color: #fff;

    font-size: 12px;

    font-weight: 700;

    width: 22px;

    height: 22px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

}



/* ----------------------------------------------------------------------------

   RESPONSIVE

   ---------------------------------------------------------------------------- */

@media (max-width: 1200px) {

    .es-content[data-layout="photos"] .es-grid {

        column-count: 3;

    }

}



@media (max-width: 900px) {

    .es-content[data-layout="photos"] .es-grid {

        column-count: 2;

    }

    

    .es-staging-drawer {

        width: 100%;

        right: -100%;

    }

}



@media (max-width: 600px) {

    .es-module-tabs {

        padding: 8px 12px;

    }

    

    .es-tab span {

        display: none;

    }

    

    .es-tab {

        padding: 10px 12px;

    }

    

    .es-content[data-layout="photos"] .es-grid {

        column-count: 1;

    }

    

    .es-content[data-layout="video"] .es-grid {

        grid-template-columns: 1fr;

    }

}



/* ----------------------------------------------------------------------------

   PLACEHOLDER

   ---------------------------------------------------------------------------- */

.es-placeholder {

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 300px;

    color: var(--es-text-secondary, #888);

    font-size: 16px;

}




/* Video Module Styles */

.es-video-module { padding: 20px 0; }

.es-sort-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; padding: 0 8px; }

.es-sort-label { color: #888; font-size: 14px; }

.es-sort-select { background: #1a1a1a; border: 1px solid #333; color: #fff; padding: 8px 12px; border-radius: 6px; font-size: 14px; }

.es-video-count { margin-left: auto; color: #666; font-size: 13px; }

.es-empty-state { text-align: center; padding: 80px 40px; color: #888; }

.es-empty-state i { font-size: 64px; color: #333; margin-bottom: 20px; display: block; }

.es-empty-state h3 { color: #fff; margin: 0 0 8px; }

.es-empty-state p { margin: 0 0 24px; }

.es-btn-primary { display: inline-block; background: linear-gradient(135deg, #10b981, #059669); color: #fff; padding: 12px 24px; border-radius: 8px; text-decoration: none; font-weight: 600; }

.es-video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; padding: 0 8px; }

.es-video-card { background: #0a0a0a; border-radius: 12px; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; }

.es-video-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.4); }

.es-card-link { text-decoration: none; color: inherit; display: block; }

.es-thumb { position: relative; aspect-ratio: 16/9; background: #151515; overflow: hidden; }

.es-thumb img { width: 100%; height: 100%; object-fit: cover; }

.es-thumb-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1a1a1a, #0a0a0a); }

.es-thumb-placeholder i { font-size: 48px; color: #333; }

.es-duration { position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,0.85); color: #fff; padding: 3px 6px; border-radius: 4px; font-size: 12px; font-weight: 600; }

.es-card-body { padding: 12px; }

.es-title { color: #fff; font-size: 15px; font-weight: 500; margin: 0 0 8px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.es-meta { font-size: 13px; color: #888; }

.es-channel { color: #aaa; }

.es-stats { display: block; margin-top: 4px; }

.es-watch-page { display: grid; grid-template-columns: 1fr 360px; gap: 24px; max-width: 1800px; margin: 0 auto; padding: 20px; }

.es-watch-main { min-width: 0; }

.es-player-container { background: #000; border-radius: 12px; overflow: hidden; aspect-ratio: 16/9; width: 100%; }

.es-video-player { width: 100%; height: 100%; background: #000; }

.es-video-info { padding: 16px 0; }

.es-video-title { font-size: 20px; font-weight: 600; color: #fff; margin: 0 0 12px; line-height: 1.4; }

.es-video-stats { color: #888; font-size: 14px; margin-bottom: 16px; }

.es-dot { margin: 0 6px; }

.es-video-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.es-action-btn { display: flex; align-items: center; gap: 6px; background: #252525; border: none; color: #fff; padding: 10px 16px; border-radius: 20px; cursor: pointer; font-size: 14px; transition: background 0.2s; }

.es-action-btn:hover { background: #333; }

.es-action-btn i { font-size: 16px; }

.es-channel-bar { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-top: 1px solid #252525; border-bottom: 1px solid #252525; margin: 16px 0; }

.es-channel-info { display: flex; align-items: center; gap: 12px; }

.es-channel-avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #10b981, #059669); display: flex; align-items: center; justify-content: center; font-weight: 600; color: #fff; }

.es-channel-meta { display: flex; flex-direction: column; }

.es-channel-name { color: #fff; font-weight: 600; text-decoration: none; font-size: 16px; }

.es-channel-name:hover { color: #10b981; }

.es-channel-subs { color: #888; font-size: 13px; }

.es-subscribe-btn { background: #10b981; color: #000; border: none; padding: 10px 20px; border-radius: 20px; font-weight: 600; cursor: pointer; transition: background 0.2s; }

.es-subscribe-btn:hover { background: #0ea572; }

.es-description-box { background: #151515; border-radius: 12px; padding: 16px; }

.es-description-text { color: #ccc; line-height: 1.6; white-space: pre-wrap; }

.es-no-description { color: #666; font-style: italic; }

.es-watch-sidebar h3 { color: #fff; font-size: 16px; margin: 0 0 16px; }

.es-related-list { display: flex; flex-direction: column; gap: 12px; }

.es-related-card { display: flex; gap: 10px; text-decoration: none; color: inherit; }

.es-related-card:hover h4 { color: #10b981; }

.es-related-thumb { width: 168px; min-width: 168px; aspect-ratio: 16/9; background: #151515; border-radius: 8px; overflow: hidden; position: relative; }

.es-related-thumb img { width: 100%; height: 100%; object-fit: cover; }

.es-related-info { flex: 1; min-width: 0; }

.es-related-info h4 { color: #fff; font-size: 14px; font-weight: 500; margin: 0 0 4px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.es-related-channel { display: block; color: #888; font-size: 12px; margin-bottom: 2px; }

.es-related-stats { color: #666; font-size: 12px; }

.es-no-related { color: #666; font-style: italic; }

.es-error { text-align: center; padding: 60px 40px; color: #888; }

.es-error h2 { color: #fff; margin-bottom: 8px; }

.es-error a { color: #10b981; }

@media (max-width: 1024px) { .es-watch-page { grid-template-columns: 1fr; } .es-watch-sidebar { border-top: 1px solid #252525; padding-top: 24px; } }

@media (max-width: 768px) { .es-video-grid { grid-template-columns: 1fr; } .es-watch-page { padding: 10px; } .es-video-title { font-size: 18px; } .es-related-thumb { width: 120px; min-width: 120px; } }




/* Fix scrollbar issue */

.es-watch-sidebar { overflow: hidden; }

.es-related-list { overflow: hidden; max-height: none; }

.es-watch-page { overflow: visible; }

body { overflow-x: hidden; }




/* Hide scrollbar on watch sidebar */

.es-watch-sidebar::-webkit-scrollbar { display: none; }

.es-watch-sidebar { -ms-overflow-style: none; scrollbar-width: none; overflow: visible; }

.es-related-list::-webkit-scrollbar { display: none; }

.es-related-list { -ms-overflow-style: none; scrollbar-width: none; }