:root {
    --bg-color: #0b0c0f;
    --surface-color: #15171b;
    --surface-active: #23272e;
    --text-primary: #e6e6e6;
    --text-secondary: #9ca3af;
    --accent-color: #3b82f6;
    --header-height: 56px;
    --nav-height: 48px;
    --spacing: 12px;
}

* {
    box-sizing: border-box;
}

html {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-primary);
    overflow-y: auto; /* Allow global scroll */
    overflow-x: hidden;
    min-height: 100%;
    width: 100%;
}

#app {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Allow growth */
}

/* Header */
#app-header {
    height: var(--header-height);
    background-color: var(--surface-color);
    border-bottom: 1px solid #2d2d2d;
    display: flex;
    align-items: stretch; /* Stretch children to full header height */
    padding: 0 var(--spacing);
    gap: var(--spacing);
    flex-shrink: 0;
    position: sticky; /* Keep header visible */
    top: 0;
    z-index: 100;
}

@media (max-width: 767px) {
    #app-header {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        width: 100vw;
        max-width: 100vw;
        box-sizing: border-box;
        scrollbar-width: none;
        padding-right: 0;
        gap: 12px; /* Use standard gap */
    }
    #app-header::-webkit-scrollbar {
        display: none;
    }
    
    /* Ensure trailing space in scroll container using pseudo-element */
    #app-header::after {
        content: '';
        display: block;
        min-width: 12px; 
        height: 1px;
        flex-shrink: 0;
    }
    
    #app-header > * {
        flex-shrink: 0;
        margin-right: 0 !important; /* Reset manual margins */
    }

    #app-header #header-actions {
        margin-left: 0;
    }
    
    /* Reset specific user-menu margins since we use gap+spacer now */
    #user-menu {
        margin-left: 0; 
        margin-right: 0;
    }
    
    body {
        overflow-x: hidden;
        width: 100%;
    }
}

#app-header > * {
    display: flex;
    align-items: center; /* Center content within the stretched container */
}

#service-nav {
    display: flex;
    gap: 8px;
    align-items: stretch; /* Stretch buttons to full height */
}

.service-nav-item button {
    height: 100%;
    padding: 0 12px;
    border-radius: 0; /* Optional: square edges for better "full height" feel? Or keep them pill? */
}

@media (max-width: 767px) {
    /* ... existing app-header styles ... */
    
    /* Fix User Menu Dropdown getting clipped by header scroll */
    .user-menu-dropdown {
        position: fixed !important;
        top: 56px !important; /* Below header */
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
        margin-top: 0 !important;
        border-radius: 0 !important;
        border-left: none;
        border-right: none;
        box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    }
}

/* User Menu */
#user-menu {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: auto;
}

@media (max-width: 767px) {
    #user-menu {
        margin-left: 12px;
        margin-right: 12px;
    }
}

.user-avatar-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    border-radius: 50%;
    overflow: hidden;
    width: 36px;
    height: 36px;
    align-self: center; /* Prevent stretch in flex container */
    box-shadow: 0 0 0 1px rgba(255,255,255,0.1); /* Subtle ring */
    transition: box-shadow 0.2s;
    flex-shrink: 0; /* Don't shrink */
}

.user-avatar-btn:hover {
    box-shadow: 0 0 0 2px rgba(255,255,255,0.3); /* Subtle white highlight */
}

.user-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-menu-dropdown {
    position: absolute;
    top: 100%;
    right: -16px; 
    margin-top: -1px;
    width: 260px;
    background-color: var(--surface-color);
    border: 1px solid #333;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    z-index: 1500;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

/* Invisible bridge */
.user-menu-dropdown::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: 20px;
}

.user-menu-dropdown.active {
    display: flex;
}

