/**
 * darkMode.css - Dark Mode Foundation (Phase 0)
 *
 * All rules are scoped under [data-bs-theme="dark"] so they ONLY activate
 * when dark mode is enabled. Zero impact on light mode.
 *
 * Strategy:
 *   1. Bootstrap 5.3 components auto-flip via data-bs-theme="dark"
 *   2. This file handles custom app styles that Bootstrap doesn't cover
 *   3. CSS variables defined here can be used in per-page CSS as pages are converted
 *
 * Conversion approach for individual pages:
 *   Replace hardcoded colors with var(--mv-*) variables, then they auto-flip.
 */

/* ================================================================ */
/* APP COLOR VARIABLES                                               */
/* Light mode defaults in :root, dark overrides in [data-bs-theme].  */
/* Use var(--mv-*) in page CSS to get automatic dark mode support.   */
/* IMPORTANT: :root MUST come first so [data-bs-theme] wins when     */
/* both selectors have equal specificity (cascade order).            */
/* ================================================================ */
:root {
    --mv-bg-body: #ffffff;
    --mv-bg-card: #ffffff;
    --mv-bg-card-hover: #f8f9fa;
    --mv-bg-surface: #f8f9fa;
    --mv-bg-input: #ffffff;
    --mv-bg-modal: #ffffff;
    --mv-bg-dropdown: #ffffff;
    --mv-bg-hover: #e9ecef;
    --mv-bg-muted: #f8f9fa;
    --mv-bg-highlight: rgba(13, 110, 253, 0.08);

    --mv-text-primary: #212529;
    --mv-text-secondary: #495057;
    --mv-text-muted: #6c757d;
    --mv-text-link: #0d6efd;

    --mv-border-color: #dee2e6;
    --mv-border-light: #e9ecef;
    --mv-border-input: #ced4da;

    --mv-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    --mv-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
}

[data-bs-theme="dark"] {
    /* Backgrounds */
    --mv-bg-body: #1a1d21;
    --mv-bg-card: #212529;
    --mv-bg-card-hover: #2b3035;
    --mv-bg-surface: #2b3035;
    --mv-bg-input: #2b3035;
    --mv-bg-modal: #212529;
    --mv-bg-dropdown: #2b3035;
    --mv-bg-hover: #343a40;
    --mv-bg-muted: #343a40;
    --mv-bg-highlight: rgba(13, 110, 253, 0.15);

    /* Text */
    --mv-text-primary: #e9ecef;
    --mv-text-secondary: #ced4da;
    --mv-text-muted: #8a939c;
    --mv-text-link: #6ea8fe;

    /* Borders */
    --mv-border-color: #495057;
    --mv-border-light: #343a40;
    --mv-border-input: #495057;

    /* Shadows */
    --mv-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    --mv-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* ================================================================ */
/* GLOBAL OVERRIDES - Fix common elements that Bootstrap doesn't     */
/* handle automatically                                              */
/* ================================================================ */

/* Body background */
[data-bs-theme="dark"] body {
    background-color: var(--mv-bg-body);
}

/* Generic white backgrounds that appear everywhere */
[data-bs-theme="dark"] .bg-white {
    background-color: var(--mv-bg-card) !important;
}

[data-bs-theme="dark"] .bg-light {
    background-color: var(--mv-bg-surface) !important;
}

/* Text color overrides for hardcoded dark text */
[data-bs-theme="dark"] .text-dark {
    color: var(--mv-text-primary) !important;
}

/* Borders */
[data-bs-theme="dark"] .border {
    border-color: var(--mv-border-color) !important;
}

[data-bs-theme="dark"] .border-bottom {
    border-bottom-color: var(--mv-border-color) !important;
}

[data-bs-theme="dark"] .border-top {
    border-top-color: var(--mv-border-color) !important;
}

/* ================================================================ */
/* CHOICES.JS - Searchable select dropdowns                          */
/* ================================================================ */
[data-bs-theme="dark"] .choices__inner {
    background-color: var(--mv-bg-input) !important;
    border-color: var(--mv-border-input) !important;
    color: var(--mv-text-primary);
}

[data-bs-theme="dark"] .choices__input {
    background-color: var(--mv-bg-input) !important;
    color: var(--mv-text-primary) !important;
}

[data-bs-theme="dark"] .choices__list--dropdown {
    background-color: var(--mv-bg-dropdown) !important;
    border-color: var(--mv-border-input) !important;
}

[data-bs-theme="dark"] .choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: var(--mv-bg-hover) !important;
}

