/* ═══════════════════════════════════════════════════════════════════════
   ROOM STATUS MODULE
   ─────────────────────────────────────────────────────────────────────
   Room cards in a responsive grid, status colours from status.js.
   Uses functional colour overrides via --room-color / --room-tint
   custom properties so the same card class adapts to any status.
   ═══════════════════════════════════════════════════════════════════════ */

.rooms-page {
  /* Side padding is intentionally zero — .main already provides 20px
     side padding, so cards span the same content width as Task and
     Callout cards. Keeping vertical padding so the first card has a
     breathing gap below the sticky app-bar. */
  padding: 16px 0;
  max-width: 1400px;
  margin: 0 auto;
}

/* ─── Split-pane layout (list + inline detail) — desktop only ─── */
.rooms-split {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  min-height: calc(100vh - 200px);
}
.rooms-list-pane {
  flex: 0 0 360px;
  min-width: 0;
}
.rooms-detail-pane {
  flex: 1 1 auto;
  min-width: 0;
  align-self: stretch;
  position: sticky;
  top: 0;
  max-height: calc(100vh - 94px);
  overflow-y: auto;
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  scroll-behavior: smooth;
}
/* Empty state inside the detail pane */
.rooms-detail-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 24px;
  color: var(--text-muted);
  text-align: center;
}
.rooms-detail-empty-state svg {
  opacity: 0.35;
  stroke: var(--text-muted);
}
.rooms-detail-empty-state p {
  font-size: var(--text-sm);
  margin: 0;
}
/* Inline detail wrapper — looks like a modal panel but lives in the pane */
.rooms-modal-inline {
  background: transparent;
  border: 0;
  box-shadow: none;
  max-width: none;
  width: 100%;
  margin: 0;
}
.rooms-modal-inline .tasks-modal-head {
  position: sticky;
  top: 0;
  background: var(--bg-surface);
  z-index: 2;
  border-bottom: 1px solid var(--border);
}
.rooms-modal-inline .tasks-modal-body {
  max-height: none;
}
.rooms-modal-inline .tasks-modal-foot {
  position: sticky;
  bottom: 0;
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
}
/* Selected room card highlight — unified card-selection style
   (matches Tasks + Callouts). */
.rooms-card.is-selected {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-surface));
}
/* Narrower screens (laptops): tighten the list pane */
@media (max-width: 1100px) and (min-width: 641px) {
  .rooms-list-pane { flex-basis: 320px; }
}

/* Mobile: collapse split, hide detail pane, show modal as before */
@media (max-width: 640px) {
  .rooms-split { display: block; }
  .rooms-list-pane { width: 100%; flex-basis: auto; }
  .rooms-detail-pane { display: none; }

  /* Room detail sheet header: title on the LEFT, action buttons (QR / edit /
     close) grouped on the RIGHT. Overrides the KB-reader-style flex-start that
     css/05 applies to every fullscreen modal head — wrong for this sheet,
     which bunched the title, QR and close all on the left. */
  .rooms-modal-overlay.is-fullscreen-overlay .tasks-modal-head {
    justify-content: space-between;
  }
}

/* ─── Summary strip (top) ─── */
.rooms-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
}
.rooms-summary-total {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.rooms-summary-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}
.rooms-summary-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
}
.rooms-summary-pill-dot {
  width: 6px; height: 6px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.rooms-summary-pill-label {
  color: var(--text-secondary);
}
.rooms-summary-pill-count {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--text-primary);
}

/* Board-level lost-property + minibar-charge entry points. Calm neutral chip
   (§4 two-tier: colour ONLY on the icon) that opens the log / charge list — each
   shown only when there's something waiting so the board stays quiet otherwise. */
.rooms-lp-chip, .rooms-mb-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.rooms-lp-chip:hover, .rooms-mb-chip:hover { border-color: var(--border-strong); }
.rooms-lp-chip:focus-visible, .rooms-mb-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rooms-lp-chip svg { color: var(--warning); flex-shrink: 0; } /* identifying colour on the icon only */
.rooms-mb-chip svg { color: var(--accent); flex-shrink: 0; }  /* minibar's own identifying colour */
.rooms-lp-chip-label, .rooms-mb-chip-label { color: var(--text-secondary); }
.rooms-lp-chip-count, .rooms-mb-chip-amount {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--text-primary);
}

/* ─── Grid ─── */
/* Single-column list to match task cards. The 'rooms-grid' class is kept
   for backwards-compat with bulk-mode selectors. */
.rooms-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Smooth iOS-style momentum scrolling on mobile */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.rooms-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 16px 22px;
  min-height: 76px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text-primary);
  transition: transform 0.06s, box-shadow 0.12s, border-color 0.12s, background 0.12s;
  overflow: hidden;
  /* Promote to its own compositor layer for smooth mobile scrolling */
  transform: translateZ(0);
  will-change: transform;
  contain: layout style;
  -webkit-tap-highlight-color: transparent;
}
.rooms-card:hover {
  border-color: var(--border-strong);
}
.rooms-card:active { transform: scale(0.985); }
[data-theme="light"] .rooms-card:hover { box-shadow: var(--shadow-card-hover); }

/* The left spine carries the status scan (same role as the Tasks priority bar).
   It is the ONE place status colour lives loud on the card — everything else
   (status chip, flags) stays calm. */
