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

/* =========================================================
   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: minmax(280px, 1fr) minmax(280px, 1fr);
  }
}

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

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

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

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

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

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

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

/* =========================================================
   Selected state (JS adds .selected)
   ========================================================= */

:is(.props-table, .season-table) tr.selected td {
  background-color: #e6f0ff !important;
}

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

.icon-btn {
  background: var(--color-gray-200);
  color: var(--color-gray-800);
  border: 1px solid var(--color-gray-400);
  border-radius: 9999px;
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

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

.icon-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}