/* Exact tokens from the "Touring Advancing – Grafischer Designguide" PDF
   (Navy/Dark Background/Deep Surface/Elevated Surface/Neon Grün/Violett/
   Weiß/Hellgrau/Border, plus the status ramp incl. Cyan for info/new). */
:root {
  --bg: #08111f;
  --bg-panel: #0f1a2c;
  --bg-panel-2: #14233a;
  --border: #24324d;
  --text: #f8fafc;
  --text-dim: #a9b4c5;
  --navy: #062a63;
  --accent: #4f8cff;
  --accent-dim: #1f3a63;
  --green: #64f400;
  --on-green: #08111f;
  --yellow: #ffb547;
  --red: #ff6276;
  --cyan: #21e8ff;
  --gray: #5a6072;
  --radius: 20px;
  /* One type family throughout: Barlow for body text, its condensed sibling
     (Barlow Condensed) for headings — narrow, modern, not playful. */
  --font-heading: "Barlow Condensed", "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* No separate monospace anymore — times/PIN use Barlow too, with tabular
     figures so digits still line up. */
  --font-mono: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

/* Module identity now lives only in --accent/--accent-dim — the dark
   Navy/Black base (--bg/--bg-panel/--bg-panel-2/--border) is shared across
   all modules so the app reads as one product, not four differently
   tinted apps. */
body.module-tour {
  --accent: #7e54ff;
  --accent-dim: #372a63;
}

body.module-band {
  --accent: #c2417a;
  --accent-dim: #4a2038;
}

body.module-admin {
  --accent: #e09a3e;
  --accent-dim: #4a3820;
}

body.module-bagtags {
  --accent: #f59f00;
}
body.module-reisebuero {
  --accent: #21c5c9;
  --accent-dim: #164a4b;
}

body {
  margin: 0;
  font-family: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
  background: var(--bg);
  color: var(--text);
  transition: background-color 0.2s;
}

a { color: inherit; text-decoration: none; }

h1, h2, h3 {
  font-family: var(--font-heading);
}

.schedule-time-input,
.schedule-item b,
#loginPinInput {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.layout {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

.layout-main {
  flex: 1;
  min-width: 0;
}

.sidebar {
  display: none;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
}

.topbar-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: 0.01em;
}

.brand-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.module-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
}

.module-pill {
  border: none;
  background: none;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
}

.module-pill-short { display: none; }

.module-pill.active {
  background: var(--accent);
  color: #fff;
}

.module-pill:hover:not(.active) {
  color: var(--text);
}

.module-pill.logout-pill {
  color: var(--text-dim);
  text-decoration: underline;
}

.module-pill.logout-pill:hover {
  color: var(--text);
}

/* --- Tourmanagement login --- */

.login-screen {
  display: flex;
  justify-content: center;
  padding: 80px 20px;
}

.login-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  width: 100%;
  max-width: 360px;
  text-align: center;
}

.login-logo {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin: 0 auto 16px;
}

.login-card h1 {
  font-size: 23px;
  font-weight: 400;
  letter-spacing: 0;
  margin: 0 0 8px;
}

.login-hint {
  color: var(--text-dim);
  font-size: 13px;
  margin: 0 0 20px;
}

.login-card .field {
  text-align: left;
  margin-bottom: 16px;
}

.login-error {
  color: var(--red);
  font-size: 13px;
  margin-bottom: 12px;
}

.login-card .btn {
  width: 100%;
}

.editor-box {
  display: flex;
  align-items: center;
  gap: 8px;
}

.editor-box label {
  font-size: 12px;
  color: var(--text-dim);
}

.editor-box input {
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 6px 10px;
  width: 120px;
  font-size: 14px;
}

.editor-box input[readonly] {
  color: var(--accent);
  font-weight: 600;
  cursor: default;
}

.app {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 20px 80px;
}

/* --- Desktop sidebar (mirrors the top module-switcher + category tabs +
   Verwaltung menu into a persistent left rail, see paintSidebar() in
   app.js) — mobile keeps the original topbar + bottom tab bar untouched. --- */

.sidebar-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 18px 14px;
  font-weight: 700;
  font-size: 15px;
}

.sidebar-brand img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.sidebar-section {
  padding: 10px 12px;
}

.sidebar-section-label {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  padding: 8px 10px 6px;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  border-radius: 10px;
  padding: 9px 10px;
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.sidebar-item:hover {
  background: var(--bg-panel-2);
  color: var(--text);
}

.sidebar-item.active {
  background: var(--bg-panel-2);
  color: var(--text);
}

.sidebar-item-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.sidebar-item-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sidebar-item-count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  background: var(--bg);
  border-radius: 20px;
  padding: 1px 7px;
}

.sidebar-item.active .sidebar-item-count {
  color: var(--text);
}

.sidebar-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 6px 14px;
}

.sidebar-footer {
  margin-top: auto;
  padding: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-footer .editor-box {
  padding: 8px 10px 4px;
}

.sidebar-footer .editor-box input {
  width: 100%;
}

@media (min-width: 641px) {
  .sidebar {
    display: block;
    width: 250px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    background: var(--bg-panel);
    border-right: 1px solid var(--border);
  }

  .topbar .module-switcher,
  .topbar .editor-box {
    display: none;
  }

  /* Both fully replaced by the sidebar's Kategorien/Verwaltung sections on
     desktop — stay visible only on mobile, where the sidebar is hidden.
     Extra-specific selectors so this wins over the later unconditional
     ".tabs { display: flex }" / ".admin-menu { display: flex }" rules
     further down the file regardless of source order. */
  .layout-main .tabs,
  .layout-main .admin-menu {
    display: none;
  }
}

.aif-developer-logo {
  display: block;
  max-width: 110px;
  width: 100%;
  height: auto;
  margin: 0 auto 14px;
  background: #fff;
  padding: 6px 10px;
  border-radius: 6px;
}

.app-footer {
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
  padding: 18px 20px 28px;
  border-top: 1px solid var(--border);
}
.footer-link { color: var(--accent); text-decoration: none; }
.footer-link:hover { text-decoration: underline; }

/* Help modal contact row ("Sag Hallo") */
.help-contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.help-contact span { color: var(--text-dim); font-size: 13px; }
.help-contact .btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }

.release-notes {
  max-width: 420px;
  margin: -6px auto 24px;
  padding: 0 20px;
  text-align: center;
}

.release-notes summary {
  cursor: pointer;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  list-style: none;
}

.release-notes summary::-webkit-details-marker { display: none; }

.release-notes summary:hover {
  color: var(--text);
}

.release-notes summary::before { content: '▸ '; }
.release-notes[open] summary::before { content: '▾ '; }

.release-list {
  margin-top: 12px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  text-align: left;
}

.release-entry-head {
  margin-bottom: 8px;
}

.release-date {
  font-weight: 800;
  color: var(--accent);
  font-size: 12.5px;
}

.release-notes-group {
  margin-top: 10px;
}

.release-notes-group:first-of-type {
  margin-top: 0;
}

.release-notes-group b {
  color: var(--text);
  font-size: 11.5px;
}

.release-notes-group ul {
  margin: 3px 0 0;
  padding-left: 18px;
  line-height: 1.6;
  font-size: 11.5px;
  color: var(--text-dim);
}

/* --- Show list --- */

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

.section-head h1 {
  font-size: 23px;
  font-weight: 400;
  letter-spacing: 0;
  margin: 0;
}

.section-head-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.admin-menu {
  position: relative;
}

.admin-menu-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px;
  flex-direction: column;
  gap: 2px;
  min-width: 220px;
  z-index: 30;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.admin-menu-item {
  background: none;
  border: none;
  color: var(--text);
  text-align: left;
  padding: 9px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  white-space: nowrap;
}

.admin-menu-item:hover {
  background: var(--bg-panel-2);
}

.view-switcher {
  display: fle;
  gap: 4px;
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
}

.view-pill {
  border: none;
  background: none;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
}

.view-pill.active {
  background: var(--accent);
  color: #fff;
}

.view-pill:hover:not(.active) { color: var(--text); }

/* --- Show list: list view --- */

.show-list-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.show-list-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  transition: border-color 0.15s;
}

.show-list-row-main {
  display: grid;
  grid-template-columns: 2fr 1.2fr 1.2fr 1.2fr;
  gap: 12px;
  align-items: center;
}

.user-row-main {
  grid-template-columns: 1.6fr 1.4fr 1fr auto;
}
.user-list-head {
  display: grid;
  grid-template-columns: 1.6fr 1.4fr 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 4px 17px 8px; /* 16px row padding + 1px border → columns line up */
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}
@media (max-width: 720px) { .user-list-head { display: none; } }

.user-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-self: end;
}

.show-list-row:hover { border-color: var(--accent); }

.show-list-name { font-weight: 700; font-size: 14px; }

