:root {
  --color-branch: #00d8c8;
  --color-branch-ink: #04110f;
  --color-branch-complement: #d80040;
  /* Readable accent text on dark chrome; keeps bright brands as-is. */
  --color-branch-fg: color-mix(in srgb, var(--color-branch) 72%, white);
}

@supports (color: oklch(from red max(0.5, l) c h)) {
  :root {
    --color-branch-fg: oklch(from var(--color-branch) max(0.78, l) c h);
    --color-branch-complement: oklch(from var(--color-branch) clamp(0.42, l, 0.58) max(0.12, c) calc(h + 180));
  }
}

/* Tailwind text-branch and any accent text on the page surface. */
.text-branch {
  color: var(--color-branch-fg);
}

/* Turbo Drive progress bar uses the workspace accent color. */
.turbo-progress-bar {
  background-color: var(--color-branch, #00d8c8);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8vh 1.5rem 1.5rem;
  background: rgba(0, 0, 0, 0.72);
}

.modal-backdrop[hidden] {
  display: none;
}

.toast-stack {
  position: fixed;
  top: 1.1rem;
  left: 50%;
  z-index: 80;
  display: flex;
  width: min(40rem, calc(100vw - 2rem));
  transform: translateX(-50%);
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  border-radius: 0.45rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  font-size: 0.875rem;
  line-height: 1.35;
}

.toast-notice {
  background: #ecf8ef;
  border: 1px solid #b7e0c2;
  color: #14532d;
}

.toast-alert {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #7f1d1d;
}

.toast-icon {
  display: inline-flex;
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
}

.toast-notice .toast-icon {
  background: #16a34a;
  color: #fff;
}

.toast-alert .toast-icon {
  background: #dc2626;
  color: #fff;
}

.toast-body {
  margin: 0;
  flex: 1;
}

.toast-dismiss {
  flex: none;
  background: none;
  border: 0;
  color: #2563eb;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

.modal-card-sm {
  max-width: 22rem;
  padding: 1.15rem 1.25rem 1.1rem;
}

.format-choices {
  display: flex;
  gap: 0.5rem;
}

.format-choice {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 2.25rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid #3f3f46;
  border-radius: 0.45rem;
  background: #141414;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

.format-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.format-choice:has(input:checked) {
  border-color: var(--color-branch);
  background: color-mix(in srgb, var(--color-branch) 12%, transparent);
  color: var(--color-branch-fg);
}

.modal-card {
  width: 100%;
  max-width: 32rem;
  background: #181818;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.9rem;
  padding: 1.5rem 1.75rem 1.35rem;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}

input.hours-input {
  box-sizing: border-box !important;
  width: calc(5ch + 2rem) !important;
  height: 2.625rem !important;
  min-height: 2.625rem !important;
  max-height: 2.625rem !important;
  padding: 0 0.15rem 0 0.4rem !important;
  font-size: 1.35rem !important;
  font-weight: 600;
  line-height: calc(2.625rem - 2px) !important;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Field controls — never style buttons or checks as text inputs */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="color"]),
select,
textarea {
  background: #141414;
  color: #f4f4f4;
  border: 1px solid #3f3f46;
  border-radius: 0.5rem;
  padding: 0.6rem 0.8rem;
  width: 100%;
  min-height: 2.5rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  box-shadow: none;
}

select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23a1a1aa' d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 0.75rem;
  padding-right: 2rem;
  cursor: pointer;
}

textarea {
  min-height: 6rem;
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: #71717a;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="color"]):focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-branch);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-branch) 20%, transparent);
}

input[type="file"] {
  width: 100%;
  padding: 0.4rem 0;
  color: #a1a1aa;
  background: transparent;
  border: 0;
}

.color-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.color-field-swatch {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 1.85rem;
  height: 1.85rem;
  min-width: 1.85rem;
  min-height: 1.85rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: #00d8c8;
  cursor: pointer;
  overflow: hidden;
}

.color-field-swatch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-branch) 28%, transparent);
}

.color-field-hex {
  width: 8.25rem !important;
  max-width: 8.25rem !important;
  min-height: 2.5rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.color-field-popover {
  position: absolute;
  top: calc(100% + 0.45rem);
  left: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 14.5rem;
  padding: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.75rem;
  background: #181818;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.color-field-popover[hidden] {
  display: none;
}

.color-field-sv {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 0.45rem;
  cursor: crosshair;
  touch-action: none;
  overflow: hidden;
}

.color-field-sv-white,
.color-field-sv-black {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.color-field-sv-white {
  background: linear-gradient(to right, #fff, transparent);
}

.color-field-sv-black {
  background: linear-gradient(to top, #000, transparent);
}

.color-field-sv-thumb {
  position: absolute;
  width: 0.85rem;
  height: 0.85rem;
  border: 2px solid #fff;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.color-field-hue {
  width: 100%;
  height: 0.85rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    #ff0000,
    #ffff00,
    #00ff00,
    #00ffff,
    #0000ff,
    #ff00ff,
    #ff0000
  );
  appearance: none;
  cursor: pointer;
}

.color-field-hue::-webkit-slider-thumb {
  appearance: none;
  width: 1rem;
  height: 1rem;
  border: 2px solid #fff;
  border-radius: 999px;
  background: transparent;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.color-field-hue::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  border: 2px solid #fff;
  border-radius: 999px;
  background: transparent;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.color-field-hex-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.55rem;
  align-items: center;
}

.color-field-format {
  margin: 0;
  color: #a1a1aa;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.color-field-hex-panel {
  width: 100% !important;
  min-height: 2.25rem !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

input[type="checkbox"],
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.05rem;
  height: 1.05rem;
  min-width: 1.05rem;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  background: #141414;
  border: 1.5px solid #71717a;
  accent-color: var(--color-branch);
  display: inline-grid;
  place-content: center;
  vertical-align: middle;
}

input[type="checkbox"] {
  border-radius: 0.25rem;
}

input[type="radio"] {
  border-radius: 999px;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background: var(--color-branch);
  border-color: var(--color-branch);
}

input[type="checkbox"]:checked::before {
  content: "";
  width: 0.35rem;
  height: 0.55rem;
  border: solid var(--color-branch-ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}

input[type="radio"]:checked::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: var(--color-branch-ink);
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-branch) 35%, transparent);
}

label {
  font-size: 0.8rem;
  font-weight: 700;
  color: #a1a1aa;
  display: block;
  margin-bottom: 0.35rem;
}

label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]),
.choice-card,
.remember-row label {
  display: flex;
  color: #e4e4e7;
  font-size: 0.875rem;
  font-weight: 400;
  margin-bottom: 0;
}

.remember-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.form-page {
  display: flex;
  justify-content: center;
  padding: 0.5rem 0 3rem;
}

.form-card {
  width: 100%;
  max-width: 36rem;
  background: #181818;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.9rem;
  padding: 1.75rem;
}

.form-card .field,
.form-card .mb-3,
.form-card .mb-4 {
  margin-bottom: 1rem;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.choice-card {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  cursor: pointer;
  border: 1px solid #3f3f46;
  border-radius: 0.65rem;
  padding: 0.9rem 1rem;
  margin: 0 0 0.65rem;
  background: #121212;
  color: #f4f4f4;
}

.choice-card input[type="radio"] {
  margin-top: 0.2rem;
}

.choice-card:hover {
  border-color: #52525b;
}

.choice-card:has(:checked) {
  border-color: var(--color-branch);
  background: color-mix(in srgb, var(--color-branch) 8%, transparent);
}

.choice-card:focus-within {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-branch) 20%, transparent);
}

.choice-card .choice-title {
  display: block;
  font-weight: 600;
  color: #fafafa;
  font-size: 0.95rem;
}

.choice-card .choice-help {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8125rem;
  color: #a1a1aa;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  padding: 0.55rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  min-height: 2.4rem;
  cursor: pointer;
  border: 1px solid transparent;
}

input.btn,
button.btn {
  width: auto;
}

input.btn.w-full,
button.btn.w-full {
  width: 100%;
}

.input-prefix {
  padding-left: 1.75rem !important;
}

.input-compact {
  width: 5.5rem !important;
  min-height: 2.4rem;
}

.input-subdomain {
  width: 16rem !important;
  max-width: 100%;
  min-height: 2.4rem;
}

.report-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.report-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin: 0 0 1rem;
}

.report-toolbar .report-filters {
  flex: 1 1 20rem;
}

.report-save-btn {
  margin-left: auto;
}

.settings-check.is-disabled {
  opacity: 0.45;
}

.report-filters select {
  width: auto;
  min-width: 9.25rem;
  flex: none;
}

.report-filters-basis {
  min-width: 10.75rem;
}

.report-filters .timesheet-date-nav {
  min-height: 2.5rem;
  flex: none;
  color: #f4f4f4;
}

.report-filters .timesheet-date-nav-arrow {
  width: 2.25rem;
  height: 2.5rem;
}

.report-filters .timesheet-date-nav-arrow:first-child {
  border-radius: 0.5rem 0 0 0.5rem;
}

.report-filters .timesheet-date-nav-arrow:last-child {
  border-radius: 0 0.5rem 0.5rem 0;
}

.report-filters .timesheet-date-nav-pick {
  min-height: 2.5rem;
}

.report-range-label {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 0.85rem;
  font-size: 0.9375rem;
  line-height: 1.2;
  white-space: nowrap;
  cursor: default;
  font-variant-numeric: tabular-nums;
}

.report-range-dates {
  display: inline-flex;
  align-items: center;
}

.report-range-sep {
  color: #a1a1aa;
  padding: 0 0.1rem;
}

.report-range-end .timesheet-cal {
  left: auto;
  right: 0;
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.filter-bar .ts-wrapper,
.filter-bar input[type="text"],
.filter-bar input[type="search"] {
  width: 16rem;
  max-width: 100%;
}

.btn-primary {
  background: var(--color-branch);
  color: var(--color-branch-ink);
  border-color: var(--color-branch);
}

.btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-danger {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}

.btn-danger:hover {
  background: #b91c1c;
  border-color: #b91c1c;
  color: #fff;
}

.wizard-backdrop {
  align-items: flex-start;
  padding: 4vh 1.5rem 1.5rem;
}

.wizard-card {
  max-width: 52rem;
  padding: 0;
  overflow: hidden;
}

.wizard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem 0.5rem;
}

.wizard-head h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
}

.wizard-close {
  background: none;
  border: 0;
  color: #a1a1aa;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.wizard-steps {
  display: flex;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0.35rem 1.25rem 1rem;
  color: #71717a;
  font-size: 0.875rem;
}

.wizard-steps li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.wizard-steps span {
  display: inline-flex;
  width: 1.35rem;
  height: 1.35rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid #3f3f46;
  font-size: 0.75rem;
}

.wizard-steps .is-current {
  color: #f4f4f4;
}

.wizard-steps .is-current span {
  background: var(--color-branch);
  border-color: var(--color-branch);
  color: var(--color-branch-ink);
}

.wizard-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-end;
  padding: 0 1.25rem 0.85rem;
}

.wizard-toolbar h3 {
  margin: 0;
  font-size: 1rem;
}

.wizard-toolbar p {
  margin: 0.2rem 0 0;
  font-size: 0.8125rem;
  color: #a1a1aa;
}

.wizard-banner {
  margin: 0 1.25rem 0.75rem;
  border-radius: 0.4rem;
  background: rgba(250, 204, 21, 0.12);
  color: #fde68a;
  font-size: 0.8125rem;
  padding: 0.45rem 0.7rem;
}

.wizard-table-wrap {
  max-height: 22rem;
  overflow: auto;
  margin: 0 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
}

.wizard-table {
  width: 100%;
  font-size: 0.875rem;
}

.wizard-table th,
.wizard-table td {
  padding: 0.55rem 0.75rem;
  text-align: left;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.wizard-table thead th {
  position: sticky;
  top: 0;
  background: #181818;
  color: #a1a1aa;
  font-weight: 500;
  border-top: 0;
}

.wizard-check {
  width: 2rem;
}

.wizard-review {
  margin: 0 1.25rem 0.5rem;
  padding: 0.75rem 1rem;
  max-height: 16rem;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  list-style: disc inside;
}

.wizard-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem 1.15rem;
}

[data-wizard-panel="2"] {
  padding: 0 0 0.25rem;
}

[data-wizard-panel="2"] h3,
[data-wizard-panel="2"] p {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.btn-muted {
  background: transparent;
  border-color: #3f3f46;
  color: #d4d4d8;
}

.btn-compact {
  min-height: 1.85rem !important;
  padding: 0.2rem 0.65rem !important;
  font-size: 0.75rem !important;
  font-weight: 500;
  width: auto;
}

.btn-split {
  display: inline-flex;
  align-items: stretch;
  vertical-align: middle;
}

.btn-split-main {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right-width: 0 !important;
}

.btn-split-menu {
  position: relative;
}

.btn-split-toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 1.85rem;
  padding-left: 0.35rem !important;
  padding-right: 0.35rem !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.btn-split-menu > summary {
  list-style: none;
}

.btn-split-menu > summary::-webkit-details-marker {
  display: none;
}

.filter-search {
  position: relative;
}

.filter-search input {
  width: 100%;
  padding-left: 2.4rem !important;
}

.filter-search::before {
  content: "";
  position: absolute;
  left: 0.85rem;
  top: 50%;
  width: 0.85rem;
  height: 0.85rem;
  transform: translateY(-50%);
  border: 1.5px solid #71717a;
  border-radius: 999px;
  pointer-events: none;
}

.filter-search::after {
  content: "";
  position: absolute;
  left: 1.55rem;
  top: calc(50% + 0.35rem);
  width: 0.4rem;
  height: 1.5px;
  background: #71717a;
  transform: rotate(45deg);
  pointer-events: none;
}

.client-block {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.65rem;
  background: #141414;
}

.client-block-header,
.client-contact-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.85rem;
  padding: 0.75rem 1rem;
}

.client-contact-row {
  grid-template-columns: 4.5rem minmax(0, 1fr);
}

.client-block-header {
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.client-block-name {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
}

.client-contact-row {
  align-items: start;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.client-contact-row:first-child {
  border-top: 0;
}

/* Tom Select — unlayered so it beats the default light stylesheet */
.ts-wrapper {
  width: 100%;
}

.ts-wrapper .ts-control,
.ts-wrapper.single .ts-control,
.ts-wrapper.single.input-active .ts-control,
.ts-wrapper.plugin-dropdown_input .ts-control,
.ts-wrapper.full .ts-control,
.disabled .ts-control {
  background: #141414 !important;
  color: #f4f4f4 !important;
  border: 1px solid #3f3f46 !important;
  border-radius: 0.5rem !important;
  box-shadow: none !important;
  padding: 0.55rem 0.8rem !important;
  min-height: 2.5rem;
  font-size: 0.9375rem !important;
  line-height: 1.4 !important;
}

.ts-wrapper.focus .ts-control,
.ts-wrapper.plugin-dropdown_input.focus.dropdown-active .ts-control {
  border-color: var(--color-branch) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-branch) 20%, transparent) !important;
}

.ts-dropdown,
.ts-control,
.ts-control input {
  color: #f4f4f4 !important;
  font-size: 0.9375rem !important;
}

.ts-control > input {
  color: #f4f4f4 !important;
  background: transparent !important;
}

.ts-dropdown {
  background: #1c1c1c !important;
  border: 1px solid #3f3f46 !important;
  border-radius: 0.6rem !important;
  margin-top: 0.35rem !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55) !important;
  color: #f4f4f4 !important;
  z-index: 80 !important;
}

.ts-wrapper.single .ts-control {
  position: relative;
  cursor: pointer !important;
  padding-right: 2rem !important;
}

.ts-wrapper.single .ts-control::after {
  content: "";
  position: absolute;
  right: 0.75rem;
  top: 50%;
  width: 0;
  height: 0;
  margin-top: -2px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #a1a1aa;
  pointer-events: none;
}

.ts-dropdown .optgroup-header {
  background: transparent !important;
  color: #fafafa !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  padding: 0.55rem 0.85rem 0.2rem !important;
}

.ts-dropdown .option,
.ts-dropdown [data-selectable].option {
  color: #d4d4d8 !important;
  background: transparent !important;
  opacity: 1 !important;
  padding: 0.4rem 0.85rem 0.4rem 1.15rem !important;
}

.ts-dropdown .option[data-value=""],
.ts-control .item[data-value=""] {
  color: #71717a !important;
  font-style: italic;
  font-weight: 400;
}

.ts-dropdown .option[data-value=""].active,
.ts-dropdown .option[data-value=""].selected {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #a1a1aa !important;
}

