/* Time tracking stays a compact, server-rendered portal area. */
.time-tracking-actions,
.form-actions,
.time-entry-actions,
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
}

.month-page-heading {
  align-items: center;
  margin-block-end: .65rem;
}

.month-page-heading .eyebrow {
  margin-block-end: .05rem;
  font-size: .7rem;
}

.month-page-heading h1 {
  font-size: clamp(1.65rem, 3vw, 2.15rem);
}

.month-page-heading .time-tracking-actions {
  gap: .35rem;
}

.month-page-heading .time-tracking-actions .button {
  min-height: 2.1rem;
  border-radius: .35rem;
  padding: .3rem .65rem;
  box-shadow: none;
  font-size: .75rem;
}

.month-toolbar {
  display: flex;
  align-items: end;
  gap: .5rem;
  margin-block-end: .65rem;
  border: 1px solid var(--line);
  border-radius: .4rem;
  padding: .4rem .5rem;
  background: var(--surface-solid);
}

.month-toolbar > .button,
.month-toolbar .month-selector-form button[type="submit"] {
  min-height: 2.1rem;
  border-radius: .3rem;
  padding: .28rem .6rem;
  box-shadow: none;
  font-size: .75rem;
}

.month-selector-form,
.month-save-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: .5rem;
}

.month-selector-form {
  flex: 1 1 16rem;
  justify-content: center;
}

.month-selector-form .field,
.month-table-cell.field,
.month-table-cell-is_billable .choice-field > legend,
.time-day-heading h2,
.time-entry p,
.psp-element-list p,
.time-delete-summary {
  margin: 0;
}

.month-toolbar .month-selector-form .field {
  display: flex;
  align-items: center;
  gap: .3rem;
}

.month-toolbar .month-selector-form label {
  margin: 0;
  font-size: .72rem;
}

.month-toolbar .month-selector-form input[type="month"] {
  width: 9.5rem;
  min-height: 2.1rem;
  min-block-size: 2.1rem;
  border-radius: .3rem;
  padding: .25rem .4rem;
  box-shadow: none;
  font-size: .78rem;
}

.month-entry-form,
.month-table-wrap,
.month-entry-row,
.time-day-summary div,
.time-delete-summary div,
.time-entry-main,
.psp-element-list > li > div {
  min-inline-size: 0;
}

.month-table-wrap {
  overflow: clip;
  border: 1px solid var(--line);
  border-radius: .4rem;
  background: var(--surface-solid);
}

[dir="rtl"] .month-table {
  text-align: start;
}

.month-table {
  width: 100%;
  min-width: 0;
  border: 0;
  border-collapse: collapse;
  table-layout: fixed;
  background: var(--surface-solid);
}

.month-table-column-date { width: 14%; }
.month-table-column-psp { width: 20%; }
.month-table-column-hours { width: 10%; }
.month-table-column-description { width: 30%; }
.month-table-column-billable { width: 13%; }
.month-table-column-actions { width: 13%; }

.month-table thead {
  background: color-mix(in srgb, var(--surface-muted) 38%, var(--surface-solid));
  color: var(--charcoal);
}

.month-table thead th {
  height: 2.25rem;
  border-block-end: 1px solid var(--line-strong);
  border-inline-end: 1px solid var(--line);
  padding: .3rem .4rem;
  background: color-mix(in srgb, var(--surface-muted) 38%, var(--surface-solid));
  color: var(--charcoal);
  font-size: .7rem;
  font-weight: 750;
  letter-spacing: 0;
  line-height: 1.15;
  text-align: start;
  text-transform: none;
  overflow-wrap: anywhere;
}

.month-table thead th:last-child {
  border-inline-end: 0;
  text-align: end;
}

.month-table-day {
  border-block-start: 1px solid var(--line-strong);
}

.month-table-day:first-of-type {
  border-block-start: 0;
}

.month-table-entry-row {
  height: 2.75rem;
}

.month-table-cell {
  min-inline-size: 0;
  border-block-end: 1px solid var(--line);
  border-inline-end: 1px solid var(--line);
  padding: .15rem .25rem;
  vertical-align: middle;
}

.month-table-cell:last-child {
  border-inline-end: 0;
}

.month-table-day:last-child .month-table-entry-row:last-child > .month-table-cell,
.time-entry:last-child,
.psp-element-list > li:last-child {
  border-block-end: 0;
}

.month-table-cell-date {
  background: color-mix(in srgb, var(--surface-muted) 22%, var(--surface-solid));
  color: var(--navy);
  font-size: .72rem;
  font-weight: 750;
  line-height: 1.05;
  text-align: start;
}

.month-table-date-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .2rem;
  white-space: nowrap;
}

.month-table-entry-number {
  color: var(--muted);
  font-size: .62rem;
}

.month-table-day-summary {
  display: flex;
  align-items: baseline;
  gap: .18rem;
  margin: .12rem 0 0;
  color: var(--muted);
  font-size: .6rem;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
}

