/* ============================================================================
 * biens.css — Biens module: list toolbar, table, cards, and the form.
 * Load after tokens/base/components/shell.
 * ========================================================================== */

/* --- List toolbar (filters + view toggle) --------------------------------
 * Desktop: Disponibilité (left) · Type/Devise/Statut (right group) · view toggle.
 * Mobile: Disponibilité stays visible on the left; Type/Devise/Statut collapse
 *         behind a «Filtres» button (a themed dropdown panel) on the right.
 * ------------------------------------------------------------------------ */
.toolbar { position: relative; display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); }

.avail { display: inline-flex; align-items: center; gap: var(--sp-2); }
.avail__label { font-size: var(--fs-sm); color: var(--text-muted); white-space: nowrap; }

/* Filters group: inline on the right on desktop. */
.toolbar__panel { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
.toolbar__type { min-width: 0; }
.toolbar__type .fchip { max-width: 220px; }          /* compact, truncates long labels */

/* The «Filtres» toggle is mobile-only; the clear icon shows on any size
   whenever a filter is active (replaces the old per-control "Effacer"). */
.toolbar__mtoggle { display: none; }
.toolbar__mclear { display: none; }
.toolbar__mclear:not([hidden]) { display: inline-flex; }

@media (max-width: 767px) {
  /* Wrap instead of scrolling if things don't fit on one line. */
  .toolbar { flex-wrap: wrap; gap: var(--sp-2); }
  .avail__label { display: none; }
  .avail { min-width: 0; }

  /* «Filtres» button pushed to the far right; clear icon beside it. */
  .toolbar__mtoggle { display: inline-flex; gap: 6px; margin-left: auto; }

  /* The filters group becomes a dropdown card under the toolbar, stacked. */
  .toolbar__panel {
    display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0;
    z-index: var(--z-dropdown); margin-left: 0; flex-direction: column; align-items: stretch; gap: var(--sp-3);
    padding: var(--sp-4); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-md);
  }
  .toolbar__panel.is-open { display: flex; }
  .toolbar__type, .toolbar__type .fchip { width: 100%; max-width: none; }
  .toolbar__panel .fdrop { display: flex; width: 100%; }
  .toolbar__panel .fchip { width: 100%; }
}

/* Segmented table/grid toggle — filled track, no border. */
.seg { display: inline-flex; gap: 3px; padding: 3px; background: var(--surface-2); border-radius: var(--r-md); }
.seg__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border: none; background: transparent;
  border-radius: var(--r-sm); color: var(--text-2); cursor: pointer;
  transition: background-color var(--dur) var(--ease-out);
}
.seg__btn:hover { background: var(--surface-3); }
.seg__btn[aria-pressed="true"] { background: var(--surface); color: var(--gold-ink); box-shadow: var(--shadow-sm); }

/* --- Result count + states ------------------------------------------------ */
.list-meta { color: var(--text-muted); font-size: var(--fs-sm); margin-bottom: var(--sp-3); }
.state {
  display: grid; place-items: center; gap: var(--sp-3);
  text-align: center; padding: var(--sp-12) var(--sp-4);
  color: var(--text-2);
}
.state__title { font-size: var(--fs-lg); color: var(--text); }

/* --- Table (desktop) ------------------------------------------------------ */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: var(--sp-3) var(--sp-4); text-align: left; vertical-align: middle; }
.table thead th {
  position: sticky; top: 0; background: var(--surface-2);
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted); font-weight: 600;
}
.table tbody tr { border-top: 1px solid var(--border); }
.table tbody tr:hover { background: var(--surface-2); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.cell-bien { display: flex; align-items: center; gap: var(--sp-3); }
.cell-bien__title { font-weight: 600; color: var(--text); text-decoration: none; }
.cell-bien__title:hover { color: var(--gold-ink); text-decoration: underline; }
.cell-bien__sub { font-size: var(--fs-sm); color: var(--text-muted); }

/* --- Property card (grid) ------------------------------------------------- */
.grid-biens { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fill, minmax(300px, 1.25fr)); }
.pcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.pcard__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: 4px; flex: 1; }
.pcard__title { font-weight: 600; color: var(--text); text-decoration: none; }
.pcard__title:hover { color: var(--gold-ink); text-decoration: underline; }
.pcard__sub { font-size: var(--fs-sm); color: var(--text-muted); }
.pcard__foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--sp-2); }
.pcard__price { font-weight: 600; font-variant-numeric: tabular-nums; }
.pcard__actions { display: flex; gap: var(--sp-2); padding: 0 var(--sp-4) var(--sp-4); }

