/* Prinel portal – ei ulkoisia resursseja (CSP default-src 'self') */

:root {
  --bg: #f4f6f5;
  --pinta: #ffffff;
  --pinta-2: #f9faf9;
  --teksti: #17211f;
  --himmea: #5b6a67;
  --raja: #dde3e1;
  --brand: #07483c;          /* tujauksen pääväri (css_perus_prinel.php) */
  --brand-hover: #053930;
  --brand-teksti: #ffffff;
  --oranssi: #ea9216;        /* sama kuin tujauksen takaisin-painike */
  --oranssi-hover: #bb7411;
  --korostus: #0b6b5f;
  --korostus-tausta: #e2efec;
  --varoitus: #8a5a00;
  --varoitus-tausta: #fff4dc;
  --virhe: #a8231c;
  --virhe-tausta: #fde8e6;
  --ok: #1d6b3a;
  --ok-tausta: #e3f3e8;
  --info: #1f4f8f;
  --info-tausta: #e5eefa;
  --kesken: #7a4d00;
  --kesken-tausta: #fdf0d5;
  --varjo: 0 1px 2px rgb(0 0 0 / 0.05), 0 1px 3px rgb(0 0 0 / 0.04);
  --sade: 10px;
  /* vain vaalea teema: lomakekentät ja vierityspalkit eivät tummu käyttöjärjestelmän asetuksesta */
  color-scheme: only light;
}

* { box-sizing: border-box; }

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

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

a { color: var(--korostus); }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--korostus); outline-offset: 2px; }

