/* ===== Leaflet popup chrome ===== */

.leaflet-popup-content-wrapper {
    background: var(--panel) !important;
    border: 2px solid var(--border2) !important;
    border-radius: var(--radius) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.6) !important;
    padding: 0 !important;
    overflow: hidden;
}

.leaflet-popup-content {
    margin: 0 !important;
    width: auto !important;
}

.leaflet-popup-tip-container {
    display: none;
}

.leaflet-popup-close-button {
    display: none !important;
}

.pu-leaflet .leaflet-popup-tip-container {
    display: block;
    height: 10px;
    overflow: hidden;
    margin-top: -2px;
}

.pu-leaflet .leaflet-popup-tip {
    width: 14px;
    height: 14px;
    margin: -8px auto 0;
    background: var(--panel) !important;
    box-shadow: 2px 2px 0 0 var(--border2) !important;
    transform: rotate(45deg);
}


/* ===== Popup wrapper ===== */

.pu-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
}


/* ===== Nav bar — shared by both tabs =====
 *
 * 3-column grid: left (1fr) | center (auto) | right (1fr)
 * Equal 1fr columns guarantee the center group is always mathematically
 * centered regardless of left/right content width.
 *
 *   Left   (.pu-nav-left)  — logo flush-left, title flush-right toward arrows.
 *   Center (.pu-nav-group) — arrow buttons + counter, auto-width.
 *   Right  (.pu-nav-right) — close button flush-right.
 */

.pu-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    background: var(--panel2);
    border-bottom: 1px solid var(--border);
    min-height: 34px;
}

.pu-nav-left {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
}

.pu-brand-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.pu-brand-logo,
.pu-brand-osm {
    height: 20px;
    width: auto;
}

.pu-brand-logo {
    object-fit: contain;
    pointer-events: none;
    flex-shrink: 0;
}

/* OSM icon is square — explicit size prevents aspect-ratio stretch */
.pu-brand-osm {
    padding-left: 5px;
}

.pu-nav-title {
    font-family: var(--ff-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text2);
    white-space: nowrap;
}

.pu-nav-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pu-nav-btn {
    width: 24px;
    height: 24px;
    color: var(--text2);
}

    .pu-nav-btn:hover {
        color: var(--text);
    }

.pu-nav-label {
    font-size: 11px;
    font-family: var(--ff-mono);
    color: var(--text2);
    min-width: 42px;
    text-align: center;
}

.pu-nav-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    padding-right: 6px;
}

.pu-close-btn {
    background: none;
    border: none;
    color: var(--text3);
    width: 24px;
    height: 24px;
    border-radius: 3px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .15s, background .15s;
    flex-shrink: 0;
}

    .pu-close-btn:hover {
        color: var(--text);
        background: rgba(255,255,255,.06);
    }


/* Popup nav "previous" chevron — flip horizontally to point left */
.icon-prev {
    transform: rotate(180deg);
}


/* ===== SNCF data rows + Signal Node badge — shared base =====
 *
 * Both are horizontal flex rows with the same label/value alignment.
 *   .pu-row        — flush with body padding, separated by bottom borders.
 *   .pu-node-badge — tinted pill with its own margin and border-radius.
 */

.pu-row,
.pu-node-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 3px 0 3px 10px;
    font-size: 11px;
}

.pu-row {
    border-bottom: 1px solid var(--border);
}

    .pu-row:last-child {
        border-bottom: none;
    }

.pu-node-badge {
    width: 100%;
    padding: 4px 10px;
    background: var(--panel2);
    border-radius: var(--radius);
}

.pu-label,
.pu-node-badge-label {
    font-family: var(--ff-mono);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text2);
    flex-shrink: 0;
    width: 110px;
}

.pu-val,
.pu-node-counter {
    font-family: var(--ff-mono);
    color: var(--text);
    min-width: 45px;
}

