/* ═══════════════════════════════════════════════════
   CRM — Admin Dashboard Stijlen
   ═══════════════════════════════════════════════════ */

/* ── 1. Variabelen ── */
:root {
  --admin-bg:          #0e0e11;
  --admin-bg-2:        #16161a;
  --admin-bg-card:     #1c1c22;
  --admin-bg-hover:    #22222a;
  --admin-border:      rgba(255,255,255,0.06);
  --admin-border-gold: rgba(124,154,166,0.2);
  --admin-text:        #c8c8d0;
  --admin-text-muted:  #6e6e80;
  --admin-white:       #f0f0f5;
  --admin-gold:        #7c9aa6;
  --admin-gold-light:  #9dbbc8;
  --admin-gold-dark:   #567078;
  --admin-gold-rgb:    124,154,166;
  --admin-blue:        #60a5fa;
  --admin-green:       #34d399;
  --admin-red:         #f87171;
  --admin-purple:      #a78bfa;
  --admin-orange:      #fbbf24;
  --admin-sidebar-w:   260px;
  --admin-topbar-h:    60px;
  --admin-radius:      10px;
  --admin-radius-sm:   6px;
  --admin-shadow:      0 4px 24px rgba(0,0,0,0.4);
  --admin-transition:  250ms ease;
  --ff-serif: 'Playfair Display', Georgia, serif;
  --ff-sans:  'Raleway', sans-serif;
}

/* ── 1b. Licht thema (macOS-stijl) ── */
[data-theme$="light"] {
  --admin-bg:          #f5f3f0;
  --admin-bg-2:        #ffffff;
  --admin-bg-card:     #ffffff;
  --admin-bg-hover:    #edeae6;
  --admin-border:      rgba(0,0,0,0.10);
  --admin-border-gold: rgba(154,133,112,0.25);
  --admin-text:        #3a3a3c;
  --admin-text-muted:  #8e8e93;
  --admin-white:       #1d1d1f;
  --admin-gold:        #9a8570;
  --admin-gold-light:  #b8a48e;
  --admin-gold-dark:   #70604e;
  --admin-gold-rgb:    154,133,112;
  --admin-blue:        #007aff;
  --admin-green:       #28a745;
  --admin-red:         #dc3545;
  --admin-purple:      #8b5cf6;
  --admin-orange:      #e67e22;
  --admin-shadow:      0 2px 12px rgba(0,0,0,0.08);
}

/* Licht thema: specifieke overrides voor elementen met hardcoded kleuren */
[data-theme$="light"] .login-overlay { background: var(--admin-bg); }
[data-theme$="light"] .admin-sidebar { background: var(--admin-bg-2); border-right: 1px solid var(--admin-border); }
[data-theme$="light"] .admin-topbar { background: var(--admin-bg-2); border-bottom: 1px solid var(--admin-border); }
[data-theme$="light"] .admin-input,
[data-theme$="light"] .admin-select,
[data-theme$="light"] .admin-input-wrap input,
[data-theme$="light"] textarea.admin-input {
  background: #f9f9fb;
  border-color: rgba(0,0,0,0.15);
  color: var(--admin-text);
}
[data-theme$="light"] .admin-input:focus,
[data-theme$="light"] .admin-select:focus,
[data-theme$="light"] .admin-input-wrap input:focus {
  border-color: var(--admin-gold);
  box-shadow: 0 0 0 3px rgba(154,133,112,0.12);
}
[data-theme$="light"] .admin-btn {
  background: #eeeef0;
  color: var(--admin-text);
}
[data-theme$="light"] .admin-btn:hover {
  background: #e0e0e2;
}
[data-theme$="light"] .admin-modal-overlay {
  background: rgba(0,0,0,.35);
}
[data-theme$="light"] .stat-card,
[data-theme$="light"] .admin-card,
[data-theme$="light"] .settings-section {
  background: var(--admin-bg-card);
  border-color: var(--admin-border);
}
[data-theme$="light"] .admin-table th {
  background: #f0f0f2;
  color: var(--admin-text);
}
[data-theme$="light"] .admin-table td {
  border-color: var(--admin-border);
}
[data-theme$="light"] .sched-week-row td {
  background: #f0f0f2;
}
[data-theme$="light"] input[type="time"],
[data-theme$="light"] input[type="date"] {
  background: #f9f9fb;
  color: var(--admin-text);
  border-color: rgba(0,0,0,0.15);
}

/* Brand thema — PROJEXT pastel (#225d). Remapt --admin-* tokens naar
   pastel-set. Hover-states blijven gold-rgb gebaseerd zodat focus
   visueel werkt op de lichte pastel-achtergrond. */
[data-theme="brand"] {
  --admin-bg:          #FBFAF6;
  --admin-bg-2:        rgba(251, 250, 246, 0.82);
  --admin-bg-card:     rgba(251, 250, 246, 0.92);
  --admin-bg-hover:    rgba(159, 184, 232, 0.10);
  --admin-border:      rgba(15, 20, 48, 0.08);
  --admin-border-gold: rgba(159, 184, 232, 0.30);
  --admin-text:        rgba(15, 20, 48, 0.78);
  --admin-text-muted:  rgba(15, 20, 48, 0.50);
  --admin-white:       #0F1430;
  --admin-gold:        #9FB8E8;
  --admin-gold-light:  #BCDCFB;
  --admin-gold-dark:   #6F8DD0;
  --admin-gold-rgb:    159,184,232;
  --admin-blue:        #BCDCFB;
  --admin-green:       #6FBF8C;
  --admin-red:         #dc3545;
  --admin-purple:      #D8D4F5;
  --admin-orange:      #E6A56E;
  --admin-shadow:      0 4px 24px rgba(15, 20, 48, 0.10);
}

[data-theme="brand"] .login-overlay { background: var(--admin-bg); }
[data-theme="brand"] .admin-sidebar { background: var(--admin-bg-2); border-right: 1px solid var(--admin-border); }
[data-theme="brand"] .admin-topbar  { background: var(--admin-bg-2); border-bottom: 1px solid var(--admin-border); }
[data-theme="brand"] .admin-input,
[data-theme="brand"] .admin-select,
[data-theme="brand"] .admin-input-wrap input,
[data-theme="brand"] textarea.admin-input {
  background: rgba(255, 255, 255, 0.65);
  border-color: rgba(15, 20, 48, 0.12);
  color: var(--admin-text);
}
[data-theme="brand"] .admin-input:focus,
[data-theme="brand"] .admin-select:focus,
[data-theme="brand"] .admin-input-wrap input:focus {
  border-color: var(--admin-gold);
  box-shadow: 0 0 0 3px rgba(var(--admin-gold-rgb), 0.18);
}
[data-theme="brand"] .admin-btn {
  background: rgba(255, 255, 255, 0.70);
  color: var(--admin-text);
}
[data-theme="brand"] .admin-btn:hover {
  background: rgba(var(--admin-gold-rgb), 0.16);
}
[data-theme="brand"] .admin-modal-overlay {
  background: rgba(15, 20, 48, .28);
}
[data-theme="brand"] .stat-card,
[data-theme="brand"] .admin-card,
[data-theme="brand"] .settings-section {
  background: var(--admin-bg-card);
  border-color: var(--admin-border);
}
[data-theme="brand"] .admin-table th {
  background: rgba(159, 184, 232, 0.12);
  color: var(--admin-text);
}
[data-theme="brand"] .admin-table td {
  border-color: var(--admin-border);
}
[data-theme="brand"] .sched-week-row td {
  background: rgba(159, 184, 232, 0.10);
}
[data-theme="brand"] input[type="time"],
[data-theme="brand"] input[type="date"] {
  background: rgba(255, 255, 255, 0.65);
  color: var(--admin-text);
  border-color: rgba(15, 20, 48, 0.12);
}

/* Status-badges in brand-mode (#225e) — pastel-tekst op pastel-bg is
 * onleesbaar. Override naar donkere semantische tinten zodat tekst
 * leesbaar blijft én statussen onderscheidbaar. */
[data-theme="brand"] .status-booked,
[data-theme="brand"] .status-new       { color: #1E3A8A; }   /* deep indigo  */
[data-theme="brand"] .status-confirmed { color: #78350F; }   /* deep amber   */
[data-theme="brand"] .status-completed,
[data-theme="brand"] .status-active    { color: #14532D; }   /* deep emerald */
[data-theme="brand"] .status-cancelled { color: #7F1D1D; }   /* deep crimson */
[data-theme="brand"] .status-no_show,
[data-theme="brand"] .status-no-show   { color: #78350F; }   /* deep amber   */
[data-theme="brand"] .status-inactive  { color: rgba(15, 20, 48, 0.55); }

/* ── 1c. Logo-upload area ── */
.logo-upload-area {
  border: 2px dashed var(--admin-border);
  border-radius: var(--admin-radius);
  padding: 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--admin-transition), background var(--admin-transition);
}
.logo-upload-area:hover {
  border-color: var(--admin-gold);
  background: rgba(var(--admin-gold-rgb), 0.04);
}
.logo-preview {
  /* Vast formaat i.p.v. max-* — SVG's zonder intrinsic width/height
   * krijgen anders 0x0 als natural size en blijven onzichtbaar in
   * een puur max-width container. PNG/JPG hebben wel intrinsic size
   * en worden door object-fit:contain netjes binnen 140x100 geschaald. */
  width: 140px;
  height: 100px;
  object-fit: contain;
  margin: 0 auto;
  display: block;
}
.logo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  color: var(--admin-text-muted);
  font-size: .85rem;
}
.logo-placeholder i {
  font-size: 1.6rem;
  color: var(--admin-gold);
  margin-bottom: .25rem;
}
.logo-placeholder small {
  font-size: .72rem;
}
/* Compact logo in samengevoegde settings-kaart */
.settings-logo-row {
  display: flex; align-items: center; gap: 1rem;
}
.logo-upload-compact {
  max-width: 180px; padding: 1rem;
}
.logo-upload-compact .logo-preview {
  max-width: 100px; max-height: 70px;
}
.logo-upload-compact .logo-placeholder i { font-size: 1.2rem; }
.logo-upload-compact .logo-placeholder span { font-size: .75rem; }

/* ── 1d. Theme-switch knoppen ── */
.theme-switch {
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--admin-border);
  border-radius: 999px;
  overflow: hidden;
}
/* Column-layout zodat icoon altijd boven label staat, ongeacht of
   de label-string toevallig kort genoeg is om op één regel naast
   het icoon te passen. Voorheen wraps de natural inline-flow van
   <i> + spatie + <span> bij sommige theme-namen anders dan bij
   andere (vooral 'Klassiek donker' bleef ernaast staan terwijl de
   rest brak naar twee regels). Hiermee is het uniform. */
.theme-option {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  padding: .55rem .9rem;
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--admin-text-muted);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: all var(--admin-transition);
}
.theme-option > i {
  font-size: 1rem;
  line-height: 1;
}
.theme-option > span {
  white-space: nowrap;
}
.theme-option.active {
  background: var(--admin-gold);
  color: #fff;
}
.theme-option:not(.active):hover {
  background: var(--admin-bg-hover);
  color: var(--admin-text);
}

/* ── 2. Reset ── */
/* Universal box-sizing + text-size-adjust. Chrome heeft op Android-
   tablets TWEE features die tekst per pagina anders kunnen schalen:
   (1) `text-size-adjust` voor "browser zoom respect", en (2) "Font
   Boosting" (auto-text-inflation) dat per block beslist op basis van
   block-width. M13.F1 zette `text-size-adjust:100%` op `html`, maar
   Chrome's Font Boosting kan dat omzeilen door op individuele text-
   blokken te scalen die de property niet erven. Sinds M15.F3 staat
   de property daarom op de universal selector — élk text-element
   krijgt 'm direct, geen erfenis-route waar Font Boosting tussendoor
   kan glippen. Result: één viewport-breed font-size-systeem, geen
   pagina-afhankelijke schaling meer. */
*,*::before,*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
          text-size-adjust: 100%;
}
html {
  font-size:15px;
}
body {
  font-family: var(--ff-sans);
  background: var(--admin-bg);
  color: var(--admin-text);
  overflow-x: hidden;
  min-height: 100vh;
}
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
img { max-width:100%; display:block; }
button { cursor:pointer; font-family:inherit; border:none; background:none; }
input,select,textarea { font-family:inherit; }

/* ── 3. Login Overlay ── */
.login-overlay {
  position: fixed;
  inset: 0;
  background: var(--admin-bg);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.login-card {
  background: var(--admin-bg-card);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  padding: 3rem 2.5rem;
  width: 100%;
  max-width: 400px;
  box-shadow: var(--admin-shadow);
}

.login-logo {
  text-align: center;
  margin-bottom: 2rem;
}

.login-logo .logo-icon {
  font-size: 2.5rem;
  color: var(--admin-gold);
  display: block;
  margin-bottom: .75rem;
}

.login-logo-img {
  display: block;
  margin: 0 auto .75rem;
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: 12px;
}

.login-logo h1 {
  font-family: var(--ff-serif);
  font-size: 1.6rem;
  color: var(--admin-white);
  letter-spacing: .08em;
}

.login-submit-btn {
  display: block;
  width: 100%;
  text-align: center;
}

.login-footer {
  text-align: center;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--admin-border);
}

.login-error {
  color: var(--admin-red);
  font-size: .8rem;
  min-height: 1.2rem;
  margin-bottom: .5rem;
  text-align: center;
}

/* ── 4. Admin Layout ── */
.admin-layout {
  display: flex;
  min-height: 100vh;
}

/* ── 5. Sidebar ── */
.admin-sidebar {
  width: var(--admin-sidebar-w);
  background: var(--admin-bg-2);
  border-right: 1px solid var(--admin-border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 200;
  transition: transform var(--admin-transition);
}

.sidebar-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1.5rem 1.25rem;
  border-bottom: 1px solid var(--admin-border);
}

.sidebar-logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: var(--admin-radius-sm);
  flex-shrink: 0;
}
.sidebar-header .logo-icon {
  font-size: 1.5rem;
  color: var(--admin-gold);
}

.sidebar-header strong {
  font-family: var(--ff-serif);
  font-size: 1.1rem;
  color: var(--admin-white);
  letter-spacing: .1em;
  display: block;
}

.sidebar-header span {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--admin-gold);
}

.sidebar-nav {
  flex: 1;
  padding: 1rem .75rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  overflow-y: auto;
}

.sidebar-link,
.sidebar-parent {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem 1rem;
  border-radius: var(--admin-radius-sm);
  color: var(--admin-text-muted);
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .03em;
  transition: all var(--admin-transition);
  position: relative;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

.sidebar-link i,
.sidebar-parent > i:not(.sidebar-caret) {
  width: 18px;
  text-align: center;
  font-size: .9rem;
}

.sidebar-link:hover,
.sidebar-parent:hover {
  background: var(--admin-bg-hover);
  color: var(--admin-text);
}

.sidebar-link.active {
  background: rgba(var(--admin-gold-rgb), .1);
  color: var(--admin-gold);
}

/* Parent is "actief" wanneer een van z'n sub-items actief is. JS zet
   .is-active op de parent zodra het Cockpit-tabblad open is. */
.sidebar-parent.is-active {
  background: rgba(var(--admin-gold-rgb), .1);
  color: var(--admin-gold);
}

.sidebar-link.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 3px;
  background: var(--admin-gold);
  border-radius: 0 3px 3px 0;
}

.sidebar-badge {
  margin-left: auto;
  background: var(--admin-red);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 .4rem;
  transition: transform .25s ease, opacity .25s ease;
  animation: badgePopIn .35s cubic-bezier(.34,1.56,.64,1);
}
.sidebar-badge.badge-pulse {
  animation: badgePopIn .35s cubic-bezier(.34,1.56,.64,1),
             badgeGlow 3s ease-in-out .5s infinite;
}
.sidebar-badge[hidden] {
  display: none !important;
}
@keyframes badgePopIn {
  0%   { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes badgeGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.0); }
  50%      { box-shadow: 0 0 6px 2px rgba(239,68,68,.4); }
}

.sidebar-footer {
  border-top: none;
  padding: 1rem .75rem;
}
.sidebar-footer .sidebar-copyright {
  border-top: 1px solid var(--admin-border);
  padding-top: .75rem;
  margin-top: .25rem;
}

