/* Admin-Panel nutzt die volle Fensterbreite statt der zentrierten, auf
   --max-width begrenzten .container-Regel der Gast-Seiten (admin.css wird nur
   hier geladen, betrifft also keine andere Seite). #admin-login behält seine
   eigene schmale Breite (siehe weiter unten), ist von dieser Regel unberührt. */
#main-content {
  max-width: none;
}

/* Geht bis an den Fensterrand statt als abgesetzte Karte zu schweben — daher
   negative Margin gleich der horizontalen .container-Polsterung (1.25rem) und
   eckige statt runde Ecken. Bleibt beim Scrollen ganz oben sichtbar. */
.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  padding: 1rem 1.75rem;
  margin: 0 -1.25rem 1.5rem;
  position: sticky;
  top: 0;
  z-index: 30;
}

.admin-header-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.admin-header-title h1 {
  margin: 0 0 0.15rem;
  font-size: 1.2rem;
}

.admin-header-apartment-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-decoration: none;
}

.admin-header-apartment-link:hover {
  color: var(--color-accent);
}

.admin-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Hamburger-Button — nur ab Tablet-Breite abwärts sichtbar (siehe
   .admin-sidenav-Regeln weiter unten), auf Desktop bleibt die Seitenleiste
   permanent sichtbar und der Button ist überflüssig. Zwei Klassen kombiniert
   (statt nur .sidenav-toggle-btn), damit diese Regel zuverlässig gegen
   .icon-btns eigenes display:inline-flex gewinnt (gleiche Spezifität sonst,
   Reihenfolge im Stylesheet würde entscheiden). */
.icon-btn.sidenav-toggle-btn {
  display: none;
}

.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-text);
  line-height: 1;
  cursor: pointer;
}

.icon-btn svg {
  width: 1.2rem;
  height: 1.2rem;
}

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

.icon-btn[aria-current="page"] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.icon-btn-badge {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--color-danger);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
}

/* [hidden] hat per UA-Stylesheet display:none, wird aber von der eigenen
   display:flex-Regel oben überschrieben (gleiche Spezifität, Reihenfolge zählt) —
   ohne diese Regel bliebe der Punkt auch ohne Benachrichtigungen sichtbar. */
.icon-btn-badge[hidden] {
  display: none;
}

.notifications-wrap {
  position: relative;
}

.notifications-dropdown {
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  width: 320px;
  max-width: calc(100vw - 2.5rem);
  max-height: 380px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 0.5rem;
  z-index: 40;
}

.notifications-empty {
  padding: 0.75rem;
  margin: 0;
}

.notifications-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.notifications-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.7rem;
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.notifications-item:hover {
  background: var(--color-surface);
}

.notifications-item.is-conflict {
  background: var(--color-danger-bg);
}

.notifications-conflict {
  color: var(--color-danger);
  font-size: 0.8rem;
  font-weight: 600;
}

.notifications-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 0.5rem 0;
}

