/* ------------------------------------------------------------------
   Direktorium - Gestaltungssystem fuers Backend
   Abhaengigkeiten: muss NACH css/app.css geladen werden.

   Richtung: der Entwurf "Direktorium Modern" - Seitenleiste, weiche
   Ebenen, feine Kanten, ein Akzent. Das Rot #E84830 stammt aus
   "TEMPO REDESIGNED" und ist dort der einzige Hexwert.

   Aufbau
     1  Tokens (hell, dunkel nach System, dunkel/hell nach Wahl)
     2  Grundlage
     3  Rahmen: Seitenleiste, Kopfleiste, Inhalt
     4  Bausteine: Knopf, Feld, Chip, Menue
     5  Altbestand: bestehende Klassen auf die Tokens umgelegt

   Zu Abschnitt 5: bg-lila, bg-search-dropdown und text-lila sind
   eigene Klassen und stecken 348-mal in den Views. Die Tailwind-
   Utilities darunter werden hier mit gleicher Spezifitaet noch einmal
   definiert; weil diese Datei nach app.css geladen wird, gewinnen sie
   ohne !important. Diese Reihenfolge ist tragend.
   ------------------------------------------------------------------ */

/* === 1 - Tokens ==================================================== */

:root {
  --tm-bg:        #F4F4F5;
  --tm-rail:      #EBEBED;
  --tm-panel:     #FFFFFF;
  --tm-raised:    #FFFFFF;
  --tm-hover:     rgba(17, 17, 20, .045);
  --tm-border:    rgba(17, 17, 20, .085);
  --tm-border-2:  rgba(17, 17, 20, .15);
  --tm-text:      #111114;
  --tm-muted:     #5C5C65;
  /* Im Entwurf #9A9AA3 - auf Weiss nur 2,7 : 1. Fuer Text zu wenig. */
  --tm-faint:     #767680;
  --tm-accent:    #E84830;
  --tm-accent-2:  #D23C25;
  --tm-accent-soft: rgba(232, 72, 48, .11);
  --tm-accent-ink: #FFFFFF;
  --tm-good:      #2F7D4F;
  --tm-shadow-1:  0 1px 2px rgba(17,17,20,.05), 0 1px 1px rgba(17,17,20,.03);
  --tm-shadow-2:  0 10px 30px -12px rgba(17,17,20,.22), 0 2px 6px rgba(17,17,20,.06);
  --tm-shadow-3:  0 24px 60px -18px rgba(17,17,20,.35), 0 4px 14px rgba(17,17,20,.08);
  --tm-glass:     rgba(244, 244, 245, .8);

  --tm-r-sm: 7px;
  --tm-r:    9px;
  --tm-r-lg: 12px;

  --tm-rail-w: 244px;

  /* Inter ist Platzhalter, bis die Schrift aus dem Deck gewaehlt ist. */
  --tm-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --tm-mark: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --tm-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tm-bg:        #131316;
    --tm-rail:      #0F0F12;
    --tm-panel:     #1A1A1E;
    --tm-raised:    #212126;
    --tm-hover:     rgba(255, 255, 255, .05);
    --tm-border:    rgba(255, 255, 255, .075);
    --tm-border-2:  rgba(255, 255, 255, .14);
    --tm-text:      #EDEDF0;
    --tm-muted:     #A3A3AC;
    --tm-faint:     #878791;
    --tm-accent:    #F0553C;
    --tm-accent-2:  #FF6A52;
    --tm-accent-soft: rgba(240, 85, 60, .16);
    --tm-good:      #4CAF7A;
    --tm-shadow-1:  0 1px 0 rgba(255,255,255,.03) inset, 0 1px 2px rgba(0,0,0,.4);
    --tm-shadow-2:  0 14px 34px -14px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04);
    --tm-shadow-3:  0 30px 70px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.06);
    --tm-glass:     rgba(19, 19, 22, .74);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --tm-bg:        #131316;
  --tm-rail:      #0F0F12;
  --tm-panel:     #1A1A1E;
  --tm-raised:    #212126;
  --tm-hover:     rgba(255, 255, 255, .05);
  --tm-border:    rgba(255, 255, 255, .075);
  --tm-border-2:  rgba(255, 255, 255, .14);
  --tm-text:      #EDEDF0;
  --tm-muted:     #A3A3AC;
  --tm-faint:     #878791;
  --tm-accent:    #F0553C;
  --tm-accent-2:  #FF6A52;
  --tm-accent-soft: rgba(240, 85, 60, .16);
  --tm-good:      #4CAF7A;
  --tm-shadow-1:  0 1px 0 rgba(255,255,255,.03) inset, 0 1px 2px rgba(0,0,0,.4);
  --tm-shadow-2:  0 14px 34px -14px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04);
  --tm-shadow-3:  0 30px 70px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.06);
  --tm-glass:     rgba(19, 19, 22, .74);
  color-scheme: dark;
}

/* === 2 - Grundlage ================================================= */

html { background-color: var(--tm-bg); }

body {
  background-color: var(--tm-bg);
  color: var(--tm-text);
  font-family: var(--tm-font);
  font-size: 13.5px;
  line-height: 1.45;
  letter-spacing: -.003em;
  -webkit-font-smoothing: antialiased;
}

[x-cloak] { display: none !important; }

.tm-focus:focus-visible,
.tm-rail a:focus-visible,
.tm-rail button:focus-visible,
.tm-btn:focus-visible,
.tm-chip:focus-visible,
.tm-icon-btn:focus-visible {
  outline: 2px solid var(--tm-accent);
  outline-offset: 2px;
}

/* === 3 - Rahmen ==================================================== */

.tm-app {
  display: grid;
  grid-template-columns: var(--tm-rail-w) minmax(0, 1fr);
  min-height: 100vh;
}

/* --- Seitenleiste --- */

.tm-rail {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px 12px 14px;
  background: var(--tm-rail);
  border-right: 1px solid var(--tm-border);
  overflow-y: auto;
  z-index: 30;
}