.pu-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 3px;
    font-family: var(--ff-mono);
    background: var(--signal-color, #6b7280);
    color: var(--signal-contrast, #fff);
}


/* ===== Line name row — wrapping override =====
 *
 * LIBELLE LIGNE values can be long (e.g. "Ligne de Paris-Austerlitz à
 * Bordeaux-Saint-Jean (rive gauche)"). A smaller font and white-space:normal
 * let the value wrap without widening the popup. The body is already
 * overflow-y:auto so a taller row simply becomes scrollable.
 *
 * align-items:flex-start keeps the label vertically anchored to the first
 * text line when the value wraps to two or more lines.
 */

.pu-row[data-field="libelle_ligne"] {
    align-items: flex-start;
}

    .pu-row[data-field="libelle_ligne"] .pu-val {
        font-size: 10px;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
        line-height: 1.4;
        min-width: 0; /* allows flex child to shrink below content size */
    }


/* ===== OSM indicator buttons (ID Réseau row) ===== */

.pu-osm-btn {
    width: 22px;
    height: 22px;
    margin-left: 6px;
    color: var(--text3);
}

    .pu-osm-btn.osm-checking {
        font-family: var(--ff-mono);
        font-size: 11px;
        cursor: default;
        letter-spacing: -.5px;
    }

        .pu-osm-btn.osm-checking::after {
            content: "…";
        }

a.pu-osm-btn.osm-in-osm {
    cursor: pointer;
}

    a.pu-osm-btn.osm-in-osm:hover {
        border-color: var(--accent2);
    }

a.pu-osm-btn.osm-locate {
    cursor: pointer;
}

    a.pu-osm-btn.osm-locate:hover {
        color: var(--accent2);
        border-color: var(--accent2);
        text-decoration: none;
    }

button.pu-osm-btn.osm-retry {
    border-color: var(--warn);
    color: var(--warn);
    cursor: pointer;
}

    button.pu-osm-btn.osm-retry:hover {
        background: rgba(210,153,34,.18);
        border-color: #f0b429;
    }


/* ===== OSM Tags panel — tag list =====
 *
 * The list is a 2-column CSS grid. Each .pu-osm-row is a subgrid that spans
 * both parent columns and inherits their widths (including fit-content(40%)
 * on the value column). Being a real box (not display:contents), each row
 * can carry its own background, border and ::before pseudo-elements — which
 * is what makes GitHub-style diff rendering possible.
 */

.pu-tags-list {
    display: grid;
    grid-template-columns: 1fr fit-content(40%);
    column-gap: 10px;
    width: 100%;
}

.pu-osm-row {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    border-bottom: 1px solid var(--border);
}

.pu-osm-key,
.pu-osm-val {
    font-size: 10px;
    font-family: var(--ff-mono);
    padding: 3px 0;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.35;
    align-self: stretch;
}

.pu-osm-key {
    color: var(--text2);
}

.pu-osm-val {
    color: var(--text);
}


/* ===== OSM Tags diff mode — GitHub-style rows ===== */

.pu-osm-row.diff-added .pu-osm-key,
.pu-osm-row.diff-removed .pu-osm-key {
    display: flex;
    align-items: center;
}

.pu-osm-key::before {
    display: inline-block;
    width: 1.2em;
    text-align: center;
    flex-shrink: 0;
}

.pu-osm-row.diff-removed {
    background: rgba(248, 81, 73, .15);
}

    .pu-osm-row.diff-removed .pu-osm-key,
    .pu-osm-row.diff-removed .pu-osm-val {
        color: #ff7b72;
    }

        .pu-osm-row.diff-removed .pu-osm-key::before {
            content: "−";
        }

.pu-osm-row.diff-added {
    background: rgba(46, 160, 67, .15);
}

    .pu-osm-row.diff-added .pu-osm-key,
    .pu-osm-row.diff-added .pu-osm-val {
        color: #3fb950;
    }

        .pu-osm-row.diff-added .pu-osm-key::before {
            content: "+";
        }

    .pu-osm-row.diff-added .pu-osm-key,
    .pu-osm-row.diff-removed .pu-osm-key {
        align-self: flex-start;
        display: flex;
        align-items: flex-start;
    }

.pu-osm-key::before {
    display: inline-block;
    width: 1.2em;
    text-align: center;
    flex-shrink: 0;
}

/* ===== OSM diff toggle button — Tags tab nav ===== */

.pu-diff-btn {
    background: none;
    border: 1px solid transparent;
    color: var(--text3);
    width: 24px;
    height: 24px;
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .2s, background .2s, border-color .2s;
    flex-shrink: 0;
}

    .pu-diff-btn:hover {
        color: var(--text);
        background: rgba(255,255,255,.06);
    }

    .pu-diff-btn.is-active {
        color: var(--accent2);
        border-color: var(--accent2);
    }


/* ===== Footer action buttons =====
 *
 * flex-shrink:0 keeps footer height fixed so .pu-tags-body (flex:1) fills
 * the remaining panel space without any margin/padding arithmetic.
 */

.pu-footer {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

svg.btn-icon-flash,
span.btn-flash-label {
    display: none;
}

.btn-label,
.btn-flash-label {
    font-family: var(--ff-sans);
}

.pu-action-btn {
    flex: 0 0 auto;
    width: 130px;
    background: var(--panel2);
    border: 1px solid var(--border2);
    color: var(--text);
    font-size: 11px;
    padding: 6px 10px;
    justify-content: center;
    text-align: center;
}

    .pu-action-btn:hover {
        background: var(--accent);
        border-color: var(--accent);
    }

.pu-josm-btn:hover {
    background: var(--success) !important;
    border-color: var(--success) !important;
}

.pu-action-btn:disabled {
    opacity: .35;
    cursor: not-allowed;
    pointer-events: none;
}

.pu-action-btn.is-flash {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
    pointer-events: none;
}

    .pu-action-btn.is-flash .btn-icon-default,
    .pu-action-btn.is-flash .btn-label {
        display: none;
    }

    .pu-action-btn.is-flash .btn-icon-flash,
    .pu-action-btn.is-flash .btn-flash-label {
        display: inline-flex;
        align-items: center;
    }


/* ===== Unified tab panels — stable dimensions =====
 *
 * Both panels sit in the same CSS grid area.
 * The hidden panel stays in layout (visibility:hidden, not display:none)
 * so popup dimensions never change on tab switch.
 *
 * Height strategy: fixed height on .pu-tab-panel.
 * Each panel is a column flex container: nav (flex-shrink:0) + body (flex:1)
 * + badge/footer (flex-shrink:0). The body fills whatever height remains
 * without any margin/padding arithmetic.
 */

.pu-panels-grid {
    display: grid;
    grid-template-areas: "panel";
}

.pu-tab-panel {
    grid-area: panel;
    display: flex;
    flex-direction: column;
    width: 340px;
    height: 315px;
}

    .pu-tab-panel.is-hidden {
        visibility: hidden;
        pointer-events: none;
    }

/* Scrollable body */
.pu-body,
.pu-tags-body {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    padding: 8px 6px 0 14px;
    mask-image: linear-gradient(to bottom, black calc(100% - 2px), transparent calc(100% - 2px));
}

/* Signals body — fixed height */
.pu-body {
    height: 246px;
}

/* Badge zone — flex:1 fills remaining space  */
.pu-badge-zone {
    flex: 1;
    display: flex;
    align-items: flex-start;
    padding: 3px 14px;
}

/* Tags body fixed height — leaves the rest for .pu-footer */
.pu-tags-body {
    height: 220px;
}


/* ===== Bottom tab bar ===== */

.pu-tabs-bar {
    display: flex;
    border-top: 1px solid var(--border);
}

.pu-tab-btn {
    flex: 1;
    background: none;
    border: none;
    border-top: 2px solid transparent;
    font-family: var(--ff-sans);
    font-size: 11px;
    color: var(--text2);
    padding: 7px 16px;
    cursor: pointer;
    text-align: center;
    transition: color .15s, border-color .15s;
}

    .pu-tab-btn:hover {
        color: var(--text);
    }

    .pu-tab-btn.active {
        color: var(--accent2);
        border-top-color: var(--accent2);
    }

/* Pin button — 2-state toggle in the popup nav bar */
.pu-pin-btn {
    background: none;
    border: 1px solid transparent;
    color: var(--text3);
    width: 24px;
    height: 24px;
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .2s, background .2s, border-color .2s;
    flex-shrink: 0;
}

    .pu-pin-btn:hover {
        color: var(--text);
        background: rgba(255,255,255,.06);
    }

    /* Pinned state: blue border + blue icon */
    .pu-pin-btn.is-pinned {
        color: var(--accent2);
        border-color: var(--accent2);
    }