/* css/screens/rooms.css — Grand Mumtoz Director · ZARHAL · screen "rooms" («Номера / Xonalar»), DESIGN-screen-rooms §5.2.
 * Tile/floor/legend/sheet component classes live in app.css (§11, §14); this file adds the screen layout (phone stack, desktop
 * two-building grid + inspector), the queue card, the room sheet content and the local sheet/step fallbacks. Tokens only;
 * transform/opacity animations only; reduced motion honoured. */

/* ---------- root & top strip ---------- */
.rooms { position: relative; }
.rooms__chips { margin: 0 calc(-1 * var(--gutter)); padding-left: var(--gutter); padding-right: var(--gutter); }
.rooms__chips .chip { flex-shrink: 0; }
.rooms__chips .chip__count { font-weight: 700; }
.rooms__summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px; margin: 2px 0 4px; }
.rooms__summary .num { font-weight: 700; color: var(--text-1); }
.rooms__summary .rooms__byline { margin-top: 0; display: inline; }
.rooms__skeleton { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; animation: fadeIn 160ms var(--e-velvet); }
.rooms__skeleton .skeleton--text .skel { height: 14px; }
.rooms .error-panel { margin-top: 12px; }

/* ---------- housekeeping queue (§5.2.2) ---------- */
.rooms__queue-host { margin-top: 8px; }
.rooms__queue { padding: 12px 14px; }
.rooms__queue .section__head { margin-bottom: 6px; }
.rooms__queue-chips { min-height: 0; padding: 0; gap: 6px; }
.rooms__queue-chips .chip { height: 28px; padding: 0 10px; }
.rooms__queue-chips .chip b { font-variant-numeric: tabular-nums; }
.rooms__queue-chips .chip .chip__count { font-weight: 500; }
.rooms__queue-chips .chip .chip__count.tone--warning { color: var(--warning); }
.rooms__queue-send { margin-top: 10px; }
/* yuborildi — kimga / «отправлено — кому» (26.09.2026) */
.rooms__queue-sent { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12.5px; line-height: 17px; color: var(--success, #3f8f5a); }
.rooms__queue-sent svg { flex: 0 0 auto; }
.rooms__queue .na-caption { display: block; margin-top: 8px; }
.rooms__queue-confirm { width: min(420px, calc(100vw - 32px)); padding: 6px 8px; }
.rooms__queue-confirm .callout { white-space: normal; overflow-wrap: anywhere; }

/* ---------- map: floors & tiles (phone stack) ---------- */
.rooms__map { margin-top: 4px; }
.rooms .floor.enter { animation: fadeUp6 200ms var(--e-enter) both; animation-delay: calc(min(var(--i, 0), 6) * 40ms); }
.rooms .floor__head .overline { color: var(--text-3); }
.rooms .floor__stats .st-free { color: var(--st-free); }
.rooms .floor__stats .st-dirty { color: var(--st-dirty); }
.rooms .floor__stats .caption { color: var(--text-3); font-weight: 500; }
.rooms .floor__head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r-xs); }
.rooms .floor__grid { justify-content: start; }
.rooms .tile__glyph { pointer-events: none; }
.rooms .tile__center.num { font-weight: 700; }
.rooms .tile.is-flash { z-index: 1; }
.rooms .tile--issue .tile__num { color: var(--text-1); }
.rooms .is-stale-content .tile { pointer-events: none; }
.rooms .legend .rooms__legend-door { display: inline-flex; align-items: center; gap: 4px; }
.rooms .legend .rooms__legend-door .i { width: 14px; height: 14px; color: var(--accent); }
.rooms .legend span { display: inline-flex; align-items: center; }
.rooms > div > .empty--compact { padding-top: 12px; }

/* ---------- corridor floor plan (VARIETY-RULES §1: hero = the map itself) ----------
 * Building = a hairline "block" with a serif name and a brass rule; each floor's corridor is split into two wings by a
 * stairwell strip (dashed hairline + three stair bars + a tiny label); the legend is a row of tiny swatches. */
