/* Aava Office – Taite: yhteiset komponenttityylit (sama kuin design-järjestelmän components/bundle.css). Arvot tulevat tokens.css:n muuttujista. */

/* hidden-attribuutti voittaa komponenttien display-arvon */
[hidden] { display: none !important; }

body { margin: 0; font-family: var(--font-sans); background: var(--pinta); color: var(--teksti); -webkit-font-smoothing: antialiased; }

/* Kohdistus: sama rengas kaikissa ohjaimissa */
:where(.aava-tyokalu, .aava-valikko, .aava-painike, .aava-kentta, .aava-valilehti):focus-visible { outline: 2px solid var(--valinta); outline-offset: 1px; }

/* Yläpalkki */
.aava-ylapalkki { display: flex; align-items: center; gap: var(--tila-5); padding: var(--tila-4) var(--tila-5); padding-top: max(var(--tila-4), env(safe-area-inset-top)); background: var(--ylapalkki); color: var(--ylapalkki-teksti); }
.aava-tuote { display: flex; align-items: center; gap: 10px; min-width: 0; }
.aava-tuote img { display: block; width: 22px; height: 25px; flex-shrink: 0; }
.aava-tuotenimi { font-size: 17px; line-height: 22px; letter-spacing: -0.02em; white-space: nowrap; }
.aava-tuotenimi b { font-weight: 700; }
.aava-tuotenimi span { font-weight: 300; color: var(--kupari-vaalea); }
.aava-tiedostonimi { min-width: 0; font-size: 14px; color: var(--ylapalkki-heikko); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aava-koemerkki { padding: 1px 6px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: var(--sade-pieni); font-size: 12px; white-space: nowrap; }
.aava-tallennustila { margin-left: auto; font-size: 13px; color: var(--ylapalkki-heikko); white-space: nowrap; }
.aava-tallennustila.virhe { padding: 2px 8px; border-radius: var(--sade-pieni); background: var(--virhe); color: var(--virhe-teksti); }

/* Läsnäolo: muut samaa tiedostoa muokkaavat */
.aava-lasnaolo { display: flex; align-items: center; margin-left: auto; }
.aava-lasnaolo:not([hidden]) + .aava-tallennustila { margin-left: var(--tila-5); }
.aava-avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: -6px; border: 2px solid var(--ylapalkki); border-radius: 50%; color: #FFFFFF; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; }
.aava-avatar:first-child { margin-left: 0; }

/* Työkalurivi */
.aava-tyokalurivi { display: flex; gap: var(--tila-3); padding: var(--tila-3) var(--tila-4); border-bottom: 1px solid var(--viiva); background: var(--pinta-palkki); overflow-x: auto; scrollbar-width: thin; }
.aava-ryhma { display: flex; align-items: center; gap: var(--tila-1); padding-right: var(--tila-3); border-right: 1px solid var(--viiva); flex-shrink: 0; }
.aava-ryhma:last-child { border-right: 0; }
.aava-tyokalu { display: inline-flex; align-items: center; justify-content: center; min-width: var(--koko-ohjain); min-height: var(--koko-ohjain); padding: 0 var(--tila-4); border: 1px solid transparent; border-radius: var(--sade); background: transparent; color: var(--teksti); font: inherit; font-size: 14px; white-space: nowrap; cursor: pointer; }
.aava-tyokalu:hover { background: var(--pinta-korostus); }
.aava-tyokalu[aria-pressed="true"] { background: var(--pinta-korostus); border-color: var(--viiva-korostus); color: var(--teksti-korostus); }
.aava-tyokalu:disabled { opacity: 0.35; cursor: default; background: transparent; }
.aava-valikko { min-height: var(--koko-ohjain); max-width: 150px; padding: 0 var(--tila-3); border: 1px solid var(--viiva-ohjain); border-radius: var(--sade); background: var(--pinta); color: var(--teksti); font: inherit; font-size: 14px; cursor: pointer; }
.aava-valikko.kapea { max-width: 70px; }

/* Painike */
.aava-painike { height: var(--koko-kentta); padding: 0 14px; border: 1px solid var(--viiva-ohjain); border-radius: var(--sade); background: var(--pinta); color: var(--teksti); font: inherit; font-size: 14px; cursor: pointer; }
.aava-painike:hover { background: var(--pinta-korostus); }
.aava-painike.ensisijainen { background: var(--toiminto); border-color: var(--toiminto); color: var(--toiminto-teksti); font-weight: 600; }
.aava-painike.ensisijainen:hover { background: var(--toiminto-paalla); border-color: var(--toiminto-paalla); }
.aava-painike:disabled { opacity: 0.35; cursor: default; }

/* Tekstikenttä */
.aava-kentta { height: var(--koko-kentta); min-width: 200px; padding: 0 var(--tila-4); border: 1px solid var(--viiva-ohjain); border-radius: var(--sade); background: var(--pinta); color: var(--teksti); font: inherit; font-size: 14px; }
.aava-kentta::placeholder { color: var(--teksti-hento); }
.aava-kentta[aria-invalid="true"] { border-color: var(--virhe); }
.aava-vihje { font-size: 12px; color: var(--teksti-hento); }

/* Ilmoituspalkki ja kysyvä paneeli */
.aava-ilmoitus { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tila-4); padding: var(--tila-4) var(--tila-5); border-bottom: 1px solid var(--varoitus-viiva); background: var(--varoitus-pinta); color: var(--teksti); font-size: 13px; }
.aava-ilmoitus.paneeli { border-bottom-color: var(--huomio-viiva); background: var(--huomio-pinta); font-size: 14px; }
.aava-ilmoitus[hidden] { display: none; }
.aava-ilmoitus .aava-kentta { flex: 1; max-width: 480px; }