.tm-brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 2px 8px 4px;
  text-decoration: none;
  color: var(--tm-text);
}
.tm-brand__wm { display: inline-flex; align-items: center; font-size: 23px; line-height: 1; }
/* Das echte TEMPO-Logo (public/img/tempo-logo.png) als Maske: eine Datei, die Farbe
   kommt aus dem Design (schwarz, weiss, Akzent, Lichtstreifen beim Laden). */
.tm-logo {
  display: inline-block; height: .8em; aspect-ratio: 1000 / 439; vertical-align: -.04em; flex: none;
  background: currentColor;
  -webkit-mask: url(/img/tempo-logo.png) center / contain no-repeat; mask: url(/img/tempo-logo.png) center / contain no-repeat;
  -webkit-background-clip: border-box !important; background-clip: border-box !important; -webkit-text-fill-color: currentColor;
}
.tm-brand__sub { font-size: 11px; color: var(--tm-faint); font-weight: 500; letter-spacing: .02em; }

.tm-nav { display: flex; flex-direction: column; gap: 1px; }
.tm-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 10px;
  border-radius: var(--tm-r-sm);
  color: var(--tm-muted);
  text-decoration: none;
  font-weight: 500;
  transition: background .12s ease, color .12s ease;
}
.tm-nav a:hover { background: var(--tm-hover); color: var(--tm-text); }
.tm-nav a[aria-current="page"] {
  background: var(--tm-panel);
  color: var(--tm-text);
  box-shadow: var(--tm-shadow-1);
}
.tm-nav a[aria-current="page"] svg { color: var(--tm-accent); }
.tm-nav svg { width: 16px; height: 16px; flex: none; }
.tm-nav__count {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--tm-faint);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}

.tm-rail__h {
  margin: 0;
  padding: 0 10px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tm-faint);
}

.tm-recent { display: flex; flex-direction: column; gap: 1px; }
.tm-recent a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  height: 30px;
  padding: 0 10px;
  border-radius: var(--tm-r-sm);
  color: var(--tm-muted);
  text-decoration: none;
  font-size: 13px;
}
.tm-recent a:hover { background: var(--tm-hover); color: var(--tm-text); }
.tm-recent__dot { width: 8px; height: 8px; border-radius: 3px; flex: none; }
.tm-recent__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tm-me {
  position: relative;
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 11px;
  border: 1px solid var(--tm-border);
  background: var(--tm-panel);
}
.tm-me__btn {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  padding: 2px;
  border: 0;
  border-radius: var(--tm-r-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.tm-me__btn:hover .tm-me__n { color: var(--tm-accent); }
.tm-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(140deg, #F0553C, #B8321F);
}
.tm-me__who { min-width: 0; }
.tm-me__n { font-weight: 600; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .12s ease; }
.tm-me__r { font-size: 11px; color: var(--tm-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Das Kontomenue oeffnet nach OBEN - es sitzt am Fuss der Leiste.
   Das Jetstream-Dropdown kennt nur "nach unten" und waere dort aus dem
   Bild gelaufen. */
.tm-menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
  padding: 6px;
  border-radius: var(--tm-r-lg);
  background: var(--tm-raised);
  border: 1px solid var(--tm-border);
  box-shadow: var(--tm-shadow-3);
  z-index: 60;
}
.tm-menu__h {
  padding: 8px 10px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tm-faint);
}
.tm-menu a,
.tm-menu button.tm-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: var(--tm-r-sm);
  background: transparent;
  color: var(--tm-text);
  font: inherit;
  font-size: 13px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.tm-menu a:hover,
.tm-menu button.tm-menu__item:hover { background: var(--tm-hover); }
.tm-menu hr { border: 0; border-top: 1px solid var(--tm-border); margin: 6px 4px; }
.tm-menu .tm-menu__danger { color: var(--tm-accent); }

/* --- Hauptbereich --- */

.tm-main { min-width: 0; display: flex; flex-direction: column; }

.tm-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  min-height: 56px;
  padding: 10px 28px;
  background: var(--tm-glass);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--tm-border);
}
.tm-crumbs { display: flex; align-items: center; gap: 8px; color: var(--tm-faint); font-weight: 500; }
.tm-crumbs b { color: var(--tm-text); font-weight: 600; }
.tm-crumbs svg { width: 12px; height: 12px; }
.tm-topbar__slot { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.tm-topbar__slot:empty { display: none; }

.tm-content { flex: 1; padding: 24px 0 110px; }

/* --- schmal: die Leiste wird zur Kopfzeile --- */

@media (max-width: 860px) {
  .tm-app { grid-template-columns: minmax(0, 1fr); }
  .tm-rail {
    position: sticky;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-right: 0;
    border-bottom: 1px solid var(--tm-border);
    overflow: visible;
  }
  .tm-rail__recent, .tm-me__who { display: none; }
  .tm-nav {
    order: 3;
    width: 100%;
    flex-direction: row;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -4px;
  }
  .tm-nav::-webkit-scrollbar { display: none; }
  .tm-nav a { flex: none; }
  .tm-nav__count { display: none; }
  .tm-me { margin: 0 0 0 auto; padding: 4px; border: 0; background: transparent; }
  .tm-menu { left: auto; right: 0; bottom: auto; top: calc(100% + 8px); width: 240px; }
  .tm-topbar { position: static; padding: 10px 16px; }
}

/* === 4 - Bausteine ================================================= */

.tm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 32px;
  padding: 0 13px;
  border-radius: var(--tm-r);
  border: 1px solid var(--tm-border);
  background: var(--tm-panel);
  color: var(--tm-text);
  font-family: inherit;
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1;
  white-space: nowrap;
  box-shadow: var(--tm-shadow-1);
  cursor: pointer;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease, transform .1s ease, filter .15s ease;
}
.tm-btn:hover { border-color: var(--tm-border-2); }
.tm-btn:active { transform: translateY(1px); }
.tm-btn svg { width: 14px; height: 14px; }
.tm-btn[disabled] { opacity: .4; cursor: default; }
.tm-btn--primary {
  background: var(--tm-accent);
  border-color: transparent;
  color: var(--tm-accent-ink);
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 6px 16px -6px rgba(232,72,48,.6);
}
.tm-btn--primary:hover { filter: brightness(1.06); border-color: transparent; }