.rooms__building { min-width: 0; margin-top: 12px; padding: 0 6px 8px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-1); } /* phone: 343 − 2 − 12 = 329 px ≥ 4 × 76 + 3 × 8 → four columns stay */
.rooms__building:first-child { margin-top: 8px; }
.rooms__building-title { display: flex; align-items: center; gap: 10px; padding: 8px 0 0; }
.rooms__building-name { font: 600 22px/26px var(--font-display); color: var(--text-1); letter-spacing: .01em; white-space: nowrap; }
.rooms__building-rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--accent-line), transparent); }
.rooms .floor { margin-top: 6px; }
.rooms .floor__head { background: var(--bg-1); }
.rooms .floor__grid { justify-content: start; padding-bottom: 2px; }
.floor__stairs { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; height: 16px; margin: 0; }
.floor__stairs-line { flex: 1; height: 0; border-top: 1px dashed var(--line-strong); }
.floor__stairs-mark { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.floor__stairs-mark i { display: block; width: 4px; background: var(--text-3); border-radius: 1px; }
.floor__stairs-mark i:nth-child(1) { height: 4px; } .floor__stairs-mark i:nth-child(2) { height: 8px; } .floor__stairs-mark i:nth-child(3) { height: 12px; }
.floor__stairs-label { font: 500 10px/12px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.rooms .legend { gap: 6px 10px; }
.rooms .legend i { width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; }
.rooms .legend i.l-dirty { background: var(--st-dirty-soft) repeating-linear-gradient(135deg, var(--st-dirty-hatch) 0 1px, transparent 1px 4px); }

/* motion signature (§3): ripple outward from the changed tile — transform/opacity only, ≤ 300 ms in total */
.rooms .tile.is-ripple { animation: roomsRipple 160ms var(--e-velvet) both; animation-delay: var(--rd, 0ms); }
@keyframes roomsRipple { 0% { transform: scale(1); opacity: 1; } 45% { transform: scale(1.045); opacity: .82; } 100% { transform: scale(1); opacity: 1; } }

/* desktop: two building columns, 88 px tiles, ≤ 8 per row (§5.2 desktop) */
.rooms--desk .rooms__chips { margin: 0; padding: 4px 0; flex-wrap: wrap; overflow: visible; mask-image: none; -webkit-mask-image: none; }
.rooms__map--desk { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 8px 24px; align-items: start; margin-top: 8px; }
.rooms__map--desk .rooms__building { margin-top: 0; padding: 0 14px 12px; }
.rooms__map--desk .floor { margin-top: 8px; }
.rooms__map--desk .floor__head { position: static; }
.rooms__map--desk .floor__grid--l { max-width: calc(8 * 88px + 7 * 8px); }
.rooms__map--desk .floor__stats span { min-width: 16px; text-align: right; }
@media (min-width: 900px) and (min-height: 521px) {
  .rooms .legend { margin-top: 24px; }
  .rooms__summary { margin-bottom: 8px; }
}

/* quiet state (§4 voice): no dirty rooms → one warm line with a tiny brass door-and-sparkle */
.rooms__quiet { display: flex; align-items: center; gap: 10px; padding: 8px 2px 4px; color: var(--text-2); font: 400 14px/20px var(--font-ui); }
.rooms__quiet-art { flex-shrink: 0; width: 28px; height: 28px; color: var(--accent); display: inline-flex; }
.rooms__quiet-text { font-style: italic; }

/* ---------- room sheet content (§5.2.3) — used inside GM.ui.sheet (phone) and the inspector (desktop) ---------- */
.rooms-sheet__content { position: relative; min-height: 120px; }
.rooms-sheet__skeleton { padding-top: 4px; }
.rooms-sheet__group + .rooms-sheet__group { margin-top: 20px; }
.rooms-sheet__content .section { margin-top: 16px; }
.rooms-sheet__group > .section:first-child { margin-top: 0; }
.rooms-sheet__head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.rooms-sheet__head .rooms-sheet__num { font: 600 42px/40px var(--font-display); letter-spacing: .01em; color: var(--text-1); font-variant-numeric: lining-nums tabular-nums; } /* the one serif numeral: the room number as a door plate (VARIETY-RULES) */
.rooms-sheet__head .chip--static { height: 24px; }
.rooms-sheet__since { flex-basis: 100%; color: var(--text-3); }
.rooms-sheet__where { margin-top: 2px; color: var(--text-2); }
.rooms-sheet__actions { margin-top: 12px; }
.rooms-sheet__actions .btn--stack { padding: 6px 4px; }
.rooms-sheet__actions .btn--stack .i { width: 20px; height: 20px; }
.rooms-sheet__actions .btn--stack .btn__label { font: 500 11px/13px var(--font-ui); text-align: center; white-space: normal; }
.rooms-sheet__actions.is-offline { opacity: .55; }
.rooms-sheet__byline { margin-top: 20px; }

/* guests */
.rooms-guest { padding: 10px 0 4px; }
.rooms-guest + .rooms-guest { border-top: 1px solid var(--line); }
.rooms-guest__name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rooms-guest__name b { font: 700 15px/20px var(--font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rooms-guest__name .chip--accent { flex-shrink: 0; }
.rooms-guest__name .chip--accent .i { width: 14px; height: 14px; }
.rooms-guest > :not(.rooms-guest__name) { padding-left: 42px; }
.rooms-guest__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; margin-top: 4px; color: var(--text-2); }
.rooms-guest__stay { margin-top: 4px; color: var(--text-2); }
.rooms-guest__stay .tone--warning { font-weight: 700; }
.rooms-guest .small.text-2 b { color: var(--text-1); }
.rooms-call { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-weight: 500; text-decoration: none; font-variant-numeric: tabular-nums; min-height: 24px; background: none; border: 0; padding: 0; font-size: inherit; cursor: pointer; }
.rooms-call .i { width: 16px; height: 16px; }
.rooms-call:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); }

/* generic lines: bar receipts, booking, cleanings, history */
.rooms-line { padding: 6px 0; color: var(--text-1); line-height: 18px; overflow-wrap: anywhere; }
.rooms-line + .rooms-line { border-top: 1px solid var(--line); }
.rooms-line .num { font-variant-numeric: tabular-nums; }
.rooms-clean__items { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 6px; vertical-align: middle; }
.rooms-clean__items .chip { height: 20px; }
.rooms-sheet__content .chip--warning.chip--static { height: auto; min-height: 28px; padding: 4px 10px; white-space: normal; line-height: 16px; }

/* notes / issues */
.rooms-note { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 8px 10px; margin-top: 6px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-2); }
.rooms-note--issue { border-left: 2px solid var(--st-issue); }
.rooms-note--done { opacity: .72; }
.rooms-note--done.rooms-note--issue { border-left-color: var(--line-strong); }
.rooms-note__text { grid-column: 1; font: 400 14px/20px var(--font-ui); color: var(--text-1); overflow-wrap: anywhere; white-space: pre-wrap; }
.rooms-note__text .st-issue .i { width: 16px; height: 16px; vertical-align: -3px; }
.rooms-note__meta { grid-column: 1; color: var(--text-3); }
.rooms-note__resolve { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.rooms-sheet__content .section .link.small { display: inline-block; margin-top: 6px; background: none; border: 0; padding: 0; font: 500 13px/18px var(--font-ui); }

/* timeline (app.css .timeline + dot) */
.rooms-sheet__content .timeline__item b { color: var(--text-1); font-weight: 700; }
.rooms-sheet__content .timeline__item .timeline__dot { background: var(--dot, var(--text-3)); }

/* comments */
.rooms-comment { margin-top: 8px; padding: 10px 12px; }
.rooms-comment__who { display: flex; align-items: center; gap: 6px; min-width: 0; font: 500 13px/18px var(--font-ui); }
.rooms-comment__who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rooms-comment .unread-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.rooms-comment__text { margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.rooms-comment .photo { margin-top: 8px; }
.rooms-comment__reply { margin-top: 6px; padding: 4px 8px; border-left: 2px solid var(--line-strong); color: var(--text-2); overflow-wrap: anywhere; }
.rooms-comment__reply b { color: var(--text-1); }
.rooms-comment__composer { display: flex; gap: 8px; align-items: flex-end; margin-top: 8px; }
.rooms-comment__composer .textarea { flex: 1; min-height: 44px; }
.rooms-comment__foot { display: flex; justify-content: flex-end; margin-top: 4px; }

/* ---------- steps (note / message / confirm) ---------- */
.rooms-step { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.rooms-step .field { margin-bottom: 0; }
.rooms-step .field__hint { color: var(--text-3); font: 500 12px/16px var(--font-ui); }
.rooms-step .field--error .field__hint { color: var(--danger); }
.rooms-step .toggle-row { min-height: 44px; }
.rooms-step .chips { min-height: 0; padding: 0; }
.rooms-step .confirm__text { font-size: 15px; line-height: 22px; }
.rooms-step__foot { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.rooms-step__foot .btn { flex: 1; }
.rooms-step .seg { width: 100%; }

/* desktop inspector panel with in-place steps */
.rooms-panel { position: relative; }
.rooms-panel__step { animation: stepIn 200ms var(--e-enter); }
.rooms-panel__back { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 8px -4px; padding: 4px; background: none; border: 0; font: 500 13px/18px var(--font-ui); border-radius: var(--r-xs); }
.rooms-panel__back .i { width: 16px; height: 16px; }
.rooms-panel__step .title { margin-bottom: 8px; }
@media (min-width: 900px) and (min-height: 521px) {
  .rooms-step__foot .btn { flex: 0 0 auto; min-width: 120px; }
  .rooms-sheet__actions .btn--stack { min-height: 52px; }
}

/* ---------- local phone sheet fallback (only while GM.ui.sheet is a stub) ---------- */
.rooms-sheet .sheet__head { padding-right: 8px; }
.rooms-sheet__stepwrap { padding-top: 4px; }
.rooms-sheet__stepwrap.is-removing { animation: fadeOut 160ms var(--e-exit) forwards; pointer-events: none; }
body.no-scroll { overflow: hidden; }

/* ---------- reduced motion (§2.2) ---------- */
html[data-motion="reduced"] .rooms .floor.enter, html[data-motion="reduced"] .rooms-panel__step, html[data-motion="reduced"] .rooms__skeleton, html[data-motion="reduced"] .rooms-sheet__stepwrap.is-removing, html[data-motion="reduced"] .rooms .tile.is-ripple { animation: none; }
@media (prefers-reduced-motion: reduce) { .rooms .tile.is-ripple, .rooms .floor.enter { animation: none; } }

/* To'lov usullari va hamrohlar / чем оплачено и соседи по номеру (владелец, 17.09) */
.rooms-guest__pays, .rooms-guest__others { margin-top: 4px; line-height: 18px; }
.rooms-guest__pays b { font-variant-numeric: tabular-nums; }