/* Flatfile Validator — wat alleen deze site nodig heeft, bovenop css/lm-stijl.v1.css.
 *
 * De huisstijl zelf (kleuren, lettertype, achtergrond, fotokop, panelen, tegels,
 * pillen, knoppen, tabellen, licht/donker, afdrukken) komt uit de gedeelde stijl
 * "rijk" (C:/projects/lm-huisstijl-web, versie 1). Hier alleen de onderdelen die
 * daar niet in staan, en uitsluitend met --lm-tokens: geen losse kleuren.
 *
 * Klantgericht scherm, dus contrast boven alles: kleine tekst >= 4,5:1 (WCAG AA).
 *
 * css/style.css bestaat nog voor beheer.php en wordt door index.html niet meer geladen.
 * Bestandsnaam met versienummer: verandert dit bestand ingrijpend, maak dan een v2
 * in plaats van dit bestand te overschrijven (zie CLAUDE.md, caching). */

/* Het hidden-attribuut moet zwaarder wegen dan onze eigen display-regels
   (.lm-melding zet display:flex; zie STAND.md, valkuil 3). */
[hidden] { display: none !important; }

/* Klantgericht: iets grotere basistekst dan de interne schermen. */
.lm-body { font-size: 15px; }

/* ---------- Fotokop ---------- */

/* Foto via een klasse en niet via een style-attribuut: zo wordt het pad ten opzichte
   van dit stylesheet bepaald (css/ -> ../assets) en klopt het in elke browser. */
.foto-pand { --lm-foto: url("../assets/foto/foto-pand.jpg"); --lm-fpos: 50% 40%; }

/* Weergave- en taalkeuze als glazen pillen rechtsboven in de kop. De achtergrond
   is bewust donkerder dan .lm-glaspil: rechts in de kop ligt de lichte gevel van
   het pand en daarop haalt witte tekst anders geen 4,5:1. */
.kop-keuze { display: inline-flex; align-items: center; gap: 8px; color: #FFFFFF;
  font-size: 12.5px; font-weight: 600; border-radius: 999px; padding: 4px 6px 4px 14px;
  background: rgba(0,40,70,.62); border: 1px solid rgba(255,255,255,.35); }
