.calendar-controls-shell {
  margin: 0 0 1rem;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  height: 4rem;
  gap: 8px;
  flex-wrap: wrap;
  border: 0;
  border-radius: 10px;
  padding: 0.56rem 0.62rem;
  background: transparent;
}

.calendar-toolbar-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.calendar-toolbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.calendar-toolbar-label {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  color: #68788f;
}

.calendar-anchor-input {
  width: 150px;
}

.calendar-location-filter {
  min-width: 188px;
}

.calendar-grid-wrap {
  width: 100%;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

.calendar-grid-month {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-day-card {
  border: 1px solid #dde5f1;
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
  min-height: 164px;
}

.calendar-day-card-month {
  min-height: 132px;
}

.calendar-day-card-muted {
  opacity: 0.6;
}

.calendar-day-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.32rem;
  padding: 0.48rem 0.56rem;
  border-bottom: 1px solid rgba(37, 99, 235, 0.2);
  background: #2563eb;
  border-radius: 10px 10px 0 0;
}

.calendar-day-title {
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.calendar-day-date {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
}

.calendar-day-body {
  padding: 0.48rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.calendar-empty {
  font-size: 11px;
  color: #6b778a;
}

.calendar-block {
  border: 1px solid #cad8ff;
  background: #eef4ff;
  border-radius: 7px;
  padding: 4px 6px;
}

.calendar-block-shift {
  border-color: #ffe2a8;
  background: #fff8e8;
}

.calendar-block-time {
  font-size: 11px;
  font-weight: 700;
  color: #334155;
}

.calendar-block-employee {
  font-size: 11px;
  color: #0f172a;
}

.calendar-block-location {
  font-size: 10px;
  color: #64748b;
}

.calendar-off-form .form-label {
  font-size: 11px;
}

.calendar-off-table th,
.calendar-off-table td {
  white-space: nowrap;
}

.calendar-off-table td:nth-child(4) {
  max-width: 520px;
  white-space: normal;
}

.calendar-off-event {
  border: 1px solid #94a7c2;
  background: #dfe6f3;
  border-radius: 7px;
  padding: 4px 6px;
}

.calendar-off-event-holiday {
  border-color: #fecaca;
  background: #fff5f5;
}

.calendar-off-event-sick {
  border-color: #ddd6fe;
  background: #f7f5ff;
}

.calendar-off-event-title {
  font-size: 11px;
  font-weight: 700;
  color: #334155;
}

.calendar-off-event-holiday .calendar-off-event-title {
  color: #9f1239;
}

.calendar-off-event-sick .calendar-off-event-title {
  color: #5b21b6;
}

.calendar-off-event-note {
  font-size: 11px;
  color: #111827;
}

.calendar-off-event-scope {
  font-size: 10px;
  color: #6b7280;
}

:root[data-theme="dark"] .calendar-toolbar-label {
  color: var(--ui-muted);
}

:root[data-theme="dark"] .calendar-day-card {
  border-color: var(--ui-border);
  background: var(--ui-surface);
}

:root[data-theme="dark"] .calendar-day-head {
  border-bottom-color: var(--ui-border);
  background: #162436;
}

:root[data-theme="dark"] .calendar-day-title {
  color: #c7d2e2;
}

:root[data-theme="dark"] .calendar-day-date,
:root[data-theme="dark"] .calendar-empty,
:root[data-theme="dark"] .calendar-off-event-scope {
  color: #9fb0c8;
}

:root[data-theme="dark"] .calendar-block {
  border-color: #3e5f88;
  background: #1c324d;
}

:root[data-theme="dark"] .calendar-block-shift {
  border-color: #7d6334;
  background: #3f321f;
}

:root[data-theme="dark"] .calendar-block-time,
:root[data-theme="dark"] .calendar-off-event-title {
  color: #dbeafe;
}

:root[data-theme="dark"] .calendar-block-employee,
:root[data-theme="dark"] .calendar-off-event-note {
  color: #e2e8f0;
}

:root[data-theme="dark"] .calendar-block-location {
  color: #9fb0c8;
}

:root[data-theme="dark"] .calendar-off-event {
  border-color: #3a4d66;
  background: #1a2c44;
}

:root[data-theme="dark"] .calendar-off-event-holiday {
  border-color: #8f364e;
  background: #3d1f2a;
}

:root[data-theme="dark"] .calendar-off-event-sick {
  border-color: #4f4f90;
  background: #2a2442;
}

:root[data-theme="dark"] .calendar-off-event-holiday .calendar-off-event-title {
  color: #fecdd3;
}

:root[data-theme="dark"] .calendar-off-event-sick .calendar-off-event-title {
  color: #ddd6fe;
}

@media (max-width: 768px) {
  .calendar-anchor-input {
    width: 132px;
  }

  .calendar-location-filter {
    min-width: 150px;
  }

  .calendar-toolbar-right {
    width: 100%;
  }

  .calendar-location-filter {
    width: 100%;
  }

}

@media (max-width: 1400px) {
  .calendar-grid,
  .calendar-grid-month {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .calendar-grid,
  .calendar-grid-month {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .calendar-grid,
  .calendar-grid-month {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .calendar-grid,
  .calendar-grid-month {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}