/* ╔══════════════════════════════════════════════════════════════════╗
   ║  SHARED STYLES — gedeeld tussen hub, leegstand, login en andere   ║
   ║  standalone pagina's. Laadt als eerste, zodat andere stylesheets  ║
   ║  specifieke overrides kunnen toepassen.                           ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ═══ Smooth opgeslagen-bevestiging ═══════════════════════════════════
   Pattern: form fadet uit, lime checkmark fadet in, modal sluit auto.
   Gebruikt door hub.js (toonOpgeslagenMelding) en leegstand.js.        */

.saved-host { position: relative; }
.saved-host.is-saving > *:not(.saved-panel) {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.30s ease, transform 0.30s ease;
  pointer-events: none;
  filter: blur(1px);
}
.saved-panel {
  position: absolute; inset: 0;
  background: #fff;
  border-radius: inherit;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 32px; box-sizing: border-box;
  opacity: 0; pointer-events: none;
  transition: opacity 0.34s ease;
  z-index: 10;
}
.saved-panel.is-visible { opacity: 1; pointer-events: auto; }
.saved-check {
  width: 64px; height: 64px;
  margin: 0 0 16px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(165, 197, 32, 0.12);
}
.saved-check svg { width: 44px; height: 44px; display: block; }
.saved-check-circle {
  fill: none; stroke: var(--lime);
  stroke-width: 2.5;
  stroke-dasharray: 151; stroke-dashoffset: 151;
}
.saved-check-path {
  fill: none; stroke: var(--dark);
  stroke-width: 3.5;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 36; stroke-dashoffset: 36;
}
.saved-panel.is-visible .saved-check-circle {
  animation: savedDraw 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) 0.18s forwards;
}
.saved-panel.is-visible .saved-check-path {
  animation: savedDraw 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) 0.55s forwards;
}
@keyframes savedDraw { to { stroke-dashoffset: 0; } }
.saved-title {
  margin: 0 0 6px;
  font-size: 18px; font-weight: 700;
  color: var(--dark); text-align: center;
}
.saved-sub {
  margin: 0;
  font-size: 13px; color: var(--mid);
  line-height: 1.55; text-align: center;
  max-width: 320px;
}

/* Glass-variant — frosted paneel met subtiele groen-zweem. */
.saved-panel {
  background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(238,243,230,0.7) 100%);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border-radius: 22px;
}

/* ═══ Custom-select dropdown ═════════════════════════════════════════
   Het panel wordt door custom-select.js aan document.body gehangen,
   dus de styles MOETEN global zijn (niet scopable naar één view).     */

.cs-wrap { position: relative; width: 100%; }
.cs-wrap > select { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; overflow: hidden; }
.cs-trigger { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 13px; border: 1px solid var(--border); border-radius: 9px; background: var(--white); cursor: pointer; font-family: 'proxima-nova', sans-serif; font-size: 14px; color: var(--dark); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.cs-trigger:hover, .cs-wrap.cs-open .cs-trigger { border-color: var(--lime); box-shadow: 0 0 0 3px rgba(165,197,32,0.1); }
.cs-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-placeholder { color: var(--mid); }
.cs-arrow { flex-shrink: 0; color: var(--mid); transition: transform 0.2s; display: flex; }
.cs-wrap.cs-open .cs-arrow { transform: rotate(180deg); }
.cs-panel { display: none; position: fixed; background: var(--white); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-lg); max-height: 260px; overflow-y: auto; z-index: 99999; opacity: 0; transform: translateY(-4px); transition: opacity var(--transition-fast), transform var(--transition-fast); }
.cs-panel.cs-visible { display: block; opacity: 1; transform: translateY(0); }
.cs-option { display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: 14px; color: var(--dark); cursor: pointer; transition: background 0.1s, opacity 0.15s; }
.cs-option:hover { background: var(--light-bg); }
.cs-option.cs-selected { background: var(--cream); font-weight: 600; }
.cs-option.cs-disabled { opacity: 0.42; cursor: not-allowed; filter: grayscale(0.2); }
.cs-option.cs-disabled:hover { background: transparent; }
.cs-option .cs-label { flex: 1; min-width: 0; }
.cs-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.cs-dot-green { background: #4CAF50; box-shadow: 0 0 0 2.5px rgba(76,175,80,0.16); }
.cs-dot-red { background: #e63946; box-shadow: 0 0 0 2.5px rgba(230,57,70,0.16); }
.cs-panel::-webkit-scrollbar { width: 6px; }
.cs-panel::-webkit-scrollbar-track { background: transparent; }
.cs-panel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.cs-panel::-webkit-scrollbar-thumb:hover { background: var(--mid); }
.cs-filter { min-width: 150px; width: auto; }
.cs-filter .cs-trigger { padding: 8px 12px; font-size: 13px; }
.cs-filter .cs-option { font-size: 13px; padding: 8px 14px; }

/* Glass-layer (samenspel met glass-body — overschrijft de base hierboven) */
.cs-trigger {
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: 11px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}
.cs-trigger:hover,
.cs-wrap.cs-open .cs-trigger {
  background: rgba(255,255,255,0.9);
  border-color: rgba(165,197,32,0.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 0 0 3px rgba(165,197,32,0.12);
}
.cs-panel {
  background: linear-gradient(135deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.78) 100%);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 14px;
  box-shadow:
    0 1px 2px rgba(43,54,37,0.06),
    0 16px 48px rgba(43,54,37,0.16),
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 0 0 1px rgba(255,255,255,0.35);
}
.cs-option:hover { background: rgba(165,197,32,0.1); }
.cs-option.cs-selected {
  background: linear-gradient(90deg, rgba(165,197,32,0.18), rgba(165,197,32,0.06));
  color: var(--dark);
}