/* ---- .dark-mode ---- */

/* general */

/* Uusi sääntö html-elementille */
.dark-mode-html {
    background-color: #141414;
}

.dark-mode {
    /* Tämä kohdistuu body-elementtiin */
    background-color: #141414;
    color: #ceced2;
}
.dark-mode #gridContainer {
    background-color: #1e1e1e; /*#383838 141414*/
    color: #bbb; /*ceced2 tekstin väri kanvaasilla*/
} 


/* ---- header ---- */

.dark-mode #header {
    background-color: #2c2c2c; /*32364e 2c2c2c*/
    border-bottom: 1px solid #333;
}
/* ---- #canvasId ---- */
.dark-mode #canvasId {
    background-color: #141414;   /* tumma tausta */
    color: #c3c3c3;             /* vaalea teksti */
    border: 1px solid #555;     /* hieman tummempi reunus */
}
.dark-mode #canvasId:focus,
.dark-mode #canvasId:hover {
    background-color: #141414;
    border-color: #888;         /* hover/focus-tilassa vaaleampi reunus */
}

/* ---- #canvasSelection ---- */
.dark-mode #canvasSelection button {
    background-color: #141414;  /* tumma tausta */
    color: #c3c3c3;             /* vaalea teksti */
    border: 1px solid #555;     /* hieman tummempi reunus */
    transition: border-color 0.3s, background-color 0.3s;
    outline: none;
    border-radius: 4px;
}
.dark-mode #canvasSelection button:hover {
    background-color: #141414;  /* hoverissa hieman vaaleampi */
    border-color: #888;
}
.dark-mode #canvasSelection button:focus {
    background-color: #141414;  /* focus-tilassa hieman eri sävy */
    border-color: #bbb;
}

/* ---- #coordDisplay ---- */
.dark-mode #coordDisplay {
    background-color: #2c2c2c;  /* tumma tausta */
    color: #c3c3c3;             /* vaalea teksti */
    border-radius: 4px;
    border: none; /* jos haluat erillisen reunuksen, laita esim. '1px solid #666;' */
}


/* ---- #customContextMenu ---- */

body.dark-mode #customContextMenu {
    background-color: #141414;  /* tumma tausta */
    color: #bbb;             /* vaalea teksti */
    border: 1px solid #555;
}

.dark-mode #customContextMenu li:hover {
    background-color: #2c2c2c;
    color: #bbb;  
}

/* ---- valitun alueen solujen taustaväri ---- */
 
.dark-mode .cell.highlighted {
    background-color: #32364e; /* cbd5e4 siniharmaa; ede9f2 vaalea violetti; dee9ff vaaleansininen */
}

/* Modal-ikkuna */

.dark-mode .modal-content {
    background-color: #141414;
    color: #c3c3c3;
    border: 1px solid #555;
} 

/* Sulkupainike */
.dark-mode .close-button {
    color: #c3c3c3;
    background-color: #141414;

}

.dark-mode .close-button:hover,
.dark-mode .close-button:focus {
    color: #c3c3c3;
    background-color: #141414;
}

.dark-mode .modal-content h2 {
    border-color: #141414;
    color: #c3c3c3;
    font-size: 14px; /* Pienempi fonttikoko kuin Canvas ID -kentässä */
}

.dark-mode .modal-content input[type="text"] {
    border: 1px solid #333; /* Sama reunus */
    background-color: #242424; /* Tumma tausta inputille */
    color: #c3c3c3;            /* Käyttäjän kirjoittama teksti inputin sisällä */
}

.dark-mode .modal-content input[type="text"]:focus {
    border: 1px solid #444; /* Sama reunus */
}

.dark-mode .modal-content button {
    background-color: #141414; /* Valkoinen taustaväri */
    border: 1px solid #555; /* Sama reunus kuin "Join Canvas" -painikkeessa */
}

.dark-mode .modal-content button:hover {
    border-color: #333; /* Tummanharmaa kehys hover-tilassa */
    background-color: #141414; /* Sama taustaväri kuin "Join Canvas" -painikkeessa */
    color: #c3c3c3; /* Tekstin väri hover-tilassa */
}

