/* =====================================================================
   FieldScheduler — tyylit

   🔴 VÄRIT EIVÄT OLE VALITTU, NE OVAT ANNETTU. Sovelluskuvauksessa on
   Nikon oma tilavärikartta, ja se on tässä sellaisenaan:
     harmaa = tehty · vihreä = suunniteltu · oranssi = ehdollinen
     punainen = määräaika umpeutuu · siniharmaa = odottaa

   ⚠️ VAALEA POHJA ON TIETOINEN VALINTA. Tekijä katsoo tätä puhelimesta
   työmaalla auringossa. Tumma käyttöliittymä on siellä huonompi, ei
   hienompi.

   ⚠️ EI VERKKOKIRJASINTA. Kilpailija-arvioissa toistuva valitus on että
   sovellus on hidas. Kirjasimen lataus maksaa sekunnin 3G:llä työmaalla,
   ja luonne haetaan kokoerosta eikä latauksesta.
   ===================================================================== */

:root {
  --muste:      #14181d;
  --muste-2:    #59635f;
  --paperi:     #eef0ee;
  --rivi:       #ffffff;
  --viiva:      #d4dad8;

  --tehty:      #8b9491;
  --suunniteltu:#2f7d4f;
  --ehdollinen: #c26816;
  --kiire:      #b3261e;
  --odottaa:    #5a7184;

  --kisko: 4.25rem;
  --pyoristys: 3px;
}

* { box-sizing: border-box; }

/* 🔴 TÄMÄ RIVI ON KORJAUS OIKEAAN VIKAAN (31.7.2026).
   Kirjautumislomake jäi näkyviin sisäänkirjautumisen jälkeen, ja
   sovellus piirtyi sen alle. Syy ei ollut JavaScriptissä: `hidden`
   asetettiin oikein, mutta `.portti { display: grid }` on kirjoittajan
   sääntö ja voittaa selaimen oman `[hidden] { display: none }` -säännön.
   Näkymän piilotus lakkasi toimimasta sillä hetkellä kun portille
   annettiin display-arvo — eikä se näy JavaScriptiä lukemalla.
   ⚠️ Jokainen `display`-arvo elementille jota piilotetaan `hidden`illä
   tarvitsee tämän. Siksi sääntö on tässä kerran, ei jokaisessa. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--paperi);
  color: var(--muste);
  font: 400 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  padding-bottom: env(safe-area-inset-bottom);
}

h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -0.015em; }

button { font: inherit; }

/* ---------------------------- kirjautuminen ------------------------ */

.portti {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}

.portti__kortti {
  width: min(24rem, 100%);
  background: var(--rivi);
  border: 1px solid var(--viiva);
  border-radius: var(--pyoristys);
  padding: 2rem 1.75rem;
  display: grid;
  gap: 1rem;
}

.portti__yritys {
  margin: 0;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muste-2);
}

.portti__otsikko {
  font-size: 1.9rem;
  line-height: 1.1;
  margin-bottom: 0.5rem;
}

.kentta { display: grid; gap: 0.35rem; }
.kentta > span { font-size: 0.8rem; color: var(--muste-2); }

.kentta input {
  font: inherit;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--viiva);
  border-radius: var(--pyoristys);
  background: var(--paperi);
  color: var(--muste);
  min-height: 44px;
}

.kentta input:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--muste);
  outline-offset: 2px;
}

.virhe {
  margin: 0;
  color: var(--kiire);
  font-size: 0.9rem;
}

/* ------------------------------ napit ------------------------------ */

.nappi {
  border: 1px solid var(--muste);
  border-radius: var(--pyoristys);
  padding: 0.7rem 1rem;
  min-height: 44px;
  background: var(--rivi);
  color: var(--muste);
  cursor: pointer;
}
.nappi--paa { background: var(--muste); color: var(--rivi); font-weight: 600; }
.nappi--hiljainen { border-color: transparent; color: var(--muste-2); padding: 0.5rem; }
.nappi--pieni { padding: 0.45rem 0.7rem; min-height: 38px; font-size: 0.85rem; }
.nappi[disabled] { opacity: 0.5; cursor: default; }

/* ---------------------------- yläpalkki ---------------------------- */

.ylapalkki {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--muste);
  color: var(--paperi);
  padding-top: calc(0.75rem + env(safe-area-inset-top));
}
.ylapalkki__nimi { display: flex; align-items: baseline; gap: 0.6rem; min-width: 0; }
.ylapalkki__nimi strong { font-weight: 600; }
.ylapalkki .nappi--hiljainen { color: var(--paperi); }