/* M21.2 — Cockpit-parent + nested sub-links in sidebar */
.sidebar-parent .sidebar-caret {
  margin-left: auto;
  font-size: .65rem;
  transition: transform .2s ease;
  opacity: .6;
}
.sidebar-parent[aria-expanded="true"] .sidebar-caret {
  transform: rotate(180deg);
}
.sidebar-subnav {
  list-style: none;
  margin: .2rem 0 .4rem;
  padding: 0;
}
.sidebar-subnav li { margin: 0; }
.sidebar-sublink {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: .45rem .75rem .45rem 2.4rem;
  font-family: inherit;
  font-size: .82rem;
  color: var(--admin-text-muted, #6b6b6b);
  text-align: left;
  border-radius: .25rem;
  transition: background .12s, color .12s;
  /* Touch-target op desktop blijft .45rem padding — op tablet/mobiel
     wordt deze hieronder opgehoogd naar 44px WCAG-minimum. */
  min-height: 32px;
}
.sidebar-sublink i {
  font-size: .72rem;
  width: 1rem;
  text-align: center;
  opacity: .75;
}
.sidebar-sublink:hover {
  background: rgba(201, 169, 97, 0.08);
  color: var(--admin-text, #2A2622);
}
.sidebar-sublink.is-active {
  background: var(--admin-gold, #C9A961);
  color: #FBFAF6;
}
.sidebar-sublink.is-active i { opacity: 1; }

/* Horizontale subtab-rij verbergen — sidebar is nu primary navigation.
   Container blijft staan voor JS-state-sync (geen .active query-error). */
.settings-subtabs { display: none !important; }
.settings-subtabs-mobile { display: none !important; }

/* M21.2 — Mobile/tablet polish.
   1. Sidebar moet volledig scrollbaar zijn (nav + footer samen) zodra
      het Cockpit-submenu uitgeklapt is — anders verdwijnen sub-items
      onder de viewport-edge op kleine schermen.
   2. Touch-targets op tablet/smartphone ophogen naar 44px (WCAG 2.5.5).
   3. Sub-item-indent kleiner zodat de hele rij niet horizontaal scrollt
      in een 200px-tablet-sidebar. */
@media (max-width: 1024px) {
  .admin-sidebar {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .sidebar-nav {
    flex: 0 0 auto;
    overflow-y: visible;
  }
  .sidebar-footer {
    /* Voorkomt dat footer geheel onderaan klampt op smalle viewports —
       laat 'm meebewegen met de scrollende sidebar-content. */
    margin-top: 0;
  }
  .sidebar-sublink {
    min-height: 44px;
    padding-top: .65rem;
    padding-bottom: .65rem;
    padding-left: 2.1rem;
    font-size: .88rem;
  }
  .sidebar-sublink i {
    font-size: .8rem;
  }
}
@media (max-width: 768px) {
  /* Hamburger-drawer: maak Cockpit-parent groter zodat hij goed
     bedienbaar is met de duim. */
  .sidebar-parent {
    min-height: 48px;
  }
  .sidebar-parent .sidebar-caret {
    font-size: .8rem;
    opacity: .85;
    padding: .25rem;   /* groter klikoppervlak */
  }
}

.sidebar-copyright {
  display: block;
  text-align: center;
  font-size: .7rem;
  color: var(--admin-text-muted);
  text-decoration: none;
  padding-bottom: .6rem;
  margin-bottom: .2rem;
  border-bottom: 1px solid var(--admin-border);
  transition: color var(--admin-transition);
}
.sidebar-copyright:hover { color: var(--admin-gold); }
.sidebar-copyright em {
  font-style: italic;
  font-family: inherit;
}

.admin-user {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem .5rem 1rem;
  cursor: default;
  user-select: none;
}

.admin-avatar {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--admin-gold-dark), var(--admin-gold));
  border-radius: var(--admin-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-serif);
  font-weight: 700;
  font-size: .95rem;
  color: var(--admin-bg);
  flex-shrink: 0;
}

.admin-user-info strong {
  display: block;
  font-size: .8rem;
  color: var(--admin-white);
}

.admin-user-info span {
  font-size: .7rem;
  color: var(--admin-text-muted);
}

.logout-btn {
  color: var(--admin-red) !important;
}

.logout-btn:hover {
  background: rgba(248,113,113,.08) !important;
}

/* ── 6. Topbar (mobiel) ── */
.admin-topbar {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--admin-topbar-h);
  background: var(--admin-bg-2);
  border-bottom: 1px solid var(--admin-border);
  z-index: 150;
  padding: 0 1rem;
  align-items: center;
  justify-content: space-between;
}

.topbar-toggle {
  width: 40px;
  height: 40px;
  color: var(--admin-gold);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.topbar-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--ff-serif);
  font-size: 1rem;
  color: var(--admin-white);
}

.topbar-title .logo-icon {
  color: var(--admin-gold);
}

.topbar-btn {
  width: 40px;
  height: 40px;
  color: var(--admin-text-muted);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.notif-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  background: var(--admin-red);
  border-radius: 50%;
  display: none;
}

/* ── 7. Main Content ── */
.admin-main {
  flex: 1;
  margin-left: var(--admin-sidebar-w);
  /* M15.F4 — Begrens main op viewport-breedte minus sidebar zodat
     brede tabellen de body niet voorbij viewport duwen (Android-Chrome
     past autofit-zoom toe bij body-overflow). Brede tabellen scrollen
     in hun eigen `.admin-table-wrap` (`overflow-x:auto`). Max-width
     wordt per mediaquery aangepast aan de sidebar-breedte van die range
     (200px in tablet-range, geen begrenzing in drawer-mode). */
  max-width: calc(100vw - var(--admin-sidebar-w));
  overflow-x: hidden;
  padding: 2rem 2.5rem;
  min-height: 100vh;
}

/* ── 8. Tabs ── */
.admin-tab {
  display: none;
  animation: adminFadeIn 300ms ease;
}

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

@keyframes adminFadeIn {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:translateY(0); }
}

.tab-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}

.tab-header h2 {
  font-family: var(--ff-serif);
  font-size: 1.6rem;
  color: var(--admin-white);
  margin-bottom: .25rem;
}

.tab-header p {
  font-size: .85rem;
  color: var(--admin-text-muted);
}

.tab-header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.live-indicator {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--admin-green);
}

.live-dot {
  width: 8px;
  height: 8px;
  background: var(--admin-green);
  border-radius: 50%;
  animation: livePulse 2s ease-in-out infinite;
}

@keyframes livePulse {
  0%,100% { opacity:1; box-shadow:0 0 0 0 rgba(52,211,153,.4); }
  50%     { opacity:.7; box-shadow:0 0 0 6px rgba(52,211,153,0); }
}

.current-date {
  font-size: .8rem;
  color: var(--admin-text-muted);
}

.realtime-badge {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--admin-gold);
  background: rgba(var(--admin-gold-rgb),.08);
  padding: .2rem .6rem;
  border-radius: 20px;
}

/* ── 9. Stat Cards ── */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-bottom: 2rem;
}

/* Variant voor de twee dashboard-rijen van 3 cards (operationeel + financieel). */
.stats-row.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.stat-card {
  background: var(--admin-bg-card);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: border-color var(--admin-transition), transform var(--admin-transition);
}

.stat-card:hover {
  border-color: var(--admin-border-gold);
  transform: translateY(-2px);
}

.stat-card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--admin-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.stat-card-icon.blue   { background:rgba(96,165,250,.12); color:var(--admin-blue); }
.stat-card-icon.green  { background:rgba(52,211,153,.12); color:var(--admin-green); }
.stat-card-icon.gold   { background:rgba(var(--admin-gold-rgb),.12); color:var(--admin-gold); }
.stat-card-icon.purple { background:rgba(167,139,250,.12); color:var(--admin-purple); }

.stat-card-value {
  display: block;
  font-family: var(--ff-serif);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--admin-white);
  line-height: 1;
}

.stat-card-label {
  font-size: .75rem;
  color: var(--admin-text-muted);
  margin-top: .2rem;
}

/* ── 10. Admin Cards ── */
.admin-card {
  background: var(--admin-bg-card);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.admin-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--admin-border);
  flex-wrap: wrap;
  gap: .75rem;
}

.admin-card-header h3 {
  font-size: .95rem;
  font-weight: 600;
  color: var(--admin-white);
  display: flex;
  align-items: center;
  gap: .5rem;
}

.admin-card-header h3 i {
  color: var(--admin-gold);
  font-size: .85rem;
}

.card-subtitle {
  font-size: .78rem;
  color: var(--admin-text-muted);
  margin-top: .2rem;
  font-weight: 400;
}

.admin-card-body {
  padding: 1.25rem 1.5rem;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

/* ── 11. Tabellen ── */
.admin-table-wrap {
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
}

.admin-table th {
  padding: .85rem 1.25rem;
  text-align: left;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--admin-text-muted);
  border-bottom: 1px solid var(--admin-border);
  white-space: nowrap;
  background: rgba(255,255,255,.01);
}

.admin-table td {
  padding: .8rem 1.25rem;
  border-bottom: 1px solid var(--admin-border);
  color: var(--admin-text);
  vertical-align: middle;
}

.admin-table tbody tr {
  transition: background var(--admin-transition);
}

.admin-table tbody tr:hover {
  background: var(--admin-bg-hover);
}

.admin-table tbody tr:last-child td {
  border-bottom: none;
}

.price-cell {
  font-family: var(--ff-serif);
  font-weight: 700;
  color: var(--admin-gold) !important;
}

.service-table-icon {
  font-size: 1.1rem;
  color: var(--admin-gold);
}

.table-empty-cell {
  text-align: center;
  padding: 3rem 1rem !important;
  color: var(--admin-text-muted);
}

.table-empty {
  display: none;
  text-align: center;
  padding: 3rem 1rem;
  color: var(--admin-text-muted);
}

/* ── 12. Status Badges ── */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .2rem .6rem;
  border-radius: 20px;
  white-space: nowrap;
}

.status-booked    { background:rgba(96,165,250,.12); color:var(--admin-blue); }
.status-new       { background:rgba(96,165,250,.12); color:var(--admin-blue); }
.status-confirmed { background:rgba(var(--admin-gold-rgb),.12); color:var(--admin-gold); }
.status-completed { background:rgba(52,211,153,.12); color:var(--admin-green); }
.status-cancelled { background:rgba(248,113,113,.12); color:var(--admin-red); }
.status-no_show   { background:rgba(251,191,36,.12); color:var(--admin-orange); }
.status-no-show   { background:rgba(251,191,36,.12); color:var(--admin-orange); }
.status-active    { background:rgba(52,211,153,.12); color:var(--admin-green); }
.status-inactive  { background:rgba(110,110,128,.12); color:var(--admin-text-muted); }

/* ── 13. Agenda Items ── */
.agenda-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem .5rem;
  margin: 0 -.5rem;
  border-bottom: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm);
  cursor: pointer;
  transition: background var(--admin-transition);
}

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

.agenda-item:hover {
  background: var(--admin-bg-hover);
}

.agenda-item:focus-visible {
  outline: none;
  background: var(--admin-bg-hover);
  box-shadow: 0 0 0 2px rgba(var(--admin-gold-rgb),.4);
}

.agenda-time {
  font-family: var(--ff-serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--admin-gold);
  min-width: 50px;
}

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

.agenda-info strong {
  display: block;
  font-size: .85rem;
  color: var(--admin-white);
}

.agenda-info span {
  font-size: .75rem;
  color: var(--admin-text-muted);
}

.agenda-price {
  font-family: var(--ff-serif);
  font-weight: 700;
  color: var(--admin-gold);
  font-size: .95rem;
}

/* ── 14. Recent Items ── */
.recent-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem .5rem;
  border-bottom: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  transition: background var(--admin-transition);
}

.recent-item:hover {
  background: var(--admin-bg-hover);
}

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

.recent-avatar {
  width: 36px;
  height: 36px;
  background: rgba(var(--admin-gold-rgb),.12);
  color: var(--admin-gold);
  border-radius: var(--admin-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-serif);
  font-weight: 700;
  font-size: .9rem;
  flex-shrink: 0;
}

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

.recent-info strong {
  display: block;
  font-size: .82rem;
  color: var(--admin-white);
}

.recent-info span {
  font-size: .72rem;
  color: var(--admin-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.recent-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .3rem;
  flex-shrink: 0;
}

.recent-time {
  font-size: .68rem;
  color: var(--admin-text-muted);
}

/* ── Dashboard Booking Lightbox ── */
.dash-lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0,0,0,.55);
  justify-content: center;
  align-items: center;
}
.dash-lightbox-overlay.open {
  display: flex;
}
.dash-lightbox {
  background: var(--admin-bg-card);
  border-radius: var(--admin-radius);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  width: 420px;
  max-width: 92vw;
  max-height: 85vh;
  overflow-y: auto;
  animation: modalSlideIn .2s ease;
}
.dash-lightbox .modal-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--admin-border);
}
.dash-lightbox .modal-body {
  padding: 1.25rem;
}
.dash-lightbox-grid {
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.dash-lb-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .35rem 0;
  border-bottom: 1px solid var(--admin-border);
}
.dash-lb-row:last-child {
  border-bottom: none;
}
.dash-lb-label {
  font-size: .82rem;
  color: var(--admin-text-muted);
  white-space: nowrap;
}
.dash-lb-label i {
  width: 18px;
  text-align: center;
  margin-right: .4rem;
}
.dash-lb-value {
  font-size: .88rem;
  font-weight: 500;
  color: var(--admin-text);
  text-align: right;
}

/* Klikbare klantnaam in lightbox & tabel */
.dash-lb-link,
.customer-link {
  color: var(--admin-gold);
  text-decoration: none;
  transition: color .2s;
}
.dash-lb-link:hover,
.customer-link:hover {
  color: var(--admin-white);
  text-decoration: underline;
}

/* Opmerkingen in lightbox */
.dash-lb-notes {
  margin-top: .5rem;
  padding-top: .65rem;
  border-top: 1px solid var(--admin-border);
}
.dash-lb-notes .dash-lb-label {
  display: block;
  margin-bottom: .35rem;
}
.dash-lb-notes-text {
  margin: 0;
  font-size: .84rem;
  color: var(--admin-text-muted);
  line-height: 1.5;
  white-space: pre-wrap;
  background: rgba(255,255,255,.03);
  border-radius: var(--admin-radius);
  padding: .5rem .65rem;
}

/* ─── Inlog-archief tab-view (#119) ─────────────────────────────
   tab-login-audit gebruikt het normale tab-pattern (niet meer een
   lightbox). De filter-dropdown rechts in de tab-header krijgt een
   eigen rij-layout zodat label + select op één regel staan.
   Tabel + badges hebben hun eigen subtle styling — `.audit-table`
   override geeft strakkere row-hover. */
.audit-filter-row {
  display: flex;
  align-items: center;
  gap: .65rem;
}
.audit-filter-row label {
  font-size: .85rem;
  color: var(--admin-text-muted);
  white-space: nowrap;
  margin: 0;
}
.audit-filter-row select {
  min-width: 220px;
}
.audit-table tr:hover td {
  background: rgba(var(--admin-gold-rgb, 201,168,76), 0.03);
}
.audit-badge {
  display: inline-block;
  padding: .2rem .65rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}
.audit-badge-success {
  background: rgba(46,160,67,.12);
  color: #2ea043;
  border: 1px solid rgba(46,160,67,.28);
}
.audit-badge-fail {
  background: rgba(220,80,80,.12);
  color: #d35d5d;
  border: 1px solid rgba(220,80,80,.28);
  cursor: help;
}
/* Mobile: filter onder de header-titel zetten ipv ernaast.
   Op smalle schermen (<640px) komt audit-filter-row met de hele
   tab-header-actions onderaan terecht door tab-header's flex-wrap. */
@media (max-width: 640px) {
  .audit-filter-row {
    width: 100%;
  }
  .audit-filter-row select {
    flex: 1;
    min-width: 0;
  }
}

/* Footer met actieknoppen in dashboard-lightbox
   (voltooien / no-show / annuleren). Alleen zichtbaar
   voor status='booked' afspraken vanuit Agenda vandaag.
   Icon-only knoppen in dezelfde stijl als de Afspraken-
   pagina (btn-success-sm / btn-warn-sm / admin-btn-sm.danger),
   gecentreerd in de footer. */
.dash-lb-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .6rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--admin-border);
  background: var(--admin-bg-card);
}
.dash-lb-actions .admin-btn-sm {
  width: 44px;
  height: 36px;
  padding: 0;
  font-size: .95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Badge "gezien" — lege badge na klik */
.status-badge.status-seen {
  display: none;
}

/* NIEUW badge subtiel glow-effect */
.recent-item .status-badge.status-booked {
  animation: newPulse 2.5s ease-in-out infinite;
}
@keyframes newPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(96,165,250,.0); }
  50%      { box-shadow: 0 0 8px 3px rgba(96,165,250,.35); }
}

/* ── 15. Barber Status Grid ── */
.barber-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

.barber-status-card {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  background: var(--admin-bg-hover);
  border-radius: var(--admin-radius-sm);
}

.barber-status-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--admin-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-serif);
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.barber-status-info strong {
  display: block;
  font-size: .82rem;
  color: var(--admin-white);
}

.barber-status-info span {
  font-size: .7rem;
  color: var(--admin-text-muted);
}

.barber-status-indicator {
  margin-left: auto;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .15rem .5rem;
  border-radius: 20px;
}

.barber-status-indicator.online {
  background: rgba(52,211,153,.1);
  color: var(--admin-green);
}

.barber-status-indicator.offline {
  background: rgba(110,110,128,.1);
  color: var(--admin-text-muted);
}