[data-bs-theme="dark"] .choices__list--dropdown .choices__item {
    color: var(--mv-text-primary);
}

/* ================================================================ */
/* NAVBAR - DARK MODE VARIANT                                        */
/* Switch from blue bg-primary to dark surface that matches the body. */
/* ================================================================ */
[data-bs-theme="dark"] .navbar.bg-primary {
    background-color: #212529 !important;
    border-bottom: 1px solid var(--mv-border-color);
}

[data-bs-theme="dark"] .navbar .dropdown-menu {
    background-color: var(--mv-bg-dropdown) !important;
    background: var(--mv-bg-dropdown) !important;
    border-color: var(--mv-border-color) !important;
}

[data-bs-theme="dark"] .navbar .dropdown-menu .dropdown-item {
    color: var(--mv-text-primary) !important;
    background-color: transparent !important;
}

[data-bs-theme="dark"] .navbar .dropdown-menu .dropdown-item:hover,
[data-bs-theme="dark"] .navbar .dropdown-menu .dropdown-item:focus {
    background-color: var(--mv-bg-hover) !important;
    color: var(--mv-text-primary) !important;
}

[data-bs-theme="dark"] .navbar .dropdown-menu .dropdown-header {
    color: var(--mv-text-muted) !important;
}

[data-bs-theme="dark"] .navbar .dropdown-menu .dropdown-divider {
    border-color: var(--mv-border-color) !important;
}

[data-bs-theme="dark"] .navbar .navbar-nav .nav-link {
    color: rgba(255,255,255,0.75) !important;
}

[data-bs-theme="dark"] .navbar .navbar-nav .nav-link:hover,
[data-bs-theme="dark"] .navbar .navbar-nav .nav-link.active {
    color: white !important;
}

[data-bs-theme="dark"] .navbar .navbar-brand {
    color: white !important;
}

/* Help dropdown trigger in navbar */
[data-bs-theme="dark"] .help-dropdown-trigger {
    color: rgba(255,255,255,0.75) !important;
}

[data-bs-theme="dark"] .help-dropdown-trigger:hover {
    color: white !important;
}

/* Navbar collapse background */
[data-bs-theme="dark"] .navbar-collapse {
    background-color: #212529 !important;
}

/* Navbar user elements (getNavbarUserHTML) */
[data-bs-theme="dark"] .navbar a,
[data-bs-theme="dark"] .navbar .nav-link {
    color: rgba(255,255,255,0.75) !important;
}

[data-bs-theme="dark"] .navbar a:hover {
    color: white !important;
}

/* ================================================================ */
/* MOBILE HEADER & NAV - DARK MODE VARIANT                           */
/* Match the desktop navbar dark treatment.                           */
/* ================================================================ */
[data-bs-theme="dark"] .mobile-top-header {
    background-color: #212529 !important;
    border-bottom: 1px solid var(--mv-border-color);
}

/* Protect all mobile header buttons/links from generic color overrides */
[data-bs-theme="dark"] .mobile-top-header a,
[data-bs-theme="dark"] .mobile-top-header button,
[data-bs-theme="dark"] .mobile-help-btn,
[data-bs-theme="dark"] .mobile-search-btn,
[data-bs-theme="dark"] .mobile-user-btn {
    color: rgba(255,255,255,0.85) !important;
}

