/* ==========================================================================
   Pee Map — full page (/peemap) and the dashboard preview card
   ========================================================================== */

.peemap-layout {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.peemap-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.peemap-title {
    font-family: var(--font-primary);
    font-size: 1.8rem;
    color: var(--text-primary);
    margin: 0;
}

.peemap-subtitle {
    margin: 4px 0 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.peemap-view-tabs {
    display: flex;
    gap: 6px;
    background: var(--bg-secondary);
    padding: 4px;
    border-radius: var(--border-radius);
}

.peemap-tab {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-secondary);
    font-weight: 600;
    font-size: 0.88rem;
    padding: 7px 16px;
    border-radius: calc(var(--border-radius) - 4px);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.peemap-tab:hover { color: var(--text-primary); }

.peemap-tab.active {
    background: var(--card-bg);
    color: var(--primary);
    box-shadow: var(--shadow-sm);
}

/* Each view owns its internal rhythm; .peemap-layout only spaces the header
   from the view. switchView() toggles inline display:none / '', so the flex
   value here is what a visible view falls back to. */
.peemap-view {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

/* ---------------------------------------------------------------- controls */

.peemap-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Native select chrome ignores most inherited styling, so the arrow is drawn
   as a background image and the OS one suppressed. */
.peemap-select {
    appearance: none;
    -webkit-appearance: none;
    font-family: var(--font-secondary);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-primary);
    background-color: var(--card-bg);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b5f8a' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 0 34px 0 14px;
    cursor: pointer;
    min-width: 0;
    /* Shared control height: the select and the toggle sit side by side, and
       padding alone left them 2px apart because their font sizes differ. */
    height: 38px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.peemap-select:hover { border-color: var(--primary-light); }

.peemap-select:focus-visible {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.18);
}

.peemap-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.88rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0 14px;
    height: 38px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--card-bg);
    user-select: none;
}

.peemap-toggle input { accent-color: var(--primary); margin: 0; }

.peemap-toggle:has(input:checked) {
    border-color: var(--primary);
    color: var(--primary);
}

.peemap-count {
    margin-left: auto;
    font-size: 0.82rem;
    color: var(--text-light);
    white-space: nowrap;
}

.peemap-hint {
    font-size: 0.84rem;
    color: var(--text-light);
    padding: 0 2px;
}

/* -------------------------------------------------------------------- map */

.peemap-map-wrap {
    position: relative;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
}

.peemap-map {
    width: 100%;
    height: 62vh;
    min-height: 380px;
    background: var(--bg-secondary);
}

.peemap-locate-btn {
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 400; /* above Leaflet panes, below its popups (700) */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: var(--shadow-md);
}

/* Shown in place of the map when Leaflet itself could not be loaded. */
.peemap-map-error {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 24px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Leaflet's own chrome, nudged toward the app's look */
.leaflet-container {
    font-family: var(--font-secondary);
}

.leaflet-popup-content-wrapper {
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
}

/* ------------------------------------------------------------------ popup */

.peemap-popup { min-width: 180px; }

.peemap-popup-owner {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--primary);
    margin-bottom: 4px;
}

.peemap-popup-intent,
.peemap-list-intent {
    display: inline-block;
    font-weight: 700;
    font-size: 0.78rem;
    padding: 2px 9px;
    border-radius: 999px;
}

.peemap-popup-intent.is-accident,
.peemap-list-intent.is-accident {
    background: rgba(224, 93, 93, 0.14);
    color: #c0392b;
}

.peemap-popup-intent.is-purpose,
.peemap-list-intent.is-purpose {
    background: rgba(91, 127, 224, 0.14);
    color: #3b5bbf;
}

