/* ===========================================================================
   ASIAKKAAT-NÄKYMÄ · lasi A 2.2 -sopimuksella (BRIEF A1, 23.9.2026)
   Web designerin malli, variantti A (Seppo valitsi 23.9.2026). Ladataan
   maksut.css:n JÄLKEEN. Lähde: web-design-agentti/output/asiakasrekisteri/
   assets/asiakkaat.css — variantin B luokat (.ak-b-*, .ak-arkki-*) on
   jätetty pois, koska tuotantoon toteutettiin vain variantti A.

   SITOVAT RAJAT (sama kuin maksut.css / rakennukset.css)
   - Ei yhtään uutta väriä: kaikki arvot lasi.css:n / dashboard.css:n tokeneista.
   - Ainoa korostus on --act (liukuväri) ja se on VAIN päätoiminnossa:
     tyhjässä tilassa "Tuo tiedosto", esikatselussa "Tuo", virheessä
     "Valitse toinen tiedosto". Listatilassa ei yhtään --act-pintaa.
   - Lupa ei erotu pelkällä värillä (WCAG 1.4.1): ikoni + teksti + täyttö.
   - Jokainen grid-solu min-width:0 (vaakavuoto piiloutui ennen overflow:
     hiddenin taakse, muisti 11.9.2026).
   - Ei backdrop-filteriä.
   Luokkaetuliite ak- (asiakkaat).
   =========================================================================== */

/* hidden-attribuutti voittaa luokan display-arvon (.ak-rivi { display:grid }
   ohitti sen ja poiston vahvistus näkyi listatilassa, mitattu 23.9.). */
#view-asiakkaat [hidden], .ak-arkki-tausta[hidden] { display: none !important; }

