/* Varit maaritellaan yhtena tokenikerroksena. Vaalea ja tumma tila kirjoitetaan
   rinnakkain, ei jalkikateen kaannettyna, ja kummankin kontrastit on mitattu
   erikseen. Nakymakohtaisiin tiedostoihin ei kirjoiteta raakoja hex-arvoja:
   jos uusi vari tarvitaan, se lisataan tanne molempiin tiloihin. */
:root, :root[data-theme="light"] {
  color-scheme: light;
  --background: #fbfaf8;
  --surface: #ffffff;
  --surface-soft: #f4f2ee;
  --text: #1a1d1a;
  --muted-text: #565b55;
  --muted-cool: #545d6a;
  --primary: #116b48;
  --primary-hover: #0d5739;
  --primary-text: #ffffff;
  --focus: #075fce;
  --border: #e4e1da;
  --border-strong: #c9c5bb;
  /* Syotekentan reuna on kayttoliittymakomponentin raja, ei koriste. WCAG 2.2
     1.4.11 vaatii silta 3:1 taustaa vasten. Hiusviiva --border jaa 1,24:1,
     joten kentat saavat oman tummemman reunan: 3,33:1 valkoisella ja 3,12:1
     sivun taustalla. Erillinen token, jottei jokainen erotinviiva muutu
     raskaaksi. */
  --border-input: #8b9089;
  --border-cool: #e2e6ec;
  --soft-green: #e8f2ec;
  --soft-green-strong: #e2f0e7;
  --success-border: #b9d7c5;
  --soft-yellow: #fff5dc;
  --warn-text: #6f4d00;
  --warn-text-strong: #4a3600;
  --warn-soft: #fdf3d6;
  --warn-border: #8a6100;
  --info-text: #0c447c;
  --info-soft: #e6f1fb;
  --info-border: #396a9b;
  --danger: #ad2e25;
  --danger-soft: #fcecea;
  --danger-strong: #771f19;
  --danger-border: #e2bdb8;
  --danger-border-soft: #cda39f;
  --danger-text: #ffffff;
  --marker: #c4322b;
  --panel-tint: #ebe8e2;
  --panel-tint-2: #f4f2ee;
  --panel-tint-3: #dce8e0;
  --calendar-surface: #edf6f0;
  --calendar-border: #cfe3d5;
  --calendar-meeting: #9b5c20;
  --calendar-meeting-soft: #fff6e9;
  --calendar-email-soft: #edf5fc;
  --stage-lost-line: #6f7a73;
  --link-green: #2f6f4f;
  --shadow: 0 1px 2px rgb(22 33 27 / 6%), 0 12px 32px rgb(22 33 27 / 6%);
  --scrim: rgb(16 34 25 / 68%);
  --modal-shadow: 0 24px 80px rgb(12 27 18 / 38%);
  --menu-shadow: 0 12px 28px rgb(16 32 24 / 18%);
  --brand-mark-surface: #116b48;
  --brand-mark-text: #ffffff;
  /* Kortin varjo on kevyempi ja laajempi kuin sivun yleisvarjo: pinta nousee
     taustasta ilman etta reuna piirtyy raskaana viivana. */
  --shadow-card: 0 1px 2px rgb(22 33 27 / 5%), 0 10px 26px rgb(22 33 27 / 7%);
  /* Tyopoydan kolme mittaria erottuvat toisistaan omalla savyllaan, ei vain
     jarjestyksella. Savy ei kanna merkitysta yksin: otsikko kertoo saman.
     Kontrastit mitattu: 8,80:1, 9,44:1 ja 8,67:1. */
  --metric-1-surface: #e5f0ea;
  --metric-1-text: #0d4a33;
  --metric-2-surface: #e8eff6;
  --metric-2-text: #0c3f66;
  --metric-3-surface: #fdf3d6;
  --metric-3-text: #5c4000;
  /* Seuraava tehtava on tyopoydan tarkein asia, joten se saa taytetyn pinnan
     eika hiusviivalla rajattua laatikkoa. Vaalein savy #14764f: valkoinen
     teksti 5,62:1 ja vaalea aputeksti 4,78:1. */
  --hero-surface: linear-gradient(118deg, #0e3d2b 0%, #116b48 72%, #14764f 100%);
  --hero-text: #ffffff;
  --hero-muted: #e2f0e8;
  --hero-button-surface: #ffffff;
  --hero-button-text: #0d5739;
  --hero-ghost-surface: rgb(255 255 255 / 16%);
  --hero-ghost-surface-hover: rgb(255 255 255 / 26%);
  --hero-ghost-border: rgb(255 255 255 / 50%);
  --hero-ghost-border-hover: rgb(255 255 255 / 75%);
}
/* Tumma tila. Pinnat nousevat portaittain taustasta, ei varjoilla vaan
   sävyllä ja hiusviivalla, koska varjo ei erotu tummalla taustalla. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --background: #101210;
  --surface: #181b18;
  --surface-soft: #20241f;
  --text: #eceee9;
  --muted-text: #a8ada4;
  --muted-cool: #a1abb6;
  --primary: #4cc189;
  --primary-hover: #6ad3a1;
  --primary-text: #062516;
  --focus: #8fc4ff;
  --border: #2b302a;
  --border-strong: #414740;
  /* Tumman tilan arvo on mitattu erikseen: 3,82:1 pinnalla ja 3,50:1
     pehmealla pinnalla. */
  --border-input: #6d746b;
  --border-cool: #2f353c;
  --soft-green: #14301f;
  --soft-green-strong: #1c3b28;
  --success-border: #2c5c40;
  --soft-yellow: #33290f;
  --warn-text: #fbbf24;
  --warn-text-strong: #fcd34d;
  --warn-soft: #33290f;
  --warn-border: #a97f16;
  --info-text: #93c5fd;
  --info-soft: #16283a;
  --info-border: #4f80b3;
  --danger: #f87171;
  --danger-soft: #3a1e1e;
  --danger-strong: #fca5a5;
  --danger-border: #5c2f2b;
  --danger-border-soft: #6d3a35;
  --danger-text: #240b0a;
  --marker: #f87171;
  --panel-tint: #2a2f29;
  --panel-tint-2: #1a201d;
  --panel-tint-3: #232a26;
  --calendar-surface: #17251d;
  --calendar-border: #27402f;
  --calendar-meeting: #d69a4d;
  --calendar-meeting-soft: #2c2318;
  --calendar-email-soft: #182430;
  --stage-lost-line: #8a938d;
  --link-green: #6ee79b;
  --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 12px 32px rgb(0 0 0 / 32%);
  /* Tummalla taustalla peite tarvitsee enemman voimaa, jotta modaalin reuna
     erottuu taustasta eika nakyma sula yhteen. */
  --scrim: rgb(0 0 0 / 74%);
  --modal-shadow: 0 24px 80px rgb(0 0 0 / 62%);
  --menu-shadow: 0 12px 28px rgb(0 0 0 / 55%);
  --brand-mark-surface: #4cc189;
  --brand-mark-text: #062516;
  /* Tummalla taustalla varjo ei erota pintaa, joten kortti nousee savylla ja
     hiusviivalla. Varjo jaa mukaan vain syvyyden vihjeeksi. */
  --shadow-card: 0 1px 2px rgb(0 0 0 / 38%), 0 10px 26px rgb(0 0 0 / 30%);
  /* Tumman tilan savyt on mitattu erikseen: 9,27:1, 9,35:1 ja 9,52:1. */
  --metric-1-surface: #16301f;
  --metric-1-text: #a9dcc0;
  --metric-2-surface: #16232f;
  --metric-2-text: #a8caea;
  --metric-3-surface: #2c2513;
  --metric-3-text: #e8c98a;
  --hero-surface: linear-gradient(118deg, #0b2b1e 0%, #124a34 75%, #15583d 100%);
  --hero-text: #ffffff;
  --hero-muted: #d7e8de;
  --hero-button-surface: #ffffff;
  --hero-button-text: #0b2b1e;
  --hero-ghost-surface: rgb(255 255 255 / 14%);
  --hero-ghost-surface-hover: rgb(255 255 255 / 24%);
  --hero-ghost-border: rgb(255 255 255 / 42%);
  --hero-ghost-border-hover: rgb(255 255 255 / 68%);
}

:root {
  /* Tilaskaala: yksi rytmi koko sovellukselle. Vaeljyys on se, mika tekee
     nakymasta nykyaikaisen - ei pienempi teksti. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 28px;
  --space-7: 36px;
  /* Neljä sädettä ja pilleri, ei enempää. Ennen tätä tiedostossa oli 13 eri
     arvoa (3, 4, 6, 7, 8, 9, 10, 12, 14, 15, 16, 17 ja 999 px). Silmä ei
     erota 8:aa 9:stä, mutta se erottaa ettei mikään toistu. */
  --radius-xs: 6px;
  --radius-small: 9px;
  --radius: 12px;
  --radius-large: 18px;
  --radius-pill: 999px;
  /* Nayttorajat ovat 640, 768 ja 1024 pikselia. Yksi sarja koko sovellukselle,
     jotta ulkoasu vaihtuu samoissa kohdissa joka nakymassa ja testattavia
     leveyksia on kolme eika kahdeksan. min-width -saannot alkavat rajan
     jalkeisesta pikselista, jottei sama leveys osu molempiin. Ainoa poikkeus
     on soittokierroksen 1100 px, joka tulee sisallon leveydesta. */
  /* Yksi liikerytmi koko sovellukselle. 150 ms riittaa kertomaan etta rivi
     reagoi, eika hidasta nopeaa selailua. */
  --transition: .15s ease;
  /* Kolme lihavuutta. Aiemmin 12 eri arvoa: 400, 500, 550, 600, 640, 650,
     680, 700, 720, 750, 760 ja 800. */
  --weight-normal: 400;
  --weight-medium: 530;
  --weight-semibold: 640;
  --weight-bold: 720;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* UX_PRINCIPLES.md 4: runkotekstin tavoitekoko on vahintaan 16 CSS-pikselia,
     koska oletuskayttaja on 50-65-vuotias myyja. Aiempi 15 px alitti oman
     vaatimuksemme ja veti koko asteikon mukanaan alas: .78rem oli 11,7 px.
     16 px nostaa saman asteikon luettavaksi ilman etta mittasuhteet muuttuvat. */
  font-size: 16px;
  line-height: 1.45;
  color: var(--text);
  background: var(--background);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; background: var(--background); }
body { margin: 0; color: var(--text); background: var(--background); }
button, input, select, textarea { font: inherit; }
button, input, select { min-height: 44px; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
#page-title:focus { outline: none; }
/* Osoitin- ja kohdistustilat vaihtuvat pehmeasti, jotta kayttaja ehtii nahda
   mika rivi reagoi. Vari- ja reunamuutokset vain: mitat pysyvat paikallaan,
   joten rivit eivat hyppaa eika ulkoasu latele. Liikeherkkyys huomioidaan
   prefers-reduced-motion -saannossa. */
.navigation-button,
.theme-switch-button,
.search-suggestion,
.customer-type-button,
.customer-row,
.detail-deal,
.data-row,
.organization-card,
.prh-result,
.wizard-type-button,
.wizard-country-button,
.refox-candidate,
.calendar-task,
.attention-list button,
.varasto-row summary {
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(1.45rem, 2.2vw, 1.7rem); line-height: 1.2; letter-spacing: -.02em; }
h2 { font-size: 1.1rem; line-height: 1.3; }
h3 { font-size: .98rem; }
small { color: var(--muted-text); font-size: .9rem; }

.skip-link {
  position: fixed;
  z-index: 100;
  top: -70px;
  left: 12px;
  padding: 10px 14px;
  color: var(--primary-text);
  background: var(--primary);
  border-radius: var(--radius-small);
}
.skip-link:focus { top: 12px; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Sovelluskehys */
.application-shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-height: 100vh;
  padding: var(--space-6) var(--space-5) var(--space-5);
  overflow-y: auto;
  background: var(--surface);
  border-right: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: var(--weight-bold); font-size: .98rem; }
.brand > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-mark {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  min-width: 38px;
  height: 38px;
  padding: 0 7px;
  color: var(--brand-mark-text);
  background: var(--brand-mark-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-small);
  font-size: .95rem;
  font-weight: var(--weight-bold);
  letter-spacing: .02em;
}
.organization-picker {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-6) 0 var(--space-2);
  color: var(--muted-text);
  font-size: .95rem;
  font-weight: var(--weight-bold);
  letter-spacing: .02em;
}
/* Katselutilan valitsin puhelimen Lisaa-valikossa. */
.more-navigation-view-as {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  color: var(--muted-text);
  font-size: .95rem;
  font-weight: var(--weight-bold);
}
.more-navigation-view-as select,
.organization-picker select {
  width: 100%;
  min-height: 44px;
  padding: 7px 30px 7px 10px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-small);
  font-size: .95rem;
}
.navigation-heading {
  margin: var(--space-6) var(--space-3) var(--space-3);
  color: var(--muted-text);
  font-size: .95rem;
  font-weight: var(--weight-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  /* Pitka otsikko, esimerkiksi "Sahkopostimarkkinointi", katkesi
     sivupalkin reunaan harvennuksen takia. Otsikko rivittyy nyt eika
     valu ulos, ja tavutus estaa liian kapean rivin. */
  overflow-wrap: anywhere;
  hyphens: auto;
  line-height: 1.3;
}
.management-heading { margin-top: auto; padding-top: 25px; }
.sidebar-navigation { display: grid; gap: var(--space-1); }
.navigation-button {
  width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-small);
  text-align: left;
  cursor: pointer;
  font-weight: var(--weight-semibold);
}
.navigation-button:hover:not(:disabled) { background: var(--soft-green); }
.navigation-button.is-selected { color: var(--primary-text); background: var(--primary); }
.navigation-button:disabled { color: var(--muted-text); cursor: not-allowed; opacity: .7; }
.signed-in-user {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-5);
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--border);
  font-size: .95rem;
}
/* Sivupalkin tekstilinkit ovat myos kosketuskohteita. */
.signed-in-user .text-button { min-height: 44px; justify-self: start; }
.signed-in-user strong { overflow: hidden; text-overflow: ellipsis; }
.release-info {
  display: grid;
  gap: 1px;
  margin: 7px 4px 0;
  padding: 0 0 11px;
  color: var(--muted-text);
  border-bottom: 1px solid var(--border);
  font-size: .95rem;
  line-height: 1.35;
}
.release-info strong { color: var(--text); font-size: .95rem; }
.release-info span { margin-top: 4px; }
.release-info time {
  color: var(--text);
  font-style: normal;
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.release-info + .organization-picker { margin-top: 12px; }
.text-button {
  width: fit-content;
  min-height: 38px;
  padding: 5px 0;
  color: var(--primary);
  background: transparent;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
/* Ulkoasun valinta: kolme nakyvaa vaihtoehtoa, ei piilotettua kytkinta.
   Jokainen painike on 44 px korkea niin kuin muutkin kosketuskohteet. */
.theme-switch { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.theme-switch-label {
  margin: 0 0 var(--space-2);
  color: var(--muted-text);
  font-size: .95rem;
  font-weight: var(--weight-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.theme-switch-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
}
.theme-switch-button {
  display: grid;
  place-items: center;
  gap: 2px;
  min-height: 44px;
  padding: 4px 2px;
  color: var(--muted-text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-small);
  font-size: .85rem;
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
.theme-switch-button:hover { color: var(--text); background: var(--surface); }
.theme-switch-button[aria-pressed="true"] {
  color: var(--text);
  background: var(--surface);
  border-color: var(--border-strong);
}
.theme-switch-button svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.mobile-navigation, .mobile-release-info, .bottom-navigation { display: none; }

.main-content {
  width: 100%;
  max-width: 1600px;
  min-width: 0;
  padding: var(--space-7) clamp(var(--space-5), 4vw, 64px) 72px;
  margin: 0 auto;
}
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
  min-height: 68px;
  margin-bottom: var(--space-6);
}
/* Ostostatus asiakkaan nimen vieressa: myyja nakee kortin avatessaan heti
   mita asiakas on tilannut tai ostanut. Kapealla naytolla merkit valuvat
   nimen alle omalle rivilleen. */
.page-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.page-title-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.page-title-badges:empty { display: none; }
.eyebrow { margin-bottom: 3px; color: var(--muted-text); font-size: .95rem; }
.header-actions, .customer-actions, .inline-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.search-field input, .select-field select {
  min-width: 200px;
  padding: 9px 12px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-small);
}
.search-field input { min-width: 270px; }
.search-suggest { position: relative; display: block; }
.search-suggestions {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  display: grid;
  gap: 2px;
  max-height: 340px;
  padding: 6px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-small);
  box-shadow: var(--menu-shadow);
}
.search-suggestion {
  display: grid;
  gap: 2px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-small);
  text-align: left;
  cursor: pointer;
}
.search-suggestion small { color: var(--muted-text); }
.search-suggestion:hover, .search-suggestion.is-active { background: var(--surface-soft); border-color: var(--primary); }
.search-suggestion-empty { padding: 8px 10px; color: var(--muted-text); }
.select-field { display: grid; gap: 4px; color: var(--muted-text); font-size: .95rem; font-weight: var(--weight-semibold); }
.button {
  min-height: 44px;
  padding: 8px 14px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-small);
  cursor: pointer;
  font-weight: var(--weight-semibold);
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}
.button:hover { color: var(--primary); border-color: var(--primary); background: var(--surface-soft); }
.button-primary { color: var(--primary-text); background: var(--primary); border-color: var(--primary); }
.button-primary:hover { color: var(--primary-text); background: var(--primary-hover); border-color: var(--primary-hover); }
.button:disabled { cursor: wait; opacity: .6; }
.button-block { width: 100%; }
/* Pieni painike on pieni vain leveydeltaan. Korkeus on 44 px kaikkialla, koska
   UX_PRINCIPLES.md 5 ja valmis-maaritelma vaativat sen jokaiselta tarkealta
   kohteelta. Aiempi 34 px oli ohitettu erikseen viidessa paikassa, mika jatti
   tyopoydan "Avaa kortti"- ja "Aloita soittokierros" -painikkeet alle rajan. */
.button-small { min-height: 44px; padding: 4px 12px; font-size: .9rem; }
.button-danger { color: var(--danger-text); background: var(--danger); border-color: var(--danger); }
.button-danger-outline { color: var(--danger); border-color: var(--danger-border-soft); }
.button-danger-outline:hover { color: var(--danger); border-color: var(--danger); }
.status-message { min-height: 0; margin: 0; }
/* Ilmoitus nousee omaan kulmaansa eika tyonna sisaltoa. Aiemmin se oli
   sivun virrassa ja vieritti nakyman itseensa, jolloin rivi jonka kanssa
   kayttaja tyoskenteli hyppasi pois silmista. Kohdistus ei siirry, joten
   kirjoittaminen jatkuu keskeytyksetta. */
