/* ==========================================================================
   Vidra UI layer (loaded on every page, after the page's own styles)
   - Light / dark theme (dark is the original design; light remaps it)
   - Loading states: top progress bar + in-place loader
   - Theme toggle button
   ========================================================================== */

:root {
    --vui-accent: #E50914;
    --vui-bg: #0a0a0a;
    --vui-surface: #121212;
    --vui-surface-2: #1a1a1a;
    --vui-border: rgba(255, 255, 255, 0.1);
    --vui-text: #ffffff;
    --vui-muted: #a1a1aa;
    --vui-shimmer: rgba(255, 255, 255, 0.06);
    --vui-shimmer-hi: rgba(255, 255, 255, 0.14);
}

html[data-theme="light"] {
    --vui-bg: #f4f5f7;
    --vui-surface: #ffffff;
    --vui-surface-2: #eef0f3;
    --vui-border: #e1e4e8;
    --vui-text: #16181d;
    --vui-muted: #5f6672;
    --vui-shimmer: rgba(0, 0, 0, 0.05);
    --vui-shimmer-hi: rgba(0, 0, 0, 0.1);
    color-scheme: light;
}

html[data-theme="dark"] {
    color-scheme: dark;
    /* Bootstrap's muted text is tuned for light pages (dark grey); on Vidra's dark design it was
       nearly invisible (.text-muted, small helper text). Use a light grey instead. */
    --bs-secondary-color: rgba(222, 226, 230, 0.6);
}

/* Smooth switch, but never animate on first paint */
html.vui-theme-ready body,
html.vui-theme-ready .navbar,
html.vui-theme-ready .sidebar,
html.vui-theme-ready .card,
html.vui-theme-ready .course-card,
html.vui-theme-ready .marketplace-card {
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* --------------------------------------------------------------------------
   Theme toggle
   -------------------------------------------------------------------------- */
.vui-theme-toggle {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1090;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--vui-border);
    background: var(--vui-surface);
    color: var(--vui-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
    cursor: pointer;
    transition: transform .15s ease, background-color .25s ease, color .25s ease;
}

.vui-theme-toggle:hover {
    transform: translateY(-2px);
}

.vui-theme-toggle:focus-visible {
    outline: 3px solid var(--vui-accent);
    outline-offset: 2px;
}

.vui-theme-toggle .vui-icon-sun,
html[data-theme="light"] .vui-theme-toggle .vui-icon-moon {
    display: none;
}

html[data-theme="light"] .vui-theme-toggle .vui-icon-sun {
    display: inline;
}

@media print {
    .vui-theme-toggle,
    .vui-progress {
        display: none !important;
    }
}

/* --------------------------------------------------------------------------
   Loading: top progress bar (shown while any API request is in flight)
   -------------------------------------------------------------------------- */
.vui-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    z-index: 2100;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
    overflow: hidden;
}

.vui-progress.active {
    opacity: 1;
}

.vui-progress::before {
    content: "";
    position: absolute;
    top: 0;
    left: -40%;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--vui-accent), transparent);
    animation: vui-progress-slide 1.1s ease-in-out infinite;
}

@keyframes vui-progress-slide {
    to {
        left: 100%;
    }
}

/* --------------------------------------------------------------------------
   Loading: in-place loader (used in grids, lists and tables)
   -------------------------------------------------------------------------- */
.vui-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: 2.5rem 1rem;
    width: 100%;
    color: var(--vui-muted);
    font-size: .9rem;
    text-align: center;
}

.vui-loader.vui-loader-sm {
    flex-direction: row;
    padding: .75rem;
}

.vui-spinner {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid var(--vui-shimmer-hi);
    border-top-color: var(--vui-accent);
    animation: vui-spin .8s linear infinite;
    flex-shrink: 0;
}

.vui-loader-sm .vui-spinner {
    width: 18px;
    height: 18px;
    border-width: 2px;
}

@keyframes vui-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Skeleton cards shown under the spinner in grids */
.vui-skeleton-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    width: 100%;
    margin-top: .5rem;
}

