/*
 * Digimark - pagina della call (client.html): correzioni per il tema "digimark chiaro".
 * Il CSS upstream scrive a mano molti testi bianchi (pensati per temi scuri): qui li riportiamo
 * scuri quando html[data-scheme="light"] (impostato da public/js/digimark-room.js).
 */

html[data-scheme='light'] {
    --dmr-ink: #1d1a22;
    --dmr-ink-2: #5f5869;
    --dmr-ink-3: #8a8294;
    --dmr-surface: #ffffff;
    --dmr-surface-2: #f4f0f7;
    --dmr-line: rgba(29, 26, 34, 0.12);
    --dmr-accent: #ee1b6b;
    --dmr-grad: linear-gradient(120deg, #ec5418 0%, #ee1b6b 100%);
    --border: 1px solid rgba(29, 26, 34, 0.12);
    color-scheme: light;
}

/* ---------- Testi scuri in pannelli, menu e popup ---------- */

html[data-scheme='light']
    :is(
        #mySettings,
        #msgerDraggable,
        #msgerCP,
        #captionDraggable,
        #whiteboard,
        .swal2-popup,
        .dropdown-content,
        #participantsActionsDropdown,
        #settingsExtraDropdown,
        #participantViewDropdown
    )
    :is(h1, h2, h3, h4, h5, h6, p, span, label, td, th, li, small, strong, b, em, a, div, button, summary, legend, i) {
    color: var(--dmr-ink);
}

html[data-scheme='light'] .settings-nav-label,
html[data-scheme='light'] #mySettings .settings-field-hint,
html[data-scheme='light'] #mySettings small,
html[data-scheme='light'] .swal2-html-container {
    color: var(--dmr-ink-2) !important;
}

html[data-scheme='light']
    :is(#mySettings, #msgerDraggable, #msgerCP, #captionDraggable, .swal2-popup)
    :is(input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']), select, textarea),
html[data-scheme='light'] .swal2-input,
html[data-scheme='light'] .swal2-select,
html[data-scheme='light'] .swal2-file,
html[data-scheme='light'] .swal2-textarea {
    color: var(--dmr-ink) !important;
    background-color: var(--dmr-surface) !important;
    border: 1px solid var(--dmr-line) !important;
    -webkit-text-fill-color: var(--dmr-ink) !important;
    caret-color: var(--dmr-accent) !important;
}

html[data-scheme='light'] :is(input, textarea)::placeholder {
    color: var(--dmr-ink-3) !important;
    -webkit-text-fill-color: var(--dmr-ink-3) !important;
}

/* ---------- Pulsanti di pannelli e menu: superfici chiare ---------- */

html[data-scheme='light'] .tab button,
html[data-scheme='light'] .tabcontent button,
html[data-scheme='light'] .dropdown-content button,
html[data-scheme='light'] .dropdown-content a {
    background: var(--dmr-surface) !important;
    border: 1px solid var(--dmr-line) !important;
    color: var(--dmr-ink) !important;
    box-shadow: none !important;
}

html[data-scheme='light'] .tab button::before {
    color: var(--dmr-ink-2);
}

html[data-scheme='light'] .tab button:hover,
html[data-scheme='light'] .tabcontent button:hover,
html[data-scheme='light'] .dropdown-content button:hover,
html[data-scheme='light'] .dropdown-content a:hover {
    background: var(--dmr-surface-2) !important;
}

html[data-scheme='light'] .tab button.active {
    background: var(--dmr-grad) !important;
    border-color: transparent !important;
}

html[data-scheme='light'] .tab button.active,
html[data-scheme='light'] .tab button.active *,
html[data-scheme='light'] .tab button.active::before {
    color: #fff !important;
}

/* ---------- Popup (SweetAlert) ---------- */

html[data-scheme='light'] .swal2-popup {
    border: 1px solid var(--dmr-line) !important;
    box-shadow: 0 30px 80px rgba(45, 20, 55, 0.18) !important;
}

html[data-scheme='light'] .swal2-title {
    color: var(--dmr-ink) !important;
}

html[data-scheme='light'] .swal2-popup .swal2-styled.swal2-confirm {
    background: var(--dmr-grad) !important;
    color: #fff !important;
}

html[data-scheme='light'] .swal2-popup .swal2-styled:is(.swal2-confirm, .swal2-deny, .swal2-cancel) {
    color: #fff !important;
}

/* ---------- Barre di scorrimento ---------- */

html[data-scheme='light'] ::-webkit-scrollbar-track {
    background: transparent !important;
}

html[data-scheme='light'] ::-webkit-scrollbar-thumb {
    background: rgba(29, 26, 34, 0.18) !important;
    border-radius: 8px;
}

html[data-scheme='light'] * {
    scrollbar-color: rgba(29, 26, 34, 0.22) transparent;
}

/* ---------- Caricamento iniziale (entrambi i temi: spinner nei colori Digimark) ---------- */

.spinner-ring {
    border-color: rgba(238, 27, 107, 0.15);
    border-top-color: #ee1b6b;
}

.spinner-ring::before {
    border-color: rgba(236, 84, 24, 0.12);
    border-top-color: #ec5418;
}

/* Logo Digimark orizzontale: non schiacciarlo in un quadrato */
.spinner-logo {
    width: 72px;
    height: auto;
}

html[data-scheme='light'] #loadingDiv {
    color: var(--dmr-ink);
    background: var(--dmr-surface);
    border: 1px solid var(--dmr-line);
}

html[data-scheme='light'] #loadingDiv p {
    color: var(--dmr-ink-2);
}

html[data-scheme='light'] .init-video-loader {
    background: rgba(255, 255, 255, 0.75);
}

/* ---------- Chat e sottotitoli: intestazioni e zona di scrittura ---------- */

html[data-scheme='light'] :is(.msger-private-header, .caption-header) {
    background: var(--dmr-surface-2) !important;
    border-bottom: 1px solid var(--dmr-line);
}

html[data-scheme='light'] :is(.msger-composer, .caption-inputarea) {
    background: var(--dmr-surface-2) !important;
    border-top: 1px solid var(--dmr-line);
}

html[data-scheme='light'] #shareMediaUrlInput,
html[data-scheme='light'] #videoUrlHeader button {
    background: var(--dmr-surface-2) !important;
    color: var(--dmr-ink) !important;
}

