body {
    background: #111;
    color: #eee;
    font-family: sans-serif;
    margin: 0;
    overflow: auto;
}

/* Samsung DeX / Mobile Browser Safety */
@media (max-height: 800px) {
    body {
        overflow-y: auto;
    }
}

.hidden { display: none !important; }
/* --- EDITOR MODAL: make the whole overlay scrollable --- */
#editor-modal {
    /* still full-screen fixed overlay from your existing rules */
    overflow-y: auto;          /* allow vertical scrolling inside the overlay */
    /* MODIFIED: Reverting align-items to center to add vertical padding */
    align-items: center;   /* anchor at top instead of vertically centered */
}

/* Let the content be as tall as it needs and rely on overlay scroll */
#editor-modal .modal-content {
    display: block;            /* no flex needed here */
    max-height: none;
    width: 90vw;
    max-width: 600px;
}

/* Inner scrolling no longer needs a hard max-height */
#editor-modal .editor-scroll-body {
    overflow-y: visible;
    max-height: none;
}

/* --- Modals (Password & Editor) --- */
#password-modal, #editor-modal {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200; /* Highest priority */
    backdrop-filter: blur(5px);
}

.modal-content {
    background: #222;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0,0,0,0.7);
    border: 1px solid #444;
    min-width: 300px;
}

.modal-content h2 {
    margin-top: 0;
    color: #fff;
}

#password-input {
    font-size: 1.5rem;
    padding: 0.5rem;
    width: 100%;
    box-sizing: border-box;
    background: #111;
    color: #fff;
    border: 1px solid #555;
    border-radius: 4px;
}
#password-input:focus {
    outline: 2px solid #0af;
}

/* --- Admin Editor Specifics --- */

/* FIX: Ensure the modal container is scrollable on overflow */
#editor-modal .scrollable-modal-content {
    /* Ensure the modal content takes up maximum available height */
    max-height: 90vh; 
    
    /* Remove padding from the bottom so fixed buttons are visible */
    padding-bottom: 0; 
    
    /* Hide the default padding */
    padding-left: 0;
    padding-right: 0;
}

/* NEW: This div wraps the form elements and handles the actual scrolling */
.editor-scroll-body {
    overflow-y: auto; /* Enable vertical scrolling */
    padding: 2rem; /* Re-apply padding to the scrollable area */
    padding-bottom: 1rem;
    max-height: calc(90vh - 120px); /* Adjust max-height for h2 and buttons */
}


#editor-modal label {
    display: block;
    margin-top: 1rem;
    color: #aaa;
    font-size: 0.9rem;
}
#edit-title, #edit-category, #edit-thumb-input {
    width: 100%;
    padding: 0.5rem;
    margin-top: 0.25rem;
    box-sizing: border-box;
    background: #333;
    color: #fff;
    border: 1px solid #555;
    border-radius: 4px;
}
#edit-thumb-preview {
    display: block;
    margin-top: 1rem;
    max-width: 200px;
    max-height: 150px;
    border: 1px solid #444;
    background: #000;
    object-fit: contain;
}
.modal-buttons {
    margin-top: 2rem;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

/* --- Main Menu Layout --- */
#main-menu {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
}

/* --- Header --- */
#main-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 1rem 2rem;
    gap: 1rem;
    background: #1a1a1a;
    border-bottom: 1px solid #333;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
    z-index: 10;
}

#logo {
    height: 40px;
    width: auto;
}

#search-bar {
    flex-grow: 1;
    font-size: 1.2rem;
    padding: 0.5rem 1rem;
    background: #111;
    border: 1px solid #444;
    color: #fff;
    border-radius: 4px;
}
#search-bar:focus {
    outline: none;
    border-color: #0af;
}

#logout-button, .btn-secondary {
    background: #333;
    color: #eee;
    border: 1px solid #555;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}
#logout-button:hover, .btn-secondary:hover {
    background: #c00;
    border-color: #f00;
    color: #fff;
}

.btn-primary {
    background: #0af;
    color: #000;
    border: none;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}
.btn-primary:hover {
    background: #0088cc;
}

/* --- Category Container --- */
#category-container {
    flex-grow: 1;
    overflow-y: auto; /* Vertical scroll for the whole page */
    padding: 1rem 0;
}

.category-row {
    margin-bottom: 2rem;
}

