/* ═══════════════════════════════════════════════════════════════════════
   Wijnen Vroman — beheerdersomgeving
   ═══════════════════════════════════════════════════════════════════════ */

body.beheer{ font-family:var(--ui); font-size:14px; line-height:1.55; background:var(--room-diep); }
.beheer h1,.beheer h2{ font-family:var(--display); font-weight:400; }

/* De omrande knop uit de wijnlijst is bedoeld voor een donkere hero — hier omkeren. */
.beheer .knop--rand{ border-color:var(--lijn); color:var(--inkt); background:var(--papier); }
.beheer .knop--rand:hover{ border-color:var(--wijn); color:var(--wijn); background:var(--room); }
.beheer .knop--tekst{ color:var(--inkt-zacht); }
.beheer .knop--tekst:hover{ color:var(--wijn); }
.beheer .knop:disabled{ opacity:.35; cursor:not-allowed; transform:none; }
.beheer .knop:disabled:hover{ background:var(--wijn); border-color:var(--wijn); }

/* ─────────────────────────────── aanmelden ────────────────────────────── */
.poort{ min-height:100svh; display:grid; place-items:center; padding:24px; }
.poort__kaart{
  width:min(400px,100%); background:var(--papier); border:1px solid var(--lijn);
  border-radius:var(--rond); padding:44px 38px 34px; text-align:center; box-shadow:var(--schaduw-op);
  display:grid; gap:16px;
}
.poort__logo{ width:186px; height:auto; margin:0 auto 4px; }
.poort__titel{
  font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--inkt-zacht);
  margin:0 0 6px; font-family:var(--ui);
}
.poort__onder{ font-family:var(--tekst); font-style:italic; color:var(--inkt-zacht); margin:-10px 0 8px; font-size:17px; }
.poort__kaart .veld{ text-align:left; }
.poort__kaart input{
  width:100%; padding:11px 13px; border:1px solid var(--lijn); border-radius:var(--rond);
  background:var(--room); font-size:14px;
}
.poort__kaart .knop{ justify-content:center; }
.poort__fout{
  margin:0; color:#B3261E; font-size:13px; background:rgba(179,38,30,.08);
  padding:9px 12px; border-radius:var(--rond);
}
.poort__terug{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--inkt-zacht);
  text-decoration:none; margin-top:4px;
}
.poort__terug:hover{ color:var(--wijn); }

/* ──────────────────────────────── kop/tabs ────────────────────────────── */
.kop{
  position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  padding:0 24px; height:auto; min-height:60px; background:var(--papier);
  border-bottom:1px solid var(--lijn);
}
.kop__merk{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--wijn); }
.kop__teken{
  display:block; width:21px; aspect-ratio:35.96 / 46; flex:none; background-color:currentColor;
  -webkit-mask:url('/assets/merk.svg') no-repeat center / contain;
          mask:url('/assets/merk.svg') no-repeat center / contain;
}
.kop__merk span{ font-family:var(--display); font-size:12px; letter-spacing:.13em; text-transform:uppercase; }
.kop__merk em{ font-style:normal; color:var(--inkt-zacht); }
.kop__acties{ margin-left:auto; display:flex; gap:18px; align-items:center; }
.kop__acties .knop{ font-size:11px; padding:8px 2px; }

.tabs{ display:flex; gap:2px; }
.tabs button{
  border:none; background:none; cursor:pointer; padding:19px 15px; font-size:12px;
  letter-spacing:.11em; text-transform:uppercase; color:var(--inkt-zacht);
  border-bottom:2px solid transparent; transition:all .2s;
}
.tabs button:hover{ color:var(--wijn); }
.tabs button.is-actief{ color:var(--wijn); border-bottom-color:var(--wijn); font-weight:600; }

/* ─────────────────────────────── kengetallen ──────────────────────────── */
.cijfers{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px;
  background:var(--lijn); border-bottom:1px solid var(--lijn);
}
.cijfers div{ background:var(--papier); padding:16px 22px; }
.cijfers dt{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--inkt-zacht); }
.cijfers dd{ margin:4px 0 0; font-family:var(--display); font-size:24px; color:var(--wijn); }

/* ───────────────────────────────── layout ─────────────────────────────── */
.paneel-tab{ padding:24px; max-width:1500px; margin:0 auto; }
.dubbel{ display:grid; grid-template-columns:repeat(auto-fit,minmax(380px,1fr)); gap:20px; align-items:start; }

