.time-clock { border-top: 3px solid var(--troll-blue-light); }
.time-clock .section-heading { margin-top: 0; flex-wrap: wrap; gap: .75rem; }
.time-clock-totals { display: flex; flex-wrap: wrap; gap: 1.5rem 4rem; margin: 1.5rem 0; }
.time-clock-totals strong { display: block; font-size: clamp(1.75rem, 4vw, 2.8rem); font-variant-numeric: tabular-nums; color: var(--heading); }
.time-clock-actions, .time-clock-start, .time-pagination { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; }
.time-clock-actions form { margin: 0; }
.time-clock-start > div { flex: 1; min-width: 0; }
.time-clock-start label { display: block; margin-bottom: .5rem; }
.time-clock-start select { width: 100%; }
.time-history { font-variant-numeric: tabular-nums; }
.time-history-wrap { max-width: 100%; overflow-x: auto; }
.time-history td { white-space: nowrap; }
.time-pagination { margin-top: 1rem; }
.time-history-toolbar, .time-history-filter { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem 1.5rem; }
.time-history-toolbar { justify-content: space-between; }
.time-history-filter label { display: block; margin-bottom: .4rem; }
.time-day { margin-top: 1.25rem; padding: 1.25rem; }
.time-day-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem; margin-bottom: 1rem; }
.time-day-heading h3 { margin: 0; }
.time-day-table { width: 100%; table-layout: fixed; }
.time-day-table th, .time-day-table td { padding: .8rem .6rem; }
.time-day-table th { font-size: .75rem; white-space: normal; overflow-wrap: anywhere; }
.time-day-table td { white-space: normal; overflow-wrap: anywhere; vertical-align: top; }
.time-day-table th:first-child { width: 22%; }
.time-day-table th:last-child { width: 26%; }
.time-day-table time { white-space: nowrap; font-weight: 600; }
.time-day-table td > .small { display: block; margin-top: .2rem; }
.time-day-table .badge { white-space: normal; font-size: .7rem; }
.time-row-actions { display: flex; flex-wrap: wrap; gap: .3rem .7rem; font-size: .75rem; margin-top: .5rem; }
.time-day-summary { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: baseline; padding: 1rem; margin-top: .5rem; background: var(--accent-surface); border-radius: .5rem; color: var(--accent-text); font-size: .85rem; font-variant-numeric: tabular-nums; }
.time-day-summary > strong { margin-right: auto; }
@media (max-width: 700px) {
  .time-day { padding: 1rem; }
  .time-day-table, .time-day-table tbody { display: block; }
  .time-day-table thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
  .time-day-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--border); padding: .75rem 0; }
  .time-day-table td { display: block; border: 0; padding: .5rem .25rem; min-width: 0; }
  .time-day-table td::before { content: attr(data-label); display: block; color: var(--muted); font-size: .7rem; margin-bottom: .3rem; }
  .time-day-table .time-day-person, .time-day-table .time-day-state { grid-column: 1 / -1; }
  .time-day-summary { flex-direction: column; padding: .8rem; }
  .time-history-filter { width: 100%; }
  .time-history-filter > div { flex: 1; min-width: 0; }
  .time-history-filter input[type="date"] { width: 100%; min-width: 0; }
}
.manual-add { margin-top: 1.25rem; }
.manual-interval { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.manual-interval > div { min-width: 0; }
.manual-interval input[type="datetime-local"] { max-width: 100%; font-size: .85rem; padding-inline: .5rem; }
.manual-interval label, .manual-reason label { display: block; margin-bottom: .5rem; }
.manual-interval input, .manual-reason textarea { width: 100%; min-width: 0; }
.manual-offsets { margin: .8rem 0; color: var(--muted); }
.manual-offsets summary { cursor: pointer; font-size: .8rem; }
.manual-break { border: 1px solid var(--border); border-radius: .6rem; padding: 1rem; margin: 1rem 0; min-width: 0; }
.manual-reason { margin: 1.5rem 0; }
.manual-history-event { margin: 1rem 0; overflow-wrap: anywhere; }
@media (max-width: 700px) { .manual-interval { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .time-clock-start { align-items: stretch; flex-direction: column; }
  .time-clock-actions form { flex: 1; }
  .time-clock-actions .button { width: 100%; }
}
.time-clock-rules summary, .planning-rules summary { cursor: pointer; color: var(--link); font-weight: 600; }
.time-clock-rules p, .planning-rules p { margin-block: .5rem 0; }