.numero, td.numero, th.numero { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.himmea { color: var(--himmea); }
.koodi { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92em; }
.piilotettu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- ylätunniste (Prinelin vihreä) --- */

.ylapalkki {
  background: var(--brand);
  color: #ffffff;
}

.ylapalkki-sisalto {
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.ylapalkki :focus-visible { outline-color: #ffffff; }

.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.logo img { height: 28px; width: auto; display: block; }
.logo span { font-size: 13px; color: var(--himmea); border-left: 1px solid var(--raja); padding-left: 10px; }
.ylapalkki .logo span { color: rgb(255 255 255 / 0.75); border-left-color: rgb(255 255 255 / 0.25); }

.navi { display: flex; gap: 4px; flex: 1; }
.navi a {
  text-decoration: none;
  color: rgb(255 255 255 / 0.78);
  padding: 6px 12px;
  border-radius: 8px;
  font-weight: 500;
}
.navi a:hover { color: #ffffff; background: rgb(255 255 255 / 0.08); }
.navi a[aria-current="page"] { color: #ffffff; background: rgb(255 255 255 / 0.16); }

.kayttaja { display: flex; align-items: center; gap: 12px; font-size: 13px; color: rgb(255 255 255 / 0.78); }
.kayttaja form { margin: 0; }
.kayttaja button { background: var(--oranssi); border-color: var(--oranssi); color: #ffffff; font-weight: 600; }
.kayttaja button:hover { background: var(--oranssi-hover); border-color: var(--oranssi-hover); }

/* --- painikkeet ja lomakkeet --- */

button, .painike {
  font: inherit;
  font-weight: 500;
  border: 1px solid var(--raja);
  background: var(--pinta);
  color: var(--teksti);
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.3;
}
button:hover, .painike:hover { background: var(--pinta-2); }
.ensisijainen { background: var(--brand); color: var(--brand-teksti); border-color: var(--brand); }
.ensisijainen:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: #fff; }
.pieni { padding: 4px 10px; font-size: 13px; }
.oranssi { background: var(--oranssi); border-color: var(--oranssi); color: #ffffff; font-weight: 600; }
.oranssi:hover { background: var(--oranssi-hover); border-color: var(--oranssi-hover); color: #ffffff; }

input[type="text"], input[type="search"], input[type="email"], input[type="password"] {
  font: inherit;
  color: var(--teksti);
  background: var(--pinta);
  border: 1px solid var(--raja);
  border-radius: 8px;
  padding: 7px 10px;
  min-width: 0;
}

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

main { max-width: 1280px; margin: 0 auto; padding: 20px 16px 48px; }

h1 { font-size: 22px; margin: 0 0 4px; letter-spacing: -0.01em; }
h2 { font-size: 16px; margin: 0 0 12px; }

.otsikkorivi { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.otsikkorivi p { margin: 0; }

.paivitetty { font-size: 13px; color: var(--himmea); }

.ilmoitus {
  border-radius: var(--sade);
  padding: 10px 14px;
  margin-bottom: 16px;
  border: 1px solid transparent;
}
.ilmoitus.varoitus { background: var(--varoitus-tausta); color: var(--varoitus); border-color: color-mix(in srgb, var(--varoitus) 25%, transparent); }
.ilmoitus.info { background: var(--info-tausta); color: var(--info); border-color: color-mix(in srgb, var(--info) 20%, transparent); display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.ilmoitus.virhe { background: var(--virhe-tausta); color: var(--virhe); border-color: color-mix(in srgb, var(--virhe) 25%, transparent); }

.kortti {
  background: var(--pinta);
  border: 1px solid var(--raja);
  border-radius: var(--sade);
  box-shadow: var(--varjo);
}
section.kortti + section.kortti, .kortti + section.kortti { margin-top: 16px; }
.luvut .kortti { margin: 0; }
.kortti-paa { padding: 14px 16px; border-bottom: 1px solid var(--raja); display: flex; gap: 8px 20px; flex-wrap: wrap; align-items: baseline; }
.kortti-paa h2 { margin: 0; }
.kortti-runko { padding: 16px; }

/* --- tunnusluvut --- */

.luvut { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 20px; }
.luku { padding: 14px 16px; text-decoration: none; color: inherit; display: block; }
a.luku:hover { border-color: var(--korostus); }
.luku .arvo { font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
.luku .selite { color: var(--himmea); font-size: 13px; }
.luku.varoitus .arvo { color: var(--varoitus); }
.luku.virhe .arvo { color: var(--virhe); }

/* --- taulukot --- */

.taulukko-kaari { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.kortti > .taulukko-kaari:first-child { border-radius: calc(var(--sade) - 1px) calc(var(--sade) - 1px) 0 0; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 8px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--raja); }
th { font-size: 12px; font-weight: 600; color: var(--himmea); text-transform: uppercase; letter-spacing: 0.03em; background: var(--pinta-2); white-space: nowrap; }
thead th { position: sticky; top: 0; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--pinta-2); }
.vihrea-otsake th { background: var(--brand); color: #ffffff; border-bottom-color: var(--brand); }
td.nimi { min-width: 220px; }
table.tiivis th, table.tiivis td { padding: 8px 10px; }
table.tiivis td.nimi { min-width: 130px; overflow-wrap: anywhere; }
table.tiivis th { white-space: normal; }
.ei-katkoa { white-space: nowrap; }
td .alarivi { color: var(--himmea); font-size: 12.5px; }
tr.alle td.vapaa { color: var(--varoitus); font-weight: 600; }
tr.vaje td.vapaa { color: var(--virhe); font-weight: 600; }

/* --- tilamerkit --- */

.tila {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--pinta-2);
  color: var(--himmea);
  border: 1px solid var(--raja);
}
.tila.received { background: var(--pinta-2); color: var(--himmea); }
.tila.scheduled { background: var(--info-tausta); color: var(--info); border-color: transparent; }
.tila.in_production { background: var(--kesken-tausta); color: var(--kesken); border-color: transparent; }
.tila.produced { background: var(--korostus-tausta); color: var(--korostus); border-color: transparent; }
.tila.delivered { background: var(--ok-tausta); color: var(--ok); border-color: transparent; }
.tila.alle { background: var(--varoitus-tausta); color: var(--varoitus); border-color: transparent; }
.tila.vaje { background: var(--virhe-tausta); color: var(--virhe); border-color: transparent; }

/* PCB-tila: värit kuten tujauksen työn alla -näkymässä */
.pcb { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pallo { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.pallo.vihrea { background: #27ae60; }
.pallo.keltainen { background: #f0c30f; }
.pallo.punainen { background: #e74c3c; }
.selite-pallot { margin: 0; padding: 10px 16px; border-top: 1px solid var(--raja); font-size: 12.5px; color: var(--himmea); }
.selite-pallot .pallo { margin-left: 10px; }

.materiaali { font-size: 13px; white-space: nowrap; }
.materiaali .ok { color: var(--ok); }
.materiaali .ei { color: var(--himmea); }

/* --- haku ja sivutus --- */

.haku { display: flex; gap: 8px 12px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.haku input[type="search"] { flex: 1 1 260px; max-width: 420px; }
.haku .haku-csv { margin-left: auto; }
.haku label.valinta { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--himmea); }

.sivutus { display: flex; gap: 8px; align-items: center; justify-content: flex-end; padding: 12px 16px; border-top: 1px solid var(--raja); font-size: 13px; color: var(--himmea); }

.valilehdet { display: inline-flex; border: 1px solid var(--raja); border-radius: 8px; overflow: hidden; }
.valilehdet a { padding: 6px 14px; text-decoration: none; color: var(--himmea); font-weight: 500; font-size: 14px; }
.valilehdet a + a { border-left: 1px solid var(--raja); }
.valilehdet a[aria-current="page"] { background: var(--korostus-tausta); color: var(--korostus); }

.tyhja { padding: 32px 16px; text-align: center; color: var(--himmea); }

dl.tiedot { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; font-size: 13px; }
dl.tiedot div { display: flex; gap: 6px; }
dl.tiedot dt { color: var(--himmea); }
dl.tiedot dd { margin: 0; font-variant-numeric: tabular-nums; }

/* --- kirjautuminen --- */

.kirjaudu-sivu { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.kirjaudu-laatikko { width: 100%; max-width: 380px; padding: 28px; }
.kirjaudu-laatikko .logo { justify-content: center; margin-bottom: 20px; }
.kirjaudu-laatikko .logo img { height: 40px; }
.kirjaudu-laatikko form { display: grid; gap: 14px; }
.kirjaudu-laatikko label { display: grid; gap: 4px; font-size: 13px; font-weight: 500; color: var(--himmea); }
.kirjaudu-laatikko input { width: 100%; }
.kirjaudu-laatikko button { justify-content: center; padding: 9px 14px; }

footer { max-width: 1280px; margin: 0 auto; padding: 0 16px 24px; font-size: 12px; color: var(--himmea); }

@media (max-width: 720px) {
  .ylapalkki-sisalto { gap: 10px 16px; }
  .navi { order: 3; flex-basis: 100%; overflow-x: auto; }
  .kayttaja .email { display: none; }
  h1 { font-size: 19px; }
  th, td { padding: 7px 10px; }
}

@media print {
  .ylapalkki, .haku, .sivutus, footer, .kayttaja { display: none; }
  body { background: #fff; color: #000; }
  .kortti { box-shadow: none; border-color: #ccc; }
}