/* ========== RESET ========== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--color-accent);
  line-height: 1.3;
}

a { color: var(--color-primary-dark); text-decoration: none; }
a:hover { color: var(--color-primary); }

img { max-width: 100%; }

/* ========== LAYOUT ========== */
.app-layout {
  display: flex;
  min-height: 100vh;
}

.main-content {
  flex: 1;
  margin-left: var(--sidebar-width);
  padding: 32px 40px;
  max-width: 1200px;
}

/* ========== SIDEBAR ========== */
.sidebar {
  width: var(--sidebar-width);
  background: var(--color-surface);
  border-right: var(--border-width) var(--border-style) var(--color-border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  box-shadow: 2px 0 12px rgba(0,0,0,0.04);
}

.sidebar-brand {
  padding: 24px 20px 18px;
  border-bottom: var(--border-width) var(--border-style) var(--color-border);
}

.sidebar-brand h1 {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.sidebar-brand h1 span { color: var(--color-primary); }

.sidebar-brand p {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.sidebar-nav {
  flex: 1;
  padding: 14px 10px;
  overflow-y: auto;
  scroll-behavior: smooth;
}

.sidebar-nav::-webkit-scrollbar {
  width: 6px;
}

.sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 3px;
  transition: background 0.2s;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

.nav-section { margin-bottom: 18px; }

.nav-section-title {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  padding: 0 12px;
  margin-bottom: 6px;
  font-weight: 700;
  font-family: var(--font-body);
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--color-text-light);
  text-decoration: none;
  font-size: 0.88rem;
  transition: all 0.15s;
  font-weight: 400;
}

.nav-link:hover {
  background: var(--color-secondary);
  color: var(--color-text);
}

.nav-link.active {
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
}

.nav-link .nav-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: currentColor;
}

.sidebar-user {
  padding: 14px 16px;
  border-top: var(--border-width) var(--border-style) var(--color-border);
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.78rem;
  color: #fff;
  flex-shrink: 0;
}

.user-info { flex: 1; min-width: 0; }

.user-info .name {
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-info .role {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

.logout-btn {
  background: none;
  border: var(--border-width) var(--border-style) var(--color-border);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  transition: all 0.15s;
  display: flex;
  align-items: center;
}

.logout-btn:hover {
  border-color: var(--color-danger);
  color: var(--color-danger);
}

/* ========== PAGE HEADER ========== */
.page-header {
  margin-bottom: 24px;
}

.page-header h2 {
  font-size: 1.7rem;
  font-weight: 500;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-header p {
  color: var(--color-text-muted);
  font-size: 0.88rem;
}

/* ========== CARDS ========== */
.card {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: var(--border-width) var(--border-style) var(--color-border);
  overflow: hidden;
}

.card-header {
  padding: 16px 20px;
  border-bottom: var(--border-width) var(--border-style) var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-header h3 {
  font-size: 1.05rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-body { padding: 20px; }

/* ========== STAT GRID ========== */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 18px;
  border: var(--border-width) var(--border-style) var(--color-border);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.stat-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
}

.stat-card.primary::after { background: var(--color-primary); }
.stat-card.success::after { background: var(--color-success); }
.stat-card.warning::after { background: var(--color-warning); }
.stat-card.danger::after { background: var(--color-danger); }
.stat-card.info::after { background: var(--color-info); }

.stat-card .stat-icon {
  margin-bottom: 8px;
  color: var(--color-text-muted);
}

.stat-card .stat-icon svg {
  width: 22px;
  height: 22px;
}

.stat-card .stat-value {
  font-family: var(--font-heading);
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--color-accent);
  line-height: 1;
}

.stat-card .stat-label {
  font-size: 0.73rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-top: 4px;
}

/* ========== BUTTONS ========== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 22px;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  line-height: 1.4;
}

.btn svg { width: 16px; height: 16px; }

.btn-primary {
  background: var(--color-primary);
  color: #fff;
}
.btn-primary:hover {
  background: var(--color-primary-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.btn-success {
  background: var(--color-success);
  color: #fff;
}
.btn-success:hover { background: #15803d; color: #fff; }

.btn-danger {
  background: var(--color-danger);
  color: #fff;
}
.btn-danger:hover { background: #b91c1c; color: #fff; }

.btn-outline {
  background: transparent;
  border: var(--border-width) var(--border-style) var(--color-border);
  color: var(--color-text-light);
}
.btn-outline:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-sm {
  padding: 6px 14px;
  font-size: 0.78rem;
}

.btn-lg {
  padding: 14px 32px;
  font-size: 0.95rem;
}

.btn-block { width: 100%; }

.btn-icon {
  padding: 8px;
  background: transparent;
  border: var(--border-width) var(--border-style) var(--color-border);
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
}
.btn-icon:hover {
  color: var(--color-danger);
  border-color: var(--color-danger);
}

/* ========== FORMS ========== */
.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-light);
  margin-bottom: 5px;
  font-weight: 600;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 14px;
  border: var(--border-width) var(--border-style) var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.9rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: var(--color-surface);
  color: var(--color-text);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(201,169,110,0.15);
}

.form-group textarea {
  min-height: 80px;
  resize: vertical;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.form-inline {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

/* ========== TABLES ========== */
.table-wrap { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
}

thead th {
  text-align: left;
  padding: 10px 14px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  font-weight: 700;
  border-bottom: 2px solid var(--color-border);
  font-family: var(--font-body);
}

tbody td {
  padding: 10px 14px;
  font-size: 0.88rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

tbody tr:hover { background: var(--color-secondary); }

/* ========== BADGES ========== */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.badge-success, .badge-bevestigd { background: var(--color-success-bg); color: var(--color-success); }
.badge-warning, .badge-in_afwachting { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-danger, .badge-afgewezen { background: var(--color-danger-bg); color: var(--color-danger); }
.badge-info { background: var(--color-info-bg); color: var(--color-info); }
.badge-muted { background: #f3f4f6; color: #6b7280; }

.badge-betaald { background: var(--color-info-bg); color: var(--color-info); }
.badge-op-schema, .badge-op\ schema { background: var(--color-success-bg); color: var(--color-success); }
.badge-gepland { background: #f3f4f6; color: #6b7280; }
.badge-gereserveerd { background: #f3e8ff; color: #7c3aed; }

.badge-open { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-bezig { background: var(--color-info-bg); color: var(--color-info); }
.badge-afgerond { background: var(--color-success-bg); color: var(--color-success); }

/* ========== TIMELINE ========== */
.timeline {
  position: relative;
  padding-left: 36px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 13px; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--color-primary), var(--color-primary-light));
}

.timeline-item {
  position: relative;
  padding-bottom: 22px;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -27px; top: 4px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 2px solid var(--color-primary);
}

.timeline-time {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--color-accent);
}

.timeline-event {
  font-size: 0.9rem;
  color: var(--color-text-light);
}

/* ========== ALERTS ========== */
.alert {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.alert svg { width: 18px; height: 18px; flex-shrink: 0; }

.alert-success { background: var(--color-success-bg); color: var(--color-success); border: 1px solid #bbf7d0; }
.alert-danger { background: var(--color-danger-bg); color: var(--color-danger); border: 1px solid #fecaca; }
.alert-warning { background: var(--color-warning-bg); color: var(--color-warning); border: 1px solid #fde68a; }
.alert-info { background: var(--color-info-bg); color: var(--color-info); border: 1px solid #bfdbfe; }

/* ========== INFO CALLOUT ========== */
.info-callout {
  background: var(--color-secondary);
  border-left: 3px solid var(--color-primary);
  padding: 14px 18px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.88rem;
  color: var(--color-text);
  margin-top: 14px;
}

/* ========== BUDGET BARS ========== */
.budget-bar {
  height: 8px;
  background: #f0ece8;
  border-radius: 4px;
  overflow: hidden;
}

.budget-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s ease;
  background: var(--color-primary);
}

.budget-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

.budget-summary-item {
  text-align: center;
  padding: 18px;
  background: var(--color-secondary);
  border-radius: var(--radius-sm);
}

.budget-summary-item .amount {
  font-family: var(--font-heading);
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--color-accent);
}

.budget-summary-item .label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

/* ========== TASK LIST ========== */
.task-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
}

.task-item:last-child { border-bottom: none; }

.task-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: var(--color-surface);
  transition: all 0.2s;
}

.task-check.done {
  background: var(--color-success);
  border-color: var(--color-success);
  color: white;
}

.task-check.bezig {
  background: var(--color-info-bg);
  border-color: var(--color-info);
  color: var(--color-info);
}

.task-content { flex: 1; }
.task-content .task-name { font-size: 0.9rem; }
.task-content .task-name.done { text-decoration: line-through; color: var(--color-text-muted); }
.task-meta { font-size: 0.75rem; color: var(--color-text-muted); }
.task-due { font-size: 0.78rem; color: var(--color-text-muted); white-space: nowrap; }
.task-actions { display: flex; gap: 4px; }

/* ========== COLOR PALETTE ========== */
.palette-grid {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 16px 0;
}

.palette-swatch { text-align: center; }

.swatch-color {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  margin: 0 auto 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border: 3px solid var(--color-surface);
}

.swatch-name { font-size: 0.78rem; font-weight: 600; color: var(--color-text); }
.swatch-hex { font-size: 0.7rem; color: var(--color-text-muted); font-family: monospace; }

/* ========== PALETTE PRESETS ========== */
.palette-presets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin: 12px 0 0; }
.palette-preset-card { border: 2px solid var(--color-border); border-radius: 10px; padding: 12px 10px; text-align: center; background: var(--color-surface); transition: border-color 0.2s, box-shadow 0.2s; }
.palette-preset-card:hover { border-color: var(--color-primary-light); }
.palette-preset-card.selected { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(196,168,130,0.2); }
.preset-swatches { display: flex; gap: 4px; justify-content: center; margin-bottom: 8px; flex-wrap: wrap; min-height: 28px; align-items: center; }
.preset-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--color-surface); box-shadow: 0 1px 4px rgba(0,0,0,0.18); flex-shrink: 0; }
.preset-name { font-size: 0.76rem; font-weight: 600; color: var(--color-text); margin-bottom: 8px; line-height: 1.3; }
.custom-color-form { display: none; margin-top: 16px; padding: 16px; background: var(--color-bg); border-radius: var(--radius); border: 1px solid var(--color-border); }
.custom-color-form.open { display: block; }

/* ========== LOGIN PAGE ========== */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  padding: 20px;
}

.login-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 420px;
  padding: 44px 36px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.login-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--color-primary);
}

.login-logo {
  font-size: 1.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}

.login-logo span { color: var(--color-primary); }

.login-subtitle {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 28px;
}

.login-footer {
  margin-top: 20px;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

/* ── Login brand sub-elements ── */
.login-brand-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.8rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  margin: 4px 0 2px;
  color: var(--color-text);
}
.login-brand-tagline {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

/* ── Tab switcher ── */
.login-tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border);
  margin: 0 -36px 24px;
  padding: 0 36px;
}
.login-tab {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 10px 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  letter-spacing: 0.02em;
}
.login-tab:hover { color: var(--color-text); }
.login-tab.active {
  color: var(--color-primary-dark);
  border-bottom-color: var(--color-primary);
}

/* ── Tab panel ── */
.login-panel { text-align: left; }

/* ── Google button ── */
.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 600;
  color: #3c4043;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.btn-google:hover {
  background: #f8f9fa;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  color: #3c4043;
}

/* ── Divider ── */
.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--color-text-muted);
  font-size: 0.78rem;
}
.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* ── Forgot password link ── */
.login-forgot {
  text-align: right;
  margin: -4px 0 16px;
}
.login-forgot a {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-decoration: none;
}
.login-forgot a:hover { color: var(--color-primary-dark); text-decoration: underline; }

/* ── Password strength indicator ── */
.password-strength {
  height: 3px;
  background: var(--color-border);
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
}
.password-strength-bar {
  height: 100%;
  width: 0;
  border-radius: 2px;
  transition: width 0.25s, background 0.25s;
}
.password-strength-hint {
  font-size: 0.75rem;
  margin: 4px 0 0;
  min-height: 1em;
  color: var(--color-text-muted);
}

/* ── Trial note ── */
.trial-note {
  margin-top: 16px;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-align: center;
}

/* ── Complete profile header ── */
.login-complete-header { margin-bottom: 20px; text-align: left; }
.login-complete-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 4px;
}
.login-complete-sub {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}


/* ========== WEDDING CARDS (planner dashboard) ========== */
.wedding-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}

.wedding-card {
  background: var(--color-surface);
  border-radius: var(--radius);
  border: var(--border-width) var(--border-style) var(--color-border);
  box-shadow: var(--shadow-sm);
  padding: 22px;
  transition: box-shadow 0.2s, transform 0.2s;
  display: block;
  color: inherit;
  text-decoration: none;
}

.wedding-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  color: inherit;
}

.wedding-card h3 {
  font-size: 1.15rem;
  margin-bottom: 6px;
}

.wedding-card .wedding-meta {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.wedding-card .wedding-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.wedding-card .wedding-meta svg {
  width: 14px;
  height: 14px;
  color: var(--color-primary);
}

.wedding-card .wedding-stats {
  display: flex;
  gap: 16px;
  font-size: 0.78rem;
  color: var(--color-text-light);
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

.wedding-card .wedding-stats span {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ========== ERROR PAGES ========== */
.error-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px;
  background: var(--color-bg);
}

.error-page h1 {
  font-size: 5rem;
  font-weight: 300;
  color: var(--color-primary);
  line-height: 1;
}

.error-page p {
  color: var(--color-text-muted);
  margin: 12px 0 24px;
}

/* ========== MODAL / DETAIL SECTIONS ========== */
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.detail-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.detail-item .icon {
  width: 20px; height: 20px;
  color: var(--color-primary);
  flex-shrink: 0;
  margin-top: 2px;
}

.detail-item .label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  font-weight: 600;
}

.detail-item .value {
  font-size: 0.9rem;
  color: var(--color-text);
}

/* ========== ACCESS CODE PAGE ========== */
.access-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.access-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 440px;
  padding: 44px 36px;
  text-align: center;
}

