/* Piilopro — perustyylit. Suunta A: selkeä työpöytä. */

:root {
  --pohja:            #f7f6f4;
  --kortti:           #ffffff;
  --viiva:            #e4e1dc;
  --viiva-vaalea:     #efedea;
  --kentta-viiva:     #dedad3;
  --teksti:           #1c1b19;
  --teksti-2:         #3b372f;
  --himmea:           #6f6b64;
  --vaalea:           #8a847b;
  --haalea:           #9c968d;
  --korostus:         #33418f;
  --korostus-tumma:   #232d66;
  --korostus-teksti:  #2b3680;
  --korostus-tausta:  #eceaff;
  --vihrea:           #2f7a5a;
  --punainen:         #b4543a;
  --rivi-tausta:      #faf9f7;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--pohja);
  color: var(--teksti);
  font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
}

a { color: var(--korostus); text-decoration: none; }
a:hover { color: var(--korostus-tumma); }

h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.015em; margin: 0; }
h2 { font-size: 15px; font-weight: 600; margin: 0; }

.mono { font-family: var(--mono); }
.oikealle { text-align: right; }
.himmea { color: var(--himmea); }
.vaalea { color: var(--vaalea); }
.vihrea { color: var(--vihrea); }
.punainen { color: var(--punainen); }

/* ------------------------------------------------------------- runko ---- */

.runko { display: flex; min-height: 100vh; }

.sivupalkki {
  width: 236px; flex-shrink: 0;
  background: var(--kortti);
  border-right: 1px solid var(--viiva);
  display: flex; flex-direction: column;
  padding: 20px 14px; gap: 22px;
  position: sticky; top: 0; height: 100vh;
}

.tuotenimi { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
.tuotenimi .merkki {
  width: 30px; height: 30px; border-radius: 8px; background: var(--korostus);
  color: #fff; display: flex; align-items: center; justify-content: center;
}
.tuotenimi span { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }

.valitsin {
  display: flex; align-items: center; gap: 9px;
  height: 38px; padding: 0 11px;
  border: 1px solid #c4c0d8; border-radius: 8px; background: #f9f8ff;
  color: var(--korostus-teksti); font-size: 13.5px; font-weight: 600;
  cursor: pointer;
}
.valitsin .kaari { margin-left: auto; }

.valikko { display: flex; flex-direction: column; gap: 2px; }
.valikko a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 7px;
  color: #55504a; font-size: 14px; font-weight: 500;
}
.valikko a:hover { background: var(--rivi-tausta); }
.valikko a.valittu { background: var(--korostus-tausta); color: var(--korostus-teksti); font-weight: 600; }