[data-bs-theme="dark"] .mobile-top-header a:hover,
[data-bs-theme="dark"] .mobile-help-btn:hover,
[data-bs-theme="dark"] .mobile-search-btn:hover {
    color: white !important;
}

[data-bs-theme="dark"] .mobile-bottom-nav {
    background-color: #212529 !important;
}

[data-bs-theme="dark"] .mobile-more-menu {
    background-color: #212529 !important;
}

[data-bs-theme="dark"] .mobile-more-menu .menu-item {
    color: #adb5bd !important;
}

[data-bs-theme="dark"] .mobile-more-menu .menu-item:hover {
    background-color: #343a40 !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .mobile-bottom-nav .nav-link {
    color: #adb5bd !important;
}

[data-bs-theme="dark"] .mobile-bottom-nav .nav-link.active {
    color: #0d6efd !important;
}

/* ================================================================ */
/* HEADER / NAVBAR - Search & typeahead tweaks                       */
/* ================================================================ */

/* Mobile search overlay */
[data-bs-theme="dark"] .mobile-search-overlay {
    background: var(--mv-bg-body);
}

[data-bs-theme="dark"] .mobile-search-close {
    color: var(--mv-text-secondary);
}

[data-bs-theme="dark"] .mobile-search-close:hover {
    color: var(--mv-text-primary);
}

[data-bs-theme="dark"] .mobile-search-header {
    border-bottom-color: var(--mv-border-color);
}

[data-bs-theme="dark"] .search-type-option {
    background: var(--mv-bg-card);
    border-color: var(--mv-border-color);
    color: var(--mv-text-secondary);
}

[data-bs-theme="dark"] .search-type-option:hover {
    border-color: #0d6efd;
    background: var(--mv-bg-surface);
}

[data-bs-theme="dark"] .search-type-option.active {
    border-color: #0d6efd;
    background: rgba(13, 110, 253, 0.15);
}

[data-bs-theme="dark"] .search-type-name {
    color: var(--mv-text-primary);
}

[data-bs-theme="dark"] .search-type-desc {
    color: var(--mv-text-muted);
}

[data-bs-theme="dark"] .mobile-search-back {
    background: var(--mv-bg-card);
    border-color: var(--mv-border-color);
    color: var(--mv-text-secondary);
}

/* Desktop search typeahead */
[data-bs-theme="dark"] .header-search-typeahead {
    background: var(--mv-bg-dropdown);
    border-color: var(--mv-border-input);
}

[data-bs-theme="dark"] .typeahead-item {
    color: var(--mv-text-primary);
    border-bottom-color: var(--mv-border-light);
}

[data-bs-theme="dark"] .typeahead-item:hover {
    background-color: var(--mv-bg-hover);
}

[data-bs-theme="dark"] .typeahead-all-results {
    background: var(--mv-bg-surface);
    border-bottom-color: var(--mv-border-color);
}

[data-bs-theme="dark"] .typeahead-all-results .typeahead-item-image {
    background: #0d6efd;
}

/* Desktop header search input */
[data-bs-theme="dark"] .header-search-type-btn {
    background-color: var(--mv-bg-input);
    border-color: var(--mv-border-input);
    color: var(--mv-text-primary);
}

[data-bs-theme="dark"] .header-search-type-btn:hover,
[data-bs-theme="dark"] .header-search-type-btn:focus {
    background-color: var(--mv-bg-hover);
}

/* Search dropdown - override the forced white */
[data-bs-theme="dark"] .header-search-dropdown,
[data-bs-theme="dark"] .header-search-dropdown.dropdown-menu,
[data-bs-theme="dark"] ul.header-search-dropdown,
[data-bs-theme="dark"] .navbar .header-search-dropdown,
[data-bs-theme="dark"] .navbar-dark .header-search-dropdown {
    background-color: var(--mv-bg-dropdown) !important;
    background: var(--mv-bg-dropdown) !important;
    border-color: var(--mv-border-color) !important;
}

