.roster-template { padding: 12px 24px 32px; max-width: 1800px; margin: auto; color: #f5f5f5; }
.roster-template * { box-sizing: border-box; }
.roster-template h1 { margin: 12px 0 6px; font-size: 25px; }
.roster-template h2 { margin: 0; font-size: 19px; }
.roster-template p { color: #b8bec5; font-size: 14px; }
.roster-template a { color: #a5cdb1; }
.rt-page-header, .rt-section-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.rt-section { margin-top: 18px; padding: 16px; background: #202429; border: 1px solid #343940; border-radius: 14px; min-width: 0; }
.rt-section-header { margin-bottom: 14px; }
.rt-day-navigation { display: flex; align-items: center; gap: 8px; }
.roster-template .rt-day-button { flex: 0 0 40px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; padding: 0 0 4px; border: 0; border-radius: 8px; background: #24282d; color: #9da3aa; font-size: 32px; font-weight: 600; line-height: 1; }
.roster-template .rt-day-button:hover { background: #343a40; color: #fff; }
.roster-template button, .roster-template select, .roster-template input, .roster-template textarea { font: inherit; color: #f5f5f5; background: #30363d; border: 1px solid #505760; border-radius: 7px; padding: 8px 10px; min-height: 40px; color-scheme: dark; }
.roster-template button { cursor: pointer; }
.roster-template button:hover { background: #414a53; }
.roster-template button:disabled { opacity: .5; cursor: default; }
.roster-template [hidden] { display: none !important; }
.roster-template :focus-visible { outline: 2px solid #a5cdb1; outline-offset: 2px; }
.rt-status, .rt-block-status { min-height: 20px; }
.rt-week-scroll { overflow-x: auto; }
.rt-week { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12px; }
.rt-week th, .rt-week td { padding: 6px; border-bottom: 1px solid #40464e; border-right: 1px solid #343940; min-width: 115px; vertical-align: top; }
.rt-week thead th { position: sticky; top: 0; background: #30363d; z-index: 2; padding: 10px 6px; text-align: left; }
.rt-week tbody th { position: sticky; left: 0; z-index: 1; background: #252a30; border-left: 4px solid #65717d; text-align: left; padding-top: 14px; }
.rt-week thead th:first-child { left: 0; z-index: 3; }
.roster-template .rt-shift { display: flex; flex-direction: column; text-align: left; gap: 3px; width: 100%; margin-bottom: 4px; padding: 6px; background: #292f35; border-color: #444c54; font-size: 12px; }
.rt-shift strong { color: #a5cdb1; white-space: nowrap; }
.rt-shift span { overflow-wrap: anywhere; }
.roster-template .rt-add-cell { display: block; width: 100%; min-height: 24px; padding: 0; border: 0; background: transparent; color: #a5cdb1; }
.rt-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.rt-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rt-legend span::before { content: ''; width: 14px; height: 14px; border: 1px solid #69727b; background: #333d43; }
.rt-legend span:nth-child(2)::before { background: repeating-linear-gradient(135deg, #1c2025 0 4px, #292e34 4px 6px); }
.rt-calendar-scroll { overflow: auto; max-height: 75dvh; border: 1px solid #454d56; border-radius: 10px; background: #15171a; padding-bottom: 14px; overscroll-behavior: contain; scrollbar-color: #353535 #15171a; color-scheme: dark; }
#app:has(> .roster-template) { scrollbar-color: #353535 #15171a; }
#app:has(> .roster-template)::-webkit-scrollbar,
.rt-calendar-scroll::-webkit-scrollbar { width: 12px; height: 12px; }
#app:has(> .roster-template)::-webkit-scrollbar-track,
#app:has(> .roster-template)::-webkit-scrollbar-corner,
.rt-calendar-scroll::-webkit-scrollbar-track,
.rt-calendar-scroll::-webkit-scrollbar-corner { background: #15171a; }
#app:has(> .roster-template)::-webkit-scrollbar-thumb,
.rt-calendar-scroll::-webkit-scrollbar-thumb { background: #353535; border: 2px solid #15171a; border-radius: 8px; }
#app:has(> .roster-template)::-webkit-scrollbar-thumb:hover,
.rt-calendar-scroll::-webkit-scrollbar-thumb:hover { background: #505050; }
.rt-calendar { display: grid; min-width: 100%; width: max-content; position: relative; align-items: stretch; }
.rt-calendar-corner, .rt-staff-heading { position: sticky; top: 0; z-index: 5; background: #292f35; padding: 12px 8px; border-right: 1px solid #505760; border-bottom: 1px solid #505760; }
.rt-calendar-corner { left: 0; z-index: 7; font-size: 11px; }
.rt-staff-heading { border-top: 4px solid #65717d; display: flex; flex-direction: column; gap: 5px; font-size: 12px; min-width: 170px; max-width: 260px; }
.rt-staff-heading strong { font-size: 15px; }
.rt-staff-heading span { color: #c1c8ce; }
.rt-ruler, .rt-track { height: var(--rt-calendar-height); position: relative; }
.rt-ruler { position: sticky; left: 0; background: #15171a; z-index: 4; color: var(--colour-text-secondary); }
.rt-ruler-mark { position: absolute; right: 3px; }
.rt-ruler-hour { display: flex; align-items: baseline; gap: 3px; line-height: 1; transform: translateY(-50%); }
.rt-ruler-hour:first-child { transform: none; }
.rt-ruler-number { font-size: 23px; font-weight: 600; }
.rt-ruler-minutes { font-size: 10px; }
.rt-ruler-notch { width: 8px; border-top: 1px solid #4a5057; }
.rt-ruler-half { width: 16px; border-top: 1px solid #858d96; }
.rt-track { border-right: 1px solid #505760; background: repeating-linear-gradient(to bottom, transparent 0 calc(var(--rt-slot-height) - 1px), #ffffff12 calc(var(--rt-slot-height) - 1px) var(--rt-slot-height)), repeating-linear-gradient(135deg, #1c2025 0 5px, #292e34 5px 7px); }
.rt-available { position: absolute; inset-inline: 0; background: repeating-linear-gradient(to bottom, transparent 0 calc(var(--rt-slot-height) - 1px), #ffffff14 calc(var(--rt-slot-height) - 1px) var(--rt-slot-height)), #333d43; }
.rt-block { position: absolute; z-index: 2; border: 1px solid #88949e; border-left-width: 5px; background: #344b60; border-radius: 6px; min-height: 8px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1px 3px #0005; }
.roster-template .rt-block-open { background: transparent; border: 0; border-radius: 0; padding: 9px 5px 2px; text-align: left; display: flex; flex-direction: column; gap: 3px; width: 100%; height: 100%; min-height: 0; overflow: hidden; font-size: 11px; }
.rt-block-open strong { font-size: 12px; }
.rt-block-open span { overflow: hidden; text-overflow: ellipsis; width: 100%; }
.rt-move { position: absolute; right: 3px; bottom: 7px; font-size: 9px; background: #161a1f; padding: 2px 4px; border-radius: 3px; cursor: grab; touch-action: none; }
.roster-template .rt-copy { position: absolute; right: 38px; bottom: 7px; min-height: 18px; height: 18px; padding: 0 4px; font-size: 13px; line-height: 16px; background: #161a1f; border: 0; z-index: 3; }
.rt-paste-ready .rt-track, .rt-paste-ready .rt-block-open, .rt-paste-ready .rt-available { cursor: pointer; }
.rt-readonly .rt-copy { display: none; }
.rt-resize { position: absolute; left: 0; right: 0; height: 7px; background: transparent; cursor: ns-resize; touch-action: none; z-index: 3; }
.rt-resize-top { top: 0; }
.rt-resize-bottom { bottom: 0; }
.roster-template .rt-block-compact .rt-block-open { flex-direction: row; align-items: center; gap: 4px; padding: 0 43px 0 3px; line-height: 16px; }
.rt-block-compact .rt-block-time { flex: 0 0 auto; width: auto; font-size: 9px; white-space: nowrap; }
.rt-block-compact .rt-block-open strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.rt-block-compact .rt-block-description { display: none; }
.rt-block-compact .rt-resize { height: 3px; }
.rt-block-compact .rt-move { bottom: 50%; transform: translateY(50%); padding: 0 2px; font-size: 0; }
.rt-block-compact .rt-move::after { content: '↕'; font-size: 12px; }
.roster-template .rt-block-compact .rt-copy { right: 20px; bottom: 50%; transform: translateY(50%); height: 14px; min-height: 14px; line-height: 14px; padding: 0 2px; }
.rt-readonly .rt-block-compact .rt-block-open { padding-right: 3px; }
.rt-readonly [data-drag], .rt-readonly .rt-add-cell { display: none; }
.rt-dragging { z-index: 10; opacity: .8; pointer-events: none; }
.rt-outside { display: flex; flex-wrap: wrap; gap: 8px; }
.rt-outside p { flex-basis: 100%; }
.rt-dialog { width: min(480px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; background: #252a30; color: #f5f5f5; border: 1px solid #505760; border-radius: 12px; padding: 22px; }
.rt-dialog::backdrop { background: #0009; }
.rt-dialog fieldset { border: 0; margin: 14px 0; padding: 0; min-width: 0; }
.rt-dialog label { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; font-size: 14px; }
.rt-dialog input, .rt-dialog select, .rt-dialog textarea { width: 100%; min-width: 0; }
.rt-time-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rt-dialog-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.roster-template .rt-delete { margin-left: auto; color: #ffb3b3; }
.roster-template .rt-error { color: #ffb3b3; }
@media (max-width: 650px) {
    .roster-template { padding: 8px 8px 24px; }
    .rt-section { padding: 10px; }
    .rt-week th, .rt-week td { min-width: 100px; }
    .rt-calendar-scroll { max-height: 70dvh; }
    .rt-section-header h2 { flex-basis: 100%; }
}