/* Bausteine. Jeder Wert kommt aus einem Token, keiner steht hier fest. */

/* ------------------------------------------------------------------ Button */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--ink-700);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn:hover:not(:disabled) { background: var(--surface-3); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn--primary { background: var(--brand-500); color: #fff; }
.btn--primary:hover:not(:disabled) { background: var(--brand-600); }

.btn--ghost { background: transparent; }
.btn--ghost:hover:not(:disabled) { background: var(--surface-2); }

.btn--outline { background: transparent; border-color: var(--border-strong); }
.btn--outline:hover:not(:disabled) { background: var(--surface-2); }

.btn--danger { background: var(--danger-500); color: #fff; }
.btn--danger:hover:not(:disabled) { filter: brightness(0.92); }

.btn--sm { padding: var(--space-1) var(--space-3); font-size: var(--text-sm); }
.btn--icon { padding: var(--space-2); aspect-ratio: 1; }

/* ------------------------------------------------------------------ Eingabe */
.input, .select, .textarea {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-0);
  color: var(--ink-700);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.input:hover, .select:hover { border-color: var(--ink-400); }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--brand-500); outline: none; box-shadow: var(--shadow-focus);
}
.textarea { min-height: 88px; resize: vertical; }

.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--ink-700); }
.field .hint { font-size: var(--text-xs); color: var(--ink-500); }
.field .error { font-size: var(--text-xs); color: var(--danger-500); }

/* Schalter. Wird für die Löschregel gebraucht und ist deshalb bewusst
   groß genug, dass man ihn nicht aus Versehen trifft. */
.switch { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
  width: 44px; height: 24px; flex: none;
  border-radius: var(--radius-full);
  background: var(--border-strong);
  transition: background var(--dur-base) var(--ease-out);
  position: relative;
}
.switch .track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: var(--radius-full);
  background: #fff; box-shadow: var(--shadow-xs);
  transition: transform var(--dur-base) var(--ease-out);
}
.switch input:checked + .track { background: var(--brand-500); }
.switch input:checked + .track::after { transform: translateX(20px); }
.switch input:focus-visible + .track { box-shadow: var(--shadow-focus); }
/* Die Löschregel ist gefährlich, also bekommt sie Rot statt Blau. */
.switch--danger input:checked + .track { background: var(--danger-500); }

/* ------------------------------------------------------------------ Karte */
.card {
  background: var(--surface-0);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.card__body { padding: var(--space-5); }
.card__header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
}

/* ------------------------------------------------------------------ Badge */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  background: var(--surface-2); color: var(--ink-500);
}
.badge--ok     { background: var(--ok-050);     color: var(--ok-500); }
.badge--warn   { background: var(--warn-050);   color: var(--warn-500); }
.badge--danger { background: var(--danger-050); color: var(--danger-500); }
.badge--info   { background: var(--info-050);   color: var(--info-500); }

/* ------------------------------------------------------------------ Videokarte */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min-width), 1fr));
  gap: var(--space-5);
}

.video-card {
  background: var(--surface-0);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.video-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.video-card__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--surface-2);
  display: grid; place-items: center;
  overflow: hidden;
}
.video-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.video-card__duration {
  position: absolute; right: var(--space-2); bottom: var(--space-2);
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
  background: rgba(16, 18, 20, 0.78); color: #fff;
  font-size: var(--text-xs); font-variant-numeric: tabular-nums;
}
.video-card__body { padding: var(--space-3) var(--space-4) var(--space-4); }
.video-card__title {
  font-weight: var(--weight-semibold); color: var(--ink-900);
  margin-bottom: var(--space-1);
}
.video-card__meta {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs); color: var(--ink-500);
}

