/*
 * Eigene Overrides für die Besucherliste auf Basis des Vuexy-Templates.
 * Wird als LETZTES Stylesheet geladen (nach core.css / demo.css / flatpickr.css).
 */

/* ── MECO-Primärfarbe statt Vuexy-Standard ── */
:root,
[data-bs-theme=light] {
  --bs-primary: #2571b8;
  --bs-primary-rgb: 37, 113, 184;
  --bs-primary-contrast: #fff;
  --bs-primary-bg-subtle: color-mix(in sRGB, #2571b8 16%, #fff);
  --bs-primary-border-subtle: color-mix(in sRGB, #2571b8 40%, #fff);
  --bs-primary-text-emphasis: color-mix(in sRGB, #2571b8 60%, #000);
}

/* ── flatpickr-Popups über Modals anzeigen ──
   Das Popup hängt am <body>; Vuexy-Modals liegen bei z-index 1090,
   flatpickr standardmäßig bei 1074 (also dahinter). */
.flatpickr-calendar.open {
  z-index: 1095;
}

/* ── Status-Punkt in der Besuchertabelle ── */
.status-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  vertical-align: middle;
}
.dot-active { background: var(--bs-success); box-shadow: 0 0 0 3px rgba(var(--bs-success-rgb), .2); }
.dot-gone   { background: var(--bs-danger); }

/* ── Kiosk: Pairing-Karte zentriert ── */
.pairing-card {
  max-width: 420px;
  margin: 8vh auto 0;
}

/* ── Setup-Assistent: breitere Auth-Karte ── */
.authentication-basic .authentication-inner.setup-inner {
  max-width: 920px;
}
.setup-inner .bs-stepper-header {
  flex-wrap: wrap;
}

/* ── Toast (bestehendes JS-Konzept: #toast + .show/.success/.error) ── */
#toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: #323232; color: #fff;
  padding: 12px 22px; border-radius: 8px;
  font-size: .9rem; box-shadow: var(--bs-box-shadow);
  transition: transform .3s ease; z-index: 9999;
  pointer-events: none;
}
#toast.show    { transform: translateX(-50%) translateY(0); }
#toast.success { background: var(--bs-success); }
#toast.error   { background: var(--bs-danger); }