[data-bs-theme="dark"] .header-search-dropdown .dropdown-item,
[data-bs-theme="dark"] .header-search-dropdown a.dropdown-item,
[data-bs-theme="dark"] .header-search-dropdown li a {
    color: var(--mv-text-primary) !important;
    background-color: var(--mv-bg-dropdown) !important;
    background: var(--mv-bg-dropdown) !important;
}

[data-bs-theme="dark"] .header-search-dropdown .dropdown-item:hover,
[data-bs-theme="dark"] .header-search-dropdown .dropdown-item:focus,
[data-bs-theme="dark"] .header-search-dropdown .dropdown-item.active,
[data-bs-theme="dark"] .header-search-dropdown .dropdown-item:active {
    background-color: var(--mv-bg-hover) !important;
    background: var(--mv-bg-hover) !important;
    color: var(--mv-text-primary) !important;
}

[data-bs-theme="dark"] .header-search-dropdown .dropdown-item i,
[data-bs-theme="dark"] .header-search-dropdown a i {
    color: var(--mv-text-secondary) !important;
}

[data-bs-theme="dark"] .header-search-dropdown .dropdown-item small,
[data-bs-theme="dark"] .header-search-dropdown a small {
    color: var(--mv-text-muted) !important;
}

[data-bs-theme="dark"] .header-search-dropdown .dropdown-divider,
[data-bs-theme="dark"] .header-search-dropdown hr {
    border-color: var(--mv-border-color) !important;
}

/* ================================================================ */
/* PAGE HEADER                                                       */
/* ================================================================ */
[data-bs-theme="dark"] .page-header {
    color: var(--mv-text-primary);
}

/* ================================================================ */
/* CARDS - Generic card overrides                                    */
/* ================================================================ */
[data-bs-theme="dark"] .card {
    background-color: var(--mv-bg-card) !important;
    border-color: var(--mv-border-color) !important;
    color: var(--mv-text-primary);
}

[data-bs-theme="dark"] .card-body {
    background-color: transparent !important;
}

[data-bs-theme="dark"] .card-header {
    background-color: var(--mv-bg-surface) !important;
    border-bottom-color: var(--mv-border-color) !important;
    color: var(--mv-text-primary);
}

[data-bs-theme="dark"] .card-footer {
    background-color: var(--mv-bg-surface) !important;
    border-top-color: var(--mv-border-color) !important;
}

/* ================================================================ */
/* TABLES                                                            */
/* ================================================================ */
[data-bs-theme="dark"] .table {
    --bs-table-bg: transparent !important;
    --bs-table-color: var(--mv-text-primary);
    color: var(--mv-text-primary) !important;
    border-color: var(--mv-border-color) !important;
}

[data-bs-theme="dark"] .table > :not(caption) > * > * {
    background-color: transparent;
    border-bottom-color: var(--mv-border-color);
    color: var(--mv-text-primary);
}

[data-bs-theme="dark"] .table-hover > tbody > tr:hover > * {
    background-color: var(--mv-bg-hover) !important;
    color: var(--mv-text-primary) !important;
}

/* table-light header — force dark in dark mode */
[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table-light > th,
[data-bs-theme="dark"] thead.table-light th {
    --bs-table-bg: var(--mv-bg-surface) !important;
    background-color: var(--mv-bg-surface) !important;
    color: var(--mv-text-primary) !important;
    border-color: var(--mv-border-color) !important;
}

/* table-striped */
[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255, 255, 255, 0.02);
    color: var(--mv-text-primary);
}

/* ================================================================ */
/* MODALS                                                            */
/* ================================================================ */
[data-bs-theme="dark"] .modal-content {
    background-color: var(--mv-bg-modal) !important;
    border-color: var(--mv-border-color) !important;
    color: var(--mv-text-primary);
}

