/* Time's theme. Keep the supplied Artist stylesheet unchanged. */
:root {
  --ink: #25221e;
  --muted: #716b63;
  --surface: #fff;
  --surface-secondary: #fbf8f4;
  --border-color: #eae3da;
  --primary: #29251f;
  --link: #29251f;
  --warning: #ff9d1d;
  --on-warning: #25221e;
  --danger: #b9402b;
  --content-width: 1180px;
  --group-space: clamp(36px, 5vw, 68px);
  --layout-gap: 20px;
  --item-gap: 18px;
  --content-gap: 16px;
  --card-padding: 24px;
}

.time-header { background: #fffdfa; }
.time-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; letter-spacing: -.035em; }
.time-brand img { width: 32px; height: 32px; }
.time-header .navbar-menu a[aria-current="page"] { border-radius: 10px; background: #fff0dc; color: var(--ink); font-weight: 700; }
.time-header .navbar-menu a:not(.button):is(:hover, :focus-visible) { background: #f5d6aa; color: var(--ink); }
.time-role-admin { background: #eee5fa; color: #60388a; border-color: #d9c7ed; }
.time-role-member { background: #e6eef8; color: #315a80; border-color: #cadcec; }
.time-status-active { background: #e6f2e9; color: #28623b; border-color: #c4dfcb; }
.time-status-archived { background: #f2e9e5; color: #80554b; border-color: #dfc9c2; }
.time-main .select::picker-icon { align-self: center; }
.time-main .field.is-grouped > .button { min-height: var(--control-height); }
.time-main .stats:first-child { margin-top: 0; padding-top: 0; }

.time-metrics .metric-card { height: 100%; background: var(--surface-secondary); }
.time-metrics .column:first-child .metric-card { background: #fff1df; border-color: #f3dbba; }
.time-metrics .stats dt { font-size: clamp(28px, 3vw, 40px); overflow-wrap: anywhere; }
.time-budget { background: var(--surface-secondary); }
.time-tabs .tabs-indicator { background: var(--warning); }
.time-tabs .tabs-list button[aria-selected="true"] { color: var(--ink); }

.time-main .table-container { border: 1px solid var(--border-color); border-radius: var(--radius); background: var(--surface); }
.time-main .table th { background: var(--surface-secondary); }
.time-main .table tbody tr:last-child td { border-bottom: 0; }
.time-projects-table progress { min-width: 100px; }
.time-form { width: 100%; max-width: 760px; }
.time-form-page { width: 100%; max-width: 760px; margin-inline: auto; }
.time-form-page .time-form { max-width: none; }
.time-form-row, .time-form-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.time-form-row > .field + .field { margin-top: 0; }
.time-form-row.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.time-form-section { border: 0; padding: 0; margin: 0; min-width: 0; }
.time-form-section + .time-form-section { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border-color); }
.time-form-section > legend { margin-bottom: 16px; padding: 0 12px 0 0; font-weight: 700; }
.time-form-section.content > legend + * { margin-top: 0; }
.time-date { white-space: nowrap; }
.time-main .progress { background: #e6ddd2; }
.time-main .progress::-webkit-progress-bar { background: #e6ddd2; }
.time-form-options { padding: 12px 16px; border-radius: var(--radius); background: var(--surface-secondary); }
.time-form-options .checkbox { min-height: 28px; padding-block: 0; align-items: center; }
.time-form-options .checkbox input { margin-top: 0; }
.time-form-options .help { margin-top: 4px; }
.time-short-field { max-width: 360px; }
.time-breadcrumb a { color: var(--muted); }
.time-project-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px 20px; }
.time-billing-status { margin: 0; white-space: nowrap; }
.time-project-actions .buttons { margin: 0; }
.time-filters.field.is-grouped > .control,
.time-filters .field.is-grouped > .control { flex: 0 1 240px; min-width: 0; max-width: 100%; }
.time-filters .field.is-grouped > .time-filter-short { flex: 0 1 240px; }
.time-invoice-filters { flex: 0 1 492px; min-width: 0; width: 100%; }
.time-filters .time-invoice-filters { flex-wrap: nowrap; }
.time-filters .time-invoice-filters > .control { flex: 1 1 0; min-width: 0; }
.time-main .select { white-space: nowrap; }
.time-format-control { max-width: 100%; }
.time-format-control .select { width: 100%; }
.time-invoice-copy { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 14px; line-height: 1.6; white-space: pre; tab-size: 20; overflow-x: auto; }
.time-invoice-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.time-invoice-toolbar .time-invoice-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; max-width: none; margin: 0; }
.time-invoice-toolbar .control { min-width: 0; }
.time-invoice-toolbar > .button { min-height: var(--control-height); }
@media (max-width: 900px) {
  .time-invoice-toolbar { grid-template-columns: minmax(0, 1fr); }
  .time-invoice-toolbar .time-invoice-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .time-invoice-toolbar > .button { justify-self: end; }
}
@media (max-width: 480px) { .time-invoice-toolbar .time-invoice-filters { grid-template-columns: minmax(0, 1fr); } }
.time-period-nav { padding-bottom: 16px; border-bottom: 1px solid var(--border-color); }
.time-period-nav form { display: flex; align-items: center; gap: 8px; }
.time-empty-state { padding: 22px 24px; border: 1px solid var(--border-color); border-radius: var(--radius); background: var(--surface-secondary); }
.time-empty-state p { margin: 0; }
.time-recording-dot { display: none; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--danger); }
.timer-running .time-recording-dot { display: block; animation: time-recording-pulse 1.2s ease-in-out infinite; }
@keyframes time-recording-pulse { 50% { opacity: .18; box-shadow: 0 0 0 7px color-mix(in srgb, var(--danger) 20%, transparent); } }

.time-chart { display: block; width: 100%; height: auto; overflow: visible; }
.time-chart-card { position: relative; }
.time-chart-hit { cursor: pointer; }
.time-chart-hit-area { fill: transparent; pointer-events: all; }
.time-chart-hit:hover .time-chart-point, .time-chart-hit:focus .time-chart-point { stroke: var(--warning); stroke-width: 5; }
.time-chart-tooltip { position: absolute; z-index: 2; max-width: calc(100% - 16px); padding: 8px 12px; border-radius: 8px; background: var(--ink); color: var(--surface); font-size: 14px; line-height: 1.4; pointer-events: none; margin: 0; }
.time-chart-tooltip[hidden] { display: none; }
.time-chart-grid { stroke: var(--border-color); stroke-width: 1; }
.time-chart-axis { stroke: var(--muted); stroke-width: 1; }
.time-chart-label { fill: var(--muted); font: 13px var(--font-body); }
.time-chart-budget { stroke: var(--danger); stroke-width: 2; }
.time-chart-line { fill: none; stroke: var(--primary); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.time-chart-point { fill: var(--primary); stroke: var(--surface); stroke-width: 3; }
.time-chart-point.is-over { fill: var(--danger); }
.time-chart-bar { fill: var(--warning); }

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

@media (max-width: 800px) {
  .time-header .navbar-menu { gap: 2px; }
  .time-header .navbar-menu > a:not(.button) { padding: 8px; }
  .time-projects-table { min-width: 900px; }
  .time-form-row, .time-form-row.is-three, .time-form-options { grid-template-columns: 1fr; }
}

.monthly-payment-month {
  width: 16rem;
  max-width: 100%;
}