/* ===========================================================================
   MAKSUT-NÄKYMÄ · lasi A 2.2 -sopimuksella
   Verkkomaksu Stripe Connect, 13.9.2026. Suunnitelma docs/superpowers/plans/
   2026-09-13-verkkomaksu-stripe-connect.md Task 7, speksi 2026-09-13-
   verkkomaksu-stripe-connect-design.md kohta 5. Malli: rakennukset.css/
   ehdotukset.css (samat tokenit, sama rakenne).

   ⚠ WEB DESIGNER EI OLE NÄHNYT TÄTÄ RAKENNETTA ETUKÄTEEN (frontend-koodari,
   13.9.2026). Tämä on ehdotus jotta Maksut-näkymä on ylipäätään olemassa
   katselmoitavaksi - kuvakaappaukset 390/1440 px odottavat web designerin
   hyväksyntää ennen tuotantoon vientiä (portti 10, ks. raportti T7).

   SITOVAT RAJAT JOITA TÄMÄ NOUDATTAA (sama kuin rakennukset.css)
   - Ei yhtään uutta väriä: jokainen arvo tulee lasi.css:n tokeneista tai
     dashboard.css:n valmiista badge-varianteista (amber/sage).
   - Ei backdrop-filteriä, ei turkoosia.
   - Toistuvat rivielementit (asetuskytkimet) käyttävät JO OLEMASSA OLEVIA
     .mainos-asetukset/.mainos-aset-rivi/.mainos-aset-teksti-luokkia
     (ehdotukset.css) sellaisenaan - ei kahta kertaa samaa CSS:ää.
   - Mobiili 390 px: maksurivi pinoutuu (muisti 11.9.2026: puuttuva
     min-width:0 piilotti vaakavuodon jota scrollWidth-mittari ei nähnyt).
   =========================================================================== */

/* ---------- Tilakortti ---------- */
.mx-tila {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  min-width: 0;
}
.mx-tila-teksti { flex: 1 1 240px; min-width: 0; }
.mx-tila-teksti b {
  display: block; font-family: var(--l-head); font-weight: 600; font-size: 15px; color: var(--ink);
}
.mx-tila-teksti p { margin: 4px 0 0; font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.mx-tila .btn { flex: 0 0 auto; }

/* ---------- Maksulista ---------- */
.mx-lista { display: grid; gap: 0; min-width: 0; }
.mx-rivi {
  display: grid; grid-template-columns: 108px 1fr 92px 112px auto;
  align-items: center; gap: 12px;
  padding: 12px 4px; border-top: 1px solid var(--l-edge);
  min-width: 0;
}
.mx-rivi:first-child { border-top: 0; }
.mx-aika { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mx-asiakas {
  font-family: var(--l-head); font-weight: 600; font-size: 14px; color: var(--ink);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mx-summa { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.mx-rivi .badge { justify-self: start; }

@media (max-width: 700px) {
  .mx-rivi {
    grid-template-columns: 1fr auto;
    grid-template-areas: "asiakas tila" "aika summa" "nappi nappi";
    row-gap: 6px;
  }
  .mx-asiakas { grid-area: asiakas; white-space: normal; overflow-wrap: anywhere; }
  .mx-aika { grid-area: aika; }
  .mx-summa { grid-area: summa; text-align: left; }
  .mx-rivi .badge { grid-area: tila; justify-self: end; }
  .mx-rivi .btn { grid-area: nappi; justify-self: start; }
}