.notifications-log-heading {
  margin: 0.2rem 0.7rem 0.3rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.notifications-log-item {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  cursor: default;
}

.notifications-log-item span:first-child {
  flex: 1;
}

.notifications-log-item .muted {
  font-size: 0.75rem;
  white-space: nowrap;
}

.notifications-log-delete {
  border: none;
  background: none;
  color: var(--color-text-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.1rem 0.3rem;
  border-radius: var(--radius-sm);
}

.notifications-log-delete:hover {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.notifications-add-form {
  display: flex;
  gap: 0.4rem;
  padding: 0.5rem 0.5rem 0.3rem;
}

.notifications-add-form input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.55rem;
  font-family: inherit;
  font-size: 0.82rem;
}

/* Schmale Seitennavigation: Übersicht/Einstellungen oben, darunter (nur wenn
   Einstellungen aktiv ist) die einzelnen Themenbereiche als eingerückte Liste.
   Ersetzt die vorherige horizontale Tab-Leiste innerhalb von Einstellungen. */
.admin-shell {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1rem 0 1.5rem;
}

.admin-sidenav {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 0.6rem;
  transition: flex-basis 0.15s ease;
}

.admin-main {
  min-width: 0;
}

/* Glocke + Abmelden stehen bereits im Header — auf Desktop bleibt es dabei,
   ab Tablet abwärts sind sie zusätzlich hier im Klapp-Menü erreichbar, statt
   nur oben im (bei geöffnetem Menü weiter entfernten) Header. Eigene IDs statt
   Duplikat der Header-Buttons, per Klick-Weiterleitung in admin.js verdrahtet. */
.sidenav-mobile-actions {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0.3rem 0.8rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--color-border);
}

@media (max-width: 899px) {
  .sidenav-mobile-actions {
    display: flex;
  }
}

/* Ab Tablet-Breite abwärts ist die Seitenleiste ein auf-/zuklappbares Menü
   statt eines permanent sichtbaren Blocks, der sonst viel vertikalen Platz
   vor dem eigentlichen Inhalt beanspruchen würde. */
@media (max-width: 899px) {
  /* .icon-btn.sidenav-toggle-btn (zwei Klassen, siehe oben) hätte sonst höhere
     Spezifität als ein einzelnes .sidenav-toggle-btn hier und würde den Button
     trotz Media Query weiter ausblenden — daher hier ebenfalls zwei Klassen. */
  .icon-btn.sidenav-toggle-btn {
    display: inline-flex;
  }

  .admin-sidenav {
    display: none;
  }

  .admin-sidenav.is-open {
    display: flex;
  }
}

@media (min-width: 900px) {
  .admin-shell {
    flex-direction: row;
    align-items: flex-start;
  }

  .admin-sidenav {
    flex: 0 0 11rem;
    position: sticky;
    /* Rückt unter den nun eigenständig sticky positionierten .admin-header
       (ca. 4.75rem hoch), statt ihn beim Scrollen zu überdecken. */
    top: 4.75rem;
    align-self: flex-start;
    min-height: calc(100vh - 8rem);
  }

  .admin-main {
    flex: 1;
  }

  /* Manuell ein-/ausklappbar per .sidenav-collapse-btn (nur Desktop — ab
     Tablet abwärts übernimmt bereits der Hamburger-Button das Ein-/Ausblenden
     der kompletten Seitenleiste, ein zusätzlicher Einklapp-Modus wäre dort
     redundant). Text bleibt im DOM (Screenreader, schnelles Zurückklappen),
     wird nur visuell versteckt. */
  .admin-sidenav.is-collapsed {
    flex-basis: 3.6rem;
  }

  .admin-sidenav.is-collapsed .sidenav-btn span,
  .admin-sidenav.is-collapsed .sidenav-version {
    display: none;
  }

  .admin-sidenav.is-collapsed .sidenav-btn {
    justify-content: center;
    padding: 0.55rem;
  }

  .admin-sidenav.is-collapsed .sidenav-collapse-btn {
    transform: rotate(180deg);
  }

  /* Eigenes, gestyltes Tooltip statt nur des nativen title-Attributs (das
     bleibt zusätzlich für den Accessible-Name bestehen, da <span> ja
     display:none ist). Reines CSS über content:attr(), kein JS nötig. */
  .admin-sidenav.is-collapsed .sidenav-btn {
    position: relative;
  }

  .admin-sidenav.is-collapsed .sidenav-btn[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 0.6rem);
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-left: 2px solid var(--color-accent);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    padding: 0.35rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
    z-index: 50;
  }

  .admin-sidenav.is-collapsed .sidenav-btn[data-tooltip]:hover::after,
  .admin-sidenav.is-collapsed .sidenav-btn[data-tooltip]:focus-visible::after {
    opacity: 1;
  }
}

/* Schiebt die Versionsnummer ans Ende der Seitennavigation, egal wie viele
   Themenbereiche gerade sichtbar sind. */
.sidenav-version {
  margin-top: auto;
  padding: 0.6rem 0.7rem 0.2rem;
  font-size: 0.72rem;
  color: var(--color-text-muted);
}

.sidenav-btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-text);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

/* Klapp-Button für den Desktop-Einklapp-Modus, oben in der Seitenleiste. */
.sidenav-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
  width: 1.9rem;
  height: 1.9rem;
  margin-bottom: 0.2rem;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.sidenav-collapse-btn svg {
  width: 1.1rem;
  height: 1.1rem;
}

.sidenav-collapse-btn:hover {
  background: #fff;
  color: var(--color-text);
}

/* Nur Desktop relevant (siehe Kommentar oben) — muss NACH der Basisregel
   stehen, sonst gewinnt bei gleicher Spezifität die spätere .sidenav-collapse-btn-
   Regel und der Button bliebe trotz Media Query sichtbar. */
