/* Compact map controls and marker rows; colors inherit the existing themes. */
:root {
    --ui-accent: var(--accent-secondary);
    --ui-hover: var(--bg-glass);
    --ui-selected: var(--bg-glass);
    --header-control-height: 36px;
}

.header { gap: 24px; }
.header .map-nav__trigger {
    border-radius: 8px;
    box-shadow: none;
}
.header .controls { gap: 8px; }
.header :is(#profileSelector, #toolsDropdownBtn, #toggleCoordsBtn, #centerCoordsBtn, #imHereBtn, #dayzCoordsInput, #projectNewsButton, .profile-actions > summary) {
    box-sizing: border-box;
    height: var(--header-control-height) !important;
    min-height: var(--header-control-height) !important;
}
.header .controls button:not(.help-btn),
.sidebar button, .markers-empty button,
.header .profile-actions > summary {
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    box-shadow: none !important;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.header .controls button:not(.help-btn):hover,
.sidebar button:hover, .markers-empty button:hover,
.header .profile-actions > summary:hover {
    transform: none;
}
.header .controls button::before { content: none; }
.header .profile-actions > summary, .markers-empty button {
    background: var(--bg-glass);
    color: var(--text-secondary);
}
.header .profile-actions > summary:hover, .markers-empty button:hover {
    border-color: var(--accent-secondary);
    color: var(--text-primary);
}
.header .controls input, .sidebar input[type="text"] {
    min-height: 36px;
    border-radius: 6px;
    border: 1px solid var(--border-primary);
    box-shadow: none;
}
.header :is(button, summary):focus-visible,
.sidebar :is(button, summary, input, .marker-item):focus-visible {
    outline: 2px solid var(--ui-accent);
    outline-offset: 3px;
}
.header button[hidden], .sidebar button[hidden],
.active-filters-count[hidden] { display: none !important; }
.header button:disabled, .sidebar button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Keep the original profile buttons and permission guards inside a disclosure. */
.profile-actions { position: relative; flex: 0 0 auto; }
.header .profile-actions > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    cursor: pointer;
    list-style: none;
}
.profile-actions > summary::-webkit-details-marker { display: none; }
.profile-actions[open] > summary { border-color: var(--ui-accent); }
.profile-actions__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    max-width: calc(100vw - 32px);
    max-height: min(440px, 65vh);
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    background: var(--bg-card);
    box-shadow: var(--shadow-lg);
    z-index: 1001;
}
.header .controls .profile-actions__panel > button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 38px;
    padding: 8px 10px;
    border-color: transparent;
    background: transparent !important;
    text-align: left;
    white-space: normal;
}
.profile-actions__panel > button > span {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}
.profile-actions__panel .profile-action-icon { flex: 0 0 18px; }
.header .controls .profile-actions__panel > button:not(:is(#deleteProfileBtn, #leaveProfileBtn)):is(:hover, :focus-visible) {
    border-color: var(--accent-secondary);
    color: var(--accent-secondary);
    background: color-mix(in srgb, var(--accent-secondary) 12%, transparent) !important;
    transform: none;
}
.header .controls .profile-actions__panel #deleteProfileBtn,
.header .controls .profile-actions__panel #leaveProfileBtn {
    color: var(--accent-danger);
}
.header .controls .profile-actions__panel > :is(#deleteProfileBtn, #leaveProfileBtn):is(:hover, :focus-visible) {
    border-color: var(--accent-danger);
    background: color-mix(in srgb, var(--accent-danger) 12%, transparent) !important;
    transform: none;
}

