/**
 * header.css - Global Header Styles
 *
 * Extracted from header.php for maintainability
 * Includes: navbar, mobile nav, floating AI button, page header standards
 */

body {
    padding-top: 56px; /* Height of navbar */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Page content spacing below navbar - CHANGE THIS TO ADJUST ALL PAGES */
.page-content-wrapper {
    padding-top: 0.5rem;  /* Adjust this value (0 = none, 0.5rem = small, 1rem = medium) */
    flex: 1;
}

.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1030;
    padding-top: 5px;
    padding-bottom: 5px;
    height: 55px;
    background-color: #0a1f3d !important; /* Match email header navy */
}

.navbar-brand,
.navbar-nav .nav-link {
    line-height: 38px;
}

/* UIAdmin CSS Pattern - Hidden by default, shown via JavaScript for admins */
.UIAdmin {
    display: none !important;
}
.UIAdmin.admin-visible {
    display: block !important;
}
.UIAdmin.admin-visible.d-flex {
    display: flex !important;
}
li.UIAdmin.admin-visible {
    display: list-item !important;
}
th.UIAdmin.admin-visible,
td.UIAdmin.admin-visible {
    display: table-cell !important;
}
button.UIAdmin.admin-visible,
a.UIAdmin.admin-visible.btn {
    display: inline-block !important;
}
tr.UIAdmin.admin-visible {
    display: table-row !important;
}

/* UIAdvanced CSS Pattern - Hidden by default, shown for advanced users */
.UIAdvanced {
    display: none !important;
}
.UIAdvanced.advanced-visible {
    display: block !important;
}
.UIAdvanced.advanced-visible.d-flex {
    display: flex !important;
}
li.UIAdvanced.advanced-visible {
    display: list-item !important;
}
th.UIAdvanced.advanced-visible,
td.UIAdvanced.advanced-visible {
    display: table-cell !important;
}
button.UIAdvanced.advanced-visible,
a.UIAdvanced.advanced-visible.btn {
    display: inline-block !important;
}
tr.UIAdvanced.advanced-visible {
    display: table-row !important;
}

/* ================================================================ */
/* UI COMPLEXITY - Controls visibility of simple/standard/advanced UI elements */
/* Elements without a tag show in all modes (base UI) */
/* .ui-simple = only shows in Simple mode */
/* .ui-standard = shows in Standard and Advanced modes */
/* .ui-advanced = only shows in Advanced mode */
/* ================================================================ */
.ui-simple { display: none !important; }
.ui-standard { display: none !important; }
.ui-advanced { display: none !important; }

/* Simple mode: show base + ui-simple */
body.ui-mode-simple .ui-simple { display: block !important; }
body.ui-mode-simple li.ui-simple { display: list-item !important; }
body.ui-mode-simple span.ui-simple { display: inline !important; }
body.ui-mode-simple div.ui-simple { display: block !important; }

/* Standard mode: show base + ui-standard */
body.ui-mode-standard .ui-standard { display: block !important; }
body.ui-mode-standard li.ui-standard { display: list-item !important; }
body.ui-mode-standard span.ui-standard { display: inline !important; }
body.ui-mode-standard div.ui-standard { display: block !important; }

/* Advanced mode: show base + ui-standard + ui-advanced */
body.ui-mode-advanced .ui-standard { display: block !important; }
body.ui-mode-advanced li.ui-standard { display: list-item !important; }
body.ui-mode-advanced span.ui-standard { display: inline !important; }
body.ui-mode-advanced div.ui-standard { display: block !important; }
body.ui-mode-advanced .ui-advanced { display: block !important; }
body.ui-mode-advanced li.ui-advanced { display: list-item !important; }
body.ui-mode-advanced span.ui-advanced { display: inline !important; }
body.ui-mode-advanced div.ui-advanced { display: block !important; }
/* END UI COMPLEXITY */
/* ================================================================ */

/* Hide simple containers when admin view is active (sibling selector) */
.UIAdmin.admin-visible + .genres-simple-container,
.UIAdmin.admin-visible + .keywords-simple-container,
.UIAdmin.admin-visible + .details-simple-container {
    display: none !important;
}

.navbar .dropdown-menu {
    background-color: #0a1f3d !important;
}

.navbar .dropdown-menu .dropdown-item {
    color: white !important;
}