@media (max-width: 899px) {
  .sidenav-collapse-btn {
    display: none;
  }

  /* Glocke + Abmelden stehen ab hier nur noch im mobilen Klapp-Menü (siehe
     .sidenav-mobile-actions) — im Header wären sie sonst doppelt vorhanden. */
  .admin-header-actions {
    display: none;
  }
}

.sidenav-btn svg {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
}

.sidenav-btn:hover {
  background: #fff;
}

.sidenav-btn[aria-current="page"] {
  background: var(--color-accent);
  color: #fff;
}

/* Themenblöcke (Preise & Konditionen, Wohnung, …) unter Übersicht, optisch
   leicht abgesetzt durch eine dünne Trennlinie. */
.sidenav-group {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin-top: 0.5rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--color-border);
}

/* "Einstellungen" ist bewusst kein Themenblock, sondern ein eigener,
   vorerst leerer Bereich — daher zusätzlich abgesetzt statt Teil der
   .sidenav-group-Liste. */
.sidenav-btn--separated {
  margin-top: 0.6rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
}

/* Große, auffällige Warnung über allem, sobald es Überschneidungen gibt. */
.conflict-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.4rem;
  margin-bottom: 1.75rem;
}

/* [hidden] hat per UA-Stylesheet display:none, wird aber von der eigenen
   display:flex-Regel oben überschrieben (gleiche Spezifität, Reihenfolge zählt) —
   ohne diese Regel bliebe das Banner als leerer roter Balken sichtbar. */
.conflict-banner[hidden] {
  display: none;
}

.conflict-banner-icon {
  font-size: 1.9rem;
  line-height: 1;
}

.conflict-banner strong {
  display: block;
  color: var(--color-danger);
  font-size: 1.15rem;
}

.conflict-banner p {
  margin: 0.15rem 0 0;
}

/* Dashboard: KPI-Kacheln + Kalender/Filter-Reihe */
/* Jede Hauptansicht (Buchungsübersicht/Einstellungen) hat eine eigene
   Überschrift und darunter GENAU einen umschließenden Container — .card liefert
   Rahmen/Schatten, .admin-view überschreibt nur den Hintergrund auf weiß, damit
   verschachtelte Karten (Kennzahlen-Kacheln, Formulare) mit ihrem eigenen
   --color-surface-Hintergrund sichtbar Kontrast zum Container haben, statt
   Fläche auf Fläche zu verschwimmen. */
.admin-view {
  background: #fff;
  margin-bottom: 1.75rem;
}

/* Überschrift + Aktion (z. B. Link zur Wohnungsseite) in einer Zeile, statt
   die Aktion irgendwo im Formular zu verstecken. */
.section-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.5em;
}

.section-heading-row h2,
.section-heading-row h3 {
  margin-bottom: 0;
}

.section-heading-row .btn svg {
  width: 15px;
  height: 15px;
  vertical-align: -2px;
  margin-right: 0.3em;
}

.stat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}

.stat-tile {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1rem 1.1rem;
  cursor: pointer;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.stat-tile:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-sm);
}

.stat-tile-label {
  margin: 0 0 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.stat-tile-value {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 600;
  font-variant-numeric: proportional-nums;
}

.stat-tile-value.is-danger {
  color: var(--color-danger);
}

.stat-tile.is-danger-tile {
  background: var(--color-danger-bg);
  border-color: var(--color-danger);
}

@media (max-width: 480px) {
  .stat-tiles {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
    margin-bottom: 1rem;
  }

  .stat-tile {
    padding: 0.4rem 0.5rem;
    border-radius: var(--radius-sm);
  }

  .stat-tile-label {
    font-size: 0.58rem;
    line-height: 1.15;
    margin-bottom: 0.1rem;
  }

  .stat-tile-value {
    font-size: 1rem;
  }
}

.dashboard-calendar-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
  margin-bottom: 1.75rem;
}

/* Ohne min-width:0 bleibt der Grid-Item auf Content-Breite und sprengt die Card
   auf schmalen Viewports, statt dass #admin-calendars eigenes overflow-x:auto greift. */
.dashboard-calendar-col {
  min-width: 0;
}

@media (min-width: 900px) {
  .dashboard-calendar-row {
    grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  }
}

/* Toolbar über der Buchungsliste: Filter-Tabs links, Sortierung rechts. */
.bookings-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 1rem;
}

