/* ============================================================
   Terminsieb – anwendungseigene Bausteine
   Setzt tokens.css und components.css (Oberflaechen-Standard
   2.18.0) voraus. Alle Werte ueber deren Variablen; neue
   Bausteine stehen hier im Stil des Standards und sind dort
   nachzutragen, sobald ein zweites Projekt sie braucht:
   .deck/.swipe-card, .decisionbar, .notice.
   ============================================================ */

@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/source-sans-3-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/source-sans-3-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/source-sans-3-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

[hidden] { display: none !important; }

/* --- Rahmen ------------------------------------------------ */

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--touch-target);
  padding: 0 var(--space-3);
  margin-bottom: var(--space-3);
  font-weight: var(--weight-bold);
  font-size: var(--font-lg);
  color: var(--color-primary);
  white-space: nowrap;
}

.sidebar__logo { flex: 0 0 28px; }

.sidebar__count {
  margin-left: auto;
  min-width: 24px;
  padding: 0 var(--space-2);
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-primary-text);
  font-size: var(--font-xs);
  font-weight: var(--weight-bold);
  line-height: 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.app--collapsed .sidebar__count { display: none; }
@media (max-width: 1024px) and (min-width: 701px) {
  .sidebar__count, .sidebar__brand .sidebar__label { display: none; }
}

.header__crumb {
  color: var(--color-text-muted);
  font-size: var(--font-sm);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .header .header__toggle { display: none; }
  /* Die eingefahrene Sidebar wirft sonst ihren Schatten an den linken Rand
     (fuer den Standard nachtragen) */
  .sidebar:not(.sidebar--open) { box-shadow: none; }
}

.usermenu__menu form { margin: 0; }
.usermenu__menu button.usermenu__item {
  display: block;
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* --- Hinweis im Fluss (Anmeldung) --------------------------- */

.notice {
  display: block;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid currentColor;
  margin: 0 0 var(--space-4);
  font-size: var(--font-sm);
}
.notice--info   { background: var(--color-primary-soft); color: var(--color-primary); }
.notice--danger { background: var(--color-danger-soft);  color: var(--color-danger); }

/* --- Seiten ohne Navigation --------------------------------- */

.plain {
  background: var(--color-bg-subtle);
  min-height: 100vh;
}
.plain__main {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: var(--space-4);
}
.login { width: min(400px, 100%); }
.login__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.login__title { margin: 0; font-size: var(--font-xl); color: var(--color-primary); }
.login__submit { width: 100%; margin-top: var(--space-2); }
.login__form .form-row + .form-row { margin-top: var(--space-4); }

/* --- Kartenstapel -------------------------------------------
   Die oberste Karte liegt vorn, zwei dahinter deuten den Stapel
   an. Gewischt wird mit Zeigerereignissen; touch-action: pan-y
   laesst das senkrechte Rollen der Seite beim Browser. */

.deck {
  display: block;
  position: relative;
  width: min(520px, 100%);
  margin: 0 auto;
  /* feste Hoehe, damit die Leiste darunter beim Kartenwechsel nicht springt */
  height: clamp(440px, calc(100vh - var(--header-height) - 250px - var(--bottombar-height)), 640px);
}

.swipe-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
  transform-origin: 50% 110%;
  will-change: transform;
}

.swipe-card:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

/* Stapel dahinter */
.swipe-card[data-depth="1"] { transform: translateY(10px) scale(0.965); box-shadow: var(--shadow-sm); }
.swipe-card[data-depth="2"] { transform: translateY(20px) scale(0.93); box-shadow: none; }
/* Hintere Karten sind inert (nicht bedienbar, nicht im Tabulatorlauf) */
.swipe-card[data-depth="2"] .swipe-card__body { visibility: hidden; }

.swipe-card--dragging { cursor: grabbing; transition: none; }
.swipe-card--settling { transition: transform var(--transition-base); }
.swipe-card--leaving  { transition: transform 280ms ease-in, opacity 280ms ease-in; opacity: 0; pointer-events: none; }

.swipe-card__media {
  flex: 0 0 38%;
  min-height: 0;
  position: relative;
  background: var(--color-primary-soft);
  border-radius: 0;
  overflow: hidden;
}

.swipe-card__media img {
  -webkit-user-drag: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top; /* Flyer und Programme: oben steht das Wichtigste */
  display: block;
  pointer-events: none;
}

/* Ohne Bild: grosses Kalenderblatt statt leerer Flaeche */
.swipe-card__date {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  line-height: var(--line-heading);
}
.swipe-card__date-day { font-size: 64px; font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.swipe-card__date-month { font-size: var(--font-lg); }

.swipe-card__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5) var(--space-4);
  overflow-y: auto;
  /* Der Textbereich ist ein eigener Rollbereich – touch-action der Karte
     gilt hier nicht mit, deshalb ausdruecklich setzen. Sonst beansprucht
     der Browser waagerechte Gesten und bricht das Wischen ab. */
  touch-action: pan-y;
  overscroll-behavior: contain;
}

.swipe-card__flags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.swipe-card__title {
  margin: 0;
  font-size: var(--font-xl);
  line-height: var(--line-heading);
  overflow-wrap: break-word;
  hyphens: auto;
}

.swipe-card__fact {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  color: var(--color-text);
}
.swipe-card__fact svg { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 4px; color: var(--color-text-muted); }