.category-row h2 {
    font-size: 1.5rem;
    margin: 0 0 0.5rem 2rem;
    color: #ddd;
}

/* --- Horizontal Scroll Container (For Categories) --- */
.video-scroll-container {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    padding: 1rem 0;
    
    /* Faded Edges Effect */
    position: relative;
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 2%, rgba(0,0,0,1) 98%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 2%, rgba(0,0,0,1) 98%, rgba(0,0,0,0) 100%);
    
    /* Hide Scrollbar */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE 10+ */
}
.video-scroll-container::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* --- Grid Container (For Uncategorized) --- */
.video-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    padding: 1rem 2rem;
}

/* --- Video Items --- */
.video-item {
    background: #222;
    border-radius: 4px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    position: relative;
}

/* Styling specifically for items inside the SCROLL container */
.video-scroll-container .video-item {
    min-width: 280px;
    width: 280px;
    margin-left: 1rem;
}
.video-scroll-container .video-item:first-child { margin-left: 2rem; }
.video-scroll-container .video-item:last-child { margin-right: 2rem; }

/* Styling specifically for items inside the GRID container */
.video-grid-container .video-item {
    width: 100%;
    margin: 0;
}

.video-item img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 4px 4px 0 0;
    display: block;
}

.video-item p {
    text-align: center;
    padding: 0.75rem 0.5rem;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.95rem;
    color: #ccc;
}

/* Selection & Admin States */
.video-item.selected {
    border-color: #0af;
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(0, 170, 255, 0.5);
    z-index: 5;
}

.video-item.admin-editable {
    border: 2px dashed #c00;
}
.video-item.admin-editable:hover {
    background: #300;
}

/* --- Player View --- */
#player-view {
    width: 100vw;
    height: 100vh;
    background: #000;
    position: relative;
    display: flex;
    flex-direction: column;
}

#video-player {
    width: 100%;
    height: 100%;
    outline: none;
}

/* --- Player Controls Overlay --- */
#player-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0));
    display: flex;
    align-items: center;
    padding: 1.5rem 2rem;
    gap: 1rem;
    opacity: 1;
    transition: opacity 0.3s;
    z-index: 50;
    box-sizing: border-box;
}

#player-controls.controls-hidden {
    opacity: 0;
    pointer-events: none;
}

#player-controls button {
    background: rgba(255,255,255,0.1);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    min-width: 60px;
}
#player-controls button:hover {
    background: rgba(255,255,255,0.2);
}
#player-controls button:focus, 
#player-controls input:focus {
    outline: 2px solid #0af;
}

/* --- Scrubber Styling (Cross-browser) --- */
#ctrl-scrub {
    flex-grow: 1;
    -webkit-appearance: none;
    background: rgba(255,255,255,0.2);
    height: 6px;
    border-radius: 3px;
    cursor: pointer;
}
#ctrl-scrub::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #0af;
    margin-top: 0;
}
#ctrl-scrub::-moz-range-thumb {
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #0af;
    border: none;
}

/* --- Thumbnail Preview Video --- */
.video-item {
    /* Ensure relative positioning so the video sits inside */
    position: relative; 
    overflow: hidden;
}

/* The preview video overlays the image */
.preview-player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Maintains aspect ratio filling the box */
    z-index: 2;
    background: #000;
    pointer-events: none; /* Clicks go through to the card */
    opacity: 0; /* Start hidden */
    transition: opacity 0.3s ease-in;
}

.preview-player.visible {
    opacity: 1;
}

/* --- NEW: Carousel Navigation Arrows --- */
.video-scroll-container {
    position: relative; /* Essential for absolute positioning of arrows */
}

.scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 2rem;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s;
    z-index: 10;
    pointer-events: none; /* Allows mouse to pass through when hidden */
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-scroll-container:hover .scroll-arrow {
    opacity: 1;
    pointer-events: all; /* Enables interaction on hover */
}

.scroll-arrow.left {
    left: 0;
    border-radius: 0 4px 4px 0;
}

.scroll-arrow.right {
    right: 0;
    border-radius: 4px 0 0 4px;
}

/* --- Show More Card Style (for truncated carousels) --- */
.show-more-item {
    min-width: 280px;
    width: 280px;
    
    /* NEW: Use a light blue accent */
    border: 2px solid #0af !important;
    background: #151525 !important;
    color: #0af !important; 
    
    /* Ensure it looks good in a row */
    margin-left: 1rem;
}

