/* ServiceAlert.ai - Incidents Hub Page Styles */

.incidents-page {
    padding: 40px 0 80px;
}

.incidents-header {
    text-align: center;
    margin-bottom: 32px;
}

.incidents-header h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.incidents-header p {
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

/* Filters */
.incidents-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
    align-items: center;
}

.incidents-filters select,
.incidents-filters input {
    padding: 8px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.85rem;
    outline: none;
}

.incidents-filters select:focus,
.incidents-filters input:focus {
    border-color: var(--accent);
}

.incidents-filters input[type="search"] {
    min-width: 200px;
    flex: 1;
}

/* Stats bar */
.incidents-stats {
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
    padding: 16px 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.incidents-stats .stat-value {
    font-weight: 600;
    color: var(--text-primary);
    margin-right: 4px;
}

/* Incident list */
.incidents-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 32px;
}

.incident-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s;
}

.incident-row:hover {
    border-color: var(--accent);
}

.incident-row .ir-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    flex-shrink: 0;
}

.incident-row .ir-info {
    flex: 1;
    min-width: 0;
}

.incident-row .ir-name {
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.incident-row .ir-service {
    font-size: 0.8rem;
    color: var(--text-tertiary);
    margin-top: 2px;
}

.incident-row .ir-badges {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.incident-row .ir-date {
    font-size: 0.8rem;
    color: var(--text-tertiary);
    flex-shrink: 0;
    white-space: nowrap;
}

/* Impact badges */
.badge-impact {
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.badge-impact-none { background: rgba(107,114,128,0.15); color: var(--text-tertiary); }
.badge-impact-minor { background: rgba(245,158,11,0.15); color: var(--status-degraded); }
.badge-impact-major { background: rgba(249,115,22,0.15); color: var(--status-partial); }
.badge-impact-critical { background: rgba(239,68,68,0.15); color: var(--status-major); }

/* Status badges */
.badge-status {
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.badge-status-resolved { background: rgba(16,185,129,0.15); color: var(--status-operational); }
.badge-status-investigating,
.badge-status-identified,
.badge-status-monitoring { background: rgba(245,158,11,0.15); color: var(--status-degraded); }

/* Pagination */
.incidents-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}

.incidents-pagination a,
.incidents-pagination span {
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    text-decoration: none;
}

.incidents-pagination a {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    transition: border-color 0.15s;
}

.incidents-pagination a:hover {
    border-color: var(--accent);
}

.incidents-pagination .active {
    background: var(--accent);
    color: #fff;
    border: 1px solid var(--accent);
}

/* Empty state */
.incidents-empty {
    text-align: center;
    padding: 60px 24px;
    color: var(--text-secondary);
}

.incidents-empty p {
    margin-bottom: 12px;
}

/* CTA */
.incidents-cta {
    background: var(--accent-subtle);
    border: 1px solid rgba(99,102,241,0.2);
    border-radius: 10px;
    padding: 24px;
    text-align: center;
    margin-top: 40px;
}

.incidents-cta p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 12px;
}

.incidents-cta a {
    display: inline-block;
    padding: 10px 24px;
    background: var(--accent);
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
}

.incidents-cta a:hover {
    background: var(--accent-hover);
}

/* Responsive */
@media (max-width: 768px) {
    .incidents-header h1 { font-size: 1.5rem; }
    .incidents-filters { flex-direction: column; }
    .incidents-stats { flex-direction: column; gap: 8px; }
    .incident-row { flex-wrap: wrap; }
    .incident-row .ir-badges { width: 100%; margin-top: 4px; }
}