.code-input {
  font-size: 1.8rem;
  text-align: center;
  letter-spacing: 0.5em;
  padding: 14px 20px;
  font-family: var(--font-heading);
  font-weight: 600;
}

/* ========== WISHLIST ========== */
.wishlist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
}

.wishlist-item {
  background: var(--color-surface);
  border: var(--border-width) var(--border-style) var(--color-border);
  border-radius: var(--radius);
  padding: 18px;
  position: relative;
}

.wishlist-item.claimed {
  opacity: 0.6;
}

.wishlist-item h4 { font-size: 0.95rem; margin-bottom: 4px; }
.wishlist-item p { font-size: 0.82rem; color: var(--color-text-light); margin-bottom: 10px; }

.claimed-badge {
  position: absolute;
  top: 12px;
  right: 12px;
}

/* ========== ADMIN STYLES ========== */
.admin-layout .sidebar {
  background: var(--color-accent);
}

.admin-layout .sidebar-brand h1,
.admin-layout .sidebar-brand h1 span {
  color: #fff;
}

.admin-layout .sidebar-brand p { color: rgba(255,255,255,0.5); }
.admin-layout .nav-section-title { color: rgba(255,255,255,0.4); }

.admin-layout .nav-link {
  color: rgba(255,255,255,0.7);
}

.admin-layout .nav-link:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

.admin-layout .nav-link.active {
  background: var(--color-primary);
  color: #fff;
}

.admin-layout .sidebar-user {
  border-color: rgba(255,255,255,0.1);
}

.admin-layout .user-avatar {
  background: rgba(255,255,255,0.15);
  color: #fff;
}

.admin-layout .user-info .name { color: #fff; }
.admin-layout .user-info .role { color: rgba(255,255,255,0.5); }
.admin-layout .logout-btn { border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.5); }
.admin-layout .logout-btn:hover { border-color: var(--color-danger); color: var(--color-danger); }

/* ========== MOBILE HAMBURGER ========== */
.mobile-header {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 56px;
  background: var(--color-surface);
  border-bottom: var(--border-width) var(--border-style) var(--color-border);
  z-index: 101;
  align-items: center;
  padding: 0 16px;
}

.mobile-header h1 {
  font-size: 1.1rem;
  flex: 1;
  text-align: center;
}

.hamburger-btn {
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: var(--color-text);
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 99;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 767.98px) {
  .mobile-header { display: flex; }

  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s;
  }

  .sidebar.open { transform: translateX(0); }
  .sidebar-overlay.open { display: block; }

  .main-content {
    margin-left: 0;
    padding: 72px 16px 24px;
  }

  .stat-grid { grid-template-columns: 1fr 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .wedding-grid { grid-template-columns: 1fr; }
  /* Planner wishlist: single column on tablet */
  .wishlist-grid { grid-template-columns: 1fr; }

  /* Budget summary: keep 3 cols on tablet (compact but readable) */
  .budget-summary { grid-template-columns: repeat(3, 1fr); }

  table { font-size: 0.82rem; }
  thead th, tbody td { padding: 8px 10px; }

  /* Page header heading size on tablet */
  .page-header h2 { font-size: 1.3rem; }
}

@media (max-width: 480px) {
  .stat-grid { grid-template-columns: 1fr; }
  /* Budget summary collapses at phone size */
  .budget-summary { grid-template-columns: 1fr; }
  /* Inline forms stack vertically on small phones */
  .form-inline { flex-direction: column; align-items: stretch; }
  .form-inline .btn { width: 100%; justify-content: center; }
  /* Card headers with action buttons wrap */
  .card-header.flex-between { flex-wrap: wrap; gap: 8px; }
  /* Hide less important table columns — tables scroll horizontally */
  .table-wrap { -webkit-overflow-scrolling: touch; }
  table { min-width: 480px; }
}


/* ========== UTILITY ========== */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.text-muted { color: var(--color-text-muted); }
.text-sm { font-size: 0.82rem; }
.text-center { text-align: center; }
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.gap-1 { gap: 8px; }
.gap-2 { gap: 16px; }

/* ========== SEATING PLAN ========== */
.seating-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 900px) {
  .seating-layout { grid-template-columns: 1fr; }
}

.seating-guest-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  cursor: grab;
  transition: box-shadow 0.15s, opacity 0.15s, border-color 0.15s;
  margin-bottom: 6px;
  user-select: none;
}
.seating-guest-card:hover { box-shadow: var(--shadow); border-color: var(--color-primary); }
.seating-guest-card.dragging { opacity: 0.45; cursor: grabbing; }

.guest-party-badge {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--color-primary);
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

.seating-guest-name {
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.seating-help-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 10px;
}
.seating-help-btn {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 0.75rem;
  color: var(--color-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}
.seating-help-btn:hover { color: var(--color-primary); border-color: var(--color-primary); }
.seating-help-popover {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  width: 260px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  padding: 12px 14px;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--color-text);
  z-index: 200;
}
.seating-help-popover p { margin: 0 0 8px; }
.seating-help-wrap:hover .seating-help-popover,
.seating-help-wrap.open .seating-help-popover { display: block; }

.seating-floor-plan {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}

.seating-table-zone {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius);
  padding: 12px;
  transition: border-color 0.15s, background 0.15s;
  min-height: 180px;
}
.seating-table-zone.drag-over {
  border-color: var(--color-primary);
  background: var(--color-secondary);
}
.seating-table-full { border-color: var(--color-danger); border-style: solid; }

.seating-table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.seating-table-num {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-light);
}
.seating-cap-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 20px;
  background: var(--color-secondary);
  color: var(--color-text-light);
}
.seating-cap-badge.full { background: var(--color-danger-bg); color: var(--color-danger); }

.seating-table-visual-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}

.seating-drop-hint {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-align: center;
  padding: 8px 0;
  font-style: italic;
}

.seating-assigned-guest {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  font-size: 0.8rem;
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  margin-bottom: 3px;
}
.seating-assigned-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.seating-unassign-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 2px 3px;
  border-radius: 3px;
  line-height: 1;
  display: flex;
  align-items: center;
}
.seating-unassign-btn:hover { color: var(--color-danger); background: var(--color-danger-bg); }

.seating-print-header { display: none; }

/* Print / PDF export */
@media print {
  .sidebar, .mobile-header, .sidebar-overlay,
  .seating-config-card, .seating-guest-panel,
  .print-btn, .stat-grid, .alert { display: none !important; }

  .app-layout { display: block !important; }
  .main-content { margin-left: 0 !important; padding: 16px !important; }

  .page-header { margin-bottom: 8px !important; }
  .page-header .btn { display: none !important; }

  .seating-print-header { display: block; margin-bottom: 16px; }
  .seating-print-header h2 { font-size: 1.2rem; margin-bottom: 2px; }
  .seating-print-header p { font-size: 0.85rem; color: #666; }

  .seating-layout { display: block !important; }
  .seating-floorplan-col .card { box-shadow: none; border: none; }
  .seating-floorplan-col .card-header { display: none; }

  .seating-floor-plan {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .seating-table-zone {
    border: 1px solid #ccc !important;
    page-break-inside: avoid;
    flex: 0 0 auto;
  }
  .seating-drop-hint { display: none; }
  .seating-unassign-btn { display: none; }
}

/* ========== SIDEBAR SUB-NAV ========== */
.nav-sub-group { margin-bottom: 2px; }

.nav-sub-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--color-text-light);
  cursor: pointer;
  user-select: none;
  font-family: var(--font-body);
  transition: background 0.15s, color 0.15s;
}
.nav-sub-label:hover { background: var(--color-secondary); color: var(--color-text-light); }
.nav-sub-group.open .nav-sub-label { color: var(--color-text-light); }
.nav-sub-label .nav-icon { width: 16px; height: 16px; flex-shrink: 0; }

.nav-chevron {
  margin-left: auto;
  flex-shrink: 0;
  transition: transform 0.2s ease;
  opacity: 0.5;
}
.nav-sub-group.open .nav-chevron { transform: rotate(180deg); opacity: 0.8; }

.nav-sub-items {
  display: none;
  overflow: hidden;
}
.nav-sub-group.open .nav-sub-items { display: block; }

.nav-sub-link {
  padding-left: 38px !important;
  font-size: 0.84rem !important;
}

/* ========== CEREMONY SEATING ========== */
.ceremony-kop {
  text-align: center;
  padding: 8px 12px 7px;
  background: color-mix(in srgb, var(--color-secondary) 50%, var(--color-bg));
  border: 1px solid var(--color-primary-light);
  border-radius: var(--radius);
  margin-bottom: 12px;
}
.ceremony-kop-names {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-accent);
  line-height: 1.3;
}
.ceremony-kop-label {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 4px;
}

.ceremony-aisle-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 10px 8px;
  background: linear-gradient(90deg, transparent, var(--color-primary) 20%, var(--color-primary) 80%, transparent);
  border-radius: 4px;
}
.ceremony-aisle-line {
  flex: 1;
  height: 2px;
  background: var(--color-primary);
  opacity: 0.8;
}
.ceremony-aisle-text {
  font-size: 0.75rem;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  white-space: nowrap;
  font-weight: 600;
}

.ceremony-floor {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ceremony-row-zone {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  transition: background 0.15s, border-color 0.15s;
  cursor: default;
}
.ceremony-row-zone.drag-over {
  background: var(--color-secondary);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-light);
}
.ceremony-row-zone.ceremony-row-full {
  background: color-mix(in srgb, var(--color-danger-bg) 30%, var(--color-surface));
  border-color: var(--color-danger);
}

.ceremony-row-info {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.ceremony-row-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text);
  min-width: 42px;
}
.ceremony-cap-badge {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-left: auto;
  white-space: nowrap;
}
.ceremony-cap-badge.full { color: var(--color-danger); font-weight: 600; }

.ceremony-row-guests {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-left: 52px;
}

.ceremony-back-label {
  display: none;
}

@media (max-width: 767.98px) {
  .ceremony-row-guests { padding-left: 0; }
  .ceremony-row-info { flex-wrap: wrap; }
}

/* ========== TOUR GUIDE ========== */
.tour-overlay {
  position: fixed;
  inset: 0;
  background: rgba(27, 42, 74, 0.65);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: tour-fade-in 0.3s ease;
}

/* ========== PER-SEAT ASSIGNMENT ========== */

/* Table shape decoration */
.seat-table-shape {
  display: flex;
  justify-content: center;
  margin: 4px 0 6px;
}

/* Seat slot grid per table */
.seat-slots-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
}

/* Individual seat slot */
.seat-slot {
  width: var(--seat-size, 32px);
  height: var(--seat-size, 32px);
  min-width: var(--seat-size, 32px);
  min-height: var(--seat-size, 32px);
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  position: relative;
}

.seat-slot:hover:not(.occupied) {
  border-color: var(--color-primary);
  background: var(--color-secondary);
}

.seat-slot.occupied {
  background: color-mix(in srgb, var(--color-primary) 15%, var(--color-surface));
  border-color: var(--color-primary);
}

.seat-slot[draggable="true"] {
  cursor: grab;
}

.seat-slot[draggable="true"]:active {
  cursor: grabbing;
}

.seat-slot.drag-over {
  border-color: var(--color-primary);
  background: var(--color-secondary);
  box-shadow: 0 0 0 2px var(--color-primary-light);
}

.seat-slot.drag-over-remove {
  border-color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 10%, var(--color-surface));
}

.seat-slot-name {
  font-size: var(--font-size-initials, 0.65rem);
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90%;
}

.seat-slot-plus {
  font-size: var(--font-size-initials, 0.65rem);
  color: var(--color-text-muted);
  font-weight: 300;
}

/* Ceremony seat cell: circle + label stacked */
.ceremony-seat-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.ceremony-seat-label {
  font-size: 0.58rem;
  font-weight: 600;
  color: var(--color-text);
  text-align: center;
  max-width: calc(var(--seat-size, 32px) + 16px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
  pointer-events: none;
}

/* Tooltip is rendered via JS (#ceremony-tooltip) to avoid overflow-x:auto clipping */

/* Override .seating-table-zone for per-seat design */
.seating-table-zone {
  border-style: solid;
  min-height: auto;
  width: fit-content;
  padding: 10px 12px 14px;
}

/* Ceremony "zonder stoel" filter toggle — clear on/off state */
.ceremony-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  padding: 4px 10px;
}
.ceremony-filter-btn .ceremony-filter-ic { flex-shrink: 0; }
.ceremony-filter-btn[aria-pressed="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.ceremony-filter-btn[aria-pressed="true"] .ceremony-filter-ic {
  fill: rgba(255,255,255,0.25);
}

/* Guest assignment status list in sidebar */
.seating-guest-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}
.seating-guest-status.complete {
  border-color: var(--color-success);
  background: var(--color-success-bg);
}
.guest-status-name {
  font-size: 0.82rem;
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Ceremony per-seat row */
.ceremony-seat-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
  margin-top: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.ceremony-seat-section {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--seat-gap, 4px);
  align-items: flex-start;
  /* Spread seats across the full row width so they reach the right edge
     (under the "x/y" badge) instead of leaving a big empty gap. The gap
     acts as the minimum spacing; space-between distributes the surplus.
     When the row is too wide to fit (many seats), it packs at the minimum
     gap and the .ceremony-seat-row scrolls horizontally. */
  width: 100%;
  justify-content: space-between;
}

/* Centre aisle (middenpad) — always present between the two seat halves.
   A clearly readable vertical channel with a dashed walking path and a
   rotated label, so it reads as an aisle on desktop AND mobile. */
.ceremony-aisle {
  flex: 0 0 auto;
  align-self: stretch;
  min-width: 44px;
  margin: 0 8px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Dashed centre line = the walking path */
  background:
    repeating-linear-gradient(
      to bottom,
      var(--color-primary-light) 0,
      var(--color-primary-light) 6px,
      transparent 6px,
      transparent 12px
    ) center / 2px 100% no-repeat;
}
.ceremony-aisle .ceremony-aisle-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary-dark, var(--trwn-accent));
  font-weight: 700;
  background: var(--color-surface);
  padding: 4px 1px;
  border-radius: 4px;
}

