/* Yleiset tyylit */
body {
    font-family: 'Montserrat', sans-serif;
    background-color: #f0f2f5;
    color: #333;
    margin: 0;
    padding: 20px;
    overflow-x: hidden;
}

h1 {
    color: #1a1a1a;
    border-bottom: 2px solid #ddd;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

p {
    color: #555;
    line-height: 1.6;
}

.bold-text {
  font-weight: bold;
}

/* Uusi pää-kontaineri */
.input-container {
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
}

/* Excel-tyylinen syöttötaulukko */
.input-table {
    display: grid;
    grid-template-columns: 2fr 1fr 0.8fr 0.8fr 1.2fr; /* Sarakkeiden leveydet suhteellisesti */
    gap: 10px;
    padding: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #fafafa;
    margin-bottom: 20px;
    overflow-x: auto;
}

.input-table .header-item,
.input-table .data-item {
    padding: 8px;
    box-sizing: border-box;
}

.input-table .header-item {
    font-weight: bold;
    background-color: #e9ecef;
    border-bottom: 1px solid #ccc;
    text-align: left;
}

.input-table input[type="text"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}

.input-table input[type="text"]:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    outline: none;
}

/* Yhteinen nappityyli */
.nappi {
    padding: 12px 25px;
    font-size: 16px;
    font-weight: bold;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 20px;
    transition: background-color 0.3s ease;
}

/* Nappien variaatiot */
.laskuri-nappi {
    background-color: #007bff;
    margin-right: 10px
}

.tulosta-nappi {
    background-color: hsl(147, 80%, 22%); /* Vihreä-nappi */
}

.tulosta-nappi:hover {
    background-color: #80db8c;
}

.laskuri-nappi:hover {
    background-color: #0056b3;
}

.resetoi-nappi {
    background-color: #dc3545; /* Punainen reset-nappi */
}

.resetoi-nappi:hover {
    background-color: #c82333;
}

/* Tulos- ja virhetyylit */
.error-message {
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
}

.results-container {
    border: 1px solid #b3d7ff;
    padding: 20px;
    margin-bottom: 20px;
    background-color: #eaf7ed;
    border-radius: 8px;
}

.result-item {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #c0c0c0;
}

.result-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

strong {
    color: #0056b3;
}

.laskettu-teksti {
    font-weight: normal;
    color: #777;
    font-size: 0.9em;
}


/* Yleiset napin perusasetukset */
.plus-btn,
.minus-btn {
  /* Muotoilu: pieni, pyöristetty ja mukava painaa */
  padding: 8px 12px;
  font-size: 14px;
  font-weight: bold;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out; /* Animointi tekee käyttökokemuksesta sulavamman */
  margin-right: 5px; /* Pieni tila nappien väliin */
}

/* Lisää-nappi (sininen) */
.plus-btn {
  background-color: #3498db; /* Kirkas sininen */
  color: white;
}

/* Poista-nappi (punainen) */
.minus-btn {
  background-color: #e74c3c; /* Kirkas punainen */
  color: white;
}

/* Yksinkertaiset hover-efektit, jotka eivät vie tilaa */
.plus-btn:hover {
  background-color: #2980b9; /* Hieman tummempi sininen hover-tilassa */
}

.minus-btn:hover {
  background-color: #c0392b; /* Hieman tummempi punainen hover-tilassa */
}

/* Mobiilityylit (näille ei välttämättä tarvitse omaa media-kyselyä, koska yllä olevat toimivat) */
/* Lisää tämä olemassa olevaan @media print -lohkoosi */

/* Mobiilioptimointi ja responsiivisuus */

@media print {
    /* Piilota kaikki napit ja muut elementit, jotka eivät ole tarpeellisia tulostuksessa */
    .print-button-container,
    .print-button,
    .plus-btn,
    .minus-btn,
    .nappi,
    .navigation-buttons,
    .site-branding {
        display: none !important;
    }

      /* Varmista, että rivit ja solut menevät oikein tulosteessa */
    .input-table div {
        padding: 5px !important;
        border: 1px solid #ddd !important;
    }
    .rivi {
        display: flex;
        flex-direction: column; /* Rivit pinoontuvat pystysuunnassa */
    }

    .rivi input {
        margin-bottom: 0.65em; /* Lisää tilaa kenttien väliin */
    }

    .nappi {
        width: 100%;
    }
}



/* Mobiilioptimointi ja responsiivisuus */

