/**
 * UI theme tokens for the map shell (not map tiles).
 * Compact is a narrower, tighter sidebar. Map tile style stays in site_map_setting.style.
 */
body.theme-default {
    --theme-font-family: 'Kumbh Sans', sans-serif;
    --theme-sidebar-width: 380px;
    --theme-sidebar-min-width: 320px;
    --theme-sidebar-max-width: 420px;
    --theme-sidebar-bg: #fff;
    --theme-sidebar-header-bg: #f8f9fa;
    --theme-sidebar-title-color: #1a1a2e;
    --theme-accent: #4c6ef5;
}

body.theme-compact {
    --theme-font-family: 'Kumbh Sans', sans-serif;
    --theme-sidebar-width: 300px;
    --theme-sidebar-min-width: 260px;
    --theme-sidebar-max-width: 320px;
    --theme-sidebar-bg: #fff;
    --theme-sidebar-header-bg: #f4f6f8;
    --theme-sidebar-title-color: #1a1a2e;
    --theme-accent: #4c6ef5;
}

body.theme-stacked {
    --theme-font-family: 'Kumbh Sans', sans-serif;
    --theme-sidebar-width: 380px;
    --theme-sidebar-min-width: 320px;
    --theme-sidebar-max-width: 420px;
    --theme-sidebar-bg: #fff;
    --theme-sidebar-header-bg: #f8f9fa;
    --theme-sidebar-title-color: #1a1a2e;
    --theme-accent: #4c6ef5;
}

/* Compact: tighter chrome. Do not set .left-panel width here (mobile .slide-panel 60% must win). */
body.theme-compact .left-panel #site-title {
    font-size: 1rem;
    margin-bottom: 2px;
}

body.theme-compact .left-panel .sidebar-header {
    padding: 10px 12px;
    gap: 8px;
}

body.theme-compact .left-panel .sidebar-description {
    padding: 10px 12px;
    font-size: 0.8rem;
    max-height: 120px;
}

body.theme-compact .left-panel .sidebar-search {
    padding: 10px 12px;
}

body.theme-compact .left-panel .sidebar-search #search-input {
    height: 34px;
    font-size: 0.82rem;
    border-radius: 6px;
}

body.theme-compact .left-panel .sidebar-section-title {
    padding: 10px 12px;
    font-size: 0.85rem;
}

body.theme-compact .left-panel .layers-info,
body.theme-compact .left-panel .category-layers-info,
body.theme-compact .left-panel #other-layers-info {
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 10px;
}

body.theme-compact .left-panel .chart-info {
    margin: 10px 12px;
    padding-top: 10px;
}

body.theme-compact .left-panel .sidebar-total-value {
    padding: 8px 12px;
    font-size: 0.8rem;
}

body.theme-compact .left-panel .sidebar-footer {
    padding: 10px 12px;
    font-size: 0.7rem;
}

body.theme-compact .left-panel .sidebar-data-input-wrap {
    padding: 10px 12px;
}

body.theme-compact .left-panel .sidebar-data-input-btn {
    font-size: 0.85rem;
    padding: 8px 10px;
}

body.theme-compact .left-panel .density-map-btn {
    font-size: 0.75rem !important;
    padding: 5px 8px !important;
}

@media (min-width: 769px) {
    body.theme-compact .filter-drawer {
        width: min(var(--theme-sidebar-width), 92vw);
    }
}

/* Stacked: attribute filters sit under Category as a sidebar section. */
body.theme-stacked .left-panel .search-filter-btn {
    display: none !important;
}

body.theme-stacked .sidebar-filters .filter-inline-slot,
body.theme-stacked #filter-inline-slot {
    margin-top: 8px;
}

body.theme-stacked .filter-drawer.filter-drawer--stacked,
body.theme-stacked .filter-drawer.filter-drawer--stacked.is-open {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    max-height: none;
    transform: none;
    box-shadow: none;
    z-index: auto;
    pointer-events: auto;
    display: flex;
    border: none;
    border-radius: 0;
    background: transparent;
}

body.theme-stacked .filter-drawer.filter-drawer--stacked .filter-drawer-header {
    display: none;
}

body.theme-stacked .filter-drawer.filter-drawer--stacked .filter-chips,
body.theme-stacked .filter-drawer.filter-drawer--stacked .filter-result-count {
    padding-left: 18px;
    padding-right: 18px;
}

body.theme-stacked .filter-drawer.filter-drawer--stacked .filter-drawer-body {
    max-height: 40vh;
    padding-left: 18px;
    padding-right: 18px;
}

body.theme-stacked .filter-drawer.filter-drawer--stacked .filter-drawer-footer {
    padding: 8px 18px 14px;
    border-top: none;
    background: transparent;
}

body.theme-stacked .filter-backdrop {
    display: none !important;
}