.ts-dropdown .option.active,
.ts-dropdown .option.selected,
.ts-dropdown .active {
  background: var(--color-branch) !important;
  color: var(--color-branch-ink) !important;
}

.ts-dropdown .dropdown-input-wrap {
  padding: 0.55rem !important;
  background: #1c1c1c !important;
  border-bottom: 1px solid #3f3f46 !important;
}

.ts-dropdown .dropdown-input,
.plugin-dropdown_input .dropdown-input {
  background: #141414 !important;
  border: 1px solid #3f3f46 !important;
  border-radius: 0.4rem !important;
  color: #f4f4f4 !important;
  width: 100% !important;
  padding: 0.45rem 0.65rem !important;
  box-shadow: none !important;
}

.ts-dropdown .dropdown-input:focus {
  outline: none !important;
  border-color: var(--color-branch) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-branch) 20%, transparent) !important;
}

.ts-dropdown .no-results {
  color: #a1a1aa !important;
  opacity: 1 !important;
}

.menu {
  position: relative;
  display: inline-block;
}

.menu > summary {
  list-style: none;
  cursor: pointer;
}

.menu > summary::-webkit-details-marker {
  display: none;
}

.menu-panel {
  position: absolute;
  right: 0;
  z-index: 50;
  margin-top: 0.35rem;
  min-width: 13.5rem;
  border-radius: 0.5rem;
  border: 1px solid #3f3f46;
  background: #18181b;
  padding: 0.35rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.menu-panel a,
.menu-panel button {
  display: block;
  width: 100%;
  text-align: left;
  border-radius: 0.35rem;
  padding: 0.45rem 0.7rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #d4d4d8;
  background: transparent;
  border: 0;
}

.menu-panel a:hover,
.menu-panel button:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.menu-panel form {
  margin: 0;
}

.menu-panel hr.menu-sep,
.menu-sep {
  margin: 0.35rem 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.invoice-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.invoice-tabs {
  display: flex;
  gap: 1.5rem;
  margin: 0 0 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.invoice-tab {
  margin-bottom: -1px;
  padding: 0.7rem 0 0.65rem;
  color: #a1a1aa;
  font-size: 0.9rem;
  border-bottom: 2px solid transparent;
}

.invoice-tab:hover {
  color: #fff;
}

.invoice-tab.is-active {
  color: #f4f4f5;
  font-weight: 600;
  border-bottom-color: var(--color-branch);
}

.invoice-tabs-secondary {
  margin-top: -0.5rem;
  margin-bottom: 1.25rem;
  gap: 1.25rem;
}

.invoice-tabs-secondary .invoice-tab {
  padding-top: 0.45rem;
  padding-bottom: 0.5rem;
  font-size: 0.8125rem;
}

.invoice-list-head .invoice-tabs-secondary {
  margin-top: 0;
  margin-bottom: 0;
}

.expenses-tabs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.expenses-tabs-row .invoice-tabs {
  flex: 1;
  margin-bottom: 0;
}

.recurring-tools {
  margin: 0 0 0.75rem;
}

.recurring-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.table-frame {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0.65rem;
}

.table-frame .recurring-table.has-borders {
  border: 0;
  border-radius: 0;
}

.table-frame .recurring-table.has-borders th,
.table-frame .recurring-table.has-borders td {
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.table-frame .recurring-table.has-borders th:last-child,
.table-frame .recurring-table.has-borders td:last-child {
  border-right: 0;
}

.table-frame .recurring-table.has-borders tr:last-child td {
  border-bottom: 0;
}

.recurring-table th {
  padding: 0.65rem 0.85rem;
  text-align: left;
  color: #d4d4d8;
  font-weight: 600;
  background: #2a2a2a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.recurring-table th.num,
.recurring-table td.num {
  text-align: right;
}

.recurring-table td {
  padding: 0.95rem 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  vertical-align: middle;
}

.data-row {
  position: relative;
}

.data-row:hover {
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
}

.data-row-link {
  color: inherit;
  font-weight: inherit;
}

.data-row-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.recurring-detail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}

.invoice-search {
  width: min(22rem, 40vw);
}

.invoice-overview {
  display: grid;
  grid-template-columns: 16rem 1fr;
  gap: 1.5rem;
  margin-bottom: 1.75rem;
  padding: 1.25rem 1.4rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  background: #181818;
}

.metric-label {
  margin: 0;
  color: #a1a1aa;
  font-size: 0.8rem;
}

.metric-value {
  margin: 0.2rem 0 0;
  font-size: 1.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.metric-note {
  margin: 0.35rem 0 0;
  color: #71717a;
  font-size: 0.75rem;
  line-height: 1.4;
}

.invoice-chart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.invoice-chart-head h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
}

.chart-nav {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #a1a1aa;
}

.chart-nav:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.chart-legend {
  display: flex;
  gap: 0.85rem;
  font-size: 0.75rem;
  color: #a1a1aa;
}

.swatch {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  margin-right: 0.3rem;
  border-radius: 2px;
  vertical-align: -1px;
}

.swatch-open { background: #86efac; }
.swatch-paid { background: #166534; }

.invoice-chart-svg {
  width: 100%;
  height: auto;
  display: block;
}

.chart-grid {
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 1;
}

.chart-tick,
.chart-month {
  fill: #71717a;
  font-size: 10px;
}

.chart-paid { fill: #166534; }
.chart-open { fill: #86efac; }

.invoice-list-head {
  display: block;
}

.invoice-list-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  margin-bottom: 1rem;
}

.invoice-list-toolbar .invoice-tabs-secondary {
  margin: 0;
  flex: 1;
  min-width: 12rem;
}

.invoice-list-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin: 0;
}

.invoice-table-panel {
  overflow: hidden;
}

.invoice-table {
  width: 100%;
  font-size: 0.875rem;
  border-collapse: collapse;
}

.invoice-table th {
  padding: 0.95rem 1.05rem;
  text-align: left;
  color: #a1a1aa;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.02);
  white-space: nowrap;
}

.invoice-table td {
  padding: 1.05rem 1.05rem;
  border-top: 1px solid rgba(255, 255, 255, 0.045);
  vertical-align: middle;
}

.invoice-table tbody tr:first-child td {
  border-top: 0;
}

.invoice-table tfoot td {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

.invoice-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.invoice-table .data-row:hover td {
  background: color-mix(in srgb, var(--color-branch) 6%, transparent);
}

.invoice-id-link {
  color: var(--color-branch-fg);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.invoice-id-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.invoice-client-name {
  font-weight: 700;
  color: #f4f4f5;
}

.invoice-client-subject {
  margin-top: 0.15rem;
  color: #a1a1aa;
  font-size: 0.8125rem;
  line-height: 1.35;
}

.invoice-due,
.invoice-po,
.invoice-date {
  white-space: nowrap;
  color: #d4d4d8;
}

.invoice-due.is-late {
  color: var(--color-branch-complement);
  font-weight: 600;
}

.invoice-total-label {
  text-align: right;
  font-weight: 700;
  color: #f4f4f5;
}

.invoice-total-value {
  font-weight: 700;
  color: #f4f4f5;
}

.invoice-table-empty {
  margin: 0;
  padding: 2.5rem 1.25rem;
  color: #71717a;
  font-size: 0.875rem;
  text-align: center;
}

.column-panel label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.55rem;
  font-size: 0.8125rem;
  color: #e4e4e7;
}

.column-panel input {
  width: auto;
}

@media (max-width: 900px) {
  .invoice-overview {
    grid-template-columns: 1fr;
  }
}

.page-column {
  width: 100%;
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
}

.task-form-card {
  border: 1px solid color-mix(in srgb, var(--color-branch) 35%, transparent);
  background: color-mix(in srgb, var(--color-branch) 8%, transparent);
  border-radius: 0.75rem;
  padding: 1.25rem 1.35rem;
}

.task-group {
  margin-top: 2rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.65rem;
  background: #141414;
}

.task-group-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.task-group.is-selected,
.task-row.is-selected {
  background: color-mix(in srgb, var(--color-branch) 10%, transparent);
}

.task-group-title {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 0;
  cursor: pointer;
}

.task-group-title input {
  margin-top: 0.3rem;
  width: auto;
}

.task-group-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.task-group-header p {
  margin: 0.15rem 0 0;
  font-size: 0.8125rem;
  color: #71717a;
}

.task-rate-label {
  font-size: 0.75rem;
  color: #71717a;
  padding-right: 6.5rem;
  white-space: nowrap;
}

.task-row {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr) 5.5rem auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.task-row:first-child {
  border-top: 0;
}

.task-row-editing {
  display: block;
  padding: 1.1rem 1.15rem;
  background: color-mix(in srgb, var(--color-branch) 8%, transparent);
}

.task-row-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.task-row-rate {
  text-align: right;
  color: #e4e4e7;
}

.pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  padding: 0.1rem 0.5rem;
  font-size: 11px;
  color: #a1a1aa;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1.2;
}

.status-pill-paid,
.status-pill-accepted,
.status-pill-active {
  background: color-mix(in srgb, var(--color-branch) 22%, transparent);
  color: var(--color-branch-fg);
}

.status-pill-open,
.status-pill-sent {
  background: color-mix(in srgb, var(--color-branch) 12%, rgba(255, 255, 255, 0.08));
  color: var(--color-branch-fg);
}

.status-pill-late,
.status-pill-declined {
  background: color-mix(in srgb, var(--color-branch-complement) 22%, transparent);
  color: var(--color-branch-complement);
}

.status-pill-draft,
.status-pill-closed,
.status-pill-inactive {
  background: rgba(161, 161, 170, 0.2);
  color: #e4e4e7;
}

.status-pill-sync-pending {
  background: rgba(251, 191, 36, 0.16);
  color: #fbbf24;
}

.status-pill-sync-synced {
  background: color-mix(in srgb, var(--color-branch) 18%, transparent);
  color: var(--color-branch-fg);
}

.status-pill-sync-failed {
  background: color-mix(in srgb, var(--color-branch-complement) 22%, transparent);
  color: var(--color-branch-complement);
}

.admin-json {
  margin: 0;
  padding: 1rem 1.1rem;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.03);
  color: #d4d4d8;
  font-size: 0.8rem;
  line-height: 1.45;
}

.invoice-status-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.bulk-filter {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid #3f3f46;
  padding: 0.25rem 0.75rem;
  font-size: 0.8125rem;
  color: #d4d4d8;
}

.bulk-filter.is-active {
  border-color: var(--color-branch);
  background: color-mix(in srgb, var(--color-branch) 15%, transparent);
  color: var(--color-branch-fg);
}

.bulk-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.bulk-card {
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  background: #181818;
  padding: 1rem 1.1rem;
}

.bulk-card:hover {
  border-color: color-mix(in srgb, var(--color-branch) 45%, transparent);
}

.bulk-card-group {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #71717a;
}

.bulk-card-title {
  margin: 0.35rem 0 0;
  font-weight: 600;
}

.bulk-card-hint {
  margin: 0.35rem 0 0;
  font-size: 0.8125rem;
  color: #a1a1aa;
}

.bulk-pick-list {
  max-height: 22rem;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.65rem;
}

.bulk-pick-list label {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.55rem 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
}

.bulk-pick-list label:first-child {
  border-top: 0;
}

html.app-html,
html.app-html body.app-body {
  height: 100%;
  overflow: hidden;
}

.app-shell {
  display: flex;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.app-frame {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
}

.app-header {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: stretch;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0;
}

.app-header-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
}

.billing-pay-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 2rem;
  background: #3f2a12;
  border-bottom: 1px solid rgba(251, 191, 36, 0.35);
  color: #fde68a;
  font-size: 0.875rem;
  line-height: 1.4;
}

.billing-pay-bar p {
  margin: 0;
}

.billing-pay-bar-action {
  flex: none;
  color: #04110f;
  background: #fbbf24;
  border: 0;
  border-radius: 0.4rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.billing-pay-bar-form {
  margin: 0;
}

.billing-pay-bar-action:hover {
  background: #f59e0b;
}

.stripe-checkout-backdrop {
  z-index: 76;
  align-items: center;
  padding: 1.5rem;
}

.stripe-checkout-card {
  max-width: 28rem;
  max-height: min(46rem, calc(100vh - 3rem));
  overflow: auto;
  padding: 1.1rem 1.1rem 0.35rem;
}

.stripe-checkout-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.stripe-checkout-head h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
}

.stripe-checkout-head p {
  margin: 0.3rem 0 0;
  color: #a1a1aa;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.stripe-checkout-mount {
  min-height: 18rem;
  width: 100%;
}

.stripe-checkout-mount iframe {
  width: 100% !important;
}

.stripe-checkout-error,
.stripe-checkout-loading {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
}

.stripe-checkout-error {
  color: #fca5a5;
}

.stripe-checkout-error[hidden],
.stripe-checkout-loading[hidden],
.stripe-checkout-pay[hidden] {
  display: none;
}

.stripe-checkout-address {
  margin: 0 0 1rem;
}

.billing-address-form {
  padding: 0.25rem 0 0.75rem;
}

.billing-address-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.9fr) minmax(0, 0.7fr);
  gap: 0.5rem;
}

.billing-address-region {
  min-width: 0;
}

.billing-address-region select,
.billing-address-region input {
  width: 100%;
}

.app-content {
  min-height: 0;
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 1.5rem 2rem;
}

.app-sidebar {
  position: relative;
  display: flex;
  width: 15.5rem;
  height: 100%;
  min-height: 0;
  flex-shrink: 0;
  flex-direction: column;
  overflow: visible;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  background: #111111;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1rem 0.85rem 0.65rem 1rem;
}

.sidebar-logo {
  height: 2rem;
  background: transparent;
}

.sidebar-logo--on-light {
  display: none;
}

html.theme-resolved-light .sidebar-logo--on-dark {
  display: none;
}

html.theme-resolved-light .sidebar-logo--on-light {
  display: block;
}

.collapse-btn {
  display: inline-flex;
  width: 1.85rem;
  height: 1.85rem;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0.35rem;
  background: transparent;
  color: #a1a1aa;
  cursor: pointer;
}

.collapse-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.timer-launch {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 0.75rem 0.85rem;
}

.timer-launch > form,
.timer-running {
  flex: 1;
  min-width: 0;
  position: relative;
}

.timer-stop-form {
  display: flex;
  width: 100%;
  min-width: 0;
  margin: 0;
}

.timer-btn {
  display: inline-flex;
  width: 100%;
  min-height: 2.45rem;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: 0;
  border-radius: 999px;
  background: var(--color-branch);
  color: var(--color-branch-ink);
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
}

.timer-btn.is-running {
  background: var(--color-branch);
  color: var(--color-branch-ink);
  gap: 0.5rem;
  font-size: 0.9375rem;
}

.timer-btn .timer-icon,
.timesheet-stop-btn .timer-icon {
  flex: none;
}

.timer-btn.is-running:hover,
.timer-running:hover .timer-btn.is-running {
  background: color-mix(in srgb, var(--color-branch) 86%, #000);
  color: var(--color-branch-ink);
}

.timer-btn.is-running .timer-icon-stop,
.timesheet-stop-btn .timer-icon-stop {
  display: none;
}

.timer-btn.is-running:hover .timer-icon-clock,
.timer-btn.is-running:focus-visible .timer-icon-clock,
.timer-running:hover .timer-btn.is-running .timer-icon-clock,
.timesheet-stop-btn:hover .timer-icon-clock,
.timesheet-stop-btn:focus-visible .timer-icon-clock {
  display: none;
}

.timer-btn.is-running:hover .timer-icon-stop,
.timer-btn.is-running:focus-visible .timer-icon-stop,
.timer-running:hover .timer-btn.is-running .timer-icon-stop,
.timesheet-stop-btn:hover .timer-icon-stop,
.timesheet-stop-btn:focus-visible .timer-icon-stop {
  display: block;
}

.timer-hand-second {
  opacity: 0.9;
}

.timesheet-stop-btn .timer-hand-second {
  opacity: 0.85;
}

.icon-btn {
  display: inline-flex;
  width: 2.35rem;
  height: 2.35rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border: 1px solid #3f3f46;
  border-radius: 999px;
  background: #181818;
  color: #e4e4e7;
  cursor: pointer;
}

.icon-btn:hover {
  border-color: #71717a;
}

.sidebar-more > summary.icon-btn {
  list-style: none;
}

.sidebar-more .menu-panel {
  left: 0;
  right: auto;
}

.timer-popover {
  position: absolute;
  top: 6.4rem;
  left: 0.75rem;
  z-index: 65;
  width: 22rem;
  padding: 1rem 1.1rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.85rem;
  background: #181818;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}

.timer-running .timer-popover {
  top: calc(100% + 0.45rem);
  left: 0;
  width: min(22rem, calc(100vw - 2rem));
}

.timer-popover[hidden] {
  display: none;
}

.timer-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}

.timer-popover-head h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
}

.time-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0 0 0.65rem;
  padding: 0;
  border: 0;
  background: none;
  color: #d4d4d8;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

.time-toggle::after {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.time-toggle.is-open::after {
  transform: rotate(-135deg);
  margin-top: 0.25rem;
}

.edit-entry-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-top: 0.25rem;
}

.edit-entry-footer .btn-row {
  margin-top: 0;
}

.edit-entry-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: 0.75rem;
}

.edit-entry-notes {
  position: relative;
  min-width: 0;
}

.edit-entry-notes textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding-bottom: 1.5rem;
  resize: vertical;
  vertical-align: bottom;
}

