/* GeoBuddy Caster -hallinta. Brändiohje rev 0.1: värit, Archivo + IBM Plex Mono, tilavärit ohjenuoran luvun 8 mukaan. */
@font-face { font-family: "Archivo"; font-weight: 500; font-display: swap; src: url("fonts/archivo-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 700; font-display: swap; src: url("fonts/archivo-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 800; font-display: swap; src: url("fonts/archivo-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 900; font-display: swap; src: url("fonts/archivo-latin-900-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

:root {
  --keltainen: #FFC20E; --grafiitti: #15181C; --betoni: #EEECE6; --teras: #4A4F57;
  --vihrea: #1E9E55; --oranssi: #F2A900; --punainen: #D7322B; --sininen: #2F6FDE;
  --sade: 10px; --kosketus: 44px;
  --fontti: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}
/* Tumma (oletus) */
:root, [data-theme="dark"] {
  --tausta: #0F1114; --pinta: #15181C; --pinta2: #1D2126; --reuna: #2B3038;
  --teksti: #F2F1EC; --himmea: #A3A7AE; --korostus: var(--keltainen); --korostus-teksti: var(--grafiitti);
  --linkki: var(--keltainen);
}
/* Kirkas (aurinko) – keltaista tekstiä ei käytetä vaalealla pohjalla */
[data-theme="light"] {
  --tausta: #E4E2DB; --pinta: #FFFFFF; --pinta2: var(--betoni); --reuna: #C9C6BD;
  --teksti: #15181C; --himmea: #4A4F57; --korostus: var(--keltainen); --korostus-teksti: var(--grafiitti);
  --linkki: #15181C;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--tausta); color: var(--teksti); font: 500 16px/1.5 var(--fontti); }
h1, h2, h3 { font-weight: 800; line-height: 1.15; margin: 0 0 .6em; letter-spacing: -.01em; }
h1 { font-size: clamp(1.5rem, 2.2vw + 1rem, 2rem); font-weight: 900; }
h2 { font-size: 1.2rem; }
a { color: var(--linkki); }
.mono, code { font-family: var(--mono); }
.himmea, small { color: var(--himmea); }
.pieni { font-size: .85rem; }

/* ---------- runko ---------- */
.kehys { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.sivupalkki { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 1rem;
  background: var(--grafiitti); color: #F2F1EC; padding: 1.2rem 1rem; border-right: 1px solid #000; }
.sivupalkki a { color: inherit; }
.logo { display: flex; align-items: center; gap: .55rem; text-decoration: none; font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; }
.logo b { color: var(--keltainen); font-weight: 800; }
.logo .merkki { width: 26px; height: 34px; flex: none; }
.logo.iso { font-size: 1.5rem; justify-content: center; margin-bottom: 1.2rem; }
.logo.iso .merkki { width: 34px; height: 45px; }
[data-theme="light"] .kirjautuminen .logo b { color: var(--grafiitti); }
.valikko { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.valikko a { display: flex; align-items: center; gap: .7rem; min-height: var(--kosketus); padding: 0 .8rem;
  border-radius: var(--sade); text-decoration: none; color: #C9CBCF; font-weight: 700; }
.valikko a:hover { background: #22262C; color: #fff; }
.valikko a.aktiivinen { background: var(--keltainen); color: var(--grafiitti); }
.kayttaja { border-top: 1px solid #2B3038; padding-top: .9rem; display: flex; flex-direction: column; gap: .3rem; }
.kayttaja .nimi { font-weight: 800; text-decoration: none; }
.kayttaja .rooli { color: #A3A7AE; font-size: .85rem; }
.kayttaja .rivi { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .4rem; }
.sisalto { padding: 1.6rem clamp(1rem, 3vw, 2.4rem) 3rem; min-width: 0; max-width: 1400px; }
.alapalkki { display: none; }
.otsake { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.otsake h1 { margin: 0; }

/* ---------- komponentit ---------- */
.paneeli { background: var(--pinta); border: 1px solid var(--reuna); border-radius: 14px; padding: 1.1rem 1.2rem; margin-bottom: 1rem; }
.paneeli.korostus { border-color: var(--keltainen); box-shadow: inset 4px 0 0 var(--keltainen); }
.ohje { color: var(--himmea); }
.ilmoitus { border-radius: var(--sade); padding: .75rem 1rem; margin-bottom: 1rem; font-weight: 700; border: 1px solid; }
.ilmoitus.ok { background: color-mix(in srgb, var(--vihrea) 16%, transparent); border-color: var(--vihrea); }
.ilmoitus.virhe { background: color-mix(in srgb, var(--punainen) 16%, transparent); border-color: var(--punainen); }
.ilmoitus.varoitus { background: color-mix(in srgb, var(--oranssi) 16%, transparent); border-color: var(--oranssi); }

.nappi { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: var(--kosketus);
  padding: 0 1.1rem; border-radius: var(--sade); border: 2px solid var(--keltainen); background: var(--keltainen);
  color: var(--grafiitti); font: 800 1rem var(--fontti); cursor: pointer; text-decoration: none; }
.nappi:hover { filter: brightness(1.06); }
.nappi:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 3px solid var(--sininen); outline-offset: 2px; }
.nappi.toissijainen { background: transparent; color: var(--teksti); border-color: var(--reuna); }
.sivupalkki .nappi.toissijainen { color: #F2F1EC; border-color: #3A4049; }
.nappi.vaara { background: transparent; color: var(--punainen); border-color: var(--punainen); }
.nappi.pieni { min-height: 36px; padding: 0 .75rem; font-size: .88rem; }
form { margin: 0; }

.lomake { display: flex; flex-direction: column; gap: .9rem; margin: .5rem 0 1rem; }
.lomake.rivi { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
.lomake.rivi label { flex: 1 1 220px; }
label { display: flex; flex-direction: column; gap: .3rem; font-weight: 700; font-size: .92rem; }
input, select, textarea { min-height: var(--kosketus); padding: .55rem .75rem; border-radius: var(--sade);
  border: 1px solid var(--reuna); background: var(--pinta2); color: var(--teksti); font: 500 1rem var(--fontti); width: 100%; }
input[readonly] { opacity: .75; }
input.koodi { font-size: 1.6rem; letter-spacing: .3em; text-align: center; }

.taulu { width: 100%; border-collapse: collapse; }
.taulu th { text-align: left; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--himmea); padding: .5rem; border-bottom: 1px solid var(--reuna); }
.taulu td { padding: .65rem .5rem; border-bottom: 1px solid var(--reuna); vertical-align: middle; }
.taulu.tiivis td { padding: .4rem .5rem; font-size: .92rem; }
.toiminnot { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.toimintosolu { text-align: right; }
.merkki-tila { display: inline-flex; align-items: center; gap: .35rem; font-weight: 800; font-size: .85rem; }
.merkki-tila::before { content: ""; width: .7rem; height: .7rem; border-radius: 50%; background: var(--teras); }
.merkki-tila.aktiivinen::before, .merkki-tila.ready::before { background: var(--vihrea); }
.merkki-tila.kutsuttu::before, .merkki-tila.degraded::before { background: var(--oranssi); }
.merkki-tila.suljettu::before, .merkki-tila.fault::before { background: var(--punainen); }
.merkki-tila.huolto::before { background: var(--sininen); }
.lista { list-style: none; padding: 0; margin: 0 0 1rem; }
.lista li { padding: .55rem 0; border-bottom: 1px solid var(--reuna); }
.sivutus { display: flex; gap: .5rem; margin-top: 1rem; }
.linkki { word-break: break-all; background: var(--pinta2); padding: .6rem .8rem; border-radius: var(--sade); }

/* ---------- kirjautumissivut ---------- */
.yksin { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem 1rem; }
.kortti.kirjautuminen { width: min(440px, 100%); background: var(--pinta); border: 1px solid var(--reuna); border-radius: 18px; padding: 1.8rem 1.5rem; }
.kirjautuminen h1 { font-size: 1.45rem; }
.kirjautuminen .nappi { width: 100%; margin-top: .3rem; }
.teemanappi { position: fixed; right: 1rem; bottom: 1rem; }
.qr { display: grid; place-items: center; background: #fff; border-radius: 12px; padding: .5rem; margin: .5rem 0 1rem; }
.qr svg { width: 100%; max-width: 260px; height: auto; }
.avain { font-size: 1.05rem; background: var(--pinta2); padding: .6rem .8rem; border-radius: var(--sade); word-break: break-all; }
.koodit { columns: 2; font-size: 1.15rem; padding-left: 1.5rem; }
.lisatieto { margin-top: 1rem; }
.lisatieto summary { cursor: pointer; color: var(--himmea); }

/* ---------- ikonit (yksiväriset, mask) ---------- */
.ik { width: 20px; height: 20px; flex: none; background: currentColor; -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; }
.ik-tila { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 13h4l3-8 4 14 3-6h4' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ik-loki { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h16M4 12h16M4 18h10' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ik-mount { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z' fill='black'/%3E%3C/svg%3E"); }
.ik-laite { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='2' width='12' height='20' rx='2.5' fill='none' stroke='black' stroke-width='2.2'/%3E%3Ccircle cx='12' cy='18' r='1.4'/%3E%3C/svg%3E"); }
.ik-asiakas { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4' fill='black'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7z' fill='black'/%3E%3C/svg%3E"); }
.ik-posti { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='14' rx='2' fill='none' stroke='black' stroke-width='2.2'/%3E%3Cpath d='M4 7l8 6 8-6' fill='none' stroke='black' stroke-width='2.2'/%3E%3C/svg%3E"); }
.ik-asetus { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 7h10M18 7h2M4 17h2M10 17h10' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='16' cy='7' r='2.5' fill='none' stroke='black' stroke-width='2.2'/%3E%3Ccircle cx='8' cy='17' r='2.5' fill='none' stroke='black' stroke-width='2.2'/%3E%3C/svg%3E"); }
.ik-muutos { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2.2'/%3E%3Cpath d='M12 7v5l3 3' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ik-lisaa { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='5' cy='12' r='2.2'/%3E%3Ccircle cx='12' cy='12' r='2.2'/%3E%3Ccircle cx='19' cy='12' r='2.2'/%3E%3C/svg%3E"); }

/* ---------- puhelin ---------- */
@media (max-width: 860px) {
  .kehys { grid-template-columns: 1fr; }
  .sivupalkki { display: none; }
  .sisalto { padding: 1rem 1rem calc(84px + env(safe-area-inset-bottom)); }
  .alapalkki { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    background: var(--grafiitti); border-top: 1px solid #000; padding-bottom: env(safe-area-inset-bottom); }
  .alapalkki a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 62px;
    color: #C9CBCF; text-decoration: none; font-size: .72rem; font-weight: 700; }
  .alapalkki a.aktiivinen { color: var(--keltainen); }
  .alapalkki .ik { width: 24px; height: 24px; }
  /* taulukot korteiksi */
  .taulu thead { display: none; }
  .taulu, .taulu tbody, .taulu tr, .taulu td { display: block; width: 100%; }
  .taulu tr { border: 1px solid var(--reuna); border-radius: 12px; padding: .5rem .8rem; margin-bottom: .7rem; background: var(--pinta2); }
  .taulu td { border: 0; padding: .25rem 0; display: flex; gap: .8rem; justify-content: space-between; text-align: right; }
  .taulu td::before { content: attr(data-otsikko); color: var(--himmea); font-size: .8rem; font-weight: 700; text-align: left; }
  .taulu td.toimintosolu { padding-top: .5rem; }
  .taulu td.toimintosolu::before { content: none; }
  .taulu td.toimintosolu:empty, .taulu td.toimintosolu:has(.toiminnot:empty) { display: none; }
  .toiminnot { justify-content: flex-start; }
  .valikkolista a { display: flex; align-items: center; gap: .8rem; min-height: 56px; padding: 0 1rem; border-bottom: 1px solid var(--reuna); color: var(--teksti); text-decoration: none; font-weight: 700; }
  .paneeli { padding: .9rem; }
}

/* ---------- H3: laitteet, mountpointit, tunnukset ---------- */
.synk-rivi { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.synk-rivi form { margin-left: auto; }
.suodatin { display: flex; flex-direction: column; gap: .7rem; }
.sirut { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .6rem; }
.siru { display: inline-flex; align-items: center; min-height: 36px; padding: 0 .85rem; border-radius: 999px; border: 1px solid var(--reuna);
  color: var(--teksti); text-decoration: none; font-weight: 700; font-size: .9rem; }
.siru.valittu { background: var(--keltainen); border-color: var(--keltainen); color: var(--grafiitti); }
.kortit { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .8rem; }
.laitekortti { display: flex; flex-direction: column; gap: .35rem; background: var(--pinta); border: 1px solid var(--reuna); border-radius: 14px;
  padding: 1rem; color: var(--teksti); text-decoration: none; }
.laitekortti:hover { border-color: var(--keltainen); }
.laitekortti .nimi { font-size: 1.1rem; font-weight: 800; }
.laitekortti .tunnukset { display: flex; gap: .6rem; flex-wrap: wrap; }
.tyyppi { display: inline-block; font-size: .72rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; padding: .15rem .5rem;
  border-radius: 6px; background: var(--pinta2); border: 1px solid var(--reuna); width: fit-content; vertical-align: middle; }
.tyyppi.t-base { background: var(--keltainen); color: var(--grafiitti); border-color: var(--keltainen); }
h1 .tyyppi { font-size: .8rem; }
.ruudukko { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .9rem; }
fieldset { border: 1px solid var(--reuna); border-radius: 12px; padding: .8rem 1rem 1rem; margin: 0; display: flex; flex-direction: column; gap: .8rem; }
legend { font-weight: 800; padding: 0 .4rem; }
.valinnat { display: flex; flex-wrap: wrap; gap: .5rem; }
.valinta { flex-direction: row; align-items: center; gap: .5rem; min-height: var(--kosketus); padding: 0 .9rem; border: 1px solid var(--reuna);
  border-radius: var(--sade); background: var(--pinta2); cursor: pointer; font-weight: 700; }
.valinta input { width: 20px; min-height: 20px; height: 20px; accent-color: var(--keltainen); }
.valinta:has(input:checked) { border-color: var(--keltainen); }
.tiedot { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.2rem; margin: 1rem 0; }
.tiedot dt { color: var(--himmea); font-weight: 700; }
.tiedot dd { margin: 0; word-break: break-all; }
.tiedot .iso { font-size: 1.4rem; font-weight: 500; letter-spacing: .04em; color: var(--teksti); background: var(--pinta2); padding: .2rem .6rem; border-radius: 8px; width: fit-content; }
.rivi { display: flex; gap: .5rem; flex-wrap: wrap; }
.tunnus { border: 1px solid var(--reuna); border-radius: 12px; padding: .9rem 1rem; margin-bottom: .9rem; background: var(--pinta2); }
.tunnus.suljettu { opacity: .7; }
.tunnus header { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; margin-bottom: .4rem; }
.tunnus header b { font-size: 1.1rem; }
.tunnus h3 { margin: .6rem 0 .2rem; text-transform: uppercase; letter-spacing: .05em; }
.oikeus { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.oikeus form { margin-left: auto; }
.toiminnot.vasen { justify-content: flex-start; margin-top: .6rem; }
details > summary { list-style: none; width: fit-content; }
details > summary::-webkit-details-marker { display: none; }
details[open] > summary { margin-bottom: .6rem; }

/* ---------- H4: tila ja loki ---------- */
.yhteenveto { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.luku { background: var(--pinta); border: 1px solid var(--reuna); border-radius: 14px; padding: .8rem 1rem; display: flex; flex-direction: column; gap: .2rem; }
.luku span { color: var(--himmea); font-weight: 700; font-size: .85rem; }
.luku b { font-size: 1.5rem; font-weight: 900; }
.halytykset { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.halytys { border-radius: 12px; padding: .75rem 1rem; border: 1px solid; font-weight: 600; }
.halytys b { font-family: var(--mono); margin-right: .4rem; }
.halytys.fault { border-color: var(--punainen); background: color-mix(in srgb, var(--punainen) 15%, transparent); }
.halytys.degraded { border-color: var(--oranssi); background: color-mix(in srgb, var(--oranssi) 14%, transparent); }
.mountkortit { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .9rem; margin-bottom: 1rem; }
.mountkortti { background: var(--pinta); border: 1px solid var(--reuna); border-left: 6px solid var(--teras); border-radius: 14px; padding: 1rem 1.1rem; }
.mountkortti.ready { border-left-color: var(--vihrea); }
.mountkortti.degraded { border-left-color: var(--oranssi); }
.mountkortti.fault { border-left-color: var(--punainen); }
.mountkortti header { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.mountkortti .nimi { font-size: 1.3rem; }
.mountkortti .syy { margin: .3rem 0 .6rem; font-weight: 700; }
.mountkortti .tiedot { margin: .4rem 0; }
.tilamerkki { font-family: var(--mono); font-weight: 500; font-size: .8rem; padding: .2rem .55rem; border-radius: 6px; color: #fff; background: var(--teras); }
.tilamerkki.ready { background: var(--vihrea); }
.tilamerkki.degraded { background: var(--oranssi); color: var(--grafiitti); }
.tilamerkki.fault { background: var(--punainen); }
.mountkortti.fault .tilamerkki { animation: vilkku 1s steps(2, start) infinite; }
@keyframes vilkku { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .mountkortti.fault .tilamerkki { animation: none; } }
.roverit { list-style: none; padding: 0; margin: .4rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.roverit li { background: var(--pinta2); border-radius: 6px; padding: .15rem .5rem; }
.loki-otsake { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; }
.loki { list-style: none; margin: 0; padding: 0; max-height: 70vh; overflow-y: auto; }
.loki li { display: grid; grid-template-columns: auto 1fr auto; gap: .8rem; align-items: baseline; padding: .45rem .2rem; border-bottom: 1px solid var(--reuna); }
.loki li.uusi { animation: uusi 2s ease-out; }
@keyframes uusi { from { background: color-mix(in srgb, var(--keltainen) 25%, transparent); } to { background: transparent; } }
.loki time { color: var(--himmea); font-size: .85rem; white-space: nowrap; }
.loki .tyyppi-koodi { color: var(--himmea); font-size: .75rem; }
.loki li.taso-warning { box-shadow: inset 3px 0 0 var(--oranssi); }
.loki li.taso-error { box-shadow: inset 3px 0 0 var(--punainen); }
@media (max-width: 860px) {
  .loki li { grid-template-columns: 1fr; gap: .1rem; }
  .loki .tyyppi-koodi { display: none; }
  .mountkortit { grid-template-columns: 1fr; }
}
@media (max-width: 860px) { .yhteenveto { grid-template-columns: 1fr 1fr; } .luku b { font-size: 1.2rem; overflow-wrap: anywhere; } }
pre.viesti { white-space: pre-wrap; font-family: var(--mono); font-size: .88rem; background: var(--pinta2); padding: 1rem; border-radius: 10px; margin: 0; }
.otsake h2 { margin: 0; }