/* ===== Outages Page Styles ===== */

/* Outage card */
.outage-card {
    border-radius: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-left: 4px solid transparent;
}

.outage-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Status-based left border */
.outage-emergency {
    border-left-color: #dc3545;
}

.outage-planned {
    border-left-color: #fd7e14;
}

.outage-completed {
    border-left-color: #6c757d;
}

.outage-cancelled {
    border-left-color: #adb5bd;
}

/* Type badge icon circle */
.outage-type-badge {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.outage-emergency .outage-type-badge {
    background-color: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

.outage-completed .outage-type-badge {
    background-color: rgba(108, 117, 125, 0.1);
    color: #6c757d;
}

/* Type label badge */
.outage-type-label {
    background-color: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
    font-weight: 500;
}

/* Card title link */
.outage-card .card-title a {
    color: var(--bs-body-color);
}

.outage-card .card-title a:hover {
    color: #0d6efd;
}

/* Date and address rows */
.outage-dates,
.outage-addresses {
    color: #6c757d;
}

.outage-dates i,
.outage-addresses i {
    color: #0d6efd;
}

/* Details page info row */
.outage-info-row {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    flex-wrap: wrap;
}

.outage-content p {
    line-height: 1.7;
    white-space: pre-line;
}

/* ===== Dark Theme ===== */
[data-theme="dark"] .outage-card {
    background-color: var(--card-bg, #1e1e2e);
}

[data-theme="dark"] .outage-type-badge {
    background-color: rgba(99, 148, 255, 0.15);
    color: #6394ff;
}

[data-theme="dark"] .outage-emergency .outage-type-badge {
    background-color: rgba(255, 99, 99, 0.15);
    color: #ff6363;
}

[data-theme="dark"] .outage-type-label {
    background-color: rgba(99, 148, 255, 0.15);
    color: #6394ff;
}

[data-theme="dark"] .outage-card .card-title a {
    color: #e0e0e0 !important;
}

[data-theme="dark"] .outage-card .card-title a:hover {
    color: #6394ff;
}

[data-theme="dark"] .outage-card .card-text,
[data-theme="dark"] .outage-card .outage-dates,
[data-theme="dark"] .outage-card .outage-addresses,
[data-theme="dark"] .outage-card .card-footer small {
    color: #9e9e9e !important;
}

[data-theme="dark"] .outage-card .card-footer {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Page header on /Outages */
[data-theme="dark"] .outage-card .btn-outline-primary {
    color: #6394ff;
    border-color: #6394ff;
}


/* ===== Dark Theme — Outages Alert Widget on Home Page ===== */
[data-theme="dark"] #outagesAlert {
    background-color: var(--bg-body, #121212) !important;
}

[data-theme="dark"] #outagesAlert .card {
    background-color: var(--card-bg, #1e1e2e);
}

[data-theme="dark"] #outagesAlert h6 {
    color: #e0e0e0 !important;
}

[data-theme="dark"] #outagesAlert small,
[data-theme="dark"] #outagesAlert .text-muted,
[data-theme="dark"] #outagesAlert .small {
    color: #9e9e9e !important;
}

[data-theme="dark"] #outagesAlert a {
    color: #6394ff !important;
}

[data-theme="dark"] #outagesAlert a:hover {
    color: #8db4ff !important;
}


/* ===== Dark Theme — Outages Pages (Index + Details) ===== */
[data-theme="dark"] .outages-page .card {
    background-color: var(--card-bg, #1e1e2e);
}

[data-theme="dark"] .outages-page h1,
[data-theme="dark"] .outages-page .h3,
[data-theme="dark"] .outages-page .fw-bold,
[data-theme="dark"] .outages-page .card .mb-2 > div,
[data-theme="dark"] .outages-page .outage-info-row,
[data-theme="dark"] .outages-page .outage-info-row strong,
[data-theme="dark"] .outages-page .outage-info-row span,
[data-theme="dark"] .outages-page .outage-content p {
    color: #e0e0e0 !important;
}

[data-theme="dark"] .outages-page .outage-info-row i {
    color: #6394ff !important;
}

[data-theme="dark"] .outages-page .card .border-top {
    border-color: rgba(255, 255, 255, 0.1) !important;
}