/* OK-painikkeen tyylit */
.dark-mode .modal-content button#linkSubmit {
    background-color: #141414; /* Sama taustaväri kuin modal-ikkunan tausta */
    color: #c3c3c3; /* Tekstin väri (musta) */
    border: 1px solid #555; /* Yhtenäinen reunus kuin input-kentillä */
}

.dark-mode .modal-content button#linkSubmit:hover {
    background-color: #32364e; /* Hover-tilan taustaväri */
    border: 1px solid #555; /* Yhtenäinen reunus kuin input-kentillä */
}

/* Tooltipin tyyli */
.dark-mode .tooltip {
    background-color: #141414;
    color: #c3c3d3;
    border: 1px solid #888; /* Yhtenäinen reunus kuin input-kentillä */
}

/* Linkin indikaattorin tyylit */
.dark-mode .cell.has-link {
    border-bottom: 1px dotted #8ab4f8;
    color: #8ab4f8;

}


/* geneerisen popupin tyylit (TESTI) */
 
.dark-mode #genericPopup .modal-content {
    /* Perustyylit */
    background-color: #141414;
    border: 1px solid #555; /*cbb667 888*/
}

/* Sama leveä tyyli kuin linkSubmit-painikkeella */
.dark-mode .modal-content button#genericPopupOkBtn {
    background-color: #141414; /* Sama taustaväri kuin modal-ikkunan tausta */
    color: #c3c3d3; /* Tekstin väri (musta) */
    border: 1px solid #555; /* Yhtenäinen reunus kuin input-kentillä */
}

/* Hover-tila, jos halutaan yhdenmukaisuus linkSubmitin kanssa */
.dark-mode .modal-content button#genericPopupOkBtn:hover {
    background-color: #141414; /* Hover-tilan taustaväri */
    border: 1px solid #555;
}

/* scrollbar */

.dark-mode {
    /* Firefox: scrollbar-width & scrollbar-color */
    scrollbar-width: thin;                      /* ohut skrollipalkki */
    scrollbar-color: #555 #1e1e1e;          /* thumb-väri #555, track-väri #1e1e1e */
}

/* WebKit-pohjaiset selaimet (Chrome, Safari, uudempi Edge, Opera) */

/* Koko scrollbarin tyyli */
.dark-mode ::-webkit-scrollbar {
    width: 8px;             /* haluttu leveys */
    height: 8px;            /* haluttu korkeus horizontal-scrollbarilla */
    background-color: #1e1e1e; /* trackin oletustausta */
}

/* Skrollauspalkin ura (track) */
.dark-mode ::-webkit-scrollbar-track {
    background-color: #1e1e1e;
}

/* Varsinainen “peukalo” (thumb), jota vedetään */
.dark-mode ::-webkit-scrollbar-thumb {
    background-color: #555; /* tummanharmaa */
    border-radius: 4px;     /* Pyöristys */
    border: 2px solid #1e1e1e; /* halutessasi pieni gap “raja” */
}

/* Hover/focus-tila peukalolle */
.dark-mode ::-webkit-scrollbar-thumb:hover {
    background-color: #777; /* vaaleampi hover-efekti */
}

/* Halutessasi myös corner-alue (jos molemmat scrollbarit ovat näkyvissä samanaikaisesti) */
.dark-mode ::-webkit-scrollbar-corner {
    background-color: #1e1e1e;
}


/* Dark mode -tilassa käytetään eri animaatiota */
.dark-mode .cell.focused {
    box-shadow: 7px 0px 0px 0px #5f6690 inset;
    animation: calmPulse 6s ease-in-out infinite;
    /* Huom: calmPulse-animaatio on sama molemmille teemoille,
       koska se muuttaa vain läpinäkyvyyttä, ei väriä.
       Väri tulee nyt suoraan tästä säännöstä. */
}

/* Uusi animaatio dark modelle */
@keyframes pulse-reconnecting-dark {
    0% {
        background-color: #FFA000; /* Tumma oranssi */
    }
    50% {
        background-color: #d68700; /* Vielä tummempi oranssi */
    }
    100% {
        background-color: #FFA000; /* Takaisin alkuperäiseen */
    }
}

