/* Architectural plan: room tints identify spaces, small labels convey availability. */
.floor-map { overflow: hidden; border: 1px solid #e5e6ee; border-radius: 20px; box-shadow: 0 8px 28px #2f354b06; }
.floor-map .map-topbar { padding: 22px 25px; align-items: center; gap: 20px; background: #fff; }
.map-topbar .map-heading { display: flex; align-items: center; gap: 13px; }
.map-topbar .map-floor-badge { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; margin: 0; border-radius: 12px; background: var(--brand-soft); color: var(--brand-text); font-size: 18px; font-weight: 800; letter-spacing: -.5px; }
.map-heading strong { font-size: 15px; }
.map-heading #map-selection-label { color: #737b8d; font-size: 12px; line-height: 1.6; margin-top: 5px; }
.floor-map .map-legend { flex-shrink: 0; gap: 15px; }
.floor-map .map-legend span { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #697386; white-space: nowrap; }
.floor-map .map-legend i { width: 7px; height: 7px; margin: 0; }
.floor-map .map-legend .available { background: #33876c; }
.floor-map .map-legend .busy { background: #8a91a3; }
.floor-map .map-legend .closed { background: #b08039; }
.map-scroll { overflow-x: auto; }
.floor-map .map-canvas { min-width: 760px; min-height: 580px; background-color: #fafbfe; background-image: radial-gradient(#dbe0eb 0.65px, transparent 0.65px); background-size: 18px 18px; }
.floor-map .map-canvas::before { inset: 35px 42px; border: 2px solid #d8dce7; border-radius: 17px; background: #ffffff80; box-shadow: 0 4px 0 #e9ebf2, 0 12px 28px #36425805; }
.floor-map .map-room { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; padding: 17px 19px; text-align: left; border: 1px solid var(--room-stroke); border-radius: 14px; background: var(--room-tint); color: #30364b; box-shadow: 0 3px 0 #ffffff, 0 6px 14px #30364b06; isolation: isolate; }
.floor-map .map-room.room531 { --room-tint: #eeebfa; --room-stroke: #d8d0ed; --furniture: #bab0d8; }
.floor-map .map-room.room532 { --room-tint: #eaf1fc; --room-stroke: #cddcf0; --furniture: #adc3df; }
.floor-map .map-room.room541 { --room-tint: #eaf4f0; --room-stroke: #cbded6; --furniture: #abc9bc; }
.floor-map .map-room.room542 { --room-tint: #fcf0e8; --room-stroke: #ecd8ca; --furniture: #d6baa5; }
.floor-map .map-room:hover { transform: translateY(-3px); border-color: var(--brand-text); box-shadow: 0 10px 24px #30364b10; }
.floor-map .map-room:focus-visible { outline: 3px solid var(--brand-text); outline-offset: 4px; }
.floor-map .map-room-caption { color: #687086; font-size: 10px; letter-spacing: 1px; font-weight: 650; }
.floor-map .map-room b { color: #30364b; font-size: 28px; font-weight: 750; letter-spacing: -.8px; line-height: 1.2; margin-top: 4px; z-index: 1; }
.floor-map .map-room small { color: #687086; opacity: 1; font-size: 11px; margin-top: 5px; z-index: 1; }
.map-room-status { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 4px 7px; position: absolute; bottom: 12px; left: 17px; border: 1px solid #ffffffb3; border-radius: 6px; background: #ffffffb8; color: #646e84; font-size: 10px; font-weight: 650; line-height: 1.4; white-space: nowrap; }
.map-room-status::before { content: ''; width: 5px; height: 5px; flex-shrink: 0; border-radius: 50%; background: #8f97ac; }
.floor-map .map-room[data-availability=available] .map-room-status { color: #296b54; background: #f5fcf8; border-color: #d6eadd; }
.floor-map .map-room[data-availability=available] .map-room-status::before { background: #33876c; }
.floor-map .map-room.is-busy .map-room-status { color: #626a7c; background: #f6f7fa; border-color: #e1e4ec; }
.floor-map .map-room.is-busy .map-room-status::before { background: #8a91a3; }
.floor-map .map-room.is-closed .map-room-status { color: #8b642c; background: #fffaf0; border-color: #eee0c5; }
.floor-map .map-room.is-closed .map-room-status::before { background: #b08039; }
.floor-map .map-room.filtered-out { opacity: 1; filter: none; border-style: dashed; --room-tint: #f4f5f8; --room-stroke: #d7dbe5; --furniture: #d0d4df; }
.floor-map .map-room.filtered-out .map-room-status { color: #687086; background: #fff; border-color: #e1e4ec; }
.floor-map .map-room.filtered-out .map-room-status::before { background: #8f97ac; }
.map-furniture { position: absolute; right: 16px; top: 23px; width: 51px; height: 66px; pointer-events: none; }
.map-furniture em { position: absolute; width: 27px; height: 62px; top: 2px; left: 12px; border: 1px solid var(--furniture); border-radius: 9px; background: #ffffffb0; box-shadow: 0 2px 2px #30364b04; }
.map-furniture i { position: absolute; width: 10px; height: 17px; background: var(--furniture); border: 1px solid #ffffff99; border-radius: 4px; }
.map-furniture i:nth-child(1) { left: 0; top: 9px; }.map-furniture i:nth-child(2) { left: 0; bottom: 8px; }.map-furniture i:nth-child(3) { right: 0; top: 9px; }.map-furniture i:nth-child(4) { right: 0; bottom: 8px; }
.floor-map .map-label { border: 1px solid #dce1eb; border-radius: 11px; color: #81899b; background: #f6f8fc; font-size: 12px; letter-spacing: .5px; }
.floor-map .desk-zone { color: #8c94a6; font-size: 11px; letter-spacing: .5px; }
.floor-map .desk-dots { height: 70px; margin: 13px 11px 0; opacity: .65; border-radius: 7px; background: repeating-linear-gradient(90deg,transparent 0 8px,#edf0f6 8px 27px,transparent 27px 35px); border: 1px solid #e2e6ef; box-shadow: inset 0 13px #f7f8fb, inset 0 -13px #f7f8fb; }
.floor-map .corridor { border: 0; padding: 5px 0; color: #929aaa; font-size: 10px; letter-spacing: 4px; }
.map-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 25px; border-top: 1px solid #eceef5; background: #fff; }
.map-footer > span { display: flex; align-items: center; gap: 8px; color: #697386; font-size: 12px; line-height: 1.6; }
.map-footer i { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-text); flex-shrink: 0; }
.map-footer small { font-size: 11px; color: #969dae; white-space: nowrap; }
@media(max-width:980px) { .floor-map .map-topbar { flex-wrap: wrap; gap: 14px; }.floor-map .map-legend { margin-left: 57px; } }
@media(max-width:680px) { .floor-map .map-topbar { padding: 18px 16px; }.map-heading #map-selection-label { font-size: 11px; }.map-footer { padding: 14px 16px; flex-wrap: wrap; gap: 8px; }.map-footer > span { font-size: 11px; } }