/* ==========================================================================
   INCIDENTS
   Overview page, incident cards, timeline and the automatic pop-up.
   Classes are prefixed (e.g. "incident-card-title") to avoid collisions
   with Enfold's own bare classes like .title/.content/.meta/.header.
   ========================================================================== */

:root {
    --incident-radius: 6px;
    --incident-border-color: rgba(0, 0, 0, 0.1);
    --incident-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    --incident-status-investigating: #d97706;
    --incident-status-identified: #dc2626;
    --incident-status-in-progress: #2563eb;
    --incident-status-monitoring: #7c3aed;
    --incident-status-resolved: #16a34a;
}

/* ==========================================================================
   OVERVIEW PAGE
   ========================================================================== */

.incidents-overview-intro { margin-bottom: 2em; }

.incidents-overview-intro-title { margin-bottom: 0.4em; }

.incidents-overview-section { margin-bottom: 3em; }

.incidents-overview-section-title { margin-bottom: 1em; }

.incidents-overview-list {
    display: flex;
    flex-direction: column;
    gap: 1.25em;
}

.incidents-overview-empty {
    padding: 1em 1.25em;
    border: 1px solid var(--incident-border-color);
    border-radius: var(--incident-radius);
    background: rgba(0, 0, 0, 0.02);
}

/* ==========================================================================
   INCIDENT CARD
   A single incident (active or resolved), including its timeline.
   ========================================================================== */

.incident-card {
    padding: 1.25em 1.5em;
    border: 1px solid var(--incident-border-color);
    border-radius: var(--incident-radius);
    background: #fff;
    box-shadow: var(--incident-shadow);
}

/* ---- Header ---- */
.incident-card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5em 1em;
    margin-bottom: 0.5em;
}

.incident-card-title { margin: 0; }

.incident-card-badge {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    padding: 0.6em 0.9em 0.4em 0.9em;
    border-radius: 999px;
    background: #6b7280;
    color: #fff;
    font-size: 0.75em;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.incident-card-badge.is-investigating { background: var(--incident-status-investigating); }
.incident-card-badge.is-identified { background: var(--incident-status-identified); }
.incident-card-badge.is-in-progress { background: var(--incident-status-in-progress); }
.incident-card-badge.is-monitoring { background: var(--incident-status-monitoring); }
.incident-card-badge.is-resolved { background: var(--incident-status-resolved); }

/* ---- Body ---- */
.incident-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25em 1.5em;
    margin-bottom: 0.75em;
    color: #666;
    font-size: 0.9em;
}

.incident-card-description { margin: 0 0 1em; }

/* ---- Timeline disclosure (resolved incidents) ---- */
.incident-card-timeline-details > summary {
    padding: 0.4em 0;
    list-style: none;
    font-weight: 600;
    cursor: pointer;
}

.incident-card-timeline-details > summary::-webkit-details-marker { display: none; }

.incident-card-timeline-details > summary::before {
    content: '\25B8';
    display: inline-block;
    margin-right: 0.5em;
    transition: transform 0.15s ease-in-out;
}

.incident-card-timeline-details[open] > summary::before { transform: rotate(90deg); }

.incident-card-timeline-details > .incident-timeline { margin-top: 0.75em; }

/* ==========================================================================
   INCIDENT TIMELINE
   Chronological list of updates within a single incident.
   ========================================================================== */

.incident-timeline {
    margin: 0;
    padding: 0;
    border-left: 2px solid var(--incident-border-color);
    list-style: none;
}

.incident-timeline-item {
    position: relative;
    padding: 0 0 1.25em 1.5em;
}

.incident-timeline-item:last-child { padding-bottom: 0; }

.incident-timeline-marker {
    position: absolute;
    top: 0.3em;
    left: -7px;
    width: 12px;
    height: 12px;
    border: 2px solid #6b7280;
    border-radius: 50%;
    background: #fff;
}

.incident-timeline-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25em 0.75em;
    margin-bottom: 0.25em;
}

.incident-timeline-time {
    color: #666;
    font-size: 0.85em;
}

.incident-timeline-status {
    font-size: 0.9em;
    font-weight: 600;
}

.incident-timeline-description { margin: 0; }

/* ==========================================================================
   INCIDENT POPUP
   Automatic pop-up shown site-wide while at least one incident is active.
   ========================================================================== */

.incident-popup {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1em;
}

.incident-popup[hidden] { display: none; }

.incident-popup-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

.incident-popup-dialog {
    position: relative;
    width: 100%;
    max-width: 460px;
    max-height: 90vh;
    padding: 2em 1.75em 1.75em;
    overflow-y: auto;
    border-radius: var(--incident-radius);
    background: #fff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.incident-popup-close {
    position: absolute;
    top: 0.75em;
    right: 0.75em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2em;
    height: 2em;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #666;
    font-size: 1.5em;
    line-height: 1;
    cursor: pointer;
}

.incident-popup-close:hover,
.incident-popup-close:focus {
    background: rgba(0, 0, 0, 0.06);
    color: #222;
}

.incident-popup-title { margin: 0 0 0.5em; padding-right: 1.5em; }

.incident-popup-text p { margin: 0 0 0.75em; }

.incident-popup-recent {
    padding: 0.5em 0.75em;
    border-radius: var(--incident-radius);
    background: rgba(0, 0, 0, 0.04);
}

.incident-popup-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75em 1em;
    margin-top: 1.25em;
}

.incident-popup-cta { margin: 0 !important; }

.incident-popup-dismiss {
    display: inline-flex;
    align-items: center;
    padding: 0.5em 0;
    border: none;
    background: transparent;
    color: #555;
    text-decoration: underline;
    cursor: pointer;
}

/* ---- Focus visibility for keyboard users ---- */
.incident-popup a:focus-visible,
.incident-popup button:focus-visible,
.incident-card a:focus-visible,
.incident-card summary:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

body.incident-popup-open { overflow: hidden; }

@media only screen and (max-width: 767px) {
    .incident-card { padding: 1em 1.1em; }

    .incident-popup-dialog { padding: 1.75em 1.25em 1.25em; }
}