.scp-cc { --exco-navy: #0f172a; --exco-gold: #c9a227; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #1e293b; max-width: 1200px; margin: 0 auto; }
.scp-cc-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; border-bottom: 3px solid var(--exco-gold); padding-bottom: 14px; margin-bottom: 20px; }
.scp-cc-header h2 { margin: 0; color: var(--exco-navy); }
.scp-cc-header-right { display: flex; align-items: center; gap: 14px; }
.scp-cc-org-switch select { padding: 6px 10px; border-radius: 4px; border: 1px solid #cbd5e1; }
.scp-cc-logout { color: var(--exco-navy); text-decoration: underline; font-size: 13px; }

.scp-cc-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 14px; margin-bottom: 20px; }
.scp-cc-filters label { display: flex; flex-direction: column; font-size: 12px; color: #475569; gap: 4px; }
.scp-cc-filters input, .scp-cc-filters select { padding: 5px 8px; border: 1px solid #cbd5e1; border-radius: 4px; min-width: 120px; }
.scp-cc-export-links { margin-left: auto; font-size: 13px; }
.scp-cc-export-links a { color: var(--exco-navy); font-weight: 600; text-decoration: none; margin: 0 3px; }
.scp-cc-export-links a:hover { color: var(--exco-gold); }

.scp-cc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 24px; }
.scp-cc-kpi { background: var(--exco-navy); color: #fff; border-radius: 8px; padding: 16px; }
.scp-cc-kpi .val { font-size: 28px; font-weight: 700; }
.scp-cc-kpi .lbl { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; opacity: .8; margin-top: 4px; }
.scp-cc-kpi .trend { font-size: 12px; margin-top: 6px; }
.scp-cc-kpi .trend.up { color: #fca5a5; }
.scp-cc-kpi .trend.down { color: #86efac; }

.scp-cc-charts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-bottom: 24px; }
.scp-cc-chart-box { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 14px; height: 280px; }
.scp-cc-chart-wide { grid-column: 1 / -1; }

.scp-cc h3 { color: var(--exco-navy); border-left: 4px solid var(--exco-gold); padding-left: 10px; margin-top: 30px; }

#scp-cc-heatmap table, #scp-cc-cases table, #scp-cc-repeats table { width: 100%; border-collapse: collapse; font-size: 13px; }
#scp-cc-heatmap th, #scp-cc-cases th, #scp-cc-repeats th { background: var(--exco-navy); color: #fff; padding: 8px; text-align: left; }
#scp-cc-heatmap td, #scp-cc-cases td, #scp-cc-repeats td { padding: 7px 8px; border-bottom: 1px solid #e2e8f0; }
#scp-cc-heatmap tr:hover td, #scp-cc-cases tr:hover td { background: #f8fafc; }
.scp-cc-heat-cell { text-align: center; border-radius: 4px; }

.scp-cc-tabs { margin-top: 20px; }
.scp-cc-tab-btn { background: #f1f5f9; border: 1px solid #cbd5e1; padding: 7px 16px; cursor: pointer; border-radius: 4px 4px 0 0; }
.scp-cc-tab-btn.active { background: var(--exco-navy); color: #fff; border-color: var(--exco-navy); }

.scp-cc-pagination { display: flex; gap: 8px; margin-top: 12px; }
.scp-cc-pagination button { padding: 5px 10px; border: 1px solid #cbd5e1; background: #fff; border-radius: 4px; cursor: pointer; }
.scp-cc-pagination button.active { background: var(--exco-navy); color: #fff; }

.sla-ok { color: #16a34a; font-weight: 600; }
.sla-warning { color: #d97706; font-weight: 600; }
.sla-breached { color: #dc2626; font-weight: 600; }

.scp-cc-login, .scp-cc-denied { max-width: 380px; margin: 60px auto; text-align: center; }
.scp-cc-login form { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.scp-cc-login label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.scp-cc-login input { padding: 8px; border: 1px solid #cbd5e1; border-radius: 4px; }
.scp-cc-login button { background: var(--exco-navy); color: #fff; border: none; padding: 10px; border-radius: 4px; cursor: pointer; margin-top: 8px; }
.scp-cc-login-error { color: #dc2626; }

.scp-cc-kpi-widget { max-width: 900px; }
.scp-cc-kpi-widget h4 { color: var(--exco-navy); margin: 0 0 10px; }
.scp-cc-kpi-widget .scp-cc-kpis { margin-bottom: 8px; }
.scp-cc-kpi-widget-link { font-size: 13px; }
.scp-cc-kpi-widget-link a { color: var(--exco-navy); font-weight: 600; text-decoration: none; }
.scp-cc-kpi-widget-link a:hover { color: var(--exco-gold); }

@media (max-width: 782px) {
	.scp-cc-charts { grid-template-columns: 1fr; }
}