:root {
    --bg: #0f1419;
    --panel: #1a2129;
    --panel-2: #222b35;
    --line: #2c3845;
    --text: #e6edf3;
    --muted: #93a1ad;
    --office: #4f8cff;
    --desk: #34c77b;
    --hot: #f5a623;
    --available: #5a6b7b;
    /* amenities / fixtures */
    --reception: #a06bff;
    --hallway: #7a8794;
    --restroom: #2bb4a6;
    --water_fountain: #3fa9d6;
    --kitchen: #c0795a;
    --conference_room: #cf6f9c;
    --wellness_room: #6fb98f;
    --mailroom: #c9a23f;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
}

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
}
.brand h1 { margin: 0; font-size: 22px; letter-spacing: .5px; }
.brand .tagline { color: var(--muted); font-size: 13px; }
.stats { display: flex; gap: 18px; }
.stat { color: var(--muted); font-size: 13px; }
.stat strong { color: var(--text); font-size: 18px; margin-right: 4px; }
.manage-link { color: var(--office); text-decoration: none; align-self: center; }
.manage-link:hover { text-decoration: underline; }

.layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 16px;
    padding: 16px 24px 24px;
    align-items: start;
}

/* Let the canvas column shrink so the floorplan scrolls INSIDE .map-viewport
   instead of blowing out the page width (grid/flex default min-width: auto). */
.map-pane, .editor-pane { min-width: 0; min-height: 0; }

.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}
.legend { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--text);
}
.chip.type-private_office { background: rgba(79,140,255,.18);  border-color: var(--office); }
.chip.type-dedicated_desk { background: rgba(52,199,123,.18);  border-color: var(--desk); }
.chip.type-hot_desk       { background: rgba(245,166,35,.18);  border-color: var(--hot); }
.chip.type-reception      { background: rgba(160,107,255,.16); border-color: var(--reception); }
.chip.type-hallway        { background: rgba(122,135,148,.16); border-color: var(--hallway); }
.chip.type-restroom       { background: rgba(43,180,166,.16);  border-color: var(--restroom); }
.chip.type-water_fountain { background: rgba(63,169,214,.16);  border-color: var(--water_fountain); }
.chip.type-kitchen         { background: rgba(192,121,90,.16);  border-color: var(--kitchen); }
.chip.type-conference_room { background: rgba(207,111,156,.16); border-color: var(--conference_room); }
.chip.type-wellness_room   { background: rgba(111,185,143,.16); border-color: var(--wellness_room); }
.chip.type-mailroom        { background: rgba(201,162,63,.16);  border-color: var(--mailroom); }
.chip.is-available        { background: transparent; border-style: dashed; color: var(--muted); }

.filters { display: flex; gap: 6px; }
.filter {
    background: var(--panel-2);
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 13px;
    cursor: pointer;
}
.filter.active { color: var(--text); border-color: var(--office); }

/* Zoom controls */
.zoom-controls { display: inline-flex; align-items: center; gap: 4px; }
.zoom-btn {
    background: var(--panel-2);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 6px;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}
.zoom-btn:hover { filter: brightness(1.15); }
.zoom-btn.zoom-reset { font-size: 12px; }
.zoom-level { color: var(--muted); font-size: 12px; min-width: 42px; text-align: center; }

/* Scrollable viewport that holds the (zoomable) floorplan */
.map-viewport {
    overflow: auto;
    max-height: calc(100vh - 190px);
    border-radius: 12px;
}
.map-viewport .floorplan { margin: 0; }

/* Hold-space to pan */
body.space-pan .map-viewport,
body.space-pan .map-viewport * { cursor: grab !important; }
.map-viewport.panning,
.map-viewport.panning * { cursor: grabbing !important; }

/* Fullscreen / expanded map */
body.map-maximized { overflow: hidden; }
body.map-maximized .site-header,
body.map-maximized .detail-pane,
body.map-maximized .prop-pane { display: none; }
body.map-maximized .layout,
body.map-maximized .editor-grid { display: block; padding: 0; gap: 0; }
body.map-maximized .map-pane,
body.map-maximized .editor-pane {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: var(--bg);
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
}
body.map-maximized .map-viewport { max-height: none; flex: 1; min-height: 0; }