.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus,
.navbar .dropdown-menu .dropdown-item:hover .dark-mode-toggle-label,
.navbar .dropdown-menu .dropdown-item:focus .dark-mode-toggle-label {
    background-color: #152d52 !important;
    color: #ffffff !important;
}

.navbar .dropdown-menu .dropdown-header {
    color: rgba(255,255,255,0.7) !important;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.navbar .dropdown-menu .dropdown-divider {
    border-color: rgba(255,255,255,0.2) !important;
}

.navbar-collapse,
.navbar .dropdown-menu {
    background-color: #0a1f3d !important;
}

/* ================================================================ */
/* MOBILE TOP HEADER                                                */
/* Compact header for mobile with logo, vibe, search, user          */
/* ================================================================ */
.mobile-top-header {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 44px;
    background-color: #0a1f3d;
    z-index: 1030;
    padding: 0 10px;
    padding-top: env(safe-area-inset-top);
}

.mobile-top-header .header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

/* Left side: Logo */
.mobile-top-header .header-logo {
    height: 32px;
    width: auto;
}

/* Right side: Action buttons */
.mobile-top-header .header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Vibe toggle button - state-based styling */
.mobile-top-header .mobile-vibe-btn {
    background: transparent;
    border: 2px solid transparent;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mobile-top-header .mobile-vibe-btn:hover {
    transform: scale(1.1);
}

.mobile-top-header .mobile-vibe-btn .vibe-icon {
    font-size: 20px;
}

/* Scene ON = yellow border ring */
.mobile-top-header .mobile-vibe-btn.scene-active {
    border-color: #ffc107;
}

/* Vibe ON = white filled background */
.mobile-top-header .mobile-vibe-btn.vibe-active {
    background: rgba(255, 255, 255, 0.9);
}

/* Both ON = yellow border + white fill (clearly distinguishable) */

/* Search button (used in mobile top header AND in desktop navbar at tablet widths) */
.mobile-search-btn {
    background: transparent;
    border: none;
    color: white;
    font-size: 20px;
    padding: 6px;
    cursor: pointer;
    opacity: 0.9;
    transition: opacity 0.2s;
}

.mobile-search-btn:hover {
    opacity: 1;
}

/* Help button */
.mobile-top-header .mobile-help-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.85);
    font-size: 20px;
    padding: 6px;
    cursor: pointer;
    transition: color 0.2s;
}

.mobile-top-header .mobile-help-btn:hover {
    color: white;
}

/* User button with initials */
.mobile-top-header .mobile-user-btn {
    background: #495057;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.mobile-top-header .mobile-user-btn:hover {
    background: #5a6268;
    border-color: rgba(255,255,255,0.5);
}

.mobile-top-header a.mobile-user-btn,
.mobile-top-header a.mobile-help-btn {
    text-decoration: none;
}

.mobile-top-header .mobile-user-btn .mobile-user-initials {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.mobile-top-header .mobile-user-btn img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* ================================================================ */
/* MOBILE BOTTOM NAVIGATION                                         */
/* ================================================================ */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background-color: #212529;
    border-top: 1px solid #495057;
    z-index: 1030;
    padding-bottom: env(safe-area-inset-bottom);
}

.mobile-bottom-nav .nav-items {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mobile-bottom-nav .nav-item {
    flex: 1;
    text-align: center;
}

.mobile-bottom-nav .nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #adb5bd;
    text-decoration: none;
    padding: 8px 4px;
    font-size: 10px;
    transition: color 0.2s;
}

.mobile-bottom-nav .nav-link:hover,
.mobile-bottom-nav .nav-link:focus {
    color: #ffffff;
}

.mobile-bottom-nav .nav-link.active {
    color: #0d6efd;
}

.mobile-bottom-nav .nav-link i {
    font-size: 24px;
    margin-bottom: 2px;
}

.mobile-nav-badge {
    position: absolute;
    top: 2px;
    right: calc(50% - 18px);
    min-width: 16px;
    height: 16px;
    background-color: #dc3545;
    color: #fff;
    border-radius: 50%;
    font-size: 9px;
    line-height: 16px;
    text-align: center;
    padding: 0 3px;
}

/* More menu popup */
.mobile-more-menu {
    display: none;
    position: fixed;
    bottom: 60px;
    left: 0;
    right: 0;
    background-color: #212529;
    border-top: 1px solid #495057;
    z-index: 1029;
    max-height: 70vh;
    overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom);
}