/* --- Thumbnails (shared by table + card) ---------------------------------- */
.thumb { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface-2); display: block; }
.thumb--sm { width: 56px; height: 42px; aspect-ratio: auto; border-radius: var(--r-sm); flex-shrink: 0; }
.thumb--empty { display: grid; place-items: center; color: var(--text-muted); font-size: var(--fs-xs); }

/* Row action buttons sit close together; keep them compact. */
.row-actions { display: flex; gap: var(--sp-2); justify-content: flex-end; }
.btn--sm { min-height: 36px; padding: 0 var(--sp-3); font-size: var(--fs-sm); }

/* View switching: JS sets .is-view-table / .is-view-grid on the list root. */
.is-view-grid .table-wrap { display: none; }
.is-view-table .grid-biens { display: none; }
/* Phones always use cards (a wide table doesn't fit). */
@media (max-width: 767px) {
  .table-wrap { display: none !important; }
  .grid-biens { display: grid !important; }
  .seg { display: none; }            /* toggle is meaningless on phones */
}

/* ============================================================================
 * Form (create/edit a property)
 * ========================================================================== */
.form { max-width: 760px; margin-inline: auto; }
.form-section { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); padding: var(--sp-5); margin-bottom: var(--sp-5); }
.form-section > legend, .form-section__title { font-size: var(--fs-lg); font-weight: 600; margin-bottom: var(--sp-4); padding: 0; }
/* Two columns on wider screens, one on phones. */
.form-grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.form-grid .field--full { grid-column: 1 / -1; }

/* Amenity checkboxes laid out as a wrap of pills. */
.checks { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.check { display: inline-flex; align-items: center; gap: 6px; padding: 8px var(--sp-3); background: var(--surface-2); border: none; border-radius: var(--r-pill); cursor: pointer; font-size: var(--fs-sm); transition: background-color var(--dur) var(--ease-out); }
.check:hover { background: var(--surface-3); }
/* Selected amenity: subtle emphasis (no hard border). :has() checks the inner box. */
.check:has(input:checked) { background: var(--surface-3); color: var(--gold-ink); font-weight: 500; }
.check input { accent-color: var(--gold-700); }

/* In the amenities wrap, hide the raw checkbox so each reads as a clean
   icon + label chip; keep it operable and keyboard-focusable (ring on the pill).
   (Currency checkboxes in .ccy__row keep their visible box.) */
.checks .check { position: relative; }
.checks .check input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.checks .check:focus-within { outline: 2px solid var(--ring); outline-offset: 2px; }

/* Per-currency price rows (property form). */
.ccy { display: flex; flex-direction: column; gap: var(--sp-3); }
.ccy__row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.ccy__row .check { min-width: 130px; }
.ccy__row .input { flex: 1; min-width: 180px; }

/* Profit input with an embedded unit switch (amount ↔ %) — same filled,
   borderless language as .input; the tiny segmented control sits inside. */
.profit {
  display: flex; align-items: center; gap: 4px;
  flex: 1; min-width: 200px; min-height: 44px; padding-right: 4px;
  background: var(--surface-2); border-radius: var(--r-md);
  transition: background-color var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.profit:hover { background: var(--surface-3); }
.profit:focus-within { background: var(--surface); outline: 2px solid var(--ring); outline-offset: 2px; }
.profit__val {
  flex: 1; min-width: 0; min-height: 44px; padding: 0 var(--sp-4);
  border: none; background: transparent; color: var(--text); outline: none;
}
.profit__val::placeholder { color: var(--text-muted); }
.profit__unit { display: inline-flex; gap: 3px; padding: 3px; background: var(--surface-3); border-radius: var(--r-sm); flex-shrink: 0; }
.profit:focus-within .profit__unit { background: var(--surface-2); }
.profit__u {
  min-width: 34px; height: 28px; border: none; border-radius: 5px;
  background: transparent; color: var(--text-2);
  font-size: var(--fs-xs); font-weight: 600; cursor: pointer;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.profit__u.is-active { background: var(--surface); color: var(--gold-ink); box-shadow: var(--shadow-sm); }
.profit.is-disabled { opacity: .5; pointer-events: none; }

/* Photo uploader */
.uploader__drop {
  display: grid; place-items: center; gap: var(--sp-2);
  padding: var(--sp-8); text-align: center;
  background: var(--surface-2);
  border: 1.5px dashed var(--border); border-radius: var(--r-lg);
  color: var(--text-2); cursor: pointer;
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.uploader__drop:hover { background: var(--surface-3); }
.uploader__drop.is-over { border-color: var(--gold-500); background: var(--surface-3); }
.uploader__grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); margin-top: var(--sp-4); }
.photo { position: relative; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); }
.photo img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.photo__bar { position: absolute; inset: auto 0 0 0; display: flex; justify-content: space-between; gap: 4px; padding: 4px; background: linear-gradient(transparent, rgba(20,17,11,.6)); }
.photo__btn { font-size: var(--fs-xs); color: #fff; background: rgba(20,17,11,.5); border: none; border-radius: var(--r-sm); padding: 3px 6px; cursor: pointer; }
.photo__btn--active { background: var(--gold-600, var(--gold-500)); color: var(--on-gold); }
.photo--cover { outline: 2px solid var(--gold-500); outline-offset: -2px; }
.photo__cover-tag { position: absolute; top: 4px; left: 4px; font-size: var(--fs-xs); background: var(--gold-500); color: var(--on-gold); padding: 2px 6px; border-radius: var(--r-sm); }

/* Sticky save bar at the bottom of the form. */
.form-actions {
  position: sticky; bottom: 0; z-index: var(--z-sticky);
  display: flex; justify-content: flex-end; gap: var(--sp-3);
  padding: var(--sp-4); margin-top: var(--sp-4);
  background: var(--surface); border-top: 1px solid var(--border);
}
/* On phones a sticky bar overlaps fields as you scroll — let it sit at the end. */
@media (max-width: 767px) { .form-actions { position: static; } }

/* ============================================================================
 * Detail page (bien.html)
 * ========================================================================== */
/* Cap the whole detail column so nothing (esp. the gallery) stretches on wide screens. */
.detail { max-width: 1120px; margin-inline: auto; }
.breadcrumb { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--sp-3); }
.breadcrumb a { color: var(--gold-ink); }
.detail-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-6);
}
.detail-title { font-size: var(--fs-2xl); }
.detail-sub { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); color: var(--text-2); font-size: var(--fs-sm); }
.detail-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

