/* ============================================
   Momentix-teema: perusmuuttujat.
   Dark = Tyyli/index.html, Light = Tyyli/styles.css
   Oletus on tumma./generated-lisä: värikorit resurssit/css/varit.css
   ============================================ */

:root {
    --tausta: #050507;
    --tausta_gradientti: linear-gradient(135deg, #050507 0%, #0d0d12 40%, #121218 70%, #17171f 100%);
    --tausta_hehku:
        radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.14) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.10) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(239, 68, 68, 0.06) 0%, transparent 50%);

    --teksti: #e4e4e7;
    --otsikko_gradientti: linear-gradient(135deg, #fff 0%, #dbeafe 50%, #bfdbfe 100%);
    /* Brändiotsikko (MomentiX.net): valkoinen teksti, punainen X.
       samat värit kuin Tyyli/index.html .brand-logossa. */
    --brandy_vari: #ffffff;
    --brandy_x_vari: #ef4444;

    --kortti_tausta: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);
    --kortti_kehys: rgba(255,255,255,0.10);
    --kortti_varjo: 0 8px 32px rgba(0,0,0,0.5);

    --paneeeli_tausta: linear-gradient(180deg, #1a1a1f 0%, #111114 100%);
    --kentta_tausta: linear-gradient(135deg, #0f0f12 0%, #0a0a0d 100%);
    --kentta_varjo: inset 0 2px 8px rgba(0,0,0,0.4);

    --scrollbar_thumb: rgba(255,255,255,0.25);

    --teema_nappi_tausta: linear-gradient(135deg, #2d2d33 0%, #27272a 100%);
    --teema_nappi_hover: linear-gradient(135deg, #3f3f46 0%, #37373d 100%);
    --teema_ikoni_vari: #fbbf24;

    --valinta_varjo: 0 0 0 3px rgba(59,130,246,0.2);
    --merkka_varjo: 0 4px 15px rgba(0,0,0,0.4);
}

[data-teema="vaalea"] {
    /* Vaalea teema: selkeä musta-valkoinen, ei vihreää eikä hehkua. */
    --tausta: #ffffff;
    /* Tasainen vaaleanharmaa pohja, jolla valkoiset kortit erottuvat. */
    --tausta_gradientti: #f4f4f5;
    --tausta_hehku: none;

    --teksti: #111111;
    --otsikko_gradientti: linear-gradient(135deg, #000000 0%, #1f2937 100%);
    /* Vaaleassa teemassa brändi on musta teksti + punainen X.
       X käyttää teeman vaara-väriä, jotta kontrasti valkoisella pysyy. */
    --brandy_vari: #111111;
    --brandy_x_vari: #b91c1c;

    --kortti_tausta: linear-gradient(135deg, #ffffff 0%, #fbfbfb 100%);
    --kortti_kehys: #b5b5b5;
    --kortti_varjo: 0 1px 3px rgba(0,0,0,0.12);

    --paneeeli_tausta: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
    --kentta_tausta: #ffffff;
    --kentta_varjo: inset 0 1px 3px rgba(0,0,0,0.08);

    --scrollbar_thumb: rgba(0,0,0,0.3);

    --teema_nappi_tausta: linear-gradient(135deg, #ffffff 0%, #f1f3f4 100%);
    --teema_nappi_hover: linear-gradient(135deg, #f1f3f4 0%, #e6e8ea 100%);
    --teema_ikoni_vari: #111111;

    --valinta_varjo: 0 0 0 3px rgba(17,17,17,0.22);
    --merkka_varjo: 0 2px 8px rgba(0,0,0,0.1);
}

/* Teemanvaihtonappi: otsikko_alueen vasen reuna */
.teema_nappi {
    position: absolute;
    top: 20px;
    left: 20px;    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 14px;
    border: 2px solid var(--kortti_kehys);
    background: var(--teema_nappi_tausta);
    color: var(--teksti);
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(15px);
}

.teema_nappi:hover {
    background: var(--teema_nappi_hover);
    transform: translateY(-2px);
    box-shadow: var(--merkka_varjo);
    border-color: var(--aks_5);
}

/* Kirjautumissivu: nappi kortin vasemmassa yläkulmassa, pelkkä ikoni */
.teema_nappi_kortissa {
    top: 12px;
    left: 12px;
    padding: 8px 10px;
    border-radius: 12px;
}

.teema_nappi svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--teema_ikoni_vari);
}

/* Näytä vain aktiivisen teeman ikoni ja teksti */
.teema_nappi .aurinko_ikoni,
.teema_nappi .teema_teksti_tumma { display: none; }
.teema_nappi .uu_kuu_ikoni,
.teema_nappi .teema_teksti_vaalea { display: block; }

[data-teema="vaalea"] .teema_nappi .aurinko_ikoni,
[data-teema="vaalea"] .teema_nappi .teema_teksti_tumma { display: block; }
[data-teema="vaalea"] .teema_nappi .uu_kuu_ikoni,
[data-teema="vaalea"] .teema_nappi .teema_teksti_vaalea { display: none; }

@media (max-width: 768px) {
    .teema_nappi {
        position: static;
        order: 3;
        margin-top: 10px;
        min-width: 138px;
        justify-content: center;
    }

    /* Kirjautumissivulla nappi pysyy kortin kulmassa kapeallakin näytöllä. */
    .teema_nappi_kortissa {
        position: absolute;
        min-width: 0;
        margin-top: 0;
    }
}

/* SVG-ikoni: perusasetukset. Kokoa säädellään käyttökohtaisesti. */
.ic {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.125em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

/* Live-tilan piste (korvaa 🔴-emojin). */
.live_piste {
    display: inline-block;
    width: 0.6em;
    height: 0.6em;
    border-radius: 50%;
    background: var(--vaara_teksti);
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
    margin-right: 0.35em;
    animation: live_piste_syke 2s ease-out infinite;
}

@keyframes live_piste_syke {
    0%, 100% { box-shadow: 0 0 6px rgba(239, 68, 68, 0.5); }
    50% { box-shadow: 0 0 14px rgba(239, 68, 68, 0.9); }
}

/* Offline-tilan piste (korvaa ⚫-emojin). */
.offline_piste {
    display: inline-block;
    width: 0.6em;
    height: 0.6em;
    border-radius: 50%;
    background: var(--teksti_5);
    margin-right: 0.35em;
}

/* ============================================================
   VAALEA TEEMA: siisti musta-valkoinen.
   Sivun pohja vaaleanharmaa, kortit ja palkit valkoisia ohuella
   harmaalla reunuksella ja kevyellä varjolla. Napit valkoisia,
   musta teksti. Ei gradientteja, lasiefektiä eikä hehkua.
   Lohko on tiedoston lopussa ja käyttää [data-teema]-alkua,
   jotta se voittaa sivujen <style>-lohkoissa olevat perussäännöt.
   HUOM: käytä `background`-lyhennettä, ei `background-color`:ia,
   muuten sivun oma gradientti jää näkyviin värin päälle.
   ============================================================ */
[data-teema="vaalea"] {
    --vaalea_pinta: #ffffff;
    --vaalea_pinta_2: #fafafa;
    --vaalea_hover: #f4f4f5;
    --vaalea_reunus: #e4e4e7;
    --vaalea_nappi_reunus: #d4d4d8;
    --vaalea_nappi_reunus_hover: #a1a1aa;
    --vaalea_varjo: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.06);
    --vaalea_varjo_iso: 0 4px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06);
}

/* Napit: valkoinen pohja, ohut harmaa reunus, musta teksti. */
[data-teema="vaalea"] .nav_nappi,
[data-teema="vaalea"] .kirjaudu_ulos_nappi,
[data-teema="vaalea"] .koko_ruutu_tila_nappi,
[data-teema="vaalea"] .teema_nappi,
[data-teema="vaalea"] .modal_nappi,
[data-teema="vaalea"] .preset_nappi,
[data-teema="vaalea"] .preset_toiminto_nappi,
[data-teema="vaalea"] .zoom_nappi,
[data-teema="vaalea"] .joystick_nappi,
[data-teema="vaalea"] .sivu_nappi,
[data-teema="vaalea"] .ohjaimen_nappi,
[data-teema="vaalea"] .takaisin_nappi,
[data-teema="vaalea"] .tilasto_kohde {
    background: var(--vaalea_pinta);
    border: 1px solid var(--vaalea_nappi_reunus);
    color: #111111;
    box-shadow: var(--vaalea_varjo);
    backdrop-filter: none;
    text-shadow: none;
}

/* Hover: pohja harmaantuu hieman, reunus tummuu. */
[data-teema="vaalea"] .nav_nappi:hover,
[data-teema="vaalea"] .kirjaudu_ulos_nappi:hover,
[data-teema="vaalea"] .koko_ruutu_tila_nappi:hover,
[data-teema="vaalea"] .teema_nappi:hover,
[data-teema="vaalea"] .modal_nappi:hover,
[data-teema="vaalea"] .preset_nappi:hover,
[data-teema="vaalea"] .preset_toiminto_nappi:hover:not(:disabled),
[data-teema="vaalea"] .zoom_nappi:hover,
[data-teema="vaalea"] .zoom_nappi:active,
[data-teema="vaalea"] .zoom_nappi.active,
[data-teema="vaalea"] .joystick_nappi:hover,
[data-teema="vaalea"] .joystick_nappi:active,
[data-teema="vaalea"] .joystick_nappi.active,
[data-teema="vaalea"] .sivu_nappi:hover,
[data-teema="vaalea"] .ohjaimen_nappi:hover,
[data-teema="vaalea"] .ohjaimen_nappi:focus,
[data-teema="vaalea"] .takaisin_nappi:hover {
    background: var(--vaalea_hover);
    border-color: var(--vaalea_nappi_reunus_hover);
    color: #111111;
    box-shadow: var(--vaalea_varjo);
    transform: none;
}

/* Aktiivinen valinta (sivunumero, Valitse-tila, preset): musta täyttö. */
[data-teema="vaalea"] .sivu_nappi.active,
[data-teema="vaalea"] .ohjaimen_nappi.active,
[data-teema="vaalea"] .preset_nappi.valittu {
    background: #111111;
    border-color: #111111;
    color: #ffffff !important;
    box-shadow: none;
    transform: none;
}

/* Kirjaudu ulos: punainen teksti erottaa sen muista napeista. */
[data-teema="vaalea"] .kirjaudu_ulos_nappi,
[data-teema="vaalea"] .kirjaudu_ulos_nappi:hover {
    color: #b91c1c;
}

/* Pääpainike (Kirjaudu sisään): musta täyttö, valkoinen teksti. */
[data-teema="vaalea"] .kirjaudu_nappi {
    background: #111111;
    border: 1px solid #111111;
    color: #ffffff;
    box-shadow: var(--vaalea_varjo);
    backdrop-filter: none;
}

[data-teema="vaalea"] .kirjaudu_nappi:hover {
    background: #27272a;
    border-color: #27272a;
    box-shadow: var(--vaalea_varjo_iso);
    transform: none;
}

/* Hätäpysäytys pysyy punaisena myös vaaleassa teemassa. */
[data-teema="vaalea"] .hatapysaytys_nappi {
    background: #ffffff;
    border: 1px solid #b91c1c;
    color: #b91c1c;
    box-shadow: var(--vaalea_varjo);
}

[data-teema="vaalea"] .hatapysaytys_nappi:hover:not(:disabled),
[data-teema="vaalea"] .hatapysaytys_nappi:active:not(:disabled) {
    background: #fef2f2;
    border-color: #991b1b;
    color: #991b1b;
    transform: none;
}

[data-teema="vaalea"] .hatapysaytys_nappi.onnistui {
    background: #ffffff;
    border-color: #007a4a;
    color: #007a4a;
}

/* Otsikkopalkki: valkoinen, ohut reunus (reunuksen leveys sivun omasta). */
[data-teema="vaalea"] .otsikko_alue {
    background: var(--vaalea_pinta);
    border-color: var(--vaalea_reunus);
    box-shadow: var(--vaalea_varjo);
    backdrop-filter: none;
}

/* Kortit ja lohkot: valkoinen pinta, ohut harmaa reunus. */
[data-teema="vaalea"] .kamera_kortti,
[data-teema="vaalea"] .kirjautumis_sailys,
[data-teema="vaalea"] .modal_sisalto,
[data-teema="vaalea"] .sivutus {
    background: var(--vaalea_pinta);
    border: 1px solid var(--vaalea_reunus);
    box-shadow: var(--vaalea_varjo);
    backdrop-filter: none;
}

[data-teema="vaalea"] .kirjautumis_sailys {
    box-shadow: var(--vaalea_varjo_iso);
}

[data-teema="vaalea"] .kamera_kortti:hover {
    border-color: var(--vaalea_reunus);
    box-shadow: var(--vaalea_varjo_iso);
    transform: none;
}

/* PTZ-ohjaimet ja niiden alalohkot: hieman harmaampi pinta kortin sisällä. */
[data-teema="vaalea"] .ptz_ohjaimet,
[data-teema="vaalea"] .nopeus_alue,
[data-teema="vaalea"] .hatapysaytys_alue,
[data-teema="vaalea"] .preset_alue {
    background: var(--vaalea_pinta_2);
    border: 1px solid var(--vaalea_reunus);
    box-shadow: none;
    backdrop-filter: none;
}

/* Ei väritettyä hehkukerrosta korttien alla. */
[data-teema="vaalea"] .kamera_kortti::before,
[data-teema="vaalea"] .kirjautumis_sailys::before {
    background: none;
}

[data-teema="vaalea"] .kamera_otsikko_alue {
    background: var(--vaalea_pinta_2);
    backdrop-filter: none;
    border-bottom: 1px solid var(--vaalea_reunus);
}

[data-teema="vaalea"] .kamera_valinta {
    background: var(--vaalea_pinta_2);
    border: 1px solid var(--vaalea_reunus);
}

[data-teema="vaalea"] .kamera_valinta:hover {
    background: var(--vaalea_hover);
}

/* Kentät ja pienet merkit. */
[data-teema="vaalea"] .nopeus_arvo,
[data-teema="vaalea"] .kamera_tila,
[data-teema="vaalea"] .kirjautumis_lahde,
[data-teema="vaalea"] .preset_nimi_kentta,
[data-teema="vaalea"] .lomake_ryhma input {
    background: #ffffff;
    border: 1px solid var(--vaalea_nappi_reunus);
    color: #111111;
    backdrop-filter: none;
}

[data-teema="vaalea"] .kamera_tila.online {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #007a4a;
}

[data-teema="vaalea"] .tila_merkki.online {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #007a4a;
    box-shadow: none;
    backdrop-filter: none;
}

[data-teema="vaalea"] .kamera_tila.offline {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
}

[data-teema="vaalea"] .lomake_ryhma input:focus,
[data-teema="vaalea"] .preset_nimi_kentta:focus {
    border-color: #111111;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.1);
}

/* Live-kuvan videoalue: vaaleanharmaa pohja, jotta offline/lataus-tila
   erottuu valkoisesta kortista. */
[data-teema="vaalea"] .video_sailys {
    background: var(--vaalea_hover);
    border: 1px solid var(--vaalea_reunus);
    box-shadow: none;
}

[data-teema="vaalea"] .video_peitto {
    background: var(--vaalea_hover);
    backdrop-filter: none;
    color: #111111;
}

[data-teema="vaalea"] .lataa_teksti {
    background: #ffffff;
    border: 1px solid var(--vaalea_reunus);
    color: #111111;
    box-shadow: var(--vaalea_varjo);
    backdrop-filter: none;
}

/* Videon päällä olevat napit pysyvät tummina, koska video on tumma. */
[data-teema="vaalea"] .koko_naytto_nappi {
    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;
}

[data-teema="vaalea"] .koko_naytto_nappi:hover {
    background: rgba(0, 0, 0, 0.75);
}

/* Virheilmoitus pysyy punaisena molemmissa teemoissa. */
[data-teema="vaalea"] .virhe_teksti {
    background: #ffffff;
    border: 1px solid #b91c1c;
    color: #b91c1c;
}

[data-teema="vaalea"] .teema_nappi svg {
    color: #111111;
}

/* .ohjaimen_nappi käyttää !importantia ja selectin nuoli on valkoinen
   SVG-kuva, joten ne pitää ottaa mukaan erikseen. Nuoli vain selecteille,
   ei esim. Valitse-napille. */
[data-teema="vaalea"] .ohjaimen_nappi {
    color: #111111 !important;
}

[data-teema="vaalea"] select.ohjaimen_nappi,
[data-teema="vaalea"] select.ohjaimen_nappi:hover,
[data-teema="vaalea"] select.ohjaimen_nappi:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 12 8'%3E%3Cpath fill='%23111111' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 10px;
}

[data-teema="vaalea"] .koko_ruutu_kamera_nimi {
    text-shadow: none;
}

[data-teema="vaalea"] .modal_nappi.peruuta {
    background: #ffffff;
    border-color: var(--vaalea_nappi_reunus);
    color: #111111;
}

[data-teema="vaalea"] .modal_nappi.peruuta:hover {
    background: var(--vaalea_hover);
}