.rooms-card-stripe {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--room-color);
}
.rooms-card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.rooms-card-name {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rooms-card-subtitle {
  font-size: var(--text-xs);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Calm status chip — the app-wide one-size chip: neutral surface, colour ONLY
   on the dot (matches .tasks-card-status / .callout-card-status). */
.rooms-card-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  flex-shrink: 0;
}
.rooms-card-status-dot {
  width: 6px; height: 6px;
  border-radius: var(--radius-full);
  background: var(--room-color);
  flex-shrink: 0;
}

/* (Retired 2026-06-30: the saturated amber border + animated red "pulse" on
   priority cards — replaced by the calm app style. The active maintenance /
   guest-arrived flag icon in the card's flag row is the signal now.) */

/* Card layout — top row: name + status; bottom row: subtitle + flags */
.rooms-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}
.rooms-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  width: 100%;
  min-height: 16px;
}

/* Flag markers on the card — calm bare icons (no tinted tile). Colour lives
   ONLY on the icon stroke; the tile background + hover tint were removed for
   the calm app style (2026-06-30). Tooltip on hover. */
.rooms-card-flags {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.rooms-card-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  flex-shrink: 0;
  opacity: 0.9;
}
.rooms-card-flag.is-done {
  color: #15803d;
  opacity: 0.55;
}

/* Right-hand group on the card's bottom row: the lost-property chip (if any)
   sits before the flag icons, both pushed right opposite the subtitle. */
.rooms-card-bottom-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Per-room lost-property chip. Calm neutral by default (§4 two-tier card: a
   found item is a quiet FYI). Loud amber ONLY when it's act-now — the room's
   guest may still be reachable (departure / stayover / checked-in) so reception
   can return it before they leave. */
.rooms-card-lp, .rooms-card-mb, .rooms-card-rc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1;
  flex-shrink: 0;
}
.rooms-card-lp-count, .rooms-card-mb-amount, .rooms-card-rc-label { font-variant-numeric: tabular-nums; }
/* Act-now amber: a lost item whose guest is still reachable, a minibar charge on
   a checking-out room (post it before they leave), or a room check that left open
   fixes (fails_open > 0). */
.rooms-card-lp.is-reachable, .rooms-card-mb.is-urgent, .rooms-card-rc.is-fails {
  background: var(--warning-soft);
  border-color: color-mix(in srgb, var(--warning) 45%, transparent);
  color: var(--warning);
}

/* ─── Empty state ─── */
.rooms-empty {
  max-width: 480px;
  margin: 80px auto;
  text-align: center;
  padding: 32px;
}
.rooms-empty h2 {
  font-size: var(--text-xl);
  margin: 0 0 8px;
  color: var(--text-primary);
}
.rooms-empty p {
  font-size: var(--text-base);
  color: var(--text-secondary);
  margin: 0 0 20px;
}
.rooms-empty-cta {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--accent-text, #fff);
  border: 0;
  font-size: var(--text-md);
  font-weight: 600;
  cursor: pointer;
}
.rooms-empty-cta:hover { filter: brightness(1.1); }

/* ─── Detail / Add modal ─── */
.rooms-detail { display: flex; flex-direction: column; gap: 14px; }
.rooms-detail-section { display: flex; flex-direction: column; gap: 8px; }
.rooms-detail-section-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.rooms-detail-field { display: flex; flex-direction: column; gap: 6px; }
.rooms-detail-field > span {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-weight: 500;
}
.rooms-detail-field input,
.rooms-detail-field textarea {
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-base);
}
.rooms-detail-field input:focus,
.rooms-detail-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.rooms-detail-field textarea { resize: vertical; min-height: 60px; }
.rooms-detail-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Status picker (radio chips) */
.rooms-status-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}
.rooms-status-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-primary);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: left;
  transition: background 0.12s, border-color 0.12s;
}
.rooms-status-option:hover { border-color: var(--border-strong); }
/* Selected: a thin status-coloured border + faint tint mark the choice; the dot
   carries the colour. Text stays neutral (was coloured — too loud). */
.rooms-status-option.is-active {
  background: var(--opt-tint);
  border-color: var(--opt-color);
  color: var(--text-primary);
}
.rooms-status-option-dot {
  width: 8px; height: 8px;
  border-radius: var(--radius-full);
  background: var(--opt-color);
  flex-shrink: 0;
}

/* Flags picker in detail modal — toggleable chips */
.rooms-flags-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rooms-flag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border);
  background: var(--bg-elevated);
  /* Bright label so the chip reads clearly on the dark elevated background
     (was --text-secondary, which blended in); the icon stays a touch softer
     so the word is the hero. */
  color: var(--text-primary);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.rooms-flag-chip svg { opacity: 0.9; }
/* Active/hover: the LABEL stays bright white (always readable) — the flag colour
   lives on the icon + border + a faint tinted background only. Coloured text on a
   tinted chip was too busy / hard to read. */
.rooms-flag-chip:hover:not(:disabled) {
  background: var(--flag-tint);
  color: var(--text-primary);
  border-color: var(--flag-color);
}
.rooms-flag-chip.is-active {
  background: var(--flag-tint);
  color: var(--text-primary);
  border-color: var(--flag-color);
}
.rooms-flag-chip.is-active svg,
.rooms-flag-chip:hover:not(:disabled) svg { color: var(--flag-color); opacity: 1; }
.rooms-flag-chip:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ─── Bulk selection mode ─── */
.rooms-card.is-selectable .rooms-card-stripe { opacity: 0.5; }

.rooms-card-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  background: var(--bg-elevated);
  color: var(--accent-text, #fff);
  flex-shrink: 0;
  margin-right: 4px;
  transition: background 0.12s, border-color 0.12s;
}
.rooms-card.is-selected {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-surface));
}
.rooms-card.is-selected .rooms-card-check {
  background: var(--accent);
  border-color: var(--accent);
}

/* Sticky bottom action bar */
.rooms-bulk-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 14px rgba(0,0,0,0.12);
  transform: translateY(100%);
  transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}