.user-row-role {
  display: inline-block;
  margin-left: 8px;
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 8px;
  border: 1px solid currentColor;
  border-radius: 999px;
  vertical-align: middle;
}
/* Neon accent frame per Funktion (colour set inline via --fn-color). */
.user-row-fn {
  border-left: 3px solid var(--fn-color, transparent) !important;
  box-shadow: inset 3px 0 12px -8px var(--fn-color);
}
.user-perm-badge {
  display: inline-block;
  margin-left: 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  vertical-align: middle;
}
.user-perm-badge.perm-super {
  color: #e0ac1f;
  background: color-mix(in srgb, #e0ac1f 15%, transparent);
  border: 1px solid color-mix(in srgb, #e0ac1f 45%, transparent);
}
.user-perm-badge.perm-settings {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
.user-perm-badge.perm-admin {
  color: #38bdf8;
  background: color-mix(in srgb, #38bdf8 15%, transparent);
  border: 1px solid color-mix(in srgb, #38bdf8 45%, transparent);
}
.user-row-namecol {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}
.user-doc-icons {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  vertical-align: middle;
}
/* In the user list the icons sit on their own line under the name, so they
   line up vertically across every row — drop the inline left margin there. */
.user-row-namecol .user-doc-icons { margin-left: 0; }
.user-doc-icon {
  display: inline-flex;
  color: var(--text-dim);
}
/* Status chips: neon-outlined pills — the icon and a glowing frame carry the
   colour (green = on file, red = still missing), on a faint tinted fill. */
.user-doc-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1.5px solid transparent;
  background: transparent;
}
.user-doc-chip.doc-ok {
  color: #39ff8b;
  border-color: #39ff8b;
  background: color-mix(in srgb, #39ff8b 12%, transparent);
  box-shadow: 0 0 6px color-mix(in srgb, #39ff8b 55%, transparent);
}
.user-doc-chip.doc-missing {
  color: #ff3b5c;
  border-color: #ff3b5c;
  background: color-mix(in srgb, #ff3b5c 12%, transparent);
  box-shadow: 0 0 6px color-mix(in srgb, #ff3b5c 55%, transparent);
}
.user-doc-chip.doc-optional {
  color: var(--text-dim);
  border-color: color-mix(in srgb, var(--text-dim) 35%, transparent);
  background: transparent;
}
.user-doc-chip.doc-soon {
  color: #ffb52e;
  border-color: #ffb52e;
  background: color-mix(in srgb, #ffb52e 12%, transparent);
  box-shadow: 0 0 6px color-mix(in srgb, #ffb52e 55%, transparent);
}
.user-doc-chip.doc-expired {
  color: #ff3b5c;
  border-color: #ff3b5c;
  background: color-mix(in srgb, #ff3b5c 12%, transparent);
  box-shadow: 0 0 8px color-mix(in srgb, #ff3b5c 70%, transparent);
  animation: docExpiredPulse 1.6s ease-in-out infinite;
}
@keyframes docExpiredPulse { 0%,100% { box-shadow: 0 0 6px color-mix(in srgb, #ff3b5c 45%, transparent); } 50% { box-shadow: 0 0 12px color-mix(in srgb, #ff3b5c 90%, transparent); } }
.user-no-module {
  font-style: italic;
  color: var(--warn, #e0ac1f);
  opacity: 0.85;
}
.show-list-date, .show-list-place, .show-list-venue {
  font-size: 13px;
  color: var(--text-dim);
}

/* --- Show list: calendar view --- */

.calendar {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.calendar-title {
  font-weight: 700;
  font-size: 15px;
  text-transform: capitalize;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  color: var(--text-dim);
  font-size: 12px;
  margin-bottom: 6px;
  text-align: center;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.cal-cell {
  min-height: 70px;
  background: var(--bg-panel-2);
  border-radius: 6px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cal-cell-empty { background: none; }

/* Today: neon-accent frame + tinted fill so it stands out at a glance. */
.cal-cell-today {
  border: 1.5px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-panel-2));
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 45%, transparent);
}

.cal-day-num {
  font-size: 11px;
  color: var(--text-dim);
}
.cal-cell-today .cal-day-num {
  color: var(--accent);
  font-weight: 700;
}

.cal-show {
  font-size: 10.5px;
  background: var(--accent);
  color: #fff;
  border-radius: 4px;
  padding: 2px 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
/* Past shows stay in the calendar but are clearly greyed out (desaturated +
   dimmed). Hover brings the colour back so details stay reachable. */
.cal-show-past {
  color: rgba(255,255,255,0.75);
  opacity: 0.5;
  filter: grayscale(0.85);
}
.cal-show-past:hover { opacity: 0.9; filter: grayscale(0.15); }

.btn {
  background: var(--green);
  color: var(--on-green);
  border: none;
  border-radius: 18px;
  padding: 9px 16px;
  font-size: 14px;
  cursor: pointer;
  font-weight: 600;
  font-family: "Barlow", inherit;
}

.btn:hover { filter: brightness(1.1); }

.btn.secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}

.btn.secondary:hover {
  border-color: var(--accent);
}

/* Critical actions read as an outline, not a solid block of red — matches
   the design guide's "Critical Button" spec (section 8.3). */
.btn.danger {
  background: transparent;
  border: 1px solid var(--red);
  color: var(--red);
}

.btn.danger:hover {
  background: rgba(255, 98, 118, 0.1);
}

.show-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.show-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: block;
  transition: border-color 0.15s, transform 0.15s;
}

.show-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

/* Multi-select ("Mehrere bearbeiten") */
.show-card[data-bulk-id], .show-list-row[data-bulk-id] { cursor: pointer; }
.show-card[data-selectable="0"], .show-list-row[data-selectable="0"] { opacity: 0.55; cursor: not-allowed; }
.show-card.is-bulk-selected, .show-list-row.is-bulk-selected {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.bulk-cb { width: 16px; height: 16px; accent-color: var(--accent); flex-shrink: 0; cursor: pointer; }
.bulk-bar {
  /* Floats above the (possibly long) show list so the selection count and
     actions — including Löschen — stay visible while selecting. */
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 100;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0; width: max-content; max-width: min(680px, calc(100vw - 32px));
  padding: 10px 14px; border-radius: 12px;
  background: var(--bg-panel); border: 1px solid var(--accent);
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}
.bulk-bar-count { font-weight: 600; margin-right: auto; }
.bulk-field { margin-bottom: 12px; }
.bulk-field select { width: 100%; }
.bulk-section-label { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim); margin: 14px 0 8px; }
.bulk-group { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; background: var(--surface-2, rgba(255,255,255,0.02)); }
.bulk-group > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; padding: 11px 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-dim); user-select: none; }
.bulk-group > summary::-webkit-details-marker { display: none; }
.bulk-group > summary svg { stroke: var(--accent); }
.bulk-group > summary::after { content: '▸'; margin-left: auto; color: var(--text-dim); transition: transform 0.15s ease; }
.bulk-group[open] > summary::after { transform: rotate(90deg); }
.bulk-group > *:not(summary) { margin-left: 14px; margin-right: 14px; }
.bulk-group > *:last-child { margin-bottom: 12px; }
.bulk-editor-mode { display: flex; gap: 16px; margin: 4px 0 10px; }
.bulk-editor-list { max-height: 200px; overflow-y: auto; }

.show-card-name {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.01em;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;               /* badges wrap under a long name instead of overflowing */
  gap: 6px 8px;
  overflow-wrap: anywhere;       /* a very long single-word name breaks rather than pushing out */
}

.show-card-rider {
  font-size: 13px;
}

.show-card-category {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.show-card-imported {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  color: #39ff8b;
  background: color-mix(in srgb, #39ff8b 12%, transparent);
  border: 1px solid #39ff8b;
  border-radius: 999px;
  padding: 2px 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.show-card-booking-status {
  font-size: 10px;
  font-weight: 700;
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.show-card-template {
  font-size: 10px;
  font-weight: 700;
  color: var(--yellow);
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Template shows (isTemplate) get a neon green outline on their card/row so
   they stand out from real, dated shows at a glance in the overview. */
.show-card-is-template {
  border-color: #39ff14;
  box-shadow: 0 0 8px rgba(57, 255, 20, 0.45);
}

.show-card.show-card-is-template:hover,
.show-list-row.show-card-is-template:hover {
  border-color: #39ff14;
  box-shadow: 0 0 12px rgba(57, 255, 20, 0.6);
}

.show-card-meta {
  display: flex;
  gap: 10px;
  color: var(--text-dim);
  font-size: 13px;
  margin-bottom: 4px;
}

.show-card-venue {
  color: var(--text-dim);
  font-size: 13px;
}

.show-schedule-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.schedule-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--text-dim);
  background: var(--bg-panel-2);
  border-radius: 6px;
  padding: 3px 7px;
  white-space: nowrap;
}

.schedule-item b {
  color: var(--text);
  font-weight: 700;
}

.schedule-icon { font-size: 12px; }

.schedule-arrow {
  color: var(--text-dim);
  font-size: 11px;
  opacity: 0.5;
}

.empty-hint {
  color: var(--text-dim);
  padding: 40px 0;
  text-align: center;
}

/* --- Modal --- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Above Leaflet's control/pane z-indexes (up to ~1000) so a preview map can
     never bleed over a modal. */
  z-index: 1200;
}

.modal {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal h2 {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0;
}

/* In-app help guide (openHelpModal) — wider, scrollable, quiet typography. */
.modal-help {
  max-width: 560px;
}
.modal-help h2 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.help-body {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-dim);
}
.help-body h3 {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  margin: 18px 0 6px;
}
.help-body p.help-intro {
  color: var(--text);
  margin: 0 0 6px;
}
.help-body ul {
  margin: 0;
  padding-left: 18px;
}
.help-body li {
  margin-bottom: 4px;
}
.help-body b {
  color: var(--text);
  font-weight: 600;
}

.field {
  margin-bottom: 12px;
}

.field label {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 5px;
}

.field label.checkbox-row {
  display: flex;
  font-size: 13px;
  color: var(--text);
}

.field input,
.field textarea {
  width: 100%;
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 9px 10px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
}

.field input[type="checkbox"] {
  width: auto;
  background: none;
  border: none;
  padding: 0;
}

.field select {
  width: 100%;
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 9px 10px;
  font-size: 14px;
}

.link-btn {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 13px;
  cursor: pointer;
  margin-top: 12px;
  text-decoration: underline;
  padding: 0;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
/* Keep action labels on one line — the row wraps between buttons instead of
   breaking a label mid-word. */
.modal-actions .btn { white-space: nowrap; }

/* --- Generelle Infos (free text per show) --- */
.general-info-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 18px;
}
.general-info-head {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 8px;
}
.general-info-input {
  width: 100%;
  min-height: 64px;
  resize: vertical;
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
}
.general-info-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
}

/* --- User modal: travel data (passport / licence / docs) --- */
.user-travel-section {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px 12px 12px;
  margin: 4px 0 6px;
  background: var(--bg-panel-2);
}
.user-travel-section > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 2px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.user-travel-section > summary::-webkit-details-marker { display: none; }
.user-travel-section > summary::after {
  content: '▾';
  margin-left: auto;
  color: var(--text-dim);
  font-size: 12px;
}
.user-travel-section[open] > summary::after { content: '▴'; }
.field-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.travel-doc-block {
  border-top: 1px solid var(--border);
  margin-top: 10px;
  padding-top: 10px;
}
.travel-doc-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.travel-doc-file { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.travel-doc-file.muted { font-size: 12px; color: var(--text-dim); }
.travel-doc-current {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text);
}
.travel-doc-current.muted { color: var(--text-dim); }
.travel-doc-current .link-btn { display: inline; width: auto; margin: 0; font-size: 12px; }
.travel-doc-current .link-btn.danger { color: var(--danger, #ff6b6b); }
.btn.tiny { padding: 5px 10px; font-size: 12px; }
.td-status { font-size: 12px; color: var(--text-dim); }

/* Upload size-limit hint shown next to upload controls */
.upload-limit-hint {
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
  font-weight: 400;
}

/* Zusatzinfos photo */
.add-details-photo-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--accent);
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 8px;
  cursor: pointer;
}
.details-photo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.details-photo-thumb {
  max-width: 140px;
  max-height: 100px;
  border-radius: 8px;
  border: 1px solid var(--border);
  object-fit: cover;
  cursor: pointer;
  background: var(--bg-panel-2);
}
.details-photo .link-btn { display: inline; width: auto; margin: 0; font-size: 12px; }
.details-photo .link-btn.danger { color: var(--danger, #ff6b6b); }

/* Desktop (mouse): the task title is click-to-edit, so hint it on hover */
@media (hover: hover) and (pointer: fine) {
  .task-title.title-clickable { cursor: text; }
  .task-title.title-clickable:hover { text-decoration: underline dotted; text-underline-offset: 3px; }
}

/* --- Anreise & Abreise: person assignment + travel-info panel --- */
.travel-person-block { margin: 10px 0; }
.travel-person-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.travel-person-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text-dim);
}
.travel-person-row .person-select {
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
}
.travel-person-name { font-size: 13px; font-weight: 500; color: var(--text); }
.travel-info-panel {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--bg-panel-2);
}
.ti-head {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-heading);
  text-transform: uppercase; letter-spacing: 0.1em;
  font-size: 12px; font-weight: 600; color: var(--accent);
  margin-bottom: 10px;
}
.ti-row { display: flex; gap: 10px; padding: 3px 0; font-size: 13px; }
.ti-label { flex: 0 0 42%; color: var(--text-dim); }
.ti-value { flex: 1; color: var(--text); }
.ti-value.muted { color: var(--text-dim); }
.ti-group { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 8px; }
.ti-group-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-dim); margin-bottom: 4px;
}
.ti-doc { display: inline-flex; align-items: center; gap: 5px; width: auto; margin: 0; font-size: 13px; }

/* --- Show header --- */

.show-header {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
}

.show-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.show-title {
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 0;
  margin: 0 0 8px;
}

.show-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  color: var(--text-dim);
  font-size: 14px;
}

.show-facts b {
  color: var(--text);
  font-weight: 600;
}

.admin-overview-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.admin-overview-contact {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  color: var(--text-dim);
  font-size: 13px;
}

.show-managers {
  margin-top: 8px;
  color: var(--text-dim);
  font-size: 13px;
}

.show-managers b {
  color: var(--text);
  font-weight: 600;
}

#showScheduleBar:not(:empty) {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.show-schedule-editor {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.schedule-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
  color: var(--text-dim);
}

.schedule-field-label { white-space: nowrap; }

.schedule-time-input {
  background: none;
  border: none;
  color: var(--text);
  font-weight: 600;
  font-size: 13px;
  width: 68px;
}

.back-link {
  color: var(--text-dim);
  font-size: 13px;
  margin-bottom: 14px;
  display: inline-block;
}

.back-link:hover { color: var(--text); }

/* --- Technischer Rider --- */

.rider-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 20px;
}

.rider-card.rider-empty {
  border-style: dashed;
}

.rider-icon {
  font-size: 22px;
}

.rider-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rider-label {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.rider-filename {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rider-meta {
  font-size: 12px;
  color: var(--text-dim);
}

/* --- Weitere Show-Dokumente --- */

.show-docs {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 20px;
}

.show-docs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.show-docs-label {
  font-family: var(--font-heading);
  font-size: 12px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 500;
}

.show-docs-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.show-doc-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.show-doc-row .rider-info {
  min-width: 0;
  flex: 1;
}

.show-docs-empty {
  font-size: 13px;
  color: var(--text-dim);
}

.show-docs-shared-head {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  margin: 14px 0 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.doc-share-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
}

.doc-share-label {
  font-size: 11.5px;
  color: var(--text-dim);
}

.doc-share-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--text-dim);
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 9px 3px 7px;
  cursor: pointer;
  user-select: none;
}

.doc-share-chip:has(input:checked) {
  color: var(--green);
  border-color: var(--green);
}

.doc-share-chip input {
  margin: 0;
}

/* --- Cross-module progress peek (Technisches Advancing inside Tourmanagement) --- */

.cross-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 16px;
  margin-bottom: 20px;
  font-size: 12.5px;
}

.cross-progress-label {
  font-weight: 600;
  color: var(--text-dim);
  white-space: nowrap;
}

.cross-progress-bar {
  flex: 1;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
  max-width: 200px;
}

.cross-progress-fill {
  display: block;
  height: 100%;
  background: var(--green);
  border-radius: 3px;
}

.cross-progress-pct {
  font-weight: 700;
  min-width: 34px;
}

.cross-progress-sub {
  color: var(--text-dim);
  white-space: nowrap;
}

/* --- Overview --- */

.overview-section {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 20px;
}

.overview-total-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.progress-ring {
  flex-shrink: 0;
}

.progress-ring-text {
  fill: var(--text);
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
}

.overview-total-label {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0;
}

.overview-total-sub {
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 2px;
}

.overview-problem-flag {
  color: var(--red);
  font-weight: 700;
}

.overview-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}

.issues-panel {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.issues-panel-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--red);
  margin-bottom: 8px;
}

.issues-panel-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.issue-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 12px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 13px;
}

.issue-row:hover {
  border-color: var(--red);
}

.issue-row-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.issue-row-title {
  flex: 1;
  font-weight: 600;
}

.issue-row-cat {
  color: var(--text-dim);
  font-size: 12px;
}

.overview-card {
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.15s;
}

.cat-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

.cat-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  margin-right: 8px;
  vertical-align: middle;
}

.overview-card:hover,
.overview-card.active {
  border-color: var(--accent);
}

.overview-card-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}

.overview-card-title {
  font-size: 13px;
  font-weight: 700;
}

.overview-card-pct {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dim);
}