/* Tabs = filled pills (no hard borders). */
.tabs { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.tab { padding: 8px var(--sp-4); border: none; background: transparent; border-radius: var(--r-md); color: var(--text-2); font-weight: 500; cursor: pointer; }
.tab:hover { background: var(--surface-2); }
.tab.is-active { background: var(--surface-2); color: var(--gold-ink); font-weight: 600; }
.tab-pane[hidden] { display: none; }

/* Aperçu layout.
 * Phones: one column — gallery → fiche → équipements → description → actions.
 * Desktop: a two-column "dossier" — the property content on the left, a sticky
 * reservation panel (price fiche + booking actions) on the right.
 * The aside's contents flow back inline on phones via display:contents, and
 * `order` restores the phone sequence (fiche right after the gallery). */
.detail-body { display: flex; flex-direction: column; gap: var(--sp-5); }
.detail-main, .detail-aside { display: contents; }
.apercu__media { min-width: 0; }
.detail-body .apercu__media { order: 1; }
.detail-body .fiche { order: 2; }
.detail-body .detail-card { order: 3; }
.detail-body .detail-cta { order: 4; }

@media (min-width: 900px) {
  .detail-body {
    display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 360px);
    gap: var(--sp-6); align-items: start;
  }
  .detail-main { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
  /* Sticky reservation panel; 76px clears the 60px top bar + breathing room. */
  .detail-aside { position: sticky; top: 76px; display: flex; flex-direction: column; gap: var(--sp-4); }
}

/* Gallery (now constrained by its column, so the hero is a sensible size). */
.gallery__hero { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-lg); background: var(--surface-2); }
.gallery__hero.thumb--empty { display: grid; place-items: center; color: var(--text-muted); }
.gallery__thumbs { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); flex-wrap: wrap; }
.gallery__thumb { width: 72px; height: 54px; padding: 0; border: none; background: none; border-radius: var(--r-sm); overflow: hidden; cursor: pointer; opacity: .7; transition: opacity var(--dur) var(--ease-out); }
.gallery__thumb:hover { opacity: 1; }
.gallery__thumb.is-active { opacity: 1; outline: 2px solid var(--gold-500); outline-offset: -2px; }
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Info fiche: nightly price as the hero number, then a hairline spec sheet. */
.fiche { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: var(--sp-5); }
.fiche__head { padding-bottom: var(--sp-4); margin-bottom: var(--sp-3); border-bottom: 1px solid var(--border); }
.fiche__price { display: flex; align-items: baseline; gap: 6px; }
.fiche__price-val { font-size: var(--fs-3xl); font-weight: 700; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.fiche__price-unit { color: var(--text-muted); font-size: var(--fs-sm); }
.fiche__note { margin-top: 4px; font-size: var(--fs-sm); color: var(--text-muted); }
.fiche__facts { display: flex; flex-direction: column; }
.fr { display: flex; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); }
.fr:last-child { border-bottom: none; }
.fr dt { color: var(--text-muted); font-size: var(--fs-sm); }
.fr dd { font-weight: 500; text-align: right; }

