/* Status page styles — status.brrain.io */

/* ===== Status Page ===== */

.status-page {
    max-width: var(--max-width-narrow);
    margin: 0 auto;
    padding: var(--space-xl) var(--space-md);
}

/* ===== Header ===== */

.status-page__header {
    text-align: center;
    margin-bottom: var(--space-2xl);
}

.status-page__logo {
    display: inline-block;
    text-decoration: none;
    margin-bottom: var(--space-lg);
}

.status-page__logo-text {
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    font-weight: 600;
    color: var(--color-text-primary);
    letter-spacing: -0.02em;
}

.status-page__title {
    font-size: var(--text-3xl);
    font-weight: 700;
    margin-bottom: var(--space-lg);
}

.status-page__overall {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-full);
    border: 1px solid;
    margin-bottom: var(--space-md);
}

.status-page__overall--operational {
    color: var(--color-success);
    border-color: rgba(0, 200, 83, 0.3);
    background: rgba(0, 200, 83, 0.1);
}

.status-page__overall--degraded {
    color: var(--color-warning);
    border-color: rgba(255, 214, 0, 0.3);
    background: rgba(255, 214, 0, 0.1);
}

.status-page__overall-indicator {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: currentColor;
}

.status-page__overall-text {
    font-size: var(--text-sm);
    font-weight: 500;
}

.status-page__updated {
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
}

/* ===== Section title ===== */

.status-page__section-title {
    font-size: var(--text-xl);
    font-weight: 600;
    margin-bottom: var(--space-lg);
}

/* ===== Components ===== */

.status-page__components {
    margin-bottom: var(--space-2xl);
}

.status-page__component-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.status-component {
    padding: var(--space-md) var(--space-lg);
}

.status-component__info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-md);
}

.status-component__name {
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--color-text-primary);
}

.status-component__status {
    font-size: var(--text-sm);
    font-weight: 500;
}

.status-component__status--operational {
    color: var(--color-success);
}

.status-component__status--degraded {
    color: var(--color-warning);
}

.status-component__status--outage {
    color: var(--color-error);
}

.status-component__status--maintenance {
    color: var(--color-accent-cyan);
}

/* ===== Uptime bars ===== */

.status-component__bars {
    display: flex;
    gap: 2px;
    margin-bottom: var(--space-xs);
}

.status-component__bar {
    flex: 1;
    height: 28px;
    border-radius: 2px;
    transition: opacity var(--transition-fast);
}

.status-component__bar:hover {
    opacity: 0.8;
}

.status-component__bar--operational {
    background: var(--color-success);
}

.status-component__bar--degraded {
    background: var(--color-warning);
}

.status-component__bar--outage {
    background: var(--color-error);
}

.status-component__bar--maintenance {
    background: var(--color-accent-cyan);
}

.status-component__bar--none {
    background: var(--color-surface-3);
}

.status-component__uptime-meta {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
}

/* ===== Incidents ===== */

.status-page__incidents {
    margin-bottom: var(--space-2xl);
}

.status-incident {
    margin-bottom: var(--space-md);
    padding: var(--space-lg);
}

.status-incident__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-md);
}

.status-incident__title {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text-primary);
}

.status-incident__timeline {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding-left: var(--space-md);
    border-left: 2px solid var(--color-border);
}

.status-incident__update {
    display: flex;
    gap: var(--space-md);
    position: relative;
}

.status-incident__update::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--space-md) - 5px);
    top: 6px;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--color-border);
}

.status-incident__update-status {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    min-width: 80px;
}

.status-incident__update-status--investigating {
    color: var(--color-warning);
}

.status-incident__update-status--identified {
    color: var(--color-error);
}

.status-incident__update-status--monitoring {
    color: var(--color-accent-cyan);
}

.status-incident__update-status--resolved {
    color: var(--color-success);
}

.status-incident__update-message {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.status-incident__update-time {
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    margin-top: 2px;
    display: block;
}

/* ===== No incidents ===== */

.status-page__no-incidents {
    text-align: center;
    padding: var(--space-xl);
    color: var(--color-text-secondary);
}

/* ===== Footer ===== */

.status-page__footer {
    text-align: center;
    padding-top: var(--space-xl);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
}

.status-page__footer a {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.status-page__footer a:hover {
    color: var(--color-accent-cyan);
}