.month-table-day-summary div {
  display: flex;
  align-items: baseline;
  gap: .12rem;
}

.month-table-day-summary div + div::before {
  margin-inline-end: .06rem;
  content: "/";
}

.month-table-day-summary dt,
.month-table-field-label,
.month-table-action-text,
.month-table-cell-is_billable .choice-field > legend {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.month-table-day-summary dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.month-table-cell input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.month-table-cell select,
.month-table-cell textarea {
  display: block;
  inline-size: 100%;
  min-height: 1.85rem;
  min-block-size: 1.85rem;
  border-radius: .25rem;
  padding: .15rem .32rem;
  background: var(--surface-solid);
  box-shadow: none;
  font-size: .78rem;
}

.month-table-cell-description textarea {
  block-size: 1.85rem;
  padding: .18rem .32rem;
  line-height: 1.25;
  resize: vertical;
}

.month-table-cell input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):focus,
.month-table-cell select:focus,
.month-table-cell textarea:focus,
.month-table-actions button:focus-visible {
  border-color: var(--navy);
  outline: 3px solid transparent;
  box-shadow: 0 0 0 .18rem rgb(31 58 90 / 28%);
}

.month-table-cell-is_billable .choice-field {
  margin: 0;
  border: 0;
  padding: 0;
}

.month-table-cell-is_billable .choice-field > div {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: .15rem .45rem;
}

.month-table-cell-is_billable .choice-field > div > div {
  display: flex;
  min-inline-size: 0;
}

.month-table-cell-is_billable .choice-field label {
  min-height: 1.75rem;
  gap: .18rem;
  font-size: .7rem;
  white-space: nowrap;
}

.month-table-cell-is_billable .choice-field input {
  inline-size: 1rem;
  block-size: 1rem;
}

.month-table-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: .2rem;
  margin: 0;
  white-space: nowrap;
}

.month-table-actions button.button-danger,
.month-table-actions button.button-secondary,
.month-table-action-note {
  display: inline-flex;
  inline-size: 1.75rem;
  min-inline-size: 1.75rem;
  block-size: 1.75rem;
  min-height: 1.75rem;
  min-block-size: 1.75rem;
  align-items: center;
  justify-content: center;
  border-color: var(--line-strong);
  border-radius: .25rem;
  padding: 0;
  background: var(--surface-solid);
  color: var(--navy);
  box-shadow: none;
  font-size: .9rem;
  line-height: 1;
}

.month-table-actions button.button-danger:hover,
.month-table-actions button.button-secondary:hover {
  background: var(--surface-muted);
  box-shadow: none;
  transform: none;
}

.month-table-action-icon {
  display: inline-block;
  line-height: 1;
}

.month-table-action-note {
  border: 1px solid var(--line-strong);
  font-weight: 750;
}

.month-entry-row-message {
  margin: 0;
  border-radius: 0;
  padding: .35rem .5rem;
  font-size: .78rem;
}

.month-entry-message-row td {
  border-block-end: 1px solid var(--line);
  padding: 0;
}

.month-entry-row-removed {
  background: var(--surface-muted);
  box-shadow: inset .22rem 0 0 var(--gold);
}

.month-entry-row-removed .field {
  opacity: .68;
}

.month-table-day-future,
.month-table-empty-row {
  background: var(--surface-muted);
}

.month-table-empty-status {
  color: var(--muted);
  font-size: .7rem;
  overflow-wrap: anywhere;
}

.month-save-bar {
  position: sticky;
  z-index: 4;
  inset-block-end: .75rem;
  justify-content: space-between;
  margin-block-start: .8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-solid);
  box-shadow: var(--shadow-sm);
  padding: .45rem .65rem;
}

.month-save-bar p {
  flex: 1 1 20rem;
  margin: 0;
  font-size: .82rem;
}

.month-save-bar button[name="intent"][value="save"] {
  min-height: 2.25rem;
  border-radius: .5rem;
  padding: .35rem .75rem;
  box-shadow: none;
  font-size: .82rem;
}

.time-day-list,
.psp-company-list {
  display: grid;
  gap: 1.25rem;
}

.time-day {
  padding: 0;
}

.time-day-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.35rem;
  border-block-end: 1px solid var(--line);
}

.time-day-summary,
.time-delete-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem 1rem;
}

.time-day-summary dt,
.time-delete-summary dt {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
}

.time-day-summary dd,
.time-delete-summary dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
}

.time-entry-list,
.psp-element-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.time-entry,
.psp-element-list > li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  min-inline-size: 0;
  padding: 1.15rem 1.35rem;
  border-block-end: 1px solid var(--line);
}

.time-entry-facts {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1rem;
  margin-block-end: .35rem;
}

.time-entry-context,
.psp-state {
  color: var(--muted);
  font-size: .9rem;
}