/* ── 16. Empty State ── */
.empty-state {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--admin-text-muted);
}

.empty-state.full-width {
  grid-column: 1 / -1;
}

.empty-state i {
  font-size: 2rem;
  margin-bottom: .75rem;
  display: block;
  opacity: .4;
}

.empty-state h3 {
  font-size: 1rem;
  color: var(--admin-text);
  margin-bottom: .3rem;
}

.empty-state p {
  font-size: .82rem;
}

/* ── 17. Barber Grid (admin) ── */
.barber-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.admin-barber-card {
  background: var(--admin-bg-card);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  overflow: hidden;
  transition: border-color var(--admin-transition), transform var(--admin-transition);
}

.admin-barber-card:hover {
  border-color: var(--admin-border-gold);
  transform: translateY(-3px);
}

.admin-barber-card.inactive {
  opacity: .6;
}

.admin-barber-header {
  height: 80px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: .75rem 1rem;
  position: relative;
  opacity: .35;
}

.admin-barber-avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--admin-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  border: 3px solid var(--admin-bg-card);
  position: absolute;
  bottom: -28px;
  left: 1.25rem;
  z-index: 1;
}

.admin-barber-status {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .15rem .5rem;
  border-radius: 20px;
  position: absolute;
  top: .75rem;
  right: .75rem;
}

.admin-barber-status.online {
  background: rgba(52,211,153,.15);
  color: var(--admin-green);
}

.admin-barber-status.offline {
  background: rgba(110,110,128,.15);
  color: var(--admin-text-muted);
}

.admin-barber-body {
  padding: 2.25rem 1.25rem 1rem;
}

.admin-barber-body h4 {
  font-size: 1.05rem;
  color: var(--admin-white);
  margin-bottom: .15rem;
}

.barber-specialty {
  font-size: .78rem;
  color: var(--admin-gold);
  font-weight: 500;
  margin-bottom: .5rem;
}

.barber-bio {
  font-size: .78rem;
  color: var(--admin-text-muted);
  line-height: 1.5;
  margin-bottom: .75rem;
}

.barber-meta {
  display: flex;
  gap: 1.25rem;
  margin-bottom: .75rem;
}

.barber-meta-item {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  color: var(--admin-text);
}

.barber-meta-item i {
  color: var(--admin-gold);
  font-size: .75rem;
}

.barber-services strong {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--admin-text-muted);
  display: block;
  margin-bottom: .4rem;
}

.barber-service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}

.admin-chip {
  font-size: .68rem;
  color: var(--admin-text-muted);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--admin-border);
  padding: .15rem .5rem;
  border-radius: 20px;
}

.admin-barber-footer {
  display: flex;
  gap: .5rem;
  padding: .75rem 1.25rem 1rem;
  border-top: 1px solid var(--admin-border);
  flex-wrap: wrap;
}

/* ── 18. Formulier Elementen ── */
.admin-form-group {
  margin-bottom: 1.1rem;
}

.admin-form-group label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--admin-text);
  margin-bottom: .4rem;
}

.admin-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.admin-input-wrap i {
  position: absolute;
  left: .9rem;
  color: var(--admin-text-muted);
  font-size: .85rem;
  pointer-events: none;
}

.admin-input,
.admin-input-wrap input {
  width: 100%;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm);
  color: var(--admin-text);
  font-size: .85rem;
  padding: .65rem .9rem;
  outline: none;
  transition: border-color var(--admin-transition), background var(--admin-transition);
}

/* Icoon binnen input-wrap: extra ruimte aan de linkerkant (moet NA de shorthand padding). */
.admin-input-wrap input {
  padding-left: 2.5rem;
}

.admin-input:focus,
.admin-input-wrap input:focus {
  border-color: rgba(var(--admin-gold-rgb),.5);
  background: rgba(var(--admin-gold-rgb),.03);
}

.admin-textarea {
  resize: vertical;
  min-height: 70px;
  line-height: 1.5;
}

.admin-select {
  appearance: none;
  background: rgba(255,255,255,.03) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236e6e80'/%3E%3C/svg%3E") no-repeat right .9rem center;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm);
  color: var(--admin-text);
  font-family: var(--ff-sans);
  font-size: .85rem;
  padding: .65rem .9rem;
  padding-right: 2.2rem;
  outline: none;
  cursor: pointer;
  transition: border-color var(--admin-transition);
}

.admin-select:focus {
  border-color: rgba(var(--admin-gold-rgb),.5);
}

.admin-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.admin-form-row.three {
  grid-template-columns: 1fr 1fr 1fr;
}

.admin-search {
  position: relative;
}

.admin-search i {
  position: absolute;
  left: .75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--admin-text-muted);
  font-size: .8rem;
}

.admin-search input {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm);
  color: var(--admin-text);
  font-size: .82rem;
  padding: .55rem .75rem .55rem 2.2rem;
  outline: none;
  /* Vaste breedte: eerder groeide het veld bij :focus naar 280px wat in
     combinatie met .tab-header-actions { flex-wrap:wrap } de zoekbalk
     op een tweede regel kon duwen zodra je erin klikte. Een statische
     breedte voorkomt die sprong. */
  width: 260px;
  transition: border-color var(--admin-transition);
}

.admin-search input:focus {
  border-color: rgba(var(--admin-gold-rgb),.5);
}

/* ── 19. Toggle / Switch ── */
.admin-toggle-group {
  margin-bottom: .75rem;
}

.notif-section-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--admin-text-muted);
  margin: 0 0 8px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--admin-border);
}

.admin-toggle {
  display: flex;
  align-items: center;
  gap: .75rem;
  cursor: pointer;
  font-size: .82rem;
  color: var(--admin-text);
  /* `position: relative` geeft de visueel-verborgen native checkbox
     binnen .admin-toggle een positioneringscontext, zodat zijn
     `position: absolute` niet meer naar de viewport refereert en
     er geen rest-fragment (rond bolletje op Safari/iOS) door de
     label-tekst heen kan schijnen. */
  position: relative;
  /* Standaard ruimte onder de toggle zodat meerdere onder elkaar
     (bv. notificatie-schakelaars) lucht hebben. .compact overschrijft
     hieronder naar .3rem voor krappere form-lay-outs. */
  margin-bottom: .55rem;
}

/* Laatste in een stapel hoeft geen extra bottom-margin. */
.admin-toggle:last-child {
  margin-bottom: 0;
}

/* Wanneer toggles náást elkaar in een .admin-form-row staan (bv. drie
   toggles in de diensten-modal: Actief / Zichtbaar / Uitlichten), krijgt
   elke grid-cel dezelfde hoogte (bepaald door het label met de langste
   wrap). Zonder expliciete align-self gebruikt de <label> zijn natuurlijke
   hoogte waardoor de toggle-slider visueel zweeft op een andere Y-positie
   dan de sliders in de buurcellen. align-self:stretch dwingt alle drie de
   labels om de volledige cel-hoogte te vullen, zodat `align-items:center`
   binnenin alle sliders op exact dezelfde Y centreert. De bottom-margin
   wordt gereset want de `.admin-form-row` gebruikt al zijn eigen gap.*/
.admin-form-row > .admin-toggle {
  align-self: stretch;
  margin-bottom: 0;
}

/* Het tekst-span (laatste kind) krijgt de resterende breedte en
   mag wrappen zonder ooit onder de toggle-slider te schuiven. */
.admin-toggle > span:last-child {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.35;
}

.admin-toggle.compact {
  font-size: .78rem;
  gap: .5rem;
  margin-bottom: .3rem;
}

/* Wanneer .admin-toggle op een <label> binnen .admin-form-group staat,
   wint `.admin-form-group label` (specificity 0,1,1) normaal van
   `.admin-toggle` (0,1,0) en forceert `display: block` +
   `margin-bottom: .4rem` + vette/letterspacing label-styling. Dat
   laat de tekst-span over de toggle-slider heen lopen.

   Deze regels heffen dat op door met gelijke specificiteit maar
   latere cascade-volgorde de flex-layout te herstellen. */
.admin-form-group label.admin-toggle {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 0;
  font-size: .82rem;
  font-weight: normal;
  letter-spacing: normal;
}
.admin-form-group label.admin-toggle.compact {
  font-size: .78rem;
  gap: .5rem;
  margin-bottom: .3rem;
}

/* Native checkbox/radio visueel onzichtbaar maken zonder de focus/click
   semantiek van het label te breken. `display: none` werkt meestal, maar
   sommige browsers (Safari/iOS) en sommige CSS resets laten een
   checkbox-fragment doorschemeren naast de toggle-slider. Daarom gebruiken
   we hier de standaard "visually hidden" pattern met appearance-reset. */
.admin-toggle input[type="checkbox"],
.admin-toggle input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  margin: 0;
  padding: 0;
  border: 0;
  -webkit-appearance: none;
  appearance: none;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.toggle-slider {
  width: 40px;
  height: 22px;
  /* Theme-aware neutrale track-achtergrond: --admin-bg-hover is
     lichter dan de kaart in licht thema en donkerder dan de kaart
     in donker thema, dus altijd subtiel zichtbaar. */
  background: var(--admin-bg-hover);
  /* inset box-shadow fungeert als outline zónder de interne
     afmetingen te wijzigen (anders schuift het bolletje met
     border-box). Zo blijft de track in beide thema's duidelijk
     afgebakend, ook wanneer hij niet gevuld is. */
  box-shadow: inset 0 0 0 1px var(--admin-border);
  border-radius: 11px;
  position: relative;
  flex-shrink: 0;
  transition: background var(--admin-transition), box-shadow var(--admin-transition);
}

.toggle-slider::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: var(--admin-text-muted);
  border-radius: 50%;
  transition: transform var(--admin-transition), background var(--admin-transition);
}

.toggle-slider.small {
  width: 32px;
  height: 18px;
  border-radius: 9px;
}

.toggle-slider.small::after {
  width: 12px;
  height: 12px;
}

.admin-toggle input:checked + .toggle-slider {
  background: rgba(var(--admin-gold-rgb),.25);
  box-shadow: inset 0 0 0 1px rgba(var(--admin-gold-rgb),.45);
}

/* Zichtbare focus-ring voor toetsenbord-navigatie: de native checkbox
   is visueel verborgen, dus projecteren we de focus-indicator op de
   toggle-slider zelf. */
.admin-toggle input:focus-visible + .toggle-slider {
  box-shadow: inset 0 0 0 1px var(--admin-border),
              0 0 0 3px rgba(var(--admin-gold-rgb),.25);
}
.admin-toggle input:focus-visible:checked + .toggle-slider {
  box-shadow: inset 0 0 0 1px rgba(var(--admin-gold-rgb),.45),
              0 0 0 3px rgba(var(--admin-gold-rgb),.25);
}

.admin-toggle input:checked + .toggle-slider::after {
  transform: translateX(18px);
  background: var(--admin-gold);
}

.admin-toggle input:checked + .toggle-slider.small::after {
  transform: translateX(14px);
}

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

/* ── 20. Knoppen ── */
.admin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .06em;
  padding: .6rem 1.4rem;
  border-radius: var(--admin-radius-sm);
  border: 1px solid transparent;
  transition: all var(--admin-transition);
  white-space: nowrap;
  background: var(--admin-bg-hover);
  color: var(--admin-text);
  cursor: pointer;
}
.admin-btn:hover {
  background: var(--admin-bg-card);
  color: var(--admin-white);
}

.admin-btn-gold {
  background: linear-gradient(135deg, var(--admin-gold-dark), var(--admin-gold));
  color: #fff;
}

.admin-btn-gold:hover {
  background: linear-gradient(135deg, var(--admin-gold), var(--admin-gold-light));
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(var(--admin-gold-rgb),.25);
}

.admin-btn-outline {
  background: transparent;
  border-color: var(--admin-border);
  color: var(--admin-text);
}

.admin-btn-outline:hover {
  border-color: rgba(var(--admin-gold-rgb),.4);
  color: var(--admin-gold);
}
.admin-btn-danger {
  background: rgba(220,53,69,.12);
  border-color: rgba(220,53,69,.3);
  color: #dc3545;
}
.admin-btn-danger:hover {
  background: rgba(220,53,69,.22);
  border-color: #dc3545;
}

/* Outline variant van danger — voor uitklap/actie-knoppen waar een
   volvlak rood te heftig is (bv. "Annuleer afspraak" in lightbox-footer). */
.admin-btn-outline-danger {
  background: transparent;
  border-color: rgba(220,53,69,.4);
  color: #dc3545;
}
.admin-btn-outline-danger:hover {
  background: rgba(220,53,69,.10);
  border-color: #dc3545;
}

.admin-btn-sm {
  font-size: .75rem;
  font-weight: 500;
  padding: .35rem .75rem;
  border-radius: var(--admin-radius-sm);
  color: var(--admin-text-muted);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--admin-border);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  transition: all var(--admin-transition);
}

.admin-btn-sm:hover {
  border-color: rgba(var(--admin-gold-rgb),.3);
  color: var(--admin-gold);
}

.admin-btn-sm.warn:hover   { color:var(--admin-orange); border-color:rgba(251,191,36,.3); }
.admin-btn-sm.success:hover { color:var(--admin-green); border-color:rgba(52,211,153,.3); }
.admin-btn-sm.danger        { color:var(--admin-red); }
.admin-btn-sm.danger:hover  { background:rgba(248,113,113,.08); border-color:rgba(248,113,113,.3); }

.admin-btn-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--admin-radius-sm);
  color: var(--admin-text-muted);
  font-size: .78rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--admin-transition);
}

.admin-btn-icon:hover       { background:rgba(var(--admin-gold-rgb),.08); color:var(--admin-gold); }
.admin-btn-icon.edit:hover  { background:rgba(96,165,250,.08); color:var(--admin-blue); }
.admin-btn-icon.delete:hover { background:rgba(248,113,113,.08); color:var(--admin-red); }

/* ── Booking-modal: klant-zoekbalk (autocomplete) ──────────────────
   Vervangt de oude <select> dropdown door een input met live-
   gefilterde resultaten — handig vanaf ~100 klanten en noodzakelijk
   vanaf 300+. Selectie vult automatisch naam/email/telefoon in
   (zie pickCustomer() in admin-bookings.js). */
.booking-cust-search { position: relative; }

.booking-cust-search-row {
  display: flex;
  gap: .5rem;
  align-items: stretch;
}

.booking-cust-search-row > .admin-input {
  flex: 1 1 auto;
  min-width: 0;
}

.booking-cust-results {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 10;
  max-height: 260px;
  overflow-y: auto;
  /* --admin-surface bestaat niet; gebruik --admin-bg-card zodat het
     licht en donker thema beide correct renderen. */
  background: var(--admin-bg-card);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm);
  box-shadow: var(--admin-shadow);
  margin-top: 4px;
}

.booking-cust-result {
  padding: .5rem .75rem;
  cursor: pointer;
  font-size: .82rem;
  color: var(--admin-text);
  border-bottom: 1px solid var(--admin-border);
}

.booking-cust-result:last-child { border-bottom: 0; }
.booking-cust-result:hover,
.booking-cust-result:focus-visible {
  background: rgba(var(--admin-gold-rgb), .08);
  outline: none;
}
.booking-cust-result .muted {
  color: var(--admin-text-muted);
  font-size: .78rem;
}
.booking-cust-result.booking-cust-empty {
  color: var(--admin-text-muted);
  cursor: default;
  font-style: italic;
  text-align: center;
}

.action-btns, .order-btns {
  display: flex;
  align-items: center;
  gap: .25rem;
}

.order-btns span {
  font-size: .78rem;
  color: var(--admin-text-muted);
  min-width: 20px;
  text-align: center;
}

.admin-btn .btn-loading { display:none; }
.admin-btn.loading .btn-text { display:none; }
.admin-btn.loading .btn-loading { display:inline-flex; align-items:center; gap:.4rem; }

/* ── 21. Icoon & Kleur Selectors ── */
.icon-selector {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}

.icon-option {
  width: 40px;
  height: 40px;
  border-radius: var(--admin-radius-sm);
  border: 1px solid var(--admin-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--admin-text-muted);
  font-size: 1rem;
  transition: all var(--admin-transition);
}

.icon-option:hover {
  border-color: rgba(var(--admin-gold-rgb),.4);
  color: var(--admin-gold);
}

.icon-option.selected {
  background: rgba(var(--admin-gold-rgb),.12);
  border-color: var(--admin-gold);
  color: var(--admin-gold);
}

.color-selector {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}

.color-option {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: all var(--admin-transition);
}

.color-option:hover {
  transform: scale(1.15);
}

.color-option.selected {
  border-color: var(--admin-white);
  box-shadow: 0 0 0 3px rgba(255,255,255,.15);
  transform: scale(1.15);
}

/* ── 22. Modal ── */
/* Modal overlay — JS voegt class "open" toe en verwijdert [hidden].
   Eén enkele set regels, geen dubbele blokken.
   Standaard: display:none.  .open → display:flex + zichtbaar. */
.admin-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(6px);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.admin-modal-overlay.open {
  display: flex;
}

