/* =============================================================
   EPICSOLO 1.10.10 — HARDCODED-THEMA-LAAG (☀ LICHT + ☾ DONKER)
   =============================================================
   Deze laag wordt als ABSOLUUT LAATSTE stylesheet geladen op ELKE
   EPICSOLO-pagina: room.html, admin.html, index.html, help-,
   contact-, webcam-chat- en infrapagina's én álle vier layouts
   (guest / kamerstarter / lobby / admin).

   Waarom dit bestand bestaat: eerdere themafixes lagen verspreid
   over veel stylesheets en werden op sommige pagina's door een
   latere lay-out-CSS weer overschreven (donkere restanten in het
   lichte thema). Daarom staat hieronder ELKE kleur letterlijk in
   één bestand, als allerlaatste laag:

   ☀ LICHT en ☾ DONKER staan hier volledig hardcoded naast elkaar.
   Het knopje [☾ Donker / ☀ Licht] schakelt gewoon data-theme om;
   dit bestand zet dan élke ondergrond, rand en tekstkleur in beide
   modi opnieuw — er kan daarna niets meer "verviesken".

   Achtergronden en randen: altijd !important (hard).
   Tekstkleuren: hard op bekende vlakken en koppen, maar NIET binnen
   #messages .msg zodat gebruiker-gekleurde chat (inline/klassen)
   gerespecteerd blijft. */

/* ============================= ☀ LICHT ============================= */
/* Admin-gastweergave (admin-webcam-preview.html) heeft géén theme.js en dus
   geen data-theme. Zonder attribuut geldt hier default LICHT; met expliciet
   data-theme="dark" geldt gewoon het donkere blok hieronder. */
/* Pagina's zonder theme.js (admin-webcam-preview.html): geen data-theme betekent
   hier expliciet LICHT, door hieronder de volledige lichtmodus ook op de
   :not-selector te laten gelden. Al het licht-blok wordt naar dit bestand via
   de alias-selector herhaald (door CSS-en: dezelfde regels, tweede selector). */