/* Horizontale Tab-Liste zum Filtern der Buchungsliste, ähnliche Optik wie die
   Einstellungen-Unter-Tabs (.sub-tabs/.sub-tab-btn), aber eigene Klassen — sonst
   würde admin.js' generischer Tab-Umschalter (der nach data-subtab sucht) auch
   hier zuschlagen. */
.filter-tab-list {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
}

.filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  padding: 0.6em 0.8em;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
}

.filter-tab:hover {
  color: var(--color-text);
}

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

.filter-tab-count {
  font-size: 0.78rem;
  font-weight: 700;
  opacity: 0.8;
}

.sort-toggle {
  display: flex;
  gap: 0.3rem;
  padding-bottom: 0.6rem;
}

.sort-btn {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.4em 0.75em;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
}

.sort-btn:hover {
  background: var(--color-surface);
}

.sort-btn.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

/* Jede Buchung als eigene Karte statt Tabellenzeile. */
.booking-card-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.booking-item-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1rem 1.1rem;
  cursor: pointer;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

/* Klick auf eine Karte hebt ihren Zeitraum im Kalender hervor (admin-calendar.js). */
.booking-item-card.is-selected {
  border-color: var(--color-text);
  box-shadow: 0 0 0 2px var(--color-text);
}

.booking-item-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
}

.booking-item-header > div {
  min-width: 0;
}

.booking-item-header strong {
  display: block;
  font-size: 0.98rem;
  overflow-wrap: anywhere;
}

.booking-item-header .badge {
  white-space: nowrap;
  flex-shrink: 0;
}

.booking-item-dates {
  margin: 0;
  font-weight: 600;
  font-size: 0.92rem;
}

.booking-item-price {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.booking-item-message {
  margin: 0;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--color-text-muted);
}

.booking-item-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.4rem;
}

.booking-item-actions select,
.booking-item-actions input[type="number"] {
  font-family: inherit;
  font-size: 0.85rem;
  padding: 0.4em 0.5em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  max-width: 8em;
}

#admin-login {
  max-width: 360px;
  margin: 4rem auto;
}

/* Einzige verbleibende Tab-Ebene: innerhalb von "Einstellungen" (Preise, Fotos,
   Rechtliches, …) — die vorherige Haupt-Tab-Leiste (Buchungen/Einstellungen) ist
   der Kopfzeilen-Navigation (Zahnrad/Glocke) gewichen, siehe admin.js initHeaderNav. */
.sub-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 1.5rem;
}

.sub-tab-btn {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-muted);
  padding: 0.55em 0.75em;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.sub-tab-btn.is-active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* Visuelle Gruppierung nach Relevanz (Preise & Konditionen / Wohnung /
   Kommunikation / Technik / Rechtliches) — nur eine dünne Trennlinie vor dem
   ersten Button einer neuen Gruppe, keine verschachtelten Elemente im
   role="tablist", damit die Tab-Semantik für Screenreader korrekt bleibt. */
.sub-tab-btn.group-start {
  margin-left: 0.5rem;
  padding-left: 1rem;
  border-left: 1px solid var(--color-border);
}

.sub-tab-panel {
  display: none;
}

.sub-tab-panel.is-active {
  display: block;
}

/* Horizontal scroll-Container für Tabellen, gleiches Muster wie .sub-tabs/.filter-tab-list —
   ohne den Wrapper laufen .admin-table-Zeilen auf schmalen Tablet-Breiten über. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-scroll .admin-table {
  min-width: 560px;
}

/* Trix-Editor (Beschreibung, Rechtstexte) ans Projekt-Design angepasst — die
   Bibliothek bringt ihre eigene, recht altbackene Button-Leiste mit (jeder
   Button einzeln umrandet wie ein Segmented Control). Hier stattdessen
   randlose Icon-Buttons mit Hover-Fläche und dezenten Trennstrichen zwischen
   den Gruppen statt Kästchen um jeden Button — braucht höhere Spezifität als
   Trix' eigene Regeln, siehe .trix-button-group--file-tools unten, das
   gleiche, bereits etablierte Muster. Der Datei-Anhang-Button bleibt aus
   (keine Upload-Anbindung dafür vorhanden, siehe admin.js
   trix-file-accept-Handler, der Drops zusätzlich hart verhindert). */
