/* --- Light Mode Theme --- */

/* Asetetaan "työpöydän" väri html-elementille */
html.light-mode-html {
    background-color: #ede9f2; /* Headerin väri */
}

/* Asetetaan "paperin" väri body-elementille */
body.light-mode {
    background-color: #fefefe;
    color: #333; /* Oletustekstin väri */
} 

/* Headerin ja sen osien värit */
.light-mode #header {
    background-color: #ede9f2;
}

/* Varmista, että nämä säännöt ovat olemassa */

.light-mode .header-link {
    color: #333;
}
.light-mode .header-link:hover,
.light-mode .header-link.active {
    color: #333; /* Säilytetään sama väri, vain lihavointi muuttuu */
}



.light-mode #coordDisplay {
    background-color: #ede9f2; 
}
.light-mode #canvasId {
    border: 1px solid #ccc; 
    background-color: #fefefe;
}
.light-mode #canvasId:focus,
.light-mode #canvasId:hover {
    border-color: #333;
}
.light-mode #canvasSelection button {
    background-color: #fefefe;
    border: 1px solid #ccc;
}
.light-mode #canvasSelection button:hover {
    background-color: #fefefe;
    border-color: #333;
}
.light-mode #canvasSelection button:focus {
    background-color: #fefefe; 
    border-color: #333;
}

/* Valintojen ja fokuksen värit */
.light-mode .cell.highlighted {
    background-color: #d9dfe8;
}
.light-mode .highlighted-error {
    background-color: #ffdddd;
}
.light-mode .cell.focused {
    box-shadow: 7px 0px 0px 0px #9ab4db inset;
}

/* Linkkien ja alleviivausten värit */
.light-mode .cell.underline {
    border-bottom: 1px dotted currentColor;
}
.light-mode .cell.has-link {
    border-bottom: 1px dotted blue;
    color: blue;
}
.light-mode .cell.has-link:hover {
    border-bottom-color: transparent;
}

/* Kontekstivalikon värit */
.light-mode #customContextMenu {
    background: #fff; 
    border: 1px solid #ccc;
    color: #333;
}
.light-mode #customContextMenu li:hover {
    background-color: #e8f1ff;
    color: #000;
}
.light-mode .context-menu-separator {
    border-top-color: #e0e0e0;
}
.light-mode .submenu {
    background: #fff;
    border: 1px solid #ccc;
}

/* Tooltipin värit */
.light-mode .tooltip {
    background-color: #fefefe;
    color: #000;
    border: 1px solid #555;
}




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

.light-mode #genericPopup.guide-panel .modal-content {
    background-color: #fdfdfd;
    border-right: 1px solid #ddd;
    box-shadow: 4px 0px 10px rgba(0,0,0,0.05);
}

.light-mode #genericPopup.guide-panel #instructions {
    color: #333;
}

.light-mode #genericPopup.guide-panel h1,
.light-mode #genericPopup.guide-panel h2 {
    color: #333;
    border-bottom: 1px solid #ddd;
}

.light-mode #genericPopup.guide-panel a {
    color: #65299e;
}

.light-mode #genericPopup.guide-panel a:visited {
    color: #65299e;
}

.light-mode #genericPopup.guide-panel #instructions code {
    background-color: #eee;
    color: #333;
}

/* ==========================================================================
   LIGHT MODE: Etusivu
   ========================================================================== */

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

.light-mode .instructions-container > #instructions {
    background-color: #ffffff;
    color: #444;
    border: 2px solid #ddd;
}

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

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

.light-mode .instructions-container > #instructions a {
    color: #65299e;
}

.light-mode .instructions-container > #instructions a:visited {
    color: #65299e;
}

.light-mode .instructions-container > #instructions code {
    background-color: #eee;
    color: #333;
}