/* Kun yhteyttä yritetään palauttaa */
.dark-mode .status-reconnecting {
    animation: pulse-reconnecting-dark 1.8s infinite ease-in-out;
}

/* Kun yhteydellä ei ole statusta */
.dark-mode .status-idle {
    background-color: #555555; /* Tummanharmaa */
}







/* --- Dark Mode - Tyylit headerin linkille --- */

/* Perustila */
.dark-mode .header-link {
    color: #ceced2; /* Oletusväri, sama kuin muu headerin teksti */
    border-bottom: 1px dotted transparent; /* Säilytetään hover-valmius */
    /*transition: color 0.2s, border-color 0.2s;*/
    text-decoration: none;
}

/* Hover-tila */
.dark-mode .header-link:hover {
    color: #ceced2; 
}

/* Aktiivinen tila (kun paneeli on auki) */
.dark-mode .header-link.active {
    /* color: #8ab4f8; Suosikkivärini, mutta sekoittuu tässä info-panel-linkkien väriin */
    color: #ceced2; 
    
    text-decoration: none; /* Poistetaan alleviivaus, kun linkki on aktiivinen */
}

.dark-mode .popup-as-instructions .modal-content {
    background-color: #1e1e1e;
    border-color: #444;
}
.dark-mode .popup-as-instructions h1,
.dark-mode .popup-as-instructions h2,
.dark-mode .popup-as-instructions p,
.dark-mode .popup-as-instructions ul {
    color: #ceced2;
}
.dark-mode .popup-as-instructions h2 {
    border-bottom-color: #444;
}
.dark-mode .popup-as-instructions code {
    background-color: #333;
    color: #eee;
}

/* Erillinen sääntö otsikoille, jotta voimme antaa niille omat tyylinsä */
.dark-mode .popup-info-panel .modal-content h1,
.dark-mode .popup-info-panel .modal-content h2 {
    color: #bbb; /* Asetetaan otsikot kirkkaan valkoisiksi, jotta ne erottuvat */
    border-bottom: 1px solid #444; /* Varmistetaan, että h2-otsikon alleviivaus on oikean värinen */
}

/* Dark mode tyylit ohjepaneelille */
.dark-mode .popup-info-panel .modal-content {
    background-color: #222327;
    /* font-family: Arial; */
    /* color: #ceced2; */
    /* border: none; Poistetaan reunaviiva kokonaan */
    /* Korvataan reunaviiva hienovaraisella, sisäänpäin suuntautuvalla varjolla */
    /*box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.4); */
    
    /* Lisätään tyylit vierityspalkille, jotka koskevat vain tätä paneelia */
    scrollbar-color: #4f5157 #222327; /* Firefox */
}

/* WebKit-selaimille (Chrome, Safari) omat vierityspalkin tyylit */
.dark-mode .popup-info-panel .modal-content::-webkit-scrollbar {
    width: 8px;
}

.dark-mode .popup-info-panel .modal-content::-webkit-scrollbar-track {
    background: #222327; /* Paneelin taustaväri */
}

.dark-mode .popup-info-panel .modal-content::-webkit-scrollbar-thumb {
    background-color: #4f5157;
    border-radius: 4px;
    border: 2px solid #222327;
}

.dark-mode .popup-info-panel h1,
.dark-mode .popup-info-panel h2,
.dark-mode .popup-info-panel p,
.dark-mode .popup-info-panel ul {
    color: #bbb;
}

.dark-mode .popup-info-panel code {
    background-color: #3f3f44;
}

/* --- Dark Mode -tyylit ohjepaneelin linkeille --- */

/* Kaikki linkit paneelin sisällä */
.dark-mode .popup-info-panel .modal-content a {
    color: #8ab4f8; /* Miellyttävä, Google-tyylinen vaaleansininen, erottuu hyvin */
    text-decoration: underline;
    transition: color 0.2s ease;
}