.status-message:not(:empty) {
  position: fixed;
  z-index: 60;
  right: var(--space-5);
  bottom: var(--space-5);
  max-width: min(420px, calc(100vw - 2 * var(--space-5)));
  padding: var(--space-4) var(--space-5);
  background: var(--soft-green);
  border: 1px solid var(--success-border);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.status-message .undo-button {
  min-height: 44px;
  margin-left: 12px;
  color: var(--primary);
  background: var(--surface);
  border-color: var(--primary);
  font-weight: var(--weight-medium);
}
/* Katselutilan palkki erottuu selvasti omasta nakymasta. */
.view-as-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
  background: var(--warn-soft);
  border-left: 4px solid var(--warn-border);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--warn-text-strong);
  font-weight: var(--weight-medium);
}
.view-as-banner .button { min-height: 44px; background: var(--surface); }
.status-message[data-type="error"] { color: var(--danger); background: var(--danger-soft); border-color: var(--danger-border); border-left-color: var(--danger); }
/* Latauksen luuranko: sisallolle varataan tila etukateen, jotta nakyma ei
   hyppaa kun rivit ilmestyvat. Hohde pysahtyy prefers-reduced-motion
   -saannolla, ja luuranko on aria-hidden, joten se ei jaa ruudunlukijalle
   pysyvaksi kohinaksi. */
.skeleton-list { display: grid; gap: var(--space-2); }
.skeleton-board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  gap: var(--space-4);
  overflow: hidden;
}
.skeleton-board .skeleton-row { height: 150px; }
.skeleton-row {
  display: block;
  height: 62px;
  background: linear-gradient(90deg, var(--panel-tint-2) 25%, var(--panel-tint-3) 37%, var(--panel-tint-2) 63%);
  background-size: 400% 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}
.loading-indicator {
  position: fixed;
  z-index: 40;
  top: 14px;
  right: 14px;
  padding: 8px 13px;
  color: var(--primary-text);
  background: var(--primary);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow);
  font-size: .95rem;
}
.is-loading .main-content { cursor: progress; }
.screen { display: none; }
.screen.is-active { display: block; }

/* Työpöytä */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.section-header > div { min-width: 0; }
.section-header h2, .section-header h3, .section-header p { margin-bottom: 0; }
.status-label {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 2px 9px;
  color: var(--text);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: .9rem;
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}
/* Vari varataan merkitykselle: voitettu vihrea, hylatty punainen, muut
   neutraaleja. Nain silma loytaa poikkeamat ilman etta kaikki huutaa. */
.status-label.status-active, .status-label.status-won {
  color: var(--primary);
  background: var(--soft-green);
  border-color: var(--success-border);
}
.status-label.status-danger, .status-label.status-lost, .status-label.status-inactive {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: var(--danger-border);
}
/* Tyopoyta pinoaa yhden asian kerrallaan: ensin seuraava tehtava, sitten
   loput paivalle. Kahden palstan rinnakkaisuus jakoi katseen kahtia. */
.work-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--space-5), 2.5vw, 32px);
  align-items: start;
}
.task-list { border-top: 1px solid var(--border); }
.task-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  width: 100%;
  padding: 15px 4px;
  color: var(--text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.task-row > button:first-child { min-width: 0; padding: 0; color: var(--text); background: transparent; border: 0; text-align: left; cursor: pointer; }
.task-row > button:first-child:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.task-row > span:last-child { display: flex; align-items: center; gap: 10px; }
.task-row strong, .task-row small { display: block; }
.task-row strong { font-weight: var(--weight-semibold); }
.task-row small { margin-top: 3px; }
.task-row time { font-size: .95rem; white-space: nowrap; }
.task-row-main { min-width: 0; }
/* Asiakaskortin tehtavabriiffi: sama varikoodattu rivitys kuin
   soittokierroksella. Ilman sita briiffi on yksi tekstimassa, josta myyja ei
   erota tilannetta, mallipaloja ja toimintaohjetta toisistaan. */
.task-brief { margin-top: 8px; }
.task-brief .brief-row { font-size: .95rem; color: var(--muted-text); }
.task-brief .brief-row > span:not(.brief-tag) { min-width: 0; overflow-wrap: anywhere; }
/* Tyopoydan tehtavarivin painikkeet ovat myyjan paivittaisia kosketuskohteita,
   joten ne noudattavat samaa 44 px:n vahimmaiskokoa kuin muu kaytto. */
.task-row .text-button { min-height: 44px; }
.task-row .text-button { padding: 5px 8px; }
.task-row > span:last-child { flex-wrap: wrap; justify-content: flex-end; }
/* Kevyt kuittaus asiakaskortilta. Puhelutehtavan lopputulos on napin takana
   niin, etta jokainen nappi kuittaa tehtavan yhdella klikkauksella: kirjaus ei
   maksa yhtaan ylimaaraista napautusta. Rivi on kiinni oletuksena, jotta lista
   nayttaa samalta kuin ennen. */
.task-finish > summary {
  width: fit-content;
  min-height: 44px;
  padding: 5px 8px;
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
}
.task-finish > summary::-webkit-details-marker { display: none; }
.task-finish[open] > summary { font-weight: var(--weight-semibold); }
.task-finish-outcomes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2) 0 var(--space-3);
}
.task-finish-outcomes .text-button {
  padding: 5px 10px;
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
}
.task-finish-outcomes .text-button:hover { border-color: var(--primary); }
.task-finish-outcomes .task-finish-plain { color: var(--muted-text); }
/* Siirto-pikapainikkeet tehtavadialogissa: muuttavat vain kentan arvon, joten
   tallennus on aina oma erillinen paatoksensa. */
.quick-move {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-2);
}
.quick-move > span { color: var(--muted-text); }
.attention { background: var(--soft-yellow); }
.task-row.attention { padding-right: 9px; padding-left: 9px; }
/* Tyopoydan tehtavalistalla on oma sarake puhelinnumerolle: numero on
   luettavissa suoraan riviltä ja toimii puhelimella soittolinkkinä. */
#today-task-list .task-row { grid-template-columns: minmax(0, 1fr) auto auto; }
.task-phone-cell { display: flex; justify-content: flex-end; min-width: 0; }
.task-phone {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 5px 8px;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-medium);
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 768px) {
  #today-task-list .task-row { grid-template-columns: minmax(0, 1fr) auto; }
  .task-phone-cell { grid-column: 1 / -1; justify-content: flex-start; }
  .task-phone { padding-left: 0; }
}
.task-list-more {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 14px 4px 2px;
  color: var(--muted-text);
}
.empty-state { padding: 18px 4px; color: var(--muted-text); }
/* Tyhja tila kertoo tilanteen ja tarjoaa yhden seuraavan toiminnon. Ilman
   tata "Ei tehtavia talla rajauksella" oli umpikuja: kayttaja ei nahnyt etta
   tiimilla on toita eika mista rajauksen saa auki. */
.empty-state-note { margin: 0 4px 12px; color: var(--muted-text); }
/* Sirurivin mittakaava sanotaan aaneen, koska kaksi rinnakkaista riviä
   laskivat eri joukkoa samannakoisina. */
.filter-scope-label {
  margin: var(--space-4) 0 var(--space-2);
  color: var(--muted-text);
  font-size: .9rem;
  font-weight: var(--weight-bold);
  letter-spacing: .02em;
}
.next-action, .metric {
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
/* Seuraava tehtava luetaan vasemmalta oikealle: kellonaika, mita tehdaan,
   kenelle, ja vasta sitten painike. Kapealla naytolla osat menevat allekkain. */
.next-action {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  align-items: center;
  padding: var(--space-5);
  box-shadow: var(--shadow);
}
.next-action-time {
  flex: 0 0 auto;
  color: var(--primary);
  font-size: clamp(1.9rem, 4vw, 2.4rem);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Myohassa oleva tehtava on huomio, ei onnistuminen. Keltainen pinta erottaa
   sen ajoissa olevasta ilman etta vari kantaa merkitysta yksin: sana
   "Myohassa" ja varoitusmerkki kertovat saman. Kontrasti mitattu erikseen,
   10,6:1 vaaleassa ja 9,9:1 tummassa. */
.next-action-time.is-late {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2) var(--space-4);
  color: var(--warn-text-strong);
  background: var(--soft-yellow);
  border: 1px solid var(--warn-border);
  border-radius: var(--radius-small);
  font-size: clamp(1.5rem, 3vw, 1.9rem);
}
.next-action-time.is-late::before { content: "⚠"; font-size: .85em; }
.next-action-body { flex: 1 1 240px; min-width: 0; }
.next-action .eyebrow { width: 100%; margin-bottom: 0; }
.next-action h2 { margin: 2px 0 4px; font-size: 1.2rem; }
.next-action p:not(.eyebrow) { margin-bottom: 0; color: var(--muted-text); }
.next-action .button { flex: 0 0 auto; margin-top: 0; }
.next-action .button-block { width: auto; min-width: 220px; }
/* Taytetylla pinnalla teksti ja painikkeet ottavat varinsa hero-tokeneista.
   Nama saannot ovat tarkoituksella kortin muiden saantojen jalkeen: muuten
   aiemmat varimaaritykset jaisivat voimaan ja teksti katoaisi vihrealle. */
.next-action .eyebrow,
.next-action p:not(.eyebrow) { color: var(--hero-muted); }
.next-action h2,
.next-action-time { color: var(--hero-text); }
.next-action .button {
  color: var(--hero-text);
  background: var(--hero-ghost-surface);
  border-color: var(--hero-ghost-border);
  text-decoration: none;
}
.next-action .button:hover {
  color: var(--hero-text);
  background: var(--hero-ghost-surface-hover);
  border-color: var(--hero-ghost-border-hover);
}
.next-action .button-primary,
.next-action .button-primary:hover {
  color: var(--hero-button-text);
  background: var(--hero-button-surface);
  border-color: var(--hero-button-surface);
}
/* Kohdistusreuna piirretaan vaaleana, koska sivun sininen kohdistusvari ei
   erotu tummanvihrealta pinnalta. */
.next-action .button:focus-visible { outline-color: var(--hero-button-surface); }
.metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.metric { display: grid; gap: var(--space-1); }
/* Mittarin luku on sarakedataa: tasalevyiset numerot pitavat kolme mittaria
   samassa linjassa, kun arvo paivittyy. */
.metric strong {
  font-size: 1.45rem;
  line-height: 1.2;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
/* Kaikki numerot, kellonajat ja summat kayttavat samaa tasalevyista rytmia,
   jotta sarakkeet eivat hyppaa arvon vaihtuessa. */
.task-row time,
.release-info time,
.status-label,
.data-row > strong,
.customer-value,
.metric small { font-variant-numeric: tabular-nums; }

/* Kalenteri */
.calendar-header { align-items: end; }
.calendar-view-switch { display: flex; gap: 6px; }
.calendar-view-switch .is-selected { color: var(--primary-text); background: var(--primary); border-color: var(--primary); }
.calendar-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 16px 0; }
.calendar-toolbar h3 { margin: 0; text-transform: capitalize; }
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(125px, 1fr));
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  overflow-x: auto;
}
.calendar-day {
  min-height: 210px;
  padding: 10px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.calendar-month .calendar-day { min-height: 145px; }
.calendar-day.is-today { background: var(--soft-green); box-shadow: inset 0 3px 0 var(--primary); }
.calendar-day.is-outside-month { color: var(--muted-text); background: var(--surface-soft); }
.calendar-day-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; text-transform: capitalize; }
.calendar-day-heading span { color: var(--muted-text); font-size: .95rem; font-weight: var(--weight-bold); }
.calendar-day-heading strong { display: grid; place-items: center; min-width: 30px; min-height: 30px; }
.calendar-day.is-today .calendar-day-heading strong { color: var(--primary-text); background: var(--primary); border-radius: 50%; }
.calendar-day-tasks { display: grid; gap: 7px; }
.calendar-range-form { display: flex; align-items: end; gap: 10px; margin: 0 0 16px; padding: 14px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--radius-small); }
.calendar-range-form[hidden] { display: none; }
.calendar-range-form label { flex: 1; margin: 0; }
.calendar-hours-help { margin: 0 0 10px; color: var(--muted-text); }
.calendar-time-grid { display: grid; grid-template-columns: 62px repeat(var(--calendar-day-count), minmax(150px, 1fr)); width: 100%; max-width: 100%; max-height: 70vh; overflow: auto; overscroll-behavior-x: contain; border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--surface); }
.calendar-time-corner, .calendar-time-heading { position: sticky; z-index: 3; top: 0; min-height: 58px; padding: 9px; background: var(--surface-soft); border-bottom: 1px solid var(--border); }
.calendar-time-corner { left: 0; z-index: 4; display: grid; place-items: center; color: var(--muted-text); }
.calendar-time-heading { display: flex; justify-content: space-between; align-items: center; text-transform: capitalize; }
.calendar-time-heading.is-today { background: var(--soft-green); color: var(--primary); }
.calendar-hour-label { position: sticky; z-index: 2; left: 0; min-height: 78px; padding: 8px; color: var(--muted-text); background: var(--surface); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); font-size: .95rem; font-weight: var(--weight-bold); }
.calendar-hour-cell { min-height: 78px; padding: 5px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.calendar-hour-cell.is-today { background: color-mix(in srgb, var(--soft-green) 45%, var(--surface)); }
.calendar-hour-cell .calendar-task { width: 100%; margin-bottom: 4px; }
.calendar-free { color: var(--muted-text); font-size: .95rem; }
.calendar-task {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 8px;
  color: var(--text);
  background: var(--calendar-surface);
  border: 1px solid var(--calendar-border);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-small);
  text-align: left;
  cursor: pointer;
}
/* Kellonaika ja vastuuhenkilon nimikirjainpallo jakavat ylarivin, jotta
   pallo ei peita aikaa kapeassa kuukausiruudussa. Koko nimi on
   title-vihjeessa. */
.calendar-task-top { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.calendar-task .owner-badge {
  flex: none;
  width: 20px;
  height: 20px;
  font-size: .75rem;
  border: 1px solid var(--border);
}
/* Kuukausiruutu nayttaa enintaan kolme tehtavaa, jotta koko tiimin
   ruuhkapaiva ei venyta rivia. Loput avaa paivan oma painike. */
.calendar-month .calendar-day:not(.is-expanded) .calendar-day-tasks .calendar-task:nth-of-type(n+4) { display: none; }
.calendar-more {
  margin-top: 6px;
  padding: 2px 8px;
  color: var(--muted-text);
  font-size: .9rem;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  cursor: pointer;
}
.calendar-more:hover { color: var(--text); }
.calendar-owner-field select { min-width: 170px; }
.calendar-task:hover { background: var(--soft-green-strong); }
.calendar-task time { font-size: .95rem; font-weight: var(--weight-bold); }
.calendar-task strong { font-size: .95rem; }
.calendar-task small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95rem; }
.calendar-task.task-meeting { border-left-color: var(--calendar-meeting); background: var(--calendar-meeting-soft); }
.calendar-task.task-email { border-left-color: var(--info-border); background: var(--calendar-email-soft); }
.date-time-picker { cursor: pointer; }

/* Myyntiputki */
.pipeline-controls { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; }
.pipeline-help { margin: 6px 0 15px; color: var(--muted-text); font-size: .95rem; }
.pipeline-board {
  display: grid;
  /* 280 px on se leveys jolla verkkokauppamerkki ja paivays mahtuvat
     samalle riville. Mitattu: merkit vievat 243 px, ja kapeammalla kortti
     kasvaa kahteen riviin ilman etta tietoa tulee lisaa. */
  grid-template-columns: repeat(var(--pipeline-stage-count, 6), minmax(280px, 1fr));
  gap: var(--space-4);
  align-items: start;
  overflow-x: auto;
  padding: 5px 2px 18px;
  scrollbar-color: var(--border-strong) transparent;
}
.pipeline-stage {
  min-width: 0;
  min-height: 150px;
  border-radius: var(--radius);
  transition: background-color var(--transition), box-shadow var(--transition);
}
.pipeline-stage.is-drop-target {
  background: var(--soft-green);
  box-shadow: inset 0 0 0 2px var(--primary);
}
.stage-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 0 3px 9px;
  border-bottom: 2px solid var(--border-strong);
}
.stage-heading h3 { margin-bottom: 0; font-weight: var(--weight-bold); }
.stage-heading span { min-width: 29px; padding: 2px 8px; background: var(--soft-green); border-radius: var(--radius-pill); text-align: center; font-size: .95rem; font-weight: var(--weight-bold); }
.stage-won .stage-heading { border-bottom-color: var(--primary); }
.stage-lost .stage-heading { border-bottom-color: var(--stage-lost-line); }
.stage-deals { display: grid; }
.stage-empty { padding: 15px 3px; color: var(--muted-text); font-size: .95rem; }
/* Kortti on ruudukon osana yhta leveä kuin sarake. Ilman min-widthia sen
   vahimmaisleveydeksi tulee sisallon min-content, jonka maaraa vaiheenvaihdon
   valikko: se levenee pisimman vaiheen nimen mukaan. Pitkanimisessa putkessa
   (esim. "Projektin ajankohta tulevaisuudessa") kortti levisi naapurisarakkeen
   paalle. */
.deal-card { position: relative; min-width: 0; padding: 0 3px 9px; background: transparent; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; cursor: grab; }
.deal-card:active { cursor: grabbing; }
.deal-card.is-dragging { opacity: .45; }
.deal-card.attention { padding: 0 9px 9px; }
/* Valintaruutu tuli kortin ensimmaiseksi lapseksi joukkotoimintojen mukana,
   joten :first-child ei enaa osunut avausnappiin -> nappi jai selaimen
   oletustyyliin ja levisi sarakkeen yli. Valitaan nappi datamaareella. */
