/* ============================================================
   SNS Valley View — Admin panel (build 2b)
   Not a redesign: reuses .overline, the display h1 pattern
   (gallery.css's .gallery-page__title), .btn, and booking.css's dormant
   .field vocabulary verbatim. Only new here is this section's own
   centered layout and the plain logout control. See docs/DECISIONS.md.
   ============================================================ */
.admin-auth {
  padding: 120px var(--pad-x) 140px;
  max-width: 400px;
  margin: 0 auto;
  text-align: center;
}

.admin-auth__title {
  margin: 12px 0 0;
  font-family: var(--f-display);
  font-size: 44px;
  font-weight: 300;
  line-height: 1.1;
  color: var(--c-cream);
}

.admin-auth__error {
  margin: 24px 0 0;
  padding: 12px 16px;
  font-size: 13px;
  color: var(--c-cream);
  background: var(--c-bg-card);
  border: 1px solid var(--c-gold-line);
}

.admin-auth__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 32px;
  text-align: left;
}
.admin-auth__form .field { width: auto; }
.admin-auth__form .btn { width: 100%; box-sizing: border-box; }

/* Deliberately plain — a text-only control with no button chrome, sized
   and coloured to sit quietly rather than compete with the panel's real
   content, same "unremarkable" register as the footer admin link
   (footer.templ, docs/DECISIONS.md). */
.admin-logout {
  text-align: right;
  padding: 24px var(--pad-x) 0;
}
.admin-logout__button {
  font-family: var(--f-ui);
  font-size: 12px;
  color: var(--c-cream-45);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.admin-logout__button:hover { color: var(--c-cream); }

/* ------------------------------------------------------------
   Price editor (build 2b Stage 2)
   Left-aligned, not centered like .admin-auth — this is a working tool
   read top-to-bottom (pick a room, see its price, change it), not a
   single-action gate.
   ------------------------------------------------------------ */
.admin-prices {
  padding: 80px var(--pad-x) 140px;
  max-width: 480px;
}

.admin-prices__title {
  margin: 12px 0 40px;
  font-family: var(--f-display);
  font-size: 44px;
  font-weight: 300;
  line-height: 1.1;
  color: var(--c-cream);
}

/* The room picker. There is no "View" button any more: every room's price
   form is on the page, and the checked radio decides which one is shown.

   The pairing is POSITIONAL, never by database id — the radios and the
   forms are rendered from the same loop, so the nth radio belongs to the
   nth form. Hardcoding ids here would bind a stylesheet to a table's
   primary keys, which is a coupling nobody would notice breaking until a
   reseeded database quietly showed the wrong room's price. Rules are
   emitted up to 8 rooms (four exist); the spare ones match nothing and
   cost nothing.

   Everything is inside @supports selector(:has(*)): where :has() is
   unsupported, no form is hidden and the page renders every room's price
   field at once — longer, completely usable, nothing lost but the
   selection. */
.admin-prices__rooms {
  margin: 0 0 24px;
  padding: 16px 24px;
  background: var(--c-bg-field);
  border: 1px solid var(--c-hair);
}
.admin-prices__rooms legend {
  padding: 0;
  /* A legend sits in the border box by default, which is exactly where a
     field label should not be — same treatment as the feedback form's
     rating fieldset. */
  float: left;
  width: 100%;
}

.admin-prices__room-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 16px;
  clear: both;
  padding-top: 12px;
}

.admin-prices__room-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.admin-prices__room-option input {
  accent-color: var(--c-gold);
  /* Without this the browser paints a light-mode radio — a white disc — on
     a near-black field, the brightest thing on the page. Scoped here, not
     on :root, so no other control on the site changes. */
  color-scheme: dark;
  width: 16px;
  height: 16px;
  margin: 0;
}
.admin-prices__room-name {
  font-size: 14px;
  color: var(--c-cream-55);
}
.admin-prices__room-option input:checked + .admin-prices__room-name { color: var(--c-cream); }

@supports selector(:has(*)) {
  .admin-prices__picker .admin-prices__form { display: none; }
.admin-prices__picker:has(.admin-prices__room-option:nth-child(1) input:checked)
  .admin-prices__form:nth-of-type(1) { display: flex; }
.admin-prices__picker:has(.admin-prices__room-option:nth-child(2) input:checked)
  .admin-prices__form:nth-of-type(2) { display: flex; }
.admin-prices__picker:has(.admin-prices__room-option:nth-child(3) input:checked)
  .admin-prices__form:nth-of-type(3) { display: flex; }
.admin-prices__picker:has(.admin-prices__room-option:nth-child(4) input:checked)
  .admin-prices__form:nth-of-type(4) { display: flex; }
.admin-prices__picker:has(.admin-prices__room-option:nth-child(5) input:checked)
  .admin-prices__form:nth-of-type(5) { display: flex; }
.admin-prices__picker:has(.admin-prices__room-option:nth-child(6) input:checked)
  .admin-prices__form:nth-of-type(6) { display: flex; }
.admin-prices__picker:has(.admin-prices__room-option:nth-child(7) input:checked)
  .admin-prices__form:nth-of-type(7) { display: flex; }
.admin-prices__picker:has(.admin-prices__room-option:nth-child(8) input:checked)
  .admin-prices__form:nth-of-type(8) { display: flex; }
}

.admin-prices__success {
  margin: 0 0 24px;
  padding: 12px 16px;
  font-size: 13px;
  color: var(--c-cream);
  background: var(--c-bg-card);
  border: 1px solid var(--c-gold-line);
}

