/* My Speed -portaali (myspeed.palsta.eu). Värit samat kuin digiroad.palsta.eu:ssa. */
:root {
  --tausta: #111418;
  --pinta: #1c2128;
  --reuna: #2c333d;
  --teksti: #f2f4f7;
  --himmea: #9aa4b2;
  --korostus: #2f6fdb;
  --vihrea: #2fa84f;
  --punainen: #d0021b;
  --virhe: #ff6b6b;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--tausta);
  color: var(--teksti);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
body { display: flex; flex-direction: column; }

.ylapalkki {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid var(--reuna); background: var(--pinta);
}
.ylapalkki h1 { margin: 0; font-size: 1.4rem; }
.tili { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: .95rem; }
.tili label { display: flex; align-items: center; gap: 6px; color: var(--himmea); }

select, input {
  font: inherit; color: var(--teksti); background: var(--tausta);
  border: 1px solid var(--reuna); border-radius: 8px; padding: 8px 10px;
}
.nappi {
  font: inherit; font-weight: 600; color: #fff; background: var(--korostus); border: 0;
  border-radius: 8px; padding: 10px 16px; cursor: pointer;
}
.nappi.vaara { background: transparent; border: 1px solid var(--punainen); color: var(--virhe); }
.nappi.valkoinen { background: #fff; color: var(--punainen); font-size: 1.1rem; padding: 12px 28px; }
.linkkinappi { font: inherit; color: var(--himmea); background: none; border: 0; text-decoration: underline; cursor: pointer; padding: 0; }
.himmea { color: var(--himmea); }
.pieni { font-size: .8rem; line-height: 1.4; }
.virhe { color: var(--virhe); margin: 0; min-height: 0; }
.virhe:empty { display: none; }

.kirjautuminen { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 10vh 16px 16px; }
.kortti {
  width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 10px;
  background: var(--pinta); border: 1px solid var(--reuna); border-radius: 12px; padding: 20px;
}
.kortti h2, .kortti p { margin: 0; }

.sovellus { flex: 1; min-height: 0; display: flex; }
.paneeli {
  width: 380px; flex: 0 0 380px; overflow-y: auto; padding: 16px; border-right: 1px solid var(--reuna);
  display: flex; flex-direction: column; gap: 18px;
}
.kartta { flex: 1; min-height: 300px; background: #20262e; }

.kokonais { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.kokonais > div { min-width: 0; }
.valo {
  display: inline-block; width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
  background: #3a424d; box-shadow: inset 0 -3px 6px rgba(0,0,0,.35);
}
.valo.iso { width: 52px; height: 52px; }
.valo.vihrea { background: var(--vihrea); box-shadow: 0 0 12px rgba(47,168,79,.55), inset 0 -3px 6px rgba(0,0,0,.3); }
.valo.punainen { background: var(--punainen); box-shadow: 0 0 12px rgba(208,2,27,.55), inset 0 -3px 6px rgba(0,0,0,.3); }

.valot { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.valot button {
  font: inherit; color: var(--teksti); background: var(--pinta); border: 1px solid var(--reuna); border-radius: 10px;
  padding: 8px 4px 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer;
}
.valot button[aria-current="true"] { border-color: var(--korostus); outline: 2px solid var(--korostus); }
.valot .pvm { font-size: .8rem; }
.valot .pros { font-size: .72rem; color: var(--himmea); }

.paiva h2 { margin: 0 0 4px; font-size: 1.15rem; }
.paiva p { margin: 0 0 10px; }
.jaksot { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.jaksot button {
  width: 100%; text-align: left; font: inherit; color: var(--teksti); background: var(--pinta);
  border: 1px solid var(--reuna); border-left: 4px solid var(--punainen); border-radius: 8px; padding: 8px 10px; cursor: pointer;
}
.jaksot button:hover { border-color: var(--korostus); border-left-color: var(--punainen); }
.jaksot .yli { font-weight: 700; }
.jaksot .yli.reilu { color: var(--virhe); }

.leaflet-tooltip.nopeus { font-size: .9rem; font-weight: 600; }

.halytys {
  position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.halytys-laatikko {
  width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; background: var(--punainen); color: #fff;
  border-radius: 16px; padding: 28px; box-shadow: 0 12px 40px rgba(0,0,0,.6); text-align: center;
}
.halytys-laatikko h2 { margin: 0 0 8px; font-size: 2rem; }
.halytys-laatikko ul { text-align: left; margin: 12px 0 20px; padding-left: 20px; font-size: 1.05rem; line-height: 1.6; }
.halytys-laatikko .linkkinappi { color: #fff; }

@media (max-width: 760px) {
  .ylapalkki { padding: 8px 16px; }
  .tili { width: 100%; justify-content: space-between; }
  .tili label { flex: 1 1 100%; }
  .tili select { flex: 1; min-width: 0; }
  .valot button { padding: 6px 2px 4px; }
  .valot .pros { font-size: .66rem; }
  .sovellus { flex-direction: column; }
  .paneeli { width: 100%; min-width: 0; flex: 0 0 auto; border-right: 0; border-bottom: 1px solid var(--reuna); overflow: visible; }
  .kartta { flex: 0 0 65vh; }
  body { height: auto; }
}