/* ModelSpace — Pohjapiirros (schematic floor-plan editor) */

/* Override display:block on view-panel so we can use flex layout */
#view-pohjapiirros { flex-direction: column; }
#view-pohjapiirros.active { display: flex !important; height: calc(100vh - 110px); }

#pohja-main-area { flex: 1; overflow: hidden; min-height: 0; }

#pohja-canvas-container {
    min-height: 200px;
    overflow: hidden;
}

#pohja-svg {
    width: 100%;
    height: 100%;
    display: block;
    cursor: default;
    user-select: none;
}

#pohja-svg.draw-mode { cursor: crosshair; }
#pohja-svg.pan-mode { cursor: grab; }
#pohja-svg.pan-mode:active { cursor: grabbing; }

/* Active pan via middle-mouse drag or Cmd/Ctrl + left-drag. */
#pohja-svg.panning,
#pohja-svg.panning .space-rect,
#pohja-svg.panning .infra,
#pohja-svg.panning .opening { cursor: grabbing !important; }

/* Grid lines */
#pohja-grid line.grid-major { stroke: #d0d0d0; stroke-width: 0.05; }
#pohja-grid line.grid-minor { stroke: #ececec; stroke-width: 0.02; }

/* Envelope */
#pohja-envelope-layer .envelope {
    fill: rgba(13, 110, 253, 0.06);
    stroke: #0d6efd;
    stroke-width: 0.15;
    stroke-linejoin: round;
}
#pohja-envelope-layer .envelope-edit-handle {
    fill: #0d6efd;
    stroke: white;
    stroke-width: 0.05;
    cursor: move;
}
.envelope-preview {
    fill: rgba(13, 110, 253, 0.04);
    stroke: #0d6efd;
    stroke-width: 0.15;
    stroke-dasharray: 0.4 0.2;
}
.envelope-vertex {
    fill: #0d6efd;
    stroke: white;
    stroke-width: 0.05;
}

/* Storey tabs */
#pohja-storey-tabs .storey-tab {
    padding: 0.2rem 0.6rem;
    font-size: 0.85rem;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    background: #fff;
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 1.5rem;
}
#pohja-storey-tabs .storey-tab-del {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    background: transparent;
    color: rgba(0, 0, 0, 0.4);
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.1s, background 0.1s, color 0.1s;
}
#pohja-storey-tabs .storey-tab:hover .storey-tab-del { opacity: 1; }
#pohja-storey-tabs .storey-tab-del:hover { background: rgba(220, 53, 69, 0.18); color: #dc3545; }
#pohja-storey-tabs .storey-tab.active .storey-tab-del { color: rgba(255, 255, 255, 0.7); }
#pohja-storey-tabs .storey-tab.active .storey-tab-del:hover { background: rgba(255, 255, 255, 0.25); color: #fff; }

/* Lock toggle on storey tabs */
#pohja-storey-tabs .storey-tab { padding-right: 2.6rem; }
#pohja-storey-tabs .storey-tab-del { right: 2px; }
#pohja-storey-tabs .storey-tab-lock {
    position: absolute;
    top: 2px;
    right: 22px;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    background: transparent;
    color: rgba(0, 0, 0, 0.4);
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.1s, background 0.1s, color 0.1s;
}
#pohja-storey-tabs .storey-tab:hover .storey-tab-lock { opacity: 1; }
#pohja-storey-tabs .storey-tab-lock:hover { background: rgba(255, 193, 7, 0.25); color: #cc9a06; }
/* When the storey is locked the lock icon stays visible to signal state */
#pohja-storey-tabs .storey-tab.locked .storey-tab-lock { opacity: 1; color: #cc9a06; }
#pohja-storey-tabs .storey-tab.locked { background: #fff8e1; border-color: #ffe69c; }
#pohja-storey-tabs .storey-tab.locked.active { background: #ffc107; color: #212529; border-color: #ffc107; }
#pohja-storey-tabs .storey-tab.locked .storey-lock-icon { color: #cc9a06; }
#pohja-storey-tabs .storey-tab.locked.active .storey-tab-lock { color: #664d03; }
#pohja-storey-tabs .storey-tab.locked.active .storey-lock-icon { color: #664d03; }
#pohja-storey-tabs .storey-tab:hover { background: #f1f3f5; }
#pohja-storey-tabs .storey-tab.active {
    background: #0d6efd;
    color: white;
    border-color: #0d6efd;
}
#pohja-storey-tabs .storey-tab .storey-meta {
    font-size: 0.7rem;
    opacity: 0.7;
}