.deal-card > button[data-open-contact] { display: block; width: 100%; padding: 13px 0 7px; color: var(--text); background: transparent; border: 0; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.deal-card > button[data-open-contact]:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.deal-card strong, .deal-card small { display: block; }
.deal-card strong { font-weight: var(--weight-semibold); }
.deal-card small { margin: 3px 0 8px; color: var(--muted-text); }
/* Brevon mallin mukainen kevyt kortti: nimen alla verkkokauppa varillisena
   merkkina ja luontipaiva omana merkkinaan sen alla. */
.deal-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; margin-top: 7px; }
.deal-site-chip, .deal-date-chip {
  display: inline-block;
  max-width: 100%;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: .9rem;
  font-weight: var(--weight-semibold);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.deal-site-chip { color: var(--primary); background: var(--soft-green); }
.deal-date-chip { color: var(--muted-text); background: var(--surface-soft); }
/* Vaiheen pikavalitsin kortilla: raahaus ei toimi kosketusnaytolla eika
   sovi kaukana olevaan sarakkeeseen, joten siirto onnistuu myos tasta. */
.deal-stage-quick { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: .78rem; color: var(--muted-text); }
.deal-stage-quick select { flex: 1; min-width: 0; padding: 3px 6px; font-size: .8rem; color: var(--muted-text); background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--radius-xs); cursor: pointer; }
.deal-stage-quick select:hover, .deal-stage-quick select:focus { color: var(--text); }
.customer-list-filter { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.customer-lists-card { margin-top: 20px; }
.customer-lists-card h3 { margin: 0 0 8px; }
.customer-list-chips { display: grid; gap: 6px; padding: 0; margin: 0 0 12px; list-style: none; }
.customer-list-chips li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.stage-exit-criteria {
  margin: 0 0 8px;
  color: var(--muted-text);
  font-size: .95rem;
  line-height: 1.45;
}
.stage-exit-criteria span { font-weight: var(--weight-semibold); }
.stage-manager { display: grid; gap: 16px; }
.stage-manager-row {
  display: grid;
  gap: 8px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.stage-manager-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.stage-manager-heading small { display: block; color: var(--muted-text); font-size: .95rem; }
.stage-manager-order { display: flex; gap: 8px; }
.stage-manager-row textarea { width: 100%; }
.stage-manager-row > .button { justify-self: start; }
.bulk-bar {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  margin-bottom: 16px;
  background: var(--soft-green);
  border-left: 4px solid var(--primary);
}
.bulk-bar p { margin: 0; font-weight: var(--weight-semibold); }
.bulk-actions { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; }
/* Valintaruutu on aina nakyvissa. Aiemmin se paljastui vasta hoverista, joten
   kosketusnaytolla sita ei ollut olemassa lainkaan: UX_PRINCIPLES.md 10
   kieltaa hoveriin perustuvat toiminnot. Ruutua ei myoskaan himmenneta, koska
   valintaruutu on kayttoliittymakomponentti ja sen rajan pitaa erottua. */
.deal-select { position: absolute; top: 11px; right: 2px; display: flex; align-items: center; }
.deal-select span { display: none; }
.deal-select input { width: 22px; height: 22px; }
/* Nakyva valintaruutu ei saa peittaa pitkaa nimea, joten tila varataan aina. */
.deal-card > button[data-open-contact] { padding-right: 30px; }
.deal-card.is-selected { border-color: var(--primary); box-shadow: inset 0 0 0 2px var(--primary); }
.stage-select-all { margin-bottom: 6px; }
.closed-deals { margin-top: 28px; }
.closed-deals .section-header { margin-bottom: 12px; }

/* Asiakkaat ja asiakaskortti */
.customer-type-filter {
  display: flex;
  width: fit-content;
  max-width: 100%;
  gap: 5px;
  padding: 4px;
  margin: 19px 0 20px;
  overflow-x: auto;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
}
/* Soittokirjauksen nappilomake: vastaukset napautetaan, ei kirjoiteta. */
.choice-group { display: flex; flex-wrap: wrap; gap: 8px; }
.choice-pill { position: relative; display: inline-flex; }
.choice-pill input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.choice-pill span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-weight: var(--weight-medium);
  cursor: pointer;
  white-space: nowrap;
}
.choice-pill input:checked + span { color: var(--primary-text); background: var(--primary); border-color: var(--primary); }
.choice-pill input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.call-log-question { margin-bottom: 12px; }
.call-log-question > strong { display: block; margin-bottom: 6px; }
.call-log-outcome { border: 0; padding: 0; margin: 0 0 12px; }
.call-log-outcome legend { font-weight: var(--weight-semibold); margin-bottom: 6px; padding: 0; }
.call-log-opening {
  margin: 0 0 12px;
  padding: 10px 12px;
  background: var(--surface-soft);
  border-radius: var(--radius-small);
  font-size: 14px;
  line-height: 1.5;
}
.call-log-previous { margin: 0 0 12px; font-size: 14px; font-weight: var(--weight-medium); }
.call-log-playbook { margin: 0 0 12px; }
.call-log-playbook summary { cursor: pointer; font-size: 14px; color: var(--muted-text); }
.call-log-playbook ul { margin: 8px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.6; }
.call-log-playbook li { margin-bottom: 4px; }
.customer-type-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 13px;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: var(--radius-small);
  white-space: nowrap;
  cursor: pointer;
  font-weight: var(--weight-semibold);
}
.customer-type-button:hover { background: var(--surface); }
.customer-type-button.is-selected { color: var(--primary-text); background: var(--primary); }
.customer-type-button span {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  min-height: 26px;
  padding: 1px 7px;
  color: var(--text);
  background: var(--surface);
  border-radius: var(--radius-pill);
  font-size: .95rem;
}
.customer-list { border-top: 1px solid var(--border); margin-top: var(--space-2); }
.customer-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) minmax(150px, .9fr) minmax(110px, .65fr) minmax(100px, .65fr) auto;
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--border);
}
.customer-row:not(.customer-header):hover { background: var(--surface-soft); }
.customer-header { color: var(--muted-text); font-size: .95rem; font-weight: var(--weight-bold); }
/* Jarjestyspainike nayttaa otsikolta eika lomakenapilta, mutta se on
   taysimittainen kosketuskohde ja saa saman fokusrenkaan kuin muut. */
.customer-header .sort-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 0;
  color: inherit;
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.customer-header .sort-button:hover, .customer-header .sort-button.is-sorted { color: var(--text); }
.customer-header .sort-button.is-sorted { font-weight: var(--weight-bold); }
/* Kapealla naytolla otsikkorivi on piilotettu, joten jarjestys valitaan
   listasta. Sama malli kuin varastonakymassa. */
.customer-sort-mobile { display: none; }
.customer-row button { padding: 0; color: var(--text); background: transparent; border: 0; text-align: left; font-weight: var(--weight-semibold); cursor: pointer; }
.customer-row button:hover { text-decoration: underline; text-underline-offset: 3px; }
.customer-row button small { display: block; margin-top: 3px; color: var(--muted-text); font-weight: var(--weight-normal); }
.back-button { margin-bottom: 18px; padding: 8px 0; color: var(--primary); background: transparent; border: 0; cursor: pointer; font-weight: var(--weight-bold); }
.back-button::before { content: "← "; }
/* Kortin ylareuna: paluu lahtonakymaan vasemmalla, saman listan selaus
   oikealla. Selaus nakyy vain kun kortille tultiin listalta. */
.customer-navigation {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.customer-navigation .back-button { margin-bottom: 0; }
.customer-stepper { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
#customer-stepper-position { display: inline-flex; gap: .35em; }
.customer-stepper .button-small:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 768px) {
  .customer-stepper { flex: 1 1 100%; flex-wrap: nowrap; justify-content: space-between; }
  .customer-stepper .button-small { padding-right: 10px; padding-left: 10px; }
  #customer-stepper-name { display: none; }
}
.customer-layout { display: grid; grid-template-columns: minmax(235px, .72fr) minmax(0, 1.28fr); gap: clamp(30px, 4vw, 50px); }
.customer-profile { position: sticky; top: 20px; align-self: start; }
.customer-identity { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 22px; }
.customer-identity > span { flex: 0 0 auto; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--soft-green); color: var(--primary); font-weight: var(--weight-bold); }
.customer-identity h2, .customer-identity p { margin-bottom: 0; }
.customer-quick-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.customer-quick-actions .button { text-decoration: none; text-align: center; }
.customer-facts { display: grid; gap: 14px; margin: 0; }
.customer-facts dd a { color: inherit; }
.customer-facts div { display: grid; gap: 1px; }
.customer-facts dt { color: var(--muted-text); font-size: .95rem; }
.customer-facts dd { margin: 0; overflow-wrap: anywhere; }
.customer-facts .next-task-fact { padding: 11px 12px; background: var(--soft-green); border-left: 4px solid var(--primary); border-radius: var(--radius-small); }
.next-task-fact dd { display: grid; gap: 1px; }
.next-task-fact small { display: block; }
.customer-card-metadata { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); }
.customer-card-metadata h3 { margin: 0 0 10px; font-size: .95rem; }
.customer-card-metadata dl { display: grid; gap: 8px; margin: 0; }
.customer-card-metadata dl div { display: flex; justify-content: space-between; gap: 12px; }
.customer-card-metadata dt { color: var(--muted-text); font-size: .95rem; }
.customer-card-metadata dd { margin: 0; font-size: .95rem; font-variant-numeric: tabular-nums; text-align: right; }
.customer-actions { margin-bottom: 26px; }
.more-actions { position: relative; }
.more-actions > summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 9px 15px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-small);
  cursor: pointer;
  font-weight: var(--weight-semibold);
  list-style: none;
}
.more-actions > summary::-webkit-details-marker { display: none; }
.more-actions > summary::after { content: "⌄"; margin-left: 8px; color: var(--muted-text); }
.more-actions[open] > summary { color: var(--primary); border-color: var(--primary); }
.more-actions-menu {
  position: absolute;
  z-index: 10;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  width: max-content;
  min-width: 210px;
  gap: 6px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  box-shadow: var(--shadow);
}
.more-actions-menu .button { width: 100%; text-align: left; }
.completed-tasks { margin-top: 12px; }
.completed-tasks > summary { min-height: 44px; padding: 10px 4px; color: var(--muted-text); cursor: pointer; font-weight: var(--weight-semibold); }
.related-contacts { display: grid; gap: 3px; margin-top: 25px; padding-top: 18px; border-top: 1px solid var(--border); }
.related-contacts h3 { margin-bottom: 4px; }
.related-contact-list { list-style: none; display: grid; gap: 2px; margin: 0 0 var(--space-3); padding: 0; }
.related-contact-list li { display: flex; }
.related-contact-list .text-button, .related-contact-list span { display: grid; gap: 1px; text-align: left; width: 100%; padding: 6px 0; min-height: 44px; align-content: center; }
.related-contact-list small { color: var(--muted-text); }
.related-contact-list .is-current strong { color: var(--primary); }
.detail-section { margin-bottom: 31px; }
.compact { margin-bottom: 11px; }
.compact h2, .compact h3, .compact p { margin-bottom: 0; }
.deal-list, .data-list { display: grid; gap: var(--space-2); }
.detail-deal, .data-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: left;
}
.detail-deal { cursor: pointer; }
.detail-deal:hover { border-color: var(--primary); }
/* Liidin vaiheen vaihto, kauppa ja hylkays tehdaan suoraan asiakaskortilta,
   joten liidirivin alle tulee oma toimintorivi. */
.detail-deal-item { display: grid; gap: var(--space-2); }
.deal-stage-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-2);
  padding-left: var(--space-4);
}
.deal-stage-actions .status-label { align-self: center; }
.deal-stage-move select { min-width: 180px; }
/* Paatetyt liidit ovat historiaa: ne ovat avattavan lohkon takana, jotta
   kortin tyojono pysyy avoimissa liideissa. */
.customer-closed-deals { margin-top: var(--space-3); }
.customer-closed-deals .deal-list { margin-top: var(--space-2); }
/* Tyomaakortti: kohde, tekijat ja kohteessa kirjattu tyo yhdessa laatikossa.
   Sama kortti palvelee tyonjohtoa tyopoydalla ja asentajaa puhelimessa. */
.worksite-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.worksite-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.worksite-header span { display: flex; flex-direction: column; }
.worksite-header small { color: var(--muted-text); }
.worksite-facts { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: 0; }
.worksite-facts div { display: flex; flex-direction: column; }
.worksite-facts dt { font-size: 0.85rem; color: var(--muted-text); }
.worksite-facts dd { margin: 0; }
.worksite-notes { margin: 0; color: var(--muted-text); }
.worksite-entries ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.worksite-entries li { display: flex; align-items: center; gap: var(--space-3); }
.worksite-entries li span { display: flex; flex-direction: column; flex: 1; }
.worksite-entries li small { color: var(--muted-text); }
.worksite-total { margin: var(--space-2) 0 0; text-align: right; }
.worksite-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.worksite-assignees { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3); }
.worksite-assignees legend { padding: 0 var(--space-2); font-size: 0.85rem; color: var(--muted-text); }
/* Provisiomyynnin Myynnit-nakyma: kortti noudattaa tyomaakortin mallia. */
.myynnit-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
/* Laskutettu myynti erottuu listalta ilman lukemista. */
.myynnit-card.is-invoiced { border-left: 3px solid var(--success-border); }
.myynnit-products { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.myynnit-products li { display: flex; justify-content: space-between; gap: var(--space-3); }
.myynnit-products li small { color: var(--muted-text); white-space: nowrap; }
.myynnit-actions { justify-content: flex-end; }
.myynnit-commission { margin-right: auto; }
.myynnit-commission small { color: var(--muted-text); }
.myynnit-invoiced-date { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 0.85rem; color: var(--muted-text); }
.myynnit-hinnasto { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3); }
.myynnit-hinnasto summary { cursor: pointer; font-weight: var(--weight-semibold); }
.myynnit-hinnasto form { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); }
.myynnit-rate-row { display: flex; gap: var(--space-2); align-items: center; }
.myynnit-rate-row input[data-rate-pattern] { flex: 2; }
.myynnit-rate-row input[data-rate-price] { flex: 1; max-width: 8rem; }
/* Easoftin lasku on luettavaa historiaa, ei painike: siita ei paase
   mihinkaan, joten se ei myoskaan nayta silta. */
.detail-deal.is-static { cursor: default; }
.detail-deal.is-static:hover { border-color: var(--border); }
/* Tehtavataulukon solut tuovat oman valinsa (.task-cell), joten yleinen
   rivisaanto ei saa osua niihin. */
.detail-deal span, .data-row > span:first-child:not(.task-cell) { display: grid; gap: var(--space-1); }
.detail-deal small, .data-row small { color: var(--muted-text); font-size: .95rem; }
.data-row small { overflow-wrap: anywhere; }
.timeline { display: grid; gap: 20px; margin: 0; padding: 0 0 0 23px; border-left: 2px solid var(--border); list-style: none; }
.timeline li { position: relative; }
.timeline li::before { content: ""; position: absolute; top: 6px; left: -29px; width: 10px; height: 10px; background: var(--primary); border: 3px solid var(--background); border-radius: 50%; }
.timeline strong, .timeline small { display: block; }
.timeline small { margin-top: 2px; }
.timeline p { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.timeline p a, .task-notes a, .task-brief a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.entry-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 4px; }
.entry-actions .text-button { min-height: 44px; }
.text-button-danger { color: var(--danger); }
.task-notes { margin-top: 4px; color: var(--muted-text); overflow-wrap: anywhere; }
.alert { padding: 13px 14px; border-radius: var(--radius-small); }
.alert-danger { color: var(--danger-strong); background: var(--danger-soft); border-left: 4px solid var(--danger); }
.alert-info { color: var(--info-text); background: var(--info-soft); border-left: 4px solid var(--info-border); }
.alert p { margin: 0; }
.alert .inline-actions { margin-top: 10px; }
.status-danger { color: var(--danger-strong); background: var(--danger-soft); }

/* Asiakaskartta */
.map-customer-type-filter { margin-bottom: 10px; }
.map-status-grid {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 15px 0;
}
.map-status-grid span {
  min-width: 150px;
  padding: 11px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
}
.map-status-grid strong { margin-right: 4px; color: var(--primary); font-size: 1.12rem; }
.company-map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(300px, .7fr);
  gap: 17px;
  align-items: stretch;
  min-width: 0;
}
.company-map-layout > * { min-width: 0; }
.company-map-frame {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 560px;
  overflow: hidden;
  background: var(--panel-tint);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}
.company-map { position: absolute; inset: 0; }
.company-map-message {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 5px;
  padding: 28px;
  color: var(--text);
  background: linear-gradient(145deg, var(--panel-tint-2), var(--panel-tint-3));
  text-align: center;
}
.company-map-message strong { font-size: 1.12rem; }
.company-map-message span { color: var(--muted-text); }
.map-company-panel {
  width: 100%;
  min-width: 0;
  min-height: 560px;
  max-height: 680px;
  padding: 15px;
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.map-search { display: grid; gap: 6px; margin-bottom: 13px; font-size: .95rem; font-weight: var(--weight-bold); }
.map-search input { width: 100%; min-width: 0; }
.map-company-list { display: grid; gap: 9px; }
.map-company-row {
  display: grid;
  gap: 8px;
  padding: 13px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
}
.map-company-row.is-located { border-left: 5px solid var(--marker); }
.map-company-row.is-selected { outline: 3px solid var(--focus); outline-offset: 1px; }
.map-company-row .map-customer-kind {
  margin-bottom: 3px;
  color: var(--primary);
  font-size: .95rem;
  font-weight: var(--weight-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.map-company-row h3, .map-company-row p {
  margin: 0;
  overflow-wrap: anywhere;
}
.map-company-row p { color: var(--muted-text); font-size: .95rem; }
.map-company-row .status-label {
  width: fit-content;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
.map-company-row .inline-actions { gap: 6px; }
.map-company-row .button { flex: 1; min-width: 128px; min-height: 44px; }
.map-info-window .button { min-height: 44px; }
.map-contact-buttons { display: grid; gap: 4px; padding-top: 4px; border-top: 1px solid var(--border); }
.map-contact-buttons .text-button {
  width: 100%;
  min-height: 48px;
  overflow-wrap: anywhere;
  text-align: left;
}
.map-provider-notice { margin: 12px 2px 0; color: var(--muted-text); font-size: .95rem; }
.map-legal-links { justify-content: flex-start; margin-top: 6px; }

/* Raportit, asetukset ja yrityshallinta */
.report-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.report-row > strong { color: var(--primary); font-size: .95rem; white-space: nowrap; }
/* Raportin rivi on ruudukko, jotta palkki saa oman taysleveän rivinsa. Jos
   palkki olisi tekstin kanssa samassa sarakkeessa, rivin lukeman pituus
   kutistaisi uraa ja pituudet eivat olisi vertailukelpoisia. */
.report-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  row-gap: var(--space-2);
}
/* Raporttipalkki kuvaa sita lukua jonka mukaan lista on jarjestetty, joten
   palkit lyhenevat aina ylhaalta alas. Palkki on pelkka visuaalinen nopeutus:
   sama luku lukee aina myos tekstina rivilla, joten se on ruudunlukijalta
   piilotettu eika vari yksin kanna merkitysta. */
.report-bar {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  height: 6px;
  background: var(--panel-tint-3);
  border-radius: var(--radius-pill);
}
.report-bar-fill {
  display: block;
  width: 0;
  height: 100%;
  background: var(--primary);
  border-radius: var(--radius-pill);
}
.settings-grid { display: grid; grid-template-columns: minmax(280px, .7fr) minmax(0, 1.3fr); gap: var(--space-5); align-items: start; }
.settings-grid.personal-only { grid-template-columns: minmax(280px, 560px); }
.settings-card, .management-panel, .organization-details {
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.settings-card-wide { grid-column: 1 / -1; }
.admin-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr); gap: 27px; align-items: start; }
.organization-grid { display: grid; gap: 9px; }
.organization-card {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  width: 100%;
  padding: 15px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  text-align: left;
  cursor: pointer;
}
.organization-card:hover { border-color: var(--primary); }
.organization-card > span:nth-child(2), .member-row > span:first-child { display: grid; gap: 1px; }
.organization-mark { display: grid; place-items: center; width: 50px; height: 50px; color: var(--primary); background: var(--soft-green); border-radius: var(--radius-small); font-weight: var(--weight-bold); }
.organization-details { margin-top: 20px; scroll-margin-top: 20px; }
.management-panel h2 { margin-bottom: 7px; }
.management-panel > p { color: var(--muted-text); }
.member-list { display: grid; margin-bottom: 23px; border-top: 1px solid var(--border); }
/* Kayttajarivi kaartuu useammalle riville, kun toimintoja on monta: nimi ja
   sahkoposti pysyvat aina luettavina eivatka jaa nappien alle. */
.member-row { display: flex; flex-wrap: wrap; gap: 10px 13px; align-items: center; padding: 13px 4px; border-bottom: 1px solid var(--border); }
.member-row > span:first-child { flex: 1 1 220px; min-width: 180px; }
.member-row > .compact-select, .member-row > span:nth-child(2) { flex: 0 1 auto; }
.member-row > .member-status-actions { flex: 1 1 auto; }
.compact-select { min-height: 42px; max-width: 220px; padding: .5rem 2rem .5rem .65rem; }
/* Kayttajakohtaiset moduulivalinnat kayttajarivin alla: valintaruudut
   rivittyvat kapealla naytolla eivatka veny nappien sekaan. */
.member-modules { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 0 4px 13px; border-bottom: 1px solid var(--border); font-size: .85rem; color: var(--muted-text); }
.member-module { display: inline-flex; align-items: center; gap: 6px; }
.member-module input { width: 16px; height: 16px; accent-color: var(--primary); }
.member-status-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .5rem; }
.form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.admin-form { display: grid; gap: 17px; }
.admin-form label { display: grid; gap: 6px; font-weight: var(--weight-semibold); }
.admin-form input, .admin-form select {
  width: 100%;
  padding: 10px 11px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-small);
}
.form-help { color: var(--muted-text); }
.secret-result { margin-bottom: 17px; padding: 14px; background: var(--soft-yellow); border: 1px solid var(--warn-border); border-radius: var(--radius-small); }
.secret-line { display: flex; gap: 8px; align-items: center; margin-top: 9px; }
.secret-line code { flex: 1; min-width: 0; padding: 9px; overflow-wrap: anywhere; background: var(--surface); border-radius: var(--radius-xs); user-select: all; }