/* Long-form blocks */
.detail-block { margin-bottom: var(--sp-6); }
.detail-h { font-size: var(--fs-lg); margin-bottom: var(--sp-3); }
.detail-text { color: var(--text-2); max-width: 65ch; white-space: pre-wrap; }

/* Carded content blocks (Équipements, Description, Règles) — same quiet card as
 * the fiche. Spacing comes from the flex/grid gap of .detail-body/.detail-main. */
.detail-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: var(--sp-5); }

/* Amenity pills: filled chip + a bronze glyph. */
.amenities { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.amenity { display: inline-flex; align-items: center; gap: 6px; padding: 8px var(--sp-3); background: var(--surface-2); border-radius: var(--r-pill); font-size: var(--fs-sm); color: var(--text-2); }
.amenity svg { color: var(--gold-ink); flex-shrink: 0; }

/* Action block inside the reservation panel: primary action, then management row. */
.detail-cta { display: flex; flex-direction: column; gap: var(--sp-3); }
.detail-cta__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; }

/* ============================================================================
 * Pricing calendar (Tarification)
 * ========================================================================== */
.pcal__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.pcal__nav { display: flex; align-items: center; gap: var(--sp-2); }
.pcal__month { min-width: 160px; text-align: center; font-weight: 600; text-transform: capitalize; }
.pcal__cur { font-size: var(--fs-sm); color: var(--text-muted); }
/* DA/€ switcher (shown only when the property accepts both) — segmented pill. */
.pcal__ccy { display: inline-flex; gap: 3px; padding: 3px; background: var(--surface-2); border-radius: var(--r-md); }
.pcal__ccy-btn { min-width: 40px; height: 32px; border: none; background: transparent; border-radius: var(--r-sm); color: var(--text-2); font-weight: 500; cursor: pointer; }
.pcal__ccy-btn.is-active { background: var(--surface); color: var(--gold-ink); box-shadow: var(--shadow-sm); }
.pcal__wd { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; }
.pcal__wd span { text-align: center; font-size: var(--fs-xs); text-transform: uppercase; color: var(--text-muted); }
.pcal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.pcal__pad { min-height: 56px; }
.pcal__day {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 56px; padding: 4px; overflow: hidden;
  border: none; border-radius: var(--r-sm); background: var(--surface-2); color: var(--text); cursor: pointer;
  transition: background-color var(--dur) var(--ease-out);
}
.pcal__day:hover { background: var(--surface-3); }
.pcal__day.is-override { background: rgba(192, 160, 86, .16); }   /* soft gold tint */
.pcal__day.is-sel { outline: 2px solid var(--gold-500); outline-offset: -2px; }
.pcal__d { font-size: var(--fs-sm); font-weight: 600; }
.pcal__p { font-size: 10px; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pcal__min { font-size: 9px; line-height: 1; color: var(--gold-ink); }
@media (max-width: 440px) { .pcal__p { font-size: 9px; } }

.pcal__hint { font-size: var(--fs-sm); color: var(--text-muted); margin: var(--sp-3) 0 var(--sp-6); }
.pcal__title { font-size: var(--fs-lg); margin-bottom: var(--sp-3); }
.pcal__empty { color: var(--text-2); }

.ov-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); }
.ov { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); }
.ov__main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ov__name { font-weight: 600; }
.ov__dates { font-size: var(--fs-sm); color: var(--text-muted); }
.ov__price { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.ov__actions { display: flex; gap: var(--sp-2); }