:root {
  --wine-900: #3a0d16;
  --wine-800: #5b1220;
  --wine-700: #7a1a2b;
  --wine-600: #9c2438;
  --wine-500: #b8324a;
  --gold: #b8924a;
  --gold-light: #d9bd85;
  --cream: #faf6f0;
  --paper: #fffdfb;
  --ink: #2a1f1c;
  --ink-soft: #6b5d57;
  --line: #e8ddd2;
  --green-ok: #3a7d54;
  --amber: #b8792a;
  --shadow: 0 2px 10px rgba(58, 13, 22, 0.08);
  --shadow-lg: 0 8px 30px rgba(58, 13, 22, 0.14);
  --radius: 12px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  background: var(--cream);
  color: var(--ink);
  line-height: 1.5;
}

h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 600; }

a { color: var(--wine-700); }

.top-bar {
  background: linear-gradient(135deg, var(--wine-900), var(--wine-700));
  color: var(--cream);
  padding: 28px 20px 22px;
  box-shadow: var(--shadow-lg);
}

.top-bar-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
}

.top-bar h1 {
  margin: 0 0 4px;
  font-size: 28px;
  letter-spacing: 0.3px;
}

.top-bar .subtitle {
  margin: 0;
  color: var(--gold-light);
  font-size: 14px;
}

/* Logo-emoji iets groter dan de omringende titeltekst, als visueel anker linksboven. */
.logo-emoji {
  font-size: 1.4em;
  vertical-align: -0.1em;
  display: inline-block;
}

/* Titel + subtitel linksboven zijn samen klikbaar (terug naar het overzicht) — geen
   onderstreping/kleurverandering, moet gewoon als titel blijven ogen, niet als link. */
.logo-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.logo-link:hover h1 { opacity: 0.85; }

.top-bar nav a {
  color: var(--cream);
  text-decoration: none;
  border: 1px solid rgba(250,246,240,0.35);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  margin-left: 8px;
  transition: background 0.15s;
}
.top-bar nav a:hover { background: rgba(250,246,240,0.12); }
.top-bar nav a.active { background: var(--gold); border-color: var(--gold); color: var(--wine-900); font-weight: 600; }

.stats-bar {
  max-width: 1200px;
  margin: -18px auto 0;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  position: relative;
  z-index: 2;
}

.stat-card {
  background: var(--paper);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}
.stat-card .num { font-size: 22px; font-weight: 700; color: var(--wine-800); font-family: Georgia, serif; }
.stat-card .label { font-size: 12px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.4px; }

.container { max-width: 1200px; margin: 0 auto; padding: 24px 20px 60px; }

.controls {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 4px;
}

.view-explain {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin: 0 0 16px;
  font-style: italic;
}

.controls input[type="search"] {
  flex: 1;
  min-width: 220px;
  padding: 10px 14px;
  border-radius: 20px;
  border: 1px solid var(--line);
  font-size: 14px;
  background: var(--paper);
}

.sort-select {
  padding: 10px 14px;
  border-radius: 20px;
  border: 1px solid var(--line);
  font-size: 13px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}

.view-toggle {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  background: var(--paper);
}
.view-toggle button {
  border: none;
  background: transparent;
  padding: 9px 18px;
  font-size: 13px;
  cursor: pointer;
  color: var(--ink-soft);
}
.view-toggle button.active { background: var(--wine-700); color: white; }

.checkbox-label {
  font-size: 13px;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
}

/* List view */
table.krat-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
table.krat-table th, table.krat-table td {
  padding: 10px 12px;
  text-align: left;
  font-size: 13.5px;
  border-bottom: 1px solid var(--line);
}
table.krat-table th {
  background: var(--wine-900);
  color: var(--cream);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  position: sticky;
  top: 0;
}
table.krat-table tbody tr:hover { background: #fdf5ee; cursor: pointer; }
table.krat-table tbody tr.sold-out { opacity: 0.5; }
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
.badge.ok { background: #e4f3e8; color: var(--green-ok); }
.badge.low { background: #fbeee0; color: var(--amber); }
.badge.none { background: #f0e6e6; color: var(--wine-700); }
.badge.mix { background: #eee6f5; color: #6a3fa0; }
/* Markeert een richtprijs die een online marktschatting is (i.p.v. uit de aankooplijst) —
   zie WCEL.prijsBronBadge() in app.js. Bewust een andere kleur (blauw) dan de status-
   badges hierboven, zodat het duidelijk een ander soort label is (bron, geen status). */
.prijsbron-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 600;
  background: #e3edf7;
  color: #2f5f8a;
  cursor: help;
  vertical-align: middle;
}
.kist-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--wine-800);
  color: white;
  font-size: 11px;
  font-weight: 700;
}

/* Gallery view */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.krat-card {
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: 3px;
  padding: 8px;
  background: #f2ece3;
  max-height: 220px;
  overflow-y: auto;
}
.photos img {
  width: 100%;
  height: 90px;
  object-fit: cover;
  border-radius: 4px;
  cursor: zoom-in;
  background: #ddd;
}
.photos .no-photo {
  grid-column: 1 / -1;
  text-align: center;
  padding: 20px;
  color: var(--ink-soft);
  font-size: 12px;
}
.krat-card .body { padding: 14px 16px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.krat-card .krat-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }
.krat-card .desc { font-size: 12.5px; color: var(--ink-soft); }
.krat-card .meta-row { display: flex; justify-content: space-between; font-size: 13px; margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--line); }
.krat-card .price { font-weight: 700; color: var(--wine-800); }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; background: rgba(20,8,10,0.92);
  display: none; align-items: center; justify-content: center; z-index: 100;
  flex-direction: column; gap: 12px;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 80vh; border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); }