/* Kirjautuminen */
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--background); }
.login-card { width: min(500px, 100%); padding: clamp(28px, 6vw, 50px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-large); box-shadow: var(--shadow); }
.login-brand { margin-bottom: 34px; font-size: 1.06rem; }
.login-card > p { color: var(--muted-text); }
.login-form { display: grid; gap: 17px; }
.login-form label { display: grid; gap: 6px; font-weight: var(--weight-semibold); }
.login-form .login-remember { display: flex; align-items: center; gap: 9px; font-weight: var(--weight-medium); }
.login-form .login-remember input { width: 22px; min-height: 22px; }
.login-form input {
  width: 100%;
  padding: 10px 11px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-small);
}
.form-error { padding: 12px 14px; color: var(--danger) !important; background: var(--danger-soft); border-left: 4px solid var(--danger); }
.legal-links { display: flex; justify-content: center; gap: 18px; margin-top: 24px; font-size: .95rem; }
.legal-links a { color: var(--primary); }
.legal-page { min-height: 100vh; padding: 28px 16px; background: var(--background); }
.legal-card {
  width: min(820px, 100%);
  padding: clamp(26px, 5vw, 48px);
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow);
}
.legal-card h2 { margin-top: 29px; margin-bottom: 7px; }
.legal-card p { max-width: 72ch; }

/* Modaalit */
.modal { width: min(720px, calc(100% - 30px)); max-height: calc(100vh - 30px); padding: 0; color: var(--text); background: var(--surface); border: 0; border-radius: var(--radius-large); box-shadow: var(--modal-shadow); }
.modal::backdrop { background: var(--scrim); backdrop-filter: blur(2px); }
.modal-form { display: grid; gap: var(--space-5); padding: clamp(var(--space-5), 5vw, 40px); }
.modal-form label { display: grid; gap: 6px; font-weight: var(--weight-semibold); }
.modal-form input, .modal-form select, .modal-form textarea { width: 100%; min-height: 46px; padding: 11px 14px; color: var(--text); background: var(--surface); border: 1px solid var(--border-input); border-radius: var(--radius-small); font: inherit; }
.modal-form textarea { resize: vertical; }
.modal-form fieldset { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-small); }
.modal-form .checkbox-label { display: flex; align-items: center; gap: 9px; font-weight: var(--weight-medium); }
.modal-form .checkbox-label input { width: 22px; min-height: 22px; }
.modal-header { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.modal-header h2 { margin-bottom: 0; }
.modal-intro { margin: -5px 0 1px; color: var(--muted-text); }
.icon-button { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; color: var(--text); background: transparent; border: 1px solid var(--border); border-radius: 50%; font-size: 1.5rem; cursor: pointer; }
.modal-actions { display: flex; justify-content: flex-end; gap: var(--space-3); padding-top: var(--space-2); }
.two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.company-lookup { display: grid; gap: 8px; padding: 14px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--radius-small); }
.company-lookup > label { margin: 0; }
.company-lookup > small { color: var(--muted-text); font-size: .95rem; }
.input-action { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.prh-results { display: grid; gap: 7px; }
.prh-result { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; padding: 10px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-small); text-align: left; cursor: pointer; }
.prh-result:hover { border-color: var(--primary); }
.prh-result span:first-child { display: grid; gap: 2px; }
.selected-company { margin: 0; padding: 10px; background: var(--soft-green); border-left: 4px solid var(--primary); }
.selected-company-alert { background: var(--danger-soft); border-left-color: var(--danger); }
.company-status-alert { display: block; margin-top: 4px; color: var(--danger); }
/* Uuden asiakkaan wizard: askelet nakyvat yksi kerrallaan, muokkaus kaikki. */
.wizard-steps { display: flex; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.wizard-steps li { display: flex; align-items: center; gap: 8px; color: var(--muted-text); font-size: .95rem; }
.wizard-steps li::before {
  content: attr(data-step-label);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: var(--surface-soft);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  font-weight: var(--weight-bold);
}
.wizard-steps li.is-active { color: var(--text); font-weight: var(--weight-bold); }
.wizard-steps li.is-active::before { color: var(--primary-text); background: var(--primary); border-color: var(--primary); }
.wizard-steps li.is-done::before { color: var(--primary); background: var(--soft-green); border-color: var(--primary); }
.wizard-step { display: grid; gap: 15px; }
.wizard-type-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.wizard-type-button {
  display: grid;
  gap: 4px;
  min-height: 84px;
  padding: 16px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-small);
  font-size: 1.05rem;
  font-weight: var(--weight-bold);
  text-align: left;
  cursor: pointer;
}
.wizard-type-button:hover { border-color: var(--primary); background: var(--soft-green); }
.wizard-type-button span { color: var(--muted-text); font-size: .95rem; font-weight: var(--weight-medium); }
.wizard-company-block { display: grid; gap: 15px; }
.wizard-address-block { display: grid; gap: 15px; }
.form-section-title { margin: 0; padding-bottom: 4px; border-bottom: 1px solid var(--border-strong); font-size: 1.02rem; }
.duplicate-warning { display: grid; gap: 8px; padding: 12px; background: var(--soft-yellow); border-left: 4px solid var(--border-strong); border-radius: var(--radius-small); }
.duplicate-warning p { margin: 0; }
.duplicate-warning .button { justify-self: start; }
.progressive-section { border-top: 1px solid var(--border); }
.progressive-section > summary {
  display: flex;
  align-items: center;
  min-height: 48px;
  cursor: pointer;
  font-weight: var(--weight-bold);
}
.progressive-section > summary span { margin-left: auto; color: var(--muted-text); font-size: .95rem; font-weight: var(--weight-medium); }
.progressive-section[open] > summary { color: var(--primary); }
.progressive-content { display: grid; gap: 15px; padding: 3px 0 16px; }
.import-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 14px; background: var(--soft-green); border-radius: var(--radius-small); }
.import-summary strong, .import-summary span { display: grid; place-items: center; min-height: 48px; text-align: center; }
.product-search { display: block; max-width: 520px; margin-bottom: 18px; }
.modal-wide { width: min(1080px, calc(100vw - 32px)); }
.quote-product-picker { display: grid; grid-template-columns: minmax(220px, 1fr) auto auto; gap: 10px; margin-bottom: 12px; }
.quote-line { display: grid; grid-template-columns: minmax(220px, 2fr) 90px 90px 130px 90px 44px; gap: 8px; align-items: end; padding: 12px 0; border-bottom: 1px solid var(--border); }
.quote-line label span { display: block; margin-bottom: 5px; color: var(--muted-text); font-size: .95rem; }
.quote-total { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 18px; padding: 18px 0; }
.quote-total strong { font-size: 1.25rem; }
/* Tarjouksen esikatselu on paperia: se pysyy tarkoituksella vaaleana myos
   tummassa tilassa, koska asiakkaalle lahteva PDF on vaalea. Nama ovat ainoat
   sallitut kovakoodatut varit tassa tiedostossa. */
.quote-document { padding: 8px; color: #17211b; background: #fff; }
.quote-header, .quote-parties { display: flex; justify-content: space-between; gap: 32px; margin: 20px 0 32px; }
.quote-header span, .quote-document small { display: block; color: #607067; }
.quote-parties section { flex: 1; }
.quote-table { width: 100%; margin: 24px 0; border-collapse: collapse; }
.quote-table th, .quote-table td { padding: 12px 8px; border-bottom: 1px solid #d9e1dc; text-align: left; }
.quote-table th:not(:first-child), .quote-table td:not(:first-child) { text-align: right; }
/* Tyopoydan mallipalakoonti: luku isona ja muutos sen alla pienena, jotta
   rivi kertoo kerralla seka maaran etta suunnan. */
.dashboard-samples .quote-table { margin: 8px 0 0; }
.dashboard-samples td { font-variant-numeric: tabular-nums; }
.dashboard-samples td:not(:first-child) { font-size: 1.15rem; }
.sample-trend { display: block; font-size: 0.85rem; font-weight: var(--weight-normal); color: var(--muted-text); }
.sample-trend.is-up { color: var(--primary); }
.sample-trend.is-down { color: var(--danger); }
.dashboard-samples .sample-total td { border-bottom: none; }
/* Viisi jaksoa ei mahdu kapealle naytolle, joten taulukko vierii vaakasuunnassa
   oman laatikkonsa sisalla. Kaupan nimi jaa paikalleen, jottei vieritetty luku
   irtoa rivistaan. Sivu itse ei vieri. */
.dashboard-samples-scroll { overflow-x: auto; }
.dashboard-samples th:first-child, .dashboard-samples td:first-child {
  position: sticky;
  left: 0;
  background: var(--background);
}
/* Puhelimessa vertailuluku jatetaan pois, jotta sarake pysyy kapeana.
   Se loytyy edelleen solun title-tekstista. */
@media (max-width: 768px) {
  .dashboard-samples th, .dashboard-samples td { padding: 10px 6px; }
  .dashboard-samples td:not(:first-child) { font-size: 1.05rem; }
  .dashboard-samples .sample-previous { display: none; }
  .sample-trend { font-size: 0.85rem; white-space: nowrap; }
}

.quote-summary { display: grid; justify-content: end; gap: 8px; min-width: 280px; margin: 20px 0 32px; }
.quote-summary span { display: flex; justify-content: space-between; gap: 40px; }
.quote-summary strong { padding-top: 10px; border-top: 2px solid #17211b; font-size: 1.25rem; }
.quote-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 28px; }
.dashboard-calendar { margin-top: 24px; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.dashboard-calendar.is-collapsed { padding-bottom: 16px; }
.dashboard-calendar.is-collapsed .section-header { margin-bottom: 0; }
.dashboard-calendar-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dashboard-attention { margin-top: 24px; }
.dashboard-attention-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.attention-card { min-width: 0; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius-large); background: var(--surface); box-shadow: var(--shadow-card); }
.attention-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.attention-card-heading h3 { margin: 0; font-size: 1rem; }
.attention-list { display: grid; gap: 8px; }
.attention-list button { display: grid; width: 100%; gap: 3px; padding: 11px; color: inherit; background: var(--surface-soft); border: 1px solid transparent; border-radius: var(--radius-small); text-align: left; cursor: pointer; }
.attention-list button:hover, .attention-list button:focus-visible { border-color: var(--primary); }
.attention-list small, .attention-empty { color: var(--muted-text); }
.dashboard-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(110px, 1fr)); gap: 8px; overflow-x: auto; }
.dashboard-calendar-day { min-height: 150px; padding: 10px; background: var(--surface-soft); border: 1px solid transparent; border-radius: var(--radius-small); }
.dashboard-calendar-day.is-today { background: var(--soft-green); border-color: var(--primary); }
.dashboard-calendar-day > div { display: flex; justify-content: space-between; margin-bottom: 10px; text-transform: capitalize; }
.dashboard-calendar-day > button { display: grid; width: 100%; min-height: 44px; margin-bottom: 6px; padding: 7px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-small); text-align: left; cursor: pointer; }
.dashboard-calendar-day time { color: var(--primary); font-size: .95rem; font-weight: var(--weight-bold); }
.dashboard-calendar-day small { color: var(--muted-text); font-size: .95rem; }

@media (max-width: 1024px) {
  .application-shell { grid-template-columns: 184px minmax(0, 1fr); }
  .work-layout, .admin-layout { grid-template-columns: 1fr; }
  .next-action { max-width: 520px; }
  /* Kavennettu sivupalkki jattaa asiakasriville noin 520 px, johon viisi
     saraketta ei mahdu ilman vaakavieritysta. Avoin arvo jaa pois samoin kuin
     kapealla naytolla, ja vahimmaisleveydet kevenevat. */
  .customer-row {
    grid-template-columns: minmax(140px, 1.2fr) minmax(120px, .9fr) minmax(90px, .65fr) auto;
    gap: var(--space-3);
  }
  .customer-row > :nth-child(4) { display: none; }
  .form-grid { grid-template-columns: 1fr; }
  .company-map-layout { grid-template-columns: minmax(0, 1fr) minmax(270px, .55fr); }
}