.vui-skeleton {
    border-radius: 12px;
    height: 150px;
    background: linear-gradient(90deg, var(--vui-shimmer) 25%, var(--vui-shimmer-hi) 37%, var(--vui-shimmer) 63%);
    background-size: 400% 100%;
    animation: vui-shimmer 1.4s ease infinite;
}

@keyframes vui-shimmer {
    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

.vui-loader-slow {
    color: var(--vui-muted);
}

.vui-loader-slow .btn {
    margin-top: .25rem;
}

@media (prefers-reduced-motion: reduce) {
    .vui-spinner,
    .vui-skeleton,
    .vui-progress::before {
        animation-duration: 3s;
    }
}

/* Buttons that are busy (VidraUI.busy) */
.vui-busy {
    pointer-events: none;
    opacity: .75;
}

/* ==========================================================================
   LIGHT THEME
   The pages were designed dark-only (Bootstrap dark utility classes, hex colours
   in page styles and a few inline styles). These rules remap those to light.
   Areas that must stay dark (video players, image overlays) opt out with
   .vui-keep-dark or are listed in the "keep dark" block at the end.
   ========================================================================== */
html[data-theme="light"] body {
    background-color: var(--vui-bg) !important;
    color: var(--vui-text) !important;
}

/* Surfaces: shared app classes from style.css / admin.css / marketplace.css */
html[data-theme="light"] :is(.navbar, .sidebar, .sidebar-footer, .sidebar-toggle-border, .top-bar, .topbar, .admin-header,
    .course-card, .marketplace-card, .stat-card, .quick-action-btn, .notification-modal, .hero-banner, .bento-section,
    .card, .modal-content, .offcanvas, .dropdown-menu, .list-group-item, .accordion-item, .accordion-button,
    .toast, .popover, .payment-card, .auth-card, .login-card, .glass-card, .feature-card, .pricing-card, .plan-card,
    .bootcamp-card, .mentor-card, .resource-card, .cert-card, .lesson-item, .content-card, .info-card) {
    background-color: var(--vui-surface) !important;
    color: var(--vui-text);
    border-color: var(--vui-border) !important;
}

html[data-theme="light"] .navbar {
    background-color: rgba(255, 255, 255, .92) !important;
    border-bottom: 1px solid var(--vui-border) !important;
}

html[data-theme="light"] :is(.course-card, .marketplace-card, .stat-card, .card, .payment-card, .pricing-card) {
    box-shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
}

html[data-theme="light"] :is(.search-container, .card-image-wrapper, .bg-dark-subtle, .accordion-button:not(.collapsed)) {
    background-color: var(--vui-surface-2) !important;
}

/* Bootstrap dark utilities */
html[data-theme="light"] :is(.bg-black, .bg-dark, .bg-body, .bg-body-tertiary, .table-dark) {
    background-color: var(--vui-surface) !important;
    color: var(--vui-text);
}

html[data-theme="light"] .bg-opacity-50.bg-black,
html[data-theme="light"] .bg-opacity-25.bg-black {
    background-color: var(--vui-surface-2) !important;
}

html[data-theme="light"] :is(.text-white, .text-light, .link-light, .text-white-50, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
    color: var(--vui-text) !important;
}

html[data-theme="light"] :is(.text-secondary, .text-muted, .text-body-secondary, .text-white-50) {
    color: var(--vui-muted) !important;
}

html[data-theme="light"] :is(.border-secondary, .border-dark, .border-light, .border, .border-top, .border-bottom, .border-start, .border-end) {
    border-color: var(--vui-border) !important;
}

html[data-theme="light"] hr {
    border-color: var(--vui-border);
    opacity: 1;
}

/* Inline styles with dark backgrounds (common hex values used in the pages) */
html[data-theme="light"] :is([style*="background-color: #000"], [style*="background-color:#000"], [style*="background: #000"],
    [style*="background:#000"], [style*="background-color: #0a0a0a"], [style*="background: #0a0a0a"],
    [style*="background-color: #050505"], [style*="background-color: #111"], [style*="background: #111"],
    [style*="background-color:#111"], [style*="background-color: #121212"], [style*="background: #121212"],
    [style*="background-color: #18181b"], [style*="background-color: #1a1a1a"], [style*="background: #1a1a1a"],
    [style*="background-color: #1e1e1e"], [style*="background-color: #1E1E1E"], [style*="background: #1E1E1E"],
    [style*="background-color: #222"], [style*="background: #222"], [style*="background-color: #27272a"],
    [style*="background: linear-gradient(45deg, #111, #000)"]) {
    background: var(--vui-surface-2) !important;
}

html[data-theme="light"] [style*="color: #fff"],
html[data-theme="light"] [style*="color:#fff"],
html[data-theme="light"] [style*="color: white"] {
    color: var(--vui-text) !important;
}

/* Forms */
html[data-theme="light"] :is(.form-control, .form-select, .input-group-text, textarea, select, input[type="text"], input[type="email"],
    input[type="password"], input[type="number"], input[type="url"], input[type="search"], input[type="tel"], input[type="date"],
    input[type="datetime-local"], input[type="time"]) {
    background-color: #fff !important;
    color: var(--vui-text) !important;
    border-color: #cfd4dc !important;
}

html[data-theme="light"] :is(.form-control, textarea, input)::placeholder {
    color: #9aa1ad !important;
}

html[data-theme="light"] :is(.form-control, .form-select):focus {
    border-color: var(--vui-accent) !important;
    box-shadow: 0 0 0 .2rem rgba(229, 9, 20, .15) !important;
}

html[data-theme="light"] .form-check-input:not(:checked) {
    background-color: #fff !important;
    border-color: #b9c0cb !important;
}

html[data-theme="light"] :is(.form-label, label) {
    color: var(--vui-muted);
}

/* Buttons & components */
html[data-theme="light"] .btn-outline-light,
html[data-theme="light"] .btn-outline-secondary {
    color: var(--vui-text) !important;
    border-color: #c5cbd3 !important;
    background-color: transparent;
}

html[data-theme="light"] .btn-outline-light:hover,
html[data-theme="light"] .btn-outline-secondary:hover {
    background-color: var(--vui-surface-2) !important;
}

html[data-theme="light"] .btn-dark,
html[data-theme="light"] .btn-secondary {
    background-color: var(--vui-surface-2) !important;
    border-color: var(--vui-border) !important;
    color: var(--vui-text) !important;
}

html[data-theme="light"] .btn-link.text-white,
html[data-theme="light"] .navbar-toggler {
    color: var(--vui-text) !important;
}

html[data-theme="light"] .navbar-toggler-icon,
html[data-theme="light"] .btn-close-white {
    filter: invert(1) grayscale(100%) brightness(.3);
}

html[data-theme="light"] .nav-link,
html[data-theme="light"] .navbar .nav-link,
html[data-theme="light"] .sidebar a,
html[data-theme="light"] .sidebar .nav-link,
html[data-theme="light"] .dropdown-item {
    color: #3b414b !important;
}

html[data-theme="light"] .nav-link:hover,
html[data-theme="light"] .nav-link.active,
html[data-theme="light"] .sidebar .nav-link.active,
html[data-theme="light"] .sidebar a.active,
html[data-theme="light"] .dropdown-item:hover {
    /* deeper than the brand red so it stays readable on the pale tint */
    color: #b0060f !important;
    background-color: rgba(229, 9, 20, .08) !important;
}

/* Active pills sit on a solid accent fill: keep their text white */
html[data-theme="light"] .nav-pills .nav-link.active,
html[data-theme="light"] .nav-pills .show>.nav-link {
    color: #fff !important;
    background-color: var(--vui-accent) !important;
}

html[data-theme="light"] .nav-tabs,
html[data-theme="light"] .nav-pills {
    border-color: var(--vui-border) !important;
}

html[data-theme="light"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--vui-text);
    --bs-table-border-color: var(--vui-border);
    --bs-table-hover-bg: var(--vui-surface-2);
    --bs-table-hover-color: var(--vui-text);
    --bs-table-striped-bg: var(--vui-surface-2);
    color: var(--vui-text);
}

