.timeline-shell { display: grid; grid-template-rows: auto auto minmax(0,1fr); height: 100%; }
body:not(.is-administrator) .admin-only { display: none !important; }
.management-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.management-actions #management-vacation { margin-top: 0; }
.vacation-dialog { width: min(90vw,540px); max-height: 85dvh; overflow: auto; border: 1px solid #ccd6e5; border-radius: 14px; padding: 24px; }
.vacation-dialog label { display: flex; flex-direction: column; align-items: stretch; margin: 12px 0; }
.vacation-dialog [hidden] { display: none !important; }
.vacation-dialog .timeline-toolbar { padding: 0; border: 0; }
#management-vacation { margin-top: 24px; }
#vacation-status.is-error { color: #b42318; }
#timeline-detail { width: min(90vw,800px); max-height: 80dvh; overflow: auto; border: 1px solid #ccd6e5; border-radius: 14px; padding: 24px; }
.timeline-toolbar { padding: 12px 24px; background: #fff; border-bottom: 1px solid #dce5f2; }
.timeline-toolbar label { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; }
.timeline-toolbar input,.timeline-toolbar select,.timeline-toolbar button { font: inherit; padding: 7px 10px; border: 1px solid #ccd6e5; border-radius: 6px; background: #fff; }
.timeline-toolbar button { cursor: pointer; color: #2357c0; }
.timeline-toolbar button:disabled { opacity: .5; cursor: wait; }
.timeline-toolbar #timeline-refresh { background: #3265d8; color: white; margin: 0 12px; }
.timeline-legend { display: inline-flex; gap: 7px; align-items: center; flex-wrap: wrap; font-size: 12px; }
.timeline-legend i { width: 17px; height: 17px; border: 1px solid #cbd5e1; display: inline-block; }
.timeline-note,#timeline-status,#timeline-warnings { font-size: 12px; margin: 8px 0; }
#timeline-status.is-error { color: #b42318; }
#timeline-settings { font-size: 12px; max-height: 170px; overflow: auto; }
#timeline-settings summary { cursor: pointer; font-weight: 600; }
#timeline-absence-form { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
#timeline-absences > div { display: flex; gap: 10px; align-items: center; margin: 5px 0; }
.timeline-scroll { overflow: auto; position: relative; background: #fff; min-height: 0; }
#timeline-table { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; table-layout: fixed; font-size: 12px; }
#timeline-table caption { text-align: left; padding: 8px 16px; font-weight: 700; background: #edf3fe; position: sticky; left: 0; }
#timeline-table th,#timeline-table td { border-right: 1px solid #dce5f2; border-bottom: 1px solid #dce5f2; padding: 0; height: 38px; min-width: 38px; text-align: center; }
#timeline-table thead th { position: sticky; top: 0; background: #eaf0fb; z-index: 3; }
#timeline-table .timeline-months th { height: 32px; padding-top: 0; padding-bottom: 0; }
#timeline-table .timeline-days th { top: 32px; }
#timeline-table .timeline-months th:not(:first-child) { text-align: left; padding-left: 8px; }
#timeline-table .timeline-months span { position: sticky; left: 242px; }
#timeline-year { width: 90px; }
#timeline-table th:first-child { position: sticky; left: 0; min-width: 230px; max-width: 230px; width: 230px; text-align: left; padding: 8px 12px; background: #fff; z-index: 2; overflow-wrap: anywhere; }
#timeline-table thead th:first-child { z-index: 5; background: #eaf0fb; }
#timeline-table .timeline-team th { background: #e8edf5; font-weight: 800; }
#timeline-table .timeline-team td { background: #e8edf5; }
#timeline-table .today { box-shadow: inset 0 0 0 2px #244ab6; }
#timeline-table .unknown { outline: 1px dashed #b8c4d5; outline-offset: -3px; }
.free { background: #fff; }
.bug { background: #ef6666; color: #461010; font-weight: 800; }
.away { background: #f6d75c; }
.project { background: #65baf3; }
.mixed { background: linear-gradient(135deg,#65baf3 50%,#ef6666 50%); font-weight: 800; }
.away-bug { background: linear-gradient(135deg,#f6d75c 50%,#ef6666 50%); font-weight: 800; }
.away-project { background: linear-gradient(135deg,#f6d75c 50%,#65baf3 50%); }
.all-three { background: linear-gradient(135deg,#f6d75c 0 33%,#65baf3 33% 66%,#ef6666 66%); font-weight: 800; }
#timeline-table td button { width: 100%; height: 100%; background: transparent; border: none; font: inherit; color: inherit; cursor: pointer; }
#timeline-table small { display: block; font-weight: 400; color: #65758b; }
@media(max-width:600px) { .timeline-toolbar { padding: 10px; } #timeline-table th:first-child { min-width: 155px; width: 155px; max-width: 155px; } .timeline-legend { margin-top: 10px; } }
@media(max-width:600px) { #timeline-table .timeline-months span { left: 167px; } }