@media (max-width: 768px) {
  :root { font-size: 16px; }
  .application-shell { display: block; min-height: auto; }
  .sidebar { display: none; }
  .mobile-navigation {
    position: sticky;
    z-index: 20;
    top: 0;
    display: flex;
    width: 100%;
    max-width: 100vw;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    overflow-x: auto;
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(9px);
  }
  .mobile-navigation .navigation-button { width: auto; min-height: 48px; padding: var(--space-3) var(--space-3); white-space: nowrap; }
  /* Versiotieto vei kapealla nayttolla ~180 px navigaatiorivista, jolloin
     nakyvissa oli vain puolitoista valikkokohtaa. Versio loytyy Asetuksista. */
  .mobile-release-info { display: none; }
  .main-content { padding: var(--space-5) var(--space-4) 56px; }
  .page-header { min-height: 0; margin-bottom: 21px; }
  .header-actions, .search-field, .search-field input { width: 100%; }
  .header-actions .button { flex: 1; }
  .metric-grid, .customer-layout, .report-grid, .settings-grid { grid-template-columns: 1fr; }
  .dashboard-attention-grid { grid-template-columns: 1fr; }
  /* Kapealla naytolla tehtavan nimi sai vain puolet leveydesta ja katkesi
     kolmelle riville. Nimi ja asiakas saavat nyt koko leveyden ja aika seka
     painikkeet asettuvat niiden alle omalle rivilleen. */
  .task-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .task-row > span:last-child { justify-content: flex-start; }
  .next-action .button-block { width: 100%; min-width: 0; }
  /* Puhelimessa tyomaakortti on asentajan tyokalu: napit taysleveina. */
  .worksite-actions .button { flex: 1 1 100%; }
  .worksite-facts { gap: var(--space-3); }
  .pipeline-board { display: flex; overflow-x: auto; scroll-snap-type: x proximity; }
  .pipeline-controls { width: 100%; }
  .pipeline-controls .select-field, .pipeline-controls select { flex: 1; min-width: 0; }
  .pipeline-stage { flex: 0 0 min(84vw, 305px); scroll-snap-align: start; }
  .pipeline-help { margin-top: 0; }
  .calendar-header, .calendar-toolbar { align-items: stretch; flex-direction: column; }
  .calendar-range-form { align-items: stretch; flex-direction: column; }
  .calendar-view-switch .button { flex: 1; }
  .calendar-grid { grid-template-columns: repeat(7, minmax(240px, 78vw)); scroll-snap-type: x proximity; }
  .calendar-day { scroll-snap-align: start; }
  .calendar-month .calendar-day { min-height: 210px; }
  .customer-profile { position: static; }
  /* Mobiilissa soitto- ja viestinapit levitetaan koko riville, jotta
     niihin osuu peukalolla. */
  .customer-quick-actions .button { flex: 1 1 auto; padding: 11px 12px; }
  .more-actions { width: 100%; }
  .more-actions > summary { justify-content: center; }
  .more-actions-menu { position: static; width: 100%; margin-top: 6px; box-shadow: none; }
  .organization-card { grid-template-columns: 48px minmax(0, 1fr); }
  .organization-card > .status-label { grid-column: 2; width: fit-content; }
  .member-row > span:first-child { flex: 1 1 100%; }
  /* Asiakasrivi tiivistetaan kapealla nayttolla: nimi ja tila samalle
     riville, yhteystieto sen alle ja vastuu/arvo yhdelle riville. Nain
     yksi asiakas vie noin puolet aiemmasta pystytilasta. */
  .customer-row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); padding: var(--space-4) var(--space-2); }
  .customer-row > span:nth-child(4) { display: none; }
  .customer-row > span:nth-child(3) { color: var(--muted-text); font-size: .95rem; }
  .customer-type-filter { display: grid; width: 100%; overflow: visible; }
  .customer-type-button { width: 100%; justify-content: space-between; }
  .customer-header { display: none; }
  .customer-sort-mobile { display: flex; margin-bottom: var(--space-2); }
  .customer-row > :nth-child(2), .customer-row > :nth-child(3), .customer-row > :nth-child(4) { grid-column: 1; }
  .customer-row > :last-child { grid-column: 2; grid-row: 1; }
  .two-columns { grid-template-columns: 1fr; }
  .modal { width: calc(100% - 16px); max-height: calc(100vh - 16px); }
  .modal-form { padding: 20px 16px; }
  .modal-actions { display: grid; grid-template-columns: 1fr; }
  .modal-actions .button-primary, .modal-actions .button-danger { grid-row: 1; }
  .wizard-type-choice { grid-template-columns: 1fr; }
  .wizard-steps { flex-wrap: wrap; }
  .detail-deal, .data-row { align-items: flex-start; }
  .secret-line, .input-action, .import-summary { grid-template-columns: 1fr; display: grid; }
  .quote-product-picker, .quote-line { grid-template-columns: 1fr 1fr; }
  .quote-description { grid-column: 1 / -1; }
  .quote-header, .quote-parties { display: block; }
  .dashboard-calendar-grid { grid-template-columns: repeat(7, minmax(170px, 74vw)); scroll-snap-type: x proximity; }
  .dashboard-calendar-day { scroll-snap-align: start; }
  .company-map-layout { grid-template-columns: 1fr; }
  .map-status-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .map-status-grid span { min-width: 0; }
  .map-company-row .inline-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .map-company-row .button { width: 100%; min-width: 0; }
  .company-map-frame {
    height: 55vh;
    min-height: 360px;
    max-height: 560px;
  }
  .map-company-panel { min-height: 0; max-height: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    /* Tila vaihtuu edelleen, mutta ilman liiketta. Nolla ei kelpaa, koska
       osa selaimista ohittaa silloin transitionend-tapahtuman. */
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Matka toimistolta on taustatieto: yksi rivi nimen alla, ei omaa korttia. */
.customer-travel {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 6px 0 0;
  color: var(--muted-text);
  font-size: .95rem;
}
.customer-travel .text-button { min-height: 32px; font-size: .95rem; }
.route-planner-layout { display: grid; grid-template-columns: minmax(280px, .85fr) minmax(360px, 1.15fr); gap: 22px; }
.route-planner-settings, .route-plan-panel { min-width: 0; }
.route-customer-picker { margin-top: 20px; }
.route-customer-options {
  display: grid;
  gap: 7px;
  max-height: 280px;
  margin-top: 10px;
  padding-right: 4px;
  overflow-y: auto;
}
.route-customer-option {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 56px;
  margin: 0;
  padding: 9px 11px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  cursor: pointer;
}
.route-customer-option:has(input:checked) { background: var(--soft-green); border-color: var(--primary); }
.route-customer-option input { min-height: 20px; }
.route-customer-option span { display: grid; min-width: 0; }
.route-customer-option small, .route-stop small, .route-summary-grid small, .route-timeline small { color: var(--muted-text); font-size: .95rem; }
.route-stop-list, .route-timeline { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.route-stop {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
}
.route-stop-number { display: grid; place-items: center; width: 30px; height: 30px; color: var(--primary-text); background: var(--primary); border-radius: 50%; font-weight: var(--weight-bold); }
.route-stop > span:nth-child(2) { display: grid; }
.route-stop label { display: flex; align-items: center; gap: 6px; margin: 0; font-size: .95rem; }
.route-stop select { min-height: 38px; }
.route-stop-actions { display: flex; gap: 3px; }
.route-stop-actions .icon-button { min-width: 38px; min-height: 38px; }
.route-schedule { margin-top: 16px; }
.route-summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.route-summary-grid span { display: grid; padding: 12px; background: var(--surface-soft); border-radius: var(--radius-small); }
.route-summary-grid strong { font-size: 1.1rem; }
.route-timeline li { display: grid; grid-template-columns: 58px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.route-timeline time { color: var(--primary); font-weight: var(--weight-bold); }
.route-timeline span { display: grid; }
.route-planner-actions { align-items: center; }

@media (max-width: 640px) {
  .member-row { gap: 8px; align-items: flex-start; }
  .member-row > span:first-child,
  .member-row > .compact-select,
  .member-row > .member-status-actions { flex: 1 1 100%; }
  .member-status-actions { justify-content: flex-start; }
  .compact-select { max-width: none; min-height: 48px; }
  .button, .button-small, .text-button { min-height: 48px; }
  .customer-type-button, .navigation-button { min-height: 48px; }
  .select-field select, select { min-height: 48px; }
  /* Kapealla näytöllä suodattimet ja painikkeet latoutuvat allekkain:
     rinnakkain valikoille jäi niin vähän tilaa, että otsikot menivät
     päällekkäin. Kumoaa 780px-lohkon flex-jaon, joka on tässä
     tiedostossa aiemmin. */
  .pipeline-controls { flex-direction: column; align-items: stretch; }
  .pipeline-controls .select-field,
  .pipeline-controls .button { flex: none; width: 100%; }
  .bulk-bar, .bulk-actions { flex-direction: column; align-items: stretch; }
  .bulk-actions .select-field, .bulk-actions .button { width: 100%; }
  .deal-select input { width: 26px; height: 26px; }
  /* Liidin toimintorivi mahtuu kapealle näytölle vain täysleveänä. */
  .deal-stage-actions { padding-left: 0; }
  .deal-stage-actions .button-small { min-height: 48px; }
  .deal-stage-move, .deal-stage-move select { width: 100%; min-width: 0; }
}

@media (pointer: coarse) {
  .button, .button-small, .text-button { min-height: 48px; }
  .deal-stage-actions .button-small { min-height: 48px; }
  .compact-select { min-height: 48px; }
  .customer-type-button, .navigation-button { min-height: 48px; }
  .select-field select, select { min-height: 48px; }
}

@media (max-width: 768px) {
  .route-planner-layout { grid-template-columns: 1fr; }
  .route-stop { grid-template-columns: 34px minmax(0, 1fr); }
  .route-stop > label, .route-stop-actions { grid-column: 2; }
  .route-summary-grid { grid-template-columns: 1fr; }
}

@media print {
  body * { visibility: hidden; }
  #quote-view-dialog, #quote-view-dialog * { visibility: visible; }
  #quote-view-dialog { position: absolute; inset: 0; width: 100%; max-width: none; margin: 0; border: 0; box-shadow: none; }
  .no-print { display: none !important; }
  .quote-document { padding: 0; }
}

.automation-controls { display: flex; align-items: center; gap: 12px; }
.status-label.status-active { background: var(--soft-green); color: var(--primary); }
.status-label.status-inactive { background: var(--surface-soft); color: var(--muted-text); }

/* Reittisuunnittelun suodattimet ja lähtöpaikan valinta */
.route-filter-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.route-filter-row .select-field { flex: 1; min-width: 0; }
.route-distance-origin { margin: 0 0 8px; color: var(--muted-text); font-size: .95rem; }
.route-origin-choices { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.route-origin-choices .button.is-selected { color: var(--primary-text); background: var(--primary); border-color: var(--primary); }

/* Maasuodatin asiakasnäkymässä */
.customer-country-filter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.customer-country-filter .customer-type-button span { font-weight: var(--weight-semibold); }
.customer-row > span small { display: block; margin-top: 2px; color: var(--muted-text); font-size: .95rem; }

/* Menneet päivät kalenterissa: hoidettu työ erottuu tulevasta ilman että
   se katoaa näkyvistä. Kontrasti pidetään luettavana (ei alle 4.5:1). */
.calendar-day.is-past, .dashboard-calendar-day.is-past { background: var(--surface-soft); }
.calendar-day.is-past .calendar-day-heading, .dashboard-calendar-day.is-past > div { color: var(--muted-text); }
/* Menneen paivan tehtava himmennetaan, mutta ei luettavuuden alle: .72
   antoi apuselitteelle kontrastiksi 4,35 seka vaaleassa etta tummassa.
   .85 pitaa sen yli 4,5:n ja mennyt aika erottuu yha. */
.calendar-day.is-past button, .dashboard-calendar-day.is-past button { opacity: .85; }
.calendar-day.is-past button:hover, .calendar-day.is-past button:focus-visible,
.dashboard-calendar-day.is-past button:hover, .dashboard-calendar-day.is-past button:focus-visible { opacity: 1; }
.calendar-time-heading.is-past, .calendar-hour-cell.is-past { background: var(--surface-soft); color: var(--muted-text); }
.calendar-hour-cell.is-past .calendar-task { opacity: .85; }
.calendar-hour-cell.is-past .calendar-task:hover, .calendar-hour-cell.is-past .calendar-task:focus-visible { opacity: 1; }

/* Asiakaslistan sivutus */
.customer-paging { display: flex; align-items: end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.customer-paging-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.customer-paging-controls p { margin: 0; color: var(--muted-text); }

/* Kiinnitetyt muistiinpanot: kirjattu muistiinpano nakyy heti kortin
   ylareunassa, jotta seuraava soittaja nakee tilanteen ilman aikajanaa. */
.pinned-notes .data-list { gap: var(--space-2); }
.pinned-note {
  display: grid;
  gap: 4px;
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius);
}
.pinned-note small { color: var(--muted-text); }
.pinned-note p { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.pinned-note .text-button { justify-self: start; }

/* Myyjän päiväbriiffi tehtävälistan yläpuolella. Vasemmalla edellinen työpäivä
   lukuina, oikealla tämä päivä ja sen yksi fokus. Kapealla näytöllä osat menevät
   allekkain niin, että fokus jää alimmaksi eli lähimmäksi tehtävälistaa. Nousun
   saa korostaa värillä, laskua ei: hiljaisempaa päivää ei merkitä punaisella,
   koska kortti on valmennusta eikä arvostelu. */
.task-brief {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-5);
  margin-bottom: var(--space-4);
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.task-brief[hidden] { display: none; }
.task-brief-metrics { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin-bottom: var(--space-3); }
.task-brief-metric { display: grid; gap: 2px; }
.task-brief-metric > span { color: var(--muted-text); }
.task-brief-metric strong { font-size: 1.35rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.task-brief-metric small { color: var(--muted-text); }
/* Avattava kuittausluku näyttää muilta luvuilta: nappi ei saa muuttaa
   rivin rytmiä, vain alleviivattu luku kertoo että sen takana on lista. */
.task-brief-metric-open {
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}
.task-brief-metric-open strong { text-decoration: underline; text-underline-offset: 4px; }
.task-brief-metric-open:hover strong { color: var(--primary); }
.task-brief-items { margin-bottom: var(--space-3); }
.task-brief-items[hidden] { display: none; }
.task-brief-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-3); margin: 0 0 2px; }
.task-brief-item small { color: var(--muted-text); }
.task-brief-item-more { margin: 6px 0 0; color: var(--muted-text); font-size: .9rem; }
.task-brief-trend { margin-bottom: 0; color: var(--muted-text); }
.task-brief-trend.is-up { color: var(--primary); }
.task-brief-today { padding-left: var(--space-5); border-left: 1px solid var(--border); }
.task-brief-today h3 { margin: 2px 0 4px; font-size: 1.15rem; }
.task-brief-detail { margin-bottom: 0; color: var(--muted-text); }
.task-brief-queue { margin: 6px 0 0; color: var(--muted-text); font-variant-numeric: tabular-nums; }
@media (max-width: 1024px) {
  .task-brief { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4); }
  .task-brief-today { padding: var(--space-4) 0 0; border-top: 1px solid var(--border); border-left: none; }
}

/* Tehtävälista: leveällä näytöllä sarakkeet, puhelimessa allekkain.
   Sarakeleveydet on kiinnitetty, jotta rivit lukevat pystysuunnassa
   samalla tavalla kuin taulukossa. */
.task-filters { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: end; margin: var(--space-3) 0; }
.task-filters .search-field { flex: 1 1 220px; }
.task-table-row { display: grid; grid-template-columns: 1fr; gap: var(--space-2); align-items: start; }
.task-cell { display: grid; gap: 2px; min-width: 0; }
.task-cell-title strong { overflow-wrap: anywhere; }
/* Vastuuhenkilo tiivistyy nimikirjainpalloksi; koko nimi on title-vihjeessa. */
.owner-badge {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-soft);
  color: var(--muted-text);
  font-weight: var(--weight-medium);
}
.task-due-overdue { color: var(--danger); font-weight: var(--weight-medium); }
.task-table-row.is-overdue { border-left: 4px solid var(--danger); }
.task-table-row .text-button { padding: 0; text-align: left; }
/* Puhelimessa valilehdet ovat yksi vieritettava rivi, jotta lista alkaa
   heti eivatka nelja valilehtea vie puolta ruudusta. */
@media (max-width: 640px) {
  #task-scopes { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: var(--space-2); }
  #task-scopes .customer-type-button { flex: 0 0 auto; width: auto; }
  /* Suodattimet kahteen sarakkeeseen, jotta ensimmainen tehtava nakyy
     ilman vieritysta. */
  .task-filters { display: grid; grid-template-columns: 1fr 1fr; }
  .task-filters .search-field { grid-column: 1 / -1; }
  .task-filters .select-field, .task-filters select { min-width: 0; max-width: 100%; }
}

@media (min-width: 769px) {
  /* Tiivis rivikorkeus vain hiirella: puhelimessa kosketuskohde pysyy 44 px. */
  .task-table-row .text-button { min-height: 32px; }
  .task-table-row {
    grid-template-columns: 32px 92px minmax(0, 2fr) 180px 44px 210px;
    align-items: center;
    gap: var(--space-3);
  }
  .task-cell-manage { justify-content: flex-end; }
  /* Kuittausrivi omalle riville koko leveydelta, jotta lopputulokset mahtuvat
     yhdelle riville eivatka pilko sarakejakoa. */
  .task-cell-finish { grid-column: 1 / -1; }
}

/* Hallintapainikkeet pysyvat yhtena rivina, jotta ne eivat pilko saraketta. */
.task-cell-manage { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.task-cell-manage .text-button { white-space: nowrap; }

/* Kuittausnapit tehtavalistalla. Sama nappirivi kuin asiakaskortilla, mutta
   se saa koko rivin leveyden: 210 pikselin sarakkeeseen kuusi lopputulosta
   pilkkoutuisi kuudelle riville. Rivi on kiinni oletuksena, joten lista
   nayttaa samalta kuin ennen kunnes nappeja tarvitaan. */
.task-cell-finish { display: block; }
.task-cell-finish .task-finish > summary { min-height: 32px; }

/* Myyjän oma asiakasnäkymä */
.my-customer-row { align-items: start; }
.my-customer-row .text-button { min-height: 32px; padding: 0; font-size: 1.05rem; }
.my-customer-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* Puhelimen alapalkkinavigaatio: nelja tarkeinta nakymaa peukalon
   ulottuvilla ja loput Lisaa-valikossa. Ylareunan vieritysnauha jaa pois,
   koska kaksi navigaatiota samaan aikaan on vain sekavaa. */
@media (max-width: 768px) {
  .mobile-navigation { display: none; }
  /* Ilmoitus jaa alapalkin ylapuolelle, jotta se ei peita navigaatiota
     eika navigaatio sita. Alapalkin korkeus on 56 px + omat tayteet. */
  .status-message:not(:empty) {
    right: var(--space-3);
    bottom: calc(var(--space-3) + 72px + env(safe-area-inset-bottom, 0px));
    left: var(--space-3);
    max-width: none;
  }
  .bottom-navigation {
    position: fixed;
    z-index: 30;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-1);
    padding: var(--space-2) var(--space-2) calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--surface) 97%, transparent);
    border-top: 1px solid var(--border);
    backdrop-filter: blur(9px);
  }
  .bottom-navigation-button {
    display: grid;
    place-items: center;
    min-height: 56px;
    padding: var(--space-2) var(--space-1);
    color: var(--text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-small);
    font-size: .95rem;
    font-weight: var(--weight-semibold);
    line-height: 1.2;
    text-align: center;
    /* Ei automaattista tavutusta: "Tyopoy-ta" nayttaisi rikkinaiselta.
       Pitkat nimet on lyhennetty ja koko nimi on aria-labelissa. */
    hyphens: manual;
    cursor: pointer;
  }
  .bottom-navigation-button.is-selected { color: var(--primary-text); background: var(--primary); }
  /* Sisallon loppuun tilaa, jotta alapalkki ei peita viimeista riviä. */
  .main-content { padding-bottom: 104px; }
  .modal-sheet { width: 100%; max-width: none; margin: auto auto 0; border-radius: var(--radius-large) 16px 0 0; }
  .more-navigation-list { display: grid; gap: var(--space-3); }
}
.modal-warning {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  color: var(--danger);
  background: var(--danger-soft);
  border-radius: var(--radius-small);
  font-size: .95rem;
}

/* Ruotsalaisen yrityksen haku: toissijainen, avataan tarvittaessa. */
/* Maavalinta: yksi klikkaus nayttaa vain valitun maan rekisterihaun. */
.wizard-country-choice { display: flex; flex-wrap: wrap; gap: 8px; }
.wizard-country-button { min-height: 44px; padding: 8px 18px; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-small); font-weight: var(--weight-semibold); cursor: pointer; }
.wizard-country-button:hover { border-color: var(--primary); }
.wizard-country-button.is-selected { color: var(--primary-text); background: var(--primary); border-color: var(--primary); }
.country-panel { display: grid; gap: 8px; }
.country-panel[hidden] { display: none; }
.wizard-action-choice { display: grid; gap: 8px; }
.wizard-action-label { font-weight: var(--weight-bold); }

/* Verkkokauppanakyman mittarit ja suodattimet */
.webshop-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
}

.webshop-range {
  margin: 0 0 1rem;
  color: var(--muted-text, var(--muted-cool));
  font-size: 0.95rem;
}

.webshop-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.webshop-metric {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--border-color, var(--border-cool));
  border-radius: 0.75rem;
  background: var(--surface-color, var(--surface));
}

.webshop-metric small {
  color: var(--muted-text, var(--muted-cool));
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.85rem;
}

.webshop-metric strong {
  font-size: 1.5rem;
  line-height: 1.2;
}

.webshop-metric span {
  color: var(--muted-text, var(--muted-cool));
  font-size: 0.85rem;
}

/* Automaatioiden kuvaukset asetuksissa */
.automation-rules { display: flex; flex-direction: column; gap: 12px; }

.automation-rule {
  padding: 14px 16px;
  border: 1px solid var(--border-color, var(--border-cool));
  border-radius: var(--radius-small);
  background: var(--surface-color, var(--surface));
}

