/* ===========================================================
   TELOG-raportointiportaali — tyylit
   Brändi: petrooli #0d5578 · indigo #2a3d78 · laventeli #7a6aa8
   =========================================================== */
:root{
  --petrol:#0d5578; --petrol-tumma:#094258;
  --indigo:#2a3d78; --lavender:#7a6aa8;
  --teksti:#1c2630; --teksti-vaalea:#5c6a76;
  --tausta:#f3f6f8; --kortti:#ffffff;
  --raja:#e2e8ee; --raja-tumma:#cfd8e0;
  --vihrea:#1d9e75; --punainen:#c0473a;
  --varjo:0 1px 2px rgba(13,40,58,.06), 0 6px 18px rgba(13,40,58,.06);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--teksti); background:var(--tausta);
  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:var(--petrol);color:#fff;box-shadow:var(--varjo);}
.ylapalkki-sisalto{
  max-width:1080px;margin:0 auto;padding:0 24px;height:60px;
  display:flex;align-items:center;justify-content:space-between;
}
.brandi{display:flex;align-items:baseline;gap:8px;}
.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-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;}
}