.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-anchor-input {
  width: 150px;
}

.calendar-layout {
  display: flex;
  gap: 1rem;
  align-items: stretch;
  min-height: 420px;
  max-height: 85vh;
}

.calendar-layout > .card {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.calendar-sidebar {
  width: 240px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.calendar-sidebar-scroll {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

#calendarEmployeeFilterGroup .btn.active {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}

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

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

.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: 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(97, 134, 215, 0.2);
  background: #6186d7;
  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-time {
  font-size: 11px;
  font-weight: 700;
  color: #334155;
}

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

.calendar-block-employee-shift {
  color: #b45309;
  font-weight: 600;
}

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

.calendar-employee-card {
  width: 100%;
  cursor: pointer;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  background: #ffffff;
  padding: 0;
  transition: border-color 0.15s, box-shadow 0.15s;
}

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

.calendar-employee-card:hover {
  border-color: #6186d7;
}

.calendar-employee-details-btn {
  flex-shrink: 0;
  padding: 0.15rem 0.35rem;
  font-size: 0.75rem;
  line-height: 1;
}

.calendar-employee-card-active {
  border-color: #6186d7;
  box-shadow: 0 0 0 2px rgba(97, 134, 215, 0.25);
}

.calendar-block-dimmed {
  opacity: 0.25;
}

.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-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-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-employee-shift {
  color: #fbbf24;
}

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

:root[data-theme="dark"] .calendar-employee-card:hover {
  border-color: #60a5fa;
}

:root[data-theme="dark"] .calendar-employee-card-active {
  border-color: #60a5fa;
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.3);
}

: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: 991.98px) {
  .calendar-toolbar {
    height: auto;
    flex-direction: column;
    align-items: stretch;
  }

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

  /* Row 1: Week/Month (order 0) + Refresh (order 1) */
  #calendarRefreshBtn {
    order: 1;
    margin-left: auto;
  }

  /* Line break between row 1 and row 2 */
  .calendar-toolbar-left::before {
    content: "";
    flex-basis: 100%;
    height: 0;
    order: 2;
  }

  /* Row 2: Prev + date + Next */
  #calendarPrevBtn {
    order: 3;
  }

  .calendar-anchor-input {
    order: 4;
    width: 0;
    min-width: 0;
    flex: 1 1 auto;
  }

  #calendarNextBtn {
    order: 5;
  }

  .calendar-layout {
    flex-direction: column;
    max-height: none;
  }

  .calendar-sidebar {
    width: 100%;
  }

  .calendar-sidebar-scroll {
    max-height: 50vh;
  }
}

@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));
  }
}