.kop-keuze select { font: inherit; font-size: 13px; font-weight: 600; color: #FFFFFF; cursor: pointer;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.30); border-radius: 999px; padding: 3px 10px; }
.kop-keuze select:hover { background: rgba(255,255,255,.24); }
.kop-keuze select:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
/* De uitklaplijst zelf tekent het systeem: daar donkere tekst op het eigen vlak. */
.kop-keuze option { color: var(--lm-fg); background: var(--lm-surface); }

/* De ondertitel is hier een <p>: geen standaardmarge onderaan. */
.lm-held .lm-held-sub { margin-bottom: 0; }

/* ---------- Meldingen (laden, oordeel) ---------- */

.lm-melding { margin: 0; }
.lm-melding[data-s="info"] { background: linear-gradient(90deg, var(--lm-info-tint), transparent), var(--lm-surface); border-color: var(--lm-info-tint); }
.lm-melding small { color: var(--lm-muted); }

.spinner { width: 18px; height: 18px; flex: none; border-radius: 50%;
  border: 2px solid var(--lm-track); border-top-color: var(--lm-blauw); animation: draai .8s linear infinite; }
@keyframes draai { to { transform: rotate(360deg); } }

/* Eindoordeel met een ronde stip vooraan (zoals het goedgekeurde voorbeeldscherm). */
.oordeel { margin-top: 16px; }
.oordeel[data-s="crit"] { box-shadow: 0 10px 24px -16px var(--lm-crit); }
.oordeel[data-s="warn"] { box-shadow: 0 10px 24px -16px var(--lm-warn); }
.oordeel[data-s="ok"]   { box-shadow: 0 10px 24px -16px var(--lm-ok); }
.oordeel .bol { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center;
  color: var(--lm-surface); font-weight: 800; font-size: 18px; line-height: 1; background: var(--lm-neutraal);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.oordeel .bol svg { width: 20px; height: 20px; }
.oordeel[data-s="crit"] .bol { background: var(--lm-crit); }
.oordeel[data-s="warn"] .bol { background: var(--lm-warn-tekst); }
.oordeel[data-s="ok"]   .bol { background: var(--lm-ok-tekst); }

.referentie { margin: 12px 0 0; font-size: 13.5px; color: var(--lm-muted); }
.referentie strong { color: var(--lm-fg); font-size: 15px; letter-spacing: .06em; font-variant-numeric: tabular-nums; }

.taalnotitie { margin: 8px 0 0; font-size: 13px; color: var(--lm-muted); font-style: italic; }

/* ---------- Dropzone ---------- */

.dropzone { position: relative; overflow: hidden; isolation: isolate; cursor: pointer;
  display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center;
  border-radius: 16px; border: 2px dashed var(--lm-blauw); padding: 24px 26px;
  background: linear-gradient(135deg, var(--lm-info-tint), transparent 70%), var(--lm-surface);
  transition: background .15s, border-color .15s; }
/* Een vleug rijp links in het vak; puur sier, onder de tekst. */
.dropzone::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 200px; z-index: -1; pointer-events: none;
  background: url("../assets/rijp.webp") 0 0 / 200px auto repeat-y; opacity: calc(var(--lm-rijp-op) * .45);
  -webkit-mask: linear-gradient(90deg, #000, transparent); mask: linear-gradient(90deg, #000, transparent); }
.dropzone.actief { border-color: var(--lm-groen); background: linear-gradient(135deg, var(--lm-ok-tint), transparent 70%), var(--lm-surface); }
.dropzone.bezig  { opacity: .55; pointer-events: none; }

.dz-icoon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; color: #FFFFFF;
  background: linear-gradient(180deg, #0088C4, #0071A6); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 22px -10px rgba(0,110,170,.9); }
.dz-icoon svg { width: 26px; height: 26px; }
.dz-hoofd { margin: 0; font-size: 17px; font-weight: 700; }
.dz-sub   { margin: 2px 0 0; color: var(--lm-muted); }

.privacy { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 13.5px; color: var(--lm-muted); }
.privacy .lm-pill { margin-top: 1px; }
.privacy p { margin: 0; max-width: 95ch; }
.privacy strong { color: var(--lm-fg); }

/* ---------- Invoervelden (profiel, zoeken) ---------- */

.instellingen { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 18px; }
.veld { display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--lm-muted); }
.veld select, .veld input { font: inherit; font-size: 14px; font-weight: 400; letter-spacing: normal; text-transform: none;
  color: var(--lm-fg); background: var(--lm-surface); border: 1px solid var(--lm-glass-edge); border-radius: 11px;
  padding: 8px 12px; min-width: 14rem; box-shadow: inset 0 1px 2px var(--lm-glass-edge); }
.veld select:focus-visible, .veld input:focus-visible { outline: 2px solid var(--lm-blauw); outline-offset: 1px; }
.veld input::placeholder { color: var(--lm-muted); opacity: 1; }

/* ---------- Werkbalk ---------- */

.werkbalk { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.werkbalk .lm-chips .lm-lbl { min-width: 5.5em; }
.werkbalk-rij { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.zoek { flex: 1 1 16rem; }
.zoek input { width: 100%; min-width: 0; }

/* ---------- Tegels ---------- */

.lm-tegels { margin-bottom: 4px; }
/* "OrderPick"/"CrossDock" is tekst, geen getal: iets kleiner zodat het in de tegel past. */
.lm-tegel b.tekstwaarde { font-size: 28px; }

/* ---------- Samenvatting en tabellen ---------- */

.samenvatting { margin-top: 24px; }
.samenvatting h3 { margin: 0 0 4px; font-size: 19px; font-weight: 700; color: var(--lm-groen); letter-spacing: -.01em; }
.sam-uitleg { margin: 0 0 6px; font-size: 13.5px; color: var(--lm-muted); }
.samenvatting .lm-tabel-wrap { padding: 0; }

.lm-tabel { font-size: 14px; }
.lm-tabel td { vertical-align: top; }
.lm-tabel td.regel, .lm-tabel td.order, .lm-tabel td.aantal { font-variant-numeric: tabular-nums; white-space: nowrap; }
.lm-tabel td.aantal { font-weight: 700; }
.col-aantal { width: 5.5rem; }
.col-regels { width: 11rem; }
.col-soort  { width: 9rem; }
.col-regel  { width: 5rem; }
.col-order  { width: 8rem; }
.col-veld   { width: 15rem; }

.sam-rij { cursor: pointer; }
.sam-rij:hover td { background: var(--lm-info-tint); }

/* Kop per order in de weergave "Per order" */
.lm-tabel tr.groepskop td { font-weight: 700; color: var(--lm-fg); background: var(--lm-surface-2);
  border-top: 2px solid var(--lm-blauw); border-bottom: 1px solid var(--lm-line); }

.tabel-voet { margin: 8px 0 0; font-size: 13.5px; color: var(--lm-muted); }

/* ---------- Paginering ---------- */

.paginering { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pag-nummers { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pag-nummer { min-width: 2.6rem; text-align: center; padding-inline: 10px; font-variant-numeric: tabular-nums; }
.pag-nummer.actief { background: var(--lm-blauw-knop); border-color: transparent; color: #FFFFFF; box-shadow: 0 8px 18px -8px var(--lm-blauw); }
.pag-knop:disabled { opacity: .45; cursor: default; transform: none; }
.pag-punten { padding: 0 2px; color: var(--lm-muted); }

/* ---------- Detectie en uitleg ---------- */

.detectie { margin-top: 16px; font-size: 14px; }
.detectie summary { cursor: pointer; color: var(--lm-blauw-tekst); font-weight: 700; }
.detectie ul { color: var(--lm-muted); margin: 8px 0 0; }
.detectie strong { color: var(--lm-fg); }

.uitleg dl { margin: 0; }
/* Tussenkopjes in broodtekstgrootte: zwart vet. Groen haalt pas vanaf 19 px vet genoeg contrast. */
.uitleg dt { font-weight: 700; color: var(--lm-fg); margin-top: 14px; padding-left: 10px; border-left: 3px solid var(--lm-blauw); }
.uitleg dt:first-child { margin-top: 0; }
.uitleg dd { margin: 3px 0 0; padding-left: 13px; }
.uitleg .contact { margin: 18px 0 0; }
.lm-body code { font-family: Consolas, "Courier New", monospace; font-size: .92em;
  background: var(--lm-surface-2); border: 1px solid var(--lm-line); border-radius: 5px; padding: 0 5px; }

.bestandsnaam { word-break: break-all; }

.voet { text-align: center; font-size: 13px; color: var(--lm-muted); padding: 8px 0 0; }

/* ---------- Telefoon ---------- */

@media (max-width: 760px) {
  .dropzone { grid-template-columns: 1fr; padding: 20px; }
  .dz-icoon { width: 48px; height: 48px; }
  .dropzone .lm-knop { justify-self: start; }
  .privacy { flex-direction: column; gap: 6px; }
  .veld select, .veld input { min-width: 0; width: 100%; }
  .instellingen .veld { flex: 1 1 100%; }
  .werkbalk .lm-chips .lm-lbl { min-width: 0; width: 100%; }
  .col-veld { width: auto; }
  .lm-paneel-kop, .lm-paneel-body { padding-inline: 16px; }
}

@media print {
  .dropzone, .privacy, .instellingen, .werkbalk, .paginering, .kop-keuze { display: none !important; }
}