/*
 * oscar-dark.css — Donkere modus voor Oscar (/oscar). Geladen na oscar.css.
 * Alles staat onder .oscar-page.is-dark; zonder die klasse verandert er niets (lichte modus = oscar.css).
 * Schakelaar: knop #oscar-theme-toggle in oscar.blade.php; keuze in localStorage ('oscar-theme').
 * Alleen de Oscar-content; header en footer blijven ongemoeid. Verwijderen = dit bestand + toggle in de blade weg.
 */

/* ── Themaschakelaar: maan in licht, zon in donker ── */
.oscar-page__theme-toggle .oscar-page__theme-icon--sun,
.oscar-page.is-dark .oscar-page__theme-toggle .oscar-page__theme-icon--moon {
    display: none;
}
.oscar-page.is-dark .oscar-page__theme-toggle .oscar-page__theme-icon--sun {
    display: block;
}


.oscar-page.is-dark {
    --dg-gold: #f2c261;
    --dg-line: rgba(242, 194, 97, 0.6);
    --dg-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.04));
    --dg-glass-border: rgba(255, 255, 255, 0.14);
    --dg-text: #f7f3ee;
    --dg-muted: #cfc7bc;
    color: var(--dg-text);
    background:
        radial-gradient(ellipse at 15% 60%, rgba(150, 90, 30, 0.25) 0%, rgba(150, 90, 30, 0) 50%),
        radial-gradient(ellipse at 90% 80%, rgba(150, 90, 30, 0.2) 0%, rgba(150, 90, 30, 0) 50%),
        #0c0b0b;
}

/* ── Geen buitenkader: de inhoud staat direct op de donkere pagina ── */
.oscar-page.is-dark .oscar-page__main {
    background: none;
    border: none;
    box-shadow: none;
}

/* ── Topbar ── */
.oscar-page.is-dark.is-chat-active .oscar-page__topbar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.oscar-page.is-dark .oscar-page__hero-avatar,
.oscar-page.is-dark .oscar-page__msg-avatar,
.oscar-page.is-dark .oscar-page__reason-avatar {
    outline: 2px solid var(--dg-gold);
    outline-offset: -2px;
    box-shadow: 0 0 14px rgba(242, 194, 97, 0.3);
}
.oscar-page.is-dark .oscar-page__title,
.oscar-page.is-dark .oscar-page__welcome-heading,
.oscar-page.is-dark .oscar-page__guided-title {
    color: #ffffff;
}
.oscar-page.is-dark .oscar-page__subtitle,
.oscar-page.is-dark .oscar-page__welcome-lead,
.oscar-page.is-dark .oscar-page__welcome-beta,
.oscar-page.is-dark .oscar-page__meta,
.oscar-page.is-dark .oscar-page__meta-name,
.oscar-page.is-dark .oscar-page__guided-footer {
    color: var(--dg-muted);
}
.oscar-page.is-dark .oscar-page__meta,
.oscar-page.is-dark .oscar-page__meta-name,
.oscar-page.is-dark .oscar-page__guided-footer,
.oscar-page.is-dark .oscar-page__disclaimer {
}
.oscar-page.is-dark .oscar-page__welcome-bubble {
    background: var(--dg-glass);
    outline: 1px solid var(--dg-glass-border);
    outline-offset: -1px;
    color: var(--dg-text);
}

