/* Vaihtovirta – ulkoasu Tasavirta 1.8:n mukaan (kisko + alivalikko, puhelimessa alapalkki ja Lisää-arkki), oma väri: teal. */
/* Figtree tallennettuna ohjelman mukaan (toimii ilman verkkoa, ei ulkoisia palvelimia) */
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fontit/figtree-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fontit/figtree-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  --paavari: #b8401a; --paavari-tumma: #8a2a0e; --paavari-vaalea: #fbeae4;
  --vihrea: #1f7a3a; --vihrea-vaalea: #e3f3e7; --keltainen: #a3640a; --keltainen-vaalea: #fdf2dc;
  --punainen: #be123c; --punainen-vaalea: #fde8ee; --violetti: #6d4fc2; --violetti-vaalea: #eee9fb;
  --tausta: #f6f4f2; --pinta: #ffffff; --reuna: #e6e0dd; --teksti: #231c1a; --himmea: #6b615d;
  --kisko: #231210; --kisko-teksti: #dcc5bc; --korostus: #f6c21c;
  --varjo: 0 1px 2px rgba(40,20,16,.05), 0 2px 8px rgba(40,20,16,.06);
  --sade: 12px; --fontti: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root { --tausta: #141211; --pinta: #1e1a19; --reuna: #352e2c; --teksti: #efe9e6; --himmea: #a89e99; --kisko: #140806; --kisko-teksti: #d4bdb4;
    --paavari-vaalea: #3a1a12; --vihrea-vaalea: #13301d; --keltainen-vaalea: #3a2c10; --punainen-vaalea: #3d1420; --violetti-vaalea: #261d45; --paavari: #f0845c; --paavari-tumma: #e46a40;
    --vihrea: #5cc27a; --keltainen: #e2a645; --punainen: #f47c98; --violetti: #a995ea; --varjo: 0 1px 2px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.25); }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--fontti); font-size: 15px; line-height: 1.45; background: var(--tausta); color: var(--teksti); -webkit-font-smoothing: antialiased; }
a { color: var(--paavari); }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .6em; letter-spacing: -.01em; }
h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; } h4 { font-size: .95rem; }
#sovellus { display: flex; min-height: 100vh; }
.ik { width: 1.2rem; height: 1.2rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* kisko (päävalikko) */
#kisko { width: 76px; flex: none; background: var(--kisko); color: var(--kisko-teksti); display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: .8rem 0; position: sticky; top: 0; height: 100vh; z-index: 30; }
.kisko-logo { display: block; margin-bottom: .6rem; }
.kisko-logo img { width: 42px; height: 42px; border-radius: 11px; display: block; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.kisko-osa { display: flex; flex-direction: column; gap: .25rem; align-items: center; }
#kisko-ala { margin-top: auto; }
#kisko a, #kisko button { width: 60px; display: grid; justify-items: center; gap: .2rem; padding: .5rem 0 .4rem; border: 0; border-radius: 10px; background: transparent;
  color: inherit; font: inherit; font-size: .68rem; font-weight: 600; text-decoration: none; cursor: pointer; position: relative; }
#kisko .ik { width: 1.35rem; height: 1.35rem; }
#kisko a:hover, #kisko button:hover { background: rgba(255,255,255,.07); color: #fff; }
#kisko .aktiivinen { background: rgba(255,255,255,.13); color: #fff; }
#kisko .aktiivinen::before { content: ""; position: absolute; left: -8px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--korostus); }
#kisko a:focus-visible, #kisko button:focus-visible { outline: 2px solid var(--korostus); outline-offset: 1px; }

/* alivalikko (valitun ryhmän sivut) */
#sivupalkki { width: 228px; flex: none; background: var(--pinta); border-right: 1px solid var(--reuna); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; z-index: 20; }
.sivupalkki-yla { display: flex; align-items: center; gap: .5rem; padding: 1rem .8rem .4rem 1.1rem; }
.brand-nimi { flex: 1; font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; line-height: 1.15; }
.brand-nimi small { display: block; font-size: .72rem; font-weight: 500; color: var(--himmea); letter-spacing: 0; }
#kavenna { font-size: 1.1rem; color: var(--himmea); padding: .1rem .45rem; border-radius: 6px; }
#kavenna:hover { background: var(--tausta); }
#valikko { flex: 1; overflow-y: auto; padding: .3rem .6rem; }
#valikko .ryhma { display: none; flex-direction: column; gap: 2px; }
#valikko .ryhma.nakyva { display: flex; }
.ryhma-nimi { font-size: 1.15rem; margin: .5rem .55rem .6rem; }
.ryhma-ala { font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--himmea); margin: 1rem .6rem .3rem; }
#valikko a { display: flex; align-items: center; gap: .65rem; padding: .55rem .65rem; border-radius: 8px; color: var(--teksti); text-decoration: none; font-weight: 500; }
#valikko a .ik { color: var(--himmea); }
#valikko a .nimi { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#valikko a:hover { background: var(--tausta); }
#valikko a.aktiivinen { background: var(--paavari-vaalea); color: var(--paavari); font-weight: 650; }
#valikko a.aktiivinen .ik { color: var(--paavari); }
#valikko a.pika .ik { color: var(--paavari); }
#valikko a.kohdelinkki { padding: .4rem .65rem; font-size: .92rem; }
#valikko .merkki { margin-left: auto; background: var(--keltainen-vaalea); color: var(--keltainen); border-radius: 99px; font-size: .72rem; font-weight: 700; padding: 0 .5rem; }
.sivupalkki-ala { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; padding: .8rem 1rem; font-size: .85rem; border-top: 1px solid var(--reuna); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--paavari-vaalea); color: var(--paavari); display: grid; place-items: center; font-weight: 700; font-size: .75rem; flex: none; }
.kayttajatieto { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.kayttajatieto small { display: block; font-weight: 400; color: var(--himmea); font-size: .74rem; }
.ulos-linkki { font-size: .8rem; width: 100%; padding-left: calc(32px + .6rem); }
#sovellus.alivalikko-piilossa #sivupalkki { display: none; }
#verho { display: none; }

#paa { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#ylapalkki { display: flex; align-items: center; gap: .8rem; padding: .65rem 1.6rem; background: var(--pinta); border-bottom: 1px solid var(--reuna); position: sticky; top: 0; z-index: 5; min-height: 64px; }
.otsikko-kaari { flex: 1; min-width: 0; }
.ylapalkki-logo { display: none; width: 32px; height: 32px; border-radius: 8px; }
.paivays { font-size: .78rem; color: var(--himmea); }
#ylapalkki h1 { font-size: 1.3rem; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.015em; }
#valikkonappi { display: none; color: var(--himmea); font-size: 1.1rem; }
#sovellus.alivalikko-piilossa #valikkonappi { display: inline-block; }
#sisalto { padding: 1.4rem 1.6rem 2rem; width: 100%; max-width: 1800px; outline: none; }
#alapalkki { display: none; }

/* Tilanne: tehtävät ja mittarien tilamerkit */
.tehtavat { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); background: var(--pinta); border: 1px solid var(--reuna); border-radius: var(--sade); margin-bottom: 1rem; overflow: hidden; }
.tehtava { display: flex; gap: .7rem; align-items: center; padding: .75rem 1rem; cursor: pointer; border-top: 1px solid var(--reuna); margin-top: -1px; border-left: 1px solid var(--reuna); margin-left: -1px; min-width: 0; }
.tehtava:hover { background: var(--tausta); }
.tehtava-ik { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.tehtava-ik.varoitus { background: var(--keltainen-vaalea); color: var(--keltainen); }
.tehtava-ik.info { background: var(--paavari-vaalea); color: var(--paavari); }
.tehtava-ik.virhe { background: var(--punainen-vaalea); color: var(--punainen); }
.tehtava-teksti { flex: 1; min-width: 0; }
.tehtava-otsikko { display: block; font-weight: 700; color: var(--teksti); text-decoration: none; }
.tehtava-nuoli { color: var(--himmea); }
.mittari .nimi { display: flex; justify-content: space-between; align-items: center; gap: .4rem; font-weight: 600; }
.tilamerkki { font-size: .7rem; font-weight: 700; padding: .05rem .5rem; border-radius: 99px; white-space: nowrap; }
.tilamerkki.ok { background: var(--vihrea-vaalea); color: var(--vihrea); }
.tilamerkki.varoitus { background: var(--keltainen-vaalea); color: var(--keltainen); }
.tilamerkki.virhe { background: var(--punainen-vaalea); color: var(--punainen); }

/* kortit ja ruudukot */
.kortti { background: var(--pinta); border: 1px solid var(--reuna); border-radius: var(--sade); box-shadow: var(--varjo); padding: 1rem 1.1rem; margin-bottom: 1rem; }
.kortti > h2:first-child, .kortti > h3:first-child { margin-top: 0; }
.ruudukko { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.ruudukko-2 { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.ruudukko-2 > *, .ruudukko > * { min-width: 0; }
.mittari { display: block; text-decoration: none; color: inherit; }
.mittari .nimi { color: var(--himmea); font-size: .85rem; }
.mittari .arvo { font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums; margin: .15rem 0; }
.mittari .ala { font-size: .82rem; color: var(--himmea); }
.klikattava-kortti { cursor: pointer; }
.mittari.hyva .arvo { color: var(--vihrea); } .mittari.huono .arvo { color: var(--punainen); } .mittari.varoitus .arvo { color: var(--keltainen); }
.rivi { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.rivi.valit { justify-content: space-between; }
.kasvaa { flex: 1; }
.himmea { color: var(--himmea); } .pieni { font-size: .85rem; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mono { font-family: var(--mono); font-size: .88em; }

/* taulukot */
.taulu-kaari { overflow-x: auto; border: 1px solid var(--reuna); border-radius: var(--sade); background: var(--pinta); }
table { border-collapse: collapse; width: 100%; }
th, td { padding: .5rem .65rem; border-bottom: 1px solid var(--reuna); text-align: left; vertical-align: top; }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--himmea); background: var(--tausta); position: sticky; top: 0; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
tbody tr.klikattava { cursor: pointer; } tbody tr.klikattava:hover { background: var(--paavari-vaalea); }
td.mono { white-space: nowrap; }

/* merkit */
.merkki { display: inline-block; font-size: .75rem; font-weight: 600; padding: .1rem .5rem; border-radius: 99px; background: var(--reuna); color: var(--teksti); white-space: nowrap; }
.merkki.ok { background: var(--vihrea-vaalea); color: var(--vihrea); }
.merkki.varoitus { background: var(--keltainen-vaalea); color: var(--keltainen); }
.merkki.virhe { background: var(--punainen-vaalea); color: var(--punainen); }
.merkki.info { background: var(--paavari-vaalea); color: var(--paavari); }

/* lomakkeet */
label.kentta, .kentta { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; color: var(--himmea); }
label.kentta > span, .kentta > span { font-weight: 500; }
input, select, textarea { font: inherit; color: var(--teksti); background: var(--pinta); border: 1px solid var(--reuna); border-radius: 8px; padding: .55rem .65rem; width: 100%; min-width: 0; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--paavari); outline-offset: -1px; border-color: var(--paavari); }
input[type=checkbox] { width: auto; }
textarea { min-height: 70px; resize: vertical; }
.lomake { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.lomake .koko { grid-column: 1 / -1; }
.valintarivi { display: flex; align-items: center; gap: .5rem; font-size: .92rem; color: var(--teksti); }
fieldset { border: 1px solid var(--reuna); border-radius: 8px; padding: .5rem .8rem .7rem; margin: 0; min-width: 0; }
legend { font-size: .8rem; color: var(--himmea); padding: 0 .3rem; }
button, .nappi { font: inherit; font-weight: 600; border: 1px solid var(--reuna); background: var(--pinta); color: var(--teksti); border-radius: 8px; padding: .55rem 1rem; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
button:hover, .nappi:hover { border-color: var(--paavari); }
button.ensisijainen, .nappi.ensisijainen { background: var(--paavari); border-color: var(--paavari); color: #fff; }
button.ensisijainen:hover, .nappi.ensisijainen:hover { background: var(--paavari-tumma); }
button.vaara { color: var(--punainen); }
button.pieni-nappi, .nappi.pieni-nappi { padding: .3rem .6rem; font-size: .85rem; }
button.aktiivinen { background: var(--paavari-vaalea); border-color: var(--paavari); color: var(--paavari); }
button:disabled { opacity: .55; cursor: wait; }
.ikoninappi { border: 0; background: transparent; font-size: 1.3rem; padding: .2rem .5rem; }
.toiminnot { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; align-items: center; margin-top: 1rem; }
.suodattimet { display: flex; gap: .6rem; flex-wrap: wrap; align-items: end; margin-bottom: .8rem; }
.suodattimet input, .suodattimet select { width: auto; min-width: 150px; }
.hakukentta { max-width: 340px; flex: 1 1 9rem; min-width: 0; }
.valilehdet { display: flex; gap: .3rem; border-bottom: 1px solid var(--reuna); margin-bottom: 1rem; overflow-x: auto; }
.valilehdet button { border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; color: var(--himmea); padding: .6rem .9rem; }
.valilehdet button.aktiivinen { color: var(--paavari); border-bottom-color: var(--paavari); background: transparent; }
.huomio { border-left: 4px solid var(--keltainen); background: var(--keltainen-vaalea); padding: .7rem .9rem; border-radius: 6px; margin-bottom: 1rem; }
.huomio.info { border-color: var(--paavari); background: var(--paavari-vaalea); }
.huomio.ok { border-color: var(--vihrea); background: var(--vihrea-vaalea); }
.huomio.virhe { border-color: var(--punainen); background: var(--punainen-vaalea); }
.tyhja { color: var(--himmea); text-align: center; padding: 2rem 1rem; }
.lataa { color: var(--himmea); padding: 2rem; text-align: center; }
.kamera { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 2rem 1rem; border: 2px dashed var(--reuna); border-radius: 14px; background: var(--pinta); text-align: center; }
.kamera .iso { font-size: 1.1rem; padding: 1rem 1.6rem; }
.linkkinappi { background: none; border: 0; padding: .2rem; color: var(--paavari); text-decoration: underline; cursor: pointer; font-weight: 500; }
/* hakutulokset lomakkeen sisällä (tuotteet, asiakkaat Tasavirrasta) */
.ehdotukset { display: flex; flex-direction: column; border: 1px solid var(--reuna); border-radius: 8px; max-height: 260px; overflow-y: auto; margin-top: .3rem; background: var(--pinta); }
.ehdotus { display: block; text-align: left; border: 0; border-bottom: 1px solid var(--reuna); border-radius: 0; padding: .45rem .7rem; white-space: normal; font-weight: 400; }
.ehdotus:last-child { border-bottom: 0; } .ehdotus:hover { background: var(--paavari-vaalea); }

/* modaali ja ilmoitus */
#modaali { position: fixed; inset: 0; background: rgba(10,25,22,.5); z-index: 50; display: flex; align-items: flex-start; justify-content: center; padding: 4vh 1rem; overflow-y: auto; }
#modaali[hidden] { display: none; }
.modaali-ikkuna { background: var(--pinta); border-radius: 14px; width: min(720px, 100%); padding: 1.2rem 1.3rem; box-shadow: 0 20px 50px rgba(0,0,0,.3); min-width: 0; overflow-wrap: break-word; }
.modaali-ikkuna.leveä { width: min(1000px, 100%); }
.modaali-ikkuna input, .modaali-ikkuna select, .modaali-ikkuna textarea { max-width: 100%; }
#ilmoitus { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: .4rem; align-items: center; pointer-events: none; }
#ilmoitus .viesti { background: #1b2a27; color: #fff; padding: .65rem 1rem; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.25); max-width: 92vw; pointer-events: auto; }
#ilmoitus .viesti.virhe { background: var(--punainen); } #ilmoitus .viesti.ok { background: var(--vihrea); }

/* kirjautuminen */
.kirjautuminen { max-width: 400px; margin: 8vh auto; }
.kirjautuminen .kortti { padding: 1.6rem; }
.kirjautuminen-logo { display: flex; align-items: center; justify-content: center; gap: .8rem; margin: 0 0 1.3rem; }
.kirjautuminen-logo img { width: 64px; height: 64px; border-radius: 15px; box-shadow: 0 2px 8px rgba(184,64,26,.35); }
.kirjautuminen-logo b { display: block; font-size: 1.7rem; color: var(--paavari-tumma); letter-spacing: .2px; }
.kirjautuminen-logo span { display: block; font-size: .78rem; color: var(--himmea); }
.asenna-nappi { border: 0; border-radius: 8px; background: var(--korostus); color: #1b2a27; font-weight: 700; padding: .4rem .75rem; cursor: pointer; white-space: nowrap; }
.asenna-nappi:hover { background: #ffd23f; }
[hidden] { display: none !important; }
.asenna-nappi.leve { width: 100%; margin-top: .8rem; padding: .6rem; }
#sormirivi { display: grid; gap: .5rem; justify-items: center; }
#sorminappi { width: 100%; padding: .75rem; font-size: 1.05rem; justify-content: center; }
.versiorivi { text-align: center; font-size: .75rem; color: var(--himmea); margin-top: .9rem; }
.alatunniste { display: flex; align-items: center; justify-content: center; gap: .45rem; margin: 1.6rem 0 .4rem; font-size: .8rem; color: var(--himmea); }
.alatunniste img { width: 18px; height: 18px; border-radius: 4px; }

/* lajittelu otsikkoriviltä */
th.lajiteltava { cursor: pointer; user-select: none; white-space: nowrap; }
th.lajiteltava:hover, th.lajiteltava:focus-visible { color: var(--teksti); text-decoration: underline; outline: none; }
th.lajiteltu { color: var(--teksti); }
.laj-merkki { font-size: .75em; margin-left: .3em; }
.jarjesta-valinta { display: none; align-items: center; gap: .5rem; margin: .3rem 0 .4rem; font-size: .9rem; color: var(--himmea); }
.jarjesta-valinta select { flex: 1; min-width: 0; }

/* puhelin */
@media (max-width: 900px) {
  #kisko { display: none; }
  #sivupalkki, #sovellus.alivalikko-piilossa #sivupalkki { display: flex; position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: auto; height: auto; max-height: 82vh; max-height: 82dvh; border: 0; border-radius: 20px 20px 0 0; z-index: 45; transform: translateY(105%); transition: transform .22s ease;
    box-shadow: 0 -8px 30px rgba(0,0,0,.25); padding-bottom: env(safe-area-inset-bottom); }
  #sovellus.valikko-auki #sivupalkki { transform: none; }
  #sovellus.valikko-auki #verho { display: block; position: fixed; inset: 0; background: rgba(8,20,18,.45); z-index: 44; }
  .sivupalkki-yla { padding: .5rem 1rem .2rem; }
  .sivupalkki-yla::before { content: ""; position: absolute; top: 7px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: var(--reuna); }
  #kavenna, #valikkonappi, #sovellus.alivalikko-piilossa #valikkonappi { display: none; }
  #valikko { padding: .2rem .8rem .6rem; }
  #valikko .ryhma, #valikko .ryhma.nakyva { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3rem; }
  #valikko .ryhma-nimi, #valikko .ryhma-ala { grid-column: 1 / -1; font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--himmea); margin: .7rem .2rem .1rem; }
  #valikko a { flex-direction: column; justify-content: flex-start; gap: .3rem; padding: .45rem .1rem; font-size: .72rem; font-weight: 600; text-align: center; line-height: 1.2; position: relative; }
  #valikko a .nimi { white-space: normal; max-width: 100%; }
  #valikko a .ik { width: 2.7rem; height: 2.7rem; padding: .65rem; border-radius: 13px; background: var(--paavari-vaalea); color: var(--paavari); }
  #valikko a.aktiivinen { background: transparent; }
  #valikko a.aktiivinen .ik { background: var(--paavari); color: #fff; }
  #valikko a.kohdelinkki { padding: .45rem .1rem; font-size: .72rem; }
  #valikko .merkki { position: absolute; top: 0; right: 4px; margin: 0; }
  .sivupalkki-ala { padding: .7rem 1rem; }
  .ulos-linkki { width: auto; padding: 0; }
  #ylapalkki { padding: .5rem .9rem; min-height: 56px; }
  .paivays { display: none; }
  .ylapalkki-logo { display: block; }
  #sisalto { padding: .9rem .8rem 6rem; }
  .ruudukko-2 { grid-template-columns: 1fr; }
  .ruudukko { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .mittari .arvo { font-size: 1.3rem; }
  .mittari .nimi { flex-wrap: wrap; }
  .tehtavat { grid-template-columns: 1fr; }
  #alapalkki { display: flex; position: fixed; bottom: var(--alapalkki-siirto, 0px); left: 0; right: 0; background: var(--pinta); border-top: 1px solid var(--reuna); z-index: 40; padding-bottom: env(safe-area-inset-bottom); }
  #alapalkki a { flex: 1; text-align: center; padding: .45rem 0 .5rem; text-decoration: none; color: var(--himmea); font-size: .7rem; font-weight: 600; display: flex; flex-direction: column; align-items: center; gap: .15rem; position: relative; }
  #alapalkki a .ik { width: 1.45rem; height: 1.45rem; }
  #alapalkki a.aktiivinen { color: var(--paavari); }
  #alapalkki a.aktiivinen::before { content: ""; position: absolute; top: 0; width: 24px; height: 3px; border-radius: 0 0 3px 3px; background: var(--paavari); }
  #alapalkki a.korostus .ik-kehys { background: var(--paavari); color: #fff; border-radius: 16px; width: 3.1rem; height: 3.1rem; display: flex; align-items: center; justify-content: center; margin-top: -1.4rem; box-shadow: 0 6px 16px rgba(184,64,26,.38); }
  #alapalkki a.korostus::before { display: none; }
  th, td { padding: .45rem .5rem; }
  .suodattimet { gap: .45rem; }
  .suodattimet > input:not([type=checkbox]), .suodattimet > .hakukentta { flex: 1 1 100%; max-width: none; }
  .suodattimet > select { flex: 1 1 40%; }
  .suodattimet .kasvaa { display: none; }
  .valilehdet { flex-wrap: wrap; }
  .valilehdet button { padding: .45rem .6rem; }
  #ilmoitus { bottom: 5.5rem; }
}
@media (min-width: 901px) { .vain-puhelin { display: none !important; } }
@media print {
  #kisko, #sivupalkki, #ylapalkki, #alapalkki, .toiminnot, .suodattimet, .valilehdet { display: none !important; }
  #sisalto { padding: 0; } .kortti { box-shadow: none; border: 0; }
}
@media (display-mode: standalone) { html, body { overscroll-behavior-y: none; } }

/* taulukot kortteina kapealla näytöllä – ei sivuttaisvieritystä */
@media (max-width: 700px) {
  .jarjesta-valinta { display: flex; }
  .taulu-kaari:has(> table.korttitaulu) { overflow-x: visible; }
  table.korttitaulu thead { display: none; }
  table.korttitaulu, table.korttitaulu tbody, table.korttitaulu tfoot { display: block; }
  table.korttitaulu tbody tr { display: grid; gap: .15rem .7rem; padding: .6rem .75rem; border-bottom: 1px solid var(--reuna); align-items: start; }
  table.korttitaulu tbody tr:last-child { border-bottom: 0; }
  table.korttitaulu td { display: block; padding: 0; border: 0; min-width: 0; overflow-wrap: anywhere; }
  table.korttitaulu td.num { white-space: nowrap; text-align: left; }
  .kt-laitteet tbody tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "laite nappi" "viim nappi" "van van"; }
  .kt-laitteet .kl-laite { grid-area: laite; } .kt-laitteet .kl-nappi { grid-area: nappi; align-self: center; }
  .kt-laitteet .kl-luotu { display: none; } .kt-laitteet .kl-viim { grid-area: viim; font-size: .85rem; } .kt-laitteet .kl-viim::before { content: "viimeksi "; color: var(--himmea); }
  .kt-laitteet .kl-van { grid-area: van; font-size: .85rem; } .kt-laitteet .kl-van::before { content: "vanhenee "; color: var(--himmea); }
  .kt-sormet tbody tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "laite nappi" "viim nappi"; }
  .kt-sormet .ks-laite { grid-area: laite; } .kt-sormet .ks-nappi { grid-area: nappi; align-self: center; }
  .kt-sormet .ks-luotu { display: none; } .kt-sormet .ks-viim { grid-area: viim; font-size: .85rem; } .kt-sormet .ks-viim::before { content: "viimeksi "; color: var(--himmea); }
  /* leveät taulukot pinottuina (app.js tarkistaPinot) */
  .taulu-kaari:has(> table.pino) { overflow-x: visible; }
  table.pino thead { display: none; }
  table.pino, table.pino tbody, table.pino tfoot { display: block; }
  table.pino tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .9rem; padding: .55rem .7rem; border-bottom: 1px solid var(--reuna); }
  table.pino tr:last-child { border-bottom: 0; }
  table.pino td { display: block; padding: 0; border: 0; min-width: 0; text-align: left; background: none; }
  table.pino td:empty { display: none; }
  table.pino td.pino-koodi { flex: 0 0 auto; color: var(--himmea); }
  table.pino td.pino-otsikko { flex: 1 0 calc(100% - 3.5rem); overflow-wrap: break-word; }
  table.pino td.pino-arvo { flex: 0 1 auto; }
  table.pino td[data-pino]::before { content: attr(data-pino); display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; color: var(--himmea); font-weight: 400; }
}
/* Vaihtovirta – kohteet: tunnusluvut, tilat, pisteet, pohjakuva, keskukset */
.kohdekortti h2 .merkki { vertical-align: middle; font-size: .72rem; }
.tunnusluvut { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .5rem 1rem; margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--reuna); }
.tunnusluvut > div { display: flex; flex-direction: column; font-size: .82rem; }
.tunnusluvut b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.tilaotsikko { display: flex; align-items: center; gap: .6rem; margin: 1rem 0 .4rem; }
.tilaotsikko:first-of-type { margin-top: .2rem; }
.tilaotsikko .pieni-nappi { margin-left: auto; }
.tunnus { display: inline-grid; place-items: center; min-width: 1.75rem; height: 1.45rem; padding: 0 .3rem; border-radius: 6px; font-size: .72rem; font-weight: 800; letter-spacing: .02em; background: var(--paavari-vaalea); color: var(--paavari); vertical-align: middle; }
.tunnus.av { background: var(--violetti-vaalea); color: var(--violetti); }
.alue .rivi { gap: .5rem; } .alue .kentta { font-size: .78rem; }
.tuotekentta .rivi { align-items: stretch; }

/* pohjakuva: kuva ja sen päällä SVG metrikoordinaateissa */
.pohjakuvakortti .tyokalut { margin-bottom: .4rem; }
.pohjakuva { position: relative; width: 100%; background: #fff; border: 1px solid var(--reuna); border-radius: 8px; overflow: hidden; line-height: 0; touch-action: none; user-select: none; }
.pohjakuva img { width: 100%; height: auto; display: block; pointer-events: none; }
.pohjakuva svg { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }
.pohjakuva .tila-alue rect { fill: rgba(184,64,26,.08); stroke: var(--paavari); stroke-width: .05; cursor: pointer; }
.pohjakuva .tila-alue:hover rect { fill: rgba(184,64,26,.18); }
.pohjakuva .tila-alue.markatila rect, .pohjakuva .tila-alue.sauna rect { stroke: #2563eb; fill: rgba(37,99,235,.08); }
.pohjakuva .tila-alue.ulko rect, .pohjakuva .tila-alue.autotalli rect { stroke: #7c8a86; stroke-dasharray: .25 .15; fill: rgba(124,138,134,.06); }
.pohjakuva .tila-alue.keittio rect { stroke: #0e7490; fill: rgba(14,116,144,.07); }
.pohjakuva text { font-family: var(--fontti); font-weight: 700; fill: #15211f; pointer-events: none; }
.pohjakuva .tila-alue .nimi { fill: #7a2a10; opacity: .85; }
.pohjakuva.ei-nimia .nimi, .pohjakuva svg.ei-nimia .nimi { display: none; }
.pohjakuva .piste { cursor: grab; }
.pohjakuva .piste circle { fill: #b8401a; stroke: #fff; stroke-width: .05; }
.pohjakuva .piste.av circle { fill: #6d4fc2; }
.pohjakuva .piste text { fill: #fff; font-weight: 800; }
.pohjakuva .piste .maara { fill: #15211f; font-weight: 700; }
.pohjakuva .piste.siirtyy { cursor: grabbing; opacity: .75; }
.pohjakuva .piste:hover circle { stroke: var(--korostus); stroke-width: .08; }
.pohjakuva .keskus rect { fill: #15211f; stroke: var(--korostus); stroke-width: .05; cursor: pointer; }
.pohjakuva .keskus text { fill: var(--korostus); }
.pohjakuva .uusialue { fill: rgba(246,194,28,.2); stroke: #a3640a; stroke-width: .05; stroke-dasharray: .2 .1; }
.sijoittamatta { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .6rem; }
.sijoittamatta .pieni-nappi { font-weight: 500; }
.ohje { margin: 0 0 .4rem; min-height: 1.2em; }

/* puhelin: korttitaulukot */
@media (max-width: 700px) {
  .kt-kohteet tbody tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nimi tila" "tyyppi liittyma" "pisteet pvm"; }
  .kt-kohteet .ko-nimi { grid-area: nimi; } .kt-kohteet .ko-tila { grid-area: tila; text-align: right; }
  .kt-kohteet .ko-tyyppi { grid-area: tyyppi; font-size: .85rem; color: var(--himmea); } .kt-kohteet .ko-liittyma { grid-area: liittyma; font-size: .85rem; text-align: right; }
  .kt-kohteet .ko-tilat { display: none; } .kt-kohteet .ko-pisteet { grid-area: pisteet; font-size: .85rem; } .kt-kohteet .ko-pisteet::after { content: " pistettä"; color: var(--himmea); }
  .kt-kohteet .ko-pvm { grid-area: pvm; font-size: .85rem; color: var(--himmea); text-align: right; }
  .kt-tilat tbody tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nimi ala" "tyyppi pisteet" "asennus teho"; }
  .kt-tilat .ti-nimi { grid-area: nimi; } .kt-tilat .ti-ala { grid-area: ala; text-align: right; }
  .kt-tilat .ti-tyyppi { grid-area: tyyppi; font-size: .85rem; color: var(--himmea); } .kt-tilat .ti-pisteet { grid-area: pisteet; font-size: .85rem; text-align: right; } .kt-tilat .ti-pisteet::after { content: " pistettä"; color: var(--himmea); }
  .kt-tilat .ti-asennus { grid-area: asennus; font-size: .8rem; } .kt-tilat .ti-teho { grid-area: teho; font-size: .85rem; text-align: right; }
  .kt-pisteet tbody tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tyyppi maara" "tuote tuote" "asennus sijainti"; }
  .kt-pisteet .pi-tyyppi { grid-area: tyyppi; } .kt-pisteet .pi-maara { grid-area: maara; text-align: right; } .kt-pisteet .pi-maara::after { content: " kpl"; color: var(--himmea); }
  .kt-pisteet .pi-teho { display: none; } .kt-pisteet .pi-tuote { grid-area: tuote; font-size: .85rem; }
  .kt-pisteet .pi-asennus { grid-area: asennus; } .kt-pisteet .pi-sijainti { grid-area: sijainti; text-align: right; }
  .kt-keskukset tbody tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nimi syotto" "sijainti sijainti" "kaapeli pituus"; }
  .kt-keskukset .ke-nimi { grid-area: nimi; } .kt-keskukset .ke-syotto { grid-area: syotto; text-align: right; } .kt-keskukset .ke-sijainti { grid-area: sijainti; font-size: .85rem; color: var(--himmea); }
  .kt-keskukset .ke-kaapeli { grid-area: kaapeli; font-size: .85rem; } .kt-keskukset .ke-pituus { grid-area: pituus; font-size: .85rem; text-align: right; }
  .tunnusluvut { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pohjakuvakortti .tyokalut .rivi { gap: .3rem; }
}
.kt-loki .lokitiedot { overflow-wrap: anywhere; max-width: 42rem; }