.rooms-bulk-bar.is-open { transform: translateY(0); }
.rooms-bulk-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1400px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.rooms-bulk-count {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text-primary);
}
.rooms-bulk-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.rooms-bulk-btn {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--accent-text, #fff);
  border: 0;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.12s, opacity 0.12s;
}
.rooms-bulk-btn:hover:not(:disabled) { filter: brightness(1.1); }
.rooms-bulk-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.rooms-bulk-btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.rooms-bulk-btn-ghost:hover:not(:disabled) {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

/* Action-bar mobile: stack count over actions */
@media (max-width: 640px) {
  .rooms-bulk-bar-inner { gap: 10px; }
  .rooms-bulk-actions { width: 100%; justify-content: flex-end; }
  .rooms-bulk-btn { flex: 1 1 auto; justify-content: center; }
}

/* Prompt text in bulk pickers */
.rooms-bulk-picker-prompt {
  font-size: var(--text-base);
  color: var(--text-secondary);
  margin: 0 0 16px;
}
.rooms-bulk-picker-prompt b {
  color: var(--text-primary);
  font-weight: 700;
}

/* Two-step bulk note input (revealed when adding a done-able flag) */
.rooms-bulk-note-step {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.rooms-bulk-note-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

/* Hide the bulk bar while a modal is open so it doesn't poke through */
body.tasks-modal-open .rooms-bulk-bar { display: none; }
/* Pad the bottom of the page only while the bulk bar is showing */
body:has(.rooms-bulk-bar.is-open) .rooms-page { padding-bottom: 96px; }

/* ─── Detail-modal secondary action button ─── */
.rooms-detail-secondary-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.rooms-detail-secondary-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════════════
   LOST PROPERTY
   ═══════════════════════════════════════════════════════════════════════ */

.lp-log { display: flex; flex-direction: column; gap: 16px; }
.lp-log-loading { padding: 40px; text-align: center; color: var(--text-muted); }

.lp-log-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* Tab strip */
.lp-tabs {
  display: inline-flex;
  background: var(--bg-elevated);
  padding: 4px;
  border-radius: var(--radius-md);
  gap: 2px;
}
.lp-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.lp-tab:hover { color: var(--text-primary); }
.lp-tab.is-active {
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.lp-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--border);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.lp-tab.is-active .lp-tab-count {
  background: var(--accent-soft);
  color: var(--accent);
}

/* Item list */
.lp-list { display: flex; flex-direction: column; gap: 8px; }

.lp-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color 0.12s, background 0.12s;
}
.lp-item:hover { border-color: var(--text-muted); }
.lp-item.is-collected { opacity: 0.78; }

.lp-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lp-item-desc {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text-primary);
  word-break: break-word;
}
.lp-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.lp-item-meta-sep { opacity: 0.5; }
.lp-item-collected-meta {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: 2px;
}
.lp-item-collected-notes {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-style: italic;
  margin-top: 2px;
}

.lp-item-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.lp-item-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.lp-item-delete:hover {
  background: rgba(220,38,38,0.10);
  color: rgb(220,38,38);
  border-color: rgba(220,38,38,0.4);
}

/* Empty states */
.lp-empty {
  padding: 48px 16px;
  text-align: center;
  color: var(--text-secondary);
}
.lp-empty p { margin: 0 0 4px; font-size: var(--text-base); }
.lp-empty-sub { font-size: var(--text-sm); color: var(--text-muted); }

/* Add-item form layout */
.lp-form { display: flex; flex-direction: column; gap: 14px; }

/* ─── Custom room picker dropdown ─── */
.lp-room-picker {
  position: relative;
  margin-top: 6px;
}
.lp-room-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-base);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.lp-room-trigger:hover { border-color: var(--text-muted); }
.lp-room-picker.is-open .lp-room-trigger {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.lp-room-trigger-label {
  flex: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lp-room-trigger-meta {
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.lp-room-trigger-placeholder {
  color: var(--text-muted);
  font-style: italic;
}
.lp-room-trigger-chev {
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform 0.18s;
}
.lp-room-picker.is-open .lp-room-trigger-chev { transform: rotate(180deg); }

.lp-room-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-surface);
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
.lp-room-menu[hidden] { display: none !important; }

.lp-room-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 0;
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-base);
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}
.lp-room-option:hover { background: var(--bg-elevated); }
.lp-room-option.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.lp-room-option-name { flex: 1; }
.lp-room-option-meta {
  color: var(--text-muted);
  font-size: var(--text-sm);
  flex-shrink: 0;
}
.lp-room-option.is-active .lp-room-option-meta { color: var(--accent); opacity: 0.85; }

/* ─── Photo upload (in add-item modal) ─── */
.lp-photo-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.lp-photo-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border: 1.5px dashed var(--border);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.lp-photo-add-btn:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}
.lp-photo-add-btn-secondary {
  border-style: solid;
  padding: 8px 12px;
}

.lp-photo-tile {
  position: relative;
  width: 96px; height: 96px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  overflow: hidden;
  background: var(--bg-elevated);
  flex-shrink: 0;
}
.lp-photo-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.lp-photo-tile-remove {
  position: absolute;
  top: 4px; right: 4px;
  width: 22px; height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: rgba(0,0,0,0.65);
  color: #fff;
  border: 0;
  cursor: pointer;
  transition: background 0.12s;
}
.lp-photo-tile-remove:hover { background: rgba(0,0,0,0.85); }