.user-menu-header {
    padding: 12px 16px;
    background-color: #1a1d21;
    border-bottom: 1px solid #2d2d2d;
    font-weight: 500;
    color: #9ca3af; /* Darker grey-ish */
    font-size: 0.85rem; /* Smaller font */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.user-menu-app-name {
    margin-left: 12px;
    color: var(--accent-color);
}

.user-menu-section {
    padding: 8px 0;
    border-bottom: 1px solid #2d2d2d;
}

.user-menu-subs-header {
    margin: 8px 0; /* Full width, vertical margin */
    padding: 6px;
    font-size: 0.65rem;
    color: #e6e6e6;
    font-weight: normal; /* Removed bold */
    text-transform: uppercase;
    background-color: rgba(25, 135, 84, 0.2); /* Slightly more transparent for full width */
    text-align: center;
    display: block;
}

/* Subscription Grid Header (Legend) */
.user-menu-grid-header {
    display: grid;
    grid-template-columns: 1fr 32px 32px 32px;
    padding: 4px 16px;
    font-size: 0.65rem;
    color: #6b7280;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    align-items: center;
}
.user-menu-grid-header span:first-child {
    text-align: left;
}

.user-menu-item {
    display: grid;
    grid-template-columns: 1fr 32px 32px 32px;
    align-items: center;
    padding: 6px 16px; /* Reduced whitespace */
    color: #ccc;
    font-size: 0.9rem;
    cursor: default;
    transition: background-color 0.2s;
}

.user-menu-item:hover {
    background-color: rgba(255,255,255,0.05);
}

.role-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.9rem;
    font-weight: bold;
}

.role-live { color: #cc0000; }
.role-vod { color: #3b82f6; }
.role-ads { color: #795548; }
.role-no-ads { color: #2d5a3c; } /* Muted green */

.role-missing {
    color: #4b5563;
    font-weight: normal;
    font-size: 0.8rem;
}

.user-menu-actions {
    padding: 12px;
    display: flex;
    justify-content: center;
}

/* Simple Red Text Logout */
.user-menu-actions .icon-btn {
    width: 100%;
    background: transparent;
    border: none;
    color: #dc3545;
    font-weight: normal; /* Removed bold */
    font-size: 0.9rem;
    padding: 10px;
    box-shadow: none;
    cursor: pointer;
    transition: opacity 0.2s;
}

.user-menu-actions .icon-btn:hover {
    background: rgba(220, 53, 69, 0.1);
    color: #ff4d5e;
    transform: none;
    box-shadow: none;
}


/* Main Layout */
#app-main {
    display: flex;
    flex: 1;
    /* overflow: hidden; Removed to allow page scroll */
    flex-direction: column; /* Mobile first: column */
}

/* Desktop Only / Mobile Only Utilities */
.desktop-only { display: none !important; }
.mobile-only { display: block !important; }

@media (min-width: 768px) {
    #app-main {
        flex-direction: row;
    }
    .desktop-only { display: block !important; }
    .mobile-only { display: none !important; }
}

/* Left Rail (Desktop) */
#left-rail {
    width: 320px;
    background-color: var(--surface-color);
    border-right: 1px solid #2d2d2d;
    display: flex;
    flex-direction: column;
    /* overflow-y: auto; Left rail scrolls independently? No, simpler if page scrolls.
       But standard pattern is rail fixed, content scrolls. 
       Let's try fixed rail first as requested "page expand downwards".
       If we want page to scroll, rail must be sticky or fixed.
    */
    position: sticky;
    top: var(--header-height);
    height: calc(100vh - var(--header-height));
    overflow-y: auto;
    flex-shrink: 0;
}

/* Center Column */
#center-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* Allow it to grow */
}

/* Player Section */
#player-section {
    background: #000;
    flex-shrink: 0;
}

.video-container {
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
}

.video-container:focus {
    outline: none !important;
    box-shadow: none !important;
}

video {
    width: 100%;
    height: 100%;
    outline: none !important;
    box-shadow: none !important;
}

video:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Live Mode: Hide Scrub Bar & Time */
.video-container.live-mode video::-webkit-media-controls-timeline,
.video-container.live-mode video::-webkit-media-controls-current-time-display,
.video-container.live-mode video::-webkit-media-controls-time-remaining-display,
.video-container.live-mode video::-webkit-media-controls-seek-back-button,
.video-container.live-mode video::-webkit-media-controls-seek-forward-button {
    display: none !important;
}

/* Channel List */


/* Player Overlay */
.player-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Let clicks pass through to video */
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease;
    background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 20%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--spacing);
}

.video-container {
    position: relative; /* Anchor for overlay */
}

