/* =====================================================================
   Lebanon Conflict Monitor
   ===================================================================== */

/* ---- Design tokens ---- */
:root {
    --bg:          #FFFFFF;
    --bg-soft:     #F4F4F4;
    --line:        #DDDDDD;
    --line-strong: #888888;
    --text:        #111111;
    --text-mid:    #555555;
    --text-soft:   #888888;
    --link:        #1E5FBE;

    --israel:    #1E5FBE;
    --hezbollah: #F0B400;
    --isf:       #0D1B5C;
    --laf:       #2E7D32;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    background: #FFFFFF;
    color: #111111;
    font-family: 'Inter', -apple-system, system-ui, sans-serif;
    font-size: 13px;
    line-height: 1.4;
}

button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* =====================================================================
   MAP — fills entire embed viewport
   ===================================================================== */
#map {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* =====================================================================
   LEGEND — top-left aside
   ===================================================================== */
#legend {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 500;
    background: #FFFFFF;
    border: 1px solid var(--line);
    padding: 14px 16px;
    width: 220px;
    font-size: 13px;
    line-height: 1.4;
}

#legend h2 {
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 10px 0;
    color: var(--text);
}

#legend ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#legend li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    color: var(--text);
}

#legend .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

#legend .dot.israel    { background: var(--israel); }
#legend .dot.hezbollah { background: var(--hezbollah); }
#legend .dot.isf       { background: var(--isf); }
#legend .dot.laf       { background: var(--laf); }

/* ---- Day filter ---- */
#legend h3 {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-soft);
    margin: 14px 0 8px 0;
}

#day-filter {
    display: flex;
    gap: 6px;
}

#day-filter button {
    font-family: inherit;
    font-size: 12px;
    font-weight: 400;
    padding: 3px 8px;
    border: 1px solid var(--line);
    background: #FFFFFF;
    color: var(--text-mid);
    border-radius: 2px;
    cursor: pointer;
}

#day-filter button:hover {
    border-color: var(--line-strong);
    color: var(--text);
}

#day-filter button.active {
    background: var(--text);
    color: #FFFFFF;
    border-color: var(--text);
}

/* Hidden state on desktop */
#legend.collapsed { display: none; }

#legend-toggle {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    font-size: 18px;
    color: var(--text-soft);
    cursor: pointer;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#legend-toggle:hover { color: var(--text); }

/* Desktop re-open button — appears in place of the aside when closed */
#legend-show {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 500;
    display: none;
    background: #FFFFFF;
    border: 1px solid var(--line);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-mid);
    padding: 6px 10px;
}

#legend-show.visible { display: block; }
#legend-show:hover { border-color: var(--line-strong); color: var(--text); }

/* Mobile legend trigger — hidden on desktop */
#legend-mobile-trigger {
    display: none;
    position: absolute;
    bottom: 16px;
    left: 16px;
    z-index: 500;
    background: #FFFFFF;
    border: 1px solid var(--line);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-mid);
    padding: 6px 10px;
}

#legend-mobile-trigger:hover { border-color: var(--line-strong); color: var(--text); }

/* =====================================================================
   COORDINATES READOUT — bottom-left
   ===================================================================== */
#coords {
    position: absolute;
    bottom: 16px;
    left: 16px;
    z-index: 500;
    font-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 11px;
    color: var(--text-soft);
    text-shadow:
        0 0 3px #FFFFFF,
        0 0 3px #FFFFFF,
        0 0 3px #FFFFFF;
    pointer-events: none;
    user-select: none;
}

/* =====================================================================
   ABOUT BUTTON + PANEL — bottom-right
   ===================================================================== */
#about-btn {
    position: absolute;
    bottom: 16px;
    right: 16px;
    z-index: 500;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid var(--line);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-mid);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

#about-btn:hover {
    color: var(--text);
    border-color: var(--line-strong);
}

#about-panel {
    position: absolute;
    bottom: 56px;
    right: 16px;
    z-index: 500;
    background: #FFFFFF;
    border: 1px solid var(--line);
    padding: 14px 16px;
    width: 240px;
    font-size: 13px;
    line-height: 1.45;
}

#about-panel h2 {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: var(--text);
}

#about-panel p {
    margin: 4px 0;
    color: var(--text-mid);
    line-height: 1.5;
}

#about-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    font-size: 18px;
    color: var(--text-soft);
    cursor: pointer;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#about-close:hover { color: var(--text); }