.edit-entry-notes-hint {
  position: absolute;
  right: 0.65rem;
  bottom: 0.45rem;
  margin: 0;
  color: #71717a;
  font-size: 0.7rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  pointer-events: none;
}

.edit-entry-hours {
  position: relative;
  align-self: end;
  margin: 0;
  padding: 0;
  line-height: 0;
}

.edit-entry-hours-tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.45rem);
  z-index: 2;
  width: max-content;
  max-width: 11rem;
  padding: 0.4rem 0.55rem;
  border-radius: 0.35rem;
  background: #111;
  color: #f4f4f4;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  transform: translateX(-50%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease, visibility 0.12s ease;
}

.edit-entry-hours-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  border: 5px solid transparent;
  border-top-color: #111;
  transform: translateX(-50%);
}

.edit-entry-hours.is-locked:hover .edit-entry-hours-tip,
.edit-entry-hours.is-locked:focus-within .edit-entry-hours-tip {
  opacity: 1;
  visibility: visible;
}

.edit-entry-hours input.hours-input {
  display: block;
  margin: 0;
}

.edit-entry-hours.is-locked input.hours-input {
  background: #0f0f10 !important;
  border-color: #2a2a2e !important;
  color: #71717a !important;
  cursor: not-allowed;
  opacity: 1;
}

.edit-entry-aside {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}

.edit-entry-date {
  position: relative;
  display: flex;
  align-items: center;
}

.edit-entry-date-pick {
  display: inline-flex;
  align-items: center;
  min-height: 2.4rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid #3f3f46;
  border-radius: 0.5rem;
  background: #141414;
  color: #f4f4f4;
  font: inherit;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.edit-entry-date-pick:hover {
  border-color: #71717a;
}

.edit-entry-date-pick[aria-expanded="true"] {
  border-color: var(--color-branch-fg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-branch) 22%, transparent);
}

/* Higher specificity than .timesheet-cal so the panel opens above the footer control. */
.timesheet-cal.edit-entry-cal {
  top: auto;
  bottom: calc(100% + 0.4rem);
  left: auto;
  right: 0;
  z-index: 90;
  background: #222226;
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(255, 255, 255, 0.04);
}

.edit-entry-delete {
  border: 0;
  background: transparent;
  color: #f87171;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.12em;
  cursor: pointer;
  padding: 0;
}

.edit-entry-delete:hover {
  color: #fca5a5;
}

.edit-entry-confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem 1rem;
  padding-top: 0.35rem;
}

.edit-entry-confirm[hidden] {
  display: none;
}

.edit-entry-confirm-copy {
  margin: 0;
  color: #f4f4f4;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
}

.edit-entry-confirm-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.edit-entry-confirm-actions .btn-danger {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
}

.edit-entry-confirm-actions .btn-danger:hover {
  background: #b91c1c;
  border-color: #b91c1c;
}

.edit-entry-card textarea {
  min-height: 4.5rem;
}

.edit-timer-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.45rem;
}

.edit-timer-actions .btn {
  flex: none;
  white-space: nowrap;
  padding-left: 0.7rem;
  padding-right: 0.7rem;
}

.edit-timer-remove {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.3rem;
  margin-left: auto;
  color: #f87171;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.12em;
  white-space: nowrap;
}

.edit-timer-remove:hover {
  color: #fca5a5;
}

.edit-timer-form textarea {
  min-height: 4.5rem;
}

.timesheet-date-nav {
  display: inline-flex;
  align-items: center;
  min-height: 2.35rem;
  border: 1px solid #3f3f46;
  border-radius: 0.5rem;
  background: #141414;
}

.timesheet-date-nav-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.35rem;
  color: #a1a1aa;
  flex: none;
}

.timesheet-date-nav-arrow:hover {
  color: #f4f4f4;
  background: rgba(255, 255, 255, 0.04);
}

.timesheet-date-nav-form {
  position: relative;
  display: flex;
  margin: 0;
  min-width: 0;
}

.timesheet-date-nav-pick {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.35rem;
  padding: 0 0.75rem;
  border: 0;
  background: transparent;
  color: #f4f4f4;
  font: inherit;
  font-size: 0.9375rem;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}

.timesheet-date-nav-pick:hover {
  background: rgba(255, 255, 255, 0.04);
}

.timesheet-date-nav-label strong {
  font-weight: 700;
}

.timesheet-cal {
  position: absolute;
  top: calc(100% + 0.45rem);
  left: 0;
  z-index: 70;
  width: 18.5rem;
  padding: 1rem 1.05rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.75rem;
  background: #181818;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  color: #f4f4f4;
  font-family: inherit;
}

.timesheet-cal[hidden] {
  display: none;
}

.timesheet-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.timesheet-cal-month {
  font-size: 0.9375rem;
  font-weight: 700;
}

.timesheet-cal-nav {
  display: inline-flex;
  gap: 0.15rem;
}

.timesheet-cal-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border: 0;
  border-radius: 0.4rem;
  background: transparent;
  color: #a1a1aa;
  cursor: pointer;
}

.timesheet-cal-nav-btn:hover {
  color: #f4f4f4;
  background: rgba(255, 255, 255, 0.06);
}

.timesheet-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.2rem;
}

.timesheet-cal-dow {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 1.85rem;
  color: #71717a;
  font-size: 0.75rem;
  font-weight: 600;
}

.timesheet-cal-day {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.15rem;
  border: 0;
  border-radius: 0.45rem;
  background: transparent;
  color: #f4f4f4;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}

.timesheet-cal-day:hover {
  background: rgba(255, 255, 255, 0.06);
}

.timesheet-cal-day.is-outside {
  color: #52525b;
}

.timesheet-cal-day.is-today:not(.is-selected) {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-branch) 55%, transparent);
  color: var(--color-branch-fg);
}

.timesheet-cal-day.is-selected {
  background: var(--color-branch);
  color: var(--color-branch-ink);
  font-weight: 700;
}

.timesheet-cal-day.is-selected:hover {
  background: var(--color-branch);
  color: var(--color-branch-ink);
}

.timesheet-cal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.timesheet-cal-link {
  border: 0;
  background: transparent;
  color: var(--color-branch-fg);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.2rem 0.15rem;
}

.timesheet-cal-link:hover {
  text-decoration: underline;
}

.timesheet-table th:first-child,
.timesheet-table td:first-child {
  padding-left: 1.15rem;
}

.timesheet-table th:last-child,
.timesheet-table td:last-child {
  padding-right: 1.15rem;
}

.timesheet-day {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.timesheet-day-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr)) minmax(5.5rem, 0.85fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  background: #141414;
}

.timesheet-day-strip-cell,
.timesheet-day-strip-total {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-height: 3.6rem;
  padding: 0.65rem 0.4rem;
  text-align: center;
  text-decoration: none;
  color: #a1a1aa;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}

.timesheet-day-strip-cell:first-child {
  border-left: 0;
}

.timesheet-day-strip-cell:hover {
  background: rgba(255, 255, 255, 0.03);
  color: #e4e4e7;
}

.timesheet-day-strip-cell.is-selected {
  background: color-mix(in srgb, var(--color-branch) 12%, transparent);
  color: var(--color-branch-fg);
  box-shadow: inset 0 -2px 0 var(--color-branch);
}

.timesheet-day-strip-dow {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
}

.timesheet-day-strip-hours {
  font-size: 1rem;
  font-weight: 700;
  color: #f4f4f4;
  line-height: 1.2;
}

.timesheet-day-strip-cell.is-selected .timesheet-day-strip-hours {
  color: var(--color-branch-fg);
}

.timesheet-day-strip-total {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
}

.timesheet-day-panel {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  background: #141414;
}

.timesheet-day-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.875rem;
}

.timesheet-day-col-project {
  width: auto;
}

.timesheet-day-col-hours {
  width: 7.5rem;
}

.timesheet-day-col-actions {
  width: 12.5rem;
}

.timesheet-day-table thead th {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  color: #a1a1aa;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: left;
}

.timesheet-day-hours-head,
.timesheet-day-table .timesheet-entry-hours,
.timesheet-day-foot td {
  text-align: right;
}

.timesheet-day-actions-head,
.timesheet-entry-actions-cell {
  text-align: right;
}

.timesheet-entry-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
}

.timesheet-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.timesheet-day-table .timesheet-entry-cell {
  padding: 1rem;
  vertical-align: middle;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.timesheet-entry-project-inner {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  min-width: 0;
}

.timesheet-entry-accent {
  width: 3px;
  flex: none;
  border-radius: 2px;
  background: var(--color-branch);
}

.timesheet-entry-project-body {
  min-width: 0;
}

.timesheet-entry-title {
  line-height: 1.35;
}

.timesheet-entry-project-name {
  font-weight: 700;
  color: #f4f4f4;
}

.timesheet-entry-client {
  font-weight: 500;
  color: #71717a;
}

.timesheet-entry-task {
  margin-top: 0.15rem;
  color: #a1a1aa;
}

.timesheet-entry-notes {
  margin-top: 0.25rem;
  color: #71717a;
  font-size: 0.8125rem;
  line-height: 1.35;
}

.timesheet-entry-badge {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #a1a1aa;
  font-size: 0.6875rem;
  font-weight: 600;
}

.timesheet-entry-hours {
  width: 7.5rem;
}

.timesheet-entry-hours-value,
.timesheet-running-time {
  font-size: 0.9375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #f4f4f4;
}

.timesheet-running-time {
  color: var(--color-branch-fg);
}

.timesheet-entry-locked {
  color: #71717a;
  font-size: 0.8125rem;
}

.timesheet-row-running td {
  background: color-mix(in srgb, var(--color-branch) 6%, transparent);
}

.timesheet-day-foot th,
.timesheet-day-foot td {
  padding: 0.85rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
  color: #f4f4f4;
  font-size: 0.875rem;
  font-weight: 700;
}

.timesheet-day-foot th {
  text-align: left;
  color: #a1a1aa;
  font-weight: 600;
}

.timesheet-day-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.timesheet-day-total {
  padding-right: 1.15rem;
  text-align: right;
}

.expenses-list {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}

.expenses-week-title {
  margin: 0 0 0.55rem;
  color: #e4e4e7;
  font-size: 0.875rem;
  font-weight: 600;
}

.expenses-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.875rem;
}

.expenses-col-date {
  width: 7.5rem;
}

.expenses-col-detail {
  width: auto;
}

.expenses-col-amount {
  width: 7.5rem;
}

.expenses-col-actions {
  width: 12rem;
}

.expenses-table thead th {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  color: #a1a1aa;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: left;
}

.expenses-table .timesheet-entry-cell {
  padding: 1.1rem 1rem;
  vertical-align: middle;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.expenses-table .timesheet-entry-title {
  margin-bottom: 0.2rem;
}

.expenses-table .timesheet-entry-badge {
  margin-top: 0.55rem;
}

.expenses-amount-head,
.expenses-amount,
.expenses-table .timesheet-day-foot td {
  text-align: right;
}

.expenses-actions-head,
.expenses-actions-cell {
  text-align: right;
}

.expenses-date {
  color: #a1a1aa;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}

.expenses-amount-value {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #f4f4f4;
}

.expenses-meta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
}

.expenses-meta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 0.4rem;
  color: #a1a1aa;
  text-decoration: none;
}

.expenses-meta-icon svg {
  width: 1.7rem;
  height: 1.7rem;
}

a.expenses-meta-icon:hover {
  color: var(--color-branch-fg);
  background: color-mix(in srgb, var(--color-branch) 12%, transparent);
}

.expenses-meta-icon.is-locked {
  color: #71717a;
}

.expenses-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
}

.expenses-row-actions form {
  display: inline;
  margin: 0;
}

.file-dropzone {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.file-dropzone-caption {
  color: #a1a1aa;
  font-size: 0.8125rem;
  font-weight: 600;
}

.file-dropzone-surface {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 5.5rem;
  padding: 0.75rem;
  border: 1.5px dashed #3f3f46;
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.02);
  color: #a1a1aa;
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.file-dropzone-surface:hover,
.file-dropzone.is-dragging .file-dropzone-surface {
  border-color: var(--color-branch);
  background: color-mix(in srgb, var(--color-branch) 10%, transparent);
  color: var(--color-branch-fg);
}

.file-dropzone-empty,
.file-dropzone-chosen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  min-width: 0;
}

.file-dropzone-chosen {
  gap: 0.35rem;
}

.file-dropzone-icon {
  flex: none;
  opacity: 0.9;
}

.file-dropzone-label,
.file-dropzone-name {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
}

.file-dropzone-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #e4e4e7;
}

.file-dropzone-hint,
.file-dropzone-clear,
.file-dropzone-current {
  font-size: 0.75rem;
  font-weight: 500;
  color: #71717a;
}

.file-dropzone-clear {
  border: 0;
  background: transparent;
  color: #a1a1aa;
  text-decoration: underline;
  text-underline-offset: 0.12em;
  cursor: pointer;
  padding: 0;
  font: inherit;
  font-size: 0.75rem;
}

.file-dropzone-clear:hover {
  color: #f4f4f4;
}

.file-dropzone-current {
  margin: 0;
}

.file-dropzone-current a {
  color: var(--color-branch-fg);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.expense-categories-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.875rem;
}

.expense-categories-col-name {
  width: auto;
}

.expense-categories-col-unit {
  width: 8.5rem;
}

.expense-categories-col-price {
  width: 8.5rem;
}

.expense-categories-col-actions {
  width: 8.5rem;
}

.expense-categories-table thead th {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  color: #a1a1aa;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: left;
}

.expense-categories-table .timesheet-entry-cell {
  padding: 0.85rem 1rem;
  vertical-align: middle;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.expense-categories-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.expense-categories-name-text {
  font-weight: 700;
  color: #f4f4f4;
}

.expense-categories-unit,
.expense-categories-empty {
  color: #a1a1aa;
}

.expense-categories-price-head,
.expense-categories-price {
  text-align: right;
}

.expense-categories-price-value {
  font-weight: 700;
  color: #f4f4f4;
}

.expense-categories-actions-head,
.expense-categories-actions-cell {
  text-align: right;
}

.expense-categories-actions-cell .menu {
  display: inline-block;
  text-align: left;
}

.expense-categories-row.is-archived .expense-categories-name-text {
  color: #a1a1aa;
}

.expense-categories-row.is-editing {
  background: color-mix(in srgb, var(--color-branch) 8%, transparent);
}

.expense-categories-inline-cell {
  padding: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  vertical-align: top;
}

.expense-category-panel {
  padding: 1.1rem 1.15rem 1.15rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--color-branch) 10%, #141414);
}

.expense-category-panel.is-inline {
  border: 0;
  border-radius: 0;
  background: color-mix(in srgb, var(--color-branch) 10%, #141414);
}

.expense-category-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-width: 28rem;
}

.expense-category-form-field label {
  display: block;
  margin-bottom: 0.35rem;
}

.expense-category-unit-toggle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.75rem;
}

.expense-category-unit-check {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: #d4d4d8;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}

.expense-category-unit-help {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--color-branch-fg);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.12em;
  cursor: pointer;
}

.expense-category-unit-blurb {
  margin: 0.55rem 0 0;
  max-width: 34rem;
  color: #a1a1aa;
  font-size: 0.8125rem;
  line-height: 1.45;
}

.expense-category-unit-blurb[hidden] {
  display: none;
}

.expense-category-unit-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.expense-category-unit-fields[hidden] {
  display: none;
}

.expense-category-price-wrap {
  position: relative;
}

.expense-category-price-wrap > span {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: #71717a;
  pointer-events: none;
}

.expense-category-price-wrap input {
  padding-left: 1.45rem !important;
}

.expense-category-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.team-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.875rem;
}

.team-col-name {
  width: auto;
}

.team-col-metric {
  width: 8rem;
}

.team-table thead th {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  color: #a1a1aa;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: left;
}