.overlay-content {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.overlay-top-left, .overlay-top-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.badge-live {
    background-color: #cc0000;
    color: #fff;
    font-weight: bold;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 2px;
}

.badge-vod {
    background-color: #3b82f6; /* Blue */
    color: #fff;
    font-weight: bold;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 2px;
}

.channel-name-text {
    color: #fff;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.badge-status {
    background-color: rgba(255,255,255,0.2);
    color: #fff;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 2px;
    font-weight: 500;
}

.badge-ad {
    background-color: #ffca28; /* Amber */
    color: #000;
}

.badge-quality {
    background-color: rgba(0,0,0,0.6);
    border: 1px solid rgba(255,255,255,0.3);
    color: #ccc;
    font-size: 0.7rem;
    padding: 1px 5px;
    border-radius: 2px;
    font-family: monospace;
}

/* Secondary Content (Mobile List / Guide) */
#secondary-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--surface-color);
}

/* Tabs */
.tabs {
    display: flex;
    border-bottom: 1px solid #2d2d2d;
    background: var(--surface-color);
}

.tabs button {
    flex: 1;
    background: transparent;
    border: none;
    padding: 12px;
    color: var(--text-secondary);
    font-weight: 600;
    border-bottom: 2px solid transparent;
}

.tabs button.active {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}

/* Channel List Items (Shared) */
#mobile-channel-list {
    overflow-y: auto;
    flex: 1;
}

.channel-list-items {
    list-style: none;
    padding: 0;
    margin: 0;
}

.channel-item {
    display: flex;
    align-items: center;
    padding: 0;
    cursor: pointer;
    border-bottom: none;
    height: 64px; /* Match thumbnail height */
}

.channel-item:hover {
    background-color: rgba(255,255,255,0.03);
}

.channel-item.active {
    background-color: var(--surface-active);
    /* Border right for highlight */
    border-right: 5px solid var(--accent-color);
}

.channel-thumb {
    width: 112px;
    height: 64px;
    object-fit: cover;
    background: #000;
    margin: 0; /* Remove margin */
    border-radius: 0; /* Square edges for "butting up" */
    flex-shrink: 0;
}

.channel-info {
    flex: 1;
    min-width: 0;
    padding: 0 12px; /* Add padding here instead */
}

.channel-name {
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Guide Styling */
#guide-container {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing);
}

.guide-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    background-color: transparent;
    border: none;
}

/* Removed redundant guide-row */

.guide-cell {
    padding: 10px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
}

.guide-channel-name {
    font-weight: bold;
    color: var(--text-primary);
}

.guide-now {
    color: var(--accent-color);
}

.guide-now.clickable {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(59, 130, 246, 0.5);
    text-underline-offset: 2px;
}

.guide-now.clickable:hover {
    color: #60a5fa;
    background-color: rgba(255,255,255,0.02);
}

.guide-next {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

@media (max-width: 767px) {
    /* Stack guide rows on mobile? or keep grid but shrink text? */
    .guide-row {
        grid-template-columns: 200px 1fr;
        padding: 0;
        gap: 0;
        border-bottom: 1px solid #2d2d2d;
    }
    .guide-grid {
        background: transparent;
        border: none;
    }
    .guide-cell {
        padding: 2px 4px;
    }
}

/* Status Line */
.status-line-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Align everything left */
    padding: 8px var(--spacing);
    background-color: #000; 
    border-bottom: 1px solid #2d2d2d;
    flex-wrap: wrap;
    gap: 12px;
}

.status-items-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.status-items-content {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
    padding-left: 12px;
    border-left: 1px solid #333; /* Separator */
}

.quality-wrap {
    display: flex;
    align-items: center;
}

#quality-select {
    background: #222;
    color: #ddd;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.8rem;
    outline: none;
    cursor: pointer;
}

.badge-section {
    border: 1px solid transparent; /* Let JS set border color */
    color: #bbb;
    font-size: 0.75rem;
    padding: 3px 10px;
    border-radius: 12px;
    white-space: nowrap;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
    transition: all 0.2s;
}

.badge-channel {
    background-color: var(--surface-active); /* Dark grey */
    color: #fff;
    font-size: 0.75rem;
    padding: 3px 10px;
    border-radius: 12px;
    white-space: nowrap;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
}

