/* ═══════════════════════════════════════
   PERIOD LIST & CARDS
═══════════════════════════════════════ */

.period-list {
  padding: 6px 6px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ── Card ── */
.card {
  background: #fff;
  border: 1px solid #d8d8d8;
  border-radius: 3px;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  position: relative;
  min-height: 38px;   /* empty / period-0 height */
}

.card.filled {
  min-height: 72px;   /* normal lesson card height */
}

.card.drag-over {
  outline: 2px dashed #43a047;
  background: #f1f8e9;
}

/* ── Right column: period number + time ──
   Slightly grey background, right-aligned text */
.p-right {
  width: 98px;
  flex-shrink: 0;
  background: #f7f7f7;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  padding: 8px 10px 8px 4px;
  gap: 4px;
  border-left: 1px solid #e0e0e0;
}

.p-num {
  font-size: 22px;
  font-weight: 700;
  color: #212121;
  line-height: 1;
}

.p-time {
  font-size: 11.5px;
  color: #757575;
  line-height: 1;
  white-space: nowrap;
  text-align: right;
}

/* ── Color strip ── */
.p-strip {
  width: 8px;
  flex-shrink: 0;
  align-self: stretch;
}

/* ── Text body ── */
.p-body {
  flex: 1;
  padding: 9px 10px 9px 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  min-width: 0;
}

.p-subject {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.3;
  text-align: right;
}

.p-details {
  font-size: 12px;
  color: #616161;
  line-height: 1.3;
  text-align: right;
}