.overview-bar {
  display: flex;
  height: 7px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg);
  margin-bottom: 8px;
}

.overview-bar .seg {
  height: 100%;
}

.seg-offen { background: var(--gray); }
.seg-requested { background: var(--cyan); }
.seg-in_arbeit { background: var(--yellow); }
.seg-erledigt { background: var(--green); }
.seg-problem { background: var(--red); }
.seg-nicht_verfügbar { background: var(--accent); }

.overview-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  color: var(--text-dim);
}

.overview-legend .leg {
  display: flex;
  align-items: center;
  gap: 4px;
}

.overview-legend .leg::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gray);
}

.leg-offen::before { background: var(--gray); }
.leg-requested::before { background: var(--cyan); }
.leg-in_arbeit::before { background: var(--yellow); }
.leg-erledigt::before { background: var(--green); }
.leg-problem::before { background: var(--red); }
.leg-nicht_verfügbar::before { background: var(--accent); }

/* Freigabe pro Modul auf den Overview-Karten — aufklappbares Menü. */
.overview-share {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--border);
}
.overview-share > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}
.overview-share > summary::-webkit-details-marker { display: none; }
.overview-share > summary::before {
  content: '▸';
  color: var(--text-dim);
  font-size: 9px;
  transition: transform 0.15s ease;
}
.overview-share[open] > summary::before { transform: rotate(90deg); }
.overview-share-count {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-dim);
  margin-left: auto;
}
.overview-share-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}
.overview-share-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.share-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 9px 3px 6px;
  border-radius: 999px;
  border: 1px solid transparent;
  line-height: 1.4;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.share-pill.disabled { cursor: default; }
.share-pill:not(.disabled):hover { filter: brightness(1.15); }
/* The checkbox is visible so the freigabe reads as an actual checkbox. */
.share-pill .share-toggle {
  width: 14px; height: 14px; margin: 0;
  accent-color: #39ff8b;
  cursor: inherit;
  flex-shrink: 0;
}
.share-pill svg { width: 10px; height: 10px; }
.share-pill.on {
  color: #39ff8b;
  border-color: #39ff8b;
  background: color-mix(in srgb, #39ff8b 12%, transparent);
}
.share-pill.off {
  color: var(--text-dim);
  border-color: var(--border);
  background: transparent;
  opacity: 0.75;
}

/* --- Category tabs --- */

.tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
  flex-wrap: wrap;
}

#categoryActions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.expenses-total-badge {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--green);
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px;
}

/* --- Gästeliste (quota release + admin management) --- */
.guest-quota-row {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.guest-quota-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-dim);
}
.guest-quota-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text);
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 6px 4px 12px;
}
.guest-quota-field input {
  width: 52px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 4px 6px;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}
.guest-quota-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--yellow);
  background: color-mix(in srgb, var(--yellow) 12%, var(--bg-panel-2));
  border: 1px solid color-mix(in srgb, var(--yellow) 40%, transparent);
  border-radius: 999px;
  padding: 5px 12px;
}
.guest-quota-badge.is-full {
  color: var(--red);
  background: color-mix(in srgb, var(--red) 12%, var(--bg-panel-2));
  border-color: color-mix(in srgb, var(--red) 40%, transparent);
}
.guest-origin-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--yellow);
  margin-top: 6px;
}
.guest-admin-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.guest-manager-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 12px;
}
.guest-empty-cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  background: var(--bg-panel);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.guest-empty-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-dim);
}
/* One editable guest row: name on top, the structured fields below. */
.guest-row2 {
  border-bottom: 1px solid var(--border);
  padding: 8px 0;
}
.guest-row2:last-of-type { border-bottom: none; }
.guest-name-row {
  display: flex;
  gap: 8px;
}
.guest-name-input {
  flex: 1 1 60%;
  min-width: 0;
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 7px 10px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
}
.guest-plusone-input {
  flex: 1 1 40%;
  min-width: 0;
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 7px 10px;
  font-family: inherit;
  font-size: 12.5px;
}
@media (max-width: 640px) {
  .guest-name-row { flex-direction: column; }
}
.guest-row2-fields {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 6px;
}
.guest-field-sm {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-dim);
}
.guest-field-sm input {
  width: 52px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 4px 6px;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}
.guest-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: var(--text-dim);
  cursor: pointer;
}
.guest-checkin-select {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.guest-checkin-select.checkin-offen { color: var(--text-dim); }
.guest-checkin-select.checkin-eingecheckt { color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, transparent); }
.guest-checkin-select.checkin-noshow { color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, transparent); }
.guest-row2-fields .guest-del-btn { margin-left: auto; }
.guest-admin-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.guest-admin-row {
  display: grid;
  grid-template-columns: 1fr 150px 90px auto;
  gap: 8px;
  align-items: center;
}
.guest-admin-name {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 6px 8px;
  font-family: inherit;
  font-size: 13px;
}
.guest-admin-origin {
  font-size: 11px;
  font-weight: 600;
  color: var(--yellow);
  text-align: right;
}
.guest-admin-add {
  display: flex;
  gap: 8px;
}
.guest-admin-add input {
  flex: 1;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: inherit;
}
.section-head-count {
  color: var(--text-dim);
  font-weight: 400;
}
@media (max-width: 640px) {
  .guest-admin-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "name del" "status origin";
    row-gap: 4px;
  }
  .guest-admin-name { grid-area: name; }
  .guest-admin-status { grid-area: status; }
  .guest-admin-origin { grid-area: origin; }
  .guest-admin-del { grid-area: del; justify-self: end; }
}

.anreise-sort-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-dim);
}
.anreise-sort-select {
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 12.5px;
}
.running-order-share-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-dim);
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 12px 6px 10px;
  cursor: pointer;
  user-select: none;
}

.running-order-share-toggle:has(input:checked) {
  color: var(--green);
  border-color: var(--green);
}

.tab {
  padding: 10px 16px;
  cursor: pointer;
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  display: flex;
  align-items: center;
  gap: 6px;
}

.tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.tab-count {
  background: var(--bg-panel-2);
  border-radius: 20px;
  padding: 1px 7px;
  font-size: 11px;
  color: var(--text-dim);
}

/* --- Task list --- */

.task-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.task-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  transition: opacity 0.15s, border-color 0.15s, box-shadow 0.15s;
}

/* Brief highlight when jumping to a task from the "braucht Aufmerksamkeit"
   issues panel, so it's obvious which one was targeted. */
.task-card.task-card-flash {
  border-color: var(--red);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 35%, transparent);
  animation: task-card-flash-fade 1.6s ease-out;
}

@keyframes task-card-flash-fade {
  0%, 40% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 45%, transparent); }
  100% { box-shadow: 0 0 0 3px transparent; }
}

.task-card.dragging {
  opacity: 0.4;
}

.task-card.drag-over {
  border-color: var(--accent);
}

/* Shared category task (see SHARED_CATEGORIES / task.shared in app.js) —
   opted into being visible/editable from the other module too. Outlined
   the same way regardless of which module is viewing it, so it's obvious
   at a glance (even to the owning side) that this contact is shared. */
.task-card-shared {
  border: 2px solid #ff1f8f;
  background: rgba(255, 31, 143, 0.06);
}

