/* TiedonAI Portaali - shared module chrome v1
   This file is intended to be reused by all modules:
   <link rel="stylesheet" href="../../assets/portal-shared.css">
*/
:root{
  --portal-bg:#f0fdf4;
  --portal-surface:#ffffff;
  --portal-text:#0f172a;
  --portal-muted:#64748b;
  --portal-line:#d8e2ee;
  --portal-primary:#059669;
  --portal-primary-dark:#047857;
  --portal-shadow:0 2px 10px rgba(15,23,42,.06);
  --portal-radius:14px;
  --portal-topbar-height:92px;
  --portal-font:"Segoe UI",Arial,sans-serif;
}
body.theme-forest{--portal-primary:#059669;--portal-primary-dark:#047857;--portal-bg:#f0fdf4;}
body.theme-tech{--portal-primary:#0284c7;--portal-primary-dark:#0369a1;--portal-bg:#f0f9ff;}
body.theme-nordic{--portal-primary:#5e81ac;--portal-primary-dark:#4c566a;--portal-bg:#eceff4;}
body.theme-berry{--portal-primary:#be123c;--portal-primary-dark:#9f1239;--portal-bg:#fff1f2;}
body.theme-royal{--portal-primary:#4f46e5;--portal-primary-dark:#312e81;--portal-bg:#eef2ff;}
body.theme-dark{--portal-primary:#38bdf8;--portal-primary-dark:#0284c7;--portal-bg:#0f172a;--portal-surface:#172033;--portal-text:#f8fafc;--portal-muted:#cbd5e1;--portal-line:#334155;}

/* Main portal-compatible top bar */
.tai-topbar,
.portal-shellbar{
  box-sizing:border-box!important;
  height:var(--portal-topbar-height)!important;
  min-height:var(--portal-topbar-height)!important;
  background:var(--portal-surface)!important;
  color:var(--portal-text)!important;
  border-bottom:1px solid var(--portal-line)!important;
  box-shadow:var(--portal-shadow)!important;
  padding:14px 22px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
  font-family:var(--portal-font)!important;
  position:sticky!important;
  top:0!important;
  z-index:9999!important;
  overflow:visible!important;
}
.tai-topbar-left,
.portal-shell-left{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  min-width:0!important;
  flex:1 1 auto!important;
  overflow:hidden!important;
}
.tai-topbar-right,
.portal-shell-right{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:10px!important;
  flex:0 0 auto!important;
  white-space:nowrap!important;
  flex-wrap:nowrap!important;
  max-width:68vw!important;
  overflow:visible!important;
}
.tai-logo,
.portal-logo,
.vp-logo,
.tw-logo{
  width:52px!important;
  height:52px!important;
  border-radius:16px!important;
  /* HUOM (2026-08-09): oli aiemmin background:var(--portal-primary) - teeman
     värinen ("vihreä") laatikko aina kun logokuvaa ei ole (tai kunnes se
     latautuu). Pääportaalin omassa index.html:ssä sama "vihreä kehä" -bugi
     korjattiin jo 2026-08-05 tekemällä logolaatikosta aina valkoinen
     riippumatta teemasta (ks. .logo{background:#fff} pääportaalin omassa
     <style>-lohkossa) - mutta se korjaus ei koskaan ulottunut tähän JAETTUUN
     tyyliin, jota käyttävät KAIKKI moduulit JA pääportaali itse (koska
     pääportaalin .logo-elementille lisätään myös tai-logo-luokka, ks.
     index.html:n .classList.add('tai-logo')) - joten "vihreä pohja" -raportti
     tuli takaisin täältä, ei pääportaalin omasta CSS:stä. Yhdenmukaistettu nyt
     samaksi: aina valkoinen tausta, teeman väri vain tekstissä/kuvakkeessa. */
  background:#fff!important;
  color:var(--portal-primary)!important;
  border:1px solid var(--portal-line,#e2e8f0)!important;
  display:grid!important;
  place-items:center!important;
  font-weight:900!important;
  flex:0 0 52px!important;
  font-size:20px!important;
  line-height:1!important;
}
.tai-titleblock,
.portal-titleblock{
  display:flex!important;
  flex-direction:column!important;
  gap:2px!important;
  min-width:0!important;
  line-height:1.05!important;
}
.tai-title,
.portal-title{
  font-size:20px!important;
  line-height:1.05!important;
  font-weight:900!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  max-width:380px!important;
  color:var(--portal-text)!important;
  letter-spacing:-.02em!important;
}
.tai-version,
.vp-version,
.tw-version{
  font-size:14px!important;
  color:var(--portal-muted)!important;
  font-weight:700!important;
  line-height:1.05!important;
}
.tai-back,
.portal-back,
.tw-back{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:var(--portal-primary)!important;
  color:#fff!important;
  border:1px solid var(--portal-primary-dark)!important;
  border-radius:14px!important;
  padding:7px 14px!important;
  font-size:13px!important;
  font-weight:900!important;
  min-height:32px!important;
  height:32px!important;
  margin-top:5px!important;
  max-width:max-content!important;
  white-space:nowrap!important;
  text-decoration:none!important;
  box-shadow:none!important;
}
.portal-version{display:none!important;}
.tai-role,
.vp-role,
.tw-role{
  width:210px!important;
  max-width:210px!important;
  min-width:190px!important;
  height:52px!important;
  border:1px solid var(--portal-line)!important;
  border-radius:14px!important;
  background:var(--portal-surface)!important;
  color:var(--portal-text)!important;
  padding:0 42px 0 16px!important;
  font-weight:500!important;
  font-size:16px!important;
  box-shadow:none!important;
}
.tai-btn,
.vp-topbtn,
.vp-help,
.tw-topbtn,
.portal-help-link,
.module-settings-btn{
  height:52px!important;
  min-height:52px!important;
  border:1px solid var(--portal-line)!important;
  border-radius:14px!important;
  background:var(--portal-surface)!important;
  color:var(--portal-text)!important;
  padding:0 18px!important;
  font-weight:900!important;
  box-shadow:none!important;
  cursor:pointer!important;
  text-decoration:none!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
  font-size:16px!important;
  line-height:1!important;
}
.tai-btn:hover,.vp-topbtn:hover,.vp-help:hover,.tw-topbtn:hover,.portal-help-link:hover,.module-settings-btn:hover,.tai-role:hover,.vp-role:hover,.tw-role:hover{background:#f8fafc!important;}
body.theme-dark .tai-btn:hover,body.theme-dark .vp-topbtn:hover,body.theme-dark .vp-help:hover,body.theme-dark .tw-topbtn:hover,body.theme-dark .portal-help-link:hover,body.theme-dark .module-settings-btn:hover{background:#0f172a!important;}
.tai-user,
.portal-user-meta{
  font-size:18px!important;
  color:var(--portal-text)!important;
  font-weight:900!important;
  opacity:1!important;
}
/* Optional module sub-navigation below top bar */
.tai-modulebar,
.portal-module-bar{
  position:sticky!important;
  top:var(--portal-topbar-height)!important;
  z-index:9998!important;
  background:var(--portal-primary)!important;
  box-shadow:none!important;
  border-bottom:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:10px!important;
  padding:14px 28px!important;
  min-height:78px!important;
  margin:0!important;
  clear:both!important;
}
.tai-modulebar a,
.portal-module-bar a{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  color:#fff!important;
  text-decoration:none!important;
  border:1px solid rgba(255,255,255,.24)!important;
  background:rgba(255,255,255,.14)!important;
  border-radius:14px!important;
  padding:12px 18px!important;
  font-weight:900!important;
  font-size:15px!important;
  min-height:46px!important;
}
.tai-modulebar a:hover,.portal-module-bar a:hover{background:rgba(255,255,255,.24)!important;}
.portalbar{display:none!important;}
body{background:var(--portal-bg)!important;}
/* HUOM (2026-08-10, Jarin pyynnöstä): monessa moduulissa fontit/elementit ovat
   niin isoja että sivu piti zoomata selaimessa käsin ~80%:iin mahtuakseen
   järkevästi. Muutama moduuli (Laiterekisteri, Store, Henkilörekisteri,
   muistutukset) oli jo aiemmin ratkaissut tämän omalla html{zoom:.9}- tai
   .94-arvollaan - epäyhtenäisesti ja liian vähän. Tämä sääntö skaalaa KAIKKI
   tätä tiedostoa lataavat moduulit (ks. MEMORY: portal-shared.css) yhtenäisesti
   niin että 100%-selainzoomi vastaa suunnilleen aiempaa 80%:n käsizoomia.
   !important, jotta tämä voittaa myös yllä mainittujen moduulien VANHAT,
   pienemmät omat zoom-arvot ilman että niitä tarvitsee erikseen muokata.
   HUOM: tätä TIEDOSTOA ei lataa kaikki ~55 moduulia (vain osa) - loput
   vaativat oman, moduulikohtaisen korjauksen jos samaa halutaan kaikkialle. */
html{zoom:.96!important;}
/* 2026-08-11 (Jari: "Fontin koko vaihtelee"): jokainen moduuli on aikoinaan
   koodattu omalla peruskirjasinkoollaan (13px/14px/16px/selaimen oletus),
   eika zoom-arvon yhtenaistaminen (yla) korjaa tata - zoom skaalaa jo
   olemassa olevia eroja suhteessa, ei tasaa niita. Paaportaali (index.html)
   itse kayttaa jo yhtenaista --fs-muuttujaa, oletus 14px (body.ui-medium,
   ks. Asetukset > Nayton koko) - sama 14px pakotetaan tassa body-tason
   perusarvoksi kaikkiin moduuleihin jotka lataavat taman tiedoston. HUOM:
   tama korjaa periytyvan/ei-eksplisiittisen tekstin (labelit, kappaleet,
   taulukkosolut, sivupalkin linkit joilla ei ole omaa font-size-saantoa),
   mutta EI muuta niita elementteja joilla moduulin oma CSS asettaa
   eksplisiittisen px-koon suoraan (esim. otsikot, napit, kortit) - nailla
   periytyminen ei toimi ollenkaan, joten ne pysyvat visuaalisesti ennallaan.
   Taydellinen pikselintarkka yhtenaisyys vaatisi jokaisen ~55 moduulin oman
   CSS:n lapikaynnin erikseen; tama yksi keskitetty saanto on nopein/pienin
   riski -korjaus samalla "yksi yhteinen mekanismi" -periaatteella kuin zoom
   ylla. Ei elavaa selainvarmennusta (hiekkalaatikolla ei verkkoyhteytta
   paikalliseen IIS:aan) - odota "loydetty N:nnessa raportissa" -tyyppisia
   pienia jatkokorjauspyyntoja, sama kaava kuin muissakin portal-shared.css
   -integraatioissa tassa istunnossa. */
body{font-size:14px!important;}
@media(max-width:980px){
  .tai-topbar,.portal-shellbar{height:auto!important;min-height:var(--portal-topbar-height)!important;align-items:flex-start!important;flex-wrap:wrap!important;padding:12px!important;}
  .tai-topbar-left,.tai-topbar-right,.portal-shell-left,.portal-shell-right{width:100%!important;max-width:100%!important;justify-content:flex-start!important;flex-wrap:wrap!important;}
  .tai-title,.portal-title{max-width:calc(100vw - 95px)!important;}
  .tai-modulebar,.portal-module-bar{top:var(--portal-topbar-height)!important;overflow-x:auto!important;justify-content:flex-start!important;padding:10px 12px!important;}
  .tai-role,.vp-role,.tw-role{width:180px!important;min-width:160px!important;}
  .tai-btn,.vp-topbtn,.vp-help,.tw-topbtn,.portal-help-link,.module-settings-btn,.tai-role,.vp-role,.tw-role{height:42px!important;min-height:42px!important;font-size:13px!important;padding:0 12px!important;}
  .tai-user,.portal-user-meta{font-size:14px!important;}
}


/* Portal index can use the same shared topbar by adding tai-* classes to #top. */
#top.tai-topbar{display:flex!important;}
#top.tai-topbar .topInfo{font-size:13px!important;color:var(--portal-muted)!important;}
#top.tai-topbar .grow{flex:1 1 auto!important;}
#top.tai-topbar .logo{width:52px!important;height:52px!important;border-radius:16px!important;background:#fff!important;color:var(--portal-primary)!important;border:1px solid var(--portal-line,#e2e8f0)!important;display:grid!important;place-items:center!important;font-weight:900!important;font-size:20px!important;flex:0 0 52px!important;}
#top.tai-topbar #sysName{font-size:20px!important;line-height:1.05!important;font-weight:900!important;color:var(--portal-text)!important;}
#top.tai-topbar #sysSub{font-size:14px!important;color:var(--portal-muted)!important;font-weight:700!important;}
#top.tai-topbar .topActions{display:flex!important;align-items:center!important;gap:10px!important;flex-wrap:nowrap!important;white-space:nowrap!important;}
#top.tai-topbar .topRole{width:210px!important;max-width:210px!important;min-width:190px!important;height:52px!important;border:1px solid var(--portal-line)!important;border-radius:14px!important;background:var(--portal-surface)!important;color:var(--portal-text)!important;padding:0 42px 0 16px!important;font-weight:500!important;font-size:16px!important;box-shadow:none!important;}
#top.tai-topbar .btn.sec,#top.tai-topbar .helpLink,#top.tai-topbar #topFeedbackBtn,#top.tai-topbar button[onclick="logout()"]{height:52px!important;min-height:52px!important;border:1px solid var(--portal-line)!important;border-radius:14px!important;background:var(--portal-surface)!important;color:var(--portal-text)!important;padding:0 18px!important;font-weight:900!important;box-shadow:none!important;display:inline-flex!important;align-items:center!important;gap:7px!important;font-size:16px!important;line-height:1!important;}
#top.tai-topbar #who{font-size:18px!important;color:var(--portal-text)!important;font-weight:900!important;}
body.theme-dark #top.tai-topbar .btn.sec,body.theme-dark #top.tai-topbar #topFeedbackBtn,body.theme-dark #top.tai-topbar button[onclick="logout()"],body.theme-dark #top.tai-topbar .topRole{background:var(--portal-surface)!important;color:var(--portal-text)!important;border-color:var(--portal-line)!important;}
@media(max-width:980px){#top.tai-topbar{height:auto!important;min-height:var(--portal-topbar-height)!important;align-items:flex-start!important;flex-wrap:wrap!important;padding:12px!important;}#top.tai-topbar .topLeft,#top.tai-topbar .topActions{width:100%!important;max-width:100%!important;justify-content:flex-start!important;flex-wrap:wrap!important;}#top.tai-topbar .topRole{width:180px!important;min-width:160px!important;}#top.tai-topbar .btn.sec,#top.tai-topbar #topFeedbackBtn,#top.tai-topbar button[onclick="logout()"],#top.tai-topbar .topRole{height:42px!important;min-height:42px!important;font-size:13px!important;padding:0 12px!important;}#top.tai-topbar #who{font-size:14px!important;}}

/* Väestö module content font normalization: previous embedded module CSS made the page look much larger than portal. */
body.vaesto-module .wrap h1{font-size:32px!important;line-height:1.14!important;margin:8px 0 4px!important;letter-spacing:-.02em!important;}
body.vaesto-module .wrap h2{font-size:21px!important;line-height:1.16!important;}
body.vaesto-module .badge{font-size:14px!important;padding:6px 12px!important;}
body.vaesto-module .sub,body.vaesto-module .hint{font-size:13px!important;}
body.vaesto-module .label{font-size:14px!important;}
body.vaesto-module input[type=text],body.vaesto-module select{font-size:15px!important;padding:9px 11px!important;}
body.vaesto-module .btn{font-size:15px!important;padding:9px 13px!important;}
body.vaesto-module .stats .stat{padding:14px!important;}
body.vaesto-module .stats .v{font-size:24px!important;}
body.vaesto-module .stats .k{font-size:14px!important;}
@media(max-width:900px){body.vaesto-module .wrap h1{font-size:27px!important;}body.vaesto-module .wrap h2{font-size:19px!important;}}


/* ===== TiedonAI shared chrome compact override v5 =====
   Tiivistetty yläpalkki: matalampi palkki, pienemmät fontit ja pienemmät painikkeet.
   Tämä lohko on tarkoituksella tiedoston lopussa, jotta se yliajaa vanhat moduulikohtaiset arvot.
*/
:root{
  --portal-topbar-height:72px;
}
.tai-topbar,
.portal-shellbar{
  height:72px!important;
  min-height:72px!important;
  padding:8px 16px!important;
  gap:10px!important;
}
.tai-topbar-left,
.portal-shell-left{
  gap:10px!important;
}
.tai-topbar-right,
.portal-shell-right{
  gap:8px!important;
  max-width:72vw!important;
}
.tai-logo,
.portal-logo,
.vp-logo,
.tw-logo,
#top.tai-topbar .logo{
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  flex-basis:38px!important;
  border-radius:12px!important;
  font-size:15px!important;
}
.tai-title,
.portal-title,
#top.tai-topbar #sysName{
  font-size:14px!important;
  line-height:1.05!important;
  font-weight:800!important;
  max-width:320px!important;
}
.tai-version,
.vp-version,
.tw-version,
#top.tai-topbar #sysSub{
  font-size:11px!important;
  line-height:1.05!important;
  font-weight:650!important;
}
.tai-titleblock,
.portal-titleblock{
  gap:1px!important;
}
.tai-back,
.portal-back,
.tw-back{
  height:26px!important;
  min-height:26px!important;
  padding:0 10px!important;
  border-radius:10px!important;
  font-size:11px!important;
  margin-top:3px!important;
}
.tai-role,
.vp-role,
.tw-role,
#top.tai-topbar .topRole{
  width:170px!important;
  max-width:170px!important;
  min-width:150px!important;
  height:40px!important;
  min-height:40px!important;
  border-radius:12px!important;
  padding:0 34px 0 12px!important;
  font-size:13px!important;
  font-weight:500!important;
}
.tai-btn,
.vp-topbtn,
.vp-help,
.tw-topbtn,
.portal-help-link,
.module-settings-btn,
#top.tai-topbar .btn.sec,
#top.tai-topbar .helpLink,
#top.tai-topbar #topFeedbackBtn,
#top.tai-topbar button[onclick="logout()"]{
  height:40px!important;
  min-height:40px!important;
  border-radius:12px!important;
  padding:0 12px!important;
  font-size:13px!important;
  font-weight:800!important;
  gap:5px!important;
}
.tai-user,
.portal-user-meta,
#top.tai-topbar #who{
  font-size:13px!important;
  font-weight:750!important;
}
#top.tai-topbar .topInfo{
  font-size:11px!important;
}
.tai-modulebar,
.portal-module-bar{
  top:72px!important;
  min-height:56px!important;
  padding:8px 16px!important;
  gap:8px!important;
}
.tai-modulebar a,
.portal-module-bar a{
  min-height:36px!important;
  padding:8px 12px!important;
  border-radius:11px!important;
  font-size:13px!important;
}
.side{
  top:58px!important;
}
.app{
  margin-top:16px!important;
}
/* Väestön sisältö vielä pienemmäksi */
body.vaesto-module .wrap{
  padding-top:14px!important;
}
body.vaesto-module .wrap h1{
  font-size:24px!important;
  line-height:1.12!important;
  margin:6px 0 3px!important;
}
body.vaesto-module .wrap h2{
  font-size:17px!important;
  line-height:1.16!important;
}
body.vaesto-module .badge{
  font-size:12px!important;
  padding:5px 10px!important;
}
body.vaesto-module .sub,
body.vaesto-module .hint{
  font-size:11px!important;
}
body.vaesto-module .label{
  font-size:12px!important;
}
body.vaesto-module input[type=text],
body.vaesto-module select{
  font-size:13px!important;
  padding:7px 9px!important;
}
body.vaesto-module .btn{
  font-size:13px!important;
  padding:7px 10px!important;
}
body.vaesto-module .stats .stat{
  padding:10px!important;
}
body.vaesto-module .stats .v{
  font-size:18px!important;
}
body.vaesto-module .stats .k{
  font-size:12px!important;
}
body.vaesto-module .card .body{
  padding:12px!important;
}
@media(max-width:980px){
  .tai-topbar,
  .portal-shellbar,
  #top.tai-topbar{
    height:auto!important;
    min-height:72px!important;
    padding:8px 10px!important;
  }
  .tai-modulebar,
  .portal-module-bar{
    top:72px!important;
  }
  .tai-btn,
  .vp-topbtn,
  .vp-help,
  .tw-topbtn,
  .portal-help-link,
  .module-settings-btn,
  .tai-role,
  .vp-role,
  .tw-role,
  #top.tai-topbar .btn.sec,
  #top.tai-topbar #topFeedbackBtn,
  #top.tai-topbar button[onclick="logout()"],
  #top.tai-topbar .topRole{
    height:34px!important;
    min-height:34px!important;
    font-size:12px!important;
    padding:0 10px!important;
  }
}


/* ===== TiedonAI v6: kutistettava käyttäjävalikko + moduulien lajittelun UI ===== */
.portal-quick-menu-btn{
  height:40px!important;
  min-height:40px!important;
  width:42px!important;
  border:1px solid var(--portal-line)!important;
  border-radius:12px!important;
  background:var(--portal-surface)!important;
  color:var(--portal-text)!important;
  font-size:20px!important;
  font-weight:900!important;
  display:inline-grid!important;
  place-items:center!important;
  cursor:pointer!important;
  box-shadow:none!important;
}
body.quick-menu-enabled #top .topActions{
  display:none!important;
  position:fixed!important;
  top:76px!important;
  right:18px!important;
  width:min(310px,calc(100vw - 24px))!important;
  background:var(--portal-surface)!important;
  color:var(--portal-text)!important;
  border:1px solid var(--portal-line)!important;
  border-radius:18px!important;
  padding:14px!important;
  box-shadow:0 24px 60px rgba(15,23,42,.22)!important;
  z-index:10005!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:10px!important;
  white-space:normal!important;
}
body.quick-menu-enabled #top .topActions.open{display:flex!important;}
body.quick-menu-enabled #top .topActions::before{
  content:'Käyttäjävalikko';
  display:block;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--portal-muted);
  font-weight:900;
  margin-bottom:2px;
}
body.quick-menu-enabled #top .topActions select,
body.quick-menu-enabled #top .topActions button,
body.quick-menu-enabled #top .topActions .btn,
body.quick-menu-enabled #top .topActions #topFeedbackBtn{
  width:100%!important;
  justify-content:flex-start!important;
  height:40px!important;
  min-height:40px!important;
  font-size:13px!important;
}
body.quick-menu-enabled #top .topActions #who{
  display:block!important;
  padding:8px 10px!important;
  border-radius:12px!important;
  background:#f8fafc!important;
  font-size:13px!important;
}
body.theme-dark.quick-menu-enabled #top .topActions #who{background:#0f172a!important;}
.portal-menu-backdrop{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.08);
  z-index:10004;
}
.portal-menu-backdrop.open{display:block;}
.module-sortbar{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin:0 0 12px 0;
}
.module-sortbar label{
  font-size:13px;
  color:var(--portal-muted);
  font-weight:900;
  text-transform:uppercase;
}
.module-sortbar select{
  border:1px solid var(--portal-line);
  border-radius:12px;
  padding:8px 12px;
  background:var(--portal-surface);
  color:var(--portal-text);
  font-weight:700;
}
.tbl th.sortable{
  cursor:pointer;
  user-select:none;
}
.tbl th.sortable:hover{
  color:var(--portal-primary);
}
.module-version-pill{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--portal-line);
  border-radius:999px;
  padding:2px 8px;
  font-size:11px;
  font-weight:800;
  color:var(--portal-muted);
  background:#f8fafc;
}
body.theme-dark .module-version-pill{background:#0f172a;}


/* Väestö v8 fixed: prevent JS leak and keep compact module chrome */
body.vaesto-module #portalShellbar .portal-shell-right,
body.vaesto-module #portalShellbar .tai-topbar-right{max-width:42vw!important;gap:8px!important;}
body.vaesto-module .badge{max-width:100%!important;white-space:normal!important;line-height:1.25!important;}
body.vaesto-module .wrap h1{font-size:24px!important;line-height:1.12!important;margin-top:8px!important;}


/* v8 header user/language/logo */
.portal-user-inline{font-size:13px;font-weight:800;color:var(--portal-text);white-space:nowrap}.portal-lang-select{height:36px;border:1px solid var(--portal-line);border-radius:10px;background:var(--portal-surface);color:var(--portal-text);padding:0 28px 0 10px;font-size:12px;font-weight:800}.portal-logo-image{width:100%;height:100%;object-fit:contain;border-radius:inherit;display:block}.portal-header-tools{display:flex;align-items:center;gap:8px;margin-left:auto}.portal-quick-menu-btn{margin-left:0!important}.logo-preview{width:52px;height:52px;border-radius:14px;border:1px solid var(--portal-line);display:grid;place-items:center;overflow:hidden;background:#f8fafc}.logo-preview img{max-width:100%;max-height:100%;object-fit:contain}.quick-menu-action{width:100%;height:40px;border:1px solid var(--portal-line);border-radius:12px;background:var(--portal-surface);color:var(--portal-text);font-weight:800;text-align:left;padding:0 12px;cursor:pointer}.quick-menu-action:hover{background:#f8fafc}@media(max-width:700px){.portal-user-inline{max-width:120px;overflow:hidden;text-overflow:ellipsis}.portal-header-tools{gap:5px}.portal-lang-select{width:64px}}

/* v10 clickable menu */
body.quick-menu-enabled #top .topActions.open{pointer-events:auto!important;}body.quick-menu-enabled #top .topActions.open *{pointer-events:auto!important;}.quick-menu-action{position:relative!important;z-index:1!important;cursor:pointer!important;}


/* v11 isolated fixed user menu */
body.quick-menu-enabled #top .topActions{display:none!important;pointer-events:none!important}.portal-v11-tools{margin-left:auto;display:flex;align-items:center;gap:8px;position:relative;z-index:10020}.portal-v11-toggle{width:42px;height:40px;border:1px solid var(--portal-line);border-radius:12px;background:var(--portal-surface);color:var(--portal-text);font-size:20px;font-weight:900;cursor:pointer;display:grid;place-items:center}.portal-v11-backdrop{display:none;position:fixed;inset:0;background:rgba(15,23,42,.10);z-index:10030}.portal-v11-backdrop.open{display:block}.portal-v11-menu{display:none;position:fixed;right:18px;top:76px;width:min(310px,calc(100vw - 24px));padding:14px;background:var(--portal-surface);color:var(--portal-text);border:1px solid var(--portal-line);border-radius:18px;box-shadow:0 24px 60px rgba(15,23,42,.25);z-index:10040;gap:10px}.portal-v11-menu.open{display:flex;flex-direction:column}.portal-v11-title{font-size:12px;font-weight:900;letter-spacing:.04em;color:var(--portal-muted)}.portal-v11-select,.portal-v11-menu button{box-sizing:border-box;width:100%;height:44px;border:1px solid var(--portal-line);border-radius:12px;background:var(--portal-surface);color:var(--portal-text);padding:0 14px;font-size:13px;font-weight:800;text-align:left;cursor:pointer;pointer-events:auto!important}.portal-v11-menu button:hover{background:#f8fafc}.theme-dark .portal-v11-menu button:hover{background:#0f172a}@media(max-width:700px){.portal-v11-menu{right:10px;top:70px}.portal-v11-tools .portal-user-inline{max-width:110px;overflow:hidden;text-overflow:ellipsis}}


/* v12 notices and carousel */
#portalNoticeHost{position:relative;z-index:90}.portal-notice{min-height:42px;display:flex;align-items:center;gap:16px;padding:8px 20px;color:#fff;background:#075985;font-size:14px;overflow:hidden}.portal-notice.sos{background:#b91c1c}.portal-notice b{white-space:nowrap}.portal-notice a{color:inherit;font-weight:800;text-decoration:underline}.notice-window{overflow:hidden;flex:1}.portal-notice.tick .notice-window span{display:inline-block;min-width:100%;white-space:nowrap;animation:portalTicker 18s linear infinite}@keyframes portalTicker{from{transform:translateX(100%)}to{transform:translateX(-100%)}}.portal-promo{margin:18px 0;padding:28px 32px;background:#ecfdf5;border:1px solid #bbf7d0;border-radius:24px}.promo-head{display:flex;justify-content:space-between;align-items:center}.promo-head h2{margin:0 0 18px}.promo-card{background:#fff;border:1px solid var(--portal-line);border-radius:18px;min-height:190px;padding:28px;display:grid;grid-template-columns:64px 1fr;gap:20px;box-shadow:0 12px 30px rgba(15,23,42,.07)}.promo-icon{font-size:42px}.promo-card h3{margin:0 0 10px;font-size:22px}.promo-card p{color:var(--portal-muted);font-size:16px;max-width:800px}.promo-card a{color:var(--portal-primary);font-weight:900}.promo-nav{display:flex;justify-content:center;gap:16px;margin-top:18px}.promo-nav button{width:42px;height:42px;border:0;border-radius:50%;background:#065f46;color:#fff;font-size:20px;cursor:pointer}.comm-settings h3{margin-top:22px}.comm-settings label{display:block;margin:9px 0 5px;font-weight:800}.comm-settings .switchrow{display:flex;align-items:center;gap:8px}.comm-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}.comm-settings textarea{width:100%;resize:vertical}@media(max-width:800px){.comm-grid{grid-template-columns:1fr}.portal-notice{align-items:flex-start;flex-direction:column;gap:4px}.promo-card{grid-template-columns:1fr;padding:20px}.portal-promo{padding:20px}}

/* v13 remote banner */
#portalQuickMenuBtn{display:none!important}.portal-promo.remote{padding:0;background:transparent;border:0}.remote-promo-head{display:flex;justify-content:space-between;align-items:center;margin:0 0 8px}.remote-promo-head button{border:1px solid var(--portal-line);border-radius:10px;background:var(--portal-surface);padding:7px 10px;cursor:pointer}.portal-promo iframe{width:100%;border:1px solid var(--portal-line);border-radius:20px;background:#ecfdf5}.switchrow{display:flex!important;align-items:center;gap:8px}

/* v14 adjustable ticker speed */
.portal-notice.tick .notice-window span{animation-duration:var(--ticker-seconds,30s)!important;}


/* v15 compact menu for modules */
.portal-module-tools{margin-left:auto;display:flex;align-items:center;gap:8px;position:relative;z-index:10020}.portal-module-user{font-size:13px;font-weight:800;white-space:nowrap}.portal-module-lang{height:36px;border:1px solid var(--portal-line);border-radius:10px;background:var(--portal-surface);color:var(--portal-text);padding:0 28px 0 10px;font-weight:800}.portal-module-toggle{width:42px;height:40px;border:1px solid var(--portal-line);border-radius:12px;background:var(--portal-surface);color:var(--portal-text);font-size:20px;font-weight:900;cursor:pointer}.portal-module-backdrop{display:none;position:fixed;inset:0;background:rgba(15,23,42,.10);z-index:10030}.portal-module-backdrop.open{display:block}.portal-module-menu{display:none;position:fixed;right:18px;top:76px;width:min(300px,calc(100vw - 24px));padding:14px;background:var(--portal-surface);color:var(--portal-text);border:1px solid var(--portal-line);border-radius:18px;box-shadow:0 24px 60px rgba(15,23,42,.25);z-index:10040;gap:10px}.portal-module-menu.open{display:flex;flex-direction:column}.portal-module-menu-title{font-size:12px;font-weight:900;color:var(--portal-muted);letter-spacing:.04em}.portal-module-role,.portal-module-menu button{width:100%;min-height:42px;border:1px solid var(--portal-line);border-radius:12px;background:var(--portal-surface);color:var(--portal-text);padding:0 13px;font-size:13px;font-weight:800;text-align:left;display:flex;align-items:center;cursor:pointer}.portal-module-role{background:#f8fafc;cursor:default}.theme-dark .portal-module-role{background:#0f172a}@media(max-width:700px){.portal-module-menu{right:10px;top:70px}.portal-module-user{max-width:110px;overflow:hidden;text-overflow:ellipsis}}

.portal-restore-promo{margin:16px 0;border:1px solid var(--portal-line);border-radius:12px;background:var(--portal-surface);color:var(--portal-text);padding:9px 14px;font-weight:900;cursor:pointer}


/* v16 banner toggle and resilient module tools */
.portal-promo-toggle-row{display:flex;justify-content:flex-end;align-items:center;margin:16px 0 8px;min-height:42px}.portal-promo-toggle-row button{border:1px solid var(--portal-line);border-radius:12px;background:var(--portal-surface);color:var(--portal-text);padding:9px 14px;font-weight:800;cursor:pointer}.remote-promo-head{display:none!important}.portal-module-tools{display:flex!important;visibility:visible!important;opacity:1!important}.portal-module-toggle,.portal-module-lang,.portal-module-user{display:inline-flex!important;visibility:visible!important;opacity:1!important}.portal-module-lang{display:block!important}


/* v17 module menu parity with portal */
#portalModuleCompactTools{margin-left:auto!important;display:flex!important;align-items:center!important;gap:8px!important;order:9999!important}#portalModuleUserMenu #portalModuleMenuActions{display:flex;flex-direction:column;gap:10px}#portalModuleUserMenu #portalModuleMenuActions button{box-sizing:border-box;width:100%;height:44px;min-height:44px}.portal-module-menu{top:76px!important;right:18px!important;width:min(310px,calc(100vw - 24px))!important}.portal-module-toggle{display:grid!important;place-items:center!important}


/* v19 portal main page: logo, mobile header and dashboard toggle */
#top .logo,#top .tai-logo{padding:4px!important;overflow:hidden!important;box-sizing:border-box!important}#top .logo img,#top .tai-logo img,.portal-logo-image{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;border-radius:8px!important;display:block!important}.portal-dashboard-toggle-row{display:flex;justify-content:flex-end;align-items:center;margin:8px 0;min-height:42px}.portal-dashboard-toggle-row button{border:1px solid var(--portal-line);border-radius:12px;background:var(--portal-surface);color:var(--portal-text);padding:9px 14px;font-weight:800;cursor:pointer}body.portal-dashboard-user-hidden #dashboardBox{display:none!important}
@media(max-width:700px){#top{min-height:68px!important;height:auto!important;display:flex!important;flex-wrap:nowrap!important;align-items:center!important;padding:8px 10px!important;gap:6px!important}#top .portal-v11-tools{margin-left:auto!important;display:flex!important;flex-wrap:nowrap!important;align-items:center!important;gap:5px!important;min-width:0!important}#top .topLeft,#top .portal-shell-left{min-width:0!important;flex:1 1 auto!important;gap:6px!important}#top .portal-user-inline{font-size:12px!important;max-width:62px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}#top .portal-lang-select{width:58px!important;height:38px!important;padding:0 22px 0 8px!important}#top .portal-v11-toggle{width:40px!important;height:38px!important;flex:0 0 40px!important}#top .logo,#top .tai-logo{width:42px!important;height:42px!important;flex:0 0 42px!important;padding:4px!important}#top .title,#top .tai-title,#top .portal-title{font-size:15px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:150px!important}#top .small,#top .tai-version{font-size:10px!important}.portal-promo-toggle-row,.portal-dashboard-toggle-row{margin:8px 0!important}.portal-promo-toggle-row button,.portal-dashboard-toggle-row button{padding:8px 11px!important;font-size:12px!important}}
@media(max-width:430px){#top .portal-user-inline{display:none!important}#top .title,#top .tai-title,#top .portal-title{max-width:118px!important;font-size:14px!important}#top .portal-lang-select{width:54px!important}}


/* v20 hard mobile header fix */
.portal-dashboard-toggle-row{display:flex!important;justify-content:flex-end!important;margin:8px 0!important;min-height:40px!important}.portal-dashboard-toggle-row button{border:1px solid var(--portal-line)!important;border-radius:12px!important;background:var(--portal-surface)!important;color:var(--portal-text)!important;padding:8px 12px!important;font-weight:800!important}@media(max-width:700px){#top.portal-v20-top{display:flex!important;flex-flow:row nowrap!important;align-items:center!important;justify-content:space-between!important;height:68px!important;min-height:68px!important;padding:7px 9px!important;gap:6px!important}#top.portal-v20-top .portal-v20-left{display:flex!important;align-items:center!important;min-width:0!important;flex:1 1 auto!important;gap:6px!important}#top.portal-v20-top .portal-v20-right{display:flex!important;align-items:center!important;flex-flow:row nowrap!important;margin-left:auto!important;gap:5px!important;flex:0 0 auto!important}#top.portal-v20-top .grow,#top.portal-v20-top .topInfo{display:none!important}#top.portal-v20-top .portal-user-inline{font-size:12px!important;max-width:58px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}#top.portal-v20-top .portal-lang-select{width:54px!important;height:38px!important}#top.portal-v20-top .portal-v11-toggle{width:40px!important;height:38px!important}#top.portal-v20-top .logo{width:42px!important;height:42px!important;flex:0 0 42px!important;padding:4px!important}#top.portal-v20-top #sysName{font-size:14px!important;white-space:nowrap!important}#top.portal-v20-top #sysSub{font-size:10px!important}}@media(max-width:430px){#top.portal-v20-top .portal-user-inline{display:none!important}}


/* v21 exact dashboard control and notice height */
.portal-dashboard-control{display:flex!important;justify-content:flex-end!important;align-items:center!important;min-height:42px!important;margin:8px 0 10px!important}.portal-dashboard-control button{border:1px solid var(--portal-line)!important;border-radius:12px!important;background:var(--portal-surface)!important;color:var(--portal-text)!important;padding:9px 14px!important;font-weight:900!important;cursor:pointer!important}.portal-notice{height:64px!important;min-height:64px!important;padding-top:0!important;padding-bottom:0!important;align-items:center!important}.portal-notice .notice-window{height:100%!important;display:flex!important;align-items:center!important}@media(max-width:700px){.portal-dashboard-control{margin:7px 0!important}.portal-dashboard-control button{padding:8px 11px!important;font-size:12px!important}.portal-notice{height:64px!important;min-height:64px!important}}


/* v22 dashboard button matches banner button */
.portal-dashboard-toggle-row-v22{display:flex!important;justify-content:flex-end!important;align-items:center!important;margin:16px 0 8px!important;min-height:42px!important;width:100%!important}.portal-dashboard-toggle-row-v22 .portal-dashboard-bannerlike-btn{box-sizing:border-box!important;border:1px solid var(--portal-line,#d8e2ee)!important;border-radius:12px!important;background:var(--portal-surface,#fff)!important;color:var(--portal-text,#0f172a)!important;padding:9px 14px!important;min-height:40px!important;font:inherit!important;font-weight:800!important;line-height:1.2!important;cursor:pointer!important;box-shadow:none!important}@media(max-width:700px){.portal-dashboard-toggle-row-v22{margin:8px 0!important}.portal-dashboard-toggle-row-v22 .portal-dashboard-bannerlike-btn{padding:8px 11px!important;font-size:12px!important}}


/* ===== v23 single source of truth ===== */
:root{--portal-notice-height:48px;--portal-control-radius:12px;--portal-control-border:var(--portal-line,#d8e2ee);--portal-control-bg:var(--portal-surface,#fff);--portal-control-text:var(--portal-text,#0f172a)}
/* SOS and normal notice use exactly the same dimensions on portal and modules. */
#portalNoticeHost,#vaestoNoticeHost{display:block!important;margin:0!important;padding:0!important;min-height:0!important;overflow:hidden!important}
/* 2026-08-31 (Jari: kirjautumisruudulla ei saisi näkyä SOS-palkkia - tämä on
   sama regressio jonka JS-puolen syy (setInterval-viitebugi) korjattiin
   index.html:ssä, mutta pelkkä JS-korjaus EI riittänyt: yllä oleva
   "#portalNoticeHost{display:block!important}" on ID-valitsin, jonka
   erottuvuus (specificity) voittaa yleisen ".hidden{display:none!important}"
   luokkasäännön riippumatta CSS:n järjestyksestä, koska molemmilla on
   !important eikä pelkkä järjestys silloin ratkaise, vaan erottuvuus - ID
   voittaa aina luokan. index.html:n JS lisäsi/poisti "hidden"-luokan aivan
   oikein, mutta sillä ei ollut mitään visuaalista vaikutusta. Korjaus:
   oma, tätä ID-sääntöä erottuvampi (ID+luokka) sääntö juuri "hidden"-tilalle. */
#portalNoticeHost.hidden,#vaestoNoticeHost.hidden{display:none!important}
.portal-notice,.portal-global-notice{box-sizing:border-box!important;width:100%!important;height:var(--portal-notice-height)!important;min-height:var(--portal-notice-height)!important;max-height:var(--portal-notice-height)!important;margin:0!important;padding:0 28px!important;display:flex!important;flex-flow:row nowrap!important;align-items:center!important;gap:16px!important;overflow:hidden!important;line-height:1.2!important}
.portal-notice b,.portal-global-notice b{display:flex!important;align-items:center!important;height:var(--portal-notice-height)!important;line-height:1.2!important;flex:0 0 auto!important;margin:0!important;padding:0!important;white-space:nowrap!important}
.portal-notice .notice-window,.portal-global-notice .notice-window{box-sizing:border-box!important;display:flex!important;align-items:center!important;height:var(--portal-notice-height)!important;min-height:var(--portal-notice-height)!important;max-height:var(--portal-notice-height)!important;overflow:hidden!important;margin:0!important;padding:0!important;flex:1 1 auto!important}
.portal-notice.tick .notice-window span,.portal-global-notice.tick .notice-window span{display:inline-block!important;min-width:100%!important;white-space:nowrap!important;animation:portalUnifiedTicker var(--ticker-seconds,40s) linear infinite!important;will-change:transform!important}
@keyframes portalUnifiedTicker{from{transform:translateX(100%)}to{transform:translateX(-100%)}}
/* Static home control. Same right alignment and button appearance as the banner control. */
.portal-home-controls{display:flex!important;justify-content:flex-end!important;align-items:center!important;width:100%!important;min-height:42px!important;margin:16px 0 8px!important}
.portal-home-controls button,.portal-promo-toggle-row button{box-sizing:border-box!important;border:1px solid var(--portal-control-border)!important;border-radius:var(--portal-control-radius)!important;background:var(--portal-control-bg)!important;color:var(--portal-control-text)!important;padding:9px 14px!important;min-height:40px!important;font:inherit!important;font-weight:800!important;line-height:1.2!important;cursor:pointer!important;box-shadow:none!important}
/* Logo scales from one rule. */
#top .logo img,#top .tai-logo img,#portalShellbar .portal-logo img,#portalShellbar .tai-logo img,#portalShellbar .vp-logo img{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;border-radius:8px!important}
/* v27: kun logokuva on käytössä, piilota alla oleva väritausta ("vihreä kehä") -
   aiempi yritys tästä oli vain Portaalin omassa index.html:ssä eikä sillä ollut
   !important, joten se hävisi .tai-logo/.portal-logo:n background!important
   -säännölle eikä koskenut ERP:tä/CC:tä/PC:tä/moduuleita lainkaan. */
#top .logo:has(img),#top .tai-logo:has(img),#portalShellbar .portal-logo:has(img),#portalShellbar .tai-logo:has(img),#portalShellbar .vp-logo:has(img){background:transparent!important}
@media(max-width:700px){.portal-notice,.portal-global-notice{padding:0 18px!important}.portal-home-controls{margin:8px 0!important}.portal-home-controls button{padding:8px 11px!important;font-size:12px!important}}


/* v24 Vaesto shell restored, using shared portal dimensions */
#portalShellbar .portal-shell-right{display:flex!important;align-items:center!important;justify-content:flex-end!important;margin-left:auto!important}.vaesto-v24-tools{display:flex!important;align-items:center!important;gap:8px!important}.vaesto-v24-user{font-size:13px;font-weight:800;white-space:nowrap}.vaesto-v24-language{width:76px;height:38px;border:1px solid var(--portal-line,#d8e2ee);border-radius:10px;background:var(--portal-surface,#fff);color:var(--portal-text,#0f172a);padding:0 9px;font-weight:800}.vaesto-v24-toggle{width:42px;height:40px;border:1px solid var(--portal-line,#d8e2ee);border-radius:12px;background:var(--portal-surface,#fff);color:var(--portal-text,#0f172a);font-size:20px;font-weight:900;cursor:pointer}.vaesto-v24-backdrop{display:none;position:fixed;inset:0;background:rgba(15,23,42,.10);z-index:10030}.vaesto-v24-backdrop.open{display:block}.vaesto-v24-menu{display:none;position:fixed;right:18px;top:76px;width:min(300px,calc(100vw - 24px));padding:14px;background:var(--portal-surface,#fff);color:var(--portal-text,#0f172a);border:1px solid var(--portal-line,#d8e2ee);border-radius:18px;box-shadow:0 24px 60px rgba(15,23,42,.25);z-index:10040;gap:10px}.vaesto-v24-menu.open{display:flex;flex-direction:column}.vaesto-v24-title{font-size:12px;font-weight:900;color:var(--portal-muted,#64748b)}.vaesto-v24-role,.vaesto-v24-menu button{box-sizing:border-box;width:100%;height:44px;border:1px solid var(--portal-line,#d8e2ee);border-radius:12px;background:var(--portal-surface,#fff);color:var(--portal-text,#0f172a);padding:0 14px;font-size:13px;font-weight:800;text-align:left;display:flex;align-items:center}.vaesto-v24-role{background:#f8fafc}@media(max-width:700px){.vaesto-v24-user{display:none}.vaesto-v24-language{width:56px}.vaesto-v24-menu{right:10px;top:70px}}


/* v25: expose Vaesto right tools and share configurable notice height */
#portalShellbar .portal-shell-right>#vaestoV24Tools,#portalShellbar .tai-topbar-right>#vaestoV24Tools{display:flex!important;visibility:visible!important;opacity:1!important}.vaesto-v24-tools>*{visibility:visible!important;opacity:1!important}.portal-notice,.portal-global-notice{height:var(--portal-notice-height,48px)!important;min-height:var(--portal-notice-height,48px)!important;max-height:var(--portal-notice-height,48px)!important}.portal-notice b,.portal-global-notice b,.portal-notice .notice-window,.portal-global-notice .notice-window{height:var(--portal-notice-height,48px)!important;min-height:var(--portal-notice-height,48px)!important;max-height:var(--portal-notice-height,48px)!important}


/* ===== v26 notice sticky + centering =====
   Tiedotepalkki (#portalNoticeHost / #vaestoNoticeHost) pysyy kiinni ylimmän
   palkin alareunassa myös sivua vieritettäessä - sekä pääportaalissa että
   kaikissa moduuleissa, jotka lataavat tämän tiedoston. "top"-arvon (kuinka
   monta pikseliä ylimmän palkin alta) asettaa JS ajonaikaisesti
   (index.html: portalRenderGlobalNotices/stickNoticeHost,
   js/portal-shared.js: renderNotices/stickNoticeHost), koska ylimmän
   palkin korkeus vaihtelee responsiivisesti (esim. mobiilissa). Tämä
   CSS-lohko varmistaa, ettei mikään aiempi sääntö voi enää nollata
   position:sticky-arvoa pois. Pystysuuntainen keskitys tulee jo v23:sta
   (display:flex + align-items:center .notice-window ja span-elementille),
   joka toimii nyt oikein sen jälkeen kun index.html:n vanha ristiriitainen
   position:absolute-sääntö poistettiin. */
#portalNoticeHost,#vaestoNoticeHost{position:sticky!important;z-index:90!important}


/* ===== v28 kompakti mobiiliyläpalkki moduuleille =====
   Paaportaalin oma #top-yläpalkki on jo aiemmin (v19-v22) hiottu tiiviiksi
   yhdeksi riviksi kapealla nayolla, mutta ne saannot koskevat vain #top-id:ta.
   Moduulien oma #portalShellbar/.portal-shellbar sai aiemmin vain karkean
   980px-murtokohdan (flex-wrap:wrap, koko leveys) - kayttajavalikko/kieli/
   hampurilainen putosivat aina omalle rivilleen leveydesta riippumatta, ja
   otsikkolohko (nimi/versio/paluulinkki, aina pystysuunnassa pinottu) veivat
   yhdessa 3+ rivia kapealla puhelinnaytolla. Jari: "voisko niita optimoida
   mobiilille" (Asiakaskohtaamiset-testi puhelimella). Tama pitaa oikean
   tyokalupalkin (kayttaja/kieli/valikko) aina samalla ensimmaisella rivilla
   oikeassa reunassa kuin tyopoydalla, ja pienentaa elementit kapealla
   naytolla - koskee kaikkia ~37 moduulia jotka lataavat taman tiedoston,
   samalla "yksi yhteinen mekanismi" -periaatteella kuin muutkin tamansessi-
   siset zoom/fontti/tiedote-korjaukset. */
@media(max-width:700px){
  #portalShellbar.portal-shellbar{
    flex-wrap:nowrap!important;
    align-items:center!important;
    height:auto!important;
    min-height:60px!important;
    padding:8px 10px!important;
    gap:8px!important;
  }
  #portalShellbar .portal-shell-left{
    width:auto!important;
    flex:1 1 auto!important;
    min-width:0!important;
    flex-wrap:nowrap!important;
  }
  #portalShellbar .portal-shell-right{
    width:auto!important;
    flex:0 0 auto!important;
    justify-content:flex-end!important;
    margin-left:auto!important;
  }
  #portalShellbar .portal-logo{width:36px!important;height:36px!important;flex:0 0 36px!important;font-size:13px!important}
  #portalShellbar .portal-title{font-size:14px!important;max-width:34vw!important}
  #portalShellbar .tai-version{font-size:10px!important}
  #portalShellbar .portal-back{height:24px!important;min-height:24px!important;padding:0 8px!important;font-size:10px!important;margin-top:3px!important}
  #portalShellbar .portal-module-user{max-width:70px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:11px!important}
  #portalShellbar .portal-module-lang{width:52px!important;height:32px!important;padding:0 20px 0 8px!important;font-size:11px!important}
  #portalShellbar .portal-module-toggle{width:32px!important;height:32px!important;font-size:16px!important}
}
@media(max-width:430px){
  #portalShellbar .portal-module-user{display:none!important}
  #portalShellbar .portal-back{padding:0 6px!important}
  #portalShellbar .portal-title{max-width:28vw!important}
}

/* ---- Portaaliavustaja (jaettu botti-widget, 2026-08-16) ----
   Sama rakenne/luokat kuin paaportaalin index.html:ssa, jotta molemmat
   pysyvat visuaalisesti yhtenaisina. Injektoi js/portal-shared.js. */
#portalBotBox{position:fixed;right:90px;bottom:24px;z-index:99997}
#portalBotBox.hidden{display:none}
#portalBotBtn{width:54px;height:54px;border:0;border-radius:50%;background:var(--portal-primary);color:#fff;font-size:22px;box-shadow:0 8px 25px rgba(15,23,42,.2);cursor:pointer}
#portalBotPanel{position:absolute;right:0;bottom:66px;width:min(330px,80vw);background:var(--portal-surface);border:1px solid var(--portal-line);border-radius:16px;box-shadow:0 20px 50px rgba(15,23,42,.17);overflow:hidden}
#portalBotPanel.hidden{display:none}
#portalBotHead{background:var(--portal-primary);color:#fff;padding:13px}
#portalBotHead b{display:block}
#portalBotHeadSub{font-size:11px;opacity:.9}
#portalBotBody{height:220px;padding:12px;overflow:auto}
.portal-botmsg{background:var(--portal-bg);color:var(--portal-text);padding:9px;border-radius:10px;margin-bottom:8px;font-size:13px}
#portalBotInputRow{display:flex;padding:10px;border-top:1px solid var(--portal-line);gap:6px}
#portalBotText{flex:1;padding:8px 10px;border:1px solid var(--portal-line);border-radius:8px;font-size:13px}
#portalBotSend{border:0;border-radius:8px;padding:8px 12px;background:var(--portal-primary);color:#fff;font-size:13px;cursor:pointer}
@media(max-width:600px){#portalBotBox{right:14px;bottom:14px}}

/* ---- Teemavalitsin (jaettu, 2026-08-16) ----
   Sama sijainti/tyyli kuin paaportaalin index.html:n omassa teemavalitsimessa
   (oikea alakulma, botin vasemmalla puolella). Injektoi js/portal-shared.js. */
#portalThemeBox{
  position:fixed;right:24px;bottom:24px;z-index:99998;width:54px;height:54px;
  border-radius:28px;background:var(--portal-surface);box-shadow:0 14px 34px rgba(15,23,42,.2);
  overflow:hidden;padding:5px;transition:.3s;display:flex;flex-direction:column;align-items:center;
}
#portalThemeBox.open{height:330px}
#portalThemeLabel{font-size:10px;color:var(--portal-muted);text-align:center;margin-top:2px;opacity:0;transition:.18s}
#portalThemeBox:hover #portalThemeLabel,#portalThemeBox.open #portalThemeLabel{opacity:1}
#portalThemeDots{display:flex;flex-direction:column;gap:8px;align-items:center;opacity:0;padding-top:2px}
#portalThemeBox:hover #portalThemeDots,#portalThemeBox.open #portalThemeDots{opacity:1}
.portal-theme-dot{width:31px;height:31px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--portal-line);cursor:pointer;flex:none;padding:0}
.portal-theme-dot.active{box-shadow:0 0 0 3px var(--portal-text)}
#portalThemeToggle{position:absolute;bottom:4px;left:5px;width:44px;height:44px;border:0;background:var(--portal-surface);border-radius:50%;font-size:21px;cursor:pointer;z-index:3}
@media(max-width:600px){#portalThemeBox{right:14px;bottom:14px}}

/* ---- Tietosuoja/käyttöehdot + copyright -alapalkki (jaettu, 2026-08-17, laajennettu 2026-08-30) ----
   2026-08-17 (Jarin pyynnöstä): sama täyteväripalkki kuin pääportaalin
   #portalLegalFooter ja kotisivujen footer - var(--portal-primary) on jo
   teemavalitsimen mukana vaihtuva muuttuja (ks. body.theme-* -säännöt tämän
   tiedoston alussa), joten palkki seuraa automaattisesti valittua teemaa.
   2026-08-30 (Jari: "millainen homma olisi saada kaikkiin moduuleihin sama
   rakenne alaosaan kun pääsivulla, ainkin se vihreä palkki olisi hyvä olla
   vakio"): tämä palkki oli tähän asti tavallisessa sisältövirtauksessa
   (näkyi vain sivun aivan pohjalla vieritettäessä) - pääsivun vastaava
   #portalBottomBar taas on position:fixed ja siis AINA näkyvissä. Vaihdettu
   samaksi kiinteäksi palkiksi ja lisätty rinnalle copyright-teksti
   (js/portal-shared.js: ensureLegalFooter() kääri sisällön uuteen
   #portalModuleFooterBar-elementtiin ja mittaa/asettaa document.body:n
   padding-bottomin palkin todellisen korkeuden mukaan, jotta sisältö ei jää
   palkin alle - ks. sama js-tiedosto). #portalModuleLegalFooter-nimi säilyy
   sisäkkäisenä span-elementtinä taaksepäinyhteensopivuuden vuoksi. */
#portalModuleFooterBar{
  position:fixed;left:0;right:0;bottom:0;z-index:9990;
  background:var(--portal-primary);color:#fff;
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:4px 18px;padding:10px 16px;font-size:12px;
  box-shadow:0 -8px 30px rgba(15,23,42,.15);
}
.portal-module-footer-copy{color:rgba(255,255,255,.85)}
.portal-module-footer-copy:empty{display:none}
.portal-module-footer-legal{color:rgba(255,255,255,.85)}
.portal-module-footer-legal:empty{display:none}
.portal-module-footer-legal a{color:#fff;font-weight:700;text-decoration:underline}
.portal-module-footer-legal a:hover{opacity:.85}