: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;
}

html {
    height: 100%;
}

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 */
    min-height: 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: center;
    padding: 0 var(--spacing);
    gap: var(--spacing);
    flex-shrink: 0;
    position: sticky; /* Keep header visible */
    top: 0;
    z-index: 100;
}

.logo {
    font-weight: bold;
    font-size: 1.1rem;
    color: #fff;
}

@media (min-width: 768px) {
    .logo {
        flex: 0 0 296px; /* 320px rail - 12px padding - 12px gap */
    }
}

#service-nav {
    display: flex;
    gap: 8px;
    /* margin-left: auto; Removed to align left */
}

#header-actions {
    margin-left: auto;
    margin-left: 12px; /* Keep existing spacing relative to actions if any, but actually we want auto margin from the left */
}

/* Fix header actions selector specificity or just override */
#app-header #header-actions {
    margin-left: auto;
}

/* 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 {
    width: 100%;
    height: 100%;
}

/* 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: 1px;
    background-color: #2d2d2d; /* Grid lines */
    border: 1px solid #2d2d2d;
}

.guide-row {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 1px;
    background-color: var(--surface-color);
}

.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: 1fr;
        padding: 8px;
        gap: 4px;
        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 {
        gap: 8px;
    }
    .status-items-content {
        width: 100%;
        border-left: none;
        padding-left: 0;
        justify-content: space-between;
        margin-top: 4px;
    }
    .media-info-item {
        font-size: 0.8rem;
    }
}/* 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: 1px;
    background-color: #2d2d2d;
}

.guide-row {
    grid-template-columns: 200px 1.5fr 1fr; /* Fixed width for channel name */
    padding: 0;
}

.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: 120px 1fr 1fr;
    }
    
    .guide-cell {
        font-size: 0.8rem;
        padding: 8px;
    }
}
/* 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: 140px 1fr; /* Changed layout */
    gap: 12px;
    align-items: center;
    border-bottom: 1px solid #333;
    padding: 8px 16px;
    min-height: 70px;
}

.guide-channel-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.guide-channel-img {
    width: 60px;
    height: 34px;
    background: #000;
    margin-bottom: 4px;
    object-fit: cover;
    border-radius: 2px;
}

.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; /* Push remaining items right */
    overflow-x: auto; /* Handle many tabs */
}

.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; /* Fallback accent */
    color: #fff;
    border-color: transparent;
    font-weight: 500;
}

#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: 1px;
    background-color: #2d2d2d;
}

.guide-row {
    grid-template-columns: 200px 1.5fr 1fr; /* Fixed width for channel name */
    padding: 0;
}

.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: 120px 1fr 1fr;
    }
    
    .guide-cell {
        font-size: 0.8rem;
        padding: 8px;
    }
    
    .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-card p {
    color: var(--text-secondary);
    margin-bottom: 32px;
}

.login-btn {
    display: inline-block;
    background-color: #3b82f6;
    color: white;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 600;
    transition: background-color 0.2s;
}

.login-btn:hover {
    background-color: #2563eb;
}
/* 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;
}

/* 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: 140px 1fr;
    gap: 12px;
    align-items: center;
    border-bottom: 1px solid #333;
    padding: 8px 16px;
    min-height: 70px;
}

.service-guide-dropdown .guide-channel-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.service-guide-dropdown .guide-channel-img {
    width: 60px;
    height: 34px;
    background: #000;
    margin-bottom: 4px;
    object-fit: cover;
    border-radius: 2px;
}

.service-guide-dropdown .guide-channel-name-text {
    font-size: 0.9rem;
    font-weight: bold;
    color: #fff;
}

.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;
}

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

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