/* Admin listing & stay management forms (Admin::ListingsController /
   Admin::StaysController). The moderation queue table lives in
   components/shell.css + components/tables.css; this file owns only the
   create/edit form layout so it doesn't grow an unrelated component. */

/* Two-column field grid inside the form card. The card is a query container
   (.bido-table-card sets container-type: inline-size), so the grid collapses to
   one column on a narrow card without a viewport breakpoint. */
.bido-admin-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 16px;
}

/* Fields that read better full width: title, category, description, photos. */
.bido-admin-form .bido-admin-form-wide {
  grid-column: 1 / -1;
}

/* Single-field forms (add-a-stay URL, stay description) skip the grid and just
   keep a comfortable reading measure. */
.bido-admin-form-narrow {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  max-width: 48rem;
}

.bido-admin-form-photos {
  padding: 16px;
  border-top: 1px solid var(--bx-line);
}

.bido-admin-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 8rem), 1fr));
  gap: 12px;
  margin-top: 10px;
}

.bido-admin-photo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bido-admin-photo .photo-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--bx-r);
}

.bido-admin-photo-remove {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--bx-text-xs);
  color: var(--bx-ink-3);
}

/* Drag-to-reorder photo grid on the stay edit page (photo_sort_controller).
   CSS owns every position affordance — the counter numbers each tile and
   :nth-child marks the five that run in the catalog carousel — so a DOM
   reorder reflects instantly with no JS bookkeeping. */
.bido-photo-sort {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.bido-photo-sort form {
  inline-size: 100%;
}

.bido-photo-sort-grid {
  counter-reset: photo-position;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr));
  gap: 12px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.bido-photo-sort-item {
  counter-increment: photo-position;
  position: relative;
  border-radius: var(--bx-r);
  cursor: grab;
}

.bido-photo-sort-item .photo-img {
  display: block;
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--bx-r);
  user-select: none;
  -webkit-user-drag: none;
}

.bido-photo-sort-item.dragging {
  opacity: 0.65;
  outline: 2px solid var(--bx-accent);
  outline-offset: 2px;
  cursor: grabbing;
}

.bido-photo-sort-item .order-badge {
  position: absolute;
  inset-block-start: 6px;
  inset-inline-start: 6px;
  display: grid;
  place-items: center;
  min-inline-size: 22px;
  block-size: 22px;
  padding-inline: 5px;
  border-radius: 999px;
  background: rgba(var(--bx-black-rgb), 0.55);
  color: rgb(var(--bx-white-rgb));
  font: 700 var(--bx-text-xs) var(--bx-font-mono);
}

.bido-photo-sort-item .order-badge::before {
  content: counter(photo-position);
}

/* The five photos travelers actually see on the catalog carousel. */
.bido-photo-sort-item .catalog-flag {
  position: absolute;
  inset-block-end: 6px;
  inset-inline-start: 6px;
  display: none;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--bx-accent-tint);
  color: var(--bx-accent-ink);
  font: 700 var(--bx-text-2xs) var(--bx-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bido-photo-sort-item:nth-child(-n + 5) .catalog-flag {
  display: inline-flex;
}

.bido-photo-sort-item:nth-child(-n + 5) .photo-img {
  outline: 2px solid var(--bx-accent-line);
  outline-offset: -2px;
}

/* Photos the nightly refresh added after the admin last saved an order. */
.bido-photo-sort-item .new-flag {
  position: absolute;
  inset-block-start: 6px;
  inset-inline-end: 6px;
}

/* Touch drags start here (touch-action: none), so the rest of the grid keeps
   normal page scrolling; mouse drags can start anywhere on the tile. */
.bido-photo-sort-item .drag-handle {
  position: absolute;
  inset-block-end: 4px;
  inset-inline-end: 4px;
  display: grid;
  place-items: center;
  inline-size: var(--bx-control-h-sm);
  block-size: var(--bx-control-h-sm);
  border: 0;
  border-radius: var(--bx-r);
  background: rgba(var(--bx-black-rgb), 0.55);
  color: rgb(var(--bx-white-rgb));
  font-size: var(--bx-text-lg);
  touch-action: none;
  cursor: grab;
}

@media (pointer: coarse) {
  .bido-photo-sort-item .drag-handle {
    inline-size: var(--bx-control-h);
    block-size: var(--bx-control-h);
  }
}

@container (max-width: 34rem) {
  .bido-admin-form {
    grid-template-columns: minmax(0, 1fr);
  }
}