/* static/css/styles.css
   Minimal: only what is NOT (yet) Tailwind in templates
*/

/* Ersatz für Tailwind-Arbitrary-Values wie -top-[11px]/overflow-y-visible,
   die NICHT in der vorkompilierten app.css landen, solange niemand nach
   einer Template-Änderung erneut `tailwindcss` gebaut hat (Tailwind
   generiert nur Klassen, die es beim Build im Content-Scan findet - kein
   Live-JIT hier). Plain CSS wirkt sofort, ohne Build-Schritt. */
.pp-ftop {
  top: -11px;
}

/* .mb-0 ist (noch) nicht im vorkompilierten app.css, da bislang nirgends im
   Content-Scan verwendet - gebraucht in booking_form.html, um den
   space-y-4-Abstand (:where()-Selektor, Spezifität 0) für genau einen
   Übergang gezielt zu überschreiben (Ausweis-ID -> Gäste/Kinder/
   Kleinkinder-Zeile, siehe dortiger Kommentar). */
.mb-0 {
  margin-bottom: 0;
}

/* Bündelt die 7 Utility-Klassen des wiederkehrenden Floating-Label-Musters
   ("absolute pp-ftop left-2 text-xs font-medium text-gray-500 bg-white
   px-1"), das bislang 56x wortwörtlich in Templates/JS dupliziert war -
   siehe Code-Review. Werte über die von app.css (Tailwind) auf :root
   gesetzten Custom Properties bezogen, damit sie mit den echten
   Utility-Klassen synchron bleiben, nicht hartkodiert. Plain CSS wie
   .pp-ftop oben, kein Tailwind-Rebuild nötig. */
.pp-floating-label {
  position: absolute;
  top: -11px;
  left: calc(var(--spacing) * 2);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height, calc(1 / 0.75));
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-500);
  background-color: var(--color-white);
  padding-inline: calc(var(--spacing) * 1);
}

.pp-oy-visible {
  overflow-y: visible;
}

/* Unsichtbarer Wrapper für Grid-Layouts: die zwei Felder darin (z.B.
   Anzahlung + Sonderpreis) sollen als eigene Grid-Zellen im Eltern-Grid
   erscheinen, aber trotzdem gemeinsam per einer einzigen ID/Klasse
   ein-/ausblendbar bleiben (siehe #offerPriceContainer in
   booking_form.html + form.js::checkBookingVisibility()). Tailwinds
   "contents"-Utility ist dafür noch nicht im vorkompilierten app.css
   (kein Live-Build hier, siehe .pp-ftop oben), daher Plain CSS.
   Die zweite Regel erzwingt "display:none" auch dann, wenn zusätzlich
   .hidden gesetzt wird - ohne sie würde die Lade-Reihenfolge der
   Stylesheets (app.css vor styles.css) das Verstecken bei gleicher
   Selektor-Spezifität sonst überschreiben können. */
.pp-display-contents {
  display: contents;
}

.pp-display-contents.hidden {
  display: none;
}

/* Container Query Basis (entscheidet nach Box-Breite, nicht Viewport) */
.pp-cq {
  container-type: inline-size;
}

/* ===== PP Quill: Toolbar overlay über dem Editor ===== */
[data-pp-quill="1"] {
  position: relative;
}

[data-pp-quill="1"] .pp-quill-toolbar {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 100%;
  margin-bottom: 8px;

  width: max-content;
  max-width: min(92vw, 520px);
  z-index: 9999;

  display: none; /* JS toggled */
  padding: 6px 8px;

  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

[data-pp-quill="1"] .pp-quill-toolbar.ql-toolbar {
  margin: 0 !important;
}

[data-pp-quill="1"] .pp-quill-editor {
  padding-top: 0 !important;
  min-height: 140px;
}

/* optionaler Pfeil */
[data-pp-quill="1"] .pp-quill-toolbar::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 10px;
  height: 10px;
  background: #fff;
  border-right: 1px solid rgba(0,0,0,0.08);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  transform: translateX(-50%) rotate(45deg);
}

/* =========================================================
   OWNER GRID
   schmal:  cal -> form -> list
   breit:   cal | list  (oben), form darunter
   ========================================================= */
