/* --- GLOBAL & LAYOUT STYLES --- */
html, body {
    height: 100%; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; overflow: hidden;
}
#app-container { display: flex; flex-direction: column; height: 100vh; }
#header { background-color: #f8f9fa; padding: 0 15px; border-bottom: 1px solid #dee2e6; box-shadow: 0 2px 4px rgba(0,0,0,0.1); z-index: 2000; display: flex; align-items: center; height: 50px; flex-shrink: 0; }
#header-toggle { font-size: 24px; cursor: pointer; padding: 5px 10px; margin-right: 15px; border-radius: 4px; }
#header-toggle:hover { background-color: #e9ecef; }
#header h1 { margin: 0; font-size: 1.2em; color: #333; }
#main-content { display: flex; flex-grow: 1; position: relative; }

/* --- SIDEBAR STYLES --- */
#sidebar { background: #fff; z-index: 1900; display: flex; flex-direction: column; transition: transform 0.3s ease-in-out; }
#sidebar-header { padding: 15px; border-bottom: 1px solid #eee; }
#sidebar-header h2 { margin: 0; font-size: 1.2em; }
#layer-tree-container { flex-grow: 1; overflow-y: auto; padding: 10px 0; }

/* --- NEW: TREEVIEW SIDEBAR STYLES --- */
.layer-tree ul { list-style-type: none; padding-left: 20px; }
.layer-tree li { padding: 4px 0; }
.tree-category-header { display: flex; align-items: center; cursor: pointer; font-weight: bold; }
.tree-category-header:hover { background-color: #f0f0f0; }
.tree-toggle {
    width: 20px; text-align: center; font-family: monospace; font-size: 1.2em;
    margin-right: 5px; transition: transform 0.2s;
}
.tree-toggle.collapsed { transform: rotate(-90deg); }
.tree-child-layers { display: block; }
.tree-child-layers.collapsed { display: none; }
.layer-item label { cursor: pointer; display: flex; align-items: center; width: 100%; font-size: 0.9em; font-weight: normal; }
.layer-item input, .tree-category-header input { margin-right: 10px; }
.layer-item .color-box { width: 16px; height: 16px; margin-right: 8px; border: 1px solid #999; display: inline-block; flex-shrink: 0; }

/* --- MAP & OVERLAY STYLES --- */
#map-container { flex-grow: 1; position: relative; }
#map { height: 100%; width: 100%; background-color: #ddd; }
#loading-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.7); display: flex; justify-content: center; align-items: center; font-size: 1.2em; color: #555; z-index: 1000; visibility: hidden; transition: visibility 0s, opacity 0.2s linear; opacity: 0; }
.leaflet-popup-content { max-height: 280px; overflow-y: auto; font-size: 0.9em; }
.popup-table { width: 100%; border-collapse: collapse; }
.popup-table td { padding: 4px; border-bottom: 1px solid #eee; }
.popup-table td:first-child { font-weight: bold; width: 90px; color: #555; }

/* --- RESPONSIVE DESIGN --- */
@media (max-width: 768px) {
    #sidebar { position: absolute; width: 85%; max-width: 300px; height: 100%; transform: translateX(-100%); box-shadow: 2px 0 5px rgba(0,0,0,0.2); }
    #sidebar.open { transform: translateX(0); }
}
@media (min-width: 769px) {
    #sidebar { position: relative; width: 300px; flex-shrink: 0; transform: translateX(0); box-shadow: 2px 0 5px rgba(0,0,0,0.1); }
    #sidebar.collapsed { transform: translateX(-100%); }
}