[data-bs-theme="dark"] .modal-header {
    border-bottom-color: var(--mv-border-color) !important;
    color: var(--mv-text-primary);
}

[data-bs-theme="dark"] .modal-footer {
    border-top-color: var(--mv-border-color) !important;
}

[data-bs-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* ================================================================ */
/* FORM CONTROLS                                                     */
/* ================================================================ */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: var(--mv-bg-input) !important;
    border-color: var(--mv-border-input) !important;
    color: var(--mv-text-primary) !important;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: var(--mv-bg-input) !important;
    border-color: #0d6efd !important;
    color: var(--mv-text-primary) !important;
}

[data-bs-theme="dark"] .form-control::placeholder {
    color: var(--mv-text-muted) !important;
}

[data-bs-theme="dark"] .form-label {
    color: var(--mv-text-primary);
}

[data-bs-theme="dark"] .form-text {
    color: var(--mv-text-muted) !important;
}

[data-bs-theme="dark"] .input-group-text {
    background-color: var(--mv-bg-surface) !important;
    border-color: var(--mv-border-input) !important;
    color: var(--mv-text-secondary) !important;
}

/* Outline buttons — keep readable in dark mode */
[data-bs-theme="dark"] .btn-outline-secondary {
    color: var(--mv-text-secondary) !important;
    border-color: var(--mv-border-input) !important;
}

[data-bs-theme="dark"] .btn-outline-secondary:hover {
    background-color: var(--mv-bg-hover) !important;
    color: var(--mv-text-primary) !important;
}

/* ================================================================ */
/* LIST GROUPS                                                       */
/* ================================================================ */
[data-bs-theme="dark"] .list-group-item {
    background-color: var(--mv-bg-card) !important;
    border-color: var(--mv-border-color) !important;
    color: var(--mv-text-primary);
}

[data-bs-theme="dark"] .list-group-item:hover {
    background-color: var(--mv-bg-card-hover) !important;
}

/* ================================================================ */
/* BADGES & PILLS                                                    */
/* ================================================================ */
[data-bs-theme="dark"] .badge.bg-light {
    background-color: var(--mv-bg-surface) !important;
    color: var(--mv-text-primary) !important;
}

/* ================================================================ */
/* SCORE BADGES - Keep their brand colors                            */
/* ================================================================ */
/* RT, IMDB score badges retain their colors in dark mode - no changes needed */

/* ================================================================ */
/* TOAST NOTIFICATIONS                                               */
/* ================================================================ */
[data-bs-theme="dark"] .toast {
    background-color: var(--mv-bg-card);
    border-color: var(--mv-border-color);
    color: var(--mv-text-primary);
}

/* ================================================================ */
/* DARK MODE TOGGLE BUTTON STYLES                                    */
/* ================================================================ */
.dark-mode-toggle-label {
    display: inline;
}

/* Search pill style (legacy) */
[data-bs-theme="dark"] .search-type-pill {
    background: var(--mv-bg-card);
    border-color: var(--mv-border-color);
    color: var(--mv-text-secondary);
}

[data-bs-theme="dark"] .search-type-pill:hover {
    border-color: #0d6efd;
    color: #6ea8fe;
}

[data-bs-theme="dark"] .search-type-pill.active {
    background: #0d6efd;
    border-color: #0d6efd;
    color: #fff;
}

/* ================================================================ */
/* EMPTY STATES                                                      */
/* ================================================================ */
[data-bs-theme="dark"] .text-muted {
    color: var(--mv-text-muted) !important;
}

/* ================================================================ */
/* DROPDOWNS (generic, non-navbar)                                   */
/* Exclude .navbar dropdowns — those are protected above.            */
/* ================================================================ */
[data-bs-theme="dark"] :not(.navbar) > .dropdown-menu {
    background-color: var(--mv-bg-dropdown);
    border-color: var(--mv-border-color);
}