.lightbox .lb-close { position: absolute; top: 18px; right: 24px; color: white; font-size: 28px; cursor: pointer; background: none; border: none; }
.lightbox .lb-caption { color: var(--gold-light); font-size: 13px; }
.lightbox .lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  color: white; font-size: 44px; line-height: 1; cursor: pointer;
  background: rgba(255,255,255,0.08); border: none; border-radius: 50%;
  width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.lightbox .lb-nav:hover { background: rgba(255,255,255,0.2); }
.lightbox .lb-prev { left: 16px; }
.lightbox .lb-next { right: 16px; }
@media (max-width: 640px) {
  .lightbox .lb-nav { width: 44px; height: 44px; font-size: 32px; }
  .lightbox .lb-prev { left: 4px; }
  .lightbox .lb-next { right: 4px; }
}

.footer-note {
  max-width: 1200px; margin: 30px auto 0; padding: 16px 20px;
  font-size: 12px; color: var(--ink-soft); border-top: 1px solid var(--line);
}

/* Admin */
.admin-table input[type="number"] {
  width: 60px; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--line); font-size: 13px;
}
.admin-actions { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.btn {
  background: var(--wine-700); color: white; border: none; padding: 10px 18px;
  border-radius: 20px; font-size: 13px; cursor: pointer; font-weight: 600;
  display: inline-block; text-decoration: none; box-sizing: border-box;
}
.btn:hover { background: var(--wine-800); }
.btn.secondary { background: var(--paper); color: var(--wine-700); border: 1px solid var(--wine-700); }
.save-status { font-size: 13px; color: var(--green-ok); font-weight: 600; }
.info-box {
  background: #fdf5ee; border: 1px solid var(--gold-light); border-radius: var(--radius);
  padding: 14px 18px; font-size: 13px; margin-bottom: 20px; color: var(--ink);
}
.info-box b { color: var(--wine-800); }

/* Inlogscherm (beheer.html) */
.login-box {
  max-width: 380px; margin: 60px auto; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 32px 28px;
}
.login-box h2 { margin: 0 0 10px; }
.login-explain { font-size: 13px; color: var(--ink-soft); line-height: 1.5; margin: 0 0 22px; }
.login-box form { display: flex; flex-direction: column; gap: 16px; }
.login-box label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink); }
.login-box input { padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line); font-size: 14px; }
.login-box .btn { width: 100%; text-align: center; }
.login-error { color: #b3261e; font-size: 13px; margin: 0; min-height: 16px; }

/* Klikbare rijen/kaarten die naar een detailpagina leiden */
table.krat-table tbody tr.clickable { cursor: pointer; }
table.krat-table tbody tr.clickable:hover { background: #fdf5ee; }
.krat-card.clickable-body .body { cursor: pointer; }

/* Kist-pills: klikbare badges die naar de bijbehorende kist springen */
.kist-pill {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper); border: 1px solid var(--wine-700); color: var(--wine-700);
  border-radius: 14px; padding: 3px 11px; font-size: 12px; font-weight: 600;
  cursor: pointer; margin: 2px 4px 2px 0; transition: background 0.15s, color 0.15s;
}
.kist-pill:hover { background: var(--wine-700); color: white; }

/* Tijdelijke highlight na cross-navigatie (bv. vanaf een wijn naar zijn kist) */
.krat-card.highlight, table.krat-table tbody tr.highlight {
  animation: highlight-flash 1.8s ease-out;
}
@keyframes highlight-flash {
  0%   { box-shadow: 0 0 0 3px var(--gold); }
  100% { box-shadow: none; }
}

/* Detailpagina van een wijn */
.back-link {
  display: inline-block; margin-bottom: 16px; color: var(--wine-700);
  text-decoration: none; font-size: 13px; font-weight: 600; cursor: pointer;
}
.back-link:hover { text-decoration: underline; }
.detail-grid {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px;
  background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow);
  border: 1px solid var(--line); padding: 24px; align-items: start;
}
.detail-photos {
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  max-height: none;
  background: transparent;
  padding: 0;
}
.detail-photos img { border-radius: 8px; height: 150px; }
.detail-info h2 { margin: 0 0 4px; font-size: 24px; }
.detail-jaar { color: var(--ink-soft); font-weight: 400; font-size: 18px; }
.detail-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0;
  padding: 16px; background: #fdf5ee; border-radius: var(--radius);
}
.detail-stats > div { display: flex; flex-direction: column; gap: 4px; }
.detail-stats .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--ink-soft); }
.detail-stats .value { font-size: 17px; font-weight: 700; color: var(--wine-800); }
.detail-kisten { margin: 16px 0; }
.detail-kisten .label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--ink-soft); margin-bottom: 6px; }
.detail-extra { font-size: 13.5px; color: var(--ink); margin: 16px 0; line-height: 1.6; }

