/* ===== Section titles ===== */

.section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
    font-family: var(--ff-mono);
    color: var(--text2);
}


/* ===== Header ===== */

#sidebar-header {
    padding: 14px 14px 10px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.logo-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.logo-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.logo-sncf {
    height: 40px;
    width: auto;
    max-width: 74px;
    object-fit: contain;
    flex-shrink: 0;
}

.logo-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text);
}

.logo-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.beta-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.8);
    background: #7c2270;
    border-radius: 3px;
    padding: 1px 5px;
    vertical-align: middle;
    line-height: 1.6;
    user-select: none;
    text-transform: uppercase;
}

.record-count {
    font-size: 11px;
    color: var(--text2);
}


/* ===== Shared dropdown primitives =====
 * Used by filter combos (filters.css) and the language picker.
 */

.dd-trigger {
    display: flex;
    align-items: center;
    background: var(--panel2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color .15s;
    font-size: 11px;
    color: var(--text);
}

    .dd-trigger:hover,
    .dd-trigger:focus-within {
        border-color: var(--accent);
    }

.dd-chevron {
    color: var(--text2);
    pointer-events: none;
}

    /* icon-chevron points right by default — rotate 90deg to point down for dropdowns */
    .dd-chevron svg {
        transform: rotate(90deg);
        transition: transform .2s ease;
    }

.dd-panel {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    background: var(--panel2);
    border: 1px solid var(--border2);
    border-radius: var(--radius);
    z-index: 1000;
    box-shadow: 0 8px 24px rgba(0,0,0,.6);
}


/* ===== Tabs ===== */

#sidebar-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.stab {
    flex: 1;
    background: none;
    border: none;
    font-family: var(--ff-sans);
    font-size: 12px;
    color: var(--text2);
    padding: 9px 4px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
}

    .stab:hover {
        color: var(--text);
    }

    .stab.active {
        color: var(--accent2);
        border-bottom-color: var(--accent2);
    }


/* ===== Filters tab ===== */

/* Sticky at the very top of #tab-filters */
.panel-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

/* Toolbar buttons — extend group-1 base (base.css) */
.tbtn {
    background: var(--accent);
    color: #fff;
    border: 1px solid transparent;
    padding: 5px 12px;
}

    .tbtn:hover {
        background: var(--accent2);
    }

    .tbtn:disabled {
        opacity: .35;
        cursor: default;
        pointer-events: none;
    }

.tbtn-ghost {
    background: transparent;
    color: var(--text2);
    border: 1px solid var(--border2);
}

    .tbtn-ghost:hover {
        background: var(--panel2);
        color: var(--text);
    }


/* ===== Interactive legend items =====
 *
 * Each legend row is a <button> — keyboard focus, Enter/Space are handled
 * natively. No role or tabindex management needed in JS.
 *
 * border-left: 3px solid transparent reserves space so the is-active indicator
 * does not cause a layout shift when the border becomes visible. */

