/* Page styles for the reception-detail area — owned by that area's redesign. Build on theme.css tokens (--ui-*) and ui-* classes. */

/* Stay detail (guests/templates/reception/stay_detail.html) and check-in
   verification (checkin_detail.html). Everything is scoped under .pg-rd,
   the wrapper both pages put around their content AND their <dialog>s, so
   nothing leaks to other screens. */

/* ───────── Shared bed-picker component (design-system.css) re-tinted ─────────
   The picker reads its colours from the legacy --ops-* tokens; point them at
   the ui kit inside these pages so selection reads in the indigo accent. */
.pg-rd {
  --ops-blue: var(--ui-primary);
  --ops-blue-dark: var(--ui-primary);
  --ops-border: var(--ui-border);
  --ops-canvas: var(--ui-sunken);
  --ops-panel: var(--ui-surface);
  --ops-ink: var(--ui-text);
  --ops-subtle: var(--ui-muted);
}

/* The JS toggles [hidden] on elements that also get display from classes. */
.pg-rd [hidden] { display: none !important; }

/* ───────── Page header ───────── */
.pg-rd .rd-head-main { display: grid; gap: 10px; min-width: 0; }
.pg-rd .rd-head-main .ui-eyebrow,
.pg-rd .rd-head-main .ui-back { margin-bottom: 0; }
.pg-rd .ui-back .lucide { width: 14px; height: 14px; }
.pg-rd .rd-title { display: flex; align-items: center; gap: 14px; min-width: 0; }
.pg-rd .rd-title > div { min-width: 0; }
.pg-rd .rd-title h1 { overflow-wrap: anywhere; }
.pg-rd .rd-title .guest-ticket { margin-left: 4px; font-size: 12px; letter-spacing: .08em; vertical-align: middle; }
.pg-rd .rd-tags { gap: 6px; }
.pg-rd .ui-page-head .ui-actions { justify-content: flex-end; }

/* "More" overflow menu in the header actions */
.pg-rd .rd-more { position: relative; }
.pg-rd .rd-more > summary { list-style: none; }
.pg-rd .rd-more > summary::-webkit-details-marker { display: none; }
.pg-rd .rd-more[open] > summary { border-color: var(--ui-border-strong); background: var(--ui-sunken); }
.pg-rd .rd-more-menu {
  position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; min-width: 210px;
  display: grid; padding: 6px; border: 1px solid var(--ui-border); border-radius: 12px;
  background: var(--ui-surface); box-shadow: var(--ui-shadow-pop);
}
.pg-rd .rd-more-menu :is(a, button) {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px;
  background: transparent; color: var(--ui-text); font: inherit; font-size: 13px; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer;
}
.pg-rd .rd-more-menu :is(a, button):hover { background: var(--ui-sunken); }
.pg-rd .rd-more-menu .lucide { width: 16px; height: 16px; color: var(--ui-muted); }

/* KPI values that hold dates / labels rather than big numbers */
.pg-rd .rd-kpi-date { font-size: 19px; }

