/* Incident Management — ServiceAlert.ai */

/* Cards */
.di-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.15s;
}
.di-card:hover {
    border-color: var(--accent);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.di-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.di-title {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--text-primary);
}
.di-card-meta {
    display: flex;
    gap: 16px;
    margin-top: 6px;
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

/* Badges */
.di-sev-badge, .di-status-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

/* Filter bar */
.di-filter-bar {
    display: flex;
    gap: 4px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.di-filter-btn {
    padding: 6px 14px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.di-filter-btn:hover { background: var(--bg-tertiary); }
.di-filter-btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* Detail view */
.di-detail-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.82rem;
    color: var(--accent);
    cursor: pointer;
    margin-bottom: 16px;
    font-weight: 500;
}
.di-detail-back:hover { text-decoration: underline; }

.di-detail-header {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 18px 22px;
    margin-bottom: 16px;
}

/* Update form */
.di-update-form {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 16px;
}
.di-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-family: inherit;
    box-sizing: border-box;
}
.di-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}
textarea.di-input { resize: vertical; min-height: 60px; }
select.di-input { cursor: pointer; }

.di-btn {
    padding: 8px 18px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
    margin-top: 8px;
}
.di-btn-primary {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.di-btn-primary:hover { opacity: 0.9; }
.di-btn-secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* Timeline */
.di-timeline {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 16px 20px;
}
.di-timeline-entry {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}
.di-timeline-entry:last-child { border-bottom: none; }
.di-timeline-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 5px;
}
.di-timeline-content { flex: 1; min-width: 0; }
.di-timeline-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Declare form */
.di-declare-form {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 20px 24px;
}
.di-form-group {
    margin-bottom: 14px;
}
.di-form-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 4px;
}