/* =========================
   ADMIN LAYOUT
========================= */
.admin-page {
  background: #f6f8fc;
  min-height: 100vh;
}

.admin-shell {
  display: flex;
  min-height: 100vh;
}

/* =========================
   SIDEBAR (tweelaags: rail + submenu)
========================= */
.admin-sidebar {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 100vh;
  width: 312px;
  background: #0f1f3d;
  color: #fff;
}

.admin-sidebar-inner {
  display: flex;
  flex: 1 1 0%;
  min-height: 0;
  width: 100%;
  align-items: stretch;
}

.admin-sidebar--sub-hidden {
  width: 84px;
}

.admin-sidebar--sub-hidden .admin-sidebar-inner {
  flex-direction: column;
  flex: 1 1 0%;
  min-height: 0;
  height: 100%;
}

/* Alleen rail zichtbaar: rail moet volledige hoogte vullen zodat ?-footer onderaan blijft */
.admin-sidebar--sub-hidden .admin-sidebar-rail {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  align-self: stretch;
}

/* — Smalle primaire rail (donker) — */
.admin-sidebar-rail {
  width: 84px;
  flex-shrink: 0;
  align-self: stretch;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 12px 0 12px;
  background: #0c1936;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-rail-brand {
  flex-shrink: 0;
  display: block;
  margin: 0 8px 16px;
  padding: 6px 4px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  border-radius: 10px;
  transition: background 0.2s ease;
}

.admin-rail-brand__img {
  display: block;
  width: 34px;
  max-width: 100%;
  height: auto;
  max-height: 40px;
  margin: 0 auto;
  object-fit: contain;
  /* Zwarte achtergrond in het bronbestand: op donkerblauwe rail oplossen naar railkleur */
  mix-blend-mode: lighten;
}

.admin-rail-brand:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.admin-rail-nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 0 8px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.admin-rail-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 4px;
  border-radius: 12px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 600;
  font-size: 0.62rem;
  line-height: 1.15;
  text-align: center;
  transition: background 0.2s ease, color 0.2s ease;
}

.admin-rail-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.admin-rail-link.is-active {
  background: #1a5082;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.admin-rail-icon {
  font-size: 1.15rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

.admin-rail-icon svg {
  display: block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.admin-rail-icon-stack {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.admin-rail-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #dc2626;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px #0c1936;
  pointer-events: none;
}

.admin-rail-label {
  max-width: 100%;
  word-break: break-word;
}

.admin-table-scroll {
  overflow-x: auto;
  margin: 0 -4px;
  padding: 0 4px;
}

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

.admin-website-leads-table--compact {
  width: 100%;
  max-width: 100%;
}

.admin-website-leads-table--compact th,
.admin-website-leads-table--compact td {
  padding: 10px 12px;
  vertical-align: middle;
}

.admin-website-leads-table--compact .admin-website-leads-table__customer {
  min-width: 200px;
  max-width: 320px;
}

.admin-website-leads-customer-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.86rem;
  line-height: 1.35;
}

.admin-website-leads-customer-stack__name {
  color: #0f172a;
}

.admin-website-leads-customer-stack__row {
  word-break: break-word;
}

.admin-website-leads-customer-stack__row a {
  color: #205ab0;
  text-decoration: none;
  font-weight: 500;
}

.admin-website-leads-customer-stack__row a:hover {
  text-decoration: underline;
}

.admin-website-leads-customer-stack__sys {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #e8edf4;
}

.admin-website-leads-customer-stack__sep {
  color: #94a3b8;
  font-weight: 600;
}

.admin-website-leads-table--compact .admin-website-leads-table__handled {
  min-width: 200px;
}

.admin-website-leads-table__reply-head,
.admin-website-leads-table__reply {
  width: 1%;
  white-space: nowrap;
  text-align: right;
  vertical-align: middle;
}

.admin-website-leads-table__reply .admin-btn-sm {
  white-space: nowrap;
}

.admin-website-leads-table th,
.admin-website-leads-table td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #e2e8f0;
}

.admin-website-leads-table th {
  font-weight: 700;
  color: #0f172a;
  background: #f8fafc;
  white-space: nowrap;
}

.admin-website-leads-table__date {
  white-space: nowrap;
  color: #64748b;
  font-size: 0.85rem;
}

.admin-website-leads-table__msg {
  min-width: 220px;
  max-width: 480px;
}

.admin-website-leads-table__msg-inner {
  display: block;
  max-height: 8.5em;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.admin-website-leads-tr--handled td {
  background: #f8fafc;
}

.admin-website-leads-tr--clickable {
  cursor: pointer;
}

.admin-website-leads-tr--clickable:hover td {
  background: #eef2ff;
}

.admin-website-leads-tr--clickable.admin-website-leads-tr--handled:hover td {
  background: #e8ecf9;
}

.admin-modal--website-lead-detail {
  width: min(560px, 100%);
  max-height: min(90vh, 880px);
  display: flex;
  flex-direction: column;
}

.admin-modal--website-lead-detail .admin-modal-body {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.admin-website-lead-detail__meta {
  margin: 0;
  font-size: 0.88rem;
  color: #64748b;
}

.admin-website-lead-detail-dl {
  margin: 0;
  padding: 0;
}

.admin-website-lead-detail-dl > div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 6px 14px;
  padding: 10px 0;
  border-bottom: 1px solid #e2e8f0;
  font-size: 0.92rem;
}

.admin-website-lead-detail-dl > div:last-child {
  border-bottom: none;
}

.admin-website-lead-detail-dl dt {
  margin: 0;
  font-weight: 600;
  color: #64748b;
}

.admin-website-lead-detail-dl dd {
  margin: 0;
  color: #0f172a;
  word-break: break-word;
}

.admin-website-lead-detail-dl--block {
  grid-template-columns: 1fr !important;
}

.admin-website-lead-detail-dl--block dt {
  margin-bottom: 6px;
}

.admin-website-lead-detail-msg {
  margin: 0;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 0.9rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 280px;
  overflow: auto;
  font-family: inherit;
}

.admin-website-lead-detail-links {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #edf2f7;
}

.admin-website-lead-detail-links__title {
  margin: 0 0 10px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #0f172a;
}

.admin-website-lead-detail-links__list {
  margin: 0;
  padding-left: 1.15em;
  font-size: 0.9rem;
}

.admin-website-lead-detail-links__list li {
  margin: 6px 0;
}

.admin-website-lead-detail-links__hint {
  font-size: 0.75rem;
  color: #64748b;
  margin-left: 4px;
}

.admin-website-lead-detail-links__badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #e0e7ff;
  color: #1e3a5f;
}

.admin-website-lead-detail-links__sub {
  display: block;
  margin-top: 2px;
  font-size: 0.8rem;
  color: #475569;
}

.admin-website-leads-table__projects {
  min-width: 140px;
  max-width: 260px;
}

.admin-website-leads-project-list {
  margin: 0;
  padding-left: 1.1em;
  font-size: 0.88rem;
}

.admin-website-leads-project-list li {
  margin: 4px 0;
}

.admin-website-leads-project-list__hint {
  display: inline-block;
  margin-left: 4px;
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 500;
}

.admin-website-leads-project-list__title {
  display: block;
  margin-top: 2px;
  font-size: 0.78rem;
  color: #475569;
  line-height: 1.3;
}

.admin-website-leads-customer-link {
  font-weight: 600;
  color: #1e40af;
}

.admin-website-leads-customer-badge {
  display: inline-block;
  margin-top: 0;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #1e3a5f;
  background: #e0e7ff;
  vertical-align: middle;
}

.admin-website-leads-table__handled {
  white-space: nowrap;
}

.admin-website-leads-badge {
  display: inline-block;
  margin-right: 6px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: #dcfce7;
  color: #166534;
}

.admin-website-leads-handled-at {
  display: block;
  margin: 4px 0 6px;
  font-size: 0.78rem;
  color: #64748b;
}

.admin-website-leads-handled-form {
  margin: 0;
}

.admin-rail-footer {
  flex-shrink: 0;
  margin-top: auto;
  padding: 12px 8px 4px;
}

.admin-rail-foot-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-weight: 800;
  font-size: 1rem;
  transition: background 0.2s ease;
}

.admin-rail-foot-link:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

/* — Secundair paneel (licht) — */
.admin-sidebar-sub {
  flex: 1;
  min-width: 0;
  min-height: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  background: #eef2f8;
  color: #1e293b;
  border-right: 1px solid #dbe3ef;
  padding: 14px 0 10px;
}

.admin-sub-title {
  margin: 0 12px 8px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #64748b;
}

.admin-subnav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0 8px;
  flex: 1;
  overflow-y: auto;
}

.admin-subnav-group {
  margin: 10px 6px 4px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #94a3b8;
}

.admin-subnav-group:first-child {
  margin-top: 0;
}

.admin-subnav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #334155;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.admin-subnav-link__icon {
  flex-shrink: 0;
  width: 1.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: #64748b;
  opacity: 0.92;
}

.admin-subnav-link__icon .fa-solid {
  line-height: 1;
}

.admin-subnav-link__label {
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}

.admin-subnav-link:hover {
  background: rgba(255, 255, 255, 0.75);
  color: #0f172a;
}

.admin-subnav-link:hover .admin-subnav-link__icon {
  color: #475569;
}

.admin-subnav-link.is-active {
  background: #fff;
  color: #0f1f3d;
  border-left-color: #1a5082;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

.admin-subnav-link.is-active .admin-subnav-link__icon {
  color: #1a5082;
  opacity: 1;
}

.admin-sub-footer {
  margin-top: auto;
  padding: 10px 12px 4px;
  border-top: 1px solid #dbe3ef;
}

.admin-sub-footer-text {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: #94a3b8;
}

/* Inklappen: alleen rail (tweede kolom verborgen) */
.admin-shell.sidebar-collapsed .admin-sidebar-sub {
  display: none;
}

.admin-shell.sidebar-collapsed .admin-sidebar {
  width: 84px;
}

.admin-shell.sidebar-collapsed .admin-sidebar--sub-hidden {
  width: 84px;
}

/* Bredere blauwe rail + sidebar op groot scherm (tekst leesbaarder) */
@media (min-width: 1200px) {
  .admin-sidebar-rail {
    width: 108px;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .admin-sidebar {
    width: 340px;
  }

  .admin-sidebar--sub-hidden {
    width: 108px;
  }

  .admin-shell.sidebar-collapsed .admin-sidebar,
  .admin-shell.sidebar-collapsed .admin-sidebar--sub-hidden {
    width: 108px;
  }

  .admin-rail-nav {
    padding: 0 10px;
    gap: 5px;
  }

  .admin-rail-link {
    font-size: 0.7rem;
    padding: 11px 6px;
    gap: 5px;
  }

  .admin-rail-icon {
    font-size: 1.22rem;
  }

  .admin-rail-brand {
    margin: 0 10px 18px;
    padding: 8px 6px;
  }

  .admin-rail-brand__img {
    width: 36px;
    max-height: 42px;
  }

  .admin-rail-footer {
    padding: 12px 10px 4px;
  }
}

@media (min-width: 1440px) {
  .admin-sidebar-rail {
    width: 124px;
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .admin-sidebar {
    width: 360px;
  }

  .admin-sidebar--sub-hidden {
    width: 124px;
  }

  .admin-shell.sidebar-collapsed .admin-sidebar,
  .admin-shell.sidebar-collapsed .admin-sidebar--sub-hidden {
    width: 124px;
  }

  .admin-rail-nav {
    padding: 0 11px;
  }

  .admin-rail-link {
    font-size: 0.76rem;
    padding: 12px 7px;
    gap: 6px;
  }

  .admin-rail-icon {
    font-size: 1.28rem;
  }

  .admin-rail-brand {
    margin: 0 11px 20px;
    padding: 9px 7px;
  }

  .admin-rail-brand__img {
    width: 38px;
    max-height: 44px;
  }
}

/* Legacy class names (oude pagina’s / componenten) */
.admin-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-size: 1.7rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.05em;
}

.admin-logo span {
  color: var(--accent);
}

.admin-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  color: rgba(255,255,255,.84);
  text-decoration: none;
  font-weight: 600;
  transition: .2s ease;
}

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

.admin-nav-link.active {
  background: rgba(255,255,255,.12);
  color: #fff;
}

.admin-nav-icon {
  width: 22px;
  display: inline-flex;
  justify-content: center;
  font-size: 1rem;
}

/* =========================
   MAIN
========================= */
.admin-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* =========================
   TOPBAR
========================= */
.admin-topbar {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #e9eef5;
  padding: 0;
  position: sticky;
  top: 0;
  /* Boven o.a. .admin-maintenance-drawer (z-index 60): anders valt de profieldropdown visueel achter de drawer */
  z-index: 90;
}

.admin-topbar-row--main {
  padding: 18px 28px 14px;
}

.admin-topbar-row--tabs {
  width: 100%;
  padding: 0 28px;
  background: #fff;
  border-top: 1px solid #eef2f7;
}

.admin-topbar-tabstrip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 12px;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  padding: 0;
}

.admin-topbar-tabstrip-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 18px;
  flex: 1;
  min-width: 0;
  padding: 12px 0;
}

.admin-topbar-tab {
  display: inline-flex;
  align-items: center;
  padding: 4px 2px 5px;
  margin-bottom: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: #9ca3af;
  border-bottom: 3px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease, font-weight 0.15s ease;
}

.admin-topbar-tab:hover,
.admin-topbar-tab:focus-visible {
  color: #475569;
  outline: none;
  border-bottom-color: #205ab0;
}

.admin-topbar-tab.is-active {
  color: #111827;
  font-weight: 700;
}

/* Actieve tab: teal onderstreep; bij hover/focus blauw (zelfde als andere tabs) */
.admin-topbar-tab.is-active:not(:hover):not(:focus-visible) {
  border-bottom-color: #0d9488;
}

/* Geen border: none — dat vernietigde border-bottom (hover/active-onderstreep). */
button.admin-topbar-tab,
a.admin-topbar-tab {
  font-family: inherit;
  background: none;
  cursor: pointer;
  box-shadow: none;
  border: 0;
  border-bottom: 3px solid transparent;
}

.admin-topbar-flyout-modal.admin-modal {
  width: min(960px, 100%);
}

/* Taken-flyout: scrollbare inhoud, footer onderaan (niet op prompt-variant zoals Meldingen) */
.admin-topbar-flyout-modal.admin-modal:not(.admin-modal--prompt) {
  display: flex;
  flex-direction: column;
  max-height: min(92vh, 880px);
}

.admin-topbar-flyout-modal.admin-modal:not(.admin-modal--prompt) .admin-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* Twee klassen: overschrijft .admin-modal-footer { justify-content: flex-end } verderop in dit bestand */
.admin-modal-footer.admin-topbar-tasks-modal-footer-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
  padding-top: 12px;
  padding-bottom: 14px;
  margin-top: auto;
}

.admin-modal-footer.admin-topbar-tasks-modal-footer-bar .admin-tasks-modal-footer-link {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.admin-modal-footer.admin-topbar-tasks-modal-footer-bar .admin-topbar-tasks-modal-add {
  flex: 0 0 auto;
}

.admin-topbar-tasks-modal-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  min-height: 40px;
  padding: 10px 16px;
  box-sizing: border-box;
}

.admin-topbar-tasks-modal-add .admin-topbar-tasks-modal-add__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
  line-height: 1;
  opacity: 0.95;
}

.admin-topbar-tasks-modal-add .admin-topbar-tasks-modal-add__icon i {
  line-height: 1;
  vertical-align: middle;
}

.admin-topbar-tasks-modal-add .admin-topbar-tasks-modal-add__label {
  position: relative;
  top: 0;
  line-height: 1.15;
}

/* Compacte modal-knopregel: override generieke modal-knop-padding zodat tekst + icoon visueel gecentreerd blijven */
.admin-topbar-flyout-modal .admin-topbar-tasks-modal-add.admin-btn {
  padding: 10px 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.admin-tasks-modal-footer-link {
  margin: 16px 0 0;
  font-size: 0.92rem;
}

.admin-tasks-modal-footer-link a {
  font-weight: 600;
  color: #1f4a8a;
}

.admin-tasks-modal-loading {
  margin: 0;
  color: #64748b;
  font-size: 0.95rem;
}

/* Snelle acties in tabrij: compacte pill-knoppen (niet volle hoogte) */
.admin-topbar-tab-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
  padding: 6px 0;
}

.admin-topbar-row--tabs .admin-topbar-tab-cta.admin-btn.admin-btn-primary {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-height: 0;
  height: auto;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  text-decoration: none;
  box-shadow: none;
}

.admin-topbar-row--tabs .admin-topbar-tab-cta.admin-btn.admin-btn-primary:hover,
.admin-topbar-row--tabs .admin-topbar-tab-cta.admin-btn.admin-btn-primary:focus-visible {
  transform: none;
  opacity: 0.94;
  outline: none;
}

.admin-topbar-row--tabs .admin-topbar-tab-cta.admin-btn.admin-btn-primary.is-active {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.admin-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.admin-topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.admin-topbar-profile-wrap {
  position: relative;
  flex-shrink: 0;
}

.admin-topbar-profile {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  background: #ffffff;
  border: 1px solid #dbe3ef;
  border-radius: 16px;
  padding: 10px 14px;
  transition: all 0.2s ease;
  cursor: pointer;
  font: inherit;
  color: inherit;
  width: 100%;
  text-align: left;
}

.admin-topbar-profile:hover,
.admin-topbar-profile:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(23, 35, 60, 0.08);
  border-color: #cbd7e8;
  outline: none;
}

.admin-topbar-profile.is-open {
  border-color: #1f4a8a;
  box-shadow: 0 10px 24px rgba(31, 74, 138, 0.12);
}

.admin-profile-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  padding: 8px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
  z-index: 200;
}

.admin-profile-dropdown-link {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.92rem;
  font-weight: 600;
  color: #17233c;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.admin-profile-dropdown-link:hover,
.admin-profile-dropdown-link:focus-visible {
  background: #f1f5f9;
  color: #1f4a8a;
  outline: none;
}

.admin-profile-dropdown-link--logout {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid #eef2f7;
  color: #b91c1c;
}

.admin-profile-dropdown-link--logout:hover,
.admin-profile-dropdown-link--logout:focus-visible {
  background: #fef2f2;
  color: #991b1b;
}

.admin-topbar-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #dfe9ff;
  color: #17233c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.admin-topbar-avatar--photo {
  display: block;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.12);
}

.admin-topbar-user {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.admin-topbar-user strong {
  color: #17233c;
  font-size: 0.95rem;
  font-weight: 700;
}

.admin-topbar-user span {
  color: #7b879c;
  font-size: 0.83rem;
}

.admin-topbar-profile-arrow {
  color: #94a3b8;
  font-size: 1.2rem;
  line-height: 1;
  margin-left: 4px;
}

.admin-mobile-toggle {
  display: none;
  border: none;
  background: #edf3fb;
  color: #102348;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  font-size: 1.1rem;
  cursor: pointer;
}

.admin-sidebar-collapse-toggle {
  flex-shrink: 0;
  border: none;
  background: #edf3fb;
  color: #102348;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.admin-sidebar-collapse-toggle:hover {
  background: #e2ebf7;
}

.admin-shell.sidebar-collapsed .admin-sidebar-collapse-toggle {
  transform: rotate(180deg);
}

.admin-page-title h1 {
  font-size: 1.5rem;
  line-height: 1.2;
  color: #102348;
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.admin-page-title p {
  margin: 4px 0 0;
  color: #6a778d;
  font-size: .95rem;
}

.admin-topbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.admin-topbar-right .locale-switcher--admin {
  flex-shrink: 0;
  font-size: 0.8rem;
}

.admin-topbar-right .locale-switcher--admin .locale-switcher__summary {
  padding: 5px 9px;
  border-color: #dbe3ef;
  background: #f8fafc;
  color: #64748b;
}

.admin-topbar-right .locale-switcher--admin .locale-switcher__details:hover .locale-switcher__summary,
.admin-topbar-right .locale-switcher--admin .locale-switcher__details[open] .locale-switcher__summary {
  color: #4f7cff;
  border-color: rgba(79, 124, 255, 0.45);
}

.admin-topbar-right .locale-switcher--admin .locale-switcher__opt--current {
  color: #4f7cff;
}

.admin-topbar-search {
  position: relative;
  width: 220px;
  transition: width 0.25s ease;
}

.admin-topbar-search input {
  width: 100%;
  border: 1px solid #dbe3ef;
  background: #f8fafc;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 0.9rem;
  transition: all 0.25s ease;
}

/* ✨ EXPAND EFFECT */
.admin-topbar-search:focus-within {
  width: 380px;
}

.admin-topbar-search input {
  width: 100%;
  border: 1px solid #dbe3ef;
  background: #f8fafc;
  border-radius: 999px;
  padding: 10px 16px 10px 38px; /* ruimte voor icoon */
  font-size: 0.9rem;
  transition: all 0.25s ease;
}

/* Focus effect */
.admin-topbar-search input:focus {
  outline: none;
  background: #ffffff;
  border-color: #4f7cff;
  box-shadow: 0 0 0 4px rgba(79, 124, 255, 0.12);
}

/* Icoon */
.admin-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9rem;
  color: #94a3b8;
  pointer-events: none;
}

/* Globaal zoeken (admin-topbar): dropdown met treffers */
.admin-topbar-search--global {
  z-index: 1;
}

.admin-global-search-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 100;
  max-height: min(70vh, 520px);
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  border: 1px solid #dbe3ef;
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.14);
  padding: 8px 0;
  box-sizing: border-box;
}

.admin-global-search-dropdown__section + .admin-global-search-dropdown__section {
  border-top: 1px solid #eef2f7;
  margin-top: 6px;
  padding-top: 6px;
}

.admin-global-search-dropdown__heading {
  padding: 8px 14px 6px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.admin-global-search-dropdown__item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 10px 14px;
  text-decoration: none;
  color: #0f172a;
  border-radius: 0;
  transition: background 0.12s ease;
}

.admin-global-search-dropdown__item:hover,
.admin-global-search-dropdown__item:focus-visible {
  background: #f1f5ff;
  outline: none;
}

.admin-global-search-dropdown__item-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.admin-global-search-dropdown__title {
  font-weight: 600;
  font-size: 0.91rem;
  line-height: 1.35;
  word-break: break-word;
}

.admin-global-search-dropdown__type {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-global-search-dropdown__sub {
  font-size: 0.82rem;
  color: #64748b;
  line-height: 1.35;
  word-break: break-word;
}

.admin-global-search-dropdown__status {
  padding: 16px 14px;
  font-size: 0.88rem;
  color: #64748b;
  text-align: center;
}

.admin-global-search-dropdown__status--error {
  color: #b91c1c;
}

/* Iets breder bij focus zodat lange treffers leesbaar blijven */
.admin-topbar-search--global:focus-within {
  width: min(440px, calc(100vw - 120px));
}

.admin-profile-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid #e6edf6;
  border-radius: 16px;
  padding: 8px 12px;
}

.admin-profile-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #dce8fb;
  color: #102348;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

.admin-profile-text strong {
  display: block;
  font-size: .94rem;
  color: #102348;
}

.admin-profile-text span {
  display: block;
  font-size: .82rem;
  color: #7a8598;
}



/* =========================================
   ADMIN USERS PAGE
========================================= */

.admin-page-header-users {
  margin-bottom: 24px;
}

.admin-page-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-users-toolbar-card,
.admin-users-table-card {
  padding: 24px;
}

.admin-users-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.admin-users-search {
  position: relative;
  width: 100%;
  max-width: 420px;
}

.admin-users-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 0.92rem;
  pointer-events: none;
}

.admin-users-search input {
  width: 100%;
  border: 1px solid #dbe3ef;
  background: #f8fafc;
  border-radius: 999px;
  padding: 12px 16px 12px 40px;
  font-size: 0.94rem;
  color: #17233c;
  transition: all 0.2s ease;
}

.admin-users-search input:focus {
  outline: none;
  background: #ffffff;
  border-color: #4f7cff;
  box-shadow: 0 0 0 4px rgba(79, 124, 255, 0.12);
}

.admin-users-filters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.admin-users-filters select {
  min-width: 170px;
  border: 1px solid #dbe3ef;
  background: #ffffff;
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 0.93rem;
  color: #17233c;
  transition: all 0.2s ease;
}

.admin-users-filters select:focus {
  outline: none;
  border-color: #4f7cff;
  box-shadow: 0 0 0 4px rgba(79, 124, 255, 0.12);
}

.admin-users-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.admin-users-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 860px;
}

.admin-users-table thead th {
  text-align: left;
  font-size: 0.83rem;
  font-weight: 700;
  color: #7b879c;
  padding: 0 0 16px;
  border-bottom: 1px solid #e9eef5;
}

.admin-users-table tbody td {
  padding: 18px 0;
  border-bottom: 1px solid #eef3f8;
  vertical-align: middle;
  color: #17233c;
  font-size: 0.94rem;
}

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

.admin-user-cell {
  display: flex;
  align-items: center;
  gap: 14px;
}

.admin-user-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #dfe9ff;
  color: #17233c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.admin-user-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-user-meta strong {
  font-size: 0.95rem;
  color: #17233c;
  line-height: 1.2;
}

.admin-user-meta span {
  font-size: 0.86rem;
  color: #7b879c;
  line-height: 1.2;
}

.admin-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}

.admin-badge.is-success {
  background: #e8f8ef;
  color: #14804a;
}

.admin-badge.is-warning {
  background: #fff4dd;
  color: #a06a00;
}

.admin-badge.is-neutral {
  background: #eef2f7;
  color: #5f6b7a;
}

.admin-badge.is-danger {
  background: #fdeaea;
  color: #b91c1c;
}

.admin-projects-action-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Projectpagina — portaalbezoeken & scans */
.pv-portal-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #e8f8ef;
  color: #14804a;
  font-size: 0.78rem;
  font-weight: 700;
}

.pv-portal-empty {
  text-align: center;
  padding: 36px 20px;
  color: #5a6679;
}

.pv-portal-empty__icon {
  font-size: 2.2rem;
  color: #b6c2d4;
  margin-bottom: 10px;
}

.pv-portal-empty h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
  color: #2a3650;
}

.pv-portal-empty p {
  margin: 0 auto;
  max-width: 420px;
  font-size: 0.92rem;
}

.pv-portal-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-top: 8px;
}

.pv-portal-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border-radius: 16px;
  background: #f6f8fc;
  border: 1px solid #e7ecf4;
  overflow: hidden;
}

.pv-portal-stat__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 0.95rem;
  color: #fff;
  margin-bottom: 4px;
}

.pv-portal-stat__value {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #1c2740;
  line-height: 1.1;
}

.pv-portal-stat__value--sm {
  font-size: 1.02rem;
  font-weight: 700;
}

.pv-portal-stat__label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #62708a;
}

.pv-portal-stat--blue .pv-portal-stat__icon { background: #2f6df6; }
.pv-portal-stat--green .pv-portal-stat__icon { background: #14a05a; }
.pv-portal-stat--purple .pv-portal-stat__icon { background: #7c4dff; }
.pv-portal-stat--amber .pv-portal-stat__icon { background: #e08600; }

.pv-portal-chart {
  margin-top: 22px;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid #e7ecf4;
  background: #fff;
}

.pv-portal-chart__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.pv-portal-chart__head h3 {
  margin: 0;
  font-size: 1rem;
  color: #2a3650;
}

.pv-portal-chart__bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 120px;
}

.pv-portal-bar {
  flex: 1 1 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
  min-width: 4px;
}

.pv-portal-bar__fill {
  width: 100%;
  max-width: 18px;
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, #4f8bff, #2f6df6);
  transition: height 0.3s ease;
  min-height: 3px;
}

.pv-portal-bar__fill.is-empty {
  background: #e7ecf4;
}

.pv-portal-table-wrap {
  margin-top: 22px;
}

.pv-portal-table-title {
  margin: 0 0 10px;
  font-size: 1rem;
  color: #2a3650;
}

/* Aanvragen via klantenportaal */
.pv-req-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
}

.pv-req-card {
  border: 1px solid #e3e9f2;
  border-radius: 14px;
  padding: 16px 18px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 36, 66, 0.04);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.pv-req-card:hover {
  border-color: #cfdaeb;
  box-shadow: 0 4px 14px rgba(20, 36, 66, 0.08);
}

.pv-req-card.is-handled {
  background: #f7faf8;
  border-color: #d6e7da;
}

.pv-req-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.pv-req-card__who {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pv-req-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f7cff, #6f5cff);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  flex: 0 0 auto;
}

.pv-req-card__name {
  display: block;
  color: #1f2b44;
  font-size: 0.98rem;
}

.pv-req-card__date {
  display: block;
  color: #7a869c;
  font-size: 0.82rem;
  margin-top: 1px;
}

.pv-req-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.pv-req-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  background: #eef2f8;
  color: #46546e;
}

.pv-req-badge--blue { background: #e7f0ff; color: #2c5bd6; }
.pv-req-badge--amber { background: #fff2dd; color: #a96a08; }
.pv-req-badge--purple { background: #f0e9ff; color: #6a3fd1; }
.pv-req-badge--grey { background: #eef2f8; color: #46546e; }
.pv-req-badge--done { background: #e3f4e8; color: #1f8a4c; }

.pv-req-card__body {
  margin: 12px 0 0;
  color: #38445c;
  font-size: 0.93rem;
  line-height: 1.5;
  white-space: normal;
}

.pv-req-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #eef2f8;
}

.pv-req-card__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pv-req-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* ── Recent bezochte projecten (inklapbaar paneel rechts) ───────────── */
.vrp {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 1200;
  width: 0;
}

.vrp-tab {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  border: 0;
  border-radius: 12px 0 0 12px;
  background: linear-gradient(135deg, #4f7cff, #6f5cff);
  color: #fff;
  cursor: pointer;
  box-shadow: -3px 0 12px rgba(20, 36, 66, 0.18);
  writing-mode: vertical-rl;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: padding-right 0.15s ease, filter 0.15s ease;
}

.vrp-tab:hover {
  filter: brightness(1.05);
  padding-right: 12px;
}

.vrp-tab i {
  writing-mode: horizontal-tb;
  font-size: 0.95rem;
}

.vrp-tab__count {
  writing-mode: horizontal-tb;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 0.72rem;
  line-height: 18px;
  text-align: center;
}

.vrp-panel {
  position: absolute;
  right: 0;
  top: 50%;
  width: 320px;
  max-width: 86vw;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e3e9f2;
  border-right: 0;
  border-radius: 14px 0 0 14px;
  box-shadow: -10px 0 30px rgba(20, 36, 66, 0.16);
  transform: translate(105%, -50%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.22s ease, opacity 0.22s ease;
}

.vrp.is-open .vrp-panel {
  transform: translate(0, -50%);
  opacity: 1;
  pointer-events: auto;
}

.vrp.is-open .vrp-tab {
  opacity: 0;
  pointer-events: none;
}

.vrp-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid #eef2f8;
}

.vrp-panel__title {
  margin: 0;
  font-size: 0.98rem;
  color: #1f2b44;
  display: flex;
  align-items: center;
  gap: 8px;
}

.vrp-panel__title i {
  color: #6f5cff;
}

.vrp-panel__close {
  border: 0;
  background: #f3f6fb;
  color: #46546e;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.vrp-panel__close:hover {
  background: #e9eff8;
  color: #1f2b44;
}

.vrp-list {
  list-style: none;
  margin: 0;
  padding: 8px;
  overflow-y: auto;
}

.vrp-item {
  position: relative;
  display: flex;
  align-items: stretch;
}

.vrp-link {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 34px 10px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: #2a3650;
  transition: background 0.12s ease;
  min-width: 0;
}

.vrp-link:hover {
  background: #f3f6fb;
}

.vrp-item.is-active .vrp-link {
  background: #eef2ff;
}

.vrp-link__icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #eef2ff;
  color: #5566e0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.vrp-link__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.vrp-link__title {
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vrp-link__sub {
  font-size: 0.78rem;
  color: #6a7588;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vrp-link__time {
  font-size: 0.72rem;
  color: #9aa6b8;
  margin-top: 1px;
}

.vrp-item__remove {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: #b6c0d0;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease, color 0.12s ease, background 0.12s ease;
}

.vrp-item:hover .vrp-item__remove {
  opacity: 1;
}

.vrp-item__remove:hover {
  background: #fdecec;
  color: #c0392b;
}

.vrp-empty {
  margin: 0;
  padding: 20px 16px;
  color: #7a869c;
  font-size: 0.88rem;
  text-align: center;
}

@media (max-width: 768px) {
  .vrp-panel {
    width: 280px;
  }
  .vrp-tab__label {
    display: none;
  }
}

.pv-req-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  background: #f3f6fb;
  color: #3a4a66;
  font-size: 0.84rem;
  text-decoration: none;
  border: 1px solid #e6ecf5;
}

a.pv-req-chip:hover {
  background: #e9eff8;
  color: #1f2b44;
}

.pv-req-chip--muted {
  color: #7a869c;
  background: #f7f9fc;
}

.pv-req-email-feedback {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.9rem;
  background: #eef2f8;
  color: #46546e;
}

.pv-req-email-feedback--success {
  background: #e3f4e8;
  color: #1f8a4c;
}

.pv-req-email-feedback--error {
  background: #fdecec;
  color: #c0392b;
}

.admin-projects-client-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.admin-projects-client-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  background: #eef2f7;
  color: #34415a;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.admin-projects-client-chip--link {
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.admin-projects-client-chip--link:hover {
  background: #2f6df6;
  color: #fff;
}

.admin-projects-th-sort .admin-projects-sort-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.admin-projects-th-sort .admin-projects-sort-link:hover {
  text-decoration: underline;
}

.admin-badge--compact {
  min-height: 24px;
  padding: 2px 10px;
  font-size: 0.75rem;
  font-weight: 700;
}

.admin-table-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-table-action {
  text-decoration: none;
  color: #4f7cff;
  font-weight: 600;
  font-size: 0.9rem;
  transition: opacity 0.2s ease;
}

.admin-table-action:hover {
  opacity: 0.75;
}

.admin-table-action.is-danger {
  color: #d14343;
}

.admin-table-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 0.95rem;
  background: #f1f5f9;
  color: #17233c;
  transition: all 0.2s ease;
}

.admin-icon-btn:hover {
  background: #e2e8f0;
  transform: translateY(-1px);
}

/* Danger (delete) */
.admin-icon-btn.is-danger {
  background: #fdeaea;
  color: #d14343;
}

.admin-icon-btn.is-danger:hover {
  background: #f8d7d7;
}

/* Mobile cards */
@media (max-width: 860px) {
  .admin-users-table,
  .admin-users-table thead,
  .admin-users-table tbody,
  .admin-users-table th,
  .admin-users-table td,
  .admin-users-table tr {
    display: block;
  }

  .admin-users-table {
    min-width: 100%;
  }

  .admin-users-table thead {
    display: none;
  }

  .admin-users-table tbody tr {
    border: 1px solid #e8eef5;
    border-radius: 18px;
    padding: 16px;
    margin-bottom: 16px;
    background: #fff;
  }

  .admin-users-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    padding: 10px 0;
    border-bottom: 1px solid #eef3f8;
  }

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

  .admin-users-table tbody td::before {
    content: attr(data-label);
    font-weight: 700;
    color: #7b879c;
    min-width: 110px;
    font-size: 0.84rem;
  }

  .admin-users-table tbody td[data-label="Gebruiker"] {
    display: block;
    padding-top: 0;
  }

  .admin-users-table tbody td[data-label="Gebruiker"]::before {
    display: none;
  }
}

@media (max-width: 768px) {
  .admin-users-toolbar-card,
  .admin-users-table-card {
    padding: 18px;
  }

  .admin-page-header-users {
    flex-direction: column;
    align-items: flex-start;
  }

  .admin-page-header-actions {
    width: 100%;
  }

  .admin-page-header-actions .admin-btn {
    width: 100%;
    text-align: center;
  }

  .admin-users-search {
    max-width: 100%;
  }

  .admin-users-filters {
    width: 100%;
  }

  .admin-users-filters select {
    width: 100%;
    min-width: 100%;
  }

  .admin-table-actions {
    justify-content: flex-end;
  }
}

/* =========================================
   ADMIN USER ADD PAGE
========================================= */

/* Klantenmodule (overzicht / toevoegen / bewerken): compactere ruimte onder tabstrip zonder aparte pagina-header */
.admin-page--customer-form .admin-content {
  padding-top: 12px;
}

/* Klantenoverzicht: primaire actie bij tabelkop (zelfde patroon als projecten) */
.admin-page--customers .admin-content {
  padding-top: 18px;
}

/* Projectenoverzicht: geen FAB meer — primaire actie staat bij de tabelkop */
.admin-page--projects .admin-content {
  padding-top: 18px;
}

.admin-customers-fab-wrap,
.admin-projects-fab-wrap {
  position: fixed;
  left: 50%;
  bottom: max(22px, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 70;
  margin: 0;
  padding: 0;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
}

.admin-customers-fab-wrap .admin-customers-fab,
.admin-projects-fab-wrap .admin-projects-fab {
  margin: 0;
  white-space: nowrap;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.2);
  border-radius: 14px;
}

.admin-user-form-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 24px;
  align-items: start;
}

.admin-user-form-card {
  padding: 24px;
}

.admin-user-form-sidebar {
  display: grid;
  gap: 24px;
}

.admin-form-actions-between {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.admin-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef3f8;
  color: #17233c;
  text-decoration: none;
  box-shadow: none;
}

.admin-btn-secondary:hover {
  background: #e3ebf4;
}

.admin-info-item-column {
  padding: 0 0 16px;
  border-bottom: 1px solid #edf2f7;
}

.admin-info-item-column:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.admin-info-item-column strong {
  display: block;
  margin-bottom: 6px;
  color: #17233c;
  font-size: 0.95rem;
}

.admin-info-item-column p {
  margin: 0;
  color: #6d7890;
  font-size: 0.92rem;
  line-height: 1.6;
}

@media (max-width: 1100px) {
  .admin-user-form-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .admin-user-form-card {
    padding: 18px;
  }

  .admin-form-actions-between {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-btn-secondary,
  .admin-form-actions-between .admin-btn {
    width: 100%;
  }
}



/* =========================================
   ADMIN SUPPORT PAGE
========================================= */

.admin-support-card {
  padding: 24px;
}

.admin-support-tickets-overview {
  margin-bottom: 28px;
  padding: 0;
  overflow: hidden;
  border-color: #e4eaf2;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.055);
}

.admin-support-tickets-overview__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid #eef2f7;
  background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
}

.admin-support-tickets-overview__titles {
  flex: 1;
  min-width: min(100%, 260px);
}

.admin-support-tickets-overview__title {
  margin: 0 0 6px;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
}

.admin-support-tickets-overview__intro {
  margin: 0;
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.45;
}

.admin-support-tickets-overview__badge {
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #e8eef4;
}

.admin-support-tickets-overview__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px 12px;
}

.admin-support-tickets-overview__tools .admin-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.admin-support-create-toolbar {
  margin-bottom: 22px;
}

.admin-support-create-toolbar .admin-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.admin-support-tickets-overview--empty {
  margin-bottom: 28px;
}

.admin-support-tickets-overview--empty .admin-support-tickets-overview__head {
  padding-bottom: 22px;
  border-bottom: none;
}

.admin-support-tickets-overview--empty .admin-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.admin-support-tickets-list {
  list-style: none;
  margin: 0;
  padding: 14px 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-support-tickets-list__link {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px 18px;
  padding: 16px 18px;
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  border: 1px solid #e9eef5;
  background: #fff;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.035);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.admin-support-tickets-list__link:hover {
  border-color: #c9daf7;
  box-shadow: 0 10px 28px rgba(37, 99, 235, 0.12);
  transform: translateY(-1px);
}

.admin-support-tickets-list__link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.35);
}

.admin-support-tickets-list__main {
  flex: 1;
  min-width: min(100%, 200px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-support-tickets-list__id {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
}

.admin-support-tickets-list__subject {
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.35;
}

.admin-support-tickets-list__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-support-tickets-list__chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  color: #475569;
  background: #f8fafc;
  border: 1px solid #ebeef5;
}

.admin-support-tickets-list__chip--pri {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}

.admin-support-tickets-list__aside {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.admin-support-tickets-list__time {
  font-size: 0.82rem;
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
}

.admin-support-tickets-list__chev {
  display: inline-flex;
  color: #cbd5e1;
  font-size: 0.72rem;
}

.admin-support-tickets-list__link:hover .admin-support-tickets-list__chev {
  color: #2563eb;
}

@media (max-width: 640px) {
  .admin-support-tickets-overview__head {
    padding: 18px 16px 14px;
  }

  .admin-support-tickets-list {
    padding: 12px 12px 16px;
  }

  .admin-support-tickets-list__aside {
    width: 100%;
    justify-content: flex-start;
  }

  .admin-support-tickets-list__chev {
    margin-left: auto;
  }
}

.admin-form-group textarea {
  width: 100%;
  border: 1px solid #dbe3ef;
  background: #fff;
  border-radius: 14px;
  padding: 13px 15px;
  font-size: 0.96rem;
  color: #17233c;
  resize: vertical;
  min-height: 160px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  font-family: inherit;
}

.admin-form-group textarea:focus {
  outline: none;
  border-color: #4f7cff;
  box-shadow: 0 0 0 4px rgba(79, 124, 255, 0.12);
}

.admin-field-help {
  display: block;
  margin-top: 8px;
  color: #7b879c;
  font-size: 0.85rem;
}

.admin-support-info-list {
  display: grid;
  gap: 16px;
}

.admin-support-info-item {
  padding-bottom: 16px;
  border-bottom: 1px solid #edf2f7;
}

.admin-support-info-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.admin-support-info-item strong {
  display: block;
  margin-bottom: 6px;
  color: #17233c;
  font-size: 0.96rem;
}

.admin-support-info-item p {
  margin: 0;
  color: #6d7890;
  line-height: 1.6;
  font-size: 0.93rem;
}

.admin-faq-list {
  display: grid;
  gap: 12px;
}

.admin-faq-item {
  display: block;
  text-decoration: none;
  border: 1px solid #e6edf6;
  background: #f8fbff;
  border-radius: 14px;
  padding: 14px 16px;
  transition: all 0.2s ease;
}

.admin-faq-item:hover {
  transform: translateY(-1px);
  border-color: #d4dfef;
  box-shadow: 0 10px 24px rgba(23, 35, 60, 0.05);
}

.admin-faq-item strong {
  display: block;
  margin-bottom: 6px;
  color: #17233c;
  font-size: 0.94rem;
}

.admin-faq-item span {
  color: #4f7cff;
  font-size: 0.88rem;
  font-weight: 600;
}

.admin-support-status-box p {
  margin: 14px 0 0;
  color: #6d7890;
  line-height: 1.6;
  font-size: 0.93rem;
}

.admin-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 0.83rem;
  font-weight: 700;
}

.admin-status-pill.is-success {
  background: #e8f8ef;
  color: #14804a;
}

@media (max-width: 768px) {
  .admin-support-card {
    padding: 18px;
  }
}

/* Support ticket pagina */
.admin-support-ticket-page {
  max-width: 1180px;
}

.admin-support-ticket-flash {
  margin-bottom: 16px;
}

.admin-support-ticket-error-list {
  margin: 0;
  padding-left: 1.25rem;
}

.admin-support-ticket-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-bottom: 20px;
  font-size: 0.9rem;
}

.admin-support-ticket-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #475569;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.15s ease;
}

.admin-support-ticket-back:hover {
  color: #2563eb;
}

.admin-support-ticket-back__icon {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 0.85rem;
}

.admin-support-ticket-back:hover .admin-support-ticket-back__icon {
  background: #e8f1ff;
  color: #2563eb;
}

.admin-support-ticket-toolbar__sep {
  color: #cbd5e1;
  font-weight: 400;
}

.admin-support-ticket-toolbar__current {
  color: #94a3b8;
  font-weight: 500;
}

.admin-support-ticket-hero {
  margin-bottom: 24px;
  padding: 26px 28px 24px;
  border-radius: 20px;
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 55%, #f1f5f9 100%);
  border: 1px solid #e6edf5;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.06);
}

.admin-support-ticket-hero__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.admin-support-ticket-eyebrow {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}

.admin-support-ticket-title {
  margin: 0 0 14px;
  font-size: clamp(1.25rem, 2.5vw, 1.55rem);
  font-weight: 700;
  color: #0f172a;
  line-height: 1.25;
}

.admin-support-ticket-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.admin-support-ticket-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #334155;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #e2e8f0;
}

.admin-support-ticket-chip i {
  opacity: 0.75;
  font-size: 0.8rem;
}

.admin-support-ticket-chip--priority {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}

.admin-support-ticket-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 22px;
  font-size: 0.84rem;
  color: #64748b;
}

.admin-support-ticket-dates span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.admin-support-ticket-dates i {
  opacity: 0.65;
}

.admin-support-ticket-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: #eef2f8;
  color: #334155;
}

.admin-support-ticket-status-badge--open {
  background: #e8f1ff;
  color: #1d4ed8;
}

.admin-support-ticket-status-badge--in_progress {
  background: #fff7e6;
  color: #b45309;
}

.admin-support-ticket-status-badge--waiting_customer {
  background: #f3e8ff;
  color: #6b21a8;
}

.admin-support-ticket-status-badge--resolved {
  background: #e8f8ef;
  color: #14804a;
}

.admin-support-ticket-status-badge--closed {
  background: #f1f5f9;
  color: #64748b;
}

.admin-support-ticket-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 26px;
  align-items: start;
}

.admin-support-thread-card {
  background: #fff;
  border: 1px solid #e9eef5;
  border-radius: 20px;
  box-shadow: 0 10px 36px rgba(15, 23, 42, 0.045);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.admin-support-thread-tab-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
}

.admin-support-thread-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px 14px 16px;
  border-bottom: 1px solid #eef2f7;
  background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
}

.admin-support-thread-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: #eef2f7;
  border-radius: 14px;
}

.admin-support-thread-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 11px;
  font-size: 0.86rem;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  border: none;
  background: transparent;
  transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  user-select: none;
}

.admin-support-thread-tab i {
  font-size: 0.85rem;
  opacity: 0.85;
}

.admin-support-thread-tab:hover {
  color: #334155;
}

#support_thread_tab_gesprek:checked ~ .admin-support-thread-card__head .admin-support-thread-tab[for="support_thread_tab_gesprek"],
#support_thread_tab_antwoord:checked ~ .admin-support-thread-card__head .admin-support-thread-tab[for="support_thread_tab_antwoord"] {
  background: #fff;
  color: #1d4ed8;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

#support_thread_tab_gesprek:focus-visible ~ .admin-support-thread-card__head .admin-support-thread-tab[for="support_thread_tab_gesprek"],
#support_thread_tab_antwoord:focus-visible ~ .admin-support-thread-card__head .admin-support-thread-tab[for="support_thread_tab_antwoord"] {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}

.admin-support-thread-panel--reply {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: min(52vh, 420px);
  padding: 18px 20px 20px;
  background: #fafbfc;
  border-top: 1px solid #eef2f7;
}

#support_thread_tab_antwoord:checked ~ .admin-support-thread-panel--messages {
  display: none !important;
}

#support_thread_tab_antwoord:checked ~ .admin-support-thread-panel--reply {
  display: flex !important;
}

.admin-support-thread-card__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #17233c;
}

.admin-support-thread-card__count {
  font-size: 0.82rem;
  font-weight: 600;
  color: #94a3b8;
}

.admin-support-thread-panel--messages.admin-support-thread {
  flex: 1;
  min-height: 200px;
}

.admin-support-thread {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-height: min(62vh, 640px);
  overflow-y: auto;
}

.admin-support-thread-composer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-height: 0;
}

.admin-support-thread-composer__hint {
  margin: 0;
  font-size: 0.86rem;
  color: #64748b;
  line-height: 1.45;
}

.admin-support-thread-composer__hint i {
  margin-right: 6px;
  opacity: 0.75;
}

.admin-support-thread-composer__field {
  margin-bottom: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.admin-support-thread-composer__field .admin-support-ticket-reply-textarea {
  flex: 1;
  min-height: 160px;
}

.admin-support-thread-composer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.admin-support-thread-composer__attach {
  margin-bottom: 0;
  flex: 1;
  min-width: 180px;
}

.admin-support-thread-composer__file {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  opacity: 0;
}

.admin-support-thread-composer__file-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #475569;
  background: #fff;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.admin-support-thread-composer__file-label:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.admin-support-thread-composer__send .admin-btn {
  min-width: 132px;
}

.admin-support-thread-card--closed-only .admin-support-thread-card__head {
  align-items: baseline;
}

.admin-support-thread-card__closed-foot {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 20px;
  border-top: 1px solid #fef3c7;
  background: linear-gradient(180deg, #fffbeb 0%, #fff 100%);
  font-size: 0.9rem;
  color: #92400e;
}

.admin-support-thread-card__closed-foot i {
  margin-top: 3px;
  opacity: 0.85;
}

.admin-support-thread-card__closed-foot p {
  margin: 0;
  line-height: 1.5;
}

.admin-support-thread-card__closed-foot strong {
  color: #78350f;
}

.admin-support-thread-empty {
  margin: 24px 8px;
  text-align: center;
  color: #94a3b8;
  font-size: 0.94rem;
}

.admin-support-msg-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
}

.admin-support-msg-row.is-visibo {
  justify-content: flex-start;
}

.admin-support-msg-row.is-company {
  justify-content: flex-end;
  flex-direction: row-reverse;
}

.admin-support-msg-avatar {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 800;
  color: #1e40af;
  background: linear-gradient(145deg, #dbeafe 0%, #eff6ff 100%);
  border: 1px solid #bfdbfe;
}

.admin-support-msg-avatar--visibo {
  color: #fff;
  background: linear-gradient(145deg, #1e3a5f 0%, #2563eb 100%);
  border-color: rgba(37, 99, 235, 0.35);
  font-size: 1rem;
}

.admin-support-msg {
  border-radius: 16px;
  padding: 14px 16px;
  max-width: min(100%, 680px);
  min-width: 0;
}

.admin-support-msg.is-company {
  background: linear-gradient(145deg, #eff6ff 0%, #f8fafc 100%);
  border: 1px solid #cbd5e1;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.07);
}

.admin-support-msg.is-visibo {
  background: #fff;
  border: 1px solid #e9eef5;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06);
}

.admin-support-msg__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 14px;
  margin-bottom: 8px;
  font-size: 0.88rem;
}

.admin-support-msg__head strong {
  color: #0f172a;
}

.admin-support-msg__head time {
  color: #94a3b8;
  font-size: 0.8rem;
  white-space: nowrap;
}

.admin-support-msg__body {
  font-size: 0.94rem;
  line-height: 1.58;
  color: #1e293b;
  word-break: break-word;
}

.admin-support-msg__attach {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #e2e8f0;
}

.admin-support-msg__attach-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 0.86rem;
  font-weight: 600;
  color: #1d4ed8;
  background: #f1f5f9;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.admin-support-msg__attach-link:hover {
  background: #e8f1ff;
  color: #1e40af;
}

.admin-support-ticket-aside {
  position: sticky;
  top: 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.admin-support-ticket-aside .admin-support-ticket-panel {
  margin: 0;
}

.admin-support-ticket-panel .admin-card-header {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.admin-support-ticket-panel__header {
  display: flex;
  gap: 12px;
  align-items: center;
}

.admin-support-ticket-panel__head-text {
  flex: 1;
  min-width: 0;
}

.admin-support-ticket-panel__icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e8eef4;
  color: #475569;
  font-size: 1.05rem;
}

.admin-support-ticket-panel__icon--accent {
  background: linear-gradient(145deg, #e8f1ff 0%, #dbeafe 100%);
  color: #1d4ed8;
}

.admin-support-ticket-panel__title {
  margin: 0 0 2px;
  font-size: 1.06rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
  line-height: 1.25;
}

.admin-support-ticket-panel__hint {
  margin: 0;
  font-size: 0.84rem;
  color: #64748b;
  line-height: 1.4;
}

.admin-support-ticket-panel__form {
  padding-top: 0;
}

.admin-support-ticket-panel__form--status {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #eef2f7;
}

.admin-support-ticket-panel__form--status .admin-support-ticket-panel__field {
  margin-bottom: 16px;
}

.admin-support-ticket-panel__form--status .admin-support-ticket-panel__field label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #475569;
  margin-bottom: 8px;
}

.admin-support-ticket-panel__select {
  border-radius: 12px;
  border-color: #dce4ee;
  padding-top: 11px;
  padding-bottom: 11px;
}

.admin-support-ticket-panel__actions {
  margin-top: 4px;
  padding-top: 0;
}

.admin-support-ticket-panel--status {
  border-radius: 18px;
  border-color: #e4eaf2;
  box-shadow: 0 10px 32px rgba(15, 23, 42, 0.055);
}

.admin-support-ticket-panel {
  border-radius: 18px;
}

.admin-support-ticket-panel--reply {
  border-color: #dbeafe;
  box-shadow: 0 12px 36px rgba(37, 99, 235, 0.08);
}

.admin-support-ticket-reply-textarea {
  min-height: 120px;
  resize: vertical;
  border-radius: 14px;
  line-height: 1.5;
}

.admin-support-ticket-optional {
  font-weight: 500;
  color: #94a3b8;
}

.admin-support-ticket-panel .admin-btn-block {
  width: 100%;
  justify-content: center;
  gap: 8px;
}

.admin-support-ticket-closed-notice {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 4px 2px;
}

.admin-support-ticket-closed-notice__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: #f1f5f9;
  color: #64748b;
}

.admin-support-ticket-closed-notice strong {
  display: block;
  margin-bottom: 4px;
  color: #17233c;
}

.admin-support-ticket-closed-notice p {
  margin: 0;
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.5;
}

@media (max-width: 1100px) {
  .admin-support-ticket-layout {
    grid-template-columns: 1fr;
  }

  .admin-support-ticket-aside {
    position: static;
  }

  .admin-support-thread {
    max-height: none;
  }
}

@media (max-width: 768px) {
  .admin-support-ticket-hero {
    padding: 20px 18px;
  }

  .admin-support-msg {
    max-width: 100%;
  }

  .admin-support-thread-tabs {
    flex: 1;
    min-width: 0;
  }

  .admin-support-thread-tab {
    flex: 1;
    justify-content: center;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 0.82rem;
  }

  .admin-support-thread-panel--reply {
    min-height: auto;
    padding: 14px 14px 16px;
  }

  .admin-support-thread-composer__row {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-support-thread-composer__send .admin-btn {
    width: 100%;
    justify-content: center;
  }
}

/* =========================
   CONTENT
========================= */
.admin-content {
  padding: 28px;
}

.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 24px;
}

.admin-stat-card {
  background: #fff;
  border: 1px solid #e9eef5;
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
}

.admin-stat-card span {
  display: block;
  font-size: .92rem;
  color: #7c8798;
  margin-bottom: 10px;
}

.admin-stat-card strong {
  display: block;
  font-size: 2rem;
  line-height: 1;
  color: #102348;
  margin-bottom: 10px;
}

.admin-stat-card p {
  margin: 0;
  color: #6c7890;
  font-size: .93rem;
  line-height: 1.6;
}

.admin-dashboard-grid {
  display: grid;
  grid-template-columns: 1.45fr .95fr;
  gap: 20px;
}

.admin-dashboard-muted {
  margin: 0;
  font-size: 0.92rem;
  color: #6c7890;
  font-weight: 600;
}

.admin-dashboard-table-wrap {
  overflow-x: auto;
  margin: 0 -4px;
  padding: 0 4px;
}

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

.admin-dashboard-table th,
.admin-dashboard-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #eef3f8;
  vertical-align: top;
}

.admin-dashboard-table th {
  text-align: left;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #7c8798;
  font-weight: 800;
}

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

.admin-dashboard-table__title-link {
  display: inline;
  font-weight: 800;
  color: #102348;
  text-decoration: none;
}

.admin-dashboard-table__title-link:hover {
  color: var(--accent, #2563eb);
  text-decoration: underline;
}

.admin-dashboard-table__ref {
  display: block;
  margin-top: 2px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #94a3b8;
}

.admin-dashboard-side-card {
  height: 100%;
}

.admin-dashboard-today-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.admin-dashboard-today-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid #eef3f8;
  text-decoration: none;
  color: inherit;
  border-radius: 12px;
  margin: 0 -8px;
  padding-left: 8px;
  padding-right: 8px;
}

.admin-dashboard-today-list li:first-child .admin-dashboard-today-item {
  border-top: none;
  padding-top: 2px;
}

.admin-dashboard-today-item:hover {
  background: #f8fafc;
}

.admin-dashboard-today-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: #94a3b8;
}

.admin-dashboard-today-dot.is-high {
  background: #f97316;
}

.admin-dashboard-today-dot.is-urgent {
  background: #ef4444;
}

.admin-dashboard-today-item__body {
  flex: 1 1 auto;
  min-width: 0;
}

.admin-dashboard-today-item__title {
  display: block;
  font-weight: 800;
  font-size: 0.95rem;
  color: #102348;
  line-height: 1.3;
}

.admin-dashboard-today-item__meta {
  display: block;
  margin-top: 2px;
  font-size: 0.82rem;
  color: #64748b;
  line-height: 1.35;
}

.admin-dashboard-today-item__time {
  flex-shrink: 0;
  font-size: 0.88rem;
  font-weight: 800;
  color: #475569;
}

.admin-dashboard-planner-link {
  display: inline-block;
  margin-top: 8px;
  font-weight: 700;
  color: var(--accent, #2563eb);
  text-decoration: none;
}

.admin-dashboard-planner-link:hover {
  text-decoration: underline;
}

.admin-stat-card__link {
  color: inherit;
  text-decoration: none;
}

.admin-stat-card__link:hover {
  color: var(--accent, #2563eb);
}

/* ---------- Dashboard — rustig / “calm” lay-out (kleuren aligned met admin) ---------- */

.admin-page--dashboard-calm .admin-content {
  padding: 24px 28px 44px;
  background:
    radial-gradient(circle at 0% 0%, rgba(79, 124, 255, 0.07) 0, transparent 42%),
    #f6f8fc;
}

.dash-calm {
  --dc-bg: #f6f8fc;
  --dc-panel: #ffffff;
  --dc-panel-soft: #f8fafc;
  --dc-text: #102348;
  --dc-muted: #64748b;
  --dc-line: #e9eef5;
  --dc-accent: #2563eb;
  --dc-accent-bright: #4f7cff;
  --dc-accent-soft: #eff6ff;
  --dc-navy: #1e3a5f;
  --dc-warning: #d97706;
  --dc-danger: #dc2626;
  --dc-shadow: 0 10px 36px rgba(15, 23, 42, 0.06);
  --dc-radius: 24px;
  color: var(--dc-text);
  max-width: 1280px;
}

.dash-calm-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 28px;
}

.dash-calm-welcome__title {
  margin: 0;
  font-size: clamp(1.35rem, 3vw, 2.15rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--dc-text);
}

.dash-calm-welcome__sub {
  margin: 8px 0 0;
  font-size: 0.95rem;
  color: var(--dc-muted);
  max-width: 36rem;
  line-height: 1.5;
}

.dash-calm-grid--hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  gap: 24px;
  align-items: start;
  margin-bottom: 24px;
}

.dash-calm-hero {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid var(--dc-line);
  border-radius: 34px;
  padding: 28px 28px 26px;
  box-shadow: var(--dc-shadow);
  position: relative;
  overflow: hidden;
}

.dash-calm-hero::after {
  content: '';
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(79, 124, 255, 0.1);
  right: -70px;
  top: -80px;
  pointer-events: none;
}

.dash-calm-hero__content {
  position: relative;
  z-index: 1;
}

.dash-calm-eyebrow {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--dc-navy);
  background: var(--dc-accent-soft);
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.dash-calm-hero__title {
  margin: 0 0 10px;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  max-width: 38rem;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.dash-calm-hero__lead {
  margin: 0 0 22px;
  color: var(--dc-muted);
  max-width: 36rem;
  line-height: 1.65;
  font-size: 0.94rem;
}

.dash-calm-summary-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.dash-calm-mini-stat {
  background: var(--dc-panel-soft);
  border: 1px solid var(--dc-line);
  border-radius: 22px;
  padding: 16px 14px;
}

.dash-calm-mini-stat strong {
  display: block;
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 4px;
  color: var(--dc-navy);
}

.dash-calm-mini-stat span {
  color: var(--dc-muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.dash-calm-hero__actions {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.dash-calm-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.9rem;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, var(--dc-accent) 0%, var(--dc-accent-bright) 100%);
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.28);
  border: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dash-calm-hero__cta:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(37, 99, 235, 0.35);
}

.dash-calm-hero__cta:focus-visible {
  outline: 2px solid var(--dc-accent-bright);
  outline-offset: 3px;
}

.dash-calm-card {
  background: var(--dc-panel);
  border: 1px solid var(--dc-line);
  border-radius: var(--dc-radius);
  padding: 22px 22px 20px;
  box-shadow: var(--dc-shadow);
}

.dash-calm-card--side {
  padding-bottom: 22px;
}

.dash-calm-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.dash-calm-card-head__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--dc-text);
}

.dash-calm-soft-link {
  color: var(--dc-accent);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.82rem;
  white-space: nowrap;
}

.dash-calm-soft-link:hover {
  color: var(--dc-accent-bright);
  text-decoration: underline;
}

.dash-calm-focus-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.dash-calm-focus-item,
.dash-calm-focus-item--link {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-radius: 20px;
  background: var(--dc-panel-soft);
  border: 1px solid var(--dc-line);
  margin: 0;
}

.dash-calm-focus-item--link {
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dash-calm-focus-item--link:hover {
  border-color: #cbd5e1;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}

.dash-calm-focus-icon {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: var(--dc-accent-soft);
  color: var(--dc-navy);
  font-size: 1rem;
}

.dash-calm-focus-text h4 {
  margin: 0 0 4px;
  font-size: 0.94rem;
  font-weight: 800;
}

.dash-calm-focus-text p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--dc-muted);
  line-height: 1.45;
}

.dash-calm-tag {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 7px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.dash-calm-tag--amber {
  background: #fffbeb;
  color: var(--dc-warning);
}

.dash-calm-tag--rose {
  background: #fef2f2;
  color: var(--dc-danger);
}

/* “Groen” label uit markup = nu accent-blauw (past bij QR / primaire acties) */
.dash-calm-tag--green {
  background: var(--dc-accent-soft);
  color: var(--dc-navy);
}

.dash-calm-tag--muted {
  background: #f1f5f9;
  color: var(--dc-muted);
}

.dash-calm-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.dash-calm-muted {
  margin: 0;
  font-size: 0.9rem;
  color: var(--dc-muted);
  line-height: 1.55;
}

.dash-calm-timeline {
  display: grid;
  gap: 14px;
}

.dash-calm-timeline-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  align-items: start;
}

.dash-calm-timeline-time {
  color: var(--dc-muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.dash-calm-timeline-box {
  border-left: 3px solid #bfdbfe;
  padding-left: 14px;
}

.dash-calm-timeline-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.dash-calm-timeline-link:hover strong {
  color: var(--dc-accent);
}

.dash-calm-timeline-link strong {
  display: block;
  margin-bottom: 4px;
  font-size: 0.92rem;
}

.dash-calm-timeline-link span {
  color: var(--dc-muted);
  font-size: 0.82rem;
}

.dash-calm-client-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--dc-line);
}

.dash-calm-client-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.dash-calm-client-row strong {
  display: block;
  font-size: 0.94rem;
  margin-bottom: 4px;
}

.dash-calm-client-row span {
  color: var(--dc-muted);
  font-size: 0.82rem;
}

.dash-calm-ghost-btn {
  border: 1px solid var(--dc-line);
  background: #fff;
  color: var(--dc-navy);
  border-radius: 999px;
  padding: 9px 14px;
  font-weight: 800;
  font-size: 0.78rem;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.dash-calm-ghost-btn:hover {
  border-color: #cbd5e1;
  color: var(--dc-accent);
}

@media (max-width: 1100px) {
  .dash-calm-grid--hero {
    grid-template-columns: 1fr;
  }

  .dash-calm-bottom {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .dash-calm-summary-row {
    grid-template-columns: 1fr;
  }

  .dash-calm-focus-item,
  .dash-calm-focus-item--link {
    grid-template-columns: 42px 1fr;
  }

  .dash-calm-focus-item .dash-calm-tag,
  .dash-calm-focus-item--link .dash-calm-tag,
  .dash-calm-focus-item .dash-calm-ghost-btn {
    grid-column: 2;
    justify-self: start;
    margin-top: 4px;
  }
}

/* ---------- Dashboard (KPI’s, hero, werkbench-tabs) ---------- */

.admin-page--dashboard:not(.admin-page--dashboard-calm) .admin-content {
  padding-top: 8px;
}

.admin-dashboard-kpis {
  margin-bottom: 28px;
}

.admin-stats-grid--dashboard {
  gap: 16px;
  margin-bottom: 0;
}

.admin-dashboard-kpis .admin-stat-card--kpi {
  position: relative;
  margin: 0;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 20px;
  padding: 20px 20px 22px;
  background: linear-gradient(155deg, #ffffff 0%, #f8fafc 55%, #f1f5f9 100%);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 14px 36px rgba(15, 23, 42, 0.07);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.admin-dashboard-kpis .admin-stat-card--kpi:hover {
  transform: translateY(-2px);
  box-shadow:
    0 2px 4px rgba(15, 23, 42, 0.05),
    0 18px 44px rgba(15, 23, 42, 0.1);
}

.admin-dashboard-kpis .admin-stat-card--kpi::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 4px 0 0 4px;
}

.admin-dashboard-kpis .admin-stat-card--accent-slate::before {
  background: linear-gradient(180deg, #64748b, #475569);
}

.admin-dashboard-kpis .admin-stat-card--accent-teal::before {
  background: linear-gradient(180deg, #14b8a6, #0d9488);
}

.admin-dashboard-kpis .admin-stat-card--accent-violet::before {
  background: linear-gradient(180deg, #8b5cf6, #6d28d9);
}

.admin-dashboard-kpis .admin-stat-card--accent-amber::before {
  background: linear-gradient(180deg, #f59e0b, #d97706);
}

.admin-stat-card__kpi-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.admin-dashboard-kpis .admin-stat-card__kpi-label {
  display: block;
  margin: 0;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #64748b;
  line-height: 1.35;
  max-width: 12rem;
}

.admin-dashboard-kpis .admin-stat-card__kpi-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(148, 163, 184, 0.14);
  color: #475569;
  font-size: 1.2rem;
  line-height: 1;
}

.admin-dashboard-kpis .admin-stat-card__kpi-icon i {
  display: block;
  line-height: 1;
}

.admin-dashboard-kpis .admin-stat-card--accent-teal .admin-stat-card__kpi-icon {
  background: rgba(20, 184, 166, 0.15);
  color: #0f766e;
}

.admin-dashboard-kpis .admin-stat-card--accent-violet .admin-stat-card__kpi-icon {
  background: rgba(139, 92, 246, 0.14);
  color: #5b21b6;
}

.admin-dashboard-kpis .admin-stat-card--accent-amber .admin-stat-card__kpi-icon {
  background: rgba(245, 158, 11, 0.18);
  color: #b45309;
}

.admin-dashboard-kpis .admin-stat-card__kpi-value {
  display: block;
  margin: 0;
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: #0f172a;
}

.admin-dashboard-kpis .admin-stat-card__kpi-note {
  margin: 12px 0 0;
  font-size: 0.86rem;
  line-height: 1.55;
  color: #64748b;
}

.admin-dashboard-panel {
  margin-top: 0;
  margin-bottom: 0;
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 16px 40px rgba(15, 23, 42, 0.06);
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
}

.admin-dashboard-workbench {
  margin-bottom: 12px;
}

.admin-dashboard-workbench__card {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  overflow: hidden;
  min-width: 0;
}

.admin-dashboard-workbench-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 6px 0;
  margin: 0 -6px 4px;
  border-bottom: 1px solid #e8edf4;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.65) 0%, rgba(255, 255, 255, 0) 100%);
}

.admin-dashboard-workbench-tab {
  position: relative;
  margin: 0;
  padding: 11px 14px 13px;
  border: none;
  border-radius: 14px 14px 0 0;
  background: transparent;
  font: inherit;
  font-size: 0.93rem;
  font-weight: 800;
  color: #64748b;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.admin-dashboard-workbench-tab:hover {
  color: #0f172a;
  background: rgba(255, 255, 255, 0.7);
}

.admin-dashboard-workbench-tab.is-active {
  color: #0f172a;
  background: #fff;
  box-shadow: 0 -1px 0 #fff, 0 -2px 12px rgba(15, 23, 42, 0.06);
}

.admin-dashboard-workbench-tab.is-active::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, #3b82f6, #6366f1);
}

.admin-dashboard-workbench-tab__badge {
  min-width: 1.35rem;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
  background: #e2e8f0;
  color: #475569;
}

.admin-dashboard-workbench-tab.is-active .admin-dashboard-workbench-tab__badge {
  background: rgba(99, 102, 241, 0.18);
  color: #4338ca;
}

.admin-dashboard-workbench-panel {
  padding: 18px 6px 8px;
}

.admin-dashboard-workbench-panel__toolbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.admin-dashboard-workbench-panel__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
}

.admin-dashboard-workbench-panel__link {
  flex-shrink: 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--accent, #2563eb);
  text-decoration: none;
}

.admin-dashboard-workbench-panel__link:hover {
  text-decoration: underline;
}

.admin-dashboard-workbench-panel[hidden] {
  display: none !important;
}

.admin-dashboard-wb-subhead {
  margin: 20px 0 10px;
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
}

.admin-dashboard-wb-subhead:first-child {
  margin-top: 4px;
}

.admin-dashboard-wb-subhead__hint {
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: #94a3b8;
}

.admin-dashboard-wb-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.admin-dashboard-wb-list > li + li {
  margin-top: 2px;
}

.admin-dashboard-wb-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 14px;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.admin-dashboard-wb-row:hover {
  background: #f8fafc;
  border-color: #e8edf4;
}

.admin-dashboard-wb-row__main {
  flex: 1 1 auto;
  min-width: 0;
}

.admin-dashboard-wb-row__title {
  display: block;
  font-weight: 800;
  font-size: 0.96rem;
  color: #0f172a;
  line-height: 1.3;
}

.admin-dashboard-wb-row__meta {
  display: block;
  margin-top: 3px;
  font-size: 0.82rem;
  color: #64748b;
}

.admin-dashboard-wb-row__excerpt {
  display: block;
  margin-top: 6px;
  font-size: 0.84rem;
  color: #475569;
  line-height: 1.45;
}

.admin-dashboard-wb-row__side {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.admin-dashboard-wb-row__time {
  font-size: 0.78rem;
  font-weight: 700;
  color: #94a3b8;
  white-space: nowrap;
}

.admin-dashboard-wb-foot {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid #eef3f8;
  font-size: 0.9rem;
  font-weight: 700;
}

.admin-dashboard-wb-foot a {
  color: var(--accent, #2563eb);
  text-decoration: none;
}

.admin-dashboard-wb-foot a:hover {
  text-decoration: underline;
}

.admin-card {
  background: #fff;
  border: 1px solid #e9eef5;
  border-radius: 24px;
  padding: 24px;
  margin: 10px 0px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
}

.admin-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.admin-card-header h2 {
  margin: 0;
  font-size: 1.2rem;
  color: #102348;
  font-weight: 800;
}

/* Geen .admin-btn: knoppen hebben eigen kleuren (primary navy / secondary grijs) */
.admin-card-header a:not(.admin-btn) {
  color: var(--accent);
  text-decoration: none;
  font-weight: 700;
  font-size: .92rem;
}

.admin-activity-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.admin-activity-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  border-top: 1px solid #eef3f8;
}

.admin-activity-item:first-child {
  border-top: none;
  padding-top: 0;
}

.admin-activity-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: #edf4ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2457d6;
  font-size: 1rem;
  flex-shrink: 0;
}

.admin-activity-text strong {
  display: block;
  color: #102348;
  font-size: .97rem;
  margin-bottom: 4px;
}

.admin-activity-text p {
  margin: 0;
  color: #6f7d92;
  font-size: .92rem;
  line-height: 1.7;
}

.admin-activity-text span {
  display: inline-block;
  margin-top: 6px;
  color: #98a2b3;
  font-size: .84rem;
}

.admin-quick-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.admin-action-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #f8fbff;
  border: 1px solid #e6edf7;
  border-radius: 18px;
  padding: 16px 18px;
  text-decoration: none;
  transition: .2s ease;
}

.admin-action-btn:hover {
  background: #f1f7ff;
  border-color: #dbe8fb;
}

.admin-action-btn strong {
  display: block;
  color: #102348;
  font-size: .96rem;
  margin-bottom: 4px;
}

.admin-action-btn span {
  color: #718099;
  font-size: .9rem;
  line-height: 1.6;
}

.admin-action-arrow {
  color: #2457d6;
  font-weight: 800;
  flex-shrink: 0;
}

.admin-empty-box {
  background: linear-gradient(180deg, #f8fbff 0%, #f3f7fd 100%);
  border: 1px dashed #d6e2f2;
  border-radius: 20px;
  padding: 22px;
  margin-top: 18px;
}

.admin-empty-box h3 {
  margin: 0 0 8px;
  color: #102348;
  font-size: 1rem;
}

.admin-empty-box p {
  margin: 0;
  color: #6f7d92;
  font-size: .94rem;
  line-height: 1.7;
}

.admin-settings-alert {
  padding: 14px 18px;
  border-radius: 14px;
  margin-bottom: 18px;
  font-size: .94rem;
  line-height: 1.5;
}

.admin-settings-alert--success {
  background: #ecfdf3;
  border: 1px solid #a7f3d0;
  color: #065f46;
}

.admin-settings-alert--error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

.admin-settings-alert--error p {
  margin: 0 0 6px;
}

.admin-settings-alert--error p:last-child {
  margin-bottom: 0;
}

.admin-settings-readonly-note {
  margin-top: 12px;
  margin-bottom: 0;
}

.admin-role-perm-locked {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  color: #64748b;
  font-weight: 700;
  font-size: 1.05rem;
}

.admin-tasks-list-lede {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 0.94rem;
  line-height: 1.5;
  max-width: 52rem;
}

.admin-tasks-list-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
}

.admin-tasks-list-add-task {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  line-height: 1.2;
}

.admin-tasks-list-add-task__icon {
  display: inline-flex;
  line-height: 1;
  font-size: 0.88rem;
}

.admin-tasks-table-wrap {
  overflow-x: auto;
  margin-top: 8px;
}

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

.admin-tasks-table th,
.admin-tasks-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid #e9eef5;
  vertical-align: top;
}

.admin-tasks-table th {
  font-weight: 700;
  color: #64748b;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #f8fafc;
}

.admin-tasks-table tbody tr:hover {
  background: #fafbfc;
}

.admin-tasks-row--past td {
  color: #94a3b8;
}

.admin-tasks-table-actions {
  white-space: nowrap;
  width: 1%;
  vertical-align: middle;
  text-align: right;
}

.admin-tasks-actions-toolbar {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-end;
  gap: 8px;
}

.admin-tasks-act {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 8px 14px;
  margin: 0;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    color 0.15s ease;
}

.admin-tasks-act:hover {
  transform: none;
}

.admin-tasks-act:focus-visible {
  outline: 2px solid #164cc8;
  outline-offset: 2px;
}

.admin-tasks-act__icon {
  display: inline-flex;
  font-size: 0.95rem;
  opacity: 0.92;
}

.admin-tasks-act__label {
  position: relative;
  top: 0.5px;
}

.admin-tasks-act--info {
  background: #fff;
  color: #164cc8;
  border-color: #c5d8f5;
  box-shadow: 0 1px 2px rgba(22, 76, 200, 0.07);
}

.admin-tasks-act--info:hover {
  background: #f4f8ff;
  border-color: #94b8f0;
  box-shadow: 0 2px 6px rgba(22, 76, 200, 0.1);
}

.admin-tasks-act--agenda {
  background: linear-gradient(180deg, #f2f7fd 0%, #e8f1fb 100%);
  color: #17233c;
  border-color: #c9dcf0;
  box-shadow: 0 1px 2px rgba(23, 35, 60, 0.06);
}

.admin-tasks-act--agenda:hover {
  background: linear-gradient(180deg, #eaf2fb 0%, #dfeaf8 100%);
  border-color: #b0c9e8;
}

.admin-tasks-detail-row td {
  background: #f8fafc;
  border-bottom: 1px solid #e9eef5;
}

.admin-tasks-detail-cell {
  padding: 16px 18px;
}

.admin-tasks-detail-inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.admin-tasks-detail-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  margin-bottom: 6px;
}

.admin-tasks-detail-notes {
  font-size: 0.94rem;
  line-height: 1.55;
  color: #334155;
  word-break: break-word;
}

.admin-tasks-detail-notes a {
  color: #164cc8;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.admin-tasks-detail-notes a:hover {
  color: #0f3a9e;
}

.admin-tasks-detail-empty {
  margin: 0;
  color: #94a3b8;
  font-size: 0.92rem;
}

.admin-tasks-detail-meta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px 24px;
  margin: 0;
}

.admin-tasks-detail-meta dt {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #64748b;
  margin: 0 0 4px;
}

.admin-tasks-detail-meta dd {
  margin: 0;
  font-size: 0.9rem;
  color: #334155;
}

.admin-tasks-detail-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.admin-tasks-table__done-head,
.admin-tasks-table__done {
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
}

.admin-tasks-done-form {
  margin: 0;
}

.admin-tasks-done-btn {
  white-space: nowrap;
}

.admin-tasks-empty {
  margin-top: 12px;
}

@media (max-width: 900px) {
  .admin-tasks-table thead {
    display: none;
  }

  .admin-tasks-table tr {
    display: block;
    border: 1px solid #e9eef5;
    border-radius: 14px;
    margin-bottom: 12px;
    padding: 4px 0;
    background: #fff;
  }

  .admin-tasks-table td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border: none;
    padding: 10px 14px;
  }

  .admin-tasks-table td::before {
    content: attr(data-label);
    font-weight: 700;
    color: #64748b;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    flex-shrink: 0;
  }

  .admin-tasks-table-actions {
    justify-content: flex-end;
    flex-wrap: wrap;
    white-space: normal;
  }

  .admin-tasks-actions-toolbar {
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
  }

  .admin-tasks-act {
    white-space: nowrap;
  }

  .admin-tasks-table__done {
    justify-content: flex-end;
  }

  .admin-tasks-detail-cell {
    display: block !important;
  }

  .admin-tasks-detail-cell::before {
    display: none !important;
    content: none !important;
  }
}


/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1200px) {
  .admin-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

@media (max-width: 991px) {
  .admin-sidebar {
    position: fixed;
    left: -100%;
    top: 0;
    z-index: 120;
    width: min(320px, calc(100vw - 48px));
    max-width: 320px;
    transition: left 0.25s ease;
    box-shadow: 8px 0 32px rgba(15, 23, 42, 0.18);
  }

  .admin-sidebar.is-open {
    left: 0;
  }

  .admin-mobile-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .admin-topbar-row--main {
    padding: 16px 18px 12px;
  }

  .admin-topbar-row--tabs {
    padding: 0 18px;
  }

  .admin-topbar-tabstrip {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .admin-topbar-tabstrip-main {
    flex-wrap: nowrap;
  }

  .admin-content {
    padding: 20px 18px;
  }

  .admin-page--customer-form .admin-content {
    padding-top: 12px;
  }

  .admin-topbar-search {
    min-width: 200px;
  }
}

@media (max-width: 768px) {
  .admin-topbar-inner {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-topbar-right {
    justify-content: space-between;
  }

  .admin-stats-grid {
    grid-template-columns: 1fr;
  }

  .admin-topbar-search {
    min-width: 0;
    width: 100%;
  }

  .admin-topbar-search--global:focus-within {
    width: 100%;
    max-width: 100%;
  }

  .admin-profile-chip {
    flex-shrink: 0;
  }
}

@media (max-width: 640px) {
  .admin-content {
    padding: 16px;
  }

  .admin-page--customer-form .admin-content {
    padding-top: 12px;
  }

  .admin-card,
  .admin-stat-card {
    padding: 18px;
    border-radius: 18px;
  }

  .admin-page-title h1 {
    font-size: 1.25rem;
  }
}

/* =========================================
   ADMIN MAINTENANCE PAGE
========================================= */







/* =========================================================
   ONDERHOUD / PLANNING - VOLLEDIGE NIEUWE CSS
========================================================= */

/* ---------- PAGE HEADER ---------- */

.admin-page-header-maintenance {
  margin-bottom: 24px;
}

.admin-page-header-maintenance h1 {
  margin: 0 0 8px;
  font-size: 2rem;
  line-height: 1.15;
  font-weight: 800;
  color: #183153;
}

.admin-page-header-maintenance p {
  margin: 0;
  max-width: 760px;
  font-size: 1rem;
  line-height: 1.65;
  color: #6f7f98;
}

/* ---------- FACTURATIE-OVERZICHT ---------- */

.admin-billing-overview-toolbar {
  display: grid;
  /* Middenkolom vult ruimte tussen Weergave en Tonen (niet “auto” = alleen inhoudsbreed). */
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px 20px;
  margin-bottom: 26px;
}

.admin-billing-overview-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  justify-self: start;
}

.admin-billing-overview-filters__label {
  font-size: 0.88rem;
  font-weight: 600;
  color: #64748b;
}

.admin-billing-overview-filters__label--inline {
  margin-right: 2px;
}

.admin-billing-overview-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: #f4f7fb;
  border: 1px solid #e4ebf4;
  border-radius: 14px;
  justify-self: end;
}

.admin-billing-overview-search {
  justify-self: stretch;
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
}

/* Zelfde taal als .admin-billing-overview-tabs: lichte strip + rand */
.admin-billing-search-shell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: min(100%, 320px);
  padding: 6px 8px;
  background: #f4f7fb;
  border: 1px solid #e4ebf4;
  border-radius: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.admin-billing-search-shell:focus-within {
  border-color: #c5d4e8;
  box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.12);
}

.admin-billing-search-shell .admin-billing-search-icon {
  flex-shrink: 0;
  font-size: 0.92rem;
  opacity: 0.55;
  padding-left: 4px;
}

.admin-billing-search-input {
  flex: 1 1 200px;
  min-width: 140px;
  border: 1px solid #e2e8f0;
  background: rgba(255, 255, 255, 0.92);
  padding: 9px 12px;
  font-size: 0.9rem;
  color: #17233c;
  border-radius: 10px;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.admin-billing-search-input::placeholder {
  color: #94a3b8;
}

.admin-billing-search-input:hover {
  border-color: #d0dbe8;
}

.admin-billing-search-input:focus {
  outline: none;
  border-color: #4f7cff;
  background: #fff;
  box-shadow:
    inset 0 1px 2px rgba(15, 23, 42, 0.04),
    0 0 0 3px rgba(79, 124, 255, 0.1);
}

.admin-billing-search-clear {
  flex-shrink: 0;
  padding: 8px 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #64748b;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 10px;
  transition: color 0.15s ease, background 0.15s ease;
}

.admin-billing-search-clear:hover {
  color: #1e3a5f;
  background: rgba(255, 255, 255, 0.75);
  text-decoration: none;
}

.admin-billing-search-submit {
  flex-shrink: 0;
  margin-left: auto;
  padding: 9px 18px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  color: #fff;
  background: #17233c;
  box-shadow: 0 2px 8px rgba(23, 35, 60, 0.12);
  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.admin-billing-search-submit:hover {
  background: #243351;
}

.admin-billing-search-submit:focus {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(79, 124, 255, 0.25),
    0 2px 8px rgba(23, 35, 60, 0.12);
}

.admin-billing-search-submit:active {
  transform: translateY(1px);
}

.admin-billing-tab {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  color: #475569;
  background: transparent;
  border: 1px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.admin-billing-tab:hover {
  background: rgba(255, 255, 255, 0.85);
  color: #17233c;
  border-color: #dce6f2;
}

.admin-billing-tab.is-active {
  background: #17233c;
  color: #fff;
  box-shadow: 0 2px 8px rgba(23, 35, 60, 0.12);
}

.admin-billing-section {
  padding: 26px 28px;
}

.admin-billing-section__header.admin-card-header {
  align-items: flex-start;
  margin-bottom: 20px;
}

.admin-billing-section__head {
  flex: 1;
  min-width: 0;
}

.admin-billing-section__head h2 {
  margin: 0 0 6px;
  font-size: 1.22rem;
  letter-spacing: -0.02em;
}

.admin-billing-section .admin-card-sub {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.5;
  color: #64748b;
}

.admin-billing-kind-badge {
  flex-shrink: 0;
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #3d5a80;
  background: linear-gradient(135deg, #eef4fb 0%, #e8f0f8 100%);
  border: 1px solid #d8e4f2;
}

.admin-billing-empty {
  margin: 0;
  padding: 28px 20px;
  text-align: center;
  color: #64748b;
  font-size: 0.96rem;
  line-height: 1.55;
  background: #fafbfd;
  border-radius: 16px;
  border: 1px dashed #dbe3ef;
}

.admin-billing-table-wrap {
  margin: 0 -4px;
  padding: 4px;
  border-radius: 18px;
  background: #f8fafc;
  border: 1px solid #e9eef5;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.admin-billing-table-wrap .admin-table {
  width: 100%;
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 0;
}

.admin-billing-table--unified.admin-table {
  min-width: 980px;
}

.admin-billing-th-type {
  width: 1%;
  white-space: nowrap;
}

.admin-billing-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-billing-type-badge--project {
  color: #1e3a5f;
  background: #e8f1fb;
  border: 1px solid #c5daf0;
}

.admin-billing-type-badge--maintenance {
  color: #5c4d0f;
  background: #fdf6e3;
  border: 1px solid #ecd9a8;
}

.admin-billing-row--project td {
  border-left: 3px solid transparent;
}

.admin-billing-row--project td:first-child {
  border-left-color: #3b82f6;
}

.admin-billing-row--maintenance td {
  border-left: 3px solid transparent;
}

.admin-billing-row--maintenance td:first-child {
  border-left-color: #d97706;
}

.admin-billing-table thead th {
  padding: 12px 16px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
  text-align: left;
  border-bottom: 2px solid #e4ebf4;
  background: #fff;
}

.admin-billing-table thead th:first-child {
  border-radius: 14px 0 0 0;
}

.admin-billing-table thead th:last-child {
  border-radius: 0 14px 0 0;
}

.admin-billing-th-actions {
  text-align: right;
  min-width: 300px;
}

.admin-billing-table tbody td {
  padding: 16px 16px 18px;
  vertical-align: top;
  font-size: 0.94rem;
  line-height: 1.5;
  color: #334155;
  border-bottom: 1px solid #eef2f7;
  background: #fff;
}

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

.admin-billing-table tbody tr:hover td {
  background: #fbfcfe;
}

.admin-billing-cell-date {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: #475569;
}

/* td mag geen flex zijn: anders vreemde achtergrond-vakken in de tabel */
.admin-billing-table tbody td.admin-billing-cell-main {
  display: table-cell;
  vertical-align: top;
  max-width: 420px;
}

.admin-billing-table tbody td.admin-billing-cell-main > * + * {
  margin-top: 8px;
}

.admin-billing-cell-title {
  display: block;
  font-weight: 700;
  font-size: 0.96rem;
  line-height: 1.45;
  color: #102348;
}

.admin-billing-ref {
  font-weight: 600;
  color: #64748b;
}

.admin-billing-install-line {
  display: block;
  font-size: 0.9rem;
  line-height: 1.45;
}

.admin-billing-cell-main .admin-projects-link {
  font-size: 0.88rem;
  font-weight: 600;
}

.admin-billing-actions-maintenance {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 12px;
}

.admin-billing-actions-maintenance .admin-billing-inline-form {
  flex: 1 1 180px;
  min-width: 0;
}

.admin-billing-maintenance-invoice-blocked {
  margin: 0;
  max-width: 280px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #64748b;
  text-align: right;
}

.admin-billing-muted {
  font-size: 0.88rem;
  color: #64748b;
}

.admin-billing-actions {
  min-width: 280px;
  vertical-align: middle !important;
}

.admin-billing-table tbody td.admin-table-actions.admin-billing-actions {
  display: table-cell;
  vertical-align: middle;
}

.admin-billing-actions .admin-billing-inline-form {
  justify-content: flex-end;
}

.admin-billing-inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px 12px;
}

@media (max-width: 1100px) {
  .admin-billing-th-actions {
    min-width: 240px;
  }

  .admin-billing-actions {
    min-width: 200px;
  }

  .admin-billing-inline-form {
    justify-content: flex-start;
  }

  .admin-billing-actions-maintenance {
    justify-content: flex-start;
  }

  .admin-billing-maintenance-invoice-blocked {
    text-align: left;
  }
}

@media (max-width: 960px) {
  .admin-billing-overview-toolbar {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .admin-billing-overview-filters,
  .admin-billing-overview-search,
  .admin-billing-overview-tabs {
    justify-self: stretch;
  }

  .admin-billing-overview-search {
    max-width: none;
  }

  .admin-billing-overview-tabs {
    justify-content: flex-start;
  }
}

.admin-billing-date {
  max-width: 150px;
  padding: 9px 11px;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  font-size: 0.88rem;
}

.admin-billing-note-input {
  min-width: 120px;
  flex: 1 1 140px;
  max-width: 240px;
  padding: 9px 11px;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  font-size: 0.88rem;
}

/* ---------- TABS ---------- */

.admin-maintenance-tabs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  margin-bottom: 24px;
  background: #eef4fb;
  border: 1px solid #dce6f2;
  border-radius: 16px;
}

.admin-maintenance-tabs[hidden] {
  display: none !important;
}

.admin-maintenance-tab {
  border: none;
  background: transparent;
  color: #4b607d;
  padding: 11px 18px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.admin-maintenance-tab:hover {
  background: rgba(255, 255, 255, 0.65);
  color: #183153;
}

.admin-maintenance-tab.active {
  background: #ffffff;
  color: #163b74;
  box-shadow: 0 8px 18px rgba(19, 47, 96, 0.08);
}

.admin-maintenance-tab-panel {
  display: none;
}

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

/* Website-beheer (admin/company-website.php): tabs boven secties */
.admin-company-website-tabs-wrap .admin-company-website-tabs {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Sticky toolbar: tabbladen links, acties rechts, één regel waar mogelijk */
.admin-company-website-page {
  /* Fallback tot JS de hoogte van .admin-topbar meet (tweede rij + titel = vaak > 88px). */
  --cw-sticky-under-topbar: 128px;
}

.admin-company-website-sticky-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  position: -webkit-sticky;
  position: sticky;
  top: var(--cw-sticky-under-topbar, 128px);
  /* Onder de topbar (50), boven de meeste pagina-inhoud */
  z-index: 44;
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0 0 6px;
  padding: 10px 0 12px;
  background: #f6f8fc;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.07);
}

.admin-company-website-sticky-toolbar__tabs {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
}

.admin-company-website-sticky-toolbar .admin-maintenance-tabs {
  margin-bottom: 0;
}

.admin-company-website-sticky-toolbar__actions.admin-page-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 0;
  flex: 0 1 auto;
  min-width: 0;
}

.admin-company-website-sticky-toolbar__actions .admin-page-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

@media (max-width: 900px) {
  .admin-company-website-sticky-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-company-website-sticky-toolbar__actions .admin-page-header-actions {
    justify-content: flex-start;
  }
}

.admin-page-header-actions .admin-company-website-reset-form {
  display: flex;
  margin: 0;
  align-items: center;
}

.admin-company-website-reset-btn {
  white-space: nowrap;
}

.admin-company-website-tab-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Website-beheer: live voorbeeld naast formulier */
.admin-company-website-locale-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-bottom: 14px;
  padding: 12px 16px;
  background: #f1f5f9;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  font-size: 0.95rem;
}

.admin-company-website-locale-bar__lab {
  font-weight: 600;
  color: #0f172a;
}

.admin-company-website-locale-bar__link {
  font-weight: 600;
  color: #4f7cff;
  text-decoration: none;
}

.admin-company-website-locale-bar__link:hover {
  text-decoration: underline;
}

.admin-company-website-locale-bar__link.is-active {
  color: #0f172a;
  pointer-events: none;
  text-decoration: none;
}

.admin-company-website-locale-bar__sep {
  color: #94a3b8;
  user-select: none;
}

.admin-company-website-locale-bar__hint {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.88rem;
  color: #64748b;
  line-height: 1.45;
}

.admin-company-website-live-layout {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Website-beheer: layout is één kolom; sticky-balk is direct kind (betrouwbare position:sticky). */
.admin-company-website-page .admin-company-website-live-layout {
  flex-direction: column;
  align-items: stretch;
}

.admin-company-website-editor-col {
  flex: 1 1 46%;
  min-width: 0;
  max-width: 100%;
}

.admin-company-website-preview-col {
  flex: 1 1 52%;
  min-width: 280px;
  max-width: 100%;
  position: sticky;
  top: 76px;
  align-self: flex-start;
}

.admin-company-website-preview-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.admin-company-website-preview-bar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  margin-left: auto;
  min-width: 0;
}

/* Alleen in pseudo-fullscreen: knop in de balk ligt boven de overlay; header-knop niet bereikbaar. */
.cw-preview-fs-overlay-btn {
  display: none !important;
}

.admin-company-website-preview-wrap--pseudo-fullscreen .cw-preview-fs-overlay-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

.admin-company-website-preview-fs-btn {
  flex-shrink: 0;
}

.admin-company-website-preview-bar-title {
  font-weight: 800;
  font-size: 0.95rem;
  color: #17233c;
}

.admin-company-website-preview-status {
  font-size: 0.85rem;
  color: #64748b;
}

.admin-company-website-preview-status.is-error {
  color: #b91c1c;
  font-weight: 600;
}

.cw-stijlen-logo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.cw-stijlen-logo-preview {
  flex: 0 0 auto;
  min-width: 120px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}

.cw-stijlen-logo-preview-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #2b59c3, #0284c7);
}

.cw-stijlen-logo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.admin-vis-modal__crop-wrap {
  margin-top: 12px;
  max-height: min(55vh, 480px);
  background: #0f172a;
  border-radius: 10px;
  overflow: hidden;
}

.admin-vis-modal__crop-img {
  display: block;
  max-width: 100%;
}

/* Vaste bevestiging onderaan (Stijlen en logo / URL & publicatie); verdwijnt na enkele seconden. */
.admin-company-website-save-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 80;
  max-width: min(440px, calc(100vw - 32px));
  padding: 12px 20px;
  border-radius: 12px;
  background: #0f172a;
  color: #f8fafc;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.28);
  pointer-events: none;
}

.admin-company-website-save-toast.admin-company-website-save-toast--error {
  background: #7f1d1d;
  color: #fecaca;
}

.admin-company-website-settings-status {
  margin: 0 0 14px;
  min-height: 1.3em;
}

.admin-company-website-preview-frame {
  display: block;
  width: 100%;
  height: min(86vh, 960px);
  border: 1px solid #dbe3ef;
  border-radius: 16px;
  background: #f8fafc;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
}

.admin-company-website-preview-placeholder {
  margin: 0;
  padding: 20px 16px;
  border: 1px dashed #cbd5e1;
  border-radius: 16px;
  background: #f8fafc;
  color: #64748b;
  font-size: 0.95rem;
  line-height: 1.5;
}

.admin-company-website-preview-wrap--tab {
  margin-top: 4px;
}

.admin-company-website-preview-wrap--tab .admin-company-website-preview-frame {
  height: min(82vh, 900px);
}

/*
 * Live voorbeeld — «volledig scherm» zonder native Fullscreen API:
 * die zet het element in een aparte browsertoplaag, waardoor admin-modals
 * (z-index ~12000) achter het voorbeeld verdwijnen. Hier: fixed overlay met
 * z-index onder de modals.
 */
html.admin-company-website-preview-fs-lock,
html.admin-company-website-preview-fs-lock body {
  overflow: hidden;
  height: 100%;
}

.admin-company-website-preview-wrap--pseudo-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 11000;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  max-width: 100vw;
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  margin: 0;
  padding: 14px 16px 16px;
  background: #e8edf5;
  border-radius: 0;
}

.admin-company-website-preview-wrap--pseudo-fullscreen .admin-company-website-preview-bar {
  flex: 0 0 auto;
  margin-bottom: 12px;
}

.admin-company-website-preview-wrap--pseudo-fullscreen > .admin-company-website-locale-bar {
  flex: 0 0 auto;
  margin-top: 0;
  margin-bottom: 12px;
  max-width: 100%;
}

.admin-company-website-preview-wrap--pseudo-fullscreen .admin-company-website-preview-frame {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: auto !important;
  max-height: none;
  min-height: 200px;
}

/* Off-screen formulier voor live bewerken: zonder overflow verborgt dit blok
   de pagina-scroll (absolute descendants tellen mee voor scroll overflow). */
.admin-company-website-tab-panel[data-company-website-tab-panel="instellingen"],
.admin-company-website-tab-panel[data-company-website-tab-panel="stijlen"] {
  position: relative;
  overflow: hidden;
}

/* Off-screen velden buiten tab-panels: geen extra pagina-scroll door absolute kinderen. */
.admin-company-website-offscreen-fields-host {
  position: relative;
  overflow: hidden;
  height: 0;
  width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.admin-company-website-hidden-maint {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 960px;
  z-index: 0;
  pointer-events: auto;
}

/* Hero trust strip (icoon + tekst per regel) */
.admin-hero-trust-strip-wrap {
  margin-top: 8px;
}

.admin-hero-trust-strip-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}

.admin-hero-trust-strip__row {
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr auto;
  gap: 12px;
  align-items: center;
}

.admin-hero-trust-strip__row .admin-hero-trust-strip__remove {
  flex-shrink: 0;
  white-space: nowrap;
}

.admin-vis-modal__dialog--hero-trust {
  max-width: 560px;
  width: min(560px, 94vw);
  overflow: visible;
}

/* Hero trust: custom icoon-dropdown (previews in lijst; native <select> kan geen SVG) */
.admin-hero-trust-icon-dd {
  position: relative;
  width: 100%;
  min-width: 0;
}

.admin-hero-trust-icon-dd--open {
  z-index: 40;
}

.admin-hero-trust-icon-dd__trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.admin-hero-trust-icon-dd__trigger-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0f172a;
}

.admin-hero-trust-icon-dd__trigger-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.admin-hero-trust-icon-dd__trigger-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-hero-trust-icon-dd__chev {
  flex-shrink: 0;
  font-size: 0.7rem;
  color: #64748b;
  line-height: 1;
}

.admin-hero-trust-icon-dd__popover {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 50;
  max-height: min(280px, 52vh);
  overflow-y: auto;
  padding: 6px;
  margin: 0;
  list-style: none;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.14);
  box-sizing: border-box;
}

/* Fixed aan viewport: ontsnapt aan overflow (modal scroll / .visibo-hero-trust-modal-rows) */
.admin-hero-trust-icon-dd__popover.admin-hero-trust-icon-dd__popover--fixed {
  position: fixed !important;
  z-index: 12150;
  right: auto;
}

.admin-hero-trust-icon-dd__option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 0 4px;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: #0f172a;
  box-sizing: border-box;
}

.admin-hero-trust-icon-dd__option:last-child {
  margin-bottom: 0;
}

.admin-hero-trust-icon-dd__option:hover,
.admin-hero-trust-icon-dd__option:focus-visible {
  background: #f1f5f9;
  outline: none;
}

.admin-hero-trust-icon-dd__option-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0f172a;
}

.admin-hero-trust-icon-dd__option-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.admin-hero-trust-icon-dd__option-label {
  flex: 1;
  min-width: 0;
}

.visibo-hero-trust-modal-rows {
  max-height: min(52vh, 420px);
  overflow-y: auto;
  padding-right: 4px;
  margin-bottom: 4px;
}

.visibo-hero-trust-modal__row {
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

@media (max-width: 720px) {
  .admin-hero-trust-strip__row {
    grid-template-columns: 1fr;
  }

  .admin-hero-trust-strip__row .admin-hero-trust-strip__remove {
    justify-self: start;
  }

  .visibo-hero-trust-modal__row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1180px) {
  .admin-company-website-live-layout {
    flex-direction: column;
  }

  .admin-company-website-preview-col {
    position: relative;
    top: 0;
    width: 100%;
  }

  .admin-company-website-preview-frame {
    height: min(70vh, 720px);
  }
}

/* ---------- GENERIC CARD ---------- */

.admin-card {
  background: #ffffff;
  border: 1px solid #e5ecf5;
  border-radius: 24px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.05);
}

.admin-card-header {
  padding: 24px 24px 20px;
  border-bottom: 1px solid #edf2f7;
}

.admin-card-header h3 {
  margin: 0 0 6px;
  font-size: 1.15rem;
  font-weight: 800;
  color: #183153;
}

.admin-card-header p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.55;
  color: #7687a1;
}

.admin-card-header-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

/* ---------- LAYOUT ---------- */

.admin-maintenance-layout {
  position: relative;
  min-height: calc(100vh - 220px);
  padding-right: 420px;
  transition: padding-right 0.28s ease;
}

.admin-maintenance-layout.drawer-closed {
  padding-right: 0;
}

.admin-maintenance-calendar-card {
  min-height: calc(100vh - 220px);
  overflow: hidden;
}

.maintenance-ajax-flash-mount {
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---------- AGENDA NAV ---------- */

.admin-maintenance-calendar-nav {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.admin-maintenance-calendar-nav span {
  font-weight: 800;
  color: #183153;
  white-space: nowrap;
}

.admin-maintenance-calendar-nav-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  max-width: min(100%, 620px);
}

.admin-maintenance-calendar-nav-arrows {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.admin-maintenance-cal-nav-btn {
  width: 38px;
  height: 38px;
  border: 1px solid #d9e3ef;
  background: #f8fbff;
  color: #24497d;
  border-radius: 12px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-sizing: border-box;
}

.admin-maintenance-cal-nav-btn:hover {
  background: #edf4ff;
  border-color: #c8d8ed;
}

.admin-maintenance-calendar-kind-filter,
.admin-maintenance-calendar-tech-filter {
  min-width: 132px;
  height: 38px;
  border: 1px solid #d9e3ef;
  border-radius: 12px;
  padding: 0 10px;
  font-weight: 700;
  background: #ffffff;
  color: #183153;
}

.admin-maintenance-calendar-tech-filter {
  min-width: 160px;
  max-width: 220px;
}

.admin-schedule-tech-heading {
  font-size: 0.82rem;
  font-weight: 700;
  color: #5a6b82;
  margin-bottom: 0.35rem;
}

.admin-schedule-tech-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
}

.admin-schedule-tech-cb-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: #183153;
  cursor: pointer;
}

.admin-schedule-tech-empty {
  font-size: 0.85rem;
  color: #5a6b82;
  margin: 0;
}

.admin-maintenance-project-schedule-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  white-space: nowrap;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(145deg, #2563c8 0%, #1a3d75 100%);
  box-shadow: 0 6px 16px rgba(26, 61, 117, 0.22);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.admin-maintenance-project-schedule-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(26, 61, 117, 0.28);
  filter: brightness(1.03);
}

.admin-maintenance-project-schedule-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(26, 61, 117, 0.2);
}

.admin-maintenance-project-schedule-btn:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

.admin-maintenance-maintenance-schedule-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  white-space: nowrap;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #0f766e;
  border: 1px solid #99f6e4;
  background: linear-gradient(145deg, #ecfdf5 0%, #ccfbf1 100%);
  box-shadow: 0 6px 16px rgba(13, 148, 136, 0.12);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.admin-maintenance-maintenance-schedule-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(13, 148, 136, 0.18);
  filter: brightness(1.02);
}

.admin-maintenance-maintenance-schedule-btn:active {
  transform: translateY(0);
}

.admin-maintenance-maintenance-schedule-btn:focus-visible {
  outline: 2px solid #14b8a6;
  outline-offset: 2px;
}

.admin-maintenance-task-schedule-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  white-space: nowrap;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #713f12;
  border: 1px solid #fde68a;
  background: linear-gradient(145deg, #fffbeb 0%, #fef3c7 100%);
  box-shadow: 0 6px 16px rgba(180, 83, 9, 0.12);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.admin-maintenance-task-schedule-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(180, 83, 9, 0.18);
  filter: brightness(1.02);
}

.admin-maintenance-task-schedule-btn:active {
  transform: translateY(0);
}

.admin-maintenance-task-schedule-btn:focus-visible {
  outline: 2px solid #d97706;
  outline-offset: 2px;
}

/* Modal «Taak of herinnering» — layout volgens ontwerp */
#maintenanceTaskScheduleModal .admin-maintenance-task-schedule-modal {
  max-width: min(540px, calc(100vw - 24px));
  width: 100%;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  box-shadow: 0 24px 52px rgba(15, 23, 42, 0.14);
  /* visible: project-combobox listbox onderaan mag buiten de modal-box vallen */
  overflow: visible;
  position: relative;
}

#maintenanceTaskScheduleModal .admin-maintenance-task-schedule-modal__close {
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  font-size: 1.15rem;
  line-height: 1;
  z-index: 2;
}

#maintenanceTaskScheduleModal .admin-maintenance-task-schedule-modal__close:hover {
  background: #f1f5f9;
  color: #0f172a;
}

#maintenanceTaskScheduleModal .admin-maintenance-task-schedule-modal__header {
  padding: 20px 52px 16px 22px;
  margin: 0;
  border-bottom: 1px solid #e8edf4;
  background: #ffffff;
}

#maintenanceTaskScheduleModal .admin-maintenance-task-schedule-modal__header h3 {
  border: none;
  padding: 0;
}

#maintenanceTaskScheduleModal .admin-maintenance-task-schedule-modal__head-brand {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

#maintenanceTaskScheduleModal .admin-maintenance-task-schedule-modal__head-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(145deg, #dbeafe 0%, #eff6ff 100%);
  color: #2563eb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.12rem;
  border: 1px solid #bfdbfe;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12);
}

#maintenanceTaskScheduleModal .admin-maintenance-task-schedule-modal__head-text h3 {
  margin: 0 0 6px;
  font-size: 1.22rem;
  font-weight: 800;
  color: #102348;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

#maintenanceTaskScheduleModal .admin-maintenance-task-schedule-modal__tagline {
  margin: 0;
  font-size: 0.9rem;
  color: #64748b;
  font-weight: 500;
  line-height: 1.45;
}

#maintenanceTaskScheduleModal .admin-maintenance-task-schedule-modal__body {
  padding: 18px 22px 10px;
}

#maintenanceTaskScheduleModal .admin-maintenance-task-schedule-modal__field {
  margin-bottom: 16px;
}

#maintenanceTaskScheduleModal .admin-maintenance-task-schedule-modal__field > label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #334155;
}

#maintenanceTaskScheduleModal .admin-required-mark {
  color: #dc2626;
  text-decoration: none;
  font-weight: 800;
}

#maintenanceTaskScheduleModal .admin-maintenance-task-schedule-modal__input-wrap {
  display: flex;
  align-items: stretch;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#maintenanceTaskScheduleModal .admin-maintenance-task-schedule-modal__input-wrap:focus-within {
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}

#maintenanceTaskScheduleModal .admin-maintenance-task-schedule-modal__input-icon {
  flex-shrink: 0;
  width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 0.95rem;
  background: #f8fafc;
  border-right: 1px solid #e8edf4;
}

#maintenanceTaskScheduleModal .admin-maintenance-task-schedule-modal__input-wrap--textarea .admin-maintenance-task-schedule-modal__input-icon {
  align-items: flex-start;
  padding-top: 12px;
}

#maintenanceTaskScheduleModal .admin-maintenance-task-schedule-modal__input-wrap--date .admin-maintenance-task-schedule-modal__input-icon {
  min-height: 44px;
  cursor: pointer;
}

#maintenanceTaskScheduleModal .admin-maintenance-task-schedule-modal__input,
#maintenanceTaskScheduleModal .admin-maintenance-task-schedule-modal__textarea {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 10px 12px;
  font-size: 0.92rem;
  color: #0f172a;
  outline: none;
}

#maintenanceTaskScheduleModal .admin-maintenance-task-schedule-modal__textarea {
  min-height: 104px;
  resize: vertical;
  line-height: 1.45;
}

#maintenanceTaskScheduleModal .admin-maintenance-task-schedule-modal__input::placeholder,
#maintenanceTaskScheduleModal .admin-maintenance-task-schedule-modal__textarea::placeholder {
  color: #94a3b8;
}

#maintenanceTaskScheduleModal .admin-maintenance-task-schedule-modal__input-wrap--date .admin-maintenance-task-schedule-modal__date {
  padding: 10px 12px;
}

/* Eén kalender-icoon (links); verberg Chromium/Safari picker-icoon — veld blijft aanklikbaar. */
#maintenanceTaskScheduleModal .admin-maintenance-task-schedule-modal__input-wrap--date .admin-maintenance-task-schedule-modal__date::-webkit-calendar-picker-indicator {
  opacity: 0;
  cursor: pointer;
}

#maintenanceTaskScheduleModal .admin-maintenance-task-schedule-modal__grid2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px 14px;
}

#maintenanceTaskScheduleModal .admin-maintenance-task-schedule-modal__grid2 .admin-maintenance-task-schedule-modal__field {
  min-width: 0;
}

#maintenanceTaskScheduleModal .admin-maintenance-task-schedule-modal__project-combo {
  width: 100%;
  min-width: 0;
}

#maintenanceTaskScheduleModal .admin-maintenance-task-schedule-modal__select-wrap {
  display: flex;
  align-items: stretch;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#maintenanceTaskScheduleModal .admin-maintenance-task-schedule-modal__select-wrap:focus-within {
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}

#maintenanceTaskScheduleModal .admin-maintenance-task-schedule-modal__select-icon {
  flex-shrink: 0;
  width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  background: #f8fafc;
  border-right: 1px solid #e8edf4;
  font-size: 0.92rem;
}

#maintenanceTaskScheduleModal .admin-maintenance-task-schedule-modal__select {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background-color: transparent;
  padding: 10px 12px;
  font-size: 0.92rem;
  font-weight: 600;
  color: #0f172a;
  cursor: pointer;
  outline: none;
}

#maintenanceTaskScheduleModal .admin-maintenance-task-schedule-modal__project-combo-row {
  display: flex;
  align-items: stretch;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#maintenanceTaskScheduleModal .admin-maintenance-task-schedule-modal__project-combo-row:focus-within {
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}

#maintenanceTaskScheduleModal .admin-maintenance-task-schedule-modal__project-combo-row .admin-maintenance-task-schedule-modal__select-icon {
  border-radius: 10px 0 0 10px;
}

#maintenanceTaskScheduleModal .admin-maintenance-task-schedule-modal__project-combo-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 10px 12px;
  font-size: 0.92rem;
  font-weight: 600;
  color: #0f172a;
  outline: none;
}

#maintenanceTaskScheduleModal .admin-maintenance-task-schedule-modal__project-combo-input::placeholder {
  font-weight: 500;
  color: #94a3b8;
}

#maintenanceTaskScheduleModal .admin-maintenance-task-schedule-modal__combo-chevron {
  flex-shrink: 0;
  width: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  border-left: 1px solid #e8edf4;
  background: #fafbfc;
  font-size: 0.75rem;
  pointer-events: none;
}

#maintenanceTaskScheduleModal .admin-maintenance-task-schedule-modal__project-combo .admin-quick-install-listbox {
  z-index: 10070;
}

#maintenanceTaskScheduleModal .admin-schedule-tech-wrap--cards .admin-schedule-tech-heading {
  margin-bottom: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #334155;
}

#maintenanceTaskScheduleModal .admin-schedule-tech-checkboxes--cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 480px) {
  #maintenanceTaskScheduleModal .admin-schedule-tech-checkboxes--cards {
    grid-template-columns: 1fr;
  }
}

#maintenanceTaskScheduleModal .admin-schedule-tech-cb-label--card {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

#maintenanceTaskScheduleModal .admin-schedule-tech-cb-label--card:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}

#maintenanceTaskScheduleModal .admin-schedule-tech-cb-label--card:has(input:checked) {
  border-color: #93c5fd;
  background: #f8fafc;
  box-shadow: 0 0 0 1px rgba(147, 197, 253, 0.35);
}

#maintenanceTaskScheduleModal .admin-schedule-tech-cb-label--card:has(input:focus-visible) {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

#maintenanceTaskScheduleModal .admin-schedule-tech-cb-label--card input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  accent-color: #2563eb;
  margin: 0;
}

#maintenanceTaskScheduleModal .admin-schedule-tech-avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 800;
  color: #ffffff;
}

#maintenanceTaskScheduleModal .admin-schedule-tech-avatar--tone-0 {
  background: linear-gradient(145deg, #3b82f6, #2563eb);
}

#maintenanceTaskScheduleModal .admin-schedule-tech-avatar--tone-1 {
  background: linear-gradient(145deg, #22c55e, #16a34a);
}

#maintenanceTaskScheduleModal .admin-schedule-tech-avatar--tone-2 {
  background: linear-gradient(145deg, #64748b, #475569);
}

#maintenanceTaskScheduleModal .admin-schedule-tech-avatar--tone-3 {
  background: linear-gradient(145deg, #a855f7, #7c3aed);
}

#maintenanceTaskScheduleModal .admin-schedule-tech-cb-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.25;
}

#maintenanceTaskScheduleModal .admin-maintenance-task-schedule-modal__footer {
  padding: 16px 22px 20px;
  margin: 0;
  border-top: 1px solid #e8edf4;
  border-radius: 0;
  background: #ffffff;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

#maintenanceTaskScheduleModal .admin-maintenance-task-schedule-modal__footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

#maintenanceTaskScheduleModal .admin-maintenance-task-schedule-modal__submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.admin-maintenance-kind-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-maintenance-kind-badge--project {
  background: #ede9fe;
  color: #5b21b6;
}

.admin-maintenance-slot-choice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-maintenance-slot-choice-actions .admin-btn {
  flex: 1 1 160px;
}

/* ---------- AGENDA ---------- */

.admin-week-calendar {
  width: 100%;
}

.admin-week-calendar-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.admin-week-calendar-scroll::-webkit-scrollbar {
  height: 10px;
}

.admin-week-calendar-scroll::-webkit-scrollbar-thumb {
  background: #cfd8e6;
  border-radius: 999px;
}

.admin-week-calendar-inner {
  min-width: 980px;
}

.admin-week-calendar-header,
.admin-week-calendar-body {
  display: grid;
  grid-template-columns: 78px repeat(7, minmax(125px, 1fr));
}

.admin-week-calendar-header {
  position: relative;
  z-index: 2;
  border-bottom: 1px solid #e7edf5;
  background: #f9fbfe;
}

/* Body komt na de header in de DOM en schildert er anders overheen (hoge z-index op events).
   Expliciete stacking + isolation zodat dagkoppen altijd boven het uurrooster blijven. */
.admin-week-calendar-scroll > .admin-week-calendar-inner > .admin-week-calendar-header {
  position: relative;
  z-index: 50;
  background: #f9fbfe;
}

.admin-week-calendar-scroll > .admin-week-calendar-inner > .admin-week-calendar-body {
  position: relative;
  z-index: 0;
  isolation: isolate;
}

.admin-week-time-col-head {
  border-right: 1px solid #edf2f7;
  background: #f9fbfe;
}

.admin-week-day-head {
  padding: 16px 8px 14px;
  text-align: center;
  border-left: 1px solid #edf2f7;
  font-size: 0.85rem;
  color: #6f8099;
  line-height: 1.35;
  background: #f9fbfe;
}

.admin-week-day-head strong {
  display: inline-block;
  margin-top: 2px;
  font-size: 1rem;
  color: #183153;
}

.admin-week-day-head.is-today {
  background: #f3f8ff;
}

.admin-week-day-head.has-agenda-mark {
  padding-bottom: 10px;
}

.admin-week-day-head.is-holiday {
  background: linear-gradient(180deg, rgba(254, 226, 226, 0.65) 0%, #f9fbfe 100%);
}

.admin-week-day-head.is-leave {
  background: linear-gradient(180deg, rgba(254, 243, 199, 0.65) 0%, #f9fbfe 100%);
}

.admin-week-day-head.is-today.has-agenda-mark.is-holiday {
  background: linear-gradient(180deg, rgba(254, 226, 226, 0.55) 0%, #f3f8ff 100%);
}

.admin-week-day-head.is-today.has-agenda-mark.is-leave {
  background: linear-gradient(180deg, rgba(254, 243, 199, 0.55) 0%, #f3f8ff 100%);
}

.admin-week-day-head__tag {
  display: block;
  margin-top: 6px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.admin-week-day-head.is-holiday .admin-week-day-head__tag {
  color: #b91c1c;
}

.admin-week-day-head.is-leave .admin-week-day-head__tag {
  color: #b45309;
}

.admin-week-day-head__mark {
  display: block;
  margin-top: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #475569;
  line-height: 1.25;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-week-day-col.has-agenda-mark.is-holiday {
  background: linear-gradient(180deg, rgba(254, 226, 226, 0.55) 0%, rgba(255, 255, 255, 0.92) 100%);
}

.admin-week-day-col.has-agenda-mark.is-leave {
  background: linear-gradient(180deg, rgba(254, 243, 199, 0.55) 0%, rgba(255, 255, 255, 0.92) 100%);
}

.admin-week-day-col.is-today.has-agenda-mark.is-holiday {
  background: linear-gradient(180deg, rgba(254, 226, 226, 0.5) 0%, rgba(249, 251, 255, 0.95) 100%);
}

.admin-week-day-col.is-today.has-agenda-mark.is-leave {
  background: linear-gradient(180deg, rgba(254, 243, 199, 0.5) 0%, rgba(249, 251, 255, 0.95) 100%);
}

/* Agenda-instellingen (feestdagen & verlof) */
.admin-agenda-settings-page .admin-settings-main {
  gap: 20px;
}

.admin-agenda-settings-surface {
  border: 1px solid #e7edf5;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 36px rgba(23, 35, 60, 0.05);
  overflow: hidden;
}

.admin-agenda-settings-surface .admin-card-header {
  padding: 22px 24px 0;
}

.admin-agenda-settings-surface .admin-card-header h2 {
  margin: 0 0 6px;
  font-size: 1.2rem;
  font-weight: 800;
  color: #102348;
  letter-spacing: -0.02em;
}

.admin-agenda-settings-surface .admin-card-header p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #64748b;
  max-width: 60ch;
}

.admin-agenda-settings-form {
  padding: 20px 24px 24px;
}

.admin-agenda-settings-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
  align-items: start;
}

.admin-agenda-settings-form__span-wide {
  grid-column: 1 / -1;
}

.admin-agenda-settings-form__footer {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #eef2f7;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-agenda-periods-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px 18px;
}

.admin-agenda-periods-header > div:first-child {
  flex: 1;
  min-width: min(100%, 220px);
}

.admin-agenda-periods-header .js-agenda-add-open {
  flex-shrink: 0;
}

.admin-agenda-periods-header h2 {
  margin: 0 0 6px;
}

.admin-agenda-empty {
  margin: 0 24px 24px;
  border-radius: 14px;
  border: 1px dashed #cbd5e1;
  background: #f8fafc;
}

.admin-agenda-table-wrap {
  padding: 0 24px 16px;
}

.admin-agenda-periods-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.admin-agenda-periods-table thead th {
  padding: 12px 20px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
}

.admin-agenda-periods-table tbody tr {
  transition: background 0.12s ease;
}

.admin-agenda-periods-table tbody tr:nth-child(even) {
  background: rgba(248, 250, 252, 0.65);
}

.admin-agenda-periods-table tbody tr:hover {
  background: rgba(241, 245, 249, 0.95);
}

.admin-agenda-periods-table tbody td {
  padding: 14px 20px;
  vertical-align: middle;
  border-bottom: 1px solid #eef2f7;
  font-size: 0.92rem;
  color: #1e293b;
}

.admin-agenda-date-cell {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-weight: 600;
  color: #334155;
}

.admin-agenda-desc-cell {
  color: #475569;
  line-height: 1.45;
  max-width: 320px;
}

.admin-agenda-col-actions {
  width: 1%;
  text-align: right;
  white-space: nowrap;
}

.admin-agenda-actions-cell {
  vertical-align: middle;
}

.admin-agenda-row-actions {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.admin-agenda-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  min-width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  box-sizing: border-box;
}

.admin-agenda-icon-btn .fa-solid {
  font-size: 0.88rem;
  line-height: 1;
}

.admin-agenda-icon-btn--danger {
  color: #b91c1c;
  border-color: rgba(185, 28, 28, 0.35);
  background: rgba(254, 242, 242, 0.9);
}

.admin-agenda-icon-btn--danger:hover {
  color: #991b1b;
  background: #fee2e2;
  border-color: rgba(185, 28, 28, 0.5);
}

.admin-agenda-edit-modal.admin-modal {
  width: min(520px, 100%);
}

.admin-agenda-settings-form--modal {
  padding: 0;
}

.admin-agenda-settings-form--modal .admin-modal-body {
  padding-top: 4px;
}

.admin-agenda-settings-form--modal .admin-agenda-settings-form__grid {
  margin-bottom: 0;
}

.admin-agenda-edit-modal .admin-maintenance-quick-grid {
  margin-bottom: 0;
}

.admin-agenda-settings-aside .admin-card-header h2 {
  margin: 0;
  font-size: 1.05rem;
}

.admin-agenda-aside-list {
  margin: 0;
  padding: 0 24px 22px 42px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #5c6b82;
}

.admin-agenda-aside-list li {
  margin-bottom: 10px;
}

.admin-agenda-aside-list li:last-child {
  margin-bottom: 0;
}

.admin-agenda-kind-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.admin-agenda-kind-badge--holiday {
  background: linear-gradient(180deg, #fee2e2 0%, #fecaca 100%);
  color: #991b1b;
  box-shadow: 0 1px 0 rgba(185, 28, 28, 0.12);
}

.admin-agenda-kind-badge--leave {
  background: linear-gradient(180deg, #fef3c7 0%, #fde68a 100%);
  color: #92400e;
  box-shadow: 0 1px 0 rgba(180, 83, 9, 0.12);
}

@media (max-width: 640px) {
  .admin-agenda-settings-form__grid {
    grid-template-columns: 1fr;
  }

  .admin-agenda-settings-form__footer {
    justify-content: stretch;
  }

  .admin-agenda-settings-form__footer .admin-btn {
    width: 100%;
  }

  .admin-agenda-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -8px;
    padding: 0 8px;
  }

  .admin-agenda-periods-table {
    min-width: 520px;
  }
}

.admin-week-calendar-body {
  position: relative;
  background: #ffffff;
}

.admin-week-calendar-body--multiday-rail {
  align-items: stretch;
}

.admin-week-rail-corner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 6px;
  min-height: 40px;
  border-right: 1px solid #edf2f7;
  border-bottom: 1px solid #e7edf5;
  background: linear-gradient(180deg, #faf5ff 0%, #f4f0ff 100%);
}

.admin-week-rail-corner__label {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6d28d9;
  line-height: 1.25;
  text-align: center;
}

.admin-week-rail-corner--tasks {
  background: linear-gradient(180deg, #fffbeb 0%, #fff7ed 100%);
}

.admin-week-rail-corner--tasks .admin-week-rail-corner__label {
  color: #b45309;
}

.admin-week-rail-span-host {
  grid-column: 2 / -1;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  padding: 0 0 8px;
  border-bottom: 1px solid #e7edf5;
  background: #fafaff;
}

.admin-week-rail-span-host--tasks {
  background: #fffdfb;
}

.admin-week-rail-span-host--under-tasks {
  border-top: 1px solid #e2e8f0;
}

.admin-week-rail-span-bg-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  min-height: 6px;
}

.admin-week-rail-span-bg-cell {
  border-left: 1px solid #edf2f7;
}

.admin-week-rail-span-bg-cell:first-child {
  border-left: none;
}

.admin-week-rail-span-bg-cell.is-today {
  background: rgba(59, 130, 246, 0.08);
}

.admin-week-rail-span-bg-cell.has-agenda-mark.is-holiday {
  background: linear-gradient(180deg, rgba(254, 226, 226, 0.5) 0%, rgba(250, 250, 255, 0.4) 100%);
}

.admin-week-rail-span-bg-cell.has-agenda-mark.is-leave {
  background: linear-gradient(180deg, rgba(254, 243, 199, 0.5) 0%, rgba(250, 250, 255, 0.4) 100%);
}

.admin-week-rail-span-lanes {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px 0 0;
}

.admin-week-rail-lane {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: stretch;
  column-gap: 0;
  min-height: 34px;
}

.admin-week-rail-span-cell {
  min-width: 0;
}

.admin-week-rail-bar.admin-week-rail-bar--span {
  width: 100%;
  min-height: 34px;
  align-items: center;
}

.admin-week-rail-bar.is-schedule-kind-project.admin-week-rail-bar--span {
  min-height: 50px;
  align-items: flex-start;
}

.admin-week-rail-bar {
  position: relative;
  width: 100%;
  margin: 0;
  border: none;
  border-radius: 10px;
  padding: 5px 8px 6px 10px;
  padding-right: 14px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.05);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.admin-week-rail-bar__resize {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 12px;
  z-index: 4;
  cursor: ew-resize;
  border-radius: 0 10px 10px 0;
  background: linear-gradient(to left, rgba(15, 23, 42, 0.12), transparent);
  touch-action: none;
}

.admin-week-rail-bar__resize:hover {
  background: linear-gradient(to left, rgba(15, 23, 42, 0.2), transparent);
}

.admin-week-rail-bar:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.admin-week-rail-bar.is-schedule-kind-project {
  border-left: 4px solid #64748b;
}

/* Meerdaags: verschillende tinten per project (zelfde index = zelfde kleur op elke dag) */
.admin-week-rail-bar.is-schedule-kind-project.is-schedule-priority-normal.admin-week-rail-bar--pal-0 {
  background: #f3e8ff;
  color: #5b21b6;
  border-left-color: #7c3aed;
}

.admin-week-rail-bar.is-schedule-kind-project.is-schedule-priority-normal.admin-week-rail-bar--pal-1 {
  background: #e0f2fe;
  color: #075985;
  border-left-color: #0284c7;
}

.admin-week-rail-bar.is-schedule-kind-project.is-schedule-priority-normal.admin-week-rail-bar--pal-2 {
  background: #ccfbf1;
  color: #115e59;
  border-left-color: #0d9488;
}

.admin-week-rail-bar.is-schedule-kind-project.is-schedule-priority-normal.admin-week-rail-bar--pal-3 {
  background: #d1fae5;
  color: #065f46;
  border-left-color: #059669;
}

.admin-week-rail-bar.is-schedule-kind-project.is-schedule-priority-normal.admin-week-rail-bar--pal-4 {
  background: #fef3c7;
  color: #92400e;
  border-left-color: #d97706;
}

.admin-week-rail-bar.is-schedule-kind-project.is-schedule-priority-normal.admin-week-rail-bar--pal-5 {
  background: #ffe4e6;
  color: #9f1239;
  border-left-color: #e11d48;
}

.admin-week-rail-bar.is-schedule-kind-project.is-schedule-priority-normal.admin-week-rail-bar--pal-6 {
  background: #e0e7ff;
  color: #3730a3;
  border-left-color: #4f46e5;
}

.admin-week-rail-bar.is-schedule-kind-project.is-schedule-priority-normal.admin-week-rail-bar--pal-7 {
  background: #e2e8f0;
  color: #1e293b;
  border-left-color: #475569;
}

.admin-week-rail-bar.is-schedule-kind-project.is-schedule-priority-urgent {
  border-left-color: #dc2626;
  background: linear-gradient(160deg, #fff1f2 0%, #ffe4e6 45%, #fef2f2 100%);
  color: #881337;
}

.admin-week-rail-bar.is-schedule-kind-project.is-schedule-priority-high {
  border-left-color: #ea580c;
  background: linear-gradient(160deg, #fffbeb 0%, #ffedd5 55%, #fff7ed 100%);
  color: #9a3412;
}

.admin-week-rail-bar.is-schedule-kind-task {
  border-left: 4px solid #f59e0b;
  background: #fffbeb;
  color: #92400e;
}

.admin-week-rail-bar.is-schedule-kind-task.is-schedule-task-done {
  background: #ecfdf5;
  color: #166534;
  border-left-color: #22c55e;
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.22);
}

.admin-week-rail-bar.is-schedule-kind-task.is-schedule-task-done .admin-week-rail-bar__title {
  text-decoration: line-through;
  text-decoration-color: rgba(22, 101, 52, 0.45);
}

.admin-week-rail-bar.is-schedule-kind-task.is-schedule-task-done.is-schedule-priority-urgent,
.admin-week-rail-bar.is-schedule-kind-task.is-schedule-task-done.is-schedule-priority-high {
  background: #ecfdf5;
  color: #166534;
  border-left-color: #22c55e;
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.22);
}

.admin-week-rail-bar.is-schedule-kind-task.is-schedule-priority-urgent {
  border-left-color: #dc2626;
  background: linear-gradient(160deg, #fff1f2 0%, #ffe4e6 45%, #fef2f2 100%);
  color: #881337;
}

.admin-week-rail-bar.is-schedule-kind-task.is-schedule-priority-high {
  border-left-color: #ea580c;
  background: linear-gradient(160deg, #fffbeb 0%, #ffedd5 55%, #fff7ed 100%);
  color: #9a3412;
}

.admin-week-rail-bar__kind {
  flex-shrink: 0;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 6px;
  background: rgba(245, 158, 11, 0.2);
  color: #92400e;
  border: 1px solid rgba(217, 119, 6, 0.35);
}

.admin-week-rail-bar.is-schedule-kind-task.is-schedule-task-done .admin-week-rail-bar__kind {
  background: rgba(34, 197, 94, 0.15);
  color: #166534;
  border-color: rgba(22, 163, 74, 0.35);
}

.admin-week-rail-bar__time {
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.admin-week-rail-bar__time:empty {
  display: none;
}

.admin-week-rail-bar__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-week-rail-bar__assignee {
  flex: 1 1 100%;
  min-width: 0;
  margin-top: 2px;
  padding-right: 14px;
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1.25;
  color: rgba(15, 23, 42, 0.62);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-week-rail-bar__location {
  flex: 1 1 100%;
  min-width: 0;
  margin-top: 1px;
  padding-right: 14px;
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1.25;
  color: rgba(15, 23, 42, 0.52);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-week-rail-bar.is-schedule-kind-project.admin-week-rail-bar--span .admin-schedule-priority-pill {
  margin-top: 1px;
}

.admin-week-rail-bar .admin-schedule-priority-pill {
  flex-shrink: 0;
  font-size: 0.6rem;
  padding: 1px 5px;
}

.admin-week-time-col {
  display: grid;
  grid-template-rows: repeat(10, 64px);
  background: #fbfcfe;
  border-right: 1px solid #edf2f7;
}

.admin-week-time-slot {
  height: 64px;
  padding: 10px 10px 0 10px;
  border-bottom: 1px solid #edf2f7;
  font-size: 0.78rem;
  font-weight: 700;
  color: #7b8ca5;
}

/* Sluitlabel op de onderste lijn (bv. 18:00) zodat het einde van de werkdag zichtbaar is. */
.admin-week-time-end {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: auto;
  padding: 0 10px 4px;
  border-bottom: none;
  background: transparent;
}

.admin-week-day-col {
  position: relative;
  display: grid;
  grid-template-rows: repeat(10, 64px);
  border-left: 1px solid #edf2f7;
  background: #ffffff;
  /* Afspaken mogen niet buiten de kolom schilderen (box-shadow / slepen). */
  contain: paint;
}

.admin-week-day-col.is-today {
  background: #f9fbff;
}

.admin-week-grid-slot {
  border-bottom: 1px solid #edf2f7;
  position: relative;
}

/* Hover-indicator: toont op welke dag + uur je zou plannen. */
.admin-week-day-col[data-schedule-col-ymd]:hover {
  background: #f5f9ff;
}

.admin-week-day-col[data-schedule-col-ymd] .admin-week-grid-slot:hover {
  background: #e8f1ff;
  box-shadow: inset 3px 0 0 #2563eb;
  cursor: pointer;
}

.admin-week-day-col[data-schedule-col-ymd] .admin-week-grid-slot:hover::after {
  content: attr(data-date) " · " attr(data-hour);
  position: absolute;
  top: 4px;
  left: 6px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #2563eb;
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.28);
  pointer-events: none;
}

/* Dagkop oplichten die bij de gehoverde kolom hoort. */
.admin-week-day-head.is-hovered {
  background: #e8f1ff;
  box-shadow: inset 0 -3px 0 #2563eb;
  color: #1f2a44;
}

/* Verleden dagen: niet plannbaar — gedempt en gestreept. */
.admin-week-day-col.is-past {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(148, 163, 184, 0.10),
    rgba(148, 163, 184, 0.10) 6px,
    transparent 6px,
    transparent 12px
  );
  background-color: #f4f6f9;
}

.admin-week-day-col.is-past:hover {
  background-color: #f4f6f9;
}

.admin-week-day-col.is-past .admin-week-grid-slot {
  cursor: default;
}

.admin-week-day-col.is-past .admin-week-grid-slot:hover {
  background: transparent;
  box-shadow: none;
  cursor: default;
}

.admin-week-day-col.is-past .admin-week-grid-slot:hover::after {
  display: none;
}

.admin-week-day-head.is-past {
  color: #9aa7ba;
  background: #f4f6f9;
}

.admin-week-day-head.is-past.is-hovered {
  box-shadow: none;
  background: #f4f6f9;
}

/* ---------- WEERGAVESCHAKELAAR (dag/week/maand) ---------- */

.admin-cal-viewswitch {
  display: inline-flex;
  background: #eef2f8;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}

.admin-cal-viewswitch__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #5b6b85;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.admin-cal-viewswitch__btn:hover {
  color: #1f2a44;
}

.admin-cal-viewswitch__btn.is-active {
  background: #ffffff;
  color: #1f2a44;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

/* ---------- DAGWEERGAVE ---------- */

.admin-day-calendar .admin-week-calendar-inner {
  min-width: 0;
}

.admin-day-calendar .admin-week-calendar-header,
.admin-day-calendar .admin-week-calendar-body {
  grid-template-columns: 78px minmax(240px, 1fr);
}

/* ---------- MAANDWEERGAVE ---------- */

.admin-month-calendar {
  padding: 0 1.25rem 1.25rem;
}

.admin-month-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border: 1px solid #e7edf5;
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  background: #f9fbfe;
}

.admin-month-weekday {
  padding: 10px 8px;
  text-align: center;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6f8099;
  border-right: 1px solid #edf2f7;
}

.admin-month-weekday:last-child {
  border-right: none;
}

.admin-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border: 1px solid #e7edf5;
  border-radius: 0 0 12px 12px;
  overflow: hidden;
}

.admin-month-cell {
  min-height: 116px;
  padding: 6px 6px 8px;
  border-right: 1px solid #edf2f7;
  border-top: 1px solid #edf2f7;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  transition: background 0.12s ease;
}

.admin-month-cell:hover {
  background: #f5f9ff;
}

.admin-month-cell .admin-month-chip,
.admin-month-cell .admin-month-cell__day,
.admin-month-cell .admin-month-more {
  cursor: pointer;
}

/* Verleden dagen: niet plannbaar. */
.admin-month-cell.is-past {
  cursor: default;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(148, 163, 184, 0.09),
    rgba(148, 163, 184, 0.09) 6px,
    transparent 6px,
    transparent 12px
  );
  background-color: #f6f8fb;
}

.admin-month-cell.is-past:hover {
  background-color: #f6f8fb;
}

.admin-month-cell.is-past .admin-month-cell__day {
  color: #9aa7ba;
}

.admin-month-cell:nth-child(7n) {
  border-right: none;
}

.admin-month-grid > .admin-month-cell:nth-child(-n + 7) {
  border-top: none;
}

.admin-month-cell.is-outside {
  background: #fafbfd;
}

.admin-month-cell.is-outside .admin-month-cell__day {
  color: #b6c0d0;
}

.admin-month-cell.is-today {
  background: #f5f9ff;
}

.admin-month-cell.has-agenda-mark.is-holiday {
  background: #fff7ed;
}

.admin-month-cell.has-agenda-mark.is-leave {
  background: #f1f5ff;
}

.admin-month-cell__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.admin-month-cell__day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 4px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #3a4a66;
  text-decoration: none;
}

.admin-month-cell__day:hover {
  background: #e8eefb;
}

.admin-month-cell.is-today .admin-month-cell__day {
  background: #2563eb;
  color: #ffffff;
}

.admin-month-cell__tag {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #b45309;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 64px;
}

.admin-month-cell.has-agenda-mark.is-leave .admin-month-cell__tag {
  color: #4f63c4;
}

.admin-month-cell__events {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.admin-month-chip {
  display: flex;
  align-items: baseline;
  gap: 5px;
  width: 100%;
  border: none;
  border-left: 3px solid #94a3b8;
  border-radius: 5px;
  padding: 3px 6px;
  background: #eef2f8;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  font-size: 0.74rem;
  line-height: 1.25;
  color: #1f2a44;
}

.admin-month-chip:hover {
  filter: brightness(0.97);
}

.admin-month-chip__time {
  font-weight: 700;
  color: #475569;
  flex: 0 0 auto;
}

.admin-month-chip__title {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-month-chip.is-schedule-kind-maintenance {
  background: #eef6ff;
  border-left-color: #2563eb;
}

.admin-month-chip.is-schedule-kind-project {
  background: #f3f0ff;
  border-left-color: #7c3aed;
}

.admin-month-chip.is-schedule-kind-task {
  background: #fef9ec;
  border-left-color: #d97706;
}

.admin-month-chip.is-schedule-priority-urgent {
  border-left-color: #dc2626;
}

.admin-month-chip.is-schedule-priority-high {
  border-left-color: #ea580c;
}

.admin-month-more {
  font-size: 0.72rem;
  font-weight: 700;
  color: #2563eb;
  text-decoration: none;
  padding: 1px 6px;
}

.admin-month-more:hover {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .admin-month-cell {
    min-height: 84px;
  }

  .admin-month-chip__time {
    display: none;
  }
}

/* ---------- WERKUREN-INSTELLINGEN ---------- */

.admin-agenda-hours-form {
  padding: 18px 1.5rem 1.5rem;
}

.admin-agenda-hours-form__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
}

.admin-agenda-hours-form__submit {
  align-self: flex-end;
}

/* Kop met icoon-tegel. */
.admin-agenda-hours-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.admin-agenda-hours-head__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  font-size: 1.1rem;
  color: #2563eb;
  background: #dbeafe;
}

/* Live voorvertoning van het werkdagvenster. */
.admin-agenda-hours-preview {
  margin-top: 20px;
  padding: 16px 18px;
  border: 1px solid #e7edf5;
  border-radius: 14px;
  background: #f8fafc;
}

.admin-agenda-hours-preview__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.admin-agenda-hours-preview__label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-agenda-hours-preview__range {
  font-size: 1.05rem;
  font-weight: 800;
  color: #102348;
}

.admin-agenda-hours-preview__span {
  margin-left: auto;
  font-size: 0.85rem;
  font-weight: 700;
  color: #2563eb;
  background: #e0e7ff;
  padding: 2px 10px;
  border-radius: 999px;
}

.admin-agenda-hours-preview__track {
  position: relative;
  height: 14px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

.admin-agenda-hours-preview__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 33.33%;
  width: 41.66%;
  border-radius: 999px;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  transition: left 0.2s ease, width 0.2s ease;
}

.admin-agenda-hours-preview__ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 0.72rem;
  color: #94a3b8;
}

/* ---------- EVENTS ---------- */

.admin-calendar-event {
  position: absolute;
  border: none;
  border-radius: 16px;
  padding: 10px 10px 9px;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.admin-calendar-event:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 24px rgba(15, 23, 42, 0.12);
}

.admin-calendar-event .admin-schedule-event__time-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-bottom: 4px;
  line-height: 1.35;
}

.admin-calendar-event .admin-schedule-event__time-row .js-schedule-event-time {
  margin-bottom: 0;
  font-size: 0.74rem;
  font-weight: 800;
}

.admin-calendar-event .admin-schedule-event__time-row .js-schedule-event-time:empty {
  display: none;
}

.admin-calendar-event .admin-schedule-event__title {
  display: block;
  margin-bottom: 3px;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.35;
}

.admin-calendar-event small {
  display: block;
  line-height: 1.35;
  font-size: 0.72rem;
  opacity: 0.82;
  font-weight: 700;
}

.admin-calendar-event.is-blue {
  background: #dbeafe;
  color: #1e3a8a;
}

.admin-calendar-event.is-green {
  background: #dcfce7;
  color: #166534;
}

.admin-calendar-event.is-red {
  background: #fee2e2;
  color: #991b1b;
}

.admin-calendar-event.is-yellow {
  background: #fef3c7;
  color: #92400e;
}

.admin-calendar-event.is-purple {
  background: #ede9fe;
  color: #6b21a8;
}

/* Vaste kleuren: project (paars) vs onderhoud (turquoise) — weekagenda */
.admin-calendar-event.is-schedule-kind-project {
  background: #f3e8ff;
  color: #5b21b6;
  border-left: 4px solid #7c3aed;
  padding-left: 10px;
}

.admin-calendar-event.is-schedule-kind-maintenance {
  background: #ecfeff;
  color: #0e7490;
  border-left: 4px solid #06b6d4;
  padding-left: 10px;
}

.admin-calendar-event.is-schedule-kind-task {
  background: #fffbeb;
  color: #92400e;
  border-left: 4px solid #f59e0b;
  padding-left: 10px;
}

/* Taak op takenlijst afgevinkt: nog in weekagenda, visueel afgerond */
.admin-calendar-event.is-schedule-kind-task.is-schedule-task-done {
  background: #ecfdf5;
  color: #166534;
  border-left-color: #22c55e;
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.25);
}

.admin-calendar-event.is-schedule-kind-task.is-schedule-task-done .admin-schedule-event__title {
  text-decoration: line-through;
  text-decoration-color: rgba(22, 101, 52, 0.45);
}

.admin-calendar-event.is-schedule-kind-task.is-schedule-task-done.is-schedule-priority-urgent,
.admin-calendar-event.is-schedule-kind-task.is-schedule-task-done.is-schedule-priority-high {
  background: #ecfdf5;
  color: #166534;
  border-left-color: #22c55e;
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.25);
}

/* Agenda: gemarkeerd als gefactureerd (zelfde groene toon als afgeronde taak) */
.admin-calendar-event.is-schedule-billing-done {
  background: #ecfdf5 !important;
  color: #166534 !important;
  border-left-color: #22c55e !important;
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.25);
}

.admin-week-rail-bar.is-schedule-billing-done {
  background: #ecfdf5 !important;
  color: #166534 !important;
  border-left-color: #22c55e !important;
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.22);
}

.admin-btn.admin-btn--schedule-billing-active {
  background: #ecfdf5;
  border-color: #22c55e;
  color: #166534;
}

.admin-schedule-event__done-pill {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 2px 6px;
  border-radius: 6px;
  line-height: 1.2;
  flex-shrink: 0;
  background: #22c55e;
  color: #ffffff;
  border: 1px solid #16a34a;
}

.admin-schedule-task-list-status {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}

.admin-schedule-task-list-status__title {
  margin: 0 0 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #334155;
}

.admin-schedule-task-list-status__hint {
  margin: 0 0 8px;
  font-size: 0.82rem;
}

.admin-schedule-task-list-status__state {
  margin: 0 0 10px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.45;
}

.admin-schedule-task-list-status__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-schedule-task-list-status__actions[hidden] {
  display: none !important;
}

.admin-schedule-task-list-status__after {
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
}

.admin-schedule-task-list-status__after[hidden] {
  display: none !important;
}

.admin-schedule-task-list-status__after-text {
  margin: 0 0 10px;
  font-size: 0.88rem;
  line-height: 1.45;
  color: #14532d;
}

.admin-schedule-task-list-status__after.is-reopen-note {
  background: #eff6ff;
  border-color: #bfdbfe;
}

.admin-schedule-task-list-status__after.is-reopen-note .admin-schedule-task-list-status__after-text {
  color: #1e3a5f;
}

/* [hidden] op taaklijst-knoppen (display:inline-flex overschrijft anders [hidden]) */
.admin-schedule-task-list-status .admin-btn-sm[hidden],
#maintenanceEventModal .admin-maintenance-event-task-inline__actions .admin-btn-sm[hidden] {
  display: none !important;
}

.admin-schedule-event__kind-label {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 6px;
  line-height: 1.2;
  flex-shrink: 0;
  background: #fde68a;
  color: #92400e;
  border: 1px solid rgba(245, 158, 11, 0.55);
}

.admin-schedule-priority-pill {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 6px;
  line-height: 1.2;
  flex-shrink: 0;
}

.admin-calendar-event.is-schedule-priority-urgent .admin-schedule-priority-pill {
  background: #dc2626;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(127, 29, 29, 0.35);
}

.admin-calendar-event.is-schedule-priority-high .admin-schedule-priority-pill {
  background: #ea580c;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(154, 52, 18, 0.3);
}

.admin-calendar-event.is-schedule-kind-maintenance.is-schedule-priority-urgent,
.admin-calendar-event.is-schedule-kind-project.is-schedule-priority-urgent,
.admin-calendar-event.is-schedule-kind-task.is-schedule-priority-urgent {
  border-left-color: #dc2626;
  background: linear-gradient(160deg, #fff1f2 0%, #ffe4e6 45%, #fdf2f8 100%);
  color: #881337;
  box-shadow: 0 10px 22px rgba(220, 38, 38, 0.14);
}

.admin-calendar-event.is-schedule-kind-maintenance.is-schedule-priority-high,
.admin-calendar-event.is-schedule-kind-project.is-schedule-priority-high,
.admin-calendar-event.is-schedule-kind-task.is-schedule-priority-high {
  border-left-color: #ea580c;
  background: linear-gradient(160deg, #fffbeb 0%, #ffedd5 55%, #fff7ed 100%);
  color: #9a3412;
  box-shadow: 0 10px 20px rgba(234, 88, 12, 0.12);
}

.admin-schedule-context-menu {
  position: fixed;
  z-index: 10050;
  min-width: 188px;
  padding: 6px;
  margin: 0;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 14px 44px rgba(15, 23, 42, 0.18);
}

.admin-schedule-context-menu[hidden] {
  display: none !important;
}

.admin-schedule-context-menu__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  color: #b91c1c;
  cursor: pointer;
}

.admin-schedule-context-menu__item:hover,
.admin-schedule-context-menu__item:focus-visible {
  background: #fef2f2;
  outline: none;
}

.admin-calendar-event-wrap {
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
}

.admin-calendar-event-wrap.is-schedule-active {
  z-index: 19;
  opacity: 0.9;
}

/* Snap-indicator tijdens verslepen (halfuurs raster) */
.admin-week-calendar-snap-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 3px solid rgba(14, 116, 144, 0.98);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85);
  pointer-events: none;
  z-index: 22;
  margin-top: -1px;
}

.admin-calendar-event-wrap > .admin-calendar-event {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: auto;
  box-sizing: border-box;
}

.admin-calendar-event__resize {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10px;
  z-index: 4;
  cursor: ns-resize;
  border-radius: 0 0 14px 14px;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.14), transparent);
  touch-action: none;
}

.admin-calendar-event__resize:hover {
  background: linear-gradient(to top, rgba(15, 23, 42, 0.22), transparent);
}

body.is-schedule-dragging {
  user-select: none;
  cursor: grabbing;
}

body.is-schedule-dragging .admin-calendar-event-wrap {
  cursor: grabbing;
}

body.is-schedule-dragging .js-schedule-rail-event.is-schedule-rail-dragging {
  cursor: grabbing;
}

.js-schedule-rail-event[data-event-kind="task"] .admin-week-rail-bar.js-calendar-event-open,
.js-schedule-rail-event[data-event-kind="project"] .admin-week-rail-bar.js-calendar-event-open {
  cursor: grab;
}

.js-schedule-rail-event[data-event-kind="task"].is-schedule-rail-dragging .admin-week-rail-bar,
.js-schedule-rail-event[data-event-kind="project"].is-schedule-rail-dragging .admin-week-rail-bar {
  cursor: grabbing;
}

.js-schedule-rail-event.is-schedule-rail-dragging {
  opacity: 0.72;
}

.admin-week-day-head.is-schedule-rail-drop-hint,
.admin-week-day-col.is-schedule-rail-drop-hint {
  outline: 2px dashed rgba(124, 58, 237, 0.45);
  outline-offset: -2px;
}

/* ---------- RECHTER DRAWER ---------- */

.admin-maintenance-drawer {
  position: fixed;
  top: 145px;
  right: 0px;
  width: 390px;
  height: calc(100vh - 145px);
  background: #ffffff;
  border: 1px solid #e5ecf5;
  border-radius: 0px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
  transition: transform 0.28s ease, opacity 0.28s ease;
  /* Boven gewone content / kalenderstacking; onder .admin-topbar (90) zodat profieldropdown klikbaar blijft */
  z-index: 60;
}

.admin-maintenance-drawer.is-closed {
  transform: translateX(calc(100% + 24px));
  opacity: 0;
  pointer-events: none;
}

.admin-maintenance-drawer-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.admin-maintenance-drawer-header {
  padding: 22px 22px 16px;
  border-bottom: 1px solid #edf2f7;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-shrink: 0;
}

.admin-maintenance-drawer-header h3 {
  margin: 0 0 6px;
  font-size: 1.08rem;
  font-weight: 800;
  color: #183153;
}

.admin-maintenance-drawer-header p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #7888a0;
}

.admin-maintenance-drawer-lead {
  font-size: 0.82rem;
  line-height: 1.45;
  max-width: 42rem;
}

.admin-sidepanel-btn {
  width: 38px;
  height: 38px;
  border: 1px solid #d8e2ef;
  background: #f8fbff;
  color: #24497d;
  border-radius: 12px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 700;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.admin-sidepanel-btn:hover {
  background: #eef5ff;
  border-color: #c9d9ee;
}

.admin-maintenance-drawer-toolbar {
  padding: 16px 22px;
  border-bottom: 1px solid #edf2f7;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}
.admin-maintenance-queue-search {
  position: relative;
}

.admin-maintenance-queue-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.65;
  font-size: 0.92rem;
  pointer-events: none;
}

.admin-maintenance-queue-search input {
  width: 100%;
  height: 46px;
  border: 1px solid #d8e2ef;
  background: #ffffff;
  border-radius: 14px;
  padding: 0 14px 0 42px;
  font-size: 0.93rem;
  color: #183153;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.admin-maintenance-queue-search input:focus {
  border-color: #8bb3ea;
  box-shadow: 0 0 0 4px rgba(78, 132, 214, 0.12);
}

.admin-maintenance-queue-filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.admin-maintenance-queue-filters select {
  width: 100%;
  height: 42px;
  border: 1px solid #d8e2ef;
  background: #ffffff;
  border-radius: 12px;
  padding: 0 12px;
  font-size: 0.9rem;
  color: #183153;
  outline: none;
}

.admin-maintenance-drawer-list {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px 22px;
}

.admin-maintenance-drawer-list::-webkit-scrollbar {
  width: 10px;
}

.admin-maintenance-drawer-list::-webkit-scrollbar-thumb {
  background: #cfd8e6;
  border-radius: 999px;
}

/* ---------- LIJST ITEMS ---------- */

.admin-maintenance-list-line {
  background: #ffffff;
  border: 1px solid #e7edf5;
  border-radius: 20px;
  padding: 16px;
  margin-bottom: 14px;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.admin-maintenance-list-line:hover {
  transform: translateY(-1px);
  border-color: #d7e3f1;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.05);
}

.admin-maintenance-list-line.active {
  border-color: #2a5db0;
  box-shadow: 0 0 0 4px rgba(42, 93, 176, 0.08);
}

/* Compacte wachtrij-tegels (drawer + Opvolging) */
.admin-maintenance-list-line.admin-queue-tile {
  padding: 0;
  margin-bottom: 10px;
  border-radius: 12px;
  overflow: hidden;
}

.admin-maintenance-list-line.admin-queue-tile:hover {
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
}

.admin-queue-tile__hit {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  margin: 0;
  background: #fff;
  border: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  border-radius: inherit;
}

.admin-queue-tile__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.admin-queue-tile__badges {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.admin-queue-tile .admin-priority-badge {
  flex-shrink: 0;
  font-size: 0.65rem;
  padding: 0.2rem 0.45rem;
}

.admin-queue-tile .admin-maintenance-kind-badge--project {
  flex-shrink: 0;
  font-size: 0.62rem;
  padding: 0.2rem 0.45rem;
}

.admin-queue-tile__title {
  flex: 1;
  min-width: 0;
  font-weight: 800;
  font-size: 0.84rem;
  color: #2f588f;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.admin-queue-tile__sub {
  font-size: 0.78rem;
  color: #64748b;
  line-height: 1.3;
  margin-bottom: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.admin-queue-tile__due {
  font-size: 0.72rem;
  color: #94a3b8;
}

.admin-maintenance-queue-detail-modal {
  max-width: 520px;
  width: calc(100vw - 32px);
}

#maintenanceQueueDetailBody .admin-maintenance-line-type {
  margin-bottom: 10px;
}

.admin-queue-detail-footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}

.admin-maintenance-line-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.admin-maintenance-line-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-maintenance-line-main strong {
  font-size: 0.98rem;
  font-weight: 800;
  color: #183153;
  line-height: 1.35;
}

.admin-maintenance-line-main span {
  font-size: 0.89rem;
  color: #6f8098;
  line-height: 1.4;
}

.admin-maintenance-line-type {
  margin-bottom: 12px;
  font-size: 0.85rem;
  font-weight: 800;
  color: #2f588f;
  letter-spacing: 0.01em;
}

.admin-maintenance-line-extra {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}

.admin-maintenance-line-extra span {
  font-size: 0.85rem;
  line-height: 1.45;
  color: #71829a;
}

.admin-maintenance-line-contact {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #f6f9fc;
  border: 1px solid #e4eaf2;
}

.admin-maintenance-line-contact--empty {
  background: #fafbfc;
  border-style: dashed;
}

.admin-maintenance-line-contact__label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
  margin: 0 0 8px;
}

.admin-maintenance-line-contact__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px 14px;
  margin-bottom: 8px;
}

.admin-maintenance-line-contact__main {
  flex: 1;
  min-width: min(100%, 220px);
}

.admin-maintenance-line-contact__kind {
  margin-top: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748b;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  line-height: 1.35;
}

.admin-maintenance-line-contact__kind-sep {
  color: #94a3b8;
  user-select: none;
}

.admin-maintenance-line-contact__role {
  color: #475569;
  font-weight: 600;
}

.admin-maintenance-line-contact__row:last-of-type {
  margin-bottom: 0;
}

.admin-maintenance-line-contact__name {
  font-size: 0.9rem;
  font-weight: 700;
  color: #1a2744;
  min-width: 0;
}

.admin-maintenance-line-contact__channels {
  font-size: 0.86rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  color: #475569;
  flex-shrink: 0;
}

.admin-maintenance-line-contact__sep {
  color: #94a3b8;
  user-select: none;
}

.admin-maintenance-line-contact__link {
  color: #1d4ed8;
  font-weight: 600;
  text-decoration: none;
  word-break: break-word;
}

.admin-maintenance-line-contact__link:hover {
  text-decoration: underline;
}

.admin-maintenance-line-contact__none {
  font-size: 0.82rem;
  color: #94a3b8;
  font-style: italic;
}

.admin-maintenance-line-contact__more {
  margin: 8px 0 0;
  font-size: 0.8rem;
  color: #64748b;
}

.admin-maintenance-line-contact__hint {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: #5a6b85;
}

.admin-maintenance-line-contact__hint a {
  color: #1d4ed8;
  font-weight: 600;
  text-decoration: none;
}

.admin-maintenance-line-contact__hint a:hover {
  text-decoration: underline;
}

.admin-maintenance-line-remind {
  margin: 0 0 12px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #64748b;
  padding: 8px 10px;
  border-radius: 10px;
  background: #fffbeb;
  border: 1px solid #fde68a;
}

.admin-maintenance-line-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-list-project-btn,
.admin-list-plan-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.admin-list-project-btn {
  background: #eef4ff;
  color: #1b4e9b;
  border: 1px solid #d7e4fa;
}

.admin-list-project-btn:hover {
  background: #e2edff;
}

.admin-list-plan-btn {
  border: none;
  background: linear-gradient(135deg, #205ab0 0%, #173d7f 100%);
  color: #ffffff;
  box-shadow: 0 10px 20px rgba(26, 77, 151, 0.18);
}

.admin-list-plan-btn:hover {
  transform: translateY(-1px);
}

/* ---------- PRIORITY BADGES ---------- */

.admin-priority-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
}

.admin-priority-badge.is-urgent {
  background: #fee2e2;
  color: #991b1b;
}

.admin-priority-badge.is-high {
  background: #fef3c7;
  color: #92400e;
}

.admin-priority-badge.is-normal {
  background: #e0f2fe;
  color: #075985;
}

/* ---------- REOPEN BUTTON ---------- */

.admin-maintenance-drawer-reopen {
  position: fixed;
  top: 145px;
  right: 0;
  border: none;
  background: linear-gradient(135deg, #1f56aa 0%, #163b74 100%);
  color: #ffffff;
  border-radius: 14px 0 0 14px;
  padding: 16px 10px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(21, 57, 112, 0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 61;
}

.admin-maintenance-layout.drawer-closed .admin-maintenance-drawer-reopen {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 1259px) {
  .admin-maintenance-drawer {
    top: 163px;
    height: calc(100vh - 163px);
  }

  .admin-maintenance-drawer-reopen {
    top: 163px;
  }
}

@media (max-width: 990px) {
  .admin-maintenance-drawer {
    top: 159px;
    height: calc(100vh - 159px);
  }

  .admin-maintenance-drawer-reopen {
    top: 159px;
  }
}

/* ---------- OPVOLGING (onderhoudswachtrij) ---------- */

.admin-maintenance-followup-wrap {
  max-width: 1100px;
  margin: 0 auto;
}

.admin-maintenance-followup-card .admin-card-header h3 {
  font-size: 1.22rem;
}

.admin-maintenance-followup-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, #e9f3ff 0%, #dceaff 100%);
  color: #153d7a;
  font-weight: 800;
  font-size: 1.05rem;
  flex-shrink: 0;
}

.admin-maintenance-followup-toolbar {
  padding: 6px 24px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-bottom: 1px solid #edf2f7;
}

.admin-maintenance-followup-filters select {
  min-width: 0;
}

.admin-maintenance-followup-list {
  padding: 20px 24px 28px;
}

.admin-maintenance-followup-list .admin-maintenance-list-line {
  padding: 20px 22px;
  margin-bottom: 16px;
}

.admin-maintenance-followup-list .admin-maintenance-list-line.admin-queue-tile {
  padding: 0;
  margin-bottom: 10px;
}

.admin-maintenance-followup-list .admin-maintenance-line-extra {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px 20px;
}

.admin-maintenance-followup-empty {
  margin: 0 24px 24px;
  padding: 20px;
  text-align: center;
  font-size: 0.95rem;
  color: #64748b;
  background: #f8fafc;
  border-radius: 14px;
  border: 1px dashed #cbd5e1;
}

.admin-maintenance-queue-empty {
  margin: 0;
  padding: 18px 16px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #5a6b85;
  text-align: center;
}

.admin-maintenance-drawer-list .admin-maintenance-queue-empty {
  padding: 24px 12px;
}

@media (min-width: 900px) {
  .admin-maintenance-followup-toolbar {
    flex-direction: row;
    align-items: flex-end;
    flex-wrap: wrap;
  }

  .admin-maintenance-followup-toolbar .admin-maintenance-queue-search {
    flex: 1 1 280px;
    min-width: 200px;
  }

  .admin-maintenance-followup-toolbar .admin-maintenance-followup-filters {
    flex: 0 0 auto;
    width: auto;
    min-width: 280px;
  }
}

/* Legacy follow-up grid (niet meer gebruikt op maintenance.php) */
.admin-maintenance-followup-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.admin-followup-card {
  min-height: 180px;
}

.admin-followup-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  background: #e9f3ff;
  color: #1b4d99;
  font-weight: 800;
  font-size: 1rem;
}

.admin-followup-count.is-warning {
  background: #fff3d9;
  color: #9a6500;
}

/* ---------- MODALS ---------- */

body.modal-open {
  overflow: hidden;
}

.admin-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(3px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  /* Boven o.a. agenda-contextmenu (10050), anders worden klikken onderschept */
  z-index: 10200;
}

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

#maintenanceScheduleEmailModal.admin-modal-overlay {
  z-index: 10300;
}

#maintenanceDndEmailPromptModal.admin-modal-overlay {
  z-index: 10320;
}

.admin-modal--prompt {
  width: min(420px, 100%);
  max-width: 420px;
  max-height: none;
  overflow: visible;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.2);
  border: 1px solid #e2e8f0;
}

.admin-modal-header--prompt {
  padding: 12px 18px 8px;
  border-bottom: none;
}

.admin-modal-header--prompt h3 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  color: #1e3a5f;
}

.admin-modal--prompt .admin-modal-body {
  padding: 0 18px 12px;
}

.admin-modal-prompt-text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: #4a5568;
}

.admin-modal-footer--prompt {
  padding: 0 18px 14px;
  border-top: none;
  justify-content: flex-end;
}

.admin-modal-footer--prompt .admin-modal-footer-actions {
  gap: 10px;
}

.admin-schedule-email-placeholders-hint {
  font-size: 0.82rem;
  line-height: 1.45;
  margin-bottom: 12px;
}

.admin-schedule-email-placeholders-hint code {
  font-size: 0.78rem;
  background: #f1f5f9;
  padding: 1px 5px;
  border-radius: 4px;
}

.admin-modal {
  width: min(860px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.2);
  position: relative;
  /* Dunne, discrete scrollbar (Firefox) */
  scrollbar-width: thin;
  scrollbar-color: #b8c5d9 transparent;
}

/* Chromium / Safari: smalle rail, track bijna onzichtbaar */
.admin-modal::-webkit-scrollbar {
  width: 6px;
}

.admin-modal::-webkit-scrollbar-track {
  margin: 8px 0;
  background: transparent;
}

.admin-modal::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.45);
  border-radius: 999px;
}

.admin-modal::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.55);
}

.admin-modal--support-create {
  width: min(720px, 100%);
}

.admin-modal--support-create .admin-modal-body .admin-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 640px) {
  .admin-modal--support-create .admin-modal-body .admin-form-grid {
    grid-template-columns: 1fr;
  }
}

.admin-modal--customer-add,
.admin-modal--customer-add-v2 {
  --cust-accent: #2563eb;
  --cust-accent-hover: #1d4ed8;
  --cust-accent-ring: rgba(37, 99, 235, 0.22);
  --cust-border: #e2e8f0;
  --cust-border-focus: #2563eb;
  width: min(580px, 100%);
  border-radius: 12px;
  box-shadow:
    0 18px 36px rgba(15, 23, 42, 0.09),
    0 6px 12px rgba(15, 23, 42, 0.05);
}

.admin-modal-body--customer-add-v2 {
  padding: 0 12px 4px;
}

.admin-modal-close--round {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 1.2rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cust-border);
  background: #fff;
  color: #64748b;
}

.admin-modal-close--round:hover {
  background: #f8fafc;
  color: #0f172a;
}

.admin-modal-customer-add-form {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}

.admin-modal-customer-add__section {
  padding-top: 0;
}

.admin-modal-customer-add__section-title {
  margin: 6px 0 3px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.admin-modal-customer-add__section:first-of-type .admin-modal-customer-add__section-title {
  margin-top: 2px;
}

.admin-modal-customer-add__field {
  display: grid;
  grid-template-columns: minmax(100px, 132px) minmax(0, 1fr);
  gap: 4px 8px;
  align-items: center;
  padding: 3px 0;
  line-height: 1.32;
  border-bottom: 1px solid #f1f5f9;
}

.admin-modal-customer-add__field--type {
  align-items: center;
  padding: 1px 0 4px;
  border-bottom-color: #eef2f7;
}

.admin-modal-customer-add__field--stack,
.admin-modal-customer-add__field--notes,
.admin-modal-customer-add__field--pair-tall {
  align-items: start;
}

.admin-modal-customer-add__field--stack .admin-modal-customer-add__label,
.admin-modal-customer-add__field--notes .admin-modal-customer-add__label,
.admin-modal-customer-add__field--pair-tall .admin-modal-customer-add__label {
  padding-top: 4px;
}

.admin-modal-customer-add__label {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  padding-top: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: #475569;
}

.admin-modal-customer-add__label--plain {
  padding-top: 1px;
}

.admin-modal-customer-add__label > i {
  width: 1rem;
  text-align: center;
  color: #94a3b8;
  flex-shrink: 0;
  margin-top: 1px;
  font-size: 0.85rem;
}

.admin-modal-customer-add__control {
  min-width: 0;
}

.admin-modal-customer-add__control input[type='text'],
.admin-modal-customer-add__control input[type='email'],
.admin-modal-customer-add__control input[type='tel'],
.admin-modal-customer-add__control select,
.admin-modal-customer-add__control textarea {
  width: 100%;
  padding: 5px 9px;
  font-size: 0.8rem;
  border: 1px solid var(--cust-border);
  border-radius: 7px;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-modal-customer-add__control input:focus,
.admin-modal-customer-add__control select:focus,
.admin-modal-customer-add__control textarea:focus {
  outline: none;
  border-color: var(--cust-border-focus);
  box-shadow: 0 0 0 2px var(--cust-accent-ring);
}

.admin-modal-customer-add__control textarea {
  resize: vertical;
  min-height: 44px;
  line-height: 1.38;
}

.admin-modal-customer-add__hint {
  margin: 2px 0 0;
  font-size: 0.68rem;
  line-height: 1.32;
  color: #64748b;
}

.admin-modal-customer-add__input-phone {
  max-width: 200px;
}

.admin-modal-customer-add__input-bic {
  max-width: 200px;
}

.admin-modal-customer-add__inline-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 0;
  border-bottom: 1px solid #f1f5f9;
}

.admin-modal-customer-add__inline-pair--payment {
  grid-template-columns: 1fr 1fr;
}

.admin-modal-customer-add__inline-pair .admin-modal-customer-add__field--pair {
  border-bottom: none;
  padding-right: 8px;
}

.admin-modal-customer-add__inline-pair .admin-modal-customer-add__field--pair + .admin-modal-customer-add__field--pair {
  padding-right: 0;
  padding-left: 8px;
  border-left: 1px solid #eef2f7;
}

@media (max-width: 560px) {
  .admin-modal-customer-add__inline-pair {
    grid-template-columns: 1fr;
  }

  .admin-modal-customer-add__inline-pair .admin-modal-customer-add__field--pair + .admin-modal-customer-add__field--pair {
    padding-left: 0;
    border-left: none;
    padding-top: 0;
  }

  .admin-modal-customer-add__field {
    grid-template-columns: 1fr;
  }

  .admin-modal-customer-add__label {
    padding-top: 0;
  }
}

/* Segment toggles */
.admin-customer-type-segments {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.admin-customer-type-segment {
  position: relative;
  flex: 1 1 132px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  margin: 0;
  border: 2px solid var(--cust-border);
  border-radius: 9px;
  cursor: pointer;
  background: #fff;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.admin-customer-type-segment:hover {
  border-color: #cbd5e1;
}

.admin-customer-type-segment:has(.admin-customer-type-segment__input:checked) {
  border-color: var(--cust-accent);
  background: #eff6ff;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.14);
}

.admin-customer-type-segment__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.admin-customer-type-segment:focus-within {
  outline: none;
  box-shadow: 0 0 0 2px var(--cust-accent-ring);
}

.admin-customer-type-segment__icon {
  font-size: 0.95rem;
  color: #94a3b8;
  flex-shrink: 0;
}

.admin-customer-type-segment:has(.admin-customer-type-segment__input:checked) .admin-customer-type-segment__icon {
  color: var(--cust-accent);
}

.admin-customer-type-segment__text {
  flex: 1 1 auto;
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748b;
}

.admin-customer-type-segment:has(.admin-customer-type-segment__input:checked) .admin-customer-type-segment__text {
  color: #1e3a8a;
}

.admin-customer-type-segment__radio {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  flex-shrink: 0;
  position: relative;
}

.admin-customer-type-segment:has(.admin-customer-type-segment__input:checked) .admin-customer-type-segment__radio {
  border-color: var(--cust-accent);
  background: radial-gradient(circle, var(--cust-accent) 0%, var(--cust-accent) 44%, #fff 46%);
}

.admin-modal--customer-add-v2 .admin-btn--save-solid {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--cust-accent);
  border: none;
  color: #fff;
  border-radius: 7px;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
}

.admin-modal--customer-add-v2 .admin-btn--save-solid:hover {
  background: var(--cust-accent-hover);
  filter: none;
}

.admin-modal--customer-add-v2 .admin-modal-footer .admin-btn-secondary {
  padding: 6px 11px;
  font-size: 0.78rem;
  border-radius: 7px;
}

.admin-modal--customer-add-v2 .admin-modal-header {
  padding: 10px 38px 6px 12px;
  border-bottom-color: #e8edf4;
}

.admin-modal--customer-add-v2 .admin-modal-header h3 {
  margin: 0 0 3px;
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
}

.admin-modal--customer-add-v2 .admin-modal-header p {
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.4;
  color: #64748b;
}

.admin-customer-vat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: flex-end;
}

.admin-customer-vat-row__field {
  flex: 1 1 180px;
  min-width: 0;
}

.admin-customer-vat-row__field input[type='text'] {
  width: 100%;
  padding: 5px 9px;
  font-size: 0.8rem;
  border: 1px solid var(--cust-border);
  border-radius: 7px;
}

.admin-customer-vat-row__field .admin-modal-customer-add__hint {
  font-size: 0.68rem;
}

.admin-customer-vat-row__btn {
  flex: 0 0 auto;
}

.admin-modal--project-add {
  width: min(780px, 100%);
}

/* Project toevoegen: categorieën binnen het formulier */
.admin-modal--project-add form > .admin-modal__section {
  grid-column: 1 / -1;
  padding-bottom: 14px;
  margin: 0;
  border-bottom: 1px solid #edf2f7;
}

.admin-modal--project-add form > .admin-modal__section + .admin-modal__section {
  padding-top: 14px;
}

.admin-modal--project-add form > .admin-modal__section:has(+ .admin-modal-footer) {
  border-bottom: none;
  padding-bottom: 6px;
}

.admin-modal--project-add .admin-modal__section-title {
  margin: 0 0 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #62708a;
}

.admin-modal--project-add .admin-modal__section .admin-form-grid {
  width: 100%;
}

.admin-modal--file-template-add {
  width: min(560px, 100%);
}

/* Offerte/factuur aanmaken: ruimere modal */
.admin-modal--billing-add {
  width: min(1040px, 100%);
}

.admin-modal--billing-add .admin-billing-form--modal {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Kaarten in de modal: chrome wegnemen zodat ze als secties tonen */
.admin-modal--billing-add .admin-billing-form--modal > .admin-card {
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.admin-modal--billing-add .admin-billing-form--modal > .admin-card + .admin-card {
  padding-top: 16px;
  border-top: 1px solid #edf2f7;
}

.admin-modal--billing-add .admin-billing-form--modal .admin-card-header {
  padding: 0;
  margin: 0 0 12px;
  border: none;
}

.admin-modal--billing-add .admin-billing-form--modal .admin-card-header h2 {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #62708a;
  margin: 0;
}

.admin-modal--billing-add .admin-modal-footer {
  margin-top: 4px;
}

.admin-modal--billing-add .admin-modal-body,
.admin-billing-form .admin-form-grid {
  overflow: visible;
}

.admin-billing-client-project {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.admin-billing-client-project__divider {
  height: 1px;
  margin: 6px 0 12px;
  border: 0;
  background: linear-gradient(
    90deg,
    rgba(148, 163, 184, 0) 0%,
    rgba(148, 163, 184, 0.38) 14%,
    rgba(148, 163, 184, 0.38) 86%,
    rgba(148, 163, 184, 0) 100%
  );
}

.admin-billing-wizard-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
  padding-bottom: 14px;
  border-bottom: 1px solid #edf2f7;
}

.admin-billing-wizard-nav__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #64748b;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.admin-billing-wizard-nav__item:hover {
  background: #f8fafc;
  color: #1e3a5f;
}

.admin-billing-wizard-nav__item.is-active {
  border-color: rgba(79, 124, 255, 0.25);
  background: rgba(79, 124, 255, 0.08);
  color: #1e3a5f;
}

.admin-billing-wizard-nav__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 700;
}

.admin-billing-wizard-nav__item.is-active .admin-billing-wizard-nav__num {
  background: #4f7cff;
  color: #fff;
}

.admin-billing-wizard-nav__sep {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, #e2e8f0, transparent);
}

.admin-billing-wizard-step[hidden] {
  display: none !important;
}

.admin-billing-wizard-footer {
  margin-top: 8px;
}

.admin-billing-wizard-texts {
  margin-top: 4px;
}

.admin-billing-preview-card {
  margin-bottom: 0;
}

.admin-billing-preview-intro {
  margin: 0 0 12px;
  max-width: 640px;
}

.admin-billing-preview-status {
  margin-bottom: 10px;
  font-size: 0.88rem;
  color: #64748b;
}

.admin-billing-preview-status.is-error {
  color: #b91c1c;
}

.admin-billing-preview-status[hidden] {
  display: none !important;
}

.admin-billing-preview-frame-wrap {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #e8edf3;
  overflow: hidden;
  min-height: 480px;
}

.admin-billing-preview-frame {
  display: block;
  width: 100%;
  min-height: 480px;
  height: 58vh;
  max-height: 680px;
  border: 0;
  background: #e8edf3;
}

.admin-billing-collapsible {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 0 14px;
  background: #fafbfd;
}

.admin-billing-collapsible__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: #1e3a5f;
}

.admin-billing-collapsible__summary::-webkit-details-marker {
  display: none;
}

.admin-billing-collapsible__hint {
  font-size: 0.82rem;
  font-weight: 500;
  color: #64748b;
}

.admin-billing-collapsible__body {
  padding: 0 0 14px;
}

.admin-billing-combobox .admin-quick-install-search {
  width: 100%;
}

.admin-billing-combobox--clearable .admin-billing-combobox__field {
  position: relative;
}

.admin-billing-combobox--clearable .admin-quick-install-search {
  padding-right: 2.5rem;
}

.admin-billing-combobox__clear {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.admin-billing-combobox__clear:hover,
.admin-billing-combobox__clear:focus-visible {
  color: #1e3a5f;
  background: rgba(148, 163, 184, 0.18);
  outline: none;
}

.admin-billing-combobox__clear[hidden] {
  display: none !important;
}

.admin-billing-combobox .admin-quick-install-listbox {
  z-index: 10080;
}

.admin-billing-combobox__panel.admin-quick-install-listbox {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 280px;
  padding: 0;
}

/* display:flex overschrijft anders het native [hidden]-attribuut */
.admin-billing-combobox__panel.admin-quick-install-listbox[hidden] {
  display: none !important;
}

.admin-billing-combobox__options {
  margin: 0;
  padding: 6px 0;
  list-style: none;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: #a8bdd9 #eef3fa;
}

.admin-billing-combobox__options::-webkit-scrollbar {
  width: 8px;
}

.admin-billing-combobox__options::-webkit-scrollbar-track {
  margin: 6px 0;
  background: #eef3fa;
  border-radius: 999px;
}

.admin-billing-combobox__options::-webkit-scrollbar-thumb {
  background: #b8c9e0;
  border-radius: 999px;
  border: 2px solid #eef3fa;
}

.admin-billing-combobox__actions {
  margin: 0;
  padding: 4px 0 6px;
  list-style: none;
  flex-shrink: 0;
  border-top: 1px solid rgba(148, 163, 184, 0.35);
  background: #ffffff;
  box-shadow: 0 -6px 12px rgba(255, 255, 255, 0.92);
}

.admin-billing-combobox__sep {
  height: 0;
  margin: 6px 0 4px;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(148, 163, 184, 0.35);
  pointer-events: none;
}

.admin-billing-combobox__action {
  color: var(--admin-accent, #2563eb);
  font-weight: 600;
}

.admin-billing-combobox__action:hover,
.admin-billing-combobox__action.is-active {
  background: rgba(37, 99, 235, 0.08);
}

#customerAddModal.admin-modal-overlay {
  z-index: 10350;
}

#projectAddModal.admin-modal-overlay {
  z-index: 10360;
}

#billingProjectGroup[hidden] {
  display: none !important;
}

#maintenanceEventModal .admin-modal-header[data-dialog-drag-handle] {
  cursor: grab;
  user-select: none;
}

#maintenanceEventModal .admin-modal-header[data-dialog-drag-handle]:active {
  cursor: grabbing;
}

/* Event-modal: scroll alleen in de body; footer blijft klikbaar (geen overlap door flex/scroll). */
#maintenanceEventModal .admin-modal.admin-maintenance-quick-modal {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 32px);
  overflow: hidden;
}

#maintenanceEventModal .admin-modal.admin-maintenance-quick-modal > .admin-modal-header {
  flex-shrink: 0;
}

#maintenanceEventModal .admin-modal.admin-maintenance-quick-modal > #maintenanceEventEditForm {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

#maintenanceEventModal .admin-modal.admin-maintenance-quick-modal > #maintenanceEventEditForm > .admin-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

#maintenanceEventModal .admin-modal.admin-maintenance-quick-modal > #maintenanceEventEditForm > .admin-modal-footer {
  flex-shrink: 0;
  position: relative;
  z-index: 4;
  background: #ffffff;
}

/* --- Agenda afspraak-modal: 3-kolommen (Afspraak | Installatie | Facturatie), voorbeeld-layout --- */
#maintenanceEventModal .admin-modal.admin-maintenance-quick-modal.admin-maintenance-event-modal {
  max-width: min(1120px, calc(100vw - 24px));
  width: 100%;
  border-radius: 20px;
  background: #eef2f7;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.12);
}

#maintenanceEventModal .admin-maintenance-event-modal__header {
  padding: 18px 52px 14px 22px;
  background: #eef2f7;
  border-bottom: 1px solid #dde4ee;
  border-radius: 20px 20px 0 0;
}

#maintenanceEventModal .admin-modal.admin-maintenance-event-modal > .admin-modal-close {
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

#maintenanceEventModal .admin-modal.admin-maintenance-event-modal > .admin-modal-close:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f172a;
}

#maintenanceEventModal .admin-maintenance-event-modal__head-brand {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

#maintenanceEventModal .admin-maintenance-event-modal__head-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(145deg, #3b82f6 0%, #2563eb 100%);
  color: #fff;
  font-size: 1.1rem;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.35);
}

#maintenanceEventModal .admin-maintenance-event-modal__head-title {
  margin: 0 0 4px;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
  line-height: 1.2;
}

#maintenanceEventModal .admin-maintenance-event-modal__head-sub {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: #64748b;
  line-height: 1.4;
}

#maintenanceEventModal .admin-maintenance-event-modal__body {
  padding: 18px 22px 20px;
  background: #eef2f7;
}

#maintenanceEventModal .admin-maintenance-event-modal-layout {
  margin-bottom: 4px;
}

#maintenanceEventModal .admin-maintenance-event-panel .admin-quick-form-group label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
}

#maintenanceEventModal .admin-maintenance-event-panel .admin-quick-form-group input[type="text"],
#maintenanceEventModal .admin-maintenance-event-panel .admin-quick-form-group input[type="date"],
#maintenanceEventModal .admin-maintenance-event-panel .admin-quick-form-group input[type="datetime-local"],
#maintenanceEventModal .admin-maintenance-event-panel .admin-quick-form-group select,
#maintenanceEventModal .admin-maintenance-event-panel .admin-quick-form-group textarea {
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}

#maintenanceEventModal .admin-maintenance-event-panel .admin-quick-form-group input:focus,
#maintenanceEventModal .admin-maintenance-event-panel .admin-quick-form-group select:focus,
#maintenanceEventModal .admin-maintenance-event-panel .admin-quick-form-group textarea:focus {
  border-color: #93c5fd;
  background: #ffffff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

#maintenanceEventModal #eventEditDatetimeWrap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

#maintenanceEventModal #eventEditDatetimeWrap .admin-quick-form-group {
  margin-bottom: 0;
}

#maintenanceEventModal .admin-schedule-event-duration-hint {
  margin: 6px 0 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: #64748b;
}

@media (max-width: 520px) {
  #maintenanceEventModal #eventEditDatetimeWrap {
    grid-template-columns: minmax(0, 1fr);
  }
}

#maintenanceEventModal .admin-maintenance-event-3col {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 18px;
  align-items: stretch;
}

#maintenanceEventModal .admin-maintenance-event-3col--no-billing {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#maintenanceEventModal #maintenanceEventEditForm.is-agenda-edit-task .admin-maintenance-event-3col {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

#maintenanceEventModal #maintenanceEventEditForm.is-agenda-edit-task .admin-maintenance-event-3col--no-billing {
  grid-template-columns: minmax(0, 1fr);
}

#maintenanceEventModal #maintenanceEventEditForm.is-agenda-edit-task #maintenanceEventEditGegevens {
  display: none !important;
}

#maintenanceEventModal .admin-maintenance-event-col__eyebrow {
  margin: 0 0 8px 2px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #94a3b8;
}

#maintenanceEventModal .admin-maintenance-event-panel {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 16px 16px 14px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

#maintenanceEventModal .admin-maintenance-event-panel--billing {
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

#maintenanceEventModal .admin-maintenance-event-billing-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 16px 16px 14px;
  border-radius: 16px;
  border: 1px solid #bfdbfe;
  background: linear-gradient(165deg, #eff6ff 0%, #f0f9ff 55%, #f8fafc 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75) inset;
}

#maintenanceEventModal .admin-maintenance-event-billing-card__icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 1.05rem;
}

#maintenanceEventModal .admin-maintenance-event-billing-card__state {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: #334155;
  line-height: 1.45;
}

#maintenanceEventModal .admin-maintenance-event-billing-card__actions .admin-btn {
  width: 100%;
  justify-content: center;
}

#maintenanceEventModal .admin-btn.admin-btn--schedule-billing-active {
  background: #ecfdf5;
  border-color: #22c55e;
  color: #166534;
}

#maintenanceEventModal .admin-btn.admin-btn--schedule-billing-active:hover {
  background: #d1fae5;
  border-color: #16a34a;
  color: #14532d;
}

#maintenanceEventModal .admin-maintenance-event-entity-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

#maintenanceEventModal .admin-maintenance-event-entity-rows__item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 11px 0;
  border-bottom: 1px solid #f1f5f9;
}

#maintenanceEventModal .admin-maintenance-event-entity-rows__item:last-child {
  border-bottom: none;
  padding-bottom: 2px;
}

#maintenanceEventModal .admin-maintenance-event-entity-rows__icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 0.88rem;
}

#maintenanceEventModal .admin-maintenance-event-entity-rows__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#maintenanceEventModal .admin-maintenance-event-entity-rows__label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
}

#maintenanceEventModal .admin-maintenance-event-entity-rows__value {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.35;
}

#maintenanceEventModal .admin-maintenance-event-entity-rows__value-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

#maintenanceEventModal .admin-maintenance-event-task-inline {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed #e2e8f0;
}

#maintenanceEventModal .admin-maintenance-event-task-inline__title {
  margin: 0 0 6px;
  font-size: 0.82rem;
  font-weight: 800;
  color: #334155;
}

#maintenanceEventModal .admin-maintenance-event-task-inline__hint {
  margin: 0 0 8px;
  font-size: 0.8rem;
}

#maintenanceEventModal .admin-maintenance-event-task-inline__state {
  margin: 0 0 10px;
  font-size: 0.86rem;
  font-weight: 600;
  color: #1e293b;
}

#maintenanceEventModal .admin-maintenance-event-task-inline__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#maintenanceEventModal .admin-maintenance-event-task-inline__actions[hidden] {
  display: none !important;
}

#maintenanceEventModal .admin-maintenance-event-task-inline__after {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #bbf7d0;
  background: #f0fdf4;
}

#maintenanceEventModal .admin-maintenance-event-task-inline__after.is-reopen-note {
  border-color: #bfdbfe;
  background: #eff6ff;
}

#maintenanceEventModal .admin-maintenance-event-task-inline__after-text {
  margin: 0 0 8px;
  font-size: 0.86rem;
  line-height: 1.45;
  color: #14532d;
}

#maintenanceEventModal .admin-maintenance-event-task-inline__after.is-reopen-note .admin-maintenance-event-task-inline__after-text {
  color: #1e3a5f;
}

#maintenanceEventModal .admin-maintenance-event-notes {
  margin-top: 6px;
  padding: 16px 16px 14px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
}

#maintenanceEventModal .admin-maintenance-event-notes__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

#maintenanceEventModal .admin-maintenance-event-notes__icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 1rem;
}

#maintenanceEventModal .admin-maintenance-event-notes__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  color: #0f172a;
}

#maintenanceEventModal .admin-maintenance-event-modal__footer {
  padding: 14px 22px 18px;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  border-radius: 0 0 20px 20px;
}

#maintenanceEventModal .admin-maintenance-event-modal__footer .admin-btn--icon-left {
  gap: 8px;
}

@media (max-width: 960px) {
  #maintenanceEventModal .admin-maintenance-event-3col,
  #maintenanceEventModal .admin-maintenance-event-3col--no-billing {
    grid-template-columns: minmax(0, 1fr);
  }

  #maintenanceEventModal #maintenanceEventEditForm.is-agenda-edit-task .admin-maintenance-event-3col,
  #maintenanceEventModal #maintenanceEventEditForm.is-agenda-edit-task .admin-maintenance-event-3col--no-billing {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Taak bewerken in dit modal: start/einde alleen “dag”, tijdvelden en duurhint volledig verborgen */
#maintenanceEventEditForm.is-agenda-edit-task #eventEditDatetimeWrap,
#maintenanceEventEditForm.is-agenda-edit-task #eventEditDurationHint {
  display: none !important;
}

/* Omschrijving met URL’s: klikbare preview onder het tekstveld (modal onderhoud/agenda) */
.admin-plain-text-linked-preview {
  margin-top: 8px;
  padding: 8px 10px;
  font-size: 0.88rem;
  line-height: 1.45;
  color: #1e293b;
  background: #f6f9fc;
  border: 1px solid #e2eaf3;
  border-radius: 8px;
  word-break: break-word;
}

.admin-plain-text-linked-preview a {
  color: #1d4ed8;
  text-decoration: underline;
}

.admin-plain-text-linked-preview a:hover {
  color: #1e40af;
}

/* Alleen verborgen velden; knop staat in event-editform met form="…" */
.admin-hidden-submit-form {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.admin-maintenance-quick-modal {
  padding: 0;
}

.admin-modal.admin-maintenance-quick-modal .admin-quick-form-group {
  gap: 2px;
  margin-bottom: 6px;
}

.admin-modal.admin-maintenance-quick-modal .admin-maintenance-quick-grid {
  gap: 6px 10px;
  margin-bottom: 8px;
}

.admin-modal.admin-maintenance-quick-modal .admin-maintenance-quick-col {
  gap: 6px;
}

.admin-modal.admin-maintenance-quick-modal .admin-maintenance-quick-block {
  padding: 8px 10px;
  border-radius: 10px;
}

.admin-modal.admin-maintenance-quick-modal .admin-maintenance-quick-block h4 {
  margin: 0 0 6px;
  font-size: 0.88rem;
}

.admin-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border: 1px solid #d8e2ef;
  background: #f8fbff;
  color: #254a7b;
  border-radius: 10px;
  font-size: 1.05rem;
  cursor: pointer;
  z-index: 2;
}

.admin-modal-header {
  padding: 10px 38px 8px 14px;
  border-bottom: 1px solid #edf2f7;
}

.admin-modal-header h3 {
  margin: 0 0 2px;
  font-size: 1.02rem;
  font-weight: 800;
  color: #183153;
  line-height: 1.25;
  padding-right: 4px;
}

.admin-modal-header p {
  margin: 0;
  color: #7586a0;
  font-size: 0.8rem;
  line-height: 1.4;
}

.admin-modal-body {
  padding: 8px 14px 10px;
}

.admin-modal-footer {
  padding: 8px 14px 10px;
  border-top: 1px solid #edf2f7;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 8px 10px;
  flex-wrap: wrap;
}

/* Klant toevoegen: globale .admin-modal-footer staat verderop in het bestand en zou anders padding/rand overschrijven */
.admin-modal--customer-add-v2 .admin-modal-footer.admin-modal-footer--customer-add-v2 {
  margin-top: 2px;
  padding: 6px 12px 8px;
  border-top: 1px solid #e8edf4;
  gap: 6px;
}

.admin-modal-footer-between {
  justify-content: space-between;
  align-items: center;
}

.admin-modal-footer-event-edit {
  flex-wrap: wrap;
  gap: 12px;
}

.admin-modal-footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Modals: dichtere velden; knoppen niet op volle breedte (768px-regel .admin-btn) */
:is(.admin-modal, dialog.admin-dialog-native) .admin-btn {
  width: auto;
  max-width: 100%;
  flex: 0 1 auto;
  padding: 7px 12px;
  font-size: 0.85rem;
  border-radius: 9px;
  line-height: 1.2;
}

/* Teamleader-achtig: label links, veld rechts, lage rijen, weinig verticale ruimte */
:is(.admin-modal, dialog.admin-dialog-native) .admin-form-grid {
  gap: 4px 14px;
  align-items: start;
}

:is(.admin-modal, dialog.admin-dialog-native) .admin-form-group {
  margin: 0;
  min-width: 0;
}

/* Standaard: 2-koloms rij (label | control) */
:is(.admin-modal, dialog.admin-dialog-native) .admin-form-group:has(> label) {
  display: grid;
  grid-template-columns: minmax(5.75rem, 7.75rem) minmax(0, 1fr);
  gap: 2px 10px;
  align-items: center;
}

:is(.admin-modal, dialog.admin-dialog-native) .admin-form-group > label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #334155;
  line-height: 1.25;
  margin: 0;
  padding: 0;
}

:is(.admin-modal, dialog.admin-dialog-native) .admin-form-group input,
:is(.admin-modal, dialog.admin-dialog-native) .admin-form-group select,
:is(.admin-modal, dialog.admin-dialog-native) .admin-form-group textarea {
  min-height: 30px;
  padding: 4px 8px;
  font-size: 0.8125rem;
  line-height: 1.25;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  box-sizing: border-box;
}

:is(.admin-modal, dialog.admin-dialog-native) .admin-form-group textarea {
  min-height: 3.25rem;
  resize: vertical;
}

:is(.admin-modal, dialog.admin-dialog-native) .admin-form-group select {
  padding-right: 26px;
}

:is(.admin-modal, dialog.admin-dialog-native) .admin-form-multiselect {
  min-height: 5rem;
  padding: 6px 8px;
  font-size: 0.8rem;
}

:is(.admin-modal, dialog.admin-dialog-native) .admin-project-customers-checkitem {
  padding: 6px 8px;
  border-radius: 8px;
}

:is(.admin-modal, dialog.admin-dialog-native) .admin-project-customers-list {
  gap: 6px;
}

:is(.admin-modal, dialog.admin-dialog-native) .admin-project-customers-search {
  padding: 5px 8px;
  font-size: 0.8125rem;
  border-radius: 6px;
  border-color: #cbd5e1;
}

:is(.admin-modal, dialog.admin-dialog-native) .admin-project-customers-search-label {
  font-size: 0.78rem;
  margin: 6px 0 4px;
}

/* Contactpersonen-picker: geen label|veld-twee-koloms — anders checklist in smalle linkerkolom */
:is(.admin-modal, dialog.admin-dialog-native) .admin-form-group:has(> .admin-project-customers-search) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

:is(.admin-modal, dialog.admin-dialog-native) .admin-form-group:has(> .admin-project-customers-search) > .admin-project-customers-search {
  max-width: none;
  width: 100%;
  box-sizing: border-box;
}

:is(.admin-modal, dialog.admin-dialog-native) .admin-form-group:has(> .admin-project-customers-search) > .admin-project-customers-checklist {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

:is(.admin-modal, dialog.admin-dialog-native) .admin-form-group:has(> .admin-project-customers-search) .admin-project-customers-checklist > li {
  min-width: 0;
}

:is(.admin-modal, dialog.admin-dialog-native) .admin-form-group:has(> .admin-project-customers-search) .admin-project-customers-checkitem {
  align-self: stretch;
  min-width: 0;
}

:is(.admin-modal, dialog.admin-dialog-native) .admin-form-group:has(> .admin-project-customers-search) .admin-project-customers-checkitem__text {
  min-width: 0;
  overflow-wrap: break-word;
}

:is(.admin-modal, dialog.admin-dialog-native) .admin-form-group input:focus,
:is(.admin-modal, dialog.admin-dialog-native) .admin-form-group select:focus,
:is(.admin-modal, dialog.admin-dialog-native) .admin-form-group textarea:focus {
  border-color: #4f7cff;
  box-shadow: 0 0 0 2px rgba(79, 124, 255, 0.14);
}

:is(.admin-modal, dialog.admin-dialog-native) .admin-btn.admin-btn-sm {
  padding: 5px 9px;
  font-size: 0.76rem;
  border-radius: 7px;
}

/* Hint op de tweede rij onder het veld (rechterkolom) */
:is(.admin-modal, dialog.admin-dialog-native) .admin-form-group:has(> .admin-form-hint) {
  grid-template-rows: auto auto;
  align-items: start;
}

:is(.admin-modal, dialog.admin-dialog-native) .admin-form-group:has(> .admin-form-hint) > label {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
}

:is(.admin-modal, dialog.admin-dialog-native) .admin-form-group:has(> .admin-form-hint):has(textarea) > label {
  align-self: start;
  padding-top: 6px;
}

:is(.admin-modal, dialog.admin-dialog-native) .admin-form-group:has(> .admin-form-hint) > input,
:is(.admin-modal, dialog.admin-dialog-native) .admin-form-group:has(> .admin-form-hint) > select,
:is(.admin-modal, dialog.admin-dialog-native) .admin-form-group:has(> .admin-form-hint) > textarea {
  grid-column: 2;
  grid-row: 1;
}

:is(.admin-modal, dialog.admin-dialog-native) .admin-form-group:has(> .admin-form-hint) > .admin-form-hint {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.35;
}

/* Textarea zonder losse hint: label boven uitlijnen */
:is(.admin-modal, dialog.admin-dialog-native) .admin-form-group:has(textarea):not(:has(> .admin-form-hint)) {
  align-items: start;
}

:is(.admin-modal, dialog.admin-dialog-native) .admin-form-group:has(textarea):not(:has(> .admin-form-hint)) > label {
  padding-top: 6px;
}

/* Geneste grid (bv. zakelijke klantvelden): geen dubbele grid op wrapper */
:is(.admin-modal, dialog.admin-dialog-native) .admin-form-group:has(> .admin-form-grid) {
  display: block;
}

:is(.admin-modal, dialog.admin-dialog-native) .admin-form-group > .admin-form-grid {
  gap: 4px 12px;
}

/* Type klant: label links, radio’s rechts */
:is(.admin-modal, dialog.admin-dialog-native) .admin-form-group:has(> .admin-customer-type-radios) {
  display: grid;
  grid-template-columns: minmax(5.75rem, 7.75rem) minmax(0, 1fr);
  gap: 2px 10px;
  align-items: center;
}

:is(.admin-modal, dialog.admin-dialog-native) .admin-form-group:has(> .admin-customer-type-radios) > .admin-form-labelish {
  font-size: 0.78rem;
  font-weight: 600;
  color: #334155;
}

:is(.admin-modal, dialog.admin-dialog-native) .admin-customer-type-radios {
  gap: 6px 12px;
}

:is(.admin-modal, dialog.admin-dialog-native) .admin-radio-line {
  font-size: 0.8rem;
}

/* Blok met knop + uitleg (contactpersonen kiezen) */
:is(.admin-modal, dialog.admin-dialog-native) .admin-form-group:has(> .admin-form-labelish):has(> button) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

:is(.admin-modal, dialog.admin-dialog-native) .admin-form-group:has(> .admin-form-labelish):has(> button) > .admin-form-labelish {
  font-size: 0.78rem;
  font-weight: 600;
  color: #334155;
}

:is(.admin-modal, dialog.admin-dialog-native) .admin-form-hint {
  font-size: 0.72rem;
  line-height: 1.35;
  margin: 0;
}

.admin-modal .admin-settings-alert {
  padding: 8px 10px;
  margin-bottom: 8px;
  font-size: 0.82rem;
  border-radius: 8px;
}

dialog.admin-dialog-native .admin-modal__alert {
  margin-bottom: 8px;
  padding: 8px 10px;
  font-size: 0.82rem;
  border-radius: 8px;
}

.admin-modal .admin-settings-alert--error p {
  margin: 0 0 4px;
}

.admin-modal-body form .admin-modal-footer {
  margin-top: 6px;
}

@media (max-width: 520px) {
  :is(.admin-modal, dialog.admin-dialog-native) .admin-form-group:has(> label) {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  :is(.admin-modal, dialog.admin-dialog-native) .admin-form-group:has(> .admin-form-hint) > label,
  :is(.admin-modal, dialog.admin-dialog-native) .admin-form-group:has(> .admin-form-hint) > input,
  :is(.admin-modal, dialog.admin-dialog-native) .admin-form-group:has(> .admin-form-hint) > select,
  :is(.admin-modal, dialog.admin-dialog-native) .admin-form-group:has(> .admin-form-hint) > textarea,
  :is(.admin-modal, dialog.admin-dialog-native) .admin-form-group:has(> .admin-form-hint) > .admin-form-hint {
    grid-column: 1;
    grid-row: auto;
  }

  :is(.admin-modal, dialog.admin-dialog-native) .admin-form-group:has(> .admin-customer-type-radios) {
    grid-template-columns: 1fr;
  }
}

.admin-schedule-event-duration-hint {
  font-size: 0.85rem;
  color: #5a6b82;
  margin: -0.2rem 0 0.65rem;
  min-height: 1.2em;
}

.admin-maintenance-quick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}

.admin-maintenance-quick-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.admin-quick-install-detail-name {
  font-weight: 700;
  color: #2563eb;
}

.admin-quick-install-detail-hint {
  margin: 0 0 10px;
  font-size: 0.82rem;
  color: #6b7280;
}

.admin-maintenance-quick-block {
  background: #f9fbfe;
  border: 1px solid #e8edf5;
  border-radius: 18px;
  padding: 18px;
}

.admin-maintenance-quick-block h4 {
  margin: 0 0 14px;
  font-size: 1rem;
  font-weight: 800;
  color: #183153;
}

.admin-detail-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.admin-detail-list li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid #edf2f7;
}

.admin-detail-list li:last-child {
  border-bottom: none;
}

.admin-detail-list span {
  font-size: 0.9rem;
  color: #72839b;
}

.admin-detail-list strong {
  font-size: 0.92rem;
  color: #183153;
  text-align: right;
}

.admin-detail-list__value-with-link {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  text-align: right;
  max-width: 68%;
}

.admin-detail-entity-link {
  font-size: 0.8rem;
  font-weight: 700;
  color: #2563c8;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.admin-detail-entity-link:hover {
  color: #1a3d75;
}

.admin-quick-form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

/* display:flex hierboven wint anders van het native [hidden]-gedrag */
#quickScheduleInstallationPickWrap[hidden],
#projectScheduleProjectPickWrap[hidden],
#projectScheduleContactSection[hidden],
#eventEditTaskProjectWrap[hidden],
#eventEditTaskListStatusWrap[hidden] {
  display: none !important;
}

.admin-quick-form-group:last-child {
  margin-bottom: 0;
}

.admin-quick-form-group label {
  font-size: 0.86rem;
  font-weight: 800;
  color: #314d75;
}

.admin-quick-form-group input,
.admin-quick-form-group select,
.admin-quick-form-group textarea {
  width: 100%;
  border: 1px solid #d8e2ef;
  border-radius: 14px;
  background: #ffffff;
  padding: 12px 14px;
  font-size: 0.93rem;
  color: #183153;
  outline: none;
  resize: vertical;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.admin-quick-form-group input:focus,
.admin-quick-form-group select:focus,
.admin-quick-form-group textarea:focus {
  border-color: #8bb3ea;
  box-shadow: 0 0 0 4px rgba(78, 132, 214, 0.12);
}

.admin-quick-install-combobox {
  position: relative;
}

.admin-quick-install-native-select {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.admin-quick-install-listbox {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 10060;
  max-height: 240px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: #ffffff;
  border: 1px solid #d8e2ef;
  border-radius: 14px;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.14);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #a8bdd9 #eef3fa;
}

.admin-quick-install-listbox::-webkit-scrollbar {
  width: 8px;
}

.admin-quick-install-listbox::-webkit-scrollbar-track {
  margin: 6px 0;
  background: #eef3fa;
  border-radius: 999px;
}

.admin-quick-install-listbox::-webkit-scrollbar-thumb {
  background: #b8c9e0;
  border-radius: 999px;
  border: 2px solid #eef3fa;
}

.admin-quick-install-listbox li[role='option'] {
  padding: 10px 14px;
  font-size: 0.92rem;
  color: #183153;
  cursor: pointer;
  line-height: 1.35;
}

.admin-quick-install-listbox li[role='option']:hover,
.admin-quick-install-listbox li[role='option'].is-active {
  background: #eef4ff;
}

.admin-quick-install-listbox li[role='option'][hidden] {
  display: none !important;
}

.admin-quick-install-listbox li[role='option'].is-selected {
  position: relative;
  padding-right: 34px;
  background: #eef9f2;
  color: #0f7a47;
  font-weight: 700;
}

.admin-quick-install-listbox li[role='option'].is-selected::after {
  content: '\2713';
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  font-weight: 800;
  color: #16a34a;
}

.admin-quick-install-listbox li[role='option'].is-selected:hover,
.admin-quick-install-listbox li[role='option'].is-selected.is-active {
  background: #ddf3e6;
}

.admin-quick-install-hint {
  margin: 6px 2px 0;
  font-size: 0.78rem;
  color: #6b7280;
}

.admin-quick-install-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.admin-quick-install-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 6px 4px 10px;
  border-radius: 999px;
  background: #eef4ff;
  border: 1px solid #d7e4fa;
  color: #1b4d99;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
}

.admin-quick-install-chip.is-active {
  background: #dbeafe;
  border-color: #93c5fd;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18);
}

.admin-quick-install-chip > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 260px;
  cursor: pointer;
}

.admin-quick-install-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(27, 77, 153, 0.12);
  color: #1b4d99;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}

.admin-quick-install-chip-remove:hover {
  background: rgba(27, 77, 153, 0.25);
}

.admin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 12px;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 800;
  transition: all 0.2s ease;
}

.admin-btn-light {
  background: #eef4ff;
  color: #1b4d99;
  border: 1px solid #d7e4fa;
}

.admin-btn-light:hover {
  background: #e3edff;
}

.admin-btn-primary {
  background: linear-gradient(135deg, #205ab0 0%, #173d7f 100%);
  color: #ffffff;
  box-shadow: 0 10px 20px rgba(26, 77, 151, 0.18);
}

.admin-btn-primary:hover {
  transform: translateY(-1px);
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 1450px) {
  .admin-maintenance-layout {
    padding-right: 360px;
  }

  .admin-maintenance-drawer {
    width: 340px;
  }
}

@media (max-width: 1200px) {
  .admin-week-calendar-inner {
    min-width: 940px;
  }

  .admin-maintenance-followup-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1100px) {
  .admin-maintenance-layout {
    padding-right: 0;
  }

  .admin-maintenance-drawer {
    position: fixed;
    right: 0px;
    width: min(380px, calc(100vw - 32px));
    border-radius: 0px;
  }

  .admin-maintenance-drawer.is-closed {
    transform: translateX(calc(100% + 24px));
    opacity: 0;
  }

  .admin-maintenance-drawer-reopen {
    position: fixed;
    right: 0;
  }
}

@media (max-width: 900px) {
  .admin-card-header.admin-card-header-between {
    flex-direction: column;
    align-items: flex-start;
  }

  .admin-maintenance-calendar-nav {
    width: 100%;
    justify-content: space-between;
  }

  .admin-maintenance-calendar-nav-row {
    width: 100%;
    justify-content: flex-start;
  }

  .admin-week-calendar-inner {
    min-width: 880px;
  }

  .admin-week-calendar-header,
  .admin-week-calendar-body {
    grid-template-columns: 68px repeat(7, minmax(115px, 1fr));
  }

  .admin-week-time-col {
    grid-template-rows: repeat(10, 64px);
  }

  .admin-week-day-col {
    grid-template-rows: repeat(10, 64px);
  }

  .admin-week-time-slot {
    height: 64px;
    font-size: 0.74rem;
  }

  .admin-calendar-event {
    border-radius: 14px;
    padding: 8px;
  }

  .admin-calendar-event.is-schedule-kind-project,
  .admin-calendar-event.is-schedule-kind-maintenance,
  .admin-calendar-event.is-schedule-kind-task {
    padding: 8px 8px 8px 10px;
  }

  .admin-calendar-event .admin-schedule-event__time-row .js-schedule-event-time {
    font-size: 0.7rem;
  }

  .admin-calendar-event .admin-schedule-event__title {
    font-size: 0.75rem;
  }

  .admin-calendar-event small {
    font-size: 0.68rem;
  }

  .admin-schedule-priority-pill {
    font-size: 0.58rem;
    padding: 1px 5px;
  }

  .admin-schedule-event__kind-label {
    font-size: 0.58rem;
    padding: 1px 5px;
  }

  .admin-maintenance-quick-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .admin-page-header-maintenance h1 {
    font-size: 1.6rem;
  }

  .admin-page-header-maintenance p {
    font-size: 0.95rem;
  }

  .admin-maintenance-tabs {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .admin-maintenance-tab {
    width: 100%;
    text-align: center;
  }

  .admin-card-header,
  .admin-modal-header,
  .admin-modal-body,
  .admin-modal-footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .admin-maintenance-drawer-header,
  .admin-maintenance-drawer-toolbar,
  .admin-maintenance-drawer-list {
    padding-left: 16px;
    padding-right: 16px;
  }

  .admin-maintenance-queue-filters {
    grid-template-columns: 1fr;
  }

  .admin-modal-overlay {
    padding: 12px;
  }

  .admin-modal {
    max-height: calc(100vh - 24px);
    border-radius: 6px;
  }

  .admin-modal-footer {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .admin-btn {
    width: 100%;
  }

  :is(.admin-modal, dialog.admin-dialog-native) .admin-btn {
    width: auto;
    min-width: 0;
  }
}












/* =========================================
   ADMIN PROJECTS PAGE
========================================= */

.admin-page-header-projects {
  margin-bottom: 24px;
}

.admin-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.admin-projects-list-card {
  padding: 24px 24px 28px;
  margin-bottom: 24px;
}

.admin-projects-list-header {
  margin-bottom: 22px;
  padding-bottom: 0;
  border-bottom: none;
}

.admin-projects-list-header h2 {
  margin: 0 0 6px;
  font-size: 1.25rem;
  font-weight: 800;
  color: #17233c;
}

.admin-projects-list-sub {
  margin: 0;
  color: #6d7890;
  font-size: 0.92rem;
}

.admin-project-card-intro {
  min-width: 0;
  flex: 1;
}

.admin-project-card .admin-project-card-meta {
  margin-bottom: 10px;
}

.admin-project-title-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

.admin-project-title-link:hover {
  color: #4f7cff;
}

.admin-project-client-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 6px;
}

.admin-project-stat--meta strong {
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.25;
  word-break: break-word;
}

.admin-project-footer-hint {
  flex: 1;
  min-width: 0;
  line-height: 1.45;
}

.admin-projects-toolbar-card {
  padding: 24px;
  margin-bottom: 24px;
}

.admin-projects-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.admin-projects-search {
  position: relative;
  width: 100%;
  max-width: 440px;
}

.admin-projects-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 0.92rem;
  pointer-events: none;
}

.admin-projects-search input {
  width: 100%;
  border: 1px solid #dbe3ef;
  background: #f8fafc;
  border-radius: 999px;
  padding: 12px 16px 12px 40px;
  font-size: 0.94rem;
  color: #17233c;
  transition: all 0.2s ease;
}

.admin-projects-search input:focus {
  outline: none;
  background: #ffffff;
  border-color: #4f7cff;
  box-shadow: 0 0 0 4px rgba(79, 124, 255, 0.12);
}

.admin-projects-filters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.admin-projects-filters select {
  min-width: 180px;
  border: 1px solid #dbe3ef;
  background: #ffffff;
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 0.93rem;
  color: #17233c;
  transition: all 0.2s ease;
}

.admin-projects-filters select:focus {
  outline: none;
  border-color: #4f7cff;
  box-shadow: 0 0 0 4px rgba(79, 124, 255, 0.12);
}

.admin-projects-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.admin-project-card {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.admin-project-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}

.admin-project-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.admin-project-card h2 {
  margin: 0 0 8px;
  font-size: 1.2rem;
  line-height: 1.2;
  color: #17233c;
  font-weight: 800;
}

.admin-project-address {
  margin: 0;
  color: #6d7890;
  font-size: 0.93rem;
  line-height: 1.5;
}

.admin-project-type {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #eef4ff;
  color: #3659b8;
  font-size: 0.82rem;
  font-weight: 700;
}

.admin-project-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.admin-project-client {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: #f8fafc;
  border: 1px solid #edf2f7;
  border-radius: 16px;
}

.admin-project-client strong {
  color: #17233c;
  font-size: 0.9rem;
}

.admin-project-client span {
  color: #6d7890;
  font-size: 0.93rem;
}

.admin-project-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.admin-project-stat {
  background: #ffffff;
  border: 1px solid #edf2f7;
  border-radius: 16px;
  padding: 16px 14px;
  text-align: center;
}

.admin-project-stat strong {
  display: block;
  margin-bottom: 6px;
  color: #17233c;
  font-size: 1.2rem;
  font-weight: 800;
}

.admin-project-stat span {
  color: #7b879c;
  font-size: 0.84rem;
}

.admin-project-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 4px;
  border-top: 1px solid #eef3f8;
}

.admin-project-footer span {
  color: #7b879c;
  font-size: 0.88rem;
}

.admin-project-link {
  color: #4f7cff;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
}

.admin-project-link:hover {
  opacity: 0.8;
}

.admin-badge.is-pause {
  background: #f3f0ff;
  color: #6b46c1;
}

/* Responsive */
@media (max-width: 1100px) {
  .admin-projects-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .admin-projects-toolbar-card,
  .admin-project-card {
    padding: 18px;
  }

  .admin-page-header-projects {
    flex-direction: column;
    align-items: flex-start;
  }

  .admin-projects-filters {
    width: 100%;
  }

  .admin-projects-filters select {
    width: 100%;
    min-width: 100%;
  }

  .admin-projects-search {
    max-width: 100%;
  }

  .admin-project-card-top {
    flex-direction: column;
  }

  .admin-project-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .admin-project-stats {
    grid-template-columns: 1fr;
  }

  .admin-project-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* —— Projecten: uitgebreide zoekbalk + compacte tabel —— */

.admin-projects-search-card {
  padding: 18px 20px 20px;
  margin-bottom: 20px;
}

/* Projecten: zoekstrip onder tabrij — zelfde witte basis als .admin-topbar-row--tabs */
.admin-projects-search-strip {
  width: 100%;
  border-top: 1px solid #eef2f7;
  border-bottom: 1px solid #e9eef5;
  background: #fff;
}

.admin-projects-search-strip .admin-projects-search-card--topbar {
  margin: 0;
  padding: 8px 28px 10px;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}

.admin-projects-search-form--toolbar {
  gap: 0;
}

.admin-projects-search-toolbar-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.admin-projects-search-strip .admin-projects-search-bar {
  flex: 1 1 220px;
  min-width: 0;
}

.admin-projects-search-strip .admin-projects-search-row__actions {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.admin-projects-search-more-row {
  margin-top: 6px;
  padding-top: 0;
  width: 100%;
}

/* «Meer filters»: tekstlink + icoon, geen pill-knop */
.admin-projects-search-advanced--minimal {
  border: 0;
  background: transparent;
  margin: 0;
}

.admin-projects-search-more-summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: #2563eb;
  user-select: none;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.admin-projects-search-more-summary::-webkit-details-marker {
  display: none;
}

.admin-projects-search-more-summary .fa-sliders {
  font-size: 0.75rem;
  opacity: 0.9;
}

.admin-projects-search-more-summary:hover {
  color: #1d4ed8;
  text-decoration: underline;
}

.admin-projects-search-more-summary:focus {
  outline: none;
}

.admin-projects-search-more-summary:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 3px;
  border-radius: 4px;
}

.admin-projects-search-advanced--minimal[open] > .admin-projects-search-more-summary {
  color: #1e40af;
}

/* Zelfde zoekveld als .admin-topbar-search (pill, kleuren, focus) */
.admin-projects-search-strip .admin-projects-search-bar .admin-projects-search-icon {
  left: 12px;
  font-size: 0.9rem;
}

.admin-projects-search-strip .admin-projects-search-bar input {
  border-radius: 999px;
  padding: 10px 16px 10px 38px;
  font-size: 0.9rem;
  transition: all 0.25s ease;
}

.admin-projects-search-strip .admin-projects-search-advanced[open] .admin-projects-search-advanced-body {
  border-radius: 0;
}

.admin-projects-search-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.admin-projects-search-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-projects-search-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-projects-search-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.admin-projects-search-row .admin-projects-search-bar {
  flex: 1 1 220px;
  min-width: 0;
}

.admin-projects-search-row__actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

.admin-projects-search-bar {
  position: relative;
}

.admin-projects-search-bar .admin-projects-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 0.88rem;
  pointer-events: none;
}

.admin-projects-search-bar input {
  width: 100%;
  border: 1px solid #dbe3ef;
  background: #f8fafc;
  border-radius: 12px;
  padding: 10px 14px 10px 42px;
  font-size: 0.9rem;
  color: #17233c;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.admin-projects-search-bar input:focus {
  outline: none;
  background: #fff;
  border-color: #4f7cff;
  box-shadow: 0 0 0 4px rgba(79, 124, 255, 0.12);
}

.admin-projects-search-hint {
  margin: 0;
  font-size: 0.8rem;
  color: #7b879c;
  line-height: 1.45;
}

.admin-customers-filter-type {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 220px;
  min-width: 0;
}

.admin-customers-filter-type-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.admin-customers-filter-type-select {
  flex: 1;
  min-width: 140px;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 0.9rem;
  color: #17233c;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-customers-filter-type-select:focus {
  outline: none;
  border-color: #4f7cff;
  box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.1);
}

.admin-customers-tr--view {
  cursor: pointer;
}

.admin-customers-tr--view:hover td {
  background: #f1f5f9;
}

.admin-customers-name-link {
  color: inherit;
  text-decoration: none;
}

.admin-customers-name-link:hover {
  text-decoration: underline;
  color: #205ab0;
}

/* Klantdetail: ontwerp met pagehead, tabs, hero, kaarten en projecttabel */
.admin-customer-view-page .admin-customer-view-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 8px 40px;
}

.admin-customer-view-breadcrumb {
  margin: 0 0 12px;
}

.admin-customer-view-breadcrumb__link {
  font-size: 0.9rem;
  font-weight: 600;
  color: #64748b;
  text-decoration: none;
}

.admin-customer-view-breadcrumb__link:hover {
  color: #205ab0;
  text-decoration: underline;
}

.admin-topbar-left .admin-customer-view-pagehead__main {
  flex: 1 1 auto;
  min-width: 0;
}

.admin-customer-view-pagehead__main {
  flex: 1 1 auto;
  min-width: 0;
}

.admin-customer-view-pagehead__title {
  margin: 0 0 4px;
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.admin-customer-view-pagehead__tagline {
  margin: 0;
  font-size: 0.95rem;
  color: #64748b;
  font-weight: 500;
  line-height: 1.4;
}

.admin-customer-view-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 24px;
  padding: 22px 24px;
  background: linear-gradient(120deg, #eff6ff 0%, #f0f9ff 42%, #f8fafc 100%);
  border: 1px solid #bfdbfe;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(37, 99, 235, 0.1);
}

.admin-customer-view-hero__main {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.admin-customer-view-hero__avatar {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 800;
  color: #1d4ed8;
  background: #dbeafe;
  border: 2px solid #fff;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.22);
}

.admin-customer-view-hero__text {
  min-width: 0;
}

.admin-customer-view-hero__title {
  margin: 0 0 8px;
  font-size: clamp(1.35rem, 2.5vw, 1.65rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f172a;
  line-height: 1.2;
}

.admin-customer-view-hero__name {
  margin: 0 0 8px;
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
  line-height: 1.25;
}

.admin-customer-view-hero__type {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font-size: 0.92rem;
  color: #475569;
}

.admin-customer-view-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #1e40af;
  background: #dbeafe;
  border: 1px solid #93c5fd;
}

.admin-customer-view-hero__org {
  font-weight: 600;
  color: #1e293b;
}

.admin-customer-view-hero__actions {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.admin-customer-view-hero__btn-edit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.admin-customer-view-hero__btn-edit:hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
}

.admin-customer-view-hero__btn-del {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ef4444 !important;
  color: #fff !important;
  border: 1px solid #dc2626 !important;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 12px;
}

.admin-customer-view-hero__btn-del:hover {
  background: #dc2626 !important;
}

.admin-customer-view-card {
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.07);
  overflow: hidden;
  background: #fff;
}

.admin-customer-view-page .admin-customer-view-card.admin-card {
  padding: 0;
  margin: 0;
}

.admin-customer-view-page .admin-customer-view-card > .admin-card-header {
  margin-bottom: 0;
}

.admin-customer-view-card--projects .admin-customer-view-pager {
  margin-top: auto;
}

.admin-customer-view-card__head {
  background: #fff;
  border-bottom: 1px solid #e8edf4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-customer-view-card__head--icon {
  padding: 16px 18px;
}

.admin-customer-view-card__head--icon h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.02rem;
  font-weight: 800;
  color: #0f172a;
}

.admin-customer-view-card__head-icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 1rem;
}

.admin-customer-view-card__head--projects {
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 16px 18px 14px;
  gap: 14px;
}

.admin-customer-view-card__head-stack {
  flex: 1 1 auto;
  min-width: 0;
}

.admin-customer-view-card__head-stack h2 {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
}

.admin-customer-view-projects-countline {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #475569;
}

.admin-customer-view-projects-countline__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
}

.admin-customer-view-card__head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.admin-customer-view-card__head-actions .admin-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.admin-customer-view-btn-sky {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  border: 1px solid #bfdbfe !important;
  font-weight: 700;
}

.admin-customer-view-btn-sky:hover {
  background: #dbeafe !important;
}

.admin-customer-view-card__head-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  min-width: 0;
}

.admin-customer-view-card__head h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
}

.admin-customer-view-count {
  font-size: 0.78rem;
  font-weight: 700;
  color: #475569;
  background: #e2e8f0;
  padding: 2px 8px;
  border-radius: 999px;
}

.admin-customer-view-empty {
  padding: 16px 18px 20px;
  font-size: 0.92rem;
  color: #64748b;
  line-height: 1.5;
}

.admin-customer-view-empty a {
  color: #205ab0;
  font-weight: 600;
}

.admin-customer-view-kv {
  margin: 0;
  padding: 4px 18px 18px;
}

.admin-customer-view-kv__row {
  display: grid;
  grid-template-columns: 38px minmax(88px, auto) 1fr;
  gap: 10px 14px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid #e8edf4;
  font-size: 0.92rem;
}

.admin-customer-view-kv__row:last-child {
  border-bottom: none;
}

.admin-customer-view-kv__ico {
  color: #2563eb;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #eff6ff;
  font-size: 0.92rem;
}

.admin-customer-view-kv__lbl {
  margin: 0;
  font-weight: 600;
  color: #64748b;
  padding-top: 9px;
}

.admin-customer-view-kv__val {
  margin: 0;
  text-align: right;
  font-weight: 700;
  color: #0f172a;
  padding-top: 9px;
  word-break: break-word;
}

.admin-customer-view-kv__val a {
  color: #1d4ed8;
  font-weight: 700;
}

.admin-customer-view-kv__row--stack {
  grid-template-columns: 38px 1fr;
  grid-template-rows: auto auto;
}

.admin-customer-view-kv__row--stack .admin-customer-view-kv__ico {
  grid-row: 1 / span 2;
  align-self: start;
}

.admin-customer-view-kv__row--stack .admin-customer-view-kv__lbl {
  grid-column: 2;
  padding-top: 0;
}

.admin-customer-view-kv__row--stack .admin-customer-view-kv__val {
  grid-column: 2;
  text-align: left;
  padding-top: 6px;
  font-weight: 600;
}

.admin-customer-view-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
}

.admin-customer-view-projects-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  table-layout: fixed;
}

.admin-customer-view-projects-table th,
.admin-customer-view-projects-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid #eef2f7;
  vertical-align: middle;
}

.admin-customer-view-projects-table th {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
  font-weight: 800;
  background: #f8fafc;
}

.admin-customer-view-projects-table .admin-customer-view-td-ref {
  width: 130px;
}

.admin-customer-view-projects-table .admin-customer-view-td-title {
  width: 28%;
}

.admin-customer-view-projects-table .admin-customer-view-td-title .admin-projects-link {
  font-weight: 800;
  color: #0f172a;
  text-decoration: none;
}

.admin-customer-view-projects-table .admin-customer-view-td-title .admin-projects-link:hover {
  color: #1d4ed8;
  text-decoration: underline;
}

.admin-customer-view-projects-table .admin-customer-view-td-addr {
  min-width: 0;
}

.admin-customer-view-projects-table .admin-customer-view-td-status {
  width: 120px;
  text-align: right;
}

.admin-customer-view-ref-pill {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1e40af;
  font-size: 0.78rem;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: 0.02em;
}

.admin-customer-view-status-pill.admin-badge {
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 700;
}

.admin-customer-view-addr-clip {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #475569;
}

.admin-customer-view-project-row {
  cursor: pointer;
  transition: background 0.12s ease;
}

.admin-customer-view-project-row:hover td {
  background: #f8fafc;
}

.admin-customer-view-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 14px 12px 20px;
}

.admin-customer-view-pager__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.admin-customer-view-pager__btn:hover:not(.admin-customer-view-pager__btn--disabled) {
  border-color: #93c5fd;
  color: #1d4ed8;
  background: #eff6ff;
}

.admin-customer-view-pager__btn--disabled {
  opacity: 0.32;
  cursor: not-allowed;
}

.admin-customer-view-pager__current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
}

.admin-modal--customer-view-edit.admin-modal {
  width: min(640px, 100%);
  max-height: min(92vh, 900px);
  display: flex;
  flex-direction: column;
}

.admin-modal--customer-view-edit .admin-modal-body {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.admin-quick-install-combobox .admin-quick-install-search {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font-size: 0.92rem;
  border: 1px solid #d8e2ef;
  border-radius: 10px;
  background: #f8fafc;
  color: #0f172a;
}

.admin-quick-install-combobox .admin-quick-install-search:focus {
  outline: none;
  border-color: #93c5fd;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.admin-quick-install-combobox .admin-quick-install-search::placeholder {
  color: #94a3b8;
}

.admin-modal--project-link .admin-quick-install-listbox {
  z-index: 50;
}

.admin-customer-view-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  max-width: 1200px;
}

.admin-customer-view-grid__aside {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

@media (min-width: 960px) {
  .admin-customer-view-grid {
    grid-template-columns: minmax(300px, 1fr) minmax(380px, 2fr);
    align-items: stretch;
  }

  .admin-customer-view-card--projects {
    display: flex;
    flex-direction: column;
    min-height: 100%;
  }

  .admin-customer-view-card--projects > .admin-customer-view-table-wrap {
    flex: 1 1 auto;
  }

  .admin-customer-view-card--projects > .admin-customer-view-empty {
    flex: 1 1 auto;
  }
}

.admin-customer-view-dl {
  margin: 0;
  padding: 4px 18px 18px;
}

.admin-customer-view-dl > div {
  display: grid;
  grid-template-columns: minmax(100px, 1fr) minmax(100px, 1fr);
  gap: 8px 16px;
  padding: 14px 0;
  border-bottom: 1px solid #e8edf4;
  font-size: 0.92rem;
}

.admin-customer-view-dl > div:last-child {
  border-bottom: none;
}

.admin-customer-view-dl dt {
  margin: 0;
  font-weight: 600;
  color: #64748b;
}

.admin-customer-view-dl dd {
  margin: 0;
  color: #0f172a;
  font-weight: 700;
  text-align: right;
}

.admin-customer-view-dl--block {
  grid-template-columns: 1fr !important;
}

.admin-customer-view-dl--block dt {
  margin-bottom: 6px;
}

.admin-customer-view-notes {
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
}

.admin-customer-view-projects-table tbody tr.admin-projects-tr--view {
  cursor: pointer;
}

/* Zelfde taal als secundaire knoppen + zoekvelden: subtiele scheiding van het hoofdzoekveld */
.admin-projects-search-advanced-wrap {
  padding-top: 10px;
  margin-top: 0;
  border-top: 1px solid #edf2f7;
}

.admin-projects-search-advanced {
  border: none;
  background: transparent;
  margin: 0;
}

.admin-projects-search-advanced-summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #17233c;
  line-height: 1.3;
  user-select: none;
  width: fit-content;
  max-width: 100%;
  background: #eef3f8;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(23, 35, 60, 0.05);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-projects-search-advanced-summary::-webkit-details-marker {
  display: none;
}

.admin-projects-search-advanced-summary__label {
  letter-spacing: 0.01em;
}

/* Chevron in lijn met admin-UI (compact, geen emoji) */
.admin-projects-search-advanced-summary::after {
  content: '';
  display: block;
  width: 7px;
  height: 7px;
  border-right: 2px solid #64748b;
  border-bottom: 2px solid #64748b;
  transform: rotate(45deg);
  margin-top: -3px;
  flex-shrink: 0;
  transition: transform 0.2s ease, border-color 0.15s ease;
}

.admin-projects-search-advanced[open] > .admin-projects-search-advanced-summary::after {
  transform: rotate(-135deg);
  margin-top: 1px;
}

.admin-projects-search-advanced-summary:hover {
  background: #e3ebf4;
  border-color: #cdd8e8;
}

.admin-projects-search-advanced-summary:focus {
  outline: none;
}

.admin-projects-search-advanced-summary:focus-visible {
  border-color: #4f7cff;
  box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.15);
}

.admin-projects-search-advanced-body {
  padding: 0;
}

.admin-projects-search-advanced[open] .admin-projects-search-advanced-body {
  margin-top: 12px;
  padding: 16px;
  background: #f8fafc;
  border: 1px solid #dbe3ef;
  border-radius: 14px;
}

.admin-projects-search-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px 18px;
}

.admin-projects-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.admin-projects-field > label,
.admin-projects-field-label {
  font-size: 0.84rem;
  font-weight: 600;
  color: #4a5568;
}

.admin-projects-field input,
.admin-projects-field select {
  width: 100%;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 0.9rem;
  color: #17233c;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-projects-field input:focus,
.admin-projects-field select:focus {
  outline: none;
  border-color: #4f7cff;
  box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.1);
}

.admin-projects-field--range .admin-projects-range-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-projects-range-inputs input {
  flex: 1;
  min-width: 0;
}

.admin-projects-range-sep {
  color: #94a3b8;
  font-weight: 600;
  flex-shrink: 0;
}

.admin-projects-search-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 4px;
}

.admin-projects-table-section {
  padding: 0;
  border-radius: 5px;
  /* visible zodat het acties-dropdownpaneel niet wordt afgesneden */
  overflow: visible;
}

.admin-page--customers .admin-projects-table-section {
  border-radius: 5px;
}

.admin-website-leads-table-card {
  border-radius: 5px;
}

/* ---------- Actiecentrum (admin/website-leads.php) — kleuren aligned met dashboard / admin ---------- */
.admin-page--action-center .admin-content {
  padding: 24px 28px 44px;
  background:
    radial-gradient(circle at 0% 0%, rgba(79, 124, 255, 0.07) 0, transparent 42%),
    #f6f8fc;
}

.admin-ac {
  --ac-bg: #f6f8fc;
  --ac-panel: #ffffff;
  --ac-panel-soft: #f8fafc;
  --ac-text: #102348;
  --ac-muted: #64748b;
  --ac-line: #e9eef5;
  --ac-accent: #2563eb;
  --ac-accent-soft: #eff6ff;
  --ac-navy: #1e3a5f;
  --ac-warning: #d97706;
  --ac-warning-soft: #fff7ed;
  --ac-danger: #dc2626;
  --ac-danger-soft: #fef2f2;
  --ac-success: #16a34a;
  --ac-success-soft: #ecfdf3;
  --ac-shadow: 0 10px 36px rgba(15, 23, 42, 0.06);
  --ac-radius-xl: 28px;
  --ac-radius-lg: 20px;
  --ac-radius-md: 14px;
  color: var(--ac-text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, sans-serif;
}

.admin-ac-topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.admin-ac-page-title {
  max-width: 720px;
}

.admin-ac-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ac-accent-soft);
  color: var(--ac-navy);
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 10px;
}

.admin-ac-top-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}

.admin-ac-btn {
  border: 0;
  border-radius: var(--ac-radius-md);
  padding: 11px 14px;
  font-weight: 750;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  font-size: 0.92rem;
  text-decoration: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.admin-ac-btn:hover {
  opacity: 0.94;
}

.admin-ac-btn--primary {
  background: linear-gradient(135deg, #205ab0 0%, #173d7f 100%);
  color: #fff;
  box-shadow: 0 10px 20px rgba(26, 77, 151, 0.18);
}

.admin-ac-btn--light {
  background: #fff;
  color: var(--ac-text);
  border: 1px solid var(--ac-line);
}

.admin-ac-btn--white {
  background: #fff;
  color: #173d7f;
  border: 0;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.admin-ac-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: 20px;
  align-items: start;
}

.admin-ac-panel {
  background: var(--ac-panel);
  border: 1px solid var(--ac-line);
  border-radius: var(--ac-radius-xl);
  box-shadow: var(--ac-shadow);
  overflow: hidden;
}

.admin-ac-panel--main {
  display: flex;
  flex-direction: column;
}

.admin-ac-panel-header {
  padding: 18px 22px;
  border-bottom: 1px solid var(--ac-line);
}

.admin-ac-panel-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.admin-ac-panel-sub {
  margin: 4px 0 0;
  color: var(--ac-muted);
  font-size: 13px;
}

.admin-ac-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 22px;
  border-bottom: 1px solid var(--ac-line);
  background: var(--ac-panel-soft);
}

.admin-ac-filter-pill {
  border: 1px solid var(--ac-line);
  background: #fff;
  color: var(--ac-text);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.admin-ac-filter-pill:hover {
  border-color: #c9d4e5;
}

.admin-ac-filter-pill.is-active {
  background: var(--ac-navy-deep, #0f1d36);
  color: #fff;
  border-color: transparent;
}

.admin-ac-task-list {
  padding: 10px;
}

.admin-ac-task-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 20px;
  border: 1px solid transparent;
  align-items: start;
  transition: background 0.18s ease, border-color 0.18s ease;
  margin-bottom: 6px;
}

.admin-ac-task-item--clickable {
  cursor: pointer;
}

.admin-ac-task-item--clickable:hover {
  background: var(--ac-panel-soft);
  border-color: var(--ac-line);
}

.admin-ac-task-item__dot {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  margin-top: 2px;
  flex-shrink: 0;
}

.admin-ac-task-item__dot--urgent {
  background: var(--ac-danger-soft);
  color: var(--ac-danger);
}
.admin-ac-task-item__dot--warning {
  background: var(--ac-warning-soft);
  color: var(--ac-warning);
}
.admin-ac-task-item__dot--info {
  background: var(--ac-accent-soft);
  color: var(--ac-accent);
}
.admin-ac-task-item__dot--normal {
  background: var(--ac-accent-soft);
  color: var(--ac-navy);
}

.admin-ac-task-item__title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 750;
  letter-spacing: -0.01em;
}

.admin-ac-task-item__body {
  margin: 0;
  color: var(--ac-muted);
  font-size: 13px;
  line-height: 1.55;
}

.admin-ac-task-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.admin-ac-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 750;
  background: var(--ac-panel-soft);
  color: #475569;
  border: 1px solid transparent;
}

.admin-ac-tag--red {
  background: var(--ac-danger-soft);
  color: var(--ac-danger);
}
.admin-ac-tag--orange {
  background: var(--ac-warning-soft);
  color: var(--ac-warning);
}
.admin-ac-tag--blue {
  background: var(--ac-accent-soft);
  color: var(--ac-accent);
}

.admin-ac-task-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  min-width: 120px;
}

.admin-ac-small-btn {
  border: 1px solid var(--ac-line);
  background: #fff;
  color: var(--ac-text);
  border-radius: 12px;
  padding: 8px 11px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  text-align: center;
  font-family: inherit;
  display: inline-block;
}

.admin-ac-small-btn--dark {
  background: linear-gradient(135deg, #205ab0 0%, #173d7f 100%);
  color: #fff;
  border-color: transparent;
}

.admin-ac-small-btn--ghost {
  background: transparent;
  font-weight: 700;
}

.admin-ac-handled-form {
  margin: 0;
}

.admin-ac-task-empty.is-hidden,
.admin-ac-task-empty[hidden] {
  display: none !important;
}

/* Lege staat actiecentrum-tijdlijn */
.admin-ac-empty-well {
  margin: 22px 20px 28px;
  padding: 28px 22px 32px;
  text-align: center;
  border-radius: var(--ac-radius-lg);
  border: 1px solid var(--ac-line);
  background: linear-gradient(165deg, var(--ac-panel-soft) 0%, var(--ac-panel) 55%, #fafcfe 100%);
  box-shadow: var(--ac-shadow);
}

.admin-ac-empty-well--timeline {
  margin-top: 8px;
}

.admin-ac-empty-well__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  background: var(--ac-accent-soft);
  color: var(--ac-accent);
}

.admin-ac-empty-well__icon--sm {
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
  font-size: 1.1rem;
}

.admin-ac-empty-well__title {
  margin: 0 0 10px;
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--ac-text);
  line-height: 1.3;
}

.admin-ac-empty-well__text {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--ac-muted);
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}

.admin-ac-empty-well__text a {
  color: var(--ac-accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.admin-ac-empty-well__text a:hover {
  text-decoration: none;
}

.admin-ac-empty-well__actions {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.admin-ac-empty-well[hidden],
.admin-ac-empty-well.is-hidden {
  display: none !important;
}

.admin-ac-side {
  display: grid;
  gap: 20px;
}

.admin-ac-side-pad {
  padding: 0 22px 18px;
}

.admin-ac-muted {
  margin: 0;
  color: var(--ac-muted);
  font-size: 0.92rem;
}

.admin-ac-timeline {
  padding: 8px 22px 20px;
}

.admin-ac-timeline-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ac-line);
}

.admin-ac-timeline-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.admin-ac-timeline-time {
  font-weight: 800;
  color: var(--ac-text);
  font-size: 13px;
}

.admin-ac-timeline-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.admin-ac-timeline-link strong {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
}

.admin-ac-timeline-link span {
  display: block;
  color: var(--ac-muted);
  font-size: 12px;
  line-height: 1.45;
}

.admin-ac-panel--cta {
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}

.admin-ac-cta-card {
  margin: 0;
  background: linear-gradient(145deg, #1e3a5f 0%, #2563eb 100%);
  border-radius: 22px;
  color: #fff;
  padding: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--ac-shadow);
}

.admin-ac-cta-card::after {
  content: '';
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  right: -55px;
  top: -50px;
}

.admin-ac-cta-card__title {
  margin: 0 0 8px;
  font-size: 18px;
  position: relative;
  z-index: 1;
}

.admin-ac-cta-card__text {
  margin: 0 0 14px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  line-height: 1.55;
  position: relative;
  z-index: 1;
}

.admin-ac-cta-card .admin-ac-btn {
  position: relative;
  z-index: 1;
}

.admin-ac-mini-list {
  padding: 6px 22px 20px;
}

.admin-ac-mini-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ac-line);
}

.admin-ac-mini-row:last-child {
  border-bottom: 0;
}

.admin-ac-mini-row strong {
  display: block;
  font-size: 13px;
  margin-bottom: 4px;
}

.admin-ac-mini-row span:not(.admin-ac-status) {
  color: var(--ac-muted);
  font-size: 12px;
}

.admin-ac-status {
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  background: var(--ac-accent-soft);
  color: var(--ac-accent);
  white-space: nowrap;
}

.admin-ac-status--red {
  background: var(--ac-danger-soft);
  color: var(--ac-danger);
}
.admin-ac-status--orange {
  background: var(--ac-warning-soft);
  color: var(--ac-warning);
}
.admin-ac-status--green {
  background: var(--ac-success-soft);
  color: var(--ac-success);
}

.admin-ac-leads-fallback {
  margin-top: 22px;
}

/* ---------- Actiecentrum v2 (Inter / Teamleader-achtige UI mock) ---------- */
.admin-ac--dashboard {
  --ac-navy-deep: #0f1d36;
  --ac-blue: #2563eb;
  --ac-blue-soft: #eaf1ff;
  --ac-green: #22c55e;
  --ac-green-soft: #eafaf1;
  --ac-orange: #f59e0b;
  --ac-orange-soft: #fff7e6;
  --ac-red: #ef4444;
  --ac-red-soft: #fff0f0;
  --ac-purple: #8b5cf6;
  --ac-purple-soft: #f4efff;
  --ac-shadow-lg: 0 20px 50px rgba(15, 29, 54, 0.08);
  --ac-radius-hero: 30px;
}

.admin-ac-strip {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.admin-ac-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, #112447 0%, #1f5bea 100%);
  color: #fff;
  border-radius: var(--ac-radius-hero);
  padding: 28px 30px;
  margin-bottom: 22px;
  box-shadow: 0 24px 60px rgba(37, 99, 235, 0.22);
  position: relative;
  overflow: hidden;
}

.admin-ac-hero::after {
  content: '';
  position: absolute;
  right: -70px;
  top: -80px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

.admin-ac-hero__text {
  position: relative;
  z-index: 1;
  max-width: 560px;
}

.admin-ac-hero__title {
  margin: 0 0 10px;
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.admin-ac-hero__lead {
  margin: 0;
  color: #dbe8ff;
  font-size: 0.95rem;
  line-height: 1.5;
}

.admin-ac-hero-stats {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}

.admin-ac-hero-stat {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  padding: 14px 18px;
  min-width: 118px;
}

.admin-ac-hero-stat strong {
  display: block;
  font-size: 1.55rem;
  font-weight: 800;
}

.admin-ac-hero-stat span {
  color: #dbe8ff;
  font-size: 0.8rem;
  font-weight: 600;
}

.admin-ac-priority-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.admin-ac-priority-card {
  background: #fff;
  border-radius: 22px;
  padding: 18px;
  border: 1px solid var(--ac-line);
  box-shadow: var(--ac-shadow-lg);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  position: relative;
  overflow: hidden;
  min-height: 128px;
  text-decoration: none;
  display: block;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.admin-ac-priority-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 48px rgba(15, 29, 54, 0.1);
}

.admin-ac-priority-card--static {
  cursor: default;
}

.admin-ac-priority-card--static:hover {
  transform: none;
}

.admin-ac-priority-card__icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  font-size: 1.05rem;
}

.admin-ac-priority-card--red .admin-ac-priority-card__icon {
  background: var(--ac-red-soft);
  color: var(--ac-red);
}

.admin-ac-priority-card--orange .admin-ac-priority-card__icon {
  background: var(--ac-orange-soft);
  color: var(--ac-orange);
}

.admin-ac-priority-card--blue .admin-ac-priority-card__icon {
  background: var(--ac-blue-soft);
  color: var(--ac-blue);
}

.admin-ac-priority-card--purple .admin-ac-priority-card__icon {
  background: var(--ac-purple-soft);
  color: var(--ac-purple);
}

.admin-ac-priority-card--green .admin-ac-priority-card__icon {
  background: var(--ac-green-soft);
  color: var(--ac-green);
}

.admin-ac-priority-card__title {
  font-size: 0.92rem;
  margin: 0 0 6px;
  font-weight: 700;
}

.admin-ac-priority-card__num {
  font-size: 1.65rem;
  font-weight: 800;
  display: block;
  letter-spacing: -0.02em;
}

.admin-ac-priority-card__hint {
  margin: 8px 0 0;
  color: var(--ac-muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.admin-ac-workspace {
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 420px);
  gap: 24px;
}

.admin-ac-panel-title--lg {
  font-size: 1.2rem;
}

.admin-ac-timeline-flow {
  padding: 8px 18px 20px;
}

.admin-ac-flow-row {
  display: block;
  padding: 16px 0;
  border-bottom: 1px solid var(--ac-line);
}

.admin-ac-flow-row[hidden] {
  display: none !important;
}

.admin-ac-flow-row:last-child {
  border-bottom: 0;
}

.admin-ac-flow-row[data-lead-id] {
  cursor: pointer;
}

.admin-ac-flow-row[data-lead-id]:focus-visible {
  outline: 2px solid var(--ac-blue, #2563eb);
  outline-offset: 2px;
}

.admin-ac-action-card {
  border: 1px solid var(--ac-line);
  border-radius: 20px;
  padding: 16px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: #fbfdff;
}

.admin-ac-action-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
}

.admin-ac-action-icon--urgent {
  background: var(--ac-red-soft);
  color: var(--ac-red);
}

.admin-ac-action-icon--warning {
  background: var(--ac-orange-soft);
  color: var(--ac-orange);
}

.admin-ac-action-icon--info {
  background: var(--ac-blue-soft);
  color: var(--ac-blue);
}

.admin-ac-action-icon--normal {
  background: var(--ac-blue-soft);
  color: var(--ac-navy);
}

.admin-ac-action-body {
  flex: 1;
  min-width: 0;
}

.admin-ac-action-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.admin-ac-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  background: var(--ac-panel-soft);
  color: #475569;
}

.admin-ac-badge--red {
  background: var(--ac-red-soft);
  color: var(--ac-red);
}

.admin-ac-badge--orange {
  background: var(--ac-orange-soft);
  color: #b45309;
}

.admin-ac-badge--blue {
  background: var(--ac-blue-soft);
  color: var(--ac-blue);
}

.admin-ac-badge--green {
  background: var(--ac-green-soft);
  color: #15803d;
}

.admin-ac-action-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 750;
}

.admin-ac-action-text {
  margin: 6px 0 12px;
  color: var(--ac-muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

.admin-ac-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.admin-ac-action-btn {
  height: 34px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--ac-line);
  background: #fff;
  font-weight: 800;
  font-size: 12px;
  color: #1e293b;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
}

.admin-ac-action-btn--primary {
  background: var(--ac-blue);
  border-color: var(--ac-blue);
  color: #fff;
}

.admin-ac-action-btn--ghost {
  background: transparent;
  font-weight: 700;
}

.admin-ac-action-btn--navy {
  background: var(--ac-navy-deep);
  border-color: var(--ac-navy-deep);
  color: #fff;
  margin-top: 8px;
}

.admin-ac-handled-form--inline {
  display: inline;
}

.admin-ac-widget {
  background: #fff;
  border-radius: var(--ac-radius-xl);
  border: 1px solid var(--ac-line);
  box-shadow: var(--ac-shadow-lg);
  overflow: hidden;
}

.admin-ac-widget-header {
  padding: 18px 20px;
  border-bottom: 1px solid var(--ac-line);
}

.admin-ac-widget-title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 800;
}

.admin-ac-widget-sub {
  margin: 6px 0 0;
  color: var(--ac-muted);
  font-size: 0.8rem;
}

.admin-ac-today-list {
  padding: 12px 20px 18px;
}

.admin-ac-today-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--ac-line);
}

.admin-ac-today-row:last-child {
  border-bottom: 0;
}

.admin-ac-today-row span {
  color: var(--ac-muted);
  font-size: 0.8rem;
}

.admin-ac-today-row strong {
  font-size: 1.1rem;
  font-weight: 800;
}

.admin-ac-widget--revenue {
  padding: 20px 22px 22px;
  background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 55%);
}

.admin-ac-revenue-title {
  margin: 0 0 6px;
  font-size: 1.02rem;
  font-weight: 800;
}

.admin-ac-revenue-note {
  margin: 0 0 4px;
  color: var(--ac-muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

.admin-ac-insight {
  display: flex;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--ac-line);
  align-items: flex-start;
}

.admin-ac-insight:last-child {
  border-bottom: 0;
}

.admin-ac-insight i {
  margin-top: 2px;
  flex-shrink: 0;
}

.admin-ac-insight strong {
  display: block;
  font-size: 0.88rem;
  margin-bottom: 4px;
}

.admin-ac-insight span {
  color: var(--ac-muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.admin-ac-fab {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 30;
  height: 54px;
  padding: 0 20px;
  border-radius: 999px;
  border: none;
  background: var(--ac-blue);
  color: #fff;
  font-weight: 800;
  font-size: 0.92rem;
  box-shadow: 0 20px 45px rgba(37, 99, 235, 0.35);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: inherit;
}

.admin-ac-fab:hover {
  filter: brightness(1.05);
}

.admin-card-pad {
  padding: 0 22px 22px;
}

@media (max-width: 1300px) {
  .admin-ac-priority-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1180px) {
  .admin-ac-workspace {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .admin-ac-topbar {
    flex-direction: column;
    align-items: stretch;
  }
  .admin-ac-top-actions {
    justify-content: flex-start;
  }
  .admin-ac-task-item {
    grid-template-columns: 1fr;
  }
  .admin-ac-task-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
  }
  .admin-ac-timeline-item {
    grid-template-columns: 1fr;
  }
}

.admin-projects-table-head {
  padding: 18px 22px 12px;
  border-bottom: 1px solid #edf2f7;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
}

.admin-projects-table-head__right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px 14px;
}

/* Hogere specificiteit dan `.admin-btn` (anders wint latere padding/min-height). */
.admin-btn.admin-btn-projects-add-prominent,
.admin-btn.admin-btn-customers-add-prominent {
  border-radius: 8px;
  padding: 5px 11px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 2.25;
  min-height: 0;
}

.admin-btn.admin-btn-projects-add-prominent {
  border: none;
  letter-spacing: 0.01em;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  background: linear-gradient(135deg, #059669 0%, #10b981 45%, #34d399 100%);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.admin-btn.admin-btn-projects-add-prominent:hover {
  filter: brightness(1.06);
  transform: none;
  box-shadow:
    0 4px 12px rgba(5, 150, 105, 0.38),
    0 1px 6px rgba(15, 23, 42, 0.1);
}

.admin-btn.admin-btn-projects-add-prominent:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px rgba(16, 185, 129, 0.48),
    0 4px 12px rgba(5, 150, 105, 0.32);
}

.admin-btn.admin-btn-projects-add-prominent:active {
  transform: translateY(1px);
}

.admin-btn.admin-btn-customers-add-prominent {
  border: none;
  letter-spacing: 0.01em;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  background: linear-gradient(135deg, #4338ca 0%, #6366f1 48%, #818cf8 100%);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.admin-btn.admin-btn-customers-add-prominent:hover {
  filter: brightness(1.06);
  transform: none;
  box-shadow:
    0 4px 12px rgba(79, 70, 229, 0.36),
    0 1px 6px rgba(15, 23, 42, 0.1);
}

.admin-btn.admin-btn-customers-add-prominent:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px rgba(99, 102, 241, 0.48),
    0 4px 12px rgba(67, 56, 202, 0.3);
}

.admin-btn.admin-btn-customers-add-prominent:active {
  transform: translateY(1px);
}

.admin-projects-per-page-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0;
}

.admin-projects-per-page-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: #5c6b82;
  margin: 0;
}

.admin-projects-per-page-select {
  min-width: 4.5rem;
  padding: 6px 10px;
  font-size: 0.88rem;
  border: 1px solid #d8e0ed;
  border-radius: 8px;
  background: #fff;
  color: #334155;
}

.admin-projects-page-range {
  color: #64748b;
  font-weight: 500;
}

.admin-projects-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 14px 22px 18px;
  border-top: 1px solid #f1f5f9;
  background: #fbfcfe;
}

.admin-projects-pagination-meta {
  font-size: 0.9rem;
  color: #5c6b82;
  font-weight: 600;
}

.admin-projects-result-count {
  margin: 0;
  font-size: 0.93rem;
  color: #5c6b82;
}

.admin-projects-filter-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: #eef4ff;
  color: #3659b8;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.admin-projects-empty {
  margin: 0;
  padding: 32px 22px;
  text-align: center;
  color: #6d7890;
  font-size: 0.95rem;
}

.admin-projects-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

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

.admin-projects-table thead th {
  text-align: left;
  padding: 12px 16px;
  background: #f8fafc;
  color: #64748b;
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid #e8eef5;
  white-space: nowrap;
}

.admin-projects-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: top;
  color: #334155;
}

.admin-projects-table tbody tr:hover td {
  background: #fafbff;
}

.admin-projects-table tbody tr.admin-projects-tr--view {
  cursor: pointer;
}

.admin-projects-table tbody tr.admin-projects-tr--view:hover td {
  background: #f0f5ff;
}

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

.admin-projects-th-num,
.admin-projects-td-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.admin-projects-td-muted {
  color: #7b879c;
  font-size: 0.88rem;
  white-space: nowrap;
}

.admin-projects-ref {
  font-size: 0.82rem;
  font-weight: 600;
  color: #475569;
  background: #f1f5f9;
  padding: 4px 8px;
  border-radius: 8px;
}

.admin-projects-cell-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  max-width: 280px;
}

.admin-project-address-maps {
  word-break: break-word;
}

.admin-projects-link {
  font-weight: 700;
  color: #17233c;
  text-decoration: none;
}

.admin-projects-link:hover {
  color: #4f7cff;
}

.admin-projects-sub {
  font-size: 0.84rem;
  color: #7b879c;
  line-height: 1.4;
}

.admin-projects-type-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eef4ff;
  color: #3659b8;
  font-size: 0.78rem;
  font-weight: 700;
}

/* E-mailsjablonen: volgorde (sleep + pijltjes) */
.admin-email-templates-col-drag {
  width: 2.75rem;
  text-align: center;
  vertical-align: middle;
}

.admin-email-template-drag-handle {
  display: inline-block;
  cursor: grab;
  user-select: none;
  color: #7b879c;
  font-size: 1rem;
  letter-spacing: -0.12em;
  padding: 4px 6px;
  line-height: 1;
  border-radius: 8px;
}

.admin-email-template-drag-handle:hover {
  color: #3659b8;
  background: #f0f4ff;
}

.admin-email-template-drag-handle:active {
  cursor: grabbing;
}

.admin-email-templates-tr--dragging {
  opacity: 0.55;
}

@media (max-width: 960px) {
  .admin-email-templates-table tbody td.admin-email-templates-col-drag::before {
    display: none;
  }

  .admin-email-templates-table tbody td.admin-email-templates-col-drag {
    justify-content: center;
  }

  .admin-projects-table,
  .admin-projects-table thead,
  .admin-projects-table tbody,
  .admin-projects-table th,
  .admin-projects-table td,
  .admin-projects-table tr {
    display: block;
  }

  .admin-projects-table thead {
    display: none;
  }

  .admin-projects-table tbody tr {
    border: 1px solid #e8eef5;
    border-radius: 16px;
    padding: 14px 16px;
    margin: 0 14px 14px;
    background: #fff;
  }

  .admin-projects-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    padding: 8px 0;
    border-bottom: 1px solid #eef3f8;
  }

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

  .admin-projects-table tbody td::before {
    content: attr(data-label);
    font-weight: 700;
    color: #7b879c;
    min-width: 100px;
    font-size: 0.8rem;
    flex-shrink: 0;
  }

  .admin-projects-cell-title {
    max-width: none;
    text-align: right;
  }

  .admin-projects-td-num {
    text-align: right;
  }
}

@media (max-width: 640px) {
  .admin-projects-search-card {
    padding: 16px;
  }

  .admin-projects-search-advanced-wrap {
    padding-top: 12px;
  }

  .admin-projects-search-advanced-summary {
    width: 100%;
    max-width: none;
    justify-content: center;
    padding: 10px 16px;
    font-size: 0.8rem;
  }

  .admin-projects-search-advanced[open] .admin-projects-search-advanced-body {
    padding: 14px;
  }

  .admin-projects-search-grid {
    grid-template-columns: 1fr;
  }

  .admin-projects-search-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .admin-customers-filter-type {
    flex: 1 1 auto;
    width: 100%;
  }

  .admin-projects-search-row__actions {
    width: 100%;
    justify-content: stretch;
    gap: 10px;
  }

  .admin-projects-search-row__actions .admin-btn {
    flex: 1;
    min-width: 0;
    justify-content: center;
  }

  .admin-projects-search-strip .admin-projects-search-toolbar-line {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-projects-search-strip .admin-projects-search-card--topbar {
    padding-left: 16px;
    padding-right: 16px;
  }

  .admin-projects-search-strip .admin-projects-search-row__actions {
    width: 100%;
    justify-content: stretch;
  }
}

/* =========================================
   ADMIN SETTINGS PAGE
========================================= */

.admin-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 28px;
}

/* Alleen knoppen in de header (titel staat in de topbar) */
.admin-page-header:has(> .admin-page-header-actions:only-child) {
  justify-content: flex-end;
}

.admin-page-header h1 {
  margin: 0 0 8px;
  font-size: 2rem;
  line-height: 1.1;
  color: #17233c;
  font-weight: 800;
}

.admin-page-header p {
  margin: 0;
  color: #6d7890;
  font-size: 1rem;
}

/* Detailpagina (project / installatie): acties compact in header, Teamleader-achtig */
.admin-page-header--detail {
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px 20px;
}

.admin-page-header--detail .admin-page-header-actions.admin-detail-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  max-width: 100%;
}

.admin-project-status-quick-hint {
  width: 100%;
  flex-basis: 100%;
  margin: 6px 0 0;
  padding: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: #64748b;
  text-align: right;
  max-width: 100%;
}

.admin-detail-header-actions__delete {
  margin: 0;
}

.admin-btn-toolbar-delete {
  margin: 0;
  padding: 7px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  color: #fff;
  background: #ea580c;
  box-shadow: 0 1px 2px rgba(234, 88, 12, 0.35);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.admin-btn-toolbar-delete:hover {
  opacity: 0.95;
  transform: translateY(-1px);
}

.admin-segmented {
  display: inline-flex;
  align-items: stretch;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.admin-segmented__cell {
  display: flex;
  margin: 0;
}

.admin-segmented__cell + .admin-segmented__cell {
  border-left: 1px solid #e8eef5;
}

.admin-segmented__item,
.admin-segmented__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #334155;
  background: #fff;
  border: none;
  white-space: nowrap;
  font-family: inherit;
}

.admin-segmented__btn {
  cursor: pointer;
  transition: background 0.15s ease;
}

.admin-segmented__btn:hover {
  background: #f1f5f9;
}

.admin-segmented__item--active {
  background: #17233c;
  color: #fff;
  cursor: default;
}

.admin-segmented__btn--active {
  background: #17233c;
  color: #fff;
  cursor: pointer;
}

.admin-segmented__btn--active:hover {
  background: #243352;
  color: #fff;
}

/* Project detailpagina: duidelijke tint over volledige viewport (niet alleen .admin-main) */
.admin-page.admin-page--project-pipeline {
  background: linear-gradient(180deg, #e3efff 0%, #eef4fb 38%, #f6f8fc 72%);
}

.admin-page.admin-page--project-inactive {
  background: linear-gradient(180deg, #ffecd9 0%, #f8f2ea 38%, #f6f8fc 72%);
}

.admin-page.admin-page--project-lost {
  background: linear-gradient(180deg, #e8eaed 0%, #f0f1f4 38%, #f6f8fc 72%);
}

.admin-page.admin-page--project-completed {
  background: linear-gradient(180deg, #e6f4ec 0%, #eef6f1 38%, #f6f8fc 72%);
}

.admin-page.admin-page--project-pipeline .admin-main,
.admin-page.admin-page--project-inactive .admin-main,
.admin-page.admin-page--project-lost .admin-main,
.admin-page.admin-page--project-completed .admin-main {
  background: transparent;
}

.admin-installation-edit-main {
  max-width: 920px;
}

/* Project bekijken — v2 één pagina (mock Visibo projectdetail) */
.pv2-page {
  --pv2-navy: #101d3a;
  --pv2-navy-2: #16284d;
  --pv2-blue: #2367ff;
  --pv2-sky: #eaf4ff;
  --pv2-card: #ffffff;
  --pv2-line: #dce7f5;
  --pv2-muted: #6b7b96;
  --pv2-text: #071b3d;
  --pv2-orange: #ff5a0a;
  --pv2-orange-soft: #fff0e6;
  --pv2-green: #16a34a;
  --pv2-green-soft: #eaf9ef;
  --pv2-yellow: #f59e0b;
  --pv2-yellow-soft: #fff5dc;
  --pv2-shadow: 0 18px 45px rgba(16, 29, 58, 0.08);
  --pv2-radius: 22px;
  width: 100%;
  max-width: 1260px;
  margin: 0 auto;
  padding: 8px 0 48px;
  box-sizing: border-box;
}

.pv2-details-toolbar,
.pv2-content-card {
  background: var(--pv2-card);
  border: 1px solid var(--pv2-line);
  border-radius: var(--pv2-radius);
  box-shadow: var(--pv2-shadow);
}

.pv2-details-toolbar {
  padding: 20px 22px;
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pv2-details-toolbar__top {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.pv2-details-toolbar__titles {
  min-width: 0;
}

.pv2-details-toolbar__project {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 750;
  line-height: 1.2;
  color: var(--pv2-navy);
}

.pv2-details-toolbar__meta {
  margin: 6px 0 0;
  color: var(--pv2-muted);
  font-size: 0.92rem;
}

.pv2-details-toolbar__status {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
}

.pv2-back-btn {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 0;
  background: #eef5ff;
  color: var(--pv2-navy);
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.pv2-status-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.pv2-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 750;
  font-size: 0.8rem;
}

.pv2-badge--neutral {
  background: #eaf1ff;
  color: #2457d6;
}

.pv2-badge--orange {
  background: var(--pv2-orange-soft);
  color: #b43b00;
}

.pv2-badge--yellow {
  background: var(--pv2-yellow-soft);
  color: #9a6100;
}

.pv2-hero-segmented.admin-segmented {
  border-radius: 13px;
}

.admin-segmented--project-status {
  flex-wrap: wrap;
  max-width: 100%;
}

.admin-segmented--project-status .admin-segmented__cell {
  flex: 1 1 auto;
  min-width: 0;
}

.admin-segmented--project-status .admin-segmented__btn {
  min-width: 0;
  padding: 0 10px;
}

.pv2-mobile-tabs {
  display: none;
  gap: 8px;
  overflow: auto;
  padding-bottom: 8px;
  margin-bottom: 14px;
}

.pv2-mobile-tabs button {
  white-space: nowrap;
  border: 1px solid var(--pv2-line);
  background: #fff;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 750;
  color: #334763;
  cursor: pointer;
  font: inherit;
}

.pv2-mobile-tabs button.is-active {
  background: var(--pv2-navy);
  color: #fff;
  border-color: var(--pv2-navy);
}

.pv2-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 20px;
  align-items: start;
}

.pv2-sidebar {
  position: sticky;
  /* Onder .admin-topbar (sticky, z-index 90): offset = volledige topbarhoogte + kleine marge */
  top: calc(var(--admin-topbar-offset, 132px) + 12px);
  z-index: 45;
  display: grid;
  gap: 14px;
}

.pv2-nav-card {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--pv2-line);
  border-radius: 22px;
  padding: 10px;
  box-shadow: 0 12px 30px rgba(16, 29, 58, 0.05);
}

.pv2-nav-item {
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: 16px;
  padding: 14px;
  text-align: left;
  display: flex;
  gap: 12px;
  align-items: center;
  cursor: pointer;
  color: #3a4d70;
  font-weight: 750;
  font: inherit;
}

.pv2-nav-item i {
  width: 22px;
  text-align: center;
  color: #7b8ca8;
}

.pv2-nav-item.is-active {
  background: var(--pv2-navy);
  color: #fff;
  box-shadow: 0 12px 25px rgba(16, 29, 58, 0.16);
}

.pv2-nav-item.is-active i {
  color: #fff;
}

.pv2-nav-pill {
  margin-left: auto;
  background: #eef5ff;
  color: #244d90;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 0.75rem;
  font-weight: 700;
}

.pv2-nav-item.is-active .pv2-nav-pill {
  background: #fff;
  color: var(--pv2-navy);
}

.pv2-nav-group {
  display: grid;
  gap: 4px;
}

.pv2-nav-sub {
  display: grid;
  gap: 2px;
  padding: 0 0 6px 14px;
  margin: -2px 0 2px 10px;
  border-left: 2px solid rgba(26, 48, 80, 0.14);
}

.pv2-nav-sub-item {
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: 12px;
  padding: 9px 12px 9px 10px;
  text-align: left;
  display: flex;
  gap: 10px;
  align-items: center;
  cursor: pointer;
  color: #4a5d79;
  font-weight: 650;
  font-size: 0.86rem;
  font: inherit;
}

.pv2-nav-sub-item i {
  width: 18px;
  text-align: center;
  font-size: 0.85rem;
  color: #8b9cba;
}

.pv2-nav-sub-item:hover {
  background: rgba(26, 48, 80, 0.06);
  color: var(--pv2-navy);
}

.pv2-nav-sub-item.is-active {
  background: rgba(26, 48, 80, 0.11);
  color: var(--pv2-navy);
  font-weight: 750;
}

.pv2-nav-sub-item.is-active i {
  color: var(--pv2-navy);
}

.pv2-mobile-tabs__sub {
  font-size: 0.82rem !important;
  padding: 8px 12px !important;
  font-weight: 650 !important;
  opacity: 0.92;
}

.pv2-mobile-tabs__sub.is-active {
  opacity: 1;
}

/* Documenten-subsecties: zelfde scroll-marge als .pv2-section */
#pv2-doc-onedrive,
#pv2-doc-visibo {
  scroll-margin-top: calc(var(--admin-topbar-offset, 132px) + 18px);
}

/* Documenten-sectie: twee losse kaarten (OneDrive + Visibo-drive), geen buitenste card */
#pv2-section-documents,
.pv2-section--documents {
  width: 100%;
  max-width: none;
  align-self: stretch;
  box-sizing: border-box;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Twee afzonderlijke kaarten: OneDrive (Microsoft-blauw) vs Visibo-drive (merk-navy) */
.pv2-doc-card {
  margin: 0;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(16, 29, 58, 0.07);
  background: #fff;
}

#pv2-section-documents .pv2-doc-card + .pv2-doc-card {
  margin-top: 0;
}

.pv2-doc-card--onedrive {
  border: 1px solid rgba(0, 103, 184, 0.22);
  border-left: 4px solid #0078d4;
  background: #fff;
  box-shadow: 0 10px 28px rgba(0, 103, 184, 0.07);
}

/* Opgeslagen deellink: lange URL netjes laten afbreken binnen de card. */
.admin-onedrive-share-url-row {
  min-width: 0;
}

.admin-onedrive-share-url {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-all;
}

/* Inklapbare OneDrive-verkenner: knop om het blader-gedeelte te tonen/verbergen. */
.admin-onedrive-browse-toggle-row {
  margin: 4px 0 2px;
}

.admin-onedrive-browse-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.admin-onedrive-browse-toggle__chev {
  transition: transform 0.2s ease;
  font-size: 0.8em;
}

.admin-onedrive-browse-toggle.is-open .admin-onedrive-browse-toggle__chev {
  transform: rotate(180deg);
}

/* Twee actieknoppen wanneer er nog geen deellink is */
.admin-onedrive-actions__lead {
  margin: 0 0 12px;
}

.admin-onedrive-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-onedrive-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

/* Modals voor bladeren / handmatige URL */
.admin-onedrive-modal {
  width: min(760px, 100%);
  max-width: 760px;
}

.admin-onedrive-modal--manual {
  width: min(620px, 100%);
  max-width: 620px;
}

.admin-onedrive-modal .admin-modal-header h3 {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.admin-onedrive-modal .admin-modal-header h3 i {
  color: #0067b8;
}

/* In de modal staat de verkenner altijd open: geen extra randen/marges nodig */
.admin-onedrive-modal .admin-modal-body .admin-onedrive-manual-url {
  margin: 0;
}

/* OneDrive-kaart op instellingenpagina */
.admin-settings-onedrive-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-settings-onedrive-card__logo {
  flex: 0 0 auto;
}

.admin-settings-onedrive-status {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  margin: 4px 0 14px;
}

.admin-settings-onedrive-status--ok {
  background: #ecfdf3;
  border: 1px solid #abefc6;
}

.admin-settings-onedrive-status--off {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.admin-settings-onedrive-status__badge {
  flex: 0 0 auto;
  font-size: 1.2rem;
  line-height: 1;
  margin-top: 1px;
}

.admin-settings-onedrive-status--ok .admin-settings-onedrive-status__badge {
  color: #16a34a;
}

.admin-settings-onedrive-status--off .admin-settings-onedrive-status__badge {
  color: #94a3b8;
}

.admin-settings-onedrive-status__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.admin-settings-onedrive-status__account {
  color: #1e3a5f;
  font-size: 0.92rem;
  word-break: break-word;
}

.admin-settings-onedrive-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.admin-settings-onedrive-disconnect {
  color: #b42318;
  border-color: #fecdca;
}

.admin-settings-onedrive-disconnect:hover {
  background: #fef3f2;
}

/* OneDrive-integratiepagina */
.admin-onedrive-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.admin-onedrive-grid > .admin-card {
  margin: 0;
}

@media (max-width: 900px) {
  .admin-onedrive-grid {
    grid-template-columns: 1fr;
  }
}

.admin-onedrive-card {
  overflow: hidden;
}

.admin-onedrive-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 12px;
  background: linear-gradient(135deg, #eaf3fc 0%, #f6fbff 100%);
  border: 1px solid #d6e6f5;
  margin-bottom: 18px;
}

.admin-onedrive-hero__logo {
  flex: 0 0 auto;
  display: inline-flex;
}

.admin-onedrive-hero__logo img {
  display: block;
}

.admin-onedrive-hero__text {
  flex: 1 1 auto;
  min-width: 0;
}

.admin-onedrive-hero__text h2 {
  margin: 0;
  font-size: 1.15rem;
  color: #055a9e;
}

.admin-onedrive-hero__text p {
  margin: 4px 0 0;
  color: #475569;
  font-size: 0.9rem;
}

.admin-onedrive-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}

.admin-onedrive-pill--ok {
  background: #ecfdf3;
  color: #15803d;
  border: 1px solid #abefc6;
}

.admin-onedrive-pill--off {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.admin-onedrive-pill--warn {
  background: #fffaeb;
  color: #b54708;
  border: 1px solid #fedf89;
}

.admin-onedrive-card__lead {
  margin: 0 0 16px;
  color: #475569;
}

.admin-onedrive-facts {
  margin: 0 0 18px;
  display: grid;
  gap: 0;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
}

.admin-onedrive-facts__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
}

.admin-onedrive-facts__row + .admin-onedrive-facts__row {
  border-top: 1px solid #eef2f7;
}

.admin-onedrive-facts dt {
  flex: 0 0 170px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #64748b;
  font-size: 0.88rem;
}

.admin-onedrive-facts dt i {
  color: #94a3b8;
}

.admin-onedrive-facts dd {
  margin: 0;
  color: #1e293b;
  font-weight: 600;
  word-break: break-word;
}

.admin-onedrive-actions-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.admin-onedrive-actions-bar form {
  margin: 0;
  display: inline;
}

.admin-onedrive-connect-btn i,
.admin-onedrive-actions-bar .admin-btn i {
  margin-right: 7px;
}

.admin-onedrive-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: 10px;
  background: #fffaeb;
  border: 1px solid #fedf89;
}

.admin-onedrive-note i {
  color: #b54708;
  margin-top: 2px;
}

.admin-onedrive-note p {
  margin: 0;
  color: #7a4d09;
}

.admin-onedrive-hero__logo--billit {
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #d6e6f5;
  color: #055a9e;
  font-size: 1.5rem;
}

.admin-integration-checklist {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 12px;
}

.admin-integration-checklist__item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}

.admin-integration-checklist__item.is-done {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.admin-integration-checklist__item.is-pending {
  background: #fffbeb;
  border-color: #fde68a;
}

.admin-integration-checklist__icon {
  flex: 0 0 auto;
  margin-top: 2px;
  font-size: 1.05rem;
}

.admin-integration-checklist__item.is-done .admin-integration-checklist__icon {
  color: #16a34a;
}

.admin-integration-checklist__item.is-pending .admin-integration-checklist__icon {
  color: #d97706;
}

.admin-integration-checklist__item strong {
  display: block;
  color: #1e293b;
}

.admin-integration-checklist__item p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 0.9rem;
}

.admin-integration-code {
  font-size: 0.82rem;
  font-weight: 500;
  word-break: break-all;
}

.admin-onedrive-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.admin-onedrive-steps li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.admin-onedrive-steps__num {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e9f3ff;
  color: #055a9e;
  font-weight: 800;
  font-size: 0.92rem;
}

.admin-onedrive-steps strong {
  display: block;
  color: #1e293b;
}

.admin-onedrive-steps p {
  margin: 3px 0 0;
  color: #64748b;
  font-size: 0.9rem;
}

@media (max-width: 620px) {
  .admin-onedrive-hero {
    flex-wrap: wrap;
  }

  .admin-onedrive-pill {
    order: 3;
  }

  .admin-onedrive-facts__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .admin-onedrive-facts dt {
    flex-basis: auto;
  }
}

.pv2-doc-card--onedrive .admin-card-header {
  background: #fff;
  border-bottom: 1px solid rgba(0, 103, 184, 0.16);
}

.pv2-doc-card--onedrive .admin-card-header h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #055a9e;
  font-size: 1.15rem;
}

.pv2-doc-card--onedrive .admin-card-header h2::before {
  content: '';
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 10px;
  background: linear-gradient(145deg, #0078d4 0%, #005a9e 100%);
  box-shadow: 0 3px 10px rgba(0, 103, 184, 0.32);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z'/%3E%3C/svg%3E") center / 26px 26px no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z'/%3E%3C/svg%3E") center / 26px 26px no-repeat;
}

/* OneDrive: echte logo + lede (overschrijft ::before op losse h2; bij nieuwe card-head uit) */
.pv2-doc-card--onedrive .admin-project-onedrive-panel__card-head h2::before {
  display: none !important;
  content: none !important;
  mask: none !important;
  -webkit-mask: none !important;
  width: 0 !important;
  height: 0 !important;
}

.pv2-doc-card--onedrive .admin-project-onedrive-panel__card-head {
  align-items: flex-start;
  margin-bottom: 16px;
}

.pv2-doc-card--onedrive .admin-project-onedrive-panel__card-head-inner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

.pv2-doc-card--onedrive .admin-project-onedrive-panel__card-head-logo {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.pv2-doc-card--onedrive .admin-project-onedrive-panel__card-head-text {
  min-width: 0;
}

.pv2-doc-card--onedrive .admin-project-onedrive-panel__card-head h2 {
  display: block;
  margin: 0 0 6px;
  font-size: 1.15rem;
  font-weight: 800;
  color: #0c4a6e;
  letter-spacing: -0.02em;
}

.pv2-doc-card--onedrive .admin-project-onedrive-panel__card-head-lede {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: #64748b;
  max-width: 52ch;
}

/* Sectie-kop iconen (projectweergave v2): kleurrijke tegels, in lijn met het OneDrive-logo. */
.pv2-section .admin-card-header h2,
.pv2-doc-card .admin-card-header h2 {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.admin-card-header h2 .admin-section-title-icon,
.admin-section-head .admin-section-title-icon,
.admin-section-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  font-size: 1.02rem;
  line-height: 1;
  text-align: center;
}

.admin-section-title-icon {
  color: #1b3a6b;
  background: #eef4ff;
}

/* Kop met icoon-tegel links en titel + beschrijving als kolom ernaast (zoals OneDrive). */
.admin-section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.admin-section-head__text {
  min-width: 0;
}

.admin-section-head__text h2 {
  margin: 0;
}

.admin-section-head__text p {
  margin: 4px 0 0;
}

.admin-section-title-icon--info {
  color: #2563eb;
  background: #dbeafe;
}

.admin-section-title-icon--install {
  color: #d97706;
  background: #fef3c7;
}

.admin-section-title-icon--requests {
  color: #0d9488;
  background: #ccfbf1;
}

.admin-section-title-icon--customers {
  color: #4f46e5;
  background: #e0e7ff;
}

.admin-section-title-icon--qr {
  color: #7c3aed;
  background: #ede9fe;
}

.admin-section-title-icon--visits {
  color: #16a34a;
  background: #dcfce7;
}

.admin-section-title-icon--history {
  color: #e11d48;
  background: #ffe4e6;
}

.admin-section-title-icon--drive {
  color: #0284c7;
  background: #e0f2fe;
}

.pv2-doc-card--visibo {
  border: 1px solid rgba(26, 48, 80, 0.14);
  border-left: 4px solid var(--pv2-navy, #0f1f3d);
  background: #fff;
  box-shadow: 0 10px 28px rgba(16, 29, 58, 0.08);
}

.pv2-doc-card--visibo .admin-card-header {
  background: #fff;
  border-bottom: 1px solid rgba(26, 48, 80, 0.12);
}

.pv2-doc-card--visibo .admin-card-header h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--pv2-navy, #0f1f3d);
  font-size: 1.15rem;
}

.pv2-doc-card--visibo .admin-card-header h2::before {
  display: none !important;
  content: none !important;
  mask: none !important;
  -webkit-mask: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Visibo-drive: grotere map/bestand-iconen (emoji) in de documentlijst */
#pv2-doc-visibo .admin-file-explorer__icon {
  font-size: 1.5rem;
  line-height: 1;
  margin-right: 10px;
  vertical-align: -0.18em;
}

/* Visibo-drive: shell, toolbar en actieknoppen (icoontjes + gelijk aan admin UI) */
#pv2-doc-visibo .admin-file-explorer__main-sheet {
  border: 1px solid rgba(26, 48, 80, 0.12);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  margin: 0 0 14px;
  box-shadow: 0 1px 3px rgba(15, 31, 61, 0.05);
}

#pv2-doc-visibo .admin-file-explorer__toolbar {
  padding: 12px 18px 14px;
  background: linear-gradient(180deg, #fafbfd 0%, #f1f4f9 100%);
  border-bottom: 1px solid #e2e8f0;
}

#pv2-doc-visibo .admin-file-explorer__drop {
  margin: 0;
  border-radius: 0;
}

#pv2-doc-visibo .admin-file-explorer__panel--template {
  box-shadow: 0 1px 4px rgba(15, 31, 61, 0.06);
}

#pv2-doc-visibo .admin-card-header-actions .admin-btn,
#pv2-doc-visibo .admin-file-explorer__template-form .admin-btn,
#pv2-doc-visibo .admin-file-explorer__toolbar-actions .admin-btn,
#pv2-doc-visibo .admin-file-explorer__actions .admin-btn,
#pv2-doc-visibo .admin-file-explorer__actions .admin-file-explorer__file-pick,
#pv2-doc-visibo .admin-file-explorer__action-card .admin-btn,
#pv2-doc-visibo .admin-file-explorer__row-actions .admin-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#pv2-doc-visibo .admin-file-explorer__rename-summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#pv2-doc-visibo .admin-file-explorer__rename-summary::before {
  content: none;
  margin: 0;
}

#pv2-doc-visibo .admin-file-explorer__rename-summary .fa-solid {
  font-size: 0.92em;
  opacity: 0.95;
}

#pv2-doc-visibo .admin-file-explorer__btn-delete {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}

#pv2-doc-visibo .admin-file-explorer__btn-delete .fa-solid {
  font-size: 0.92em;
}

.pv2-danger-card {
  background: #fff;
  border: 1px solid #ffd7c5;
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 12px 30px rgba(255, 90, 10, 0.06);
}

.pv2-danger-card h4 {
  margin: 0 0 8px;
  color: #b43b00;
}

.pv2-danger-card p {
  margin: 0 0 14px;
  color: var(--pv2-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.pv2-btn {
  border: 0;
  border-radius: 13px;
  padding: 12px 17px;
  font-weight: 750;
  cursor: pointer;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  font: inherit;
}

.pv2-btn-orange {
  background: var(--pv2-orange);
  color: #fff;
  box-shadow: 0 12px 24px rgba(255, 90, 10, 0.18);
}

.pv2-main {
  display: grid;
  gap: 18px;
  min-width: 0;
  width: 100%;
}

/* Documenten moet boven Historie staan in de one-page flow */
#pv2-section-documents {
  order: 70;
}

#pv2-section-financial {
  order: 75;
}

#pv2-section-portal-visits {
  order: 77;
}

#pv2-section-history {
  order: 80;
}

.pv2-section--financial {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.pv2-content-card {
  padding: 0;
  overflow: hidden;
}

/* Zorg dat scrollTo/scrollIntoView onder sticky admin-topbar + tabrij stopt */
#pv2-overview,
.pv2-section {
  scroll-margin-top: calc(var(--admin-topbar-offset, 132px) + 18px);
}

.pv2-content-card > .admin-card:not(.pv2-doc-card),
.pv2-content-card #project-linked-customers-mount > .admin-card,
.pv2-content-card #project-linked-qr-mount > .admin-card {
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.pv2-content-card > .admin-card:not(.pv2-doc-card) .admin-card-header h2,
.pv2-content-card #project-linked-customers-mount > .admin-card .admin-card-header h2,
.pv2-content-card #project-linked-qr-mount > .admin-card .admin-card-header h2 {
  font-size: 1.25rem;
  color: var(--pv2-navy);
}

.pv2-content-card > .admin-card .admin-form-hint,
.pv2-content-card > .admin-card .admin-project-installations-lead,
.pv2-content-card > .admin-card .admin-project-history-tab__lead,
.pv2-content-card #project-linked-customers-mount > .admin-card .admin-form-hint,
.pv2-content-card #project-linked-qr-mount > .admin-card .admin-form-hint {
  color: var(--pv2-muted);
}

@media (max-width: 1050px) {
  .pv2-layout {
    grid-template-columns: 1fr;
  }

  .pv2-sidebar {
    position: static;
  }

  .pv2-nav-card {
    display: none;
  }

  .pv2-mobile-tabs {
    display: flex;
  }

  .pv2-details-toolbar__status {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .pv2-page {
    padding-bottom: 36px;
  }

  .pv2-details-toolbar {
    padding: 16px 14px;
  }

  .pv2-details-toolbar__project {
    font-size: 1.15rem;
  }
}

/* Project bekijken: tabs + enkele inhoudskolom (breder voor o.a. documenten) */
.admin-project-view-tabs-wrap {
  width: 100%;
  max-width: 1180px;
}

.admin-project-view-tabs-wrap .admin-maintenance-tabs {
  margin-bottom: 20px;
}

.admin-project-view-tabs-wrap .admin-project-view-main {
  max-width: none;
  margin: 0;
}

.admin-project-view-page .admin-project-view-tabs-wrap .admin-project-installations-card {
  margin-top: 0;
}

/* Lege plek als de chatkaart tijdelijk in de fullscreen-laag zit */
.pv2-chat-inline-mount:empty {
  min-height: 5rem;
}

/* Chat volledig scherm: vaste laag onder bestaande chat-modals (z-index 12040) */
.pv2-chat-fullscreen-layer {
  position: fixed;
  inset: 0;
  z-index: 11900;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  max-height: 100dvh;
}

.pv2-chat-fullscreen-layer[hidden] {
  display: none !important;
}

.pv2-chat-fullscreen-layer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.48);
}

.pv2-chat-fullscreen-layer__sheet {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  max-height: 100dvh;
  width: min(100%, 1320px);
  margin: max(10px, env(safe-area-inset-top, 0px)) auto max(10px, env(safe-area-inset-bottom, 0px));
  padding-left: max(12px, env(safe-area-inset-left, 0px));
  padding-right: max(12px, env(safe-area-inset-right, 0px));
  box-sizing: border-box;
}

.pv2-chat-fullscreen-layer__bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--vc-line, #dce7f5);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);
}

.pv2-chat-fullscreen-layer__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--vc-navy, #101d3a);
}

.pv2-chat-fullscreen-layer__close {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 14px;
  background: #f1f5f9;
  color: #0f172a;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
}

.pv2-chat-fullscreen-layer__close:hover,
.pv2-chat-fullscreen-layer__close:focus-visible {
  background: #e2e8f0;
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

.pv2-chat-fullscreen-layer__body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overscroll-behavior: contain;
  background: #fff;
  border: 1px solid var(--vc-line, #dce7f5);
  border-top: 0;
  border-radius: 0 0 18px 18px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}

.pv2-chat-fullscreen-layer__body .visibo-chat-card {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin: 0;
  max-width: none;
  width: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.pv2-chat-fullscreen-layer__body .visibo-chat-layout {
  flex: 1;
  min-height: 0;
  max-height: none;
}

.pv2-chat-fullscreen-layer__body .visibo-chat-column {
  max-height: none;
}

.pv2-chat-fullscreen-layer__body .visibo-chat-messages {
  flex: 1;
  min-height: 200px;
  max-height: none;
}

body.pv2-chat-fs-open {
  overflow: hidden;
}

@media (max-width: 640px) {
  .pv2-chat-fullscreen-layer__sheet {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    max-height: 100dvh;
  }

  .pv2-chat-fullscreen-layer__bar {
    border-radius: 0;
    padding: 12px 14px;
  }

  .pv2-chat-fullscreen-layer__body {
    border-radius: 0;
  }

  .pv2-chat-fullscreen-layer__body .visibo-chat-layout {
    min-height: min(640px, calc(100dvh - 120px));
  }
}

@media (max-width: 900px) {
  .pv2-chat-fullscreen-layer__body .visibo-chat-column {
    max-height: min(46vh, 400px);
  }
}

.admin-installations-table__row-click {
  cursor: pointer;
  transition: background 0.12s ease;
}

.admin-installations-table__row-click:hover td {
  background: #f1f5f9;
}

.admin-installations-table__row-click:focus {
  outline: 2px solid #4f7cff;
  outline-offset: -2px;
}

.admin-projects-link--table {
  color: #1e40af;
  font-weight: 700;
}

.admin-installations-table__row-click:hover .admin-projects-link--table {
  text-decoration: underline;
}

/* Inline knop die eruitziet als een link (lege staat installaties) */
.admin-btn-link-in-text {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #ea580c;
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.admin-btn-link-in-text:hover {
  color: #c2410c;
}

.admin-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  background: #fff;
  color: #475569;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.admin-icon-btn:hover {
  border-color: #4f7cff;
  color: #4f7cff;
  background: #f8fafc;
  box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.12);
}

.admin-icon-btn:focus {
  outline: none;
  border-color: #4f7cff;
  box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.2);
}

/* Native <dialog> project-editor: gecentreerd + sleep via header (los van div.admin-modal in maintenance) */
dialog.admin-dialog-native {
  padding: 0;
  border: none;
  border-radius: 6px;
  max-width: min(720px, 94vw);
  width: min(720px, 94vw);
  max-height: min(90vh, 860px);
  background: #fff;
  box-shadow: 0 24px 56px rgba(15, 23, 42, 0.22);
  margin: 0;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

dialog.admin-dialog-native::backdrop {
  background: rgba(15, 23, 42, 0.48);
}

dialog.admin-dialog-native .admin-modal__form {
  display: flex;
  flex-direction: column;
  margin: 0;
  max-height: min(88vh, 860px);
}

dialog.admin-dialog-native .admin-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid #edf2f7;
  flex-shrink: 0;
  cursor: move;
  user-select: none;
}

dialog.admin-dialog-native .admin-modal__head h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: #17233c;
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}

dialog.admin-dialog-native .admin-modal__close {
  border: none;
  background: transparent;
  font-size: 1.65rem;
  line-height: 1;
  cursor: pointer;
  color: #64748b;
  padding: 2px 8px;
  border-radius: 10px;
  flex-shrink: 0;
}

dialog.admin-dialog-native .admin-modal__close:hover {
  background: #f1f5f9;
  color: #17233c;
}

dialog.admin-dialog-native .admin-modal__body {
  padding: 8px 14px 6px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

dialog.admin-dialog-native .admin-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 6px 8px;
  padding: 8px 14px 10px;
  border-top: 1px solid #edf2f7;
  flex-shrink: 0;
  flex-wrap: wrap;
}

dialog.admin-dialog-native .admin-modal__footer--split {
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

dialog.admin-dialog-native .admin-modal__footer--split .admin-modal__footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}

dialog.admin-dialog-native .admin-modal__section {
  margin-bottom: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid #edf2f7;
}

dialog.admin-dialog-native .admin-modal__section:not(:first-child) {
  padding-top: 14px;
}

dialog.admin-dialog-native .admin-modal__section:last-child {
  border-bottom: none;
  padding-bottom: 4px;
  margin-bottom: 0;
}

dialog.admin-dialog-native .admin-modal__section-title {
  margin: 0 0 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #62708a;
}

.admin-user-form-card .admin-form-section-title {
  margin: 22px 0 12px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #62708a;
}

.admin-user-form-card .admin-form-section-title:first-of-type {
  margin-top: 0;
}

dialog.admin-dialog-native--wide {
  max-width: min(880px, 96vw);
  width: min(880px, 96vw);
}

/* Website-aanvragen: antwoord per e-mail — volle breedte editor + toolbar */
dialog.admin-dialog-native.admin-dialog-native--website-lead-email {
  max-width: min(920px, 96vw);
  width: min(920px, 96vw);
  max-height: min(92vh, 920px);
  height: fit-content;
}

dialog.admin-dialog-native.admin-dialog-native--website-lead-email .admin-modal__form {
  max-height: min(90vh, 920px);
  height: auto;
  overflow: hidden;
}

dialog.admin-dialog-native.admin-dialog-native--website-lead-email .admin-modal__body {
  padding: 12px 16px 4px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

dialog.admin-dialog-native.admin-dialog-native--website-lead-email .admin-modal__footer {
  padding: 8px 14px;
}

dialog.admin-dialog-native.admin-dialog-native--website-lead-email .admin-modal__section:last-child {
  padding-bottom: 0;
}

.admin-website-lead-email-callout {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f0f5ff;
  border: 1px solid #c3d4ff;
  color: #1e2a44;
  font-size: 0.9rem;
  line-height: 1.45;
}

.admin-website-lead-email-callout p {
  margin: 0;
}

.admin-website-lead-email-callout code {
  font-size: 0.86em;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid #b8c9f5;
}

.admin-website-lead-email-field-label {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: #1a2740;
  margin: 0 0 6px;
}

.admin-website-lead-email-field-label__muted {
  font-weight: 600;
  color: #62708a;
}

dialog.admin-dialog-native .admin-website-lead-email-section .admin-website-lead-email-select,
dialog.admin-dialog-native .admin-website-lead-email-section .admin-website-lead-email-subject,
dialog.admin-dialog-native .admin-website-lead-email-section .admin-website-lead-email-file {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

dialog.admin-dialog-native .admin-website-lead-email-section .admin-website-lead-email-select,
dialog.admin-dialog-native .admin-website-lead-email-section .admin-website-lead-email-subject {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #cbd5e0;
  background: #fff;
  font-size: 0.92rem;
  color: #1a2740;
}

dialog.admin-dialog-native .admin-website-lead-email-section .admin-website-lead-email-select:focus,
dialog.admin-dialog-native .admin-website-lead-email-section .admin-website-lead-email-subject:focus {
  outline: none;
  border-color: #4f7cff;
  box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.18);
}

.admin-website-lead-email-toolbar-wrap {
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid #cbd5e0;
  border-radius: 10px;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

dialog.admin-dialog-native.admin-dialog-native--website-lead-email .admin-website-lead-email-toolbar-wrap .admin-email-var-bar {
  margin: 0;
  gap: 10px;
}

dialog.admin-dialog-native.admin-dialog-native--website-lead-email .admin-website-lead-email-toolbar-wrap .admin-email-placeholder-select {
  min-width: 0;
  flex: 1 1 200px;
  max-width: none;
}

dialog.admin-dialog-native--website-lead-email .admin-website-lead-email-section--compose .admin-website-lead-email-toolbar-wrap .admin-email-placeholder-select,
dialog.admin-dialog-native--website-lead-email .admin-website-lead-email-section--compose .admin-website-lead-email-toolbar-wrap .admin-btn {
  border-radius: 8px;
}

dialog.admin-dialog-native.admin-dialog-native--website-lead-email .admin-website-lead-email-toolbar-wrap .admin-email-var-bar__label {
  flex-shrink: 0;
  color: #475569;
  font-size: 0.82rem;
}

dialog.admin-dialog-native .admin-website-lead-email-textarea.admin-textarea-mail-html {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 240px;
  resize: vertical;
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #cbd5e0;
  background: #fff;
}

dialog.admin-dialog-native .admin-website-lead-email-textarea.admin-textarea-mail-html:focus {
  outline: none;
  border-color: #4f7cff;
  box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.15);
  position: relative;
  z-index: 1;
}

dialog.admin-dialog-native--website-lead-email .admin-website-lead-email-section--compose .admin-website-lead-email-toolbar-wrap {
  margin-bottom: 12px;
}

dialog.admin-dialog-native--website-lead-email .admin-website-lead-email-section--compose .admin-rte--email-compose {
  margin: 0;
  border-radius: 10px;
  border-color: #cbd5e0;
  overflow: hidden;
}

dialog.admin-dialog-native--website-lead-email .admin-website-lead-email-section--compose .admin-rte--email-compose .admin-rte__toolbar {
  border-radius: 0;
}

dialog.admin-dialog-native--website-lead-email .admin-rte--email-compose .admin-rte__editor {
  min-height: 240px;
  max-height: min(50vh, 420px);
  overflow-y: auto;
  font-size: 0.92rem;
  line-height: 1.55;
}

dialog.admin-dialog-native--website-lead-email .admin-rte--email-compose .admin-rte__btn--size-normal {
  font-size: 0.95rem;
}

dialog.admin-dialog-native--website-lead-email .admin-rte--email-compose .admin-rte__btn--size-large {
  font-size: 1.1rem;
}

.admin-website-lead-email-files-hint {
  margin: 8px 0 0;
  font-size: 0.86rem;
  color: #334155;
  word-break: break-word;
}

.admin-billing-quote-email-recipients {
  margin-top: 4px;
}

.admin-billing-quote-email-recipients__tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  vertical-align: middle;
}

/* Offerte e-mail modal — panel layout */
dialog.admin-dialog-native--billing-quote-email .admin-modal__body {
  padding: 14px 18px 8px;
}

dialog.admin-dialog-native--billing-quote-email .admin-modal__section {
  border: none;
  padding: 0;
  margin: 0;
}

.admin-bqe-intro {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, #f0f5ff 0%, #f8fafc 100%);
  border: 1px solid #c7d7fe;
  color: #334155;
  font-size: 0.88rem;
  line-height: 1.45;
}

.admin-bqe-intro code {
  font-size: 0.86em;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #b8c9f5;
}

.admin-bqe-panel {
  margin-bottom: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}

.admin-bqe-panel--compose {
  background: #fff;
  border-color: #dbe3ef;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

.admin-bqe-panel--compact {
  margin-bottom: 0;
  height: 100%;
}

.admin-bqe-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.admin-bqe-panel__title {
  margin: 0 0 12px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #64748b;
}

.admin-bqe-panel__head .admin-bqe-panel__title {
  margin-bottom: 0;
}

.admin-bqe-panel__link {
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}

.admin-bqe-panel__hint {
  margin: 0 0 10px;
}

.admin-bqe-field {
  margin-bottom: 12px;
}

.admin-bqe-field:last-child {
  margin-bottom: 0;
}

.admin-bqe-field-label {
  display: block;
  margin: 0 0 6px;
  font-size: 0.84rem;
  font-weight: 700;
  color: #1e293b;
}

/* BQE compose-velden — zelfde inputstijl als website-lead e-mail */
dialog.admin-dialog-native--billing-quote-email .admin-bqe-panel .admin-website-lead-email-select,
dialog.admin-dialog-native--billing-quote-email .admin-bqe-panel .admin-website-lead-email-subject,
dialog.admin-dialog-native--billing-quote-email .admin-bqe-panel .admin-website-lead-email-file {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

dialog.admin-dialog-native--billing-quote-email .admin-bqe-panel .admin-website-lead-email-select,
dialog.admin-dialog-native--billing-quote-email .admin-bqe-panel .admin-website-lead-email-subject {
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid #cbd5e0;
  background: #fff;
  font-size: 0.92rem;
  color: #1a2740;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

dialog.admin-dialog-native--billing-quote-email .admin-bqe-panel .admin-website-lead-email-select:focus,
dialog.admin-dialog-native--billing-quote-email .admin-bqe-panel .admin-website-lead-email-subject:focus {
  outline: none;
  border-color: #4f7cff;
  box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.18);
}

dialog.admin-dialog-native--billing-quote-email .admin-bqe-panel .admin-website-lead-email-file {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px dashed #94a3b8;
  background: #f8fafc;
  font-size: 0.88rem;
  cursor: pointer;
}

dialog.admin-dialog-native--billing-quote-email .admin-bqe-extra-recipients .admin-email-chip-input {
  background: #fff;
}

dialog.admin-dialog-native--billing-quote-email .admin-bqe-placeholder-bar .admin-email-placeholder-select {
  min-width: 0;
  flex: 1 1 200px;
  max-width: none;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid #cbd5e0;
  background: #fff;
  font-size: 0.88rem;
  color: #1a2740;
}

dialog.admin-dialog-native--billing-quote-email .admin-bqe-placeholder-bar .admin-email-placeholder-select:focus {
  outline: none;
  border-color: #4f7cff;
  box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.15);
}

dialog.admin-dialog-native--billing-quote-email .admin-bqe-placeholder-bar .js-email-placeholder-insert-btn {
  border-radius: 8px;
  flex-shrink: 0;
}

dialog.admin-dialog-native--billing-quote-email .admin-bqe-field--editor .ql-toolbar.ql-snow {
  margin: 0;
  border: 1px solid #cbd5e0;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  padding: 6px 8px;
}

dialog.admin-dialog-native--billing-quote-email .admin-bqe-field--editor .ql-toolbar.ql-snow + .admin-billing-quote-email-quill {
  margin-top: 0;
}

dialog.admin-dialog-native--billing-quote-email .admin-bqe-field--editor .admin-billing-quote-email-quill.ql-container {
  border: 1px solid #cbd5e0;
  border-top: none;
  border-radius: 0 0 10px 10px;
  height: auto;
  overflow: hidden;
  background: #fff;
}

dialog.admin-dialog-native--billing-quote-email .admin-bqe-field--editor .admin-billing-quote-email-quill .ql-editor {
  min-height: 200px;
  max-height: min(38vh, 340px);
  overflow-y: auto;
  padding: 12px 14px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #1a2740;
}

dialog.admin-dialog-native--billing-quote-email .admin-bqe-field--editor > textarea.admin-sr-only {
  display: none;
}

.admin-bqe-extra-recipients {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #dbe3ef;
}

.admin-bqe-recipient-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-bqe-recipient {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-bqe-recipient:has(input:checked) {
  border-color: #93b4fd;
  background: #f8fbff;
  box-shadow: 0 0 0 1px rgba(79, 124, 255, 0.12);
}

.admin-bqe-recipient input {
  flex-shrink: 0;
  margin: 0;
}

.admin-bqe-recipient__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-bqe-recipient__name {
  font-size: 0.9rem;
  font-weight: 700;
  color: #0f172a;
}

.admin-bqe-recipient__email {
  font-size: 0.8rem;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-bqe-recipient__tag {
  flex-shrink: 0;
  padding: 3px 8px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-bqe-placeholder-bar {
  margin-bottom: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #cbd5e0;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

.admin-bqe-placeholder-bar .admin-email-var-bar {
  margin: 0;
  gap: 8px;
}

.admin-bqe-placeholder-bar .admin-email-var-bar__label {
  font-size: 0.78rem;
  color: #64748b;
}

.admin-bqe-panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 4px;
}

.admin-bqe-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-bqe-option {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e8edf4;
  font-size: 0.88rem;
  color: #1e293b;
  cursor: pointer;
}

.admin-bqe-option input {
  margin: 0;
  flex-shrink: 0;
}

dialog.admin-dialog-native--billing-quote-email .admin-modal__footer {
  padding: 10px 18px 12px;
  gap: 10px;
  background: #fafbfc;
}

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

/* E-mail chip-invoer (extra ontvangers) */
.admin-email-chip-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 6px 8px;
  border: 1px solid #cbd5e0;
  border-radius: 10px;
  background: #fff;
  cursor: text;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-email-chip-input:focus-within {
  border-color: #4f7cff;
  box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.15);
}

.admin-email-chip-input__chips {
  display: contents;
}

.admin-email-chip-input__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 3px 6px 3px 10px;
  border-radius: 999px;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  color: #312e81;
  font-size: 0.82rem;
  line-height: 1.3;
}

.admin-email-chip-input__chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 240px;
}

.admin-email-chip-input__chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #6366f1;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.admin-email-chip-input__chip-remove:hover {
  background: rgba(99, 102, 241, 0.15);
  color: #4338ca;
}

.admin-email-chip-input__field {
  flex: 1 1 140px;
  min-width: 120px;
  border: 0;
  outline: none;
  background: transparent;
  padding: 4px 2px;
  font: inherit;
  font-size: 0.9rem;
  color: #0f172a;
}

.admin-email-chip-input__field::placeholder {
  color: #94a3b8;
}

.admin-email-chip-input__field.is-invalid {
  color: #b91c1c;
}

.admin-email-chip-input__field.is-invalid::placeholder {
  color: #fca5a5;
}

.admin-website-lead-email-files-meta {
  margin: 6px 0 0;
  font-size: 0.8rem;
  color: #64748b;
}

dialog.admin-dialog-native .admin-website-lead-email-section .admin-website-lead-email-file {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px dashed #94a3b8;
  background: #f8fafc;
  font-size: 0.88rem;
  cursor: pointer;
}

dialog.admin-dialog-native .admin-website-lead-email-section .admin-website-lead-email-compose-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

dialog.admin-dialog-native .admin-website-lead-email-section .admin-website-lead-email-compose-head a {
  flex-shrink: 0;
  font-size: 0.82rem;
  font-weight: 500;
}

.admin-project-customers-tabs {
  margin-top: 8px;
}

.admin-project-customers-tabs__bar {
  display: flex;
  gap: 6px;
  padding: 5px;
  background: #e8edf5;
  border-radius: 14px;
}

.admin-project-customers-tabs__tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 11px;
  padding: 10px 12px;
  font-weight: 700;
  font-size: 0.86rem;
  cursor: pointer;
  background: transparent;
  color: #64748b;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.admin-project-customers-tabs__tab:hover {
  color: #334155;
}

.admin-project-customers-tabs__tab[aria-selected='true'] {
  background: #fff;
  color: #0f172a;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.1);
}

.admin-project-customers-tabs__count {
  font-size: 0.78rem;
  font-weight: 700;
  color: #64748b;
  background: rgba(255, 255, 255, 0.65);
  padding: 2px 7px;
  border-radius: 999px;
}

.admin-project-customers-tabs__tab[aria-selected='true'] .admin-project-customers-tabs__count {
  color: #475569;
  background: #f1f5f9;
}

.admin-project-customers-picker-panels {
  margin-top: 10px;
}

[data-project-customer-tabs][data-search-active='1'] .admin-project-customers-tabs__bar {
  display: none;
}

[data-project-customer-tabs][data-search-active='1'] .admin-project-customers-picker-panels {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 6px;
}

.admin-project-customers-tabpanel__search-heading {
  display: none;
  margin: 0 0 6px;
  padding: 0 2px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}

[data-project-customer-tabs][data-search-active='1']
  .admin-project-customers-tabpanel:not([hidden])
  .admin-project-customers-tabpanel__search-heading {
  display: block;
}

.admin-project-customers-tabpanel__empty {
  margin: 12px 0 10px;
  padding: 0 2px;
}

.admin-project-customers-checklist--scroll {
  max-height: min(52vh, 400px);
  overflow-y: auto;
  padding-right: 6px;
  margin-top: 8px;
}

.admin-project-customers-search-label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin: 10px 0 6px;
  color: #1a2740;
}

.admin-project-customers-search {
  width: 100%;
  max-width: 420px;
  border: 1px solid #dbe3ef;
  background: #fff;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 0.95rem;
  color: #17233c;
}

.admin-project-customers-search:focus {
  outline: none;
  border-color: #4f7cff;
  box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.12);
}

.admin-settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 24px;
  align-items: start;
}

.admin-settings-main,
.admin-settings-sidebar {
  display: grid;
  gap: 24px;
}

.admin-settings-card {
  padding: 24px;
}

/* Instellingen: bedrijfslogo */
.admin-settings-logo-card {
  position: relative;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(79, 124, 255, 0.06) 0%, transparent 45%),
    linear-gradient(225deg, rgba(242, 163, 74, 0.08) 0%, transparent 40%),
    #fff;
  box-shadow: 0 12px 40px rgba(23, 35, 60, 0.06);
}

.admin-settings-logo-card-head {
  position: relative;
  z-index: 1;
  margin-bottom: 20px;
}

.admin-settings-logo-title {
  margin: 0 0 8px;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #102348;
}

.admin-settings-logo-lead {
  margin: 0;
  max-width: 52ch;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #5c6b82;
}

.admin-settings-logo-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.admin-settings-logo-stage {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 1;
  max-width: 220px;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.06),
    0 18px 48px rgba(23, 35, 60, 0.12);
  background: #f8fafc;
}

.admin-settings-logo-grid {
  position: absolute;
  inset: 0;
  opacity: 0.45;
  background-color: #e2e8f0;
  background-image:
    linear-gradient(45deg, #cbd5e1 25%, transparent 25%),
    linear-gradient(-45deg, #cbd5e1 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #cbd5e1 75%),
    linear-gradient(-45deg, transparent 75%, #cbd5e1 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}

.admin-settings-logo-stage-img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 16px;
  background: rgba(255, 255, 255, 0.92);
}

.admin-settings-logo-stage-img--hidden {
  display: none;
}

.admin-settings-logo-placeholder {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  min-height: 180px;
  padding: 24px;
  text-align: center;
  font-size: 0.92rem;
  font-weight: 600;
  color: #64748b;
  background: rgba(255, 255, 255, 0.88);
}

.admin-settings-logo-placeholder-icon {
  font-size: 2rem;
  color: #94a3b8;
  line-height: 1;
}

.admin-settings-logo-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.admin-logo-file-input {
  position: absolute;
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  z-index: -1;
}

.admin-logo-dropzone {
  display: block;
  cursor: pointer;
  border-radius: 16px;
  border: 2px dashed #c5d0e3;
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.admin-logo-dropzone:hover,
.admin-logo-dropzone:focus-within {
  border-color: #4f7cff;
  box-shadow: 0 0 0 4px rgba(79, 124, 255, 0.12);
}

.admin-logo-dropzone.is-dragover {
  border-color: #1a5082;
  border-style: solid;
  box-shadow: 0 0 0 4px rgba(26, 80, 130, 0.15);
  transform: scale(1.01);
}

.admin-logo-dropzone-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 28px 20px;
  text-align: center;
}

.admin-logo-dropzone-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(145deg, #4f7cff, #1a5082);
  color: #fff;
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 4px;
  box-shadow: 0 8px 20px rgba(79, 124, 255, 0.35);
}

.admin-logo-dropzone-inner strong {
  font-size: 1rem;
  color: #102348;
}

.admin-logo-dropzone-hint {
  font-size: 0.88rem;
  color: #64748b;
}

.admin-settings-logo-buttons-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}

@media (max-width: 768px) {
  .admin-settings-logo-layout {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .admin-settings-logo-stage {
    max-width: 260px;
  }

  .admin-settings-logo-side {
    width: 100%;
    max-width: 400px;
  }
}

/* Instellingen: account + profielfoto */
.admin-settings-account-layout {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.admin-settings-account-photo-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}

.admin-settings-account-photo-label {
  margin: 0;
  width: 100%;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #64748b;
}

.admin-settings-account-photo-frame {
  width: 168px;
  height: 168px;
  border-radius: 50%;
  padding: 4px;
  background: linear-gradient(145deg, #4f7cff, #f2a34a, #1a5082);
  box-shadow: 0 16px 40px rgba(79, 124, 255, 0.2);
}

.admin-settings-account-avatar-img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: #f1f5f9;
}

.admin-settings-account-avatar-img--hidden {
  display: none;
}

.admin-settings-account-avatar-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(180deg, #f8fafc 0%, #e8eef7 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 2px dashed #cbd5e1;
}

.admin-settings-account-avatar-initials {
  font-size: 2.5rem;
  font-weight: 800;
  color: #1a5082;
  line-height: 1;
}

.admin-settings-account-avatar-hint {
  font-size: 0.75rem;
  font-weight: 600;
  color: #94a3b8;
}

.admin-settings-account-dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 220px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 2px dashed #c5d0e3;
  background: #f8fafc;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.admin-settings-account-dropzone:hover,
.admin-settings-account-dropzone:focus-within {
  border-color: #4f7cff;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(79, 124, 255, 0.1);
}

.admin-settings-account-dropzone.is-dragover {
  border-color: #1a5082;
  border-style: solid;
  background: #fff;
}

.admin-settings-account-dropzone-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.88rem;
  color: #475569;
}

.admin-settings-account-dropzone-text strong {
  color: #102348;
}

.admin-settings-account-dropzone-sub {
  font-size: 0.8rem;
  color: #94a3b8;
}

.admin-settings-account-avatar-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 220px;
}

.admin-settings-account-avatar-save {
  width: 100%;
  max-width: 220px;
}

.admin-settings-account-avatar-remove {
  margin: 0;
}

.admin-settings-account-photo-hint {
  max-width: 220px;
  margin: 0;
  text-align: center;
}

.admin-settings-account-fields {
  min-width: 0;
}

@media (max-width: 900px) {
  .admin-settings-account-layout {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .admin-settings-account-fields {
    width: 100%;
    max-width: 520px;
  }
}

.admin-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
}

.admin-form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-form-group-full {
  grid-column: 1 / -1;
}

.admin-form-group label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #17233c;
}

.admin-form-required {
  color: #c45c4a;
  font-weight: 700;
}

.admin-form-group .admin-form-hint {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: #5c6b82;
}

.admin-view-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-view-actions__form {
  margin: 0;
}

.admin-view-actions__hint {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: #6d7890;
}

.admin-project-detail-dl {
  margin: 0;
  padding: 0 4px 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.admin-project-detail-row {
  display: grid;
  grid-template-columns: minmax(120px, 200px) 1fr;
  gap: 12px 20px;
  align-items: start;
}

.admin-project-detail-row dt {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: #5c6b82;
}

.admin-project-detail-row dd {
  margin: 0;
  font-size: 0.96rem;
  color: #17233c;
}

.admin-project-detail-notes {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e8edf5;
}

.admin-project-detail-notes-title {
  margin: 0 0 10px;
  font-size: 1rem;
  font-weight: 600;
  color: #17233c;
}

.admin-project-detail-notes-empty {
  margin: 0;
  font-size: 0.94rem;
  color: #7a8799;
}

.admin-project-detail-notes-body {
  font-size: 0.96rem;
  line-height: 1.55;
  color: #243047;
}

.admin-project-customers-hint {
  margin: 0 0 14px;
}

.admin-project-customers-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-project-customers-item {
  margin: 0;
  padding: 0;
  border: 0;
}

.admin-project-customers-item__inner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.admin-project-customers-item__avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(145deg, #4f7cff 0%, #3b5bdb 100%);
  box-shadow: 0 4px 12px rgba(79, 124, 255, 0.35);
}

.admin-project-customers-item__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-project-customers-item__name {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
}

.admin-project-customers-link-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin: 0;
  border-radius: 10px;
  text-decoration: none;
  color: #334155;
  font-size: 0.92rem;
  font-weight: 500;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.admin-project-customers-link-row:hover {
  background: #fff;
  border-color: #dbe3ef;
  color: #1e3a5f;
}

.admin-project-customers-link-row__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #fff;
  color: #4f7cff;
  border: 1px solid #e2e8f0;
}

.admin-project-customers-link-row:hover .admin-project-customers-link-row__icon {
  border-color: #c7d7f5;
  color: #3b5bdb;
}

.admin-project-customers-link-row__text {
  min-width: 0;
  word-break: break-word;
}

.admin-project-customers-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-left: auto;
}

/* Gekoppelde klanten — projectpagina (#pv2-section-customers), niet de koppel-dialoog */
.admin-project-customers-tab .admin-form-hint.admin-project-customers-hint {
  margin: 0 0 20px;
  padding: 12px 16px;
  max-width: 52rem;
  background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%);
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  color: #1e3a5f;
  font-size: 0.9rem;
  line-height: 1.55;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.admin-project-customers-tab .admin-project-customers-email-btn {
  gap: 9px;
}

.admin-project-customers-tab .admin-project-customers-email-btn .fa-solid {
  font-size: 1.05em;
  opacity: 0.95;
}

.admin-project-customers-tab .admin-project-customers-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 16px;
}

.admin-project-customers-tab .admin-project-customers-item__inner {
  position: relative;
  height: 100%;
  box-sizing: border-box;
  align-items: flex-start;
  background: #fff;
  border: 1px solid #e8edf4;
  border-left: 4px solid #4f7cff;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
  padding: 18px 42px 16px 16px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.admin-project-customers-tab .admin-project-customers-unlink {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  color: #64748b;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.admin-project-customers-tab .admin-project-customers-unlink:hover {
  color: #b91c1c;
  border-color: #fecaca;
  background: #fef2f2;
}

.admin-project-customers-tab .admin-project-customers-unlink:focus-visible {
  outline: 2px solid #4f7cff;
  outline-offset: 2px;
}

.admin-project-customers-tab .admin-project-customers-unlink:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.admin-project-customers-tab .admin-project-customers-unlink .fa-solid {
  font-size: 0.95rem;
}

.admin-project-customers-tab .admin-project-customers-item__inner:hover {
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.09);
  border-color: #d4def0;
}

.admin-project-customers-tab .admin-project-customers-item--company .admin-project-customers-item__inner {
  border-left-color: #059669;
}

.admin-project-customers-tab .admin-project-customers-item--private .admin-project-customers-item__inner {
  border-left-color: #2563eb;
}

.admin-project-customers-tab .admin-project-customers-item__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.admin-project-customers-tab .admin-project-customers-item__kind-pill {
  flex-shrink: 0;
  font-size: 0.65rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 4px 9px;
  border-radius: 999px;
  line-height: 1;
}

.admin-project-customers-tab .admin-project-customers-item--company .admin-project-customers-item__kind-pill {
  color: #047857;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
}

.admin-project-customers-tab .admin-project-customers-item--private .admin-project-customers-item__kind-pill {
  color: #1d4ed8;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
}

.admin-project-customers-tab .admin-project-customers-item--company .admin-project-customers-item__avatar {
  background: linear-gradient(145deg, #059669 0%, #047857 100%);
  box-shadow: 0 2px 10px rgba(5, 150, 105, 0.35);
}

.admin-project-customers-tab .admin-project-customers-item--private .admin-project-customers-item__avatar {
  background: linear-gradient(145deg, #2563eb 0%, #1d4ed8 100%);
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.32);
}

.admin-project-customers-tab .admin-project-customers-item--add {
  display: flex;
  min-height: 0;
}

.admin-project-customers-tab .admin-project-customers-add-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 148px;
  margin: 0;
  padding: 22px 16px;
  box-sizing: border-box;
  cursor: pointer;
  border: 2px dashed #c4d4f8;
  border-radius: 14px;
  background: linear-gradient(180deg, #fafbff 0%, #f8fafc 100%);
  color: #475569;
  font: inherit;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.admin-project-customers-tab .admin-project-customers-add-card:hover {
  border-color: #4f7cff;
  background: linear-gradient(180deg, #f0f4ff 0%, #eef2ff 100%);
  color: #1e293b;
  box-shadow: 0 6px 22px rgba(79, 124, 255, 0.12);
}

.admin-project-customers-tab .admin-project-customers-add-card:focus-visible {
  outline: 2px solid #4f7cff;
  outline-offset: 2px;
}

.admin-project-customers-tab .admin-project-customers-add-card__plus {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 2px;
  border-radius: 14px;
  font-size: 1.35rem;
  color: #4f7cff;
  background: rgba(79, 124, 255, 0.12);
}

.admin-project-customers-tab .admin-project-customers-add-card__label {
  font-size: 0.95rem;
  font-weight: 750;
  color: #0f172a;
}

.admin-project-customers-tab .admin-project-customers-add-card__hint {
  font-size: 0.78rem;
  font-weight: 500;
  color: #64748b;
  max-width: 18rem;
  line-height: 1.35;
}

.admin-project-customers-tab .admin-project-customers-item__avatar {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(59, 91, 219, 0.28);
}

.admin-project-customers-tab .admin-project-customers-item__content {
  gap: 6px;
}

.admin-project-customers-tab .admin-project-customers-item__name {
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
}

.admin-project-customers-tab .admin-customers-name-link {
  color: #0f172a;
  text-decoration: none;
  border-bottom: 1px solid rgba(79, 124, 255, 0.4);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.admin-project-customers-tab .admin-customers-name-link:hover {
  color: #3b5bdb;
  border-bottom-color: #3b5bdb;
}

.admin-project-customers-tab .admin-project-customers-link-row {
  padding: 7px 10px 7px 8px;
  margin: 2px 0 0;
  border-radius: 10px;
  background: transparent;
  border: 1px solid transparent;
  font-size: 0.9rem;
}

.admin-project-customers-tab .admin-project-customers-link-row:hover {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.admin-project-customers-tab .admin-project-customers-link-row__icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: #f1f5f9;
  border: none;
  color: #64748b;
}

.admin-project-customers-tab .admin-project-customers-link-row:hover .admin-project-customers-link-row__icon {
  background: #e8f0fe;
  color: #3b5bdb;
  border: none;
}

.admin-project-customers-tab .admin-projects-empty {
  margin-top: 4px;
  padding: 16px 18px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px dashed #cbd5e1;
  line-height: 1.55;
}

/* Project — tab Chat (WhatsApp-achtige lay-out) */
.admin-project-chat--whatsapp {
  display: flex;
  align-items: stretch;
  margin-top: 12px;
  border: 1px solid #d1d7db;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  min-height: 440px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

/* Geen dubbel kader met .admin-card: alleen de buitenste kaart-rand */
.admin-project-chat-card > .admin-project-chat.admin-project-chat--whatsapp {
  margin-top: 6px;
  border: none;
  box-shadow: none;
  border-radius: 18px;
}

.admin-project-chat-sidebar {
  width: 300px;
  flex-shrink: 0;
  border-right: 1px solid #e9edef;
  background: #f0f2f5;
  display: flex;
  flex-direction: column;
  min-height: 440px;
  max-height: 640px;
}

/* Twee kolommen: Klanten/Groepen/Intern → onderwerpen */
.admin-project-chat-sidebar--split {
  flex-direction: row;
  width: min(100%, 560px);
  align-items: stretch;
}

.admin-project-chat-sidebar__primary {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.admin-project-chat-nav-tabs {
  display: flex;
  gap: 2px;
  padding: 8px 8px 0;
  border-bottom: 1px solid #e9edef;
  flex-shrink: 0;
}

.admin-project-chat-nav-tab {
  flex: 1;
  padding: 9px 6px;
  font-size: 0.78rem;
  font-weight: 700;
  border: none;
  border-radius: 8px 8px 0 0;
  background: transparent;
  color: #54656f;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.admin-project-chat-nav-tab:hover {
  background: rgba(0, 0, 0, 0.04);
  color: #111b21;
}

.admin-project-chat-nav-tab.is-active {
  background: #fff;
  color: #111b21;
  box-shadow: 0 1px 0 #fff;
}

.admin-project-chat-primary-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.admin-project-chat-groups-actions {
  flex-shrink: 0;
  padding: 8px 10px 4px;
}

.admin-project-chat-sidebar__secondary {
  flex: 0 0 min(260px, 42vw);
  max-width: 280px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-left: 1px solid #e9edef;
  background: #fff;
}

.admin-project-chat-sidebar__secondary-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 6px;
  border-bottom: 1px solid #e9edef;
}

.admin-project-chat-sidebar__secondary-title {
  flex: 1;
  min-width: 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: #111b21;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-project-chat-topic-toolbar {
  flex-shrink: 0;
  padding: 8px 10px;
  border-bottom: 1px solid #f0f2f5;
}

.admin-project-chat-sidebar__title {
  padding: 14px 16px 10px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #54656f;
  border-bottom: 1px solid #e9edef;
  background: #f0f2f5;
}

.admin-project-chat-thread-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-project-chat-thread-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: #111b21;
  transition: background 0.15s ease;
}

.admin-project-chat-thread-btn:hover {
  background: rgba(0, 0, 0, 0.04);
}

.admin-project-chat-thread-btn.is-active {
  background: #e9edef;
}

.admin-project-chat-thread-btn--internal .admin-project-chat-thread-btn__name {
  color: #1f4a8a;
}

.admin-project-chat-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(145deg, #dfe9ff 0%, #cfd9f6 100%);
  color: #1f4a8a;
  font-weight: 800;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-project-chat-avatar--icon {
  font-size: 1.35rem;
  line-height: 1;
  background: linear-gradient(145deg, #e8f4ff 0%, #dbeafe 100%);
}

.admin-project-chat-thread-btn__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.admin-project-chat-thread-btn__name {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: #111b21;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-project-chat-thread-btn__sub {
  display: block;
  font-size: 0.78rem;
  color: #667781;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-project-chat-empty {
  margin: 0;
  font-size: 0.88rem;
  color: #54656f;
  line-height: 1.5;
  padding: 12px 8px;
}

.admin-project-chat-sidebar__section-title {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8696a0;
  padding: 10px 8px 4px;
  margin: 0;
}

.admin-project-chat-sidebar__hint {
  margin: 0;
  font-size: 0.8rem;
  color: #667781;
  line-height: 1.45;
  padding: 4px 8px 12px;
}

.admin-project-chat-thread-btn--topic .admin-project-chat-thread-btn__name {
  white-space: normal;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.admin-project-chat-context {
  flex-shrink: 0;
  padding: 12px 14px 10px;
  border-bottom: 1px solid #e9edef;
  background: #fff;
}

.admin-project-chat-context__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #111b21;
  margin: 0 0 4px;
}

.admin-project-chat-context__sub {
  margin: 0;
  font-size: 0.8rem;
  color: #667781;
}

.admin-project-chat-stack {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #efeae2;
}

.admin-project-chat-toolbar {
  flex-shrink: 0;
  padding: 10px 14px;
  border-bottom: 1px solid #e9edef;
  background: #f0f2f5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.admin-project-chat-topic-toolbar--split {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}

.admin-project-chat-group-row {
  display: flex;
  align-items: stretch;
  gap: 4px;
  width: 100%;
}

.admin-project-chat-thread-btn--group-main {
  flex: 1;
  min-width: 0;
}

.admin-project-chat-group-manage {
  flex-shrink: 0;
  align-self: center;
}

.admin-project-chat-topic-modal {
  position: fixed;
  inset: 0;
  z-index: 12040;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}

.admin-project-chat-topic-modal[hidden] {
  display: none !important;
}

.admin-project-chat-topic-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}

.admin-project-chat-topic-modal__panel {
  position: relative;
  z-index: 1;
  width: min(100%, 440px);
  max-height: 90vh;
  overflow: auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.2);
}

.admin-project-chat-topic-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #e9edef;
}

.admin-project-chat-topic-modal__head h3 {
  margin: 0;
  font-size: 1.1rem;
}

/* Sluitknop: zelfde taal als admin-modal-close (vliegende modals), geen kale × */
.admin-project-chat-modal-close {
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 1px solid #d8e2ef;
  background: #f8fbff;
  color: #254a7b;
  border-radius: 10px;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

.admin-project-chat-modal-close:hover {
  background: #eef3f8;
  border-color: #c5d4eb;
  color: #17233c;
}

.admin-project-chat-modal-close:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

.admin-project-chat-topic-modal__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Chat-modals: formuliercontrols (admin-form-label / admin-form-input) */
.admin-project-chat-topic-modal .admin-form-label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  font-weight: 750;
  font-size: 0.875rem;
  color: #101d3a;
  line-height: 1.35;
}

.admin-project-chat-topic-modal .admin-form-label .admin-form-hint {
  font-weight: 500;
  color: #64748b;
}

.admin-project-chat-topic-modal .admin-form-input {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  border: 1px solid #dce7f5;
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: #071b3d;
  background: #fbfdff;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

.admin-project-chat-topic-modal .admin-form-input:hover {
  border-color: #c5d4eb;
}

.admin-project-chat-topic-modal .admin-form-input:focus {
  outline: none;
  border-color: #3b82f6;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}

.admin-project-chat-topic-modal .admin-form-input::placeholder {
  color: #94a3b8;
}

.admin-project-chat-topic-modal textarea.admin-form-input {
  min-height: 112px;
  resize: vertical;
  font-family: inherit;
}

.admin-project-chat-topic-modal__body > .admin-form-hint {
  margin: 0 0 8px;
  font-size: 0.8125rem;
  color: #64748b;
  line-height: 1.45;
}

.admin-project-chat-topic-modal__footer {
  padding: 12px 16px 16px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  border-top: 1px solid #f0f2f5;
}

.admin-project-chat-group-modal .admin-project-chat-topic-modal__panel {
  width: min(100%, 480px);
}

.admin-project-chat-group-modal__customers {
  max-height: min(240px, 40vh);
  overflow-y: auto;
  padding: 10px 12px;
  border: 1px solid #dce7f5;
  border-radius: 12px;
  background: linear-gradient(180deg, #fbfdff 0%, #f6f9fc 100%);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-project-chat-messages {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 280px;
  max-height: min(52vh, 520px);
  background-color: #efeae2;
  background-image: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.35) 0%, transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.25) 0%, transparent 50%);
}

.visibo-chat-msg {
  display: flex;
  flex-direction: column;
  max-width: 100%;
}

.visibo-chat-msg--in {
  align-items: flex-start;
}

.visibo-chat-msg--out {
  align-items: flex-end;
}

.visibo-chat-msg__meta {
  font-size: 0.7rem;
  color: #667781;
  margin-bottom: 4px;
  padding: 0 4px;
}

.visibo-chat-msg__bubble {
  display: inline-block;
  max-width: min(100%, 34rem);
  padding: 8px 12px 10px;
  border-radius: 10px;
  line-height: 1.45;
  word-break: break-word;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
}

.visibo-chat-msg--whatsapp.visibo-chat-msg--in .visibo-chat-msg__bubble {
  background: #fff;
  border: none;
  color: #111b21;
  border-radius: 0 10px 10px 10px;
}

.visibo-chat-msg--whatsapp.visibo-chat-msg--out .visibo-chat-msg__bubble {
  margin-left: auto;
  background: #d9fdd3;
  border: none;
  color: #111b21;
  border-radius: 10px 0 10px 10px;
}

.visibo-chat-msg__text {
  white-space: pre-wrap;
}

.visibo-chat-msg__attach {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 0.86rem;
  font-weight: 600;
  color: #027eb5;
  text-decoration: none;
}

.visibo-chat-msg__attach:hover {
  text-decoration: underline;
}

.visibo-chat-msg__attach-img-wrap {
  margin-top: 8px;
  border-radius: 8px;
  overflow: hidden;
  max-width: min(100%, 280px);
  background: rgba(0, 0, 0, 0.04);
}

.visibo-chat-msg__attach-img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}

.visibo-chat-msg__attach-caption {
  display: inline-flex;
  margin-top: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #027eb5;
  text-decoration: none;
}

.visibo-chat-msg__attach-caption:hover {
  text-decoration: underline;
}

.visibo-chat-msg__rx {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  margin-top: 6px;
  padding: 0 2px;
}

.visibo-chat-msg__rx-top {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.visibo-chat-msg--out .visibo-chat-msg__rx-top {
  justify-content: flex-end;
}

.visibo-chat-msg__rx-quick {
  display: none;
  flex-wrap: wrap;
  gap: 6px;
}

.visibo-chat-msg__rx-quick.is-open {
  display: flex;
}

.visibo-chat-msg--out .visibo-chat-msg__rx-quick {
  justify-content: flex-end;
}

.visibo-chat-msg__rx-toggle {
  border: 1px dashed rgba(17, 27, 33, 0.15);
  background: rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 1rem;
  line-height: 1.3;
  cursor: pointer;
  color: #54656f;
}

.visibo-chat-msg--out .visibo-chat-msg__rx {
  align-items: flex-end;
}

.visibo-chat-msg__rx-pill,
.visibo-chat-msg__rx-add {
  border: 1px solid rgba(17, 27, 33, 0.08);
  background: rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.8rem;
  cursor: pointer;
  line-height: 1.4;
}

.visibo-chat-msg__rx-pill.is-mine {
  border-color: #53bdeb;
  background: #e7ffdb;
}

.visibo-chat-msg__rx-add {
  opacity: 0.9;
}

.admin-project-chat-composer {
  flex-shrink: 0;
  padding: 10px 12px 12px;
  background: #f0f2f5;
  border-top: 1px solid #e9edef;
}

.admin-project-chat-composer__inputwrap {
  position: relative;
}

.admin-project-chat-composer textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  padding-right: 88px;
  border-radius: 10px;
  border: none;
  font: inherit;
  resize: none;
  min-height: 44px;
  max-height: 140px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #e9edef;
}

.admin-project-chat-composer textarea:focus {
  outline: 2px solid rgba(31, 74, 138, 0.25);
  outline-offset: 0;
}

.admin-project-chat-composer__tools {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.admin-project-chat-tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  color: #54656f;
}

.admin-project-chat-tool-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

.admin-project-chat-tool-btn--file {
  font-size: 1.1rem;
}

.admin-project-chat-file input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.admin-project-chat-emoji-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  width: min(100%, 280px);
  max-height: 220px;
  overflow-y: auto;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.15);
  border: 1px solid #e9edef;
  z-index: 30;
}

/* display:grid overschrijft anders het native [hidden]-attribuut */
.admin-project-chat-emoji-panel[hidden] {
  display: none !important;
}

.admin-project-chat-emoji-cell {
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 1.35rem;
  line-height: 1.2;
  cursor: pointer;
  padding: 4px;
}

.admin-project-chat-emoji-cell:hover {
  background: #f0f2f5;
}

.admin-project-chat-composer__sendrow {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.admin-project-chat-send {
  min-width: 100px;
}

.admin-project-chat-stack--guest {
  overflow: hidden;
  border-radius: 0 0 11px 11px;
}

@media (max-width: 900px) {
  .admin-project-chat--whatsapp {
    flex-direction: column;
  }

  .admin-project-chat-sidebar {
    width: 100%;
    max-height: 220px;
    border-right: none;
    border-bottom: 1px solid #e9edef;
  }

  .admin-project-chat-sidebar--split {
    flex-direction: column;
    width: 100%;
    max-height: min(70vh, 520px);
  }

  .admin-project-chat-sidebar__secondary {
    flex: 1 1 auto;
    max-width: none;
    border-left: none;
    border-top: 1px solid #e9edef;
    min-height: 140px;
  }

  .admin-project-chat-thread-list {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .admin-project-chat-thread-btn {
    width: auto;
    min-width: min(200px, 100%);
  }

  .admin-project-chat-emoji-panel {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* ========= Visibo projectchat (design — admin project view) ========= */
.visibo-chat-card {
  margin: 10px 0;
  --vc-navy: #101d3a;
  --vc-blue: #2f68ff;
  --vc-bg: #eef6ff;
  --vc-panel: #f5f8fc;
  --vc-card: #ffffff;
  --vc-line: #dce7f5;
  --vc-text: #071b3d;
  --vc-muted: #6f7f9a;
  --vc-soft: #edf3fa;
  --vc-chat: #f4f0ea;
  --vc-green: #dfffd4;
  --vc-orange: #ff5a0a;
  --vc-shadow: 0 20px 50px rgba(16, 29, 58, 0.09);
  max-width: 1220px;
  margin-left: auto;
  margin-right: auto;
  background: var(--vc-card);
  border: 1px solid var(--vc-line);
  border-radius: 26px;
  box-shadow: var(--vc-shadow);
  overflow: hidden;
  font-family: Inter, system-ui, -apple-system, Segoe UI, sans-serif;
  color: var(--vc-text);
}

.visibo-chat-card button,
.visibo-chat-card input,
.visibo-chat-card textarea {
  font: inherit;
}

.visibo-chat-header {
  padding: 24px 28px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--vc-line);
  flex-wrap: wrap;
}

.visibo-chat-title {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  min-width: 0;
}

.visibo-chat-icon {
  width: 48px;
  height: 48px;
  border-radius: 17px;
  background: #eef5ff;
  color: var(--vc-blue);
  display: grid;
  place-items: center;
  font-size: 20px;
  flex-shrink: 0;
}

.visibo-chat-header h2 {
  margin: 0;
  font-size: 25px;
  color: var(--vc-navy);
}

.visibo-chat-header p {
  margin: 7px 0 0;
  color: var(--vc-muted);
  line-height: 1.5;
  max-width: 760px;
  font-size: 0.95rem;
}

.visibo-chat-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.visibo-chat-btn {
  border: 0;
  border-radius: 14px;
  padding: 12px 16px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.visibo-chat-btn-navy {
  background: var(--vc-navy);
  color: #fff;
  box-shadow: 0 12px 25px rgba(16, 29, 58, 0.16);
}

.visibo-chat-btn-soft {
  background: var(--vc-soft);
  color: var(--vc-navy);
}

.visibo-chat-btn--block-sm {
  width: 100%;
  justify-content: center;
}

.visibo-chat-groups-actions {
  margin-bottom: 14px;
}

.visibo-chat-btn--icon {
  padding: 10px 12px;
  font-size: 13px;
  min-width: 42px;
  justify-content: center;
}

.visibo-chat-mobile-switch {
  display: none;
  gap: 8px;
  padding: 12px;
  background: #fff;
  border-bottom: 1px solid var(--vc-line);
  overflow: auto;
}

.visibo-chat-mobile-switch button {
  white-space: nowrap;
  border: 1px solid var(--vc-line);
  background: #fff;
  border-radius: 999px;
  padding: 10px 13px;
  font-weight: 800;
  color: #40516e;
  cursor: pointer;
}

.visibo-chat-mobile-switch button.is-active {
  background: var(--vc-navy);
  color: #fff;
  border-color: var(--vc-navy);
}

.visibo-chat-layout {
  --vc-pane-nav: 300px;
  --vc-pane-topics: 300px;
  min-height: 690px;
  display: grid;
  grid-template-columns: var(--vc-pane-nav) var(--vc-pane-topics) minmax(0, 1fr);
  background: #fff;
  transition: grid-template-columns 0.2s ease;
}

.visibo-chat-layout.is-nav-collapsed {
  --vc-pane-nav: 0px;
}

.visibo-chat-layout.is-topics-collapsed {
  --vc-pane-topics: 0px;
}

.visibo-chat-layout.is-nav-collapsed .visibo-chat-column--nav,
.visibo-chat-layout.is-topics-collapsed .visibo-chat-column--topics {
  min-width: 0;
  width: 0;
  border-right: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.visibo-chat-round-btn--pane {
  background: #f8fbff;
  border-color: #d8e4f5;
}

.visibo-chat-round-btn--pane.is-active {
  background: #eaf1ff;
  color: #1f4acc;
  border-color: #bed1f5;
}

.visibo-chat-column {
  min-height: 690px;
  border-right: 1px solid var(--vc-line);
  background: #f7faff;
  display: flex;
  flex-direction: column;
}

.visibo-chat-column--topics {
  background: #fff;
}

.visibo-chat-col-head {
  padding: 16px;
  border-bottom: 1px solid var(--vc-line);
  background: rgba(255, 255, 255, 0.82);
  position: sticky;
  top: 0;
  z-index: 2;
}

.visibo-chat-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #edf3fa;
  border-radius: 14px;
  padding: 4px;
  margin-bottom: 12px;
}

.visibo-chat-nav--all .visibo-chat-primary-panel + .visibo-chat-primary-panel {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--vc-line);
}

.visibo-chat-tabs button {
  border: 0;
  background: transparent;
  border-radius: 11px;
  padding: 10px 7px;
  font-weight: 800;
  color: #40516e;
  cursor: pointer;
  font-size: 13px;
}

.visibo-chat-tabs button.is-active {
  background: #fff;
  color: var(--vc-navy);
  box-shadow: 0 8px 18px rgba(16, 29, 58, 0.08);
}

.visibo-chat-search {
  height: 43px;
  border: 1px solid var(--vc-line);
  background: #fff;
  border-radius: 14px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #7a8aa4;
}

.visibo-chat-search input {
  border: 0;
  outline: 0;
  background: transparent;
  width: 100%;
  color: var(--vc-text);
}

.visibo-chat-list--scroll {
  padding: 12px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-height: 0;
}

.visibo-chat-topic-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.visibo-chat-topic-top strong {
  font-size: 13px;
  text-transform: uppercase;
  color: #7b8aa2;
  letter-spacing: 0.06em;
}

.visibo-chat-muted-note {
  margin: 8px;
  font-size: 0.88rem;
  color: var(--vc-muted);
  line-height: 1.45;
}

.visibo-chat-loading {
  margin: 12px;
  color: var(--vc-muted);
}

.visibo-chat-person {
  border: 1px solid transparent;
  background: transparent;
  border-radius: 17px;
  padding: 13px;
  display: flex;
  gap: 12px;
  align-items: center;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.visibo-chat-person:hover {
  background: #fff;
  border-color: var(--vc-line);
}

.visibo-chat-person.is-active {
  background: #fff;
  border-color: #cfe0ff;
  box-shadow: 0 10px 25px rgba(47, 104, 255, 0.09);
}

.visibo-chat-person--grow {
  flex: 1;
  min-width: 0;
}

.visibo-chat-group-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
  width: 100%;
}

.visibo-chat-group-row.is-active .visibo-chat-person {
  background: #fff;
  border-color: #cfe0ff;
  box-shadow: 0 10px 25px rgba(47, 104, 255, 0.09);
}

.visibo-chat-avatar {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: #dfe8ff;
  color: #164cc8;
  display: grid;
  place-items: center;
  font-weight: 800;
  flex: 0 0 auto;
  font-size: 0.95rem;
}

.visibo-chat-avatar--group {
  background: #e8f1ff;
  color: #2e5fb7;
}

.visibo-chat-avatar--professional {
  background: #fff1e8;
  color: #c24f0f;
}

.visibo-chat-avatar--private {
  background: #e8f4ff;
  color: #1f5ea8;
}

.visibo-chat-avatar--internal {
  background: #ecf7ff;
  color: #1673aa;
}

.visibo-chat-avatar--topic {
  background: #e8f1ff;
  color: #2e5fb7;
  font-size: 1.1rem;
}

.visibo-chat-avatar--hero {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  font-size: 1.2rem;
}

.visibo-chat-person strong,
.visibo-chat-topic strong {
  display: block;
  color: var(--vc-navy);
  font-size: 15px;
  margin-bottom: 4px;
}

.visibo-chat-person span,
.visibo-chat-topic span {
  display: block;
  color: var(--vc-muted);
  font-size: 13px;
  line-height: 1.35;
}

.visibo-chat-customer-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 4px;
}

.visibo-chat-customer-type {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.visibo-chat-customer-type--professional {
  background: #fff1e8;
  color: #b44910;
}

.visibo-chat-customer-type--private {
  background: #e8f4ff;
  color: #235d9f;
}

.visibo-chat-customer-role {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  background: #f3f6fb;
  color: #4f5f7b;
}

.visibo-chat-topic {
  border: 1px solid transparent;
  background: transparent;
  border-radius: 17px;
  padding: 13px;
  display: flex;
  gap: 12px;
  align-items: center;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.visibo-chat-topic:hover {
  background: #fff;
  border-color: var(--vc-line);
}

.visibo-chat-topic.is-active {
  background: #fff;
  border-color: #cfe0ff;
  box-shadow: 0 10px 25px rgba(47, 104, 255, 0.09);
}

.visibo-chat-topic-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
  width: 100%;
}

.visibo-chat-topic-row .visibo-chat-topic {
  flex: 1;
  min-width: 0;
}

.visibo-chat-topic-rename {
  flex: 0 0 auto;
  width: 42px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 14px;
  color: #64748b;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
}

.visibo-chat-topic-rename:hover {
  background: #fff;
  border-color: var(--vc-line);
  color: #2563eb;
}

.visibo-chat-empty-topic {
  margin: 12px;
  border: 1px dashed #cfdced;
  border-radius: 18px;
  padding: 18px;
  color: var(--vc-muted);
  line-height: 1.45;
  background: #fbfdff;
  font-size: 14px;
}

.visibo-chat-main {
  min-height: 690px;
  display: flex;
  flex-direction: column;
  background: #fff;
}

.visibo-chat-conversation-head {
  min-height: 86px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--vc-line);
  background: #fff;
}

.visibo-chat-conversation-info {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}

.visibo-chat-conversation-info h3 {
  margin: 0;
  font-size: 19px;
  color: var(--vc-navy);
}

.visibo-chat-conversation-info p {
  margin: 4px 0 0;
  color: var(--vc-muted);
  font-size: 13px;
}

.visibo-chat-conversation-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.visibo-chat-round-btn {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid var(--vc-line);
  background: #fff;
  color: var(--vc-navy);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.visibo-chat-round-btn--sm {
  width: 38px;
  height: 38px;
}

.visibo-chat-messages {
  flex: 1;
  background: linear-gradient(180deg, #f7f3ec, #f1ece4);
  padding: 26px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 280px;
}

.visibo-chat-msg-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 100%;
  scroll-margin-top: 72px;
  scroll-margin-bottom: 24px;
}

.visibo-chat-msg-block--deep-focus .visibo-chat-bubble {
  box-shadow: 0 0 0 2px rgba(22, 76, 200, 0.45), 0 8px 18px rgba(16, 29, 58, 0.08);
}

.visibo-chat-bubble-wrap {
  display: flex;
  gap: 10px;
  max-width: 78%;
  align-self: flex-start;
}

.visibo-chat-bubble-wrap.me {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.visibo-chat-small-avatar {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: #dfe8ff;
  color: #164cc8;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 12px;
  flex: 0 0 auto;
}

.visibo-chat-bubble {
  background: #fff;
  border: 1px solid rgba(220, 231, 245, 0.9);
  padding: 13px 15px;
  border-radius: 18px 18px 18px 5px;
  box-shadow: 0 8px 18px rgba(16, 29, 58, 0.05);
  line-height: 1.45;
}

.visibo-chat-bubble-wrap.me .visibo-chat-bubble {
  background: var(--vc-green);
  border-color: #bfeab7;
  border-radius: 18px 18px 5px 18px;
}

.visibo-chat-bubble--media-only {
  width: fit-content;
  max-width: min(100%, 320px);
}

.visibo-chat-bubble-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: #7b8ca8;
  margin-bottom: 5px;
  font-weight: 700;
}

.visibo-chat-bubble-meta__text {
  flex: 1;
  min-width: 0;
}

.visibo-chat-bubble-meta__actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.visibo-chat-msg__task {
  flex-shrink: 0;
  border: none;
  background: transparent;
  padding: 2px 6px;
  border-radius: 8px;
  color: #64748b;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
}

.visibo-chat-msg__task:hover {
  background: #ecfdf5;
  color: #0d9488;
}

@media (max-width: 520px) {
  [data-chat-task-modal] .admin-form-grid {
    grid-template-columns: 1fr !important;
  }
}

.visibo-chat-msg__delete {
  flex-shrink: 0;
  border: none;
  background: transparent;
  padding: 2px 6px;
  border-radius: 8px;
  color: #94a3b8;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
}

.visibo-chat-msg__delete:hover {
  background: #fef2f2;
  color: #b91c1c;
}

.visibo-chat-seen-state {
  color: #6f7f9a;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.visibo-chat-seen-state.is-seen {
  color: #2b7fff;
}

.visibo-chat-bubble p {
  margin: 0;
  color: #172743;
}

.visibo-chat-msg-block .visibo-chat-msg__rx {
  max-width: 78%;
  align-self: flex-start;
}

.visibo-chat-msg-block .visibo-chat-bubble-wrap.me + .visibo-chat-msg__rx {
  align-self: flex-end;
}

.visibo-chat-msg-block:has(.visibo-chat-bubble-wrap.me) .visibo-chat-msg__rx-top {
  justify-content: flex-end;
}

.visibo-chat-msg-block:has(.visibo-chat-bubble-wrap.me) .visibo-chat-msg__rx-quick {
  justify-content: flex-end;
}

.visibo-chat-msg-block:has(.visibo-chat-bubble-wrap.me) .visibo-chat-msg__rx {
  align-items: flex-end;
}

.visibo-chat-msg__attach-img-wrap {
  margin-top: 8px;
}

.visibo-chat-msg__attach-img {
  cursor: zoom-in;
}

.visibo-chat-composer-wrap {
  padding: 16px;
  background: #f3f6fa;
  border-top: 1px solid var(--vc-line);
  position: relative;
}

.visibo-chat-composer-box {
  background: #fff;
  border: 1px solid var(--vc-line);
  border-radius: 20px;
  padding: 12px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: end;
  box-shadow: 0 12px 25px rgba(16, 29, 58, 0.05);
}

.visibo-chat-composer-tools {
  display: flex;
  gap: 6px;
}

.visibo-chat-tool-btn {
  width: 39px;
  height: 39px;
  border-radius: 13px;
  border: 0;
  background: #f1f5fb;
  color: #60708b;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.visibo-chat-tool-btn--file {
  position: relative;
  overflow: hidden;
}

.visibo-chat-tool-btn--file input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.visibo-chat-composer-box textarea {
  border: 0;
  outline: 0;
  min-height: 39px;
  max-height: 160px;
  font-size: 15px;
  color: var(--vc-text);
  width: 100%;
  resize: vertical;
}

.visibo-chat-attachments-preview {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 2px;
}

.visibo-chat-attachments-preview[hidden] {
  display: none !important;
}

.visibo-chat-attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid #d5e1f3;
  background: #f4f8ff;
  color: #243955;
  font-size: 0.78rem;
  line-height: 1.2;
}

.visibo-chat-attach-chip__name {
  font-weight: 600;
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.visibo-chat-attach-chip__size {
  color: #6e819f;
}

.visibo-chat-attach-chip__remove {
  border: 0;
  background: transparent;
  color: #5b6f8f;
  cursor: pointer;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  display: inline-grid;
  place-items: center;
  padding: 0;
}

.visibo-chat-attach-chip__remove:hover {
  background: rgba(20, 53, 104, 0.08);
  color: #143568;
}

.visibo-chat-emoji-panel {
  position: absolute;
  bottom: 100%;
  left: 16px;
  right: 16px;
  margin-bottom: 8px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--vc-line);
  border-radius: 14px;
  box-shadow: var(--vc-shadow);
  z-index: 5;
  max-height: 200px;
  overflow-y: auto;
}

.visibo-chat-emoji-panel[hidden] {
  display: none !important;
}

.visibo-chat-emoji-cell {
  border: 0;
  background: #f1f5fb;
  border-radius: 10px;
  padding: 8px;
  cursor: pointer;
  font-size: 1.2rem;
}

.visibo-chat-image-modal-open {
  overflow: hidden;
}

.visibo-chat-image-modal {
  position: fixed;
  inset: 0;
  z-index: 13000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.visibo-chat-image-modal[hidden] {
  display: none !important;
}

.visibo-chat-image-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 18, 36, 0.72);
}

.visibo-chat-image-modal__sheet {
  position: relative;
  z-index: 1;
  width: min(1100px, 96vw);
  max-height: 92vh;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

.visibo-chat-image-modal__img {
  width: 100%;
  height: min(82vh, 820px);
  object-fit: contain;
  background: #0f172a;
}

.visibo-chat-image-modal__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid #d8e1ef;
  background: #fff;
}

.visibo-chat-image-modal__name {
  font-size: 0.88rem;
  color: #243955;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visibo-chat-image-modal__download {
  font-size: 0.82rem;
  font-weight: 700;
  color: #1f4f8f;
  text-decoration: none;
}

.visibo-chat-image-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 0;
  background: rgba(255, 255, 255, 0.9);
  color: #10294f;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 1100px) {
  .visibo-chat-round-btn--pane {
    display: none;
  }

  .visibo-chat-mobile-switch {
    display: flex;
  }

  .visibo-chat-layout {
    grid-template-columns: 270px 1fr;
    min-height: 560px;
  }

  .visibo-chat-column--topics {
    display: none;
  }

  .visibo-chat-layout[data-chat-mobile-pane='topics'] .visibo-chat-column--nav,
  .visibo-chat-layout[data-chat-mobile-pane='topics'] .visibo-chat-main {
    display: none !important;
  }

  .visibo-chat-layout[data-chat-mobile-pane='topics'] .visibo-chat-column--topics {
    display: flex !important;
  }

  .visibo-chat-layout[data-chat-mobile-pane='nav'] .visibo-chat-column--topics,
  .visibo-chat-layout[data-chat-mobile-pane='nav'] .visibo-chat-main {
    display: none !important;
  }

  .visibo-chat-layout[data-chat-mobile-pane='nav'] .visibo-chat-column--nav {
    display: flex !important;
  }

  .visibo-chat-layout[data-chat-mobile-pane='chat'] .visibo-chat-column--nav,
  .visibo-chat-layout[data-chat-mobile-pane='chat'] .visibo-chat-column--topics {
    display: none !important;
  }

  .visibo-chat-layout[data-chat-mobile-pane='chat'] .visibo-chat-main {
    display: flex !important;
  }
}

@media (max-width: 780px) {
  .visibo-chat-layout {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .visibo-chat-column {
    min-height: 520px;
  }

  .visibo-chat-main {
    min-height: 650px;
  }

  .visibo-chat-header {
    flex-direction: column;
    padding: 20px;
  }

  .visibo-chat-conversation-head {
    height: auto;
    align-items: flex-start;
    flex-direction: column;
  }

  .visibo-chat-bubble-wrap {
    max-width: 94%;
  }

  .visibo-chat-composer-box {
    grid-template-columns: 1fr;
  }

  .visibo-chat-composer-tools {
    order: 2;
  }

  .visibo-chat-btn-navy.visibo-chat-send {
    width: 100%;
    justify-content: center;
  }
}

/* Project — tab Historie */
.admin-project-history-tab__lead {
  margin: 6px 0 0;
  max-width: 42rem;
}

.admin-project-history-tab__empty {
  margin-top: 8px;
}

.admin-project-history-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

.admin-project-history-list::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, #cbd5e1 0%, #e2e8f0 100%);
  border-radius: 2px;
}

.admin-project-history-item {
  position: relative;
  display: flex;
  gap: 16px;
  padding: 16px 12px 16px 4px;
  margin: 0;
}

.admin-project-history-item:last-child {
  padding-bottom: 4px;
}

.admin-project-history-item__marker {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin: 6px 0 0 9px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #94a3b8;
  box-shadow: 0 0 0 3px #f1f5f9;
  z-index: 1;
}

.admin-project-history-item--schedule .admin-project-history-item__marker {
  border-color: #4f7cff;
  box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.15);
}

.admin-project-history-item--log .admin-project-history-item__marker {
  border-color: #0d9488;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12);
}

.admin-project-history-item__body {
  flex: 1;
  min-width: 0;
  padding: 14px 16px 16px;
  background: #fff;
  border: 1px solid #e8edf4;
  border-radius: 14px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
}

.admin-project-history-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  margin-bottom: 8px;
}

.admin-project-history-item__badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #475569;
  background: #f1f5f9;
  padding: 4px 9px;
  border-radius: 6px;
}

.admin-project-history-item--upcoming .admin-project-history-item__marker {
  background: linear-gradient(180deg, #f59e0b, #d97706);
}

.admin-project-history-item--upcoming .admin-project-history-item__badge {
  background: #fff7ed;
  color: #9a3412;
  border: 1px solid #fdba74;
}

.admin-project-history-item--schedule .admin-project-history-item__badge {
  color: #1e40af;
  background: #eff6ff;
}

.admin-project-history-item--log .admin-project-history-item__badge {
  color: #115e59;
  background: #ecfdf5;
}

.admin-project-history-item__when {
  font-size: 0.88rem;
  font-weight: 600;
  color: #0f172a;
}

.admin-project-history-item__title {
  margin: 0 0 10px;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
  color: #0f172a;
}

.admin-project-history-item__details {
  margin: 0 0 12px;
  padding: 0 0 0 18px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #475569;
}

.admin-project-history-item__details li + li {
  margin-top: 4px;
}

.admin-project-history-item__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  border-top: 1px solid #f1f5f9;
  margin-top: 4px;
  padding-top: 12px;
}

/* QR-sticker editor (admin) */
.admin-qr-sticker-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  gap: 22px;
  align-items: start;
}

@media (max-width: 1100px) {
  .admin-qr-sticker-editor {
    grid-template-columns: 1fr;
  }
}

.admin-qr-sticker-editor__form-card .admin-card-header--split {
  flex-direction: column;
  align-items: flex-start;
}

.admin-qr-sticker-editor__templates {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-qr-sticker-editor__tpl {
  display: block;
  cursor: pointer;
  border-radius: 12px;
}

.admin-qr-sticker-editor__tpl-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.admin-qr-sticker-editor__tpl-card {
  display: block;
  padding: 12px 14px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-qr-sticker-editor__tpl:hover .admin-qr-sticker-editor__tpl-card {
  border-color: #cbd5e1;
}

.admin-qr-sticker-editor__tpl.is-selected .admin-qr-sticker-editor__tpl-card {
  border-color: #3b5bdb;
  box-shadow: 0 0 0 3px rgba(59, 91, 219, 0.12);
}

.admin-qr-sticker-editor__tpl-name {
  display: block;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 4px;
}

.admin-qr-sticker-editor__tpl-desc {
  display: block;
  font-size: 0.88rem;
  color: #64748b;
  line-height: 1.45;
}

.admin-qr-sticker-editor__logo-block {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #eef2f7;
}

.admin-qr-sticker-editor__subhead {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
}

.admin-qr-sticker-editor__logo-path {
  font-size: 0.85rem;
  margin: 0 0 10px;
}

.admin-qr-sticker-editor__inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.admin-form-optional {
  font-weight: 400;
  color: #64748b;
}

.admin-qr-preview {
  border-radius: 16px;
  padding: 18px;
  min-height: 280px;
  box-sizing: border-box;
}

.admin-qr-preview__inner {
  max-width: 100%;
}

.admin-qr-preview__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.admin-qr-preview__logo-wrap {
  flex: 1;
  min-height: 56px;
  display: flex;
  align-items: center;
}

.admin-qr-preview__logo {
  max-width: 160px;
  max-height: 64px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.admin-qr-preview__logo-ph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  min-height: 48px;
  padding: 8px 12px;
  border: 1px dashed #94a3b8;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.admin-qr-preview__qr {
  position: relative;
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-qr-preview__qr-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, currentColor 1px, transparent 1px),
    linear-gradient(currentColor 1px, transparent 1px);
  background-size: 8px 8px;
  opacity: 0.2;
}

.admin-qr-preview__qr-label {
  position: relative;
  z-index: 1;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-qr-preview__slogan {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 8px;
}

.admin-qr-preview__company {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 10px;
}

.admin-qr-preview__contact {
  font-size: 0.86rem;
  line-height: 1.5;
  margin: 0 0 8px;
  word-break: break-word;
}

.admin-qr-preview__url {
  color: inherit;
  opacity: 0.92;
}

.admin-qr-preview__footer {
  font-size: 0.8rem;
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid rgba(148, 163, 184, 0.35);
  line-height: 1.45;
}

/* Template: klassiek blauw */
.admin-qr-preview--classic_blue {
  background: linear-gradient(160deg, #f8fafc 0%, #fff 40%);
  border: 1px solid #e2e8f0;
  color: #0f2744;
}

.admin-qr-preview--classic_blue .admin-qr-preview__qr {
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid #bfdbfe;
}

.admin-qr-preview--classic_blue .admin-qr-preview__slogan {
  color: #1e3a5f;
}

/* Template: minimal licht */
.admin-qr-preview--minimal_light {
  background: #fff;
  border: 2px solid #e8edf4;
  color: #1e293b;
}

.admin-qr-preview--minimal_light .admin-qr-preview__qr {
  background: #f8fafc;
  color: #475569;
  border: 1px solid #e2e8f0;
}

/* Template: contrast donker */
.admin-qr-preview--bold_dark {
  background: linear-gradient(145deg, #0b1220 0%, #1e293b 100%);
  border: 1px solid #334155;
  color: #f1f5f9;
}

.admin-qr-preview--bold_dark .admin-qr-preview__qr {
  background: #0f172a;
  color: #38bdf8;
  border: 1px solid #334155;
}

.admin-qr-preview--bold_dark .admin-qr-preview__logo-ph {
  border-color: #64748b;
  color: #94a3b8;
}

.admin-qr-preview--bold_dark .admin-qr-preview__footer {
  border-top-color: rgba(148, 163, 184, 0.25);
}

/* QR-sticker studio (drag canvas + sidebar) */
.admin-qr-studio {
  margin-bottom: 1.5rem;
}

.admin-qr-studio__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: 22px;
  align-items: start;
}

@media (max-width: 1100px) {
  .admin-qr-studio__layout {
    grid-template-columns: 1fr;
  }
}

.admin-qr-studio__design-form {
  margin: 0;
  min-width: 0;
}

.admin-qr-studio__canvas-card .admin-card-header--split {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
}

.admin-qr-studio__title {
  margin: 0 0 4px;
  font-size: 1.15rem;
}

.admin-qr-studio__hint {
  margin: 0;
  max-width: 52ch;
  line-height: 1.5;
}

.admin-qr-studio__canvas-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-qr-studio__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
}

.admin-qr-studio__toolbar-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}

.admin-qr-studio__tool {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  color: #0f172a;
  cursor: pointer;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.admin-qr-studio__tool:hover {
  border-color: #93c5fd;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
}

.admin-qr-studio__tool-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(145deg, #eef2ff 0%, #e0e7ff 100%);
  font-weight: 800;
  font-size: 0.95rem;
  color: #4338ca;
}

.admin-qr-studio__tool-icon--line {
  font-size: 0;
  background: linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 100%);
}

.admin-qr-studio__tool-icon--line::after {
  content: "";
  display: block;
  width: 18px;
  height: 3px;
  border-radius: 2px;
  background: #475569;
  transform: rotate(-12deg);
}

.admin-qr-studio__format-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 10px 14px;
  margin-bottom: 10px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #fff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}

.admin-qr-studio__format-bar[hidden] {
  display: none !important;
}

.admin-qr-studio__format-bar-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
  flex: 0 0 auto;
  min-width: 6.5rem;
}

.admin-qr-studio__format-field {
  display: flex;
  align-items: center;
  margin: 0;
}

.admin-qr-studio__format-field--range {
  flex: 1 1 140px;
  min-width: 120px;
}

.admin-qr-studio__format-select {
  min-width: 8.5rem;
  padding: 6px 10px;
  font-size: 0.875rem;
}

.admin-qr-studio__format-range {
  width: 100%;
  max-width: 220px;
  vertical-align: middle;
}

.admin-qr-studio__format-fs-val {
  font-size: 0.75rem;
  font-weight: 600;
  color: #475569;
  min-width: 4.5rem;
}

.admin-qr-studio__format-color {
  width: 42px;
  height: 36px;
  padding: 2px;
  border-radius: 8px;
  cursor: pointer;
}

.admin-qr-sticker-canvas__txt-layer.is-format-active {
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.35);
  border-color: rgba(79, 70, 229, 0.65);
}

.admin-qr-sticker-canvas__free-txt.is-inline-editing {
  z-index: 15;
}

.admin-qr-inline-editor {
  display: block;
  position: absolute;
  left: 4px;
  top: 4px;
  right: 22px;
  width: calc(100% - 28px);
  max-width: min(420px, 88vw);
  min-height: 2.75em;
  margin: 0;
  padding: 6px 8px;
  z-index: 20;
  resize: vertical;
  border-radius: 8px;
  border: 2px solid #4f46e5;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15);
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  color: inherit;
  line-height: 1.25;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.98);
}

.admin-qr-sticker-canvas--bold_dark .admin-qr-inline-editor {
  background: rgba(30, 41, 59, 0.98);
  color: #f1f5f9;
  border-color: #818cf8;
}

.admin-qr-sticker-canvas {
  position: relative;
  border-radius: 16px;
  padding: 14px 14px 18px;
  box-sizing: border-box;
  border: 1px solid #e2e8f0;
  background: linear-gradient(160deg, #f8fafc 0%, #fff 45%);
  color: #0f2744;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.06);
}

.admin-qr-sticker-canvas__ruler {
  position: absolute;
  left: 8px;
  top: 8px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #94a3b8;
  pointer-events: none;
}

.admin-qr-sticker-canvas__ruler::before {
  content: "Voorbeeld · sleep blokken";
}

.admin-qr-sticker-canvas__stage {
  position: relative;
  margin-top: 22px;
  width: 100%;
  aspect-ratio: 210 / 148;
  max-height: min(420px, 52vh);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.65);
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.25);
  overflow: hidden;
  --qr-sticker-headline-h: max(2.85rem, 18%);
}

.admin-qr-sticker-canvas__headline {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 14;
  margin: 0;
  height: var(--qr-sticker-headline-h);
  padding: 0 max(0.35rem, 1.25%);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 800;
  font-size: clamp(0.92rem, 4.2vmin, 1.45rem);
  letter-spacing: 0.02em;
  line-height: 1.12;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(180deg, #102348 0%, #1c3766 100%);
  color: #f8fafc;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset;
  pointer-events: none;
}

.admin-qr-sticker-canvas__stage-work {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--qr-sticker-headline-h);
  bottom: 0;
  border-radius: 0 0 11px 11px;
}

.admin-qr-sticker-canvas__safe {
  position: absolute;
  inset: 5%;
  border: 1px dashed rgba(100, 116, 139, 0.35);
  border-radius: 8px;
  pointer-events: none;
  z-index: 0;
}

/* Verplaatsbare tekstregels (posities + typografie via inline) */
.admin-qr-sticker-canvas__txt-layer {
  position: absolute;
  z-index: 5;
  margin: 0;
  padding: 3px 6px;
  border: 1px dashed rgba(59, 91, 219, 0.35);
  background: rgba(255, 255, 255, 0.5);
  border-radius: 6px;
  cursor: grab;
  touch-action: none;
  text-align: left;
  max-width: 92%;
  min-width: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  font-size: 12px;
  line-height: 1.25;
  color: #0f172a;
  transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.admin-qr-sticker-canvas__txt-layer:hover {
  border-color: rgba(59, 91, 219, 0.7);
  background: rgba(255, 255, 255, 0.75);
  z-index: 6;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
}

.admin-qr-sticker-canvas--bold_dark .admin-qr-sticker-canvas__txt-layer {
  background: rgba(15, 23, 42, 0.55);
  border-color: rgba(56, 189, 248, 0.35);
  color: #e2e8f0;
}

.admin-qr-sticker-canvas--bold_dark .admin-qr-sticker-canvas__txt-layer:hover {
  background: rgba(15, 23, 42, 0.8);
  border-color: rgba(56, 189, 248, 0.6);
}

.admin-qr-sticker-canvas__txt-grab {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 14px;
  height: 3px;
  border-radius: 1px;
  background: repeating-linear-gradient(
    90deg,
    currentColor,
    currentColor 2px,
    transparent 2px,
    transparent 4px
  );
  opacity: 0.35;
  pointer-events: none;
}

.admin-qr-sticker-canvas__txt-inner {
  display: block;
  position: relative;
  z-index: 1;
  max-width: 100%;
  word-break: break-word;
  white-space: pre-wrap;
}

.admin-qr-sticker-canvas__free-host {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
}

.admin-qr-sticker-canvas__free-host > * {
  pointer-events: auto;
}

.admin-qr-free-txt-inner {
  display: block;
  position: relative;
  z-index: 1;
  max-width: 100%;
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: normal;
  overflow-wrap: break-word;
  line-height: 1.25;
}

.admin-qr-sticker-canvas__free-txt {
  position: absolute;
  display: inline-block;
  margin: 0;
  padding: 4px 22px 4px 8px;
  border: 1px dashed rgba(79, 70, 229, 0.45);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  cursor: grab;
  touch-action: none;
  text-align: left;
  /* Brede genoeg om normaal te typen; groeit mee met de tekst tot max. */
  width: max-content;
  max-width: 92%;
  min-width: 1.5em;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  transition:
    border-color 0.12s ease,
    background 0.12s ease,
    box-shadow 0.12s ease;
}

.admin-qr-sticker-canvas__free-txt:hover {
  border-color: rgba(79, 70, 229, 0.85);
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.08);
}

.admin-qr-sticker-canvas__free-txt.is-selected {
  border-color: #4f46e5;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.25);
}

.admin-qr-sticker-canvas__free-line-wrap {
  position: absolute;
  cursor: grab;
  touch-action: none;
}

.admin-qr-sticker-canvas__free-line-wrap.is-selected .admin-qr-sticker-canvas__free-line-bar {
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.35);
}

.admin-qr-sticker-canvas__free-line-bar {
  border-radius: 2px;
  pointer-events: none;
}

.admin-qr-free-delete {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #64748b;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
}

.admin-qr-free-delete:hover {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}

.admin-qr-sticker-canvas--bold_dark .admin-qr-sticker-canvas__free-txt {
  background: rgba(15, 23, 42, 0.72);
  border-color: rgba(129, 140, 248, 0.45);
}

.admin-qr-studio__free-noselect {
  font-size: 0.95rem;
  color: #94a3b8;
  padding: 8px 0;
}

body.admin-qr-studio--dragging .admin-qr-sticker-canvas__txt-layer {
  cursor: grabbing;
}

body.admin-qr-studio--dragging .admin-qr-sticker-canvas__free-txt,
body.admin-qr-studio--dragging .admin-qr-sticker-canvas__free-line-wrap {
  cursor: grabbing;
}

.admin-qr-studio__typography-card .admin-qr-studio__color-input {
  width: 100%;
  height: 42px;
  padding: 2px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  box-sizing: border-box;
}

.admin-qr-studio__color-row label {
  display: block;
  margin-bottom: 6px;
}

.admin-qr-sticker-canvas__block {
  position: absolute;
  z-index: 2;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: grab;
  touch-action: none;
  text-align: left;
  transition: box-shadow 0.15s ease, transform 0.12s ease;
}

.admin-qr-sticker-canvas__block:focus {
  outline: 2px solid #3b5bdb;
  outline-offset: 2px;
}

.admin-qr-sticker-canvas__block:hover {
  z-index: 3;
}

body.admin-qr-studio--dragging,
body.admin-qr-studio--dragging .admin-qr-sticker-canvas__block {
  cursor: grabbing;
}

.admin-qr-sticker-canvas__logo-block {
  width: 38%;
  height: 24%;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: visible;
  border-radius: 10px;
  box-shadow:
    0 0 0 2px rgba(59, 91, 219, 0.35),
    0 8px 24px rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.admin-qr-sticker-canvas__resize {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: #3b5bdb;
  border: 2px solid #fff;
  box-shadow: 0 1px 5px rgba(15, 23, 42, 0.25);
  cursor: nwse-resize;
  z-index: 6;
  pointer-events: auto;
  box-sizing: border-box;
}

.admin-qr-sticker-canvas__resize:hover {
  background: #364fc7;
}

body.admin-qr-studio--resizing {
  cursor: nwse-resize;
  user-select: none;
}

.admin-qr-sticker-canvas__qr-block {
  width: 22%;
  aspect-ratio: 1;
  height: auto;
  max-width: 100%;
  border-radius: 10px;
  box-shadow:
    0 0 0 2px rgba(30, 64, 175, 0.4),
    0 8px 24px rgba(15, 23, 42, 0.1);
  background: #eff6ff;
  color: #1e40af;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-qr-sticker-canvas__grab {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 4px;
  border-radius: 2px;
  background: repeating-linear-gradient(
    90deg,
    currentColor,
    currentColor 2px,
    transparent 2px,
    transparent 4px
  );
  opacity: 0.45;
  pointer-events: none;
}

.admin-qr-sticker-canvas__logo-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  padding: 6px 8px;
  box-sizing: border-box;
}

.admin-qr-sticker-canvas__logo-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.admin-qr-sticker-canvas__ph {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  padding: 6px 8px;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
}

.admin-qr-sticker-canvas__qr-inner {
  position: relative;
  width: 72%;
  height: 72%;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-qr-sticker-canvas__qr-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, currentColor 1px, transparent 1px),
    linear-gradient(currentColor 1px, transparent 1px);
  background-size: 7px 7px;
  opacity: 0.22;
}

.admin-qr-sticker-canvas__qr-label {
  position: relative;
  z-index: 1;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-qr-sticker-canvas--minimal_light {
  background: #fff;
  border-color: #e8edf4;
  color: #1e293b;
}

.admin-qr-sticker-canvas--minimal_light .admin-qr-sticker-canvas__qr-block {
  background: #f8fafc;
  color: #475569;
  box-shadow:
    0 0 0 2px rgba(71, 85, 105, 0.35),
    0 8px 24px rgba(15, 23, 42, 0.06);
}

.admin-qr-sticker-canvas--bold_dark {
  background: linear-gradient(145deg, #0b1220 0%, #1e293b 100%);
  border-color: #334155;
  color: #f1f5f9;
}

.admin-qr-sticker-canvas--bold_dark .admin-qr-sticker-canvas__stage {
  background: rgba(15, 23, 42, 0.35);
  box-shadow: inset 0 0 0 1px rgba(51, 65, 85, 0.6);
}

.admin-qr-sticker-canvas--bold_dark .admin-qr-sticker-canvas__headline {
  background: linear-gradient(180deg, #38bdf8 0%, #2563eb 100%);
  color: #0f172a;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset;
}

.admin-qr-sticker-canvas--bold_dark .admin-qr-sticker-canvas__safe {
  border-color: rgba(148, 163, 184, 0.35);
}

.admin-qr-sticker-canvas--bold_dark .admin-qr-sticker-canvas__logo-block {
  background: rgba(15, 23, 42, 0.75);
  box-shadow:
    0 0 0 2px rgba(56, 189, 248, 0.45),
    0 8px 24px rgba(0, 0, 0, 0.35);
}

.admin-qr-sticker-canvas--bold_dark .admin-qr-sticker-canvas__qr-block {
  background: #0f172a;
  color: #38bdf8;
  box-shadow:
    0 0 0 2px rgba(56, 189, 248, 0.4),
    0 8px 24px rgba(0, 0, 0, 0.35);
}

.admin-qr-sticker-canvas--bold_dark .admin-qr-sticker-canvas__ph {
  border-color: #64748b;
  color: #94a3b8;
}

.admin-qr-studio__snapbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.admin-qr-studio__snaplabel {
  font-size: 0.82rem;
  font-weight: 600;
  color: #64748b;
  margin-right: 4px;
}

.admin-qr-studio__tpl-fieldset {
  margin-top: 18px;
  margin-bottom: 0;
}

.admin-qr-studio__tpl-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.admin-qr-studio__tpl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 12px;
  align-items: center;
  cursor: pointer;
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 2px solid #e2e8f0;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  max-width: 100%;
}

.admin-qr-studio__tpl:hover {
  border-color: #cbd5e1;
}

.admin-qr-studio__tpl.is-selected {
  border-color: #3b5bdb;
  box-shadow: 0 0 0 3px rgba(59, 91, 219, 0.12);
}

.admin-qr-studio__tpl-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.admin-qr-studio__tpl-visual {
  width: 44px;
  height: 32px;
  border-radius: 6px;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.admin-qr-studio__tpl-visual--classic_blue {
  background: linear-gradient(135deg, #f8fafc 40%, #eff6ff 100%);
  border: 1px solid #bfdbfe;
}

.admin-qr-studio__tpl-visual--minimal_light {
  background: #fff;
  border: 2px solid #e8edf4;
}

.admin-qr-studio__tpl-visual--bold_dark {
  background: linear-gradient(135deg, #0b1220, #1e293b);
  border: 1px solid #334155;
}

.admin-qr-studio__tpl-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.admin-qr-studio__tpl-name {
  font-weight: 700;
  font-size: 0.9rem;
  color: #0f172a;
}

.admin-qr-studio__tpl-desc {
  font-size: 0.8rem;
  color: #64748b;
  line-height: 1.35;
}

.admin-qr-studio__sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.admin-qr-studio__sidebar .admin-card-header {
  margin-bottom: 12px;
  font-size: 1rem;
}

.admin-qr-studio__drop-card .admin-form-hint {
  margin-top: 0;
}

.admin-qr-studio__file-name {
  margin: 0 0 8px;
  font-size: 0.85rem;
}

.admin-qr-studio__mini-form {
  margin-top: 8px;
}

.admin-qr-studio__mini-form + .admin-qr-studio__mini-form {
  margin-top: 12px;
}

.admin-qr-studio__dropzone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: 16px;
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.admin-qr-studio__dropzone:hover {
  border-color: #3b5bdb;
  background: #f1f5ff;
}

.admin-qr-studio__dropzone.is-dragover {
  border-color: #3b5bdb;
  border-style: solid;
  background: #eef2ff;
  box-shadow: 0 0 0 3px rgba(59, 91, 219, 0.15);
}

.admin-qr-studio__drop-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  font-size: 0;
}

.admin-qr-studio__dropzone-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  pointer-events: none;
}

.admin-qr-studio__drop-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #3b5bdb;
  color: #fff;
  font-size: 1.35rem;
  font-weight: 300;
  line-height: 1;
}

.admin-qr-studio__drop-title {
  font-weight: 700;
  font-size: 0.92rem;
  color: #0f172a;
}

.admin-qr-studio__drop-sub {
  font-size: 0.78rem;
  color: #64748b;
}

.admin-qr-studio__upload-btn {
  margin-top: 10px;
  width: 100%;
}

@media (max-width: 640px) {
  .admin-project-detail-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

.admin-card-header--split {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-card-header-actions--wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.admin-project-installations-card {
  margin-top: 22px;
}

.admin-project-installations-card .admin-card-header--split {
  align-items: flex-start;
}

.admin-project-installations-card .admin-card-header--split > div:first-child {
  flex: 1;
  min-width: min(100%, 280px);
}

.admin-project-installations-card .admin-card-header--split h2 {
  margin: 0 0 4px;
}

.admin-project-installations-lead {
  margin: 0;
  font-size: 0.92rem;
  color: #64748b;
  line-height: 1.45;
  max-width: 52ch;
}

.admin-project-installations-summary {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.admin-project-installations-summary p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #334155;
}

.admin-project-installations-summary__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  vertical-align: middle;
}

.admin-project-installations-summary__ok {
  margin-left: 6px;
  color: #14804a;
  font-weight: 600;
}

.admin-install-maint-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.admin-install-maint-cell__date {
  font-weight: 600;
  color: #17233c;
}

.admin-install-maint-cell__muted {
  font-size: 0.82rem;
  color: #94a3b8;
}

.admin-installations-table__row--urgency-overdue td:first-child {
  box-shadow: inset 3px 0 0 0 #dc2626;
}

.admin-installations-table__row--urgency-soon td:first-child {
  box-shadow: inset 3px 0 0 0 #ea580c;
}

.admin-installations-table__col-actions {
  width: 1%;
  white-space: nowrap;
  text-align: right;
  vertical-align: middle;
}

.admin-installations-table__delete-stop {
  display: inline-block;
  margin: 0;
}

.admin-installation-maint-log-list {
  margin: 0 0 14px;
  padding: 0;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fafbfc;
}

.admin-installation-maint-log-list--detailed {
  max-height: min(52vh, 440px);
  padding: 10px 10px 6px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #f1f5f9;
}

.admin-installation-maint-card {
  position: relative;
  margin: 0;
  padding: 14px 16px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.admin-installation-maint-card:hover {
  box-shadow: 0 8px 22px -10px rgba(15, 23, 42, 0.16);
  border-color: #cbd5e1;
}

.admin-installation-maint-card--highlight {
  outline: 2px solid rgba(79, 124, 255, 0.55);
  outline-offset: 1px;
  transition: outline-color 0.2s ease;
}

.admin-installation-maint-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f1f5f9;
}

.admin-installation-maint-card__date {
  font-size: 0.95rem;
  color: #0f172a;
  font-weight: 600;
  letter-spacing: 0.005em;
}

.admin-installation-maint-card__badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: #e0e7ff;
  color: #3730a3;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-installation-maint-card__dl {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 118px) 1fr;
  gap: 6px 14px;
  font-size: 0.88rem;
  line-height: 1.45;
}

.admin-installation-maint-card__dt {
  margin: 0;
  color: #64748b;
  font-weight: 600;
}

.admin-installation-maint-card__dd {
  margin: 0;
  color: #334155;
}

.admin-installation-maint-card__dd--multiline {
  white-space: pre-wrap;
  word-break: break-word;
}

.admin-installation-maint-card__legacy {
  margin: 0 0 8px;
  font-size: 0.9rem;
  color: #475569;
  line-height: 1.45;
}

.admin-installation-maint-card__attachments {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed #e2e8f0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.admin-installation-maint-card__attachments-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94a3b8;
  width: 100%;
  margin-bottom: 2px;
}

.admin-installation-maint-att-chip {
  display: inline-block;
  font-size: 0.8rem;
  padding: 4px 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #475569;
  max-width: 100%;
  word-break: break-word;
}

.admin-installation-maint-card__actions {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.admin-installation-maint-card__actions-primary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}

/* ===== Card-action knop (gedeeld door onderhoud + defect cards) =====
   Slank, gelijk in vorm, met SVG-icoon. Standaard: witte achtergrond met
   subtiele rand. Hover toont een semantische tint per actie. Active geeft
   een korte druk-feedback. */
.pidd-card-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #334155;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
  white-space: nowrap;
  font-family: inherit;
}

.pidd-card-action svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  opacity: 0.85;
  transition: opacity 0.15s ease;
}

.pidd-card-action:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #1e293b;
}

.pidd-card-action:hover svg {
  opacity: 1;
}

.pidd-card-action:active {
  transform: translateY(1px);
}

.pidd-card-action:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}

/* Variant: download — koel blauw accent op hover. */
.pidd-card-action--download:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

/* Variant: wijzigen — indigo accent. */
.pidd-card-action--edit:hover {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #4338ca;
}

/* Variant: mail — cyan/teal accent (passend bij verzending). */
.pidd-card-action--email:hover {
  background: #ecfeff;
  border-color: #a5f3fc;
  color: #0e7490;
}

/* Variant: delete — ghost (transparant) tot hover, dan zacht rood.
   Naar rechts gedrukt zodat hij visueel los staat van de primaire set. */
.pidd-card-action--delete {
  margin-left: auto;
  border-color: transparent;
  background: transparent;
  color: #b91c1c;
}

.pidd-card-action--delete:hover {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.pidd-card-action--delete:focus-visible {
  outline-color: #fca5a5;
}

.admin-installation-maint-card__preview {
  margin: 0 0 4px;
  font-size: 0.98rem;
  color: #0f172a;
  font-weight: 600;
  line-height: 1.4;
  word-break: break-word;
}

.admin-installation-maint-card__preview-sub {
  margin: 0 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: #475569;
  flex-wrap: wrap;
}

.admin-installation-maint-card__preview-sub-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 2px 8px;
  line-height: 1.4;
}

.admin-installation-maint-card__preview-sub-text {
  color: #334155;
  font-weight: 500;
}

.admin-installation-maint-card__details {
  margin: 6px 0 4px;
  padding: 4px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.admin-installation-maint-card__details[open] {
  background: #fff;
  border-color: #cbd5e1;
}

.admin-installation-maint-card__details summary {
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 600;
  color: #4338ca;
  list-style: none;
  padding: 6px 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.admin-installation-maint-card__details summary::-webkit-details-marker {
  display: none;
}

.admin-installation-maint-card__details summary::before {
  content: '+';
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  background: #4338ca;
  color: #fff;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  transition: background 0.15s ease, transform 0.15s ease;
}

.admin-installation-maint-card__details[open] summary::before {
  content: '\2212'; /* unicode minus */
  background: #312e81;
}

.admin-installation-maint-card__details[open] .admin-installation-maint-card__dl {
  margin-top: 4px;
  padding-bottom: 8px;
}

.admin-installation-insp-doc-list {
  margin: 0 0 14px;
  padding: 8px 10px;
  max-height: min(40vh, 300px);
  overflow-y: auto;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fafbfc;
}

.admin-installation-insp-doc-row {
  padding: 10px 6px;
  border-bottom: 1px solid #e2e8f0;
  font-size: 0.9rem;
}

.admin-installation-insp-doc-row:last-child {
  border-bottom: 0;
}

.admin-installation-insp-doc-row__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 12px;
  margin-bottom: 4px;
}

.admin-installation-insp-doc-row__meta {
  font-size: 0.82rem;
  color: #64748b;
  white-space: nowrap;
}

.admin-installation-insp-doc-row__sub {
  font-size: 0.82rem;
  color: #64748b;
  margin-bottom: 8px;
}

.admin-installation-insp-doc-row__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.admin-installation-maint-log-empty {
  margin: 0;
  padding: 12px 14px;
  font-size: 0.9rem;
  color: #64748b;
}

.admin-installation-maint-log-row {
  padding: 10px 14px;
  border-bottom: 1px solid #e2e8f0;
  font-size: 0.92rem;
}

.admin-installation-maint-log-row:last-child {
  border-bottom: 0;
}

.admin-installation-maint-log-row__head {
  margin-bottom: 4px;
}

.admin-installation-maint-log-row__date {
  font-size: 0.95rem;
  color: #17233c;
}

.admin-installation-maint-log-row__notes {
  margin: 4px 0 8px;
  color: #475569;
  line-height: 1.45;
}

.admin-installation-maint-log-row__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.admin-installation-detail-dialog__tabs {
  width: 100%;
  margin-bottom: 16px;
  box-sizing: border-box;
}

.admin-installation-detail-dialog__panel .admin-modal__section:first-child {
  margin-top: 0;
}

.admin-modal__section--flush-top {
  padding-top: 0;
}

.admin-modal__section--flush-top .admin-modal__section-title {
  margin-top: 0;
}

.admin-installation-detail-dialog__maint-actions {
  margin-top: 14px;
}

/* Installatie-modal: één tab «Onderhoud» = historiek + registratie */
.admin-installation-maint-combined {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.admin-installation-maint-combined__segment {
  margin: 0;
  padding: 16px 18px 18px;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 31, 61, 0.04);
}

.admin-installation-maint-combined__segment--history {
  background: linear-gradient(180deg, #fafbfd 0%, #fff 48%);
  border-color: #e4eaf0;
}

.admin-installation-maint-combined__segment--register {
  border-color: #c7d2fe;
  background: linear-gradient(165deg, #f8faff 0%, #fff 55%);
  box-shadow: 0 2px 14px rgba(59, 91, 184, 0.06);
}

.admin-installation-maint-combined__segment-head {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e8ecf4;
}

.admin-installation-maint-combined__segment-title {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 700;
  color: #142042;
  letter-spacing: -0.01em;
}

.admin-installation-maint-combined__segment-lede {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: #62708a;
  max-width: 62ch;
}

.admin-installation-maint-combined__form-hint {
  margin: 0 0 12px;
}

.admin-installation-maint-combined__segment .admin-installation-maint-log-list {
  margin-top: 0;
}

.admin-project-installations-footer {
  margin: 14px 4px 0;
  font-size: 0.92rem;
}

.admin-installations-hint {
  margin-bottom: 16px;
}

.admin-installations-hint-text {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #4a5568;
}

.admin-projects-search-actions--inline {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 4px;
}

@media (min-width: 900px) {
  .admin-projects-search-actions--inline {
    grid-column: auto;
    margin-top: 0;
    align-self: end;
  }
}

.admin-form-group input,
.admin-form-group select,
.admin-form-group textarea {
  width: 100%;
  border: 1px solid #dbe3ef;
  background: #fff;
  border-radius: 14px;
  padding: 13px 15px;
  font-size: 0.96rem;
  color: #17233c;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.admin-form-group input:focus,
.admin-form-group select:focus,
.admin-form-group textarea:focus {
  outline: none;
  border-color: #4f7cff;
  box-shadow: 0 0 0 4px rgba(79, 124, 255, 0.12);
}

.admin-form-multiselect {
  min-height: 8rem;
  padding: 10px 12px;
  line-height: 1.45;
}

.admin-project-customers-checklist {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-project-customers-checkitem {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #e4eaf4;
  border-radius: 12px;
  background: #fafbfd;
  cursor: pointer;
  font-weight: 500;
  color: #1a2740;
}

.admin-form-group .admin-project-customers-checkitem input[type="checkbox"] {
  margin-top: 3px;
  width: auto;
  min-width: 1.1rem;
  flex-shrink: 0;
  padding: 0;
  border-radius: 4px;
}

.admin-project-customers-checkitem__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.35;
  min-width: 0;
}

.admin-project-customers-checkitem__text > strong {
  font-weight: 700;
  color: #0f172a;
  word-break: break-word;
}

.admin-form-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-start;
  margin-top: 6px;
}

.admin-btn {
  border: 0;
  border-radius: 14px;
  padding: 13px 18px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.admin-btn:hover {
  transform: translateY(-1px);
}

.admin-btn-primary {
  background: #17233c;
  color: #fff;
  box-shadow: 0 10px 24px rgba(23, 35, 60, 0.14);
}

.admin-btn-sm {
  padding: 8px 12px;
  font-size: 0.85rem;
  border-radius: 10px;
}

a.admin-btn-sm {
  display: inline-block;
  text-decoration: none;
  line-height: 1.35;
}

.admin-btn-danger {
  background: #b83232;
  color: #fff;
  box-shadow: 0 6px 16px rgba(184, 50, 50, 0.2);
}

.admin-btn-danger:hover {
  opacity: 0.95;
}

/* Instellingen: pakketkiezer (kaarten) + opzeggen */
.admin-plan-picker-label {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: #17233c;
  margin-bottom: 6px;
}

.admin-plan-picker-intro {
  margin: 0 0 18px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #64748b;
  max-width: 62ch;
}

.admin-plan-picker {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 10px;
}

@media (max-width: 1100px) {
  .admin-plan-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .admin-plan-picker {
    grid-template-columns: 1fr;
  }
}

.admin-plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 20px 18px 18px;
  margin: 0;
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  background: #fff;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.admin-plan-card:hover {
  border-color: #cbd7e8;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06);
}

.admin-plan-card:focus-visible {
  outline: none;
  border-color: #4f7cff;
  box-shadow: 0 0 0 4px rgba(79, 124, 255, 0.15);
}

.admin-plan-card.is-selected {
  border-color: #1a5082;
  background: linear-gradient(180deg, #f8fbff 0%, #fff 55%);
  box-shadow: 0 8px 28px rgba(26, 80, 130, 0.12);
}

.admin-plan-card--popular {
  border-color: #c5d8ff;
}

.admin-plan-card--is-current-subscription {
  padding-top: 44px;
}

.admin-plan-card-current-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: #0f766e;
  padding: 5px 10px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(15, 118, 110, 0.25);
}

.admin-plan-card-ribbon {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1a5082;
  background: #e8f0ff;
  padding: 4px 8px;
  border-radius: 8px;
}

.admin-plan-card-name {
  font-size: 1.15rem;
  font-weight: 800;
  color: #102348;
  margin-bottom: 4px;
}

.admin-plan-card-tagline {
  font-size: 0.82rem;
  color: #64748b;
  margin-bottom: 12px;
  line-height: 1.35;
}

.admin-plan-card-price {
  font-size: 0.95rem;
  color: #475569;
  margin-bottom: 14px;
}

.admin-plan-card-price strong {
  font-size: 1.35rem;
  font-weight: 800;
  color: #102348;
}

.admin-plan-card-features {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.86rem;
  line-height: 1.55;
  color: #475569;
}

.admin-plan-card-features li {
  margin-bottom: 4px;
}

.admin-subscription-zone {
  margin-top: 28px;
  padding: 22px 24px;
  border-radius: 16px;
  border: 1px solid #fecaca;
  background: linear-gradient(135deg, #fffefb 0%, #fef2f2 100%);
}

.admin-subscription-zone-title {
  margin: 0 0 10px;
  font-size: 1.05rem;
  font-weight: 800;
  color: #991b1b;
}

.admin-subscription-zone-lead {
  margin: 0 0 16px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #7f1d1d;
  max-width: 62ch;
}

.admin-subscription-cancel-form {
  margin: 0;
}

.admin-settings-abonnement-teaser {
  margin: 0 0 16px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #475569;
  max-width: 58ch;
}

.admin-btn-full {
  width: 100%;
  justify-content: center;
}

.admin-settings-options {
  display: grid;
  gap: 14px;
}

.admin-checkbox-group {
  grid-column: 1 / -1; /* 🔥 full width in je form grid */
  display: flex;
  flex-direction: column; /* 🔥 onder elkaar */
  gap: 10px;
  margin-top: 4px;
}

.admin-checkbox-row {
  display: flex;
  align-items: center; /* 🔥 zorgt voor perfecte uitlijning */
  gap: 10px;
  font-size: 0.95rem;
  color: #17233c;
  line-height: 1.4;
  cursor: pointer;
}

/* checkbox zelf */
.admin-checkbox-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0; /* 🔥 haalt browser misalignment weg */
  flex-shrink: 0;
  accent-color: #17233c; /* mooie kleur */
}

/* tekst */
.admin-checkbox-row span {
  display: block;
}

.admin-form-legend {
  font-weight: 600;
  font-size: 0.95rem;
  color: #17233c;
  margin: 0 0 8px;
  padding: 0;
}

.admin-email-preview {
  margin-top: 8px;
  padding: 12px 14px;
  background: #f4f6f9;
  border-radius: 8px;
  font-size: 0.95rem;
  color: #17233c;
  border: 1px solid #e2e8f0;
}

.admin-email-preview--subject {
  font-weight: 600;
  margin-bottom: 0;
}

.admin-email-preview--body {
  max-height: 220px;
  overflow: auto;
  line-height: 1.45;
}

.admin-email-preview--body p {
  margin: 0 0 0.6em;
}

.admin-textarea-mail-html {
  font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
  font-size: 13px;
  line-height: 1.45;
}

.admin-email-var-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
}

.admin-email-var-bar__label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #2d3748;
  margin-right: 4px;
}

.admin-email-var-btn {
  flex-shrink: 0;
}

.admin-email-placeholder-select {
  min-width: 220px;
  max-width: min(100%, 420px);
  flex: 1 1 auto;
  font-size: 0.9rem;
}

/* Quill e-mail (agenda-modal + sjablonen) */
.admin-email-quill-mount .ql-toolbar {
  border-radius: 8px 8px 0 0;
  border-color: #cbd5e0;
  background: #f7fafc;
}
.admin-email-quill-mount .ql-container {
  border-radius: 0 0 8px 8px;
  border-color: #cbd5e0;
  font-family: inherit;
  font-size: 14px;
}
.admin-schedule-email-quill .ql-editor {
  min-height: 140px;
}
.admin-email-template-quill .ql-editor {
  min-height: 220px;
}

dialog.admin-dialog-native--website-lead-email .admin-website-lead-email-section--compose .admin-billing-quote-email-quill {
  margin-top: 0;
}

dialog.admin-dialog-native--website-lead-email .admin-billing-quote-email-quill .ql-container {
  height: auto;
}

dialog.admin-dialog-native--website-lead-email .admin-billing-quote-email-quill .ql-editor {
  height: auto;
  min-height: 200px;
  max-height: min(38vh, 340px);
  overflow-y: auto;
}

dialog.admin-dialog-native--website-lead-email .admin-website-lead-email-section--compose > textarea.admin-sr-only {
  display: none;
}

.admin-form-group:has(.admin-email-quill-mount) {
  position: relative;
}
.admin-email-placeholders-docs {
  margin-bottom: 20px;
}

.admin-email-placeholders-docs .admin-card-header h2 {
  margin: 0;
}

.admin-email-placeholders-docs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px 28px;
  margin-top: 12px;
}

.admin-email-placeholders-docs__subtitle {
  margin: 0 0 10px;
  font-size: 1rem;
  font-weight: 600;
  color: #2d3748;
}

.admin-email-placeholders-docs__dl {
  margin: 0;
}

.admin-email-placeholders-docs__row {
  display: grid;
  grid-template-columns: minmax(0, auto) 1fr;
  gap: 8px 12px;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid #edf2f7;
}

.admin-email-placeholders-docs__row:last-child {
  border-bottom: none;
}

.admin-email-placeholders-docs__row dt {
  margin: 0;
}

.admin-email-placeholders-docs__code {
  font-size: 0.85rem;
  white-space: nowrap;
}

.admin-email-placeholders-docs__row dd {
  margin: 0;
  font-size: 0.9rem;
  color: #4a5568;
  line-height: 1.4;
}

.admin-info-list {
  display: grid;
  gap: 14px;
}

.admin-info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid #edf2f7;
}

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

.admin-info-item span {
  color: #6d7890;
  font-size: 0.94rem;
}

.admin-info-item strong {
  color: #17233c;
  font-size: 0.96rem;
}

.admin-info-item strong.is-success {
  color: #14804a;
}

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

@media (max-width: 768px) {
  .admin-page-header {
    align-items: flex-start;
  }

  .admin-page-header h1 {
    font-size: 1.6rem;
  }

  .admin-settings-card {
    padding: 18px;
  }

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

  .admin-form-actions {
    justify-content: stretch;
  }

  .admin-btn {
    width: 100%;
  }

  :is(.admin-modal, dialog.admin-dialog-native) .admin-btn {
    width: auto;
    min-width: 0;
  }

  .admin-projects-search-row__actions .admin-btn {
    width: auto;
  }

  .admin-page-header-actions.admin-detail-header-actions .admin-btn {
    width: auto;
  }

  .admin-page-header-actions.admin-detail-header-actions {
    justify-content: flex-start;
  }
}

/* Project bekijken: duidelijkere mobiele lay-out */
@media (max-width: 768px) {
  .admin-project-view-page .admin-project-view-tabs {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .admin-project-view-page .admin-project-view-tabs .admin-maintenance-tab {
    width: 100%;
    text-align: center;
  }

  .admin-project-view-page .admin-content {
    padding: 14px 12px 22px;
  }

  .admin-project-view-page .admin-page-header--detail {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .admin-project-view-page .admin-page-header--detail > div:first-child {
    min-width: 0;
  }

  .admin-project-view-page .admin-detail-header-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .admin-project-view-page .admin-segmented {
    width: 100%;
    max-width: 100%;
    align-self: stretch;
    border-radius: 12px;
  }

  .admin-project-view-page .admin-segmented__cell {
    flex: 1 1 0;
    min-width: 0;
  }

  .admin-project-view-page .admin-segmented__btn {
    width: 100%;
    min-width: 0;
    padding: 0 6px;
    font-size: 0.72rem;
    white-space: normal;
    line-height: 1.2;
    text-align: center;
    min-height: 40px;
  }

  .admin-project-view-page .admin-detail-header-actions__delete {
    width: 100%;
  }

  .admin-project-view-page .admin-detail-header-actions__delete .admin-btn-toolbar-delete {
    width: 100%;
  }

  .admin-project-view-page .admin-detail-header-actions > a.admin-btn.admin-btn-secondary {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }

  .admin-project-view-page .admin-project-status-quick-hint {
    text-align: left;
  }

  .admin-project-view-page .admin-user-form-card {
    padding: 16px 14px;
    border-radius: 16px;
  }

  .admin-project-view-page .admin-card-header--split {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .admin-project-view-page .admin-card-header-actions--wrap {
    width: 100%;
    justify-content: stretch;
    flex-direction: column;
    align-items: stretch;
  }

  .admin-project-view-page .admin-card-header-actions--wrap .admin-btn {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }

  .admin-project-view-page .admin-project-view-main .admin-card-header--split {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .admin-project-view-page .admin-project-detail-dl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 0;
  }

  .admin-project-view-page .admin-project-detail-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 12px 12px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e8edf5;
    min-width: 0;
  }

  .admin-project-view-page .admin-project-detail-row dt {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #64748b;
  }

  .admin-project-view-page .admin-project-detail-row dd {
    font-size: 0.9rem;
    word-break: break-word;
  }

  .admin-project-view-page .admin-project-detail-notes {
    margin-top: 18px;
    padding-top: 16px;
  }

  .admin-project-view-page .admin-project-customers-tab .admin-project-customers-list {
    grid-template-columns: 1fr;
  }

  .admin-project-view-page .admin-project-qr-tab .admin-project-qr-stickers-list {
    grid-template-columns: 1fr;
  }

  .admin-project-view-page .admin-project-customers-tab .admin-project-customers-item__inner {
    padding: 14px 38px 12px 12px;
    gap: 12px;
  }

  .admin-project-view-page .admin-project-qr-tab .admin-project-qr-stickers-item__inner {
    padding: 14px 38px 12px 12px;
    gap: 12px;
  }

  .admin-project-view-page .admin-project-customers-tab .admin-project-customers-item__avatar {
    width: 42px;
    height: 42px;
    font-size: 0.78rem;
    border-radius: 11px;
  }

  .admin-project-view-page .admin-project-customers-tab .admin-project-customers-item__name {
    font-size: 1rem;
  }

  .admin-project-view-page .admin-project-customers-tab .admin-project-customers-link-row {
    padding: 6px 8px;
    font-size: 0.88rem;
  }

  .admin-project-view-page .admin-project-customers-tab .admin-project-customers-link-row__icon {
    width: 30px;
    height: 30px;
  }

  .admin-project-view-page .admin-projects-table-wrap {
    margin: 0 -4px;
    border-radius: 12px;
    overflow: hidden;
  }

  .admin-project-view-page .admin-file-explorer--project .admin-file-explorer__table-wrap {
    overflow: visible;
  }

  .admin-project-view-page .admin-project-installations-footer {
    margin-top: 12px;
  }

  .admin-project-view-page .admin-projects-empty {
    font-size: 0.92rem;
    line-height: 1.5;
  }

  .admin-project-view-page .admin-project-installations-card {
    margin-top: 12px;
  }
}

@media (max-width: 420px) {
  .admin-project-view-page .admin-project-detail-dl {
    grid-template-columns: 1fr;
  }
}

/* Sjabloonbestanden: verkenner-achtige weergave */
.admin-file-explorer__hint {
  font-size: 0.85rem;
  color: #5a6b85;
  font-weight: 400;
  max-width: 480px;
  text-align: right;
  line-height: 1.45;
}

.admin-file-explorer .admin-card-header--split {
  align-items: flex-start;
  gap: 12px;
}

@media (max-width: 768px) {
  .admin-file-explorer__hint {
    text-align: left;
    max-width: none;
  }
}

.admin-file-explorer__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 0 20px 16px;
  border-bottom: 1px solid #e8ecf4;
}

.admin-file-explorer__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 2px;
  font-size: 0.92rem;
}

.admin-file-explorer__sep {
  color: #a0aab8;
  margin: 0 2px;
  user-select: none;
}

.admin-file-explorer__crumb {
  color: #2c5282;
  text-decoration: none;
  font-weight: 500;
  padding: 4px 2px;
  border-radius: 4px;
}

.admin-file-explorer__crumb:hover {
  background: rgba(44, 82, 130, 0.08);
}

.admin-file-explorer__crumb.is-current {
  color: #1a2744;
  font-weight: 600;
}

.admin-file-explorer__drop {
  border: 2px dashed transparent;
  border-radius: 12px;
  margin: 0 12px 16px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.admin-file-explorer__drop.is-dragover {
  border-color: #3b6fb6;
  background: rgba(59, 111, 182, 0.06);
}

.admin-file-explorer__table-wrap {
  margin-bottom: 0;
}

.admin-file-explorer__drop-hint {
  margin: 0;
  padding: 12px 16px 16px;
  font-size: 0.88rem;
  color: #5a6b85;
}

.admin-file-explorer__name-link {
  color: #1a2744;
  text-decoration: none;
  font-weight: 500;
}

.admin-file-explorer__name-link:hover {
  color: #2c5282;
  text-decoration: underline;
}

.admin-file-explorer__name {
  color: #1a2744;
}

.admin-file-explorer__icon {
  margin-right: 6px;
}

.admin-file-explorer__row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.admin-file-explorer__rename-panel {
  align-self: flex-start;
}

.admin-file-explorer__rename-summary {
  cursor: pointer;
  list-style: none;
  font-size: 0.82rem;
  font-weight: 600;
  color: #334e9a;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid #d8e0f0;
  background: #fff;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.admin-file-explorer__rename-summary::-webkit-details-marker {
  display: none;
}

.admin-file-explorer__rename-summary::before {
  content: '✎';
  margin-right: 6px;
  font-size: 0.9em;
  opacity: 0.85;
}

.admin-file-explorer__rename-summary:hover {
  background: #f0f4fc;
  border-color: #b8c8e8;
  color: #1e3a6e;
}

.admin-file-explorer__rename-panel[open] > .admin-file-explorer__rename-summary {
  background: #eef2ff;
  border-color: #a5b4fc;
  color: #1e1b4b;
}

.admin-file-explorer__rename-pop {
  margin-top: 8px;
  width: min(100%, 320px);
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.admin-file-explorer__rename-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

.admin-file-explorer__rename-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748b;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.admin-file-explorer__rename-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid #d5dce8;
  border-radius: 8px;
  font-size: 0.9rem;
}

.admin-file-explorer__rename-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 2px;
}

.admin-file-explorer__row--folder td:first-child {
  background: linear-gradient(90deg, rgba(59, 111, 182, 0.05), transparent);
}

.admin-file-explorer__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 14px 20px;
  padding: 16px 20px 20px;
  border-top: 1px solid #e8ecf4;
  background: #f9fafc;
  border-radius: 0 0 12px 12px;
}

.admin-file-explorer__action-block {
  flex: 1 1 300px;
  min-width: min(100%, 260px);
  padding: 14px 16px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #e4eaf0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(15, 31, 61, 0.06);
}

.admin-file-explorer__action-block .admin-file-explorer__action-form {
  margin: 0;
}

/* Twee kaarten (map / upload), gelijk aan moderne UI-schets */
.admin-file-explorer__actions--cards > .admin-file-explorer__action-block {
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  display: flex;
  flex-direction: column;
}

.admin-file-explorer__actions--cards {
  align-items: stretch;
}

.admin-file-explorer__actions--cards > .admin-file-explorer__action-block > .admin-file-explorer__action-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Gelijke kaarthoogte: formulier vult ruimte, primaire knop onderaan */
.admin-file-explorer__actions--cards .admin-file-explorer__action-card .admin-file-explorer__action-form {
  flex: 1;
}

.admin-file-explorer__actions--cards .admin-file-explorer__action-card .admin-file-explorer__action-card-actions {
  margin-top: auto;
}

.admin-file-explorer__action-card {
  position: relative;
  margin: 0;
  padding: 12px 14px 14px;
  box-sizing: border-box;
  border-radius: 14px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 2px 12px rgba(15, 31, 61, 0.05);
  overflow: hidden;
}

.admin-file-explorer__action-card--folder {
  background: linear-gradient(165deg, #ffffff 0%, #fafaff 42%, #f4f0ff 100%);
}

.admin-file-explorer__action-card--upload {
  background: linear-gradient(165deg, #ffffff 0%, #f8fffd 42%, #ecfeff 100%);
}

/* Uploadkaart: elementen dichter op elkaar; geen groei van het samenvattingsregel (flex-basis 160px is voor horizontale file-field) */
.admin-file-explorer__action-card--upload .admin-file-explorer__action-card-head {
  margin-bottom: 8px;
}

.admin-file-explorer__action-card--upload .admin-file-explorer__action-form {
  gap: 6px;
}

.admin-file-explorer__action-card--upload .admin-file-explorer__upload-stack {
  gap: 5px;
}

.admin-file-explorer__action-card--upload .admin-file-explorer__mini-dropzone {
  padding: 7px 10px;
  gap: 2px;
}

.admin-file-explorer__action-card--upload .admin-file-explorer__mini-dropzone-ico {
  width: 28px;
  height: 28px;
  font-size: 0.9rem;
}

.admin-file-explorer__action-card--upload .admin-file-explorer__mini-dropzone-title {
  font-size: 0.82rem;
}

.admin-file-explorer__action-card--upload .admin-file-explorer__mini-dropzone-sub {
  font-size: 0.68rem;
  line-height: 1.25;
}

.admin-file-explorer__action-card-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.admin-file-explorer__action-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  font-size: 1rem;
}

.admin-file-explorer__action-card-icon--purple {
  background: linear-gradient(145deg, #ede9fe 0%, #ddd6fe 100%);
  color: #5b21b6;
  box-shadow: 0 2px 8px rgba(91, 33, 182, 0.15);
}

.admin-file-explorer__action-card-icon--teal {
  background: linear-gradient(145deg, #ccfbf1 0%, #99f6e4 100%);
  color: #0f766e;
  box-shadow: 0 2px 8px rgba(15, 118, 110, 0.14);
}

.admin-file-explorer__action-card-intro {
  min-width: 0;
}

.admin-file-explorer__action-card-title {
  margin: 0 0 2px;
  font-size: 1rem;
  font-weight: 750;
  color: #17233c;
  letter-spacing: -0.02em;
}

.admin-file-explorer__action-card-lead {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.35;
  color: #64748b;
}

.admin-file-explorer__action-card .admin-file-explorer__action-form {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.admin-file-explorer__field-inline {
  position: relative;
  display: block;
}

.admin-file-explorer__field-inline-ico {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 0.95rem;
  pointer-events: none;
  z-index: 1;
}

.admin-file-explorer__upload-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* file-field heeft elders flex: 1 1 240px voor horizontale layout; in kolom wordt dat hoogte → enorme tussenruimte */
.admin-file-explorer__upload-stack > .admin-file-explorer__file-field {
  flex: 0 0 auto;
  min-height: 0;
}

.admin-file-explorer__upload-stack .admin-file-explorer__file-summary {
  flex: 0 0 auto;
  min-height: 0;
}

.admin-file-explorer__file-field--full .admin-file-explorer__file-pick {
  width: 100%;
  justify-content: center;
}

.admin-file-explorer__mini-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 12px;
  text-align: center;
  border: 2px dashed #c7e7e2;
  border-radius: 10px;
  background: rgba(240, 253, 250, 0.65);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.admin-file-explorer__mini-dropzone:hover {
  border-color: #5eead4;
  background: rgba(204, 251, 241, 0.55);
}

.admin-file-explorer__mini-dropzone.is-dragover {
  border-color: #14b8a6;
  background: rgba(153, 246, 228, 0.45);
  box-shadow: inset 0 0 0 1px rgba(20, 184, 166, 0.25);
}

.admin-file-explorer__mini-dropzone:focus-visible {
  outline: 2px solid #14b8a6;
  outline-offset: 2px;
}

.admin-file-explorer__mini-dropzone-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ccfbf1 0%, #99f6e4 100%);
  color: #0f766e;
  font-size: 1rem;
}

.admin-file-explorer__mini-dropzone-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #134e4a;
}

.admin-file-explorer__mini-dropzone-sub {
  font-size: 0.72rem;
  color: #64748b;
  line-height: 1.3;
}

.admin-file-explorer__action-card .admin-file-explorer__file-summary {
  margin: 0;
  text-align: center;
  font-size: 0.8rem;
}

.admin-file-explorer__action-card-actions {
  display: flex;
  justify-content: center;
  margin-top: 0;
}

.admin-file-explorer__action-card-btn-primary {
  min-width: 10rem;
}

.admin-file-explorer__action-card-btn-primary--outline {
  background: linear-gradient(180deg, #f0fdfa 0%, #ecfeff 100%) !important;
  color: #0f766e !important;
  border: 1px solid #99f6e4 !important;
  box-shadow: 0 2px 10px rgba(15, 118, 110, 0.08) !important;
}

.admin-file-explorer__action-card-btn-primary--outline:hover {
  border-color: #2dd4bf !important;
  color: #0d5c56 !important;
}

.admin-file-explorer__action-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}

.admin-file-explorer__inline-label {
  font-weight: 600;
  font-size: 0.88rem;
  color: #1a2744;
  margin: 0;
}

.admin-file-explorer__text {
  min-width: 140px;
  max-width: 240px;
  padding: 8px 12px;
  border: 1px solid #d5dce8;
  border-radius: 8px;
  font-size: 0.9rem;
}

/* Twee classes: hogere specificiteit dan alleen .admin-file-explorer__text (anders wint later padding-shorthand met links 12px en overlapt tekst het icoon) */
.admin-file-explorer__text.admin-file-explorer__text--with-inline-ico {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  max-width: none;
  padding: 8px 12px 8px 36px;
}

.admin-file-explorer__file-field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  flex: 1 1 240px;
  min-width: min(100%, 200px);
}

.admin-file-explorer__file-pick {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  margin: 0;
  overflow: hidden;
  cursor: pointer;
}

.admin-file-explorer__file-pick:focus-within {
  outline: 2px solid #4f7cff;
  outline-offset: 2px;
}

.admin-file-explorer__file-input-native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 0;
}

.admin-file-explorer__file-pick-inner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}

.admin-file-explorer__file-summary {
  flex: 1 1 160px;
  min-width: 0;
  font-size: 0.86rem;
  color: #5c6b82;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Verkenner: rustiger, overzichtelijker (project + sjabloon) */
.admin-file-explorer__panel--template {
  margin: 0 0 16px;
  padding: 14px 18px;
  background: linear-gradient(180deg, #f6f9fc 0%, #eef3f9 100%);
  border: 1px solid #e2eaf3;
  border-radius: 14px;
}

.admin-file-explorer__panel-title {
  margin: 0 0 4px;
  font-size: 0.94rem;
  font-weight: 700;
  color: #142042;
}

.admin-file-explorer__panel-desc {
  margin: 0;
  font-size: 0.82rem;
  color: #62708a;
  line-height: 1.45;
  max-width: 62ch;
}

.admin-file-explorer__template-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-top: 10px;
}

.admin-file-explorer__select-wide {
  flex: 1 1 220px;
  min-width: 200px;
  max-width: 420px;
  padding: 10px 12px;
  border: 1px solid #d5dce8;
  border-radius: 10px;
  font-size: 0.9rem;
  background: #fff;
}

.admin-file-explorer__alert {
  margin: 0 0 16px;
}

.admin-file-explorer__tips {
  margin: 0 0 14px;
}

.admin-file-explorer__tips > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 600;
  color: #6b7c95;
  list-style: none;
  user-select: none;
}

.admin-file-explorer__tips > summary::-webkit-details-marker {
  display: none;
}

.admin-file-explorer__tips > summary::before {
  content: '▸';
  font-size: 0.65rem;
  opacity: 0.75;
}

.admin-file-explorer__tips[open] > summary::before {
  content: '▾';
}

.admin-file-explorer__tips-body {
  margin-top: 10px;
  padding: 10px 14px;
  font-size: 0.84rem;
  color: #5a6b85;
  line-height: 1.55;
  background: #f8fafc;
  border: 1px solid #e8ecf4;
  border-radius: 10px;
}

.admin-file-explorer__tips-body p {
  margin: 0 0 8px;
}

.admin-file-explorer__tips-body p:last-child {
  margin-bottom: 0;
}

/* Project-view: vaste toast onderaan (AJAX + server-flash) */
.admin-project-view-toast-host {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  z-index: 10060;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.4rem;
  width: min(94vw, 22rem);
}

@keyframes adminProjectViewToastIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.admin-project-view-toast {
  pointer-events: none;
  text-align: center;
  line-height: 1.3;
  padding: 0.65rem 1.1rem;
  border-radius: 9999px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.25);
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.14s ease, transform 0.14s ease;
  white-space: pre-line;
  animation: adminProjectViewToastIn 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.admin-project-view-toast.is-out {
  animation: none;
  opacity: 0;
  transform: translateY(5px);
}

.admin-project-view-toast--success {
  background: linear-gradient(165deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  border: 0;
}

.admin-project-view-toast--error {
  background: linear-gradient(165deg, #fef2f2 0%, #fee2e2 100%);
  color: #991b1b;
  border: 1px solid rgba(248, 113, 113, 0.45);
}

.admin-project-view-toast--warning {
  background: linear-gradient(165deg, #fffbeb 0%, #fef3c7 100%);
  color: #92400e;
  border: 1px solid rgba(251, 191, 36, 0.55);
}

.admin-file-explorer--project .admin-file-explorer__main-sheet,
.admin-file-explorer--template .admin-file-explorer__main-sheet {
  border: 1px solid #e4eaf2;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  margin-bottom: 2px;
  box-shadow: 0 1px 2px rgba(15, 31, 61, 0.04);
}

/* Project documenten: rename-pop mag over de tabel zweven (geen clip op voorouder) */
.admin-file-explorer--project .admin-file-explorer__main-sheet {
  overflow: visible;
}

/* Main-sheet: compacte pictogram-acties (toolbar + tabelrij), tekst via sr-only / aria-label */
.admin-file-explorer__main-sheet .admin-file-explorer__toolbar-actions .admin-btn-sm,
.admin-file-explorer__main-sheet .admin-file-explorer__row-actions .admin-btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.35rem;
  min-height: 2.35rem;
  padding: 0.35rem;
  gap: 0;
}

.admin-file-explorer__main-sheet .admin-file-explorer__rename-summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.35rem;
  min-height: 2.35rem;
  padding: 0.35rem;
  box-sizing: border-box;
  gap: 0;
}

.admin-file-explorer__main-sheet .admin-file-explorer__rename-summary::before {
  content: none;
  margin: 0;
}

.admin-file-explorer__main-sheet .admin-file-explorer__rename-summary .fa-solid {
  font-size: 0.92rem;
  line-height: 1;
}

.admin-file-explorer__main-sheet .admin-file-explorer__row-actions {
  gap: 6px 8px;
}

.admin-file-template-edit-page .admin-file-explorer__main-sheet .admin-file-explorer__btn-delete {
  min-width: 2.35rem !important;
  min-height: 2.35rem !important;
  padding: 0.35rem !important;
  font-size: 1rem !important;
  line-height: 1 !important;
}

.admin-file-explorer--project .admin-file-explorer__table-wrap {
  overflow: visible;
}

.admin-file-explorer--project .admin-file-explorer__toolbar,
.admin-file-explorer--template .admin-file-explorer__toolbar {
  padding: 12px 18px;
  border: none;
  border-bottom: 1px solid #eef2f7;
  background: #fafbfd;
}

.admin-file-explorer--project .admin-file-explorer__drop,
.admin-file-explorer--template .admin-file-explorer__drop {
  margin: 0;
  border: none;
  border-radius: 0;
}

.admin-file-explorer--project .admin-file-explorer__drop-hint,
.admin-file-explorer--template .admin-file-explorer__drop-hint {
  margin: 0;
  padding: 10px 18px 14px;
  font-size: 0.8rem;
  color: #70809a;
  background: #fafbfd;
  border-top: 1px solid #eef2f7;
}

.admin-file-explorer--project .admin-file-explorer__actions,
.admin-file-explorer--template .admin-file-explorer__actions {
  margin-top: 16px;
  padding: 18px 20px;
  background: #fbfcfe;
  border: 1px solid #e8ecf4;
  border-radius: 16px;
}

.admin-file-explorer--project .admin-file-explorer__row--folder td:first-child,
.admin-file-explorer--template .admin-file-explorer__row--folder td:first-child {
  background: rgba(59, 111, 182, 0.028);
}

/* Project documenten: td geen flex (vermijd verticale centrering t.o.v. open rename-blok) */
.admin-file-explorer--project td.admin-table-actions {
  display: table-cell;
  vertical-align: top;
  text-align: right;
}

.admin-file-explorer--project .admin-file-explorer__row-actions {
  justify-content: flex-end;
  align-items: flex-start;
}

.admin-file-explorer--project .admin-file-explorer__rename-panel {
  position: relative;
  z-index: 1;
}

.admin-file-explorer--project .admin-file-explorer__rename-panel[open] {
  z-index: 40;
}

.admin-file-explorer--project .admin-file-explorer__rename-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  margin-top: 0;
  z-index: 30;
  box-shadow: 0 10px 28px rgba(15, 31, 61, 0.12);
}

@media (max-width: 960px) {
  .admin-file-explorer--project .admin-file-explorer__rename-pop {
    position: static;
    margin-top: 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  }
}

.admin-file-explorer__btn-delete {
  background: transparent !important;
  color: #8b99ad !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: none !important;
}

.admin-file-explorer__btn-delete:hover {
  color: #b91c1c !important;
  border-color: #fecaca !important;
  background: #fff5f5 !important;
}

/* Documenttemplates-overzicht */
.admin-file-templates-page .admin-file-templates-layout {
  display: grid;
  gap: 22px;
  max-width: 1180px;
}

.admin-file-templates-list {
  border: 1px solid #e8ecf4;
  box-shadow: 0 2px 18px rgba(15, 31, 61, 0.045);
}

.admin-file-templates-list__head {
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
}

.admin-file-templates-list__count {
  font-size: 0.82rem;
  font-weight: 600;
  color: #5a6b85;
  padding: 6px 14px;
  background: #f1f5f9;
  border-radius: 999px;
}

.admin-file-templates-list__table {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #eceff5;
}

.admin-file-templates-list__empty {
  padding: 8px 0 4px;
}

.admin-file-templates-table__name {
  font-weight: 600;
  color: #1e3a5f;
  text-decoration: none;
}

.admin-file-templates-table__name:hover {
  color: #2c5282;
  text-decoration: underline;
}

.admin-file-templates-table td.admin-file-templates-table__act {
  text-align: right;
  vertical-align: middle;
  white-space: nowrap;
}

.admin-file-templates-table__actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.admin-file-templates-table__delete-form {
  display: inline;
}

/* Op smalle scherm: project-tabel wordt kaartlayout; hier geen horizontale inspringing */
@media (max-width: 960px) {
  .admin-file-templates-page .admin-file-templates-table tbody tr {
    margin-left: 0;
    margin-right: 0;
  }
}

/* Sjabloon bewerken (structuur + meta) */
.admin-file-template-edit-layout {
  display: grid;
  gap: 22px;
  max-width: 1180px;
}

.admin-file-template-edit-meta {
  border: 1px solid #e2eaf0;
  box-shadow: 0 4px 28px rgba(15, 31, 61, 0.055);
  background: linear-gradient(165deg, #f8fafc 0%, #fff 42%);
}

.admin-file-template-edit-meta__head {
  margin-bottom: 12px;
}

.admin-file-template-edit-meta__head h2 {
  margin-bottom: 6px;
}

.admin-file-template-edit-meta__lede {
  margin: 0;
  font-size: 0.88rem;
  color: #62708a;
  line-height: 1.5;
  max-width: 56ch;
}

.admin-file-template-edit-meta-form {
  display: grid;
  gap: 18px 28px;
  grid-template-columns: 1fr;
}

.admin-file-template-edit-meta-form .admin-form-group {
  margin: 0;
}

.admin-file-template-edit-meta-form input[type="text"] {
  width: 100%;
}

@media (min-width: 760px) {
  .admin-file-template-edit-meta-form {
    grid-template-columns: 1fr 1fr;
  }

  .admin-file-template-edit-meta-form__actions {
    grid-column: 1 / -1;
    margin-top: 2px;
  }
}

.admin-file-template-edit-explorer {
  border: 1px solid #e8ecf4;
  box-shadow: 0 2px 18px rgba(15, 31, 61, 0.045);
}

.admin-file-template-edit-page .admin-file-explorer__table-wrap {
  border-radius: 12px;
  overflow: visible;
  border: 1px solid #eceff5;
}

.admin-file-template-edit-page .admin-file-explorer__table {
  table-layout: fixed;
}

.admin-file-template-edit-page .admin-file-explorer__table th:nth-child(2),
.admin-file-template-edit-page .admin-file-explorer__table td:nth-child(2) {
  width: 8.5rem;
}

.admin-file-template-edit-table__col-actions {
  text-align: right;
  width: 16rem;
  white-space: nowrap;
}

.admin-file-template-edit-page .admin-file-explorer__table th:nth-child(3),
.admin-file-template-edit-page .admin-file-explorer__table td:nth-child(3) {
  width: 16rem;
}

.admin-file-template-edit-page .admin-file-explorer__table td.admin-file-template-edit-table__act {
  text-align: right;
  vertical-align: middle;
  white-space: normal;
}

.admin-file-template-edit-table__actions {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px 8px;
}

.admin-file-template-edit-page .admin-file-explorer__rename-panel {
  position: relative;
  align-self: center;
}

.admin-file-template-edit-page .admin-file-explorer__rename-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  margin-top: 0;
  z-index: 30;
  box-shadow: 0 10px 28px rgba(15, 31, 61, 0.12);
}

.admin-file-template-edit-page .admin-file-explorer__rename-panel[open] {
  z-index: 40;
}

.admin-file-template-edit-page .admin-file-explorer__rename-summary {
  padding: 4px 9px;
  font-size: 0.78rem;
  white-space: nowrap;
}

.admin-file-template-edit-page .admin-file-explorer__main-sheet .admin-file-explorer__rename-summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.35rem;
  min-height: 2.35rem;
  padding: 0.35rem;
  box-sizing: border-box;
  font-size: 0.82rem;
  white-space: normal;
}

.admin-file-template-edit-page .admin-file-explorer__btn-delete {
  padding: 4px 9px !important;
  font-size: 0.78rem !important;
  line-height: 1.35 !important;
}

.admin-file-template-edit-table__delete-form {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

@media (max-width: 960px) {
  .admin-file-template-edit-page .admin-file-explorer__table tbody tr {
    margin-left: 0;
    margin-right: 0;
  }

  .admin-file-template-edit-page .admin-file-explorer__rename-pop {
    position: static;
    margin-top: 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  }

  .admin-file-template-edit-table__actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

.admin-file-explorer--template .admin-file-explorer__actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px 20px;
  align-items: stretch;
}

/* Klanttype (particulier / professioneel) */
.admin-form-labelish {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: #1a2744;
}

.admin-customer-type-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
}

.admin-radio-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 500;
}

.admin-radio-line input[type="radio"] {
  margin: 0;
}

.admin-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Company website: realisaties-editor (admin-website-real-* = geen conflict met .admin-project-card) */
.admin-projects-editor {
  width: 100%;
}

.admin-website-real-layout {
  display: grid;
  grid-template-columns: minmax(200px, 260px) 1fr;
  gap: 20px 24px;
  align-items: start;
}

@media (max-width: 720px) {
  .admin-website-real-layout {
    grid-template-columns: 1fr;
  }
}

.admin-website-real-list-title {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}

.admin-website-real-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-website-real-tab {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #fff;
  cursor: pointer;
  font: inherit;
  color: #0f172a;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.admin-website-real-tab:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.admin-website-real-tab[aria-selected="true"] {
  border-color: #3b82f6;
  background: #eff6ff;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2);
}

.admin-website-real-tab__num {
  font-weight: 800;
  color: #64748b;
  margin-right: 4px;
}

.admin-website-real-tab[aria-selected="true"] .admin-website-real-tab__num {
  color: #1d4ed8;
}

.admin-website-real-tab__label {
  font-weight: 600;
  font-size: 0.9rem;
}

.admin-website-real-tab__sub {
  display: block;
  margin-top: 2px;
  font-size: 0.8rem;
  font-weight: 500;
  color: #64748b;
}

.admin-website-real-add {
  margin-top: 4px;
  align-self: stretch;
  text-align: center;
}

.admin-website-real-detail {
  min-width: 0;
}

.admin-website-real-card {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px 18px 18px;
  background: #fafbff;
}

.admin-website-real-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.admin-website-real-card__label {
  font-weight: 800;
  font-size: 0.92rem;
  color: #0f172a;
}

.admin-website-real-card__remove {
  flex-shrink: 0;
  padding: 6px 12px !important;
  font-size: 0.82rem !important;
}

.admin-website-real-detail label,
.admin-website-real-card label {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
  color: #334155;
  margin-top: 4px;
}

.admin-input-like {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  margin: 4px 0 10px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  font: inherit;
  font-size: 0.92rem;
  background: #fff;
}

.admin-input-like:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 1px;
  border-color: #94a3b8;
}

textarea.admin-input-like.admin-website-real-text {
  min-height: 100px;
  resize: vertical;
}

.admin-website-real-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 6px 0 10px;
}

.admin-website-real-img-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.admin-website-real-img-preview img {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
}

.admin-website-real-img-remove {
  padding: 4px 10px !important;
  font-size: 0.78rem !important;
}

.admin-website-real-upload {
  margin-top: 8px;
  font-size: 0.88rem;
  max-width: 100%;
}

.admin-website-real-upload-hint {
  margin-top: 6px !important;
}

.admin-about-trust-thumb-wrap {
  margin: 0 0 8px;
}

.admin-about-trust-thumb {
  max-width: 280px;
  height: auto;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  display: block;
}

.admin-about-trust-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.admin-website-real-empty {
  margin: 0;
  padding: 12px 0;
}

/* Company website: visueel bewerken (modal vanuit iframe) */
.admin-vis-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.admin-vis-modal[hidden] {
  display: none !important;
}

.admin-vis-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  cursor: pointer;
}

.admin-vis-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  max-height: min(90vh, 720px);
  overflow: auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 22px 50px rgba(15, 23, 42, 0.22);
  padding: 22px 22px 18px;
  border: 1px solid #e2e8f0;
}

.admin-vis-modal__title {
  margin: 0 0 14px;
  font-size: 1.1rem;
  font-weight: 800;
  color: #0f172a;
}

.admin-vis-modal__textarea {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 12px;
  padding: 10px 12px;
  font: inherit;
  font-size: 0.92rem;
  line-height: 1.45;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  resize: vertical;
  min-height: 120px;
}

.admin-vis-modal__textarea:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 1px;
  border-color: #94a3b8;
}

.admin-vis-modal__textarea--intro {
  min-height: 88px;
  resize: vertical;
}

.admin-vis-modal__color {
  width: 100%;
  max-width: 120px;
  height: 48px;
  padding: 2px;
  margin: 0 0 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  cursor: pointer;
}

.admin-vis-modal__error {
  margin: 0 0 10px;
  font-size: 0.88rem;
  color: #b91c1c;
}

.admin-vis-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 6px;
}

.admin-vis-modal__dialog--projects {
  width: min(720px, calc(100vw - 32px));
  max-height: min(92vh, 920px);
}

.admin-vis-modal__projects {
  max-height: min(58vh, 520px);
  overflow: auto;
  margin: 0 0 14px;
  padding-right: 4px;
}

.admin-vis-modal__projects:not([hidden]) ~ .admin-vis-modal__textarea {
  display: none;
}

.admin-vis-modal__dialog--services {
  width: min(720px, calc(100vw - 32px));
  max-height: min(92vh, 920px);
}

.admin-vis-modal__services {
  max-height: min(58vh, 520px);
  overflow: auto;
  margin: 0 0 14px;
  padding-right: 4px;
}

.admin-vis-modal__services:not([hidden]) ~ .admin-vis-modal__textarea {
  display: none;
}

.admin-vis-modal__intro-title:not([hidden]) ~ .admin-vis-modal__textarea {
  display: none;
}

.admin-vis-modal__intro-title {
  margin: 0 0 14px;
}

.admin-vis-modal__textinput {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 10px 12px;
  font: inherit;
  font-size: 0.92rem;
  line-height: 1.45;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
}

.admin-vis-modal__textinput:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 1px;
  border-color: #94a3b8;
}

/* Company website: diensten-editor (admin-website-svc-*) */
.admin-website-svc-layout {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

@media (max-width: 720px) {
  .admin-website-svc-layout {
    grid-template-columns: 1fr;
  }
}

.admin-website-svc-list-title {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}

.admin-website-svc-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-website-svc-tab {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  font: inherit;
  cursor: pointer;
  color: #0f172a;
}

.admin-website-svc-tab__main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.admin-website-svc-tab__icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: linear-gradient(160deg, #eff6ff 0%, #e0f2fe 100%);
  border: 1px solid rgba(59, 130, 246, 0.16);
  color: #0369a1;
}

.admin-website-svc-tab__icon svg {
  display: block;
  width: 18px;
  height: 18px;
}

.admin-website-svc-tab:hover {
  border-color: #cbd5e1;
  background: #fff;
}

.admin-website-svc-tab[aria-selected='true'] {
  border-color: #3b82f6;
  background: #eff6ff;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.25);
}

.admin-website-svc-tab__num {
  font-weight: 700;
  color: #64748b;
  font-size: 0.85rem;
}

.admin-website-svc-tab[aria-selected='true'] .admin-website-svc-tab__num {
  color: #1d4ed8;
}

.admin-website-svc-tab__label {
  font-weight: 600;
  font-size: 0.9rem;
  min-width: 0;
  flex: 1;
  line-height: 1.3;
}

.admin-website-svc-add {
  margin-top: 6px;
}

.admin-website-svc-detail {
  min-width: 0;
}

.admin-website-svc-card {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 14px 16px;
  background: #fff;
}

.admin-website-svc-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.admin-website-svc-card__label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}

.admin-website-svc-card__remove {
  font-size: 0.82rem !important;
  padding: 6px 10px !important;
}

.admin-website-svc-detail label,
.admin-website-svc-card label {
  display: block;
  margin: 10px 0 4px;
  font-size: 0.86rem;
  font-weight: 600;
  color: #334155;
}

.admin-website-svc-detail label:first-of-type,
.admin-website-svc-card label:first-of-type {
  margin-top: 0;
}

textarea.admin-input-like.admin-website-svc-text {
  min-height: 100px;
  resize: vertical;
}

.admin-website-svc-icons {
  margin-top: 12px;
}

.admin-website-svc-icon-toolbar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}

.admin-website-svc-icon-search {
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 0 10px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.admin-website-svc-icon-search:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.admin-website-svc-icon-search > svg {
  width: 16px;
  height: 16px;
  color: #94a3b8;
  flex-shrink: 0;
}
.admin-website-svc-icon-search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 8px 8px;
  font-size: 0.85rem;
  color: #0f172a;
  outline: none;
}
.admin-website-svc-icon-search__input::-webkit-search-cancel-button {
  cursor: pointer;
}

.admin-website-svc-icon-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.admin-website-svc-icon-tab {
  appearance: none;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 11px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  line-height: 1.2;
}
.admin-website-svc-icon-tab:hover {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #cbd5e1;
}
.admin-website-svc-icon-tab.is-active,
.admin-website-svc-icon-tab[aria-selected='true'] {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #fff;
}

.admin-website-svc-icon-empty {
  margin: 10px 0 0;
  color: #64748b;
  font-size: 0.82rem;
  font-style: italic;
}

.admin-website-svc-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 8px;
  margin-top: 10px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
}
.admin-website-svc-icon-grid::-webkit-scrollbar {
  width: 8px;
}
.admin-website-svc-icon-grid::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 8px;
}
.admin-website-svc-icon-grid::-webkit-scrollbar-track {
  background: transparent;
}

.admin-website-svc-icon-option {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  color: #0f172a;
  line-height: 1.25;
}

.admin-website-svc-icon-option__preview {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #e0f2fe;
  border: 1px solid #cbd5e1;
  color: #0369a1;
}

.admin-website-svc-icon-option__preview svg {
  display: block;
  width: 18px;
  height: 18px;
}

.admin-website-svc-icon-option__text {
  flex: 1;
  min-width: 0;
  text-align: left;
  font-size: 0.78rem;
  line-height: 1.25;
}

.admin-website-svc-icon-option:hover {
  border-color: #cbd5e1;
  background: #fff;
}

.admin-website-svc-icon-option[aria-pressed='true'] {
  border-color: #3b82f6;
  background: #eff6ff;
  color: #1e40af;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2);
}

.admin-website-svc-empty {
  margin: 0;
  padding: 12px 0;
}

/* Website: kleurenpakket per sectie (zichtbare balk bij de bijhorende inhoud) */
.admin-section-palette-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin: 10px 0 14px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px dashed #94a3b8;
  background: linear-gradient(165deg, #f8fafc 0%, #f1f5f9 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.admin-section-palette-bar__info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  min-width: 0;
}

.admin-section-palette-bar__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0c4a6e;
  background: #e0f2fe;
  border: 1px solid #7dd3fc;
  flex-shrink: 0;
}

.admin-section-palette-bar__title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #334155;
}

.admin-section-palette-bar__control {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-width: min(100%, 280px);
}

.admin-section-palette-bar__label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748b;
}

.admin-section-palette-bar__select {
  width: 100%;
  max-width: 320px;
  margin: 0;
}

.admin-section-style-details {
  margin: 8px 0 16px;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.admin-section-style-details__summary {
  cursor: pointer;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 0.9rem;
  color: #1e3a5f;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-section-style-details__summary::-webkit-details-marker {
  display: none;
}

.admin-section-style-details__summary::before {
  content: '▸';
  font-size: 0.75rem;
  color: #64748b;
}

.admin-section-style-details[open] .admin-section-style-details__summary::before {
  content: '▾';
}

.admin-section-style-details__body {
  padding: 0 14px 14px;
  border-top: 1px solid #eef2f7;
}

.admin-section-style-details__check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 6px;
  font-size: 0.9rem;
  font-weight: 500;
}

.admin-section-style-details__row {
  margin: 10px 0;
}

.admin-section-style-details__inline {
  margin-right: 14px;
  font-size: 0.88rem;
}

.admin-section-style-details__grid2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 8px;
}

.admin-section-style-details__hexrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.admin-qr-template-grid,
.admin-qr-size-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.admin-qr-size-grid--single {
  grid-template-columns: minmax(240px, 1fr);
}

.admin-qr-template-card,
.admin-qr-size-card {
  display: grid;
  gap: 6px;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  padding: 12px;
  background: #fff;
  cursor: pointer;
}

.admin-qr-template-card input,
.admin-qr-size-card input {
  margin: 0;
}

.admin-qr-template-card strong,
.admin-qr-size-card strong {
  color: #0f2744;
  font-size: 0.95rem;
}

.admin-qr-template-card small,
.admin-qr-size-card small {
  color: #64748b;
  font-size: 0.85rem;
}

.admin-qr-template-card.is-selected,
.admin-qr-size-card.is-selected {
  border-color: #2458a6;
  box-shadow: 0 0 0 2px rgba(36, 88, 166, 0.12);
}

.admin-qr-template-preview {
  display: block;
  width: 100%;
  height: 56px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--tpl-primary, #0f2744) 0%, var(--tpl-accent, #3b82f6) 100%);
  border: 1px solid rgba(15, 39, 68, 0.15);
}

.admin-qr-a4-preview {
  margin-top: 12px;
}

/* Liggend A4 (297×210): stickers blijven liggend en vullen het raster; meer stickers = meer rijen (2 × n) */
.admin-qr-a4-sheet {
  width: min(100%, 300px);
  aspect-ratio: 297 / 210;
  background: #fff;
  border: 1px solid #cfd8e6;
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(15, 39, 68, 0.08);
  padding: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 6px;
  align-content: stretch;
  justify-content: stretch;
  align-items: stretch;
  justify-items: stretch;
  min-height: 0;
}

.admin-qr-a4-sticker {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  border-radius: 6px;
  border: 1px dashed #9fb4d6;
  background:
    linear-gradient(90deg, #0f2744 0 56%, #fff 56% 100%);
}

/* QR-sticker pagina: shell + ontwerp + winkel */
.admin-qr-page {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 1180px;
}

.admin-qr-page__header .admin-page-lead {
  max-width: 42rem;
}

.admin-qr-wizard__rail {
  position: sticky;
  /* Hoogte van .admin-topbar (hoofd + eventuele tabrij); wordt door JS gezet als --admin-topbar-offset */
  top: var(--admin-topbar-offset, 132px);
  /* Onder topbar (z-50): rail moet er niet achter verdwijnen bij overlap */
  z-index: 45;
  margin: 0 0 0.25rem;
  padding: 0.5rem 0;
}

.admin-qr-wizard__steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0.5rem 0.75rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(15, 39, 68, 0.06);
}

.admin-qr-wizard__sep {
  width: 1.25rem;
  height: 2px;
  background: linear-gradient(90deg, transparent, #cbd5e1, transparent);
  border-radius: 1px;
  flex-shrink: 0;
}

.admin-qr-wizard__step {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.65rem 0.35rem 0.4rem;
  border-radius: 999px;
  color: #0f2744;
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 600;
  transition: background 0.15s ease, color 0.15s ease;
}

.admin-qr-wizard__step:hover {
  background: #f1f5f9;
  color: #0b1f3a;
}

.admin-qr-wizard__step--accent .admin-qr-wizard__num {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
}

.admin-qr-wizard__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  background: #e2e8f0;
  color: #334155;
}

.admin-qr-wizard__txt {
  white-space: nowrap;
}

.admin-qr-design-suite {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(15, 39, 68, 0.07);
  padding: 1.25rem 1.35rem 1.5rem;
}

.admin-qr-design-suite__head {
  margin-bottom: 1.15rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #f1f5f9;
}

.admin-qr-design-suite__badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #3b82f6;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  margin-bottom: 0.45rem;
}

.admin-qr-design-suite__title {
  margin: 0 0 0.35rem;
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
}

/* Wizard: één stap zichtbaar (JS zet hidden + is-active) */
.admin-qr-design-wizard__side {
  min-width: 0;
}

.admin-qr-wizard-panel {
  animation: adminQrFadeIn 0.2s ease;
}

@keyframes adminQrFadeIn {
  from {
    opacity: 0.85;
  }
  to {
    opacity: 1;
  }
}

.admin-qr-wizard-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.85rem;
  padding: 0.25rem 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.admin-qr-wizard-back:hover {
  color: #0f172a;
}

.admin-qr-design-suite__lead {
  margin: 0;
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.5;
  max-width: 52rem;
}

/* Form om ontwerp + drukformaat secties; géén extra chrome */
.admin-qr-sticker-composer-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  max-width: none;
}

.admin-qr-drukformaat-suite {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(15, 39, 68, 0.07);
  padding: 1.25rem 1.35rem 1.5rem;
}

.admin-qr-drukformaat-suite__head {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #f1f5f9;
}

.admin-qr-drukformaat-suite__title {
  margin: 0 0 0.35rem;
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.admin-qr-drukformaat-suite__lead {
  margin: 0;
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.5;
  max-width: 52rem;
}

.admin-qr-drukformaat-suite__body {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

/* Opties links, A4-voorbeeld rechts (smal: onder elkaar) */
.admin-qr-drukformaat-suite__columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 22rem);
  gap: 1.25rem 1.5rem;
  align-items: start;
}

.admin-qr-drukformaat-suite__size-grid {
  margin-top: 0;
  grid-template-columns: 1fr;
}

.admin-qr-drukformaat-suite__a4-preview {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.admin-qr-drukformaat-suite__a4-preview .admin-qr-a4-sheet {
  width: min(100%, 320px);
}

@media (max-width: 720px) {
  .admin-qr-drukformaat-suite__columns {
    grid-template-columns: 1fr;
  }

  .admin-qr-drukformaat-suite__size-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

/* --admin-topbar-offset en --admin-qr-sticky-offset worden op document.documentElement gezet (qr-sticker-selector script): topbar + wizardrail + marge */

.admin-qr-selector-layout {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(300px, 1.05fr);
  gap: 1.5rem 1.75rem;
  align-items: start;
  margin-top: 0;
}

.admin-qr-design-suite__form.admin-qr-selector-layout {
  margin-top: 0;
}

@media (max-width: 1024px) {
  .admin-qr-selector-layout {
    grid-template-columns: 1fr;
  }
}

/* Optioneel: volledige pagina onder elkaar (klasse op het formulier) */
.admin-qr-selector-layout--stack {
  grid-template-columns: 1fr;
  gap: 2rem;
}

/* Desktop: sticker links, instellingen rechts — voorbeeld blijft zichtbaar bij scroll */
@media (min-width: 1025px) {
  .admin-qr-design-suite__form.admin-qr-selector-layout:not(.admin-qr-selector-layout--stack) .admin-qr-selector-preview-col {
    position: sticky;
    top: var(--admin-qr-sticky-offset, 200px);
    align-self: start;
    z-index: 1;
  }
}

.admin-qr-page #qr-step-ontwerp,
.admin-qr-page #qr-step-drukformaat,
.admin-qr-page #qr-drukformaat-section,
.admin-qr-page #qr-shop {
  scroll-margin-top: var(--admin-qr-sticky-offset, 200px);
}

.admin-qr-design-suite__controls .admin-qr-wizard-panel + .admin-qr-wizard-panel {
  margin-top: 0.25rem;
  padding-top: 1.35rem;
  border-top: 1px solid #e2e8f0;
}

.admin-qr-next-step {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: stretch;
}

.admin-qr-next-step__btn {
  width: 100%;
  justify-content: center;
  font-weight: 700;
}

.admin-qr-next-step__hint {
  margin: 0;
  font-size: 0.78rem;
  color: #64748b;
  text-align: center;
  line-height: 1.35;
}

.admin-qr-brand-scale-panel .admin-qr-brand-scale-row {
  display: grid;
  grid-template-columns: 5.5rem 1fr 3.25rem;
  align-items: center;
  gap: 0.5rem 0.65rem;
  margin-bottom: 0.65rem;
}

.admin-qr-brand-scale-panel .admin-qr-brand-scale-row:last-child {
  margin-bottom: 0;
}

/* Anders wint .admin-qr-brand-scale-row { display:grid } over het native [hidden]-attribuut */
.admin-qr-brand-scale-panel .admin-qr-brand-scale-row[hidden] {
  display: none !important;
}

.admin-qr-brand-scale-panel[hidden] {
  display: none !important;
}

.admin-qr-brand-scale-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #334155;
}

.admin-qr-brand-scale-range {
  width: 100%;
  min-width: 0;
  accent-color: #2563eb;
}

.admin-qr-brand-scale-val {
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #0f172a;
  text-align: right;
}

/* Checkbox focus in sticker visibility tiles — voorkomt dikke systeem-focusrand */
.admin-qr-size-grid.admin-qr-size-grid--single .admin-qr-size-card input[type="checkbox"] {
  accent-color: #2563eb;
}

.admin-qr-size-grid.admin-qr-size-grid--single .admin-qr-size-card input[type="checkbox"]:focus {
  outline: none;
}

.admin-qr-size-grid.admin-qr-size-grid--single .admin-qr-size-card input[type="checkbox"]:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 3px;
  border-radius: 3px;
}

.admin-qr-mock__logo-slot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

/* display:contents brak soms samen met [hidden]; expliciet verbergen */
.admin-qr-mock__logo-slot[hidden] {
  display: none !important;
}

.admin-qr-selector-preview-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  padding: 1.15rem 1rem;
  border-radius: 14px;
  background: linear-gradient(165deg, #f8fafc 0%, #eef2f9 100%);
  border: 1px solid #e2e8f0;
}

.admin-qr-design-suite__controls {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.admin-qr-design-suite__controls:has(.admin-qr-step-ontwerp-compact) {
  gap: 0.45rem;
}

.admin-qr-panel {
  padding: 0.85rem 1rem;
  background: #f8fafc;
  border: 1px solid #e8edf3;
  border-radius: 12px;
}

.admin-qr-panel__title {
  margin: 0 0 0.2rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #0f172a;
}

.admin-qr-panel__hint {
  margin: 0 0 0.65rem;
  font-size: 0.8rem;
  color: #64748b;
  line-height: 1.4;
}

.admin-qr-brand-choice-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}

.admin-qr-brand-choice-hint {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  color: #64748b;
  line-height: 1.35;
}

.admin-qr-brand-choice-grid .admin-qr-size-card input[type="radio"] {
  accent-color: #2563eb;
}

.admin-qr-brand-choice-grid .admin-qr-size-card input[type="radio"]:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Stap 1 Ontwerp: compactere blokken (template, zichtbaarheid, schalen) */
.admin-qr-step-ontwerp-compact > h3.admin-qr-panel__title {
  font-size: 1.05rem;
  margin: 0 0 0.25rem;
}

.admin-qr-step-ontwerp-compact > .admin-qr-panel__hint {
  margin: 0 0 0.45rem;
  font-size: 0.78rem;
  line-height: 1.35;
}

.admin-qr-step-ontwerp-compact .admin-qr-panel--embed {
  margin-top: 0.6rem;
  padding: 0;
  background: transparent;
  border: none;
}

.admin-qr-step-ontwerp-compact .admin-qr-panel__title--sub {
  font-size: 0.8125rem;
  margin: 0 0 0.35rem;
  font-weight: 700;
}

.admin-qr-step-ontwerp-compact .admin-qr-brand-scale-hint {
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  color: #64748b;
  line-height: 1.35;
}

.admin-qr-step-ontwerp-compact .admin-qr-template-grid {
  gap: 8px;
  margin-top: 6px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-qr-step-ontwerp-compact .admin-qr-template-card {
  gap: 4px;
  padding: 8px;
  border-radius: 10px;
}

.admin-qr-step-ontwerp-compact .admin-qr-template-preview {
  height: 40px;
  border-radius: 8px;
}

.admin-qr-step-ontwerp-compact .admin-qr-template-card strong {
  font-size: 0.8125rem;
}

.admin-qr-step-ontwerp-compact .admin-qr-template-card small {
  font-size: 0.72rem;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.admin-qr-step-ontwerp-compact .admin-qr-size-grid.admin-qr-size-grid--single {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}

@media (max-width: 360px) {
  .admin-qr-step-ontwerp-compact .admin-qr-size-grid.admin-qr-size-grid--single {
    grid-template-columns: 1fr;
  }
}

.admin-qr-step-ontwerp-compact .admin-qr-size-grid--single .admin-qr-size-card {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 6px;
  padding: 0.45rem 0.55rem;
}

.admin-qr-step-ontwerp-compact .admin-qr-size-grid--single .admin-qr-size-card input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 0.12rem;
}

.admin-qr-step-ontwerp-compact .admin-qr-size-grid--single .admin-qr-size-card strong {
  font-size: 0.8125rem;
}

.admin-qr-step-ontwerp-compact .admin-qr-size-grid--single .admin-qr-size-card small {
  font-size: 0.7rem;
  line-height: 1.25;
}

.admin-qr-step-ontwerp-compact .admin-qr-brand-choice-grid .admin-qr-size-card {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 6px;
  padding: 0.45rem 0.55rem;
}

.admin-qr-step-ontwerp-compact .admin-qr-brand-choice-grid .admin-qr-size-card input[type="radio"] {
  flex-shrink: 0;
  margin-top: 0.12rem;
}

.admin-qr-step-ontwerp-compact .admin-qr-brand-choice-grid .admin-qr-size-card strong {
  font-size: 0.8125rem;
}

.admin-qr-step-ontwerp-compact .admin-qr-brand-choice-grid .admin-qr-size-card small {
  font-size: 0.7rem;
  line-height: 1.25;
}

.admin-qr-step-ontwerp-compact .admin-qr-brand-scale-panel .admin-qr-brand-scale-row {
  margin-bottom: 0.4rem;
  gap: 0.35rem 0.5rem;
}

.admin-qr-step-ontwerp-compact .admin-qr-brand-scale-panel .admin-qr-brand-scale-label {
  font-size: 0.78rem;
}

.admin-qr-step-ontwerp-compact .admin-qr-brand-scale-panel .admin-qr-brand-scale-val {
  font-size: 0.78rem;
}

.admin-qr-step-ontwerp-compact .admin-qr-design-suite__save {
  margin-top: 0.15rem;
  padding-top: 0.55rem;
}

.admin-qr-step-ontwerp-compact .admin-qr-next-step {
  margin-top: 0.55rem;
  padding-top: 0.65rem;
}

.admin-qr-panel__a4 {
  margin-top: 0.75rem;
}

.admin-qr-panel__a4hint {
  margin-top: 0.5rem;
  margin-bottom: 0;
}

.admin-qr-design-suite__save {
  margin-top: 0.25rem;
  padding-top: 0.85rem;
  border-top: 1px dashed #e2e8f0;
}

.admin-qr-design-suite__save .admin-btn-primary {
  width: 100%;
  justify-content: center;
  padding: 0.65rem 1rem;
  font-weight: 700;
}

.admin-qr-selector-actions {
  margin-top: 0;
}

.admin-qr-mock {
  --mock-w: min(100%, 26rem);
  --mock-ratio: 50 / 30;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.admin-qr-mock[data-size="a4_4"] {
  --mock-w: min(100%, 28rem);
  --mock-ratio: 55 / 34;
}

.admin-qr-mock[data-size="a4_6"] {
  --mock-w: min(100%, 25rem);
  --mock-ratio: 52 / 32;
}

.admin-qr-mock[data-size="a4_6"] .admin-qr-mock__plate-inner {
  grid-template-columns: 42% 58%;
}

.admin-qr-mock[data-size="a4_6"] .admin-qr-mock__split-left {
  gap: 0.4rem;
  padding: 0.58rem 0.56rem 0.44rem;
}

.admin-qr-mock[data-size="a4_6"] .admin-qr-mock__qr-wrap {
  padding: 9px;
}

.admin-qr-mock[data-size="a4_6"] .admin-qr-mock__instr-block {
  padding: 0.12rem 0.16rem;
}

.admin-qr-mock[data-size="a4_6"] .admin-qr-mock__instr-line {
  font-size: clamp(0.46rem, 1.05vw, 0.62rem);
  line-height: 1.18;
}

.admin-qr-mock[data-size="a4_6"] .admin-qr-mock__split-right {
  gap: 0.42rem;
  padding: 0.46rem 0.48rem 0.4rem 0.72rem;
}

.admin-qr-mock[data-size="a4_6"] .admin-qr-mock__brand-name {
  font-size: calc(clamp(0.76rem, 1.62vw, 1rem) * var(--brand-name-scale, 1));
}

.admin-qr-mock[data-size="a4_6"] .admin-qr-mock__contact-lines {
  font-size: clamp(10px, 1.18vw, 0.82rem);
  gap: 0.14rem;
}

.admin-qr-mock[data-size="a4_6"] .admin-qr-mock__maint-pill {
  min-height: 2.65rem;
  padding: 0.62rem 0.72rem 0.64rem;
  gap: 0.92rem;
}

.admin-qr-mock[data-size="a4_6"] .admin-qr-mock__maint-label {
  font-size: clamp(0.68rem, 1.35vw, 0.9rem);
}

.admin-qr-mock[data-size="a4_6"] .admin-qr-mock__maint-date {
  font-size: clamp(0.8rem, 1.64vw, 1.1rem);
}

.admin-qr-mock[data-size="a4_8"] {
  --mock-w: min(100%, 22.5rem);
  --mock-ratio: 50 / 30;
}

.admin-qr-mock[data-size="a4_10"] {
  --mock-w: min(100%, 20.5rem);
  --mock-ratio: 48 / 29;
}

/* Kleinere formaten: inhoud compacter houden zodat alles netjes past */
.admin-qr-mock[data-size="a4_8"] .admin-qr-mock__split-left {
  gap: 0.3rem;
  padding: 0.48rem 0.46rem 0.36rem;
}

.admin-qr-mock[data-size="a4_8"] .admin-qr-mock__qr-wrap {
  padding: 7px;
}

.admin-qr-mock[data-size="a4_8"] .admin-qr-mock__instr-line {
  font-size: clamp(0.42rem, 0.96vw, 0.56rem);
  line-height: 1.14;
}

.admin-qr-mock[data-size="a4_8"] .admin-qr-mock__split-right {
  padding: 0.38rem 0.38rem 0.34rem 0.62rem;
  gap: 0.34rem;
}

.admin-qr-mock[data-size="a4_8"] .admin-qr-mock__brand-name {
  font-size: calc(clamp(0.64rem, 1.35vw, 0.86rem) * var(--brand-name-scale, 1));
}

.admin-qr-mock[data-size="a4_8"] .admin-qr-mock__contact-lines {
  font-size: clamp(10px, 1.08vw, 0.74rem);
  gap: 0.12rem;
}

.admin-qr-mock[data-size="a4_8"] .admin-qr-mock__maint-pill {
  min-height: 2.55rem;
  padding: 0.52rem 0.48rem 0.54rem;
  gap: 0.58rem;
}

.admin-qr-mock[data-size="a4_8"] .admin-qr-mock__maint-label {
  font-size: clamp(0.58rem, 1.15vw, 0.78rem);
}

.admin-qr-mock[data-size="a4_8"] .admin-qr-mock__maint-date {
  font-size: clamp(0.72rem, 1.38vw, 0.98rem);
}

.admin-qr-mock[data-size="a4_10"] .admin-qr-mock__split-left {
  gap: 0.22rem;
  padding: 0.4rem 0.36rem 0.28rem;
}

.admin-qr-mock[data-size="a4_10"] .admin-qr-mock__qr-wrap {
  padding: 6px;
  border-radius: 10px;
}

.admin-qr-mock[data-size="a4_10"] .admin-qr-mock__instr-block {
  padding: 0.08rem 0.12rem;
}

.admin-qr-mock[data-size="a4_10"] .admin-qr-mock__instr-line {
  font-size: clamp(0.38rem, 0.85vw, 0.5rem);
  line-height: 1.12;
}

.admin-qr-mock[data-size="a4_10"] .admin-qr-mock__split-right {
  padding: 0.3rem 0.28rem 0.26rem 0.52rem;
  gap: 0.22rem;
}

.admin-qr-mock[data-size="a4_10"] .admin-qr-mock__brand-name {
  font-size: calc(clamp(0.5rem, 1.05vw, 0.7rem) * var(--brand-name-scale, 1));
}

.admin-qr-mock[data-size="a4_10"] .admin-qr-mock__contact-lines {
  font-size: clamp(10px, 0.92vw, 0.66rem);
  gap: 0.08rem;
}

.admin-qr-mock[data-size="a4_10"] .admin-qr-mock__maint-pill {
  min-height: 2.45rem;
  padding: 0.44rem 0.34rem 0.46rem;
  gap: 0.36rem;
}

.admin-qr-mock[data-size="a4_10"] .admin-qr-mock__maint-label {
  font-size: clamp(0.5rem, 1vw, 0.68rem);
}

.admin-qr-mock[data-size="a4_10"] .admin-qr-mock__maint-date {
  font-size: clamp(0.62rem, 1.12vw, 0.82rem);
}

/* Referentie-layout: buitenkant = vast formaat; binnen schalen we bij grote logo/naam zodat niets wordt afgesneden */
.admin-qr-mock__plate {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  width: var(--mock-w);
  aspect-ratio: var(--mock-ratio);
  border-radius: 12px;
  padding: 0;
  box-shadow:
    0 22px 44px rgba(15, 39, 68, 0.16),
    0 0 0 1px rgba(15, 39, 68, 0.08);
}

.admin-qr-mock__plate-fit {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  box-sizing: border-box;
}

.admin-qr-mock__plate-inner {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 42% 58%;
  /* auto i.p.v. 1fr: geen “lege” stretch in de bovenste rij */
  grid-template-rows: auto auto auto auto;
  align-items: stretch;
  transform-origin: top center;
}

.admin-qr-mock__headline {
  grid-column: 1 / -1;
  grid-row: 1;
  margin: 0;
  box-sizing: border-box;
  width: 100%;
  padding: max(0.55rem, 2.8%) max(0.3rem, 1.25%);
  text-align: center;
  font-weight: 800;
  font-size: clamp(0.82rem, 4.6vmin, 1.65rem);
  letter-spacing: 0.015em;
  line-height: 1.1;
  background: linear-gradient(180deg, #102348 0%, #1c3766 100%);
  color: #f8fafc;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset;
}

.admin-qr-mock__split-left {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  min-height: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.5rem;
  padding: 0.78rem 0.78rem 0.58rem;
  background: linear-gradient(165deg, var(--mock-primary, #0f2744) 0%, #173f8d 100%);
  color: #fff;
  position: relative;
}

.admin-qr-mock__split-left::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 18%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 40%),
    radial-gradient(circle at 88% 78%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 36%);
  pointer-events: none;
}

.admin-qr-mock__qr-wrap {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  padding: 12px;
  background: #fff;
  border: 1px solid rgba(15, 39, 68, 0.12);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
  position: relative;
  z-index: 1;
}

.admin-qr-mock__qr-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 8px;
  vertical-align: top;
}

.admin-qr-mock__instr {
  flex-shrink: 0;
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
}

.admin-qr-mock__instr-block {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.16rem 0.22rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(2px);
}

.admin-qr-mock__instr-title {
  font-weight: 800;
  font-size: clamp(0.52rem, 1.25vw, 0.74rem);
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-transform: uppercase;
}

.admin-qr-mock__instr-line {
  font-size: clamp(0.52rem, 1.22vw, 0.74rem);
  font-weight: 500;
  line-height: 1.22;
  opacity: 1;
}

.admin-qr-mock__instr-line strong {
  font-weight: 800;
}

.admin-qr-mock__maint-pill {
  grid-column: 1 / 3;
  grid-row: 3;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1.35rem;
  width: 100%;
  box-sizing: border-box;
  /* Genoeg hoogte om met pen te schrijven (ook op kleine drukformaten in de mock) */
  min-height: 2.85rem;
  padding: 0.78rem 1.1rem 0.82rem;
  border-radius: 0;
  background: linear-gradient(180deg, #ffffff 0%, #f5f7fb 100%);
  color: #1f2937;
  border-top: 1px solid #dbe2ee;
  border-bottom: 1px solid #dbe2ee;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.admin-qr-mock__maint-label {
  font-size: clamp(0.82rem, 1.72vw, 1.08rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: left;
}

.admin-qr-mock__maint-date {
  font-size: clamp(0.94rem, 2vw, 1.32rem);
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  color: inherit;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  font-variant-numeric: tabular-nums;
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.32rem;
  min-height: 1.35rem;
}

.admin-qr-mock__maint-part {
  display: inline-block;
  box-sizing: border-box;
  vertical-align: bottom;
  width: clamp(1.05rem, 1.65vw, 1.4rem);
  min-height: 1.08rem;
  border-bottom: 2px solid currentColor;
  transform: translateY(2px);
}

.admin-qr-mock__maint-part--year {
  width: clamp(1.75rem, 2.75vw, 2.35rem);
}

.admin-qr-mock__maint-sep {
  display: inline-block;
  line-height: 1;
  transform: translateY(-2px);
  font-weight: 700;
}

.admin-qr-mock__split-right {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  /* stretch:zelfde rij-hoogte als linkerkolom; anders toont de plaat-achtergrond als “grijs balkje” */
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0.55rem;
  /* Extra inset aan de kant van de QR-kolom; rechts iets compacter */
  padding: 0.6rem 0.65rem 0.55rem 0.95rem;
  background-color: #fff;
  background-image: linear-gradient(180deg, #ffffff 0%, #fafdff 100%);
  color: var(--mock-primary, #0f2744);
  /* Voorkom dat breed logo / lange tekst scrollWidth opblaast → fitPlate zoomt dan de hele plaat (QR) uit */
  overflow: hidden;
}

.admin-qr-mock__right-inner {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.32rem;
}

.admin-qr-mock__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  text-align: left;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.admin-qr-mock__brand-name {
  font-weight: 800;
  font-size: calc(clamp(0.9rem, 2vw, 1.18rem) * var(--brand-name-scale, 1));
  line-height: 1.15;
  word-break: break-word;
  overflow-wrap: anywhere;
  max-width: 100%;
  letter-spacing: -0.01em;
}

.admin-qr-mock__split-right .admin-qr-mock__logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: min(100%, calc(86px * var(--brand-logo-scale, 1)));
  max-width: 100%;
  aspect-ratio: 1;
  height: auto;
  min-width: 0;
  flex-shrink: 1;
  overflow: hidden;
}

.admin-qr-mock__split-right .admin-qr-mock__logo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.admin-qr-mock__split-right .admin-qr-mock__logo-ph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: min(100%, calc(46px * var(--brand-logo-scale, 1)));
  max-width: 100%;
  aspect-ratio: 1;
  height: auto;
  min-width: 0;
  border-radius: 10px;
  font-weight: 800;
  font-size: calc(clamp(0.85rem, 2vw, 1.05rem) * var(--brand-logo-scale, 1));
  background: rgba(15, 39, 68, 0.08);
  color: var(--mock-primary, #0f2744);
}

/* E-mail en telefoon: één regel (ellipsis); adres mag wrappen. Balans leesbaarheid vs smalle kolom */
.admin-qr-mock__contact-lines {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  width: 100%;
  min-width: 0;
  font-size: clamp(11px, 1.32vw, 0.92rem);
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* E-mail, telefoon en adres: zelfde nadruk (kleur volgt template via split-right) */
.admin-qr-mock__contact-line--email .admin-qr-mock__contact-txt,
.admin-qr-mock__contact-line--phone .admin-qr-mock__contact-txt,
.admin-qr-mock__contact-line--address .admin-qr-mock__contact-txt {
  font-size: 1.42em;
  font-weight: 800;
  line-height: 1.35;
  color: inherit;
  letter-spacing: 0.02em;
}

.admin-qr-mock__contact-line i {
  width: 0.95rem;
  margin-top: 0.08rem;
  flex: 0 0 0.95rem;
  color: currentColor;
  opacity: 0.9;
}

.admin-qr-mock__contact-line--email i,
.admin-qr-mock__contact-line--phone i,
.admin-qr-mock__contact-line--address i {
  opacity: 1;
  color: currentColor;
  font-size: 1.14em;
  margin-top: 0.04rem;
}

.admin-qr-mock__contact-line {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
  min-width: 0;
}

.admin-qr-mock__contact-line--single .admin-qr-mock__contact-txt {
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-qr-mock__contact-line--address .admin-qr-mock__contact-txt {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.admin-qr-mock__contact-line--address {
  text-align: left;
  align-items: flex-start;
}

.admin-qr-mock__footer-line {
  grid-column: 1 / 3;
  grid-row: 4;
  background: rgba(7, 28, 58, 0.95);
  color: rgba(255, 255, 255, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  text-align: center;
  padding: 0.24rem 0.5rem 0.28rem;
  font-size: clamp(0.44rem, 0.9vw, 0.6rem);
  line-height: 1.2;
  letter-spacing: 0.02em;
}

@media (max-width: 640px) {
  .admin-qr-mock {
    --mock-w: min(100%, 22rem);
  }

  .admin-qr-mock__plate-inner {
    grid-template-columns: 42% 58%;
  }

  .admin-qr-mock__split-left {
    gap: 0.45rem;
    padding: 0.52rem 0.54rem 0.46rem;
  }

  .admin-qr-mock__instr {
    gap: 0.24rem;
  }
}

/* Template: linkerpaneel-kleur (referentie-sticker) */
.admin-qr-mock[data-template="classic_blue"] .admin-qr-mock__split-left {
  background: var(--mock-primary, #0f2744);
}

.admin-qr-mock[data-template="classic_blue"] .admin-qr-mock__footer-line {
  background: #0a2e66;
}

.admin-qr-mock[data-template="classic_blue"] .admin-qr-mock__headline {
  background: linear-gradient(180deg, var(--mock-primary, #0f2744) 0%, #1e4978 100%);
}

.admin-qr-mock[data-template="minimal_light"] .admin-qr-mock__split-left {
  background: #475569;
}

.admin-qr-mock[data-template="minimal_light"] .admin-qr-mock__split-right {
  color: #334155;
}

.admin-qr-mock[data-template="minimal_light"] .admin-qr-mock__footer-line {
  background: #334155;
}

.admin-qr-mock[data-template="minimal_light"] .admin-qr-mock__headline {
  background: linear-gradient(180deg, #334155 0%, #475569 100%);
}

.admin-qr-mock[data-template="bold_dark"] .admin-qr-mock__split-left {
  background: linear-gradient(145deg, var(--mock-primary, #0b1220) 0%, #1e293b 100%);
}

.admin-qr-mock[data-template="bold_dark"] .admin-qr-mock__footer-line {
  background: #0b1220;
}

.admin-qr-mock[data-template="bold_dark"] .admin-qr-mock__headline {
  background: linear-gradient(180deg, #38bdf8 0%, #2563eb 100%);
  color: #0f172a;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset;
}

.admin-qr-mock[data-template="fresh_green"] .admin-qr-mock__split-left {
  background: linear-gradient(180deg, var(--mock-primary, #14532d) 0%, var(--mock-accent, #22c55e) 100%);
}

.admin-qr-mock[data-template="fresh_green"] .admin-qr-mock__split-right {
  color: var(--mock-primary, #14532d);
}

.admin-qr-mock[data-template="fresh_green"] .admin-qr-mock__footer-line {
  background: #14532d;
}

.admin-qr-mock[data-template="fresh_green"] .admin-qr-mock__headline {
  background: linear-gradient(180deg, var(--mock-primary, #14532d) 0%, #166534 100%);
  color: #fff;
}

.admin-qr-mock[data-template="bold_dark"] .admin-qr-mock__maint-pill {
  color: #0b1220;
}

.admin-qr-mock__caption {
  margin: 0;
  font-size: 0.8rem;
  color: #64748b;
  text-align: center;
}

/* QR-sticker winkel-suite (naast elkaar op breed scherm) */
.admin-qr-shop-suite {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(15, 39, 68, 0.07);
  padding: 1.25rem 1.35rem 1.5rem;
}

.admin-qr-shop-suite__head {
  margin-bottom: 1.1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #f1f5f9;
}

.admin-qr-shop-suite__badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #059669;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  margin-bottom: 0.45rem;
}

.admin-qr-shop-suite__title {
  margin: 0 0 0.35rem;
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.admin-qr-shop-suite__lead {
  margin: 0;
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.5;
  max-width: 52rem;
}

.admin-qr-shop-suite__lead-muted {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  color: #94a3b8;
  font-weight: 500;
}

.admin-qr-cart-toast {
  margin-bottom: 0.75rem;
  padding: 0.55rem 0.85rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #14532d;
  background: #ecfdf5;
  border: 1px solid #6ee7b7;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(20, 83, 45, 0.08);
}

.admin-qr-cart-toast[hidden] {
  display: none !important;
}

.admin-qr-shop-suite__grid {
  display: grid;
  grid-template-columns: minmax(240px, 0.95fr) minmax(280px, 1.15fr);
  grid-template-rows: auto auto;
  gap: 1rem 1.25rem;
  align-items: stretch;
}

.admin-qr-shop-tile {
  padding: 1rem 1.05rem;
  background: #f8fafc;
  border: 1px solid #e8edf3;
  border-radius: 12px;
  min-width: 0;
}

.admin-qr-shop-tile--cart {
  background: #fff;
  border-color: #e2e8f0;
}

.admin-qr-shop-tile--pay {
  grid-column: 1 / -1;
  padding: 0;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #dbeafe;
}

.admin-qr-shop-tile__title {
  margin: 0 0 0.35rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #0f172a;
}

.admin-qr-shop-tile__title--pay {
  margin-bottom: 0.25rem;
}

.admin-qr-shop-tile__hint {
  margin: 0 0 0.85rem;
  font-size: 0.8rem;
  color: #64748b;
  line-height: 1.45;
}

.admin-qr-shop-tile__empty {
  margin: 0;
  font-size: 0.875rem;
  color: #94a3b8;
  font-style: italic;
}

.admin-qr-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}

.admin-qr-field:last-of-type {
  margin-bottom: 0.85rem;
}

.admin-qr-field__label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}

.admin-qr-shop-add .admin-qr-field + .admin-qr-field {
  margin-top: 0.65rem;
}

.admin-qr-input-shell {
  display: block;
  position: relative;
}

.admin-qr-input-shell--select::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  margin-top: -2px;
  width: 7px;
  height: 7px;
  border-right: 2px solid #64748b;
  border-bottom: 2px solid #64748b;
  transform: rotate(45deg);
  pointer-events: none;
}

.admin-qr-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.65rem 0.9rem;
  font-size: 0.9375rem;
  font-family: inherit;
  line-height: 1.35;
  color: #0f172a;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  box-shadow: inset 0 1px 2px rgba(15, 39, 68, 0.05);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-qr-input:hover {
  border-color: #94a3b8;
}

.admin-qr-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22);
}

.admin-qr-input--select {
  appearance: none;
  padding-right: 2.5rem;
  cursor: pointer;
  background-color: #fff;
}

.admin-qr-input--number {
  font-variant-numeric: tabular-nums;
}

.admin-qr-input--number::-webkit-outer-spin-button,
.admin-qr-input--number::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.admin-qr-qty-hint {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #64748b;
  line-height: 1.4;
}

.admin-qr-shop-add {
  display: flex;
  flex-direction: column;
}

.admin-qr-shop-add__btn {
  width: 100%;
  justify-content: center;
  margin-top: 0.15rem;
}

.admin-qr-shop-pay__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
}

.admin-qr-shop-pay__txt {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  color: #475569;
  max-width: 36rem;
}

.admin-qr-shop-pay__alert {
  margin-top: 0.65rem;
}

.admin-qr-shop-pay__alert p {
  margin: 0;
  font-size: 0.85rem;
}

.admin-qr-shop-pay__form {
  flex-shrink: 0;
}

.admin-qr-shop-pay__cta {
  padding-left: 1.35rem;
  padding-right: 1.35rem;
  font-weight: 700;
  white-space: nowrap;
}

.admin-qr-shop-table__act {
  width: 2.5rem;
  text-align: center;
  vertical-align: middle;
}

.admin-qr-shop-inline-form {
  display: inline;
}

.admin-qr-shop-inline-form .admin-btn-sm {
  min-width: 2rem;
  padding: 0.25rem 0.45rem;
  font-size: 1.1rem;
  line-height: 1;
}

.admin-qr-shop-migrate {
  border-radius: 12px;
}

.admin-qr-shop-migrate__title {
  margin-top: 0;
}

.admin-qr-after-note {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: #475569;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  line-height: 1.5;
}

.admin-qr-after-note a {
  color: #2563eb;
  font-weight: 600;
}

.admin-qr-shop-table-wrap {
  overflow-x: auto;
  margin: 0 -0.15rem;
}

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

.admin-qr-shop-table th,
.admin-qr-shop-table td {
  padding: 0.45rem 0.5rem;
  text-align: left;
  border-bottom: 1px solid #f1f5f9;
}

.admin-qr-shop-table thead th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  font-weight: 700;
}

.admin-qr-shop-table tfoot th {
  font-weight: 700;
  border-bottom: none;
  padding-top: 0.65rem;
  font-size: 0.9rem;
}

@media (max-width: 900px) {
  .admin-qr-shop-suite__grid {
    grid-template-columns: 1fr;
  }

  .admin-qr-shop-tile--pay {
    grid-column: auto;
  }

  .admin-qr-shop-pay__inner {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-qr-shop-pay__cta {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .admin-qr-wizard__rail {
    margin-left: -0.25rem;
    margin-right: -0.25rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .admin-qr-wizard__steps {
    flex-wrap: nowrap;
    justify-content: flex-start;
    min-width: min-content;
  }
}

/* QR-sticker bestelling bevestigd (geen pakkettracking) */
.admin-qr-order-thanks {
  max-width: 640px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 2rem;
}

.admin-qr-order-thanks__hero {
  text-align: center;
  padding: 1.5rem 1.25rem 1.35rem;
  border-radius: 12px;
  margin-bottom: 1.5rem;
}

.admin-qr-order-thanks__hero--success {
  background: linear-gradient(160deg, #ecfdf5 0%, #d1fae5 100%);
  border: 1px solid #a7f3d0;
  color: #064e3b;
}

.admin-qr-order-thanks__hero--pending {
  background: linear-gradient(160deg, #f8fafc 0%, #e0e7ff 100%);
  border: 1px solid #c7d2fe;
  color: #1e1b4b;
}

.admin-qr-order-thanks__hero--warn {
  background: linear-gradient(160deg, #fff7ed 0%, #ffedd5 100%);
  border: 1px solid #fed7aa;
  color: #7c2d12;
}

.admin-qr-order-thanks__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  margin-bottom: 0.75rem;
  font-size: 1.35rem;
  line-height: 1;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

.admin-qr-order-thanks__title {
  margin: 0 0 0.5rem;
  font-size: 1.45rem;
}

.admin-qr-order-thanks__lead {
  margin: 0 auto;
  max-width: 48ch;
  line-height: 1.55;
  font-size: 0.98rem;
}

.admin-qr-order-thanks__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem 1.25rem;
  margin: 0 0 1.75rem;
  padding: 1.1rem 1.15rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}

.admin-qr-order-thanks__meta dt {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  font-weight: 600;
  margin: 0 0 0.2rem;
}

.admin-qr-order-thanks__meta dd {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #0f172a;
}

@media (max-width: 600px) {
  .admin-qr-order-thanks__meta {
    grid-template-columns: 1fr;
  }
}

.admin-qr-order-thanks__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* Bestelhistorie tabel */
.admin-qr-orders-empty__cta {
  margin-top: 0.75rem;
}

.admin-qr-orders-scroll {
  margin-bottom: 0.5rem;
}

.admin-qr-orders-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
}

.admin-qr-orders-table thead th {
  text-align: left;
  padding: 0.65rem 0.85rem;
  background: #f8fafc;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  font-weight: 700;
  border-bottom: 1px solid #e2e8f0;
}

.admin-qr-orders-table tbody td {
  padding: 0.75rem 0.85rem;
  vertical-align: top;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
  line-height: 1.45;
}

.admin-qr-orders-table__row-main:last-of-type td,
.admin-qr-orders-table tbody tr.admin-qr-orders-table__row-detail:last-child td {
  border-bottom: none;
}

.admin-qr-orders-table__status {
  max-width: 18rem;
}

.admin-qr-orders-table__ship {
  max-width: 20rem;
  font-size: 0.86rem;
}

.admin-qr-orders-track-link {
  font-weight: 700;
  color: #1d4ed8;
  text-decoration: none;
}

.admin-qr-orders-track-link:hover {
  text-decoration: underline;
}

.admin-qr-orders-track-code {
  color: #475569;
  font-weight: 500;
}

.admin-qr-orders-ship-meta {
  display: block;
  font-size: 0.8rem;
  color: #64748b;
  margin-top: 2px;
}

.admin-qr-orders-ship-pending {
  color: #64748b;
  font-size: 0.84rem;
}

.admin-qr-orders-ship-muted {
  color: #94a3b8;
}

.admin-qr-orders-table__row-detail td {
  padding-top: 0;
  padding-bottom: 0.65rem;
  background: #fafbfc;
  border-bottom: 1px solid #f1f5f9;
}

.admin-qr-orders-detail {
  margin: 0 0 0.5rem;
  padding: 0 0.5rem 0.35rem;
}

.admin-qr-orders-detail summary {
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  color: #2563eb;
  list-style: none;
}

.admin-qr-orders-detail summary::-webkit-details-marker {
  display: none;
}

.admin-qr-orders-detail__list {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.82rem;
  color: #475569;
}

.admin-qr-orders-detail__list li {
  margin-bottom: 0.25rem;
}

.admin-qr-codes-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.admin-qr-codes-summary__card {
  flex: 1;
  min-width: 10rem;
  margin: 0;
}

.admin-qr-codes-summary__title {
  font-size: 1rem;
}

.admin-qr-codes-summary__num {
  margin: 0;
  font-size: 1.75rem;
}

.admin-qr-codes-summary__hint {
  margin: 0;
}

.admin-qr-codes-filter-label {
  margin-bottom: 0.75rem;
}

.admin-qr-codes-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
}

.admin-qr-codes-assign-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

/* Project-dropdown in tabel Actie: zelfde taal als overige admin-controls */
.admin-qr-codes-assign-form .admin-qr-codes-project-select {
  --admin-qr-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%2364758b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  min-width: 10.5rem;
  max-width: min(100%, 17rem);
  padding: 0.4rem 2rem 0.4rem 0.65rem;
  font-size: 0.8125rem;
  line-height: 1.35;
  font-weight: 500;
  color: #0f172a;
  background-color: #fff;
  background-image: var(--admin-qr-select-chevron);
  background-repeat: no-repeat;
  background-position: right 0.55rem center;
  background-size: 0.75rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.admin-qr-codes-assign-form .admin-qr-codes-project-select::-ms-expand {
  display: none;
}

.admin-qr-codes-assign-form .admin-qr-codes-project-select:hover {
  border-color: #94a3b8;
}

.admin-qr-codes-assign-form .admin-qr-codes-project-select:focus {
  outline: none;
  border-color: #4f7cff;
  box-shadow: 0 0 0 2px rgba(79, 124, 255, 0.2);
}

.admin-qr-codes-assign-form .admin-qr-codes-project-select:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.admin-qr-code-cell {
  font-size: 0.95rem;
}

/* QR op dossier — kaarten gelijk aan gekoppelde klanten (#pv2-section-qr) */
.admin-project-qr-tab .admin-project-qr-tab__header-primary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.admin-project-qr-tab .admin-project-qr-tab__header-primary .fa-solid {
  font-size: 1.05em;
  opacity: 0.95;
}

.admin-project-qr-tab .admin-project-qr-tab__empty-lead {
  margin: 0 0 16px;
}

.admin-project-qr-tab .admin-project-qr-stickers-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.admin-project-qr-tab .admin-project-qr-stickers-item {
  margin: 0;
  padding: 0;
  border: 0;
}

.admin-project-qr-tab .admin-project-qr-stickers-item__inner {
  position: relative;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #fff;
  border: 1px solid #e8edf4;
  border-left: 4px solid #7c3aed;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
  padding: 18px 42px 16px 16px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.admin-project-qr-tab .admin-project-qr-stickers-item__inner:hover {
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.09);
  border-color: #d4def0;
}

.admin-project-qr-tab .admin-project-qr-stickers-unlink {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  color: #64748b;
  cursor: pointer;
  font: inherit;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.admin-project-qr-tab .admin-project-qr-stickers-unlink:hover {
  color: #b91c1c;
  border-color: #fecaca;
  background: #fef2f2;
}

.admin-project-qr-tab .admin-project-qr-stickers-unlink:focus-visible {
  outline: 2px solid #4f7cff;
  outline-offset: 2px;
}

.admin-project-qr-tab .admin-project-qr-stickers-unlink:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.admin-project-qr-tab .admin-project-qr-stickers-unlink .fa-solid {
  font-size: 0.95rem;
}

.admin-project-qr-tab .admin-project-qr-stickers-item__avatar {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #fff;
  background: linear-gradient(145deg, #8b5cf6 0%, #7c3aed 100%);
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.35);
}

.admin-project-qr-tab .admin-project-qr-stickers-item__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-project-qr-tab .admin-project-qr-stickers-item__code {
  font-family: ui-monospace, monospace;
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #0f172a;
  line-height: 1.35;
}

.admin-project-qr-tab .admin-project-qr-stickers-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}

.admin-project-qr-tab .admin-project-qr-stickers-item--add {
  display: flex;
  min-height: 0;
}

.admin-project-qr-tab .admin-project-customers-add-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 148px;
  margin: 0;
  padding: 22px 16px;
  box-sizing: border-box;
  cursor: pointer;
  border: 2px dashed #c4d4f8;
  border-radius: 14px;
  background: linear-gradient(180deg, #fafbff 0%, #f8fafc 100%);
  color: #475569;
  font: inherit;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.admin-project-qr-tab .admin-project-customers-add-card:hover {
  border-color: #4f7cff;
  background: linear-gradient(180deg, #f0f4ff 0%, #eef2ff 100%);
  color: #1e293b;
  box-shadow: 0 6px 22px rgba(79, 124, 255, 0.12);
}

.admin-project-qr-tab .admin-project-customers-add-card:focus-visible {
  outline: 2px solid #4f7cff;
  outline-offset: 2px;
}

.admin-project-qr-tab .admin-project-customers-add-card__plus {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 2px;
  border-radius: 14px;
  font-size: 1.35rem;
  color: #4f7cff;
  background: rgba(79, 124, 255, 0.12);
}

.admin-project-qr-tab .admin-project-customers-add-card__label {
  font-size: 0.95rem;
  font-weight: 750;
  color: #0f172a;
}

.admin-project-qr-tab .admin-project-customers-add-card__hint {
  font-size: 0.78rem;
  font-weight: 500;
  color: #64748b;
  max-width: 18rem;
  line-height: 1.35;
}

.admin-project-qr-picker-scroll {
  max-height: min(60vh, 28rem);
  overflow: auto;
  margin-top: 0.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 0.35rem 0.5rem;
}

.admin-project-qr-picker-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-project-qr-picker-row {
  align-items: flex-start;
}

.admin-project-qr-picker-search-group {
  margin-bottom: 0.65rem;
}

.admin-project-qr-picker-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.admin-project-qr-scan-status {
  flex: 1;
  min-width: 8rem;
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.35;
  color: #475569;
}

.admin-project-qr-scan-status.admin-project-qr-scan-status--error {
  color: #b91c1c;
}

.admin-project-qr-picker-item.is-filtered-out {
  display: none;
}

.admin-project-qr-picker-scan-hint {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.admin-project-qr-scanner-panel {
  margin-bottom: 0.75rem;
}

.admin-project-qr-scanner-video {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: 0.5rem;
  background: #0f172a;
}

.admin-project-qr-scanner-panel__actions {
  margin-top: 0.5rem;
}

.admin-project-qr-picker-item--flash {
  animation: adminQrPickerRowFlash 1.1s ease-out;
}

@keyframes adminQrPickerRowFlash {
  0%,
  100% {
    background-color: transparent;
  }

  20%,
  55% {
    background-color: rgba(59, 130, 246, 0.22);
  }
}

.admin-communications-card {
  max-width: 1400px;
}

.admin-communications-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 16px;
}

.admin-communications-sidebar {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #f8fbff;
  padding: 12px;
  display: grid;
  gap: 10px;
  align-content: start;
}

.admin-communications-filter {
  display: grid;
  gap: 8px;
}

.admin-communications-filter .admin-form-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d3deef;
  border-radius: 10px;
  background: #fff;
  padding: 10px 12px;
}

.admin-communications-projects {
  display: grid;
  gap: 8px;
  max-height: min(72vh, 900px);
  overflow: auto;
  padding-right: 2px;
}

.admin-communications-project {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid #d9e4f3;
  border-radius: 12px;
  text-decoration: none;
  color: #1f2f4f;
  background: #fff;
}

.admin-communications-project strong {
  font-size: 0.92rem;
}

.admin-communications-project span {
  font-size: 0.8rem;
  color: #64748b;
}

.admin-communications-project:hover {
  border-color: #b9cae4;
}

.admin-communications-project.is-active {
  border-color: #1f3b74;
  box-shadow: 0 0 0 2px rgba(31, 59, 116, 0.12);
}

.admin-communications-unread {
  justify-self: start;
  margin-top: 3px;
  border-radius: 999px;
  background: #fff1e8;
  color: #b44b11 !important;
  font-weight: 700;
  padding: 2px 8px;
}

@media (max-width: 1100px) {
  .admin-communications-layout {
    grid-template-columns: 1fr;
  }
}

.admin-sub-comm-filter {
  margin-top: 8px;
  padding: 0 10px;
  display: grid;
  gap: 6px;
}

.admin-sub-comm-filter__input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #c6d5ea;
  border-radius: 11px;
  background: #ffffff;
  padding: 10px 12px;
  font-size: 0.9rem;
  color: #11294d;
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.admin-sub-comm-filter__input::placeholder {
  color: #7890b3;
}

.admin-sub-comm-filter__input:focus {
  border-color: #3b6fb1;
  box-shadow: 0 0 0 3px rgba(59, 111, 177, 0.14);
  background: #fff;
}

.admin-sub-comm-list {
  margin-top: 8px;
  max-height: min(46vh, 460px);
  overflow: auto;
  padding-right: 2px;
  display: grid;
  gap: 7px;
  flex: 0 0 auto;
  align-content: start;
  grid-auto-rows: max-content;
}

.admin-sub-comm-item {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 8px;
  min-height: 0;
  height: auto;
  padding: 8px 8px 8px 10px;
  border-radius: 10px;
  border: 1px solid #d7e2f0;
  background: rgba(255, 255, 255, 0.86);
  color: #1f2f4f;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.admin-sub-comm-item:hover {
  border-color: #b9cae4;
  background: #fff;
}

.admin-sub-comm-item.is-active {
  border-color: #2d6fd4;
  background: #eef4fc;
  box-shadow: inset 4px 0 0 #1f4f8f, 0 2px 10px rgba(31, 79, 143, 0.12);
}

.admin-sub-comm-item__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-decoration: none;
  color: inherit;
}

.admin-sub-comm-item__detail {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid #c9d8ee;
  background: #fff;
  color: #1f4f8f;
  text-decoration: none;
  font-size: 0.95rem;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.admin-sub-comm-item__detail:hover {
  background: #e8f0fb;
  border-color: #9eb8dc;
  color: #163a6b;
}

.admin-sub-comm-item__detail:focus-visible {
  outline: 2px solid #2d6fd4;
  outline-offset: 2px;
}

.admin-sub-comm-item.is-active .admin-sub-comm-item__detail {
  border-color: #8fb0da;
  background: #fff;
}

.admin-sub-comm-item__head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.admin-sub-comm-item__title {
  font-size: 0.94rem;
  line-height: 1.25;
  color: #10294f;
}

.admin-sub-comm-item__meta {
  font-size: 0.74rem;
  color: #6b7f9f;
  line-height: 1.2;
}

.admin-sub-comm-item__address {
  margin-top: 1px;
  font-size: 0.77rem;
  color: #4a5d79;
  line-height: 1.25;
}

.admin-sub-comm-unread {
  margin-left: auto;
  border-radius: 999px;
  background: #fff1e8;
  color: #b44b11;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  padding: 3px 7px;
}

.admin-communications-page .admin-content {
  height: calc(100vh - var(--admin-topbar-offset, 132px));
  min-height: 640px;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.admin-communications-page .pv2-chat-inline-mount {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}

.admin-communications-page .visibo-chat-card {
  margin: 0;
  max-width: none;
  width: 100%;
  height: 100%;
  border-radius: 0;
  display: flex;
  flex-direction: column;
}

.admin-communications-page .visibo-chat-layout {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  border-radius: 0;
}

.admin-communications-page .visibo-chat-column,
.admin-communications-page .visibo-chat-main {
  min-height: 0;
}

/* =========================
   ONEDRIVE PANEL — Verkenner-achtige shell
========================= */
.admin-project-onedrive-panel #admin-onedrive-explorer.admin-file-explorer {
  margin-top: 6px;
  border: 1px solid #c8d0dc;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 31, 61, 0.06);
}

.admin-onedrive-loading-cell {
  padding: 18px 14px !important;
  color: #5a6b85;
  font-size: 0.9rem;
}

.admin-onedrive-loading-cell--busy {
  display: flex !important;
  align-items: center;
  gap: 12px;
}

.admin-onedrive-loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border: 2px solid #c8d0dc;
  border-top-color: #244d90;
  border-radius: 50%;
  animation: admin-onedrive-spin 0.75s linear infinite;
}

@keyframes admin-onedrive-spin {
  to {
    transform: rotate(360deg);
  }
}

.admin-onedrive-defer-hint {
  max-width: 52em;
}

.admin-project-onedrive-panel #admin-onedrive-explorer.admin-file-explorer.is-loading {
  cursor: wait;
}

.admin-project-onedrive-panel #admin-onedrive-explorer.admin-file-explorer.is-loading .admin-file-explorer__toolbar,
.admin-project-onedrive-panel #admin-onedrive-explorer.admin-file-explorer.is-loading .admin-file-explorer__search-row {
  pointer-events: none;
  opacity: 0.88;
}

.admin-project-onedrive-panel .admin-file-explorer__search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.admin-project-onedrive-panel .admin-file-explorer__search-input {
  flex: 1 1 200px;
  min-width: 160px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid #c8d0dc;
  border-radius: 8px;
  font: inherit;
  font-size: 0.92rem;
}

.admin-project-onedrive-panel .admin-onedrive-search-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  padding: 10px 12px;
  margin: 0;
  background: #e8f4fc;
  border-bottom: 1px solid rgba(0, 103, 184, 0.18);
  font-size: 0.88rem;
  color: #1a3050;
}

.admin-project-onedrive-panel .admin-onedrive-name-main {
  font-weight: 500;
}

.admin-project-onedrive-panel .admin-onedrive-path-hint {
  margin-top: 4px;
  font-size: 0.78rem;
  line-height: 1.3;
  color: #5a6d8c;
}

.admin-project-onedrive-panel .admin-onedrive-th-sort {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 750;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #5a6b82;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.admin-project-onedrive-panel .admin-onedrive-th-sort:hover {
  color: #1e4d8c;
}

.admin-project-onedrive-panel .admin-onedrive-th-sort[aria-pressed="false"] {
  color: #244d90;
}

.admin-project-onedrive-panel .admin-onedrive-explorer-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 18px 16px;
  margin: 0;
  background: linear-gradient(180deg, #f8fafc 0%, #f4f7fb 100%);
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #e2eaf2;
  box-sizing: border-box;
}

.admin-project-onedrive-panel .admin-onedrive-explorer-head__info-badge {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-top: 2px;
  border-radius: 50%;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 0.95rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  color: #fff;
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
}

.admin-project-onedrive-panel .admin-onedrive-explorer-head__body {
  flex: 1;
  min-width: 0;
}

.admin-project-onedrive-panel .admin-onedrive-explorer-head__title {
  margin: 0 0 12px;
  font-size: 0.98rem;
  font-weight: 750;
  color: #0c4a6e;
  letter-spacing: -0.015em;
}

.admin-project-onedrive-panel .admin-onedrive-explorer-head__steps {
  counter-reset: od-explorer-step;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  line-height: 1.55;
  color: #1e3a5f;
}

.admin-project-onedrive-panel .admin-onedrive-explorer-head__steps li {
  counter-increment: od-explorer-step;
  position: relative;
  padding-left: 2.45rem;
  margin-bottom: 14px;
}

.admin-project-onedrive-panel .admin-onedrive-explorer-head__steps li:last-child {
  margin-bottom: 0;
}

.admin-project-onedrive-panel .admin-onedrive-explorer-head__steps li::before {
  content: counter(od-explorer-step);
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.65rem;
  text-align: center;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.28);
}

.admin-project-onedrive-panel .admin-onedrive-explorer-head__steps strong {
  color: #0f172a;
  font-weight: 650;
}

.admin-project-onedrive-panel .admin-onedrive-explorer-head__note {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #64748b;
}

.admin-project-onedrive-panel .admin-file-explorer__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(180deg, #fafbfd 0%, #eef1f6 100%);
  border-bottom: 1px solid #c8d0dc;
}

.admin-project-onedrive-panel .admin-onedrive-toolbar-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.admin-project-onedrive-panel .admin-onedrive-toolbar-label {
  flex: 0 0 auto;
  margin-right: 4px;
  font-size: 0.72rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #7a8aa0;
}

.admin-project-onedrive-panel .admin-file-explorer__toolbar .admin-btn:disabled,
.admin-project-onedrive-panel .admin-file-explorer__toolbar .admin-btn[disabled] {
  opacity: 0.48;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.admin-project-onedrive-panel .admin-file-explorer__toolbar .admin-btn:disabled:hover {
  transform: none;
}

.admin-project-onedrive-panel .admin-file-explorer__address-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
}

.admin-project-onedrive-panel .admin-file-explorer__address-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e8b84a'%3E%3Cpath d='M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
}

.admin-project-onedrive-panel .admin-file-explorer__address {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.88rem;
  color: #1e3a5f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-project-onedrive-panel .admin-onedrive-context-stack {
  background: #fff;
}

.admin-project-onedrive-panel .admin-onedrive-hint-row {
  margin: 0;
  padding: 8px 12px;
  font-size: 0.84rem;
  line-height: 1.45;
  color: #5a6b82;
  background: #fafcff;
  border-bottom: 1px solid #eef2f7;
}

.admin-project-onedrive-panel .admin-onedrive-share-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin: 0;
  background: #eef3f9;
  border-bottom: 1px solid #d6dee8;
}

.admin-project-onedrive-panel .admin-onedrive-share-bar__form {
  margin: 0;
  display: flex;
  align-items: center;
}

/* Contrasterende knop: secundaire bg (#eef3f8) verdween tegen de balk (#eef3f9) */
.admin-project-onedrive-panel .admin-onedrive-share-bar .admin-onedrive-share-bar__submit.admin-btn.admin-btn-secondary {
  background: #fff;
  color: #0f2848;
  font-weight: 750;
  border: 1px solid #b0bfd2;
  box-shadow: 0 1px 3px rgba(15, 35, 60, 0.1);
}

.admin-project-onedrive-panel .admin-onedrive-share-bar .admin-onedrive-share-bar__submit.admin-btn.admin-btn-secondary:hover {
  background: #f4f8fc;
  border-color: #0078d4;
  color: #052440;
}

.admin-project-onedrive-panel .admin-onedrive-share-bar .admin-onedrive-share-bar__submit.admin-btn.admin-btn-secondary:focus-visible {
  outline: 2px solid #0078d4;
  outline-offset: 2px;
}

.admin-project-onedrive-panel .admin-onedrive-defer-block {
  padding: 10px 12px;
  background: #fafbfd;
  border-bottom: 1px solid #e8ecf0;
}

.admin-project-onedrive-panel .admin-onedrive-manual-url {
  margin-top: 18px;
  padding: 20px 22px 18px;
  border: 1px solid #e8ecf4;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 4px 24px rgba(15, 31, 61, 0.06), 0 1px 3px rgba(15, 31, 61, 0.04);
}

.admin-project-onedrive-panel .admin-onedrive-manual-url__head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}

.admin-project-onedrive-panel .admin-onedrive-manual-url__head-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.05rem;
  color: #1e40af;
  background: linear-gradient(145deg, #eef2ff 0%, #e0e7ff 100%);
  box-shadow: 0 2px 8px rgba(30, 64, 175, 0.12);
}

.admin-project-onedrive-panel .admin-onedrive-manual-url__head-text {
  min-width: 0;
}

.admin-project-onedrive-panel .admin-onedrive-manual-url__title {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 750;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.admin-project-onedrive-panel .admin-onedrive-manual-url__hint {
  margin: 0;
  max-width: 56em;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #64748b;
}

.admin-project-onedrive-panel .admin-onedrive-manual-url__form {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.admin-project-onedrive-panel .admin-onedrive-manual-url__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.admin-project-onedrive-panel .admin-onedrive-manual-url__label-block {
  margin: 0;
}

.admin-project-onedrive-panel .admin-onedrive-manual-url__label {
  display: block;
  margin: 0 0 6px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #1e293b;
}

.admin-project-onedrive-panel .admin-onedrive-manual-url__field-lead {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.5;
  color: #64748b;
}

.admin-project-onedrive-panel .admin-onedrive-manual-url__code {
  padding: 1px 6px;
  font-size: 0.82em;
  font-weight: 600;
  color: #334155;
  background: #f1f5f9;
  border-radius: 4px;
}

.admin-project-onedrive-panel .admin-onedrive-manual-url__service-list {
  margin: 0;
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  background: #fafbfd;
}

.admin-project-onedrive-panel .admin-onedrive-manual-url__service-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  margin: 0;
  border-bottom: 1px solid #eef2f7;
  box-sizing: border-box;
}

.admin-project-onedrive-panel .admin-onedrive-manual-url__service-row:last-child {
  border-bottom: none;
}

.admin-project-onedrive-panel .admin-onedrive-manual-url__service-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  margin-top: 2px;
  border-radius: 10px;
  font-size: 1rem;
  background: #f1f5f9;
}

.admin-project-onedrive-panel .admin-onedrive-manual-url__brand-img {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.admin-project-onedrive-panel .admin-onedrive-manual-url__service-title {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 650;
  color: #1e293b;
}

.admin-project-onedrive-panel .admin-onedrive-manual-url__service-body {
  display: block;
  color: #475569;
}

.admin-project-onedrive-panel .admin-onedrive-manual-url__service-body strong {
  color: #1e293b;
  font-weight: 650;
}

.admin-project-onedrive-panel .admin-onedrive-manual-url__service-text {
  flex: 1;
  margin: 0;
  min-width: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: #475569;
}

.admin-project-onedrive-panel .admin-onedrive-manual-url__service-chev {
  flex-shrink: 0;
  align-self: center;
  font-size: 0.65rem;
  color: #cbd5e1;
}

.admin-project-onedrive-panel .admin-onedrive-manual-url__input-wrap {
  position: relative;
  margin-top: 2px;
}

.admin-project-onedrive-panel .admin-onedrive-manual-url__input-ico {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 0.9rem;
  pointer-events: none;
  z-index: 1;
}

.admin-project-onedrive-panel .admin-onedrive-manual-url__input {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 11px 14px 11px 40px;
  font-size: 0.9rem;
  color: #0f172a;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-project-onedrive-panel .admin-onedrive-manual-url__input::placeholder {
  color: #94a3b8;
}

.admin-project-onedrive-panel .admin-onedrive-manual-url__input:hover {
  border-color: #93c5fd;
}

.admin-project-onedrive-panel .admin-onedrive-manual-url__input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}

.admin-project-onedrive-panel .admin-onedrive-manual-url__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 18px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #f1f5f9;
}

.admin-project-onedrive-panel .admin-onedrive-manual-url__trust {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  max-width: 42ch;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #64748b;
}

.admin-project-onedrive-panel .admin-onedrive-manual-url__trust .fa-shield-halved {
  flex-shrink: 0;
  margin-top: 2px;
  color: #059669;
  font-size: 0.95rem;
}

.admin-project-onedrive-panel .admin-onedrive-manual-url__submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-weight: 650;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(30, 58, 138, 0.2);
}

.admin-project-onedrive-panel .admin-onedrive-manual-url__submit .fa-lock {
  font-size: 0.88em;
  opacity: 0.95;
}

.admin-project-onedrive-panel .admin-file-explorer__list-wrap {
  margin-top: 0;
}

.admin-project-onedrive-panel .admin-file-explorer__table {
  margin: 0;
}

.admin-project-onedrive-panel .admin-file-explorer__table thead th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #5a6b82;
  background: #f7f9fc;
}

.admin-project-onedrive-panel .admin-file-explorer__col-icon {
  width: 52px;
}

.admin-project-onedrive-panel .admin-file-explorer__cell-icon {
  vertical-align: middle;
  text-align: center;
}

.admin-project-onedrive-panel .admin-file-explorer__ico {
  display: inline-block;
  width: 28px;
  height: 28px;
  vertical-align: middle;
}

.admin-project-onedrive-panel .admin-file-explorer__ico--folder {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e8b84a'%3E%3Cpath d='M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.admin-project-onedrive-panel .admin-file-explorer__ico--file {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237891ab' stroke-width='1.5'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E") center / contain no-repeat;
}

.admin-project-onedrive-panel tr.admin-file-explorer__row--folder {
  cursor: pointer;
}

.admin-project-onedrive-panel tr.admin-file-explorer__row--folder:hover td {
  background: #e8f4fc;
}

.admin-project-onedrive-panel tr.admin-file-explorer__row--folder:focus-visible {
  outline: 2px solid #2d6fd4;
  outline-offset: -2px;
}
/* === Installatie modal redesign (PIDD) === */
.pidd-modal {
  --pidd-ink: #17233b;
  --pidd-muted: #64748b;
  --pidd-line: #e3eaf3;
  --pidd-soft: #f1f6fb;
  --pidd-primary: #163f86;
  --pidd-primary-2: #0d2f6e;
  --pidd-warning: #f6a623;
  --pidd-danger: #e75555;
  --pidd-ok: #20c997;
  width: min(1080px, 96vw);
  max-width: 1080px;
  max-height: 92vh;
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 24px 80px rgba(15, 35, 75, 0.22);
  color: var(--pidd-ink);
  overflow: hidden;
}

.pidd-modal::backdrop {
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
}

.pidd-form {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 92vh;
  background: transparent;
}

.pidd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--pidd-line);
  background: #ffffff;
  cursor: grab;
  user-select: none;
}

.pidd-header:active {
  cursor: grabbing;
}

.pidd-titlewrap {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.pidd-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--pidd-primary), #286be8);
  display: grid;
  place-items: center;
  color: #ffffff;
  font-weight: 800;
  font-size: 18px;
  box-shadow: 0 10px 22px rgba(22, 63, 134, 0.24);
  text-transform: uppercase;
  flex: 0 0 auto;
}

.pidd-title-block {
  min-width: 0;
}

.pidd-modal h2#pidd-dlg-title {
  font-size: 20px;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.02em;
  color: var(--pidd-ink);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pidd-subtitle {
  margin-top: 4px;
  color: var(--pidd-muted);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pidd-close {
  border: 0;
  background: var(--pidd-soft);
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: 22px;
  line-height: 1;
  color: #64748b;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background 0.18s ease, color 0.18s ease;
}

.pidd-close:hover {
  background: #e2eaf3;
  color: #1e293b;
}

.pidd-content {
  display: grid;
  grid-template-columns: 280px 1fr;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.pidd-sidebar {
  background: #f8fbff;
  border-right: 1px solid var(--pidd-line);
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pidd-status-card {
  background: #ffffff;
  border: 1px solid var(--pidd-line);
  border-radius: 18px;
  padding: 16px 18px;
}

.pidd-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 800;
  border-radius: 999px;
  padding: 6px 10px;
  margin-bottom: 12px;
  background: #fff2d8;
  color: #8a4b00;
}

.pidd-status-badge .pidd-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pidd-warning);
}

.pidd-status-badge[data-tone="ok"] {
  background: #def8ec;
  color: #096b4a;
}
.pidd-status-badge[data-tone="ok"] .pidd-dot { background: var(--pidd-ok); }

.pidd-status-badge[data-tone="warn"] {
  background: #fff2d8;
  color: #8a4b00;
}
.pidd-status-badge[data-tone="warn"] .pidd-dot { background: var(--pidd-warning); }

.pidd-status-badge[data-tone="danger"] {
  background: #ffe1e1;
  color: #952121;
}
.pidd-status-badge[data-tone="danger"] .pidd-dot { background: var(--pidd-danger); }

.pidd-status-badge[data-tone="neutral"] {
  background: #eef2f7;
  color: #475569;
}
.pidd-status-badge[data-tone="neutral"] .pidd-dot { background: #94a3b8; }

.pidd-next-date {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 4px;
  color: var(--pidd-ink);
  line-height: 1.1;
}

.pidd-small {
  font-size: 13px;
  color: var(--pidd-muted);
  line-height: 1.45;
}

.pidd-quick-actions {
  display: grid;
  gap: 10px;
}

.pidd-action {
  border: 1px solid var(--pidd-line);
  background: #ffffff;
  border-radius: 14px;
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
  font-weight: 700;
  color: #263650;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.06s ease;
}

.pidd-action:hover {
  background: #f1f6fb;
  border-color: #d7e1ee;
}

.pidd-action:active {
  transform: translateY(1px);
}

.pidd-action span {
  font-size: 16px;
}

.pidd-action--primary {
  background: var(--pidd-primary);
  color: #ffffff;
  border-color: var(--pidd-primary);
}

.pidd-action--primary:hover {
  background: var(--pidd-primary-2);
  border-color: var(--pidd-primary-2);
  color: #ffffff;
}

.pidd-nav {
  display: grid;
  gap: 6px;
  margin-top: 4px;
}

.pidd-nav__btn {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  text-align: left;
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 700;
  color: #53657d;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.18s ease, color 0.18s ease;
}

.pidd-nav__btn[hidden] {
  display: none !important;
}

.pidd-nav__btn:hover {
  background: #eef4fc;
  color: var(--pidd-primary);
}

.pidd-nav__btn.active {
  background: #eaf2ff;
  color: var(--pidd-primary);
}

.pidd-nav__icon {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #f3f6fb;
  font-size: 14px;
  line-height: 1;
  transition: background 0.18s ease, color 0.18s ease;
}

.pidd-nav__btn:hover .pidd-nav__icon,
.pidd-nav__btn.active .pidd-nav__icon {
  background: #ffffff;
  color: var(--pidd-primary);
  box-shadow: 0 2px 6px rgba(22, 63, 134, 0.08);
}

.pidd-nav__label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pidd-nav__btn--bottom {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--pidd-line);
  border-radius: 0 0 12px 12px;
}

@media (max-width: 820px) {
  .pidd-nav__btn--bottom {
    margin-top: 0;
    padding-top: 11px;
    border-top: 0;
  }
}

.pidd-nav__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 7px;
  margin-left: auto;
  border-radius: 999px;
  background: #e2eaf6;
  color: #163f86;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.pidd-nav__count[hidden] {
  display: none !important;
}

.pidd-nav__count--danger {
  background: #fbd0d0;
  color: #952121;
}

.pidd-nav__btn.active .pidd-nav__count {
  background: #163f86;
  color: #ffffff;
}

.pidd-nav__btn.active .pidd-nav__count--danger {
  background: #e75555;
  color: #ffffff;
}

.pidd-action__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 7px;
  margin-left: auto;
  border-radius: 999px;
  background: #fbd0d0;
  color: #952121;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.pidd-main {
  position: relative;
  padding: 22px 26px 24px;
  overflow-y: auto;
  background: #f6f9fd;
  min-height: 0;
}

.pidd-alert {
  margin-bottom: 16px;
}

.pidd-panel {
  display: none;
}

.pidd-panel.active {
  display: block;
}

.pidd-block {
  background: #ffffff;
  border: 1px solid var(--pidd-line);
  border-radius: 18px;
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(15, 31, 61, 0.03);
}

.pidd-block:last-of-type {
  margin-bottom: 0;
}

.pidd-section-title {
  font-size: 12px;
  font-weight: 800;
  color: #718096;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.pidd-block__lede {
  margin: -6px 0 12px;
  color: var(--pidd-muted);
  font-size: 13px;
  line-height: 1.5;
}

.pidd-block__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.pidd-block__head .pidd-section-title {
  margin-bottom: 4px;
}

.pidd-block__head .pidd-block__lede {
  margin: 0;
}

.pidd-block__head-action {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  padding: 10px 14px;
}

.pidd-defects-list .admin-installation-maint-card__badge {
  background: #ffe1e1;
  color: #952121;
}

.pidd-defect-form[hidden],
#pidd-defects-overview[hidden],
#pidd-block-register[hidden],
#pidd-maint-overview[hidden] {
  display: none !important;
}

.pidd-back--neutral {
  border-color: #cfd9e6;
  color: #34445a;
}

.pidd-back--neutral:hover {
  background: #eef3f8;
  border-color: #b8c5d6;
}

.pidd-tech-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.pidd-tech-row > select,
.pidd-tech-row > input[type="text"] {
  flex: 1 1 0;
  min-width: 0;
}

.pidd-tech-row > [data-pidd-tech-other][hidden] {
  display: none !important;
}

.pidd-defect-feedback {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 11px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  border: 1px solid transparent;
}

.pidd-defect-feedback[hidden] {
  display: none !important;
}

.pidd-defect-feedback--info {
  background: #eef4fc;
  border-color: #cfddf2;
  color: #1b3a76;
}

.pidd-defect-feedback--success {
  background: #def8ec;
  border-color: #a9e9c8;
  color: #096b4a;
}

.pidd-defect-feedback--error {
  background: #ffe1e1;
  border-color: #f0bcbc;
  color: #952121;
}

/* Korte shake om de aandacht naar de foutmelding te trekken. */
.pidd-defect-feedback--shake {
  animation: piddDefectShake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  box-shadow: 0 8px 24px rgba(149, 33, 33, 0.18);
}

@keyframes piddDefectShake {
  10%, 90%  { transform: translateX(-2px); }
  20%, 80%  { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60%  { transform: translateX(5px); }
}

/* Markeert het veld dat de gebruiker nog moet aanvullen. Werkt op een
   .admin-form-group of een .pidd-fiche__col (dynamische fiche). */
.pidd-defect-field-error {
  position: relative;
  border-radius: 12px;
  animation: piddDefectFieldPulse 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.pidd-defect-field-error::before {
  content: "";
  position: absolute;
  inset: -6px -8px;
  border-radius: 14px;
  background: rgba(220, 38, 38, 0.06);
  border: 1px solid rgba(220, 38, 38, 0.55);
  pointer-events: none;
  z-index: 0;
}

.pidd-defect-field-error > * {
  position: relative;
  z-index: 1;
}

.pidd-defect-field-error input,
.pidd-defect-field-error select,
.pidd-defect-field-error textarea {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18) !important;
}

.pidd-defect-field-error label {
  color: #991b1b;
  font-weight: 700;
}

@keyframes piddDefectFieldPulse {
  0%   { transform: scale(0.99); }
  60%  { transform: scale(1.012); }
  100% { transform: scale(1); }
}

/* Korte felle flash zodat de markering ook opvalt wanneer het veld al
   in de viewport zit (zonder scroll). */
.pidd-defect-field-error--flash::before {
  animation: piddDefectFieldFlash 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes piddDefectFieldFlash {
  0%   { background: rgba(220, 38, 38, 0.35); border-color: #dc2626; box-shadow: 0 0 0 6px rgba(220, 38, 38, 0.18); }
  50%  { background: rgba(220, 38, 38, 0.18); border-color: #dc2626; box-shadow: 0 0 0 10px rgba(220, 38, 38, 0.10); }
  100% { background: rgba(220, 38, 38, 0.06); border-color: rgba(220, 38, 38, 0.55); box-shadow: none; }
}

/* Inline paneel onder een defect-kaart om de fiche te versturen. */
.pidd-defect-email-panel {
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: linear-gradient(165deg, #f5f9ff 0%, #ffffff 100%);
  border: 1px solid #d5deec;
  box-shadow: 0 12px 28px rgba(31, 45, 74, 0.08);
  animation: piddDefectEmailIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes piddDefectEmailIn {
  0%   { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 1; transform: translateY(0); }
}

.pidd-defect-email-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.pidd-defect-email-panel__head strong {
  font-size: 14px;
  color: #1f2d4a;
}

.pidd-defect-email-panel__close {
  appearance: none;
  background: transparent;
  border: 0;
  font-size: 22px;
  line-height: 1;
  color: #5a6886;
  cursor: pointer;
  padding: 0 6px;
}

.pidd-defect-email-panel__close:hover {
  color: #1f2d4a;
}

.pidd-defect-email-panel__lede {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: #5a6886;
  line-height: 1.45;
}

.pidd-defect-email-panel__tpl {
  margin-bottom: 12px;
}

.pidd-defect-email-panel__tpl label {
  display: block;
  font-weight: 600;
  font-size: 12.5px;
  color: #1f2d4a;
  margin-bottom: 6px;
}

.pidd-defect-email-panel__tpl select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #d5deec;
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  background: #ffffff;
}

.pidd-defect-email-panel__tpl select:focus {
  outline: 0;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

.pidd-defect-email-panel__tpl-preview {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f0f5ff;
  border: 1px dashed #bcd1f4;
  font-size: 12.5px;
  color: #1b3a76;
  line-height: 1.5;
}

.pidd-defect-email-panel__tpl-preview[hidden] {
  display: none !important;
}

.pidd-defect-email-panel__tpl-preview-label {
  font-weight: 700;
  margin-right: 4px;
}

.pidd-defect-email-panel__tpl-preview-subj {
  font-weight: 600;
}

.pidd-defect-email-panel__tpl-preview-hint {
  display: block;
  margin-top: 4px;
  color: #5a6886;
  font-size: 11.5px;
}

.pidd-defect-email-panel__tpl-preview-hint code {
  padding: 1px 5px;
  border-radius: 4px;
  background: #ffffff;
  border: 1px solid #d5deec;
  font-size: 11px;
  color: #1f2d4a;
}

.pidd-defect-email-panel__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.pidd-defect-email-panel__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.pidd-defect-email-panel__opt:hover {
  background: rgba(31, 45, 74, 0.04);
  border-color: rgba(31, 45, 74, 0.08);
}

.pidd-defect-email-panel__opt input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #2563eb;
  flex: 0 0 16px;
}

.pidd-defect-email-panel__opt-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pidd-defect-email-panel__opt-text strong {
  font-size: 13.5px;
  color: #1f2d4a;
  word-break: break-word;
}

.pidd-defect-email-panel__opt-text em {
  font-style: normal;
  font-size: 12px;
  color: #5a6886;
  word-break: break-all;
}

.pidd-defect-email-panel__extra label {
  display: block;
  font-weight: 600;
  font-size: 12.5px;
  color: #1f2d4a;
  margin-bottom: 6px;
}

.pidd-defect-email-panel__extra textarea {
  width: 100%;
  resize: vertical;
  padding: 8px 10px;
  border: 1px solid #d5deec;
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  background: #ffffff;
}

.pidd-defect-email-panel__extra textarea:focus {
  outline: 0;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

.pidd-defect-email-panel__hint {
  margin: 6px 2px 0;
  font-size: 11.5px;
  color: #5a6886;
  line-height: 1.45;
}

.pidd-defect-email-panel__hint code {
  background: #eef2fb;
  border: 1px solid #d5deec;
  padding: 0 5px;
  border-radius: 5px;
  font-size: 11px;
  color: #1f3050;
}

.pidd-defect-email-panel__feedback {
  margin: 10px 0;
  padding: 8px 12px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
}

.pidd-defect-email-panel__feedback[hidden] {
  display: none !important;
}

.pidd-defect-email-panel__feedback--info {
  background: #eef4fc;
  color: #1b3a76;
  border: 1px solid #cfddf2;
}

.pidd-defect-email-panel__feedback--success {
  background: #def8ec;
  color: #096b4a;
  border: 1px solid #a9e9c8;
}

.pidd-defect-email-panel__feedback--error {
  background: #ffe1e1;
  color: #952121;
  border: 1px solid #f0bcbc;
}

.pidd-defect-email-panel__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

/* Indicator voor een bestaande foto bij edit-modus van een defect.
   Toont de bestandsnaam met een keuze: nieuw bestand uploaden (vervangt
   automatisch) of vinkje aanzetten om de huidige te verwijderen. */
.pidd-def-existing-att {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f5f8ff;
  border: 1px solid #d5deec;
  font-size: 13px;
}

.pidd-def-existing-att__row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pidd-def-existing-att__icon {
  font-size: 15px;
}

.pidd-def-existing-att__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 200px;
  min-width: 0;
}

.pidd-def-existing-att__filename {
  font-weight: 700;
  color: #1f2d4a;
  word-break: break-all;
}

.pidd-def-existing-att__hint {
  color: #5a6886;
  font-size: 12px;
  font-weight: 500;
}

.pidd-def-existing-att__remove {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #952121;
  font-weight: 600;
  font-size: 12.5px;
  cursor: pointer;
  user-select: none;
}

.pidd-def-existing-att__remove input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: #dc2626;
}

/* Inline foutmelding direct onder het veld. */
.pidd-defect-field-error-msg {
  position: relative;
  z-index: 1;
  margin-top: 8px;
  padding: 8px 10px 8px 32px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(220, 38, 38, 0.55);
  color: #991b1b;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  box-shadow: 0 6px 16px rgba(220, 38, 38, 0.12);
  animation: piddDefectInlineIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.pidd-defect-field-error-msg::before {
  content: "!";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

@keyframes piddDefectInlineIn {
  0%   { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 1; transform: translateY(0); }
}

.pidd-history-timeline {
  margin-top: 4px;
}

.pidd-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.pidd-history-list::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: #e2eaf3;
  border-radius: 2px;
}

.pidd-history-item {
  position: relative;
  display: flex;
  gap: 14px;
  padding: 12px 0;
  align-items: flex-start;
}

.pidd-history-item__marker {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #eaf2ff;
  color: var(--pidd-primary);
  font-weight: 800;
  font-size: 14px;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px #cfd9e6;
  z-index: 1;
  position: relative;
}

.pidd-history-item--install .pidd-history-item__marker {
  background: #eef4fc;
  color: var(--pidd-primary);
  box-shadow: 0 0 0 1px #c5d3e8;
}

.pidd-history-item--maintenance .pidd-history-item__marker {
  background: #e5fff6;
  color: #008b61;
  box-shadow: 0 0 0 1px #aae5cf;
}

.pidd-history-item--inspection .pidd-history-item__marker {
  background: #fff6e2;
  color: #8a4b00;
  box-shadow: 0 0 0 1px #ebd29b;
}

.pidd-history-item--defect .pidd-history-item__marker {
  background: #ffe1e1;
  color: #952121;
  box-shadow: 0 0 0 1px #f0bcbc;
}

.pidd-history-item__body {
  flex: 1 1 auto;
  min-width: 0;
  background: #ffffff;
  border: 1px solid var(--pidd-line);
  border-radius: 13px;
  padding: 10px 14px;
  box-shadow: 0 1px 2px rgba(15, 31, 61, 0.03);
}

.pidd-history-item__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.pidd-history-item__title {
  font-weight: 750;
  font-size: 14px;
  color: var(--pidd-ink);
}

.pidd-history-item__date {
  font-size: 12.5px;
  color: var(--pidd-muted);
  font-weight: 600;
  white-space: nowrap;
}

.pidd-history-item__sub {
  margin-top: 4px;
  font-size: 13px;
  color: #4d5a72;
  line-height: 1.45;
  word-break: break-word;
}

.pidd-history-item__link {
  display: inline-block;
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--pidd-primary);
  text-decoration: none;
}

.pidd-history-item__link:hover {
  text-decoration: underline;
}

@media (max-width: 540px) {
  .pidd-history-list::before {
    left: 15px;
  }

  .pidd-history-item__marker {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }

  .pidd-history-item__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
}

@media (max-width: 540px) {
  .pidd-tech-row {
    flex-direction: column;
  }
}

.pidd-defect-form {
  border-color: #f3c8c8;
  background: #fff9f9;
}

.pidd-defect-form .pidd-section-title {
  color: #952121;
}

.pidd-defect-form__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.pidd-defect-form__title {
  min-width: 0;
}

.pidd-defect-form__title .pidd-section-title {
  margin-bottom: 4px;
}

.pidd-defect-form__title .pidd-block__lede {
  margin: 0;
}

.pidd-back {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #f3c8c8;
  background: #ffffff;
  color: #952121;
  border-radius: 11px;
  padding: 8px 12px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.pidd-back:hover {
  background: #fff0f0;
  border-color: #e7b3b3;
}

.pidd-back span {
  font-size: 16px;
  line-height: 1;
}

.pidd-defect-form-shell {
  display: none;
}

[data-pidd-defect-toggle][aria-expanded="true"] {
  background: var(--pidd-primary-2);
}

@media (max-width: 640px) {
  .pidd-block__head {
    flex-direction: column;
  }

  .pidd-block__head-action {
    align-self: stretch;
    justify-content: center;
  }
}

.pidd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 0;
}

.pidd-modal .admin-form-group {
  padding: 0;
  margin: 0;
}

.pidd-modal .admin-form-group > label {
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 6px;
  display: inline-block;
}

.pidd-modal .admin-form-group input,
.pidd-modal .admin-form-group select,
.pidd-modal .admin-form-group textarea {
  width: 100%;
  border: 1px solid #cfd9e6;
  border-radius: 11px;
  padding: 11px 13px;
  font: inherit;
  font-size: 14px;
  background: #ffffff;
  color: var(--pidd-ink);
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.pidd-modal .admin-form-group input:focus,
.pidd-modal .admin-form-group select:focus,
.pidd-modal .admin-form-group textarea:focus {
  border-color: #74a3ee;
  box-shadow: 0 0 0 4px rgba(47, 128, 237, 0.12);
}

.pidd-modal .admin-form-group textarea {
  min-height: 92px;
  resize: vertical;
}

.pidd-modal .admin-form-group-full {
  grid-column: 1 / -1;
}

.pidd-helper {
  background: #f4f8fd;
  border: 1px dashed #c8d7ea;
  border-radius: 14px;
  padding: 12px 14px;
  color: #53657d;
  font-size: 13px;
  line-height: 1.55;
  margin-top: 12px;
}

.pidd-helper__line {
  margin: 0;
}

.pidd-helper__line + .pidd-helper__line {
  margin-top: 6px;
}

.pidd-helper__line--muted {
  color: #6f7e95;
}

.pidd-form-hint {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--pidd-muted);
  line-height: 1.5;
}

.pidd-form-hint--inline {
  font-weight: 400;
  font-size: 12px;
  color: var(--pidd-muted);
  margin: 0 0 0 4px;
}

.pidd-form-hint code {
  background: #eef2f7;
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 0.86em;
}

.pidd-block__actions {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.pidd-footer {
  flex: 0 0 auto;
  padding: 14px 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--pidd-line);
  z-index: 3;
}

.pidd-footer__note {
  font-size: 13px;
  color: var(--pidd-muted);
}

.pidd-footer__actions {
  display: flex;
  gap: 10px;
}

/* Verberg de oude in-modal toast (verving door footer-alert hieronder). */
.pidd-toast { display: none !important; }

/* "Opslaan" in de globale footer slaat enkel de installatiegegevens op
   (Details-tab). Op de andere tabs hebben de formulieren een eigen
   submit-knop ("Defect registreren", "Onderhoudsattest opslaan",
   "Document uploaden"), dus daar verbergen we de globale knop én de
   bijhorende hint. Zo zijn er nooit twee submit-knoppen onder elkaar. */
.pidd-modal:not([data-pidd-active-tab="details"]) [data-pidd-save-btn],
.pidd-modal:not([data-pidd-active-tab="details"]) .pidd-footer__note {
  display: none !important;
}

/* Houd de footer rechts uitgelijnd wanneer enkel "Sluiten" zichtbaar is. */
.pidd-modal:not([data-pidd-active-tab="details"]) .pidd-footer {
  justify-content: flex-end;
}

/* Compacte "Opgeslagen"-pill links in de footer van de detail-modal. */
.pidd-footer-alert {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: linear-gradient(165deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 10px 22px rgba(5, 150, 105, 0.35);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  margin-right: auto;
}

.pidd-footer-alert[hidden] {
  display: none !important;
}

.pidd-footer-alert--in {
  opacity: 1;
  transform: translateY(0);
  animation: piddFooterAlertPop 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.pidd-footer-alert__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  font-weight: 800;
  font-size: 13px;
}

@keyframes piddFooterAlertPop {
  0%   { transform: scale(0.92) translateY(4px); }
  60%  { transform: scale(1.04) translateY(0); }
  100% { transform: scale(1) translateY(0); }
}

/* Wanneer de alert verschijnt, verbergen we de gewone footer-note
   zodat de pill links de plek inneemt zonder visuele drukte. */
.pidd-footer:has(.pidd-footer-alert--in) .pidd-footer__note {
  display: none;
}

.pidd-modal .admin-btn {
  border: 0;
  border-radius: 13px;
  padding: 12px 18px;
  font-weight: 800;
  cursor: pointer;
  font-size: 14px;
}

.pidd-modal .admin-btn-secondary {
  background: #eef3f8;
  color: #34445a;
}

.pidd-modal .admin-btn-secondary:hover {
  background: #e1e9f3;
}

.pidd-modal .admin-btn-primary {
  background: var(--pidd-primary);
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(22, 63, 134, 0.22);
}

.pidd-modal .admin-btn-primary:hover {
  background: var(--pidd-primary-2);
}

@media (max-width: 820px) {
  .pidd-modal {
    width: 100vw;
    max-width: 100vw;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
    margin: 0;
  }

  .pidd-form {
    max-height: 100vh;
  }

  .pidd-header {
    padding: 14px 16px;
  }

  .pidd-content {
    grid-template-columns: 1fr;
  }

  .pidd-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--pidd-line);
    padding: 14px 16px;
  }

  .pidd-quick-actions {
    grid-template-columns: 1fr 1fr;
  }

  .pidd-nav {
    display: flex;
    overflow-x: auto;
    padding-bottom: 4px;
    gap: 8px;
    -webkit-overflow-scrolling: touch;
  }

  .pidd-nav__btn {
    white-space: nowrap;
    background: #f1f6fb;
    flex: 0 0 auto;
  }

  .pidd-main {
    padding: 16px 14px 20px;
  }

  .pidd-block {
    padding: 14px 14px;
  }

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

  .pidd-footer {
    padding: 12px 14px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }

  .pidd-footer__note {
    display: none;
  }

  .pidd-footer__actions {
    width: 100%;
  }

  .pidd-footer__actions .admin-btn {
    flex: 1;
  }
}

/* ------------------------------------------------------------------ */
/* Add-installation dialog: type-keuze (Stap 1) – pia-typecard        */
/* ------------------------------------------------------------------ */
.pia-typecard {
  background: linear-gradient(180deg, #f9fbff 0%, #ffffff 100%);
  border: 1px solid #e5eaf3;
  border-radius: 18px;
  padding: 20px 20px 18px;
  box-shadow: 0 8px 22px rgba(22, 63, 134, 0.05);
}

dialog.admin-dialog-native .admin-modal__section.pia-typecard,
.admin-modal--project-add form > .admin-modal__section.pia-typecard {
  border-bottom: 0 !important;
  padding: 20px 20px 18px !important;
  margin: 0 0 14px !important;
}

dialog.admin-dialog-native .admin-modal__section.pia-typecard:last-of-type,
.admin-modal--project-add form > .admin-modal__section.pia-typecard:last-of-type {
  margin-bottom: 0 !important;
}

.pia-typecard__head {
  margin-bottom: 16px;
}

.pia-typecard__eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 999px;
  background: #eef5ff;
  color: #163f86;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  margin-bottom: 10px;
}

.pia-typecard__title {
  margin: 0 0 4px !important;
  color: #14213d;
  font-size: 18px !important;
  letter-spacing: -0.2px;
}

.pia-typecard__lede {
  margin: 0;
  color: #6b7280;
  font-size: 13px;
  line-height: 1.5;
}

.pia-typecard__preview {
  margin-top: 14px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, #f7faff, #fff8ef);
  border: 1px solid #edf1f7;
}

.pia-typecard__preview--ready {
  background: linear-gradient(135deg, #eef7ff, #f0fbf3);
  border-color: #d8eede;
}

.pia-typecard__preview-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #ffffff;
  display: grid;
  place-items: center;
  font-size: 18px;
  box-shadow: 0 6px 14px rgba(22, 63, 134, 0.08);
  flex: 0 0 auto;
}

.pia-typecard__preview-body {
  min-width: 0;
  flex: 1 1 auto;
}

.pia-typecard__preview-body strong {
  display: block;
  color: #14213d;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
}

.pia-typecard__preview-body p {
  margin: 4px 0 0;
  color: #4b5563;
  font-size: 12.5px;
  line-height: 1.45;
}

@media (max-width: 680px) {
  .pia-typecard {
    padding: 16px;
    border-radius: 14px;
  }

  .pia-typecard__preview {
    padding: 12px;
  }
}

/* Detail-modal: pia-typecard binnen pidd-block wordt 'plat' zodat we geen
   dubbele card-stijl krijgen (pidd-block levert al border/background). */
#project-installation-detail-dialog .pidd-block .pia-typecard,
#project-installation-detail-dialog .pidd-block .admin-modal__section.pia-typecard {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

#project-installation-detail-dialog .pidd-block .pia-typecard__head {
  margin-bottom: 10px;
}

#project-installation-detail-dialog .pidd-block .pia-typecard__eyebrow {
  display: none;
}

#project-installation-detail-dialog .pidd-block .pia-typecard__title {
  font-size: 15px !important;
  font-weight: 700;
  color: #14213d;
}

#project-installation-detail-dialog .pidd-block .pia-typecard__lede {
  font-size: 12.5px;
  margin-top: 2px;
}

#project-installation-detail-dialog .pidd-block .pia-typecard__preview {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
}

#project-installation-detail-dialog .pidd-block .pia-typecard__preview-icon {
  width: 32px;
  height: 32px;
  font-size: 16px;
  border-radius: 10px;
}

/* Categorie + installatietype onder elkaar zetten (selects zijn te klein in 2 kolommen). */
#project-installation-detail-dialog .pidd-block .pia-typecard .admin-form-grid {
  grid-template-columns: 1fr;
  gap: 12px;
}

/* ------------------------------------------------------------------ */
/* Maintenance certificate (Onderhoudsattest) – pidd-cert             */
/* ------------------------------------------------------------------ */
.pidd-cert {
  display: grid;
  gap: 14px;
  margin: 8px 0 4px;
}

.pidd-cert__section {
  background: #ffffff;
  border: 1px solid #dbe3ee;
  border-radius: 18px;
  padding: 18px 18px 16px;
  box-shadow: 0 8px 22px rgba(23, 32, 51, 0.04);
}

.pidd-cert__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-bottom: 1px solid #e3ebf5;
  padding-bottom: 12px;
  margin-bottom: 14px;
}

.pidd-cert__num {
  width: 32px;
  height: 32px;
  border-radius: 11px;
  background: #eef4ff;
  color: var(--pidd-primary, #163f86);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 14px;
  flex: 0 0 auto;
  letter-spacing: -0.3px;
}

.pidd-cert__title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: #0f1a2e;
  line-height: 1.2;
}

.pidd-cert__lede {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 12.5px;
  line-height: 1.45;
}

.pidd-cert__grid {
  display: grid;
  gap: 12px;
}

.pidd-cert__grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pidd-cert__grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pidd-cert__row {
  margin-top: 14px;
}

.pidd-cert__row label,
.pidd-cert__grid label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 6px;
}

.pidd-cert__section input[type="text"],
.pidd-cert__section input[type="date"],
.pidd-cert__section input[type="time"],
.pidd-cert__section input[type="file"],
.pidd-cert__section select,
.pidd-cert__section textarea {
  width: 100%;
  border: 1px solid #dbe3ee;
  background: #fbfdff;
  border-radius: 12px;
  padding: 10px 12px;
  font: inherit;
  font-size: 13.5px;
  color: #172033;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.pidd-cert__section textarea {
  min-height: 90px;
  resize: vertical;
}

.pidd-cert__section input:focus,
.pidd-cert__section select:focus,
.pidd-cert__section textarea:focus {
  border-color: var(--pidd-primary, #163f86);
  box-shadow: 0 0 0 4px rgba(22, 63, 134, 0.10);
  background: #ffffff;
}

.pidd-cert__checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.pidd-cert__check {
  border: 1px solid #dbe3ee;
  border-radius: 14px;
  padding: 10px 12px;
  background: #fbfdff;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #172033;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.pidd-cert__check:hover {
  border-color: #b7c7df;
  background: #f3f7fc;
}

.pidd-cert__check input[type="checkbox"] {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  accent-color: var(--pidd-primary, #163f86);
  cursor: pointer;
}

.pidd-cert__check:has(input[type="checkbox"]:checked) {
  background: #eef4ff;
  border-color: #b7c7df;
  color: #0f1a2e;
}

.pidd-cert__results {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.pidd-cert__result {
  position: relative;
  border: 1px solid #dbe3ee;
  border-radius: 16px;
  padding: 12px 14px;
  background: #fbfdff;
  cursor: pointer;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  min-height: 80px;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.pidd-cert__result:hover {
  border-color: #b7c7df;
}

.pidd-cert__result input[type="radio"] {
  width: 17px;
  height: 17px;
  margin-top: 2px;
  flex: 0 0 auto;
  accent-color: var(--pidd-primary, #163f86);
  cursor: pointer;
}

.pidd-cert__result > span {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}

.pidd-cert__result strong {
  display: block;
  font-size: 13.5px;
  color: #0f1a2e;
  font-weight: 800;
  margin-bottom: 2px;
}

.pidd-cert__result em {
  display: block;
  font-style: normal;
  color: #64748b;
  font-size: 12px;
  line-height: 1.4;
}

.pidd-cert__result:has(input[type="radio"]:checked) {
  border-color: var(--pidd-primary, #163f86);
  background: #eef4ff;
  box-shadow: 0 0 0 3px rgba(22, 63, 134, 0.08);
}

.pidd-cert__signature {
  min-height: 70px !important;
  border-style: dashed !important;
  border-color: #cbd5e1 !important;
  background: #fbfdff !important;
  text-align: left;
  font-style: italic;
  color: #475569;
}

@media (max-width: 720px) {
  .pidd-cert__grid--2,
  .pidd-cert__grid--3 {
    grid-template-columns: 1fr;
  }

  .pidd-cert__checklist {
    grid-template-columns: 1fr;
  }

  .pidd-cert__results {
    grid-template-columns: 1fr;
  }

  .pidd-cert__head {
    gap: 10px;
  }

  .pidd-cert__num {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    font-size: 13px;
  }
}

/* === Onderhoudsfiche templates (admin) ===================== */

.mft-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 16px;
  margin-top: 12px;
}

/* === Categorie-accordeon (overzichtspagina) === */

.mft-categories {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.mft-cat {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

.mft-cat[open] {
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

.mft-cat__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.mft-cat__head::-webkit-details-marker { display: none; }

.mft-cat__head:hover {
  background: #f8fafc;
}

.mft-cat__chev {
  color: #94a3b8;
  font-size: 14px;
  transition: transform 0.15s ease;
}

.mft-cat[open] .mft-cat__chev {
  transform: rotate(90deg);
}

.mft-cat__title {
  font-size: 16px;
  font-weight: 650;
  color: #0f172a;
}

.mft-cat__meta {
  font-size: 12px;
  color: #64748b;
  white-space: nowrap;
}

.mft-cat__custom {
  color: #1d4ed8;
  font-weight: 600;
}

.mft-cat__body {
  padding: 4px 18px 16px;
  border-top: 1px solid #eef2f7;
  background: #fafbfd;
}

.mft-types {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mft-type {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px 14px;
}

.mft-type__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed #e5e7eb;
}

.mft-type__name {
  font-size: 14px;
  font-weight: 650;
  color: #0f172a;
}

.mft-type__fiches {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mft-fiche-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}

.mft-fiche-row__meta {
  font-size: 12px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mft-fiche-row__actions {
  display: flex;
  gap: 6px;
}

.mft-empty--inline {
  padding: 12px 0;
  font-size: 13px;
}

@media (max-width: 720px) {
  .mft-cat__head {
    padding: 12px 14px;
  }
  .mft-cat__body {
    padding: 4px 14px 14px;
  }
  .mft-fiche-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 8px 0;
    border-bottom: 1px dashed #f1f5f9;
  }
  .mft-fiche-row:last-child {
    border-bottom: 0;
  }
  .mft-fiche-row__actions {
    justify-content: flex-end;
  }
}

.mft-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 18px 18px 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mft-card__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 6px;
  border-bottom: 1px dashed #e5e7eb;
}

.mft-card__title {
  font-size: 16px;
  font-weight: 650;
  color: #0f172a;
  margin: 0;
}

.mft-card__sub {
  font-size: 13px;
  color: #64748b;
  margin: 0;
}

.mft-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mft-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "main status"
    "actions actions";
  align-items: center;
  gap: 8px 12px;
  padding: 10px 12px;
  border: 1px solid #eef2f7;
  border-radius: 10px;
  background: #fafbfd;
}

.mft-row__main {
  grid-area: main;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.mft-row__kind {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.mft-row__kind--maint {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
}

.mft-row__kind--defect {
  background: rgba(244, 63, 94, 0.12);
  color: #be123c;
}

.mft-row__textwrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mft-row__name {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mft-row__meta {
  font-size: 12px;
  color: #64748b;
}

.mft-row__status {
  grid-area: status;
  justify-self: end;
}

.mft-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.mft-badge--default {
  background: #eef2f7;
  color: #475569;
}

.mft-badge--custom {
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
}

.mft-row__actions {
  grid-area: actions;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

/* Edit page */

.mft-edit-main {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mft-edit-crumb {
  margin: 0 0 4px;
  font-size: 13px;
}

.mft-edit-back {
  color: #475569;
  text-decoration: none;
}

.mft-edit-back:hover {
  text-decoration: underline;
}

.mft-edit-pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: #eef2f7;
  color: #475569;
  margin-right: 4px;
}

.mft-edit-pill--maint {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
}

.mft-edit-pill--defect {
  background: rgba(244, 63, 94, 0.12);
  color: #be123c;
}

.mft-edit-pill--muted {
  background: rgba(15, 23, 42, 0.05);
  color: #64748b;
}

.mft-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Top toolbar with title & global open/close */
.mft-edit-toolbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px 16px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  margin-bottom: 16px;
}

.mft-edit-toolbar__back {
  color: #475569;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.mft-edit-toolbar__back:hover {
  text-decoration: underline;
}

.mft-edit-toolbar__title {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mft-edit-toolbar__title h1 {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mft-edit-toolbar__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mft-edit-toolbar__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.mft-section {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.mft-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.mft-section__title {
  font-size: 16px;
  font-weight: 650;
  margin: 0;
  color: #0f172a;
}

.mft-section__lede {
  font-size: 13px;
  color: #64748b;
  margin: 0 0 12px;
}

.mft-sections {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}

/* Section card (accordion) */
.mft-edit-section {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  transition: box-shadow 0.15s ease;
}

.mft-edit-section[data-collapsed="false"] {
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

.mft-edit-section__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
}

.mft-edit-section__toggle {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  background: none;
  border: 0;
  padding: 10px 8px;
  cursor: pointer;
  text-align: left;
  color: inherit;
  width: 100%;
  border-radius: 8px;
}

.mft-edit-section__toggle:hover {
  background: #f8fafc;
}

.mft-edit-section__toggle:focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.35);
  outline-offset: -2px;
}

.mft-edit-section__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #0f172a;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}

.mft-edit-section__head-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mft-edit-section__head-title {
  font-size: 14px;
  font-weight: 650;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mft-edit-section__head-sub {
  font-size: 12px;
  color: #64748b;
}

.mft-edit-section__chev {
  color: #94a3b8;
  font-size: 14px;
  transition: transform 0.2s ease;
}

.mft-edit-section[data-collapsed="false"] .mft-edit-section__chev {
  transform: rotate(180deg);
}

.mft-edit-section__head-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}

.mft-edit-section__body {
  padding: 4px 16px 16px;
  border-top: 1px solid #eef2f7;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* display:flex overschrijft anders het native [hidden]-attribuut */
.mft-edit-section__body[hidden],
.mft-edit-field__body[hidden],
.mft-edit-field__options[hidden],
[data-mft-placeholder-row][hidden] {
  display: none !important;
}

/* Icon buttons in section/field headers */
.mft-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #475569;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.mft-iconbtn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}

.mft-iconbtn:focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.35);
  outline-offset: 1px;
}

.mft-iconbtn--danger:hover {
  background: rgba(244, 63, 94, 0.08);
  border-color: rgba(244, 63, 94, 0.4);
  color: #be123c;
}

/* Form rows inside sections */
.mft-edit-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.mft-edit-row--3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.mft-edit-row label,
.mft-edit-options-head__label,
.mft-edit-fields-head__label {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  display: block;
  margin-bottom: 4px;
}

.mft-edit-row input[type="text"],
.mft-edit-row input[type="number"],
.mft-edit-row textarea,
.mft-edit-row select {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
}

.mft-edit-row textarea {
  resize: vertical;
}

.mft-edit-row input:focus,
.mft-edit-row textarea:focus,
.mft-edit-row select:focus {
  outline: 2px solid rgba(59, 130, 246, 0.35);
  outline-offset: 1px;
}

/* Fields wrapper */
.mft-edit-fields-wrap {
  background: #fafbfd;
  border: 1px dashed #e5e7eb;
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mft-edit-fields-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.mft-edit-fields-head__label {
  margin-bottom: 0 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 11px !important;
  color: #64748b !important;
}

.mft-edit-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Field row */
.mft-edit-field {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  transition: box-shadow 0.15s ease;
}

.mft-edit-field[data-collapsed="false"] {
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

.mft-edit-field__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 2px;
}

.mft-edit-field__toggle {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  padding: 8px 8px;
  cursor: pointer;
  text-align: left;
  color: inherit;
  width: 100%;
  border-radius: 8px;
}

.mft-edit-field__toggle:hover {
  background: #f8fafc;
}

.mft-edit-field__toggle:focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.35);
  outline-offset: -2px;
}

.mft-edit-field__handle {
  color: #94a3b8;
  font-size: 16px;
  cursor: grab;
}

.mft-edit-field__head-label {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mft-edit-field__head-pills {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.mft-edit-field__chev {
  color: #94a3b8;
  font-size: 13px;
  transition: transform 0.2s ease;
}

.mft-edit-field[data-collapsed="false"] .mft-edit-field__chev {
  transform: rotate(180deg);
}

.mft-edit-field__head-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}

.mft-edit-field__body {
  padding: 4px 14px 14px;
  border-top: 1px solid #eef2f7;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mft-edit-field__checkrow {
  display: flex;
  align-items: flex-end;
  padding-bottom: 8px;
}

.mft-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #475569;
  cursor: pointer;
}

/* Type/width/required pills */
.mft-pill {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.mft-pill--type {
  background: #eff6ff;
  color: #1d4ed8;
}

.mft-pill--width {
  background: #f1f5f9;
  color: #475569;
}

.mft-pill--req {
  background: rgba(244, 63, 94, 0.12);
  color: #be123c;
}

/* Options editor */
.mft-edit-field__options {
  background: #f8fafc;
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mft-edit-options-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.mft-edit-options-hint {
  font-size: 12px;
  color: #64748b;
  margin: 0;
}

.mft-edit-options-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mft-edit-option {
  display: grid;
  grid-template-columns: auto 1.5fr 1fr auto;
  gap: 6px;
  align-items: center;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 6px 8px;
}

.mft-edit-option__handle {
  color: #cbd5e1;
  font-size: 14px;
  cursor: grab;
}

.mft-edit-option input[type="text"] {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 13px;
  font-family: inherit;
}

.mft-edit-option input[type="text"]:focus {
  outline: 2px solid rgba(59, 130, 246, 0.35);
  outline-offset: 1px;
}

.mft-edit-option__value input {
  color: #475569;
  background: #fafbfd;
}

/* Advanced disclosures */
.mft-advanced {
  border-top: 1px dashed #e5e7eb;
  padding-top: 8px;
  margin-top: 2px;
}

.mft-advanced summary {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  padding: 4px 0;
  list-style: none;
}

.mft-advanced summary::-webkit-details-marker { display: none; }

.mft-advanced summary::before {
  content: '▸ ';
  display: inline-block;
  margin-right: 4px;
  transition: transform 0.15s ease;
}

.mft-advanced[open] summary::before {
  transform: rotate(90deg);
}

.mft-advanced .admin-form-group {
  margin-top: 6px;
}

.mft-advanced label {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  display: block;
  margin-bottom: 4px;
}

.mft-advanced input[type="text"] {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: #fafbfd;
}

/* Add buttons */
.mft-add-btn-block {
  display: flex;
  justify-content: center;
  gap: 6px;
  width: 100%;
  background: #fff;
  border: 1px dashed #cbd5e1;
  color: #475569;
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.mft-add-btn-block:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f172a;
}

.mft-add-btn-block--lg {
  padding: 14px;
  font-size: 14px;
  margin-top: 6px;
}

.mft-add-btn-sm {
  background: #fff;
  border: 1px solid #cbd5e1;
  color: #475569;
  border-radius: 8px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}

.mft-add-btn-sm:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.mft-empty {
  text-align: center;
  color: #64748b;
  padding: 24px 0;
  margin: 0;
}

.mft-form__footer {
  position: sticky;
  bottom: 0;
  background: linear-gradient(to top, #fff 70%, rgba(255, 255, 255, 0.6));
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 0 4px;
  margin-top: 4px;
  border-top: 1px solid #e5e7eb;
  z-index: 5;
}

@media (max-width: 720px) {
  .mft-edit-toolbar {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .mft-edit-toolbar__actions {
    justify-content: flex-start;
  }
  .mft-edit-section__toggle {
    grid-template-columns: auto 1fr auto;
    gap: 8px;
  }
  .mft-edit-field__toggle {
    grid-template-columns: auto 1fr auto;
    gap: 6px;
    padding: 8px 4px;
  }
  .mft-edit-field__head-pills {
    grid-column: 1 / -1;
    margin-top: 2px;
    flex-wrap: wrap;
  }
  .mft-edit-row--3 {
    grid-template-columns: 1fr;
  }
  .mft-edit-option {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "handle remove"
      "label  label"
      "value  value";
    gap: 4px;
  }
  .mft-edit-option__handle { grid-area: handle; }
  .mft-edit-option__label { grid-area: label; }
  .mft-edit-option__value { grid-area: value; }
  .mft-edit-option [data-mft-remove-option] { grid-area: remove; justify-self: end; }
  .mft-row {
    grid-template-areas:
      "main main"
      "status status"
      "actions actions";
  }
  .mft-row__status {
    justify-self: start;
  }
}

/* ------------------------------------------------------------------ */
/* Dynamische onderhouds-/defectfiche (templates uit admin)            */
/* ------------------------------------------------------------------ */
.pidd-fiche-host { display: block; }
.pidd-fiche-host[hidden] { display: none !important; }

.pidd-fiche {
  display: grid;
  gap: 14px;
  margin: 8px 0 4px;
}

.pidd-fiche__section {
  background: #ffffff;
  border: 1px solid #dbe3ee;
  border-radius: 18px;
  padding: 18px 18px 16px;
  box-shadow: 0 8px 22px rgba(23, 32, 51, 0.04);
}

.pidd-fiche__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.pidd-fiche__num {
  flex: 0 0 28px;
  height: 28px;
  border-radius: 999px;
  background: #eef2ff;
  color: #1d3a8a;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}

.pidd-fiche__title {
  margin: 0;
  font-size: 1rem;
  color: #11203a;
}

.pidd-fiche__lede {
  margin: 2px 0 0;
  color: #5a6679;
  font-size: 0.85rem;
}

.pidd-fiche__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px 14px;
}

.pidd-fiche__col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.pidd-fiche__col--full  { grid-column: span 12; }
.pidd-fiche__col--half  { grid-column: span 6; }
.pidd-fiche__col--third { grid-column: span 4; }

@media (max-width: 720px) {
  .pidd-fiche__col--half,
  .pidd-fiche__col--third { grid-column: span 12; }
}

.pidd-fiche__col label {
  font-weight: 600;
  color: #11203a;
  font-size: 0.85rem;
}

.pidd-fiche__col input[type='text'],
.pidd-fiche__col input[type='number'],
.pidd-fiche__col input[type='date'],
.pidd-fiche__col input[type='time'],
.pidd-fiche__col input[type='file'],
.pidd-fiche__col select,
.pidd-fiche__col textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid #cbd5e2;
  border-radius: 10px;
  font: inherit;
  color: #11203a;
  background: #fff;
  min-width: 0;
}

.pidd-fiche__col textarea {
  resize: vertical;
  min-height: 64px;
}

.pidd-fiche__group-label {
  font-weight: 600;
  color: #11203a;
  font-size: 0.85rem;
  display: block;
  margin-bottom: 6px;
}

.pidd-fiche__checks,
.pidd-fiche__radios {
  display: grid;
  gap: 6px;
}

.pidd-fiche__check,
.pidd-fiche__radio {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid #e3e8ef;
  border-radius: 10px;
  background: #fafbfd;
  cursor: pointer;
}

.pidd-fiche__check input,
.pidd-fiche__radio input { margin-top: 3px; }

.pidd-fiche__radio-text {
  display: grid;
  gap: 2px;
}

.pidd-fiche__radio-desc {
  color: #5a6679;
  font-size: 0.8rem;
}

.pidd-fiche__hint {
  display: block;
  margin-top: 4px;
  color: #6b7a99;
  font-size: 0.78rem;
}

.pidd-fiche__signrow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px dashed #cbd5e2;
  border-radius: 10px;
  background: #fafbfd;
}

/* ===== Handtekening (profiel + user-edit) ===== */
.admin-signature-card {
  margin-top: 20px;
}

.admin-signature-current {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}

.admin-signature-current__label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7a99;
}

.admin-signature-current__frame {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 360px;
  min-height: 90px;
  padding: 12px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background:
    repeating-linear-gradient(45deg, #fbfcfe, #fbfcfe 10px, #f4f7fb 10px, #f4f7fb 20px);
}

.admin-signature-current__frame img {
  max-width: 100%;
  max-height: 120px;
  height: auto;
}

.admin-signature-pad {
  position: relative;
  border: 1.5px dashed #c5d0e2;
  border-radius: 12px;
  background: #ffffff;
  overflow: hidden;
}

.admin-signature-pad__canvas {
  display: block;
  width: 100%;
  height: 180px;
  touch-action: none;
  cursor: crosshair;
}

.admin-signature-pad__hint {
  position: absolute;
  left: 14px;
  bottom: 10px;
  font-size: 0.8rem;
  color: #aab6cc;
  pointer-events: none;
}

.admin-signature-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.admin-signature-upload {
  display: inline-flex;
  cursor: pointer;
}

.admin-signature-upload__name {
  font-size: 0.85rem;
  color: #475569;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-signature-remove-form {
  margin: 0;
}

/* —— Offertes & facturen —— */
.admin-billing-table .num,
.admin-billing-lines-table .num {
  text-align: right;
  white-space: nowrap;
}

.admin-billing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-billing-lines-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-billing-lines-table th,
.admin-billing-lines-table td {
  padding: 8px 6px;
  border-bottom: 1px solid #e8edf5;
  vertical-align: middle;
}

.admin-billing-lines-table th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #5c6b82;
  text-align: left;
}

.admin-billing-input {
  width: 100%;
  border: 1px solid #dbe3ef;
  background: #fff;
  border-radius: 10px;
  padding: 9px 11px;
  font-size: 0.92rem;
  color: #17233c;
  font-family: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.admin-billing-input:focus {
  outline: none;
  border-color: #4f7cff;
  box-shadow: 0 0 0 4px rgba(79, 124, 255, 0.12);
}

/* —— Rich-text editor —— */
.admin-rte {
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.admin-rte:focus-within {
  border-color: #4f7cff;
  box-shadow: 0 0 0 4px rgba(79, 124, 255, 0.12);
}

.admin-rte__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  background: #f6f8fc;
  border-bottom: 1px solid #e4eaf3;
}

.admin-rte__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #4a5670;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.admin-rte__btn:hover {
  background: #fff;
  border-color: #d3ddee;
  color: #1f2a44;
}

.admin-rte__btn:active {
  background: #e9eefb;
  color: #2f4ad0;
}

.admin-rte__sep {
  width: 1px;
  align-self: stretch;
  margin: 4px 4px;
  background: #d8e0ee;
}

.admin-rte__editor {
  min-height: 120px;
  padding: 12px 14px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #17233c;
  outline: none;
}

.admin-rte__editor:focus {
  outline: none;
}

.admin-rte__editor.is-empty::before {
  content: attr(data-placeholder);
  color: #9aa7bd;
  pointer-events: none;
}

.admin-rte__editor p {
  margin: 0 0 8px;
}

.admin-rte__editor p:last-child {
  margin-bottom: 0;
}

.admin-rte__editor ul,
.admin-rte__editor ol {
  margin: 8px 0;
  padding-left: 22px;
}

.admin-rte__editor a {
  color: #2563eb;
}

/* Weergave van opgemaakte tekst (offerte/factuur bekijken) */
.admin-billing-rich p {
  margin: 0 0 8px;
}

.admin-billing-rich p:last-child {
  margin-bottom: 0;
}

.admin-billing-rich ul,
.admin-billing-rich ol {
  margin: 8px 0;
  padding-left: 22px;
}

.admin-billing-rich a {
  color: #2563eb;
}

/* —— Offerte/Factuur detail (nieuw design) —— */
.billing-detail {
  --bd-dark: #0d1b3d;
  --bd-blue: #2563eb;
  --bd-soft: #f5f8fc;
  --bd-line: #e5edf7;
  --bd-text: #14213d;
  --bd-muted: #7b8aa0;
  --bd-green: #10b981;
  --bd-red: #ef4444;
  color: var(--bd-text);
}

.billing-detail .bd-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.billing-detail .bd-header__heading {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--bd-text);
}
.billing-detail .bd-header__heading i { color: var(--bd-blue); font-size: 16px; }
.billing-detail .bd-header__title h1 {
  margin: 0;
  font-size: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.billing-detail .bd-header__title h1 i { color: var(--bd-blue); }
.billing-detail .bd-header__title span {
  color: var(--bd-muted);
  font-size: 14px;
}
.billing-detail .bd-header__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}
.billing-detail .bd-header__actions .bd-prep-inline-form {
  margin: 0;
  display: inline-flex;
}
.billing-detail.bd-prep-page .bd-prep-page-head .bd-header__actions {
  max-width: none;
  flex-shrink: 0;
}
.billing-detail.bd-invoice-page .bd-prep-page-head .bd-header__actions {
  max-width: none;
  flex-shrink: 0;
}
.billing-detail .bd-quote-head-actions {
  gap: 8px;
}
.billing-detail .bd-quote-menu {
  position: relative;
}
.billing-detail .bd-quote-menu__toggle--icon {
  padding: 11px 13px;
  min-width: 42px;
}
.billing-detail .bd-quote-menu__chev {
  font-size: 11px;
  opacity: 0.75;
}
.billing-detail .bd-quote-menu__panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  min-width: 220px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--bd-line);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
}
.billing-detail .bd-quote-menu__label {
  margin: 4px 10px 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bd-muted);
}
.billing-detail .bd-quote-menu__sep {
  height: 1px;
  margin: 6px 4px;
  background: var(--bd-line);
}
.billing-detail .bd-quote-menu__form {
  margin: 0;
}
.billing-detail .bd-quote-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--bd-dark);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.3;
}
.billing-detail .bd-quote-menu__item i {
  width: 16px;
  text-align: center;
  color: var(--bd-muted);
  flex-shrink: 0;
}
.billing-detail .bd-quote-menu__item:hover,
.billing-detail .bd-quote-menu__item:focus-visible {
  background: #f1f5f9;
  outline: none;
}
.billing-detail .bd-quote-menu__item--danger {
  color: #b91c1c;
}
.billing-detail .bd-quote-menu__item--danger i {
  color: #ef4444;
}

/* Knoppen */
.billing-detail .bd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  padding: 11px 16px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  transition: filter .15s ease, background .15s ease;
}
.billing-detail .bd-btn:hover { filter: brightness(0.96); }
.billing-detail .bd-btn-dark { background: var(--bd-dark); color: #fff; }
.billing-detail .bd-btn-light { background: #fff; color: var(--bd-dark); border: 1px solid var(--bd-line); }
.billing-detail .bd-btn-blue { background: var(--bd-blue); color: #fff; }
.billing-detail .bd-btn-green { background: var(--bd-green); color: #fff; }
.billing-detail .bd-btn-danger { background: #fff; color: var(--bd-red); border: 1px solid #fecaca; }
.billing-detail .bd-btn-danger:hover { background: var(--bd-red); color: #fff; border-color: var(--bd-red); }
.billing-detail .bd-btn-sm { padding: 8px 12px; font-size: 13px; border-radius: 10px; }
.billing-detail .bd-btn-primary { background: var(--bd-blue); color: #fff; }
.billing-detail .bd-btn-soft { background: #eff6ff; color: var(--bd-blue); }
.billing-detail .bd-btn--lost { background: #fff; color: #b91c1c; border: 1px solid #fecaca; }
.billing-detail .bd-btn--lost:hover { background: #fef2f2; }
.billing-detail .bd-btn--status { cursor: default; pointer-events: none; }
.billing-detail .bd-btn--lost-status { background: #fef2f2; color: #b91c1c; }
.billing-detail .bd-header__delete { margin: 0; }

/* —— Offertevoorbereiding (mockup layout) —— */
.billing-detail.bd-prep-page {
  --bd-prep-bg: #f6f8fb;
}
.admin-page--offerte-view .admin-content {
  background: var(--bd-prep-bg, #f6f8fb);
}
.billing-detail.bd-prep-page .bd-prep-page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.billing-detail.bd-prep-page .bd-prep-page-head__title {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  color: var(--bd-dark);
}
.billing-detail.bd-prep-page .bd-prep-page-head__sub {
  margin: 6px 0 0;
  color: var(--bd-muted);
  font-size: 14px;
}
.billing-detail .bd-prep-page-head__audit {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  color: var(--bd-muted);
  font-size: 13px;
}
.billing-detail .bd-prep-page-head__audit i {
  color: var(--bd-blue);
  font-size: 12px;
}
.billing-detail.bd-invoice-page .bd-prep-page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.billing-detail.bd-invoice-page .bd-prep-page-head__title {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  color: var(--bd-dark);
}
.billing-detail.bd-invoice-page .bd-prep-page-head__sub {
  margin: 6px 0 0;
  color: var(--bd-muted);
  font-size: 14px;
}
.billing-detail.bd-invoice-page .bd-prep-page-head__audit {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  color: var(--bd-muted);
  font-size: 13px;
}
.billing-detail.bd-invoice-page .bd-prep-page-head__audit i {
  color: var(--bd-blue);
  font-size: 12px;
}
.billing-detail.bd-invoice-page .bd-invoice-billit-alert {
  margin: -8px 0 16px;
}
.billing-detail .bd-quote-track-wrap {
  width: 100%;
  margin: 0 0 22px;
  padding: 18px 22px 14px;
  background: #fff;
  border: 1px solid var(--bd-line);
  border-radius: 16px;
  box-sizing: border-box;
  overflow-x: auto;
}
.billing-detail .bd-quote-track {
  position: relative;
  min-width: 640px;
  height: 92px;
}
.billing-detail .bd-quote-track__rail {
  position: absolute;
  left: 28px;
  right: 28px;
  top: 46px;
  height: 2px;
  background: #e2e8f0;
  border-radius: 1px;
  z-index: 0;
}
.billing-detail .bd-quote-track__rail-fill {
  height: 100%;
  background: #2bb8c9;
  border-radius: 1px;
  transition: width 0.25s ease;
}
.billing-detail .bd-quote-track__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  height: 100%;
  position: relative;
  z-index: 1;
}
.billing-detail .bd-quote-track__step {
  flex: 1 1 0;
  min-width: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.billing-detail .bd-quote-track__slot {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  min-height: 0;
  padding: 0 4px;
  box-sizing: border-box;
}
.billing-detail .bd-quote-track__slot--below {
  justify-content: flex-start;
}
.billing-detail .bd-quote-track__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #cbd5e1;
  flex-shrink: 0;
  margin: -1px 0;
  box-sizing: border-box;
}
.billing-detail .bd-quote-track__label {
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  line-height: 1.25;
  max-width: 100%;
}
.billing-detail .bd-quote-track__date {
  margin-top: 3px;
  font-size: 11px;
  color: #b0bac9;
  line-height: 1.2;
}
.billing-detail .bd-quote-track__date--pill {
  display: inline-block;
  margin-top: 5px;
  padding: 2px 8px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 11px;
}
.billing-detail .bd-quote-track__step.is-done .bd-quote-track__dot {
  background: #2bb8c9;
  border-color: #2bb8c9;
}
.billing-detail .bd-quote-track__step.is-done .bd-quote-track__label {
  color: #475569;
}
.billing-detail .bd-quote-track__step.is-done .bd-quote-track__date {
  color: #64748b;
}
.billing-detail .bd-quote-track__step.is-current .bd-quote-track__dot {
  width: 14px;
  height: 14px;
  border-color: #2bb8c9;
  box-shadow: 0 0 0 5px rgba(43, 184, 201, 0.22);
}
.billing-detail .bd-quote-track__step.is-current .bd-quote-track__label {
  color: #0f172a;
  font-weight: 700;
}
.billing-detail .bd-quote-track__step--success.is-done .bd-quote-track__dot,
.billing-detail .bd-quote-track__step--success.is-current .bd-quote-track__dot {
  background: #0f9d58;
  border-color: #0f9d58;
}
.billing-detail .bd-quote-track__step--success.is-current .bd-quote-track__dot {
  box-shadow: 0 0 0 5px rgba(15, 157, 88, 0.2);
}
.billing-detail .bd-quote-track__step--danger.is-done .bd-quote-track__dot,
.billing-detail .bd-quote-track__step--danger.is-current .bd-quote-track__dot {
  background: #d64545;
  border-color: #d64545;
}
.billing-detail .bd-quote-track__step--danger.is-current .bd-quote-track__dot {
  box-shadow: 0 0 0 5px rgba(214, 69, 69, 0.2);
}
.billing-detail .bd-quote-track__step--success + .bd-quote-track__step .bd-quote-track__rail-fill,
.billing-detail .bd-quote-track-wrap:has(.bd-quote-track__step--success.is-current) .bd-quote-track__rail-fill {
  background: #0f9d58;
}
.billing-detail .bd-quote-track-wrap:has(.bd-quote-track__step--danger.is-current) .bd-quote-track__rail-fill {
  background: #d64545;
}
.billing-detail .bd-grid--prep {
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 22px;
}
.billing-detail .bd-prep { min-width: 0; }
.billing-detail .bd-prep-project {
  margin-bottom: 18px;
  padding: 20px;
}
.billing-detail .bd-prep-project__top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}
.billing-detail .bd-prep-badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
}
.billing-detail .bd-prep-project__title {
  margin: 8px 0;
  font-size: 22px;
  color: var(--bd-dark);
}
.billing-detail .bd-prep-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--bd-muted);
  font-size: 14px;
}
.billing-detail .bd-prep-meta i { color: var(--bd-blue); margin-right: 4px; }
.billing-detail .bd-prep-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--bd-line);
}
.billing-detail .bd-prep-tabs-wrap {
  min-width: 0;
}
.billing-detail .bd-prep-tabs {
  margin-bottom: 18px;
}
.billing-detail .bd-prep-tab-panel {
  display: none;
}
.billing-detail .bd-prep-tab-panel.active {
  display: block;
}
.billing-detail .bd-prep-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.billing-detail [data-prep-layout-toggle][hidden] {
  display: none !important;
}
.billing-detail .bd-prep-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
}
.billing-detail .bd-prep-card[data-prep-span="4"] { grid-column: span 4; }
.billing-detail .bd-prep-card[data-prep-span="6"] { grid-column: span 6; }
.billing-detail .bd-prep-card[data-prep-span="8"] { grid-column: span 8; }
.billing-detail .bd-prep-card[data-prep-span="12"] { grid-column: span 12; }
.billing-detail .bd-prep-card[hidden] {
  display: none !important;
}
.bd-prep-layout-editbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 10px 18px;
  border-top: 1px solid #e2e8f0;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  box-shadow: 0 -1px 0 rgba(15, 23, 42, 0.04);
}
.bd-prep-layout-editbar[hidden] {
  display: none !important;
}
.bd-prep-layout-editbar:not([hidden]) {
  position: fixed;
  bottom: 0;
  z-index: 250;
  margin: 0;
  box-sizing: border-box;
}
body.is-prep-layout-editing .admin-content {
  padding-bottom: var(--prep-editbar-pad, 56px);
}
.bd-prep-layout-editbar__hint {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  letter-spacing: 0.01em;
}
.bd-prep-layout-editbar__actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
}
.bd-prep-layout-editbar__btn {
  padding: 6px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  line-height: 1.2;
}
.bd-prep-layout-editbar__btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}
.bd-prep-layout-editbar__btn--primary {
  border-color: #334155;
  background: #334155;
  color: #fff;
}
.bd-prep-layout-editbar__btn--primary:hover {
  border-color: #1e293b;
  background: #1e293b;
  color: #fff;
}
.bd-prep-layout-hidden {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding-top: 2px;
}
.bd-prep-layout-hidden__label {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.bd-prep-layout-hidden__btn {
  padding: 3px 8px;
  border: none;
  border-radius: 6px;
  background: #f1f5f9;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
}
.bd-prep-layout-hidden__btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}
.billing-detail .bd-prep.is-prep-layout-editing .bd-prep-card:not([hidden]) {
  position: relative;
  z-index: 1;
  outline: 2px dashed #93c5fd;
  outline-offset: 3px;
  cursor: default;
}
.billing-detail .bd-prep.is-prep-layout-editing .bd-prep-card:not([hidden]) > :not([data-prep-layout-chrome]) {
  pointer-events: none;
  user-select: none;
}
.billing-detail .bd-prep.is-prep-layout-editing .bd-prep-card.is-prep-dragging {
  opacity: 0.45;
  outline-color: #2563eb;
}
.billing-detail .bd-prep.is-prep-layout-editing .bd-prep-card.is-prep-drop-target {
  outline-color: #16a34a;
  outline-style: solid;
}
.billing-detail .bd-prep.is-prep-layout-editing .bd-prep-card.is-prep-resizing {
  outline-color: #2563eb;
  outline-style: solid;
}
.billing-detail .bd-prep-layout-chrome {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  border-radius: inherit;
}
.billing-detail .bd-prep-layout-chrome__drag,
.billing-detail .bd-prep-layout-chrome__hide,
.billing-detail .bd-prep-layout-chrome__resize {
  pointer-events: auto;
}
.billing-detail .bd-prep-layout-chrome__drag {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  color: #64748b;
  cursor: grab;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}
.billing-detail .bd-prep-layout-chrome__drag:active {
  cursor: grabbing;
}
.billing-detail .bd-prep-layout-chrome__label {
  position: absolute;
  top: 14px;
  left: 46px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  pointer-events: none;
}
.billing-detail .bd-prep-layout-chrome__hide {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  color: #64748b;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}
.billing-detail .bd-prep-layout-chrome__hide:hover {
  color: #dc2626;
  border-color: #fecaca;
}
.billing-detail .bd-prep-layout-chrome__resize {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 18px;
  height: 18px;
  border-right: 3px solid #2563eb;
  border-bottom: 3px solid #2563eb;
  border-radius: 0 0 4px 0;
  cursor: nwse-resize;
  opacity: 0.85;
}
.billing-detail .bd-prep-layout-chrome__resize:hover {
  opacity: 1;
}
body.is-prep-layout-resizing {
  cursor: nwse-resize;
  user-select: none;
}
body.is-prep-layout-resizing * {
  cursor: nwse-resize !important;
}
.billing-detail [data-prep-layout-toggle].is-active {
  border-color: #cbd5e1;
  background: #f8fafc;
  color: #0f172a;
}

.billing-detail .bd-prep-card {
  padding: 18px 20px;
  border-radius: 18px;
}
.billing-detail .bd-prep-card--wide { grid-column: 1 / -1; }
.billing-detail .bd-prep-card--full { grid-column: 1 / -1; }
.billing-detail .bd-prep-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.billing-detail .bd-prep-card__head h3 {
  margin: 0;
  font-size: 17px;
  color: var(--bd-dark);
}
.billing-detail .bd-prep-card__head-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.billing-detail .bd-prep-card__head-text {
  min-width: 0;
}
.billing-detail .bd-prep-card__sub {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--bd-muted);
  font-weight: 500;
}
.billing-detail .bd-prep-card--notes {
  display: flex;
  flex-direction: column;
}
.billing-detail .bd-prep-card__head--notes {
  align-items: flex-start;
}
.billing-detail .bd-prep-notes-form {
  flex: 1;
  min-height: 0;
}
.billing-detail .bd-prep-notes-panel {
  border-radius: 14px;
  background: linear-gradient(180deg, #fafbfc 0%, #f8fafc 100%);
  border: 1px solid #e8edf3;
  overflow: hidden;
}
.billing-detail .bd-prep-notes-panel--readonly {
  padding: 16px 18px;
}
.billing-detail .bd-prep-card .admin-rte--site-notes {
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.billing-detail .bd-prep-card .admin-rte--site-notes:focus-within {
  box-shadow: none;
}
.billing-detail .bd-prep-notes__body {
  min-height: 160px;
  max-height: 320px;
  overflow-y: auto;
  padding: 16px 18px 12px;
  font-size: 14px;
  line-height: 1.65;
  color: #1e293b;
  background: transparent;
}
.billing-detail .bd-prep-notes__body--readonly {
  min-height: 0;
  max-height: none;
  padding: 0;
}
.billing-detail .bd-prep-notes__body.is-empty::before {
  color: #94a3b8;
  font-style: italic;
}
.billing-detail .bd-prep-notes__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-top: 1px solid #e8edf3;
  background: rgba(255, 255, 255, 0.72);
}
.billing-detail .bd-prep-notes__toolbar {
  padding: 0;
  background: transparent;
  border: none;
  gap: 4px;
}
.billing-detail .bd-prep-notes__toolbar .admin-rte__btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: #64748b;
}
.billing-detail .bd-prep-notes__toolbar .admin-rte__btn:hover {
  background: #fff;
  border-color: #e2e8f0;
  color: #334155;
}
.billing-detail .bd-prep-notes__hint {
  font-size: 11px;
  color: #94a3b8;
  white-space: nowrap;
}
.billing-detail .bd-prep-notes__status {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
}
.billing-detail .bd-prep-notes__status.is-saving {
  color: #64748b;
}
.billing-detail .bd-prep-notes__status.is-saved {
  color: #16a34a;
}
.billing-detail .bd-prep-notes__status.is-error {
  color: #dc2626;
}
.billing-detail .bd-prep-link {
  color: var(--bd-blue);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
}
.billing-detail .bd-prep-link--btn {
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.billing-detail .bd-prep-empty,
.billing-detail .bd-prep-hint {
  margin: 0;
  color: var(--bd-muted);
  font-size: 13px;
}
.billing-detail .bd-prep-textarea,
.billing-detail .bd-prep-card textarea,
.billing-detail .bd-prep-card input[type="text"],
.billing-detail .bd-prep-card input[type="file"],
.billing-detail .bd-prep-card select {
  width: 100%;
  border: 1px solid var(--bd-line);
  border-radius: 13px;
  padding: 12px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: var(--bd-dark);
  box-sizing: border-box;
}
.billing-detail .bd-prep-card .admin-rte:not(.admin-rte--site-notes) {
  border: 1px solid var(--bd-line);
  border-radius: 13px;
  overflow: hidden;
}
.billing-detail .bd-prep-card .admin-rte__editor:not(.bd-prep-notes__body) {
  min-height: 120px;
  padding: 12px;
}
.billing-detail .bd-prep-photo-groups {
  display: grid;
  gap: 16px;
  margin-bottom: 14px;
}
.billing-detail .bd-prep-album-list {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}
.billing-detail .bd-prep-album-slot {
  display: block;
}
.billing-detail .bd-prep-album-row-wrap {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.billing-detail .bd-prep-album-row-wrap .bd-prep-album-row {
  flex: 1;
  min-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.billing-detail .bd-prep-album-row__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  border: 1px solid var(--bd-line);
  border-left: none;
  border-radius: 0 12px 12px 0;
  background: #fff;
}
.billing-detail .bd-prep-album-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  font-size: 12px;
}
.billing-detail .bd-prep-album-action:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.billing-detail .bd-prep-album-action--danger:hover {
  background: #fef2f2;
  color: #dc2626;
}
.billing-detail .bd-prep-album-row__rename {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  border: 1px solid #93b4fd;
  border-radius: 8px;
  padding: 4px 8px;
  background: #fff;
}
.billing-detail .bd-prep-album-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--bd-line);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.billing-detail .bd-prep-album-row:hover {
  border-color: #93b4fd;
  background: #f8fafc;
}
.billing-detail .bd-prep-album-row__name {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}
.billing-detail .bd-prep-album-row__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
}
.billing-detail .bd-prep-album-row__meta i {
  font-size: 11px;
  opacity: 0.7;
}
.bd-prep-album-dialog {
  max-width: min(920px, 96vw);
  padding: 0;
  border: none;
}
.bd-prep-album-dialog__inner {
  display: flex;
  flex-direction: column;
  max-height: min(88vh, 820px);
}
.bd-prep-album-dialog .admin-modal__body {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.bd-prep-album-dialog .bd-prep-photo-list {
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  margin-bottom: 12px;
}
.bd-prep-album-dialog .bd-prep-photo-form--inline {
  margin-top: 4px;
}
.billing-detail .bd-prep-photo-group {
  border: 1px solid var(--bd-line);
  border-radius: 16px;
  padding: 12px;
  background: #f8fafc;
}
.billing-detail .bd-prep-photo-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.billing-detail .bd-prep-photo-group__head h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
}
.billing-detail .bd-prep-photo-group__count {
  font-size: 12px;
  color: #64748b;
  font-weight: 600;
}
.billing-detail .bd-prep-photo-form--inline {
  margin-top: 8px;
}
.billing-detail .bd-prep-photo--add-sm {
  min-height: 72px;
  max-width: 140px;
}
.billing-detail .bd-prep-photo-album-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--bd-line);
}
.billing-detail .bd-prep-empty--inline {
  margin: 0 0 8px;
  font-size: 13px;
}
.billing-detail .bd-prep-photo-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}
.billing-detail .bd-prep-photo-item {
  display: grid;
  gap: 6px;
}
.billing-detail .bd-prep-photo {
  height: 96px;
  border-radius: 14px;
  border: 1px solid var(--bd-line);
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #f1f5f9;
  position: relative;
}
.billing-detail .bd-prep-photo--item {
  padding: 0;
}
.billing-detail .bd-prep-photo__link,
.billing-detail .bd-prep-photo__open {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.billing-detail .bd-prep-photo__open:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: -2px;
}
.billing-detail .bd-prep-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.billing-detail .bd-prep-photo__badge {
  position: absolute;
  left: 6px;
  top: 6px;
  max-width: calc(100% - 12px);
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.billing-detail .bd-prep-photo__annot {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
  display: grid;
  place-items: center;
  font-size: 10px;
  pointer-events: none;
}
.billing-detail .bd-prep-photo__notes {
  margin: 0;
  font-size: 12px;
  color: #64748b;
  line-height: 1.35;
}
.billing-detail .bd-prep-photo-delete {
  position: absolute;
  top: 6px;
  right: 6px;
  margin: 0;
  z-index: 2;
}
.billing-detail .bd-prep-photo-delete__btn {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.billing-detail .bd-prep-photo-delete__btn:hover {
  background: #b91c1c;
}
.billing-detail .bd-prep-photo-form {
  display: grid;
  gap: 10px;
}
.billing-detail .bd-prep-photo-upload-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
}
.billing-detail .bd-prep-field {
  display: grid;
  gap: 4px;
  min-width: 140px;
}
.billing-detail .bd-prep-field--grow {
  flex: 1 1 180px;
}
.billing-detail .bd-prep-field__label {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.billing-detail .bd-prep-field select,
.billing-detail .bd-prep-field input,
.billing-detail .bd-prep-field textarea {
  width: 100%;
  border: 1px solid var(--bd-line);
  border-radius: 10px;
  padding: 8px 10px;
  font: inherit;
  background: #fff;
}
.billing-detail .bd-prep-photo-status {
  margin: 0;
  font-size: 13px;
  color: #64748b;
}
.billing-detail .bd-prep-photo--add {
  background: #eff6ff;
  color: var(--bd-blue);
  font-weight: 900;
  font-size: 28px;
  cursor: pointer;
  flex-direction: column;
  gap: 2px;
  min-height: 96px;
}
.billing-detail .bd-prep-photo--add-label {
  font-size: 11px;
  font-weight: 700;
}
.billing-detail .bd-btn-xs {
  padding: 4px 8px;
  font-size: 11px;
}
.billing-detail .bd-btn-danger {
  color: #b91c1c;
}
.billing-detail .bd-prep-upload-form {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.billing-detail .bd-prep-file-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  gap: 8px;
}
.billing-detail .bd-prep-file-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid var(--bd-line);
  font-size: 13px;
}
.billing-detail .bd-prep-file-list a {
  color: var(--bd-dark);
  text-decoration: none;
  font-weight: 600;
}
.billing-detail .bd-prep-file-list button {
  border: 0;
  background: transparent;
  color: var(--bd-muted);
  font-size: 18px;
  cursor: pointer;
}
.billing-detail .bd-prep-file-upload {
  display: inline-block;
  cursor: pointer;
}
.billing-detail .bd-prep-file-upload input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}
.billing-detail .bd-prep-file-status {
  margin: 8px 0 0;
  font-size: 13px;
  color: #64748b;
}
.billing-detail .bd-prep-hint--inline {
  margin: 8px 0 0;
}
.billing-detail .bd-prep-quote-public-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.billing-detail .bd-prep-mode-toggle {
  display: inline-flex;
  padding: 3px;
  border-radius: 10px;
  background: #f1f5f9;
  border: 1px solid var(--bd-line);
}
.billing-detail .bd-prep-mode-toggle__btn {
  border: none;
  background: transparent;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
}
.billing-detail .bd-prep-mode-toggle__btn.is-active {
  background: #fff;
  color: #0f172a;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.billing-detail .bd-prep-quote-note {
  font-size: 14px;
  line-height: 1.5;
  color: #475569;
}
.billing-detail .bd-prep-checklist {
  display: grid;
  gap: 12px;
}
.billing-detail .bd-prep-checklist--ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 4px;
}
.billing-detail .bd-prep-checklist__tick {
  margin: 0;
}
.billing-detail .bd-prep-checklist__tick-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 4px;
  cursor: pointer;
  border-radius: 8px;
}
.billing-detail .bd-prep-checklist__tick-label:hover {
  background: #f8fafc;
}
.billing-detail .bd-prep-checklist__tick-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.billing-detail .bd-prep-checklist__tick-box {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border: 2px solid #cbd5e1;
  border-radius: 4px;
  background: #fff;
  position: relative;
  box-sizing: border-box;
}
.billing-detail .bd-prep-checklist__tick-input:checked + .bd-prep-checklist__tick-box {
  border-color: #2563eb;
  background: #2563eb;
}
.billing-detail .bd-prep-checklist__tick-input:checked + .bd-prep-checklist__tick-box::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.billing-detail .bd-prep-checklist__tick-text {
  flex: 1;
  font-size: 14px;
  line-height: 1.45;
  color: #0f172a;
}
.billing-detail .bd-prep-checklist__tick-input:checked ~ .bd-prep-checklist__tick-text {
  color: #64748b;
  text-decoration: line-through;
}
.billing-detail .bd-prep-checklist--readonly .bd-prep-checklist__tick {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 4px;
}
.billing-detail .bd-prep-checklist--readonly .bd-prep-checklist__tick.is-done .bd-prep-checklist__tick-box {
  border-color: #2563eb;
  background: #2563eb;
}
.billing-detail .bd-prep-checklist--readonly .bd-prep-checklist__tick.is-done .bd-prep-checklist__tick-box::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.billing-detail .bd-prep-checklist--readonly .bd-prep-checklist__tick.is-done .bd-prep-checklist__tick-text {
  color: #64748b;
  text-decoration: line-through;
}
.billing-detail .bd-prep-checklist__item {
  padding: 10px 0;
  border-bottom: 1px solid #f1f5f9;
}
.billing-detail .bd-prep-checklist__item:last-child {
  border-bottom: none;
}
.billing-detail .bd-prep-checklist__q {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 6px;
}
.billing-detail .bd-prep-checklist__help {
  margin: 0 0 6px;
  font-size: 12px;
  color: #64748b;
}
.billing-detail .bd-prep-checklist__item select,
.billing-detail .bd-prep-checklist__item input[type="text"],
.billing-detail .bd-prep-checklist__item input[type="number"],
.billing-detail .bd-prep-checklist__item input[type="date"] {
  width: 100%;
  max-width: 360px;
  font-size: 13px;
}
.billing-detail .bd-prep-checklist__remark-label {
  display: block;
  margin: 8px 0 4px;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.billing-detail .bd-prep-checklist__remark {
  width: 100%;
  font-size: 13px;
}
.billing-detail .bd-prep-checklist__template {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.billing-detail .bd-prep-checklist-status {
  margin: 8px 0;
  font-size: 13px;
  color: #64748b;
}
.billing-detail .bd-prep-quote-checklist-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  margin-top: 10px;
}
.billing-detail .bd-prep-fold {
  margin-top: 12px;
  font-size: 13px;
}
.billing-detail .bd-prep-fold summary {
  cursor: pointer;
  color: var(--bd-muted);
  font-weight: 700;
}
.billing-detail .bd-prep-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--bd-muted);
  font-weight: 700;
}
.billing-detail .bd-prep-field--block { margin-top: 14px; }
.billing-detail .bd-prep-inline-form { margin: 0; }
.billing-detail .bd-prep-lines-total {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--bd-line);
  max-width: 360px;
  margin-left: auto;
}
.billing-detail .bd-prep-quote-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  margin-bottom: 8px;
}
.billing-detail .bd-prep-quote-row--muted { color: var(--bd-muted); font-size: 13px; }
.billing-detail .bd-prep-quote-total {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--bd-line);
  display: flex;
  justify-content: space-between;
  font-size: 18px;
  font-weight: 900;
  color: var(--bd-dark);
}
.billing-detail .bd-prep-quote-total--inline { font-size: 16px; }
.billing-detail .bd-prep-side {
  display: grid;
  gap: 18px;
  align-content: start;
  min-width: 0;
}
.billing-detail .bd-prep-side-card { padding: 18px 20px; }
.billing-detail .bd-prep-side-card .bd-prep-checklist--ticks {
  gap: 6px;
}
.billing-detail .bd-prep-side-card .bd-prep-checklist__tick-label {
  padding: 8px 10px;
}
.billing-detail .bd-prep-side-card .bd-prep-checklist__tick-text {
  font-size: 13px;
  line-height: 1.35;
}
.billing-detail .bd-prep-fold--side {
  margin-top: 12px;
  font-size: 13px;
}
.billing-detail .bd-prep-status-list { display: grid; gap: 12px; }
.billing-detail .bd-prep-status-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bd-line);
  font-size: 14px;
}
.billing-detail .bd-prep-status-row:last-child { border-bottom: 0; padding-bottom: 0; }
.billing-detail .bd-prep-status-row .is-done { color: var(--bd-green); font-weight: 800; }
.billing-detail .bd-prep-status-row .is-todo { color: var(--bd-muted); font-weight: 800; }
.billing-detail .bd-prep-quote-box { display: grid; gap: 10px; }
.billing-detail .bd-prep-quote-open { width: 100%; margin-top: 6px; }
.billing-detail .bd-prep-follow-form {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}
.billing-detail .bd-prep-follow-form label {
  font-size: 12px;
  color: var(--bd-muted);
  font-weight: 700;
}
.billing-detail .bd-prep-follow-submit { width: 100%; }
.billing-detail .bd-prep-side-card--followup {
  min-width: 0;
  overflow: hidden;
}
.billing-detail .bd-follow {
  display: grid;
  gap: 0;
  min-width: 0;
}
.billing-detail .bd-follow__empty {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--bd-muted);
  line-height: 1.4;
}
.billing-detail .bd-follow-feed {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  min-width: 0;
}
.billing-detail .bd-follow-feed__day {
  margin: 10px 0 6px;
  padding: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #94a3b8;
}
.billing-detail .bd-follow-feed__day:first-child { margin-top: 0; }
.billing-detail .bd-follow-feed__item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px solid var(--bd-line);
}
.billing-detail .bd-follow-feed__item:last-child { border-bottom: 0; padding-bottom: 0; }
.billing-detail .bd-follow-feed__icon {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  background: #f1f5f9;
  color: #64748b;
}
.billing-detail .bd-follow-feed__item--info .bd-follow-feed__icon {
  background: #eff6ff;
  color: var(--bd-blue);
}
.billing-detail .bd-follow-feed__item--success .bd-follow-feed__icon {
  background: #ecfdf5;
  color: var(--bd-green);
}
.billing-detail .bd-follow-feed__item--danger .bd-follow-feed__icon {
  background: #fef2f2;
  color: var(--bd-red);
}
.billing-detail .bd-follow-feed__item--warning .bd-follow-feed__icon {
  background: #fffbeb;
  color: #d97706;
}
.billing-detail .bd-follow-feed__body { min-width: 0; }
.billing-detail .bd-follow-feed__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.billing-detail .bd-follow-feed__label {
  font-size: 13px;
  font-weight: 700;
  color: var(--bd-dark);
  line-height: 1.3;
}
.billing-detail .bd-follow-feed__time {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--bd-muted);
  white-space: nowrap;
}
.billing-detail .bd-follow-feed__note {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: #526174;
  word-break: break-word;
}
.billing-detail .bd-follow-feed__author {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: #94a3b8;
}
.billing-detail .bd-follow-form {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--bd-line);
  min-width: 0;
}
.billing-detail .bd-follow-form__field {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.billing-detail .bd-follow-form__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--bd-muted);
}
.billing-detail .bd-follow-form select,
.billing-detail .bd-follow-form input[type="datetime-local"],
.billing-detail .bd-follow-form textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid var(--bd-line);
  border-radius: 10px;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  background: #fff;
  color: var(--bd-dark);
}
.billing-detail .bd-follow-form textarea {
  min-height: 56px;
  resize: vertical;
}
.billing-detail .bd-follow-form__submit {
  width: 100%;
  margin-top: 2px;
}
.billing-detail .bd-prep-timeline { display: grid; gap: 10px; }
.billing-detail .bd-prep-timeline__item {
  padding: 10px 12px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid var(--bd-line);
  font-size: 13px;
}
.billing-detail .bd-prep-timeline__item strong { display: block; }
.billing-detail .bd-prep-timeline__item span { color: var(--bd-muted); font-size: 12px; }
.billing-detail .bd-prep-timeline__item p { margin: 6px 0 0; }
.billing-detail .bd-table--compact th,
.billing-detail .bd-table--compact td { padding: 10px 8px; font-size: 13px; }

@media (max-width: 1100px) {
  .billing-detail .bd-grid--prep { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
  .billing-detail .bd-prep-card[data-prep-span="4"],
  .billing-detail .bd-prep-card[data-prep-span="6"],
  .billing-detail .bd-prep-card[data-prep-span="8"] {
    grid-column: span 6;
  }
}
@media (max-width: 650px) {
  .billing-detail .bd-prep-grid { grid-template-columns: 1fr; }
  .billing-detail .bd-prep-card[data-prep-span="4"],
  .billing-detail .bd-prep-card[data-prep-span="6"],
  .billing-detail .bd-prep-card[data-prep-span="8"],
  .billing-detail .bd-prep-card[data-prep-span="12"] {
    grid-column: span 1;
  }
  .billing-detail .bd-prep-follow-form__row { grid-template-columns: 1fr; }
  .billing-detail .bd-prep-photo-list { grid-template-columns: 1fr 1fr; }
  .billing-detail .bd-prep-project__top { flex-direction: column; }
}

.billing-detail .bd-header__delete { margin: 0; }

.billing-detail .bd-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 22px;
  align-items: start;
}
.billing-detail .bd-grid--quote {
  grid-template-columns: minmax(0, 1fr) 340px;
}
.billing-detail .bd-main-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.billing-detail .bd-card--compact {
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(18, 38, 63, .05);
}
.billing-detail .bd-card-body--compact {
  padding: 14px 16px;
}

/* Compacte offerte-samenvatting */
.billing-detail .bd-qsum__row--main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.billing-detail .bd-qsum__identity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-width: 0;
}
.billing-detail .bd-qsum__badge {
  flex-shrink: 0;
  font-size: 11px;
  padding: 3px 9px;
}
.billing-detail .bd-qsum__name {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
}
.billing-detail .bd-qsum__ref {
  font-size: 12px;
  color: var(--bd-muted);
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--bd-soft);
}
.billing-detail .bd-qsum__ref::before {
  content: 'Ref. ';
  color: #94a3b8;
}
.billing-detail .bd-qsum__total {
  text-align: right;
  flex-shrink: 0;
}
.billing-detail .bd-qsum__total-value {
  display: block;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.1;
}
.billing-detail .bd-qsum__total-label {
  font-size: 11px;
  color: var(--bd-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
}

.billing-detail .bd-qsum__stepper {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  align-items: flex-start;
  gap: 0;
}
.billing-detail .bd-qsum__step {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 0 4px;
  text-align: center;
}
.billing-detail .bd-qsum__step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 5px;
  left: calc(50% + 8px);
  right: calc(-50% + 8px);
  height: 2px;
  background: #e2e8f0;
  z-index: 0;
}
.billing-detail .bd-qsum__step.is-done:not(:last-child)::after {
  background: #93c5fd;
}
.billing-detail .bd-qsum__step-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 2px solid #cbd5e1;
  background: #fff;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.billing-detail .bd-qsum__step.is-done .bd-qsum__step-dot {
  border-color: var(--bd-blue);
  background: var(--bd-blue);
}
.billing-detail .bd-qsum__step.is-current .bd-qsum__step-dot {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .2);
}
.billing-detail .bd-qsum__step-label {
  font-size: 10px;
  font-weight: 800;
  color: var(--bd-muted);
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.2;
}
.billing-detail .bd-qsum__step.is-done .bd-qsum__step-label {
  color: var(--bd-text);
}
.billing-detail .bd-qsum__step-date {
  font-size: 10px;
  color: #94a3b8;
  line-height: 1.2;
}

.billing-detail .bd-qsum__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--bd-line);
}
.billing-detail .bd-qsum__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 8px;
  background: var(--bd-soft);
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  max-width: 100%;
}
.billing-detail .bd-qsum__chip i {
  color: var(--bd-blue);
  font-size: 11px;
  flex-shrink: 0;
}
.billing-detail .bd-qsum__chip--site {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.billing-detail .bd-qsum__chip-sep {
  color: #94a3b8;
  margin: 0 1px;
}
.billing-detail .bd-qsum__links {
  display: inline-flex;
  gap: 6px;
  margin-left: auto;
}
.billing-detail .bd-qsum__link {
  font-size: 12px;
  font-weight: 700;
  color: var(--bd-blue);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 6px;
}
.billing-detail .bd-qsum__link:hover {
  background: #eff6ff;
}

.billing-detail .bd-qsum__fold {
  margin-top: 10px;
  border-radius: 10px;
  border: 1px solid var(--bd-line);
  background: #fafbfd;
}
.billing-detail .bd-qsum__fold summary {
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--bd-muted);
  cursor: pointer;
  list-style: none;
}
.billing-detail .bd-qsum__fold summary::-webkit-details-marker { display: none; }
.billing-detail .bd-qsum__fold summary::before {
  content: '▸ ';
  display: inline-block;
  transition: transform .15s ease;
}
.billing-detail .bd-qsum__fold[open] summary::before {
  transform: rotate(90deg);
}
.billing-detail .bd-qsum__fold-body {
  padding: 0 12px 10px;
  font-size: 13px;
  line-height: 1.45;
  color: #475569;
}
.billing-detail .bd-qsum__fold--internal summary { color: #64748b; }

.billing-detail .bd-card {
  background: #fff;
  border: 1px solid var(--bd-line);
  border-radius: 22px;
  box-shadow: 0 12px 30px rgba(18, 38, 63, .06);
}
.billing-detail .bd-card-body { padding: 24px; }
.billing-detail .bd-card-body--flush { padding: 0; }
.billing-detail .bd-card--flat {
  border-style: dashed;
  background: #fafbfd;
}
.billing-detail .bd-card--actions .bd-actions { margin-top: 0; }

.billing-detail .bd-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--bd-line);
}
.billing-detail .bd-panel__head h2 {
  margin: 0;
  font-size: 17px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.billing-detail .bd-panel__head h2 i { color: var(--bd-blue); font-size: 15px; }
.billing-detail .bd-panel__meta {
  font-size: 13px;
  color: var(--bd-muted);
  font-weight: 700;
}
.billing-detail .bd-panel-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.billing-detail .bd-actions-groups {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.billing-detail .bd-actions-group > label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: .03em;
  color: var(--bd-muted);
  margin-bottom: 8px;
}
.billing-detail .bd-side-title {
  font-size: 17px;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.billing-detail .bd-side-title i { color: var(--bd-blue); }
.billing-detail .bd-side-divider {
  border: 0;
  border-top: 1px solid var(--bd-line);
  margin: 18px 0;
}
.billing-detail .bd-side-card--followup { position: sticky; top: 16px; }

.billing-detail .bd-offer-top {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--bd-line);
}
.billing-detail .bd-offer-top h2 { margin: 12px 0 0; font-size: 20px; }
.billing-detail .bd-ref { color: var(--bd-muted); margin: 4px 0 0; font-size: 13px; }
.billing-detail .bd-badge { display: inline-flex; }
.billing-detail .bd-offer-total { text-align: right; }
.billing-detail .bd-offer-total__label { color: var(--bd-muted); font-size: 12px; }
.billing-detail .bd-offer-total__value { font-size: 30px; font-weight: 900; }

/* Status-rij (pipeline als kaarten) */
.billing-detail .bd-status-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 22px 0;
}
.billing-detail .bd-status {
  background: var(--bd-soft);
  border: 1px solid transparent;
  border-radius: 16px;
  padding: 14px;
}
.billing-detail .bd-status strong { display: block; font-size: 13px; color: var(--bd-muted); }
.billing-detail .bd-status span { color: var(--bd-muted); font-size: 12px; }
.billing-detail .bd-status.is-done strong { color: var(--bd-text); }
.billing-detail .bd-status.is-done span { color: #526174; }
.billing-detail .bd-status.is-current { box-shadow: 0 0 0 1px var(--bd-line); }
.billing-detail .bd-status.is-current.bd-status--success { background: #ecfdf5; border-color: #bbf7d0; }
.billing-detail .bd-status.is-current.bd-status--danger { background: #fef2f2; border-color: #fecaca; }
.billing-detail .bd-status.is-current.bd-status--info,
.billing-detail .bd-status.is-current.bd-status--neutral { background: #eff4ff; border-color: #c7d7ff; }

/* Info-grid */
.billing-detail .bd-info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}
.billing-detail .bd-info {
  background: var(--bd-soft);
  border-radius: 16px;
  padding: 14px;
}
.billing-detail .bd-info label {
  display: block;
  color: var(--bd-muted);
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: .03em;
  margin-bottom: 6px;
}
.billing-detail .bd-info div { font-weight: 800; }

/* Notities */
.billing-detail .bd-note {
  background: #f8fafc;
  border-left: 4px solid var(--bd-blue);
  padding: 16px;
  border-radius: 14px;
  margin-bottom: 22px;
}
.billing-detail .bd-note strong { display: block; margin-bottom: 6px; }
.billing-detail .bd-note--internal { border-left-color: var(--bd-muted); }
.billing-detail .bd-note .admin-billing-rich p { margin: 0 0 8px; }
.billing-detail .bd-note .admin-billing-rich :last-child { margin-bottom: 0; }

/* Werfvoorbereiding — drie zones op offertepagina */
.billing-detail .bd-attachments {
  padding: 0;
}
.billing-detail .bd-attachments__head {
  margin-bottom: 20px;
}
.billing-detail .bd-attachments__title {
  margin: 0 0 6px;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.billing-detail .bd-attachments__title i { color: var(--bd-blue); }
.billing-detail .bd-attachments__intro {
  margin: 0;
  color: var(--bd-muted);
  font-size: 13px;
  line-height: 1.45;
}
.billing-detail .bd-attachments__hint {
  margin: 0;
  color: var(--bd-muted);
  font-size: 14px;
}
.billing-detail .bd-attachments__zones {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.billing-detail .bd-attach-zone {
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid var(--bd-line);
  background: #fff;
}
.billing-detail .bd-attach-zone__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.billing-detail .bd-attach-zone__head h4 {
  margin: 0;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.billing-detail .bd-attach-zone__head h4 i { color: var(--bd-blue); font-size: 14px; }
.billing-detail .bd-attach-zone__count {
  padding: 3px 10px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 12px;
  font-weight: 800;
}
.billing-detail .bd-attach-zone__empty {
  margin: 0 0 12px;
  color: var(--bd-muted);
  font-size: 13px;
}
.billing-detail .bd-attach-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.billing-detail .bd-attach-gallery__item {
  position: relative;
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--bd-line);
  background: var(--bd-soft);
}
.billing-detail .bd-attach-gallery__item img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.billing-detail .bd-attach-gallery__item figcaption {
  padding: 6px 8px;
  font-size: 11px;
  color: var(--bd-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.billing-detail .bd-attach-gallery__delete {
  position: absolute;
  top: 6px;
  right: 6px;
  margin: 0;
}
.billing-detail .bd-attach-gallery__delete button {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  cursor: pointer;
  line-height: 1;
  font-size: 16px;
}
.billing-detail .bd-attach-files {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.billing-detail .bd-attach-files__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--bd-line);
  background: var(--bd-soft);
}
.billing-detail .bd-attach-files__link {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: var(--bd-text);
  font-weight: 700;
  font-size: 14px;
}
.billing-detail .bd-attach-files__link i { color: var(--bd-red); flex-shrink: 0; }
.billing-detail .bd-attach-files__link span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.billing-detail .bd-attach-files__delete { margin: 0; }
.billing-detail .bd-attach-files__delete button {
  border: 0;
  background: transparent;
  color: var(--bd-muted);
  font-size: 20px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.billing-detail .bd-attach-files__delete button:hover { color: var(--bd-red); }
.billing-detail .bd-attach-upload {
  padding-top: 4px;
  border-top: 1px dashed var(--bd-line);
}
.billing-detail .bd-attach-upload__label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
  cursor: pointer;
}
.billing-detail .bd-attach-upload__label input[type="file"] {
  font-size: 13px;
}
.billing-detail .bd-attach-upload__label > span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  border-radius: 12px;
  border: 2px dashed #c7d2e3;
  background: #f8fafc;
  color: var(--bd-muted);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}
.billing-detail .bd-attach-upload__label:hover > span {
  border-color: var(--bd-blue);
  color: var(--bd-blue);
  background: #f0f5ff;
}
.billing-detail .bd-attach-upload__hint {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--bd-muted);
}
.billing-detail .bd-attach-zone--notes .admin-rte {
  border: 1px solid var(--bd-line);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
.billing-detail .bd-attach-zone--notes .admin-rte__editor {
  min-height: 180px;
}
.billing-detail .bd-attach-notes-form__actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}
.billing-detail .bd-attach-notes-view {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--bd-soft);
  border: 1px solid var(--bd-line);
}

/* Legacy site-prep (factuur / oude refs) */
.billing-detail .bd-site-prep {
  margin-bottom: 0;
  padding: 20px 24px;
  border-radius: 0;
  border: 0;
  background: transparent;
}
.billing-detail .bd-site-prep__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.billing-detail .bd-site-prep__title {
  margin: 0 0 6px;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.billing-detail .bd-site-prep__title i { color: var(--bd-blue); }
.billing-detail .bd-site-prep__intro {
  margin: 0;
  color: var(--bd-muted);
  font-size: 13px;
  line-height: 1.45;
  max-width: 56ch;
}
.billing-detail .bd-site-prep__count {
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 12px;
  font-weight: 800;
}
.billing-detail .bd-site-prep__hint,
.billing-detail .bd-site-prep__empty {
  margin: 0;
  color: var(--bd-muted);
  font-size: 14px;
}
.billing-detail .bd-site-prep-form {
  margin-bottom: 20px;
  padding: 16px;
  border-radius: 14px;
  border: 1px dashed #c7d2e3;
  background: #fff;
}
.billing-detail .bd-site-prep-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.billing-detail .bd-site-prep-form__field { margin-bottom: 12px; }
.billing-detail .bd-site-prep-form__field label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--bd-text);
}
.billing-detail .bd-site-prep-form__muted { font-weight: 600; color: var(--bd-muted); }
.billing-detail .bd-site-prep-form__field input[type="text"],
.billing-detail .bd-site-prep-form__field input[type="datetime-local"],
.billing-detail .bd-site-prep-form__field input[type="file"],
.billing-detail .bd-site-prep-form__field textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--bd-line);
  border-radius: 12px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  background: #fff;
  color: var(--bd-text);
}
.billing-detail .bd-site-prep-form__field textarea { min-height: 96px; resize: vertical; }
.billing-detail .bd-site-prep-form__field input[type="file"] {
  padding: 8px 10px;
  border-style: dashed;
  background: #f8fafc;
  cursor: pointer;
}
.billing-detail .bd-site-prep-form__field input:focus,
.billing-detail .bd-site-prep-form__field textarea:focus {
  outline: none;
  border-color: var(--bd-blue);
  box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.15);
}
.billing-detail .bd-site-prep-form__hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--bd-muted);
}
.billing-detail .bd-site-prep-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.billing-detail .bd-site-prep-entry {
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--bd-line);
  background: #fff;
}
.billing-detail .bd-site-prep-entry__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.billing-detail .bd-site-prep-entry__date {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: var(--bd-blue);
}
.billing-detail .bd-site-prep-entry__title {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  color: var(--bd-text);
}
.billing-detail .bd-site-prep-entry__delete { margin: 0; }
.billing-detail .bd-site-prep-entry__delete-btn {
  border: none;
  background: transparent;
  color: var(--bd-muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
}
.billing-detail .bd-site-prep-entry__delete-btn:hover {
  background: #fef2f2;
  color: var(--bd-red);
}
.billing-detail .bd-site-prep-entry__notes {
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--bd-text);
  white-space: normal;
}
.billing-detail .bd-site-prep-entry__files {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.billing-detail .bd-site-prep-file {
  position: relative;
}
.billing-detail .bd-site-prep-file__thumb {
  display: block;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--bd-line);
  background: #f1f5f9;
}
.billing-detail .bd-site-prep-file__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.billing-detail .bd-site-prep-file__doc {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--bd-line);
  background: #f8fafc;
  color: var(--bd-text);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.billing-detail .bd-site-prep-file__doc i { color: var(--bd-red); }
.billing-detail .bd-site-prep-file__delete {
  position: absolute;
  top: 6px;
  right: 6px;
  margin: 0;
}
.billing-detail .bd-site-prep-file__delete button {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  cursor: pointer;
  line-height: 1;
  font-size: 16px;
}
.billing-detail .bd-site-prep-entry__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 12px;
  color: var(--bd-muted);
}
@media (max-width: 720px) {
  .billing-detail .bd-site-prep-form__grid { grid-template-columns: 1fr; }
  .billing-detail .bd-site-prep__head { flex-direction: column; }
}

.billing-detail .bd-survey-card__status {
  padding: 3px 8px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
  font-weight: 800;
}

#bd-survey { scroll-margin-top: 16px; }
#bd-followup { scroll-margin-top: 16px; }
.billing-detail .bd-anchor-section { scroll-margin-top: 16px; }
.billing-detail .bd-survey-list { display: flex; flex-direction: column; gap: 10px; }
.billing-detail .bd-survey-card {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--bd-line);
  background: #fff;
  text-decoration: none;
  color: inherit;
}
.billing-detail .bd-survey-card:hover { border-color: var(--bd-blue); box-shadow: 0 2px 8px rgba(79,124,255,.1); }
.billing-detail .bd-survey-card__main { display: flex; flex-direction: column; gap: 4px; }
.billing-detail .bd-survey-card__main strong { font-size: 15px; }
.billing-detail .bd-survey-card__main span { font-size: 13px; color: var(--bd-muted); }
.billing-detail .bd-survey-card__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 12px; color: var(--bd-muted); }
.billing-detail .bd-survey-card__status {
  padding: 3px 8px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
  font-weight: 800;
}

/* Werfopname detailpagina */
.wo-page { max-width: 960px; }
.wo-page__head { margin-bottom: 20px; }
.wo-page__back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 8px; }
.wo-page h1 { margin: 0 0 8px; font-size: 26px; }
.wo-status { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; background: #fef3c7; color: #92400e; }
.wo-status--completed { background: #dcfce7; color: #166534; }
.wo-card { margin-bottom: 18px; padding: 18px 20px; border-radius: 14px; border: 1px solid #e2e8f0; background: #fff; }
.wo-card__title { margin: 0 0 14px; font-size: 17px; }
.wo-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.wo-tabs a { padding: 8px 14px; border-radius: 10px; background: #f1f5f9; font-size: 13px; font-weight: 700; text-decoration: none; color: #334155; }
.wo-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wo-field { margin-bottom: 12px; }
.wo-field label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; }
.wo-field input, .wo-field select, .wo-field textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #cbd5e0; border-radius: 10px; font: inherit; }
.wo-check { display: inline-flex; align-items: center; gap: 8px; }
.wo-hint { color: #64748b; font-size: 14px; }
.wo-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.wo-photo-card { border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; }
.wo-photo-card__img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.wo-photo-card__body { padding: 10px 12px; font-size: 13px; }
.wo-photo-card__cat { display: block; color: #64748b; font-size: 12px; }
.wo-checklist__item { padding: 12px 0; border-bottom: 1px solid #f1f5f9; }
.wo-checklist__q { font-weight: 700; display: block; margin-bottom: 6px; }
.wo-attention-list { list-style: none; margin: 0; padding: 0; }
.wo-attention { padding: 12px; margin-bottom: 8px; border-radius: 10px; border-left: 4px solid #94a3b8; background: #f8fafc; }
.wo-attention--high { border-left-color: #f59e0b; }
.wo-attention--critical { border-left-color: #ef4444; }
.wo-annotate-dialog { max-width: min(920px, 96vw); }
.wo-annotate-dialog .admin-modal__form {
  display: flex;
  flex-direction: column;
  max-height: min(92vh, 920px);
}
.wo-annotate-dialog .admin-modal__body.wo-annotate-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.wo-annotate-canvas-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 120px;
  max-height: min(42vh, 420px);
  overflow: auto;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f1f5f9;
}
.wo-annotate-text-input {
  position: absolute;
  z-index: 3;
  min-width: 72px;
  max-width: min(300px, 85%);
  padding: 1px 5px;
  border: 2px solid #e11d48;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.96);
  font: bold 18px sans-serif;
  line-height: 1.2;
  outline: none;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
}
.wo-annotate-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; flex-shrink: 0; }
.wo-annotate-toolbar button { padding: 6px 10px; border-radius: 8px; border: 1px solid #cbd5e0; background: #fff; cursor: pointer; }
.wo-annotate-toolbar button.is-active { background: #eef2ff; border-color: #93b4fd; }
.wo-annotate-toolbar button:disabled { opacity: 0.45; cursor: not-allowed; }
.wo-annotate-hint { margin: 0 0 8px; font-size: 12px; color: #64748b; flex-shrink: 0; }
.wo-annotate-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 10px;
  padding: 6px 10px;
  border: 1px solid #c7d2fe;
  border-radius: 8px;
  background: #eef2ff;
  flex-shrink: 0;
}
.wo-annotate-meta__field {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.wo-annotate-meta__field--grow {
  flex: 1 1 200px;
}
.wo-annotate-meta__label {
  font-size: 10px;
  font-weight: 700;
  color: #4338ca;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.wo-annotate-meta__field select,
.wo-annotate-meta__field input {
  height: 30px;
  min-width: 0;
  padding: 4px 8px;
  border: 1px solid #c7d2fe;
  border-radius: 6px;
  background: #fff;
  font: inherit;
  font-size: 13px;
}
.wo-annotate-meta__field select { max-width: 180px; }
.wo-annotate-meta__field input { width: 100%; }
.wo-annotate-dialog .admin-modal__footer {
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .wo-annotate-meta__field { flex: 1 1 100%; }
  .wo-annotate-meta__field select { max-width: none; width: 100%; }
}
.wo-delete-form { margin-top: 16px; padding-top: 16px; border-top: 1px dashed #e2e8f0; }
@media (max-width: 640px) { .wo-form__grid { grid-template-columns: 1fr; } }

/* Werfopname modal op offertepagina */
dialog.admin-dialog-native.admin-dialog-native--werfopname {
  max-width: min(980px, 96vw);
  width: min(980px, 96vw);
  max-height: min(92vh, 920px);
  height: fit-content;
}

dialog.admin-dialog-native--werfopname .admin-modal__shell {
  display: flex;
  flex-direction: column;
  max-height: min(92vh, 920px);
}

dialog.admin-dialog-native--werfopname .admin-modal__head > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-width: 0;
}

dialog.admin-dialog-native--werfopname .admin-modal__body--werfopname {
  padding: 14px 18px 18px;
  flex: 1 1 auto;
  min-height: 0;
  max-height: calc(92vh - 56px);
  overflow-y: auto;
}

dialog.admin-dialog-native--werfopname .wo-modal-content .wo-card {
  margin-bottom: 14px;
}

dialog.admin-dialog-native--werfopname .wo-modal-content .wo-card:last-child {
  margin-bottom: 0;
}

/* Regels-tabel */
.billing-detail .bd-table { width: 100%; border-collapse: collapse; }
.billing-detail .bd-table th {
  text-align: left;
  color: var(--bd-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 13px 8px;
  border-bottom: 1px solid var(--bd-line);
}
.billing-detail .bd-table td {
  padding: 14px 8px;
  border-bottom: 1px solid var(--bd-line);
  font-weight: 600;
}
.billing-detail .bd-table th.num, .billing-detail .bd-table td.num { text-align: right; }
.billing-detail .bd-table__section td {
  background: var(--bd-soft);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .03em;
  color: var(--bd-dark);
}

/* Totalen */
.billing-detail .bd-total-box {
  margin-top: 22px;
  display: flex;
  justify-content: flex-end;
}
.billing-detail .bd-totals {
  width: 330px;
  max-width: 100%;
  background: #f8fafc;
  border-radius: 18px;
  padding: 18px;
}
.billing-detail .bd-total-line {
  display: flex;
  justify-content: space-between;
  margin-bottom: 11px;
  color: #526174;
}
.billing-detail .bd-total-line--final {
  border-top: 1px solid var(--bd-line);
  padding-top: 14px;
  margin-top: 12px;
  margin-bottom: 0;
  color: var(--bd-dark);
  font-size: 19px;
  font-weight: 900;
}

/* Acties */
.billing-detail .bd-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.billing-detail .bd-actions form { margin: 0; }

/* Sidebar */
.billing-detail .bd-side-card + .bd-side-card { margin-top: 18px; }

.billing-detail .bd-follow-form label {
  font-size: 12px;
  color: var(--bd-muted);
  font-weight: 800;
  display: block;
  margin-bottom: 6px;
}
.billing-detail .bd-follow-form input,
.billing-detail .bd-follow-form select,
.billing-detail .bd-follow-form textarea {
  width: 100%;
  border: 1px solid var(--bd-line);
  border-radius: 13px;
  padding: 11px 12px;
  margin-bottom: 12px;
  font-family: inherit;
  font-size: 14px;
  background: #fff;
  color: var(--bd-text);
}
.billing-detail .bd-follow-form textarea { min-height: 84px; resize: vertical; }
.billing-detail .bd-follow-form__hint { color: var(--bd-muted); font-size: 12px; margin: 10px 0 0; }

/* Tijdlijn */
.billing-detail .bd-timeline { position: relative; padding-left: 22px; }
.billing-detail .bd-timeline:before {
  content: "";
  position: absolute;
  left: 7px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--bd-line);
}
.billing-detail .bd-timeline-item { position: relative; padding-bottom: 18px; }
.billing-detail .bd-timeline-item:last-child { padding-bottom: 0; }
.billing-detail .bd-timeline-item:before {
  content: "";
  position: absolute;
  left: -20px;
  top: 4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--bd-blue);
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px var(--bd-line);
}
.billing-detail .bd-timeline-item--success:before { background: var(--bd-green); }
.billing-detail .bd-timeline-item--danger:before { background: var(--bd-red); }
.billing-detail .bd-timeline-item--warning:before { background: #f59e0b; }
.billing-detail .bd-timeline-item strong { display: block; font-size: 14px; }
.billing-detail .bd-timeline-item > span { color: var(--bd-muted); font-size: 12px; }
.billing-detail .bd-timeline-item__note { margin: 6px 0 0; font-size: 13px; color: #526174; }
.billing-detail .bd-timeline-item__author { display: block; color: var(--bd-muted); font-size: 11px; margin-top: 4px; }
.billing-detail .bd-timeline-item__delete { position: absolute; top: 0; right: 0; margin: 0; }
.billing-detail .bd-timeline-item__delete button {
  border: 0;
  background: transparent;
  color: var(--bd-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.billing-detail .bd-timeline-item__delete button:hover { color: var(--bd-red); }
.billing-detail .bd-timeline__empty { color: var(--bd-muted); font-size: 13px; margin: 0; }

/* Snelle acties */
.billing-detail .bd-quick-actions { display: grid; gap: 10px; }
.billing-detail .bd-quick-actions .bd-btn { width: 100%; }

@media (max-width: 1100px) {
  .billing-detail .bd-grid { grid-template-columns: 1fr; }
  .billing-detail .bd-info-grid,
  .billing-detail .bd-status-row { grid-template-columns: repeat(2, 1fr); }
  .billing-detail .bd-side-card--followup { position: static; }
}
@media (max-width: 650px) {
  .billing-detail .bd-info-grid,
  .billing-detail .bd-status-row { grid-template-columns: 1fr; }
  .billing-detail .bd-card-body { padding: 18px; }
  .billing-detail .bd-qsum__stepper { gap: 2px; }
  .billing-detail .bd-qsum__step-label { font-size: 9px; }
  .billing-detail .bd-qsum__links { margin-left: 0; width: 100%; }
}

/* —— Voortgangsbalk (pipeline / stepper) —— */
.admin-billing-pipeline {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: 18px 20px 16px;
  margin: 0;
  border-bottom: 1px solid #eef1f6;
  overflow-x: auto;
}

.admin-billing-pipeline__step {
  position: relative;
  flex: 1 1 0;
  min-width: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 6px;
}

/* Verbindingslijn tussen de stappen */
.admin-billing-pipeline__step::before {
  content: "";
  position: absolute;
  top: 9px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: #e1e7f0;
  z-index: 0;
}

.admin-billing-pipeline__step:first-child::before {
  display: none;
}

.admin-billing-pipeline__dot {
  position: relative;
  z-index: 1;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #cdd6e4;
  box-sizing: border-box;
  margin-bottom: 8px;
}

.admin-billing-pipeline__label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #8794a8;
  line-height: 1.25;
}

.admin-billing-pipeline__date {
  margin-top: 2px;
  font-size: 0.78rem;
  color: #aab3c4;
}

/* Bereikte stappen */
.admin-billing-pipeline__step.is-done .admin-billing-pipeline__dot {
  background: #4f7cff;
  border-color: #4f7cff;
}

.admin-billing-pipeline__step.is-done .admin-billing-pipeline__label {
  color: #1f2a44;
}

.admin-billing-pipeline__step.is-done .admin-billing-pipeline__date {
  color: #5c6b82;
}

.admin-billing-pipeline__step.is-done::before {
  background: #4f7cff;
}

/* Huidige stap accentueren */
.admin-billing-pipeline__step.is-current .admin-billing-pipeline__dot {
  box-shadow: 0 0 0 4px rgba(79, 124, 255, 0.18);
}

/* Kleur per uitkomst */
.admin-billing-pipeline__step--success.is-done .admin-billing-pipeline__dot {
  background: #0f9d58;
  border-color: #0f9d58;
}
.admin-billing-pipeline__step--success.is-done::before { background: #0f9d58; }
.admin-billing-pipeline__step--success.is-current .admin-billing-pipeline__dot {
  box-shadow: 0 0 0 4px rgba(15, 157, 88, 0.18);
}

.admin-billing-pipeline__step--danger.is-done .admin-billing-pipeline__dot {
  background: #d64545;
  border-color: #d64545;
}
.admin-billing-pipeline__step--danger.is-done::before { background: #d64545; }
.admin-billing-pipeline__step--danger.is-current .admin-billing-pipeline__dot {
  box-shadow: 0 0 0 4px rgba(214, 69, 69, 0.18);
}

/* —— Opvolging / tijdlijn —— */
.admin-billing-followup {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid #e8edf5;
}

.admin-billing-followup__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 1rem;
  font-weight: 700;
  color: #1f2a44;
}

.admin-billing-followup__title i {
  color: #4f7cff;
}

.admin-billing-followup__form {
  background: #f7f9fc;
  border: 1px solid #e4eaf3;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 22px;
}

.admin-billing-followup__row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.admin-billing-followup__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 200px;
  min-width: 0;
}

.admin-billing-followup__field--full {
  flex-basis: 100%;
  margin-top: 12px;
}

.admin-billing-followup__field label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #51607a;
}

.admin-billing-followup__field select,
.admin-billing-followup__field input,
.admin-billing-followup__field textarea {
  width: 100%;
  border: 1px solid #dbe3ef;
  border-radius: 9px;
  padding: 8px 11px;
  font-size: 0.9rem;
  font-family: inherit;
  color: #17233c;
  background: #fff;
  box-sizing: border-box;
}

.admin-billing-followup__field select:focus,
.admin-billing-followup__field input:focus,
.admin-billing-followup__field textarea:focus {
  outline: none;
  border-color: #4f7cff;
  box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.12);
}

.admin-billing-followup__actions {
  margin-top: 12px;
}

/* Tijdlijn */
.admin-billing-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}

.admin-billing-timeline__item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0 0 18px 0;
}

.admin-billing-timeline__item::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 32px;
  bottom: 0;
  width: 2px;
  background: #e4eaf3;
}

.admin-billing-timeline__item:last-child {
  padding-bottom: 0;
}

.admin-billing-timeline__item:last-child::before {
  display: none;
}

.admin-billing-timeline__icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  background: #eef2fb;
  color: #5c6b82;
  z-index: 1;
}

.admin-billing-timeline__item--info .admin-billing-timeline__icon {
  background: #e6f0ff;
  color: #2f6bff;
}

.admin-billing-timeline__item--success .admin-billing-timeline__icon {
  background: #e3f6ec;
  color: #0f9d58;
}

.admin-billing-timeline__item--danger .admin-billing-timeline__icon {
  background: #fdecec;
  color: #d64545;
}

.admin-billing-timeline__item--warning .admin-billing-timeline__icon {
  background: #fef3e2;
  color: #d98324;
}

.admin-billing-timeline__body {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 4px;
}

.admin-billing-timeline__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.admin-billing-timeline__head strong {
  color: #1f2a44;
  font-size: 0.92rem;
}

.admin-billing-timeline__time {
  font-size: 0.8rem;
  color: #8794a8;
}

.admin-billing-timeline__note {
  margin: 4px 0 0;
  font-size: 0.88rem;
  color: #46536b;
  line-height: 1.45;
}

.admin-billing-timeline__author {
  display: inline-block;
  margin-top: 3px;
  font-size: 0.76rem;
  color: #97a3b6;
}

.admin-billing-timeline__delete {
  flex: 0 0 auto;
}

.admin-billing-timeline__delete-btn {
  border: none;
  background: transparent;
  color: #b6c0d0;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}

.admin-billing-timeline__delete-btn:hover {
  color: #d64545;
  background: #fdecec;
}

.admin-billing-timeline__empty {
  margin: 0;
  color: #8794a8;
  font-size: 0.9rem;
}

.admin-billing-qty,
.admin-billing-price {
  text-align: right;
}

/* Kolombreedtes: omschrijving krijgt de meeste ruimte */
#billingLinesTable {
  table-layout: fixed;
}

#billingLinesTable th:nth-child(1),
#billingLinesTable td:nth-child(1) { width: auto; }
#billingLinesTable th:nth-child(2),
#billingLinesTable td:nth-child(2) { width: 78px; }
#billingLinesTable th:nth-child(3),
#billingLinesTable td:nth-child(3) { width: 84px; }
#billingLinesTable th:nth-child(4),
#billingLinesTable td:nth-child(4) { width: 124px; }
#billingLinesTable th:nth-child(5),
#billingLinesTable td:nth-child(5) { width: 168px; }
#billingLinesTable th:nth-child(6),
#billingLinesTable td:nth-child(6) { width: 110px; }
#billingLinesTable th:nth-child(7),
#billingLinesTable td:nth-child(7) { width: 104px; }

/* Omschrijving met sleepgreep ervoor */
.admin-billing-desc-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-billing-desc-wrap .admin-billing-input {
  flex: 1 1 auto;
  min-width: 0;
}

.admin-billing-line-detail-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #fff;
  color: #64748b;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.admin-billing-line-detail-toggle:hover {
  border-color: #4f7cff;
  color: #4f7cff;
  background: #f8faff;
}

.admin-billing-line-detail-toggle.has-detail {
  border-color: rgba(79, 124, 255, 0.35);
  color: #4f7cff;
  background: rgba(79, 124, 255, 0.08);
}

.admin-billing-line-detail-toggle.is-open {
  background: #4f7cff;
  border-color: #4f7cff;
  color: #fff;
}

.admin-billing-line-detail[hidden] {
  display: none !important;
}

.admin-billing-line-detail > td {
  padding-top: 0;
  padding-bottom: 12px;
  background: #fafbfd;
  border-bottom: 1px solid #e8edf5;
}

.admin-billing-line-detail__inner {
  padding: 10px 8px 4px 28px;
}

.admin-billing-line-detail__label {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}

.admin-rte--compact .admin-rte__editor {
  min-height: 88px;
  max-height: 220px;
  overflow-y: auto;
}

.admin-rte--line-detail .admin-rte__btn--size-normal {
  font-size: 0.95rem;
}

.admin-rte--line-detail .admin-rte__btn--size-large {
  font-size: 1.1rem;
}

.admin-rte__editor table {
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0;
}

.admin-rte__editor th,
.admin-rte__editor td {
  border: 1px solid #dbe3ef;
  padding: 4px 6px;
  min-width: 40px;
}

.admin-billing-line-detail-view {
  margin-top: 6px;
  font-size: 0.88rem;
  color: #475569;
}

.admin-billing-line-detail-view table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 4px;
}

.admin-billing-line-detail-view th,
.admin-billing-line-detail-view td {
  border: 1px solid #dbe3ef;
  padding: 4px 6px;
}

.admin-billing-line-quick > td {
  padding: 0 8px 10px;
  background: #fafbfd;
  border-bottom: 1px solid #e8edf5;
}

.admin-billing-line-quick__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 2px 0 2px 28px;
}

.admin-billing-line-quick__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #94a3b8;
}

.admin-billing-line-quick__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-billing-line-quick__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid #dbe3ef;
  border-radius: 999px;
  background: #fff;
  color: #475569;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.admin-billing-line-quick__btn:hover {
  border-color: #4f7cff;
  color: #4f7cff;
  background: #f8faff;
}

.admin-billing-line-quick__btn i {
  font-size: 0.72rem;
  opacity: 0.85;
}

/* Sleepgreep */
.admin-billing-drag-handle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 30px;
  color: #9aa7bd;
  cursor: grab;
  border-radius: 6px;
  user-select: none;
}

.admin-billing-drag-handle:hover {
  color: #4f7cff;
  background: #eef2fb;
}

.admin-billing-drag-handle:active {
  cursor: grabbing;
}

.admin-billing-line-row.is-dragging {
  opacity: 0.5;
  background: #f4f7fd;
}

/* Verplaats- en verwijderknoppen in de actiekolom */
.admin-billing-row-actions {
  white-space: nowrap;
}

.admin-billing-row-actions {
  text-align: right;
}

.admin-billing-row-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 30px;
  padding: 0;
  border: 1px solid #dbe3ef;
  background: #fff;
  border-radius: 8px;
  color: #5c6b82;
  cursor: pointer;
  vertical-align: middle;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.admin-billing-row-btn:hover {
  border-color: #4f7cff;
  color: #4f7cff;
  background: #eef2fb;
}

.admin-billing-row-btn + .admin-billing-row-btn,
.admin-billing-row-actions .admin-billing-remove-line {
  margin-left: 4px;
}

/* Categorie-/sectierij in het formulier */
.admin-billing-section-cell {
  background: #eef2fb;
  border-radius: 8px;
}

.admin-billing-section-row td {
  border-bottom-color: #d7e0f2;
}

.admin-billing-section-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-billing-section-icon {
  color: #4f7cff;
  flex: 0 0 auto;
}

.admin-billing-section-input {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #2a3550;
  background: transparent;
  border-color: transparent;
}

.admin-billing-section-input::placeholder {
  text-transform: none;
  font-weight: 500;
  letter-spacing: 0;
}

.admin-billing-section-input:focus {
  background: #fff;
}

.admin-billing-option-row td {
  background: #fffbeb;
}

.admin-billing-option-badge,
.bd-option-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  margin-right: 8px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  vertical-align: middle;
}

.bd-table__option td {
  background: #fffbeb;
}

.admin-billing-totals__optional,
.billing-detail .bd-total-line--optional {
  color: #92400e;
  font-size: 13px;
}

.admin-billing-totals__optional dt,
.billing-detail .bd-total-line--optional span {
  color: #b45309;
}

/* Categorie-koprij in de leesweergave (offerte/factuur bekijken) */
.admin-billing-lines-table--readonly .admin-billing-section-row td {
  background: #eef2fb;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: #2a3550;
}

/* BTW-keuzemenu in regels */
select.admin-billing-vat {
  text-align: left;
  min-width: 120px;
  cursor: pointer;
  appearance: auto;
}

/* Vervaldatum: aantal dagen + datumveld naast elkaar */
.admin-billing-due-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-billing-due-row .admin-billing-due-days {
  width: 120px;
  flex: 0 0 auto;
}

.admin-billing-due-row input[type="date"] {
  flex: 1 1 auto;
  min-width: 0;
}

.admin-billing-due-row input[type="date"][readonly] {
  background: #f4f7fb;
  color: #51607a;
}

/* BTW-tarieven beheerpagina */
.admin-settings-intro {
  margin: 0 0 18px;
  color: #5c6b82;
  font-size: 0.92rem;
  line-height: 1.5;
  max-width: 640px;
}

.admin-billing-vat-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.admin-billing-remove-line {
  line-height: 1;
  padding: 8px 12px;
}

.admin-billing-totals {
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
}

.admin-billing-totals dl {
  margin: 0;
  min-width: 280px;
}

.admin-billing-totals dl > div {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 4px 0;
}

.admin-billing-totals__grand {
  font-weight: 700;
  font-size: 1.05rem;
  border-top: 2px solid #0f172a;
  margin-top: 6px;
  padding-top: 8px !important;
}

.admin-billing-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}

.admin-billing-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px 20px;
  margin: 0 0 20px;
}

.admin-billing-facts > div {
  margin: 0;
}

.admin-billing-facts dt {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  margin-bottom: 2px;
}

.admin-billing-facts dd {
  margin: 0;
  font-weight: 600;
}

.admin-billing-public-note,
.admin-billing-internal-note {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 10px;
}

.admin-billing-public-note {
  background: #f8fafc;
}

.admin-billing-internal-note {
  background: #fff7ed;
  border: 1px solid #fed7aa;
}

.admin-billing-view-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #e2e8f0;
}

.admin-billing-inline-form {
  margin: 0;
}

.admin-billing-project-blocks {
  display: grid;
  gap: 24px;
}

/* Projectpagina: offertes & factureren */
.pv-fin-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
.pv-fin-panel {
  margin: 0;
  overflow: hidden;
}
.pv-fin-panel--quotes {
  border-top: 3px solid #6366f1;
}
.pv-fin-panel--invoices {
  border-top: 3px solid #059669;
}
.pv-fin-panel__head {
  padding-bottom: 0;
  border-bottom: 0;
}
.pv-fin-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.pv-fin-panel__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 20px 16px;
  border-bottom: 1px solid var(--admin-border, #e8edf5);
}
.pv-fin-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 88px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #f6f8fb;
}
.pv-fin-stat--warning {
  background: #fff8ed;
}
.pv-fin-stat--warning .pv-fin-stat__value {
  color: #b45309;
}
.pv-fin-stat__value {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--admin-text, #1e293b);
  line-height: 1.2;
}
.pv-fin-stat__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
  text-transform: lowercase;
}
.pv-fin-empty {
  padding: 28px 20px 32px;
  text-align: center;
}
.pv-fin-empty__icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  font-size: 1.25rem;
}
.pv-fin-empty__icon--quote {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.14), rgba(139, 92, 246, 0.2));
  color: #6366f1;
}
.pv-fin-empty__icon--invoice {
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.12), rgba(16, 185, 129, 0.2));
  color: #059669;
}
.pv-fin-empty h3 {
  margin: 0 0 8px;
  font-size: 1rem;
}
.pv-fin-empty p {
  margin: 0 auto 16px;
  max-width: 28rem;
  color: #64748b;
  font-size: 0.9rem;
  line-height: 1.5;
}
.pv-fin-table {
  margin-top: 0;
}
.pv-fin-panel .admin-projects-table-wrap {
  padding: 0 4px 8px;
}

.admin-billing-project-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.admin-billing-project-block__head h3 {
  margin: 0;
  font-size: 1rem;
}

.admin-section-title-icon--quote {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
}

.admin-section-title-icon--invoice,
.admin-section-title-icon--financial {
  background: linear-gradient(135deg, #059669, #10b981);
  color: #fff;
}

@media (max-width: 768px) {
  .admin-billing-totals dl {
    min-width: 100%;
  }
  .admin-billing-lines-table thead {
    display: none;
  }
  .admin-billing-lines-table tr {
    display: grid;
    gap: 8px;
    padding: 14px 0;
    border-bottom: 1px solid #e8edf5;
  }
  .admin-billing-lines-table td {
    border: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .admin-billing-lines-table td[data-label]::before {
    content: attr(data-label);
    font-size: 0.78rem;
    font-weight: 600;
    color: #5c6b82;
  }
  .admin-billing-lines-table .admin-billing-input {
    max-width: 60%;
  }
}

/* —— Documentsjablonen studio —— */
.admin-page--document-templates .admin-settings-layout {
  grid-template-columns: 1fr;
}

.admin-page--document-templates .admin-settings-main {
  max-width: none;
}

@media (min-width: 1101px) {
  .admin-page--document-templates .admin-doc-tpl-studio__grid {
    grid-template-columns: minmax(360px, 1fr) minmax(420px, 1.25fr);
  }

  .admin-page--document-templates .admin-doc-tpl-preview-frame {
    max-height: none;
    height: 72vh;
  }
}

.admin-doc-tpl-studio__lead {
  margin: 6px 0 0;
  font-size: 0.9rem;
  color: #64748b;
}

.admin-doc-tpl-settings {
  margin-bottom: 20px;
  padding: 18px 20px;
  border: 1px solid rgba(79, 124, 255, 0.22);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(79, 124, 255, 0.07) 0%, transparent 55%),
    #fff;
  box-shadow: 0 8px 28px rgba(23, 35, 60, 0.05);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.admin-doc-tpl-settings.is-highlight {
  border-color: rgba(79, 124, 255, 0.55);
  box-shadow: 0 0 0 4px rgba(79, 124, 255, 0.14);
}

.admin-doc-tpl-settings__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.admin-doc-tpl-settings__step {
  margin: 0 0 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4f7cff;
}

.admin-doc-tpl-settings__title {
  margin: 0 0 6px;
  font-size: 1.05rem;
  color: #0f172a;
}

.admin-doc-tpl-settings__lead {
  margin: 0;
  max-width: 640px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: #64748b;
}

.admin-doc-tpl-settings__type-badge {
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(79, 124, 255, 0.12);
  color: #1e3a5f;
  font-size: 0.78rem;
  font-weight: 700;
}

.admin-doc-tpl-settings__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(180px, 0.9fr);
  gap: 16px 20px;
  margin-bottom: 16px;
}

.admin-doc-tpl-settings__options-title {
  margin: 0 0 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #94a3b8;
}

.admin-doc-tpl-settings__option-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-doc-tpl-settings__option-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.admin-doc-tpl-settings__option-card:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.admin-doc-tpl-settings__option-card:has(input:checked) {
  border-color: rgba(79, 124, 255, 0.4);
  background: rgba(79, 124, 255, 0.05);
  box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.08);
}

.admin-doc-tpl-settings__option-card input {
  margin-top: 3px;
  flex-shrink: 0;
}

.admin-doc-tpl-settings__option-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.admin-doc-tpl-settings__option-body strong {
  font-size: 0.9rem;
  color: #1e293b;
}

.admin-doc-tpl-settings__option-body span {
  font-size: 0.82rem;
  line-height: 1.45;
  color: #64748b;
}

.admin-doc-tpl-settings__note {
  margin: 12px 0 0;
}

.admin-doc-tpl-gen-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
}

.admin-doc-tpl-gen-options__label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748b;
}

.admin-doc-tpl-gen-options__select,
.admin-doc-tpl-gen-options__input {
  font: inherit;
  font-size: 0.84rem;
  padding: 6px 10px;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #fff;
}

.admin-doc-tpl-gen-options__select {
  min-width: 110px;
}

.admin-doc-tpl-gen-options__input {
  flex: 1 1 180px;
  min-width: 160px;
  max-width: 360px;
}

.admin-doc-tpl-gen-status {
  flex: 1 1 100%;
  margin: 0;
  font-size: 0.82rem;
  color: #475569;
}

.admin-doc-tpl-gen-status.is-error {
  color: #dc2626;
}

.admin-doc-tpl-sections-lead {
  margin: 0 0 12px;
  font-size: 0.88rem;
  color: #475569;
}

.admin-doc-tpl-sections-lead__step {
  display: inline-block;
  margin-right: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef2fb;
  color: #1e3a5f;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-doc-tpl-new-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: 0.92rem;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(79, 124, 255, 0.28);
}

.admin-doc-tpl-new-link:hover {
  box-shadow: 0 6px 20px rgba(79, 124, 255, 0.35);
}

.admin-doc-tpl-empty-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  margin-bottom: 8px;
  padding: 18px 20px;
  border: 1px dashed rgba(79, 124, 255, 0.35);
  border-radius: 14px;
  background: rgba(79, 124, 255, 0.05);
}

.admin-doc-tpl-empty-cta__text {
  margin: 0;
  font-size: 0.95rem;
  color: #475569;
}

#docTemplateStudio {
  scroll-margin-top: 96px;
  padding-bottom: 72px;
}

.admin-doc-tpl-studio__actions {
  position: fixed;
  left: 312px;
  right: 0;
  bottom: max(14px, env(safe-area-inset-bottom, 0px));
  z-index: 85;
  display: flex;
  justify-content: center;
  padding: 0 16px;
  margin: 0;
  pointer-events: none;
}

.admin-shell.sidebar-collapsed .admin-doc-tpl-studio__actions {
  left: 84px;
}

.admin-doc-tpl-studio__actions-inner {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px 8px 14px;
  border: 1px solid rgba(79, 124, 255, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 24px rgba(23, 35, 60, 0.12);
  pointer-events: auto;
}

.admin-doc-tpl-studio__actions-step {
  margin: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(79, 124, 255, 0.12);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #1e3a5f;
  white-space: nowrap;
}

.admin-doc-tpl-studio__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  padding: 10px 18px;
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(79, 124, 255, 0.28);
}

.admin-doc-tpl-studio__submit:hover {
  box-shadow: 0 6px 18px rgba(79, 124, 255, 0.34);
  transform: translateY(-1px);
}

.admin-doc-tpl-studio__submit i {
  font-size: 0.95rem;
}

.admin-doc-tpl-studio__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 0 16px;
  margin-bottom: 4px;
  border-bottom: 1px solid #edf2f7;
}

.admin-doc-tpl-studio__nav-item {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #fff;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-doc-tpl-studio__nav-item:hover {
  border-color: #cbd5e1;
}

.admin-doc-tpl-studio__nav-item.is-active {
  border-color: rgba(79, 124, 255, 0.35);
  box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.08);
}

.admin-doc-tpl-studio__nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #475569;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.admin-doc-tpl-studio__nav-btn:hover {
  background: #f8fafc;
}

.admin-doc-tpl-studio__nav-item.is-active .admin-doc-tpl-studio__nav-btn {
  background: rgba(79, 124, 255, 0.1);
  color: #1e3a5f;
}

.admin-doc-tpl-studio__nav-gen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  padding: 0;
  border: 0;
  border-left: 1px solid #e2e8f0;
  background: transparent;
  color: #16a34a;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.admin-doc-tpl-studio__nav-item.is-active .admin-doc-tpl-studio__nav-gen {
  border-left-color: rgba(79, 124, 255, 0.2);
  background: rgba(34, 197, 94, 0.08);
}

.admin-doc-tpl-studio__nav-gen:hover {
  background: rgba(34, 197, 94, 0.14);
  color: #15803d;
}

.admin-doc-tpl-studio__nav-gen:focus-visible {
  outline: 2px solid #4f7cff;
  outline-offset: -2px;
}

.admin-doc-tpl-studio__grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.05fr);
  gap: 20px;
  align-items: start;
}

.admin-doc-tpl-studio__editor {
  min-width: 0;
}

.admin-doc-tpl-panel__title {
  margin: 0 0 6px;
  font-size: 1rem;
}

.admin-doc-tpl-panel[hidden] {
  display: none !important;
}

.admin-doc-tpl-textarea {
  width: 100%;
  min-height: 140px;
  padding: 12px 14px;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  font: inherit;
  font-size: 0.92rem;
  line-height: 1.5;
  resize: vertical;
}

.admin-doc-tpl-textarea:focus {
  outline: none;
  border-color: #4f7cff;
  box-shadow: 0 0 0 4px rgba(79, 124, 255, 0.12);
}

.admin-doc-tpl-terms-kw {
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
}

.admin-doc-tpl-terms-kw__label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.86rem;
  font-weight: 700;
  color: #0f172a;
}

.admin-doc-tpl-terms-kw__hint {
  margin: 0 0 10px;
}

.admin-doc-tpl-terms-kw__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.admin-doc-tpl-terms-kw__input {
  flex: 1 1 220px;
  min-width: 180px;
  font: inherit;
  font-size: 0.88rem;
  padding: 8px 11px;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #fff;
}

.admin-doc-tpl-terms-kw__append {
  flex-shrink: 0;
}

.admin-doc-tpl-terms-kw__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-doc-tpl-kw-chip {
  padding: 4px 10px;
  border: 1px dashed #cbd5e1;
  border-radius: 999px;
  background: #fff;
  color: #475569;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.admin-doc-tpl-kw-chip:hover {
  border-color: rgba(34, 197, 94, 0.45);
  background: rgba(34, 197, 94, 0.08);
  color: #166534;
}

.admin-doc-tpl-presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.admin-doc-tpl-presets__label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-doc-tpl-preset-btn {
  padding: 5px 12px;
  border: 1px dashed #cbd5e1;
  border-radius: 999px;
  background: #f8fafc;
  color: #475569;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.admin-doc-tpl-preset-btn:hover {
  border-color: #4f7cff;
  color: #4f7cff;
  background: #f8faff;
}

.admin-doc-tpl-studio__preview-wrap {
  position: sticky;
  top: 88px;
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}

.admin-doc-tpl-studio__preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.admin-doc-tpl-studio__preview-head h3 {
  margin: 0;
  font-size: 0.95rem;
}

.admin-doc-tpl-studio__preview-badge {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(79, 124, 255, 0.12);
  color: #1e3a5f;
  font-size: 0.75rem;
  font-weight: 700;
}

.admin-doc-tpl-studio__preview-hint {
  margin: 0 0 10px;
}

.admin-doc-tpl-preview-status {
  min-height: 1.2em;
  margin-bottom: 8px;
  font-size: 0.85rem;
  color: #64748b;
}

.admin-doc-tpl-preview-status.is-error {
  color: #b91c1c;
}

.admin-doc-tpl-preview-status[hidden] {
  display: none !important;
}

.admin-doc-tpl-preview-frame-wrap {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  min-height: 480px;
}

.admin-doc-tpl-preview-frame {
  display: block;
  width: 100%;
  min-height: 480px;
  height: 62vh;
  max-height: 720px;
  border: 0;
}

.admin-rte--doc-tpl .admin-rte__editor {
  min-height: 160px;
}

.admin-rte--doc-tpl-terms .admin-rte__editor {
  min-height: 360px;
  max-height: 520px;
  overflow-y: auto;
}

.admin-rte--doc-tpl-terms .admin-rte__btn--size-xsmall {
  font-size: 0.72rem;
}

.admin-rte--doc-tpl-terms .admin-rte__btn--size-normal {
  font-size: 0.95rem;
}

.admin-rte--doc-tpl-terms .admin-rte__btn--size-large {
  font-size: 1.1rem;
}

.admin-rte--doc-tpl-terms .admin-rte__btn--size-xlarge {
  font-size: 1.25rem;
  font-weight: 700;
}

.admin-rte__btn--wide {
  width: auto;
  min-width: 34px;
  padding: 0 8px;
  font-size: 0.72rem;
  font-weight: 700;
}

.admin-rte--doc-tpl-terms .admin-rte__editor h2 {
  font-size: 1.05rem;
  margin: 12px 0 6px;
}

.admin-rte--doc-tpl-terms .admin-rte__editor h3 {
  font-size: 0.95rem;
  margin: 10px 0 4px;
}

@media (max-width: 1100px) {
  .admin-doc-tpl-studio__grid {
    grid-template-columns: 1fr;
  }

  .admin-doc-tpl-studio__preview-wrap {
    position: static;
  }

  .admin-doc-tpl-settings__grid,
  .admin-doc-tpl-settings__option-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 991px) {
  .admin-doc-tpl-studio__actions {
    left: 0;
  }

  .admin-doc-tpl-studio__actions-inner {
    width: min(420px, calc(100vw - 24px));
    justify-content: center;
  }

  .admin-doc-tpl-studio__submit {
    flex: 1;
  }
}

/* Checklist-sjabloon editor */
.ckl-tpl-form {
  max-width: 820px;
}
.ckl-tpl-form__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.ckl-tpl-form__back {
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  text-decoration: none;
}
.ckl-tpl-form__back:hover {
  color: #0f172a;
}
.ckl-tpl-form__card {
  margin-bottom: 12px;
}
.ckl-tpl-form__title {
  margin: 0 0 4px;
  font-size: 20px;
}
.ckl-tpl-form__lede {
  margin: 0 0 14px;
  font-size: 13px;
  color: #64748b;
  line-height: 1.45;
}
.ckl-tpl-form__foot {
  margin-top: 4px;
}
.ckl-tpl-meta {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 10px 12px;
  align-items: end;
  margin-bottom: 10px;
}
.ckl-tpl-meta__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ckl-tpl-meta__field span {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ckl-tpl-meta__field input,
.ckl-tpl-meta__field select {
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}
.ckl-tpl-meta__field--name {
  grid-column: 1;
}
.ckl-tpl-meta__field--sort {
  width: 72px;
}
.ckl-tpl-meta__field--sort input {
  width: 100%;
}
.ckl-tpl-meta__field--full {
  grid-column: 1 / -1;
}
.ckl-tpl-meta__active {
  align-self: end;
  padding-bottom: 8px;
}
.ckl-tpl-items-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.ckl-tpl-items-head__title {
  margin: 0 0 2px;
  font-size: 16px;
}
.ckl-tpl-items-head__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4em;
  padding: 0 6px;
  margin-left: 4px;
  border-radius: 999px;
  background: #f1f5f9;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
}
.ckl-items {
  display: grid;
  gap: 8px;
}
.ckl-item {
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fafbfc;
}
.ckl-item__main {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ckl-item__num {
  flex-shrink: 0;
  width: 22px;
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
  text-align: center;
}
.ckl-item__fields {
  display: flex;
  flex: 1;
  gap: 8px;
  min-width: 0;
}
.ckl-item__q {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  padding: 7px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
}
.ckl-item__type {
  width: 118px;
  flex-shrink: 0;
  font-size: 12px;
  padding: 7px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
}
.ckl-item__remove {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #94a3b8;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.ckl-item__remove:hover {
  background: #fef2f2;
  color: #dc2626;
}
.ckl-item__extra {
  margin-top: 8px;
  padding-left: 30px;
}
.ckl-item__extra[hidden] {
  display: none !important;
}
.ckl-item__choices-label {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
}
.ckl-item__choices {
  width: 100%;
  font-size: 12px;
  padding: 6px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  resize: vertical;
  min-height: 52px;
}
.ckl-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 8px;
  padding-left: 30px;
}
.ckl-item__help {
  flex: 1;
  min-width: 140px;
  font-size: 12px;
  padding: 6px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
}
.ckl-item__flags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ckl-flag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #475569;
  cursor: pointer;
  white-space: nowrap;
}
.ckl-flag input {
  margin: 0;
}
.ckl-item__hint {
  font-style: normal;
  font-weight: 400;
  color: #94a3b8;
}
@media (max-width: 720px) {
  .ckl-tpl-meta {
    grid-template-columns: 1fr 1fr;
  }
  .ckl-tpl-meta__field--name {
    grid-column: 1 / -1;
  }
  .ckl-item__fields {
    flex-direction: column;
  }
  .ckl-item__type {
    width: 100%;
  }
  .ckl-item__extra,
  .ckl-item__meta {
    padding-left: 0;
  }
}

/* Checklists hub (overzicht) */
.ckl-hub {
  max-width: 640px;
}
.ckl-hub__title {
  margin: 0 0 6px;
  font-size: 22px;
}
.ckl-hub__subtitle {
  margin: 0 0 6px;
  font-size: 17px;
}
.ckl-hub__lede {
  margin: 0 0 16px;
  font-size: 13px;
  color: #64748b;
  line-height: 1.45;
}
.ckl-hub__section {
  margin-bottom: 14px;
}
.ckl-hub__empty {
  margin: 16px 0 0;
  font-size: 13px;
  color: #64748b;
}
.ckl-quick {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.ckl-quick__input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  font-size: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}
.ckl-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.ckl-list__item {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
.ckl-list__link {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  text-decoration: none;
  color: inherit;
}
.ckl-list__link:hover {
  background: #f8fafc;
}
.ckl-list__name {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}
.ckl-list__meta {
  font-size: 12px;
  color: #64748b;
  white-space: nowrap;
}
.ckl-list__delete {
  margin: 0;
  border-left: 1px solid #e2e8f0;
}
.ckl-list__remove {
  width: 40px;
  height: 100%;
  min-height: 44px;
  border: none;
  background: transparent;
  color: #94a3b8;
  font-size: 20px;
  cursor: pointer;
}
.ckl-list__remove:hover {
  background: #fef2f2;
  color: #dc2626;
}
.ckl-offerte-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}
.ckl-offerte-form__modes {
  display: flex;
  gap: 6px;
}
.ckl-mode {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.ckl-mode input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ckl-mode span {
  display: block;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  background: #fff;
}
.ckl-mode input:checked + span {
  border-color: #93b4fd;
  background: #eff6ff;
  color: #1d4ed8;
}
.ckl-offerte-form__tpl {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 180px;
}
.ckl-offerte-form__tpl span {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
}
.ckl-offerte-form__tpl select {
  font-size: 13px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}
.ckl-tpl-name {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}
.ckl-tpl-name span {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
}
.ckl-tpl-name input {
  font-size: 16px;
  font-weight: 600;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}
.ckl-items--simple .ckl-item {
  padding: 8px 10px;
}
.ckl-item--simple .ckl-item__main {
  gap: 6px;
}
.ckl-item--simple .ckl-item__type {
  width: 100px;
}
.ckl-flag--req span {
  font-weight: 700;
  color: #64748b;
  font-size: 14px;
}
.ckl-item--simple .ckl-item__extra {
  padding-left: 0;
  margin-top: 6px;
}