.automation-rule-header {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.automation-rule-action { margin: 0 0 8px; }

.automation-rule-conditions {
  margin: 0 0 8px;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.automation-rule-conditions li { font-size: 0.9rem; }

.automation-rule-why { margin: 0; color: var(--muted-text, var(--muted-cool)); }

/* Lahetyksen seurantalinkki tilausrivilla */
.tracking-link, .tracking-plain {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.85rem;
}

.tracking-link { color: var(--link-color, var(--link-green)); text-decoration: underline; }
.tracking-plain { color: var(--muted-text, var(--muted-cool)); }

/* Postin seurannasta haettu tila seurantalinkin vieressa */
.tracking-status { margin-left: 6px; vertical-align: middle; }
.status-label.tracking-delivered { background: var(--soft-green); color: var(--primary); }
.status-label.tracking-transit { background: var(--info-soft); color: var(--info-text); }
.status-label.tracking-returned { background: var(--danger-soft); color: var(--danger-strong); }

/* Verkkokaupan tilaukset asiakaskortilla */
.webshop-order-list { display: flex; flex-direction: column; gap: 10px; }

.webshop-order {
  padding: 12px 14px;
  border: 1px solid var(--border-color, var(--border-cool));
  border-radius: var(--radius-small);
}

.webshop-order-header {
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
}

.webshop-order-header small { display: block; color: var(--muted-text, var(--muted-cool)); }

.webshop-order-lines {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.webshop-order-lines li {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  font-size: 0.9rem;
}

.webshop-order-lines small { color: var(--muted-text, var(--muted-cool)); white-space: nowrap; }

/* Tehtavan kuvauksen rivinvaihdot nakyviin, jotta lista pysyy listana. */
.task-notes { white-space: pre-line; }

/* Varasto: verkkokaupan tuotteiden saldot Refoxista. */
.varasto-controls {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
  margin: var(--space-4) 0 var(--space-3);
}

.varasto-search { flex: 1; min-width: 220px; }

.varasto-filters { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.filter-chip {
  min-height: 44px;
  padding: 6px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--muted-text);
  font-size: 0.95rem;
  cursor: pointer;
}

.filter-chip.is-selected {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-text);
}

.varasto-table {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.varasto-header,
.varasto-row summary {
  display: grid;
  grid-template-columns: minmax(0, 2.6fr) 82px 74px 74px 96px;
  gap: var(--space-2);
  align-items: center;
  padding: 10px var(--space-4);
}

.varasto-header {
  border-bottom: 1px solid var(--border);
  color: var(--muted-text);
  font-size: 0.85rem;
}

.varasto-header span:not(:first-child) { text-align: right; }

.varasto-row { border-bottom: 1px solid var(--border); }
.varasto-row:last-child { border-bottom: none; }

.varasto-row summary { cursor: pointer; list-style: none; min-height: 48px; }
.varasto-row summary::-webkit-details-marker { display: none; }
.varasto-row summary:hover { background: var(--surface-soft); }

.varasto-product { display: flex; flex-direction: column; gap: 2px; min-width: 0; align-items: flex-start; }
.varasto-product strong { font-size: 0.98rem; overflow-wrap: anywhere; }
.varasto-product small { color: var(--muted-text); }

.varasto-free { text-align: right; font-size: 1.1rem; }
.varasto-free.is-positive { color: var(--primary); }
.varasto-free.is-warning { color: var(--warn-text); }
.varasto-free.is-negative { color: var(--danger); }

.varasto-number { text-align: right; color: var(--muted-text); font-variant-numeric: tabular-nums; }

/* Saapuvat kuljetukset: kontit ja rekkarahdit saldotaulukon ylapuolella. */
.inbound-shipments { display: grid; gap: var(--space-3); }
.inbound-add { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.inbound-add-field { flex: 1 1 280px; }
/* Vasen reunavari kertoo tilan yhdella silmayksella: sininen matkalla,
   vihrea perilla, punainen ongelma, keltainen ilman tietoa. */
.inbound-row {
  border: 1px solid var(--border); border-left: 4px solid var(--border);
  border-radius: var(--radius); background: var(--surface); overflow: hidden;
}
.inbound-row.is-in_transit { border-left-color: var(--info-text); }
.inbound-row.is-delivered { border-left-color: var(--primary); }
.inbound-row.is-failure { border-left-color: var(--danger); }
.inbound-row.is-unknown { border-left-color: var(--warn-text); }
.inbound-summary {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-4); cursor: pointer;
}
.inbound-main { display: grid; gap: 2px; min-width: 0; flex: 1 1 320px; }
.inbound-title { font-weight: var(--weight-semibold); }
.inbound-title small { color: var(--muted-text); font-weight: normal; margin-left: var(--space-1); }
.inbound-route { color: var(--muted-text); font-size: 0.9em; }
/* ETA-paneeli on nakyman tarkein kohta: iso paivalaskuri, sen alla
   paivamaara viikonpaivineen ja mahdollinen myohastyminen sanoina. */
.inbound-eta { display: grid; gap: 2px; justify-items: end; text-align: right; flex-shrink: 0; margin-left: auto; }
.inbound-countdown { color: var(--info-text); font-weight: var(--weight-semibold); }
.inbound-countdown b { font-size: 1.45em; font-variant-numeric: tabular-nums; }
.inbound-countdown.is-done { color: var(--primary); font-size: 1.15em; }
.inbound-countdown.is-soon { color: var(--info-text); font-size: 1.15em; }
.inbound-countdown.is-late { color: var(--danger); }
.inbound-countdown.is-open { color: var(--muted-text); }
.inbound-eta-date { font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.inbound-eta-change { font-size: 0.9em; }
.inbound-eta-change small { display: block; color: var(--muted-text); font-size: 0.92em; }
.inbound-eta-change.is-late { color: var(--danger); font-weight: var(--weight-semibold); }
.inbound-eta-change.is-early { color: var(--primary); font-weight: var(--weight-semibold); }
/* Edistymispalkki nayttaa matkan osuuden lahdosta ETA:an. */
.inbound-progress {
  flex: 1 0 100%; height: 6px; border-radius: var(--radius-pill);
  background: var(--surface-soft); border: 1px solid var(--border); overflow: hidden;
}
.inbound-progress span { display: block; width: 0; height: 100%; background: var(--info-text); border-radius: var(--radius-pill); }
.inbound-details {
  padding: var(--space-3) var(--space-4) var(--space-4);
  background: var(--surface-soft); border-top: 1px solid var(--border);
  display: grid; gap: var(--space-2); justify-items: start;
}
.inbound-details p { margin: 0; }
.inbound-error { color: var(--danger); }
.inbound-events { margin: 0; padding-left: var(--space-4); display: grid; gap: 2px; }
.inbound-events span { color: var(--muted-text); font-variant-numeric: tabular-nums; }
.inbound-alert {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); padding: var(--space-2) var(--space-3);
  border: 1px solid var(--warn-text); border-radius: var(--radius);
  background: var(--warn-soft); color: var(--warn-text);
  margin-bottom: var(--space-2);
}
.inbound-alert-text b { margin-right: var(--space-1); }
.inbound-alert-time { color: var(--muted-text); font-size: 0.85em; margin-left: var(--space-1); }
.inbound-supplier { font-weight: var(--weight-semibold); margin-left: var(--space-1); }
.inbound-contents-edit input { width: 100%; padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: inherit; font: inherit; }
.inbound-contents { font-size: 0.9em; }
.inbound-contents-missing { color: var(--danger); font-size: 0.9em; }
.inbound-contents-edit { display: grid; gap: var(--space-1); width: 100%; max-width: 560px; font-size: 0.9em; color: var(--muted-text); }
.inbound-contents-edit textarea {
  width: 100%; padding: var(--space-2); border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface); color: inherit;
  font: inherit; resize: vertical;
}

.status-label.stock-negative { background: var(--danger-soft); color: var(--danger-strong); }
.status-label.stock-warning { background: var(--warn-soft); color: var(--warn-text); }
.status-label.stock-info { background: var(--info-soft); color: var(--info-text); }
/* Samaan osoitteeseen tehty tilaus on eri vaite kuin asiakkaan oma osto,
   joten se on neutraali eika kilpaile ostomerkin vihrean kanssa. */
.status-label.household-label { background: var(--surface-soft); color: var(--muted-text); }
/* Reklamaatio: punainen pallo nimen edessa listoilla ja merkin sisassa
   kortilla. Vari ei ole ainoa tieto: kortilla lukee "Reklamaatio" ja
   listarivilla pallo kantaa ruudunlukijalle oman tekstinsa. */
.complaint-dot {
  display: inline-block;
  flex: none;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  background: var(--danger);
  border-radius: 50%;
  vertical-align: baseline;
}
.status-label.complaint-label .complaint-dot { background: var(--danger-strong, var(--danger)); }

.varasto-detail {
  padding: var(--space-3) var(--space-4) var(--space-4);
  background: var(--surface-soft);
  border-top: 1px solid var(--border);
  display: grid;
  gap: var(--space-3);
}

.varasto-warehouses { display: flex; gap: var(--space-4); flex-wrap: wrap; color: var(--muted-text); font-size: 0.92rem; }
.varasto-warehouses b { color: var(--text); font-weight: var(--weight-medium); }

.varasto-calculator { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.varasto-calculator label { display: flex; align-items: center; gap: var(--space-2); font-size: 0.95rem; }
.varasto-calculator input { width: 90px; }
.varasto-calculator output .is-positive { color: var(--primary); }
.varasto-calculator output .is-negative { color: var(--danger); }

/* Asiakaskortin saldolaatikko: selkeasti oma korostettu kortti, jonka luvut
   haetaan Refoxista kortin avaushetkella. */
.customer-stock-card {
  border: 2px solid var(--primary);
  border-radius: var(--radius);
  padding: var(--space-4);
  background: var(--surface);
}

.customer-stock-actions { display: inline-flex; align-items: center; gap: var(--space-3); }
.customer-stock-actions small { color: var(--muted-text); }

.customer-stock-group { margin-top: var(--space-3); }
.customer-stock-group h3 { margin: 0 0 var(--space-2); font-size: 1rem; }

.customer-stock-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--border);
}

.customer-stock-row span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.customer-stock-row small { color: var(--muted-text); }
.customer-stock-row b { white-space: nowrap; }

.webshop-order-lines li.is-sample-line span { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

@media (max-width: 640px) {
  .varasto-header { display: none; }
  .varasto-row summary { grid-template-columns: minmax(0, 1fr) 82px; }
  .varasto-row summary .varasto-number { display: none; }
  .varasto-free { font-size: 1.05rem; }
}

.varasto-free.is-neutral { color: var(--muted-text); font-size: 0.95rem; }
/* Tarjous Refoxiin -ohjattu luonti: tuotekortit, rivit ja summat. */
.field-hint { margin: 0 0 var(--space-2); color: var(--muted-text); font-size: 0.9rem; }
.refox-line { border-top: 1px solid var(--border); padding-top: var(--space-2); margin-top: var(--space-2); }
.refox-candidates { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-2); margin-top: var(--space-2); }
.refox-candidate {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--background); padding: 10px 12px; cursor: pointer; font: inherit;
}
.refox-candidate:hover { border-color: var(--primary); }
.refox-candidate.selected { border: 2px solid var(--primary); padding: 9px 11px; }
.refox-candidate small { color: var(--muted-text); }
.refox-stock-ok { color: inherit; }
.refox-stock-out { color: var(--danger); }
.refox-secondary { margin-top: var(--space-2); }
.refox-secondary summary { color: var(--muted-text); cursor: pointer; }
.refox-rows { display: flex; flex-direction: column; gap: var(--space-2); }
.refox-row {
  display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(90px, 1fr)) auto;
  gap: var(--space-2); align-items: end;
}
.refox-row > div small { display: block; color: var(--muted-text); }
.refox-row b { padding-bottom: 10px; white-space: nowrap; }
.refox-row-no-price .refox-price-missing {
  grid-column: 1 / -1; margin: 0; color: var(--danger); font-size: 0.85rem;
}
.refox-total {
  display: flex; justify-content: flex-end; gap: var(--space-3);
  border-top: 1px solid var(--border); margin-top: var(--space-2); padding-top: var(--space-2);
}
@media (max-width: 768px) {
  .refox-row { grid-template-columns: 1fr 1fr; }
}

/* Varasto: sarakeotsikoista jarjestaminen. */
.varasto-header button {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--muted-text);
  cursor: pointer;
  text-align: right;
  min-height: 28px;
}
.varasto-header button:first-child { text-align: left; }
.varasto-header button:hover, .varasto-header button.is-sorted { color: var(--text); }
.varasto-header button.is-sorted { font-weight: var(--weight-medium); }

.varasto-sort-mobile { display: none; }

@media (max-width: 640px) {
  .varasto-sort-mobile { display: flex; margin-bottom: var(--space-2); }
}

/* Kulut-nakyma: palvelun nimi omalla rivillaan, selite sen alla. */
.cost-service strong, .cost-service small { display: block; }
.cost-service small { margin-top: 3px; max-width: 60ch; }

/* Outlook-sahkoposti: koko viestin lukunakyma sailyttaa rivinvaihdot ja
   pysyy vieritettavana pitkissa viesteissa. */
.email-view-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 50vh;
  overflow-y: auto;
  padding: var(--space-3);
  background: var(--surface-muted, var(--surface-soft));
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
}

/* Aikajanan suodatinnapit: valittu suodatin korostuu paavarilla. */
.timeline-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.timeline-filters .button.is-selected { background: var(--primary); border-color: var(--primary); color: var(--primary-text); }

/* Automaatiot-nakyma */
.automation-list { display: grid; gap: var(--space-4); margin-bottom: var(--space-5); }
.automation-card-header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.automation-card-header h2 { margin: 0; }
.automation-toggle { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-weight: var(--weight-medium); }
.automation-always { font-size: 13px; color: var(--muted-text); white-space: nowrap; }
.automation-rules { margin: 8px 0; padding-left: 20px; }
.automation-rules li { margin-bottom: 4px; }
.automation-sms { margin-top: 12px; display: grid; gap: 8px; }
.automation-sms textarea { width: 100%; }
.automation-sms .button { justify-self: start; }
.automation-sms .sms-length-over { color: var(--danger); font-weight: var(--weight-medium); }

/* Tavoittamattoman asiakkaan tekstiviesti: rasti on tyhja, koska myyja
   paattaa lahetyksesta itse, ja viesti nakyy sellaisena kuin se lahtee. */
.call-sms-send { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-soft); display: grid; gap: 6px; }
.call-sms-choice { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: var(--weight-medium); cursor: pointer; }
.call-sms-choice input { width: 20px; height: 20px; }
.call-sms-preview { margin: 0; color: var(--muted-text); font-size: .9rem; }

/* Soittolista */
.soittolista-controls { display: flex; gap: 8px; margin-bottom: var(--space-4); flex-wrap: wrap; align-items: center; }
.soittolista-controls .is-selected { color: var(--primary-text); background: var(--primary); }
/* Myyjavalinta on samassa rivissa suodatinnappien kanssa, joten se saa
   saman korkeuden ja reunuksen kuin napit. */
.soittolista-controls select {
  min-height: 34px;
  padding: 4px 10px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-small);
  font-size: .9rem;
}

.call-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
  max-width: 760px;
}
.call-card-alert { border-color: var(--danger); }
.call-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.call-card-head h2 { margin: 0; font-size: 20px; }
.call-card-head h2 .text-button { font-size: 20px; font-weight: var(--weight-bold); padding: 0; }
.call-card-meta { margin: 2px 0 0; color: var(--muted-text); }
.call-card-badge {
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 14px;
  font-weight: var(--weight-medium);
  white-space: nowrap;
}
.call-card-rhythm {
  margin: var(--space-4) 0 0;
  padding: var(--space-4);
  background: var(--surface-soft);
  border-radius: var(--radius-small);
}
.call-card-rhythm p { margin: 0; }
.call-card-quiet { color: var(--danger); }
.call-card-chart { display: flex; align-items: flex-end; gap: 6px; height: 92px; margin-top: var(--space-4); }
.call-card-bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.call-card-bar i { display: block; flex: 0 0 auto; width: 100%; background: var(--primary); border-radius: var(--radius-xs) 3px 0 0; }
.call-card-bar i.bar-0 { height: 3px; }
.call-card-bar i.bar-1 { height: 6px; }
.call-card-bar i.bar-2 { height: 13px; }
.call-card-bar i.bar-3 { height: 19px; }
.call-card-bar i.bar-4 { height: 26px; }
.call-card-bar i.bar-5 { height: 32px; }
.call-card-bar i.bar-6 { height: 38px; }
.call-card-bar i.bar-7 { height: 45px; }
.call-card-bar i.bar-8 { height: 51px; }
.call-card-bar i.bar-9 { height: 58px; }
.call-card-bar i.bar-10 { height: 64px; }
.call-card-bar.is-empty i { background: var(--border); }
.call-card-bar small { margin-top: 6px; text-align: center; color: var(--muted-text); font-size: 13px; }
.call-card-facts { margin: var(--space-4) 0 0; display: grid; gap: 4px; }
.call-card-facts p { margin: 0; }
.call-card-warning { color: var(--danger); font-weight: var(--weight-medium); }
.call-card-suggestion { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.call-card-label { margin: 0; color: var(--muted-text); font-size: 14px; }
.call-card-advice { margin: 4px 0 0; font-size: 17px; font-weight: var(--weight-medium); }
.call-card-slot { margin: 6px 0 0; color: var(--muted-text); }
.call-card-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: var(--space-4); }
.call-card-log { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px dashed var(--border); }
.call-card-log-buttons { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
@media (max-width: 640px) {
  .call-card { padding: var(--space-4); }
  .call-card-head { flex-direction: column; }
  .call-card-actions .button, .call-card-actions .text-button { width: 100%; }
}
/* Himmennetty automaatiokortti jai alle luettavuusrajan: 0.6 antoi
   kontrastiksi 2,98 vaaleassa ja 3,72 tummassa. 0.8 nostaa ne arvoihin
   4,78 ja 5,71 eika kortti silti nayta paalta kytketylta. Tila kerrotaan
   lisaksi tekstilla "Moduuli pois", ei pelkalla himmennyksella. */
.automation-card-off { opacity: 0.8; }
.call-card-picker { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px dashed var(--border); }
.call-card-picker label { display: block; font-size: 14px; color: var(--muted-text); }
.call-card-picker input { min-height: 44px; }

/* Tummassa tilassa kirkas vihrea taytto varataan sivun ainoalle
   ensisijaiselle toiminnolle. Valittu navigaatio, suodatin ja aikajanan
   rajaus saavat vaimean pinnan ja kirkkaan tekstin, jolloin nakyma ei ole
   taynna huutavia vihreita laatikoita. Vaalea tila pysyy ennallaan. */
:root[data-theme="dark"] .navigation-button.is-selected,
:root[data-theme="dark"] .customer-type-button.is-selected,
:root[data-theme="dark"] .calendar-view-switch .is-selected,
:root[data-theme="dark"] .route-origin-choices .button.is-selected,
:root[data-theme="dark"] .wizard-country-button.is-selected,
:root[data-theme="dark"] .filter-chip.is-selected,
:root[data-theme="dark"] .timeline-filters .button.is-selected,
:root[data-theme="dark"] .soittolista-controls .is-selected,
:root[data-theme="dark"] .bottom-navigation-button.is-selected {
  color: var(--primary);
  background: var(--soft-green);
  border-color: var(--success-border);
}

/* Soittokierros: yksi asiakas kerrallaan koko ruudussa. Kolme saraketta
   (konteksti, kirjaus, lopputulos) pysyvat samassa naytossa, jotta myyja ei
   vaihda nakymaa puheluiden valissa. Kapealla naytolla sarakkeet pinoutuvat. */
.call-run-bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.call-run-bar h2 { margin: 0; }
.call-run-bar p { margin: 2px 0 0; color: var(--muted-text); font-size: 14px; }
.call-run-track {
  flex: 1;
  min-width: 120px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  overflow: hidden;
}
.call-run-track span { display: block; height: 100%; width: 0; background: var(--primary); }
.call-run-columns {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-4);
  align-items: start;
}
.call-run-column {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
}
.call-run-name { margin: 0 0 2px; font-size: 22px; }
.call-run-sub { margin: 0 0 var(--space-3); color: var(--muted-text); font-size: 14px; }
.call-run-title { margin: 0 0 var(--space-3); font-weight: var(--weight-medium); }
.call-run-phone {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 8px 16px;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-small);
  background: var(--primary);
  color: var(--primary-text);
  font-size: 20px;
  font-weight: var(--weight-bold);
  text-decoration: none;
}
.call-run-phone-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
.call-run-phone-form input { min-height: 44px; }
.call-run-phone-form button { align-self: flex-start; }
/* Kierroksen jonovalinta: napit allekkain mobiilissa, rinnakkain isommalla
   ruudulla. Selitysteksti kuuluu napin alle, jotta myyja tietaa mita jono
   ottaa ennen kuin painaa. */