.legend-item {
    background: none;
    border: none;
    border-left: 3px solid transparent;
    width: 100%;
    padding: 5px 5px 5px 12px;
    text-align: left;
    font-family: var(--ff-sans);
    font-size: 11px;
    color: var(--text2);
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .legend-item:hover {
        background: rgba(255, 255, 255, .05);
        color: var(--text);
    }

    .legend-item:focus-visible {
        outline: 2px solid var(--accent2);
        outline-offset: 1px;
    }

    .legend-item:active {
        background: rgba(255, 255, 255, .09);
    }

    /* Active legend group: left accent bar using the dot color via currentColor
     * would require an extra wrapper; use accent2 as a neutral indicator instead. */
    .legend-item.is-active {
        background: rgba(255, 255, 255, .07);
        border-left-color: var(--accent2);
        color: var(--text);
    }

/* Dim siblings on hover to draw attention to the hovered category. */
.legend-panel-body:hover .legend-item:not(:hover) {
    opacity: .5;
    transition: opacity .15s, background .15s, color .15s;
}

/* ===== Summary panel-level buttons =====
 *
 * Shared base for all icon buttons that appear inside a .panel-summary:
 * action buttons (clear, remove), link buttons, and the legend dot indicator.
 * All share the same box model so they align identically in the flex row.
 *
 * Modifiers (hover colour) vary by semantic:
 *   default / action → warn (amber)
 *   link / navigation → accent2 (blue)
 *   .legend-summary-dot → no hover (disabled button, decorative only)
 */

.summary-action-btn,
.summary-link-btn,
.legend-summary-dot {
    background: none;
    border: none;
    color: var(--text3);
    padding: 3px 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    transition: color .15s, background .15s;
    flex-shrink: 0;
    text-decoration: none;
}

    .summary-action-btn:hover {
        color: var(--warn);
        background: rgba(210, 153, 34, .08);
    }

    .summary-link-btn:hover {
        color: var(--accent2);
        background: rgba(37, 137, 199, .08);
    }

/* Legend dot — decorative, non-interactive */
.legend-summary-dot {
    cursor: default;
}

/* Title that fills available space, pushing action buttons to the right */
.summary-flex-title {
    flex: 1;
}


/* ===== Tab-specific cp-panel =====
 * Filters, Settings, and Info variants all tile flush (no side/bottom borders,
 * no radius, overflow:visible). This ensures a single border line between
 * adjacent panels rather than a double border from two separate boxes.
 */

.filters-panel,
.settings-panel,
.info-panel {
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-radius: 0;
    overflow: visible;
    flex-shrink: 0;
}


/* ===== Legend panel ===== */

#legend {
    margin: 0 12px 12px;
}

.legend-panel-body {
    padding: 10px 14px 14px 11px; /* 11px left: 3px border + 8px gap = 14px visual alignment */
    line-height: 2;
    border-bottom: 1px solid var(--border);
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1.5px solid rgba(0,0,0,.3);
}

/* Color indicator shown in the legend panel-summary when a category is active.
 *
 * Base layout (display:inline-flex, padding, flex-shrink, border:none, cursor:default)
 * is inherited from the shared .summary-action-btn / .legend-summary-dot selector above.
 * The circle is drawn by ::before so its dimensions are independent of the button box model.
 * Color is passed via --legend-dot-color (set by legend.js).
 *
 * Hidden by JS (.is-hidden) when no group is active.
 * Hidden by CSS when the panel is open — only needed in the collapsed state. */

.legend-summary-dot::before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1.5px solid rgba(0,0,0,.3);
    background-color: var(--legend-dot-color, transparent);
}

.legend-summary-dot.is-hidden {
    display: none;
}

#legend-panel.cp-panel--open .legend-summary-dot {
    display: none;
}


/* ===== Settings tab ===== */

/* Language — plain section, sticky at top */
.settings-plain-section {
    padding: 12px 12px 20px;
}

    .settings-plain-section .section-title {
        margin-bottom: 8px;
    }


/* ===== Language picker ===== */

.lang-select-wrap {
    position: relative;
}

.lang-select-btn {
    font-family: var(--ff-sans);
    font-size: 12px;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    cursor: pointer;
    border-radius: var(--radius);
}

.lang-select-btn.is-open .lang-chevron svg {
    transform: rotate(-90deg);
}

.lang-flag-img {
    font-size: 16px;
    line-height: 1;
}

.lang-chevron {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border-radius: 2px;
    transition: background .15s, color .15s;
}

    .lang-chevron svg {
        pointer-events: none;
    }

    .lang-chevron:hover {
        background: rgba(255, 255, 255, .06);
        color: var(--text);
    }

.lang-dropdown {
    /* Visibility managed via .is-hidden (toggled by Dropdown in dropdown.js). */
    list-style: none;
    overflow: hidden;
}

.lang-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 11px;
    cursor: pointer;
    color: var(--text2);
    transition: background .1s;
    outline-offset: -2px;
}

    .lang-option:hover {
        background: rgba(255,255,255,.05);
        color: var(--text);
    }

    .lang-option.active {
        color: var(--text);
    }


/* ===== Settings behavior toggles ===== */

.settings-toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    cursor: pointer;
    font-size: 11px;
    color: var(--text2);
    user-select: none;
}

.settings-toggle-label {
    flex: 1;
    line-height: 1.3;
}