.team-table thead th.team-metric-head,
.team-table .team-metric {
  text-align: right;
}

.team-table .timesheet-entry-cell {
  padding: 1rem;
  vertical-align: middle;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.team-metric {
  font-weight: 700;
  color: #f4f4f4;
}

.team-person {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.team-person-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.team-person-body .timesheet-entry-badge {
  margin-top: 0;
}

.team-person-name {
  font-weight: 700;
  color: #f4f4f4;
  text-decoration: none;
}

.team-person-name:hover {
  color: var(--color-branch-fg);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.team-col-actions {
  width: 7.5rem;
}

.team-actions-head,
.team-actions-cell {
  text-align: right;
}

.team-actions-cell .btn-split {
  justify-content: flex-end;
}

.team-utilization {
  margin-bottom: 1.5rem;
  padding: 1.15rem 1.35rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  background: var(--color-raised);
}

.team-utilization-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.35rem;
  margin-bottom: 0.85rem;
  color: #a1a1aa;
  font-size: 0.8125rem;
}

.team-utilization-legend strong {
  margin-left: 0.3rem;
  color: #e4e4e7;
  font-weight: 600;
}

.team-utilization-swatch {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  margin-right: 0.35rem;
  border-radius: 0.15rem;
  vertical-align: -0.08rem;
}

.team-utilization-swatch.is-billable,
.team-utilization-fill.is-billable {
  background: var(--color-branch);
}

.team-utilization-swatch.is-nonbillable,
.team-utilization-fill.is-nonbillable {
  background: color-mix(in srgb, var(--color-branch) 38%, #3f3f46);
}

.team-utilization-track {
  display: flex;
  height: 0.7rem;
  overflow: hidden;
  border-radius: 0.2rem;
  background: rgba(255, 255, 255, 0.08);
}

.team-utilization-bar {
  position: relative;
  cursor: default;
}

.team-utilization-bar:hover .team-utilization-track,
.team-utilization-bar:focus-within .team-utilization-track {
  outline: 1px solid rgba(255, 255, 255, 0.16);
}

.team-utilization-tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.45rem);
  z-index: 2;
  width: max-content;
  max-width: 14rem;
  padding: 0.4rem 0.55rem;
  border-radius: 0.35rem;
  background: #111;
  color: #f4f4f4;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  transform: translateX(-50%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease, visibility 0.12s ease;
}

.team-utilization-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  border: 5px solid transparent;
  border-top-color: #111;
  transform: translateX(-50%);
}

.team-utilization-bar:hover .team-utilization-tip,
.team-utilization-bar:focus-within .team-utilization-tip {
  opacity: 1;
  visibility: visible;
}

.team-utilization-fill {
  display: block;
  height: 100%;
}

.team-utilization-ticks {
  position: relative;
  height: 1.15rem;
  margin-top: 0.35rem;
}

.team-utilization-ticks span {
  position: absolute;
  top: 0;
  color: #71717a;
  font-size: 0.6875rem;
  transform: translateX(-50%);
}

.person-show-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.person-show-name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.person-show-name {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 650;
}

.person-show-email {
  margin: 0.35rem 0 0;
  color: #a1a1aa;
  font-size: 0.875rem;
}

.person-show {
  display: grid;
  grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 56rem) {
  .person-show {
    grid-template-columns: 1fr;
  }
}

.person-show-side {
  display: grid;
  gap: 1rem;
}

.person-show-card {
  padding: 1.15rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  background: var(--color-raised);
}

.person-show-card .team-utilization {
  margin: 1rem -0.15rem 0.85rem;
  padding: 0;
  border: 0;
  background: transparent;
}

.person-show-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.person-show-stat {
  margin: 0.2rem 0 0;
  font-size: 1.35rem;
  font-weight: 650;
}

.person-show-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.35rem;
  margin-top: 0.35rem;
  color: #a1a1aa;
  font-size: 0.7rem;
  text-align: center;
}

.person-show-days strong {
  display: block;
  margin-top: 0.15rem;
  color: #e4e4e7;
  font-size: 0.75rem;
  font-weight: 600;
}

.person-show-card-title {
  margin: 0 0 0.85rem;
  font-size: 0.8125rem;
  font-weight: 650;
}

.person-breakdown-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.person-breakdown-list li + li {
  margin-top: 0.7rem;
}

.person-breakdown-label {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.3rem;
  font-size: 0.8125rem;
}

.person-breakdown-track {
  height: 0.45rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.person-breakdown-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--color-branch);
}

.person-breakdown-empty {
  margin: 0;
  color: #71717a;
  font-size: 0.875rem;
}

.person-show-log {
  display: grid;
  gap: 1.5rem;
}

.person-show-day-title {
  margin: 0 0 0.65rem;
  font-size: 0.95rem;
  font-weight: 650;
}

.person-show-empty-cell {
  padding: 1.1rem 1rem;
  color: #71717a;
  font-size: 0.875rem;
}

.person-log-col-date {
  width: 8.75rem;
}

.team-period-nav {
  margin: 0;
}

.projects-panel {
  overflow: hidden;
}

.project-show-lede {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 1.25rem;
}

.project-show-meta {
  margin: 0;
  color: #a1a1aa;
  font-size: 0.875rem;
}

.project-show-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  margin-bottom: 1.25rem;
}

.project-show-budget {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  overflow: hidden;
  margin-bottom: 1.25rem;
}

.project-show-budget-amount {
  padding: 1.1rem 1.25rem;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.project-show-budget-progress {
  padding: 1.1rem 1.25rem;
  min-width: 0;
}

.project-show-budget .budget-progress-labels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 0.35rem;
}

.project-show-budget .budget-progress-labels .project-show-stat-label {
  margin: 0;
  text-align: right;
}

.project-show-budget .budget-progress {
  min-width: 0;
  width: 100%;
}

.project-show-budget .budget-progress .budget-bar {
  width: 100%;
}

.project-show-stat {
  padding: 1.1rem 1.25rem;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.project-show-stat:last-child {
  border-right: 0;
}

.project-show-stat-label {
  margin: 0 0 0.35rem;
  color: #a1a1aa;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.project-show-stat-value {
  margin: 0;
  color: #f4f4f5;
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.project-show-stat-value.is-over {
  color: var(--color-branch-complement);
}

.project-show-notes {
  margin: 0 0 1.5rem;
  color: #a1a1aa;
  font-size: 0.875rem;
  line-height: 1.5;
}

.project-show-section {
  margin-top: 0.5rem;
}

.project-show-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.project-show-section-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #f4f4f5;
}

.project-task-billable {
  color: #d4d4d8;
  font-size: 0.875rem;
}

.project-task-billable.is-no {
  color: #71717a;
}

@media (max-width: 640px) {
  .project-show-stats {
    grid-template-columns: 1fr;
  }

  .project-show-budget {
    grid-template-columns: 1fr;
  }

  .project-show-budget-amount {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .project-show-stat {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .project-show-stat:last-child {
    border-bottom: 0;
  }
}

.projects-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.875rem;
}

.projects-col-name {
  width: auto;
}

.projects-col-metric {
  width: 8.5rem;
}

.projects-col-action {
  width: 5.5rem;
}

.projects-table thead th {
  padding: 0.95rem 1.15rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.02);
  color: #a1a1aa;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: left;
}

.projects-table thead th.projects-metric-head,
.projects-table .projects-metric {
  text-align: right;
}

.projects-table thead th.projects-action-head,
.projects-table .projects-action {
  text-align: right;
}

.projects-table .timesheet-entry-cell {
  padding: 1.05rem 1.15rem;
  vertical-align: middle;
  border-top: 1px solid rgba(255, 255, 255, 0.045);
}

.projects-row:first-child .timesheet-entry-cell {
  border-top: 0;
}

.projects-row:hover .timesheet-entry-cell {
  background: color-mix(in srgb, var(--color-branch) 6%, transparent);
}

.projects-name-cell {
  min-width: 0;
}

.projects-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.65rem;
  min-width: 0;
}

.projects-name {
  font-weight: 700;
  color: #f4f4f5;
  text-decoration: none;
}

.projects-name:hover {
  color: var(--color-branch-fg);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.project-favorite-form {
  display: inline-flex;
  margin: 0;
  flex-shrink: 0;
}

.project-favorite-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: 0.4rem;
  background: transparent;
  color: #71717a;
  cursor: pointer;
}

.project-favorite-btn:hover {
  color: var(--color-branch-fg);
  background: color-mix(in srgb, var(--color-branch) 12%, transparent);
}

.project-favorite-btn.is-favorited {
  color: var(--color-branch-fg);
}

.dashboard-project-cell {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
}

.projects-billing {
  color: #71717a;
  font-size: 0.8125rem;
  font-weight: 500;
}

.projects-meta {
  margin-top: 0.2rem;
  color: #a1a1aa;
  font-size: 0.8125rem;
}

.projects-metric {
  color: #f4f4f5;
  font-weight: 600;
}

.projects-metric.is-over {
  color: #fca5a5;
}

.projects-empty {
  margin: 0;
  padding: 2.5rem 1.25rem;
  color: #71717a;
  font-size: 0.875rem;
  text-align: center;
}

@media (max-width: 860px) {
  .projects-col-metric {
    width: 6.5rem;
  }

  .projects-table thead th,
  .projects-table .timesheet-entry-cell {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }
}

.team-empty {
  margin: 0;
  padding: 1.25rem 1rem;
  color: #71717a;
  font-size: 0.875rem;
}

.archived-people-col-rate {
  width: 11rem;
}

.team-tabs {
  display: flex;
  gap: 1.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.team-tab {
  padding: 0.35rem 0 0.65rem;
  color: #a1a1aa;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.team-tab:hover {
  color: #e4e4e7;
}

.team-tab.is-active {
  color: var(--color-branch-fg);
  border-bottom-color: var(--color-branch);
}

.team-assignments-lede {
  margin: 0.85rem 0 0.75rem;
  color: #a1a1aa;
  font-size: 0.875rem;
  line-height: 1.45;
  max-width: 42rem;
}

.team-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.team-subtab {
  padding: 0.4rem 0.75rem;
  border-radius: 0.45rem;
  color: #a1a1aa;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
}

.team-subtab:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #e4e4e7;
}

.team-subtab.is-active {
  background: color-mix(in srgb, var(--color-branch) 14%, transparent);
  color: var(--color-branch-fg);
}

.team-group-row td {
  padding: 0.55rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  color: #a1a1aa;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.team-profile-people {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  color: #e4e4e7;
  font-weight: 700;
}

.team-profile-search {
  max-width: 16rem;
}

.department-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  max-width: 28rem;
}

.department-people-label {
  display: block;
  margin-bottom: 0.4rem;
  color: #a1a1aa;
  font-size: 0.8125rem;
  font-weight: 600;
}

.department-people-list {
  max-height: 14rem;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.55rem;
  background: rgba(0, 0, 0, 0.15);
}

.department-person-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: #e4e4e7;
  font-size: 0.875rem;
  cursor: pointer;
}

.department-person-row:last-child {
  border-bottom: 0;
}

.profile-editor-card {
  max-width: 40rem;
  margin: 0 auto;
  padding: 1.35rem 1.4rem 1.4rem;
}

.profile-form-actions {
  margin-top: 1.75rem;
  padding-top: 0.25rem;
}

.profile-form-hint {
  margin: 0.45rem 0 0;
  color: #a1a1aa;
  font-size: 0.8125rem;
  line-height: 1.45;
}

.profile-permissions-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
  color: #e4e4e7;
  font-size: 0.9375rem;
}

.profile-permissions-head span {
  color: #a1a1aa;
  font-size: 0.8125rem;
  font-weight: 600;
}

.profile-permissions-list {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.65rem;
  overflow: hidden;
  background: #141414;
}

.profile-permission-group {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.profile-permission-group:last-child {
  border-bottom: 0;
}

.profile-permission-group[open] {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.profile-permission-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  list-style: none;
  padding: 0.75rem 0.9rem;
  cursor: pointer;
  color: #f4f4f4;
  font-weight: 650;
}

.profile-permission-group > summary::-webkit-details-marker {
  display: none;
}

.profile-permission-group > summary::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  margin-right: 0.55rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  opacity: 0.7;
}

.profile-permission-group[open] > summary::before {
  transform: rotate(45deg);
  margin-top: -0.15rem;
}

.profile-permission-group-name {
  flex: 1;
}

.profile-permission-group-count {
  color: #a1a1aa;
  font-size: 0.8125rem;
  font-weight: 600;
}

.profile-permission-items {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0 0.9rem 0.85rem 1.85rem;
}

.profile-permission-item {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0;
  color: #d4d4d8;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}

.profile-permission-item.is-locked {
  color: #71717a;
  cursor: default;
}

.team-assign-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}

.team-assign-filters .filter-search {
  flex: 1 1 14rem;
  max-width: 18rem;
}

.team-assign-filters select {
  width: auto;
  min-width: 8.5rem;
}

.assign-inline-form {
  margin: 0;
}

.assign-inline-form select {
  min-width: 9rem;
}

.timesheet-edit {
  position: relative;
}

.timesheet-edit-popover {
  top: calc(100% + 0.45rem);
  right: 0;
  left: auto;
  width: min(22rem, calc(100vw - 2rem));
}

.sidebar-nav {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  gap: 1.25rem;
  overflow: auto;
  padding: 0.25rem 0.65rem 0.5rem;
}

.sidebar-heading {
  margin: 0;
  padding: 0 0.75rem 0.25rem;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #71717a;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.45rem 0.75rem;
  border-radius: 0.4rem;
  color: #d4d4d8;
  font-size: 0.875rem;
}

.sidebar-link:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.sidebar-link.is-active {
  background: color-mix(in srgb, var(--color-branch) 15%, transparent);
  color: var(--color-branch-fg);
}

.sidebar-icon {
  display: none;
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  align-items: center;
  justify-content: center;
}

.sidebar-icon svg {
  display: block;
}

.sidebar-signout {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0;
  border: 0;
  background: none;
  color: #a1a1aa;
  font-size: 0.75rem;
  cursor: pointer;
}

.sidebar-signout:hover {
  color: #fff;
}

.sidebar-user-avatar {
  display: none;
  width: 1.85rem;
  height: 1.85rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-branch) 18%, transparent);
  color: var(--color-branch-fg);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.sidebar-foot {
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.75rem;
}

.sidebar-theme {
  margin: 0 0 0.65rem;
}

.sidebar-theme .sidebar-heading {
  padding-left: 0.35rem;
}

.sidebar-theme-picks {
  display: flex;
  gap: 0.2rem;
}

.sidebar-theme-btn {
  display: inline-flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  min-height: 2.35rem;
  padding: 0.3rem 0.2rem;
  border: 1px solid transparent;
  border-radius: 0.4rem;
  background: transparent;
  color: #a1a1aa;
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.sidebar-theme-btn svg {
  display: block;
  pointer-events: none;
}

.sidebar-theme-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #f4f4f5;
}

.sidebar-theme-btn.is-active {
  background: color-mix(in srgb, var(--color-branch) 15%, transparent);
  border-color: color-mix(in srgb, var(--color-branch) 40%, transparent);
  color: var(--color-branch-fg);
}

.sidebar-locale {
  position: relative;
  margin: 0 0 0.65rem;
}

.sidebar-locale-trigger {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.45rem 0.55rem;
  border: 1px solid transparent;
  border-radius: 0.45rem;
  background: transparent;
  color: #d4d4d8;
  font-size: 0.78rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.sidebar-locale-trigger::-webkit-details-marker {
  display: none;
}

.sidebar-locale-trigger:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #f4f4f5;
}

.sidebar-locale[open] > .sidebar-locale-trigger {
  background: color-mix(in srgb, var(--color-branch) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-branch) 35%, transparent);
  color: var(--color-branch-fg);
}

.sidebar-locale-flag {
  font-size: 1.15rem;
  line-height: 1;
}

.sidebar-locale-panel {
  position: absolute;
  left: 0;
  bottom: calc(100% + 0.35rem);
  z-index: 90;
  width: min(18.5rem, calc(100vw - 2rem));
  max-height: min(22rem, 55vh);
  overflow: auto;
  padding: 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.55rem;
  background: #18181b;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.sidebar-locale-group {
  margin: 0.45rem 0.35rem 0.2rem;
  color: #71717a;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sidebar-locale-group:first-child {
  margin-top: 0.15rem;
}

.sidebar-locale-option {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.4rem 0.5rem;
  border: 0;
  border-radius: 0.35rem;
  background: transparent;
  color: #e4e4e7;
  font-size: 0.8rem;
  text-align: start;
  cursor: pointer;
}

.sidebar-locale-option:hover {
  background: rgba(255, 255, 255, 0.06);
}