/* =====================================================================
   MARKERS
   ===================================================================== */
.event-icon {
    display: inline-block;
    line-height: 1;
}

.incident-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: var(--sz, 20px);
    height: var(--sz, 20px);
    font-size: calc(var(--sz, 20px) * 0.55);
    border: 1.5px solid #FFFFFF;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: box-shadow 120ms ease-out;
    position: relative;
}

.incident-marker:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.incident-marker.israel    { background: var(--israel);    color: #FFFFFF; }
.incident-marker.hezbollah { background: var(--hezbollah); color: #1a1a1a; }
.incident-marker.isf       { background: var(--isf);       color: #FFFFFF; }
.incident-marker.laf       { background: var(--laf);       color: #FFFFFF; }

/* Confidence modifiers — wired to data when field is available */
.incident-marker.confidence-medium { opacity: 0.85; }
.incident-marker.confidence-unconfirmed {
    opacity: 0.55;
    border-style: dashed;
}
.incident-marker.summary-only {
    background: transparent !important;
    border-width: 2.5px;
}
.incident-marker.summary-only.israel    { border-color: var(--israel);    color: var(--israel); }
.incident-marker.summary-only.hezbollah { border-color: var(--hezbollah); color: var(--hezbollah); }
.incident-marker.summary-only.isf       { border-color: var(--isf);       color: var(--isf); }
.incident-marker.summary-only.laf       { border-color: var(--laf);       color: var(--laf); }

/* =====================================================================
   CLUSTER MARKERS
   ===================================================================== */
.cluster-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: var(--sz, 26px);
    height: var(--sz, 26px);
    font-size: calc(var(--sz, 26px) * 0.42);
    font-weight: 500;
    border: 1.5px solid #FFFFFF;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: box-shadow 120ms ease-out;
    position: relative;
}

.cluster-marker:hover { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); }

.cluster-marker.israel    { background: var(--israel);    color: #FFFFFF; }
.cluster-marker.hezbollah { background: var(--hezbollah); color: #1a1a1a; }
.cluster-marker.isf       { background: var(--isf);       color: #FFFFFF; }
.cluster-marker.laf       { background: var(--laf);       color: #FFFFFF; }
.cluster-marker.mixed {
    background: var(--bg-soft);
    color: var(--text);
    border-color: var(--line);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* =====================================================================
   FRESHNESS DOT — upper-right badge on single + cluster markers
   ===================================================================== */
.freshness-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #DC2626;
    border: 1.5px solid #FFFFFF;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    pointer-events: none;
    z-index: 2;
}

.freshness-dot.aging {
    opacity: 0.5;
}

/* =====================================================================
   POPUPS — single incident (editorial style)
   ===================================================================== */
.leaflet-popup-content-wrapper {
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    padding: 0;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid var(--line);
}

.leaflet-popup-content {
    margin: 0;
    width: 280px !important;
    max-width: 85vw;
}

.leaflet-popup-tip { background: #FFFFFF; }

.leaflet-popup-close-button {
    color: var(--text-soft) !important;
    top: 10px !important;
    right: 10px !important;
    font-size: 16px !important;
    z-index: 1;
}
.leaflet-popup-close-button:hover { color: var(--text) !important; }

.incident-popup {
    padding: 14px 16px;
    border-left: 3px solid var(--text);
    font-family: 'Inter', -apple-system, system-ui, sans-serif;
}

.incident-popup.israel    { border-left-color: var(--israel); }
.incident-popup.hezbollah { border-left-color: var(--hezbollah); }
.incident-popup.isf       { border-left-color: var(--isf); }
.incident-popup.laf       { border-left-color: var(--laf); }

.incident-popup h2 {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 4px 0;
    line-height: 1.25;
    padding-right: 20px;
}

.incident-popup .location {
    font-size: 14px;
    color: var(--text-mid);
    margin: 0 0 8px 0;
}

.incident-popup .phrase {
    font-size: 13px;
    color: var(--text-mid);
    margin: 0 0 8px 0;
    line-height: 1.45;
}

.incident-popup .when {
    font-size: 12px;
    color: var(--text-soft);
    margin: 0 0 10px 0;
}

.incident-popup .source {
    font-size: 12px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
}

.incident-popup .source a {
    color: var(--link);
    text-decoration: none;
}

.incident-popup .source a:hover { text-decoration: underline; }

.confidence-badge {
    display: inline-block;
    padding: 1px 5px;
    border: 1px solid #000000;
    background: transparent;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.4px;
    line-height: 1.2;
    border-radius: 2px;
    text-transform: uppercase;
    white-space: nowrap;
    margin-left: 8px;
    vertical-align: middle;
}

.incident-popup .headline-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.incident-popup .headline-row h2 {
    margin: 0;
    flex: 1;
}

.incident-popup .headline-row .confidence-badge {
    flex-shrink: 0;
    margin-top: 2px;
    margin-left: 0;
}

.row-title-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.row-title-line .cluster-item-event {
    flex: 1;
    min-width: 0;
}

.row-title-line .confidence-badge {
    flex-shrink: 0;
    margin-left: 0;
}

/* =====================================================================
   POPUPS — cluster
   ===================================================================== */
.cluster-popup-hd {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
}

.cluster-popup-loc {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}

.cluster-popup-summary {
    font-size: 12px;
    color: var(--text-soft);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.cluster-popup-summary .actor-tag { font-weight: 600; }
.actor-tag.israel    { color: var(--israel); }
.actor-tag.hezbollah { color: var(--hezbollah); }
.actor-tag.isf       { color: var(--isf); }
.actor-tag.laf       { color: var(--laf); }

.cluster-list {
    max-height: 260px;
    overflow-y: auto;
}

.cluster-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--line);
}
.cluster-item:last-child { border-bottom: none; }

.cluster-item-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.cluster-item.israel    .cluster-item-icon { background: var(--israel);    color: #FFFFFF; }
.cluster-item.hezbollah .cluster-item-icon { background: var(--hezbollah); color: #1a1a1a; }
.cluster-item.isf       .cluster-item-icon { background: var(--isf);       color: #FFFFFF; }
.cluster-item.laf       .cluster-item-icon { background: var(--laf);       color: #FFFFFF; }

.cluster-item-body { flex: 1; min-width: 0; }

.cluster-item-event {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}

.cluster-item-time {
    font-size: 11px;
    color: var(--text-soft);
    margin-top: 1px;
}

.cluster-item-link {
    color: var(--text-soft);
    text-decoration: none;
    font-size: 14px;
    padding: 0 4px;
    transition: color 0.12s;
}
.cluster-item-link:hover { color: var(--link); }

.cluster-list::-webkit-scrollbar { width: 4px; }
.cluster-list::-webkit-scrollbar-track { background: transparent; }
.cluster-list::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 2px; }

/* =====================================================================
   LEAFLET CONTROL OVERRIDES
   ===================================================================== */
.leaflet-control-zoom a {
    background: #FFFFFF !important;
    color: var(--text-mid) !important;
    border: 1px solid var(--line) !important;
    border-radius: 2px !important;
}
.leaflet-control-zoom a:hover {
    background: var(--bg-soft) !important;
    color: var(--text) !important;
}

/* Push zoom control below the legend aside (legend is taller with day filter) */
.leaflet-top.leaflet-left .leaflet-control-zoom {
    margin-top: 295px;
    margin-left: 16px;
}

.leaflet-control-attribution {
    background: rgba(255, 255, 255, 0.85) !important;
    color: var(--text-soft) !important;
    font-size: 10px !important;
}
.leaflet-control-attribution a { color: var(--text-soft) !important; }

/* =====================================================================
   MOBILE  <= 768px
   ===================================================================== */
@media (max-width: 768px) {
    /* Legend becomes a bottom sheet */
    #legend {
        position: absolute;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: auto;
        max-height: 40vh;
        overflow-y: auto;
        border-left: none;
        border-right: none;
        border-bottom: none;
        transform: translateY(calc(100% + 2px));
        transition: transform 200ms ease-out;
    }

    #legend.open { transform: translateY(0); }

    /* Un-collapse on mobile (transform handles visibility) */
    #legend.collapsed { display: block; }

    /* Hide desktop re-open button */
    #legend-show { display: none !important; }

    /* Show mobile trigger */
    #legend-mobile-trigger { display: block; }

    /* Hide coords on touch */
    #coords { display: none; }

    /* About panel adjusts to narrower screens */
    #about-panel {
        width: calc(100vw - 32px);
        max-width: 240px;
    }

    /* Popup adjusts to mobile width */
    .leaflet-popup-content {
        width: auto !important;
        max-width: 85vw;
    }

    .incident-popup {
        max-height: 50vh;
        overflow-y: auto;
    }
}