/* Floor plan canvas — 3:2 aspect, positions are percent-based */
.floorplan {
    position: relative;
    /* size is set inline in px (absolute-pixel world canvas); scaled by zoom.js */
    background: var(--panel);
    background-size: cover;
    background-position: center;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}
.floorplan.has-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(15,20,25,.35);
}

.space {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    padding: 4px;
    border-radius: 8px;
    border: 2px solid var(--line);
    background: var(--panel-2);
    color: var(--text);
    font: inherit;
    text-align: center;
    cursor: pointer;
    transition: transform .08s ease, box-shadow .08s ease, filter .08s ease;
    overflow: hidden;
    z-index: 2;
}
.space:hover { transform: translateY(-1px); filter: brightness(1.12); z-index: 3; }
.space.selected { box-shadow: 0 0 0 3px #fff inset, 0 6px 18px rgba(0,0,0,.45); z-index: 4; }

.space .space-code { font-size: 11px; font-weight: 700; opacity: .85; }
.space .space-occupant {
    font-size: 12px;
    line-height: 1.15;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.space.type-private_office { border-color: var(--office); background: rgba(79,140,255,.22); }
.space.type-dedicated_desk { border-color: var(--desk);   background: rgba(52,199,123,.22); }
.space.type-hot_desk       { border-color: var(--hot);    background: rgba(245,166,35,.22); }

.space.available {
    border-style: dashed;
    background: rgba(90,107,123,.12);
    color: var(--muted);
}
.space.dimmed { opacity: .18; pointer-events: none; }

/* Amenities / fixtures — non-interactive context, rendered behind workspaces */
.asset {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: 6px;
    border: 1px dashed var(--line);
    background: rgba(122,135,148,.10);
    color: var(--muted);
    text-align: center;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}
.asset .asset-icon  { font-size: 15px; line-height: 1; }
.asset .asset-label { font-size: 11px; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset.type-reception      { border-color: var(--reception);      background: rgba(160,107,255,.12); color: #d7c6ff; }
.asset.type-hallway        { border-color: var(--hallway);        background: rgba(122,135,148,.12); }
.asset.type-restroom       { border-color: var(--restroom);       background: rgba(43,180,166,.12);  color: #b6efe8; }
.asset.type-water_fountain { border-color: var(--water_fountain); background: rgba(63,169,214,.12);  color: #bfe6f7; }
.asset.type-kitchen         { border-color: var(--kitchen);         background: rgba(192,121,90,.12);  color: #e7c4b2; }
.asset.type-conference_room { border-color: var(--conference_room); background: rgba(207,111,156,.12); color: #efc3da; }
.asset.type-wellness_room   { border-color: var(--wellness_room);   background: rgba(111,185,143,.12); color: #c3e7d4; }
.asset.type-mailroom        { border-color: var(--mailroom);        background: rgba(201,162,63,.12);  color: #ecd9a4; }
.asset.type-hot_desk        { border-color: var(--hot); border-style: solid; background: rgba(245,166,35,.16); color: #f7d59a; }
.asset.dimmed { opacity: .12; }

/* Detail panel */
.detail-pane {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 18px;
    min-height: 220px;
    position: sticky;
    top: 16px;
}
.detail-empty { color: var(--muted); font-size: 14px; }
.detail-type {
    display: inline-block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .6px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    margin-bottom: 8px;
}
.detail-card h2 { margin: 0 0 14px; font-size: 20px; }
.detail-meta { margin: 0; }
.detail-meta dt {
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-top: 12px;
}
.detail-meta dd { margin: 2px 0 0; font-size: 15px; }
.detail-meta dd a { color: var(--office); text-decoration: none; }
.detail-meta dd a:hover { text-decoration: underline; }
.badge-available { color: var(--hot); font-weight: 600; }

@media (max-width: 860px) {
    .layout { grid-template-columns: 1fr; }
    .detail-pane { position: static; }
}