.lp-photo-tile.is-uploading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: var(--text-xs);
}
.lp-photo-tile-spinner {
  width: 22px; height: 22px;
  border: 2.5px solid var(--border);
  border-top-color: var(--accent);
  border-radius: var(--radius-full);
  animation: lp-spin 0.7s linear infinite;
}
@keyframes lp-spin { to { transform: rotate(360deg); } }
.lp-photo-tile-label { font-weight: 600; }

/* ─── Thumbnail in list rows ─── */
.lp-item-thumb {
  flex-shrink: 0;
  width: 56px; height: 56px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: border-color 0.12s, transform 0.06s;
}
.lp-item-thumb:not(.is-empty):hover {
  border-color: var(--accent);
}
.lp-item-thumb:not(.is-empty):active { transform: scale(0.96); }
.lp-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-item-thumb.is-empty { cursor: default; }

/* ─── Lightbox ─── */
.lp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: rgba(0,0,0,0.85);
  opacity: 0;
  transition: opacity 0.18s;
}
.lp-lightbox.is-open { opacity: 1; }
.lp-lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius-md);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.lp-lightbox-close {
  position: absolute;
  top: 20px; right: 20px;
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: 0;
  cursor: pointer;
  transition: background 0.12s;
}
.lp-lightbox-close:hover { background: rgba(255,255,255,0.25); }

/* ═══════════════════════════════════════════════════════════════════════
   GUEST MOVE + LUGGAGE MOVE + ROOM REQUESTS
   ═══════════════════════════════════════════════════════════════════════ */

/* Source-state summary at top of move modals */
.rooms-move-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  margin-bottom: 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.rooms-move-summary-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.rooms-move-summary-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-md);
  color: var(--text-primary);
}
.rooms-move-summary-meta {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.rooms-move-summary-meta b { color: var(--text-primary); }

.rooms-move-section-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

/* Target-room list (used by guest move) */
.rooms-move-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}
.rooms-move-target {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 10px 16px;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  cursor: pointer;
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  transition: border-color 0.12s, transform 0.06s, background 0.12s;
  overflow: hidden;
}
.rooms-move-target:hover {
  border-color: var(--accent);
  background: var(--bg-surface);
}
.rooms-move-target:active { transform: scale(0.985); }
.rooms-move-target.is-busy { opacity: 0.5; pointer-events: none; }
.rooms-move-target-stripe {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
}
.rooms-move-target-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.rooms-move-target-name {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rooms-move-target-sub {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.rooms-move-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-sm);
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
}

.rooms-move-occupied {
  margin-top: 16px;
}
.rooms-move-occupied summary {
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  padding: 8px 0;
  user-select: none;
}
.rooms-move-occupied summary:hover { color: var(--text-primary); }
.rooms-move-occupied[open] summary { margin-bottom: 8px; }
.rooms-move-occupied-warn {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin: 10px 0 0;
  font-style: italic;
}
.rooms-move-occupied-warn b { color: var(--text-secondary); }

/* Two-column action grid for shortcuts in room detail */
.rooms-detail-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}

/* Target picker error pulse (when send is clicked with no selection) */
.rooms-target-picker-error .lp-room-trigger {
  border-color: rgb(220,38,38);
  box-shadow: 0 0 0 3px rgba(220,38,38,0.18);
  animation: rooms-target-shake 0.32s ease-in-out;
}
@keyframes rooms-target-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

/* Pending requests panel (luggage moves for now) */
.rooms-requests-empty {
  padding: 48px 16px;
  text-align: center;
  color: var(--text-secondary);
}
.rooms-requests-empty p { margin: 0 0 4px; font-size: var(--text-base); }

.rooms-requests-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ─── Recent activity feed (read-only, quiet) ─── */
.rooms-act-list { list-style: none; margin: 0; padding: 0; }
.rooms-act-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--border);
}
.rooms-act-row:last-child { border-bottom: 0; }
.rooms-act-ico {
  flex-shrink: 0;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  color: var(--text-secondary);
}
/* Calm: activity-feed icons are uniform neutral tiles — the glyph shape + the line
   text say what happened. (Was a rainbow of per-type saturated tints.) */
.rooms-act-ico.is-in,
.rooms-act-ico.is-out,
.rooms-act-ico.is-done,
.rooms-act-ico.is-flag,
.rooms-act-ico.is-status { background: var(--bg-elevated); color: var(--text-secondary); }
.rooms-act-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rooms-act-line {
  font-size: var(--text-sm);
  color: var(--text-primary);
  line-height: 1.35;
}
.rooms-act-line b { font-weight: 700; }
.rooms-act-meta { font-size: var(--text-xs); color: var(--text-muted); }
.rooms-request-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.rooms-request-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
}

/* Type tag pill (Luggage / Early CI / Late CO / Ready) */
.rooms-request-type-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-right: 2px;
}

/* Decline button — red tint to signal a "no" answer */
.rooms-request-decline {
  color: rgb(220,38,38) !important;
  border-color: rgba(220,38,38,0.35) !important;
}
.rooms-request-decline:hover {
  background: rgba(220,38,38,0.10) !important;
  border-color: rgb(220,38,38) !important;
}

/* Outcome pill shown in the Recent decisions tab (replaces buttons) */
/* Calm outcome pill — neutral chip, the decision colour lives on a dot (was a
   full-colour tinted pill with coloured text). */