.tm-icon-btn {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: none;
  padding: 0;
  border-radius: var(--tm-r-sm);
  border: 1px solid var(--tm-border);
  background: transparent;
  color: var(--tm-muted);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.tm-icon-btn:hover { color: var(--tm-text); border-color: var(--tm-border-2); background: var(--tm-hover); }
.tm-icon-btn svg { width: 15px; height: 15px; display: block; }

/* Welches Zeichen der Themenknopf zeigt: das, wohin ein Klick fuehrt. */
/* genauer als ".tm-icon-btn svg", das sonst beide Symbole zeigte */
.tm-icon-btn svg.tm-sun { display: none; }
.tm-icon-btn svg.tm-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tm-icon-btn svg.tm-sun { display: block; }
  :root:not([data-theme="light"]) .tm-icon-btn svg.tm-moon { display: none; }
}
:root[data-theme="dark"] .tm-icon-btn svg.tm-sun { display: block; }
:root[data-theme="dark"] .tm-icon-btn svg.tm-moon { display: none; }
:root[data-theme="light"] .tm-icon-btn svg.tm-sun { display: none; }
:root[data-theme="light"] .tm-icon-btn svg.tm-moon { display: block; }

.tm-input {
  height: 34px;
  padding: 0 12px;
  border-radius: var(--tm-r);
  border: 1px solid var(--tm-border);
  background: var(--tm-panel);
  color: var(--tm-text);
  font-family: inherit;
  font-size: 13.5px;
  box-shadow: var(--tm-shadow-1);
}
.tm-input::placeholder { color: var(--tm-faint); }
.tm-input:hover { border-color: var(--tm-border-2); }
.tm-input:focus { outline: none; border-color: var(--tm-accent); box-shadow: 0 0 0 3px var(--tm-accent-soft); }

.tm-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid var(--tm-border);
  background: var(--tm-panel);
  color: var(--tm-muted);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  box-shadow: var(--tm-shadow-1);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.tm-chip:hover { color: var(--tm-text); border-color: var(--tm-border-2); }
.tm-chip__n { color: var(--tm-faint); font-variant-numeric: tabular-nums; font-weight: 400; }
.tm-chip[aria-pressed="true"],
.tm-chip.is-active { background: var(--tm-accent-soft); border-color: transparent; color: var(--tm-accent); }
.tm-chip[aria-pressed="true"] .tm-chip__n,
.tm-chip.is-active .tm-chip__n { color: var(--tm-accent); opacity: .75; }

/* --- Seitenbausteine, die jede neu gebaute Seite teilt --- */

/* Volle Breite: Kachel-Raster fuellen sich per auto-fill auf, Textbloecke haben eigene Grenzen */
.tm-page { padding: 4px 28px 0; }
@media (max-width: 860px) { .tm-page { padding: 0 16px; } }

.tm-head { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 18px; }
.tm-title { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -.025em; line-height: 1.1; }
.tm-head__meta { color: var(--tm-faint); font-size: 13px; padding-bottom: 3px; }
.tm-head__spacer { flex: 1; }

.tm-seg {
  display: inline-flex; padding: 2px; gap: 2px;
  background: var(--tm-hover); border: 1px solid var(--tm-border); border-radius: var(--tm-r);
}
.tm-seg button {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px; border: 0; border-radius: var(--tm-r-sm);
  background: transparent; color: var(--tm-muted);
  font: inherit; font-weight: 500; font-size: 12.5px; cursor: pointer;
}
.tm-seg button svg { width: 14px; height: 14px; }
.tm-seg button[aria-pressed="true"] { background: var(--tm-panel); color: var(--tm-text); box-shadow: var(--tm-shadow-1); }
.tm-seg button:focus-visible { outline: 2px solid var(--tm-accent); outline-offset: 2px; }

.tm-link {
  border: 0; background: none; padding: 0 2px; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--tm-muted);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--tm-border-2);
}
.tm-link:hover { color: var(--tm-text); text-decoration-color: currentColor; }

.tm-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 16px; padding: 10px 14px; border-radius: var(--tm-r);
  background: var(--tm-panel); border: 1px solid var(--tm-border); box-shadow: var(--tm-shadow-1);
  font-size: 13px; color: var(--tm-text);
}
.tm-banner.hidden { display: none; }
.tm-banner a { color: var(--tm-accent); font-weight: 500; text-decoration: none; }
.tm-banner--good { border-left: 3px solid var(--tm-good); }
.tm-banner--bad { border-left: 3px solid var(--tm-accent); }

.tm-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 64px 16px; text-align: center; color: var(--tm-muted);
  border: 1px dashed var(--tm-border-2); border-radius: var(--tm-r-lg);
}
.tm-empty b { color: var(--tm-text); font-size: 15px; }

