/* ==========================================================================
   RT5 — "Supper club" design system
   One stylesheet, no framework. Warm paper, deep green, wine and gold.
   ========================================================================== */

:root {
  --cream: #F6F1E7;
  --cream-2: #EFE7D8;
  --paper: #FFFDF8;
  --ink: #1E2A24;
  --ink-2: #4A5650;
  --muted: #626A64;   /* 4.95:1 on cream, 5.49 on paper, 4.54 on cream-2 */
  --line: #DCD3C2;
  --green: #1F4D3A;
  --green-2: #2C6B51;
  --green-soft: #E3EDE6;
  --wine: #7A2E2E;
  --wine-soft: #F3E3E3;
  --gold: #B8934B;
  --gold-soft: #F4EBD6;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 8px 24px rgba(30, 42, 36, .08);
  --shadow-sm: 0 2px 6px rgba(30, 42, 36, .06);

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --sidebar-w: 260px;
}

/* --------------------------------------------------------------- reset -- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 .4rem;
  line-height: 1.2;
  letter-spacing: -.01em;
}

h1 { font-size: 1.9rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }

p { margin: 0 0 .8rem; }

a { color: var(--green-2); text-decoration: none; }
a:hover { color: var(--green); text-decoration: underline; }

small { font-size: .82rem; }

code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: .85em;
}

hr { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }

::selection { background: var(--gold-soft); }

/* ------------------------------------------------------------ app shell -- */

.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

.sidebar {
  background: var(--green);
  color: var(--cream);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 28px 20px 20px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: inherit;
}
.wordmark:hover { text-decoration: none; color: inherit; }

.monogram {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-weight: 600;
  font-size: .92rem;
  color: var(--gold);
  letter-spacing: .02em;
}

.monogram-logo {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  object-fit: contain;
  padding: 3px;
  background: rgba(246, 241, 231, .06);
}

.billing-preview {
  font-style: normal;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
}

.logo-preview {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 1px solid var(--line);
  object-fit: contain;
  padding: 6px;
  background: var(--cream-2);
}

.wordmark-text { min-width: 0; }

.wordmark-name {
  display: block;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--cream);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wordmark-tagline {
  display: block;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: rgba(246, 241, 231, .78);
  margin-top: .15rem;
}

.nav { display: flex; flex-direction: column; gap: 1.25rem; flex: 1 1 auto; }

.nav-group-label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: rgba(246, 241, 231, .78);
  margin: 0 0 .45rem .7rem;
}

.nav-group ul { list-style: none; margin: 0; padding: 0; }
.nav-group li { margin: 0 0 2px; }

.nav-link {
  display: block;
  padding: .46rem .7rem;
  border-radius: var(--radius-sm);
  color: rgba(246, 241, 231, .85);
  font-size: .9rem;
  font-weight: 500;
  transition: background .13s ease, color .13s ease;
}
.nav-link:hover {
  background: rgba(246, 241, 231, .1);
  color: var(--cream);
  text-decoration: none;
}
.nav-link.is-active {
  background: var(--cream);
  color: var(--green);
  font-weight: 600;
}
.nav-link.is-active:hover { background: var(--cream); color: var(--green); }
.nav-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.sidebar-foot {
  border-top: 1px solid rgba(246, 241, 231, .16);
  padding-top: 1rem;
  margin-top: auto;
}

.user-chip {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .3rem .2rem .7rem;
  color: inherit;
}
.user-chip:hover { text-decoration: none; color: inherit; }
.user-chip:hover .user-chip-name { text-decoration: underline; }

.avatar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--green-2);
  color: var(--cream);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .03em;
  border: 1px solid rgba(246, 241, 231, .2);
}