trix-toolbar {
  border: 1px solid var(--color-border);
  border-bottom: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  padding: 0.4rem 0.5rem;
  background: var(--color-surface);
}

trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

trix-toolbar .trix-button-group {
  border: none;
  border-radius: 0;
  margin: 0;
  padding: 0 0.4rem;
  display: flex;
  gap: 0.1rem;
  position: relative;
}

trix-toolbar .trix-button-group:first-child {
  padding-left: 0;
}

trix-toolbar .trix-button-group + .trix-button-group::before {
  content: "";
  position: absolute;
  left: -0.05rem;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: var(--color-border);
}

trix-toolbar .trix-button {
  font-family: inherit;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  width: 1.65rem;
  height: 1.65rem;
  transition: background-color 0.12s ease, color 0.12s ease;
}

trix-toolbar .trix-button:hover:not(:disabled) {
  background: var(--color-accent-light);
}

trix-toolbar .trix-button.trix-active {
  background: var(--color-accent);
  color: #fff;
}

/* Höhere Spezifität als Trix' eigene ".trix-button-group { display: flex }"-Regel
   (gleiche Spezifität würde sonst je nach Lade-/Einfüge-Reihenfolge der
   Stylesheets uneinheitlich gewinnen). */
trix-toolbar .trix-button-group--file-tools {
  display: none;
}

trix-editor.trix-content {
  min-height: 8rem;
  max-height: 24rem;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: 0.75em 0.9em;
  font-family: inherit;
  font-size: 1rem;
  background: #fff;
  color: var(--color-text);
  transition: box-shadow 0.12s ease, border-color 0.12s ease;
}

trix-editor.trix-content:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-light);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.admin-table th,
.admin-table td {
  text-align: left;
  padding: 0.7em 0.6em;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.admin-table th {
  color: var(--color-text-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.booking-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* Kalenderübersicht: Tagesstatus über tatsächliche Buchungen statt Gast-Auswahl. */
#admin-calendar .calendar-day {
  cursor: default;
}

/* Sicherheitsnetz, gleiches Muster wie .filter-tab-list/.table-scroll an
   anderer Stelle — das Grid selbst (repeat(7, 1fr)) läuft nie über, aber ohne
   dedizierte Breakpoint-Anpassungen (siehe unten) wurden die Zellen auf
   schmalen Handys durch doppeltes Container/Card-Padding sehr eng. */
#admin-calendar {
  overflow-x: auto;
}

@media (max-width: 480px) {
  #admin-calendar .calendar-header h3 {
    font-size: 0.95rem;
  }

  #admin-calendar .calendar-nav button {
    width: 1.9rem;
    height: 1.9rem;
    font-size: 0.9rem;
  }

  #admin-calendar .calendar-weekdays span {
    font-size: 0.62rem;
  }

  #admin-calendar .calendar-day {
    font-size: 0.72rem;
  }

  #admin-calendar .calendar-legend {
    font-size: 0.7rem;
    gap: 0.5rem;
  }
}

.calendar-day.is-admin-free {
  border: 1px solid var(--color-border);
}

.calendar-day.is-admin-requested {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  font-weight: 600;
}

.calendar-day.is-admin-confirmed {
  background: var(--color-accent);
  color: #fff;
  font-weight: 600;
}

.calendar-day.is-admin-conflict {
  background: var(--color-danger);
  color: #fff;
  font-weight: 700;
}

#admin-calendar .calendar-day.is-selectable {
  cursor: pointer;
}

/* Ring statt vollflächigem Hintergrund — ein voller Akzent-Hintergrund würde
   optisch mit is-admin-confirmed kollidieren, das dieselbe Farbe nutzt. */
.calendar-day.is-select-start,
.calendar-day.is-select-end {
  box-shadow: inset 0 0 0 3px var(--color-accent-dark);
}

.calendar-day.is-select-range {
  box-shadow: inset 0 0 0 2px var(--color-accent-dark);
}

.calendar-header-nav-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.calendar-select-clear {
  border: none;
  background: none;
  color: var(--color-accent);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.3rem 0.4rem;
}

.calendar-legend .swatch-admin-free {
  border: 1px solid var(--color-border);
}

.calendar-legend .swatch-admin-requested {
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning);
}

.calendar-legend .swatch-admin-confirmed {
  background: var(--color-accent);
}

.calendar-legend .swatch-admin-conflict {
  background: var(--color-danger);
}

