/* EPICSOLO THEME OVERRIDES — visual theme only. No layout/behaviour rules. */
/* 1.8.6: LICHT is het standaardthema. De donkere achtergrond kleurt mee via
   html[data-theme] — zonder attribuut is de basis nog donker uit epicsolo.css,
   daarom zet theme.js ALTIJD data-theme (light of dark) vóór de render. */
html[data-theme="dark"]{color-scheme:dark}
html[data-theme="light"]{color-scheme:light}

html[data-theme="light"] body,
html[data-theme="light"] .room-page,
html[data-theme="light"] .admin-page{color:#172033}
html[data-theme="light"] body{background:radial-gradient(circle at top,#f3f7fc 0,#eef2f7 48%,#e8edf4 100%)}

/* Shared surfaces on every page */
html[data-theme="light"] .top{background:#ffffffee!important;border-bottom-color:#d6deea!important}
html[data-theme="light"] .page-card, html[data-theme="light"] .hero-card, html[data-theme="light"] .room-card, html[data-theme="light"] .modal-box, html[data-theme="light"] .panel, html[data-theme="light"] .stat, html[data-theme="light"] .admin-card, html[data-theme="light"] .stats-grid>div, html[data-theme="light"] .admin-cam-card, html[data-theme="light"] .chat, html[data-theme="light"] .participants, html[data-theme="light"] .visitors-panel, html[data-theme="light"] .watchers-dialog, html[data-theme="light"] .media-settings-dialog, html[data-theme="light"] .resize-dropdown, html[data-theme="light"] .emoji-picker, html[data-theme="light"] .gif-picker, html[data-theme="light"] .cookie-consent, html[data-theme="light"] .cookie-details-box, html[data-theme="light"] .admin-webcam-hover-float, html[data-theme="light"] .visitor-floating-viewer{background:#fff!important;color:#172033;border-color:#d5deea}

html[data-theme="light"] .starter-panel{background:linear-gradient(145deg,#fff,#f5f8fc)!important;border-color:#d5deea!important}
html[data-theme="light"] .starter-video-wrap, html[data-theme="light"] .self-video-wrap, html[data-theme="light"] .visitor-video-frame, html[data-theme="light"] .admin-cam-media, html[data-theme="light"] .visitor-floating-viewer, html[data-theme="light"] .epic-pip-fallback{background:#e8edf4!important}
html[data-theme="light"] .starter-video,
html[data-theme="light"] .self-video,
html[data-theme="light"] .visitor-video,
html[data-theme="light"] #starterVideo,
html[data-theme="light"] #selfVideo{background:#e8edf4!important}
html[data-theme="light"] .visitor-tile{background:#eef2f7!important;border-color:#cbd5e1!important}

/* Inputs, selects and text areas — including dynamically created controls */
html[data-theme="light"] input, html[data-theme="light"] select, html[data-theme="light"] textarea, html[data-theme="light"] .media-setting-row select, html[data-theme="light"] .visitors-head select, html[data-theme="light"] .log-controls input, html[data-theme="light"] .log-controls select, html[data-theme="light"] .user-lookup input{background:#fff!important;color:#172033!important;border-color:#cbd5e1!important}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder{color:#64748b!important}

/* Buttons and small controls */
html[data-theme="light"] button{background:#fff;color:#172033;border-color:#cbd5e1}
html[data-theme="light"] .primary{background:#172033!important;color:#fff!important;border-color:#172033!important}
html[data-theme="light"] .danger{background:#ffe5e8!important;color:#8f2332!important;border-color:#e5a3ac!important}
html[data-theme="light"] .kick-small{background:#fff0f2!important;color:#8f2332!important;border-color:#e5a3ac!important}
html[data-theme="light"] .visitor-video-tools .visitor-close{background:#fff0f2!important;color:#8f2332!important;border-color:#e5a3ac!important}
html[data-theme="light"] .visitor-video-tools .visitor-close:hover{background:#ffe1e5!important}
html[data-theme="light"] .watch-toggle{background:#fff!important;color:#334155!important;border-color:#cbd5e1!important}
html[data-theme="light"] .watch-toggle.active{background:#e8eef7!important;color:#172033!important;border-color:#94a3b8!important}
html[data-theme="light"] .link-button,
html[data-theme="light"] .topbar-logout{background:transparent!important}

/* Navigation / drawers / overlays */
html[data-theme="light"] .rooms-backdrop,
html[data-theme="light"] .watchers-backdrop,
html[data-theme="light"] .media-settings-backdrop{background:rgba(15,23,42,.40)!important}
html[data-theme="light"] .rooms-drawer{background:#fff!important;border-left-color:#d5deea!important}
html[data-theme="light"] .browser-room{background:#f8fafc!important;color:#172033!important;border-color:#d5deea!important}
html[data-theme="light"] .browser-room:hover{background:#fff!important;border-color:#94a3b8!important}
html[data-theme="light"] .empty{background:transparent!important;color:#64748b!important;border-color:#cbd5e1!important}

html[data-theme="light"] .starter-offline, html[data-theme="light"] .visitor-actions, html[data-theme="light"] .visitor-floating-controls, html[data-theme="light"] .visitor-inline-audio-controls .volume-control, html[data-theme="light"] .visitor-inline-audio-controls .mute-control, html[data-theme="light"] .media-setting-row select, html[data-theme="light"] .resize-dropdown, html[data-theme="light"] .resize-dropdown button:hover, html[data-theme="light"] .room-page .emoji-picker, html[data-theme="light"] .room-page .gif-picker, html[data-theme="light"] .room-page .gif-picker-search>span, html[data-theme="light"] .room-page .gif-picker-search input, html[data-theme="light"] .room-page .gif-choice{background:#fff!important;color:#172033!important}
html[data-theme="light"] .visitor-actions{border-top-color:#d5deea!important}
html[data-theme="light"] .starter-offline{color:#64748b!important}
html[data-theme="light"] .visitor-grid{border-color:#cbd5e1!important}

/* Webcam overlays remain intentionally dark for readability over video.
   (.webcam-audio-overlay volgt sinds 1.10.10 wél het thema; zie
   epic-theme-hardcoded.css.) */
html[data-theme="light"] .video-name, html[data-theme="light"] .visitor-name, html[data-theme="light"] .epic-pip-fallback-head, html[data-theme="light"] .admin-page .admin-preview-label{color:#fff!important}
html[data-theme="light"] .video-name,
html[data-theme="light"] .visitor-name{background:rgba(15,23,42,.82)!important}

/* Admin: every data/card/log surface follows light mode */
html[data-theme="light"] .admin-page{background:#eef2f7!important}
html[data-theme="light"] .admin-nav button{background:#fff!important;color:#172033!important;border-color:#cbd5e1!important}
html[data-theme="light"] .admin-nav button:hover,
html[data-theme="light"] .admin-nav button.active{background:#e8eef7!important}
html[data-theme="light"] .admin-table .thead{background:#e8eef7!important;color:#172033!important}
html[data-theme="light"] .admin-row, html[data-theme="light"] .log-line, html[data-theme="light"] .participant-row, html[data-theme="light"] .msg, html[data-theme="light"] .watcher-row{border-color:#e2e8f0!important}
html[data-theme="light"] .user-context-menu,
html[data-theme="light"] .staff-own-context-menu,
html[data-theme="light"] .staff-context-menu{background:#fff!important;color:#172033!important;border-color:#d5deea!important}
html[data-theme="light"] .user-context-menu button,
html[data-theme="light"] .staff-own-context-menu button,
html[data-theme="light"] .staff-context-menu button{background:transparent!important;color:#172033!important}
html[data-theme="light"] .user-context-menu button:hover,
html[data-theme="light"] .staff-own-context-menu button:hover,
html[data-theme="light"] .staff-context-menu button:hover,
html[data-theme="light"] .emoji-choice:hover{background:#eef3f9!important}
html[data-theme="light"] .user-lookup-result,
html[data-theme="light"] .admin-cam-media + *,
html[data-theme="light"] .chat-log-content{border-color:#d5deea!important}
/* CHATLOG-MODAL (kamer/lobby, admins & moderators): light-mode bewijsbaar
   leesbaar — de donkere chatlog-achtergrond (#0a101a) kreeg in het lichte
   thema donkere tekst, wat onleesbaar was. Dezelfde surface-kleuren als de
   admin-pagina (f8fafc op wit), met donkere tekst en leesbare grijstinten. */
html[data-theme="light"] .chat-log-content{
  background:#f8fafc!important;
  color:#172033!important;
}
html[data-theme="light"] .chat-log-line{color:#172033!important}
html[data-theme="light"] .chat-log-line span:not(.log-role-badge){color:#52627a!important}
html[data-theme="light"] .chat-log-line b{color:#172033!important}
html[data-theme="light"] .chat-log-session{border-color:#d5deea!important}
html[data-theme="light"] .chat-log-session summary,
html[data-theme="light"] .chat-log-session summary strong{color:#172033}
html[data-theme="light"] .chat-log-session summary .muted{color:#52627a!important}
html[data-theme="light"] .chat-log-modal-box .muted{color:#5b6b80!important}
html[data-theme="light"] .admin-notice{background:#f8fafc!important;border-color:#cbd5e1!important}
html[data-theme="light"] .admin-chat-youtube,
html[data-theme="light"] .chat-youtube-link{background:#f1f5f9!important}
html[data-theme="light"] .admin-webcam-hover-float{box-shadow:0 20px 60px rgba(71,85,105,.22)!important}

html[data-theme="light"] .ip-analysis-user, html[data-theme="light"] .log-session-folder{background:#f8fafc!important;border-color:#d5deea!important}
html[data-theme="light"] .admin-page .log-user-messages .log-line{border-bottom-color:#e2e8f0!important}
html[data-theme="light"] .log-role-badge{background:#e2e8f0!important;color:#334155!important}

/* Site/message/cookie extras */
html[data-theme="light"] .free-platform-badge,
html[data-theme="light"] .message-promo-card,
html[data-theme="light"] .public-message-log-row,
html[data-theme="light"] .global-message-popup,
html[data-theme="light"] .cookie-consent{background:#fff!important;border-color:#d5deea!important;color:#172033}
html[data-theme="light"] .message-form,
html[data-theme="light"] .message-card{background:#fff!important;color:#172033!important;border-color:#d5deea!important}
html[data-theme="light"] .moderator-discussion-messages{background:#f8fafc!important;border-color:#d5deea!important}
html[data-theme="light"] .moderator-discussion-message{background:#fff!important;border-color:#e2e8f0!important}
html[data-theme="light"] .cookie-details-box{background:linear-gradient(180deg,#fff 0%,#f8fafc 100%)!important}
html[data-theme="light"] .cookie-detail-item,
html[data-theme="light"] .cookie-storage-note,
html[data-theme="light"] .cookie-details-icon,
html[data-theme="light"] .cookie-detail-badge{background:#f1f5f9!important;color:#172033!important}

/* Loading / reset */
html[data-theme="light"] .loading-screen,
html[data-theme="light"] .account-reset-page{background:radial-gradient(circle at top,#eef3f9 0,#dce5f0 65%,#d4deea 100%)!important}
html[data-theme="light"] .loading-card{background:#fff!important;border-color:#d5deea!important;color:#172033!important}
html[data-theme="light"] .loading-logo{color:#172033!important}
html[data-theme="light"] .loading-text{color:#64748b!important}
html[data-theme="light"] .loading-spinner{border-color:#cbd5e1!important;border-top-color:#64748b!important}

/* Scrollbar tracks/thumbs are also theme surfaces */
html[data-theme="light"] *{scrollbar-color:#94a3b8 #eef2f7}
html[data-theme="light"] .room-page .chat #messages:hover::-webkit-scrollbar-track{background:#eef2f7!important}
html[data-theme="light"] .room-page .chat #messages:hover::-webkit-scrollbar-thumb{background:#94a3b8!important}

/* 1.9.96: cookie-banner in lichte modus duidelijk onderscheiden van de pagina
   (was: wit op wit — de banner viel weg tegen de achtergrond en leek "onduidelijk").
   1.9.97: gebruiker meldde de tekst alsnog onduidelijk leesbaar → contrast nu
   expliciet opgevoerd: massief wit vlak, donkere rand, donkere tekst en stevige
   knoppen in plaats van witte knoppen op een witte achtergrond. */
html[data-theme="light"] .cookie-consent{
  background:#ffffff!important;
  border:2px solid #1f2937!important;
  box-shadow:0 20px 45px rgba(15,23,42,.38),0 2px 0 rgba(15,23,42,.12)!important;
  color:#0f172a!important;
}
html[data-theme="light"] .cookie-consent .cookie-consent-copy, html[data-theme="light"] .cookie-consent .cookie-consent-copy span, html[data-theme="light"] .cookie-consent .cookie-consent-copy strong, html[data-theme="light"] .cookie-consent p, html[data-theme="light"] .cookie-consent a{color:#0f172a!important}
/* 1.9.97 LEESBAARHEID: expliciet donkere tekst op élk kopje/regel van de
   banner (de basiscss zet losse grijstinten die in lichte modus wegvielen),
   ruimere regelafstand en een iets groter lettertype. */
html[data-theme="light"] .cookie-consent .cookie-consent-copy strong{font-weight:800;letter-spacing:.01em;font-size:16px;color:#0f172a!important}
html[data-theme="light"] .cookie-consent .cookie-consent-copy span{font-size:15.5px;line-height:1.6;color:#1e293b!important}
html[data-theme="light"] .cookie-consent-actions button{
  min-height:40px;padding:8px 16px;font-size:14.5px;font-weight:700;
}
html[data-theme="light"] .cookie-consent-actions button{
  border:2px solid #1f2937!important;
  color:#0f172a!important;
  background:#f1f5f9!important;
  font-weight:700;
  box-shadow:0 2px 0 rgba(15,23,42,.25);
}
html[data-theme="light"] .cookie-consent-actions button:hover{background:#e2e8f0!important}
html[data-theme="light"] .cookie-consent-actions button.primary{
  background:#0f172a!important;color:#fff!important;border-color:#0f172a!important;
}
html[data-theme="light"] .cookie-consent-actions button.primary:hover{background:#1e293b!important}
html[data-theme="light"] .cookie-details-box{border:2px solid #1f2937!important;box-shadow:0 24px 70px rgba(15,23,42,.45)!important}
/* 1.9.97 LEESBAARHEID DETAILS-DIALOOG: de basiscss kleurt élke regel in
   donker-thema-grijs (#aab7ca) en sommige codes in bijna-wit (#dbe7ff) —
   op de lichte achtergrond was daardoor het grootste deel van de
   cookiedetails onleesbaar. Alles krijgt hier expliciet donkere tekst,
   harde randen en net wat grotere letters. */
html[data-theme="light"] .cookie-details-box,
html[data-theme="light"] .cookie-details-box h2,
html[data-theme="light"] .cookie-details-box h2+p{color:#0f172a!important}
html[data-theme="light"] .cookie-details-eyebrow{color:#475569!important;font-size:12px!important}
html[data-theme="light"] .cookie-details-intro{color:#1e293b!important;font-size:15px!important;line-height:1.6!important}
html[data-theme="light"] .cookie-detail-item{border:1px solid #cbd5e1!important;background:#f8fafc!important}
html[data-theme="light"] .cookie-detail-item p{color:#334155!important;font-size:14px!important;line-height:1.55!important}
html[data-theme="light"] .cookie-detail-name code{
  color:#0f172a!important;background:#e2e8f0!important;
  border:1px solid #cbd5e1!important;border-radius:6px;padding:2px 7px;font-size:13px!important;
}
html[data-theme="light"] .cookie-detail-badge{border-color:#94a3b8!important;color:#0f172a!important;background:#e2e8f0!important}
html[data-theme="light"] .cookie-detail-meta{border-top-color:#cbd5e1!important;color:#475569!important;font-size:12px!important}
html[data-theme="light"] .cookie-detail-meta strong{color:#0f172a!important}
html[data-theme="light"] .cookie-storage-note{border:1px solid #cbd5e1!important;background:#f1f5f9!important}
html[data-theme="light"] .cookie-storage-note strong{color:#0f172a!important;font-size:14px!important}
html[data-theme="light"] .cookie-storage-note p{color:#334155!important;font-size:14px!important;line-height:1.55!important}
html[data-theme="light"] .cookie-storage-note code{color:#0f172a!important;background:#e2e8f0!important;border:1px solid #cbd5e1!important;border-radius:5px;padding:1px 5px}
html[data-theme="light"] .cookie-details-footer{border-top-color:#cbd5e1!important;color:#334155!important;font-size:12.5px!important;font-weight:600}
html[data-theme="light"] .cookie-details-close{border:2px solid #1f2937!important;color:#0f172a!important;background:#f1f5f9!important;font-weight:700}

/* 1.9.97 LEESBAARHEID HOME: "Jou bericht hier??"-kaartje stond in lichte
   modus vrijwel onzichtbaar — de donkere-thema kleuren (#cbd7e9/#9fb1ca/
   #66758d) én de lage opacity (.55-.72) op een wit vlak. Alles hier expliciet
   donker, volle dekking, zoals de overige lichte vlakken. */
html[data-theme="light"] .message-promo-card{
  opacity:1!important;background:#ffffff!important;color:#0f172a!important;
  border:2px dashed #94a3b8!important;
}
html[data-theme="light"] .message-promo-card:hover{border-color:#475569!important;background:#f8fafc!important}
html[data-theme="light"] .message-promo-card strong,
html[data-theme="light"] .message-promo-copy strong{color:#0f172a!important;font-weight:800!important;font-size:13.5px!important}
html[data-theme="light"] .message-promo-copy p,
html[data-theme="light"] .message-promo-card p{color:#1e293b!important;font-weight:600!important}
html[data-theme="light"] .message-promo-copy em,
html[data-theme="light"] .message-promo-card em{color:#475569!important;font-style:normal!important}
html[data-theme="light"] .message-promo-copy small{color:#64748b!important}
html[data-theme="light"] .message-promo-icon{opacity:1!important;filter:none!important}
html[data-theme="light"] .message-promo-live.message-promo-showing,
html[data-theme="light"] .message-promo-live.message-promo-empty{opacity:1!important}
html[data-theme="light"] .message-promo-live.message-promo-showing .message-promo-copy p,
html[data-theme="light"] .message-promo-live.message-promo-showing .message-promo-copy em,
html[data-theme="light"] .message-promo-live.message-promo-showing .message-promo-icon,
html[data-theme="light"] .message-promo-live.message-promo-empty .message-promo-copy p,
html[data-theme="light"] .message-promo-live.message-promo-empty .message-promo-copy em{opacity:1!important}

/* Do not alter semantic status colours in either theme. */

/* 1.8.5 fix: admin webcam-labels. De eerdere groep hierboven forceerde witte
   tekst op ALLE .admin-preview-label's, maar in light mode hebben de compacte
   pills een lichte achtergrond => wit-op-wit. Overlays boven video blijven
   donker met witte tekst; compacte pills volgen light mode. */
html[data-theme="light"] .admin-page .admin-cam-media .admin-preview-label{background:rgba(15,23,42,.88)!important;color:#fff!important;border-color:rgba(255,255,255,.25)!important}
html[data-theme="light"] .admin-page .admin-cam-compact .admin-preview-label{background:#f1f5f9!important;color:#334155!important;border-color:#cbd5e1!important}


/* Visual-only theme shimmer; no geometry changes. */
html, body, .top, .room-page, .starter-panel, .chat, .participants{transition:background-color .28s ease,border-color .28s ease,color .28s ease,box-shadow .28s ease}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(circle at 15% 10%,rgba(54,215,255,.05),transparent 28%),radial-gradient(circle at 85% 15%,rgba(179,122,255,.06),transparent 30%);mix-blend-mode:screen}
html[data-theme="light"] body::before{background:radial-gradient(circle at 15% 10%,rgba(54,215,255,.10),transparent 28%),radial-gradient(circle at 85% 15%,rgba(168,85,247,.08),transparent 30%)}
/* Fixed LOBBY card on homepage. De afbeelding wordt per thema door
   seasonal-theme.js gekozen (standaard_light.png / standaard_dark.png en
   seizoensvarianten) via de --lobby-background-image variabele. */
.lobby-room-card{position:relative;border-color:rgba(168,85,247,.55);box-shadow:0 0 0 1px rgba(59,130,246,.08),0 10px 34px rgba(76,29,149,.12)}
.lobby-room-card .preview{background-color:#070d18;background-position:center;background-size:cover;background-repeat:no-repeat;background-image:var(--lobby-background-image,none)}
.lobby-room-card .live{color:#ff5f7a}

/* Dedicated room-entry controls: keeps lobby and room navigation reliable on touch devices. */
.room-card{touch-action:manipulation;-webkit-tap-highlight-color:transparent;pointer-events:auto;user-select:none;-webkit-user-select:none}.room-card:focus-visible{outline:2px solid rgba(105,226,255,.85);outline-offset:2px}

/* 1.8.6 LIGHT-BY-DEFAULT: de admin-review iframe + preview-pagina waren
   hardcoded donker. Deze counters maken de hele review-keten licht. */
html[data-theme="light"] .admin-review-window{background:#f4f8fc;box-shadow:0 24px 90px rgba(15,23,42,.25)}
html[data-theme="light"] .admin-review-head{background:#fff;border-bottom-color:#d6deea}
html[data-theme="light"] .admin-review-window iframe{background:#fff}