/* Campo "Filtra partecipanti": è già dentro un riquadro, niente secondo bordo */
html[data-scheme='light'] .msger-sidebar input:not([type='checkbox']) {
    background: transparent !important;
    border: 0 !important;
}

/* ---------- Intestazione chat ---------- */

html[data-scheme='light'] #msgerHeader {
    background: var(--dmr-surface-2) !important;
    border-bottom: 1px solid var(--dmr-line);
}

/* ---------- Pulsanti sopra i video (fissa, focus, istantanea, ...) ---------- */

html[data-scheme='light'] .navbar button {
    background: rgba(255, 255, 255, 0.9);
    color: var(--dmr-ink);
    border: 1px solid var(--dmr-line);
}

html[data-scheme='light'] .navbar button:hover {
    background: var(--dmr-grad) !important;
    color: #fff;
    border-color: transparent;
}

html[data-scheme='light'] .navbar button:hover i {
    color: #fff;
}

/* ---------- Menu a comparsa della barra in basso ---------- */

html[data-scheme='light'] #bottomButtons #settingsExtraMenu .device-menu-header.extra-menu-group,
html[data-scheme='light'] #bottomButtons #audioMenu .device-menu-header,
html[data-scheme='light'] #bottomButtons #videoMenu .device-menu-header,
html[data-scheme='light'] .device-menu-header {
    color: var(--dmr-ink-3) !important;
}

html[data-scheme='light'] #bottomButtons :is(.extra-menu-divider, .device-menu-divider) {
    background: var(--dmr-line) !important;
}

html[data-scheme='light'] .app-dropdown-menu {
    border: 1px solid var(--dmr-line);
    box-shadow: 0 20px 50px rgba(45, 20, 55, 0.16);
}

html[data-scheme='light'] .app-dropdown-action,
html[data-scheme='light'] .app-dropdown-action i {
    color: var(--dmr-ink);
}

html[data-scheme='light'] .app-dropdown-action:hover,
html[data-scheme='light'] #bottomButtons .dropdown-menu button:hover {
    background: rgba(238, 27, 107, 0.1) !important;
    color: var(--dmr-accent) !important;
}