.rooms-request-outcome {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.rooms-request-outcome::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
}
.rooms-request-outcome.is-accepted::before,
.rooms-request-outcome.is-completed::before { background: #16a34a; }
.rooms-request-outcome.is-declined::before  { background: #dc2626; }
.rooms-request-outcome.is-dismissed::before { background: var(--text-muted); }

/* Resolved-row metadata (who decided, when, decline reason) */
.rooms-request-row.is-resolved { opacity: 0.85; }
.rooms-request-resolved-by {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 4px;
  font-style: italic;
}

/* Heads-up warning shown when sending room-ready before flags are set */
.rooms-readiness-warn {
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: rgba(217,119,6,0.12);
  border: 1px solid rgba(217,119,6,0.30);
  color: var(--text-primary);
  font-size: var(--text-sm);
}

/* ═══════════════════════════════════════════════════════════════════════
   SETTINGS — Room Status configuration
   ═══════════════════════════════════════════════════════════════════════ */

.rsc-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 16px;
}

.rsc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 24px;
}
@media (min-width: 900px) {
  .rsc-grid { grid-template-columns: repeat(2, 1fr); }
}

.rsc-section-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary);
  margin: 4px 0 4px;
  letter-spacing: 0.005em;
}
.rsc-section-sub {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0 0 12px;
}

.rsc-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: opacity 0.15s;
}
.rsc-card.is-off { opacity: 0.72; }

.rsc-card-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.rsc-card-text { flex: 1; min-width: 0; }
.rsc-card-label {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.rsc-card-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.45;
}

/* Toggle switch (master enable) */
.rsc-switch {
  position: relative;
  display: inline-block;
  width: 42px; height: 24px;
  flex-shrink: 0;
}
.rsc-switch input {
  opacity: 0;
  width: 0; height: 0;
}
.rsc-switch-slider {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 0.18s;
}
.rsc-switch-slider::before {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  top: 3px; left: 3px;
  transition: transform 0.18s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.rsc-switch input:checked + .rsc-switch-slider {
  background: var(--accent);
}
.rsc-switch input:checked + .rsc-switch-slider::before {
  transform: translateX(18px);
}

.rsc-card-statuses {
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.rsc-card-statuses.is-hidden { display: none; }
.rsc-card-statuses-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.rsc-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.rsc-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  user-select: none;
}
.rsc-status-pill input { display: none; }
.rsc-status-pill:hover {
  border-color: var(--p);
  color: var(--p);
}
.rsc-status-pill.is-on {
  background: var(--pt);
  border-color: var(--p);
  color: var(--p);
}
.rsc-status-pill-dot {
  width: 8px; height: 8px;
  border-radius: var(--radius-full);
  background: var(--p);
}

.rsc-reset-one {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--text-xs);
  text-decoration: underline;
  cursor: pointer;
}
.rsc-reset-one:hover { color: var(--accent); }

/* ─── PMS integration settings ─── */

.rsc-pms-card {
  padding: 18px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.rsc-pms-head { margin-bottom: 14px; }
.rsc-pms-title {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text-primary);
}
.rsc-pms-sub {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 2px 0 0;
}
.rsc-pms-noperm { padding: 16px; color: var(--text-muted); text-align: center; font-size: var(--text-sm); }
.rsc-pms-manual {
  padding: 14px;
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-style: italic;
}
.rsc-pms-adapter-pick { margin-bottom: 14px; }
.rsc-pms-adapter-pick select {
  padding: 9px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-base);
}
.rsc-pms-adapter-desc {
  display: block;
  margin-top: 4px;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.rsc-pms-warn {
  margin: 14px 0;
  padding: 10px 12px;
  background: rgba(217,119,6,0.10);
  border: 1px solid rgba(217,119,6,0.30);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.rsc-pms-warn code {
  background: var(--bg-elevated);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
}

.rsc-pms-section-label {
  margin: 16px 0 8px;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.rsc-pms-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
}
.rsc-pms-toggle-label {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text-primary);
}

.rsc-pms-creds-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 700px) {
  .rsc-pms-creds-grid { grid-template-columns: repeat(2, 1fr); }
}

.rsc-pms-mapping {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 900px) {
  .rsc-pms-mapping { grid-template-columns: repeat(3, 1fr); }
}
.rsc-pms-mapping-col {
  background: var(--bg-elevated);
  padding: 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}
.rsc-pms-mapping-title {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.rsc-pms-mapping-rows { display: flex; flex-direction: column; gap: 6px; }
.rsc-pms-mapping-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 6px;
}
.rsc-pms-mapping-arrow {
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.rsc-pms-mapping-code {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: var(--text-xs);
  padding: 4px 8px;
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
}
.rsc-pms-mapping-row select,
.rsc-pms-mapping-row input {
  width: 100%;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-sm);
}

.rsc-pms-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.rsc-pms-result {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: 1.4;
}
.rsc-pms-result.is-success { background: rgba(22,163,74,0.12);  color: rgb(22,163,74); border: 1px solid rgba(22,163,74,0.30); }
.rsc-pms-result.is-error   { background: rgba(220,38,38,0.10);  color: rgb(220,38,38); border: 1px solid rgba(220,38,38,0.30); }
.rsc-pms-result.is-warn    { background: rgba(217,119,6,0.10);  color: rgb(217,119,6); border: 1px solid rgba(217,119,6,0.30); }
.rsc-pms-result.is-pending { background: var(--bg-elevated);    color: var(--text-secondary); border: 1px solid var(--border); }

/* ─── Per-device notification preferences ─── */
.rsc-notif-card {
  margin-top: 18px;
  padding: 18px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.rsc-notif-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin-top: 12px;
}
@media (min-width: 700px) {
  .rsc-notif-grid { grid-template-columns: repeat(2, 1fr); }
}
.rsc-notif-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.12s;
}
.rsc-notif-row:hover { border-color: var(--text-muted); }
.rsc-notif-row-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.rsc-notif-row-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
}

/* "Show muted" toggle in the pending requests modal */
.rooms-request-show-muted {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}
.rooms-request-show-muted input { margin: 0; }