.admin-modal {
  background: var(--admin-bg-card);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--admin-shadow);
}

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

.modal-header h3 {
  font-family: var(--ff-serif);
  font-size: 1.15rem;
  color: var(--admin-white);
}

.admin-modal-close {
  width: 32px;
  height: 32px;
  color: var(--admin-text-muted);
  font-size: .85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all var(--admin-transition);
}

.admin-modal-close:hover {
  background: rgba(248,113,113,.1);
  color: var(--admin-red);
}

.admin-modal-form {
  padding: 1.5rem;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: .75rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--admin-border);
}

/* ── 23. Rooster / Schedule ── */
.schedule-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  font-size: .85rem;
  color: var(--admin-text);
}

.schedule-bar label {
  font-weight: 600;
  color: var(--admin-text-muted);
}

.week-nav {
  display: flex;
  align-items: center;
  gap: .5rem;
}

#weekLabel {
  font-weight: 600;
  min-width: 110px;
  text-align: center;
}

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

.schedule-table th {
  padding: .65rem .5rem;
  text-align: center;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--admin-gold);
  border-bottom: 1px solid var(--admin-border);
}

.schedule-table td {
  padding: .4rem;
  text-align: center;
  border-bottom: 1px solid var(--admin-border);
  vertical-align: top;
}

.schedule-slot {
  padding: .3rem .4rem;
  border-radius: 4px;
  font-size: .72rem;
  margin-bottom: 2px;
  cursor: pointer;
  transition: background var(--admin-transition);
}

.schedule-slot.available {
  background: rgba(52,211,153,.08);
  color: var(--admin-green);
}

.schedule-slot.unavailable {
  background: rgba(248,113,113,.06);
  color: var(--admin-text-muted);
  text-decoration: line-through;
}

.schedule-slot.booked {
  background: rgba(var(--admin-gold-rgb),.1);
  color: var(--admin-gold);
  font-weight: 600;
}

.schedule-slot:hover {
  opacity: .8;
}

.default-schedule {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.default-day {
  background: var(--admin-bg-hover);
  border-radius: var(--admin-radius-sm);
  padding: .75rem 1rem;
}

.default-day h5 {
  font-size: .78rem;
  font-weight: 600;
  color: var(--admin-gold);
  margin-bottom: .5rem;
}

.default-day .time-inputs {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
}

.default-day .time-inputs span {
  color: var(--admin-text-muted);
}

.default-day input[type="time"] {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--admin-border);
  border-radius: 4px;
  color: var(--admin-text);
  font-family: var(--ff-sans);
  font-size: .78rem;
  padding: .3rem .4rem;
  outline: none;
}

.default-day input[type="time"]:focus {
  border-color: rgba(var(--admin-gold-rgb),.5);
}

/* ── 24. Instellingen ── */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.5rem;
}

/* ── 24b. Settings Sub-tabs ── */
.settings-subtabs {
  display: flex;
  gap: .5rem;
  padding: 0 0 1.25rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-bottom: 1px solid var(--admin-border);
  margin-bottom: 1.5rem;
}
.settings-subtabs::-webkit-scrollbar { display: none; }

/* M13.F5b — Mobile-dropdown alternative voor de horizontale tabs.
   Default verborgen op desktop/tablet, wordt zichtbaar in de
   smartphone-mediaquery. */
.settings-subtabs-mobile {
  display: none;
}

.settings-subtab {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1rem;
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  background: transparent;
  color: var(--admin-text-muted);
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s;
}
.settings-subtab:hover {
  color: var(--admin-text);
  border-color: var(--admin-gold);
  background: rgba(var(--admin-gold-rgb), .08);
}
.settings-subtab.active {
  color: #fff;
  background: var(--admin-gold);
  border-color: var(--admin-gold);
}
.settings-subtab i { font-size: .78rem; }

.settings-panel { display: none; }
.settings-panel.active { display: block; }