@media (max-width: 767.98px) {
  /* On phones the row scrolls horizontally; keep the aisle obvious but
     a little narrower so more seats stay visible. */
  .ceremony-aisle { min-width: 34px; margin: 0 5px; }
  .ceremony-aisle .ceremony-aisle-text { font-size: 0.55rem; letter-spacing: 0.12em; }
}

/* Ceremony row zone: override for per-seat design */
.ceremony-row-zone {
  padding: 10px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 8px;
  background: var(--color-surface);
}
.ceremony-row-zone.ceremony-row-full {
  border-color: var(--color-primary);
}

/* Seat picker popup */
.seat-picker {
  position: fixed;
  z-index: 300;
  width: 260px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.seat-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}
.seat-picker-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-text);
}
.seat-picker-close {
  background: none;
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 0 2px;
  line-height: 1;
  font-family: var(--font-body);
}
.seat-picker-close:hover { color: var(--color-danger); }
.seat-picker-clear {
  display: block;
  width: calc(100% - 16px);
  margin: 8px 8px 2px;
  font-size: 0.75rem;
  color: var(--color-danger);
  border-color: var(--color-danger);
}
.seat-picker-search {
  display: block;
  width: calc(100% - 16px);
  margin: 6px 8px 2px;
  padding: 6px 10px;
  font-size: 0.82rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  font-family: var(--font-body);
}
.seat-picker-list {
  max-height: 220px;
  overflow-y: auto;
  padding: 4px 0 8px;
}
.seat-picker-guest {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 0.82rem;
  transition: background 0.1s;
  gap: 8px;
}
.seat-picker-guest:hover { background: var(--color-secondary); }
.seat-picker-guest.current { background: var(--color-secondary); }
.picker-guest-name {
  font-weight: 600;
  color: var(--color-text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.picker-guest-status {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  flex-shrink: 0;
}
.picker-guest-status.has-room { background: var(--color-success-bg); color: var(--color-success); }
.picker-guest-status.no-room  { background: var(--color-warning-bg); color: var(--color-warning); }
.seat-picker-empty {
  padding: 16px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.82rem;
}

@keyframes tour-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.tour-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0,0,0,0.22);
  width: 100%;
  max-width: 460px;
  padding: 32px 36px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: tour-slide-up 0.35s cubic-bezier(0.34,1.56,0.64,1);
}

@keyframes tour-slide-up {
  from { transform: translateY(28px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.tour-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tour-brand-icon {
  color: var(--color-text);
  opacity: 0.7;
  height: 22px;
  width: auto;
}

.tour-skip {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  padding: 4px 0;
  font-family: var(--font-body);
  transition: color 0.15s;
}
.tour-skip:hover { color: var(--color-text-light); }

.tour-progress {
  display: flex;
  gap: 6px;
  justify-content: center;
}

.tour-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border);
  transition: background 0.2s, transform 0.2s;
}
.tour-dot.active {
  background: var(--color-primary);
  transform: scale(1.25);
}
.tour-dot.done {
  background: var(--color-primary-light);
}

.tour-step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
}
.tour-step-icon svg {
  width: 72px;
  height: 72px;
  color: var(--color-primary);
}

.tour-step-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tour-step-title {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 500;
  color: var(--color-accent);
  margin: 0;
}

.tour-step-body {
  font-size: 0.95rem;
  color: var(--color-text-light);
  line-height: 1.65;
  margin: 0;
}

.tour-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
}

.tour-btn-prev {
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-text-light);
  padding: 9px 20px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  cursor: pointer;
  font-family: var(--font-body);
  transition: border-color 0.15s, color 0.15s;
}
.tour-btn-prev:hover { border-color: var(--color-primary); color: var(--color-primary); }
.tour-btn-prev:disabled { opacity: 0.35; cursor: default; pointer-events: none; }

.tour-btn-next {
  background: var(--color-primary);
  color: #fff;
  border: none;
  padding: 9px 24px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background 0.15s, transform 0.1s;
}
.tour-btn-next:hover { background: var(--color-primary-dark); }
.tour-btn-next:active { transform: scale(0.97); }

@media (max-width: 500px) {
  .tour-card {
    padding: 24px 20px 20px;
    gap: 16px;
    border-radius: var(--radius);
  }
  .tour-step-title { font-size: 1.25rem; }
  .tour-step-icon { height: 60px; }
  .tour-step-icon svg { width: 56px; height: 56px; }
}

