:root {
  --tausta: #f6f4ef;
  --pinta: #ffffff;
  --teksti: #1f2420;
  --himmea: #5d665f;
  --reuna: #dcd8cf;
  --korostus: #2f6b4f;
  --korostus-teksti: #ffffff;
  --ok: #2f7d4f;
  --varoitus: #a86a00;
  --virhe: #b3261e;
  --huomio: #3b5ea8;
  --palkki-tausta: #ebe7de;
  --varjo: 0 1px 2px rgb(0 0 0 / 6%), 0 2px 8px rgb(0 0 0 / 4%);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tausta: #151816;
    --pinta: #1e2320;
    --teksti: #e8ebe8;
    --himmea: #a1aaa4;
    --reuna: #343b36;
    --korostus: #6cbf95;
    --korostus-teksti: #0e1a13;
    --ok: #6cbf95;
    --varoitus: #e3a640;
    --virhe: #f08a80;
    --huomio: #8fb0f0;
    --palkki-tausta: #2b312d;
    --varjo: none;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --tausta: #151816;
  --pinta: #1e2320;
  --teksti: #e8ebe8;
  --himmea: #a1aaa4;
  --reuna: #343b36;
  --korostus: #6cbf95;
  --korostus-teksti: #0e1a13;
  --ok: #6cbf95;
  --varoitus: #e3a640;
  --virhe: #f08a80;
  --huomio: #8fb0f0;
  --palkki-tausta: #2b312d;
  --varjo: none;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--tausta);
  color: var(--teksti);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 0.5rem; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1rem; margin-top: 1.25rem; }

.sisalto { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.yla { padding: 1.5rem 0 1rem; border-bottom: 1px solid var(--reuna); margin-bottom: 1.5rem; }
.yla p { margin: 0; color: var(--himmea); max-width: 60ch; }
.ala { color: var(--himmea); font-size: 0.875rem; padding-bottom: 2rem; }
.himmea { color: var(--himmea); font-weight: normal; font-size: 0.875rem; }

.asettelu {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 800px) {
  .asettelu { grid-template-columns: minmax(0, 1fr); }
}

.paneeli {
  background: var(--pinta);
  border: 1px solid var(--reuna);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  box-shadow: var(--varjo);
  margin-bottom: 1.5rem;
  min-width: 0;
}

fieldset { border: 0; padding: 0; margin: 0 0 1.25rem; min-width: 0; }
legend { font-weight: 600; font-size: 1.05rem; margin-bottom: 0.5rem; }

label { display: block; margin-bottom: 0.6rem; font-size: 0.9rem; color: var(--himmea); }
label.valinta { display: flex; gap: 0.5rem; align-items: center; color: var(--teksti); }
.ostopaikat { margin-top: 0.75rem; }
.kentan-otsikko { margin: 0.5rem 0 0.25rem; color: var(--himmea); font-size: 0.875rem; }
.valintarivi { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.valintarivi label.valinta small { color: var(--himmea); }
label.rivi { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
label.rivi input[type="number"] { width: 4.5rem; }

input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="search"], input[type="date"], select {
  display: block;
  width: 100%;
  margin-top: 0.2rem;
  padding: 0.45rem 0.6rem;
  font: inherit;
  color: var(--teksti);
  background: var(--tausta);
  border: 1px solid var(--reuna);
  border-radius: 6px;
}

input[type="range"] { width: 100%; accent-color: var(--korostus); }

.liukuselite {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--himmea);
  margin: -0.2rem 0 0.8rem;
}
#painotusTeksti { color: var(--teksti); font-weight: 600; }

.ruudukko2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.75rem; }
.oma-analyysi { border-left: 3px solid var(--korostus); padding-left: 0.75rem; margin-bottom: 0.75rem; }

button {
  font: inherit;
  border-radius: 6px;
  padding: 0.55rem 1rem;
  cursor: pointer;
  border: 1px solid var(--korostus);
}
.ensisijainen { width: 100%; background: var(--korostus); color: var(--korostus-teksti); font-weight: 600; }
.toissijainen { background: transparent; color: var(--korostus); }
.poista { border: 0; background: transparent; color: var(--himmea); padding: 0.2rem 0.4rem; }
.poista:hover { color: var(--virhe); }

.vihje { font-size: 0.8rem; color: var(--himmea); margin: 0.25rem 0 0.75rem; }

