/*
 * App design tokens — light/dark Color Mode
 * @date 2026-06-29
 * @author Stephane H.
 */

:root,
[data-bs-theme="light"] {
    --app-brand: #1a4470;
    --app-brand-accent: #2a7a96;
    --app-brand-soft: #e8f2f6;
    --app-bg: #f3f5f7;
    --app-surface: #ffffff;
    --app-surface-2: #eef1f4;
    --app-border: #d8dee4;
    --app-hero-start: #1c3968;
    --app-hero-end: #2b7692;

    --bs-primary: var(--app-brand);
    --bs-primary-rgb: 26, 68, 112;
    --bs-body-bg: var(--app-bg);
    --bs-body-color: #1a1d21;
    --bs-secondary-bg: var(--app-surface-2);
    --bs-border-color: var(--app-border);

    --app-youtube-tab-color: var(--bs-body-color);
    --app-youtube-tab-active-bg: var(--app-surface);
    --app-youtube-tab-active-color: var(--bs-body-color);
    --app-youtube-tab-hover-bg: rgba(26, 68, 112, 0.08);

    --app-accordion-brand-bg: var(--app-brand-soft);
    --app-accordion-brand-bg-active: var(--app-brand);
    --app-accordion-brand-color: var(--app-brand);
    --app-accordion-brand-color-active: #ffffff;
    --app-accordion-brand-border: rgba(26, 68, 112, 0.22);
    --app-accordion-brand-body-bg: var(--app-surface);

    --app-video-meta-color: var(--bs-secondary-color);
    --app-video-meta-icon: var(--app-brand);
    --app-video-meta-value: var(--bs-body-color);
}

[data-bs-theme="dark"] {
    --app-brand: #5a9fd4;
    --app-brand-accent: #3d8fa8;
    --app-brand-soft: #1a2830;
    --app-bg: #0f1216;
    --app-surface: #181c22;
    --app-surface-2: #222830;
    --app-border: #343b45;
    --app-hero-start: #0d1824;
    --app-hero-end: #1a3344;

    --bs-primary: var(--app-brand);
    --bs-primary-rgb: 90, 159, 212;
    --bs-body-bg: var(--app-bg);
    --bs-body-color: #e8eaed;
    --bs-secondary-bg: var(--app-surface-2);
    --bs-border-color: var(--app-border);

    --app-youtube-tab-color: var(--bs-body-color);
    --app-youtube-tab-active-bg: var(--app-surface);
    --app-youtube-tab-active-color: var(--bs-body-color);
    --app-youtube-tab-hover-bg: rgba(90, 159, 212, 0.12);

    --app-accordion-brand-bg: rgba(90, 159, 212, 0.14);
    --app-accordion-brand-bg-active: rgba(90, 159, 212, 0.32);
    --app-accordion-brand-color: var(--app-brand);
    --app-accordion-brand-color-active: #ffffff;
    --app-accordion-brand-border: rgba(90, 159, 212, 0.35);
    --app-accordion-brand-body-bg: var(--app-surface);

    --app-video-meta-color: #c8d8e8;
    --app-video-meta-icon: #8cc5ff;
    --app-video-meta-value: #ffffff;
}

/* Layout shell */
.app-shell {
    min-height: 100%;
    background: var(--app-bg);
    color: var(--bs-body-color);
}

.app-hero-bg {
    background: linear-gradient(to bottom, var(--app-hero-start), var(--app-hero-end));
    background-attachment: fixed;
}

.app-hero-bg,
.app-hero-bg .text-on-hero {
    color: #ffffff;
}

.app-hero-bg .text-on-hero-muted {
    color: rgba(255, 255, 255, 0.75);
}

/* Public pages (home, login, etc.) — light surface, dark hero gradient */
[data-bs-theme="light"] body.app-surface-page {
    background: var(--app-surface);
    color: var(--bs-body-color);
}

[data-bs-theme="light"] body.app-surface-page footer {
    --app-surface-footer-color: #606060;
}

[data-bs-theme="light"] body.app-surface-page footer .text-body-secondary,
[data-bs-theme="light"] body.app-surface-page footer a {
    color: var(--app-surface-footer-color) !important;
}

[data-bs-theme="light"] body.app-surface-page footer a:hover {
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] body.app-surface-page {
    background: linear-gradient(to bottom, var(--app-hero-start), var(--app-hero-end));
    background-attachment: fixed;
    color: #ffffff;
}

[data-bs-theme="dark"] body.app-surface-page footer .text-body-secondary,
[data-bs-theme="dark"] body.app-surface-page footer a {
    color: rgba(255, 255, 255, 0.75) !important;
}

[data-bs-theme="dark"] body.app-surface-page footer a:hover {
    color: #ffffff !important;
}

/* Surfaces */
.app-card {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    color: var(--bs-body-color);
}