/* Department-level Room Status permissions (in dept edit form) */
.dept-rooms-perms-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 6px;
}
@media (min-width: 700px) {
  .dept-rooms-perms-grid { grid-template-columns: repeat(2, 1fr); }
}
.dept-rooms-perm-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.dept-rooms-perm-row:hover { border-color: var(--text-muted); }
.dept-rooms-perm-row input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--accent);
  width: 16px; height: 16px;
}
.dept-rooms-perm-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.dept-rooms-perm-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
}
.dept-rooms-perm-desc {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.4;
}
.rooms-request-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rooms-request-title {
  font-size: var(--text-md);
  color: var(--text-primary);
  font-weight: 500;
}
.rooms-request-title b { color: var(--text-primary); font-weight: 700; }
.rooms-request-meta {
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.rooms-request-note {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-style: italic;
  margin-top: 2px;
}
.rooms-request-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

/* App-bar badge (used for pending request count) */
.app-bar-action[aria-label*="Pending requests"] {
  position: relative;
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.app-bar-action[aria-label*="Pending requests"]::after {
  content: '';
  position: absolute;
  top: -2px; right: -2px;
  width: 8px; height: 8px;
  border-radius: var(--radius-full);
  background: rgb(220,38,38);
  border: 2px solid var(--bg-surface);
}

@media (max-width: 640px) {
  .rooms-move-list { grid-template-columns: 1fr; }
  .rooms-detail-actions-grid { grid-template-columns: 1fr; }
  .rooms-request-row { flex-direction: column; }
  .rooms-request-actions { flex-direction: row; width: 100%; justify-content: flex-end; }
}

/* ═══════════════════════════════════════════════════════════════════════
   CHECK IN / CHECK OUT + FLAG DONE STATE + BLOCK REASONS
   ═══════════════════════════════════════════════════════════════════════ */

/* Prominent Check-in / Check-out button */
.rooms-detail-checkin-section {
  background: var(--bg-elevated);
  padding: 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}
.rooms-checkin-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--accent-text, #fff);
  border: 0;
  font: inherit;
  font-size: var(--text-md);
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.12s, transform 0.05s;
}
[data-theme="light"] .rooms-checkin-btn { color: #ffffff; }
.rooms-checkin-btn:hover { filter: brightness(1.1); }
.rooms-checkin-btn:active { transform: scale(0.98); }
.rooms-checkin-btn.is-checkout {
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1.5px solid var(--text-secondary);
}
[data-theme="light"] .rooms-checkin-btn.is-checkout { color: var(--text-primary); }
.rooms-checkin-btn.is-checkout:hover {
  background: var(--bg-elevated);
  border-color: var(--text-primary);
}
.rooms-checkin-status {
  margin: 8px 0 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-style: italic;
}
.rooms-checkin-status.is-in {
  color: var(--accent);
  font-weight: 600;
  font-style: normal;
}

/* Expanded card for active done-able flags (Maintenance, Gift, Extra) */
.rooms-flags-cards {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
/* Calm card — neutral surface + hairline border. The flag's colour lives on the
   active chip inside (its icon + border), not a loud 1.5px coloured frame. */
.rooms-flag-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 9px 11px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  transition: opacity 0.15s;
}
.rooms-flag-card.is-done {
  border-color: var(--border);
  background: color-mix(in srgb, #16a34a 7%, var(--bg-elevated));
}
/* A resolved card reads as a calm green "done" — NOT a still-firing red issue and
   NOT crossed-out. The green ✓ Done pill is the badge; the flag chip neutralises so
   green wins, and the note stays fully readable (no strikethrough, no heavy dim). */
.rooms-flag-card.is-done .rooms-flag-chip {
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border-color: var(--border);
}
.rooms-flag-card.is-done .rooms-flag-chip svg { opacity: 0.6; }
.rooms-flag-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.rooms-flag-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.rooms-flag-task-badge {
  font-size: 11px;
  font-weight: 600;
  font-family: var(--mono, monospace);
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  letter-spacing: 0.02em;
}
.rooms-flag-note-input {
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-sm);
}
.rooms-flag-note-input:focus {
  outline: none;
  border-color: var(--flag-color);
  box-shadow: 0 0 0 2px var(--flag-tint);
}
.rooms-flag-note-input::placeholder {
  color: var(--text-muted);
  font-style: italic;
}
.rooms-flag-card.is-done .rooms-flag-note-input { color: var(--text-secondary); }

.rooms-flag-done-toggle {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  flex-shrink: 0;
}
.rooms-flag-done-toggle:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}
.rooms-flag-done-toggle.is-done {
  background: rgba(22,163,74,0.14);
  color: rgb(22,163,74);
  border-color: rgba(22,163,74,0.5);
}
.rooms-flag-done-toggle.is-done:hover { background: rgba(22,163,74,0.22); }

/* Block-reasons modal */
.rooms-blocks-intro {
  font-size: var(--text-base);
  color: var(--text-primary);
  margin: 0 0 12px;
}
.rooms-blocks-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rooms-blocks-list li {
  padding: 8px 12px;
  background: rgba(220,38,38,0.08);
  border: 1px solid rgba(220,38,38,0.20);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--text-sm);
}
.rooms-blocks-quickfix {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.rooms-blocks-quickfix-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.rooms-blocks-quickfix-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rooms-blocks-mark-done {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.rooms-blocks-mark-done:not(.is-done):hover { border-color: var(--border-strong); filter: none; }
.rooms-blocks-mark-done:hover { filter: brightness(1.1); }
.rooms-blocks-mark-done.is-done {
  background: rgba(22,163,74,0.14);
  color: rgb(22,163,74);
  border-color: rgba(22,163,74,0.5);
}
.rooms-blocks-mark-done:disabled { opacity: 0.7; cursor: default; }

/* Wider modal for the log view */
.tasks-modal.tasks-modal-lg { max-width: 720px; }

/* ═══════════════════════════════════════════════════════════════════════
   ROOM SUMMARY PANEL
   ═══════════════════════════════════════════════════════════════════════ */

.rooms-summary-empty {
  padding: 48px;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-base);
}

.rooms-summary-section {
  margin-bottom: 22px;
}
.rooms-summary-section:last-child { margin-bottom: 0; }

.rooms-summary-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}
.rooms-summary-section-head h3 {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text-primary);
}
.rooms-summary-section-count {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.rooms-summary-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rooms-summary-row {
  padding: 10px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, transform 0.05s;
}
.rooms-summary-row:hover { border-color: var(--accent); }
.rooms-summary-row:active { transform: scale(0.995); }

.rooms-summary-row-main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.rooms-summary-row-name {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text-primary);
}
.rooms-summary-row-flags {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
}