.time-entry-description {
  margin-block-start: .55rem !important;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.time-entry-actions,
.psp-element-list .inline-form {
  flex: 0 0 auto;
}

.pagination {
  justify-content: center;
  margin-block-start: 1.5rem;
}

.choice-field {
  min-inline-size: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

.choice-field legend {
  margin-block-end: .4rem;
  color: var(--navy);
  font-size: .92rem;
  font-weight: 720;
}

.choice-field > div {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.25rem;
}

.choice-field label {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 2.5rem;
  margin: 0;
}

.choice-field input {
  inline-size: 1.15rem;
  block-size: 1.15rem;
}

.form-actions {
  margin-block-start: 1.4rem;
}

.time-delete-summary {
  margin-block: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1rem;
}

.psp-create-card {
  margin-block-end: 1.5rem;
}

.psp-company h2 {
  overflow-wrap: anywhere;
}

.psp-element-list {
  border-block-start: 1px solid var(--line);
}

.psp-element-list > li {
  padding-inline: 0;
}

@media (max-width: 40rem) {
  .month-table thead,
  .month-table colgroup,
  .month-table-action-icon {
    display: none;
  }

  .month-table,
  .month-table tbody,
  .month-table tr,
  .month-table th,
  .month-table td {
    display: block;
    width: 100%;
  }

  .month-table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .month-table-day {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: .4rem;
    margin-block-end: .65rem;
    background: var(--surface-solid);
  }

  .month-table-entry-row {
    height: auto;
  }

  .month-table-entry-row + .month-table-entry-row {
    border-block-start: 2px solid var(--line-strong);
  }

  .month-table-cell {
    border-inline-end: 0;
    padding: .55rem .65rem;
  }

  .month-table-cell:last-child {
    border-block-end: 0;
  }

  .month-table-field-label,
  .month-table-action-text,
  .month-table-day-summary dt,
  .month-table-cell-is_billable .choice-field > legend {
    position: static;
    inline-size: auto;
    block-size: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }

  .month-table-field-label,
  .month-table-action-text {
    display: block;
    margin-block-end: .28rem;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 750;
  }

  .month-table-day-summary {
    flex-wrap: wrap;
    gap: .7rem;
    margin-block-start: .35rem;
    font-size: .72rem;
    white-space: normal;
  }

  .month-table-day-summary div + div::before {
    content: none;
  }

  .month-table-cell input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
  .month-table-cell select {
    min-height: 2.9rem;
    min-block-size: 2.9rem;
    padding-block: .42rem;
    font-size: inherit;
  }

  .month-table-cell-description textarea {
    block-size: 4rem;
    min-block-size: 4rem;
    font-size: inherit;
  }

  .month-table-cell-is_billable .choice-field > legend {
    margin-block-end: .4rem;
  }

  .month-table-cell-is_billable .choice-field > div {
    flex-wrap: wrap;
    gap: .35rem 1rem;
  }

  .month-table-cell-is_billable .choice-field label {
    min-height: 2.5rem;
    gap: .45rem;
    font-size: inherit;
  }

  .month-table-actions,
  .month-toolbar,
  .month-toolbar .month-selector-form .field,
  .time-tracking-actions,
  .time-tracking-actions .button,
  .time-day-heading,
  .time-entry,
  .psp-element-list > li,
  .month-selector-form,
  .month-save-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .month-table-actions {
    white-space: normal;
  }

  .month-table-actions button.button-danger,
  .month-table-actions button.button-secondary,
  .month-table-action-note {
    inline-size: 100%;
    min-inline-size: 0;
    block-size: auto;
    min-height: 2.5rem;
    min-block-size: 2.5rem;
    padding: .55rem .7rem;
    font-size: .82rem;
  }

  .month-table-action-text {
    margin: 0;
    color: inherit;
    font-size: inherit;
  }

  .month-toolbar > *,
  .month-toolbar .month-selector-form,
  .month-toolbar .month-selector-form > *,
  .month-toolbar .month-selector-form input[type="month"],
  .time-tracking-actions .button,
  .form-actions > *,
  .time-entry-actions > *,
  .psp-element-list button,
  .time-entry-actions,
  .psp-element-list .inline-form,
  .month-selector-form,
  .month-selector-form > *,
  .month-save-bar > button {
    width: 100%;
  }

  .month-toolbar .month-selector-form,
  .month-save-bar p {
    flex: 0 1 auto;
  }

  .month-save-bar {
    position: static;
  }

  .time-day-summary,
  .time-delete-summary {
    grid-template-columns: 1fr;
  }

}

@media (forced-colors: active) {
  .time-day-heading,
  .time-entry,
  .psp-element-list,
  .psp-element-list > li,
  .time-delete-summary,
  .month-table-wrap,
  .month-table thead th,
  .month-table-cell,
  .month-entry-message-row td,
  .month-entry-row,
  .month-save-bar {
    border-color: CanvasText;
  }

  .month-table thead,
  .month-table-cell-date {
    background: Canvas;
    color: CanvasText;
  }

  .month-entry-row-removed .field {
    opacity: 1;
  }
}