:root {
  color-scheme: light;
  --bg: #ffffff;
  --sidebar: #f7f7f5;
  --line: #e9e9e6;
  --line-soft: #f1f1ef;
  --text: #37352f;
  --muted: #73726e;
  --green-bg: #edf7ed;
  --green-text: #1e4620;
  --amber-bg: #fff2e5;
  --amber-text: #663c00;
  --red-bg: #fde8e8;
  --red-text: #9b1c1c;
  --shadow: 0 14px 36px rgba(15, 15, 15, 0.08);
  --table-tools-column-width: 48px;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Noto Sans TC", sans-serif;
}

/* Project member profit sharing and finance disbursement */
.project-bonus-workspace {
  display: grid;
  gap: 14px;
  padding-top: 24px;
}

.project-bonus-form {
  display: grid;
  gap: 18px;
}

.project-bonus-form-footer,
.project-bonus-record > header,
.project-bonus-record > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.project-bonus-fields {
  display: grid;
  grid-template-columns: minmax(190px, 0.72fr) auto minmax(230px, 0.85fr) minmax(260px, 1.2fr);
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  border-block: 1px solid #dfe8f7;
  background: #f7f9fd;
}

.project-bonus-basis {
  display: flex;
  align-items: stretch;
  border-block: 1px solid var(--line-soft);
}

.project-bonus-basis span {
  display: grid;
  gap: 4px;
  flex: 1 1 0;
  padding: 14px 18px;
  color: var(--muted);
  font-size: 11px;
}

.project-bonus-basis span + span {
  border-left: 1px solid var(--line-soft);
}

.project-bonus-basis strong {
  color: var(--text);
  font-size: 17px;
}

.project-bonus-basis .project-bonus-gross-profit {
  background: linear-gradient(90deg, #f2f6fd 0%, rgba(242, 246, 253, 0.35) 100%);
  color: #315caa;
}

.project-bonus-basis .project-bonus-gross-profit strong {
  color: #2f63c4;
}

.project-bonus-fields label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.workspace .project-bonus-fields input {
  width: 100%;
  max-width: none;
}

.project-bonus-ratio-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  overflow: hidden;
  border: 1px solid #a9bee5;
  border-radius: 7px;
  background: #fff;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.project-bonus-ratio-input:focus-within {
  border-color: #3f70cf;
  box-shadow: 0 0 0 2px rgba(63, 112, 207, 0.12);
}

.workspace .project-bonus-ratio-input input {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-weight: 700;
}

.project-bonus-ratio-input > span {
  display: grid;
  place-items: center;
  border-left: 1px solid #dfe8f7;
  color: #315caa;
  font-size: 13px;
  font-weight: 750;
}

.project-bonus-equation-mark {
  color: #7f9fd8;
  font-size: 21px;
  font-weight: 700;
}

.project-bonus-calculated {
  display: grid;
  align-content: center;
  gap: 3px;
  min-height: 66px;
  padding: 8px 0 8px 16px;
  border-left: 3px solid #3f70cf;
}

.project-bonus-calculated span,
.project-bonus-calculated small,
.project-bonus-confirmed-total small {
  color: var(--muted);
  font-size: 11px;
}

.project-bonus-calculated strong {
  color: #2f63c4;
  font-size: 20px;
}

.project-bonus-note-field {
  padding-left: 18px;
  border-left: 1px solid #dfe8f7;
}

.project-bonus-member-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-top: 2px;
}

.project-bonus-member-title > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.project-bonus-member-title strong {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
}

.project-bonus-member-title strong::before {
  width: 4px;
  height: 16px;
  border-radius: 99px;
  background: #3f70cf;
  content: "";
}

.project-bonus-member-title span {
  color: var(--muted);
  font-size: 11px;
}

.project-bonus-member-list {
  display: grid;
  border-block: 1px solid var(--line-soft);
}

.project-bonus-member-head,
.project-bonus-member-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.3fr) minmax(150px, 1fr) minmax(160px, 0.65fr);
  align-items: center;
  gap: 18px;
}

.project-bonus-member-head {
  padding: 10px 12px;
  background: #f2f6fd;
  color: #536985;
  font-size: 11px;
  font-weight: 700;
}

.project-bonus-member-row {
  min-height: 58px;
  padding: 9px 12px;
  border-top: 1px solid var(--line-soft);
  transition: background-color 120ms ease;
}

.project-bonus-member-row:hover {
  background: #fafcff;
}

.project-bonus-member-row > span {
  color: var(--muted);
  font-size: 12px;
}

.project-bonus-member-row > strong:first-child,
.project-bonus-allocation-list > div:not(.project-bonus-allocation-head) > strong:first-child {
  font-size: 13px;
  font-weight: 600;
}

.project-bonus-amount-input {
  width: 100%;
  max-width: 180px;
  justify-self: end;
  text-align: right;
}

.workspace .project-bonus-amount-input:focus {
  border-color: #3f70cf;
  box-shadow: 0 0 0 2px rgba(63, 112, 207, 0.12);
}

.project-bonus-form-footer {
  align-items: flex-end;
  gap: 24px;
  padding-top: 2px;
}

.project-bonus-balance-wrap {
  display: grid;
  width: min(520px, 100%);
  gap: 8px;
}

.project-bonus-balance {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  color: var(--muted);
  font-size: 12px;
}

.project-bonus-balance strong {
  margin-left: 5px;
  color: var(--text);
  font-size: 14px;
}

.project-bonus-balance .is-over {
  color: var(--red-text);
}

.project-bonus-balance .is-complete {
  color: #2f63c4;
}

.project-bonus-progress {
  width: 100%;
  height: 4px;
  overflow: hidden;
  border-radius: 99px;
  background: #e8edf5;
}

.project-bonus-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #3f70cf;
  transition: width 160ms ease, background-color 160ms ease;
}

.project-bonus-progress i.is-complete {
  background: #3f70cf;
}

.project-bonus-progress i.is-over {
  background: #c94f4f;
}

.project-bonus-form-footer .form-actions {
  margin: 0;
}

.workspace .project-bonus-form-footer button[type="submit"] {
  min-width: 112px;
  background: #3f70cf;
  box-shadow: 0 5px 14px rgba(63, 112, 207, 0.18);
}

.workspace .project-bonus-form-footer button[type="submit"]:hover:not(:disabled) {
  background: #315fb8;
}

.project-bonus-record {
  display: grid;
  gap: 16px;
}

.project-bonus-record > header {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}

.project-bonus-record > header > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.project-bonus-record > header small,
.project-bonus-record-meta,
.project-bonus-note {
  color: var(--muted);
  font-size: 11px;
}

.project-bonus-record > header > strong {
  font-size: 22px;
}

.project-bonus-confirmed-total {
  display: grid;
  justify-items: end;
  gap: 3px;
}

.project-bonus-confirmed-total strong {
  font-size: 22px;
}

.project-bonus-record-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.project-bonus-allocation-list {
  display: grid;
  border-block: 1px solid var(--line-soft);
}

.project-bonus-allocation-list > div {
  display: grid;
  grid-template-columns: minmax(180px, 1.3fr) minmax(150px, 1fr) minmax(140px, 0.7fr) minmax(150px, 0.8fr);
  align-items: center;
  gap: 18px;
  min-height: 54px;
  padding: 9px 12px;
  border-top: 1px solid var(--line-soft);
}

.project-bonus-allocation-list .project-bonus-allocation-head {
  min-height: 0;
  padding-block: 10px;
  border-top: 0;
  background: #f8f8f7;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.project-bonus-allocation-list em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.project-bonus-note {
  margin: 0;
  padding: 12px 14px;
  border-left: 3px solid #d8e4f8;
  background: #f8faff;
}

.project-bonus-record > footer {
  justify-content: flex-end;
}

@media (max-width: 1000px) {
  .project-bonus-fields {
    grid-template-columns: minmax(180px, 0.8fr) auto minmax(220px, 1fr);
  }

  .project-bonus-note-field {
    grid-column: 1 / -1;
    padding: 12px 0 0;
    border-top: 1px solid #dfe8f7;
    border-left: 0;
  }
}

@media (max-width: 760px) {
  .project-bonus-fields,
  .project-bonus-basis {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-bonus-basis {
    display: grid;
  }

  .project-bonus-basis span,
  .project-bonus-basis span + span {
    padding: 12px;
    border-left: 0;
    border-top: 1px solid var(--line-soft);
  }

  .project-bonus-basis span:first-child {
    border-top: 0;
  }

  .project-bonus-member-head {
    display: none;
  }

  .project-bonus-fields {
    gap: 12px;
    padding: 14px;
  }

  .project-bonus-equation-mark {
    display: none;
  }

  .project-bonus-note-field {
    grid-column: auto;
  }

  .project-bonus-member-title,
  .project-bonus-member-title > div {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .project-bonus-member-row,
  .project-bonus-allocation-list > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .project-bonus-member-row > span::before {
    content: "專案角色 · ";
  }

  .project-bonus-amount-input {
    max-width: none;
    justify-self: stretch;
  }

  .project-bonus-form-footer,
  .project-bonus-record > header,
  .project-bonus-record > footer {
    align-items: stretch;
    flex-direction: column;
  }

  .project-bonus-record > footer button,
  .project-bonus-form-footer button {
    width: 100%;
  }

  .project-bonus-allocation-list .project-bonus-allocation-head {
    display: none;
  }
}

/* Payroll disbursement overview */
.payroll-page .payroll-run-panel {
  overflow: visible;
}

.payroll-page .payroll-directory-header {
  min-height: 0;
  padding: 0 0 18px;
}

.payroll-page .payroll-directory-header h2 {
  font-size: 24px;
}

.payroll-page .payroll-overview-tabs {
  gap: 28px;
  padding: 0;
}

.payroll-page .payroll-overview-tabs .subtab-button {
  min-height: 46px;
}

.payroll-page .payroll-handoff-section,
.payroll-page .payroll-batch-section {
  min-width: 0;
  border-top: 0;
  border-bottom: 0;
}

.payroll-page .payroll-page-actions {
  flex: 0 0 auto;
}

.payroll-page .payroll-create-run-button {
  background: #3f70cf;
  color: #fff;
}

.payroll-page .payroll-create-run-button:hover {
  background: #315fba;
}

.payroll-page .payroll-overview-note {
  margin: 12px 0 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.payroll-page .payroll-handoff-filter-toolbar {
  padding: 12px 0 14px;
}

.payroll-page .payroll-handoff-search {
  min-width: 280px;
}

.payroll-page .payroll-handoff-table-scroll {
  width: 100%;
  max-width: 100%;
  margin: 0;
  overflow-x: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  scrollbar-gutter: stable;
  overscroll-behavior-inline: contain;
}

.payroll-page .payroll-handoff-table {
  width: 100%;
  min-width: 1040px !important;
  table-layout: fixed;
  border-collapse: collapse;
}

.payroll-page .payroll-handoff-employee-column {
  width: 230px;
}

.payroll-page .payroll-handoff-period-column {
  width: 220px;
}

.payroll-page .payroll-handoff-earnings-column,
.payroll-page .payroll-handoff-deductions-column,
.payroll-page .payroll-handoff-net-column {
  width: 145px;
}

.payroll-page .payroll-handoff-status-column {
  width: 160px;
}

.payroll-page .payroll-handoff-table th,
.payroll-page .payroll-handoff-table td {
  box-sizing: border-box;
  min-width: 0;
  padding-right: 14px;
  padding-left: 14px;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
  vertical-align: middle;
}

.payroll-page .payroll-handoff-table th {
  height: 40px;
  padding-block: 8px;
  border-bottom-color: var(--line);
  color: #66676b;
  font-size: 12px;
  font-weight: 760;
  white-space: nowrap;
}

.payroll-page .payroll-handoff-record-row td {
  height: 82px;
  padding-block: 10px;
}

.payroll-page .payroll-handoff-table tbody tr:hover td {
  background: #f8f8f9;
}

.payroll-page .payroll-handoff-employee-cell,
.payroll-page .payroll-handoff-period-cell,
.payroll-page .payroll-handoff-amount-cell,
.payroll-page .payroll-handoff-status-cell {
  overflow: hidden;
}

.payroll-page .payroll-handoff-record-row strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payroll-page .payroll-handoff-record-row .table-subtext {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: #818288;
  font-size: 11px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payroll-page .payroll-handoff-item-summary {
  color: #666f80;
}

.payroll-page .payroll-handoff-status-cell {
  overflow: visible;
  white-space: nowrap;
}

.payroll-page .payroll-handoff-status-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.payroll-page .payroll-handoff-tools .quotation-list-tools-button {
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 6px;
  font-size: 22px;
  line-height: 1;
}

.payroll-page .payroll-handoff-amount-cell strong,
.payroll-page .payroll-handoff-net-cell strong {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.payroll-page .payroll-handoff-net-cell strong {
  color: #244f9f;
}

.payroll-page .payroll-handoff-unavailable {
  color: #a2a4aa;
  font-size: 16px;
}

.payroll-handoff-detail-modal {
  width: min(940px, calc(100vw - 40px));
  max-height: min(760px, calc(100vh - 40px));
}

.payroll-handoff-detail-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
}

.payroll-handoff-detail-identity {
  min-width: 0;
}

.payroll-handoff-detail-title-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  margin-top: 3px;
}

.payroll-handoff-detail-title-row h3 {
  margin: 0;
  font-size: 21px;
}

.payroll-handoff-detail-identity p {
  margin: 5px 0 0;
  color: #777a82;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
}

.payroll-handoff-detail-status {
  flex: 0 0 auto;
}

.payroll-handoff-detail-body {
  display: grid;
  gap: 20px;
  padding: 22px 24px 26px;
  overflow-y: auto;
}

.payroll-handoff-detail-summary {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  overflow: hidden;
  border: 1px solid #dfe5ef;
  border-radius: 10px;
  background: #dfe5ef;
}

.payroll-handoff-detail-summary > span {
  display: grid;
  gap: 6px;
  min-width: 0;
  min-height: 78px;
  padding: 15px 18px;
  align-content: center;
  background: #f8faff;
}

.payroll-handoff-detail-summary > span + span {
  border-left: 1px solid #dfe5ef;
}

.payroll-handoff-detail-summary small {
  color: #707785;
  font-size: 11px;
  font-weight: 700;
}

.payroll-handoff-detail-summary strong {
  overflow: hidden;
  color: var(--text);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payroll-handoff-detail-summary .is-net strong {
  color: #244f9f;
}

.payroll-handoff-detail-summary .is-pending strong {
  color: #9a6717;
}

.payroll-handoff-detail-section {
  display: grid;
  gap: 12px;
}

.payroll-handoff-detail-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.payroll-handoff-detail-heading > div {
  display: flex;
  align-items: center;
  gap: 9px;
}

.payroll-handoff-detail-section-number {
  color: #3f70cf !important;
  font-size: 12px !important;
  font-weight: 800;
}

.payroll-handoff-detail-heading h4 {
  margin: 0;
  font-size: 15px;
}

.payroll-handoff-detail-heading span {
  color: var(--muted);
  font-size: 12px;
}

.payroll-handoff-detail-totals,
.payroll-handoff-profile-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--line-soft);
}

.payroll-handoff-detail-totals > span,
.payroll-handoff-profile-grid > span {
  display: grid;
  gap: 5px;
  min-height: 76px;
  padding: 14px;
  align-content: center;
  background: #fff;
}

.payroll-handoff-detail-totals small,
.payroll-handoff-profile-grid small {
  color: var(--muted);
  font-size: 11px;
}

.payroll-handoff-detail-totals strong,
.payroll-handoff-profile-grid strong {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.payroll-handoff-detail-totals .is-net strong {
  color: #244f9f;
}

.payroll-handoff-profile-grid .is-pending strong {
  color: var(--muted);
  font-size: 12px;
}

.payroll-handoff-detail-table-wrap {
  max-height: 300px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
}

.payroll-handoff-detail-table-wrap table {
  width: 100%;
  min-width: 640px;
}

.payroll-handoff-detail-table-wrap th,
.payroll-handoff-detail-table-wrap td {
  padding: 12px 14px;
  font-size: 12px;
  text-align: left;
}

.payroll-handoff-detail-table-wrap th {
  background: #f5f5f6;
  color: #686a70;
  font-size: 11px;
  font-weight: 760;
}

.payroll-handoff-detail-table-wrap tbody tr:last-child td {
  border-bottom: 0;
}

.payroll-handoff-detail-item-name strong {
  display: block;
  font-size: 13px;
}

.payroll-handoff-detail-item-name span {
  display: block;
  margin-top: 3px;
  color: #2f8759;
  font-size: 10px;
  font-weight: 700;
}

.payroll-handoff-detail-basis {
  color: #244f9f;
  font-weight: 760;
  font-variant-numeric: tabular-nums;
}

.payroll-handoff-detail-alert {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  padding: 14px 16px;
  border: 1px solid #f0dfb9;
  border-radius: 9px;
  background: #fffaf0;
}

.payroll-handoff-detail-alert-icon {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: #f4e2b8;
  color: #8c5e12;
  font-size: 13px;
  font-weight: 800;
}

.payroll-handoff-detail-alert strong {
  color: #6f4d15;
  font-size: 13px;
}

.payroll-handoff-detail-alert p {
  margin: 3px 0 0;
  color: #83672f;
  font-size: 12px;
  line-height: 1.55;
}

.payroll-handoff-detail-notice,
.payroll-handoff-detail-empty {
  margin: 0;
  padding: 12px 14px;
  border-radius: 7px;
  background: #f5f7fb;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.payroll-page .payroll-handoff-section > .table-pagination {
  padding: 14px 2px 18px;
}

.payroll-page .payroll-handoff-section > .form-message {
  padding: 0 2px 14px;
}

.payroll-page .payroll-batch-section {
  margin-top: 0;
}

.payroll-page .payroll-run-list {
  padding: 20px 0 28px;
}

@media (max-width: 760px) {
  .payroll-page .payroll-handoff-search {
    min-width: 0;
  }

  .payroll-page .payroll-handoff-table {
    min-width: 1040px !important;
  }

  .payroll-handoff-detail-totals,
  .payroll-handoff-profile-grid,
  .payroll-handoff-detail-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .payroll-handoff-detail-summary > span:nth-child(3) {
    grid-column: 1 / -1;
    border-top: 1px solid #dfe5ef;
    border-left: 0;
  }
}

/* Attendance clock location */
.attendance-location-note {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.attendance-punch-location-stack > span {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.attendance-location-button {
  min-height: 24px;
  padding: 3px 7px;
  border: 1px solid #cbd6ec;
  border-radius: 5px;
  background: #fff;
  color: #315fae;
  font-size: 10px;
  font-weight: 700;
}

.attendance-location-unavailable {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}

.attendance-location-modal {
  width: min(760px, 100%);
}

.attendance-location-modal .ledger-modal-header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.attendance-location-map-wrap {
  position: relative;
  height: min(480px, 58vh);
  overflow: hidden;
  background: #edf1f6;
}

.attendance-location-map-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}

.attendance-location-map-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  border: 3px solid #fff;
  border-radius: 999px;
  background: #3478f6;
  box-shadow: 0 0 0 10px rgb(52 120 246 / 18%), 0 2px 8px rgb(20 32 56 / 28%);
  transform: translate(-50%, -50%);
}

.attendance-location-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 18px 18px;
}

.attendance-location-modal-footer p {
  max-width: 520px;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

.attendance-location-modal-footer .secondary-button {
  flex: 0 0 auto;
  text-decoration: none;
}

@media (max-width: 640px) {
  .attendance-location-map-wrap {
    height: min(420px, 55vh);
  }

  .attendance-location-modal-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .attendance-location-modal-footer .secondary-button {
    width: 100%;
    text-align: center;
  }
}

.acceptance-workspace { display: grid; gap: 14px; background: transparent; }
.acceptance-workspace-heading,
.acceptance-photo-editor,
.acceptance-photo-list {
  display: flex; align-items: center; gap: 10px;
}
.acceptance-workspace-heading,
.acceptance-photo-editor { justify-content: space-between; }
.acceptance-workspace-heading h3, .acceptance-workspace-heading p { margin: 3px 0 0; }
.acceptance-version-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 36px;
  padding: 0 0 4px;
}
.acceptance-version-meta { display: flex; min-width: 0; align-items: baseline; flex-wrap: wrap; gap: 5px; color: var(--muted); font-size: 12px; }
.acceptance-version-meta strong { color: var(--text); font-size: 13px; }
.acceptance-version-meta small, .acceptance-version-history { color: var(--muted); font-size: 12px; }
.acceptance-version-actions, .acceptance-version-history { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.acceptance-version-history a { font-weight: 700; }
.workspace .acceptance-download-button {
  display: inline-grid; place-items: center; flex: 0 0 34px;
  width: 34px; height: 34px; min-height: 0; padding: 0; border: 0; border-radius: 4px;
  background: transparent; color: var(--muted);
}
.workspace .acceptance-download-button:hover { border: 0; background: #f3f4f6; color: var(--text); }
.workspace .acceptance-download-button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.acceptance-download-button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.acceptance-editor { display: grid; gap: 12px; }
.acceptance-editor-row { display: grid; gap: 14px; padding: 0; border: 0; background: transparent; }
.workspace .acceptance-add-item-button,
.workspace .acceptance-save-button { display: inline-flex; min-height: 36px; align-items: center; justify-content: center; padding: 8px 15px; border-radius: 6px; font-weight: 700; }
.workspace .acceptance-add-item-button { border: 1px solid #3f70cf; background: #3f70cf; color: #fff; }
.workspace .acceptance-add-item-button:hover { border-color: #315cae; background: #315cae; color: #fff; }
.workspace .acceptance-save-button { border: 1px solid var(--line); background: transparent; color: var(--text); }
.workspace .acceptance-save-button:hover { border-color: var(--muted); background: #fff; color: var(--text); }
.acceptance-item-list { display: grid; gap: 12px; }
.acceptance-item-card { display: grid; box-sizing: border-box; width: 100%; gap: 14px; padding: 16px; border: 1px solid var(--line-soft); border-radius: 8px; background: #fafaf9; }
.acceptance-item-heading { display: flex; align-items: center; justify-content: space-between; }
.acceptance-item-heading strong { font-size: 13px; }
.acceptance-editor-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 10px;
  min-width: 0;
}
.acceptance-editor-fields label { display: grid; min-width: 0; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 700; }
.acceptance-editor-fields input { box-sizing: border-box; width: 100%; min-width: 0; }
.acceptance-photo-editor { display: grid; align-items: stretch; gap: 0; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.acceptance-photo-content { display: grid; min-width: 0; gap: 9px; }
.acceptance-field-label { color: var(--muted); font-size: 12px; font-weight: 700; }
.acceptance-photo-dropzone {
  position: relative;
  display: flex;
  min-height: 78px;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border: 1px dashed #aebbd2;
  border-radius: 8px;
  background: #f8faff;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.acceptance-photo-dropzone:hover,
.acceptance-photo-dropzone.dragover { border-color: #3f70cf; background: #f0f5ff; }
.acceptance-photo-upload-icon {
  display: inline-grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  background: #e7eefc;
  color: #3f70cf;
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
  place-items: center;
}
.acceptance-photo-upload-copy { display: grid; min-width: 0; gap: 3px; }
.acceptance-photo-upload-copy strong { font-size: 12px; line-height: 1.4; }
.acceptance-photo-upload-copy small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.acceptance-photo-dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.acceptance-photo-list { min-height: 18px; flex-wrap: wrap; }
.acceptance-photo-list > .detail-muted { font-size: 11px; }
.acceptance-photo-chip { position: relative; width: 104px; height: 78px; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: #eee; }
.acceptance-photo-chip img { width: 100%; height: 100%; object-fit: cover; }
.acceptance-photo-chip .icon-button { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; padding: 0; background: rgba(255,255,255,.92); }
.acceptance-photo-chip-pending { border-style: dashed; border-color: #8ea8d5; }
.acceptance-photo-pending-badge { position: absolute; z-index: 1; bottom: 4px; left: 4px; padding: 3px 6px; border-radius: 999px; background: rgba(49,95,181,.9); color: #fff; font-size: 9px; font-weight: 700; }
.acceptance-photo-item-number,
.acceptance-sheet-photo-number { position: absolute; z-index: 1; top: 5px; left: 5px; display: inline-grid; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: rgba(55,53,47,.9); color: #fff; font-size: 11px; font-weight: 800; place-items: center; }
.acceptance-pending-photo-count { min-height: 16px; color: #315cae; font-size: 11px; }
.acceptance-pending-photo-count:empty { display: none; }
.acceptance-pending-photo-count.error { color: var(--red-text); }
.acceptance-email-pdf-attachment { cursor: default; }
.acceptance-sheet {
  width: min(100%, 794px); min-height: 1123px; margin: 4px auto 24px; padding: 62px 54px 44px;
  color: #222; background: #fff; box-shadow: 0 12px 36px rgba(0,0,0,.1);
  font-family: Arial, "Noto Sans TC", sans-serif; box-sizing: border-box;
}
.acceptance-wordmark { color: #55595d; font-size: 36px; font-weight: 900; font-style: italic; letter-spacing: -.07em; text-align: center; transform: scaleX(1.12); }
.acceptance-sheet h2 { margin: 12px 0 6px; font-size: 21px; text-align: center; }
.acceptance-meta-grid { display: grid; grid-template-columns: 78px minmax(0,1.75fr) 92px minmax(0,.75fr); gap: 5px 8px; font-size: 10px; line-height: 1.25; }
.acceptance-meta-grid span { color: #555; }
.acceptance-meta-grid strong { min-width: 0; overflow-wrap: anywhere; font-weight: 400; }
.acceptance-sheet-table { width: 100%; margin-top: 4px; border-collapse: collapse; table-layout: fixed; font-size: 10px; }
.acceptance-sheet-table th, .acceptance-sheet-table td { height: 24px; padding: 4px 6px; border: 1px solid #222; text-align: center; overflow-wrap: anywhere; }
.acceptance-sheet-table th:nth-child(1) { width: 40px; }
.acceptance-sheet-table th:nth-child(2) { width: 145px; }
.acceptance-sheet-table th:nth-child(4) { width: 88px; }
.acceptance-sheet-table th:nth-child(5) { width: 130px; }
.acceptance-sheet > h3 { margin: 4px 0 2px; font-size: 10px; font-weight: 400; }
.acceptance-sheet-photos { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; min-height: 230px; align-content: start; }
.acceptance-sheet-photos figure { position: relative; margin: 0; }
.acceptance-sheet-photo-number { top: 8px; left: 8px; min-width: 22px; height: 22px; font-size: 9px; }
.acceptance-sheet-photos img { display: block; width: 100%; height: 190px; object-fit: cover; }
.acceptance-sheet-photos figcaption { padding-top: 2px; color: #666; font-size: 8px; }
.acceptance-sheet-photos p { color: #888; font-size: 9px; }
.acceptance-signatures { display: grid; grid-template-columns: 1fr 1fr; gap: 120px; margin-top: 20px; font-size: 10px; }
.acceptance-signatures > div { display: grid; gap: 8px; }
.acceptance-signatures span { min-height: 52px; }
.acceptance-signature-line { border-bottom: 2px solid #222; }
.acceptance-signatures small, .acceptance-legal { font-size: 8px; }
.acceptance-legal { margin: 8px 0 0; color: #777; }
.acceptance-legal.centered { text-align: center; }

@media (max-width: 700px) {
  .acceptance-version-toolbar { align-items: stretch; flex-direction: column; }
  .acceptance-version-actions { align-items: stretch; }
  .acceptance-workspace-heading,
  .acceptance-photo-editor { align-items: stretch; flex-direction: column; }
  .acceptance-sheet { min-height: 0; padding: 30px 22px; }
}

@media print {
  @page { size: A4 portrait; margin: 0; }
  body.printing-acceptance * { visibility: hidden !important; }
  body.printing-acceptance .acceptance-sheet, body.printing-acceptance .acceptance-sheet * { visibility: visible !important; }
  body.printing-acceptance .acceptance-sheet {
    position: absolute; top: 0; left: 0; width: 210mm; min-height: 297mm; margin: 0;
    padding: 16mm 14mm 12mm; box-shadow: none;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
}

[hidden] {
  display: none !important;
}

/* Login shoreline redesign: one continuous canvas with the wave entering from the right. */
.login-screen {
  display: block;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0;
  background: #f7f8f8;
}

.login-shell {
  position: relative;
  display: block;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 92% 14%, rgb(188 239 241 / 20%), transparent 28%),
    linear-gradient(135deg, #fafaf8 0%, #f7f8f8 58%, #f3f8f8 100%);
  box-shadow: none;
}

.login-auth-column {
  position: relative;
  z-index: 3;
  display: flex;
  width: min(50%, 650px);
  min-height: 100vh;
  min-height: 100dvh;
  min-width: 0;
  flex-direction: column;
  justify-content: flex-start;
  padding: clamp(42px, 7vh, 76px) clamp(48px, 8vw, 126px);
  background: transparent;
}

.login-panel {
  display: grid;
  width: min(100%, 390px);
  align-content: start;
  gap: 26px;
  margin: 0;
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: clamp(44px, 8vh, 86px);
}

.login-brand-icon {
  display: block;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  object-fit: contain;
}

.login-brand > div:last-child {
  display: grid;
  gap: 2px;
}

.login-brand strong {
  color: #202331;
  font-size: 14px;
  font-weight: 750;
  letter-spacing: 0.02em;
}

.login-brand span {
  color: #8a8f9e;
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.login-heading {
  display: grid;
  gap: 8px;
}

.login-eyebrow {
  color: #3f70cf;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.login-heading h1 {
  margin: 0;
  color: #161823;
  font-size: clamp(34px, 3.2vw, 44px);
  font-weight: 760;
  letter-spacing: -0.045em;
  line-height: 1.1;
}

.login-heading p {
  max-width: 360px;
  margin: 2px 0 0;
  color: #777c8b;
  font-size: 13px;
  line-height: 1.65;
}

.login-fields {
  display: grid;
  gap: 18px;
}

.login-panel .login-field {
  display: grid;
  gap: 8px;
  color: #535765;
  font-size: 12px;
  font-weight: 700;
}

.login-field-control {
  display: grid;
  min-height: 50px;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  overflow: hidden;
  border: 1px solid #dfe2e9;
  border-radius: 10px;
  background: #fbfcfe;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.login-field-control:hover {
  border-color: #c9ceda;
  background: #fff;
}

.login-field-control:focus-within {
  border-color: #3f70cf;
  background: #fff;
  box-shadow: 0 0 0 3px rgb(63 112 207 / 14%);
}

.login-field-control svg {
  width: 17px;
  height: 17px;
  justify-self: center;
  fill: none;
  stroke: #8a90a0;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.login-panel .login-field-control input {
  width: 100%;
  height: 48px;
  min-width: 0;
  padding: 0 14px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #202331;
  font-size: 14px;
  box-shadow: none;
}

.login-panel .login-field-control input:focus {
  border: 0;
  outline: 0;
  box-shadow: none;
}

.login-panel .login-field-control input::placeholder {
  color: #a6aab5;
}

.login-panel .login-field-control input:-webkit-autofill,
.login-panel .login-field-control input:-webkit-autofill:hover,
.login-panel .login-field-control input:-webkit-autofill:focus {
  -webkit-text-fill-color: #202331;
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  transition: background-color 9999s ease-out;
}

.login-submit {
  display: flex;
  width: 100%;
  height: 50px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid #222538;
  border-radius: 10px;
  background:
    linear-gradient(110deg, rgb(255 255 255 / 7%), transparent 38%),
    #17192a;
  color: #fff;
  box-shadow: 0 12px 26px rgb(23 25 42 / 18%);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.04em;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.login-submit svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  transition: transform 160ms ease;
}

.login-submit:hover {
  background:
    linear-gradient(110deg, rgb(255 255 255 / 10%), transparent 42%),
    #242744;
  box-shadow: 0 15px 30px rgb(49 54 112 / 24%);
  transform: translateY(-1px);
}

.login-submit:hover svg {
  transform: translateX(3px);
}

.login-submit:active {
  box-shadow: 0 8px 18px rgb(23 25 42 / 16%);
  transform: translateY(0);
}

.login-panel .form-message {
  min-height: 18px;
  margin: -18px 0 0;
  font-size: 12px;
  line-height: 1.5;
}

.login-panel .form-message:empty {
  display: none;
}

.login-security-note {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  color: #9297a5;
  font-size: 10px;
  line-height: 1.4;
}

.login-security-note svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  fill: none;
  stroke: #3f70cf;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.login-footer {
  width: min(100%, 390px);
  margin: clamp(38px, 7vh, 70px) 0 0;
  color: #a0a4af;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
}

.app-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100vh;
}

.brand {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 8px 34px 16px 6px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}



.topbar {
  display: flex;
  gap: 24px;
  margin-bottom: 22px;
}

.topbar-identity {
  display: flex;
  flex: 1 1 auto;
}

.topbar-title-copy {
  min-width: 0;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 24px;
  line-height: 1.2;
  font-weight: 750;
}

h2 {
  font-size: 15px;
  line-height: 1.3;
}

.topbar p,
.panel-header p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
}

.module-nav {
  border-bottom: 1px solid var(--line);
}

.module-nav-tabs {
  min-width: 0;
  flex: 1 1 auto;
  flex-wrap: wrap;
}

.module-nav-tab {
  border-bottom: 2px solid transparent;
}

.module-nav-tab:hover {
  border-bottom-color: #cfcfca;
}

.module-nav-tab.active {
  border-bottom-color: var(--text);
}

.module-nav-tab:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.notification-center {
  position: relative;
  align-self: end;
}

.notification-button {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
}

.notification-button:hover,
.notification-button[aria-expanded="true"] {
  background: var(--sidebar);
}

.notification-icon {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notification-dot {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 8px;
  height: 8px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #d92d20;
}

.notification-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  width: min(408px, calc(100vw - 24px));
  overflow: hidden;
  border: 1px solid #dfe3e9;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 48px rgb(24 32 46 / 18%), 0 3px 10px rgb(24 32 46 / 8%);
}

.notification-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
  padding: 14px 16px;
  border-bottom: 1px solid #e8ebef;
  background: #fff;
}

.notification-panel-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 11px;
}

.notification-panel-icon,
.notification-item-icon,
.notification-empty-icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
}

.notification-panel-icon {
  width: 36px;
  height: 36px;
  background: #edf3fd;
  color: #426ba8;
}

.notification-panel-icon svg,
.notification-item-icon svg,
.notification-empty-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.notification-panel-title-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.notification-panel-title-copy strong {
  font-size: 15px;
  line-height: 1.3;
}

.notification-panel-title-copy span {
  color: #777d87;
  font-size: 11px;
  line-height: 1.35;
}

.app-shell .notification-mark-read.secondary-button {
  flex: 0 0 auto;
  height: 30px;
  padding: 0 10px;
  border-color: #dbe4f1;
  border-radius: 999px;
  background: #f7f9fc;
  color: #426ba8;
  font-size: 11px;
  font-weight: 700;
}

.app-shell .notification-mark-read.secondary-button:hover:not(:disabled) {
  border-color: #c9d7eb;
  background: #edf3fd;
}

.app-shell .notification-mark-read.secondary-button:disabled {
  cursor: default;
  opacity: 0.48;
}

.notification-list {
  display: grid;
  max-height: min(480px, calc(100vh - 88px));
  overflow: auto;
  overscroll-behavior: contain;
}

.notification-item {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: start;
  gap: 11px;
  min-height: 86px;
  padding: 14px 15px;
  border-bottom: 1px solid #edf0f3;
  background: #fff;
  transition: background-color 140ms ease;
}

.notification-item:last-child {
  border-bottom: 0;
}

.notification-item.unread {
  background: #f6f9fe;
}

.notification-item.is-actionable {
  cursor: pointer;
}

.notification-item.is-actionable:hover {
  background: #f1f5fb;
}

.notification-item.is-actionable:focus-visible {
  z-index: 1;
  outline: 2px solid #6c8fca;
  outline-offset: -2px;
}

.notification-item-icon {
  width: 34px;
  height: 34px;
  background: #f0f2f5;
  color: #747b86;
}

.notification-item.unread .notification-item-icon {
  background: #e4edfb;
  color: #426ba8;
}

.notification-item-icon svg {
  width: 16px;
  height: 16px;
}

.notification-item-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.notification-item-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.notification-item-title strong {
  color: #26292e;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
}

.notification-unread-indicator {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #4f7fc4;
}

.notification-item-message {
  overflow: hidden;
  color: #626873;
  font-size: 12px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-meta {
  color: #8a9099;
  font-size: 11px;
  line-height: 1.4;
}

.notification-item-arrow {
  align-self: center;
  padding-left: 2px;
  color: #9aa0aa;
  font-size: 22px;
  line-height: 1;
}

.notification-empty {
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 38px 24px 42px;
  text-align: center;
}

.notification-empty-icon {
  width: 42px;
  height: 42px;
  margin-bottom: 3px;
  background: #edf5ee;
  color: #4c855a;
}

.notification-empty-icon svg {
  width: 21px;
  height: 21px;
}

.notification-empty strong {
  color: #34383e;
  font-size: 13px;
}

.notification-empty p {
  color: #858b94;
  font-size: 11px;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .notification-panel {
    position: fixed;
    top: 56px;
    right: 10px;
    left: 10px;
    width: auto;
  }

  .notification-panel-header {
    padding-inline: 14px;
  }

  .notification-list {
    max-height: calc(100vh - 144px);
  }
}

input,
select,
button {
  height: 38px;
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
}

input,
select {
  width: 260px;
  border: 1px solid var(--line);
  padding: 0 11px;
  color: var(--text);
  background: #fff;
  outline: none;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--muted);
  box-shadow: 0 0 0 1px var(--muted);
}

button {
  border: 0;
  background: var(--text);
  color: #fff;
  padding: 0 14px;
  font-weight: 650;
  cursor: pointer;
}

button:hover {
  background: #4b4943;
}

select[multiple] {
  min-height: 86px;
  padding: 8px 11px;
}

.secondary-button,
.icon-button {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
}

.secondary-button:hover,
.icon-button:hover {
  background: var(--sidebar);
}

.secondary-button {
  height: 30px;
  padding: 0 10px;
  font-size: 12px;
}

.compact-button {
  height: 28px;
  padding: 0 9px;
}

.icon-button {
  width: 38px;
  padding: 0;
  font-size: 18px;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.project-panel.panel,
.project-detail-panel.panel {
  margin-bottom: 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.cost-ledger-panel.panel {
  margin-bottom: 14px;
  border: 0;
  background: transparent;
}

.project-panel > .panel-header {
  justify-content: flex-end;
  padding: 0 0 14px;
  border-bottom: 0;
}

.project-panel > .panel-header > div:first-child,
.project-detail-panel > .panel-header {
  display: none;
}

.project-detail-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.project-detail-heading > div {
  min-width: 0;
}

.panel-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.project-create-section {
  margin: 0;
  padding: 0;
}

.project-create-section .project-create-drawer {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.customer-edit-panel {
  margin-bottom: 14px;
}

.form-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 14px;
  margin-bottom: 14px;
}

.form-grid[data-page="customer-data"],
.form-grid[data-page="venue-data"],
.single-form-grid {
  grid-template-columns: minmax(0, 1fr);
}

.form-panel {
  align-self: start;
}

.project-create-drawer {
  overflow: hidden;
}

.form-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px 16px 16px;
}

.form-body label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.form-body input,
.form-body select,
.form-body textarea {
  width: 100%;
  color: var(--text);
  font-weight: 400;
}

.form-body textarea {
  resize: vertical;
  min-height: 88px;
}

.checkbox-group {
  display: grid;
  gap: 6px;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.compact-checkbox-group {
  max-height: 118px;
  overflow: auto;
}

.checkbox-option {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 8px !important;
  color: var(--text) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.checkbox-option input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.form-body .span-2 {
  grid-column: 1 / -1;
}

.form-body button {
  justify-self: start;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.form-message {
  align-self: center;
  color: var(--muted);
  font-size: 13px;
}

.form-message.ok {
  color: var(--green-text);
}

.form-message.error {
  color: var(--red-text);
}

.customer-edit-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px 16px;
  border-top: 1px solid var(--line-soft);
}

.customer-edit-footer .form-message {
  margin: 0;
  text-align: right;
}

.compact-form {
  padding-top: 12px;
}

.inline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  color: var(--text);
  font-size: 13px;
}

.member-rows,
.session-rows {
  display: grid;
  gap: 8px;
}

.member-row,
.session-row {
  display: grid;
  gap: 8px;
  align-items: center;
}

.member-row {
  grid-template-columns: minmax(220px, 1.3fr) minmax(150px, 0.7fr) minmax(220px, 1fr) 38px;
}

.session-row {
  grid-template-columns: minmax(150px, 0.95fr) minmax(150px, 1fr) minmax(150px, 1fr) repeat(3, minmax(120px, 0.8fr)) 38px;
  align-items: end;
}

.session-row:has([data-manual-venue-field][hidden]) {
  grid-template-columns: minmax(150px, 0.95fr) minmax(150px, 1.15fr) repeat(3, minmax(120px, 0.8fr)) 38px;
}

.member-row input,
.member-row select,
.session-row input,
.session-row select {
  min-width: 0;
}

.session-row label {
  gap: 5px;
}

.kpi-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

.kpi-card span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.kpi-card strong {
  display: block;
  margin-top: 8px;
  font-size: 24px;
  line-height: 1;
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 14px;
}

.content-grid[data-page="customer-data"],
.content-grid[data-page="venue-data"],
.content-grid[data-page="vendor-crew-data"],
.content-grid[data-page="attendance-admin"],
.content-grid[data-page="leave-review"],
.content-grid[data-page="organization-positions"] {
  grid-template-columns: minmax(0, 1fr);
}

.panel {
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.page-section {
  min-width: 0;
  animation: pageFadeIn 140ms ease-out;
}

.workspace #pageSubtitle,
.workspace .panel-header > div > p {
  display: none;
}

@keyframes pageFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.panel-header.compact {
  display: block;
  border-bottom: 0;
  padding-bottom: 8px;
}

.status-pill,
.tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.status-pill.ok,
.tag.ok {
  background: var(--green-bg);
  color: var(--green-text);
}

.status-pill.pending,
.tag.pending {
  background: var(--amber-bg);
  color: var(--amber-text);
}

.status-pill.error,
.tag.error {
  background: var(--red-bg);
  color: var(--red-text);
}

.tag.process-progress-review {
  background: var(--amber-bg);
  color: var(--amber-text);
}

.tag.process-progress-payment {
  background: #e8f1ff;
  color: #245ea8;
}

.tag.process-progress-completed {
  background: var(--green-bg);
  color: var(--green-text);
}

.project-dashboard-chart,
.project-dashboard-timeline {
  min-width: 0;
}

.project-dashboard-chart {
  position: relative;
}

.project-dashboard-timeline {
  padding-left: 24px;
  border-left: 1px solid var(--line-soft);
}

.project-dashboard-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.project-dashboard-heading h3 {
  margin: 0;
  font-size: 14px;
}

.project-dashboard-heading span {
  font-size: 12px;
  color: var(--muted);
}

.project-volume-svg {
  display: block;
  width: 100%;
  min-height: 190px;
  max-height: 230px;
}

.project-volume-grid-line {
  stroke: var(--line-soft);
  stroke-width: 1;
}

.project-volume-axis-label {
  fill: var(--muted);
  font-size: 11px;
}

.project-volume-segment {
  stroke-width: 1;
  stroke-opacity: 0.34;
  vector-effect: non-scaling-stroke;
}

.project-volume-month {
  cursor: default;
  outline: none;
}

.project-volume-month:hover .project-volume-segment,
.project-volume-month:focus .project-volume-segment {
  stroke-width: 1.5;
  stroke-opacity: 0.72;
}

.project-volume-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 8px;
}

.project-volume-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
}

.project-volume-legend i {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 2px;
  background: var(--project-stage-color);
  box-shadow: inset 0 0 0 1px var(--project-stage-accent);
}

.project-volume-tooltip {
  position: absolute;
  z-index: 20;
  width: min(360px, calc(100% - 16px));
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 10px 28px rgb(15 23 42 / 14%);
  color: var(--text);
  pointer-events: none;
}

.project-volume-tooltip-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
}

.project-volume-tooltip-heading strong {
  font-size: 13px;
}

.project-volume-tooltip-heading span {
  color: var(--muted);
  font-size: 12px;
}

.project-volume-tooltip-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 14px;
  margin-top: 9px;
}

.project-volume-tooltip-list > div {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  min-width: 0;
  font-size: 11px;
}

.project-volume-tooltip-list i {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--project-stage-color);
  box-shadow: inset 0 0 0 1px var(--project-stage-accent);
}

.project-volume-tooltip-list span {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-volume-tooltip-list strong {
  font-variant-numeric: tabular-nums;
}

.project-activity-timeline {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-activity-item {
  color: color-mix(in srgb, var(--muted) 78%, transparent);
}



.project-activity-item:last-child::before {
  bottom: 10px;
}

.project-activity-item::after {
  position: absolute;
  top: 4px;
  left: -4px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: #fff;
  content: "";
}

.project-activity-item time,
.project-activity-item strong,
.project-activity-item span {
  display: block;
}

.project-activity-item time {
  color: inherit;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.project-activity-item time span {
  margin-top: 2px;
  font-size: 11px;
}

.project-activity-item strong {
  overflow-wrap: anywhere;
  color: inherit;
  font-size: 13px;
  line-height: 1.3;
}

.project-activity-item div > span {
  overflow-wrap: anywhere;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.35;
}

.project-activity-item.primary {
  padding-bottom: 14px;
  color: var(--amber-text);
}

.project-activity-item.primary strong {
  font-size: 16px;
  font-weight: 800;
}

.project-activity-item.primary::after {
  border-color: currentColor;
  background: currentColor;
}

.project-activity-item.primary.urgent {
  color: var(--red-text);
}

.project-dashboard-empty {
  margin: 12px 0;
  color: var(--muted);
  font-size: 13px;
}

.table-wrap {
  overflow: auto;
}

.stacked-cell {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.stacked-cell span {
  overflow-wrap: anywhere;
}

.stacked-cell small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.customer-directory-subsection-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

.customer-directory-subsection-tools > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.workspace .customer-directory-add-button {
  display: inline-flex;
  width: auto;
  min-height: 36px;
  align-items: center;
  gap: 5px;
  padding: 6px 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #3f70cf;
  font-size: 13px;
  font-weight: 820;
  box-shadow: none;
}

.workspace .customer-directory-add-button > span {
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
}

.workspace .customer-directory-add-button:hover:not(:disabled),
.workspace .customer-directory-add-button:focus-visible {
  background: transparent;
  color: #315fb0;
  text-decoration: underline;
  text-decoration-color: rgb(63 112 207 / 35%);
  text-underline-offset: 5px;
}

.master-data-contact-dialog {
  width: min(640px, calc(100vw - 32px));
  max-width: none;
  margin: auto;
  padding: 0;
  border: 1px solid #dde2e9;
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  box-shadow: 0 24px 80px #14233d33;
}

.master-data-contact-dialog::backdrop {
  background: #17213080;
}

.master-data-contact-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--line-soft);
}

.master-data-contact-dialog-header h2 {
  margin: 0;
  font-size: 20px;
}

.master-data-contact-dialog-header p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.master-data-contact-dialog-header .icon-button {
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border-color: transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}

.master-data-contact-dialog-header .icon-button:hover {
  border-color: transparent;
  background: #f1f2f4;
  color: var(--text);
}

.master-data-contact-dialog .master-data-contact-dialog-body {
  padding: 20px 24px 8px;
}

.master-data-contact-dialog :is(input, select, textarea) {
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid #d8dde5;
  border-radius: 4px;
  background: #fff;
}

.master-data-contact-dialog :is(input, select, textarea):focus {
  border-color: #3f70cf;
  outline: 0;
  box-shadow: 0 0 0 1px #3f70cf;
}

.master-data-contact-dialog-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 24px 20px;
}

.master-data-contact-dialog-primary-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.master-data-contact-dialog-primary-actions > button {
  min-width: 88px;
  height: 38px;
  min-height: 38px;
  padding: 0 16px;
}

.master-data-contact-dialog-primary-actions > .secondary-button {
  border-color: #d8dde5;
  background: #fff;
  color: var(--text);
}

.master-data-contact-dialog-actions #contactSubmitButton {
  border-color: #3f70cf;
  background: #3f70cf;
  color: #fff;
}

.master-data-contact-dialog .master-data-contact-dialog-actions .contact-status-action {
  min-height: 36px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: #a44747;
  box-shadow: none;
  font-size: 12px;
  font-weight: 700;
}

.master-data-contact-dialog .master-data-contact-dialog-actions .contact-status-action:hover {
  background: transparent;
  color: #823838;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.master-data-contact-dialog .master-data-contact-dialog-actions .contact-status-action.is-reactivate {
  color: #257849;
}

.master-data-contact-confirm-dialog {
  width: min(420px, calc(100vw - 32px));
  max-width: none;
  margin: auto;
  padding: 0;
  border: 1px solid #dde2e9;
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  box-shadow: 0 24px 80px #14233d3d;
}

.master-data-contact-confirm-dialog::backdrop {
  background: #17213070;
}

.master-data-contact-confirm-content {
  padding: 24px;
}

.master-data-contact-confirm-content h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.4;
}

.master-data-contact-confirm-content > p:not(.form-message) {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.master-data-contact-confirm-content > .form-message {
  margin: 10px 0 0;
}

.master-data-contact-confirm-content > .form-message:empty {
  display: none;
}

.master-data-contact-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}

.master-data-contact-confirm-actions > button {
  min-width: 92px;
  height: 38px;
  min-height: 38px;
  padding: 0 16px;
}

.master-data-contact-confirm-actions > .secondary-button {
  border-color: #d8dde5;
  background: #fff;
  color: var(--text);
}

.master-data-contact-confirm-actions > #contactStatusConfirmButton,
.master-data-contact-confirm-actions > .is-destructive {
  border-color: #a44747;
  background: #a44747;
  color: #fff;
}

.master-data-contact-confirm-actions > #contactStatusConfirmButton.is-reactivate {
  border-color: #257849;
  background: #257849;
}

.table-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 14px 0 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.table-pagination button {
  min-height: 34px;
}

.project-panel > .table-wrap {
  margin-inline: 0;
}

.project-panel > .table-pagination {
  padding-inline: 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

th,
td {
  height: 44px;
  border-bottom: 1px solid var(--line-soft);
  padding: 0 14px;
  text-align: left;
  vertical-align: middle;
}

th {
  background: var(--sidebar);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.venue-data-table {
  min-width: 0;
  table-layout: auto;
}

.customer-list-tools,
.venue-list-tools {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: #fbfcfb;
}

.customer-list-tools input,
.venue-list-tools input {
  max-width: 420px;
}

.venue-data-table th:nth-child(1),
.venue-data-table th:nth-child(2),
.venue-data-table td:nth-child(1),
.venue-data-table td:nth-child(2) {
  width: 1%;
  white-space: nowrap;
}

.venue-data-table th:nth-child(3),
.venue-data-table td:nth-child(3) {
  width: auto;
}

.venue-data-table th:nth-child(4),
.venue-data-table td:nth-child(4) {
  width: 1%;
  white-space: nowrap;
}

.venue-data-table th:nth-child(5),
.venue-data-table td:nth-child(5),
.venue-data-table th:nth-child(6),
.venue-data-table td:nth-child(6) {
  width: 1%;
  white-space: nowrap;
}

.venue-data-table td:nth-child(1) .stacked-cell,
.venue-data-table td:nth-child(2) {
  overflow: visible;
}

.venue-data-table td:nth-child(1) .stacked-cell strong,
.venue-data-table td:nth-child(1) .stacked-cell small {
  overflow-wrap: normal !important;
  white-space: nowrap !important;
  word-break: keep-all;
}

.venue-data-table td:nth-child(3) .stacked-cell span,
.venue-data-table td:nth-child(3) .stacked-cell small {
  overflow-wrap: anywhere;
  white-space: normal;
}

.column-header {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
}

.column-sort-button {
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 4px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}

.column-sort-button:hover,
.column-sort-button.active {
  background: var(--sidebar);
  color: var(--text);
}

.column-filter-field {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.column-filter-field select,
.column-filter-field input {
  width: 100%;
  min-height: 34px;
}

.project-panel .table-wrap table:has(#projectTableHeader) {
  min-width: 980px;
  table-layout: auto;
}

.project-panel .table-wrap table:has(#projectTableHeader) th {
  white-space: nowrap;
}

.project-panel .table-wrap table:has(#projectTableHeader) th:nth-child(1),
.project-panel .table-wrap table:has(#projectTableHeader) td:nth-child(1) {
  min-width: 260px;
}

.project-panel .table-wrap table:has(#projectTableHeader) th:nth-child(2),
.project-panel .table-wrap table:has(#projectTableHeader) td:nth-child(2) {
  min-width: 170px;
}

.project-panel .table-wrap table:has(#projectTableHeader) th:nth-child(3),
.project-panel .table-wrap table:has(#projectTableHeader) td:nth-child(3) {
  min-width: 120px;
}

.project-panel .table-wrap table:has(#projectTableHeader) th:nth-child(4),
.project-panel .table-wrap table:has(#projectTableHeader) td:nth-child(4) {
  min-width: 155px;
}

.project-panel .table-wrap table:has(#projectTableHeader) th:nth-child(5),
.project-panel .table-wrap table:has(#projectTableHeader) td:nth-child(5) {
  min-width: 100px;
}

.project-panel .table-wrap table:has(#projectTableHeader) th:nth-child(6),
.project-panel .table-wrap table:has(#projectTableHeader) td:nth-child(6) {
  min-width: 120px;
}

.project-team-summary,
.project-schedule-summary {
  display: grid;
  gap: 3px;
  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
}

.project-schedule-summary span {
  white-space: nowrap;
}

.project-financial-overview {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}

.project-financial-overview table {
  min-width: 1020px;
}

.profit-target-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.profit-target-pill.met {
  background: var(--green-bg);
  color: var(--green-text);
}

.profit-target-pill.below {
  background: var(--red-bg);
  color: var(--red-text);
}

.profit-target-pill.unknown {
  background: var(--yellow-bg);
  color: var(--yellow-text);
}

.health-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.health-pill.ok {
  background: var(--green-bg);
  color: var(--green-text);
}

.health-pill.warning {
  background: var(--amber-bg);
  color: var(--amber-text);
}

.health-pill.danger {
  background: var(--red-bg);
  color: var(--red-text);
}

.stage-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  max-width: 100%;
  overflow: hidden;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage-pill.proposal {
  background: #eef2ff;
  color: #3730a3;
}

.stage-pill.quote {
  background: #fff7ed;
  color: #9a3412;
}

.stage-pill.sample {
  background: #f5f3ff;
  color: #6d28d9;
}

.stage-pill.production {
  background: #e0f2fe;
  color: #075985;
}

.stage-pill.event {
  background: #ecfeff;
  color: #0f766e;
}

.stage-pill.acceptance {
  background: #dcfce7;
  color: #166534;
}

.stage-pill.invoice {
  background: #fef3c7;
  color: #92400e;
}

.stage-pill.document {
  background: #fef9c3;
  color: #854d0e;
}

.stage-pill.payment {
  background: #fee2e2;
  color: #991b1b;
}

.stage-pill.paid {
  background: #ccfbf1;
  color: #0f766e;
}

.stage-pill.closed {
  background: #f3f4f6;
  color: #374151;
}

.stage-pill.active {
  background: #dcfce7;
  color: #166534;
}

.stage-pill.default {
  background: var(--sidebar);
  color: var(--muted);
}

td {
  color: var(--text);
  min-width: 110px;
}

tbody tr:hover {
  background: rgba(247, 247, 245, 0.7);
}

tbody tr.action-required-row td {
  background: #fffaf0;
}

tbody tr.action-required-row:hover td {
  background: #fff5df;
}

tbody tr.action-required-row td:first-child {
  box-shadow: inset 3px 0 0 #d7a63c;
}

tbody tr.purchase-payment-completed-row td {
  background: #f3faf3;
}

tbody tr.purchase-payment-completed-row:hover td {
  background: #eaf6ea;
}

tbody tr.purchase-payment-completed-row td:first-child {
  box-shadow: inset 3px 0 0 #6aaf73;
}

tbody tr.disbursement-completed-row td {
  background: #f3faf3;
}

tbody tr.disbursement-completed-row:hover td {
  background: #eaf6ea;
}

tbody tr.disbursement-completed-row td:first-child {
  box-shadow: inset 3px 0 0 #6aaf73;
}

.project-row {
  cursor: pointer;
}

.project-row.active {
  background: var(--green-bg);
}

.empty-cell {
  color: var(--muted);
  text-align: center;
}

.detail-empty {
  padding: 22px 16px;
  color: var(--muted);
  font-size: 13px;
}

.project-picker-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.project-select-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px;
}

.project-status-board {
  display: flex;
  gap: 12px;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 10px;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
}

.project-status-column {
  display: grid;
  grid-template-rows: auto 1fr;
  flex: 0 0 330px;
  min-height: 520px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: #fafafa;
}

.project-status-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 52px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-soft);
}

.project-status-column-header span {
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
}

.project-status-column-header strong {
  color: var(--muted);
  font-size: 13px;
}

.project-status-column-body {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 10px;
}

.project-status-board .project-select-card strong {
  padding-right: 0;
}

.project-status-empty {
  margin: 0;
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.virtual-status-column {
  background: var(--sidebar);
}

.project-select-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 10px;
  min-height: 190px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  text-align: left;
}

.project-select-card:hover {
  border-color: #cfcac0;
  background: var(--sidebar);
}

.project-select-card.virtual-project-card {
  min-height: 150px;
  background: var(--sidebar);
  border-color: var(--line);
}

.project-select-card.virtual-project-card:hover {
  background: #f0f0ed;
}

.virtual-project-label {
  justify-self: start;
  padding: 4px 8px;
  border-radius: 999px;
  background: #e7e7e2;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.project-select-card strong {
  min-width: 0;
  padding-right: 120px;
  font-size: 16px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.project-select-card.virtual-project-card strong {
  padding-right: 0;
}

.project-select-card > span:not(.project-select-card-status) {
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.project-select-card-status {
  position: absolute;
  top: 12px;
  right: 12px;
  max-width: 122px;
}

.project-select-card dl {
  display: grid;
  gap: 8px;
  margin: 0;
  align-self: end;
}

.project-select-card dl div {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 8px;
}

.project-select-card dt,
.project-select-card dd {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
}

.project-select-card dt {
  color: var(--muted);
  font-weight: 700;
}

.project-select-card dd {
  color: var(--text);
  font-weight: 650;
  min-width: 0;
  overflow-wrap: anywhere;
}

.detail-body {
  display: grid;
  gap: 16px;
  padding: 16px;
}

.project-info-panel {
  display: grid;
  gap: 14px;
}

.back-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  font-size: 18px;
  line-height: 1;
}

.back-button:hover {
  background: var(--sidebar);
}

.project-info-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.project-info-edit label,
.project-info-edit-groups h3 {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.project-summary-identity {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.project-summary-identity h3,
.project-summary-identity p {
  margin: 0;
}

.project-summary-identity h3 {
  font-size: 20px;
  line-height: 1.25;
}

.project-summary-title-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
}

.project-summary-identity p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  margin-top: 5px;
}

.project-summary-statuses {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.summary-item {
  min-width: 0;
}

.summary-item.wide {
  grid-column: 1 / -1;
}

.summary-item span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.summary-item strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.45;
}

.project-info-edit-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding-top: 4px;
}

.project-info-edit-groups section {
  min-width: 0;
}

.project-info-edit-groups h3 {
  margin: 0 0 8px;
}

.project-info-edit {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 10px;
}

.project-info-edit label {
  display: grid;
  gap: 6px;
}

.project-info-edit input,
.project-info-edit select {
  width: 100%;
}

.status-multiselect {
  position: relative;
  min-width: 0;
}

.multi-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  text-align: left;
}

.multi-select-trigger[aria-expanded="true"] {
  border-color: var(--text);
  box-shadow: 0 0 0 3px rgba(53, 50, 43, 0.08);
}

.multi-select-trigger span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.multi-select-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  display: grid;
  gap: 3px;
  width: min(100%, 340px);
  max-height: 320px;
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 36px rgba(31, 29, 25, 0.16);
}

.multi-select-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 8px 9px;
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.multi-select-option:hover {
  background: var(--sidebar);
}

.multi-select-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.multi-select-check {
  display: inline-grid;
  place-items: center;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
}

.multi-select-option:has(input:checked) {
  background: var(--green-bg);
}

.multi-select-option input:checked + .multi-select-check {
  border-color: var(--green-text);
  background: var(--green-text);
}

.multi-select-option input:checked + .multi-select-check::after {
  color: #fff;
  content: "✓";
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.multi-select-done {
  width: 100%;
  margin-top: 5px;
  background: var(--text);
  color: #fff;
}

.project-info-edit-groups .project-session-row {
  grid-template-columns: minmax(170px, 0.95fr) minmax(170px, 1.15fr) repeat(3, minmax(150px, 0.85fr)) 38px;
}

.project-workspace {
  display: grid;
  gap: 24px;
  padding-top: 0;
}

.project-tab-workspace {
  display: grid;
}

.project-vendor-inquiry-row {
  cursor: pointer;
}

.project-vendor-inquiry-row:hover td {
  background: #f7f9fd;
}

.project-vendor-inquiry-detail {
  display: grid;
  min-width: 0;
  gap: 28px;
}

.project-vendor-inquiry-header {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  justify-items: start;
  gap: 8px;
}

.workspace .project-vendor-inquiry-back {
  position: absolute;
  left: -28px;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: start;
  width: 24px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  background: transparent;
  color: #526174;
  font-size: 20px;
  font-weight: 500;
  text-align: left;
  justify-self: start;
}

.workspace .project-vendor-inquiry-back:hover {
  color: #315fb5;
}

.project-vendor-inquiry-header h3 {
  grid-column: 1;
  min-width: 0;
  margin: 0;
  font-size: 20px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  outline: none;
}

.project-vendor-inquiry-header p {
  grid-column: 1;
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.project-vendor-inquiry-detail h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  font-size: 14px;
}

.project-vendor-inquiry-upload {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(220px, 380px) auto;
  align-items: end;
  gap: 12px 16px;
  max-width: 800px;
}

.project-vendor-inquiry-upload label {
  display: grid;
  min-width: 0;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.workspace .project-vendor-inquiry-upload :is(select, input) {
  width: 100%;
  min-width: 0;
  height: 40px;
}

.workspace .project-vendor-inquiry-upload input[type="file"] {
  padding: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 38px;
}

.project-vendor-inquiry-upload input::file-selector-button {
  height: 38px;
  padding: 0 12px;
  margin-right: 10px;
  border: 0;
  border-right: 1px solid var(--line-soft);
  background: #f5f7fa;
  color: #315fb5;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.workspace .project-vendor-inquiry-upload button[type="submit"] {
  height: 40px;
  background: #3f70cf;
  color: white;
  white-space: nowrap;
}

.workspace .project-vendor-inquiry-upload button[type="submit"]:hover:not(:disabled) {
  background: #315fb5;
}

.project-vendor-inquiry-upload-hint {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.project-vendor-inquiry-documents {
  min-width: 0;
  border-top: 1px solid var(--line-soft);
  padding-top: 24px;
}

.project-vendor-inquiry-files {
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-vendor-inquiry-file {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
}

.project-vendor-inquiry-file-icon {
  display: grid;
  place-items: center;
  height: 42px;
  border-radius: 4px;
  background: #f0f4fb;
  color: #315fb5;
  font-size: 10px;
  font-weight: 650;
}

.project-vendor-inquiry-file-info,
.project-vendor-inquiry-file-meta {
  display: grid;
  min-width: 0;
  gap: 6px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.project-vendor-inquiry-file-info {
  font-size: 13px;
}

.project-vendor-inquiry-file-info a {
  color: #315fb5;
  text-underline-offset: 3px;
}

.project-vendor-inquiry-file-meta {
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

.project-vendor-inquiry-files-empty {
  margin: 0;
  padding: 20px 0;
  color: var(--muted);
  font-size: 13px;
}

.project-vendor-inquiry-detail :is(button, a):focus-visible {
  outline: 2px solid #315fb5;
  outline-offset: 3px;
}

@media (max-width: 1340px) {
  /* Reserve room for the hanging back arrow without indenting only the title. */
  .project-vendor-inquiry-detail {
    padding-left: 20px;
  }
}

@media (max-width: 700px) {
  .project-vendor-inquiry-upload {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-vendor-inquiry-file {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 8px 12px;
  }

  .project-vendor-inquiry-file-meta {
    grid-column: 2;
    text-align: left;
  }
}

.venue-document-upload-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.venue-document-upload-heading > div {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.venue-document-attachment-list {
  display: grid;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.venue-document-attachment-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 9px 11px;
  border-top: 1px solid var(--line-soft);
}

.venue-document-attachment-item:first-child {
  border-top: 0;
}

.venue-document-attachment-item > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.venue-document-attachment-item.legacy {
  background: var(--sidebar);
}

.venue-document-attachment-name {
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.venue-document-attachment-name:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.venue-document-attachment-item small {
  color: var(--muted);
  font-size: 11px;
}

.venue-document-attachment-item .icon-button {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
}

.venue-document-attachment-empty {
  margin: 0;
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 12px;
}

.venue-document-dropzone {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 16px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: #fbfcfb;
  cursor: pointer;
  text-align: center;
  transition: border-color 120ms ease, background 120ms ease;
}

.venue-document-dropzone:hover,
.venue-document-dropzone.dragover {
  border-color: var(--text);
  background: var(--green-bg);
}

.venue-document-dropzone.uploading {
  cursor: wait;
  opacity: 0.72;
  pointer-events: none;
}

.venue-document-dropzone strong {
  font-size: 13px;
}

.venue-document-dropzone span {
  font-size: 11px;
}

.venue-document-upload-modal,
.venue-document-email-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(820px, 100%);
  max-height: min(780px, calc(100vh - 48px));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 18px 50px rgb(20 20 18 / 18%);
}

.venue-document-email-header,
.venue-document-email-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
}

.venue-document-email-header {
  border-bottom: 1px solid var(--line);
}

.venue-document-email-header span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.venue-document-email-header h3 {
  margin: 3px 0 0;
  font-size: 18px;
}

.venue-document-email-body {
  display: grid;
  gap: 14px;
  overflow: auto;
  padding: 16px;
}

.venue-document-upload-modal-body {
  display: grid;
  align-content: start;
  gap: 14px;
  overflow: auto;
  padding: 16px;
}

.gmail-connection-notice {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid #f1d58a;
  border-radius: 8px;
  background: var(--amber-bg);
  color: var(--amber-text);
}

.gmail-connection-notice strong {
  font-size: 13px;
}

.gmail-connection-notice span {
  font-size: 12px;
}

.gmail-connection-notice.connected {
  border-color: #b9dfc7;
  background: #edf9f1;
  color: #25633a;
}

.venue-document-email-fields {
  display: grid;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.venue-document-email-field-row,
.venue-document-email-sender {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  min-height: 46px;
  gap: 8px;
  padding: 0 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.venue-document-email-field-row + .venue-document-email-field-row,
.venue-document-email-sender {
  border-top: 1px solid var(--line-soft);
}

.venue-document-email-field-row input {
  width: 100%;
  min-width: 0;
  padding: 8px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 500;
  outline: none;
}

.venue-document-email-field-row input:focus {
  box-shadow: inset 0 -2px 0 #007aff;
}

.venue-document-email-sender strong {
  color: var(--text);
  font-weight: 500;
}

.venue-document-email-editor {
  width: 100%;
  min-height: 220px;
  padding: 2px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  line-height: 1.75;
  resize: vertical;
  outline: none;
}

.venue-document-email-editor:focus {
  box-shadow: inset 3px 0 0 #007aff;
}

.venue-document-email-attachments {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
}

.venue-document-email-attachments legend {
  padding: 0 5px;
  font-size: 12px;
  font-weight: 800;
}

.venue-document-email-attachments label {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.venue-document-email-attachments input {
  width: 16px;
  height: 16px;
}

.venue-document-email-attachments small {
  color: var(--muted);
}

.venue-document-email-actions {
  justify-content: flex-end;
  border-top: 1px solid var(--line);
}

.venue-document-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: #fff1f2;
  color: #9f1239;
}

.venue-document-status.downloaded {
  background: #eff6ff;
  color: #1d4ed8;
}

.venue-document-status.completed,
.venue-document-status.sent,
.venue-document-status.confirmed {
  background: #ecfdf3;
  color: #166534;
}

.venue-document-status.sent {
  background: #fff7ed;
  color: #c2410c;
}

.download-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 6px;
  background: var(--text);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.venue-file-editor {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: #fbfcfb;
}

.venue-file-list {
  display: grid;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.venue-file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 10px 12px;
  border-top: 1px solid var(--line-soft);
}

.venue-file-item:first-child {
  border-top: 0;
}

.venue-file-item > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.venue-file-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.venue-file-item strong,
.venue-file-item small {
  overflow-wrap: anywhere;
}

.venue-file-item small {
  color: var(--muted);
  font-size: 12px;
}

.project-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.subtab-button {
  border-color: var(--line);
  background: #fff;
  color: var(--muted);
}

.subtab-button.active {
  background: var(--text);
  color: #fff;
}

.workspace-panel {
  min-width: 0;
}

.cost-workspace {
  display: grid;
  gap: 14px;
}

.quotation-workspace,
.quotation-list {
  display: grid;
}

.quotation-page-panel.panel {
  display: grid;
  gap: 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.quotation-project-selector {
  min-width: min(360px, 100%);
}

.quotation-select-stage {
  display: grid;
}





.quotation-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}





.quotation-project-list th,
.quotation-project-list td {
  min-width: 0;
}

.quotation-project-list .clickable-row {
  cursor: pointer;
}



.quotation-project-list th:last-child,
.quotation-project-list td:last-child {
  width: 48px;
  min-width: 48px;
  padding-inline: 6px;
  text-align: center;
}

.quotation-list-action-cell {
  position: relative;
}

.quotation-name-rename-form {
  display: flex;
  align-items: center;
  gap: 6px;
}

.quotation-name-rename-form input {
  width: min(360px, 32vw);
  min-width: 180px;
  height: 34px;
  padding: 6px 9px;
  border: 1px solid var(--accent);
  border-radius: 5px;
  background: #fff;
  color: var(--text);
  font: inherit;
}

.quotation-name-rename-form .secondary-button {
  height: 34px;
  padding-inline: 10px;
  white-space: nowrap;
}

.quotation-list-tools {
  display: inline-flex;
}

.quotation-list-tools-button {
  display: inline-grid;
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
}

.quotation-list-tools-button:hover,
.quotation-list-tools-button[aria-expanded="true"] {
  background: var(--sidebar);
  color: var(--text);
}

.quotation-list-tools-menu {
  position: fixed;
  z-index: 1200;
  display: grid;
  min-width: 210px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
  text-align: left;
}

.quotation-list-tools-menu[hidden] {
  display: none;
}

.quotation-list-tools-menu button {
  width: 100%;
  text-align: left;
}

.quotation-list-tools-menu button + button {
  border-top: 1px solid var(--line);
}



.quotation-copy-dialog-backdrop {
  position: fixed;
  z-index: 1300;
  inset: 0;
  display: grid;
  padding: 24px;
  place-items: center;
  background: rgba(25, 25, 23, 0.42);
}

.quotation-copy-dialog {
  display: grid;
  width: min(520px, 100%);
  gap: 18px;
  padding: 22px;
  background: #fff;
}

.quotation-copy-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.quotation-copy-dialog-header h3,
.quotation-copy-dialog-header p {
  margin: 0;
}

.quotation-copy-dialog-header p {
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.5;
}

.quotation-copy-dialog-header > button {
  min-width: 32px;
  padding: 2px 8px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 24px;
}

.quotation-copy-dialog form,
.quotation-copy-dialog label {
  display: grid;
  gap: 9px;
}

.quotation-copy-dialog label {
  font-weight: 800;
}

.quotation-copy-dialog select {
  width: 100%;
}

.quotation-copy-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

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

.quotation-page-body {
  display: grid;
  gap: 14px;
  padding: 0 0 22px;
}

.quotation-workspace > .quotation-form {
  margin-inline: 0;
}

.quotation-result-summary {
  display: grid;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.quotation-result-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

.quotation-result-back-button {
  display: inline-grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

.quotation-result-back-button:hover {
  background: var(--sidebar);
}

.quotation-result-title {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  flex-wrap: wrap;
}

.quotation-result-title > strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 15px;
}

.quotation-result-title > .stage-pill {
  margin-left: auto;
}

.quotation-form {
  display: grid;
  border-bottom: 0;
}

.quotation-form-header,
.quotation-card-header,
.quotation-actions {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
}

.quotation-form-header label {
  flex: 1 1 260px;
}

.quotation-command-bar {
  top: 8px;
  z-index: 24;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.quotation-editor-toolbar {
  align-items: center;
}

.quotation-editor-toolbar .quotation-editor-context {
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
}

.quotation-editor-toolbar .quotation-result-summary {
  display: block;
}

.quotation-editor-toolbar .quotation-result-title {
  flex-wrap: nowrap;
}

.quotation-editor-toolbar .quotation-result-title h2 {
  flex: 0 0 auto;
}

.quotation-editor-toolbar .quotation-result-title > strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quotation-editor-toolbar .quotation-result-title > .stage-pill {
  flex: 0 0 auto;
}

.quotation-form-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.quotation-editor-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.quotation-editor-fieldset:disabled {
  opacity: 1;
}

.quotation-editor-fieldset:disabled input,
.quotation-editor-fieldset:disabled select,
.quotation-editor-fieldset:disabled button {
  color: inherit;
  opacity: 1;
}

.quotation-nav-button.review-cancel {
  border-color: #d8d9dc;
  background: #e8e9eb;
  color: #555b65;
}

.quotation-review-rejection-reason {
  max-width: 520px;
  padding: 8px 10px;
  border: 1px solid #efc2c2;
  border-radius: 6px;
  background: #fff3f3;
  color: #a43838;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.stage-pill.rejected {
  color: #a43838;
  background: #fff0f0;
}

.quotation-review-detail {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.workspace .quotation-review-heading {
  min-width: 0;
  padding-left: 42px;
}

.workspace .quotation-review-heading > div {
  min-width: 0;
}

.workspace .quotation-review-heading h2 {
  overflow-wrap: anywhere;
}



.personal-attendance-adjustment {
  margin-top: 8px;
  border-top: 1px solid var(--line);
}

.personal-attendance-adjustment .panel-header h3 {
  margin: 0;
  font-size: 15px;
}

.personal-flow-header > div {
  display: grid;
  gap: 6px;
}

.personal-flow-back {
  width: fit-content;
  margin-bottom: 4px;
}

.personal-overtime-field-hint {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
}

.comp-time-balance-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block: 1px solid var(--border);
  margin: 0 20px 12px;
}

.comp-time-balance-summary:empty {
  display: none;
}

.comp-time-balance-summary > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px 14px;
}

.comp-time-balance-summary small {
  color: var(--muted);
  font-size: 11px;
}

.comp-time-balance-summary strong {
  font-size: 14px;
}

.personal-overtime-table-scroll table {
  min-width: 820px;
}

.personal-record-tools-column,
.personal-record-tools-cell {
  position: sticky;
  right: 0;
  width: var(--table-tools-column-width);
  min-width: var(--table-tools-column-width);
  max-width: var(--table-tools-column-width);
  padding-inline: 6px !important;
  text-align: center;
}

.personal-record-tools-column {
  z-index: 2;
  background: #f5f5f6;
}

.personal-record-tools-cell {
  z-index: 1;
  overflow: visible;
  background: #fff;
}

.personal-record-tools-cell:has(.quotation-list-tools-button[aria-expanded="true"]) {
  z-index: 4;
}

.personal-leave-request-pending .personal-record-tools-cell {
  background: #fff8df;
}

.personal-leave-request-pending:hover .personal-record-tools-cell {
  background: #fff3c7;
}

.personal-leave-tools,
.personal-overtime-tools {
  display: inline-flex;
}

.personal-leave-tools .quotation-list-tools-menu button:disabled,
.personal-overtime-tools .quotation-list-tools-menu button:disabled {
  color: var(--muted);
  cursor: default;
}

.personal-payroll-table-scroll table {
  min-width: 1080px;
}

.personal-payroll-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}

.personal-payroll-summary > div {
  display: grid;
  gap: 4px;
}

.personal-payroll-summary small,
.personal-payroll-signature-preview small,
.payroll-signature-gate-note {
  color: var(--muted);
  font-size: 11px;
}

.personal-payroll-signature-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border-top: 1px solid var(--line);
}

.personal-payroll-signature-preview > div {
  display: grid;
  gap: 5px;
}

.personal-payroll-signature-preview img {
  width: min(180px, 40%);
  max-height: 72px;
  object-fit: contain;
}

.personal-payroll-signature-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 20px 20px;
}

@media (max-width: 700px) {
  .personal-center-page .panel-header {
    align-items: stretch;
    flex-direction: column;
  }

  .personal-center-page .panel-header > button:not(.personal-flow-back) {
    width: 100%;
  }

  .personal-payroll-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .comp-time-balance-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-inline: 14px;
  }

  .personal-payroll-signature-preview {
    align-items: flex-start;
    flex-direction: column;
  }

  .personal-payroll-signature-preview img {
    width: 100%;
  }

  .personal-payroll-signature-actions button {
    width: 100%;
  }
}

.quotation-review-detail > .quotation-result-back-button {
  position: absolute;
  top: 2px;
  left: 0;
}

.quotation-review-readonly {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-top: 12px;
}

.quotation-review-readonly .quotation-editor-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: auto;
  overscroll-behavior-inline: contain;
}

.quotation-review-readonly .quotation-action-spacer,
.quotation-review-readonly .quotation-row-actions {
  visibility: hidden;
}

.quotation-review-footer {
  display: flex;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  align-items: stretch;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
}

.quotation-review-totals {
  width: min(100%, 340px);
  flex: none;
  margin-left: auto;
}

.quotation-review-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

.quotation-review-table-scroll {
  margin-top: 14px;
}

@media (max-width: 980px) {
  .quotation-review-totals {
    width: min(100%, 340px);
  }
}

.quotation-form-tools .secondary-button {
  border-color: #dedbd4;
  background: #fff;
  font-size: 13px;
  font-weight: 750;
}

.quotation-form-tools #quotationSaveStatus {
  display: inline;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

.quotation-form-tools #quotationSaveStatus.ok {
  background: transparent;
  color: var(--green-text);
}

.quotation-form-tools #quotationSaveStatus.error {
  background: transparent;
  color: var(--red-text);
}

.quotation-mode-tabs {
  display: flex;
  align-items: center;
}

.quotation-mode-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 13px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #6d685f;
  font-size: 13px;
  font-weight: 800;
}

.quotation-mode-tab span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgb(255 255 255 / 70%);
  color: #777168;
  font-size: 11px;
}

.quotation-mode-tab.active {
  background: #fff;
  color: var(--text);
  box-shadow: 0 1px 5px rgb(32 31 28 / 9%);
}

.quotation-mode-tab.active span {
  background: var(--text);
  color: #fff;
}

.quotation-form-actions {
  display: flex;
  align-items: stretch;
  flex-direction: column;
  justify-content: flex-start;
  gap: 14px;
  min-height: 54px;
  padding-top: 2px;
  border-top: 0;
}

.quotation-form-navigation {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.quotation-live-totals {
  display: grid;
  justify-items: end;
  align-self: stretch;
  margin-left: auto;
  gap: 4px;
}

.quotation-live-totals > div {
  display: grid;
  align-items: baseline;
  justify-content: end;
  column-gap: 4px;
  min-width: 270px;
}

.quotation-live-totals .quotation-live-total-label,
.quotation-live-totals .quotation-live-total-currency {
  color: var(--muted);
  font-weight: 750;
}

.quotation-live-totals .quotation-live-total-label {
  text-align: right;
}

.quotation-live-totals .quotation-live-total-currency {
  text-align: left;
}

.quotation-live-totals strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  text-align: right;
}

.quotation-live-totals .quotation-live-grand-total strong {
  font-weight: 900;
}


.quotation-actions {
  min-height: 54px;
  padding-top: 12px;
  justify-content: flex-start;
}

.quotation-nav-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 6px;
  background: var(--text);
  color: #fff;
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
}

.quotation-nav-button:hover {
  background: #4b4943;
}

.quotation-editor-wrap {
  width: 100%;
  max-width: 100%;
  overflow: auto;
  scrollbar-gutter: stable;
}

.quotation-editor-grid {
  min-width: 1360px;
}



.quotation-editor-body {
  display: grid;
}

.quotation-editor-row {
  display: grid;
  grid-template-columns:
    34px minmax(280px, 390px) 310px 88px 62px
    70px 125px 140px minmax(110px, 1fr) 40px;
  align-items: stretch;
  min-width: 0;
}

.quotation-editor-header {
  position: sticky;
  top: 0;
  z-index: 12;
}

.quotation-hidden-draft-row {
  display: none !important;
}



.quotation-editor-row > div {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 4px 6px;
  border-bottom: 1px solid var(--line-soft);
  border-right: 0;
  line-height: 1.45;
  white-space: nowrap;
}

.quotation-editor-row > div:last-child {
  border-right: 0;
}

.quotation-editor-header > div {
  position: sticky;
  top: 0;
  z-index: 8;
}

.quotation-editor-row > div:nth-child(1),
.quotation-editor-row > div:nth-child(2) {
  position: sticky;
  z-index: 5;
}

.quotation-editor-row > div:nth-child(1) {
  left: 0;
}

.quotation-editor-row > div:nth-child(2) {
  left: 34px;
  box-shadow: 1px 0 0 rgb(32 31 28 / 7%);
}

.quotation-editor-grid-price .quotation-editor-row > div:nth-child(2) {
  left: 52px;
}

.quotation-editor-header > div:nth-child(1),
.quotation-editor-header > div:nth-child(2) {
  z-index: 10;
}

.quotation-editor-row input,
.quotation-editor-row select {
  width: 100%;
  height: 28px;
  min-height: 28px;
  padding: 3px 4px;
  border-color: transparent;
  border-radius: 5px;
  background: transparent;
  line-height: 1.35;
}

.quotation-editor-row input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.quotation-editor-row input[type="number"]::-webkit-inner-spin-button,
.quotation-editor-row input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
}

.quotation-editor-row input::placeholder {
  color: #9c988f;
}

.quotation-editor-row input:focus,
.quotation-editor-row select:focus {
  background: #fff;
  outline: 0;
}

.quotation-main-row > div:not(.quotation-row-actions) {
  font-weight: 850;
  border-right-color: rgb(32 31 28 / 6.5%);
}

.quotation-group-row > div:not(.quotation-row-actions) {
  font-weight: 800;
  border-right-color: rgb(32 31 28 / 6%);
}

.quotation-row-fill {
  grid-column: 3 / -2;
}

.quotation-editor-grid-price .quotation-row-fill {
  grid-column: 3 / -2;
}

.quotation-action-spacer,
.quotation-row-actions {
  background: #fff;
}

.quotation-main-row input,
.quotation-group-row input {
  font-weight: 800;
}

.quotation-main-row input {
  color: #4e4942;
  font-size: 15px;
}

.quotation-group-row input,
.quotation-item-row input,
.quotation-item-row select {
  background-clip: padding-box;
}

.quotation-engineering-combobox {
  position: relative;
  width: 100%;
  min-width: 0;
}

.quotation-engineering-menu {
  position: fixed;
  z-index: 1000;
  padding: 5px;
  overflow-y: auto;
  border: 1px solid #dcd8cf;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 30px rgb(32 31 28 / 16%);
}

.quotation-engineering-menu[hidden] {
  display: none;
}

.quotation-engineering-menu button {
  display: grid;
  gap: 2px;
  width: 100%;
  min-height: 42px;
  padding: 6px 9px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.quotation-engineering-menu button:hover,
.quotation-engineering-menu button.active {
  background: #edf4f3;
  color: #1e686f;
}

.quotation-engineering-menu strong {
  font-size: 13px;
  font-weight: 800;
}

.quotation-engineering-menu span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.quotation-engineering-empty {
  margin: 0;
  padding: 12px 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.quotation-material-summary,
.quotation-material-readonly {
  display: block;
  width: 100%;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quotation-material-summary {
  min-height: 28px;
  padding: 3px 4px;
  border: 0;
  border-radius: 5px;
  background: transparent;
}

.quotation-material-summary:hover {
  background: #f0f5f4;
  color: #216c73;
}

.quotation-readonly-value,
.quotation-readonly-dimensions span {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quotation-readonly-value {
  font-weight: inherit;
}

.quotation-readonly-dimensions,
.quotation-readonly-cell {
  color: #5f5b54;
  font-variant-numeric: tabular-nums;
}

.quotation-readonly-dimensions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr) 14px minmax(0, 1fr);
  column-gap: 0;
  justify-content: flex-start;
  text-align: left;
}

.quotation-readonly-dimensions .quotation-readonly-dimension-value {
  text-align: right;
}

.quotation-readonly-dimensions i {
  display: grid;
  place-items: center;
  color: #8d887e;
  font-style: normal;
}

.quotation-readonly-number {
  justify-content: flex-end;
  text-align: right;
}

.quotation-readonly-cell:not(.quotation-readonly-number) {
  justify-content: center;
  text-align: center;
}

.quotation-editor-grid-price .quotation-money-input input {
  flex: 1 1 0;
  min-width: 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  cursor: text;
  font-weight: 750;
  text-align: right;
}

.quotation-editor-grid-price .quotation-money-input input:hover {
  border-color: transparent;
  background: transparent;
}

.quotation-editor-grid-price .quotation-money-input input:focus {
  background: #fff;
}

.quotation-editor-grid-price .quotation-money-input {
  gap: 4px;
}

.quotation-editor-grid-price .quotation-accounting-money {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  width: 100%;
}

.quotation-accounting-money .quotation-money-currency {
  justify-self: start;
}

.quotation-accounting-money input,
.quotation-accounting-money strong {
  justify-self: stretch;
  text-align: right;
}

.quotation-money-currency {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.quotation-material-editor {
  display: none;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  width: 100%;
  min-width: 0;
  min-height: 32px;
  padding: 2px 4px;
  border: 1px solid #d8d4cc;
  border-radius: 6px;
  background: #fff;
  white-space: normal;
}

.quotation-material-editor:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgb(53 125 183 / 10%);
}

.quotation-material-active .quotation-material-summary {
  display: none;
}

.quotation-material-active .quotation-material-editor {
  display: flex;
}

.quotation-material-prefix {
  flex: 0 1 132px;
  min-width: 94px;
  max-width: 160px;
  border: 0 !important;
  border-right: 1px solid #e5e1d9 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.quotation-material-token-list {
  display: contents;
}

.quotation-material-token {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  min-height: 25px;
  padding: 2px 4px 2px 7px;
  border: 1px solid #cfe0de;
  border-radius: 999px;
  background: #edf4f3;
  color: #245f65;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}

.quotation-material-token.custom {
  border-color: #dfd4bd;
  background: #faf4e8;
  color: #755f36;
}

.quotation-material-token small {
  color: inherit;
  font-size: 10px;
  font-weight: 650;
  opacity: 0.78;
}

.quotation-material-remove {
  width: 20px;
  height: 20px;
  min-height: 20px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: 15px;
  line-height: 1;
}

.quotation-material-remove:hover {
  background: rgb(33 108 115 / 11%);
}

.quotation-material-match-status {
  width: auto !important;
  height: 20px !important;
  min-height: 20px !important;
  padding: 0 6px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #eadbbd !important;
  color: #755f36 !important;
  font-size: 9px !important;
  font-weight: 850 !important;
  line-height: 20px !important;
}

.quotation-material-match-status:hover,
.quotation-material-match-status[aria-expanded="true"] {
  background: #dfcca5 !important;
}

.quotation-material-combobox {
  position: relative;
  flex: 1 1 126px;
  min-width: 108px;
}

.quotation-material-combobox input {
  min-width: 0;
  border: 0 !important;
  background: transparent !important;
  color: #216c73;
  font-weight: 800;
  box-shadow: none !important;
}

.quotation-material-menu {
  position: fixed;
  z-index: 1000;
  padding: 5px;
  overflow-y: auto;
  border: 1px solid #dcd8cf;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 30px rgb(32 31 28 / 16%);
}

.quotation-material-menu[hidden] {
  display: none;
}

.quotation-material-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 38px;
  padding: 6px 9px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.quotation-material-menu button:hover,
.quotation-material-menu button.active {
  background: #edf4f3;
  color: #1e686f;
}

.quotation-material-menu strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quotation-material-menu span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.quotation-material-menu .quotation-material-custom-option {
  border-top: 1px solid var(--line-soft);
  color: #755f36;
}

.quotation-material-cost-popover {
  position: fixed;
  z-index: 1010;
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #d8d4cc;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 30px rgb(32 31 28 / 18%);
}

.quotation-material-cost-popover > strong {
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quotation-material-cost-popover label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

.quotation-material-cost-popover label > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
}

.quotation-material-cost-popover input {
  width: 100%;
  height: 30px;
  min-height: 30px;
  padding: 4px 7px;
  border: 1px solid #d8d4cc;
  border-radius: 5px;
  background: #fff;
  text-align: right;
}

.quotation-material-cost-popover input:focus {
  border-color: var(--accent);
  outline: 0;
  box-shadow: 0 0 0 2px rgb(53 125 183 / 10%);
}

.quotation-material-cost-popover small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.quotation-material-cost-popover p {
  margin: 0;
  color: #8b7450;
  font-size: 10px;
  line-height: 1.45;
}

.quotation-composite-cost {
  justify-content: flex-end;
  text-align: right;
}

.quotation-composite-cost strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.quotation-editor-grid-cost .quotation-cost-unit-price-input {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  width: 100%;
}

.quotation-editor-grid-cost .quotation-cost-unit-price-input input {
  min-width: 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  font-weight: 750;
  text-align: right;
}

.quotation-line-card {
  display: grid;
}

.quotation-row-grip {
  color: #b4b0a8;
  cursor: grab;
  font-size: 17px;
  line-height: 1;
  letter-spacing: -4px;
  transform: rotate(90deg);
  user-select: none;
}

.quotation-row-grip:active {
  cursor: grabbing;
}

.quotation-dragging {
  opacity: 0.42;
}

.quotation-drop-before {
  box-shadow: inset 0 2px 0 var(--accent);
}

.quotation-drop-after {
  box-shadow: inset 0 -2px 0 var(--accent);
}

.quotation-size-inputs {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 10px minmax(0, 1fr) 10px minmax(0, 1fr) 28px;
  gap: 2px;
  font-variant-numeric: tabular-nums;
}

.quotation-size-inputs label {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  align-items: center;
  min-width: 0;
}

.quotation-size-inputs label > span,
.quotation-size-inputs > i {
  color: #aaa59c;
  font-size: 10px;
  font-style: normal;
  font-weight: 750;
  text-align: center;
}

.quotation-size-inputs input {
  padding-right: 2px;
  padding-left: 2px;
  text-align: right;
}

.quotation-face-config-button {
  display: inline-grid;
  place-items: center;
  width: 26px !important;
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 5px !important;
  background: #f1f0ec !important;
  color: #aaa59c;
  font-size: 14px;
  cursor: pointer;
}

.quotation-face-config-button.available {
  border-color: #b8d2d1 !important;
  background: #edf5f4 !important;
  color: #246d73;
}

.quotation-face-config-button.configured {
  border-color: #5f9c9b !important;
  background: #397f82 !important;
  color: #fff;
}

.quotation-face-config-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.quotation-unit-input select {
  text-align: center;
  text-align-last: center;
}

.quotation-quantity-input input,
.quotation-money-input input {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.quotation-quantity-input {
  justify-content: flex-end;
}

.quotation-editor-header > div {
  justify-content: center;
  text-align: center;
}

.quotation-editor-header > .quotation-calc-header,
.quotation-editor-header > .quotation-unit-header,
.quotation-editor-header > .quotation-quantity-header,
.quotation-editor-header > .quotation-money-header,
.quotation-editor-header > .quotation-note-header {
  justify-content: center;
  text-align: center;
}

.quotation-calc-preview,
.quotation-line-total-preview {
  padding-right: 10px !important;
  font-variant-numeric: tabular-nums;
}

.quotation-line-total-preview.quotation-adjusted-total {
  color: #c9342f;
  font-weight: 900;
}

.quotation-price-tools-button {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

.quotation-price-tools-button:hover,
.quotation-price-tools-button[aria-expanded="true"] {
  background: #efeee9;
  color: var(--text);
}

.quotation-discount-popover {
  position: fixed;
  z-index: 10050;
  display: grid;
  padding: 6px;
  border: 1px solid #dedbd4;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 30px rgb(32 31 28 / 18%);
}

.quotation-discount-popover {
  gap: 10px;
  padding: 14px;
}

.quotation-discount-popover > strong {
  font-size: 15px;
}

.quotation-discount-popover > p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.quotation-discount-popover label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.quotation-discount-popover input {
  width: 100%;
  height: 34px;
  min-height: 34px;
  padding: 5px 8px;
  border: 1px solid #d8d4cc;
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-variant-numeric: tabular-nums;
}

.quotation-discount-popover input:focus {
  border-color: var(--accent);
  outline: 0;
  box-shadow: 0 0 0 2px rgb(53 125 183 / 10%);
}

.quotation-discount-popover > small {
  min-height: 16px;
  color: #b42318;
  font-size: 11px;
}

.quotation-discount-popover > div {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}

.quotation-discount-popover > div button {
  width: auto;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #dedbd4;
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
}

.quotation-discount-popover > div button.primary {
  border-color: #34322d;
  background: #34322d;
  color: #fff;
}

.quotation-calc-preview {
  flex-direction: column;
  align-items: flex-end !important;
  justify-content: center !important;
  line-height: 1.15 !important;
}

.quotation-calc-preview small {
  margin-top: 2px;
  color: #397f82;
  font-size: 9px;
  font-weight: 750;
}

.quotation-face-modal {
  width: min(900px, 100%);
  max-height: min(720px, calc(100vh - 48px));
}

.quotation-face-modal .ledger-modal-header p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.quotation-face-modal-body {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr);
  gap: 20px;
  padding: 20px;
  overflow-y: auto;
}

.quotation-cuboid-panel,
.quotation-face-controls {
  min-width: 0;
  border: 1px solid #e3e0d9;
  border-radius: 10px;
  background: #fbfbf8;
}

.quotation-cuboid-panel {
  display: grid;
  justify-items: center;
  padding: 16px;
}

.quotation-cuboid-panel > strong {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.quotation-cuboid-panel > small {
  margin-top: 9px;
  color: var(--muted);
  font-size: 10px;
  text-align: center;
}

.quotation-cuboid-stage {
  position: relative;
  width: 100%;
  height: 260px;
  perspective: 760px;
  overflow: hidden;
}

.quotation-cuboid {
  --cube-w: 150px;
  --cube-h: 120px;
  --cube-d: 90px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform: rotateX(-20deg) rotateY(34deg);
  transform-style: preserve-3d;
  transition: transform 240ms ease;
}

.quotation-cuboid.flipped {
  transform: rotateX(-20deg) rotateY(214deg);
}

.quotation-cuboid-face {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: var(--cube-w);
  height: var(--cube-h);
  padding: 0;
  border: 1px solid #a8a39a;
  border-radius: 2px;
  background: rgb(232 230 223 / 82%);
  color: #6d685f;
  font-size: 12px;
  font-weight: 850;
  backface-visibility: hidden;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.quotation-cuboid-face.selected {
  border-color: #246d73;
  background: rgb(74 151 153 / 84%);
  color: #fff;
}

.quotation-cuboid-face.face-front {
  transform: translate(-50%, -50%) translateZ(calc(var(--cube-d) / 2));
}

.quotation-cuboid-face.face-back {
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(calc(var(--cube-d) / 2));
}

.quotation-cuboid-face.face-left,
.quotation-cuboid-face.face-right {
  width: var(--cube-d);
  height: var(--cube-h);
}

.quotation-cuboid-face.face-left {
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(calc(var(--cube-w) / 2));
}

.quotation-cuboid-face.face-right {
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(calc(var(--cube-w) / 2));
}

.quotation-cuboid-face.face-top,
.quotation-cuboid-face.face-bottom {
  width: var(--cube-w);
  height: var(--cube-d);
}

.quotation-cuboid-face.face-top {
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(calc(var(--cube-h) / 2));
}

.quotation-cuboid-face.face-bottom {
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(calc(var(--cube-h) / 2));
}

.quotation-cuboid-view-button {
  width: auto;
  min-height: 30px;
  padding: 0 11px;
  font-size: 11px;
}

.quotation-face-controls {
  padding: 16px;
}

.quotation-face-control-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.quotation-face-control-heading p,
.quotation-face-solid-note {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.quotation-face-presets {
  display: flex;
  flex-shrink: 0;
  gap: 6px;
}

.quotation-face-presets button {
  width: auto;
  min-height: 30px;
  padding: 0 9px;
  font-size: 11px;
}

.quotation-face-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}

.quotation-face-options label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 52px;
  padding: 8px 10px;
  border: 1px solid #dedbd4;
  border-radius: 7px;
  background: #fff;
  cursor: pointer;
}

.quotation-face-options label:has(input:checked) {
  border-color: #7eb0af;
  background: #edf5f4;
}

.quotation-face-options input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #397f82;
}

.quotation-face-options span {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: center;
  min-width: 0;
  font-size: 12px;
  font-weight: 750;
}

.quotation-face-options b {
  color: #397f82;
}

.quotation-face-options small {
  grid-column: 2;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}

.quotation-face-summary {
  min-height: 54px;
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 7px;
  background: #f0efeb;
  color: var(--text);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.55;
}

.quotation-face-solid-note {
  margin-top: 9px;
}

.quotation-face-modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px 18px;
  border-top: 1px solid var(--line);
}

.quotation-face-modal-actions .form-message {
  margin-right: auto;
}

.quotation-face-modal-actions button {
  width: auto;
}

.quotation-note-header,
.quotation-note-input {
  justify-content: flex-start;
}



.quotation-line-total-preview {
  font-weight: 850;
}

.quotation-line-total-preview strong {
  font: inherit;
}



.quotation-inline-actions {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 4px 8px 4px 52px;
  border-bottom: 1px solid #e7e5df;
  background: #fafaf8;
}

.quotation-inline-actions.active {
  display: flex;
}

.quotation-inline-button {
  height: 28px;
  min-height: 28px;
  padding: 0 9px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #397b82;
  font-size: 13px;
  font-weight: 800;
}

.quotation-inline-button:hover {
  background: #e9f2f1;
}

.quotation-inline-button.primary {
  color: #216c73;
}

.quotation-add-main-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.quotation-add-main-row span {
  color: var(--muted);
  font-size: 12px;
}

.quotation-row-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  min-height: 24px;
  padding: 0 6px;
  border-radius: 999px;
  background: #f3f2ee;
  color: #5f5a52;
  font-weight: 800;
  font-size: 12px;
}

.quotation-calc-preview,
.quotation-line-total-preview {
  justify-content: flex-end;
  color: var(--muted);
  text-align: right;
}

.quotation-row-actions {
  display: grid;
  grid-template-columns: 26px;
  align-items: center;
  justify-content: end;
  gap: 8px;
  padding-right: 10px;
  padding-left: 10px;
  border-bottom-color: transparent;
}

.quotation-row-actions .secondary-button {
  width: 108px;
  height: 30px;
  padding: 0;
  border-color: #e7e5df;
  background: #fff;
  color: var(--text);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgb(32 31 28 / 5%);
}

.quotation-row-actions .secondary-button:hover {
  background: var(--sidebar);
}

.quotation-row-actions .icon-button {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  min-height: 26px;
  padding: 0;
  border-color: transparent;
  border-radius: 4px;
  color: var(--muted);
  font-size: 0;
  line-height: 1;
  background: transparent;
}

.quotation-row-actions .icon-button svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.quotation-row-actions .icon-button:only-child {
  grid-column: 1;
}

.quotation-item-row .quotation-row-actions {
  grid-template-columns: 26px;
  gap: 3px;
  padding: 3px 5px;
}

.quotation-main-row .quotation-row-actions,
.quotation-group-row .quotation-row-actions {
  grid-template-columns: 26px;
  gap: 0;
  padding: 3px 5px;
}





.quotation-main-row .quotation-row-actions .icon-button:only-child,
.quotation-group-row .quotation-row-actions .icon-button:only-child {
  grid-column: 1;
}

.quotation-row-actions .icon-button:hover {
  color: var(--text);
}

.quotation-card {
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}

.quotation-card-header strong,
.quotation-card-header span {
  display: block;
}

.quotation-card-header span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
}

.quotation-template-preview {
  display: grid;
  gap: 16px;
}

.quotation-pdf-preview {
  height: min(76vh, 920px);
}

.quotation-pdf-preview iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.quotation-pdf-preview-message {
  display: grid;
  min-height: min(76vh, 880px);
  margin: 0;
  padding: 32px;
  place-items: center;
  color: var(--muted);
  text-align: center;
}

.quotation-template-sheet {
  overflow-x: auto;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 10px 24px rgb(32 31 28 / 5%);
}

.quotation-template-sheet-title {
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.quotation-template-header-grid {
  display: grid;
  grid-template-columns: 90px minmax(240px, 1fr) 120px minmax(180px, 0.65fr);
  gap: 6px 10px;
  min-width: 920px;
  margin-bottom: 12px;
  font-size: 12px;
  line-height: 1.45;
}

.quotation-template-header-grid span {
  color: var(--muted);
  font-weight: 800;
}

.quotation-template-header-grid strong {
  min-width: 0;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.quotation-template-table {
  min-width: 920px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12px;
}

.quotation-template-table th,
.quotation-template-table td {
  padding: 7px 6px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}

.quotation-template-table th {
  background: #f7f7f4;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-align: left;
}

.quotation-template-table th:nth-child(1),
.quotation-template-table td:nth-child(1) {
  width: 48px;
}

.quotation-template-table th:nth-child(2),
.quotation-template-table td:nth-child(2) {
  width: 330px;
}

.quotation-template-table th:nth-child(8),
.quotation-template-table td:nth-child(8),
.quotation-template-table th:nth-child(9),
.quotation-template-table td:nth-child(9) {
  width: 116px;
  text-align: right;
}

.quotation-template-group-row td {
  background: #f7f6f2;
  font-weight: 850;
}

.quotation-template-totals {
  display: grid;
  grid-template-columns: 1fr minmax(120px, auto);
  gap: 7px 12px;
  width: min(280px, 100%);
  margin-top: 14px;
  margin-left: auto;
  font-size: 13px;
}

.quotation-template-totals span {
  color: var(--muted);
  font-weight: 800;
}

.quotation-template-totals strong {
  text-align: right;
}

.cost-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}

.cost-ledger-form {
  padding: 14px 16px 16px;
  border-bottom: 0;
}

.cost-submission-history {
  margin: 28px 16px 16px;
  padding-top: 0;
  border-top: 0;
}

.cost-submission-history h3 {
  margin: 0 0 12px;
}

.cost-ledger-form > .reimbursement-subtabs {
  margin-bottom: 4px;
}

.reimbursement-records-panel {
  min-width: 0;
}

.reimbursement-tab-hidden {
  display: none !important;
}

.cost-ledger-form > .reimbursement-records-panel,
.cost-ledger-form > .petty-cash-wallet-create[data-reimbursement-panel] {
  margin-top: 4px;
}

.cost-submission-history.reimbursement-records-panel {
  margin: 4px 0 0;
  padding-top: 0;
  border-top: 0;
}

.reimbursement-records-panel h3,
.petty-cash-wallet-create[data-reimbursement-panel] h3 {
  margin: 0 0 12px;
}

.summary-eyebrow {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgb(20 20 18 / 42%);
}

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

.ledger-modal {
  width: min(760px, 100%);
  max-height: min(680px, calc(100vh - 48px));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 50px rgb(20 20 18 / 18%);
}

.ledger-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 18px 12px;
  border-bottom: 1px solid var(--line);
}

.ledger-modal-header h3 {
  margin: 0;
  font-size: 18px;
}

.approval-modal-header-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
}

.approval-modal-header-actions .approval-modal-history-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  height: 36px;
  padding: 0 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 720;
  line-height: 1;
}

.approval-modal-header-actions .approval-modal-history-button svg {
  width: 16px;
  height: 16px;
}

.approval-modal-header-actions .approval-modal-history-button:hover {
  border-color: transparent;
  background: #eaf0fb;
  color: #315fb5;
}

.approval-modal-header-actions .approval-modal-history-button:focus-visible {
  outline: 2px solid rgb(63 112 207 / 34%);
  outline-offset: 2px;
}

.approval-modal-header-actions .approval-modal-history-button[aria-pressed="true"] {
  background: #eaf0fb;
  color: #315fb5;
}

.ledger-modal.is-showing-item-history {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.approval-item-history-view {
  min-height: 0;
  padding: 24px;
  overflow-y: auto;
  outline: none;
}

.approval-item-history-heading {
  padding-bottom: 18px;
  border-bottom: 1px solid #e6ebf3;
}

.approval-item-history-heading > span {
  color: #3f70cf;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
}

.approval-item-history-heading h4 {
  margin: 5px 0 4px;
  color: var(--text);
  font-size: 20px;
}

.approval-item-history-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.approval-item-history-timeline {
  display: grid;
  max-width: 620px;
  margin: 0;
  padding: 22px 0 6px;
  list-style: none;
}

.approval-item-history-timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  min-height: 74px;
}

.approval-item-history-timeline li:not(:last-child)::after {
  position: absolute;
  top: 18px;
  bottom: -2px;
  left: 6px;
  width: 1px;
  background: #dbe3f0;
  content: "";
}

.approval-item-history-marker {
  position: relative;
  z-index: 1;
  width: 13px;
  height: 13px;
  margin-top: 3px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #3f70cf;
  box-shadow: 0 0 0 1px #8eabe2;
}

.approval-item-history-timeline li.is-pending .approval-item-history-marker {
  background: #e8a12b;
  box-shadow: 0 0 0 1px #e6bb72;
}

.approval-item-history-timeline li > div {
  display: grid;
  align-content: start;
  gap: 4px;
  padding-bottom: 20px;
}

.approval-item-history-timeline strong {
  color: var(--text);
  font-size: 14px;
}

.approval-item-history-timeline li > div > span {
  color: var(--muted);
  font-size: 12px;
}

.approval-item-history-timeline p {
  margin: 3px 0 0;
  padding: 9px 11px;
  border-left: 2px solid #dbe3f0;
  background: #f7f9fc;
  color: #4f5968;
  font-size: 13px;
  line-height: 1.55;
}

@media (max-width: 640px) {
  .approval-item-history-view {
    padding: 20px 18px;
  }
}

.purchase-payment-page {
  min-width: 0;
}

.finance-page-header,
.reimbursement-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.finance-page-header {
  padding: 14px 16px 16px;
}

.finance-page-header h2,
.finance-page-header p,
.reimbursement-page-header h2,
.reimbursement-page-header p {
  margin: 0;
}

.finance-page-header h2,
.reimbursement-page-header h2 {
  font-size: 18px;
}

.finance-page-header p,
.reimbursement-page-header p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
}

.cost-ledger-form .reimbursement-page-header {
  margin: -14px -16px 0;
  padding: 14px 16px 16px;
}

.purchase-payment-table {
  min-width: 980px;
}

.vendor-payment-table {
  min-width: 920px;
}

.purchase-payment-modal {
  max-height: min(760px, calc(100vh - 48px));
  overflow: auto;
}

.purchase-payment-modal-body {
  padding: 18px;
}

.purchase-payment-request {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--line);
}

.purchase-payment-request > div {
  min-width: 0;
  padding: 12px;
  background: #fff;
}

.purchase-payment-request span,
.purchase-payment-request strong {
  display: block;
  overflow-wrap: anywhere;
}

.purchase-payment-request span {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 12px;
}

.purchase-payment-request strong {
  font-size: 14px;
}

.purchase-payment-request .purchase-payment-detail-note {
  grid-column: 1 / -1;
}

.purchase-payment-request .payment-correction-history {
  grid-column: 1 / -1;
}

.payment-correction-history-item {
  display: grid;
  gap: 4px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}

.payment-correction-history-item:first-of-type {
  border-top: 0;
}

.payment-correction-history-item small {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.purchase-payment-fields {
  margin-top: 18px;
}

.purchase-payment-actions {
  align-items: center;
  margin-top: 18px;
}

@media (max-width: 640px) {
  .finance-page-header,
  .reimbursement-page-header {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .finance-page-header .status-pill,
  .reimbursement-page-header .status-pill {
    align-self: flex-start;
  }

  .purchase-payment-request,
  .purchase-payment-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .purchase-payment-fields .span-2 {
    grid-column: auto;
  }

  .purchase-payment-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Keep project session cards as content cards instead of inheriting primary button sizing. */
.workspace .entry-session-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  margin-top: 0;
}

.workspace .entry-session-card,
.workspace .entry-session-card:hover {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  text-align: left;
  white-space: normal;
}

.workspace .entry-session-card:hover {
  border-color: #9aa3af;
  box-shadow: 0 8px 24px rgb(15 23 42 / 8%);
}

.workspace .entry-session-card dl,
.workspace .entry-session-card dd {
  color: var(--text);
}

.workspace .entry-session-card-statuses {
  flex-wrap: wrap;
}

.workspace .entry-session-card {
  font-size: 13px;
  font-weight: 500;
}

.workspace .entry-session-card-title span {
  font-size: 12px;
  font-weight: 600;
}

.workspace .entry-session-card-title strong {
  font-size: 14px;
  font-weight: 750;
  line-height: 1.4;
}

.workspace .entry-session-card dt,
.workspace .entry-session-card-counts span,
.workspace .entry-session-card-statuses {
  font-size: 11px;
}

.workspace .entry-session-card dd {
  font-size: 13px;
  font-weight: 650;
  line-height: 1.45;
}

/* Match the entry-session detail typography to the rest of the project workspace. */
.workspace .entry-session-workspace {
  font-size: 13px;
}

.workspace .entry-session-header > div > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.workspace .entry-session-header h2 {
  font-size: 14px;
  font-weight: 750;
  line-height: 1.4;
}

.workspace .entry-session-header p {
  font-size: 12px;
  line-height: 1.5;
}

/* Keep the selected-session controls to two compact rows. */
.workspace .entry-session-command-bar {
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}

.workspace .entry-session-command-bar .entry-session-header {
  justify-content: flex-start;
  gap: 12px;
  padding: 0 0 12px;
  border-bottom: 0;
}

.workspace .acceptance-session-workspace {
  padding: 12px 24px 24px;
}

.workspace .entry-session-command-bar .acceptance-session-header {
  justify-content: space-between;
  padding-bottom: 10px;
}

.acceptance-session-header .project-closeout-checklist {
  flex: 0 0 auto;
  margin: 0 0 0 auto;
}

.acceptance-session-header .project-closeout-checklist.is-loading {
  min-height: 0;
  padding: 0;
}

.acceptance-session-header .project-closeout-checklist.is-loading p {
  margin: 0;
  font-size: 11px;
}

.acceptance-session-workspace .entry-session-command-bar {
  margin-bottom: 12px;
}

.workspace .entry-session-info-line {
  display: flex;
  flex: 1 1 auto;
  align-items: baseline;
  min-width: 0;
  gap: 8px;
}

.workspace .entry-session-info-line strong {
  flex: 0 0 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.4;
  white-space: nowrap;
}

.workspace .entry-session-command-bar .entry-session-info-line span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace .entry-session-command-bar .entry-workspace-tabs {
  margin: 0;
}

@media (max-width: 760px) {
  .workspace .acceptance-session-workspace {
    padding: 10px 16px 20px;
  }

  .workspace .entry-session-command-bar .acceptance-session-header {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .acceptance-session-header .entry-session-info-line {
    flex: 1 1 calc(100% - 46px);
  }

  .acceptance-session-header .project-closeout-checklist {
    flex: 0 0 calc(100% - 46px);
    margin-left: 46px;
  }

  .acceptance-session-header .project-closeout-checklist-summary {
    margin-left: 0;
  }

  .workspace .entry-session-info-line {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .workspace .entry-session-info-line strong {
    white-space: normal;
  }

  .workspace .entry-session-command-bar .entry-session-info-line span {
    flex-basis: auto;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }
}

.workspace .entry-workspace-tabs .quotation-mode-tab {
  font-size: 12px;
}

.workspace .entry-document-workspace h3,
.workspace .entry-email-editor .venue-document-email-header h3 {
  font-size: 14px;
  font-weight: 750;
  line-height: 1.4;
}

.workspace .entry-document-workspace p,
.workspace .entry-email-editor,
.workspace .entry-email-loading {
  font-size: 12px;
  line-height: 1.5;
}

.workspace .entry-arrangement-form input,
.workspace .entry-arrangement-form select,
.workspace .entry-arrangement-form button,
.workspace .entry-document-workspace button,
.workspace .entry-email-editor input,
.workspace .entry-email-editor textarea,
.workspace .entry-email-editor button {
  font-size: 12px;
}

.workspace .entry-document-workspace h4 {
  font-size: 13px;
  font-weight: 700;
}

.workspace .entry-workspace-empty {
  font-size: 12px;
}

#costEntryWorkspace,
#financialRequisitionWorkspace,
#taobaoRequisitionWorkspace,
#pettyCashWorkspace,
#materialRestockWorkspace,
#companyOperatingWorkspace {
  min-width: 0;
}

.company-operating-page {
  display: block;
  width: auto;
}

.company-operating-page > .panel {
  width: 100%;
  min-width: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#companyOperatingWorkspace .company-operating-page-header {
  margin-bottom: 22px;
}

#companyOperatingWorkspace .company-operating-subtabs {
  margin: 0;
}

#companyOperatingWorkspace .company-operating-list-panel,
#companyOperatingWorkspace .company-operating-create-panel {
  min-width: 0;
}

#companyOperatingWorkspace .company-operating-list-panel {
  margin: 4px 0 0;
}

#companyOperatingWorkspace .company-operating-create-panel {
  margin-top: 18px;
}

#companyOperatingWorkspace .company-operating-records-table-wrap {
  min-width: 0;
  overflow-x: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#companyOperatingWorkspace .company-operating-table {
  width: 100%;
  min-width: 820px;
  table-layout: fixed;
}

#companyOperatingWorkspace .company-operating-table th,
#companyOperatingWorkspace .company-operating-table td {
  min-width: 0;
}

#companyOperatingWorkspace .company-operating-table th {
  height: 40px;
  padding-block: 8px;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: #66676b;
  font-size: 12px;
  font-weight: 760;
  white-space: nowrap;
}

#companyOperatingWorkspace .company-operating-table tbody tr:first-child td {
  border-top: 0;
}

#companyOperatingWorkspace .company-operating-record-row td {
  height: 68px;
  padding-block: 9px;
  vertical-align: middle;
}

#companyOperatingWorkspace .company-operating-record-title strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#companyOperatingWorkspace .company-operating-record-row .table-subtext {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: #818288;
  font-size: 11px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#companyOperatingWorkspace .company-operating-records-amount {
  font-variant-numeric: tabular-nums;
  font-weight: 760;
  text-align: right;
  white-space: nowrap;
}

#companyOperatingWorkspace .company-operating-record-date {
  white-space: nowrap;
}

#companyOperatingWorkspace .company-operating-table th:nth-child(1),
#companyOperatingWorkspace .company-operating-table td:nth-child(1) { width: 30%; }
#companyOperatingWorkspace .company-operating-table th:nth-child(2),
#companyOperatingWorkspace .company-operating-table td:nth-child(2) { width: 17%; }
#companyOperatingWorkspace .company-operating-table th:nth-child(3),
#companyOperatingWorkspace .company-operating-table td:nth-child(3) { width: 15%; }
#companyOperatingWorkspace .company-operating-table th:nth-child(4),
#companyOperatingWorkspace .company-operating-table td:nth-child(4) { width: 13%; }
#companyOperatingWorkspace .company-operating-table th:nth-child(5),
#companyOperatingWorkspace .company-operating-table td:nth-child(5) { width: 20%; }

#companyOperatingWorkspace .company-operating-table :is(th, td):not(:first-child) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#companyOperatingWorkspace #companyOperatingExpensePagination {
  padding: 14px 2px 4px;
}

#companyOperatingWorkspace .company-operating-form {
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 0;
  border: 0;
}

#companyOperatingWorkspace .company-operating-step {
  display: grid;
  grid-template-columns: minmax(190px, 230px) minmax(0, 1fr);
  gap: 32px;
  padding: 26px 2px;
  border-bottom: 1px solid var(--line-soft);
}

#companyOperatingWorkspace .company-operating-step:first-child {
  padding-top: 8px;
}

#companyOperatingWorkspace .company-operating-step-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

#companyOperatingWorkspace .company-operating-step-number {
  flex: 0 0 auto;
  padding-top: 2px;
  color: #3f70cf;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
}

#companyOperatingWorkspace .company-operating-step-header h3,
#companyOperatingWorkspace .company-operating-step-header p {
  margin: 0;
}

#companyOperatingWorkspace .company-operating-step-header h3 {
  color: var(--text);
  font-size: 15px;
  line-height: 1.4;
}

#companyOperatingWorkspace .company-operating-step-header p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
}

#companyOperatingWorkspace .company-operating-step-fields {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 15px 14px;
}

#companyOperatingWorkspace .company-operating-identity-fields,
#companyOperatingWorkspace .company-operating-payment-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#companyOperatingWorkspace .company-operating-amount-fields {
  grid-template-columns: minmax(0, 1fr);
}

#companyOperatingWorkspace .company-operating-step-fields label {
  min-width: 0;
  color: #65666b;
  font-size: 12px;
  font-weight: 720;
}

#companyOperatingWorkspace .company-operating-field-label {
  display: flex;
  min-height: 18px;
  align-items: center;
  gap: 4px;
}

#companyOperatingWorkspace .company-operating-required {
  color: #3f70cf;
  font-weight: 900;
}

#companyOperatingWorkspace .company-operating-optional {
  margin-left: 3px;
  color: #96979c;
  font-size: 10px;
  font-weight: 700;
}

#companyOperatingWorkspace .company-operating-step-fields input:not([type="file"]),
#companyOperatingWorkspace .company-operating-step-fields select {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: #f4f5f7;
  color: var(--text);
  box-shadow: none;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

#companyOperatingWorkspace .company-operating-step-fields input:not([type="file"]):hover,
#companyOperatingWorkspace .company-operating-step-fields select:hover {
  background: #eff1f4;
}

#companyOperatingWorkspace .company-operating-step-fields input:not([type="file"]):focus,
#companyOperatingWorkspace .company-operating-step-fields select:focus {
  border-color: #6f94dc;
  outline: 0;
  background: #fff;
  box-shadow: 0 0 0 3px rgb(63 112 207 / 12%);
}

#companyOperatingWorkspace .company-operating-step-fields input::placeholder {
  color: #a1a2a7;
  opacity: 1;
}

#companyOperatingWorkspace .company-operating-evidence-field {
  grid-column: 1 / -1;
}

#companyOperatingWorkspace .company-operating-evidence-box {
  display: grid;
  min-height: 72px;
  grid-template-columns: 24px minmax(0, 1fr) minmax(250px, auto);
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px dashed #c9cdd5;
  border-radius: 7px;
  background: #fafbfc;
}

#companyOperatingWorkspace .company-operating-evidence-box > svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: #737780;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

#companyOperatingWorkspace .company-operating-evidence-box > span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

#companyOperatingWorkspace .company-operating-evidence-box strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 760;
}

#companyOperatingWorkspace .company-operating-evidence-box small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}

#companyOperatingWorkspace .company-operating-evidence-box input[type="file"] {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #777980;
  font-size: 11px;
}

#companyOperatingWorkspace .company-operating-evidence-box input[type="file"]::file-selector-button {
  min-height: 34px;
  margin-right: 9px;
  padding: 6px 10px;
  border: 0;
  border-radius: 5px;
  background: #e9effa;
  color: #315fb0;
  cursor: pointer;
  font: inherit;
  font-weight: 760;
}

#companyOperatingWorkspace .company-operating-amount-field {
  width: min(100%, 420px);
}

#companyOperatingWorkspace .company-operating-money-input {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: #edf3fd;
  color: #315fb0;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

#companyOperatingWorkspace .company-operating-money-input:focus-within {
  border-color: #6f94dc;
  background: #fff;
  box-shadow: 0 0 0 3px rgb(63 112 207 / 12%);
}

#companyOperatingWorkspace .company-operating-money-input > span {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 850;
}

#companyOperatingWorkspace .company-operating-money-input input:not([type="file"]) {
  min-height: 46px;
  padding: 7px 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 18px;
  font-weight: 820;
  box-shadow: none;
}

#companyOperatingWorkspace .company-operating-money-input input:not([type="file"]):hover,
#companyOperatingWorkspace .company-operating-money-input input:not([type="file"]):focus {
  border: 0;
  background: transparent;
  box-shadow: none;
}

#companyOperatingWorkspace .company-operating-form-actions {
  justify-content: flex-end;
  min-height: 64px;
  padding: 14px 2px 0;
}

#companyOperatingWorkspace .company-operating-form-actions .form-message {
  margin-right: auto;
}

.workspace #companyOperatingWorkspace .company-operating-form-actions button[type="submit"] {
  width: auto;
  min-width: 152px;
  min-height: 38px;
  padding: 8px 16px;
  border: 0;
  border-radius: 6px;
  background: #3f70cf;
  color: #fff;
  font-size: 12px;
  font-weight: 780;
}

.workspace #companyOperatingWorkspace .company-operating-form-actions button[type="submit"]:hover {
  background: #315fb5;
}

@media (max-width: 900px) {
  #companyOperatingWorkspace .company-operating-step {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  #companyOperatingWorkspace .company-operating-evidence-box {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  #companyOperatingWorkspace .company-operating-evidence-box input[type="file"] {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  #companyOperatingWorkspace .company-operating-identity-fields,
  #companyOperatingWorkspace .company-operating-payment-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  #companyOperatingWorkspace .company-operating-step {
    padding-block: 20px;
  }

  #companyOperatingWorkspace .company-operating-evidence-box {
    grid-template-columns: minmax(0, 1fr);
  }

  #companyOperatingWorkspace .company-operating-evidence-box > svg {
    display: none;
  }

  #companyOperatingWorkspace .company-operating-form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  #companyOperatingWorkspace .company-operating-form-actions .form-message {
    width: 100%;
    margin-right: 0;
  }

  .workspace #companyOperatingWorkspace .company-operating-form-actions button[type="submit"] {
    width: 100%;
  }
}


.cost-context-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 10px;
  align-items: end;
}

.cost-batch-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 4px;
}

.cost-batch-header h3,
.cost-entry-item-header h4 {
  margin: 0;
  font-size: 15px;
}

.cost-batch-header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.cost-entry-items {
  display: grid;
  gap: 12px;
}

.cost-entry-item {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--sidebar);
}

.cost-entry-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cost-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.cost-dynamic-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 10px;
}

.cost-form input,
.cost-form select {
  width: 100%;
}

.upload-property {
  position: relative;
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.upload-property-trigger {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease;
}

.upload-property-trigger:hover,
.upload-property-trigger[aria-expanded="true"] {
  border-color: #cfcfc8;
  color: var(--text);
}

.upload-property-trigger:focus-visible {
  outline: none;
  border-color: var(--muted);
  box-shadow: 0 0 0 1px var(--muted);
}

.upload-property-trigger.has-file {
  color: var(--text);
}

.upload-property-icon {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: var(--muted);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
}

.upload-popover {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  left: 0;
  width: min(360px, calc(100vw - 48px));
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 36px rgb(0 0 0 / 14%);
  color: var(--text);
}

.upload-popover-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.upload-popover-tabs {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 12px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.upload-popover-tabs span {
  padding: 0 0 8px;
}

.upload-popover-tabs .active {
  color: var(--text);
  border-bottom: 2px solid var(--text);
}

.upload-pick-button {
  width: 100%;
  height: 38px;
  margin-top: 12px;
  border: 0;
  border-radius: 6px;
  background: #2f80dc;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}

.upload-pick-button:hover {
  background: #276fc1;
}

.upload-paste-hint,
.upload-file-name {
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.upload-file-name {
  overflow: hidden;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--sidebar);
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-native-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.cost-form .span-2 {
  grid-column: span 2;
}

.cost-form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cost-review-panel {
  display: grid;
  gap: 0;
  min-width: 0;
}

.cost-review-panel > div,
#quotationReviewWorkspace {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

#purchaseReviewWorkspace,
#taobaoProcessingWorkspace,
#invoiceCheckWorkspace {
  min-width: 0;
}

.disbursement-panel {
  gap: 0;
}

.cost-review-panel.disbursement-panel .table-scroll {
  margin: 0;
}

.cost-review-panel .table-scroll {
  margin: 0 16px 16px;
}

.approval-review-page .approval-review-table-scroll {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.approval-review-page .approval-review-table-scroll th,
.approval-review-page .approval-review-table-scroll td {
  height: auto;
}





.approval-review-page .approval-review-table-scroll th:first-child,
.approval-review-page .approval-review-table-scroll td:first-child {
  white-space: nowrap;
}

.approval-review-page .approval-review-table-scroll .approval-number-column,
.approval-review-page .approval-review-table-scroll .approval-number-cell {
  text-align: right;
  white-space: nowrap;
}

.night-entry-management-scroll.approval-review-table-scroll .night-entry-review-table {
  min-width: 980px;
  table-layout: auto;
}

.night-entry-review-project-cell > strong,
.night-entry-review-project-cell > small,
.night-entry-review-time-cell > strong,
.night-entry-review-time-cell > small,
.night-entry-review-schedule-cell > strong,
.night-entry-review-schedule-cell > small {
  display: block;
}

.night-entry-review-project-cell > strong,
.night-entry-review-time-cell > strong,
.night-entry-review-schedule-cell > strong {
  font-size: 13px;
  font-weight: 720;
  line-height: 1.4;
}

.night-entry-review-venue {
  display: -webkit-box !important;
  margin-top: 3px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.night-entry-review-time-cell > small,
.night-entry-review-schedule-cell > small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.night-entry-review-time-cell > small > span {
  margin-right: 5px;
  color: #77787d;
  font-weight: 650;
}

.night-entry-review-participants-cell .night-entry-participant-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  line-height: 1.5;
}

.night-entry-review-participants-cell .night-entry-participant-line strong {
  flex: 0 0 auto;
  font-size: 13px;
}

.night-entry-review-participants-cell .night-entry-participant-line span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.night-entry-review-participants-cell .night-entry-participant-more {
  display: inline-block;
  width: auto;
  min-width: 0;
  height: auto;
  margin-top: 3px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #3f70cf;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.5;
  text-align: left;
}

.night-entry-review-participants-cell button.night-entry-participant-more:hover {
  border: 0;
  background: transparent;
  color: #315fb5;
  text-decoration: underline;
}

.night-entry-review-participants-cell button.night-entry-participant-more:focus-visible {
  outline: 2px solid rgb(63 112 207 / 34%);
  outline-offset: 2px;
}

.night-entry-review-table .approval-status-cell .status-pill {
  white-space: nowrap;
}

.night-entry-reject-modal {
  width: min(520px, 100%);
  border: 0;
  border-top: 4px solid #c94f4f;
  border-radius: 10px;
  box-shadow: 0 24px 64px rgb(38 24 24 / 24%);
}

.night-entry-reject-header {
  align-items: flex-start;
  padding: 20px 22px 18px;
  border-bottom-color: #f0dddd;
  background: linear-gradient(110deg, #fff7f7 0%, #fff 68%);
}

.night-entry-reject-header > div {
  min-width: 0;
}

.night-entry-reject-header .summary-eyebrow {
  color: #b84444;
  font-size: 11px;
  font-weight: 780;
  letter-spacing: .04em;
}

.night-entry-reject-header h3 {
  margin-top: 4px;
  font-size: 19px;
}

.night-entry-reject-header p {
  overflow: hidden;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.night-entry-reject-header .icon-button {
  flex: 0 0 36px;
  width: 36px;
  min-width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.night-entry-reject-header .icon-button:hover {
  border-color: transparent;
  background: #f8eaea;
}

.night-entry-reject-body {
  padding: 20px 22px 22px;
}

.night-entry-reject-body label,
.night-entry-reject-body label > span,
.night-entry-reject-body label > small {
  display: block;
}

.night-entry-reject-body label > span {
  color: var(--text);
  font-size: 13px;
  font-weight: 760;
}

.night-entry-reject-body label > small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.night-entry-reject-body textarea {
  width: 100%;
  min-height: 112px;
  max-height: 240px;
  margin-top: 12px;
  padding: 11px 12px;
  resize: vertical;
  border: 1px solid #d9b6b6;
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  font: inherit;
  line-height: 1.5;
}

.night-entry-reject-body textarea:focus {
  border-color: #c94f4f;
  outline: 0;
  box-shadow: 0 0 0 2px rgb(201 79 79 / 14%);
}

.night-entry-reject-body .form-message {
  min-height: 0;
  margin: 8px 0 0;
}

.night-entry-reject-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 22px 18px;
  border-top: 1px solid #f0dddd;
  background: #fff;
}

.night-entry-reject-actions button {
  width: 112px;
  min-width: 112px;
  height: 40px;
  padding: 0 14px;
}

#nightEntryRejectConfirmButton {
  border-color: #c94f4f;
  background: #c94f4f;
  color: #fff;
}

#nightEntryRejectConfirmButton:hover {
  border-color: #b84444;
  background: #b84444;
}

#leaveReviewRejectConfirmButton {
  border-color: #c94f4f;
  background: #c94f4f;
  color: #fff;
}

#leaveReviewRejectConfirmButton:hover {
  border-color: #b84444;
  background: #b84444;
}

#approvalRejectConfirmButton {
  border-color: #c94f4f;
  background: #c94f4f;
  color: #fff;
}

#approvalRejectConfirmButton:hover {
  border-color: #b84444;
  background: #b84444;
}

.night-entry-detail-summary-metrics {
  grid-template-columns: minmax(96px, auto);
}

.night-entry-detail-participants-section > header {
  margin-bottom: 10px;
}

.night-entry-detail-participant-list {
  border-top: 1px solid #eceff4;
}

.night-entry-detail-participant {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 52px;
  padding: 10px 0;
  border-bottom: 1px solid #eceff4;
}

.night-entry-detail-participant > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.night-entry-detail-participant strong {
  font-size: 14px;
}

.night-entry-detail-participant span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.night-entry-detail-participant > span {
  text-align: right;
}

.night-entry-detail-empty,
.night-entry-detail-loading {
  margin: 0;
  padding: 32px 0;
  color: var(--muted);
  text-align: center;
}

.night-entry-detail-loading.error {
  color: #b84444;
}

@media (max-width: 560px) {
  .modal-backdrop:has(.night-entry-reject-modal) {
    padding: 14px;
  }

  .night-entry-reject-header,
  .night-entry-reject-body,
  .night-entry-reject-actions {
    padding-right: 17px;
    padding-left: 17px;
  }

  .night-entry-reject-actions button {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
}

.approval-review-page .approval-review-table-scroll .approval-status-cell {
  vertical-align: middle;
}

.approval-review-page .approval-review-table-scroll .approval-status-detail {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
}

.approval-review-page .approval-review-table-scroll .approval-review-note {
  display: -webkit-box;
  margin-top: 3px;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.approval-review-page .approval-review-table-scroll .approval-clamped-text {
  display: -webkit-box;
  overflow: hidden;
  overflow-wrap: anywhere;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.approval-review-page .approval-review-table-scroll .approval-clamped-text:hover,
.approval-review-page .approval-review-table-scroll .approval-clamped-text:focus,
.approval-review-page .approval-review-table-scroll .approval-review-note:hover,
.approval-review-page .approval-review-table-scroll .approval-review-note:focus {
  overflow: visible;
  outline: none;
  -webkit-line-clamp: unset;
}

.approval-review-page .approval-review-table-scroll .approval-clamped-text:focus-visible,
.approval-review-page .approval-review-table-scroll .approval-review-note:focus-visible {
  border-radius: 3px;
  outline: 2px solid #8fb7e8;
  outline-offset: 2px;
}

#quotationReviewWorkspace .table-scroll table,
#invoiceCheckWorkspace .table-scroll table {
  min-width: 860px;
}

#purchaseReviewWorkspace .table-scroll table {
  min-width: 980px;
}

.taobao-processing-tools {
  padding: 8px 0 14px;
}

.finance-list-tools {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(190px, 240px) minmax(150px, 180px) minmax(145px, 170px) minmax(145px, 170px) auto;
  gap: 10px;
  align-items: end;
  padding: 14px 0;
}

.finance-list-tools label,
.finance-list-tools input,
.finance-list-tools select {
  width: 100%;
  min-width: 0;
}

.finance-list-tools > button {
  width: auto;
  min-height: 38px;
}

.finance-list-tools label > span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.purchase-payment-filter-toolbar {
  position: relative;
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  padding: 8px 0 14px;
}

.purchase-payment-filter-toolbar .purchase-payment-search {
  flex: 1 1 300px;
  width: auto;
  min-width: 240px;
}

.purchase-payment-filter-toolbar .purchase-payment-search input {
  width: 100%;
  min-height: 38px;
  padding-left: 35px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.purchase-payment-filter-toolbar .purchase-payment-search input:hover {
  background: #f7f7f8;
}

.purchase-payment-filter-toolbar .purchase-payment-search input:focus {
  border-color: #3f70cf;
  background: #fff;
  box-shadow: 0 0 0 1px #3f70cf;
}

.purchase-payment-filter-toolbar .purchase-payment-search.is-filtered input {
  background: #f7f9fd;
}

.purchase-payment-filter-row {
  display: flex;
  min-width: 0;
  flex: 0 1 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.purchase-payment-filter-toolbar .purchase-payment-select-filter {
  width: auto;
  min-width: 0;
}

.purchase-payment-filter-toolbar .purchase-payment-select-filter select {
  width: auto;
  min-width: 0;
  max-width: 190px;
  min-height: 38px;
  padding: 6px 30px 6px 10px;
  border-color: transparent;
  border-radius: 6px;
  background-color: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  box-shadow: none;
}

.purchase-payment-filter-toolbar .purchase-payment-select-filter select:hover,
.purchase-payment-filter-toolbar .purchase-payment-select-filter select:focus {
  border-color: transparent;
  background-color: #f1f2f4;
  color: var(--text);
  box-shadow: none;
}

.purchase-payment-filter-toolbar .purchase-payment-select-filter.is-filtered select {
  background-color: #edf2fb;
  color: #315fb5;
}

.purchase-payment-date-filter {
  position: relative;
  min-width: 0;
}

.purchase-payment-date-filter summary {
  display: flex;
  max-width: 210px;
  min-height: 38px;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  list-style: none;
  cursor: pointer;
}

.purchase-payment-date-filter summary::-webkit-details-marker {
  display: none;
}

.purchase-payment-date-filter summary > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.purchase-payment-date-filter summary:hover,
.purchase-payment-date-filter[open] summary {
  background: #f1f2f4;
  color: var(--text);
}

.purchase-payment-date-filter.is-filtered summary {
  background: #edf2fb;
  color: #315fb5;
}

.purchase-payment-date-filter-panel {
  position: absolute;
  z-index: 35;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  width: 300px;
  max-width: calc(100vw - 48px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 30px rgb(32 31 28 / 12%);
}

.purchase-payment-date-filter-panel label,
.purchase-payment-date-filter-panel input {
  width: 100%;
  min-width: 0;
}

.purchase-payment-date-filter-panel input {
  min-height: 38px;
}

.workspace .purchase-payment-filter-toolbar .purchase-payment-clear-filters {
  width: auto;
  min-height: 38px;
  padding: 6px 10px;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

.workspace .purchase-payment-filter-toolbar .purchase-payment-clear-filters:hover {
  border-color: transparent;
  background: #f1f2f4;
  color: var(--text);
}

.purchase-payment-filter-toolbar summary:focus-visible,
.purchase-payment-filter-toolbar select:focus-visible,
.purchase-payment-filter-toolbar button:focus-visible {
  outline: 2px solid #3f70cf;
  outline-offset: 2px;
}

.taobao-needed-date-cell {
  min-width: 118px;
}

.taobao-needed-date-cell .table-subtext {
  margin-top: 5px;
}

.taobao-exception-panel {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border-color, #dedede);
}

.taobao-exception-panel h4 {
  margin: 0 0 12px;
}

.taobao-exception-actions {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 900px) {
  .finance-list-tools {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .purchase-payment-filter-toolbar {
    display: flex;
  }

  .purchase-payment-filter-toolbar .purchase-payment-search {
    flex-basis: 100%;
  }

  .purchase-payment-filter-row {
    width: 100%;
    justify-content: flex-start;
  }
}

.project-closeout-checklist {
  margin: 8px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.workspace .project-closeout-checklist-summary {
  display: flex;
  width: auto;
  max-width: 100%;
  align-items: center;
  justify-content: flex-start;
  margin-left: auto;
  padding: 5px 2px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.workspace .project-closeout-checklist-summary:hover {
  background: transparent;
  color: var(--blue);
}

.workspace .project-closeout-checklist-summary:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.project-closeout-checklist-summary-copy {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.project-closeout-checklist-count {
  font-size: 0.78rem;
  font-weight: 800;
}

.project-closeout-checklist-count.pending {
  color: var(--amber-text);
}

.project-closeout-checklist-count.complete {
  color: var(--green-text);
}

.project-closeout-checklist-backdrop {
  z-index: 80;
}

.project-closeout-checklist-modal {
  display: flex;
  width: min(820px, 100%);
  max-height: min(720px, calc(100vh - 48px));
  flex-direction: column;
  border-radius: 16px;
}

.project-closeout-checklist-modal-header {
  flex: 0 0 auto;
  padding: 20px 22px 16px;
}

.project-closeout-checklist-modal-header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.workspace .project-closeout-checklist-close,
.workspace .project-closeout-checklist-close:hover {
  display: inline-grid;
  width: 32px;
  height: 32px;
  min-height: 0;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 1.3rem;
}

.workspace .project-closeout-checklist-close:hover {
  background: #f1f3f5;
  color: var(--text);
}

.project-closeout-checklist-modal-body {
  min-height: 0;
  padding: 18px 22px 22px;
  overflow-y: auto;
}

.project-closeout-checklist-progress {
  margin-bottom: 20px;
}

.project-closeout-checklist-progress > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.project-closeout-checklist-progress-track {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #eceef1;
}

.project-closeout-checklist-progress-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--blue);
}

.project-closeout-checklist-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.project-closeout-checklist-columns > div {
  min-width: 0;
  padding: 0;
}

.project-closeout-checklist-columns h4 {
  margin: 0;
  font-size: 0.86rem;
}

.project-closeout-checklist-columns ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.project-closeout-checklist-columns li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: #f8f9fa;
}

.project-closeout-checklist-columns li.pending {
  border-color: #efdfbd;
  background: #fffbf2;
}

.project-closeout-checklist-columns li.complete {
  color: #4f5359;
}

.project-closeout-check-icon {
  display: inline-grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 50%;
  background: var(--amber-bg);
  color: var(--amber-text);
  font-size: 0.7rem;
  font-weight: 800;
}

.project-closeout-checklist-columns li.complete .project-closeout-check-icon {
  background: var(--green-bg);
  color: var(--green-text);
}

.project-closeout-checklist-columns li strong,
.project-closeout-checklist-columns li small {
  display: block;
}

.project-closeout-checklist-columns li strong {
  font-size: 0.82rem;
  line-height: 1.3;
}

.project-closeout-checklist-columns li small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.project-closeout-checklist-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}

.project-closeout-checklist.is-loading {
  min-height: 92px;
  padding: 16px;
}

@media (max-width: 760px) {
  .project-closeout-checklist {
    margin: 6px 0 0;
  }

  .project-closeout-checklist-backdrop {
    align-items: end;
    padding: 12px;
  }

  .project-closeout-checklist-modal {
    width: 100%;
    max-height: calc(100dvh - 24px);
    border-radius: 15px;
  }

  .project-closeout-checklist-modal-header {
    padding: 18px 17px 14px;
  }

  .project-closeout-checklist-modal-body {
    padding: 16px 17px 18px;
  }

  .project-closeout-checklist-columns ul {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }

  .project-closeout-checklist-columns > div {
    padding: 0;
  }

  .project-closeout-checklist-actions button {
    width: 100%;
  }
}

@media (max-width: 600px) {
  .finance-list-tools {
    grid-template-columns: minmax(0, 1fr);
  }

  .finance-list-tools > button {
    width: 100%;
  }

  .purchase-payment-filter-toolbar .purchase-payment-search {
    min-width: 0;
  }

  .purchase-payment-filter-toolbar .purchase-payment-select-filter {
    flex: 1 1 calc(50% - 4px);
  }

  .purchase-payment-filter-toolbar .purchase-payment-select-filter select {
    width: 100%;
    max-width: none;
  }

  .purchase-payment-date-filter {
    flex: 1 1 100%;
  }

  .purchase-payment-date-filter summary {
    max-width: none;
  }

  .purchase-payment-date-filter-panel {
    right: auto;
    left: 0;
    width: min(100%, 340px);
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }

  .workspace .purchase-payment-filter-toolbar .purchase-payment-clear-filters {
    width: auto;
  }
}

.purchase-review-detail-modal {
  display: grid;
  width: min(860px, 100%);
  max-height: min(760px, calc(100vh - 48px));
  grid-template-rows: auto minmax(0, 1fr) auto;
  border: 0;
  border-top: 4px solid #3f70cf;
  border-radius: 12px;
  box-shadow: 0 28px 72px rgb(24 38 64 / 24%);
}

.purchase-review-detail-modal .ledger-modal-header {
  align-items: flex-start;
  padding: 20px 24px 18px;
  border-bottom-color: #e6ebf3;
  background: linear-gradient(110deg, #f3f7ff 0%, #fff 58%);
}

.purchase-review-detail-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.purchase-review-detail-heading > div {
  min-width: 0;
}

.purchase-review-detail-heading-icon {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 9px;
  background: #e5edfb;
  color: #3f70cf;
}

.purchase-review-detail-heading-icon svg {
  width: 23px;
  height: 23px;
}

.purchase-review-detail-heading .summary-eyebrow {
  color: #3f70cf;
  letter-spacing: .04em;
}

.purchase-review-detail-heading h3 {
  overflow: hidden;
  margin-top: 4px;
  font-size: 20px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.purchase-review-detail-modal .icon-button {
  width: 40px;
  min-width: 40px;
  flex: 0 0 40px;
  border-color: transparent;
  background: transparent;
}

.purchase-review-detail-body {
  overflow-y: auto;
  padding: 0 24px 24px;
}

.purchase-review-detail-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  padding: 22px 0;
  border-bottom: 1px solid #e6ebf3;
}

.purchase-review-detail-summary-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.purchase-review-detail-summary-copy > span,
.purchase-review-detail-metric > span {
  color: #7c8290;
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .04em;
}

.purchase-review-detail-summary-copy > strong {
  overflow: hidden;
  font-size: 17px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.purchase-review-detail-summary-copy > small {
  color: #7c8290;
  font-size: 11px;
}

.purchase-review-detail-summary-metrics {
  display: grid;
  grid-template-columns: minmax(130px, auto) minmax(96px, auto);
  gap: 22px;
}

.purchase-review-detail-metric {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 7px;
}

.purchase-review-detail-metric.is-amount {
  justify-items: end;
}

.purchase-review-detail-metric.is-amount strong {
  color: #274f99;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  white-space: nowrap;
}

.purchase-review-detail-section {
  padding-top: 21px;
}

.purchase-review-detail-section > header {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 5px;
}

.purchase-review-detail-section > header > span {
  color: #3f70cf;
  font-size: 11px;
  font-weight: 820;
  letter-spacing: .06em;
}

.purchase-review-detail-section > header > span::after {
  display: inline-block;
  width: 24px;
  height: 1px;
  margin: 0 1px 3px 8px;
  background: #b8c9e8;
  content: "";
}

.purchase-review-detail-section h4 {
  margin: 0;
  font-size: 14px;
}

.purchase-review-detail-section.is-payment .purchase-review-detail-grid {
  margin-top: 10px;
  padding: 3px 16px 12px;
  border-left: 3px solid #8aa8df;
  background: #f7faff;
}

.purchase-review-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 28px;
}

.purchase-review-detail-field {
  min-width: 0;
  padding: 11px 0 10px;
  border-bottom: 1px solid #eceff4;
}

.purchase-review-detail-field.is-wide {
  grid-column: 1 / -1;
}

.purchase-review-detail-field span,
.purchase-review-detail-field strong {
  display: block;
  overflow-wrap: anywhere;
}

.purchase-review-detail-field span,
.purchase-review-detail-note > span {
  margin-bottom: 5px;
  color: #7c8290;
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .03em;
}

.purchase-review-detail-field strong {
  font-size: 14px;
  line-height: 1.45;
}

.purchase-review-detail-note,
.purchase-review-previous-rejection {
  margin-top: 20px;
  padding: 14px 16px;
  border: 0;
  border-left: 3px solid #8aa8df;
  border-radius: 0;
  background: #f7faff;
}

.purchase-review-detail-note p,
.purchase-review-previous-rejection p {
  margin: 4px 0 0;
  white-space: pre-wrap;
}

.purchase-review-previous-rejection {
  border-left-color: #d77c7c;
  background: #fff6f6;
}

.purchase-review-previous-rejection span {
  color: var(--muted);
  font-size: 12px;
}

.purchase-review-detail-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 24px 18px;
  border-top: 1px solid #e6ebf3;
  background: #fafbfc;
}

.purchase-review-detail-actions[hidden] {
  display: none;
}

.purchase-review-detail-actions button {
  width: 72px;
  min-width: 72px;
  height: 38px;
  padding: 0 14px;
}

.purchase-review-detail-actions .purchase-review-detail-reject-button {
  border-color: #c94f4f;
  background: #c94f4f;
  color: #fff;
}

.purchase-review-detail-actions .purchase-review-detail-reject-button:hover {
  border-color: #b84444;
  background: #b84444;
}

#purchaseReviewDetailApproveButton,
#costReviewDetailApproveButton,
#nightEntryDetailApproveButton {
  border-color: #3f70cf;
  background: #3f70cf;
  color: #fff;
}

#purchaseReviewDetailApproveButton:hover,
#costReviewDetailApproveButton:hover,
#nightEntryDetailApproveButton:hover {
  border-color: #315fb5;
  background: #315fb5;
}

@media (max-width: 640px) {
  .purchase-review-detail-modal .ledger-modal-header,
  .purchase-review-detail-body {
    padding-inline: 18px;
  }

  .purchase-review-detail-summary {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .purchase-review-detail-summary-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .purchase-review-detail-metric.is-amount {
    justify-items: start;
  }

  .purchase-review-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .purchase-review-detail-field.is-wide {
    grid-column: auto;
  }

  .purchase-review-detail-actions button {
    flex: 1 1 0;
  }

  .night-entry-detail-participant {
    align-items: start;
    gap: 10px;
  }
}

.petty-cash-wallet-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.petty-cash-wallet-card {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--sidebar);
}

.petty-cash-wallet-card span {
  font-size: 18px;
  font-weight: 700;
}

.petty-cash-wallet-card small {
  color: var(--muted);
}

.petty-cash-wallet-card.warning {
  border-color: #c9b37a;
  background: #fbf7ea;
}

.table-scroll {
  overflow-x: auto;
  max-width: 100%;
}

.button-count-badge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  margin-left: 5px;
  padding: 0 5px;
  border-radius: 999px;
  background: #b42318;
  color: #fff;
  font-size: 11px;
  line-height: 1;
}

.taobao-requisition-form + .cost-submission-history table {
  min-width: 1380px;
}

.taobao-discussion-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(920px, calc(100vw - 32px));
  height: min(760px, calc(100vh - 32px));
  overflow: hidden;
}

.taobao-discussion-body {
  display: grid;
  min-height: 0;
  overflow: hidden;
}

.taobao-discussion-load-older {
  grid-row: 2;
  justify-self: center;
}

#taobaoDiscussionError {
  grid-row: 1;
}

.taobao-discussion-timeline {
  display: grid;
  grid-row: 3;
  min-height: 0;
  overflow-y: auto;
}

.taobao-chat-message {
  display: grid;
  justify-items: start;
  overflow-wrap: anywhere;
}

.taobao-chat-message.is-own {
  justify-items: end;
}

.taobao-chat-message > header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}

.taobao-chat-message > header span,
.taobao-chat-message time,
.taobao-chat-system-event time {
  color: var(--muted);
}

.taobao-chat-line {
  display: flex;
  gap: 7px;
  align-items: flex-end;
  max-width: 82%;
}

.taobao-chat-message.is-own .taobao-chat-line {
  flex-direction: row-reverse;
}

.taobao-chat-bubble {
  background: #fff;
}

.taobao-chat-message.is-own .taobao-chat-bubble {
  border-color: #b8d8c5;
}

.taobao-chat-bubble p {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.55;
}

.taobao-chat-system-event {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  align-items: center;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.taobao-discussion-form {
  display: grid;
  grid-row: 4;
}

.taobao-discussion-form .form-message {
  margin-right: auto;
}



@media (max-width: 720px) {
  .acceptance-version-actions { flex-direction: column; }
  .taobao-discussion-modal {
    width: calc(100vw - 16px);
    height: calc(100vh - 16px);
  }

  .taobao-discussion-body {
    padding: 12px;
  }



  .taobao-chat-line {
    max-width: 92%;
  }
}

.taobao-no-tax-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.taobao-no-tax-field input {
  width: 18px;
  min-width: 18px;
  height: 18px;
}

.taobao-registration-hint {
  margin: -2px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.taobao-processing-timeline-panel {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border-color, #dedede);
}

.taobao-processing-timeline-panel h4 {
  margin: 0;
}

.taobao-processing-timeline {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.taobao-processing-timeline-item time {
  color: var(--muted);
  font-size: 11px;
}

.taobao-processing-timeline-item {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.taobao-processing-timeline-item > span {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: #777;
}

.taobao-processing-timeline-item > div {
  display: grid;
  gap: 2px;
}

table input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

.cost-source-hint {
  margin: 0;
  min-height: 18px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.cost-table-wrap {
  overflow: auto;
}

.table-subtext {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.cost-context-note {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--sidebar);
  color: var(--muted);
  font-size: 13px;
}

.cost-context-note a {
  color: var(--text);
  font-weight: 700;
}

.cost-analysis-summary {
  display: grid;
  gap: 12px;
}

.cost-chart-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.cost-chart-panel {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: #fff;
}

.cost-chart-panel h3 {
  margin: 0;
  font-size: 13px;
}

.cost-bar-row {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.cost-bar-row > div:first-child {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.cost-bar-label {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.cost-bar-label em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

.cost-bar-row span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.cost-bar-row strong {
  color: var(--text);
  font-size: 13px;
  white-space: nowrap;
}

.cost-donut-panel {
  align-content: start;
}

.cost-donut-layout {
  display: grid;
  justify-items: center;
  min-width: 0;
  min-height: 0;
}

.cost-donut-chart {
  position: relative;
  width: min(100%, 360px);
  aspect-ratio: 14 / 11;
}

.cost-donut-chart svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.cost-donut-track,
.cost-donut-empty-ring,
.cost-donut-segment {
  fill: none;
  stroke-width: 25;
}

.cost-donut-track,
.cost-donut-empty-ring {
  stroke: #eef0f3;
}

.cost-donut-segment {
  cursor: pointer;
  transition: opacity 150ms ease, stroke-width 150ms ease;
}

.cost-donut-layout.has-active .cost-donut-segment,
.cost-donut-layout.has-active .cost-donut-callout {
  opacity: 0.35;
}

.cost-donut-layout.has-active .cost-donut-segment.is-active,
.cost-donut-layout.has-active .cost-donut-callout.is-active {
  opacity: 1;
}

.cost-donut-segment.is-active {
  stroke-width: 29;
}

.cost-donut-segment:focus {
  outline: none;
}

.cost-donut-callout {
  cursor: pointer;
  transition: opacity 150ms ease;
}

.cost-donut-callout polyline {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
}

.cost-donut-callout text {
  fill: var(--text);
  font-size: 11px;
  font-weight: 700;
}

.cost-donut-callout:focus {
  outline: none;
}

.cost-donut-center {
  position: absolute;
  inset: 22%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  min-width: 0;
  text-align: center;
  pointer-events: none;
}

.cost-donut-center span {
  max-width: 100%;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace .cost-donut-center strong {
  max-width: none;
  overflow: visible;
  color: var(--text);
  font-size: clamp(12px, 1vw, 15px);
  line-height: 1.15;
  text-overflow: clip;
  white-space: nowrap;
}

.cost-donut-empty-text {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

@media (max-width: 560px) {
  .cost-donut-chart {
    width: min(100%, 300px);
  }
}

.cost-bar-track {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--sidebar);
}

.cost-bar {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.cost-bar.budget {
  background: #93c5fd;
}

.cost-bar.estimated {
  background: #fcd34d;
}

.cost-bar.cost {
  background: #fca5a5;
}

.cost-bar.profit {
  background: #86efac;
}

.cost-bar.source {
  background: #c4b5fd;
}

.project-sessions-section {
  grid-column: 1 / -1;
}

.mini-row {
  display: grid;
  gap: 3px;
  min-height: 36px;
  padding: 9px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  font-size: 13px;
}

.mini-row span,
.detail-muted {
  color: var(--muted);
}

.detail-muted {
  margin: 0;
  font-size: 13px;
}

.template-workspace {
  display: grid;
}

.placeholder-workspace {
  max-width: 1120px;
}

.placeholder-workspace[data-page="payroll-disbursement"],
.placeholder-workspace[data-page="invoices-payments"] {
  max-width: none;
}

.placeholder-panel {
  min-height: 132px;
}

.work-log-entry-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 34px;
  gap: 10px;
  align-items: stretch;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(55, 53, 47, 0.03);
}

.work-log-entry-row label {
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.work-log-entry-row select,
.work-log-entry-row textarea {
  min-width: 0;
  border-color: #deded9;
  background: #fff;
}

.work-log-entry-row textarea {
  min-height: 72px;
  line-height: 1.55;
}

.work-log-entry-row .icon-button {
  align-self: end;
  width: 34px;
  height: 34px;
  border-color: var(--line);
  color: var(--muted);
  font-size: 16px;
}

.work-log-week-page {
  min-width: 0;
}

.work-log-week-panel {
  min-width: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

#workLogCalendarView[hidden],
.my-task-list-view[hidden] {
  display: none;
}

.my-task-list-view {
  min-width: 0;
  min-height: calc(100dvh - 72px);
  background: #fff;
}

/* 我的任務採用滿版工作區，讓列表保有 Asana 式的寬鬆閱讀面積。 */
.work-log-week-page:has(.my-task-list-view:not([hidden])) {
  margin: -24px clamp(-44px, -3vw, -20px) -40px;
}

.my-task-list-header {
  display: flex;
  min-height: 70px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 32px;
  border-bottom: 1px solid var(--line-soft);
}

.my-task-header-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.my-task-list-header h2 {
  margin: 0;
  color: var(--text);
  font-size: 22px;
  line-height: 1.3;
}

.my-task-view-tabs {
  display: inline-flex;
  height: 38px;
  flex: 0 0 auto;
  gap: 4px;
  padding: 3px;
  border: 0;
  border-radius: 8px;
  background: #f1f2f4;
}

.workspace .my-task-view-tabs button {
  display: inline-flex;
  width: auto;
  height: 32px;
  min-height: 32px;
  align-items: center;
  padding: 6px 12px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  line-height: 20px;
  font-weight: 600;
  box-shadow: none;
}

.workspace .my-task-view-tabs button:hover {
  background: #f5f6f8;
  color: var(--text);
}

.workspace .my-task-view-tabs button.is-active {
  background: #fff;
  color: var(--text);
  font-weight: 750;
  box-shadow: 0 1px 3px rgb(0 0 0 / 8%);
}

.my-task-toolbar {
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: 8px;
  padding: 8px 32px;
  border-bottom: 1px solid var(--line-soft);
}

.my-task-toolbar .my-task-view-tabs {
  margin-left: auto;
}

.workspace .my-task-toolbar > button {
  width: auto;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
}

.my-task-toolbar label {
  display: flex;
  min-width: 0;
  align-items: center;
}

.workspace .my-task-toolbar select {
  width: auto;
  min-height: 34px;
  padding: 5px 28px 5px 9px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  box-shadow: none;
  cursor: pointer;
}

.workspace .my-task-toolbar select:hover,
.workspace .my-task-toolbar select:focus {
  background: #f1f2f4;
  color: var(--text);
  box-shadow: none;
}

.workspace .my-task-toolbar select:focus-visible,
.workspace .my-task-search input:focus-visible {
  outline: 2px solid #3f70cf;
  outline-offset: 2px;
}

#myTaskOwnershipFilter {
  width: 160px;
}

#myTaskStatusFilter {
  width: 118px;
}

.my-task-search {
  position: relative;
  margin-left: auto;
}

.my-task-search::before {
  position: absolute;
  top: 50%;
  left: 11px;
  z-index: 1;
  width: 10px;
  height: 10px;
  border: 1.6px solid #85878d;
  border-radius: 50%;
  content: "";
  pointer-events: none;
  transform: translateY(-58%);
}

.my-task-search::after {
  position: absolute;
  top: calc(50% + 3px);
  left: 20px;
  z-index: 1;
  width: 5px;
  height: 1.6px;
  border-radius: 2px;
  background: #85878d;
  content: "";
  pointer-events: none;
  transform: rotate(45deg);
}

.workspace .my-task-search input {
  width: 230px;
  min-height: 34px;
  padding: 6px 10px 6px 31px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--text);
  font-size: 12px;
  box-shadow: none;
}

.my-task-table {
  overflow: auto;
}

.my-task-table-columns,
.my-task-row {
  display: grid;
  min-width: 1040px;
  grid-template-columns: minmax(320px, 1fr) 140px 160px 220px 140px;
}

.my-task-table-columns {
  position: sticky;
  z-index: 3;
  top: 0;
  min-height: 40px;
  background: #fff;
}

.my-task-table-columns span {
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.my-task-table-columns span:first-child {
  padding-left: 32px;
}

.my-task-inline-create {
  min-width: 1040px;
}

.workspace .my-task-inline-add {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: flex-start;
  padding: 8px 32px;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  text-align: left;
}

.workspace .my-task-inline-add:hover {
  background: #f8f8f9;
  color: var(--text);
}

.my-task-inline-form {
  display: grid;
  min-width: 1040px;
  min-height: 46px;
  grid-template-columns: minmax(320px, 1fr) 140px 160px 220px 140px;
  background: #f4f7fd;
}

.my-task-inline-add[hidden],
.my-task-inline-form[hidden] {
  display: none;
}

.workspace .my-task-inline-form input,
.workspace .my-task-inline-form select {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 5px 7px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
  font-size: 12px;
}

.workspace .my-task-inline-form input:focus,
.workspace .my-task-inline-form select:focus {
  outline: 1px solid #9ab7ec;
  background: #fff;
}

.my-task-inline-message {
  max-width: 150px;
  overflow: hidden;
  flex: 0 1 auto;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-task-inline-form.my-task-composer {
  min-width: 0;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr);
  margin: 12px 32px 16px;
  background: #fff;
}

.my-task-composer .my-task-inline-message {
  max-width: none;
  overflow: visible;
  font-size: 12px;
  text-overflow: clip;
  white-space: normal;
}

.my-task-inline-form.my-task-composer .dashboard-reminder-details {
  min-height: 22px;
}

.my-task-row {
  min-height: 44px;
  border-bottom: 1px solid var(--line-soft);
}

.my-task-row:hover {
  background: rgb(247 247 245 / 70%);
}

.my-task-row > * {
  min-width: 0;
}

.my-task-name-cell {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
  padding: 5px 32px;
}

.workspace .my-task-checkbox {
  display: grid;
  width: 19px;
  height: 19px;
  min-height: 19px;
  flex: 0 0 19px;
  place-items: center;
  padding: 0;
  border: 1px solid #9fa1a6;
  border-radius: 50%;
  background: #fff;
  color: transparent;
  font-size: 11px;
}

.workspace .my-task-checkbox:hover {
  border-color: #498e79;
  color: #498e79;
}

.workspace .my-task-checkbox.is-checked {
  border-color: #54a78e;
  background: #54a78e;
  color: #fff;
}

.workspace .my-task-name,
.workspace .my-task-date,
.workspace .my-task-collaborator,
.workspace .my-task-project,
.my-task-priority-cell {
  display: block;
  width: 100%;
  min-height: 43px;
  overflow: hidden;
  padding: 9px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace .my-task-name {
  min-height: 28px;
  padding: 5px 0;
  font-weight: 700;
}

.workspace .my-task-row .my-task-name:hover,
.workspace .my-task-row .my-task-date:hover,
.workspace .my-task-row .my-task-collaborator:hover,
.workspace .my-task-row .my-task-project:hover {
  background: transparent;
}

.workspace .my-task-row .my-task-name:focus-visible,
.workspace .my-task-row .my-task-date:focus-visible,
.workspace .my-task-row .my-task-collaborator:focus-visible,
.workspace .my-task-row .my-task-project:focus-visible {
  outline: 2px solid #8cace1;
  outline-offset: -2px;
  background: #f5f8fd;
}

.workspace .my-task-date.is-overdue {
  color: #c54852;
}

.workspace .my-task-date.is-today {
  color: #087b73;
  font-weight: 750;
}

.workspace .my-task-project span {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  padding: 3px 8px;
  border-radius: 4px;
  background: #eef7f5;
  color: #346b64;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

.my-task-priority-cell {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 650;
}

.my-task-priority-cell::before {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: #5a8fd2;
  content: "";
}

.my-task-row.is-completed .my-task-name {
  color: #999a9d;
  text-decoration: line-through;
}

.my-task-empty {
  display: flex;
  min-width: 1040px;
  min-height: 88px;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 0 32px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.my-task-empty strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
}

.workspace .my-task-empty button {
  width: auto;
  min-height: 28px;
  padding: 4px 8px;
  border: 0;
  background: transparent;
  color: #3f70cf;
  font-size: 12px;
  font-weight: 700;
}

.workspace .my-task-empty button:hover {
  background: #f1f4fa;
  color: #315fb5;
}

.my-task-board[hidden],
.my-task-table[hidden] {
  display: none;
}

.my-task-board {
  display: grid;
  min-height: calc(100dvh - 238px);
  grid-template-columns: repeat(4, minmax(260px, 1fr));
  align-items: start;
  gap: 12px;
  padding: 18px 32px 32px;
  overflow-x: auto;
  background: #fff;
}

.my-task-board-column {
  min-width: 260px;
}

.my-task-board-column > header {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
  border-radius: 8px;
  background: #f1f1f2;
  color: #65666a;
  font-size: 12px;
}

.my-task-board-column > header > div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.my-task-board-column > header strong {
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-task-priority-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: #9a9ca1;
}

.my-task-board-column:nth-child(1) .my-task-priority-dot {
  background: #d8525d;
}

.my-task-board-column:nth-child(2) .my-task-priority-dot {
  background: #e49a44;
}

.my-task-board-column:nth-child(3) .my-task-priority-dot {
  background: #5a8bcb;
}

.my-task-board-dropzone {
  display: grid;
  min-height: calc(100dvh - 304px);
  align-content: start;
  gap: 9px;
  margin-top: 10px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  transition: border-color 120ms ease, background 120ms ease;
}

.my-task-board-column.has-tasks .my-task-board-dropzone {
  padding: 0;
  background: transparent;
}

.my-task-board-dropzone.is-drag-over {
  border-color: #7a9fe1;
  background: #e7edf8;
}

.workspace .my-task-board-add {
  display: flex;
  width: 100%;
  min-height: 62px;
  align-items: center;
  padding: 12px 14px;
  border: 0;
  border-radius: 7px;
  background: #f1f1f2;
  color: #66676b;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
}

.workspace .my-task-board-add:hover {
  background: #e7e7e9;
  color: var(--text);
}

.my-task-board-card {
  display: grid;
  min-width: 0;
  gap: 13px;
  padding: 14px;
  border: 1px solid #dedfe2;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(28, 29, 32, 0.07);
  cursor: grab;
}

.my-task-board-card:hover {
  border-color: #c7c9ce;
  box-shadow: 0 2px 6px rgba(28, 29, 32, 0.1);
}

.my-task-board-card.is-dragging {
  opacity: 0.42;
  cursor: grabbing;
}

.my-task-board-card.is-completed {
  opacity: 0.6;
  cursor: default;
}

.my-task-board-card-title {
  display: grid;
  min-width: 0;
  grid-template-columns: 19px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
}

.workspace .my-task-board-card-title > button:last-child,
.workspace .my-task-board-project,
.workspace .my-task-board-card-meta button {
  width: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.workspace .my-task-board-card-title > button:last-child {
  overflow: hidden;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace .my-task-board-project {
  justify-self: start;
  max-width: 100%;
}

.my-task-board-project span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  padding: 3px 7px;
  border-radius: 4px;
  background: #e8f5f2;
  color: #346b64;
  font-size: 10px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-task-board-card-meta {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.workspace .my-task-board-card-meta button,
.my-task-board-card-meta span {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace .my-task-board-card-meta button.is-overdue {
  color: #c54852;
}

.workspace .my-task-board-card-meta button.is-today {
  color: #087b73;
}

.my-task-board-card.is-completed .my-task-board-card-title > button:last-child {
  text-decoration: line-through;
}

.my-task-board-create-modal {
  display: grid;
  width: min(640px, 100%);
  max-height: min(680px, calc(100dvh - 48px));
  grid-template-rows: auto minmax(0, 1fr) auto;
  border-radius: 14px;
}

.my-task-board-create-header {
  padding: 18px 22px 16px;
}

.my-task-board-create-header > div {
  display: grid;
  gap: 3px;
}

.my-task-board-create-header span {
  color: #527fc5;
  font-size: 11px;
  font-weight: 750;
}

.my-task-board-create-header h3 {
  font-size: 19px;
}

.my-task-board-create-body {
  padding: 20px 22px;
  overflow-y: auto;
}

.my-task-board-create-composer.dashboard-task-composer {
  gap: 16px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.my-task-board-create-composer.dashboard-task-composer:focus-within {
  border-color: transparent;
  box-shadow: none;
}

.my-task-board-create-composer.dashboard-task-composer .dashboard-reminder-details {
  display: block;
  height: 44px;
  min-height: 44px;
}

.my-task-board-create-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--line-soft);
}

.workspace .my-task-board-create-actions button {
  min-height: 36px;
}

@media (max-width: 760px) {
  .work-log-week-page:has(.my-task-list-view:not([hidden])) {
    margin: -18px -16px -32px;
  }

  .my-task-list-header,
  .my-task-toolbar {
    padding-inline: 20px;
  }

  .my-task-list-header {
    align-items: stretch;
    flex-direction: column;
  }

  .my-task-header-actions {
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .my-task-table-columns span:first-child,
  .my-task-name-cell,
  .workspace .my-task-inline-add {
    padding-left: 20px;
  }

  .my-task-toolbar {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .my-task-inline-form.my-task-composer {
    margin: 10px 20px 14px;
  }

  .my-task-search {
    width: 100%;
    margin-left: 0;
  }

  .my-task-search input {
    width: 100%;
  }

  .my-task-board {
    grid-template-columns: repeat(4, 260px);
    padding: 14px 16px 24px;
  }

  .modal-backdrop:has(.my-task-board-create-modal) {
    padding: 12px;
  }

  .my-task-board-create-header,
  .my-task-board-create-body,
  .my-task-board-create-actions {
    padding-inline: 16px;
  }

  .my-task-board-create-composer .dashboard-reminder-options {
    padding-left: 0;
  }
}

.team-calendar-filters {
  position: relative;
  z-index: 10;
  display: flex;
  min-height: 58px;
  align-items: center;
  gap: 10px;
  padding: 8px 32px;
  flex-wrap: wrap;
  overflow: visible;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
}

.team-calendar-filters label {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}

.workspace .team-calendar-filters select {
  min-height: 34px;
  padding: 5px 28px 5px 9px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  box-shadow: none;
  cursor: pointer;
}

.workspace .team-calendar-filters select:hover,
.workspace .team-calendar-filters select:focus {
  background: #f1f2f4;
  color: var(--text);
  box-shadow: none;
}

.workspace .team-calendar-filters select:focus-visible {
  outline: 2px solid #3f70cf;
  outline-offset: 2px;
}

#teamCalendarScope,
#teamCalendarStatus {
  width: 118px;
}

#teamCalendarAssignee {
  width: 138px;
}

#teamCalendarProject {
  width: 150px;
}

.team-calendar-project-filter {
  position: relative;
  min-width: 0;
  max-width: 100%;
}

.workspace .team-calendar-project-trigger {
  display: flex;
  width: auto;
  min-width: 150px;
  max-width: 240px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 10px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  box-shadow: none;
}

.team-calendar-project-trigger > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace .team-calendar-project-trigger:hover,
.workspace .team-calendar-project-trigger[aria-expanded="true"] {
  background: #f1f2f4;
  color: var(--text);
}

.workspace .team-calendar-project-trigger.is-filtered {
  background: #edf2fb;
  color: #315fb5;
}

.team-calendar-project-panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  display: flex;
  flex-direction: column;
  width: 360px;
  max-width: calc(100vw - 32px);
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 30px rgb(32 31 28 / 12%);
}

.team-calendar-project-panel input {
  width: 100%;
  min-height: 36px;
  flex-shrink: 0;
  font-size: 12px;
}

.team-calendar-project-count {
  flex-shrink: 0;
  margin: 8px 4px;
  color: var(--muted);
  font-size: 12px;
}

.team-calendar-project-options {
  display: grid;
  gap: 2px;
  min-height: 0;
  max-height: 280px;
  padding: 3px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.workspace .team-calendar-project-options button {
  display: flex;
  width: 100%;
  height: auto;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  box-shadow: none;
}

.team-calendar-project-options strong,
.team-calendar-project-options small {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.team-calendar-project-options small {
  margin-top: 3px;
  color: var(--muted);
  font-weight: 400;
}

.workspace .team-calendar-project-options button:hover {
  background: #f1f2f4;
}

.workspace .team-calendar-project-options button[aria-pressed="true"] {
  background: #edf2fb;
  color: #315fb5;
}

.workspace .team-calendar-project-filter button:focus-visible {
  outline: 2px solid #3f70cf;
  outline-offset: 2px;
}

.team-calendar-filters .work-log-week-controls {
  gap: 5px;
  margin-left: 0;
}

.team-calendar-filters .work-log-week-controls button {
  min-width: 58px;
  padding-right: 9px;
  padding-left: 9px;
}

.work-log-week-header {
  justify-content: space-between;
  align-items: flex-start;
}

.work-log-week-header h2 {
  margin: 0;
}

.work-log-week-header p {
  color: var(--muted);
}

.work-log-week-controls {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  margin-left: auto;
}

.work-log-week-grid {
  height: calc(100vh - 180px);
  max-height: calc(100vh - 180px);
  overflow: auto;
  background: var(--line-soft);
}

.work-log-week-panel.team-calendar-mode .work-log-week-grid {
  height: calc(100vh - 190px);
  max-height: calc(100vh - 190px);
}

.work-log-week-grid.team-calendar-day-grid {
  overflow-x: auto;
  overflow-y: auto;
  overscroll-behavior-inline: contain;
  background: #fff;
}

.team-calendar-day-header,
.team-calendar-day-row {
  display: grid;
  grid-template-columns: 160px minmax(var(--day-timeline-width), 1fr);
  min-width: calc(160px + var(--day-timeline-width));
  border-bottom: 1px solid var(--line-soft);
  background: #fff;
}

.team-calendar-day-header {
  position: sticky;
  top: 0;
  z-index: 8;
  min-height: 58px;
}

.team-calendar-day-corner,
.team-calendar-day-member {
  position: sticky;
  left: 0;
  z-index: 5;
  border-right: 1px solid var(--line-soft);
  background: #fff;
}

.team-calendar-day-corner {
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 10px 14px;
}

.team-calendar-day-corner span,
.team-calendar-day-member > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.04em;
}

.team-calendar-day-corner strong,
.team-calendar-day-member > strong {
  font-size: 13px;
}

.team-calendar-day-hours {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--day-hour-count), minmax(96px, 1fr));
  align-items: end;
  background: #fafaf9;
}

.team-calendar-day-hours span {
  padding: 0 8px 10px;
  border-left: 1px solid var(--line-soft);
  color: #54534f;
  font-size: 11px;
  font-weight: 700;
}

.team-calendar-day-row {
  min-height: var(--day-row-height);
}

.team-calendar-day-member {
  display: grid;
  align-content: start;
  gap: 3px;
  min-height: var(--day-row-height);
  padding: 10px 12px;
  border-left: 4px solid #3f70cf;
}

.team-calendar-day-member small {
  color: var(--muted);
  font-size: 10px;
}

.team-calendar-day-timeline {
  position: relative;
  min-height: var(--day-row-height);
  background: #fff;
}

.team-calendar-day-now-head,
.team-calendar-day-now-line {
  position: absolute;
  left: var(--now-left);
  z-index: 4;
  width: 0;
  pointer-events: none;
}

.team-calendar-day-now-head {
  top: 0;
  bottom: 0;
  z-index: 7;
}

.team-calendar-day-now-head::after,
.team-calendar-day-now-line::after {
  position: absolute;
  left: -1px;
  width: 2px;
  background: #e35d67;
  content: "";
}

.team-calendar-day-now-head::after {
  top: 31px;
  bottom: -1px;
}

.team-calendar-day-now-head::before {
  position: absolute;
  left: -4px;
  bottom: -4px;
  z-index: 1;
  width: 8px;
  height: 8px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #e35d67;
  box-shadow: 0 0 0 1px rgb(227 93 103 / 22%);
  content: "";
}

.team-calendar-day-now-head span {
  position: absolute;
  top: 5px;
  left: 0;
  padding: 3px 6px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #e35d67;
  color: #fff;
  font-size: 9px;
  line-height: 14px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 2px 7px rgb(139 47 55 / 18%);
}

.team-calendar-day-now-line {
  top: 0;
  bottom: 0;
}

.team-calendar-day-now-line::after {
  inset-block: 0;
}

.team-calendar-day-now-head[hidden],
.team-calendar-day-now-line[hidden] {
  display: none;
}

.team-calendar-day-slots {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(var(--day-slot-count), minmax(48px, 1fr));
}

.workspace .team-calendar-day-slot {
  height: auto;
  min-height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  border-left: 1px solid rgba(233, 233, 230, 0.55);
  background: #fff;
  color: transparent;
  box-shadow: none;
}

.workspace .team-calendar-day-slot:nth-child(odd) {
  border-left-color: var(--line-soft);
}

.workspace .team-calendar-day-slot:hover,
.workspace .team-calendar-day-slot:focus-visible {
  outline: 0;
  background: rgba(24, 168, 159, 0.08);
  box-shadow: inset 0 0 0 1px rgba(24, 168, 159, 0.22);
}

.team-calendar-day-event {
  position: absolute;
  top: calc(8px + var(--event-lane) * 48px);
  left: calc(var(--event-left) + 3px);
  z-index: 3;
  display: grid;
  width: calc(var(--event-width) - 6px);
  min-width: 54px;
  min-height: 40px;
  align-content: center;
  gap: 2px;
  padding: 5px 7px;
  overflow: hidden;
  border: 1px solid #a9cbe7;
  border-left: 4px solid #4285bd;
  border-radius: 6px;
  background: #dcecf8;
  color: #223b4f;
  text-align: left;
  box-shadow: 0 1px 2px rgba(39, 66, 86, 0.08);
}

.team-calendar-day-event strong,
.team-calendar-day-event span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-calendar-day-event strong {
  font-size: 11px;
}

.team-calendar-day-event span {
  font-size: 9px;
  font-weight: 650;
}

.team-calendar-day-event.completed {
  opacity: 0.58;
}

.team-calendar-day-event.completed strong {
  text-decoration: line-through;
}

.work-log-week-header,
.work-log-week-row {
  display: grid;
  grid-template-columns: 160px repeat(7, minmax(128px, 1fr));
  min-width: 1063px;
  gap: 1px;
  background: var(--line-soft);
}

.work-log-week-row {
  min-height: 86px;
  border-bottom: 1px solid var(--line-soft);
}

.work-log-week-corner,
.work-log-week-day,
.work-log-week-project,
.work-log-week-cell {
  background: #fff;
}

.work-log-week-corner,
.work-log-week-day {
  position: sticky;
  top: 0;
  z-index: 3;
  min-height: 74px;
}

.work-log-week-corner {
  left: 0;
  z-index: 5;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 14px 16px;
}

.work-log-week-corner span,
.work-log-week-day span,
.work-log-week-project span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.04em;
}

.work-log-week-corner strong,
.work-log-week-day strong {
  font-size: 13px;
  line-height: 1.25;
}

.work-log-week-day {
  display: grid;
  place-content: center;
  gap: 4px;
  text-align: center;
}

.work-log-week-day.today {
  color: #0a736e;
  background: #eef9f7;
  box-shadow: inset 0 -3px #18a89f;
}

.work-log-week-project {
  position: sticky;
  left: 0;
  z-index: 2;
  display: grid;
  align-content: start;
  gap: 3px;
  min-height: 86px;
  padding: 10px 12px;
  border-left: 4px solid #7fc8c3;
}

.work-log-week-project strong {
  font-size: 13px;
  line-height: 1.35;
}

.work-log-week-project small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.work-log-week-cell {
  display: grid;
  align-content: start;
  min-width: 0;
  gap: 4px;
  min-height: 86px;
  padding: 6px;
  cursor: pointer;
  transition: background 150ms ease, box-shadow 150ms ease;
}

.work-log-week-cell.today {
  background: #fbfffe;
}

.team-calendar-cell {
  cursor: default;
}

.team-calendar-cell:hover {
  background: #fff;
  box-shadow: none;
}

.team-calendar-cell.today,
.team-calendar-cell.today:hover {
  background: #fbfffe;
}

.team-calendar-member {
  border-left-color: #3f70cf;
}

.team-calendar-item {
  min-width: 0;
  overflow: hidden;
  padding: 5px 7px;
  border: 1px solid #c4d5f2;
  border-left: 3px solid #3f70cf;
  border-radius: 7px;
  background: #eef4ff;
}

.team-calendar-item span,
.team-calendar-item p {
  display: block;
  overflow: hidden;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-calendar-item span {
  color: #315a9b;
  font-size: 9px;
  line-height: 12px;
  font-weight: 800;
}

.team-calendar-item p {
  margin-top: 2px;
  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
}

.team-calendar-item.completed {
  opacity: 0.65;
}

.team-calendar-item.completed p {
  text-decoration: line-through;
}

.work-log-week-cell:hover,
.work-log-week-cell:focus-visible {
  outline: 0;
  background: #f4fbfa;
  box-shadow: inset 0 0 0 2px rgba(24, 168, 159, 0.35);
}

.work-log-cell-add {
  align-self: end;
  opacity: 0;
  color: #167a74;
  font-size: 12px;
  font-weight: 750;
  transition: opacity 150ms ease;
}

.work-log-week-cell:hover .work-log-cell-add,
.work-log-week-cell:focus-visible .work-log-cell-add {
  opacity: 1;
}

.work-log-week-item {
  position: relative;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  padding: 5px 6px;
  border: 1px solid #dce6e4;
  border-radius: 7px;
  background: #fff;
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.work-log-week-item:hover {
  border-color: #94cfc9;
  box-shadow: 0 3px 12px rgba(34, 71, 68, 0.08);
}

.work-log-week-item.completed {
  background: #f8faf9;
}

.work-log-item-main {
  display: flex;
  align-items: flex-start;
  min-width: 0;
  width: 100%;
  gap: 6px;
}

.work-log-item-checkbox {
  display: inline-grid;
  flex: 0 0 16px;
  align-self: flex-start;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  min-height: 0;
  max-height: 16px;
  padding: 0;
  border: 1.5px solid #9da9a7;
  border-radius: 4px;
  place-items: center;
  background: #fff;
  color: transparent;
  line-height: 1;
  aspect-ratio: 1;
}

.work-log-item-checkbox span {
  color: inherit;
  font-size: 10px;
  font-weight: 900;
}

.work-log-item-checkbox.checked {
  border-color: #168e86;
  background: #168e86;
  color: #fff;
}

.work-log-item-checkbox:disabled {
  cursor: default;
  opacity: 0.75;
}

.work-log-item-copy {
  min-width: 0;
}

.work-log-item-copy p {
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-log-week-item.completed .work-log-item-copy p {
  color: #7e8987;
  text-decoration: line-through;
}

.work-log-item-meta {
  display: none;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  gap: 6px;
  margin-top: 5px;
}

.work-log-item-meta span {
  min-width: 0;
  overflow: hidden;
  color: #6c7775;
  font-size: 10px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-log-result-indicator {
  width: auto;
  min-height: 20px;
  padding: 2px 6px;
  border: 0;
  border-radius: 999px;
  background: #eef6f5;
  color: #26766f;
  font-size: 10px;
}

.work-log-complete-menu {
  position: absolute;
  top: 29px;
  left: 7px;
  z-index: 8;
  display: grid;
  min-width: 132px;
  padding: 5px;
  border: 1px solid #d7dfdd;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(25, 42, 40, 0.16);
}

.work-log-complete-menu[hidden] {
  display: none;
}

.work-log-complete-menu button {
  min-height: 30px;
  padding: 6px 9px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--ink);
  font-size: 11px;
  text-align: left;
}

.work-log-complete-menu button:hover {
  background: #eef8f7;
}

.work-log-week-project.cross-project {
  border-left-color: #9a86cf;
  background: #faf8ff;
}

.work-log-week-cell.cross-project {
  cursor: default;
  background: #fdfcff;
}

.work-log-week-empty {
  grid-column: 1 / -1;
  padding: 48px 24px;
  background: #fff;
  color: var(--muted);
  text-align: center;
}

.work-log-item-modal {
  width: min(620px, calc(100vw - 32px));
  overflow-y: auto;
}

.work-log-item-modal .form-body {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.work-log-item-modal .form-actions > button {
  height: 38px;
  min-height: 38px;
}

.work-log-mention-field {
  position: relative;
}

.work-log-mention-menu {
  display: grid;
  max-height: 172px;
  padding: 5px;
  overflow-y: auto;
  border: 1px solid #d5dedc;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(28, 43, 41, 0.12);
}

.work-log-mention-menu[hidden] {
  display: none;
}

.work-log-mention-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
  padding: 6px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.work-log-mention-menu button:hover,
.work-log-mention-menu button.is-active {
  background: #edf8f6;
}

.work-log-mention-menu small {
  color: var(--muted);
  font-size: 11px;
}

.work-log-selected-collaborator {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid #d7e6e4;
  border-radius: 7px;
  background: #f3faf9;
  font-size: 12px;
}

.work-log-selected-collaborator[hidden] {
  display: none;
}

.work-log-selected-collaborator span {
  color: var(--muted);
}

.work-log-selected-collaborator strong {
  color: #167a74;
}

.work-log-selected-collaborator button {
  width: 24px;
  min-height: 24px;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
}

.vehicle-card-button {
  display: grid;
  min-height: 136px;
  gap: 8px;
  align-content: center;
  justify-items: start;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(55, 53, 47, 0.03);
}

.vehicle-card-button:hover {
  border-color: var(--text);
  box-shadow: 0 8px 20px rgb(20 20 18 / 8%);
}

.vehicle-card-button strong {
  font-size: 18px;
}

.vehicle-card-button span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #eaf5eb;
  color: #2f6b3a;
  font-size: 12px;
  font-weight: 800;
}

.vehicle-card-button small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.vehicle-card-button em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.45;
}

.vehicle-card-button b {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin-top: 4px;
  padding: 4px 12px;
  border-radius: 6px;
  background: var(--text);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.vehicle-card-button.is-active {
  border-color: #d8d8d2;
  background: #f1f1ef;
  color: var(--muted);
}

.vehicle-card-button.is-active span {
  background: #deded9;
  color: #5f5d57;
}

.vehicle-card-button.is-overdue {
  border-color: #d46a4c;
  background: #fff3ee;
  color: var(--text);
}

.vehicle-card-button.is-overdue span {
  background: #f9d8ce;
  color: #9c3d24;
}

.vehicle-booking-modal .form-body {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 8px 24px 24px;
}

.vehicle-booking-modal {
  width: min(660px, calc(100vw - 32px));
  border: 0;
  border-radius: 18px;
  box-shadow: 0 24px 70px rgb(20 20 18 / 24%);
}

.vehicle-booking-modal .ledger-modal-header {
  padding: 24px 24px 16px;
  border-bottom: 0;
}

.vehicle-booking-modal .ledger-modal-header p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.vehicle-booking-modal .icon-button,
.announcement-management-modal .icon-button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #68696e;
}

.vehicle-booking-modal .icon-button:hover,
.announcement-management-modal .icon-button:hover {
  background: #f1f1f3;
  color: var(--text);
}

.vehicle-booking-modal .icon-button:focus-visible,
.announcement-management-modal .icon-button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.vehicle-booking-modal .form-body label {
  gap: 8px;
  color: #63646a;
  font-size: 13px;
}

.vehicle-booking-modal .form-body input {
  min-height: 44px;
  border-color: #dedfe3;
  border-radius: 10px;
  background: #f8f8f9;
}

.datetime-now-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.datetime-now-field .secondary-button {
  min-height: 40px;
  padding-inline: 12px;
  border: 0;
  border-radius: 9px;
  background: #efeff1;
  white-space: nowrap;
}

.datetime-now-field .secondary-button:hover {
  background: #e3e3e6;
}

.vehicle-booking-modal-actions {
  margin-top: 2px;
  padding-top: 4px;
  justify-content: flex-end;
}

.vehicle-booking-modal-actions .form-message {
  margin-right: auto;
}

.vehicle-booking-modal-actions .secondary-button {
  min-height: 40px;
  padding-inline: 12px;
  border: 0;
  background: transparent;
  color: #66676c;
}

.vehicle-booking-modal-actions .secondary-button:hover {
  background: #f1f1f3;
}

.vehicle-booking-modal-actions .primary-button {
  min-height: 42px;
  padding-inline: 18px;
  border-radius: 9px;
}

@media (max-width: 560px) {
  .modal-backdrop:has(.vehicle-booking-modal) {
    padding: 8px;
  }

  .vehicle-booking-modal {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    border-radius: 14px;
  }

  .vehicle-booking-modal .ledger-modal-header {
    padding: 18px 18px 14px;
  }

  .vehicle-booking-modal .form-body {
    padding: 6px 16px 18px;
    overflow-y: auto;
  }

  .vehicle-booking-modal-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .vehicle-booking-modal-actions .form-message {
    grid-column: 1 / -1;
  }
}

.vehicle-schedule-modal {
  display: flex;
  width: min(1500px, calc(100vw - 48px));
  height: min(900px, calc(100vh - 48px));
  max-height: calc(100vh - 48px);
  flex-direction: column;
}

.vehicle-schedule-modal .ledger-modal-header {
  flex: 0 0 auto;
}

.vehicle-schedule-modal .ledger-modal-header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.vehicle-schedule-toolbar {
  display: grid;
  grid-template-columns: auto minmax(150px, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.vehicle-schedule-navigation,
.vehicle-schedule-legend {
  display: flex;
  align-items: center;
  gap: 7px;
}

.workspace .vehicle-schedule-navigation button {
  width: auto;
  min-height: 32px;
  padding: 5px 10px;
  white-space: nowrap;
}

.vehicle-schedule-toolbar > strong {
  color: var(--text);
  font-size: 14px;
  text-align: center;
}

.vehicle-schedule-legend {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.vehicle-schedule-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #5f6065;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.vehicle-schedule-legend i {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--vehicle-color);
}

.vehicle-schedule-scroll {
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  background: #fff;
  overscroll-behavior: contain;
}

.vehicle-schedule-grid {
  display: grid;
  min-width: 1212px;
  grid-template-columns: 64px repeat(7, minmax(164px, 1fr));
  grid-template-rows: 54px calc(var(--schedule-hour-height) * 24);
  position: relative;
}

.vehicle-schedule-corner,
.vehicle-schedule-day-header {
  position: sticky;
  top: 0;
  z-index: 4;
  display: grid;
  place-content: center;
  border-bottom: 1px solid #d8d9dc;
  background: #fff;
}

.vehicle-schedule-corner {
  left: 0;
  z-index: 6;
  border-right: 1px solid #d8d9dc;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.vehicle-schedule-day-header {
  gap: 2px;
  border-right: 1px solid var(--line-soft);
  color: var(--muted);
  text-align: center;
}

.vehicle-schedule-day-header span {
  font-size: 11px;
  font-weight: 700;
}

.vehicle-schedule-day-header strong {
  color: var(--text);
  font-size: 12px;
}

.vehicle-schedule-day-header.is-today {
  background: #f5f7fb;
}

.vehicle-schedule-day-header.is-today strong {
  color: #3568ba;
}

.vehicle-schedule-time-axis {
  position: sticky;
  left: 0;
  z-index: 3;
  display: grid;
  grid-template-rows: repeat(24, var(--schedule-hour-height));
  border-right: 1px solid #d8d9dc;
  background: #fff;
}

.vehicle-schedule-time-axis span {
  position: relative;
  top: -7px;
  padding-right: 8px;
  color: #7b7c81;
  font-size: 10px;
  line-height: 14px;
  text-align: right;
}

.vehicle-schedule-day {
  position: relative;
  min-width: 0;
  height: calc(var(--schedule-hour-height) * 24);
  border-right: 1px solid var(--line-soft);
  background-color: #fff;
  background-image:
    linear-gradient(to right, transparent 24.7%, #f0f0f2 25%, transparent 25.3%, transparent 49.7%, #f0f0f2 50%, transparent 50.3%, transparent 74.7%, #f0f0f2 75%, transparent 75.3%),
    repeating-linear-gradient(to bottom, #e3e4e7 0, #e3e4e7 1px, transparent 1px, transparent var(--schedule-hour-height));
}

.vehicle-schedule-day.is-today {
  background-color: #fafbfe;
}

.vehicle-schedule-booking {
  position: absolute;
  z-index: 2;
  left: calc((100% / 4) * var(--vehicle-lane) + 3px);
  width: calc(25% - 6px);
  min-height: 18px;
  overflow: hidden;
  padding: 3px 2px;
  border: 1px solid color-mix(in srgb, var(--vehicle-color), #000 12%);
  border-radius: 5px;
  background: color-mix(in srgb, var(--vehicle-color), #fff 19%);
  box-shadow: 0 1px 2px rgb(20 20 18 / 10%);
  color: #fff;
  line-height: 1.15;
}

.vehicle-schedule-booking strong,
.vehicle-schedule-booking span,
.vehicle-schedule-booking small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vehicle-schedule-booking strong {
  font-size: 9px;
}

.vehicle-schedule-booking span,
.vehicle-schedule-booking small {
  margin-top: 2px;
  font-size: 9px;
}

.vehicle-schedule-booking.is-returned {
  opacity: 0.66;
}

@media (max-width: 760px) {
  .modal-backdrop:has(.vehicle-schedule-modal) {
    padding: 10px;
  }

  .vehicle-schedule-modal {
    width: calc(100vw - 20px);
    height: calc(100vh - 20px);
    max-height: calc(100vh - 20px);
  }

  .vehicle-schedule-toolbar {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .vehicle-schedule-navigation,
  .vehicle-schedule-legend {
    justify-content: center;
  }
}

.template-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.template-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  background: var(--soft);
  cursor: pointer;
  list-style: none;
}

.template-section-header::-webkit-details-marker {
  display: none;
}

.template-section[open] .template-section-header {
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.template-section-header h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.35;
}

.template-section-toggle-label {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.template-section-toggle-label::after {
  content: "展開";
}

.template-section[open] .template-section-toggle-label::after {
  content: "收合";
}

.template-list {
  display: grid;
  gap: 8px;
  padding: 12px 16px 14px;
  background: var(--soft);
}

.template-list-item {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 58px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.template-list-item:hover {
  border-color: #d7d3ca;
  background: #fbfaf7;
}

.template-list-item strong {
  display: block;
  font-size: 14px;
  line-height: 1.45;
}

.template-list-item small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.template-list-action {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.template-list-empty {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-size: 13px;
}

.template-preview-modal {
  width: min(960px, 100%);
  max-height: min(820px, calc(100vh - 48px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 50px rgb(20 20 18 / 18%);
}

.template-preview-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.template-preview-header h2 {
  margin: 0;
  font-size: 18px;
}

.template-preview-header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.template-preview-body {
  min-height: 420px;
  overflow: hidden;
  background: var(--soft);
}

.template-preview-body iframe {
  display: block;
  width: 100%;
  height: min(72vh, 720px);
  border: 0;
  background: #fff;
}

.template-preview-file {
  min-height: 320px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 24px;
  color: var(--muted);
  text-align: center;
}

.template-preview-file strong {
  color: var(--text);
}

@media (max-width: 1180px) {
  .topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .topbar > div:first-child {
    min-width: 0;
  }
}

@media (max-width: 640px) {
  .customer-directory-subsection-tools {
    width: 100%;
    justify-content: space-between;
  }

  .master-data-contact-dialog {
    width: calc(100vw - 20px);
  }

  .master-data-contact-confirm-dialog {
    width: calc(100vw - 20px);
  }

  .master-data-contact-dialog-header,
  .master-data-contact-dialog .master-data-contact-dialog-body,
  .master-data-contact-dialog-actions {
    padding-right: 16px;
    padding-left: 16px;
  }

  .master-data-contact-dialog-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .master-data-contact-dialog-primary-actions {
    width: 100%;
  }

  .master-data-contact-dialog-primary-actions > button {
    flex: 1 1 0;
  }
}

@media (max-width: 760px) {

  .venue-document-upload-heading,
  .venue-document-email-header,
  .venue-document-email-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .venue-document-email-actions button {
    width: 100%;
  }

  .quotation-face-modal-body {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .quotation-cuboid-stage {
    height: 220px;
  }

  .quotation-face-control-heading {
    flex-direction: column;
  }

  .quotation-face-options {
    grid-template-columns: 1fr;
  }

  .quotation-face-modal-actions {
    flex-wrap: wrap;
  }

  .quotation-command-bar {
    position: static;
  }

  .quotation-editor-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .quotation-editor-toolbar .quotation-mode-tabs {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .quotation-mode-tabs {
    width: 100%;
    overflow-x: auto;
  }



  .quotation-inline-actions {
    flex-wrap: wrap;
    padding-left: 16px;
  }

  .quotation-add-main-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .topbar-identity {
    gap: 12px;
  }

  .topbar-title-copy {
    width: 100%;
    padding-left: 0;
    border-left: 0;
  }

  .module-nav {
    margin-top: -4px;
  }

  .module-nav-tab {
    justify-content: center;
    width: 100%;
  }

  .module-nav-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .notification-center {
    justify-self: start;
  }

  .project-status-column {
    flex-basis: min(300px, 86vw);
  }

  .work-log-week-header {
    align-items: stretch;
    flex-direction: column;
  }

  .work-log-week-controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .work-log-week-grid {
    height: auto;
    max-height: none;
  }

  .work-log-week-panel.team-calendar-mode .work-log-week-grid {
    height: auto;
    max-height: none;
  }

  .work-log-week-header,
  .work-log-week-row {
    grid-template-columns: 160px repeat(7, minmax(140px, 1fr));
    min-width: 1147px;
  }
}

@media (max-width: 560px) {
  .team-calendar-filters {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .team-calendar-filters label,
  .team-calendar-filters select {
    width: 100%;
  }

  #teamCalendarScope,
  #teamCalendarAssignee,
  #teamCalendarProject,
  #teamCalendarStatus {
    width: 100%;
  }

  .app-shell {
    grid-template-columns: 1fr;
  }

  .topbar {
    flex-direction: column;
    align-items: stretch;
  }

  input,
  select,
  button {
    width: 100%;
  }

  .module-nav-tabs {
    grid-template-columns: 1fr;
  }

  .kpi-grid,
  .project-info-edit,
  .project-info-edit-groups,
  .cost-chart-grid,
  .cost-form,
  .cost-context-fields,
  .cost-dynamic-fields,
  .content-grid,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .vehicle-booking-modal .form-body {
    grid-template-columns: 1fr;
  }

  .datetime-now-field {
    grid-template-columns: 1fr;
  }

  .form-body {
    grid-template-columns: 1fr;
  }

  .form-body .span-2 {
    grid-column: auto;
  }

  .cost-form .span-2 {
    grid-column: auto;
  }

  .quotation-form-header,
  .quotation-card-header,
  .quotation-actions,
  .quotation-result-header {
    align-items: stretch;
    flex-direction: column;
  }

  .quotation-result-header {
    align-items: flex-start;
    flex-direction: row;
  }

  .quotation-actions {
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .quotation-form-actions {
    align-items: stretch;
    flex-direction: column;
    flex-wrap: wrap;
  }

  .quotation-live-totals {
    width: 100%;
    min-width: 0;
    margin-left: 0;
  }

  .quotation-live-totals > div {
    min-width: 0;
  }

  .quotation-page-body {
    padding-inline: 0;
  }

  .cost-batch-header {
    align-items: stretch;
    flex-direction: column;
  }

  .member-row,
  .session-row,
  .work-log-entry-row {
    grid-template-columns: 1fr;
  }

  .work-log-item-modal .form-body {
    grid-template-columns: 1fr;
  }

  .project-info-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .project-summary-identity {
    align-items: stretch;
    flex-direction: column;
  }

  .project-summary-statuses {
    justify-content: flex-start;
  }

  .project-info-edit-groups .project-session-row {
    grid-template-columns: 1fr;
  }

  .icon-button {
    width: 100%;
  }
}

.user-account-form {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.employee-form-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.employee-form-fields .employee-form-wide {
  grid-column: span 2;
}

.pm-code-availability.duplicate {
  color: var(--red-text);
}

.employee-management-page {
  grid-template-columns: minmax(0, 1fr);
}

.employee-management-page > .panel {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.employee-management-page > .panel > .panel-header,
.employee-management-page > .panel > .form-body {
  padding-inline: 0;
}

.project-list-page-header.employee-directory-page-header {
  align-items: flex-end;
}

.employee-directory-page-heading {
  min-width: 0;
}

.employee-directory-page-heading h2,
.employee-directory-page-heading p {
  margin: 0;
}

.employee-directory-page-heading p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.employee-directory-page-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
}

.app-shell .employee-directory-table-scroll {
  border-top: 1px solid var(--line);
}

.app-shell .employee-directory-table {
  min-width: 860px;
  table-layout: fixed;
}

.app-shell .employee-directory-table th {
  height: 40px;
  padding: 0 14px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.app-shell .employee-directory-table td {
  height: 60px;
  padding: 10px 14px;
  background: transparent;
  vertical-align: middle;
}

.app-shell .employee-directory-table tbody tr:first-child td {
  border-top: 0;
}

.app-shell .employee-directory-table tbody tr:hover td {
  background: #fafafb;
}

.app-shell .employee-directory-table td strong {
  font-size: 13px;
  font-weight: 700;
}

.app-shell .employee-directory-table .table-subtext {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.app-shell .employee-directory-number {
  color: #4e5055;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.app-shell .employee-directory-table .employee-number-column {
  width: 15%;
}

.app-shell .employee-directory-table .employee-name-column {
  width: 19%;
}

.app-shell .employee-directory-table .employee-department-column {
  width: 25%;
}

.app-shell .employee-directory-table .employee-supervisor-column {
  width: 18%;
}

.app-shell .employee-directory-table .employee-hire-date-column {
  width: auto;
}

.app-shell .employee-directory-table .employee-status-column,
.app-shell .employee-directory-table th:last-child,
.app-shell .employee-directory-table td:last-child {
  width: 88px;
  white-space: nowrap;
}

.app-shell .employee-directory-table .stage-pill {
  min-width: 48px;
  justify-content: center;
}

.app-shell .employee-directory-table tbody tr[data-open-employee-detail] {
  cursor: pointer;
}

.app-shell .employee-directory-table tbody tr[data-open-employee-detail]:focus-visible {
  outline: 2px solid #3f70cf;
  outline-offset: -2px;
}

.employee-detail-panel[hidden] {
  display: none;
}

.employee-directory-detail-content {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.employee-directory-detail-header,
.employee-directory-detail-heading,
.employee-directory-detail-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.employee-directory-detail-header {
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.employee-directory-detail-heading {
  min-width: 0;
}

.employee-directory-detail-heading > div {
  min-width: 0;
}

.employee-directory-detail-heading .eyebrow,
.employee-directory-detail-heading h2,
.employee-directory-detail-heading p {
  margin: 0;
}

.employee-directory-detail-heading .eyebrow {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.employee-directory-detail-heading h2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 3px;
  font-size: 20px;
  line-height: 1.35;
}

.employee-directory-detail-heading p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.employee-directory-detail-actions {
  flex: 0 0 auto;
  gap: 8px;
}

.workspace .employee-directory-detail-actions .employee-detail-action {
  min-width: 104px;
  height: 36px;
  padding-inline: 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 750;
}

.workspace .employee-directory-detail-actions .employee-detail-payroll-action {
  border-color: #cfd8e8;
  background: #fff;
  color: #315fae;
}

.workspace .employee-directory-detail-actions .employee-detail-payroll-action:hover {
  border-color: #b9c8df;
  background: #f4f7fc;
}

.workspace .employee-directory-detail-actions .employee-detail-employment-action {
  border-color: #3f70cf;
  background: #3f70cf;
  color: #fff;
}

.workspace .employee-directory-detail-actions .employee-detail-employment-action:hover {
  border-color: #315fb5;
  background: #315fb5;
}

.employee-directory-detail-section {
  padding-top: 24px;
}

.employee-directory-section-heading {
  padding-bottom: 14px;
}

.employee-directory-section-heading h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 16px;
  line-height: 1.35;
}

.employee-directory-section-heading h3::before {
  width: 4px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #3f70cf;
  content: "";
}

.employee-directory-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.employee-directory-summary > div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 14px 16px 14px 0;
}

.employee-directory-summary > div:nth-child(even) {
  padding-right: 0;
}

.employee-directory-summary > .employee-directory-summary-wide {
  grid-column: 1 / -1;
  padding-right: 0;
}

.employee-directory-summary dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.employee-directory-summary dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.5;
}

.employee-editor-backdrop {
  z-index: 70;
}

.employee-editor-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(760px, calc(100vw - 48px));
  max-height: min(760px, calc(100dvh - 48px));
  border-color: #dfe3e8;
  border-radius: 12px;
  box-shadow: 0 24px 72px rgb(19 28 45 / 22%);
}

.employee-editor-modal-header {
  align-items: flex-start;
  padding: 18px 20px 16px;
  background: #fff;
}

.employee-editor-modal-header > div {
  min-width: 0;
}

.employee-editor-modal-header span {
  display: block;
  margin-bottom: 5px;
  color: #5d7fba;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.employee-editor-modal-header h3,
.employee-editor-modal-header p {
  margin: 0;
}

.employee-editor-modal-header h3 {
  font-size: 20px;
  line-height: 1.35;
}

.employee-editor-modal-header p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.workspace .employee-editor-modal-header .icon-button {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 20px;
}

.workspace .employee-editor-modal-header .icon-button:hover {
  background: #f1f3f6;
  color: var(--text);
}

.employee-editor-modal-body,
.employee-compensation-modal-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 20px;
  background: #f6f7f9;
}

.employee-employment-modal .employee-form-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.employee-employment-modal .employee-form-fields label,
.employee-payroll-fields label {
  display: grid;
  min-width: 0;
  gap: 7px;
  color: #606269;
  font-size: 12px;
  font-weight: 700;
}

.employee-employment-modal .employee-form-fields input,
.employee-employment-modal .employee-form-fields select,
.employee-payroll-fields input,
.employee-payroll-fields select,
.employee-payroll-fields textarea {
  width: 100%;
  min-width: 0;
  border-color: #dfe2e7;
  background: #fff;
  color: var(--text);
  font-weight: 400;
}

.employee-editor-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px 16px;
  border-top: 1px solid #e3e6ea;
  background: #fff;
}

.employee-editor-modal-footer .form-message {
  margin-right: auto;
}

.workspace .employee-editor-modal-footer button {
  min-width: 96px;
  height: 38px;
  border-radius: 8px;
}

.workspace .employee-editor-modal-footer .primary-button {
  border-color: #3f70cf;
  background: #3f70cf;
}

.workspace .employee-editor-modal-footer .primary-button:hover {
  border-color: #315fb5;
  background: #315fb5;
}

.employee-compensation-modal {
  width: min(1080px, calc(100vw - 48px));
}

.employee-compensation-modal-body {
  display: grid;
  gap: 18px;
}

.employee-payroll-form {
  display: grid;
  gap: 14px;
}

.employee-payroll-group,
.employee-compensation-history {
  overflow: hidden;
  border: 1px solid #e1e4e8;
  border-radius: 10px;
  background: #fff;
}

.employee-payroll-group-title {
  display: block;
  padding: 14px 16px 11px;
  border-bottom: 1px solid #eceef1;
  font-size: 13px;
  line-height: 1.4;
}

.employee-payroll-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 16px;
}

.employee-payroll-note {
  grid-column: 1 / -1;
}

.employee-payroll-note textarea {
  min-height: 72px;
  padding: 10px 11px;
  resize: vertical;
}

.employee-payroll-actions {
  margin-top: 2px;
  border: 0;
  border-radius: 10px;
}

.employee-compensation-history > header {
  padding: 14px 16px 11px;
  border-bottom: 1px solid #eceef1;
}

.employee-compensation-history h4,
.employee-compensation-history p {
  margin: 0;
}

.employee-compensation-history h4 {
  font-size: 13px;
}

.employee-compensation-history p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.employee-compensation-history .payroll-table-scroll {
  max-width: 100%;
  overflow-x: auto;
}

.employee-compensation-history .payroll-table-scroll table {
  min-width: 900px;
}

.employee-compensation-history .payroll-table-scroll th,
.employee-compensation-history .payroll-table-scroll td {
  padding: 10px 12px;
  font-size: 11px;
}

@media (max-width: 720px) {
  .project-list-page-header.employee-directory-page-header {
    align-items: stretch;
  }

  .employee-directory-page-actions {
    justify-content: space-between;
  }

  .workspace .employee-directory-page-actions .project-list-primary-action {
    width: auto;
  }

  .app-shell .employee-directory-table-scroll {
    margin-inline: -16px;
    padding-inline: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .employee-directory-detail-header {
    align-items: stretch;
    flex-direction: column;
  }

  .employee-directory-detail-actions {
    flex-wrap: wrap;
  }

  .employee-directory-detail-actions > button {
    flex: 1 1 160px;
  }

  .employee-editor-backdrop {
    padding: 8px;
  }

  .employee-editor-modal,
  .employee-compensation-modal {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: 10px;
  }

  .employee-editor-modal-header {
    padding: 16px;
  }

  .employee-editor-modal-body,
  .employee-compensation-modal-body {
    padding: 14px;
  }

  .employee-employment-modal .employee-form-fields,
  .employee-payroll-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .employee-payroll-note {
    grid-column: auto;
  }

  .employee-editor-modal-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 12px 14px 14px;
  }

  .employee-editor-modal-footer .form-message {
    grid-column: 1 / -1;
    margin-right: 0;
  }

  .employee-directory-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .employee-directory-summary > div,
  .employee-directory-summary > div:nth-child(even) {
    padding-right: 0;
  }
}

/* Project entry arrangement workspace */
.entry-session-list-workspace,
.entry-session-workspace {
  padding: 24px;
}

.entry-session-header,
.entry-arrangement-actions,
.entry-session-card-statuses {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.entry-session-header h2 {
  margin: 0;
}

.entry-session-header p {
  margin: 5px 0 0;
  color: var(--muted);
}

.entry-session-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 20px;
}

.entry-session-card {
  display: block;
  width: 100%;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: inherit;
  text-align: left;
}

.entry-session-card:hover {
  border-color: #9aa3af;
  box-shadow: 0 8px 24px rgb(15 23 42 / 8%);
  transform: translateY(-1px);
}

.entry-session-card-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.entry-session-card-title span,
.entry-session-card dt,
.entry-session-card-statuses,
.entry-session-card-counts span {
  color: var(--muted);
  font-size: 13px;
}

.entry-session-card-title strong {
  font-size: 18px;
}

.entry-session-card dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.entry-session-card dl div {
  min-width: 0;
}

.entry-session-card dd {
  margin: 4px 0 0;
  font-weight: 650;
}

.entry-session-card-counts {
  display: flex;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.entry-session-card-counts span {
  padding: 5px 8px;
  border-radius: 6px;
  background: var(--sidebar);
}

.entry-session-card-counts strong {
  color: var(--text);
}

.entry-session-header {
  justify-content: flex-start;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.entry-session-header > button {
  flex: 0 0 auto;
}

.entry-workspace-tabs {
  margin: 18px 0;
}

.entry-workspace-panel {
  min-width: 0;
}

.entry-arrangement-form,
.entry-document-workspace,
.entry-email-loading {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.entry-external-vendor-form {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.entry-internal-roster-form {
  padding: 0;
  overflow: hidden;
}

.entry-roster-status-bar {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 17px 20px;
  border-bottom: 1px solid var(--line-soft);
  background: #f7f9fc;
}

.entry-roster-status-bar > div:first-child {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 10px;
}

.entry-roster-status-bar strong,
.entry-roster-status-bar p {
  margin: 0;
}

.entry-roster-status-bar p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.entry-roster-status-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  margin-top: 5px;
  border-radius: 50%;
  background: #3f70cf;
  box-shadow: 0 0 0 4px rgb(63 112 207 / 12%);
}

.entry-internal-roster-form.is-draft .entry-roster-status-dot {
  background: #d69028;
  box-shadow: 0 0 0 4px rgb(214 144 40 / 13%);
}

.entry-roster-status-actions,
.entry-roster-add-controls {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.entry-roster-add-controls {
  justify-content: flex-end;
  padding: 16px 20px 0;
}

.entry-internal-person-list {
  display: grid;
  min-width: 0;
  padding: 0 20px;
}

.entry-internal-person-row {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(160px, 0.75fr) minmax(210px, 1fr) minmax(190px, 0.85fr) minmax(210px, 1fr) minmax(210px, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 18px 0;
  border-top: 1px solid var(--line-soft);
}

.entry-internal-person-row:first-child {
  border-top: 0;
}

.entry-internal-person-list.editing .entry-internal-person-row {
  grid-template-columns: minmax(170px, 0.8fr) minmax(170px, 1fr) minmax(190px, 1fr) minmax(190px, 1fr) auto auto;
}

.entry-internal-person-list.editing label {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.entry-internal-person-list.editing label > span {
  color: var(--muted);
  font-size: 11px;
}

.entry-internal-person-list.editing input {
  width: 100%;
  min-width: 0;
}

.entry-internal-person-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.entry-internal-person-identity > div,
.entry-person-time-cell {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.entry-internal-person-identity strong,
.entry-person-time-cell strong {
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.45;
}

.entry-internal-person-identity > div > span,
.entry-person-time-cell > span,
.entry-roster-source {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.entry-person-time-cell small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.entry-night-review-bar {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 20px;
  border-top: 1px solid var(--line-soft);
  background: #f8faff;
}

.entry-night-review-bar strong,
.entry-night-review-bar p {
  margin: 0;
}

.entry-night-review-bar p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.entry-night-review-controls {
  flex: 0 0 auto;
}

.entry-night-review-controls label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
}

.entry-night-review-controls > button {
  border-color: #3f70cf;
  background: #3f70cf;
  color: #fff;
}

.entry-person-time-cell .project-overview-text-action {
  justify-self: start;
  margin-top: 4px;
  padding: 0;
  font-size: 12px;
}

.entry-internal-roster-form > .form-message {
  margin: 0 20px;
}

.entry-internal-roster-form > .entry-arrangement-actions {
  padding: 16px 20px 20px;
  border-top: 1px solid var(--line-soft);
}

.entry-time-modal {
  width: min(560px, calc(100vw - 32px));
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 24px 64px rgb(15 23 42 / 20%);
}

.entry-time-modal > header,
.entry-time-modal > footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
}

.entry-time-modal > header {
  justify-content: space-between;
  border-bottom: 1px solid var(--line-soft);
}

.entry-time-modal > header span {
  color: var(--muted);
  font-size: 11px;
}

.entry-time-modal > header h3 {
  margin: 2px 0 0;
  font-size: 16px;
}

.entry-time-modal-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 20px;
}

.entry-time-modal-fields label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.entry-time-note-field {
  grid-column: 1 / -1;
}

.entry-time-modal-fields textarea {
  resize: vertical;
}

.entry-time-modal > footer {
  border-top: 1px solid var(--line-soft);
}

.entry-time-modal > footer span {
  flex: 1;
}

.entry-add-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.entry-add-controls select {
  min-width: 190px;
}

.entry-external-vendor-toolbar {
  display: flex;
  justify-content: flex-end;
  padding: 0 0 8px;
}

.entry-external-vendor-toolbar .entry-add-controls select {
  height: 34px;
  min-width: 280px;
  padding: 0 28px 0 2px;
  border: 0;
  border-bottom: 1px solid #d7dae0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}

.entry-external-vendor-toolbar .entry-add-controls select:hover {
  border-bottom-color: #aeb4bf;
}

.entry-external-vendor-toolbar .entry-add-controls select:focus {
  border-bottom-color: var(--primary);
  box-shadow: 0 1px 0 var(--primary);
}

.entry-vendor-card-list {
  display: grid;
  gap: 16px;
  margin-top: 10px;
}

.entry-vendor-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.entry-vendor-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 14px;
}

.entry-vendor-card > header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 750;
  line-height: 1.4;
}

.workspace .entry-vendor-card > header .secondary-button {
  width: auto;
  height: 32px;
  flex: 0 0 auto;
  padding: 4px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #56575b;
  font-weight: 700;
}

.workspace .entry-external-vendor-toolbar .secondary-button {
  width: auto;
  height: 32px;
  flex: 0 0 auto;
  padding: 4px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #56575b;
  font-weight: 700;
}

.workspace .entry-vendor-card > header .secondary-button:hover,
.workspace .entry-external-vendor-toolbar .secondary-button:hover {
  background: #f1f1f3;
  color: var(--text);
}

.workspace .entry-vendor-card > header .secondary-button:focus-visible,
.workspace .entry-external-vendor-toolbar .secondary-button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.workspace .entry-vendor-card-remove {
  display: inline-flex;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
}

.workspace .entry-vendor-card-remove:hover,
.workspace .entry-vendor-card-remove:focus-visible {
  background: #eef1f5;
  color: #b04444;
}

.entry-vendor-card-remove svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.entry-vendor-card-section {
  min-width: 0;
  padding: 16px 18px 18px;
  border-top: 1px solid var(--line-soft);
}

.entry-vendor-card-section + .entry-vendor-card-section {
  margin-top: 2px;
}

.entry-vendor-card-actions {
  display: flex;
  justify-content: flex-end;
  padding: 14px 18px 16px;
  border-top: 1px solid var(--line-soft);
}

.entry-vendor-card-section h4 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 750;
}

.entry-vendor-table-scroll {
  width: 100%;
  overflow-x: auto;
}

.entry-vendor-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  table-layout: fixed;
}

.entry-vendor-vehicle-table {
  min-width: 520px;
}

.entry-vendor-check-column {
  width: 44px;
}

.entry-vendor-table th,
.entry-vendor-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--text);
  font-size: 12px;
  line-height: 1.45;
  text-align: left;
  vertical-align: middle;
  overflow-wrap: anywhere;
}

.entry-vendor-table th {
  background: #f8f9fb;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.entry-vendor-table tbody tr:last-child td {
  border-bottom: 0;
}

.entry-vendor-check-cell {
  text-align: center;
}

.entry-vendor-table input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: #3f70cf;
}

.entry-vendor-empty-cell {
  padding: 18px 12px !important;
  color: var(--muted) !important;
  text-align: center !important;
}

.entry-arrangement-actions {
  justify-content: flex-end;
  margin-top: 18px;
}

.entry-night-review-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
}

.entry-workspace-empty,
.entry-email-loading {
  color: var(--muted);
  text-align: center;
}

.entry-document-warning {
  display: grid;
  gap: 4px;
  margin: 16px 0;
  padding: 12px 14px;
  border: 1px solid #f2c46d;
  border-radius: 8px;
  background: #fff8e8;
  color: #7a5310;
}

.venue-document-status.warning {
  background: var(--amber-bg);
  color: var(--amber-text);
}

.entry-document-workspace {
  display: grid;
  gap: 16px;
  padding: 0;
  border: 0;
  background: transparent;
}

.entry-document-section {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.entry-document-section-header {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-soft);
  background: #f8f9fb;
}

.entry-document-section-header > div {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 12px;
}

.entry-document-section-header h3,
.entry-document-section-header p {
  margin: 0;
}

.entry-document-section-header p {
  margin-top: 3px;
  color: var(--muted);
}

.entry-document-section-number {
  display: inline-grid;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 50%;
  background: #3f70cf;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  place-items: center;
}

.entry-document-section-meta {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: #eef3fc;
  color: #315cae;
  font-size: 11px;
  font-weight: 700;
}

.entry-document-section-body {
  min-width: 0;
  padding: 18px;
}

.entry-document-upload-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.25fr);
  align-items: start;
  gap: 18px;
}

.entry-document-upload-section .venue-document-dropzone {
  min-height: 168px;
  align-content: center;
  padding: 24px 18px;
  border-color: #aebbd2;
  background: #f8faff;
}

.entry-document-upload-icon {
  display: inline-grid;
  width: 36px;
  height: 36px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: #e7eefc;
  color: #3f70cf;
  font-size: 20px !important;
  font-weight: 800;
  line-height: 1;
  place-items: center;
}

.entry-document-uploaded-files,
.entry-document-uploaded-files-heading {
  min-width: 0;
}

.entry-document-uploaded-files-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.entry-document-uploaded-files-heading h4 {
  margin: 0;
}

.entry-document-uploaded-files-heading span {
  color: var(--muted);
  font-size: 11px;
  text-align: right;
}

.entry-document-roster-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.entry-document-roster-summary span {
  padding: 6px 9px;
  border-radius: 6px;
  background: #f1f3f6;
  color: var(--muted);
  font-size: 11px;
}

.entry-document-roster-summary strong {
  margin-left: 3px;
  color: var(--text);
}

.entry-document-table-scroll {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
}

.entry-document-roster-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  table-layout: fixed;
}

.entry-document-roster-table th,
.entry-document-roster-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12px;
  line-height: 1.45;
  text-align: left;
  vertical-align: middle;
  overflow-wrap: anywhere;
}

.entry-document-roster-table th {
  background: #f8f9fb;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.entry-document-roster-table tbody tr:last-child td {
  border-bottom: 0;
}

.entry-document-vehicle-heading {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 18px 0 9px;
}

.entry-document-vehicle-heading h5 {
  margin: 0;
  font-size: 13px;
}

.entry-document-vehicle-heading span {
  color: var(--muted);
  font-size: 11px;
}

.entry-document-vehicle-table {
  min-width: 400px;
}

.entry-document-template-body {
  display: grid;
  gap: 14px;
}

.entry-document-template-body .entry-document-warning {
  margin: 0;
}

.entry-document-template-file {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
}

.entry-document-template-icon {
  display: inline-grid;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #eef3fc;
  color: #315cae;
  font-size: 10px;
  font-weight: 800;
  place-items: center;
}

.entry-document-template-file > div:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.entry-document-template-file strong {
  overflow-wrap: anywhere;
  font-size: 13px;
}

.entry-document-template-file span {
  color: var(--muted);
  font-size: 11px;
}

.entry-email-editor {
  position: static;
  width: 100%;
  max-width: none;
  max-height: none;
  box-shadow: none;
}

@media (max-width: 1180px) {
  .entry-internal-person-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 13px;
  }

  .entry-internal-person-list.editing .entry-internal-person-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .entry-internal-person-list.editing .entry-plan-scope-field,
  .entry-internal-person-list.editing label:not(.entry-plan-scope-field) {
    grid-column: 1 / -1;
  }

  .entry-internal-person-row > .status-pill {
    justify-self: start;
  }
}

@media (max-width: 980px) {
  .entry-session-card-grid {
    grid-template-columns: 1fr;
  }

  .entry-session-card dl {
    grid-template-columns: 1fr;
  }

  .entry-add-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .entry-arrangement-actions,
  .entry-night-review-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .entry-document-upload-layout {
    grid-template-columns: 1fr;
  }

  .entry-document-section-header {
    align-items: flex-start;
  }

  .entry-document-template-file {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .entry-document-template-file button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .entry-night-review-controls {
    width: 100%;
  }

  .entry-add-controls select {
    width: 100%;
    min-width: 0;
  }

  .entry-workspace-tabs {
    overflow-x: auto;
  }

  .entry-workspace-tabs .quotation-mode-tab {
    flex: 0 0 auto;
  }

  .entry-roster-status-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .entry-roster-status-actions,
  .entry-roster-add-controls {
    width: 100%;
  }

  .entry-roster-status-actions button,
  .entry-roster-add-controls select {
    flex: 1 1 auto;
  }

  .entry-night-review-bar {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 600px) {
  .entry-document-section-header {
    align-items: stretch;
    flex-direction: column;
  }

  .entry-document-section-header > button {
    width: 100%;
  }

  .entry-roster-add-controls,
  .entry-night-review-controls,
  .entry-time-modal > footer {
    align-items: stretch;
    flex-direction: column;
  }

  .entry-night-review-controls > button {
    width: 100%;
  }

  .entry-internal-person-list.editing .entry-internal-person-row,
  .entry-time-modal-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .entry-time-note-field {
    grid-column: auto;
  }

  .entry-time-modal > footer span {
    display: none;
  }
}

.material-price-page {
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

.material-price-editor-panel {
  margin-top: 8px;
}

.material-price-editor-panel[hidden] {
  display: none;
}

.material-price-table {
  min-width: 820px;
}

.audit-log-page {
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

.attendance-page {
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

.work-policy-page {
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

.work-policy-panel {
  min-width: 0;
}

.work-policy-settings-shell,
.company-calendar-settings-shell {
  width: 100%;
  min-width: 0;
}

.app-shell .work-policy-settings-shell.data-directory-panel {
  overflow: visible;
}

.work-policy-page-header {
  align-items: flex-end;
}

.work-policy-page-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.work-policy-page-actions [hidden] {
  display: none;
}

.work-policy-settings-shell.work-policy-create-mode > .panel-header,
.work-policy-settings-shell.work-policy-create-mode > .work-policy-tabs,
.work-policy-settings-shell.work-policy-create-mode .work-policy-table-scroll,
.company-calendar-settings-shell.work-policy-create-mode > .panel-header,
.company-calendar-settings-shell.work-policy-create-mode > .work-policy-table-scroll {
  display: none;
}

.work-policy-settings-shell.work-policy-create-mode .work-policy-tab-panel {
  padding-top: 0;
}

.work-policy-tabs {
  margin: 0;
}

.work-policy-tab-panel {
  display: grid;
  min-width: 0;
  gap: 0;
  padding-top: 0;
}

.work-policy-tab-panel[hidden] {
  display: none;
}

#workPolicyCreateButton,
#scheduleOverrideCreateButton,
#companyHolidayCreateButton {
  background: #3f70cf;
  border-color: #3f70cf;
  color: #fff;
}

.work-policy-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
  padding: 16px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.work-policy-settings-shell.work-policy-create-mode .work-policy-form {
  padding: 0 16px 28px;
  border-top: 0;
}

.work-policy-settings-shell.work-policy-create-mode .work-policy-create-form {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0 0 32px;
  border: 0;
}

.work-policy-settings-shell.work-policy-create-mode .schedule-override-create-form {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0 0 32px;
  border: 0;
}

.work-policy-create-form-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding: 0 0 24px;
}

.work-policy-create-form-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.work-policy-create-form-panel {
  padding-top: 22px;
}

.work-policy-create-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.schedule-override-create-panel {
  padding-top: 22px;
}

.schedule-override-create-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.schedule-override-create-wide-field {
  grid-column: 1 / -1;
}

.work-policy-create-wide-field {
  grid-column: 1 / -1;
}

.work-policy-create-form-actions {
  margin-top: 22px;
  border-top: 0;
}

.workspace .work-policy-create-form-actions button[type="submit"] {
  box-sizing: border-box;
  width: 112px;
  min-width: 112px;
  height: 36px;
  border-color: #3f70cf;
  background: #3f70cf;
  color: #fff;
}

.workspace .work-policy-create-form-actions button[type="submit"]:hover:not(:disabled) {
  border-color: #315fb5;
  background: #315fb5;
}

.company-calendar-settings-shell.work-policy-create-mode .work-policy-form {
  padding: 0 16px 28px;
  border-top: 0;
}

.work-policy-tab-panel > .work-policy-table-scroll {
  width: 100%;
  margin-inline: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.app-shell .work-policy-settings-shell .data-directory-table-wrap {
  border-top: 0;
}

.app-shell .work-policy-settings-shell .data-directory-table {
  min-width: 980px;
}

.app-shell .work-policy-settings-shell .data-directory-table th,
.app-shell .work-policy-settings-shell .data-directory-table td {
  padding-right: 12px;
}

.app-shell .work-policy-settings-shell .data-directory-table th:first-child,
.app-shell .work-policy-settings-shell .data-directory-table td:first-child {
  width: 22%;
}

.app-shell .work-policy-settings-shell .work-policy-data-table th:nth-child(2),
.app-shell .work-policy-settings-shell .work-policy-data-table td:nth-child(2) {
  width: 14%;
}

.app-shell .work-policy-settings-shell .work-policy-data-table th:nth-child(3),
.app-shell .work-policy-settings-shell .work-policy-data-table td:nth-child(3) {
  width: 18%;
}

.app-shell .work-policy-settings-shell .work-policy-data-table th:nth-child(4),
.app-shell .work-policy-settings-shell .work-policy-data-table td:nth-child(4) {
  width: 13%;
}

.app-shell .work-policy-settings-shell .work-policy-data-table th:nth-child(5),
.app-shell .work-policy-settings-shell .work-policy-data-table td:nth-child(5) {
  width: 14%;
}

.app-shell .work-policy-settings-shell .work-policy-data-table th:nth-child(6),
.app-shell .work-policy-settings-shell .work-policy-data-table td:nth-child(6) {
  width: 11%;
}

.app-shell .work-policy-settings-shell .work-policy-data-table th:nth-child(7),
.app-shell .work-policy-settings-shell .work-policy-data-table td:nth-child(7) {
  width: 8%;
  padding-right: 0;
}

.app-shell .work-policy-settings-shell .data-directory-table .table-primary-text,
.app-shell .work-policy-settings-shell .data-directory-table .table-subtext {
  display: block;
}

.app-shell .work-policy-settings-shell .data-directory-table .table-subtext {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.app-shell .work-policy-settings-shell .work-policy-data-table tr.current td {
  background: #fbfcff;
}

.app-shell .work-policy-settings-shell .schedule-override-table th:first-child,
.app-shell .work-policy-settings-shell .schedule-override-table td:first-child {
  width: 17%;
}

.app-shell .work-policy-settings-shell .schedule-override-table th:nth-child(2),
.app-shell .work-policy-settings-shell .schedule-override-table td:nth-child(2) {
  width: 12%;
}

.app-shell .work-policy-settings-shell .schedule-override-table th:nth-child(3),
.app-shell .work-policy-settings-shell .schedule-override-table td:nth-child(3) {
  width: 15%;
}

.app-shell .work-policy-settings-shell .schedule-override-table th:nth-child(4),
.app-shell .work-policy-settings-shell .schedule-override-table td:nth-child(4) {
  width: 22%;
}

.app-shell .work-policy-settings-shell .schedule-override-table th:nth-child(5),
.app-shell .work-policy-settings-shell .schedule-override-table td:nth-child(5) {
  width: 20%;
}

.app-shell .work-policy-settings-shell .schedule-override-table th:nth-child(6),
.app-shell .work-policy-settings-shell .schedule-override-table td:nth-child(6) {
  width: 10%;
}

.app-shell .work-policy-settings-shell .schedule-override-table th:nth-child(7),
.app-shell .work-policy-settings-shell .schedule-override-table td:nth-child(7) {
  width: var(--table-tools-column-width);
  padding-right: 6px;
}

.company-calendar-table-scroll {
  width: 100%;
  margin: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.app-shell .company-calendar-settings-shell.data-directory-panel {
  overflow: visible;
}

.app-shell .company-calendar-settings-shell .data-directory-table {
  min-width: 900px;
}

.app-shell .company-calendar-settings-shell .data-directory-table th,
.app-shell .company-calendar-settings-shell .data-directory-table td {
  padding-right: 12px;
}

.app-shell .company-calendar-settings-shell .company-calendar-table th:first-child,
.app-shell .company-calendar-settings-shell .company-calendar-table td:first-child {
  width: 15%;
}

.app-shell .company-calendar-settings-shell .company-calendar-table th:nth-child(2),
.app-shell .company-calendar-settings-shell .company-calendar-table td:nth-child(2) {
  width: 22%;
}

.app-shell .company-calendar-settings-shell .company-calendar-table th:nth-child(3),
.app-shell .company-calendar-settings-shell .company-calendar-table td:nth-child(3) {
  width: 15%;
}

.app-shell .company-calendar-settings-shell .company-calendar-table th:nth-child(4),
.app-shell .company-calendar-settings-shell .company-calendar-table td:nth-child(4) {
  width: 16%;
}

.app-shell .company-calendar-settings-shell .company-calendar-table th:nth-child(5),
.app-shell .company-calendar-settings-shell .company-calendar-table td:nth-child(5) {
  width: 12%;
}

.app-shell .company-calendar-settings-shell .company-calendar-table th:nth-child(6),
.app-shell .company-calendar-settings-shell .company-calendar-table td:nth-child(6) {
  width: 20%;
  padding-right: 0;
}

.company-calendar-source-cell {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.workspace .page-section > .work-policy-settings-shell.work-policy-create-mode > .panel-header,
.workspace .page-section > .company-calendar-settings-shell.work-policy-create-mode > .panel-header,
.workspace .page-section > .company-calendar-settings-shell.work-policy-create-mode > .company-calendar-table-scroll {
  display: none;
}

.company-calendar-settings-shell.work-policy-create-mode .company-holiday-form {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0 0 32px;
  border: 0;
}

.company-holiday-create-form-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding: 0 0 24px;
}

.company-holiday-create-page-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.company-holiday-create-panel {
  padding-top: 22px;
}

.company-holiday-form-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.company-holiday-name-field,
.company-holiday-source-field {
  grid-column: 1 / -1;
}

.company-holiday-form-actions {
  margin-top: 22px;
  border-top: 0;
}

.company-holiday-form-actions .form-message {
  min-width: 0;
  margin: 0 auto 0 0;
}

.workspace .company-holiday-form-actions button[type="submit"] {
  min-width: 112px;
  min-height: 36px;
  border-color: #3f70cf;
  background: #3f70cf;
  color: #fff;
}

.workspace .company-holiday-form-actions button[type="submit"]:hover:not(:disabled) {
  border-color: #315fb5;
  background: #315fb5;
}

@media (max-width: 720px) {
  .work-policy-create-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .work-policy-create-wide-field {
    grid-column: auto;
  }

  .schedule-override-create-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .schedule-override-create-wide-field {
    grid-column: auto;
  }

  .work-policy-create-form-actions {
    flex-wrap: wrap;
  }

  .work-policy-create-form-actions .form-message {
    width: 100%;
    margin-right: 0;
  }

  .workspace .work-policy-create-form-actions button[type="submit"] {
    width: 100%;
  }

  .company-holiday-form-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .company-holiday-name-field,
  .company-holiday-source-field {
    grid-column: auto;
  }

  .company-holiday-form-actions {
    flex-wrap: wrap;
  }

  .company-holiday-form-actions .form-message {
    width: 100%;
    margin-right: 0;
  }

  .workspace .company-holiday-form-actions button[type="submit"] {
    width: 100%;
  }
}

.work-policy-form > label,
.work-policy-form fieldset {
  display: grid;
  min-width: 0;
  gap: 6px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.work-policy-form input,
.work-policy-form select,
.work-policy-form textarea {
  width: 100%;
  min-width: 0;
  color: var(--text);
  font-weight: 400;
}

.work-policy-form textarea {
  resize: vertical;
}

.work-weekday-field {
  grid-column: span 2;
  padding: 0;
  border: 0;
}

.work-weekday-options {
  display: flex;
  min-height: 42px;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.work-weekday-options label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text);
  font-weight: 400;
}

.work-weekday-options input {
  width: auto;
}

.leave-policy-tab-panel {
  gap: 20px;
}

.employee-leave-grant-form {
  display: grid;
  align-items: end;
  gap: 12px;
  padding: 14px 16px;
}

.employee-leave-grant-form label {
  display: grid;
  min-width: 0;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.employee-leave-grant-form input,
.employee-leave-grant-form select {
  width: 100%;
  min-width: 0;
  color: var(--text);
  font-weight: 400;
}

.employee-leave-grant-form button {
  background: #3f70cf;
  border-color: #3f70cf;
  color: #fff;
}

#leavePolicyUpdateButton,
.leave-policy-editor-actions button[type="submit"] {
  background: #3f70cf;
  border-color: #3f70cf;
  color: #fff;
}

.workspace .page-section > .work-policy-settings-shell.leave-policy-edit-mode > .panel-header,
.work-policy-settings-shell.leave-policy-edit-mode > .work-policy-tabs {
  display: none;
}

.work-policy-settings-shell.leave-policy-edit-mode .work-policy-tab-panel {
  padding-top: 0;
}

.leave-policy-overview {
  display: grid;
  min-width: 0;
  gap: 14px;
  padding-top: 18px;
}

.leave-policy-overview[hidden],
.leave-policy-editor[hidden] {
  display: none;
}

.leave-policy-version-summary {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfcff;
}

.leave-policy-version-heading {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.leave-policy-version-heading > span:first-child {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.leave-policy-version-summary small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.leave-policy-version-summary strong {
  overflow-wrap: anywhere;
  font-size: 15px;
  line-height: 1.4;
}

.leave-policy-version-heading .status-pill {
  flex: 0 0 auto;
}

.leave-policy-version-meta {
  display: grid;
  min-width: min(420px, 42%);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.leave-policy-version-meta > div {
  display: grid;
  min-width: 0;
  gap: 5px;
  padding-left: 18px;
  border-left: 1px solid var(--line);
}

.leave-policy-version-meta dt,
.leave-policy-version-meta dd {
  margin: 0;
}

.leave-policy-version-meta dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.leave-policy-version-meta dd {
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.leave-policy-overview .leave-policy-reference-note {
  position: relative;
  margin: 0;
  padding: 0 0 0 18px;
  border: 0;
}

.leave-policy-overview .leave-policy-reference-note::before {
  position: absolute;
  top: 0.42em;
  left: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3f70cf;
  content: "";
}

.leave-policy-overview .leave-type-table-scroll {
  width: 100%;
  margin: 0;
  overflow-x: auto;
  border: 0;
  border-radius: 0;
  overscroll-behavior-x: contain;
}

.app-shell .work-policy-settings-shell .leave-policy-rule-table {
  min-width: 980px;
}

.app-shell .work-policy-settings-shell .leave-policy-rule-table th,
.app-shell .work-policy-settings-shell .leave-policy-rule-table td {
  padding-right: 18px;
}

.app-shell .work-policy-settings-shell .leave-policy-rule-table th:first-child,
.app-shell .work-policy-settings-shell .leave-policy-rule-table td:first-child {
  width: 19%;
  padding-left: 16px;
}

.app-shell .work-policy-settings-shell .leave-policy-rule-table th:nth-child(2),
.app-shell .work-policy-settings-shell .leave-policy-rule-table td:nth-child(2) {
  width: 16%;
}

.app-shell .work-policy-settings-shell .leave-policy-rule-table th:nth-child(3),
.app-shell .work-policy-settings-shell .leave-policy-rule-table td:nth-child(3) {
  width: 13%;
}

.app-shell .work-policy-settings-shell .leave-policy-rule-table th:nth-child(4),
.app-shell .work-policy-settings-shell .leave-policy-rule-table td:nth-child(4) {
  width: 12%;
}

.app-shell .work-policy-settings-shell .leave-policy-rule-table th:nth-child(5),
.app-shell .work-policy-settings-shell .leave-policy-rule-table td:nth-child(5) {
  width: 14%;
}

.app-shell .work-policy-settings-shell .leave-policy-rule-table th:nth-child(6),
.app-shell .work-policy-settings-shell .leave-policy-rule-table td:nth-child(6) {
  width: 14%;
}

.app-shell .work-policy-settings-shell .leave-policy-rule-table th:nth-child(7),
.app-shell .work-policy-settings-shell .leave-policy-rule-table td:nth-child(7) {
  width: 12%;
  padding-right: 16px;
}

.app-shell .work-policy-settings-shell .leave-policy-rule-table .table-primary-text,
.app-shell .work-policy-settings-shell .leave-policy-rule-table .table-subtext {
  display: block;
}

.app-shell .work-policy-settings-shell .leave-policy-rule-table .table-subtext {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.leave-policy-editor {
  display: grid;
  min-width: 0;
  gap: 0;
  padding: 0 16px 28px;
}

.leave-policy-create-form {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0 0 32px;
}

.leave-policy-create-form-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding: 0 0 24px;
}

.leave-policy-create-form-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.leave-policy-create-form-panel {
  padding-top: 22px;
}

.leave-policy-create-form-panel .leave-policy-version-fields {
  grid-template-columns: minmax(190px, 0.8fr) minmax(280px, 1.4fr) minmax(170px, 0.7fr);
  padding-top: 18px;
}

.leave-policy-create-form-panel .leave-policy-adjustment-editor {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
}

.leave-policy-create-form-panel .leave-policy-adjustment-editor > .inline-header {
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
}

.workspace .leave-policy-add-item-button {
  display: inline-flex;
  width: auto;
  min-height: 36px;
  align-items: center;
  gap: 5px;
  padding: 6px 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #3f70cf;
  font-size: 13px;
  font-weight: 820;
  box-shadow: none;
}

.workspace .leave-policy-add-item-button span {
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
}

.workspace .leave-policy-add-item-button:hover:not(:disabled),
.workspace .leave-policy-add-item-button:focus-visible {
  background: transparent;
  color: #315fb0;
  text-decoration: underline;
  text-decoration-color: rgb(63 112 207 / 35%);
  text-underline-offset: 5px;
}

.leave-policy-version-fields {
  display: grid;
  grid-template-columns: minmax(190px, 0.8fr) minmax(280px, 1.4fr) minmax(170px, 0.7fr);
  align-items: end;
  gap: 12px;
  padding-top: 14px;
}

.leave-policy-version-fields label,
.leave-policy-adjustment-row label {
  display: grid;
  min-width: 0;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.leave-policy-version-fields input,
.leave-policy-version-fields select,
.leave-policy-adjustment-row input,
.leave-policy-adjustment-row select {
  width: 100%;
  min-width: 0;
  color: var(--text);
  font-weight: 400;
}

.leave-policy-adjustment-editor > .inline-header {
  margin-bottom: 0;
}

.leave-policy-adjustment-editor > .inline-header > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.leave-policy-adjustment-editor > .inline-header p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
}

.leave-policy-adjustment-rows {
  display: grid;
  gap: 12px;
  padding-top: 14px;
}

.leave-policy-adjustment-row {
  display: grid;
  min-width: 0;
  gap: 0;
  overflow: hidden;
  border: 1px solid #d7e2f3;
  border-top: 3px solid #3f70cf;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 18px rgb(45 79 142 / 6%);
}

.leave-policy-adjustment-row-header {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px 9px;
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(90deg, #f7faff 0%, #fff 46%);
}

.leave-policy-adjustment-row-header > span {
  color: #3f70cf;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.06em;
}

.workspace .leave-policy-adjustment-remove {
  display: inline-grid;
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  place-items: center;
}

.workspace .leave-policy-adjustment-remove:hover:not(:disabled),
.workspace .leave-policy-adjustment-remove:focus-visible {
  background: #f9e8e8;
  color: var(--red-text);
}

.leave-policy-adjustment-remove svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.leave-policy-adjustment-fields {
  display: grid;
  grid-template-columns: minmax(260px, 1.45fr) minmax(150px, 0.65fr) minmax(220px, 1fr);
  align-items: end;
  gap: 12px;
  padding: 14px;
}

.leave-policy-current-quota {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: #f4f5f7;
}

.leave-policy-current-quota small {
  color: var(--muted);
  font-size: 9px;
}

.leave-policy-current-quota strong {
  color: var(--text);
  font-size: 13px;
}

.leave-policy-adjustment-empty {
  margin: 0;
  padding: 14px 0 2px;
  text-align: left;
}

.leave-policy-editor-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 20px;
}

.leave-policy-create-form .leave-policy-editor-actions {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 0;
}

.workspace .leave-policy-create-form .leave-policy-editor-actions button[type="submit"] {
  box-sizing: border-box;
  width: 112px;
  min-width: 112px;
  height: 36px;
}

.leave-policy-editor-actions .form-message {
  min-width: 0;
  margin: 0 auto 0 0;
}

@media (max-width: 720px) {
  .leave-policy-create-form-panel .leave-policy-version-fields,
  .leave-policy-create-form-panel .leave-policy-adjustment-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .leave-policy-create-form-panel .leave-policy-adjustment-editor > .inline-header,
  .leave-policy-create-form .leave-policy-editor-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .leave-policy-create-form-panel .leave-policy-adjustment-editor > .inline-header button,
  .workspace .leave-policy-create-form .leave-policy-editor-actions button[type="submit"] {
    width: 100%;
  }

  .workspace .leave-policy-add-item-button {
    justify-content: flex-start;
  }
}

.leave-management-tabs {
  overflow-x: auto;
}

.leave-management-tabs .subtab-button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.attendance-admin-shell .employee-leave-balance-toolbar {
  margin-top: 18px;
}

.attendance-admin-shell .employee-leave-balance-search {
  width: 100%;
}

.attendance-admin-shell .employee-leave-balance-filter-row {
  align-items: center;
}

.employee-leave-balance-filter-row .status-pill {
  flex: 0 0 auto;
  margin-left: 6px;
}

@media (max-width: 760px) {
  .employee-leave-balance-filter-row .status-pill {
    align-self: flex-start;
    margin-left: 0;
  }
}

.employee-leave-balance-table-scroll {
  width: 100%;
  margin: 0 0 18px;
  overflow-x: auto;
  border-top: 1px solid var(--line-soft);
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
  background: transparent;
  overscroll-behavior-x: contain;
}

.app-shell .leave-management-shell .employee-leave-balance-table {
  width: 100%;
  min-width: 1040px;
  table-layout: fixed;
}

.employee-leave-balance-table .employee-leave-balance-employee-column {
  width: 22%;
}

.employee-leave-balance-table .employee-leave-balance-standard-column {
  width: 11%;
}

.employee-leave-balance-table .employee-leave-balance-wide-column {
  width: 14%;
}

.employee-leave-balance-table .employee-leave-balance-tools-column {
  width: 48px;
}

.app-shell .leave-management-shell .employee-leave-balance-table th {
  height: 40px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.app-shell .leave-management-shell .employee-leave-balance-table td {
  height: 64px;
  min-width: 0;
  padding: 10px 12px;
  background: transparent;
  vertical-align: middle;
}

.app-shell .leave-management-shell .employee-leave-balance-table th:first-child,
.app-shell .leave-management-shell .employee-leave-balance-table td:first-child {
  width: 22%;
  padding-left: 14px;
}

.app-shell .leave-management-shell .employee-leave-balance-table th:nth-child(2),
.app-shell .leave-management-shell .employee-leave-balance-table td:nth-child(2),
.app-shell .leave-management-shell .employee-leave-balance-table th:nth-child(3),
.app-shell .leave-management-shell .employee-leave-balance-table td:nth-child(3),
.app-shell .leave-management-shell .employee-leave-balance-table th:nth-child(6),
.app-shell .leave-management-shell .employee-leave-balance-table td:nth-child(6),
.app-shell .leave-management-shell .employee-leave-balance-table th:nth-child(7),
.app-shell .leave-management-shell .employee-leave-balance-table td:nth-child(7) {
  width: 11%;
}

.app-shell .leave-management-shell .employee-leave-balance-table th:nth-child(4),
.app-shell .leave-management-shell .employee-leave-balance-table td:nth-child(4),
.app-shell .leave-management-shell .employee-leave-balance-table th:nth-child(5),
.app-shell .leave-management-shell .employee-leave-balance-table td:nth-child(5) {
  width: 14%;
}

.app-shell .leave-management-shell .employee-leave-balance-table th:not(:first-child):not(:last-child),
.app-shell .leave-management-shell .employee-leave-balance-table td:not(:first-child):not(:last-child) {
  text-align: center;
}

.app-shell .leave-management-shell .employee-leave-balance-table th:last-child,
.app-shell .leave-management-shell .employee-leave-balance-table td:last-child {
  width: 48px;
  padding-right: 8px;
  padding-left: 8px;
  text-align: center;
}

.app-shell .leave-management-shell .employee-leave-balance-table tbody tr:first-child td {
  border-top: 0;
}

.app-shell .leave-management-shell .employee-leave-balance-table tbody tr:hover td {
  background: #fafafb;
}

.employee-leave-balance-row.active td {
  background: #f7f9fd !important;
  border-bottom-color: transparent;
}

.employee-leave-balance-identity {
  display: table-cell;
}

.employee-leave-balance-identity .table-primary-text,
.employee-leave-balance-identity .table-subtext {
  display: block;
}

.employee-leave-balance-identity .table-primary-text {
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-leave-balance-identity .table-subtext {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.employee-leave-balance-value {
  color: #32343a;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 720;
  white-space: nowrap;
}

.employee-leave-balance-action-cell {
  overflow: visible;
}

.employee-leave-grant-row > td {
  height: auto;
  padding: 0;
  border-bottom: 1px solid #cfd8e8;
  background: #f7f9fd;
}

.app-shell .leave-management-shell .employee-leave-balance-table tbody tr.employee-leave-grant-row:hover td {
  background: #f7f9fd;
}

.employee-leave-grant-inline-form {
  grid-template-columns: minmax(190px, 0.9fr) minmax(120px, 0.5fr) minmax(160px, 0.7fr) minmax(260px, 1.3fr) auto;
  align-items: end;
  gap: 10px;
  padding: 10px 14px 14px;
  border-top: 0;
}

.employee-leave-grant-inline-actions {
  display: flex;
  min-width: 120px;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 8px;
}

.employee-leave-grant-inline-actions .form-message {
  min-width: 0;
  margin: 0;
  font-size: 10px;
  white-space: nowrap;
}

.employee-leave-grant-inline-actions button {
  flex: 0 0 auto;
  background: #3f70cf;
  border-color: #3f70cf;
  color: #fff;
}

[data-leave-management-panel],
.leave-balance-management {
  min-width: 0;
}

.employee-leave-grant-form {
  grid-template-columns: minmax(180px, 1fr) minmax(120px, 0.55fr) minmax(160px, 0.7fr) minmax(260px, 1.5fr) auto;
  padding-top: 0;
}

.leave-policy-reference-note {
  padding: 12px 16px;
  border-right: 1px solid var(--line);
  border-left: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.work-policy-table-scroll table {
  min-width: 900px;
}

.schedule-override-scroll table {
  min-width: 1020px;
}

.leave-policy-page {
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

.leave-type-table-scroll table {
  min-width: 980px;
}

#generateAnnualLeaveButton {
  background: #3f70cf;
  border-color: #3f70cf;
  color: #fff;
}

.night-entry-page {
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

.night-entry-participant-line {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.night-entry-participant-line span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 400;
  overflow-wrap: anywhere;
}

.night-entry-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.night-entry-table-scroll table {
  min-width: 960px;
}

.night-entry-management-scroll table {
  min-width: 1180px;
}

.night-entry-actions {
  min-width: 180px;
}

.night-entry-actions button {
  width: auto;
}

.personal-center-page {
  width: min(1120px, 100%);
  min-width: 0;
  margin-inline: auto;
}

.personal-center-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 28px;
}

.personal-center-avatar {
  display: grid;
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  place-items: center;
  border: 1px solid #e8b95f;
  border-radius: 999px;
  background: #f8cc7b;
  color: #49300a;
  font-size: 24px;
  font-weight: 800;
  overflow: hidden;
}

.personal-center-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.personal-center-hero h2,
.personal-center-hero p {
  margin: 0;
}

.personal-center-hero h2 {
  margin-top: 5px;
  font-size: clamp(24px, 3vw, 32px);
}

.personal-center-hero p {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}

.personal-profile-panel {
  min-width: 0;
}

.gmail-settings-panel {
  margin-top: 16px;
}

.gmail-settings-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
}

.gmail-settings-body strong {
  font-size: 15px;
}

.gmail-settings-body p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.gmail-settings-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.gmail-settings-panel > .form-message {
  display: block;
  margin: 0;
  padding: 0 20px 18px;
}

@media (max-width: 700px) {
  .gmail-settings-body {
    align-items: stretch;
    flex-direction: column;
  }

  .gmail-settings-actions button {
    flex: 1;
  }
}

.personal-profile-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.personal-media-field {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 14px 0;
  border-top: 1px solid var(--line-soft);
}

.personal-profile-subsection > .personal-media-field:first-of-type {
  padding-top: 4px;
  border-top: 0;
}

.personal-media-upload {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.personal-media-upload-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.personal-media-upload-control {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.form-body .personal-media-file-button {
  display: inline-flex;
  min-height: 36px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.personal-media-file-name {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}

.personal-media-upload small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
}

.personal-media-preview {
  display: grid;
  width: 140px;
  height: 88px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--sidebar);
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.personal-media-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.personal-photo-preview {
  width: 88px;
  border-radius: 999px;
}

.personal-photo-preview img {
  object-fit: cover;
}

.personal-profile-note {
  margin: -2px 0 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}

.personal-profile-form button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.personal-signature-backdrop {
  z-index: 60;
}

.personal-signature-modal {
  display: flex;
  width: min(760px, 100%);
  flex-direction: column;
}

.personal-signature-modal .ledger-modal-header {
  align-items: flex-start;
}

.personal-signature-modal .ledger-modal-header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.personal-signature-modal-body {
  padding: 18px;
  overflow-y: auto;
}

.personal-signature-canvas-wrap {
  position: relative;
  width: 100%;
  height: clamp(220px, 30vw, 300px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.personal-signature-canvas-wrap::after {
  position: absolute;
  right: 8%;
  bottom: 28%;
  left: 8%;
  z-index: 0;
  border-top: 1px dashed var(--line);
  content: "";
}

#personalSignatureCanvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
}

#personalSignatureCanvas:focus-visible {
  outline: 2px solid #3f70cf;
  outline-offset: -3px;
}

#personalSignatureCanvasHint {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  pointer-events: none;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.personal-signature-modal-body > p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.personal-signature-modal-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px 18px;
  border-top: 1px solid var(--line-soft);
}

.personal-signature-modal-actions > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 700px) {
  .personal-signature-backdrop {
    padding: 12px;
  }

  .personal-signature-modal {
    max-height: calc(100vh - 24px);
  }

  .personal-signature-canvas-wrap {
    height: clamp(190px, 58vw, 260px);
  }

  .personal-signature-modal-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .personal-signature-modal-actions > div,
  .personal-signature-modal-actions button {
    flex: 1;
  }
}

.personal-preferences-panel {
  min-width: 0;
}

.theme-preference-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 20px;
  border: 0;
}

.theme-preference-options legend {
  padding: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.theme-preference-options label {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--sidebar);
}

.theme-preference-options input {
  width: auto;
  margin: 0;
}

.theme-preference-options small {
  grid-column: 3;
  color: var(--muted);
}

.theme-swatch {
  width: 24px;
  height: 24px;
  border: 1px solid rgb(0 0 0 / 10%);
  border-radius: 999px;
}

.theme-swatch-coral { background: #f06a6a; }
.theme-swatch-ocean { background: #3979a8; }
.theme-swatch-neutral { background: #73757c; }

.attendance-page > .panel {
  min-width: 0;
}

.attendance-today-panel {
  display: grid;
  gap: 22px;
  padding: 28px;
}

.attendance-today-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.attendance-today-heading h2,
.attendance-today-heading p {
  margin: 0;
}

.attendance-today-heading h2 {
  margin-top: 6px;
  font-size: clamp(22px, 3vw, 30px);
}

.attendance-today-heading p {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}

.attendance-time-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.attendance-time-grid article {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--sidebar);
}

.attendance-time-grid span,
.attendance-server-note {
  color: var(--muted);
  font-size: 12px;
}

.attendance-time-grid strong {
  font-size: clamp(24px, 4vw, 36px);
  line-height: 1;
}

.attendance-clock-actions,
.attendance-form-actions,
.attendance-review-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.attendance-server-note {
  margin: -10px 0 0;
}

.attendance-filter-form,
.attendance-adjustment-form {
  display: grid;
  align-items: end;
  gap: 12px;
  padding: 16px;
}

.attendance-filter-form label,
.attendance-adjustment-form label {
  display: grid;
  min-width: 0;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.attendance-filter-form input,
.attendance-filter-form select,
.attendance-adjustment-form input,
.attendance-adjustment-form select,
.attendance-adjustment-form textarea {
  width: 100%;
  min-width: 0;
  color: var(--text);
  font-weight: 400;
}

.attendance-adjustment-form textarea {
  resize: vertical;
}

.attendance-filter-form {
  grid-template-columns: repeat(2, minmax(180px, 240px)) auto auto;
}

.attendance-admin-filter-form {
  grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(160px, 200px)) auto;
}

.approval-history-filter-form {
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  align-items: end;
}

.approval-history-pagination {
  flex-wrap: wrap;
  gap: 4px;
  padding-top: 12px;
}

.approval-history-pagination .approval-history-page-button {
  display: inline-grid;
  place-items: center;
  width: 30px;
  min-width: 30px;
  min-height: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #5f6368;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}

.approval-history-pagination .approval-history-page-button:hover:not(:disabled) {
  background: #f1f3f4;
  color: var(--text);
}

.approval-history-pagination .approval-history-page-button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}

.approval-history-pagination .approval-history-page-button:disabled {
  opacity: 0.28;
  cursor: default;
}

.approval-history-pagination .approval-history-page-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.approval-history-pagination .approval-history-page-indicator {
  min-width: 70px;
  padding: 0 6px;
  color: #5f6368;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.attendance-ledger-filter-form {
  margin-bottom: 16px;
}

.attendance-adjustment-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}

.attendance-adjustment-reason,
.attendance-form-actions {
  grid-column: 1 / -1;
}

.attendance-table-scroll table {
  min-width: 680px;
}

.attendance-page[data-page="attendance-admin"] .attendance-table-scroll table,
.attendance-page[data-page="attendance-my"] .attendance-table-scroll table {
  min-width: 1180px;
}

.attendance-page[data-page="attendance-my"] .attendance-table-scroll table.personal-attendance-results-table {
  width: 100%;
  min-width: 920px;
  table-layout: fixed;
}

.personal-attendance-results-table th:nth-child(1) {
  width: 112px;
}

.personal-attendance-results-table th:nth-child(2) {
  width: 190px;
}

.personal-attendance-results-table th:nth-child(3),
.personal-attendance-results-table th:nth-child(4) {
  width: 112px;
}

.personal-attendance-results-table th:nth-child(5) {
  width: 210px;
}

.personal-attendance-results-table th:last-child,
.personal-attendance-results-table td:last-child {
  width: 48px;
  padding-inline: 6px;
  overflow: visible;
  text-align: center;
}

#myAttendanceMessage:not(:empty) {
  display: block;
}

.personal-attendance-statuses {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.personal-attendance-statuses .status-pill {
  white-space: nowrap;
}

.personal-attendance-note-cell {
  overflow-wrap: anywhere;
}

.personal-attendance-tools {
  display: inline-flex;
}

.attendance-page[data-page="attendance-admin"] .attendance-table-scroll table.attendance-admin-results-table {
  width: 100%;
  min-width: 980px;
  table-layout: fixed;
}









.attendance-admin-results-table .attendance-action-column {
  width: 48px;
}

.attendance-admin-results-table th,
.attendance-admin-results-table td {
  vertical-align: middle;
}

.attendance-admin-results-table th:last-child,
.attendance-admin-results-table td:last-child {
  text-align: center;
  padding-inline: 6px;
}

.attendance-admin-results-table td:nth-child(6) {
  overflow-wrap: anywhere;
}

.attendance-admin-results-table tbody tr.attendance-row-anomalous > td {
  background: #fff8e5;
}

.attendance-admin-results-table tbody tr.attendance-row-anomalous:hover > td {
  background: #fff3cf;
}

.attendance-admin-notes,
.attendance-admin-note-line {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.attendance-admin-notes {
  gap: 5px;
}

.attendance-admin-note-line strong {
  color: #8a5a00;
  font-size: 12px;
}

.attendance-admin-note-line small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

.attendance-admin-action-cell {
  overflow: visible;
}

.attendance-admin-tools {
  display: inline-flex;
}

.attendance-admin-tools .quotation-list-tools-menu button:disabled {
  color: var(--muted);
  cursor: default;
}

.attendance-payroll-scroll table {
  min-width: 980px !important;
}

.payroll-handoff-section {
  min-width: 0;
  border-bottom: 1px solid var(--line);
}

.payroll-handoff-section > .panel-header {
  border-bottom: 0;
}

.payroll-handoff-section > .form-message {
  display: block;
  min-height: 0;
  padding: 0 16px 14px;
}

.attendance-cell-stack,
.attendance-anomaly-list,
.attendance-anomaly-item {
  display: grid;
  gap: 4px;
  min-width: max-content;
}

.attendance-cell-stack small,
.attendance-anomaly-item small,
.attendance-schedule-note {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

.attendance-cell-stack .status-pill {
  width: fit-content;
}

.attendance-anomaly-list {
  min-width: 190px;
  gap: 10px;
}

.attendance-anomaly-item + .attendance-anomaly-item {
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.attendance-anomaly-item .attendance-review-actions {
  margin-top: 3px;
}

.attendance-anomaly-item .attendance-review-actions button,
.attendance-payroll-scroll button {
  width: auto;
  padding: 7px 10px;
  font-size: 12px;
}

.payroll-page {
  gap: 20px;
}

.payroll-directory-header {
  min-height: 98px;
  padding: 22px 0;
}

.payroll-directory-header h2 {
  font-size: 22px;
  letter-spacing: -0.02em;
}

.payroll-run-panel {
  grid-column: 1 / -1;
  min-width: 0;
}

.payroll-run-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
  padding: 18px;
  border-bottom: 1px solid var(--line);
}

.payroll-run-create-panel {
  gap: 0;
}

.payroll-run-create-header {
  border-bottom: 1px solid var(--line);
}

.workspace .finance-page-header.payroll-run-create-header > div > p {
  display: block;
  max-width: 620px;
  font-size: 12px;
}

.payroll-run-create-header .summary-eyebrow,
.payroll-run-form-heading .summary-eyebrow,
.payroll-run-create-guide > .summary-eyebrow {
  display: block;
  margin-bottom: 5px;
  color: #3f70cf;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.workspace .payroll-run-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  height: auto;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  box-shadow: none;
}

.workspace .payroll-run-back-link:hover {
  background: transparent;
  color: #285db8;
  box-shadow: none;
  transform: none;
}

.payroll-run-back-link span {
  font-size: 16px;
  line-height: 1;
}

.payroll-run-create-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  align-items: start;
  gap: 18px;
  padding: 24px 0 32px;
}

.payroll-run-create-card,
.payroll-run-create-guide {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 24px rgb(30 42 65 / 5%);
}

.payroll-run-form.payroll-run-create-card {
  display: block;
  padding: 0;
  border-bottom: 1px solid var(--line);
}

.payroll-run-form-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px 17px;
  border-bottom: 1px solid var(--line);
}

.payroll-run-form-heading h3,
.payroll-run-create-guide h3 {
  margin: 0;
  color: var(--text);
  font-size: 17px;
  letter-spacing: -0.01em;
}

.payroll-required-note {
  flex: 0 0 auto;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.payroll-required-note span,
.payroll-run-form-fields label > span > b {
  color: #cf4a3d;
}

.payroll-run-form-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 16px;
  padding: 22px;
}

.payroll-run-form-fields label {
  align-content: start;
}

.payroll-run-form-fields label > span {
  color: #464954;
}

.payroll-run-form-fields label > span > b {
  font-size: 12px;
}

.payroll-run-form-fields label > span > em {
  margin-left: 4px;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
}

.payroll-run-form-fields small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
}

.payroll-run-create-actions {
  justify-content: flex-end;
  min-height: 72px;
  padding: 14px 22px;
  border-top: 1px solid var(--line);
  background: #fafbfc;
}

.payroll-run-create-actions .form-message {
  margin-right: auto;
}

.workspace .payroll-run-submit-button {
  width: auto;
  min-width: 150px;
  background: #3f70cf;
  color: #fff;
}

.workspace .payroll-run-submit-button:hover {
  background: #315fba;
}

.payroll-run-create-guide {
  padding: 21px 20px;
  background: #f7f9fd;
}

.payroll-run-create-guide h3 {
  line-height: 1.45;
}

.payroll-run-create-guide ol {
  display: grid;
  gap: 0;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.payroll-run-create-guide li {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  min-height: 62px;
}

.payroll-run-create-guide li:not(:last-child)::after {
  position: absolute;
  top: 28px;
  bottom: 0;
  left: 13px;
  width: 1px;
  background: #d5ddeb;
  content: "";
}

.payroll-run-create-guide li > span {
  position: relative;
  z-index: 1;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid #c7d4eb;
  border-radius: 999px;
  background: #fff;
  color: #3f70cf;
  font-size: 11px;
  font-weight: 800;
}

.payroll-run-create-guide li div {
  display: grid;
  align-content: start;
  gap: 3px;
  padding-top: 3px;
}

.payroll-run-create-guide li strong {
  font-size: 13px;
}

.payroll-run-create-guide li small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.payroll-run-form label {
  display: grid;
  min-width: 0;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.payroll-run-form input,
.payroll-run-form select,
.payroll-run-form textarea {
  width: 100%;
  min-width: 0;
}

.payroll-run-form textarea {
  resize: vertical;
}

.payroll-run-note,
.payroll-form-actions {
  grid-column: 1 / -1;
}

.payroll-form-actions,
.payroll-run-actions,
.payroll-statement-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.payroll-table-scroll table {
  min-width: 980px;
}

.payroll-run-list {
  display: grid;
  gap: 16px;
  padding: 18px;
}

.payroll-run-card {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--sidebar);
}

.payroll-run-card > header,
.payroll-run-card > header > div,
.payroll-statement-card summary span {
  display: grid;
  gap: 4px;
}

.payroll-run-card > header {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.payroll-run-card h3 {
  margin: 0;
}

.payroll-run-totals {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.payroll-run-totals > span {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.payroll-run-totals small,
.payroll-statement-card small,
.payroll-statement-meta {
  color: var(--muted);
  font-size: 11px;
}

.payroll-statement-list {
  display: grid;
  gap: 10px;
}

.payroll-statement-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.payroll-statement-card summary {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) repeat(4, minmax(110px, 1fr));
  align-items: center;
  gap: 12px;
  padding: 14px;
  cursor: pointer;
}

.payroll-statement-meta {
  padding: 0 14px 12px;
}

.payroll-line-scroll table {
  min-width: 760px;
}

@media (max-width: 900px) {
  .payroll-run-create-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .payroll-run-form,
  .payroll-run-totals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .payroll-statement-card summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .payroll-directory-header {
    align-items: stretch;
    flex-direction: column;
    padding-right: 16px;
    padding-left: 16px;
  }

  .payroll-directory-header .panel-header-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .payroll-run-form,
  .payroll-run-totals,
  .payroll-statement-card summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .payroll-run-create-workspace {
    padding: 18px 16px 24px;
  }

  .payroll-run-form-heading,
  .payroll-run-form-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .payroll-run-form-heading {
    display: grid;
  }

  .payroll-run-create-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .payroll-run-submit-button {
    width: 100%;
  }
}

.attendance-review-scroll table {
  min-width: 960px;
}

.overtime-review-scroll table {
  min-width: 1220px;
}

.overtime-review-modal {
  width: min(640px, 100%);
}

.overtime-review-modal-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 18px;
  overflow-y: auto;
}

.overtime-review-modal-summary {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fafaf9;
}

.overtime-review-modal-summary strong,
.overtime-review-modal-summary span,
.overtime-review-modal-summary p {
  margin: 0;
}

.overtime-review-modal-summary span,
.overtime-review-modal-summary p {
  color: var(--muted);
}

@media (max-width: 640px) {
  .overtime-review-modal-body {
    grid-template-columns: minmax(0, 1fr);
  }
}

.action-required-row .personal-record-tools-cell {
  background: #fff8df;
}

.action-required-row:hover .personal-record-tools-cell {
  background: #fff3c7;
}

.attendance-reason-cell {
  min-width: 180px;
  max-width: 320px;
  overflow-wrap: anywhere;
  white-space: normal;
}

.attendance-review-actions {
  min-width: 150px;
}

.attendance-review-actions button {
  width: auto;
}

.user-account-list-panel {
  grid-column: 1 / -1;
}

.temporary-password-modal,
.password-change-modal {
  width: min(560px, 100%);
  background: #fff;
}

.temporary-password-modal {
  width: min(680px, 100%);
}

.temporary-password-content {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.temporary-password-content > label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.temporary-password-content textarea {
  width: 100%;
  min-height: 250px;
  resize: vertical;
  line-height: 1.75;
}

.temporary-password-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

@media (min-width: 601px) and (max-width: 1100px) {
  .attendance-admin-filter-form,
  .attendance-adjustment-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .approval-history-filter-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .employee-form-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .work-policy-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .employee-leave-grant-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .leave-policy-version-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .leave-policy-version-summary {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
  }

  .leave-policy-version-meta {
    width: 100%;
    min-width: 0;
  }

  .leave-policy-version-meta > div:first-child {
    padding-left: 0;
    border-left: 0;
  }

  .leave-policy-adjustment-fields {
    grid-template-columns: minmax(220px, 1.2fr) minmax(120px, 0.55fr) minmax(170px, 0.8fr);
  }

  .employee-leave-grant-reason,
  .employee-leave-grant-form button {
    grid-column: 1 / -1;
  }

  .employee-leave-grant-inline-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .employee-leave-grant-inline-actions {
    grid-column: 1 / -1;
  }

  .theme-preference-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .work-policy-page-actions {
    width: 100%;
    justify-content: space-between;
  }

  .work-policy-page-actions .project-list-primary-action {
    margin-left: auto;
  }

  .work-policy-tabs {
    overflow-x: auto;
  }

  .work-policy-tabs .subtab-button {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .attendance-today-panel {
    gap: 18px;
    padding: 18px;
  }

  .attendance-today-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .attendance-time-grid,
  .attendance-filter-form,
  .attendance-admin-filter-form,
  .attendance-adjustment-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .attendance-adjustment-reason,
  .attendance-form-actions {
    grid-column: auto;
  }

  .work-policy-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .work-weekday-field {
    grid-column: auto;
  }

  .employee-leave-grant-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .leave-policy-version-fields,
  .leave-policy-adjustment-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .leave-policy-version-summary,
  .leave-policy-version-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .leave-policy-version-meta {
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  .leave-policy-version-meta > div {
    padding: 10px 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .leave-policy-adjustment-editor > .inline-header {
    align-items: stretch;
    flex-direction: column;
  }

  .leave-policy-adjustment-editor > .inline-header button,
  .leave-policy-editor-actions button {
    width: 100%;
  }

  .leave-policy-editor-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .employee-leave-grant-inline-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .employee-leave-grant-inline-actions,
  .employee-leave-grant-reason,
  .employee-leave-grant-form button {
    grid-column: auto;
  }

  .employee-leave-grant-reason,
  .employee-leave-grant-form button {
    grid-column: auto;
  }

  .employee-leave-grant-form button {
    width: 100%;
  }

  .attendance-clock-actions,
  .attendance-form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .attendance-clock-actions button,
  .attendance-form-actions button {
    width: 100%;
  }

  .employee-form-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .personal-center-hero {
    align-items: flex-start;
    padding: 18px;
  }

  .personal-center-avatar {
    flex-basis: 48px;
    width: 48px;
    height: 48px;
    font-size: 18px;
  }

  .personal-profile-form,
  .theme-preference-options {
    grid-template-columns: minmax(0, 1fr);
  }

  .personal-profile-form .span-2 {
    grid-column: auto;
  }

  .personal-media-field {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .personal-signature-preview {
    width: 100%;
  }

  .employee-form-fields .employee-form-wide {
    grid-column: auto;
  }

  .temporary-password-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

.leave-request-page {
  align-content: start;
}

.leave-request-page[data-page="leave-management"] {
  grid-template-columns: minmax(0, 1fr);
}

.app-shell .leave-management-shell.data-directory-panel {
  overflow: visible;
}

.leave-management-page-header {
  align-items: flex-end;
}

.leave-management-page-header h2,
.leave-management-page-header p {
  margin: 0;
}

.leave-management-page-header p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.leave-management-shell [data-leave-management-panel="records"] {
  overflow: visible;
}

.leave-management-table-scroll {
  width: 100%;
  margin-inline: 0;
  overflow-x: auto;
  border-top: 1px solid var(--line);
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
  background: transparent;
  overscroll-behavior-x: contain;
}

#leaveManagementMessage {
  margin: 10px 0 0;
}

.personal-leave-tabs {
  margin-bottom: 18px;
}

.personal-leave-balance-table-scroll table {
  min-width: 760px;
}

.personal-leave-request-pending td {
  background: #fff8df;
}

.personal-leave-request-pending:hover td {
  background: #fff3c7;
}

.leave-request-table-scroll table,
.leave-review-table-scroll table,
.leave-management-table-scroll table {
  min-width: 1080px;
}

.leave-management-table-scroll .leave-management-table {
  width: 100%;
  min-width: 920px;
  table-layout: fixed;
}

.leave-management-table .leave-management-employee-column { width: calc(18% - 15.84px); }
.leave-management-table .leave-management-department-column { width: calc(13% - 11.44px); }
.leave-management-table .leave-management-type-column { width: calc(14% - 12.32px); }
.leave-management-table .leave-management-period-column { width: calc(25% - 22px); }
.leave-management-table .leave-management-hours-column { width: calc(10% - 8.8px); }
.leave-management-table .leave-management-urgency-column { width: calc(10% - 8.8px); }
.leave-management-table .leave-management-status-column { width: calc(10% - 8.8px); }

.app-shell .leave-management-table th {
  height: 40px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.app-shell .leave-management-table td {
  height: 64px;
  min-width: 0;
  padding: 10px 12px;
  background: transparent;
  vertical-align: middle;
}

.leave-management-employee strong,
.leave-management-employee .table-subtext {
  display: block;
}

.leave-management-period small {
  color: var(--muted);
  font-size: 11px;
}

.leave-management-row {
  cursor: pointer;
}

.leave-management-row:hover td,
.leave-management-row:focus-visible td {
  background: #fafafb;
}

.leave-management-row:focus-visible {
  outline: none;
}

.leave-management-detail-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.leave-management-detail-header h2,
.leave-management-detail-header p {
  margin: 0;
}

.leave-management-detail-header h2 {
  font-size: 18px;
}

.leave-management-detail-header p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.leave-management-detail-body {
  display: grid;
  gap: 22px;
  padding: 22px 16px 28px;
}

.leave-management-detail-section + .leave-management-detail-section {
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
}

.leave-management-detail-section h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 15px;
}

.leave-management-detail-section h3::before {
  width: 4px;
  height: 18px;
  border-radius: 99px;
  background: #3f70cf;
  content: "";
}

.leave-management-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 12px;
  margin: 0;
}

.leave-management-detail-grid div {
  min-width: 0;
}

.leave-management-detail-grid dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.leave-management-detail-grid dd {
  min-width: 0;
  margin: 6px 0 0;
  overflow-wrap: anywhere;
  font-size: 13px;
  font-weight: 650;
}

.leave-management-detail-grid dd small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

.leave-management-reason {
  min-height: 54px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fbfcfd;
  line-height: 1.6;
  white-space: pre-wrap;
}

.leave-management-evidence {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  font-size: 12px;
}

.leave-management-evidence > strong {
  color: var(--muted);
}

.leave-management-approval-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-soft);
}

.leave-management-approval-list li {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) minmax(0, 2fr);
  gap: 12px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12px;
}

.leave-management-approval-list li > span,
.leave-management-approval-list li small {
  color: var(--muted);
}

.leave-management-approval-list li.empty-cell {
  display: block;
}

.leave-management-detail-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 2px;
}

.leave-request-table-scroll a,
.leave-management-table-scroll a {
  color: var(--accent);
  font-weight: 700;
}

@media (max-width: 900px) {

  .leave-management-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .leave-management-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .leave-management-detail-header {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .leave-management-approval-list li {
    grid-template-columns: 68px minmax(0, 1fr);
  }

  .leave-management-approval-list li small {
    grid-column: 2;
  }
}

@media (min-width: 901px) and (max-width: 1280px) {
  .cost-form {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }

  .project-info-edit-groups .project-session-row {
    grid-template-columns: repeat(2, minmax(180px, 1fr)) 38px;
  }

  .project-info-edit-groups .project-session-row label:nth-child(5) {
    grid-column: 1;
  }

  .project-info-edit-groups .project-session-row label:nth-child(4) {
    grid-column: 2;
  }

  .project-info-edit-groups .project-session-row .icon-button {
    grid-column: 3;
    grid-row: 1 / span 3;
    align-self: stretch;
    height: auto;
  }
}

/* Asana-inspired application shell — phase 1 */
.app-shell {
  --bg: #f7f7f8;
  --sidebar: #f7f7f5;
  --panel: #ffffff;
  --panel-hover: #fafafa;
  --line: #d9dade;
  --line-soft: #ececef;
  --text: #1e1f21;
  --muted: #6d6e72;
  --accent: #f06a6a;
  --green-bg: #e8f5ec;
  --green-text: #287642;
  --amber-bg: #fff3dc;
  --amber-text: #8b5d13;
  --red-bg: #fdebec;
  --red-text: #b33a43;
  --shadow: 0 18px 46px rgb(29 30 33 / 14%);
  grid-template-columns: 72px 196px minmax(0, 1fr);
  grid-template-rows: 48px minmax(0, 1fr);
  background: #292a2d;
  color: var(--text);
  color-scheme: light;
}

.app-shell.module-sidebar-hidden {
  grid-template-columns: 72px minmax(0, 1fr);
}

.app-shell.desktop-navigation-collapsed {
  grid-template-columns: minmax(0, 1fr);
}

.app-shell.desktop-navigation-collapsed .module-sidebar {
  display: none;
}

.app-rail {
  position: sticky;
  top: 0;
  z-index: 50;
  grid-column: 1;
  grid-row: 1 / 3;
  display: grid;
  grid-template-rows: 48px minmax(0, 1fr) auto;
  width: 72px;
  height: 100vh;
  overflow: hidden;
  border-right: 0;
  background: #292a2d;
}

.app-rail::after {
  position: absolute;
  top: 64px;
  right: 0;
  bottom: 0;
  width: 1px;
  background: #414247;
  content: "";
  pointer-events: none;
}

.app-shell.desktop-navigation-collapsed .app-rail {
  position: fixed;
  left: 0;
  width: 72px;
  height: 48px;
  background: transparent;
}

.app-shell.desktop-navigation-collapsed .app-rail::after,
.app-shell.desktop-navigation-collapsed .app-rail-nav,
.app-shell.desktop-navigation-collapsed .app-rail-account-wrap {
  display: none;
}

.app-rail-menu.navigation-toggle {
  display: grid;
  width: 72px;
  height: 48px;
  min-height: 48px;
  place-items: center;
  align-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #d8d9dc;
  touch-action: manipulation;
}

.app-rail-menu.navigation-toggle span {
  pointer-events: none;
}

.app-rail-menu.navigation-toggle:hover {
  background: #3a3b3f;
  color: #fff;
}

.app-rail-nav {
  display: grid;
  align-content: start;
  gap: 4px;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 4px 7px 12px;
  scrollbar-width: none;
}

.app-rail-nav::-webkit-scrollbar {
  display: none;
}

.app-rail-item {
  position: relative;
  display: grid;
  width: 58px;
  height: 54px;
  min-height: 54px;
  place-items: center;
  align-content: center;
  gap: 3px;
  padding: 5px 3px;
  border-radius: 8px;
  background: transparent;
  color: #a9aab0;
}

.app-rail-item svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.app-rail-item span {
  display: block;
  width: 100%;
  overflow: hidden;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.15;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-rail-item:hover,
.app-rail-item.active {
  background: #343539;
  color: #fff;
}

.app-rail-item.active::before {
  position: absolute;
  left: 0;
  width: 3px;
  height: 32px;
  border-radius: 0 4px 4px 0;
  background: var(--accent);
  content: "";
}

.app-rail-account {
  display: grid;
  width: 40px;
  height: 40px;
  min-height: 40px;
  place-items: center;
  margin: 10px auto 14px;
  padding: 0;
  border: 1px solid #55565b;
  border-radius: 999px;
  background: #f5c36b;
  color: #3d2b0b;
}

.app-rail-account:hover {
  background: #ffd27f;
}

.app-rail-account img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.app-rail-account span {
  font-size: 13px;
  font-weight: 800;
}

.app-rail-account-wrap {
  display: grid;
  place-items: center;
}

.app-rail-account-menu {
  position: fixed;
  left: 82px;
  bottom: 12px;
  z-index: 80;
  display: grid;
  width: 292px;
  max-width: calc(100vw - 96px);
  gap: 0;
  padding: 8px;
  border: 1px solid #dddfe4;
  border-radius: 14px;
  background: #fff;
  color: var(--text);
  box-shadow: 0 18px 48px rgb(25 28 34 / 20%), 0 2px 8px rgb(25 28 34 / 8%);
  transform-origin: left bottom;
  animation: app-rail-account-menu-in 140ms ease-out;
}

.app-rail-account-menu::before {
  position: absolute;
  bottom: 20px;
  left: -6px;
  width: 12px;
  height: 12px;
  border-bottom: 1px solid #dddfe4;
  border-left: 1px solid #dddfe4;
  background: #fff;
  content: "";
  transform: rotate(45deg);
}

@keyframes app-rail-account-menu-in {
  from {
    opacity: 0;
    transform: translateX(-4px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.app-rail-account-menu-header {
  display: grid;
  min-width: 0;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 9px 9px 12px;
}

.app-rail-account-menu-avatar {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #e0b45f;
  border-radius: 999px;
  background: #f5c36b;
  color: #3d2b0b;
  font-size: 14px;
  font-weight: 800;
}

.app-rail-account-menu-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.app-rail-account-menu-identity {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.app-rail-account-menu-identity > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.04em;
}

.app-rail-account-menu-identity > strong {
  overflow: hidden;
  font-size: 14px;
  font-weight: 780;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-rail-account-menu-identity > small {
  overflow: hidden;
  color: #74767c;
  font-size: 11px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-rail-account-menu-actions {
  display: grid;
  gap: 2px;
}

.workspace .app-rail-account-menu-item,
.app-rail-account-menu-item {
  display: grid;
  width: 100%;
  min-height: 54px;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #34363b;
  text-align: left;
  box-shadow: none;
}

.workspace .app-rail-account-menu-item:hover,
.app-rail-account-menu-item:hover {
  border: 0;
  background: #f3f4f6;
  color: var(--text);
}

.app-rail-account-menu-item > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.app-rail-account-menu-item strong {
  font-size: 12px;
  font-weight: 760;
  line-height: 1.35;
}

.app-rail-account-menu-item small {
  overflow: hidden;
  color: #7a7c82;
  font-size: 10px;
  font-weight: 550;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-rail-account-menu-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 8px;
  background: #eef2f8;
  color: #4b6388;
}

.app-rail-account-menu-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.app-rail-account-menu-chevron {
  color: #9a9ca1;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
}

.app-rail-account-menu-divider {
  height: 1px;
  margin: 4px 9px;
  background: var(--line-soft);
}

.workspace .app-rail-account-menu-item.danger,
.app-rail-account-menu-item.danger {
  color: #a83f3f;
}

.workspace .app-rail-account-menu-item.danger:hover,
.app-rail-account-menu-item.danger:hover {
  background: #fff1f1;
  color: #922f2f;
}

.app-rail-account-menu-item.danger .app-rail-account-menu-icon {
  background: #fff0f0;
  color: #b84848;
}

.app-rail-account-menu-item:focus-visible {
  outline: 2px solid #6c8fca;
  outline-offset: 1px;
}

.module-sidebar {
  position: sticky;
  top: 48px;
  z-index: 45;
  grid-column: 2;
  grid-row: 2;
  width: 196px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 12px 10px;
  border-top: 1px solid #414247;
  border-right: 0;
  border-radius: 16px 0 0 0;
  background: #252628;
}

.module-sidebar::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: #414247;
  content: "";
  pointer-events: none;
}

.module-sidebar-close {
  display: none;
  width: 30px;
  height: 30px;
  min-height: 30px;
  margin: 0 0 8px auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: #b8b9bd;
  font-size: 22px;
  font-weight: 400;
}

.module-nav {
  margin: 0;
  padding: 0;
  border: 0;
}

.module-nav-tabs {
  display: grid;
  gap: 3px;
}

.module-nav-separator {
  height: 1px;
  margin: 10px 6px;
  background: #45464a;
}

.module-nav-section-label {
  padding: 3px 10px 4px;
  color: #7f8188;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.module-nav-tab {
  display: flex;
  width: 100%;
  height: auto;
  min-height: 38px;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #bbbcc1;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
  text-align: left;
}

.module-nav-tab-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.module-nav-tab > span {
  min-width: 0;
}

.module-nav-tab:hover {
  border: 0;
  background: #343539;
  color: #fff;
}

.module-nav-tab.active {
  border: 0;
  background: #3b3c40;
  color: #fff;
}

.global-topbar {
  position: relative;
  z-index: 30;
  grid-column: 2 / -1;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 48px;
  padding: 6px 64px;
  background: #292a2d;
}

.global-search {
  position: relative;
  display: flex;
  width: min(480px, 48vw);
  min-width: 220px;
  align-items: center;
}

.global-search input {
  width: 100%;
  height: 34px;
  padding: 0 42px 0 14px;
  border: 1px solid #55565b;
  border-radius: 8px;
  background: #3b3c40;
  color: #fff;
}

.global-search input::placeholder {
  color: #b7b8bc;
}

.global-search input:focus {
  border-color: #77787e;
  box-shadow: 0 0 0 1px #77787e;
}

.global-search button {
  position: absolute;
  right: 2px;
  display: grid;
  width: 34px;
  height: 30px;
  min-height: 30px;
  place-items: center;
  padding: 0;
  background: transparent;
  color: #d7d8db;
}

.global-search button:hover {
  background: #4a4b50;
}

.global-search button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.global-topbar > .notification-center {
  position: absolute;
  right: 14px;
  bottom: 7px;
}

.global-topbar .notification-button {
  border-color: transparent;
  background: transparent;
  color: #d7d8db;
}

.global-topbar .notification-button:hover,
.global-topbar .notification-button[aria-expanded="true"] {
  background: #3a3b3f;
}

.workspace {
  grid-column: 3;
  grid-row: 2;
  width: 100%;
  min-width: 0;
  padding: 24px clamp(20px, 3vw, 44px) 40px;
  border-radius: 0;
  background: #fff;
}

.app-shell.module-sidebar-hidden .workspace,
.app-shell.desktop-navigation-collapsed .workspace {
  grid-column: 2;
  border-radius: 16px 0 0 0;
}

.app-shell.desktop-navigation-collapsed .global-topbar,
.app-shell.desktop-navigation-collapsed .workspace {
  grid-column: 1;
}

.app-shell.desktop-navigation-collapsed .workspace {
  border-radius: 0;
}

.topbar {
  align-items: center;
  justify-content: flex-start;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
}

.topbar-identity {
  align-items: center;
  min-width: 220px;
  gap: 12px;
}

.topbar-title-copy {
  padding-left: 0;
  border-left: 0;
}

.topbar-title-copy h1 {
  color: var(--text);
  font-size: 23px;
}

.navigation-toggle {
  display: grid;
  width: 38px;
  height: 38px;
  min-height: 38px;
  place-items: center;
  gap: 4px;
  padding: 9px;
  border: 0;
  background: transparent;
  color: #d8d9dc;
}

.navigation-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.navigation-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  width: 100%;
  height: 100%;
  min-height: 100%;
  padding: 0;
  border-radius: 0;
  background: rgb(0 0 0 / 48%);
  cursor: default;
}

.app-shell input,
.app-shell select,
.app-shell textarea {
  border-color: var(--line);
  background: #fff;
  color: var(--text);
}

.app-shell input::placeholder,
.app-shell textarea::placeholder {
  color: #9a9ba0;
}

.app-shell input:focus,
.app-shell select:focus,
.app-shell textarea:focus {
  border-color: #77787e;
  box-shadow: 0 0 0 1px #77787e;
}

.workspace button {
  background: #3d3c38;
  color: #fff;
}

.workspace button:hover {
  background: #514f49;
}

.app-shell .secondary-button,
.app-shell .icon-button,
.app-shell .notification-button,
.app-shell .navigation-toggle {
  border-color: var(--line);
  background: #fff;
  color: var(--text);
}

.app-shell .secondary-button:hover,
.app-shell .icon-button:hover,
.app-shell .notification-button:hover,
.app-shell .navigation-toggle:hover {
  background: #f1f1f2;
}

.app-shell .panel,
.app-shell .kpi-card,
.app-shell .notification-panel,
.app-shell .temporary-password-modal,
.app-shell .password-change-modal {
  border-color: var(--line);
  background: var(--panel);
  color: var(--text);
}

.app-shell th {
  background: #f5f5f6;
  color: #66676b;
}

.app-shell th,
.app-shell td,
.app-shell .panel-header {
  border-color: var(--line-soft);
}

.app-shell tbody tr:hover td {
  background: #f8f8f9;
}

.app-shell .customer-list-tools,
.app-shell .venue-list-tools,
.app-shell .attendance-time-grid article,
.app-shell .checkbox-group {
  border-color: var(--line);
  background: #f7f7f8;
}

.app-shell .acceptance-workspace {
  border: 0;
  background: transparent;
}

.app-shell .app-rail-menu.navigation-toggle {
  border: 0;
  background: transparent;
  color: #d8d9dc;
}

.app-shell .app-rail-menu.navigation-toggle:hover,
.app-shell .global-topbar .notification-button:hover,
.app-shell .global-topbar .notification-button[aria-expanded="true"] {
  background: #3a3b3f;
  color: #fff;
}

.app-shell .global-search input {
  border-color: #55565b;
  background: #3b3c40;
  color: #fff;
}

.app-shell .global-search input::placeholder {
  color: #b7b8bc;
}

.app-shell .global-topbar .notification-button {
  border-color: transparent;
  background: transparent;
  color: #d7d8db;
}

/* Data-management lists use a compact, row-first directory pattern. */
.app-shell .data-directory-panel {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

.app-shell .data-directory-panel .panel-header {
  min-height: 98px;
  padding: 22px 0;
}

.app-shell .data-directory-panel .panel-header h2,
.app-shell .template-directory-intro h2 {
  font-size: 22px;
  letter-spacing: -0.02em;
}

.app-shell .customer-list-tools,
.app-shell .venue-list-tools {
  padding: 14px 0;
  background: #fff;
}

.app-shell .customer-list-tools input,
.app-shell .venue-list-tools input {
  max-width: none;
  height: 40px;
  flex: 1 1 480px;
  border-color: #d9dadd;
  border-radius: 9px;
  background: #fff;
}

.app-shell .data-directory-table-wrap {
  border-top: 1px solid var(--line-soft);
}

.app-shell .data-directory-table {
  table-layout: fixed;
}

.app-shell .data-directory-table th {
  height: 44px;
  padding: 0;
  background: #fff;
  color: #77787d;
  font-size: 12px;
  font-weight: 700;
  text-transform: none;
}

.app-shell .data-directory-table td {
  min-height: 56px;
  padding: 10px 0;
  background: #fff;
  vertical-align: middle;
}

.app-shell .data-directory-table th:first-child,
.app-shell .data-directory-table td:first-child {
  width: 31%;
}

.app-shell .data-directory-table th:nth-child(2),
.app-shell .data-directory-table td:nth-child(2) {
  width: 19%;
}

.app-shell .data-directory-table th:nth-child(3),
.app-shell .data-directory-table td:nth-child(3) {
  width: 16%;
}

.app-shell .customer-directory-table th:nth-child(3),
.app-shell .customer-directory-table td:nth-child(3) {
  width: 20%;
}

.app-shell .customer-directory-table th:nth-child(4),
.app-shell .customer-directory-table td:nth-child(4) {
  width: 20%;
}

.app-shell .customer-directory-table th:nth-child(5),
.app-shell .customer-directory-table td:nth-child(5) {
  width: 10%;
}



.app-shell .vendor-directory-table th:nth-child(2),
.app-shell .vendor-directory-table td:nth-child(2) {
  width: 16%;
}

.app-shell .vendor-directory-table th:nth-child(3),
.app-shell .vendor-directory-table td:nth-child(3) {
  width: 30%;
}

.app-shell .vendor-directory-table th:nth-child(4),
.app-shell .vendor-directory-table td:nth-child(4) {
  width: 12%;
}

.app-shell .data-directory-table .compact-button {
  height: 30px;
  padding: 0 10px;
  border-color: #d7d8dd;
  border-radius: 7px;
  background: #fff;
  color: #45464b;
  font-size: 12px;
}

.app-shell .data-directory-table .compact-button:hover {
  border-color: #abafb8;
  background: #f7f7f8;
}

.app-shell .data-directory-table .stage-pill {
  min-width: 48px;
  justify-content: center;
}

/* Customer master data follows a list → customer → brand directory hierarchy. */
.customer-directory-detail-page {
  grid-template-columns: minmax(0, 1fr);
}

.app-shell .customer-directory-detail-panel {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.customer-directory-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  min-height: 80px;
  padding: 16px 0 18px;
  border-bottom: 1px solid var(--line-soft);
}

.app-shell .customer-directory-page-header [data-edit-customer-detail],
.app-shell .customer-directory-page-header [data-edit-brand-detail],
.app-shell .customer-directory-page-header [data-edit-vendor-detail],
.app-shell .customer-directory-page-header [data-edit-venue-detail],
.app-shell .customer-directory-page-header [data-edit-material-price-detail] {
  padding: 6px 2px;
  border: 0;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}

.app-shell .customer-directory-page-header [data-edit-customer-detail]:hover,
.app-shell .customer-directory-page-header [data-edit-brand-detail]:hover,
.app-shell .customer-directory-page-header [data-edit-vendor-detail]:hover,
.app-shell .customer-directory-page-header [data-edit-venue-detail]:hover,
.app-shell .customer-directory-page-header [data-edit-material-price-detail]:hover {
  background: transparent;
  color: var(--accent);
}

.app-shell .customer-directory-page-header [data-edit-customer-detail]:focus-visible,
.app-shell .customer-directory-page-header [data-edit-brand-detail]:focus-visible,
.app-shell .customer-directory-page-header [data-edit-vendor-detail]:focus-visible,
.app-shell .customer-directory-page-header [data-edit-venue-detail]:focus-visible,
.app-shell .customer-directory-page-header [data-edit-material-price-detail]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 32%, transparent);
  outline-offset: 3px;
}

.customer-directory-page-heading {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 12px;
}

.customer-directory-page-heading > div {
  min-width: 0;
}

.customer-directory-page-heading .eyebrow {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.customer-directory-page-heading h2,
.customer-directory-page-heading p,
.customer-directory-subsection h3,
.customer-directory-subsection p {
  margin: 0;
}

.customer-directory-page-heading h2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 3px;
  overflow-wrap: anywhere;
  font-size: 22px;
  letter-spacing: -0.02em;
}

.customer-directory-page-heading h2 .stage-pill {
  font-size: 11px;
  letter-spacing: 0;
}

.customer-directory-page-heading p,
.customer-directory-section-heading p,
.customer-directory-subsection-header p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.customer-directory-page-heading .venue-directory-page-note {
  margin-top: 2px;
  font-size: 12px;
}

.customer-directory-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-bottom: 1px solid var(--line-soft);
}

.customer-directory-summary > div {
  display: grid;
  min-width: 0;
  gap: 5px;
  padding: 18px 18px 18px 0;
  border-top: 1px solid var(--line-soft);
}

.customer-directory-summary > div:nth-child(even) {
  padding-left: 18px;
  border-left: 1px solid var(--line-soft);
}

.customer-directory-summary > .span-2 {
  grid-column: 1 / -1;
  padding-right: 0;
}

.customer-directory-summary span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.customer-directory-summary strong {
  overflow-wrap: anywhere;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.5;
}

.customer-directory-section-heading {
  padding: 24px 0 14px;
}

.customer-directory-section-heading h3,
.customer-directory-subsection-header h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 16px;
  line-height: 1.35;
}

.customer-directory-section-heading h3::before,
.customer-directory-subsection-header h3::before {
  display: inline-block;
  width: 4px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #3f70cf;
  content: "";
}

.customer-directory-subsection {
  padding-top: 24px;
}

.customer-directory-subsection-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
}

.customer-directory-subsection-header > span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.customer-directory-empty-row {
  margin: 0;
  padding: 15px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 13px;
}

.customer-prepaid-credit-section {
  padding-top: 6px;
}

.customer-prepaid-summary .is-primary strong {
  color: #3f70cf;
  font-size: 18px;
}

.customer-prepaid-empty-note {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 15px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.customer-prepaid-empty-note strong {
  font-size: 13px;
}

.customer-prepaid-empty-note span {
  color: var(--muted);
  font-size: 12px;
}

.customer-prepaid-credit-section .customer-credit-company-list {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.customer-prepaid-credit-section .customer-credit-company-list > button {
  grid-template-columns: minmax(120px, 0.8fr) minmax(130px, 1fr) minmax(130px, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 13px 0;
  border: 0;
  border-top: 1px solid var(--line-soft);
  border-radius: 0;
  background: transparent;
}

.customer-prepaid-credit-section .customer-credit-company-list > button:hover {
  border-color: var(--line-soft);
  background: #f8f9fb;
}

.app-shell .customer-directory-table tbody tr[data-open-customer-detail] {
  cursor: pointer;
}

.app-shell .vendor-directory-table tbody tr[data-open-vendor-detail] {
  cursor: pointer;
}

.app-shell .venue-data-table tbody tr[data-open-venue-detail] {
  cursor: pointer;
}

.app-shell .material-price-table tbody tr[data-open-material-price-detail] {
  cursor: pointer;
}

/* Keep the final status field consistent and compact across basic-data tables. */
.app-shell {
  --basic-data-status-column-width: 88px;
}

.app-shell .basic-data-status-column {
  width: var(--basic-data-status-column-width) !important;
}

.app-shell .customer-directory-table th:last-child,
.app-shell .customer-directory-table td:last-child,
.app-shell .customer-brand-directory-table th:last-child,
.app-shell .customer-brand-directory-table td:last-child,
.app-shell .brand-contact-directory-table th:last-child,
.app-shell .brand-contact-directory-table td:last-child,
.app-shell .vendor-directory-table th:last-child,
.app-shell .vendor-directory-table td:last-child,
.app-shell .vendor-detail-crew-table th:last-child,
.app-shell .vendor-detail-crew-table td:last-child,
.app-shell .vendor-detail-vehicle-table th:last-child,
.app-shell .vendor-detail-vehicle-table td:last-child,
.app-shell .venue-data-table th:last-child,
.app-shell .venue-data-table td:last-child,
.app-shell .material-price-table th:last-child,
.app-shell .material-price-table td:last-child {
  width: var(--basic-data-status-column-width) !important;
  white-space: nowrap;
}

.app-shell .venue-data-table .venue-status-column {
  width: var(--basic-data-status-column-width) !important;
}

.app-shell .venue-data-table {
  table-layout: fixed;
}

/* Allocate the full remaining width so the fixed 88px status column cannot absorb spare space. */
.app-shell :is(
  .customer-directory-table,
  .customer-brand-directory-table,
  .brand-contact-directory-table,
  .vendor-directory-table,
  .vendor-detail-crew-table,
  .vendor-detail-vehicle-table,
  .venue-data-table,
  .material-price-table
) {
  table-layout: fixed;
}

.app-shell :is(
  .customer-directory-table,
  .customer-brand-directory-table,
  .brand-contact-directory-table,
  .vendor-directory-table,
  .vendor-detail-crew-table,
  .vendor-detail-vehicle-table,
  .venue-data-table,
  .material-price-table
) :is(th, td):not(:last-child) {
  width: auto !important;
}

.app-shell .customer-directory-table col:first-child,
.app-shell .customer-directory-table th:first-child,
.app-shell .customer-directory-table td:first-child {
  width: 40% !important;
}

.app-shell .vendor-directory-table col:first-child,
.app-shell .vendor-directory-table th:first-child,
.app-shell .vendor-directory-table td:first-child {
  width: 48% !important;
}

.app-shell .customer-brand-directory-table col:nth-child(1) { width: calc(31% - 27.28px); }
.app-shell .customer-brand-directory-table col:nth-child(2) { width: calc(36% - 31.68px); }
.app-shell .customer-brand-directory-table col:nth-child(3) { width: calc(33% - 29.04px); }






.app-shell :is(.customer-contact-directory-table, .brand-contact-directory-table) {
  table-layout: fixed;
}

.app-shell :is(.customer-contact-directory-table, .brand-contact-directory-table) th:last-child,
.app-shell :is(.customer-contact-directory-table, .brand-contact-directory-table) td:last-child {
  width: 200px !important;
}

.app-shell .customer-contact-directory-table col:nth-child(1) { width: 18%; }
.app-shell .customer-contact-directory-table col:nth-child(2) { width: 14%; }
.app-shell .customer-contact-directory-table col:nth-child(3) { width: 18%; }
.app-shell .customer-contact-directory-table col:nth-child(4) { width: auto; }

.app-shell .brand-contact-directory-table col:nth-child(1) { width: 17%; }
.app-shell .brand-contact-directory-table col:nth-child(2) { width: 14%; }
.app-shell .brand-contact-directory-table col:nth-child(3) { width: auto; }
.app-shell .brand-contact-directory-table col:nth-child(4) { width: 14%; }

.app-shell .vendor-detail-crew-table col:first-child { width: calc(100% - 88px); }
.app-shell .vendor-detail-vehicle-table col:nth-child(1) { width: calc(34% - 29.92px); }
.app-shell .vendor-detail-vehicle-table col:nth-child(2) { width: calc(27% - 23.76px); }
.app-shell .vendor-detail-vehicle-table col:nth-child(3) { width: calc(39% - 34.32px); }

.app-shell .vendor-detail-crew-table th:first-child,
.app-shell .vendor-detail-crew-table td:first-child {
  width: 75%;
}

.app-shell .vendor-detail-crew-table th:last-child,
.app-shell .vendor-detail-crew-table td:last-child {
  width: 25%;
}

.app-shell .vendor-detail-vehicle-table th:first-child,
.app-shell .vendor-detail-vehicle-table td:first-child {
  width: 28%;
}

.app-shell .vendor-detail-vehicle-table th:nth-child(2),
.app-shell .vendor-detail-vehicle-table td:nth-child(2) {
  width: 22%;
}

.app-shell .vendor-detail-vehicle-table th:nth-child(3),
.app-shell .vendor-detail-vehicle-table td:nth-child(3) {
  width: 32%;
}

.app-shell .vendor-detail-vehicle-table th:last-child,
.app-shell .vendor-detail-vehicle-table td:last-child {
  width: 18%;
}

.app-shell .venue-detail-file-table th:first-child,
.app-shell .venue-detail-file-table td:first-child {
  width: 78%;
}

.app-shell .venue-detail-file-table th:last-child,
.app-shell .venue-detail-file-table td:last-child {
  width: 22%;
}

.app-shell .customer-brand-directory-table th:first-child,
.app-shell .customer-brand-directory-table td:first-child {
  width: 24%;
}

.app-shell .customer-brand-directory-table th:nth-child(2),
.app-shell .customer-brand-directory-table td:nth-child(2) {
  width: 28%;
}

.app-shell .customer-brand-directory-table th:nth-child(3),
.app-shell .customer-brand-directory-table td:nth-child(3) {
  width: 26%;
}

.app-shell .customer-brand-directory-table th:nth-child(4),
.app-shell .customer-brand-directory-table td:nth-child(4),
.app-shell .customer-brand-directory-table th:last-child,
.app-shell .customer-brand-directory-table td:last-child {
  width: 11%;
}

.app-shell .brand-contact-directory-table th:first-child,
.app-shell .brand-contact-directory-table td:first-child {
  width: 17%;
}

.app-shell .brand-contact-directory-table th:nth-child(2),
.app-shell .brand-contact-directory-table td:nth-child(2) {
  width: 14%;
}

.app-shell .brand-contact-directory-table th:nth-child(3),
.app-shell .brand-contact-directory-table td:nth-child(3) {
  width: auto;
}

.app-shell .brand-contact-directory-table th:nth-child(4),
.app-shell .brand-contact-directory-table td:nth-child(4) {
  width: 14%;
}

.app-shell .brand-contact-directory-table th:last-child,
.app-shell .brand-contact-directory-table td:last-child {
  width: 200px !important;
}

.app-shell .customer-contact-directory-table th:last-child,
.app-shell .customer-contact-directory-table td:last-child {
  width: 200px !important;
}

.app-shell .brand-contact-directory-table td:nth-child(3),
.app-shell .customer-contact-directory-table td:nth-child(4) {
  padding-right: 24px;
  overflow-wrap: anywhere;
}

.app-shell .employee-directory-table th:nth-child(1),
.app-shell .employee-directory-table td:nth-child(1) {
  width: 15% !important;
}

.app-shell .employee-directory-table th:nth-child(2),
.app-shell .employee-directory-table td:nth-child(2) {
  width: 19% !important;
}

.app-shell .employee-directory-table th:nth-child(3),
.app-shell .employee-directory-table td:nth-child(3) {
  width: 26% !important;
}

.app-shell .employee-directory-table th:nth-child(4),
.app-shell .employee-directory-table td:nth-child(4) {
  width: 18% !important;
}

.app-shell .employee-directory-table th:nth-child(5),
.app-shell .employee-directory-table td:nth-child(5) {
  width: auto !important;
}

.app-shell #newCustomerButton,
.app-shell #employeeCreateButton {
  border-color: #4573d2;
  background: #4573d2;
  color: #fff;
}

.app-shell #newVenueButton {
  border-color: #4573d2;
  background: #4573d2;
  color: #fff;
}

.app-shell #newMaterialPriceButton {
  border-color: #4573d2;
  background: #4573d2;
  color: #fff;
}

.app-shell #newVendorButton {
  border-color: #4573d2;
  background: #4573d2;
  color: #fff;
}

.app-shell #newCustomerButton:hover,
.app-shell #employeeCreateButton:hover {
  border-color: #365fb6;
  background: #365fb6;
}

.app-shell #newVenueButton:hover {
  border-color: #365fb6;
  background: #365fb6;
}

.app-shell #newMaterialPriceButton:hover {
  border-color: #365fb6;
  background: #365fb6;
}

.app-shell #newVendorButton:hover {
  border-color: #365fb6;
  background: #365fb6;
}

.template-workspace {
  max-width: none;
  gap: 12px;
}

.app-shell .template-directory-intro {
  display: flex;
  align-items: flex-end;
  min-height: 104px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line-soft);
  background: #fff;
}

.app-shell .template-directory-intro h2 {
  margin: 0;
}

.app-shell .template-directory-intro p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.app-shell .template-section {
  border: 0;
  border-radius: 0;
}

.app-shell .template-section-header {
  min-height: 56px;
  padding: 0;
  border-top: 1px solid var(--line-soft);
  background: #fff;
}

.app-shell .template-section-header h2 {
  font-size: 15px;
}

.app-shell .template-section[open] .template-section-header {
  background: #fff;
}

.app-shell .template-list {
  gap: 0;
  padding: 0;
  background: #fff;
}

.app-shell .template-list-item {
  min-height: 58px;
  padding: 10px 0;
  border: 0;
  border-radius: 0;
  border-top: 1px solid var(--line-soft);
  background: #fff;
}

.app-shell .template-list-item:hover {
  border-color: var(--line-soft);
  background: #fafafb;
}

.template-list-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.template-list-icon {
  display: inline-grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 7px;
  background: #eeeff9;
  color: #596dba;
  font-size: 16px;
  line-height: 1;
}

.app-shell .template-list-item strong {
  font-size: 13px;
  font-weight: 650;
}

.template-list-action {
  display: inline-flex;
  gap: 5px;
  align-items: center;
}

.app-shell .template-list-empty {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--line-soft);
  border-radius: 0;
  background: #fff;
}

@media (max-width: 760px) {
  .app-shell .data-directory-panel .panel-header,
  .app-shell .template-directory-intro,
  .app-shell .template-section-header,
  .app-shell .template-list-item {
    padding-right: 16px;
    padding-left: 16px;
  }

  .app-shell .customer-list-tools,
  .app-shell .venue-list-tools {
    padding-right: 0;
    padding-left: 0;
  }

  .app-shell .data-directory-table {
    min-width: 860px;
  }

  .app-shell .data-directory-table-wrap {
    overflow-x: auto;
  }

  .customer-directory-page-header,
  .customer-directory-subsection-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .customer-directory-page-header > .secondary-button {
    width: 100%;
  }

  .customer-directory-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .customer-directory-summary > div,
  .customer-directory-summary > div:nth-child(even) {
    padding: 15px 0;
    border-left: 0;
  }

  .customer-prepaid-empty-note {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .customer-prepaid-credit-section .customer-credit-company-list > button {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
}

@media (max-width: 1180px) {
  .app-shell,
  .app-shell.module-sidebar-hidden,
  .app-shell.desktop-navigation-collapsed {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .global-topbar {
    grid-column: 2;
  }

  .workspace {
    grid-column: 2;
    border-radius: 16px 0 0 0;
  }

  .app-shell.navigation-drawer-open .workspace {
    border-radius: 0;
  }

  .module-sidebar {
    position: fixed;
    top: 48px;
    left: 72px;
    height: calc(100vh - 48px);
    transform: translateX(-110%);
    box-shadow: 14px 0 34px rgb(0 0 0 / 28%);
    transition: transform 180ms ease;
  }

  .app-shell.navigation-drawer-open .module-sidebar {
    transform: translateX(0);
  }

  .module-sidebar-close,
  .navigation-toggle {
    display: grid;
  }
}

@media (max-width: 760px) {
  .app-shell,
  .app-shell.module-sidebar-hidden,
  .app-shell.desktop-navigation-collapsed {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-rail {
    position: fixed;
    left: 0;
    width: 72px;
    height: 48px;
    border-right: 0;
    overflow: hidden;
    transform: none;
    transition: height 180ms ease;
  }

  .app-rail-nav,
  .app-rail-account-wrap {
    visibility: hidden;
    pointer-events: none;
  }

  .app-shell.navigation-drawer-open .app-rail {
    box-shadow: 12px 0 30px rgb(0 0 0 / 30%);
  }

  .app-shell.navigation-drawer-open .app-rail-nav,
  .app-shell.navigation-drawer-open .app-rail-account-wrap {
    visibility: visible;
    pointer-events: auto;
  }

  .global-topbar {
    grid-column: 1;
    padding: 6px 54px 6px 72px;
  }

  .global-search {
    width: 100%;
    min-width: 0;
  }

  .global-topbar > .notification-center {
    right: 8px;
  }

  .module-sidebar {
    top: 48px;
    left: 72px;
    grid-column: 1;
    height: calc(100vh - 48px);
    transform: translateX(calc(-100% - 72px));
  }

  .workspace {
    grid-column: 1;
    grid-row: 2;
    padding: 18px 16px 32px;
    border-radius: 14px 0 0 0;
  }

  .app-shell.module-sidebar-hidden .workspace,
  .app-shell.desktop-navigation-collapsed .workspace {
    grid-column: 1;
  }

  .topbar {
    align-items: stretch;
    gap: 14px;
  }

  .topbar-identity {
    flex-direction: row;
    align-items: center;
    min-width: 0;
  }

  .topbar-title-copy h1,
  .topbar-title-copy p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app-shell .page-section,
  .app-shell .panel,
  .app-shell .form-grid,
  .app-shell .form-body,
  .app-shell .member-row,
  .app-shell .session-row {
    min-width: 0;
    max-width: 100%;
  }

  .app-shell .form-grid,
  .app-shell .single-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-shell .project-create-section > .project-create-drawer {
    width: 100%;
  }

  .app-shell .member-row,
  .app-shell .session-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 420px) {
  .module-sidebar {
    width: calc(100vw - 72px);
  }
}

/* Material cost directory follows the same lightweight hierarchy as the other master-data lists. */
#materialPriceListSection .material-price-list-heading {
  min-width: 0;
}

.material-price-detail-summary {
  display: grid;
  grid-template-columns: minmax(220px, 1.25fr) repeat(2, minmax(160px, 1fr));
  border-bottom: 1px solid var(--line-soft);
}

.material-price-detail-summary > div {
  display: grid;
  min-width: 0;
  align-content: center;
  gap: 6px;
  min-height: 104px;
  padding: 18px 24px;
  border-left: 1px solid var(--line-soft);
}

.material-price-detail-summary > div:first-child {
  padding-left: 0;
  border-left: 0;
}

.material-price-detail-summary span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.material-price-detail-summary strong {
  overflow-wrap: anywhere;
  font-size: 14px;
  font-weight: 680;
  line-height: 1.5;
}

.material-price-detail-summary .material-price-detail-primary strong {
  color: #3f70cf;
  font-size: 24px;
  font-weight: 760;
  letter-spacing: -0.025em;
}

@media (max-width: 760px) {
  .material-price-detail-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .material-price-detail-summary > div,
  .material-price-detail-summary > div:first-child {
    min-height: 0;
    padding: 15px 0;
    border-top: 1px solid var(--line-soft);
    border-left: 0;
  }

  .material-price-detail-summary > div:first-child {
    border-top: 0;
  }
}

#materialPriceListSection .material-price-list-title-row {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}

#materialPriceListSection #materialPriceCountBadge {
  min-width: 0;
  padding: 0 0 0 12px;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
}

#materialPriceListSection .material-price-list-tools {
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
  padding: 0;
  border: 0;
  background: transparent;
}

#materialPriceListSection .material-price-list-search {
  min-width: 0;
  flex: 1 1 260px;
}

#materialPriceListSection .material-price-list-filter-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 4px;
}

#materialPriceListSection .material-price-directory-filter {
  position: relative;
  min-width: 0;
}

#materialPriceListSection .material-price-directory-filter::after {
  position: absolute;
  top: 50%;
  right: 9px;
  color: #85868b;
  content: "⌄";
  font-size: 12px;
  line-height: 1;
  pointer-events: none;
  transform: translateY(-58%);
}

#materialPriceListSection .material-price-directory-filter select {
  width: auto;
  max-width: 210px;
  min-height: 38px;
  padding: 6px 28px 6px 10px;
  border: 0;
  border-radius: 6px;
  appearance: none;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  box-shadow: none;
  cursor: pointer;
}

#materialPriceListSection .material-price-directory-filter select:hover,
#materialPriceListSection .material-price-directory-filter select:focus {
  background: #f1f2f4;
  color: var(--text);
}

#materialPriceListSection .material-price-directory-filter select:focus {
  border-color: transparent;
  box-shadow: none;
  outline: 2px solid #3f70cf;
  outline-offset: 1px;
}

#materialPriceListSection .material-price-directory-filter.is-filtered select {
  background: #edf2fb;
  color: #315fb5;
}

#materialPriceListSection .material-price-list-tools .material-price-list-search input {
  max-width: none;
  border-color: transparent;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
}

#materialPriceListSection .material-price-list-tools .material-price-list-search input:hover {
  background: #f7f7f8;
}

#materialPriceListSection .material-price-list-tools .material-price-list-search input:focus {
  border-color: #3f70cf;
  background: #fff;
  box-shadow: 0 0 0 1px #3f70cf;
}

#materialPriceListSection #clearMaterialPriceSearchButton {
  width: auto;
  height: 34px;
  padding: 0 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

#materialPriceListSection #clearMaterialPriceSearchButton:hover {
  background: #f1f2f4;
  color: var(--text);
}

#materialPriceListSection .material-price-list-tools:has(input:placeholder-shown):not(.has-active-filters) #clearMaterialPriceSearchButton {
  display: none;
}

@media (max-width: 760px) {
  #materialPriceListSection .project-list-primary-action {
    width: auto;
  }

  #materialPriceListSection .material-price-list-tools {
    padding: 0;
  }

  #materialPriceListSection .material-price-list-search {
    flex-basis: 100%;
  }

  #materialPriceListSection .material-price-list-filter-row {
    flex: 1 1 auto;
  }

  #materialPriceListSection .material-price-directory-filter {
    flex: 1 1 0;
  }

  #materialPriceListSection .material-price-directory-filter select {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 420px) {
  #materialPriceListSection .material-price-list-title-row {
    display: grid;
    gap: 2px;
  }

  #materialPriceListSection #materialPriceCountBadge {
    padding-left: 0;
    border-left: 0;
  }
}

/* Vendor directory mirrors the approved lightweight customer-list hierarchy. */
#vendorListSection .vendor-list-heading {
  min-width: 0;
}

#vendorListSection .vendor-list-title-row {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}

#vendorListSection #vendorDirectoryCountBadge {
  min-width: 0;
  padding: 0 0 0 12px;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
}

#vendorListSection .vendor-list-tools {
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
  padding: 0;
  border: 0;
  background: transparent;
}

#vendorListSection .vendor-list-search {
  min-width: 0;
  flex: 1 1 260px;
}

#vendorListSection .vendor-list-filter-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 4px;
}

#vendorListSection .vendor-directory-filter {
  position: relative;
  min-width: 0;
}

#vendorListSection .vendor-directory-filter::after {
  position: absolute;
  top: 50%;
  right: 9px;
  color: #85868b;
  content: "⌄";
  font-size: 12px;
  line-height: 1;
  pointer-events: none;
  transform: translateY(-58%);
}

#vendorListSection .vendor-directory-filter select {
  width: auto;
  max-width: 210px;
  min-height: 38px;
  padding: 6px 28px 6px 10px;
  border: 0;
  border-radius: 6px;
  appearance: none;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  box-shadow: none;
  cursor: pointer;
}

#vendorListSection .vendor-directory-filter select:hover,
#vendorListSection .vendor-directory-filter select:focus {
  background: #f1f2f4;
  color: var(--text);
}

#vendorListSection .vendor-directory-filter select:focus {
  border-color: transparent;
  box-shadow: none;
  outline: 2px solid #3f70cf;
  outline-offset: 1px;
}

#vendorListSection .vendor-directory-filter.is-filtered select {
  background: #edf2fb;
  color: #315fb5;
}

#vendorListSection .vendor-list-tools .vendor-list-search input {
  max-width: none;
  border-color: transparent;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
}

#vendorListSection .vendor-list-tools .vendor-list-search input:hover {
  background: #f7f7f8;
}

#vendorListSection .vendor-list-tools .vendor-list-search input:focus {
  border-color: #3f70cf;
  background: #fff;
  box-shadow: 0 0 0 1px #3f70cf;
}

#vendorListSection #clearVendorSearchButton {
  width: auto;
  height: 34px;
  padding: 0 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

#vendorListSection #clearVendorSearchButton:hover {
  background: #f1f2f4;
  color: var(--text);
}

#vendorListSection .vendor-list-tools:has(input:placeholder-shown):not(.has-active-filters) #clearVendorSearchButton {
  display: none;
}

@media (max-width: 760px) {
  #vendorListSection .project-list-primary-action {
    width: auto;
  }

  #vendorListSection .vendor-list-tools {
    padding: 0;
  }

  #vendorListSection .vendor-list-search {
    flex-basis: 100%;
  }

  #vendorListSection .vendor-list-filter-row {
    flex: 1 1 auto;
  }

  #vendorListSection .vendor-directory-filter {
    flex: 1 1 0;
  }

  #vendorListSection .vendor-directory-filter select {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 420px) {
  #vendorListSection .vendor-list-title-row {
    display: grid;
    gap: 2px;
  }

  #vendorListSection #vendorDirectoryCountBadge {
    padding-left: 0;
    border-left: 0;
  }
}

/* Home dashboard — phase 2A */
.home-dashboard {
  --home-card-title-size: clamp(16px, calc(13.5px + 0.18vw), 18px);
  --home-list-title-size: clamp(14px, calc(11.5px + 0.22vw), 16px);
  --home-copy-size: clamp(12px, calc(9.5px + 0.18vw), 14px);
  --home-meta-size: clamp(12px, calc(10px + 0.15vw), 13px);
  --home-list-row-height: clamp(60px, calc(52px + 0.625vw), 64px);
  --home-vehicle-card-height: clamp(168px, calc(160px + 0.5vw), 174px);
  --home-card-header-bg: #eef3f8;
  --home-card-header-line: #dce4ed;
  --home-card-header-accent: #49627f;
  display: grid;
  gap: 20px;
  margin: 0;
  padding: 0;
}

.home-dashboard[hidden] {
  display: none;
}

.home-dashboard-hero {
  display: grid;
  gap: 4px;
  padding: 4px 2px 0;
}

.home-dashboard-date {
  color: var(--muted);
  font-size: var(--home-copy-size);
  font-weight: 700;
}

.home-dashboard-hero h1 {
  margin: 0;
  color: var(--text);
  font-size: clamp(26px, 2.5vw, 34px);
  font-weight: 650;
  letter-spacing: -0.035em;
  line-height: 1.2;
}

.home-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  align-items: stretch;
  gap: 16px;
}

.home-dashboard-primary,
.home-dashboard-secondary {
  display: grid;
  min-width: 0;
  gap: 16px;
}

.home-dashboard .dashboard-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

.dashboard-card-header {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 16px;
}

.home-dashboard .dashboard-card-header {
  padding-block: 10px;
  border-bottom: 1px solid var(--home-card-header-line);
  background: var(--home-card-header-bg);
}

.home-dashboard-primary {
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.home-dashboard-primary .dashboard-card {
  display: flex;
  min-height: 0;
  flex-direction: column;
}

.home-dashboard-primary .dashboard-list {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
}

.dashboard-card-header > div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.dashboard-card-header > div > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.dashboard-card-header .dashboard-card-actions {
  flex: 0 0 auto;
  gap: 7px;
}

.dashboard-card-header h2 {
  margin: 0;
  color: var(--text);
  font-size: var(--home-card-title-size, 16px);
  line-height: 1.3;
}

.dashboard-card-header p {
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--home-copy-size, 12px);
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-card-icon {
  display: grid;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  place-items: center;
  border-radius: 0;
  background: transparent;
  color: #55565b;
}

.home-dashboard .dashboard-card-icon {
  color: var(--home-card-header-accent);
}

.dashboard-card-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.workspace .dashboard-text-button {
  width: auto;
  min-height: 30px;
  flex: 0 0 auto;
  padding: 5px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #56575b;
  font-size: var(--home-meta-size, 12px);
  font-weight: 700;
}

.workspace .dashboard-text-button:hover {
  background: #f1f1f3;
  color: var(--text);
}

.home-dashboard .dashboard-card-header .dashboard-text-button:hover {
  background: rgb(73 98 127 / 10%);
  color: #314962;
}

.workspace .dashboard-text-button:focus-visible,
.workspace .dashboard-vehicle-item:focus-visible,
.workspace .dashboard-vehicle-return:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.workspace .dashboard-inline-action {
  display: flex;
  width: 100%;
  min-height: 42px;
  align-items: center;
  justify-content: flex-start;
  padding: 8px 16px;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: var(--muted);
  font-size: var(--home-copy-size, 12px);
  font-weight: 650;
  text-align: left;
}

.workspace .dashboard-inline-action:hover {
  background: #f8f8f9;
  color: var(--text);
}

.dashboard-task-composer {
  position: relative;
  display: grid;
  gap: 12px;
  margin: 10px 14px 14px;
  padding: 14px 14px 12px;
  border: 1px solid #dfe3e9;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 24px rgb(28 35 48 / 6%);
}

.dashboard-task-composer:focus-within {
  border-color: #b9cae5;
  box-shadow: 0 10px 28px rgb(44 83 145 / 9%), 0 0 0 3px rgb(73 120 196 / 8%);
}

.dashboard-reminder-editor {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 30px;
  align-items: start;
  gap: 10px;
  min-width: 0;
}

.dashboard-reminder-circle {
  width: 20px;
  height: 20px;
  margin-top: 3px;
  border: 1.5px solid #8ba6ce;
  border-radius: 50%;
  background: linear-gradient(#fff, #f6f9fd);
  box-shadow: inset 0 0 0 3px #fff;
}

.dashboard-reminder-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.dashboard-task-composer .dashboard-reminder-title,
.dashboard-task-composer .dashboard-reminder-details {
  width: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  font-family: inherit;
}

.dashboard-task-composer .dashboard-reminder-title {
  height: 25px;
  font-size: max(var(--home-copy-size, 14px), 14px);
  font-weight: 750;
  line-height: 25px;
}

.dashboard-task-composer .dashboard-reminder-details {
  max-height: 76px;
  resize: none;
  overflow-y: auto;
  color: #686b72;
  font-size: var(--home-meta-size, 12px);
  line-height: 1.55;
}

.workspace .dashboard-reminder-close {
  width: 30px;
  min-height: 30px;
  align-self: start;
  padding: 7px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #858b95;
}

.workspace .dashboard-reminder-close:hover {
  background: #f0f2f5;
  color: #4d535d;
}

.workspace .dashboard-reminder-close:focus-visible {
  outline: 2px solid #7fa3db;
  outline-offset: 1px;
}

.dashboard-reminder-close svg {
  display: block;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.8;
}

.dashboard-task-composer .dashboard-reminder-title::placeholder,
.dashboard-task-composer .dashboard-reminder-details::placeholder {
  color: #8b8e95;
  opacity: 1;
}

.dashboard-task-composer .dashboard-reminder-title:focus,
.dashboard-task-composer .dashboard-reminder-details:focus {
  border-color: transparent;
  outline: 0;
  background: transparent;
  box-shadow: none;
}

.dashboard-reminder-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-left: 32px;
}

.dashboard-task-composer .dashboard-reminder-option {
  display: inline-flex;
  width: auto;
  min-width: 0;
  min-height: 28px;
  align-items: center;
  gap: 3px;
  margin: 0;
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #f1f3f6;
  color: #646870;
}

.dashboard-task-composer .dashboard-reminder-option > svg {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  fill: none;
  stroke: #68758a;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.dashboard-reminder-option-label {
  flex: 0 0 auto;
  color: #747982;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.dashboard-task-composer .dashboard-reminder-option:hover {
  border-color: #dce2eb;
  background: #eceff4;
}

.dashboard-task-composer .dashboard-reminder-option input,
.dashboard-task-composer .dashboard-reminder-option select {
  width: auto;
  height: 20px;
  min-width: 0;
  min-height: 20px;
  margin: 0;
  padding: 0 16px 0 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  color: #555a63;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 20px;
}

.dashboard-task-composer .dashboard-reminder-option input:focus,
.dashboard-task-composer .dashboard-reminder-option select:focus {
  outline: 0;
}

.dashboard-task-composer .dashboard-reminder-option:focus-within {
  border-color: #bfd0e9;
  background: #edf2f9;
  box-shadow: 0 0 0 2px rgb(70 121 202 / 18%);
}

.dashboard-task-composer .dashboard-reminder-date input {
  max-width: 118px;
}

.dashboard-task-composer .dashboard-reminder-project select {
  max-width: 210px;
}

.dashboard-reminder-message {
  min-width: 0;
  margin-left: 32px;
  padding-top: 9px;
  border-top: 1px solid #eef0f3;
  white-space: normal;
}

.dashboard-reminder-message:empty {
  display: none;
}

.dashboard-list {
  display: grid;
  min-height: 176px;
  align-content: start;
}

.dashboard-list.compact {
  min-height: 104px;
}

.dashboard-project-timeline {
  display: block;
  scrollbar-width: thin;
}

.dashboard-project-card .dashboard-project-timeline {
  height: clamp(350px, calc(320px + 2vw), 380px);
  min-height: 0;
  flex: 0 0 auto;
  overflow-y: auto;
}

.dashboard-project-timeline-items {
  min-width: 0;
}

.workspace .dashboard-project-timeline-item {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 74px;
  grid-template-columns: 54px 18px minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
  padding: 10px 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.workspace .dashboard-project-timeline-item:hover {
  background: #f8f8f9;
  color: var(--text);
}

.workspace .dashboard-project-timeline-item:focus-visible {
  position: relative;
  z-index: 2;
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.dashboard-project-timeline-date {
  display: grid;
  align-content: start;
  justify-items: end;
  gap: 2px;
  padding-top: 4px;
  color: #77787d;
  white-space: nowrap;
}

.dashboard-project-timeline-date strong {
  font-size: var(--home-copy-size, 12px);
  line-height: 1.3;
}

.dashboard-project-timeline-date small {
  color: #97989c;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.3;
}

.dashboard-project-timeline-marker {
  position: relative;
  min-height: 54px;
}

.dashboard-project-timeline-marker::before {
  position: absolute;
  top: -10px;
  bottom: -10px;
  left: 50%;
  width: 1px;
  background: #cbd8eb;
  content: "";
  transform: translateX(-50%);
}

.dashboard-project-timeline-marker::after {
  position: absolute;
  top: 7px;
  left: 50%;
  width: 9px;
  height: 9px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1.5px #6689c2;
  content: "";
  transform: translateX(-50%);
}

.dashboard-project-timeline-item:first-child .dashboard-project-timeline-marker::before {
  top: 11px;
}

.dashboard-project-timeline-item:last-child .dashboard-project-timeline-marker::before {
  bottom: calc(100% - 12px);
}

.dashboard-project-timeline-item.is-today .dashboard-project-timeline-date {
  color: #4f73ad;
}

.dashboard-project-timeline-item.is-today .dashboard-project-timeline-marker::after {
  background: #5d82be;
  box-shadow: 0 0 0 1.5px #5d82be;
}

.dashboard-project-timeline-copy {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 5px;
  padding-top: 2px;
}

.dashboard-project-timeline-copy strong,
.dashboard-project-timeline-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-project-timeline-copy strong {
  font-size: var(--home-list-title-size, 14px);
  line-height: 1.4;
}

.dashboard-project-timeline-copy small {
  color: var(--muted);
  font-size: var(--home-copy-size, 12px);
  font-weight: 550;
  line-height: 1.4;
}

.workspace .dashboard-project-timeline-toggle {
  display: none;
  width: 100%;
  min-height: 42px;
  padding: 9px 14px;
  border: 0;
  border-top: 1px solid var(--line-soft);
  border-radius: 0;
  background: #fff;
  color: #66676c;
  font-size: 12px;
  font-weight: 700;
}

.workspace .dashboard-project-timeline-toggle:hover {
  background: #f8f8f9;
  color: var(--text);
}

.dashboard-announcement-card {
  display: flex;
  flex-direction: column;
}

.dashboard-announcement-card .dashboard-list.compact {
  height: clamp(320px, calc(295px + 1.6vw), 340px);
  min-height: 0;
  overflow-y: auto;
  scroll-snap-type: y proximity;
  scrollbar-width: thin;
}

.workspace .dashboard-announcement-item {
  height: clamp(64px, calc(59px + 0.32vw), 68px);
  min-height: clamp(64px, calc(59px + 0.32vw), 68px);
  cursor: pointer;
  scroll-snap-align: start;
  transition: background-color 160ms ease;
}

.workspace .dashboard-announcement-item:hover {
  background: #f7f7f8;
}

.workspace .dashboard-announcement-item:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid #78797e;
  outline-offset: -2px;
}

.dashboard-announcement-card .dashboard-empty.compact {
  min-height: 100%;
}

.workspace .dashboard-list-item,
.workspace .dashboard-vehicle-item {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  background: #fff;
  color: var(--text);
  text-align: left;
}

.workspace .dashboard-list-item {
  min-height: var(--home-list-row-height, 60px);
  padding-block: 11px;
}

.workspace .dashboard-list-item:last-child,
.workspace .dashboard-vehicle-item:last-child {
  border-bottom: 0;
}

.dashboard-attendance-body {
  display: grid;
  gap: 8px;
  padding: 16px;
}

.dashboard-attendance-times {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.workspace .dashboard-attendance-time-button {
  position: relative;
  display: grid;
  width: 100%;
  min-height: clamp(78px, calc(70px + 0.5vw), 84px);
  align-content: center;
  gap: 4px;
  padding: 13px 48px 13px 14px;
  color: var(--text);
  text-align: left;
  border-radius: 10px;
  border: 1px solid transparent;
  background: #f7f7f8;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.workspace .dashboard-attendance-time-button::after {
  position: absolute;
  top: 50%;
  right: 14px;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  content: "";
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  transform: translateY(-50%);
}

.workspace .dashboard-attendance-time-button.is-actionable {
  border-color: #4f73ad;
  background: #4f73ad;
  box-shadow: 0 8px 20px rgb(79 115 173 / 20%);
  color: #fff;
}

.workspace .dashboard-attendance-time-button.is-actionable::after {
  background: rgb(255 255 255 / 18%);
  color: #fff;
  content: "→";
}

.workspace .dashboard-attendance-time-button.is-actionable:hover:not(:disabled) {
  border-color: #42669f;
  background: #42669f;
  box-shadow: 0 10px 24px rgb(66 102 159 / 26%);
  transform: translateY(-1px);
}

.workspace .dashboard-attendance-time-button:focus-visible {
  outline: 2px solid #4f73ad;
  outline-offset: 2px;
}

.workspace .dashboard-attendance-time-button:disabled {
  opacity: 1;
  cursor: default;
}

.workspace .dashboard-attendance-time-button.is-recorded {
  border-color: #d7ecdf;
  background: #eff8f2;
  color: #2f7250;
}

.workspace .dashboard-attendance-time-button.is-recorded::after {
  background: #dcefe3;
  color: #2f7250;
  content: "✓";
}

.workspace .dashboard-attendance-time-button.is-locked {
  border-color: #eeeeef;
  background: #f7f7f8;
  color: #8a8b90;
}

.workspace .dashboard-attendance-time-button.is-locked::after {
  background: #ececee;
  color: #9a9ba0;
  content: "–";
}

.dashboard-attendance-time-button span {
  color: inherit;
  font-size: var(--home-list-title-size, 14px);
  font-weight: 800;
  line-height: 1.4;
}

.dashboard-attendance-time-button strong {
  color: inherit;
  font-size: var(--home-copy-size, 12px);
  font-weight: 650;
  line-height: 1.4;
  opacity: 0.9;
}

.dashboard-attendance-time-button.is-recorded strong {
  font-size: clamp(20px, calc(17px + 0.25vw), 22px);
  font-weight: 800;
  line-height: 1.15;
  opacity: 1;
}

.dashboard-attendance-body > .form-message {
  min-height: 0;
  font-size: var(--home-copy-size, 12px);
}

.dashboard-attendance-body > .form-message:empty {
  display: none;
}

.workspace .dashboard-list-item:hover,
.workspace .dashboard-vehicle-item:hover {
  background: #f8f8f9;
  color: var(--text);
}

.dashboard-task-row {
  display: grid;
  min-width: 0;
  min-height: 50px;
  grid-template-columns: 42px minmax(0, 1fr);
  border-bottom: 1px solid var(--line-soft);
  background: #fff;
}

.dashboard-task-row:last-child {
  border-bottom: 0;
}

.dashboard-task-row:hover {
  background: #f8f8f9;
}

.workspace .dashboard-task-check,
.dashboard-task-check.completed {
  display: grid;
  width: 18px;
  height: 18px;
  min-height: 18px;
  align-self: center;
  justify-self: center;
  place-items: center;
  padding: 0;
  border: 1px solid #b8b9bd;
  border-radius: 50%;
  background: #fff;
  color: #4e7e59;
  font-size: 11px;
  line-height: 1;
}

.workspace .dashboard-task-check:hover {
  border-color: #7aa685;
  background: var(--green-bg);
}

.dashboard-task-check.completed {
  border-color: #9ac5a4;
  background: var(--green-bg);
}

.workspace .dashboard-task-content {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 50px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px 8px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.workspace .dashboard-task-content:hover {
  background: transparent;
  color: var(--text);
}

.dashboard-task-row.completed .dashboard-list-copy strong {
  color: var(--muted);
  text-decoration: line-through;
}

.dashboard-list-item.compact {
  min-height: var(--home-list-row-height, 60px);
  padding-block: 10px;
}

.dashboard-list-copy,
.dashboard-vehicle-item > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.dashboard-list-copy {
  gap: 4px;
}

.dashboard-list-title-line {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.dashboard-list-title-line strong {
  min-width: 0;
}

.dashboard-list-prefix {
  flex: 0 0 auto;
  color: #74757a;
  font-size: var(--home-copy-size, 12px);
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.dashboard-announcement-pin {
  display: inline-flex;
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: #74757a;
}

.dashboard-announcement-pin svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.dashboard-list-copy strong,
.dashboard-vehicle-item strong {
  overflow: hidden;
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-list-copy strong {
  font-size: var(--home-list-title-size, 14px);
  line-height: 1.4;
}

.dashboard-list-copy small,
.dashboard-vehicle-item small {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 550;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-list-copy small {
  font-size: var(--home-copy-size, 12px);
  line-height: 1.45;
}

.dashboard-announcement-item .dashboard-list-copy small {
  max-width: 100%;
}

.announcement-detail-modal {
  display: flex;
  width: min(640px, calc(100vw - 32px));
  max-height: min(720px, calc(100vh - 48px));
  flex-direction: column;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 24px 70px rgb(20 20 18 / 24%);
}

.announcement-detail-modal .ledger-modal-header {
  flex: 0 0 auto;
  align-items: flex-start;
  padding: 24px 24px 14px;
  border-bottom: 0;
}

.announcement-detail-modal .ledger-modal-header h3 {
  margin-top: 5px;
  font-size: clamp(21px, calc(19px + 0.3vw), 24px);
  line-height: 1.35;
}

.announcement-detail-modal .icon-button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #68696d;
}

.announcement-detail-modal .icon-button:hover {
  background: #f1f1f3;
}

.announcement-detail-eyebrow {
  color: #77787d;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.announcement-detail-body {
  min-height: 0;
  padding: 0 24px 28px;
  overflow-y: auto;
}

.announcement-detail-meta {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.announcement-detail-content {
  margin: 0;
  color: #292a2d;
  font-size: 15px;
  font-weight: 450;
  line-height: 1.8;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.dashboard-task-detail-modal {
  display: flex;
  width: min(590px, calc(100vw - 32px));
  max-height: min(720px, calc(100vh - 48px));
  flex-direction: column;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 24px 70px rgb(20 20 18 / 24%);
}

.dashboard-task-detail-modal .ledger-modal-header {
  flex: 0 0 auto;
  align-items: flex-start;
  padding: 24px 24px 18px;
  border-bottom: 0;
}

.dashboard-task-detail-modal .ledger-modal-header h3 {
  margin: 0;
  font-size: clamp(21px, calc(19px + 0.3vw), 24px);
  line-height: 1.3;
}

.dashboard-task-detail-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.dashboard-task-detail-heading > div {
  min-width: 0;
}

.dashboard-task-detail-heading-icon {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 12px;
  background: #edf4ff;
  color: #4d7fc4;
}

.dashboard-task-detail-heading-icon svg {
  width: 22px;
  height: 22px;
}

.dashboard-task-detail-project {
  margin: 4px 0 0;
  overflow: hidden;
  color: #777a80;
  font-size: 12px;
  font-weight: 550;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-task-detail-modal .icon-button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #68696d;
}

.dashboard-task-detail-modal .icon-button:hover {
  background: #f1f1f3;
}

.dashboard-task-detail-body {
  display: grid;
  min-height: 0;
  gap: 14px;
  padding: 0 24px 22px;
  overflow-y: auto;
}

.dashboard-task-detail-content {
  margin: 0;
  padding: 12px 14px;
  border-radius: 11px;
  background: #f7f8fa;
  color: #4c4e53;
  font-size: 13px;
  font-weight: 450;
  line-height: 1.7;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.dashboard-task-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.dashboard-task-detail-grid > div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 11px;
  background: #f7f8fa;
}

.dashboard-task-detail-grid > div > div {
  min-width: 0;
}

.dashboard-task-detail-meta-icon {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 9px;
  background: #fff;
  color: #6f87ac;
  box-shadow: 0 1px 3px rgb(42 56 78 / 7%);
}

.dashboard-task-detail-meta-icon svg {
  width: 16px;
  height: 16px;
}

.dashboard-task-detail-grid dt {
  color: #7a7b80;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.3;
}

.dashboard-task-detail-grid dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: #303238;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
}

.dashboard-task-detail-creator {
  margin: 0;
  color: #898b90;
  font-size: 11px;
  line-height: 1.5;
}

.dashboard-task-detail-creator strong {
  color: #64666b;
  font-weight: 650;
}

.dashboard-task-detail-actions {
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-end;
  padding: 0 24px 22px;
  border-top: 0;
}

.workspace .dashboard-task-detail-actions button,
.dashboard-task-detail-actions button {
  width: auto;
  min-height: 38px;
  padding: 7px 14px;
  border: 0;
  border-radius: 10px;
  background: #3c3d40;
  color: #fff;
  font-size: 12px;
  font-weight: 650;
}

.dashboard-task-detail-actions button span {
  margin-left: 5px;
  font-size: 15px;
  line-height: 1;
}

.announcement-management-modal {
  display: flex;
  width: min(800px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 48px));
  flex-direction: column;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 24px 70px rgb(20 20 18 / 24%);
}

.announcement-management-modal .ledger-modal-header {
  flex: 0 0 auto;
  padding: 24px 24px 16px;
  border-bottom: 0;
}

.announcement-management-modal .ledger-modal-header p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

#announcementForm label small {
  margin-top: 1px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
}

.announcement-management-body {
  display: grid;
  gap: 14px;
  min-height: 0;
  padding: 8px 24px 24px;
  overflow-y: auto;
}

.announcement-management-body[hidden],
.announcement-editor-view[hidden] {
  display: none;
}

.announcement-management-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.announcement-management-toolbar .primary-button {
  min-height: 40px;
  padding-inline: 16px;
  border-radius: 9px;
}

.announcement-management-toolbar .form-message {
  margin-right: auto;
}

.announcement-management-list {
  display: grid;
  gap: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #f8f8f9;
}

.announcement-management-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border: 0;
  border-bottom: 1px solid #e7e7e9;
  border-radius: 0;
  background: transparent;
}

.announcement-management-item:last-child {
  border-bottom: 0;
}

.announcement-management-item.is-archived {
  background: #f2f2f3;
  opacity: 0.68;
}

.announcement-management-copy {
  min-width: 0;
}

.announcement-management-title-row,
.announcement-management-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.announcement-management-title-row strong {
  font-size: 14px;
}

.announcement-management-copy p {
  display: -webkit-box;
  margin: 6px 0;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.announcement-management-copy small {
  color: var(--muted);
  font-size: 11px;
}

.announcement-management-actions {
  flex: 0 0 auto;
}

.announcement-management-actions .secondary-button {
  width: auto;
  min-height: 32px;
  padding-inline: 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #55565b;
}

.announcement-management-actions .secondary-button:hover {
  background: #e9e9ec;
}

.announcement-management-actions [data-archive-announcement] {
  color: var(--red-text);
}

.announcement-management-actions [data-archive-announcement]:hover {
  background: var(--red-bg);
}

.announcement-editor-view {
  min-height: 0;
  overflow-y: auto;
}

.announcement-editor-view .form-body {
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  padding: 8px 24px 24px;
}

.announcement-editor-view .form-body label {
  gap: 8px;
  color: #63646a;
  font-size: 13px;
}

.announcement-editor-view .form-body input,
.announcement-editor-view .form-body textarea {
  border-color: #dedfe3;
  border-radius: 10px;
  background: #f8f8f9;
}

.announcement-editor-view .form-body input {
  min-height: 44px;
}

.announcement-editor-view .form-body textarea {
  min-height: 156px;
  padding: 11px 12px;
  line-height: 1.55;
}

.announcement-duration-field {
  width: min(360px, 100%);
}

.announcement-editor-view .checkbox-option {
  width: fit-content;
  min-height: 36px;
}

.announcement-editor-view .form-actions {
  justify-content: flex-end;
  padding-top: 2px;
}

.announcement-editor-view .form-actions .form-message {
  margin-right: auto;
}

.announcement-editor-view .form-actions .secondary-button {
  min-height: 40px;
  padding-inline: 12px;
  border: 0;
  background: transparent;
  color: #66676c;
}

.announcement-editor-view .form-actions .secondary-button:hover {
  background: #f1f1f3;
}

.announcement-editor-view .form-actions .primary-button {
  min-height: 42px;
  padding-inline: 18px;
  border-radius: 9px;
}

@media (max-width: 560px) {
  .announcement-detail-modal {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    border-radius: 14px;
  }

  .announcement-detail-modal .ledger-modal-header {
    padding: 20px 18px 12px;
  }

  .announcement-detail-body {
    padding: 0 18px 22px;
  }

  .announcement-detail-content {
    font-size: 15px;
    line-height: 1.75;
  }

  .dashboard-task-detail-modal {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    border-radius: 14px;
  }

  .dashboard-task-detail-modal .ledger-modal-header {
    padding: 20px 18px 16px;
  }

  .dashboard-task-detail-body {
    gap: 16px;
    padding: 0 18px 18px;
  }

  .dashboard-task-detail-grid {
    gap: 8px;
  }

  .dashboard-task-detail-grid > div {
    gap: 7px;
    padding: 10px 8px;
  }

  .dashboard-task-detail-meta-icon {
    width: 24px;
    height: 24px;
    border-radius: 7px;
  }

  .dashboard-task-detail-meta-icon svg {
    width: 14px;
    height: 14px;
  }

  .dashboard-task-detail-grid dd {
    font-size: 11.5px;
  }

  .dashboard-task-detail-actions {
    padding: 0 18px 18px;
  }

  .dashboard-task-detail-actions button {
    width: 100%;
  }

  .announcement-management-modal {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    border-radius: 14px;
  }

  .announcement-management-modal .ledger-modal-header {
    padding: 18px 18px 14px;
  }

  .announcement-management-body {
    padding: 6px 16px 18px;
  }

  .announcement-management-item {
    display: grid;
    gap: 10px;
  }

  .announcement-management-actions {
    justify-content: flex-end;
  }

  .announcement-editor-view .form-body {
    padding: 6px 16px 18px;
  }

  .announcement-editor-view .form-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .announcement-editor-view .form-actions .form-message {
    grid-column: 1 / -1;
  }
}

.dashboard-item-meta,
.dashboard-vehicle-item em {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  background: #f0f0f2;
  color: #68696d;
  font-size: 10px;
  font-style: normal;
  font-weight: 750;
  white-space: nowrap;
}

.home-dashboard .dashboard-item-meta {
  padding: 4px 8px;
  font-size: var(--home-meta-size);
}

.dashboard-item-meta.overdue,
.dashboard-vehicle-item em.overdue {
  background: var(--red-bg);
  color: var(--red-text);
}

.dashboard-vehicle-item em.busy {
  background: var(--amber-bg);
  color: var(--amber-text);
}

.dashboard-vehicle-item em.available {
  background: var(--green-bg);
  color: var(--green-text);
}

.dashboard-empty {
  display: grid;
  min-height: 176px;
  place-content: center;
  gap: 4px;
  padding: 20px;
  color: var(--muted);
  text-align: center;
}

.dashboard-empty.compact,
.dashboard-list.compact .dashboard-empty {
  min-height: 104px;
}

.dashboard-empty strong {
  color: #5f6064;
  font-size: var(--home-list-title-size, 12px);
}

.dashboard-empty span {
  font-size: var(--home-copy-size, 12px);
  line-height: 1.5;
}

.dashboard-vehicle-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: var(--home-vehicle-card-height);
  gap: 8px;
  padding: 12px 14px 14px;
}

.workspace .dashboard-vehicle-item {
  position: relative;
  display: grid;
  height: var(--home-vehicle-card-height);
  min-height: var(--home-vehicle-card-height);
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  justify-items: center;
  gap: 8px;
  padding: 12px;
  overflow: hidden;
  border-radius: 10px;
  background: #e8f5ed;
  color: #235f45;
}

.workspace .dashboard-vehicle-item:hover:not(:disabled) {
  background: #ddefe4;
}

.workspace .dashboard-vehicle-item:disabled {
  cursor: not-allowed;
  opacity: 0.68;
}

.dashboard-vehicle-icon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 0;
  background: transparent;
  color: #2c805c;
}

.dashboard-vehicle-icon svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.dashboard-vehicle-copy {
  display: grid;
  justify-items: center;
  gap: 2px;
  text-align: center;
}

.home-dashboard .dashboard-vehicle-item strong {
  font-size: var(--home-list-title-size);
  font-weight: 750;
  line-height: 1.4;
}

.home-dashboard .dashboard-vehicle-item small {
  font-size: var(--home-copy-size);
  line-height: 1.45;
}

.dashboard-vehicle-item em {
  justify-self: center;
}

.home-dashboard .dashboard-vehicle-item em {
  padding: 0;
  background: transparent;
  font-size: var(--home-meta-size);
  font-style: normal;
  font-weight: 750;
}

.dashboard-vehicle-item:not(.is-active) .dashboard-vehicle-copy small,
.dashboard-vehicle-item:not(.is-active) em.available {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.workspace .dashboard-vehicle-item.is-active {
  grid-template-rows: auto auto auto auto;
  gap: 4px;
  background: #4c4d52;
  color: #fff;
}

.workspace .dashboard-vehicle-item.is-active::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: rgb(42 43 47 / 84%);
  content: "";
}

.workspace .dashboard-vehicle-item.is-overdue::before {
  background: rgb(164 45 57 / 88%);
}

.workspace .dashboard-vehicle-item.is-active > * {
  position: relative;
  z-index: 1;
}

.workspace .dashboard-vehicle-item.is-active .dashboard-vehicle-icon {
  width: 42px;
  height: 42px;
  color: #fff;
}

.workspace .dashboard-vehicle-item.is-active .dashboard-vehicle-icon svg {
  width: 27px;
  height: 27px;
}

.workspace .dashboard-vehicle-item.is-active .dashboard-vehicle-copy {
  color: #fff;
}

.workspace .dashboard-vehicle-item.is-active .dashboard-vehicle-copy small {
  color: rgb(255 255 255 / 88%);
}

.workspace .dashboard-vehicle-item.is-active em {
  grid-row: 1;
  color: #fff;
}

.workspace .dashboard-vehicle-return {
  width: auto;
  min-height: 30px;
  justify-self: center;
  padding: 4px 9px;
  border: 0;
  border-radius: 6px;
  background: rgb(255 255 255 / 18%);
  color: #fff;
  font-size: var(--home-meta-size, 12px);
  font-weight: 700;
}

.dashboard-attendance-card .dashboard-text-button,
.dashboard-vehicle-card .dashboard-text-button {
  min-height: 32px;
  padding: 6px 10px;
  font-size: var(--home-meta-size, 12px);
}

.workspace .dashboard-vehicle-return:hover {
  background: rgb(255 255 255 / 28%);
  color: #fff;
}

.dashboard-vehicle-item.is-active .dashboard-vehicle-icon {
  background: transparent;
}

.dashboard-vehicle-item.is-overdue .dashboard-vehicle-icon {
  background: transparent;
  color: #fff;
}

@media (max-width: 1180px) {
  .home-dashboard-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-dashboard-primary {
    grid-template-rows: none;
  }

  .home-dashboard-secondary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-vehicle-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .home-dashboard {
    gap: 16px;
  }

  .home-dashboard-hero h1 {
    font-size: 26px;
  }

  .home-dashboard-secondary {
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-vehicle-card {
    grid-column: auto;
  }

  .dashboard-announcement-card .dashboard-list.compact {
    height: 256px;
  }

  .home-dashboard-primary .dashboard-project-timeline {
    height: auto;
    max-height: none;
    flex: 0 0 auto;
    overflow: visible;
  }

  .dashboard-project-timeline-items:not(.is-expanded) .dashboard-project-timeline-item:nth-child(n + 7) {
    display: none;
  }

  .dashboard-project-timeline-items:not(.is-expanded) .dashboard-project-timeline-item:nth-child(6) .dashboard-project-timeline-marker::before {
    bottom: calc(100% - 12px);
  }

  .workspace .dashboard-project-timeline-toggle {
    display: block;
  }

  .dashboard-card-header {
    align-items: flex-start;
    padding: 13px 14px;
  }

  .home-dashboard .dashboard-card-header {
    padding-block: 10px;
  }

  .workspace .dashboard-list-item,
  .workspace .dashboard-vehicle-item {
    padding-inline: 14px;
  }

  .workspace .dashboard-project-timeline-item {
    grid-template-columns: 48px 16px minmax(0, 1fr);
    gap: 8px;
    padding-inline: 14px;
  }

  .dashboard-vehicle-list {
    gap: 8px;
    padding: 12px;
  }

  .workspace .dashboard-vehicle-item {
    padding: 12px;
  }

  .workspace .dashboard-inline-action {
    padding-inline: 14px;
  }

  .dashboard-task-composer {
    gap: 10px;
    margin: 8px 10px 12px;
    padding: 13px 12px 11px;
  }

  .dashboard-reminder-options {
    gap: 6px;
  }

  .dashboard-task-composer .dashboard-reminder-project {
    max-width: 100%;
  }

  .dashboard-task-composer .dashboard-reminder-project select {
    max-width: 170px;
  }
}

@media (max-width: 420px) {
  .dashboard-card-header {
    flex-wrap: wrap;
  }

  .dashboard-vehicle-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .workspace .dashboard-text-button {
    margin-left: 44px;
  }

  .dashboard-reminder-options {
    padding-left: 0;
  }

  .dashboard-reminder-message {
    margin-left: 0;
  }

}

.project-create-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 12px;
  padding: 16px;
}

.project-create-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.project-create-actions .form-message {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}

.project-overview-table,
.project-financial-overview > .table-wrap {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.project-panel > .project-overview-table {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.page-header,
.project-list-page-header {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 0 18px;
}

.page-header h2,
.project-list-page-header h2 {
  margin: 0;
  color: var(--text);
  font-size: 22px;
  line-height: 1.3;
}

.workspace .project-list-primary-action {
  width: auto;
  min-height: 36px;
  flex: 0 0 auto;
  padding: 7px 13px;
  border: 0;
  border-radius: 7px;
  background: #3f70cf;
  color: #fff;
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

.workspace .project-list-primary-action:hover {
  background: #315fb5;
}

.page-toolbar,
.project-overview-toolbar {
  display: grid;
  min-width: 0;
  gap: 10px;
  margin: 0 0 18px;
}

.project-overview-search {
  position: relative;
  display: block;
  min-width: 220px;
  width: 100%;
}

.project-overview-search::before {
  position: absolute;
  top: 50%;
  left: 13px;
  width: 12px;
  height: 12px;
  border: 1.8px solid #77787d;
  border-radius: 50%;
  content: "";
  pointer-events: none;
  transform: translateY(-58%);
}

.project-overview-search::after {
  position: absolute;
  top: calc(50% + 4px);
  left: 24px;
  width: 6px;
  height: 1.8px;
  border-radius: 2px;
  background: #77787d;
  content: "";
  pointer-events: none;
  transform: rotate(45deg);
}

.project-overview-search input {
  width: 100%;
  min-height: 38px;
  padding: 8px 13px 8px 35px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font-size: 13px;
}

.project-global-filter-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.project-overview-global-filter {
  min-width: 156px;
}

.project-global-filter-combobox {
  position: relative;
}

.project-global-filter-combobox input {
  width: 100%;
  min-height: 34px;
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.project-global-filter-combobox input::placeholder {
  color: #8b8c91;
  opacity: 1;
}

.project-global-filter-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 5px);
  right: 0;
  left: 0;
  max-height: 238px;
  padding: 5px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 30px rgb(32 31 28 / 14%);
}

.project-global-filter-menu button {
  display: block;
  width: 100%;
  min-height: 34px;
  padding: 7px 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
  text-align: left;
}

.project-global-filter-menu button:hover,
.project-global-filter-menu button.selected {
  background: #f2f3f5;
}

.project-global-filter-empty {
  margin: 0;
  padding: 8px;
  color: var(--muted);
  font-size: 12px;
}

.project-finance-global-filter-row {
  position: relative;
  align-items: center;
  margin: -2px 0 14px;
}

#projectFinancePanel .project-overview-global-filter {
  min-width: 0;
  max-width: 100%;
}

#projectFinancePanel .project-finance-filter {
  position: relative;
  min-width: 0;
}

#projectFinancePanel .project-finance-filter summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  max-width: 210px;
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  list-style: none;
  cursor: pointer;
}

#projectFinancePanel .project-finance-filter summary::-webkit-details-marker {
  display: none;
}

#projectFinancePanel .project-finance-filter summary > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#projectFinancePanel .project-finance-filter summary:hover,
#projectFinancePanel .project-finance-filter[open] summary {
  background: #f1f2f4;
  color: var(--text);
}

#projectFinancePanel .project-finance-filter.is-filtered summary {
  background: #edf2fb;
  color: #315fb5;
}

#projectFinancePanel .project-finance-filter-panel {
  position: absolute;
  z-index: 35;
  top: calc(100% + 6px);
  left: 0;
  width: 270px;
  max-width: calc(100vw - 48px);
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 30px rgb(32 31 28 / 12%);
}

#projectFinancePanel .project-finance-filter-panel input[type="search"] {
  width: 100%;
  min-height: 36px;
  font-size: 13px;
}

#projectFinancePanel .project-finance-filter-hint {
  margin: 8px 4px;
  color: var(--muted);
  font-size: 12px;
}

#projectFinancePanel .project-finance-filter-options {
  display: grid;
  gap: 2px;
  max-height: 240px;
  overflow-y: auto;
  margin-top: 8px;
}

#projectFinancePanel .project-finance-filter-options button {
  width: 100%;
  height: auto;
  min-height: 38px;
  padding: 8px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}

#projectFinancePanel .project-finance-filter-options button:hover,
#projectFinancePanel .project-finance-filter-options button[aria-pressed="true"] {
  background: #edf2fb;
  color: #315fb5;
}

#projectFinancePanel .project-finance-active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: -4px 0 14px;
}

#projectFinancePanel .project-finance-filter-chip,
#projectFinancePanel .project-finance-clear-filters {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: auto;
  height: auto;
  min-height: 32px;
  max-width: 100%;
  padding: 5px 9px;
  border: 0;
  border-radius: 6px;
  background: #edf2fb;
  color: #315fb5;
  font-size: 12px;
  text-align: left;
}

#projectFinancePanel .project-finance-filter-chip span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

#projectFinancePanel .project-finance-clear-filters {
  background: transparent;
  color: var(--muted);
}

#projectFinancePanel .project-finance-filter-chip:hover,
#projectFinancePanel .project-finance-clear-filters:hover {
  background: #e2e8f3;
  color: #274e97;
}

#projectFinancePanel .project-finance-projects summary:focus-visible,
#projectFinancePanel .project-finance-projects button:focus-visible {
  outline: 2px solid #3f70cf;
  outline-offset: 2px;
}

@media (max-width: 760px) {
  #projectFinancePanel .project-finance-filter {
    position: static;
  }

  #projectFinancePanel .project-finance-filter-panel {
    width: min(320px, 100%);
    max-width: 100%;
  }

  #projectFinancePanel .project-finance-filter summary,
  #projectFinancePanel .project-finance-filter-options button,
  #projectFinancePanel .project-finance-filter-chip,
  #projectFinancePanel .project-finance-clear-filters {
    min-height: 44px;
  }
}

.project-panel .project-overview-table thead th {
  height: 40px;
  border-bottom-color: var(--line);
  background: transparent;
}

.workspace .project-panel .column-sort-button {
  width: 20px;
  height: 20px;
  min-height: 20px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #a0a1a5;
  font-size: 13px;
}

.workspace .project-panel .column-sort-button:hover,
.workspace .project-panel .column-sort-button.active {
  background: transparent;
  color: #66676c;
}

.project-panel .project-overview-table tbody tr:first-child td {
  border-top: 0;
}

.project-finance-panel {
  margin-inline: -12px;
}

.project-finance-panel .project-financial-overview {
  margin: 0;
  padding: 0;
  border: 0;
}

.project-finance-dashboard {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr);
  align-items: stretch;
  gap: 14px;
  margin-bottom: 28px;
}

.project-finance-analytics {
  min-width: 0;
  height: 100%;
  padding: 0;
}

.project-finance-analytics-content {
  display: grid;
  min-width: 0;
  height: 100%;
  grid-template-columns: minmax(0, 2fr) minmax(210px, 1fr);
  align-items: stretch;
  gap: 18px;
}

.project-finance-volume {
  position: relative;
  display: grid;
  min-width: 0;
  height: 100%;
  grid-template-rows: auto minmax(0, 1fr);
  padding-top: 8px;
}

.project-finance-volume .project-volume-svg {
  height: 100%;
  min-height: 230px;
  max-height: none;
}

.project-finance-volume-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px 4px;
}

.project-finance-volume-heading strong {
  font-size: 12px;
}

.project-finance-volume-heading span {
  color: var(--muted);
  font-size: 10px;
}

.project-finance-volume-bar {
  fill: #7892b8;
  stroke: #607da8;
}

.project-finance-volume-hit {
  fill: transparent;
  stroke: transparent;
  pointer-events: all;
}

.project-finance-volume .project-volume-month {
  cursor: pointer;
}

.project-finance-volume .project-volume-month:focus-visible .project-finance-volume-hit {
  stroke: #3f70cf;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.project-finance-volume .is-active .project-finance-volume-bar {
  fill: #607da8;
}

.project-finance-volume-tooltip {
  position: absolute;
  z-index: 20;
  width: max-content;
  max-width: calc(100% - 16px);
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 6px 20px rgb(32 31 28 / 14%);
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.5;
}

.project-finance-metrics {
  display: grid;
  min-width: 0;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  border-left: 1px solid var(--line-soft);
  padding-left: 18px;
}

.project-finance-metric {
  display: grid;
  min-width: 0;
  align-content: center;
  gap: 5px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--line-soft);
}

.project-finance-metric:last-child {
  border-bottom: 0;
}

.project-finance-metric span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.project-finance-metric strong {
  color: var(--text);
  font-size: clamp(17px, 1.55vw, 23px);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  white-space: nowrap;
}

.project-finance-metric-value,
.project-finance-virtual-amount {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 7px;
}

.project-finance-metric-value strong,
.project-finance-virtual-amount strong {
  flex: 0 0 auto;
}

.project-finance-trend {
  min-width: 0;
  overflow: hidden;
  flex: 1 1 auto;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-finance-trend.up {
  color: #25834d;
}

.project-finance-trend.down {
  color: #c94949;
}

.project-finance-trend.flat,
.project-finance-trend.neutral {
  color: var(--muted);
}

.project-finance-metric > .project-finance-trend {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 5px;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  line-height: 1.5;
}

.project-finance-metric .project-finance-trend-label {
  color: var(--muted);
  font-weight: 500;
}

.project-finance-metric .project-finance-trend-change {
  min-width: 0;
  color: inherit;
  font-weight: inherit;
  overflow-wrap: anywhere;
}

.project-finance-virtual-cards {
  display: grid;
  min-width: 0;
  height: 100%;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.workspace .project-finance-virtual-card {
  display: grid;
  width: 100%;
  height: auto;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  align-content: center;
  gap: 5px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  text-align: left;
}

.workspace .project-finance-virtual-card:hover {
  border-color: #b7b8bd;
  background: #f8f8f9;
}

.project-finance-virtual-card span {
  overflow-wrap: anywhere;
  color: #55565b;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

.project-finance-virtual-card strong {
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}

.project-finance-virtual-card small {
  color: var(--muted);
  font-size: 10px;
}

.project-finance-panel .project-finance-table {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.project-finance-panel .project-finance-table thead th {
  height: 40px;
  border-bottom-color: var(--line);
  background: transparent;
}

.project-finance-panel .project-finance-table tbody tr:first-child td {
  border-top: 0;
}

@media (max-width: 1180px) {
  .project-finance-dashboard {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-finance-virtual-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: none;
  }
}

@media (max-width: 760px) {
  .project-finance-analytics {
    padding: 0;
  }

  .project-finance-analytics-content {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .project-finance-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    gap: 0 14px;
    padding: 10px 0 0;
    border-top: 1px solid var(--line-soft);
    border-left: 0;
  }

  .project-finance-metric:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .project-finance-metric {
    align-content: start;
  }

  .project-finance-virtual-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .workspace .project-finance-virtual-card {
    min-height: 104px;
  }

  .project-finance-volume-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .project-finance-volume .project-volume-month .project-volume-axis-label {
    font-size: 20px;
  }
}

.internal-cost-ledger-view {
  display: grid;
  min-width: 0;
  gap: 24px;
}

#internalCostLedgerView .internal-cost-ledger-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-top: 4px;
}

#internalCostLedgerView .internal-cost-ledger-header > div {
  min-width: 0;
}

#internalCostLedgerView h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

#internalCostLedgerView .internal-cost-ledger-header p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

#internalCostLedgerTableSection {
  min-width: 0;
}

#internalCostLedgerView .internal-cost-ledger-table table {
  min-width: 720px;
  table-layout: auto;
}

#internalCostLedgerView th:nth-child(1) { width: 15%; }
#internalCostLedgerView th:nth-child(2) { width: 35%; }
#internalCostLedgerView th:nth-child(3) { width: 14%; }
#internalCostLedgerView th:nth-child(4) { width: 16%; }
#internalCostLedgerView th:nth-child(5) { width: 20%; }

#internalCostLedgerView th,
#internalCostLedgerView td {
  padding: 14px 16px;
  vertical-align: top;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

#internalCostLedgerView td:first-child {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#internalCostLedgerView .internal-cost-ledger-amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#internalCostLedgerView .internal-cost-ledger-status {
  display: inline-block;
  max-width: 100%;
  padding: 4px 9px;
  border-radius: 6px;
  background: #f1f2f4;
  color: #55565b;
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

#internalCostLedgerView .internal-cost-ledger-scroll-hint {
  display: none;
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 12px;
}

#internalCostLedgerView .internal-cost-ledger-empty {
  display: grid;
  min-height: 280px;
  justify-items: center;
  align-content: center;
  gap: 12px;
  padding: 40px 24px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: #fafafb;
  text-align: center;
}

#internalCostLedgerView .internal-cost-ledger-empty-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 12px;
  background: #eef0f3;
  color: #858891;
}

#internalCostLedgerView .internal-cost-ledger-empty-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#internalCostLedgerView .internal-cost-ledger-empty h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
}

#internalCostLedgerView .internal-cost-ledger-empty p {
  max-width: 300px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

#internalCostLedgerView .project-finance-ledger-back:focus-visible,
#internalCostLedgerView .internal-cost-ledger-table:focus-visible {
  outline: 2px solid #3f70cf;
  outline-offset: 2px;
}

@media (max-width: 760px) {
  #internalCostLedgerView .project-finance-ledger-back {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  #internalCostLedgerView .internal-cost-ledger-scroll-hint {
    display: block;
  }
}

.quotation-select-stage {
  max-width: none;
}

.quotation-selection-heading {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}

.quotation-select-stage select {
  width: min(560px, 100%);
}





@media (max-width: 1180px) {
  .project-create-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .project-create-section .form-body {
    gap: 14px;
  }

  .project-create-fields {
    grid-template-columns: minmax(0, 1fr);
    padding: 14px;
  }

  .project-create-actions {
    align-items: stretch;
  }

  .project-dashboard-timeline {
    padding-top: 16px;
    padding-left: 0;
    border-top: 1px solid var(--line-soft);
    border-left: 0;
  }
}

/* Keep the application chrome fixed while the white workspace scrolls. */
.app-shell {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

.module-sidebar {
  height: calc(100vh - 48px);
  height: calc(100dvh - 48px);
}

.workspace {
  height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
}

@media (min-width: 761px) {
  .app-rail {
    height: 100vh;
    height: 100dvh;
  }
}

@media (max-width: 760px) {
  .app-shell.navigation-drawer-open .app-rail {
    height: 100vh;
    height: 100dvh;
  }
}

/* Project detail — Overview-first workspace */
.project-detail-panel .detail-body {
  gap: 0;
  padding: 0;
}

.project-detail-panel .project-workspace {
  gap: 0;
}

.project-context-header {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0 16px;
}

.project-context-heading {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 12px;
}

.project-context-heading > div {
  min-width: 0;
}

.project-context-title-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.project-context-edit-button {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-color: transparent;
  color: var(--muted);
  font-size: 15px;
}

.project-context-edit-button:hover {
  border-color: var(--line);
  background: #f7f9fc;
  color: var(--primary);
}

.project-context-heading h2,
.project-context-heading p {
  margin: 0;
}

.project-context-heading h2 {
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 22px;
  line-height: 1.25;
}

.project-context-heading p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.project-context-statuses {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 3px;
}

.project-context-tabs.project-subtabs {
  flex-wrap: nowrap;
  gap: 26px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}

.project-context-tabs.project-subtabs::-webkit-scrollbar {
  display: none;
}

.workspace .project-context-tabs .subtab-button {
  width: auto;
  min-height: 42px;
  flex: 0 0 auto;
  padding: 0 1px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.workspace .project-context-tabs .subtab-button:hover {
  background: transparent;
  color: var(--text);
}

.workspace .project-context-tabs .subtab-button.active {
  border-bottom-color: var(--text);
  background: transparent;
  color: var(--text);
}

.project-tab-workspace {
  gap: 0;
}

.project-tab-workspace > .workspace-panel:not(.project-overview-layout),
.project-tab-workspace > .cost-workspace {
  margin-top: 20px;
}

.project-tab-workspace > .project-closeout-checklist + .acceptance-session-list-workspace,
.project-tab-workspace > .project-closeout-checklist + .acceptance-workspace {
  margin-top: 0;
}

.acceptance-session-list-checklist {
  padding: 8px 24px 0;
}

.acceptance-session-list-checklist .project-closeout-checklist {
  margin-top: 0;
}

.project-tab-workspace > .acceptance-session-list-checklist + .acceptance-session-list-workspace,
.project-tab-workspace > .acceptance-session-list-checklist + .acceptance-workspace {
  margin-top: 0;
}

.project-tab-workspace > .project-closeout-checklist + .acceptance-session-list-workspace {
  padding-top: 6px;
}

.project-overview-layout {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.85fr);
  align-items: stretch;
}

.project-overview-layout.editing {
  grid-template-columns: minmax(0, 1fr);
}

.project-overview-information {
  min-width: 0;
}

.project-overview-activity {
  min-width: 0;
  padding: 26px 0 32px 28px;
  border-left: 1px solid var(--line-soft);
}

.project-overview-layout.editing .project-overview-activity {
  margin-top: 8px;
  border-top: 1px solid var(--line-soft);
  border-left: 0;
}

.project-overview-information .project-info-panel {
  gap: 20px;
}

.project-info-edit-toolbar {
  display: flex;
  justify-content: flex-end;
  min-height: 32px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}

.workspace .project-overview-text-action {
  width: auto;
  min-height: 30px;
  padding: 4px 8px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.workspace .project-overview-text-action:hover {
  background: #f1f1f2;
  color: var(--text);
}

.workspace .project-overview-text-action.primary {
  padding-inline: 12px;
  border-radius: 6px;
  background: var(--text);
  color: #fff;
}

.project-overview-info-sections {
  display: grid;
  min-width: 0;
}

.project-overview-detail-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 0 48px;
}

.project-overview-detail-grid > .project-overview-info-section {
  padding: 26px 0 0;
  border-bottom: 0;
}

.project-overview-detail-grid > .project-overview-info-section:first-child {
  padding-top: 26px;
}

.project-overview-info-section {
  min-width: 0;
  padding: 20px 0;
  border-bottom: 1px solid var(--line-soft);
}

.project-overview-info-section:first-child {
  padding-top: 0;
}

.project-overview-info-section:last-child {
  border-bottom: 0;
}

.project-description-section {
  padding-top: 0;
}

.project-description-section.is-editing {
  padding-bottom: 22px;
}

.workspace .project-description-trigger {
  display: flex;
  width: calc(100% + 28px);
  height: auto;
  min-height: 168px;
  align-items: flex-start;
  justify-content: flex-start;
  margin-left: -14px;
  padding: 12px 14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  cursor: text;
  overflow: visible;
  text-align: left;
  vertical-align: top;
  white-space: pre-wrap;
  transition: background-color 120ms ease, box-shadow 120ms ease;
}

.workspace .project-description-trigger:hover {
  box-shadow: inset 0 0 0 1px #c7c9cc;
  background: #f4f4f4;
  color: var(--text);
}

.workspace .project-description-trigger:focus-visible {
  box-shadow: inset 0 0 0 2px #3f70cf;
  background: #fff;
  outline: 0;
}

.project-description-content,
.project-description-placeholder,
.project-description-help {
  margin: 0;
  white-space: pre-wrap;
}

.project-description-content {
  color: var(--text);
  font-size: 14px;
  line-height: 1.7;
}

.project-description-placeholder,
.project-description-help {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.project-description-section textarea {
  display: block;
  width: calc(100% + 28px);
  height: auto;
  min-height: 168px;
  margin-left: -14px;
  padding: 12px 14px;
  resize: none;
  border: 2px solid #3f70cf;
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  line-height: 1.7;
  outline: 0;
  overflow-y: hidden;
}

.project-description-section textarea:focus {
  border-color: #3f70cf;
  box-shadow: none;
}

.project-description-help {
  margin-top: 8px;
}

.project-overview-info-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
}

.project-overview-info-heading h4,
.project-overview-info-heading span {
  margin: 0;
}

.project-overview-info-heading h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 16px;
  font-weight: 750;
  line-height: 1.4;
}

.project-overview-info-heading h4::before,
.project-quotation-inquiry-heading h3::before,
.project-vendor-inquiry-detail h4::before {
  display: inline-block;
  width: 4px;
  height: 18px;
  flex: 0 0 4px;
  border-radius: 999px;
  background: #3f70cf;
  content: "";
}

.project-overview-info-heading span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.project-overview-session-row dl > div {
  min-width: 0;
}

.project-overview-session-row dt {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
}

.project-overview-session-row dd {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.45;
}

.project-overview-contact-list,
.project-overview-team-list,
.project-overview-session-list {
  display: grid;
  min-width: 0;
}

.project-overview-person-row {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 11px 0;
  border-top: 1px solid var(--line-soft);
}

.project-overview-person-row:first-child {
  padding-top: 0;
  border-top: 0;
}

.project-overview-person-row:last-child {
  padding-bottom: 0;
}

.project-overview-person-row > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.project-overview-person-row strong {
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.4;
}

.project-overview-person-row span,
.project-overview-person-row p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.project-overview-person-row p {
  max-width: 55%;
  margin: 0;
  overflow-wrap: anywhere;
  text-align: right;
}

.project-overview-team-list {
  grid-template-columns: repeat(auto-fit, minmax(170px, max-content));
  gap: 12px 28px;
}

.project-overview-detail-grid .project-overview-team-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 36px;
}

.project-overview-detail-grid .project-overview-team-member {
  min-height: 44px;
}

.project-overview-contacts-section .project-overview-person-row {
  display: grid;
  gap: 7px;
  padding: 5px 0 14px;
}

.project-overview-contacts-section .project-overview-person-row p {
  max-width: none;
  text-align: left;
}

.project-overview-team-member {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.project-overview-member-avatar {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: #e9e5fe;
  color: #5d4db2;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.project-overview-member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-overview-team-member > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.project-overview-team-member strong {
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.45;
}

.project-overview-team-member > div > span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.project-overview-session-row {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(145px, 0.8fr) minmax(0, 1.45fr) max-content;
  gap: 24px;
  padding: 13px 0;
  border-top: 1px solid var(--line-soft);
}

.project-overview-session-row > button {
  align-self: start;
}

.project-overview-session-row:first-child {
  padding-top: 0;
  border-top: 0;
}

.project-overview-session-row:last-child {
  padding-bottom: 0;
}

.project-overview-session-row > div {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 3px;
}

.project-overview-session-row > div span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.project-overview-session-row > div strong {
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.4;
}

.project-overview-session-row dl {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
}

.project-overview-empty {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.project-overview-section-heading {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
}

.project-overview-section-heading h3,
.project-overview-section-heading p {
  margin: 0;
}

.project-overview-section-heading h3 {
  font-size: 16px;
  line-height: 1.35;
}

.project-overview-section-heading p,
.project-overview-section-heading > span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.project-overview-section-heading p {
  margin-top: 4px;
}

.project-overview-section-heading > span {
  flex: 0 0 auto;
  font-weight: 700;
}

.project-progress-composer {
  display: grid;
  min-width: 0;
  gap: 10px;
  margin-bottom: 20px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
}

.project-action-bar {
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-end;
  margin: 0;
}

.project-action-menu {
  position: relative;
}

.project-action-menu summary {
  display: flex;
  min-height: 32px;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  font-weight: 750;
  list-style: none;
}

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

.project-action-menu[open] summary {
  background: #f7f7f8;
}

.project-action-menu > div {
  position: absolute;
  z-index: 10;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  width: 132px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(26, 25, 23, 0.14);
}

.workspace .project-action-menu button {
  display: block;
  width: 100%;
  min-height: 38px;
  padding: 8px 12px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  background: #fff;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}

.workspace .project-action-menu button:last-child {
  border-bottom: 0;
}

.workspace .project-action-menu button:hover {
  background: #f7f7f8;
}

.project-progress-composer-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(135px, 0.65fr);
  gap: 10px;
}

.project-progress-composer label {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.project-progress-composer label > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

.project-progress-composer select,
.project-progress-composer input,
.project-progress-composer textarea {
  width: 100%;
  min-width: 0;
  border-color: var(--line);
  background: #fff;
  font-size: 12px;
}

.project-progress-composer textarea {
  min-height: 86px;
  resize: vertical;
}

.project-todo-date-field {
  max-width: 190px;
}

.project-todo-mention-field {
  position: relative;
}

.project-todo-mention-menu {
  position: absolute;
  z-index: 12;
  top: 100%;
  right: 0;
  left: 0;
  display: grid;
  max-height: 172px;
  padding: 5px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(28, 43, 41, 0.12);
}

.project-todo-mention-menu[hidden] {
  display: none;
}

.workspace .project-todo-mention-menu button {
  display: flex;
  width: 100%;
  min-height: 34px;
  align-items: center;
  justify-content: space-between;
  padding: 6px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.workspace .project-todo-mention-menu button:hover,
.workspace .project-todo-mention-menu button.is-active {
  background: #f1effd;
}

.project-todo-mention-menu small {
  color: var(--muted);
  font-size: 10px;
}

.project-progress-composer-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.project-progress-composer-actions .form-message {
  min-width: 0;
  margin-right: auto;
  overflow-wrap: anywhere;
  white-space: normal;
}

.workspace .project-progress-composer-actions button {
  width: auto;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
}

.project-todo-list {
  margin: -8px 0 20px;
  padding-top: 2px;
}

.project-todo-list-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}

.project-todo-list-heading strong {
  font-size: 12px;
}

.project-todo-list-heading span,
.project-todo-list small {
  color: var(--muted);
  font-size: 10px;
}

.project-todo-list ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-todo-list li {
  display: grid;
  grid-template-columns: 19px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
}

.project-todo-check {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  padding: 0;
  border: 1px solid #a7a7aa;
  border-radius: 50%;
  background: #fff;
  color: transparent;
  font-size: 11px;
}

.project-todo-check:not(:disabled):hover {
  border-color: #5e54a8;
  color: #5e54a8;
}

.project-todo-check:disabled {
  cursor: default;
  opacity: 0.45;
}

.project-todo-list li > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.project-todo-list li strong {
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.45;
}

.project-activity-feed {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-activity-item {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  padding: 0 0 22px;
}

.project-activity-item::before {
  position: absolute;
  top: 10px;
  bottom: -2px;
  left: 5px;
  width: 1px;
  background: var(--line);
  content: "";
}

.project-activity-item:last-child {
  padding-bottom: 0;
}

.project-activity-item:last-child::before {
  display: none;
}

.project-activity-dot {
  position: relative;
  z-index: 1;
  width: 11px;
  height: 11px;
  margin-top: 4px;
  border: 2px solid #77787c;
  border-radius: 50%;
  background: #fff;
}

.project-activity-item.manual .project-activity-dot {
  border-color: #6f5cc2;
  background: #eeeafe;
}

.project-activity-item.finance .project-activity-dot {
  border-color: #18864b;
  background: #e7f6ec;
}

.project-activity-content {
  min-width: 0;
}

.project-activity-meta {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
}

.project-activity-meta span {
  color: #6956b4;
  font-size: 10px;
  font-weight: 800;
}

.project-activity-item.system .project-activity-meta span {
  color: var(--muted);
}

.project-activity-meta time,
.project-activity-content small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

.project-activity-content strong {
  display: block;
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.45;
}

.project-activity-content p {
  margin: 5px 0;
  overflow-wrap: anywhere;
  color: #4e4f53;
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.project-activity-content small {
  display: block;
}

.project-activity-empty {
  margin: 0;
  padding: 20px 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 1180px) {


  .project-overview-information {
    padding-right: 0;
  }

  .project-overview-activity {
    padding: 24px 0 32px;
    border-top: 1px solid var(--line-soft);
    border-left: 0;
  }
}

@media (max-width: 760px) {
  .project-list-page-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .workspace .project-list-primary-action {
    width: 100%;
  }

  .project-overview-toolbar {
    gap: 9px;
  }

  .project-overview-search {
    width: 100%;
  }

  .project-finance-panel {
    margin-inline: 0;
  }

  .project-context-header {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    padding-top: 14px;
  }

  .project-context-heading h2 {
    font-size: 19px;
  }

  .project-context-statuses {
    justify-content: flex-start;
    padding-top: 0;
  }

  .project-context-tabs.project-subtabs {
    gap: 20px;
  }

  .workspace .project-context-tabs .subtab-button {
    width: auto;
    font-size: 12px;
  }

  .project-overview-information,
  .project-overview-activity {
    padding-block: 20px 24px;
  }

  .project-progress-composer-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-todo-date-field {
    max-width: none;
  }

  .project-overview-session-row,
  .project-overview-session-row dl {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-overview-detail-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .project-overview-team-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .project-overview-person-row {
    flex-direction: column;
    gap: 5px;
  }

  .project-overview-person-row p {
    max-width: none;
    text-align: left;
  }

  .project-progress-composer-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .workspace .project-progress-composer-actions button {
    width: 100%;
  }

  .project-activity-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }
}

/* Project overview: one lightweight toolbar for all list filters. */
#projectOverviewPanel .project-overview-toolbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin-bottom: 10px;
}

#projectOverviewPanel .project-overview-search {
  flex: 1 1 260px;
  width: auto;
  min-width: 0;
}

#projectOverviewPanel .project-overview-search input {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

#projectOverviewPanel .project-overview-search input:hover {
  background: #f7f7f8;
}

#projectOverviewPanel .project-overview-search input:focus {
  border-color: #3f70cf;
  background: #fff;
  box-shadow: 0 0 0 1px #3f70cf;
}

#projectOverviewPanel .project-global-filter-row {
  min-width: 0;
  gap: 4px;
}

#projectOverviewPanel .project-overview-global-filter {
  min-width: 0;
  max-width: 100%;
}

#projectOverviewPanel .project-overview-filter {
  position: relative;
  min-width: 0;
}

#projectOverviewPanel .project-overview-more-filters {
  position: static;
}

#projectOverviewPanel .project-overview-filter summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  max-width: 210px;
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  list-style: none;
  cursor: pointer;
}

#projectOverviewPanel .project-overview-filter summary::-webkit-details-marker {
  display: none;
}

#projectOverviewPanel .project-overview-filter summary > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#projectOverviewPanel .project-filter-chevron {
  flex: 0 0 auto;
  line-height: 1;
}

#projectOverviewPanel .project-overview-filter summary:hover,
#projectOverviewPanel .project-overview-filter[open] summary {
  background: #f1f2f4;
  color: var(--text);
}

#projectOverviewPanel .project-overview-filter.is-filtered summary {
  background: #edf2fb;
  color: #315fb5;
}

#projectOverviewPanel .project-overview-filter-panel {
  position: absolute;
  z-index: 35;
  top: calc(100% + 6px);
  right: 0;
  width: 270px;
  max-width: calc(100vw - 48px);
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 30px rgb(32 31 28 / 12%);
}

#projectOverviewPanel .project-overview-filter-panel input[type="search"] {
  width: 100%;
  min-height: 36px;
  font-size: 13px;
}

#projectOverviewPanel .project-overview-filter-hint {
  margin: 8px 4px;
  color: var(--muted);
  font-size: 12px;
}

#projectOverviewPanel .project-overview-filter-options {
  display: grid;
  gap: 2px;
  max-height: 240px;
  overflow-y: auto;
  margin-top: 8px;
}

#projectOverviewPanel .project-overview-filter-options button {
  width: 100%;
  height: auto;
  min-height: 38px;
  padding: 8px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}

#projectOverviewPanel .project-overview-filter-options button:hover,
#projectOverviewPanel .project-overview-filter-options button[aria-pressed="true"] {
  background: #edf2fb;
  color: #315fb5;
}

#projectOverviewPanel .project-overview-more-filters .project-overview-filter-panel {
  width: min(560px, 100%);
  max-height: min(60vh, 560px);
  overflow-y: auto;
  padding: 16px;
}

#projectOverviewPanel .project-overview-more-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 14px;
}

#projectOverviewPanel .project-overview-more-heading button {
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  background: transparent;
  color: var(--muted);
  font-size: 20px;
}

#projectOverviewPanel .project-overview-more-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

#projectOverviewPanel .project-overview-more-fields label,
#projectOverviewPanel .project-overview-more-fields input,
#projectOverviewPanel .project-overview-more-fields select {
  min-width: 0;
  width: 100%;
}

#projectOverviewPanel .project-overview-more-fields label:has([data-filter-field="event_date_from"]) {
  grid-column: 1;
}

#projectOverviewPanel .project-overview-active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

#projectOverviewPanel .project-overview-filter-chip,
#projectOverviewPanel .project-overview-clear-filters {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: auto;
  height: auto;
  min-height: 32px;
  max-width: 100%;
  padding: 5px 9px;
  border: 0;
  border-radius: 6px;
  background: #edf2fb;
  color: #315fb5;
  font-size: 12px;
  text-align: left;
}

#projectOverviewPanel .project-overview-filter-chip span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

#projectOverviewPanel .project-overview-clear-filters {
  background: transparent;
  color: var(--muted);
}

#projectOverviewPanel .project-overview-filter-chip:hover,
#projectOverviewPanel .project-overview-clear-filters:hover {
  background: #e2e8f3;
  color: #274e97;
}

#projectOverviewPanel #projectRows[aria-busy="true"] {
  opacity: 0.55;
  pointer-events: none;
}

#projectOverviewPanel summary:focus-visible,
#projectOverviewPanel button:focus-visible {
  outline: 2px solid #3f70cf;
  outline-offset: 2px;
}

@media (max-width: 760px) {
  #projectOverviewPanel .project-overview-search {
    flex-basis: 100%;
  }

  #projectOverviewPanel .project-overview-filter {
    position: static;
  }

  #projectOverviewPanel .project-overview-filter-panel {
    width: min(320px, 100%);
    max-width: 100%;
    right: auto;
    left: 0;
  }
}

@media (max-width: 480px) {
  #projectOverviewPanel .project-overview-more-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Global first-level page headers. Keep module pages visually consistent. */
.workspace .page-header,
.workspace .project-list-page-header,
.workspace .finance-page-header,
.workspace .reimbursement-page-header,
.workspace .template-directory-intro,
.workspace .page-section > .panel > .panel-header {
  display: flex;
  min-width: 0;
  min-height: 0;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 18px;
  padding: 4px 0 0;
  border: 0;
  background: transparent;
}

.workspace .page-header h2,
.workspace .project-list-page-header h2,
.workspace .finance-page-header h2,
.workspace .reimbursement-page-header h2,
.workspace .template-directory-intro h2,
.workspace .page-section > .panel > .panel-header h2 {
  margin: 0;
  color: var(--text);
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.workspace .finance-page-header > div > p,
.workspace .reimbursement-page-header > div > p,
.workspace .template-directory-intro > div > p {
  display: none;
}

.workspace .cost-ledger-form .reimbursement-page-header,
.workspace #companyOperatingExpenseForm .finance-page-header {
  margin: 0 0 18px;
  padding: 4px 0 0;
}

.workspace .cost-ledger-form {
  padding: 4px 0 16px;
}

.workspace {
  --page-content-bleed: 0px;
}

.workspace > .page-section {
  margin-inline: calc(0px - var(--page-content-bleed));
}

@media (max-width: 760px) {
  .workspace .page-header,
  .workspace .project-list-page-header,
  .workspace .template-directory-intro,
  .workspace .page-section > .panel > .panel-header {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
  }

  .workspace .page-header,
  .workspace .project-list-page-header {
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .workspace .finance-page-header,
  .workspace .reimbursement-page-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
}

/* Quotation workflow — Asana-inspired visual integration */
.quotation-page-body {
  gap: 0;
  padding-bottom: 28px;
}

.quotation-select-stage,
.quotation-workspace,
.quotation-list,
.quotation-card {
  min-width: 0;
}

.quotation-select-stage,
.quotation-workspace {
  gap: 0;
}

.quotation-select-stage > *,
.quotation-workspace > * {
  margin-inline: 0;
}

.quotation-selection-heading.page-header {
  margin-bottom: 14px;
  padding-top: 4px;
  padding-bottom: 0;
  border-bottom: 0;
}

.workspace .quotation-primary-action {
  width: auto;
  min-height: 36px;
  flex: 0 0 auto;
  padding: 7px 13px;
  border: 0;
  border-radius: 7px;
  background: #3f70cf;
  color: #fff;
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

.workspace .quotation-primary-action:hover {
  background: #315fb5;
}

.quotation-selection-toolbar.page-toolbar {
  display: flex;
  align-items: end;
  min-height: 0;
  margin: 0 0 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.quotation-select-stage .quotation-project-selector {
  display: grid;
  width: min(760px, 100%);
  gap: 5px;
  font-weight: 700;
}

.quotation-project-selector > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.quotation-project-combobox {
  position: relative;
  width: 100%;
  min-width: 0;
}

.quotation-select-stage .quotation-project-combobox > input {
  width: 100%;
  min-height: 40px;
  padding: 8px 38px 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
}

.quotation-select-stage .quotation-project-combobox > input:focus {
  border-color: #77787e;
  outline: 0;
  box-shadow: 0 0 0 1px #77787e;
}

.quotation-project-combobox-arrow {
  position: absolute;
  z-index: 2;
  top: 16px;
  right: 14px;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid #77787d;
  border-bottom: 1.5px solid #77787d;
  pointer-events: none;
  transform: rotate(45deg);
  transition: transform 120ms ease;
}

.quotation-project-combobox.open .quotation-project-combobox-arrow {
  top: 18px;
  transform: rotate(225deg);
}

.quotation-project-menu {
  position: fixed;
  z-index: 1000;
  display: grid;
  max-height: min(360px, 52vh);
  gap: 2px;
  padding: 5px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 34px rgb(31 32 35 / 16%);
}

.quotation-project-menu[hidden] {
  display: none;
}

.quotation-project-menu button {
  display: flex;
  width: 100%;
  min-height: 38px;
  align-items: center;
  padding: 8px 10px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.quotation-project-menu button:hover,
.quotation-project-menu button.active {
  background: #f1f1f3;
}

.quotation-project-menu button.selected {
  color: #315fb5;
}

.quotation-project-menu button.selected::after {
  margin-left: auto;
  color: #3f70cf;
  content: "✓";
  font-size: 12px;
  font-weight: 800;
}

.quotation-project-menu strong {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quotation-project-empty {
  margin: 0;
  padding: 12px 10px;
  color: var(--muted);
  font-size: 12px;
}

.quotation-list-header {
  max-width: none;
  margin: 0 0 8px;
}

.quotation-list-header h3,
.quotation-list-header span {
  margin: 0;
}

.quotation-list-header h3 {
  color: var(--text);
  font-size: 15px;
  line-height: 1.35;
}

.quotation-list-header span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.quotation-project-list {
  overflow-x: auto;
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.quotation-project-list table {
  min-width: 680px;
  background: transparent;
}

.quotation-project-list thead th {
  height: 38px;
  padding-block: 8px;
  border-bottom: 1px solid var(--line-soft);
  background: #fafafa;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.01em;
}

.quotation-project-list tbody td {
  height: 48px;
  padding-block: 9px;
  border-bottom: 1px solid var(--line-soft);
  background: #fff;
  font-size: 13px;
}

.quotation-project-list tbody tr:last-child td {
  border-bottom: 0;
}

.quotation-project-list .clickable-row:hover td {
  background: #f7f7f8;
}

.quotation-project-list td:first-child strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 720;
}

.quotation-project-list .stage-pill,
.quotation-result-header .stage-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #a65b21;
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
  white-space: nowrap;
}

.quotation-project-list .stage-pill::before,
.quotation-result-header .stage-pill::before {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.quotation-project-list .stage-pill.closed,
.quotation-result-header .stage-pill.closed {
  color: #596170;
}

.quotation-project-list .stage-pill.active,
.quotation-result-header .stage-pill.active {
  color: #2f7b52;
}

.workspace .quotation-list-tools-button {
  background: transparent;
  border-radius: 6px;
  color: #85868b;
}

.workspace .quotation-list-tools-button:hover,
.workspace .quotation-list-tools-button[aria-expanded="true"] {
  background: #ededf0;
  color: var(--text);
}

.quotation-list-tools-menu {
  padding: 5px;
  border-color: var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgb(31 32 35 / 16%);
}

.quotation-list-tools-menu button,
.quotation-list-tools-menu button + button {
  min-height: 36px;
  padding: 8px 10px;
  border: 0;
  border-radius: 5px;
  background: #fff;
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
}

.quotation-list-tools-menu button:hover {
  background: #f2f2f4;
}

.quotation-list-tools-menu .quotation-list-tools-delete {
  color: #c9342f;
}

.quotation-list-tools-menu .quotation-list-tools-delete:hover {
  background: #fff1f0;
}

.quotation-form {
  gap: 16px;
  padding-bottom: 0;
}

.quotation-command-bar {
  position: static;
  min-height: 0;
  padding: 0;
}

.quotation-editor-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 0 18px;
  border-bottom: 1px solid var(--line);
}

.quotation-editor-toolbar .quotation-editor-context {
  grid-column: 1;
  grid-row: 1;
  padding: 4px 0 12px;
}

.quotation-result-header {
  min-width: 0;
}

.workspace .quotation-result-back-button {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
  border-color: transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 20px;
}

.workspace .quotation-result-back-button:hover {
  border-color: transparent;
  background: #ededf0;
  color: var(--text);
}

.quotation-editor-toolbar .quotation-result-title {
  gap: 8px;
}

.quotation-editor-toolbar .quotation-result-title h2,
.quotation-result-page-header .quotation-result-title h2 {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 780;
  letter-spacing: -0.01em;
}

.quotation-editor-toolbar .quotation-result-title > strong,
.quotation-result-page-header .quotation-result-title > strong {
  color: #4f5054;
  font-size: 13px;
  font-weight: 650;
}

.quotation-editor-toolbar .quotation-result-title > .stage-pill,
.quotation-result-page-header .quotation-result-title > .stage-pill {
  margin-left: 2px;
}

.quotation-form-tools {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  padding-top: 3px;
}

.quotation-form-tools .secondary-button {
  min-height: 32px;
  height: 32px;
  padding-inline: 11px;
  border-radius: 6px;
}

.quotation-mode-tabs {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: end;
  gap: 24px;
  width: 100%;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.workspace .quotation-mode-tab {
  min-height: 40px;
  padding: 0 1px;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.workspace .quotation-mode-tab:hover {
  background: transparent;
  color: var(--text);
}

.workspace .quotation-mode-tab span {
  width: 18px;
  height: 18px;
  border: 1px solid #d5d6da;
  background: #fff;
  color: #7c7d82;
  font-size: 10px;
}

.workspace .quotation-mode-tab.active {
  border-bottom-color: var(--text);
  background: transparent;
  color: var(--text);
  box-shadow: none;
}

.workspace .quotation-mode-tab.active span {
  border-color: #3f70cf;
  background: #3f70cf;
  color: #fff;
}

.quotation-editor-wrap {
  max-height: min(68vh, 740px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.quotation-editor-grid-price {
  min-width: 1680px;
}

.quotation-editor-grid-price .quotation-editor-row {
  grid-template-columns:
    52px minmax(300px, 390px) 250px 88px 62px
    70px 132px 144px minmax(360px, 1fr) 124px 138px 104px 40px;
}

.quotation-editor-header > div {
  min-height: 36px;
  border-bottom-color: var(--line);
  background: #f7f7f8;
  box-shadow: 0 1px 0 var(--line);
  color: #77787d;
  font-size: 11px;
  font-weight: 750;
}

.quotation-editor-row > div {
  min-height: 42px;
  border-bottom-color: #ececef;
  background: #fff;
}

.quotation-editor-header > div:nth-child(2),
.quotation-editor-header > div:nth-child(3),
.quotation-item-row > div:nth-child(2),
.quotation-item-row > div:nth-child(3) {
  border-right: 1px solid #ececef;
}

.quotation-editor-grid-price .quotation-cost-review-start {
  border-left: 1px solid #ececef;
}

.quotation-cost-review-money {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  padding-right: 10px !important;
  color: #55575c;
  font-variant-numeric: tabular-nums;
}

.quotation-cost-review-money span {
  justify-self: start;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.quotation-cost-review-money strong {
  justify-self: end;
  text-align: right;
  font-size: 13px;
  font-weight: 750;
}

.quotation-margin-preview {
  justify-content: flex-end;
  padding-right: 10px !important;
  color: #4d4f54;
  font-size: 13px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.quotation-margin-preview.low-margin {
  color: #c9342f;
}

.quotation-editor-row > .quotation-row-actions {
  border-bottom-color: #ececef;
}

.workspace .quotation-editor-row input:not([type="hidden"]),
.workspace .quotation-editor-row select {
  border-color: transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.workspace .quotation-editor-row input:not([type="hidden"]):hover,
.workspace .quotation-editor-row select:hover {
  background: rgb(63 112 207 / 4%);
}

.workspace .quotation-editor-row input:not([type="hidden"]):focus,
.workspace .quotation-editor-row select:focus,
.workspace .quotation-editor-grid-price .quotation-money-input input:focus {
  border-color: transparent;
  background: #fff;
  outline: 0;
  box-shadow: inset 0 -2px 0 #3f70cf;
}

.workspace .quotation-size-inputs input:not([type="hidden"]) {
  border: 1px solid #d9dade;
  border-radius: 6px;
  background: #fff;
}

.workspace .quotation-size-inputs input:not([type="hidden"]):hover {
  border-color: #c4c6cc;
  background: #fff;
}

.workspace .quotation-size-inputs input:not([type="hidden"]):focus {
  border-color: #3f70cf;
  background: #fff;
  box-shadow: 0 0 0 2px rgb(63 112 207 / 12%);
}

.workspace .quotation-editor-grid-price .quotation-accounting-money input,
.workspace .quotation-editor-grid-price .quotation-accounting-money strong {
  border-color: transparent !important;
  background: transparent !important;
  color: inherit;
}

.quotation-row-index[data-line-index] {
  min-width: 0;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
}

.workspace .quotation-price-tools-button,
.workspace .quotation-price-tools-button:hover,
.workspace .quotation-price-tools-button[aria-expanded="true"] {
  border-color: transparent;
  background: transparent;
  color: #73757a;
}

.workspace .quotation-price-tools-button:hover,
.workspace .quotation-price-tools-button[aria-expanded="true"] {
  color: #292a2d;
}

.quotation-item-row:hover > div {
  background: #fafafa;
}

.quotation-main-row > div:not(.quotation-row-actions) {
  min-height: 44px;
  border-bottom-color: #dbe5f6;
  background: #eef4ff;
  color: #31558f;
}

.quotation-main-row > div:first-child {
  box-shadow: inset 3px 0 0 #3f70cf;
}

.quotation-group-row > div:not(.quotation-row-actions) {
  min-height: 42px;
  border-bottom-color: #e4e4e7;
  background: #f4f4f6;
  color: #3e3f43;
}

.quotation-main-row .quotation-row-actions {
  background: #eef4ff;
}

.quotation-group-row .quotation-row-actions {
  background: #f4f4f6;
}

.quotation-editor-row input:focus,
.quotation-editor-row select:focus,
.quotation-editor-grid-price .quotation-money-input input:focus {
  border-color: #3f70cf;
  box-shadow: 0 0 0 2px rgb(63 112 207 / 12%);
}

.workspace .quotation-material-summary {
  border: 1px solid transparent;
  background: #fff;
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
}

.workspace .quotation-material-summary:hover {
  border-color: #dbe5f6;
  background: #f3f7ff;
  color: #315fb5;
}

.quotation-material-editor input {
  font-size: 13px;
  font-weight: 650;
}

.quotation-add-main-row {
  min-height: 44px;
  padding: 7px 10px;
  border: 1px dashed #d9d9dd;
  border-radius: 8px;
  background: #fff;
}

.workspace .quotation-inline-button,
.workspace .quotation-inline-button.primary {
  min-height: 30px;
  padding: 4px 7px;
  border: 0;
  background: transparent;
  color: #315fb5;
}

.workspace .quotation-inline-button:hover,
.workspace .quotation-inline-button.primary:hover {
  background: #f1f6ff;
  color: #244f9e;
}

.quotation-live-totals {
  min-width: min(100%, 340px);
  padding: 12px 0 4px;
  border-top: 1px solid var(--line-soft);
}

.quotation-live-totals > div {
  grid-template-columns: minmax(130px, auto) 30px minmax(90px, 118px);
}

.quotation-live-totals .quotation-live-total-label,
.quotation-live-totals .quotation-live-total-currency {
  font-size: 12px;
}

.quotation-live-totals strong {
  font-size: 14px;
}

.quotation-live-totals .quotation-live-grand-total {
  margin-top: 3px;
  padding-top: 6px;
  border-top: 1px solid var(--line-soft);
}

.quotation-live-totals .quotation-live-grand-total strong {
  font-size: 17px;
}

.quotation-live-totals .quotation-live-margin-total.negative strong,
.quotation-live-totals .quotation-live-margin-rate.negative strong,
.quotation-live-totals .quotation-live-margin-rate.low-margin strong {
  color: #c9342f;
}

.quotation-form-navigation {
  gap: 8px;
}

.workspace .quotation-nav-button {
  min-width: 0;
  height: 36px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--text);
  font-size: 12px;
  font-weight: 720;
}

.workspace .quotation-nav-button:hover {
  background: #f1f1f3;
  color: var(--text);
}

.workspace .quotation-nav-button.primary {
  border-color: #3f70cf;
  background: #3f70cf;
  color: #fff;
}

.workspace .quotation-nav-button.primary:hover {
  border-color: #315fb5;
  background: #315fb5;
  color: #fff;
}

.quotation-result-page-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 16px;
  padding: 4px 0 16px;
  border-bottom: 1px solid var(--line);
}

.quotation-result-page-header .quotation-result-summary {
  gap: 4px;
}

.quotation-result-page-header .quotation-result-title {
  flex-wrap: wrap;
}

.quotation-result-page-header .quotation-result-title > .stage-pill {
  margin-left: auto;
}

.quotation-result-page-header p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.quotation-list {
  gap: 0;
}

.quotation-card {
  display: grid;
  gap: 0;
}

.quotation-actions {
  min-height: 0;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 0 12px;
  border-top: 0;
}

.quotation-actions .quotation-nav-button.secondary[data-quotation-step] {
  margin-right: auto;
}

.quotation-pdf-preview {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f1f1f3;
  box-shadow: none;
}

.quotation-pdf-preview iframe {
  min-height: min(76vh, 880px);
  background: #f1f1f3;
}

.quotation-copy-dialog {
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 20px 55px rgb(31 32 35 / 20%);
}

.quotation-copy-dialog-header h3 {
  font-size: 17px;
}

@media (max-width: 980px) {
  .quotation-editor-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .quotation-editor-toolbar .quotation-editor-context,
  .quotation-form-tools,
  .quotation-mode-tabs {
    grid-column: 1;
  }

  .quotation-form-tools {
    grid-row: 2;
    justify-content: flex-start;
    padding: 0 0 10px 40px;
  }

  .quotation-editor-toolbar .quotation-mode-tabs {
    grid-column: 1;
    grid-row: 3;
  }
}

@media (max-width: 760px) {
  .quotation-selection-heading.page-header {
    align-items: center;
    flex-direction: row;
  }

  .quotation-selection-toolbar.page-toolbar {
    padding: 9px;
  }

  .quotation-select-stage .quotation-project-selector {
    width: 100%;
  }

  .quotation-editor-toolbar .quotation-editor-context {
    align-items: flex-start;
    flex-direction: row;
  }

  .quotation-editor-toolbar .quotation-result-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .quotation-form-tools {
    padding-left: 0;
  }

  .quotation-mode-tabs {
    gap: 18px;
  }

  .quotation-mode-tab {
    flex: 0 0 auto;
    justify-content: flex-start;
  }

  .quotation-editor-wrap {
    max-height: 64vh;
    border-radius: 6px;
  }

  .quotation-live-totals {
    min-width: 0;
  }

  .quotation-live-totals > div {
    grid-template-columns: minmax(120px, 1fr) 28px minmax(82px, 104px);
  }

  .quotation-form-navigation,
  .quotation-actions {
    width: 100%;
  }

  .workspace .quotation-form-navigation .quotation-nav-button {
    flex: 1 1 160px;
  }

  .quotation-result-page-header {
    align-items: flex-start;
    flex-direction: row;
  }

  .quotation-result-page-header .quotation-result-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .quotation-result-page-header .quotation-result-title > .stage-pill {
    margin-left: 0;
  }

  .quotation-actions .quotation-nav-button,
  .quotation-actions .quotation-nav-button.secondary[data-quotation-step] {
    flex: 1 1 130px;
    margin-right: 0;
  }

  .quotation-pdf-preview iframe {
    min-height: 68vh;
  }
}

@media (max-width: 480px) {
  .quotation-selection-heading.page-header {
    align-items: stretch;
    flex-direction: column;
  }

  .workspace .quotation-primary-action {
    width: 100%;
  }

  .quotation-result-title h2,
  .quotation-result-title > strong {
    overflow-wrap: anywhere;
  }

  .quotation-form-tools {
    align-items: flex-start;
    flex-direction: column;
  }

  .quotation-live-totals > div {
    grid-template-columns: minmax(110px, 1fr) 26px minmax(76px, 92px);
  }
}

/* Project calendar events and team month overview */
#workLogCalendarView {
  display: flex;
  height: 100%;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
}

.work-log-week-page:has(#workLogCalendarView:not([hidden])) {
  height: calc(100% + 64px);
  margin: -24px clamp(-44px, -3vw, -20px) -40px;
}

.work-log-week-page:has(#workLogCalendarView:not([hidden])) .work-log-week-panel {
  height: 100%;
  min-height: 0;
}

#workLogCalendarView > .work-log-week-grid {
  height: auto;
  min-height: 0;
  max-height: none;
  flex: 1 1 auto;
}

.team-calendar-header {
  display: grid;
  min-width: 0;
  gap: 12px;
  padding: 20px 32px;
  border-bottom: 1px solid var(--line-soft);
}

.workspace .team-calendar-page-header {
  min-height: 36px;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin: 0;
  padding: 0;
}

.team-calendar-toolbar,
.team-calendar-heading-group,
.team-calendar-header-actions,
.team-calendar-date-navigation {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
}

.team-calendar-toolbar {
  justify-content: space-between;
  gap: 12px 24px;
}

.team-calendar-heading-group {
  gap: 12px 24px;
}

.team-calendar-heading-group h2 {
  flex-shrink: 0;
}

.team-calendar-title-group {
  position: relative;
  flex-shrink: 0;
}

.team-calendar-header:has(.team-calendar-month-legend:not([hidden])) {
  padding-block: 17px;
}

.team-calendar-title-group:has(.team-calendar-month-legend:not([hidden])) {
  height: 44px;
  padding-bottom: 16px;
}

.team-calendar-title-group:has(.team-calendar-month-legend:not([hidden])) h2 {
  line-height: 28px;
}

.team-calendar-month-legend {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  gap: 8px;
  color: var(--muted);
  font-size: 10px;
  line-height: 12px;
  white-space: nowrap;
}

.team-calendar-month-legend[hidden] {
  display: none;
}

.team-calendar-month-legend span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.team-calendar-month-legend i {
  width: 5px;
  height: 5px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #3f70cf;
}

.team-calendar-month-legend i.is-company {
  background: #777b83;
}

.team-calendar-month-legend i.is-client {
  background: #d89b27;
}

.team-calendar-header-actions {
  max-width: 100%;
  gap: 12px;
  margin-left: auto;
}

.team-calendar-date-navigation {
  gap: 8px 12px;
}

.team-calendar-date-navigation strong {
  color: var(--text);
  font-size: 18px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.team-calendar-toolbar .work-log-week-controls {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  flex: 0 1 auto;
  gap: 6px;
  margin: 0;
}

.workspace .team-calendar-toolbar .work-log-week-controls button {
  display: inline-flex;
  width: 36px;
  min-width: 36px;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  box-shadow: none;
}

.team-calendar-toolbar .work-log-week-controls span {
  font-size: 24px;
  line-height: 1;
}

.team-calendar-toolbar .team-calendar-mode-tabs {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 4px;
  height: 38px;
  padding: 3px;
  border: 0;
  border-radius: 8px;
  background: #f1f2f4;
}

.workspace .team-calendar-toolbar .team-calendar-mode-tabs button {
  width: auto;
  min-width: 0;
  height: 32px;
  min-height: 32px;
  padding: 6px 12px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  line-height: 20px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: none;
}

.workspace .team-calendar-toolbar button:not(.team-calendar-add-event):hover {
  background: #f5f6f8;
  color: var(--text);
}

.workspace .team-calendar-toolbar .team-calendar-mode-tabs button.is-active {
  background: #fff;
  color: var(--text);
  font-weight: 750;
  box-shadow: 0 1px 3px rgb(0 0 0 / 8%);
}

.workspace .team-calendar-header button:focus-visible {
  outline: 2px solid #3f70cf;
  outline-offset: 2px;
}

.team-calendar-filters.is-month-mode {
  display: none;
}

.team-calendar-mode-toggle {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.team-calendar-mode-toggle button {
  min-height: 25px;
  padding: 3px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  box-shadow: none;
}

.team-calendar-mode-toggle button.is-active {
  background: #e9edf7;
  color: #274c86;
}

.workspace .team-calendar-add-event {
  width: auto;
}

.team-calendar-month-grid {
  overflow: auto;
  max-height: calc(100dvh - 190px);
  background: #fff;
}

.team-calendar-month-weekdays,
.team-calendar-month-cells {
  display: grid;
  min-width: 980px;
  grid-template-columns: repeat(7, minmax(140px, 1fr));
}

.team-calendar-month-weekdays {
  position: sticky;
  z-index: 6;
  top: 0;
  background: #fafaf9;
}

.team-calendar-month-weekdays span {
  padding: 8px 10px;
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}

.team-calendar-month-cell {
  display: grid;
  min-width: 0;
  height: 204px;
  min-height: 204px;
  align-content: start;
  grid-template-rows: 23px 160px;
  gap: 6px;
  padding: 7px;
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: #fff;
  cursor: pointer;
}

.team-calendar-month-cell:hover,
.team-calendar-month-cell:focus-visible {
  outline: 0;
  background: #fbfcff;
  box-shadow: inset 0 0 0 1px #a9bee4;
}

.team-calendar-month-cell.outside-month {
  background: #fafafa;
  color: #aaa;
}

.team-calendar-month-cell.today {
  background: #f5f8fe;
}

.team-calendar-month-cell > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.team-calendar-month-cell > header strong {
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border-radius: 50%;
  font-size: 11px;
}

.team-calendar-month-cell.today > header strong {
  background: #3568bd;
  color: #fff;
}

.team-calendar-month-cell > header span,
.team-calendar-month-more {
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

.team-calendar-month-events {
  display: grid;
  align-content: start;
  grid-template-rows: repeat(3, 44px) 16px;
  gap: 4px;
  min-width: 0;
}

.team-calendar-month-more {
  grid-row: 4;
  line-height: 16px;
}

.workspace .team-calendar-month-event {
  display: grid;
  align-content: center;
  gap: 2px;
  width: 100%;
  min-width: 0;
  height: 44px;
  min-height: 44px;
  overflow: hidden;
  padding: 5px 7px;
  border: 0;
  border-left: 3px solid #3f70cf;
  border-radius: 5px;
  background: #eef4ff;
  color: var(--text);
  font-weight: 700;
  text-align: left;
  box-shadow: none;
}

.team-calendar-month-event-meta,
.team-calendar-month-event-title {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-calendar-month-event-meta {
  color: #315a9b;
  font-size: 9px;
  line-height: 12px;
}

.team-calendar-month-event-title {
  color: var(--text);
  font-size: 12px;
  line-height: 16px;
}

.workspace .team-calendar-month-event:hover {
  background: #e2ecff;
}

.workspace .team-calendar-month-event.is-company {
  border-left-color: #777b83;
  background: #f0f1f3;
}

.team-calendar-month-event.is-company .team-calendar-month-event-meta {
  color: #5c6068;
}

.workspace .team-calendar-month-event.is-company:hover {
  background: #e4e6e9;
}

.workspace .team-calendar-month-event.is-client {
  border-left-color: #d89b27;
  background: #fff5d9;
}

.team-calendar-month-event.is-client .team-calendar-month-event-meta {
  color: #8a631a;
}

.workspace .team-calendar-month-event.is-client:hover {
  background: #ffedbd;
}

.team-calendar-month-event.completed .team-calendar-month-event-title {
  color: var(--muted);
  text-decoration: line-through;
}

.workspace .team-calendar-month-event:focus-visible {
  outline: 2px solid #3f70cf;
  outline-offset: 1px;
}

.workspace .team-calendar-item.calendar-event {
  width: 100%;
  border-color: #c4d5f2;
  border-left-color: #3f70cf;
  background: #eef4ff;
  color: var(--text);
  text-align: left;
}

.workspace .team-calendar-item.calendar-event:hover {
  background: #e2ecff;
}

.workspace .team-calendar-day-event {
  border-color: #c4d5f2;
  border-left-color: #3f70cf;
  background: #eef4ff;
  color: var(--text);
}

.workspace .team-calendar-day-event:hover {
  background: #e2ecff;
}

.workspace .team-calendar-item.calendar-event.is-company,
.workspace .team-calendar-day-event.calendar-event.is-company {
  border-color: #d8dbe0;
  border-left-color: #777b83;
  background: #f0f1f3;
}

.workspace .team-calendar-item.calendar-event.is-company > span,
.workspace .team-calendar-day-event.calendar-event.is-company > span {
  color: #5c6068;
}

.workspace .team-calendar-item.calendar-event.is-company:hover,
.workspace .team-calendar-day-event.calendar-event.is-company:hover {
  background: #e4e6e9;
}

.workspace .team-calendar-item.calendar-event.is-client,
.workspace .team-calendar-day-event.calendar-event.is-client {
  border-color: #efdcae;
  border-left-color: #d89b27;
  background: #fff5d9;
}

.workspace .team-calendar-item.calendar-event.is-client > span,
.workspace .team-calendar-day-event.calendar-event.is-client > span {
  color: #8a631a;
}

.workspace .team-calendar-item.calendar-event.is-client:hover,
.workspace .team-calendar-day-event.calendar-event.is-client:hover {
  background: #ffedbd;
}

.workspace .team-calendar-item.task-card,
.workspace .team-calendar-day-event.task-card {
  border-color: #c4d5f2;
  border-left-color: #3f70cf;
  background: #eef4ff;
}

.workspace .team-calendar-item.task-card.is-in-progress,
.workspace .team-calendar-day-event.task-card.is-in-progress {
  border-color: #b8cdef;
  border-left-color: #2f67c7;
  background: #e5efff;
}

.workspace .team-calendar-item.task-card.is-attention,
.workspace .team-calendar-day-event.task-card.is-attention {
  border-color: #efc8cc;
  border-left-color: #cf4f5a;
  background: #fff3f4;
}

.workspace .team-calendar-item.task-card.is-attention > span,
.workspace .team-calendar-day-event.task-card.is-attention > span {
  color: #a13d48;
}

.workspace .team-calendar-item.task-card.is-completed,
.workspace .team-calendar-day-event.task-card.is-completed {
  border-color: #d9dde2;
  border-left-color: #858b94;
  background: #f3f4f6;
  opacity: 1;
}

.workspace .team-calendar-item.task-card.is-completed > span,
.workspace .team-calendar-day-event.task-card.is-completed > span,
.workspace .team-calendar-item.task-card.is-cancelled > span,
.workspace .team-calendar-day-event.task-card.is-cancelled > span {
  color: #717780;
}

.workspace .team-calendar-item.task-card.is-cancelled,
.workspace .team-calendar-day-event.task-card.is-cancelled {
  border-color: #e0e2e5;
  border-left-color: #a3a7ad;
  background: #f6f6f7;
  opacity: 0.72;
}

.team-calendar-member-row {
  height: 177px;
  min-height: 177px;
}

.team-calendar-member-row > .team-calendar-member {
  min-height: 0;
  overflow: auto;
  overflow-wrap: anywhere;
}

.team-calendar-member-row > .team-calendar-cell {
  min-height: 0;
  grid-template-rows: repeat(3, 44px) 20px;
}

.team-calendar-member-row .team-calendar-item {
  height: 44px;
  min-height: 44px;
}

.workspace .team-calendar-week-more {
  grid-row: 4;
  width: fit-content;
  max-width: 100%;
  height: 20px;
  min-height: 20px;
  padding: 0 2px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: #315a9b;
  font-size: 11px;
  line-height: 20px;
  text-align: left;
  box-shadow: none;
}

.workspace .team-calendar-week-more:hover {
  background: #e2ecff;
}

.workspace .team-calendar-week-more:focus-visible {
  outline: 2px solid #3f70cf;
  outline-offset: 1px;
}

.team-calendar-overflow-dialog {
  width: min(480px, calc(100% - 32px));
  padding: 0;
  color: var(--text);
}

.team-calendar-overflow-dialog::backdrop {
  background: rgb(20 20 18 / 42%);
}

.team-calendar-overflow-dialog .ledger-modal-header h3 {
  min-width: 0;
  font-size: 16px;
  overflow-wrap: anywhere;
}

.team-calendar-overflow-dialog .ledger-modal-header .icon-button {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  flex-shrink: 0;
}

.team-calendar-overflow-list {
  display: grid;
  gap: 8px;
  max-height: min(520px, 60vh);
  overflow-y: auto;
  padding: 16px;
}

.team-calendar-overflow-list .team-calendar-item {
  height: auto;
  min-height: 44px;
}

.team-calendar-overflow-list .team-calendar-item span,
.team-calendar-overflow-list .team-calendar-item p {
  white-space: normal;
  overflow-wrap: anywhere;
}

.project-calendar-events {
  display: grid;
  gap: 14px;
  margin: -7px 0 20px;
}

.project-calendar-event-group {
  display: grid;
  gap: 6px;
}

.project-calendar-event-group > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.project-calendar-event-group > header strong {
  font-size: 12px;
}

.project-calendar-event-group > header span {
  color: var(--muted);
  font-size: 10px;
}

.project-calendar-event-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px dashed #d8dfeb;
  border-radius: 7px;
  color: var(--muted);
  font-size: 10px;
}

.project-calendar-event-empty strong {
  color: var(--text);
  font-size: 12px;
}

.workspace .project-calendar-event-card {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 0;
  gap: 2px;
  padding: 9px 10px 9px 13px;
  border: 1px solid #d8dfeb;
  border-left: 3px solid #557fc2;
  border-radius: 7px;
  background: #f8faff;
  color: var(--text);
  text-align: left;
  box-shadow: none;
}

.workspace .project-calendar-event-card.awaiting-result {
  border-color: #edc6a2;
  border-left-color: #d77934;
  background: #fff8f1;
}

.project-calendar-event-card > span,
.project-calendar-event-card time,
.project-calendar-event-card small {
  color: var(--muted);
  font-size: 9px;
}

.project-calendar-event-card strong {
  overflow-wrap: anywhere;
  font-size: 12px;
}

.project-calendar-event-card em {
  position: absolute;
  top: 8px;
  right: 9px;
  color: #b65d20;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.calendar-event-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(880px, calc(100vw - 32px));
  max-height: min(760px, calc(100dvh - 48px));
  border-color: #dfe3e8;
  border-radius: 12px;
  box-shadow: 0 24px 72px rgb(19 28 45 / 22%);
}

.calendar-event-modal-header {
  align-items: flex-start;
  padding: 18px 20px 16px;
  background: #fff;
}

.calendar-event-modal-heading {
  min-width: 0;
}

.calendar-event-modal-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
}

.calendar-event-modal-heading > span {
  display: block;
  margin-bottom: 5px;
  color: #5d7fba;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.calendar-event-modal .calendar-event-modal-heading h3 {
  overflow-wrap: anywhere;
  font-size: 20px;
  line-height: 1.35;
}

.calendar-event-modal-heading p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.calendar-event-modal-header .icon-button {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 20px;
}

.calendar-event-modal-header .icon-button:hover {
  background: #f1f3f6;
}

.calendar-event-modal-header .icon-button:focus-visible {
  outline: 2px solid #3f70cf;
  outline-offset: 2px;
}

.calendar-event-modal-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  display: grid;
  gap: 14px;
  padding: 18px 20px 22px;
  background: #f6f7f9;
}

.calendar-event-modal-body::-webkit-scrollbar {
  width: 9px;
}

.calendar-event-modal-body::-webkit-scrollbar-thumb {
  border: 2px solid #f6f7f9;
  border-radius: 999px;
  background: #c7cdd6;
}

.calendar-event-modal-body:has(.calendar-event-read-view:not([hidden])) {
  padding: 22px 24px 24px;
  background: #fff;
}

.calendar-event-edit-view,
.calendar-event-read-view {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.calendar-event-edit-view[hidden],
.calendar-event-read-view[hidden] {
  display: none;
}

.calendar-event-read-view {
  gap: 18px;
}

.calendar-event-read-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.calendar-event-read-tags[hidden] {
  display: none;
}

.calendar-event-read-tags > span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #edf3ff;
  color: #3969bc;
  font-size: 11px;
  font-weight: 750;
}

.calendar-event-read-tags > span:first-child {
  background: #edf8f5;
  color: #257867;
}

.calendar-event-read-tags > span[data-phase="awaiting_result"] {
  background: #fff6df;
  color: #96691d;
}

.calendar-event-read-tags > span[data-phase="completed"] {
  background: #edf8f5;
  color: #257867;
}

.calendar-event-read-tags > span[data-phase="cancelled"] {
  background: #f2f3f5;
  color: #767d87;
}

.calendar-event-read-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-top: 0;
}

.calendar-event-read-fact {
  min-width: 0;
  padding: 15px 0;
  border-bottom: 1px solid #e6e9ee;
}

.calendar-event-read-fact:nth-child(odd) {
  padding-right: 18px;
  border-right: 1px solid #e6e9ee;
}

.calendar-event-read-fact:nth-child(even) {
  padding-left: 18px;
}

.calendar-event-read-fact dt {
  margin-bottom: 6px;
  color: #858c96;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.calendar-event-read-fact dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.55;
}

.calendar-event-read-note {
  padding: 14px 16px;
  border-left: 3px solid #6f93d1;
  border-radius: 0 8px 8px 0;
  background: #f7f9fd;
}

.calendar-event-read-note.is-result {
  border-left-color: #44a18e;
  background: #f3faf8;
}

.calendar-event-read-note > span {
  display: block;
  margin-bottom: 5px;
  color: #6f7782;
  font-size: 10px;
  font-weight: 800;
}

.calendar-event-read-note > p {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.65;
  white-space: pre-wrap;
}

.calendar-event-read-created-by {
  margin: -2px 0 0;
  color: #8a9099;
  font-size: 10px;
}

.calendar-event-read-created-by strong {
  color: #6d747e;
  font-weight: 700;
}

.calendar-event-form-section {
  min-width: 0;
  padding: 16px;
  border: 1px solid #e2e6ec;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgb(19 28 45 / 3%);
}

.calendar-event-section-heading {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding-bottom: 13px;
  border-bottom: 1px solid #edf0f3;
}

.calendar-event-section-heading > span {
  display: grid;
  flex: 0 0 27px;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 7px;
  background: #edf3ff;
  color: #3f70c8;
  font-size: 10px;
  font-weight: 800;
}

.calendar-event-section-heading h4,
.calendar-event-section-heading p {
  margin: 0;
}

.calendar-event-section-heading h4 {
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
}

.calendar-event-section-heading p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.calendar-event-modal .calendar-event-fields {
  gap: 14px;
  padding: 14px 0 0;
}

.calendar-event-modal .calendar-event-fields label {
  gap: 7px;
  color: #5e6672;
  font-size: 11px;
  letter-spacing: 0.01em;
}

.calendar-event-modal .calendar-event-fields label > small {
  color: #858c96;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.45;
}

.calendar-event-participant-field {
  display: grid;
  gap: 7px;
  color: #5e6672;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.calendar-event-participant-field > label {
  display: block !important;
}

.calendar-event-participant-field > small {
  color: #858c96;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.45;
}

.calendar-event-participant-picker {
  position: relative;
  min-width: 0;
}

.calendar-event-participant-control {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-height: 42px;
  padding: 6px 38px 6px 8px;
  border: 1px solid #d9dee6;
  border-radius: 7px;
  background: #fff;
  cursor: text;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.calendar-event-participant-picker.is-open .calendar-event-participant-control,
.calendar-event-participant-control:focus-within {
  border-color: #7da3e6;
  box-shadow: 0 0 0 3px rgb(63 112 200 / 10%);
}

.calendar-event-participant-picker.is-disabled .calendar-event-participant-control {
  border-color: #e4e7ec;
  background: #f5f6f8;
  cursor: default;
}

.calendar-event-participant-chips {
  display: contents;
}

.calendar-event-participant-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  min-height: 27px;
  padding: 3px 7px 3px 9px;
  border-radius: 999px;
  background: #edf3ff;
  color: #315fAD;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
}

.calendar-event-participant-chip > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-event-participant-chip button {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  min-height: 18px !important;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #5e79a8;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.calendar-event-participant-chip button:hover {
  background: rgb(49 95 173 / 10%);
  color: #264f94;
}

.calendar-event-participant-owner {
  padding: 2px 5px;
  border-radius: 999px;
  background: rgb(49 95 173 / 9%);
  color: #6a7b99;
  font-size: 9px;
  font-weight: 750;
}

.calendar-event-modal .calendar-event-fields .calendar-event-participant-search {
  flex: 1 1 170px;
  width: auto;
  min-width: 120px;
  min-height: 27px;
  padding: 4px 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: 0;
  font-size: 12px;
}

.calendar-event-modal .calendar-event-fields .calendar-event-participant-search:focus,
.calendar-event-modal .calendar-event-fields .calendar-event-participant-search:disabled {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.workspace .calendar-event-participant-toggle {
  position: absolute;
  top: 50%;
  right: 7px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  min-height: 26px !important;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #737b86;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.calendar-event-participant-picker.is-open .calendar-event-participant-toggle {
  transform: translateY(-50%) rotate(180deg);
}

.workspace .calendar-event-participant-toggle:hover:not(:disabled) {
  background: #f0f3f7;
  color: #394352;
}

.calendar-event-participant-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  max-height: 226px;
  overflow-y: auto;
  padding: 5px;
  border: 1px solid #d9dee6;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 34px rgb(20 31 49 / 16%);
}

.calendar-event-participant-menu[hidden] {
  display: none;
}

.calendar-event-participant-menu > button {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  width: 100%;
  min-height: 42px;
  padding: 7px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.calendar-event-participant-menu > button:hover:not(:disabled),
.calendar-event-participant-menu > button:focus-visible {
  background: #f2f6fd;
  outline: 0;
}

.calendar-event-participant-menu > button[aria-selected="true"] {
  background: #edf3ff;
}

.calendar-event-participant-menu > button:disabled {
  opacity: 1;
  cursor: default;
}

.calendar-event-participant-check {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid #cbd2dc;
  border-radius: 5px;
  background: #fff;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

[aria-selected="true"] > .calendar-event-participant-check {
  border-color: #3f73d3;
  background: #3f73d3;
}

.calendar-event-participant-option-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.calendar-event-participant-option-copy strong,
.calendar-event-participant-option-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-event-participant-option-copy strong {
  font-size: 12px;
  font-weight: 700;
}

.calendar-event-participant-option-copy small {
  color: #858c96;
  font-size: 10px;
  font-weight: 500;
}

.calendar-event-participant-locked {
  color: #78859a;
  font-size: 9px;
  font-weight: 700;
}

.calendar-event-participant-empty {
  margin: 0;
  padding: 18px 12px;
  color: #858c96;
  font-size: 11px;
  font-weight: 500;
  text-align: center;
}

.calendar-event-modal .calendar-event-fields input,
.calendar-event-modal .calendar-event-fields select,
.calendar-event-modal .calendar-event-fields textarea {
  border-color: #d9dee6;
  border-radius: 7px;
  background: #fff;
}

.calendar-event-modal .calendar-event-fields input:focus,
.calendar-event-modal .calendar-event-fields select:focus,
.calendar-event-modal .calendar-event-fields textarea:focus {
  border-color: #7da3e6;
  box-shadow: 0 0 0 3px rgb(63 112 200 / 10%);
}

.calendar-event-modal .calendar-event-fields :disabled {
  border-color: #e4e7ec;
  background: #f5f6f8;
  color: #737b86;
}

.calendar-event-modal select[multiple] {
  min-height: 126px;
  padding: 6px;
}

.calendar-event-modal select[multiple] option {
  padding: 5px 7px;
  border-radius: 5px;
}

.calendar-event-title-preview {
  display: grid;
  gap: 5px;
  padding: 12px 14px 12px 16px;
  border: 1px solid #d5dff0;
  border-left: 3px solid #4e7ed2;
  border-radius: 8px;
  background: #f6f8fd;
}

.calendar-event-title-preview[hidden] {
  display: none;
}

.calendar-event-title-preview > span,
.calendar-event-title-preview > small {
  color: var(--muted);
  font-size: 11px;
}

.calendar-event-title-preview > strong {
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
}

.calendar-event-modal-footer {
  display: flex;
  gap: 12px;
  align-items: center;
  min-height: 62px;
  padding: 11px 20px;
  border-top: 1px solid #e1e5eb;
  background: #fff;
}

.calendar-event-footer-secondary,
.calendar-event-footer-primary {
  display: flex;
  gap: 8px;
  align-items: center;
}

.calendar-event-footer-secondary:not(:has(button:not([hidden]))) {
  display: none;
}

.calendar-event-modal-footer .form-message {
  flex: 1 1 auto;
  min-width: 0;
  margin-right: auto;
  text-align: right;
}

.calendar-event-modal-footer button {
  min-height: 38px;
}

.workspace .calendar-event-footer-primary .primary-button {
  border-color: #3f73d3;
  background: #3f73d3;
  color: #fff;
}

.workspace .calendar-event-footer-primary .primary-button:hover {
  border-color: #3265c3;
  background: #3265c3;
}

.workspace .calendar-event-footer-secondary .danger-button {
  width: auto;
  border-color: #efc8c8;
  background: #fff;
  color: #bd4444;
}

.workspace .calendar-event-footer-secondary .danger-button:hover {
  border-color: #e8b2b2;
  background: #fff5f5;
}

@media (max-width: 960px) {

  .team-calendar-filters {
    flex-wrap: wrap;
  }

  .workspace .team-calendar-add-event {
    margin-left: auto;
  }
}

@media (max-width: 560px) {
  .work-log-week-page:has(#workLogCalendarView:not([hidden])) {
    height: calc(100% + 50px);
    margin: -18px -16px -32px;
  }

  .team-calendar-header {
    padding: 18px 20px;
  }

  .team-calendar-header:has(.team-calendar-month-legend:not([hidden])) {
    padding-block: 15px;
  }

  .workspace .team-calendar-page-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
  }

  .team-calendar-heading-group,
  .team-calendar-header-actions {
    display: contents;
  }

  .team-calendar-title-group {
    grid-column: 1;
    grid-row: 1;
  }

  .team-calendar-date-navigation {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .team-calendar-toolbar .team-calendar-mode-tabs {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
  }

  .workspace .team-calendar-toolbar .team-calendar-mode-tabs button {
    flex: 1 1 0;
    padding-inline: 8px;
    font-size: 12px;
  }

  .team-calendar-filters {
    padding-inline: 20px;
  }

  .team-calendar-project-filter,
  .workspace .team-calendar-project-trigger {
    width: 100%;
    max-width: 100%;
  }

  .team-calendar-mode-toggle {
    width: 100%;
  }

  .team-calendar-mode-toggle button {
    flex: 1 1 0;
  }

  .workspace .team-calendar-add-event {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    margin-left: 0;
  }

  .team-calendar-month-weekdays,
  .team-calendar-month-cells {
    min-width: 840px;
    grid-template-columns: repeat(7, minmax(120px, 1fr));
  }

  #calendarEventModal {
    padding: 8px;
  }

  .calendar-event-modal {
    width: 100%;
    max-height: calc(100dvh - 16px);
    border-radius: 10px;
  }

  .calendar-event-modal-header {
    padding: 15px 16px 13px;
  }

  .calendar-event-modal .calendar-event-modal-heading h3 {
    font-size: 18px;
  }

  .calendar-event-modal-body {
    gap: 10px;
    padding: 12px;
  }

  .calendar-event-modal-body:has(.calendar-event-read-view:not([hidden])) {
    padding: 18px 16px 20px;
  }

  .calendar-event-read-facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .calendar-event-read-fact:nth-child(odd),
  .calendar-event-read-fact:nth-child(even) {
    padding-inline: 0;
    border-right: 0;
  }

  .calendar-event-form-section {
    padding: 13px;
  }

  .calendar-event-modal .calendar-event-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .calendar-event-modal .calendar-event-fields .span-2 {
    grid-column: auto;
  }

  .calendar-event-modal-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 10px 12px;
  }

  .calendar-event-modal-footer .form-message {
    order: -1;
    text-align: left;
  }

  .calendar-event-footer-secondary,
  .calendar-event-footer-primary {
    width: 100%;
  }

  .calendar-event-footer-primary button {
    flex: 1 1 140px;
  }
}

/* Project overview: lifecycle, information, pending work, and history are four tonal zones. */
.project-overview-layout {
  gap: 14px;
  padding: 14px 0 32px;
  background: #f5f6f7;
}

.project-lifecycle-panel {
  min-width: 0;
  grid-column: 1 / -1;
  border-radius: 10px;
}

.project-overview-information {
  padding: 24px 28px 28px;
  border-radius: 10px;
  background: #fff;
}

.project-overview-activity.project-overview-side {
  display: grid;
  height: 100%;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  padding: 0;
  overflow: hidden;
  border: 0;
}

.project-overview-side-section {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  padding: 20px 22px;
  overflow: hidden;
  border-radius: 10px;
}

.project-history-section {
  background: #eef3f6;
}

.project-overview-side-section .project-overview-section-heading {
  flex: 0 0 auto;
}

.project-overview-side-body {
  min-height: 0;
  padding-right: 4px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.project-history-section .project-activity-dot {
  background: #eef3f6;
}

.project-history-section .project-activity-item.manual .project-activity-dot {
  background: #e8e1ff;
}

.project-overview-layout.editing .project-overview-information,
.project-overview-layout.editing .project-overview-activity {
  margin: 0;
  padding: 24px 28px 28px;
  border: 0;
}

.project-overview-layout.editing .project-overview-activity {
  min-height: 720px;
  padding: 0;
}

@media (max-width: 1180px) {


  .project-lifecycle-panel,
  .project-overview-information,
  .project-overview-activity.project-overview-side {
    grid-column: 1;
  }

  .project-overview-activity.project-overview-side {
    height: 720px;
    padding: 0;
    border: 0;
  }
}

@media (max-width: 760px) {
  .project-overview-layout {
    gap: 10px;
    padding-top: 10px;
  }

  .project-lifecycle-panel,
  .project-overview-information,
  .project-overview-side-section {
    padding: 18px;
    border-radius: 8px;
  }

  .project-overview-activity.project-overview-side {
    height: auto;
    grid-template-rows: none;
    gap: 10px;
  }

  .project-overview-side-section {
    min-height: 360px;
    max-height: 520px;
  }
}

/* Project overview refinement and progress-dynamics workspace. */
.project-overview-layout {
  grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
}

.project-lifecycle-panel {
  padding: 14px 20px 12px;
  background: #f7f5ff;
}

.project-overview-activity.project-overview-side.project-overview-history-only {
  display: block;
  height: 100%;
  min-height: 0;
}

.project-overview-history-only .project-history-section {
  height: 100%;
  min-height: 0;
}

.project-progress-dynamics-layout {
  display: grid;
  min-width: 0;
  height: clamp(620px, calc(100vh - 270px), 780px);
  grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr);
  gap: 14px;
  padding: 14px 0 32px;
}

.project-dynamics-pending,
.project-schedule-workspace {
  min-width: 0;
  min-height: 0;
}

.project-dynamics-pending {
  display: flex;
  flex-direction: column;
}

.project-dynamics-pending > .project-overview-section-heading,
.project-dynamics-pending > .project-progress-composer {
  flex: 0 0 auto;
}

.project-dynamics-pending-body {
  min-height: 0;
  padding-right: 4px;
  overflow-y: auto;
  scrollbar-width: thin;
}



.project-dynamics-pending .project-todo-list {
  margin: 0;
}

.project-schedule-workspace {
  display: flex;
  flex-direction: column;
  background: #fff;
}

.project-schedule-heading {
  display: flex;
  flex: 0 0 auto;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.project-schedule-heading > div:first-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.project-schedule-heading span,
.project-schedule-heading p {
  color: #6c7880;
}

.project-schedule-heading h3,
.project-schedule-heading p {
  margin: 0;
}



.project-schedule-content {
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  scrollbar-width: thin;
}

.project-milestone-view,
.project-gantt-view {
  min-width: 760px;
}

.project-schedule-axis {
  position: relative;
  margin: 0 10px 8px 132px;
  border-bottom: 1px solid #dce2e6;
}

.project-gantt-view > .project-schedule-axis {
  margin-left: 174px;
}

.project-schedule-axis > span {
  position: absolute;
  color: #7e898f;
  transform: translateX(-50%);
}

.project-schedule-axis > span:first-child {
  transform: none;
}

.project-schedule-axis > span:last-of-type {
  transform: translateX(-100%);
}

.project-schedule-axis > i {
  position: absolute;
  z-index: 3;
  top: 20px;
  bottom: -8px;
  width: 1px;
  background: #e06e61;
  font-style: normal;
}

.project-schedule-axis > i span {
  position: absolute;
  right: 4px;
  bottom: 5px;
  color: #b9574c;
  font-weight: 800;
  white-space: nowrap;
}

.project-gantt-track {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background-image: linear-gradient(to right, #e8ecef 1px, transparent 1px);
  background-size: 25% 100%;
}

.project-gantt-row {
  display: grid;
  min-width: 0;
  grid-template-columns: 162px minmax(0, 1fr);
  gap: 12px;
  min-height: 40px;
  border-bottom: 1px solid #edf0f2;
}

.project-gantt-label {
  display: grid;
  min-width: 0;
  align-content: center;
  gap: 2px;
  padding: 6px 8px;
}

.project-gantt-label strong,
.project-gantt-label span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-gantt-label strong {
  font-size: 10px;
}

.project-gantt-label span {
  color: var(--muted);
  font-size: 8px;
}

.project-gantt-track {
  min-height: 39px;
}

.project-gantt-bar {
  position: absolute;
  top: 12px;
  left: var(--gantt-left);
  width: var(--gantt-width);
  min-width: 8px;
  height: 15px;
  border-radius: 4px;
  background: #7b87a8;
}

.project-gantt-bar.session {
  background: #6a5bb7;
}

.project-gantt-bar.event {
  background: #4d85b2;
}

.project-gantt-bar.task {
  background: #d09a45;
}

.project-gantt-bar.completed {
  background: #5f9079;
}

.project-schedule-empty-state {
  display: grid;
  min-height: 360px;
  place-content: center;
  gap: 5px;
  color: var(--muted);
  text-align: center;
}

.project-schedule-empty-state strong {
  color: var(--text);
}

@media (max-width: 1180px) {
  .project-overview-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-overview-activity.project-overview-side.project-overview-history-only {
    height: 560px;
  }

  .project-progress-dynamics-layout {
    height: auto;
  }




}

@media (max-width: 760px) {

  .project-overview-history-only .project-history-section {
    max-height: none;
  }

  .project-progress-dynamics-layout {
    padding-top: 10px;
  }

  .project-dynamics-pending,
  .project-schedule-heading,
  .project-schedule-content {
    padding-inline: 18px;
  }

  .project-schedule-heading {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Project schedule v2: one milestone path and workstream-based Gantt lanes. */
.project-schedule-explainer {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.project-schedule-explainer > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}



.project-schedule-explainer span {
  color: var(--muted);
}

.workspace .project-schedule-explainer > button,
.project-schedule-empty-state > button {
  width: auto;
  white-space: nowrap;
}

.project-schedule-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 14px 18px 0;
  color: var(--muted);
}

.project-schedule-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.project-schedule-legend i {
  display: inline-block;
  border: 2px solid #4c7eaa;
  border-radius: 50%;
  background: #fff;
}

.project-schedule-legend i.completed {
  border-color: #5d8f78;
  background: #5d8f78;
}

.project-schedule-legend i.fixed {
  border-color: #4c7eaa;
  border-radius: 2px;
  background: #dceafa;
  transform: rotate(45deg);
}

.project-schedule-legend i.danger {
  border-color: #c65c5c;
  background: #f7dede;
}

.project-workstream-gantt > .project-schedule-axis {
  margin-left: 192px;
}

.project-gantt-workstreams {
  display: grid;
  gap: 8px;
}

.project-gantt-workstream {
  display: grid;
  min-width: 0;
  grid-template-columns: 180px minmax(0, 1fr);
  border: 1px solid #e7ecef;
  border-radius: 8px;
  background: #fbfcfc;
}

.project-gantt-workstream > header {
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 11px 12px;
  border-right: 1px solid #e7ecef;
  background: #f3f6f7;
}

.project-gantt-workstream > header strong {
  font-size: 11px;
}

.project-gantt-workstream > header span {
  color: var(--muted);
  font-size: 8px;
  line-height: 1.35;
}

.project-gantt-workstream-rows {
  min-width: 0;
}

.project-gantt-workstream .project-gantt-row {
  grid-template-columns: 154px minmax(0, 1fr);
  min-height: 43px;
}

.project-gantt-workstream .project-gantt-row:last-child {
  border-bottom: 0;
}

.project-gantt-workstream .project-gantt-track {
  min-height: 42px;
}

.project-gantt-workstream .project-gantt-bar {
  top: 13px;
  border: 0;
  cursor: default;
}

.project-gantt-workstream button.project-gantt-bar {
  cursor: pointer;
}

.project-gantt-workstream .project-gantt-bar.danger {
  background: #c65c5c;
}

.project-gantt-workstream .project-gantt-bar.is-deadline {
  width: 13px;
  min-width: 13px;
  height: 13px;
  border-radius: 3px;
  transform: rotate(45deg);
}

.project-gantt-stream-empty {
  margin: 0;
  padding: 15px 14px;
  color: #a0a9ae;
  font-size: 9px;
}

.project-gantt-workstream.is-empty {
  opacity: 0.62;
}

.project-gantt-legend {
  margin-left: 192px;
}

.project-schedule-legend i.bar {
  width: 18px;
  height: 7px;
  border: 0;
  border-radius: 3px;
  background: #4d85b2;
}

.project-schedule-legend i.bar.completed {
  background: #5f9079;
}

.project-schedule-legend i.diamond {
  border: 0;
  border-radius: 2px;
  background: #d09a45;
  transform: rotate(45deg);
}

.project-schedule-legend i.diamond.danger {
  background: #c65c5c;
}

@media (max-width: 760px) {
  .project-schedule-explainer {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Project overview: keep the information and activity areas on one clean white canvas. */
.project-overview-activity.project-overview-side.project-overview-history-only {
  background: #fff;
}

.project-overview-layout {
  background: #fff;
}

@media (min-width: 1181px) {
  .project-overview-activity.project-overview-side.project-overview-history-only {
    position: relative;
    height: 720px;
    min-height: 0;
    align-self: start;
  }

  .project-overview-history-only .project-history-section {
    position: absolute;
    inset: 0;
    height: auto;
    min-height: 0;
  }
}

.project-overview-history-only .project-history-section {
  box-sizing: border-box;
  padding: 28px 0 28px 28px;
  border-radius: 0;
  border-left: 1px solid #ece8f4;
}

.project-overview-history-only .project-overview-section-heading {
  margin-right: 28px;
  padding: 0 0 16px;
  border-bottom: 1px solid #eeeaf5;
}

.project-overview-history-only .project-overview-section-heading h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.project-overview-history-only .project-overview-section-heading h3::before {
  display: inline-block;
  width: 4px;
  height: 18px;
  border-radius: 999px;
  content: "";
}

.project-overview-history-only .project-overview-side-body {
  padding: 19px 28px 0 0;
}

.project-overview-history-only .project-activity-item {
  padding-bottom: 24px;
}







.project-overview-history-only .project-activity-meta {
  margin-bottom: 4px;
}

.project-overview-history-only .project-activity-content strong {
  font-size: 12px;
}

.project-progress-dynamics-layout {
  background: transparent;
}

@media (max-width: 1180px) {
  .project-overview-history-only .project-history-section {
    padding-left: 0;
    border-top: 1px solid #ece8f4;
    border-left: 0;
  }

  .project-overview-history-only .project-overview-section-heading {
    margin-right: 0;
  }

  .project-overview-history-only .project-overview-side-body {
    padding-right: 0;
  }
}

/* The lifecycle is a full-width structural section, not a coloured card. */
.project-lifecycle-panel {
  padding: 16px 20px 14px;
  border-radius: 0;
  border-bottom: 1px solid #e8e4ef;
  background: #fff;
}

.project-overview-history-only .project-history-section {
  background: #f1f3f5;
  border-left-color: #dfe4ea;
}

.project-overview-history-only .project-overview-section-heading {
  border-bottom-color: #dfe4ea;
}

.project-overview-history-only .project-overview-section-heading h3::before {
  background: #3f70cf;
}

.project-overview-history-only .project-activity-item::before {
  background: #d8dee7;
}

.project-overview-history-only .project-activity-dot {
  border-color: #98a4b2;
  background: #f1f3f5;
}

.project-overview-history-only .project-activity-item.manual .project-activity-dot {
  border-color: #3f70cf;
  background: #e4edfc;
}

/* Main lifecycle milestones and subordinate work branches share one rail. */
.project-lifecycle-branched {
  container: project-lifecycle / inline-size;
  padding: 10px 20px 8px;
  border-bottom-color: #e5e9ef;
}

.project-lifecycle-rail,
.project-lifecycle-branches {
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-lifecycle-rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2.6fr) minmax(0, 2.6fr) 80px;
  min-width: 0;
  padding: 68px 0 0;
}

.project-lifecycle-phase {
  position: relative;
  min-width: 0;
  min-height: 104px;
}

.project-lifecycle-phase:not(:last-child)::after {
  position: absolute;
  top: 13px;
  left: 40px;
  width: 100%;
  height: 2px;
  background: #edf0f4;
  content: "";
}

.project-lifecycle-milestone {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 80px;
  text-align: center;
}

.project-lifecycle-marker {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid #e5e9ef;
  border-radius: 50%;
  background: #fff;
  color: #b4bdc9;
  font-size: 12px;
  font-weight: 650;
}

.project-lifecycle-phase-copy {
  display: grid;
  gap: 2px;
}

.project-lifecycle-phase.completed:not(:last-child)::after {
  background: #aac0e9;
}

.project-lifecycle-phase-copy strong {
  color: #677484;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.project-lifecycle-phase-copy small,
.project-lifecycle-branch small {
  color: #315fb5;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.4;
}

.project-lifecycle-phase.visited .project-lifecycle-marker {
  border-color: #c5d5ef;
  background: #eef3fb;
  color: #45689d;
}

.project-lifecycle-phase.current .project-lifecycle-marker,
.project-lifecycle-phase.is-running .project-lifecycle-marker {
  border-color: #3f70cf;
  background: #3f70cf;
  color: #fff;
}

.project-lifecycle-phase.current .project-lifecycle-phase-copy strong,
.project-lifecycle-phase.is-running .project-lifecycle-phase-copy strong {
  color: #315fb5;
}

.project-lifecycle-phase.completed .project-lifecycle-marker {
  border-color: #3f70cf;
  background: #3f70cf;
  color: #fff;
  font-size: 15px;
}

.project-lifecycle-phase.completed .project-lifecycle-phase-copy strong,
.project-lifecycle-phase.completed .project-lifecycle-phase-copy small {
  color: #315fb5;
}

/* Dim only the inactive milestone itself, never its independently active branches. */
.project-lifecycle-phase.upcoming:not(.is-running) .project-lifecycle-phase-copy strong {
  color: #b4bdc9;
}

.project-lifecycle-branches {
  position: absolute;
  top: 14px;
  left: 40px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
}

.project-lifecycle-branch {
  position: relative;
  min-width: 0;
  height: 0;
  text-align: center;
}

.project-lifecycle-branch::before {
  position: absolute;
  top: 0;
  left: calc(50% - 1px);
  width: 0;
  height: 32px;
  border-left: 2px dashed #e4e9ef;
  content: "";
}

.project-lifecycle-branch-marker {
  position: absolute;
  z-index: 1;
  top: 26px;
  left: calc(50% - 6px);
  display: grid;
  width: 12px;
  height: 12px;
  place-items: center;
  border: 1px solid #dfe5ed;
  border-radius: 50%;
  background: #dfe5ed;
  color: #fff;
  font-size: 9px;
  font-weight: 650;
  line-height: 1;
}

.project-lifecycle-branch-copy {
  position: absolute;
  top: 56px;
  left: 50%;
  display: grid;
  gap: 2px;
  width: max-content;
  max-width: 110px;
  transform: translateX(-50%);
}

.project-lifecycle-branch.above::before {
  top: -32px;
}

.project-lifecycle-branch.above .project-lifecycle-branch-marker {
  top: -38px;
}

.project-lifecycle-branch.above .project-lifecycle-branch-copy {
  top: auto;
  bottom: 48px;
}

.project-lifecycle-branch strong {
  color: #687381;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
}

.project-lifecycle-branch.upcoming strong {
  color: #b4bdc9;
}

.project-lifecycle-branch.active strong {
  color: #315fb5;
  font-weight: 600;
}

.project-lifecycle-branch.active::before {
  border-color: #82a1df;
}

.project-lifecycle-branch.active .project-lifecycle-branch-marker {
  border-color: #3f70cf;
  background: #3f70cf;
}

.project-lifecycle-branch.completed::before {
  border-color: #82a1df;
}

.project-lifecycle-branch.completed .project-lifecycle-branch-marker {
  border-color: #3f70cf;
  background: #3f70cf;
}

.project-lifecycle-branch.completed strong,
.project-lifecycle-branch.completed small {
  color: #315fb5;
}

.project-lifecycle-phase.is-running .project-lifecycle-marker,
.project-lifecycle-branch.is-running .project-lifecycle-branch-marker {
  animation: project-lifecycle-running-glow 2.2s ease-in-out infinite;
}

@keyframes project-lifecycle-running-glow {
  0%, 100% { box-shadow: 0 0 0 2px rgb(63 112 207 / 12%); }
  50% { box-shadow: 0 0 0 7px rgb(63 112 207 / 32%); }
}

@media (prefers-reduced-motion: reduce) {
  .project-lifecycle-phase.is-running .project-lifecycle-marker,
  .project-lifecycle-branch.is-running .project-lifecycle-branch-marker {
    animation: none;
    box-shadow: 0 0 0 2px rgb(63 112 207 / 12%);
  }
}

.project-lifecycle-unmapped {
  margin: 0;
  color: #354152;
  font-size: 14px;
}

@container project-lifecycle (max-width: 700px) {
  .project-lifecycle-rail {
    display: block;
    padding: 0;
  }

  .project-lifecycle-phase {
    min-height: 52px;
    padding-bottom: 16px;
  }

  .project-lifecycle-phase:last-child {
    min-height: 28px;
    padding-bottom: 0;
  }

  .project-lifecycle-phase:not(:last-child)::after {
    top: 14px;
    left: 13px;
    width: 2px;
    height: 100%;
  }

  .project-lifecycle-milestone {
    display: flex;
    align-items: center;
    gap: 12px;
    width: auto;
    text-align: left;
  }

  .project-lifecycle-marker {
    flex: 0 0 28px;
  }

  .project-lifecycle-phase-copy {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 3px 8px;
  }

  .project-lifecycle-branches {
    position: relative;
    top: auto;
    left: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    width: auto;
    margin: 14px 0 0 44px;
  }

  .project-lifecycle-branch {
    display: flex;
    align-items: center;
    gap: 14px;
    height: auto;
    text-align: left;
  }

  .project-lifecycle-branch::before,
  .project-lifecycle-branch.above::before {
    top: calc(50% - 1px);
    left: -30px;
    width: 36px;
    height: 0;
    border-left: 0;
    border-top: 2px dashed #e4e9ef;
    border-color: inherit;
  }

  .project-lifecycle-branch {
    border-color: #e4e9ef;
  }

  .project-lifecycle-branch.active {
    border-color: #82a1df;
  }

  .project-lifecycle-branch.completed {
    border-color: #82a1df;
  }

  .project-lifecycle-branch .project-lifecycle-branch-marker,
  .project-lifecycle-branch.above .project-lifecycle-branch-marker {
    position: relative;
    top: auto;
    left: auto;
    flex: 0 0 12px;
  }

  .project-lifecycle-branch .project-lifecycle-branch-copy {
    position: static;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 3px 8px;
    width: auto;
    max-width: none;
    transform: none;
  }
}

.project-milestone-modal {
  width: min(540px, 100%);
}

.project-milestone-modal .form-body {
  padding: 20px;
}

.project-work-item-modal {
  width: min(720px, 100%);
}

.project-work-item-modal .form-body {
  padding: 20px;
}

.project-work-item-guidance {
  display: grid;
  gap: 4px;
  padding: 13px 14px;
  border-radius: 8px;
  background: #f3f7fb;
  color: #596675;
  font-size: 12px;
  line-height: 1.5;
}

.project-work-item-guidance strong {
  color: #315fb5;
  font-size: 12px;
}

.project-todo-list .project-todo-detail {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.project-todo-list .project-todo-detail:hover strong {
  color: #315fb5;
}

.project-todo-list .project-todo-detail em {
  overflow: hidden;
  color: #b35a54;
  font-size: 10px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-milestone-guidance {
  display: grid;
  gap: 4px;
  padding: 13px 14px;
  border-radius: 8px;
  background: #f3f6fb;
  color: #596675;
  font-size: 12px;
  line-height: 1.5;
}

.project-milestone-guidance strong {
  color: #315fb5;
  font-size: 12px;
}

.project-milestone-form-actions #toggleProjectMilestoneComplete {
  margin-right: auto;
}

/* Independent, flat sections for the project inbox and schedule. */
.project-progress-dynamics-layout {
  height: auto;
  min-height: 0;
  grid-template-columns: 320px minmax(0, 1fr);
  align-items: start;
  gap: 28px;
  padding-top: 22px;
  background: #fff;
}

.project-dynamics-pending {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  overflow: visible;
}

.project-schedule-workspace {
  padding-left: 28px;
  border: 0;
  border-left: 1px solid #e5e8ee;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.project-schedule-heading {
  padding: 0 0 18px;
  border-bottom: 0;
  background: transparent;
}

.project-schedule-heading span,
.project-schedule-heading p {
  font-size: 12px;
  line-height: 1.45;
}

.project-schedule-heading h3 {
  font-size: 16px;
  letter-spacing: -0.02em;
}

.project-schedule-content {
  padding: 0;
  overflow: visible;
}

.project-schedule-explainer {
  margin-bottom: 18px;
}

.project-schedule-explainer strong {
  font-size: 16px;
}

.project-schedule-explainer span {
  font-size: 12px;
  line-height: 1.5;
}

.workspace .project-schedule-explainer > button,
.project-schedule-empty-state > button {
  min-height: 34px;
  padding: 6px 13px;
  font-size: 12px;
}

.project-schedule-axis {
  height: 34px;
  margin-bottom: 12px;
}

.project-schedule-axis > span {
  bottom: 8px;
  font-size: 11px;
  font-weight: 700;
}

.project-schedule-axis > i span {
  font-size: 10px;
}

.project-schedule-legend {
  gap: 16px;
  margin-top: 18px;
  font-size: 11px;
}

.project-schedule-legend i {
  width: 10px;
  height: 10px;
}

@media (max-width: 1180px) {
  .project-progress-dynamics-layout {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  .project-dynamics-pending {
    min-height: 0;
    max-height: none;
  }

  .project-schedule-workspace {
    min-height: 0;
    padding: 24px 0 0;
    border-left: 0;
    border-top: 1px solid #e5e8ee;
  }
}

@media (max-width: 760px) {
  .project-schedule-workspace {
    min-height: 0;
  }

  .project-schedule-heading,
  .project-schedule-content {
    padding-inline: 0;
  }
}

/* Only the progress-dynamics inbox overrides the shared fixed-height buttons. */
.project-dynamics-pending-body {
  padding-right: 0;
  overflow: visible;
}

.project-dynamics-pending > .project-overview-section-heading {
  margin-bottom: 12px;
}

.project-dynamics-pending > .project-overview-section-heading h3 {
  font-size: 16px;
}

.project-dynamics-pending .project-calendar-events {
  gap: 16px;
  margin: 0 0 18px;
}

.project-dynamics-pending .project-calendar-event-group {
  gap: 4px;
}

.workspace .project-dynamics-pending .project-calendar-event-card {
  height: auto;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 8px 0 8px 10px;
  border: 0;
  border-left: 2px solid #b4c7e7;
  border-radius: 0;
  background: transparent;
  white-space: normal;
  line-height: 1.5;
}

.workspace .project-dynamics-pending .project-calendar-event-card.awaiting-result {
  border-left-color: #d77934;
}

.project-dynamics-pending .project-calendar-event-card > * {
  grid-column: 1 / -1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.project-dynamics-pending .project-calendar-event-card > span {
  grid-column: 1;
  grid-row: 1;
}

.project-dynamics-pending .project-calendar-event-card em {
  position: static;
  grid-column: 1;
  align-self: start;
  font-size: 10px;
}

.project-dynamics-pending .project-calendar-event-card strong {
  font-size: 13px;
  line-height: 1.5;
}

.project-dynamics-pending .project-calendar-event-card time,
.project-dynamics-pending .project-calendar-event-card small {
  font-size: 11px;
  font-weight: 400;
}

.project-dynamics-pending .project-todo-list ul {
  gap: 0;
}

.project-dynamics-pending .project-todo-list li {
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid #edf0f4;
}

.project-dynamics-pending .project-todo-list li:last-child {
  border-bottom: 0;
}

.workspace .project-dynamics-pending .project-todo-check {
  width: 18px;
  height: 18px;
  min-height: 0;
  margin-top: 2px;
  padding: 0;
}

.workspace .project-dynamics-pending .project-todo-detail {
  height: auto;
  min-height: 0;
  align-content: start;
  gap: 4px;
  white-space: normal;
}

.project-dynamics-pending .project-todo-detail strong {
  font-size: 13px;
  line-height: 1.5;
}

.project-dynamics-pending .project-todo-detail small {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.project-dynamics-pending .project-todo-status {
  color: #315fb5;
  white-space: nowrap;
}

.project-dynamics-pending .project-todo-status.needs-attention {
  color: #b35a54;
}

.project-work-item-warnings {
  padding: 10px 12px;
  border-left: 2px solid #c65c5c;
  color: #a14c46;
  font-size: 12px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.project-work-item-warnings p {
  margin: 4px 0 0;
}

.project-dynamics-pending .project-todo-detail em {
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.5;
}

.project-schedule-workspace .project-milestone-view,
.project-schedule-workspace .project-gantt-view {
  min-width: 0;
  width: 100%;
}

.project-milestone-date-list,
.project-milestone-date-group > ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-milestone-date-list {
  display: grid;
  gap: 24px;
  padding-top: 8px;
}

.project-milestone-date-group {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  align-items: start;
  gap: 18px;
  min-width: 0;
}

.project-milestone-date-group > time {
  padding-top: 10px;
  color: #6c7683;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.project-milestone-date-group > ul {
  position: relative;
  display: grid;
  gap: 12px;
}

.project-milestone-date-group > ul::before {
  position: absolute;
  top: 16px;
  bottom: -40px;
  left: 5px;
  width: 1px;
  background: #e2e7ee;
  content: "";
}

.project-milestone-date-group:last-child > ul::before {
  bottom: 16px;
}

.workspace .project-milestone-entry {
  position: relative;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  width: 100%;
  height: auto;
  min-height: 54px;
  padding: 8px 4px 8px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  white-space: normal;
}

.project-milestone-entry-dot {
  width: 12px;
  height: 12px;
  margin-top: 4px;
  border: 2px solid #8fa6c7;
  border-radius: 50%;
  background: #fff;
}

.project-milestone-entry.completed .project-milestone-entry-dot {
  border-color: #3f70cf;
  background: #3f70cf;
}

.project-milestone-entry.danger .project-milestone-entry-dot {
  border-color: #c65c5c;
  background: #fff3f3;
}

.project-milestone-entry-copy {
  display: grid;
  min-width: 0;
  gap: 7px;
  overflow-wrap: anywhere;
}

.project-milestone-entry strong {
  font-size: 14px;
  line-height: 1.5;
}

.project-milestone-entry small {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  color: #77818f;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
}

.project-milestone-entry.completed .project-milestone-entry-status {
  color: #315fb5;
}

.project-milestone-entry.danger .project-milestone-entry-status {
  color: #b9574c;
}

.workspace .project-milestone-entry:hover {
  background: #f7f9fc;
}

.workspace .project-milestone-entry:focus-visible {
  outline: 2px solid #3f70cf;
  outline-offset: 3px;
}

.project-schedule-workspace .project-gantt-workstream {
  display: block;
  border: 0;
  border-radius: 0;
  background: none;
}

.project-schedule-workspace .project-gantt-workstream > header {
  padding: 8px 0 4px;
  border: 0;
  background: none;
}

.project-schedule-workspace .project-gantt-workstream > header strong {
  color: var(--muted);
  font-size: 11px;
}

.project-schedule-workspace .project-gantt-workstream > header span {
  font-size: 10px;
}

.workspace .project-schedule-workspace .project-gantt-row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  align-items: stretch;
  width: 100%;
  height: auto;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid #edf0f2;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  box-shadow: none;
  text-align: left;
}

.workspace .project-schedule-workspace button.project-gantt-row:hover {
  background: #f7f9fc;
}

.workspace .project-schedule-workspace button.project-gantt-row:focus-visible {
  outline: 2px solid #315fb5;
  outline-offset: 1px;
}

.project-schedule-workspace .project-gantt-range {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.project-schedule-workspace .project-gantt-label {
  padding: 6px 8px 6px 0;
  gap: 0;
}

.project-schedule-workspace .project-gantt-label strong,
.project-schedule-workspace .project-gantt-label span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1.5;
}

.project-schedule-workspace .project-gantt-label strong {
  font-size: 12px;
  font-weight: 500;
}

.project-schedule-workspace .project-gantt-label span,
.project-schedule-workspace .project-gantt-label time {
  color: var(--muted);
  font-size: 10px;
  overflow-wrap: anywhere;
}

.project-schedule-workspace .project-gantt-track {
  overflow: visible;
  margin-inline: 8px;
}

.project-schedule-workspace .project-gantt-view > .project-schedule-axis {
  margin-left: 200px;
  margin-right: 8px;
}

.project-schedule-workspace .project-gantt-bar {
  top: calc(50% - 7px);
  height: 14px;
  padding: 0;
  min-height: 0;
  min-width: 2px;
}

.project-schedule-workspace .project-gantt-bar.fixed {
  background: #4d85b2;
}

.project-schedule-workspace .project-gantt-bar.is-deadline {
  width: 10px;
  min-width: 10px;
  height: 10px;
  top: calc(50% - 5px);
  border-radius: 2px;
  transform: translateX(-50%) rotate(45deg);
}

.project-schedule-workspace .project-gantt-bar:focus-visible {
  outline: 2px solid #315fb5;
  outline-offset: 4px;
}

.project-schedule-workspace .project-gantt-legend {
  margin-left: 0;
  font-size: 11px;
}

@media (max-width: 760px) {
  .project-progress-dynamics-layout {
    gap: 28px;
  }

  .project-milestone-date-group {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .project-milestone-date-group > time {
    padding-top: 0;
  }

  .project-milestone-date-group > ul::before {
    bottom: 16px;
  }

  .workspace .project-schedule-workspace .project-gantt-row {
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 8px;
  }

  .project-schedule-workspace .project-gantt-view > .project-schedule-axis {
    margin-left: 116px;
  }

  .project-schedule-workspace .project-schedule-axis > span {
    font-size: 9px;
  }
}

@media (max-width: 480px) {
  .project-schedule-workspace .project-schedule-axis > span:nth-of-type(even) {
    display: none;
  }

  .project-schedule-workspace .project-schedule-axis > span {
    font-size: 10px;
  }
}

/* Progress views occupy the same full-width area; focus only changes emphasis. */
.project-progress-dynamics-layout.is-tabbed {
  display: block;
  padding-top: 12px;
}

.project-progress-tabs {
  display: flex;
  gap: 24px;
  margin-bottom: 18px;
  border-bottom: 1px solid #edf0f4;
}

.workspace .project-progress-tabs > button {
  height: auto;
  min-height: 40px;
  padding: 8px 0;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  font-size: 13px;
}

.workspace .project-progress-tabs > button.active {
  border-bottom-color: #3f70cf;
  color: #315fb5;
}

.workspace .project-progress-tabs > button:focus-visible {
  outline: 2px solid #3f70cf;
  outline-offset: 3px;
}

.project-progress-dynamics-layout.is-tabbed > [hidden] {
  display: none !important;
}

.project-progress-dynamics-layout.is-tabbed > .project-schedule-workspace {
  padding: 0;
  border: 0;
}

.is-tabbed .project-schedule-heading {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 0 12px;
}

.workspace .is-tabbed .project-schedule-heading > button {
  width: auto;
  height: auto;
  min-height: 36px;
  padding: 6px 12px;
  font-size: 12px;
}

.is-tabbed .project-milestone-focus-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
}

.workspace .project-milestone-focus-switch > input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.project-milestone-focus-track {
  display: inline-block;
  flex-shrink: 0;
  width: 30px;
  height: 18px;
  padding: 3px;
  border-radius: 12px;
  background: #cbd1da;
}

.project-milestone-focus-track::after {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  content: "";
}

.project-milestone-focus-switch > input:checked + .project-milestone-focus-track {
  background: #3f70cf;
}

.project-milestone-focus-switch > input:checked + .project-milestone-focus-track::after {
  transform: translateX(12px);
}

.project-milestone-focus-switch > input:focus-visible + .project-milestone-focus-track {
  outline: 2px solid #315fb5;
  outline-offset: 3px;
}

.project-milestone-focus-switch > input:disabled ~ span {
  opacity: 0.5;
}

.workspace .is-tabbed .project-gantt-row {
  grid-template-columns: 260px minmax(0, 1fr);
}

.is-tabbed .project-gantt-view > .project-schedule-axis {
  margin-left: 280px;
}

.is-milestone-focus .project-gantt-row:not([data-gantt-source="milestone"]) .project-gantt-label,
.is-milestone-focus .project-gantt-workstream:not(.is-milestone-stream) > header {
  opacity: 0.42;
}

.is-milestone-focus .project-gantt-row:not([data-gantt-source="milestone"]) .project-gantt-bar {
  opacity: 0.18;
}

.workspace .is-milestone-focus .project-gantt-row[data-gantt-source="milestone"] {
  background: #f3f7ff;
}

.is-milestone-focus .project-gantt-row[data-gantt-source="milestone"] .project-gantt-label strong {
  font-weight: 700;
}

.is-milestone-focus .project-gantt-row[data-gantt-source="milestone"] .project-gantt-bar {
  box-shadow: 0 0 0 3px #e0e9f8;
}

.is-milestone-focus .project-gantt-row:is(:hover, :focus-visible) .project-gantt-label,
.is-milestone-focus .project-gantt-row:is(:hover, :focus-visible) .project-gantt-bar {
  opacity: 1;
}

@media (max-width: 760px) {
  .workspace .is-tabbed .project-gantt-row {
    grid-template-columns: 112px minmax(0, 1fr);
  }

  .is-tabbed .project-gantt-view > .project-schedule-axis {
    margin-left: 128px;
  }
}

/* Customer quotations and supplier inquiries share a page, not a data table. */
.project-quotation-inquiry-workspace {
  display: grid;
  min-width: 0;
  gap: 32px;
  padding-top: 28px;
}

.project-quotation-inquiry-workspace > section {
  min-width: 0;
}

.project-quotation-inquiry-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 16px;
}

.project-quotation-inquiry-heading h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}

.project-quotation-inquiry-heading a {
  color: #315fb5;
  font-size: 12px;
  text-underline-offset: 3px;
}

.project-supplier-inquiry-section {
  padding-top: 28px;
  border-top: 1px solid #e5e8ee;
}

.project-quotation-inquiry-workspace .table-scroll {
  min-width: 0;
  max-width: 100%;
}

.project-client-quotation-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-client-quotation-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 32px;
  align-items: center;
  padding: 16px 0;
}

.project-client-quotation-row + .project-client-quotation-row {
  border-top: 1px solid #edf0f4;
}

.project-client-quotation-identity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-width: 0;
  font-size: 15px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.project-client-quotation-identity .stage-pill {
  flex: none;
}

.workspace .project-quotation-preview-link {
  height: auto;
  min-width: 0;
  padding: 0;
  border-radius: 2px;
  background: transparent;
  color: var(--text);
  font-size: inherit;
  font-weight: 700;
  line-height: inherit;
  text-align: left;
  overflow-wrap: anywhere;
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}

.workspace .project-quotation-preview-link:hover {
  background: transparent;
  color: var(--text);
  text-decoration-line: underline;
}

.project-quotation-preview-link:focus-visible,
.project-quotation-preview-dialog :is(button, a):focus-visible {
  outline: 2px solid #3f70cf;
  outline-offset: 4px;
}

.project-quotation-preview-dialog {
  width: min(1120px, calc(100vw - 32px));
  max-width: none;
  height: min(900px, calc(100dvh - 40px));
  max-height: none;
  margin: auto;
  padding: 0;
  border: 1px solid #dde2e9;
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  overflow: hidden;
  box-shadow: 0 24px 80px #14233d33;
}

.project-quotation-preview-dialog[open] {
  display: flex;
  flex-direction: column;
}

.project-quotation-preview-dialog::backdrop {
  background: #17213080;
}

.project-quotation-preview-header {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid #e6eaf0;
}

.project-quotation-preview-header > div:first-child {
  min-width: 0;
}

.project-quotation-preview-header h2 {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
}

.project-quotation-preview-header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.project-quotation-preview-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 18px;
}

.project-quotation-preview-actions a {
  color: #3565bb;
  font-size: 13px;
  white-space: nowrap;
}

.project-quotation-preview-actions .icon-button {
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 24px;
}

.project-quotation-preview-body {
  display: flex;
  flex: 1;
  min-height: 0;
  background: #f3f5f8;
  overflow: auto;
}

.project-quotation-preview-body iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #f3f5f8;
}

.project-quotation-preview-message {
  margin: auto;
  padding: 24px;
  color: var(--muted);
  text-align: center;
  line-height: 1.7;
}

.project-quotation-preview-message p {
  margin: 0 0 16px;
}

@media (max-width: 600px) {
  .project-quotation-preview-dialog {
    width: calc(100vw - 16px);
    height: calc(100dvh - 16px);
    border-radius: 8px;
  }

  .project-quotation-preview-header {
    padding: 12px;
  }

  .project-quotation-preview-header h2 {
    font-size: 15px;
  }

  .project-quotation-preview-actions {
    gap: 8px;
  }
}

.project-client-quotation-updated {
  grid-column: 1;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.project-client-quotation-total {
  grid-column: 2;
  grid-row: 1 / 3;
  display: grid;
  gap: 4px;
  margin: 0;
  text-align: right;
}

.project-client-quotation-total dt {
  color: var(--muted);
  font-size: 12px;
}

.project-client-quotation-total dd {
  margin: 0;
  font-size: 22px;
  font-weight: 650;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.project-client-quotation-empty {
  padding: 16px 0;
  color: var(--muted);
  font-size: 13px;
}

.project-supplier-inquiry-table {
  table-layout: fixed;
}

.project-supplier-inquiry-table th {
  height: auto;
  padding: 12px 16px;
  background: #fafbfc;
  font-weight: 500;
}

.project-supplier-inquiry-table td {
  height: auto;
  padding: 18px 16px;
  line-height: 1.6;
  background: white;
  overflow-wrap: anywhere;
}

.project-supplier-inquiry-table th:first-child {
  width: 42%;
}

.project-supplier-inquiry-table .project-supplier-inquiry-count {
  width: 100px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.project-supplier-inquiry-table .project-supplier-inquiry-empty {
  color: var(--muted);
}

.project-supplier-inquiry-table .project-supplier-inquiry-action {
  width: 40px;
  padding: 8px 4px;
  text-align: right;
}

.workspace .project-supplier-inquiry-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  min-height: 32px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #6f7885;
  font-size: 24px;
  line-height: 1;
  box-shadow: none;
}

.project-supplier-inquiry-table tr:is(:hover, :focus-within) td {
  background: #f5f8fc;
}

.project-supplier-inquiry-table tr:is(:hover, :focus-within) .project-supplier-inquiry-open {
  color: #315fb5;
}

.workspace .project-supplier-inquiry-open:focus-visible {
  outline: 2px solid #315fb5;
  outline-offset: 2px;
}

.project-quotation-inquiry-workspace .cost-context-note {
  padding: 0 0 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 12px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.project-quotation-inquiry-workspace .cost-context-note strong {
  font-size: 12px;
}

.project-quotation-inquiry-workspace .form-message:empty {
  display: none;
}

@media (max-width: 600px) {
  .project-client-quotation-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .project-client-quotation-total {
    grid-column: 1;
    grid-row: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 16px;
    margin-top: 8px;
  }

  .project-client-quotation-total dd {
    min-width: 0;
    font-size: 20px;
  }

  .project-supplier-inquiry-table th,
  .project-supplier-inquiry-table td {
    padding: 12px 8px;
  }

  .project-supplier-inquiry-table th:first-child {
    width: 36%;
  }

  .project-supplier-inquiry-table .project-supplier-inquiry-count {
    width: 68px;
  }
}

/* Project creation uses the same lightweight step navigation as quotation editing. */
.project-create-section .form-body {
  gap: 0;
  padding: 0 0 24px;
}

.project-create-page-header {
  grid-column: 1 / -1;
  padding: 4px 0 16px;
}

.project-create-page-header h2 {
  margin: 0;
  color: var(--text);
  font-size: 22px;
  line-height: 1.3;
}

.project-create-tabs {
  grid-column: 1 / -1;
  grid-row: auto;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line-soft);
}

.project-create-tab-panel {
  display: none;
  grid-column: 1 / -1;
  min-width: 0;
  padding: 22px 0 0;
}

.project-create-tab-panel.active {
  display: block;
}

.project-create-tab-panel > .inline-header {
  margin: 0;
  padding: 0;
  border: 0;
  margin-bottom: 16px;
}

.project-create-tab-panel > .inline-header > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.project-create-tab-panel > .inline-header strong {
  font-size: 16px;
  line-height: 1.35;
}

.project-create-tab-panel > .inline-header p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}

.project-create-tab-panel .project-create-fields,
.project-create-tab-panel .member-rows,
.project-create-tab-panel .session-rows {
  padding: 18px 0 0;
}

.project-create-basic-block + .project-create-basic-block {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
}

.project-create-basic-block > strong {
  display: block;
  color: var(--text);
  font-size: 14px;
  line-height: 1.4;
}

.project-create-tab-panel .project-create-project-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.project-create-tab-panel .project-create-customer-fields {
  align-items: start;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.project-create-tab-panel .project-create-contact-field {
  grid-template-rows: auto;
}

.project-create-tab-panel .project-create-contact-field #contactSelect {
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.project-create-contact-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.project-create-tab-panel .project-create-block-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 16px;
  font-weight: 750;
  line-height: 1.4;
}

.project-create-tab-panel .project-create-block-title::before {
  display: inline-block;
  width: 4px;
  height: 18px;
  flex: 0 0 4px;
  border-radius: 999px;
  background: #3f70cf;
  content: "";
}

.project-create-tab-panel .member-editor {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}

.project-team-pm-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 12px;
  padding-top: 18px;
}

.project-create-tab-panel .session-row.project-create-session-card,
.project-create-tab-panel .session-row.project-create-session-card:has([data-manual-venue-field][hidden]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--sidebar);
}

.project-create-session-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.project-create-session-card-header h4 {
  margin: 0;
  font-size: 15px;
}

.project-create-session-fields {
  display: grid;
  gap: 12px;
}

.project-create-session-location-fields,
.project-create-session-time-fields {
  display: grid;
  gap: 12px;
}

.project-create-session-location-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.project-create-session-time-fields {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.project-create-session-fields label {
  min-width: 0;
}

.project-create-venue-combobox {
  position: relative;
}

.project-create-venue-combobox [data-project-create-venue-search] {
  width: 100%;
}

.project-create-venue-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  max-height: 216px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(31, 35, 43, 0.14);
}

.workspace .project-create-venue-option {
  display: block;
  width: 100%;
  min-height: 34px;
  padding: 7px 9px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.workspace .project-create-venue-option:hover,
.workspace .project-create-venue-option:focus-visible {
  background: #f1f3f6;
  color: var(--text);
}

.project-create-venue-empty {
  display: block;
  padding: 8px 9px;
  color: var(--muted);
  font-size: 13px;
}

.workspace .project-create-session-remove,
.workspace .cost-entry-remove {
  display: inline-grid;
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  place-items: center;
}

.workspace .project-create-session-remove:hover,
.workspace .project-create-session-remove:focus-visible,
.workspace .cost-entry-remove:hover,
.workspace .cost-entry-remove:focus-visible {
  background: transparent;
  color: var(--red-text);
}

.project-create-session-remove svg,
.cost-entry-remove svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.project-create-actions {
  grid-column: 1 / -1;
  justify-content: flex-end;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}

.project-create-actions .form-message {
  margin-right: auto;
}

.workspace .project-create-actions [data-project-create-previous],
.workspace .project-create-actions [data-project-create-next],
.workspace .project-create-actions #projectSubmitButton {
  box-sizing: border-box;
  width: 96px;
  min-width: 96px;
  height: 36px;
}

.workspace .project-create-actions [data-project-create-next],
.workspace .project-create-actions #projectSubmitButton {
  border-color: #3f70cf;
  background: #3f70cf;
  color: #fff;
}

.workspace .project-create-actions [data-project-create-next]:hover,
.workspace .project-create-actions #projectSubmitButton:hover {
  border-color: #315fb5;
  background: #315fb5;
}

/* Employee creation follows the same lightweight step navigation as project creation. */
.employee-create-page .employee-create-page-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.employee-create-tab-panel {
  padding-top: 22px;
}

.employee-create-tab-panel.active {
  display: block;
}

.employee-create-page .employee-form-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.employee-create-actions {
  margin-top: 22px;
  border-top: 0;
}

.workspace .employee-create-actions [data-employee-create-previous],
.workspace .employee-create-actions [data-employee-create-next],
.workspace .employee-create-actions #employeeCreateSubmitButton {
  box-sizing: border-box;
  width: 112px;
  min-width: 112px;
  height: 36px;
}

.workspace .employee-create-actions [data-employee-create-next],
.workspace .employee-create-actions #employeeCreateSubmitButton {
  border-color: #3f70cf;
  background: #3f70cf;
  color: #fff;
}

.workspace .employee-create-actions [data-employee-create-next]:hover,
.workspace .employee-create-actions #employeeCreateSubmitButton:hover {
  border-color: #315fb5;
  background: #315fb5;
}

.hr-attendance-tabs {
  margin: 0 0 18px;
}

.attendance-admin-page-header {
  align-items: flex-end;
}

.attendance-admin-page-heading {
  min-width: 0;
}

.attendance-admin-page-heading h2,
.attendance-admin-page-heading p {
  margin: 0;
}

.attendance-admin-page-heading p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.attendance-admin-shell .hr-attendance-tab-panel {
  gap: 0;
  margin-top: 0;
}

.attendance-admin-shell .attendance-regular-panel,
.attendance-admin-shell .hr-attendance-tab-panel > .panel {
  min-width: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.app-shell .attendance-admin-shell.data-directory-panel {
  overflow: visible;
}

.attendance-admin-shell .attendance-record-toolbar {
  position: relative;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin: 0 0 10px;
  padding: 0;
}

.attendance-admin-shell .attendance-record-primary-filter {
  width: auto;
  min-width: 0;
  flex: 1 1 260px;
}

.attendance-admin-shell .attendance-employee-combobox {
  position: relative;
  min-width: 0;
}

.attendance-admin-shell .attendance-employee-combobox::before {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 13px;
  width: 12px;
  height: 12px;
  border: 1.8px solid #77787d;
  border-radius: 50%;
  content: "";
  pointer-events: none;
  transform: translateY(-58%);
}

.attendance-admin-shell .attendance-employee-combobox::after {
  position: absolute;
  z-index: 2;
  top: calc(50% + 4px);
  left: 24px;
  width: 6px;
  height: 1.8px;
  border-radius: 2px;
  background: #77787d;
  content: "";
  pointer-events: none;
  transform: rotate(45deg);
}

.attendance-admin-shell .attendance-employee-combobox > input {
  width: 100%;
  min-height: 38px;
  padding: 8px 13px 8px 35px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  box-shadow: none;
}

.attendance-admin-shell .attendance-employee-combobox > input:hover {
  background: #f7f7f8;
}

.attendance-admin-shell .attendance-employee-combobox > input:focus,
.attendance-admin-shell .attendance-employee-combobox.open > input {
  border-color: #3f70cf;
  outline: 0;
  background: #fff;
  box-shadow: 0 0 0 1px #3f70cf;
}

.attendance-admin-shell .attendance-employee-native-select {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.attendance-admin-shell .attendance-employee-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 5px);
  right: 0;
  left: 0;
  max-height: 238px;
  padding: 5px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 30px rgb(32 31 28 / 14%);
}

.workspace .attendance-admin-shell .attendance-employee-menu button {
  display: block;
  width: 100%;
  min-height: 34px;
  padding: 7px 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
  text-align: left;
}

.workspace .attendance-admin-shell .attendance-employee-menu button:hover,
.workspace .attendance-admin-shell .attendance-employee-menu button.selected,
.workspace .attendance-admin-shell .attendance-employee-menu button.active {
  background: #edf2fb;
  color: #315fb5;
}

.attendance-admin-shell .attendance-employee-empty {
  margin: 0;
  padding: 8px;
  color: var(--muted);
  font-size: 12px;
}

.attendance-admin-shell .attendance-record-filter-row {
  min-width: 0;
  flex-wrap: nowrap;
  gap: 4px;
}

.attendance-admin-shell .attendance-record-select-filter {
  display: block;
  width: auto;
  min-width: 0;
}

.attendance-admin-shell .attendance-record-select-filter select {
  width: auto;
  min-width: 118px;
  min-height: 38px;
  padding: 6px 30px 6px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  box-shadow: none;
}

.attendance-admin-shell .attendance-record-select-filter select:hover,
.attendance-admin-shell .attendance-record-select-filter select:focus {
  outline: 0;
  background: #f1f2f4;
  color: var(--text);
}

.attendance-admin-shell .attendance-ledger-filter-form {
  margin-bottom: 16px;
}

.attendance-admin-shell .attendance-record-table-wrap {
  min-width: 0;
  overflow-x: auto;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.attendance-admin-shell .attendance-admin-results-table,
.attendance-admin-shell .attendance-ledger-table {
  width: 100%;
  table-layout: fixed;
}

.attendance-admin-shell .attendance-admin-results-table th,
.attendance-admin-shell .attendance-admin-results-table td,
.attendance-admin-shell .attendance-ledger-table th,
.attendance-admin-shell .attendance-ledger-table td {
  min-width: 0;
}

.app-shell .attendance-admin-shell .attendance-admin-results-table th,
.app-shell .attendance-admin-shell .attendance-ledger-table th {
  height: 40px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.app-shell .attendance-admin-shell .attendance-admin-results-table td,
.app-shell .attendance-admin-shell .attendance-ledger-table td {
  height: 64px;
  padding: 10px 14px;
  background: transparent;
  vertical-align: middle;
}

.app-shell .attendance-admin-shell .attendance-admin-results-table tbody tr:first-child td,
.app-shell .attendance-admin-shell .attendance-ledger-table tbody tr:first-child td {
  border-top: 0;
}

.app-shell .attendance-admin-shell .attendance-admin-results-table tbody tr:hover td,
.app-shell .attendance-admin-shell .attendance-ledger-table tbody tr:hover td {
  background: #fafafb;
}

.attendance-admin-employee strong,
.attendance-ledger-row td > strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attendance-admin-shell .table-subtext {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attendance-admin-date {
  color: #50535a;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.attendance-admin-results-table .attendance-employee-column {
  width: calc(18% - 8.64px);
}

.attendance-admin-results-table .attendance-department-column {
  width: calc(15% - 7.2px);
}

.attendance-admin-results-table .attendance-date-column {
  width: calc(13% - 6.24px);
}

.attendance-admin-results-table .attendance-schedule-column {
  width: calc(17% - 8.16px);
}

.attendance-admin-results-table .attendance-punch-column {
  width: calc(21% - 10.08px);
}

.attendance-admin-results-table .attendance-note-column {
  width: calc(16% - 7.68px);
}

.attendance-punch-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.attendance-punch-row > small {
  width: 24px;
  flex: 0 0 24px;
  color: var(--muted);
  font-size: 10px;
}

.attendance-punch-row > strong {
  min-width: 42px;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.app-shell .attendance-admin-shell .attendance-admin-results-table tbody tr.attendance-row-anomalous > td {
  background: #fffbf2;
}

.app-shell .attendance-admin-shell .attendance-admin-results-table tbody tr.attendance-row-anomalous:hover > td {
  background: #fff7e6;
}

@media (max-width: 760px) {
  .workspace > .attendance-page[data-page="attendance-admin"] {
    margin-inline: 0;
  }

  .attendance-admin-page-header {
    align-items: flex-start;
  }

  .attendance-admin-shell .attendance-record-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .attendance-admin-shell .attendance-record-primary-filter {
    width: 100%;
    flex-basis: auto;
  }

  .attendance-admin-shell .attendance-record-filter-row {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .attendance-admin-shell .attendance-record-select-filter,
  .attendance-admin-shell .attendance-record-select-filter select {
    width: 100%;
  }

  .attendance-admin-shell .attendance-record-table-wrap {
    margin-inline: -16px;
    padding-inline: 16px;
    -webkit-overflow-scrolling: touch;
  }
}

.workspace > .page-section.personal-center-page {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
}

.workspace > .page-section[data-page="personal-profile"] {
  --personal-profile-inset: 28px;
}

.workspace .page-section[data-page="personal-profile"] .personal-center-hero {
  align-items: flex-start;
  padding-inline: var(--personal-profile-inset);
}

.workspace .page-section[data-page="personal-profile"] .personal-center-hero h2 {
  margin-top: 0;
}

.workspace .page-section[data-page="personal-profile"] .personal-profile-panel > .panel-header,
.workspace .page-section[data-page="personal-profile"] .personal-profile-form,
.workspace .page-section[data-page="personal-profile"] .gmail-settings-body {
  padding-inline: var(--personal-profile-inset);
}

.workspace .page-section[data-page="personal-profile"] .gmail-settings-panel > .form-message {
  padding-inline: var(--personal-profile-inset);
}

@media (max-width: 760px) {
  .workspace > .page-section[data-page="personal-profile"] {
    --personal-profile-inset: 18px;
  }
}

.workspace .page-section[data-page="personal-profile"] .personal-profile-panel > .panel-header {
  padding-block: 22px 14px;
  border-bottom: 0;
}

.workspace .page-section[data-page="personal-profile"] .personal-profile-panel > .panel-header h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 750;
  line-height: 1.4;
}

.workspace .page-section[data-page="personal-profile"] .personal-profile-panel > .panel-header h2::before {
  width: 4px;
  height: 18px;
  flex: 0 0 4px;
  border-radius: 999px;
  background: #3f70cf;
  content: "";
}

.personal-profile-subsection {
  display: grid;
  min-width: 0;
  gap: 12px;
  padding-top: 8px;
}

.personal-profile-subsection h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 16px;
  font-weight: 750;
  line-height: 1.4;
}

.personal-profile-subsection h3::before {
  width: 4px;
  height: 18px;
  flex: 0 0 4px;
  border-radius: 999px;
  background: #3f70cf;
  content: "";
}

.personal-profile-readonly-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  gap: 12px;
}

.personal-profile-readonly-grid > div {
  display: grid;
  min-width: 0;
  gap: 6px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}

.personal-profile-readonly-grid dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.personal-profile-readonly-grid dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

.personal-profile-readonly-note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.personal-profile-wide {
  grid-column: 1 / -1;
}

@media (max-width: 760px) {
  .personal-profile-readonly-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .personal-profile-wide {
    grid-column: auto;
  }
}

.attendance-admin-shell {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}

.attendance-admin-shell .attendance-filter-form,
.attendance-admin-shell .table-scroll {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.attendance-admin-shell .table-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.hr-attendance-tab-panel {
  display: grid;
  min-width: 0;
  gap: 18px;
  margin-top: 20px;
}

.hr-attendance-tab-panel[hidden] {
  display: none;
}

.user-permissions-table-scroll,
.attendance-overtime-scroll,
.night-entry-management-scroll {
  overflow-x: auto;
}

.user-permissions-page > .user-account-list-panel {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.user-permissions-page-header {
  align-items: flex-end;
}

.user-permissions-page-heading {
  min-width: 0;
}

.user-permissions-page-heading h2,
.user-permissions-page-heading p {
  margin: 0;
}

.user-permissions-page-heading p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

#userPermissionMessage {
  margin: -6px 0 10px;
}

#userPermissionMessage:empty {
  margin: 0;
}

.user-permissions-table {
  width: 100%;
  min-width: 1040px;
  table-layout: fixed;
}

.user-permissions-table-scroll {
  border-top: 1px solid var(--line);
}

.app-shell .user-permissions-table th {
  height: 40px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.app-shell .user-permissions-table td {
  height: 64px;
  min-width: 0;
  padding: 10px 14px;
  background: transparent;
  vertical-align: middle;
}

.app-shell .user-permissions-table tbody tr:first-child td {
  border-top: 0;
}

.app-shell .user-permissions-table tbody tr:hover td {
  background: #fafafb;
}

.attendance-page[data-page="attendance-admin"] .attendance-table-scroll th:last-child,
.attendance-page[data-page="attendance-admin"] .attendance-table-scroll td:last-child,
.attendance-overtime-scroll th:last-child,
.attendance-overtime-scroll td:last-child,
.hr-attendance-tab-panel .night-entry-management-scroll th:last-child,
.hr-attendance-tab-panel .night-entry-management-scroll td:last-child,
.leave-management-table-scroll th:last-child,
.leave-management-table-scroll td:last-child {
  width: 88px;
  min-width: 88px;
  max-width: 88px;
}

.attendance-page[data-page="attendance-admin"] .attendance-table-scroll .attendance-admin-results-table th:last-child,
.attendance-page[data-page="attendance-admin"] .attendance-table-scroll .attendance-admin-results-table td:last-child {
  width: 48px;
  min-width: 48px;
  max-width: 48px;
}

.user-permissions-number-column {
  width: 13%;
}

.user-permissions-identity-column {
  width: 18%;
}

.user-permissions-role-column {
  width: 20%;
}

.user-permissions-status-column {
  width: 92px;
}

.user-permissions-login-column {
  width: 156px;
}

.user-permissions-tools-column {
  width: 48px;
}

.user-permissions-table th:last-child,
.user-permissions-table td:last-child {
  width: 48px;
  min-width: 48px;
  max-width: 48px;
  padding-inline: 6px;
  text-align: center;
}

.user-permissions-number,
.user-permissions-login {
  color: #50535a;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.user-permissions-identity strong,
.user-permissions-contact strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-permissions-table .table-subtext {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-permissions-table select[data-user-role] {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.user-permission-pm-code-field {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
}

.user-permission-pm-code-field[hidden] {
  display: none;
}

.user-permission-pm-code-field input {
  width: 34px;
  min-width: 34px;
  height: 26px;
  padding: 3px 6px;
  text-align: center;
  text-transform: uppercase;
}

.user-permissions-role > span,
.user-permissions-role > small {
  display: block;
}

.user-permissions-role > span {
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.user-permissions-role > small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.user-permissions-contact {
  min-width: 0;
  overflow-wrap: anywhere;
}

.user-permissions-status .status-pill {
  min-width: 48px;
  justify-content: center;
}

.user-permissions-action-cell {
  overflow: visible;
}

@media (max-width: 720px) {
  .user-permissions-page-header {
    align-items: flex-start;
  }

  .user-permissions-table-scroll {
    margin-inline: -16px;
    padding-inline: 16px;
    -webkit-overflow-scrolling: touch;
  }
}

.attendance-overtime-scroll table {
  min-width: 720px;
}

.attendance-page[data-page="attendance-admin"] .attendance-overtime-scroll table {
  min-width: 720px;
}

.organization-position-page-header {
  align-items: flex-end;
}

.organization-position-page-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.organization-position-page-heading h2,
.organization-position-page-heading p {
  margin: 0;
}

.organization-position-page-heading p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.organization-position-tabs {
  margin: 0 0 18px;
}

.organization-position-panel[hidden] {
  display: none;
}

.organization-chart {
  min-width: 0;
  overflow: visible;
  padding: 0 0 30px;
}

.organization-chart-canvas {
  width: 100%;
  min-width: 100%;
}

.organization-tree-viewport {
  box-sizing: border-box;
  width: 100%;
  min-height: 520px;
  overflow: auto;
  padding: 34px 28px 42px;
  border: 1px solid #e1e4e9;
  border-radius: 12px;
  background: #fafbfc;
}

.organization-tree-viewport:focus-visible {
  outline: 2px solid #3f70cf;
  outline-offset: 2px;
}

.organization-tree-diagram {
  display: grid;
  width: max-content;
  min-width: 100%;
  justify-items: center;
}

.organization-company-node {
  display: grid;
  position: relative;
  z-index: 2;
  width: 218px;
  min-height: 92px;
  box-sizing: border-box;
  place-content: center;
  gap: 3px;
  padding: 16px 20px;
  border: 1px solid #3f70cf;
  border-radius: 10px;
  background: #3f70cf;
  color: #fff;
  text-align: center;
  box-shadow: 0 8px 22px rgb(63 112 207 / 16%);
}

.organization-company-node > span {
  font-size: 14px;
  font-weight: 800;
}

.organization-company-node > strong {
  font-size: 11px;
  font-weight: 700;
}

.organization-company-node > small {
  color: rgb(255 255 255 / 76%);
  font-size: 10px;
}

.organization-person-node {
  display: grid;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 82px;
  align-content: center;
  gap: 3px;
  padding: 13px 14px;
  border: 1px solid #dce0e7;
  border-radius: 9px;
  background: #fff;
  text-align: left;
}

.organization-person-node strong {
  overflow: hidden;
  font-size: 13px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.organization-person-node span,
.organization-person-node small {
  overflow: hidden;
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.organization-person-node span {
  color: #555b66;
  font-weight: 650;
}

.organization-person-node small {
  color: #858b96;
}

.organization-tree-roots,
.organization-tree-children {
  display: grid;
  position: relative;
  align-items: flex-start;
  width: 100%;
  margin: 0;
  list-style: none;
}

.organization-tree-roots {
  display: flex;
  width: max-content;
  min-width: 100%;
  justify-content: center;
  gap: 16px;
  padding: 48px 0 0;
}

.organization-tree-children {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin-top: 10px;
  padding: 0 0 0 20px;
  border-left: 1px solid #d6dce6;
}

.organization-tree-item {
  display: grid;
  position: relative;
  width: 168px;
  min-width: 0;
  gap: 0;
}

.organization-tree-item::before {
  position: absolute;
  top: 41px;
  left: -18px;
  width: 18px;
  height: 1px;
  background: #cbd1dc;
  content: "";
}

.organization-tree-roots::before {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 25px;
  background: #cbd1dc;
  content: "";
}

.organization-tree-roots::after {
  position: absolute;
  top: 24px;
  right: 84px;
  left: 84px;
  height: 1px;
  background: #cbd1dc;
  content: "";
}

.organization-tree-roots > .organization-tree-item::before {
  top: -24px;
  left: 50%;
  width: 1px;
  height: 24px;
}

.organization-tree-roots > .organization-tree-item > .organization-person-node {
  border-color: #b9c9e4;
  background: #f8faff;
}

.organization-tree-roots:has(> .organization-tree-item:only-child)::after {
  display: none;
}

.organization-department-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 22px 0;
}

.organization-department-grid[hidden] {
  display: none;
}

.workspace .organization-department-card {
  display: flex;
  min-width: 0;
  min-height: 164px;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: column;
  padding: 18px;
  border: 1px solid #e0e3e9;
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  text-align: left;
  box-shadow: 0 1px 2px rgb(16 24 40 / 3%);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.workspace .organization-department-card:hover {
  border-color: #86a8e7;
  background: #fff;
  color: var(--text);
  box-shadow: 0 8px 22px rgb(28 54 95 / 8%);
  transform: translateY(-1px);
}

.workspace .organization-department-card.active {
  border-color: #7da1e2;
  background: #f6f9ff;
  color: var(--text);
  box-shadow: 0 0 0 2px rgb(63 112 207 / 8%);
}

.workspace .organization-department-card:focus-visible {
  outline: 2px solid #3f70cf;
  outline-offset: 2px;
}

.organization-department-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.organization-department-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 11px;
}

.organization-department-identity > span:last-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.organization-department-initial {
  display: inline-flex;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: #eaf1ff;
  color: #3f70cf;
  font-size: 13px;
  font-weight: 800;
}

.organization-department-card.unassigned .organization-department-initial {
  background: #f1f2f4;
  color: #737780;
}

.organization-department-identity strong {
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.organization-department-identity small,
.organization-department-count small,
.organization-department-lead small {
  color: #858b96;
  font-size: 10px;
  font-weight: 650;
}

.organization-department-count {
  display: grid;
  flex: 0 0 auto;
  justify-items: end;
  gap: 1px;
}

.organization-department-count strong {
  color: #3f70cf;
  font-size: 18px;
  line-height: 1;
}

.organization-department-lead {
  display: grid;
  min-width: 0;
  gap: 4px;
  margin-top: 18px;
}

.organization-department-lead strong {
  overflow: hidden;
  color: #505661;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.organization-department-card-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid #edf0f4;
  color: #3f70cf;
  font-size: 11px;
  font-weight: 700;
}

.organization-department-detail {
  padding: 22px 0 4px;
}

.organization-positions-page.department-detail-mode .organization-position-page-header,
.organization-positions-page.department-detail-mode .organization-position-tabs {
  display: none;
}

.organization-positions-page.department-detail-mode .organization-department-detail {
  padding-top: 0;
}

.organization-department-detail[hidden] {
  display: none;
}

.organization-department-detail-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 76px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--line-soft);
}

.organization-department-detail-header > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.organization-department-detail-header > div > span {
  color: #4770b5;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.organization-department-detail-header h3,
.organization-department-detail-header p {
  margin: 0;
}

.organization-department-detail-header h3 {
  font-size: 20px;
}

.organization-department-detail-header p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.organization-department-detail-count {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: #edf3ff;
  color: #3f70cf;
  font-size: 10px;
  font-weight: 750;
}

.workspace .organization-department-detail-header .quotation-result-back-button {
  position: static;
  flex: 0 0 auto;
}

.organization-department-empty {
  display: grid;
  min-height: 220px;
  place-content: center;
  justify-items: center;
  gap: 6px;
  color: var(--muted);
  text-align: center;
}

.organization-department-empty strong {
  color: var(--text);
  font-size: 14px;
}

.organization-department-empty p {
  max-width: 360px;
  margin: 0;
  font-size: 11px;
  line-height: 1.55;
}

.organization-department-modal {
  width: min(520px, 100%);
}

.organization-department-modal-header > div {
  display: grid;
  gap: 3px;
}

.organization-department-modal-header span {
  color: #4770b5;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.organization-department-modal-header h3,
.organization-department-modal-header p {
  margin: 0;
}

.organization-department-modal-header p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.workspace .organization-department-modal-header .icon-button {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: #69707d;
}

.organization-department-modal-body {
  padding: 22px 20px 26px;
}

.organization-department-modal-body label {
  display: grid;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
}

.organization-department-modal-body input {
  width: 100%;
}

.organization-department-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--line-soft);
  background: #fafbfc;
}

.organization-department-modal-footer .form-message {
  margin-right: auto;
}

.workspace .organization-department-modal-footer button {
  width: auto;
  min-width: 88px;
}

.workspace .organization-department-modal-footer .primary-button {
  border-color: #3f70cf;
  background: #3f70cf;
  color: #fff;
}

.organization-department-members-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
}

.organization-department-members-heading h4 {
  margin: 0;
  font-size: 14px;
}

.organization-department-members-heading > span {
  color: #777e89;
  font-size: 11px;
}

.organization-department-member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.organization-department-person-card {
  display: grid;
  min-height: 190px;
  align-content: center;
  justify-items: center;
  padding: 18px 12px;
  text-align: center;
}

.organization-department-person-avatar {
  position: relative;
  display: inline-grid;
  width: 76px;
  height: 76px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  background: #eaf1ff;
  color: #3f70cf;
  font-size: 22px;
  font-weight: 800;
}

.organization-department-person-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.organization-department-person-name-line {
  display: flex;
  max-width: 100%;
  min-width: 0;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  margin-top: 15px;
  white-space: nowrap;
}

.organization-department-person-name {
  font-size: 14px;
  line-height: 1.4;
}

.organization-department-person-english-name {
  min-width: 0;
  overflow: hidden;
  color: #818792;
  font-size: 11px;
  line-height: 1.45;
  text-overflow: ellipsis;
}

.organization-department-person-title {
  margin-top: 13px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #f2f5f9;
  color: #59616d;
  font-size: 10px;
  font-weight: 700;
}

@media (max-width: 760px) {
  .project-create-tabs {
    gap: 18px;
  }

  .employee-create-tabs {
    gap: 18px;
    overflow-x: auto;
  }

  .employee-create-tabs .quotation-mode-tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .employee-create-tab-panel {
    padding-top: 18px;
  }

  .employee-create-page .employee-form-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .employee-create-page .employee-form-fields .employee-form-wide {
    grid-column: auto;
  }

  .employee-create-actions .form-message {
    width: 100%;
  }

  .hr-attendance-tabs {
    overflow-x: auto;
  }

  .hr-attendance-tabs .subtab-button {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .organization-position-tabs {
    overflow-x: auto;
  }

  .organization-position-tabs .quotation-mode-tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .organization-position-page-header {
    align-items: stretch;
  }

  .organization-position-page-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .organization-position-page-actions .project-list-primary-action {
    width: 100%;
  }

  .organization-chart {
    padding-right: 0;
    padding-left: 0;
  }

  .organization-tree-viewport {
    min-height: 440px;
    padding: 26px 18px 34px;
  }

  .organization-tree-roots {
    justify-content: flex-start;
  }

  .organization-department-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .organization-department-detail-header {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  .organization-department-detail-count {
    grid-column: 2;
    justify-self: start;
  }

  .organization-department-member-grid {
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  }

  .organization-department-modal-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .organization-department-modal-footer .form-message {
    margin-right: 0;
  }

  .workspace .organization-department-modal-footer button {
    width: 100%;
  }

  .project-create-tab-panel {
    padding-top: 18px;
  }

  .project-create-tab-panel > .inline-header {
    align-items: stretch;
    flex-direction: column;
  }

  .project-create-tab-panel > .inline-header button {
    width: 100%;
  }

  .project-create-tab-panel .project-create-fields,
  .project-create-tab-panel .member-rows,
  .project-create-tab-panel .session-rows {
    padding-top: 14px;
  }

  .project-create-tab-panel .project-create-project-fields,
  .project-create-tab-panel .project-create-customer-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-team-pm-fields {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 14px;
  }

  .project-create-session-location-fields,
  .project-create-session-time-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-create-actions {
    flex-direction: row;
  }

  .project-create-actions button {
    width: auto;
  }
}

/* Keep the quotation review header clear of its absolute-positioned back button. */
.workspace .quotation-review-heading {
  align-items: flex-start;
  margin-bottom: 0;
  padding: 4px 0 0 42px;
}

.workspace .quotation-review-heading > div > p {
  display: block;
}
/* Project invoice draft workspace */
.project-invoice-page {
  display: grid;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
  gap: 18px;
}

.project-invoice-page-header {
  align-items: flex-start;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line, #e5e7eb);
}

.project-invoice-workspace,
.project-invoice-draft-form {
  display: grid;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  gap: 16px;
}

.project-invoice-detail-active .project-invoice-page-header {
  display: none;
}

.project-invoice-detail-active {
  gap: 0;
}

.project-invoice-overview {
  display: grid;
  grid-template-columns: minmax(250px, 0.72fr) minmax(620px, 1.7fr);
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e2e5ea;
  border-radius: 12px;
  background: #fff;
}

.project-invoice-balance-summary {
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
  padding: 18px 20px;
  border-right: 1px solid #e8eaee;
  background: #f8faff;
}

.project-invoice-balance-summary span,
.project-invoice-balance-summary small {
  color: #707786;
  font-size: 12px;
}

.project-invoice-balance-summary strong {
  overflow: hidden;
  color: #244f9e;
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-invoice-status-switch {
  display: grid;
  grid-template-columns: repeat(5, minmax(100px, 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
  min-width: 0;
  padding: 8px;
}

.project-invoice-status-switch button {
  position: relative;
  display: grid;
  height: 100%;
  min-width: 0;
  min-height: 66px;
  align-content: center;
  justify-items: start;
  gap: 3px;
  padding: 10px 14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #747984;
  text-align: left;
}

.project-invoice-status-switch button:hover {
  background: #f5f6f8;
}

.project-invoice-status-switch button.active {
  background: #edf3ff;
  color: #315fb5;
}

.project-invoice-status-switch button.active::after {
  position: absolute;
  right: 12px;
  bottom: 0;
  left: 12px;
  height: 2px;
  border-radius: 999px;
  background: #4a78d2;
  content: "";
}

.project-invoice-status-switch button span {
  overflow: hidden;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-invoice-status-switch button strong {
  color: currentColor;
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.project-invoice-list-panel,
.project-invoice-draft-section {
  padding: 0;
  overflow: hidden;
}

.project-invoice-draft-section {
  border: 1px solid #e1e5eb;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 8px rgb(24 33 51 / 3%);
}

.project-invoice-list-panel {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.project-invoice-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 2px 0 10px;
}

.project-invoice-search {
  width: min(520px, 100%);
}

.project-invoice-search input {
  width: 100%;
  min-height: 38px;
  padding-left: 35px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.project-invoice-search input:hover {
  background: #f7f7f8;
}

.project-invoice-search input:focus {
  border-color: #3f70cf;
  background: #fff;
  box-shadow: 0 0 0 1px #3f70cf;
}

.project-invoice-result-count {
  color: #7b808b;
  font-size: 12px;
  white-space: nowrap;
}

.project-invoice-table-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.project-invoice-table {
  width: 100%;
  min-width: 900px;
  table-layout: fixed;
  border-collapse: collapse;
}

.project-invoice-project-column {
  width: 30%;
}

.project-invoice-quotation-column {
  width: 26%;
}

.project-invoice-amount-column {
  width: 22%;
}

.project-invoice-progress-column {
  width: auto;
}

.project-invoice-action-column {
  width: var(--table-tools-column-width);
}

.project-invoice-table th,
.project-invoice-table td {
  box-sizing: border-box;
  min-width: 0;
  padding-right: 14px;
  padding-left: 14px;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
  vertical-align: middle;
}

.project-invoice-table th {
  height: 40px;
  padding-block: 8px;
  border-bottom-color: var(--line);
  color: #66676b;
  font-size: 12px;
  font-weight: 760;
  white-space: nowrap;
}

.project-invoice-record-row td {
  height: 68px;
  padding-block: 9px;
}

.project-invoice-table tbody tr:hover td {
  background: #f8f8f9;
}

.project-invoice-project-cell,
.project-invoice-quotation-cell,
.project-invoice-number-cell,
.project-invoice-progress-cell {
  overflow: hidden;
}

.project-invoice-record-row td > strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-invoice-record-row .table-subtext {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: #818288;
  font-size: 11px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-invoice-number-heading,
.project-invoice-number-cell {
  font-variant-numeric: tabular-nums;
  text-align: right !important;
}

.project-invoice-progress-cell {
  white-space: nowrap;
}

.project-invoice-tools {
  display: inline-flex;
}

.project-invoice-tools .quotation-list-tools-menu {
  right: 0;
  left: auto;
  min-width: 172px;
  max-height: min(360px, calc(100vh - 24px));
  overflow-y: auto;
}

.project-invoice-no-actions {
  color: #a0a1a5;
}

.project-invoice-table td:last-child {
  text-align: right;
  white-space: nowrap;
}

.project-invoice-table .empty-cell {
  height: 72px;
  text-align: center;
}

.project-invoice-pagination {
  padding: 14px 2px 4px;
}

.workspace .project-invoice-pagination button {
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--text);
  box-shadow: none;
}

.workspace .project-invoice-pagination button:hover:not(:disabled) {
  border-color: #c9cdd4;
  background: #f6f7f8;
}

.workspace .project-invoice-pagination button:disabled {
  color: #a2a5ac;
  background: #fafafa;
}

.project-invoice-loading {
  display: grid;
  place-items: center;
  min-height: 180px;
  padding: 28px;
  color: #667085;
}

.project-invoice-draft-form {
  gap: 14px;
  max-width: 1440px;
  margin: 0 auto;
  padding-bottom: 28px;
}

.project-invoice-draft-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(250px, auto);
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 18px 20px;
  overflow: hidden;
  border: 1px solid #dfe5ef;
  border-top: 3px solid #4a78d2;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 20px rgb(27 39 68 / 6%);
}

.project-invoice-draft-hero .quotation-result-back-button {
  position: static;
  align-self: start;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  margin-top: 2px;
}

.project-invoice-draft-identity {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.project-invoice-draft-identity > span {
  color: #3f70cf;
  font-size: 12px;
  font-weight: 760;
}

.project-invoice-draft-identity h3,
.project-invoice-draft-identity p {
  min-width: 0;
  margin: 0;
}

.project-invoice-draft-identity h3 {
  overflow: hidden;
  font-size: 21px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-invoice-draft-identity p {
  overflow: hidden;
  color: #747b88;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-invoice-draft-hero-summary {
  display: grid;
  justify-items: end;
  gap: 3px;
  padding-left: 22px;
  border-left: 1px solid #e7eaf0;
  text-align: right;
}

.project-invoice-draft-hero-summary > span {
  color: #697180;
  font-size: 12px;
  font-weight: 700;
}

.project-invoice-draft-hero-summary > strong {
  color: #244f9e;
  font-size: 27px;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.project-invoice-draft-hero-summary > div {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.project-invoice-draft-hero-summary small {
  color: #747b88;
  font-size: 11px;
}

.project-invoice-draft-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 8px;
  border: 1px solid #e2e6ed;
  border-radius: 12px;
  background: #fff;
  list-style: none;
}

.project-invoice-draft-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 9px 12px;
  border-right: 1px solid #eceef2;
  color: #8a909a;
}

.project-invoice-draft-steps li:last-child {
  border-right: 0;
}

.project-invoice-draft-steps li > span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #f0f2f5;
  color: #777e8a;
  font-size: 12px;
  font-weight: 800;
}

.project-invoice-draft-steps li > div {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.project-invoice-draft-steps li strong,
.project-invoice-draft-steps li small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-invoice-draft-steps li strong {
  color: #59616e;
  font-size: 12px;
}

.project-invoice-draft-steps li small {
  font-size: 11px;
}

.project-invoice-draft-steps li.active {
  border-radius: 8px;
  background: #edf3ff;
  color: #4269b4;
}

.project-invoice-draft-steps li.active > span {
  color: #fff;
  background: #4a78d2;
}

.project-invoice-draft-steps li.active strong,
.project-invoice-draft-steps li.complete strong {
  color: #315b9f;
}

.project-invoice-draft-steps li.complete > span {
  color: #315b9f;
  background: #dfeaff;
}

.project-invoice-draft-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
  align-items: start;
  gap: 18px;
  min-width: 0;
}

.project-invoice-draft-main {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.project-invoice-draft-main > .panel {
  margin: 0;
}

.project-invoice-draft-summary {
  position: sticky;
  top: 16px;
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid #dbe3f1;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 24px rgb(27 39 68 / 7%);
}

.project-invoice-draft-summary-heading {
  display: grid;
  gap: 4px;
  padding: 18px;
  background: #f5f8ff;
}

.project-invoice-draft-summary-heading span,
.project-invoice-draft-summary-context span {
  color: #687181;
  font-size: 11px;
  font-weight: 700;
}

.project-invoice-draft-summary-heading strong {
  color: #244f9e;
  font-size: 26px;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.project-invoice-draft-summary-heading small {
  color: #91600d;
  font-size: 12px;
  font-weight: 700;
}

.project-invoice-draft-summary-breakdown {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 14px 18px;
  border-bottom: 1px solid #eceef2;
}

.project-invoice-draft-summary-breakdown div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.project-invoice-draft-summary-breakdown dt,
.project-invoice-draft-summary-breakdown dd {
  margin: 0;
  font-size: 12px;
}

.project-invoice-draft-summary-breakdown dt {
  color: #687181;
}

.project-invoice-draft-summary-breakdown dd {
  color: #252a32;
  font-weight: 760;
  font-variant-numeric: tabular-nums;
}

.project-invoice-draft-summary-context {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 13px 18px;
  border-bottom: 1px solid #eceef2;
}

.project-invoice-draft-summary-context strong,
.project-invoice-draft-summary-context small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-invoice-draft-summary-context strong {
  color: #303640;
  font-size: 13px;
}

.project-invoice-draft-summary-context small {
  color: #7a818c;
  font-size: 11px;
}

.project-invoice-draft-summary .form-message {
  margin: 0;
  padding: 0 18px;
}

.project-invoice-issued-note {
  color: #217a4b;
  font-size: 12px;
  font-weight: 700;
}

.project-invoice-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 18px;
  border-bottom: 1px solid #e7e9ee;
  background: #fbfcfe;
}

.project-invoice-section-heading > div {
  flex: 1 1 auto;
  min-width: 0;
}

.project-invoice-section-index {
  flex: 0 0 auto;
  padding-top: 2px;
  color: #4a78d2;
  font-size: 12px;
  font-weight: 800;
}

.project-invoice-section-heading h3,
.project-invoice-section-heading p {
  margin: 0;
}

.project-invoice-section-heading h3 {
  color: #262b33;
  font-size: 15px;
}

.project-invoice-section-heading p {
  margin-top: 4px;
  color: #747b88;
  font-size: 12px;
}

.locked-data-note {
  padding: 5px 9px;
  border-radius: 999px;
  color: #475467;
  background: #f2f4f7;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.project-invoice-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  padding: 18px;
}

.project-invoice-fields label,
.project-invoice-note {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: #475467;
  font-size: 13px;
  font-weight: 700;
}

.project-invoice-fields input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.project-invoice-fields input:disabled {
  color: #667085;
  background: #f7f8fa;
}

.project-invoice-review-field small {
  color: #9a650f;
}

.project-invoice-review-input {
  border-color: #e3ad58;
  background: #fffaf1;
  box-shadow: 0 0 0 3px rgb(227 173 88 / 10%);
}

.project-invoice-review-input:focus {
  border-color: #c98621;
  box-shadow: 0 0 0 3px rgb(201 134 33 / 14%);
}

.project-invoice-review-field.preview-passed small {
  color: #157347;
}

.project-invoice-review-input.preview-passed,
.project-invoice-review-input.preview-passed:focus {
  border-color: #57a47a;
  background: #f4fbf7;
  box-shadow: 0 0 0 3px rgb(35 145 91 / 10%);
}

.project-invoice-linked-field {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 8px 0 10px;
  border: 0;
  border-bottom: 1px solid #e2e7ef;
  border-radius: 0;
  color: #344054;
  background: transparent;
}

.project-invoice-linked-field strong {
  overflow: hidden;
  min-width: 0;
  font-size: 14px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-invoice-linked-field span {
  flex: 0 0 auto;
  color: #7a8494;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.project-invoice-linked-field.missing {
  border-bottom-color: #e8d2a8;
  color: #9a650f;
  background: transparent;
}

.project-invoice-fields small,
.project-invoice-note small {
  color: #667085;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
}

.project-invoice-allocation-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 20px;
}

.project-invoice-allocation-fields label {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: #475467;
  font-size: 13px;
  font-weight: 700;
}

.project-invoice-allocation-list {
  display: grid;
  gap: 12px;
  padding: 0 18px 18px;
}

.project-invoice-subsection-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px 12px;
}

.project-invoice-subsection-heading strong {
  color: #344054;
  font-size: 13px;
}

.project-invoice-subsection-heading span,
.project-invoice-subsection-heading small {
  color: #7a8494;
  font-size: 11px;
  font-weight: 600;
}

.project-invoice-subsection-heading small {
  margin-left: 4px;
  font-weight: 500;
}

.project-invoice-allocation-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
  border: 1px solid #dfe3ea;
  border-radius: 12px;
  background: #fbfcfe;
}

.project-invoice-allocation-project,
.project-invoice-allocation-controls label,
.project-invoice-allocation-add label,
.project-invoice-prepaid-field label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: #475467;
  font-size: 13px;
  font-weight: 700;
}

.project-invoice-allocation-project-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.project-invoice-allocation-project-heading strong {
  min-width: 0;
}

.project-invoice-allocation-controls {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(180px, 0.75fr);
  gap: 14px;
  min-width: 0;
}

.project-invoice-allocation-controls input,
.project-invoice-allocation-add select,
.project-invoice-prepaid-field input,
.project-invoice-prepaid-field select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.project-invoice-allocation-project strong,
.project-invoice-allocation-project span,
.project-invoice-allocation-project small {
  overflow-wrap: anywhere;
}

.project-invoice-allocation-project span,
.project-invoice-allocation-project small,
.project-invoice-prepaid-field small {
  color: #667085;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
}

.project-invoice-allocation-anchor {
  flex: 0 0 auto;
  padding: 6px 9px;
  border-radius: 999px;
  background: #eef2f6;
  color: #475467;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.project-invoice-allocation-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  margin: 0 18px 18px;
}

.project-invoice-allocation-add > label {
  color: #475467;
  font-size: 13px;
  font-weight: 700;
}

.project-invoice-allocation-add-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}

.project-invoice-allocation-add-control select {
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  min-height: 44px;
  min-width: 0;
  margin: 0;
  border-radius: 8px 0 0 8px;
}

.project-invoice-allocation-add-control button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 82px;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0 14px;
  white-space: nowrap;
  border: 1px solid #9bb7e8;
  border-left: 0;
  border-radius: 0 8px 8px 0;
  color: #315b9f;
  background: #edf3ff;
  font-weight: 750;
  cursor: pointer;
}

.project-invoice-allocation-add-control button:hover {
  background: #dfeaff;
}

.project-invoice-allocation-add-control button:focus-visible {
  outline: 2px solid #4a78d2;
  outline-offset: 2px;
}

.project-invoice-prepaid-section {
  border-top: 1px solid #e8ebf0;
  background: #fbfcfe;
}

.project-invoice-prepaid-field {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0 18px 18px;
}

.project-invoice-items-table {
  min-width: 720px;
  table-layout: fixed;
}

.project-invoice-item-index-column {
  width: 46px;
}

.project-invoice-item-name-column {
  width: auto;
}

.project-invoice-item-quantity-column,
.project-invoice-item-unit-column {
  width: 68px;
}

.project-invoice-item-price-column {
  width: 132px;
}

.project-invoice-item-amount-column {
  width: 142px;
}

.project-invoice-items-table :is(th, td):first-child,
.project-invoice-items-table :is(th, td):nth-child(3),
.project-invoice-items-table :is(th, td):nth-child(4) {
  padding-inline: 8px;
  text-align: center;
}

.project-invoice-items-table :is(th, td):nth-last-child(-n + 2) {
  text-align: right;
}

.project-invoice-total-box {
  display: grid;
  gap: 10px;
  width: min(420px, calc(100% - 40px));
  margin: 18px 20px 20px auto;
  padding: 16px 18px;
  border-radius: 12px;
  background: #f7f9fc;
}

.project-invoice-total-box div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 13px;
}

.project-invoice-total-box span {
  color: #667085;
}

.project-invoice-total-box strong {
  font-size: 14px;
}

.project-invoice-total-box .grand-total {
  padding-top: 10px;
  border-top: 1px solid #dfe3ea;
  font-size: 14px;
}

.project-invoice-total-box .grand-total strong {
  font-size: 15px;
}

.project-invoice-note {
  padding: 20px;
}

.project-invoice-draft-actions {
  display: grid;
  gap: 8px;
  padding: 16px 18px 18px;
}

.project-invoice-draft-actions button {
  width: 100%;
  min-height: 42px;
  background: #3f70cf;
  box-shadow: 0 5px 14px rgb(63 112 207 / 18%);
}

.project-invoice-draft-actions button:hover {
  background: #315fb5;
}

.project-invoice-draft-actions small {
  color: #777e89;
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
}

.project-invoice-manual-issue,
.project-invoice-ecpay-issue,
.project-invoice-manual-result,
.project-invoice-manual-placeholder {
  overflow: hidden;
}

.project-invoice-manual-warning {
  display: grid;
  gap: 6px;
  margin: 18px 20px 0;
  padding: 14px 16px;
  border: 1px solid #f4c98b;
  border-radius: 10px;
  color: #7a4b10;
  background: #fff8eb;
}

.project-invoice-manual-warning span {
  overflow-wrap: anywhere;
}

.project-invoice-manual-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 20px;
}

.project-invoice-manual-fields label {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: #475467;
  font-size: 13px;
  font-weight: 700;
}

.project-invoice-manual-file {
  grid-column: 1 / -1;
}

.project-invoice-manual-file small {
  color: #667085;
  font-weight: 400;
}

.project-invoice-manual-action {
  display: flex;
  justify-content: flex-end;
  padding: 0 20px 20px;
}

.project-invoice-manual-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr);
  gap: 24px;
  padding: 20px;
  border-color: #a7d9bd;
  background: #f4fbf7;
}

.project-invoice-manual-result h3,
.project-invoice-manual-result p {
  margin: 4px 0 0;
}

.project-invoice-manual-result > div > span {
  color: #217a4b;
  font-weight: 700;
}

.project-invoice-manual-result dl,
.project-invoice-manual-result dl div {
  display: grid;
  gap: 6px;
}

.project-invoice-manual-result dl {
  margin: 0;
}

.project-invoice-manual-result dl div {
  grid-template-columns: 88px minmax(0, 1fr);
}

.project-invoice-manual-result dt {
  color: #667085;
}

.project-invoice-manual-result dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.project-invoice-manual-placeholder {
  padding: 18px 20px;
  color: #667085;
}

.project-invoice-manual-placeholder p {
  margin: 0;
}

.project-invoice-ecpay-status {
  margin: -8px 20px 18px;
  color: #b54708;
  font-size: 13px;
  text-align: right;
}

.project-invoice-ecpay-issue > .project-invoice-section-heading h3 {
  font-size: 14px;
}

.project-invoice-ecpay-issue > .project-invoice-section-heading p,
.project-invoice-ecpay-issue > .project-invoice-section-heading .locked-data-note {
  font-size: 11px;
}

.project-invoice-ecpay-settings {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 20px 0;
}

.project-invoice-ecpay-settings span {
  padding: 5px 8px;
  border: 1px solid #d0d5dd;
  border-radius: 999px;
  color: #475467;
  background: #f9fafb;
  font-size: 11px;
  font-weight: 700;
}

.project-invoice-ecpay-readiness {
  margin: 16px 20px 20px;
  border: 1px solid #e4e7ec;
  border-radius: 12px;
  overflow: hidden;
}

.project-invoice-ecpay-readiness-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid #e4e7ec;
  background: #f9fafb;
}

.project-invoice-ecpay-readiness-heading strong {
  font-size: 13px;
}

.project-invoice-ecpay-readiness-heading span {
  color: #667085;
  font-size: 11px;
}

.project-invoice-ecpay-readiness ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-invoice-ecpay-readiness li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
  padding: 10px 12px;
  border-bottom: 1px solid #eef0f3;
}

.project-invoice-ecpay-readiness li strong {
  font-size: 12px;
}

.project-invoice-ecpay-readiness li:nth-child(odd) {
  border-right: 1px solid #eef0f3;
}

.project-invoice-ecpay-readiness li div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.project-invoice-ecpay-readiness li small {
  color: #667085;
  font-size: 11px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.project-invoice-ecpay-check-icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #fff;
  background: #d92d20;
  font-size: 11px;
  font-weight: 800;
}

.project-invoice-ecpay-readiness li.passed .project-invoice-ecpay-check-icon {
  background: #198754;
}

.project-invoice-ecpay-readiness-note {
  margin: 0;
  padding: 9px 12px;
  color: #667085;
  background: #f9fafb;
  font-size: 11px;
  line-height: 1.5;
}

.project-invoice-delivery {
  display: grid;
  gap: 16px;
  padding: 20px;
}

.project-invoice-delivery-result {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--green-text) 25%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--green-soft) 45%, var(--panel));
}

.project-invoice-delivery-result :is(span, small),
.project-invoice-payment-confirmation p,
.project-invoice-recipient-list small {
  color: var(--muted);
}

.project-invoice-recipient-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.project-invoice-recipient-list legend {
  padding: 0 6px;
  font-weight: 700;
}

.project-invoice-recipient-list label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px;
  border-radius: 8px;
  background: var(--panel-hover);
}

.project-invoice-recipient-list label > span {
  display: grid;
  gap: 3px;
}

.project-invoice-delivery-fields {
  display: grid;
  gap: 12px;
}

.project-invoice-delivery-fields label {
  display: grid;
  gap: 6px;
}

.project-invoice-delivery-fields :is(input, textarea) {
  width: 100%;
}

.project-invoice-delivery-actions {
  display: flex;
  justify-content: flex-end;
}

.project-invoice-payment-confirmation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px;
}

.project-invoice-payment-confirmation :is(h3, p) {
  margin: 0;
}

.project-invoice-payment-confirmation.confirmed {
  border-color: color-mix(in srgb, var(--green-text) 25%, var(--line));
}

.project-invoice-payment-confirmation dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 12px;
  margin: 0;
}

.project-invoice-payment-confirmation dl div {
  display: grid;
  gap: 3px;
}

.project-invoice-payment-confirmation :is(dt, dd) {
  margin: 0;
}

.project-invoice-payment-confirmation dt {
  color: var(--muted);
  font-size: 0.78rem;
}

.customer-credit-company-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.customer-credit-company-list > button {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-hover);
  color: var(--text);
  text-align: left;
  box-shadow: none;
}

.customer-credit-company-list span,
.customer-credit-company-list small,
.customer-credit-company-list em,
.customer-credit-scope-note {
  color: var(--muted);
}

.customer-credit-company-list em {
  font-size: 0.78rem;
  font-style: normal;
}

.customer-credit-company-list > button:hover {
  border-color: var(--accent);
  background: var(--panel);
}

.customer-credit-scope-note {
  margin: 12px 0 0;
  font-size: 0.82rem;
}

.prepaid-credit-modal {
  width: min(1120px, calc(100vw - 36px));
  max-height: calc(100vh - 36px);
  overflow: hidden;
}

.prepaid-credit-modal-body {
  display: grid;
  gap: 18px;
  padding: 20px;
  overflow: auto;
}

.prepaid-credit-modal-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.prepaid-credit-modal-summary > div {
  display: grid;
  gap: 6px;
  padding: 16px;
  border-right: 1px solid var(--line);
}

.prepaid-credit-modal-summary > div:last-child {
  border-right: 0;
}

.prepaid-credit-modal-summary span,
.prepaid-credit-operation-form p,
.prepaid-credit-lot-list small {
  color: var(--muted);
}

.prepaid-credit-modal-section,
.prepaid-credit-operation-form {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

.prepaid-credit-lot-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.prepaid-credit-lot-list article {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--panel-hover);
}

.prepaid-credit-lot-list article > div:first-child,
.prepaid-credit-lot-list dl,
.prepaid-credit-lot-list dl div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.prepaid-credit-lot-list dl {
  margin: 0;
}

.prepaid-credit-lot-list dl div {
  display: grid;
  gap: 2px;
}

.prepaid-credit-lot-list :is(dt, dd) {
  margin: 0;
}

.prepaid-credit-lot-list dt {
  color: var(--muted);
  font-size: 0.78rem;
}

.prepaid-credit-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.prepaid-credit-operation-form {
  display: grid;
  align-content: start;
  gap: 14px;
}

.prepaid-credit-operation-form label {
  display: grid;
  gap: 6px;
}

.prepaid-credit-operation-form :is(input, select, textarea) {
  width: 100%;
}

.prepaid-credit-operation-form.warning-form {
  border-color: color-mix(in srgb, var(--red-text) 28%, var(--line));
}

.prepaid-credit-ledger-table {
  min-width: 900px;
}

.project-prepaid-workspace {
  display: grid;
  gap: 18px;
  padding: 20px;
}

.project-prepaid-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.project-prepaid-heading :is(h3, p),
.project-prepaid-boundary-note {
  margin: 0;
}

.project-prepaid-heading p,
.project-prepaid-summary span,
.project-prepaid-summary small,
.project-prepaid-boundary-note {
  color: var(--muted);
}

.project-prepaid-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.project-prepaid-summary > div {
  display: grid;
  gap: 6px;
  padding: 18px;
  border-right: 1px solid var(--line);
}

.project-prepaid-summary > div:last-child {
  border-right: 0;
}

.project-prepaid-summary > div:nth-child(3n) {
  border-right: 0;
}

.project-prepaid-summary > div:nth-child(n + 4) {
  border-top: 1px solid var(--line);
}

.project-prepaid-summary strong {
  font-size: 1.35rem;
}

.project-prepaid-boundary-note {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--panel-hover);
  font-size: 0.86rem;
}

.project-prepaid-allocations {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.project-prepaid-allocations .project-invoice-section-heading {
  padding: 16px 18px;
}

.project-prepaid-table {
  min-width: 880px;
}

@media (max-width: 760px) {
  .prepaid-credit-modal {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
  }

  .prepaid-credit-modal-summary,
  .prepaid-credit-form-grid,
  .project-prepaid-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .prepaid-credit-modal-summary > div {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .prepaid-credit-modal-summary > div:last-child {
    border-bottom: 0;
  }

  .project-prepaid-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .project-prepaid-summary > div {
    border-top: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .project-prepaid-summary > div:last-child {
    border-bottom: 0;
  }

  .project-invoice-payment-confirmation {
    align-items: stretch;
    flex-direction: column;
  }

  .project-invoice-payment-confirmation dl {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1360px) {
  .project-invoice-draft-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-invoice-draft-summary {
    position: static;
    grid-template-columns: minmax(210px, 0.9fr) minmax(240px, 1fr) minmax(220px, 0.9fr);
  }

  .project-invoice-draft-summary-heading,
  .project-invoice-draft-summary-breakdown,
  .project-invoice-draft-summary-context {
    border-right: 1px solid #eceef2;
    border-bottom: 0;
  }

  .project-invoice-draft-summary-context + .project-invoice-draft-summary-context {
    display: none;
  }

  .project-invoice-draft-summary .form-message {
    grid-column: 1 / -1;
  }

  .project-invoice-draft-actions {
    align-content: center;
  }
}

@media (max-width: 900px) {
  .project-invoice-fields,
  .project-invoice-allocation-fields,
  .project-invoice-manual-fields,
  .project-invoice-manual-result {
    grid-template-columns: 1fr;
  }

  .project-invoice-overview {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-invoice-balance-summary {
    border-right: 0;
    border-bottom: 1px solid #e8eaee;
  }

  .project-invoice-status-switch {
    grid-template-columns: repeat(5, minmax(92px, 1fr));
    overflow-x: auto;
  }

  .project-invoice-allocation-row,
  .project-invoice-allocation-add {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-invoice-allocation-add {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .project-invoice-allocation-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-invoice-allocation-add-control select {
    width: 100%;
  }

  .project-invoice-allocation-anchor {
    justify-self: start;
  }

  .project-invoice-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .project-invoice-search {
    width: 100%;
  }

  .project-invoice-result-count {
    align-self: flex-end;
  }

  .project-invoice-draft-hero {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .project-invoice-draft-hero-summary {
    grid-column: 2;
    justify-items: start;
    padding-top: 12px;
    padding-left: 0;
    border-top: 1px solid #e7eaf0;
    border-left: 0;
    text-align: left;
  }

  .project-invoice-draft-hero-summary > div {
    justify-content: flex-start;
  }

  .project-invoice-draft-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-invoice-draft-steps li {
    border-right: 0;
    border-bottom: 1px solid #eceef2;
  }

  .project-invoice-draft-steps li:last-child {
    border-bottom: 0;
  }

  .project-invoice-draft-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-invoice-draft-summary-heading,
  .project-invoice-draft-summary-breakdown,
  .project-invoice-draft-summary-context {
    border-right: 0;
    border-bottom: 1px solid #eceef2;
  }

  .project-invoice-draft-summary-context + .project-invoice-draft-summary-context {
    display: grid;
  }

  .project-invoice-draft-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .project-invoice-manual-action {
    align-items: stretch;
    flex-direction: column;
  }

  .project-invoice-ecpay-readiness ul {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-invoice-ecpay-readiness li:nth-child(odd) {
    border-right: 0;
  }

}

/* Cost entry workspace: stacked batch-entry deck. */
#costEntryWorkspace .cost-ledger-form {
  width: 100%;
  margin-inline: 0;
  gap: 20px;
  padding-bottom: 0;
}

#costEntryWorkspace .cost-entry-item-identity > span {
  display: block;
  margin-bottom: 5px;
  color: #3f70cf;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.09em;
}

#costEntryWorkspace .reimbursement-subtabs {
  margin-bottom: 0;
}

#costEntryWorkspace .cost-context-step {
  display: grid;
  grid-template-columns: minmax(130px, 160px) minmax(0, 1fr);
  align-items: end;
  gap: 24px;
  padding: 8px 2px 8px;
}

#costEntryWorkspace .cost-context-step-header {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 9px;
}

#costEntryWorkspace .cost-context-step-header > span {
  color: #3f70cf;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
}

#costEntryWorkspace .cost-context-step-header > strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 820;
}

#costEntryWorkspace .cost-context-fields {
  gap: 14px;
  padding: 0;
}

#costEntryWorkspace .cost-context-field-label {
  display: flex;
  min-height: 17px;
  align-items: center;
  gap: 4px;
}

#costEntryWorkspace .cost-context-field-label > span {
  color: #3f70cf;
  font-weight: 900;
}

#costEntryWorkspace .cost-context-fields label,
#costEntryWorkspace .cost-dynamic-fields label,
#costEntryWorkspace .cost-card-supplement-content label {
  min-width: 0;
  color: #65635e;
  font-size: 12px;
  font-weight: 760;
}

#costEntryWorkspace .cost-context-fields input {
  min-height: 44px;
  border-color: transparent;
  border-radius: 6px;
  background: #f4f5f7;
  box-shadow: none;
}

#costEntryWorkspace .cost-context-combobox {
  position: relative;
  min-width: 0;
}

#costEntryWorkspace .cost-context-combobox > input {
  width: 100%;
  padding-right: 40px;
  color: var(--text);
  font-weight: 760;
}

#costEntryWorkspace .cost-context-combobox > input:focus {
  border-color: #7d9edf;
  outline: 3px solid rgb(63 112 207 / 12%);
}

#costEntryWorkspace .cost-context-combobox > input:disabled {
  background: #f3f3f1;
  color: var(--muted);
  cursor: not-allowed;
}

#costEntryWorkspace .cost-context-native-select {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

#costEntryWorkspace .cost-context-combobox-arrow {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 16px;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid #676b72;
  border-bottom: 1.5px solid #676b72;
  pointer-events: none;
  transform: translateY(-70%) rotate(45deg);
  transition: transform 150ms ease;
}

#costEntryWorkspace .cost-context-combobox.open .cost-context-combobox-arrow {
  transform: translateY(-25%) rotate(225deg);
}

#costEntryWorkspace .cost-context-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  max-height: 260px;
  overflow-y: auto;
  padding: 5px;
  border: 1px solid #d7e2f3;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 34px rgb(36 57 94 / 14%);
}

.workspace #costEntryWorkspace .cost-context-menu button {
  display: block;
  width: 100%;
  min-height: 38px;
  padding: 9px 11px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  text-align: left;
  box-shadow: none;
}

.workspace #costEntryWorkspace .cost-context-menu button:hover,
.workspace #costEntryWorkspace .cost-context-menu button.active {
  background: #edf3fd;
  color: #315fb0;
}

.workspace #costEntryWorkspace .cost-context-menu button.selected {
  background: #e5edfb;
  color: #315fb0;
  font-weight: 820;
}

#costEntryWorkspace .cost-context-empty {
  margin: 0;
  padding: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

#costEntryWorkspace .cost-batch-header {
  justify-content: flex-end;
  margin-block: -8px;
  padding: 0 2px;
}

.workspace #costEntryWorkspace .cost-add-item-button {
  display: inline-flex;
  width: auto;
  min-height: 36px;
  align-items: center;
  gap: 5px;
  padding: 6px 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #3f70cf;
  font-size: 13px;
  font-weight: 820;
  box-shadow: none;
}

.workspace #costEntryWorkspace .cost-add-item-button span {
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
}

.workspace #costEntryWorkspace .cost-add-item-button:hover:not(:disabled),
.workspace #costEntryWorkspace .cost-add-item-button:focus-visible {
  background: transparent;
  color: #315fb0;
  text-decoration: underline;
  text-decoration-color: rgb(63 112 207 / 35%);
  text-underline-offset: 5px;
}

#costEntryWorkspace .cost-entry-items {
  --cost-stack-depth: 0px;
  position: relative;
  isolation: isolate;
  display: block;
  min-width: 0;
  padding: var(--cost-stack-depth) 0 0;
}

#costEntryWorkspace .cost-entry-card-backs {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  left: 0;
  height: calc(var(--cost-stack-depth) + 78px);
  pointer-events: none;
}

#costEntryWorkspace .cost-entry-card-back {
  position: absolute;
  height: 78px;
  border: 1px solid rgb(80 124 203 / 18%);
  border-radius: 14px;
  background: #c7d8f4;
  box-shadow: 0 9px 24px rgb(45 79 142 / 11%);
}

#costEntryWorkspace .cost-entry-items.is-transitioning {
  overflow: clip;
}

#costEntryWorkspace .cost-entry-items.is-transitioning .cost-entry-item {
  pointer-events: none;
}

#costEntryWorkspace .cost-entry-item {
  position: relative;
  z-index: 2;
  display: none;
  min-width: 0;
  gap: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid #d7e2f3;
  border-top: 3px solid #3f70cf;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 7px 20px rgb(45 79 142 / 7%);
}

#costEntryWorkspace .cost-entry-item.is-active {
  display: grid;
}

#costEntryWorkspace .cost-entry-item.is-active.is-newly-added {
  animation: cost-card-enter 180ms ease-out;
}

@keyframes cost-card-enter {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

#costEntryWorkspace .cost-entry-item-header {
  align-items: center;
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(90deg, #f7faff 0%, #fff 42%);
}

#costEntryWorkspace .cost-entry-item-identity {
  min-width: 0;
}

#costEntryWorkspace .cost-entry-title-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}

#costEntryWorkspace .cost-entry-title-row h4 {
  overflow: hidden;
  color: var(--text);
  font-size: 17px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#costEntryWorkspace .cost-entry-status {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: #f0f1f2;
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
}

#costEntryWorkspace .cost-entry-status.is-complete {
  background: #e6f3e9;
  color: #347246;
}

#costEntryWorkspace .cost-entry-card-controls {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 780;
}

.workspace #costEntryWorkspace .cost-entry-nav-button,
.workspace #costEntryWorkspace .cost-entry-remove {
  display: inline-grid;
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  place-items: center;
}

#costEntryWorkspace .cost-entry-card-controls > span {
  min-width: 40px;
  text-align: center;
}

.workspace #costEntryWorkspace .cost-entry-nav-button:hover:not(:disabled),
.workspace #costEntryWorkspace .cost-entry-nav-button:focus-visible {
  background: var(--sidebar);
  color: var(--text);
}

.workspace #costEntryWorkspace .cost-entry-remove:hover:not(:disabled),
.workspace #costEntryWorkspace .cost-entry-remove:focus-visible {
  background: #f9e8e8;
  color: var(--red-text);
}

#costEntryWorkspace .cost-entry-nav-button svg,
#costEntryWorkspace .cost-entry-remove svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

#costEntryWorkspace .cost-entry-item-body {
  display: grid;
  gap: 13px;
  padding: 18px 20px 16px;
}

#costEntryWorkspace .cost-card-section-heading {
  display: flex;
  align-items: center;
  gap: 8px;
}

#costEntryWorkspace .cost-card-section-heading > span,
#costEntryWorkspace .cost-card-supplement-title > span {
  color: #3f70cf;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
}

#costEntryWorkspace .cost-card-section-heading > strong,
#costEntryWorkspace .cost-card-supplement-title > strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}

#costEntryWorkspace .cost-dynamic-fields {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px 14px;
  padding: 0;
}

#costEntryWorkspace .cost-card-field-category,
#costEntryWorkspace .cost-card-field-amount,
#costEntryWorkspace .cost-card-field-date,
#costEntryWorkspace .cost-card-field-invoice {
  grid-column: span 4;
}

#costEntryWorkspace .cost-card-field-item,
#costEntryWorkspace .cost-card-field-wide {
  grid-column: span 8;
}

#costEntryWorkspace .cost-card-field-full {
  grid-column: 1 / -1;
}

#costEntryWorkspace .cost-entry-field-label {
  display: flex;
  min-height: 17px;
  align-items: center;
  gap: 4px;
}

#costEntryWorkspace .cost-entry-field-required {
  color: #3f70cf;
  font-weight: 900;
}

#costEntryWorkspace .cost-entry-field-optional {
  margin-left: 2px;
  color: #98999e;
  font-size: 10px;
  font-weight: 700;
}

#costEntryWorkspace .cost-dynamic-fields input:not([type="file"]),
#costEntryWorkspace .cost-dynamic-fields select,
#costEntryWorkspace .cost-card-supplement-content input:not([type="file"]) {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: #f4f5f7;
  color: var(--text);
  box-shadow: none;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

#costEntryWorkspace .cost-dynamic-fields input:not([type="file"]):hover,
#costEntryWorkspace .cost-dynamic-fields select:hover,
#costEntryWorkspace .cost-card-supplement-content input:not([type="file"]):hover {
  background: #eff1f4;
}

#costEntryWorkspace .cost-dynamic-fields input:not([type="file"]):focus,
#costEntryWorkspace .cost-dynamic-fields select:focus,
#costEntryWorkspace .cost-card-supplement-content input:not([type="file"]):focus {
  border-color: #6f94dc;
  outline: 0;
  background: #fff;
  box-shadow: 0 0 0 3px rgb(63 112 207 / 12%);
}

#costEntryWorkspace .cost-card-money-input {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: #edf3fd;
  color: #315fb0;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

#costEntryWorkspace .cost-card-money-input:focus-within {
  border-color: #6f94dc;
  background: #fff;
  box-shadow: 0 0 0 3px rgb(63 112 207 / 12%);
}

#costEntryWorkspace .cost-card-money-input > span {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 850;
}

#costEntryWorkspace .cost-card-money-input input[name="price"] {
  min-width: 0;
  min-height: 40px;
  padding: 7px 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 16px;
  font-weight: 820;
  box-shadow: none;
}

#costEntryWorkspace .cost-card-money-input input[name="price"]:hover,
#costEntryWorkspace .cost-card-money-input input[name="price"]:focus {
  border: 0;
  background: transparent;
  box-shadow: none;
}

#costEntryWorkspace .cost-card-supplement {
  overflow: hidden;
  border-top: 1px solid var(--line-soft);
}

#costEntryWorkspace .cost-card-supplement > summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 2px 0;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
}

#costEntryWorkspace .cost-card-supplement > summary::-webkit-details-marker {
  display: none;
}

#costEntryWorkspace .cost-card-supplement-title,
#costEntryWorkspace .cost-card-supplement-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

#costEntryWorkspace .cost-card-supplement-title > small {
  padding: 2px 6px;
  border-radius: 999px;
  background: #f0f1f2;
  color: #85868b;
  font-size: 9px;
  font-weight: 760;
}

#costEntryWorkspace .cost-card-supplement-meta {
  min-width: 0;
  font-size: 11px;
  font-weight: 650;
}

#costEntryWorkspace .cost-card-supplement-meta > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#costEntryWorkspace .cost-card-supplement-meta svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  transition: transform 160ms ease;
}

#costEntryWorkspace .cost-card-supplement[open] .cost-card-supplement-meta svg {
  transform: rotate(180deg);
}

#costEntryWorkspace .cost-card-supplement-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 1.2fr);
  gap: 14px;
  padding: 10px 0 4px;
}

#costEntryWorkspace .cost-evidence-field {
  position: relative;
}

#costEntryWorkspace .cost-evidence-dropzone {
  display: flex;
  min-height: 58px;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px dashed #c9cdd5;
  border-radius: 7px;
  background: #fafbfc;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

#costEntryWorkspace .cost-evidence-dropzone:hover,
#costEntryWorkspace .cost-evidence-dropzone:focus-visible,
#costEntryWorkspace .cost-evidence-dropzone.is-dragging {
  border-color: var(--muted);
  outline: none;
  background: var(--sidebar);
  color: var(--text);
}

#costEntryWorkspace .cost-evidence-dropzone.has-file {
  border-style: solid;
  border-color: #9dbba5;
  background: #f4faf5;
  color: #347246;
}

#costEntryWorkspace .cost-evidence-dropzone > svg {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

#costEntryWorkspace .cost-evidence-dropzone > span {
  display: grid;
  min-width: 0;
  gap: 4px;
}

#costEntryWorkspace .cost-evidence-dropzone strong {
  overflow: hidden;
  color: currentColor;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#costEntryWorkspace .cost-evidence-dropzone small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

#costEntryWorkspace .cost-evidence-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

#costEntryWorkspace .cost-form-actions {
  position: sticky;
  z-index: 8;
  bottom: 0;
  display: flex;
  min-height: 72px;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
  padding: 12px 2px;
  border-top: 1px solid #e5e1da;
  background: rgb(255 255 255 / 94%);
  box-shadow: none;
  backdrop-filter: blur(10px);
}

#costEntryWorkspace .cost-form-summary {
  display: grid;
  gap: 2px;
  margin-right: 8px;
}

#costEntryWorkspace .cost-form-summary span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 720;
}

#costEntryWorkspace .cost-form-summary strong {
  color: var(--text);
  font-size: 14px;
}

#costEntryWorkspace .cost-form-actions .form-message {
  min-width: 0;
  margin-right: auto;
}

.workspace #costEntryWorkspace #costLedgerSubmitButton {
  width: auto;
  min-width: 116px;
}

@media (max-width: 760px) {
  #costEntryWorkspace .cost-ledger-form { gap: 16px; }
  #costEntryWorkspace .cost-context-step {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding-bottom: 8px;
  }

  #costEntryWorkspace .cost-context-step-header { min-height: 28px; }
  #costEntryWorkspace .cost-batch-header {
    align-items: center;
    justify-content: flex-end;
  }

  #costEntryWorkspace .cost-context-fields,
  #costEntryWorkspace .cost-dynamic-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  #costEntryWorkspace .cost-dynamic-fields .cost-card-field { grid-column: 1; }
  .workspace #costEntryWorkspace .cost-add-item-button { width: auto; min-height: 32px; }

  #costEntryWorkspace .cost-entry-item-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
  }

  #costEntryWorkspace .cost-entry-title-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  #costEntryWorkspace .cost-entry-title-row h4 { max-width: 100%; white-space: normal; }
  #costEntryWorkspace .cost-entry-card-controls { align-self: stretch; justify-content: flex-end; }
  #costEntryWorkspace .cost-entry-item-body { padding: 16px; }
  #costEntryWorkspace .cost-dynamic-fields { gap: 12px; }
  #costEntryWorkspace .cost-card-supplement-content { grid-template-columns: minmax(0, 1fr); }
  #costEntryWorkspace .cost-evidence-dropzone { align-items: flex-start; }
  #costEntryWorkspace .cost-evidence-dropzone strong { white-space: normal; }
  #costEntryWorkspace .cost-form-actions { flex-wrap: wrap; padding: 10px 0; }

  #costEntryWorkspace .cost-form-summary,
  #costEntryWorkspace .cost-form-actions .form-message {
    width: 100%;
    margin-right: 0;
  }

  .workspace #costEntryWorkspace #cancelCostResubmitButton,
  .workspace #costEntryWorkspace #costLedgerSubmitButton { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  #costEntryWorkspace .cost-entry-item.is-newly-added { animation: none; }
}

/* Cost entry workspace: submitted-cost records aligned with the project list. */
#costEntryWorkspace > .reimbursement-records-panel {
  width: 100%;
  margin: 4px 0 0;
}

#costEntryWorkspace .reimbursement-records-table-wrap {
  overflow-x: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#costEntryWorkspace .reimbursement-records-table {
  min-width: 980px;
  table-layout: auto;
}

#costEntryWorkspace .reimbursement-records-table th,
#costEntryWorkspace .reimbursement-records-table td {
  min-width: 0;
}

#costEntryWorkspace .reimbursement-records-table th {
  height: 40px;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: #66676b;
  white-space: nowrap;
}

#costEntryWorkspace .reimbursement-records-table th:nth-child(1),
#costEntryWorkspace .reimbursement-records-table td:nth-child(1) { min-width: 220px; }
#costEntryWorkspace .reimbursement-records-table th:nth-child(2),
#costEntryWorkspace .reimbursement-records-table td:nth-child(2) { min-width: 220px; }
#costEntryWorkspace .reimbursement-records-table th:nth-child(3),
#costEntryWorkspace .reimbursement-records-table td:nth-child(3) { min-width: 120px; }
#costEntryWorkspace .reimbursement-records-table th:nth-child(4),
#costEntryWorkspace .reimbursement-records-table td:nth-child(4) { min-width: 130px; }
#costEntryWorkspace .reimbursement-records-table th:nth-child(5),
#costEntryWorkspace .reimbursement-records-table td:nth-child(5) { min-width: 120px; }
#costEntryWorkspace .reimbursement-records-table th:nth-child(6),
#costEntryWorkspace .reimbursement-records-table td:nth-child(6) { min-width: 150px; }
#costEntryWorkspace .reimbursement-records-table th:nth-child(7),
#costEntryWorkspace .reimbursement-records-table td:nth-child(7) {
  width: 48px;
  min-width: 48px;
}

#costEntryWorkspace .reimbursement-records-table tbody tr:first-child td {
  border-top: 0;
}

#costEntryWorkspace .reimbursement-record-title strong,
#costEntryWorkspace .reimbursement-record-project strong {
  display: block;
  overflow: hidden;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#costEntryWorkspace .reimbursement-record-row .table-subtext {
  overflow: hidden;
  margin-top: 3px;
  color: #818288;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#costEntryWorkspace .reimbursement-record-progress .table-subtext {
  max-width: 150px;
}

#costEntryWorkspace .reimbursement-records-amount {
  font-variant-numeric: tabular-nums;
  font-weight: 760;
  text-align: right;
  white-space: nowrap;
}

#costEntryWorkspace .submitted-cost-tools {
  display: inline-flex;
}

#costEntryWorkspace .reimbursement-records-table .empty-cell {
  height: 44px;
  background: transparent;
}

#costEntryWorkspace > .reimbursement-records-panel > .table-pagination {
  padding: 14px 2px 4px;
}

@media (max-width: 760px) {
  #costEntryWorkspace > .reimbursement-records-panel {
    margin-top: 0;
  }

  #costEntryWorkspace .reimbursement-records-table {
    min-width: 920px;
  }

}

/* Financial requisition: guided application flow. */
#financialRequisitionWorkspace .financial-requisition-form {
  width: 100%;
  margin-inline: 0;
  gap: 18px;
  padding-bottom: 0;
}

#financialRequisitionWorkspace .financial-requisition-entry-flow {
  display: grid;
  min-width: 0;
}

#financialRequisitionWorkspace .financial-requisition-step {
  display: grid;
  grid-template-columns: minmax(190px, 230px) minmax(0, 1fr);
  gap: 32px;
  padding: 26px 2px;
  border-bottom: 1px solid var(--line-soft);
}

#financialRequisitionWorkspace .financial-requisition-step:first-child {
  padding-top: 8px;
}

#financialRequisitionWorkspace .financial-requisition-step-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

#financialRequisitionWorkspace .financial-requisition-step-number {
  flex: 0 0 auto;
  padding-top: 2px;
  color: #3f70cf;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
}

#financialRequisitionWorkspace .financial-requisition-step-header h3,
#financialRequisitionWorkspace .financial-requisition-step-header p {
  margin: 0;
}

#financialRequisitionWorkspace .financial-requisition-step-header h3 {
  color: var(--text);
  font-size: 15px;
  line-height: 1.4;
}

#financialRequisitionWorkspace .financial-requisition-step-header p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
}

#financialRequisitionWorkspace .financial-requisition-step-fields {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 15px 14px;
}

#financialRequisitionWorkspace .financial-requisition-request-fields,
#financialRequisitionWorkspace .financial-requisition-budget-fields,
#financialRequisitionWorkspace .financial-requisition-payment-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#financialRequisitionWorkspace .financial-requisition-step-fields label {
  min-width: 0;
  color: #65666b;
  font-size: 12px;
  font-weight: 720;
}

#financialRequisitionWorkspace .financial-requisition-field-label {
  display: flex;
  min-height: 18px;
  align-items: center;
  gap: 4px;
}

#financialRequisitionWorkspace .financial-requisition-required {
  color: #3f70cf;
  font-weight: 900;
}

#financialRequisitionWorkspace .financial-requisition-optional {
  margin-left: 3px;
  color: #96979c;
  font-size: 10px;
  font-weight: 700;
}

#financialRequisitionWorkspace .financial-requisition-item-field {
  grid-column: 1 / -1;
}

#financialRequisitionWorkspace .financial-requisition-date-field {
  grid-column: 2;
}

#financialRequisitionWorkspace .financial-requisition-step-fields input,
#financialRequisitionWorkspace .financial-requisition-step-fields select {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: #f4f5f7;
  color: var(--text);
  box-shadow: none;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

#financialRequisitionWorkspace .financial-requisition-step-fields input:hover,
#financialRequisitionWorkspace .financial-requisition-step-fields select:hover {
  background: #eff1f4;
}

#financialRequisitionWorkspace .financial-requisition-step-fields input:focus,
#financialRequisitionWorkspace .financial-requisition-step-fields select:focus {
  border-color: #6f94dc;
  outline: 0;
  background: #fff;
  box-shadow: 0 0 0 3px rgb(63 112 207 / 12%);
}

#financialRequisitionWorkspace .financial-requisition-step-fields input::placeholder {
  color: #a1a2a7;
  opacity: 1;
}

#financialRequisitionWorkspace .financial-requisition-money-input {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: #edf3fd;
  color: #315fb0;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

#financialRequisitionWorkspace .financial-requisition-money-input:focus-within {
  border-color: #6f94dc;
  background: #fff;
  box-shadow: 0 0 0 3px rgb(63 112 207 / 12%);
}

#financialRequisitionWorkspace .financial-requisition-money-input > span {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 850;
}

#financialRequisitionWorkspace .financial-requisition-money-input input {
  min-height: 46px;
  padding: 7px 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 18px;
  font-weight: 820;
  box-shadow: none;
}

#financialRequisitionWorkspace .financial-requisition-money-input input:hover,
#financialRequisitionWorkspace .financial-requisition-money-input input:focus {
  border: 0;
  background: transparent;
  box-shadow: none;
}

#financialRequisitionWorkspace .financial-requisition-form-actions {
  justify-content: flex-end;
  min-height: 64px;
  padding: 14px 2px 0;
}

#financialRequisitionWorkspace .financial-requisition-form-actions .form-message {
  margin-right: auto;
}

.workspace #financialRequisitionWorkspace .financial-requisition-form-actions button[type="submit"] {
  width: auto;
  min-width: 146px;
  min-height: 38px;
  padding: 8px 16px;
  border: 0;
  border-radius: 6px;
  background: #3f70cf;
  color: #fff;
  font-size: 12px;
  font-weight: 780;
}

.workspace #financialRequisitionWorkspace .financial-requisition-form-actions button[type="submit"]:hover {
  background: #315fb5;
}

@media (max-width: 900px) {
  #financialRequisitionWorkspace .financial-requisition-step {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}

@media (max-width: 560px) {
  #financialRequisitionWorkspace .financial-requisition-form {
    gap: 14px;
  }

  #financialRequisitionWorkspace .financial-requisition-step {
    padding-block: 20px;
  }

  #financialRequisitionWorkspace .financial-requisition-request-fields,
  #financialRequisitionWorkspace .financial-requisition-budget-fields,
  #financialRequisitionWorkspace .financial-requisition-payment-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  #financialRequisitionWorkspace .financial-requisition-item-field,
  #financialRequisitionWorkspace .financial-requisition-date-field {
    grid-column: 1;
  }

  #financialRequisitionWorkspace .financial-requisition-form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  #financialRequisitionWorkspace .financial-requisition-form-actions .form-message {
    width: 100%;
    margin-right: 0;
  }

  .workspace #financialRequisitionWorkspace .financial-requisition-form-actions button {
    width: 100%;
  }
}

/* Taobao requisition: guided product application flow. */
#taobaoRequisitionWorkspace .taobao-requisition-form {
  width: 100%;
  margin-inline: 0;
  gap: 18px;
  padding-bottom: 0;
}

#taobaoRequisitionWorkspace .taobao-requisition-entry-flow {
  display: grid;
  min-width: 0;
}

#taobaoRequisitionWorkspace .taobao-requisition-step {
  display: grid;
  grid-template-columns: minmax(190px, 230px) minmax(0, 1fr);
  gap: 32px;
  padding: 26px 2px;
  border-bottom: 1px solid var(--line-soft);
}

#taobaoRequisitionWorkspace .taobao-requisition-step:first-child {
  padding-top: 8px;
}

#taobaoRequisitionWorkspace .taobao-requisition-step-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

#taobaoRequisitionWorkspace .taobao-requisition-step-number {
  flex: 0 0 auto;
  padding-top: 2px;
  color: #3f70cf;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
}

#taobaoRequisitionWorkspace .taobao-requisition-step-header h3,
#taobaoRequisitionWorkspace .taobao-requisition-step-header p {
  margin: 0;
}

#taobaoRequisitionWorkspace .taobao-requisition-step-header h3 {
  color: var(--text);
  font-size: 15px;
  line-height: 1.4;
}

#taobaoRequisitionWorkspace .taobao-requisition-step-header p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
}

#taobaoRequisitionWorkspace .taobao-requisition-step-fields {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 15px 14px;
}

#taobaoRequisitionWorkspace .taobao-requisition-product-fields,
#taobaoRequisitionWorkspace .taobao-requisition-budget-fields,
#taobaoRequisitionWorkspace .taobao-requisition-reference-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#taobaoRequisitionWorkspace .taobao-requisition-step-fields label,
#taobaoRequisitionWorkspace .taobao-requisition-upload {
  min-width: 0;
  color: #65666b;
  font-size: 12px;
  font-weight: 720;
}

#taobaoRequisitionWorkspace .taobao-requisition-field-label {
  display: flex;
  min-height: 18px;
  align-items: center;
  gap: 4px;
}

#taobaoRequisitionWorkspace .taobao-requisition-required {
  color: #3f70cf;
  font-weight: 900;
}

#taobaoRequisitionWorkspace .taobao-requisition-optional {
  margin-left: 3px;
  color: #96979c;
  font-size: 10px;
  font-weight: 700;
}

#taobaoRequisitionWorkspace .taobao-requisition-item-field,
#taobaoRequisitionWorkspace .taobao-requisition-reference-wide,
#taobaoRequisitionWorkspace .taobao-requisition-upload {
  grid-column: 1 / -1;
}

#taobaoRequisitionWorkspace .taobao-requisition-step-fields input,
#taobaoRequisitionWorkspace .taobao-requisition-step-fields select {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: #f4f5f7;
  color: var(--text);
  box-shadow: none;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

#taobaoRequisitionWorkspace .taobao-requisition-step-fields input:hover,
#taobaoRequisitionWorkspace .taobao-requisition-step-fields select:hover {
  background: #eff1f4;
}

#taobaoRequisitionWorkspace .taobao-requisition-step-fields input:focus,
#taobaoRequisitionWorkspace .taobao-requisition-step-fields select:focus {
  border-color: #6f94dc;
  outline: 0;
  background: #fff;
  box-shadow: 0 0 0 3px rgb(63 112 207 / 12%);
}

#taobaoRequisitionWorkspace .taobao-requisition-step-fields input::placeholder {
  color: #a1a2a7;
  opacity: 1;
}

#taobaoRequisitionWorkspace .taobao-requisition-money-input {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: #edf3fd;
  color: #315fb0;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

#taobaoRequisitionWorkspace .taobao-requisition-money-input:focus-within {
  border-color: #6f94dc;
  background: #fff;
  box-shadow: 0 0 0 3px rgb(63 112 207 / 12%);
}

#taobaoRequisitionWorkspace .taobao-requisition-money-input > span {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 850;
}

#taobaoRequisitionWorkspace .taobao-requisition-money-input input,
#taobaoRequisitionWorkspace .taobao-requisition-money-input input:hover,
#taobaoRequisitionWorkspace .taobao-requisition-money-input input:focus {
  min-height: 46px;
  padding: 7px 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 18px;
  font-weight: 820;
  box-shadow: none;
}

#taobaoRequisitionWorkspace .taobao-requisition-upload .upload-property-trigger {
  min-height: 42px;
  border: 1px dashed #b9c7df;
  border-radius: 6px;
  background: #f7f9fd;
  color: #4267a8;
}

#taobaoRequisitionWorkspace .taobao-requisition-upload .upload-property-trigger:hover,
#taobaoRequisitionWorkspace .taobao-requisition-upload .upload-property-trigger[aria-expanded="true"] {
  border-color: #6f94dc;
  background: #edf3fd;
  color: #315fb0;
}

#taobaoRequisitionWorkspace .taobao-requisition-upload .upload-property-icon {
  color: currentColor;
}

#taobaoRequisitionWorkspace .taobao-requisition-form-actions {
  justify-content: flex-end;
  min-height: 64px;
  padding: 14px 2px 0;
}

#taobaoRequisitionWorkspace .taobao-requisition-form-actions .form-message {
  margin-right: auto;
}

.workspace #taobaoRequisitionWorkspace .taobao-requisition-form-actions button[type="submit"] {
  width: auto;
  min-width: 146px;
  min-height: 38px;
  padding: 8px 16px;
  border: 0;
  border-radius: 6px;
  background: #3f70cf;
  color: #fff;
  font-size: 12px;
  font-weight: 780;
}

.workspace #taobaoRequisitionWorkspace .taobao-requisition-form-actions button[type="submit"]:hover {
  background: #315fb5;
}

@media (max-width: 900px) {
  #taobaoRequisitionWorkspace .taobao-requisition-step {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}

@media (max-width: 560px) {
  #taobaoRequisitionWorkspace .taobao-requisition-form {
    gap: 14px;
  }

  #taobaoRequisitionWorkspace .taobao-requisition-step {
    padding-block: 20px;
  }

  #taobaoRequisitionWorkspace .taobao-requisition-product-fields,
  #taobaoRequisitionWorkspace .taobao-requisition-budget-fields,
  #taobaoRequisitionWorkspace .taobao-requisition-reference-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  #taobaoRequisitionWorkspace .taobao-requisition-item-field,
  #taobaoRequisitionWorkspace .taobao-requisition-reference-wide,
  #taobaoRequisitionWorkspace .taobao-requisition-upload {
    grid-column: 1;
  }

  #taobaoRequisitionWorkspace .taobao-requisition-form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  #taobaoRequisitionWorkspace .taobao-requisition-form-actions .form-message {
    width: 100%;
    margin-right: 0;
  }

  .workspace #taobaoRequisitionWorkspace .taobao-requisition-form-actions button {
    width: 100%;
  }
}

/* Financial requisition: records aligned with the other reimbursement histories. */
#financialRequisitionWorkspace .financial-requisition-records-panel {
  width: 100%;
  margin: 4px 0 0;
}

#financialRequisitionWorkspace .financial-requisition-records-table-wrap {
  overflow-x: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#financialRequisitionWorkspace .financial-requisition-records-table {
  min-width: 1040px;
  table-layout: auto;
}

#financialRequisitionWorkspace .financial-requisition-records-table th,
#financialRequisitionWorkspace .financial-requisition-records-table td {
  min-width: 0;
}

#financialRequisitionWorkspace .financial-requisition-records-table th {
  height: 40px;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: #66676b;
  white-space: nowrap;
}

#financialRequisitionWorkspace .financial-requisition-records-table th:nth-child(1),
#financialRequisitionWorkspace .financial-requisition-records-table td:nth-child(1) { min-width: 180px; }
#financialRequisitionWorkspace .financial-requisition-records-table th:nth-child(2),
#financialRequisitionWorkspace .financial-requisition-records-table td:nth-child(2) { min-width: 165px; }
#financialRequisitionWorkspace .financial-requisition-records-table th:nth-child(3),
#financialRequisitionWorkspace .financial-requisition-records-table td:nth-child(3) { min-width: 90px; }
#financialRequisitionWorkspace .financial-requisition-records-table th:nth-child(4),
#financialRequisitionWorkspace .financial-requisition-records-table td:nth-child(4) { min-width: 175px; }
#financialRequisitionWorkspace .financial-requisition-records-table th:nth-child(5),
#financialRequisitionWorkspace .financial-requisition-records-table td:nth-child(5) { min-width: 115px; }
#financialRequisitionWorkspace .financial-requisition-records-table th:nth-child(6),
#financialRequisitionWorkspace .financial-requisition-records-table td:nth-child(6) { min-width: 125px; }
#financialRequisitionWorkspace .financial-requisition-records-table th:nth-child(7),
#financialRequisitionWorkspace .financial-requisition-records-table td:nth-child(7) { min-width: 142px; }
#financialRequisitionWorkspace .financial-requisition-records-table th:nth-child(8),
#financialRequisitionWorkspace .financial-requisition-records-table td:nth-child(8) {
  width: 48px;
  min-width: 48px;
}

#financialRequisitionWorkspace .financial-requisition-records-table tbody tr:first-child td {
  border-top: 0;
}

#financialRequisitionWorkspace .financial-requisition-record-row td {
  height: 68px;
  padding-block: 9px;
  vertical-align: middle;
}

#financialRequisitionWorkspace .financial-requisition-record-title strong,
#financialRequisitionWorkspace .financial-requisition-record-project strong,
#financialRequisitionWorkspace .financial-requisition-record-vendor strong,
#financialRequisitionWorkspace .financial-requisition-record-amount strong {
  display: block;
  overflow: hidden;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#financialRequisitionWorkspace .financial-requisition-record-row .table-subtext {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: #818288;
  font-size: 11px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#financialRequisitionWorkspace .financial-requisition-record-vendor {
  max-width: 220px;
}

#financialRequisitionWorkspace .financial-requisition-record-timing {
  color: #5f6065;
  white-space: nowrap;
}

#financialRequisitionWorkspace .financial-requisition-record-amount {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

#financialRequisitionWorkspace .financial-requisition-record-progress .table-subtext {
  max-width: 150px;
}

#financialRequisitionWorkspace .financial-requisition-tools {
  display: inline-flex;
}

#financialRequisitionWorkspace .financial-requisition-tools .quotation-list-tools-menu {
  min-width: 168px;
  max-width: calc(100vw - 16px);
}

#financialRequisitionWorkspace .financial-requisition-records-table .personal-record-tools-column {
  background: transparent;
}

#financialRequisitionWorkspace .financial-requisition-records-table .empty-cell {
  height: 44px;
  background: transparent;
}

#financialRequisitionWorkspace .financial-requisition-records-panel > .table-pagination {
  padding: 14px 2px 4px;
}

@media (max-width: 760px) {
  #financialRequisitionWorkspace .financial-requisition-records-panel {
    margin-top: 0;
  }

  #financialRequisitionWorkspace .financial-requisition-records-table {
    min-width: 980px;
  }
}

/* Daily operating expenses: guided three-step entry flow. */
#dailyOperatingWorkspace .cost-ledger-form {
  width: 100%;
  margin-inline: 0;
  gap: 18px;
  padding-bottom: 0;
}

#dailyOperatingWorkspace .daily-operating-entry-flow {
  display: grid;
  min-width: 0;
}

#dailyOperatingWorkspace .daily-operating-step {
  display: grid;
  grid-template-columns: minmax(190px, 230px) minmax(0, 1fr);
  gap: 32px;
  padding: 26px 2px;
  border-bottom: 1px solid var(--line-soft);
}

#dailyOperatingWorkspace .daily-operating-step:first-child {
  padding-top: 8px;
}

#dailyOperatingWorkspace .daily-operating-step-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

#dailyOperatingWorkspace .daily-operating-step-number {
  flex: 0 0 auto;
  padding-top: 2px;
  color: #3f70cf;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
}

#dailyOperatingWorkspace .daily-operating-step-header h3,
#dailyOperatingWorkspace .daily-operating-step-header p {
  margin: 0;
}

#dailyOperatingWorkspace .daily-operating-step-header h3 {
  color: var(--text);
  font-size: 15px;
  line-height: 1.4;
}

#dailyOperatingWorkspace .daily-operating-step-header p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
}

#dailyOperatingWorkspace .daily-operating-step-fields {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 15px 14px;
}

#dailyOperatingWorkspace .daily-operating-identity-fields,
#dailyOperatingWorkspace .daily-operating-receipt-fields {
  grid-template-columns: minmax(180px, 0.62fr) minmax(320px, 1.38fr);
}

#dailyOperatingWorkspace .daily-operating-amount-fields {
  grid-template-columns: minmax(0, 1fr);
}

#dailyOperatingWorkspace .daily-operating-step-fields label {
  min-width: 0;
  color: #65666b;
  font-size: 12px;
  font-weight: 720;
}

#dailyOperatingWorkspace .daily-operating-field-label {
  display: flex;
  min-height: 18px;
  align-items: center;
  gap: 4px;
}

#dailyOperatingWorkspace .daily-operating-required {
  color: #3f70cf;
  font-weight: 900;
}

#dailyOperatingWorkspace .daily-operating-optional {
  margin-left: 3px;
  color: #96979c;
  font-size: 10px;
  font-weight: 700;
}

#dailyOperatingWorkspace .daily-operating-step-fields input:not([type="file"]),
#dailyOperatingWorkspace .daily-operating-step-fields select {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: #f4f5f7;
  color: var(--text);
  box-shadow: none;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

#dailyOperatingWorkspace .daily-operating-step-fields input:not([type="file"]):hover,
#dailyOperatingWorkspace .daily-operating-step-fields select:hover {
  background: #eff1f4;
}

#dailyOperatingWorkspace .daily-operating-step-fields input:not([type="file"]):focus,
#dailyOperatingWorkspace .daily-operating-step-fields select:focus {
  border-color: #6f94dc;
  outline: 0;
  background: #fff;
  box-shadow: 0 0 0 3px rgb(63 112 207 / 12%);
}

#dailyOperatingWorkspace .daily-operating-step-fields input::placeholder {
  color: #a1a2a7;
  opacity: 1;
}

#dailyOperatingWorkspace .daily-operating-evidence-field {
  grid-column: 1 / -1;
}

#dailyOperatingWorkspace .daily-operating-evidence-box {
  display: grid;
  min-height: 72px;
  grid-template-columns: 24px minmax(0, 1fr) minmax(250px, auto);
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px dashed #c9cdd5;
  border-radius: 7px;
  background: #fafbfc;
}

#dailyOperatingWorkspace .daily-operating-evidence-box > svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: #737780;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

#dailyOperatingWorkspace .daily-operating-evidence-box > span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

#dailyOperatingWorkspace .daily-operating-evidence-box strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 760;
}

#dailyOperatingWorkspace .daily-operating-evidence-box small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}

#dailyOperatingWorkspace .daily-operating-evidence-box input[type="file"] {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #777980;
  font-size: 11px;
}

#dailyOperatingWorkspace .daily-operating-evidence-box input[type="file"]::file-selector-button {
  min-height: 34px;
  margin-right: 9px;
  padding: 6px 10px;
  border: 0;
  border-radius: 5px;
  background: #e9effa;
  color: #315fb0;
  cursor: pointer;
  font: inherit;
  font-weight: 760;
}

#dailyOperatingWorkspace .daily-operating-amount-field {
  width: min(100%, 420px);
}

#dailyOperatingWorkspace .daily-operating-money-input {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: #edf3fd;
  color: #315fb0;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

#dailyOperatingWorkspace .daily-operating-money-input:focus-within {
  border-color: #6f94dc;
  background: #fff;
  box-shadow: 0 0 0 3px rgb(63 112 207 / 12%);
}

#dailyOperatingWorkspace .daily-operating-money-input > span {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 850;
}

#dailyOperatingWorkspace .daily-operating-money-input input:not([type="file"]) {
  min-height: 46px;
  padding: 7px 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 18px;
  font-weight: 820;
  box-shadow: none;
}

#dailyOperatingWorkspace .daily-operating-money-input input:not([type="file"]):hover,
#dailyOperatingWorkspace .daily-operating-money-input input:not([type="file"]):focus {
  border: 0;
  background: transparent;
  box-shadow: none;
}

#dailyOperatingWorkspace .daily-operating-form-actions {
  justify-content: flex-end;
  min-height: 64px;
  padding: 14px 2px 0;
}

#dailyOperatingWorkspace .daily-operating-form-actions .form-message {
  margin-right: auto;
}

.workspace #dailyOperatingWorkspace .daily-operating-form-actions button[type="submit"] {
  width: auto;
  min-width: 112px;
  min-height: 38px;
  padding: 8px 16px;
  border: 0;
  border-radius: 6px;
  background: #3f70cf;
  color: #fff;
  font-size: 12px;
  font-weight: 780;
}

.workspace #dailyOperatingWorkspace .daily-operating-form-actions button[type="submit"]:hover {
  background: #315fb5;
}

@media (max-width: 900px) {
  #dailyOperatingWorkspace .daily-operating-step {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  #dailyOperatingWorkspace .daily-operating-identity-fields,
  #dailyOperatingWorkspace .daily-operating-receipt-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  #dailyOperatingWorkspace .daily-operating-evidence-box {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  #dailyOperatingWorkspace .daily-operating-evidence-box input[type="file"] {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  #dailyOperatingWorkspace .cost-ledger-form {
    gap: 14px;
  }

  #dailyOperatingWorkspace .daily-operating-step {
    padding-block: 20px;
  }

  #dailyOperatingWorkspace .daily-operating-evidence-box {
    grid-template-columns: minmax(0, 1fr);
  }

  #dailyOperatingWorkspace .daily-operating-evidence-box > svg {
    display: none;
  }

  #dailyOperatingWorkspace .daily-operating-form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  #dailyOperatingWorkspace .daily-operating-form-actions .form-message {
    width: 100%;
    margin-right: 0;
  }

  .workspace #dailyOperatingWorkspace .daily-operating-form-actions button[type="submit"] {
    width: 100%;
  }
}

/* Daily operating expenses: records aligned with the submitted-cost table. */
#dailyOperatingWorkspace > .daily-operating-records-panel {
  width: 100%;
  margin: 4px 0 0;
}

#dailyOperatingWorkspace .daily-operating-records-table-wrap {
  overflow-x: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#dailyOperatingWorkspace .daily-operating-records-table {
  min-width: 760px;
  table-layout: auto;
}

#dailyOperatingWorkspace .daily-operating-records-table th,
#dailyOperatingWorkspace .daily-operating-records-table td {
  min-width: 0;
}

#dailyOperatingWorkspace .daily-operating-records-table th {
  height: 40px;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: #66676b;
  white-space: nowrap;
}

#dailyOperatingWorkspace .daily-operating-records-table th:nth-child(1),
#dailyOperatingWorkspace .daily-operating-records-table td:nth-child(1) { min-width: 270px; }
#dailyOperatingWorkspace .daily-operating-records-table th:nth-child(2),
#dailyOperatingWorkspace .daily-operating-records-table td:nth-child(2) { min-width: 120px; }
#dailyOperatingWorkspace .daily-operating-records-table th:nth-child(3),
#dailyOperatingWorkspace .daily-operating-records-table td:nth-child(3) { min-width: 140px; }
#dailyOperatingWorkspace .daily-operating-records-table th:nth-child(4),
#dailyOperatingWorkspace .daily-operating-records-table td:nth-child(4) { min-width: 130px; }
#dailyOperatingWorkspace .daily-operating-records-table th:nth-child(5),
#dailyOperatingWorkspace .daily-operating-records-table td:nth-child(5) { min-width: 150px; }

#dailyOperatingWorkspace .daily-operating-records-table tbody tr:first-child td {
  border-top: 0;
}

#dailyOperatingWorkspace .daily-operating-record-row td {
  height: 62px;
  padding-block: 9px;
}

#dailyOperatingWorkspace .daily-operating-record-title strong {
  display: block;
  overflow: hidden;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#dailyOperatingWorkspace .daily-operating-record-row .table-subtext {
  overflow: hidden;
  margin-top: 3px;
  color: #818288;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#dailyOperatingWorkspace .daily-operating-records-amount {
  font-variant-numeric: tabular-nums;
  font-weight: 760;
  text-align: right;
  white-space: nowrap;
}

#dailyOperatingWorkspace .daily-operating-records-table .empty-cell {
  height: 44px;
  background: transparent;
}

#dailyOperatingWorkspace > .daily-operating-records-panel > .table-pagination {
  padding: 14px 2px 4px;
}

@media (max-width: 760px) {
  #dailyOperatingWorkspace > .daily-operating-records-panel {
    margin-top: 0;
  }
}

/* Reimbursement hub: shared history-table geometry and visual language. */
#costLedgerPanel [data-reimbursement-workspace] > .cost-ledger-form {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

#financialRequisitionWorkspace .financial-requisition-entry-flow,
#dailyOperatingWorkspace .daily-operating-entry-flow {
  width: 100%;
  max-width: none;
  justify-self: stretch;
}

#costLedgerPanel [data-reimbursement-workspace].reimbursement-records-active > .cost-ledger-form {
  width: 100%;
  max-width: none;
  padding-bottom: 0;
}

#costLedgerPanel [data-reimbursement-workspace].reimbursement-records-active .reimbursement-subtabs {
  margin-bottom: 0;
}

#costLedgerPanel [data-reimbursement-workspace] > .reimbursement-history-panel {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 4px 0 0;
  padding-top: 0;
  border-top: 0;
}

#costLedgerPanel .reimbursement-history-table-wrap {
  min-width: 0;
  overflow-x: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#costLedgerPanel .reimbursement-history-table {
  width: 100%;
  table-layout: fixed;
}

#costLedgerPanel .reimbursement-history-table th,
#costLedgerPanel .reimbursement-history-table td {
  min-width: 0;
}

#costLedgerPanel .reimbursement-history-table th {
  height: 40px;
  padding-block: 8px;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: #66676b;
  font-size: 12px;
  font-weight: 760;
  white-space: nowrap;
}

#costLedgerPanel .reimbursement-history-table tbody tr:first-child td {
  border-top: 0;
}

#costLedgerPanel .reimbursement-history-row td {
  height: 68px;
  padding-block: 9px;
  vertical-align: middle;
}

#costLedgerPanel .reimbursement-history-title strong,
#costLedgerPanel .reimbursement-history-project strong,
#costLedgerPanel .reimbursement-history-amount strong,
#costLedgerPanel .petty-cash-history-proof strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#costLedgerPanel .reimbursement-history-row .table-subtext {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: #818288;
  font-size: 11px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#costLedgerPanel .reimbursement-history-date,
#costLedgerPanel .reimbursement-history-amount {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#costLedgerPanel .reimbursement-history-amount {
  font-variant-numeric: tabular-nums;
  font-weight: 760;
  text-align: right;
}

#costLedgerPanel .reimbursement-history-progress .table-subtext {
  max-width: 100%;
}

#costLedgerPanel .reimbursement-history-title,
#costLedgerPanel .reimbursement-history-project,
#costLedgerPanel .reimbursement-history-progress,
#costLedgerPanel .financial-requisition-record-vendor {
  overflow: hidden;
}

#costLedgerPanel .reimbursement-history-progress {
  white-space: nowrap;
}

#costLedgerPanel .reimbursement-history-tools {
  display: inline-flex;
}

#costLedgerPanel .reimbursement-history-table .personal-record-tools-column {
  background: transparent;
}

#costLedgerPanel .reimbursement-history-table .empty-cell {
  height: 44px;
  background: transparent;
}

#costLedgerPanel .reimbursement-history-panel > .table-pagination {
  padding: 14px 2px 4px;
}

#costLedgerPanel .reimbursement-records-table { min-width: 980px; }
#costLedgerPanel .financial-requisition-records-table { min-width: 1040px; }
#costLedgerPanel .taobao-requisition-history-table {
  min-width: 1040px;
  table-layout: fixed;
}
#costLedgerPanel .petty-cash-history-table { min-width: 900px; }
#costLedgerPanel .material-restock-history-table { min-width: 940px; }
#costLedgerPanel .daily-operating-records-table { min-width: 760px; }

/* Keep descriptive columns fluid; reserve only the space each compact field needs. */
#costLedgerPanel .reimbursement-records-table th:nth-child(3),
#costLedgerPanel .reimbursement-records-table td:nth-child(3) { width: 112px; min-width: 112px; }
#costLedgerPanel .reimbursement-records-table th:nth-child(4),
#costLedgerPanel .reimbursement-records-table td:nth-child(4) { width: 120px; min-width: 120px; }
#costLedgerPanel .reimbursement-records-table th:nth-child(5),
#costLedgerPanel .reimbursement-records-table td:nth-child(5) { width: 132px; min-width: 132px; }
#costLedgerPanel .reimbursement-records-table th:nth-child(6),
#costLedgerPanel .reimbursement-records-table td:nth-child(6) { width: 112px; min-width: 112px; }
#costLedgerPanel .reimbursement-records-table th:nth-child(7),
#costLedgerPanel .reimbursement-records-table td:nth-child(7) { width: 48px; min-width: 48px; }

#costLedgerPanel .financial-requisition-records-table th:nth-child(3),
#costLedgerPanel .financial-requisition-records-table td:nth-child(3) { width: 104px; min-width: 104px; }
#costLedgerPanel .financial-requisition-records-table th:nth-child(1),
#costLedgerPanel .financial-requisition-records-table td:nth-child(1),
#costLedgerPanel .financial-requisition-records-table th:nth-child(2),
#costLedgerPanel .financial-requisition-records-table td:nth-child(2),
#costLedgerPanel .financial-requisition-records-table th:nth-child(4),
#costLedgerPanel .financial-requisition-records-table td:nth-child(4) { min-width: 0; }
#costLedgerPanel .financial-requisition-records-table th:nth-child(5),
#costLedgerPanel .financial-requisition-records-table td:nth-child(5) { width: 120px; min-width: 120px; }
#costLedgerPanel .financial-requisition-records-table th:nth-child(6),
#costLedgerPanel .financial-requisition-records-table td:nth-child(6) { width: 132px; min-width: 132px; }
#costLedgerPanel .financial-requisition-records-table th:nth-child(7),
#costLedgerPanel .financial-requisition-records-table td:nth-child(7) { width: 132px; min-width: 132px; }
#costLedgerPanel .financial-requisition-records-table th:nth-child(8),
#costLedgerPanel .financial-requisition-records-table td:nth-child(8) { width: 48px; min-width: 48px; }

#costLedgerPanel .taobao-requisition-history-table th:nth-child(1),
#costLedgerPanel .taobao-requisition-history-table td:nth-child(1) { min-width: 0; }
#costLedgerPanel .taobao-requisition-history-table th:nth-child(2),
#costLedgerPanel .taobao-requisition-history-table td:nth-child(2) { min-width: 0; }
#costLedgerPanel .taobao-requisition-history-table th:nth-child(3),
#costLedgerPanel .taobao-requisition-history-table td:nth-child(3) { width: 110px; min-width: 110px; max-width: 110px; }
#costLedgerPanel .taobao-requisition-history-table th:nth-child(4),
#costLedgerPanel .taobao-requisition-history-table td:nth-child(4) { width: 72px; min-width: 72px; max-width: 72px; }
#costLedgerPanel .taobao-requisition-history-table th:nth-child(5),
#costLedgerPanel .taobao-requisition-history-table td:nth-child(5) { width: 145px; min-width: 145px; max-width: 145px; }
#costLedgerPanel .taobao-requisition-history-table th:nth-child(6),
#costLedgerPanel .taobao-requisition-history-table td:nth-child(6) { width: 135px; min-width: 135px; max-width: 135px; }
#costLedgerPanel .taobao-requisition-history-table th:nth-child(7),
#costLedgerPanel .taobao-requisition-history-table td:nth-child(7) { width: 132px; min-width: 132px; max-width: 132px; }
#costLedgerPanel .taobao-requisition-history-table th:nth-child(8),
#costLedgerPanel .taobao-requisition-history-table td:nth-child(8) { width: 48px; min-width: 48px; max-width: 48px; }

#costLedgerPanel .petty-cash-history-table th:nth-child(1),
#costLedgerPanel .petty-cash-history-table td:nth-child(1) { min-width: 0; }
#costLedgerPanel .petty-cash-history-table th:nth-child(2),
#costLedgerPanel .petty-cash-history-table td:nth-child(2) { min-width: 0; }
#costLedgerPanel .petty-cash-history-table th:nth-child(3),
#costLedgerPanel .petty-cash-history-table td:nth-child(3) { width: 110px; min-width: 110px; }
#costLedgerPanel .petty-cash-history-table th:nth-child(4),
#costLedgerPanel .petty-cash-history-table td:nth-child(4) { width: 130px; min-width: 130px; }
#costLedgerPanel .petty-cash-history-table th:nth-child(5),
#costLedgerPanel .petty-cash-history-table td:nth-child(5) { width: 130px; min-width: 130px; }
#costLedgerPanel .petty-cash-history-table th:nth-child(6),
#costLedgerPanel .petty-cash-history-table td:nth-child(6) { width: 180px; min-width: 180px; }

#costLedgerPanel .material-restock-history-table th:nth-child(1),
#costLedgerPanel .material-restock-history-table td:nth-child(1) { min-width: 0; }
#costLedgerPanel .material-restock-history-table th:nth-child(2),
#costLedgerPanel .material-restock-history-table td:nth-child(2) { min-width: 0; }
#costLedgerPanel .material-restock-history-table th:nth-child(3),
#costLedgerPanel .material-restock-history-table td:nth-child(3) { width: 130px; min-width: 130px; }
#costLedgerPanel .material-restock-history-table th:nth-child(4),
#costLedgerPanel .material-restock-history-table td:nth-child(4) { width: 130px; min-width: 130px; }
#costLedgerPanel .material-restock-history-table th:nth-child(5),
#costLedgerPanel .material-restock-history-table td:nth-child(5) { width: 130px; min-width: 130px; }
#costLedgerPanel .material-restock-history-table th:nth-child(6),
#costLedgerPanel .material-restock-history-table td:nth-child(6) { width: 170px; min-width: 170px; }
#costLedgerPanel .material-restock-history-table th:nth-child(7),
#costLedgerPanel .material-restock-history-table td:nth-child(7) { width: 112px; min-width: 112px; }

#costLedgerPanel .daily-operating-records-table th:nth-child(1),
#costLedgerPanel .daily-operating-records-table td:nth-child(1) { min-width: 0; }
#costLedgerPanel .daily-operating-records-table th:nth-child(2),
#costLedgerPanel .daily-operating-records-table td:nth-child(2) { width: 120px; min-width: 120px; }
#costLedgerPanel .daily-operating-records-table th:nth-child(3),
#costLedgerPanel .daily-operating-records-table td:nth-child(3) { width: 140px; min-width: 140px; }
#costLedgerPanel .daily-operating-records-table th:nth-child(4),
#costLedgerPanel .daily-operating-records-table td:nth-child(4) { width: 130px; min-width: 130px; }
#costLedgerPanel .daily-operating-records-table th:nth-child(5),
#costLedgerPanel .daily-operating-records-table td:nth-child(5) { width: 112px; min-width: 112px; }

@media (max-width: 760px) {
  #costLedgerPanel [data-reimbursement-workspace] > .reimbursement-history-panel {
    margin-top: 0;
  }

  #costLedgerPanel [data-reimbursement-workspace] > .cost-ledger-form {
    width: 100%;
  }
}

/* Petty cash: balance-first, guided expense entry flow. */
#pettyCashWorkspace .petty-cash-form {
  width: 100%;
  margin-inline: 0;
  gap: 18px;
  padding-bottom: 0;
}

#pettyCashWorkspace .petty-cash-wallet-strip {
  display: block;
}

#pettyCashWorkspace .petty-cash-wallet-status,
#pettyCashWorkspace .petty-cash-wallet-card {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 0;
  border-left: 3px solid #3f70cf;
  border-radius: 7px;
  background: #f3f6fc;
}

#pettyCashWorkspace .petty-cash-wallet-status.is-empty {
  border-left-color: #9ba2ad;
  background: #f5f6f8;
}

#pettyCashWorkspace .petty-cash-wallet-status-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: #e7eaf0;
  color: #686e78;
}

#pettyCashWorkspace .petty-cash-wallet-status-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

#pettyCashWorkspace .petty-cash-wallet-status-copy,
#pettyCashWorkspace .petty-cash-wallet-card-copy,
#pettyCashWorkspace .petty-cash-wallet-card-meta {
  display: grid;
  min-width: 0;
  gap: 3px;
}

#pettyCashWorkspace .petty-cash-wallet-status-copy strong,
#pettyCashWorkspace .petty-cash-wallet-card-meta strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 780;
}

#pettyCashWorkspace .petty-cash-wallet-status-copy small,
#pettyCashWorkspace .petty-cash-wallet-card-meta small,
#pettyCashWorkspace .petty-cash-wallet-card-copy small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.5;
}

#pettyCashWorkspace .petty-cash-wallet-card {
  grid-template-columns: minmax(150px, 0.45fr) minmax(240px, 1fr) auto;
}

#pettyCashWorkspace .petty-cash-wallet-card-copy strong {
  color: #315fb0;
  font-size: 22px;
  font-weight: 850;
  letter-spacing: -0.02em;
}

#pettyCashWorkspace .petty-cash-wallet-card.warning {
  border-color: #d29a37;
  background: #fff8e9;
}

#pettyCashWorkspace .petty-cash-wallet-status-tag {
  justify-self: end;
  padding: 5px 8px;
  border-radius: 999px;
  background: #e9ebef;
  color: #686d76;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

#pettyCashWorkspace .petty-cash-wallet-status-tag:not(.warning) {
  background: #e7f3eb;
  color: #397a50;
}

#pettyCashWorkspace .petty-cash-wallet-status.is-empty .petty-cash-wallet-status-tag {
  background: #e9ebef;
  color: #686d76;
}

#pettyCashWorkspace .petty-cash-wallet-status-tag.warning {
  background: #f7e8c7;
  color: #966414;
}

#pettyCashWorkspace .petty-cash-entry-flow {
  display: grid;
  min-width: 0;
}

#pettyCashWorkspace .petty-cash-step,
#pettyCashWorkspace .petty-cash-topup-step {
  display: grid;
  grid-template-columns: minmax(190px, 230px) minmax(0, 1fr);
  gap: 32px;
  padding: 26px 2px;
  border-bottom: 1px solid var(--line-soft);
}

#pettyCashWorkspace .petty-cash-step:first-of-type,
#pettyCashWorkspace .petty-cash-topup-step:first-of-type {
  padding-top: 8px;
}

#pettyCashWorkspace .petty-cash-step-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

#pettyCashWorkspace .petty-cash-step-number {
  flex: 0 0 auto;
  padding-top: 2px;
  color: #3f70cf;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
}

#pettyCashWorkspace .petty-cash-step-header h3,
#pettyCashWorkspace .petty-cash-step-header p {
  margin: 0;
}

#pettyCashWorkspace .petty-cash-step-header h3 {
  color: var(--text);
  font-size: 15px;
  line-height: 1.4;
}

#pettyCashWorkspace .petty-cash-step-header p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
}

#pettyCashWorkspace .petty-cash-step-fields {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 15px 14px;
}

#pettyCashWorkspace .petty-cash-content-fields {
  grid-template-columns: minmax(180px, 0.58fr) minmax(320px, 1.42fr);
}

#pettyCashWorkspace .petty-cash-step-fields label {
  min-width: 0;
  color: #65666b;
  font-size: 12px;
  font-weight: 720;
}

#pettyCashWorkspace .petty-cash-field-label {
  display: flex;
  min-height: 18px;
  align-items: center;
  gap: 4px;
}

#pettyCashWorkspace .petty-cash-required {
  color: #3f70cf;
  font-weight: 900;
}

#pettyCashWorkspace .petty-cash-optional {
  margin-left: 3px;
  color: #96979c;
  font-size: 10px;
  font-weight: 700;
}

#pettyCashWorkspace .petty-cash-step-fields input:not([type="file"]),
#pettyCashWorkspace .petty-cash-step-fields select {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: #f4f5f7;
  color: var(--text);
  box-shadow: none;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

#pettyCashWorkspace .petty-cash-step-fields input:not([type="file"]):hover,
#pettyCashWorkspace .petty-cash-step-fields select:hover {
  background: #eff1f4;
}

#pettyCashWorkspace .petty-cash-step-fields input:not([type="file"]):focus,
#pettyCashWorkspace .petty-cash-step-fields select:focus {
  border-color: #6f94dc;
  outline: 0;
  background: #fff;
  box-shadow: 0 0 0 3px rgb(63 112 207 / 12%);
}

#pettyCashWorkspace .petty-cash-step-fields input::placeholder {
  color: #a1a2a7;
  opacity: 1;
}

#pettyCashWorkspace .petty-cash-money-input {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: #edf3fd;
  color: #315fb0;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

#pettyCashWorkspace .petty-cash-money-input:focus-within {
  border-color: #6f94dc;
  background: #fff;
  box-shadow: 0 0 0 3px rgb(63 112 207 / 12%);
}

#pettyCashWorkspace .petty-cash-money-input > span {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 850;
}

#pettyCashWorkspace .petty-cash-money-input input:not([type="file"]) {
  min-height: 46px;
  padding: 7px 0;
  border: 0;
  background: transparent;
  font-size: 18px;
  font-weight: 820;
  box-shadow: none;
}

#pettyCashWorkspace .petty-cash-money-input input:not([type="file"]):hover,
#pettyCashWorkspace .petty-cash-money-input input:not([type="file"]):focus {
  border: 0;
  background: transparent;
  box-shadow: none;
}

#pettyCashWorkspace .petty-cash-evidence-field,
#pettyCashWorkspace .petty-cash-remark-field {
  grid-column: 1 / -1;
}

#pettyCashWorkspace .petty-cash-evidence-box {
  display: grid;
  min-height: 72px;
  grid-template-columns: 24px minmax(0, 1fr) minmax(250px, auto);
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px dashed #c9cdd5;
  border-radius: 7px;
  background: #fafbfc;
}

#pettyCashWorkspace .petty-cash-evidence-box > svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: #737780;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

#pettyCashWorkspace .petty-cash-evidence-box > span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

#pettyCashWorkspace .petty-cash-evidence-box strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 760;
}

#pettyCashWorkspace .petty-cash-evidence-box small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}

#pettyCashWorkspace .petty-cash-evidence-box input[type="file"] {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #777980;
  font-size: 11px;
}

#pettyCashWorkspace .petty-cash-evidence-box input[type="file"]::file-selector-button {
  min-height: 34px;
  margin-right: 9px;
  padding: 6px 10px;
  border: 0;
  border-radius: 5px;
  background: #e9effa;
  color: #315fb0;
  cursor: pointer;
  font: inherit;
  font-weight: 760;
}

#pettyCashWorkspace .petty-cash-form-actions {
  justify-content: flex-end;
  min-height: 64px;
  padding: 14px 2px 0;
}

#pettyCashWorkspace .petty-cash-form-actions .form-message {
  margin-right: auto;
}

.workspace #pettyCashWorkspace .petty-cash-form-actions button[type="submit"] {
  width: auto;
  min-width: 132px;
  min-height: 38px;
  padding: 8px 16px;
  border: 0;
  border-radius: 6px;
  background: #3f70cf;
  color: #fff;
  font-size: 12px;
  font-weight: 780;
}

.workspace #pettyCashWorkspace .petty-cash-form-actions button[type="submit"]:hover:not(:disabled) {
  background: #315fb5;
}

.workspace #pettyCashWorkspace .petty-cash-form-actions button[type="submit"]:disabled {
  background: #aeb9cc;
  cursor: not-allowed;
}

@media (max-width: 900px) {
  #pettyCashWorkspace .petty-cash-step,
  #pettyCashWorkspace .petty-cash-topup-step {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  #pettyCashWorkspace .petty-cash-content-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #pettyCashWorkspace .petty-cash-evidence-box {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  #pettyCashWorkspace .petty-cash-evidence-box input[type="file"] {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  #pettyCashWorkspace .petty-cash-form {
    gap: 14px;
  }

  #pettyCashWorkspace .petty-cash-wallet-status,
  #pettyCashWorkspace .petty-cash-wallet-card {
    grid-template-columns: minmax(0, 1fr);
  }

  #pettyCashWorkspace .petty-cash-wallet-status-icon {
    display: none;
  }

  #pettyCashWorkspace .petty-cash-wallet-status-tag {
    justify-self: start;
  }

  #pettyCashWorkspace .petty-cash-step,
  #pettyCashWorkspace .petty-cash-topup-step {
    padding-block: 20px;
  }

  #pettyCashWorkspace .petty-cash-step-fields,
  #pettyCashWorkspace .petty-cash-content-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  #pettyCashWorkspace .petty-cash-evidence-box {
    grid-template-columns: minmax(0, 1fr);
  }

  #pettyCashWorkspace .petty-cash-evidence-box > svg {
    display: none;
  }

  #pettyCashWorkspace .petty-cash-form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  #pettyCashWorkspace .petty-cash-form-actions .form-message {
    width: 100%;
    margin-right: 0;
  }

  .workspace #pettyCashWorkspace .petty-cash-form-actions button[type="submit"] {
    width: 100%;
  }
}

/* Petty cash: guided financial top-up flow and transaction history. */
#pettyCashWorkspace .petty-cash-topup-flow {
  display: grid;
  min-width: 0;
}

#pettyCashWorkspace .petty-cash-topup-source-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#pettyCashWorkspace .petty-cash-topup-amount-fields {
  grid-template-columns: minmax(250px, 0.72fr) minmax(320px, 1.28fr);
}

#pettyCashWorkspace .petty-cash-topup-actions {
  justify-content: flex-end;
  min-height: 64px;
  padding: 14px 2px 0;
}

#pettyCashWorkspace .petty-cash-topup-actions .form-message {
  margin-right: auto;
}

.workspace #pettyCashWorkspace .petty-cash-topup-actions #createPettyCashWalletButton {
  width: auto;
  min-width: 154px;
  min-height: 38px;
  padding: 8px 16px;
  border: 0;
  border-radius: 6px;
  background: #3f70cf;
  color: #fff;
  font-size: 12px;
  font-weight: 780;
}

.workspace #pettyCashWorkspace .petty-cash-topup-actions #createPettyCashWalletButton:hover {
  background: #315fb5;
}

#pettyCashWorkspace .petty-cash-transaction-section {
  min-width: 0;
  padding: 30px 2px 0;
}

#pettyCashWorkspace .petty-cash-transaction-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

#pettyCashWorkspace .petty-cash-transaction-header h3,
#pettyCashWorkspace .petty-cash-transaction-header p {
  margin: 0;
}

#pettyCashWorkspace .petty-cash-transaction-header h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
}

#pettyCashWorkspace .petty-cash-transaction-header h3::before {
  width: 3px;
  height: 16px;
  border-radius: 2px;
  background: #3f70cf;
  content: "";
}

#pettyCashWorkspace .petty-cash-transaction-table-wrap {
  min-width: 0;
  overflow-x: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#pettyCashWorkspace .petty-cash-transaction-table {
  width: 100%;
  min-width: 760px;
  table-layout: fixed;
}

#pettyCashWorkspace .petty-cash-transaction-table th,
#pettyCashWorkspace .petty-cash-transaction-table td {
  min-width: 0;
}

#pettyCashWorkspace .petty-cash-transaction-table th {
  height: 40px;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: #66676b;
  white-space: nowrap;
}

#pettyCashWorkspace .petty-cash-transaction-table td {
  height: 56px;
  padding-block: 9px;
}

#pettyCashWorkspace .petty-cash-transaction-table th:nth-child(1),
#pettyCashWorkspace .petty-cash-transaction-table td:nth-child(1) { width: 175px; }
#pettyCashWorkspace .petty-cash-transaction-table th:nth-child(2),
#pettyCashWorkspace .petty-cash-transaction-table td:nth-child(2) { width: 90px; }
#pettyCashWorkspace .petty-cash-transaction-table th:nth-child(3),
#pettyCashWorkspace .petty-cash-transaction-table td:nth-child(3),
#pettyCashWorkspace .petty-cash-transaction-table th:nth-child(4),
#pettyCashWorkspace .petty-cash-transaction-table td:nth-child(4) {
  width: 135px;
  font-variant-numeric: tabular-nums;
  font-weight: 740;
  text-align: right;
  white-space: nowrap;
}
#pettyCashWorkspace .petty-cash-transaction-table th:nth-child(5),
#pettyCashWorkspace .petty-cash-transaction-table td:nth-child(5) { width: 130px; }

#pettyCashWorkspace .petty-cash-transaction-table tbody tr:first-child td {
  border-top: 0;
}

#pettyCashWorkspace .petty-cash-transaction-table .empty-cell {
  height: 52px;
  background: transparent;
  font-weight: 600;
  text-align: center;
}

@media (max-width: 900px) {
  #pettyCashWorkspace .petty-cash-topup-source-fields,
  #pettyCashWorkspace .petty-cash-topup-amount-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  #pettyCashWorkspace .petty-cash-topup-source-fields,
  #pettyCashWorkspace .petty-cash-topup-amount-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  #pettyCashWorkspace .petty-cash-topup-actions {
    align-items: stretch;
    flex-direction: column;
  }

  #pettyCashWorkspace .petty-cash-topup-actions .form-message {
    width: 100%;
    margin-right: 0;
  }

  .workspace #pettyCashWorkspace .petty-cash-topup-actions #createPettyCashWalletButton {
    width: 100%;
  }

  #pettyCashWorkspace .petty-cash-transaction-section {
    padding-top: 24px;
  }
}

/* Production material restock: guided three-step entry flow. */
#materialRestockWorkspace .material-restock-form {
  gap: 18px;
  padding-bottom: 0;
}

#materialRestockWorkspace .material-restock-entry-flow {
  display: grid;
  width: 100%;
  max-width: none;
  min-width: 0;
  justify-self: stretch;
}

#materialRestockWorkspace .material-restock-step {
  display: grid;
  grid-template-columns: minmax(190px, 230px) minmax(0, 1fr);
  gap: 32px;
  padding: 26px 2px;
  border-bottom: 1px solid var(--line-soft);
}

#materialRestockWorkspace .material-restock-step:first-child {
  padding-top: 8px;
}

#materialRestockWorkspace .material-restock-step-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

#materialRestockWorkspace .material-restock-step-number {
  flex: 0 0 auto;
  padding-top: 2px;
  color: #3f70cf;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
}

#materialRestockWorkspace .material-restock-step-header h3,
#materialRestockWorkspace .material-restock-step-header p {
  margin: 0;
}

#materialRestockWorkspace .material-restock-step-header h3 {
  color: var(--text);
  font-size: 15px;
  line-height: 1.4;
}

#materialRestockWorkspace .material-restock-step-header p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
}

#materialRestockWorkspace .material-restock-step-fields {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 15px 14px;
}

#materialRestockWorkspace .material-restock-item-fields {
  grid-template-columns: minmax(180px, 0.62fr) minmax(320px, 1.38fr);
}

#materialRestockWorkspace .material-restock-purchase-fields {
  grid-template-columns: minmax(250px, 0.72fr) minmax(320px, 1.28fr);
}

#materialRestockWorkspace .material-restock-step-fields label {
  min-width: 0;
  color: #65666b;
  font-size: 12px;
  font-weight: 720;
}

#materialRestockWorkspace .material-restock-field-label {
  display: flex;
  min-height: 18px;
  align-items: center;
  gap: 4px;
}

#materialRestockWorkspace .material-restock-required {
  color: #3f70cf;
  font-weight: 900;
}

#materialRestockWorkspace .material-restock-optional {
  margin-left: 3px;
  color: #96979c;
  font-size: 10px;
  font-weight: 700;
}

#materialRestockWorkspace .material-restock-step-fields input:not([type="file"]),
#materialRestockWorkspace .material-restock-step-fields select {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: #f4f5f7;
  color: var(--text);
  box-shadow: none;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

#materialRestockWorkspace .material-restock-step-fields input:not([type="file"]):hover,
#materialRestockWorkspace .material-restock-step-fields select:hover {
  background: #eff1f4;
}

#materialRestockWorkspace .material-restock-step-fields input:not([type="file"]):focus,
#materialRestockWorkspace .material-restock-step-fields select:focus {
  border-color: #6f94dc;
  outline: 0;
  background: #fff;
  box-shadow: 0 0 0 3px rgb(63 112 207 / 12%);
}

#materialRestockWorkspace .material-restock-step-fields input::placeholder {
  color: #a1a2a7;
  opacity: 1;
}

#materialRestockWorkspace .material-restock-money-input {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: #edf3fd;
  color: #315fb0;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

#materialRestockWorkspace .material-restock-money-input:focus-within {
  border-color: #6f94dc;
  background: #fff;
  box-shadow: 0 0 0 3px rgb(63 112 207 / 12%);
}

#materialRestockWorkspace .material-restock-money-input > span {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 850;
}

#materialRestockWorkspace .material-restock-money-input input:not([type="file"]) {
  min-height: 46px;
  padding: 7px 0;
  border: 0;
  background: transparent;
  font-size: 18px;
  font-weight: 820;
  box-shadow: none;
}

#materialRestockWorkspace .material-restock-money-input input:not([type="file"]):hover,
#materialRestockWorkspace .material-restock-money-input input:not([type="file"]):focus {
  border: 0;
  background: transparent;
  box-shadow: none;
}

#materialRestockWorkspace .material-restock-evidence-field,
#materialRestockWorkspace .material-restock-remark-field {
  grid-column: 1 / -1;
}

#materialRestockWorkspace .material-restock-evidence-box {
  display: grid;
  min-height: 72px;
  grid-template-columns: 24px minmax(0, 1fr) minmax(250px, auto);
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px dashed #c9cdd5;
  border-radius: 7px;
  background: #fafbfc;
}

#materialRestockWorkspace .material-restock-evidence-box > svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: #737780;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

#materialRestockWorkspace .material-restock-evidence-box > span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

#materialRestockWorkspace .material-restock-evidence-box strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 760;
}

#materialRestockWorkspace .material-restock-evidence-box small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}

#materialRestockWorkspace .material-restock-evidence-box input[type="file"] {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #777980;
  font-size: 11px;
}

#materialRestockWorkspace .material-restock-evidence-box input[type="file"]::file-selector-button {
  min-height: 34px;
  margin-right: 9px;
  padding: 6px 10px;
  border: 0;
  border-radius: 5px;
  background: #e9effa;
  color: #315fb0;
  cursor: pointer;
  font: inherit;
  font-weight: 760;
}

#materialRestockWorkspace .material-restock-form-actions {
  justify-content: flex-end;
  min-height: 64px;
  padding: 14px 2px 0;
}

#materialRestockWorkspace .material-restock-form-actions .form-message {
  margin-right: auto;
}

.workspace #materialRestockWorkspace .material-restock-form-actions button[type="submit"] {
  width: auto;
  min-width: 146px;
  min-height: 38px;
  padding: 8px 16px;
  border: 0;
  border-radius: 6px;
  background: #3f70cf;
  color: #fff;
  font-size: 12px;
  font-weight: 780;
}

.workspace #materialRestockWorkspace .material-restock-form-actions button[type="submit"]:hover:not(:disabled) {
  background: #315fb5;
}

.workspace #materialRestockWorkspace .material-restock-form-actions button[type="submit"]:disabled {
  background: #aeb9cc;
  cursor: not-allowed;
}

@media (max-width: 900px) {
  #materialRestockWorkspace .material-restock-step {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  #materialRestockWorkspace .material-restock-item-fields,
  #materialRestockWorkspace .material-restock-purchase-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #materialRestockWorkspace .material-restock-evidence-box {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  #materialRestockWorkspace .material-restock-evidence-box input[type="file"] {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  #materialRestockWorkspace .material-restock-form {
    gap: 14px;
  }

  #materialRestockWorkspace .material-restock-step {
    padding-block: 20px;
  }

  #materialRestockWorkspace .material-restock-step-fields,
  #materialRestockWorkspace .material-restock-item-fields,
  #materialRestockWorkspace .material-restock-purchase-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  #materialRestockWorkspace .material-restock-evidence-box {
    grid-template-columns: minmax(0, 1fr);
  }

  #materialRestockWorkspace .material-restock-evidence-box > svg {
    display: none;
  }

  #materialRestockWorkspace .material-restock-form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  #materialRestockWorkspace .material-restock-form-actions .form-message {
    width: 100%;
    margin-right: 0;
  }

  .workspace #materialRestockWorkspace .material-restock-form-actions button[type="submit"] {
    width: 100%;
  }
}

/* Reimbursement hub: one consistent title-to-subtab rhythm on every page. */
#costLedgerPanel [data-reimbursement-workspace] > .cost-ledger-form {
  row-gap: 18px;
}

#costLedgerPanel [data-reimbursement-workspace] .reimbursement-page-header {
  margin-bottom: 0;
}

#costLedgerPanel [data-reimbursement-workspace] .reimbursement-subtabs {
  margin-top: 0;
  margin-bottom: 0;
}

/* Taobao requisition: collaborative discussion panel. */
.taobao-discussion-modal {
  width: min(860px, calc(100vw - 32px));
  height: min(700px, calc(100vh - 32px));
  border-color: #dfe4ec;
  border-radius: 14px;
  box-shadow: 0 24px 70px rgb(22 34 55 / 24%);
}

.taobao-discussion-header {
  align-items: center;
  padding: 18px 20px;
  border-bottom-color: #e8ebf0;
  background: linear-gradient(100deg, #f7faff 0%, #fff 56%);
}

.taobao-discussion-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 13px;
}

.taobao-discussion-heading > div {
  min-width: 0;
}

.taobao-discussion-heading-icon {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 10px;
  background: #e8f0fd;
  color: #3f70cf;
  place-items: center;
}

.taobao-discussion-heading-icon svg,
.taobao-discussion-composer-icon svg,
.taobao-discussion-submit svg,
.taobao-discussion-empty svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.taobao-discussion-heading-icon svg {
  width: 21px;
  height: 21px;
}

.taobao-discussion-header .summary-eyebrow {
  margin-bottom: 3px;
  color: #3f70cf;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.taobao-discussion-header h3 {
  overflow: hidden;
  color: var(--text);
  font-size: 17px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.taobao-discussion-header p {
  overflow: hidden;
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 620;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#taobaoDiscussionCloseButton {
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #777b83;
  box-shadow: none;
}

#taobaoDiscussionCloseButton:hover {
  background: #eef1f5;
  color: var(--text);
}

.taobao-discussion-body {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 0;
  padding: 0;
  background: #fff;
}

#taobaoDiscussionError:not(:empty) {
  margin: 12px 20px 0;
}

.taobao-discussion-load-older {
  min-height: 30px;
  margin: 10px auto 0;
  padding: 5px 10px;
  border: 0;
  background: transparent;
  color: #3f70cf;
  font-size: 11px;
  box-shadow: none;
}

.taobao-discussion-timeline {
  align-content: start;
  gap: 18px;
  margin: 14px 20px;
  padding: 20px;
  border: 0;
  border-radius: 12px;
  background: #f6f8fb;
  box-shadow: inset 0 0 0 1px #edf0f4;
}

.taobao-discussion-empty {
  display: grid;
  min-height: 100%;
  align-content: center;
  justify-items: center;
  padding: 36px 20px;
  color: var(--muted);
  text-align: center;
}

.taobao-discussion-empty > span {
  display: grid;
  width: 52px;
  height: 52px;
  margin-bottom: 13px;
  border-radius: 50%;
  background: #e8f0fd;
  color: #3f70cf;
  place-items: center;
}

.taobao-discussion-empty svg {
  width: 24px;
  height: 24px;
}

.taobao-discussion-empty strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
}

.taobao-discussion-empty p {
  max-width: 390px;
  margin: 7px 0 0;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.65;
}

.taobao-chat-message {
  gap: 6px;
}

.taobao-chat-message > header {
  gap: 7px;
  padding-inline: 2px;
}

.taobao-chat-message > header strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 780;
}

.taobao-chat-message > header span,
.taobao-chat-message time,
.taobao-chat-system-event time {
  font-size: 10px;
}

.taobao-chat-bubble {
  padding: 10px 13px;
  border: 0;
  border-radius: 5px 14px 14px;
  box-shadow: 0 2px 8px rgb(35 49 73 / 8%);
}

.taobao-chat-message.is-own .taobao-chat-bubble {
  border: 0;
  border-radius: 14px 5px 14px 14px;
  background: #e6eefc;
  color: #244f9e;
}

.taobao-chat-system-event {
  padding: 4px 10px;
  border-radius: 999px;
  background: #eceff3;
  justify-self: center;
}

.taobao-discussion-form {
  gap: 7px;
  padding: 14px 20px 16px;
  border: 0;
  border-top: 1px solid #e8ebf0;
  border-radius: 0;
  background: #fff;
}

.taobao-discussion-composer {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
  padding: 9px 9px 9px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #f3f5f8;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.taobao-discussion-composer:focus-within {
  border-color: #7296dc;
  background: #fff;
  box-shadow: 0 0 0 3px rgb(63 112 207 / 12%);
}

.taobao-discussion-composer-icon {
  display: grid;
  width: 24px;
  height: 34px;
  align-items: center;
  color: #858a94;
}

.taobao-discussion-composer-icon svg {
  width: 19px;
  height: 19px;
}

.taobao-discussion-form textarea {
  width: 100%;
  min-height: 44px;
  max-height: 120px;
  padding: 8px 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  line-height: 1.55;
  box-shadow: none;
  resize: none;
}

.taobao-discussion-form textarea:focus {
  border: 0;
  outline: 0;
  box-shadow: none;
}

.taobao-discussion-submit {
  display: inline-flex;
  min-width: 74px;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 11px;
  border: 0;
  border-radius: 7px;
  background: #3f70cf;
  color: #fff;
  font-size: 11px;
  font-weight: 780;
  box-shadow: none;
}

.taobao-discussion-submit:hover:not(:disabled) {
  background: #315fb5;
}

.taobao-discussion-submit:disabled {
  background: #aeb9cc;
  cursor: not-allowed;
}

.taobao-discussion-submit svg {
  width: 15px;
  height: 15px;
}

.taobao-discussion-form-footer {
  display: flex;
  min-height: 16px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-inline: 2px;
}

.taobao-discussion-form-footer .form-message {
  min-width: 0;
  margin-right: auto;
}

.taobao-discussion-form-footer small {
  flex: 0 0 auto;
  color: #999ca3;
  font-size: 9px;
  font-weight: 620;
}

@media (max-width: 720px) {
  .taobao-discussion-modal {
    border-radius: 10px;
  }

  .taobao-discussion-header {
    padding: 14px;
  }

  .taobao-discussion-heading-icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .taobao-discussion-timeline {
    margin: 10px 12px;
    padding: 14px;
  }

  .taobao-discussion-form {
    padding: 12px;
  }

  .taobao-discussion-composer {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .taobao-discussion-composer-icon {
    display: none;
  }

  .taobao-discussion-submit {
    min-width: 42px;
    padding-inline: 10px;
  }

  .taobao-discussion-submit > span {
    display: none;
  }
}

/* Shared data-table language inside the project workspace. */
.project-tab-workspace .project-data-table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border: 0;
  border-radius: 0;
}

.project-tab-workspace .project-data-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--text);
  font-size: 13px;
}

.project-tab-workspace .project-data-table th,
.project-tab-workspace .project-data-table td {
  box-sizing: border-box;
  height: 44px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
  vertical-align: middle;
  overflow-wrap: anywhere;
}

.project-tab-workspace .project-data-table th {
  background: #f2f6fd;
  color: #536985;
  font-size: 12px;
  font-weight: 700;
}

.project-tab-workspace .project-data-table tbody tr:hover td,
.project-tab-workspace .project-data-table tbody tr:focus-within td {
  background: #fafcff;
}

.project-tab-workspace .project-data-grid > :is(.project-bonus-member-head, .project-bonus-allocation-head) {
  min-height: 44px;
  padding: 0 14px;
  background: #f2f6fd;
  color: #536985;
  font-size: 12px;
  font-weight: 700;
}

.project-tab-workspace .project-bonus-member-list.project-data-grid > .project-bonus-member-row,
.project-tab-workspace .project-bonus-allocation-list.project-data-grid > div:not(.project-bonus-allocation-head) {
  padding-inline: 14px;
  font-size: 13px;
}

.project-tab-workspace .project-bonus-member-list.project-data-grid > .project-bonus-member-row:hover,
.project-tab-workspace .project-bonus-allocation-list.project-data-grid > div:not(.project-bonus-allocation-head):hover {
  background: #fafcff;
}


/* Customer directory: reuse the project overview's lightweight header and search treatment. */
#customerListSection .customer-list-heading {
  min-width: 0;
}

#customerListSection .customer-list-title-row {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}

#customerListSection #customerCountBadge {
  min-width: 0;
  padding: 0 0 0 12px;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
}

#customerListSection .customer-list-tools {
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
  padding: 0;
  border: 0;
  background: transparent;
}

#customerListSection .customer-list-search {
  min-width: 0;
  flex: 1 1 260px;
}

#customerListSection .customer-list-filter-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 4px;
}

#customerListSection .customer-directory-filter {
  position: relative;
  min-width: 0;
}

#customerListSection .customer-directory-filter::after {
  position: absolute;
  top: 50%;
  right: 9px;
  color: #85868b;
  content: "⌄";
  font-size: 12px;
  line-height: 1;
  pointer-events: none;
  transform: translateY(-58%);
}

#customerListSection .customer-directory-filter select {
  width: auto;
  max-width: 210px;
  min-height: 38px;
  padding: 6px 28px 6px 10px;
  border: 0;
  border-radius: 6px;
  appearance: none;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  box-shadow: none;
  cursor: pointer;
}

#customerListSection .customer-directory-filter select:hover,
#customerListSection .customer-directory-filter select:focus {
  background: #f1f2f4;
  color: var(--text);
}

#customerListSection .customer-directory-filter select:focus {
  border-color: transparent;
  box-shadow: none;
  outline: 2px solid #3f70cf;
  outline-offset: 1px;
}

#customerListSection .customer-directory-filter.is-filtered select {
  background: #edf2fb;
  color: #315fb5;
}

#customerListSection .customer-list-tools .customer-list-search input {
  max-width: none;
  border-color: transparent;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
}

#customerListSection .customer-list-tools .customer-list-search input:hover {
  background: #f7f7f8;
}

#customerListSection .customer-list-tools .customer-list-search input:focus {
  border-color: #3f70cf;
  background: #fff;
  box-shadow: 0 0 0 1px #3f70cf;
}

#customerListSection #clearCustomerSearchButton {
  width: auto;
  height: 34px;
  padding: 0 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

#customerListSection #clearCustomerSearchButton:hover {
  background: #f1f2f4;
  color: var(--text);
}

#customerListSection .customer-list-tools:has(input:placeholder-shown):not(.has-active-filters) #clearCustomerSearchButton {
  display: none;
}

@media (max-width: 760px) {
  #customerListSection .project-list-primary-action {
    width: auto;
  }

  #customerListSection .customer-list-tools {
    padding: 0;
  }

  #customerListSection .customer-list-search {
    flex-basis: 100%;
  }

  #customerListSection .customer-list-filter-row {
    flex: 1 1 auto;
  }

  #customerListSection .customer-directory-filter {
    flex: 1 1 0;
  }

  #customerListSection .customer-directory-filter select {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 420px) {
  #customerListSection .customer-list-title-row {
    display: grid;
    gap: 2px;
  }

  #customerListSection #customerCountBadge {
    padding-left: 0;
    border-left: 0;
  }
}

/* Venue directory follows the same lightweight hierarchy as the customer and vendor lists. */
#venueListSection .venue-list-heading {
  min-width: 0;
}

#venueListSection .venue-list-title-row {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}

#venueListSection #venueCountBadge {
  min-width: 0;
  padding: 0 0 0 12px;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
}

#venueListSection .venue-list-tools {
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
  padding: 0;
  border: 0;
  background: transparent;
}

#venueListSection .venue-list-search {
  min-width: 0;
  flex: 1 1 260px;
}

#venueListSection .venue-list-filter-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 4px;
}

#venueListSection .venue-directory-filter {
  position: relative;
  min-width: 0;
}

#venueListSection .venue-directory-filter::after {
  position: absolute;
  top: 50%;
  right: 9px;
  color: #85868b;
  content: "⌄";
  font-size: 12px;
  line-height: 1;
  pointer-events: none;
  transform: translateY(-58%);
}

#venueListSection .venue-directory-filter select {
  width: auto;
  max-width: 210px;
  min-height: 38px;
  padding: 6px 28px 6px 10px;
  border: 0;
  border-radius: 6px;
  appearance: none;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  box-shadow: none;
  cursor: pointer;
}

#venueListSection .venue-directory-filter select:hover,
#venueListSection .venue-directory-filter select:focus {
  background: #f1f2f4;
  color: var(--text);
}

#venueListSection .venue-directory-filter select:focus {
  border-color: transparent;
  box-shadow: none;
  outline: 2px solid #3f70cf;
  outline-offset: 1px;
}

#venueListSection .venue-directory-filter.is-filtered select {
  background: #edf2fb;
  color: #315fb5;
}

#venueListSection .venue-list-tools .venue-list-search input {
  max-width: none;
  border-color: transparent;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
}

#venueListSection .venue-list-tools .venue-list-search input:hover {
  background: #f7f7f8;
}

#venueListSection .venue-list-tools .venue-list-search input:focus {
  border-color: #3f70cf;
  background: #fff;
  box-shadow: 0 0 0 1px #3f70cf;
}

#venueListSection #clearVenueSearchButton {
  width: auto;
  height: 34px;
  padding: 0 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

#venueListSection #clearVenueSearchButton:hover {
  background: #f1f2f4;
  color: var(--text);
}

#venueListSection .venue-list-tools:has(input:placeholder-shown):not(.has-active-filters) #clearVenueSearchButton {
  display: none;
}

@media (max-width: 760px) {
  #venueListSection .project-list-primary-action {
    width: auto;
  }

  #venueListSection .venue-list-tools {
    padding: 0;
  }

  #venueListSection .venue-list-search {
    flex-basis: 100%;
  }

  #venueListSection .venue-list-filter-row {
    flex: 1 1 auto;
  }

  #venueListSection .venue-directory-filter {
    flex: 1 1 0;
  }

  #venueListSection .venue-directory-filter select {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 420px) {
  #venueListSection .venue-list-title-row {
    display: grid;
    gap: 2px;
  }

  #venueListSection #venueCountBadge {
    padding-left: 0;
    border-left: 0;
  }
}

/* Master-data create and edit pages share one flat, focused form language. */
.master-data-form-page {
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  scroll-margin-block-start: 20px;
}

.app-shell .master-data-form-panel,
.app-shell .master-data-form-panel.panel,
.app-shell .master-data-form-panel.project-create-drawer {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.app-shell .master-data-form-header {
  display: block;
  min-height: 94px;
  padding: 16px 0 18px;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
}

.customer-create-page-header {
  padding-bottom: 16px;
}

.master-data-create-page-header {
  min-height: 0;
  padding: 16px 0 12px;
  border-bottom: 0;
}

.customer-create-page-header .master-data-form-heading,
.master-data-create-page-header .master-data-form-heading {
  align-items: center;
}

.customer-create-page-header .master-data-form-heading p[hidden],
.master-data-create-page-header .master-data-form-heading p[hidden] {
  display: none;
}

.customer-create-tabs {
  gap: 28px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--line-soft);
}

.workspace #customerCreatePanel .customer-create-tabs .quotation-mode-tab {
  min-height: 42px;
  padding: 0 2px;
}

.workspace #customerCreatePanel .customer-create-tabs .quotation-mode-tab.active {
  border-bottom-color: #3f70cf;
  color: #315fb5;
}

.workspace .customer-edit-tabs .quotation-mode-tab {
  min-height: 42px;
  padding: 0 2px;
}

.workspace .customer-edit-tabs .quotation-mode-tab.active {
  border-bottom-color: #3f70cf;
  color: #315fb5;
}

.master-data-edit-tab-panel {
  display: none;
}

.master-data-edit-tab-panel.active {
  display: block;
}

.contact-management-section {
  padding-top: 18px;
}

.contact-management-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.app-shell .contact-management-table {
  table-layout: fixed;
}

.app-shell .contact-management-table col.contact-directory-order-column { width: 42px; }
.app-shell .contact-management-table col:nth-child(2) { width: 18%; }
.app-shell .contact-management-table col:nth-child(3) { width: 14%; }
.app-shell .contact-management-table col:nth-child(4) { width: auto; }
.app-shell .contact-management-table col:nth-child(5) { width: 13%; }
.app-shell .contact-management-table col.contact-directory-status-column { width: 82px; }
.app-shell .contact-management-table col.contact-directory-tools-column { width: 48px; }

.contact-management-row:hover {
  background: #fafafa;
}

.contact-order-cell,
.contact-tools-cell {
  padding-inline: 4px !important;
  text-align: center;
}

.workspace .contact-order-grip {
  display: inline-grid;
  width: 30px;
  height: 30px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #a3a6ad;
  cursor: grab;
  font-size: 17px;
  line-height: 1;
  letter-spacing: -4px;
  transform: rotate(90deg);
  user-select: none;
  box-shadow: none;
}

.workspace .contact-order-grip:hover,
.workspace .contact-order-grip:focus-visible {
  background: #ededf0;
  color: #5c616b;
  outline: none;
}

.workspace .contact-order-grip:active {
  cursor: grabbing;
}

.workspace .contact-order-grip:disabled {
  cursor: wait;
  opacity: 0.45;
}

.contact-row-tools {
  justify-content: center;
}

.contact-row-tools .quotation-list-tools-menu {
  min-width: 132px;
}

.contact-row-tools .contact-tool-reactivate {
  color: #2f7b52;
}

.contact-dragging {
  opacity: 0.4;
}

.contact-drop-before {
  box-shadow: inset 0 2px 0 #3f70cf;
}

.contact-drop-after {
  box-shadow: inset 0 -2px 0 #3f70cf;
}

.contact-order-error {
  margin: -4px 0 10px;
}

.vendor-item-fields {
  display: grid;
  gap: 18px;
}

.vendor-item-fields[hidden] {
  display: none;
}

.vendor-item-fields label {
  min-width: 0;
}

.vendor-item-field-section {
  display: grid;
  gap: 11px;
  min-width: 0;
}

.vendor-item-field-section-heading {
  padding-bottom: 8px;
  border-bottom: 1px solid #e8ebf0;
}

.vendor-item-field-section-heading h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #454a53;
  font-size: 13px;
  font-weight: 780;
}

.vendor-item-field-section-heading h3::before {
  width: 3px;
  height: 14px;
  flex: 0 0 auto;
  border-radius: 99px;
  background: #3f70cf;
  content: "";
}

.vendor-item-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
}

.vendor-item-field-grid > .span-2 {
  grid-column: 1 / -1;
}

.master-data-contact-dialog-actions .vendor-item-submit-button {
  border-color: #3f70cf;
  background: #3f70cf;
  color: #fff;
}

.vendor-item-editor-dialog .master-data-contact-dialog-primary-actions > button {
  width: auto;
  min-width: 132px;
  white-space: nowrap;
}

.vendor-item-management-row:hover {
  background: #fafafa;
}

.vendor-item-order-cell {
  padding-inline: 4px !important;
  text-align: center;
}

.app-shell :is(.vendor-detail-crew-table, .vendor-detail-vehicle-table).is-manageable col.vendor-item-order-column,
.app-shell :is(.vendor-detail-crew-table, .vendor-detail-vehicle-table).is-manageable th:first-child,
.app-shell :is(.vendor-detail-crew-table, .vendor-detail-vehicle-table).is-manageable td:first-child {
  width: 48px !important;
}

.app-shell :is(.vendor-detail-crew-table, .vendor-detail-vehicle-table).is-manageable col.vendor-item-tools-column,
.app-shell :is(.vendor-detail-crew-table, .vendor-detail-vehicle-table).is-manageable th:last-child,
.app-shell :is(.vendor-detail-crew-table, .vendor-detail-vehicle-table).is-manageable td:last-child {
  width: 48px !important;
}

.app-shell :is(.vendor-detail-crew-table, .vendor-detail-vehicle-table).is-manageable th:nth-last-child(2),
.app-shell :is(.vendor-detail-crew-table, .vendor-detail-vehicle-table).is-manageable td:nth-last-child(2) {
  width: var(--basic-data-status-column-width) !important;
  white-space: nowrap;
}

.app-shell .vendor-detail-crew-table.is-manageable col:nth-child(2) { width: 22%; }
.app-shell .vendor-detail-crew-table.is-manageable col:nth-child(3) { width: 22%; }
.app-shell .vendor-detail-crew-table.is-manageable col:nth-child(4) { width: 18%; }
.app-shell .vendor-detail-crew-table.is-manageable col:nth-child(5) { width: auto; }
.app-shell .vendor-detail-vehicle-table.is-manageable col:nth-child(2) { width: 28%; }
.app-shell .vendor-detail-vehicle-table.is-manageable col:nth-child(3) { width: 25%; }
.app-shell .vendor-detail-vehicle-table.is-manageable col:nth-child(4) { width: auto; }

@media (max-width: 760px) {
  .vendor-form-tabs {
    overflow-x: auto;
  }

  .vendor-item-field-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .vendor-item-field-grid > .span-2 {
    grid-column: 1;
  }

  .vendor-form-tabs .quotation-mode-tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .app-shell .contact-management-table {
    min-width: 820px;
  }

  .app-shell :is(.vendor-detail-crew-table, .vendor-detail-vehicle-table).is-manageable {
    min-width: 820px;
  }

  .vendor-item-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .vendor-item-fields label:last-child:nth-child(odd) {
    grid-column: auto;
  }
}

.app-shell .customer-contact-directory-table.is-read-only th:last-child,
.app-shell .customer-contact-directory-table.is-read-only td:last-child,
.app-shell .brand-contact-directory-table.is-read-only th:last-child,
.app-shell .brand-contact-directory-table.is-read-only td:last-child {
  width: var(--basic-data-status-column-width) !important;
}

.master-data-create-tabs {
  margin-bottom: 0;
  border-bottom: 1px solid var(--line-soft);
}

#customerCreatePanel .customer-create-tab-panel {
  display: none;
  padding: 22px 0 8px;
  border-bottom: 0;
}

#customerCreatePanel .customer-create-tab-panel.active {
  display: block;
}

#vendorCreatePanel .vendor-form-tab-panel {
  display: none;
  padding: 22px 0 8px;
  border-bottom: 0;
}

#vendorCreatePanel .vendor-form-tab-panel.active {
  display: block;
}

.master-data-form-flow {
  display: block;
  width: 100%;
}

.master-data-form-flow-actions {
  width: 100%;
}

#customerCreatePanel .master-data-form-actions {
  justify-content: flex-end;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.app-shell .master-data-form-panel .master-data-form-grid {
  width: 100%;
  max-width: none;
}

.app-shell .master-data-form-panel .master-data-form-actions > button[type="submit"],
.app-shell .master-data-form-panel .master-data-form-footer button[type="submit"] {
  min-width: 96px;
  height: 36px;
  min-height: 36px;
  border-color: #3f70cf;
  background: #3f70cf;
  color: #fff;
}

.master-data-form-panel .edit-basic-section {
  padding-top: 24px;
  border-bottom: 0;
}

.app-shell .master-data-form-panel .master-data-form-actions > button[type="submit"]:hover:not(:disabled),
.app-shell .master-data-form-panel .master-data-form-footer button[type="submit"]:hover:not(:disabled) {
  border-color: #315fb5;
  background: #315fb5;
  color: #fff;
}

.master-data-form-heading {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 12px;
}

.master-data-form-heading > div {
  min-width: 0;
}

.master-data-form-heading .eyebrow {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.master-data-form-heading h2 {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 22px;
  letter-spacing: -0.02em;
}

.master-data-form-heading p {
  max-width: 680px;
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.app-shell .master-data-form-back-button {
  position: relative;
  display: inline-grid;
  flex: 0 0 32px;
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font-size: 0;
  box-shadow: none;
  place-items: center;
}

.app-shell .master-data-form-back-button::before {
  content: "←";
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
}

.app-shell .master-data-form-back-button:hover {
  background: #f1f2f4;
  color: var(--text);
}

.app-shell .master-data-form-back-button:focus-visible {
  outline: 2px solid #3f70cf;
  outline-offset: 2px;
}

.master-data-form-content {
  display: grid;
}

.master-data-form-section {
  min-width: 0;
  padding: 24px 0 26px;
  border-bottom: 1px solid var(--line-soft);
}

.master-data-form-section:last-child {
  border-bottom: 0;
}

.master-data-form-section-heading {
  max-width: none;
  margin-bottom: 17px;
}

.master-data-form-section-heading h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 760;
}

.master-data-form-section-heading h3::before {
  display: inline-block;
  width: 3px;
  height: 18px;
  margin-right: 10px;
  border-radius: 2px;
  background: #3f70cf;
  content: "";
  vertical-align: -3px;
}

.master-data-form-section-heading p {
  margin: 5px 0 0 13px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.app-shell .master-data-form-grid {
  width: min(100%, 980px);
  gap: 18px 24px;
  padding: 0;
}

.app-shell .master-data-form-grid label {
  gap: 7px;
  color: #686b72;
  font-size: 12px;
  font-weight: 700;
}

.app-shell .master-data-form-grid input,
.app-shell .master-data-form-grid select,
.app-shell .master-data-form-grid textarea {
  min-height: 40px;
  border-color: #d9dce2;
  border-radius: 4px;
  background: #fff;
  font-size: 14px;
  box-shadow: none;
}

.app-shell .master-data-form-grid textarea {
  min-height: 96px;
}

.app-shell .master-data-form-grid input:hover,
.app-shell .master-data-form-grid select:hover,
.app-shell .master-data-form-grid textarea:hover {
  border-color: #bfc4cd;
}

.app-shell .master-data-form-grid input:focus,
.app-shell .master-data-form-grid select:focus,
.app-shell .master-data-form-grid textarea:focus {
  border-color: #3f70cf;
  box-shadow: 0 0 0 1px #3f70cf;
}

.app-shell .master-data-form-grid input:disabled {
  border-color: #e5e7eb;
  background: #f6f7f8;
  color: var(--muted);
}

.app-shell .master-data-form-grid .checkbox-group {
  display: flex;
  min-height: 40px;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 7px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.app-shell .master-data-form-grid .checkbox-option {
  width: auto;
}

.app-shell .master-data-form-actions {
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
  padding-top: 18px;
  border-top: 0;
}

.app-shell .master-data-form-actions > button[type="submit"],
.app-shell .master-data-form-footer button[type="submit"] {
  min-height: 38px;
  padding: 0 16px;
}

.app-shell .master-data-form-actions > .secondary-button,
.app-shell .master-data-form-footer .secondary-button {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}

.app-shell .master-data-form-actions > .secondary-button:hover,
.app-shell .master-data-form-footer .secondary-button:hover {
  background: #f1f2f4;
  color: var(--text);
}

.master-data-form-panel .form-message:empty {
  display: none;
}

.app-shell .master-data-form-footer {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 16px 0 4px;
  border-top: 0;
}

.app-shell .master-data-form-footer .form-actions {
  margin-left: auto;
}

.master-data-form-panel .venue-file-editor {
  gap: 14px;
  margin-top: 4px;
  padding: 22px 0 0;
  border: 0;
  border-top: 1px solid var(--line-soft);
  border-radius: 0;
  background: transparent;
}

.master-data-form-panel .venue-file-editor-heading {
  margin-bottom: 2px;
}

.master-data-form-panel .venue-template-dropzone {
  position: relative;
  display: flex;
  min-height: 68px;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px dashed #c9cdd5;
  border-radius: 7px;
  background: #fafbfc;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.master-data-form-panel .venue-template-dropzone:hover,
.master-data-form-panel .venue-template-dropzone:focus-visible,
.master-data-form-panel .venue-template-dropzone.is-dragging {
  border-color: var(--muted);
  outline: none;
  background: var(--sidebar);
  color: var(--text);
}

.master-data-form-panel .venue-template-dropzone.is-uploading {
  border-style: solid;
  border-color: #9fb5df;
  background: #f3f7fd;
  color: #315fb5;
  cursor: wait;
  pointer-events: none;
}

.master-data-form-panel .venue-template-dropzone > svg {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.master-data-form-panel .venue-template-dropzone > span {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.master-data-form-panel .venue-template-dropzone strong {
  overflow: hidden;
  color: currentColor;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.master-data-form-panel .venue-template-dropzone small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.master-data-form-panel .venue-template-dropzone input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.master-data-form-panel .venue-file-list {
  border: 0;
  border-top: 1px solid var(--line-soft);
  border-radius: 0;
}

.master-data-form-panel .venue-file-list:empty {
  display: none;
}

.master-data-form-panel .venue-file-item {
  padding-inline: 4px;
}

.app-shell #materialPriceEditorPanel {
  margin-top: 0;
  scroll-margin-block-start: 20px;
}

.app-shell #materialPriceEditorPanel .material-price-form-section {
  padding-top: 12px;
}

.app-shell #materialPriceEditorPanel .material-price-form {
  display: block;
}

.app-shell #materialPriceEditorPanel .material-price-form-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.app-shell #materialPriceEditorPanel .material-price-form-group + .material-price-form-group {
  margin-top: 30px;
}

.app-shell #materialPriceEditorPanel .material-price-form-group-heading {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 16px;
  padding: 0;
  color: var(--text);
}

.app-shell #materialPriceEditorPanel .material-price-form-group-index {
  padding-top: 2px;
  color: #3f70cf;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.app-shell #materialPriceEditorPanel .material-price-form-group-heading strong,
.app-shell #materialPriceEditorPanel .material-price-form-group-heading small {
  display: block;
}

.app-shell #materialPriceEditorPanel .material-price-form-group-heading strong {
  font-size: 14px;
  line-height: 1.4;
}

.app-shell #materialPriceEditorPanel .material-price-form-group-heading small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
}

.app-shell #materialPriceEditorPanel .material-price-form-group-fields {
  display: grid;
  gap: 18px 24px;
}

.app-shell #materialPriceEditorPanel .material-price-identity-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.app-shell #materialPriceEditorPanel .material-price-pricing-fields {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.app-shell #materialPriceEditorPanel .master-data-form-actions {
  margin-top: 28px;
  padding-top: 0;
}

.app-shell .venue-form-section {
  padding-top: 12px;
}

.app-shell .venue-classified-form {
  display: block;
}

.app-shell .venue-form-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.app-shell .venue-form-group + .venue-form-group {
  margin-top: 30px;
}

.app-shell .venue-form-group-heading {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 16px;
  padding: 0;
  color: var(--text);
}

.app-shell .venue-form-group-index {
  padding-top: 2px;
  color: #3f70cf;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.app-shell .venue-form-group-heading strong,
.app-shell .venue-form-group-heading small {
  display: block;
}

.app-shell .venue-form-group-heading strong {
  font-size: 14px;
  line-height: 1.4;
}

.app-shell .venue-form-group-heading small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
}

.app-shell .venue-form-group-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
}

.app-shell .venue-form-group-fields .span-2 {
  grid-column: 1 / -1;
}

.app-shell .venue-classified-form > .venue-file-editor {
  margin-top: 30px;
}

.app-shell .venue-classified-form > .master-data-form-actions {
  margin-top: 28px;
  padding-top: 0;
}

@media (max-width: 760px) {
  .app-shell .master-data-form-header {
    padding: 12px 0 16px;
  }

  .master-data-form-heading {
    gap: 8px;
  }

  .customer-create-tabs {
    gap: 12px;
    overflow-x: auto;
  }

  .contact-management-toolbar .customer-directory-subsection-tools {
    flex: 0 0 auto;
  }

  .customer-create-tabs .quotation-mode-tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  #customerCreatePanel .customer-create-tab-panel {
    padding: 18px 0 4px;
  }

  .master-data-form-section {
    padding: 20px 0 22px;
  }

  .app-shell .master-data-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-shell .master-data-form-grid > *,
  .app-shell .master-data-form-grid .span-2 {
    grid-column: 1;
  }

  .app-shell #materialPriceEditorPanel .material-price-identity-fields,
  .app-shell #materialPriceEditorPanel .material-price-pricing-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-shell .venue-form-group-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-shell .venue-form-group-fields .span-2 {
    grid-column: 1;
  }

  .app-shell .master-data-form-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .app-shell .master-data-form-footer .form-actions,
  .app-shell .master-data-form-footer .form-message {
    width: 100%;
    text-align: left;
  }
}

/* Approval center: match the project overview and reimbursement history table language. */
.approval-review-page .finance-page-header,
.approval-review-page .panel-header {
  margin-bottom: 18px;
}

.approval-review-page .approval-review-table-scroll {
  border: 0;
  border-radius: 0;
}

.approval-review-page .approval-review-table-scroll table {
  min-width: 980px;
  table-layout: auto;
}

.approval-review-page .approval-review-table-scroll th,
.approval-review-page .approval-review-table-scroll td {
  box-sizing: border-box;
  padding: 0 14px;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
  vertical-align: middle;
  overflow-wrap: anywhere;
}

.approval-review-page .approval-review-table-scroll th {
  height: 40px;
  border-bottom-color: var(--line);
  color: #66676b;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.approval-review-page .approval-review-table-scroll tbody td {
  height: auto;
  padding-top: 10px;
  padding-bottom: 10px;
}

.approval-review-page .approval-review-table-scroll tbody tr:hover td,
.approval-review-page .approval-review-table-scroll tbody tr:focus-within td {
  background: #f8f8f9;
}

.approval-review-page .approval-review-table-scroll tbody tr.action-required-row td {
  background: transparent;
}

.approval-review-page .approval-review-table-scroll tbody tr.action-required-row:hover td,
.approval-review-page .approval-review-table-scroll tbody tr.action-required-row:focus-within td {
  background: #f8f8f9;
}

.approval-review-page .approval-review-table-scroll tbody tr.action-required-row td:first-child {
  box-shadow: none;
}

.approval-review-page .approval-review-table-scroll .approval-status-detail {
  margin-top: 4px;
}

.approval-review-page .approval-review-table-scroll .empty-cell {
  height: 44px;
  padding: 0 14px;
  background: transparent;
}

.approval-review-page .approval-review-table-scroll td > strong:first-child,
.approval-review-page .approval-review-table-scroll td > div > strong:first-child {
  display: block;
  font-weight: 700;
  line-height: 1.4;
}

.approval-review-page .approval-review-table-scroll .table-subtext {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

.approval-review-page .approval-review-table-scroll :is(th, td).personal-record-tools-column,
.approval-review-page .approval-review-table-scroll :is(th, td).personal-record-tools-cell {
  width: var(--table-tools-column-width);
  min-width: var(--table-tools-column-width);
  max-width: var(--table-tools-column-width);
  padding-right: 6px;
  padding-left: 6px;
  background: transparent;
}

#quotationReviewWorkspace .approval-review-table-scroll table {
  min-width: 980px;
}

#quotationReviewWorkspace .approval-review-table-scroll :is(th, td):nth-child(1) { min-width: 132px; }
#quotationReviewWorkspace .approval-review-table-scroll :is(th, td):nth-child(2) { min-width: 108px; }
#quotationReviewWorkspace .approval-review-table-scroll :is(th, td):nth-child(3) { min-width: 228px; }
#quotationReviewWorkspace .approval-review-table-scroll :is(th, td):nth-child(4),
#quotationReviewWorkspace .approval-review-table-scroll :is(th, td):nth-child(5) { min-width: 116px; }
#quotationReviewWorkspace .approval-review-table-scroll :is(th, td):nth-child(6) { min-width: 86px; }
#quotationReviewWorkspace .approval-review-table-scroll :is(th, td):nth-child(7) { min-width: 150px; }

#invoiceCheckWorkspace .approval-review-table-scroll table {
  min-width: 980px;
  table-layout: auto;
}

#purchaseReviewWorkspace .approval-review-table-scroll :is(th, td):nth-child(3) { min-width: 190px; }
#purchaseReviewWorkspace .approval-review-table-scroll :is(th, td):nth-child(5) { min-width: 150px; }
#invoiceCheckWorkspace .approval-review-table-scroll :is(th, td):nth-child(3) { min-width: 300px; }

.night-entry-management-scroll.approval-review-table-scroll :is(th, td):nth-child(3) { min-width: 180px; }
.night-entry-management-scroll.approval-review-table-scroll :is(th, td):nth-child(4) { min-width: 145px; }
.night-entry-management-scroll.approval-review-table-scroll :is(th, td):nth-child(5) { min-width: 140px; }
.night-entry-management-scroll.approval-review-table-scroll :is(th, td):nth-child(6) { min-width: 130px; }

#quotationReviewWorkspace .quotation-review-status-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.streamlined-approval-history-workspace .approval-history-filter-form {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) repeat(3, minmax(130px, 180px)) auto;
  align-items: center;
  gap: 4px 10px;
  width: 100%;
  margin: 8px 0 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.streamlined-approval-history-workspace .approval-history-filter-form[hidden] {
  display: none;
}

.streamlined-approval-history-workspace .approval-history-filter-form > label {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  max-width: none;
  gap: 2px;
  color: #717277;
  font-size: 12px;
  font-weight: 650;
}

.streamlined-approval-history-workspace .approval-history-filter-form > label > input,
.streamlined-approval-history-workspace .approval-history-filter-form > label > select {
  width: auto;
  height: 38px;
  padding-inline: 10px;
  border-color: transparent;
  border-radius: 6px;
  background: transparent;
  color: #66676c;
  font-size: 13px;
  font-weight: 650;
  box-shadow: none;
}

.streamlined-approval-history-workspace .approval-history-search-filter {
  position: relative;
  width: 100%;
  min-width: 0;
}

.streamlined-approval-history-workspace .approval-history-search-filter::before {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 11px;
  width: 12px;
  height: 12px;
  border: 1.8px solid #77787d;
  border-radius: 50%;
  content: "";
  pointer-events: none;
  transform: translateY(-58%);
}

.streamlined-approval-history-workspace .approval-history-search-filter::after {
  position: absolute;
  z-index: 1;
  top: calc(50% + 4px);
  left: 22px;
  width: 6px;
  height: 1.8px;
  border-radius: 2px;
  background: #77787d;
  content: "";
  pointer-events: none;
  transform: rotate(45deg);
}

.streamlined-approval-history-workspace .approval-history-filter-form > .approval-history-search-filter > input {
  width: 100%;
  min-width: 0;
  padding: 8px 12px 8px 42px;
  font-weight: 500;
}

.streamlined-approval-history-workspace .approval-history-select-filter select {
  width: 100%;
  min-width: 0;
}

.streamlined-approval-history-workspace .approval-history-date-range-filter {
  position: relative;
  width: 100%;
}

.streamlined-approval-history-workspace .approval-history-date-range-filter summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  width: 100%;
  max-width: none;
  padding: 6px 10px;
  border-radius: 6px;
  color: #66676c;
  font-size: 13px;
  font-weight: 650;
  list-style: none;
  cursor: pointer;
}

.streamlined-approval-history-workspace .approval-history-date-range-filter summary::-webkit-details-marker {
  display: none;
}

.streamlined-approval-history-workspace .approval-history-date-range-filter summary > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.streamlined-approval-history-workspace .approval-history-date-range-filter summary:hover,
.streamlined-approval-history-workspace .approval-history-date-range-filter[open] summary {
  background: #f1f2f4;
  color: var(--text);
}

.streamlined-approval-history-workspace .approval-history-date-range-filter.is-filtered summary {
  background: #edf2fb;
  color: #315fb5;
}

.streamlined-approval-history-workspace .approval-history-date-range-panel {
  position: absolute;
  z-index: 35;
  top: calc(100% + 6px);
  left: 0;
  width: 270px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 30px rgb(32 31 28 / 12%);
}

.streamlined-approval-history-workspace .approval-history-date-range-panel > p {
  margin: 0 4px 8px;
  color: var(--muted);
  font-size: 12px;
}

.streamlined-approval-history-workspace .approval-history-date-range-options {
  display: grid;
  gap: 2px;
}

.streamlined-approval-history-workspace .approval-history-date-range-options button {
  min-height: 36px;
  padding: 7px 8px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  text-align: left;
}

.streamlined-approval-history-workspace .approval-history-date-range-options button:hover,
.streamlined-approval-history-workspace .approval-history-date-range-options button[aria-pressed="true"] {
  background: #edf2fb;
  color: #315fb5;
}

.streamlined-approval-history-workspace .approval-history-custom-dates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.streamlined-approval-history-workspace .approval-history-custom-dates[hidden] {
  display: none;
}

.streamlined-approval-history-workspace .approval-history-custom-dates label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.streamlined-approval-history-workspace .approval-history-custom-dates input {
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  font-size: 12px;
}

.streamlined-approval-history-workspace .approval-history-filter-form > label > input:hover,
.streamlined-approval-history-workspace .approval-history-filter-form > label > select:hover {
  background: #f7f7f8;
}

.streamlined-approval-history-workspace .approval-history-filter-form input:focus,
.streamlined-approval-history-workspace .approval-history-filter-form select:focus {
  border-color: #3f70cf;
  background: #fff;
  box-shadow: 0 0 0 1px #3f70cf;
}

.streamlined-approval-history-workspace .approval-history-filter-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 0;
}

.streamlined-approval-history-workspace .approval-history-filter-actions:not(:has(button:not([hidden]))) {
  display: none;
}

.streamlined-approval-history-workspace .approval-history-filter-actions .secondary-button {
  width: auto;
  min-width: 48px;
  height: 34px;
  white-space: nowrap;
  border-color: transparent;
  background: transparent;
  color: #67686d;
}

.streamlined-approval-history-workspace .approval-history-filter-actions .secondary-button:hover {
  background: #efefec;
}

/* Attendance approvals: compact the same information hierarchy used by the other approval lists. */
.approval-review-page .attendance-review-scroll table {
  min-width: 900px;
  table-layout: auto;
}

.approval-review-page .attendance-review-scroll :is(th, td):nth-child(3) { min-width: 180px; }
.approval-review-page .attendance-review-scroll :is(th, td):nth-child(4) { min-width: 280px; }

.approval-review-page .overtime-review-scroll table {
  min-width: 980px;
  table-layout: auto;
}

.approval-review-page .overtime-review-scroll :is(th, td):nth-child(3) { min-width: 320px; }
.approval-review-page .overtime-review-scroll :is(th, td):nth-child(4) { min-width: 104px; }
.approval-review-page .overtime-review-scroll :is(th, td):nth-child(5) { min-width: 112px; }

.attendance-review-applicant-cell > strong,
.attendance-review-applicant-cell > small,
.attendance-review-content-cell > strong,
.attendance-review-content-cell > small,
.overtime-review-content-cell > strong,
.overtime-review-content-cell > small,
.overtime-review-hours-cell > strong,
.overtime-review-hours-cell > small {
  display: block;
}

.attendance-review-applicant-cell > strong,
.attendance-review-content-cell > strong,
.overtime-review-content-cell > strong,
.overtime-review-hours-cell > strong {
  font-size: 13px;
  font-weight: 720;
  line-height: 1.4;
}

.attendance-review-applicant-cell > small,
.attendance-review-content-cell > small,
.overtime-review-content-cell > small,
.overtime-review-hours-cell > small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.overtime-review-content-cell > small .approval-clamped-text {
  display: block;
  margin-top: 2px;
}

@media (max-width: 900px) {
  .streamlined-approval-history-workspace .approval-history-filter-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px 10px;
  }

  .streamlined-approval-history-workspace .approval-history-search-filter {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }

  .streamlined-approval-history-workspace .approval-history-select-filter select,
  .streamlined-approval-history-workspace .approval-history-date-range-filter,
  .streamlined-approval-history-workspace .approval-history-date-range-filter summary {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .streamlined-approval-history-workspace .approval-history-date-range-panel {
    width: min(320px, calc(100vw - 48px));
  }

  .streamlined-approval-history-workspace .approval-history-filter-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
    margin-left: 0;
  }
}

@media (max-width: 700px) {
  .streamlined-approval-history-workspace .approval-history-filter-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .streamlined-approval-history-workspace .approval-history-filter-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .streamlined-approval-history-workspace .approval-history-search-filter,
  .streamlined-approval-history-workspace .approval-history-filter-actions {
    grid-column: auto;
  }

  .streamlined-approval-history-workspace .approval-history-date-range-panel {
    width: min(300px, calc(100vw - 32px));
  }
}

#costReviewDetailModal #costReviewDetailRejectButton {
  border-color: #c94f4f;
  background: #c94f4f;
  color: #fff;
}

#costReviewDetailModal #costReviewDetailRejectButton:hover {
  border-color: #b84444;
  background: #b84444;
}

#costReviewDetailModal #costReviewDetailCloseButton {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

#costReviewDetailModal #costReviewDetailCloseButton:hover {
  border-color: transparent;
  background: #edf2fa;
}

/* Leave review: condensed list and shared approval-detail language. */
.approval-review-page .leave-review-table-scroll .leave-review-table {
  min-width: 980px;
  table-layout: auto;
}

.approval-review-page .leave-review-table-scroll :is(th, td):nth-child(3) { min-width: 260px; }
.approval-review-page .leave-review-table-scroll :is(th, td):nth-child(4) { min-width: 200px; }

.leave-review-applicant-cell > strong,
.leave-review-applicant-cell > small,
.leave-review-content-cell > strong,
.leave-review-content-cell > small,
.leave-review-content-cell > span,
.leave-review-period-cell > strong,
.leave-review-period-cell > small,
.leave-review-hours-cell > strong,
.leave-review-hours-cell > small {
  display: block;
}

.leave-review-applicant-cell > strong,
.leave-review-content-cell > strong,
.leave-review-period-cell > strong,
.leave-review-hours-cell > strong {
  font-size: 13px;
  font-weight: 720;
  line-height: 1.4;
}

.leave-review-applicant-cell > small,
.leave-review-content-cell > small,
.leave-review-content-cell > span,
.leave-review-period-cell > small,
.leave-review-hours-cell > small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.leave-review-content-cell > small {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.leave-review-content-cell > span {
  color: #a36a18;
  font-weight: 680;
}

.leave-review-period-cell > small > span {
  margin-right: 5px;
  color: #77787d;
  font-weight: 650;
}

.leave-review-hours-cell {
  font-variant-numeric: tabular-nums;
}

#leaveReviewDetailApproveButton {
  border-color: #3f70cf;
  background: #3f70cf;
  color: #fff;
}

#leaveReviewDetailApproveButton:hover {
  border-color: #315fb5;
  background: #315fb5;
}

.leave-review-detail-summary-metrics {
  grid-template-columns: minmax(112px, auto) minmax(92px, auto);
}

.leave-review-capacity-warning {
  display: grid;
  gap: 3px;
  margin-top: 18px;
  padding: 10px 14px;
  border-left: 3px solid #d79531;
  background: #fff9ee;
  color: #875815;
}

.leave-review-capacity-warning strong {
  font-size: 12px;
}

.leave-review-capacity-warning span {
  font-size: 11px;
  line-height: 1.45;
}

.leave-review-detail-approvals-section > header {
  margin-bottom: 10px;
}

.leave-review-detail-approval-list {
  border-top: 1px solid #e7eaf0;
}

.leave-review-detail-approval {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) minmax(125px, auto);
  align-items: center;
  gap: 14px;
  min-height: 54px;
  padding: 9px 0;
  border-bottom: 1px solid #eceff4;
}

.leave-review-detail-approval > span {
  color: #3f70cf;
  font-size: 11px;
  font-weight: 780;
}

.leave-review-detail-approval > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.leave-review-detail-approval > div:last-child {
  justify-items: end;
}

.leave-review-detail-approval strong {
  font-size: 13px;
}

.leave-review-detail-approval small,
.leave-review-detail-empty {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.leave-review-detail-empty {
  margin: 0;
  padding: 14px 0;
  border-top: 1px solid #e7eaf0;
}

.leave-review-decision-form {
  display: grid;
  gap: 11px;
  padding: 16px 24px 18px;
  border-top: 1px solid #dce4f2;
  background: #f8faff;
}

.leave-review-decision-form[hidden] {
  display: none;
}

.leave-review-decision-copy {
  display: grid;
  gap: 3px;
}

.leave-review-decision-copy strong {
  font-size: 14px;
}

.leave-review-decision-copy span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.leave-review-decision-form label {
  display: grid;
  gap: 7px;
  color: #4e5560;
  font-size: 12px;
  font-weight: 760;
}

.leave-review-decision-form textarea {
  width: 100%;
  min-height: 78px;
  max-height: 160px;
  padding: 10px 12px;
  resize: vertical;
  border: 1px solid #c9d3e4;
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  font: inherit;
  line-height: 1.5;
}

.leave-review-decision-form textarea:focus {
  border-color: #3f70cf;
  outline: 0;
  box-shadow: 0 0 0 2px rgb(63 112 207 / 14%);
}

.leave-review-decision-form .form-message {
  min-height: 0;
  margin: 0;
}

.leave-review-decision-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.leave-review-decision-actions button {
  width: 104px;
  min-width: 104px;
  height: 38px;
  padding: 0 14px;
}

#leaveReviewDecisionConfirmButton {
  border-color: #3f70cf;
  background: #3f70cf;
  color: #fff;
}

#leaveReviewDecisionConfirmButton:hover {
  border-color: #315fb5;
  background: #315fb5;
}

#leaveReviewDecisionConfirmButton.is-reject {
  border-color: #c94f4f;
  background: #c94f4f;
}

#leaveReviewDecisionConfirmButton.is-reject:hover {
  border-color: #b84444;
  background: #b84444;
}

@media (max-width: 640px) {
  .leave-review-detail-summary-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .leave-review-detail-approval {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .leave-review-detail-approval > div:last-child {
    grid-column: 2;
    justify-items: start;
  }

  .leave-review-decision-form {
    padding-inline: 18px;
  }

  .leave-review-decision-actions button {
    flex: 1 1 0;
    width: auto;
  }
}

#costReviewDetailModal .purchase-review-detail-modal {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

/* Finance and Taobao purchasing share the project overview table language. */
#taobaoProcessingWorkspace .taobao-processing-table-wrap,
#purchasePaymentPage .purchase-payment-table-scroll {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  scrollbar-gutter: stable;
  overscroll-behavior-inline: contain;
}

#taobaoProcessingWorkspace .taobao-processing-table {
  width: 100%;
  min-width: 1000px;
  table-layout: fixed;
  border-collapse: collapse;
}

#taobaoProcessingWorkspace .taobao-processing-item-column { width: 260px; }
#taobaoProcessingWorkspace .taobao-processing-requester-column { width: 115px; }
#taobaoProcessingWorkspace .taobao-processing-purchase-column { width: 105px; }
#taobaoProcessingWorkspace .taobao-processing-amount-column { width: 180px; }
#taobaoProcessingWorkspace .taobao-processing-date-column { width: 185px; }
#taobaoProcessingWorkspace .taobao-processing-status-column { width: 110px; }
#taobaoProcessingWorkspace .taobao-processing-action-column { width: var(--table-tools-column-width); }

#taobaoProcessingWorkspace .taobao-processing-table th,
#taobaoProcessingWorkspace .taobao-processing-table td {
  box-sizing: border-box;
  min-width: 0;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
  vertical-align: middle;
}

#taobaoProcessingWorkspace .taobao-processing-table th {
  height: 40px;
  padding-block: 8px;
  border-bottom-color: var(--line);
  color: #66676b;
  font-size: 12px;
  font-weight: 760;
  white-space: nowrap;
}

#taobaoProcessingWorkspace .taobao-processing-record-row td {
  height: 72px;
}

#taobaoProcessingWorkspace .taobao-processing-table tbody tr.action-required-row td {
  background: transparent;
}

#taobaoProcessingWorkspace .taobao-processing-table tbody tr:hover td,
#taobaoProcessingWorkspace .taobao-processing-table tbody tr.action-required-row:hover td {
  background: #f8f8f9;
}

#taobaoProcessingWorkspace .taobao-processing-table tbody tr.action-required-row td:first-child {
  box-shadow: none;
}

#taobaoProcessingWorkspace .taobao-processing-item-cell,
#taobaoProcessingWorkspace .taobao-processing-requester-cell,
#taobaoProcessingWorkspace .taobao-processing-purchase-cell,
#taobaoProcessingWorkspace .taobao-processing-amount-cell,
#taobaoProcessingWorkspace .taobao-needed-date-cell,
#taobaoProcessingWorkspace .taobao-processing-status-cell {
  overflow: hidden;
}

#taobaoProcessingWorkspace .taobao-processing-item-cell strong,
#taobaoProcessingWorkspace .taobao-processing-requester-cell strong,
#taobaoProcessingWorkspace .taobao-processing-purchase-cell strong,
#taobaoProcessingWorkspace .taobao-processing-amount-cell strong,
#taobaoProcessingWorkspace .taobao-needed-date-cell > strong {
  display: block;
  overflow: hidden;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#taobaoProcessingWorkspace .taobao-processing-record-row .table-subtext {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: #818288;
  font-size: 11px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#taobaoProcessingWorkspace .taobao-processing-links a {
  white-space: nowrap;
}

#taobaoProcessingWorkspace .taobao-processing-number-heading,
#taobaoProcessingWorkspace .taobao-processing-amount-cell {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

#taobaoProcessingWorkspace .taobao-processing-status-cell {
  white-space: nowrap;
}

#taobaoProcessingWorkspace .taobao-processing-row-tools {
  display: inline-flex;
}

#taobaoProcessingWorkspace .taobao-processing-row-tools .quotation-list-tools-menu {
  right: 0;
  left: auto;
  min-width: 132px;
}

#taobaoProcessingWorkspace .taobao-processing-table .personal-record-tools-column,
#taobaoProcessingWorkspace .taobao-processing-table .personal-record-tools-cell {
  background: transparent;
}

#taobaoProcessingWorkspace .taobao-processing-table .empty-cell {
  height: 44px;
  text-align: center;
}

#taobaoProcessingWorkspace > .table-pagination {
  padding: 14px 2px 4px;
}

#purchasePaymentPage .purchase-payment-table {
  width: 100%;
  min-width: 960px;
  table-layout: fixed;
  border-collapse: collapse;
}

#purchasePaymentPage .purchase-payment-vendor-column {
  width: auto;
}

#purchasePaymentPage .purchase-payment-item-column {
  width: 270px;
}

#purchasePaymentPage .purchase-payment-requester-column {
  width: 96px;
}

#purchasePaymentPage .purchase-payment-timing-column {
  width: 142px;
}

#purchasePaymentPage .purchase-payment-amount-column {
  width: 142px;
}

#purchasePaymentPage .purchase-payment-status-column {
  width: 150px;
}

#purchasePaymentPage .purchase-payment-action-column {
  width: var(--table-tools-column-width);
}

#purchasePaymentPage .purchase-payment-table th,
#purchasePaymentPage .purchase-payment-table td {
  box-sizing: border-box;
  min-width: 0;
  border-bottom: 1px solid var(--line-soft);
  padding-right: 14px;
  padding-left: 14px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
  vertical-align: middle;
}

#purchasePaymentPage .purchase-payment-table th {
  height: 40px;
  padding-block: 8px;
  border-bottom-color: var(--line);
  color: #66676b;
  font-size: 12px;
  font-weight: 760;
  white-space: nowrap;
}

#purchasePaymentPage .purchase-payment-record-row td {
  height: 68px;
  padding-block: 9px;
}

#purchasePaymentPage .purchase-payment-table tbody tr:first-child td {
  border-top: 0;
}

#purchasePaymentPage .purchase-payment-table tbody tr.action-required-row td,
#purchasePaymentPage .purchase-payment-table tbody tr.purchase-payment-completed-row td {
  background: transparent;
}

#purchasePaymentPage .purchase-payment-table tbody tr:hover td,
#purchasePaymentPage .purchase-payment-table tbody tr.action-required-row:hover td,
#purchasePaymentPage .purchase-payment-table tbody tr.purchase-payment-completed-row:hover td {
  background: #f8f8f9;
}

#purchasePaymentPage .purchase-payment-table tbody tr.action-required-row td:first-child,
#purchasePaymentPage .purchase-payment-table tbody tr.purchase-payment-completed-row td:first-child {
  box-shadow: none;
}

#purchasePaymentPage .purchase-payment-item-cell,
#purchasePaymentPage .purchase-payment-vendor-cell,
#purchasePaymentPage .purchase-payment-timing-cell,
#purchasePaymentPage .purchase-payment-status-cell {
  overflow: hidden;
}

#purchasePaymentPage .purchase-payment-item-cell strong,
#purchasePaymentPage .purchase-payment-timing-cell strong,
#purchasePaymentPage .purchase-payment-number-cell strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#purchasePaymentPage .purchase-payment-record-row .table-subtext {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: #818288;
  font-size: 11px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#purchasePaymentPage .purchase-payment-vendor-cell {
  color: #5f6065;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#purchasePaymentPage .purchase-payment-requester-cell,
#purchasePaymentPage .purchase-payment-timing-cell,
#purchasePaymentPage .purchase-payment-number-cell,
#purchasePaymentPage .purchase-payment-status-cell {
  white-space: nowrap;
}

#purchasePaymentPage .purchase-payment-number-heading,
#purchasePaymentPage .purchase-payment-number-cell {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

#purchasePaymentPage .purchase-payment-tools {
  display: inline-flex;
}

#purchasePaymentPage .purchase-payment-tools .quotation-list-tools-menu {
  right: 0;
  left: auto;
  min-width: 132px;
  max-width: calc(100vw - 16px);
}

#purchasePaymentPage .purchase-payment-no-actions {
  color: #a0a1a5;
}

#purchasePaymentPage .purchase-payment-table .personal-record-tools-column,
#purchasePaymentPage .purchase-payment-table .personal-record-tools-cell {
  background: transparent;
}

#purchasePaymentPage .purchase-payment-table .empty-cell {
  height: 44px;
  background: transparent;
  text-align: center;
}

#purchasePaymentPage > .table-pagination {
  padding: 14px 2px 4px;
}

/* Vendor payments share the compact finance-list hierarchy. */
#vendorPaymentPage .finance-page-header {
  align-items: center;
  padding: 0 0 8px;
  border-bottom: 0;
}

#vendorPaymentPage .finance-page-header p {
  display: none;
}

#vendorPaymentPage .vendor-payment-filter-toolbar {
  padding: 8px 0 14px;
}

#vendorPaymentPage .vendor-payment-table-scroll {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  scrollbar-gutter: stable;
  overscroll-behavior-inline: contain;
}

#vendorPaymentPage .vendor-payment-table {
  width: 100%;
  min-width: 920px;
  table-layout: fixed;
  border-collapse: collapse;
}

#vendorPaymentPage .vendor-payment-item-column {
  width: 270px;
}

#vendorPaymentPage .vendor-payment-vendor-column {
  width: auto;
}

#vendorPaymentPage .vendor-payment-claim-column {
  width: 170px;
}

#vendorPaymentPage .vendor-payment-amount-column {
  width: 135px;
}

#vendorPaymentPage .vendor-payment-status-column {
  width: 150px;
}

#vendorPaymentPage .vendor-payment-action-column {
  width: var(--table-tools-column-width);
}

#vendorPaymentPage .vendor-payment-table th,
#vendorPaymentPage .vendor-payment-table td {
  box-sizing: border-box;
  min-width: 0;
  padding-right: 14px;
  padding-left: 14px;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
  vertical-align: middle;
}

#vendorPaymentPage .vendor-payment-table th {
  height: 40px;
  padding-block: 8px;
  border-bottom-color: var(--line);
  color: #66676b;
  font-size: 12px;
  font-weight: 760;
  white-space: nowrap;
}

#vendorPaymentPage .vendor-payment-record-row td {
  height: 68px;
  padding-block: 9px;
}

#vendorPaymentPage .vendor-payment-table tbody tr.action-required-row td,
#vendorPaymentPage .vendor-payment-table tbody tr.purchase-payment-completed-row td {
  background: transparent;
}

#vendorPaymentPage .vendor-payment-table tbody tr:hover td,
#vendorPaymentPage .vendor-payment-table tbody tr.action-required-row:hover td,
#vendorPaymentPage .vendor-payment-table tbody tr.purchase-payment-completed-row:hover td {
  background: #f8f8f9;
}

#vendorPaymentPage .vendor-payment-table tbody tr.action-required-row td:first-child,
#vendorPaymentPage .vendor-payment-table tbody tr.purchase-payment-completed-row td:first-child {
  box-shadow: none;
}

#vendorPaymentPage .vendor-payment-item-cell,
#vendorPaymentPage .vendor-payment-vendor-cell,
#vendorPaymentPage .vendor-payment-claim-cell,
#vendorPaymentPage .vendor-payment-status-cell {
  overflow: hidden;
}

#vendorPaymentPage .vendor-payment-record-row strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#vendorPaymentPage .vendor-payment-record-row .table-subtext {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: #818288;
  font-size: 11px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#vendorPaymentPage .vendor-payment-number-heading,
#vendorPaymentPage .vendor-payment-number-cell {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

#vendorPaymentPage .vendor-payment-status-cell {
  white-space: nowrap;
}

#vendorPaymentPage .vendor-payment-tools {
  display: inline-flex;
}

#vendorPaymentPage .vendor-payment-tools .quotation-list-tools-menu {
  right: 0;
  left: auto;
  min-width: 132px;
}

#vendorPaymentPage .vendor-payment-table .personal-record-tools-column,
#vendorPaymentPage .vendor-payment-table .personal-record-tools-cell {
  background: transparent;
}

#vendorPaymentPage .vendor-payment-table .empty-cell {
  height: 44px;
  text-align: center;
}

#vendorPaymentPage > .table-pagination {
  padding: 14px 2px 4px;
}

@media (max-width: 760px) {
  #vendorPaymentPage .vendor-payment-table {
    min-width: 860px;
  }

  #purchasePaymentPage .purchase-payment-table {
    min-width: 920px;
  }
}

/* Financial purchase payment follows the reimbursement detail hierarchy. */
#purchasePaymentModal .purchase-payment-modal {
  width: min(920px, calc(100vw - 32px));
  max-height: min(820px, calc(100dvh - 32px));
  overflow: hidden;
}

#purchasePaymentModal .purchase-payment-modal-body {
  min-height: 0;
  overflow-y: auto;
  padding: 0 24px 24px;
}

#purchasePaymentModal #purchasePaymentCloseButton {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  align-self: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #686b73;
  font-size: 22px;
  line-height: 1;
  box-shadow: none;
}

#purchasePaymentModal #purchasePaymentCloseButton:hover {
  background: #e9eef6;
  color: #25272b;
}

#purchasePaymentModal #purchasePaymentCloseButton:focus-visible {
  outline: 2px solid #7094d8;
  outline-offset: 2px;
}

#purchasePaymentModal .purchase-payment-request {
  display: block;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#purchasePaymentModal .purchase-payment-request > .purchase-review-detail-note,
#purchasePaymentModal .purchase-payment-request > .payment-correction-history {
  padding: 14px 16px;
  border: 0;
  border-left: 3px solid #8aa8df;
  border-radius: 0;
  background: #f7faff;
}

#purchasePaymentModal .purchase-payment-entry-section {
  padding-top: 22px;
}

#purchasePaymentModal .purchase-payment-fields {
  gap: 16px 18px;
  margin-top: 10px;
  padding: 16px 18px 18px;
  border-left: 3px solid #8aa8df;
  background: #f7faff;
}

#purchasePaymentModal .purchase-payment-fields label {
  gap: 7px;
  color: #707684;
  font-size: 12px;
  font-weight: 720;
}

#purchasePaymentModal #purchasePaymentPayerField:not([hidden]) {
  display: grid;
}

#purchasePaymentModal .purchase-payment-fields input,
#purchasePaymentModal .purchase-payment-fields select,
#purchasePaymentModal .purchase-payment-fields textarea {
  border-color: #dce3ee;
  background: #fff;
  color: var(--text);
  font-size: 14px;
  font-weight: 620;
}

#purchasePaymentModal .purchase-payment-fields input:focus,
#purchasePaymentModal .purchase-payment-fields select:focus,
#purchasePaymentModal .purchase-payment-fields textarea:focus {
  border-color: #7094d8;
  box-shadow: 0 0 0 3px rgb(63 112 207 / 12%);
}

#purchasePaymentModal .purchase-payment-proof-field {
  position: relative;
}

#purchasePaymentModal .purchase-payment-proof-dropzone {
  display: flex;
  min-height: 74px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px dashed #c9cdd5;
  border-radius: 7px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

#purchasePaymentModal .purchase-payment-proof-dropzone:hover,
#purchasePaymentModal .purchase-payment-proof-dropzone:focus-visible,
#purchasePaymentModal .purchase-payment-proof-dropzone.is-dragging {
  border-color: #7094d8;
  outline: none;
  background: #f2f6fd;
  color: #3f70cf;
}

#purchasePaymentModal .purchase-payment-proof-dropzone.has-file {
  border-style: solid;
  border-color: #9dbba5;
  background: #f4faf5;
  color: #347246;
}

#purchasePaymentModal .purchase-payment-proof-dropzone > svg {
  width: 23px;
  height: 23px;
  flex: 0 0 23px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

#purchasePaymentModal .purchase-payment-proof-dropzone > span {
  display: grid;
  min-width: 0;
  gap: 4px;
}

#purchasePaymentModal .purchase-payment-proof-dropzone strong {
  overflow: hidden;
  color: currentColor;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#purchasePaymentModal .purchase-payment-proof-dropzone small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

#purchasePaymentModal .purchase-payment-proof-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

#purchasePaymentModal .purchase-payment-actions {
  align-items: center;
  gap: 8px;
  margin: 0;
}

#purchasePaymentModal .purchase-payment-actions .form-message {
  margin-right: auto;
}

#purchasePaymentModal .purchase-payment-actions button[type="submit"] {
  border-color: #3f70cf;
  background: #3f70cf;
  color: #fff;
}

#purchasePaymentModal .purchase-payment-actions button[type="submit"]:hover {
  border-color: #315faf;
  background: #315faf;
}

@media (max-width: 640px) {
  #purchasePaymentModal .purchase-payment-modal {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
  }

  #purchasePaymentModal .purchase-payment-modal-body {
    padding-inline: 18px;
  }

  #purchasePaymentModal .purchase-payment-fields {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: 14px;
  }

  #purchasePaymentModal .purchase-payment-fields .span-2 {
    grid-column: auto;
  }

  #purchasePaymentModal .purchase-payment-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  #purchasePaymentModal .purchase-payment-actions .form-message {
    grid-column: 1 / -1;
    margin: 0;
  }
}

/* Vendor claims reuse the purchasing-detail modal instead of the legacy data grid. */
#vendorPaymentModal .vendor-payment-modal {
  width: min(920px, calc(100vw - 32px));
  max-height: min(820px, calc(100dvh - 32px));
  overflow: hidden;
}

#vendorPaymentModal .purchase-payment-modal-body {
  min-height: 0;
  overflow-y: auto;
  padding: 0 24px 24px;
}

#vendorPaymentModal #vendorPaymentCloseButton {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  align-self: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #686b73;
  font-size: 22px;
  line-height: 1;
  box-shadow: none;
}

#vendorPaymentModal #vendorPaymentCloseButton:hover {
  background: #e9eef6;
  color: #25272b;
}

#vendorPaymentModal #vendorPaymentCloseButton:focus-visible {
  outline: 2px solid #7094d8;
  outline-offset: 2px;
}

#vendorPaymentModal .purchase-payment-request {
  display: block;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#vendorPaymentModal .vendor-payment-entry-section {
  padding-top: 22px;
}

#vendorPaymentModal .purchase-payment-fields {
  gap: 16px 18px;
  margin-top: 10px;
  padding: 16px 18px 18px;
  border-left: 3px solid #8aa8df;
  background: #f7faff;
}

#vendorPaymentModal .purchase-payment-fields label {
  gap: 7px;
  color: #707684;
  font-size: 12px;
  font-weight: 720;
}

#vendorPaymentModal .purchase-payment-fields input,
#vendorPaymentModal .purchase-payment-fields select,
#vendorPaymentModal .purchase-payment-fields textarea {
  border-color: #dce3ee;
  background: #fff;
  color: var(--text);
  font-size: 14px;
  font-weight: 620;
}

#vendorPaymentModal .purchase-payment-fields input:focus,
#vendorPaymentModal .purchase-payment-fields select:focus,
#vendorPaymentModal .purchase-payment-fields textarea:focus {
  border-color: #7094d8;
  box-shadow: 0 0 0 3px rgb(63 112 207 / 12%);
}

#vendorPaymentModal .vendor-payment-proof-field {
  position: relative;
}

#vendorPaymentModal .vendor-payment-proof-dropzone {
  display: flex;
  min-height: 74px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px dashed #c9cdd5;
  border-radius: 7px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

#vendorPaymentModal .vendor-payment-proof-dropzone:hover,
#vendorPaymentModal .vendor-payment-proof-dropzone:focus-visible,
#vendorPaymentModal .vendor-payment-proof-dropzone.is-dragging {
  border-color: #7094d8;
  outline: none;
  background: #f2f6fd;
  color: #3f70cf;
}

#vendorPaymentModal .vendor-payment-proof-dropzone.has-file {
  border-style: solid;
  border-color: #9dbba5;
  background: #f4faf5;
  color: #347246;
}

#vendorPaymentModal .vendor-payment-proof-dropzone > svg {
  width: 23px;
  height: 23px;
  flex: 0 0 23px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

#vendorPaymentModal .vendor-payment-proof-dropzone > span {
  display: grid;
  min-width: 0;
  gap: 4px;
}

#vendorPaymentModal .vendor-payment-proof-dropzone strong {
  overflow: hidden;
  color: currentColor;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#vendorPaymentModal .vendor-payment-proof-dropzone small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

#vendorPaymentModal .vendor-payment-proof-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

#vendorPaymentModal .vendor-payment-detail-tools {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

#vendorPaymentModal .vendor-payment-detail-tools > button,
#vendorPaymentModal .vendor-payment-correction-history > summary {
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid #d9dee7;
  border-radius: 7px;
  background: #fff;
  color: #555b66;
  font-size: 12px;
  font-weight: 720;
  line-height: 18px;
  cursor: pointer;
  list-style: none;
}

#vendorPaymentModal .vendor-payment-correction-history > summary::-webkit-details-marker {
  display: none;
}

#vendorPaymentModal .vendor-payment-detail-tools > button:hover,
#vendorPaymentModal .vendor-payment-correction-history > summary:hover {
  border-color: #9eb4dc;
  background: #f5f8fd;
  color: #315faf;
}

#vendorPaymentModal .vendor-payment-correction-history[open] {
  width: min(100%, 600px);
}

#vendorPaymentModal .vendor-payment-correction-history[open] > summary {
  width: max-content;
  margin-left: auto;
  border-color: #9eb4dc;
  background: #f2f6fd;
  color: #315faf;
}

#vendorPaymentModal .vendor-payment-correction-history .payment-correction-history {
  margin-top: 8px;
  padding: 12px 14px;
  border: 1px solid #e4e9f1;
  border-radius: 7px;
  background: #f8fafc;
}

#vendorPaymentModal .vendor-payment-correction-history .payment-correction-history > span {
  display: none;
}

#vendorPaymentModal .vendor-payment-correction-history .payment-correction-history > strong {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

#vendorPaymentModal .purchase-payment-actions {
  align-items: center;
  gap: 8px;
  margin: 0;
}

#vendorPaymentModal .purchase-payment-actions .form-message {
  margin-right: auto;
}

#vendorPaymentModal .purchase-payment-actions button[type="submit"] {
  border-color: #3f70cf;
  background: #3f70cf;
  color: #fff;
}

#vendorPaymentModal .purchase-payment-actions button[type="submit"]:hover {
  border-color: #315faf;
  background: #315faf;
}

/* Payment corrections use the same structured hierarchy as the payment detail. */
#paymentCorrectionModal .payment-correction-modal {
  width: min(760px, calc(100vw - 32px));
  max-height: min(720px, calc(100dvh - 32px));
  overflow: hidden;
}

#paymentCorrectionModal .purchase-payment-modal-body {
  min-height: 0;
  overflow-y: auto;
  padding: 0 24px 24px;
}

#paymentCorrectionModal #paymentCorrectionCloseButton {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  align-self: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #686b73;
  font-size: 22px;
  line-height: 1;
  box-shadow: none;
}

#paymentCorrectionModal #paymentCorrectionCloseButton:hover {
  background: #e9eef6;
  color: #25272b;
}

#paymentCorrectionModal #paymentCorrectionCloseButton:focus-visible {
  outline: 2px solid #7094d8;
  outline-offset: 2px;
}

#paymentCorrectionModal .purchase-payment-request {
  display: block;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#paymentCorrectionModal .payment-correction-form-section {
  padding-top: 22px;
}

#paymentCorrectionModal .payment-correction-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: 10px;
  padding: 16px 18px 18px;
  border-left: 3px solid #8aa8df;
  background: #f7faff;
}

#paymentCorrectionModal .payment-correction-fields label {
  display: grid;
  gap: 7px;
  color: #707684;
  font-size: 12px;
  font-weight: 720;
}

#paymentCorrectionModal .payment-correction-fields textarea {
  min-height: 118px;
  border-color: #dce3ee;
  background: #fff;
  color: var(--text);
  font-size: 14px;
  font-weight: 620;
  line-height: 1.55;
  resize: vertical;
}

#paymentCorrectionModal .payment-correction-fields textarea:focus {
  border-color: #7094d8;
  box-shadow: 0 0 0 3px rgb(63 112 207 / 12%);
}

#paymentCorrectionModal .payment-correction-guidance {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid #f0dfb9;
  border-radius: 8px;
  background: #fffaf0;
  color: #91651c;
}

#paymentCorrectionModal .payment-correction-guidance > svg {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  margin-top: 1px;
}

#paymentCorrectionModal .payment-correction-guidance p {
  display: grid;
  gap: 3px;
  margin: 0;
}

#paymentCorrectionModal .payment-correction-guidance strong {
  color: #775113;
  font-size: 12px;
}

#paymentCorrectionModal .payment-correction-guidance span {
  color: #8a7652;
  font-size: 11px;
  line-height: 1.55;
}

#paymentCorrectionModal .payment-correction-actions {
  align-items: center;
  gap: 8px;
  margin: 0;
}

#paymentCorrectionModal .payment-correction-actions .form-message {
  margin-right: auto;
}

#paymentCorrectionModal .payment-correction-actions button[type="submit"] {
  border-color: #3f70cf;
  background: #3f70cf;
  color: #fff;
}

#paymentCorrectionModal .payment-correction-actions button[type="submit"]:hover {
  border-color: #315faf;
  background: #315faf;
}

@media (max-width: 640px) {
  #vendorPaymentModal .vendor-payment-modal {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
  }

  #vendorPaymentModal .purchase-payment-modal-body {
    padding-inline: 18px;
  }

  #vendorPaymentModal .purchase-payment-fields {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: 14px;
  }

  #vendorPaymentModal .purchase-payment-fields .span-2 {
    grid-column: auto;
  }

  #vendorPaymentModal .vendor-payment-detail-tools {
    align-items: stretch;
    flex-direction: column;
  }

  #vendorPaymentModal .vendor-payment-correction-history,
  #vendorPaymentModal .vendor-payment-correction-history[open] {
    width: 100%;
  }

  #vendorPaymentModal .vendor-payment-correction-history > summary,
  #vendorPaymentModal .vendor-payment-correction-history[open] > summary,
  #vendorPaymentModal .vendor-payment-detail-tools > button {
    width: 100%;
    margin: 0;
    text-align: center;
  }

  #paymentCorrectionModal .payment-correction-modal {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
  }

  #paymentCorrectionModal .purchase-payment-modal-body {
    padding-inline: 18px;
  }

  #paymentCorrectionModal .payment-correction-fields {
    padding-inline: 14px;
  }

  #paymentCorrectionModal .payment-correction-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  #paymentCorrectionModal .payment-correction-actions .form-message {
    grid-column: 1 / -1;
    margin: 0;
  }
}

/* Taobao purchase processing follows the shared purchasing detail modal hierarchy. */
#taobaoProcessingModal .taobao-processing-modal {
  width: min(920px, calc(100vw - 32px));
  max-height: min(820px, calc(100dvh - 32px));
  overflow: hidden;
}

#taobaoProcessingModal .taobao-processing-modal-body {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 24px 24px;
}

#taobaoProcessingModal .taobao-processing-modal-body > *,
#taobaoProcessingModal .purchase-review-detail-grid,
#taobaoProcessingModal .purchase-payment-fields,
#taobaoProcessingModal .purchase-payment-fields > * {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

#taobaoProcessingModal #taobaoProcessingCloseButton {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  align-self: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #686b73;
  font-size: 22px;
  line-height: 1;
  box-shadow: none;
}

#taobaoProcessingModal #taobaoProcessingCloseButton:hover {
  background: #e9eef6;
  color: #25272b;
}

#taobaoProcessingModal #taobaoProcessingCloseButton:focus-visible {
  outline: 2px solid #7094d8;
  outline-offset: 2px;
}

#taobaoProcessingModal .taobao-processing-header-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

#taobaoProcessingModal .taobao-processing-header-tool {
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #626975;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

#taobaoProcessingModal .taobao-processing-header-tool:hover,
#taobaoProcessingModal .taobao-processing-header-tool[aria-pressed="true"] {
  border-color: #d8e2f1;
  background: #edf3fc;
  color: #315faf;
}

#taobaoProcessingModal .taobao-processing-header-tool.has-alert::before {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: #d6922c;
  content: "";
  vertical-align: 1px;
}

#taobaoProcessingModal .taobao-processing-back-button {
  display: grid;
  width: 34px;
  min-width: 34px;
  height: 34px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #5f6672;
  font-size: 20px;
  line-height: 1;
}

#taobaoProcessingModal .taobao-processing-back-button:hover {
  background: #e9eef6;
  color: #25272b;
}

#taobaoProcessingModal .taobao-processing-back-button:focus-visible {
  outline: 2px solid #7094d8;
  outline-offset: 2px;
}

#taobaoProcessingModal .taobao-processing-back-button[hidden] {
  display: none;
}

#taobaoProcessingModal .taobao-processing-modal[data-view="exception"] .purchase-review-detail-heading-icon,
#taobaoProcessingModal .taobao-processing-modal[data-view="history"] .purchase-review-detail-heading-icon {
  display: none;
}

#taobaoProcessingModal .purchase-payment-request {
  display: block;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#taobaoProcessingModal .purchase-payment-request > .purchase-review-detail-note,
#taobaoProcessingModal .purchase-payment-request > .purchase-review-previous-rejection {
  padding: 14px 16px;
}

#taobaoProcessingModal .taobao-processing-entry-section {
  padding-top: 22px;
}

#taobaoProcessingModal .taobao-processing-entry-section .purchase-payment-fields,
#taobaoProcessingModal .taobao-exception-panel .purchase-payment-fields {
  gap: 16px 18px;
  margin-top: 10px;
  padding: 16px 18px 18px;
  border: 0;
  border-left: 3px solid #8aa8df;
  border-radius: 0;
  background: #f7faff;
}

#taobaoProcessingModal .purchase-payment-fields label {
  gap: 7px;
  color: #707684;
  font-size: 12px;
  font-weight: 720;
}

#taobaoProcessingModal .purchase-payment-fields input,
#taobaoProcessingModal .purchase-payment-fields select,
#taobaoProcessingModal .purchase-payment-fields textarea {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  border-color: #dce3ee;
  background: #fff;
  color: var(--text);
  font-size: 14px;
  font-weight: 620;
}

#taobaoProcessingModal .purchase-payment-fields input:focus,
#taobaoProcessingModal .purchase-payment-fields select:focus,
#taobaoProcessingModal .purchase-payment-fields textarea:focus {
  border-color: #7094d8;
  box-shadow: 0 0 0 3px rgb(63 112 207 / 12%);
}

#taobaoProcessingModal .taobao-order-proof-field,
#taobaoProcessingModal .taobao-exception-proof-field {
  position: relative;
}

#taobaoProcessingModal .taobao-order-proof-dropzone,
#taobaoProcessingModal .taobao-exception-proof-dropzone {
  display: flex;
  min-height: 74px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px dashed #c9cdd5;
  border-radius: 7px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

#taobaoProcessingModal .taobao-order-proof-dropzone:hover,
#taobaoProcessingModal .taobao-order-proof-dropzone:focus-visible,
#taobaoProcessingModal .taobao-order-proof-dropzone.is-dragging,
#taobaoProcessingModal .taobao-exception-proof-dropzone:hover,
#taobaoProcessingModal .taobao-exception-proof-dropzone:focus-visible,
#taobaoProcessingModal .taobao-exception-proof-dropzone.is-dragging {
  border-color: #7094d8;
  outline: none;
  background: #f2f6fd;
  color: #3f70cf;
}

#taobaoProcessingModal .taobao-order-proof-dropzone.has-file,
#taobaoProcessingModal .taobao-exception-proof-dropzone.has-file {
  border-style: solid;
  border-color: #9dbba5;
  background: #f4faf5;
  color: #347246;
}

#taobaoProcessingModal .taobao-order-proof-dropzone > svg,
#taobaoProcessingModal .taobao-exception-proof-dropzone > svg {
  width: 23px;
  height: 23px;
  flex: 0 0 23px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

#taobaoProcessingModal .taobao-order-proof-dropzone > span,
#taobaoProcessingModal .taobao-exception-proof-dropzone > span {
  display: grid;
  min-width: 0;
  gap: 4px;
}

#taobaoProcessingModal .taobao-order-proof-dropzone strong,
#taobaoProcessingModal .taobao-exception-proof-dropzone strong {
  overflow: hidden;
  color: currentColor;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#taobaoProcessingModal .taobao-order-proof-dropzone small,
#taobaoProcessingModal .taobao-exception-proof-dropzone small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

#taobaoProcessingModal .taobao-order-proof-input,
#taobaoProcessingModal .taobao-exception-proof-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

#taobaoProcessingModal .taobao-reference-photo {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 12px;
  color: var(--text);
  text-decoration: none;
}

#taobaoProcessingModal .taobao-reference-photo img {
  width: 92px;
  height: 68px;
  flex: 0 0 92px;
  border: 1px solid #dce3ee;
  border-radius: 7px;
  background: #fff;
  object-fit: cover;
}

#taobaoProcessingModal .taobao-reference-photo > span {
  display: grid;
  min-width: 0;
  gap: 4px;
}

#taobaoProcessingModal .taobao-reference-photo-name {
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#taobaoProcessingModal .taobao-reference-photo small,
#taobaoProcessingModal .taobao-reference-photo-empty {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

#taobaoProcessingModal .taobao-processing-timeline-panel,
#taobaoProcessingModal .taobao-exception-panel {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid #e6ebf3;
}

#taobaoProcessingModal .taobao-processing-modal[data-view="exception"] .taobao-exception-panel,
#taobaoProcessingModal .taobao-processing-modal[data-view="history"] .taobao-processing-timeline-panel {
  margin-top: 0;
  padding-top: 24px;
  border-top: 0;
}

#taobaoProcessingModal .taobao-exception-panel > h4,
#taobaoProcessingModal .taobao-processing-timeline-panel > h4 {
  color: var(--text);
  font-size: 14px;
}

#taobaoProcessingModal .taobao-processing-timeline {
  gap: 10px;
  padding: 14px 16px;
  border-left: 3px solid #8aa8df;
  background: #f7faff;
}

#taobaoProcessingModal .taobao-processing-timeline-item > span {
  background: #5e83ca;
}

#taobaoProcessingModal .taobao-exception-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 2px;
}

#taobaoProcessingModal .taobao-exception-save-button {
  min-height: 40px;
  padding: 9px 16px;
  border-color: #3f70cf;
  border-radius: 7px;
  background: #3f70cf;
  color: #fff;
  font-size: 13px;
  font-weight: 760;
  box-shadow: 0 4px 12px rgb(63 112 207 / 16%);
}

#taobaoProcessingModal .taobao-exception-save-button:hover:not(:disabled) {
  border-color: #315faf;
  background: #315faf;
}

#taobaoProcessingModal .taobao-processing-actions {
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 14px 24px;
  border-top: 1px solid #e5eaf1;
  background: rgb(255 255 255 / 96%);
  box-shadow: 0 -8px 24px rgb(27 39 60 / 5%);
  backdrop-filter: blur(10px);
}

#taobaoProcessingModal .taobao-processing-actions .form-message {
  margin-right: auto;
}

#taobaoProcessingModal .taobao-processing-footer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

#taobaoProcessingModal .taobao-processing-footer-actions > button {
  min-height: 40px;
  padding: 9px 15px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 740;
}

#taobaoProcessingModal .taobao-arrival-action {
  border-color: #b8d6c1;
  background: #f4faf5;
  color: #2f7041;
}

#taobaoProcessingModal .taobao-arrival-action:hover {
  border-color: #87b696;
  background: #eaf6ed;
}

#taobaoProcessingModal .taobao-processing-actions button[type="submit"] {
  border-color: #3f70cf;
  background: #3f70cf;
  color: #fff;
}

#taobaoProcessingModal .taobao-processing-actions button[type="submit"]:hover {
  border-color: #315faf;
  background: #315faf;
}

@media (max-width: 640px) {
  #taobaoProcessingModal .taobao-processing-modal {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
  }

  #taobaoProcessingModal .taobao-processing-modal-body {
    padding-inline: 18px;
  }

  #taobaoProcessingModal .ledger-modal-header {
    gap: 10px;
    padding-inline: 18px;
  }

  #taobaoProcessingModal .purchase-review-detail-heading-icon {
    display: none;
  }

  #taobaoProcessingModal .taobao-processing-header-tool {
    padding-inline: 7px;
  }

  #taobaoProcessingModal .purchase-payment-fields {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: 14px;
  }

  #taobaoProcessingModal .purchase-payment-fields .span-2 {
    grid-column: auto;
  }

  #taobaoProcessingModal .taobao-processing-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding-inline: 18px;
  }

  #taobaoProcessingModal .taobao-processing-actions .form-message {
    grid-column: 1 / -1;
    margin: 0;
  }

  #taobaoProcessingModal .taobao-processing-footer-actions {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    margin-left: 0;
  }

  #taobaoProcessingModal .taobao-exception-actions .taobao-exception-save-button {
    width: 100%;
  }
}

/* Employee reimbursement disbursement list */
.disbursement-panel .disbursement-overview-panel {
  min-width: 0;
}

.disbursement-panel .disbursement-filter-toolbar {
  padding: 12px 0 14px;
}

.disbursement-panel .disbursement-search {
  min-width: 320px;
}

.disbursement-panel .disbursement-table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  scrollbar-gutter: stable;
  overscroll-behavior-inline: contain;
}

.disbursement-panel .disbursement-table {
  width: 100%;
  min-width: 940px;
  table-layout: fixed;
  border-collapse: collapse;
}

.disbursement-panel .disbursement-employee-column {
  width: 220px;
}

.disbursement-panel .disbursement-source-column {
  width: auto;
}

.disbursement-panel .disbursement-count-column {
  width: 170px;
}

.disbursement-panel .disbursement-amount-column {
  width: 150px;
}

.disbursement-panel .disbursement-status-column {
  width: 150px;
}

.disbursement-panel .disbursement-table th,
.disbursement-panel .disbursement-table td {
  box-sizing: border-box;
  min-width: 0;
  padding-right: 14px;
  padding-left: 14px;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
  vertical-align: middle;
}

.disbursement-panel .disbursement-table th {
  height: 40px;
  padding-block: 8px;
  border-bottom-color: var(--line);
  color: #66676b;
  font-size: 12px;
  font-weight: 760;
  white-space: nowrap;
}

.disbursement-panel .disbursement-record-row td {
  height: 76px;
  padding-block: 10px;
}

.disbursement-panel .disbursement-table tbody tr.action-required-row td,
.disbursement-panel .disbursement-table tbody tr.disbursement-completed-row td {
  background: transparent;
}

.disbursement-panel .disbursement-table tbody tr:hover td,
.disbursement-panel .disbursement-table tbody tr.action-required-row:hover td,
.disbursement-panel .disbursement-table tbody tr.disbursement-completed-row:hover td {
  background: #f8f8f9;
}

.disbursement-panel .disbursement-table tbody tr.action-required-row td:first-child,
.disbursement-panel .disbursement-table tbody tr.disbursement-completed-row td:first-child {
  box-shadow: none;
}

.disbursement-panel .disbursement-employee-cell,
.disbursement-panel .disbursement-source-cell,
.disbursement-panel .disbursement-count-cell {
  overflow: hidden;
}

.disbursement-panel .disbursement-record-row strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.disbursement-panel .disbursement-record-row .table-subtext {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: #818288;
  font-size: 11px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.disbursement-panel .disbursement-number-heading,
.disbursement-panel .disbursement-number-cell {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.disbursement-panel .disbursement-status-cell {
  overflow: visible;
  white-space: nowrap;
}

.disbursement-panel .disbursement-status-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.disbursement-panel .disbursement-tools {
  display: inline-flex;
}

.disbursement-panel .disbursement-tools .quotation-list-tools-button {
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 6px;
  font-size: 22px;
  line-height: 1;
}

.disbursement-panel .disbursement-tools .quotation-list-tools-menu {
  right: 0;
  left: auto;
  min-width: 132px;
  max-width: calc(100vw - 16px);
}

.disbursement-employee-detail-modal {
  width: min(980px, calc(100vw - 40px));
}

.disbursement-detail-summary {
  grid-template-columns: 1.4fr 0.8fr 1fr;
}

.disbursement-detail-table-wrap {
  max-height: 360px;
}

.disbursement-detail-table-wrap table {
  min-width: 680px;
}

.disbursement-detail-table-wrap th:nth-child(1) {
  width: 34%;
}

.disbursement-detail-table-wrap th:nth-child(2) {
  width: 32%;
}

.disbursement-detail-table-wrap th:nth-child(3) {
  width: 120px;
}

.disbursement-detail-table-wrap th:nth-child(4) {
  width: 120px;
}

.disbursement-detail-table-wrap th:nth-child(4),
.disbursement-detail-table-wrap td:nth-child(4) {
  text-align: right;
}

.disbursement-panel .table-pagination {
  padding: 14px 2px 4px;
}

.disbursement-batch-create-panel {
  min-width: 0;
}

.disbursement-batch-form .payroll-run-form-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.disbursement-batch-account-field {
  grid-column: 1 / -1;
}

.disbursement-batch-preview {
  display: grid;
  min-width: 0;
  border-top: 1px solid var(--line);
}

.disbursement-batch-preview-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px 14px;
}

.disbursement-batch-preview-heading h3 {
  margin: 0;
  font-size: 16px;
}

.disbursement-batch-preview-table-wrap {
  margin: 0 22px;
  overflow-x: auto;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
}

.disbursement-batch-preview-table {
  width: 100%;
  min-width: 760px;
  table-layout: fixed;
  border-collapse: collapse;
}

.disbursement-batch-preview-table th,
.disbursement-batch-preview-table td {
  padding: 11px 13px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12px;
  line-height: 1.45;
  text-align: left;
  vertical-align: middle;
}

.disbursement-batch-preview-table th {
  background: #f7f8fa;
  color: #66676b;
  font-size: 11px;
  font-weight: 760;
  white-space: nowrap;
}

.disbursement-batch-preview-table th:nth-child(1) {
  width: 22%;
}

.disbursement-batch-preview-table th:nth-child(2) {
  width: 27%;
}

.disbursement-batch-preview-table th:nth-child(3) {
  width: 14%;
}

.disbursement-batch-preview-table th:nth-child(4) {
  width: 18%;
  text-align: right;
}

.disbursement-batch-preview-table th:nth-child(5) {
  width: 19%;
}

.disbursement-batch-preview-table tbody tr:last-child td {
  border-bottom: 0;
}

.disbursement-batch-preview-table td > strong {
  display: block;
}

.disbursement-batch-preview-table .table-subtext {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.disbursement-batch-preview-table .empty-cell {
  height: 120px;
  color: var(--muted);
  text-align: center;
}

.disbursement-batch-missing {
  color: #9b6514;
}

.disbursement-batch-total {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 28px;
  padding: 16px 22px 20px;
  color: var(--muted);
  font-size: 12px;
}

.disbursement-batch-total strong {
  min-width: 140px;
  color: var(--text);
  font-size: 20px;
  text-align: right;
}

@media (max-width: 760px) {
  .disbursement-panel .disbursement-search {
    min-width: 0;
  }

  .disbursement-panel .disbursement-table {
    min-width: 900px;
  }

  .disbursement-detail-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .disbursement-detail-summary > span + span {
    border-top: 1px solid #dfe5ef;
    border-left: 0;
  }

  .disbursement-batch-form .payroll-run-form-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .disbursement-batch-account-field {
    grid-column: auto;
  }

  .disbursement-batch-preview-heading {
    align-items: flex-start;
    flex-direction: column;
    padding-inline: 16px;
  }

  .disbursement-batch-preview-table-wrap {
    margin-inline: 16px;
  }

  .disbursement-batch-total {
    padding-inline: 16px;
  }
}

/* Audit logs — compact, read-only directory */
.audit-log-shell,
.audit-log-page-heading {
  min-width: 0;
}

.workspace .audit-log-page-header {
  align-items: flex-end;
  margin-bottom: 0;
  padding-bottom: 16px;
}

.audit-log-page-heading h2,
.audit-log-page-heading p {
  margin: 0;
}

.audit-log-page-heading p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.audit-log-filter-form {
  border-top: 1px solid var(--line-soft);
  padding: 10px 0 14px;
}

.audit-log-filter-form .audit-log-search {
  min-width: 260px;
}

.audit-log-filter-form .purchase-payment-select-filter select {
  max-width: 180px;
}

.audit-log-date-filter-panel {
  right: 0;
}

.audit-log-message:empty {
  display: none;
}

.app-shell .audit-log-table-scroll {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-top: 1px solid var(--line-soft);
  -webkit-overflow-scrolling: touch;
}

.app-shell .audit-log-table {
  width: 100%;
  min-width: 920px;
  table-layout: fixed;
  border-collapse: collapse;
}

.app-shell .audit-log-table th,
.app-shell .audit-log-table td {
  padding-right: 12px;
  padding-left: 12px;
  text-align: left;
}

.app-shell .audit-log-table th {
  height: 40px;
  padding-block: 8px;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: #66676b;
  font-size: 12px;
  font-weight: 760;
  white-space: nowrap;
}

.app-shell .audit-log-table td {
  height: 68px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
  vertical-align: middle;
}

.app-shell .audit-log-table tbody tr:hover td {
  background: #fafbfc;
}

.app-shell .audit-log-table td strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-shell .audit-log-table .table-subtext {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audit-log-date,
.audit-log-target-id-cell,
.audit-log-ip-cell {
  font-variant-numeric: tabular-nums;
}

.audit-log-target-id-cell,
.audit-log-ip-cell {
  overflow: hidden;
  color: #4e5157;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audit-log-table .audit-log-time-column {
  width: 134px;
}

.audit-log-table .audit-log-actor-column {
  width: 150px;
}

.audit-log-table .audit-log-action-column {
  width: 150px;
}

.audit-log-table .audit-log-target-column {
  width: 170px;
}

.audit-log-table .audit-log-target-id-column {
  width: 130px;
}

.audit-log-table .audit-log-ip-column {
  width: 120px;
}

.audit-log-table .audit-log-tools-column {
  width: var(--table-tools-column-width);
}

.app-shell .audit-log-table th:first-child,
.app-shell .audit-log-table td:first-child,
.app-shell .audit-log-table th:nth-child(2),
.app-shell .audit-log-table td:nth-child(2),
.app-shell .audit-log-table th:nth-child(3),
.app-shell .audit-log-table td:nth-child(3) {
  width: auto;
}

.audit-log-tools-cell {
  overflow: visible;
  text-align: center;
}

.audit-log-details {
  position: relative;
  display: inline-block;
}

.audit-log-details summary {
  display: inline-grid;
  width: 32px;
  min-width: 32px;
  height: 32px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #85868b;
  font-size: 22px;
  line-height: 1;
  list-style: none;
  cursor: pointer;
}

.audit-log-details summary::-webkit-details-marker {
  display: none;
}

.audit-log-details summary:hover,
.audit-log-details[open] summary {
  background: #ededf0;
  color: var(--text);
}

.audit-log-details summary:focus-visible {
  outline: 2px solid #3f70cf;
  outline-offset: 2px;
}

.audit-log-change-grid {
  position: absolute;
  z-index: 25;
  top: calc(100% + 7px);
  right: 0;
  display: grid;
  width: min(620px, calc(100vw - 72px));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 12px;
  border: 1px solid #d9dde5;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 14px 34px rgb(30 35 44 / 16%);
  text-align: left;
}

.audit-log-change-card {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.audit-log-change-card > strong {
  color: #555a63;
  font-size: 11px;
}

.audit-log-change-card > span {
  min-height: 96px;
  padding: 10px;
  border-radius: 7px;
  background: #f7f8fa;
  color: var(--muted);
  font-size: 12px;
}

.audit-log-change-grid pre {
  max-height: 240px;
  margin: 0;
  overflow: auto;
  padding: 10px;
  border: 1px solid #e0e3e8;
  border-radius: 7px;
  background: #f7f8fa;
  color: #34373d;
  font-size: 11px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.audit-log-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0 0;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 12px;
}

.audit-log-pagination > div {
  display: flex;
  gap: 6px;
}

.workspace .audit-log-pagination button {
  width: auto;
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
}

@media (max-width: 760px) {
  .workspace .audit-log-page-header {
    align-items: flex-start;
    flex-direction: row;
  }

  .audit-log-page-heading p {
    max-width: 46ch;
  }

  .audit-log-filter-form .audit-log-search {
    width: 100%;
    min-width: 0;
    flex-basis: 100%;
  }

  .audit-log-filter-row {
    width: 100%;
    justify-content: flex-start;
  }

  .audit-log-pagination {
    align-items: stretch;
    flex-direction: column;
  }

  .audit-log-pagination > div,
  .audit-log-pagination > div button {
    flex: 1 1 0;
  }
}

@media (max-width: 480px) {
  .workspace .audit-log-page-header {
    flex-direction: column;
  }

  .audit-log-filter-row {
    align-items: stretch;
  }

  .audit-log-filter-form .purchase-payment-select-filter,
  .audit-log-filter-form .purchase-payment-select-filter select,
  .audit-log-date-filter,
  .workspace .audit-log-filter-form .purchase-payment-clear-filters {
    width: 100%;
    max-width: none;
  }

  .audit-log-date-filter summary {
    max-width: none;
  }

  .audit-log-date-filter-panel {
    right: auto;
    left: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  .audit-log-change-grid {
    width: calc(100vw - 32px);
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Personal attendance — shared lightweight filters and directory table */
.personal-attendance-shell {
  min-width: 0;
  overflow: visible;
}

.app-shell .personal-attendance-shell.data-directory-panel {
  overflow: visible;
}

.personal-attendance-page-header {
  align-items: flex-end;
  margin-bottom: 0;
  padding-bottom: 14px;
}

.personal-attendance-page-header h2,
.personal-attendance-page-header p {
  margin: 0;
}

.personal-attendance-page-header p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.personal-attendance-tabs {
  margin-bottom: 0;
}

.personal-attendance-filter-toolbar {
  position: relative;
  z-index: 12;
  margin: 0;
  padding: 10px 0 12px;
}

.personal-attendance-filter-row {
  width: 100%;
  justify-content: flex-start;
}

.personal-attendance-date-filter-panel {
  right: auto;
  left: 0;
}

.personal-attendance-quick-filters {
  display: flex;
  align-items: center;
  gap: 2px;
}

.workspace .personal-attendance-quick-filters button,
.personal-attendance-quick-filters button {
  width: auto;
  min-height: 38px;
  padding: 6px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  box-shadow: none;
}

.workspace .personal-attendance-quick-filters button:hover,
.personal-attendance-quick-filters button:hover {
  border: 0;
  background: #f1f2f4;
  color: var(--text);
}

.workspace .personal-attendance-quick-filters button.is-active,
.personal-attendance-quick-filters button.is-active {
  background: #edf2fb;
  color: #315fb5;
}

.personal-attendance-quick-filters button:focus-visible {
  outline: 2px solid #3f70cf;
  outline-offset: 2px;
}

#myAttendanceMessage:not(:empty) {
  margin: 0 0 10px;
}

.personal-attendance-table-wrap {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  -webkit-overflow-scrolling: touch;
}

.attendance-page[data-page="attendance-my"] .personal-attendance-table-wrap .personal-attendance-results-table {
  width: 100%;
  min-width: 920px;
  table-layout: fixed;
  border-collapse: collapse;
}

.personal-attendance-results-table .personal-attendance-date-column {
  width: 120px;
}

.personal-attendance-results-table .personal-attendance-schedule-column {
  width: 178px;
}

.personal-attendance-results-table .personal-attendance-clock-column {
  width: 112px;
}

.personal-attendance-results-table .personal-attendance-status-column {
  width: 220px;
}

.personal-attendance-results-table .personal-attendance-note-column {
  width: auto;
}

.personal-attendance-results-table .personal-attendance-tools-column {
  width: 48px;
}

.app-shell .personal-attendance-results-table th,
.app-shell .personal-attendance-results-table td {
  min-width: 0;
  padding-right: 14px;
  padding-left: 14px;
  text-align: left;
}

.app-shell .personal-attendance-results-table th {
  height: 40px;
  padding-block: 8px;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.app-shell .personal-attendance-results-table td {
  height: 64px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
  vertical-align: middle;
}

.app-shell .personal-attendance-results-table tbody tr:hover td {
  background: #fafafb;
}

.personal-attendance-date-cell strong,
.personal-attendance-time-cell {
  color: #45484e;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.personal-attendance-date-cell strong {
  font-size: 13px;
  font-weight: 700;
}

.personal-attendance-time-cell {
  font-size: 13px;
}

.personal-attendance-schedule-cell .attendance-cell-stack strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.personal-attendance-status-cell {
  overflow: visible;
}

.personal-attendance-note-cell {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.personal-attendance-results-table .personal-record-tools-cell {
  width: 48px;
  padding-inline: 6px;
  overflow: visible;
  text-align: right;
}

@media (max-width: 760px) {
  .personal-attendance-page-header {
    align-items: flex-start;
  }

  .personal-attendance-filter-row {
    align-items: stretch;
  }

  .personal-attendance-table-wrap {
    margin-inline: -16px;
    padding-inline: 16px;
  }
}

@media (max-width: 480px) {
  .personal-attendance-date-filter,
  .personal-attendance-date-filter summary,
  .personal-attendance-quick-filters,
  .workspace .personal-attendance-filter-toolbar .purchase-payment-clear-filters {
    width: 100%;
    max-width: none;
  }

  .personal-attendance-quick-filters button {
    flex: 1 1 0;
  }
}

/* Personal center — unified filters and directory tables */
.personal-center-page .personal-list-shell,
.personal-center-page .personal-attendance-shell {
  min-width: 0;
  overflow: visible;
}

.app-shell .personal-center-page .personal-list-shell.data-directory-panel {
  overflow: visible;
}

.workspace .personal-center-page .personal-list-page-header {
  align-items: flex-end;
  margin-bottom: 0;
  padding-bottom: 14px;
}

.personal-list-page-header h2,
.personal-list-page-header p {
  margin: 0;
}

.personal-list-page-header p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.personal-center-page .personal-leave-tabs {
  margin-bottom: 0;
}

.personal-record-filter-toolbar {
  position: relative;
  z-index: 12;
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: 8px 20px;
  margin: 0;
  padding: 10px 0 12px;
}

.personal-record-search {
  position: relative;
  display: block;
  min-width: 220px;
  flex: 1 1 280px;
}

.personal-record-search::before {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 13px;
  width: 12px;
  height: 12px;
  border: 1.8px solid #77787d;
  border-radius: 50%;
  content: "";
  pointer-events: none;
  transform: translateY(-58%);
}

.personal-record-search::after {
  position: absolute;
  z-index: 2;
  top: calc(50% + 4px);
  left: 24px;
  width: 6px;
  height: 1.8px;
  border-radius: 2px;
  background: #77787d;
  content: "";
  pointer-events: none;
  transform: rotate(45deg);
}

.personal-record-search input {
  width: 100%;
  min-height: 38px;
  padding: 8px 13px 8px 35px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  box-shadow: none;
}

.personal-record-search input:hover {
  background: #f7f7f8;
}

.personal-record-search input:focus {
  border-color: #3f70cf;
  outline: 0;
  background: #fff;
  box-shadow: 0 0 0 1px #3f70cf;
}

.personal-record-filter-row {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
}

.personal-record-select {
  display: block;
  min-width: 0;
}

.personal-record-select select {
  width: auto;
  min-width: 0;
  min-height: 38px;
  padding: 7px 28px 7px 10px;
  border: 1px solid transparent;
  border-radius: 7px;
  background-color: transparent;
  color: #5f6268;
  font-size: 13px;
  font-weight: 650;
  box-shadow: none;
  cursor: pointer;
}

.personal-record-select select:hover,
.personal-record-select select:focus {
  border-color: transparent;
  outline: 0;
  background-color: #f1f2f4;
  color: var(--text);
  box-shadow: none;
}

.workspace .personal-record-clear,
.personal-record-clear {
  width: auto;
  min-height: 38px;
  padding: 7px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  box-shadow: none;
  white-space: nowrap;
}

.workspace .personal-record-clear:hover,
.personal-record-clear:hover {
  border: 0;
  background: #f1f2f4;
  color: var(--text);
}

.personal-record-filter-toolbar.is-filtered .personal-record-clear {
  color: #315fb5;
}

.personal-record-single-filter .personal-record-search {
  max-width: 520px;
}

.personal-record-table-wrap {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  -webkit-overflow-scrolling: touch;
}

.personal-center-page .personal-record-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.personal-center-page .personal-record-table th,
.personal-center-page .personal-record-table td {
  min-width: 0;
  padding-right: 14px;
  padding-left: 14px;
  text-align: left;
}

.app-shell .personal-center-page .personal-record-table th {
  height: 40px;
  padding-block: 8px;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.app-shell .personal-center-page .personal-record-table td {
  height: 64px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
  vertical-align: middle;
}

.app-shell .personal-center-page .personal-record-table tbody tr:hover td {
  background: #fafafb;
}

.personal-center-page .personal-record-table .personal-record-tools-column,
.personal-center-page .personal-record-table .personal-record-tools-cell {
  width: 48px;
  min-width: 48px;
  max-width: 48px;
  padding-inline: 6px !important;
  background: transparent;
  text-align: right;
}

.personal-record-date-cell,
.personal-record-time-cell,
.personal-record-number-cell,
.personal-record-money-cell,
.personal-record-hours-cell {
  color: #45484e;
  font-variant-numeric: tabular-nums;
}

.personal-record-date-cell strong,
.personal-record-type-cell strong,
.personal-payroll-month-cell strong,
.personal-night-project-cell strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.personal-record-date-cell,
.personal-record-time-cell,
.personal-record-money-cell,
.personal-record-hours-cell {
  white-space: nowrap;
}

.personal-record-period-cell,
.personal-payroll-month-cell,
.personal-night-project-cell,
.personal-center-page .personal-record-table td:has(> .status-pill) {
  line-height: 1.4;
}

.personal-center-page .personal-record-table .table-subtext {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
}

.personal-leave-remaining-cell strong,
.personal-payroll-net-cell strong {
  color: #315fb5;
}

.app-shell .personal-center-page .personal-leave-request-pending td {
  background: #fffdf7;
}

.app-shell .personal-center-page .personal-leave-request-pending:hover td {
  background: #fffaf0;
}

.personal-attendance-adjustment .personal-record-filter-toolbar {
  padding-top: 12px;
}

.personal-center-page .attendance-adjustment-table {
  min-width: 860px;
}

.personal-center-page .personal-night-entry-table {
  min-width: 920px;
}

.personal-center-page .personal-leave-balance-table {
  min-width: 760px;
}

.personal-center-page .personal-leave-request-table {
  min-width: 1080px;
}

.personal-center-page .personal-overtime-table {
  min-width: 1020px;
}

.personal-center-page .personal-payroll-table {
  min-width: 1120px;
}

.personal-center-page .personal-payroll-detail-table {
  min-width: 720px;
}

.personal-record-date-column {
  width: 132px;
}

.personal-record-type-column,
.personal-leave-type-column {
  width: 132px;
}

.personal-record-time-column,
.personal-record-hours-column,
.personal-record-attachment-column {
  width: 94px;
}

.personal-record-status-column {
  width: 138px;
}

.personal-night-project-column {
  width: 220px;
}

.personal-night-period-column,
.personal-overtime-period-column,
.personal-leave-request-period-column {
  width: 220px;
}

.personal-night-schedule-column {
  width: 190px;
}

.personal-night-bonus-column {
  width: 150px;
}

.personal-leave-period-column,
.personal-overtime-compensation-column {
  width: 136px;
}

.personal-payroll-month-column {
  width: 148px;
}

.personal-payroll-money-column {
  width: 112px;
}

.personal-center-page .comp-time-balance-summary {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin: 0 0 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fafbfe;
}

.personal-center-page .comp-time-balance-summary > div {
  min-height: 72px;
  padding: 14px 16px;
}

.personal-center-page .comp-time-balance-summary > div + div {
  border-left: 1px solid var(--line-soft);
}

.personal-center-page .comp-time-balance-summary small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.personal-center-page .comp-time-balance-summary strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 750;
}

@media (max-width: 700px) {
  .personal-center-page .comp-time-balance-summary > div + div {
    border-left: 0;
  }

  .personal-center-page .comp-time-balance-summary > div:nth-child(even) {
    border-left: 1px solid var(--line-soft);
  }

  .personal-center-page .comp-time-balance-summary > div:nth-child(n + 3) {
    border-top: 1px solid var(--line-soft);
  }
}

.personal-center-page #myOvertimeListMessage:not(:empty) {
  margin: 8px 0 0;
}

.personal-payroll-tools {
  display: inline-flex;
}

@media (max-width: 900px) {
  .personal-record-filter-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 4px;
  }

  .personal-record-search,
  .personal-record-single-filter .personal-record-search {
    width: 100%;
    max-width: none;
    flex-basis: auto;
  }

  .personal-record-filter-row {
    flex-wrap: wrap;
  }
}

@media (max-width: 760px) {
  .workspace .personal-center-page .personal-list-page-header {
    align-items: flex-start;
  }

  .personal-center-page .personal-record-table-wrap {
    margin-inline: -16px;
    padding-inline: 16px;
  }
}

@media (max-width: 520px) {
  .personal-record-filter-row,
  .personal-record-select,
  .personal-record-select select,
  .workspace .personal-record-clear {
    width: 100%;
  }
}

/* Personal center request forms — shared next-level form language */
.personal-request-form-page {
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.app-shell .personal-request-form-panel,
.app-shell .personal-request-form-panel.master-data-form-panel {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.app-shell .personal-request-form-header {
  display: block;
  min-height: 0;
  padding: 16px 0 18px;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
}

.personal-request-form-header .master-data-form-heading {
  width: min(100%, 1060px);
  align-items: flex-start;
  margin-inline: auto;
}

.personal-request-form-header .master-data-form-heading > div {
  padding-top: 2px;
}

.personal-request-form-header .eyebrow {
  display: block;
  margin-bottom: 3px;
  color: #315fb5;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.04em;
}

.personal-request-form-header h2 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.02em;
}

.personal-request-form-header p {
  max-width: 720px;
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.personal-request-form {
  display: grid;
  min-width: 0;
}

.personal-request-form-section {
  width: min(100%, 1060px);
  margin-inline: auto;
  padding: 24px 0 26px;
}

.personal-request-form-section .master-data-form-section-heading {
  margin-bottom: 17px;
}

.app-shell .personal-request-field-grid {
  width: 100%;
  max-width: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
  padding: 0;
}

.app-shell .personal-request-field-grid label {
  display: grid;
  min-width: 0;
  gap: 7px;
  color: #686b72;
  font-size: 12px;
  font-weight: 700;
}

.app-shell .personal-request-field-grid input,
.app-shell .personal-request-field-grid select,
.app-shell .personal-request-field-grid textarea {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  border: 1px solid #d9dce2;
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  box-shadow: none;
}

.app-shell .personal-request-field-grid textarea {
  min-height: 112px;
  padding: 11px 12px;
  line-height: 1.55;
  resize: vertical;
}

.app-shell .personal-request-field-grid input:hover,
.app-shell .personal-request-field-grid select:hover,
.app-shell .personal-request-field-grid textarea:hover {
  border-color: #c7cbd3;
}

.app-shell .personal-request-field-grid input:focus,
.app-shell .personal-request-field-grid select:focus,
.app-shell .personal-request-field-grid textarea:focus {
  border-color: #3f70cf;
  outline: 0;
  box-shadow: 0 0 0 2px rgb(63 112 207 / 12%);
}

.personal-request-field-grid label > small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
}

.personal-request-compact-field {
  max-width: calc(50% - 12px);
}

.app-shell .personal-request-upload-field input[type="file"] {
  min-height: 48px;
  padding: 5px 7px;
  color: var(--muted);
  font-size: 12px;
}

.personal-request-upload-field input[type="file"]::file-selector-button {
  min-height: 36px;
  margin-right: 10px;
  padding: 0 13px;
  border: 0;
  border-radius: 5px;
  background: #f0f2f5;
  color: #45484e;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.personal-request-upload-field input[type="file"]::file-selector-button:hover {
  background: #e5e8ed;
}

.app-shell .personal-request-form-actions {
  display: flex;
  width: min(100%, 1060px);
  min-height: 68px;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-inline: auto;
  padding: 14px 0;
  border-top: 1px solid var(--line-soft);
  background: transparent;
}

.personal-request-form-actions .form-message {
  margin-right: auto;
}

.app-shell .personal-request-form-actions > button {
  width: auto;
  min-width: 96px;
  min-height: 38px;
}

.app-shell .personal-request-form-actions > button[type="submit"] {
  border-color: #3f70cf;
  background: #3f70cf;
  color: #fff;
}

.app-shell .personal-request-form-actions > button[type="submit"]:hover:not(:disabled) {
  border-color: #315fb5;
  background: #315fb5;
}

.app-shell .personal-request-form-actions > .secondary-button {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}

.app-shell .personal-request-form-actions > .secondary-button:hover {
  background: #f1f2f4;
  color: var(--text);
}

@media (max-width: 760px) {
  .app-shell .personal-request-field-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-shell .personal-request-field-grid > .span-2 {
    grid-column: auto;
  }

  .personal-request-compact-field {
    max-width: none;
  }

  .app-shell .personal-request-form-actions {
    flex-wrap: wrap;
  }

  .personal-request-form-actions .form-message {
    width: 100%;
    margin-right: 0;
  }
}

@media (max-width: 480px) {
  .app-shell .personal-request-form-actions > button {
    flex: 1 1 0;
  }
}

/* System UI consistency — shared density, hierarchy, and controls */
:root {
  --control-height: 38px;
  --compact-control-height: 34px;
  --table-head-height: 40px;
  --table-row-height: 58px;
  --modal-close-size: 34px;
  --workspace-inline-padding: 26px;
}

.workspace {
  padding-right: var(--workspace-inline-padding);
  padding-left: var(--workspace-inline-padding);
}

@media (max-width: 760px) {
  :root {
    --workspace-inline-padding: 16px;
  }
}

/* Page headers carry only the title and page-level actions. */
.topbar-title-copy > p,
.finance-page-header > div > p,
.project-list-page-header > div > p,
.template-directory-intro > div > p,
.data-directory-panel > .panel-header > div > p,
.personal-request-form-header .master-data-form-heading > div > p {
  display: none;
}

.workspace :is(
  .finance-page-header,
  .project-list-page-header,
  .template-directory-intro,
  .data-directory-panel > .panel-header,
  .personal-request-form-header
) h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

/* Search and filters use one compact control language. */
.workspace input[type="search"] {
  min-height: var(--control-height);
  border-radius: 8px;
  font-size: 13px;
}

.app-shell .workspace :is(.customer-list-tools, .venue-list-tools, .material-price-list-tools) input[type="search"] {
  height: var(--control-height);
  min-height: var(--control-height);
  border-radius: 8px !important;
}

.app-shell .workspace :is(#costProjectSearch, #costSourceSearch) {
  height: var(--control-height);
  min-height: var(--control-height);
  border-radius: 8px;
}

.workspace .project-panel .column-header {
  min-height: 23px;
}

.workspace :is(
  .finance-list-tools,
  .purchase-payment-filter-toolbar,
  .personal-record-filter-toolbar,
  .customer-list-tools,
  .venue-list-tools,
  .material-price-list-tools
) select,
.workspace :is(.purchase-payment-date-filter, .audit-log-date-filter) > summary {
  min-height: var(--control-height);
  border-radius: 8px;
  font-size: 13px;
}

.workspace :is(
  .primary-button,
  .secondary-button,
  .project-list-primary-action,
  .payroll-create-run-button,
  .form-actions > button,
  .personal-request-form-actions > button
):not(.icon-button):not(.quotation-list-tools-button) {
  min-height: var(--control-height);
}

.workspace .table-pagination button {
  min-height: var(--compact-control-height);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
}

/* Every data table owns one top divider; cells do not add another. */
.workspace :is(
  .table-wrap,
  .table-scroll,
  [class*="-table-wrap"],
  [class*="-table-scroll"]
):has(> table) {
  border-top: 1px solid var(--line) !important;
  border-radius: 0;
}

.workspace :is(
  .table-wrap,
  .table-scroll,
  [class*="-table-wrap"],
  [class*="-table-scroll"]
) > table {
  border-collapse: collapse;
}

.workspace :is(
  .table-wrap,
  .table-scroll,
  [class*="-table-wrap"],
  [class*="-table-scroll"]
) > table th {
  height: var(--table-head-height) !important;
  padding: 8px 14px;
  border-top: 0 !important;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  text-transform: none;
  white-space: nowrap;
}

.workspace :is(
  .table-wrap,
  .table-scroll,
  [class*="-table-wrap"],
  [class*="-table-scroll"]
) > table td {
  height: var(--table-row-height) !important;
  padding: 8px 14px !important;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
  color: #45484e;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  vertical-align: middle;
}

.workspace :is(
  .table-wrap,
  .table-scroll,
  [class*="-table-wrap"],
  [class*="-table-scroll"]
) > table .table-subtext {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
}

/* Shared width for every table column that contains a compact three-dot tools menu. */
:is(th, td).table-tools-column,
:is(th, td).table-tools-cell,
th.personal-record-tools-column,
td.personal-record-tools-cell {
  box-sizing: border-box;
  width: var(--table-tools-column-width) !important;
  min-width: var(--table-tools-column-width) !important;
  max-width: var(--table-tools-column-width) !important;
  padding-right: 6px !important;
  padding-left: 6px !important;
  text-align: center;
}

.workspace td.empty-cell {
  height: 54px !important;
  padding: 0 14px !important;
  color: var(--muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-align: center !important;
  vertical-align: middle !important;
}

.workspace td.empty-cell > * {
  display: inline;
  margin: 0;
}

/* Table actions and their menus share one hit target and popup density. */
.workspace :is(.quotation-list-tools-button, .quotation-price-tools-button) {
  display: inline-grid;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #85868b;
  font-size: 22px;
  line-height: 1;
}

.workspace :is(.quotation-list-tools-button, .quotation-price-tools-button):is(:hover, [aria-expanded="true"]) {
  background: #ededf0;
  color: var(--text);
}

.quotation-price-tools-menu {
  position: fixed;
  z-index: 10050;
  display: grid;
}

:is(.quotation-list-tools-menu, .quotation-price-tools-menu, .project-action-menu > div) {
  min-width: 210px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 32px rgb(31 32 35 / 16%);
}

.workspace :is(
  .quotation-list-tools-menu,
  .quotation-price-tools-menu,
  .project-action-menu > div
) button {
  justify-content: flex-start;
  min-height: 36px;
  padding: 8px 10px;
  border: 0;
  border-radius: 5px;
  background: #fff;
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
  text-align: left;
}

.workspace :is(
  .quotation-list-tools-menu,
  .quotation-price-tools-menu,
  .project-action-menu > div
) button:hover {
  background: #f2f2f4;
}

/* Same-level subtabs always expose the same baseline and active underline. */
.workspace .project-subtabs:not(.flow-stepper),
.workspace .organization-position-tabs {
  gap: 24px;
  border-bottom: 1px solid var(--line);
}

.workspace .project-subtabs:not(.flow-stepper) .subtab-button,
.workspace .organization-position-tabs .quotation-mode-tab {
  min-height: 42px;
  padding: 0 1px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  box-shadow: none;
}

.workspace .project-subtabs:not(.flow-stepper) .subtab-button:hover,
.workspace .organization-position-tabs .quotation-mode-tab:hover {
  background: transparent;
  color: var(--text);
}

.workspace .project-subtabs:not(.flow-stepper) .subtab-button.active,
.workspace .organization-position-tabs .quotation-mode-tab.active {
  border-bottom-color: var(--text);
  background: transparent;
  color: var(--text);
}

/* Creation flows are steppers, not another visual variant of subtabs. */
.workspace .flow-stepper {
  display: flex;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f7f8fa;
}

.workspace .flow-stepper .quotation-mode-tab {
  min-height: 38px;
  flex: 1 1 0;
  justify-content: center;
  padding: 7px 12px;
  border: 0;
  border-radius: 7px;
}

.workspace .flow-stepper .quotation-mode-tab.active {
  border: 0;
  background: #fff;
  box-shadow: 0 1px 4px rgb(31 32 35 / 10%);
}

/* Closing a dialog is a neutral action across every modal. */
.modal-backdrop .icon-button[aria-label^="關閉"],
.modal-backdrop .dashboard-reminder-close[aria-label^="關閉"] {
  display: inline-grid;
  width: var(--modal-close-size) !important;
  min-width: var(--modal-close-size) !important;
  height: var(--modal-close-size) !important;
  min-height: var(--modal-close-size) !important;
  place-items: center;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #73767d !important;
  font-size: 22px;
  line-height: 1;
}

.modal-backdrop .icon-button[aria-label^="關閉"]:hover,
.modal-backdrop .dashboard-reminder-close[aria-label^="關閉"]:hover {
  background: #eef0f3 !important;
  color: #34373d !important;
}

.modal-backdrop .icon-button[aria-label^="關閉"]:focus-visible,
.modal-backdrop .dashboard-reminder-close[aria-label^="關閉"]:focus-visible {
  outline: 2px solid #3f70cf;
  outline-offset: 2px;
}

/* File inputs and dropzones use two explicit attachment densities. */
.workspace input[type="file"] {
  min-height: 48px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 12px;
}

.workspace input[type="file"]::file-selector-button {
  min-height: 36px;
  margin-right: 10px;
  padding: 0 13px;
  border: 0;
  border-radius: 6px;
  background: #f0f2f5;
  color: #45484e;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.workspace input[type="file"]::file-selector-button:hover {
  background: #e5e8ed;
}

.workspace :is(
  .acceptance-photo-dropzone,
  .venue-template-dropzone,
  .purchase-payment-proof-dropzone,
  .vendor-payment-proof-dropzone,
  [class*="upload-dropzone"]
) {
  min-height: 72px;
  border: 1px dashed #b9c8e5;
  border-radius: 8px;
  background: #f8faff;
}

.workspace :is(
  .acceptance-photo-dropzone,
  .venue-template-dropzone,
  .purchase-payment-proof-dropzone,
  .vendor-payment-proof-dropzone,
  [class*="upload-dropzone"]
):is(:hover, :focus-within, .dragover, .is-dragging, .has-file) {
  border-color: #3f70cf;
  background: #f1f5fd;
}

/* Follow-up visual QA: align full-bleed workspaces to the shared page gutter. */
.work-log-week-page:has(#workLogCalendarView:not([hidden])) {
  margin-right: calc(0px - var(--workspace-inline-padding));
  margin-left: calc(0px - var(--workspace-inline-padding));
}

#taobaoProcessingWorkspace .taobao-processing-table-wrap {
  width: auto;
  margin-right: 16px;
  margin-left: 16px;
}

/* A subtabbed workspace owns its boundary; its following table does not add a second line. */
.workspace :has(> .project-subtabs:not(.flow-stepper))
  > :is(.table-wrap, .table-scroll, [class*="-table-wrap"], [class*="-table-scroll"]):has(> table),
.workspace :has(> .project-subtabs:not(.flow-stepper))
  > :is(section, div)
  > :is(.table-wrap, .table-scroll, [class*="-table-wrap"], [class*="-table-scroll"]):has(> table) {
  border-top: 0 !important;
}

/* Modal actions wrap as controls, never as two-line labels. */
.modal-backdrop :is(
  .form-actions,
  .ledger-modal-actions,
  [class*="-modal-footer"],
  [class*="-modal-actions"]
) {
  flex-wrap: wrap;
}

.modal-backdrop :is(
  .form-actions,
  .ledger-modal-actions,
  [class*="-modal-footer"],
  [class*="-modal-actions"]
) button:not(.icon-button) {
  width: auto;
  min-width: max-content;
  flex-shrink: 0;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .workspace .flow-stepper {
    overflow-x: auto;
  }

  .workspace .flow-stepper .quotation-mode-tab {
    min-width: max-content;
    flex: 0 0 auto;
  }
}

.login-field-heading {
  display: flex;
  min-height: 16px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  line-height: 16px;
}

.login-panel .login-field > :first-child {
  min-height: 16px;
  line-height: 16px;
}

.login-forgot-password,
.login-secondary-action {
  border: 0;
  background: transparent;
  color: #3f70cf;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.login-forgot-password {
  height: 16px;
  padding: 0;
  font-size: 11px;
  line-height: 16px;
}

.login-forgot-password:hover,
.login-forgot-password:focus-visible {
  border-color: transparent;
  background: transparent;
  color: #315fb5;
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 3px;
  transform: none;
}

.login-recovery-panel:not([hidden]) {
  animation: login-panel-enter 240ms ease-out both;
}

.login-recovery-entry {
  display: grid;
  gap: 20px;
}

.login-recovery-hint {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 12px 14px;
  border: 1px solid rgb(63 112 207 / 16%);
  border-radius: 10px;
  background: rgb(237 243 253 / 68%);
  color: #686f82;
  font-size: 11px;
  line-height: 1.55;
}

.login-recovery-hint svg,
.login-recovery-result-icon svg,
.login-secondary-action svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.login-recovery-hint svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin-top: 1px;
  color: #3f70cf;
}

.login-recovery-result {
  display: grid;
  gap: 14px;
  padding: 22px;
  border: 1px solid rgb(63 112 207 / 18%);
  border-radius: 14px;
  background: rgb(245 247 252 / 80%);
}

.login-recovery-result-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 12px;
  background: #edf3fd;
  color: #3f70cf;
}

.login-recovery-result-icon svg {
  width: 21px;
  height: 21px;
}

.login-recovery-result > div {
  display: grid;
  gap: 3px;
}

.login-recovery-result-label {
  color: #8a90a0;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.08em;
}

.login-recovery-result strong {
  color: #202331;
  font-size: 15px;
  overflow-wrap: anywhere;
}

.login-recovery-result h2 {
  margin: 2px 0 0;
  color: #202331;
  font-size: 17px;
  line-height: 1.4;
}

.login-recovery-result ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 20px;
  color: #727888;
  font-size: 12px;
  line-height: 1.7;
}

.login-recovery-result li::marker {
  color: #3f70cf;
  font-weight: 800;
}

.login-secondary-action {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 7px;
  padding: 4px 0;
  font-size: 12px;
}

.login-secondary-action svg {
  width: 16px;
  height: 16px;
  transition: transform 160ms ease;
}

.login-secondary-action:hover,
.login-secondary-action:focus-visible {
  border-color: transparent;
  background: transparent;
  color: #315fb5;
  box-shadow: none;
  transform: none;
}

.login-secondary-action:hover svg {
  transform: translateX(-3px);
}

.login-visual {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
  color: inherit;
  pointer-events: none;
}

.login-visual::before {
  content: none;
}

.login-wave-art {
  position: absolute;
  top: -4%;
  right: -5vw;
  width: max(68vw, 760px);
  height: 108%;
  overflow: visible;
  opacity: 0.92;
  filter: drop-shadow(-20px 0 40px rgb(78 178 190 / 8%));
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 18%) 13%, #000 28%);
  mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 18%) 13%, #000 28%);
}

.login-wave-surge {
  transform-origin: right center;
  animation: login-wave-surge 10s ease-in-out infinite;
}

.login-ocean-body {
  opacity: 0.95;
}

.login-wave-wash {
  fill: none;
  stroke: url("#loginFoamGradient");
  stroke-linecap: round;
  stroke-width: 58px;
  opacity: 0.72;
}

.login-wave-foam {
  fill: none;
  stroke: rgb(255 255 255 / 88%);
  stroke-linecap: round;
  animation: login-foam-drift 7.5s ease-in-out infinite;
}

.login-wave-foam path:nth-child(1) {
  stroke-width: 19px;
  stroke-dasharray: 68 9 31 13;
}

.login-wave-foam path:nth-child(2) {
  stroke-width: 10px;
  stroke-dasharray: 47 15 18 10;
  opacity: 0.67;
}

.login-wave-foam path:nth-child(3) {
  stroke-width: 5px;
  stroke-dasharray: 26 17 52 12;
  opacity: 0.42;
}

.login-wave-ripples {
  fill: none;
  stroke: rgb(232 255 255 / 72%);
  stroke-width: 2px;
  opacity: 0.42;
  animation: login-ripple-drift 12s ease-in-out infinite;
}

.login-wave-ripples path:nth-child(2) {
  opacity: 0.7;
}

.login-wave-ripples path:nth-child(3) {
  opacity: 0.46;
}

.login-foam-flecks {
  fill: rgb(255 255 255 / 84%);
  animation: login-flecks-drift 8s ease-in-out infinite;
}

@keyframes login-wave-surge {
  0%,
  100% {
    transform: translateX(68px) scaleX(0.985);
  }

  52% {
    transform: translateX(-34px) scaleX(1.02);
  }
}

@keyframes login-foam-drift {
  0%,
  100% {
    transform: translateX(34px);
    opacity: 0.68;
  }

  48% {
    transform: translateX(-42px);
    opacity: 1;
  }
}

@keyframes login-ripple-drift {
  0%,
  100% {
    transform: translateX(22px);
  }

  55% {
    transform: translateX(-18px);
  }
}

@keyframes login-flecks-drift {
  0%,
  100% {
    transform: translate(24px, -4px);
    opacity: 0.45;
  }

  50% {
    transform: translate(-38px, 8px);
    opacity: 0.92;
  }
}

@keyframes login-panel-enter {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (max-height: 760px) and (min-width: 821px) {
  .login-screen {
    padding: 0;
  }

  .login-shell {
    width: 100%;
    height: auto;
    min-height: 100dvh;
  }

  .login-auth-column {
    min-height: 100dvh;
    padding: 34px clamp(48px, 7vw, 92px);
  }

  .login-panel {
    gap: 18px;
  }

  .login-brand {
    margin-bottom: 26px;
  }

  .login-heading h1 {
    font-size: 34px;
  }

  .login-footer {
    margin-top: 24px;
  }
}

@media (max-width: 820px) {
  .login-shell {
    display: block;
    background:
      radial-gradient(circle at 100% 12%, rgb(171 233 237 / 16%), transparent 34%),
      #fafaf8;
  }

  .login-auth-column {
    width: 100%;
    padding: 34px 24px;
    background: linear-gradient(90deg, rgb(250 250 248 / 100%) 0%, rgb(250 250 248 / 94%) 70%, rgb(250 250 248 / 70%) 100%);
  }

  .login-panel,
  .login-footer {
    width: min(100%, 430px);
  }

  .login-brand {
    margin-bottom: 44px;
  }

  .login-visual {
    display: block;
  }

  .login-wave-art {
    right: -76%;
    width: max(132vw, 720px);
    opacity: 0.26;
  }

  .login-footer {
    margin-top: 42px;
  }
}

@media (max-width: 560px) {
  .login-visual {
    display: none;
  }

  .login-auth-column {
    background: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-wave-surge,
  .login-wave-foam,
  .login-wave-ripples,
  .login-foam-flecks,
  .login-recovery-panel:not([hidden]) {
    animation: none;
  }
}

/* Quotation UI polish: keep the editable description and material builder legible. */
.quotation-material-active .quotation-material-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 6px 8px;
}

.workspace .quotation-material-prefix {
  width: 100%;
  max-width: none;
  min-height: 32px;
  padding-inline: 4px;
  border: 0 !important;
  border-bottom: 1px solid #e3e5ea !important;
}

.workspace .quotation-material-prefix:focus {
  border-bottom-color: #3f70cf !important;
}

.quotation-material-builder {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.quotation-material-token-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}

.quotation-material-builder .quotation-material-combobox {
  flex: 1 1 190px;
  min-width: 180px;
}

.quotation-editor-grid-price .quotation-material-readonly {
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  white-space: normal;
}

/* Delete icons remain visually light while retaining their full hit target. */
.workspace .quotation-row-actions .icon-button,
.workspace .quotation-row-actions .icon-button:hover {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.workspace .quotation-row-actions .icon-button:hover {
  color: #b84444;
}

.workspace .quotation-row-actions .icon-button:focus-visible {
  outline: 2px solid rgb(201 79 79 / 32%);
  outline-offset: 2px;
}

/* Make manual save a clear action and autosave text a separate status. */
.quotation-form-tools .quotation-save-draft-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  height: 36px;
  padding-inline: 13px;
  border-color: #b9c9e8;
  border-radius: 7px;
  background: #f7f9fe;
  color: #315fb5;
  box-shadow: 0 1px 2px rgb(36 79 158 / 8%);
}

.quotation-form-tools .quotation-save-draft-button:hover {
  border-color: #91a9d8;
  background: #edf3ff;
  color: #244f9e;
}

.quotation-save-draft-button svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.quotation-form-tools #quotationSaveStatus {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.quotation-form-tools #quotationSaveStatus::before {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: currentColor;
  content: "";
  opacity: 0.7;
}

/* Give the cuboid chooser a stronger hierarchy without changing its controls. */
.quotation-face-modal {
  display: flex;
  flex-direction: column;
  border: 0;
  border-top: 4px solid #3f70cf;
  border-radius: 12px;
  box-shadow: 0 24px 72px rgb(24 31 45 / 25%);
}

.quotation-face-modal-header {
  flex: 0 0 auto;
  align-items: flex-start;
  padding: 20px 22px 18px;
  border-bottom-color: #dfe6f3;
  background: linear-gradient(110deg, #f4f7fd 0%, #fff 70%);
}

.quotation-face-modal-header .summary-eyebrow {
  color: #315fb5;
  font-size: 11px;
  font-weight: 780;
  letter-spacing: 0.04em;
}

.quotation-face-modal-header h3 {
  margin-top: 4px;
  font-size: 19px;
}

.quotation-face-modal-body {
  min-height: 0;
  flex: 1 1 auto;
  padding: 22px;
  background: #f8f9fb;
}

.quotation-cuboid-panel,
.quotation-face-controls {
  border-color: #dfe3ea;
  background: #fff;
  box-shadow: 0 4px 16px rgb(37 45 59 / 6%);
}

.quotation-cuboid-stage {
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 48%, rgb(63 112 207 / 10%), transparent 42%),
    linear-gradient(#f8f9fc 1px, transparent 1px),
    linear-gradient(90deg, #f8f9fc 1px, transparent 1px);
  background-size: auto, 24px 24px, 24px 24px;
}

.quotation-face-options label {
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.quotation-face-options label:hover {
  border-color: #b9c9e8;
  background: #f7f9fe;
}

.quotation-face-options label:has(input:checked) {
  border-color: #7e9ed9;
  background: #eef4ff;
  box-shadow: inset 3px 0 0 #3f70cf;
}

.quotation-face-options input {
  accent-color: #3f70cf;
}

.quotation-face-options b {
  color: #315fb5;
}

.quotation-face-summary {
  border: 1px solid #e1e4e9;
  background: #f4f5f7;
}

.quotation-face-modal-actions {
  flex: 0 0 auto;
  padding: 14px 22px 18px;
  border-top-color: #e4e7ec;
  background: #fff;
}

.modal-backdrop .quotation-face-modal-actions button:not(.icon-button) {
  width: 112px;
  min-width: 112px;
  height: 40px;
  min-height: 40px;
  padding: 0 14px;
}

/* Match the copy dialog to the shared modal rhythm. */
.quotation-copy-dialog-backdrop {
  background: rgb(23 30 43 / 52%);
}

.quotation-copy-dialog {
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-top: 4px solid #3f70cf;
  border-radius: 12px;
  box-shadow: 0 24px 72px rgb(24 31 45 / 25%);
}

.quotation-copy-dialog-header {
  padding: 20px 22px 18px;
  border-bottom: 1px solid #dfe6f3;
  background: linear-gradient(110deg, #f4f7fd 0%, #fff 70%);
}

.quotation-copy-dialog-header .summary-eyebrow {
  color: #315fb5;
  font-size: 11px;
  font-weight: 780;
  letter-spacing: 0.04em;
}

.quotation-copy-dialog-header h3 {
  margin-top: 4px;
  font-size: 19px;
}

.quotation-copy-dialog form {
  gap: 18px;
  padding: 20px 22px 22px;
}

.quotation-copy-target-field > span {
  font-size: 13px;
  font-weight: 760;
}

.quotation-copy-target-field > small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.quotation-copy-dialog select {
  min-height: 44px;
  border-radius: 7px;
}

.quotation-copy-dialog-actions {
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

.modal-backdrop .quotation-copy-dialog-actions button:not(.icon-button) {
  width: 112px;
  min-width: 112px;
  height: 40px;
  min-height: 40px;
  padding: 0 14px;
}

/* Reuse the red rejection language for quotation deletion. */
.quotation-delete-dialog-backdrop {
  z-index: 1400;
}

.quotation-delete-dialog-body strong {
  display: block;
  color: #a63e3e;
  font-size: 14px;
}

.quotation-delete-dialog-body > p:not(.form-message) {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.quotation-delete-dialog-actions .quotation-delete-confirm-button {
  border-color: #c94f4f;
  background: #c94f4f;
  color: #fff;
}

.quotation-delete-dialog-actions .quotation-delete-confirm-button:hover {
  border-color: #b84444;
  background: #b84444;
}

/* Remove the hidden tools gutter from read-only quotation review tables. */
.quotation-review-readonly .quotation-editor-grid-price {
  min-width: 1640px;
}

.quotation-review-readonly .quotation-editor-grid-price .quotation-editor-row {
  grid-template-columns:
    52px minmax(300px, 390px) 250px 88px 62px
    70px 132px 144px minmax(360px, 1fr) 124px 138px 104px;
}

.quotation-review-readonly .quotation-action-spacer,
.quotation-review-readonly .quotation-row-actions {
  display: none;
}

.quotation-review-readonly .quotation-row-fill {
  grid-column: 3 / -1;
}

.quotation-review-actions .quotation-nav-button {
  width: 72px;
  min-width: 72px;
  height: 38px;
  min-height: 38px;
  padding: 0 14px;
}

.workspace .quotation-review-actions .quotation-review-reject-button {
  border-color: #c94f4f;
  background: #c94f4f;
  color: #fff;
}

.workspace .quotation-review-actions .quotation-review-reject-button:hover {
  border-color: #b84444;
  background: #b84444;
  color: #fff;
}

.workspace .quotation-review-actions .quotation-review-approve-button {
  border-color: #3f70cf;
  background: #3f70cf;
  color: #fff;
}

.workspace .quotation-review-actions .quotation-review-approve-button:hover {
  border-color: #315fb5;
  background: #315fb5;
  color: #fff;
}

@media (max-width: 760px) {
  .quotation-material-builder .quotation-material-combobox {
    flex-basis: 100%;
    min-width: 0;
  }

  .quotation-face-modal-body {
    padding: 16px;
  }

  .modal-backdrop .quotation-face-modal-actions button:not(.icon-button),
  .modal-backdrop .quotation-copy-dialog-actions button:not(.icon-button) {
    width: auto;
    min-width: 0;
    flex: 1 1 0;
  }

  .quotation-copy-dialog-header,
  .quotation-copy-dialog form {
    padding-right: 17px;
    padding-left: 17px;
  }
}