html[data-theme="light"] .table> :not(caption)>*>* {
    color: var(--vui-text);
    border-color: var(--vui-border);
}

html[data-theme="light"] .table thead th {
    color: var(--vui-muted) !important;
}

html[data-theme="light"] .modal-header,
html[data-theme="light"] .modal-footer {
    border-color: var(--vui-border) !important;
}

html[data-theme="light"] .sidebar-overlay,
html[data-theme="light"] .notification-backdrop {
    background: rgba(17, 24, 39, .35) !important;
}

html[data-theme="light"] ::-webkit-scrollbar-track {
    background: var(--vui-surface-2);
}

html[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: #c3c8d0;
}

/* --------------------------------------------------------------------------
   Page components with their own light-on-dark text colours
   (found with a contrast audit of every page in light mode)
   -------------------------------------------------------------------------- */
html[data-theme="light"] .navbar-custom {
    background-color: var(--vui-surface) !important;
    border-bottom: 1px solid var(--vui-border) !important;
}

/* Course cards (marketplace.css) */
html[data-theme="light"] :is(.card-instructor, .card-meta, .meta-item) {
    color: var(--vui-muted) !important;
}

html[data-theme="light"] :is(.card-instructor strong, .rating-stars, .card-title, .card-content h3, .card-content h5) {
    color: var(--vui-text) !important;
}