.badge-ad-status {
    background-color: #ffca28; /* Amber */
    color: #000;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: bold;
    text-transform: uppercase;
}

.media-info-item {
    font-size: 0.9rem;
    display: flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.media-info-item .label-small {
    font-size: 0.7rem;
    color: #4caf50; /* Green for 'now' */
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
}

#status-next .label-small {
    color: #ff9800; /* Orange for 'next' */
}

.media-info-item .title-text {
    color: #fff;
    font-weight: 500;
}

.media-info-item.text-muted .title-text {
    color: #aaa;
}

@media (max-width: 767px) {
    .status-line-wrap {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 12px var(--spacing);
    }
    
    .status-items-left {
        width: 100%;
        gap: 8px;
        flex-wrap: wrap;
    }

    .status-items-content {
        width: 100%;
        border-left: none;
        padding-left: 0;
        margin-top: 4px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .media-info-item {
        font-size: 0.85rem;
        width: 100%;
    }
    
    .badge-channel {
        max-width: none; /* Let it fill available space on mobile */
    }
}/* Add to existing CSS */

.guide-loading {
    padding: 40px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 1.1rem;
}

/* Ensure guide container is visible when active */
#guide-container {
    /* Existing styles */
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing);
}
/* New Guide Overlay Styling */
.guide-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    display: flex; /* controlled by js */
    justify-content: center;
    align-items: flex-start;
    padding-top: 60px; /* offset from header */
    backdrop-filter: blur(4px);
}

.guide-modal {
    background-color: var(--surface-color);
    width: 90%;
    max-width: 1000px;
    height: 80vh;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideDown 0.3s ease-out;
    border: 1px solid #333;
}

@keyframes slideDown {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.guide-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #2d2d2d;
    background-color: #1a1d21;
}

.guide-header h2 {
    margin: 0;
    font-size: 1.2rem;
    color: #fff;
    font-weight: 600;
}

#guide-grid-container {
    flex: 1;
    overflow-y: auto;
    padding: 0; /* Let grid handle it */
}

/* Update grid styling for the modal */
.guide-grid {
    border: none;
    gap: 0;
    background-color: transparent;
}

/* Removed redundant guide-row */

.guide-cell {
    padding: 16px;
    height: 60px; /* Fixed height rows */
    box-sizing: border-box;
}

.guide-channel-name {
    background-color: #1a1d21; /* Slightly darker */
    font-size: 1rem;
}

/* Icon Buttons */
.icon-btn {
    background: transparent;
    border: 1px solid #444;
    color: #eee;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.icon-btn:hover {
    background-color: #333;
    border-color: #666;
}

#header-actions {
    margin-left: 12px;
}

@media (max-width: 768px) {
    .guide-modal {
        width: 100%;
        height: 100%;
        border-radius: 0;
        max-width: none;
    }
    
    .guide-overlay {
        padding-top: 0;
        z-index: 2000; /* Above everything on mobile */
    }

    .guide-row {
         grid-template-columns: 260px 1fr; /* Increased from 200px */
         padding: 0;
    }
}
/* Timeline specific styles */
.guide-timeline-track {
    display: flex;
    height: 100%;
    width: 100%;
    background-color: #222;
    overflow: hidden;
    position: relative;
    border-radius: 4px;
}

.guide-block {
    height: 100%;
    border-right: 1px solid #111;
    padding: 8px 12px;
    box-sizing: border-box;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    position: relative;
    color: #ccc;
    transition: background-color 0.2s;
}

.guide-block:hover {
    filter: brightness(1.2);
}

.guide-block.is-now {
    background-color: #2c3e50; /* Dark Blue-Grey */
    color: #fff;
    font-weight: 500;
}

.guide-block.is-next {
    background-color: #1f232d;
    color: #aaa;
}

.guide-block.is-future {
    background-color: #161920;
    color: #888;
}

/* Progress bar inside "Now" block */
.guide-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background-color: #3b82f6; /* Accent color */
    z-index: 2;
}

.guide-row {
    display: grid;
    grid-template-columns: 300px 1fr; /* Increased from 240px to prevent truncation */
    gap: 0;
    align-items: center;
    border-bottom: 1px solid #333;
    padding: 0;
    min-height: 64px;
}

