/* ===== Shift legend ===== */
.legend { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block: var(--space-4); }
.legend .item { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-caption); color: var(--color-text-secondary); }
.legend .swatch { width: 16px; height: 16px; border-radius: var(--radius-sm); flex-shrink: 0; }
.sw-morning { background: var(--shift-morning); }
.sw-evening { background: var(--shift-evening); }
.sw-night { background: var(--shift-night); }
.sw-off { background: var(--shift-off); }
.sw-holiday { background: var(--shift-holiday); }
.sw-training { background: var(--shift-training); }

/* ===== Calendar ===== */
.calendar-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
/* Reserve space so switching skeleton -> calendar does not shift layout (CLS). */
.calendar-months { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); min-height: 320px; }
.cal-month { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg); break-inside: avoid; }
.cal-month h3 { font-size: var(--fs-body); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); margin: 0; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-grid .dow { font-size: var(--fs-caption); font-weight: 600; text-align: center; padding: var(--space-2) 0; color: var(--color-text-secondary); }
.cal-cell { aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: var(--fs-caption); border-top: 1px solid var(--color-border); position: relative; cursor: default; }
.cal-cell.empty { background: var(--color-card-bg); }
.cal-cell.clickable { cursor: pointer; transition: background var(--transition-fast); }
.cal-cell.clickable:hover { background: var(--color-card-bg); }
.cal-cell .num { font-weight: 600; }
.cal-cell .dot { width: 22px; height: 4px; border-radius: var(--radius-full); }
.cal-cell.today { outline: 2px solid var(--color-primary); outline-offset: -2px; border-radius: var(--radius-sm); }
.cal-cell.weekend .num { color: var(--color-text-secondary); }
.cal-cell.shift-morning { background: color-mix(in srgb, var(--shift-morning) 14%, transparent); }
.cal-cell.shift-evening { background: color-mix(in srgb, var(--shift-evening) 16%, transparent); }
.cal-cell.shift-night { background: color-mix(in srgb, var(--shift-night) 16%, transparent); }
.cal-cell.shift-off { background: color-mix(in srgb, var(--shift-off) 12%, transparent); }
.cal-cell.holiday .num { color: var(--shift-holiday); }
.cal-cell.holiday::after { content: ""; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--shift-holiday); }

/* ===== Day panel (modal-lite) ===== */
.day-panel { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(17,24,39,0.5); z-index: 1050; padding: var(--space-4); }
.day-panel[data-open="true"] { display: flex; }
.day-panel .panel { background: var(--color-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); max-width: 360px; width: 100%; padding: var(--space-5); }
.day-panel dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); margin-top: var(--space-4); }
.day-panel dt { color: var(--color-text-secondary); font-size: var(--fs-caption); }
.day-panel dd { font-weight: 600; text-align: right; }

.export-panel { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }

/* ===== Calendar controls (month filter) ===== */
.cal-controls { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-bottom: var(--space-4); }
.cal-controls label { font-size: var(--fs-caption); font-weight: 600; color: var(--color-text-secondary); }
.cal-controls .select { height: 44px; width: auto; min-width: 160px; }

/* ===== Holiday panel ===== */
.holiday-panel { list-style: none; padding: 0; margin: var(--space-4) 0 0; display: grid; gap: var(--space-2); }
.holiday-panel li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: var(--fs-caption); }
.holiday-panel .h-date { font-weight: 600; min-width: 56px; }
.holiday-panel .h-name { flex: 1; }
.holiday-panel .h-status { font-weight: 600; padding: 2px var(--space-2); border-radius: var(--radius-full); }
.holiday-panel .h-status.work { color: var(--shift-holiday); }
.holiday-panel .h-status.off { color: var(--shift-off); }

/* ===== Recent schedules ===== */
.recent-list { list-style: none; padding: 0; margin: var(--space-3) 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.recent-list .btn { height: 40px; }


@media (max-width: 480px) {
  .cal-cell { font-size: 11px; }
  .cal-cell .dot { width: 16px; }
}