/* ── 24c. Website CMS Components ── */
.site-texts-sections .text-section-block {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--admin-border);
}
.site-texts-sections .text-section-block:last-child {
  border-bottom: none;
  margin-bottom: 0;
}
.text-section-block h4 {
  font-size: .95rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--admin-gold);
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* ── M21.1 — SEO-editor styling ── */
.seo-intro {
  padding: .75rem 1rem;
  margin-bottom: 1rem;
  background: rgba(201, 169, 97, 0.08);
  border-left: 3px solid var(--admin-gold, #C9A961);
  border-radius: .3rem;
  font-size: .9rem;
  color: var(--admin-text, #2A2622);
}
.seo-intro p { margin: 0; }
.seo-form .form-hint {
  display: block;
  margin-top: .35rem;
  font-size: .78rem;
  color: var(--admin-text-muted, #6b6b6b);
}
.seo-counter { font-variant-numeric: tabular-nums; font-weight: 500; }

.seo-wizard-launch {
  appearance: none;
  background: var(--admin-gold, #C9A961);
  border: none;
  color: #FBFAF6;
  padding: .35rem .7rem;
  margin-left: .5rem;
  border-radius: .25rem;
  font-size: .8rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.seo-wizard-launch:hover { filter: brightness(1.1); }

/* ── SEO-wizard modal ── */
.seo-wizard-modal {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  padding: 1rem;
}
.seo-wizard-modal.is-open { display: flex; }
.seo-wizard-shell {
  background: var(--admin-panel-bg, #FBFAF6);
  border-radius: .6rem;
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.seo-wizard-body { display: flex; flex-direction: column; }
.seo-wizard-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem 1.5rem 0.75rem;
  border-bottom: 1px solid var(--admin-border);
}
.seo-wizard-head h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--admin-gold, #C9A961);
}
.seo-wizard-progress {
  margin: .25rem 0 0;
  font-size: .8rem;
  color: var(--admin-text-muted, #6b6b6b);
}
.seo-wizard-close {
  appearance: none;
  background: transparent;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: var(--admin-text-muted, #6b6b6b);
}
.seo-wizard-close:hover { color: var(--admin-text, #2A2622); }
.seo-wizard-content {
  padding: 1.25rem 1.5rem;
  flex: 1;
}
.seo-wizard-content p {
  margin: 0 0 .75rem;
  line-height: 1.5;
}
.seo-wizard-foot {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--admin-border);
  background: var(--admin-bg-soft, rgba(0,0,0,.02));
  flex-wrap: wrap;
}

/* M230.x — Talen op de website (Identity-sectie). Switch-rij per taal,
   standaardtaal is disabled + altijd-aan. De "Andere taal..."-input
   accepteert elke ISO-639-1 code zodat exotische talen toegevoegd kunnen
   worden zonder dropdown-cap. */
.site-langs-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.site-langs-list .lang-switch-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .3rem 0;
}
.site-langs-list .lang-switch-row.is-default .lang-switch-name {
  color: var(--admin-text-muted, #6b6760);
}
.site-langs-list .lang-switch-row.is-default .lang-switch-badge {
  display: inline-block;
  margin-left: .4rem;
  font-size: .7rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--admin-text-muted, #6b6760);
  opacity: .8;
}
.site-langs-list .lang-switch-name {
  flex: 1 1 auto;
}
.site-langs-list .lang-switch-remove {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--admin-text-muted, #6b6760);
  cursor: pointer;
  font-size: .9rem;
  padding: .2rem .4rem;
  border-radius: .2rem;
}
.site-langs-list .lang-switch-remove:hover {
  background: rgba(0,0,0,.05);
  color: var(--admin-text, #2A2622);
}
.site-langs-add {
  display: flex;
  gap: .4rem;
  align-items: flex-start;
  margin-top: .75rem;
  flex-wrap: wrap;
}
.site-langs-add-wrap {
  position: relative;
  flex: 0 0 auto;
}
.site-langs-add .admin-input {
  width: 18rem;
}

/* Autocomplete-dropdown onder de Toevoegen-input. Absolute zodat 'm
   bovenop andere settings-rows valt zonder layout te verschuiven; max-
   height + scroll voor lange resultaten. */
.site-langs-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: .25rem 0 0;
  padding: .25rem 0;
  background: var(--admin-bg-card, #fff);
  border: 1px solid var(--admin-border, #d8d4cc);
  border-radius: .35rem;
  list-style: none;
  max-height: 14rem;
  overflow-y: auto;
  z-index: 20;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
}
.site-langs-suggestions li {
  padding: .35rem .65rem;
  cursor: pointer;
  font-size: .85rem;
  color: var(--admin-text, #2A2622);
  display: flex;
  align-items: baseline;
  gap: .5rem;
}
.site-langs-suggestions li:hover,
.site-langs-suggestions li.is-active {
  background: rgba(201, 169, 97, 0.12);
}
.site-langs-suggestions li[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
}
.site-langs-suggestions .lang-code {
  font-family: var(--admin-font-mono, ui-monospace, monospace);
  font-size: .75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--admin-text-muted, #6b6760);
  min-width: 2.2rem;
}
.site-langs-suggestions .lang-empty {
  padding: .5rem .65rem;
  color: var(--admin-text-muted, #6b6760);
  font-style: italic;
  font-size: .82rem;
}

/* Switch in een lang-switch-row — hergebruik .texts-switch visueel, maar
   sibling-state-rules waren tot M230.x gescopt onder .texts-show-empty-
   toggle. Dupliceer hier de :checked/:disabled/:focus-visible rules en
   verberg de native checkbox zodat alleen de track + thumb zichtbaar zijn. */
.lang-switch-row .checkbox-inline {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0;
  cursor: pointer;
}
.lang-switch-row .checkbox-inline input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.lang-switch-row .checkbox-inline input:checked + .texts-switch {
  background: var(--admin-gold, #C9A961);
}
.lang-switch-row .checkbox-inline input:checked + .texts-switch::before {
  transform: translateX(12px);
}
.lang-switch-row .checkbox-inline input:disabled + .texts-switch {
  opacity: .6;
  cursor: not-allowed;
}
.lang-switch-row .checkbox-inline input:focus-visible + .texts-switch {
  outline: 2px solid var(--admin-gold, #C9A961);
  outline-offset: 2px;
}

/* M230.x — Toggle "Toon alle velden" boven de section-subtabs.
   Native checkbox is verborgen (a11y blijft via aria); .texts-switch is
   de visuele track met ::before als thumb. State volgt input:checked
   via sibling-selector. */
.texts-show-empty-toggle {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .75rem;
  font-size: .85rem;
  color: var(--admin-text-muted, #6b6760);
  cursor: pointer;
  user-select: none;
}
.texts-show-empty-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.texts-switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 18px;
  background: var(--admin-border, #d8d4cc);
  border-radius: 9px;
  transition: background .15s;
  flex-shrink: 0;
}
.texts-switch::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  transition: transform .15s;
}
.texts-show-empty-toggle input:checked + .texts-switch {
  background: var(--admin-gold, #C9A961);
}
.texts-show-empty-toggle input:checked + .texts-switch::before {
  transform: translateX(12px);
}
.texts-show-empty-toggle input:focus-visible + .texts-switch {
  outline: 2px solid var(--admin-gold, #C9A961);
  outline-offset: 2px;
}

/* ── M21 — Section sub-tabs in Teksten-paneel ── */
.section-subtab-row {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: .75rem;
  margin-bottom: 1.5rem;
  background: var(--admin-bg-soft, rgba(0,0,0,.02));
  border: 1px solid var(--admin-border);
  border-radius: .4rem;
}
.section-subtab {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: var(--admin-text, #2A2622);
  font-family: inherit;
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .02em;
  padding: .5rem .9rem;
  border-radius: .3rem;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.section-subtab:hover {
  background: rgba(201, 169, 97, 0.08);
  border-color: var(--admin-border);
}
.section-subtab.is-active {
  background: var(--admin-gold, #C9A961);
  border-color: var(--admin-gold, #C9A961);
  color: #FBFAF6;
}
.text-section-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 1rem;
  color: var(--admin-gold, #C9A961);
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* ── M17.10 — Knop-pair (button_text + button_url als één cluster) ── */
.admin-form-group.button-pair > label {
  display: block;
  font-weight: 600;
  margin-bottom: .4rem;
}
.button-pair-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;  /* tekst smaller, link breder */
  gap: .75rem;
  padding: .75rem;
  background: var(--admin-bg-soft, rgba(0,0,0,.02));
  border: 1px solid var(--admin-border);
  border-radius: .4rem;
}
.button-pair-grid .sub-label {
  font-size: .78rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--admin-text-muted, #6b6b6b);
  margin-bottom: .25rem;
  display: block;
}
@media (max-width: 640px) {
  .button-pair-grid { grid-template-columns: 1fr; }
}

/* Gallery admin grid */
.gallery-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
}
.gallery-admin-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--admin-border);
  aspect-ratio: 1;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.gallery-admin-item.is-featured {
  border-color: rgba(var(--admin-gold-rgb), 0.75);
  box-shadow: 0 0 0 1px rgba(var(--admin-gold-rgb), 0.35);
}
.gallery-featured-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(var(--admin-gold-rgb), 0.95);
  color: #1a1508;
  font-size: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  background: var(--admin-bg-hover);
}
.gallery-admin-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery-admin-item .gallery-item-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .5rem;
  opacity: 0;
  transition: opacity .2s;
}
.gallery-admin-item:hover .gallery-item-overlay { opacity: 1; }
.gallery-item-overlay .gallery-title {
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gallery-item-overlay .gallery-actions {
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
  justify-content: center;
}
.gallery-item-overlay button {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.9);
  color: #333;
  cursor: pointer;
  font-size: .75rem;
  transition: background .15s, opacity .15s;
}
.gallery-item-overlay button[disabled] {
  opacity: .4;
  cursor: not-allowed;
}
.gallery-item-overlay button:hover { background: #fff; }
.gallery-item-overlay button.danger { background: rgba(220,53,69,.9); color: #fff; }
.gallery-item-overlay button.danger:hover { background: #dc3545; }

/* FAQ admin list */
.faq-admin-list .faq-admin-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--admin-border);
}
.faq-admin-list .faq-admin-item:last-child { border-bottom: none; }
.faq-admin-item .faq-content { flex: 1; }
.faq-admin-item .faq-content strong {
  display: block;
  margin-bottom: .25rem;
  font-size: .9rem;
}
.faq-admin-item .faq-content p {
  font-size: .82rem;
  color: var(--admin-text-muted);
  margin: 0;
}
.faq-admin-item .faq-actions {
  display: flex;
  gap: .4rem;
  flex-shrink: 0;
}

/* Social admin list */
.social-admin-list .social-admin-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--admin-border);
}
.social-admin-list .social-admin-item:last-child { border-bottom: none; }
.social-admin-item .social-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(var(--admin-gold-rgb), .15);
  color: var(--admin-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.social-admin-item .social-info { flex: 1; min-width: 0; }
.social-admin-item .social-info strong { font-size: .85rem; }
.social-admin-item .social-info small {
  display: block;
  font-size: .75rem;
  color: var(--admin-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.social-admin-item .social-actions {
  display: flex;
  gap: .4rem;
  flex-shrink: 0;
}

/* Admin form actions row */
.admin-form-actions {
  display: flex;
  gap: .75rem;
  justify-content: flex-end;
  margin-top: 1rem;
}

/* Volgorde-cel — twee compacte ↑/↓-knoppen i.p.v. een rauw getal
   (feedback: "10/20/30 ziet er niet afgewerkt uit").
   Zelfde patroon als FAQ/galerij maar in z'n eigen tabelcel zodat de
   data-label "Volgorde" op smartphone als aparte regel verschijnt
   (niet samengeklonterd met de andere acties).
   `:disabled` dimt de knop aan de boven- of onderrand zodat duidelijk
   is dat verder niet kan, in plaats van een no-op API-call. */
.order-arrows {
  display: inline-flex;
  gap: .25rem;
  justify-content: center;
}
.order-arrows .admin-btn-sm[disabled],
.order-arrows .admin-btn-sm:disabled {
  opacity: .35;
  cursor: not-allowed;
}

/* Radio-pills — gebruikt voor presets bij Recente boekingen retentie
  . Native radio's blijven semantisch (toetsenbord, screen
   reader, form-submit), maar visueel pill-vormige selectie i.p.v. een
   blokje + circle. Gold accent op `:checked`. */
.radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .35rem;
}
.radio-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem .85rem;
  border: 1px solid var(--admin-border);
  border-radius: 999px;
  background: var(--admin-bg-input, var(--admin-bg-card));
  color: var(--admin-text);
  font-size: .85rem;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
  user-select: none;
}
.radio-pill input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--admin-border);
  border-radius: 50%;
  margin: 0;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
}
.radio-pill input[type="radio"]:checked {
  border-color: var(--admin-gold);
}
.radio-pill input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: var(--admin-gold);
}
.radio-pill:has(input[type="radio"]:checked) {
  border-color: var(--admin-gold);
  background: rgba(var(--admin-gold-rgb), .08);
  color: var(--admin-text);
}

/* Override-badge in de afspraken-tabel: markeert handmatig ingeboekte
   afspraken die buiten de normale availability/werktijden vallen. */
.override-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  border-radius: 50%;
  background: rgba(var(--admin-gold-rgb), .18);
  color: var(--admin-gold);
  font-size: .65rem;
  vertical-align: middle;
  cursor: help;
}
tr.is-override td:first-child {
  border-left: 2px solid var(--admin-gold);
}

/* Inline edit/add form (used by gallery, reviews, FAQ, socials) */
.inline-form {
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.inline-form h4 {
  margin: 0 0 1rem;
  font-size: 16px;
  font-weight: 600;
  color: var(--admin-text);
}

/* Post status badges */
.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: .75rem;
  font-weight: 600;
}
.status-badge.draft { background: rgba(var(--admin-gold-rgb),.15); color: var(--admin-gold); }
.status-badge.published { background: rgba(40,167,69,.15); color: #28a745; }
.status-badge.archived { background: rgba(108,117,125,.15); color: #6c757d; }

/* Star rating */
.star-rating { color: #f4c430; letter-spacing: 1px; }

/* ── 25. Admin Toast ── */
.admin-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background: var(--admin-bg-card);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm);
  padding: .75rem 1.25rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  box-shadow: var(--admin-shadow);
  z-index: 9999;
  min-width: 260px;
  transform: translateX(120%);
  transition: transform 350ms cubic-bezier(.175,.885,.32,1.275);
  font-size: .82rem;
}

.admin-toast.show { transform: translateX(0); }

.admin-toast.success { border-left: 3px solid var(--admin-green); }
.admin-toast.error   { border-left: 3px solid var(--admin-red); }
.admin-toast.warning { border-left: 3px solid var(--admin-orange); }
.admin-toast.info    { border-left: 3px solid var(--admin-blue); }

.admin-toast i {
  font-size: 1rem;
}

.admin-toast.success i { color: var(--admin-green); }
.admin-toast.error i   { color: var(--admin-red); }
.admin-toast.warning i { color: var(--admin-orange); }
.admin-toast.info i    { color: var(--admin-blue); }

/* ── 26. Helpers ── */
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.text-muted { color: var(--admin-text-muted); }

/* ── 27. Scrollbar ── */
::-webkit-scrollbar       { width:5px; height:5px; }
::-webkit-scrollbar-track { background:var(--admin-bg); }
::-webkit-scrollbar-thumb { background:var(--admin-gold-dark); border-radius:10px; }
::-webkit-scrollbar-thumb:hover { background:var(--admin-gold); }

::selection {
  background: rgba(var(--admin-gold-rgb),.2);
  color: var(--admin-gold-light);
}

/* ── 28. Responsive ── */
@media (max-width: 1024px) {
  .stats-row,
  .stats-row.cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .admin-form-row.three {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .admin-sidebar {
    transform: translateX(-100%);
  }

  .admin-sidebar.open {
    transform: translateX(0);
    box-shadow: 10px 0 40px rgba(0,0,0,.5);
  }

  .admin-topbar {
    display: flex;
  }

  .admin-main {
    margin-left: 0;
    /* M15.F4 — In drawer-mode is de sidebar weg, dus content mag de
       volledige viewport pakken. Override de default max-width die
       260px voor de sidebar reserveert. */
    max-width: 100vw;
    padding: calc(var(--admin-topbar-h) + 1.5rem) 1rem 1.5rem;
  }

  .stats-row {
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
  }

  .stat-card {
    padding: 1rem;
  }

  .stat-card-value {
    font-size: 1.3rem;
  }

  .tab-header {
    flex-direction: column;
  }

  .tab-header-actions {
    width: 100%;
  }

  .admin-search input {
    width: 100%;
  }

  .admin-search input:focus {
    width: 100%;
  }

  .admin-form-row,
  .admin-form-row.three {
    grid-template-columns: 1fr;
  }

  .barber-grid {
    grid-template-columns: 1fr;
  }

  .settings-grid {
    grid-template-columns: 1fr;
  }

  .modal-actions {
    flex-direction: column;
  }

  .modal-actions .admin-btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .stats-row {
    grid-template-columns: 1fr;
  }

  .admin-modal {
    max-height: 95vh;
    border-radius: var(--admin-radius) var(--admin-radius) 0 0;
  }

  .schedule-bar {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   M13.F1 — Mobile/tablet foundation
   ───────────────────────────────────────────────────────────────────
  keuzes:
     • Smartphone (≤480) + Tablet (481-1024) beide volledig beheerbaar
     • Read-flow eerst (Dashboard / Agenda / Klanten / Berichten)
     • Smartphone-nav: combinatie bottom-nav (4 hoofdtabs) + hamburger
       (overige tabs via sidebar-overlay)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Bottom-nav (smartphone, ≤480) ───────────────────────────────── */
.admin-bottom-nav {
  display: none;        /* default: alleen actief op smartphone */
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 90;          /* onder modals (9999) en sidebar (100), boven content */
  background: var(--admin-bg-2);
  border-top: 1px solid var(--admin-border);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  /* env() = iOS notch/home-indicator vrijhouden */
}
.admin-bottom-nav { gap: 0; }
.bottom-nav-link {
  flex: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 4px;
  background: transparent;
  border: 0;
  color: var(--admin-text-muted);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  min-height: 44px;     /* WCAG-touch-target */
  transition: color .12s;
}
.bottom-nav-link i { font-size: 18px; }
.bottom-nav-link.active,
.bottom-nav-link:hover {
  color: var(--admin-accent);
}
.bottom-nav-link[hidden] { display: none; }

/* ── Sidebar-backdrop (mobile-overlay) ───────────────────────────── */
.admin-sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(2px);
  z-index: 99;          /* net onder de sidebar (100) */
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
}
.admin-sidebar-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}

/* ── Tablet-tier (481-1024px) ────────────────────────────────────── */
/* Sidebar blijft zichtbaar maar smaller (icon-first). Geen bottom-nav.
   Modals krijgen max-width zodat ze niet randloos vol scherm vullen.
   Bestaande @media (max-width: 1024px) hierboven heeft de stats-row
   en dashboard-grid al aangepast — we vullen aan met sidebar-tweaks. */
/* Tablet-range. Bovengrens 1366px dekt Pad 5 (1280 css px in landscape),
   iPad Pro 12.9 (1366), Surface tablets en de meeste Android-tablets.
   Sidebar is 200px ipv 260px voor extra content-ruimte; tabel-cells +
   actie-knoppen krijgen compactere padding zodat de Acties-kolom in
   8-11-kolommen-tabellen volledig past zonder horizontaal scrollen. */
@media (min-width: 769px) and (max-width: 1366px) {
  .admin-sidebar { width: 200px; }
  .admin-main    { margin-left: 200px; max-width: calc(100vw - 200px); }
  .sidebar-link  { padding: .65rem .9rem; font-size: .9rem; }
  /* Topbar verborgen — sidebar is altijd zichtbaar */
  .admin-topbar  { display: none; }

  /* M15.x — Compactere tabel-cell-padding en actie-knoppen zodat
     brede tabellen (Afspraken 8 kol., Diensten 11 kol.) volledig
     binnen `100vw - 200px` passen. Verlies aan adem-ruimte is
     minimaal; de info blijft leesbaar. */
  .admin-table th,
  .admin-table td        { padding: .6rem .85rem; }
  .action-btns           { gap: .2rem; }
  .action-btns .admin-btn-sm,
  .order-btns  .admin-btn-sm { padding: .3rem .5rem; }
}

/* ── Smartphone-tier (≤480px) ───────────────────────────────────── */
/* Bottom-nav aan, modals full-screen, content krijgt extra bottom-
   padding zodat 't laatste item niet onder de bottom-nav valt. */
@media (max-width: 480px) {
  .admin-bottom-nav {
    display: flex;
  }
  /* Content niet onder bottom-nav verstoppen */
  .admin-main {
    padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
  }
  /* Modal full-screen — geen radius, full height. `100dvh` (dynamic
     viewport) i.p.v. `100vh` zodat in PWA-standalone-mode op iOS de
     modal precies de bruikbare schermhoogte krijgt zonder onder de
     notch te schuiven. `padding-top: env(safe-area-inset-top)` zorgt
     dat alle content (header, body, footer) start onder de notch.
     `padding-bottom: env(safe-area-inset-bottom)` houdt content boven
     de iPhone home-indicator.bug vroege M13-pass: in PWA viel de
     modal-top onder de notch en kon je niet goed scrollen. */
  .admin-modal {
    max-width: 100%;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
    margin: 0;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    /* iOS Safari momentum-scroll voor body-content binnen de modal */
    -webkit-overflow-scrolling: touch;
  }
  .admin-modal-overlay { padding: 0; }
  /* Tab-header items stacken */
  .tab-header h2  { font-size: 1.4rem; }
  .tab-header-actions { flex-wrap: wrap; gap: 8px; }
  .tab-header-actions .admin-btn,
  .tab-header-actions .admin-search { flex: 1 1 auto; min-width: 140px; }
  /* Action-knoppen-rij scrollbaar i.p.v. wrappen — voorkomt dat
     een rij met 4 knoppen boven elkaar gaat staan */
  .action-btns {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
  }
}

/* ── Body-scroll-lock bij open sidebar of modal ─────────────────── */
/* Voorkom dat de achterliggende content scrollt terwijl een overlay
   open is — vooral op iOS-Safari belangrijk waar momentum-scroll
   anders door de overlay heen gaat. Class wordt door JS gezet. */
body.admin-scroll-lock {
  overflow: hidden;
  /* iOS-fix: position:fixed houdt de scroll-positie vast */
  position: relative;
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════
   M13.F2 — Tabellen → kaart-per-rij op smartphone
   ───────────────────────────────────────────────────────────────────
   Een 7-kolom-tabel (Afspraken: Ref/Datum/Klant/Dienst/Medewerker/
   Prijs/Status/Acties) past simpelweg niet op een 360-480px scherm.
   Patroon: render-laag voegt `data-label="Datum"` etc. per <td> toe;
   CSS herrangschikt op smartphone:
     • <thead> verbergen (labels staan nu per cel)
     • <tr> wordt een card (border, padding, gap)
     • <td> wordt block met label-prefix uit data-label
     • Sommige cellen krijgen highlight (datum/tijd, klantnaam)
   Werkt voor admin-table en met @data-label-attr per <td>.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* Tabel-frame zelf: geen min-width, geen border-collapse, gewoon blocken */
  .admin-table-wrap {
    overflow: visible;
    /* table-wrap krijgt op desktop een border + radius + bg — op
       smartphone halen we dat eraf zodat de tr-cards zelf duidelijk
       zijn (anders dubbele border-frame). */
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .admin-table {
    display: block;
    border-collapse: separate;
    border-spacing: 0;
  }
  .admin-table thead {
    /* Headers verstoppen we visueel maar houden in de DOM voor a11y */
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .admin-table tbody { display: block; }
  .admin-table tbody tr {
    display: block;
    background: var(--admin-bg-card);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius);
    padding: 12px 14px;
    margin-bottom: 10px;
  }
  .admin-table tbody tr:hover { background: var(--admin-bg-card); }  /* hover-glow uit op touch */
  /* Klassieke responsive-table pattern: label staat absolute links,
     content krijgt padding-left zodat 'ie naast de label start.
     Zo blijft <br>, <small>, <span> binnen de cel zich normaal
     gedragen — geen flex die alle children als losse items ziet. */
  .admin-table tbody td {
    position: relative;
    display: block;
    padding: 8px 0 8px 110px;
    border: 0;
    text-align: right;          /* content rechts uitgelijnd, label absolute links */
    min-height: 32px;           /* verticale ruimte zodat label past */
  }
  .admin-table tbody td:first-child { padding-top: 0; }
  .admin-table tbody td:last-child  { padding-bottom: 0; }

  /* Label-prefix uit data-label-attribuut — staat absolute links. */
  .admin-table tbody td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    top: 8px;
    width: 100px;
    color: var(--admin-text-muted);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: left;
    line-height: 1.4;
  }
  .admin-table tbody td:first-child::before { top: 0; }

  /* Acties-rij: label boven, knoppen-row onder.voorkeur:
     vierkante action-buttons evenredig over de breedte verdeeld
     (zoals iOS-app-style action-bar). Grid met `grid-auto-flow:
     column + grid-auto-columns: 1fr` geeft N gelijke kolommen
     ongeacht aantal kinderen — 4 buttons = elk 1/4 breedte, 2
     buttons = elk 1/2. `aspect-ratio: 1` op de buttons zelf maakt
     ze visueel vierkant tot een max-height. */
  .admin-table tbody td.actions-cell {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 10px;
    padding: 34px 0 0 0;        /* 34px top voor label-ruimte */
    margin-top: 10px;
    border-top: 1px solid var(--admin-border);
    text-align: left;
  }
  .admin-table tbody td.actions-cell::before {
    top: 10px;                  /* label net onder de border */
    width: auto;
    text-align: left;
  }
  /* Buttons: vierkante touch-targets met aspect-ratio 1, capped op
     56px hoogte zodat ze niet enorm worden bij brede schermen. */
  .admin-table tbody td.actions-cell button,
  .admin-table tbody td.actions-cell .admin-btn-sm {
    width: 100%;
    min-height: 50px;
    max-height: 56px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Volgorde-cel op smartphone: data-label rechts links naast de
     pijltjes (zelfde 110px padding-left als andere cellen, dus de
     label "Volgorde" past netjes), arrows blijven inline-flex aan de
     rechter rand. Knoppen krijgen 44×44 touch-target — kleiner dan
     de actions-cell-buttons want het zijn aanvullingen, niet de
     hoofdacties van de rij. */
  .admin-table tbody td.order-cell {
    text-align: right;
  }
  .admin-table tbody td.order-cell .order-arrows {
    justify-content: flex-end;
  }
  .admin-table tbody td.order-cell .admin-btn-sm {
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Klantprofiel — Afspraakhistorie tabel apart styled: niet met
     padding-left:110px-pattern want dat zou te veel verticale ruimte
     kosten. Kleine compacte cards: alle info onder elkaar in normale
     text-flow, geen data-labels. */
  #custDetailAppointments tbody tr {
    padding: 12px 14px;
  }
  #custDetailAppointments tbody td {
    padding: 3px 0;
    text-align: left;
    min-height: 0;
  }
  #custDetailAppointments tbody td::before {
    display: none;              /* geen data-label voor deze tabel */
  }

  /* Berichten — actions-cell verbergen op smartphone: rij-klik
     opent het bericht al (zelfde flow als view-knop), en de
     "markeer-gelezen"-actie gebeurt automatisch bij openen. */
  #messagesTable tbody td.actions-cell {
    display: none;
  }

  /* M13.F3 fix-up (vroege M13-pass) —feedback:
     ──────────────────────────────────────────────
     (a) "LAATSTE BEZOEK" wrapt over 3 regels (LAATSTE / BEZOEK /
         MARKETING). Reden: label-width was 100px en met letter-spacing
         + uppercase past 'ie er net niet op. Maak de label-kolom wat
         breder + nowrap zodat lange labels op één regel blijven en
         ruimer ademen. Padding-left van td volgt mee zodat er geen
         overlap komt met de waarde rechts. */
  .admin-table tbody td {
    padding-left: 130px;
  }
  .admin-table tbody td::before {
    width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* (b) Modal-header in PWA-mode: de modal zelf heeft nu padding-top:
         env(safe-area-inset-top) (zie hierboven), dus de header krijgt
         z'n normale padding zonder dubbele safe-area. */

  /* (c) Bell-icoon staat nog steeds zichtbaar op smartphone — op iOS
         is Notification.permission vaak 'default' tot user expliciet
         iets kiest, dus mijn JS-conditie maakt 'em zichtbaar. Maar de
         knop heeft op iOS Safari geen werkende functie (Web Push werkt
         alleen in PWA-mode op iOS 16.4+ met service worker, en die
         hebben we niet). Verberg dus altijd op smartphone — als we
         later push toevoegen, halen we deze regel weg. */
  #topbarNotif {
    display: none !important;
  }

  /* ─── M13.F4 — Edit-flows: modals + forms ────────
     Modal-footers met Save/Annuleer-knoppen stacken op smartphone
     zodat je niet 2 of 3 knoppen krachtig samen op één regel hebt.
     `flex-direction: column-reverse` plaatst de hoofd-actie (laatste
     knop in HTML, meestal Save/gold) bovenaan en secundaire acties
     (Annuleren, Sluiten) onder. We targeten alle drie modal-footer-
     varianten (.modal-actions/.modal-footer/.admin-modal-footer)
     plus de admin-form-actions-rij die binnen forms staat. */
  .modal-actions,
  .modal-footer,
  .admin-modal-footer,
  .admin-form-actions {
    flex-direction: column-reverse;
    gap: 8px;
  }
  .modal-actions > .admin-btn,
  .modal-footer > .admin-btn,
  .admin-modal-footer > .admin-btn,
  .admin-form-actions > .admin-btn {
    width: 100%;
    margin: 0;
  }

  /* Booking-modal klant-zoekbalk: search + 2 selects naast elkaar
     op desktop. Op smartphone stacken zodat selects vol breed zijn. */
  .booking-cust-search-row {
    flex-direction: column;
  }
  .booking-cust-search-row > * {
    width: 100%;
    flex: 0 0 auto;
  }

  /* ─── M13.F5 — Cockpit + Auth/Login ─────────────────────────
     Login-card minder padding op smartphone (3rem 2.5rem voelt
     overdreven op een 360px scherm). Behoudt 400px max-width en
     centreer-positionering uit basis-CSS. */
  .login-card {
    padding: 2rem 1.5rem;
    max-width: 100%;
  }
  .login-overlay {
    padding: 1rem;
  }

  /* Cockpit admin-cards: minder padding voor compactere look */
  .admin-card {
    padding: 1rem;
  }
  .admin-card-header {
    padding: 0 0 .75rem;
  }

  /* Berichten-instellingen modal — Mail-vormgeving:
     Form + iframe-preview staan op desktop side-by-side via
     flex-wrap. Op smartphone wrappen ze al naar onder elkaar
     vanwege `flex-wrap: wrap` op de inline-style. We trimmen
     alleen de iframe-hoogte want 560px is op smartphone te lang
     voor comfortabel scrollen. */
  #maillayPreviewFrame {
    height: 360px !important;
  }

  /* Roosters & Beschikbaarheid (sched-tab):
     - Wekelijks/Uitzonderingen-toggle staat op desktop rechts via
       `margin-left: auto`. Op smartphone willen we 'em onder de
       medewerker-dropdown laten landen op volle breedte (segmented-
       control-stijl), zelfde patroon als andere form-elementen op
       smartphone. Reset margin + stretch naar full-width. Toggle-
       kinderen (`.schedule-view-btn`) krijgen `flex: 1` zodat ze
       elk de helft van de balk vullen. */
  .schedule-view-switch {
    margin-left: 0;
    align-self: stretch;
    width: 100%;
    justify-content: stretch;
  }
  .schedule-view-btn {
    flex: 1;
    text-align: center;
  }

  /* Bottom-nav-tabs (Dashboard, Afspraken, Klanten, Berichten) zijn
     op smartphone al via de bottom-nav bereikbaar — dezelfde links
     in de hamburger-sidebar zouden dubbel zijn — feedback uit vroege M13-pass.
     Verberg die vier sidebar-items op smartphone. De overige tabs
     (Medewerkers, Diensten, Klantbeheer, Roosters, Cockpit, Account,
     Login-audit) blijven zichtbaar in de hamburger want die staan
     niet in de bottom-nav. */
  .admin-sidebar .sidebar-link[data-tab="dashboard"],
  .admin-sidebar .sidebar-link[data-tab="bookings"],
  .admin-sidebar .sidebar-link[data-tab="customers"],
  .admin-sidebar .sidebar-link[data-tab="messages"] {
    display: none !important;
  }

  /* ─── M13.F5b Cockpit volledige smartphone-pass (vroege M13-pass) ───
     Alle Cockpit-cards staan in een settings-grid die al 1 kolom
     wordt op smartphone via auto-fill minmax(340px,1fr). Hieronder
     fine-tuning voor specifieke Cockpit-elementen die nog rommelig
     waren. */

  /* Openingstijden-rij (salon-hours) — dag-checkbox + tijd-inputs.
     Op smartphone stacken: dag-label boven, tijden eronder. */
  .salon-hours-row {
    flex-direction: column;
    align-items: stretch;
    gap: .4rem;
  }
  .salon-hours-row label.day-label {
    min-width: 0;
  }
  .salon-hours-row input[type="time"] {
    flex: 1;
  }

  /* Sluitingen / closures — datum-input + reden + delete in een rij.
     Stacken op smartphone. */
  .closure-row {
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
  }

  /* Logo-upload area — kleinere padding op smartphone. */
  .logo-upload-area {
    padding: 1rem;
  }
  .logo-upload-compact {
    max-width: 100%;
  }

  /* Theme-switch / session-switch / security-switch (pill-toggles
     met meerdere opties) — op smartphone full-width zodat elke
     optie evenredige ruimte krijgt i.p.v. cluster-rechts. */
  .theme-switch,
  .session-switch,
  .security-switch {
    width: 100%;
    display: flex;
  }
  .theme-switch > *,
  .session-switch > *,
  .security-switch > * {
    flex: 1;
    text-align: center;
  }

  /* Cockpit-subtabs (Algemeen/Teksten/Galerij/etc) — op smartphone
     verbergen we de horizontale tabs-bar (forceerde min-width op de
     pagina) en tonen we i.p.v. een dropdown. JS-sync tussen
     dropdown en de bestaande tab-buttons gebeurt in admin-website.js
     `initSettingsSubtabs()`. */
  .settings-subtabs {
    display: none;
  }
  .settings-subtabs-mobile {
    display: block;
    width: 100%;
    margin-bottom: 1rem;
  }

  /* Defense in depth — tab-content mag nooit horizontaal overflowen.
     Voorkomt dat een rogue child-element (lange URL, code-block,
     image zonder max-width) de pagina alsnog te breed maakt. */
  #tab-settings,
  .settings-panel,
  .admin-card-body {
    overflow-x: hidden;
  }
  /* Form-row binnen settings-cards — al via .admin-form-row !important
     naar 1 kolom, hier extra zekerheid voor card-interne grids die
     mogelijk ander class-naam hebben. */
  .settings-grid > * {
    min-width: 0;
  }

  /* FAQ-list (admin) — 4 actie-knoppen (omhoog, omlaag, edit, delete)
     stonden op één lange rij rechts, te krap. Voorkeur: 2×2 vierkant
     grid — pijltjes boven, edit/delete onder. Plus de FAQ-content
     bovenaan, actions eronder, want naast elkaar past niet binnen
     smartphone-breedte. */
  .faq-admin-list .faq-admin-item {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .faq-admin-item .faq-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 6px;
    width: 100%;
  }
  .faq-admin-item .faq-actions > * {
    min-height: 44px;
    width: 100%;
  }

  /* Social-list (admin) — icoon links + text + edit/delete rechts.
     Op smartphone stacken voor consistentie met FAQ-stijl. Bovenste
     rij: icoon + platform + URL, onderste rij: bewerken/verwijderen
     als 2-koloms grid. */
  .social-admin-list .social-admin-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: .85rem 0;
  }
  .social-admin-item .social-info {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    flex: 0 0 auto;
    min-width: 0;
  }
  .social-admin-item .social-info strong {
    flex-shrink: 0;
  }
  .social-admin-item .social-info .social-url,
  .social-admin-item .social-info small {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .8rem;
  }
  .social-admin-item .social-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    width: 100%;
    flex-shrink: 1;
  }
  .social-admin-item .social-actions > * {
    min-height: 44px;
    width: 100%;
  }
  /* "Rooster opslaan"-knop staat los in een card-body. Op smartphone
     zelfde behandeling als modal-footer-buttons: full-width. */
  #saveWeeklySchedule,
  .admin-card-body > .admin-btn-gold {
    width: 100%;
  }

  /* Topbar-titel echt in het midden van het scherm centreren
     i.p.v. in de visuele ruimte tussen hamburger en actions
     (vroege M13-pass,feedback). `space-between` met 0-breed
     actions-element drukt de titel een beetje rechts uit. Met
     position:absolute + left:50% + translateX(-50%) komt 'ie
     onafhankelijk van de zijden in het echte horizontale midden. */
  .admin-topbar {
    position: fixed;            /* was al, laat staan voor zekerheid */
  }
  .topbar-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;       /* hamburger/bell-clicks gaan eronder door */
  }

  /* Klant-link niet onderlijnen — meer "data-row"-gevoel */
  .admin-table tbody td .customer-link { font-weight: 600; }

  /* Cellen met `.text-center` (Prijs, Status) — op desktop staat
     content gecentreerd in de tabelkolom, op smartphone willen we
     dezelfde rechts-uitlijning als de andere cellen voor consistentie. */
  .admin-table tbody td.text-center {
    text-align: right;
  }

  /* Berichten-tabel: read-dot-cel (eerste kolom) is een visuele
     status-indicator, niet info — verbergen op smartphone, want de
     unread-state wordt al via `tr.msg-unread { background: ... }`
     gecommuniceerd voor de hele card. Eventuele kleine read-dot in
     de cell zelf zou een lege padding-left:110px-rij geven. */
  .admin-table tbody td.msg-dot-cell {
    display: none;
  }
  /* Klant-icoontje (gekoppelde klant) op smartphone wat groter zodat
     'ie als touch-target werkt — minimaal ~32×32 want het zit naast
     de klantnaam. */
  .msg-customer-link {
    padding: 6px;
    margin-left: 4px !important;
  }

  /* M13.F3 — Klantprofiel-detail: side-by-side grid wordt 1 kolom
     op smartphone. Stats-grid heeft al auto-fit dus geen extra fix
     nodig — wel padding-trim voor compacter geheel. */
  .admin-detail-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .admin-stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
  }
  .admin-stats-grid .stat-card {
    padding: 14px;
  }
  /* Tab-header met "Terug"-knop links naast titel — op smartphone
     blijft de knop links staan maar de hele rij wrapt netjes. */
  .tab-header > div:first-child {
    flex-wrap: wrap;
  }

  /* M13.F2 — Dashboard Agenda-items + Recente-boekingen compacter
     op smartphone. Time-kolom smaller, gap kleiner, price/badge onder
     elkaar zodat de info-blok op één regel breed kan blijven. */
  .agenda-item {
    gap: .6rem;
    padding: .65rem .4rem;
  }
  .agenda-time {
    min-width: 44px;
    font-size: .92rem;
  }
  .agenda-price {
    font-size: .85rem;
    flex-shrink: 0;
  }

  /* Bookings-tab header-actions: search + 2 selects + add-btn. Op
     smartphone willen we ze stacken zodat selects vol breed zijn —
     anders half-zichtbaar achter elkaar. */
  .tab-header-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .tab-header-actions .admin-search,
  .tab-header-actions .admin-select,
  .tab-header-actions .admin-btn {
    width: 100%;
    flex: 0 0 auto;
  }

  /* Dashboard-header op smartphone: de subtitle
     "Realtime overzicht van uw zaak" laten we vallen — kost ruimte op
     de belangrijkste pagina. Live-indicator + datum mogen inline blijven
     i.p.v. te stacken zoals andere tab-header-actions, want het zijn
     compacte info-elementen, geen brede buttons/selects. */
  #tab-dashboard .tab-header > div > p[data-i18n="dash.subtitle"] {
    display: none;
  }
  #tab-dashboard .tab-header-actions {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
  }
  #tab-dashboard .tab-header-actions .live-indicator,
  #tab-dashboard .tab-header-actions .current-date {
    width: auto;
    flex: 0 0 auto;
  }

  /* Form-row in modals (Datum + Tijd, etc.) stackt 1-kolom op
     smartphone. De bestaande @media(max-width:768px) doet dit
     al, maar de auto-fit minmax(140px, 1fr) op desktop kan binnen
     een full-screen modal alsnog 2 kolommen geven omdat de modal
     volledige viewport-breedte krijgt op smartphone — dus 320px
     is genoeg voor 2× 140px. Forceer hier expliciet 1 kolom. */
  .admin-form-row,
  .admin-form-row.three {
    grid-template-columns: 1fr !important;
  }

  /* Datum-input op iOS Safari heeft een ingebouwde min-width die
     groter is dan z'n container — daardoor liep 'ie net buiten de
     modal-rand. min-width:0 forceert respect voor de container,
     box-sizing zorgt dat padding niet bovenop de width komt.
     Geldt ook voor andere edge-case inputs in modals. */
  .admin-modal input,
  .admin-modal select,
  .admin-modal textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  /* Form-group: zorg dat de wrapper nooit kan groeien voorbij z'n
     parent-cell — anders kan een te brede iOS-date-input alsnog
     overflow geven omdat de form-group meegroeit. min-width:0 +
     overflow:hidden doet dat strict. */
  .admin-modal .admin-form-group {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }
  /* Defense in depth: de modal zelf mag nooit horizontaal overflowen.
    bug vroege M13-pass: native iOS date-picker is onsterfelijk
     breed en maakt de pagina horizontaal scrollbaar. overflow-x:hidden
     op modal-body sluit dat af. */
  .admin-modal {
    overflow-x: hidden;
  }
}

/* ── iOS auto-zoom-fix (M13.F1) ─────────────────────── */
/*bug-rapport: tikken op login-input zoomt het scherm in en
   blijft daarna zo staan; tab-switch op iPad-landscape geeft
   verschillende zoom-niveaus per tab.
   Root-cause: iOS Safari (en Chrome op iOS) zoomen automatisch in
   wanneer focus terechtkomt op een <input>/<select>/<textarea> met
   `font-size < 16px`. Onze `.admin-input`-default is .85rem ≈ 13.6px,
   dus iedere klik op een formulierveld trigde de zoom. Eens
   ingezoomd blijft die zoom over tab-switches hangen, met als gevolg
   dat verschillende tabs verschillend "ingezoomd" lijken.
   Fix: forceer ≥16px op mobiel + tablet. Op desktop blijft het
   bestaande .85rem design — daar speelt het iOS-gedrag niet.
   M13.F2 fix-up: `.admin-search input` heeft eigen .82rem-regel die
   met hogere specificity de generic input-rules overruled — toegevoegd
   aan de selector-lijst. */
@media (max-width: 1024px) {
  .admin-input,
  .admin-input-wrap input,
  .admin-search input,
  .admin-select,
  .admin-textarea,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  input[type="date"],
  input[type="time"],
  input[type="url"],
  input:not([type]),
  select,
  textarea {
    font-size: 16px;
  }
}
/* ═══════════════════════════════════════════════════════════════
   ADDENDUM (herbouw admin 1.0) — nieuwe componenten
   ═══════════════════════════════════════════════════════════════ */

/* ── Banner (error / info) ── */
.admin-banner {
  padding: 12px 18px;
  border-radius: var(--admin-radius-sm);
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid var(--admin-border);
}
.admin-banner-error {
  background: rgba(248,113,113,0.08);
  color: var(--admin-red);
  border-color: rgba(248,113,113,0.25);
}
.admin-banner-info {
  background: rgba(96,165,250,0.08);
  color: var(--admin-blue);
  border-color: rgba(96,165,250,0.25);
}

/* ── Form extras ── */
.admin-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}
/* form-label — uniforme typografie voor alle label-elementen in
   admin-form-groups. Was eerder onbestaand, waardoor browser-defaults
   (16px bold) inconsistent oogden tegenover de toggle-labels
   (.admin-toggle = 0.82rem, regular). Nu één bron van waarheid. */
.form-label {
  display: block;
  font-size: .82rem;
  font-weight: 500;
  color: var(--admin-text);
  margin-bottom: 6px;
  line-height: 1.35;
}
.form-hint {
  display: block;
  font-size: 12px;
  color: var(--admin-text-muted);
  margin-top: 4px;
}
.form-error {
  min-height: 20px;
  color: var(--admin-red);
  font-size: 13px;
  margin-top: 8px;
}
.muted { color: var(--admin-text-muted); }

/* (aanvullende modal-blok verwijderd — zie geconsolideerde regels bij sectie 22) */
.modal-form { display: flex; flex-direction: column; }
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--admin-border);
}
.modal-header h3 { margin: 0; font-size: 18px; color: var(--admin-white); }
.modal-close {
  background: transparent; border: 0; color: var(--admin-text-muted);
  font-size: 18px; cursor: pointer; padding: 4px 8px;
}
.modal-close:hover { color: var(--admin-white); }
.modal-body { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.modal-body hr {
  border: 0; border-top: 1px solid var(--admin-border); margin: 8px 0;
}
.modal-footer {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--admin-border);
}

/* ── Staff grid (medewerkers) ── */
.staff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.staff-card {
  background: var(--admin-bg-card);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  padding: 16px;
  transition: border-color var(--admin-transition), transform var(--admin-transition);
}
.staff-card:hover { border-color: var(--admin-border-gold); }
.staff-card.inactive { opacity: 0.55; }
.staff-card-top { display: flex; gap: 12px; align-items: center; }
.staff-avatar {
  width: 52px; height: 52px; border-radius: var(--admin-radius-sm);
  background: linear-gradient(135deg, var(--admin-gold), var(--admin-gold-dark));
  color: #fff; font-weight: 700; font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
img.staff-avatar-img {
  object-fit: cover;
  background: var(--admin-bg-2);
}
.staff-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.staff-meta strong { color: var(--admin-white); }
.staff-meta span { font-size: 13px; color: var(--admin-text-muted); }
.staff-bio {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--admin-text);
  line-height: 1.5;
}
.staff-card-actions {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px;
}

/* Badges — bewust 10px + lichtere letter-spacing zodat de chip-rij
   onder een naam/titel niet visueel domineert. Combineerde met
   .staff-role-badge die op .65rem zat ontstond een 3-chip rij die
   in verhouding tot de body-tekst (13px) te zwaar werd. */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 600;
  padding: 2px 7px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.3px;
  width: fit-content;
}
.badge-login    { background: rgba(var(--admin-gold-rgb), 0.15); color: var(--admin-gold); }
.badge-nologin  { background: rgba(110,110,128,0.15); color: var(--admin-text-muted); }
.badge-gold     { background: rgba(var(--admin-gold-rgb), 0.18); color: var(--admin-gold); }
.badge-ok       { background: rgba(16, 185, 129, 0.15); color: var(--admin-green, #10b981); }
.badge-off      { background: rgba(110,110,128,0.15); color: var(--admin-text-muted); }

/* Status badges (met tekst) — vaste min-breedte voor uitlijning */
.badge.badge-info {
  background: rgba(59, 130, 246, .15); color: #3b82f6;
  min-width: 90px; justify-content: center;
}
.badge.badge-success {
  background: rgba(16, 185, 129, .15); color: var(--admin-green, #10b981);
  min-width: 90px; justify-content: center;
}
.badge.badge-muted {
  background: rgba(148, 163, 184, .15); color: var(--admin-text-muted);
  min-width: 90px; justify-content: center;
}
.badge.badge-danger {
  background: rgba(239, 68, 68, .15); color: #ef4444;
  min-width: 90px; justify-content: center;
}

/* ── Staff status (op dashboard) ──
   Grid-gebaseerde kaart zodat avatar / info / badge drie duidelijke kolommen
   zijn die nooit over elkaar heen lopen, ongeacht schermbreedte. Lange
   namen of functietitels krijgen ellipsis i.p.v. wrappen onder de badge. */
.staff-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.staff-status-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--admin-bg-2);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm);
  min-width: 0;
}
.staff-status-avatar {
  width: 40px; height: 40px; border-radius: var(--admin-radius-sm);
  background: var(--admin-gold); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}
