/* ===========================================================
   TELOG-raportointiportaali — tyylit
   Brändi: petrooli #0d5578 · indigo #2a3d78 · laventeli #7a6aa8
   =========================================================== */
:root{
  --petrol:#0d5578; --petrol-tumma:#08405f;
  --indigo:#2a3d78; --lavender:#7a6aa8; --lavender-reuna:#9d99d6;
  --teksti:#16243a; --teksti-vaalea:#5a6b80;
  --tausta:#eef2f6; --kortti:#ffffff;
  --raja:#dde5ec; --raja-tumma:#c6d2dd;
  --vihrea:#1d9e75; --punainen:#c0473a;
  --varjo:0 1px 2px rgba(20,40,60,.06), 0 8px 28px rgba(20,40,60,.08);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  color:var(--teksti);
  background-color:var(--tausta);
  background-image:url('telog-tausta.jpg');
  background-size:cover; background-position:center;
  background-attachment:fixed; background-repeat:no-repeat;
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
h1{font-size:1.6rem;margin:0 0 .2em;letter-spacing:-.01em;}
h2{font-size:1.2rem;margin:0 0 .4em;}

/* ---------- Yläpalkki ---------- */
.ylapalkki{
  background:linear-gradient(100deg,var(--petrol-tumma) 0%,var(--petrol) 42%,var(--indigo) 100%);
  border-bottom:3px solid var(--lavender-reuna);color:#eaf2f7;box-shadow:var(--varjo);
}
.ylapalkki-sisalto{
  max-width:1080px;margin:0 auto;padding:0 24px;height:76px;
  display:flex;align-items:center;justify-content:space-between;
}
.brandi{display:flex;align-items:center;gap:13px;}
.brandi-logo{height:46px;display:block;filter:drop-shadow(0 1px 4px rgba(0,0,0,.25));}
.ylapalkki .brandi-ala{color:#cfe0ec;opacity:1;}
/* login-näkymän sanamerkki + yhteinen ala-teksti */
.brandi-merkki{color:var(--lavender);font-size:1.05rem;transform:translateY(1px);}
.brandi-merkki.iso{font-size:1.7rem;}
.brandi-teksti{font-weight:700;letter-spacing:.18em;font-size:1.05rem;}
.brandi-teksti.iso{font-size:1.5rem;letter-spacing:.22em;}
.brandi-ala{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;opacity:.7;}
.ylapalkki-oikea{display:flex;align-items:center;gap:18px;font-size:.85rem;}
.linkki-takaisin{opacity:.85;}
.linkki-takaisin:hover{opacity:1;}
.kayttaja{display:flex;flex-direction:column;line-height:1.2;text-align:right;}
.kayttaja-nimi{font-weight:600;}
.kayttaja-rooli{font-size:.72rem;opacity:.7;}
.linkki-ulos{
  border:1px solid rgba(255,255,255,.35);border-radius:7px;
  padding:5px 12px;font-size:.8rem;transition:.15s;
}
.linkki-ulos:hover{background:rgba(255,255,255,.12);}

/* ---------- Sisältöalue ---------- */
.sisalto{max-width:1080px;margin:0 auto;padding:32px 24px 48px;}
.tervetulo{margin-bottom:24px;}
.tervetulo p{color:var(--teksti-vaalea);margin:.2em 0 0;}

/* ---------- Sovellusruudukko ---------- */
.ruudukko{
  display:grid;gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
}
.ruutu{
  position:relative;background:var(--kortti);border:1px solid var(--raja);
  border-radius:16px;padding:22px 20px;box-shadow:var(--varjo);
  display:flex;flex-direction:column;gap:10px;
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s;
}
.ruutu:hover{transform:translateY(-3px);
  box-shadow:0 4px 10px rgba(13,40,58,.1),0 16px 32px rgba(13,40,58,.1);
  border-color:var(--raja-tumma);}
.ruutu-ikoni{
  width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  background:var(--petrol);color:#fff;
}
.ruutu-ikoni svg{width:27px;height:27px;}
.ruutu-otsikko{font-weight:600;font-size:1.05rem;}
.ruutu-kuvaus{font-size:.85rem;color:var(--teksti-vaalea);line-height:1.45;}
.merkki-tulossa{
  position:absolute;top:16px;right:16px;font-size:.68rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--lavender);
  background:#f0edf6;border-radius:20px;padding:3px 10px;
}
.ruutu-tulossa .ruutu-ikoni{opacity:.85;}
.tyhja{color:var(--teksti-vaalea);}

/* Ikonien brändivärit (sovellusmainen launcher) */
.ikoni-tuotanto{background:var(--petrol);}
.ikoni-co2{background:var(--vihrea);}
.ikoni-projekti{background:var(--indigo);}
.ikoni-asiakas{background:var(--lavender);}
.ikoni-kumppani{background:var(--vihrea);}
.ikoni-liiketoiminta{background:#1f4f6b;}
.ikoni-kassaennuste{background:#0f7a73;}
.ikoni-tuloslaskelma{background:#5a6aa8;}
.ikoni-riski{background:#b34a3a;}

/* ---------- Raporttisivun otsikko ---------- */
.raportti-otsikko{display:flex;align-items:center;gap:16px;margin-bottom:22px;}
.raportti-ikoni{
  width:48px;height:48px;border-radius:13px;display:grid;place-items:center;
  background:var(--petrol);color:#fff;flex:none;
}
.raportti-ikoni svg{width:25px;height:25px;}
.raportti-kuvaus{color:var(--teksti-vaalea);margin:.15em 0 0;}

/* ---------- KPI-kortit ---------- */
.kpi-rivi{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));margin-bottom:18px;}
.kpi{background:var(--kortti);border:1px solid var(--raja);border-radius:13px;
  padding:16px 18px;box-shadow:var(--varjo);}
.kpi-arvo{display:block;font-size:1.7rem;font-weight:700;color:var(--petrol);letter-spacing:-.02em;}
.kpi-otsikko{display:block;font-size:.78rem;color:var(--teksti-vaalea);margin-top:2px;}
.tila-edella{color:var(--vihrea);}
.tila-jaljessa{color:var(--punainen);}

/* ---------- Kaaviokortti ---------- */
.kaavio-kortti{background:var(--kortti);border:1px solid var(--raja);border-radius:16px;
  padding:18px 18px 8px;box-shadow:var(--varjo);}
.kaavio-selite{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:8px;font-size:.82rem;color:var(--teksti-vaalea);}
.selite{display:flex;align-items:center;gap:7px;}
.laatikko{width:13px;height:13px;border-radius:3px;display:inline-block;}
.laatikko.ennuste{background:var(--lavender);}
.laatikko.toteuma{background:var(--petrol);}
.viiva{width:18px;height:0;border-top:2.6px solid var(--indigo);display:inline-block;}
#kaavio{width:100%;height:auto;display:block;}

/* ---------- "Tulossa"-kortti ---------- */
.tulossa-kortti{background:var(--kortti);border:1px solid var(--raja);border-radius:16px;
  padding:40px;text-align:center;box-shadow:var(--varjo);max-width:560px;}
.tulossa-merkki{width:64px;height:64px;border-radius:18px;background:#eef2f6;
  color:var(--petrol);display:grid;place-items:center;margin:0 auto 18px;}
.tulossa-merkki svg{width:32px;height:32px;}
.tulossa-kortti p{color:var(--teksti-vaalea);max-width:44ch;margin:0 auto 22px;}

/* ---------- Painike ---------- */
.painike{display:inline-block;background:var(--petrol);color:#fff;border:none;
  border-radius:9px;padding:10px 20px;font-size:.92rem;font-weight:600;cursor:pointer;
  transition:.15s;}
.painike:hover{background:var(--petrol-tumma);}
.painike-iso{width:100%;padding:13px;font-size:1rem;margin-top:6px;}

/* ---------- Kirjautumissivu ---------- */
.kirjautumissivu{min-height:100vh;display:grid;place-items:center;
  background:linear-gradient(155deg,var(--petrol),var(--indigo));padding:24px;}
.kirjautumis-kortti{background:#fff;border-radius:20px;padding:40px 36px;
  width:100%;max-width:380px;box-shadow:0 20px 60px rgba(0,0,0,.25);}
.kirjautumis-brandi{display:flex;flex-direction:column;align-items:center;gap:2px;margin-bottom:26px;}
.kirjautumis-lomake label{display:block;margin-bottom:14px;}
.kirjautumis-lomake label span{display:block;font-size:.82rem;color:var(--teksti-vaalea);margin-bottom:5px;}
.kirjautumis-lomake input{width:100%;padding:11px 13px;border:1px solid var(--raja-tumma);
  border-radius:9px;font-size:.95rem;transition:.15s;}
.kirjautumis-lomake input:focus{outline:none;border-color:var(--petrol);
  box-shadow:0 0 0 3px rgba(13,85,120,.12);}
.kirjautumis-vihje{text-align:center;font-size:.76rem;color:var(--teksti-vaalea);margin:18px 0 0;}
.virhe{background:#fbeaea;color:var(--punainen);border:1px solid #f3c9c5;
  border-radius:9px;padding:10px 13px;font-size:.86rem;margin-bottom:16px;}

/* ---------- 403 ---------- */
.estoa{max-width:480px;margin:80px auto;text-align:center;padding:24px;}

/* ---------- Alapalkki ---------- */
.alapalkki{max-width:1080px;margin:0 auto;padding:18px 24px 30px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
  font-size:.76rem;color:var(--teksti-vaalea);}
.luokitus{color:var(--punainen);font-weight:600;}

@media(max-width:520px){
  .ylapalkki-sisalto{padding:0 16px;}
  .sisalto{padding:22px 16px 36px;}
  .kayttaja{display:none;}
}

/* ===========================================================
   Raporttikehys (yläpalkki + iframe)
   =========================================================== */
html,body{height:100%;}
body.raportti-kehys{margin:0;display:flex;flex-direction:column;height:100vh;background:var(--tausta);}
.kehys-palkki{display:flex;align-items:center;gap:16px;background:var(--petrol);color:#fff;
  padding:0 18px;height:48px;flex:none;box-shadow:var(--varjo);}
.kehys-takaisin{color:#fff;font-weight:600;font-size:.9rem;border:1px solid rgba(255,255,255,.35);
  border-radius:7px;padding:5px 12px;transition:.15s;}
.kehys-takaisin:hover{background:rgba(255,255,255,.12);}
.kehys-otsikko{font-weight:600;font-size:.95rem;}
.kehys-paiv{margin-left:auto;font-size:.8rem;opacity:.85;}
.kehys-iframe{flex:1;width:100%;border:0;display:block;}

/* ===========================================================
   Datan tuontisivu
   =========================================================== */
.admin-painike{margin-top:14px;}
.lataus-kortti{background:var(--kortti);border:1px solid var(--raja);border-radius:16px;
  padding:24px;box-shadow:var(--varjo);max-width:520px;}
.lataus-kentta{display:block;margin-bottom:16px;}
.lataus-kentta span{display:block;font-size:.82rem;color:var(--teksti-vaalea);margin-bottom:5px;}
.lataus-kentta select,.lataus-kentta input[type=file]{width:100%;padding:10px 12px;
  border:1px solid var(--raja-tumma);border-radius:9px;font-size:.92rem;background:#fff;}
.lataus-tulos{margin-top:14px;padding:11px 13px;border-radius:9px;font-size:.86rem;}
.tulos-ok{background:#e7f4ee;color:#0f6e56;border:1px solid #bfe3d3;}
.tulos-virhe{background:#fbeaea;color:var(--punainen);border:1px solid #f3c9c5;}
.lataus-otsikko{margin:28px 0 12px;font-size:1.1rem;}
.lataus-tila{background:var(--kortti);border:1px solid var(--raja);border-radius:14px;
  box-shadow:var(--varjo);overflow:hidden;max-width:640px;}
.tila-taulu{width:100%;border-collapse:collapse;font-size:.88rem;}
.tila-taulu th,.tila-taulu td{text-align:left;padding:11px 16px;border-bottom:1px solid var(--raja);}
.tila-taulu th{background:#f7f9fb;color:var(--teksti-vaalea);font-weight:600;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.03em;}
.tila-taulu tr:last-child td{border-bottom:none;}
.ei-dataa{color:var(--teksti-vaalea);font-style:italic;}

/* ===========================================================
   Käyttäjähallinta (tunnukset.php, vaihda-salasana.php)
   =========================================================== */
.admin-toiminnot{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;}
.painike-harmaa{background:#5c6a76;}
.painike-harmaa:hover{background:#48535d;}
.painike-poista{background:#fff;color:var(--punainen);border:1px solid #e6b3ad;}
.painike-poista:hover{background:#fbeaea;}
.painike-pieni{padding:7px 16px;font-size:.85rem;}

/* Kortit ja kentät (jaettu vaihda-salasana.php:n kanssa) */
.kt-kortti{background:var(--kortti);border:1px solid var(--raja);border-radius:16px;
  padding:22px;box-shadow:var(--varjo);margin-bottom:18px;max-width:760px;}
.kt-kortti-otsikko{font-size:1rem;margin:0 0 14px;color:var(--teksti);}
.kt-rivi{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;margin-bottom:16px;}
.kt-kentta{display:flex;flex-direction:column;flex:1 1 200px;}
.kt-kentta span{font-size:.8rem;color:var(--teksti-vaalea);margin-bottom:5px;}
.kt-kentta input{padding:10px 12px;border:1px solid var(--raja-tumma);border-radius:9px;font-size:.92rem;width:100%;}
.kt-kentta input:focus{outline:none;border-color:var(--petrol);box-shadow:0 0 0 3px rgba(13,85,120,.12);}
.kt-vihje{font-size:.82rem;color:var(--teksti-vaalea);margin:4px 0 14px;}

/* Käyttäjätyyppi (radiovalinta) */
.kt-tyyppi{border:1px solid var(--raja);border-radius:11px;padding:10px 14px;margin:0 0 14px;}
.kt-tyyppi legend{font-size:.78rem;color:var(--teksti-vaalea);text-transform:uppercase;letter-spacing:.03em;padding:0 6px;}
.kt-tyyppi label{display:flex;align-items:center;gap:9px;font-size:.92rem;margin:7px 0;cursor:pointer;}

/* Näkyvät raportit + erikoisoikeus */
.kt-raportit{border:1px solid var(--raja);border-radius:11px;padding:12px 14px;margin:0 0 14px;}
.kt-raportit legend{font-size:.78rem;color:var(--teksti-vaalea);text-transform:uppercase;letter-spacing:.03em;padding:0 6px;}
.kt-raportit label{display:inline-flex;align-items:center;gap:7px;font-size:.88rem;margin:5px 16px 5px 0;}
.kt-erikoisoikeus{display:flex;align-items:center;gap:8px;font-size:.9rem;background:#f4f7fa;
  border:1px solid var(--raja);border-radius:10px;padding:10px 13px;margin:0 0 14px;}

/* "Luo uusi käyttäjä" napin takana (details/summary) */
.kt-luo{margin-bottom:28px;}
.kt-luo > summary{display:inline-flex;align-items:center;gap:9px;cursor:pointer;list-style:none;
  background:linear-gradient(100deg,var(--petrol),var(--indigo));color:#fff;border:1px solid transparent;
  border-radius:11px;padding:12px 20px;font-size:.95rem;font-weight:600;box-shadow:var(--varjo);
  transition:filter .15s, transform .14s;}
.kt-luo > summary:hover{filter:brightness(1.08);transform:translateY(-1px);}
.kt-luo > summary::-webkit-details-marker{display:none;}
.kt-luo[open] > summary{filter:brightness(1.04);}
.kt-luo-ikoni{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:rgba(255,255,255,.2);}
.kt-luo-ikoni svg{width:14px;height:14px;}
.kt-luo-kortti{margin:14px 0 0;}

/* Osiot: Pääkäyttäjät / Käyttäjät */
.kt-osio{margin:0 0 26px;}
.kt-osio-otsikko{display:flex;align-items:center;gap:10px;font-size:1.05rem;margin:0 0 12px;color:var(--petrol);}
.kt-osio-ikoni{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;
  background:var(--petrol);color:#fff;flex:none;}
.kt-osio-ikoni svg{width:18px;height:18px;}
.kt-osio-maara{font-size:.78rem;font-weight:600;color:var(--teksti-vaalea);
  background:#eef2f6;border-radius:20px;padding:2px 10px;}

/* Käyttäjärivi (selkeä kortti, oma Muokkaa-nappi) */
.kt-rivi-kortti{display:flex;align-items:center;gap:14px;background:var(--kortti);
  border:1px solid var(--raja);border-radius:13px;padding:13px 16px;margin-bottom:10px;
  box-shadow:var(--varjo);transition:transform .14s, border-color .14s, box-shadow .14s;}
.kt-rivi-kortti:hover{transform:translateY(-2px);border-color:var(--raja-tumma);
  box-shadow:0 4px 10px rgba(13,40,58,.1),0 14px 28px rgba(13,40,58,.08);}
.kt-rivi-kortti.on-lukittu{background:#fcfafa;border-color:#f0dcd9;}

/* Tilan ikoni (lukko auki/kiinni) pyöreällä taustalla */
.kt-tila-ikoni{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;flex:none;}
.kt-tila-ikoni svg{width:20px;height:20px;}
.kt-tila-ikoni.on-aktiivinen{background:#e7f4ee;color:#0f6e56;}
.kt-tila-ikoni.on-lukittu{background:#fbeaea;color:var(--punainen);}

.kt-rivi-id{display:flex;flex-direction:column;gap:1px;flex:1 1 auto;min-width:0;}
.kt-rivi-id .kt-tunnus{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.kt-tunnus{font-weight:700;color:var(--petrol);font-size:1rem;}
.kt-rivi-kortti.on-lukittu .kt-tunnus{color:var(--teksti-vaalea);}
.kt-nimi{color:var(--teksti-vaalea);font-size:.85rem;}
.kt-rivi-merkit{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.kt-muokkaa{flex:none;}

/* Merkit ja tilapillerit */
.kt-merkki{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  background:#f0edf6;color:var(--lavender);border-radius:20px;padding:3px 10px;}
.kt-merkki.kt-sina{background:#e7f4ee;color:#0f6e56;}
.kt-tila{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  border-radius:20px;padding:3px 11px;white-space:nowrap;}
.kt-tila-aktiivinen{background:#e7f4ee;color:#0f6e56;}
.kt-tila-lukittu{background:#fbeaea;color:var(--punainen);}

/* --- Kirjautumisloki (loki.php) --- */
.loki-otsake{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;}
.loki-otsake h1{margin:0;}
.loki-yhteenveto{color:var(--teksti-vaalea);font-size:.9rem;margin:6px 0 0;}
.loki-varoitus{color:var(--punainen);font-size:1.05rem;}
.loki-suodatin{flex:none;}
.loki-taulu-kuori{overflow-x:auto;border:1px solid var(--raja);border-radius:14px;margin-top:16px;}
.loki-taulu{margin:0;}
.loki-aika{white-space:nowrap;color:var(--teksti-vaalea);font-variant-numeric:tabular-nums;}
.loki-ip{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.82rem;color:var(--teksti-vaalea);}
.loki-tyhja-arvo{color:var(--teksti-vaalea);font-style:italic;}
.loki-tyhja{color:var(--teksti-vaalea);margin-top:16px;}
.loki-alahuom{color:var(--teksti-vaalea);font-size:.78rem;margin-top:12px;line-height:1.5;}
.loki-ok{background:#e7f4ee;color:#0f6e56;}
.loki-vaara{background:#fbeaea;color:var(--punainen);}
.loki-lukittu{background:#fdf1dd;color:#9a5b08;}
.loki-estetty{background:#fde7d6;color:#a8501a;}

/* Muokkausnäkymä */
.kt-takaisin-rivi{margin:0 0 16px;}
.kt-takaisin{color:var(--petrol);font-weight:600;font-size:.9rem;}
.kt-takaisin:hover{text-decoration:underline;}
.kt-muokkaus-otsake{display:flex;align-items:center;gap:14px;margin:0 0 18px;}
.kt-muokkaus-otsake .kt-tila-ikoni{width:46px;height:46px;border-radius:13px;}
.kt-muokkaus-otsake .kt-tila-ikoni svg{width:24px;height:24px;}
.kt-otsake-id{display:flex;flex-direction:column;gap:6px;min-width:0;}
.kt-otsake-id .kt-tunnus{font-size:1.25rem;}
.kt-otsake-merkit{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.kt-toiminnot-kortti .kt-salasana{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.kt-salasana input{flex:1 1 240px;padding:9px 12px;border:1px solid var(--raja-tumma);border-radius:9px;font-size:.9rem;}

/* Salasanan generointi */
.kt-salasana-luo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex-basis:100%;margin-top:8px;}
.kt-salasana-naytto{flex-basis:100%;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.98rem;font-weight:700;
  letter-spacing:.04em;background:#eef4f8;border:1px solid var(--raja);border-radius:9px;padding:7px 13px;
  color:var(--petrol);user-select:all;}

/* Istunnon aikakatkaisun varoitus */
.istunto-varoitus{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:rgba(8,30,45,.55);padding:20px;}
.istunto-varoitus[hidden]{display:none;}
.istunto-laatikko{background:var(--kortti);border-radius:16px;padding:26px 28px;max-width:420px;width:100%;
  box-shadow:0 20px 60px rgba(0,0,0,.3);text-align:center;}
.istunto-laatikko h2{margin:0 0 8px;font-size:1.2rem;}
.istunto-laatikko p{color:var(--teksti-vaalea);margin:0 0 18px;}
.istunto-napit{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.kt-alarivi{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:16px;
  padding-top:16px;border-top:1px solid var(--raja);}
.kt-lukitus,.kt-poista{display:inline-flex;}

/* Linkkiraportit (Päivitä data -sivu) + ennuste-ikoni */
.ikoni-ennuste{background:#1f6f8f;}
.pl-ohje{font-size:.85rem;color:var(--teksti-vaalea);margin:-6px 0 14px;max-width:760px;}
.pl-linkkirivi{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:4px;}
.pl-tila{font-size:.82rem;color:var(--teksti-vaalea);}

/* ===========================================================
   Saapumis- ja kirjautumisanimaatiot (~2 s).
   KIRJAUTUMINEN tehdään YHDELLÄ sivulla (etusivu), jottei sivunvaihto aiheuta
   taukoa: login lisää heti peittävän taustan (.lahtee) ja siirtyy etusivulle,
   jossa soi yksi yhtäjaksoinen paljastus — logo kasvaa tasaisesti, väri virtaa,
   Logo kasvaa tasaisesti, väri virtaa hillitysti, ja väritausta TULEE heti täyteen,
   PYSYY hetken ja HÄIPYY pehmeästi pois (sisään–pito–ulos) -> tyylikäs, tauoton.
   Uloskirjautumisella ei ole animaatiota. prefers-reduced-motion huomioitu.
   =========================================================== */

/* Yhteinen liukuväri login-peitolle ja etusivun paljastukselle (saumaton raja). */
.siirtyma,
.tervetulo-splash{
  background:linear-gradient(125deg,var(--petrol-tumma) 0%,var(--petrol) 38%,var(--indigo) 72%,var(--lavender) 100%);
  background-size:240% 240%;
}

/* Login-peitto: tulee heti näkyviin kirjautuessa (ei animaatiota -> ei taukoa),
   ja luovuttaa etusivun paljastukselle TARKALLEEN samasta tilasta. Oletuksena piilossa. */
.siirtyma{
  position:fixed;inset:0;z-index:100;display:grid;place-items:center;overflow:hidden;
  opacity:0;visibility:hidden;pointer-events:none;background-position:30% 50%;
}
.siirtyma-logo{
  position:relative;height:150px;width:auto;transform:scale(.55);
  filter:drop-shadow(0 8px 26px rgba(0,0,0,.42));
}

/* Etusivun paljastus on oletuksena piilossa; näytetään vain animaation kanssa. */
.tervetulo-splash{display:none;}

@media (prefers-reduced-motion: no-preference){
  @keyframes telog-nouse{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
  @keyframes telog-palkki{from{opacity:0;transform:translateY(-12px);}to{opacity:1;transform:none;}}
  @keyframes telog-haaly{from{opacity:0;}to{opacity:1;}}

  /* Yläpalkki laskeutuu pehmeästi */
  .ylapalkki{animation:telog-palkki .5s cubic-bezier(.16,1,.3,1) both;}

  /* Sovelluskortit nousevat porrastetusti (TAVALLINEN etusivulle paluu) */
  .ruudukko .ruutu{animation:telog-nouse .55s cubic-bezier(.16,1,.3,1) both;}
  .ruudukko .ruutu:nth-child(1){animation-delay:.06s;}
  .ruudukko .ruutu:nth-child(2){animation-delay:.12s;}
  .ruudukko .ruutu:nth-child(3){animation-delay:.18s;}
  .ruudukko .ruutu:nth-child(4){animation-delay:.24s;}
  .ruudukko .ruutu:nth-child(5){animation-delay:.30s;}
  .ruudukko .ruutu:nth-child(6){animation-delay:.36s;}
  .ruudukko .ruutu:nth-child(7){animation-delay:.42s;}
  .ruudukko .ruutu:nth-child(8){animation-delay:.48s;}
  .ruudukko .ruutu:nth-child(n+9){animation-delay:.54s;}

  /* Raporttikehys */
  .raportti-kehys .kehys-palkki{animation:telog-palkki .45s cubic-bezier(.16,1,.3,1) both;}
  .raportti-kehys .kehys-iframe{animation:telog-haaly .7s ease both;animation-delay:.1s;}

  /* Kirjautumiskortin pehmeä esiintulo (sivun latautuessa) */
  .kirjautumis-kortti{animation:telog-nouse .55s cubic-bezier(.16,1,.3,1) both;}

  /* KIRJAUTUMINEN — login-peitto näkyviin heti (ei animaatiota -> ei taukoa). */
  body.lahtee .siirtyma{visibility:visible;opacity:1;}

  /* KIRJAUTUMINEN — etusivun paljastus (~2 s, yksi yhtäjaksoinen animaatio).
     Logo kasvaa tasaisesti (linear), väri virtaa hillitysti (linear), ja väritausta
     pysyy hetken täytenä ja häipyy sitten pehmeästi pois (ease-in-out, pito + ulos).
     Etusivu paljastuu ristihäivytyksenä. */
  .tervetulo-splash{
    display:grid;place-items:center;position:fixed;inset:0;z-index:100;overflow:hidden;
    pointer-events:none;background-position:30% 50%;
    animation:telog-paljasta-op 2s ease-in-out forwards,
              telog-paljasta-vari 2s linear forwards;
  }
  .tervetulo-splash-logo{
    position:relative;height:150px;width:auto;transform:scale(.55);
    filter:drop-shadow(0 8px 26px rgba(0,0,0,.42));
    animation:telog-paljasta-logo 2s linear forwards;
  }
  @keyframes telog-paljasta-op{
    0%{opacity:1;}
    42%{opacity:1;}                      /* väritausta pysyy hetken (~0,8 s) */
    100%{opacity:0;visibility:hidden;}   /* sitten häipyy pehmeästi pois (~1,2 s) */
  }
  @keyframes telog-paljasta-logo{from{transform:scale(.55);}to{transform:scale(1.2);}}
  @keyframes telog-paljasta-vari{from{background-position:30% 50%;}to{background-position:62% 50%;}}

  /* Etusivu paljastuu ristihäivytyksenä (ei yksi kerrallaan kirjautumisen jälkeen) */
  .tervetulo-splash ~ .tervetulo{animation:none;}
  .tervetulo-splash ~ .ruudukko .ruutu{animation:none;}

  @media(max-width:520px){
    .siirtyma-logo,.tervetulo-splash-logo{height:120px;}
  }
}