.sivupalkki .alaosa { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
.kayttaja {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 12px 4px; border-top: 1px solid var(--viiva-vaalea); margin-top: 8px;
}
.nimimerkki {
  width: 30px; height: 30px; border-radius: 50%;
  background: #e2ded7; color: #55504a;
  font-size: 12px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.kayttaja .nimi { font-size: 13px; font-weight: 600; }
.kayttaja .asiakas { font-size: 11.5px; color: var(--vaalea); }

.paaosa { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; }

.ylapalkki {
  height: 62px; flex-shrink: 0;
  border-bottom: 1px solid var(--viiva); background: var(--kortti);
  display: flex; align-items: center; gap: 16px; padding: 0 28px;
  position: sticky; top: 0; z-index: 5;
}

.hakukentta {
  display: flex; align-items: center; gap: 9px;
  width: 420px; height: 36px; padding: 0 12px;
  border: 1px solid #e0ddd7; border-radius: 8px; background: var(--rivi-tausta);
}
.hakukentta input {
  border: 0; background: none; outline: none; flex-grow: 1;
  font: inherit; font-size: 13.5px; color: var(--teksti);
}
.hakukentta input::placeholder { color: var(--haalea); }

.sisalto { padding: 26px 28px 40px; display: flex; flex-direction: column; gap: 20px; }

/* --------------------------------------------------------- pikahaku ---- */

.pikahaku { position: relative; }

.pikahaku-tulokset {
  position: absolute; top: calc(100% + 5px); left: 0; width: 520px; max-width: 90vw;
  max-height: 380px; overflow-y: auto; z-index: 20;
  background: var(--kortti); border: 1px solid var(--viiva); border-radius: 9px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .12);
}

.pikahaku-rivi {
  display: flex; align-items: baseline; gap: 14px;
  padding: 9px 14px; border-top: 1px solid var(--viiva-vaalea);
  color: var(--teksti); text-decoration: none;
}
.pikahaku-rivi:first-child { border-top: 0; }
.pikahaku-rivi:hover, .pikahaku-rivi.valittu { background: var(--korostus-tausta); color: var(--teksti); }

.pikahaku-nimet { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex-grow: 1; }
/* Lihavointi kertoo kumpaan haku osui — henkilöön vai yritykseen. */
.pikahaku-nimet strong { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.pikahaku-toinen {
  font-size: 12.5px; color: var(--himmea); font-weight: 400;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pikahaku-lisa {
  font-size: 12px; color: var(--vaalea); flex-shrink: 0; max-width: 46%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pikahaku-tyhja { padding: 14px; font-size: 13px; color: var(--vaalea); text-align: center; }

/* ------------------------------------------------------------ osaset ---- */

.nappi {
  height: 36px; display: inline-flex; align-items: center; gap: 8px;
  padding: 0 16px; border-radius: 8px; border: 0;
  background: var(--korostus); color: #fff;
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.nappi:hover { background: var(--korostus-tumma); color: #fff; }
.nappi.reunus {
  background: none; border: 1px solid #e0ddd7; color: var(--teksti-2); font-weight: 500;
}
.nappi.reunus:hover { background: var(--rivi-tausta); color: var(--teksti-2); }
.nappi.pieni { height: 32px; padding: 0 13px; font-size: 13px; }

.kortti { background: var(--kortti); border: 1px solid var(--viiva); border-radius: 10px; }
.kortti .otsake {
  display: flex; align-items: center; gap: 10px; padding: 14px 18px 12px;
}
.kortti .otsake .lisa { margin-left: auto; font-size: 13px; font-weight: 500; }

.tunnusluvut { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tunnusluku { padding: 16px 18px; }
.tunnusluku .nimi {
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--vaalea);
}
.tunnusluku .arvo { font-family: var(--mono); font-size: 27px; font-weight: 500; margin-top: 8px; }
.tunnusluku .lisatieto { font-size: 12.5px; color: var(--vaalea); margin-top: 3px; }

table.lista { width: 100%; border-collapse: collapse; }
table.lista th {
  padding: 9px 16px; text-align: left; background: var(--rivi-tausta);
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--vaalea);
}
/* Otsikkosolun oma tasaus on tarkempi sääntö kuin .oikealle, joten
   numerosarakkeiden otsikot jäivät vasemmalle vaikka luvut olivat oikealla. */
table.lista th.oikealle { text-align: right; }

table.lista td {
  padding: 11px 16px; font-size: 13.5px; color: #2b2823;
  border-top: 1px solid var(--viiva-vaalea);
}
table.lista tbody tr:hover td { background: var(--rivi-tausta); }
table.lista td.nimi { font-weight: 600; }

.tyhja { padding: 26px 18px; text-align: center; color: var(--vaalea); font-size: 13.5px; }

.merkki-pilleri {
  display: inline-block; font-size: 12px; font-weight: 600;
  padding: 3px 10px; border-radius: 20px;
  background: var(--korostus-tausta); color: var(--korostus-teksti);
}
.merkki-pilleri.vihrea { background: #e5eee6; color: #2f7a5a; }
.merkki-pilleri.punainen { background: #f6e7e1; color: #8d3c26; }

.rivilista .rivi {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 18px; border-top: 1px solid var(--viiva-vaalea);
}
.rivilista .rivi .teksti { flex-grow: 1; font-size: 13.5px; }
.rivilista .rivi .aika { font-family: var(--mono); font-size: 12px; color: var(--vaalea); }
.ruutu { width: 16px; height: 16px; border: 1.5px solid #cdc8c0; border-radius: 4px; flex-shrink: 0; }

.lippu {
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--korostus);
}

/* ------------------------------------------------------------ kentat ---- */

.kentta { display: flex; flex-direction: column; gap: 5px; }
.kentta label {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--vaalea);
}
/* Kaikki kentät paitsi valintaruudut ja -napit. Tyypit lueteltiin aiemmin
   yksitellen, jolloin jokainen uusi tyyppi (tel, number) jäi tyylittelemättä
   ja näytti rivin keskellä selaimen omalta kentältä. */
.kentta input:not([type=checkbox]):not([type=radio]), .kentta select {
  height: 34px; padding: 0 11px;
  border: 1px solid var(--kentta-viiva); border-radius: 7px; background: #fff;
  font: inherit; font-size: 13.5px; color: var(--teksti);
}
.kentta input:focus, .kentta select:focus {
  outline: none; border-color: var(--korostus); box-shadow: 0 0 0 3px var(--korostus-tausta);
}
.kentat { display: flex; flex-direction: column; gap: 14px; }
.kentat .pari { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

/* ------------------------------------------------------- kirjautuminen -- */

.kirjautumissivu {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--pohja); padding: 24px;
}
.kirjautumiskortti {
  width: 380px; background: var(--kortti);
  border: 1px solid var(--viiva); border-radius: 12px; padding: 32px;
}
.kirjautumiskortti h1 { font-size: 21px; margin: 18px 0 0; }
.kirjautumiskortti p.johdanto { font-size: 13.5px; color: var(--himmea); margin: 6px 0 22px; }

.virheilmoitus {
  background: #fdf1ec; border: 1px solid #ecd9d1; color: #8d3c26;
  font-size: 13.5px; padding: 10px 13px; border-radius: 8px; margin-bottom: 16px;
}
.ilmoitus {
  background: #f4f6ef; border: 1px solid #e2e7d8; color: #3f5c46;
  font-size: 13.5px; padding: 10px 13px; border-radius: 8px;
}

/* -------------------------------------------------------- yrityslista --- */

.kaksipalstaa { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }

.rajaus { padding: 18px; display: flex; flex-direction: column; gap: 18px; }
.rajaus .ryhma > .nimi {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--vaalea); margin-bottom: 7px;
}
.rajaus label.valinta {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 0; font-size: 13.5px; cursor: pointer;
}
.rajaus label.valinta input { margin: 0; accent-color: var(--korostus); }
.hakuohje {
  padding-top: 14px; border-top: 1px solid var(--viiva-vaalea);
  font-size: 12.5px; color: var(--vaalea); line-height: 1.55;
}

.sivutus {
  border-top: 1px solid var(--viiva-vaalea); padding: 12px 16px;
  display: flex; align-items: center; gap: 6px;
}
.sivutus .laskuri { font-family: var(--mono); font-size: 12.5px; color: var(--vaalea); }
.sivutus .napit { margin-left: auto; display: flex; gap: 6px; }
.sivutus .napit a, .sivutus .napit span {
  width: 30px; height: 30px; border: 1px solid #e0ddd7; border-radius: 7px;
  display: flex; align-items: center; justify-content: center; color: var(--teksti-2);
}
.sivutus .napit span { color: #b0aaa1; }

/* ------------------------------------------------------- yrityskortti --- */

.murupolku { font-size: 13px; color: var(--vaalea); }
.otsikkorivi { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.otsikkorivi .oikea { margin-left: auto; display: flex; gap: 10px; align-items: center; }

.valilehdet {
  display: flex; align-items: center; gap: 2px;
  padding: 0 8px; border-bottom: 1px solid var(--viiva);
}
.valilehdet a {
  padding: 10px 15px; font-size: 13.5px; font-weight: 500;
  color: var(--himmea); border-bottom: 2px solid transparent;
}
.valilehdet a.valittu {
  color: var(--korostus-teksti); font-weight: 600; border-bottom-color: var(--korostus);
}
.valilehdet .oikea { margin-left: auto; padding-right: 8px; }

.kortti-kaksi { display: grid; grid-template-columns: 372px minmax(0, 1fr); gap: 20px; align-items: start; }

/* Soittolista: saman yrityksen rivit ovat yksi ryhma. Ylaviiva vain
   ryhman alussa, jotta ryhmat erottuvat mutta rivit pysyvat yhdessa. */
table.soittolista td { border-top: 0; }
table.soittolista tr.ryhman-alku td { border-top: 1px solid var(--viiva-vaalea); }
table.soittolista tbody tr:hover td { background: var(--rivi-tausta); }

/* ------------------------------------------------------------- vihje ---- */

/* Selaimen oma title-vihje ilmestyy sekunnin viiveellä, näyttää järjestelmän
   omalta eikä ohjelmalta, eikä sitä voi muotoilla. Tämä on sama asia mutta
   ohjelman näköisenä. Pelkkää CSS:ää: toimii myös näppäimistöllä, koska
   :focus-visible on mukana. */

[data-vihje] { position: relative; }

[data-vihje]::before,
[data-vihje]::after {
  opacity: 0; visibility: hidden;
  transition: opacity .12s ease .35s, visibility 0s linear .47s;
  pointer-events: none; position: absolute; z-index: 60;
}

[data-vihje]::after {
  content: attr(data-vihje);
  bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: #2b2823; color: #fff;
  font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: 0;
  text-transform: none; white-space: nowrap;
  padding: 6px 10px; border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}

/* Kolmio osoittaa siihen elementtiin, jota vihje koskee. */
[data-vihje]::before {
  content: ""; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: #2b2823;
}

[data-vihje]:hover::before, [data-vihje]:hover::after,
[data-vihje]:focus-visible::before, [data-vihje]:focus-visible::after {
  opacity: 1; visibility: visible;
  transition: opacity .12s ease .35s, visibility 0s;
}

/* Alas, kun elementti on lähellä sivun ylälaitaa. */
[data-vihje-suunta="alas"]::after {
  bottom: auto; top: calc(100% + 8px);
}
[data-vihje-suunta="alas"]::before {
  bottom: auto; top: calc(100% + 3px);
  border-top-color: transparent; border-bottom-color: #2b2823;
}

/* Vasemmalle, kun elementti on rivin oikeassa reunassa eikä vihje mahtuisi. */
[data-vihje-suunta="vasen"]::after {
  bottom: 50%; left: auto; right: calc(100% + 10px); transform: translateY(50%);
}
[data-vihje-suunta="vasen"]::before {
  bottom: 50%; left: auto; right: calc(100% + 5px); transform: translateY(50%);
  border-top-color: transparent; border-left-color: #2b2823;
}

/* Oikealle. Käytössä editorin palkissa, jossa yläpuolella ei ole tilaa:
   vihje jäisi välilehtiotsikoiden alle. */
[data-vihje-suunta="oikea"]::after {
  bottom: 50%; left: calc(100% + 10px); right: auto; transform: translateY(50%);
}
[data-vihje-suunta="oikea"]::before {
  bottom: 50%; left: calc(100% + 5px); right: auto; transform: translateY(50%);
  border-top-color: transparent; border-right-color: #2b2823;
}

/* ------------------------------------------------------------ modaali --- */

.modaali-tausta {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(28, 27, 25, .45);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.modaali-tausta[hidden] { display: none; }

.modaali {
  background: var(--kortti); border-radius: 12px; width: 420px; max-width: 100%;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .25);
  padding: 24px; display: flex; flex-direction: column; gap: 14px;
}
.modaali h2 { font-size: 17px; font-weight: 600; }
.modaali p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--himmea); }
.modaali .napit { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }
.nappi.vaarallinen { background: var(--punainen); }
.nappi.vaarallinen:hover { background: #8d3c26; }

/* --------------------------------------------------- soitettu-merkinta -- */

/* Tyhjä ruutu ei kerro mitä nappi tekee. Ympyrä ja sen sisällä haalea
   valintamerkki lupaa "merkitse tehdyksi", ja täyttyy vihreäksi kun se on. */
.merkitse {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid #cdc8c0; background: #fff; color: #cdc8c0;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .12s, color .12s, background .12s;
}
button:hover > .merkitse { border-color: var(--vihrea); color: var(--vihrea); }
.merkitse.tehty {
  background: var(--vihrea); border-color: var(--vihrea); color: #fff;
}
button:hover > .merkitse.tehty { background: #256349; border-color: #256349; }

/* Järjestettävä otsikko. Perii otsikkosolun tyylin, joten se näyttää
   otsikolta eikä linkiltä ennen kuin siihen osuu hiirellä. */
table.lista th a.jarjesta {
  color: inherit; text-decoration: none; white-space: nowrap;
  border-bottom: 1px dashed transparent;
}
table.lista th a.jarjesta:hover { color: var(--korostus); border-bottom-color: currentColor; }
table.lista th a.jarjesta.aktiivinen { color: var(--korostus-teksti); }
.jarjestysmerkki { font-size: 9px; margin-left: 3px; vertical-align: 1px; }

/* ---------------------------------------------------------------- editori --
   Kevyt muotoilueditori info-teksteille. Toteutus nojaa selaimen omaan
   contenteditable-tukeen, joten kirjastoja ei tarvita. Editori on käyttäjän
   mukavuutta varten — sisällön turvallisuudesta vastaa palvelimen Puhdistin. */

/* Ei overflow: hidden, vaikka se pyöristäisi palkin kulmat helpommin —
   se leikkaisi painikkeiden vihjeet pois. Kulmat pyöristetään palkkiin itseensä. */
.editori {
  border: 1px solid var(--kentta-viiva);
  border-radius: 7px;
  background: #fff;
}

.editori:focus-within {
  border-color: var(--korostus);
  box-shadow: 0 0 0 3px rgba(51, 65, 143, 0.12);
}

.editori-palkki {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px 6px;
  background: var(--rivi-tausta);
  border-bottom: 1px solid var(--viiva-vaalea);
  border-radius: 6px 6px 0 0;
}

.editori-palkki button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 26px;
  padding: 0 7px;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--himmea);
  font: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.editori-palkki button:hover {
  background: var(--korostus-tausta);
  color: var(--teksti);
}

.editori-erotin {
  width: 1px;
  height: 16px;
  margin: 0 4px;
  background: var(--viiva-vaalea);
}

.editori-kentta {
  min-height: 88px;
  padding: 10px 12px;
  font-size: 13.5px;
  line-height: 1.55;
  outline: 0;
  overflow-wrap: anywhere;
}

/* Ohjeteksti näkyy vain kun kenttä on tyhjä. :empty ei riitä, koska selain
   jättää kenttään usein yhden <br>-elementin. */
.editori-kentta:empty::before,
.editori-kentta:has(> br:only-child)::before {
  content: attr(data-tyhja);
  color: var(--haalea);
  pointer-events: none;
}

/* Editorin ja tallennetun tekstin on näytettävä samalta, muuten muotoilu
   näyttää muuttuvan tallennuksessa. */
.editori-kentta,
.kommenttiteksti {
  font-size: 13.5px;
  line-height: 1.55;
}

.editori-kentta > :first-child,
.kommenttiteksti > :first-child { margin-top: 0; }

.editori-kentta > :last-child,
.kommenttiteksti > :last-child { margin-bottom: 0; }

.editori-kentta p,
.kommenttiteksti p { margin: 0 0 8px; }

.editori-kentta h3,
.kommenttiteksti h3 {
  margin: 12px 0 5px;
  font-size: 14.5px;
  font-weight: 650;
  letter-spacing: -0.1px;
}

.editori-kentta ul, .editori-kentta ol,
.kommenttiteksti ul, .kommenttiteksti ol { margin: 0 0 8px; padding-left: 20px; }

.editori-kentta li,
.kommenttiteksti li { margin: 2px 0; }

/* ------------------------------------------------- soittolistan info-rivi --
   Puhelun aikana kirjattava merkintä. Rivi avautuu soittolistan rivin alle,
   eikä vie tilaa ennen kuin sitä tarvitaan. */

.infonappi {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  color: var(--korostus-teksti);
  cursor: pointer;
}

.infonappi.auki { font-weight: 600; }

.infomaara {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--korostus-tausta);
  color: var(--korostus-teksti);
  font-size: 10.5px;
  font-weight: 600;
}

tr.inforivi > td { padding-top: 0; background: var(--rivi-tausta); }

.infolomake {
  display: flex;
  align-items: center;
  gap: 8px;
}

.infolomake input[name="teksti"] {
  flex: 1;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid var(--kentta-viiva);
  border-radius: 6px;
  background: #fff;
  font: inherit;
  font-size: 13px;
}

.infolomake input[name="teksti"]:focus {
  outline: 0;
  border-color: var(--korostus);
  box-shadow: 0 0 0 3px rgba(51, 65, 143, 0.12);
}

.edellinen-info {
  margin-top: 6px;
  font-size: 12px;
  color: var(--himmea);
}

/* ------------------------------------------------------- kirjautumissivut --
   Kirjautuminen, koodin vahvistus ja salasanan palautus. */

.kirjautumislinkki {
  margin: 16px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--vaalea);
}

/* Painike, joka näyttää linkiltä. Tarvitaan siellä missä toiminto vaatii
   POSTin (uusi koodi), mutta näyttää käyttäjälle linkiltä. */
.linkkinappi {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  font-size: inherit;
  color: var(--korostus-teksti);
  text-decoration: underline;
  cursor: pointer;
}

/* Koodi on lyhyt ja luetaan puhelimen ruudulta: iso ja väljä on helpompi
   tarkistaa kuin tavallinen tekstikenttä. */
.koodikentta {
  font-family: var(--mono);
  font-size: 22px;
  letter-spacing: 6px;
  text-align: center;
}

.valintarivi {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--himmea);
  line-height: 1.45;
}



/* Taulukon rivillä muokattava kenttä. Matalampi ja kevyempi kuin lomakekenttä,
   jotta rivi pysyy rivin korkuisena. */
.rivikentta {
  height: 30px;
  max-width: 100%;
  padding: 0 9px;
  border: 1px solid var(--kentta-viiva);
  border-radius: 6px;
  background: #fff;
  font: inherit;
  font-size: 13px;
}

.rivikentta:focus {
  outline: 0;
  border-color: var(--korostus);
  box-shadow: 0 0 0 3px rgba(51, 65, 143, 0.12);
}

table.kayttajalista td { vertical-align: middle; }

/* ------------------------------------------------------ viestieditori --
   Kolme palstaa: elementtipaletti, esikatselu ja ominaisuudet. Esikatselu
   saa keskeltä sähköpostin oman levyisen tilan, jotta se näyttää siltä
   miltä viesti oikeasti näyttää. */

.editorisivu {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr) 300px;
  gap: 18px;
  align-items: start;
  margin-top: 18px;
}

/* Kapealla näytöllä paletti vaakariviksi esikatselun ylle. */
@media (max-width: 1200px) {
  .editorisivu { grid-template-columns: minmax(0, 1fr) 280px; }
  .paletti { grid-column: 1 / -1; }
  .paletti .palettilista { display: flex; flex-wrap: wrap; gap: 8px; }
}

.paletti,
.ominaisuudet {
  background: var(--kortti);
  border: 1px solid var(--viiva);
  border-radius: 10px;
  padding: 16px;
  position: sticky;
  top: 78px;
}

.palettikohta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  margin-bottom: 6px;
  border: 1px solid var(--viiva-vaalea);
  border-radius: 7px;
  background: var(--rivi-tausta);
  font-size: 13.5px;
  font-weight: 500;
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.palettikohta:hover { border-color: var(--korostus); background: var(--korostus-tausta); }
.palettikohta:active { cursor: grabbing; }
.palettikuvake { display: flex; color: var(--himmea); }

/* Haamu seuraa osoitinta raahauksen aikana. pointer-events pois, jotta
   se ei estä osoitinta osumasta esikatseluun sen alla. */
.raahaushaamu {
  position: fixed;
  z-index: 200;
  pointer-events: none;
  padding: 7px 12px;
  border-radius: 7px;
  background: var(--korostus);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
}

/* Läpinäkyvä kalvo iframen päälle raahauksen ajaksi. Ilman sitä osoittimen
   tapahtumat menevät iframen sisään heti kun osoitin ylittää esikatselun
   reunan, eikä emosivun pointerup enää laukea. */
.raahauskalvo {
  position: fixed;
  inset: 0;
  z-index: 199;
  cursor: grabbing;
}

.kangas {
  background: var(--rivi-tausta);
  border: 1px solid var(--viiva);
  border-radius: 10px;
  padding: 10px;
  min-width: 0;
}

.kangas iframe {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 6px;
  background: #fff;
  transition: width .15s;
}

/* Mobiilinäkymä: sama viesti kapeassa tilassa. Palstat pinoutuvat
   itsestään, koska se ei ole media queryn vaan säiliön leveyden varassa. */
.kangas.mobiili iframe { width: 375px; margin: 0 auto; }

.kangas-tyhja {
  padding: 40px 20px;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--vaalea);
}

.ominaisuudet h2 { font-size: 14px; }

.lohkon-otsake {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--viiva-vaalea);
}

.lohkon-otsake .linkkinappi { margin-left: auto; color: var(--punainen); font-size: 12.5px; }

.ominaisuudet textarea.lohkokentta {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--kentta-viiva);
  border-radius: 7px;
  font: inherit;
  font-size: 13.5px;
  line-height: 1.55;
  resize: vertical;
}

.ominaisuudet textarea.lohkokentta:focus {
  outline: 0;
  border-color: var(--korostus);
  box-shadow: 0 0 0 3px rgba(51, 65, 143, 0.12);
}

/* Työpöytä/mobiili-valitsin otsikkorivillä. */
.nakymapainikkeet {
  display: inline-flex;
  border: 1px solid var(--kentta-viiva);
  border-radius: 7px;
  overflow: hidden;
}

.nakymapainikkeet button {
  border: 0;
  padding: 0 12px;
  height: 34px;
  background: none;
  font: inherit;
  font-size: 12.5px;
  color: var(--himmea);
  cursor: pointer;
}

.nakymapainikkeet button.valittu {
  background: var(--korostus-tausta);
  color: var(--korostus-teksti);
  font-weight: 600;
}