/* Info panel content */
#pohja-info-content .group-header {
    font-weight: 600;
    margin-top: 0.5rem;
    margin-bottom: 0.25rem;
    color: #495057;
}
#pohja-info-content .space-row {
    display: block;
    padding: 0.25rem 0.35rem;
    border-radius: 0.2rem;
    cursor: grab;
    user-select: none;
}
#pohja-info-content .space-row:active { cursor: grabbing; }
#pohja-info-content .space-row:hover { background: #f8f9fa; }
#pohja-info-content .space-row.dragging { opacity: 0.45; }
#pohja-info-content .space-row.selected { background: #cfe2ff; }
#pohja-info-content .space-row + .space-row { border-top: 1px solid #f1f3f5; }
#pohja-info-content .space-row-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.3rem;
}
#pohja-info-content .space-row-main .name { flex-grow: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pohja-info-content .space-row-main .area { color: #6c757d; font-variant-numeric: tabular-nums; font-size: 0.78rem; }

#pohja-info-content .placement-badge {
    font-size: 0.7rem;
    padding: 0 0.35rem;
    border-radius: 0.25rem;
    background: #e9ecef;
    color: #495057;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
#pohja-info-content .placement-badge.complete { background: #d1e7dd; color: #0a3622; }
#pohja-info-content .placement-badge.over     { background: #f8d7da; color: #58151c; }

#pohja-info-content .storey-list {
    font-size: 0.7rem;
    color: #6c757d;
    margin-top: 0.1rem;
    line-height: 1.2;
}
#pohja-info-content .storey-list a {
    color: #0d6efd;
    text-decoration: none;
}
#pohja-info-content .storey-list a:hover { text-decoration: underline; }
#pohja-info-content .storey-list .none { font-style: italic; opacity: 0.7; }

/* Drop target outline on the canvas while dragging from the right pane */
#pohja-svg.drop-target {
    outline: 3px dashed #198754;
    outline-offset: -3px;
}

/* Coverage badge (assigned m² / target m²) */
.pohja-coverage-good   { color: #198754; }
.pohja-coverage-warn   { color: #fd7e14; }
.pohja-coverage-bad    { color: #dc3545; }

/* Infrastructure */
.palette-btn.active {
    background: #0d6efd;
    color: white;
    border-color: #0d6efd;
}

#pohja-infrastructure-layer .infra { stroke-width: 0.1; stroke-linejoin: round; }
#pohja-infrastructure-layer .infra-corridor       { fill: rgba(108, 117, 125, 0.20); stroke: #6c757d; stroke-dasharray: 0.4 0.2; }
#pohja-infrastructure-layer .infra-elevator       { fill: rgba(220, 53, 69, 0.30);   stroke: #dc3545; }
#pohja-infrastructure-layer .infra-stair          { fill: rgba(111, 66, 193, 0.25);  stroke: #6f42c1; }
#pohja-infrastructure-layer .infra-escalator      { fill: rgba(214, 51, 132, 0.30);  stroke: #d63384; }
#pohja-infrastructure-layer .infra-shaft-lvi      { fill: rgba(13, 110, 253, 0.30);  stroke: #0d6efd; }
#pohja-infrastructure-layer .infra-shaft-electric { fill: rgba(255, 193, 7, 0.40);   stroke: #ffc107; }

#pohja-infrastructure-layer .infra-label {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    fill: #212529;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
    user-select: none;
}

#pohja-infrastructure-layer .infra.selected { stroke-width: 0.25; stroke: #0d6efd; }
#pohja-spaces-layer .space-rect.selected     { stroke-width: 0.25; stroke: #0d6efd; }
#pohja-spaces-layer .space-rect              { cursor: pointer; }
#pohja-infrastructure-layer .infra           { cursor: pointer; }
#pohja-infrastructure-list .infra-row.selected { background: #cfe2ff; }

/* Inaccessible rooms: rooms that don't share an edge with any corridor */
#pohja-spaces-layer .space-rect.inaccessible {
    stroke: #dc3545;
    stroke-width: 0.18;
    stroke-dasharray: 0.5 0.3;
}

/* Doors + windows imported from IFC. Drawn as small rects on the parent
 * room's wall edges. Right-click → reassign to a different wall. */
#pohja-spaces-layer .opening {
    cursor: context-menu;
}
#pohja-spaces-layer .opening-door   { /* fill/stroke set inline for crispness at zoom */ }
#pohja-spaces-layer .opening-window { }
#pohja-spaces-layer .opening.selected {
    stroke: #0d6efd !important;
    stroke-width: 0.12 !important;
}

/* IFC-imported spaces that didn't match any Tilaohjelma room (no Tilatunnus
 * or no matching roomNumber). User can right-click to link them manually. */
#pohja-spaces-layer .space-rect.from-ifc-unmatched {
    cursor: pointer;
}
#pohja-spaces-layer .space-rect.from-ifc-unmatched.selected {
    stroke: #0d6efd !important;
    stroke-width: 0.25;
}

/* Auto-inserted corridor: same shape as user-corridors, slightly more saturated dash */
#pohja-infrastructure-layer .infra.infra-corridor.auto {
    fill: rgba(108, 117, 125, 0.30);
    stroke: #495057;
    stroke-dasharray: 0.6 0.3;
}
#pohja-infrastructure-list .infra-row .auto-tag {
    font-size: 0.65rem;
    background: #e9ecef;
    color: #495057;
    border-radius: 0.2rem;
    padding: 0 0.25rem;
    margin-left: 0.25rem;
}