@media (max-width: 768px) {
    body {
        padding: 10px;
    }

    .input-table {
        display: block !important; /* Taulukko muuttuu blokkimuotoon mobiilissa */
        width: 100% !important; /* Varmistaa, että taulukko vie koko leveysalan */
        overflow-x: auto; /* Lisää vierityspalkki, jos taulukko menee leveämmäksi */
        margin-bottom: 20px; /* Lisää tilaa taulukon alapuolelle */
    }

    .input-table .header-item,
    .input-table .data-item {
        display: inline-block; /* Sarakkeet rivitetään mobiilissa */
        width: 100%; /* Sarakkeet vievät koko leveysalan */
        box-sizing: border-box;
        padding: 10px;
    }

    .input-table .header-item {
        background-color: #e9ecef;
        font-weight: bold;
    }

    .input-table input[type="text"] {
        width: 100%; /* Varmistaa, että kenttä vie koko leveysalan */
    }

    /* Rivien ja kenttien välinen tila */
    .rivi input {
        margin-bottom: 1em; /* Lisää tilaa kenttien väliin */
    }

    .button-group {
        flex-direction: column; /* Nappiryhmä pinoontuu pystysuunnassa */
        gap: 10px;
    }

    .nappi {
        width: 100%; /* Nappien leveys koko ruudun leveydellä */
    }
}

/* Jos haluat pehmeämpää responsiivisuutta pienemmille näytöille, voit käyttää seuraavaa sääntöä */
@media (max-width: 480px) {
    .input-table {
        padding: 5px; /* Pienennä paddingia mobiililaitteilla */
    }

    .input-table .header-item {
        font-size: 0.85em; /* Pienennä fonttikokoa */
    }

    .input-table .data-item {
        font-size: 0.9em; /* Pienennä fonttikokoa */
    }
}

.ohjeet.piilotettu {
    display: none;
  }

  
button {
  padding: 12px 25px;
  font-size: 17px;
  background-color: #007acc; /* Yleinen sininen tausta */
  color: white;
  border: none; /* Ei oletuskehystä */
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease; /* transitioneihin voit palata myöhemmin */
  margin: 0 10px; /* Lisää hieman tilaa painikkeiden väliin */
}

button:hover {
  background-color: #005fa3; /* Yleinen tummempi sininen hoverissa */
}


/* MikaKalpaFaniNappi -painikkeiden tyyli (musta-keltainen) */
.MikaKalpaFaniNappi {
  /* Nämä ominaisuudet ylikirjoittavat yllä olevat 'button'-säännön, jos luokkaa käytetään */
  background-color: black; /* KalPa-musta tausta */
  color: yellow; /* KalPa-keltainen teksti */
  border: 2px solid yellow; /* Keltainen kehys, 2px paksu */
  /* padding, font-size, border-radius, cursor ja margin voivat periä yllä olevasta button-säännöstä, 
     jos ne ovat samat, tai voit määrittää ne uudelleen tähän, jos ne ovat erilaisia.
     Tässä esimerkissä ne säilyvät samoina kuin yleisessä button-säännössä, mutta voit lisätä ne. */
  
  /* Varmista, että siirtymät ovat tässä mukana, jos ne ovat erilaiset kuin yleiset */
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.MikaKalpaFaniNappi:hover {
  background-color: #333; /* Hieman vaaleampi musta hoverissa */
  color: white; /* Valkoinen teksti hoverissa */
  border-color: #eee; /* Vaaleampi keltainen/harmaa kehys hoverissa */

}

/* MikaMujuLogo - KalPa-henkinen tyyli otsikolle tai tekstille */
/* --- MikaMujunenLogo - KalPa-henkinen tyyli (YHDISTETTY) --- */
/* --- MikaMujunenLogo - KalPa-henkinen tyyli (YHDISTETTY JA OPTIMOITU LINKILLE) --- */
.MikaMujunenLogo {
  display: inline-block;
  padding: 2px 5px;
  background-color: transparent;
  color: black;
  border: 1px solid yellow; /* Alkuperäinen keltainen kehys */
  border-radius: 3px;
   font-family: 'Montserrat', sans-serif; /* Käytetään samaa fonttia kuin muualla */
  font-size: 0.7rem;
  font-weight: bold;
  text-transform: lowercase;/*pikku fontilla kivempi ja lempeäämpi */ 
  letter-spacing: 0.2px;
  box-shadow: 0 0 5px yellow,
              0 0 10px rgba(255, 255, 0, 0.3);
  text-decoration: none;
  transition: all 0.3s ease;
}

.MikaMujunenLogo:hover {
  background-color: rgba(255, 255, 0, 0.1);
  color: #333;
  border-color: #FFFF00; /* **Puhdas, kirkas keltainen reuna** */
  box-shadow:
    0 0 15px #FFFF00, /* **Voimakas, kirkas perushehku** */
    0 0 30px rgba(255, 255, 0, 0.9), /* **Intensiivisempi ja laajempi hehku** */
    0 0 60px rgba(255, 255, 0, 0.7), /* **Lisää "häikäisyä" laajemmalle alueelle** */
    0 0 100px rgba(255, 255, 0, 0.5); /* **Laaja, valoisa halo, joka muistuttaa auringon heijastusta** */
  transform: translateY(-1px);
}
.hurraa {
    font-weight: bold;
    background-color: #003580; /* Suomen sininen tausta */
    color: white; /* Valkoinen teksti */
    padding: 2px 6px;
    border-radius: 4px;
    animation: pulse 1.5s infinite;
    margin-left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.finland-flag {
  font-size: 1.2em;
  animation: pulse 1.5s infinite;
}

/* Sama pulse-animaatio kuin MikaMujunenLogossa */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}