/* ───────── Cards & lists ───────── */
.pg-rd .rd-col { gap: 16px; min-width: 0; }
.pg-rd .ui-card-head h2 + p { margin-top: 2px; }
.pg-rd .ui-card.flush .ui-empty { padding: 24px 16px; }
.pg-rd .ui-list-row { grid-template-columns: auto minmax(0, 1fr) auto; }
.pg-rd .ui-list-row .ui-avatar .lucide { width: 16px; height: 16px; }
.pg-rd .ui-list .ui-empty { padding: 18px 8px; }
.pg-rd .rd-time { font-size: 12px; white-space: nowrap; }
.pg-rd .rd-note { align-items: start; }
.pg-rd .rd-note-body { white-space: pre-line; overflow-wrap: anywhere; color: var(--ui-text-2); font-size: 13px; }
.pg-rd .rd-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-rd .rd-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 700; }
.pg-rd .rd-none { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.pg-rd .rd-none .lucide { width: 15px; height: 15px; color: var(--ui-good); }
.pg-rd .rd-row-icon { width: 15px; height: 15px; color: var(--ui-muted); }
.pg-rd .ui-dl dd { overflow-wrap: anywhere; }
.pg-rd .ui-dl dd .ui-tag { vertical-align: middle; }
.pg-rd .rd-dl-wide { grid-column: 1 / -1; }
.pg-rd .rd-dl-tight { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }

/* Guest identity block (side column) */
.pg-rd .rd-guest { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pg-rd .rd-guest > div { display: grid; gap: 2px; min-width: 0; }
.pg-rd .rd-guest strong { font-size: 15px; font-weight: 800; overflow-wrap: anywhere; }
.pg-rd .rd-guest span { color: var(--ui-text-2); font-size: 13px; }
.pg-rd .ui-card-head a .lucide { width: 14px; height: 14px; }

/* Folio table */
.pg-rd .rd-folio tfoot td { padding: 10px 12px; border-top: 1px solid var(--ui-hairline); color: var(--ui-text-2); font-size: 13px; }
.pg-rd .rd-folio tfoot td:first-child { padding-left: 20px; }
.pg-rd .rd-folio tfoot td:last-child { padding-right: 20px; }
.pg-rd .rd-folio tfoot tr:first-child td { border-top-color: var(--ui-border); }
.pg-rd .rd-folio .rd-total td { background: #fafbfd; color: var(--ui-text); font-size: 15px; font-weight: 800; }
.pg-rd .rd-discount td, .pg-rd .rd-discount span { color: var(--ui-good); }

/* Stay timeline */
.pg-rd .rd-timeline { position: relative; display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.pg-rd .rd-timeline::before { content: ""; position: absolute; top: 6px; bottom: 6px; left: 13px; width: 2px; background: var(--ui-hairline); }
.pg-rd .rd-tl-item { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
.pg-rd .rd-tl-dot {
  position: relative; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--ui-surface); background: var(--ui-primary-soft); color: var(--ui-primary);
}
.pg-rd .rd-tl-dot .lucide { width: 13px; height: 13px; }
.pg-rd .rd-tl-item.pending .rd-tl-dot { background: var(--ui-warn-bg); color: var(--ui-warn); }
.pg-rd .rd-tl-item > div { display: grid; gap: 1px; min-width: 0; padding-top: 3px; }
.pg-rd .rd-tl-item strong { font-size: 13px; font-weight: 700; }
.pg-rd .rd-tl-item span { color: var(--ui-text-2); font-size: 12.5px; overflow-wrap: anywhere; }
.pg-rd .rd-tl-item time { color: var(--ui-muted); font-size: 11.5px; font-weight: 600; }

/* ───────── Check-in: workflow steps, documents, camera ───────── */
.pg-rd .rd-step { justify-content: flex-start; align-items: center; }
.pg-rd .rd-step-no {
  display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px;
  background: var(--ui-primary-soft); color: var(--ui-primary); font-size: 13px; font-weight: 800;
}
.pg-rd .rd-id-strip { padding: 12px 14px; border: 1px solid var(--ui-hairline); border-radius: var(--ui-radius-sm); background: var(--ui-sunken); }

.pg-rd .rd-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.pg-rd .rd-doc { display: grid; margin: 0; overflow: hidden; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-sunken); }
.pg-rd .rd-doc iframe { display: block; width: 100%; height: 300px; border: 0; background: #fff; }
.pg-rd .rd-doc figcaption { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--ui-hairline); background: var(--ui-surface); }
.pg-rd .rd-doc .document-link { display: flex; align-items: center; gap: 8px; margin: 0; min-width: 0; color: var(--ui-primary); font-size: 13px; font-weight: 700; text-decoration: none; }
.pg-rd .rd-doc .document-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-rd .rd-doc .document-link .lucide { flex: none; width: 16px; height: 16px; }
.pg-rd .rd-doc figcaption form { flex: none; margin: 0; }
.pg-rd .rd-doc-delete { color: var(--ui-bad, #b42318); }
.pg-rd .rd-docs-empty { grid-column: 1 / -1; border: 1px dashed var(--ui-border-strong); border-radius: var(--ui-radius-sm); background: var(--ui-sunken); }

.pg-rd .desk-upload-form { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.pg-rd .desk-upload-form input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pg-rd .desk-upload-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.pg-rd .desk-upload-trigger { cursor: pointer; }

.pg-rd .rd-camera { display: block; }
.pg-rd .rd-camera #camera { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--ui-radius-sm); background: #0f172a; object-fit: cover; }
.pg-rd .capture-status { color: var(--ui-text-2); font-size: 12.5px; font-weight: 600; }
.pg-rd .capture-status:empty { display: none; }
.pg-rd a.ui-list-row.document-link { margin: 0; color: inherit; font-weight: inherit; }
.pg-rd .rejection-form { max-width: none; gap: 12px; }

/* ───────── Modals ───────── */
.pg-rd dialog.ui-modal > form { display: block; max-width: none; margin: 0; }
.pg-rd dialog.ui-modal.rd-modal-xl { width: min(980px, calc(100vw - 32px)); }
.pg-rd .ui-modal-head .ui-icon-btn { flex: none; }
.pg-rd .ui-modal-head p strong { color: var(--ui-text); }
.pg-rd .ui-modal-foot .rd-foot-left { margin-right: auto; }
.pg-rd .ui-modal-body .ds-field-error:empty { display: none; }

/* Checkout: loyalty panel + bill */
.pg-rd .rd-loyalty { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-sunken); }
.pg-rd .rd-loyalty h3 { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--ui-text-2); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.pg-rd .rd-loyalty h3 .lucide { width: 14px; height: 14px; color: var(--ui-primary); }
.pg-rd .rd-loyalty #loyalty-checkout-panel { display: grid; gap: 8px; font-size: 13.5px; }
.pg-rd .rd-loyalty #loyalty-checkout-panel p { margin: 0; }
.pg-rd .rd-loyalty #loyalty-checkout-panel.is-saving { opacity: .6; pointer-events: none; }

.pg-rd .rd-bill { display: grid; padding: 4px 16px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); }
.pg-rd .rd-bill-row { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--ui-hairline); color: var(--ui-text-2); font-size: 13.5px; }
.pg-rd .rd-bill-row > span:last-child { color: var(--ui-text); font-weight: 700; white-space: nowrap; }
.pg-rd .rd-bill-row.rd-bill-sep { border-top: 1px solid var(--ui-border); }
.pg-rd .rd-bill-row.rd-total { border-bottom: 0; color: var(--ui-text); font-size: 16px; font-weight: 800; }
.pg-rd .rd-bill-row.rd-total > span:last-child { font-weight: 800; }

/* Bed picker modals (change room + approve) */
.pg-rd .ui-modal-body .bed-assign-progress,
.pg-rd .ui-modal-body .bed-room-select,
.pg-rd .ui-modal-body .bed-room-summary,
.pg-rd .ui-modal-body .bed-selected-summary,
.pg-rd .ui-modal-body .bed-legend { margin: 0; }
.pg-rd .bed-legend { margin-top: 10px; }
.pg-rd .bed-grid-head span:not(.lucide) { color: var(--ui-muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.pg-rd .bed-grid-head .ui-btn span { color: inherit; font-size: inherit; letter-spacing: 0; text-transform: none; }
.pg-rd .bed-card { border-width: 1px; border-radius: var(--ui-radius-sm); }
.pg-rd .bed-card.available:hover { background: var(--ui-primary-soft); }
.pg-rd .bed-card.selected { background: var(--ui-primary); }
.pg-rd .bed-slot-filled { background: var(--ui-primary); }
.pg-rd .bap-fill { background: var(--ui-primary); }
.pg-rd .bap-fill.is-complete { background: var(--ui-good); }
.pg-rd .bap-head { font-weight: 700; }
.pg-rd .bed-assign-summary { gap: 10px 22px; padding: 12px 14px; border-radius: var(--ui-radius-sm); }
.pg-rd .bas-icon { background: var(--ui-primary-soft); color: var(--ui-primary); }
.pg-rd .bas-label { font-weight: 700; }

.pg-rd .rd-assign-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 14px; align-items: start; }
.pg-rd .rd-assign-panel { display: grid; gap: 12px; min-width: 0; padding: 16px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); }
.pg-rd .rd-assign-panel h3 { margin: 0; color: var(--ui-text); font-size: 14px; font-weight: 700; }
.pg-rd .rd-assign-panel p { margin: 0; }
.pg-rd .price-box { display: grid; gap: 6px; margin: 0; padding: 12px; border: 1px solid #d9ddff; border-radius: var(--ui-radius-sm); background: var(--ui-primary-soft); }
.pg-rd .price-box-head { margin: 0; color: var(--ui-primary); font-weight: 700; }
.pg-rd .price-box input {
  width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-text); font: inherit; font-size: 14px;
}
.pg-rd .price-box input:focus { outline: none; border-color: var(--ui-primary); box-shadow: var(--ui-focus-ring); }

/* Phone-upload QR modal (moved from the template's inline <style>) */
:is(.pg-rd, .pg-rx-travel) dialog.phone-upload-modal { width: min(400px, calc(100vw - 32px)); }
:is(.pg-rd, .pg-rx-travel) .phone-upload-card { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; padding: 28px 24px 22px; text-align: center; box-sizing: border-box; }
:is(.pg-rd, .pg-rx-travel) .phone-upload-close { position: absolute; top: 14px; right: 14px; }
:is(.pg-rd, .pg-rx-travel) .phone-upload-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 12px; background: var(--ui-primary-soft); color: var(--ui-primary); }
:is(.pg-rd, .pg-rx-travel) .phone-upload-card h2 { margin: 0 0 6px; font-size: 18px; font-weight: 800; }
:is(.pg-rd, .pg-rx-travel) .phone-upload-card .muted-text { max-width: 320px; margin: 0 0 20px; color: var(--ui-text-2); font-size: 13px; }
:is(.pg-rd, .pg-rx-travel) .phone-upload-qr { display: flex; align-items: center; justify-content: center; width: 220px; height: 220px; margin-bottom: 18px; padding: 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); box-sizing: border-box; }
:is(.pg-rd, .pg-rx-travel) .phone-upload-qr img { display: block; width: 100%; height: 100%; }
:is(.pg-rd, .pg-rx-travel) .phone-upload-qr-loading { width: 32px; height: 32px; border: 3px solid var(--ui-border); border-top-color: var(--ui-primary); border-radius: 999px; animation: rd-phone-upload-spin .8s linear infinite; }
@keyframes rd-phone-upload-spin { to { transform: rotate(360deg); } }
:is(.pg-rd, .pg-rx-travel) .phone-upload-waiting { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; color: var(--ui-text); font-size: 13.5px; font-weight: 700; }
:is(.pg-rd, .pg-rx-travel) .phone-upload-waiting .lucide { width: 16px; height: 16px; color: var(--ui-good); }
:is(.pg-rd, .pg-rx-travel) .phone-upload-pulse { display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: var(--ui-primary); animation: rd-phone-upload-pulse 1.4s ease-in-out infinite; }
@keyframes rd-phone-upload-pulse { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }
:is(.pg-rd, .pg-rx-travel) .phone-upload-waiting.is-expired { color: var(--ui-warn); }
:is(.pg-rd, .pg-rx-travel) .phone-upload-waiting.is-expired .phone-upload-pulse { animation: none; background: var(--ui-warn); }
:is(.pg-rd, .pg-rx-travel) .phone-upload-guest { width: 100%; margin-bottom: 18px; padding: 10px 14px; border-radius: var(--ui-radius-sm); background: var(--ui-sunken); font-size: 13.5px; font-weight: 700; }
:is(.pg-rd, .pg-rx-travel) .phone-upload-guest:empty { display: none; }
:is(.pg-rd, .pg-rx-travel) .phone-upload-security { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 18px; color: var(--ui-muted); font-size: 12px; font-weight: 600; text-align: left; }
:is(.pg-rd, .pg-rx-travel) .phone-upload-security .lucide { flex-shrink: 0; width: 15px; height: 15px; margin-top: 1px; }

/* ───────── Responsive ───────── */
@media (max-width: 900px) {
  .pg-rd .rd-assign-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .pg-rd .ui-page-head .ui-actions { justify-content: flex-start; }
  .pg-rd .rd-more-menu { right: auto; left: 0; }
  .pg-rd .rd-title .ui-avatar.lg { width: 44px; height: 44px; font-size: 17px; }
  .pg-rd .rd-kpi-date { font-size: 16px; }
  .pg-rd .rd-docs { grid-template-columns: minmax(0, 1fr); }
  .pg-rd .ui-modal-foot .rd-foot-left { margin-right: 0; }
  .pg-rd .ui-modal-foot { justify-content: stretch; }
  .pg-rd .ui-modal-foot > * { flex: 1 1 auto; }
}

/* ───────── Print (the stay page's "Print Invoice" uses window.print()) ───────── */
@media print {
  .pg-rd .ui-actions,
  .pg-rd .rd-noprint,
  .pg-rd dialog,
  .pg-rd .ui-btn { display: none !important; }
  .pg-rd .ui-card, .pg-rd .ui-kpis { box-shadow: none; break-inside: avoid; }
  .pg-rd .ui-grid.main-side { grid-template-columns: minmax(0, 1fr); }
}