/* face_recognize Web-UI - Custom overrides over Tailwind CDN. */

/* Sidebar-Active-Highlight */
.nav-active {
  background: linear-gradient(90deg, rgb(16 185 129 / 0.18), transparent);
  border-left: 3px solid rgb(52 211 153);
  color: rgb(52 211 153);
  font-weight: 600;
}
.nav-active svg { color: rgb(52 211 153); }

/* Cards mit subtle Glow + Hover */
.card {
  background: rgb(15 23 42);
  border: 1px solid rgb(30 41 59);
  border-radius: 0.5rem;
  transition: border-color 200ms;
}
.card:hover { border-color: rgb(51 65 85); }
.card-glow:hover { box-shadow: 0 0 0 1px rgb(52 211 153 / 0.3); }

/* Stat-Card */
.stat-card {
  background: rgb(15 23 42);
  border: 1px solid rgb(30 41 59);
  border-radius: 0.5rem;
  padding: 1rem;
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgb(52 211 153), transparent);
  opacity: 0.5;
}

/* Buttons konsistent */
.btn { @apply px-3 py-1.5 rounded text-sm font-medium transition-colors; }
.btn-primary { @apply bg-brand-600 hover:bg-brand-500 text-white; }
.btn-secondary { @apply bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700; }
.btn-danger { @apply bg-red-700 hover:bg-red-600 text-white; }
.btn-ghost { @apply text-slate-400 hover:text-slate-200; }

/* Scrollbar im Sidebar/Audit-Log feiner */
.thin-scroll::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.thin-scroll::-webkit-scrollbar-thumb {
  background: rgb(71 85 105 / 0.5);
  border-radius: 3px;
}
.thin-scroll::-webkit-scrollbar-thumb:hover {
  background: rgb(100 116 139 / 0.7);
}

/* htmx-indicator: zeigt Spinner waehrend Request laeuft */
.htmx-indicator {
  opacity: 0;
  transition: opacity 200ms ease-in;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}

/* Toast-Animation */
@keyframes toast-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.toast {
  animation: toast-in 200ms ease-out;
}