/* ── Knoppen ── */
.oscar-page.is-dark .oscar-page__mode-btn,
.oscar-page.is-dark .oscar-page__chip {
}
/* Topbarknoppen houden dezelfde maten als in de lichte modus; alleen de kleuren verschillen */
.oscar-page.is-dark .oscar-page__action-pill,
.oscar-page.is-dark .oscar-page__mode-btn,
.oscar-page.is-dark .oscar-page__chip {
    background: var(--dg-glass);
    color: var(--dg-text);
    border-color: var(--dg-glass-border);
}
.oscar-page.is-dark .oscar-page__chip {
    border-color: var(--dg-line);
    color: #ffe3ae;
}
.oscar-page.is-dark .oscar-page__chip:hover,
.oscar-page.is-dark .oscar-page__action-pill:hover {
    background: rgba(242, 194, 97, 0.16);
}
.oscar-page.is-dark .oscar-page__mode-btn.is-selected,
.oscar-page.is-dark .oscar-page__mode-btn:hover {
    background: linear-gradient(180deg, #f7cf7a, #d9a443);
    color: #1d1407;
    border-color: transparent;
}

/* ── Startscherm-kaart ── */
.oscar-page.is-dark .oscar-page__guided-card {
    background: var(--dg-glass);
    border-color: var(--dg-glass-border);
    box-shadow: none;
}

/* ── Berichten ── */
.oscar-page.is-dark .oscar-page__bubble--user {
    background-color: #6e2328;
    color: #ffe9e9;
}
.oscar-page.is-dark .oscar-page__reply-text {
    background: var(--dg-glass);
    outline: 1px solid var(--dg-glass-border);
    outline-offset: -1px;
    color: var(--dg-text);
    border-radius: 12px;
    box-shadow: none;
}

/* ── Filmkaart + toelichting als één geheel met gouden rand ── */
.oscar-page.is-dark .oscar-page__film-card {
    background: linear-gradient(180deg, #1c1a19, #141211);
    outline: 1px solid var(--dg-line);
    outline-offset: -1px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
    color: var(--dg-text);
}
.oscar-page.is-dark .oscar-page__card-title {
    color: var(--dg-gold);
}
.oscar-page.is-dark .oscar-page__card-year {
    color: var(--dg-muted);
}
.oscar-page.is-dark .oscar-page__card-synopsis {
    color: #e9e2d8;
}
.oscar-page.is-dark .oscar-page__card-genres,
.oscar-page.is-dark .oscar-page__card-duration,
.oscar-page.is-dark .oscar-page__card-credits,
.oscar-page.is-dark .oscar-page__card-facts {
    color: var(--dg-muted);
}
.oscar-page.is-dark .oscar-page__card-rating {
    color: #ffffff;
}
.oscar-page.is-dark .oscar-page__rec-item--with-reason .oscar-page__film-card {
    border-bottom: 1px solid var(--dg-line);
}
.oscar-page.is-dark .oscar-page__reason-bubble {
    background: linear-gradient(180deg, #2a2118, #1f1914);
    color: var(--dg-text);
    box-shadow: inset 1px 0 var(--dg-line), inset -1px 0 var(--dg-line), inset 0 -1px var(--dg-line);
}
.oscar-page.is-dark .oscar-page__reason-badge {
    background: linear-gradient(180deg, #f7cf7a, #d9a443);
    color: #1d1407;
}
.oscar-page.is-dark .oscar-page__reason-text,
.oscar-page.is-dark .oscar-page__reason-watch-label {
    color: var(--dg-text);
}

/* ── Invoerdock ── */
.oscar-page.is-dark .oscar-page__dock {
    background: linear-gradient(to bottom, rgba(12, 11, 11, 0) 0%, rgba(12, 11, 11, 0.94) 24%, #0c0b0b 100%);
}
.oscar-page.is-dark:not(.is-chat-active) .oscar-page__dock {
    background: none;
}
.oscar-page.is-dark .oscar-page__avatar-info {
    background-color: #2b2927;
    border-color: #0c0b0b;
    color: var(--dg-text);
}
.oscar-page.is-dark .oscar-page__avatar-info:hover,
.oscar-page.is-dark .oscar-page__avatar-info:focus-visible {
    color: #ffffff;
}
.oscar-page.is-dark .oscar-page__guided-input {
    color: var(--dg-text);
    background: #2b2927;
    border-color: rgba(255, 255, 255, 0.14);
}
.oscar-page.is-dark .oscar-page__guided-input::placeholder {
    color: #bdb4a8;
}
.oscar-page.is-dark .oscar-page__guided-input:focus,
.oscar-page.is-dark .oscar-page__guided-input:focus-visible {
    outline: none;
    box-shadow: none;
    border-color: rgba(255, 255, 255, 0.4);
}
.oscar-page.is-dark .oscar-page__composer {
    background: linear-gradient(180deg, #2a2827, #1c1b1a);
    border-color: rgba(255, 255, 255, 0.2);
}
.oscar-page.is-dark .oscar-page__composer-input {
    color: var(--dg-text);
}
.oscar-page.is-dark .oscar-page__composer-input::placeholder {
    color: #bdb4a8;
    opacity: 1;
}
.oscar-page.is-dark .oscar-page__composer-icon {
    color: var(--dg-muted);
}
.oscar-page.is-dark .oscar-page__composer-send {
    background: linear-gradient(180deg, #f7cf7a, #d9a443);
    color: #1d1407;
}
.oscar-page.is-dark .oscar-page__disclaimer {
    color: var(--dg-muted);
}
.oscar-page.is-dark .oscar-page__disclaimer-link {
    color: var(--dg-gold);
}

/* ── Zijbalk: donker glas ── */
.oscar-page.is-dark .oscar-page__sidebar {
    background: linear-gradient(180deg, #232120, #171615);
    border-color: rgba(242, 194, 97, 0.35);
    color: var(--dg-text);
}
.oscar-page.is-dark .oscar-page__new-chat-btn {
    background: #b30f14;
}
.oscar-page.is-dark .oscar-page__history-title,
.oscar-page.is-dark .oscar-page__nav-label {
    color: var(--dg-text);
}
.oscar-page.is-dark .oscar-page__history-heading,
.oscar-page.is-dark .oscar-page__history-empty {
    color: var(--dg-muted);
}
.oscar-page.is-dark .oscar-page__history-item:hover,
.oscar-page.is-dark .oscar-page__history-item.is-active {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.18);
}

/* ── Toetsenbordfocus ── */
.oscar-page.is-dark a:focus-visible,
.oscar-page.is-dark button:focus-visible,
.oscar-page.is-dark input:focus-visible {
    outline: 3px solid #ffd27a;
    outline-offset: 2px;
}

@media (min-width: 960px) {
    .oscar-page.is-dark {
    }
    .oscar-page.is-dark .oscar-page__sidebar {
        background: linear-gradient(180deg, #232120, #171615);
        border-color: rgba(242, 194, 97, 0.35);
        border-radius: 14px;
    }
}

/* ── Filmkaart + toelichting als één blok: wrapper draagt rand en achtergrond,
      zodat er bij de afgeronde hoeken geen lichte stukjes doorschemeren ── */
.oscar-page.is-dark .oscar-page__rec-item--with-reason {
    background-color: #2a2118;
    outline: 1px solid var(--dg-line);
    outline-offset: -1px;
    box-shadow: none;
}
.oscar-page.is-dark .oscar-page__rec-item--with-reason .oscar-page__film-card {
    border: none;
    border-bottom: 1px solid var(--dg-line);
    border-radius: 11px 11px 0 0;
    box-shadow: none;
}
.oscar-page.is-dark .oscar-page__rec-item--with-reason .oscar-page__reason-bubble {
    border: none;
    border-radius: 0 0 11px 11px;
}
.oscar-page.is-dark .oscar-page__reason-bubble::before {
    background-color: #2a2118;
    border-top: 1px solid var(--dg-line);
    border-left: 1px solid var(--dg-line);
}

/* ── Leesbare titel en credits op donkere kaart (oscar.css gebruikt :link/:visited met rood, daarom deze selectors) ── */
.oscar-page.is-dark .oscar-page__card-title,
.oscar-page.is-dark .oscar-page__card-title:link,
.oscar-page.is-dark .oscar-page__card-title:visited {
    color: #f2c261;
}
.oscar-page.is-dark .oscar-page__card-title:hover,
.oscar-page.is-dark .oscar-page__card-title:focus-visible {
    color: #ffffff;
}
.oscar-page.is-dark .oscar-page__card-credits dt {
    color: #cfc7bc;
}
.oscar-page.is-dark .oscar-page__card-credits dd,
.oscar-page.is-dark .oscar-page__card-credits a,
.oscar-page.is-dark .oscar-page__card-credits a:link,
.oscar-page.is-dark .oscar-page__card-credits a:visited {
    color: #f0e8dc;
}
.oscar-page.is-dark .oscar-page__card-credits a:hover {
    color: #f2c261;
}

/* ── Trailer-/zoekknop op de poster: donker glas met gouden icoon ── */
.oscar-page.is-dark .oscar-page__card-poster-play,
.oscar-page.is-dark .oscar-page__card-poster-play:link,
.oscar-page.is-dark .oscar-page__card-poster-play:visited {
    background: rgba(18, 15, 12, 0.78);
    color: var(--dg-gold);
    outline: 1.5px solid var(--dg-gold);
    outline-offset: -1.5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.oscar-page.is-dark .oscar-page__card-poster-play:hover,
.oscar-page.is-dark .oscar-page__card-poster-play:focus-visible {
    background: var(--dg-gold);
    color: #1d1407;
}

/* ── Nieuwsblok "Verder ontdekken": vlak en rustig, neutraal oppervlak zonder verloop of gekleurde rand ── */
.oscar-page.is-dark .oscar-page__related-news {
    background: #1c2026;
    border-color: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: none;
}
.oscar-page.is-dark .oscar-page__related-news-heading {
    color: #f7f3ee;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.oscar-page.is-dark .oscar-page__related-news-icon {
    color: var(--dg-muted);
}
.oscar-page.is-dark .oscar-page__related-news-item {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.oscar-page.is-dark .oscar-page__related-news-item:first-child {
    border-top: none;
}
.oscar-page.is-dark .oscar-page__related-news-link,
.oscar-page.is-dark .oscar-page__related-news-link:link,
.oscar-page.is-dark .oscar-page__related-news-link:visited {
    color: var(--dg-text);
}
.oscar-page.is-dark .oscar-page__related-news-link:hover,
.oscar-page.is-dark .oscar-page__related-news-link:focus-visible {
    background-color: rgba(255, 255, 255, 0.05);
}
.oscar-page.is-dark .oscar-page__related-news-thumb {
    background-color: #2a2725;
    border-color: transparent;
}
.oscar-page.is-dark .oscar-page__related-news-thumb-fallback {
    color: var(--dg-muted);
}
.oscar-page.is-dark .oscar-page__related-news-title {
    color: #f7f3ee;
}
.oscar-page.is-dark .oscar-page__related-news-link:hover .oscar-page__related-news-title,
.oscar-page.is-dark .oscar-page__related-news-link:focus-visible .oscar-page__related-news-title {
    color: #ffffff;
}
.oscar-page.is-dark .oscar-page__related-news-movie {
    color: #d8d1c8;
    background-color: rgba(255, 255, 255, 0.08);
    border: none;
}
.oscar-page.is-dark .oscar-page__related-news-date,
.oscar-page.is-dark .oscar-page__related-news-dot {
    color: var(--dg-muted);
}
.oscar-page.is-dark .oscar-page__related-news-chevron {
    color: rgba(255, 255, 255, 0.35);
}
.oscar-page.is-dark .oscar-page__related-news-link:hover .oscar-page__related-news-chevron,
.oscar-page.is-dark .oscar-page__related-news-link:focus-visible .oscar-page__related-news-chevron {
    color: #ffffff;
}
.oscar-page.is-dark .oscar-page__related-news-more {
    color: var(--dg-muted);
}
.oscar-page.is-dark .oscar-page__related-news-more:hover:not(:disabled),
.oscar-page.is-dark .oscar-page__related-news-more:focus-visible:not(:disabled) {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: transparent;
    color: #ffffff;
}

/* ── "Lees onze recensie": moderne pilknop in FilmTotaal-rood ── */
.oscar-page.is-dark .oscar-page__card-review,
.oscar-page.is-dark .oscar-page__card-review:link,
.oscar-page.is-dark .oscar-page__card-review:visited {
    border-radius: 999px;
    background: linear-gradient(180deg, #d02b32, #a8151b);
    border-color: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.oscar-page.is-dark .oscar-page__card-review:hover,
.oscar-page.is-dark .oscar-page__card-review:focus-visible {
    background: linear-gradient(180deg, #e63a41, #bd1c23);
    border-color: rgba(255, 255, 255, 0.4);
    color: #ffffff;
}

/* ── Teller (donkere modus) ── */
.oscar-page.is-dark .oscar-page__usage-ring {
    background: conic-gradient(var(--dg-gold) calc(var(--usage-pct) * 1%), rgba(255, 255, 255, 0.18) 0);
}
/* Gat uitsnijden i.p.v. een donkere vlek: de knopkleur eronder blijft zichtbaar */
.oscar-page.is-dark .oscar-page__usage-ring {
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
}
.oscar-page.is-dark .oscar-page__usage-ring i {
    display: none;
}
.oscar-page.is-dark .oscar-page__usage.is-full .oscar-page__usage-btn {
    background: rgba(196, 0, 0, 0.2);
    border-color: rgba(233, 120, 120, 0.55);
    color: #ffb3b3;
}
.oscar-page.is-dark .oscar-page__usage.is-full .oscar-page__usage-ring {
    background: #e04646;
}
.oscar-page.is-dark .oscar-page__usage-pop {
    background: #1b1917;
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6);
}
.oscar-page.is-dark .oscar-page__usage-title,
.oscar-page.is-dark .oscar-page__usage-line strong {
    color: #ffffff;
}
.oscar-page.is-dark .oscar-page__usage-line,
.oscar-page.is-dark .oscar-page__usage-note,
.oscar-page.is-dark .oscar-page__usage-hint {
    color: var(--dg-muted);
}
.oscar-page.is-dark .oscar-page__usage-note {
    border-top-color: rgba(255, 255, 255, 0.14);
}
.oscar-page.is-dark .oscar-page__usage-bar {
    background: rgba(255, 255, 255, 0.14);
}
.oscar-page.is-dark .oscar-page__usage-bar b {
    background: var(--dg-gold);
}
.oscar-page.is-dark .oscar-page__usage-meter.is-warn .oscar-page__usage-bar b {
    background: #e08a00;
}
.oscar-page.is-dark .oscar-page__usage-meter.is-full .oscar-page__usage-bar b {
    background: #e04646;
}
.oscar-page.is-dark .oscar-page__usage-hint.is-full {
    color: #ffb3b3;
}

/* ── Feedback (donkere modus) ── */
.oscar-page.is-dark .oscar-page__feedback,
.oscar-page.is-dark .oscar-page__feedback-btn {
    color: var(--dg-muted);
}
.oscar-page.is-dark .oscar-page__feedback-btn:hover,
.oscar-page.is-dark .oscar-page__feedback-btn:focus-visible {
    background-color: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}
.oscar-page.is-dark .oscar-page__feedback-btn.is-active {
    color: var(--dg-gold);
    background-color: rgba(242, 194, 97, 0.14);
    border-color: rgba(242, 194, 97, 0.45);
}

/* ── Chatlimiet (donkere modus) ── */
.oscar-page.is-dark .oscar-page__chat-count {
    color: var(--dg-muted);
}
.oscar-page.is-dark .oscar-page__chat-count.is-warn {
    color: #ffd58a;
}
.oscar-page.is-dark .oscar-page__chat-full-note {
    color: rgba(255, 255, 255, 0.6);
}
.oscar-page.is-dark .oscar-page__chat-full-btn {
    background: var(--dg-glass);
    border-color: var(--dg-glass-border);
    color: #ffffff;
    box-shadow: none;
}
.oscar-page.is-dark .oscar-page__chat-full-btn svg {
    color: var(--dg-gold);
}
.oscar-page.is-dark .oscar-page__chat-full-btn:hover,
.oscar-page.is-dark .oscar-page__chat-full-btn:focus-visible {
    border-color: var(--dg-gold);
    color: var(--dg-gold);
}

/* ── Gastweergave (niet ingelogd) ── */
.oscar-page.is-dark .oscar-guest__panel {
    background: var(--dg-glass);
    outline: 1px solid var(--dg-glass-border);
    outline-offset: -1px;
    box-shadow: none;
}
.oscar-page.is-dark .oscar-guest__preview {
    border-right-color: var(--dg-glass-border);
}
.oscar-page.is-dark .oscar-guest__cta {
    background: rgba(255, 255, 255, 0.06);
}
.oscar-page.is-dark .oscar-guest__lock {
    background-color: var(--dg-gold);
    color: #1a1a1a;
    border-color: #2a2a2a;
}
.oscar-page.is-dark .oscar-guest__avatar img {
    outline: 2px solid var(--dg-gold);
    outline-offset: -2px;
}
.oscar-page.is-dark .oscar-guest__cta-title {
    color: #ffffff;
}
.oscar-page.is-dark .oscar-guest__cta-text,
.oscar-page.is-dark .oscar-guest__lead,
.oscar-page.is-dark .oscar-guest__note,
.oscar-page.is-dark .oscar-guest__footnote,
.oscar-page.is-dark .oscar-guest__sidebar .oscar-page__history-empty {
    color: rgba(255, 255, 255, 0.72);
}
.oscar-page.is-dark .oscar-guest__new-chat svg {
    color: inherit;
}
.oscar-page.is-dark .oscar-guest__btn--secondary {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.4);
    color: #ffffff;
}
.oscar-page.is-dark .oscar-guest__btn--secondary:hover,
.oscar-page.is-dark .oscar-guest__btn--secondary:focus-visible {
    background-color: rgba(255, 255, 255, 0.08);
}
.oscar-page.is-dark .oscar-page__mode-btn:disabled,
.oscar-page.is-dark a.oscar-page__guided-submit {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: transparent;
    color: rgba(255, 255, 255, 0.55);
}
.oscar-page.is-dark a.oscar-page__guided-submit:hover,
.oscar-page.is-dark a.oscar-page__guided-submit:focus-visible {
    background-color: #aa0001;
    color: #ffffff;
}
.oscar-page.is-dark .oscar-guest__features {
    border-top-color: var(--dg-glass-border);
}
.oscar-page.is-dark .oscar-guest__features li {
    color: #ffffff;
}
.oscar-page.is-dark .oscar-guest__feature-icon {
    background-color: rgba(242, 194, 97, 0.14);
    color: var(--dg-gold);
}

.oscar-page.is-dark .oscar-page__info-btn {
    color: rgba(255, 255, 255, 0.6);
}
.oscar-page.is-dark .oscar-page__info-btn:hover,
.oscar-page.is-dark .oscar-page__info-btn:focus-visible {
    color: var(--dg-gold);
    background-color: rgba(255, 255, 255, 0.08);
}