/* Kaavapalkki */
.aava-kaavapalkki { display: flex; align-items: stretch; height: var(--koko-kentta); border-bottom: 1px solid var(--viiva); background: var(--pinta); }
.aava-nimiruutu { display: flex; align-items: center; width: 90px; padding: 0 var(--tila-4); border-right: 1px solid var(--viiva); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.aava-fx { display: flex; align-items: center; padding: 0 var(--tila-4); color: var(--teksti-hento); font-size: 13px; font-style: italic; }
.aava-kaavarivi { flex: 1; min-width: 0; padding: 0 var(--tila-4); border: 0; background: transparent; color: var(--teksti); font: inherit; font-size: 14px; outline: none; }
.aava-kaavarivi:focus { box-shadow: inset 0 -2px 0 var(--valinta); }

/* Taulukkoruudukko */
.aava-ruudukko { display: grid; grid-template-columns: var(--koko-riviotsikko) repeat(var(--sarakkeita, 4), 96px); grid-auto-rows: var(--koko-otsikkorivi); background: var(--pinta); font-size: 14px; }
.aava-ruudukko > * { display: flex; align-items: center; border-right: 1px solid var(--viiva); border-bottom: 1px solid var(--viiva); font-variant-numeric: tabular-nums; overflow: hidden; white-space: pre; }
.aava-otsikkosolu { justify-content: center; background: var(--pinta-otsikko); color: var(--teksti-heikko); font-size: 12px; }
.aava-otsikkosolu.valittu { background: var(--pinta-valittu-otsikko); color: var(--teksti-korostus); font-weight: 600; }
.aava-solu { padding: 0 4px 2px; line-height: 1.25; }
.aava-solu.luku { justify-content: flex-end; }
.aava-solu.valittu { background: var(--valinta-alue); }
.aava-solu.aktiivinen { outline: 2px solid var(--valinta); outline-offset: -2px; }

/* Välilehdet */
.aava-valilehdet { display: flex; align-items: stretch; gap: var(--tila-2); padding: var(--tila-2) var(--tila-4); padding-bottom: max(var(--tila-2), env(safe-area-inset-bottom)); border-top: 1px solid var(--viiva); background: var(--pinta-palkki); overflow-x: auto; }
.aava-valilehti { min-height: var(--koko-kentta); padding: 0 14px; border: 1px solid transparent; border-radius: var(--sade); background: transparent; color: var(--teksti); font: inherit; font-size: 13px; white-space: nowrap; cursor: pointer; }
.aava-valilehti:hover { background: var(--pinta-korostus); }
.aava-valilehti[aria-selected="true"] { border-color: var(--viiva); background: var(--pinta); color: var(--teksti-korostus); font-weight: 600; box-shadow: var(--varjo-valilehti), inset 0 -2px 0 var(--kupari); }
.aava-valilehti.lisaa { padding: 0 10px; font-size: 18px; }

/* Tilarivi */
.aava-tilarivi { display: flex; gap: var(--tila-6); padding: var(--tila-2) var(--tila-5); padding-bottom: max(var(--tila-2), env(safe-area-inset-bottom)); border-top: 1px solid var(--viiva); background: var(--pinta-palkki); color: var(--teksti-heikko); font-size: 12px; }
.aava-tilarivi .oikealla { margin-left: auto; }

/* Asiakirjasivu */
.aava-tyotila { background: var(--pinta-tausta); overflow: auto; }
.aava-sivualue { width: max-content; margin: 0 auto; padding: var(--tila-7) var(--tila-7) var(--tila-8); }
.aava-asiakirja { box-sizing: border-box; background: var(--asiakirja-pinta); box-shadow: var(--varjo-sivu); color: var(--asiakirja-teksti); font-family: var(--font-asiakirja); font-size: 11pt; line-height: 1.15; caret-color: var(--meri); }
.aava-asiakirja p { margin: 0 0 8pt; }
.aava-asiakirja h1, .aava-asiakirja h2, .aava-asiakirja h3 { font-family: inherit; line-height: 1.2; }
.aava-asiakirja h1 { margin: 12pt 0 6pt; font-size: 18pt; color: var(--asiakirja-otsikko); }
.aava-asiakirja h2 { margin: 10pt 0 5pt; font-size: 15pt; color: var(--asiakirja-otsikko); }
.aava-asiakirja h3 { margin: 8pt 0 4pt; font-size: 13pt; }
.aava-asiakirja a { color: #1A73C9; text-decoration: underline; }
.aava-asiakirja table { width: 100%; margin: 0 0 8pt; border-collapse: collapse; table-layout: fixed; }
.aava-asiakirja th, .aava-asiakirja td { padding: 3pt 5pt; border: 1px solid #B6C0C8; text-align: left; vertical-align: top; }
.aava-asiakirja th { background: #E8F1F8; font-weight: 700; }

@media (max-width: 640px) {
  .aava-koemerkki, .aava-tiedostonimi { display: none; }
  .aava-tyokalu, .aava-valikko { min-width: var(--koko-kosketus); min-height: var(--koko-kosketus); }
  .aava-tyokalu .aava-ikoni + span { display: none; }
  .aava-nimiruutu { width: 64px; }
  .aava-sivualue { padding: 8px 4px 48px; }
}

/* Kuvakkeet: <svg class="aava-ikoni" aria-hidden="true"><use href="taite/ikonit.svg#nimi"></use></svg> */
.aava-ikoni { display: block; width: 20px; height: 20px; flex-shrink: 0; color: inherit; overflow: visible; }
.aava-tyokalu .aava-ikoni + span { margin-left: 6px; }