/* Wanneer er een echte foto ingesteld is, maakt staff-status-avatar-img
   er een img-element van met dezelfde afmetingen. object-fit: cover zorgt
   dat rechthoekige bronbeelden netjes vierkant worden weergegeven. */
.staff-status-avatar-img {
  object-fit: cover;
  background: transparent;
}
.staff-status-info {
  min-width: 0;
  overflow: hidden;
}
.staff-status-info strong {
  display: block;
  color: var(--admin-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}
.staff-status-info span {
  display: block;
  font-size: 12px;
  color: var(--admin-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
  margin-top: 2px;
}
.staff-status-indicator {
  font-size: 11px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.4px;
  white-space: nowrap;
  flex-shrink: 0;
  justify-self: end;
}
.staff-status-indicator.online  { background: rgba(52,211,153,0.15); color: var(--admin-green); }
.staff-status-indicator.offline { background: rgba(110,110,128,0.15); color: var(--admin-text-muted); }

/* Compacte kaart: badge op eigen regel wanneer card < 320px */
@media (max-width: 360px) {
  .staff-status-card {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .staff-status-indicator {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

/* ── Service-picker ── */
.picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px;
  max-height: 50vh; overflow: auto;
  padding: 4px;
}
.picker-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: var(--admin-bg-2);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm);
  cursor: pointer;
  transition: border-color var(--admin-transition);
}
.picker-item:hover { border-color: var(--admin-border-gold); }
.picker-item input { accent-color: var(--admin-gold); }
.picker-item small { color: var(--admin-text-muted); margin-left: 4px; }

/* ── Openingstijden-grid ── */
.salon-hours-grid {
  display: flex; flex-direction: column; gap: 8px;
}
.salon-hours-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  padding: .6rem .8rem;
  background: var(--admin-bg-2);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm);
  overflow: hidden;
}
.salon-hours-row label.day-label {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 120px;
  flex: 0 0 auto;
  font-weight: 600;
  color: var(--admin-white);
  text-transform: capitalize;
  font-size: .85rem;
  cursor: pointer;
}
.salon-hours-row label.day-label input[type="checkbox"] {
  accent-color: var(--admin-gold);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.salon-hours-time-group {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-left: auto;
  flex-shrink: 1;
  min-width: 0;
}
.salon-hours-row input[type="time"].admin-input,
.salon-hours-row input[type="time"] {
  width: 100px;
  min-width: 70px;
  max-width: 110px;
  flex: 1 1 100px;
  box-sizing: border-box;
  padding: .5rem .4rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.salon-hours-row .sep {
  color: var(--admin-text-muted);
  font-size: .85rem;
  flex-shrink: 0;
}
.salon-hours-row input[type="time"]:disabled {
  opacity: .35;
}
@media (max-width: 600px) {
  .salon-hours-row { gap: .4rem; }
  .salon-hours-time-group { margin-left: 0; width: 100%; }
}

/* ── Schedule view switch ── */
.schedule-view-switch {
  display: inline-flex;
  background: var(--admin-bg-2);
  border: 1px solid var(--admin-border);
  border-radius: 999px;
  padding: 3px;
  margin-left: auto;
}
.schedule-view-btn {
  background: transparent; border: 0;
  color: var(--admin-text-muted);
  font-size: 13px; font-weight: 500;
  padding: 6px 14px; border-radius: 999px;
  cursor: pointer;
  transition: background var(--admin-transition), color var(--admin-transition);
}
.schedule-view-btn.active {
  background: var(--admin-gold); color: #fff;
}

/* ══════════════════════════════════════════════════════════════
   Schedule: wekelijks rooster — compacte tabel + preview-dots
   ══════════════════════════════════════════════════════════════ */

/* ── Tabel ── */
.sched-week-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 .3rem;
}
.sched-week-row td {
  padding: .55rem .5rem;
  vertical-align: middle;
  background: var(--admin-bg-hover);
}
.sched-week-row td:first-child {
  border-radius: var(--admin-radius-sm) 0 0 var(--admin-radius-sm);
  width: 36px;
  text-align: center;
}
.sched-week-row td:last-child {
  border-radius: 0 var(--admin-radius-sm) var(--admin-radius-sm) 0;
  text-align: right;
  padding-right: .75rem;
}
.sched-week-row.off td {
  opacity: .55;
}
.sched-week-row.off:hover td,
.sched-week-row.off:focus-within td {
  opacity: .85;
}
.sched-week-row.weekend .sched-td-day {
  color: var(--admin-text-muted);
}
.sched-check-label {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sched-check-label input[type="checkbox"] {
  accent-color: var(--admin-gold);
  width: 16px; height: 16px;
}
.sched-td-day {
  font-weight: 600;
  font-size: .85rem;
  color: var(--admin-text);
  white-space: nowrap;
  width: 100px;
}
.sched-td-times {
  white-space: nowrap;
}

/* ── Status-badge in tabel ── */
.sched-status-badge {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 2px 10px;
  border-radius: 999px;
}
.sched-status-badge.on {
  background: rgba(52,211,153,.15);
  color: var(--admin-green);
}
.sched-status-badge.off {
  background: rgba(248,113,113,.1);
  color: var(--admin-red);
}

/* ── Tijdinvoer ── */
.schedule-times {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.schedule-times.disabled {
  opacity: .35;
  pointer-events: none;
}
.schedule-times input[type="time"].admin-input,
.schedule-times input[type="time"] {
  width: 92px;
  min-width: 68px;
  max-width: 100px;
  box-sizing: border-box;
  padding: .4rem .3rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: .82rem;
}
.schedule-sep {
  color: var(--admin-text-muted);
  font-size: .85rem;
}

@media (max-width: 600px) {
  .sched-td-status { display: none; }
  .sched-week-row td { padding: .45rem .3rem; }
  .sched-td-day { width: auto; font-size: .78rem; }
  .schedule-times input[type="time"] { width: 78px; min-width: 60px; font-size: .75rem; }
}

/* ── Status kleuren (afspraken) ── */
.status-booked    { background: rgba(96,165,250,0.15);  color: var(--admin-blue); }
.status-completed { background: rgba(52,211,153,0.15);  color: var(--admin-green); }
.status-cancelled { background: rgba(248,113,113,0.15); color: var(--admin-red); }
.status-no_show   { background: rgba(251,191,36,0.15);  color: var(--admin-orange); }
.status-badge     {
  font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.4px;
}

/* Booking action buttons */
.btn-success-sm {
  color: var(--admin-green, #10b981) !important;
  border-color: rgba(16, 185, 129, .3);
}
.btn-success-sm:hover { background: rgba(16, 185, 129, .15); }
.btn-warn-sm {
  color: var(--admin-orange, #f59e0b) !important;
  border-color: rgba(245, 158, 11, .3);
}
.btn-warn-sm:hover { background: rgba(245, 158, 11, .15); }

/* Kleine utility */
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }

/* ── Sidebar badge (bij Afspraken tab) ── */
/* ── Berichten module ── */
.msg-unread { background: rgba(var(--admin-gold-rgb), 0.04); }
.msg-unread .msg-name { font-weight: 700; color: var(--admin-white); }
tr[data-msg-id] { cursor: pointer; }
tr[data-msg-id]:hover { background: rgba(var(--admin-gold-rgb), 0.07); }

.msg-dot {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 50%;
}
.msg-dot-unread { background: var(--admin-gold); box-shadow: 0 0 6px rgba(var(--admin-gold-rgb), 0.5); }
.msg-dot-read   { background: var(--admin-border); }

.msg-email {
  color: var(--admin-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.msg-email:hover { color: var(--admin-accent); }

.msg-date { color: var(--admin-text); }
.msg-time { color: var(--admin-text-muted); font-size: 12px; margin-left: 4px; }

.msg-status-badge {
  font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 4px;
  text-transform: uppercase; letter-spacing: 0.4px;
}
.msg-status-unread  { background: rgba(var(--admin-gold-rgb), 0.15); color: var(--admin-gold); }
.msg-status-unread i { font-size: 6px; }
.msg-status-read    { background: rgba(52,211,153,0.15); color: var(--admin-green); }
.msg-status-replied { background: rgba(99,148,255,0.15); color: #6394ff; }
.msg-dot-replied    { background: #6394ff; }

.msg-detail-grid {
  display: grid; grid-template-columns: auto 1fr;
  gap: 8px 16px; margin-bottom: 16px;
}
.msg-detail-row {
  display: contents;
}
.msg-detail-label {
  font-weight: 600; color: var(--admin-text-muted);
  font-size: 13px; white-space: nowrap;
}
.msg-detail-body {
  background: var(--admin-bg-2);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm);
  padding: 16px;
}
.msg-detail-body p {
  margin: 0; line-height: 1.7;
  white-space: pre-wrap; word-break: break-word;
}

/* Reply formulier */
.msg-reply-section {
  margin-top: 16px;
}
.msg-reply-form {
  margin-top: 12px;
}
.msg-reply-to {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--admin-text-muted);
  margin-bottom: 10px;
}
.msg-reply-to i {
  color: var(--admin-gold); font-size: 11px;
}
.msg-reply-textarea {
  width: 100%; min-height: 100px; resize: vertical;
  font-size: 14px; line-height: 1.6;
}
.msg-reply-actions {
  display: flex; gap: 8px; margin-top: 10px;
}
.msg-reply-status {
  margin-top: 8px; font-size: 13px;
}
.msg-reply-status.success { color: var(--admin-green); }
.msg-reply-status.error   { color: var(--admin-red); }

/* No-reply bevestigings-state — toont na succesvol
   verzenden i.p.v. het reply-formulier. Verklaart dat de module
   geen inbox heeft + biedt expliciete knop om nieuw bericht te sturen. */
.msg-reply-sent {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 16px;
  background: rgba(var(--admin-gold-rgb), 0.06);
  border: 1px solid rgba(var(--admin-gold-rgb), 0.18);
  border-radius: 8px;
  margin-top: 8px;
}
/* hidden-attribuut moet hier expliciet winnen — anders overruled
   `display: flex` de UA-default door equal-specificity-late-win. */
.msg-reply-sent[hidden],
.msg-reply-form[hidden] { display: none; }
.msg-reply-sent-icon {
  font-size: 22px;
  color: var(--admin-green);
  flex-shrink: 0;
  line-height: 1.2;
}
.msg-reply-sent-text { flex: 1; }
.msg-reply-sent-text strong {
  display: block; color: var(--admin-text);
  font-size: 14px; margin-bottom: 4px;
}
.msg-reply-sent-text p {
  margin: 0; color: var(--admin-text-dim);
  font-size: 13px; line-height: 1.45;
}

/* Klant-kandidaten blok (#163) — minimale weergave:
   alleen header "Gekoppeld aan klant" + Profiel-openen-knop. Bij
   meerdere kandidaten staan de knoppen onder elkaar met de klantnaam
   in het label zelf. Geen extra info-regel —feedback was dat
   de naam/match-type/bezoek-stats juist rommelig waren. */
.msg-candidates-block {
  background: var(--admin-bg-card);
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.msg-cand-header {
  font-size: 13px;
  font-weight: 600;
  color: var(--admin-text-muted);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.msg-cand-header i { color: var(--admin-accent); }
.msg-cand-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.msg-cand-btn + .msg-cand-btn { margin-top: 6px; }
.msg-customer-link:hover { opacity: 0.7; }

/* Chat-thread (berichtenhistorie) */
.msg-chat-thread {
  display: flex; flex-direction: column; gap: 12px;
  max-height: 360px; overflow-y: auto;
  padding: 16px 0; margin-bottom: 12px;
}
.msg-chat-bubble {
  max-width: 85%; padding: 12px 16px;
  border-radius: 12px; font-size: 14px; line-height: 1.6;
  word-break: break-word;
}
.msg-chat-incoming {
  align-self: flex-start;
  background: var(--admin-bg-2);
  border: 1px solid var(--admin-border);
  border-bottom-left-radius: 4px;
}
.msg-chat-outgoing {
  align-self: flex-end;
  background: rgba(var(--admin-gold-rgb), 0.10);
  border: 1px solid rgba(var(--admin-gold-rgb), 0.25);
  border-bottom-right-radius: 4px;
}
.msg-chat-meta {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px; font-size: 12px;
}
.msg-chat-meta strong {
  color: var(--admin-white); font-size: 12px;
}
.msg-chat-time {
  color: var(--admin-text-muted); font-size: 11px;
}
.msg-chat-text {
  color: var(--admin-text); white-space: pre-wrap;
}
.msg-chat-new {
  animation: chatFadeIn .3s ease;
}
@keyframes chatFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
td.nowrap { white-space: nowrap; }

.text-muted { color: var(--admin-text-muted); }

/* Paginatie — knoppen compact gegroepeerd i.p.v. uitgesmeerd.
   Werkt voor twee varianten:
     1. Alleen knoppen (bookings/customers/staff) — direct children van
        .table-pagination, gegroepeerd rechts.
     2. Info + knoppen (messages) — info links via margin-right:auto,
        knoppen rechts gegroepeerd. */
.table-pagination {
  display: flex; align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border-top: 1px solid var(--admin-border);
  justify-content: center;
}
.pagination-info {
  font-size: 13px;
  color: var(--admin-text-muted);
  margin-right: auto;            /* duwt knoppen naar centrum, info naar links */
}
.pagination-btns { display: flex; gap: 4px; }
.pagination-btns .admin-btn-sm.active,
.table-pagination .admin-btn-sm.active {
  background: var(--admin-gold); color: #fff;
}
.pagination-dots { color: var(--admin-text-muted); padding: 0 4px; }

/* Admin button outline variant */
.admin-btn-outline {
  background: transparent;
  border: 1px solid var(--admin-border);
  color: var(--admin-text);
  padding: 8px 16px;
  border-radius: var(--admin-radius-sm);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: border-color var(--admin-transition), color var(--admin-transition);
  display: inline-flex; align-items: center; gap: 6px;
}
.admin-btn-outline:hover {
  border-color: var(--admin-gold);
  color: var(--admin-gold);
}

/* Admin modal header/body/footer (voor berichten detail) */
.admin-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--admin-border);
}
.admin-modal-header h3 {
  margin: 0; font-size: 16px; color: var(--admin-white);
  display: flex; align-items: center; gap: 8px;
}
.admin-modal-close {
  background: transparent; border: 0;
  color: var(--admin-text-muted); font-size: 22px;
  cursor: pointer; padding: 4px 8px; line-height: 1;
}
.admin-modal-close:hover { color: var(--admin-white); }
.admin-modal-body { padding: 20px; }
.admin-modal-footer {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 20px; border-top: 1px solid var(--admin-border);
}

/* ── Customers / sortable table helpers ─────────────────────── */
.fw-500 { font-weight: 500; }
.text-center { text-align: center; }
/* Binnen admin-table wint `.admin-table th { text-align: left }` (spec 0,1,1)
   van de losse `.text-center` (spec 0,1,0). Daarom hier een extra regel met
   hogere specificiteit zodat `<th class="text-center">` óók echt centreert. */
.admin-table th.text-center,
.admin-table td.text-center { text-align: center; }
.actions-cell { white-space: nowrap; }
.actions-cell .admin-btn-sm { margin-right: 4px; }
.actions-cell .admin-btn-sm:last-child { margin-right: 0; }

/* Klantdetail → Afspraakhistorie: toekomstige afspraken visueel
   onderscheiden van voltooid/historisch. Cursief + ~30% minder
   opaque + héle subtiele accent-tint in de achtergrond zodat het
   direct duidelijk is dat dit nog geen feitelijke bezoek is, zonder
   de rij onleesbaar te maken. Hover retourneert naar volle opacity
   zodat je bij doorklikken niet hoeft te turen. */
.admin-table tbody tr.appointment-future td {
  font-style: italic;
  opacity: 0.65;
  background: rgba(var(--admin-gold-rgb), 0.04);
}
.admin-table tbody tr.appointment-future:hover td {
  opacity: 1;
  background: rgba(var(--admin-gold-rgb), 0.08);
}

th.sortable { cursor: pointer; user-select: none; position: relative; padding-right: 22px; }
th.sortable::after {
  content: '\f0dc'; /* fa-sort */
  font-family: 'Font Awesome 6 Free'; font-weight: 900;
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 11px; color: var(--admin-text-muted); opacity: .5;
}
th.sortable.sort-asc::after  { content: '\f0de'; opacity: 1; color: var(--admin-gold); }
th.sortable.sort-desc::after { content: '\f0dd'; opacity: 1; color: var(--admin-gold); }

/* Sortable + text-center: matching padding-left zodat het label
   optisch in het midden van de cel komt, ondanks de absolute sort-pijl
   rechts. Zonder dit leunt het header-label zichtbaar naar links. */
th.sortable.text-center { padding-left: 22px; }

/* Standalone icon-only circle badges (klantenlijst marketing kolom) */
.badge-success:not(.badge) {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(16, 185, 129, .15); color: var(--admin-green, #10b981);
  font-size: 11px;
}
.badge-muted:not(.badge) {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(148, 163, 184, .15); color: var(--admin-text-muted);
  font-size: 11px;
}

.table-pagination .admin-btn-sm.active {
  background: var(--admin-gold); color: #fff;
}
.table-empty {
  text-align: center; padding: 48px 20px; color: var(--admin-text-muted);
}
.table-empty i { font-size: 36px; margin-bottom: 12px; display: block; }
.table-empty p { margin: 0; font-size: 14px; }

/* ── Licentie: limited mode ── */
/* Banner staat BOVENIN als full-width strook (boven sidebar en topbar).
   Als zichtbaar, wordt sidebar/topbar/main naar onder geschoven via :has(). */
:root {
  --license-banner-h: 44px;
}
.license-banner[hidden] {
  display: none !important;
}
.license-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 300; /* boven sidebar (200) en mobiel-topbar (150) */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 20px;
  min-height: var(--license-banner-h);
  box-sizing: border-box;
  background: linear-gradient(135deg, rgba(248,113,113,0.15), rgba(251,191,36,0.10));
  border-bottom: 1px solid rgba(248,113,113,0.25);
  color: var(--admin-orange);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}
.license-banner i {
  font-size: 16px;
  color: var(--admin-red);
  flex-shrink: 0;
}

/* Als banner zichtbaar is → vaste elementen onder de banner positioneren */
body:has(#licenseBanner:not([hidden])) .admin-sidebar {
  top: var(--license-banner-h);
}
body:has(#licenseBanner:not([hidden])) .admin-topbar {
  top: var(--license-banner-h);
}
body:has(#licenseBanner:not([hidden])) .admin-main {
  padding-top: calc(2rem + var(--license-banner-h));
}
@media (max-width: 900px) {
  body:has(#licenseBanner:not([hidden])) .admin-main {
    padding-top: calc(var(--admin-topbar-h) + 1.5rem + var(--license-banner-h));
  }
}

/* Sidebar tabs met licentie-blokkade */
.sidebar-link.license-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
  position: relative;
}
.sidebar-link.license-disabled::after {
  content: '\f023'; /* fa-lock */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 10px;
  margin-left: auto;
  color: var(--admin-text-muted);
}

/* Alias: oude barber-* classes wijzen nu naar staff-* stijlen
   (zodat eventuele resterende legacy-HTML niet breekt) */
.barber-card   { composes: staff-card; }
.barber-grid   { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }

/* ═══════════════════════════════════════════════════════
   KLANT DETAIL PAGINA (M7.7)
   ═══════════════════════════════════════════════════════ */

/* Statistieken grid */
.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
  align-items: stretch;
}

/* Flex-column zorgt dat het label altijd onderaan de kaart uitlijnt,
   ongeacht hoe lang de waarde is (bv. "Kinderknippen (t/m 12 j.)"
   wraps over 2 regels — label blijft op één lijn met de andere kaarten). */
.admin-stats-grid .stat-card {
  background: var(--admin-bg-card);
  border: 1px solid var(--admin-border);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  transition: border-color .2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  min-width: 0;
}
.admin-stats-grid .stat-card:hover { border-color: var(--admin-border-gold); }

.stat-icon {
  font-size: 1.5rem;
  color: var(--admin-gold);
  margin-bottom: 8px;
  flex-shrink: 0;
}
.stat-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--admin-white);
  line-height: 1.2;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}
/* Tekstuele waarden (zoals "Meest afgenomen" service-naam) zijn vaak
   langer dan numerieke; iets kleiner zodat ze netjes binnen de kaart
   passen zonder over het label te kruipen. */
.stat-value.is-text {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}
.stat-label {
  font-size: .82rem;
  color: var(--admin-text-muted);
  margin-top: 8px;
  flex-shrink: 0;
  align-self: stretch;
}

/* Detail grid: 2 kolommen */
.admin-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px) {
  .admin-detail-grid {
    grid-template-columns: 1fr;
  }
}

.admin-detail-left,
.admin-detail-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Card header */
.card-header {
  padding: 16px 20px 8px;
  font-size: .95rem;
}
.card-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-header h3 i { color: var(--admin-gold); }

.card-body { padding: 12px 20px 20px; }

/* Contactinfo grid */
.detail-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 600px) {
  .detail-info-grid { grid-template-columns: 1fr; }
}

