/* Copyright (c) 2025-2026 William Chesher | MIT License */

/* Diagnostic Cards */
.diagnostic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}
.diagnostic-card {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1rem;
    position: relative;
    padding-bottom: 3rem;
}
.diagnostic-card h4 {
    margin: 0 0 0.25rem 0;
    color: #333;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.diagnostic-card h4 svg {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--accent);
}
.diagnostic-card p {
    color: #666;
    font-size: 0.8rem;
    margin: 0 0 0.75rem 0;
}
.diagnostic-card .diag-status {
    font-size: 0.8rem;
    padding: 0.35rem 0.6rem;
    border-radius: 4px;
    display: inline-block;
}
.diagnostic-card .diag-status.pending { background: #f5f5f5; color: #666; }
.diagnostic-card .diag-status.running { background: #fff3e0; color: #e65100; }
.diagnostic-card .diag-status.success { background: #e8f5e9; color: #2e7d32; }
.diagnostic-card .diag-status.error { background: #ffebee; color: #c62828; }
.diagnostic-card .circle-btn {
    position: absolute;
    bottom: 0.75rem;
    right: 0.75rem;
}
.diagnostic-card pre {
    background: #1a1a1a;
    color: #fff;
    padding: 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    max-height: 120px;
    overflow: auto;
    margin: 0.75rem 0 0 0;
    white-space: pre-wrap;
    word-break: break-all;
}

/* stats-row and stat-card base styles in stat-cards.css */

/* Report sections */
.report-section {
    padding: 1rem;
}
.report-section .stats-row {
    margin-top: 1rem;
}
.card-header select {
    padding: 0.4rem 0.75rem;
    border: 1px solid #ddd;
    border-radius: 20px;
    font-size: 0.85rem;
    background: #f8f8f8;
    margin-right: 0.5rem;
}
.header-filters {
    display: inline;
}
.header-filters select {
    margin-left: 0.25rem;
}

/* Event badge */
/* FOLD-PENDING (claude/admin-badge-consolidation): replace per call-site
 * with .badge.<state> for state-style usage or .tag.tag-<sem> for
 * content-tag usage.
 * Reference: output/badge-standard-2026-04-30.md
 */
.event-badge {
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}
.event-badge.trigger { background: #e3f2fd; color: #1565c0; }
.event-badge.value { background: #f3e5f5; color: #7b1fa2; }
.event-badge.action { background: #e8f5e9; color: #2e7d32; }

/* Dark theme */
/* stat-card dark theme in stat-cards.css */
html.dark-theme .diagnostic-card {
    background: #1e1e2e;
    border-color: #3a3a4a;
}
html.dark-theme .diagnostic-card h4 {
    color: #e0e0e0;
}
html.dark-theme .diagnostic-card p {
    color: #888;
}
html.dark-theme .diagnostic-card .diag-status.pending {
    background: #2a2a3a;
    color: #888;
}
html.dark-theme .diagnostic-card .diag-status.running {
    background: #3a2a1a;
    color: #ffb07c;
}
html.dark-theme .diagnostic-card .diag-status.success {
    background: #1a3a2a;
    color: #7cffdc;
}
html.dark-theme .diagnostic-card .diag-status.error {
    background: #3a1a1a;
    color: #ff7c7c;
}
html.dark-theme .card-header select {
    background: #2a3a55;
    border-color: #3a4a65;
    color: #eee;
}

/* Overview tab: four-tier roll-up */
.overview-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 0.4rem;
    vertical-align: middle;
    background: #999;
}
.overview-dot.green { background: #2e7d32; }
.overview-dot.yellow { background: #e65100; }
.overview-dot.red { background: #c62828; }
.overview-dot.unknown { background: #999; }

.overview-meta {
    font-size: 0.85rem;
    color: var(--text-muted);
    padding: 0 0.5rem;
}
.overview-meta .label {
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    margin-right: 0.25rem;
}
.overview-meta + .overview-meta {
    border-left: 1px solid var(--border);
}

.overview-tier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}
.overview-tier-card {
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border, #e0e0e0);
    border-left: 4px solid #999;
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.overview-tier-card.overview-status-green { border-left-color: #2e7d32; }
.overview-tier-card.overview-status-yellow { border-left-color: #e65100; }
.overview-tier-card.overview-status-red { border-left-color: #c62828; }

.overview-tier-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.overview-tier-header h3 {
    margin: 0;
    font-size: 1rem;
    flex: 1;
}
.overview-tier-status {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
.overview-tier-summary {
    font-size: 0.9rem;
    color: var(--text);
}
.overview-tier-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem 0.75rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    padding-top: 0.5rem;
}
.overview-tier-detail-row {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}
.overview-tier-detail-row .k {
    color: var(--text-muted);
    text-transform: lowercase;
}
.overview-tier-detail-row .v {
    color: var(--text);
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 0.7rem;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.overview-tier-items {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    border-top: 1px solid var(--border);
    padding-top: 0.5rem;
    font-size: 0.8rem;
}
.overview-tier-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.overview-tier-item-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
}
.overview-tier-item-meta {
    color: var(--text-muted);
    font-size: 0.7rem;
    font-family: 'SF Mono', 'Fira Code', monospace;
}
.overview-tier-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
    margin-top: auto;
}
.overview-tier-skeleton {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    height: 180px;
    animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.9; }
}

html.dark-theme .overview-tier-card {
    background: #1e1e2e;
    border-color: #3a3a4a;
}
html.dark-theme .overview-tier-skeleton {
    background: #1e1e2e;
    border-color: #3a3a4a;
}