.guide-channel-col {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
}

.guide-channel-img {
    width: 112px;
    height: 64px;
    background: #000;
    margin-bottom: 0;
    object-fit: cover;
    border-radius: 0;
    flex-shrink: 0;
}

.guide-channel-name-text {
    background-color: #2d2d2d; /* Dark grey pill */
    color: #fbbf24; /* Soft yellow highlight */
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: normal !important;
    
    /* Layout */
    flex: 1; /* Allow taking more space */
    max-width: 100%;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 12px;
    display: inline-block;
}

.guide-timeline-container {
    height: 50px;
    width: 100%;
}
/* New Guide Overlay Styling */
.guide-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    display: flex; /* controlled by js */
    justify-content: center;
    align-items: flex-start;
    padding-top: 60px; /* offset from header */
    backdrop-filter: blur(4px);
}

.guide-modal {
    background-color: var(--surface-color);
    width: 90%;
    max-width: 1000px;
    height: 80vh;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideDown 0.3s ease-out;
    border: 1px solid #333;
}

@keyframes slideDown {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.guide-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #2d2d2d;
    background-color: #1a1d21;
}

.guide-header h2 {
    margin: 0;
    font-size: 1.2rem;
    color: #fff;
    font-weight: 600;
    margin-right: 20px;
}

.guide-tabs {
    display: flex;
    gap: 8px;
    margin-right: auto;
    overflow-x: auto;
    flex: 1;
    min-width: 0;
    scrollbar-width: none;
}

.guide-tabs::-webkit-scrollbar {
    display: none;
}

.guide-tab-btn {
    background: transparent;
    border: 1px solid #444;
    color: #aaa;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
    white-space: nowrap;
}

.guide-tab-btn:hover {
    background-color: #333;
    color: #eee;
}

.guide-tab-btn.active {
    background-color: #3b82f6;
    color: #fff;
    border-color: transparent;
    font-weight: 500;
}

.guide-cell {
    padding: 16px;
    height: 60px; /* Fixed height rows */
    box-sizing: border-box;
}

.guide-channel-name {
    background-color: #1a1d21; /* Slightly darker */
    font-size: 1rem;
}

/* Icon Buttons */
.icon-btn {
    background: transparent;
    border: 1px solid #444;
    color: #eee;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.icon-btn:hover {
    background-color: #333;
    border-color: #666;
}

#header-actions {
    margin-left: 12px;
}

@media (max-width: 768px) {
    .guide-modal {
        width: 100%;
        height: 100%;
        border-radius: 0;
        max-width: none;
    }
    
    .guide-overlay {
        padding-top: 0;
        z-index: 2000; /* Above everything on mobile */
    }

    .guide-row {
         grid-template-columns: 260px 1fr; /* Increased from 200px */
         padding: 0;
    }
    
    .guide-header {
        flex-wrap: wrap; /* Allow tabs to wrap on very small screens */
        gap: 10px;
    }
    
    .guide-tabs {
        order: 3; /* Move tabs below title/close on tiny screens if needed */
        width: 100%;
        padding-bottom: 4px;
    }
}
/* Login Section */
.login-section {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-color);
    z-index: 2000;
}

.login-card {
    background-color: var(--surface-color);
    padding: 40px;
    border-radius: 12px;
    text-align: center;
    border: 1px solid #333;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    max-width: 400px;
    width: 90%;
}

.login-card h1 {
    margin: 0 0 16px;
    font-size: 1.8rem;
    color: #fff;
}

.login-logo {
    width: 256px;
    height: 256px;
    margin-bottom: 16px; /* Reduced from 24px */
    object-fit: contain;
}

.login-card p {
    color: var(--text-secondary);
    margin-bottom: 32px;
}

.login-btn-google {
    display: inline-flex;
    align-items: center;
    background-color: #4285F4; /* Google Blue */
    color: #fff;
    text-decoration: none;
    padding: 0 16px 0 2px; /* Less left padding since icon has margin */
    border-radius: 4px;
    font-weight: 500;
    font-size: 0.85rem; /* Slightly smaller font */
    transition: background-color 0.2s, box-shadow 0.2s;
    height: 40px;
    border: none;
}