.tarvelista { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.tarvelista strong { display: block; font-size: 1.15rem; }

.valilehdet { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.valilehdet button { background: var(--pinta); color: var(--teksti); border-color: var(--reuna); }
.valilehdet button[aria-selected="true"] { border-color: var(--korostus); color: var(--korostus); font-weight: 600; }

.suositusotsikko { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.suositusotsikko h2 { margin: 0; flex: 1 1 auto; }
.suunnitelmapalkki { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.suunnitelmapalkki p { margin: 0; flex: 1 1 16rem; }
.suunnitelmapalkki .hakuedistyminen, .suunnitelmapalkki .hakutiedot { flex-basis: 100%; order: 2; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.suunnitelmapalkki progress { flex: 1 1 12rem; max-width: 24rem; height: 0.8rem; }
.suunnitelmapalkki .vanhentunut { flex-basis: 100%; order: 3; padding: 0.5rem 0.75rem; border-left: 3px solid var(--varoitus); background: var(--pinta); }
.cap-suhde { margin: 0.5rem 0 0; font-size: 1.05rem; }
.cap-suhde .ok, .tarvelista .ok { color: var(--ok); }
.cap-suhde .ei-ok, .tarvelista .ei-ok { color: var(--virhe); }
.tarvelista li.korostus strong { color: var(--korostus); }
.suunnitelman-tallennus { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.75rem 0; }
.suunnitelman-tallennus .suunnitelmanimi { flex: 1 1 14rem; width: auto; }
select.vaihda { display: block; margin-top: 0.3rem; width: 100%; max-width: 22rem; padding: 0.2rem 0.4rem; font-size: 0.8rem; }
.linkkinappi { background: none; border: 0; padding: 0; color: var(--korostus); text-decoration: underline; cursor: pointer; font: inherit; }
.tunnisteet { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.tunniste {
  font-size: 0.75rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--palkki-tausta);
  color: var(--teksti);
}
.tunniste.korostettu { background: var(--korostus); color: var(--korostus-teksti); }

.perustelut { padding-left: 1.2rem; margin: 0.75rem 0; }
.varoitukset { list-style: none; padding: 0; margin: 0.75rem 0; }
.varoitukset li { padding: 0.35rem 0.6rem; border-left: 3px solid; margin-bottom: 0.3rem; font-size: 0.9rem; }
.varoitukset .virhe { border-color: var(--virhe); }
.varoitukset .varoitus { border-color: var(--varoitus); }
.varoitukset .huomio { border-color: var(--huomio); }

.taulukkokehys { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
th, td { text-align: left; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--reuna); vertical-align: middle; }
th { font-weight: 600; color: var(--himmea); font-size: 0.8rem; }
td.luku, th.luku { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tfoot td { font-weight: 600; border-bottom: 0; }
table.annos input { width: 5.5rem; display: inline-block; text-align: right; margin: 0; padding: 0.25rem 0.4rem; }
.rehunimi small { display: block; color: var(--himmea); }
table.annos td.rehunimi { min-width: 12rem; }
table.annos th, table.annos td.luku { white-space: nowrap; }

.merkki { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; margin-right: 0.3rem; }
.merkki.hyva { background: var(--ok); }
.merkki.kohtalainen { background: var(--varoitus); }
.merkki.heikko { background: var(--virhe); }

.palkki { position: relative; height: 0.6rem; background: var(--palkki-tausta); border-radius: 3px; min-width: 6rem; }
.palkki span { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--ok); max-width: 100%; }
.palkki .tavoite { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--teksti); left: calc(100% / 1.5); }
tr.puute .palkki span { background: var(--virhe); }
tr.ylimaara .palkki span { background: var(--varoitus); }

.lisaa-rehu { display: flex; gap: 0.5rem; margin-top: 0.75rem; flex-wrap: wrap; }
.lisaa-rehu select { flex: 1 1 200px; margin: 0; }
.lisaa-rehu .lisaa-haku { flex: 1 1 100%; margin: 0; }

.korvaavat h3 { margin-top: 1.25rem; }
.korvaavat ul { padding-left: 1.2rem; margin: 0.25rem 0 0.75rem; font-size: 0.9rem; }

details summary { cursor: pointer; display: flex; gap: 0.75rem; align-items: baseline; }
details summary h2 { display: inline; margin: 0; }
.suodattimet { display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 1rem 0; }
.suodattimet input { flex: 2 1 240px; margin: 0; }
.suodattimet select { flex: 1 1 160px; margin: 0; }

.tyhja { color: var(--himmea); }

@media print {
  body { background: #fff; color: #000; }
  .lomake, .yla p, #tietokanta, .valilehdet, .lisaa-rehu, .tulosta, .poista, .ala, .suunnitelmapalkki, .suunnitelman-tallennus, select.vaihda { display: none !important; }
  .asettelu { display: block; }
  .paneeli { box-shadow: none; border: 0; padding: 0; }
  .suositus:not(.aktiivinen) { display: none; }
  table.annos input { border: 0; }
}

.tulokset { min-width: 0; }

/* Omat rehuanalyysit */
.napit { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-bottom: 0.75rem; }
button.pieni, .pieni { padding: 0.3rem 0.7rem; font-size: 0.85rem; }
.tiedostonappi { display: inline-block; cursor: pointer; margin: 0; border: 1px solid var(--korostus); border-radius: 6px; color: var(--korostus); }
.omat-hallinta summary { font-size: 0.85rem; color: var(--himmea); margin-bottom: 0.5rem; }
.oma-analyysi { font-size: 0.85rem; }
.oma-analyysi p { margin: 0 0 0.25rem; }

dialog {
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 1.25rem;
  border: 1px solid var(--reuna);
  border-radius: 10px;
  background: var(--pinta);
  color: var(--teksti);
}
dialog::backdrop { background: rgb(0 0 0 / 45%); }
dialog .rivi2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.palautus { margin: 0.25rem 0; }
#rehutaulukko small.oma-hinta { display: block; color: var(--korostus); }
dialog textarea {
  display: block;
  width: 100%;
  margin: 0.25rem 0 0.5rem;
  padding: 0.45rem 0.6rem;
  font: inherit;
  font-size: 0.85rem;
  color: var(--teksti);
  background: var(--tausta);
  border: 1px solid var(--reuna);
  border-radius: 6px;
}
dialog .liita { margin-bottom: 1rem; }
dialog .liita summary { font-weight: 600; margin-bottom: 0.4rem; }
.ruudukko2 .levea { grid-column: 1 / -1; }
.virheteksti { color: var(--virhe); font-size: 0.9rem; margin: 0.5rem 0; }
.virheteksti:empty { display: none; }
.dialogin-napit { margin: 1rem 0 0; }
.tayte { flex: 1 1 auto; }
.ensisijainen.kapea { width: auto; }
.poista-nappi { color: var(--virhe); border-color: var(--virhe); }
.arvio-merkki { color: var(--varoitus); font-weight: 600; }

@media (max-width: 480px) {
  .ruudukko2 { grid-template-columns: minmax(0, 1fr); }
}

/* Tili ja omat rehut */
.ylarivi { display: flex; gap: 1rem; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.tili { display: flex; gap: 0.5rem; align-items: center; font-size: 0.9rem; }
.tili strong { font-weight: 600; }
.omat-lista { list-style: none; padding: 0; margin: 0 0 0.5rem; font-size: 0.9rem; }
.omat-lista li { display: flex; gap: 0.5rem; align-items: center; justify-content: space-between; padding: 0.3rem 0; border-bottom: 1px solid var(--reuna); }
.omat-lista li:last-child { border-bottom: 0; }
.omat-lista small { display: block; color: var(--himmea); }
.omat-lista button { flex: none; }
#kirjautumisDialogi { width: min(420px, calc(100vw - 32px)); }
[hidden] { display: none !important; }

/* Suosikit ja varasto */
.hakukentta { position: relative; margin-bottom: 0.5rem; }
.hakukentta input { margin: 0; }
.ehdotukset {
  position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 2px);
  list-style: none; margin: 0; padding: 0.25rem 0;
  background: var(--pinta); border: 1px solid var(--reuna); border-radius: 6px;
  box-shadow: 0 4px 16px rgb(0 0 0 / 12%); max-height: 18rem; overflow-y: auto; font-size: 0.9rem;
}
.ehdotukset li { padding: 0.35rem 0.6rem; cursor: pointer; }
.ehdotukset li small { display: block; color: var(--himmea); }
.ehdotukset li[aria-selected="true"], .ehdotukset li:hover { background: var(--palkki-tausta); }
.ehdotukset li[aria-disabled="true"] { color: var(--himmea); cursor: default; }
.ehdotukset mark { background: none; color: inherit; font-weight: 700; }
.suosikkilista label.valinta { margin: 0; font-size: 0.8rem; white-space: nowrap; }
.suosikkilista .toiminnot { display: flex; gap: 0.25rem; align-items: center; flex: none; }
.tahti { color: var(--varoitus); }

/* Hevoset */
.hevoskuva { display: flex; gap: 0.75rem; align-items: center; margin-bottom: 0.25rem; }
.hevoskuva img, .kuvapaikka { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid var(--reuna); }
.kuvapaikka { display: grid; place-items: center; font-size: 0.7rem; color: var(--himmea); background: var(--tausta); }
.hevoskuva .napit { margin: 0; flex-direction: column; align-items: flex-start; }
.tarveotsikko { display: flex; gap: 0.75rem; align-items: center; margin-bottom: 0.5rem; }
.tarveotsikko img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 1px solid var(--reuna); }
.tarveotsikko h2, .tarveotsikko p { margin: 0; }
output.ika { display: block; margin-top: 0.2rem; padding: 0.45rem 0; color: var(--teksti); font-weight: 600; }
.hevosnapit { margin: 0.75rem 0 0; }
.muutettu #tallennaHevonen { background: var(--korostus); color: var(--korostus-teksti); }
button:disabled { opacity: 0.6; cursor: default; }
option.ei-sallittu { color: var(--himmea); }
.pikavalinnat { margin-top: -0.25rem; }
.tarvelista .erittely { display: block; font-size: 0.75rem; }

/* Vältettävät raaka-aineet */
.sirut { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.2rem 0 0.4rem; }
.sirut:empty { display: none; }
.siru { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.1rem 0.2rem 0.1rem 0.6rem; border-radius: 999px; background: var(--palkki-tausta); font-size: 0.85rem; }
.siru button { border: 0; background: transparent; padding: 0 0.3rem; color: var(--himmea); }
.hakurivi { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }
.hakurivi input { margin: 0; flex: 1 1 auto; }
textarea[name="ainesosat"] { display: block; width: 100%; margin-top: 0.2rem; padding: 0.45rem 0.6rem; font: inherit; color: var(--teksti); background: var(--tausta); border: 1px solid var(--reuna); border-radius: 6px; }

/* Rehutietokanta: ryhmäotsikot ja rehun kaikki arvot */
#rehutaulukko tr.ryhmaotsikko th { text-align: left; padding-top: 1rem; font-size: 1rem; border-bottom: 2px solid var(--reuna); }
#rehutaulukko .pieni-teksti { font-size: 0.8rem; margin-top: 0.2rem; }
#rehutaulukko tr.arvorivi td { background: var(--pinta); }
.rehunarvot p { margin: 0.25rem 0; font-size: 0.85rem; }
.rehunarvot ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.15rem 1.25rem; margin: 0.25rem 0 0.5rem; padding: 0; list-style: none; font-size: 0.85rem; }
.rehunarvot li { display: flex; justify-content: space-between; gap: 0.5rem; border-bottom: 1px dotted var(--reuna); }
.rehunarvot ul.arvioidut li strong { font-weight: normal; color: var(--himmea); }
table.annos tfoot small { display: block; font-weight: normal; white-space: nowrap; }
.lahteet-nappi { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; white-space: nowrap; }
.lahteet-nappi:hover, .lahteet-nappi:focus-visible { text-decoration: underline; }
.lahteet-nappi span { font-size: 0.75em; color: var(--himmea); }
table.tasapaino tr.lahteet td { background: var(--pinta); font-size: 0.9em; padding: 0.4rem 0.75rem 0.6rem; }
table.tasapaino tr.lahteet ul { margin: 0.25rem 0 0; padding-left: 1.2rem; }
table.tasapaino tr.lahteet p { margin: 0.25rem 0 0; }

/* Etusivu kirjautumattomalle käyttäjälle: muu sivu piilossa. */
body.kirjautumaton > :not(#kirjautumissivu):not(dialog):not(script) { display: none !important; }
.kirjautumissivu { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.kirjautumiskortti { width: 100%; max-width: 24rem; }
.kirjautumiskortti form { display: grid; gap: 0.75rem; }
.kirjautumiskortti h1 { margin-top: 0; }
.kirjautumiskortti h2 { font-size: 1.1rem; margin: 0; }