.sidebar-locale-option.is-active {
  background: color-mix(in srgb, var(--color-branch) 18%, transparent);
  color: var(--color-branch-fg);
}

.sidebar-collapsed .sidebar-locale-trigger {
  justify-content: center;
  padding: 0.4rem 0;
}

.sidebar-collapsed .sidebar-locale-panel {
  left: calc(100% + 0.45rem);
  bottom: 0;
}

.sidebar-user {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0 0.75rem;
  font-size: 0.75rem;
  color: #a1a1aa;
}

.sidebar-collapsed .app-sidebar {
  width: 4.75rem;
}

.sidebar-collapsed .sidebar-text,
.sidebar-collapsed .sidebar-heading,
.sidebar-collapsed .sidebar-quick,
.sidebar-collapsed .sidebar-user-text {
  display: none !important;
}

.sidebar-collapsed .app-sidebar > .timer-popover {
  display: none !important;
}

.sidebar-collapsed .timer-running .timer-popover {
  top: 0;
  left: calc(100% + 0.55rem);
  width: 22rem;
  z-index: 80;
}

.sidebar-collapsed .sidebar-icon {
  display: inline-flex;
}

.sidebar-collapsed .sidebar-link {
  justify-content: center;
  padding: 0.55rem 0;
}

.sidebar-collapsed .sidebar-nav {
  gap: 0.35rem;
  padding-left: 0.45rem;
  padding-right: 0.45rem;
}

.sidebar-collapsed .sidebar-nav > div {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.sidebar-collapsed .sidebar-user-avatar {
  display: inline-flex;
}

.sidebar-collapsed .sidebar-user {
  flex-direction: column;
  justify-content: center;
  margin-top: 0.5rem;
  padding: 0;
}

.sidebar-collapsed .sidebar-user form {
  display: flex;
  justify-content: center;
  margin: 0;
}

.sidebar-collapsed .sidebar-foot {
  padding: 0.5rem 0.4rem 0.75rem;
}

.sidebar-collapsed .sidebar-theme {
  margin-bottom: 0.4rem;
}

.sidebar-collapsed .sidebar-theme-picks {
  flex-direction: column;
}

.sidebar-collapsed .sidebar-theme-btn {
  min-height: 2rem;
  padding: 0.35rem 0;
}

.sidebar-collapsed .sidebar-signout {
  width: 2rem;
  height: 2rem;
  justify-content: center;
  border-radius: 0.4rem;
}

.sidebar-collapsed .sidebar-signout:hover {
  background: rgba(255, 255, 255, 0.06);
}

.sidebar-collapsed .sidebar-foot .sidebar-link {
  justify-content: center;
}

.sidebar-collapsed .sidebar-brand {
  justify-content: center;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.sidebar-collapsed .sidebar-logo,
html.theme-resolved-light .sidebar-collapsed .sidebar-logo {
  display: none;
}

.sidebar-collapsed .collapse-btn svg {
  transform: scaleX(-1);
}

.sidebar-collapsed .timer-launch {
  justify-content: center;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.sidebar-collapsed .timer-launch > form,
.sidebar-collapsed .timer-running,
.sidebar-collapsed .timer-stop-form,
.sidebar-collapsed .timer-btn {
  width: 2.45rem;
  min-width: 2.45rem;
  max-width: 2.45rem;
  flex: none;
  padding: 0;
  margin-inline: auto;
}

.sidebar-collapsed .timer-btn {
  justify-content: center;
  gap: 0;
}

.sidebar-collapsed .sidebar-user {
  justify-content: center;
  padding: 0;
}

.settings-shell {
  display: flex;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  min-height: 100%;
}

.settings-nav {
  position: sticky;
  top: 0;
  width: 14rem;
  flex: none;
  padding-right: 1.75rem;
}

.settings-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.85rem;
  border-radius: 0.4rem;
  color: #a1a1aa;
  font-size: 0.875rem;
}

.settings-nav-item:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
}

.settings-nav-item.is-active {
  background: color-mix(in srgb, var(--color-branch) 12%, transparent);
  color: var(--color-branch-fg);
  box-shadow: inset 3px 0 0 var(--color-branch);
}

.settings-new {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #4ade80;
}

.settings-main {
  flex: 1;
  min-width: 0;
  max-width: none;
  padding: 0.25rem 0 3rem 2.5rem;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.settings-h1 {
  margin: 0 0 0.35rem;
  font-size: 1.65rem;
  font-weight: 700;
}

.settings-h2 {
  margin: 1.75rem 0 0.75rem;
  font-size: 1.05rem;
  font-weight: 700;
}

.settings-h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 650;
}

.settings-lede {
  margin: 0 0 1.75rem;
  max-width: 42rem;
  color: #a1a1aa;
  font-size: 0.9rem;
  line-height: 1.55;
}

.settings-tabs {
  display: flex;
  gap: 1.25rem;
  margin: 1rem 0 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.settings-tab {
  padding: 0.65rem 0;
  color: #a1a1aa;
  font-size: 0.9rem;
}

.settings-tab.is-active {
  color: #f4f4f5;
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--color-branch);
}

.settings-callout {
  padding: 1.1rem 1.2rem;
  border: 1px solid color-mix(in srgb, var(--color-branch) 35%, transparent);
  border-radius: 0.6rem;
  background: color-mix(in srgb, var(--color-branch) 8%, transparent);
  font-size: 0.875rem;
  line-height: 1.5;
}

.settings-callout-title {
  margin: 0 0 0.4rem;
  font-weight: 700;
}

.settings-info-banner {
  padding: 0.85rem 1rem;
  margin-bottom: 1.5rem;
  border-radius: 0.5rem;
  background: rgba(56, 189, 248, 0.12);
  color: #e0f2fe;
  font-size: 0.9rem;
}

.settings-panel {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.7rem;
  background: #181818;
  overflow: hidden;
  margin-bottom: 1.5rem;
  padding: 1.35rem 1.5rem 1.4rem;
}

.settings-panel > .settings-h3 {
  margin: 0 0 1rem;
}

.settings-panel > .settings-check {
  margin-top: 0;
}

.settings-option {
  margin-bottom: 1.25rem;
}

.settings-option:last-child {
  margin-bottom: 0;
}

.settings-option .settings-hint {
  margin-top: 0.35rem;
}

.settings-field .settings-hint {
  margin-top: 0.4rem;
}

.settings-panel > .settings-hint {
  margin-top: 0.65rem;
}

.domain-steps {
  margin: 0.15rem 0 0;
  padding: 0 0 0 1.2rem;
  display: grid;
  gap: 0.7rem;
  color: #a1a1aa;
  font-size: 0.875rem;
  line-height: 1.55;
}

.domain-steps li {
  padding-left: 0.35rem;
}

.domain-dns-lede {
  margin: 0 0 1.15rem !important;
  max-width: 42rem;
  line-height: 1.55;
}

.domain-dns-option {
  margin-top: 1rem;
  padding: 1.15rem 1.25rem 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.6rem;
  background: rgba(0, 0, 0, 0.22);
}

.domain-dns-option:first-of-type {
  margin-top: 0;
}

.domain-dns-option-title {
  margin: 0 0 0.45rem;
  font-size: 0.9rem;
  font-weight: 650;
}

.domain-dns-option-subtitle {
  margin: 1.1rem 0 0.55rem;
  color: #a1a1aa;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.domain-dns-option > .settings-hint + .domain-dns-option-subtitle {
  margin-top: 0.15rem;
}

.domain-dns-option > .settings-hint {
  margin: 0 0 0.95rem;
  line-height: 1.5;
}

.domain-dns-records {
  margin: 0 -1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.domain-dns-records > div {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
  padding: 0.8rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.875rem;
}

.domain-dns-records dt {
  margin: 0;
  color: #a1a1aa;
}

.domain-dns-records dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.domain-dns-option-note {
  margin: 0.95rem 0 0 !important;
}

.domain-dns-actions {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.domain-dns-fallback {
  margin-top: 1rem;
}

.domain-dns-fallback-summary {
  cursor: pointer;
  color: #a1a1aa;
  font-size: 0.875rem;
  font-weight: 600;
}

.domain-dns-fallback-summary:hover {
  color: #e4e4e7;
}

.domain-dns-option-nested {
  margin-top: 0.75rem;
}

.settings-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 0.85rem;
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  padding: 0;
}

.plan-label {
  margin: 0;
  color: #a1a1aa;
  font-size: 0.75rem;
}

.plan-value {
  margin: 0.2rem 0 0;
  font-weight: 650;
}

.usage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.usage-card {
  position: relative;
  padding: 1.1rem 1.15rem 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.7rem;
  background: #181818;
}

.usage-card.is-selected {
  border-color: var(--color-branch);
  box-shadow: 0 0 0 1px var(--color-branch);
}

.usage-card.is-disabled {
  opacity: 0.65;
}

.usage-kicker {
  margin: 0 0 0.5rem;
  font-size: 0.7rem;
  color: #a1a1aa;
}

.usage-badge {
  display: inline-block;
  margin-bottom: 0.55rem;
  padding: 0.1rem 0.45rem;
  border: 1px solid color-mix(in srgb, var(--color-branch) 40%, transparent);
  border-radius: 999px;
  color: var(--color-branch-fg);
  font-size: 0.7rem;
}

.usage-card h5 {
  margin: 0 0 0.35rem;
  font-size: 1.15rem;
}

.usage-card p {
  margin: 0;
  color: #a1a1aa;
  font-size: 0.85rem;
}

.usage-price {
  margin-top: 1rem !important;
  color: #f4f4f5 !important;
  font-weight: 700;
}

.settings-kv {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  margin: 0 -1.5rem;
  padding: 0.95rem 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.875rem;
}

.settings-panel > .settings-h3 + .settings-kv {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.settings-kv:last-child {
  margin-bottom: -1.4rem;
}

.settings-empty {
  margin: 0;
  padding: 2.5rem 1rem;
  text-align: center;
  color: #71717a;
}

.timesheet-empty {
  display: flex;
  min-height: 16rem;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  background: var(--color-raised);
  padding: 2.5rem 1.5rem;
}

.timesheet-empty-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 1.25rem 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.timesheet-empty-step {
  display: flex;
  width: 9.5rem;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  text-align: center;
  color: #71717a;
}

.timesheet-empty-step + .timesheet-empty-step {
  position: relative;
  padding-left: 1.75rem;
}

.timesheet-empty-step + .timesheet-empty-step::before {
  content: "";
  position: absolute;
  top: 1.6rem;
  left: 0.15rem;
  width: 0.55rem;
  height: 0.55rem;
  border-top: 1.5px solid #3f3f46;
  border-right: 1.5px solid #3f3f46;
  transform: rotate(45deg);
}

@media (max-width: 40rem) {
  .timesheet-empty-step + .timesheet-empty-step {
    padding-left: 0;
  }

  .timesheet-empty-step + .timesheet-empty-step::before {
    display: none;
  }
}

.timesheet-empty-step p {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.35;
}

.timesheet-empty-icon {
  width: 3.5rem;
  height: 3.5rem;
  color: #52525b;
}

.timesheet-empty-action {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: center;
}

.timesheet-empty-action:hover .timesheet-empty-icon,
.timesheet-empty-action:focus-visible .timesheet-empty-icon {
  color: var(--color-branch-fg);
}

.timesheet-empty-action:focus-visible {
  outline: none;
}

.timesheet-empty-action:focus-visible p {
  color: var(--color-branch-fg);
}

a.timesheet-empty-action {
  text-decoration: none;
}

.timesheet-empty-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.2rem;
  border: 1px solid currentColor;
  border-radius: 0.25rem;
  font-weight: 600;
  line-height: 1;
}

.report-empty-explainer {
  flex-direction: column;
  gap: 1.15rem;
  min-height: 20rem;
  padding: 3.25rem 1.75rem;
}

.report-empty-explainer-icon {
  width: 5.75rem;
  height: 4.6rem;
}

.report-empty-explainer p {
  max-width: 28rem;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #a1a1aa;
  text-align: center;
}

.report-empty-explainer-title {
  font-weight: 600;
  color: #d4d4d8;
}

.report-empty-explainer-link {
  color: var(--color-branch-fg);
  font-size: 0.875rem;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.report-empty-explainer-link:hover,
.report-empty-explainer-link:focus-visible {
  color: var(--color-branch);
}

.timesheet-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.timesheet-toolbar-start {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

button.btn.timesheet-add-btn {
  width: 2.35rem;
  min-width: 2.35rem;
  height: 2.35rem;
  min-height: 2.35rem;
  padding: 0;
  font-size: 1.25rem;
  line-height: 1;
}

.timesheet-view-toggle {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid #3f3f46;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #141414;
}

.timesheet-view-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.15rem;
  padding: 0 0.9rem;
  border: 0;
  border-right: 1px solid #3f3f46;
  background: transparent;
  color: #a1a1aa;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.timesheet-view-toggle-btn:last-child {
  border-right: 0;
}

.timesheet-view-toggle-btn:hover {
  color: #f4f4f4;
  background: rgba(255, 255, 255, 0.04);
}

.timesheet-view-toggle-btn.is-active {
  background: color-mix(in srgb, var(--color-branch) 18%, transparent);
  color: var(--color-branch-fg);
}

.timesheet-week-grid {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  overflow: hidden;
  background: #141414;
}

.timesheet-week-head,
.timesheet-week-row,
.timesheet-week-foot {
  display: grid;
  grid-template-columns: minmax(12rem, 1.6fr) 2.25rem repeat(7, minmax(4.5rem, 1fr)) 4.5rem;
  align-items: stretch;
}

.timesheet-week-head {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

.timesheet-week-day-head,
.timesheet-week-notes-head,
.timesheet-week-project-head,
.timesheet-week-total-head {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0.85rem 0.35rem 0.65rem;
  color: #a1a1aa;
  font-size: 0.75rem;
  font-weight: 600;
}

.timesheet-week-day-head.is-today {
  color: var(--color-branch-fg);
  box-shadow: inset 0 -2px 0 var(--color-branch);
}

.timesheet-week-day-label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}

.timesheet-week-day-clock {
  flex: none;
}

.timesheet-week-row {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.timesheet-week-project {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.85rem 0.85rem 0.85rem 0;
}

.timesheet-week-project-accent {
  width: 3px;
  align-self: stretch;
  border-radius: 0 2px 2px 0;
  background: var(--color-branch);
  flex: none;
}

.timesheet-week-project-body {
  min-width: 0;
  padding-right: 0.5rem;
}

.timesheet-week-project-name {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
  color: #f4f4f4;
}

.timesheet-week-project-client {
  font-weight: 500;
  color: #71717a;
}

.timesheet-week-task-name {
  margin-top: 0.15rem;
  font-size: 0.8125rem;
  color: #a1a1aa;
}

.timesheet-week-notes {
  display: flex;
  align-items: center;
  justify-content: center;
}

.timesheet-week-notes-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 0.4rem;
  background: transparent;
  color: #71717a;
  cursor: pointer;
}

.timesheet-week-notes-btn:hover,
.timesheet-week-notes-btn.has-notes {
  color: var(--color-branch-fg);
  background: color-mix(in srgb, var(--color-branch) 12%, transparent);
}

.week-notes-card {
  position: relative;
  max-width: 34rem;
  padding-top: 1.35rem;
}

.week-notes-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 0.4rem;
  background: transparent;
  color: #a1a1aa;
  cursor: pointer;
}

.week-notes-close:hover {
  color: #f4f4f4;
  background: rgba(255, 255, 255, 0.06);
}

.week-notes-title {
  margin: 0 2rem 0.35rem 0;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}

.week-notes-lede {
  margin: 0 0 1.15rem;
  color: #a1a1aa;
  font-size: 0.875rem;
  line-height: 1.4;
}

.week-notes-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: min(50vh, 28rem);
  overflow: auto;
  margin: 0 -0.25rem 1.15rem;
  padding: 0.25rem;
}

.week-notes-day {
  margin: 0.35rem 0 0;
  font-size: 0.9375rem;
  font-weight: 700;
}

.week-notes-day:first-child {
  margin-top: 0;
}

.week-notes-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.week-notes-hours {
  color: #a1a1aa;
  font-size: 0.75rem;
  font-weight: 600;
}

.week-notes-input {
  width: 100%;
  min-height: 2.5rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0.5rem;
  background: #141414;
  color: #f4f4f4;
  font: inherit;
  font-size: 0.9375rem;
}

.week-notes-input:focus {
  outline: none;
  border-color: var(--color-branch);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-branch) 22%, transparent);
}

.week-notes-input:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.week-notes-empty {
  margin: 0;
  color: #a1a1aa;
  font-size: 0.875rem;
}

