.attendance-periods { margin-top: 20px; min-width: 0; }
.attendance-periods[hidden], [data-fixed-start-date][hidden] { display: none !important; }
.attendance-periods h3 { font-size: 16px; line-height: 1.4; margin: 0 0 12px; letter-spacing: 0; }
.attendance-period { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px; gap: 12px; align-items: start; margin-bottom: 12px; }
.attendance-period > div { min-width: 0; margin: 0; }
.attendance-period label { display: block; font-size: 13px; line-height: 20px; margin-bottom: 6px; }
.attendance-period input[type="date"] { box-sizing: border-box; width: 100%; min-width: 0; height: 40px; padding: 6px; border: 1px solid #b8c5c0; border-radius: 4px; background: #fff; color: #202b26; font-size: 14px; }
.attendance-period .attendance-period-errors { grid-column: 1 / -1; color: #b42318; }
.attendance-period-errors:empty { display: none; }
.attendance-remove, .attendance-add { cursor: pointer; border: 1px solid #b8c5c0; background: #fff; color: #275d47; border-radius: 4px; font: inherit; letter-spacing: 0; }
.attendance-remove { width: 40px; height: 40px; margin-top: 26px; padding: 0; font-size: 24px; line-height: 1; }
.attendance-add { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 12px; }
.attendance-add span { font-size: 22px; line-height: 1; }
.attendance-remove:disabled, .attendance-add:disabled { opacity: .4; cursor: default; }
.attendance-remove:not(:disabled):hover, .attendance-add:not(:disabled):hover { background: #edf5f0; border-color: #275d47; }
.attendance-periods button:focus-visible, .attendance-periods input:focus-visible { outline: 2px solid #276b51; outline-offset: 2px; }
@media (max-width: 480px) {
    .attendance-period { gap: 8px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px; }
    .attendance-remove { width: 36px; }
    .attendance-period label { font-size: 12px; }
    .attendance-period input[type="date"] { font-size: 13px; padding: 4px; }
}