/* Timer, billing hours and the project's rate. */
.hours-timer { display: flex; align-items: center; }
.hours-timer [hidden] { display: none; }
.hours-timer-running { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 6px 0 12px; border: 1px solid var(--rose-border); border-radius: 999px; background: var(--rose-soft); }
.hours-timer-running[hidden] { display: none; }
.hours-timer-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rose); animation: hours-timer-pulse 1.4s ease-in-out infinite; }
.hours-timer-clock { min-width: 62px; color: var(--rose); font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
.hours-timer-discard { width: 24px; height: 24px; border: 0; border-radius: 50%; background: none; color: var(--fg-3); cursor: pointer; }
.hours-timer-discard:hover, .hours-timer-discard:focus-visible { background: var(--surface); color: var(--rose); }
@keyframes hours-timer-pulse { 50% { opacity: 0.35; } }

.nav-item { position: relative; }
.hours-timer-pill { position: absolute; top: 50%; right: 10px; padding: 1px 7px; border-radius: 999px; background: var(--rose); color: var(--surface); font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 17px; transform: translateY(-50%); }
.hours-timer-pill[hidden] { display: none; }

.form-group[hidden] { display: none; }

.hours-invoice-rows { display: flex; flex-direction: column; max-height: 340px; overflow-y: auto; border: 1px solid var(--border); border-radius: 12px; }
.hours-invoice-row { display: grid; grid-template-columns: 20px 92px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; margin: 0; padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--fg); font-size: 13px; font-weight: 400; letter-spacing: normal; text-transform: none; cursor: pointer; }
.hours-invoice-row:last-child { border-bottom: 0; }
.hours-invoice-row:hover { background: var(--surface-2); }
.hours-invoice-row input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.hours-invoice-date, .hours-invoice-hours { color: var(--fg-3); font-variant-numeric: tabular-nums; }
.hours-invoice-desc { overflow-wrap: break-word; }
.hours-invoice-amount { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hours-invoice-total { margin: 12px 0 0; color: var(--fg-3); font-size: 13px; text-align: right; }
.hours-invoice-total strong { color: var(--fg); font-size: 16px; font-weight: 700; }

.project-work { margin-top: 3px; font-family: var(--font-sans); font-size: 11.5px; font-weight: 550; }
.project-work-neutral { color: var(--fg-3); }
.project-work-good { color: var(--emerald); }
.project-work-low { color: var(--rose); }

@media (prefers-reduced-motion: reduce) {
  .hours-timer-dot { animation: none; }
}

@media (max-width: 520px) {
  .hours-invoice-row { grid-template-columns: 20px minmax(0, 1fr) auto; }
  .hours-invoice-date { grid-column: 2; grid-row: 1; }
  .hours-invoice-desc { grid-column: 2 / -1; grid-row: 2; }
  .hours-invoice-hours { grid-column: 3; grid-row: 1; }
  .hours-invoice-amount { grid-column: 2 / -1; grid-row: 3; }
}