/* ==========================================================================
   AUTOPRO-OSION TYYLIT
   ==========================================================================
   Ladataan styles.css:n jälkeen index.html:ssä. Tokenit ja yhteiset
   komponentit (napit, paneelit, lomakkeet, taulukot) tulevat styles.css:stä;
   täällä on vain se mikä on osion omaa: liikkeen listanäkymät ja tulostettava
   asiakirja. Paletti vaihtuu `body[data-osio]`-arvosta, joten markkinapaikan
   ja AutoJopparin sivut eivät näe näitä värejä. */

/* AutoPro on liikkeen työkalu, joten paletti on rauhallinen sininen: se erottuu
   markkinapaikan oranssista ja AutoJopparin vihreästä eikä huuda myynnillisesti.
   Kontrastit: #1d4ed8 vaalealla 6,3:1, #93c5fd tummalla 9,1:1. */
body[data-osio="autopro"] {
  --korostus:        light-dark(#1d4ed8, #93c5fd);
  --korostus-toinen: light-dark(#1e3a8a, #bfdbfe);
  --korostus-pinta:  light-dark(#eef2ff, rgba(147, 197, 253, .16));
  --cta: #1d4ed8;
  --cta-hover: light-dark(#1e40af, #3b82f6);
}

/* --- Merkinnät ---------------------------------------------------------- */
.merkkilappu--varasto-varastossa { background: var(--pinta-himmea); color: var(--teksti-pehmea); }
.merkkilappu--varasto-myynnissa { background: var(--onnistui-pinta); color: var(--onnistui); }
.merkkilappu--varasto-varattu { background: var(--varoitus-pinta); color: var(--varoitus); }
.merkkilappu--varasto-huollossa { background: var(--korostus-pinta); color: var(--korostus); }
.merkkilappu--varasto-myyty { background: var(--pinta-himmea); color: var(--teksti-himmea); }

.merkkilappu--sopimus-luonnos { background: var(--varoitus-pinta); color: var(--varoitus); }
.merkkilappu--sopimus-valmis { background: var(--onnistui-pinta); color: var(--onnistui); }
.merkkilappu--sopimus-peruttu { background: var(--pinta-himmea); color: var(--teksti-himmea); }

/* --- Varasto- ja sopimuslista ------------------------------------------- */
/* Rivi on linkki, jossa on neljä saraketta: kohde, tila, hankinnan luvut ja
   kate. Kapealla näytöllä sarakkeet asettuvat allekkain. */
.varastolista { display: grid; gap: var(--vali-3); }
.varastorivi {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--vali-4);
  align-items: center;
  padding: var(--vali-4) var(--vali-5);
  background: var(--pinta);
  border: 1px solid var(--reuna);
  border-radius: var(--r-l);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--nopea), box-shadow var(--nopea);
}
.varastorivi:hover {
  border-color: var(--korostus);
  box-shadow: var(--varjo-1);
  text-decoration: none;
}
.varastorivi__nimi, .varastorivi__tila, .varastorivi__luvut { display: grid; gap: 2px; }
.varastorivi__tila { justify-items: start; }
.varastorivi__meta { font-size: var(--koko-s); color: var(--teksti-pehmea); }
.varastorivi__pieni { font-size: var(--koko-xs); color: var(--teksti-himmea); }
.varastorivi__pieni--huomio { color: var(--varoitus); font-weight: var(--paino-puolilihava); }
.varastorivi__kate {
  font-size: var(--koko-l);
  font-weight: var(--paino-lihava);
  font-variant-numeric: tabular-nums;
  color: var(--onnistui);
}
.varastorivi__kate--miinus { color: var(--virhe); }

@media (max-width: 860px) {
  .varastorivi { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .varastorivi__nimi { grid-column: 1 / -1; }
}

/* --- Asiakasrekisteri --------------------------------------------------- */
/* Rivi avautuu paikallaan: sopimukset ovat sen tieto, ei oma sivunsa. */
.asiakaslista { display: grid; gap: var(--vali-2); }
.asiakasrivi {
  background: var(--pinta);
  border: 1px solid var(--reuna);
  border-radius: var(--r-l);
  overflow: hidden;
}
.asiakasrivi--auki { border-color: var(--korostus); }
.asiakasrivi__otsikko {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--vali-4);
  align-items: center;
  width: 100%;
  padding: var(--vali-4) var(--vali-5);
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.asiakasrivi__otsikko:hover { background: var(--pinta-himmea); }
.asiakasrivi__nimi, .asiakasrivi__yhteys { display: grid; gap: 2px; min-width: 0; }
.asiakasrivi__yhteys span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asiakasrivi__maara {
  display: grid; gap: 2px; justify-items: end;
  font-weight: var(--paino-lihava);
  font-variant-numeric: tabular-nums;
}
.asiakasrivi__sisalto {
  padding: 0 var(--vali-5) var(--vali-5);
  border-top: 1px solid var(--reuna);
  padding-top: var(--vali-4);
}

@media (max-width: 860px) {
  .asiakasrivi__otsikko { grid-template-columns: 1fr; }
  .asiakasrivi__maara { justify-items: start; }
}

/* --- Sivun otsikon nappirivi -------------------------------------------- */
.sivuotsikko__napit { display: flex; flex-wrap: wrap; gap: var(--vali-2); }
.hakupalkki--kapea { grid-template-columns: minmax(0, 480px); }

/* Tiivis tietolista sivupalstan laatikkoon. */
.tietolista--tiivis { grid-template-columns: 1fr 1fr; gap: var(--vali-2); margin: var(--vali-4) 0 0; }

/* Raporttikortin korostettu luku (esim. hitaasti kiertävät autot). */
.tilastokortti__luku--huomio { color: var(--varoitus); }

/* Taulukko jossa on otsikkorivi: myyjäkohtainen raportti. */
.tietotaulukko--sarakkeet thead th {
  padding-bottom: var(--vali-2);
  font-size: var(--koko-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--teksti-himmea);
  text-align: left;
}
.tietotaulukko__toiminto { text-align: right; }

/* ==========================================================================
   ASIAKIRJA JA TULOSTUS
   ==========================================================================
   Kauppakirja, ostosopimus ja tarjous tulostuvat selaimen omalla
   tulostuksella: erillistä PDF-kirjastoa ei tarvita, koska asiakirja on jo
   sivulla. Tulostettaessa piilotetaan kaikki muu paitsi `#asiakirja`. */
.asiakirja {
  padding: var(--vali-8);
  background: var(--pinta);
  border: 1px solid var(--reuna);
  border-radius: var(--r-l);
}
.asiakirja__ylatunniste {
  padding-bottom: var(--vali-4);
  margin-bottom: var(--vali-6);
  border-bottom: 2px solid var(--teksti);
}
.asiakirja__ylatunniste h2 {
  margin: 0;
  font-size: var(--koko-xl);
  letter-spacing: .08em;
}
.asiakirja__ylatunniste p { margin: var(--vali-1) 0 0; font-size: var(--koko-s); color: var(--teksti-himmea); }
.asiakirja__osapuolet {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--vali-6);
  margin-bottom: var(--vali-6);
}
.asiakirja__osapuoli h3 {
  margin: 0 0 var(--vali-2);
  font-size: var(--koko-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--teksti-himmea);
}
.asiakirja__osapuoli p { margin: 0 0 2px; font-size: var(--koko-s); }
.asiakirja__osio { margin-top: var(--vali-6); }
.asiakirja__osio h3 {
  margin: 0 0 var(--vali-2);
  font-size: var(--koko-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--teksti-himmea);
}
.asiakirja__paikka { margin: 0 0 var(--vali-8); font-size: var(--koko-s); }
.asiakirja__allekirjoitukset {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--vali-8);
}
.asiakirja__viiva { display: block; height: 1px; margin-bottom: var(--vali-2); background: var(--teksti); }
.asiakirja__allekirjoitukset p { margin: 0; font-size: var(--koko-s); }
.asiakirja__pieni { color: var(--teksti-himmea); font-size: var(--koko-xs); }

@media (max-width: 700px) {
  .asiakirja { padding: var(--vali-5); }
  .asiakirja__osapuolet, .asiakirja__allekirjoitukset { grid-template-columns: 1fr; }
}

@media print {
  /* Vain asiakirja tulostuu: yläpalkki, sivupalsta ja alapalkki jäävät pois.
     Sisältö nostetaan sivun alkuun, jottei tyhjää marginaalia jää. */
  .ylapalkki, .alapalkki, .ilmoitus-sivupalsta, .murupolku, .vertailupalkki,
  .ilmoitusalue, .ohita-linkki { display: none !important; }
  .sisalto { padding: 0; max-width: none; }
  .ilmoitus-asettelu { display: block; }
  .asiakirja { padding: 0; border: 0; border-radius: 0; }
  .asiakirja__osio { break-inside: avoid; }
  a { text-decoration: none; color: inherit; }
}