/**
 * RPKI page styles.
 *
 * Used by rpki/dashboard.html and rpki/history.html.
 * Requires compliance.css for design tokens.
 */

/* RPKI-specific stat-box override (uses --surface-alt from compliance.css) */
.stat-box {
    background: var(--surface-alt, var(--bg-tertiary));
}

.change-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    min-width: 70px;
    text-align: center;
}
.change-badge.added { background: var(--success-bg); color: var(--success); }
.change-badge.removed { background: var(--error-bg); color: var(--error); }
.change-badge.modified { background: var(--warning-bg); color: var(--warning); }

.hot-asn-table td.metric {
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.hot-asn-table .added { color: var(--success); }
.hot-asn-table .removed { color: var(--error); }

.recent-change {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.recent-change:last-child { border-bottom: none; }
.recent-change .timestamp {
    font-size: 0.8rem;
    color: var(--text-muted);
    min-width: 140px;
}
.recent-change .asn {
    font-weight: 600;
    min-width: 80px;
}
.recent-change .prefix {
    font-family: var(--font-mono);
    flex: 1;
}
.recent-change .ta {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.query-example {
    background: var(--surface-alt);
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
}
.query-example h4 {
    margin: 0 0 0.5rem 0;
    font-size: 0.9rem;
}
.query-example p {
    margin: 0 0 0.5rem 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.query-example code {
    display: block;
    background: var(--surface);
    padding: 0.5rem;
    border-radius: 4px;
    font-size: 0.85rem;
    overflow-x: auto;
}

/* History-specific styles */
.history-stats {
    display: flex;
    gap: 2rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.history-stat {
    text-align: center;
}
.history-stat .value {
    font-size: 1.5rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.history-stat .value.added { color: var(--success); }
.history-stat .value.removed { color: var(--error); }
.history-stat .label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.change-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
}
.change-row:last-child { border-bottom: none; }

.change-timestamp {
    font-size: 0.8rem;
    color: var(--text-muted);
    min-width: 150px;
}
.change-asn {
    font-weight: 600;
    min-width: 90px;
}
.change-prefix {
    font-family: var(--font-mono);
    flex: 1;
}
.change-maxlen {
    font-family: var(--font-mono);
    color: var(--text-muted);
    min-width: 40px;
}
.change-ta {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    min-width: 50px;
}
.change-expires {
    font-size: 0.8rem;
    color: var(--text-muted);
}