.clock-cards-table td { padding: .4rem .2rem; vertical-align: middle; }
.clock-card-project { overflow-wrap: anywhere; }
.clock-card-line-header { margin-bottom: .4rem; }
.clock-card-line-controls { display: flex; align-items: flex-start; gap: .5rem; }
.clock-card-inline-form { flex: 1; min-width: 0; }
.clock-cards-table .clock-card-entry { padding: .6rem .5rem; }
.clock-card-user-total { border-top: 3px solid var(--bs-border-color); background: var(--clock-card-user-color, #6c757d); color: #fff; }
.clock-card-row { background: #fff; }
.clock-card-row-striped { background: #eef2f6; }
.clock-card-fields { display: flex; align-items: center; gap: .25rem; }
.clock-card-duration { flex: 1; width: 0; min-width: 3rem; padding-inline: .35rem; }
.clock-card-amount-wrap { position: relative; flex: 1; min-width: 3rem; }
.clock-card-amount { width: 100%; padding-left: .3rem; padding-right: 1.2rem; }
.clock-card-amount-wrap > span { position: absolute; right: .4rem; top: 50%; transform: translateY(-50%); color: #6c757d; pointer-events: none; }
.clock-card-actions { white-space: nowrap; }
.clock-card-actions .btn { padding: .25rem .4rem; }
.clock-card-save-status { display: block; font-size: .7rem; line-height: 1.2; }
.clock-card-save-status:empty { display: none; }
.clock-card-details { margin-top: .5rem; font-size: .8rem; }
.clock-card-details > summary { width: fit-content; cursor: pointer; color: var(--bs-primary, #3b7ddd); }
.clock-card-details > summary:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: .15rem; }
.clock-card-details-content { margin-top: .4rem; padding: .6rem; background: #144b8209; border-radius: .25rem; overflow-wrap: anywhere; }
.clock-card-commits { padding-left: 1.2rem; }
.clock-card-commits code { color: inherit; white-space: normal; }
.clock-card-dialog { width: min(42rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); border: 0; border-radius: .5rem; padding: 0; box-shadow: 0 1rem 4rem #0004; }
.clock-card-dialog::backdrop { background: #16203280; }
.clock-card-dialog .modal-header { position: sticky; top: 0; background: white; z-index: 1; padding: 1rem; }
.clock-card-dialog .modal-body { padding: 1rem; }
.clock-card-dialog .form-label { font-weight: 600; }
@media (max-width: 420px) {
    .clock-card-actions .btn { padding: .25rem; }
    .clock-card-project { font-size: .8rem; }
}