/* Room map. Follows design.md: ink, paper, one highlighter yellow; squared controls; no shadows or pills.
   Status colours come from STATUSES in room-map-model.mjs (--status-fill / --status-ink per element). */

/* ---- Entry points in the check-in screen ---- */
.map-toggle { display:grid; place-items:center; flex-shrink:0; width:36px; height:36px; padding:0; margin-bottom:6px; border:1px solid #5A6C88; border-radius:8px; background:transparent; color:#fff; cursor:pointer; }
.map-toggle:hover { background:#34445E; }
/* the Room field: looks like the other fields; once assigned it reads as a filled value, not a green "success" */
.room-picker { padding:4px 10px; border:1px solid var(--line); border-radius:6px; background:#fff; font-size:14px; white-space:nowrap; cursor:pointer; }
.room-picker:hover { background:#F1F4F8; }
.room-picker.assigned { border-color:var(--ink); font-weight:700; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }

/* ---- Dialog shell ---- */
.room-map { width:min(1240px, calc(100vw - 32px)); max-width:none; height:calc(100dvh - 32px); max-height:none; padding:0; border:1px solid var(--line); border-radius:10px; background:var(--paper); color:var(--ink); }
.room-map::backdrop { background:#14243BCC; }
.room-map[open] { display:flex; flex-direction:column; }
.map-close { position:absolute; top:10px; right:12px; z-index:2; width:32px; height:32px; border:1px solid var(--line); border-radius:6px; background:#fff; font-size:22px; line-height:1; cursor:pointer; }
.map-close:hover { background:#F1F4F8; }
.map-content { flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) 350px; overflow:auto; }
.map-main { min-width:0; padding:16px; }

/* ---- Legend: a swatch and a word, like the paper chart's legend ---- */
.map-legend { display:flex; flex-wrap:wrap; gap:6px 16px; padding:0 0 12px; font-size:13px; color:var(--pencil); }
.map-legend > span { display:inline-flex; align-items:center; gap:6px; }
.map-swatch { display:inline-block; width:14px; height:14px; border:1px solid var(--ink); border-radius:3px; }

/* ---- Map canvas and rooms ---- */
.map-canvas { overflow:auto; background:#fff; border:1px solid var(--line); border-radius:10px; }
.map-canvas svg { display:block; width:100%; height:auto; }
.map-room { cursor:pointer; outline:none; }
.map-room rect { stroke-width:1.25; }
.map-room:hover rect { stroke-width:2.5; }
/* the selected room uses the app's focus blue: it is "where you are", and works on every status fill */
.map-room[aria-pressed="true"] rect, .map-room:focus-visible rect { stroke:#3B82F6; stroke-width:4; }
.map-room text { pointer-events:none; }
/* placing a guest: rooms they can't have, or of a type they didn't ask for, fade back (still clickable) */
.room-map.picking .map-room:not(.selectable) { opacity:.3; }
.room-map.picking.has-want .map-room:not(.match) { opacity:.3; }
.room-map.picking.has-want .map-room.match.selectable rect { stroke-width:2.5; }
.map-facility { fill:#F7F8FA; stroke:#8491A3; stroke-width:1.25; }
.map-line { stroke:#A0ACBC; fill:none; stroke-width:1.5; }
.map-small { font-size:13px; fill:var(--pencil); }

/* ---- Side panel ---- */
.map-side { padding:54px 18px 18px; background:#fff; border-left:1px solid var(--line); }
.map-side-inner { position:sticky; top:54px; }
.map-detail-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.map-side h2 { margin:0; font-size:22px; }
/* status tag: square-cornered, like the room-code badge */
#map-room-status { padding:3px 8px; border:1px solid var(--ink); border-radius:4px; background:var(--status-fill); color:var(--status-ink); font-size:13px; font-weight:700; white-space:nowrap; }
.map-hint { margin:0 0 16px; font-size:13px; color:var(--pencil); }

/* tabs = the checklist's choice buttons: every option visible, the chosen one ink-filled */
.map-tabs { display:flex; margin-bottom:18px; border:1px solid var(--line); border-radius:6px; overflow:hidden; background:#fff; }
.map-tabs[hidden] { display:none; }
.map-tabs button { flex:1; min-height:40px; padding:8px 6px; border:0; border-left:1px solid var(--line); background:transparent; font-size:14px; cursor:pointer; }
.map-tabs button:first-child { border-left:0; }
.map-tabs button:hover { background:#F1F4F8; }
.map-tabs button[aria-pressed="true"] { background:var(--ink); color:#fff; font-weight:700; }

/* guest overview: same room box and fact list as page 2 of the check-in form */
.map-guest-heading { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.map-guest-heading .sum-room { flex-shrink:0; }
.map-guest-heading h3 { margin:0 0 4px; font-size:19px; overflow-wrap:anywhere; }
.map-guest-heading p { margin:0; font-size:13px; color:var(--pencil); }
.map-facts { display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; margin:0 0 18px; }
.map-facts dt { font-size:12px; color:var(--pencil); }
.map-facts dd { margin:0; font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.map-checklist { padding:10px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:13px; }
.map-checklist summary { cursor:pointer; color:var(--pencil); }
.map-checklist ul { margin:8px 0 0; padding:0; list-style:none; }
.map-checklist li { margin:3px 0; }
.map-room-notes { font-size:14px; white-space:pre-wrap; overflow-wrap:anywhere; }

/* ---- Buttons: same three kinds as the check-in screen ---- */
.map-guest-actions { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }
/* secondary (like "Back to checklist") */
.map-secondary, .map-checkout { min-height:40px; padding:6px 12px; border:1px solid var(--line); border-radius:6px; background:#fff; font-size:14px; cursor:pointer; }
.map-secondary:hover, .map-checkout:hover { background:#F1F4F8; }
/* destructive: plain button, red words; the confirm() dialog is the safety, not the colour */
.map-checkout { color:#9A3412; }
/* primary (like "Next: fill the form" when ready) */
.map-save { width:100%; min-height:44px; padding:8px 12px; border:1px solid var(--ink); border-radius:6px; background:var(--ink); color:#fff; font:inherit; font-weight:700; cursor:pointer; }
.map-save:disabled { border-color:var(--line); background:#EEF1F4; color:var(--pencil); cursor:not-allowed; }

/* ---- Room status form ---- */
.map-status-options { min-width:0; margin:0 0 10px; padding:0; border:0; }
.map-status-options legend { margin-bottom:8px; padding:0; font-size:13px; font-weight:700; }
.map-status-chips { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.map-status-chip { position:relative; min-width:0; cursor:pointer; }
.map-status-chip input { position:absolute; width:1px; height:1px; margin:0; opacity:0; }
/* a choice button with the status swatch in front; chosen = ink-filled, swatch keeps the colour */
.map-chip-face { display:flex; align-items:center; gap:8px; height:100%; min-height:44px; padding:8px 10px; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--ink); font-size:14px; line-height:1.25; }
.map-chip-mark { display:grid; place-items:center; flex-shrink:0; width:18px; height:18px; border:1px solid var(--ink); border-radius:3px; background:var(--status-fill); color:transparent; font-size:12px; font-weight:700; }
.map-status-chip:hover input:not(:disabled) + .map-chip-face { background:#F1F4F8; }
.map-status-chip input:checked + .map-chip-face { border-color:var(--ink); background:var(--ink); color:#fff; font-weight:700; }
.map-status-chip input:checked + .map-chip-face .map-chip-mark { border-color:#fff; color:var(--status-ink); }
.map-status-chip input:focus-visible + .map-chip-face { outline:3px solid #3B82F6; outline-offset:2px; }
.map-status-chip:has(input:disabled) { cursor:not-allowed; }
.map-status-chip input:disabled + .map-chip-face { border-style:dashed; background:#F7F8FA; color:var(--pencil); }
.map-status-chip input:disabled + .map-chip-face .map-chip-mark { opacity:.4; }

.map-field { display:flex; flex-direction:column; gap:4px; margin:14px 0; font-size:13px; font-weight:700; }
.map-field input, .map-field select, .map-field textarea { width:100%; min-width:0; min-height:40px; padding:6px 8px; border:1px solid var(--line); border-radius:6px; background:#fff; font:inherit; font-size:14px; font-weight:400; }
.map-field textarea { min-height:80px; resize:vertical; }
.map-feedback { min-height:20px; margin:10px 0; font-size:13px; color:var(--pencil); }
.map-feedback.error { color:#9A3412; font-weight:700; }

/* ---- Confirming a room for a guest ---- */
#map-selection { margin-top:16px; padding-top:12px; border-top:1px solid var(--line); font-size:14px; }

@media (max-width:700px) {
  .room-map { width:calc(100vw - 12px); height:calc(100dvh - 12px); }
  .map-content { display:block; }
  .map-main { padding:12px; }
  .map-side { padding:20px; border-top:1px solid var(--line); border-left:0; }
  .map-side-inner { position:static; }
  .map-canvas svg { min-width:620px; }
  .map-legend { padding-right:32px; }
}