/* ==========================================================================
   MODULE 3: MANAGEMENT KPI REPORT & SPREADING MATRIX STYLES
   Excel-like Performance Grid, Blade Wear Analytics, Macro Trend Cards
   ========================================================================== */

.kpi-report-container {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Macro Highlights Grid */
.macro-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.macro-card {
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.macro-card .title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--slate-400);
}

.macro-card .big-val {
  font-size: 1.85rem;
  font-weight: 900;
  color: #ffffff;
}

.macro-card .sub-stat {
  font-size: 0.75rem;
  color: var(--slate-300);
}

/* Excel Matrix Styles */
.matrix-container {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.72rem;
  text-align: center;
}

.matrix-table th, .matrix-table td {
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.35rem 0.25rem;
}

.matrix-table th {
  background: rgba(30, 41, 59, 0.95);
  color: var(--slate-200);
  font-weight: 700;
  white-space: nowrap;
}

.matrix-table th.th-yellow { background-color: #854d0e; color: #fef08a; }
.matrix-table th.th-orange { background-color: #9a3412; color: #fed7aa; }
.matrix-table th.th-blue { background-color: #0369a1; color: #bae6fd; }
.matrix-table th.th-green { background-color: #166534; color: #bbf7d0; }

.matrix-table td.col-table-name {
  text-align: left;
  font-weight: 700;
  color: #ffffff;
  padding-left: 0.65rem;
  background: rgba(30, 41, 59, 0.6);
  white-space: nowrap;
}

.matrix-table td.col-total {
  font-weight: 800;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.1);
}

.matrix-table tr.row-grand-total {
  background: rgba(79, 70, 229, 0.2);
  font-weight: 800;
  color: #ffffff;
}

/* Blade Analytics Tabular */
.blade-wear-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.blade-wear-table th {
  background: rgba(30, 41, 59, 0.9);
  padding: 0.6rem 0.75rem;
  text-align: left;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.blade-wear-table td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Weekly CCR Micro Table */
.ccr-week-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
}

.ccr-week-box {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 0.75rem;
  text-align: center;
}

.ccr-week-box .week-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--slate-400);
}

.ccr-week-box .week-score {
  font-size: 1.4rem;
  font-weight: 900;
  color: #10b981;
}

/* Light Theme Overrides */
[data-theme="light"] .macro-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .macro-card .title {
  color: #64748b;
}

[data-theme="light"] .macro-card .big-val {
  color: #1e293b;
}

[data-theme="light"] .macro-card .sub-stat {
  color: #475569;
}

[data-theme="light"] .matrix-container {
  background: #ffffff;
  border: 1px solid #e2e8f0;
}

[data-theme="light"] .matrix-table th {
  background: #f8fafc;
  color: #334155;
  border: 1px solid #e2e8f0;
}

[data-theme="light"] .matrix-table td {
  border: 1px solid #f1f5f9;
  color: #1e293b;
}

[data-theme="light"] .matrix-table td.col-table-name {
  background: #f8fafc;
  color: #0f172a;
  border: 1px solid #e2e8f0;
}

[data-theme="light"] .matrix-table td.col-total {
  background: #f0f9ff;
  color: #0284c7;
}

[data-theme="light"] .matrix-table tr.row-grand-total {
  background: #eef2ff;
  color: #3730a3;
}

[data-theme="light"] .blade-wear-table th {
  background: #f8fafc;
  color: #334155;
  border-bottom: 2px solid #e2e8f0;
}

[data-theme="light"] .blade-wear-table td {
  color: #1e293b;
  border-bottom: 1px solid #f1f5f9;
}

[data-theme="light"] .ccr-week-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
}