.mobile-more-menu.show {
    display: block;
}

/* Top header flyout menus (drop down from top instead of up from bottom) */
.mobile-more-menu.mobile-top-menu {
    bottom: auto;
    top: 44px;
    max-height: 50vh;
    border-top: none;
    border-bottom: 1px solid #495057;
}

.mobile-more-menu .menu-section {
    padding: 8px 0;
    border-bottom: 1px solid #495057;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.mobile-more-menu .menu-section:last-child {
    border-bottom: none;
}

.mobile-more-menu .section-title {
    grid-column: 1 / -1;
    color: #6c757d;
    font-size: 11px;
    text-transform: uppercase;
    padding: 5px 15px;
    margin: 0;
}

.mobile-more-menu .menu-item {
    display: block;
    color: #adb5bd;
    text-decoration: none;
    padding: 10px 15px;
    font-size: 13px;
}

.mobile-more-menu .menu-item:hover,
.mobile-more-menu .menu-item:focus {
    background-color: #343a40;
    color: #ffffff;
}

.mobile-more-menu .menu-item i {
    width: 24px;
    margin-right: 10px;
}

/* Overlay for closing more menu */
.mobile-menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 60px;
    background: rgba(0,0,0,0.5);
    z-index: 1028;
}

.mobile-menu-overlay.show {
    display: block;
}

/* Show mobile navigation on mobile */
@media (max-width: 991.98px) {
    .mobile-top-header {
        display: block;
    }

    .mobile-bottom-nav {
        display: block;
    }

    /* Hide desktop navbar on mobile */
    .navbar.navbar-expand-lg {
        display: none !important;
    }

    /* Add padding for mobile top header (44px) and bottom nav (70px) */
    body {
        padding-top: 44px;
        padding-bottom: 70px;
    }

    /* Reduce padding on mobile for more content space */
    .container-fluid.page-content-wrapper {
        padding-top: 4px !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    /* Adjust overlay to account for top header */
    .mobile-menu-overlay {
        top: 44px;
    }
}

/* Extra small screens - minimal padding */
@media (max-width: 575.98px) {
    .container-fluid.page-content-wrapper {
        padding-top: 2px !important;
        padding-left: 2px !important;
        padding-right: 2px !important;
    }
}

/* ================================================================ */
/* AWARD SEASON OSCAR BUTTON                                        */
/* ================================================================ */
.oscar-season-btn {
    display: inline-flex;
    align-items: center;
    align-self: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.oscar-season-btn:hover {
    transform: scale(1.15);
    filter: brightness(1.2);
}

.oscar-season-btn .oscar-icon {
    fill: #FFD700;
    filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.5));
    display: block;
}

/* Desktop: in the navbar area */
.navbar .oscar-season-btn {
    width: 32px;
    height: 32px;
    padding: 2px;
    box-sizing: border-box;
}

.navbar .oscar-season-btn .oscar-icon {
    width: 100%;
    height: 100%;
}

/* Mobile: Oscar icon in header actions */
.mobile-top-header .oscar-season-btn {
    background: transparent;
    border: none;
    padding: 0;
    margin-top: 4px;
}

.mobile-top-header .oscar-season-btn .oscar-icon {
    width: 28px;
    height: 24px;
}

/* Subtle gold glow pulse — default state */
.oscar-season-btn .oscar-icon {
    animation: oscar-glow 3s ease-in-out infinite;
}

@keyframes oscar-glow {
    0%, 100% { filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.4)); }
    50% { filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8)); }
}

/* Urgent state — red with gentle pulse */
.oscar-season-btn.oscar-urgent .oscar-icon {
    fill: #dc3545;
    animation: oscar-urgent-pulse 2.5s ease-in-out infinite;
}

@keyframes oscar-urgent-pulse {
    0%, 100% { filter: drop-shadow(0 0 3px rgba(220, 53, 69, 0.4)); opacity: 1; }
    50% { filter: drop-shadow(0 0 8px rgba(220, 53, 69, 0.7)); opacity: 0.75; }
}

