/* se-time — sertarul culegătorului de oră (se-time.js).
 *
 * Pastila, sertarul, celula și rândul de acțiuni NU sunt aici: sunt ale calendarului
 * (se-calendar.css — `.cal-field`, `.cal-day-drawer`, `.cal-day`, `.cal-day-actions`),
 * fiindcă ora e a treia coadă a aceleiași componente. Aici stă doar ce e al orei: cele
 * două grile și etichetele lor. Se leagă DUPĂ se-calendar.css.
 *
 * Fiecare valoare e un token canonic `--se-*`; nicio escapadă.
 */

/* Șase coloane de ore la mărimea unui control, cu golul grilei calendarului — lățimea
 * o dă grila orelor, iar minutele se întind pe aceeași lățime. */
.se-time-body {
  display: flex;
  flex-direction: column;
  gap: var(--se-space-8);
  width: calc(6 * var(--se-size-control) + 5 * var(--se-space-4));
}

.se-time-label {
  font-size: var(--se-type-captionmed-size);
  line-height: var(--se-type-captionmed-line);
  font-weight: var(--se-type-captionmed-weight);
  color: var(--se-color-text-description);
}

.se-time-grid {
  display: grid;
  gap: var(--se-space-4);
}

.se-time-hours {
  grid-template-columns: repeat(6, 1fr);
}

/* `auto-fit`: patru sferturi de oră umplu rândul, iar un pas mai mic se așază câte
 * șase, ca orele. Săgețile sus/jos citesc numărul de coloane de aici. */
.se-time-minutes {
  grid-template-columns: repeat(auto-fit, minmax(var(--se-size-control), 1fr));
}

/* Cifrele de lățime fixă, ca „11" și „08" să stea pe aceeași coloană optică. */
.se-time-grid .cal-day,
[data-se-time] .cal-text {
  font-variant-numeric: tabular-nums;
}

/* Minutele cât nu există o oră. Hover-ul calendarului (`:hover:not(.is-selected)`)
 * le-ar picta ca apăsabile, deci starea își rescrie și hover-ul — fundalul ȘI
 * culoarea, regula 3 din antetul se-calendar.css. */
.se-time-drawer .cal-day:disabled,
.se-time-drawer .cal-day:disabled:hover {
  background: none;
  border-color: var(--se-color-border-default);
  color: var(--se-color-primary-20);
  cursor: not-allowed;
}