.tm-pager { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.tm-pager__btns { display: flex; align-items: center; gap: 6px; }
.tm-pager__page { padding: 0 8px; font-size: 12.5px; color: var(--tm-muted); }
.tm-icon-btn[disabled] { opacity: .35; cursor: default; }
.tm-icon-btn[disabled]:hover { color: var(--tm-muted); border-color: var(--tm-border); background: transparent; }

/* Reiter */
.tm-tabs { display: flex; gap: 2px; flex-wrap: wrap; margin-bottom: 16px; border-bottom: 1px solid var(--tm-border); }
.tm-tabs button {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent; background: transparent; cursor: pointer;
  color: var(--tm-muted); font: inherit; font-weight: 500; font-size: 13px;
}
.tm-tabs button:hover { color: var(--tm-text); }
.tm-tabs button[aria-selected="true"] { color: var(--tm-text); border-bottom-color: var(--tm-accent); }
.tm-tabs button:focus-visible { outline: 2px solid var(--tm-accent); outline-offset: -2px; }
.tm-tabs__n { font-size: 11.5px; font-weight: 400; color: var(--tm-faint); padding: 1px 6px; border-radius: 999px; background: var(--tm-hover); }

/* Werkzeugzeile ueber Listen */
.tm-toolbar { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 14px; }
.tm-field-search {
  display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 11px; flex: 0 1 380px; min-width: 220px;
  border-radius: var(--tm-r); border: 1px solid var(--tm-border); background: var(--tm-panel);
  box-shadow: var(--tm-shadow-1); color: var(--tm-faint);
}
.tm-field-search:focus-within { border-color: var(--tm-accent); box-shadow: 0 0 0 3px var(--tm-accent-soft); }
.tm-field-search svg { width: 15px; height: 15px; flex: none; }
.tm-field-search input {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0 !important; outline: 0; box-shadow: none !important;
  background: transparent !important; color: var(--tm-text); font: inherit; font-size: 13.5px;
}
.tm-field-search input::placeholder { color: var(--tm-faint); }
.tm-check { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--tm-muted); cursor: pointer; }
.tm-check input { accent-color: var(--tm-accent); width: 15px; height: 15px; margin: 0; }