.pp-owner-grid {
  display: grid;
  gap: calc(var(--spacing) * 4);
  align-items: start;

  /* 2 Spalten wenn Container breit genug, sonst 1 */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

  /* SCHMAL: Kalender, dann Form, dann Liste */
  grid-template-areas:
    "cal"
    "form"
    "list";
}

@container (min-width: 580px) {
  .pp-owner-grid {
    grid-template-areas:
      "cal list"
      "form form";
  }
}

/* Areas */
.pp-area-calendar { grid-area: cal; min-width: 280px; }
.pp-area-form     { grid-area: form; }
.pp-area-list     { grid-area: list; min-width: 0; } /* wichtig für Tabellen/Overflow */

/* =========================================================
   PROPERTIES PANELS (CQ statt Tailwind lg/md Breakpoints)
   schmal:  details -> seasons
   breit:   details | seasons
   ========================================================= */
.pp-props-panels {
  display: grid;
  gap: 0;
  align-items: start;

  grid-template-columns: 1fr;
}

@container (min-width: 580px) {
  .pp-props-panels {
    grid-template-columns: 50% 50%;
  }
}

/* wichtig: verhindert Overflow/Scrollbar durch Inhalte in Grid-Items */
.pp-props-panel {
  min-width: 0;
}

/* Helper: 2 Spalten innerhalb eines Panels – IMMER 2-spaltig (auch schmal) */
.pp-props-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--spacing) * 6);
}

/* Helper: 3 Spalten innerhalb eines Panels – IMMER 3-spaltig (auch schmal) */
.pp-props-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* =========================================================
   FORM GRID (Reihenfolge NUR auf schmal fixen)
   schmal:  price -> meta -> left -> right
   breit:   price|meta (oben), left|right (unten)
   ========================================================= */
.booking-form {
  container-type: inline-size;
}

.pp-booking-form-grid {
  display: grid;
  gap: calc(var(--spacing) * 2);

  /* SCHMAL: gewünschte Reihenfolge */
  grid-template-columns: 1fr;
  grid-template-areas:
    "price"
    "meta"
    "left"
    "right";
}

.pp-form-left,
.pp-form-right {
  min-width: 0;
  align-self: start;
}

/* diese Wrapper-Klassen müssen in booking_form.html gesetzt sein */
.pp-form-price { grid-area: price; }
.pp-form-meta  { grid-area: meta; }
.pp-form-left  { grid-area: left; }
.pp-form-right { grid-area: right; }

@container (min-width: 580px) {
  .pp-booking-form-grid {
    grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
    grid-template-areas:
      "price meta"
      "left  right";
    align-items: start;
  }

  .pp-form-price { grid-column: 1; grid-row: 1; }
  .pp-form-meta  { grid-column: 2; grid-row: 1; }
  .pp-form-left  { grid-column: 1; grid-row: 2; align-self: start; }
  .pp-form-right { grid-column: 2; grid-row: 2; align-self: start; }
}

/* Currency input helper */
.pp-currency-field {
  position: relative;
}

.pp-currency-symbol {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-gray-500);
  font-size: 14px;
  pointer-events: none;
}

/* Hochkant-Label für Quill-Editor-Felder: sitzt INNERHALB der Box, oben
   links (statt außerhalb auf der Rahmenlinie - dort war es unsichtbar,
   vermutlich durch den overflow-x-auto-Formular-Wrapper abgeschnitten).
   Die Quill-Werkzeugleiste ist kein fester Balken, sondern ein Popup, das
   erst beim Markieren von Text ÜBER der Box erscheint
   ([data-pp-quill="1"] .pp-quill-toolbar, bottom:100%, z-index:9999) -
   kollidiert damit nicht mit einem oben-links sitzenden Label.
   pointer-events:none, damit es keine Klicks/Cursor-Platzierung ganz oben
   links im Editor blockiert. */
.pp-vlabel {
  position: absolute;
  top: 6px;
  left: -7px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  background: #fff;
  padding: 2px 3px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-gray-500);
  white-space: nowrap;
  z-index: 20;
  pointer-events: none;
}

/* ===== Guest calendar responsive (analog zum Owner: auto-fit, kein CQ-Breakpoint) ===== */