.kaartblad{
  background:var(--papier); border:1px solid var(--lijn); border-radius:var(--rond);
  padding:24px 26px 26px; display:grid; gap:16px; align-content:start;
}
.kaartblad__titel{ font-size:19px; letter-spacing:.05em; color:var(--wijn); margin:0; }
.kaartblad__uitleg{ font-family:var(--tekst); font-size:16.5px; color:var(--inkt-zacht); margin:-8px 0 0; }
.kaartblad__acties{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding-top:6px; }
.kaartblad__telling{ font-size:12px; color:var(--inkt-zacht); }
.kaartblad code{ background:var(--room-diep); padding:1px 5px; border-radius:3px; font-size:12.5px; }

.velden{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; }
.beheer .veld{ display:grid; gap:6px; }
.beheer .veld__label{ font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--inkt-zacht); }
.beheer input[type=text],.beheer input[type=number],.beheer input[type=search],
.beheer input[type=password],.beheer select,.beheer textarea{
  width:100%; padding:9px 11px; border:1px solid var(--lijn); border-radius:var(--rond);
  background:var(--room); font-family:var(--ui); font-size:13.5px;
}
.beheer textarea{ font-family:var(--tekst); font-size:16.5px; resize:vertical; line-height:1.5; }
.beheer input:focus,.beheer select:focus,.beheer textarea:focus{ outline:none; border-color:var(--goud); }

/* ─────────────────────────────── werkbalk ─────────────────────────────── */
.werkbalk{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:16px;
  background:var(--papier); border:1px solid var(--lijn); border-radius:var(--rond); padding:12px 14px;
}
.werkbalk input[type=search]{ flex:1 1 240px; min-width:0; }
.werkbalk select{ flex:0 1 190px; }
.werkbalk__vul{ flex:1 1 auto; }
.werkbalk .knop{ padding:9px 16px; font-size:11px; }