.week-notes-actions {
  margin-top: 0.25rem;
}

.timesheet-week-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.4rem;
}

.timesheet-week-cell.is-today {
  background: color-mix(in srgb, var(--color-branch) 8%, transparent);
}

.timesheet-week-cell-form {
  width: 100%;
  margin: 0;
}

.timesheet-week-input-wrap {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 2.15rem;
  padding: 0 0.35rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.45rem;
  background: #181818;
  box-sizing: border-box;
}

.timesheet-week-input-wrap:hover {
  border-color: rgba(255, 255, 255, 0.22);
}

.timesheet-week-input-wrap:focus-within {
  border-color: var(--color-branch);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-branch) 22%, transparent);
}

.timesheet-week-cell.is-today .timesheet-week-input-wrap,
.timesheet-week-cell.is-running .timesheet-week-input-wrap {
  background: color-mix(in srgb, var(--color-branch) 14%, #181818);
  border-color: color-mix(in srgb, var(--color-branch) 45%, transparent);
}

.timesheet-week-cell.is-running .timesheet-week-input-wrap:focus-within {
  box-shadow: none;
}

.timesheet-week-cell-notes {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.1rem;
  padding: 0;
  border: 0;
  border-radius: 0.25rem;
  background: transparent;
  color: #71717a;
  cursor: pointer;
  line-height: 0;
}

.timesheet-week-cell-notes svg {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
}

.timesheet-week-cell-notes:hover,
.timesheet-week-cell-notes.has-notes {
  color: var(--color-branch-fg);
}

input.timesheet-week-input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 2.05rem;
  margin: 0;
  padding: 0.35rem 0.2rem;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  color: #f4f4f4;
  font: inherit;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
  box-shadow: none !important;
  outline: none;
}

input.timesheet-week-input:hover,
input.timesheet-week-input:focus,
input.timesheet-week-input:focus-visible {
  outline: none;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

input.timesheet-week-input:disabled {
  opacity: 1;
  cursor: default;
  -webkit-text-fill-color: #f4f4f4;
  color: #f4f4f4;
  background: transparent !important;
}

.timesheet-week-cell.is-running input.timesheet-week-input,
.timesheet-week-cell.is-running input.timesheet-week-input:disabled {
  font-weight: 600;
  color: #fafafa;
  -webkit-text-fill-color: #fafafa;
}

.timesheet-week-running-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  margin-right: 0.1rem;
  color: var(--color-branch-fg);
  pointer-events: none;
}

.timesheet-week-running-icon .timer-icon {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
}

.timesheet-week-row-total,
.timesheet-week-day-total,
.timesheet-week-grand-total {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.45rem 0.35rem;
  color: #a1a1aa;
  font-size: 0.875rem;
  font-weight: 600;
}

.timesheet-week-row-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 0;
  border-radius: 0.35rem;
  background: transparent;
  color: #71717a;
  cursor: pointer;
}

.timesheet-week-row-delete:hover {
  color: #fca5a5;
  background: rgba(248, 113, 113, 0.12);
}

.timesheet-week-foot {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
}

.timesheet-week-day-total.is-today,
.timesheet-week-grand-total {
  color: #f4f4f4;
}

.timesheet-week-empty-cell {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.5rem 1.15rem;
  color: #a1a1aa;
}

.timesheet-week-actions,
.timesheet-calendar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin-top: 1rem;
}

.timesheet-calendar-grid {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  overflow: hidden;
  background: #141414;
}

.timesheet-calendar-head,
.timesheet-calendar-body {
  display: grid;
  grid-template-columns: 3.25rem repeat(7, minmax(0, 1fr)) minmax(4.5rem, 0.85fr);
}

.timesheet-calendar-head {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

.timesheet-calendar-day-head,
.timesheet-calendar-week-total-head,
.timesheet-calendar-gutter-head {
  padding: 0.85rem 0.55rem 0.7rem;
  text-align: center;
}

.timesheet-calendar-day-head.is-today .timesheet-calendar-day-label {
  color: var(--color-branch-fg);
}

.timesheet-calendar-day-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #a1a1aa;
}

.timesheet-calendar-day-hours {
  margin-top: 0.2rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #f4f4f4;
}

.timesheet-calendar-body {
  min-height: calc(var(--cal-scale-hours) * var(--cal-hour-height));
}

.timesheet-calendar-gutter {
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.timesheet-calendar-hour-label {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0.15rem 0.4rem 0 0;
  color: #71717a;
  font-size: 0.6875rem;
  font-weight: 600;
  box-sizing: border-box;
}

.timesheet-calendar-day,
.timesheet-calendar-week-total-body {
  position: relative;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  min-height: calc(var(--cal-scale-hours) * var(--cal-hour-height));
}

.timesheet-calendar-day.is-today {
  background: color-mix(in srgb, var(--color-branch) 5%, transparent);
}

.timesheet-calendar-day-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.timesheet-calendar-hour-line {
  box-sizing: border-box;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.timesheet-calendar-day-entries {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.2rem;
  box-sizing: border-box;
  min-height: 100%;
  height: 100%;
  padding: 0.25rem;
}

.timesheet-calendar-entry {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.35rem;
  width: 100%;
  min-height: 1.35rem;
  padding: 0.28rem 0.4rem;
  border: 0;
  border-radius: 0.3rem;
  color: #fff;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}

.timesheet-calendar-entry.tone-0 {
  background: var(--color-branch);
  color: var(--color-branch-ink);
}

.timesheet-calendar-entry.tone-1 {
  background: #3f3f46;
}

.timesheet-calendar-entry.tone-2 {
  background: #0f766e;
}

.timesheet-calendar-entry.tone-3 {
  background: #1d4ed8;
}

.timesheet-calendar-entry.tone-4 {
  background: #7c2d12;
}

.timesheet-calendar-entry.is-running {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.timesheet-calendar-entry-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timesheet-calendar-entry-hours {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  flex: none;
  opacity: 0.95;
}

.timesheet-calendar-entry-timer {
  display: inline-flex;
  align-items: center;
}

.timesheet-calendar-entry-timer .timer-icon {
  display: block;
}

.timesheet-calendar-add-time {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex: 0 0 auto;
  margin-top: 0;
  margin-bottom: 0;
  min-height: 2rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--color-branch) 70%, transparent);
  border-radius: 0.4rem;
  background: color-mix(in srgb, var(--color-branch) 8%, transparent);
  color: var(--color-branch-fg);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

.timesheet-calendar-day.has-entries .timesheet-calendar-add-time {
  margin-top: 0.35rem;
}

.timesheet-calendar-day:hover .timesheet-calendar-add-time,
.timesheet-calendar-day:focus-within .timesheet-calendar-add-time {
  opacity: 1;
  pointer-events: auto;
}

.timesheet-calendar-add-time:hover,
.timesheet-calendar-add-time:focus-visible {
  background: color-mix(in srgb, var(--color-branch) 16%, transparent);
  outline: none;
}

@media (max-width: 960px) {
  .timesheet-week-head,
  .timesheet-week-row,
  .timesheet-week-foot {
    grid-template-columns: minmax(9rem, 1.3fr) 2rem repeat(7, minmax(3.5rem, 1fr)) 3.75rem;
  }

  .timesheet-week-day-label {
    font-size: 0.6875rem;
  }

  .timesheet-calendar-head,
  .timesheet-calendar-body {
    grid-template-columns: 2.75rem repeat(7, minmax(0, 1fr)) minmax(3.75rem, 0.75fr);
  }
}

/* Timesheet visual density — roomier chrome, softer rules, Branch teal selection */
.timesheet-day-strip {
  gap: 0.15rem;
  padding: 0.2rem;
  border-color: rgba(255, 255, 255, 0.06);
  background: #121212;
}

.timesheet-day-strip-cell,
.timesheet-day-strip-total {
  min-height: 4.1rem;
  padding: 0.85rem 0.5rem;
  border-left-color: transparent;
  border-radius: 0.55rem;
}

.timesheet-day-strip-cell.is-selected {
  background: color-mix(in srgb, var(--color-branch) 18%, transparent);
  box-shadow: inset 0 -3px 0 var(--color-branch);
}

.timesheet-day-strip-total {
  border-left: 0;
  background: transparent;
}

.timesheet-day-panel,
.timesheet-week-grid,
.timesheet-calendar-grid {
  border-color: rgba(255, 255, 255, 0.06);
}

.timesheet-day-table thead th,
.timesheet-day-table .timesheet-entry-cell {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.timesheet-day-table thead th,
.timesheet-week-head,
.timesheet-week-row,
.timesheet-week-foot,
.timesheet-calendar-hour-line {
  border-color: rgba(255, 255, 255, 0.05);
}

.timesheet-week-day-head,
.timesheet-week-notes-head,
.timesheet-week-project-head,
.timesheet-week-total-head,
.timesheet-week-cell,
.timesheet-week-project {
  padding-top: 1rem;
  padding-bottom: 0.85rem;
}

.timesheet-week-day-head.is-today .timesheet-week-day-label,
.timesheet-calendar-day-head.is-today .timesheet-calendar-day-label {
  color: var(--color-branch-fg);
}

.timesheet-week-cell.is-today,
.timesheet-calendar-day.is-today {
  background: color-mix(in srgb, var(--color-branch) 8%, transparent);
}

.timesheet-view-toggle-btn.is-active {
  background: color-mix(in srgb, var(--color-branch) 22%, transparent);
}

/* Entry chrome alternatives */
.entry-chrome-plain .timesheet-entry-accent,
.entry-chrome-plain .timesheet-week-project-accent,
.entry-chrome-cards .timesheet-entry-accent,
.entry-chrome-cards .timesheet-week-project-accent {
  display: none;
}

.entry-chrome-plain .timesheet-entry-client,
.entry-chrome-cards .timesheet-entry-client {
  display: inline-flex;
  margin-left: 0.4rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #a1a1aa;
  font-size: 0.75rem;
  font-weight: 500;
}

.entry-chrome-plain .timesheet-entry-client::before,
.entry-chrome-cards .timesheet-entry-client::before {
  content: none;
}

.entry-chrome-plain .timesheet-entry-badge,
.entry-chrome-cards .timesheet-entry-badge {
  width: 0.55rem;
  height: 0.55rem;
  padding: 0;
  border-radius: 999px;
  overflow: hidden;
  color: transparent;
  background: var(--color-branch);
  vertical-align: middle;
}

.entry-chrome-cards .timesheet-day-table,
.entry-chrome-cards .timesheet-day-table thead {
  display: block;
}

.entry-chrome-cards .timesheet-day-table thead {
  display: none;
}

.entry-chrome-cards .timesheet-day-table tbody,
.entry-chrome-cards .timesheet-day-table tfoot,
.entry-chrome-cards .timesheet-day-table tr {
  display: block;
  width: 100%;
}

.entry-chrome-cards .timesheet-day-table tbody tr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.75rem;
  align-items: center;
  margin: 0.55rem 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.02);
}

.entry-chrome-cards .timesheet-day-table .timesheet-entry-cell {
  border: 0;
  padding: 0;
}

.entry-chrome-cards .timesheet-day-foot {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  padding: 0.85rem 1.25rem 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.entry-chrome-cards .timesheet-day-foot th,
.entry-chrome-cards .timesheet-day-foot td {
  border: 0;
  padding: 0;
}

/* Stacked week layout */
.timesheet-week-stacked {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.timesheet-stack-day {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0.9rem;
  background: #121212;
  overflow: hidden;
}

.timesheet-stack-day.is-today {
  border-color: color-mix(in srgb, var(--color-branch) 35%, rgba(255, 255, 255, 0.06));
  box-shadow: inset 3px 0 0 var(--color-branch);
}

.timesheet-stack-day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.timesheet-stack-day-title h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #f4f4f5;
}

.timesheet-stack-day-title p {
  margin: 0.15rem 0 0;
  color: #a1a1aa;
  font-size: 0.8125rem;
}

.timesheet-stack-today {
  margin-left: 0.35rem;
  color: var(--color-branch-fg);
  font-size: 0.8125rem;
  font-weight: 600;
}

.timesheet-stack-day-meta {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: #f4f4f5;
  font-size: 1.05rem;
  font-weight: 700;
}

.timesheet-stack-add {
  width: 2.15rem;
  min-width: 2.15rem;
  height: 2.15rem;
  padding: 0;
  font-size: 1.15rem;
  line-height: 1;
}

.timesheet-stack-list {
  list-style: none;
  margin: 0;
  padding: 0.55rem 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.timesheet-stack-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.02);
}

.timesheet-stack-entry.is-running {
  border-color: color-mix(in srgb, var(--color-branch) 28%, transparent);
}

.timesheet-stack-entry-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.55rem;
  flex-shrink: 0;
}

.timesheet-stack-empty {
  margin: 0;
  padding: 1rem 1.15rem 1.2rem;
  color: #71717a;
  font-size: 0.875rem;
}

.timesheet-stack-week-total {
  margin: 0;
  color: #a1a1aa;
  font-size: 0.875rem;
}

.timesheet-stack-week-total strong {
  color: #f4f4f5;
  font-size: 1rem;
}

.settings-link {
  color: #7dd3fc;
  font-size: 0.875rem;
}

.settings-summary {
  padding: 1.2rem 1.3rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.6rem;
  background: rgba(255, 255, 255, 0.03);
}

.settings-summary ul {
  margin: 0.75rem 0 0;
  padding-left: 1.1rem;
  color: #d4d4d8;
  font-size: 0.9rem;
  line-height: 1.55;
}

.settings-summary-note {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.875rem;
}

.help-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.help-features h4 {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
}

.help-features p {
  margin: 0;
  color: #a1a1aa;
  font-size: 0.875rem;
  line-height: 1.5;
}

.settings-form .settings-row:first-child {
  padding-top: 0;
}

.settings-row {
  display: grid;
  grid-template-columns: 11rem minmax(0, 32rem);
  gap: 1.15rem;
  align-items: start;
  padding: 0.85rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.settings-row > div input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not(.input-compact):not(.color-field-hex),
.settings-row > div select,
.settings-row > div textarea,
.settings-row > div .ts-wrapper {
  width: 100%;
  max-width: 42rem;
}

.settings-row label,
.settings-label {
  padding-top: 0.45rem;
  color: #e4e4e7;
  font-size: 0.875rem;
  font-weight: 600;
}

.settings-hint {
  margin: 0.35rem 0 0;
  color: #71717a;
  font-size: 0.8rem;
  line-height: 1.4;
}

.settings-inline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.settings-check {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.875rem;
}

.settings-check input {
  width: auto;
  margin-top: 0.2rem;
}

.settings-actions {
  margin-top: 1.25rem;
}

.settings-stack {
  display: grid;
  gap: 1.1rem;
  max-width: 28rem;
}

.settings-field label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #d4d4d8;
}

.settings-block {
  margin-bottom: 2.25rem;
}

.theme-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.theme-pick {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 8.5rem;
  margin: 0;
  cursor: pointer;
}

.theme-pick input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.theme-pick-preview {
  height: 4.25rem;
  border-radius: 0.55rem;
  border: 2px solid #3f3f46;
  background: #111;
}

.theme-pick-preview.is-light {
  background: linear-gradient(180deg, #ebe6dc 0 32%, #f7f5f1 32%);
}

.theme-pick-preview.is-dark {
  background: linear-gradient(180deg, #111 0 32%, #070707 32%);
}

.theme-pick-preview.is-auto {
  background: linear-gradient(90deg, #f7f5f1 50%, #070707 50%);
}

.theme-pick input:checked + .theme-pick-preview {
  border-color: var(--color-branch);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-branch) 25%, transparent);
}

.theme-pick-label {
  margin-top: 0.45rem;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #e4e4e7;
}

.module-list {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.6rem;
  background: #181818;
  margin-bottom: 1rem;
}

.module-row {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 0.95rem 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.875rem;
}

.module-row:first-child {
  border-top: 0;
}

.module-row input {
  width: auto;
  margin-top: 0.2rem;
}

.module-row strong {
  display: block;
}

.module-row span span {
  display: block;
  margin-top: 0.2rem;
  color: #a1a1aa;
}

.ie-section {
  margin-bottom: 2.75rem;
}

.ie-section .settings-h1 {
  font-size: 1.35rem;
}

.ie-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ie-columns {
  margin: 0 0 1rem;
  font-weight: 650;
}

.ie-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.95rem 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.ie-row:first-child {
  border-top: 0;
}

.ie-title {
  margin: 0;
  font-weight: 650;
}

@media (max-width: 900px) {
  .settings-shell,
  .usage-grid,
  .help-features,
  .ie-actions,
  .plan-grid,
  .settings-row {
    display: block;
  }

  .recurring-detail {
    grid-template-columns: 1fr 1fr;
  }

  .settings-nav {
    width: auto;
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding-right: 0;
    margin-bottom: 1.5rem;
  }

  .settings-main {
    padding-left: 0;
    border-left: 0;
  }
}

html.invoice-public-html,
html.client-dashboard-html,
html.invoice-print-html {
  background: #e6e6e6 !important;
  color: #111 !important;
}

body.invoice-public-page,
body.invoice-pdf-page {
  margin: 0;
  min-height: 100vh;
  background: #e6e6e6 !important;
  color: #111 !important;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

body.client-dashboard-page {
  margin: 0;
  min-height: 100vh;
  background: #fff !important;
  color: #111 !important;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

.invoice-public-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 54rem;
  margin: 0 auto;
  padding: 1.25rem 1rem 0.75rem;
}

.invoice-public-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.invoice-public-actions form {
  margin: 0;
}

.invoice-public-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid #d4d4d4;
  border-radius: 0.35rem;
  background: #f4f4f4;
  color: #222 !important;
  font-size: 0.8125rem;
  text-decoration: none;
  cursor: pointer;
}

.invoice-public-btn:hover {
  background: #ececec;
}

.invoice-public-pay {
  border-color: color-mix(in srgb, var(--color-branch) 80%, #000);
  background: var(--color-branch);
  color: var(--color-branch-ink) !important;
  font-weight: 600;
}

.invoice-public-pay:hover {
  background: color-mix(in srgb, var(--color-branch) 86%, #000);
}

.invoice-public-banner {
  max-width: 54rem;
  margin: 0 auto;
  padding: 0.65rem 1rem;
  border-radius: 0.35rem;
  font-size: 0.875rem;
}

.invoice-public-banner-ok {
  background: #ecf8ef;
  color: #14532d;
}

.invoice-public-banner-err {
  background: #fef2f2;
  color: #7f1d1d;
}

.invoice-sheet {
  width: min(54rem, calc(100% - 2rem));
  margin: 0.75rem auto 2rem;
  padding: 2.75rem 3rem 3rem;
  background: #fff;
  color: #111;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.invoice-admin-preview {
  position: relative;
  background: #e6e6e6;
  padding: 1.5rem 1rem 2rem;
  border-radius: 0.75rem;
}

.invoice-admin-preview .invoice-sheet {
  margin: 0 auto;
}

.invoice-stamp {
  position: absolute;
  top: 5.5rem;
  left: 50%;
  z-index: 2;
  transform: translateX(-55%) rotate(-18deg);
  pointer-events: none;
  padding: 0.1rem 0.85rem;
  border: 0.28rem solid #dc2626;
  color: #dc2626;
  font-size: 3.35rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  line-height: 1;
  opacity: 0.82;
}

.invoice-stamp.is-paid {
  border-color: #16a34a;
  color: #16a34a;
}

.invoice-edit-info {
  display: inline-block;
  margin-top: 0.35rem;
  color: #2563eb !important;
  font-size: 0.75rem;
}

.invoice-show-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}

.invoice-show-top .ri-back {
  margin: 0;
}

.invoice-show-tools {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.invoice-tool {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.55rem;
  border: 1px solid #3f3f46;
  border-radius: 0.3rem;
  background: transparent;
  color: #d4d4d8;
  font-size: 0.75rem;
  font-weight: 600;
}

.invoice-tool:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

button.invoice-tool {
  cursor: pointer;
  font-family: inherit;
}

.invoice-show-tools form {
  margin: 0;
}

.recurring-show-kicker {
  margin: 0.85rem 0 0.25rem;
  font-size: 0.875rem;
  color: #71717a;
}

.recurring-show-title {
  margin: 0 0 1.25rem;
  font-size: 1.75rem;
  font-weight: 700;
}

.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.55rem 0.85rem;
  margin: 1.35rem 0 1rem;
  font-size: 0.875rem;
}

.pager-link {
  color: var(--color-branch-fg);
  font-weight: 500;
}

.pager-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 0.2rem;
  color: var(--color-branch-fg);
  font-weight: 600;
}

.pager-page.is-current {
  background: var(--color-branch);
  color: var(--color-branch-ink);
}

.pager-link.is-disabled {
  color: #a1a1aa;
  pointer-events: none;
}

.pager-gap {
  color: #71717a;
  padding: 0 0.2rem;
}

.recurring-show-note {
  margin: 0 0 2rem;
  font-size: 0.8125rem;
  color: #71717a;
}

.recurring-show-note a {
  color: var(--color-branch-fg);
}

.invoice-show-activity a {
  margin-left: 0.35rem;
  color: var(--color-branch-fg);
}

.invoice-show-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0.35rem 0 0.5rem;
}

.invoice-show-title h2 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
}

