/* Time, projects, payroll, budgets and lists pages (public/js/acct/{time,projects,payroll,budgets,lists}.js) */
.tpp-page { padding-bottom: 40px; }
.tpp-page .grow { flex: 1 1 auto; }
.small { font-size: 12.5px; }
.tpp-page .card.pad, .modal .card.pad { padding: 16px 18px; }
.btn.sm { height: 30px; padding: 0 10px; font-size: 12.5px; }
.tpp-toolbar { align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; }
.tpp-toolbar .field { margin: 0; }
.tpp-note { margin: 0; font-size: 13px; max-width: 560px; }
.tpp-sub2 { display: block; font-size: 12.5px; margin-top: 2px; }
.tpp-h3 { font-size: 15px; margin: 22px 0 10px; }
.tpp-foot { margin-top: 12px; max-width: 820px; }
.tpp-back { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 13px; font-weight: 500; margin-bottom: 8px; }
.tpp-back:hover { color: var(--text); text-decoration: none; }
.tpp-btns { display: flex; gap: 2px; justify-content: flex-end; }
.tpp-act { width: 1%; white-space: nowrap; text-align: right; }
.neg { color: var(--danger); }

/* lists */
.tpp-name { display: inline-flex; align-items: center; gap: 6px; padding-left: calc(var(--depth, 0) * 20px); margin-right: 8px; }
.tpp-sub { color: var(--muted); }
.tpp-tags { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.tpp-tag-group { --chip: var(--accent); padding: 14px 16px; border-top: 3px solid var(--chip); }
.tpp-tag-group header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.tpp-tag-group header h3 { margin: 0; font-size: 15px; }
.tpp-tag-group header .tpp-btns { margin-left: auto; }
.tpp-tag-group .dim-chip { --chip: inherit; }
.tpp-tag-list { display: flex; flex-wrap: wrap; gap: 6px; }

/* timer */
.tpp-timer { display: flex; gap: 12px; align-items: center; padding: 14px 16px; margin-bottom: 16px; }
.tpp-timer-form { flex: 1; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr auto; gap: 8px; align-items: center; min-width: 0; }
.tpp-timer-form .check { margin: 0; white-space: nowrap; }
.tpp-timer.running { border-color: var(--accent); background: var(--accent-soft); justify-content: space-between; flex-wrap: wrap; }
.tpp-timer-main { display: flex; align-items: center; gap: 14px; min-width: 0; }
.tpp-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); flex: none; animation: tpp-blink 1.2s ease-in-out infinite; }
@keyframes tpp-blink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .tpp-dot { animation: none; } }
.tpp-clock { font-size: 28px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--text); }
.tpp-timer-what { display: flex; flex-direction: column; min-width: 0; }
.tpp-timer-what b, .tpp-timer-what small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpp-timer-btns { display: flex; gap: 8px; }
.tpp-weekbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tpp-week-label { min-width: 200px; text-align: center; font-size: 14px; }
.tpp-day { margin-bottom: 14px; }
.tpp-day-head { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; margin: 0 2px 6px; color: var(--text-2); }
.tpp-entries td:first-child { width: 60%; }
.tpp-times { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 12px; }
.tpp-times[hidden], .field[hidden] { display: none; }
input[type=time] { width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; }

