/* ── Alerts Page Layout ────────────────────────────────────────────────────── */
.page-alerts {
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

/* ── Sidebar ───────────────────────────────────────────────────────────────── */
#alerts-sidebar {
    width: 380px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border);
    overflow: hidden;
}

#alerts-toolbar {
    background: var(--glass);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border-bottom: 1px solid var(--border);
    padding: .65rem .85rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    flex-shrink: 0;
}
#alerts-toolbar h1  { font-size: .9rem; font-weight: 600; }

.toolbar-row { display: flex; gap: .4rem; align-items: center; }

#alert-area-input {
    flex: 1;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
    padding: .35rem .6rem;
    border-radius: 6px;
    font-size: .8rem;
    font-family: var(--font);
    text-transform: uppercase;
}
#alert-area-input::placeholder { text-transform: none; color: var(--muted); }

/* ── Severity Filter Chips ─────────────────────────────────────────────────── */
.filter-chips { display: flex; gap: .3rem; flex-wrap: wrap; }

.chip {
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--muted);
    cursor: pointer;
    padding: .2rem .6rem;
    border-radius: 20px;
    font-size: .72rem;
    font-family: var(--font);
    transition: all .15s;
    user-select: none;
    line-height: 1.4;
}
.chip:hover            { border-color: var(--accent); color: var(--text); }
.chip.active           { color: #fff; border-color: transparent; }
.chip.active[data-sev="all"] { background: var(--accent2); }
.chip.extreme          { background: var(--extreme);  }
.chip.severe           { background: var(--severe);   }
.chip.moderate         { background: var(--moderate); color: #111; }
.chip.minor            { background: var(--minor);    }

#alert-count { font-size: .75rem; color: var(--muted); }

/* ── Alert List ────────────────────────────────────────────────────────────── */
#alerts-list {
    flex: 1;
    overflow-y: auto;
    padding: .4rem;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
#alerts-list::-webkit-scrollbar       { width: 5px; }
#alerts-list::-webkit-scrollbar-track { background: transparent; }
#alerts-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.alert-card {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-left: 4px solid var(--unknown);
    border-radius: 7px;
    padding: .65rem .75rem;
    margin-bottom: .35rem;
    cursor: pointer;
    transition: background .15s;
}
.alert-card:hover       { background: var(--border); }
.alert-card.selected    { background: #1f2d3d; border-color: var(--accent); }
.alert-card.extreme     { border-left-color: var(--extreme);  }
.alert-card.severe      { border-left-color: var(--severe);   }
.alert-card.moderate    { border-left-color: var(--moderate); }
.alert-card.minor       { border-left-color: var(--minor);    }

.alert-card-title { font-size: .82rem; font-weight: 600; margin-bottom: .25rem; }
.alert-card-meta  { font-size: .72rem; color: var(--muted); display: flex; gap: .5rem; flex-wrap: wrap; }

/* ── Map Panel ─────────────────────────────────────────────────────────────── */
#alerts-map-panel {
    flex: 1;
    position: relative;
    overflow: hidden;
}
/* Same absolute fill trick as radar — guarantees Leaflet gets a real height */
#alerts-map {
    position: absolute;
    inset: 0;
}

/* ── Alert Detail Overlay ──────────────────────────────────────────────────── */
#alert-detail-overlay {
    position: absolute;
    top: .75rem;
    right: .75rem;
    width: 340px;
    max-height: calc(100% - 1.5rem);
    background: rgba(4, 12, 28, 0.88);
    border: 1px solid rgba(0,180,255,.18);
    border-radius: var(--r-lg);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    box-shadow: 0 16px 60px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.04);
    overflow: hidden;
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    animation: adoIn .22s ease;
}
#alert-detail-overlay[hidden] { display: none; }

@keyframes adoIn {
    from { opacity: 0; transform: translateX(10px) scale(.97); }
    to   { opacity: 1; transform: translateX(0)    scale(1);   }
}

/* Header */
.ado-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    padding: .8rem 1rem .7rem;
    border-bottom: 1px solid rgba(255,255,255,.07);
    background: rgba(0,180,255,.05);
    flex-shrink: 0;
}
.ado-title-row {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}
#ado-event {
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.3;
}
/* ── Close button — same circle style as radar overlay ────────────────────── */
#alert-detail-close {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.12);
    color: var(--text);
    cursor: pointer;
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    transition: background .15s, transform .12s;
    -webkit-tap-highlight-color: transparent;
}
#alert-detail-close:hover  { background: rgba(255,255,255,.18); transform: scale(1.08); }
#alert-detail-close:active { transform: scale(.92); }

/* Scrollable body */
.ado-body {
    flex: 1;
    overflow-y: auto;
    padding: .6rem .85rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.ado-body::-webkit-scrollbar       { width: 4px; }
.ado-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* Meta table */
.ado-meta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .2rem .6rem;
    font-size: .78rem;
}
.ado-meta dt { color: var(--muted); white-space: nowrap; }
.ado-meta dd { color: var(--text); }

/* Description */
.ado-description {
    font-size: .78rem;
    color: var(--muted);
    line-height: 1.55;
    white-space: pre-wrap;
    max-height: 130px;
    overflow-y: auto;
    border-top: 1px solid var(--border);
    padding-top: .5rem;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.ado-description::-webkit-scrollbar       { width: 3px; }
.ado-description::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* EAS section */
.ado-section-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    border-top: 1px solid var(--border);
    padding-top: .5rem;
}
.ado-eas-list {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.ado-eas-card {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--unknown);
    border-radius: 6px;
    padding: .5rem .6rem;
    font-size: .75rem;
}
.ado-eas-card.extreme  { border-left-color: var(--extreme);  }
.ado-eas-card.severe   { border-left-color: var(--severe);   }
.ado-eas-card.moderate { border-left-color: var(--moderate); }
.ado-eas-card.minor    { border-left-color: var(--minor);    }
.ado-eas-header        { display: flex; justify-content: space-between; gap: .4rem; margin-bottom: .25rem; }
.ado-eas-type          { font-weight: 600; }
.ado-eas-ts            { color: var(--muted); font-size: .7rem; white-space: nowrap; }
.ado-eas-orig          { font-family: var(--mono); font-size: .72rem; color: var(--accent); margin-bottom: .3rem; }
.ado-eas-card audio    {
    width: 100%;
    height: 26px;
    filter: invert(1) hue-rotate(180deg) brightness(.85);
}

/* Footer */
.ado-footer {
    padding: .5rem .85rem;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    flex-shrink: 0;
}
.ado-ts {
    font-size: .7rem;
    color: var(--muted);
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
    .page-alerts    { flex-direction: column; }

    /* Sidebar: fixed height, scrollable list */
    #alerts-sidebar {
        width: 100%;
        height: 42%;
        min-height: 180px;
        border-right: none;
        border-bottom: 1px solid var(--border);
        flex-shrink: 0;
    }

    #alerts-toolbar h1 { font-size: .82rem; }

    /* Map gets the remaining space */
    #alerts-map-panel { flex: 1; min-height: 160px; }

    /* Alert detail: full-width bottom sheet */
    #alert-detail-overlay {
        width: 100%;
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        max-height: 72vh;
        border-radius: 16px 16px 0 0;
    }

    /* Filter chips: scrollable row */
    .filter-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .15rem; }
    .chip         { flex-shrink: 0; }
}