/* css/timetable.css */
.timetable-wrapper {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  overflow-x: auto;
}
.timetable {
  width: 100%; border-collapse: separate; border-spacing: 4px;
  min-width: 560px;
}
.timetable th {
  padding: 10px 6px;
  font-size: 12px; font-weight: 700;
  color: var(--text-muted); text-transform: uppercase;
  letter-spacing: 0.5px;
}
.timetable th.today { color: var(--primary); }
.timetable td {
  padding: 10px 8px; text-align: center;
  border-radius: 8px; vertical-align: middle;
  font-size: 13px;
}
.timetable td.period-label {
  background: #f8fafc; font-weight: 600;
  text-align: left; padding: 8px 12px;
  min-width: 90px;
}
.slot-label { font-size: 13px; color: var(--text); }
.slot-time { font-size: 11px; color: var(--text-muted); font-weight: 400; }

.timetable td.cell {
  background: #f8fafc;
  min-width: 80px; height: 64px;
  cursor: default;
  transition: all .15s;
}
.timetable td.cell.today {
  background: var(--primary-50);
}
.timetable td.cell.has-entry {
  background: var(--surface);
  border: 1px solid var(--border);
}
.timetable td.cell.has-entry.today {
  border-color: var(--primary);
  background: var(--primary-50);
}
.timetable td.cell:not(.has-entry) {
  cursor: pointer;
}
.timetable td.cell:not(.has-entry):hover {
  background: var(--primary-50);
  color: var(--primary);
}

.entry-main { font-weight: 600; font-size: 13px; }
.entry-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.entry-empty { color: var(--text-muted); font-size: 12px; }

.break-row td { text-align: left !important; }
.break-cell {
  background: #fef3c7 !important;
  color: #92400e;
  font-weight: 600;
  font-size: 12px;
}

/* Mobile: scroll horizontally, labels stay */
@media (max-width: 600px) {
  .timetable { min-width: 520px; }
  .timetable td { padding: 8px 4px; }
}