/*!
 * EduManage - dashboard.css
 * KPI cards, charts and calendar widgets.
 */

/* ---------- Dashboard widgets ---------- */

.kpi {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  height: 100%;
}

.kpi-top {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--text-secondary);
  font-size: .85rem;
  font-weight: 500;
}

.kpi-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  background: rgba(var(--primary-rgb), .12);
  color: var(--primary);
}

.kpi-value {
  font-size: 1.65rem;
  font-weight: 650;
  letter-spacing: -.02em;
  line-height: 1.1;
}

.kpi-delta {
  font-size: .8rem;
  font-weight: 600;
}

.up {
  color: var(--success);
}

.down {
  color: var(--danger);
}

.spark {
  height: 36px;
  margin-top: .25rem;
}

.chart-box {
  position: relative;
  height: 280px;
}

.stat-block {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.stat-block .kpi-value {
  font-size: 1.5rem;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  text-align: center;
}

.cal-dow {
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-secondary);
  padding: .25rem 0;
}

.cal-cell {
  border-radius: var(--radius-sm);
  padding: .35rem 0;
  font-size: .8rem;
  line-height: 1.2;
  background: var(--muted-bg);
}

.cal-cell small {
  display: block;
  font-size: .65rem;
  font-weight: 700;
}

.cal-empty {
  background: transparent;
}

.cal-off {
  opacity: .45;
}

.cal-p {
  background: rgba(22, 163, 74, .14);
  color: var(--success);
}

.cal-a {
  background: rgba(220, 38, 38, .14);
  color: var(--danger);
}

.cal-l {
  background: rgba(217, 119, 6, .16);
  color: var(--warning);
}

.cal-v {
  background: rgba(8, 145, 178, .14);
  color: var(--info);
}

.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  font-size: .75rem;
  color: var(--text-secondary);
}

/* ---------- Timetable ---------- */
.tt-grid {
  table-layout: fixed;
  min-width: 860px;
}

.tt-time {
  width: 110px;
  font-size: .8rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.tt-break td {
  text-align: center;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-secondary);
  background: var(--muted-bg);
}

.tt-cell {
  padding: .5rem .6rem;
  border-radius: var(--radius-md);
  border-left: 3px solid var(--tt, var(--primary));
  background: rgba(var(--tt-rgb, var(--primary-rgb)), .1);
}

.tt-cell strong {
  display: block;
  font-size: .82rem;
}

.tt-cell small {
  display: block;
  font-size: .72rem;
  line-height: 1.3;
  color: var(--text-secondary);
}

.tt-free {
  font-size: .8rem;
  text-align: center;
  color: var(--text-secondary);
}

.tt-s0 { --tt: #4f46e5; --tt-rgb: 79, 70, 229; }
.tt-s1 { --tt: #0891b2; --tt-rgb: 8, 145, 178; }
.tt-s2 { --tt: #d97706; --tt-rgb: 217, 119, 6; }
.tt-s3 { --tt: #059669; --tt-rgb: 5, 150, 105; }
.tt-s4 { --tt: #9333ea; --tt-rgb: 147, 51, 234; }
.tt-s5 { --tt: #64748b; --tt-rgb: 100, 116, 139; }