.detail-beschrijving {
  background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow);
  border: 1px solid var(--line); padding: 24px; margin-top: 20px;
}
.detail-beschrijving h3 { margin: 0 0 12px; font-size: 17px; color: var(--wine-800); }
.detail-beschrijving p { line-height: 1.7; font-size: 14.5px; color: var(--ink); margin: 0 0 12px; }
.detail-beschrijving-bron { font-size: 12px; color: var(--ink-soft); font-style: italic; margin: 0 !important; }

/* Kist-detailpagina */
.kist-detail-title { display: flex; align-items: center; gap: 10px; margin: 4px 0 4px; font-size: 22px; }
.kist-detail-meta { color: var(--ink-soft); font-size: 14px; margin: 0 0 20px; }
.kist-wijn-block { margin-bottom: 20px; }
.kist-wijn-block .detail-info h3 { margin: 0 0 4px; font-size: 19px; }
.kist-wijn-block .detail-info .btn.secondary { margin-top: 14px; }

/* Contactkaart / modal */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(20,8,10,0.55);
  display: none; align-items: center; justify-content: center; z-index: 110; padding: 20px;
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  max-width: 420px; width: 100%; padding: 26px 28px; position: relative;
}
.modal-box h3 { margin: 0 0 6px; color: var(--wine-800); }
.modal-box p { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 18px; }
.modal-close {
  position: absolute; top: 14px; right: 16px; background: none; border: none;
  font-size: 22px; cursor: pointer; color: var(--ink-soft);
}
.contact-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.contact-row:first-of-type { border-top: none; }
.contact-row .icon { font-size: 18px; width: 24px; text-align: center; }
.contact-row a { color: var(--wine-700); font-weight: 600; text-decoration: none; }
.contact-row a:hover { text-decoration: underline; }

/* Printweergave (PDF-export via browser 'Afdrukken naar PDF') */
#printArea { display: none; }
@media print {
  /* Verberg alle andere inhoud met display:none (niet visibility:hidden) zodat deze
     geen ruimte meer inneemt in de paginalayout — anders blijft de (onzichtbare) hoofdinhoud
     van de site meetellen voor de totale documenthoogte en ontstaan er lege pagina's na de
     eigenlijke tabel (dit veroorzaakte de lege pagina's aan het einde van de PDF-export). */
  body > *:not(#printArea) { display: none !important; }
  #printArea { display: block; position: static; width: 100%; padding: 20px; }
  #printArea h1 { font-family: Georgia, serif; color: #3a0d16; margin: 0 0 2px; }
  #printArea .print-meta { font-size: 11px; color: #6b5d57; margin-bottom: 16px; }
  #printArea table { width: 100%; border-collapse: collapse; font-size: 11px; }
  #printArea th, #printArea td { border-bottom: 1px solid #ccc; padding: 5px 6px; text-align: left; }
  #printArea th { background: #f0e6e6; }
  #printArea tfoot td { font-weight: 700; border-top: 2px solid #3a0d16; }
  #printArea tr { page-break-inside: avoid; }
  #printArea .print-footnote { font-size: 10px; color: #6b5d57; margin-top: 10px; }
}

@media (max-width: 780px) {
  .detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .top-bar-inner { flex-direction: column; align-items: flex-start; }
  table.krat-table { font-size: 12px; }
  table.krat-table th, table.krat-table td { padding: 8px 6px; }
}