.invoice-show-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  padding: 0.15rem 0.55rem;
  font-size: 0.75rem;
  color: #a1a1aa;
}

.invoice-show-activity {
  margin: 0 0 1.1rem;
  font-size: 0.875rem;
  color: #71717a;
}

.invoice-reminder-panel {
  margin: 0 0 1.15rem;
  padding: 0.35rem 1.35rem 1.15rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.25rem;
  background: #1c1c1c;
}

.invoice-reminder-static {
  margin: 0;
  padding: 0.45rem 0;
  font-size: 0.9rem;
}

.invoice-reminder-opts {
  margin: 0.35rem 0 1rem;
}

.btn-primary.is-open {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-branch) 28%, transparent);
}

.invoice-show-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem 1.25rem;
  margin-bottom: 1.15rem;
}

.invoice-show-actions,
.invoice-show-balance {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.invoice-show-balance p {
  margin: 0 0.35rem 0 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.invoice-show-balance .is-late {
  color: #dc2626;
  font-weight: 600;
}

.invoice-history {
  margin-top: 1.75rem;
  padding-bottom: 2rem;
}

.invoice-history h3 {
  margin: 0 0 0.85rem;
  font-size: 1.15rem;
  font-weight: 650;
}

.invoice-history ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.invoice-history li {
  margin: 0 0 0.85rem;
  font-size: 0.9rem;
}

.invoice-history li span {
  font-weight: 650;
}

.invoice-history small {
  display: block;
  margin-top: 0.15rem;
  color: #71717a;
  font-size: 0.8rem;
}

.invoice-pay-dialog {
  width: min(26rem, calc(100% - 2rem));
  border: 1px solid rgba(24, 24, 27, 0.12);
  border-radius: 0.75rem;
  padding: 1.25rem 1.35rem 1.15rem;
  background: #fff;
  color: #18181b;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
}

.invoice-pay-dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.invoice-pay-dialog h3 {
  margin: 0 0 0.85rem;
  font-size: 1.05rem;
  font-weight: 650;
}

.invoice-sheet-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
}

.invoice-logo-wrap {
  margin-bottom: 1rem;
}

.invoice-logo {
  display: block;
  max-height: 4rem;
  max-width: 14rem;
  object-fit: contain;
}

.invoice-kicker {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #111;
}

.invoice-from {
  text-align: right;
  font-size: 0.875rem;
  line-height: 1.45;
  color: #222;
}

.invoice-company {
  margin: 0 0 0.15rem;
  font-weight: 600;
}

.invoice-pre {
  margin: 0 0 0.15rem;
  font-family: inherit;
  white-space: pre-wrap;
}

.invoice-from p,
.invoice-for p {
  margin: 0;
}

.invoice-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  margin-top: 2.5rem;
}

.invoice-meta {
  margin: 0;
}

.invoice-meta > div {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
  font-size: 0.875rem;
}

.invoice-meta dt {
  margin: 0;
  color: #6b6b6b;
  font-weight: 400;
}

.invoice-meta dd {
  margin: 0;
  color: #111;
}

.invoice-for {
  text-align: right;
  font-size: 0.875rem;
  line-height: 1.45;
  max-width: 18rem;
}

.invoice-for-label {
  margin-bottom: 0.25rem !important;
  color: #6b6b6b;
}

.invoice-items {
  width: 100%;
  margin-top: 2rem;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.invoice-items th {
  padding: 0.55rem 0.4rem;
  border-bottom: 1px solid #d4d4d4;
  text-align: left;
  color: #6b6b6b;
  font-weight: 500;
}

.invoice-items td {
  padding: 0.7rem 0.4rem;
  border-bottom: 1px solid #ececec;
  vertical-align: top;
  color: #111;
}

.invoice-items .num,
.client-dash-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.invoice-desc {
  white-space: pre-wrap;
}

.invoice-due {
  margin: 1.5rem 0 0;
  text-align: right;
  font-size: 1.15rem;
  font-weight: 700;
}

.invoice-pay-block {
  margin-top: 1.25rem;
  padding-top: 1.15rem;
  border-top: 1px solid #ececec;
  text-align: right;
}

.invoice-pay-block p {
  margin: 0.45rem 0 0;
  color: #6b6b6b;
  font-size: 0.8rem;
  font-weight: 400;
}

.invoice-pay-now {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 8.5rem;
  padding: 0.55rem 1.15rem;
  border: 0;
  border-radius: 0.4rem;
  background: var(--color-branch);
  color: var(--color-branch-ink);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}

.invoice-pay-now:hover {
  background: color-mix(in srgb, var(--color-branch) 86%, #000);
}

.online-pay-card {
  margin: 1.25rem 0 1rem;
  padding: 1.15rem 1.2rem 1.2rem 1.15rem;
  border: 1px solid color-mix(in srgb, var(--color-branch) 42%, transparent);
  border-radius: 0.6rem;
  background: color-mix(in srgb, var(--color-branch) 10%, transparent);
  box-shadow: inset 3px 0 0 var(--color-branch);
}

.online-pay-card h3 {
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
  font-weight: 650;
}

.online-pay-card p {
  margin: 0;
  color: #a1a1aa;
  font-size: 0.85rem;
  line-height: 1.45;
}

.online-pay-status {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.85rem !important;
  color: #86efac !important;
  font-weight: 600;
}

.online-pay-status.is-idle {
  color: #a1a1aa !important;
}

.online-pay-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: #4ade80;
}

.online-pay-status.is-idle .online-pay-dot {
  background: #71717a;
}

.online-pay-action {
  margin-top: 0.85rem;
}

.invoice-notes {
  margin-top: 2rem;
  font-size: 0.875rem;
}

.invoice-powered {
  text-align: center;
  margin: 0 0 4rem;
  font-size: 0.75rem;
  color: #888;
}

.invoice-preview-bar {
  position: sticky;
  bottom: 0;
  padding: 0.85rem 1.25rem;
  background: #3f3f46;
  color: #fff;
  text-align: center;
  font-size: 0.875rem;
}

.invoice-preview-bar a {
  color: #fff;
  text-decoration: underline;
}

.client-dashboard {
  max-width: 58rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 5rem;
  color: #111;
}

.client-dashboard h1 {
  margin: 0 0 2rem;
  font-size: 1.75rem;
  font-weight: 700;
}

.client-dashboard h2 {
  margin: 2rem 0 0.75rem;
  font-size: 1.05rem;
  font-weight: 700;
}

.client-dash-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.client-dash-table th {
  padding: 0.5rem 0.4rem;
  text-align: left;
  color: #8a8a8a;
  font-weight: 500;
  border-bottom: 1px solid #ececec;
}

.client-dash-table td {
  padding: 0.7rem 0.4rem;
  border-bottom: 1px solid #f2f2f2;
  color: #222;
}

.client-dash-table a {
  color: #2563eb;
  text-decoration: none;
}

.client-dash-table a:hover {
  text-decoration: underline;
}

.client-dash-total {
  margin: 0.75rem 0 0;
  text-align: right;
  font-weight: 700;
}

.client-badge {
  display: inline-block;
  padding: 0.15rem 0.65rem;
  border-radius: 999px;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
}

.client-badge-late {
  background: #dc2626;
}

.client-badge-paid {
  background: #16a34a;
}

.budget-bar-col {
  width: 9.5rem;
  padding: 0 1rem;
}

.dashboard-projects .dashboard-spent-head,
.dashboard-projects .dashboard-remaining-head {
  width: 11.5rem;
  white-space: nowrap;
}

.dashboard-projects .invoice-client-subject {
  margin-top: 0;
  margin-bottom: 0.15rem;
}

.budget-progress-cell {
  vertical-align: middle;
}

.budget-progress {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 18rem;
}

.budget-progress-values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: baseline;
}

.budget-progress-values > span {
  text-align: right;
  white-space: nowrap;
}

.budget-progress-values .is-over {
  color: #f87171;
}

.budget-progress .budget-bar {
  width: 100%;
}

.budget-bar {
  position: relative;
  display: flex;
  height: 0.5rem;
  width: 8.5rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.budget-bar.is-empty {
  background: rgba(255, 255, 255, 0.04);
}

.budget-bar-used {
  display: block;
  height: 100%;
  background: var(--color-branch);
}

.budget-bar-over {
  display: block;
  height: 100%;
  background: var(--color-branch-complement);
}

.budget-bar-mark {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: #d4d4d8;
  transform: translateX(-1px);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.admin-table th {
  padding: 0.7rem 1rem;
  text-align: left;
  color: #a1a1aa;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.admin-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  vertical-align: middle;
}

.admin-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.03);
}

.admin-table tbody tr:last-child td {
  border-bottom: 0;
}

.admin-table-muted {
  color: #a1a1aa;
}

.admin-table tbody tr.is-inactive td {
  color: #a1a1aa;
}

.admin-table th:first-child,
.admin-table td:first-child {
  padding-left: 0;
}

.admin-table th:last-child,
.admin-table td:last-child {
  padding-right: 0;
}

.table-frame .admin-table th:first-child,
.table-frame .admin-table td:first-child {
  padding-left: 1rem;
}

.table-frame .admin-table th:last-child,
.table-frame .admin-table td:last-child {
  padding-right: 1rem;
  border-right: 0;
}

.table-frame .admin-table th,
.table-frame .admin-table td {
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.admin-people-frame {
  width: max-content;
  max-width: 100%;
}

.admin-table--people th,
.admin-table--people td {
  white-space: nowrap;
}

.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.75rem;
}

.admin-stat {
  padding: 0.9rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.55rem;
  background: #181818;
}

.admin-stat p {
  margin: 0;
  color: #a1a1aa;
  font-size: 0.75rem;
}

.admin-stat strong {
  display: block;
  margin-top: 0.25rem;
  font-size: 1.25rem;
}

.ri-back {
  margin: 0 0 0.75rem;
}

.ri-back a {
  color: var(--color-branch-fg);
  font-size: 0.875rem;
}

.ri-lede {
  margin: 0 0 1.25rem;
  color: #a1a1aa;
  font-size: 0.875rem;
}

.ri-form {
  width: 100%;
  max-width: none;
  padding-bottom: 3rem;
  --ri-label: 6.75rem;
}

.ri-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
.ri-form select {
  height: 2.125rem;
  min-height: 2.125rem;
  padding: 0.28rem 0.55rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25;
}

.ri-form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 1.75rem;
  background-position: right 0.55rem center;
}

.ri-form textarea {
  min-height: 0;
  padding: 0.4rem 0.55rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.4;
}

.ri-panel {
  margin: 0 0 1.35rem;
  padding: 0.35rem 1.5rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.25rem;
  background: #181818;
}

.ri-grid {
  margin-bottom: 0;
}