/* ------------------------------------------------------------------ Seitenleiste */
.sidebar {
  width: var(--sidebar-width); flex: none;
  border-right: 1px solid var(--border-soft);
  background: var(--surface-0);
  padding: var(--space-4);
  overflow-y: auto;
}
.nav-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--ink-700); cursor: pointer;
  border: none; background: none; width: 100%; text-align: left;
  font-size: var(--text-base);
}
.nav-item:hover { background: var(--surface-2); text-decoration: none; }
.nav-item[aria-current="true"] {
  background: var(--info-050); color: var(--brand-500);
  font-weight: var(--weight-medium);
}
.nav-item .count {
  margin-left: auto; font-size: var(--text-xs); color: var(--ink-400);
  font-variant-numeric: tabular-nums;
}
.nav-group-title {
  padding: var(--space-4) var(--space-3) var(--space-1);
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-400);
}

/* ------------------------------------------------------------------ Datumsgruppen */
.group-title {
  display: flex; align-items: baseline; gap: var(--space-3);
  margin: var(--space-6) 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
}
/* Die erste Gruppe steht direkt unter der Überschrift, dort stört ein
   zusätzlicher Abstand nach oben. */
.group-title:first-child { margin-top: 0; }
.group-count { font-size: var(--text-xs); font-weight: var(--weight-regular); color: var(--ink-400); }

/* Kleiner runder Knopf, etwa zum Anlegen eines Ordners. */
.icon-btn {
  width: 22px; height: 22px; flex: none;
  display: grid; place-items: center;
  border: none; border-radius: var(--radius-sm);
  background: transparent; color: var(--ink-500);
  font-size: var(--text-md); line-height: 1;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink-900); }

/* Einstieg, solange noch kein Ordner existiert. */
.nav-item--hint { color: var(--ink-400); font-style: italic; }
.nav-item--hint:hover { color: var(--ink-700); font-style: normal; }

/* ------------------------------------------------------------------ Meldungen */
.toast-host {
  position: fixed; bottom: var(--space-6); left: 50%; transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: var(--space-2); align-items: center;
}
.toast {
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full);
  background: var(--ink-900); color: var(--surface-0);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  animation: toast-in var(--dur-base) var(--ease-out);
}
.toast--error { background: var(--danger-500); color: #fff; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ Leerer Zustand */
.empty {
  padding: var(--space-16) var(--space-6);
  text-align: center; color: var(--ink-500);
}
.empty__art {
  width: 72px; height: 72px; margin: 0 auto var(--space-4);
  border-radius: var(--radius-xl);
  background: var(--glass-backdrop);
  display: grid; place-items: center;
}

/* ------------------------------------------------------------------ Modal */
.modal-backdrop {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: rgba(16, 18, 20, 0.45);
  display: grid; place-items: center;
  padding: var(--space-4);
}
.modal {
  width: min(560px, 100%);
  max-height: 86vh;
  background: var(--surface-0);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  /* Spalte statt eines einzigen Scrollbereichs: Kopfzeile und Knopfleiste
     bleiben stehen, nur der Inhalt dazwischen scrollt. Scrollte der ganze
     Dialog, lägen die Knöpfe bei langem Inhalt unterhalb des Sichtfelds,
     und niemand sähe, dass dort noch etwas kommt. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal > .card__header { flex: none; }
.modal > .card__body { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.modal > .modal__footer { flex: none; }

.modal__footer {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-soft);
  background: var(--surface-0);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
/* Auf schmalen Fenstern untereinander, sonst wird der letzte Knopf
   abgeschnitten. */
@media (max-width: 480px) {
  .modal__footer { flex-wrap: wrap; }
  .modal__footer .btn { flex: 1 1 auto; }
}

/* ------------------------------------------------------------------ Schmale Fenster */
@media (max-width: 860px) {
  .sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: var(--z-dropdown);
    transform: translateX(-100%);
    transition: transform var(--dur-base) var(--ease-out);
  }
  .sidebar[data-open="true"] { transform: none; box-shadow: var(--shadow-lg); }
  :root { --card-min-width: 220px; }
}