/* ──────────────────────────────── tabel ───────────────────────────────── */
.tabelwikkel{
  background:var(--papier); border:1px solid var(--lijn); border-radius:var(--rond); overflow:auto;
  max-height:calc(100svh - 260px);
}
.tabel{ width:100%; border-collapse:collapse; font-size:13.5px; }
.tabel th{
  position:sticky; top:0; z-index:1; background:var(--room-diep); text-align:left;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--inkt-zacht);
  padding:11px 14px; border-bottom:1px solid var(--lijn); white-space:nowrap;
}
.tabel td{ padding:9px 14px; border-bottom:1px solid var(--lijn); vertical-align:middle; }
.tabel tbody tr:hover{ background:color-mix(in srgb, var(--goud) 7%, transparent); }
.tabel tbody tr.is-verborgen{ opacity:.5; }
.tabel .r{ text-align:right; }
.tabel .c{ text-align:center; }
.tabel__naam{ font-family:var(--tekst); font-size:17px; }
.tabel__naam small{ display:block; font-family:var(--ui); font-size:11px; color:var(--inkt-zacht); }
.tabel__prijs{ font-weight:600; color:var(--wijn); white-space:nowrap; }
.tabel__voet{ font-size:12px; color:var(--inkt-zacht); margin:12px 0 0; }
.merk-op{
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; padding:2px 8px;
  border-radius:20px; background:var(--room-diep); color:var(--inkt-zacht); white-space:nowrap;
}
.merk-op--top{ background:color-mix(in srgb, var(--goud) 24%, transparent); color:var(--inkt); }
.mini{
  border:1px solid var(--lijn); background:var(--room); border-radius:var(--rond);
  padding:5px 10px; font-size:11px; cursor:pointer; color:var(--inkt-zacht); white-space:nowrap;
  transition:all .2s;
}
.mini:hover{ border-color:var(--wijn); color:var(--wijn); }
.mini--gevaar:hover{ border-color:#B3261E; color:#B3261E; }
.schakel{ cursor:pointer; accent-color:var(--wijn); width:16px; height:16px; }

/* ────────────────────────────── snellijst ─────────────────────────────── */
.snellijst{ max-height:420px; overflow:auto; border:1px solid var(--lijn); border-radius:var(--rond); }
.snelregel{
  display:grid; grid-template-columns:1fr 108px auto; gap:12px; align-items:center;
  padding:8px 12px; border-bottom:1px solid var(--lijn);
}
.snelregel:last-child{ border-bottom:none; }
.snelregel__naam{ font-family:var(--tekst); font-size:16.5px; min-width:0; }
.snelregel__naam small{ display:block; font-family:var(--ui); font-size:10.5px; color:var(--inkt-zacht); }
.snelregel input[type=number]{ text-align:right; padding:6px 9px; }
.snelregel input.is-gewijzigd{ border-color:var(--goud); background:color-mix(in srgb,var(--goud) 12%,transparent); }
.snelregel label{ display:flex; align-items:center; gap:6px; font-size:11px; color:var(--inkt-zacht); white-space:nowrap; }

/* ───────────────────────────── bulkvoorbeeld ──────────────────────────── */
.voorbeeld{ font-size:13px; }
.voorbeeld:empty{ display:none; }
.voorbeeld__kop{ color:var(--inkt-zacht); margin:0 0 10px; }
.voorbeeld ul{ list-style:none; margin:0; padding:0; display:grid; gap:5px; max-height:230px; overflow:auto; }
.voorbeeld li{ display:flex; justify-content:space-between; gap:14px; padding:5px 0; border-bottom:1px dotted var(--lijn); }
.voorbeeld del{ color:var(--inkt-zacht); }
.voorbeeld ins{ text-decoration:none; color:var(--wijn); font-weight:600; }

/* ───────────────────────────── bewerkpaneel ───────────────────────────── */
.beheer .paneel__blad{ width:min(660px,100%); }
.bewerk__rij{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; }
.bewerk__kop{
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--goud);
  margin:26px 0 4px; padding-bottom:8px; border-bottom:1px solid var(--lijn);
}
.bewerk__kop:first-of-type{ margin-top:14px; }
.bewerk__hint{ font-family:var(--tekst); font-size:16px; color:var(--inkt-zacht); margin:0; font-style:italic; }
.bewerk__acties{
  position:sticky; bottom:0; display:flex; gap:12px; align-items:center; margin-top:28px;
  padding:16px 0; background:var(--papier); border-top:1px solid var(--lijn);
}
.bewerk__acties .mini--gevaar{ margin-left:auto; }
.beheer .paneel__titel{ font-size:26px; }

/* ─────────────────────────────── foto's ───────────────────────────────── */
.beeldraster{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px;
}
.beeldraster--klein{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }

.beeldkaart{
  display:block; text-align:left; padding:0; overflow:hidden; cursor:pointer; margin:0;
  border:1px solid var(--lijn); border-radius:var(--rond); background:var(--room);
  transition:all .2s;
}
.beeldkaart:hover{ border-color:var(--goud); box-shadow:var(--schaduw); }
.beeldkaart.is-gekozen{ border-color:var(--wijn); box-shadow:0 0 0 2px color-mix(in srgb,var(--wijn) 22%,transparent); }
.beeldkaart--bib{ cursor:default; }
.beeldkaart--bib:hover{ border-color:var(--lijn); box-shadow:none; }
.beeldkaart--breed{ width:100%; display:grid; grid-template-columns:180px 1fr; align-items:stretch; }
.beeldkaart--breed .beeldkaart__beeld{ height:100%; min-height:110px; }
.beeldkaart__beeld{
  display:block; height:110px; background-size:cover; background-position:center;
  background-color:var(--room-diep);
}
.beeldraster--klein .beeldkaart__beeld{ height:88px; }
.beeldkaart__lijf{ display:block; padding:10px 12px 12px; }
.beeldkaart__lijf strong{
  display:block; font-size:12.5px; font-weight:600; color:var(--inkt);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.beeldkaart__lijf small{ display:block; font-size:11px; color:var(--inkt-zacht); margin-top:2px; }
.beeldkaart__lijf .mini{ margin-top:8px; }

.neerzet{
  border:2px dashed var(--lijn); border-radius:var(--rond); padding:26px 20px; text-align:center;
  background:var(--room); transition:all .2s;
}
.neerzet.is-over{ border-color:var(--goud); background:color-mix(in srgb,var(--goud) 10%,var(--room)); }
.neerzet p{ margin:0 0 10px; color:var(--inkt-zacht); font-size:13px; }
.neerzet strong{ color:var(--inkt); font-size:14px; }
.neerzet__stand{ margin:10px 0 0 !important; color:var(--wijn) !important; }
.neerzet__stand:empty{ display:none; }

/* ── coördinaten opzoeken ── */
.ligging{
  display:grid; gap:12px; padding:16px 18px; background:var(--room-diep);
  border-radius:var(--rond); border:1px solid var(--lijn);
}
.ligging__zoek{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.treffers:empty{ display:none; }
.treffers__kop{ font-size:12px; color:var(--inkt-zacht); margin:0 0 8px; }
.treffer{
  display:block; width:100%; text-align:left; cursor:pointer; margin-bottom:5px;
  border:1px solid var(--lijn); background:var(--papier); border-radius:var(--rond);
  padding:8px 12px; transition:all .2s;
}
.treffer:hover{ border-color:var(--wijn); }
.treffer strong{ display:block; font-size:13px; color:var(--inkt); }
.treffer small{ display:block; font-size:11px; color:var(--inkt-zacht); }
.treffers__klaar{
  margin:0; font-size:13px; color:var(--wijn); background:color-mix(in srgb,var(--goud) 14%,transparent);
  padding:10px 13px; border-radius:var(--rond);
}

/* ───────────────────────────── bestellingen ───────────────────────────── */
.tabs button em{
  font-style:normal; margin-left:7px; background:var(--wijn); color:#fff; border-radius:20px;
  padding:1px 7px; font-size:10px; vertical-align:1px;
}
.bestelling{
  background:var(--papier); border:1px solid var(--lijn); border-radius:var(--rond);
  padding:20px 22px; margin-bottom:14px;
}
.bestelling.is-behandeld{ opacity:.6; }
.bestelling__kop{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:flex-start; }
.bestelling__kop h3{ font-size:19px; margin:0; color:var(--wijn); }
.bestelling__kop h3 small{ font-family:var(--ui); font-size:12px; color:var(--inkt-zacht); }
.bestelling__meta{ font-size:12px; color:var(--inkt-zacht); margin:4px 0 0; }
.bestelling__meta a{ color:var(--inkt-zacht); }
.bestelling__meta a:hover{ color:var(--wijn); }
.bestelling__rechts{ text-align:right; display:grid; gap:5px; justify-items:end; }
.bestelling__totaal{ font-family:var(--display); font-size:22px; color:var(--wijn); }
.merk-op--waarschuwing{ background:rgba(179,38,30,.12); color:#8C1D18; }
.bestelling__adres{ font-family:var(--tekst); font-size:16px; color:var(--inkt-zacht); margin:12px 0 0; }
.bestelling__regels{ width:100%; border-collapse:collapse; margin:14px 0 0; font-size:13.5px; }
.bestelling__regels td{ padding:6px 10px 6px 0; border-bottom:1px dotted var(--lijn); vertical-align:top; }
.bestelling__regels td:first-child{ white-space:nowrap; color:var(--inkt-zacht); }
.bestelling__regels small{ display:block; font-size:11px; color:var(--inkt-zacht); }
.bestelling__regels .r{ text-align:right; white-space:nowrap; }
.bestelling__opmerking{
  margin:14px 0 0; padding:12px 14px; background:var(--room-diep); border-left:2px solid var(--goud);
  font-family:var(--tekst); font-size:16.5px;
}
.bestelling__acties{ display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.bestelling__acties .mini{ text-decoration:none; }

/* ────────────────────────────── responsief ────────────────────────────── */
@media (max-width:820px){
  .kop{ padding:0 14px; }
  .tabs{ order:3; width:100%; overflow-x:auto; border-top:1px solid var(--lijn); }
  .tabs button{ padding:14px 12px; }
  .paneel-tab{ padding:16px 14px; }
  .tabel th:nth-child(4),.tabel td:nth-child(4),
  .tabel th:nth-child(5),.tabel td:nth-child(5){ display:none; }
}

.waarschuwing{
  margin:0; padding:11px 14px; font-size:13px; border-radius:var(--rond);
  background:color-mix(in srgb, var(--goud) 20%, transparent);
  border-left:3px solid var(--goud); color:var(--inkt);
}
.waarschuwing em{ font-style:normal; font-weight:600; }