* { box-sizing: border-box; margin: 0; padding: 0; }

body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    background-color: #f4f7f6; color: #333; overflow: hidden; 
}

body.dragging * { cursor: grabbing !important; user-select: none; }

.container { display: flex; flex-direction: row; height: 100vh; width: 100vw; }

.sidebar { 
    width: 320px; flex-shrink: 0; background-color: #ffffff; padding: 20px; 
    box-shadow: 2px 0 10px rgba(0,0,0,0.1); display: flex; 
    flex-direction: column; gap: 20px; z-index: 10; overflow-y: auto; 
}

.sidebar h2 { font-size: 1.2rem; color: #2c3e50; border-bottom: 2px solid #ecf0f1; padding-bottom: 10px; margin-top: 10px; }
.input-group { display: flex; flex-direction: column; gap: 8px; }
.input-group label { font-weight: 600; font-size: 0.9rem; color: #555; }
.input-group input, .input-group select, .input-group textarea { padding: 10px; border: 1px solid #ccd1d9; border-radius: 4px; font-size: 1rem; outline: none; }
.input-group input:focus, .input-group select:focus, .input-group textarea:focus { border-color: #3498db; }

.status-panel { background-color: #ecf0f1; padding: 15px; border-radius: 4px; text-align: center; font-size: 1rem; }
#info-aktywna-sciana { color: #e74c3c; font-size: 1.1rem; }

button { padding: 12px; background-color: #3498db; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 1rem; transition: background 0.3s; }
button:hover { background-color: #2980b9; }

/* ROZWIĄZANIE PROBLEMU ZNIKAJĄCEGO BUDYNKU: Twarde wymiary kontenera */
.viewer { flex-grow: 1; position: relative; display: block; overflow: hidden; height: 100%; min-width: 300px; background: #e0e4e8; }
#widok3d { position: absolute; top: 0; left: 0; width: 100%; height: 100%; touch-action: none; outline: none; display: block; }

#mapa-kontener { 
    position: absolute; bottom: 20px; right: 20px; 
    width: 350px; height: 350px; background-color: rgba(255, 255, 255, 0.95); 
    border: 2px solid #bdc3c7; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); 
    z-index: 20; transition: all 0.3s ease; display: flex; justify-content: center; align-items: center; 
}
#mapa-kontener.powiekszona { width: 80vw; height: 80vh; bottom: 10vh; right: 10vw; z-index: 100; }
#btnPowiekszMape { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; padding: 0; background-color: #2c3e50; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 1.5rem; z-index: 30; display: flex; justify-content: center; align-items: center; }
#btnPowiekszMape:hover { background-color: #34495e; }
#rzut2d { width: 100%; height: 100%; touch-action: none; }

.sciana { stroke: #2c3e50; stroke-width: 250; fill: none; stroke-linecap: square; transition: stroke 0.2s, stroke-width 0.2s; cursor: pointer; }
.sciana:hover { stroke: #e67e22; }
.sciana.aktywna { stroke: #e74c3c; stroke-width: 400; }

.slup-2d { fill: #3498db; stroke: #2980b9; stroke-width: 50; cursor: grab; transition: stroke-width 0.2s; }
.slup-2d:hover { fill: #e74c3c; stroke-width: 150; }
.slup-2d:active { cursor: grabbing !important; }

.wymiar-tekst { font-family: monospace; font-size: 450px; fill: #7f8c8d; text-anchor: middle; dominant-baseline: middle; pointer-events: auto; cursor: pointer; transition: fill 0.2s, font-size 0.2s; }
.wymiar-tekst:hover { fill: #2980b9; font-weight: bold; font-size: 550px; }

@media (max-width: 768px) {
    .container { flex-direction: column-reverse; } 
    .sidebar { width: 100%; height: 45vh; padding: 10px; }
    .viewer { width: 100%; height: 55vh; }
    #mapa-kontener { width: 200px; height: 200px; bottom: 10px; right: 10px; }
    #mapa-kontener.powiekszona { width: 95vw; height: 75vh; bottom: 2.5vh; right: 2.5vw; }
}