/* Textfund: die Stelle, aus der das Datum stammt */
.swipe-card__evidence {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--color-warning);
  background: var(--color-warning-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--font-sm);
  color: var(--color-text);
}
.swipe-card__evidence mark {
  background: none;
  color: inherit;
  font-weight: var(--weight-bold);
  text-decoration: underline;
  text-decoration-color: var(--color-warning);
  text-underline-offset: 2px;
}

.swipe-card__desc {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-sm);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
  white-space: pre-line;
}

.swipe-card__also { margin: 0; font-size: var(--font-sm); color: var(--color-text-muted); }

.swipe-card__links {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-2);
}
.swipe-card__links a { color: var(--color-link); font-size: var(--font-sm); display: inline-flex; align-items: center; gap: var(--space-1); }
.swipe-card__links a svg { width: 16px; height: 16px; }
.swipe-card__links .btn { margin-left: auto; }

/* Wischmarken: Wort und Zeichen, nie nur Farbe */
.swipe-card__stamp {
  position: absolute;
  top: var(--space-5);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 3px solid currentColor;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--font-lg);
  font-weight: var(--weight-bold);
  opacity: 0;
  pointer-events: none;
}
.swipe-card__stamp svg { width: 20px; height: 20px; }
.swipe-card__stamp--accept { left: var(--space-5); color: var(--color-success); transform: rotate(-8deg); }
.swipe-card__stamp--reject { right: var(--space-5); color: var(--color-danger); transform: rotate(8deg); }

/* Ende des Stapels */
.deck .empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
}
.deck .empty .btn-group { justify-content: center; }

.skeleton--w40 { width: 40%; }
.skeleton--w50 { width: 50%; }
.skeleton--w60 { width: 60%; }
.skeleton--w80 { width: 80%; }
.swipe-card--skeleton .swipe-card__media { animation: none; }

/* Auf der Sichten-Seite liegen Toasts am Telefon ueber dem unteren Teil
   der Karte. Sie lassen Gesten durch; nur ihre Knoepfe bleiben bedienbar. */
body:has([data-deck]) .toast { pointer-events: none; }
body:has([data-deck]) .toast button,
body:has([data-deck]) .toast a { pointer-events: auto; }

/* Link in einer Meldung, z.B. "Im Kalender ansehen" – unter dem Text */
.toast__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  min-width: 0;
  flex: 1 1 auto;
}
.toast__link {
  color: inherit;
  font-weight: var(--weight-bold);
  white-space: nowrap;
  text-underline-offset: 2px;
}

/* --- Entscheidungsleiste ------------------------------------
   Feste Leiste wie die Speichern-Leiste des Standards: links der
   Stand ("Noch 12 Vorschläge"), rechts die drei Entscheidungen,
   in der Reihenfolge der Wischrichtung. */

.decisionbar__buttons .btn { min-width: 9rem; justify-content: center; }
.decisionbar__reject { color: var(--color-danger); }

@media (max-width: 700px) {
  .decisionbar { padding: var(--space-3); }
  .decisionbar__status { width: 100%; text-align: center; }
  .decisionbar__buttons { margin-left: 0; width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; }
  .decisionbar__buttons .btn { min-width: 0; padding-inline: var(--space-2); }
  .deck { height: calc(100vh - var(--header-height) - var(--bottombar-height) - 190px); min-height: 380px; }
  .swipe-card__title { font-size: var(--font-lg); }
  .swipe-card__media { flex-basis: 24%; }
  .swipe-card__date-day { font-size: 48px; }
  .swipe-card__body { padding: var(--space-3) var(--space-4); }
}

/* --- Text einfuegen ---------------------------------------- */
.intake__text { min-height: 12rem; }
.filefield__drophint { margin: 0; }

/* Fortschritt der Texterkennung im Dialog (der Balken des Standards steht
   fest am Seitenrand und passt nicht in ein Modal) */
.ocr {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.ocr__progress {
  flex: 0 0 8rem;
  height: 6px;
  accent-color: var(--color-primary);
}

/* --- Verlauf ------------------------------------------------- */

.history-table .col-when { width: 13rem; }
.history-table .col-source { width: 11rem; }
.history-table .col-state { width: 12rem; }
.history-table .col-decided { width: 9rem; }
.history-table .col-actions { width: 9rem; text-align: right; }
.history-table td.col-actions { white-space: nowrap; }
.history-table .cell__title,
.history-table .cell__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.history-cards { display: none; padding: var(--space-3); }
.history-cards .card { align-items: flex-start; }
.history-cards .card__text { min-width: 0; flex: 1 1 auto; }
.history-cards .card__title,
.history-cards .card__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-cards .card__actions { display: flex; gap: var(--space-1); flex: 0 0 auto; }

@media (max-width: 700px) {
  .history-table { display: none; }
  .history-cards { display: flex; }
}

.history__more { display: flex; justify-content: center; }

.state { display: inline-flex; flex-direction: column; gap: 2px; }
.state__detail { font-size: var(--font-xs); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* --- Quellen ------------------------------------------------- */

.sources-table .col-adapter { width: 9rem; }
.sources-table .col-run { width: 16rem; }
.sources-table .col-count { width: 7rem; text-align: right; font-variant-numeric: tabular-nums; }
.sources-table .col-actions { width: 5rem; text-align: right; }
.sources-table .cell__meta a { color: var(--color-link); }
.sources-table .cell__title,
.sources-table .cell__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 700px) {
  .sources-table .col-adapter,
  .sources-table .col-count { display: none; }
  .sources-table .col-run { width: 9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .swipe-card--settling,
  .swipe-card--leaving { transition: none; }
}