#pohja-infrastructure-list .infra-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.2rem 0.25rem;
    border-radius: 0.2rem;
    cursor: pointer;
}
#pohja-infrastructure-list .infra-row:hover { background: #f1f3f5; }
#pohja-infrastructure-list .infra-row .infra-kind {
    display: inline-block;
    width: 0.6rem; height: 0.6rem;
    border-radius: 0.1rem;
    margin-right: 0.4rem;
    vertical-align: middle;
}
.kind-dot-corridor       { background: #6c757d; }
.kind-dot-elevator       { background: #dc3545; }
.kind-dot-stair          { background: #6f42c1; }
.kind-dot-escalator      { background: #d63384; }
.kind-dot-shaft-lvi      { background: #0d6efd; }
.kind-dot-shaft-electric { background: #ffc107; }

/* Drag cursor on selectable elements */
#pohja-spaces-layer .space-rect,
#pohja-infrastructure-layer .infra { cursor: move; }

/* Resize handles (rendered in overlay layer) */
#pohja-overlay-layer .resize-handle {
    pointer-events: all;
}

/* Right-click context menu */
.pohja-context-menu {
    position: fixed;
    z-index: 1090;
    min-width: 220px;
    padding: 0.25rem 0;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 0.375rem;
    box-shadow: 0 4px 18px rgba(0,0,0,0.18);
    font-size: 0.875rem;
}
.pohja-context-menu .dropdown-item {
    padding: 0.4rem 0.9rem;
    cursor: pointer;
}
.pohja-context-menu .dropdown-item:hover {
    background: #f1f3f5;
}
.pohja-context-menu .dropdown-item.text-danger:hover {
    background: #fee2e2;
}

/* ───── Map backdrop (Leaflet behind SVG canvas) ───── */
#pohja-map-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    transform-origin: center center;
}
#pohja-canvas-container > #pohja-svg {
    position: relative;
    z-index: 1;
}
#pohja-map-backdrop .leaflet-container {
    background: #fafafa;
    width: 100%;
    height: 100%;
}
#btn-pohja-map-toggle.active {
    background-color: #0d6efd;
    color: #fff;
    border-color: #0d6efd;
}

/* ───── Location picker modal ───── */
#pohja-location-modal #pohja-location-map {
    width: 100%;
    background: #eef2f4;
}
#pohja-location-search-results .list-group-item {
    cursor: pointer;
    font-size: 0.875rem;
    padding: 0.4rem 0.75rem;
}
#pohja-location-search-results .list-group-item:hover {
    background: #f1f3f5;
}
.pohja-north-indicator {
    width: 36px;
    height: 36px;
    pointer-events: none;
    transform-origin: 50% 50%;
}
.pohja-north-indicator::before {
    content: 'N';
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    font: 700 11px sans-serif;
    color: #dc3545;
    text-shadow: 0 0 2px #fff, 0 0 2px #fff;
}
.pohja-north-indicator::after {
    content: '';
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 14px solid #dc3545;
}

/* ───── Envelope drawing on map ───── */
.pohja-vertex-handle {
    width: 14px;
    height: 14px;
    background: #fff;
    border: 2px solid #0d6efd;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    cursor: move;
    pointer-events: auto;
}
.pohja-vertex-handle.origin {
    background: #0d6efd;
    border-color: #fff;
    box-shadow: 0 1px 4px rgba(13,110,253,0.6);
}
.pohja-vertex-handle:hover { transform: scale(1.2); }
.pohja-rotation-handle {
    width: 28px;
    height: 28px;
    background: #fff;
    border: 2px solid #dc3545;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    cursor: grab;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #dc3545;
    font: 700 14px/1 sans-serif;
}
.pohja-rotation-handle::before {
    content: '\21BB';
}
.pohja-rotation-handle:active { cursor: grabbing; }
.leaflet-container.pohja-draw-cursor { cursor: crosshair !important; }
.pohja-draw-label-inner {
    background: rgba(13,110,253,0.95);
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font: 600 11px/1.4 sans-serif;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    pointer-events: none;
}
.pohja-draw-label-inner.close {
    background: rgba(40,167,69,0.95);
}

/* ── Suhdekaavio (relation schematic) sub-mode ───────────────────────── */
#pohja-schematic-layer .schematic-empty-hint {
    font-family: sans-serif;
    pointer-events: none;
    user-select: none;
}
#pohja-schematic-layer .schematic-placement { cursor: move; }
#pohja-schematic-layer .schematic-resize-handle { pointer-events: all; }
#pohja-schematic-layer .schematic-corridor { cursor: pointer; }

/* ───── Variants gallery modal ───── */
.variant-thumb-wrap {
    width: 100%;
    height: 140px;
    background: #f8f9fa;
    border-bottom: 1px solid rgba(0,0,0,.125);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 0.25rem 0.25rem 0 0;
}
.variant-thumb-wrap svg.variant-thumb {
    width: 100%;
    height: 100%;
}