/* Tabelle */
.tm-table { border: 1px solid var(--tm-border); border-radius: var(--tm-r-lg); background: var(--tm-panel); box-shadow: var(--tm-shadow-1); overflow: hidden; }
.tm-table__scroll { overflow-x: auto; }
.tm-table table { width: 100%; border-collapse: collapse; min-width: 820px; }
.tm-table th {
  text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--tm-border); white-space: nowrap;
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--tm-faint);
}
.tm-table th button {
  border: 0; background: none; padding: 0; cursor: pointer; font: inherit; letter-spacing: inherit;
  text-transform: inherit; color: inherit; display: inline-flex; align-items: center; gap: 5px;
}
.tm-table th button:hover { color: var(--tm-text); }
.tm-table th[aria-sort="ascending"] button, .tm-table th[aria-sort="descending"] button { color: var(--tm-text); }
.tm-table th[aria-sort="ascending"] button::after { content: "↑"; }
.tm-table th[aria-sort="descending"] button::after { content: "↓"; }
.tm-table td { padding: 11px 14px; border-bottom: 1px solid var(--tm-border); vertical-align: middle; }
.tm-table tbody tr:last-child td { border-bottom: 0; }
.tm-table tbody tr { transition: background .12s ease; }
.tm-table tbody tr.is-link { cursor: pointer; }
.tm-table tbody tr:hover { background: var(--tm-hover); }
.tm-table tbody tr.is-link:hover .tm-pcell__name { color: var(--tm-accent); }
.tm-table tbody tr.is-link:focus-visible { outline: 2px solid var(--tm-accent); outline-offset: -2px; }
.tm-table__num { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--tm-muted); }
.tm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.tm-pcell { display: flex; align-items: center; gap: 11px; min-width: 0; }
.tm-cavatar {
  width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center;
  font-weight: 700; font-size: 11.5px; color: #fff;
}
.tm-pcell__text { min-width: 0; }
.tm-pcell__client { font-size: 11.5px; color: var(--tm-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.tm-pcell__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 360px; transition: color .12s ease; }

.tm-rowtools { display: flex; gap: 4px; justify-content: flex-end; opacity: 0; transition: opacity .12s ease; }
.tm-table tbody tr:hover .tm-rowtools, .tm-table tbody tr:focus-within .tm-rowtools { opacity: 1; }
.tm-icon-btn--danger:hover { color: var(--tm-accent); border-color: var(--tm-accent); }

/* Status */
.tm-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap; text-transform: capitalize; border: 0;
}
.tm-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tm-pill--pitch { color: #B7791F; background: rgba(214, 158, 46, .15); }
.tm-pill--won   { color: #2F855A; background: rgba(56, 161, 105, .15); }
.tm-pill--prep  { color: #3B6FD8; background: rgba(66, 125, 230, .14); }
.tm-pill--off   { color: var(--tm-muted); background: var(--tm-hover); }
.tm-pill--other { color: var(--tm-text); background: var(--tm-hover); }
.tm-pill--none  { color: var(--tm-faint); background: transparent; border: 1px dashed var(--tm-border-2); font-weight: 500; text-transform: none; }
.tm-pill--none::before { display: none; }

/* Zurueck-Link und leiser Knopf */
.tm-back {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; padding: 0;
  border: 0; background: none; cursor: pointer; color: var(--tm-muted); font: inherit; font-weight: 500; font-size: 12.5px;
}
.tm-back:hover { color: var(--tm-text); }
.tm-back svg { width: 14px; height: 14px; }
.tm-back:focus-visible { outline: 2px solid var(--tm-accent); outline-offset: 3px; }
.tm-btn--quiet { background: transparent; box-shadow: none; color: var(--tm-muted); }
.tm-btn--quiet:hover { color: var(--tm-text); }

/* Dialog */
.tm-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px 16px; overflow-y: auto; }
.tm-modal__scrim { position: fixed; inset: 0; background: rgba(8, 8, 10, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.tm-modal__box {
  position: relative; width: 100%; max-width: 620px;
  padding: 22px; border-radius: 16px;
  background: var(--tm-raised); border: 1px solid var(--tm-border); box-shadow: var(--tm-shadow-3);
  color: var(--tm-text);
}
.tm-modal__box--wide { max-width: 1080px; }
.tm-modal__h { margin: 0 0 4px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.tm-modal__lead { margin: 0 0 16px; font-size: 13px; }
.tm-modal__foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 20px; flex-wrap: wrap; }

/* Film abspielen (Movies und Projekte). Immer dunkel, in beiden Modi -
   deshalb feste Farben statt Tokens. */
.tm-player {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center; padding: 56px 20px 24px;
  background: rgba(6, 6, 8, .92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.tm-player__video {
  display: block; max-width: min(1280px, 100%); max-height: calc(100vh - 100px);
  width: auto; height: auto; border-radius: 12px; background: #000;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8);
}
.tm-player__close {
  position: absolute; top: 14px; right: 16px;
  width: 38px; height: 38px; display: grid; place-items: center; padding: 0;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 50%;
  background: rgba(255, 255, 255, .06); color: #fff; cursor: pointer;
}
.tm-player__close:hover { background: rgba(255, 255, 255, .14); }
.tm-player__close:focus-visible { outline: 2px solid var(--tm-accent); outline-offset: 3px; }
.tm-player__close svg { width: 17px; height: 17px; }

.tm-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 16px; }
.tm-field { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--tm-muted); font-weight: 500; }
.tm-field--wide { grid-column: 1 / -1; }
.tm-field .tm-input { width: 100%; }
.tm-field__err { color: var(--tm-accent); font-weight: 400; }

.tm-muted { color: var(--tm-muted); }
.tm-faint { color: var(--tm-faint); }
.tm-num { font-variant-numeric: tabular-nums; }

/* === 5 - Altbestand ================================================
   Bestehende Seiten sollen im neuen Rahmen stimmig aussehen, bevor sie
   einzeln umgebaut werden. Deshalb landen die alten Klassen hier auf
   den Tokens. Wird eine Seite neu gebaut, braucht sie das nicht mehr. */

/* Die drei Hausklassen - der Grossteil der Wirkung. */
.bg-lila {
  background-color: var(--tm-panel);
  border: 1px solid var(--tm-border);
}
.bg-search-dropdown,
.bg-search-dropdown-light { background-color: var(--tm-raised); }
.text-lila { color: var(--tm-text); }
.bottom-color-font { color: var(--tm-faint); }

/* Radien: neun Varianten waren im Umlauf, jetzt drei Stufen. */
.rounded, .rounded-md { border-radius: var(--tm-r-sm); }
.rounded-lg, .rounded-xl { border-radius: var(--tm-r-lg); }
.rounded-t-none { border-top-left-radius: 0; border-top-right-radius: 0; }
.rounded-tl-lg { border-top-left-radius: var(--tm-r-lg); }
.rounded-tr-lg { border-top-right-radius: var(--tm-r-lg); }
.rounded-bl-lg { border-bottom-left-radius: var(--tm-r-lg); }
.rounded-br-lg { border-bottom-right-radius: var(--tm-r-lg); }
.rounded-b-lg  { border-bottom-left-radius: var(--tm-r-lg); border-bottom-right-radius: var(--tm-r-lg); }
.top-corner    { border-top-left-radius: var(--tm-r-lg); border-top-right-radius: var(--tm-r-lg); }
.bottom-corner { border-bottom-left-radius: var(--tm-r-lg); border-bottom-right-radius: var(--tm-r-lg); }
.rounded-full  { border-radius: 9999px; }

/* Graustufen und Text. Stehen VOR den farbigen Flaechen: wo ein
   Element text-white UND bg-red traegt, muss die Flaeche gewinnen,
   sonst wird die weisse Schrift auf dem roten Knopf dunkel. */
.bg-white { background-color: var(--tm-panel); }
.bg-gray-50, .bg-gray-100, .bg-gray-200 { background-color: var(--tm-hover); }
.bg-gray-500, .bg-gray-600 { background-color: var(--tm-border-2); }
.bg-gray-700, .bg-gray-800, .bg-gray-900 { background-color: var(--tm-bg); }

.text-white, .text-gray-100, .text-gray-200, .text-gray-300 { color: var(--tm-text); }
.text-gray-400, .text-gray-500 { color: var(--tm-faint); }
.text-gray-600, .text-gray-700, .text-gray-800, .text-gray-900 { color: var(--tm-muted); }

.border-gray-100, .border-gray-200, .border-gray-300,
.border-gray-400, .border-gray-500 { border-color: var(--tm-border); }

.shadow-sm, .shadow { box-shadow: var(--tm-shadow-1); }
.shadow-md, .shadow-lg, .shadow-xl { box-shadow: var(--tm-shadow-2); }

/* Schwarz - 233x bg-black, 222x border-black, 12x text-black. Im ersten
   Durchgang vergessen, deshalb standen Tabellenkoepfe als schwarze
   Balken im neuen Rahmen.
   Drei Rollen, drei Antworten:
   - Tabellenkoepfe (bg-black ... uppercase): ruhige Kopfzeile mit
     leiser Schrift und feiner Linie, wie in modernen Tabellen ueblich.
   - Kartenkoepfe und sonstige Flaechen: die Karte selbst.
   - Der Rahmen um ein Video: bleibt schwarz. Sonst zeigen Filme in 4:3
     oder Scope helle Balken, und das Bild wirkt ausgewaschen. */
.bg-black { background-color: var(--tm-panel); }
.bg-black.uppercase {
  background-color: transparent;
  color: var(--tm-faint);
  font-size: 11px;
  letter-spacing: .05em;
}
.bg-black:has(video),
.bg-black:has(iframe),
.bg-black:has(canvas) { background-color: #000; }
.border-black { border-color: var(--tm-border); }
.text-black { color: var(--tm-text); }

/* Blau (99x) und Lila (74x) waren zwei Akzente nebeneinander. Beide
   werden zum ruhigen Knopf; den Akzent traegt nur noch .tm-btn--primary. */
.bg-blue-700, .bg-blue-600, .bg-blue-500,
.bg-purple-800, .bg-purple-700, .bg-purple-600,
.bg-bluegray-700, .bg-indigo-600, .bg-indigo-500 {
  background-color: var(--tm-panel);
  color: var(--tm-text);
  border: 1px solid var(--tm-border);
  box-shadow: var(--tm-shadow-1);
}
.bg-blue-700:hover, .bg-blue-600:hover, .bg-blue-500:hover,
.bg-purple-800:hover, .bg-purple-700:hover, .bg-purple-600:hover,
.bg-bluegray-700:hover, .bg-indigo-600:hover, .bg-indigo-500:hover {
  border-color: var(--tm-border-2);
  background-color: var(--tm-panel);
}

/* Rot war schon Fehler und Zerstoeren - das ist der Akzent. */
.bg-red-700, .bg-red-600, .bg-red-500 {
  background-color: var(--tm-accent);
  color: var(--tm-accent-ink);
  border: 1px solid transparent;
}
.bg-red-700:hover, .bg-red-600:hover, .bg-red-500:hover { background-color: var(--tm-accent-2); }
.text-red-500, .text-red-600, .text-red-700 { color: var(--tm-accent); }

.bg-green-500, .bg-green-600 { background-color: var(--tm-good); color: #fff; }
.text-green-500, .text-green-600 { color: var(--tm-good); }

/* Formularfelder, die noch die Tailwind-Grundform tragen. */
.tm-content input[type="text"]:not(.tm-input),
.tm-content input[type="search"]:not(.tm-input),
.tm-content input[type="email"]:not(.tm-input),
.tm-content input[type="password"]:not(.tm-input),
.tm-content input[type="number"]:not(.tm-input),
.tm-content input[type="date"]:not(.tm-input),
.tm-content select:not(.tm-input),
.tm-content textarea:not(.tm-input) {
  background-color: var(--tm-panel);
  color: var(--tm-text);
  border-color: var(--tm-border);
  border-radius: var(--tm-r-sm);
}
.tm-content input:focus, .tm-content select:focus, .tm-content textarea:focus {
  outline: none;
  border-color: var(--tm-accent);
  box-shadow: 0 0 0 3px var(--tm-accent-soft);
}

@media (prefers-reduced-motion: reduce) {
  .tm-nav a, .tm-btn, .tm-chip, .tm-icon-btn, .tm-input, .tm-me__n { transition: none; }
}

/* ------------------------------------------------------------------
   Ladeanzeige (layouts/app.blade.php)
   Balken oben in der Akzentfarbe, bei laengeren Aktionen der
   TEMPO aus der Navigation (Instrument Serif) mit einem Lichtstreifen.
   Die Farben kommen aus den Tokens, passen also in beiden Modi.
   ------------------------------------------------------------------ */
.tm-busy__bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 120; height: 2px;
  opacity: 0; pointer-events: none; overflow: hidden; transition: opacity .15s ease;
}
.tm-busy__bar::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%;
  background: linear-gradient(90deg, transparent, var(--tm-accent) 40%, var(--tm-accent) 60%, transparent);
  animation: tm-busy-bar 1.1s cubic-bezier(.45, .05, .35, 1) infinite;
}
.tm-busy.is-bar .tm-busy__bar { opacity: 1; }

.tm-busy__mark {
  position: fixed; inset: 0; z-index: 110;
  display: grid; place-items: center;
  background: var(--tm-glass);
  background: color-mix(in srgb, var(--tm-bg) 55%, transparent);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s;
}
.tm-busy.is-mark .tm-busy__mark { opacity: 1; visibility: visible; transition: opacity .2s ease; }

.tm-busy__logo {
  display: block; font-size: 64px; line-height: 1;
  color: var(--tm-faint);
  background: linear-gradient(100deg,
      var(--tm-faint) 0%, var(--tm-faint) 38%,
      var(--tm-accent) 48%, var(--tm-accent) 52%,
      var(--tm-faint) 62%, var(--tm-faint) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: tm-busy-sweep 1.4s ease-in-out infinite;
}

@keyframes tm-busy-bar { to { left: 100%; } }
@keyframes tm-busy-sweep { from { background-position: 100% 0; } to { background-position: 0 0; } }

@media (prefers-reduced-motion: reduce) {
  .tm-busy__bar::before { animation: none; left: 0; width: 100%; opacity: .7; }
  .tm-busy__logo { animation: none; background: var(--tm-muted); }
}

/* ------------------------------------------------------------------
   Choose a still (livewire/partials/thumb-picker.blade.php)
   Grosser Film mit festem 16:9-Rahmen, Filmstreifen, rechts die Filme
   zum Durchklicken. Die Buehne ist in beiden Modi dunkel - ein Standbild
   beurteilt man auf Schwarz, nicht auf Hellgrau.
   ------------------------------------------------------------------ */
.tm-pick { z-index: 95; }
.tm-pick__box {
  position: relative; width: 100%; max-width: 1180px;
  background: var(--tm-raised); color: var(--tm-text);
  border: 1px solid var(--tm-border); border-radius: 16px; box-shadow: var(--tm-shadow-3);
  display: flex; flex-direction: column; max-height: calc(100vh - 48px); overflow: hidden;
}
.tm-pick__head { display: flex; align-items: center; gap: 16px; padding: 16px 18px 14px 22px; border-bottom: 1px solid var(--tm-border); }
.tm-pick__heading { flex: 1; min-width: 0; }
.tm-pick__heading h2 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.tm-pick__heading p { margin: 2px 0 0; font-size: 12.5px; color: var(--tm-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-pick__tabs { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--tm-bg); border: 1px solid var(--tm-border); }
.tm-pick__tabs button { height: 28px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--tm-muted); font-size: 13px; font-weight: 500; cursor: pointer; }
.tm-pick__tabs button[aria-selected="true"] { background: var(--tm-panel); color: var(--tm-text); box-shadow: var(--tm-shadow-1); }
.tm-pick__msg { margin: 12px 22px 0; padding: 8px 12px; border-radius: var(--tm-r-sm); background: var(--tm-accent-soft); color: var(--tm-text); font-size: 13px; }

.tm-pick__body { display: grid; grid-template-columns: minmax(0, 1fr) 250px; min-height: 0; overflow: auto; }
.tm-pick__body > :only-child { grid-column: 1 / -1; }
@media (max-width: 860px) { .tm-pick__body { grid-template-columns: 1fr; } }
.tm-pick__main { padding: 18px 22px 12px; min-width: 0; display: grid; gap: 12px; align-content: start; }

.tm-pick__stagewrap { background: #0B0B0D; border-radius: 12px; padding: 14px; display: grid; place-items: center; }
.tm-pick__stage { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; overflow: hidden; border-radius: 4px; }
.tm-pick__stage video { display: block; width: 100%; height: 100%; }
.tm-pick__crop {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  border: 2px solid #fff; cursor: move;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .6);
}
.tm-pick__third { position: absolute; background: rgba(255, 255, 255, .28); pointer-events: none; }
.tm-pick__third--v1, .tm-pick__third--v2 { top: 0; bottom: 0; width: 1px; }
.tm-pick__third--h1, .tm-pick__third--h2 { left: 0; right: 0; height: 1px; }
.tm-pick__third--v1 { left: 33.333%; } .tm-pick__third--v2 { left: 66.666%; }
.tm-pick__third--h1 { top: 33.333%; } .tm-pick__third--h2 { top: 66.666%; }
.tm-pick__ratio {
  position: absolute; left: 6px; top: 6px; padding: 1px 6px; border-radius: 4px;
  background: rgba(0, 0, 0, .6); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; pointer-events: none;
}
.tm-pick__handle {
  position: absolute; right: -7px; bottom: -7px; width: 14px; height: 14px;
  border-radius: 3px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .4); cursor: nwse-resize;
}
.tm-pick__time {
  position: absolute; right: 8px; bottom: 8px; padding: 2px 7px; border-radius: 5px;
  background: rgba(0, 0, 0, .7); color: #fff; font-size: 12px; font-variant-numeric: tabular-nums; pointer-events: none;
}

.tm-pick__strip { position: relative; display: flex; border-radius: 8px; overflow: hidden; cursor: ew-resize; user-select: none; background: #000; }
.tm-pick__strip > div:not(.tm-pick__marker) {
  flex: 1 1 0; aspect-ratio: 16 / 9; background-size: 1000% 2400%; background-repeat: no-repeat; opacity: .75;
}
.tm-pick__strip:hover > div:not(.tm-pick__marker) { opacity: .9; }
.tm-pick__marker {
  position: absolute; top: 0; height: 100%; width: 8.3333%;
  border: 2px solid var(--tm-accent); border-radius: 6px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .15); pointer-events: none;
}
.tm-pick__strip.is-nosprite {
  height: 40px; cursor: ew-resize;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 1px, transparent 1px 8.3333%),
    linear-gradient(#1c1c20, #141417);
}
.tm-pick__strip.is-nosprite > div:not(.tm-pick__marker) { display: none; }
.tm-pick__strip.is-nosprite .tm-pick__marker { box-shadow: none; background: rgba(232, 72, 48, .18); }
.tm-pick__strip.is-nosprite::after {
  content: "No filmstrip for this film – drag to scrub"; position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  font-size: 12px; color: rgba(255,255,255,.55); pointer-events: none;
}
.tm-pick__keys { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: 12px; color: var(--tm-faint); }
.tm-pick__keys .tm-link { margin-left: auto; font-size: 12px; }
.tm-pick kbd {
  display: inline-block; min-width: 18px; padding: 0 4px; border-radius: 4px; text-align: center;
  border: 1px solid var(--tm-border-2); background: var(--tm-panel); font: 600 11px/16px var(--tm-font); color: var(--tm-muted);
}

.tm-pick__side {
  border-left: 1px solid var(--tm-border); display: flex; flex-direction: column;
  /* Die Hoehe gibt der Film links vor; die Liste scrollt darin, statt das
     Fenster mit 100 Namen in die Laenge zu ziehen. */
  height: 0; min-height: 100%;
}
@media (max-width: 860px) { .tm-pick__side { border-left: 0; border-top: 1px solid var(--tm-border); height: auto; min-height: 0; max-height: 220px; } }
.tm-pick__sidehead { padding: 16px 16px 8px; font-size: 13px; font-weight: 600; }
.tm-pick__sidehead small { display: block; font-weight: 400; font-size: 12px; color: var(--tm-faint); margin-top: 2px; }
.tm-pick__films { flex: 1; min-height: 0; overflow: auto; padding: 0 8px 12px; }
.tm-pick__films button {
  display: block; width: 100%; line-height: 1.35; margin-bottom: 1px;
  text-align: left; padding: 7px 9px; border: 0; border-radius: 6px; background: transparent; color: var(--tm-text);
  font-size: 13px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tm-pick__films button:hover { background: var(--tm-hover); }
.tm-pick__films button[aria-pressed="true"] { background: var(--tm-accent-soft); color: var(--tm-accent); font-weight: 600; cursor: default; }

.tm-pick__body--upload { display: block; padding: 18px 22px 8px; }
.tm-pick__drop {
  position: relative; display: grid; place-items: center; gap: 6px; text-align: center; cursor: pointer;
  min-height: 320px; padding: 24px; border: 1.5px dashed var(--tm-border-2); border-radius: 12px;
  background: var(--tm-bg); color: var(--tm-muted); font-size: 13px; overflow: hidden;
}
.tm-pick__drop:hover { border-color: var(--tm-accent); }
.tm-pick__drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.tm-pick__drop svg { width: 28px; height: 28px; color: var(--tm-faint); }
.tm-pick__drop b { color: var(--tm-text); font-size: 14px; }
.tm-pick__drop img { max-width: 100%; max-height: 52vh; border-radius: 6px; aspect-ratio: 16 / 9; object-fit: cover; }
.tm-pick__dropnote { font-size: 12px; color: var(--tm-faint); }

.tm-pick__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 22px 16px; border-top: 1px solid var(--tm-border); }
.tm-pick__foot p { margin: 0; font-size: 12.5px; color: var(--tm-faint); max-width: 520px; }
.tm-pick__actions { display: flex; gap: 8px; }

/* Hinweis unten in der Bildmitte - fuer Meldungen, die man nicht uebersehen soll */
.tm-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 100;
  display: flex; align-items: center; gap: 10px; max-width: min(560px, calc(100% - 32px));
  padding: 10px 8px 10px 16px; border-radius: 12px;
  background: var(--tm-text); color: var(--tm-bg); box-shadow: var(--tm-shadow-3); font-size: 13.5px;
}
.tm-toast .tm-icon-btn { color: inherit; opacity: .7; }
.tm-toast .tm-icon-btn:hover { opacity: 1; background: rgba(127, 127, 127, .2); }

/* Kleine Abfragen (loeschen, umbenennen) */
.tm-ask { max-width: 440px; }
.tm-ask .tm-modal__h { text-wrap: balance; }
.tm-ask__input { width: 100%; height: 38px; margin-top: 4px; }
.tm-btn--danger { background: var(--tm-accent); border-color: var(--tm-accent); color: var(--tm-accent-ink); }
.tm-btn--danger:hover { background: var(--tm-accent-2); border-color: var(--tm-accent-2); }

/* ------------------------------------------------------------------
   Linke Navigation einklappbar (Knopf oben in der Leiste, gemerkt in
   localStorage 'tm-rail'). Schmal: nur Symbole, Namen als Tooltip.
   ------------------------------------------------------------------ */
.tm-rail__top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.tm-rail__toggle { flex: none; color: var(--tm-faint); }
.tm-rail__toggle:hover { color: var(--tm-text); }
.tm-rail__chev { transition: transform .15s ease; transform-origin: 14.5px 12px; }

@media (min-width: 861px) {
  :root[data-rail="mini"] { --tm-rail-w: 64px; }
  :root[data-rail="mini"] .tm-rail { padding-left: 10px; padding-right: 10px; align-items: center; }
  :root[data-rail="mini"] .tm-rail__top { flex-direction: column; gap: 10px; }
  :root[data-rail="mini"] .tm-brand { padding: 2px 0 0; }
  :root[data-rail="mini"] .tm-brand__wm { font-size: 15px; }
  :root[data-rail="mini"] .tm-brand__sub,
  :root[data-rail="mini"] .tm-nav__label,
  :root[data-rail="mini"] .tm-nav__count,
  :root[data-rail="mini"] .tm-rail__recent,
  :root[data-rail="mini"] .tm-me__who { display: none; }
  :root[data-rail="mini"] .tm-rail__chev { transform: scaleX(-1); }
  :root[data-rail="mini"] .tm-nav { align-items: center; }
  :root[data-rail="mini"] .tm-nav a { width: 40px; padding: 0; justify-content: center; }
  :root[data-rail="mini"] .tm-me { flex-direction: column; padding: 6px; gap: 6px; border: 0; background: transparent; }
  :root[data-rail="mini"] .tm-me__btn { padding: 0; justify-content: center; }
  :root[data-rail="mini"] .tm-menu { left: 52px; right: auto; bottom: 0; min-width: 220px; }
}
@media (max-width: 860px) { .tm-rail__toggle { display: none; } }

/* Die alten Dialoge (Share, Links, Notizen, Custom Reel) nutzen z-60 bis
   z-201 - Tailwind liefert aber nur z-0 bis z-50. Ohne diese Regeln lagen sie
   auf keiner Ebene, und die Filmkacheln (z-index 2) malten sich darueber. */
.z-60 { z-index: 60; }
.z-100 { z-index: 100; }
.z-101 { z-index: 101; }
.z-200 { z-index: 200; }
.z-201 { z-index: 201; }
.tm-reelimg { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 10px; border: 1px solid var(--tm-border); border-radius: var(--tm-r); }
.tm-reelimg > span { width: 96px; aspect-ratio: 16 / 9; flex: none; border-radius: 6px; background: #111 center / cover no-repeat; }
.tm-reelimg b { display: block; font-size: 13px; font-weight: 600; }
.tm-reelimg small { font-size: 12px; color: var(--tm-faint); line-height: 1.35; display: block; }

/* "Copy link"-Knopf in Listen (Projekte, Statistik) - window.tmCopyLink im Layout */
.tm-plink__copy {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px; border-radius: 7px;
  border: 1px solid var(--tm-border); background: var(--tm-panel); color: var(--tm-text); font-size: 12px; cursor: pointer;
}
.tm-plink__copy svg { width: 13px; height: 13px; color: var(--tm-muted); }
.tm-plink__copy:hover { border-color: var(--tm-border-2); }
.tm-plink__copy.is-done { border-color: var(--tm-good); color: var(--tm-good); }

/* Filmname mit Fassungs-Etiketten (components/film-name): Titel bis zwei Zeilen, Etiketten nie gekuerzt */
.tm-fname { display: flex; align-items: flex-start; gap: 4px; min-width: 0; white-space: normal; }
.tm-fname__t { min-width: 0; flex: 0 1 auto; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.tm-ver {
  flex: none; margin-top: 1px; padding: 0 5px; border-radius: 4px; border: 1px solid var(--tm-border-2);
  font-size: 10px; line-height: 15px; font-weight: 600; letter-spacing: .02em; color: var(--tm-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Suche in den Filmen eines Regisseurs (Directors, Projekt-Bibliothek) */
.tm-ffind { position: relative; display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 220px; max-width: 340px; }
.tm-ffind svg { position: absolute; left: 10px; width: 15px; height: 15px; color: var(--tm-faint); pointer-events: none; }
.tm-ffind input {
  width: 100%; height: 32px; padding: 0 10px 0 31px; border: 1px solid var(--tm-border); border-radius: 8px;
  background: var(--tm-panel); color: var(--tm-text); font: inherit; font-size: 13px;
}
.tm-ffind input:focus { outline: none; border-color: var(--tm-accent); box-shadow: 0 0 0 3px rgba(232, 72, 48, .15); }
.tm-ffind small { flex: none; font-size: 12px; color: var(--tm-faint); font-variant-numeric: tabular-nums; }
.tm-ffind small:empty { display: none; }
.tm-lib__dir .tm-ffind { display: flex; max-width: none; margin-top: 10px; }