/* Modal Styles */
.modal {
  /* Legacy bare modals (e.g. add-task) are NOT wrapped in a flex
     .modal-overlay, so they centre themselves with fixed positioning.
     Modals INSIDE a .modal-overlay are re-positioned to relative below
     (the overlay's flexbox handles centring for those). */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  z-index: 1000;
  /* width is responsive (92vw) and capped by max-width per size class below.
     NB: do NOT hard-set width to a px value here — that would override the
     size-class max-width and pin every modal to one width. */
  width: 92vw;
  max-width: 560px;
  /* Audit-extra-22: dvh shrinks when iOS keyboard appears; vh fallback */
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* Canonical modals live inside a flex .modal-overlay which centres them,
   so reset the fixed positioning to normal flow within the overlay. */
.modal-overlay .modal {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
}

/* Standard modal sizes — prefer over inline max-width.
   sm: small form (single column, ~1-3 fields)
   md: standard form (default; 4-8 fields)
   lg: complex form (multi-column, tabs, lists)
   xl: wide form (5+ column tables like the guest-add grid) */
.modal.modal-sm { max-width: 420px; }
.modal.modal-md { max-width: 560px; }
.modal.modal-lg { max-width: 760px; }
.modal.modal-xl { max-width: 980px; }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.modal-overlay[hidden] {
  display: none;
}

.modal-header {
  padding: 16px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  margin: 0;
  font-size: 1.25rem;
}

.modal-body {
  padding: 16px;
}

.modal-content {
  padding: 20px 24px 24px;
}

.modal-content .form-group {
  margin-bottom: 16px;
}

.modal-footer {
  padding: 16px;
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: 0;
  font-size: 1.5rem;
  cursor: pointer;
}

.modal-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

/* Tab Styles */
.modal-tab {
  background: none;
  border: none;
  padding: 12px 16px;
  cursor: pointer;
  font-weight: 600;
  color: var(--color-text-muted);
  border-bottom: 3px solid transparent;
  transition: all 0.2s ease;
}

.modal-tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.modal-tab-content {
  display: none;
}

.modal-tab-content.active {
  display: block;
}

/* RSVP cards: the collapse toggle (chevron) and tap-to-expand behaviour are
   mobile-only (see mobile-redesign.css). On desktop the chevron is hidden and
   the card body is always visible. */
.rsvp-chev { display: none; }

/* ── Opstelling landscape viewer (mobile seating/ceremony) ──────────────
   Fullscreen overlay that shows the floor plan in landscape. Opened only
   from a mobile button; behaviour in main.js. The rotation is driven by the
   device's *orientation* (not width) so it works in any width: in portrait
   the content is rotated 90° (fake landscape for iOS, which can't lock
   orientation); in landscape (incl. Android after a real orientation lock)
   it shows upright and fills the screen. Kept outside width media queries on
   purpose — a phone in landscape can be wider than the mobile breakpoint. */
.opstelling-viewer { position: fixed; inset: 0; z-index: 4000; background: var(--color-surface, #fff); display: none; }
.opstelling-viewer.is-open { display: block; }
body.opstelling-open { overflow: hidden; }
.opstelling-viewer-rot { position: absolute; inset: 0; display: flex; flex-direction: column; }
.opstelling-viewer-bar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border, #e5e0d5);
  background: var(--color-surface, #fff);
}
.opstelling-viewer-title { font-weight: 600; font-size: 15px; }
.opstelling-viewer-close { display: inline-flex; align-items: center; gap: 6px; }
.opstelling-stage {
  flex: 1 1 auto; position: relative; min-height: 0;
  overflow: auto; -webkit-overflow-scrolling: touch;
  background: var(--bg-subtle, #faf8f3);
}
/* Ceremony shows a non-interactive clone of its opstelling (view-only); the
   pointer-events:none stops taps from reaching the live ceremony handlers
   behind the overlay. Scrolling still works (it's on the .opstelling-stage). */
.opstelling-stage .opstelling-clone-wrap { padding: 16px; pointer-events: none; }
/* In the page each ceremony row (.cer-strip) is its own horizontal scroller,
   but pointer-events:none on the clone makes those per-row scrollers unusable,
   so the right side of the aisle gets clipped and unreachable. In the viewer,
   let the rows take their full natural width and scroll the whole stage
   horizontally instead — the stage (not the clone) handles the scroll. */
.opstelling-stage .cer-strip { overflow-x: visible !important; }
.opstelling-stage .opstelling,
.opstelling-stage .cer-rows,
.opstelling-stage .cer-row { min-width: max-content; }
.opstelling-hint { flex: 0 0 auto; text-align: center; font-size: 12px; color: var(--text-muted, #8a7f6d); padding: 6px 12px; }

@media (orientation: portrait) {
  .opstelling-viewer.is-open .opstelling-viewer-rot {
    top: 0; left: 100%;
    width: 100vh; height: 100vw;
    transform-origin: left top;
    transform: rotate(90deg);
  }
}
@media (orientation: landscape) {
  .opstelling-viewer .opstelling-hint { display: none; }
}

/* Alias classes for compatibility */
.tab-btn {
  background: none;
  border: none;
  padding: 12px 16px;
  cursor: pointer;
  font-weight: 600;
  color: var(--color-text-muted);
  border-bottom: 3px solid transparent;
  transition: all 0.2s ease;
}

.tab-btn.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* ─────────────────────────────────────────────────────────────────────── */
/* Seating Canvas Styles */
/* ─────────────────────────────────────────────────────────────────────── */

.seating-config-card {
  margin-bottom: 1.5rem;
}

.table-type-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.table-type-item {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.2rem;
  margin-bottom: 0.8rem;
  background: var(--color-bg-card);
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 0.9rem;
}

.table-type-item .shape-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}

.table-type-item .shape-icon svg {
  display: block;
}

.table-type-item .info {
  flex: 1;
}

.table-type-item .info-primary {
  font-weight: 600;
  color: #333;
  margin-bottom: 0.3rem;
}

.table-type-item .info-secondary {
  font-size: 0.8rem;
  color: #666;
}

.table-type-item .qty-input {
  width: 70px;
  padding: 0.6rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-align: center;
  font-size: 0.95rem;
}

.table-type-item .btn-remove {
  background: #C9A96E;
  color: white;
  border: none;
  padding: 0.6rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.table-type-item .btn-remove:hover {
  background: #a88b4a;
}

.btn-add-type {
  width: 100%;
  padding: 0.75rem;
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.95rem;
  margin-top: 0.5rem;
}

.btn-add-type:hover {
  background: #45a049;
}

/* Table-type modals: pin the action row to the bottom as a fixed footer so the
   primary button never scrolls out of the visible modal ("falls outside") on
   short viewports or long type lists. The content area scrolls between the
   sticky header and this footer. Mobile already pins .modal-actions; this
   brings the same behaviour to desktop, scoped to these two modals. */
#table-types-modal .modal,
#add-table-type-modal .modal {
  display: flex;
  flex-direction: column;
}
#table-types-modal .modal-content,
#add-table-type-modal .modal-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
#table-types-modal .modal-actions,
#add-table-type-modal .modal-actions {
  flex: 0 0 auto;
  margin: 0;
  padding: 14px 24px;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}

.seating-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 1.5rem;
  margin-top: 1rem;
}

.seating-guest-panel {
  grid-column: 1;
}

.seating-guest-panel.drag-over-remove {
  background: color-mix(in srgb, var(--color-success) 10%, var(--color-surface));
  border-color: var(--color-success);
  box-shadow: inset 0 0 8px var(--color-success-light);
}

.seating-guest-status[draggable="true"] {
  cursor: grab;
}

.seating-guest-status[draggable="true"]:active {
  cursor: grabbing;
}

.seating-guest-status.drag-over {
  background: var(--color-secondary);
  border-radius: var(--radius-sm);
}

.seating-floorplan-col {
  grid-column: 2;
  /* Grid items default to min-width:auto, so a zoomed-in (wide) floor plan
     would stretch this 1fr column and push the whole page sideways. Pin it to
     0 so the column keeps its track width and the viewport scrolls internally. */
  min-width: 0;
}

.seating-floor-plan {
  width: 100%;
}

.seating-floor-plan svg {
  max-width: 100%;
  height: auto;
}

/* ── Floor plan (HTML-positioned tables & seats) ──────────────────────────
   Replaces the old SVG renderer. Occupied seats show initials in the category
   colour with the full name in a hover tooltip — no more overlapping labels.
   Geometry lives in seating-geometry.js; these styles mirror the design
   prototype (prototypes/Tafelindeling.html) using the trwn tokens. */
.floor-wrap {
  position: relative;
  background: linear-gradient(180deg, var(--trwn-wit), var(--trwn-cream));
  border: 1px solid var(--trwn-sand-pale);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.floor-zoom {
  position: absolute; top: 14px; right: 14px; z-index: 5;
  display: flex; align-items: center; gap: 4px;
  background: #fff; border: 1px solid var(--trwn-sand-pale);
  border-radius: var(--radius-pill); padding: 4px 6px; box-shadow: var(--shadow-sm);
}
.floor-zoom button {
  width: 28px; height: 28px; border: none; background: transparent; border-radius: 50%;
  cursor: pointer; font-size: 16px; color: var(--trwn-accent);
  display: flex; align-items: center; justify-content: center;
}
.floor-zoom button:hover { background: var(--trwn-cream); }
.floor-zoom button:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.floor-zoom span { font-size: 12px; font-weight: 700; color: var(--trwn-warm-gray); min-width: 38px; text-align: center; }

.floor-viewport { height: 620px; overflow: auto; padding: 8px; cursor: grab; }
.floor-viewport.is-grabbing { cursor: grabbing; user-select: none; }
.floor-viewport.is-grabbing * { cursor: grabbing !important; }
.floor-sizer { position: relative; }
.floor-scale {
  position: relative; transform-origin: top left;
  background-color: var(--trwn-wit);
  background-image:
    linear-gradient(var(--trwn-sand-pale) 1px, transparent 1px),
    linear-gradient(90deg, var(--trwn-sand-pale) 1px, transparent 1px);
  background-size: 40px 40px;
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px var(--trwn-sand-pale);
}

/* Each table + its seats share a unit so dragging moves them together. */
.ftable-unit { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.ftable-unit > * { pointer-events: auto; }
.ftable-unit.is-dragging { z-index: 30; }

.ftable {
  position: absolute; display: flex; align-items: center; justify-content: center;
  cursor: grab; touch-action: none; user-select: none;
  background: var(--trwn-sand-pale); border: 2.5px solid var(--trwn-sand);
  box-shadow: var(--shadow-sm); transition: box-shadow .15s, border-color .15s;
}
.ftable:hover { box-shadow: var(--shadow-md); border-color: var(--trwn-accent); }
.ftable:active { cursor: grabbing; }
.ftable--round { border-radius: 50%; }
.ftable--rect { border-radius: 10px; }
.ftable-inner { text-align: center; pointer-events: none; }
.ftable-name { font-family: var(--font-serif); font-size: 18px; font-weight: 600; color: var(--trwn-accent); line-height: 1.1; white-space: nowrap; }
.ftable-count { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--trwn-warm-gray); margin-top: 2px; }
.ftable-count.is-full { color: var(--trwn-sage); }
.ftable-count.is-zero { color: var(--trwn-danger); }

.fseat {
  position: absolute; width: 40px; height: 40px; transform: translate(-50%, -50%);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: transform .12s, box-shadow .12s; z-index: 2;
}
.fseat:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.fseat.is-empty { background: #fff; border: 2px dashed var(--trwn-sand-light); }
.fseat.is-empty .fseat-face { color: var(--trwn-light-gray); font-size: 12px; font-weight: 700; }
.fseat.is-empty:hover { border-color: var(--trwn-sand); border-style: solid; background: var(--trwn-cream); transform: translate(-50%, -50%) scale(1.08); }
.fseat.is-filled { background: var(--c, var(--trwn-accent)); border: 2px solid rgba(255, 255, 255, .85); box-shadow: var(--shadow-sm); cursor: grab; }
.fseat.is-filled .fseat-face { color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.fseat.is-filled:hover { transform: translate(-50%, -50%) scale(1.12); box-shadow: var(--shadow-md); z-index: 20; }
.fseat.is-filled:active { cursor: grabbing; }
.fseat.is-over { transform: translate(-50%, -50%) scale(1.18); box-shadow: 0 0 0 3px var(--trwn-sand); }
.fseat.is-dim { opacity: .28; }

.seat-tip {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--trwn-charcoal); color: #fff; border-radius: 8px; padding: 7px 11px;
  display: flex; flex-direction: column; gap: 1px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .14s; box-shadow: var(--shadow-md); z-index: 50;
}
.seat-tip strong { font-size: 13px; font-weight: 700; }
.seat-tip span { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.seat-tip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--trwn-charcoal); }
.fseat.is-filled:hover .seat-tip { opacity: 1; }

/* Dragging a seated guest over the tray = remove. */
.seating-guest-panel.drag-over-remove .card { box-shadow: 0 0 0 2px var(--trwn-danger); }

/* ── Toolbar + category legend (FASE 2) ───────────────────────────────────
   The legend doubles as a category filter: clicking an item dims the seats
   (and tray rows) that belong to other categories. */
.seating-toolbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--trwn-sand-pale); border-radius: var(--radius-md);
  padding: 10px 14px; margin-bottom: 16px; box-shadow: var(--shadow-xs);
}
.legend { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.legend-item {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid transparent; background: transparent; border-radius: var(--radius-pill);
  padding: 5px 11px; font-size: 12px; color: var(--trwn-warm-gray);
  cursor: pointer; transition: all .15s; font-weight: 600;
}
.legend-item:hover { background: var(--trwn-cream); }
.legend-item.is-active { border-color: var(--trwn-sand-light); background: var(--trwn-cream); color: var(--trwn-charcoal); }
.legend.has-active .legend-item:not(.is-active) { opacity: .38; }
.legend-item:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.catdot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; display: inline-block; }

/* Tray rows dimmed when a legend filter is active. */
.seating-guest-status.is-dim { opacity: .32; }

/* Segmented control: Plattegrond ↔ Lijst (FASE 3). */
.seg { display: inline-flex; background: var(--trwn-cream); border: 1px solid var(--trwn-sand-pale); border-radius: var(--radius-pill); padding: 3px; gap: 2px; }
.seg-btn {
  border: none; background: transparent; color: var(--trwn-warm-gray);
  font-family: var(--font-serif); font-size: 15px; letter-spacing: .3px;
  padding: 7px 18px; border-radius: var(--radius-pill); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; transition: all .18s; white-space: nowrap;
}
.seg-btn:hover { color: var(--trwn-charcoal); }
.seg-btn.is-on { background: #fff; color: var(--trwn-charcoal); box-shadow: var(--shadow-sm); font-weight: 500; }
.seg-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.seg-btn svg { width: 16px; height: 16px; }

.seating-view-hidden { display: none !important; }

/* ── Table cards (list view, FASE 3) ──────────────────────────────────────
   A readable per-table overview: numbered seat rows with avatar, name,
   category and a remove button; empty rows invite assignment. */
.tcards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.tcard { background: #fff; border: 1px solid var(--trwn-sand-pale); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; display: flex; flex-direction: column; }
.tcard--zero { border-color: var(--trwn-blush-light); }
.tcard-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 18px 12px; }
.tcard-title { display: flex; align-items: center; gap: 9px; font-family: var(--font-serif); font-size: 21px; font-weight: 600; color: var(--trwn-charcoal); white-space: nowrap; min-width: 0; }
.tcard-count { font-size: 12px; font-weight: 700; letter-spacing: .03em; color: var(--trwn-warm-gray); background: var(--trwn-cream); border-radius: var(--radius-pill); padding: 4px 11px; flex-shrink: 0; }
.tcard-count.is-full { color: var(--trwn-sage); background: var(--trwn-success-bg); }
.tcard-count.is-zero { color: var(--trwn-danger); background: var(--trwn-danger-bg); }
.tcard-track { height: 3px; background: var(--trwn-sand-pale); margin: 0 18px; }
.tcard-track span { display: block; height: 100%; background: var(--trwn-sand); transition: width .4s; }
.tcard--full .tcard-track span { background: var(--trwn-sage); }
.tcard-seats { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 4px; }

.seatrow { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: grab; transition: background .14s, border-color .14s; position: relative; }
.seatrow:not(.seatrow--empty) { background: var(--trwn-warm-white); }
.seatrow:not(.seatrow--empty)::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 3px; background: var(--c, var(--trwn-sand)); }
.seatrow:not(.seatrow--empty):hover { border-color: var(--trwn-sand-pale); background: var(--trwn-cream); }
.seatrow:active { cursor: grabbing; }
.seatrow.is-dim { opacity: .32; }
.seatrow.is-over { border-color: var(--trwn-sand); background: var(--trwn-cream); box-shadow: 0 0 0 2px rgba(196, 168, 130, .25); }
.seatrow--empty { cursor: pointer; border: 1.5px dashed var(--trwn-sand-light); background: transparent; }
.seatrow--empty:hover { border-color: var(--trwn-sand); background: var(--trwn-cream); }
.seatrow-num { width: 20px; text-align: center; font-size: 11px; font-weight: 700; color: var(--trwn-light-gray); flex-shrink: 0; }
.seatrow-init { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.seatrow-name { font-size: 13.5px; font-weight: 600; color: var(--trwn-charcoal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.seatrow-cat { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--trwn-light-gray); white-space: nowrap; }
.seatrow-x { border: none; background: transparent; color: var(--trwn-light-gray); font-size: 17px; line-height: 1; cursor: pointer; padding: 0 2px; flex-shrink: 0; }
.seatrow-x:hover { color: var(--trwn-danger); }
.seatrow-x:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: 4px; }
.seatrow-empty-label { font-size: 12.5px; color: var(--trwn-light-gray); font-weight: 600; }

/* ── Warning bar, select hint, tray search (FASE 4) ───────────────────────── */
.warnbar {
  display: flex; align-items: center; gap: 12px;
  background: var(--trwn-warning-bg); border: 1px solid var(--trwn-sand-light);
  border-radius: var(--radius-md); padding: 11px 16px; margin-bottom: 16px; color: var(--trwn-accent);
}
.warnbar > svg { flex-shrink: 0; color: var(--trwn-sand); }
.warnbar-items { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 13px; color: var(--trwn-accent); }
.warnbar-item strong { font-weight: 700; color: var(--trwn-charcoal); }

.select-hint {
  display: flex; align-items: center; gap: 10px;
  background: var(--trwn-charcoal); color: #fff; border-radius: var(--radius-md);
  padding: 11px 18px; margin-bottom: 16px; font-size: 14px; box-shadow: var(--shadow-md);
}
.select-hint strong { font-weight: 700; }
.select-hint button {
  margin-left: auto; background: rgba(255, 255, 255, .12); color: #fff; border: none;
  border-radius: var(--radius-pill); padding: 6px 14px; font-size: 12px; cursor: pointer;
}
.select-hint button:hover { background: rgba(255, 255, 255, .22); }
.select-hint button:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.seating-panel-unassigned { font-size: 12px; color: var(--trwn-warm-gray); margin-top: 3px; }

.tray-search {
  display: flex; align-items: center; gap: 8px; margin: 0 18px 12px; padding: 8px 12px;
  background: var(--trwn-warm-white); border: 1px solid var(--trwn-sand-pale);
  border-radius: var(--radius-sm); color: var(--trwn-light-gray);
}
.tray-search:focus-within { border-color: var(--trwn-sand); box-shadow: var(--shadow-focus); }
/* input[type="text"] specificity beats the global form-input rule (border +
   focus halo) so the field is a clean part of the .tray-search box, not a
   nested second box. The outer box owns the focus ring via :focus-within. */
.tray-search input[type="text"] { flex: 1; min-width: 0; border: none; border-radius: 0; padding: 0; background: transparent; box-shadow: none; outline: none; font-family: var(--font-sans); font-size: 13.5px; color: var(--trwn-charcoal); }
.tray-search input[type="text"]:focus { border: none; background: transparent; box-shadow: none; }
.tray-search input::placeholder { color: var(--trwn-light-gray); }
.tray-search button { border: none; background: transparent; color: var(--trwn-light-gray); font-size: 17px; cursor: pointer; line-height: 1; padding: 0 2px; }
.tray-search button:hover { color: var(--trwn-accent); }

/* Selectable tray rows during click-to-assign. */
.seating-guest-status.is-selected { outline: 2px solid var(--trwn-accent); outline-offset: 1px; background: var(--trwn-cream); }

/* ── Seating canvas (SVG floor plan) ──────────────────────────────────────
   Styled via CSS custom properties so dark mode works without touching
   seating-canvas.js. Light mode keeps the original (well-readable) palette
   verbatim; theme-tinting was dropped because it hurt label contrast. */
:root {
  --stp-canvas-bg: #ffffff;
  --stp-grid-line: #f5f5f5;
  --stp-table-fill: #f7e7ce;
  --stp-table-stroke: #c9a96e;
  --stp-label: #a88b4a;
  --stp-seat-fill: #f5f5f5;
  --stp-seat-stroke: #bbbbbb;
  --stp-seat-num: #999999;
  --stp-seat-filled-fill: #dcc9b0;
  --stp-seat-filled-stroke: #a88b4a;
  --stp-seat-initials: #ffffff;
  --stp-name: #a88b4a;
}

.seating-canvas-wrapper { position: relative; display: block; width: 100%; }

.stp-canvas {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 2px solid var(--stp-table-stroke);
  border-radius: 8px;
  background-color: var(--stp-canvas-bg);
  background-image:
    linear-gradient(0deg, var(--stp-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--stp-grid-line) 1px, transparent 1px);
  cursor: grab;
  touch-action: none;       /* pointer-drag on touch without scrolling the page */
  user-select: none;
}
.stp-canvas.is-panning { cursor: grabbing; }

.stp-group { cursor: move; }
.stp-table { fill: var(--stp-table-fill); stroke: var(--stp-table-stroke); stroke-width: 3; }
.stp-label { fill: var(--stp-label); font-weight: 700; pointer-events: none; }
.stp-seat-group { cursor: pointer; }
.stp-seat { fill: var(--stp-seat-fill); stroke: var(--stp-seat-stroke); stroke-width: 2; transition: fill .12s ease, stroke .12s ease; }
.stp-seat--filled { fill: var(--stp-seat-filled-fill); stroke: var(--stp-seat-filled-stroke); }
.stp-seat-num { fill: var(--stp-seat-num); pointer-events: none; }
.stp-seat-initials { fill: var(--stp-seat-initials); font-weight: bold; pointer-events: none; }
.stp-name { fill: var(--stp-name); font-weight: 600; pointer-events: none; }
.stp-seat.seat-hover { fill: var(--stp-table-stroke); stroke: var(--stp-label); }

.seating-zoom-controls { position: absolute; top: 10px; right: 10px; z-index: 10; display: flex; gap: 5px; align-items: center; }
.btn-zoom {
  padding: 8px 12px; background: var(--stp-table-stroke); color: #fff; border: none;
  border-radius: 4px; cursor: pointer; font-size: 18px; font-weight: bold; line-height: 1;
}
.btn-zoom:hover { filter: brightness(1.06); }
.zoom-level {
  padding: 8px 12px; background: var(--stp-table-fill); color: var(--stp-label);
  border-radius: 4px; min-width: 50px; text-align: center; font-weight: 600; font-size: 13px;
}

.seat-drag-ghost {
  position: fixed; background: rgba(40, 30, 20, 0.88); color: #fff; padding: 5px 12px;
  border-radius: 20px; font-size: 0.82rem; font-weight: 600; pointer-events: none;
  z-index: 9999; white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Guest status panel */
.seating-guest-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem;
  background: #f9f9f9;
  border-radius: 4px;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  border-left: 3px solid #e0e0e0;
}

.seating-guest-status.complete {
  background: #f0f8f0;
  border-left-color: #4CAF50;
}

.guest-status-name {
  flex: 1;
  font-weight: 500;
  color: #333;
}

.guest-status-count {
  font-weight: 600;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  background: var(--color-bg-card);
  border-radius: 3px;
}

/* Seat picker modal */
.seat-picker {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-bg-card);
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  width: 300px;
  max-height: 80vh;
  max-height: 80dvh;
  display: flex;
  flex-direction: column;
  z-index: 1000;
}

.seat-picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid #eee;
}

.seat-picker-title {
  font-weight: 600;
  color: #333;
}

.seat-picker-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #999;
}