.pp-guest-grid {
  display: grid;
  gap: calc(var(--spacing) * 2);
  align-items: stretch;

  /* wie Owner: 2 Spalten nur wenn wirklich Platz da ist, sonst 1 */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* wichtig: verhindert Overflow/Scrollbar durch Inhalte */
.pp-guest-left,
.pp-guest-right {
  min-width: 0;
  height: 100%;
}

/* Overview-Block immer volle Breite (unter beiden Spalten) */
.pp-guest-overview {
  grid-column: 1 / -1;
}

/* =========================================================
   Calendar decorations
   ========================================================= */

.booking-checkIn-div,
.booking-checkOut-div {
  position: absolute;
  width: 50%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.booking-checkIn-div {
  right: 0;
  bottom: 0;
}

.booking-checkOut-div {
  left: 0;
  top: 0;
}

/* Tooltip (Markup nutzt opacity-0 + transition via Tailwind) */
#priceBox:hover #priceTooltip {
  opacity: 1;
}

.booking-date-editable {
  cursor: pointer;
}
.booking-date-editable:hover {
  text-decoration: underline;
  color: #16a34a;
}
.booking-date-active {
  cursor: pointer;
  color: #16a34a;
  font-weight: 600;
}

/* =========================================================
   Tables (properties, seasons, iCal, booking list)
   ========================================================= */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

th,
td {
  border: 1px solid var(--color-gray-300);
  padding: 2px 4px;
}

th {
  background: var(--color-gray-200);
  text-align: left;
}

table:not(.booking-table) tbody tr:hover {
  background: var(--color-gray-50);
}

/* Icons in tables */
.delete-btn,
.calendar-btn,
.edit-btn,
.sync-btn,
.reorder-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
}

.delete-btn:hover {
  color: var(--color-red-500);
}

.calendar-btn:hover {
  color: var(--color-blue-600);
}

.sync-btn.syncing {
  display: inline-block;
  animation: pp-spin 0.8s linear infinite;
  cursor: default;
}

@keyframes pp-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

/* Action columns (icon-only) */
.prop-actions-col {
  width: 36px;
  text-align: center;
}

/* Merged action column: sync + calendar + edit icons side by side */
.prop-actions-col.prop-actions-merged {
  width: 64px;
  text-align: center;
  padding-left: 0;
  padding-right: 0;
}

.prop-actions-merged-inner {
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: center;
}

.prop-reorder-inner {
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: center;
  margin-top: 2px;
}

.prop-reorder-inner .reorder-btn {
  font-size: 12px;
}

/* =========================================================
   iCal table: URL nimmt Rest, andere bleiben sichtbar
   ========================================================= */

#icalTable {
  width: 100%;
  max-width: 100%;
  table-layout: fixed; /* wichtig */
}

/* URL-Spalte: Rest */
#icalTable col.ical-col-url { width: auto; }

/* Rest: feste/min Breiten (nicht 1px → sonst verschwinden sie) */
#icalTable col.ical-col-active { width: 40px; }  /* "Aktiv" + Button */
#icalTable col.ical-col-status { width: 70px; }  /* "ok:2" */
#icalTable col.ical-col-sync   { width: 100px; } /* "12:02:26 - 05:24" */
#icalTable col.ical-col-action { width: 24px; }  /* 🗑️ */

/* Non-URL: kein Umbruch */
#icalTable th.ical-col-active, #icalTable td.ical-col-active,
#icalTable th.ical-col-status, #icalTable td.ical-col-status,
#icalTable th.ical-col-sync,   #icalTable td.ical-col-sync,
#icalTable th.ical-col-action, #icalTable td.ical-col-action {
  white-space: nowrap;
}

/* URL darf schrumpfen + Ellipsis */
#icalTable th.ical-col-url,
#icalTable td.ical-col-url {
  min-width: 0;
  overflow: hidden;
}

#icalTable td.ical-col-url .ical-url-text {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================
   Properties table: fixed layout + ellipsis + column widths
   ========================================================= */

.props-table {
  table-layout: fixed;
  max-width: 100%;
}

.props-table th,
.props-table td {
  vertical-align: top;
}