/* ---------- Kolme lukua ---------- */
.ak-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.ak-stats .stat { min-width: 0; }
.ak-stats .stat .delta { font-variant-numeric: tabular-nums; }
.ak-stats .num { font-variant-numeric: tabular-nums; }
/* Ikonilaatat oikeilla merkityksillä (lasi.css:n oletukset ovat kirje ja kello). */
.ak-stats .stat:nth-child(1) { --l-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BCB4A7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3 20c0-3.3 2.7-5.5 6-5.5s6 2.2 6 5.5'/%3E%3Cpath d='M16 5.2a3 3 0 0 1 0 5.6M18 14.8c1.8.6 3 2.4 3 5.2'/%3E%3C/svg%3E"); }
.ak-stats .stat:nth-child(2) { --l-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BCB4A7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); }
.ak-stats .stat:nth-child(3) { --l-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BCB4A7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3 20c0-3.3 2.7-5.5 6-5.5s6 2.2 6 5.5'/%3E%3Cpath d='M19 8v6M16 11h6'/%3E%3C/svg%3E"); }

/* ---------- Paneelin otsikkorivi: otsikko + tuontinappi ---------- */
.ak-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ak-head > div { min-width: 0; }
.ak-head h3 { margin: 0; }
.ak-head .eyebrow { margin-top: 4px; display: block; }
.ak-tuo-ohje { font-size: 12.5px; color: var(--ink-3); margin: 0; }

/* ---------- Lupasuodin (Simo 23.9.2026: jako markkinointiluvan mukaan) ----------
   Sama --act-kielto kuin koko tiedostossa: aktiivinen tila EI saa --act-
   pintaa, koska ollaan listatilassa. Erottuu täytöllä + lihavoinnilla,
   ei pelkällä värillä (WCAG 1.4.1, sama vaatimus kuin .ak-lupa yllä). */
.ak-suodin { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.ak-suodin-nappi {
  display: inline-flex; align-items: center; min-height: 36px; padding: 7px 14px;
  border-radius: var(--r-pill); border: 1px solid var(--l-edge); background: transparent;
  color: var(--ink-2); font-size: 13.5px; font-weight: 500; font-variant-numeric: tabular-nums;
  cursor: pointer; transition: background .14s ease-out, border-color .14s ease-out, color .14s ease-out;
}
.ak-suodin-nappi:hover { border-color: var(--d-hair-2); color: var(--ink); }
.ak-suodin-nappi:focus-visible { outline: 2px solid var(--act-line); outline-offset: 2px; }
.ak-suodin-nappi[aria-pressed="true"] {
  background: var(--l-card-2); border-color: transparent; color: var(--ink); font-weight: 700;
  box-shadow: inset 0 1px 0 var(--l-gloss);
}
.ak-suodin-luku { margin-left: 6px; color: var(--ink-3); font-weight: 500; }
.ak-suodin-nappi[aria-pressed="true"] .ak-suodin-luku { color: var(--ink-2); }
.ak-lyhyt { display: none; }
/* EI 14px-sadetta vastaavaa tokenia: --r-field on 12px, --r-panel 18/20px -
   kumpikaan ei ole "noin 14px", joten kiintea arvo (web designer, 23.9.2026). */
@media (max-width: 480px) {
  .ak-suodin { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .ak-suodin-nappi { flex-direction: column; justify-content: center; gap: 2px; padding: 8px 6px; min-height: 52px; border-radius: 14px; }
  .ak-suodin-luku { margin-left: 0; }
  .ak-pitka { display: none; }
  .ak-lyhyt { display: inline; }
}

/* ---------- Haku ---------- */
.ak-haku { position: relative; min-width: 0; margin: 4px 0 8px; }
.ak-haku svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.ak-haku .input { width: 100%; min-height: 44px; padding: 10px 14px 10px 42px; font-size: 15px; }
.ak-maara { font-size: 12.5px; color: var(--ink-3); margin: 0 0 8px; font-variant-numeric: tabular-nums; }

/* ---------- Lupamerkki: ikoni + teksti + täyttö ---------- */
.ak-lupa { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ak-lupa svg { flex: none; }

/* ---------- Lista (variantti A) ----------
   Työpöytä: nimi+yhteys | käynnit | viimeisin | lupa | poisto.
   Otsakerivi on vain työpöydällä; mobiilissa jokainen luku kantaa oman
   sanansa ("7 käyntiä", "viimeksi 12.8."). */
.ak-lista { display: grid; min-width: 0; }
.ak-rivi, .ak-otsake {
  display: grid; grid-template-columns: minmax(0, 1fr) 88px 112px 112px 148px 44px;
  align-items: center; gap: 16px; min-width: 0;
  padding: 12px 4px; border-top: 1px solid var(--l-edge);
}
.ak-otsake { padding: 4px 4px 8px; border-top: 0; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.ak-rivi > *, .ak-otsake > * { min-width: 0; }
.ak-meta { display: contents; }
.ak-nimi { font-family: var(--l-head); font-weight: 600; font-size: 14.5px; color: var(--ink); overflow-wrap: anywhere; }
.ak-yht { display: grid; gap: 2px; margin-top: 4px; font-size: 13px; color: var(--ink-2); }
.ak-yht span { overflow-wrap: anywhere; }
.ak-kaynnit, .ak-pvm { font-size: 13.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ak-kaynnit b { font-weight: 600; color: var(--ink); }
.ak-pvm.is-tyhja { color: var(--ink-3); }
.ak-m { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ak-poista {
  width: 44px; height: 44px; display: inline-grid; place-items: center;
  border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink-3); cursor: pointer;
  transition: background .14s ease-out, color .14s ease-out;
}
.ak-poista:hover { background: var(--l-card-2); color: var(--ink); }
.ak-poista:focus-visible { outline: 2px solid var(--act-line); outline-offset: 2px; }

/* Kiellä markkinointi -kytkin (jono #509 M5). Sama pillimuoto ja ääriviiva kuin
   .ak-suodin-nappi; tila kerrotaan sanalla ja aria-pressedillä, ei vain värillä
   (WCAG 1.4.1). Päällä-tilassa vain yksi sävy, sama varoitusreunus kuin
   .ak-vahvista: ei uutta korostusväriä. Kosketuskohde 44 px. */
.ak-kielto {
  justify-self: start; box-sizing: border-box; width: 100%; min-height: 44px; padding: 6px 12px;
  border: 1px solid var(--l-edge); border-radius: var(--r-pill); background: transparent;
  font: inherit; font-size: 12.5px; font-weight: 500; line-height: 1.25; text-align: center; color: var(--ink-2); cursor: pointer;
  transition: background .14s ease-out, color .14s ease-out, border-color .14s ease-out;
}
.ak-kielto:hover { border-color: var(--d-hair-2); color: var(--ink); }
.ak-kielto:focus-visible { outline: 2px solid var(--act-line); outline-offset: 2px; }
.ak-kielto[aria-pressed="true"] {
  background: var(--l-inset); color: var(--ink); font-weight: 600;
  border-color: color-mix(in srgb, var(--alert) 45%, transparent);
}
.ak-kielto.is-varmista { border-color: var(--alert); }
.ak-kielto.is-virhe { color: var(--ink); border-color: var(--alert); }
.ak-kielto:disabled { opacity: .55; cursor: progress; }

/* Poiston vahvistus rivin sisällä (ei confirm()-ikkunaa). */
.ak-vahvista {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px;
  padding: 16px; border-radius: var(--r-field); background: var(--l-inset);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--alert) 45%, transparent);
}
.ak-vahvista p { margin: 0; font-size: 14.5px; color: var(--ink); min-width: 0; flex: 1 1 260px; }
.ak-vahvista .ak-napit { display: flex; gap: 8px; flex-wrap: wrap; }
/* Poistovirhe omalle rivilleen nappien alle (web designer, portti 10). */
.ak-vahvista .ak-virhe-rivi { flex: 1 1 100%; margin: 0; }

.ak-lisaa { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--l-edge); }
.ak-lisaa span { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ---------- Tyhjä tila (vasemmalle tasattu, ei keskitetty) ---------- */
.ak-tyhja { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px 20px; align-items: start; padding: 8px 0 4px; }
.ak-tyhja-ikoni {
  width: 48px; height: 48px; border-radius: var(--r-field); display: grid; place-items: center;
  background: var(--l-card-2); box-shadow: inset 0 1px 0 var(--l-gloss); color: var(--ink-2);
}
.ak-tyhja h3 { font-family: var(--l-head); font-weight: 600; font-size: 17px; margin: 2px 0 6px; color: var(--ink); text-wrap: balance; }
.ak-tyhja p { margin: 0; font-size: 14.5px; color: var(--ink-2); max-width: 46ch; }
.ak-tyhja .ak-napit { margin-top: 20px; display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; }

/* ---------- Esikatselu ---------- */
.ak-yhteenveto { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 4px 0 24px; }
.ak-luku { min-width: 0; padding: 16px; border-radius: var(--r-field); background: var(--l-card-2); box-shadow: inset 0 1px 0 var(--l-gloss); }
.ak-luku b { display: block; font-family: var(--l-num); font-weight: 500; font-size: 28px; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.ak-luku span { display: block; margin-top: 6px; font-size: 13px; color: var(--ink-2); line-height: 1.35; }

.ak-osio { padding: 20px 0 0; margin-top: 20px; border-top: 1px solid var(--l-edge); min-width: 0; }
.ak-osio:first-of-type { margin-top: 0; }
.ak-osio h4 { margin: 0 0 4px; font-family: var(--l-head); font-weight: 600; font-size: 14.5px; color: var(--ink); }
.ak-osio > p { margin: 0 0 12px; font-size: 13px; color: var(--ink-3); max-width: 60ch; }

.ak-hylatyt {
  list-style: none; margin: 0; padding: 4px 16px; display: grid;
  max-height: 232px; overflow-y: auto; border-radius: var(--r-field); background: var(--l-inset);
}
.ak-hylatyt li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-top: 1px solid var(--d-hair); font-size: 13.5px; color: var(--ink-2); }
.ak-hylatyt li:first-child { border-top: 0; }
.ak-hylatyt li b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ak-hylatyt:focus-visible { outline: 2px solid var(--act-line); outline-offset: 2px; }

.ak-sarakkeet { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ak-sarakkeet li {
  font-size: 13px; font-weight: 500; color: var(--ink-2); padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--l-card-2); box-shadow: inset 0 1px 0 var(--l-gloss); overflow-wrap: anywhere;
}
.ak-sarakkeet li s { text-decoration-thickness: 1px; text-decoration-color: var(--ink-3); }

.ak-esim { display: grid; min-width: 0; }
.ak-esim-rivi { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, 1fr) 112px; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--d-hair); font-size: 13.5px; color: var(--ink-2); }
.ak-esim-rivi:first-child { border-top: 0; }
.ak-esim-rivi > * { min-width: 0; overflow-wrap: anywhere; }
.ak-esim-rivi b { font-weight: 600; color: var(--ink); }
.ak-esim-rivi > .ak-lupa { justify-self: start; }
.ak-toiminnot .btn-primary { min-width: 120px; }
.ak-esim-rivi .is-tyhja { color: var(--ink-3); }

.ak-toiminnot {
  display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap;
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--l-edge);
}
.ak-toiminnot p { margin: 0 auto 0 0; font-size: 13.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ak-toiminnot p b { color: var(--ink); }

/* ---------- Kuittaus ---------- */
.ak-kuittaus { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.ak-kuittaus-ikoni { width: 40px; height: 40px; border-radius: var(--r-field); display: grid; place-items: center; background: var(--data); color: var(--l-chip-teal-ink); }
.ak-kuittaus b { display: block; font-family: var(--l-head); font-weight: 600; font-size: 15px; color: var(--ink); }
.ak-kuittaus p { margin: 2px 0 0; font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ---------- Virhe ---------- */
.ak-virhe-syy { margin: 0 0 20px; font-size: 15px; line-height: 1.55; color: var(--ink); max-width: 60ch; }

/* ---------- Ehtotila (Simo 23.9.2026: käyttöehdot ennen käyttöä) ----------
   Otsikko ja leipäteksti oman h3-luokan varassa kuten .ak-tyhja h3,
   koska paneelissa ei ole .panel-head-kääretä. ehdot-intro/ehdot-linkit/
   ehdot-napit/form-error ovat dashboard.css:n/app.css:n valmiit luokat
   (body-tason ehdotPortti) - tässä samat tekstit ilman kiinteää peitettä. */
.ak-ehdot { max-width: 62ch; }
.ak-ehdot h3 { font-family: var(--l-head); font-weight: 600; font-size: 17px; margin: 0 0 12px; color: var(--ink); }
.ak-ehdot .ehdot-intro { color: var(--ink-2); }
.ak-ehdot .ehdot-napit { margin-bottom: 0; }
/* Linkki erottuu linkiksi (app.css nollaa a-alleviivauksen). Sama kuvio kuin
   landing.css .fact-list; väri --ink, ei aksenttia (web designer, portti 10). */
.ak-ehdot .ehdot-linkit a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); transition: text-decoration-color .2s ease; }
.ak-ehdot .ehdot-linkit a:hover { text-decoration-color: currentColor; }

/* ---------- Kapea näyttö ---------- */
@media (max-width: 700px) {
  .ak-stats { gap: 8px; }
  .ak-stats .stat { padding: 12px 12px 12px; }
  .ak-stats .stat::before { display: none; }
  /* Kaksirivinen varaus kaikille, jotta luvut ovat samalla viivalla
     vaikka vain "Markkinointi-lupa" tavuttuu (mitattu 360 px). */
  .ak-stats .stat .label { padding-right: 0; font-size: 10px; letter-spacing: 0.06em; line-height: 1.3; hyphens: manual; min-height: 2.6em; }
  .ak-stats .stat .num { font-size: 24px; margin-top: 8px; }
  .ak-stats .stat .delta { display: none; }

  .ak-otsake { display: none; }
  /* Nimi+yhteys ja meta saavat koko leveyden: lupamerkin sarake (~120 px)
     kavensi ne 190 px:iin ja katkoi sähköpostin kesken (mitattu 360 px).
     Roskakori istuu meta-rivin oikeassa päässä absoluuttisesti. */
  .ak-rivi {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px; padding: 14px 0 12px;
  }
  .ak-rivi .ak-kuka { padding-right: 112px; }
  .ak-rivi .ak-yht { margin-right: -112px; }
  .ak-rivi > .ak-lupa { position: absolute; top: 12px; right: 0; }
  .ak-meta { display: flex; flex-wrap: wrap; gap: 0 4px; align-items: center; min-height: 44px; padding-right: 48px; }
  .ak-meta .ak-pvm::before { content: "· "; }
  .ak-rivi .ak-poista { position: absolute; right: -8px; bottom: 12px; }
  /* Kytkin omalle rivilleen meta-rivin alle, roskakorin viereen; ei vaakavieritystä. */
  .ak-rivi .ak-kielto { width: auto; max-width: calc(100% - 52px); margin-top: 2px; }
  .ak-m { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .ak-vahvista .ak-napit { width: 100%; }
  .ak-vahvista .ak-napit .btn { flex: 1 1 auto; }

  /* Allekkain: "antanut markkinointiluvan" ei mahdu 96 px laatikkoon. */
  .ak-yhteenveto { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ak-luku { display: flex; align-items: baseline; gap: 12px; padding: 12px 16px; }
  .ak-luku b { font-size: 22px; min-width: 3.2ch; }
  .ak-luku span { margin-top: 0; font-size: 13.5px; }
  .ak-esim-rivi { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; }
  .ak-esim-rivi > :nth-child(2), .ak-esim-rivi > :nth-child(3) { grid-column: 1; }
  .ak-esim-rivi > .ak-lupa { grid-column: 2; grid-row: 1; }

  /* Tuo/Peru pysyy peukalon ulottuvilla koko esikatselun ajan. */
  .ak-toiminnot.is-kiinni {
    position: sticky; bottom: 0; z-index: 5; margin: 24px -20px -20px; padding: 16px 20px 20px;
    background: var(--l-solid); border-radius: 0 0 var(--r-panel) var(--r-panel);
  }
  .ak-toiminnot .btn { flex: 1 1 auto; }
  .ak-toiminnot p { flex: 1 1 100%; }
  .ak-kuittaus { grid-template-columns: 40px minmax(0, 1fr); }
  .ak-kuittaus .btn { grid-column: 1 / -1; justify-self: start; }
  .ak-tyhja { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .ak-poista, .ak-suodin-nappi, .ak-kielto { transition: none; }
}