.ri-row {
  display: grid;
  grid-template-columns: 9.25rem minmax(0, 1fr);
  gap: 0.45rem 1.5rem;
  align-items: start;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ri-row:last-child {
  border-bottom: 0;
}

.ri-row-label,
.ri-row-label label {
  margin: 0;
  padding-top: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: inherit;
}

.ri-date {
  width: 10.5rem !important;
  max-width: 10.5rem !important;
}

.ri-sender {
  width: 100%;
  max-width: 28rem;
}

.ri-message-body {
  width: 100%;
  min-height: 9.5rem !important;
}

.ri-section {
  margin-bottom: 1.5rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  background: #181818;
}

.ri-notice {
  margin: 0 0 1rem;
  padding: 1.15rem 1.35rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.35rem;
  background: rgba(255, 255, 255, 0.04);
}

.ri-notice-row {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  margin-top: 0.85rem;
}

.ri-notice-row:first-child {
  margin-top: 0;
}

.ri-notice-label {
  padding-top: 0.2rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: #e4e4e7;
}

.ri-hours {
  margin: 0.35rem 0 1.75rem;
}

.ri-hours-block {
  margin: 0;
  padding: 1.35rem 0 1.45rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.ri-hours-block h3 {
  margin: 0 0 1.1rem;
  font-size: 1.0625rem;
  font-weight: 700;
  color: #f4f4f5;
}

.ri-hours-callout {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 3.85rem;
  padding: 1.2rem 2rem;
  border-radius: 0.5rem;
  background: #f3d5b3;
  color: #1c1917;
  font-size: 0.9375rem;
  line-height: 1.45;
}

.ri-hours-projects {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.ri-hours-split {
  display: grid;
  grid-template-columns: 11.5rem minmax(0, 1fr);
  column-gap: 2.75rem;
  align-items: start;
}

.ri-hours-kicker {
  padding-top: 0.12rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: #e4e4e7;
}

.ri-hours-choices .ri-radio {
  margin: 0 0 0.55rem;
}

.ri-hours-choices .ri-help {
  margin: 0.7rem 0 0;
}

.ri-field {
  margin-bottom: 0.9rem;
}

.ri-label,
.ri-field > label,
.ri-fieldset legend {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #a1a1aa;
}

.ri-status {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
}

.ri-status-text {
  font-size: 0.9rem;
  font-weight: 600;
}

.ri-switch {
  position: relative;
  display: inline-block;
  width: 2.7rem;
  height: 1.45rem;
  margin: 0;
}

.ri-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.ri-switch-ui {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #3f3f46;
  transition: background 0.15s;
}

.ri-switch-ui::after {
  content: "";
  position: absolute;
  top: 0.15rem;
  left: 0.15rem;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  background: #fff;
  transition: transform 0.15s;
}

.ri-switch input[type="checkbox"]:checked + .ri-switch-ui {
  background: var(--color-branch);
}

.ri-switch input[type="checkbox"]:checked + .ri-switch-ui::after {
  transform: translateX(1.25rem);
}

.ri-fieldset {
  border: 0;
  margin: 0 0 1rem;
  padding: 0;
}

.ri-radio,
.ri-check-line {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.28rem 0;
  font-size: 0.875rem;
  color: #e4e4e7;
}

.ri-check-line .ri-compact {
  display: inline-block;
  vertical-align: middle;
  margin: 0 0.2rem;
}

.ri-inline-fields {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0 0 1.5rem;
  font-size: 0.875rem;
  color: #d4d4d8;
}

.ri-compact {
  width: 3.25rem !important;
  min-width: 3.25rem !important;
  height: 1.85rem !important;
  min-height: 1.85rem !important;
  padding: 0.15rem 0.35rem !important;
  text-align: center;
}

.ri-help {
  margin: 0.45rem 0 0;
  font-size: 0.8rem;
  color: #71717a;
}

.ri-help a,
.ri-cc-links a,
.ri-toggle-link a,
.ri-vars-link,
.ri-var-help a {
  color: var(--color-branch-fg);
}

.ri-cc-links {
  display: flex;
  gap: 1rem;
  margin: 0.45rem 0 0;
  font-size: 0.8125rem;
}

.ri-recipients {
  width: 100%;
  max-width: 36rem;
  min-height: 2.75rem;
  border: 1px solid #3f3f46;
  border-radius: 0.25rem;
  padding: 0.35rem 0.45rem;
  background: #121212;
}

.ri-recipient-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.recipient-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  padding: 0.2rem 0.55rem 0.2rem 0.7rem;
  font-size: 0.8rem;
  color: #e4e4e7;
}

.recipient-pill-remove {
  border: 0;
  background: transparent;
  color: #a1a1aa;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}

.ri-add-recipient {
  margin-top: 0.4rem;
  width: 100%;
  max-width: 36rem;
}

.ri-toggle-link {
  margin: 0.35rem 0 1.15rem;
  font-size: 0.875rem;
}

.ri-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  width: 100%;
  column-gap: 2.5rem;
  row-gap: 0.9rem;
  margin: 0 0 1.15rem;
  align-items: start;
}

.ri-meta-col {
  display: grid;
  grid-template-columns: var(--ri-label) minmax(0, 1fr);
  column-gap: 0.75rem;
  row-gap: 0.9rem;
  align-items: center;
}

.ri-meta-col > label {
  margin: 0;
}

.ri-meta-control {
  width: 100% !important;
  max-width: 16.75rem;
}

.ri-suffix {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  justify-self: start;
}

.ri-pct {
  width: auto;
}

.ri-pct input {
  width: 7rem !important;
  min-width: 7rem;
  text-align: right;
}

.ri-subject {
  margin: 0 0 1rem;
}

.ri-subject-row {
  display: grid;
  grid-template-columns: var(--ri-label) minmax(0, 1fr) auto;
  gap: 0.65rem 0.85rem;
  align-items: center;
}

.ri-subject-row label {
  margin: 0;
}

.ri-subject-row input[type="text"] {
  min-width: 0;
  width: 100% !important;
}

.ri-vars-link {
  white-space: nowrap;
  font-size: 0.875rem;
  text-decoration: underline;
}

.ri-var-help {
  margin-top: 0.75rem;
  margin-left: calc(var(--ri-label) + 0.85rem);
  padding: 0.9rem 1rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(56, 189, 248, 0.4);
  background: rgba(14, 165, 233, 0.12);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: #e4e4e7;
}

.ri-var-help p {
  margin: 0 0 0.65rem;
}

.ri-var-help ul {
  margin: 0 0 0.75rem;
  padding-left: 1.2rem;
}

.ri-var-help code {
  font-size: 0.8rem;
}

.ri-var-all {
  margin-top: 0.7rem;
  color: #a1a1aa;
}

.ri-items-frame {
  overflow: hidden;
  margin: 0 0 1.75rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0.65rem;
}

.ri-items-head,
.ri-item {
  display: grid;
  grid-template-columns: 1.75rem 7.5rem minmax(12rem, 1fr) 7.25rem 7.25rem 6.75rem;
  gap: 0.45rem 0.65rem;
  align-items: start;
}

.ri-items-head {
  padding: 0.65rem 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #a1a1aa;
  background: rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0;
}

.ri-items-head .num {
  text-align: right;
}

.ri-item {
  padding: 0.9rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ri-item:last-child {
  border-bottom: 0;
}

.ri-items-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 0.95rem 1rem 1.05rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.ri-item-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 2.125rem;
  border: 1px solid #3f3f46;
  border-radius: 0.25rem;
  background: transparent;
  color: #a1a1aa;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}

.ri-item-type select {
  width: 100%;
}

.ri-item-desc textarea {
  width: 100%;
  height: 4.35rem;
  min-height: 4.35rem;
  resize: vertical;
  line-height: 1.4;
}

.ri-item-project {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.45rem;
}

.ri-item-project label {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: #a1a1aa;
}

.ri-item-project select {
  width: auto;
  min-width: 12rem;
  max-width: 22rem;
}

.ri-item-qty input,
.ri-item-price input {
  width: 100%;
  min-width: 0;
  padding-left: 0.4rem;
  padding-right: 0.5rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  appearance: textfield;
  -moz-appearance: textfield;
}

.ri-item-qty input::-webkit-outer-spin-button,
.ri-item-qty input::-webkit-inner-spin-button,
.ri-item-price input::-webkit-outer-spin-button,
.ri-item-price input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.ri-item-amount {
  padding-top: 0.4rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.ri-item-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0;
}

.ri-totals {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.9rem;
}

.ri-totals > div {
  display: flex;
  gap: 2rem;
  min-width: 16rem;
  justify-content: space-between;
}

.ri-due {
  font-size: 1.05rem;
  font-weight: 700;
}

.ri-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

@media (max-width: 800px) {
  .ri-hours-split {
    display: block;
  }

  .ri-hours-kicker {
    margin-bottom: 0.55rem;
  }

  .ri-meta,
  .ri-meta-col,
  .ri-subject-row,
  .ri-items-head,
  .ri-item {
    display: block;
  }

  .ri-meta-col > label,
  .ri-subject-row label {
    display: block;
    margin: 0.85rem 0 0.35rem;
  }

  .ri-meta-col > label:first-of-type {
    margin-top: 0;
  }

  .ri-var-help {
    margin-left: 0;
  }

  .ri-meta-control,
  .ri-date,
  .ri-sender {
    width: 100% !important;
    max-width: 100% !important;
  }

  .ri-items-head {
    display: none;
  }

  .ri-item {
    padding: 0.85rem 1rem;
  }

  .ri-items-foot {
    flex-direction: column;
  }
}

.otp-qr {
  display: inline-block;
  margin: 0.5rem 0 1rem;
  padding: 0.75rem;
  background: #fff;
  border-radius: 0.65rem;
}

.otp-qr svg {
  display: block;
  width: 11.5rem;
  height: 11.5rem;
}

.otp-manual {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  color: #fafafa;
  margin: 0 0 1.25rem;
}

.backup-codes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem 1.25rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95rem;
}

@media print {
  html.invoice-public-html,
  html.invoice-print-html,
  body.invoice-public-page,
  body.invoice-pdf-page {
    background: #fff !important;
  }

  .no-print,
  .invoice-public-chrome,
  .invoice-powered,
  .invoice-preview-bar {
    display: none !important;
  }

  .invoice-sheet {
    width: 100%;
    margin: 0;
    padding: 0;
    box-shadow: none;
  }
}

/* —— Dashboard —— */
.dashboard-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.dashboard-lede {
  margin: 0;
  color: #a1a1aa;
  font-size: 0.875rem;
}

.dashboard-customize-panel {
  width: min(24rem, 85vw);
  max-height: 70vh;
  overflow: auto;
  padding: 0.85rem 1rem 1rem;
}

.dashboard-settings-section + .dashboard-settings-section {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.dashboard-customize-form {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.dashboard-customize-title {
  margin: 0 0 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #a1a1aa;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.dashboard-settings-label {
  font-size: 0.8125rem;
  color: #e4e4e7;
}

.dashboard-customize-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: #e4e4e7;
}

.dashboard-customize-hint {
  margin: 0 0 0.55rem;
  font-size: 0.75rem;
  color: #71717a;
  line-height: 1.4;
}

.dashboard-goal-input {
  width: 100%;
  max-width: 8rem;
}

.dashboard-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dashboard-edit-hint {
  margin: 0 0 1rem;
  color: #a1a1aa;
  font-size: 0.8125rem;
}

.dashboard-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.dashboard-widget {
  position: relative;
  min-width: 0;
}

.dashboard-widget.span-2 {
  grid-column: span 2;
}

.dashboard-widget-chrome {
  display: none;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.4rem;
}

.dashboard.is-editing .dashboard-widget-chrome {
  display: flex;
}

.dashboard-widget-handle,
.dashboard-widget-hide {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  border: 0;
  border-radius: 0.4rem;
  background: rgba(255, 255, 255, 0.06);
  color: #a1a1aa;
  cursor: pointer;
}

.dashboard-widget-handle {
  cursor: grab;
}

.dashboard-widget-handle:active {
  cursor: grabbing;
}

.dashboard-widget-chrome-title {
  flex: 1;
  min-width: 0;
  color: #a1a1aa;
  font-size: 0.75rem;
  font-weight: 600;
}

.dashboard-widget.is-dragging,
.dashboard-widget.is-drop-target {
  outline: 1px dashed color-mix(in srgb, var(--color-branch) 70%, transparent);
  outline-offset: 2px;
}

.dashboard-widget.is-dragging {
  opacity: 0.7;
}

.dashboard-widget .dashboard-card,
.dashboard-widget .dashboard-projects-section {
  height: 100%;
  margin: 0;
}

.dashboard-widget .dashboard-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 1.15rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.025);
}

.dashboard-widget .dashboard-attention,
.dashboard-widget .dashboard-week {
  margin-bottom: 0;
}

.dashboard-tray {
  margin-top: 1.25rem;
  padding: 1rem 1.1rem;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 0.9rem;
}

.dashboard-tray-title {
  margin: 0 0 0.65rem;
  color: #a1a1aa;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.dashboard-tray-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.dashboard-tray .dashboard-widget {
  width: auto;
  grid-column: auto !important;
}

.dashboard-tray .dashboard-widget-body {
  display: none;
}

.dashboard-tray .dashboard-widget-chrome {
  display: flex;
  margin: 0;
  padding: 0.25rem 0.35rem 0.25rem 0.15rem;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
}

.dashboard-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.dashboard-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.025);
  padding: 1.15rem 1.25rem;
}

.dashboard-attention {
  margin-bottom: 1.25rem;
}

.dashboard-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.dashboard-card-head h2,
.dashboard-card-title,
.dashboard-section-title,
.dashboard-subheader {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #f4f4f5;
}

.dashboard-subheader {
  margin: 1rem 0 0.65rem;
  font-size: 0.875rem;
}

.dashboard-card-sub,
.dashboard-empty {
  margin: 0;
  color: #a1a1aa;
  font-size: 0.8125rem;
}

.dashboard-empty {
  padding: 0.35rem 0;
}

.dashboard-card-link {
  display: inline-block;
  margin-top: 0.85rem;
  color: var(--color-branch-fg);
  font-size: 0.8125rem;
  text-decoration: none;
}

.dashboard-card-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.dashboard-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #d4d4d8;
  font-size: 0.75rem;
  font-weight: 600;
}

.dashboard-pill.is-ok {
  background: color-mix(in srgb, var(--color-branch) 18%, transparent);
  color: var(--color-branch-fg);
}

.dashboard-pill.is-live {
  background: color-mix(in srgb, var(--color-branch) 22%, transparent);
  color: var(--color-branch-fg);
}

.dashboard-attention-list,
.dashboard-simple-list,
.dashboard-activity {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dashboard-attention-list li,
.dashboard-simple-list li,
.dashboard-activity li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.dashboard-attention-list li:first-child,
.dashboard-simple-list li:first-child,
.dashboard-activity li:first-child {
  border-top: 0;
  padding-top: 0;
}

.dashboard-attention-link {
  color: #f4f4f5;
  text-decoration: none;
  font-size: 0.875rem;
}

.dashboard-attention-link:hover {
  color: var(--color-branch-fg);
}

.dashboard-live-amount,
.dashboard-hero-amount {
  margin: 0;
  font-size: 1.85rem;
  font-weight: 700;
  color: #f4f4f5;
  line-height: 1.15;
}

.dashboard-hero-amount.is-warn {
  color: var(--color-branch-complement);
}

.dashboard-line {
  margin: 0.15rem 0 0;
  font-size: 1.05rem;
  color: #e4e4e7;
}

.dashboard-line.is-strong {
  font-size: 1.35rem;
  font-weight: 700;
  color: #f4f4f5;
}

.dashboard-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1rem;
  margin: 0;
}

.dashboard-stat-grid dt {
  color: #a1a1aa;
  font-size: 0.75rem;
}

.dashboard-stat-grid dd {
  margin: 0.15rem 0 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #f4f4f5;
}

.dashboard-goal-bar {
  height: 0.55rem;
  margin: 0.85rem 0 0.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.dashboard-goal-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--color-branch);
}

.dashboard-week {
  margin-bottom: 1.25rem;
}

.dashboard-week-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.65rem;
  align-items: end;
  min-height: 8.5rem;
}

.dashboard-week-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.dashboard-week-label {
  color: #71717a;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
}

.dashboard-week-day.is-today .dashboard-week-label {
  color: var(--color-branch-fg);
}

.dashboard-week-bar-wrap {
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 5.5rem;
  padding: 0 0.35rem;
}

.dashboard-week-bar {
  display: block;
  width: 100%;
  min-height: 0;
  border-radius: 0.35rem 0.35rem 0.15rem 0.15rem;
  background: color-mix(in srgb, var(--color-branch) 75%, white 5%);
}

.dashboard-week-day.is-today .dashboard-week-bar {
  background: var(--color-branch);
}

.dashboard-week-hours {
  color: #d4d4d8;
  font-size: 0.75rem;
}

.dashboard-team-week .invoice-table-panel {
  margin-top: 0.25rem;
}

.dashboard-margin-block + .dashboard-margin-block {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.dashboard-margin-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.dashboard-margin-grid p {
  margin: 0.2rem 0 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: #f4f4f5;
}

.dashboard-margin-grid .is-over,
.invoice-table .num.is-over,
.num.is-over,
.invoice-client-subject.is-warn {
  color: var(--color-branch-complement);
}

.dashboard-inline-form {
  display: inline;
  margin: 0;
}

.dashboard-projects-section {
  margin-top: 0.5rem;
}

.dashboard-section-title {
  margin-bottom: 0.75rem;
}

.dashboard-projects-link {
  margin-top: 0.75rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

@media (max-width: 900px) {
  .dashboard-board {
    grid-template-columns: 1fr;
  }

  .dashboard-widget,
  .dashboard-widget.span-2 {
    grid-column: span 1 !important;
  }

  .dashboard-week-days {
    gap: 0.35rem;
  }
}