/**
 * AAGP Pipeline Map — public styles.
 *
 * Scoped to .onhym-map-canvas[data-onhym-aagp] and its wrappers.
 * Does not affect existing maps.
 *
 * @package OnhymMap
 */

/* ── MapLibre baseline reset (mirrors maplibre-gl.css scoped to our wrapper)
 *    Some theme/plugin CSS on the site collapses .maplibregl-canvas-container
 *    to height:0 and resets position:static — force MapLibre's own layout
 *    with !important so the map viewport stays 100% of the wrapper.          */
.onhym-map-canvas[data-onhym-aagp] {
        position: relative !important;
        overflow: hidden !important;
}
.onhym-map-canvas[data-onhym-aagp] .maplibregl-map {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
}
.onhym-map-canvas[data-onhym-aagp] .maplibregl-canvas-container {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
}
.onhym-map-canvas[data-onhym-aagp] .maplibregl-canvas {
        display: block !important;
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: 100% !important;
}

/* ── Floating Legend ──────────────────────────────────────────────────────── */
.aagp-float-legend {
        background: var(--c-surface, #fff);
        border: 1px solid var(--c-border, #e5e7eb);
        border-radius: 8px;
        padding: 10px 13px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
        font-size: 11.5px;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        min-width: 190px;
        max-height: 70vh;
        overflow-y: auto;
        color: var(--c-text, #1f2937);
        user-select: none;
        pointer-events: auto;
}

.aagp-float-legend h4 {
        margin: 0 0 8px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        color: var(--c-muted, #6b7280);
        border-bottom: 1px solid var(--c-border, #e5e7eb);
        padding-bottom: 5px;
}

.afl-row {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 3px 0;
        cursor: pointer;
        border-radius: 4px;
        transition: background 120ms;
}

.afl-row:hover { background: rgba(0, 0, 0, 0.04); }

.afl-row input[type='checkbox'] {
        width: 13px;
        height: 13px;
        cursor: pointer;
        accent-color: var(--c-primary, #0b5d56);
        flex-shrink: 0;
}

.afl-line {
        width: 28px;
        border-radius: 2px;
        flex-shrink: 0;
        display: block;
}

.afl-line.dashed {
        background: none !important;
        border-top: 3px dashed;
        height: 0 !important;
}

.afl-dot-sq {
        width: 12px;
        height: 12px;
        background: #1a1a1a;
        border: 2px solid #fff;
        box-shadow: 0 0 0 1px #555;
        flex-shrink: 0;
}

.afl-dot-circle {
        width: 12px;
        height: 12px;
        background: #e53935;
        border-radius: 50%;
        border: 2px solid #fff;
        box-shadow: 0 0 0 1.5px #e53935;
        flex-shrink: 0;
}

.afl-label { font-size: 11.5px; flex: 1; }

.afl-sep {
        border: none;
        border-top: 1px solid var(--c-border, #e5e7eb);
        margin: 5px 0;
}

/* ── Popup ────────────────────────────────────────────────────────────────── */
.maplibregl-popup.aagp-popup-wrapper .maplibregl-popup-content {
        padding: 0;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
        border: 1px solid var(--c-border, #e5e7eb);
        font-family: 'Inter', -apple-system, sans-serif;
        max-width: 300px;
        min-width: 220px;
}

.aagp-popup-header {
        padding: 10px 14px;
        background: var(--c-surface-2, #f8f9fa);
        border-bottom: 1px solid var(--c-border, #e5e7eb);
        font-size: 13px;
        font-weight: 700;
        color: var(--c-text, #1f2937);
        border-left: 4px solid currentColor;
}

.aagp-popup-body { padding: 10px 14px; }

.pp-row {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        padding: 3px 0;
        font-size: 12px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

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

.pp-row span:first-child { color: var(--c-muted, #6b7280); flex-shrink: 0; }

.pp-row span:last-child {
        color: var(--c-text, #1f2937);
        font-weight: 500;
        text-align: right;
}

.status-badge {
        display: inline-block;
        padding: 1px 7px;
        border-radius: 10px;
        font-size: 10.5px;
        font-weight: 600;
}

.status-planned      { background: #eff6ff; color: #1d4ed8; }
.status-operational  { background: #f0fdf4; color: #15803d; }
.status-under-study  { background: #fefce8; color: #a16207; }

/* ── Layer-list items (sidebar) ───────────────────────────────────────────── */
.aagp-ll-section {
        padding: 7px 12px 3px;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.7px;
        color: var(--c-muted, #6b7280);
        border-top: 1px solid var(--c-border, #e5e7eb);
        margin-top: 4px;
}

.aagp-ll-section:first-child { border-top: none; margin-top: 0; }

.aagp-ll-item { padding: 4px 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.04); }

.aagp-ll-head {
        display: flex;
        align-items: center;
        gap: 7px;
}

.aagp-ll-vis {
        background: none;
        border: none;
        cursor: pointer;
        color: var(--c-muted, #6b7280);
        padding: 2px;
        border-radius: 3px;
        display: flex;
        align-items: center;
        transition: color 150ms, background 150ms;
        flex-shrink: 0;
}

.aagp-ll-vis:hover         { color: var(--c-text, #1f2937); background: rgba(0, 0, 0, 0.06); }
.aagp-ll-vis.off           { color: var(--c-muted-l, #9ca3af); }

.aagp-ll-swatch-line {
        width: 26px;
        height: 4px;
        border-radius: 2px;
        flex-shrink: 0;
        display: block;
}

.aagp-ll-swatch-sq {
        width: 12px;
        height: 12px;
        background: #1a1a1a;
        border: 2px solid #fff;
        box-shadow: 0 0 0 1px #555;
        flex-shrink: 0;
}

.aagp-ll-swatch-circle {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        border: 2px solid #fff;
        flex-shrink: 0;
}

.aagp-ll-name {
        font-size: 12px;
        color: var(--c-text, #1f2937);
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
}

.aagp-ll-name.off { opacity: 0.45; }

/* ── Pipeline Editor Toolbar ─────────────────────────────────────── */
/* Position handled by MapLibre ctrl layer (bottom-left). */
.aagp-editor-bar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        font-size: 12px;
        pointer-events: auto;
}

.aagp-edit-btn {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background: #fff;
        color: #1f2937;
        border: 1px solid #d1d5db;
        border-radius: 4px;
        padding: 5px 10px;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        box-shadow: 0 1px 4px rgba(0,0,0,.18);
        transition: background .15s, color .15s, border-color .15s;
        line-height: 1.4;
}
.aagp-edit-btn:hover { background: #f3f4f6; border-color: #9ca3af; }
.aagp-edit-btn.active {
        background: #1d4ed8;
        color: #fff;
        border-color: #1d4ed8;
}
.aagp-edit-btn.active:hover { background: #1e40af; }

.aagp-editor-tools {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
}

.aagp-hint {
        background: rgba(255,255,255,.92);
        border: 1px solid #e5e7eb;
        border-radius: 4px;
        padding: 4px 8px;
        font-size: 11px;
        color: #374151;
        max-width: 260px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

.aagp-save-btn,
.aagp-cancel-btn {
        border-radius: 4px;
        padding: 5px 10px;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        border: 1px solid;
        line-height: 1.4;
        transition: background .15s, color .15s;
}

.aagp-save-btn {
        background: #16a34a;
        color: #fff;
        border-color: #16a34a;
        box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.aagp-save-btn:hover:not(:disabled) { background: #15803d; }
.aagp-save-btn:disabled {
        background: #d1fae5;
        color: #6ee7b7;
        border-color: #a7f3d0;
        cursor: not-allowed;
}

.aagp-cancel-btn {
        background: #fff;
        color: #6b7280;
        border-color: #d1d5db;
        box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.aagp-cancel-btn:hover { background: #f9fafb; color: #374151; }

/* Add Hub / Add Station buttons */
.aagp-add-hub-btn,
.aagp-add-station-btn {
        border-radius: 4px;
        padding: 5px 9px;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        border: 1px solid #d1d5db;
        background: #fff;
        color: #374151;
        box-shadow: 0 1px 3px rgba(0,0,0,.12);
        transition: background .15s, color .15s, border-color .15s;
        line-height: 1.4;
}
.aagp-add-hub-btn:hover,
.aagp-add-station-btn:hover { background: #f3f4f6; }
.aagp-add-hub-btn.active    { background: #e53935; color: #fff; border-color: #e53935; }
.aagp-add-station-btn.active{ background: #111;    color: #fff; border-color: #111; }

/* Station scale panel */
.aagp-scale-panel {
        display: flex;
        align-items: center;
        gap: 3px;
        font-size: 11px;
        color: #374151;
        background: rgba(255,255,255,.9);
        border: 1px solid #e5e7eb;
        border-radius: 4px;
        padding: 3px 7px;
        box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.aagp-scale-btn {
        border: 1px solid #d1d5db;
        border-radius: 3px;
        background: #fff;
        padding: 2px 6px;
        font-size: 11px;
        font-weight: 700;
        cursor: pointer;
        line-height: 1.4;
        color: #374151;
        transition: background .12s;
}
.aagp-scale-btn:hover  { background: #f3f4f6; }
.aagp-scale-btn.active { background: #1d4ed8; color: #fff; border-color: #1d4ed8; }

/* Map container — rounded corners */
.onhym-map-canvas {
        border-radius: 12px;
        overflow: hidden;
}