.call-run-queues { display: grid; gap: var(--space-3); margin-bottom: var(--space-3); }
@media (min-width: 769px) {
  .call-run-queues { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
}
.call-run-queue .button { width: 100%; }
.call-run-queue .form-help { margin: 6px 0 0; }

.call-run-box {
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  padding: 10px 12px;
  margin-bottom: var(--space-3);
}
.call-run-box h4 { margin: 0 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-text); }
/* Briiffi on myyjan tarkein tuki puhelussa: rivinvaihdot sailytetaan ja
   laatikko erottuu kevyella korostuksella muista laatikoista. */
.call-run-brief { background: var(--surface-soft); border-left: 4px solid var(--info-border); }
.call-run-brief p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; font-size: 14px; }
/* Briiffirivit: varillinen otsikkomerkki + teksti. Isohko fontti ja selvat
   rivivalit, koska briiffi luetaan puhelun aikana nopeasti. */
.brief-row { display: flex; gap: 8px; align-items: baseline; margin: 0 0 8px !important; }
.brief-row:last-child { margin-bottom: 0 !important; }
.brief-tag {
  flex-shrink: 0; padding: 1px 8px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: var(--weight-medium); white-space: nowrap;
}
.brief-tag-info { background: var(--info-soft); color: var(--info-text); }
.brief-tag-success { background: var(--soft-green-strong); color: var(--primary); }
.brief-tag-neutral { background: var(--surface); color: var(--muted-text); border: 1px solid var(--border-strong); }
.brief-tag-warn { background: var(--warn-soft); color: var(--warn-text); }
.brief-tag-action { background: var(--primary); color: var(--primary-text); }
/* Edistymislause paatossivulla: erottuu kiitoksena muttei huuda. */
.call-run-progress { color: var(--primary); font-weight: var(--weight-medium); }
.call-run-kv { display: flex; justify-content: space-between; gap: 10px; margin: 2px 0; font-size: 14px; }
/* Varastosaldo tilausrivin perassa: erottuu maarasta mutta ei vie huomiota
   itse tuotteelta. */
.call-run-stock { margin-left: 6px; font-size: 13px; color: var(--muted-text); white-space: nowrap; }
.call-run-stock.is-positive { color: var(--primary); }
.call-run-stock.is-warning { color: var(--warn-text); }
.call-run-stock.is-negative { color: var(--danger); }

/* Soittokierroksen oma paivavalitsin: kuukausi ja vuosi laatikoista, paivat
   ruudukosta. Viikonloput naytetaan haaleina, koska niita ei voi valita. */
.daypicker { border: 1px solid var(--border); border-radius: var(--radius-small); padding: 10px; background: var(--surface); }
.daypicker-header { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.daypicker-header select { flex: 1 1 auto; min-width: 0; }
.daypicker-weekdays,
.daypicker-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.daypicker-weekdays { margin-bottom: 4px; font-size: 12px; color: var(--muted-text); text-align: center; }
.daypicker-day {
  padding: 8px 0; border: 1px solid transparent; border-radius: var(--radius-small);
  background: var(--surface-soft); color: var(--text); font: inherit; font-size: 14px; cursor: pointer;
}
.daypicker-day:hover:not(:disabled) { border-color: var(--border-strong); }
.daypicker-day:disabled { background: transparent; color: var(--muted-text); opacity: 0.45; cursor: default; }
.daypicker-day.is-today { border-color: var(--border-strong); font-weight: var(--weight-medium); }
.daypicker-day.is-chosen { background: var(--primary); border-color: var(--primary); color: var(--primary-text); font-weight: var(--weight-medium); }
.daypicker-empty { display: block; }
.call-run-note { margin: 6px 0; padding-left: 10px; border-left: 3px solid var(--border); font-size: 14px; }
.call-run-note small { display: block; color: var(--muted-text); font-size: 12px; }
.call-run-outcomes { display: grid; gap: 6px; margin-bottom: var(--space-4); }
.call-run-outcome {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  cursor: pointer;
}
.call-run-outcome input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.call-run-outcome > span:last-child { flex: 1; }
.call-run-outcome:has(input:checked) { border-color: var(--primary); background: var(--soft-green); font-weight: var(--weight-medium); }
.call-run-outcome:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.call-run-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  border-radius: var(--radius-xs);
  background: var(--surface-soft);
  color: var(--muted-text);
  font-size: 12px;
}
.call-run-order {
  border: 1px dashed var(--primary);
  border-radius: var(--radius-small);
  padding: 10px 12px;
  margin-bottom: var(--space-3);
  background: var(--soft-green);
}
.call-run-order h4 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; }
.call-run-order label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted-text); }
.call-run-order input, .call-run-order textarea { width: 100%; }
/* Sarake on kapea, joten tilauskentat asettuvat yhteen tai kahteen palstaan
   sen mukaan mita tilaa on. */
.call-run-order .form-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
/* Kirjaussarakkeen kentat allekkain: otsikko yla, kentta alle koko leveydelta. */
#call-run-call .call-log-question label { display: flex; flex-direction: column; gap: 4px; }
#call-run-call textarea, #call-run-call input { width: 100%; }
.call-run-next-custom { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.call-run-next-custom label { flex: 1; min-width: 130px; font-size: 13px; color: var(--muted-text); }
.call-run-next-custom input { width: 100%; min-height: 44px; }
.call-run-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}
.call-run-next { flex: 1; color: var(--muted-text); font-size: 14px; }
.call-run-actions kbd, .call-run-toast kbd {
  margin-left: 6px;
  padding: 0 5px;
  border-radius: var(--radius-xs);
  background: rgba(0, 0, 0, 0.12);
  font-size: 12px;
}
.call-run-panel { margin-top: var(--space-4); }
.call-run-panel h3 { margin: 0 0 6px; }
.call-run-toast {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 60;
  display: flex;
  gap: var(--space-4);
  align-items: center;
  flex-wrap: wrap;
  max-width: 460px;
  padding: var(--space-4);
  border: 1px solid var(--success-border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.call-run-toast h3 { margin: 0 0 4px; font-size: 16px; }
.call-run-toast p { margin: 0; color: var(--muted-text); font-size: 14px; }
.call-run-toast-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* Poikkeus vakiorajoista 640 / 768 / 1024. Soittokierroksen kolme saraketta
   tarvitsevat noin 1100 px ollakseen luettavia, joten raja tulee sisallosta
   eika skaalasta. Muut rajat noudattavat vakiosarjaa. */
@media (max-width: 1100px) {
  .call-run-columns { grid-template-columns: 1fr; }
  .call-run-toast { left: var(--space-4); right: var(--space-4); max-width: none; }
  /* Vahvistus ei saa jaada alapalkin (56 px + turvamarginaali) alle. */
  .call-run-toast { bottom: 104px; }
  .call-run-toast-actions { width: 100%; }
  .call-run-toast-actions .button { flex: 1; }
  .call-run-actions .button { flex: 1; }
  .call-run-next { flex-basis: 100%; order: -1; }
}

/* Soittokierroksen vaihepolku: nakyy vain kapealla naytolla, jossa sarakkeet
   naytetaan yksi kerrallaan. Sama kolmen vaiheen malli kuin asiakaswizardissa. */
.call-run-steps { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--space-3); }
.call-run-step {
  flex: 1;
  min-width: 90px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font-weight: var(--weight-medium);
  cursor: pointer;
}
.call-run-step.is-active { background: var(--primary); border-color: var(--primary); color: var(--primary-text); }
@media (max-width: 1100px) {
  .call-run-columns[data-step="1"] .call-run-column:not([data-step-index="1"]),
  .call-run-columns[data-step="2"] .call-run-column:not([data-step-index="2"]),
  .call-run-columns[data-step="3"] .call-run-column:not([data-step-index="3"]) { display: none; }
}
:root[data-theme="dark"] .call-run-step.is-active {
  color: var(--primary);
  background: var(--soft-green);
  border-color: var(--success-border);
}

/* Sähköpostimarkkinointi: kampanjan asetukset vasemmalle ja editori
   oikealle, jotta rajaus ja sisältö näkyvät samalla kertaa. Kapealla
   näytöllä osiot menevät allekkain. */
.campaign-layout {
  display: grid;
  grid-template-columns: minmax(240px, 300px) 1fr;
  gap: 16px;
  align-items: start;
}

@media (max-width: 1024px) {
  .campaign-layout { grid-template-columns: 1fr; }
}

.campaign-editor {
  min-height: 640px;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  overflow: hidden;
}

/* Editorin oma palikkapaneeli on oletuksena prosenttileveä, jolloin
   palikoiden nimet katkeavat kapeassa sarakkeessa. Kiinteä leveys pitää
   ne luettavina ja jättää muun tilan itse viestille. */
.campaign-editor .gjs-pn-views-container { width: 190px; }
.campaign-editor .gjs-cv-canvas { width: calc(100% - 190px); }
.campaign-editor .gjs-block { min-height: auto; padding: 8px 4px; font-size: 0.72rem; }

.campaign-preview-frame { width: 100%; min-height: 640px; border: 0; background: #fff; }

/* DNS-tietue on pitkä merkkijono, joka pitää voida kopioida kokonaan:
   se katkaistaan riviltä eikä piiloteta. */
.dns-record { align-items: start; }

.dns-value {
  overflow-wrap: anywhere;
  font-size: 0.85rem;
  color: var(--muted-text, var(--muted-cool));
}
/* Verkkolomakkeen upotusrivi asetuksissa: valmiiksi valittavissa oleva
   tekstikentta, jotta rivin voi kopioida yhdella nappaimistokomennolla. */
.lead-form-row .lead-form-embed {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--muted-text);
}

.lead-form-row .lead-form-embed textarea {
  width: 100%;
  margin-top: 0.25rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  resize: vertical;
}

/* Asiakaskortin muistiinpanokentta: tanne paatyy se mita asiakas on itse
   kertonut ja mita muualta on tuotu. Rivinvaihdot sailytetaan, koska teksti on
   usein lista eika yhtenaista virketta. */
.customer-notes-card {
  margin-top: 1rem;
  padding: 0.875rem 1rem;
  background: var(--surface-muted, rgba(127, 127, 127, 0.06));
  border-radius: var(--radius-small);
}

.customer-notes-card h3 {
  margin: 0 0 0.35rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-text);
}

.customer-notes-body {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Easoft-kortin valiotsikot erottavat asetukset, kytkimet ja ajohistorian. */
.easoft-subheading {
  margin: 1.25rem 0 0.5rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-text);
}

/* Kuvakirjasto: ruudukko jossa kuva on kortin pääsisältö. Kapealla näytöllä
   kortteja mahtuu vähemmän, mutta kuva pysyy luettavan kokoisena. */
.image-library {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.image-card {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  overflow: hidden;
  background: var(--surface);
}

.image-card img { display: block; width: 100%; height: 120px; object-fit: cover; }

.image-card figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  font-size: 0.85rem;
}

.image-card figcaption small { color: var(--muted-text, var(--muted-cool)); }

/* Sekvenssin askeleet ovat omia kortteja, jotta ketjun kulku näkyy
   järjestyksessä ja jokaisen askeleen voi tallentaa erikseen. Viestikenttä on
   tavallinen tekstialue: sekvenssiviesti näyttää asiakkaalle henkilökohtaiselta
   sähköpostilta, joten siinä ei ole taittoa muotoiltavaksi. */
.sequence-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.sequence-step-body {
  display: block;
  margin-top: 8px;
}

.sequence-step-body textarea {
  width: 100%;
  min-height: 140px;
  font: inherit;
  resize: vertical;
}

/* Viestipohjan esikatselu ajetaan hiekkalaatikossa: pohjan sisältö on HTML:ää,
   eikä sitä saa ajaa CRM:n omassa sivussa. Kehys näyttää viestin sellaisena
   kuin asiakas sen näkee. */
.template-preview {
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  overflow: hidden;
}

.template-preview-frame { display: block; width: 100%; min-height: 420px; border: 0; background: #fff; }

/* Paivan jono. Pistemaara on rivin ankkuri vasemmalla, perustelut sen
   vieressa. Luku yksin ei riita: myyja ei soita listalle jota ei
   perustella, joten jokaisella rivilla on enintaan kolme syyta. */
.warm-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-4) var(--space-2);
  border-bottom: 1px solid var(--border);
}
.warm-row:last-child { border-bottom: 0; }
/* Jarjestysluku pistemaaran tilalla. JP 15.8.2026: piste "145" ei kerro
   myyjalle mitaan, koska mikaan ruudulla ei kerro mihin sita verrataan.
   Jarjestysluku kertoo saman asian ilman asteikkoa: tama on ensimmainen. */
.warm-rank {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--space-2);
  color: var(--muted-text);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}
.warm-row:first-child .warm-rank {
  color: var(--warn-text-strong);
  background: var(--soft-yellow);
  border-color: var(--warn-border);
}
/* Kehotus on lause, ei luku: myyja lukee mita tehdaan. */
.warm-action {
  margin: var(--space-1) 0 0;
  color: var(--text);
  font-weight: var(--weight-semibold);
}
.warm-row-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.warm-main { display: grid; gap: var(--space-1); min-width: 0; }
.warm-name { justify-self: start; min-height: 44px; font-weight: var(--weight-semibold); }
.warm-reasons { margin: var(--space-1) 0 0; padding-left: 1.1em; color: var(--muted-text); }
.warm-reasons li { margin-bottom: 2px; }
@media (max-width: 640px) {
  .warm-row { grid-template-columns: 54px minmax(0, 1fr); }
  .warm-row > a { grid-column: 2; justify-self: start; }
}

/* --- 2026-ulkoasu: sivupalkin kehys --- */

/* Yritystunnus on nyt taytetty brandivari eika harmaa laatikko: se on
   ainoa paikka jossa vari saa olla pelkka tunniste. */
.brand-mark { border: 0; }

/* Hakupikanappain. Haku on jo otsikkorivilla, mutta sivupalkin rivi kertoo
   etta siihen paasee myos nappaimistolla. */
