{# Partials: Shared head for stats pages (Chart.js + unified styles) #}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<style>
  /* Utilities */
  .text-muted{color:var(--text-muted)}

  /* Cards and basic blocks */
  .card{
    background:var(--surface);
    border-radius:var(--r-3);
    padding:var(--space-4);
    border:1px solid var(--border-subtle);
    box-shadow:var(--shadow-1);
    transition:transform var(--transition-1), box-shadow var(--transition-1);
  }
  .card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
  .card h3{margin:0 0 8px 0;font-size:16px;color:var(--text-muted);letter-spacing:.2px}
  .kpi{font-size:clamp(22px,4vw,32px);font-weight:700;line-height:1.2}
  .toolbar{display:flex;gap:12px;align-items:center;justify-content:space-between;margin:8px 0;padding:4px 0}
  .toolbar label{color:var(--text-muted)}
  .toolbar select{background:var(--surface);color:var(--text);border:1px solid var(--border-subtle);border-radius:var(--r-2);padding:6px 10px}

  /* Grids used across stats pages */
  .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4);margin:16px 0}
  .charts{display:grid;grid-template-columns:1fr;gap:24px;margin:24px 0}
  .tables{display:grid;grid-template-columns:1fr 1fr;gap:24px}
  .grid{display:grid;grid-template-columns:1fr;gap:24px;margin:16px 0}
  .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}

  @media (max-width: 1280px){
    .stats-grid{grid-template-columns:repeat(3,1fr)}
  }
  /* Responsive */
  @media (max-width: 960px){
    .stats-grid{grid-template-columns:repeat(2,1fr)}
    .tables{grid-template-columns:1fr}
    .grid-2{grid-template-columns:1fr}
  }
  @media (max-width: 560px){
    .toolbar{flex-direction:column;align-items:flex-start;gap:8px}
  }

  /* Tables */
  table{width:100%;border-collapse:collapse}
  thead th{font-weight:600;text-align:left;border-bottom:1px solid var(--border-subtle);padding:8px 6px;color:var(--text-muted)}
  tbody td{border-bottom:1px solid var(--border-subtle);padding:8px 6px}
  tbody tr:nth-child(even){background:rgba(255,255,255,0.02)}
  tbody tr:hover{background:rgba(255,255,255,0.04)}
</style>

<script>
  // Harmonize Chart.js defaults with theme tokens
  if (window.Chart) {
    try {
      const cs = getComputedStyle(document.documentElement);
      const text = cs.getPropertyValue('--text') || '#c4d7e0';
      const font = cs.getPropertyValue('--font-sans') || 'system-ui, sans-serif';
      Chart.defaults.color = String(text).trim();
      Chart.defaults.font.family = String(font).trim();
      Chart.defaults.plugins.legend.labels.boxWidth = 12;
    } catch (e) {
      // no-op
    }
  }
</script>