.seat-picker-close:hover {
  color: #333;
}

.seat-picker-search {
  padding: 0.75rem 1rem;
  border: none;
  border-bottom: 1px solid #eee;
  font-size: 0.9rem;
  width: 100%;
  box-sizing: border-box;
}

.seat-picker-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
}

.seat-picker-item {
  padding: 0.6rem;
  margin-bottom: 0.3rem;
  background: #f5f5f5;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  border-left: 3px solid transparent;
}

.seat-picker-item:hover {
  background: #eee;
  border-left-color: #4CAF50;
}

.seat-picker-clear {
  padding: 0.6rem 1rem;
  background: #ff9800;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  margin: 0.5rem 1rem;
}

.seat-picker-clear:hover {
  background: #f57c00;
}

/* Responsive */
@media (max-width: 1024px) {
  .seating-layout {
    grid-template-columns: 1fr;
  }

  .seating-guest-panel {
    grid-column: 1;
  }

  .seating-floorplan-col {
    grid-column: 1;
  }
}

/* ========== SEATING FULLSCREEN MODE ========== */
body.seating-fullscreen {
  overflow: hidden;
}

body.seating-fullscreen .sidebar,
body.seating-fullscreen .mobile-header,
body.seating-fullscreen .sidebar-overlay {
  display: none !important;
}

body.seating-fullscreen .app-layout {
  grid-template-columns: 1fr !important;
}

body.seating-fullscreen .main-content {
  margin-left: 0 !important;
  padding: 10px !important;
  height: 100vh;
  overflow-y: auto;
}

body.seating-fullscreen .page-header {
  margin-bottom: 10px;
}

body.seating-fullscreen .seating-config-card {
  display: none;
}

body.seating-fullscreen .stat-grid {
  display: none;
}

body.seating-fullscreen .seating-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 10px;
  height: calc(100vh - 80px);
  max-height: calc(100vh - 80px);
}

body.seating-fullscreen .seating-guest-panel {
  overflow-y: auto;
  max-height: 100%;
  padding: 0;
}

body.seating-fullscreen .seating-guest-panel .card {
  position: static !important;
  margin-bottom: 0;
  border-radius: 0;
  border: none;
}

body.seating-fullscreen .seating-guest-panel .card-header {
  padding: 10px;
  background: var(--color-primary);
  color: white;
  border-radius: 0;
}

body.seating-fullscreen .seating-guest-panel .card-header h3 {
  font-size: 0.9rem;
  margin: 0;
}

body.seating-fullscreen .seating-guest-panel .card-body {
  padding: 8px 10px;
  font-size: 0.85rem;
}

body.seating-fullscreen .seating-guest-status {
  padding: 6px 0;
  font-size: 0.8rem;
}

body.seating-fullscreen .seating-floorplan-col {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
}

body.seating-fullscreen .seating-floorplan-col .card {
  display: flex;
  flex-direction: column;
  flex: 1;
  max-height: 100%;
  margin-bottom: 0;
}

body.seating-fullscreen .seating-floorplan-col .card-header {
  padding: 10px;
  background: var(--color-primary);
  color: white;
  border-radius: 0;
}

body.seating-fullscreen .seating-floorplan-col .card-header h3 {
  font-size: 0.9rem;
  margin: 0;
}

body.seating-fullscreen .seating-floorplan-col .card-body {
  flex: 1;
  overflow: auto;
  min-height: 0;
  padding: 10px;
}

body.seating-fullscreen #seating-canvas-container {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ========== SEATING CANVAS: SEAT HOVER DURING DRAG ========== */
circle.seat-hover {
  filter: brightness(0.85) drop-shadow(0 0 8px rgba(201, 169, 110, 0.6));
  stroke-width: 3 !important;
}

/* Read-only mode: visible disable of form inputs when subscription_status='expired'.
 * Forms tagged .always-enabled (logout, /upgrade/select) bypass this.
 * The server-side blockIfReadOnly middleware is the authoritative defense. */
body.readonly-mode form:not(.always-enabled) button[type="submit"],
body.readonly-mode form:not(.always-enabled) input:not([type="hidden"]),
body.readonly-mode form:not(.always-enabled) select,
body.readonly-mode form:not(.always-enabled) textarea {
  pointer-events: none;
  opacity: 0.5;
}