.login-btn-google:hover {
    background-color: #3367d6;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.login-btn-google:active {
    background-color: #2a56c6;
}

.google-icon-wrapper {
    background: #fff;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    margin-right: 12px;
}
/* Service Nav Dropdowns */
.service-nav-item {
    position: relative;
    display: flex;
    align-items: center;
}

.service-guide-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 700px;
    max-height: 600px;
    background-color: var(--surface-color);
    border: 1px solid #333;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.9);
    z-index: 1500;
    overflow-y: auto;
    display: none;
    flex-direction: column;
    padding: 0;
    margin-top: 0; /* No gap */
    padding-top: 10px; /* Internal spacing acting as bridge */
}

/* Show on hover */
.service-nav-item:hover .service-guide-dropdown {
    display: flex;
}

@media (max-width: 767px) {
    .service-nav-item:hover .service-guide-dropdown {
        display: none !important;
    }
}

/* Use transparent pseudo-element to bridge any remaining gap if button has margin */
.service-nav-item::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 10px; /* Bridge gap */
}

/* Dropdown Guide Styles - Mirroring Main Guide */
.service-guide-dropdown .guide-row {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 0;
    align-items: center;
    border-bottom: 1px solid #333;
    padding: 0;
    min-height: 64px;
}

.service-guide-dropdown .guide-channel-col {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
}

.service-guide-dropdown .guide-channel-img {
    width: 112px;
    height: 64px;
    background: #000;
    margin-bottom: 0;
    object-fit: cover;
    border-radius: 0;
    flex-shrink: 0;
}

.service-guide-dropdown .guide-channel-name-text {
    background-color: #2d2d2d;
    color: #fbbf24;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: normal !important;
    
    flex: 1;
    max-width: 100%;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 12px;
    display: inline-block;
}

.service-guide-dropdown .guide-timeline-container {
    height: 50px;
    width: 100%;
}

.service-guide-dropdown .guide-block {
    font-size: 0.85rem;
}
/* Content Table */
.content-table-container {
    padding: 20px;
    background-color: var(--surface-color);
    border-top: 1px solid #333;
    overflow-x: auto;
}

.content-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.content-table th {
    text-align: left;
    padding: 12px;
    border-bottom: 2px solid #333;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
}

.content-table td {
    padding: 12px;
    border-bottom: 1px solid #222;
}

.content-table tr:hover {
    background-color: rgba(255,255,255,0.03);
}

.content-table tr.is-current {
    background-color: rgba(59, 130, 246, 0.1);
}

.content-table tr.is-current td {
    color: var(--accent-color);
    font-weight: 500;
}

.play-btn {
    background-color: #333;
    border: 1px solid #555;
    color: #eee;
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s;
}

.play-btn:hover {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: #fff;
}

.play-btn.playing-btn {
    background-color: #198754; /* Green */
    border-color: #198754;
    color: #fff;
    font-weight: bold;
    cursor: default;
}

.content-table-loading,
.content-table-empty,
.content-table-error {
    padding: 40px;
    text-align: center;
    color: var(--text-secondary);
}

/* VOD Accordion */
.vod-accordion {
    border: 1px solid #222; /* Thinner/darker border */
    border-radius: 6px;
    overflow: hidden;
    background-color: var(--surface-color);
    margin-bottom: 8px; /* Reduced gap */
}

.vod-accordion-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px; /* Reduced padding */
    background-color: #1a1d21;
    color: #ccc;
    border: none;
    cursor: pointer;
    font-size: 0.85rem; /* Reduced font size */
    font-weight: 500;
    transition: all 0.2s;
}

.vod-accordion-header:hover {
    background-color: #2c313a;
}

.vod-accordion-header.active {
    background-color: var(--accent-color); /* Highlight active state */
    color: #fff;
}

.vod-arrow {
    transition: transform 0.3s ease;
    font-size: 0.8rem;
}

.vod-accordion-content {
    border-top: 1px solid #333;
}

/* Helper to force hide dropdown after click until mouse leaves */
.service-nav-item.force-hide .service-guide-dropdown {
    display: none !important;
}