.shared-origin-hint {
  font-size: 11px;
  font-weight: 600;
  color: #ff1f8f;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Clear color separation between Hotel and Verpflegung (catering) entries
   within the same Hotel & Verpflegung category — see isHotelBundleTask. */
.task-card-hotel {
  border-left: 3px solid #4f8cff;
}

.task-card-verpflegung {
  border-left: 3px solid #e3b341;
}

/* Anreise & Abreise: one collapsible card per person (see taskCardHtml
   category branch + expandedAnreise in app.js). */
.task-card-anreise {
  padding: 0;
  overflow: hidden;
}
.anreise-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: background 0.12s;
}
.anreise-head:hover {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.anreise-chevron {
  background: none;
  border: none;
  color: var(--text-dim);
  padding: 0;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: transform 0.15s;
}
.task-card-anreise.is-expanded .anreise-chevron {
  transform: rotate(90deg);
}
.anreise-avatar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
.anreise-headmain {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.anreise-titlerow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.anreise-headmain .task-title {
  font-weight: 700;
  font-size: 15px;
}
/* Direction badge (arrival / departure) — colour-coded so it reads at a glance
   even when the card is collapsed. */
.anreise-dir-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.anreise-dir-badge.dir-anreise {
  color: #35d07f;
  background: rgba(53, 208, 127, 0.12);
  border-color: rgba(53, 208, 127, 0.5);
}
.anreise-dir-badge.dir-abreise {
  color: #ff9f45;
  background: rgba(255, 159, 69, 0.12);
  border-color: rgba(255, 159, 69, 0.5);
}
.anreise-dir-badge.dir-komplett {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}
/* Small per-leg direction chip inside a travel entry */
.leg-dir-chip {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 1px 6px;
  border-radius: 999px;
  vertical-align: middle;
  margin-right: 4px;
}
.leg-dir-chip.leg-dir-anreise { color: #35d07f; background: rgba(53, 208, 127, 0.14); }
.leg-dir-chip.leg-dir-abreise { color: #ff9f45; background: rgba(255, 159, 69, 0.14); }
/* Avatar ring picks up the direction colour too. */
.anreise-avatar-anreise {
  color: #35d07f;
  background: rgba(53, 208, 127, 0.16);
  border-color: rgba(53, 208, 127, 0.5);
}
.anreise-avatar-abreise {
  color: #ff9f45;
  background: rgba(255, 159, 69, 0.16);
  border-color: rgba(255, 159, 69, 0.5);
}
.anreise-dir-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
}
.anreise-dir-label {
  font-size: 13px;
  color: var(--text-dim);
}
/* Segmented dark/light chooser in the PDF export modal. */
.pdf-theme-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.pdf-theme-opt {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  background: transparent;
  color: var(--text-dim);
  border: none;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.pdf-theme-opt + .pdf-theme-opt {
  border-left: 1px solid var(--border);
}
.pdf-theme-opt.active {
  background: var(--accent);
  color: #fff;
}
.modal.modal-sm { max-width: 380px; }

.anreise-dir-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.anreise-dir-toggle .dir-opt {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  background: transparent;
  color: var(--text-dim);
  border: none;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.anreise-dir-toggle .dir-opt + .dir-opt {
  border-left: 1px solid var(--border);
}
.anreise-dir-toggle .dir-opt.dir-anreise.active {
  background: rgba(53, 208, 127, 0.18);
  color: #35d07f;
}
.anreise-dir-toggle .dir-opt.dir-abreise.active {
  background: rgba(255, 159, 69, 0.18);
  color: #ff9f45;
}
.anreise-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 12px;
  color: var(--text-dim);
}
.anreise-summary-icons {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent);
}
.anreise-summary-chips {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.flight-leg-date {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
}
.flight-date-input {
  min-width: 130px;
  padding: 4px 8px;
  font-size: 12px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.flight-date-input:focus { outline: none; border-color: var(--accent); }

/* Add-leg buttons tinted to match the leg direction (Anreise green / Rückreise orange). */
.btn.dir-btn-anreise { color: #35d07f; border-color: #35d07f66; background: #35d07f1f; }
.btn.dir-btn-anreise:hover { background: #35d07f33; border-color: #35d07f; }
.btn.dir-btn-abreise { color: #ff9f45; border-color: #ff9f4566; background: #ff9f451f; }
.btn.dir-btn-abreise:hover { background: #ff9f4533; border-color: #ff9f45; }

/* Active-time display (self, sidebar) + admin per-user */
.active-time-box {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; margin: 2px 0;
  font-size: 12px; color: var(--text-dim);
}
.active-time-box b { color: var(--text); font-weight: 700; }
.user-active-time {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 3px;
  font-size: 11px; font-weight: 600; color: var(--accent);
}

/* Excel show-import preview */
.import-preview { margin: 8px 0 4px; }
.import-preview-head { font-size: 12px; font-weight: 700; color: var(--text-dim); margin-bottom: 6px; }
.import-preview-list { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow-y: auto; }
.import-preview-row { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.import-preview-name { font-weight: 700; }
.import-preview-meta { font-size: 12px; color: var(--text-dim); }
.import-preview-warn { font-size: 11px; color: #ffcf8f; display: inline-flex; align-items: center; gap: 4px; }

/* User invitation link + edit-sharing list */
.invite-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 4px; }
.invite-result { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 8px; }
.invite-link-box { display: flex; gap: 6px; }
.invite-link-box input { flex: 1; min-width: 0; font-size: 12px; padding: 7px 9px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; }
.editor-share-list { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; margin: 4px 14px 10px; }

/* Read-only show (not owned by / shared with the personal user) */
.readonly-banner {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 14px; padding: 10px 14px;
  font-size: 13px; font-weight: 600;
  color: #ffcf8f;
  background: color-mix(in srgb, #e0820f 14%, transparent);
  border: 1px solid color-mix(in srgb, #e0820f 45%, transparent);
  border-radius: 10px;
}
.readonly-banner svg { flex-shrink: 0; }
/* Admin warning banner: passports expiring soon / expired. */
.expiry-banner {
  margin: 0 0 16px; padding: 12px 16px;
  border-radius: 10px;
  color: #ffd7a1;
  background: color-mix(in srgb, #e0820f 12%, transparent);
  border: 1px solid color-mix(in srgb, #e0820f 45%, transparent);
}
.expiry-banner-head {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 13.5px;
  margin-bottom: 6px;
}
.expiry-banner-head svg { flex-shrink: 0; }
.expiry-banner-list { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.expiry-banner-list li { padding: 2px 0; }
.expiry-jump {
  background: none; border: none; padding: 0; cursor: pointer;
  color: #ffd7a1; font: inherit; font-weight: 600; text-decoration: underline;
}
.expiry-jump:hover { color: #fff; }
.expiry-red { color: #ff8a8a; font-weight: 600; }

/* Personal user's reminder to complete their profile (shown on the show list). */
.profile-reminder-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 16px; padding: 12px 16px;
  border-radius: 10px;
  color: #ffd7a1;
  background: color-mix(in srgb, #e0820f 12%, transparent);
  border: 1px solid color-mix(in srgb, #e0820f 45%, transparent);
}
.profile-reminder-banner .prb-text { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.profile-reminder-banner .prb-text svg { flex-shrink: 0; }

/* Self-service profile screen. */
.profile-card { max-width: 620px; }
.profile-complete-note, .profile-todo-note, .profile-exp-note {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 16px; padding: 10px 14px; border-radius: 10px; font-size: 13px; font-weight: 600;
}
.profile-complete-note { color: #39ff8b; background: color-mix(in srgb, #39ff8b 12%, transparent); border: 1px solid color-mix(in srgb, #39ff8b 40%, transparent); }
.profile-todo-note, .profile-exp-note.warn { color: #ffd7a1; background: color-mix(in srgb, #e0820f 12%, transparent); border: 1px solid color-mix(in srgb, #e0820f 45%, transparent); }
.profile-exp-note.danger { color: #ff8a8a; background: color-mix(in srgb, #ef4444 12%, transparent); border: 1px solid color-mix(in srgb, #ef4444 45%, transparent); }
.profile-complete-note svg, .profile-todo-note svg, .profile-exp-note svg { flex-shrink: 0; }
.profile-receipts-note {
  margin: 0 0 16px; padding: 10px 14px; border-radius: 10px; font-size: 13px;
  color: #ffd7a1; background: color-mix(in srgb, #e0ac1f 12%, transparent); border: 1px solid color-mix(in srgb, #e0ac1f 45%, transparent);
}
.profile-receipts-note .prn-head { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.profile-receipts-note .prn-head svg { flex-shrink: 0; }
.profile-receipts-note .prn-list { margin: 6px 0 0; padding-left: 26px; font-weight: 500; }
.profile-receipts-note .prn-list a { color: var(--accent); }
.profile-reminder-banner.prb-receipts { border-color: color-mix(in srgb, #e0ac1f 55%, transparent); }
.req-star { color: #ef4444; font-weight: 700; }
.req-ok { display: inline-flex; align-items: center; color: #39ff8b; }
.req-missing { display: inline-flex; align-items: center; gap: 3px; color: #ff9a9a; font-size: 11px; font-weight: 600; }
.pf-save-status { font-size: 12.5px; color: var(--text-dim); margin-left: 10px; }
.pf-save-status.ok { color: #39ff8b; }
.pf-save-status.danger { color: #ff8a8a; }

/* Function-group default-rights editor. */
.fg-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-bottom: 14px; }
.fg-card { border: 1px solid var(--border, #2a3550); border-radius: 12px; padding: 14px 16px; background: color-mix(in srgb, var(--text-dim) 5%, transparent); }
.fg-card-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-weight: 600; font-size: 14px; margin-bottom: 10px; }
.fg-custom-tag { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #39ff8b; border: 1px solid color-mix(in srgb, #39ff8b 55%, transparent); border-radius: 999px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; }
.fg-delete-btn { flex-shrink: 0; opacity: 0.7; }
.fg-delete-btn:hover { opacity: 1; color: #ff3b5c; }
.fg-add-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 16px; }
.fg-add-input {
  background: var(--bg-panel-2); border: 1px solid var(--border); color: var(--text);
  border-radius: 6px; padding: 8px 10px; font-size: 13px; font-family: inherit; min-width: 220px;
}
.fg-add-input:focus { outline: none; border-color: var(--accent); }
.fg-field { margin-bottom: 12px; }
.fg-field:last-child { margin-bottom: 0; }
.fg-field > label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 6px; }
.fg-field .checkbox-group { display: flex; flex-direction: column; gap: 6px; }
.fg-field .checkbox-row { font-size: 13px; }
/* Match the app's dark form styling (the browser default select was showing white). */
.fg-field select {
  width: 100%;
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 8px 28px 8px 10px;
  font-size: 13px;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23aab6ca' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.fg-field select:focus { outline: none; border-color: var(--accent); }
/* Same for text/e-mail inputs (group address) — otherwise the browser default
   styling (white box, system font) breaks out of the app's look. */
.fg-field input[type="email"],
.fg-field input[type="text"] {
  width: 100%;
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
}
.fg-field input[type="email"]:focus,
.fg-field input[type="text"]:focus { outline: none; border-color: var(--accent); }
.fg-template-hint { font-size: 12px; color: #8fb7ff; margin-top: 6px; min-height: 1em; }

/* "Meine Erwähnungen" sidebar badge + overview. */
.mentions-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px;
  border-radius: 9px; font-size: 11px; font-weight: 700;
  color: #052e16; background: #39ff8b;
}
.mentions-badge[hidden] { display: none; }
.mention-dropdown[hidden] { display: none; }
.mentions-list { display: flex; flex-direction: column; gap: 10px; }
.mention-card {
  text-align: left; width: 100%; cursor: pointer;
  color: var(--text); font: inherit; /* a <button> otherwise inherits the black UA text colour */
  border: 1px solid var(--border, #2a3550); border-radius: 12px;
  padding: 12px 14px; background: color-mix(in srgb, var(--text-dim) 5%, transparent);
}
.mention-text { color: var(--text); }
.mention-card:hover { border-color: color-mix(in srgb, var(--accent, #7e54ff) 55%, transparent); }
.mention-card.is-unread { border-color: color-mix(in srgb, #39ff8b 55%, transparent); background: color-mix(in srgb, #39ff8b 8%, transparent); }
.mention-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.mention-dot { width: 8px; height: 8px; border-radius: 50%; background: #39ff8b; flex-shrink: 0; }
.mention-show { font-weight: 600; font-size: 13.5px; }
.mention-task { font-size: 12.5px; color: var(--text-dim); }
.mention-time { margin-left: auto; font-size: 11px; color: var(--text-dim); }
.mention-text { font-size: 13px; line-height: 1.45; margin-bottom: 4px; }
.mention-author { font-size: 11.5px; color: var(--text-dim); }

/* Papierkorb (trash) list. */
.trash-section-head { font-size: 16px; font-weight: 600; margin: 0 0 10px; }
.trash-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--border, #2a3550); border-radius: 12px;
  padding: 12px 16px; margin-bottom: 10px;
  background: color-mix(in srgb, var(--text-dim) 5%, transparent);
}
.trash-title { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 7px; }
.trash-title svg { opacity: 0.7; flex-shrink: 0; }
.trash-meta { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
.trash-days { color: #ffb52e; font-weight: 600; }
.trash-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.trash-purge {
  color: #fff;
  background: color-mix(in srgb, #ff3b5c 85%, transparent);
  border: 1px solid #ff3b5c;
}
.trash-purge:hover { background: #ff3b5c; }
.show-readonly .task-list input:not([type="file"]),
.show-readonly .task-list textarea,
.show-readonly .task-list select { pointer-events: none; opacity: 0.7; }
.show-readonly .task-list .icon-btn { display: none; }

/* "+ Neue Person" — green so it stands out from the person dropdown. */
.btn.new-person-btn { background: #35d07f; border-color: #35d07f; color: #06210f; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.btn.new-person-btn:hover { background: #2bb96e; border-color: #2bb96e; }

.leg-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.anreise-summary-route {
  font-weight: 600;
  color: var(--text);
}
.anreise-summary-date {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.anreise-summary-empty {
  font-style: italic;
  opacity: 0.75;
}
.anreise-head-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.anreise-body {
  padding: 4px 14px 14px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.anreise-date-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-dim);
}
@media (max-width: 640px) {
  .anreise-summary { font-size: 11px; }
  .anreise-avatar { width: 30px; height: 30px; font-size: 12px; }
  /* On phones the status select + action icons no longer fit next to the
     name, which squeezed the headmain to width 0 and made everything overlap.
     Let the head wrap so the actions drop onto their own full-width row. */
  .anreise-head { flex-wrap: wrap; }
  .anreise-headmain { flex: 1 1 60%; }
  .anreise-head-actions {
    flex: 1 0 100%;
    justify-content: flex-end;
    margin-top: 6px;
  }
  .anreise-head-actions .status-select { max-width: none; flex: 1 1 auto; }
}

.task-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.drag-handle {
  cursor: grab;
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1;
  padding: 2px 4px;
  user-select: none;
  flex-shrink: 0;
}

.drag-handle:active {
  cursor: grabbing;
}

/* Status pills read as dark-surface + colored border/text (design guide
   section 9) rather than a solid block of color — .status-select (the live
   dropdown) and .status-badge (read-only, e.g. mirrored cards) share the
   same .status-{offen,in_arbeit,erledigt,problem,nicht_verfügbar} color
   overrides below, so both bases must come before those overrides here. */
.status-select {
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  color: var(--text);
  font-family: inherit;
}

.status-select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.status-select option {
  color: var(--text);
  background: var(--bg-panel-2);
}

.status-badge {
  display: inline-block;
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.status-offen { border-color: var(--border); color: var(--text-dim); }
.status-requested { border-color: var(--cyan); color: var(--cyan); }
.status-in_arbeit { border-color: var(--yellow); color: var(--yellow); }
.status-erledigt { border-color: var(--green); color: var(--green); }
.status-problem { border-color: var(--red); color: var(--red); }
.status-nicht_verfügbar { border-color: var(--accent); color: var(--accent); }

/* --- Read-only mirrored task card (e.g. Band module's Anreise & Abreise) --- */

.task-card-readonly {
  opacity: 0.92;
}

.time-readonly {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dim);
  white-space: nowrap;
}

.transport-readonly {
  font-size: 12px;
  color: var(--text-dim);
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  white-space: nowrap;
}

.task-details-readonly {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-dim);
  background: var(--bg-panel-2);
  border-radius: 8px;
  padding: 10px 12px;
}

.task-document-readonly {
  margin-top: 8px;
}

/* --- Booking widget (Band module, on mirrored travel tasks) --- */

.booking-widget {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.booking-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.booking-row input,
.booking-row select {
  flex: 1;
  min-width: 140px;
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
  font-family: inherit;
}

.receipt-widget {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.receipt-required-hint {
  font-size: 12.5px;
  color: var(--yellow);
}
.receipt-filed-row { font-size: 13px; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.receipt-filed-row input { width: 16px; height: 16px; accent-color: var(--accent); }
.receipt-reminder-hint {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--yellow);
  background: color-mix(in srgb, var(--yellow) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--yellow) 45%, transparent);
  border-radius: 8px; padding: 5px 9px;
}
.receipt-closed-hint {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-dim);
  border: 1px dashed var(--border); border-radius: 8px; padding: 5px 9px;
}
.spesen-dropzone {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: var(--text-dim);
  border: 1.5px dashed var(--border); border-radius: 10px; padding: 12px 14px;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.spesen-dropzone.is-dragover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--text); }
.spesen-dropzone .link-btn { color: var(--accent); }

/* --- Band-origin data shown inside Tourmanagement (color-coded amber to
   match the Band module's own accent, so it's obvious at a glance) --- */

.band-info-box {
  margin-top: 8px;
  background: rgba(224, 172, 31, 0.1);
  border: 1px solid rgba(224, 172, 31, 0.4);
  border-radius: 8px;
  padding: 10px 12px;
}

.band-info-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--yellow);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.band-info-line {
  font-size: 13px;
  color: var(--text);
}

.band-info-box .download-receipt-btn {
  margin-top: 6px;
  color: var(--yellow);
}

.band-visibility-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--text-dim);
  cursor: pointer;
}

.shared-contact-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--text-dim);
  cursor: pointer;
}

.shared-contact-info-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.shared-contact-info-btn:hover { color: #ff1f8f; }

.shared-contact-infobox {
  margin-top: 6px;
  background: rgba(255, 31, 143, 0.08);
  border: 1px solid rgba(255, 31, 143, 0.35);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 11.5px;
  color: var(--text-dim);
}

.task-title {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
}

.task-title input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px dashed var(--accent);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  padding: 2px 0;
}

.title-edit-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
}

.title-edit-input {
  flex: 1;
  min-width: 140px;
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  padding: 6px 9px;
}

.category-edit-select {
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  padding: 6px 9px;
}

.icon-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 14px;
  padding: 4px 6px;
}

.icon-btn:hover { color: var(--text); }

/* Inline SVG icon set (see ICONS/icon() in app.js) — replaces emoji
   throughout the app. Inherits color from whatever text it sits in. */
.icon {
  display: inline-block;
  vertical-align: -3px;
  flex-shrink: 0;
}

.icon-btn .icon { vertical-align: -3px; }

.task-details {
  margin-top: 8px;
}

.meal-time-mirror {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-top: 8px;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--text-dim);
  border: 1px solid color-mix(in srgb, var(--cyan) 40%, var(--border));
  border-left: 3px solid var(--cyan);
  border-radius: 10px;
  background: color-mix(in srgb, var(--cyan) 8%, var(--bg-panel-2));
}

.meal-time-mirror b {
  color: var(--text);
}

.meal-time-mirror .meal-mirror-start,
.meal-time-mirror .meal-mirror-end {
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 4px 7px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  width: 92px;
}

/* Mirror note on the Showtag "Essen" source entry. */
.meal-source-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-dim);
}

/* "Gespiegelt" marker on a read-only value that lives in another category. */
.mirror-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--cyan);
  border: 1px solid color-mix(in srgb, var(--cyan) 55%, transparent);
  border-radius: 10px;
  padding: 1px 7px;
}

.details-preview {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
}

.details-text {
  flex: 1;
  font-size: 13px;
  color: var(--text-dim);
  white-space: pre-wrap;
  line-height: 1.4;
}

.add-details-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 12.5px;
  cursor: pointer;
  padding: 2px 0;
  text-decoration: underline;
}

.add-details-btn:hover { color: var(--text); }

/* Hotel-bundle "add sub-element" links now lead with a small icon — align
   it with the label and keep the underline on the text only (via hover). */
.add-details-btn,
.add-hoteldate-btn,
.add-location-btn,
.add-rooms-btn,
.add-hotel-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
}

.add-details-btn:hover,
.add-hoteldate-btn:hover,
.add-location-btn:hover,
.add-rooms-btn:hover,
.add-hotel-btn:hover {
  text-decoration: underline;
}

.details-textarea {
  width: 100%;
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
}

.details-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}

.btn-sm {
  padding: 5px 12px;
  font-size: 12.5px;
}

.show-header-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* --- Task time (Showtag) --- */

.task-list-timeline {
  position: relative;
  padding-left: 118px;
}

.task-list-timeline::before {
  content: '';
  position: absolute;
  left: 102px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--border);
}

.task-card-timeline {
  position: relative;
}

.task-card-timeline::before {
  content: '';
  position: absolute;
  left: -22px;
  top: 18px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gray);
  border: 2px solid var(--bg);
  z-index: 1;
}

/* Start (and end) time, pulled out of the row so every task's time sits in
   the same vertical column regardless of title length — see
   timelineTimeBlock in taskCardHtml(). */
.task-timeline-time {
  position: absolute;
  left: -118px;
  top: 14px;
  width: 90px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.task-timeline-time .time-input,
.task-timeline-time .endtime-input {
  width: 84px;
}

.task-timeline-time .time-sep {
  display: none;
}

.task-timeline-time .add-endtime-btn {
  align-self: flex-end;
}

.task-timeline-dot-erledigt::before { background: var(--green); }
.task-timeline-dot-in_arbeit::before { background: var(--yellow); }
.task-timeline-dot-problem::before { background: var(--red); }
.task-timeline-dot-nicht_verfügbar::before { background: var(--accent); }

.time-input, .endtime-input, .date-input {
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  width: 96px;
}

.date-input {
  width: 140px;
}

.time-sep {
  color: var(--text-dim);
  font-weight: 700;
}

.add-endtime-btn {
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 6px;
  width: 26px;
  height: 26px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.add-endtime-btn:hover {
  color: var(--text);
  border-color: var(--accent);
}

.transport-select {
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 13px;
  font-family: inherit;
}

/* --- Zimmerliste (Hotel & Verpflegung) --- */

.rooms-preview {
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}

.rooms-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.rooms-label {
  font-size: 13px;
  font-weight: 600;
}

.rooms-totals {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.rooms-table {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rooms-row {
  display: grid;
  grid-template-columns: 70px 1fr 128px auto;
  gap: 8px;
  align-items: center;
  font-size: 13px;
}

.rooms-cat {
  font-weight: 700;
  color: var(--accent);
}

.rooms-names { color: var(--text-dim); }

.rooms-second-name {
  display: block;
  margin-left: 14px;
  font-size: 12px;
  color: var(--text-dim);
  opacity: 0.85;
}

.rooms-status-select {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 12px;
}

.room-status-badge-offen { color: var(--text-dim); }
.room-status-badge-in_bearbeitung { color: var(--yellow); }
.room-status-badge-ok { color: var(--green); }
.room-status-badge-abgelehnt { color: var(--red); }

.rooms-doc {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-self: end;
}

.rooms-doc-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 0;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rooms-doc-btn:hover { color: var(--text); }

/* On phones the four fixed columns squeeze the name to nothing, so stack the
   row: category + status on top, the (full-width) name and document below. */
@media (max-width: 640px) {
  .rooms-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "cat    status"
      "names  doc";
    row-gap: 3px;
    column-gap: 10px;
  }
  .rooms-cat { grid-area: cat; }
  .rooms-status-select { grid-area: status; justify-self: end; }
  .rooms-names { grid-area: names; color: var(--text); }
  .rooms-doc { grid-area: doc; justify-self: end; }
  .rooms-second-name { margin-left: 0; }
}

.add-rooms-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 12.5px;
  cursor: pointer;
  padding: 2px 0;
  text-decoration: underline;
}

.add-rooms-btn:hover { color: var(--text); }

.rooms-edit {
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
}

.rooms-edit-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.rooms-edit-row {
  display: flex;
  gap: 8px;
  align-items: center;
  border-radius: 8px;
}

.room-drag-handle {
  cursor: grab;
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
  user-select: none;
  padding: 2px;
}

.room-drag-handle:active { cursor: grabbing; }

.rooms-edit-row.dragging { opacity: 0.4; }

.rooms-edit-row.drag-over {
  box-shadow: inset 0 2px 0 var(--green);
}

.room-names-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.room-names-col .room-names-input {
  flex: none;
}

.room-second-name-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-left: 14px;
}

.room-second-name-row .room-second-name-input {
  flex: 1;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
}

.add-second-name-btn {
  align-self: flex-start;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 11.5px;
  cursor: pointer;
  padding: 2px 0 2px 14px;
  text-decoration: underline;
}

.add-second-name-btn:hover { opacity: 0.85; }

.rooms-edit-row .room-cat-select {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 13px;
  width: 90px;
}

.rooms-edit-row .room-names-input {
  flex: 1;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
}

.rooms-edit-row .room-status-select {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 13px;
  width: 128px;
}

/* --- Task-Dokument (Anreise & Abreise) --- */

.task-document {
  margin-top: 8px;
}

/* --- PDF export filter modal --- */

.checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}

/* Emphasised checkbox row (e.g. "Tickets mitschicken") — accent pill so it
   stands out from the plain options around it. */
.checkbox-row-accent {
  color: var(--accent);
  font-weight: 600;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 8px;
  padding: 6px 10px;
  margin: 2px 0;
}
.checkbox-row-accent svg { stroke: var(--accent); }

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.option-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 8px;
  margin-bottom: 10px;
  cursor: pointer;
}

.option-toggle input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
}

.option-toggle-icon {
  font-size: 17px;
  line-height: 1.2;
}

.option-toggle-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.option-toggle-text b {
  font-size: 13px;
  color: var(--text);
  font-weight: 600;
}

.option-toggle-text small {
  font-size: 11px;
  color: var(--text-dim);
}

.option-toggle-template { border-left-color: #e3b341; }
.option-toggle-archive { border-left-color: var(--text-dim); }
.option-toggle-unlock { border-left-color: var(--red); }

/* --- Task contact (Ansprechpartner) --- */

.task-contact {
  margin-top: 8px;
}

.add-contact-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 12.5px;
  cursor: pointer;
  padding: 2px 0;
  text-decoration: underline;
}

.add-contact-btn:hover { color: var(--text); }

.contact-preview {
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}

.contact-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.contact-name {
  font-size: 13.5px;
  font-weight: 600;
}

.contact-role {
  font-weight: 400;
  color: var(--text-dim);
}

.contact-lines {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 6px;
}

.contact-line {
  font-size: 12.5px;
  color: var(--accent);
  text-decoration: underline;
}

.contact-edit {
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
}

.contact-edit-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.contact-edit-row input {
  flex: 1;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
}

/* --- Task hotel info (Hotel & Verpflegung) --- */

.task-hotel {
  margin-top: 8px;
}

.add-hotel-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 12.5px;
  cursor: pointer;
  padding: 2px 0;
  text-decoration: underline;
}

.add-hotel-btn:hover { color: var(--text); }

.hotel-preview {
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}

.hotel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hotel-name {
  font-size: 13.5px;
  font-weight: 600;
}

.hotel-lines {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 6px;
}

.hotel-line {
  font-size: 12.5px;
  color: var(--text-dim);
}

.hotel-edit {
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hotel-edit input {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
}

/* --- Flight info (Anreise & Abreise, transport = Flugzeug) --- */

.add-flight-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 12.5px;
  cursor: pointer;
  padding: 2px 0;
  text-decoration: underline;
}

.add-flight-btn:hover { color: var(--text); }

.flight-preview {
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.flight-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.flight-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.flight-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
}

.flight-number {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.flight-airline { color: var(--text-dim); font-weight: 400; }

.flight-lines {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.flight-line {
  font-size: 12.5px;
  color: var(--text-dim);
}

.flight-preview .btn { align-self: flex-start; }

/* One leg block within a flight preview (main flight + connecting flights). */
.flight-leg {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.flight-leg-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
}
.flight-leg-title > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.leg-status-select {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-panel-2);
  color: var(--text);
  cursor: pointer;
}
.leg-status-select.leg-status-offen { color: #8a94a6; border-color: #8a94a666; }
.leg-status-select.leg-status-angefragt { color: #21e8ff; border-color: #21e8ff66; }
.leg-status-select.leg-status-gebucht { color: #4f8cff; border-color: #4f8cff66; }
.leg-status-select.leg-status-bestaetigt { color: #35d07f; border-color: #35d07f66; }

.flight-leg-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin-top: 2px;
}

/* Divider between legs in the read-only preview and in the editor. */
.flight-preview .flight-leg + .flight-leg-label,
.flight-legs-edit .flight-leg-edit + .flight-leg-edit {
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

.flight-legs-edit {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.flight-leg-edit {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.flight-leg-edit-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.flight-leg-edit-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-dim);
}

.flight-type-select {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12.5px;
  font-weight: 600;
}

.flight-leg-edit-head .remove-leg-btn {
  margin-left: auto;
}

.flight-edit {
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.flight-edit input {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
  width: 100%;
}

.flight-edit-legs {
  display: flex;
  gap: 8px;
}

.flight-edit-legs input { flex: 1; min-width: 0; }

.hotel-date-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}

.hotel-date-label {
  font-size: 13px;
  font-weight: 600;
}

.add-hoteldate-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 12.5px;
  cursor: pointer;
  padding: 2px 0;
  text-decoration: underline;
}

.add-hoteldate-btn:hover { color: var(--text); }

.hotel-date-edit {
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
}

.hotel-date-edit-row {
  display: flex;
  gap: 10px;
}

.hotel-date-edit-row .field {
  flex: 1;
  margin-bottom: 0;
}

/* --- Task location (Parken, Hotel & Verpflegung) --- */

.task-location {
  margin-top: 8px;
}

.add-location-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 12.5px;
  cursor: pointer;
  padding: 2px 0;
  text-decoration: underline;
}

.add-location-btn:hover { color: var(--text); }

.location-preview {
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
}

.location-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 4px 8px;
}

.location-label {
  font-size: 13px;
  color: var(--text-dim);
}

.location-map-preview {
  width: 100%;
  height: 180px;
  border-radius: 6px;
  overflow: hidden;
  cursor: default;
  /* Contain Leaflet's internal pane z-indexes (200–700) so they can't paint
     over modals/overlays that sit above the map in the page. */
  isolation: isolate;
  position: relative;
  z-index: 0;
}

/* Leaflet basemap toggle (Karte / Satellit) styled for the dark UI */
.leaflet-control-layers {
  background: var(--bg-panel-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
  color: var(--text);
}
.leaflet-control-layers-toggle {
  background-color: var(--bg-panel-2) !important;
  border-radius: 8px !important;
}
.leaflet-control-layers-expanded {
  padding: 8px 10px !important;
  font-family: inherit;
  font-size: 12px;
}
.leaflet-control-layers label {
  color: var(--text);
  margin: 2px 0;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.leaflet-control-layers-separator { border-top-color: var(--border) !important; }

.flight-map-preview {
  margin: 0;
}
.flight-map-wrap {
  position: relative;
  margin: 8px 0;
}
.map-enlarge-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 500;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: rgba(15, 26, 44, 0.85);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(2px);
}
.map-enlarge-btn:hover {
  border-color: var(--accent);
}

/* Enlarged journey map (openFlightMapModal) */
.modal-map {
  max-width: 760px;
  width: 92vw;
  padding: 14px;
}
.map-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-family: var(--font-heading);
  font-weight: 600;
}
.map-modal-head > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.flight-map-large {
  width: 100%;
  height: 64vh;
  border-radius: 12px;
  overflow: hidden;
}

.location-preview .btn {
  margin-top: 8px;
}

.location-edit {
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
}

.location-search-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.location-address-input {
  flex: 1;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
}

.location-map {
  width: 100%;
  height: 240px;
  border-radius: 6px;
  overflow: hidden;
}

.location-hint {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 6px;
}

.location-hint-ok {
  color: #35c176;
}

.location-hint-error {
  color: #ef5a5a;
}

.task-meta {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.task-meta .last-editor {
  color: var(--accent);
  font-weight: 600;
}

.history-toggle {
  cursor: pointer;
  color: var(--text-dim);
  text-decoration: underline;
  background: none;
  border: none;
  font-size: 12px;
  padding: 0;
}

.history-panel {
  margin-top: 10px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.history-entry {
  font-size: 12.5px;
  color: var(--text-dim);
  display: flex;
  gap: 6px;
}

.history-entry .who {
  color: var(--text);
  font-weight: 600;
}

.note-form {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.note-form input {
  flex: 1;
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
}

.add-task-row {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.add-task-row input {
  flex: 1;
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 14px;
}

/* --- Mobile --- */

.mobile-tab-bar {
  display: none;
}

@media (max-width: 640px) {
  /* General compact pass — cards/buttons/pills were tuned for desktop and
     read a bit oversized on a narrow phone screen at their full radius/
     padding/font-size. Scales everything down a notch, not just layout. */
  :root {
    --radius: 14px;
  }

  .app {
    padding: 16px 14px 84px;
  }

  .brand {
    font-size: 16px;
  }

  .btn {
    padding: 8px 14px;
    font-size: 13.5px;
  }

  .btn-sm {
    padding: 5px 10px;
    font-size: 12px;
  }

  /* Segmented control that adapts to however many modules the user actually
     has (1–5). Each pill grows to share the row evenly and wraps if needed;
     the logout link sits full-width underneath. */
  .module-switcher {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    width: 100%;
    border-radius: 14px;
    padding: 4px;
  }

  .module-pill-full { display: none; }
  .module-pill-short { display: inline; }

  .module-pill {
    flex: 1 1 0;
    min-width: 60px;
    padding: 9px 4px;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    border-radius: 10px;
    white-space: nowrap;
  }

  .module-pill.logout-pill {
    flex: 1 1 100%;
    min-width: 0;
    padding: 8px 4px 4px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    border-top: 1px solid var(--border);
    border-radius: 0;
    margin-top: 2px;
  }

  /* Login screen: no modules/editor to show yet — hide them so the login
     card is the clear focus, and lift the card higher up the screen. */
  body.logged-out .topbar .module-switcher,
  body.logged-out .topbar .editor-box,
  body.logged-out .mobile-tab-bar {
    display: none;
  }

  body.logged-out .login-screen {
    padding: 32px 16px 40px;
  }

  .show-title {
    font-size: 21px;
  }

  .section-head h1 {
    font-size: 18px;
  }

  .task-card,
  .show-card {
    padding: 12px 14px;
  }

  .login-card {
    padding: 22px;
  }

  .show-card-name {
    font-size: 14.5px;
  }

  .schedule-field {
    padding: 5px 8px;
    font-size: 12px;
    gap: 4px;
  }

  .schedule-time-input {
    width: 72px;
    font-size: 12.5px;
  }

  .task-list-timeline {
    padding-left: 84px;
  }

  .task-list-timeline::before {
    left: 68px;
  }

  .task-timeline-time {
    left: -84px;
    width: 76px;
  }

  .task-timeline-time .time-input,
  .task-timeline-time .endtime-input {
    width: 76px;
    font-size: 12px;
    padding: 5px 4px;
  }

  .mobile-tab-bar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    background: var(--bg-panel);
    border-top: 1px solid var(--border);
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
  }

  .mobile-tab-bar:empty {
    display: none;
  }

  .mobile-tab-item {
    background: none;
    border: none;
    padding: 7px 11px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Icons are tinted with their category colour (set inline); dim the
       inactive ones so the active tab stands out clearly. */
    opacity: 0.5;
    transition: opacity 0.12s, background 0.12s;
  }

  .mobile-tab-item svg {
    stroke-width: 2.1;
  }

  .mobile-tab-item.active {
    opacity: 1;
    background: color-mix(in srgb, currentColor 20%, transparent);
  }

  .topbar-inner {
    padding: 12px 14px;
  }

  .show-list-row-main,
  .user-row-main {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .user-row-actions {
    justify-self: start;
    margin-top: 4px;
  }

  .show-grid {
    grid-template-columns: 1fr;
  }

  .admin-menu-dropdown {
    left: 0;
    right: auto;
  }

  .modal {
    max-width: none;
    width: calc(100vw - 32px);
  }
}

/* --- Kommentare (An- & Abreise, nur Tourmanagement + Travel Agency) --- */

.task-comments {
  margin-top: 10px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--cyan) 6%, var(--bg-panel-2));
}

/* Compact clickable header — the comment list/input only render when open. */
.comments-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 2px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: var(--cyan);
  text-align: left;
}
.comments-toggle svg:first-child {
  transition: transform 0.15s;
  flex: 0 0 auto;
}
.comments-toggle.is-open svg:first-child {
  transform: rotate(90deg);
}
.comments-toggle .comments-hint {
  margin-left: auto;
}
.task-comments .comments-list {
  margin-top: 10px;
}

.comments-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--cyan);
  margin-bottom: 8px;
}

.comments-hint {
  font-weight: 400;
  font-size: 11px;
  color: var(--text-dim);
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.comments-empty {
  font-size: 12px;
  color: var(--text-dim);
  padding: 2px 0;
}

.comment-item {
  border-left: 2px solid color-mix(in srgb, var(--cyan) 50%, transparent);
  padding: 4px 0 4px 10px;
}

.comment-item-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 3px;
}

.comment-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 10px;
  border: 1px solid var(--border);
}

.comment-badge-tour { color: #b79cff; border-color: color-mix(in srgb, #7e54ff 55%, transparent); }
.comment-badge-reisebuero { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 55%, transparent); }
.comment-badge-technik { color: #7fd7a0; border-color: color-mix(in srgb, #39c46e 55%, transparent); }
.comment-badge-band { color: #ffcf8f; border-color: color-mix(in srgb, #e0820f 55%, transparent); }
.comment-badge-admin { color: #9fb7ff; border-color: color-mix(in srgb, #4f7bff 55%, transparent); }

/* @mention highlight inside comment text. */
.comment-mention { color: #8fb7ff; font-weight: 600; }
.comment-mention-me { color: #052e16; background: #39ff8b; border-radius: 4px; padding: 0 4px; }

.comment-author {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.comment-time {
  font-size: 11px;
  color: var(--text-dim);
}

.comment-delete-btn {
  margin-left: auto;
}

.comment-text {
  font-size: 13px;
  color: var(--text);
  line-height: 1.45;
  white-space: pre-wrap;
}

.comment-add-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.comment-input-wrap { position: relative; flex: 1; }
.comment-input {
  width: 100%;
  resize: vertical;
  min-height: 38px;
  font-family: inherit; /* standard app font, not the browser's monospace default */
  font-size: 13px;
}
/* @mention autocomplete dropdown. */
.mention-dropdown {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(100% + 4px);
  z-index: 40;
  background: var(--surface, #141c2e);
  border: 1px solid var(--border, #2a3550);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.mention-option {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
}
.mention-option svg { opacity: 0.7; flex-shrink: 0; }
.mention-option.is-active, .mention-option:hover { background: color-mix(in srgb, var(--accent, #7e54ff) 22%, transparent); }

/* --- Neon-Marker auf der dunklen Karte --- */

.neon-map-marker { background: none; border: none; }

.neon-map-dot {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--green);
  border: 2px solid #08111f;
  box-shadow: 0 0 0 2px var(--green), 0 0 10px 2px color-mix(in srgb, var(--green) 70%, transparent);
}

/* Transport-mode icon badge sitting on a route leg. */
.neon-mode-marker { background: none; border: none; }

.neon-mode-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #08111f;
  color: var(--green);
  border: 2px solid var(--green);
  box-shadow: 0 0 8px 1px color-mix(in srgb, var(--green) 60%, transparent);
}

.neon-mode-badge .icon { width: 13px; height: 13px; }

/* Journey start/destination flag — distinct cyan neon. */
.neon-flag-marker { background: none; border: none; }

.neon-flag-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #08111f;
  color: var(--cyan);
  border: 2px solid var(--cyan);
  box-shadow: 0 0 10px 2px color-mix(in srgb, var(--cyan) 65%, transparent);
}

.neon-flag-badge .icon { width: 14px; height: 14px; }

/* Per-segment document row in the flight preview. */
.flight-leg-doc {
  display: flex;
  align-items: center;
  gap: 6px;
}

.add-segdoc-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
}

.add-segdoc-btn:hover { text-decoration: underline; }

/* --- Admin: Zimmer-Anzahl-Zeile + Produktionsdetails-Recap --- */

.rooms-count-row {
  display: flex;
  gap: 8px;
}

.rooms-count-row input {
  flex: 1;
  min-width: 0;
}

.production-summary {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 18px;
}

.production-summary-title {
  font-size: 15px;
  margin: 0 0 12px;
}

.production-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px 20px;
}

.production-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
  font-size: 13px;
}

.production-key {
  color: var(--text-dim);
}

.production-val {
  color: var(--text);
  font-weight: 600;
  text-align: right;
}

/* --- Abrechnungs-Status-Icon auf den Show-Karten --- */

.show-card-payment {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.show-card-payment .icon { width: 15px; height: 15px; }
.show-card-payment-deposit { color: var(--yellow); }
.show-card-payment-settled { color: var(--green); }

/* Inline status for the "Fluginfos abrufen" lookup (no external tab). */
.flight-search-msg {
  font-size: 12.5px;
  margin: -2px 0 8px;
}
.flight-search-msg-info { color: var(--text-dim); }
.flight-search-msg-success { color: var(--green); }
.flight-search-msg-error { color: var(--red); }

/* --- Technik: Aufgaben-Zuweisung + "Meine Aufgaben" --- */

.task-assignee {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-dim);
}

.task-assignee-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.task-assignee .assignee-select {
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 13px;
}

.bulk-assign {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-dim);
}

.bulk-assign select {
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 6px 9px;
  font-size: 13px;
}

.my-tasks-panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 18px;
}

.my-tasks-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-dim);
  font-size: 14px;
  border-left-color: var(--green);
}

.my-tasks-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 12px;
}

.my-tasks-count {
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 12px;
}

.my-tasks-show { margin-bottom: 10px; }

.my-tasks-show-name {
  display: inline-block;
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  margin-bottom: 4px;
}

.my-tasks-show-date { color: var(--text-dim); font-weight: 400; }

.my-tasks-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  font-size: 13px;
}

.my-tasks-item:hover { background: var(--bg-panel-2); }

.my-tasks-cat { color: var(--text-dim); }
.my-tasks-title { font-weight: 600; }

/* Flight preview action row (Anschluss hinzufügen / Flug verfolgen) */
.flight-preview-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.show-card-headliner {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700;
  color: #e0ac1f;
  background: color-mix(in srgb, #e0ac1f 14%, transparent);
  border: 1px solid color-mix(in srgb, #e0ac1f 45%, transparent);
  padding: 2px 8px; border-radius: 999px;
}

/* Guest-list deadline badge */
.guest-deadline-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600;
  color: var(--text-dim);
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 10px;
}
.guest-deadline-badge.is-past {
  color: #ff6b6b;
  background: color-mix(in srgb, #ff6b6b 12%, transparent);
  border-color: color-mix(in srgb, #ff6b6b 45%, transparent);
}

/* Travel-leg drag & drop (flight editor) */
.leg-drag-handle {
  cursor: grab;
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1;
  padding: 0 4px;
  user-select: none;
}
.leg-drag-handle:active { cursor: grabbing; }
.flight-leg-edit.leg-dragging { opacity: 0.5; }
.flight-leg-edit.leg-drop-target { outline: 2px dashed var(--accent); outline-offset: 2px; }

/* Collapsible sections in the edit-show modal */
.modal-section {
  border: 1px solid var(--border);
  border-radius: 10px;
  margin: 10px 0;
  background: var(--bg-panel-2);
}
.modal-section > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}
.modal-section > summary::-webkit-details-marker { display: none; }
.modal-section > summary::after { content: '▾'; margin-left: auto; color: var(--text-dim); }
.modal-section[open] > summary::after { content: '▴'; }
.modal-section > .field, .modal-section > .option-toggle, .modal-section > .share-grid, .modal-section > .share-grid-hint, .modal-section > .checkbox-row, .modal-section > label { margin-left: 14px; margin-right: 14px; }
.modal-section > *:last-child { margin-bottom: 12px; }

/* Freigaben grid (category × Band/Technik) */
.share-grid { display: flex; flex-direction: column; gap: 2px; margin: 6px 14px 4px; }
.share-grid-row {
  display: grid;
  grid-template-columns: 1fr 64px 64px;
  align-items: center;
  padding: 7px 8px;
  border-radius: 8px;
}
.share-grid-3 .share-grid-row { grid-template-columns: 1fr 58px 58px 58px; }
.share-grid-row:nth-child(even) { background: var(--bg-panel); }
.share-grid-head { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); font-weight: 700; }
.share-grid-head span:not(:first-child), .share-grid-cell { text-align: center; }
.share-grid-cat { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); }
.share-grid-cell { display: flex; justify-content: center; cursor: pointer; }
.share-grid-cell input { width: 17px; height: 17px; }
.share-grid-hint { font-size: 11.5px; color: var(--text-dim); margin: 2px 14px 8px; }

/* User-management name search */
.user-search-wrap { position: relative; margin: 0 0 14px; max-width: 360px; }
.user-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-dim); pointer-events: none; display: flex; }
.user-search-input {
  width: 100%; padding: 9px 12px 9px 36px; font-size: 14px;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px;
}
.user-search-input:focus { outline: none; border-color: var(--accent); }
.user-search-input::placeholder { color: var(--text-dim); }

/* Backups list (Verwaltung) */
.backup-list { display: flex; flex-direction: column; gap: 6px; }
.backup-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm, 8px); background: var(--surface); }
.backup-meta { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.backup-date { font-weight: 600; }
.backup-size { font-size: 11.5px; color: var(--text-dim); font-family: var(--font-mono, monospace); }
.backup-row .link-btn { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }

/* ===================== Bag Tags module ===================== */
.bag-dashboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 4px 0 18px; }
.bag-stat { background: var(--bg-panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.bag-stat-val { font-size: 22px; font-weight: 700; line-height: 1.1; }
.bag-stat-label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px; }
.bag-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.bag-search { flex: 1 1 260px; margin: 0; }
.bag-filter { padding: 8px 10px; border-radius: 8px; background: var(--bg-panel-2); border: 1px solid var(--border); color: var(--text); font-size: 13px; }
.bag-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
.bag-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.bag-table th { text-align: left; padding: 10px 12px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); border-bottom: 1px solid var(--border); white-space: nowrap; }
.bag-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.bag-table tbody tr { cursor: pointer; }
.bag-table tbody tr:hover { background: var(--bg-panel-2); }
.bag-table tbody tr.is-sel { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.bag-cb-cell { width: 32px; }
.bag-thumb { width: 38px; height: 38px; border-radius: 7px; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-panel-2); border: 1px solid var(--border); color: var(--text-dim); }
.bag-thumb-empty { color: var(--text-dim); }
.bag-status-pill, .bag-loc-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
.bag-loc-pill { color: var(--text-dim); border-color: var(--border); }
.bag-bulk-bar { position: static; transform: none; margin: 0 0 12px; max-width: none; width: auto; }

/* Detail */
.bag-detail-head { display: flex; gap: 18px; align-items: flex-start; background: var(--bg-panel-2); border: 1px solid var(--border); border-radius: 14px; padding: 16px; margin: 8px 0 14px; flex-wrap: wrap; }
.bag-detail-photo { width: 120px; height: 120px; border-radius: 10px; object-fit: cover; background: var(--bg-panel); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-dim); }
.bag-detail-main { flex: 1 1 220px; min-width: 0; }
.bag-detail-tag { font-family: var(--font-mono, monospace); font-size: 13px; color: var(--accent); display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.bag-detail-name { font-size: 24px; margin: 4px 0 2px; }
.bag-detail-sub { color: var(--text-dim); font-size: 13px; }
.bag-detail-badges { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.bag-detail-qr { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bag-detail-qr img { width: 96px; height: 96px; background: #fff; padding: 4px; border-radius: 8px; }
.bag-quickbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.bag-quickbar label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); }
.bag-quickbar select { padding: 7px 9px; border-radius: 8px; background: var(--bg-panel-2); border: 1px solid var(--border); color: var(--text); }
.bag-detail-grid { display: flex; flex-direction: column; gap: 10px; }
.bag-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 18px; padding: 6px 14px 4px; }
.bag-field { display: flex; flex-direction: column; gap: 1px; padding: 4px 0; border-bottom: 1px dashed var(--border); }
.bag-field-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); }
.bag-field-val { font-size: 13.5px; }
.bag-note { margin: 6px 14px; font-size: 13px; color: var(--text); background: var(--bg-panel); border-radius: 8px; padding: 8px 10px; }
.bag-log { display: flex; flex-direction: column; gap: 2px; padding: 6px 14px 4px; max-height: 340px; overflow-y: auto; }
.bag-log-row { display: grid; grid-template-columns: 130px 90px 1fr; gap: 10px; font-size: 12px; padding: 4px 0; border-bottom: 1px dashed var(--border); }
.bag-log-when { color: var(--text-dim); font-family: var(--font-mono, monospace); font-size: 11px; }
.bag-log-by { color: var(--accent); }
.bag-log-empty { color: var(--text-dim); font-size: 12px; padding: 4px 0; }
.bag-modal { max-width: 620px; }
.bag-form-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bag-chk { margin: 4px 14px; }

/* Mobile: turn the table into stacked cards */
@media (max-width: 760px) {
  .bag-table thead { display: none; }
  .bag-table, .bag-table tbody, .bag-table tr, .bag-table td { display: block; width: 100%; }
  .bag-table tr { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; padding: 6px 4px; }
  .bag-table td { border: none; padding: 5px 12px; display: flex; justify-content: space-between; gap: 12px; }
  .bag-table td::before { content: attr(data-label); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); flex-shrink: 0; }
  .bag-cb-cell { justify-content: flex-end; }
  .bag-cb-cell::before { content: 'Auswählen'; }
  .bag-log-row { grid-template-columns: 1fr; gap: 2px; }
  .bag-form-3 { grid-template-columns: 1fr; }
}

/* Beta badge for modules still in beta (e.g. Bag Tags). */
.beta-badge {
  display: inline-flex; align-items: center;
  font-size: 9px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 999px; margin-left: 6px; vertical-align: middle;
  color: #f59f00; border: 1px solid #f59f00; background: color-mix(in srgb, #f59f00 15%, transparent);
  line-height: 1.5;
}
.sidebar-item .beta-badge { margin-left: 7px; }
h1 .beta-badge { font-size: 11px; transform: translateY(-2px); }

/* Secrets (PINs, module passwords): blurred by default, revealed on hover/focus.
   Only rendered for permitted users, so hovering is the reveal gesture. */
.secret-blur { filter: blur(4.5px); transition: filter 0.12s ease; cursor: help; }
.secret-blur:hover, .secret-blur:focus { filter: none; }
input.secret-blur { cursor: text; }

/* Weather forecast card in the show-detail header (Open-Meteo). */
.show-weather { margin-top: 14px; }
.show-weather-note {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-dim);
}
.show-weather-card {
  display: inline-flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 10px 18px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--bg-panel-2);
}
.show-weather-card .sw-icon { display: inline-flex; color: var(--accent); }
.show-weather-card .sw-temp { font-family: var(--font-heading); font-size: 22px; letter-spacing: 0.3px; }
.show-weather-card .sw-temp b { font-weight: 600; }
.show-weather-card .sw-tmin { font-size: 14px; color: var(--text-dim); margin-left: 5px; }
.show-weather-card .sw-label { font-size: 13px; font-weight: 600; letter-spacing: 0.2px; }
.show-weather-card .sw-meta {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--text-dim);
}

/* Compact weather badge on overview cards / list rows. */
.show-card-weather {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--text-dim);
}
.show-card-weather svg { color: var(--accent); }
.show-card-weather b { color: var(--text); font-weight: 600; }

/* Demo sandbox: login note + persistent bottom banner. */
.login-demo-note {
  background: #e0ac1f22; border: 1px solid #e0ac1f66; color: var(--text);
  border-radius: 10px; padding: 10px 12px; font-size: 12.5px; margin-bottom: 14px; line-height: 1.45;
}
#demoBanner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 4000;
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 9px 16px; background: #e0ac1f; color: #1a1300;
  box-shadow: 0 -4px 18px rgba(0,0,0,0.35);
}
#demoBanner .demo-banner-text { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
#demoBanner .demo-banner-text b { font-weight: 700; }
#demoBanner .demo-banner-text svg { stroke: #1a1300; }
#demoBanner .demo-banner-actions { display: inline-flex; gap: 8px; }
#demoBanner .demo-banner-btn {
  border: 1px solid #1a130055; background: #1a1300; color: #ffd873;
  border-radius: 8px; padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
}
#demoBanner .demo-banner-btn-ghost { background: transparent; color: #1a1300; border-color: #1a130066; }
body.demo-active { padding-bottom: 46px; }

/* Bag-Tags: read-only hint for a bag not assigned to a restricted user. */
.bag-readonly-hint {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-panel-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 14px; font-size: 13px; color: var(--text-dim);
}
.bag-readonly-hint svg { stroke: var(--text-dim); }

/* Show participants block + PDF mail dispatch. */
.participants-block { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.participants-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.participants-title { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); }
.participants-title b { color: var(--text); }
.participants-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.participant-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-panel-2); font-size: 12.5px; }
.participant-role { color: var(--text-dim); font-size: 11px; }
.participant-nomail { color: var(--yellow); font-size: 11px; }
.participant-empty { color: var(--text-dim); font-size: 12.5px; }
.participants-picker { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.pdf-send-section { margin-top: 6px; }
.pdf-send-section .rcpt-mail { color: var(--text-dim); font-size: 11.5px; }
.pdf-send-section .rcpt-nomail { color: var(--yellow); font-size: 11.5px; }
.send-status { font-size: 12.5px; margin: 8px 0; padding: 8px 10px; border-radius: 8px; background: var(--bg-panel-2); color: var(--text-dim); }
.send-status-ok { color: var(--green); }
.send-status-error { color: var(--red); }

/* Configurable default e-mail text (settings). */
.pdf-mail-text-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }

/* Grouped participant picker (by module). */
.participant-group { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; margin-bottom: 10px; background: var(--bg-panel-2); }
.participant-group-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.participant-group-title { font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-dim); }
.participant-group-title b { color: var(--text); }
.participant-group-toggle { font-size: 11.5px; }

/* "Vergangene Shows" view — a clearly different, warm/muted tint so it's
   obvious you're not looking at the active overview, plus a header banner. */
.app.past-view {
  background:
    linear-gradient(180deg, rgba(224,172,31,0.14), rgba(224,172,31,0.05) 220px, transparent 520px),
    #17130a;
  border-radius: var(--radius, 16px);
}
.past-view-banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 18px; padding: 12px 16px;
  background: rgba(224,172,31,0.14); border: 1px solid rgba(224,172,31,0.45);
  border-radius: 12px; color: var(--text);
}
.past-view-banner > svg { stroke: #e0ac1f; flex-shrink: 0; }
.past-view-banner span { font-size: 13.5px; }
.past-view-banner span b { color: #f2c14e; }
.past-view-banner button { margin-left: auto; }
/* Slightly warm the cards in the past view so the whole surface reads as archived. */
.app.past-view .show-card,
.app.past-view .show-list-row { border-color: rgba(224,172,31,0.28); }

/* Bag photo gallery (detail view) + crop modal. */
.bag-gallery-section { margin: 6px 0 20px; }
.bag-gallery-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.bag-gallery-title { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); }
.bag-gallery-title b { color: var(--text); }
.bag-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.bag-gallery-empty { color: var(--text-dim); font-size: 13px; }
.bag-gallery-item { position: relative; aspect-ratio: 1/1; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--bg-panel-2); }
.bag-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bag-gallery-item.is-main { border-color: var(--green); box-shadow: 0 0 0 2px color-mix(in srgb, var(--green) 40%, transparent); }
.bag-gallery-main-badge { position: absolute; left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: var(--green); color: var(--on-green, #08111f); font-size: 10.5px; font-weight: 700; }
.bag-gallery-main-badge svg { stroke: var(--on-green, #08111f); }
.bag-gallery-actions { position: absolute; right: 6px; bottom: 6px; display: flex; gap: 5px; opacity: 0; transition: opacity 0.12s ease; }
.bag-gallery-item:hover .bag-gallery-actions, .bag-gallery-item:focus-within .bag-gallery-actions { opacity: 1; }
.bag-gallery-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px; border: none; cursor: pointer; background: rgba(8,17,31,0.82); color: #fff; }
.bag-gallery-btn.del:hover { background: var(--red); }
.bag-gallery-btn.set-main:hover { background: var(--green); color: var(--on-green, #08111f); }
.bag-gallery-btn.set-main:hover svg { stroke: var(--on-green, #08111f); }
.bag-gallery-btn.crop:hover { background: var(--accent); }
/* Touch devices have no hover — keep the actions visible there. */
@media (hover: none) { .bag-gallery-actions { opacity: 1; } }

.crop-modal { max-width: 640px; width: 100%; }
.crop-stage { position: relative; display: inline-block; max-width: 100%; margin: 4px 0 6px; line-height: 0; user-select: none; touch-action: none; }
.crop-stage img { max-width: 100%; max-height: 60vh; display: block; border-radius: 8px; cursor: crosshair; }
.crop-sel { position: absolute; border: 2px solid var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); box-shadow: 0 0 0 9999px rgba(0,0,0,0.45); pointer-events: none; }

/* Animated brand logo on the login screen (favicon + rotating accent arc that
   echoes the ring in the icon). Kept subtle per the app's clean look; disabled
   for users who prefer reduced motion. */
.login-anim { position: relative; width: 108px; height: 108px; margin: 0 auto 10px; display: grid; place-items: center; }
.login-anim-logo {
  width: 86px; height: 86px; border-radius: 22px; display: block; position: relative; z-index: 1;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  animation: loginLogoIn 0.6s cubic-bezier(0.2,0.7,0.2,1) both, loginLogoFloat 5.5s ease-in-out 0.6s infinite;
}
.login-anim-arc {
  position: absolute; inset: -8px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, var(--green) 55deg, transparent 130deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  opacity: 0; animation: loginArcIn 0.5s ease 0.3s forwards, loginArcSpin 3.6s linear 0.3s infinite;
}
@keyframes loginLogoIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@keyframes loginLogoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes loginArcSpin { to { transform: rotate(360deg); } }
@keyframes loginArcIn { to { opacity: 0.9; } }
@media (prefers-reduced-motion: reduce) {
  .login-anim-logo { animation: loginLogoIn 0.4s ease both; }
  .login-anim-arc { animation: loginArcIn 0.4s ease forwards; }
}

/* Central document / rider library. */
.doc-list { display: flex; flex-direction: column; gap: 10px; }
.doc-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-panel-2); }
.doc-row .doc-icon { display: inline-flex; color: var(--accent); flex-shrink: 0; }
.doc-main { flex: 1; min-width: 0; }
.doc-name { font-size: 14px; font-weight: 600; }
.doc-meta { font-size: 12px; color: var(--text-dim); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; flex-shrink: 0; }

/* Billing address (Rechnungsadresse) — show card + library + modal. */
.ra-card { border: 1px solid var(--border); border-radius: 14px; background: var(--bg-panel-2); padding: 16px 18px; margin: 14px 0; }
.ra-card-locked { opacity: .82; }
.ra-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.ra-title { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); }
.ra-address { font-size: 14px; line-height: 1.55; white-space: normal; }
.ra-empty { font-size: 13px; color: var(--text-dim); font-style: italic; }
.ra-locked { font-size: 13px; color: var(--text-dim); display: inline-flex; align-items: center; gap: 7px; }
.ra-share-badge { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 11px; font-weight: 600; letter-spacing: .03em; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-dim); }
.ra-share-badge.on { color: var(--accent); border-color: var(--accent); }
.ra-palette { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0; }
.ra-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-panel); font-size: 12.5px; cursor: grab; user-select: none; }
.ra-chip:hover { border-color: var(--accent); color: var(--accent); }
.ra-chip:active { cursor: grabbing; }
.ra-hint-inline { font-weight: 400; color: var(--text-dim); font-size: 11.5px; }
textarea.ra-drop { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.ra-link { color: var(--accent); }
.ra-lib-list { display: flex; flex-direction: column; gap: 10px; }
.ra-lib-row { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-panel-2); }
.ra-lib-icon { display: inline-flex; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.ra-lib-main { flex: 1; min-width: 0; }
.ra-lib-name { font-size: 14px; font-weight: 600; }
.ra-lib-addr { font-size: 12.5px; color: var(--text-dim); margin-top: 3px; line-height: 1.5; }
.ra-lib-actions { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.prb-billing { border-left: 3px solid var(--accent); }

/* Documents: version badge + history + upload date. */
.doc-row { flex-wrap: wrap; }
.doc-vbadge { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); vertical-align: middle; margin-left: 4px; }
.doc-history-panel { flex-basis: 100%; margin-top: 4px; border-top: 1px dashed var(--border); padding-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.doc-hist-row { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-dim); }
.doc-hist-v { font-weight: 700; color: var(--text); min-width: 30px; }
.doc-hist-meta { flex: 1; min-width: 0; }
.doc-hist-dl { display: inline-flex; color: var(--accent); }

/* User management: last-active + invitation-status badges. */
.user-row-status { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 11.5px; margin-top: 3px; }
.user-last-active { display: inline-flex; align-items: center; gap: 4px; color: var(--text-dim); }
.user-last-active.muted { opacity: .7; }
.user-invite-badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border); font-weight: 600; }
.user-invite-badge.ok { color: var(--accent); border-color: var(--accent); }
.user-invite-badge.pending { color: #e0a83e; border-color: #e0a83e; }
.user-invite-badge.none { color: var(--text-dim); opacity: .75; }

/* Document library: category sections + drag-to-move. */
.doc-section { margin-bottom: 22px; }
.doc-section-head { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 10px; }
.doc-section-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; border: 1px solid var(--border); font-size: 11px; letter-spacing: 0; }
.doc-section-empty { border: 1px dashed var(--border); border-radius: 12px; }
.doc-section-drop { outline: 2px dashed var(--accent); outline-offset: 4px; border-radius: 14px; }
.doc-section-drop .doc-section-empty { border-color: var(--accent); color: var(--accent); }
.doc-drag { display: inline-flex; color: var(--text-dim); cursor: grab; flex-shrink: 0; }
.doc-row[draggable="true"]:active .doc-drag { cursor: grabbing; }
.doc-row-dragging { opacity: .5; }
.doc-cat-select { height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-panel); color: var(--text); font-size: 12px; padding: 0 6px; }

/* Document sections: per-category colour accents. */
.doc-section[data-cat="Full Band"] { --doc-cat-color: #4aa3ff; }
.doc-section[data-cat="HPB"] { --doc-cat-color: #b98cff; }
.doc-section[data-cat="Sonstige"] { --doc-cat-color: #7f8a9c; }
.doc-section { border-left: 3px solid var(--doc-cat-color, var(--border)); padding-left: 14px; border-radius: 2px; }
.doc-section .doc-section-head { color: var(--doc-cat-color, var(--text-dim)); }
.doc-section .doc-section-head::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--doc-cat-color, var(--text-dim)); flex-shrink: 0; }
.doc-section .doc-section-count { color: var(--doc-cat-color, var(--text-dim)); border-color: var(--doc-cat-color, var(--border)); }
.doc-section .doc-icon { color: var(--doc-cat-color, var(--accent)); }
.doc-section-drop { outline-color: var(--doc-cat-color, var(--accent)); }
.doc-section-drop .doc-section-empty { border-color: var(--doc-cat-color, var(--accent)); color: var(--doc-cat-color, var(--accent)); }