/* Show a focus ring on the track when the visually-hidden checkbox receives
 * keyboard focus — the track is the adjacent sibling of the input. */
.toggle-input:focus-visible + .toggle-track {
    outline: 2px solid var(--accent2);
    outline-offset: 2px;
}


/* ===== JOSM footer (Settings tab) ===== */

/* footer summary gap to accommodate the JOSM icon */
.settings-josm-footer > .panel-summary {
    gap: 8px;
}

/* JOSM icon in the footer panel summary */
.josm-header-icon {
    flex-shrink: 0;
    opacity: .85;
}

.josm-detect-row {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text2);
    padding: 4px 0;
}

    /* Thin separator between JOSM detail rows (same treatment as "How to use" grid) */
    .josm-detect-row + .josm-detect-row {
        border-top: 1px solid var(--border);
    }

.josm-detect-label {
    color: var(--text3);
    font-size: 11px;
}

.josm-detect-val {
    font-size: 11px;
}

.josm-val-ok {
    color: var(--text);
}

.josm-val-dim {
    color: var(--text3);
    font-style: italic;
}

/* State-driven JOSM row visibility.
   [data-josm-state] rows are hidden by default.
   Setting data-josm-status on #josm-detect-body reveals the matching ones. */
[data-josm-state] {
    display: none !important;
}

#josm-detect-body[data-josm-status="checking"] span[data-josm-state="checking"] {
    display: inline !important;
}

#josm-detect-body[data-josm-status="ok"] span[data-josm-state="ok"] {
    display: inline !important;
}

#josm-detect-body[data-josm-status="forbidden"] span[data-josm-state="forbidden"] {
    display: inline !important;
}

#josm-detect-body[data-josm-status="error"] span[data-josm-state="error"] {
    display: inline !important;
}

/* Protocol and Port rows are divs — need flex restoration when visible */
#josm-detect-body[data-josm-status="ok"] div[data-josm-state="ok"] {
    display: flex !important;
}


/* ===== Help tab ===== */

/* Help sticky headers */
#help-gs-panel > .panel-summary,
#help-control-panel > .panel-summary {
    position: sticky;
    top: 0;
    z-index: 10;
}


/* Shortcut grid (dl/dt/dd) */
.shortcuts-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    row-gap: 0;
    align-items: start;
    padding: 0 2px 16px;
}

    .shortcuts-grid dt {
        white-space: nowrap;
        padding: 6px 0;
    }

    .shortcuts-grid dd {
        font-size: 11px;
        color: var(--text3);
        line-height: 1.5;
        padding: 6px 0;
    }

    /* Thin separator between shortcut rows (all rows except the first) */
    .shortcuts-grid dt:not(:first-of-type) {
        border-top: 1px solid var(--border);
    }

        .shortcuts-grid dt:not(:first-of-type) + dd {
            border-top: 1px solid var(--border);
        }


/* Force all dt cells in a grid to the same minimum width */
.shortcuts-body .shortcuts-grid {
    grid-template-columns: auto 1fr;
    width: 100%;
}

    .shortcuts-body .shortcuts-grid dt {
        min-width: 100px;
    }

    /* Slightly lighter description text inside sub-panel grids */
    .shortcuts-body .shortcuts-grid dd {
        color: var(--text2);
    }


/* Internal tab links — attribute selector keeps class name out of JS */
a[data-switch-tab] {
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    color: var(--accent2);
}

    a[data-switch-tab]:hover {
        text-decoration: underline;
    }


/* ===== kbd ===== */

kbd {
    display: inline-block;
    font-family: var(--ff-mono);
    font-size: 10px;
    font-style: normal;
    line-height: 1.4;
    padding: 1px 5px;
    background: var(--panel3);
    border: 1px solid var(--border2);
    border-bottom-width: 2px;
    border-radius: 3px;
    color: var(--text);
    white-space: nowrap;
}


/* ===== About tab ===== */

/* Links list */
.about-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .about-links li::before {
        content: '→ ';
        color: var(--text3);
    }


/* ===== Footers =====
 *
 * Collapsible cp-panel fixed at the bottom of the tabs,
 * outside of the contents.
 */

.settings-josm-footer,
.about-credits-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--border);
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-radius: 0;
}