/* Search first; syntax, history and filters are available on demand. */
.sidebar { padding: 16px 12px; }
.markers-search { gap: 8px; padding: 0 0 16px; border-bottom: 1px solid var(--border-primary); }
.search-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
    color: var(--text-secondary);
}
.search-heading .search-hint-v1 { position: relative; margin: 0; padding: 0; }
.search-heading .search-hint-v1 summary {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    list-style: none;
    border: 1px solid var(--border-primary);
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
}
.search-heading summary::-webkit-details-marker { display: none; }
.search-heading .search-hint {
    position: absolute;
    top: 32px;
    right: 0;
    width: 270px;
    max-width: calc(100vw - 44px);
    padding: 12px;
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    background: var(--bg-card);
    box-shadow: var(--shadow-md);
    z-index: 15;
}
.sidebar #searchMarkers { width: 100%; padding: 10px 12px; }
.sidebar .search-history-section { margin-top: 8px; }
.sidebar .search-history-section summary { color: var(--text-secondary); }
.search-filters { margin-top: 0; }
.search-filters > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    background: var(--bg-glass);
    color: var(--text-secondary);
    cursor: pointer;
    list-style: none;
}
.search-filters > summary:hover,
.search-filters[open] > summary { border-color: var(--accent-secondary); }
.search-filters > summary::-webkit-details-marker { display: none; }
.search-filters > summary::after {
    content: '';
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    margin-left: auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
}
.search-filters[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.active-filters-count {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 5px;
    background: var(--ui-selected);
    color: var(--text-primary);
}
.search-filters .marker-search-filters { margin-top: 8px; }
.sidebar .search-buttons { margin-top: 0; }
.sidebar .search-buttons #searchBtn { width: 100%; }
.sidebar .markers-list { min-width: 0; padding: 0; overflow-x: hidden; }
.sidebar .sort-controls { flex-direction: row; align-items: center; gap: 8px; margin: 14px 0 8px; }
.sidebar .sort-controls h3 { flex: 1; min-width: 0; flex-wrap: wrap; margin: 0; color: var(--text-primary); font-size: 16px; font-weight: 600; line-height: 1.4; }
.sidebar #markersCounter { margin-left: 6px !important; color: var(--text-muted) !important; }
.sidebar .sort-buttons { flex-shrink: 0; grid-template-columns: repeat(3, 44px); width: auto; gap: 4px; }
.sidebar .sort-btn { min-height: 28px; padding: 4px 8px; }
.sidebar .sort-direction-icon { left: auto; right: 2px; width: 9px; }

/* The three-line layout also fits the existing 82px virtual row pitch. */
.sidebar .marker-item {
    min-height: 74px;
    padding: 8px 10px;
    gap: 8px;
    border-left: 3px solid var(--marker-color, var(--accent-primary)) !important;
    border-radius: 6px;
    box-shadow: none;
    backdrop-filter: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.sidebar .marker-item:hover { transform: none; }
.sidebar .marker-item.selected {
    border-left-width: 3px !important;
    box-shadow: none;
    animation: none !important;
    transform: none;
}
.marker-item__body { min-width: 0; flex: 1; }
.sidebar .marker-item .coords {
    margin-top: 3px;
}
.sidebar .marker-item__icon { width: 14px; height: 14px; flex-basis: 14px; }
.sidebar .marker-item .delete {
    flex: 0 0 28px;
    min-height: 28px;
    padding: 2px;
    opacity: 0;
    background: transparent !important;
    color: var(--text-primary);
}
.sidebar .marker-item:is(:hover, :focus-within) .delete { opacity: 1; }
.sidebar .marker-item .delete:hover { color: var(--accent-danger); border-color: var(--accent-danger); }
.markers-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 36px 12px;
    text-align: center;
    color: var(--text-muted);
}
.markers-empty > svg { width: 36px; height: 36px; margin-bottom: 16px; opacity: 0.6; }
.markers-empty > strong { color: var(--text-primary); }
.markers-empty p { max-width: 240px; margin: 8px 0 18px; }
.markers-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.markers-empty .markers-empty__conditions { overflow-wrap: anywhere; color: var(--text-secondary); }
.first-marker-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid var(--accent-secondary);
    border-radius: var(--radius-sm);
    background: var(--bg-glass);
    color: var(--text-secondary);
}
.first-marker-hint span { flex: 1; min-width: 0; }
.first-marker-hint[hidden] { display: none; }
.sidebar .first-marker-hint button { flex: 0 0 28px; min-height: 28px; padding: 2px; }
#markerUndoNotifications {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: max-content;
    max-width: calc(100vw - 32px);
    max-height: 40vh;
    overflow-y: auto;
    z-index: 10010;
}
.marker-undo-notification {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--accent-secondary);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    color: var(--text-primary);
    box-shadow: var(--shadow-md);
}
.marker-undo-notification span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.marker-undo-notification button {
    flex-shrink: 0;
    padding: 6px 10px;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    background: var(--bg-glass);
    color: var(--text-primary);
    cursor: pointer;
}
.marker-undo-notification button:hover { border-color: var(--accent-secondary); color: var(--accent-secondary); }
.marker-undo-notification button:focus-visible { outline: 2px solid var(--accent-secondary); outline-offset: 2px; }
@media (max-width: 768px) {
    #markerUndoNotifications { bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
}
@media (hover: none) {
    .sidebar .marker-item .delete { opacity: 1; }
}
@media (max-width: 768px) {
    :root { --header-control-height: 44px; }

    .profile-actions__panel { position: static; width: 100%; margin-top: 8px; box-shadow: none; }
    .profile-actions[open] { width: 100%; }
    .profiles-controls:has(.profile-actions[open]) { flex-wrap: wrap; }
}