.error-panel-header {
    background: linear-gradient(120deg, #52253c 0%, #9f2f3f 58%, #e06c4f 100%);
    min-height: 250px;
}

.error-panel-header .page-header-subtitle { color: rgba(255, 255, 255, .72); margin-top: .35rem; }
.error-panel .card { border: 0; box-shadow: 0 .15rem 1.25rem rgba(31, 45, 61, .08); }
.error-panel .filter-card { border-radius: .85rem; }
.error-panel .filter-card label,
.event-detail-grid label {
    color: #718096;
    display: block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    margin-bottom: .35rem;
    text-transform: uppercase;
}

.quick-ranges { color: #8492a6; font-size: .75rem; }
.quick-ranges .btn-link { font-size: .75rem; padding-bottom: 0; padding-top: 0; }

.error-kpi { border-radius: .8rem; }
.error-kpi .card-body { min-height: 136px; padding: 1.25rem 1.35rem; position: relative; }
.error-kpi-icon {
    align-items: center;
    border-radius: .65rem;
    display: flex;
    font-size: 1rem;
    height: 36px;
    justify-content: center;
    position: absolute;
    right: 1.2rem;
    top: 1.2rem;
    width: 36px;
}
.error-kpi-label { color: #718096; font-size: .75rem; font-weight: 700; padding-right: 2.8rem; text-transform: uppercase; }
.error-kpi-value { color: #213547; font-size: 2rem; font-weight: 700; letter-spacing: -.035em; line-height: 1.2; margin-top: .25rem; }
.error-kpi small { color: #8492a6; }

.error-panel .card-header {
    background: #fff;
    border-bottom: 1px solid #edf1f5;
    color: #304156;
    font-weight: 700;
    padding: 1rem 1.25rem;
}
.error-chart { height: 310px; position: relative; width: 100%; }

.error-table thead th {
    background: #f8fafc;
    border-bottom: 1px solid #e9eef5;
    border-top: 0;
    color: #718096;
    font-size: .67rem;
    font-weight: 700;
    letter-spacing: .035em;
    padding: .8rem .9rem;
    text-transform: uppercase;
    white-space: nowrap;
}
.error-table td { border-color: #eef2f6; color: #44546a; font-size: .78rem; padding: .75rem .9rem; vertical-align: middle; }
.error-table td small { color: #8a98aa; display: block; margin-top: .15rem; }
.resolved-row { opacity: .64; }

.log-level,
.resolution-badge,
.smtp-code {
    border-radius: 1rem;
    display: inline-block;
    font-size: .66rem;
    font-weight: 700;
    padding: .25rem .5rem;
    white-space: nowrap;
}
.level-warning { background: #fff3d8; color: #99640d; }
.level-severe, .level-error { background: #fde7e7; color: #b9323f; }
.level-unknown { background: #edf2f7; color: #5f7084; }
.resolution-badge.active { background: #fde7e7; color: #b9323f; }
.resolution-badge.resolved { background: #e5f6ed; color: #187c50; }
.smtp-code { background: #fff3d8; color: #99640d; font-family: monospace; font-size: .75rem; }

.event-message { max-width: 330px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-message-full { background: #f8fafc; border-left: 4px solid #e24c4b; border-radius: .3rem; color: #34495e; padding: .85rem 1rem; }
.stack-trace {
    background: #17212b;
    border-radius: .45rem;
    color: #d6e2ed;
    font-size: .72rem;
    line-height: 1.5;
    max-height: 390px;
    overflow: auto;
    padding: 1rem;
    white-space: pre-wrap;
}
.event-detail-grid strong { color: #304156; display: block; font-size: .86rem; }
.error-panel .empty-state { color: #8a98aa !important; padding: 2rem !important; text-align: center !important; }

@media (max-width: 767.98px) {
    .error-chart { height: 270px; }
    .event-detail-grid > div { margin-bottom: 1rem; }
}