/* Homepage feature list */
html[data-theme="light"] .bento-feature-item span {
    color: var(--vui-text) !important;
}

html[data-theme="light"] :is(.bento-content .lead, .bento-content p) {
    color: var(--vui-muted) !important;
}

/* Join / payment step indicator and back link */
html[data-theme="light"] .step span {
    color: var(--vui-muted) !important;
}

html[data-theme="light"] .step.active span {
    color: var(--vui-text) !important;
}

html[data-theme="light"] .back-link {
    color: var(--vui-muted) !important;
}

html[data-theme="light"] .back-link:hover {
    color: var(--vui-text) !important;
}

/* Course page (learn.html) */
html[data-theme="light"] :is(.breadcrumb-item, .breadcrumb-item a, .breadcrumb-item.active) {
    color: var(--vui-muted) !important;
}

html[data-theme="light"] .breadcrumb-item.active {
    color: var(--vui-text) !important;
}

html[data-theme="light"] :is(.sidebar-item, .sidebar-item div, .sidebar-item span, .sidebar-list, .tag-badge) {
    color: var(--vui-muted) !important;
}

html[data-theme="light"] :is(.sidebar-icon, .gift-btn) {
    color: var(--vui-text) !important;
    border-color: var(--vui-border) !important;
}

html[data-theme="light"] .tag-badge {
    background-color: var(--vui-surface-2) !important;
    border-color: var(--vui-border) !important;
}

html[data-theme="light"] .nav-tabs .nav-link {
    color: var(--vui-muted) !important;
    background: transparent !important;
}

html[data-theme="light"] .nav-tabs .nav-link.active {
    color: var(--vui-text) !important;
    border-bottom-color: var(--vui-accent) !important;
}

/* Bright accent colours (made for dark backgrounds) darkened for light ones */
html[data-theme="light"] .text-warning {
    color: #b45309 !important;
}

html[data-theme="light"] .text-info {
    color: #0e7490 !important;
}

html[data-theme="light"] .text-success {
    color: #15803d !important;
}

html[data-theme="light"] .text-danger {
    color: #c81e1e !important;
}

html[data-theme="light"] .btn-outline-info {
    color: #0e7490 !important;
    border-color: #0e7490 !important;
}

html[data-theme="light"] .btn-outline-warning {
    color: #b45309 !important;
    border-color: #d97706 !important;
}

html[data-theme="light"] :is(.btn-outline-info, .btn-outline-warning):hover {
    color: #fff !important;
}

/* Soft (tinted) badges and alerts: coloured text on a pale tint, never white */
html[data-theme="light"] :is(.badge, .alert)[class*="bg-opacity"].bg-success,
html[data-theme="light"] :is(.badge, .alert)[class*="bg-opacity"].bg-success * {
    color: #166534 !important;
}