.user-chip-text { min-width: 0; }
.user-chip-name {
  display: block;
  font-size: .88rem;
  font-weight: 500;
  color: var(--cream);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-chip-role {
  display: block;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: rgba(246, 241, 231, .78);
}

.btn-logout {
  width: 100%;
  background: transparent;
  border: 1px solid rgba(246, 241, 231, .28);
  color: rgba(246, 241, 231, .85);
  padding: .45rem .7rem;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: .84rem;
  cursor: pointer;
  transition: background .13s ease, border-color .13s ease, color .13s ease;
}
.btn-logout:hover {
  background: rgba(246, 241, 231, .1);
  border-color: rgba(246, 241, 231, .5);
  color: var(--cream);
}

.content {
  background: var(--cream);
  padding: 40px;
  max-width: 1100px;
  width: 100%;
  min-width: 0;
  /* maatcontainer: het factuurpaneel kijkt naar de ruimte die het hier krijgt,
     niet naar de breedte van het venster (de zijbalk telt dus niet mee). */
  container-type: inline-size;
}

/* ----------------------------------------------------------- page head -- */

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-bottom: 1.1rem;
  margin-bottom: 1.6rem;
  border-bottom: 1px solid var(--line);
}

.page-head h1 { margin: 0; }

.page-head .sub {
  margin: .3rem 0 0;
  color: var(--muted);
  font-size: .9rem;
}

.page-head .actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.breadcrumb {
  display: inline-block;
  margin-bottom: .9rem;
  font-size: .84rem;
  color: var(--muted);
}
.breadcrumb:hover { color: var(--green); }

/* ---------------------------------------------------------------- tabs -- */

.tabs {
  display: flex;
  gap: .25rem;
  flex-wrap: wrap;
  margin: -.6rem 0 1.6rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: .55rem;
}

.tab {
  padding: .38rem .8rem;
  border-radius: 999px;
  font-size: .87rem;
  font-weight: 500;
  color: var(--ink-2);
  transition: background .13s ease, color .13s ease;
}
.tab:hover { background: var(--cream-2); color: var(--ink); text-decoration: none; }
.tab.is-active { background: var(--green); color: var(--cream); }
.tab.is-active:hover { background: var(--green); color: var(--cream); }
.tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* --------------------------------------------------------------- cards -- */

/* Alles in de contentkolom loopt van rand tot rand; alleen de auth-kaart,
   de toast en de filterveldjes hebben een eigen maximumbreedte. */
.content > .card,
.content > .panel,
.content > details.panel,
.content > .filters,
.content > .stat-grid,
.content > .table-wrap,
.content > .facturen-split,
.content > form,
.content > .card-grid { width: 100%; max-width: none; }

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  width: 100%;
  min-width: 0;
}

/* een kaart met een onomkeerbare actie erin */
.card.is-danger { border-color: #E6CFCF; }
.card.is-danger .card-head { background: var(--wine-soft); border-bottom-color: #E6CFCF; }
.card.is-danger .card-head h2 { color: var(--wine); }

.card-pad { padding: 22px 24px; }

.card + .card, .card + .table-wrap, .table-wrap + .card { margin-top: 1.2rem; }

.card-head {
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
}
.card-head h2 { margin: 0; }
.card-head .sub { margin: .15rem 0 0; color: var(--muted); font-size: .85rem; }

/* a thin divider between two groups of controls inside one card */
.card-rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 1.2rem 0;
}

/* a card carrying something the reader must act on right now */
.card.is-highlight {
  border-color: #E7D8B4;
  background: var(--gold-soft);
  box-shadow: none;
}
.card.is-highlight .code-block { background: var(--paper); }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.2rem;
  align-items: start;
}

/* ---------------------------------------------------------------- stat -- */

.stat-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.6rem;
}

.stat {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 16px 18px;
}

.stat-label {
  display: block;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: var(--muted);
}

