/* Prevent white screen flashes between page loads */
html, 
body,
#root {
    background-color: #000000 !important;
}

/* Global Variables: Logo Sizing & Black Theme */
body {
    /* Enlarged NoxVideo Logo */
    --default-logo-height: 36px !important;
    --logo-height: 36px !important;

    /* True Black Theme Overrides */
    --body-bg-color: #000000 !important;
    --primary-bg: #000000 !important;
    --bg-color: #000000 !important;
    --sidebar-bg-color: #000000 !important;
    --sidebar-bg: #000000 !important;
    --menu-bg-color: #000000 !important;
    --surface-color: #000000 !important;
    --header-bg-color: #000000 !important;
    --card-bg-color: #000000 !important;
    --dropdown-bg-color: #000000 !important;
    --modal-bg-color: #000000 !important;
    --comment-bg-color: #000000 !important;
    --secondary-bg-color: #000000 !important;
}

/* Original MediaCMS Large-Screen Grid (Un-nested for standard CSS) */
@media screen and (min-width: 2200px) {
    body {
        --default-item-width: 342px !important;
        --default-max-item-width: 342px !important;
        --default-item-margin-right-width: 17px !important;
        --default-item-margin-bottom-width: 27px !important;
    }
}

/* Component Level Overrides */
.page-header .logo img,
.page-header .logo svg {
    max-height: 36px !important;
    height: 36px !important;
    width: auto !important;
}

.page-wrapper, 
.layout-wrapper, 
.main-content,
#page-home,
.page-header,
.page-sidebar,
.sidebar,
.sidebar-wrapper,
.ui.sidebar,
.ui.menu,
.ui.menu .menu,
.ui.dropdown .menu,
.ui.card,
.ui.cards > .card,
.ui.modal,
.ui.modal > .content,
.ui.modal > .actions,
.ui.modal > .header,
.ui.popup,
.video-card,
.video-details,
.comments-section,
.ui.comments .comment,
.ui.input input,
.ui.form textarea,
.media-page,
.watch-page,
.page-media,
.player-wrapper,
.media-info,
.video-js,
.vjs-poster {
    background-color: #000000 !important;
    background: #000000 !important;
    border-color: #1a1a1a !important; 
}

/* Preserve text readability */
.ui.menu .item, 
.ui.dropdown .menu > .item,
.ui.card .content,
.ui.modal,
.ui.input input,
.ui.form textarea,
.media-title,
.media-description {
    color: #e0e0e0 !important;
}

/* Interactive Hover States */
.ui.menu .item:hover,
.sidebar .menu-item:hover,
.page-sidebar .menu-item:hover,
.ui.dropdown .menu > .item:hover,
.ui.cards > .card:hover,
.video-card:hover {
    background-color: #1a1a1a !important;
}