.overlap-warning {
  display: block;
  margin: 0.3rem 0 0;
  font-size: 0.78rem;
  color: var(--color-warning);
  font-weight: 600;
}

.overlap-warning.is-severe {
  color: var(--color-danger);
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}

.photo-grid figure {
  margin: 0;
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.photo-grid img {
  width: 100%;
  height: 110px;
  object-fit: cover;
}

.photo-grid figcaption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.35rem 0.5rem;
  font-size: 0.75rem;
  background: var(--color-surface);
}

.settings-form {
  max-width: 480px;
}

/* Ausstattung & Aktivitäten: eine Zeile pro Eintrag mit Icon-Auswahl,
   Live-Vorschau des gewählten Icons, Text und Entfernen-Button. */
.amenities-editor {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.amenity-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.amenity-row-preview {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-accent);
}

.amenity-row-preview svg {
  width: 18px;
  height: 18px;
}

.amenity-row-icon {
  flex: 0 0 auto;
  max-width: 12rem;
}

.amenity-row-text {
  flex: 1 1 auto;
  min-width: 0;
}

.amenity-row-remove {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.amenity-row-remove:hover {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.add-booking-toggle {
  margin-bottom: 1rem;
}

.add-booking-form {
  margin-bottom: 1.5rem;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem 1rem;
}

.field-grid .field {
  margin-bottom: 0;
}

/* Zwischenüberschrift innerhalb eines .field-grid, um Felder in sichtbare
   Gruppen zu sortieren (z. B. Kontakt / Aufenthalt / Preis & Status im
   "Neue Buchung"-Formular). */
.field-grid-group-label {
  grid-column: 1 / -1;
  margin: 0.5rem 0 -0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.field-grid-group-label:first-child {
  margin-top: 0;
}

/* Größere, deutlicher sichtbare Checkbox für Endreinigung — bislang komplett
   ungestylte native Checkbox, daher kein Konflikt mit bestehendem CSS. */
.field-checkbox--lg input[type="checkbox"] {
  width: 1.4rem;
  height: 1.4rem;
  accent-color: var(--color-accent);
  cursor: pointer;
}

.field-checkbox--lg label {
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

.add-booking-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.template-editor {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1rem;
  margin-bottom: 1rem;
}

.template-editor h4 {
  margin: 0 0 0.75rem;
}

.placeholder-hint {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: -0.5rem;
  margin-bottom: 1rem;
}

.placeholder-hint code {
  background: var(--color-surface);
  padding: 0.1em 0.4em;
  border-radius: 4px;
}

/* Buchungsdetail-Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 3rem 1rem;
  background: rgba(20, 18, 15, 0.5);
  overflow-y: auto;
}

.modal-overlay[hidden] {
  display: none;
}

.modal-card {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 1.75rem;
}

.modal-card-lg {
  max-width: 720px;
  padding: 2.5rem;
}

.modal-card h3 {
  margin: 0 0 0.2rem;
  font-size: 1.4rem;
}

.modal-card h4 {
  font-size: 0.95rem;
  margin: 0 0 0.75rem;
}

.modal-card .listing-divider {
  margin: 1.75rem 0;
}

.modal-card textarea {
  width: 100%;
}

.modal-section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.25rem 0;
}

.modal-close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: #fff;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.modal-close:hover {
  background: var(--color-surface);
}

.booking-detail-resend-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.resend-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.resend-check {
  color: var(--color-accent);
  font-weight: 700;
  margin-right: 0.35em;
}

/* .btn setzt display:inline-flex mit gleicher Spezifität wie [hidden] — ohne
   diese Regel bliebe der Button trotz hidden-Attribut sichtbar (gleiches
   Muster wie .icon-btn-badge[hidden] weiter oben in dieser Datei). */
.resend-confirm[hidden] {
  display: none;
}

.email-log-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.88rem;
}

.email-log-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55em 0;
  border-bottom: 1px solid var(--color-border);
}

.email-log-list li:last-child {
  border-bottom: none;
}

/* Häkchen davor, damit auf einen Blick klar ist: diese Mail ist raus. */
.email-log-list li span::before {
  content: "✓ ";
  color: var(--color-success);
  font-weight: 700;
}

.email-log-list li time {
  flex-shrink: 0;
  color: var(--color-text-muted);
  font-size: 0.8rem;
}