.merkki {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tehty);
}

/* ---------------------------- välilehdet --------------------------- */

.valilehdet {
  display: flex;
  gap: 0;
  background: var(--muste);
  padding: 0 0.5rem;
  overflow-x: auto;
}

.valilehti {
  appearance: none;
  border: 0;
  background: none;
  color: var(--tehty);
  padding: 0.6rem 0.85rem 0.75rem;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.valilehti[aria-selected="true"] {
  color: var(--rivi);
  border-bottom-color: var(--rivi);
  font-weight: 600;
}
.valilehti__luku {
  display: inline-block;
  margin-left: 0.4rem;
  font-size: 0.78rem;
  color: var(--tehty);
}

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

.sisalto { padding: 0 0 3rem; }

.paivaotsikko {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--paperi);
  border-bottom: 1px solid var(--viiva);
  padding: 0.9rem 1rem 0.4rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}
.paivaotsikko h2 { font-size: 0.95rem; }
.paivaotsikko span { font-size: 0.78rem; color: var(--muste-2); }
.paivaotsikko--kiire h2 { color: var(--kiire); }

/* --------------------------- työrivi ------------------------------- */
/* Numerokisko on tämän käyttöliittymän tunnusmerkki. Niko puhuu töistä
   juoksevalla numerolla — «19, 24 valmis» — joten numero on aina samassa
   paikassa, samankokoisena, ja tilaväri on sen reunassa. */

.tyo {
  display: grid;
  grid-template-columns: var(--kisko) 1fr auto;
  align-items: start;
  gap: 0.75rem;
  background: var(--rivi);
  border-bottom: 1px solid var(--viiva);
  padding: 0.85rem 1rem 0.85rem 0;
  text-align: left;
  width: 100%;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  cursor: pointer;
}

.tyo__rail {
  border-left: 5px solid var(--odottaa);
  padding: 0.1rem 0 0.1rem 0.85rem;
  align-self: stretch;
}
.tyo[data-tila="valmis"]      .tyo__rail { border-left-color: var(--tehty); }
.tyo[data-tila="suunniteltu"] .tyo__rail { border-left-color: var(--suunniteltu); }
.tyo[data-tila="ehdollinen"]  .tyo__rail { border-left-color: var(--ehdollinen); }
.tyo[data-tila="kiire"]       .tyo__rail { border-left-color: var(--kiire); }

.tyo__numero {
  font-size: 1.45rem;
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--muste);
}
.tyo__numero:empty::before { content: "–"; color: var(--tehty); }

.tyo__runko { min-width: 0; }
.tyo__otsikko { font-size: 1rem; line-height: 1.25; }
.tyo__kohde { margin: 0.2rem 0 0; font-size: 0.88rem; color: var(--muste-2); }
.tyo__meta {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  color: var(--muste-2);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.tyo__meta b { font-weight: 600; color: var(--muste); }

.tyo__oikea { display: grid; gap: 0.4rem; justify-items: end; }

.lipuke {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--viiva);
  border-radius: var(--pyoristys);
  padding: 0.15rem 0.4rem;
  color: var(--muste-2);
  white-space: nowrap;
}
.lipuke--kiire { border-color: var(--kiire); color: var(--kiire); }
.lipuke--poistunut { border-color: var(--tehty); color: var(--tehty); }

/* ------------------------------ tyhjä ------------------------------ */

.tyhja {
  padding: 2.5rem 1.25rem;
  color: var(--muste-2);
}
.tyhja h2 { font-size: 1.05rem; margin-bottom: 0.4rem; color: var(--muste); }
.tyhja p { margin: 0; font-size: 0.9rem; }

.osio-otsikko {
  padding: 1.5rem 1rem 0.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muste-2);
}