.peemap-popup-method,
.peemap-list-method {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

.peemap-popup-tags,
.peemap-list-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.peemap-popup-note,
.peemap-list-note {
    margin: 6px 0 0;
    font-size: 0.86rem;
    color: var(--text-primary);
    word-break: break-word;
}

.peemap-popup-photo {
    display: block;
    max-width: 200px;
    border-radius: var(--border-radius);
    margin-top: 8px;
}

.peemap-popup-when,
.peemap-list-when {
    display: block;
    margin-top: 8px;
    color: var(--text-light);
    font-size: 0.76rem;
}

.peemap-popup-approx {
    margin-top: 6px;
    font-size: 0.75rem;
    color: var(--text-light);
    font-style: italic;
}

.peemap-popup-shared {
    margin-top: 6px;
    font-size: 0.76rem;
    color: var(--secondary);
    font-weight: 600;
}

.peemap-popup-actions {
    display: flex;
    gap: 6px;
    margin-top: 10px;
}

.peemap-popup-btn {
    flex: 1;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-primary);
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.peemap-popup-btn:hover { background: var(--bg-secondary); }

.peemap-popup-btn.danger { color: var(--error-color); }

.peemap-popup-btn.danger:hover { background: rgba(229, 62, 62, 0.08); }

/* ------------------------------------------------------------------- chips */

.peemap-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

.peemap-chip.selectable {
    cursor: pointer;
    border: 1px solid var(--border-color);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.peemap-chip.selectable:hover { background: var(--gray-light); }

.peemap-chip.selectable input { margin: 0; accent-color: var(--primary); }

.peemap-chip.selectable:has(input:checked) {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* -------------------------------------------------------------------- list */

.peemap-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.peemap-list-item {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 14px 16px;
    cursor: pointer;
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.peemap-list-item:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.peemap-list-main {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.peemap-list-shared {
    margin-left: auto;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--secondary);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ------------------------------------------------------------------- stats */

.peemap-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
}

.peemap-stat-tile {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Labels run to one or two lines depending on the string. Anchoring to the
       top puts every number on the same baseline across a row and lets the
       labels hang below; centring instead shifts the numbers up and down. */
    justify-content: flex-start;
    gap: 6px;
    min-height: 96px;
}

.peemap-stat-value {
    font-family: var(--font-primary);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.peemap-stat-label {
    font-size: 0.78rem;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.3;
    text-wrap: balance;
}

.peemap-stat-breakdown {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.peemap-stat-block {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 16px;
}

.peemap-stat-block h4 {
    margin: 0 0 12px;
    font-family: var(--font-primary);
    font-size: 1rem;
    color: var(--text-primary);
}

.peemap-bar-row {
    display: grid;
    grid-template-columns: minmax(90px, 1fr) 2fr 3ch;
    align-items: center;
    gap: 10px;
    margin-bottom: 7px;
    font-size: 0.82rem;
}

.peemap-bar-row:last-child { margin-bottom: 0; }

.peemap-bar-label {
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.peemap-bar {
    display: block;
    height: 7px;
    border-radius: 999px;
    background: var(--bg-secondary);
    overflow: hidden;
}

.peemap-bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--gradient-primary);
}

/* Fixed 3ch column + tabular figures so the counts line up in a straight
   right edge instead of drifting with the digit count. */
.peemap-bar-count {
    color: var(--text-light);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* ------------------------------------------------------------------ dialog */

.peemap-dialog {
    border: none;
    border-radius: var(--border-radius-lg);
    padding: 0;
    background: var(--card-bg);
    color: var(--text-primary);
    box-shadow: var(--shadow-2xl);
    max-width: 460px;
    width: calc(100% - 32px);
    /* The global `* { margin: 0 }` reset in styles.css wipes out the UA
       stylesheet's `margin: auto`, which is what centres a modal <dialog>.
       Without this the dialog sticks to the top-left corner. */
    margin: auto;
}

.peemap-dialog::backdrop {
    background: rgba(26, 32, 44, 0.55);
    backdrop-filter: blur(3px);
}

/* Header / scrolling body / footer. Only .peemap-dialog-body scrolls, which
   keeps the action row out of the scroll flow entirely. */
.peemap-dialog form {
    display: flex;
    flex-direction: column;
    max-height: 82vh;
    min-height: 0;
}

.peemap-dialog-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 24px;
    overflow-y: auto;
    min-height: 0;
    flex: 1 1 auto;
    overscroll-behavior: contain;
}

.peemap-dialog h3 {
    margin: 0;
    padding: 22px 24px 0;
    font-family: var(--font-primary);
    font-size: 1.25rem;
    flex: 0 0 auto;
}

.peemap-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: none;
    padding: 0;
    margin: 0;
    font-size: 0.86rem;
    color: var(--text-secondary);
}

.peemap-field > span,
.peemap-field > legend {
    font-weight: 600;
    color: var(--text-primary);
    padding: 0;
}

/* A <legend> is pulled out of the fieldset's flex flow, so the container's
   `gap` never applies between it and the first control. Restate it as a margin
   so fieldsets and <label> fields share the same label-to-control rhythm. */
.peemap-field > legend {
    display: block;
    width: 100%;
    margin-bottom: 6px;
}

.peemap-field input[type="datetime-local"],
.peemap-field select,
.peemap-field textarea,
.peemap-field input[type="file"] {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: var(--font-secondary);
    font-size: 0.9rem;
}

.peemap-field textarea { resize: vertical; }

.peemap-intent-choice {
    display: flex;
    gap: 10px;
}

.peemap-radio {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.88rem;
    color: var(--text-primary);
    cursor: pointer;
}

.peemap-radio input { accent-color: var(--primary); }

.peemap-tag-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.peemap-privacy-field {
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    padding: 12px 14px;
    gap: 8px;
}

/* The panel's own top padding already separates the legend from the radios;
   keeping the 6px margin on top of it would double the gap. */
.peemap-privacy-field > legend { margin-bottom: 0; }

.peemap-privacy-note {
    margin: 2px 0 0;
    font-size: 0.78rem;
    color: var(--text-light);
}

.peemap-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex: 0 0 auto;
    padding: 14px 24px 18px;
    border-top: 1px solid var(--border-color);
}

.peemap-form-error {
    color: var(--error-color);
    font-size: 0.84rem;
    padding: 12px 24px 0;
    flex: 0 0 auto;
}

/* ==========================================================================
   Dashboard preview card
   ========================================================================== */

#peemap-card .card-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Must stay visually identical to .gallery-private-tag in dashboard.css:
   both sit in a card header on the same dashboard row. */
.peemap-private-tag {
    display: inline-flex;
    align-items: center;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.6;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--gray);
    color: #fff;
    margin-left: 0.4rem;
    vertical-align: middle;
}

.peemap-mini-map {
    width: 100%;
    height: 180px;
    border-radius: var(--border-radius);
    background: var(--bg-secondary);
    overflow: hidden;
}

/* The preview is a picture, not a tool: no dragging, no click-to-pin. */
.peemap-mini-map .leaflet-container { cursor: default; }

/* Equal columns so the three numbers sit on a shared grid rather than being
   pushed around by the width of the label under each one. */
.peemap-mini-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.peemap-mini-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
}

.peemap-mini-value {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--primary);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.peemap-mini-label {
    font-size: 0.72rem;
    color: var(--text-secondary);
    line-height: 1.25;
}

/* ------------------------------------------------------------- dark mode */

[data-theme="dark"] .peemap-popup-intent.is-accident,
[data-theme="dark"] .peemap-list-intent.is-accident {
    background: rgba(224, 93, 93, 0.22);
    color: #ff9e9e;
}

[data-theme="dark"] .peemap-popup-intent.is-purpose,
[data-theme="dark"] .peemap-list-intent.is-purpose {
    background: rgba(91, 127, 224, 0.22);
    color: #a8bcff;
}

/* Raster tiles are bright white against the dark theme; take the edge off
   without washing out the labels. */
[data-theme="dark"] .peemap-map,
[data-theme="dark"] .peemap-mini-map {
    filter: brightness(0.82) contrast(1.05);
}

[data-theme="dark"] .leaflet-popup-content-wrapper,
[data-theme="dark"] .leaflet-popup-tip {
    background: var(--card-bg);
    color: var(--text-primary);
}

/* The inlined arrow SVG has a baked-in fill, so it needs a light variant. */
[data-theme="dark"] .peemap-select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23a090c0' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------- responsive */

@media (max-width: 900px) {
    .peemap-map { height: 56vh; }
}

@media (max-width: 700px) {
    .peemap-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .peemap-title { font-size: 1.5rem; }

    .peemap-view-tabs { width: 100%; }
    .peemap-tab { flex: 1; padding: 9px 8px; }

    /* Two selects per row, the toggle spanning full width underneath: the
       labels are long enough that a single column wastes a lot of height. */
    .peemap-controls {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .peemap-select {
        width: 100%;
        font-size: 0.82rem;
        padding: 0 28px 0 12px;
        background-position: right 10px center;
    }

    .peemap-select,
    .peemap-toggle { height: 40px; }

    .peemap-toggle,
    .peemap-count {
        grid-column: 1 / -1;
    }

    .peemap-toggle { justify-content: flex-start; }

    .peemap-count {
        margin-left: 0;
        text-align: right;
    }

    .peemap-map { height: 60vh; min-height: 320px; }

    /* Leaflet's zoom control sits top-left, so keep Locate me clear of it. */
    .peemap-locate-btn {
        right: 8px;
        top: 8px;
        font-size: 0.78rem;
        padding: 7px 10px;
    }

    .peemap-stat-grid { grid-template-columns: repeat(2, 1fr); }
    .peemap-stat-value { font-size: 1.5rem; }
    .peemap-stat-breakdown { grid-template-columns: 1fr; }
    .peemap-bar-row { grid-template-columns: minmax(64px, 1fr) 1.3fr auto; }

    .peemap-list-shared { margin-left: 0; }

    /* Full-height sheet rather than a floating box: easier to reach on a phone
       and the tag picker + privacy block need the room. */
    .peemap-dialog {
        max-width: none;
        width: 100%;
        margin: auto auto 0;
        border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
    }

    /* Tall enough that the German strings (noticeably longer than the English
       ones) still fit without the body needing to scroll. */
    .peemap-dialog form { max-height: 92vh; }

    .peemap-dialog h3 { padding: 18px 18px 0; }

    /* Compact the pin form so it fits a phone screen in one view instead of
       being something you scroll around in. When + Method pair up on the top
       row; everything else spans the full width. */
    .peemap-dialog-body {
        padding: 8px 16px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        align-content: start;
    }

    .peemap-dialog-body > * { grid-column: 1 / -1; }

    .peemap-dialog-body > .peemap-field:nth-child(1),
    .peemap-dialog-body > .peemap-field:nth-child(2) { grid-column: auto; }

    /* Tighter tag chips: eight of them at the desktop size took up a third of
       the sheet on their own. */
    .peemap-tag-picker { gap: 5px; }

    /* rows="3" wins over min-height, so set the height outright. Still
       resizable by drag if someone wants to write more. */
    .peemap-field textarea {
        height: 44px;
        min-height: 44px;
    }

    /* iOS Safari zooms the whole page in when a focused form control has a
       font-size below 16px, and once zoomed the page pans in every direction.
       16px is the threshold, so every control in the dialog sits on it.
       These mirror the attribute selectors used in the base rule: a bare
       `.peemap-field input` loses to `.peemap-field input[type="..."]` on
       specificity no matter where it appears in the file. */
    .peemap-field input[type="datetime-local"],
    .peemap-field input[type="file"],
    .peemap-field select,
    .peemap-field textarea,
    .peemap-select {
        font-size: 16px;
    }

    /* Both choices fit on one row at this width; stacking them was pure height. */
    .peemap-intent-choice { flex-direction: row; gap: 8px; }
    .peemap-intent-choice .peemap-radio { flex: 1; }

    /* Same for the two privacy options. The legend and the explanatory note
       still span the full width. */
    .peemap-privacy-field {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        padding: 8px 12px;
    }

    .peemap-privacy-field > legend,
    .peemap-privacy-note { grid-column: 1 / -1; }

    .peemap-dialog-actions {
        padding: 12px 18px calc(14px + env(safe-area-inset-bottom));
    }

    .peemap-dialog-actions .nav-btn { flex: 1; }

    .peemap-form-error { padding: 10px 18px 0; }

    /* Still a comfortable tap target, but small enough that eight of them
       don't dominate the sheet. */
    .peemap-chip.selectable {
        padding: 6px 11px;
        font-size: 0.76rem;
        min-height: 32px;
    }

    .peemap-radio { min-height: 30px; }

    .peemap-privacy-note { font-size: 0.72rem; }

    .peemap-mini-map { height: 150px; }
}

/* Only genuinely narrow phones (<=iPhone SE) drop to one control per row;
   375 px devices still fit two comfortably. */
@media (max-width: 340px) {
    .peemap-controls { grid-template-columns: 1fr; }
    .peemap-stat-grid { grid-template-columns: 1fr; }
    .peemap-locate-btn span { display: none; }
}