html:not([data-theme="dark"]) body{
  background:radial-gradient(circle at top,#f3f7fc 0,#eef2f7 48%,#e8edf4 100%)!important;
  color:#172033;
}
html:not([data-theme="dark"]){color-scheme:light}
/* 1.10.10 ZWARTE-BAND-FIX: admin-webcam-preview.css zet html ÉN body op
   #070c14. In licht (default, zonder theme.js) bleef de html-laag donker en
   toonde onder de korte body een groot zwart reserveringsvlak. html volgt nu
   dezelfde lichte bodemkleur; het donkere blok hieronder raakt dit niet. */
html:not([data-theme="dark"]){background:#eef2f7}

html:not([data-theme="dark"]) body{
  background:radial-gradient(circle at top,#f3f7fc 0,#eef2f7 48%,#e8edf4 100%)!important;
  color:#172033;
}
html:not([data-theme="dark"]) .top{background:#ffffffee!important;border-bottom:1px solid #d6deea!important}
html:not([data-theme="dark"]) .site-footer{background:#ffffffee!important;border-top:1px solid #d6deea!important;color:#172033}
html:not([data-theme="dark"]) .room-page,
html:not([data-theme="dark"]) .admin-page{background:transparent!important;color:#172033}

/* Vlakken en kaarten: alles wit */
html:not([data-theme="dark"]) .panel, html:not([data-theme="dark"]) .page-card, html:not([data-theme="dark"]) .hero-card, html:not([data-theme="dark"]) .room-card, html:not([data-theme="dark"]) .modal-box, html:not([data-theme="dark"]) .admin-card, html:not([data-theme="dark"]) .stat, html:not([data-theme="dark"]) .stats-grid>div, html:not([data-theme="dark"]) .chat, html:not([data-theme="dark"]) .participants, html:not([data-theme="dark"]) .visitors-panel, html:not([data-theme="dark"]) .settings-accordion, html:not([data-theme="dark"]) .watchers-dialog, html:not([data-theme="dark"]) .media-settings-dialog, html:not([data-theme="dark"]) .cookie-consent, html:not([data-theme="dark"]) .cookie-details-box, html:not([data-theme="dark"]) .admin-webcam-hover-float, html:not([data-theme="dark"]) .visitor-floating-viewer, html:not([data-theme="dark"]) .emoji-picker, html:not([data-theme="dark"]) .gif-picker, html:not([data-theme="dark"]) .resize-dropdown, html:not([data-theme="dark"]) .rooms-drawer, html:not([data-theme="dark"]) .user-context-menu, html:not([data-theme="dark"]) .staff-context-menu, html:not([data-theme="dark"]) .staff-own-context-menu, html:not([data-theme="dark"]) .global-message-popup, html:not([data-theme="dark"]) .epicsolo-bot-toast, html:not([data-theme="dark"]) .browser-room, html:not([data-theme="dark"]) .chat-reply-bar, html:not([data-theme="dark"]) .chat-access-entry, html:not([data-theme="dark"]) .chat-managed-item, html:not([data-theme="dark"]) .settings-choice, html:not([data-theme="dark"]) .settings-link-card, html:not([data-theme="dark"]) .settings-accordion-body, html:not([data-theme="dark"]) .admin-cam-media{background:#fff!important;color:#172033;border-color:#d7dee8!important}

html:not([data-theme="dark"]) .starter-panel{background:linear-gradient(145deg,#fff,#f5f8fc)!important;border-color:#d5deea!important}
html:not([data-theme="dark"]) .starter-video-wrap, html:not([data-theme="dark"]) .self-video-wrap, html:not([data-theme="dark"]) .visitor-video-frame, html:not([data-theme="dark"]) .visitor-tile, html:not([data-theme="dark"]) .admin-cam-media, html:not([data-theme="dark"]) .lobby-camera-placeholder, html:not([data-theme="dark"]) .starter-video, html:not([data-theme="dark"]) .self-video, html:not([data-theme="dark"]) .visitor-video{background:#e8edf4!important}
html:not([data-theme="dark"]) #starterVideo,
html:not([data-theme="dark"]) #selfVideo{background:#e8edf4!important}

/* 1.10.10 CAM-LIGHT-FIX: de audio-pill (mute + volume + 100%), de volume-chip
 * en de naam/audio-chip op de eigen webcam bleven in licht keihard donker —
 * mijn eerdere fix raakte de dode selector .webcam-inline-audio-controls,
 * die in geen enkele JS/HTML voorkomt. Dit zijn de échte selectors
 * (room.js: bar.className='starter-audio-controls generic-volume-control').
 * Ze volgen nu hetzelfde lichte chip-uiterlijk als de visitor-balk
 * (.visitor-inline-audio-controls); donker blijft ongewijzigd. */
html:not([data-theme="dark"]) .starter-audio-controls,
html:not([data-theme="dark"]) .starter-video-wrap .generic-volume-control,
html:not([data-theme="dark"]) .self-video-wrap .generic-volume-control{
  background:rgba(255,255,255,.94)!important;
  border-color:#cbd5e1!important;
  color:#172033!important;
}
html:not([data-theme="dark"]) .starter-audio-controls .volume-control,
html:not([data-theme="dark"]) .generic-volume-control .volume-control{
  background:rgba(255,255,255,.94)!important;
  border-color:#cbd5e1!important;
  color:#172033!important;
}
html:not([data-theme="dark"]) .webcam-audio-overlay{
  background:rgba(255,255,255,.94)!important;
  border-color:#cbd5e1!important;
  color:#172033!important;
  box-shadow:0 3px 12px rgba(15,23,42,.12)!important;
}
html:not([data-theme="dark"]) .webcam-audio-overlay .webcam-audio-name{color:#172033!important}
html:not([data-theme="dark"]) .webcam-audio-overlay .webcam-audio-level{
  background:#e2e8f0!important;
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.18)!important;
}
html:not([data-theme="dark"]) .webcam-audio-overlay.audio-speaking{border-color:#2fae5f!important}

/* Invoer en knoppen */
html:not([data-theme="dark"]) input,
html:not([data-theme="dark"]) select,
html:not([data-theme="dark"]) textarea{background:#fff!important;color:#172033!important;border-color:#cbd5e1!important}
html:not([data-theme="dark"]) input::placeholder,
html:not([data-theme="dark"]) textarea::placeholder{color:#64748b!important}

html:not([data-theme="dark"]) button{background:#fff!important;color:#172033!important;border-color:#cbd5e1!important}
html:not([data-theme="dark"]) button:hover{background:#eef2f8!important}
html:not([data-theme="dark"]) .primary{background:#172033!important;color:#fff!important;border-color:#172033!important}
html:not([data-theme="dark"]) .primary:hover{background:#253246!important;color:#fff!important}
html:not([data-theme="dark"]) .danger{background:#ffe5e8!important;color:#8f2332!important;border-color:#e5a3ac!important}
html:not([data-theme="dark"]) .danger:hover{background:#ffd7dd!important}
html:not([data-theme="dark"]) .emoji-button{background:#fff!important;color:#172033!important;border-color:#cbd5e1!important}
html:not([data-theme="dark"]) .watch-toggle{background:#fff!important;color:#334155!important;border-color:#cbd5e1!important}
html:not([data-theme="dark"]) .watch-toggle.active{background:#dbeafe!important;color:#1d4ed8!important;border-color:#93b4f4!important}
html:not([data-theme="dark"]) button[data-lang-toggle]{background:#eef2f8!important;color:#172033!important;border-color:#cbd5e1!important}
html:not([data-theme="dark"]) button[data-lang-toggle].active-en{background:#dbeafe!important;color:#1d4ed8!important;border-color:#93b4f4!important}
html:not([data-theme="dark"]) .lang-fab{background:#fff!important;color:#172033!important;border-color:#cbd5e1!important}
html:not([data-theme="dark"]) #restartWebcam.restart-webcam-button{background:#172033!important;color:#fff!important;border-color:#172033!important}
html:not([data-theme="dark"]) #restartWebcam.restart-webcam-button:hover{background:#253246!important}
html:not([data-theme="dark"]) .admin-nav button{background:#fff!important;color:#172033!important;border-color:#cbd5e1!important}
html:not([data-theme="dark"]) .admin-nav button:hover,
html:not([data-theme="dark"]) .admin-nav button.active{background:#e8eef7!important}
html:not([data-theme="dark"]) .settings-link-card,
html:not([data-theme="dark"]) .settings-primary-link{background:#fff!important;color:#172033!important;border-color:#d7dee8!important}
html:not([data-theme="dark"]) .user-context-menu button,
html:not([data-theme="dark"]) .staff-context-menu button,
html:not([data-theme="dark"]) .staff-own-context-menu button{background:transparent!important}

/* Tekst: hard op koppen, labels en kleine tekstchips */
html:not([data-theme="dark"]) h1,html:not([data-theme="dark"]) h2,html:not([data-theme="dark"]) h3,
html:not([data-theme="dark"]) h4,html:not([data-theme="dark"]) h5,html:not([data-theme="dark"]) h6{color:#0f172a!important}
html:not([data-theme="dark"]) .eyebrow,
html:not([data-theme="dark"]) .muted,
html:not([data-theme="dark"]) small,
html:not([data-theme="dark"]) .chat-char-counter,
html:not([data-theme="dark"]) .settings-subtitle,
html:not([data-theme="dark"]) .settings-accordion small,
html:not([data-theme="dark"]) .brand-version,
html:not([data-theme="dark"]) .footer-disclaimer{color:#64748b!important}
html:not([data-theme="dark"]) .starter-label,
html:not([data-theme="dark"]) .starter-identity,
html:not([data-theme="dark"]) .participants-head h3,
html:not([data-theme="dark"]) .chat-heading h3,
html:not([data-theme="dark"]) .panel-title,
html:not([data-theme="dark"]) .starter-offline,
html:not([data-theme="dark"]) .staff-no-webcam-notice,
html:not([data-theme="dark"]) .visitor-empty,
html:not([data-theme="dark"]) .watchers-empty,
html:not([data-theme="dark"]) .msg{color:#334155}
html:not([data-theme="dark"]) .msg a{color:#1d4ed8!important}
html:not([data-theme="dark"]) .brand{color:#172033!important}
html:not([data-theme="dark"]) .brand-version-link{color:#64748b!important}
html:not([data-theme="dark"]) a{color:#1d4ed8}
html:not([data-theme="dark"]) a:hover{color:#1e40af}
html:not([data-theme="dark"]) .room-nav a{color:#334155}
html:not([data-theme="dark"]) .room-nav a:hover{color:#0f172a}
html:not([data-theme="dark"]) .lang-gate-locked::before{background:rgba(234,239,255,.22)}
html:not([data-theme="dark"]) .admin-cam-type{border-color:#cbd5e1;color:#475569;background:#f8fafc}

/* ADMIN-GASTWEERGAVE (admin-webcam-preview.html, geen theme.js):
   group-vlakken, kaarten en media volgen hier de lichtmodus in plaats van
   de hardcoded donkere basis uit admin-webcam-preview.css. */
html:not([data-theme="dark"]) .admin-preview-group{background:#fff!important;border-color:#d5deea!important;color:#172033}
html:not([data-theme="dark"]) .admin-preview-group-head h2{color:#172033}
html:not([data-theme="dark"]) .admin-preview-group-head span{border-color:#c8d5e4;color:#43536d}
html:not([data-theme="dark"]) .admin-preview-header{border-bottom-color:#d7dee8!important}
html:not([data-theme="dark"]) .admin-preview-header p{color:#5b6b80!important}
html:not([data-theme="dark"]) .admin-preview-status{color:#526173}
html:not([data-theme="dark"]) .admin-preview-status.admin-preview-error{color:#b91c1c}
html:not([data-theme="dark"]) .admin-preview-card{background:#fff!important;border-color:#d5deea!important;color:#172033}
html:not([data-theme="dark"]) .admin-preview-card:hover{border-color:#64748b!important;box-shadow:0 9px 24px rgba(15,23,42,.14)!important}
html:not([data-theme="dark"]) .admin-preview-media,
html:not([data-theme="dark"]) .admin-preview-media img{background:#e8edf4}
html:not([data-theme="dark"]) .admin-preview-tag{border-color:#c8d5e4;color:#43536d}
html:not([data-theme="dark"]) .admin-preview-card.role-kamerstarter .admin-preview-tag{border-color:rgba(59,130,246,.5);color:#1d4ed8!important}
html:not([data-theme="dark"]) .admin-preview-card.role-bezoeker .admin-preview-tag{border-color:rgba(147,51,234,.45);color:#7e22ce!important}
html:not([data-theme="dark"]) .admin-preview-card.role-beta .admin-preview-tag{border-color:rgba(147,51,234,.6);color:#7e22ce!important}
html:not([data-theme="dark"]) .admin-preview-card.role-lobby .admin-preview-tag{border-color:rgba(6,132,200,.5);color:#0369a1!important}
html:not([data-theme="dark"]) .admin-preview-live{background:rgba(255,255,255,.92);border-color:rgba(22,118,158,.45);color:#075985}
html:not([data-theme="dark"]) .admin-preview-hover-hint{background:rgba(255,255,255,.92);border-color:#c8d5e4;color:#334155}
html:not([data-theme="dark"]) .admin-preview-shell button{background:#fff;color:#172033;border-color:#cbd5e1}
html:not([data-theme="dark"]) .admin-preview-shell button:hover{background:#eef2f8}

/* ============================= ☾ DONKER ============================= */
html[data-theme="dark"]{color-scheme:dark}

html[data-theme="dark"] body{background:#070b12!important;color:#e7edf7}
html[data-theme="dark"] .top{background:rgba(10,15,23,.94)!important;border-bottom:1px solid #222f45!important}
html[data-theme="dark"] .site-footer{background:#0d1420!important;border-top:1px solid #222f45!important;color:#e7edf7}
html[data-theme="dark"] .room-page,
html[data-theme="dark"] .admin-page{background:transparent!important;color:#e7edf7}

/* Vlakken en kaarten: alles #0d1420 */
html[data-theme="dark"] .panel, html[data-theme="dark"] .page-card, html[data-theme="dark"] .hero-card, html[data-theme="dark"] .room-card, html[data-theme="dark"] .modal-box, html[data-theme="dark"] .admin-card, html[data-theme="dark"] .stat, html[data-theme="dark"] .stats-grid>div, html[data-theme="dark"] .chat, html[data-theme="dark"] .participants, html[data-theme="dark"] .visitors-panel, html[data-theme="dark"] .settings-accordion, html[data-theme="dark"] .watchers-dialog, html[data-theme="dark"] .media-settings-dialog, html[data-theme="dark"] .cookie-consent, html[data-theme="dark"] .cookie-details-box, html[data-theme="dark"] .admin-webcam-hover-float, html[data-theme="dark"] .visitor-floating-viewer, html[data-theme="dark"] .emoji-picker, html[data-theme="dark"] .gif-picker, html[data-theme="dark"] .resize-dropdown, html[data-theme="dark"] .rooms-drawer, html[data-theme="dark"] .user-context-menu, html[data-theme="dark"] .staff-context-menu, html[data-theme="dark"] .staff-own-context-menu, html[data-theme="dark"] .global-message-popup, html[data-theme="dark"] .epicsolo-bot-toast, html[data-theme="dark"] .browser-room, html[data-theme="dark"] .chat-reply-bar, html[data-theme="dark"] .chat-access-entry, html[data-theme="dark"] .chat-managed-item, html[data-theme="dark"] .settings-choice, html[data-theme="dark"] .settings-link-card, html[data-theme="dark"] .settings-accordion-body, html[data-theme="dark"] .admin-cam-media{background:#0d1420!important;color:#e7edf7;border-color:#263449!important}

html[data-theme="dark"] .starter-panel{background:linear-gradient(145deg,#0d1420,#0a111c)!important;border-color:#222f45!important}
html[data-theme="dark"] .starter-video-wrap, html[data-theme="dark"] .self-video-wrap, html[data-theme="dark"] .visitor-video-frame, html[data-theme="dark"] .visitor-tile, html[data-theme="dark"] .admin-cam-media, html[data-theme="dark"] .lobby-camera-placeholder, html[data-theme="dark"] .starter-video, html[data-theme="dark"] .self-video, html[data-theme="dark"] .visitor-video{background:#0a111c!important}
html[data-theme="dark"] #starterVideo,
html[data-theme="dark"] #selfVideo{background:#0a111c!important}

/* Invoer en knoppen */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{background:#0d1420!important;color:#e7edf7!important;border-color:#263449!important}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{color:#8ea0b8!important}

html[data-theme="dark"] button{background:#0d1420!important;color:#e7edf7!important;border-color:#263449!important}
html[data-theme="dark"] button:hover{background:#16203a!important}
html[data-theme="dark"] .primary{background:#e7edf7!important;color:#0d1420!important;border-color:#e7edf7!important}
html[data-theme="dark"] .primary:hover{background:#f5f8fd!important;color:#0d1420!important}
html[data-theme="dark"] .danger{background:#3b0d15!important;color:#ff9aa5!important;border-color:#6b2333!important}
html[data-theme="dark"] .danger:hover{background:#4d1119!important;color:#ffb4b8!important}
html[data-theme="dark"] .emoji-button,
html[data-theme="dark"] .watch-toggle{background:#0d1420!important;color:#e7edf7!important;border-color:#263449!important}
html[data-theme="dark"] .watch-toggle.active{background:#1e3a5f!important;color:#93c5fd!important;border-color:#3b82f6!important}
html[data-theme="dark"] button[data-lang-toggle]{background:#0d1420!important;color:#e7edf7!important;border-color:#263449!important}
html[data-theme="dark"] button[data-lang-toggle].active-en{background:#1e3a5f!important;color:#bfdbfe!important;border-color:#60a5fa!important}
html[data-theme="dark"] .lang-fab{background:#141b28!important;color:#f4f7fb!important;border-color:#354159!important}
html[data-theme="dark"] #restartWebcam.restart-webcam-button{background:#e7edf7!important;color:#0d1420!important;border-color:#e7edf7!important}
html[data-theme="dark"] #restartWebcam.restart-webcam-button:hover{background:#f5f8fd!important}
html[data-theme="dark"] .admin-nav button{background:#0d1420!important;color:#e7edf7!important;border-color:#263449!important}
html[data-theme="dark"] .admin-nav button:hover,
html[data-theme="dark"] .admin-nav button.active{background:#16203a!important}
html[data-theme="dark"] .user-context-menu button,
html[data-theme="dark"] .staff-context-menu button,
html[data-theme="dark"] .staff-own-context-menu button{background:transparent!important}

/* Tekst: hard op koppen, labels en kleine tekstchips */
html[data-theme="dark"] h1,html[data-theme="dark"] h2,html[data-theme="dark"] h3,
html[data-theme="dark"] h4,html[data-theme="dark"] h5,html[data-theme="dark"] h6{color:#f8fbff!important}
html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .muted,
html[data-theme="dark"] small,
html[data-theme="dark"] .chat-char-counter,
html[data-theme="dark"] .settings-subtitle,
html[data-theme="dark"] .settings-accordion small,
html[data-theme="dark"] .brand-version,
html[data-theme="dark"] .footer-disclaimer{color:#8ea0b8!important}
html[data-theme="dark"] .starter-label,
html[data-theme="dark"] .starter-identity,
html[data-theme="dark"] .participants-head h3,
html[data-theme="dark"] .chat-heading h3,
html[data-theme="dark"] .panel-title,
html[data-theme="dark"] .starter-offline,
html[data-theme="dark"] .staff-no-webcam-notice,
html[data-theme="dark"] .visitor-empty,
html[data-theme="dark"] .watchers-empty,
html[data-theme="dark"] .msg{color:#cbd5e1}
html[data-theme="dark"] .msg a{color:#93c5fd!important}
html[data-theme="dark"] .brand{color:#e7edf7!important}
html[data-theme="dark"] .brand-version-link{color:#8ea0b8!important}
html[data-theme="dark"] a{color:#93c5fd}
html[data-theme="dark"] a:hover{color:#bfdbfe}
html[data-theme="dark"] .room-nav a{color:#cbd5e1}
html[data-theme="dark"] .room-nav a:hover{color:#f8fbff}
html[data-theme="dark"] .admin-cam-type{border-color:#394b66;color:#cbd5e1;background:#15203a}

/* 1.10.12 LICHTMODUS-LOBBYKAART: de kaart is één grote link, waardoor titel én
   deelnemerteller het lichtblauwe/linky linkblauw erven. In lichtmodus moeten
   de letters donker zijn zodat de kaart bij de lichte pagina past. */
html[data-theme="light"] .room-card .room-card-link{color:#172033}
html[data-theme="light"] .room-card .room-card-link:hover .room-meta strong{color:#0b1b33}
html[data-theme="light"] .room-card .room-participants{color:#5b6b80}
html[data-theme="light"] .room-card .room-meta .muted{color:#64748b}
/* Het LOBBY-label ligt OP de themafoto (donker in beide modi): licht met glow
   zodat het altijd leesbaar is, ook in lichtmodus. */
html[data-theme="light"] .preview .thumb-fallback{color:#f2f7ff;text-shadow:0 0 10px rgba(110,200,255,.85),0 0 26px rgba(110,200,255,.45),0 1px 6px rgba(6,12,26,.75)}