/* ─── Director analytics charts ─── */

.analytics-section { }

.analytics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--s-3);
}

@media (max-width: 1100px) {
  .analytics-grid { grid-template-columns: 1fr; }
}

.analytics-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-height: 200px;
}

.analytics-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-3);
}

.analytics-card-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-text-muted);
  margin-bottom: 4px;
}

.analytics-card-value {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--c-text);
  line-height: 1;
}

.analytics-card-suffix {
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  color: var(--c-text-muted);
  margin-left: 4px;
}

.analytics-card-trend { flex-shrink: 0; }
.trend {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: var(--fw-semibold);
}
.trend--up   { background: #f0fdf4; color: #15803d; }
.trend--up::before { content: '▲'; margin-right: 3px; font-size: 9px; }
.trend--down { background: #fef2f2; color: #b91c1c; }
.trend--down::before { content: '▼'; margin-right: 3px; font-size: 9px; }
.trend--flat { background: #f1f5f9; color: #64748b; }
.trend--flat::before { content: '—'; margin-right: 3px; }

.analytics-chart {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: end;
  gap: 4px;
  height: 100px;
  margin-top: var(--s-2);
}

.analytics-bar {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 3px;
  font-size: 9px;
}

.analytics-bar-fill {
  width: 100%;
  min-height: 2px;
  border-radius: 3px 3px 0 0;
  transition: height var(--t-normal) var(--e-out);
}

.analytics-bar-num {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 9px;
  font-weight: var(--fw-semibold);
  padding: 1px 0;
  pointer-events: none;
}

.analytics-bar-label {
  font-size: 9px;
  color: var(--c-text-light);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .analytics-bar-label { display: none; }
  .analytics-bar-num { font-size: 8px; }
}