html[data-scheme='light'] .app-dropdown-action:hover i,
html[data-scheme='light'] #bottomButtons .dropdown-menu button:hover i {
    color: var(--dmr-accent) !important;
}

/* ---------- Barra dei pulsanti in basso: hover ben visibile ---------- */

html[data-scheme='light'] #bottomButtons button:hover {
    /* tinta rosa su fondo pieno: sopra il video non deve diventare trasparente */
    background: linear-gradient(rgba(238, 27, 107, 0.12), rgba(238, 27, 107, 0.12)), var(--dmr-surface) !important;
    color: var(--dmr-accent);
}

html[data-scheme='light'] :is(.app-dropdown-menu, #bottomButtons .dropdown-menu, .navbar-dropdown-content) {
    background: var(--dmr-surface) !important;
}

/* ---------- Menu audio/video (dispositivi) e altri menu della barra in basso ---------- */

html[data-scheme='light'] #bottomButtons .dropdown-menu :is(button, a, span, label, i, div, p) {
    color: var(--dmr-ink);
}

html[data-scheme='light'] #bottomButtons .dropdown-menu button i,
html[data-scheme='light'] #bottomButtons .device-menu-header i {
    color: var(--dmr-ink-2) !important;
    opacity: 1 !important;
}

/* Pulsanti d'azione nei menu ("Test speaker", "Open Audio Settings", ...) */
html[data-scheme='light'] #bottomButtons .device-menu-action-btn {
    background: var(--dmr-surface-2) !important;
    border: 1px solid var(--dmr-line) !important;
    color: var(--dmr-ink) !important;
}

html[data-scheme='light'] #bottomButtons .device-menu-action-btn:hover {
    background: rgba(238, 27, 107, 0.1) !important;
    border-color: rgba(238, 27, 107, 0.3) !important;
}

html[data-scheme='light'] #bottomButtons .device-menu-action-btn :is(i, span) {
    color: inherit !important;
}

html[data-scheme='light'] #bottomButtons #participantViewMenu button.active {
    background: rgba(238, 27, 107, 0.1);
}

/* ---------- Menu a tendina sopra il video (Pin, Focus, PiP, Istantanea, ...) ---------- */

html[data-scheme='light'] .navbar-dropdown-content {
    border: 1px solid var(--dmr-line);
    box-shadow: 0 16px 40px rgba(45, 20, 55, 0.16);
}

html[data-scheme='light'] .navbar-dropdown-item,
html[data-scheme='light'] .navbar .navbar-dropdown-content .navbar-dropdown-item button,
html[data-scheme='light'] .navbar-dropdown-item :is(span, i) {
    color: var(--dmr-ink) !important;
}

html[data-scheme='light'] .navbar-dropdown-item:hover {
    background: rgba(238, 27, 107, 0.1);
}

html[data-scheme='light'] .navbar-dropdown-item:hover :is(span, i, button) {
    color: var(--dmr-accent) !important;
}

/* Cursori (volume, zoom, ...) nei colori Digimark, in entrambi i temi */
#bottomButtons input[type='range'],
.navbar input[type='range'],
#mySettings input[type='range'] {
    accent-color: #ee1b6b;
}

/* Pulsanti dei menu in basso (Disposizione, Partecipanti, ...): upstream li forza bianchi con due id */
html[data-scheme='light'] #bottomButtons .dropdown-menu button {
    color: var(--dmr-ink) !important;
}

html[data-scheme='light'] #bottomButtons .dropdown-menu button:hover,
html[data-scheme='light'] #bottomButtons .dropdown-menu button.active {
    background: rgba(238, 27, 107, 0.1) !important;
    color: var(--dmr-accent) !important;
}

html[data-scheme='light'] #bottomButtons .dropdown-menu button:is(:hover, .active) i {
    color: var(--dmr-accent) !important;
}

/* Il menu ⋮ del video viene spostato nel <body> (fuori da .navbar): icone = i pulsanti stessi */
html[data-scheme='light'] body .navbar-dropdown-content .navbar-dropdown-item button {
    color: var(--dmr-ink) !important;
    background: none !important;
}

html[data-scheme='light'] body .navbar-dropdown-content .navbar-dropdown-item:hover button {
    color: var(--dmr-accent) !important;
}