.admin-prices__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 320px;
}
.admin-prices__form .btn { width: 100%; box-sizing: border-box; }

/* ------------------------------------------------------------
   Admin nav + guest feedback (feat/guest-feedback)
   The panel has two pages now, so it needs a way between them, and the
   feedback list needs a shape a paragraph of prose can live in. Same
   left-aligned working-tool register, same .btn vocabulary; nothing new
   but the card's own hairline.
   ------------------------------------------------------------ */
.admin-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: -24px 0 40px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--c-hair);
}

/* 14px at cream-55, not 12px at cream-45. The first attempt sat at the
   panel's quietest tier, directly under a 44px display heading, and was
   missed outright by the one person this panel exists for — who logged in,
   read the price editor, and never found the second page. A nav is
   wayfinding, not legal text: it has to be legible before it is
   restrained. */
.admin-nav__link {
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--c-cream-55);
}
.admin-nav__link:hover { color: var(--c-cream); }

/* The current page is cream, not gold: gold here would make "where you
   already are" the most eye-catching thing on the page, ahead of the
   other page you might want to reach. */
.admin-nav__link--current { color: var(--c-cream); }

/* The one accent, used for the one thing on this page that is actually
   news — and boxed, so it reads as a badge rather than as three more words
   in the link it follows. Gold-on-hairline is the same pairing the Reserve
   button uses; nothing new, just applied to the one element on the page
   that is genuinely new information. */
.admin-nav__count {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 8px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-gold);
  border: 1px solid var(--c-gold-line);
}

.admin-feedback {
  padding: 80px var(--pad-x) 140px;
  max-width: 640px;
}

.admin-feedback__empty {
  margin: 0;
  font-size: 13px;
  color: var(--c-cream-45);
}

/* The list scrolls inside itself, so the heading and the nav stay put while
   you read down it — client-directed. max-height is viewport-relative, not a
   fixed pixel height: a fixed one would be a reading window on a laptop and a
   letterbox on a phone, and this panel is read on a phone as often as not.
   Below that height nothing scrolls at all, so a short list looks exactly as
   it did before.

   overscroll-behavior: contain stops a flick that reaches the end of the list
   from carrying on into the page behind it — the specific thing that makes a
   scroll box inside a scrolling page feel broken on touch.

   The scrollbar is painted rather than left to the browser: macOS hides
   overlay scrollbars until you scroll, which is precisely when a reader needs
   to know the box scrolls at all. Gold hairline on nothing, square — the
   same accent and the same zero radius as everything else. */
.admin-feedback__list {
  margin: 0;
  padding: 0 16px 0 0;
  list-style: none;
  max-height: 72vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--c-gold-line) transparent;
}
.admin-feedback__list::-webkit-scrollbar { width: 8px; }
.admin-feedback__list::-webkit-scrollbar-track { background: transparent; }
.admin-feedback__list::-webkit-scrollbar-thumb {
  background: var(--c-gold-line);
  border-radius: 0;
}
.admin-feedback__list::-webkit-scrollbar-thumb:hover { background: var(--c-gold); }

/* The last entry's hairline is the list's own bottom edge when it scrolls —
   without this it reads as a cut-off row rather than the end. */
.admin-feedback__item:last-child { border-bottom: 0; }

.admin-feedback__item {
  padding: 24px 0;
  border-bottom: 1px solid var(--c-hair);
}
.admin-feedback__item:first-child { padding-top: 0; }

.admin-feedback__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
}

.admin-feedback__name {
  font-size: 15px;
  color: var(--c-cream);
}

.admin-feedback__new {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-gold);
}

.admin-feedback__received {
  margin-left: auto;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--c-cream-40);
}

.admin-feedback__rating {
  margin: 10px 0 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--c-cream-55);
}

/* white-space: pre-wrap keeps the paragraph breaks a guest actually
   typed. They wrote it in lines; reflowing it into one block would be
   editing it. */
.admin-feedback__message {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-cream);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.admin-feedback__email {
  display: inline-block;
  margin-top: 12px;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.admin-feedback__no-email {
  display: inline-block;
  margin-top: 12px;
  font-size: 12px;
  color: var(--c-cream-40);
}

.admin-feedback__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}
.admin-feedback__action { margin: 0; }
.admin-feedback__actions .btn {
  padding: 6px 14px;
  font-size: 11px;
}
.admin-feedback__cancel {
  font-size: 12px;
  color: var(--c-cream-45);
}
.admin-feedback__cancel:hover { color: var(--c-cream); }

@media (max-width: 680px) {
  .admin-auth { padding: 88px var(--pad-x) 96px; }
  .admin-auth__title { font-size: 36px; }
  .admin-prices { padding: 56px var(--pad-x) 96px; }
  /* One room per line at phone width: four options wrap into a ragged
     block otherwise, and a full-width row is a proper tap target. */
  .admin-prices__room-options { grid-template-columns: 1fr; gap: 4px; }
  .admin-prices__room-option { min-height: 44px; }
  .admin-prices__form { max-width: none; }

  .admin-feedback { padding: 56px var(--pad-x) 96px; }
  .admin-nav { gap: 16px; }

  /* The timestamp sits on its own line rather than being pushed to the
     far edge by margin-left:auto — at phone width that auto margin
     crushes a long guest name into two characters per line. */
  .admin-feedback__received { margin-left: 0; width: 100%; }
}