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

/* 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;
}

/* ===== 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 {
  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);
}

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

/* =========================================================
   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;
}

.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;
}

/* 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: 70px;
  white-space: nowrap;
}

.props-table th:nth-child(5),
.props-table td:nth-child(5),
.props-table th:nth-child(6),
.props-table td:nth-child(6),
.props-table th:nth-child(7),
.props-table td:nth-child(7) {
  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;
}

/* =========================================================
   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::after {
  content: "€";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--color-gray-500);
  pointer-events: none;
}

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

/* 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;
}

/* =========================================================
   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
   ========================================================= */

.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 */
}