/* Linkin tila, kun hiiri on sen päällä */
.dark-mode .popup-info-panel .modal-content a:hover {
    color: #aecbfa; /* Hieman kirkkaampi sävy hover-efektiksi */
    text-decoration: none; /* Otetaan alleviivaus pois hoverilla, moderni tapa */
    
}

/* Vieraillun linkin väri (varmistaa, että se ei muutu tummaksi) */
.dark-mode .popup-info-panel .modal-content a:visited {
    color: #8ab4f8; /* Pidetään sama väri kuin vieraillemattomassa linkissä */
}

/* ERITTÄIN SPESIFINEN SÄÄNTÖ VAIN INFOPANEELIN REUNUKSELLE JA TAUSTAVÄRILLE*/
.dark-mode #genericPopup.popup-info-panel .modal-content {
    border: none; /* Nollataan kaikki reunat ensin */
    border-right: 1px solid #444; /* Asetetaan selkeästi näkyvä reuna testausta varten */
    border-radius: 0;
    color: #ceced2;
}

.dark-mode .highlighted-error {
    background-color: #5a2d2d; /* Tummanpunainen */
}



/* Dark mode -tyylit kontekstivalikon erotinviivalle */
.dark-mode .context-menu-separator {
    border-top-color: #444; /* Tummempi harmaa, joka erottuu juuri ja juuri */
}

/* ---- Dark Mode - Alavalikon tyylit (.submenu) ---- */

/* Nuoli-indikaattorin väri tummalla teemalla */
.dark-mode .submenu-arrow {
    color: #888;
}

/* Itse alavalikon ulkoasu */
.dark-mode .submenu {
    background-color: #1c1c1f; /* Hieman eri sävy kuin päävalikossa erottuvuuden vuoksi */
    border: 1px solid #4a4a4f;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4); /* Voimakkaampi varjo tummalla taustalla */
}

/*
   Päävalikon :hover-tilan parannus tummassa teemassa.
   Tämä varmistaa, että kohta, jolla on alavalikko, korostuu selkeästi,
   kun hiiri viedään sen päälle.
*/
.dark-mode #customContextMenu li.has-submenu:hover {
    background-color: #2c2c2c; /* 32364e */
    color: #bbb;
}

/* Varmistetaan, että nuoli saa myös korostusvärin */
.dark-mode #customContextMenu li.has-submenu:hover > .submenu-arrow {
    color: #ccc;
}



/* ==========================================================================
   DARK MODE: Guide-paneeli
   ========================================================================== */

.dark-mode #genericPopup.guide-panel .modal-content {
    background-color: #2a2a2e;
    border-right: 1px solid #444;
    box-shadow: 4px 0px 10px rgba(0,0,0,0.2);
}

.dark-mode #genericPopup.guide-panel #instructions {
    color: #bbb;
}

.dark-mode #genericPopup.guide-panel h1,
.dark-mode #genericPopup.guide-panel h2 {
    color: #ceced2;
    border-bottom: 1px solid #444;
}

.dark-mode #genericPopup.guide-panel a {
    color: #8ab4f8;
}

.dark-mode #genericPopup.guide-panel a:visited {
    color: #8ab4f8;
}

.dark-mode #genericPopup.guide-panel #instructions code {
    background-color: #3f3f44;
    color: #eee;
}

/* ==========================================================================
   DARK MODE: Etusivu
   ========================================================================== */

.dark-mode .instructions-container {
    background-color: transparent; /* Säilytetään peritty tausta */
}

.dark-mode .instructions-container > #instructions {
    background-color: #2c2c2c;
    color: #ceced2;
    border: 2px solid #444;
}

.dark-mode .instructions-container > #instructions h1 {
    color: #ceced2;
    font-size: 22px; /* Etusivulla isompi otsikko */
}

.dark-mode .instructions-container > #instructions h2 {
    color: #ceced2;
    font-size: 16px; /* Etusivulla normaalikokoinen väliotsikko */
}

.dark-mode .instructions-container > #instructions a {
    color: #8ab4f8;
}

.dark-mode .instructions-container > #instructions a:visited {
    color: #8ab4f8;
}

.dark-mode .instructions-container > #instructions code {
    background-color: #3f3f44;
    color: #eee;
}