.show-more-item:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(0, 170, 255, 0.7);
    background: #22223c !important; 
}

.show-more-item h3 {
    font-size: 1.2rem;
    color: #0af;
}

/* --- Category View Layout (Full Page Grid) --- */
#category-view {
    width: 100vw;
    height: 100vh;
    background: #111;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

#category-header {
    display: flex;
    align-items: center;
    padding: 1rem 2rem;
    gap: 1.5rem;
    background: #1a1a1a;
    border-bottom: 1px solid #333;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
    z-index: 10;
}

#category-header h1 {
    flex-grow: 1;
    margin: 0;
    font-size: 1.8rem;
    color: #0af;
}

#category-pagination-info {
    font-size: 1rem;
    color: #aaa;
}

#category-content {
    flex-grow: 1;
    padding: 1rem 0;
}

/* Reuse the video-grid-container style for the category content */
#category-grid {
    padding: 1.5rem 2rem;
    /* Ensure no vertical scrolling on the grid itself, let #category-view handle it */
    overflow-y: visible;
}

/* Ensure buttons are properly styled */
#category-pagination-controls button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


/* ========================================================= */
/* ===== HORIZONTAL EDITOR LAYOUT OVERRIDE (For Wide Screens) ======= */
/* ========================================================= */

@media (min-width: 900px) {

    /* CRITICAL FIX: Establish a flex column container with fixed height to allow children to properly size */
    #editor-modal .modal-content.horizontal-editor {
        /* MODIFIED: Reduced size for more padding around the window */
        width: 70vw !important; /* Reduced from 80vw */
        max-width: 950px !important; /* Reduced from 1050px */
        
        /* MODIFIED: Reduced height for more padding around the window */
        height: 80vh !important; /* Reduced from 90vh */
        overflow: hidden !important;
        
        display: flex !important; /* Make it a flex container */
        flex-direction: column !important; /* Stack children vertically (h2 on top, layout below) */
        
        /* Remove padding to allow content to span full width/height inside this new flex context */
        padding: 1rem !important; 
    }

    /* Two-column layout */
    .editor-horizontal-layout {
        display: flex !important;
        flex-direction: row !important;
        gap: 1.5rem !important;
        width: 100% !important;
        flex: 1 !important; /* CRITICAL FIX: Make it take all remaining vertical space */
        overflow: hidden !important; /* Container for the two scrollable columns */
    }

    /* LEFT COLUMN (Admin Options) */
    .editor-left {
        width: 340px !important; /* Fixed width for options column */
        flex-shrink: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.8rem !important;
        overflow-y: auto !important;
        /* MODIFIED: Right border removed */
        border-right: none !important;
        padding-right: 8px !important; 
        padding-top: 0.5rem !important; 
    }

    /* RIGHT COLUMN (Live Thumbnail Chooser) */
    .editor-right {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.8rem !important;
        overflow-y: auto !important; /* This column should handle its own scrolling */
        /* MODIFIED: Added left border */
        border-left: 1px solid #444 !important;
        padding-left: 1.5rem !important;
        padding-right: 10px !important;
        padding-top: 0.5rem !important; 
    }

    /* Button bar is now inside .editor-left, but still needs to stick to the bottom */
    .editor-button-bar {
        margin-top: auto !important;
        display: flex !important;
        gap: 1rem !important;
        justify-content: flex-end !important;
        padding-top: 1rem !important;
        border-top: 1px solid #444 !important;
        background: #222 !important;
        
        /* Ensure the button bar is sticky and doesn't get scrolled away inside .editor-left */
        position: sticky !important;
        bottom: -0.5rem !important; /* Adjusted slightly */
        z-index: 5 !important;
        margin-bottom: 0 !important;
        padding-bottom: 0.5rem !important;
    }

    /* Thumbnail sizing */
    #edit-thumb-preview {
        max-width: 100% !important;
        max-height: 200px !important;
        object-fit: contain !important;
    }

    #thumb-selector-player {
        width: 100% !important;
        max-height: none !important; 
        background: #000 !important;
    }

    /* Kill the old vertical scroll trap so it cannot interfere */
    #editor-modal .editor-scroll-body {
        max-height: none !important;
        overflow: visible !important;
    }
}