/* ================================================================ */
/* QUICK RECORD (MICROPHONE) BUTTON                                 */
/* ================================================================ */
.quick-record-btn {
    display: inline-flex;
    align-items: center;
    align-self: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.quick-record-btn:hover {
    transform: scale(1.15);
    filter: brightness(1.2);
}

.quick-record-btn .quick-record-icon {
    stroke: #fff;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.4));
    display: block;
}

/* Desktop: in the navbar area */
.navbar .quick-record-btn {
    width: 28px;
    height: 28px;
    padding: 2px;
    box-sizing: border-box;
}

.navbar .quick-record-btn .quick-record-icon {
    width: 100%;
    height: 100%;
}

/* Mobile: in header actions */
.mobile-top-header .quick-record-btn {
    background: transparent;
    border: none;
    padding: 0;
}

.mobile-top-header .quick-record-btn .quick-record-icon {
    width: 22px;
    height: 22px;
}

/* Subtle purple glow pulse */
.quick-record-btn .quick-record-icon {
    animation: quick-record-glow 3s ease-in-out infinite;
}

@keyframes quick-record-glow {
    0%, 100% { filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.3)); }
    50% { filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.6)); }
}

/* ================================================================ */
/* FLOATING AI BUTTON                                               */
/* ================================================================ */
.floating-ai-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #0d6efd;
    border: none;
    box-shadow: 0 4px 15px rgba(13, 110, 253, 0.4);
    cursor: pointer;
    z-index: 1020;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    text-decoration: none;
    overflow: hidden;
}

.floating-ai-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(13, 110, 253, 0.5);
}

.floating-ai-btn i {
    font-size: 24px;
    color: white;
}