.rooms-summary-focus {
  margin-top: 4px;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.4;
}
.rooms-summary-focus.is-done {
  color: var(--text-muted);
  text-decoration: line-through;
}
.rooms-summary-focus-blank {
  color: var(--text-muted);
  font-style: italic;
}
.rooms-summary-done-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: rgba(22,163,74,0.16);
  color: rgb(22,163,74);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 5px;
  text-decoration: none;
}

.rooms-summary-sticky-note {
  margin-top: 4px;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-style: italic;
  border-left: 3px solid var(--border);
  padding-left: 8px;
}

/* Status breakdown grid (rich version of the in-page summary strip) */
.rooms-summary-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}
/* Calm: neutral cell, colour only on the dot (was a --pt tint with --p text). */
.rooms-summary-status-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.rooms-summary-status-cell-dot {
  width: 8px; height: 8px;
  border-radius: var(--radius-full);
  background: var(--p);
  flex-shrink: 0;
}
.rooms-summary-status-cell-label {
  flex: 1;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
}
.rooms-summary-status-cell-count {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════════
   NOTES + ACTIVITY HISTORY
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Note section at top of room detail ─── */
.rooms-detail-note-section {
  background: var(--bg-elevated);
  padding: 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}
.rooms-detail-section-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.rooms-note-status {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.02em;
  min-height: 14px;
  transition: opacity 0.2s;
}
.rooms-note-field {
  margin-top: 6px;
  width: 100%;
  /* Auto-grows via JS (autoGrowNote_) so a long note shows in full — no inner
     scrollbar, no manual drag handle. */
  resize: none;
  overflow: hidden;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-base);
  line-height: 1.4;
}
.rooms-note-field:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.rooms-note-field:disabled { opacity: 0.7; cursor: not-allowed; }
.rooms-note-field::placeholder { color: var(--text-muted); font-style: italic; }

/* ─── Note indicator on grid cards ─── */
.rooms-card-name-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.rooms-card-note-ind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
}

/* ─── Notification preferences panel ─── */
.rnp-sub {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0 0 16px;
}
.rnp-master-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 4px;
}
.rnp-master-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rnp-master-label {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text-primary);
}
.rnp-master-hint {
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.rnp-divider {
  height: 1px;
  background: var(--border);
  margin: 14px 0;
}
.rnp-types {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ─── History section in detail modal ─── */
.rooms-detail-history-section {
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.rooms-history-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 0;
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: color 0.12s;
}
.rooms-history-toggle:hover { color: var(--text-primary); }
.rooms-history-toggle-chev {
  transition: transform 0.18s;
  color: var(--text-muted);
}
.rooms-history-toggle[aria-expanded="true"] .rooms-history-toggle-chev {
  transform: rotate(180deg);
}
.rooms-history-panel {
  margin-top: 8px;
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
}
.rooms-history-loading,
.rooms-history-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.rooms-history-list {
  list-style: none;
  margin: 0;
  padding: 8px 0;
}
.rooms-history-row {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.rooms-history-row:last-child { border-bottom: 0; }
.rooms-history-dot {
  flex-shrink: 0;
  width: 8px; height: 8px;
  border-radius: var(--radius-full);
  background: var(--hist-color);
  margin-top: 6px;
}
.rooms-history-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.rooms-history-text {
  font-size: var(--text-sm);
  color: var(--text-primary);
  line-height: 1.4;
}
.rooms-history-meta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.rooms-history-meta-sep { opacity: 0.5; }
/* Calm inline status pill — neutral chip with the status colour on a small dot
   (was a --pt tint with full --p coloured text). */
.rooms-history-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  vertical-align: 1px;
  margin: 0 1px;
}
.rooms-history-pill::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--p);
  flex-shrink: 0;
}
.rooms-history-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--border);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: 1px;
}

/* ─── Edit-mode toggle (room detail header) ─── */
.tasks-modal-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.rooms-edit-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.rooms-edit-toggle:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}
.rooms-edit-toggle.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}

/* Edit-only sections + footer button — hidden by default, shown when modal is in edit mode */
.rooms-edit-only { display: none !important; }
.tasks-modal.is-edit-mode .rooms-edit-only { display: flex !important; }
/* Save changes button is inline-flex, not block */
.tasks-modal.is-edit-mode .tasks-modal-foot .rooms-edit-only {
  display: inline-flex !important;
}

/* (The room config — name / floor / type / location — lives in the ⋯ "Room
   settings" edit mode, not the default detail view. 2026-06-30.) */