[data-bs-theme="dark"] :not(.navbar) > .dropdown-menu > .dropdown-item,
[data-bs-theme="dark"] :not(.navbar) > .dropdown-menu > li > .dropdown-item {
    color: var(--mv-text-primary);
}

[data-bs-theme="dark"] :not(.navbar) > .dropdown-menu > .dropdown-item:hover,
[data-bs-theme="dark"] :not(.navbar) > .dropdown-menu > .dropdown-item:focus,
[data-bs-theme="dark"] :not(.navbar) > .dropdown-menu > li > .dropdown-item:hover,
[data-bs-theme="dark"] :not(.navbar) > .dropdown-menu > li > .dropdown-item:focus {
    background-color: var(--mv-bg-hover);
    color: var(--mv-text-primary);
}

[data-bs-theme="dark"] :not(.navbar) > .dropdown-menu > .dropdown-divider {
    border-color: var(--mv-border-color);
}

/* ================================================================ */
/* NAV TABS & PILLS                                                  */
/* ================================================================ */
[data-bs-theme="dark"] .nav-tabs {
    border-bottom-color: var(--mv-border-color);
}

[data-bs-theme="dark"] .nav-tabs .nav-link {
    color: var(--mv-text-secondary);
}

[data-bs-theme="dark"] .nav-tabs .nav-link:hover {
    border-color: var(--mv-border-color);
    color: var(--mv-text-primary);
}

[data-bs-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--mv-bg-card);
    border-color: var(--mv-border-color);
    border-bottom-color: var(--mv-bg-card);
    color: var(--mv-text-primary);
}

/* .em-tabs (reusable underline tabs) */
[data-bs-theme="dark"] .em-tabs .nav-link {
    color: var(--mv-text-secondary);
}

[data-bs-theme="dark"] .em-tabs .nav-link.active {
    color: #6ea8fe;
    border-bottom-color: #6ea8fe;
}

/* ================================================================ */
/* ACCORDION                                                         */
/* ================================================================ */
[data-bs-theme="dark"] .accordion-item {
    background-color: var(--mv-bg-card);
    border-color: var(--mv-border-color);
}

[data-bs-theme="dark"] .accordion-button {
    background-color: var(--mv-bg-card);
    color: var(--mv-text-primary);
}

[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: var(--mv-bg-surface);
    color: var(--mv-text-primary);
}

/* ================================================================ */
/* SCROLLBAR (Webkit browsers)                                       */
/* ================================================================ */
[data-bs-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--mv-bg-body);
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #495057;
    border-radius: 4px;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #6c757d;
}

/* ================================================================ */
/* LINKS                                                             */
/* Exclude navbar, mobile header, and mobile nav elements.           */
/* ================================================================ */
[data-bs-theme="dark"] .page-content-wrapper a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item),
[data-bs-theme="dark"] .modal a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item),
[data-bs-theme="dark"] footer a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item) {
    color: var(--mv-text-link);
}

[data-bs-theme="dark"] .page-content-wrapper a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item):hover,
[data-bs-theme="dark"] .modal a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item):hover,
[data-bs-theme="dark"] footer a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item):hover {
    color: #8bb9fe;
}

/* ================================================================ */
/* HORIZONTAL RULES                                                  */
/* ================================================================ */
[data-bs-theme="dark"] hr {
    border-color: var(--mv-border-color);
    opacity: 0.5;
}

/* ================================================================ */
/* CONFIRM MODAL (showConfirm in common.js)                          */
/* ================================================================ */
.confirm-modal-content {
    border: 1px solid #0d6efd;
}
.confirm-modal-header {
    background-color: #fffdf5;
}
.confirm-modal-footer {
    background-color: #fffdf5;
}
[data-bs-theme="dark"] .confirm-modal-content {
    border-color: #0d6efd;
}
[data-bs-theme="dark"] .confirm-modal-header {
    background-color: var(--mv-bg-surface);
}
[data-bs-theme="dark"] .confirm-modal-footer {
    background-color: var(--mv-bg-surface);
}