/**
 * DataHome 3D Map Application
 * Main CSS - Global Styles Only
 * @version 1.0.0
 * 
 * Note: Component and layout styles are loaded separately in index.html
 * This file contains only global resets and base styles.
 */

/* ===== GLOBAL RESET ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-family);
    font-optical-sizing: auto;
    font-style: normal;
}

/* ===== BODY ===== */
body {
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    background: var(--color-background);
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
}

/* ===== MAP CONTAINERS ===== */
#map-2d,
#map-3d {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-index-map);
}

/* ===== LEFT PANEL ===== */
#left-panel {
    position: absolute;
    top: var(--space-xl);
    left: var(--space-xl);
    z-index: var(--z-index-panel);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-width: 360px;
}

/* ===== UTILITY CLASSES ===== */
.loading {
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

/* ===== HIDE DEFAULT MAP CONTROLS ===== */
.leaflet-control-zoom {
    display: none !important;
}

.maplibregl-ctrl-top-right,
.maplibregl-ctrl-top-left,
.maplibregl-ctrl-bottom-right,
.maplibregl-ctrl-bottom-left {
    display: none !important;
}

.maplibregl-ctrl-attrib {
    display: none !important;
}

.leaflet-control-attribution {
    display: none !important;
}

.leaflet-bottom.leaflet-right {
    display: none !important;
}

.control-btn.active {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-white);
}

#toggle-view {
    font-weight: 600;
}