/* Mobile: stack tabs + add-button, and item actions go full width */
@media (max-width: 640px) {
  .lp-log-head { flex-direction: column; align-items: stretch; }
  .lp-log-head #lpAddBtn { width: 100%; justify-content: center; }
  .lp-item { flex-direction: column; align-items: stretch; gap: 10px; }
  .lp-item-actions { justify-content: flex-end; }
}

.rooms-detail-readonly-note {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin: 6px 0 0;
}

/* Danger zone */
.rooms-detail-danger {
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.rooms-detail-delete-btn {
  align-self: flex-start;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  background: rgba(220,38,38,0.10);
  color: rgb(220,38,38);
  border: 1px solid rgba(220,38,38,0.25);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}
.rooms-detail-delete-btn:hover {
  background: rgba(220,38,38,0.18);
  border-color: rgba(220,38,38,0.5);
}

/* ─── Mobile tweaks ─── */
@media (max-width: 640px) {
  /* Match the base rule: no side padding so cards align with Task /
     Callout cards. Tighter vertical spacing on small screens. */
  .rooms-page { padding: 12px 0; }
  /* Single-column list on mobile — easier to scan one-by-one,
     much bigger tap targets, status pill and flag icons get
     room to breathe on the right. */
  .rooms-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .rooms-card { padding: 14px 14px 14px 20px; }
  .rooms-detail-field-row { grid-template-columns: 1fr; gap: 10px; }
  .rooms-summary { padding: 10px 12px; }
  .rooms-summary-pills { margin-left: 0; width: 100%; }
}

/* Mobile width pass (2026-06-25): tighten horizontal padding on mobile so content
   uses the screen width. Appended at end-of-file so it beats the base rules AND any
   wider-breakpoint (600/640/767px) blocks at equal specificity (later source wins).
   Desktop (>=600px) untouched. */
@media (max-width: 599px) {
  .rooms-empty { padding: 16px; }
  .lp-log-loading { padding: 20px; }
  .lp-item { padding: 12px 10px; }
  .lp-empty { padding: 32px 10px; }
  .rooms-move-summary { padding: 10px 10px; }
  .rooms-move-empty { padding: 16px 12px; }
  .rsc-card { padding: 12px 10px; }
  .rooms-detail-note-section { padding: 12px 10px; }
  .rooms-readiness-warn { padding: 10px 8px; }
}

/* Prompt 92 — mobile tap-target floors (§4 44px). The status options, flag
   chips and Mark-done toggles are primary touch controls in the detail; give
   them a comfortable hit area at the module's own ≤640px breakpoint. Appended
   at end of file so this override wins over the base rules in source order (a
   media query adds zero specificity — §4). Desktop untouched. */
@media (max-width: 640px) {
  .rooms-status-option,
  .rooms-flag-chip,
  .rooms-flag-done-toggle { min-height: 44px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Prompt 94 — board scan: pill FILTERS + floor GROUPING
   ─────────────────────────────────────────────────────────────────────
   The summary pills became <button> filter toggles; add a calm active
   treatment + button resets (keep the base chip look from the block above).
   Floor headers group cards on multi-floor sites (default OPEN). Appended at
   end of file so these win over the base rules in source order (§4). */
.rooms-summary-pill {
  cursor: pointer;
  font: inherit;
  line-height: 1;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.rooms-summary-pill:hover { border-color: var(--border-strong); }
.rooms-summary-pill.is-active {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-elevated));
}
.rooms-summary-pill.is-active .rooms-summary-pill-label { color: var(--text-primary); }
.rooms-summary-pill:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Filter shows nothing — an honest line, never a blank grid (§5). */
.rooms-filter-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* Floor group-and-collapse. Calm header, cards stack beneath; single-floor
   sites never render these (grid stays a flat list). */
.rooms-floor-group { display: flex; flex-direction: column; gap: 8px; }
.rooms-floor-group + .rooms-floor-group { margin-top: 14px; }
.rooms-floor-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 4px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: var(--text-secondary);
  text-align: left;
  border-radius: var(--radius-sm);
}
.rooms-floor-chevron {
  flex-shrink: 0;
  stroke: var(--text-muted);
  transition: transform 0.15s ease;
}
.rooms-floor-group.is-collapsed .rooms-floor-chevron { transform: rotate(-90deg); }
.rooms-floor-label {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.rooms-floor-count {
  font-size: var(--text-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 1px 8px;
}
.rooms-floor-body { display: flex; flex-direction: column; gap: 8px; }
.rooms-floor-group.is-collapsed .rooms-floor-body { display: none; }
.rooms-floor-head:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Mobile tap-target floors (§4 44px) — the pills + floor headers are now
   primary touch controls; give them a comfortable hit area at ≤640px. */
@media (max-width: 640px) {
  .rooms-summary-pill { min-height: 44px; }
  .rooms-floor-head { min-height: 44px; }
  .rooms-lp-chip { min-height: 44px; }
}


/* Room DETAIL modal: no bottom bar while VIEWING — the header ✕ is the one
   close (Tasks-detail parity, §3: the reference detail modal has no foot),
   so the content gets the full height. The foot returns in EDIT mode, where
   it carries Close + Save changes (the Tasks edit-modal Cancel/Save shape).
   Scoped by the .rooms-detail-modal marker (detail.js openModal_ modalClass)
   so the OTHER rooms modals — Stay duration / Out-of-order / Add a room —
   keep their Skip/Save + Cancel/Add footers. Appended at end of file so the
   hide rule wins its equal-specificity siblings by source order (§4). */
.tasks-modal.rooms-detail-modal .tasks-modal-foot { display: none; }
.tasks-modal.rooms-detail-modal.is-edit-mode .tasks-modal-foot { display: flex; }