html[data-theme="light"] :is(.badge, .alert)[class*="bg-opacity"].bg-danger,
html[data-theme="light"] :is(.badge, .alert)[class*="bg-opacity"].bg-danger * {
    color: #991b1b !important;
}

html[data-theme="light"] :is(.badge, .alert)[class*="bg-opacity"].bg-warning,
html[data-theme="light"] :is(.badge, .alert)[class*="bg-opacity"].bg-warning * {
    color: #92400e !important;
}

html[data-theme="light"] :is(.badge, .alert)[class*="bg-opacity"]:is(.bg-primary, .bg-info),
html[data-theme="light"] :is(.badge, .alert)[class*="bg-opacity"]:is(.bg-primary, .bg-info) * {
    color: #1e40af !important;
}

html[data-theme="light"] :is(.badge, .alert)[class*="bg-opacity"].bg-secondary,
html[data-theme="light"] :is(.badge, .alert)[class*="bg-opacity"].bg-secondary * {
    color: #374151 !important;
}

/* Full-page photo backgrounds (login, password pages): vidra-ui.js swaps the dark tint
   for a light one; the card on top keeps its own surface */
html[data-theme="light"] .auth-container,
html[data-theme="light"] .auth-wrapper {
    background: transparent !important;
}

/* --------------------------------------------------------------------------
   Keep dark: things that sit on video / images or are white-on-colour.
   -------------------------------------------------------------------------- */
html[data-theme="light"] .hero-sm {
    color: #fff;
}

html[data-theme="light"] .hero-sm :is(.text-white, .text-light, h1, h2, h3, h4, h5, h6, p, .lead, span) {
    color: #fff !important;
}

html[data-theme="light"] .hero-sm :is(.text-secondary, .text-muted) {
    color: rgba(255, 255, 255, .75) !important;
}
/* Solid colour fills keep white text (tinted bg-opacity-* fills are handled above) */
html[data-theme="light"] :is(.btn-danger, .btn-primary, .btn-success, .btn-hero-primary, .btn-teal,
    .badge:not([class*="bg-opacity"]), .bg-danger:not([class*="bg-opacity"]), .bg-primary:not([class*="bg-opacity"]),
    .bg-success:not([class*="bg-opacity"]), .bg-info:not([class*="bg-opacity"])) :is(.text-white, h1, h2, h3, h4, h5, h6),
html[data-theme="light"] :is(.btn-danger, .btn-primary, .btn-success, .btn-hero-primary, .btn-teal).text-white,
html[data-theme="light"] :is(.badge, .bg-danger, .bg-primary, .bg-success):not([class*="bg-opacity"]).text-white {
    color: #fff !important;
}

html[data-theme="light"] :is(.vui-keep-dark, .player-wrapper, .video-wrapper, .video-container, .vidra-player, #ytPlayerDiv,
    .card-image-wrapper .badge, .hero-section, .hero-image-wrapper, .price-tag) {
    color: #fff;
}

html[data-theme="light"] :is(.vui-keep-dark, .player-wrapper, .video-wrapper, .video-container, .vidra-player, .hero-section,
    .hero-image-wrapper) :is(.text-white, .text-light, h1, h2, h3, h4, h5, h6, .h3, [style*="color: #fff"]) {
    color: #fff !important;
}

html[data-theme="light"] :is(.vui-keep-dark, .player-wrapper, .video-wrapper, .video-container, .vidra-player) :is(.text-secondary, .text-muted) {
    color: rgba(255, 255, 255, .7) !important;
}

html[data-theme="light"] :is(.player-wrapper, .video-wrapper, .video-container, .vidra-player),
html[data-theme="light"] :is(.player-wrapper, .video-wrapper, .video-container, .vidra-player) :is(.bg-black, .bg-dark, [style*="background"]) {
    background-color: #000 !important;
}

/* The in-player notice (Members only / Coming soon) gets a soft light panel instead */
html[data-theme="light"] .player-wrapper .vui-player-notice {
    background: linear-gradient(135deg, #1b1d22, #0d0e11) !important;
}