/* ---- Collapsible sidebar panels ---- */

.map-control-panel h3.map-panel-header {
    cursor: pointer;
    user-select: none;
    justify-content: flex-start;
}

.map-control-panel h3.map-panel-header:hover .map-panel-chevron,
.map-control-panel h3.map-panel-header:focus-visible .map-panel-chevron {
    color: var(--accent);
}

.map-panel-chevron {
    margin-left: auto;
    font-size: 0.68rem;
    color: var(--muted);
    transition: transform 0.16s ease, color 0.12s linear;
    flex: 0 0 auto;
}

.map-control-panel.collapsed .map-panel-chevron {
    transform: rotate(-90deg);
}

/* The body wrapper exists only so a panel can collapse; display: contents keeps
   the children participating in the panel's own flex/grid layout (and its gap
   spacing) exactly as if the wrapper were not there. */

.map-panel-body {
    display: contents;
}

.map-control-panel.collapsed .map-panel-body {
    display: none;
}

.map-control-panel.collapsed > h3 {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.map-control-panel.map-layers-panel.collapsed {
    min-height: 0;
}

.map-panel-chip {
    margin-left: 8px;
    padding: 1px 7px;
    border: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.3);
    color: var(--muted);
    font-family: var(--font-code);
    font-size: 0.64rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: none;
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 1 auto;
}

.map-control-panel:not(.collapsed) .map-panel-chip {
    display: none;
}

/* Minimap Sync sub-section collapse (inside Player Position) */

.map-minimap-sync-heading.map-panel-header {
    cursor: pointer;
    user-select: none;
}

.map-minimap-sync.collapsed .map-minimap-sync-body {
    display: none;
}

.map-minimap-sync-body {
    display: contents;
}