[x-cloak] { display: none !important; }

.signin-screen {
  min-height: 100vh;
}

.signin-card {
  width: min(400px, 92vw);
}

/* Photo grids: a venue's pictures read better as a strip than as rows. */
.photo-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

.photo-strip figure {
  position: relative;
  margin: 0;
}

.photo-strip img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
}

.photo-strip button {
  position: absolute;
  top: 6px;
  inset-inline-end: 6px;
}

.stat-tile .h4 {
  margin-bottom: 0;
}

/* AdminLTE floats .card-title, so whatever follows a heading wraps up beside
   it: "Create a venueOr pick an existing one". Let headings be headings. */
.card-title {
  float: none;
  display: block;
}

/* Amenities and room features: what has been added, before what is being
   typed. */
.tag-field {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag-field .badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.85rem;
  font-weight: 500;
}

.tag-field .btn-close {
  font-size: 0.6rem;
}

/* A booking that just landed. Top right, above everything, until dismissed —
   a venue should not lose one because it was scrolled past. */
.arrival-stack {
  position: fixed;
  top: 16px;
  inset-inline-end: 16px;
  z-index: 1080;
  display: grid;
  gap: 8px;
  width: min(360px, calc(100vw - 32px));
}

.arrival {
  border-inline-start: 4px solid var(--bs-success);
  animation: arrival-in 240ms ease-out;
}

@keyframes arrival-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* The dashboard's fourteen days: plain bars, tallest day full height. */
.dashboard-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 11rem;
}

.dashboard-bar {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
}

.dashboard-bar-track {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.dashboard-bar-fill {
  width: 100%;
  max-width: 2.5rem;
  border-radius: 4px 4px 0 0;
  background: var(--bs-primary);
}

.dashboard-bar-fill.empty {
  background: var(--bs-border-color);
}

/* Fourteen labels do not fit a phone; the hover title still has the day. */
@media (max-width: 576px) {
  .dashboard-bar .text-nowrap { display: none; }
}