/* ============================================================
   Floor-grid unit picker — the SINGLE shared stylesheet for both
   Accounts Admin (Areas/Accounts/Views/Unit) and the public
   read-only /explore page. Colours here MUST match
   Helpers/UnitStatusHelper.cs exactly.
   ============================================================ */
.floor-tabs { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .5rem; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.floor-tabs .floor-tab {
    flex: 0 0 auto; scroll-snap-align: start; padding: .5rem 1rem; border-radius: 999px;
    border: 1px solid #E5E1D8; background: #fff; font-size: .85rem; white-space: nowrap; cursor: pointer;
}
.floor-tabs .floor-tab.active { background: var(--brand-primary, #C0392B); border-color: var(--brand-primary, #C0392B); color: #fff; font-weight: 600; }

.unit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .6rem; margin-top: 1rem; }
.unit-tile {
    min-height: 64px; border-radius: 10px; border: 0; color: #fff; padding: .5rem .4rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
    font-size: .78rem; font-weight: 600; cursor: pointer; text-align: center;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
    transition: transform .15s ease, box-shadow .15s ease;
}
.unit-tile:hover, .unit-tile:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,.18); }
.unit-tile i { font-size: 1rem; }
.unit-tile--black { background: #1C1B19; }
.unit-tile--green { background: #1E8E3E; }
.unit-tile--maroon { background: #7A2E2E; }
.unit-tile--red { background: #D32F2F; }
.unit-tile--yellow { background: #F2B705; color: #1C1B19; }
.unit-tile--unknown { background: #9E9E9E; }
.unit-tile-inactive { position: relative; opacity: .5; }
.unit-tile-hidden-badge { position: absolute; top: 4px; right: 4px; font-size: .7rem !important; opacity: .95; }

.unit-status-legend { display: flex; flex-wrap: wrap; gap: .9rem; font-size: .82rem; }
.unit-status-legend .legend-item { display: inline-flex; align-items: center; gap: .4rem; }
.unit-status-legend .legend-dot { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }

/* Optional real-floor-plan hotspot overlay mode (used when Floor.FloorPlanImage is set). */
.floor-plan-wrap { position: relative; display: inline-block; max-width: 100%; }
.floor-plan-wrap img { max-width: 100%; height: auto; display: block; border-radius: 12px; }
.floor-plan-hotspot {
    position: absolute; border: 2px solid rgba(255,255,255,.85); border-radius: 4px;
    cursor: pointer; transition: filter .15s ease; opacity: .82;
}
.floor-plan-hotspot:hover, .floor-plan-hotspot:focus-visible { opacity: 1; filter: brightness(1.1); }