@media (prefers-reduced-motion: no-preference) {
  .tyo { transition: background-color 120ms ease; }
}
.tyo:hover { background: #fbfcfb; }

@media (min-width: 46rem) {
  .sisalto { max-width: 60rem; margin: 0 auto; }
  .paivaotsikko { padding-inline: 1.25rem; }
}

/* ------------------------------ Gantt ------------------------------ */
/* Sama kuva kuin seinällä olevalla näytöllä. Taulukko eikä canvas:
   selattavuus on tämän näkymän tarkoitus, ja taulukko selviää siitä
   ilman mittauskoodia joka hajoaa zoomatessa. */

.gantt { padding: 0.75rem 0 2rem; }
.gantt__ohje {
  padding: 0 1rem 0.75rem;
  font-size: 0.8rem;
  color: var(--muste-2);
}
.gantt__vieritys { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gantt__taulu {
  border-collapse: collapse;
  width: 100%;
  min-width: 44rem;
  background: var(--rivi);
  font-size: 0.8rem;
}
.gantt__taulu th {
  text-align: left;
  font-weight: 600;
  color: var(--muste-2);
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--viiva);
  white-space: nowrap;
  background: var(--rivi);
}
.gantt__taulu td {
  padding: 0.25rem 0.35rem;
  border-bottom: 1px solid var(--viiva);
  vertical-align: top;
  min-width: 6.5rem;
}
.gantt__tekija {
  position: sticky;
  left: 0;
  z-index: 1;
  color: var(--muste) !important;
  border-right: 1px solid var(--viiva);
}
.palkki {
  display: block;
  border-radius: 2px;
  padding: 0.2rem 0.35rem;
  margin-bottom: 0.2rem;
  font-size: 0.72rem;
  line-height: 1.2;
  font-weight: 600;
  color: #0d1114;
  background: var(--odottaa);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.palkki[data-tila="valmis"]      { background: var(--tehty); }
.palkki[data-tila="suunniteltu"] { background: #4fae7a; }
.palkki[data-tila="ehdollinen"]  { background: #e0975a; }
.palkki[data-tila="kiire"]       { background: #e2645c; color: #fff; }
.palkki[data-tila="odottaa"]     { background: #8ba3b5; }

.gantt__selitys {
  display: flex; flex-wrap: wrap; gap: 0.8rem;
  padding: 0.75rem 1rem 0;
  font-size: 0.72rem; color: var(--muste-2);
}
.gantt__selitys i {
  display: inline-block; width: 0.7rem; height: 0.7rem;
  border-radius: 2px; margin-right: 0.3rem; vertical-align: -1px;
  background: var(--odottaa);
}
.gantt__selitys i[data-tila="valmis"]      { background: var(--tehty); }
.gantt__selitys i[data-tila="suunniteltu"] { background: #4fae7a; }
.gantt__selitys i[data-tila="ehdollinen"]  { background: #e0975a; }
.gantt__selitys i[data-tila="kiire"]       { background: #e2645c; }
.gantt__selitys i[data-tila="odottaa"]     { background: #8ba3b5; }

/* --------------------- valvonta ja tutkimus ------------------------ */

.halytys__teko {
  margin: 0;
  padding: 0.5rem 1rem 0.75rem;
  font-size: 0.85rem;
  color: var(--muste-2);
  background: var(--rivi);
  border-bottom: 1px solid var(--viiva);
}

.tutkimus { padding: 1rem; display: grid; gap: 0.9rem; max-width: 46rem; }
.tutkimus__otsikko { font-size: 1.05rem; margin-top: 0.5rem; }
.tutkimus__ohje { margin: 0; font-size: 0.85rem; color: var(--muste-2); }
.tutkimus textarea {
  font: inherit; font-size: 0.85rem;
  padding: 0.6rem 0.7rem; border: 1px solid var(--viiva);
  border-radius: var(--pyoristys); background: var(--paperi);
  color: var(--muste); resize: vertical; min-height: 5rem;
}
.kentta__vinkki { margin: 0; font-size: 0.82rem; color: var(--muste-2); }
.kentta__pieni {
  font: inherit; width: 7rem; margin-left: 0.4rem; padding: 0.35rem 0.5rem;
  border: 1px solid var(--viiva); border-radius: var(--pyoristys);
  background: var(--paperi); color: var(--muste);
}

.tutkimus__tulos { font-size: 0.85rem; }
.tulos {
  background: var(--rivi); border: 1px solid var(--viiva);
  border-left: 5px solid var(--odottaa);
  border-radius: var(--pyoristys); padding: 0.85rem;
}
.tulos[data-tila="suunniteltu"] { border-left-color: var(--suunniteltu); }
.tulos[data-tila="kiire"]       { border-left-color: var(--kiire); }
.tulos__tila { margin: 0 0 0.6rem; font-weight: 600; }
.tulos__taulu { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.tulos__taulu th {
  text-align: left; font-weight: 600; color: var(--muste-2);
  padding: 0.25rem 0.5rem 0.25rem 0; vertical-align: top; white-space: nowrap;
}
.tulos__taulu td { padding: 0.25rem 0.4rem; word-break: break-word; }
.tulos__taulu thead th { border-bottom: 1px solid var(--viiva); }
.tulos__diag { margin: 0.7rem 0 0; font-size: 0.8rem; color: var(--muste-2); }
.tulos__hälytys { margin: 0.6rem 0 0; color: var(--kiire); font-weight: 600; }