.calendar-controls { min-width: 0; }
.calendar-toolbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: .75rem;
  overflow-x: auto;
  scrollbar-width: thin;
  padding: .25rem 0;
}
.calendar-period { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .375rem; width: 292px; flex: 0 0 292px; }
.calendar-period > div:first-child { gap: .375rem; }
.calendar-period > div:first-child > button { width: 36px; height: 40px; }
.calendar-period > button { width: 52px; height: 40px; }
.calendar-period-label { min-width: 0; width: 100%; }
.calendar-period-label > button { min-height: 40px; padding: 0 .25rem; white-space: nowrap; }
.calendar-period-label > p { white-space: nowrap; font-size: 11px; }
.calendar-toolbar > [role="tablist"] { flex: 0 0 auto; width: auto; }
.calendar-toolbar > [role="tablist"] > button { min-width: 0; min-height: 32px; padding: .375rem .75rem; white-space: nowrap; }
.calendar-toolbar-actions { display: flex; flex: 0 0 auto; flex-wrap: nowrap; align-items: center; gap: .5rem; margin-left: auto; }
.calendar-toolbar-actions > [role="combobox"] { width: 144px; min-height: 40px; height: 40px; }
.calendar-toolbar-actions > div { flex-wrap: nowrap; gap: .5rem; }
.calendar-toolbar-actions > div > button { min-height: 40px; height: 40px; white-space: nowrap; }
.calendar-toolbar-actions [aria-label="Azioni calendario"] { width: 40px; padding: 0; }
.calendar-toolbar-actions [aria-label="Azioni calendario"] > span { display: none; }
.calendar-legend-row { display: flex; align-items: center; flex-wrap: nowrap; gap: .75rem; overflow-x: auto; scrollbar-width: thin; padding-bottom: .25rem; }
.calendar-legend-row > [data-calendar-status-legend] { flex: 0 0 auto; flex-wrap: nowrap; gap: .75rem; }
.calendar-legend-row > [data-mona-price-control] { flex: 0 0 auto; }

/* Match the dashboard activation notice, including its single red side border. */
[data-calendar-conflict-alert][role="alert"] {
  border: 0;
  border-inline-start: 3px solid #dc2626;
  border-radius: 4px;
  background: #fff5f5;
  color: #991b1b;
  padding: 14px 18px;
  font-size: 13px;
  line-height: 1.6;
}
[data-calendar-conflict-alert][role="alert"] :is(h3, p, button) { color: inherit; font-size: 13px; line-height: 1.6; }
[data-calendar-conflict-alert] h3 { margin: 0 0 2px; font-weight: 600; }
[data-calendar-conflict-alert] p { margin: 0; font-weight: 400; }
.calendar-conflict-layout { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 24px; }
.calendar-conflict-copy { flex: 1 1 340px; min-width: 0; }
.calendar-conflict-actions { display: flex; flex-wrap: wrap; gap: 8px 20px; min-width: 0; max-width: 100%; }
.calendar-conflict-actions button { min-height: 44px; max-width: 100%; padding: 0; text-align: left; background: transparent; border: 0; cursor: pointer; overflow-wrap: anywhere; }
.calendar-conflict-room, .calendar-conflict-date { display: block; }
.calendar-conflict-room { font-weight: 600; }
.calendar-conflict-date { font-weight: 400; }
[data-calendar-conflict-alert][role="alert"] button:hover { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
[data-calendar-conflict-alert][role="alert"] button:focus-visible { outline: 2px solid #dc2626; outline-offset: 4px; }
.dark [data-calendar-conflict-alert][role="alert"] { background: #301d24; color: #fecaca; border-inline-start-color: #f87171; }
.dark [data-calendar-conflict-alert][role="alert"] button:focus-visible { outline-color: #f87171; }

/* On phones, give every control its own space instead of hiding it off-screen. */
@media (max-width: 767px) {
  .calendar-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .75rem .5rem; overflow: visible; }
  .calendar-period { grid-column: 1 / -1; width: 100%; min-width: 0; }
  .calendar-period > div:first-child > button,
  .calendar-period > button { height: 44px; }
  .calendar-period > div:first-child > button { width: 40px; }
  .calendar-toolbar > [role="tablist"] { grid-column: 1; grid-row: 2; width: 100%; min-width: 0; }
  .calendar-toolbar > [role="tablist"] > button { padding: .375rem .25rem; min-height: 36px; font-size: 12px; }
  .calendar-toolbar-actions { display: contents; }
  .calendar-toolbar-actions > [role="combobox"] { grid-column: 2; grid-row: 2; width: 100%; min-width: 0; height: 46px; padding-left: .5rem; padding-right: .5rem; font-size: 12px; }
  .calendar-toolbar-actions > div { grid-column: 1 / -1; display: flex; width: 100%; min-width: 0; }
  .calendar-toolbar-actions > div > button { height: 44px; }
  .calendar-toolbar-actions > div > button:first-child { flex: 1; min-width: 0; }
  .calendar-toolbar-actions [aria-label="Azioni calendario"] { width: 44px; flex: 0 0 44px; }
  .calendar-legend-row { flex-wrap: wrap; overflow: visible; gap: .75rem; }
  .calendar-legend-row > [data-mona-price-control] { order: -1; min-height: 44px; }
  .calendar-legend-row > [data-calendar-status-legend] { flex: 1 1 100%; min-width: 0; flex-wrap: wrap; gap: .5rem .75rem; }
}