/* Demo wedding banner — shown at top of every /demo/* page */
.demo-banner {
  background: linear-gradient(90deg, #FCE7C8, #F5D7B5);
  color: #6b4423;
  padding: 10px 24px;
  text-align: center;
  font-size: 14px;
  border-bottom: 1px solid #E5C49E;
}
.demo-banner strong { color: #5b3413; }
.demo-banner .btn-sm { padding: 4px 10px; font-size: 13px; }

/* Demo mode safety net: any submit-control inside body.demo-mode is visually
 * disabled. Forms tagged .always-enabled bypass (banner button, sidebar
 * stop-demo, logout, /upgrade/select). The real defense is route-level —
 * /demo/* has no write endpoints except /demo/dismiss. */
body.demo-mode form:not(.always-enabled) button[type="submit"],
body.demo-mode form:not(.always-enabled) input[type="submit"] {
  pointer-events: none;
  opacity: 0.5;
}

/* ============================================================
   Website admin — tabs + style tab
   ============================================================ */
.website-tabs { display:flex; gap:8px; border-bottom:1px solid var(--color-border, #e5e5e5); margin:20px 0 24px; flex-wrap:wrap; }
.website-tabs .tab { background:none; border:0; padding:12px 16px; cursor:pointer; font-weight:500; color:var(--color-text-muted, #666); border-bottom:2px solid transparent; }
.website-tabs .tab.active { color:var(--color-primary, #333); border-bottom-color:var(--color-primary, #333); }
.tab-panel { display:none; }
.tab-panel.active { display:block; }

.website-layout { display:grid; grid-template-columns: 360px 1fr; gap:24px; align-items:start; }
.website-layout .preview-pane { position:sticky; top:16px; }
@media (max-width: 980px) { .website-layout { grid-template-columns: 1fr; } .website-layout .preview-pane { position:static; } }
.preset-cards { display:grid; grid-template-columns: repeat(2, 1fr); gap:12px; }
.preset-card { position:relative; padding:14px; border:2px solid var(--color-border, #e5e5e5); border-radius:10px; background: var(--color-bg-card); cursor:pointer; text-align:left; }
.preset-card.active { border-color: var(--color-primary, #333); }
.preset-card .preset-swatches { display:flex; gap:4px; margin-bottom:8px; }
.preset-card .ps-chip { width:24px; height:24px; border-radius:6px; border:1px solid rgba(0,0,0,.06); }
.preset-card .preset-name { font-weight:600; }
.preset-card .preset-fonts { font-size:.8rem; color:var(--color-text-muted, #666); margin-top:4px; }
.preset-card .preset-active { position:absolute; top:8px; right:8px; font-size:.7rem; padding:2px 8px; border-radius:99px; background:var(--color-primary, #333); color:#fff; }

/* Template chooser — reuses preset-card chrome, with a mini style thumbnail */
.template-cards { display:grid; grid-template-columns: repeat(2, 1fr); gap:12px; }
.template-card { position:relative; padding:12px; border:2px solid var(--color-border, #e5e5e5); border-radius:10px; background: var(--color-bg-card); cursor:pointer; text-align:left; }
.template-card.active { border-color: var(--color-primary, #333); }
.template-card .preset-name { font-weight:600; }
.template-card .preset-fonts { font-size:.8rem; color:var(--color-text-muted, #666); margin-top:4px; }
.template-card .preset-active { position:absolute; top:8px; right:8px; font-size:.7rem; padding:2px 8px; border-radius:99px; background:var(--color-primary, #333); color:#fff; }
.template-cards .template-card.tpl-extra,
.preset-cards .preset-card.preset-extra { display:none; }
.template-cards.is-expanded .template-card.tpl-extra,
.preset-cards.is-expanded .preset-card.preset-extra { display:block; }
.template-more { display:inline-flex; align-items:center; gap:6px; margin-top:12px; padding:8px 14px; border:1px solid var(--color-border, #e5e5e5); border-radius:8px; background:var(--color-bg-card); color:var(--color-text, #333); cursor:pointer; font-size:.85rem; font-weight:500; }
.template-more:hover { border-color: var(--color-primary, #333); }
.template-more .tm-chevron { transition: transform .2s; }
.template-more[aria-expanded="true"] .tm-chevron { transform: rotate(180deg); }
.custom-style-panel { margin-top:20px; padding:16px; border:1px solid var(--color-border, #e5e5e5); border-radius:10px; background:var(--color-surface, #fff); }
.custom-style-panel[hidden] { display:none; }
.custom-style-panel h3 { margin:0 0 4px; }
.custom-intro { font-size:.85rem; color:var(--color-text-muted, #666); margin:0 0 14px; }
.custom-colors { display:grid; grid-template-columns: repeat(4, 1fr); gap:10px; margin-bottom:14px; }
.custom-color { display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; text-align:center; }
.custom-color span { font-size:.68rem; line-height:1.2; letter-spacing:0; text-transform:none; color:var(--color-text-muted, #666); }
.custom-color input[type=color] { width:46px; height:46px; border:1px solid var(--color-border, #e5e5e5); border-radius:8px; padding:2px; cursor:pointer; background:none; }
.tpl-thumb { display:block; width:100%; height:66px; border-radius:8px; margin-bottom:10px; border:1px solid rgba(0,0,0,.07); position:relative; overflow:hidden; }
.tpl-thumb::after { content:''; position:absolute; left:50%; top:54%; transform:translate(-50%,-50%); width:54%; height:7px; border-radius:2px; background:rgba(45,41,38,.55); }
.tpl-thumb-klassiek { background:linear-gradient(160deg,#FAF7F2,#EDE6D8); }
.tpl-thumb-klassiek::before { content:''; position:absolute; left:50%; top:30%; transform:translateX(-50%); width:18px; height:18px; border-radius:50%; border:1.5px solid #C4A882; }
.tpl-thumb-cinema { background:linear-gradient(180deg,#15110E 0 16%,#2D2926 16% 84%,#15110E 84% 100%); }
.tpl-thumb-cinema::after { background:#FAF7F2; }
.tpl-thumb-editorial { background:#FAF7F2 repeating-linear-gradient(90deg, transparent 0 23%, rgba(45,41,38,.12) 23% calc(23% + 1px)); }
.tpl-thumb-editorial::before { content:''; position:absolute; left:8px; right:8px; top:11px; height:1px; background:rgba(45,41,38,.55); }
.tpl-thumb-atelier { background:radial-gradient(60% 60% at 28% 28%,#F5E6E6,transparent 60%),radial-gradient(60% 60% at 76% 78%,#EDE6D8,transparent 55%),linear-gradient(160deg,#FAF7F2,#F5F0E8); }
.tpl-thumb-verhaal { background:linear-gradient(160deg,#FAF7F2,#F1E8DA); }
.tpl-thumb-verhaal::before { content:''; position:absolute; left:8px; right:8px; top:8px; height:3px; border-radius:3px; background:repeating-linear-gradient(90deg,#2D2926 0 30%,transparent 30% 34%); }
.tpl-thumb-botanica { background:radial-gradient(50% 50% at 20% 15%,rgba(212,160,160,.5),transparent 60%),radial-gradient(50% 50% at 85% 85%,rgba(168,184,156,.55),transparent 60%),linear-gradient(160deg,#FAF7F2,#F1ECE0); }
.tpl-thumb-botanica::before { content:''; position:absolute; left:50%; top:24%; transform:translateX(-50%); width:2px; height:30%; background:#7E8A5A; }
.tpl-thumb-paspoort { background:linear-gradient(160deg,#FAF7F2,#EFE7D7); }
.tpl-thumb-paspoort::before { content:''; position:absolute; left:14px; right:14px; top:30%; bottom:30%; border:1px dashed rgba(45,41,38,.5); border-radius:4px; }
.tpl-thumb-paspoort::after { width:14%; height:8px; background:repeating-linear-gradient(90deg,#2D2926 0 2px,transparent 2px 4px); border-radius:0; }
.tpl-thumb-aurora { background:radial-gradient(45% 45% at 18% 20%,rgba(212,160,160,.85),transparent 60%),radial-gradient(50% 50% at 82% 35%,rgba(168,184,156,.8),transparent 60%),radial-gradient(45% 45% at 60% 90%,rgba(196,168,130,.8),transparent 60%),linear-gradient(160deg,#FAF7F2,#EFE7DA); }
.tpl-thumb-aurora::after { width:46%; height:18px; border-radius:6px; background:rgba(255,255,255,.45); border:1px solid rgba(255,255,255,.6); }

.preview-pane { background:#f6f6f6; padding:12px; border-radius:10px; }
.preview-toolbar { display:flex; gap:6px; margin-bottom:8px; }
.vp-btn { background: var(--color-bg-card); border:1px solid var(--color-border, #e5e5e5); padding:6px 10px; border-radius:6px; cursor:pointer; }
.vp-btn.active { background: var(--color-primary, #333); color:#fff; border-color: var(--color-primary, #333); }
/* The guest site is rendered at a real desktop/mobile width and scaled down
   to fit the pane (transform + sizes set by main.js fitPreview), so full-bleed
   templates show a true miniature instead of giant viewport-relative type.
   The iframe is absolutely positioned so its 1280px layout width does NOT
   stretch the grid column (transform alone doesn't shrink layout size). */
.website-layout .preview-pane { min-width: 0; }
.preview-wrap { position:relative; width:100%; overflow:hidden; border-radius:6px; background:#fff; }
.preview-wrap iframe { position:absolute; top:0; left:0; border:0; background:#fff; transform-origin: top left; }

.row-toggle, .row-field { display:flex; gap:8px; align-items:center; margin:8px 0; }
.row-field { flex-direction:column; align-items:flex-start; }
.row-field input[type="text"], .row-field input[type="email"], .row-field input[type="date"], .row-field textarea { width:100%; padding:8px 10px; border:1px solid var(--color-border, #e5e5e5); border-radius:6px; font-family:inherit; font-size:1rem; }
.save-feedback { margin-left:8px; color:var(--color-success, #22c55e); font-size:.85rem; }

/* ============================================================
   Website admin — story tab
   ============================================================ */
.story-list { list-style:none; padding:0; margin:0; }
.story-item { display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--color-border, #e5e5e5); border-radius:8px; margin-bottom:8px; background: var(--color-bg-card); }
.story-item .drag-handle { cursor:grab; color:var(--color-text-muted, #666); font-size:1.2rem; user-select:none; }
.story-item .thumb { width:60px; height:60px; border-radius:6px; background:#f0f0f0; overflow:hidden; flex-shrink:0; }
.story-item .thumb img { width:100%; height:100%; object-fit:cover; }
.story-item .meta { flex:1; }
.story-item .meta .title { font-weight:600; }
.story-item .meta .sub { font-size:.85rem; color:var(--color-text-muted, #666); }
.btn-icon { background:none; border:0; padding:6px; cursor:pointer; font-size:1rem; }
.counter { color:var(--color-text-muted, #666); font-size:.9rem; font-weight:normal; }
.empty-hint { color:var(--color-text-muted, #666); margin-top:12px; }

/* The chapter modal puts its <h3> + <form> directly inside .modal (no
   .modal-content wrapper), so it gets no inner padding from the cascade and
   the content sits flush against the frame. Give it breathing room, and keep
   the modal off the viewport edges. */
[data-moment-modal] { padding: 24px; }
[data-moment-modal] .modal { padding: 26px 28px 24px; }
[data-moment-modal] [data-modal-title] { margin: 0 0 18px; padding-right: 28px; }
[data-moment-modal] .modal-actions { margin-top: 24px; }

/* ============================================================
   Website admin — sections + photos + access tabs
   ============================================================ */
.sections-list { list-style:none; padding:0; margin:16px 0; }
.section-row { display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--color-border, #e5e5e5); border-radius:8px; margin-bottom:6px; background: var(--color-bg-card); }
.section-row .drag-handle { cursor:grab; color:var(--color-text-muted, #666); font-size:1.2rem; }
.section-row .section-label { flex:1; }
.section-locked { color:var(--color-text-muted, #666); font-size:.9rem; }
.sections-tab .hint { font-size:.85rem; color:var(--color-text-muted, #666); margin-top:12px; }

.switch { position:relative; width:42px; height:24px; display:inline-block; }
.switch input { opacity:0; width:0; height:0; }
.switch .slider { position:absolute; inset:0; background:#ccc; border-radius:24px; transition:.2s; cursor:pointer; }
.switch .slider::before { content:""; position:absolute; width:18px; height:18px; left:3px; top:3px; background: #fff; border-radius:50%; transition:.2s; }
.switch input:checked + .slider { background: var(--color-primary, #333); }
.switch input:checked + .slider::before { transform: translateX(18px); }

.copy-row { display:flex; gap:8px; align-items:center; }
.copy-row input { flex:1; padding:8px 10px; border:1px solid var(--color-border, #e5e5e5); border-radius:6px; background:#f6f6f6; font-family: ui-monospace, monospace; }

.cover-preview { margin-bottom:12px; width:260px; height:130px; border-radius:8px; overflow:hidden; background:var(--trwn-sand-pale, #EDE6D8); display:flex; align-items:center; justify-content:center; }
/* contain (not cover) so a portrait upload shows in full, with the box's
   background filling the sides instead of cropping the photo. */
.cover-preview img { display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.cover-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.cover-reposition-surface { position:absolute; inset:0; z-index:5; cursor:grab; touch-action:none; background:transparent; }
.cover-reposition-surface:active { cursor:grabbing; }
[data-cover-reposition].active { background:var(--trwn-charcoal, #2d2926); color:#fff; }
.muted { color: var(--color-text-muted, #666); }

/* ----------------------------------------------------------------
   Viewer-couple read-only UI
   role=couple without couple_owner-rechten — body krijgt
   .is-couple-viewer via shell-start.ejs. Write-controls die met
   .viewer-hide gemarkeerd zijn in views/couple/*.ejs verdwijnen.
   ---------------------------------------------------------------- */
body.is-couple-viewer .viewer-hide,
body.is-couple-viewer [data-toggle-edit],
body.is-couple-viewer [data-modal-open],
body.is-couple-viewer [data-modal-toggle],
body.is-couple-viewer [data-action^="add-"],
body.is-couple-viewer [data-action^="edit-"],
body.is-couple-viewer [data-action^="delete-"],
body.is-couple-viewer [data-action^="remove-"],
body.is-couple-viewer [data-action^="create-"],
body.is-couple-viewer [data-action^="update-"],
body.is-couple-viewer [data-action^="new-"],
body.is-couple-viewer [data-action^="save-"],
body.is-couple-viewer form[method="POST"],
body.is-couple-viewer form[method="post"] { display: none !important; }

/* Per-seat unassign button (audit-6) — small × on occupied ceremony seats */
.seat-slot { position: relative; }
.seat-slot .seat-unassign {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #c45b5b;
  color: #fff;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.seat-slot:hover .seat-unassign,
.seat-slot .seat-unassign:focus { opacity: 1; }
.seat-slot .seat-unassign:hover { background: #a04545; }

/* ── Mobile seating: list-per-table with bottom sheets (FASE 5) ────────────
   Below 760px the floor plan is replaced by a tap-driven list (dragging works
   poorly on touch). Tabs switch between the tables and the "still to seat"
   tray; tapping a seat or guest opens a bottom sheet. */
@media (max-width: 767.98px) {
  .seating-mobile-list { display: block !important; }
  .seating-layout-pilot { display: none !important; }
  .seating-toolbar { display: none !important; }

  .m-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--trwn-warm-gray); }

  .m-progress { margin: 4px 0 16px; }
  .m-progress-bar { height: 7px; border-radius: 7px; background: var(--trwn-sand-pale); overflow: hidden; }
  .m-progress-bar span { display: block; height: 100%; border-radius: 7px; background: var(--trwn-sage); transition: width .4s; }
  .m-progress-txt { font-size: 12.5px; color: var(--trwn-warm-gray); margin-top: 7px; }
  .m-progress-txt strong { color: var(--trwn-charcoal); font-weight: 700; }

  .m-tabs { display: flex; gap: 3px; background: var(--trwn-cream); border: 1px solid var(--trwn-sand-pale); border-radius: var(--radius-pill); padding: 3px; margin-bottom: 16px; }
  .m-tabs button { flex: 1; min-height: 44px; border: none; background: transparent; border-radius: var(--radius-pill); padding: 9px 8px; font-family: var(--font-serif); font-size: 15px; color: var(--trwn-warm-gray); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
  .m-tabs button.is-on { background: #fff; color: var(--trwn-charcoal); box-shadow: var(--shadow-sm); font-weight: 500; }
  .m-tab-badge { background: var(--trwn-blush); color: #fff; font-family: var(--font-sans); font-size: 10.5px; font-weight: 700; border-radius: var(--radius-pill); padding: 1px 7px; min-width: 18px; }

  .m-list { display: flex; flex-direction: column; gap: 11px; }
  .m-table { background: #fff; border: 1px solid var(--trwn-sand-pale); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
  .m-table.is-open { box-shadow: var(--shadow-md); }
  .m-table-head { width: 100%; display: flex; align-items: center; gap: 10px; border: none; background: transparent; padding: 15px 16px 12px; cursor: pointer; text-align: left; }
  .m-table-name { flex: 1; font-family: var(--font-serif); font-size: 20px; font-weight: 600; color: var(--trwn-charcoal); }
  .m-count { font-size: 12px; font-weight: 700; color: var(--trwn-warm-gray); background: var(--trwn-cream); border-radius: var(--radius-pill); padding: 4px 11px; }
  .m-count.is-full { color: var(--trwn-sage); background: var(--trwn-success-bg); }
  .m-count.is-zero { color: var(--trwn-danger); background: var(--trwn-danger-bg); }
  .m-chev { color: var(--trwn-light-gray); transition: transform .2s; flex-shrink: 0; }
  .m-table.is-open .m-chev { transform: rotate(180deg); }
  .m-table-track { height: 3px; background: var(--trwn-sand-pale); margin: 0 16px; }
  .m-table-track span { display: block; height: 100%; transition: width .4s; }
  .m-seats { padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 5px; }
  .m-table:not(.is-open) .m-seats { display: none; }
  .m-seat { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 50px; border: 1px solid transparent; background: var(--trwn-warm-white); border-radius: var(--radius-sm); padding: 8px 12px; cursor: pointer; text-align: left; position: relative; }
  .m-seat:not(.is-empty)::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--c, var(--trwn-sand)); }
  .m-seat.is-empty { border: 1.5px dashed var(--trwn-sand-light); background: transparent; }
  .m-seat-num { width: 18px; text-align: center; font-size: 11px; font-weight: 700; color: var(--trwn-light-gray); flex-shrink: 0; }
  .m-av { border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; flex-shrink: 0; letter-spacing: .02em; }
  .m-seat-name { flex: 1; font-size: 15px; font-weight: 600; color: var(--trwn-charcoal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .m-seat-cat { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--trwn-light-gray); white-space: nowrap; }
  .m-seat-empty-label { font-size: 13.5px; font-weight: 600; color: var(--trwn-light-gray); margin-left: 2px; }

  .m-tray { display: flex; flex-direction: column; gap: 8px; }
  .m-search { display: flex; align-items: center; gap: 9px; padding: 11px 14px; background: #fff; border: 1px solid var(--trwn-sand-pale); border-radius: var(--radius-sm); color: var(--trwn-light-gray); margin-bottom: 4px; }
  .m-search:focus-within { border-color: var(--trwn-sand); box-shadow: var(--shadow-focus); }
  .m-search input[type="text"] { flex: 1; min-width: 0; border: none; border-radius: 0; padding: 0; background: transparent; box-shadow: none; outline: none; font-family: var(--font-sans); font-size: 15px; color: var(--trwn-charcoal); }
  .m-search input[type="text"]:focus { border: none; background: transparent; box-shadow: none; }
  .m-guest { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 44px; border: 1px solid var(--trwn-sand-pale); background: #fff; border-radius: var(--radius-md); padding: 11px 14px; cursor: pointer; text-align: left; box-shadow: var(--shadow-xs); }
  .m-guest-name { flex: 1; font-size: 15px; font-weight: 600; color: var(--trwn-charcoal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .m-guest-cat { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--trwn-light-gray); }
  .m-guest-go { font-family: var(--font-serif); font-size: 14px; font-weight: 600; color: #fff; background: var(--trwn-sand); border-radius: var(--radius-pill); padding: 5px 14px; flex-shrink: 0; }
  .m-tray-empty { padding: 36px 12px; text-align: center; display: flex; flex-direction: column; gap: 6px; color: var(--trwn-warm-gray); font-size: 14px; }
  .m-tray-empty strong { font-family: var(--font-serif); font-size: 20px; font-weight: 500; color: var(--trwn-charcoal); }

  /* Bottom sheet — fixed overlay over the viewport. */
  .m-sheet-wrap { position: fixed; inset: 0; z-index: 1200; pointer-events: none; }
  .m-sheet-scrim { position: absolute; inset: 0; background: rgba(45, 41, 38, .4); opacity: 0; transition: opacity .25s; }
  .m-sheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--trwn-warm-white); border-radius: 24px 24px 0 0; box-shadow: 0 -10px 40px rgba(45, 41, 38, .18); transform: translateY(100%); transition: transform .28s cubic-bezier(.32, .72, 0, 1); padding: 8px 0 38px; max-height: 82vh; display: flex; flex-direction: column; }
  .m-sheet-wrap.is-open { pointer-events: auto; }
  .m-sheet-wrap.is-open .m-sheet-scrim { opacity: 1; }
  .m-sheet-wrap.is-open .m-sheet { transform: translateY(0); }
  .m-sheet-grab { width: 40px; height: 5px; border-radius: 5px; background: var(--trwn-sand-light); margin: 6px auto 4px; }
  .m-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 20px 12px; }
  .m-sheet-title { font-family: var(--font-serif); font-size: 22px; font-weight: 500; color: var(--trwn-charcoal); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
  .m-sheet-head > div { min-width: 0; }
  .m-sheet-x { border: none; background: var(--trwn-cream); width: 40px; height: 40px; border-radius: 50%; color: var(--trwn-warm-gray); font-size: 20px; line-height: 1; cursor: pointer; flex-shrink: 0; }
  .m-sheet-body { overflow-y: auto; padding: 0 14px; }
  .m-picker { display: flex; flex-direction: column; gap: 4px; padding-bottom: 6px; }
  .m-pick { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 44px; border: none; background: transparent; border-radius: var(--radius-sm); padding: 11px 12px; cursor: pointer; text-align: left; }
  .m-pick:hover { background: var(--trwn-cream); }
  .m-pick-table { border: 1px solid var(--trwn-sand-pale); margin-bottom: 2px; }
  .m-pick:disabled { opacity: .45; cursor: default; }
  .m-pick-free { font-size: 12px; font-weight: 700; color: var(--trwn-sage); }
  .m-pick-free.is-zero { color: var(--trwn-light-gray); }
  .m-sheet-actions { padding: 4px 8px 8px; display: flex; flex-direction: column; gap: 14px; }
  .m-current { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--trwn-cream); border-radius: var(--radius-md); }
  .m-current strong { display: block; font-size: 16px; color: var(--trwn-charcoal); }
  .m-current span { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--trwn-warm-gray); }
  .m-btn-danger { border: 1px solid var(--trwn-danger); background: transparent; color: var(--trwn-danger); border-radius: var(--radius-md); padding: 13px; font-family: var(--font-serif); font-size: 16px; font-weight: 600; cursor: pointer; min-height: 44px; }
  .m-btn-danger:hover { background: var(--trwn-danger); color: #fff; }

  .m-tabs button:focus-visible, .m-seat:focus-visible, .m-guest:focus-visible,
  .m-pick:focus-visible, .m-sheet-x:focus-visible, .m-table-head:focus-visible,
  .m-btn-danger:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

  .seating-mobile-empty { padding: 24px 16px; text-align: center; color: var(--trwn-warm-gray); background: var(--trwn-warning-bg); border-radius: var(--radius-md); }
}

/* Audit-18: couple billing — mobile-friendly list cards + responsive detail */
.invoice-list-cards .invoice-card {
  display: block;
  background: var(--color-bg-card);
  border: 1px solid rgba(196,168,130,0.18);
  border-radius: 10px;
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
  margin-bottom: 10px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.invoice-list-cards .invoice-card:hover {
  border-color: var(--trwn-accent);
  box-shadow: 0 2px 8px rgba(45,41,38,0.05);
}
.invoice-list-cards .invoice-card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
}
.invoice-list-cards .invoice-card-row:first-child { margin-top: 0; }

@media (max-width: 767.98px) {
  .invoice-list-table { display: none !important; }
  .invoice-list-cards { display: block !important; }
  /* Detail-page: stack actions, tighten paddings, push totals card to full-width */
  .page-head .actions { flex-wrap: wrap; }
  .page .card .table { font-size: 13px; }
  .page .card .table thead th { padding: 6px 4px; }
  .page .card .table tbody td { padding: 8px 4px; }
}

/* Audit-20: WCAG 2.5.5 touch-targets ≥48×48px on mobile */
@media (max-width: 767.98px) {
  .sb-link {
    min-height: 48px;
    padding: 12px 14px;
    font-size: 15px;
  }
  .sb-link .sb-link-ic {
    width: 22px;
    height: 22px;
  }
  /* Any FAB-style button stays generously tappable */
  .btn-icon, .btn-sm.btn-icon {
    min-width: 44px;
    min-height: 44px;
  }
  /* Native dropdowns rendered as picklists */
  select, .input, input[type="text"], input[type="email"],
  input[type="password"], input[type="tel"], input[type="date"],
  input[type="time"], input[type="number"] {
    min-height: 44px;
  }
}

/* Audit-extra-23: defensive FAB sizing.
   No FAB element currently exists in the live app (only .totop at 44px in
   guest-site.css). When a FAB is added, these rules keep it ≥44px touch-
   target without dominating small screens. */
.fab {
  position: fixed;
  bottom: 16px;
  right: 16px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--trwn-accent, #C4A882);
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  z-index: 40;
}
@media (max-width: 360px) {
  /* Below 360px the 56px FAB still dominates — shrink and tuck closer. */
  .fab { width: 48px; height: 48px; bottom: 12px; right: 12px; }
}

/* Audit-extra-20: desktop-only / mobile-only utility toggles.
   Referenced from admin views (users.ejs, user-detail.ejs) and any other
   page that needs a desktop-vs-mobile split. */
.desktop-only { display: block; }
.mobile-only  { display: none; }

@media (max-width: 767.98px) {
  .desktop-only { display: none !important; }
  .mobile-only  { display: block !important; }
}

/* ── Gastenlijst: view-switch + platte tabel ───────────────────────── */
.guests-view-hidden { display: none !important; }

#guests-view-toolbar { margin-bottom: 16px; }

.guest-table-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 14px;
}
.guest-table-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 240px;
}
.guest-table-search svg {
  position: absolute;
  left: 12px;
  color: var(--trwn-warm-gray);
  pointer-events: none;
}
/* input[type="text"] raises specificity above the global theme input rule
   (trwn-theme.css), so the icon's 36px left-padding survives the cascade. */
.guest-table-search input[type="text"] {
  width: 100%;
  padding: 9px 12px 9px 36px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface, #fff);
  color: var(--color-text);
  font: inherit;
}
.guest-table-toolbar .select { max-width: 220px; }

.guest-table-card { padding: 0; overflow: hidden; }
.guest-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.guest-table thead th {
  text-align: left;
  padding: 12px 16px;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--trwn-warm-gray);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
  user-select: none;
}
.guest-table th.is-sortable { cursor: pointer; }
.guest-table th.is-sortable:hover { color: var(--trwn-charcoal); }
.guest-table .sort-ind { display: inline-block; width: 0; height: 0; margin-left: 6px; vertical-align: middle; }
.guest-table th.sort-asc .sort-ind {
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-bottom: 5px solid currentColor;
}
.guest-table th.sort-desc .sort-ind {
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
}
.guest-table-row td { padding: 12px 16px; border-bottom: 1px solid rgba(196,168,130,0.14); vertical-align: middle; }
.guest-table-row:hover td { background: rgba(237,230,216,0.35); }
.gt-name { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.gt-av {
  width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--trwn-sand-pale, #EDE6D8); color: var(--trwn-charcoal);
  font-size: 0.78rem; font-weight: 700;
}
.gt-cat, .gt-rsvp { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.gt-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 9px; }
.gt-email, .gt-meal { color: var(--color-text-light, var(--trwn-warm-gray)); }
.guest-table-empty { padding: 28px 16px; text-align: center; color: var(--trwn-warm-gray); }

@media (max-width: 640px) {
  .guest-table .gt-email, .guest-table th[data-sort="email"],
  .guest-table .gt-meal, .guest-table thead th:nth-child(5) { display: none; }
}

/* ── Trial / upgrade banner ─────────────────────────────────── */
.trial-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 20px;
  font-size: 13px;
  border-radius: 0;
}
.trial-banner__cta {
  font-weight: 600;
  text-decoration: underline;
  white-space: nowrap;
}
.trial-banner--active {
  background: rgba(207, 172, 72, 0.12);
  color: var(--trwn-charcoal);
  border-bottom: 1px solid rgba(207, 172, 72, 0.3);
}
.trial-banner--active .trial-banner__cta {
  color: var(--trwn-accent, #c9a96e);
}
.trial-banner--expired {
  background: #c0392b;
  color: #fff;
}
.trial-banner--expired .trial-banner__cta {
  color: #fff;
}
@media (max-width: 767.98px) {
  .trial-banner {
    padding: 6px 14px;
    font-size: 11px;
    gap: 10px;
  }
}

/* Trial banner + watermark voor guest-pagina's leven in guest-site.css
   (base.css wordt niet geladen door de publieke /guest/-pagina's). */

/* Venue search results dropdown (used in wedding-new + wedding-detail) */
.venue-result-item {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 0.88rem;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.venue-result-item:last-child { border-bottom: none; }
.venue-result-item:hover { background: var(--color-secondary, #f5f0e8); }
.venue-result-name { font-weight: 600; }
@keyframes spin { to { transform: translateY(-50%) rotate(360deg); } }
.venue-result-addr { color: var(--text-muted); font-size: 0.82em; margin-top: 2px; }

/* ========== DARK MODE (portal) ========== */
/* Activated by data-color-scheme="dark" on <html> (explicit user choice),
   or by prefers-color-scheme: dark when no data attribute is set (auto mode). */

:root[data-color-scheme="dark"] {
  /* Functional vars (used by base.css rules) */
  --color-bg: #14161a;
  --color-surface: #1c1f24;
  --color-text: #e8e8eb;
  --color-text-light: #a8acb3;
  --color-text-muted: #787c84;
  --color-border: #2a2e35;
  --color-accent: #f5f5f7;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow:    0 2px 12px rgba(0,0,0,0.45);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.55);

  --color-success-bg: rgba(22,163,74,0.18);
  --color-warning-bg: rgba(217,119,6,0.20);
  --color-danger-bg:  rgba(220,38,38,0.20);
  --color-info-bg:    rgba(37,99,235,0.20);

  /* Brand neutral vars (trwn-theme.css references these directly on body,
     cards, sidebar, etc.). Flip the neutrals; keep accent hues. */
  --trwn-warm-white: #14161a;
  --trwn-cream:      #1c1f24;
  --trwn-charcoal:   #e8e8eb;
  --trwn-warm-gray:  #a8acb3;
  --trwn-light-gray: #787c84;
  --trwn-sand-pale:  #2a2e35;

  /* Card surface (used by cards, inputs, search bars, modals via
     `background: var(--color-bg-card)` after the literal #fff replacement). */
  --color-bg-card: #1c1f24;

  /* Search-bar wrapper and a few other components reference --trwn-surface
     directly (defined as #FFFFFF in tokens.css). */
  --trwn-surface: #1c1f24;

  /* Canonical semantic tokens from tokens.css — not covered by legacy aliases above.
     --text-secondary and --text-muted use literal hex values in light mode so they
     must be flipped explicitly here; they are not derived from a trwn-* primitive. */
  --text-secondary: #a8acb3;   /* matches --color-text-light dark value */
  --text-muted:     #787c84;   /* matches --color-text-muted dark value */
  --link-hover:     var(--trwn-sand-light); /* prevent near-invisible hover in dark */

  /* Seating canvas — flip neutrals (tables read as raised dark surfaces),
     keep the fixed gold accent (not the theme's --color-primary, which is the
     per-wedding hue, e.g. roze) so the canvas stays consistent across themes. */
  --stp-canvas-bg: #14161a;
  --stp-grid-line: rgba(255, 255, 255, 0.05);
  --stp-table-fill: #2a2e35;
  --stp-table-stroke: #c9a96e;
  --stp-label: #ece6da;
  --stp-seat-fill: #1c1f24;
  --stp-seat-stroke: #3a3f47;
  --stp-seat-num: #787c84;
  --stp-seat-filled-fill: #c9a96e;
  --stp-seat-filled-stroke: #c9a96e;
  --stp-seat-initials: #14161a;
  --stp-name: #ece6da;
}

/* Dark-mode targeted refinements — sand-tinted accents instead of
   washed-out whites on the sidebar switcher and ghost buttons. */
:root[data-color-scheme="dark"] .sb-wed-switcher {
  background: rgba(196, 168, 130, 0.10);
  border-color: rgba(196, 168, 130, 0.20);
}
:root[data-color-scheme="dark"] .btn-ghost,
:root[data-color-scheme="dark"] .btn-outline,
:root[data-color-scheme="dark"] .btn-secondary {
  background: rgba(196, 168, 130, 0.08);
  border-color: rgba(196, 168, 130, 0.30);
}
:root[data-color-scheme="dark"] .btn-ghost:hover,
:root[data-color-scheme="dark"] .btn-outline:hover,
:root[data-color-scheme="dark"] .btn-secondary:hover {
  background: rgba(196, 168, 130, 0.18);
  border-color: rgba(196, 168, 130, 0.45);
}

/* .btn-primary uses var(--trwn-charcoal) as background which we flip to
   light in dark mode. Override to keep the primary CTA brand-sand. */
:root[data-color-scheme="dark"] .btn-primary {
  background: var(--trwn-sand);
  color: #fff;
}
:root[data-color-scheme="dark"] .btn-primary:hover {
  background: var(--trwn-accent);
  color: #fff;
}

/* Gastentabel — dark mode */
:root[data-color-scheme="dark"] .guest-table-search input { background: var(--color-surface); }
:root[data-color-scheme="dark"] .guest-table-row:hover td { background: rgba(255,255,255,0.04); }
:root[data-color-scheme="dark"] .guest-table-row td { border-bottom-color: rgba(255,255,255,0.08); }
:root[data-color-scheme="dark"] .gt-av { background: rgba(255,255,255,0.08); color: var(--color-text); }

/* Smooth scheme transitions, but respect reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  body, .sidebar, .card, .modal, .input {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
}

/* ========== SEGMENTED CONTROL (color scheme picker, future reuse) ========== */
.segmented {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.segmented input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.segmented label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-text-light);
  font-size: 14px;
  transition: background-color 0.15s, color 0.15s;
  user-select: none;
}
.segmented label:hover { color: var(--color-text); }
.segmented input[type="radio"]:checked + label {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}
.segmented input[type="radio"]:focus-visible + label {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.segmented svg { width: 16px; height: 16px; }

/* ============================================================
   A11y baseline — focus ring, reduced motion, skip-link
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--trwn-accent, #8B7355);
  outline-offset: 2px;
  border-radius: 4px;
  transition: none;
}
.btn:focus-visible,
.lr-btn:focus-visible {
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover,
  .wedding-card:hover,
  .wed-card:hover { transform: none !important; }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--trwn-charcoal, #2D2926);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 6px 0;
  z-index: 1100;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
  outline: 2px solid var(--trwn-sand-light, #D4C4A8);
  outline-offset: 2px;
}

/* ============================================================
   Sidebar collapsible group ("Meer" sectie voor planners)
   ============================================================ */
.sb-grp-collapsible {
  margin-top: 4px;
}
.sb-grp-collapsible > summary.sb-grp-toggle {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}
.sb-grp-collapsible > summary.sb-grp-toggle::-webkit-details-marker {
  display: none;
}
.sb-grp-chevron {
  width: 12px;
  height: 12px;
  opacity: 0.6;
  transition: transform 0.18s ease;
  flex-shrink: 0;
}
.sb-grp-collapsible[open] > summary.sb-grp-toggle .sb-grp-chevron {
  transform: rotate(90deg);
}
.sb-grp-collapsible > .sb-grp-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* ============================================================
   Inline form validation
   ============================================================ */
.field-error {
  color: var(--danger-text, #A04444);
  font-size: 0.78rem;
  margin-top: 4px;
  line-height: 1.3;
}
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
  border-color: var(--danger-text, #A04444) !important;
  box-shadow: 0 0 0 3px rgba(160, 68, 68, 0.12) !important;
}

/* ============================================================
   Guest-add entry cards (modal) — stacked layout that fits any
   modal width without horizontal scrolling. Replaces the old
   5-column table that overflowed on narrow modals.
   ============================================================ */
.guest-entry-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 4px;
}
.guest-entry {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius, 10px);
  background: var(--bg-subtle, var(--trwn-cream, #F5F0E8));
  padding: 16px 16px 14px;
}
.guest-entry__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}
.guest-entry__grid .form-group { margin-bottom: 0; }
.guest-entry__remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text-muted, #857C70);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.guest-entry__remove:hover {
  background: var(--trwn-blush-pale, #F5E6E6);
  color: var(--danger-text, #A04444);
  border-color: var(--trwn-blush-light, #E8C4C4);
}
/* The name field (first) sits next to the remove button — give it room. */
.guest-entry__grid .form-group:first-child { padding-right: 34px; }

/* Single column on narrow viewports (mobile bottom-sheet). */
@media (max-width: 600px) {
  .guest-entry__grid { grid-template-columns: 1fr; }
  .guest-entry__grid .form-group:first-child { padding-right: 34px; }
}

/* ============================================================
   Branded confirm dialog (window.confirmDialog)
   Used for archive/delete/destructive actions — replaces native
   window.confirm(). Three intent variants:
     - .confirm-dialog--danger   : blush-tinted triangle, charcoal title
     - .confirm-dialog--warning  : sand-tinted triangle
     - .confirm-dialog--info     : sand question mark
   ============================================================ */
.confirm-dialog-overlay {
  z-index: 1100; /* above command palette (1050) */
  background: rgba(45, 41, 38, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: confirmFadeIn 160ms ease-out;
}
.confirm-dialog-overlay--closing { animation: confirmFadeOut 160ms ease-in forwards; }
@keyframes confirmFadeIn  { from { opacity: 0 } to { opacity: 1 } }
@keyframes confirmFadeOut { from { opacity: 1 } to { opacity: 0 } }

.confirm-dialog {
  width: min(440px, 92vw);
  background: var(--bg-surface, #FFFFFF);
  border-radius: var(--radius-lg, 16px);
  box-shadow: 0 10px 40px rgba(45, 41, 38, 0.18), 0 2px 6px rgba(45, 41, 38, 0.08);
  padding: 32px 28px 24px;
  text-align: center;
  position: relative;
  animation: confirmZoomIn 200ms cubic-bezier(.2, .9, .25, 1);
  /* Subtle sand-tinted top accent line */
  border-top: 3px solid var(--trwn-sand-pale, #EDE6D8);
}
@keyframes confirmZoomIn {
  from { transform: scale(0.92) translateY(8px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .confirm-dialog-overlay,
  .confirm-dialog-overlay--closing,
  .confirm-dialog { animation: none !important; }
}

.confirm-dialog__icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--trwn-sand-pale, #EDE6D8);
  color: var(--trwn-accent, #8B7355);
}
.confirm-dialog__icon { width: 28px; height: 28px; }

.confirm-dialog--danger .confirm-dialog__icon-wrap {
  background: var(--trwn-blush-pale, #F5E6E6);
  color: #A04444;
}
.confirm-dialog--warning .confirm-dialog__icon-wrap {
  background: var(--trwn-sand-pale, #EDE6D8);
  color: var(--trwn-accent, #8B7355);
}
.confirm-dialog--info .confirm-dialog__icon-wrap {
  background: var(--bg-subtle, var(--trwn-cream, #F5F0E8));
  color: var(--trwn-accent, #8B7355);
}

.confirm-dialog__title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  color: var(--text-primary, var(--trwn-charcoal));
  margin: 0 0 10px;
  line-height: 1.2;
}
.confirm-dialog__body {
  font-family: var(--font-body, 'Nunito Sans', sans-serif);
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--text-secondary, #5C544B);
  margin: 0 0 24px;
  padding: 0 4px;
}
.confirm-dialog__footer {
  display: flex;
  gap: 10px;
  justify-content: stretch;
  margin: 0 -4px;
}
.confirm-dialog__footer .btn {
  flex: 1;
  padding: 11px 18px;
  font-size: 0.92rem;
  letter-spacing: 0.5px;
  border-radius: 10px;
  font-family: var(--font-body, 'Nunito Sans', sans-serif);
  font-weight: 600;
  text-transform: none;
}
.confirm-dialog__cancel {
  background: transparent;
  color: var(--text-secondary, #5C544B);
  border: 1px solid var(--color-border, var(--trwn-sand-pale));
}
.confirm-dialog__cancel:hover {
  background: var(--bg-subtle, var(--trwn-cream));
  color: var(--text-primary);
  border-color: var(--trwn-sand-light, #D4C4A8);
}
.confirm-dialog--danger .confirm-dialog__ok {
  background: #A04444;
  color: #fff;
  border: 0;
}
.confirm-dialog--danger .confirm-dialog__ok:hover {
  background: #8A3A3A;
  box-shadow: 0 4px 12px rgba(160, 68, 68, 0.28);
  transform: translateY(-1px);
}

@media (max-width: 480px) {
  .confirm-dialog { padding: 28px 22px 20px; }
  .confirm-dialog__title { font-size: 1.35rem; }
  .confirm-dialog__footer { flex-direction: column-reverse; gap: 8px; }
  .confirm-dialog__footer .btn { width: 100%; }
}

/* On mobile (<768px) the global mobile-redesign.css turns .modal-overlay into
   a bottom-sheet. The confirm-dialog uses its own overlay class, so it stays
   centered. That's the right call here — destructive confirms should be
   modally focused, not look like a regular sheet that swipes away. */

/* ============================================================
   Command palette (Cmd+K / Ctrl+K)
   ============================================================ */
.palette-overlay { z-index: 1050; }
.palette-panel {
  width: min(620px, 92vw);
  padding: 0 !important;
  border-radius: var(--radius-lg, 16px) !important;
  overflow: hidden;
}
.palette-input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  padding: 18px 22px;
  font-size: 1.05rem;
  font-family: var(--font-body);
  background: transparent;
  color: var(--text-primary);
  outline: none;
}
.palette-input::placeholder { color: var(--text-muted); }
.palette-list {
  max-height: 50vh;
  overflow-y: auto;
  padding: 6px;
}
.palette-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
}
.palette-item:hover,
.palette-item.is-active {
  background: var(--bg-subtle, var(--trwn-cream));
}
.palette-item > div:first-child { flex: 1; min-width: 0; }
.palette-label {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-primary);
}
.palette-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.palette-tag {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--trwn-sand-pale);
  color: var(--trwn-accent);
  font-weight: 600;
  flex-shrink: 0;
}
.palette-tag-action  { background: #EFE7DD; color: var(--trwn-accent); }
.palette-tag-wedding { background: var(--trwn-blush-pale); color: #A86B6B; }
.palette-tag-page    { background: var(--bg-subtle); color: var(--text-muted); }
.palette-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}
.palette-hint {
  padding: 10px 16px;
  border-top: 1px solid var(--color-border);
  color: var(--text-muted);
  font-size: 0.75rem;
  text-align: center;
}
.palette-hint kbd {
  background: var(--bg-subtle);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: ui-monospace, 'SF Mono', monospace;
  font-size: 0.72rem;
  margin: 0 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Export & Afdrukken hub
   Chrome uses portal tokens (dark-aware). Live previews are driven by the
   guest-preset CSS vars (--bg/--ink/--accent/--blush/--font-display/-body) set
   via [data-preset]; they intentionally stay "paper" in dark mode.
   ═══════════════════════════════════════════════════════════════════════════ */
.exports-hub .page-head .sub { color: var(--text-muted, #857C70); max-width: 64ch; }

.style-panel { padding: 20px 22px; margin-bottom: 18px; }
.style-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.style-title { display: flex; align-items: center; gap: 10px; font-family: var(--font-serif); font-weight: 500; font-size: 19px; margin: 0; }
.style-title .ex-rings { width: 26px; height: 17px; }
.style-note { color: var(--text-muted, #857C70); font-size: 12.5px; margin: 0; }
.preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.preset { position: relative; text-align: left; background: var(--bg-surface, #fff); border: 1.5px solid var(--color-border, #e7e0d4); border-radius: 12px; padding: 12px 12px 11px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.preset:hover { border-color: var(--trwn-sand, #C4A882); }
.preset.active { border-color: var(--trwn-sand, #C4A882); box-shadow: 0 0 0 1.5px var(--trwn-sand, #C4A882); }
.preset-tag { position: absolute; top: 9px; right: 9px; font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--trwn-sand, #C4A882); padding: 2px 6px; border-radius: 5px; opacity: 0; }
.preset.active .preset-tag { opacity: 1; }
.preset-sw { display: flex; border-radius: 6px; overflow: hidden; width: fit-content; border: 1px solid rgba(0,0,0,.08); }
.preset-sw i { width: 22px; height: 18px; display: block; }
.preset-name { display: block; font-family: var(--font-serif); font-size: 15px; margin-top: 9px; color: var(--text-primary, #2D2926); }
.preset-fonts { display: block; font-size: 10.5px; color: var(--text-muted, #857C70); margin-top: 1px; }

.export-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
.exp { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.exp-thumb { display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--bg-subtle, #F5F0E8); border-bottom: 1px solid var(--color-border, #e7e0d4); min-height: 184px; }
.exp-body { padding: 18px 20px 20px; display: flex; flex-direction: column; }
.exp-body h3 { font-family: var(--font-serif); font-weight: 500; font-size: 19px; margin: 0 0 4px; }
.exp-body .desc { color: var(--text-muted, #857C70); font-size: 13px; line-height: 1.5; margin: 0 0 14px; }
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 14px; margin-bottom: 14px; }
.export-check { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.exp .field { margin-bottom: 10px; }
.exp .field .upper-eyebrow { display: block; margin-bottom: 4px; }
.btn-dl { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; margin-top: 6px; }

.opt-toggle { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0 13px; border-top: 1px solid var(--color-border, #e7e0d4); margin-top: 4px; }
.ot-l { font-size: 13.5px; font-weight: 600; color: var(--text-primary, #2D2926); }
.ot-s { font-size: 11.5px; color: var(--text-muted, #857C70); margin-top: 2px; }
.tgl { flex: 0 0 auto; width: 42px; height: 24px; border-radius: 24px; border: none; background: var(--color-border, #cfc7b8); position: relative; cursor: pointer; transition: background .18s; }
.tgl::before { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .18s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.tgl.on { background: var(--trwn-sand, #C4A882); }
.tgl.on::before { transform: translateX(18px); }

/* Live preview mockups */
.pv { position: relative; background: var(--bg, #FAF7F2); color: var(--ink, #2D2926); border-radius: 3px; box-shadow: 0 6px 22px rgba(45,41,38,.16); overflow: hidden; }
.pv-frame { position: absolute; inset: 7%; border: 1px solid var(--accent); opacity: .6; pointer-events: none; }
.pv-rings { display: block; }
.pv-cover { width: 150px; height: 212px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px 14px; text-align: center; }
.pv-cover .pv-rings { width: 30px; height: 19px; margin-bottom: 10px; }
.pv-eyebrow { font-family: var(--font-body); font-size: 6px; letter-spacing: .22em; color: var(--accent); }
.pv-names { font-family: var(--font-display); font-size: 25px; line-height: 1.04; color: var(--ink); margin: 8px 0; display: flex; flex-direction: column; }
.pv-names em { font-size: 15px; font-style: italic; color: var(--blush); }
.pv-rule { width: 46px; height: 1px; background: var(--accent); margin-top: 6px; }
.pv-card { width: 212px; height: 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pv-rings.sm { width: 26px; height: 16px; }
.pv-cardname { font-family: var(--font-display); font-size: 24px; color: var(--ink); margin-top: 8px; }
.pv-table { font-family: var(--font-body); font-size: 8px; letter-spacing: .18em; color: var(--ink-soft, #6B635B); margin-top: 9px; }
.pv-table.off { visibility: hidden; }
.pv-poster { width: 250px; height: 176px; display: flex; align-items: center; justify-content: center; }
.pv-poster-table { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.seat { width: 15px; height: 15px; border-radius: 50%; display: block; }
.seat.ok { background: #A8B5A0; }
.seat.wait { background: #C4A882; }
.seat.no { background: #C45B5B; }
.seat.free { background: transparent; border: 1.4px solid var(--ink-soft, #B8B0A6); }
.pv-poster.off .seat.ok, .pv-poster.off .seat.wait, .pv-poster.off .seat.no { background: color-mix(in srgb, var(--accent) 58%, var(--bg)); }

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

:root[data-color-scheme="dark"] .exp-thumb { background: #26221e; }
:root[data-color-scheme="dark"] .preset { background: #2b2723; }
:root[data-color-scheme="dark"] .btn.btn-primary.btn-dl { background: var(--trwn-sand, #C4A882); color: #1f1b17; border-color: var(--trwn-sand, #C4A882); }

/* Draaiboek filter bar (day + category chips) */
.dr-filters { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 24px; }
.dr-filter-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dr-filter-label {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--trwn-warm-gray); margin-right: 4px;
}
.dr-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: 999px; cursor: pointer;
  font-size: 13px; font-weight: 600; font-family: var(--font-body);
  background: var(--color-surface); color: var(--trwn-warm-gray);
  border: 1px solid var(--color-border);
}
.dr-chip:hover { border-color: var(--trwn-sand); }
.dr-chip.is-on { background: var(--trwn-charcoal); color: #fff; border-color: var(--trwn-charcoal); }
.dr-cat-dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid; flex-shrink: 0; }
.dr-date-header {
  font-family: var(--font-serif); font-size: 18px; color: var(--trwn-accent);
  padding: 18px 0 8px; border-bottom: 1px solid rgba(196,168,130,0.2); margin-bottom: 12px;
}