.calendar-timeline { min-width: 0; max-width: 100%; }
.calendar-timeline-scroll { max-width: 100%; max-height: min(680px, 74dvh); overflow: auto; overscroll-behavior: contain; border: 1px solid #dce6f0; border-radius: 8px; background: #fff; scrollbar-gutter: stable; }
.calendar-timeline-scroll:focus-visible { outline: 2px solid #197ac8; outline-offset: 2px; }
.calendar-timeline-board { min-width: 0; }
.calendar-timeline.is-week .calendar-timeline-board { min-width: 850px; }
.calendar-timeline-headers, .calendar-timeline-all-day, .calendar-timeline-hours { display: grid; grid-template-columns: 58px repeat(var(--calendar-days), minmax(0, 1fr)); min-width: 0; }
.calendar-timeline-headers { position: sticky; top: 0; z-index: 6; background: #f5f8fc; }
.calendar-timeline-corner { border-right: 1px solid #e0e8f1; border-bottom: 1px solid #dce6f0; }
.calendar-timeline-header-day { display: grid; align-items: center; min-width: 0; min-height: 52px; margin: 0; padding: 9px 5px; border: 0; border-right: 1px solid #e0e8f1; border-bottom: 1px solid #dce6f0; border-radius: 0; background: #f5f8fc; color: #3c6282; font: inherit; font-size: 12px; font-weight: 600; text-align: center; cursor: pointer; overflow-wrap: anywhere; }
.calendar-timeline-header-day.is-today { color: #0876d3; }
.calendar-timeline-header-day.is-selected { background: #e8f4ff; box-shadow: inset 0 -3px #2486d7; }
.calendar-timeline-header-day:focus-visible { position: relative; outline: 2px solid #197ac8; outline-offset: -3px; }
.calendar-timeline-all-day { position: sticky; top: 52px; z-index: 5; min-height: 42px; border-bottom: 1px solid #cddceb; background: #fff; }
.calendar-timeline-all-day-label { min-width: 0; padding: 10px 4px; border-right: 1px solid #e0e8f1; color: #7c8fa2; font-size: 10px; line-height: 1.4; text-align: center; overflow-wrap: anywhere; }
.calendar-timeline-all-day-column { display: grid; align-content: start; gap: 4px; min-width: 0; max-height: 150px; padding: 4px; overflow: auto; border-right: 1px solid #e0e8f1; }
.calendar-timeline-all-day-event { display: grid; gap: 3px; min-width: 0; width: 100%; margin: 0; padding: 5px; border: 1px solid #e4d3a8; border-radius: 4px; background: #fffaf0; color: #775a2f; font: inherit; text-align: left; cursor: pointer; }
.calendar-timeline-all-day-event.is-sick-leave { border-color: #d8c6ed; background: #f7efff; color: #78548f; }
.calendar-timeline-all-day-event strong, .calendar-timeline-all-day-event > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.calendar-timeline-all-day-event .staff-calendar-vacation-badge { padding: 1px 4px; font-size: 9px; }
.calendar-timeline-hours { min-height: var(--calendar-timeline-height); }
.calendar-timeline-axis { position: relative; height: var(--calendar-timeline-height); border-right: 1px solid #dce6f0; background: #f9fbfd; }
.calendar-timeline-hour-label { position: absolute; right: 4px; left: 2px; min-width: 0; padding-top: 3px; color: #6e859b; font-size: 10px; line-height: 1.2; text-align: right; font-variant-numeric: tabular-nums; }
.calendar-timeline-hour-label small { display: block; margin-top: 2px; font-size: 8px; }
.calendar-timeline-hour-label.is-half-hour { color: #9aaaba; font-size: 8px; }
.calendar-timeline-midnight { position: absolute; right: 4px; color: #6e859b; font-size: 10px; }
.calendar-timeline-column { position: relative; min-width: 0; height: var(--calendar-timeline-height); border-right: 1px solid #e0e8f1; background: #fff; }
.calendar-timeline-column.is-selected, .calendar-timeline-all-day-column.is-selected { background: #f5faff; }
.calendar-timeline-slot { position: absolute; left: 0; z-index: 0; box-sizing: border-box; width: 100%; min-height: 0; margin: 0; padding: 0; border: 0; border-top: 1px dotted #edf1f6; border-radius: 0; background: transparent; cursor: pointer; }
.calendar-timeline-slot.is-hour { border-top: 1px solid #e1e9f2; }
.calendar-timeline-slot:hover { background: #eaf4ff; }
.calendar-timeline-slot:focus-visible { outline: 2px solid #197ac8; outline-offset: -2px; }
.calendar-timeline-unavailable { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(135deg, #eef1f5, #eef1f5 4px, #f9fafc 4px, #f9fafc 8px); border-top: 1px solid #e1e9f2; }
.calendar-timeline-event { position: absolute; z-index: 2; display: flex; flex-direction: column; box-sizing: border-box; min-width: 0; min-height: 0; margin: 0; padding: 3px 5px; overflow: hidden; border: 1px solid #afd2ed; border-left: 3px solid #4b9ad3; border-radius: 4px; background: #eaf5ff; color: #285d83; font: inherit; text-align: left; cursor: pointer; }
.calendar-timeline-event:hover { z-index: 3; border-color: #2784c6; background: #dff0ff; }
.calendar-timeline-event:focus-visible, .calendar-timeline-all-day-event:focus-visible { z-index: 4; outline: 2px solid #197ac8; outline-offset: 1px; }
.calendar-timeline-event time, .calendar-timeline-event strong, .calendar-timeline-event span { flex: 0 0 auto; display: block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-timeline-event time { font-size: 9px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.calendar-timeline-event strong { font-size: 11px; line-height: 1.3; }
.calendar-timeline-event .calendar-timeline-event-owner, .calendar-timeline-event .calendar-timeline-type { display: none; font-size: 9px; line-height: 1.3; }
.calendar-timeline-event.is-tall .calendar-timeline-event-owner, .calendar-timeline-event.is-tall .calendar-timeline-type { display: block; }
.calendar-timeline-event.is-on-site { border-color: #a8d8cc; border-left-color: #329881; background: #eaf9f3; color: #316e5e; }
.calendar-timeline-scroll-hint { display: none; margin: 0 0 7px; color: #758ba0; font-size: 11px; }
@media (max-width: 900px) { .calendar-timeline.is-week .calendar-timeline-scroll-hint { display: block; } }
@media (max-width: 600px) {
  .calendar-timeline-scroll { max-height: 65dvh; }
  .calendar-timeline.is-day .calendar-timeline-headers, .calendar-timeline.is-day .calendar-timeline-all-day, .calendar-timeline.is-day .calendar-timeline-hours { grid-template-columns: 52px minmax(0, 1fr); }
  .calendar-timeline-header-day { min-height: 52px; font-size: 11px; }
}