.schedule-assignment-card { margin-bottom: 16px; }
.schedule-assignment-form {
  grid-template-columns: minmax(150px, .7fr) minmax(220px, 1fr) minmax(220px, 1.4fr) auto;
  align-items: end;
  margin-top: 16px;
}
.schedule-assignment-form .btn { min-height: 42px; }
.schedule-calendar-card { margin-bottom: 16px; padding: 0; overflow: hidden; }
.schedule-calendar-head {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px; border-bottom: 1px solid rgba(148, 163, 184, .18);
}
.schedule-calendar-head h2 { text-transform: capitalize; }
.schedule-month-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.schedule-period-select { min-width: 165px; color: #98a2b3; font-size: 10px; }
.schedule-month-controls input { width: 165px; }
.schedule-calendar-scroll { overflow-x: auto; }
.schedule-calendar-inner { min-width: 820px; }
.schedule-weekdays, .schedule-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.schedule-weekdays { background: rgba(148, 163, 184, .08); }
.schedule-weekdays div {
  padding: 11px; border-right: 1px solid rgba(148, 163, 184, .15);
  color: #98a2b3; font-size: 11px; font-weight: 900; text-align: center; text-transform: uppercase;
}
.schedule-grid { gap: 1px; background: rgba(148, 163, 184, .18); }
.schedule-day {
  position: relative; min-height: 122px; padding: 10px; background: #0f1728;
  transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.schedule-day[data-schedule-date] { cursor: pointer; }
.schedule-day[data-schedule-date]:hover { z-index: 2; background: #162238; box-shadow: inset 0 0 0 1px rgba(249, 176, 76, .65); }
.schedule-day-blank { background: rgba(10, 16, 29, .65); }
.schedule-day-head { display: flex; align-items: center; justify-content: space-between; min-height: 25px; }
.schedule-day-head > span {
  display: grid; place-items: center; min-width: 27px; height: 27px; padding: 0 7px;
  border-radius: 999px; color: #d0d5dd; font-size: 12px; font-weight: 900;
}
.schedule-day-head small { color: #f9b04c; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.schedule-day.is-today .schedule-day-head > span { background: #f9b04c; color: #111827; }
.schedule-person {
  display: grid; gap: 3px; margin-top: 8px; padding: 9px; border: 1px solid rgba(249, 176, 76, .3);
  border-radius: 10px; background: rgba(249, 176, 76, .1);
}
.schedule-person strong { overflow: hidden; color: #fff; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.schedule-person span, .schedule-person small { overflow: hidden; color: #98a2b3; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.schedule-day.own-shift { box-shadow: inset 0 3px 0 #32d583; }
.schedule-day.own-shift .schedule-person { border-color: rgba(50, 213, 131, .38); background: rgba(50, 213, 131, .12); }
.schedule-empty-day { margin-top: 13px; color: #667085; font-size: 10px; font-weight: 800; text-align: center; }
.schedule-remove {
  position: absolute; top: 7px; right: 7px; width: 23px; height: 23px; padding: 0;
  border: 0; border-radius: 999px; background: rgba(240, 68, 56, .18); color: #f97066; font-weight: 900;
}
.schedule-remove:hover { background: #b42318; color: #fff; }
.schedule-summary-heading { margin-bottom: 16px; }
.schedule-payroll-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 16px; }
.schedule-payroll-stats .stat-value { font-size: clamp(21px, 2vw, 29px); }
.schedule-payable { border-color: rgba(50, 213, 131, .3); background: linear-gradient(145deg, rgba(50, 213, 131, .08), rgba(15, 23, 40, .95)); }
.schedule-negative { color: #f97066; }
.schedule-payroll-table { margin-top: 16px; }

@media (max-width: 1250px) {
  .schedule-assignment-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .schedule-payroll-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .schedule-assignment-form, .schedule-payroll-stats { grid-template-columns: 1fr; }
  .schedule-calendar-head { align-items: stretch; flex-direction: column; }
  .schedule-month-controls input { flex: 1; width: auto; min-width: 145px; }
  .schedule-calendar-inner { min-width: 720px; }
  .schedule-day { min-height: 108px; }
}