.stat-value {
  display: block;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: .3rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.stat-value.is-in { color: var(--green); }
.stat-value.is-out { color: var(--wine); }

.stat-hint {
  display: block;
  font-size: .78rem;
  color: var(--muted);
  margin-top: .15rem;
}

.stat.is-accent { background: var(--green-soft); border-color: #CBDCD1; }

/* -------------------------------------------------------------- tables -- */

.table-wrap {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
  width: 100%;
  min-width: 0;
}

/* inside a card the wrapper only needs to provide the horizontal scroll */
.table-wrap.is-flush { border: 0; border-radius: 0; box-shadow: none; background: transparent; }

.table {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  font-size: .9rem;
}

/* de smalle tabel naast een previewpaneel */
.table.is-compact { font-size: .8rem; }
.table.is-compact td, .table.is-compact thead th { padding: .32rem .4rem; }
.table.is-compact thead th { font-size: .62rem; letter-spacing: .03em; }
/* de smalle kolom mag de tenaamstelling desnoods midden in een woord breken;
   anders duwt één lange bedrijfsnaam het bedrag buiten beeld */
.table.is-compact .cell-meta { font-size: .74rem; overflow-wrap: anywhere; }
.table tbody tr.is-selected td { background: var(--green-soft); }
.table tbody tr.is-selected:hover td { background: var(--green-soft); }

.table thead th {
  background: var(--cream-2);
  text-align: left;
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-2);
  padding: .7rem .75rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.table td {
  padding: .7rem .75rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background .1s ease; }
.table tbody tr:hover { background: var(--cream-2); }

.table tfoot td, .table tfoot th,
.table .row-total td, .table .row-total th {
  background: var(--cream-2);
  font-weight: 600;
  padding: .7rem .75rem;
  text-align: left;
  border-top: 1px solid var(--line);
}

.table .num, .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.table tbody tr.is-dim td { color: var(--muted); }
.table .cell-actions { text-align: right; white-space: nowrap; width: 1%; }
.table .cell-actions > * { vertical-align: middle; }

.cell-title { font-weight: 500; }
.cell-meta { display: block; color: var(--muted); font-size: .8rem; }
a.cell-meta:hover { color: var(--green); }

/* ------------------------------------------------------- preview pane -- */
/* Facturen: links de tabel, rechts de PDF die meescrollt. */

.facturen-split { display: grid; gap: 24px; align-items: start; }

/* Past er 720 px in de content, dan gaat de pdf rechts naast de lijst staan en
   krijgt hij tweederde van de ruimte. Zo niet, dan stapelt hij met de gekozen
   factuur bovenaan -- anders scroll je eerst langs alle rijen voor je hem ziet. */
@container (min-width: 720px) {
  .facturen-split.has-preview { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
}

@container (max-width: 719.98px) {
  .facturen-split.has-preview { grid-template-columns: 1fr; }
  .facturen-split.has-preview .preview-pane { position: static; height: auto; order: -1; }
  .facturen-split.has-preview .preview-frame { height: 80vh; flex: 0 0 auto; }
}

.preview-pane {
  position: sticky;
  top: 16px;
  height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  min-width: 0;
}

.preview-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
  flex-wrap: wrap;
  padding: 14px 16px 10px;
}
.preview-head .preview-number { font-family: var(--serif); font-size: 1.05rem; font-weight: 600; }
.preview-status { text-align: right; }

.preview-actions {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  padding: 0 16px 12px;
  border-bottom: 1px solid var(--line);
}

.preview-frame {
  display: block;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  border: 0;
  background: var(--cream-2);
}

.preview-foot {
  margin: 0;
  padding: .5rem 16px;
  font-size: .78rem;
  border-top: 1px solid var(--line);
  flex: 0 0 auto;
}

/* Terugval voor browsers zonder containerqueries, en voor echt smalle schermen:
   gestapeld, met de gekozen factuur boven de lijst -- anders scroll je eerst
   langs alle rijen voordat je de pdf ziet. */
@media (max-width: 720px) {
  .facturen-split.has-preview { grid-template-columns: 1fr; }
  .facturen-split.has-preview .preview-pane { position: static; height: auto; order: -1; }
  .facturen-split.has-preview .preview-frame { height: 80vh; flex: 0 0 auto; }
}

/* ------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .52rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--green);
  background: var(--green);
  color: var(--cream);
  font: inherit;
  font-size: .88rem;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background .13s ease, border-color .13s ease, color .13s ease, box-shadow .13s ease, transform .06s ease;
}
.btn:hover {
  background: var(--green-2);
  border-color: var(--green-2);
  color: var(--cream);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.btn[disabled], .btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

.btn-secondary {
  background: var(--paper);
  border-color: var(--line);
  color: var(--ink);
}
.btn-secondary:hover {
  background: var(--cream-2);
  border-color: var(--ink-2);
  color: var(--ink);
}

.btn-danger { background: var(--wine); border-color: var(--wine); color: #fff; }
.btn-danger:hover { background: #8f3a3a; border-color: #8f3a3a; color: #fff; }

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ink-2);
  padding-left: .55rem;
  padding-right: .55rem;
}
.btn-ghost:hover { background: var(--cream-2); border-color: transparent; color: var(--ink); box-shadow: none; }

.btn-sm { padding: .3rem .6rem; font-size: .8rem; border-radius: 6px; }
.btn.is-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }

.btn-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

.icon-link {
  display: inline-block;
  font-size: 1rem;
  line-height: 1;
  padding: .25rem;
  border-radius: 6px;
  text-decoration: none;
}
.icon-link:hover { background: var(--cream-2); text-decoration: none; }

/* -------------------------------------------------------------- badges -- */

.badge {
  display: inline-block;
  padding: .16rem .55rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge-green { background: var(--green-soft); color: var(--green); border-color: #CBDCD1; }
.badge-wine  { background: var(--wine-soft); color: var(--wine); border-color: #E6CFCF; }
.badge-gold  { background: var(--gold-soft); color: #6F5420; border-color: #E7D8B4; }
.badge-muted { background: var(--cream-2); color: var(--ink-2); border-color: var(--line); }

/* -------------------------------------------------------------- inputs -- */

input, select, textarea {
  width: 100%;
  padding: .5rem .65rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: .9rem;
  transition: border-color .13s ease, box-shadow .13s ease;
}

textarea { resize: vertical; min-height: 4.5rem; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--green-2);
  box-shadow: 0 0 0 3px rgba(44, 107, 81, .15);
}

input::placeholder, textarea::placeholder { color: var(--muted); }

input[type="checkbox"], input[type="radio"] {
  width: auto;
  accent-color: var(--green);
  vertical-align: middle;
  margin: 0;
}

input[type="file"] {
  padding: .4rem;
  background: var(--cream-2);
  cursor: pointer;
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238A9189' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .6rem center;
  padding-right: 1.9rem;
}

.field { display: block; margin-bottom: 1rem; }
.field > span {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: .3rem;
  letter-spacing: .01em;
}
.field .hint { display: block; font-weight: 400; color: var(--muted); font-size: .78rem; margin-top: .25rem; }

.field-check {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .87rem;
  color: var(--ink-2);
  white-space: nowrap;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0 1rem;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-top: .4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

/* filters: a compact inline row of selects/inputs */
.filters {
  display: flex;
  width: 100%;
  align-items: flex-end;
  gap: .6rem;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
}
.filters .field { margin-bottom: 0; }
.filters select, .filters input[type="text"], .filters input:not([type]) { min-width: 10rem; width: auto; }
.filters .field-check { padding-bottom: .55rem; }

.inline-form { display: inline-flex; align-items: center; gap: .3rem; margin: 0; flex-wrap: wrap; }
.inline-form .cell-meta { flex-basis: 100%; margin-top: .1rem; }
.inline-form input, .inline-form select { font-size: .82rem; padding: .28rem .5rem; min-width: 8rem; }
/* de chevron van een select heeft eigen ruimte nodig, ook in een tabelrij */
.inline-form select { padding-right: 1.7rem; }
.inline-form.is-block { display: flex; margin-top: .3rem; }

/* ------------------------------------------------------------- panels --- */

details.panel {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.2rem;
}

details.panel > summary {
  list-style: none;
  cursor: pointer;
  padding: .7rem 1rem;
  font-size: .88rem;
  font-weight: 500;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: .5rem;
  border-radius: var(--radius);
  transition: background .13s ease;
}
details.panel > summary::-webkit-details-marker { display: none; }
details.panel > summary::before {
  content: "+";
  display: inline-grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--green);
  font-size: .85rem;
  line-height: 1;
}
details.panel[open] > summary::before { content: "–"; }
details.panel > summary:hover { background: var(--cream-2); }
details.panel[open] > summary {
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--cream-2);
}
.panel-body { padding: 18px 20px; }

/* --------------------------------------------------------- empty state -- */

.empty {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: rgba(255, 253, 248, .5);
  padding: 2.4rem 1.5rem;
  text-align: center;
  color: var(--muted);
}
.empty-title {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink-2);
  margin: 0 0 .25rem;
}
.empty p { margin: 0; font-size: .88rem; }
.empty .btn { margin-top: 1rem; }
td.empty-cell { text-align: center; color: var(--muted); padding: 2rem 1rem; }

/* ------------------------------------------------------------ callouts -- */

.callout {
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm);
  background: var(--gold-soft);
  padding: .85rem 1.1rem;
  font-size: .89rem;
  margin-bottom: 1.2rem;
}
.callout.is-green { background: var(--green-soft); border-left-color: var(--green); border-color: #CBDCD1; }
.callout.is-wine { background: var(--wine-soft); border-left-color: var(--wine); border-color: #E6CFCF; }
.callout p:last-child { margin-bottom: 0; }

.error {
  color: var(--wine);
  background: var(--wine-soft);
  border: 1px solid #E6CFCF;
  border-left: 3px solid var(--wine);
  border-radius: var(--radius-sm);
  padding: .6rem .9rem;
  font-size: .88rem;
  margin-bottom: 1rem;
}

.muted { color: var(--muted); }
.small-caps {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: var(--muted);
}

.code-block {
  display: block;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .7rem .75rem;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: .8rem;
  color: var(--ink);
  word-break: break-all;
  margin-bottom: .8rem;
}

/* --------------------------------------------------------------- toast -- */

.toast {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 50;
  max-width: min(24rem, calc(100vw - 40px));
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: .8rem 1.1rem;
  font-size: .88rem;
  color: var(--ink);
  animation: toast-in .28s ease both;
}
.toast-error { border-left-color: var(--wine); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
.toast.is-gone { opacity: 0; transform: translateY(-8px); transition: opacity .3s ease, transform .3s ease; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ------------------------------------------------------------ timeline -- */

.timeline { margin-bottom: 2rem; }

.month-group + .month-group { margin-top: 1.8rem; }

.month-heading {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink-2);
  margin: 0 0 .7rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  gap: .6rem;
}
.month-heading .count { font-family: var(--sans); font-size: .72rem; color: var(--muted); font-weight: 400; }

.event {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 14px 18px;
  margin-bottom: .6rem;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.event:hover { box-shadow: var(--shadow); border-color: #CFC4AF; }
.event.is-cancelled { opacity: .6; }

.date-badge {
  flex: 0 0 auto;
  width: 54px;
  text-align: center;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .35rem .2rem .4rem;
}
.date-badge .day {
  display: block;
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.05;
  color: var(--green);
}
.date-badge .mon {
  display: block;
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  margin-top: .1rem;
}

.event-body { flex: 1 1 auto; min-width: 0; }
.event-title {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.event.is-cancelled .event-title .title-text { text-decoration: line-through; }
.event-meta {
  margin: .2rem 0 0;
  font-size: .84rem;
  color: var(--muted);
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.event-meta .sep { color: var(--line); }
.event-notes { margin: .35rem 0 0; font-size: .85rem; color: var(--ink-2); }

.event-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: .3rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* --------------------------------------------------------------- bars --- */

.bar {
  background: var(--cream-2);
  border-radius: 999px;
  height: .45rem;
  overflow: hidden;
}
.bar + .bar { margin-top: 3px; }
.bar > div { background: var(--green-2); height: 100%; border-radius: 999px; }
.bar.is-out > div { background: var(--wine); }

.bar-legend {
  display: flex;
  gap: 1rem;
  font-size: .72rem;
  color: var(--muted);
  margin-bottom: .8rem;
}
.bar-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.bar-legend i { width: .6rem; height: .6rem; border-radius: 50%; display: inline-block; }
.bar-legend .swatch-in { background: var(--green-2); }
.bar-legend .swatch-out { background: var(--wine); }

/* ------------------------------------------------------------- photos --- */

.thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .9rem;
}

.thumb { position: relative; }

.thumb-link {
  display: block;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--cream-2);
  border: 1px solid var(--line);
}
.thumb-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .2s ease;
}
.thumb-link:hover img { transform: scale(1.03); }
.thumb-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.thumb-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .4rem;
  margin-top: .35rem;
  font-size: .74rem;
  color: var(--muted);
}
.thumb-meta a { color: var(--muted); }
.thumb-meta a:hover { color: var(--green); }

.album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.1rem;
}

.album-card {
  display: block;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  color: inherit;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.album-card:hover {
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  border-color: #CFC4AF;
}
.album-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.album-cover {
  aspect-ratio: 4 / 3;
  background: var(--cream-2);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.album-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.album-cover .placeholder { font-size: 1.6rem; opacity: .35; }

.album-body { padding: .7rem .9rem .85rem; }
.album-title { font-family: var(--serif); font-size: 1rem; font-weight: 600; line-height: 1.25; }
.album-meta { font-size: .78rem; color: var(--muted); margin-top: .15rem; }

/* ------------------------------------------------------ file / avatars -- */

.file-icon {
  display: inline-grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 6px;
  background: var(--cream-2);
  border: 1px solid var(--line);
  font-size: .9rem;
  flex: 0 0 auto;
}

.file-cell { display: flex; align-items: center; gap: .6rem; }

.avatar-sm {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green);
  font-size: .7rem;
  font-weight: 600;
  border: 1px solid #CBDCD1;
  flex: 0 0 auto;
}

.name-cell { display: flex; align-items: center; gap: .6rem; }

/* ---------------------------------------------------------- auth pages -- */

body.auth { background: var(--cream); }

.auth {
  display: grid;
  grid-template-columns: 5fr 7fr;
  min-height: 100vh;
}

.auth-aside {
  background: var(--green);
  color: var(--cream);
  padding: 48px 44px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.auth-aside::after {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -120px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  border: 1px solid rgba(184, 147, 75, .3);
}

.auth-headline {
  font-family: var(--serif);
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  font-weight: 500;
  line-height: 1.05;
  color: var(--cream);
  margin: 0 0 .8rem;
  letter-spacing: -.02em;
}

.auth-lede {
  color: rgba(246, 241, 231, .72);
  font-size: .95rem;
  max-width: 24rem;
  margin: 0;
}

.auth-foot {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(246, 241, 231, .45);
}

.auth-main {
  background: var(--cream);
  display: grid;
  place-items: center;
  padding: 40px 24px;
}

.auth-card {
  width: 100%;
  max-width: 24rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px;
}
.auth-card h1 { font-size: 1.5rem; margin-bottom: .25rem; }
.auth-card .sub { color: var(--muted); font-size: .88rem; margin-bottom: 1.4rem; }
.auth-card .btn { width: 100%; margin-top: .4rem; }
.auth-links {
  margin: 1.2rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: .85rem;
  text-align: center;
}
.auth-links p { margin: 0; }

/* ----------------------------------------------------------- utilities -- */

.section-title { margin: 2rem 0 .8rem; }
.nowrap { white-space: nowrap; }

/* ---------------------------------------------------------- responsive -- */

/* Kleine laptop: smallere zijbalk en krappere paginamarge. Daarmee houdt de
   content ook op 960 px genoeg breedte over om het factuurpaneel naast de
   lijst te zetten in plaats van eronder. */
@media (max-width: 1000px) {
  :root { --sidebar-w: 190px; }
  .content { padding: 20px; }
}

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

  .sidebar {
    position: static;
    height: auto;
    flex-direction: column;
    gap: .9rem;
    padding: 14px 16px;
  }

  .sidebar-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

  .nav {
    flex-direction: row;
    gap: .9rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav-group { display: flex; align-items: center; gap: .3rem; }
  .nav-group-label { display: none; }
  .nav-group ul { display: flex; gap: .3rem; }
  .nav-group li { margin: 0; }
  .nav-link { white-space: nowrap; padding: .35rem .7rem; font-size: .85rem; }

  .sidebar-foot {
    border-top: 0;
    padding-top: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: .6rem;
  }
  .user-chip { padding: 0; }
  .user-chip-role { display: none; }
  .btn-logout { width: auto; }

  .content { padding: 20px; }

  /* --- table--stack: elke rij wordt een kaartje ------------------------- */
  /* Op een telefoon past geen tabel met vier kolommen naast elkaar. De
     koprij verdwijnt en elke cel krijgt zijn eigen labeltje terug. */
  .table--stack { display: block; font-size: .9rem; }
  .table--stack thead { display: none; }
  .table--stack tbody, .table--stack tr, .table--stack td { display: block; width: auto; }
  .table--stack tbody tr {
    padding: .8rem .9rem;
    border-bottom: 1px solid var(--line);
  }
  .table--stack tbody tr:last-child { border-bottom: 0; }
  .table--stack tbody tr:hover { background: transparent; }
  .table--stack tbody tr.is-selected td { background: transparent; }
  .table--stack tbody tr.is-selected {
    background: var(--green-soft);
    box-shadow: inset 3px 0 0 var(--green);
  }
  .table--stack td {
    padding: .2rem 0;
    border: 0;
    text-align: left;
  }
  .table--stack td::before {
    content: attr(data-label);
    display: block;
    font-size: .62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted);
    margin-bottom: .1rem;
  }
  /* de naamcel draagt de rij: geen labeltje, wel ruimte eronder */
  .table--stack td:first-child::before { display: none; }
  .table--stack td:first-child { padding-bottom: .5rem; }
  .table--stack td.num { text-align: left; }
  .table--stack td.cell-actions {
    width: auto;
    text-align: left;
    white-space: normal;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    padding-top: .6rem;
  }
  .table--stack td.cell-actions::before { flex-basis: 100%; }
  .table--stack td.cell-actions > .btn,
  .table--stack td.cell-actions > .inline-form { flex: 1 1 8rem; }
  .table--stack td.cell-actions .inline-form { display: flex; }
  .table--stack td.cell-actions .inline-form .btn { width: 100%; }
  .table--stack td.empty-cell { text-align: center; }
  .table--stack td.empty-cell::before { display: none; }
  .table--stack .inline-form { display: flex; width: 100%; }
  .table--stack .inline-form select { width: 100%; }

  .page-head { align-items: flex-start; flex-direction: column; gap: .8rem; }
  .auth { grid-template-columns: 1fr; }
  .auth-aside { padding: 32px 24px; min-height: 0; }
  .auth-aside::after { display: none; }
  .auth-main { padding: 28px 20px 48px; }
  .auth-card { padding: 24px; box-shadow: var(--shadow-sm); }
  .event { flex-wrap: wrap; }
  .event-actions { width: 100%; justify-content: flex-start; }
  h1 { font-size: 1.55rem; }
}

@media (max-width: 520px) {
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .thumbs { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .album-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

@media print {
  .sidebar, .page-head .actions, .toast, details.panel { display: none; }
  .shell { grid-template-columns: 1fr; }
  .content { padding: 0; max-width: none; }
  body { background: #fff; }
}