/* weekly timesheet */
.tpp-sheet-top { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.tpp-sheet-top .field { margin: 0; min-width: 220px; }
.tpp-sheet-top p { margin: 0 0 8px; }
.tpp-sheet-wrap { overflow-x: auto; }
table.tpp-sheet { width: 100%; border-collapse: collapse; min-width: 900px; }
.tpp-sheet th, .tpp-sheet td { padding: 8px 6px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tpp-sheet th { font-size: 12px; color: var(--muted); font-weight: 500; background: var(--surface-2); text-align: left; }
.tpp-sheet th.num { text-align: center; }
.tpp-sheet th small { display: block; font-size: 11px; }
.tpp-sheet-sel { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; min-width: 360px; }
.tpp-sheet-sel select { height: 34px; font-size: 13px; padding: 0 8px; }
.tpp-sheet-bill { text-align: center; }
input.tpp-cell { width: 62px; height: 34px; text-align: center; padding: 0 4px; font-variant-numeric: tabular-nums; }
.tpp-sheet-day { text-align: center; }
.tpp-sheet td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tpp-sheet tfoot td { background: var(--surface-2); font-weight: 600; text-align: center; }
.tpp-sheet-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

/* projects */
.tpp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.tpp-proj { display: flex; flex-direction: column; gap: 12px; padding: 16px; color: var(--text); }
.tpp-proj:hover { text-decoration: none; border-color: var(--border-strong); }
.tpp-proj-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.tpp-proj-top b { display: block; font-size: 15px; }
.tpp-kv { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0; }
.tpp-kv dt { font-size: 11.5px; color: var(--muted); }
.tpp-kv dd { margin: 2px 0 0; font-weight: 600; font-variant-numeric: tabular-nums; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; }
.tpp-budget { display: flex; flex-direction: column; gap: 4px; }
.tpp-bar { height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.tpp-bar span { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.tpp-bar span.over { background: var(--danger); }
.tpp-budget-card { padding: 14px 16px; margin-bottom: 18px; display: flex; flex-direction: column; gap: 8px; }
.tpp-budget-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13.5px; }
.tpp-two { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 14px; align-items: start; }
.tpp-two h3 { font-size: 14px; margin: 0 0 6px; }
.tpp-two p { margin: 0 0 12px; font-size: 13px; }
.tpp-pl tr.tpp-group td { background: var(--surface-2); }
.tpp-pl tr.tpp-total td { border-top: 2px solid var(--border-strong); }
.tpp-indent { padding-left: 16px; display: inline-block; }
.tpp-pre { white-space: pre-line; }
.tpp-page .inv-head .badge { align-self: center; }

/* payroll */
.tpp-notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin-bottom: 16px; background: var(--warning-soft); border-color: transparent; color: var(--text); }
.tpp-notice .i { color: var(--warning); margin-top: 2px; flex: none; }
.tpp-notice p { margin: 0; font-size: 13.5px; }
.tpp-netrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; margin: 0 0 14px; border-radius: var(--radius); background: var(--surface-2); font-size: 13.5px; }
.tpp-net { font-size: 18px; font-variant-numeric: tabular-nums; }

/* budgets grid */
.tpp-budget-tools .check { margin: 0; }
.tpp-pctbox { display: flex; gap: 6px; align-items: center; }
input.tpp-pct { width: 80px; }
.tpp-grid-wrap { overflow: auto; max-height: calc(100vh - 260px); }
table.tpp-grid { border-collapse: separate; border-spacing: 0; min-width: 100%; font-size: 13px; }
.tpp-grid th, .tpp-grid td { padding: 4px 4px; border-bottom: 1px solid var(--border); white-space: nowrap; background: var(--surface); }
.tpp-grid thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); color: var(--muted); font-weight: 500; font-size: 12px; padding: 9px 6px; }
.tpp-grid th.num, .tpp-grid td.num { text-align: right; font-variant-numeric: tabular-nums; padding-right: 10px; }
.tpp-grid .tpp-acc { position: sticky; left: 0; z-index: 1; min-width: 230px; max-width: 260px; text-align: left; padding-left: 12px; border-right: 1px solid var(--border); }
.tpp-acc-in { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.tpp-grid thead .tpp-acc { z-index: 3; }
.tpp-accname { padding-left: calc(var(--depth, 0) * 14px); overflow: hidden; text-overflow: ellipsis; }
.tpp-fill { width: 26px; height: 26px; flex: none; }
input.tpp-amt { width: 92px; height: 32px; padding: 0 6px; text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; box-shadow: none; border-color: var(--border); }
input.tpp-amt:disabled { background: transparent; border-color: transparent; color: var(--text); }
.tpp-grid tr.tpp-sec td { background: var(--surface-2); font-weight: 600; padding: 8px 12px; }
.tpp-grid tr.tpp-sectotal td { font-weight: 600; }
.tpp-grid tr.tpp-net-row td { font-weight: 700; border-top: 2px solid var(--border-strong); background: var(--surface-2); }
.tpp-rowtotal { font-weight: 600; }
.btn.pulse { box-shadow: 0 0 0 3px var(--ring); }

@media (max-width: 900px) {
  .tpp-timer-form { grid-template-columns: 1fr 1fr; }
  .tpp-timer-form input[type=text] { grid-column: 1 / -1; }
  .tpp-two { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .tpp-timer { flex-direction: column; align-items: stretch; }
  .tpp-timer .btn.big { width: 100%; }
  .tpp-timer.running .tpp-timer-btns { width: 100%; }
  .tpp-timer.running .tpp-stop { flex: 1; }
  .tpp-clock { font-size: 32px; }
  .tpp-weekbar { width: 100%; justify-content: space-between; }
  .tpp-week-label { min-width: 0; flex: 1; font-size: 13px; }
  .tpp-weekbar .btn.ghost { display: none; }
  .tpp-kv { grid-template-columns: repeat(2, 1fr); }
  .tpp-times { grid-template-columns: 1fr 1fr 1fr; gap: 0 8px; }
  .tpp-grid .tpp-acc { min-width: 140px; max-width: 150px; }
  .tpp-toolbar .btn { flex: 1 1 auto; }
  .tpp-toolbar .tpp-note { flex: 1 1 100%; }
  .tpp-entries td:first-child { width: auto; }
  .tpp-cards { grid-template-columns: 1fr; }
  .tpp-pctbox { flex: 1 1 100%; }
  .tpp-pctbox .btn { flex: 1; }
  .tpp-grid-wrap { max-height: none; }
}
@media (max-width: 600px) { .tpp-weekbar .btn.icon { flex: none; } }