/* ============================================================
   Jellyfin OLED (True Black) Theme
   ------------------------------------------------------------
   Same layout as the default Dark theme — only the backgrounds
   are pushed to pure #000000 for OLED displays.
   Accent colors, text, spacing, and layout are untouched.

   HOW TO USE:
   Dashboard > General > Custom CSS  (applies to whole server)
        or
   Settings > Display > Custom CSS   (per-user, if enabled)
   Paste this whole file in, save, and refresh.

   Tip: Use this ON TOP of the built-in "Dark" theme.
   ============================================================ */

/* ---- Core surfaces: html / body / page containers ---- */
html,
body,
.backgroundContainer,
.mainAnimatedPages,
.dashboardContainer,
.pageContainer,
.libraryPage,
.itemBackdrop,
.detailPageContent {
    background-color: #000 !important;
}

/* Kill the default dark gradient backdrop so it's flat black */
.backgroundContainer.withBackdrop,
.backgroundContainer {
    background-image: none !important;
}

/* ---- Top header / toolbar ---- */
.skinHeader,
.skinHeader-withBackground,
.skinHeader.semiTransparent {
    background: #000 !important;
    background-color: #000 !important;
}

/* Header gradient that shows on library/detail pages */
.skinHeader.headroom--not-top,
.skinHeader-blurred {
    background: #000 !important;
    backdrop-filter: none !important;
}

/* ---- Left navigation drawer ---- */
.mainDrawer,
.drawer,
.navMenuOption,
.navMenuOption-selected,
.emby-scrollbuttons {
    background-color: #000 !important;
}

/* ---- Dialogs / popups / menus ---- */
.dialog,
.formDialog,
.formDialogHeader,
.formDialogFooter,
.dialogContent,
.actionSheet,
.actionSheetContent,
.dialogBackdrop,
.menu,
.paperList,
.emby-select-withcolor,
.emby-input,
.emby-textarea {
    background-color: #000 !important;
}

/* ---- Cards ---- */
/* Keep cards visible against pure black with a whisper-thin
   elevation instead of the default gray. Set to #000 if you
   want them fully flat. */
.cardBox,
.cardBox-bottompadded,
.card:not(.card-hoverable) .cardImageContainer,
.itemsContainer .cardBox {
    background-color: #0a0a0a !important;
}

.cardBox.visualCardBox,
.cardOverlayContainer {
    background-color: transparent !important;
}

/* ---- Detail page primary/secondary panels ---- */
.detailSticky,
.detailPagePrimaryContainer,
.detailPageSecondaryContainer,
.mediaInfoStats,
.itemDetailPage {
    background-color: #000 !important;
}

/* ---- Now Playing / remote control bars ---- */
.nowPlayingBar,
.nowPlayingBarPositionContainer,
.upNextContainer {
    background-color: #000 !important;
    background: #000 !important;
}

/* ---- Login / splash / select-server screens ---- */
#loginPage,
.wizardContent,
.startupWrapper,
.serverButton {
    background-color: #000 !important;
}

/* ---- Misc elevated surfaces that default to dark gray ---- */
.emby-tab-button,
.headerTabs,
.itemsViewSettingsContainer,
.sectionTitleContainer,
.filterDialogContent,
.formDialogContent,
.listItem,
.listItemBody,
.virtualScrollItem {
    background-color: #000 !important;
}

/* Tooltip / snackbar / toast */
.mdl-tooltip,
.toast,
.toastVisible {
    background-color: #0a0a0a !important;
}

/* Progress + scrollbar troughs so they don't look gray on black */
.itemProgressBarForeground {
    /* leave accent color alone */
}
.itemProgressBar,
.mainDrawer::-webkit-scrollbar-track {
    background-color: #1a1a1a !important;
}