.detail-info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.detail-label {
  font-size: .8rem;
  color: var(--admin-text-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.detail-label i { width: 16px; text-align: center; }
.detail-value {
  font-size: .95rem;
  color: var(--admin-text);
}
.detail-value a { color: var(--admin-gold); text-decoration: none; }
.detail-value a:hover { text-decoration: underline; }

/* Klikbare klantnaam in tabel */
.customer-name-link {
  color: var(--admin-gold);
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
}
.customer-name-link:hover {
  text-decoration: underline;
}

/* Notities */
.note-item {
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 12px;
  background: var(--bg);
  transition: border-color .2s;
}
.note-item:hover { border-color: var(--admin-border-gold); }
.note-item.note-merged {
  border-left: 3px solid rgba(59, 130, 246, .5);
  background: rgba(59, 130, 246, .04);
}
.note-merged .note-author { color: #3b82f6; }

.note-item.note-booking {
  border-left: 3px solid rgba(var(--admin-gold-rgb), .5);
  background: rgba(var(--admin-gold-rgb), .04);
}
.note-booking .note-author { color: var(--admin-gold); }

.note-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.note-author {
  font-size: .85rem;
  font-weight: 600;
  color: var(--admin-text);
}
.note-date {
  font-size: .78rem;
  color: var(--admin-text-muted);
}
.note-actions {
  margin-left: auto;
  display: flex;
  gap: 4px;
}
.note-content {
  font-size: .9rem;
  color: var(--admin-text);
  line-height: 1.5;
  white-space: pre-wrap;
}

/* Merge / duplicaten */
.merge-group {
  border: 1px solid var(--admin-border);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
  background: var(--bg);
}
.merge-match {
  font-size: .85rem;
  color: var(--admin-text-muted);
  margin-bottom: 12px;
}
.merge-customer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--admin-border);
}
.merge-customer:first-of-type { border-top: none; }
.merge-info { font-size: .9rem; }

/* ═══════════════════════════════════════════════════════════════
   Mijn Account — twee-koloms layout
   ═══════════════════════════════════════════════════════════════ */
.account-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: start;
}
.account-col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
@media (max-width: 860px) {
  .account-grid { grid-template-columns: 1fr; }
}