.floating-ai-btn-label {
    display: none;
    color: white;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.feature-beta-badge {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.12rem 0.4rem;
    border: 1px solid rgba(255, 193, 7, 0.45);
    border-radius: 999px;
    background: rgba(255, 173, 0, 0.85);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

[data-bs-theme="dark"] .feature-beta-badge {
    border-color: rgba(255, 193, 7, 0.35);
    background: rgba(255, 193, 7, 0.22);
    color: #ffd166;
}

/* Subtle pulse animation */
.floating-ai-btn::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: inherit;
    opacity: 0;
    animation: ai-pulse 3s ease-in-out infinite;
}

@keyframes ai-pulse {
    0%, 100% { transform: scale(1); opacity: 0; }
    50% { transform: scale(1.15); opacity: 0.3; }
}

.floating-ai-btn[data-mode="onboarding_desktop"].floating-ai-btn-onboarding {
    width: auto;
    min-width: 132px;
    border-radius: 999px;
    padding: 0 18px 0 16px;
    gap: 10px;
}

.floating-ai-btn[data-mode="onboarding_desktop"].floating-ai-btn-onboarding .floating-ai-btn-label {
    display: inline-block;
}

.floating-ai-btn[data-mode="onboarding_desktop"].floating-ai-btn-onboarding:hover {
    transform: translateY(-1px) scale(1.03);
}

@media (min-width: 992px) {
    .floating-ai-btn[data-mode="onboarding_desktop"].floating-ai-btn-onboarding {
        width: auto;
        min-width: 132px;
    }
}

/* Mobile positioning - above bottom nav */
@media (max-width: 991.98px) {
    .floating-ai-btn {
        bottom: 75px; /* Above 60px bottom nav + some padding */
        right: 12px;
        width: 44px;
        height: 44px;
    }

    .floating-ai-btn i {
        font-size: 20px;
    }

    .floating-ai-btn[data-mode="onboarding_desktop"].floating-ai-btn-onboarding {
        width: auto;
        min-width: 112px;
        height: 44px;
        padding: 0 14px 0 14px;
        gap: 8px;
    }

    .floating-ai-btn[data-mode="onboarding_desktop"].floating-ai-btn-onboarding .floating-ai-btn-label {
        font-size: 0.9rem;
    }
}

/* END MOBILE BOTTOM NAVIGATION */
/* ================================================================ */

/* ================================================================ */
/* PAGE HEADER STANDARDS                                             */
/* Use these classes for consistent page headers across the app      */
/* ================================================================ */

/* Container for page header row */
.page-header {
    padding-top: 10px;
    padding-bottom: 8px;
}

/* Page title (h4) styling */
.page-header-title {
    font-size: 1.35rem;
    font-weight: 600;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.page-header-title i {
    font-size: 1.2rem;
}

/* Count badge in page header */
.page-header-badge {
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.25em 0.6em;
    vertical-align: middle;
}

/* Add button in page header */
.page-header-btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

/* ================================================================ */
/* END PAGE HEADER STANDARDS                                         */
/* ================================================================ */

/* ================================================================ */
/* HEADER SEARCH - Desktop                                           */
/* ================================================================ */
.header-search-container {
    position: relative;
}

.header-search-container .input-group {
    width: 280px;
}

.header-search-type-btn {
    background-color: #fff;
    border-color: #ced4da;
    border-right: none;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

.header-search-type-btn:hover,
.header-search-type-btn:focus {
    background-color: #f8f9fa;
}

.header-search-type-btn::after {
    margin-left: 0.25rem;
    vertical-align: middle;
}

.header-search-input {
    border-left: none;
    font-size: 0.875rem;
}

.header-search-input:focus {
    border-color: #ced4da;
    box-shadow: none;
}

.header-search-container .btn:last-child {
    border-left: none;
}

/* Search Type Dropdown - Force light theme, NO BLUE */
.header-search-dropdown,
.header-search-dropdown.dropdown-menu,
ul.header-search-dropdown,
.navbar .header-search-dropdown,
.navbar-dark .header-search-dropdown,
.navbar-dark .dropdown-menu.header-search-dropdown {
    min-width: 220px;
    padding: 0.5rem 0;
    background-color: #fff !important;
    background: #fff !important;
    border: 1px solid #ccc !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.header-search-dropdown .dropdown-item,
.header-search-dropdown a.dropdown-item,
.header-search-dropdown li a,
.navbar .header-search-dropdown .dropdown-item,
.navbar-dark .header-search-dropdown .dropdown-item,
.navbar-dark .header-search-dropdown a {
    padding: 0.5rem 1rem;
    color: #333 !important;
    background-color: #fff !important;
    background: #fff !important;
}

.header-search-dropdown .dropdown-item:hover,
.header-search-dropdown .dropdown-item:focus,
.header-search-dropdown .dropdown-item.active,
.header-search-dropdown .dropdown-item:active,
.header-search-dropdown a.dropdown-item:hover,
.header-search-dropdown a.dropdown-item:focus,
.header-search-dropdown a.dropdown-item.active,
.header-search-dropdown a.dropdown-item:active,
.header-search-dropdown li a:hover,
.header-search-dropdown li a:focus,
.header-search-dropdown li a.active,
.header-search-dropdown li a:active,
.navbar-dark .header-search-dropdown .dropdown-item:hover,
.navbar-dark .header-search-dropdown .dropdown-item:focus,
.navbar-dark .header-search-dropdown .dropdown-item.active,
.navbar-dark .header-search-dropdown .dropdown-item:active {
    background-color: #e9ecef !important;
    background: #e9ecef !important;
    color: #333 !important;
}

.header-search-dropdown .dropdown-item i,
.header-search-dropdown a i {
    width: 20px;
    margin-right: 0.5rem;
    color: #666 !important;
}

.header-search-dropdown .dropdown-item small,
.header-search-dropdown a small {
    font-size: 0.75rem;
    margin-left: 28px;
    color: #666 !important;
}

.header-search-dropdown .dropdown-divider,
.header-search-dropdown hr {
    border-color: #ccc !important;
}

/* People Typeahead */
.header-search-typeahead {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ced4da;
    border-top: none;
    border-radius: 0 0 0.375rem 0.375rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1050;
    max-height: 400px;
    overflow-y: auto;
}

.typeahead-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    text-decoration: none;
    color: #212529;
}

.typeahead-item:hover {
    background-color: #f8f9fa;
}

.typeahead-item:last-child {
    border-bottom: none;
}

.typeahead-item-image {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 0.75rem;
    flex-shrink: 0;
    background: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
}

.typeahead-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.typeahead-item-image i {
    font-size: 1.25rem;
    color: #adb5bd;
}

.typeahead-item-info {
    flex-grow: 1;
    min-width: 0;
}

.typeahead-item-name {
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.typeahead-item-role {
    font-size: 0.75rem;
    color: #6c757d;
}

.typeahead-loading,
.typeahead-empty {
    padding: 1rem;
    text-align: center;
    color: #6c757d;
    font-size: 0.875rem;
}

/* ================================================================ */
/* MOBILE SEARCH OVERLAY                                             */
/* ================================================================ */
.mobile-search-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 1100;
    padding: 1rem;
    padding-top: calc(1rem + env(safe-area-inset-top));
    overflow: hidden;
}

.mobile-search-overlay.show {
    display: flex;
    flex-direction: column;
}

.mobile-search-content {
    max-width: 500px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.mobile-search-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #6c757d;
    padding: 0.5rem;
    cursor: pointer;
}

.mobile-search-close:hover {
    color: #212529;
}

/* Search Header */
.mobile-search-header {
    font-size: 1.25rem;
    font-weight: 600;
    color: #0d6efd;
    text-align: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e9ecef;
}

.mobile-search-header i {
    margin-right: 0.5rem;
}

/* Search Type Options (full-width list) */
.mobile-search-types {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.search-type-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 2px solid var(--mv-border-color);
    border-radius: 8px;
    background: #fff;
    color: #495057;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    width: 100%;
}

.search-type-option:hover {
    border-color: #0d6efd;
    background: #f8f9fa;
}

.search-type-option.active {
    border-color: #0d6efd;
    background: #e7f1ff;
}

.search-type-option > i {
    font-size: 1.25rem;
    width: 1.5rem;
    text-align: center;
    color: #0d6efd;
}

.search-type-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.search-type-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: #212529;
}

.search-type-desc {
    font-size: 0.8rem;
    color: #6c757d;
}

/* Results mode: collapse non-active options to make room for typeahead results */
.mobile-search-types.results-mode .search-type-option:not(.active) {
    display: none;
}

/* Back button in results mode */
.mobile-search-back {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--mv-border-color);
    border-radius: 50%;
    background: #fff;
    color: #6c757d;
    cursor: pointer;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.mobile-search-back:hover {
    border-color: #0d6efd;
    color: #0d6efd;
}
.mobile-search-types.results-mode .mobile-search-back {
    display: flex;
}
.mobile-search-types.results-mode {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}
.mobile-search-types.results-mode .search-type-option.active {
    flex: 1;
}

/* Legacy pill styles (keep for desktop dropdown if used) */
.search-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 1rem;
    border: 2px solid var(--mv-border-color);
    border-radius: 50px;
    background: #fff;
    color: #495057;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.search-type-pill:hover {
    border-color: #0d6efd;
    color: #0d6efd;
}

.search-type-pill.active {
    background: #0d6efd;
    border-color: #0d6efd;
    color: #fff;
}

.search-type-pill i {
    font-size: 1rem;
}

/* Mobile Search Input */
.mobile-search-input-container {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.mobile-search-input {
    flex-grow: 1;
    font-size: 1rem;
    padding: 0.75rem 1rem;
}

.mobile-search-submit {
    padding: 0.75rem 1rem;
}

/* Mobile People Typeahead */
.mobile-search-typeahead {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.mobile-search-typeahead .typeahead-item {
    padding: 0.75rem;
}

.mobile-search-typeahead .typeahead-item-image {
    width: 50px;
    height: 50px;
}

.mobile-search-typeahead .typeahead-item-name {
    font-size: 1rem;
}

.mobile-search-typeahead .typeahead-item-role {
    font-size: 0.85rem;
}

/* Title poster images: rectangular, not circular */
.typeahead-item-poster {
    border-radius: 4px;
    width: 35px;
    height: 50px;
}
.mobile-search-typeahead .typeahead-item-poster {
    width: 35px;
    height: 50px;
}

/* "All Results" item at top of title typeahead */
.typeahead-all-results {
    background: #f8f9fa;
    font-weight: 500;
    border-bottom: 2px solid var(--mv-border-color);
}
.typeahead-all-results .typeahead-item-image {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    background: #0d6efd;
    color: #fff;
}
.typeahead-all-results .bi-chevron-right {
    color: #6c757d;
    font-size: 0.85rem;
}

.typeahead-tmdb-search {
    background: #f8f9fa;
    font-weight: 500;
    border-top: 2px solid var(--mv-border-color);
}
.typeahead-tmdb-search .typeahead-item-image {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    background: #198754;
    color: #fff;
}
.typeahead-tmdb-search .bi-chevron-right {
    color: #6c757d;
    font-size: 0.85rem;
}

/* Hide desktop search on mobile and tablets (iPad portrait + 11" landscape).
   Test: at iPad Pro 13" portrait (1032px), the full desktop search input
   feels cramped. Hiding it here to see if removing the bar relieves the
   header crowding at tablet sizes. If users still need a quick search
   affordance at this width, we may add a compact search-icon button. */
@media (max-width: 1199.98px) {
    .header-search-container {
        display: none !important;
    }
}

/* Universal search - flat ranked list with entity type icon on the right.
   Wider dropdown so titles aren't squeezed; titles can wrap to multiple lines.
   The .typeahead-universal class is added by JS when rendering flat results. */
.header-search-typeahead.typeahead-universal {
    /* Anchor to right edge of input and extend LEFTWARD so we don't go
       off-screen on small viewports. The default rule has left:0; right:0;
       which we override here. */
    left: auto;
    right: 0;
    min-width: 460px;
    width: 500px;
    max-width: 600px;
}
.universal-item {
    display: flex;
    align-items: center;
}
.universal-item .typeahead-item-info {
    flex: 1;
    min-width: 0;
}
/* Override the global typeahead-item-name truncation for universal items —
   we want full titles visible, wrapping when needed. */
.universal-item .typeahead-item-name {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.3;
    overflow-wrap: break-word;
    word-break: break-word;
}
.universal-item-type {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin-left: 12px;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 8px;
    background: rgba(13, 110, 253, 0.12);
    color: #0d6efd;
    flex-shrink: 0;
    font-size: 1.25rem;
}
.universal-item-type i {
    font-size: 1.25rem !important;
    line-height: 1 !important;
    display: inline-block !important;
}
[data-bs-theme="dark"] .universal-item-type {
    background: rgba(110, 168, 254, 0.18);
    color: #6ea8fe;
}

/* ================================================================ */
/* END HEADER SEARCH                                                 */
/* ================================================================ */

/* ================================================================ */
/* DARK MODE OVERRIDES                                                */
/* ================================================================ */

[data-bs-theme="dark"] .header-search-type-btn {
    background-color: var(--mv-bg-card);
    border-color: var(--mv-border-color);
    color: var(--mv-text-secondary);
}
[data-bs-theme="dark"] .header-search-type-btn:hover,
[data-bs-theme="dark"] .header-search-type-btn:focus {
    background-color: var(--mv-bg-surface);
}
[data-bs-theme="dark"] .header-search-input {
    background-color: var(--mv-bg-card);
    border-color: var(--mv-border-color);
    color: var(--mv-text-primary);
}
[data-bs-theme="dark"] .header-search-typeahead {
    background: var(--mv-bg-card);
    border-color: var(--mv-border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
[data-bs-theme="dark"] .typeahead-item {
    color: var(--mv-text-primary);
    border-bottom-color: var(--mv-border-color);
}
[data-bs-theme="dark"] .typeahead-item:hover {
    background-color: var(--mv-bg-hover);
}
[data-bs-theme="dark"] .typeahead-item-image {
    background: var(--mv-bg-surface);
}
[data-bs-theme="dark"] .typeahead-item-image i {
    color: var(--mv-text-muted);
}
[data-bs-theme="dark"] .typeahead-item-role {
    color: var(--mv-text-muted);
}
[data-bs-theme="dark"] .typeahead-loading,
[data-bs-theme="dark"] .typeahead-empty {
    color: var(--mv-text-muted);
}
[data-bs-theme="dark"] .typeahead-all-results {
    background: var(--mv-bg-surface);
    border-bottom-color: var(--mv-border-color);
}
[data-bs-theme="dark"] .typeahead-tmdb-search {
    background: var(--mv-bg-surface);
    border-top-color: var(--mv-border-color);
}

/* 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-muted);
}
[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 {
    border-color: var(--mv-border-color);
    background: var(--mv-bg-card);
    color: var(--mv-text-secondary);
}
[data-bs-theme="dark"] .search-type-option:hover {
    background: var(--mv-bg-surface);
}
[data-bs-theme="dark"] .search-type-option.active {
    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"] .search-type-pill {
    border-color: var(--mv-border-color);
    background: var(--mv-bg-card);
    color: var(--mv-text-secondary);
}
[data-bs-theme="dark"] .search-type-pill:hover {
    border-color: #0d6efd;
    color: #0d6efd;
}
[data-bs-theme="dark"] .mobile-search-back {
    border-color: var(--mv-border-color);
    background: var(--mv-bg-card);
    color: var(--mv-text-muted);
}
[data-bs-theme="dark"] .mobile-search-back:hover {
    border-color: #0d6efd;
    color: #0d6efd;
}