/* Ohjaamo – valvomon ilme: grafiitti, taksivalon keltainen korostus, selkeät tilavärit tekstillä. */
:root {
  --tausta: #0f1216;
  --pinta: #161b21;
  --pinta2: #1d232b;
  --raja: #2a323c;
  --teksti: #e8ecf1;
  --himmea: #93a0ae;
  --korostus: #ffc300;
  --korostus-teksti: #1a1400;
  --ok: #2fbf71;
  --varoitus: #f0a202;
  --alhaalla: #ff5a5f;
  --tieto: #5aa9ff;
  --ei: #5c6773;
  --sade: 10px;
  --fontti: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--tausta); color: var(--teksti); font: 15px/1.45 var(--fontti); -webkit-text-size-adjust: 100%; }
a { color: var(--korostus); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select { font: inherit; color: inherit; }
.piilo { display: none !important; }

/* Kehys */
.kehys { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 100vh; }
.kehys > *, .paa, #sisalto, .kortti, .kaavio { min-width: 0; }
.sivupalkki { background: var(--pinta); border-right: 1px solid var(--raja); padding: 18px 12px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 4px; }
.logo { display: flex; align-items: center; gap: 10px; padding: 0 8px 18px; font-weight: 700; letter-spacing: .04em; }
.logo-merkki { width: 30px; height: 30px; border-radius: 8px; background: var(--korostus); color: var(--korostus-teksti); display: grid; place-items: center; font-weight: 800; font-size: 15px; }
.logo small { display: block; font-weight: 400; color: var(--himmea); font-size: 11px; letter-spacing: 0; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--teksti); font-weight: 500; }
.nav a:hover { background: var(--pinta2); text-decoration: none; }
.nav a.valittu { background: var(--pinta2); box-shadow: inset 3px 0 0 var(--korostus); }
.nav .merkki { margin-left: auto; min-width: 22px; padding: 0 6px; border-radius: 11px; font-size: 12px; text-align: center; background: var(--alhaalla); color: #fff; font-weight: 700; }
.nav .merkki.var { background: var(--varoitus); color: #1a1100; }
.sivupalkki .ala { margin-top: auto; color: var(--himmea); font-size: 12px; padding: 8px; }
.paa { padding: 22px 28px 90px; max-width: 1400px; width: 100%; }
.ylapalkki { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.ylapalkki h1 { font-size: 22px; margin: 0; font-weight: 700; }
.ylapalkki .tuore { color: var(--himmea); font-size: 13px; margin-left: auto; font-family: var(--mono); }
.alanav { display: none; }

/* Kortit ja ruudukot */
.kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.kpi .k { background: var(--pinta); border: 1px solid var(--raja); border-radius: var(--sade); padding: 14px 16px; }
.kpi .k .arvo { font: 700 26px/1.1 var(--mono); }
.kpi .k .seli { color: var(--himmea); font-size: 12.5px; margin-top: 4px; }
.kpi .k.hal .arvo { color: var(--alhaalla); }
.kpi .k.ok .arvo { color: var(--ok); }
.osio { margin: 26px 0 10px; display: flex; align-items: baseline; gap: 10px; }
.osio h2 { font-size: 16px; margin: 0; letter-spacing: .02em; }
.osio .lisa { color: var(--himmea); font-size: 13px; }
.ruudukko { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 12px; }
.kortti { background: var(--pinta); border: 1px solid var(--raja); border-radius: var(--sade); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.kortti.alhaalla { border-color: color-mix(in srgb, var(--alhaalla) 60%, var(--raja)); }
.kortti.varoitus { border-color: color-mix(in srgb, var(--varoitus) 55%, var(--raja)); }
.kortti .ots { display: flex; align-items: flex-start; gap: 10px; }
.kortti .ots h3 { margin: 0; font-size: 15.5px; line-height: 1.25; }
.kortti .ots h3 a { color: var(--teksti); }
.kortti .ryhma { color: var(--himmea); font-size: 12px; }
.kortti .kuvaus { color: var(--himmea); font-size: 13px; margin: 0; }
.mittarit { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mittarit div { background: var(--pinta2); border-radius: 7px; padding: 6px 8px; min-width: 0; }
.mittarit b { display: block; font: 700 15px/1.2 var(--mono); }
.mittarit span { color: var(--himmea); font-size: 11px; display: block; line-height: 1.25; }
.napit { display: flex; flex-wrap: wrap; gap: 6px; }
.nappi { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--raja); background: var(--pinta2); color: var(--teksti); font-weight: 600; font-size: 13.5px; cursor: pointer; text-decoration: none; }
.nappi:hover { border-color: var(--himmea); text-decoration: none; }
.nappi.ens { background: var(--korostus); color: var(--korostus-teksti); border-color: var(--korostus); }
.nappi.ens:hover { filter: brightness(1.06); }
.nappi.vaara { border-color: color-mix(in srgb, var(--alhaalla) 60%, var(--raja)); color: #ffb3b5; }
.nappi:disabled { opacity: .5; cursor: default; }

/* Tilasiru: aina väri + teksti */
.tila { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 7px; border-radius: 20px; font-size: 12px; font-weight: 700; white-space: nowrap; margin-left: auto; }
.tila::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.tila.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.tila.varoitus { color: var(--varoitus); background: color-mix(in srgb, var(--varoitus) 16%, transparent); }
.tila.alhaalla { color: var(--alhaalla); background: color-mix(in srgb, var(--alhaalla) 16%, transparent); }
.tila.ei_tietoa { color: var(--himmea); background: color-mix(in srgb, var(--ei) 25%, transparent); }
.syy { color: var(--alhaalla); font-size: 12.5px; margin: 0; }
.kortti.varoitus .syy { color: var(--varoitus); }

/* Hälytykset */
.halyt { display: flex; flex-direction: column; gap: 8px; }
.haly { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; background: var(--pinta); border: 1px solid var(--raja); border-left: 4px solid var(--tieto); border-radius: 8px; padding: 10px 12px; }
.haly.kriittinen { border-left-color: var(--alhaalla); }
.haly.varoitus { border-left-color: var(--varoitus); }
.haly .taso { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--himmea); }
.haly.kriittinen .taso { color: var(--alhaalla); }
.haly.varoitus .taso { color: var(--varoitus); }
.haly .aika { color: var(--himmea); font: 12px var(--mono); }
.tyhja { color: var(--himmea); padding: 18px; text-align: center; background: var(--pinta); border: 1px dashed var(--raja); border-radius: var(--sade); }

/* Taulukot */
.taulu-kaari { overflow-x: auto; background: var(--pinta); border: 1px solid var(--raja); border-radius: var(--sade); }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--raja); vertical-align: top; }
th { color: var(--himmea); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; position: sticky; top: 0; background: var(--pinta); cursor: default; white-space: nowrap; }
th.lajittele { cursor: pointer; }
th.lajittele:hover { color: var(--teksti); }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: color-mix(in srgb, var(--pinta2) 70%, transparent); }
td.num, th.num { text-align: right; font-family: var(--mono); white-space: nowrap; }
td.mono { font-family: var(--mono); font-size: 12.5px; }
.himmea { color: var(--himmea); }
.pieni { font-size: 12px; }
.siru { display: inline-block; padding: 1px 8px; border-radius: 12px; background: var(--pinta2); border: 1px solid var(--raja); font-size: 12px; white-space: nowrap; }
.siru.ok { border-color: color-mix(in srgb, var(--ok) 50%, var(--raja)); color: var(--ok); }
.siru.var { border-color: color-mix(in srgb, var(--varoitus) 50%, var(--raja)); color: var(--varoitus); }
.siru.pun { border-color: color-mix(in srgb, var(--alhaalla) 50%, var(--raja)); color: var(--alhaalla); }

/* Suodattimet */
.suodatin { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; align-items: center; }
.suodatin input[type=search], .suodatin select { background: var(--pinta); border: 1px solid var(--raja); border-radius: 8px; padding: 8px 10px; min-width: 200px; }
.suodatin input[type=search] { flex: 1; max-width: 420px; }

/* Kaaviot */
.kaavio { background: var(--pinta); border: 1px solid var(--raja); border-radius: var(--sade); padding: 12px 14px; }
.kaavio h4 { margin: 0 0 8px; font-size: 13px; color: var(--himmea); font-weight: 600; }
.kaavio svg { width: 100%; height: auto; display: block; }
.palkki-ok { fill: var(--ok); }
.palkki-var { fill: var(--varoitus); }
.palkki-pun { fill: var(--alhaalla); }
.palkki-ei { fill: var(--raja); }
.palkki-liik { fill: var(--korostus); }
.akseli { fill: var(--himmea); font: 10px var(--mono); }
.kaksi { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tiedot { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 13.5px; }
.tiedot dt { color: var(--himmea); }
.tiedot dd { margin: 0; font-family: var(--mono); font-size: 12.5px; word-break: break-word; }
.valilehdet { display: flex; gap: 4px; border-bottom: 1px solid var(--raja); margin: 18px 0 12px; overflow-x: auto; }
.valilehdet button { background: none; border: 0; padding: 9px 12px; color: var(--himmea); cursor: pointer; border-bottom: 2px solid transparent; font-weight: 600; white-space: nowrap; }
.valilehdet button.valittu { color: var(--teksti); border-bottom-color: var(--korostus); }
.mittari { height: 8px; border-radius: 4px; background: var(--pinta2); overflow: hidden; }
.mittari > i { display: block; height: 100%; background: var(--ok); }
.mittari.var > i { background: var(--varoitus); }
.mittari.pun > i { background: var(--alhaalla); }
pre.ufw { background: var(--pinta); border: 1px solid var(--raja); border-radius: var(--sade); padding: 12px; font: 12px/1.5 var(--mono); overflow-x: auto; white-space: pre; color: var(--himmea); }

/* Kirjautuminen */
.kirjaudu { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: radial-gradient(1200px 500px at 50% -10%, #23201280, transparent), var(--tausta); }
.kirjaudu form { width: 100%; max-width: 380px; background: var(--pinta); border: 1px solid var(--raja); border-radius: 14px; padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.kirjaudu .logo { padding: 0 0 6px; font-size: 18px; }
label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--himmea); }
input[type=text], input[type=password], input[type=email] { background: var(--tausta); border: 1px solid var(--raja); border-radius: 8px; padding: 11px 12px; font-size: 16px; color: var(--teksti); }
input:focus, select:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--korostus); outline-offset: 1px; }
.virhe { color: #ffb3b5; background: color-mix(in srgb, var(--alhaalla) 12%, transparent); border: 1px solid color-mix(in srgb, var(--alhaalla) 40%, transparent); padding: 9px 11px; border-radius: 8px; font-size: 13.5px; }
.ohje { color: var(--himmea); font-size: 13px; margin: 0; }
.ilmoitus { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); background: var(--pinta2); border: 1px solid var(--raja); padding: 10px 16px; border-radius: 10px; z-index: 50; box-shadow: 0 8px 30px #0008; }
.lomake { background: var(--pinta); border: 1px solid var(--raja); border-radius: var(--sade); padding: 16px; display: flex; flex-direction: column; gap: 12px; max-width: 520px; }
.qr { background: #fff; padding: 12px; border-radius: 8px; width: max-content; }
.qr img { display: block; }

.nav svg { width: 18px; height: 18px; flex: none; }
.piilo-tyopoyta { display: none; }
.piilo-tyopoyta svg { width: 18px; height: 18px; }
.mittari-svg { width: 100%; height: 8px; margin-top: 8px; display: block; }
.ylapalkki .nappi { padding: 6px 10px; }

/* Puhelin */
@media (max-width: 860px) {
  .kehys { grid-template-columns: minmax(0, 1fr); }
  .ylapalkki .tuore { display: none; }
  .sivupalkki { display: none; }
  .paa { padding: 14px 12px 96px; }
  .ylapalkki h1 { font-size: 19px; }
  .alanav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; bottom: 0; left: 0; right: 0; background: var(--pinta); border-top: 1px solid var(--raja); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); z-index: 40; }
  .alanav a { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--himmea); font-size: 11px; padding: 4px 0; position: relative; }
  .alanav a.valittu { color: var(--korostus); }
  .alanav a svg { width: 22px; height: 22px; }
  .alanav .merkki { position: absolute; top: 0; right: 22%; min-width: 16px; height: 16px; border-radius: 8px; background: var(--alhaalla); color: #fff; font-size: 10px; line-height: 16px; text-align: center; font-weight: 700; }
  .ruudukko { grid-template-columns: 1fr; }
  .kaksi { grid-template-columns: 1fr; }
  .kpi { grid-template-columns: repeat(2, 1fr); }
  .kpi .k .arvo { font-size: 22px; }
  .haly { grid-template-columns: 1fr; gap: 4px; }
  .piilo-puh { display: none; }
  .piilo-tyopoyta { display: inline-flex; }
}