/* Työvuorot – tyylit. Mobiili ensin, sama koodi toimii työpöydällä. */

/* Vinhon brändivärit (VINHO ILME JA KUVAMAAILMA 2023):
   keltainen #efc800, violetti #5c125a, petrooli #0098ac, roosa #f9cacc. */
:root {
  --tausta: #faf9f3;
  --paperi: #ffffff;
  --reuna: #e7e4da;
  --reuna-vahva: #cdc9bc;
  --teksti: #1c1b18;
  --teksti-himmea: #6b675c;
  --tumma: #1c1b18;
  --tumma-2: #3a382f;
  --keltainen: #efc800;
  --keltainen-tumma: #d9b600;
  --keltainen-vaalea: #fbf3cd;
  --korostus: #5c125a;
  --korostus-vaalea: #f5ebf5;
  --petrooli: #0098ac;
  --roosa-vaalea: #fdf0f1;
  --ok: #1f6b45;
  --ok-vaalea: #e8f4ee;
  --varoitus: #8a5b00;
  --varoitus-vaalea: #fdf3e0;
  --virhe: #a02231;
  --virhe-vaalea: #fbeaec;
  --info-vaalea: #f3f1e9;
  --sade: 10px;
  --varjo: 0 1px 2px rgba(28, 27, 24, .06), 0 2px 8px rgba(28, 27, 24, .05);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--teksti);
  background: var(--tausta);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--tumma-2); }

/* ---------------------------------------------------------------- ylapalkki */

.ylapalkki {
  background: var(--paperi);
  color: var(--teksti);
  position: sticky;
  top: 0;
  z-index: 20;
  padding-top: env(safe-area-inset-top);
  border-top: 4px solid var(--keltainen);
  border-bottom: 1px solid var(--reuna);
}
.ylapalkki-sisus {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  min-height: 56px;
}
.tuotenimi {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 650;
  letter-spacing: .01em;
  color: var(--teksti);
  text-decoration: none;
  font-size: 15px;
  padding: 8px 0;
}
.tuotenimi img { height: 24px; width: auto; display: block; }
.tuotenimi span { color: var(--teksti-himmea); font-weight: 550; }
.navi {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  flex: 1 1 100%;
  order: 3;
  margin: 0 -16px;
  padding: 0 16px 6px;
  scrollbar-width: none;
}
.navi::-webkit-scrollbar { display: none; }
.navi a {
  color: var(--teksti-himmea);
  text-decoration: none;
  padding: 7px 12px;
  border-radius: 7px;
  font-size: 14.5px;
  white-space: nowrap;
}
.navi a:hover { background: var(--keltainen-vaalea); color: var(--teksti); }
.navi a.aktiivinen { background: var(--keltainen); color: var(--teksti); font-weight: 600; }
.ulos-lomake {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.kayttajanimi { font-size: 14px; color: var(--teksti-himmea); }
.linkkinappi {
  background: none;
  border: 1px solid var(--reuna-vahva);
  color: var(--teksti);
  padding: 5px 11px;
  border-radius: 7px;
  font-size: 13.5px;
  cursor: pointer;
  font-family: inherit;
}
.linkkinappi:hover { background: var(--info-vaalea); }

@media (min-width: 860px) {
  .navi { flex: 1 1 auto; order: 0; margin: 0; padding: 0; overflow-x: auto; }
  .ylapalkki-sisus { flex-wrap: nowrap; }
  .ulos-lomake { flex-shrink: 0; }
}
@media (max-width: 1240px) and (min-width: 860px) {
  .kayttajanimi { display: none; }
}

/* ------------------------------------------------------------------ sisältö */

.sisalto {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 16px 64px;
}
body.leveä .sisalto { max-width: 1500px; }

h1 { font-size: 24px; margin: 0 0 4px; letter-spacing: -.01em; font-weight: 650; }
h2 { font-size: 19px; margin: 28px 0 12px; font-weight: 620; }
h3 { font-size: 16px; margin: 0 0 12px; font-weight: 620; }
.johdanto { color: var(--teksti-himmea); margin: 0 0 22px; }
.pikkuteksti { font-size: 13px; color: var(--teksti-himmea); font-weight: 400; }
.ok-teksti { color: var(--ok); margin: 0; }

.kortti {
  background: var(--paperi);
  border: 1px solid var(--reuna);
  border-radius: var(--sade);
  padding: 18px;
  margin-bottom: 18px;
  box-shadow: var(--varjo);
}
.kortti > h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }

.ruudukko { display: grid; gap: 16px; }
@media (min-width: 760px) {
  .ruudukko.k2 { grid-template-columns: 1fr 1fr; }
  .ruudukko.k3 { grid-template-columns: repeat(3, 1fr); }
  .ruudukko.k4 { grid-template-columns: repeat(4, 1fr); }
}

/* --------------------------------------------------------------- tunnusluvut */

.luvut { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 18px; }
@media (min-width: 760px) { .luvut { grid-template-columns: repeat(4, 1fr); } }
.luku {
  background: var(--paperi);
  border: 1px solid var(--reuna);
  border-radius: var(--sade);
  padding: 14px 16px;
}
.luku .arvo { font-size: 25px; font-weight: 620; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.luku .selite { font-size: 12.5px; color: var(--teksti-himmea); margin-top: 2px; }
.luku.korostettu .arvo { color: var(--korostus); }
.luku.hyva .arvo { color: var(--ok); }

/* ---------------------------------------------------------------- taulukot */

.taulukko-kaari { overflow-x: auto; margin: 0 -18px; padding: 0 18px; }
.taulukko { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.taulukko th, .taulukko td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--reuna); vertical-align: top; }
.taulukko th { font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--teksti-himmea); white-space: nowrap; }
.taulukko tfoot td { font-weight: 620; border-top: 2px solid var(--reuna-vahva); border-bottom: none; }
.taulukko .numero, .taulukko th.numero { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.taulukko tbody tr:hover { background: #fafbfc; }
.taulukko .rivi-summa { background: var(--info-vaalea); font-weight: 600; }

/* --------------------------------------------------------------- huomiot */

.huomiot { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.huomiot li {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  border: 1px solid transparent;
}
.huomiot .merkki {
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: #fff;
}
.huomiot .pykala { font-size: 12px; color: var(--teksti-himmea); white-space: nowrap; }
.huomio-virhe { background: var(--virhe-vaalea); border-color: #f0d3d7; }
.huomio-virhe .merkki { background: var(--virhe); }
.huomio-varoitus { background: var(--varoitus-vaalea); border-color: #f1e0bf; }
.huomio-varoitus .merkki { background: var(--varoitus); }
.huomio-huomio { background: var(--info-vaalea); border-color: #dde4ec; }
.huomio-huomio .merkki { background: var(--teksti-himmea); }

.ilmoitus {
  padding: 12px 14px;
  border-radius: 8px;
  margin-bottom: 18px;
  font-size: 14.5px;
  border: 1px solid transparent;
}
.ilmoitus.ok { background: var(--ok-vaalea); border-color: #c8e3d5; color: #14512f; }
.ilmoitus.virhe { background: var(--virhe-vaalea); border-color: #f0d3d7; color: #7d1926; }
.ilmoitus.info { background: var(--info-vaalea); border-color: #dde4ec; }

/* --------------------------------------------------------------- lomakkeet */

label { display: block; font-size: 13.5px; font-weight: 550; margin-bottom: 5px; }
.kentta { margin-bottom: 14px; }
.kentta .ohje { font-size: 12.5px; color: var(--teksti-himmea); font-weight: 400; margin-top: 4px; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=time],
input[type=number], select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--reuna-vahva);
  border-radius: 8px;
  font-size: 16px;
  font-family: inherit;
  background: #fff;
  color: var(--teksti);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--petrooli);
  outline-offset: -1px;
  border-color: var(--petrooli);
}
textarea { min-height: 80px; resize: vertical; }
.rivi { display: grid; gap: 12px; }
@media (min-width: 620px) {
  .rivi.k2 { grid-template-columns: 1fr 1fr; }
  .rivi.k3 { grid-template-columns: 1fr 1fr 1fr; }
  .rivi.k4 { grid-template-columns: repeat(4, 1fr); }
}
.valinta { display: flex; align-items: center; gap: 9px; font-weight: 400; font-size: 14.5px; }
.valinta input { width: auto; }

.nappi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: var(--keltainen);
  color: var(--teksti);
  border: 1px solid var(--keltainen);
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  min-height: 42px;
}
.nappi:hover { background: var(--keltainen-tumma); border-color: var(--keltainen-tumma); }
.nappi.toissijainen { background: #fff; color: var(--tumma); border-color: var(--reuna-vahva); }
.nappi.toissijainen:hover { background: var(--info-vaalea); }
.nappi.vaarallinen { background: #fff; color: var(--virhe); border-color: #e6bcc2; }
.nappi.vaarallinen:hover { background: var(--virhe-vaalea); }
.nappi.pieni { padding: 6px 12px; font-size: 13.5px; min-height: 34px; }
.napit { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }

/* --------------------------------------------------------- kirjautumissivu */

.kirjaudu-kehys { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.kirjaudu-laatikko { width: 100%; max-width: 400px; }
.kirjaudu-laatikko .kortti { padding: 26px; }
.kirjaudu-otsikko { text-align: center; margin-bottom: 22px; }
.kirjaudu-otsikko h1 { font-size: 22px; }
.kirjaudu-otsikko p { color: var(--teksti-himmea); margin: 4px 0 0; font-size: 14.5px; }
.kirjaudu-logo { width: 180px; height: auto; display: block; margin: 0 auto 6px; }

/* -------------------------------------------------------------- kalenteri */

.jakso-otsikko {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.jakso-navi { display: flex; gap: 8px; align-items: center; }

.viikko { margin-bottom: 20px; }
.viikko-otsikko {
  font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--teksti-himmea); font-weight: 600; margin-bottom: 8px;
}
.paivat { display: grid; gap: 8px; }
@media (min-width: 900px) { .paivat { grid-template-columns: repeat(7, 1fr); } }

.paiva {
  background: var(--paperi);
  border: 1px solid var(--reuna);
  border-radius: 9px;
  padding: 9px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
@media (min-width: 900px) { .paiva { min-height: 96px; } }
.paiva.pyha { background: var(--korostus-vaalea); border-color: #e4d0e4; }
.paiva.tanaan { border-color: var(--tumma); border-width: 2px; }
.paiva-otsikko { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.paiva-pvm { font-weight: 620; font-size: 14px; }
.paiva-vpaiva { font-size: 11.5px; color: var(--teksti-himmea); }
.paiva-pyhanimi { font-size: 11px; color: var(--korostus); font-weight: 550; }

.merkki-lappu {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 20px;
  background: var(--info-vaalea);
  color: var(--tumma-2);
  border: 1px solid var(--reuna);
}
.merkki-V { background: #e3ecf6; color: #26507d; border-color: #c9dcef; }
.merkki-X { background: #e9f1e9; color: #2f6135; border-color: #cfe3cf; }
.merkki-VV { background: #f3ecf7; color: #5b3572; border-color: #e2d3ea; }
.merkki-TS { background: #fdf3e0; color: #7a5100; border-color: #f0e0bd; }
.merkki-LOMA { background: #fff2e8; color: #8a4b1f; border-color: #f5d8c3; }
.merkki-LPR { background: #eef2f7; color: #3d5570; border-color: #dde4ec; }

.vuoro-lappu {
  background: var(--tumma);
  color: #fff;
  border-radius: 7px;
  padding: 6px 8px;
  font-size: 12.5px;
  line-height: 1.35;
  display: block;
  text-decoration: none;
}
.vuoro-lappu:hover { background: var(--tumma-2); }
.vuoro-lappu .aika { font-weight: 620; display: block; font-variant-numeric: tabular-nums; }
.vuoro-lappu .paikka { opacity: .85; font-size: 11.5px; }
.vuoro-lappu.vastuu { box-shadow: inset 3px 0 0 var(--keltainen); }
.vuoro-lappu.toteutunut { background: var(--ok); }
.vuoro-lappu.poikkeama { background: var(--varoitus); }
.lisaa-vuoro {
  border: 1px dashed var(--reuna-vahva);
  border-radius: 7px;
  padding: 5px;
  text-align: center;
  color: var(--teksti-himmea);
  font-size: 12.5px;
  text-decoration: none;
  display: block;
}
.lisaa-vuoro:hover { border-color: var(--tumma-2); color: var(--tumma-2); background: #fafbfc; }

/* ----------------------------------------------------------- suunnitteluruudukko */

.suunnittelu-taulu { overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; }
.suunnittelu-taulu table { border-collapse: collapse; min-width: 900px; width: 100%; }
.suunnittelu-taulu th, .suunnittelu-taulu td {
  border: 1px solid var(--reuna);
  padding: 4px;
  vertical-align: top;
  font-size: 12.5px;
}
.suunnittelu-taulu th { background: var(--info-vaalea); font-weight: 600; text-align: center; white-space: nowrap; padding: 6px 4px; }
.suunnittelu-taulu th.pyhapaiva { background: var(--korostus-vaalea); color: var(--korostus); }
.suunnittelu-taulu td.nimisarake {
  position: sticky; left: 0; background: var(--paperi); z-index: 2;
  min-width: 150px; font-size: 13.5px; font-weight: 550;
  box-shadow: 1px 0 0 var(--reuna);
}
.suunnittelu-taulu th.nimisarake { position: sticky; left: 0; z-index: 3; text-align: left; min-width: 150px; }
.suunnittelu-taulu td.solu { min-width: 96px; }
.suunnittelu-taulu td.viikonloppu { background: #fbfcfd; }
.suunnittelu-taulu td.pyhapaiva { background: #fdf7f8; }
.solu-sisus { display: flex; flex-direction: column; gap: 3px; }
.nimisarake .tunnit { font-weight: 400; font-size: 12px; color: var(--teksti-himmea); display: block; }
.nimisarake .yli { color: var(--virhe); font-weight: 600; }
.nimisarake .ali { color: var(--varoitus); font-weight: 600; }

/* ------------------------------------------------------------------ muuta */

.tunniste { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.tunniste.haettu { background: var(--varoitus-vaalea); color: var(--varoitus); }
.tunniste.hyvaksytty { background: var(--ok-vaalea); color: var(--ok); }
.tunniste.hylatty { background: var(--virhe-vaalea); color: var(--virhe); }
.tunniste.julkaistu { background: var(--ok-vaalea); color: var(--ok); }
.tunniste.luonnos { background: var(--info-vaalea); color: var(--teksti-himmea); }

.tyhja { text-align: center; padding: 34px 18px; color: var(--teksti-himmea); }
.tyhja p { margin: 0 0 14px; }

details.ohje-laatikko { border: 1px solid var(--reuna); border-radius: 8px; padding: 12px 14px; background: var(--paperi); margin-bottom: 16px; }
details.ohje-laatikko summary { cursor: pointer; font-weight: 550; font-size: 14.5px; }
details.ohje-laatikko p, details.ohje-laatikko li { font-size: 14px; color: var(--teksti-himmea); }

.pilkottu { border-top: 1px solid var(--reuna); margin-top: 16px; padding-top: 16px; }

/* -------------------------------------------------------- saatavuus & ennuste */

.saatavuus-estynyt { background: var(--virhe-vaalea) !important; color: var(--virhe) !important; border-color: #f0d3d7 !important; }
.saatavuus-toive { background: var(--ok-vaalea) !important; color: var(--ok) !important; border-color: #c8e3d5 !important; }
td.saatavuus-ristiriita { outline: 2px solid var(--virhe); outline-offset: -2px; }
.saatavuus-valinta { font-size: 12.5px; padding: 6px 8px; }

.ennuste-rivi td { background: var(--info-vaalea); }
.ennuste-solu { display: flex; flex-direction: column; gap: 1px; font-size: 11.5px; line-height: 1.3; }
.ennuste-solu strong { font-size: 12.5px; }
.ennuste-rivi td.taso-1 { background: #eef4fa; }
.ennuste-rivi td.taso-2 { background: var(--info-vaalea); }
.ennuste-rivi td.taso-3 { background: var(--varoitus-vaalea); }
.ennuste-rivi td.taso-4 { background: var(--virhe-vaalea); }

/* ---------------------------------------------------------------- leimaus */

.leimaus-kortti { border-left: 4px solid var(--tumma); }
.leimaus-kortti.kaynnissa { border-left-color: var(--ok); background: var(--ok-vaalea); }
.leimaa-nappi { width: 100%; max-width: 340px; min-height: 54px; font-size: 17px; }
.leimaa-nappi.ulos { background: var(--korostus); border-color: var(--korostus); color: #fff; }
.leimaa-nappi.ulos:hover { background: #47094a; border-color: #47094a; }

.vuoropohjat { gap: 6px; }

@media print {
  .ylapalkki, .napit, .nappi, .jakso-navi { display: none !important; }
  body { background: #fff; }
  .kortti { box-shadow: none; border-color: #ccc; break-inside: avoid; }
}