/* (Schedule CSS staat in het hoofdblok hierboven) */

/* ── Staff role badge ── */
.staff-role-badge {
  display: inline-block;
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  padding: 2px 7px;
  border-radius: 999px;
  margin-left: .35rem;
  vertical-align: middle;
}
.staff-role-badge.role-admin {
  background: rgba(201,168,76,.18);
  color: var(--admin-gold);
}
.staff-role-badge.role-user {
  background: rgba(96,165,250,.12);
  color: var(--admin-blue);
}

/* ═══════════════════════════════════════════════════════
   COOKIE CONSENT BANNER
   ═══════════════════════════════════════════════════════ */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  background: var(--admin-bg-2);
  border-top: 1px solid var(--admin-border);
  box-shadow: 0 -4px 24px rgba(0,0,0,.35);
  padding: 1.1rem 1.5rem;
  animation: cookieSlideUp .4s ease-out both;
}
@keyframes cookieSlideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.cookie-banner-inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.cookie-banner-text {
  flex: 1;
  min-width: 0;
}
.cookie-banner-text strong {
  display: block;
  font-size: .92rem;
  color: var(--admin-white);
  margin-bottom: .3rem;
}
.cookie-banner-text p {
  margin: 0 0 .4rem;
  font-size: .8rem;
  line-height: 1.55;
  color: var(--admin-text-muted);
}
.cookie-links {
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  font-size: .78rem;
}
.cookie-links a {
  color: var(--admin-gold);
  text-decoration: none;
  transition: color .2s;
}
.cookie-links a:hover {
  color: var(--admin-white);
  text-decoration: underline;
}
.cookie-sep {
  color: var(--admin-text-muted);
  font-size: .65rem;
}
.cookie-banner-actions {
  flex-shrink: 0;
}
.cookie-banner-actions .admin-btn-gold {
  white-space: nowrap;
  padding: .55rem 1.4rem;
  font-size: .82rem;
}
@media (max-width: 640px) {
  .cookie-banner { padding: 1rem; }
  .cookie-banner-inner {
    flex-direction: column;
    align-items: stretch;
    gap: .8rem;
  }
  .cookie-banner-actions {
    display: flex;
  }
  .cookie-banner-actions .admin-btn-gold {
    flex: 1;
    text-align: center;
  }
}

/* ── Cookie / Privacy policy overlay ── */
.cookie-policy-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(3px);
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.cookie-policy-overlay.open {
  display: flex;
}
.cookie-policy-modal {
  background: var(--admin-bg-2);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  width: 100%;
  max-width: 640px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  animation: modalFadeIn .25s ease-out both;
}
.cookie-policy-modal .modal-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--admin-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.cookie-policy-modal .modal-header h3 {
  margin: 0;
  font-size: .95rem;
  color: var(--admin-white);
}
.cookie-policy-modal .modal-header h3 i {
  color: var(--admin-gold);
  margin-right: .4rem;
}
.cookie-policy-body {
  padding: 1.25rem;
  overflow-y: auto;
  font-size: .82rem;
  line-height: 1.7;
  color: var(--admin-text-muted);
}
.cookie-policy-body h4 {
  font-size: .88rem;
  color: var(--admin-white);
  margin: 1.2rem 0 .4rem;
}
.cookie-policy-body h4:first-child {
  margin-top: 0;
}
.cookie-policy-body p {
  margin: 0 0 .65rem;
}
.cookie-policy-body table {
  width: 100%;
  border-collapse: collapse;
  margin: .5rem 0 1rem;
  font-size: .8rem;
}
.cookie-policy-body table th,
.cookie-policy-body table td {
  text-align: left;
  padding: .45rem .6rem;
  border-bottom: 1px solid var(--admin-border);
}
.cookie-policy-body table th {
  color: var(--admin-white);
  font-weight: 600;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.cookie-policy-body table td {
  color: var(--admin-text-muted);
}
.cookie-policy-body ul {
  margin: 0 0 .65rem 1.2rem;
  padding: 0;
}
.cookie-policy-body li {
  margin-bottom: .3rem;
}
.cookie-policy-body .policy-date {
  font-size: .75rem;
  color: var(--admin-text-muted);
  opacity: .7;
  margin-top: 1rem;
}

/* ─── Upload-veld (admin-website: gallery/posts/content images) ────── */
.upload-field {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.upload-field .upload-preview {
  width: 100%;
  max-width: 240px;
  aspect-ratio: 4 / 3;
  border: 1px dashed var(--admin-border, #d0d0d0);
  border-radius: 6px;
  background: #fafafa;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.upload-field .upload-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.upload-field .upload-controls {
  display: flex;
  gap: .5rem;
  align-items: stretch;
  flex-wrap: wrap;
}
.upload-field .upload-controls .upload-url-input {
  flex: 1 1 240px;
  min-width: 0;
}
.upload-field .upload-pick-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  cursor: pointer;
  white-space: nowrap;
  margin: 0;
}
.upload-field .upload-pick-btn i {
  font-size: .95rem;
}
.upload-field .upload-status {
  min-height: 1em;
  font-size: .8rem;
  color: var(--admin-text-muted, #666);
}

/* ═══════════════════════════════════════════════════════════════════
   M17.3 — Language switcher voor Cockpit Teksten + Galerij
   ═══════════════════════════════════════════════════════════════════ */
.lang-switcher-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  padding: .75rem 1rem;
  margin-bottom: 1rem;
  background: var(--admin-bg-2);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm, 4px);
}
.lang-switcher-label {
  font-size: .8125rem;
  font-weight: 500;
  color: var(--admin-text-muted);
  letter-spacing: .03em;
  margin-right: .25rem;
}
.lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: .35rem .7rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--admin-text-muted);
  background: var(--admin-bg-card, transparent);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm, 4px);
  cursor: pointer;
  transition: all .15s ease;
}
.lang-btn:hover {
  color: var(--admin-text);
  border-color: var(--admin-gold, #C9A961);
}
.lang-btn.is-active {
  color: var(--admin-bg, #fff);
  background: var(--admin-gold, #C9A961);
  border-color: var(--admin-gold, #C9A961);
}

/* ───────────────────────────────────────────────────────────────────
 * Settings-section — vervangt het admin-card-grid in Cockpit/Algemeen.
 * Erft van .admin-card (background-variabele + border + glass-effect)
 * zodat per-theme styling automatisch meekomt. Eigen padding/radius
 * voor het tabblok-gevoel.
 * ─────────────────────────────────────────────────────────────────── */
.settings-section {
  background: var(--admin-bg-card);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  /* Per-theme glass/blur overrides die op .admin-card draaien, treffen
   * settings-section niet automatisch — daarom delegated via [class] op
   * theme-stylesheets. Voor nu: visueel kapot in 'kleurrijk' opgelost
   * door dezelfde tokens als .admin-card te gebruiken. */
}
.settings-section-head { margin: 0 0 1rem; }
.settings-section-head h3 {
  margin: 0 0 .25rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--admin-text);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.settings-section-head .settings-section-desc {
  margin: 0;
  color: var(--admin-ink-soft);
  font-size: .85rem;
  line-height: 1.45;
}

.settings-rows { display: flex; flex-direction: column; }
.settings-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: center;
  gap: 1rem;
  padding: .75rem 0;
  border-top: 1px solid color-mix(in srgb, var(--admin-border) 60%, transparent);
}
.settings-row:first-child { border-top: none; padding-top: .25rem; }
.settings-row > label {
  font-weight: 500;
  color: var(--admin-ink-soft);
  font-size: .85rem;
  margin: 0;
}
/* Toggles rechts laten uitlijnen op natuurlijke breedte — anders
 * stretchen ze naar de hele 1fr-kolom en lijken ze gigantisch. De
 * !important op .toggle-slider negeert de `flex: 1 1 auto` op
 * `.admin-toggle > span:last-child` (regel 1808) die ontworpen was
 * voor de tekst-span; binnen settings-section staat alleen de slider
 * nog in de toggle. */
.settings-row > .admin-toggle {
  justify-self: end;
  width: auto;
}
.settings-row > .admin-toggle > .toggle-slider {
  flex: 0 0 auto !important;
}
.settings-row-control {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-width: 0;
}
.settings-row-control.is-inline {
  flex-direction: row;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.settings-row-hint {
  font-size: .75rem;
  color: var(--admin-ink-soft);
  margin: 0;
  line-height: 1.4;
}
.settings-row-actions {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--admin-border);
}

@media (max-width: 720px) {
  .settings-row {
    grid-template-columns: 1fr;
    gap: .35rem;
    padding: .85rem 0;
  }
  .settings-section { padding: 1rem 1.1rem; }
}

/* Tabblok-stack — overrule .settings-grid binnen #stab-general zodat de
 * settings-sections gestapeld renderen i.p.v. in 3 kolommen. Andere
 * panels (Teksten, Gallerij, etc.) blijven de grid-layout houden. */
#stab-general .settings-grid {
  display: block;
  max-width: 760px;
  margin: 0 auto;
}