.prop-cell-main {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prop-cell-sub {
  font-size: 12px;
  color: var(--color-gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.props-table th.props-th-center {
  text-align: center;
  padding-left: 0;
  padding-right: 0;
}

.props-table td.props-td-left {
  text-align: left;
  overflow: hidden; /* needed so inner ellipsis can work */
}

.props-table td.props-td-center {
  text-align: center;
  white-space: nowrap;
  padding-left: 0;
  padding-right: 0;
}

/* widths: properties table (6 cols) */
.props-table th:nth-child(1),
.props-table td:nth-child(1) {
  width: 55%;
}

.props-table th:nth-child(2),
.props-table td:nth-child(2) {
  width: 25%;
}

.props-table th:nth-child(3),
.props-table td:nth-child(3),
.props-table th:nth-child(4),
.props-table td:nth-child(4) {
  width: 56px;
  white-space: nowrap;
}

.props-table th:nth-child(6),
.props-table td:nth-child(6) {
  width: 30px;
  text-align: center;
}

/* subtle hover highlight for props-table (except booking-table) */
.props-table:not(.booking-table) tbody tr:hover td {
  background-color: #f7faff;
}

/* child indent (props col 1+2) */
.props-table .prop-row-child td:nth-child(-n + 2) :is(.prop-cell-main, .prop-cell-sub) {
  padding-left: 20px;
}

/* =========================================================
   Occupancy timeline (properties overview): endloses Belegungsband
   ========================================================= */

.occ-timeline {
  display: flex;
  align-items: flex-start;
  border: 1px solid var(--color-gray-300);
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}

.occ-names {
  flex: 0 0 160px;
  width: 160px;
  border-right: 1px solid var(--color-gray-300);
}

.occ-names-spacer {
  border-bottom: 1px solid var(--color-gray-300);
  background: var(--color-gray-200);
}

.occ-name-row {
  height: 22px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid var(--color-gray-100);
  box-sizing: border-box;
}

.occ-name-row-child {
  padding-left: 20px;
  font-weight: 400;
}

.occ-scroll {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.occ-header {
  position: relative;
}

.occ-header-months {
  position: relative;
  height: 18px;
  background: var(--color-gray-200);
  border-bottom: 1px solid var(--color-gray-300);
}

.occ-month-label {
  position: absolute;
  top: 0;
  line-height: 18px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-gray-700, #374151);
  padding-left: 4px;
  white-space: nowrap;
}

.occ-header-days {
  display: flex;
  height: 22px;
  border-bottom: 1px solid var(--color-gray-300);
}

.occ-day-cell {
  flex: 0 0 auto;
  height: 22px;
  line-height: 22px;
  text-align: center;
  font-size: 10px;
  color: var(--color-gray-500);
  border-right: 1px solid var(--color-gray-100);
  box-sizing: border-box;
}

.occ-day-weekend {
  background: var(--color-gray-50);
}

.occ-day-today {
  background: #dbeafe;
  font-weight: 700;
  color: var(--color-blue-600);
}

.occ-rows {
  position: relative;
}

.occ-row {
  position: absolute;
  left: 0;
  width: 100%;
  border-bottom: 1px solid var(--color-gray-100);
  box-sizing: border-box;
}

.occ-row-alt {
  background: var(--color-gray-50);
}

.occ-band {
  position: absolute;
  top: 3px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  box-sizing: border-box;
  padding: 0 4px;
}

.occ-band:hover {
  filter: brightness(1.08);
}

.occ-band-implied {
  cursor: default;
}

.occ-band-implied:hover {
  filter: none;
}

.occ-band-label {
  min-width: 0;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

.occ-today-marker {
  position: absolute;
  top: 0;
  width: 2px;
  background: var(--color-red-500, #ef4444);
  pointer-events: none;
  z-index: 1;
}

.occ-empty {
  padding: 1rem;
  font-size: 13px;
  color: var(--color-gray-500);
}

/* =========================================================
   Season table tweaks (base table styles apply)
   ========================================================= */

.season-table th,
.season-table td {
  padding: 4px 10px;
  font-size: 12px;
}

.season-row-empty td {
  background: var(--color-white);
}

.season-row-empty:hover td {
  background: var(--color-white) !important;
  cursor: default;
}

/* =========================================================
   Season + Rebate tables: compact width-first layout
   Voraussetzung im JS:
   - Preis-TD:   class="price-cell"
   - Nächte-TD:  class="nights-cell"
   - Status-TD:  class="status-cell"
   - Action-TD:  class="action-cell"
   ========================================================= */

.season-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

/* Spaltenbreiten */
.season-table col.season-col-range-a {
  width: 27%;
}

.season-table col.season-col-range-b {
  width: 27%;
}

.season-table col.season-col-price {
  width: 26%;
}

.season-table col.season-col-nights {
  width: 50px;
}

.season-table col.season-col-status {
  width: 50px;
}

.season-table col.season-col-action {
  width: 20px;
}

.season-table th,
.season-table td {
  padding: 0;
  font-size: 12px;
  vertical-align: middle;
}

.season-table th {
  text-align: center;
  white-space: nowrap;
}

.season-table td > input,
.season-table td > select,
.season-table td > button {
  width: 100%;
  height: 100%;
  margin: 0;
  box-sizing: border-box;
}

.season-table td > input {
  border: 0;
  border-radius: 0;
  padding: 0 2px;
  min-height: 24px;
  background: #fff;
  font-size: 12px;
  line-height: 1.2;
}

.season-table td > input:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--color-gray-400);
}

.season-table td > input[type="number"] {
  text-align: right;
}

/* Range */
.season-table td[colspan="2"] input {
  text-align: left;
}

/* Preis */
.season-table .price-cell {
  position: relative;
}

.season-table .price-cell::before {
  content: "€";
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--color-gray-500);
  pointer-events: none;
}

.season-table .price-cell input {
  padding-left: 14px;
  padding-right: 2px;
  text-align: left;
}

.date-hint-note {
  display: block;
  font-size: 10px;
  font-weight: normal;
  color: #9ca3af;
}


/* Saison/Rabatt Grid — Container Query statt Media Query */
.season-rebate-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@container (min-width: 640px) {
  .season-rebate-grid {
    grid-template-columns: 5fr 4fr;
  }
}

/* Datumsbereich-Eingabe mit Clear-Button */
.range-input-wrap {
  display: flex;
  align-items: center;
  gap: 2px;
}
.range-date-input {
  flex: 1;
  min-width: 0;
}
.range-clear-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: #d1d5db;
  font-size: 13px;
  padding: 0 2px;
  line-height: 1;
}
.range-clear-btn:hover {
  color: #6b7280;
}

/* Nächte + Status */
.season-table .nights-cell,
.season-table .status-cell {
  white-space: nowrap;
  text-align: center;
}

.season-table .nights-cell input {
  text-align: center;
}

/* Action */
.season-table .action-cell,
.season-table th:last-child,
.season-table td:last-child {
  width: 20px;
  min-width: 20px;
  max-width: 20px;
  text-align: center;
  padding: 0;
}

.season-table .season-delete-btn,
.season-table .icon-btn {
  width: 20px;
  min-width: 20px;
  max-width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.season-table .season-delete-btn:hover {
  color: var(--color-red-500);
}

.season-row-empty td {
  background: var(--color-white);
}

.season-row-empty:hover td {
  background: var(--color-white) !important;
  cursor: default;
}

/* =========================================================
   Selected state
   ========================================================= */

.props-table tr.prop-row-selected td,
.props-table tr.selected td,
.season-table tr.selected td {
  background-color: #e6f0ff !important;
}

/* =========================================================
   Fee table column widths
   ========================================================= */

.season-table col.fee-col-label  { width: 28%; }
.season-table col.fee-col-type   { width: 24%; }
.season-table col.fee-col-amount { width: 60px; }

/* Fee detail sub-row */
.fee-row-detail > td {
  background: #f3f4f6;
  padding: 3px 8px !important;
  border-top: 0;
}

.fee-row-detail:hover > td {
  background: #f3f4f6 !important;
  cursor: default;
}

.fee-detail-inner {
  display: flex;
  gap: 16px;
  align-items: center;
  font-size: 11px;
  color: #374151;
}

.fee-detail-item {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.fee-detail-item input[type="number"] {
  width: 52px;
  border: 1px solid #d1d5db;
  border-radius: 3px;
  padding: 1px 3px;
  font-size: 11px;
  background: white;
  text-align: right;
}

.fee-detail-item input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}

/* =========================================================
   Shared small helper: round plus icon buttons
   ========================================================= */

.icon-btn {
  background: var(--color-white);
  color: var(--color-gray-800);
  border: 1px solid var(--color-gray-300);

  border-radius: 6px;        /* statt rund */
  width: 100%;
  height: 24px;

  font-size: 14px;
  line-height: 1;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
}

.icon-btn:hover:not(:disabled) {
  background: var(--color-gray-100);
}

.icon-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* =========================================================
   Buchungsformular: Kontakt-Präferenz Pills
   ========================================================= */

/* Container Query statt Viewport Media Query (siehe .pp-cq weiter oben für
   dasselbe Muster an anderer Stelle) - misst die tatsächliche Breite dieses
   Elements selbst, egal ob im Zwei-Spalten-Gast-Layout, im eingebetteten
   iframe oder im Owner-Dashboard. Standard (schmal): Pills-Zeile oben,
   Freitext-Feld darunter, Trenner ausgeblendet - reicht der Platz
   (@container unten), alles in einer Zeile mit sichtbarem Trenner. */
.pp-contact-pref-cq {
  container-type: inline-size;
}

.pp-contact-pref-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pp-contact-pref-pills {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.pp-contact-pref-divider {
  display: none;
  width: 1px;
  align-self: stretch;
  background: var(--color-gray-300);
  margin: 0 4px;
  flex-shrink: 0;
}

.pp-contact-pref-other {
  width: 100%;
  min-width: 0;
  background: transparent;
}

/* Schwellwert grob geschätzt (5 Pills + Trenner + nutzbares Eingabefeld) -
   ggf. gegen echte Breiten nachkalibrieren. */
@container (min-width: 420px) {
  .pp-contact-pref-wrap {
    flex-direction: row;
    align-items: center;
  }

  .pp-contact-pref-divider {
    display: block;
  }

  .pp-contact-pref-other {
    flex: 1;
    width: auto;
  }
}

.contact-pref-pill {
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--color-gray-300);
  background: var(--color-white);
  color: var(--color-gray-700);
  font-size: 0.75rem;
  line-height: 1.4;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background-color 0.1s, color 0.1s, border-color 0.1s;
}

.contact-pref-pill:hover:not(.active) {
  background: var(--color-gray-100);
}

.contact-pref-pill.active {
  background: var(--color-header-button-500);
  color: #fff;
  border-color: var(--color-header-button-500);
}

/* =========================================================
   Fee-Tabelle: Aktions-Buttons (Edit + Delete)
   ========================================================= */

.fee-td-action {
  display: flex;
  gap: 4px;
  align-items: center;
  white-space: nowrap;
}

.fee-td-action .fee-action-btn {
  width: 28px;
  flex-shrink: 0;
}

.fee-action-btn:active:not(:disabled) {
  box-shadow: 0 0 0 3px rgba(0, 159, 166, 0.45);
  outline: none;
}

.pp-resize-handle {
  height: 12px;
  cursor: ns-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
}
.pp-resize-handle::before {
  content: '';
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: #e5e7eb;
}
.pp-resize-handle:hover::before {
  background: #9ca3af;
}

.prop-row-empty td,
.prop-row-action td,
.season-row-empty td,
.season-row-action td,
.rebate-row-empty td,
.rebate-row-action td,
.ical-row-empty td,
.ical-row-action td {
  background: var(--color-white);
}

.prop-row-empty:hover td,
.prop-row-action:hover td,
.season-row-empty:hover td,
.season-row-action:hover td,
.rebate-row-empty:hover td,
.rebate-row-action:hover td,
.ical-row-empty:hover td,
.ical-row-action:hover td {
  background: var(--color-white) !important;
  cursor: default;
}

  /* Overlay-Text besser lesbar */
  .overlay-footer {
    background: rgba(0,0,0,0.30);
    color: #fff;
  }

  .overlay-footer #imgLabelLeft,
  .overlay-footer #imgCounterRight {
    font-weight: 500;
    text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  }

  .overlay-footer #imgCounterRight {
    font-weight: 400;
  }

.astro-raw-pre {
  overflow-x: hidden;       /* keine horizontale Scrollbar */
  overflow-y: auto;         /* vertikal scrollen erlaubt */
  white-space: pre-wrap;    /* Zeilen umbrechen */
  word-break: break-word;   /* lange Tokens umbrechen */
  overflow-wrap: anywhere;  /* aggressive Umbrüche bei JSON/URLs */
}