.app-card-header {
    background: var(--app-brand);
    color: #ffffff;
    border-bottom: 1px solid var(--app-border);
}

[data-bs-theme="dark"] .app-card-header {
    background: var(--app-surface-2);
    color: var(--bs-body-color);
}

/* Brand accordion — import/export filters, theme-aware */
.app-accordion-brand .accordion-item {
    border-color: var(--app-accordion-brand-border);
    background: var(--app-accordion-brand-body-bg);
}

.app-accordion-brand .accordion-button {
    background-color: var(--app-accordion-brand-bg);
    color: var(--app-accordion-brand-color);
    font-weight: 500;
    box-shadow: none;
    border-left: 3px solid var(--app-brand);
}

.app-accordion-brand .accordion-button:not(.collapsed) {
    background-color: var(--app-accordion-brand-bg-active);
    color: var(--app-accordion-brand-color-active);
    box-shadow: none;
}

.app-accordion-brand .accordion-button:focus {
    border-color: var(--app-accordion-brand-border);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

.app-accordion-brand .accordion-button:not(.collapsed)::after {
    filter: brightness(0) invert(1);
}

.app-accordion-brand .accordion-body {
    background: var(--app-accordion-brand-body-bg);
}

/* Navbar */
.app-navbar {
    background: var(--app-brand) !important;
}

[data-bs-theme="dark"] .app-navbar {
    background: var(--app-surface) !important;
    border-bottom: 1px solid var(--app-border);
}

[data-bs-theme="dark"] .app-navbar .navbar-nav .nav-link {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .app-navbar .navbar-toggler-icon {
    filter: invert(1) grayscale(100%);
}

/* Legacy user-bg compatibility during migration */
body.user-bg {
    min-height: 100%;
    background: linear-gradient(to bottom, var(--app-hero-start), var(--app-hero-end));
    background-attachment: fixed;
}

/* Select2 dark mode overrides */
[data-bs-theme="dark"] .select2-container--default .select2-selection--single,
[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: var(--app-surface);
    border-color: var(--app-border);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .select2-dropdown {
    background-color: var(--app-surface);
    border-color: var(--app-border);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--app-brand);
    color: #ffffff;
}

/* RGPD banner offset for floating actions */
body.rgpd-banner-visible .floating-actions {
    bottom: 6rem;
}

@media (max-width: 576px) {
    body.rgpd-banner-visible .floating-actions {
        bottom: 8rem;
    }
}

/* Leaflet map dark mode hint */
[data-bs-theme="dark"] .leaflet-container {
    background: var(--app-surface-2);
}

/* Video card metadata — theme-aware labels (added date, duration) */
.video-meta {
    color: var(--app-video-meta-color);
}

.video-meta .bi {
    color: var(--app-video-meta-icon);
}

.video-meta strong {
    color: var(--app-video-meta-value);
}

/* YouTube toolbar / card dropdowns — follow active theme */
.youtube-dropdown-menu {
    background-color: var(--app-surface);
    border-color: var(--app-border);
    color: var(--bs-body-color);
}

.youtube-dropdown-menu .dropdown-item {
    color: var(--bs-body-color);
}

.youtube-dropdown-menu .dropdown-item:hover,
.youtube-dropdown-menu .dropdown-item:focus {
    background-color: var(--app-youtube-tab-hover-bg);
    color: var(--bs-body-color);
}

.youtube-dropdown-menu .dropdown-item.active {
    background-color: var(--app-brand);
    color: #ffffff;
}

.youtube-dropdown-menu .dropdown-header {
    color: var(--bs-secondary-color);
}

.youtube-dropdown-menu .dropdown-divider {
    border-color: var(--app-border);
}

/* Category / artist filter offcanvas — theme-aware */
.youtube-category-filter-offcanvas,
.youtube-artist-filter-offcanvas {
    background-color: var(--app-surface) !important;
    color: var(--bs-body-color) !important;
}

.youtube-category-filter-offcanvas .btn-close,
.youtube-artist-filter-offcanvas .btn-close {
    filter: none;
}

[data-bs-theme="dark"] .youtube-category-filter-offcanvas .btn-close,
[data-bs-theme="dark"] .youtube-artist-filter-offcanvas .btn-close {
    filter: invert(1) grayscale(100%);
}

/* Entity view accordion (category / artist pages) */
.app-entity-accordion .accordion-item {
    background-color: transparent;
    border-color: var(--app-border);
}

.app-entity-accordion .accordion-button {
    background-color: transparent;
    color: var(--bs-body-color);
    border: none;
    box-shadow: none;
}

.app-entity-accordion .accordion-button:not(.collapsed) {
    background-color: var(--app-youtube-tab-hover-bg);
    color: var(--bs-body-color);
    box-shadow: none;
}

.app-entity-accordion .accordion-button:focus {
    border-color: var(--app-border);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

.app-entity-accordion .accordion-body {
    background-color: transparent;
}