.sidebar-search {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  width: 100%;
  min-height: 44px;
  margin-top: var(--space-5);
  padding: 0 var(--space-3);
  color: var(--muted-text);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  cursor: pointer;
  text-align: left;
  font-size: .95rem;
}
.sidebar-search:hover { border-color: var(--border-input); color: var(--text); }
.sidebar-search span { flex: 1 1 auto; }
.sidebar-search kbd {
  padding: 1px 6px;
  color: var(--muted-text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  font-family: inherit;
  font-size: .8rem;
  font-weight: var(--weight-semibold);
}

/* Kuvake kertoo rivin heti, teksti kertoo sen tarkasti. UX_PRINCIPLES 2:
   ikoni ei korvaa toimintoa kuvaavaa tekstia, joten molemmat naytetaan. */
.navigation-button { display: flex; gap: var(--space-3); align-items: center; }
.navigation-icon { flex: 0 0 auto; color: var(--muted-text); }
.navigation-button.is-selected .navigation-icon { color: var(--primary-text); }
.navigation-button > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Valittu rivi on pehmea brandipinta eika taytetty painike: taytetty vihrea
   on varattu paatoiminnolle, ei navigaation tilalle. */
.navigation-button.is-selected {
  color: var(--primary);
  background: var(--soft-green);
  font-weight: var(--weight-bold);
}
.navigation-button.is-selected .navigation-icon { color: var(--primary); }

/* --- 2026-ulkoasu: tyopoyta --- */

/* Seuraava teko on paivan ainoa lahtokohta, joten se saa oman pinnan ja
   pehmean varjon. Muut lohkot jaavat litteiksi, jotta korotus tarkoittaa
   jotain. */
.next-action { border-radius: var(--radius-large); }

/* Mittarit ovat kortteja, eivat pelkkia lukuja tyhjalla. Savy seuraa mittarin
   merkitysta, ei paikkaa ruudulla: tarjousmittari puuttuu kun tarjousmoduuli
   on pois paalta, joten jarjestykseen sidottu vari vaihtuisi yrityksesta
   toiseen. Kortin oma vari kantaa myos otsikon, aputekstin ja kehityskayran,
   koska yksi harmaa ei toimisi kolmella eri pinnalla. */
.metric {
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-card);
}
.metric-leads { color: var(--metric-1-text); background: var(--metric-1-surface); }
.metric-offers { color: var(--metric-2-text); background: var(--metric-2-surface); }
.metric-won { color: var(--metric-3-text); background: var(--metric-3-surface); }
.metric > span, .metric small { color: inherit; }
.metric small { opacity: .82; }
.metric .spark path { stroke: currentColor; }
.metric .spark circle { fill: currentColor; }
.metric > span:first-child { font-weight: var(--weight-medium); }
.metric strong, .metric b {
  font-size: 1.9rem;
  font-weight: var(--weight-bold);
  letter-spacing: -.025em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Tehtavarivi saa vasemman reunapalkin joka kertoo tilan myos ilman varia.
   Myohassa oleva rivi erottuu muodolla, ei pelkalla savylla. */
.task-row {
  position: relative;
  padding-left: var(--space-4);
  border-radius: 0 var(--radius-small) var(--radius-small) 0;
}
.task-row::before {
  content: "";
  position: absolute;
  top: var(--space-2);
  bottom: var(--space-2);
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: transparent;
}
.task-row.is-late::before { background: var(--warn-border); }
.task-row:hover { background: var(--surface-soft); }

/* --- Kontekstipalsta --- */

/* Palsta naytetaan vain kun sille on aidosti tilaa. Kapeammalla naytolla
   tyosarake on tarkeampi, ja palsta piilotetaan kokonaan: sen sisalto on
   tilannekuvaa, ei tyokalu jota ilman ei parjaa. 1100 px on sama raja jota
   soittokierros kayttaa, joten uutta nayttorajaa ei tarvita. */
.context-rail { display: none; }
@media (min-width: 1100px) {
  .application-shell.has-context { grid-template-columns: 232px minmax(0, 1fr) 300px; }
  .application-shell.has-context .context-rail {
    display: grid;
    gap: var(--space-6);
    align-content: start;
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
    padding: var(--space-7) var(--space-5);
    background: var(--surface);
    border-left: 1px solid var(--border);
  }
}
.context-block h2 {
  margin-bottom: var(--space-3);
  color: var(--muted-text);
  font-size: .8rem;
  font-weight: var(--weight-bold);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.context-figure {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  margin-bottom: var(--space-1);
}
.context-figure b {
  font-size: 1.75rem;
  font-weight: var(--weight-bold);
  letter-spacing: -.025em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.context-figure span { color: var(--muted-text); font-size: .9rem; }
.context-note { margin: 0; color: var(--muted-text); font-size: .9rem; }
.context-list { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.context-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  min-height: 44px;
  padding: var(--space-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-small);
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
}
.context-row:hover { background: var(--surface-soft); border-color: var(--border); }
.context-rank {
  display: grid;
  place-items: center;
  min-width: 36px;
  padding: 3px var(--space-2);
  color: var(--muted-text);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  font-size: .85rem;
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}
/* Syy saa kayttaa kaksi rivia. Yhdelle riville katkaistuna se paattyi
   kesken lausetta eika kertonut miksi asiakas on listalla. */
.context-row-main small.context-reason {
  white-space: normal;
  overflow: visible;
  line-height: 1.35;
}
.context-row-main { display: grid; gap: 1px; min-width: 0; }
.context-row-main strong { font-size: .9rem; font-weight: var(--weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.context-row-main small { color: var(--muted-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Myohassa on huomio, ei virhe eika onnistuminen. */
.context-late { color: var(--warn-text-strong); font-weight: var(--weight-semibold); }
.context-link { margin-top: var(--space-3); justify-self: start; }

/* ============================================================
   2026-ulkoasu, komponentit
   Varit ja kehys vaihtuivat 1.123.0:ssa, mutta komponentit jaivat
   ennalleen. Tama lohko vie loput layout-ehdotuksesta lapi.
   ============================================================ */

/* --- Myyntiputken kortti --- */
/* Kortti oli reunaviivallinen rivi, jonka merkit latoutuivat allekkain:
   jokainen liidi vei kolme korkeaa rivia ja sarakkeeseen mahtui nelja
   korttia. Nyt kortti on rajattu laatikko ja merkit ovat samalla rivilla,
   jolloin samaan tilaan mahtuu kaksi kertaa enemman tyota. */
.deal-card {
  padding: var(--space-3) var(--space-3) var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft, 0 1px 2px rgb(26 29 26 / 5%));
}
.deal-card:hover { border-color: var(--border-strong); }
.deal-card.attention { padding: var(--space-3); }
.deal-card > button[data-open-contact] { padding: 0 30px 0 0; }
.deal-card strong { font-size: .95rem; }
.deal-card small { margin: 2px 0 0; }
/* Merkit samalle riville: verkkokauppa ja paivays ovat kaksi pienta tietoa,
   eivat kaksi riviä. */
.deal-meta { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.deal-site-chip, .deal-date-chip {
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  font-size: .8rem;
  font-weight: var(--weight-semibold);
}
/* Sarakkeen luku on hiljainen tunniste, ei tilaviesti: se ei ole vihrea. */
.stage-heading span {
  background: var(--panel-tint);
  color: var(--muted-text);
  font-size: .85rem;
}
.pipeline-stage { gap: var(--space-3); }
.deal-select { top: var(--space-3); right: var(--space-3); }

/* --- Seuraava teko --- */
/* Hero on paivan ainoa lahtokohta. Se saa oman pinnan, pehmean varjon ja
   selkean pystyjarjestyksen: tila, mita tehdaan, kenelle, ja vasta sitten
   painike. */
/* Seuraava tehtava on tyopoydan tarkein asia, joten se on taytetty pinta eika
   hiusviivalla rajattu laatikko. Ulkoasu maaritellaan tassa, kortin
   viimeisessa saannossa: aiemmat saannot palauttaisivat reunan ja sivun
   taustan. Tekstivarit tulevat kortin omista saannoista ylempaa. */
.next-action {
  gap: var(--space-4) var(--space-5);
  padding: var(--space-6);
  color: var(--hero-text);
  background: var(--hero-surface);
  border: 1px solid transparent;
  box-shadow: var(--shadow-card);
}
.next-action .eyebrow {
  font-size: .8rem;
  font-weight: var(--weight-bold);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.next-action h2 { font-size: 1.35rem; letter-spacing: -.015em; }

/* --- Tehtavarivi --- */
/* Rivi on kortti eika taulukon rivi: nimi ja asiakas vasemmalle, numero ja
   toiminnot oikealle, ja tila reunapalkkina. */
.task-row {
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.task-row strong { font-size: .95rem; font-weight: var(--weight-semibold); }
.task-row small { color: var(--muted-text); }
.task-phone { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- 2026-ulkoasu, mitatut erot demoon --- */
/* Vertasin tuotantoa ja layout-ehdotusta rinnakkain selaimessa ja mittasin
   vastaavien elementtien lasketut tyylit. Nama ovat ne erot jotka loytyivat. */

/* Sivun otsikko oli 23,2 px, ehdotuksessa 28 px. Otsikon pitaa erottua
   leipatekstista selvasti, muuten nakymalla ei ole karkea. */
h1 { font-size: clamp(1.55rem, 2.4vw, 1.75rem); letter-spacing: -.022em; }

/* Navigaatio oli 16 px ja lihavuus 720. Ehdotuksessa 15 px ja 640: rivi on
   tunniste, ei otsikko, eika sen pida kilpailla sisallon kanssa. */
.navigation-button { font-size: .95rem; font-weight: var(--weight-semibold); }
.navigation-button.is-selected { font-weight: var(--weight-semibold); }
.sidebar { padding: var(--space-5) var(--space-3) var(--space-4); }
.application-shell { grid-template-columns: 244px minmax(0, 1fr); }
.application-shell.has-context { grid-template-columns: 244px minmax(0, 1fr) 300px; }

/* Hero: tila on pieni pilleri silmarivilla, ei jattikokoinen merkki.
   Aiempi 36 px "Myohassa" vei enemman tilaa kuin itse tehtava. */
.next-action { padding: var(--space-5); gap: var(--space-4); }
.next-action-top { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; width: 100%; }
.next-action-top .eyebrow { width: auto; margin: 0; }
.next-action-time { font-size: 1.05rem; font-weight: var(--weight-semibold); letter-spacing: 0; }
.next-action-time.is-late {
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: .85rem;
}
.next-action-time.is-late::before { font-size: 1em; }
.next-action-body { flex: 1 1 100%; }
.next-action h2 { font-size: 1.375rem; font-weight: var(--weight-semibold); }

/* Mittarin luku oli liian lahella otsikkoa ja liian pieni. */
.metric { gap: var(--space-2); }

/* --- Asiakaskortin taitto --- */
/* Kortilla oli 13 lohkoa auki yhta aikaa. Nyt nakyvissa on se mita soitto
   tarvitsee, ja loput ovat nimettyjen taitosten takana.
   W3C:n COGA-ohjeistus ja Older Users -aineisto varoittavat piilotetusta
   sisallosta juuri talle kayttajaryhmalle, joten taitin on oikea 44 pikselin
   painike, otsikko kertoo maaran, eika mikaan aukea hoverista. */
.customer-fold {
  margin-top: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.customer-fold > summary {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-4);
  color: var(--text);
  cursor: pointer;
  font-size: .95rem;
  font-weight: var(--weight-semibold);
  list-style: none;
  border-radius: var(--radius);
}
.customer-fold > summary::-webkit-details-marker { display: none; }
/* Nuoli kertoo suunnan, teksti kertoo sisallon. Nuoli ei ole ainoa vihje. */
.customer-fold > summary::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-right: var(--space-1);
  border-right: 2px solid var(--muted-text);
  border-bottom: 2px solid var(--muted-text);
  transform: rotate(-45deg);
  transition: transform var(--transition);
}
.customer-fold[open] > summary::before { transform: rotate(45deg); }
.customer-fold > summary:hover { background: var(--surface-soft); }
.fold-count {
  margin-left: auto;
  padding: 1px 8px;
  color: var(--muted-text);
  background: var(--panel-tint);
  border-radius: var(--radius-pill);
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
}
.customer-fold-body { padding: 0 var(--space-4) var(--space-4); }
.customer-fold-body .customer-facts { margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .customer-fold > summary::before { transition: none; }
}

/* --- Asiakaskortin seuraava teko --- */
/* Kortti avautuu siihen mita seuraavaksi tehdaan. Puhelinnumero on itse
   painikkeessa, koska soittaminen on se mita myyja tulee kortille tekemaan. */
.customer-next {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow);
}
.customer-next h2 { margin: 0; font-size: 1.35rem; font-weight: var(--weight-semibold); letter-spacing: -.015em; }
.customer-next-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }
.customer-next-actions .button { font-variant-numeric: tabular-nums; }

/* --- Asiakaskortin seuraava teko --- */
/* Kortti avautuu siihen mita seuraavaksi tehdaan. Puhelinnumero on itse
   painikkeessa, koska soittaminen on se mita myyja tulee kortille tekemaan.
   Aiemmin seuraava tehtava oli yksi rivi vasemmassa palstassa ja
   soittaminen vaati erillisen pienen napin muiden joukossa. */
.customer-next {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow);
}
.customer-next h2 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: var(--weight-semibold);
  letter-spacing: -.015em;
}
.customer-next-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }
.customer-next-actions .button { font-variant-numeric: tabular-nums; }

/* --- Tehtavarivin tilamerkit --- */
/* Tila kerrotaan sanoina ja muotona, ei pelkalla varilla. Myohassa on
   huomio, tanaan ja huomenna ovat tietoa, ja puuttuva numero on este. */
.pill {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 2px 9px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: .85rem;
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}
.pill-late { color: var(--warn-text-strong); background: var(--soft-yellow); border-color: var(--warn-border); }
.pill-info { color: var(--info-text); background: var(--info-soft); border-color: var(--info-border); }
.pill-quiet { color: var(--muted-text); background: var(--surface-soft); border-color: var(--border); }

.task-row-title { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.task-row-actions { display: flex; gap: var(--space-2); justify-content: flex-end; }

/* Tiimin myohassa olevat: oma jono voi olla hoidettu vaikka tiimilla on
   tyota. Ilman tata riviä myyja ei nae sita koskaan. */
.task-list-team {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: var(--space-4) var(--space-2) 0;
  border-top: 1px solid var(--border);
  color: var(--muted-text);
}
.task-list-team:empty { display: none; }
.task-list-team b { color: var(--text); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }

/* --- Komentopaletti --- */
/* Myyja kirjoittaa mita haluaa, ja sama lista sisaltaa komennot ja
   asiakkaat. Rivit ovat 44 pikselia, koska paletti on myos kosketuksella
   kaytettava eika vain nappaimiston oikotie. */
.palette {
  width: min(560px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-large);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--modal-shadow);
  margin-top: 12vh;
}
.palette-input {
  width: 100%;
  min-height: 56px;
  padding: 0 var(--space-5);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius-large) var(--radius-large) 0 0;
  font-size: 1.05rem;
}
.palette-input::placeholder { color: var(--muted-text); }
.palette-list {
  list-style: none;
  margin: 0;
  padding: var(--space-2);
  display: grid;
  gap: 1px;
  max-height: 46vh;
  overflow-y: auto;
}
.palette-row {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 0 var(--space-3);
  background: transparent;
  border: 0;
  border-radius: var(--radius-small);
  cursor: pointer;
  text-align: left;
  color: inherit;
  font-size: .95rem;
}
.palette-row:hover, .palette-row.is-active { background: var(--surface-soft); }
.palette-row.is-active { box-shadow: inset 0 0 0 1px var(--border-strong); }
.palette-row > span:first-child { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-hint-text { flex: 0 0 auto; color: var(--muted-text); font-size: .85rem; }
.palette-empty { padding: var(--space-4) var(--space-3); color: var(--muted-text); }
.palette-hint {
  margin: 0;
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border);
  color: var(--muted-text);
  font-size: .85rem;
}

/* Markkinointiesto on tieto, ei kielto. Punainen on varattu sille mika
   oikeasti estaa yhteydenoton. */
.alert-note {
  padding: var(--space-3) var(--space-4);
  color: var(--info-text);
  background: var(--info-soft);
  border-left: 4px solid var(--info-border);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
}

/* Kehityskayra mittarissa. Kayra ei korvaa lukua vaan kertoo suunnan, joten
   sama tieto luetaan aina myos numerona ja tekstina sen vieressa. */
.metric-foot {
  display: flex;
  gap: var(--space-3);
  align-items: flex-end;
  justify-content: space-between;
}
.metric-foot small { min-width: 0; }
.spark { flex: 0 0 auto; overflow: visible; }

/* --- Bambumies-tyyli: sivupalkki ja listat --- */
/* Tyopoydan kortit muutettiin 1.135.2:ssa. Nama ovat loput erot hyvaksyttyyn
   demoon: sivupalkin rivit, tehtavalista ja pyoristykset. Vertasin demoa ja
   tuotantoa rinnakkain samalla leveydella ja muutin ne kohdat jotka erosivat.
   Saannot ovat tiedoston lopussa, koska sama valitsin maaritellaan aiemmin
   useassa kohdassa ja aiemmat maaritykset kumoaisivat nama. */

/* Sivupalkin ryhmaotsikko on tunniste, ei valiotsikko: se oli 15,2 px ja
   yhta lihava kuin rivit, jolloin se kilpaili niiden kanssa. */
.navigation-heading {
  margin: var(--space-5) var(--space-3) var(--space-2);
  font-size: .78rem;
  letter-spacing: .12em;
}

/* Navigaatiorivi on vaimea kunnes se on valittuna. Valittu rivi erottuu
   kolmella tavalla yhta aikaa: pehmea brandipinta, brandivarinen teksti ja
   lihavuus. Vari ei siis kanna tilaa yksin, ja app.js merkitsee rivin lisaksi
   aria-current-attribuutilla. Kontrasti mitattu: 6,86:1 pehmealla pinnalla. */
.navigation-button {
  color: var(--muted-text);
  border-radius: var(--radius);
  font-weight: var(--weight-medium);
}
.navigation-button:hover:not(:disabled) { color: var(--text); background: var(--surface-soft); }
.navigation-button.is-selected {
  color: var(--primary);
  background: var(--soft-green);
  font-weight: var(--weight-bold);
}
.navigation-button.is-selected .navigation-icon { color: var(--primary); }

/* Tehtavalista on kortti kuten muutkin lohkot, ei irrallisia rivaeja sivun
   taustalla. Viimeinen rivi ei piirra erotinta kortin reunaa vasten. */
.task-list {
  padding: 0 var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-card);
}
.task-list .task-row:last-child { border-bottom: 0; }

/* Painikkeet ja tilamerkit seuraavat korttien pyoristysta. */
.button { border-radius: var(--radius); }
.button-small { border-radius: var(--radius-small); }
.status-label { border-radius: var(--radius-pill); }

/* Otsikkorivin kayttajatunnus. Nimikirjaimet, ei kuvaa: nimi on jo tiedossa
   eika kuvien lataamiseen ole syyta. Tunnus on painike, joka vie omiin
   asetuksiin, joten se on myos 44 pikselin kosketuskohde. */
.user-avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  color: var(--primary-text);
  background: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 50%;
  font-size: .95rem;
  font-weight: var(--weight-bold);
  letter-spacing: .02em;
  cursor: pointer;
}
.user-avatar:hover { background: var(--primary-hover); border-color: var(--primary-hover); }

/* Kuittaussyyt: "jono oli väärässä" erottuu, koska juuri ne riivit kertovat
   mitä säännöistä pitää korjata. */
.close-reason-row {
  padding: 12px 14px;
  border: 1px solid var(--border-color, var(--border-cool));
  border-radius: var(--radius-small);
  background: var(--surface-color, var(--surface));
}
.close-reason-row-queue { border-left: 3px solid var(--danger); }
.close-reason-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.close-reason-note { margin: 6px 0 0; }
.close-reason-meta { margin: 6px 0 0; opacity: .8; }

/* Kampanjaraportin ryhmaotsikot ja rajan ylitys. Suhdeluku kertoo enemman
   kuin kappalemaara, joten se on samalla rivilla luvun kanssa pienemmalla. */
.data-group-title {
  margin: var(--space-5) 0 var(--space-1);
  font-size: 0.8rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-text);
}
.data-group-title:first-child { margin-top: 0; }
.status-warning { color: var(--danger); font-weight: var(--weight-bold); }

/* Sahkopostimarkkinoinnin lahetyskalenteri: kuukausiruudukko, josta nakee
   yhdella silmayksella mitka paivat ovat jo varattuja. */
.campaign-calendar .calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.campaign-calendar .calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-1);
}

.campaign-calendar .calendar-weekday {
  padding-bottom: var(--space-1);
  color: var(--muted-text);
  font-size: .9rem;
}

.campaign-calendar .calendar-day {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-height: 72px;
  padding: var(--space-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  font-size: .9rem;
}

.campaign-calendar .calendar-day-empty { border: none; }

.campaign-calendar .calendar-day-weekend { background: var(--surface-soft); }

.campaign-calendar .calendar-day-past { opacity: .55; }

.campaign-calendar .calendar-day-today {
  border-color: var(--primary);
  border-width: 2px;
}

.campaign-calendar .calendar-day-busy { background: var(--soft-green); }

.campaign-calendar .calendar-entry {
  display: block;
  overflow: hidden;
  width: 100%;
  padding: var(--space-1) var(--space-1);
  border: none;
  border-radius: var(--radius-xs);
  background: var(--primary);
  color: var(--primary-text);
  font-size: .9rem;
  line-height: 1.3;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

@media (max-width: 640px) {
  .campaign-calendar .calendar-day { min-height: 56px; }
}

/* Ostohistoria kuittausnappien vieressa ja saman summan toistuvat tilaukset.
   Kumpikaan ei estä mitaan: ne kertovat mita myyja on kirjaamassa. */
.task-purchase {
  padding: 3px 8px;
  border-radius: var(--radius-small);
  background: var(--surface-soft);
  color: var(--muted-text);
  font-size: .85rem;
  white-space: nowrap;
}
.task-purchase-none { background: var(--danger-soft); color: var(--danger-strong); }
.webshop-order-duplicate {
  margin: var(--space-2) 0 0;
  padding: var(--space-2);
  border-left: 3px solid var(--danger-border);
  background: var(--danger-soft);
  color: var(--danger-strong);
  font-size: .9rem;
}

/* Yhteiskuittauksen palkki. Ilmestyy vasta kun rivejä on valittu, jotta
   lista näyttää samalta kuin ennen. */
.bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-3) 0;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: var(--surface-soft);
}
.bulk-bar[hidden] { display: none; }
.task-pick { display: inline-flex; align-items: center; min-height: 44px; }
.task-pick input { width: 20px; height: 20px; }