:root {
  --bg: #f3f4f6;
  --card: #ffffff;
  --line: #d1d5db;
  --brand: #0f766e;
  --brand-dark: #115e59;
  --danger: #b91c1c;
  --text: #111827;
  --muted: #6b7280;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  background: radial-gradient(circle at top left, #ecfeff 0%, #f3f4f6 40%, #f9fafb 100%);
  color: var(--text);
}

.hidden {
  display: none !important;
}

.login-view {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 16px;
}

.card {
  width: min(460px, 100%);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(17, 24, 39, 0.08);
}

.card h1 {
  margin: 0 0 8px;
  font-size: 24px;
}

.muted {
  color: var(--muted);
}

label {
  display: block;
  margin: 10px 0 6px;
  font-size: 14px;
  font-weight: 700;
}

input,
select,
textarea,
button {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--line);
  padding: 5px 10px;
  font-size: 14px;
}

textarea {
  resize: vertical;
  min-height: 34px;
}

input,
select,
textarea {
  min-height: 34px;
  line-height: 1.25;
}

#clientForm input,
#clientForm select,
#clientForm textarea {
  min-height: 34px;
  padding: 5px 10px;
}

#clientForm textarea[name="siteLocations"],
#clientForm textarea[name="cooperationHistory"] {
  min-height: 34px;
}

#clientForm button[type="submit"] {
  min-height: 34px;
  padding: 5px 10px;
  margin-top: 0;
}

.client-collab-picker {
  position: relative;
  min-width: 0;
}

.client-collab-toggle {
  width: 100%;
  min-height: 34px;
  margin: 0;
  padding: 5px 32px 5px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  font-weight: 400;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
}

.client-collab-toggle:hover {
  background: #fff;
  border-color: #94a3b8;
}

.client-collab-toggle::after {
  content: "鈻?;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #111827;
  font-size: 12px;
}

.client-collab-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 60;
  display: grid;
  gap: 6px;
  max-height: 220px;
  overflow: auto;
  padding: 8px;
  border: 1px solid #dbe4ee;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
}

.client-collab-option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  margin: 0;
  padding: 5px 8px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f8fafc;
  font-weight: 500;
  cursor: pointer;
}

.client-collab-option input[type="checkbox"] {
  width: auto;
  min-height: 0;
  margin: 0;
}

.client-collab-option:has(input:checked) {
  border-color: #99f6e4;
  background: #f0fdfa;
  color: #0f766e;
}


.project-permission-picker {
  position: relative;
  min-width: 0;
}

.project-permission-toggle {
  width: 100%;
  min-height: 34px;
  margin: 0;
  padding: 5px 32px 5px 10px;
  border: 1px solid #cfd8e3;
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  font-weight: 400;
  text-align: left;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.project-permission-toggle:hover {
  background: #fff;
  border-color: #94a3b8;
}

.project-permission-toggle-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-permission-toggle::after {
  content: "▼";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  font-size: 11px;
}

.project-permission-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 60;
  display: grid;
  gap: 6px;
  max-height: 220px;
  overflow: auto;
  padding: 8px;
  border: 1px solid #dbe4ee;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
}

.project-permission-option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  margin: 0;
  padding: 5px 8px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f8fafc;
  font-weight: 500;
  cursor: pointer;
}

.project-permission-option input[type="checkbox"] {
  width: auto;
  min-height: 0;
  margin: 0;
}

.project-permission-option:has(input:checked) {
  border-color: #99f6e4;
  background: #f0fdfa;
  color: #0f766e;
}

.task-dispatch-form > * {
  min-height: 34px;
}

.task-dispatch-form {
  align-items: start;
}

.task-dispatch-form > input,
.task-dispatch-form > select,
.task-dispatch-form > textarea,
.task-dispatch-form > .task-inline-date,
.task-dispatch-form > .project-permission-picker,
.task-dispatch-form > button {
  min-height: 34px;
  height: 34px;
  align-self: start;
}

.task-dispatch-form > textarea[name="description"] {
  min-height: 34px;
  height: 34px;
  resize: none;
}

.task-inline-date {
  position: relative;
  display: block;
  min-height: 34px;
  height: 34px;
  align-self: start;
}

.task-dispatch-form > .task-inline-date {
  position: relative;
}

.task-inline-date > input {
  width: 100%;
  min-height: 34px;
  height: 34px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 34px;
}

.task-inline-date-label {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7280;
  font-size: 13px;
  line-height: 1;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.task-inline-date.has-value .task-inline-date-label {
  opacity: 0;
}

.task-inline-date:not(.has-value) > input {
  color: transparent;
  caret-color: transparent;
}

.task-inline-date:not(.has-value) > input::-webkit-datetime-edit,
.task-inline-date:not(.has-value) > input::-webkit-datetime-edit-fields-wrapper,
.task-inline-date:not(.has-value) > input::-webkit-datetime-edit-text,
.task-inline-date:not(.has-value) > input::-webkit-datetime-edit-year-field,
.task-inline-date:not(.has-value) > input::-webkit-datetime-edit-month-field,
.task-inline-date:not(.has-value) > input::-webkit-datetime-edit-day-field,
.task-inline-date:not(.has-value) > input::-webkit-datetime-edit-hour-field,
.task-inline-date:not(.has-value) > input::-webkit-datetime-edit-minute-field,
.task-inline-date:not(.has-value) > input::-webkit-datetime-edit-ampm-field {
  color: transparent;
}

.task-inline-date:not(.has-value) > input::-webkit-calendar-picker-indicator {
  opacity: 1;
}

.task-dispatch-form > button[type="submit"] {
  margin-top: 0;
}

.task-schedule-form,
.task-result-form {
  align-items: start;
}

.task-result-simple,
.task-edit-form,
.task-extra-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.task-result-form.task-result-simple,
.grid.task-extra-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.task-result-simple > .task-schedule-field,
.task-result-simple > .task-result-extra,
.task-dispatch-form > .task-dispatch-extra { height: auto; min-height: 0; }
.task-result-main,
.task-result-extra,
.task-result-simple > .task-photo-picker,
.task-result-simple > .task-photo-state,
.task-result-simple > .task-photo-preview,
.task-edit-description,
.task-edit-form > button[type="submit"],
.task-dispatch-extra { grid-column: 1 / -1; }
.task-result-simple label input,
.task-result-simple label select,
.task-edit-form label input,
.task-edit-form label select { margin: 0; width: 100%; min-width: 0; }
.task-result-simple label textarea,
.task-edit-form label textarea { margin: 0; width: 100%; min-width: 0; min-height: 76px; resize: vertical; }
.task-result-extra,
.task-dispatch-extra { padding: 10px 12px; border: 1px solid #dfe5ed; border-radius: 6px; background: #f8fafc; }
.task-result-extra > summary,
.task-dispatch-extra > summary { cursor: pointer; color: #425875; font-size: 13px; }
.task-extra-grid { margin-top: 12px; }
.task-result-simple > button[type="submit"],
.task-edit-form > button[type="submit"] { grid-column: 1 / -1; justify-self: end; width: auto; min-width: 130px; }
.task-extra-grid > * { min-width: 0; }
@media (min-width: 769px) {
  body.pc-ui-preview #taskForm .execution-form-field > .project-permission-picker { width: 100%; }
  body.pc-ui-preview #taskForm .execution-form-field .project-permission-toggle { width: 100%; min-height: 38px; margin: 0; text-align: left; }
  body.pc-ui-preview .task-dispatch-extra .execution-form-field { grid-column: auto; }
  body.pc-ui-preview .task-dispatch-extra .execution-form-field-description { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .task-result-form.task-result-simple, .task-edit-form, .grid.task-extra-grid { grid-template-columns: minmax(0, 1fr); }
}

.task-schedule-field {
  display: grid;
  gap: 4px;
  align-content: start;
}

.task-schedule-field > span {
  font-size: 12px;
  color: #64748b;
  line-height: 1.2;
}

.task-schedule-form > *,
.task-result-form > * {
  min-height: 34px;
  height: 34px;
  align-self: start;
}

.task-schedule-form > .task-schedule-field {
  min-height: auto;
  height: auto;
}

.task-schedule-field > input[type="date"],
.task-schedule-field > input[type="datetime-local"],
.task-result-form > input[type="date"],
.task-result-form > input[type="datetime-local"] {
  min-height: 34px;
  height: 34px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.task-result-form > textarea {
  min-height: 88px;
  height: 88px;
  resize: vertical;
}

.task-result-form > .task-photo-picker {
  min-height: 34px;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.task-photo-picker > input[type="file"] {
  flex: 1 1 220px;
  min-width: 0;
}

.task-photo-picker > .task-photo-clear {
  margin-top: 0;
}

.task-result-form > .task-photo-state {
  min-height: 34px;
  height: auto;
}

.task-result-form > .task-photo-preview {
  min-height: 0;
  height: auto;
}

.task-photo-preview:empty {
  display: none;
}

.task-photo-thumb-item {
  position: relative;
  display: inline-flex;
}

.task-photo-thumb-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  min-height: 20px;
  border-radius: 999px;
  padding: 0;
  margin: 0;
  background: rgba(15, 23, 42, 0.82);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
}

.task-photo-thumb-remove:hover {
  background: #b91c1c;
}

.task-schedule-form > button,
.task-result-form > button {
  margin-top: 0;
}
button {
  cursor: pointer;
  border: none;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  margin-top: 10px;
}

/* Touch browsers can retain :hover after a tap; reserve global hover paint for a mouse. */
@media (hover: hover) and (pointer: fine) {
  button:hover {
    background: var(--brand-dark);
  }
}

button.secondary {
  background: #374151;
}

@media (hover: hover) and (pointer: fine) {
  button.secondary:hover {
    background: #1f2937;
  }
}

button.danger {
  background: var(--danger);
}

button.tiny {
  width: auto;
  padding: 6px 10px;
  font-size: 12px;
  margin: 0 4px 4px 0;
  border-radius: 999px;
  font-weight: 700;
}

.table-action-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.table-action-group .tiny {
  margin: 0;
}

.purchase-table-actions {
  width: 112px;
  min-width: 112px;
  padding: 9px 8px;
  white-space: normal;
}

.purchase-table-action-group {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
}

.purchase-table-action-group .tiny {
  flex: 0 0 auto;
  width: 100%;
  justify-content: center;
  margin: 0;
}

.purchase-table-scroll {
  padding: 2px;
}

.purchase-list-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.purchase-list-table th,
.purchase-list-table td {
  padding: 6px 6px;
  line-height: 1.35;
  font-size: 12px;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.purchase-list-table th:nth-child(1),
.purchase-list-table td:nth-child(1) {
  width: 3%;
}

.purchase-list-table th:nth-child(2),
.purchase-list-table td:nth-child(2) {
  width: 6%;
}

.purchase-list-table th:nth-child(3),
.purchase-list-table td:nth-child(3),
.purchase-list-table th:nth-child(4),
.purchase-list-table td:nth-child(4) {
  width: 6%;
}

.purchase-list-table th:nth-child(5),
.purchase-list-table td:nth-child(5) {
  width: 6%;
}

.purchase-list-table th:nth-child(6),
.purchase-list-table td:nth-child(6),
.purchase-list-table th:nth-child(9),
.purchase-list-table td:nth-child(9),
.purchase-list-table th:nth-child(10),
.purchase-list-table td:nth-child(10),
.purchase-list-table th:nth-child(11),
.purchase-list-table td:nth-child(11) {
  width: 5%;
}

.purchase-list-table th:nth-child(7),
.purchase-list-table td:nth-child(7) {
  width: 6%;
}

.purchase-list-table th:nth-child(8),
.purchase-list-table td:nth-child(8) {
  width: 7%;
}

.purchase-list-table th:nth-child(12),
.purchase-list-table td:nth-child(12) {
  width: 6%;
}

.purchase-list-table th:nth-child(13),
.purchase-list-table td:nth-child(13) {
  width: 7%;
}

.purchase-list-table th:nth-child(14),
.purchase-list-table td:nth-child(14) {
  width: 5%;
}

.purchase-list-table th:nth-child(15),
.purchase-list-table td:nth-child(15) {
  width: 6%;
}

.purchase-list-table th:nth-child(16),
.purchase-list-table td:nth-child(16) {
  width: 4%;
}

.purchase-list-table th:nth-child(17),
.purchase-list-table td:nth-child(17) {
  width: 3%;
}

.purchase-list-table th:nth-child(18),
.purchase-list-table td:nth-child(18) {
  width: 5%;
}

.purchase-list-table th:nth-child(19),
.purchase-list-table td:nth-child(19) {
  width: 7%;
}

.purchase-list-table td:nth-child(12) .cell-main,
.purchase-list-table td:nth-child(13) .cell-sub,
.purchase-list-table td:nth-child(15) .cell-sub,
.purchase-list-table td:nth-child(16) .cell-sub,
.purchase-list-table td:nth-child(18) .cell-sub {
  margin-top: 2px;
}

.purchase-table-actions {
  width: 92px;
  min-width: 92px;
  padding: 6px 4px;
}

.purchase-table-action-group .tiny {
  font-size: 11px;
}

.purchase-voucher-cell {
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
}

.purchase-voucher-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.purchase-voucher-links .link-button {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 4px 6px;
  font-size: 11px;
  line-height: 1.25;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.purchase-voucher-cell .voucher-thumbs {
  margin-top: 6px;
  margin-bottom: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.purchase-voucher-cell .voucher-thumb-link {
  display: block;
  width: 100%;
  min-width: 0;
  border-radius: 8px;
}

.purchase-voucher-cell .voucher-thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}

.purchase-detail-warning {
  display: block;
  margin: 2px 0 14px;
}

.purchase-detail-vouchers {
  display: grid;
  gap: 8px;
}

.purchase-detail-vouchers .purchase-voucher-links {
  gap: 6px;
}

.purchase-detail-vouchers .purchase-voucher-links .link-button {
  width: fit-content;
  max-width: 100%;
}

.purchase-detail-vouchers .voucher-thumbs {
  margin-top: 0;
  margin-bottom: 0;
}

.quote-base-edit-row td {
  background: #f8fafc;
}

.quote-base-inline-input {
  width: 100%;
  min-height: 32px;
  margin: 0;
  padding: 4px 8px;
}

#quoteBaseForm.quote-base-form {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px 8px;
  align-items: stretch;
}

.quote-base-form > * {
  min-width: 0;
  margin: 0;
}

.quote-base-form > input[name="notes"] {
  grid-column: span 2;
}

.quote-base-form > button[type="submit"] {
  min-height: 34px;
}

.quote-base-template-picker {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid #dbe4ee;
  border-radius: 8px;
  background: #f8fafc;
}

.quote-base-template-picker > span {
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.quote-base-template-checks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
}

.quote-base-template-checks label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  color: #334155;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}

.quote-base-template-checks input[type="checkbox"] {
  width: 14px;
  height: 14px;
  min-height: 14px;
  margin: 0;
}

.quote-base-template-checks-compact {
  gap: 3px 6px;
}

.quote-base-template-checks-compact label {
  font-size: 11px;
}

.quote-base-template-checks-compact input[type="checkbox"] {
  width: 13px;
  height: 13px;
  min-height: 13px;
}

.quote-base-edit-row .quote-base-template-checks {
  min-width: 128px;
}

.quote-status-control {
  display: inline-grid;
  grid-template-columns: minmax(132px, auto) auto;
  gap: 4px;
  align-items: center;
  min-width: 0;
}

.quote-status-action-select {
  min-width: 132px;
  min-height: 30px;
  margin: 0;
  padding: 4px 7px;
  font-size: 12px;
}

.quote-status-control .tiny {
  margin: 0;
  white-space: nowrap;
}

.quote-form-panel {
  padding: 14px;
}

#quoteForm.quote-form {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 8px;
  row-gap: 6px;
  align-items: start;
}

.quote-layout-preview-banner,
.quote-layout-legacy-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 8px 10px;
  border-left: 3px solid var(--brand);
  background: #f3f8f7;
}

.quote-layout-preview-banner > div {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.quote-layout-preview-banner span,
.quote-layout-legacy-banner span {
  color: var(--muted);
  font-size: 12px;
}

.quote-layout-preview-banner button,
.quote-layout-legacy-banner button {
  flex: 0 0 auto;
  margin: 0;
}

.quote-form-layout-preview .quote-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 8px 10px;
  border-left: 3px solid var(--brand);
  border-bottom: 1px solid #cbdedb;
  background: #f3f8f7;
}

.quote-form-layout-preview .quote-section-heading > div {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.quote-form-layout-preview .quote-section-heading strong {
  color: #0f172a;
  font-size: 16px;
  line-height: 1.25;
}

.quote-form-layout-preview .quote-section-heading span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.quote-form-layout-preview > .quote-section-heading {
  margin-top: 2px;
}

.quote-form-layout-preview > .quote-service-plan > .quote-service-plan-head.quote-section-heading {
  margin: -12px -12px 0;
  border-left: 0;
  border-top: 0;
  border-radius: 0;
}

.quote-form-layout-preview .quote-service-subsection-heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  padding: 7px 0 2px;
  border-top: 1px solid #dbe4ee;
}

.quote-form-layout-preview .quote-service-subsection-heading strong {
  color: #0f766e;
  font-size: 14px;
}

.quote-form-layout-preview .quote-service-subsection-heading span {
  color: var(--muted);
  font-size: 12px;
}

.quote-form-layout-preview .quote-maintenance-cost-head.quote-section-heading {
  margin: -10px -10px 0;
  border-left: 0;
  border-top: 0;
}

.quote-form-layout-preview .quote-editor-head.quote-section-heading {
  margin: -12px -12px 10px;
  border-left: 0;
  border-top: 0;
}

.quote-form-layout-preview .quote-proposal-attachments-head.quote-section-heading {
  margin: -10px -10px 0;
  border-left: 0;
  border-bottom: 1px solid #cbdedb;
}

.quote-form-layout-preview .quote-proposal-attachments-head.quote-section-heading > div {
  display: grid;
  gap: 2px;
}

.quote-form-layout-preview .quote-proposal-attachments-head.quote-section-heading strong {
  font-size: 14px;
}

.quote-form-layout-preview .quote-summary-sheet-title.quote-section-heading {
  justify-content: flex-start;
  margin: 0;
  border-left: 0;
  border-bottom: 1px solid #9fb2c8;
  border-radius: 0;
}

.quote-form-layout-preview .quote-summary-sheet-title.quote-section-heading strong {
  font-size: 14px;
}

.quote-form-layout-preview > .quote-service-plan {
  padding: 12px;
  border: 1px solid #cbdedb;
  border-top: 3px solid var(--brand);
  background: #fbfefd;
}

.quote-form-layout-preview > .quote-service-plan .quote-service-plan-head {
  padding-bottom: 4px;
  border-bottom: 1px solid #d9e9e6;
}

.quote-form-layout-preview > .quote-service-plan .quote-service-plan-systems {
  padding-top: 9px;
  border-top: 1px solid #e2e8f0;
}

.quote-form-layout-preview > .quote-service-plan .quote-service-system-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px 8px;
  align-items: start;
}

.quote-form-layout-preview > .quote-service-plan .quote-service-system-option {
  min-width: 0;
  padding: 4px 6px;
  border: 1px solid #e2e8f0;
  background: #fff;
}

.quote-form-layout-preview > .quote-service-plan .quote-service-system-option span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.quote-form-layout-preview > .quote-service-plan .quote-proposal-attachments {
  margin-top: 4px;
  border-color: #cbdedb;
  background: #fff;
}

.quote-form-layout-preview > .quote-editor-block,
.quote-form-layout-preview > .quote-maintenance-cost-estimate,
.quote-form-layout-preview > .quote-engineering-cost-estimate,
.quote-form-layout-preview > .quote-inspection-cost-estimate {
  padding: 12px;
  border-top: 3px solid #94a3b8;
  background: #fff;
}

.quote-cost-summary-field {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 10px 12px;
  border-top: 2px solid #94a3b8;
  background: #f8fafc;
}

.quote-cost-summary-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

.quote-cost-summary-head span {
  color: var(--muted);
  font-size: 12px;
}

.quote-cost-summary-field > label {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin: 0;
}

.quote-cost-summary-field > label > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.quote-cost-summary-field input {
  min-width: 0;
  min-height: 36px;
  height: 36px;
  margin: 0;
}

.quote-form-layout-preview > .quote-cost-summary-field {
  border-left: 1px solid #dbe4ee;
  border-right: 1px solid #dbe4ee;
  border-bottom: 1px solid #dbe4ee;
}

.quote-form-layout-preview > .quote-editor-block {
  border-left: 1px solid #dbe4ee;
  border-right: 1px solid #dbe4ee;
  border-bottom: 1px solid #dbe4ee;
}

.quote-form-layout-preview > .quote-service-plan > textarea[name="notes"] {
  margin-top: 4px;
  border-color: #cbdedb;
}

.quote-form > div:not(.form-span-2) {
  position: relative;
  display: block;
  min-width: 0;
  align-self: stretch;
}

.quote-form > div:not(.form-span-2) > label {
  position: absolute;
  top: 5px;
  left: 11px;
  z-index: 2;
  max-width: calc(100% - 44px);
  min-height: 0;
  margin: 0;
  overflow: hidden;
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

.quote-form > div:not(.form-span-2) > input,
.quote-form > div:not(.form-span-2) > select {
  min-width: 0;
  min-height: 44px;
  height: 44px;
  width: 100%;
  margin: 0;
  padding: 17px 10px 4px;
}

.quote-form > div:has(> input[name="title"]),
.quote-form > div:has(> #quoteSourceQuoteId),
.quote-form > div:has(> input[name="estimatedCost"]) {
  grid-column: span 2;
}

.quote-form > .quote-editor-block {
  min-width: 0;
  margin-top: 0;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.quote-form > textarea[name="notes"] {
  min-height: 56px;
  margin: 0;
}

.quote-service-plan {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.quote-maintenance-cost-estimate {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
}

.quote-maintenance-cost-head strong,
.quote-maintenance-cost-head span {
  display: block;
}

.quote-maintenance-cost-head strong {
  color: #1f2937;
  font-size: 14px;
}

.quote-maintenance-cost-head span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.quote-maintenance-cost-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px 8px;
}

.quote-maintenance-cost-fields > label {
  display: grid;
  gap: 4px;
  min-width: 0;
  margin: 0;
}

.quote-maintenance-cost-fields > label > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.quote-maintenance-cost-fields input {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  height: 36px;
  margin: 0;
}

.quote-maintenance-cost-results {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.quote-inspection-cost-estimate .quote-maintenance-cost-results {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.quote-maintenance-cost-results > div {
  min-width: 0;
  padding: 8px;
  border: 1px solid #dbe3ec;
  background: #fff;
}

.quote-maintenance-cost-results span,
.quote-maintenance-cost-results strong {
  display: block;
}

.quote-maintenance-cost-results span {
  color: var(--muted);
  font-size: 12px;
}

.quote-maintenance-cost-results strong {
  margin-top: 4px;
  color: #111827;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.quote-repair-cost-result-section {
  display: grid;
  gap: 6px;
}

.quote-repair-cost-result-title {
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.quote-repair-cost-primary {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.quote-repair-cost-business {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.quote-repair-cost-business > div {
  padding: 10px 12px;
  border-color: #cbd5e1;
  background: #f8fafc;
}

.quote-repair-cost-business strong {
  font-size: 16px;
}

.quote-repair-cost-business .quote-repair-cost-minimum {
  border-color: #93c5fd;
  background: #eff6ff;
}

.quote-repair-cost-business .quote-repair-cost-minimum strong {
  color: #1d4ed8;
}

.quote-repair-cost-breakdown {
  border-top: 1px dashed #cbd5e1;
  padding-top: 7px;
}

.quote-repair-cost-breakdown summary {
  width: fit-content;
  color: #334155;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  list-style: none;
  user-select: none;
}

.quote-repair-cost-breakdown summary::-webkit-details-marker {
  display: none;
}

.quote-repair-cost-breakdown summary::before {
  content: "＋";
  margin-right: 4px;
  color: #64748b;
}

.quote-repair-cost-breakdown[open] summary::before {
  content: "－";
}

.quote-repair-cost-breakdown .quote-maintenance-cost-results {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 7px;
}

@media (max-width: 768px) {
  .quote-maintenance-cost-fields,
  .quote-maintenance-cost-results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quote-repair-cost-primary,
  .quote-repair-cost-business,
  .quote-repair-cost-breakdown .quote-maintenance-cost-results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.quote-service-plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.quote-service-plan-head > strong {
  font-size: 14px;
}

.quote-service-plan-head > button {
  margin: 0;
}

.quote-service-plan-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px 8px;
}

.quote-service-plan-fields > label {
  display: grid;
  gap: 4px;
  min-width: 0;
  margin: 0;
}

.quote-venue-select-wrap {
  position: relative;
  min-width: 0;
}

.quote-venue-select-wrap select {
  padding-right: 190px;
}

.quote-venue-select-wrap .quote-venue-status {
  position: absolute;
  top: 0;
  right: 30px;
  bottom: 0;
  max-width: calc(100% - 58px);
  min-height: 0;
  height: 36px;
  padding: 0;
  gap: 4px;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
}

.quote-venue-select-wrap .quote-venue-status span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.quote-service-plan-fields > label > span,
.quote-service-plan-systems > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.quote-service-plan-fields input,
.quote-service-plan-fields select {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  height: 36px;
  margin: 0;
}

.quote-venue-status {
  grid-column: span 1;
  min-width: 0;
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  font-size: 12px;
}

.quote-venue-status strong {
  flex: 0 0 auto;
  font-weight: 700;
}

.quote-venue-status span {
  flex: 0 1 auto;
  min-width: 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.quote-venue-status > button {
  flex: 0 0 auto;
  margin: 0 0 0 auto;
}

.quote-venue-status-ready {
  color: #216e45;
}

.quote-venue-status-ready strong {
  color: #216e45;
}

.quote-venue-status-dedicated {
  color: #315f89;
}

.quote-venue-status-dedicated strong {
  color: #315f89;
}

.quote-venue-status-pending {
  color: #875d12;
}

.quote-venue-status-pending strong {
  color: #875d12;
}

.quote-service-plan-fields textarea {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  margin: 0;
  resize: vertical;
}

.quote-service-plan-commercial-fields > label {
  grid-column: span 2;
}

.quote-service-plan-systems {
  display: grid;
  gap: 5px;
}

.quote-assessment-instruments {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.quote-assessment-instruments-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.quote-assessment-instruments-head > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.quote-assessment-instrument-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px 8px;
}

.quote-assessment-instrument-option {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  height: 26px;
  margin: 0;
  padding: 4px 6px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 12px;
  white-space: nowrap;
}

.quote-assessment-instrument-option > input[type="checkbox"] {
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  min-width: 15px;
  min-height: 15px;
  margin: 0;
  padding: 0;
}

.quote-assessment-instrument-option > span {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.quote-proposal-attachments {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
}

.quote-proposal-attachments-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.quote-proposal-attachments-head > div {
  display: grid;
  gap: 2px;
}

.quote-proposal-attachment-head-actions {
  display: flex !important;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.quote-proposal-attachments-head span,
.quote-proposal-attachment-source {
  color: var(--muted);
  font-size: 12px;
}

.quote-proposal-attachment-list {
  display: grid;
  gap: 6px;
}

.quote-proposal-attachment-row {
  display: grid;
  grid-template-columns: minmax(270px, 320px) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid #dbe4ee;
  border-radius: 6px;
  background: #fff;
}

.quote-proposal-attachment-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  margin: 0;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
}

.quote-proposal-attachment-check > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quote-proposal-attachment-drag-handle {
  width: 24px;
  min-width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: #f8fafc;
  color: #64748b;
  cursor: grab;
  line-height: 20px;
}

.quote-proposal-attachment-drag-handle:active {
  cursor: grabbing;
}

.quote-proposal-attachment-row.is-dragging {
  opacity: 0.55;
}

.quote-proposal-attachment-row.is-drag-over {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.12);
}

.quote-proposal-attachment-check input {
  width: 15px;
  height: 15px;
  min-height: 15px;
  margin: 0;
}

.quote-proposal-attachment-content {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.quote-proposal-attachment-content select,
.quote-proposal-attachment-content input:not([type="file"]) {
  min-width: 0;
  min-height: 32px;
  height: 32px;
  margin: 0;
}

.quote-proposal-attachment-content select {
  width: 112px;
}

.quote-proposal-attachment-content select[multiple] {
  width: min(100%, 360px);
  min-width: 220px;
  height: 58px;
  min-height: 58px;
  overflow-y: auto;
  padding: 4px;
  line-height: 1.35;
}

.quote-proposal-attachment-content input:not([type="file"]) {
  flex: 1 1 220px;
}

.quote-proposal-attachment-name-input {
  min-width: 180px;
  flex: 1 1 240px;
}

.quote-proposal-attachment-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  grid-column: 3;
  grid-row: 1;
}

.quote-proposal-attachment-selected-files {
  grid-column: 2 / -1;
  color: #216e45;
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.quote-proposal-attachment-file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--brand);
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}

.quote-proposal-attachment-file input {
  max-width: 170px;
  min-width: 0;
  margin: 0;
  font-size: 11px;
}

.quote-proposal-attachment-images {
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.quote-proposal-attachment-images figure {
  position: relative;
  width: 76px;
  margin: 0;
}

.quote-proposal-attachment-images img {
  display: block;
  width: 76px;
  height: 58px;
  object-fit: cover;
  border: 1px solid #dbe4ee;
  border-radius: 4px;
  background: #f8fafc;
}

.quote-proposal-attachment-images figcaption {
  margin-top: 2px;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.remove-quote-attachment-image {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  min-height: 18px;
  padding: 0;
  border-radius: 50%;
  background: #b42318;
  color: #fff;
  font-size: 14px;
  line-height: 16px;
}

@media (max-width: 760px) {
  .quote-proposal-attachment-row {
    grid-template-columns: 1fr auto;
  }

  .quote-proposal-attachment-actions {
    grid-column: 2;
  }

  .quote-proposal-attachment-selected-files {
    grid-column: 1 / -1;
  }

  .quote-proposal-attachment-content,
  .quote-proposal-attachment-images {
    grid-column: 1 / -1;
  }

  .quote-proposal-attachment-content {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .quote-proposal-attachment-content select,
  .quote-proposal-attachment-content input:not([type="file"]) {
    flex: 1 1 150px;
  }

  .quote-proposal-attachment-content select[multiple] {
    flex: 1 1 100%;
    min-width: 0;
  }

  .quote-proposal-attachments-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .quote-proposal-attachment-head-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 768px) {
  .page-shell,
  .page-shell > * {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .page-shell .page-hero,
  .page-shell .page-hero-head,
  .page-shell .page-hero-title,
  .page-shell .page-hero-subtitle {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

.quote-service-system-options {
  display: flex;
  align-items: center;
  gap: 6px 14px;
  flex-wrap: wrap;
}

.quote-form-layout-preview .quote-assessment-instrument-options {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.quote-service-system-option {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  font-size: 12px;
  white-space: nowrap;
}

.quote-service-system-option > input {
  width: 15px;
  height: 15px;
  min-height: 15px;
  margin: 0;
}

.quote-select-all-option {
  color: #0f766e;
  font-weight: 800;
  padding-right: 10px;
  border-right: 1px solid var(--line);
}

.quote-scope-priority {
  padding-left: 5px;
  border-left: 2px solid #b45309;
  color: #92400e;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.proposal-file-library {
  display: grid;
  gap: 12px;
}

.venue-template-library,
.venue-template-editor {
  display: grid;
  gap: 12px;
}

.venue-template-table td {
  vertical-align: top;
}

.venue-template-form {
  align-items: start;
}

.venue-template-form label {
  display: grid;
  gap: 5px;
  margin: 0;
}

.venue-template-form label > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.venue-template-form textarea {
  min-height: 82px;
  resize: vertical;
}

.proposal-file-form {
  align-items: end;
}

.proposal-file-form label {
  display: grid;
  gap: 4px;
  margin: 0;
}

.proposal-file-form label > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.proposal-file-picker {
  grid-column: span 2;
}

.proposal-file-picker input {
  min-height: 38px;
  margin: 0;
}

.proposal-file-permanent-field {
  display: flex !important;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  white-space: nowrap;
}

.proposal-file-permanent-field input {
  width: 16px;
  height: 16px;
  min-height: 16px;
  margin: 0;
}

.proposal-file-table td {
  vertical-align: top;
}

.proposal-file-link {
  color: var(--brand);
  font-size: 12px;
  text-decoration: none;
}

.proposal-file-item {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.proposal-file-inline-open,
.proposal-file-upload-name {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--brand);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.proposal-file-inline-open:hover,
.proposal-file-upload-name:hover {
  text-decoration: underline;
}

.proposal-file-upload-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 28px;
  padding: 6px;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  background: #fbfdff;
}

.proposal-file-upload-preview-item {
  display: grid;
  grid-template-columns: 48px minmax(120px, 1fr);
  gap: 2px 6px;
  width: 220px;
  padding: 5px;
  border: 1px solid #dbe4ee;
  border-radius: 5px;
  background: #fff;
}

.proposal-file-upload-preview-item img,
.proposal-file-upload-icon {
  grid-row: 1 / span 2;
  width: 48px;
  height: 38px;
  object-fit: cover;
  border-radius: 3px;
  background: #eef2f7;
  color: #64748b;
  font-size: 11px;
  line-height: 38px;
  text-align: center;
}

.proposal-file-upload-preview-open {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.proposal-file-upload-preview-item a {
  overflow: hidden;
  color: var(--brand);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.proposal-file-preview-card {
  width: min(92vw, 1000px);
  max-height: 90vh;
}

.proposal-file-preview-body {
  display: grid;
  place-items: center;
  min-height: 240px;
  max-height: 78vh;
  overflow: auto;
  padding: 8px;
  background: #f8fafc;
}

.proposal-file-preview-body img {
  display: block;
  max-width: 100%;
  max-height: 72vh;
  object-fit: contain;
}

.proposal-file-preview-body iframe {
  width: 100%;
  height: 72vh;
  border: 0;
  background: #fff;
}

.proposal-file-preview-content {
  display: grid;
  width: 100%;
  gap: 8px;
  justify-items: center;
}

.proposal-file-preview-download {
  justify-self: end;
}

.proposal-file-link:hover {
  text-decoration: underline;
}

.proposal-file-selection {
  color: #216e45;
  font-size: 12px;
}

.proposal-file-status {
  display: inline-block;
  margin-left: 4px;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 11px;
  white-space: nowrap;
}

.proposal-file-status-active {
  background: #e8f7ee;
  color: #216e45;
}

.proposal-file-status-expiring,
.proposal-file-status-scheduled {
  background: #fff4d6;
  color: #875d12;
}

.proposal-file-status-expired,
.proposal-file-status-replaced,
.proposal-file-status-archived {
  background: #eef1f5;
  color: #667085;
}

.proposal-file-load-error {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 9px;
  color: #b42318;
  font-weight: 700;
}

.proposal-file-load-error-row {
  color: #b42318;
  text-align: center;
}

.proposal-file-item .muted {
  white-space: nowrap;
}

@media (max-width: 760px) {
  .proposal-file-picker {
    grid-column: auto;
  }
}

.quote-service-plan > textarea {
  min-height: 132px;
  margin: 0;
  resize: vertical;
}

.quote-form > .modal-actions {
  padding-top: 0;
}

.quote-base-list-table th,
.quote-base-list-table td,
.quote-list-table th,
.quote-list-table td {
  padding: 6px 8px;
  line-height: 1.3;
}

.quote-editor-table:not(.quote-editor-table-engineering) th {
  padding: 6px 8px;
}

.quote-editor-table:not(.quote-editor-table-engineering) td {
  padding: 4px 5px;
  vertical-align: middle;
}

.quote-editor-table .tiny {
  min-height: 30px;
  height: 30px;
  margin: 0;
  padding: 4px 8px;
  white-space: nowrap;
}

@media (max-width: 1279px) {
  #quoteBaseForm.quote-base-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #quoteForm.quote-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quote-service-plan-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quote-assessment-instrument-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quote-form-layout-preview > .quote-service-plan .quote-service-system-options,
  .quote-form-layout-preview .quote-assessment-instrument-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quote-venue-status {
    grid-column: span 1;
  }

  .quote-form > div:has(> input[name="title"]),
  .quote-form > div:has(> #quoteSourceQuoteId) {
    grid-column: span 1;
  }
}

@media (max-width: 760px) {
  #quoteBaseForm.quote-base-form,
  #quoteForm.quote-form {
    grid-template-columns: 1fr;
  }

  .quote-service-plan-fields {
    grid-template-columns: 1fr;
  }

  .quote-assessment-instrument-options {
    grid-template-columns: 1fr;
  }

  .quote-layout-preview-banner,
  .quote-layout-legacy-banner {
    align-items: flex-start;
    flex-direction: column;
  }

  .quote-form-layout-preview > .quote-service-plan .quote-service-system-options,
  .quote-form-layout-preview .quote-assessment-instrument-options {
    grid-template-columns: 1fr;
  }

  .quote-cost-summary-field > label {
    grid-template-columns: 1fr;
  }

  .quote-service-plan-commercial-fields > label,
  .quote-venue-status {
    grid-column: 1;
  }

  .quote-venue-select-wrap select {
    padding-right: 150px;
  }

  .quote-venue-select-wrap .quote-venue-status {
    right: 30px;
    max-width: calc(100% - 58px);
  }

  .quote-base-form > input[name="notes"],
  .quote-form > div:has(> input[name="title"]),
  .quote-form > div:has(> #quoteSourceQuoteId),
  .quote-form > div:has(> input[name="estimatedCost"]) {
    grid-column: 1;
  }
}

.tips {
  margin-top: 12px;
  padding: 10px;
  border-radius: 10px;
  font-size: 12px;
  background: #ecfeff;
  border: 1px dashed #67e8f9;
}

.msg {
  margin-top: 10px;
  min-height: 20px;
  font-size: 13px;
  color: var(--danger);
}

.main-view {
  min-height: 100vh;
  padding: 14px;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 10px;
  align-content: start;
}

.topbar {
  grid-column: 1 / -1;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.topbar h2 {
  margin: 0;
  font-size: 20px;
}

.meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid #14b8a6;
  color: #0f766e;
  background: #ecfeff;
  font-size: 12px;
}

.badge.light {
  border-color: #94a3b8;
  color: #334155;
  background: #f1f5f9;
}

.badge.warn {
  border-color: #f59e0b;
  color: #92400e;
  background: #fff7ed;
}

.badge.danger {
  border-color: #ef4444;
  color: #991b1b;
  background: #fef2f2;
}

.badge.success {
  border-color: #10b981;
  color: #047857;
  background: #ecfdf5;
}

.attendance-user-cell {
  font-weight: 600;
}

.attendance-subtext {
  margin-top: 4px;
  font-size: 12px;
  color: #64748b;
}

.attendance-geo-note {
  margin-top: 8px;
}

.attendance-site-note {
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px dashed #bfd9d2;
  border-radius: 12px;
  background: #f6fffd;
  color: #0f766e;
  line-height: 1.6;
}

.attendance-photo-picker,
.attendance-settings,
.attendance-range-row {
  display: grid;
  gap: 8px;
}

.attendance-settings-shell {
  margin-top: 14px;
}

.attendance-settings-toggle {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
}

.attendance-settings-toggle-copy {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid #d7dee8;
  border-radius: 16px;
  background: linear-gradient(135deg, #f8fafc, #eefaf7);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.attendance-settings-toggle:hover .attendance-settings-toggle-copy {
  border-color: #bfd9d2;
  box-shadow: 0 12px 28px rgba(15, 118, 110, 0.08);
}

.attendance-settings-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.attendance-settings-title-row h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
}

.attendance-settings-toggle-text {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: #ffffff;
  color: #0f766e;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid #cde5df;
}

.system-fold-toggle-copy {
  gap: 0;
  padding: 8px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, #fbfefe, #f5fbf9);
  box-shadow: none;
}

.system-fold-toggle:hover .system-fold-toggle-copy {
  box-shadow: none;
}

.system-fold-toggle-row {
  gap: 10px;
}

.system-fold-toggle-row h4 {
  font-size: 14px;
}

.system-fold-toggle-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}

.system-fold-toggle-meta .page-chip {
  margin-top: 0;
  padding: 4px 10px;
  font-size: 12px;
}

.attendance-settings-chip-row {
  margin-top: 0;
}

.attendance-photo-picker {
  padding: 10px 12px;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
}

.attendance-pc-tip {
  padding: 12px;
  border: 1px dashed #d7dee8;
  border-radius: 12px;
  background: #fbfdff;
}

.attendance-pc-tip strong {
  color: #0f172a;
}

.attendance-photo-picker span,
.attendance-settings-head h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}

.attendance-photo-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.attendance-range-list {
  display: grid;
  gap: 10px;
}

.attendance-range-row {
  padding: 12px;
  border: 1px solid #dbe4ee;
  border-radius: 14px;
  background: #ffffff;
  gap: 12px;
}

.attendance-range-main {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(160px, 1.1fr) minmax(220px, 1.8fr) repeat(3, minmax(96px, 0.7fr));
  align-items: end;
}

.attendance-range-field {
  display: grid;
  gap: 6px;
}

.attendance-range-field span {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.attendance-range-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.attendance-range-empty {
  padding: 6px 0;
}

.attendance-settings-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.attendance-range-switch,
.attendance-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.attendance-settings {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid #d7dee8;
  border-radius: 16px;
  background: linear-gradient(180deg, #fbfdff, #f8fafc);
}

.attendance-settings-form {
  margin-top: 12px;
  gap: 12px;
}

.attendance-settings-switches {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 4px 0 2px;
}

.attendance-settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.attendance-settings-actions button {
  width: auto;
  margin: 0;
}

.attendance-location-main {
  font-weight: 600;
}

.attendance-photo-inline {
  margin-top: 8px;
}

.attendance-photo-inline .voucher-thumbs {
  gap: 6px;
}

.attendance-photo-inline .voucher-thumb {
  width: 52px;
  height: 52px;
}

.attendance-photo-preview .voucher-thumb-link,
.attendance-photo-inline .voucher-thumb-link {
  cursor: pointer;
}

.attendance-photo-preview .task-photo-thumb-item {
  position: relative;
}

.actions {
  display: flex;
  gap: 8px;
}

.actions button {
  width: auto;
  margin: 0;
}

.tabs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
}

.tab-group {
  display: grid;
  gap: 8px;
}

.tab-group + .tab-group {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px dashed #d7e0ea;
}

.tab-group-title {
  padding: 0 2px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.tabs button {
  width: 100%;
  margin: 0;
  background: #e5e7eb;
  color: #111827;
  border: 1px solid #cbd5e1;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  position: relative;
}

.tabs button.active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

.tab-button-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tab-alert-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px #fff;
}

.tabs button.active .tab-alert-badge {
  box-shadow: 0 0 0 2px var(--brand);
}

main {
  margin-top: 0;
  min-width: 0;
}

.panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 10px;
}

.page-shell {
  display: grid;
  gap: 12px;
}

.page-hero {
  background: linear-gradient(135deg, #f8fffd 0%, #eefbf7 52%, #f8fafc 100%);
  border: 1px solid #cfe7df;
  border-radius: 18px;
  padding: 16px 18px;
}

.page-hero-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.page-hero-title {
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
}

.page-hero-subtitle {
  margin-top: 6px;
  color: #475569;
  line-height: 1.6;
}

.page-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.page-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #bfdbd3;
  background: rgba(255, 255, 255, 0.78);
  color: #0f766e;
  font-size: 12px;
  font-weight: 700;
}

.section-block {
  display: grid;
  gap: 10px;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.section-head-note {
  color: #64748b;
  font-size: 13px;
}

.panel h3 {
  margin: 0 0 10px;
}

.grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.client-filter-grid {
  margin-top: 8px;
}

.client-create-form {
  margin-top: 12px;
}

.asset-form-grid > * {
  min-width: 0;
  align-self: start;
}

.asset-form-grid > select,
.asset-form-grid > textarea,
.asset-form-grid > button {
  min-height: 34px;
  height: 34px;
}

.asset-form-grid > textarea {
  resize: vertical;
  min-height: 34px;
  height: 34px;
}

.asset-form-grid > button[type="submit"] {
  margin-top: 0;
}

.asset-form-date-field {
  margin: 0;
}

.asset-form-inline-field {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.asset-form-inline-field > span {
  flex: 0 0 auto;
  margin: 0;
  color: #111827;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
}

.asset-form-inline-field > input[type="date"] {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  height: 100%;
  border: 0;
  padding-left: 0;
  padding-right: 0;
  background: transparent;
  box-shadow: none;
}

.asset-table-filter-grid {
  margin-top: 10px;
}

.asset-project-group {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #b9d7ea;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.asset-project-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.asset-project-group-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.asset-project-group-head h4 {
  margin: 0;
  font-size: 17px;
  color: #0f172a;
}

.asset-project-group-count {
  color: var(--muted);
  font-size: 13px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e0f2fe;
  color: #0369a1;
}

.asset-project-collapsed-tip {
  margin-top: 8px;
}

.asset-project-filter-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
  gap: 10px;
  margin: 10px 0 8px;
}

.asset-project-filter-summary {
  margin: 0 0 10px;
  font-size: 13px;
}

.asset-project-filter-input {
  min-width: 0;
}

.asset-project-filter-select {
  width: 100%;
}

.asset-project-empty {
  padding: 10px 0 4px;
}

.asset-location-group {
  margin-top: 12px;
  padding: 10px 12px 0;
  border-top: 1px dashed #cbd5e1;
  background: #fff;
  border-radius: 10px;
}

.asset-location-group:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.asset-location-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.asset-location-group-head h5 {
  margin: 0;
  font-size: 15px;
  color: #1d4ed8;
}

.asset-location-group-count {
  color: var(--muted);
  font-size: 12px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #eff6ff;
  color: #2563eb;
}

.purchase-form-grid {
  grid-template-columns: repeat(9, minmax(0, 1fr));
}

.purchase-form-grid > * {
  min-width: 0;
}

.purchase-form-grid .purchase-voucher-field {
  grid-column: span 2;
}

.purchase-form-grid > button[type="submit"] {
  align-self: start;
  margin-top: 0;
}

.form-static-field {
  display: grid;
  gap: 3px;
  align-content: start;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafc;
}

.form-static-label {
  color: #64748b;
  font-size: 12px;
  line-height: 1.2;
}

.form-static-value {
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}

.form-static-field-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 5px 10px;
  white-space: nowrap;
  overflow: hidden;
}

.form-static-field-inline .form-static-label {
  flex: 0 0 auto;
  margin: 0;
  font-size: 13px;
  line-height: 1.2;
}

.form-static-field-inline .form-static-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 13px;
  background: #fff;
}

th,
td {
  border: 1px solid #e5e7eb;
  padding: 9px 10px;
  text-align: left;
  vertical-align: top;
}

th {
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

tbody tr:hover td {
  background: #f9fcfb;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.company-report-cards {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 8px;
  padding-bottom: 4px;
}

.company-report-cards .stat {
  flex: 0 0 148px;
  padding: 10px 12px;
}

.company-report-cards .stat-label {
  font-size: 12px;
}

.company-report-cards .num {
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
  word-break: normal;
}

.company-report-cards .stat-sub {
  font-size: 11px;
  line-height: 1.35;
}

.company-report-cards .report-formula-card-fixed-asset .stat-sub {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.45;
}


.stat-button {
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  color: var(--text);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.stat-button .num {
  color: var(--text);
}

.stat-button .stat-label {
  color: #64748b;
}

.stat-button:hover {
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  border-color: #99f6e4;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.stat-button:focus-visible {
  outline: 2px solid #0f766e;
  outline-offset: 2px;
}

.user-permission-panel {
  border: 1px solid #dbe4ea;
  border-radius: 14px;
  padding: 10px;
  background: #f8fafc;
  width: 100%;
  min-width: 0;
}

.user-permission-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.user-permission-groups {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: start;
}

.user-permission-group {
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.72);
  min-width: 0;
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 8px 10px;
  align-content: start;
  align-items: start;
}

.user-permission-group h4 {
  margin: 6px 0 0;
  font-size: 13px;
  color: #0f172a;
  line-height: 1.25;
}

.user-permission-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(138px, 160px));
  gap: 6px;
  justify-content: start;
}

.user-permission-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 6px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #dbe4ea;
  margin: 0;
  min-height: 42px;
}

.user-permission-item input[type="checkbox"] {
  width: auto;
  margin: 0;
}

.user-permission-item.is-enabled {
  border-color: #99f6e4;
  background: #f0fdfa;
}

.user-permission-title {
  font-weight: 600;
  color: #0f172a;
  font-size: 13px;
  line-height: 1.2;
}

.user-permission-source {
  display: none;
}

.user-permission-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.user-permission-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  background: #ecfeff;
  color: #155e75;
  border: 1px solid #a5f3fc;
}

.user-permission-badge.locked {
  background: #fef3c7;
  color: #92400e;
  border-color: #fcd34d;
}

.user-permission-slot {
  min-width: 0;
}

.workspace-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.workspace-block {
  min-width: 0;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px;
  background: #fcfdff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.03);
}

.workspace-block h4 {
  margin: 0 0 10px;
  font-size: 16px;
}

.project-report-summary-block,
.project-report-structure-block,
.project-report-composition-block {
  align-self: start;
}

.project-report-summary-block .client-detail-list,
.project-report-structure-block .client-detail-list,
.project-report-composition-block .client-detail-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.voucher-inline-links {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.project-report-voucher-count {
  margin-bottom: 6px;
}

.project-report-detail-filter-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(132px, 0.8fr)) minmax(220px, 1.4fr) minmax(86px, auto);
  gap: 10px;
  align-items: center;
  margin: 4px 0 8px;
  padding: 8px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
}

.project-report-detail-filter-strip input,
.project-report-detail-filter-strip select {
  min-width: 0;
  width: 100%;
}

.project-report-detail-filter-strip button {
  min-width: 86px;
  white-space: nowrap;
}

.project-report-detail-filter-summary {
  gap: 8px;
  margin: 0 2px 8px;
}

.project-report-detail-filter-summary .page-chip {
  padding: 5px 10px;
  font-size: 12px;
}

.form-mode-group {
  min-width: 0;
}

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

.maintenance-checklist-block {
  padding: 10px 12px;
  border: 1px solid #dbe4ee;
  border-radius: 12px;
  background: linear-gradient(180deg, #fcfdff 0%, #f8fbff 100%);
}

.maintenance-plan-board {
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid #d7e3ea;
  border-radius: 16px;
  background: linear-gradient(180deg, #f7fcfb 0%, #ffffff 100%);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.maintenance-plan-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.maintenance-plan-head h3 {
  margin: 0;
}

.maintenance-plan-head-side {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.maintenance-plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.maintenance-plan-stat {
  width: 100%;
  margin: 0;
  padding: 12px;
  border: 1px solid #dbe4ee;
  border-radius: 14px;
  background: #fff;
  text-align: left;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.maintenance-plan-stat:hover {
  border-color: #8fc9c0;
  box-shadow: 0 10px 24px rgba(15, 118, 110, 0.08);
  transform: translateY(-1px);
}

.maintenance-plan-stat.active {
  border-color: #0f766e;
  box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.12);
}

.maintenance-plan-stat.warn {
  background: linear-gradient(180deg, #fffaf0 0%, #ffffff 100%);
}

.maintenance-plan-stat.danger {
  background: linear-gradient(180deg, #fff4f4 0%, #ffffff 100%);
  border-color: #fecaca;
}

.maintenance-plan-stat-label,
.maintenance-plan-stat-value,
.maintenance-plan-stat-sub {
  display: block;
}

.maintenance-plan-stat-label {
  color: #475569;
  font-size: 12px;
  line-height: 1.35;
}

.maintenance-plan-stat-value {
  margin-top: 6px;
  color: #0f172a;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}

.maintenance-plan-stat-sub {
  margin-top: 8px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

.maintenance-plan-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.maintenance-plan-toolbar button {
  width: auto;
  margin: 0;
}

.maintenance-plan-table-wrap {
  overflow-x: auto;
}

.maintenance-plan-table td {
  vertical-align: top;
}

.maintenance-plan-action-text {
  margin-bottom: 8px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.maintenance-plan-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.35;
}

.maintenance-plan-pill-normal {
  background: #eef2ff;
  color: #4338ca;
}

.maintenance-plan-pill-warn,
.maintenance-plan-contract-warn {
  background: #fff7ed;
  color: #c2410c;
}

.maintenance-plan-pill-danger,
.maintenance-plan-contract-danger {
  background: #fef2f2;
  color: #b91c1c;
}

.maintenance-plan-pill-empty,
.maintenance-plan-pill-draft {
  background: #f8fafc;
  color: #475569;
}

.maintenance-plan-contract {
  width: fit-content;
}

.maintenance-plan-row-danger td {
  background: #fffafa;
}

.maintenance-plan-row-warn td {
  background: #fffdf7;
}

.maintenance-plan-row-draft td {
  background: #fbfcff;
}

.maintenance-plan-empty {
  padding: 12px;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  background: #fcfdff;
}

.maintenance-project-home-head,
.maintenance-project-detail-head,
.maintenance-project-section-head,
.maintenance-period-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.maintenance-project-home-head,
.maintenance-project-detail-head {
  margin-bottom: 14px;
}

.maintenance-project-home-head h3,
.maintenance-project-detail-head h3,
.maintenance-project-section-head h3 {
  margin: 0 0 4px;
}

.maintenance-project-filters,
.maintenance-project-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.maintenance-project-filters {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e2e8f0;
}

.maintenance-project-filters button,
.maintenance-project-detail-actions button,
.maintenance-project-detail-main > button {
  width: auto;
  margin: 0;
}

.maintenance-project-table-wrap {
  overflow-x: auto;
}

.maintenance-record-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.maintenance-record-table-wrap > table {
  min-width: 1120px;
}

.maintenance-project-table {
  min-width: 880px;
}

.maintenance-project-table td {
  vertical-align: middle;
}

.maintenance-project-detail-main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.maintenance-entry-date-bar {
  display: flex;
  align-items: end;
  gap: 10px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid #d8e1e8;
  border-radius: 8px;
  background: #f8fafc;
}

.maintenance-entry-date-bar label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
}

.maintenance-entry-date-bar input,
.maintenance-entry-date-bar select {
  min-width: 170px;
}

.maintenance-entry-date-bar button {
  width: auto;
  margin: 0;
}

.maintenance-entry-date-bar .muted {
  align-self: center;
}

.maintenance-period-board {
  margin-bottom: 18px;
  padding: 12px;
  border: 1px solid #d8e1e8;
  border-radius: 8px;
  background: #fff;
}

.maintenance-ledger-board {
  margin: 18px 0;
  padding: 16px 0;
  border-top: 1px solid #d8e1e8;
  border-bottom: 1px solid #d8e1e8;
}

.maintenance-ledger-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 12px;
  border: 1px solid #d8e1e8;
  background: #f8fafc;
}

.maintenance-ledger-stats > div {
  min-width: 0;
  padding: 10px 12px;
  border-right: 1px solid #d8e1e8;
}

.maintenance-ledger-stats > div:last-child {
  border-right: 0;
}

.maintenance-ledger-stats span,
.maintenance-ledger-stats strong {
  display: block;
}

.maintenance-ledger-stats span {
  color: #64748b;
  font-size: 12px;
}

.maintenance-ledger-stats strong {
  margin-top: 4px;
  color: #0f172a;
  font-size: 22px;
}

.maintenance-ledger-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.maintenance-ledger-table {
  min-width: 860px;
}

.maintenance-task-board {
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid #d8e1e8;
  border-radius: 8px;
  background: #fff;
}

.maintenance-task-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.maintenance-task-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}

.maintenance-task-main {
  min-width: 0;
}

.maintenance-task-title,
.maintenance-task-meta,
.maintenance-task-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.maintenance-task-title {
  margin-bottom: 5px;
}

.maintenance-task-meta {
  color: #475569;
  font-size: 12px;
}

.maintenance-task-actions {
  flex: 0 0 auto;
  justify-content: flex-end;
}

.maintenance-task-actions button {
  width: auto;
  margin: 0;
}

#maintenanceTaskModal .project-permission-panel {
  position: static;
  margin-top: 6px;
  max-height: 160px;
  box-shadow: none;
}

.maintenance-period-head {
  margin-bottom: 10px;
}

.maintenance-project-section-title {
  margin-bottom: 3px;
  color: #0f172a;
  font-size: 15px;
  font-weight: 700;
}

.maintenance-period-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.maintenance-period-slot {
  min-width: 0;
  min-height: 78px;
  margin: 0;
  padding: 9px;
  border: 1px solid #dbe4ea;
  border-radius: 8px;
  background: #f8fafc;
  color: #334155;
  text-align: left;
}

.maintenance-period-slot:disabled {
  cursor: default;
  opacity: 1;
}

.maintenance-period-slot-done {
  border-color: #86c8bd;
  background: #f0fdfa;
}

.maintenance-period-slot-early {
  border-color: #7dd3fc;
  background: #f0f9ff;
  color: #075985;
}

.maintenance-period-slot-today,
.maintenance-period-slot-draft {
  border-color: #f59e0b;
  background: #fffbeb;
}

.maintenance-period-slot-overdue,
.maintenance-period-slot-late {
  border-color: #fca5a5;
  background: #fef2f2;
  color: #991b1b;
}

.maintenance-period-index,
.maintenance-period-date,
.maintenance-period-status {
  display: block;
}

.maintenance-period-index {
  font-weight: 700;
}

.maintenance-period-date,
.maintenance-period-status {
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.3;
}

.maintenance-period-date {
  color: #475569;
}

.maintenance-period-status {
  color: #64748b;
}

.maintenance-entry-date-empty {
  padding: 14px;
  border: 1px dashed #f59e0b;
  border-radius: 8px;
  background: #fffbeb;
  color: #92400e;
}

.maintenance-project-section-head {
  align-items: center;
  margin-bottom: 10px;
}

.maintenance-composer-heading {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 12px 0 8px;
}

.maintenance-carried-issues {
  padding: 12px 14px;
  border: 1px solid #f4c27a;
  border-radius: 8px;
  background: #fffaf0;
}

.maintenance-carried-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.maintenance-carried-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #f1d6a8;
  border-radius: 8px;
  background: #fff;
}

.maintenance-carried-main,
.maintenance-carried-result {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.maintenance-carried-result {
  margin: 0;
}

.maintenance-carried-result > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #7c2d12;
  font-size: 13px;
  font-weight: 700;
}

.maintenance-carried-result input[type="checkbox"] {
  width: auto;
  min-height: 0;
  margin: 0;
}

@media (max-width: 900px) {
  .maintenance-ledger-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .maintenance-ledger-stats > div:nth-child(2) {
    border-right: 0;
  }

  .maintenance-ledger-stats > div:nth-child(-n + 2) {
    border-bottom: 1px solid #d8e1e8;
  }

  .maintenance-period-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .maintenance-project-detail-head,
  .maintenance-entry-date-bar,
  .maintenance-task-row,
  .maintenance-carried-row {
    align-items: stretch;
    flex-direction: column;
  }

  .maintenance-carried-row {
    display: flex;
  }

  .maintenance-project-detail-actions button,
  .maintenance-entry-date-bar button,
  .maintenance-task-actions button {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .maintenance-project-home-head,
  .maintenance-project-section-head,
  .maintenance-period-head {
    flex-direction: column;
  }

  .maintenance-period-grid {
    display: flex;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .maintenance-period-slot {
    flex: 0 0 138px;
  }

  .maintenance-project-detail-main {
    flex-direction: column;
  }
}

.maintenance-form-section {
  padding: 12px 14px 14px;
  border: 1px solid #d9e2ec;
  border-radius: 14px;
  background: #fbfdff;
}

.maintenance-form-section-checks {
  margin-top: 2px;
  background: linear-gradient(180deg, #fbfdff 0%, #f7fbff 100%);
}

.maintenance-form-section-title {
  margin-bottom: 10px;
  color: #0f172a;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.maintenance-form-subgrid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.maintenance-inline-field {
  margin: 0;
  align-self: start;
}

.maintenance-inline-field > span {
  margin: 0;
  line-height: 1.2;
}

.maintenance-detail-row td {
  background: #f8fbff;
}

.maintenance-detail-panel {
  display: grid;
  gap: 12px;
  padding: 12px 10px 10px;
}

.maintenance-detail-summary,
.maintenance-detail-entries {
  display: grid;
  gap: 6px;
}

.maintenance-detail-summary {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.maintenance-detail-entry {
  padding: 10px 12px;
  border: 1px solid #dbe4ee;
  border-radius: 12px;
  background: #fff;
}

.maintenance-detail-entry .muted {
  margin-top: 4px;
}

.maintenance-detail-wide {
  grid-column: 1 / -1;
}

.maintenance-check-hint {
  margin-bottom: 10px;
}

.maintenance-checklist-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.maintenance-checklist-title {
  margin-bottom: 2px;
  color: #334155;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.maintenance-checklist-helper {
  margin-bottom: 8px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.5;
}

.maintenance-checklist-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 8px;
}

.maintenance-checklist-grid-compact {
  gap: 8px 10px;
}

.maintenance-checklist-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 5px 9px;
  border: 1px solid #dbe4ee;
  border-radius: 999px;
  background: #ffffff;
  color: #1f2937;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.maintenance-checklist-option input[type="checkbox"],
.maintenance-checklist-option input[type="radio"] {
  width: 14px;
  height: 14px;
  min-height: 14px;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
}

.maintenance-checklist-option span {
  display: inline-block;
  white-space: nowrap;
}

.maintenance-checklist-option:has(input:checked) {
  border-color: #67e8f9;
  background: #ecfeff;
  color: #155e75;
}

.search-select {
  position: relative;
}

.purchase-voucher-field {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
}

.purchase-voucher-field input[type="file"] {
  flex: 0 0 168px;
  min-width: 168px;
  max-width: 220px;
}

.purchase-voucher-field .muted {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  line-height: 1.4;
}

.search-select-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
  max-height: 220px;
  overflow-y: auto;
}

.search-select-item,
.search-select-empty {
  display: block;
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  font-size: 14px;
  border: none;
  border-bottom: 1px solid #eef2f7;
  background: #fff;
  color: #111827;
  margin: 0;
}

.search-select-item:last-child,
.search-select-empty:last-child {
  border-bottom: none;
}

.search-select-item:hover {
  background: #ecfeff;
}

.search-select-empty {
  color: var(--muted);
  cursor: default;
}

.inline-select-action {
  display: flex;
  align-items: center;
  gap: 8px;
}

.inline-select-action select {
  flex: 1 1 auto;
  margin: 0;
}

.inline-select-action .tiny {
  flex: 0 0 auto;
  margin: 0;
}

.inline-master-tools {
  display: grid;
  gap: 8px;
}

.inline-master-form {
  padding: 10px 12px;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
}

.project-contract-form {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  align-items: start;
}

.project-contract-create-toggle {
  display: none;
}

.project-contract-collab-inline {
  min-width: 0;
}

.project-contract-collab-inline .project-permission-toggle {
  min-height: 34px;
  padding: 5px 32px 5px 10px;
}

.project-contract-collab-inline .project-permission-toggle-text::before {
  content: "协同人：";
  color: #64748b;
}

.project-contract-inline-field {
  min-width: 0;
}

.project-contract-inline-field select {
  min-width: 0;
}

.project-contract-attachment-field {
  min-width: 0;
}

.project-contract-attachment-field > input[type="file"] {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.project-contract-attachment-field > .muted {
  display: none;
}

.project-contract-attachment-field > .voucher-thumbs {
  margin: 6px 0 0;
}

.project-contract-form > .inline-master-tools:not(:has(.inline-master-form:not(.hidden))) {
  display: none;
}

.project-contract-form > .quote-editor-block {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
}

.project-contract-form > textarea[name="notes"] {
  min-height: 42px;
  height: 42px;
  resize: vertical;
  grid-column: 1 / -1;
}

@media (min-width: 1280px) {
  .project-contract-form {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: 10px;
    row-gap: 8px;
  }

  .project-contract-form > select,
  .project-contract-form > input,
  .project-contract-form > textarea,
  .project-contract-form > .inline-select-action,
  .project-contract-form > .form-mode-group,
  .project-contract-form > #projectCollaboratorField,
  .project-contract-form > .project-contract-entity-field,
  .project-contract-form > .project-contract-account-field,
  .project-contract-form > .project-contract-attachment-field {
    grid-column: span 1;
    min-width: 0;
  }

  .project-contract-form > textarea[name="notes"] {
    grid-column: span 2;
    min-height: 34px;
    height: 34px;
  }

  .project-contract-attachment-field > input[type="file"] {
    height: 34px;
  }

  .project-contract-attachment-field > .voucher-thumbs:empty {
    display: none;
  }

  .project-contract-form > .project-contract-no-field,
  .project-contract-form > .project-contract-reminder-field {
    grid-column: span 2;
  }

  .project-contract-form > .project-contract-attachment-field {
    grid-column: span 2;
  }

  .project-contract-form > .project-contract-account-field {
    grid-column: span 2;
  }

  .project-contract-entity-field > label,
  .project-contract-account-field > label {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    color: var(--muted);
  }

  .project-contract-entity-field > label,
  .project-contract-account-field > label {
    display: none;
  }

  .project-contract-form > .quote-editor-block,
  .project-contract-form > .modal-actions,
  .project-contract-form > .inline-master-tools,
  .project-contract-form > .project-form-divider {
    grid-column: 1 / -1;
  }
}

.project-form-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding-top: 4px;
  color: #0f766e;
  font-size: 14px;
  font-weight: 700;
}

.project-form-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(15, 118, 110, 0.28), rgba(15, 23, 42, 0.08));
}

.link-button {
  display: inline-block;
  text-decoration: none;
  line-height: 1.2;
}

.voucher-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.voucher-thumb-link {
  display: inline-flex;
  width: auto;
  border: 1px solid #dbe4ec;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.voucher-thumb {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: cover;
  background: #f8fafc;
}

.preview-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow-y: auto;
  padding: 24px 12px;
}

.preview-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.72);
}

.preview-modal-card {
  position: relative;
  z-index: 1;
  width: min(92vw, 960px);
  margin: 0 auto;
  background: #fff;
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.28);
}

.preview-modal-close {
  width: auto;
  margin: 0 0 10px auto;
  display: block;
}

.preview-modal-image {
  display: block;
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 12px;
  background: #f8fafc;
}

.inline-html-preview-modal {
  display: block;
}

.inline-html-preview-card {
  width: min(96vw, 1400px);
  height: min(94vh, 1100px);
  display: flex;
  flex-direction: column;
  padding: 12px;
}

.inline-html-preview-card .system-dialog-header {
  flex: 0 0 auto;
  margin-bottom: 8px;
}

.inline-html-preview-frame {
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  border: 1px solid #dbe4ee;
  border-radius: 10px;
  background: #fff;
}

.system-toast-host {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 90;
  display: grid;
  gap: 10px;
  width: min(360px, calc(100vw - 24px));
  pointer-events: none;
}

.system-toast {
  transform: translateY(-8px);
  opacity: 0;
  padding: 12px 14px;
  border: 1px solid rgba(15, 118, 110, 0.22);
  border-radius: 14px;
  background: #ecfdf5;
  color: #064e3b;
  box-shadow: 0 14px 35px rgba(15, 23, 42, 0.18);
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.system-toast.visible {
  transform: translateY(0);
  opacity: 1;
}

.system-dialog {
  z-index: 80;
}

.system-dialog-card {
  width: min(92vw, 560px);
  padding: 18px;
}

.system-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.system-dialog-header h3 {
  margin: 0;
}

.system-dialog-header .preview-modal-close {
  margin: 0;
}

.system-dialog-message {
  margin: 8px 0 14px;
  color: var(--muted);
  line-height: 1.6;
}

.system-dialog-fields {
  display: grid;
  gap: 12px;
}

.system-dialog-field {
  margin: 0;
}

.system-dialog-field span {
  display: inline-block;
  margin-bottom: 6px;
}

.system-dialog-field textarea {
  min-height: 88px;
}

.purchase-action-dialog-card {
  width: min(92vw, 620px);
}

.purchase-action-dialog-card .system-dialog-message {
  white-space: pre-line;
}

.system-dialog-required {
  color: var(--danger);
  margin-left: 2px;
}

.system-dialog-error {
  margin-top: 12px;
  padding: 9px 10px;
  border: 1px solid #fecaca;
  border-radius: 10px;
  background: #fff7f7;
  color: var(--danger);
}

.system-dialog-actions {
  margin-top: 16px;
}

.review-alert {
  border-color: #fecaca;
  background: #fff7f7;
}

.review-alert-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #fde2e2;
  border-radius: 10px;
  margin-top: 10px;
  background: #fff;
}

.review-comment-danger {
  color: #b91c1c;
  font-weight: 700;
}

.review-comment-warn {
  color: #b45309;
  font-weight: 700;
}

.workspace-full {
  grid-column: 1 / -1;
}

.stat {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.03);
  display: block;
  width: 100%;
  text-align: left;
  margin: 0;
}

.stat .num {
  font-size: 22px;
  font-weight: 700;
  margin-top: 6px;
}

.stat-label {
  color: #64748b;
  font-size: 12px;
}

.stat-sub {
  margin-top: 6px;
  color: #64748b;
  font-size: 12px;
}

.stat-action {
  cursor: pointer;
  appearance: none;
  color: inherit;
}

.stat-action:hover {
  transform: none;
}

.task-detail-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.task-detail-toolbar select {
  flex: 1 1 320px;
}

.task-detail-toolbar button {
  width: auto;
  margin: 0;
}

.task-inline-note {
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
  color: #475569;
  font-size: 13px;
}

.toolbar-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #dbe4ec;
  border-radius: 12px;
  background: #f8fafc;
}

.toolbar-strip input,
.toolbar-strip select,
.toolbar-strip button {
  margin: 0;
}

.toolbar-strip input,
.toolbar-strip select {
  min-width: 180px;
  flex: 1 1 180px;
}

.toolbar-strip button {
  width: auto;
  flex: 0 0 auto;
}

.task-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

.task-summary-card {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 8px 10px;
  background: #fcfdff;
  min-width: 0;
}

.task-summary-label {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
}

.task-summary-value {
  font-size: 13px;
  line-height: 1.35;
  word-break: break-word;
}

.task-summary-sub {
  display: inline-block;
  margin-left: 8px;
  color: var(--muted);
  font-size: 12px;
}

.task-history-list {
  margin-top: 12px;
}

.task-card-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.task-card-section-head .task-history-title,
.task-card-section-head .task-history-toggle {
  margin: 0;
}

.task-history-title {
  margin: 0 0 10px;
  font-size: 16px;
}

.task-history-item {
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
}

.task-history-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.task-history-index {
  margin-bottom: 6px;
  font-weight: 700;
}

.task-history-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  color: #475569;
  font-size: 12px;
}

.task-history-compact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  margin-bottom: 8px;
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f8fafc;
  color: #64748b;
  font-size: 12px;
}

.task-history-compact strong {
  color: #0f766e;
}

.task-history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  line-height: 1.6;
}

.task-history-photos {
  margin-top: 10px;
}

.task-board-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.task-list-filter-form {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) repeat(2, minmax(135px, 1fr)) auto auto auto;
  gap: 8px;
  align-items: center;
  margin: 0 0 10px;
}

.task-list-filter-form > * { min-width: 0; margin: 0; }
.task-attention-filter { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 13px; }
.task-attention-filter input { width: auto; margin: 0; }
.task-admin-details { padding: 12px; border: 1px solid #dbe5ee; border-radius: 10px; }
.task-admin-details > summary { cursor: pointer; font-weight: 700; color: #174a75; }
.task-admin-details[open] > summary { margin-bottom: 12px; }
.task-reassign-form { align-items: end; margin-bottom: 12px; }
.task-reassign-assignees { display: grid; gap: 5px; }
.task-reassign-assignees > span { font-size: 12px; color: #64748b; }
.task-reassign-form button { margin: 0; }

@media (max-width: 1050px) {
  .task-list-filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .task-list-filter-form { grid-template-columns: minmax(0, 1fr); }
}

.task-board-filter {
  width: auto;
  margin: 0;
  background: #e5e7eb;
  color: #111827;
  border: 1px solid #cbd5e1;
}

.task-board-filter.active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

.task-board-list {
  display: grid;
  gap: 10px;
}

.task-site-board {
  padding: 14px;
  border: 1px solid #dbe5ee;
  border-radius: 16px;
  background: linear-gradient(180deg, #f8fcfe 0%, #ffffff 100%);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.task-site-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.task-site-head h3 {
  margin: 0;
}

.task-site-head-side {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.task-site-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.task-site-stat {
  width: 100%;
  margin: 0;
  padding: 12px;
  border: 1px solid #dbe4ee;
  border-radius: 14px;
  background: #fff;
  text-align: left;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.task-site-stat:hover {
  border-color: #8ab8dd;
  box-shadow: 0 10px 24px rgba(59, 130, 246, 0.08);
  transform: translateY(-1px);
}

.task-site-stat.active {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

.task-site-stat.warn {
  background: linear-gradient(180deg, #fffaf0 0%, #ffffff 100%);
}

.task-site-stat.danger {
  background: linear-gradient(180deg, #fff4f4 0%, #ffffff 100%);
  border-color: #fecaca;
}

.task-site-stat-label,
.task-site-stat-value,
.task-site-stat-sub {
  display: block;
}

.task-site-stat-label {
  color: #475569;
  font-size: 12px;
  line-height: 1.35;
}

.task-site-stat-value {
  margin-top: 6px;
  color: #0f172a;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}

.task-site-stat-sub {
  margin-top: 8px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

.task-site-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.task-site-toolbar button {
  width: auto;
  margin: 0;
}

.task-site-table-wrap {
  overflow-x: auto;
}

.task-site-table td {
  vertical-align: top;
}

.task-site-action-text {
  margin-bottom: 8px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.task-site-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.35;
}

.task-site-pill-warn {
  background: #fff7ed;
  color: #c2410c;
}

.task-site-pill-danger {
  background: #fef2f2;
  color: #b91c1c;
}

.task-site-row-overdue td {
  background: #fffafa;
}

.task-site-row-today td {
  background: #fffdf7;
}

.task-site-empty {
  padding: 12px;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  background: #fcfdff;
}

.task-card {
  border: 1px solid #dbe4ec;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

.task-card.expanded {
  border-color: #8ec5bf;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.task-card.needs-nudge {
  border-color: #f59e0b;
  box-shadow: 0 10px 24px rgba(245, 158, 11, 0.12);
}

.task-card.dashboard-highlight-card {
  border-color: #f59e0b;
  background: linear-gradient(180deg, #fffdf4 0%, #ffffff 100%);
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.22), 0 14px 32px rgba(245, 158, 11, 0.14);
}

.task-card.dashboard-highlight-card .task-card-toggle {
  background: linear-gradient(180deg, rgba(255, 247, 204, 0.88) 0%, rgba(255, 255, 255, 0.96) 100%);
}

.dashboard-action-card.warn .task-card-title {
  color: #9a3412;
}

.task-card-toggle {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 14px;
  background: #fcfffe;
  color: #111827;
  border: none;
}

.task-card-toggle:hover {
  background: #f3fbfa;
}

.task-card-main {
  min-width: 0;
  text-align: left;
}

.task-card-title-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.task-card-title {
  font-size: 16px;
  font-weight: 700;
}

.task-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  color: #475569;
  font-size: 13px;
}

.task-card-sub {
  margin-top: 8px;
  color: #334155;
  line-height: 1.6;
  word-break: break-word;
}

.task-card-arrow {
  flex-shrink: 0;
  color: #0f766e;
  font-weight: 700;
  white-space: nowrap;
}

.task-card-detail {
  padding: 0 14px 14px;
  border-top: 1px solid #ecf0f4;
  background: #fff;
}

.task-card-section {
  margin-top: 12px;
}

.task-compact-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.task-collab-modal-card {
  width: min(94vw, 920px);
  max-width: 920px;
}

.task-nudge-modal-card {
  width: min(92vw, 560px);
}

.task-nudge-modal-card textarea {
  min-height: 120px;
}

.task-collab-checkboxes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid #dbe4ee;
  border-radius: 10px;
  background: #f8fafc;
  max-height: 340px;
  overflow: auto;
}

.task-collab-option {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.task-collab-option input[type="checkbox"] {
  width: auto;
  margin: 0;
}

.task-collab-option:has(input:checked) {
  border-color: #99f6e4;
  background: #f0fdfa;
}

.task-multi-picker .client-collab-toggle,
.task-multi-picker .client-collab-panel {
  min-width: 100%;
}

.task-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.task-card-actions .tiny,
.receivable-table-actions .tiny {
  margin: 0;
}

@media (max-width: 768px) {
  .task-business-details { display: none !important; }
}

.task-empty {
  padding: 18px;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  color: #64748b;
}

.quote-editor-block {
  margin-top: 8px;
}

.quote-editor-block .table-scroll {
  overflow-x: auto;
  overflow-y: visible;
}

.quote-editor-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.quote-editor-head button {
  width: auto;
  margin: 0;
}

.quote-editor-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.quote-column-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.quote-column-inline-editor {
  display: grid;
  grid-template-columns: minmax(180px, 1.8fr) minmax(140px, 1fr) minmax(180px, 1.2fr) auto auto;
  gap: 8px;
  margin-bottom: 10px;
  align-items: center;
}

.quote-column-inline-editor input,
.quote-column-inline-editor select,
.quote-column-inline-editor button {
  margin: 0;
}

.quote-column-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  border-radius: 10px;
}

.quote-column-chip-type {
  font-size: 12px;
  color: #475569;
  background: #e2e8f0;
  padding: 2px 6px;
  border-radius: 999px;
}

.quote-column-chip-pos {
  font-size: 12px;
  color: #1d4ed8;
}

@media (max-width: 1100px) {
  .quote-column-inline-editor {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.quote-editor-table-engineering {
  min-width: 1320px;
  table-layout: fixed;
  border: 1px solid #9fb2c8;
}

.quote-editor-table input,
.quote-editor-table select,
.quote-editor-table textarea {
  min-width: 72px;
  min-height: 32px;
  padding: 5px 8px;
  font-size: 13px;
}

.quote-editor-table-engineering input,
.quote-editor-table-engineering select,
.quote-editor-table-engineering textarea {
  min-width: 64px;
  padding: 7px 8px;
  font-size: 12px;
}

.quote-base-combo {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  width: 100%;
}

.quote-base-combo .quote-base-combo-input {
  border-radius: 0;
  border-right: 0;
}

.quote-base-combo-toggle {
  min-width: 38px;
  width: 38px;
  min-height: 34px;
  margin: 0;
  padding: 0;
  border: 1px solid #b7c6d8;
  border-radius: 0;
  background: #f1f5f9;
  color: #0f172a;
  font-size: 12px;
  font-weight: 800;
}

.quote-base-combo-toggle:hover {
  background: #e2e8f0;
}

.quote-base-combo-panel {
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  z-index: 80;
  width: min(460px, 80vw);
  max-height: 260px;
  overflow: auto;
  padding: 6px;
  border: 1px solid #b7c6d8;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.18);
}

.quote-base-picker-option {
  display: grid;
  gap: 2px;
  width: 100%;
  margin: 0;
  padding: 7px 9px;
  border: 0;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  text-align: left;
}

.quote-base-picker-option:hover {
  background: #ecfeff;
}

.quote-base-picker-option:focus {
  outline: 2px solid #14b8a6;
  outline-offset: -2px;
  background: #ecfeff;
}

.quote-base-picker-main {
  font-weight: 800;
  white-space: normal;
}

.quote-base-picker-meta,
.quote-base-picker-empty {
  color: #64748b;
  font-size: 12px;
  white-space: normal;
}

.quote-base-picker-empty {
  padding: 8px;
}

.quote-editor-table-engineering th,
.quote-editor-table-engineering td {
  white-space: nowrap;
  padding: 0;
  vertical-align: middle;
  border: 1px solid #b7c6d8;
  background: #fff;
}

.quote-editor-table-engineering th:nth-child(2),
.quote-editor-table-engineering td:nth-child(2) {
  white-space: normal;
  width: 180px;
  min-width: 180px;
}

.quote-editor-table-engineering th:nth-child(3),
.quote-editor-table-engineering td:nth-child(3) {
  white-space: normal;
  width: 180px;
  min-width: 180px;
}

.quote-editor-table-engineering th:nth-child(4),
.quote-editor-table-engineering td:nth-child(4) {
  width: 72px;
}

.quote-editor-table-engineering th:nth-child(5),
.quote-editor-table-engineering td:nth-child(5),
.quote-editor-table-engineering th:nth-child(6),
.quote-editor-table-engineering td:nth-child(6),
.quote-editor-table-engineering th:nth-child(7),
.quote-editor-table-engineering td:nth-child(7),
.quote-editor-table-engineering th:nth-child(8),
.quote-editor-table-engineering td:nth-child(8),
.quote-editor-table-engineering th:nth-child(9),
.quote-editor-table-engineering td:nth-child(9) {
  width: 90px;
}

.quote-editor-table-engineering th:nth-child(10),
.quote-editor-table-engineering td:nth-child(10) {
  white-space: normal;
  width: 150px;
  min-width: 150px;
}

.quote-editor-table-engineering th:nth-child(11),
.quote-editor-table-engineering td:nth-child(11) {
  width: 124px;
  min-width: 124px;
}

.quote-editor-table-engineering th:last-child,
.quote-editor-table-engineering .quote-cell-action,
.quote-editor-table-engineering .quote-group-actions-cell {
  width: 124px;
  min-width: 124px;
}

.quote-editor-table-engineering .tiny {
  padding: 5px 8px;
  font-size: 12px;
}

.quote-editor-table-engineering thead th {
  padding: 8px 10px;
  background: #eaf1f8;
  text-align: center;
  font-weight: 700;
}

.quote-sheet-input {
  width: 100%;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 10px 12px;
  margin: 0;
  min-height: 44px;
  font-size: 13px;
  box-shadow: none;
}

.quote-sheet-input:focus {
  outline: 2px solid #93c5fd;
  outline-offset: -2px;
}

.quote-sheet-input-center {
  text-align: center;
}

.quote-sheet-input-strong {
  font-weight: 700;
  color: #0f172a;
}

.quote-cell-index,
.quote-cell-unit,
.quote-cell-qty,
.quote-cell-labor,
.quote-cell-material,
.quote-cell-custom,
.quote-cell-composite,
.quote-cell-total {
  text-align: center;
}

.quote-engineering-custom-head,
.quote-cell-custom {
  min-width: 110px;
  width: 110px;
}

.quote-cell-index {
  padding: 10px 6px !important;
}

.quote-group-row td,
.quote-group-subtotal-row td {
  background: #f6fbff;
}

.quote-group-name-cell,
.quote-group-subtotal-name-cell {
  background: #f6fbff !important;
  font-weight: 700;
}

.quote-group-subtotal-label-cell,
.quote-group-subtotal-value-cell,
.quote-group-subtotal-value {
  text-align: center;
  font-weight: 700;
  color: #0f766e;
  background: #f6fbff !important;
}

.quote-group-actions-cell {
  padding: 6px !important;
  text-align: center;
  background: #f6fbff !important;
}

.quote-group-actions-cell .tiny {
  margin: 0 2px;
}

.quote-settlement-row td {
  background: #fff;
}

.quote-settlement-label-cell {
  background: #f8fafc !important;
  font-weight: 700;
}

.quote-settlement-value-cell {
  text-align: center;
  font-weight: 700;
  white-space: nowrap;
}

.quote-settlement-total-row td {
  background: #ecfdf5 !important;
}

.quote-settlement-total-row .quote-settlement-label-cell,
.quote-settlement-total-row .quote-settlement-value-cell {
  color: #065f46;
  font-weight: 800;
}

.quote-settlement-total-row .quote-settlement-value-cell {
  font-size: 22px;
}

.quote-editor-table-engineering td:first-child,
.quote-editor-table-engineering th:first-child {
  width: 46px;
  text-align: center;
}

.quote-cost-cell,
.quote-amount-cell {
  white-space: nowrap;
  font-weight: 700;
  color: #0f766e;
}

.quote-group-row td,
.quote-group-subtotal-row td {
  background: #f8fafc;
}

.quote-group-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.quote-group-title .engineering-group-name {
  flex: 1 1 220px;
  min-width: 180px;
}

.quote-group-title .task-card-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.quote-group-title span {
  color: #0f766e;
  font-weight: 700;
}

.quote-summary-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.quote-form-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.quote-form-head h3 { margin: 0; }
.quote-form-head > button { width: auto; margin: 0; }

.quote-summary-sheet {
  border: 1px solid #9fb2c8;
  background: #fff;
}

.quote-summary-sheet-internal {
  background: #f8fafc;
}

.quote-summary-sheet-customer {
  border-color: #8ac9b5;
}

.quote-summary-sheet-customer .quote-summary-sheet-title {
  background: #ebf8f2;
  border-bottom-color: #8ac9b5;
}

.quote-summary-sheet-customer .quote-customer-total th,
.quote-summary-sheet-customer .quote-customer-total td {
  background: #e7f7ef;
  color: #075e44;
}

.quote-summary-sheet-customer .quote-customer-total td {
  font-size: 22px;
}

@media (min-width: 1200px) {
  .quote-summary-layout:has(.quote-summary-sheet-customer) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.quote-summary-sheet-title {
  padding: 8px 10px;
  font-size: 14px;
  font-weight: 700;
  background: #eaf1f8;
  border-bottom: 1px solid #9fb2c8;
}

.quote-summary-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-size: 13px;
}

.quote-summary-table th,
.quote-summary-table td {
  border: 1px solid #b7c6d8;
  padding: 6px 10px;
}

.quote-summary-table th {
  width: 42%;
  text-align: left;
  background: #f8fafc;
  font-weight: 700;
}

.quote-summary-table td {
  text-align: right;
  font-weight: 700;
}

.quote-summary-table-total th,
.quote-summary-table-total td {
  background: #ecfdf5;
  color: #065f46;
}

.quote-summary-table-total td {
  font-size: 22px;
}

.quote-summary-sheet-internal .quote-summary-table {
  display: block;
}

.quote-summary-sheet-internal .quote-summary-table tbody {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.quote-summary-sheet-internal .quote-summary-table tr {
  display: grid;
  min-width: 0;
  min-height: 54px;
  align-content: center;
  gap: 4px;
  padding: 7px 10px;
  border-right: 1px solid #b7c6d8;
  border-bottom: 1px solid #b7c6d8;
  background: #fff;
}

.quote-summary-sheet-internal .quote-summary-table th,
.quote-summary-sheet-internal .quote-summary-table td {
  display: block;
  width: auto;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
}

.quote-summary-sheet-internal .quote-summary-table th {
  color: #64748b;
  font-size: 11px;
  line-height: 1.2;
}

.quote-summary-sheet-internal .quote-summary-table td {
  color: #0f172a;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .quote-summary-sheet-internal .quote-summary-table tbody {
    grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
  }
}

.client-expand-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  margin: 0;
  padding: 6px 10px;
  text-align: center;
}

.client-expand-button:hover {
  background: var(--brand-dark);
}

.client-expand-button.active {
  background: var(--brand-dark);
}

.client-detail-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid #dbe4ec;
  border-radius: 10px;
  background: #f8fafc;
  color: #0f172a;
  text-align: left;
}

.client-detail-toggle:hover {
  background: #eef8f6;
}

.client-detail-toggle.active {
  border-color: #7dc9bd;
  background: #ecfdf5;
}

.client-detail-hint {
  flex-shrink: 0;
  color: #0f766e;
  font-size: 12px;
  font-weight: 700;
}

.client-follow-form {
  align-items: end;
  gap: 10px 12px;
}

.client-follow-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

.client-follow-form label .muted {
  font-size: 12px;
  line-height: 1.2;
}

.client-follow-form textarea,
.client-follow-form input,
.client-follow-form select {
  margin: 0;
}

.client-follow-form button[type="submit"] {
  width: auto;
  min-width: 124px;
  height: 38px;
  margin: 0;
  padding: 0 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  align-self: end;
  box-shadow: none;
}

.client-detail-row td {
  background: #f8fafc;
  padding: 14px;
}

.client-detail-panel {
  border: 1px solid #dbe4ec;
  border-radius: 12px;
  background: #fff;
  padding: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.client-overview-panel {
  display: grid;
  gap: 14px;
}

.client-overview-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e5eef5;
}

.client-detail-title {
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}

.client-overview-panel .client-detail-title {
  margin-bottom: 4px;
}

.client-overview-subtitle {
  color: #64748b;
  font-size: 13px;
  line-height: 1.5;
}

.client-overview-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 10px;
}

.client-overview-metric {
  min-width: 0;
  padding: 12px;
  border: 1px solid #dde7ef;
  border-radius: 8px;
  background: #f8fbfd;
}

.client-overview-metric.warn {
  border-color: #fed7aa;
  background: #fff7ed;
}

.client-overview-metric-label {
  display: block;
  margin-bottom: 6px;
  color: #64748b;
  font-size: 12px;
}

.client-overview-metric strong {
  display: block;
  color: #0f172a;
  font-size: 20px;
  line-height: 1.2;
  word-break: break-word;
}

.client-overview-layout {
  display: grid;
  gap: 16px;
}

.client-overview-section {
  min-width: 0;
  padding-top: 2px;
}

.client-overview-section + .client-overview-section {
  padding-top: 14px;
  border-top: 1px solid #e8eef4;
}

.client-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.client-detail-block {
  min-width: 0;
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 12px;
  border: 1px solid #e5eef5;
  border-radius: 12px;
  background: linear-gradient(180deg, #fcfeff 0%, #f8fbfd 100%);
}

.client-detail-block-full {
  grid-column: 1 / -1;
}

.client-detail-subtitle {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #0f766e;
}

.client-detail-subtitle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.client-detail-subtitle-row .client-detail-subtitle {
  margin-bottom: 0;
}

.client-detail-section-toggle {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  flex-shrink: 0;
}

.client-detail-collapsed-tip {
  padding: 10px 12px;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
  color: #64748b;
  font-size: 12px;
}

.client-detail-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.client-detail-split-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.client-detail-column {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.client-detail-column-title {
  color: #334155;
  font-size: 12px;
  font-weight: 700;
}

.client-detail-count-note {
  margin-bottom: 8px;
  color: #64748b;
  font-size: 12px;
}

.client-detail-standalone-group {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.client-detail-list {
  display: grid;
  gap: 8px;
}

.client-detail-item,
.client-detail-note,
.client-detail-empty {
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fcfdff;
  line-height: 1.6;
  word-break: break-word;
}

.client-detail-item-collapsible {
  padding: 0;
  overflow: hidden;
}

.client-detail-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}

.client-detail-summary::-webkit-details-marker {
  display: none;
}

.client-detail-preview {
  min-width: 0;
  color: #334155;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.client-detail-summary-action {
  flex-shrink: 0;
  color: #0f766e;
  font-size: 12px;
  font-weight: 700;
}

.client-detail-item-collapsible[open] .client-detail-summary-action::after {
  content: '收起';
}

.client-detail-item-collapsible:not([open]) .client-detail-summary-action::after {
  content: '展开';
}

.client-detail-item-collapsible[open] .client-detail-summary-action {
  color: #0f766e;
}

.client-detail-item-collapsible > .client-detail-summary .client-detail-summary-action {
  font-size: 0;
}

.client-detail-content {
  padding: 0 12px 12px;
  border-top: 1px dashed #d9e4ec;
  line-height: 1.7;
  color: #0f172a;
}

.client-detail-fact {
  display: grid;
  gap: 6px;
}

.client-detail-fact-head {
  display: grid;
  gap: 4px;
}

.client-detail-fact-title {
  min-width: 0;
  color: #0f172a;
  font-weight: 700;
  line-height: 1.5;
}

.client-detail-fact-summary {
  color: #334155;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
}

.client-detail-fact-meta {
  color: #64748b;
  font-size: 12px;
  line-height: 1.55;
}

.client-detail-fact-compact {
  gap: 4px;
}

.client-detail-stack {
  display: grid;
  gap: 4px;
}

.client-detail-inline-tag {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fff7ed;
  color: #c2410c;
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}

.cell-main {
  display: block;
  color: #111827;
  font-weight: 700;
}

.cell-sub {
  display: block;
  margin-top: 4px;
  color: #6b7280;
  font-size: 12px;
  line-height: 1.45;
}

.cell-alert {
  display: inline-block;
  margin-top: 6px;
  padding: 4px 8px;
  border-radius: 8px;
  background: #fff7ed;
  color: #9a3412;
  font-size: 12px;
  line-height: 1.4;
}

.project-contract-board-table td {
  vertical-align: top;
}

.project-contract-note-cell {
  min-width: 240px;
  max-width: 320px;
}

.project-contract-note-cell .cell-alert {
  display: block;
  width: 100%;
  margin-top: 0;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  box-sizing: border-box;
}

.project-contract-actions-cell {
  min-width: 112px;
  position: relative;
  z-index: 1;
}

.project-contract-actions-cell .table-action-group {
  position: relative;
  z-index: 2;
}

.project-cost-analysis-panel {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #dbe3ec;
}

.project-cost-analysis-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.project-cost-analysis-head strong,
.project-cost-section-title {
  color: #1f2937;
  font-size: 14px;
}

.project-cost-analysis-head span,
.project-cost-section-title small {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
}

.project-cost-analysis-head button {
  width: auto;
  margin: 0;
  flex: 0 0 auto;
}

.project-cost-analysis-empty {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  color: #64748b;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.project-cost-analysis-empty button {
  width: auto;
  margin: 0 0 0 auto;
}

.project-cost-summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.project-cost-summary-grid > div {
  min-width: 0;
  padding: 9px;
  border: 1px solid #dbe3ec;
  background: #fff;
}

.project-cost-summary-grid span,
.project-cost-summary-grid strong {
  display: block;
}

.project-cost-summary-grid span {
  color: #64748b;
  font-size: 12px;
}

.project-cost-summary-grid strong {
  margin-top: 4px;
  color: #111827;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.project-cost-alerts,
.project-cost-notes,
.project-cost-actual-work {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 10px;
}

.project-cost-alerts span,
.project-cost-normal,
.project-cost-notes span,
.project-cost-actual-work span {
  padding: 5px 8px;
  font-size: 12px;
  line-height: 1.45;
}

.project-cost-alerts span {
  color: #9a3412;
  background: #fff7ed;
  border-left: 3px solid #f97316;
}

.project-cost-normal {
  margin: 8px 0 10px;
  color: #166534;
  background: #f0fdf4;
  border-left: 3px solid #22c55e;
}

.project-cost-section-title {
  margin: 12px 0 6px;
  font-weight: 700;
}

.project-cost-table {
  min-width: 760px;
}

.project-cost-table td {
  vertical-align: top;
}

.project-cost-over {
  color: #b91c1c;
  font-weight: 700;
}

.project-cost-save {
  color: #15803d;
  font-weight: 700;
}

.project-cost-actual-work span {
  color: #1e3a5f;
  background: #eff6ff;
}

.project-cost-target-panel {
  margin: 12px 0;
  padding: 10px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
}

.project-cost-target-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.project-cost-target-head strong,
.project-cost-target-head span {
  display: block;
}

.project-cost-target-head strong {
  color: #1f2937;
  font-size: 14px;
}

.project-cost-target-head span,
.project-cost-review-result {
  color: #64748b;
  font-size: 12px;
  line-height: 1.5;
}

.project-cost-target-head button {
  width: auto;
  margin: 0;
}

.project-cost-target-summary,
.project-cost-progress-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}

.project-cost-target-summary span,
.project-cost-progress-summary span {
  padding: 5px 8px;
  color: #334155;
  background: #fff;
  border: 1px solid #dbe3ec;
  font-size: 12px;
}

.project-cost-target-table {
  min-width: 1080px;
}

.project-cost-target-unit,
.project-cost-progress-value {
  width: 112px;
  min-width: 112px;
  margin: 0;
  padding: 5px 7px;
}

.project-cost-progress-value {
  width: 86px;
  min-width: 86px;
}

.project-cost-review-result {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #cbd5e1;
}

.project-cost-notes span {
  color: #64748b;
  background: #f8fafc;
}

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

.client-detail-empty {
  color: #64748b;
 }

.client-follow-inline-form {
  margin-top: 10px;
}

.client-follow-project-summary {
  color: #0f766e;
  font-weight: 700;
}

.client-follow-project-conversion {
  color: #0f766e;
  font-weight: 700;
}

.client-follow-conversion-notice {
  padding: 10px 12px;
  border-left: 3px solid #0f766e;
  background: #f0fdfa;
  color: #134e4a;
  line-height: 1.5;
}

.client-follow-project-table {
  min-width: 1080px;
}

.client-follow-project-table td {
  vertical-align: top;
}

.client-follow-project-table th:last-child,
.client-follow-project-table td:last-child {
  min-width: 250px;
}

.client-follow-project-progress {
  min-width: 220px;
  max-width: 360px;
  white-space: normal;
}

.client-follow-project-ended {
  opacity: 0.68;
}

.client-follow-project-form {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) minmax(120px, 0.7fr) minmax(140px, 0.8fr) minmax(150px, 0.8fr) minmax(220px, 1.4fr) 88px;
  gap: 10px;
  align-items: end;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid #e5eef5;
}

.client-follow-project-form label {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.client-follow-project-form label > span {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.client-follow-project-form input,
.client-follow-project-form select,
.client-follow-project-form button {
  width: 100%;
  margin: 0;
}

.client-follow-project-form button {
  min-width: 88px;
  height: 42px;
}

.client-follow-project-edit-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.client-list-table {
  min-width: 1180px;
}

@media (max-width: 1280px) {
  .client-overview-metrics {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }

  .client-detail-split-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .client-follow-project-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .client-follow-project-progress-field {
    grid-column: span 2;
  }
}

@media (max-width: 760px) {
  .client-overview-header {
    display: grid;
  }

  .client-overview-metrics,
  .client-detail-split,
  .client-detail-split-3 {
    grid-template-columns: 1fr;
  }

  .client-follow-project-form,
  .client-follow-project-edit-fields {
    grid-template-columns: 1fr;
  }

  .client-follow-project-progress-field {
    grid-column: auto;
  }
}

.quote-list-table {
  min-width: 0;
  table-layout: fixed;
}

.quote-list-table > thead > tr > th:nth-child(1),
.quote-list-table > tbody > tr[data-row-id] > td:nth-child(1) {
  width: 7%;
}

.quote-list-table > thead > tr > th:nth-child(2),
.quote-list-table > tbody > tr[data-row-id] > td:nth-child(2) {
  width: 24%;
}

.quote-list-table > thead > tr > th:nth-child(3),
.quote-list-table > tbody > tr[data-row-id] > td:nth-child(3) {
  width: 20%;
}

.quote-list-table > thead > tr > th:nth-child(4),
.quote-list-table > tbody > tr[data-row-id] > td:nth-child(4) {
  width: 14%;
}

.quote-list-table > thead > tr > th:nth-child(5),
.quote-list-table > tbody > tr[data-row-id] > td:nth-child(5) {
  width: 8%;
}

.quote-list-table > thead > tr > th:nth-child(6),
.quote-list-table > tbody > tr[data-row-id] > td:nth-child(6) {
  width: 12%;
}

.quote-list-table > thead > tr > th:nth-child(7),
.quote-list-table > tbody > tr[data-row-id] > td:nth-child(7) {
  width: 15%;
}

.quote-list-table > thead > tr > th,
.quote-list-table > tbody > tr[data-row-id] > td {
  white-space: normal;
  overflow-wrap: anywhere;
  vertical-align: top;
}

.quote-list-table .cell-sub {
  margin-top: 2px;
  line-height: 1.35;
}

.quote-list-table > tbody > tr[data-row-id] .table-action-group {
  gap: 4px;
  align-items: flex-start;
}

.quote-list-table > tbody > tr[data-row-id] .table-action-group .tiny {
  padding: 4px 7px;
  font-size: 11px;
  white-space: nowrap;
}

.reimbursement-list-table {
  min-width: 1520px;
}

.report-compare-table {
  min-width: 1120px;
}

.report-compare-table th,
.report-compare-table td,
.report-subcategory-table th,
.report-subcategory-table td {
  white-space: nowrap;
}

.report-subcategory-scroll {
  height: 420px;
}

.table-scroll.report-subcategory-scroll {
  overflow-y: auto;
}

.report-compare-table td:last-child,
.report-compare-table th:last-child {
  min-width: 280px;
  white-space: normal;
}

.reimbursement-form {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  align-items: start;
}

.reimbursement-form > #reimVoucherState,
.reimbursement-form > #reimVoucherPreview {
  grid-column: 1 / -1;
}

.reimbursement-form select,
.reimbursement-form input,
.reimbursement-form textarea {
  min-width: 0;
}

.reimbursement-form > textarea[name="reason"] {
  min-height: 46px;
  resize: vertical;
}

.reimbursement-form > button[type="submit"] {
  width: auto;
  min-width: 180px;
  justify-self: start;
  padding-inline: 28px;
}

@media (min-width: 1280px) {
  .reimbursement-form > textarea[name="reason"] {
    grid-column: span 4;
  }
}

.table-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  padding: 2px;
  scroll-behavior: smooth;
}

.backup-file-main {
  font-weight: 700;
  color: #0f172a;
  line-height: 1.5;
}

.system-backup-shell {
  margin-top: 14px;
}

.system-backup-panel {
  margin-top: 14px;
}

.system-summary-cards {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.system-top-actions {
  display: grid;
  grid-template-columns: minmax(260px, 1.05fr) minmax(260px, 0.95fr);
  gap: 8px;
  align-items: stretch;
  max-width: 860px;
}

.system-top-actions > .system-file-picker,
.system-top-actions > .system-top-action-buttons {
  min-height: 34px;
}

.system-file-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.system-file-picker-title {
  flex: 0 0 auto;
  color: #0f172a;
  font-size: 14px;
  font-weight: 700;
}

.system-top-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 380px;
  align-items: center;
}

.system-top-action-buttons > button {
  width: auto;
  min-width: 182px;
  min-height: 28px;
  margin: 0;
  padding: 0 16px;
  border-radius: 12px;
}

.system-file-picker input[type="file"] {
  min-width: 0;
  border: 0;
  padding: 0;
  box-shadow: none;
  background: transparent;
}

.system-dingtalk-cards {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
}

.system-dingtalk-cards .stat {
  padding: 6px 10px;
}

.system-dingtalk-cards .stat-label {
  font-size: 11px;
}

.system-dingtalk-cards .num {
  margin-top: 2px;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 600;
}

.system-dingtalk-action {
  width: auto;
  min-width: 182px;
  min-height: 28px;
  margin: 0;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 14px;
}

.system-dingtalk-action-group {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  grid-column: span 2;
  justify-self: start;
}

.system-dingtalk-form {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
}

.system-dingtalk-form > button[type="submit"],
.system-dingtalk-form > button[type="button"] {
  min-height: 40px;
}

@media (max-width: 1280px) {
  .system-summary-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .system-dingtalk-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .system-top-actions,
  .system-top-action-buttons,
  .system-dingtalk-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .system-top-actions,
  .system-top-action-buttons {
    max-width: none;
  }
}

@media (max-width: 760px) {
  .system-summary-cards,
  .system-top-actions,
  .system-top-action-buttons,
  .system-dingtalk-cards,
  .system-dingtalk-form {
    grid-template-columns: 1fr;
  }

  .system-dingtalk-action-group {
    grid-column: auto;
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
  }

  .system-dingtalk-action-group .system-dingtalk-action {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal;
  }
}

/* Keep legacy mobile page shells shrinkable; wide tables stay scrollable inside their own frame. */
@media (max-width: 768px) {
  .page-shell,
  .page-shell > *,
  .page-shell .table-scroll {
    min-width: 0;
    max-width: 100%;
  }

  .page-shell {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }

  .page-shell .grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-shell .table-scroll {
    width: 100%;
  }

  .page-shell .table-scroll > table {
    min-width: 720px;
  }
}

.receivable-main-table {
  min-width: 1680px;
}

.receivable-form {
  align-items: start;
  row-gap: 10px;
}

.receivable-form-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.receivable-form-field .muted {
  margin: 0;
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
}

.receivable-form .inline-select-action {
  min-height: 34px;
}

.receivable-form .inline-select-action .tiny {
  align-self: end;
  min-height: 34px;
  padding-inline: 12px;
}

.receivable-form-summary {
  padding: 10px 12px;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  line-height: 1.6;
}

.receivable-form-notes {
  min-height: 72px;
}

.receivable-panel-note {
  margin-top: 10px;
}

.receivable-overview-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.receivable-create-toggle {
  display: none;
}

.receivable-filter-strip {
  display: grid;
  grid-template-columns: minmax(260px, 1.7fr) repeat(4, minmax(128px, 0.78fr)) minmax(96px, auto);
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
}

.receivable-filter-strip input,
.receivable-filter-strip select {
  min-width: 0;
  width: 100%;
  flex: initial;
}

.receivable-filter-strip input[type="date"] {
  min-width: 0;
}

.receivable-filter-strip button {
  min-width: 96px;
  white-space: nowrap;
  justify-self: end;
}

.receivable-filter-summary {
  gap: 8px;
  margin: 8px 2px 0;
}

.receivable-filter-summary .page-chip {
  padding: 5px 10px;
  font-size: 12px;
}

.purchase-filter-strip {
  display: grid;
  grid-template-columns:
    minmax(220px, 1.5fr)
    repeat(4, minmax(118px, 0.72fr))
    repeat(2, minmax(132px, 0.78fr))
    minmax(96px, auto);
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
}

.purchase-filter-strip input,
.purchase-filter-strip select {
  min-width: 0;
  width: 100%;
  flex: initial;
}

.purchase-filter-strip input[type="date"] {
  min-width: 0;
}

.purchase-filter-strip button {
  min-width: 96px;
  white-space: nowrap;
  justify-self: end;
}

.purchase-filter-summary {
  gap: 8px;
  margin: 8px 2px 0;
}

.purchase-filter-summary .page-chip {
  padding: 5px 10px;
  font-size: 12px;
}

.fund-request-filter-strip {
  display: grid;
  grid-template-columns:
    minmax(240px, 1.6fr)
    repeat(2, minmax(170px, 0.9fr))
    repeat(2, minmax(132px, 0.78fr))
    minmax(96px, auto);
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
}

.fund-request-filter-strip input,
.fund-request-filter-strip select {
  min-width: 0;
  width: 100%;
  flex: initial;
}

.fund-request-filter-strip input[type="date"] {
  min-width: 0;
}

.fund-request-filter-strip button {
  min-width: 96px;
  white-space: nowrap;
  justify-self: end;
}

.fund-request-filter-summary {
  gap: 8px;
  margin: 8px 2px 0;
}

.fund-request-filter-summary .page-chip {
  padding: 5px 10px;
  font-size: 12px;
}

.reimbursement-filter-strip {
  display: grid;
  grid-template-columns:
    minmax(240px, 1.5fr)
    repeat(3, minmax(150px, 0.88fr))
    repeat(2, minmax(132px, 0.78fr))
    minmax(96px, auto);
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
}

.reimbursement-filter-strip input,
.reimbursement-filter-strip select {
  min-width: 0;
  width: 100%;
  flex: initial;
}

.reimbursement-filter-strip input[type="date"] {
  min-width: 0;
}

.reimbursement-filter-strip button {
  min-width: 96px;
  white-space: nowrap;
  justify-self: end;
}

.reimbursement-filter-summary {
  gap: 8px;
  margin: 8px 2px 0;
}

.reimbursement-filter-summary .page-chip {
  padding: 5px 10px;
  font-size: 12px;
}

.reimbursement-filters input[type="date"] {
  min-width: 150px;
  flex: 0 1 150px;
}

.receivable-main-row.is-expanded td {
  background: #f7fcfb;
}

.dashboard-highlight-row > td {
  background: #fff7cc !important;
  box-shadow: inset 0 0 0 2px #f59e0b;
}

.nav-alert-highlight,
.nav-alert-highlight > td {
  animation: navAlertGlow 1.2s ease-in-out infinite alternate;
  background: #fff7cc !important;
  box-shadow: inset 0 0 0 2px rgba(245, 158, 11, 0.72);
}

.nav-alert-highlight.task-card {
  border-color: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.28), 0 16px 32px rgba(245, 158, 11, 0.16);
}

.nav-alert-highlight.task-card .task-card-toggle {
  background: #fff7cc;
}

@keyframes navAlertGlow {
  from {
    background-color: #fff7cc;
  }
  to {
    background-color: #fffbeb;
  }
}

/* Desktop reminder and jump highlights share the approved quiet side-rail style. */
@media (min-width: 769px) {
  body.pc-ui-preview {
    --row-highlight-bg: #f7f9fc;
    --row-highlight-rail: #4673b1;
  }

  body.pc-ui-preview :is(.nav-alert-highlight, .dashboard-highlight-row, .dashboard-highlight-card) {
    animation: none;
    box-shadow: none;
  }

  body.pc-ui-preview :is(tr.nav-alert-highlight, tr.dashboard-highlight-row),
  body.pc-ui-preview :is(tr.nav-alert-highlight, tr.dashboard-highlight-row) > td {
    animation: none;
    background: var(--row-highlight-bg) !important;
    box-shadow: none;
  }

  body.pc-ui-preview :is(tr.nav-alert-highlight, tr.dashboard-highlight-row) > td:first-child {
    position: relative;
  }

  body.pc-ui-preview :is(tr.nav-alert-highlight, tr.dashboard-highlight-row) > td:first-child::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 3px;
    border-radius: 3px;
    background: var(--row-highlight-rail);
    pointer-events: none;
  }

  body.pc-ui-preview .task-card:is(.nav-alert-highlight, .dashboard-highlight-card) {
    border-color: #dbe4ec;
    background: #fff !important;
    box-shadow: none;
  }

  body.pc-ui-preview .task-card:is(.nav-alert-highlight, .dashboard-highlight-card) .task-card-toggle {
    position: relative;
    background: var(--row-highlight-bg) !important;
  }

  body.pc-ui-preview .task-card:is(.nav-alert-highlight, .dashboard-highlight-card) .task-card-toggle::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 3px;
    border-radius: 3px;
    background: var(--row-highlight-rail);
    pointer-events: none;
  }

  body.pc-ui-preview .material-workspace #material-pending-section .client-detail-item.nav-alert-highlight {
    position: relative;
    padding-left: 12px;
    background: var(--row-highlight-bg) !important;
  }

  body.pc-ui-preview .material-workspace #material-pending-section .client-detail-item.nav-alert-highlight::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 3px;
    background: var(--row-highlight-rail);
    pointer-events: none;
  }
}

.receivable-table-actions {
  white-space: nowrap;
}

@media (max-width: 1080px) {
  .receivable-filter-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .receivable-filter-strip > :first-child {
    grid-column: 1 / -1;
  }

  .receivable-filter-strip button {
    justify-self: stretch;
  }

  .purchase-filter-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .purchase-filter-strip > :first-child {
    grid-column: 1 / -1;
  }

  .purchase-filter-strip button {
    justify-self: stretch;
  }

  .fund-request-filter-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fund-request-filter-strip > :first-child {
    grid-column: 1 / -1;
  }

  .fund-request-filter-strip button {
    justify-self: stretch;
  }

  .reimbursement-filter-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reimbursement-filter-strip > :first-child {
    grid-column: 1 / -1;
  }

  .reimbursement-filter-strip button {
    justify-self: stretch;
  }

  .project-report-detail-filter-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-report-detail-filter-strip > :nth-child(4) {
    grid-column: 1 / -1;
  }

  .project-report-detail-filter-strip button {
    justify-self: stretch;
  }

  .material-filter-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .material-filter-strip > :first-child {
    grid-column: 1 / -1;
  }

  .material-filter-strip #materialClearFilters {
    grid-column: auto;
  }
}

@media (max-width: 640px) {
  .receivable-filter-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  .receivable-filter-strip > :first-child {
    grid-column: auto;
  }

  .purchase-filter-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  .purchase-filter-strip > :first-child {
    grid-column: auto;
  }

  .fund-request-filter-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  .fund-request-filter-strip > :first-child {
    grid-column: auto;
  }

  .reimbursement-filter-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  .reimbursement-filter-strip > :first-child {
    grid-column: auto;
  }

  .project-report-detail-filter-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-report-detail-filter-strip > :nth-child(4) {
    grid-column: auto;
  }

  .project-report-detail-filter-strip button {
    width: 100%;
  }

  .material-filter-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  .material-filter-strip > :first-child {
    grid-column: auto;
  }
}

@media (min-width: 1280px) {
  .receivable-form {
    grid-template-columns: repeat(24, minmax(0, 1fr));
    align-items: end;
  }

  .receivable-form > select,
  .receivable-form > input,
  .receivable-form > .inline-select-action,
  .receivable-form > .receivable-form-field {
    grid-column: span 3;
    min-width: 0;
  }

  .receivable-form > .receivable-form-field-client,
  .receivable-form > .receivable-form-field-project {
    grid-column: span 6;
  }

  .receivable-form > .receivable-form-field-milestone {
    grid-column: span 6;
  }

  .receivable-form > .receivable-form-field-entity {
    grid-column: span 6;
  }

  .receivable-form > .receivable-form-field-account {
    grid-column: span 6;
  }

  .receivable-form > .receivable-form-field-amount,
  .receivable-form > .receivable-form-field-received {
    grid-column: span 3;
  }

  .receivable-form > .receivable-form-field-due,
  .receivable-form > .receivable-form-field-followup,
  .receivable-form > .receivable-form-field-status,
  .receivable-form > .receivable-form-field-business {
    grid-column: span 3;
  }

  .receivable-form > .form-span-2,
  .receivable-form > .receivable-form-summary,
  .receivable-form > .receivable-form-notes,
  .receivable-form > .modal-actions,
  .receivable-form > .inline-master-tools {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1279px) {
  .receivable-form-field-entity .inline-select-action,
  .receivable-form-field-account .inline-select-action {
    align-items: stretch;
  }

  .receivable-form .inline-select-action {
    flex-wrap: wrap;
  }
}

.receivable-detail-row td {
  background: #f8fafc;
  padding: 14px;
}

.receivable-detail-panel {
  border: 1px solid #dbe4ec;
  border-radius: 12px;
  background: #fff;
  padding: 14px;
}

.receivable-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.receivable-detail-block {
  min-width: 0;
}

.receivable-detail-block-full {
  grid-column: 1 / -1;
}

.receivable-detail-title {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #0f766e;
}

.receivable-empty {
  padding: 12px;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
  color: #64748b;
}

.receivable-timeline {
  display: grid;
  gap: 10px;
}

.receivable-timeline-item {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fcfdff;
}

.receivable-timeline-time {
  color: #0f766e;
  font-weight: 700;
}

.receivable-timeline-title {
  margin-bottom: 4px;
  font-weight: 700;
  color: #0f172a;
}

.report-shell {
  min-height: 120px;
}

.report-subtitle {
  margin-bottom: 12px;
}

.report-columns {
  margin-top: 12px;
}

.report-section-title {
  margin: 14px 0 10px;
}

.report-presets {
  margin-top: 10px;
}

.report-timeline-shell {
  display: grid;
  gap: 10px;
}

.report-timeline-toolbar {
  align-items: center;
}

.report-timeline-toolbar select {
  min-width: 180px;
  max-width: 240px;
  flex: 0 0 220px;
}

.report-timeline-summary {
  flex: 1 1 220px;
}

.report-timeline {
  display: grid;
  gap: 10px;
}

.report-timeline-item {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border: 1px solid #dbe4ec;
  border-radius: 12px;
  background: #fcfdff;
}

.report-timeline-item.muted-row {
  background: #f8fafc;
}

.report-timeline-date {
  color: #0f766e;
  font-weight: 700;
}

.report-timeline-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-weight: 700;
}

.report-timeline-hint {
  margin-top: 6px;
  color: #64748b;
  line-height: 1.5;
}

.report-timeline-foot {
  padding: 0 2px;
}

.dashboard-action-card {
  width: 100%;
  border: 1px solid #dbe4ec;
  border-radius: 14px;
  background: #fcfffe;
  color: #0f172a;
}

.dashboard-action-card.normal:hover {
  background: #f3fbfa;
}

.dashboard-action-card.warn {
  background: #fff7ed;
  border-color: #fdba74;
}

.dashboard-action-card.warn:hover {
  background: #ffedd5;
}

.dashboard-action-card.danger {
  background: #fff7f7;
  border-color: #fca5a5;
}

.dashboard-action-card.danger:hover {
  background: #fee2e2;
  box-shadow: 0 12px 24px rgba(185, 28, 28, 0.10);
}

.edit-modal-card {
  width: min(92vw, 860px);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding-bottom: 18px;
}

#userEditModal .edit-modal-card {
  width: min(98vw, 1720px);
}

.edit-modal-card h3 {
  margin-top: 0;
}

.edit-modal-card .preview-modal-close {
  position: sticky;
  top: 0;
  z-index: 3;
}

.edit-modal-card textarea {
  min-height: 88px;
}

.project-edit-modal-card {
  width: min(98vw, 1320px);
  min-width: 980px;
  max-width: calc(100vw - 24px);
  overflow-x: auto;
  overflow-y: auto;
}

.project-edit-modal-card #projectEditForm {
  min-width: 1120px;
}

.client-delete-resolver-card {
  width: min(96vw, 1120px);
}

.purchase-review-modal-card {
  width: min(92vw, 720px);
}

.purchase-arrival-modal-card {
  width: min(92vw, 680px);
}

.purchase-arrival-modal-card textarea {
  min-height: 110px;
}

.purchase-arrival-summary {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #dbe4ee;
  border-radius: 12px;
  background: #f8fafc;
}

.material-create-form {
  margin-top: 12px;
}

.material-table-head {
  margin-top: 14px;
  margin-bottom: 6px;
}

.material-table-head h4 {
  margin: 0;
  font-size: 16px;
}

.material-filter-strip {
  margin-top: 0;
  padding-top: 10px;
  border-top: 1px solid #e5e7eb;
  row-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.material-filter-strip button {
  width: 100%;
  margin: 0;
}

.material-filter-strip #materialClearFilters {
  grid-column: -2 / -1;
  align-self: start;
}

.usage-record-filter-strip #usageRecordClearFilters {
  grid-column: auto;
}

.material-filter-summary {
  margin: 8px 0 12px;
}

.material-filter-summary .page-chip {
  background: #f8fafc;
}

.material-todo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.material-todo-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-height: 108px;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
}

.material-todo-card.has-work {
  border-color: #f4c98b;
  background: #fffaf0;
}

.material-todo-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #334155;
  font-weight: 700;
}

.material-todo-card-top strong {
  color: #0f766e;
  font-size: 22px;
  line-height: 1;
}

.material-todo-card.has-work .material-todo-card-top strong {
  color: #b45309;
}

.material-todo-card small {
  min-height: 32px;
  color: #64748b;
  line-height: 1.45;
}

.material-todo-card button {
  align-self: flex-start;
  margin-top: auto;
}

.material-flow-table-scroll {
  max-width: 100%;
}

.material-flow-table {
  min-width: 760px;
}

/* Material inventory: active tasks first, stock visible, auxiliary navigation compact. */
.material-todo-section .material-todo-grid { grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 8px; }
.material-todo-section .material-todo-card { min-height: 0; padding: 10px; gap: 5px; }
.material-todo-section .material-todo-card:not(.has-work) { display: none; }
.material-todo-section .material-todo-card small { min-height: 0; }
.material-todo-section .section-head-note { max-width: 560px; }
.material-navigation > summary, .material-aux-toolbar summary { cursor: pointer; font-weight: 600; color: #334155; }
.material-navigation > h3, .material-navigation > .section-head-note { display: none; }
.material-navigation[open] .page-chip-row { margin-top: 10px; }
.material-aux-toolbar { padding: 12px; }
.material-aux-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 10px; }
.material-aux-actions > span { display: none; }
.material-aux-actions > button { width: auto; flex: 0 0 auto; }
.material-submit-notice { width: 100%; background: #fff8e7; color: #854d0e; padding: 12px; border-radius: 8px; }
.material-submit-notice button { display: block; margin-top: 8px; }
#material-stock-table-section .material-action-group { display: flex; flex-wrap: wrap; gap: 5px; }
#material-usage-table-section, #material-return-table-section { overflow-x: auto; }
@media (min-width: 769px) and (max-width: 1200px) {
  #material-stock-table-section .material-filter-strip { grid-template-columns: repeat(2, minmax(0,1fr)); }
  #material-stock-table-section .material-filter-strip > * { min-width: 0; width: 100%; }
  body.pc-ui-preview #content #material-stock-table-section .material-inventory-table { min-width: 0; width: 100%; }
  body.pc-ui-preview #content #material-stock-table-section .material-inventory-table th:nth-child(1) { width: 22%; }
  body.pc-ui-preview #content #material-stock-table-section .material-inventory-table th:nth-child(2) { width: 14%; }
  body.pc-ui-preview #content #material-stock-table-section .material-inventory-table th:nth-child(3) { width: 13%; }
  body.pc-ui-preview #content #material-stock-table-section .material-inventory-table th:nth-child(4) { width: 10%; }
  body.pc-ui-preview #content #material-stock-table-section .material-inventory-table th:nth-child(5) { width: 17%; }
  body.pc-ui-preview #content #material-stock-table-section .material-inventory-table th:nth-child(6) { width: 24%; }
}

.attendance-sync-strip {
  margin-top: 10px;
}

.attendance-sync-note {
  margin-top: 8px;
}

.attendance-summary-line {
  margin-top: 8px;
  line-height: 1.5;
}

.attendance-filter-strip {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid #e5e7eb;
  row-gap: 10px;
  grid-template-columns: minmax(160px, 1fr) auto minmax(160px, 1fr) repeat(6, minmax(150px, 1fr));
  align-items: center;
}

.attendance-filter-strip button {
  width: 100%;
  margin: 0;
}

.attendance-filter-strip #attendanceExportFiltered,
.attendance-filter-strip #attendanceExportAll,
.attendance-filter-strip #attendanceClearFilters {
  white-space: nowrap;
}

.attendance-filter-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-weight: 700;
}

.attendance-filter-note {
  margin-top: 8px;
}

.attendance-empty-row td {
  padding: 20px 12px;
  text-align: center;
  color: #64748b;
  background: #f8fafc;
}

@media (max-width: 960px) {
  .attendance-range-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .attendance-filter-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .attendance-filter-divider {
    display: none;
  }
}

@media (max-width: 640px) {
  .attendance-settings-title-row,
  .attendance-range-actions,
  .attendance-settings-actions,
  .attendance-settings-switches {
    flex-direction: column;
    align-items: stretch;
  }

  .attendance-range-main {
    grid-template-columns: 1fr;
  }

  .attendance-filter-strip {
    grid-template-columns: 1fr;
  }

  .attendance-settings-actions button,
  .attendance-range-actions button {
    width: 100%;
  }
}

.material-jump-nav {
  margin-top: 0;
  align-items: center;
  gap: 6px;
}

.material-jump-chip {
  width: auto;
  flex: 0 0 auto;
  cursor: pointer;
  background: #f8fafc;
  white-space: nowrap;
  padding: 3px 10px;
  font-size: 12px;
  line-height: 1.1;
}

.material-jump-chip:hover {
  background: #ecfeff;
}

.material-section-focus {
  border-color: #2aa198;
  box-shadow: 0 0 0 2px rgba(42, 161, 152, 0.14);
  background: linear-gradient(180deg, rgba(236, 254, 255, 0.65) 0%, rgba(255, 255, 255, 0.96) 100%);
  transition: box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.material-inventory-table .material-action-col,
.material-inventory-table .material-action-cell {
  width: 1%;
  white-space: nowrap;
}

.material-action-group {
  flex-wrap: nowrap;
}

.material-return-form-grid {
  align-items: start;
}

.material-usage-form-grid {
  align-items: start;
}

.material-return-summary {
  margin: 0;
  padding-top: 6px;
}

@media (min-width: 1280px) {
  .material-usage-form-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .material-usage-form-grid > select,
  .material-usage-form-grid > input,
  .material-usage-form-grid > .search-select,
  .material-usage-form-grid > .form-static-field,
  .material-usage-form-grid > button,
  .material-usage-form-grid > div {
    grid-column: span 1;
    min-width: 0;
  }

  .material-return-form-grid {
    grid-template-columns: repeat(14, minmax(0, 1fr));
  }

  .material-return-form-grid > .return-usage-search-select {
    grid-column: span 3;
  }

  .material-return-form-grid > .material-return-summary {
    grid-column: span 11;
  }

  .material-return-form-grid > input,
  .material-return-form-grid > select,
  .material-return-form-grid > .search-select,
  .material-return-form-grid > .form-static-field,
  .material-return-form-grid > button {
    grid-column: span 2;
    min-width: 0;
  }

  .usage-record-filter-strip {
    grid-template-columns: minmax(280px, 1.3fr) repeat(3, minmax(180px, 1fr)) auto;
    align-items: start;
  }

  .usage-record-filter-strip > * {
    min-width: 0;
  }

  .usage-record-filter-strip button {
    width: auto;
    min-width: 120px;
  }
}

@media (min-width: 1400px) {
  .material-filter-strip {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .material-filter-strip > :nth-child(-n+3) {
    grid-column: span 2;
    min-width: 0;
  }

  .material-filter-strip > :nth-child(3) {
    width: calc(100% + 8px);
  }

  .material-filter-strip #materialClearFilters {
    grid-column: 7;
  }

  .usage-record-filter-strip {
    grid-template-columns: minmax(320px, 1.45fr) repeat(3, minmax(190px, 1fr)) auto;
  }

  .usage-record-filter-strip > :nth-child(-n+4) {
    grid-column: auto;
    width: 100%;
  }

  .usage-record-filter-strip #usageRecordClearFilters {
    grid-column: auto;
    width: auto;
    justify-self: stretch;
  }
}

@media (min-width: 1780px) {
  .material-filter-strip {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .material-filter-strip > :nth-child(1),
  .material-filter-strip > :nth-child(2) {
    grid-column: span 2;
  }

  .material-filter-strip > :nth-child(3) {
    grid-column: span 3;
    width: 100%;
  }

  .material-filter-strip #materialClearFilters {
    grid-column: 8;
  }

  .usage-record-filter-strip {
    grid-template-columns: minmax(360px, 1.6fr) repeat(3, minmax(210px, 1fr)) auto;
  }

  .usage-record-filter-strip > :nth-child(-n+4) {
    grid-column: auto;
  }

  .usage-record-filter-strip #usageRecordClearFilters {
    grid-column: auto;
  }
}

.common-review-modal-card {
  width: min(92vw, 640px);
}

.common-review-modal-card textarea {
  min-height: 120px;
}

.purchase-stock-mode-option.active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

.client-delete-resolver-list {
  margin-top: 12px;
}

.client-delete-resolver-actions {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}

.quote-export-modal-card {
  width: min(98vw, 1560px);
  max-width: calc(100vw - 24px);
}

.quote-export-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
}

.quote-export-form {
  align-content: start;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
}

.quote-export-preview-shell {
  border: 1px solid #dbe4ec;
  border-radius: 14px;
  background: #f8fafc;
  overflow: auto;
  height: 78vh;
  padding: 12px;
}

.quote-export-preview-head {
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 700;
  border-bottom: 1px solid #dbe4ec;
  background: #ffffff;
}

.quote-export-preview-frame {
  width: 1280px;
  max-width: none;
  height: 100%;
  border: none;
  background: #fff;
}

.quote-convert-modal-card {
  width: min(92vw, 680px);
}

.quote-convert-summary {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}

.quote-convert-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.quote-convert-option {
  display: grid;
  gap: 8px;
  min-height: 112px;
  margin: 0;
  padding: 16px;
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  text-align: left;
  color: #0f172a;
}

.quote-convert-option span {
  font-size: 16px;
  font-weight: 800;
}

.quote-convert-option small {
  color: #475569;
  line-height: 1.6;
}

.quote-convert-contract {
  background: #ecfdf5;
  border-color: #99f6e4;
}

.quote-convert-project {
  background: #eff6ff;
  border-color: #bfdbfe;
}

.quote-convert-option:hover {
  border-color: #0f766e;
  box-shadow: 0 10px 24px rgba(15, 118, 110, 0.12);
}

.modal-resize-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 14px;
  z-index: 2;
}

.modal-resize-handle-left {
  left: -7px;
  cursor: ew-resize;
}

.modal-resize-handle-right {
  right: -7px;
  cursor: ew-resize;
}

body.modal-resizing {
  user-select: none;
  cursor: ew-resize;
}

select[multiple] {
  min-height: 120px;
  max-height: 220px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  align-items: center;
}

.modal-actions button {
  width: auto;
  margin: 0;
}

@media (max-width: 768px) {
  .preview-modal {
    padding: 12px 8px;
  }

  .edit-modal-card {
    max-height: calc(100vh - 24px);
  }

  .project-edit-modal-card {
    min-width: 0;
    width: min(96vw, 1320px);
  }

  .project-edit-modal-card #projectEditForm {
    min-width: 0;
  }

  .modal-resize-handle {
    display: none;
  }

  .main-view {
    grid-template-columns: 1fr;
  }

  .user-permission-groups,
  .user-permission-grid {
    grid-template-columns: 1fr;
  }

  .user-permission-group {
    grid-template-columns: 1fr;
  }

  .user-permission-group h4 {
    margin-top: 0;
  }

  .actions {
    width: 100%;
  }

  .actions button {
    flex: 1;
  }

  .tabs {
    margin-top: 0;
    overflow-x: auto;
    white-space: nowrap;
    flex-direction: row;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }

  .tabs button {
    width: auto;
    text-align: center;
  }

  .workspace-columns {
    grid-template-columns: 1fr;
  }

  .task-detail-toolbar {
    align-items: stretch;
  }

  .task-detail-toolbar button {
    width: 100%;
  }

  .task-history-head {
    flex-direction: column;
  }

  .task-card-toggle {
    flex-direction: column;
  }

  .quote-editor-head {
    flex-direction: column;
    align-items: stretch;
  }

  .quote-editor-head button {
    width: 100%;
  }

  .quote-summary-layout {
    grid-template-columns: 1fr;
  }

  .quote-summary-total {
    flex-direction: column;
    align-items: flex-start;
  }

  .receivable-timeline-item {
    grid-template-columns: 1fr;
  }

  .modal-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .modal-actions button {
    width: 100%;
  }

  .venue-template-table th:nth-child(3),
  .venue-template-table td:nth-child(3) {
    display: none;
  }

  .venue-template-edit {
    min-width: 68px;
    white-space: nowrap;
  }
}

.desktop-page-heading,
.desktop-sidebar-brand,
.pc-ui-mode-toggle,
.client-create-toggle,
.client-create-panel-head {
  display: none;
}

.client-form-error,
.client-load-error {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid #f0b7b7;
  border-radius: 6px;
  background: #fff5f5;
  color: #a33a3a;
  font-size: 13px;
  line-height: 1.5;
}

.client-load-error h3 {
  margin: 0 0 6px;
  color: #7f1d1d;
  font-size: 16px;
}

.client-load-error p {
  margin: 0 0 12px;
}

.client-load-error button {
  width: auto;
  margin: 0;
}

.client-create-panel .client-form-error.hidden {
  display: none;
}

.dashboard-business-flow,
.pc-business-link-toolbar,
.business-link-actions,
.business-link-title,
.business-link-button,
.dashboard-detail-link {
  display: none;
}

.client-detail-business-toolbar {
  display: contents;
}

@media (min-width: 769px) {
  .pc-ui-mode-toggle {
    display: inline-flex;
  }

  body.pc-ui-preview {
    --brand: #175fc6;
    --brand-dark: #124b9c;
    background: #f4f6f8;
    color: #1f2933;
  }

  body.pc-ui-preview .main-view {
    min-height: 100vh;
    padding: 0;
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    grid-template-rows: 64px minmax(calc(100vh - 64px), auto);
    gap: 0;
    align-content: stretch;
    background: #f4f6f8;
  }

  body.pc-ui-preview .topbar {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: 0;
    z-index: 80;
    min-width: 0;
    min-height: 64px;
    padding: 0 24px;
    border: 0;
    border-bottom: 1px solid #dfe3e8;
    border-radius: 0;
    background: #ffffff;
    flex-wrap: nowrap;
  }

  body.pc-ui-preview .topbar-main {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 20px;
  }

  body.pc-ui-preview .topbar-product {
    display: none;
  }

  body.pc-ui-preview .desktop-page-heading {
    min-width: 150px;
    display: grid;
    gap: 2px;
  }

  body.pc-ui-preview .desktop-page-heading > span {
    color: #7a8490;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
  }

  body.pc-ui-preview .desktop-page-heading h2 {
    margin: 0;
    color: #20262d;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
  }

  body.pc-ui-preview .topbar .meta {
    margin: 0 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
  }

  body.pc-ui-preview #userMeta {
    color: #4b5563;
    font-size: 13px;
    white-space: nowrap;
  }

  body.pc-ui-preview .topbar .badge {
    min-height: 24px;
    padding: 3px 7px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
  }

  body.pc-ui-preview .topbar .actions {
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
  }

  body.pc-ui-preview .topbar .actions button {
    width: auto;
    min-height: 34px;
    margin: 0;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
  }

  body.pc-ui-preview .topbar .actions .secondary {
    border: 1px solid #cfd5dc;
    background: #ffffff;
    color: #374151;
  }

  body.pc-ui-preview .topbar .actions .secondary:hover {
    border-color: #9aa4af;
    background: #f5f6f7;
  }

  body.pc-ui-preview .topbar .actions .danger {
    background: #b42318;
  }

  body.pc-ui-preview .tabs {
    grid-column: 1;
    grid-row: 1 / 3;
    position: sticky;
    top: 0;
    z-index: 90;
    width: 220px;
    height: 100vh;
    padding: 0 10px 10px;
    gap: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    align-self: stretch;
    border: 0;
    border-radius: 0;
    background: #1c2d47;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.04);
    scrollbar-width: thin;
    scrollbar-color: #73829a transparent;
  }

  body.pc-ui-preview .desktop-sidebar-brand {
    min-height: 64px;
    margin: 0 -10px 7px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  }

  body.pc-ui-preview .desktop-sidebar-mark {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #b72f3a;
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
  }

  body.pc-ui-preview .desktop-sidebar-brand-copy {
    min-width: 0;
    display: grid;
    gap: 1px;
    color: #ffffff;
    line-height: 1.25;
  }

  body.pc-ui-preview .desktop-sidebar-brand-copy strong {
    font-size: 14px;
  }

  body.pc-ui-preview .desktop-sidebar-brand-copy small {
    color: #c2cee0;
    font-size: 11px;
  }

  body.pc-ui-preview .desktop-nav-groups {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #73829a transparent;
  }

  body.pc-ui-preview .desktop-sidebar-footer {
    flex: 0 0 auto;
    padding-top: 7px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  body.pc-ui-preview .tab-group {
    gap: 2px;
  }

  body.pc-ui-preview .desktop-nav-groups .tab-group + .tab-group {
    margin-top: 2px;
    padding-top: 2px;
    border-top: 0;
  }

  body.pc-ui-preview .tab-group-title {
    padding: 5px 9px 4px;
    color: #8f9aa6;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
  }

  body.pc-ui-preview .desktop-nav-items {
    display: grid;
    gap: 2px;
    padding: 1px 2px 4px 7px;
  }

  body.pc-ui-preview .desktop-nav-items[hidden] {
    display: none;
  }

  body.pc-ui-preview .tabs .desktop-nav-group-toggle {
    min-height: 35px;
    padding: 7px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    border: 0;
    color: #aebdd1;
    font-size: 12px;
    font-weight: 600;
  }

  body.pc-ui-preview .tabs .tab-group.has-active .desktop-nav-group-toggle {
    color: #ffffff;
  }

  body.pc-ui-preview .desktop-nav-group-end {
    display: inline-flex;
    align-items: center;
    gap: 7px;
  }

  body.pc-ui-preview .desktop-nav-group-alert {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #b72f3a;
    color: #ffffff;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
  }

  body.pc-ui-preview .desktop-nav-chevron {
    display: inline-block;
    font-size: 16px;
    line-height: 1;
    transition: transform 0.15s ease;
  }

  body.pc-ui-preview .desktop-nav-group-toggle[aria-expanded="true"] .desktop-nav-chevron {
    transform: rotate(180deg);
  }

  body.pc-ui-preview .tabs button {
    min-height: 36px;
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #d6dbe1;
    font-size: 13px;
    font-weight: 600;
  }

  body.pc-ui-preview .tabs button:hover {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
  }

  body.pc-ui-preview .tabs button.active {
    border-color: rgba(117, 173, 255, 0.35);
    background: #175fc6;
    color: #ffffff;
    box-shadow: none;
  }

  body.pc-ui-preview .tabs .tab-alert-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 4px;
    line-height: 18px;
    box-shadow: none;
  }

  body.pc-ui-preview .tabs button.active .tab-alert-badge {
    box-shadow: none;
  }

  body.pc-ui-preview .main-view > main {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: 20px 24px 32px;
  }

  body.pc-ui-preview .purchase-a-shell,
  body.pc-ui-preview .purchase-a-shell > section,
  body.pc-ui-preview #purchaseTableAnchor {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }

  body.pc-ui-preview #purchaseTableAnchor {
    overflow: hidden;
  }

  body.pc-ui-preview #purchaseTableAnchor .purchase-table-scroll {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
  }

  body.pc-ui-preview .panel {
    margin-bottom: 14px;
    padding: 18px;
    border-color: #dfe3e8;
    border-radius: 6px;
    box-shadow: none;
  }

  body.pc-ui-preview .panel h3 {
    color: #20262d;
    font-size: 16px;
    letter-spacing: 0;
  }

  body.pc-ui-preview .page-shell {
    gap: 14px;
  }

  body.pc-ui-preview .page-hero {
    padding: 16px 18px;
    border-color: #dfe3e8;
    border-radius: 6px;
    background: #ffffff;
  }

  body.pc-ui-preview .page-hero-title {
    color: #20262d;
    font-size: 19px;
    letter-spacing: 0;
  }

  body.pc-ui-preview .page-hero-subtitle {
    margin-top: 4px;
    color: #5e6874;
  }

  body.pc-ui-preview .page-chip {
    padding: 5px 8px;
    border-color: #d3d9df;
    border-radius: 4px;
    background: #f7f8f9;
    color: #4b5563;
  }

  body.pc-ui-preview .section-head {
    padding-bottom: 10px;
    border-bottom: 1px solid #e7eaee;
  }

  body.pc-ui-preview .section-head h3 {
    margin: 0;
  }

  body.pc-ui-preview .dashboard-page-shell .task-board-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  body.pc-ui-preview .dashboard-business-flow {
    display: block;
  }

  body.pc-ui-preview .dashboard-flow-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }

  body.pc-ui-preview .dashboard-flow-step {
    min-width: 0;
    min-height: 78px;
    margin: 0;
    padding: 12px 13px;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border: 1px solid #dce2e7;
    border-radius: 6px;
    background: #fff;
    color: #27313b;
    text-align: left;
    box-shadow: none;
  }

  body.pc-ui-preview .dashboard-flow-step:hover {
    border-color: #8fb5b0;
    background: #f7fbfa;
  }

  body.pc-ui-preview .dashboard-flow-index {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: #e8f3f1;
    color: #0f766e;
    font-size: 12px;
    font-weight: 800;
  }

  body.pc-ui-preview .dashboard-flow-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  body.pc-ui-preview .dashboard-flow-copy strong {
    color: #20262d;
    font-size: 14px;
  }

  body.pc-ui-preview .dashboard-flow-copy small {
    color: #697480;
    font-size: 12px;
  }

  body.pc-ui-preview .dashboard-flow-value {
    color: #20262d;
    font-size: 16px;
    font-weight: 800;
    white-space: nowrap;
  }

  body.pc-ui-preview .dashboard-page-shell .dashboard-action-card {
    min-height: 86px;
    padding: 13px 14px;
    border-color: #dce2e7;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: none;
  }

  body.pc-ui-preview .dashboard-page-shell .dashboard-action-card:hover {
    border-color: #9bb8b4;
    background: #f8fbfa;
    box-shadow: 0 4px 12px rgba(31, 41, 51, 0.06);
  }

  body.pc-ui-preview .dashboard-page-shell .dashboard-action-card.warn {
    border-color: #e8c37b;
    border-left: 3px solid #d69e2e;
    background: #fffdf7;
  }

  body.pc-ui-preview .dashboard-page-shell .dashboard-action-card.danger {
    border-color: #e2aaa6;
    border-left: 3px solid #b42318;
    background: #fffafa;
  }

  body.pc-ui-preview .dashboard-page-shell .task-card-title {
    color: #2b333c;
    font-size: 14px;
  }

  body.pc-ui-preview .dashboard-page-shell .task-card-sub {
    margin-top: 5px;
    color: #4f5965;
    font-size: 16px;
    font-weight: 700;
  }

  body.pc-ui-preview .dashboard-page-shell .task-card-arrow {
    color: #0f766e;
    font-size: 12px;
    font-weight: 700;
  }

  body.pc-ui-preview .dashboard-page-shell .workspace-columns.report-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 6px;
  }

  body.pc-ui-preview .dashboard-page-shell .workspace-block {
    padding: 13px 0 0;
    border: 0;
    border-top: 1px solid #e3e7eb;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body.pc-ui-preview .dashboard-page-shell .workspace-block h4 {
    font-size: 14px;
  }

  body.pc-ui-preview .dashboard-page-shell .client-detail-item,
  body.pc-ui-preview .dashboard-page-shell .client-detail-empty {
    padding: 8px 10px;
    border-radius: 4px;
    background: #fafbfc;
  }

  body.pc-ui-preview .dashboard-page-shell .dashboard-detail-static {
    display: none;
  }

  body.pc-ui-preview .dashboard-page-shell .dashboard-detail-link {
    width: 100%;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid transparent;
    color: #374151;
    font: inherit;
    text-align: left;
  }

  body.pc-ui-preview .dashboard-page-shell .dashboard-detail-link:hover {
    border-color: #c8d9d6;
    background: #f4f9f8;
  }

  body.pc-ui-preview .dashboard-detail-link-action {
    color: #0f766e;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
  }

  body.pc-ui-preview .business-link-toolbar {
    margin-bottom: 12px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid #dfe5e8;
    border-radius: 6px;
    background: #f7f9fa;
  }

  body.pc-ui-preview .business-link-toolbar .client-detail-title {
    margin: 0;
  }

  body.pc-ui-preview .business-link-title {
    display: block;
    color: #4b5563;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
  }

  body.pc-ui-preview .business-link-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 7px;
  }

  body.pc-ui-preview .business-link-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    margin: 0;
    padding: 5px 10px;
    border-color: #bdcbc9;
    border-radius: 5px;
    background: #fff;
    color: #0f655f;
    white-space: nowrap;
  }

  body.pc-ui-preview .business-link-button:hover {
    border-color: #0f766e;
    background: #eef7f5;
  }

  body.pc-ui-preview .client-page-head {
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e7eaee;
  }

  body.pc-ui-preview .client-page-head h3 {
    margin: 0;
  }

  body.pc-ui-preview .client-create-toggle {
    width: auto;
    min-height: 34px;
    margin: 0;
    padding: 6px 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #0f766e;
    border-radius: 6px;
    background: #0f766e;
    color: #ffffff;
    font-size: 13px;
  }

  body.pc-ui-preview .client-create-toggle:hover {
    border-color: #115e59;
    background: #115e59;
  }

  body.pc-ui-preview .client-page-panel > .cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
  }

  body.pc-ui-preview .client-page-panel > .cards .stat {
    min-height: 72px;
    padding: 11px 12px;
    border-radius: 6px;
    background: #fafbfc;
    box-shadow: none;
  }

  body.pc-ui-preview .client-page-panel > .cards .stat .num {
    margin-top: 4px;
    font-size: 19px;
  }

  body.pc-ui-preview .client-page-panel > .cards .stat-action {
    transition: border-color .15s ease, background .15s ease;
  }

  body.pc-ui-preview .client-page-panel > .cards .stat-action:hover,
  body.pc-ui-preview .client-page-panel > .cards .stat-action:focus-visible {
    border-color: #9fcfc7;
    background: #f2fbf8;
    outline: none;
  }

  body.pc-ui-preview .client-create-panel:not(.is-open) {
    display: none;
  }

  body.pc-ui-preview .client-create-panel.is-open {
    margin: 0 0 14px;
    padding: 14px;
    border: 1px solid #dce2e7;
    border-radius: 6px;
    background: #f8f9fa;
  }

  body.pc-ui-preview .client-create-panel-head {
    margin-bottom: 10px;
    display: block;
    color: #303841;
    font-size: 13px;
    font-weight: 700;
  }

  body.pc-ui-preview .client-create-form {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 0;
  }

  body.pc-ui-preview .client-create-form > input[name="address"],
  body.pc-ui-preview .client-create-form > textarea,
  body.pc-ui-preview .client-create-form > input[name="notes"] {
    grid-column: span 2;
  }

  body.pc-ui-preview .client-create-form > button[type="submit"] {
    width: auto;
    min-width: 112px;
    justify-self: end;
    grid-column: 4;
    border-radius: 6px;
  }

  body.pc-ui-preview .client-filter-grid {
    grid-template-columns: minmax(240px, 1.35fr) repeat(3, minmax(150px, 0.8fr));
    gap: 10px;
    margin: 0 0 12px;
    padding: 12px;
    border: 1px solid #e1e5e9;
    border-radius: 6px;
    background: #f8f9fa;
  }

  body.pc-ui-preview .client-filter-grid input,
  body.pc-ui-preview .client-filter-grid select,
  body.pc-ui-preview .client-create-form input,
  body.pc-ui-preview .client-create-form select,
  body.pc-ui-preview .client-create-form textarea {
    border-radius: 5px;
    background: #ffffff;
  }

  body.pc-ui-preview #clientViewHost .table-scroll {
    overflow-x: auto;
    border: 1px solid #dfe3e8;
    border-radius: 6px;
  }

  body.pc-ui-preview .client-list-table {
    margin-top: 0;
    border-collapse: separate;
    border-spacing: 0;
  }

  body.pc-ui-preview .client-list-table th,
  body.pc-ui-preview .client-list-table td {
    border-width: 0 0 1px;
    border-color: #e7eaee;
  }

  body.pc-ui-preview .client-list-table th {
    padding-top: 10px;
    padding-bottom: 10px;
    background: #f5f6f7;
    color: #59636f;
  }

  body.pc-ui-preview .client-list-table tbody tr:last-child > td {
    border-bottom: 0;
  }

  body.pc-ui-preview .client-list-table .tiny,
  body.pc-ui-preview .client-expand-button {
    border-radius: 5px;
  }

  body.pc-ui-preview .client-detail-panel,
  body.pc-ui-preview .client-detail-block,
  body.pc-ui-preview .client-detail-item,
  body.pc-ui-preview .client-detail-note,
  body.pc-ui-preview .client-detail-empty {
    border-radius: 6px;
  }
}

@media (min-width: 769px) {
  body.pc-ui-preview #quoteForm.quote-form-layout-preview {
    row-gap: 14px;
  }

  body.pc-ui-preview .quote-form-step-nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1px;
    padding: 1px;
    border: 1px solid #d8e0e5;
    background: #d8e0e5;
    position: sticky;
    top: 72px;
    z-index: 5;
  }

  body.pc-ui-preview #quoteForm .quote-step-hidden { display: none !important; }
  body.pc-ui-preview .quote-form-step-nav a.is-active { background: #e7f7ef; color: #075e44; }
  body.pc-ui-preview .quote-step-mode-toggle { justify-self: end; width: auto; margin: -8px 0 0; }

  body.pc-ui-preview .quote-form-step-nav.is-standard {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body.pc-ui-preview .quote-form-step-nav a {
    min-width: 0;
    min-height: 44px;
    padding: 7px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    color: #52606d;
    text-decoration: none;
  }

  body.pc-ui-preview .quote-form-step-nav a:hover,
  body.pc-ui-preview .quote-form-step-nav a:focus-visible {
    background: #f1f8f6;
    color: #0f766e;
    outline: none;
  }

  body.pc-ui-preview .quote-form-step-nav a > span {
    flex: 0 0 auto;
    color: #0f766e;
    font-size: 11px;
    font-weight: 800;
  }

  body.pc-ui-preview .quote-form-step-nav a > strong {
    min-width: 0;
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.pc-ui-preview .quote-basic-info-section {
    scroll-margin-top: 84px;
  }

  body.pc-ui-preview .quote-basic-info-fields {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
    border: 1px solid #dbe3e8;
    border-top: 0;
    background: #ffffff;
  }

  body.pc-ui-preview .quote-basic-info-fields > div {
    display: grid;
    gap: 5px;
    min-width: 0;
  }

  body.pc-ui-preview .quote-basic-info-fields > div > label {
    position: static;
    max-width: none;
    min-height: 0;
    margin: 0;
    overflow: visible;
    color: #59636f;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    text-overflow: clip;
    white-space: normal;
    pointer-events: auto;
  }

  body.pc-ui-preview .quote-basic-info-fields > div > input,
  body.pc-ui-preview .quote-basic-info-fields > div > select {
    width: 100%;
    min-width: 0;
    min-height: 36px;
    height: 36px;
    margin: 0;
    padding: 7px 9px;
    border-radius: 5px;
    background: #fbfcfd;
  }

  body.pc-ui-preview .quote-basic-info-fields > div:has(> input[name="title"]),
  body.pc-ui-preview .quote-basic-info-fields > div:has(> #quoteSourceQuoteId) {
    grid-column: span 2;
  }

  body.pc-ui-preview .quote-form-step-anchor {
    display: block;
    height: 0;
    scroll-margin-top: 84px;
  }

  body.pc-ui-preview #quoteServicePlanSection,
  body.pc-ui-preview #quoteEditorSection,
  body.pc-ui-preview #quoteResultSection,
  body.pc-ui-preview .quote-maintenance-cost-estimate,
  body.pc-ui-preview .quote-cost-summary-field {
    scroll-margin-top: 84px;
  }

  body.pc-ui-preview #quoteServicePlanSection {
    box-shadow: 0 1px 2px rgba(31, 41, 51, 0.03);
  }

  body.pc-ui-preview .quote-form-layout-preview > .quote-maintenance-cost-estimate,
  body.pc-ui-preview .quote-form-layout-preview > .quote-cost-summary-field {
    border-color: #d5dee5;
    border-top-color: #64748b;
    box-shadow: 0 1px 2px rgba(31, 41, 51, 0.03);
  }

  body.pc-ui-preview .quote-form-layout-preview > .quote-editor-block {
    scroll-margin-top: 84px;
    box-shadow: 0 1px 2px rgba(31, 41, 51, 0.03);
  }

  body.pc-ui-preview #quoteResultSection {
    margin-top: 0;
    padding-top: 0;
  }

  body.pc-ui-preview .quote-form-save-actions {
    justify-content: flex-end;
    gap: 8px;
    margin-top: 0;
    padding: 14px 0 0;
    border-top: 1px solid #dbe3e8;
    position: sticky;
    bottom: 8px;
    z-index: 6;
    background: #fff;
    padding-bottom: 8px;
  }

  body.pc-ui-preview .quote-form-save-actions button {
    min-width: 132px;
    margin: 0;
    border-radius: 5px;
  }
}

@media (min-width: 769px) and (max-width: 1279px) {
  body.pc-ui-preview .quote-form-step-nav {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  body.pc-ui-preview .quote-form-step-nav.is-standard {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body.pc-ui-preview .quote-form-step-nav a:first-child {
    grid-column: span 1;
  }

  body.pc-ui-preview .quote-basic-info-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .quote-form-step-nav {
    display: none;
  }
}

@media (max-width: 1100px) and (min-width: 769px) {
  body.pc-ui-preview .quote-form-step-nav a > strong {
    font-size: 11px;
  }
}

@media (min-width: 769px) and (max-width: 1199px) {
  body.pc-ui-preview .topbar {
    padding-right: 16px;
    padding-left: 16px;
  }

  body.pc-ui-preview .topbar .meta {
    gap: 5px;
  }

  body.pc-ui-preview .main-view > main {
    padding-right: 18px;
    padding-left: 18px;
  }

  body.pc-ui-preview .dashboard-page-shell .task-board-list,
  body.pc-ui-preview .dashboard-page-shell .workspace-columns.report-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.pc-ui-preview .dashboard-flow-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.pc-ui-preview .client-create-form,
  body.pc-ui-preview .client-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.pc-ui-preview .client-create-form > button[type="submit"] {
    grid-column: 2;
  }
}

.quote-page-head-panel {
  display: none;
}

@media (min-width: 769px) {
  body.pc-ui-preview .quote-page-stack {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  body.pc-ui-preview .quote-page-head-panel {
    display: block;
    order: 0;
    margin-bottom: 14px;
  }

  body.pc-ui-preview .quote-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-width: 0;
    padding: 0 2px;
  }

  body.pc-ui-preview .quote-page-title {
    color: #20262d;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
  }

  body.pc-ui-preview .quote-page-subtitle {
    margin-top: 4px;
    color: #68737f;
    font-size: 13px;
    line-height: 1.45;
  }

  body.pc-ui-preview .quote-page-actions {
    flex: 0 0 auto;
  }

  body.pc-ui-preview .quote-create-toggle {
    width: auto;
    min-height: 36px;
    margin: 0;
    padding: 7px 15px;
    border: 1px solid #0f766e;
    border-radius: 6px;
    background: #0f766e;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
  }

  body.pc-ui-preview .quote-create-toggle:hover {
    border-color: #115e59;
    background: #115e59;
  }

  body.pc-ui-preview .quote-list-panel {
    order: 1;
  }

  body.pc-ui-preview .quote-create-panel {
    order: 2;
  }

  body.pc-ui-preview .quote-base-panel {
    order: 3;
  }

  body.pc-ui-preview .quote-create-panel:not(.is-open) {
    display: none;
  }

  body.pc-ui-preview .quote-list-panel .quote-list-toggle {
    display: none;
  }

  body.pc-ui-preview .quote-list-count {
    color: #68737f;
    font-size: 12px;
    white-space: nowrap;
  }

  body.pc-ui-preview .quote-list-panel .toolbar-strip {
    display: grid;
    grid-template-columns: minmax(260px, 1.45fr) repeat(2, minmax(170px, 0.7fr));
    gap: 8px;
    align-items: center;
    padding: 10px;
    border-radius: 6px;
  }

  body.pc-ui-preview .quote-list-panel .toolbar-strip input,
  body.pc-ui-preview .quote-list-panel .toolbar-strip select {
    min-width: 0;
    width: 100%;
  }

  body.pc-ui-preview .quote-list-panel .table-scroll {
    border-radius: 6px;
  }

  body.pc-ui-preview .quote-list-table {
    min-width: 940px;
  }

  body.pc-ui-preview .quote-list-table > thead > tr > th:nth-child(1),
  body.pc-ui-preview .quote-list-table > tbody > tr[data-row-id] > td:nth-child(1) {
    width: 6%;
  }

  body.pc-ui-preview .quote-list-table > thead > tr > th:nth-child(2),
  body.pc-ui-preview .quote-list-table > tbody > tr[data-row-id] > td:nth-child(2) {
    width: 22%;
  }

  body.pc-ui-preview .quote-list-table > thead > tr > th:nth-child(3),
  body.pc-ui-preview .quote-list-table > tbody > tr[data-row-id] > td:nth-child(3) {
    width: 18%;
  }

  body.pc-ui-preview .quote-list-table > thead > tr > th:nth-child(4),
  body.pc-ui-preview .quote-list-table > tbody > tr[data-row-id] > td:nth-child(4) {
    width: 13%;
  }

  body.pc-ui-preview .quote-list-table > thead > tr > th:nth-child(5),
  body.pc-ui-preview .quote-list-table > tbody > tr[data-row-id] > td:nth-child(5) {
    width: 8%;
  }

  body.pc-ui-preview .quote-list-table > thead > tr > th:nth-child(6),
  body.pc-ui-preview .quote-list-table > tbody > tr[data-row-id] > td:nth-child(6) {
    width: 13%;
  }

  body.pc-ui-preview .quote-list-table > thead > tr > th:nth-child(7),
  body.pc-ui-preview .quote-list-table > tbody > tr[data-row-id] > td:nth-child(7) {
    width: 20%;
  }

  body.pc-ui-preview .quote-list-table > thead > tr > th {
    padding-top: 10px;
    padding-bottom: 10px;
    background: #f5f6f7;
    color: #59636f;
  }

  body.pc-ui-preview .quote-list-table > tbody > tr[data-row-id] > td {
    border-color: #e7eaee;
  }

  body.pc-ui-preview .quote-list-table > tbody > tr[data-row-id]:hover > td {
    background: #fbfdfd;
  }

  body.pc-ui-preview .quote-list-table > tbody > tr[data-row-id] .table-action-group {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }

  body.pc-ui-preview .quote-list-table .quote-status-control {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  body.pc-ui-preview .quote-list-table .quote-status-action-select {
    width: 100%;
    min-width: 0;
  }

  body.pc-ui-preview .quote-list-table > tbody > tr[data-row-id] .table-action-group .tiny {
    border-radius: 5px;
  }

  body.pc-ui-preview #quoteExportModal {
    z-index: 110;
  }

  body.pc-ui-preview .project-contract-page-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    min-width: 0;
  }

  body.pc-ui-preview .project-contract-page-shell {
    gap: 10px;
  }

  body.pc-ui-preview .project-contract-page-shell > .panel {
    margin-bottom: 0;
  }

  body.pc-ui-preview .project-contract-page-shell > .page-hero {
    padding: 3px 2px 0;
    border: 0;
    background: transparent;
  }

  body.pc-ui-preview .project-contract-page-shell .page-hero-title {
    color: #172b4d;
    font-size: 24px;
  }

  body.pc-ui-preview .project-contract-page-shell .page-hero-subtitle,
  body.pc-ui-preview .project-contract-desktop-chips,
  body.pc-ui-preview .project-contract-legacy-summary-head {
    display: none;
  }

  body.pc-ui-preview .project-contract-overview-panel {
    padding: 3px 8px;
  }

  body.pc-ui-preview .project-contract-overview-panel .cards {
    grid-template-columns: repeat(6, minmax(110px, 1fr));
    gap: 0;
    overflow-x: auto;
  }

  body.pc-ui-preview .project-contract-overview-panel .stat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 39px;
    padding: 4px 8px;
    border: 0;
    border-right: 1px solid #e4ebf5;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    white-space: nowrap;
  }

  body.pc-ui-preview .project-contract-overview-panel .stat:last-child {
    border-right: 0;
  }

  body.pc-ui-preview .project-contract-overview-panel .stat::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #1664d9;
  }

  body.pc-ui-preview .project-contract-overview-panel .stat[data-project-summary-filter="contractUpcoming"]::before,
  body.pc-ui-preview .project-contract-overview-panel .stat[data-project-summary-filter="upcoming"]::before {
    background: #e49316;
  }

  body.pc-ui-preview .project-contract-overview-panel .stat[data-project-summary-filter="contractExpired"]::before,
  body.pc-ui-preview .project-contract-overview-panel .stat[data-project-summary-filter="overdue"]::before,
  body.pc-ui-preview .project-contract-overview-panel .stat[data-project-summary-filter="noInvoiceOverdue"]::before {
    background: #dc3545;
  }

  body.pc-ui-preview .project-contract-overview-panel .stat[aria-pressed="true"] {
    background: #edf4ff;
  }

  body.pc-ui-preview .project-contract-overview-panel .stat-label {
    color: #52637d;
    font-size: 12px;
  }

  body.pc-ui-preview .project-contract-overview-panel .stat .num {
    margin: 0;
    color: #153d78;
    font-size: 18px;
    line-height: 1;
  }

  body.pc-ui-preview .project-contract-list-panel {
    gap: 9px;
    padding: 12px 16px 10px;
  }

  body.pc-ui-preview .project-contract-list-panel .section-head {
    padding-bottom: 8px;
  }

  body.pc-ui-preview .project-contract-list-panel .section-head h3 {
    margin: 0;
    color: #1764d6;
    font-size: 15px;
  }

  body.pc-ui-preview .project-contract-list-panel .section-head .tiny {
    margin: 0;
    border: 1px solid #cfdaeb;
    border-radius: 5px;
    background: #fff;
    color: #2b4f83;
  }

  body.pc-ui-preview .project-contract-list-panel .section-head .tiny:hover {
    background: #f2f7ff;
  }

  body.pc-ui-preview .project-contract-create-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 36px;
    margin: 0;
    padding: 7px 15px;
    border: 1px solid #1664d9;
    border-radius: 6px;
    background: #1664d9;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
  }

  body.pc-ui-preview .project-contract-create-toggle:hover {
    border-color: #1252b3;
    background: #1252b3;
  }

  body.pc-ui-preview .project-contract-list-panel #projectContractCreateToggle {
    min-height: 32px;
    padding: 6px 10px;
    font-size: 12px;
  }

  body.pc-ui-preview .project-contract-list-panel #toggleProjectContractTable {
    margin-left: 4px;
    border-color: transparent;
    background: transparent;
    color: #64748b;
    font-weight: 400;
  }

  body.pc-ui-preview .project-contract-list-panel #toggleProjectContractTable:hover {
    background: #f2f7ff;
    color: #2b4f83;
  }

  body.pc-ui-preview .project-contract-create-panel:not(.is-open) {
    display: none;
  }

  body.pc-ui-preview .project-contract-list-panel .project-contract-filters {
    display: grid;
    grid-template-columns: minmax(170px, 1.5fr) repeat(5, minmax(116px, 0.7fr)) auto auto;
    gap: 8px;
    align-items: center;
    padding: 0 0 9px;
    border: 0;
    border-bottom: 1px solid #e4ebf5;
    border-radius: 0;
    background: #fff;
  }

  body.pc-ui-preview .project-contract-list-panel .project-contract-filters input,
  body.pc-ui-preview .project-contract-list-panel .project-contract-filters select {
    width: 100%;
    min-width: 0;
    border-radius: 5px;
    border-color: #cfdaeb;
    background: #fff;
  }

  body.pc-ui-preview .project-contract-list-panel .project-contract-filters select {
    padding: 5px 8px;
    font-size: 13px;
  }

  body.pc-ui-preview .project-contract-list-panel .project-contract-filters #projectContractResetFilters,
  body.pc-ui-preview .project-contract-list-panel .project-contract-filters #projectContractExport {
    min-height: 34px;
    padding: 5px 11px;
    border: 1px solid #cfdaeb;
    border-radius: 5px;
    background: #fff;
    color: #31527d;
  }

  body.pc-ui-preview .project-contract-list-panel .table-scroll {
    border-radius: 6px;
    padding: 0;
  }

  body.pc-ui-preview .project-contract-board-table {
    min-width: 1050px;
    margin: 0;
    table-layout: fixed;
  }

  body.pc-ui-preview .project-contract-narrow-meta { display: none; }

  body.pc-ui-preview .project-contract-board-table > thead > tr > th:nth-child(1) { width: 18%; }
  body.pc-ui-preview .project-contract-board-table > thead > tr > th:nth-child(2) { width: 11%; }
  body.pc-ui-preview .project-contract-board-table > thead > tr > th:nth-child(3) { width: 10%; }
  body.pc-ui-preview .project-contract-board-table > thead > tr > th:nth-child(4) { width: 8%; }
  body.pc-ui-preview .project-contract-board-table > thead > tr > th:nth-child(5) { width: 12%; }
  body.pc-ui-preview .project-contract-board-table > thead > tr > th:nth-child(6) { width: 12%; }
  body.pc-ui-preview .project-contract-board-table > thead > tr > th:nth-child(7) { width: 18%; }
  body.pc-ui-preview .project-contract-board-table > thead > tr > th:nth-child(8) { width: 11%; }

  body.pc-ui-preview .project-contract-board-table > thead > tr > th {
    padding: 9px 8px;
    border-left: 0;
    border-right: 0;
    background: #f2f6fc;
    color: #324b70;
  }

  body.pc-ui-preview .project-contract-board-table > thead > tr > th:nth-child(5) {
    text-align: right;
  }

  body.pc-ui-preview .project-contract-board-table > tbody > .project-contract-row > td {
    padding: 7px 8px;
    border-left: 0;
    border-right: 0;
    border-color: #e8eef7;
    vertical-align: middle;
    color: #38516f;
    line-height: 1.35;
  }

  body.pc-ui-preview .project-contract-name-cell .cell-main {
    color: #172b4d;
    font-size: 13px;
  }

  body.pc-ui-preview .project-contract-name-cell .cell-sub {
    margin-top: 2px;
    color: #7c8aa0;
    font-size: 11px;
  }

  body.pc-ui-preview .project-contract-amount-cell {
    color: #172b4d !important;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
  }

  body.pc-ui-preview .project-contract-period-cell span {
    display: block;
    white-space: nowrap;
  }

  body.pc-ui-preview .project-contract-status-cell {
    overflow-wrap: anywhere;
  }

  body.pc-ui-preview .project-contract-status-main {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-right: 5px;
    white-space: nowrap;
  }

  body.pc-ui-preview .project-contract-status-main::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: #11a77b;
  }

  body.pc-ui-preview .project-contract-status-main.paused::before,
  body.pc-ui-preview .project-contract-status-main.closed::before,
  body.pc-ui-preview .project-contract-status-main.archived::before {
    background: #94a3b8;
  }

  body.pc-ui-preview .project-contract-alert {
    display: inline-block;
    margin: 2px 4px 2px 0;
    padding: 2px 5px;
    border-radius: 4px;
    white-space: nowrap;
    font-size: 11px;
  }

  body.pc-ui-preview .project-contract-alert.warning {
    background: #fff3df;
    color: #a85c00;
  }

  body.pc-ui-preview .project-contract-missing-fields {
    max-width: 100%;
    white-space: normal;
    line-height: 1.5;
  }

  body.pc-ui-preview .project-contract-alert.danger {
    background: #fee9e9;
    color: #c72b36;
  }

  body.pc-ui-preview .project-contract-actions-cell {
    min-width: 0;
  }

  body.pc-ui-preview .project-contract-compact-actions {
    flex-wrap: wrap;
    gap: 3px;
  }

  body.pc-ui-preview .project-contract-compact-actions > .tiny,
  body.pc-ui-preview .project-contract-more-actions > summary {
    width: auto;
    margin: 0;
    padding: 3px 4px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: #1764d6;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
  }

  body.pc-ui-preview .project-contract-compact-actions > .tiny:hover,
  body.pc-ui-preview .project-contract-more-actions > summary:hover {
    background: #edf4ff;
  }

  body.pc-ui-preview .project-contract-more-actions > summary {
    display: inline-block;
    min-width: 28px;
    min-height: 26px;
    text-align: center;
    cursor: pointer;
    list-style: none;
  }

  body.pc-ui-preview .project-contract-more-actions > summary::-webkit-details-marker {
    display: none;
  }

  body.pc-ui-preview .project-contract-more-menu {
    display: grid;
    gap: 4px;
    padding-top: 5px;
  }

  body.pc-ui-preview .project-contract-more-menu .tiny {
    width: 100%;
    margin: 0;
    border-radius: 4px;
  }

  body.pc-ui-preview .project-contract-result-line {
    padding: 2px 1px;
    color: #667891;
    font-size: 12px;
    text-align: right;
  }

  body.pc-ui-preview .project-contract-page-shell.is-detail-view > .page-hero,
  body.pc-ui-preview .project-contract-page-shell.is-detail-view > .project-contract-overview-panel,
  body.pc-ui-preview .project-contract-page-shell.is-detail-view > .project-contract-create-panel,
  body.pc-ui-preview .project-contract-page-shell.is-detail-view > .project-contract-list-panel {
    display: none;
  }

  body.pc-ui-preview .project-contract-detail-view {
    min-width: 0;
  }

  body.pc-ui-preview .project-detail-navigation {
    position: sticky;
    top: 64px;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 0;
    margin-bottom: 6px;
    background: #f3f6f9;
    color: #6a7888;
    font-size: 12px;
  }

  body.pc-ui-preview .project-back-to-list {
    flex: 0 0 auto;
    width: auto;
    min-height: 36px;
    padding: 7px 12px;
    border: 1px solid #cdd7e0;
    border-radius: 5px;
    background: #fff;
    color: #344d62;
    font-size: 13px;
  }

  body.pc-ui-preview .project-back-to-list:hover { background: #eaf0f5; }

  body.pc-ui-preview .project-detail-navigation > span { white-space: nowrap; }

  body.pc-ui-preview .project-contract-detail-panel {
    display: grid;
    gap: 12px;
    min-width: 0;
    margin-top: 2px;
    padding: 16px;
    border: 1px solid #d7e2f2;
    border-radius: 7px;
    background: #f7faff;
    scroll-margin-top: 78px;
  }

  body.pc-ui-preview .project-detail-overview {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
  }

  body.pc-ui-preview .project-detail-overview-copy {
    min-width: 0;
  }

  body.pc-ui-preview .project-detail-eyebrow {
    margin-bottom: 5px;
    color: #637897;
    font-size: 11px;
    font-weight: 700;
  }

  body.pc-ui-preview .project-detail-overview-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
  }

  body.pc-ui-preview .project-detail-overview-title h3 {
    margin: 0;
    color: #172b4d;
    font-size: 19px;
    line-height: 1.35;
  }

  body.pc-ui-preview .project-detail-current-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #32635b;
    font-size: 12px;
    white-space: nowrap;
  }

  body.pc-ui-preview .project-detail-current-status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #13a77b;
  }

  body.pc-ui-preview .project-detail-overview-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 16px;
    margin-top: 8px;
    color: #61738d;
    font-size: 12px;
  }

  body.pc-ui-preview .project-detail-overview-actions {
    display: flex;
    gap: 7px;
    flex: 0 0 auto;
  }

  body.pc-ui-preview .project-detail-overview-actions .tiny {
    width: auto;
    margin: 0;
    border-radius: 5px;
  }

  body.pc-ui-preview .project-detail-keyfacts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
  }

  body.pc-ui-preview .project-detail-keyfacts > div {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid #dfe8f4;
    border-radius: 6px;
    background: #fff;
  }

  body.pc-ui-preview .project-detail-keyfacts span {
    color: #657994;
    font-size: 11px;
  }

  body.pc-ui-preview .project-detail-keyfacts strong {
    color: #193b6a;
    font-size: 16px;
    overflow-wrap: anywhere;
  }

  body.pc-ui-preview .project-detail-reminders {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    padding: 10px 12px;
    border: 1px solid #dfe8f4;
    border-radius: 6px;
    background: #fff;
    color: #526680;
    font-size: 12px;
  }

  body.pc-ui-preview .project-detail-reminders > strong {
    margin-right: 3px;
    color: #243d63;
  }

  body.pc-ui-preview .project-detail-reminder {
    padding: 4px 7px;
    border-radius: 4px;
    line-height: 1.4;
  }

  body.pc-ui-preview .project-detail-reminder.warning { background: #fff3df; color: #9d5800; }
  body.pc-ui-preview .project-detail-reminder.danger { background: #fee9e9; color: #bb2934; }

  body.pc-ui-preview .project-contract-detail-panel .business-link-toolbar {
    margin: 0;
    background: #fff;
  }

  body.pc-ui-preview .project-contract-detail-panel .receivable-detail-panel {
    padding: 0;
    border: 0;
    background: transparent;
  }

  body.pc-ui-preview .project-contract-detail-panel .receivable-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.pc-ui-preview .project-contract-detail-panel .receivable-detail-grid.project-detail-no-contract .project-detail-basic-block {
    grid-column: 1 / -1;
  }

  body.pc-ui-preview .project-contract-detail-panel .receivable-detail-block,
  body.pc-ui-preview .project-detail-workflow,
  body.pc-ui-preview .project-detail-cost-files {
    min-width: 0;
    padding: 14px;
    border: 1px solid #dfe8f4;
    border-radius: 6px;
    background: #fff;
  }

  body.pc-ui-preview .project-contract-detail-panel .receivable-detail-title,
  body.pc-ui-preview .project-detail-section-heading h4 {
    margin: 0 0 9px;
    color: #1b416f;
    font-size: 14px;
    font-weight: 700;
  }

  body.pc-ui-preview .project-contract-detail-panel .client-detail-list {
    gap: 0;
  }

  body.pc-ui-preview .project-contract-detail-panel .client-detail-item {
    padding: 7px 0;
    border: 0;
    border-bottom: 1px solid #edf1f7;
    border-radius: 0;
    background: transparent;
    color: #324d71;
    font-size: 12px;
    line-height: 1.5;
  }

  body.pc-ui-preview .project-contract-detail-panel .client-detail-item strong {
    color: #6b7b90;
    font-weight: 600;
  }

  body.pc-ui-preview .project-contract-detail-panel .project-detail-finance-block {
    grid-column: 1 / -1;
  }

  body.pc-ui-preview .project-finance-details > .client-detail-list:nth-child(2) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 14px;
  }

  body.pc-ui-preview .project-finance-details > .client-detail-list:last-child {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  body.pc-ui-preview .project-detail-section-heading {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
  }

  body.pc-ui-preview .project-detail-section-heading span {
    color: #6f7f95;
    font-size: 11px;
  }

  body.pc-ui-preview .project-detail-workflow .project-delivery-entry-actions {
    padding-top: 0;
  }

  body.pc-ui-preview .project-detail-workflow .project-delivery-entry-actions button {
    border: 1px solid #cbd9ed;
    border-radius: 5px;
    background: #fff;
    color: #175fc6;
    font-size: 12px;
  }

  body.pc-ui-preview .project-detail-workflow .project-delivery-entry-actions button:hover {
    background: #edf4ff;
  }

  body.pc-ui-preview .project-detail-attachments {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 8px 0 12px;
    border-bottom: 1px solid #edf1f7;
    color: #324d71;
    font-size: 12px;
  }

  body.pc-ui-preview .project-detail-attachments > strong {
    flex: 0 0 auto;
    color: #6b7b90;
  }

  body.pc-ui-preview .project-detail-cost-files .project-cost-analysis-panel {
    margin-top: 12px;
    padding-top: 0;
    border-top: 0;
  }

  body.pc-ui-preview .project-contract-create-panel.is-open {
    border-color: #d7e2f2;
    background: #f7faff;
  }

  body.pc-ui-preview .project-contract-create-panel.is-open > .section-head h3 {
    color: #193b6a;
  }

  body.pc-ui-preview .project-form-organized {
    display: block;
    min-width: 0;
  }

  body.pc-ui-preview .project-form-nav {
    display: flex;
    gap: 7px;
    min-width: 0;
    margin: 2px 0 10px;
    overflow-x: auto;
    padding-bottom: 3px;
  }

  body.pc-ui-preview .project-form-nav-button {
    flex: 0 0 auto;
    width: auto;
    min-height: 32px;
    padding: 6px 10px;
    border: 1px solid #d1ddec;
    border-radius: 5px;
    background: #fff;
    color: #385b83;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
  }

  body.pc-ui-preview .project-form-nav-button:hover,
  body.pc-ui-preview .project-form-nav-button:focus-visible {
    border-color: #7fa7de;
    background: #eef5ff;
    color: #155bb5;
  }

  body.pc-ui-preview .project-form-section {
    min-width: 0;
    margin-top: 10px;
    padding: 12px;
    border: 1px solid #dce6f4;
    border-radius: 7px;
    background: #fff;
    scroll-margin-top: 70px;
  }

  body.pc-ui-preview .project-form-section-head {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
  }

  body.pc-ui-preview .project-form-section-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 27px;
    height: 27px;
    border-radius: 5px;
    background: #e8f1fc;
    color: #1b5bac;
    font-size: 11px;
    font-weight: 700;
  }

  body.pc-ui-preview .project-form-section-head h4 {
    margin: 0 0 3px;
    color: #193b6a;
    font-size: 14px;
  }

  body.pc-ui-preview .project-form-section-head p {
    margin: 0;
    color: #71819a;
    font-size: 11px;
  }

  body.pc-ui-preview .project-form-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 12px;
    align-items: start;
    min-width: 0;
  }

  body.pc-ui-preview .project-form-fields > * {
    min-width: 0;
    max-width: 100%;
  }

  body.pc-ui-preview .project-form-fields > .project-form-wide {
    grid-column: 1 / -1;
  }

  /* Native controls wrapped in labels and existing field divs share one grid. */
  body.pc-ui-preview .project-form-fields > .project-form-field {
    margin: 0;
  }

  body.pc-ui-preview .project-form-field > span,
  body.pc-ui-preview .project-form-field > label {
    display: block;
    margin: 0 0 4px;
    color: #526985;
    font-size: 12px;
    line-height: 18px;
    font-weight: 600;
  }

  body.pc-ui-preview .project-form-fields .project-contract-entity-field > label,
  body.pc-ui-preview .project-form-fields .project-contract-account-field > label {
    display: block;
    margin: 0 0 4px;
    color: #526985;
    font-size: 12px;
    line-height: 18px;
    font-weight: 600;
  }

  body.pc-ui-preview .project-form-organized .project-contract-collab-inline .project-permission-toggle {
    border-radius: 5px;
  }

  body.pc-ui-preview .project-form-organized .project-contract-collab-inline .project-permission-toggle-text::before {
    content: none;
  }

  body.pc-ui-preview .project-form-fields input,
  body.pc-ui-preview .project-form-fields select,
  body.pc-ui-preview .project-form-fields textarea {
    min-width: 0;
    max-width: 100%;
    border-radius: 5px;
  }

  body.pc-ui-preview .project-form-fields textarea {
    min-height: 70px;
  }

  body.pc-ui-preview .project-form-fields > .quote-editor-block {
    margin-top: 0;
    overflow-x: auto;
  }

  body.pc-ui-preview .project-form-fields #projectInvoiceTable,
  body.pc-ui-preview .project-form-fields #projectEditInvoiceTable {
    min-width: 1120px;
  }

  body.pc-ui-preview .project-form-fields #projectNoInvoiceTable,
  body.pc-ui-preview .project-form-fields #projectEditNoInvoiceTable {
    min-width: 980px;
  }

  body.pc-ui-preview .project-form-fields .quote-editor-table select[data-field="status"] {
    min-width: 90px;
    max-width: none;
  }

  body.pc-ui-preview .project-form-fields > .inline-master-tools:not(:has(.inline-master-form:not(.hidden))) {
    display: none;
  }

  body.pc-ui-preview .project-form-fields .project-contract-attachment-field > .muted {
    display: block;
    margin-top: 5px;
  }

  body.pc-ui-preview .project-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
    padding: 14px 2px 0;
    border-top: 1px solid #dce6f4;
  }

  body.pc-ui-preview .project-form-actions button {
    width: auto;
    min-width: 110px;
    margin: 0;
    border-radius: 5px;
  }

  body.pc-ui-preview #projectEditModal .project-edit-modal-card {
    width: min(94vw, 1160px);
    min-width: 0;
    overflow-x: hidden;
  }

  body.pc-ui-preview #projectEditModal .project-edit-modal-card #projectEditForm {
    min-width: 0;
  }

  body.pc-ui-preview #projectEditModal .preview-modal-close {
    position: static;
  }

  body.pc-ui-preview #projectEditModal .project-form-actions {
    position: sticky;
    bottom: -18px;
    z-index: 2;
    margin-top: 14px;
    padding: 12px 2px 14px;
    background: #fff;
    box-shadow: 0 -7px 15px rgba(31, 61, 98, 0.05);
  }

  body.pc-ui-preview #projectEditModal {
    z-index: 110;
  }
}

@media (min-width: 769px) and (max-width: 1199px) {
  body.pc-ui-preview .project-contract-board-table { width: 100%; min-width: 0; }
  body.pc-ui-preview .project-contract-board-table th:nth-child(2),
  body.pc-ui-preview .project-contract-board-table th:nth-child(3),
  body.pc-ui-preview .project-contract-board-table th:nth-child(4),
  body.pc-ui-preview .project-contract-board-table th:nth-child(6),
  body.pc-ui-preview .project-contract-board-table .project-contract-row td:nth-child(2),
  body.pc-ui-preview .project-contract-board-table .project-contract-row td:nth-child(3),
  body.pc-ui-preview .project-contract-board-table .project-contract-row td:nth-child(4),
  body.pc-ui-preview .project-contract-board-table .project-contract-row td:nth-child(6) { display: none; }
  body.pc-ui-preview .project-contract-board-table th:nth-child(1) { width: 36%; }
  body.pc-ui-preview .project-contract-board-table th:nth-child(5) { width: 18%; }
  body.pc-ui-preview .project-contract-board-table th:nth-child(7) { width: 28%; }
  body.pc-ui-preview .project-contract-board-table th:nth-child(8) { width: 18%; }
  body.pc-ui-preview .project-contract-narrow-meta { display: block; white-space: normal; }
  body.pc-ui-preview .project-contract-list-panel .project-contract-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.pc-ui-preview .project-contract-list-panel .project-contract-filters > input:first-child {
    grid-column: 1 / -1;
  }

  body.pc-ui-preview .project-finance-details > .client-detail-list:nth-child(2) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.pc-ui-preview .project-form-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .project-contract-create-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 7px 12px;
    background: #1664d9;
    color: #fff;
  }
  .project-contract-create-panel:not(.is-open) { display: none; }
  .project-contract-form.is-no-contract > .project-contract-entity-field,
  .project-contract-form.is-no-contract > .project-contract-account-field { display: none; }
}

#projectActionModal .system-dialog-message { white-space: pre-line; }
#projectActionModal .system-dialog-field select,
#projectActionModal .system-dialog-field textarea { width: 100%; box-sizing: border-box; }
.purchase-budget-hint { padding: 10px 12px; border: 1px solid #dbe5f2; border-radius: 8px; background: #f7faff; line-height: 1.6; }
.project-finance-details > summary { cursor: pointer; color: #2455a0; font-weight: 600; padding: 7px 0; }
.project-finance-details[open] > summary { margin-bottom: 8px; }
.project-detail-more-block { grid-column: 1 / -1; border: 1px solid #dfe8f4; border-radius: 6px; padding: 12px 14px; background: #fff; }
.project-detail-more-block > summary { cursor: pointer; color: #2455a0; font-weight: 600; }
.project-detail-more-block[open] > summary { margin-bottom: 12px; }
.project-detail-more-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
body.pc-ui-preview .project-contract-detail-panel .project-detail-more-content > .receivable-detail-block { padding: 0; border: 0; }
@media (min-width: 1200px) {
  body.pc-ui-preview #projectContractForm-amounts > .project-form-fields,
  body.pc-ui-preview #projectEditForm-amounts > .project-form-fields {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

body.pc-ui-preview .project-form-milestones-collapsed .project-form-section-head { margin-bottom: 0; }
body.pc-ui-preview .project-form-milestone-toggle { margin-left: auto; flex-shrink: 0; }

@media (min-width: 769px) and (max-width: 950px) {
  body.pc-ui-preview .project-contract-create-panel .project-form-fields {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 769px) {
  body.pc-ui-preview .receivable-create-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 36px;
    margin: 0;
    padding: 7px 15px;
    border: 1px solid #0f766e;
    border-radius: 6px;
    background: #0f766e;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
  }

  body.pc-ui-preview .receivable-create-toggle:hover {
    border-color: #115e59;
    background: #115e59;
  }

  body.pc-ui-preview .receivable-create-panel:not(.is-open) {
    display: none;
  }

  body.pc-ui-preview .receivable-list-panel .table-scroll {
    border-radius: 6px;
  }

  body.pc-ui-preview .receivable-main-table > thead > tr > th {
    padding-top: 10px;
    padding-bottom: 10px;
    background: #f5f6f7;
    color: #59636f;
  }

  body.pc-ui-preview .receivable-main-table > tbody > .receivable-main-row > td {
    border-color: #e7eaee;
  }

  body.pc-ui-preview .receivable-main-table > tbody > .receivable-main-row:hover > td {
    background: #fbfdfd;
  }

  body.pc-ui-preview .receivable-table-actions .tiny {
    border-radius: 5px;
  }

  body.pc-ui-preview #receivableEditModal {
    z-index: 110;
  }
}













@media(max-width:768px){
  body:not(.pc-ui-preview) .tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;overflow:visible;white-space:normal}
  body:not(.pc-ui-preview) .tabs .tab-group{min-width:0}
  body:not(.pc-ui-preview) .tabs .tab-group + .tab-group{margin-top:0;padding-top:0;border-top:0}
  body:not(.pc-ui-preview) .tabs button{width:100%;text-align:left}
}
@media(max-width:768px){
  body .main-view{display:block;min-height:100vh;padding-bottom:74px}
  body .topbar{position:sticky;top:0;z-index:120;padding:10px 12px;background:#fff;box-shadow:0 1px 8px rgba(30,55,85,.08)}
  body .topbar-product h2{font-size:16px}
  body .desktop-page-heading{display:none}
  body .topbar .meta{font-size:11px;gap:4px}
  body .topbar .actions{width:auto;margin-left:auto;gap:4px}
  body .topbar .actions #syncBtn,body .topbar .actions #offlineReviewBtn{display:none}
  body .topbar .actions #logoutBtn{padding:7px 9px;font-size:11px}
  body #content{padding:12px 10px 18px;min-width:0}
  body #tabBar:not(.mobile-nav-expanded){display:none!important}
  body #tabBar.mobile-nav-expanded{position:fixed;left:8px;right:8px;bottom:66px;z-index:119;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));max-height:62vh;overflow:auto;margin:0;padding:10px;border:1px solid #d9e3ee;border-radius:12px;background:#fff;box-shadow:0 12px 30px rgba(31,52,78,.2)}
  body #tabBar.mobile-nav-expanded .desktop-sidebar-brand{display:none}
  body #tabBar.mobile-nav-expanded .tab-group{min-width:0;margin:0;padding:0;border:0}
  body #tabBar.mobile-nav-expanded .tab-group-title{padding:6px 3px;color:#74849a;font-size:11px}
  body #tabBar.mobile-nav-expanded .tabs button,body #tabBar.mobile-nav-expanded button{min-height:40px;width:100%;text-align:left}
  body .mobile-nav{position:fixed;left:0;right:0;bottom:0;z-index:121;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;padding:7px 6px calc(7px + env(safe-area-inset-bottom));border-top:1px solid #dbe4ee;background:rgba(255,255,255,.97);box-shadow:0 -4px 16px rgba(31,52,78,.08)}
  body .mobile-nav button{position:relative;display:grid;justify-items:center;gap:2px;min-width:0;padding:3px 2px;border:0;border-radius:7px;background:transparent;color:#6d7d91;font-size:11px}
  body .mobile-nav button.active{background:#eaf4f2;color:#0f766e;font-weight:700}
  body .mobile-nav-icon{font-size:16px;line-height:18px;font-weight:700}
  body .mobile-nav button b{position:absolute;top:0;right:calc(50% - 22px);min-width:15px;height:15px;padding:0 4px;border-radius:8px;background:#c7353d;color:#fff;font-size:10px;line-height:15px}
}
@media(min-width:769px){body .mobile-nav{display:none!important}}
/* Shared mobile controls: one column, touch-sized actions, and no accidental page overflow. */
@media(max-width:768px){
  body{overflow-x:hidden}
  body .panel{padding:12px;border-radius:10px}
  body .page-shell{gap:10px;padding-bottom:4px}
  body .page-hero{padding:13px 14px;border-radius:11px}
  body .page-hero-head{display:block}
  body .page-hero-title{font-size:20px}
  body .page-hero-subtitle{font-size:12px;line-height:1.55}
  body .page-chip-row{gap:6px;margin-top:9px}
  body .page-chip{padding:5px 8px;font-size:11px}
  body .section-head{align-items:flex-start;gap:7px}
  body .section-head-note{font-size:11px;line-height:1.5}
  body .panel h3{font-size:15px}
  body form:not(.login-view form){grid-template-columns:1fr!important}
  body input,body select,body textarea,body button{font-size:14px}
  body input,body select,body textarea{min-height:40px;box-sizing:border-box}
  body button{min-height:40px}
  body .table-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  body .table-scroll>table{min-width:680px}
  body .toolbar-strip,body .filter-strip,body [class*="filter-strip"]{gap:8px;align-items:stretch}
  body .toolbar-strip button,body .filter-strip button,body [class*="filter-strip"] button{min-height:40px}
  body .modal-actions{gap:8px}
}

/* Desktop project detail: grouped actions, compact fields and separate documents. */
@media (min-width: 769px) {
  body.pc-ui-preview .project-contract-detail-panel[data-detail-refined="true"] .project-detail-fields:not([hidden]) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
  }

  body.pc-ui-preview .project-contract-detail-panel[data-detail-refined="true"] .project-detail-field-wide {
    grid-column: 1 / -1;
  }

  body.pc-ui-preview .project-contract-detail-panel[data-detail-refined="true"] :is(.project-detail-fields, .project-detail-entities) .client-detail-item {
    min-width: 0;
    padding: 6px 0;
    overflow-wrap: anywhere;
  }

  body.pc-ui-preview .project-contract-detail-panel[data-detail-refined="true"] .project-detail-optional {
    margin-top: 7px;
    color: #6b7b90;
    font-size: 12px;
  }

  body.pc-ui-preview .project-contract-detail-panel[data-detail-refined="true"] .project-detail-optional > summary {
    width: fit-content;
    max-width: 100%;
    padding: 3px 0;
    cursor: pointer;
    color: #62758c;
  }

  body.pc-ui-preview .project-contract-detail-panel[data-detail-refined="true"] .project-detail-optional > p {
    margin: 5px 0 0;
    font-size: 12px;
  }

  body.pc-ui-preview .project-contract-detail-panel[data-detail-refined="true"] .project-detail-block-head:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-bottom: 8px;
    min-width: 0;
  }

  body.pc-ui-preview .project-contract-detail-panel[data-detail-refined="true"] .project-detail-block-head :is(.receivable-detail-title, h4) {
    margin: 0;
  }

  body.pc-ui-preview .project-contract-detail-panel[data-detail-refined="true"] .project-detail-actions:not([hidden]) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
  }

  body.pc-ui-preview .project-contract-detail-panel[data-detail-refined="true"] :is(.project-detail-actions, .project-detail-block-head, .project-detail-reminder-action) button.tiny {
    width: auto;
    max-width: 100%;
    min-height: 29px;
    margin: 0;
    padding: 5px 9px;
    border: 1px solid #cbd9e7;
    border-radius: 5px;
    background: #fff;
    color: #24599b;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: normal;
  }

  body.pc-ui-preview .project-contract-detail-panel[data-detail-refined="true"] :is(.project-detail-actions, .project-detail-block-head, .project-detail-reminder-action) button.tiny:hover {
    border-color: #a4bedb;
    background: #edf4fb;
  }

  body.pc-ui-preview .project-contract-detail-panel[data-detail-refined="true"] .project-detail-term {
    margin: 10px 0 3px;
    padding: 10px 12px;
    border: 1px solid #e0e8ef;
    border-radius: 5px;
    background: #f5f8fb;
    color: #314d6e;
    font-size: 13px;
    line-height: 1.6;
    overflow-wrap: anywhere;
  }

  body.pc-ui-preview .project-contract-detail-panel[data-detail-refined="true"] .project-detail-term > strong {
    color: #62758c;
    font-size: 12px;
    font-weight: 600;
  }

  body.pc-ui-preview .project-contract-detail-panel[data-detail-refined="true"] .project-detail-term > small {
    color: #697d94;
    font-size: 12px;
  }

  body.pc-ui-preview .project-contract-detail-panel[data-detail-refined="true"] .project-detail-reminder-action:not([hidden]) {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    margin-right: 8px;
  }

  body.pc-ui-preview .project-contract-detail-panel[data-detail-refined="true"] .project-detail-reminder {
    overflow-wrap: anywhere;
  }

  body.pc-ui-preview .project-contract-detail-panel[data-detail-refined="true"] :is(.project-detail-costs, .project-detail-documents) {
    min-width: 0;
    padding: 14px;
    border: 1px solid #dfe8f4;
    border-radius: 6px;
    background: #fff;
  }

  body.pc-ui-preview .project-contract-detail-panel[data-detail-refined="true"] .project-cost-estimates {
    margin: 2px 0 10px;
    font-size: 12px;
  }

  body.pc-ui-preview .project-contract-detail-panel[data-detail-refined="true"] .project-cost-estimates > summary {
    padding: 5px 0;
    color: #2455a0;
    font-weight: 600;
    cursor: pointer;
  }

  body.pc-ui-preview .project-contract-detail-panel[data-detail-refined="true"] .project-cost-estimates > .client-detail-list:not([hidden]) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 18px;
    margin-top: 3px;
  }

  body.pc-ui-preview .project-contract-detail-panel[data-detail-refined="true"] .project-detail-costs .project-cost-analysis-panel {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  body.pc-ui-preview .project-contract-detail-panel[data-detail-refined="true"] .project-detail-document-grid:not([hidden]) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  body.pc-ui-preview .project-contract-detail-panel[data-detail-refined="true"] .project-detail-document-item {
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid #e4ebf3;
    border-radius: 5px;
    color: #4d6582;
    font-size: 12px;
    line-height: 1.65;
    overflow-wrap: anywhere;
  }

  body.pc-ui-preview .project-contract-detail-panel[data-detail-refined="true"] .project-detail-document-item > .project-detail-block-head > strong {
    color: #35516f;
    font-size: 12px;
  }

  body.pc-ui-preview .project-contract-detail-panel[data-detail-refined="true"] .project-detail-document-item a {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body.pc-ui-preview .project-contract-detail-panel[data-detail-refined="true"] .project-detail-document-item > a:not([hidden]) {
    display: inline-block;
    margin: 4px 12px 0 0;
  }
}

@media (min-width: 769px) and (max-width: 1100px) {
  body.pc-ui-preview .project-contract-detail-panel[data-detail-refined="true"] :is(.project-detail-fields, .project-detail-document-grid):not([hidden]) {
    grid-template-columns: minmax(0, 1fr);
  }

  body.pc-ui-preview .project-contract-detail-panel[data-detail-refined="true"] .project-cost-estimates > .client-detail-list:not([hidden]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Keep the customer list within its measured space when a row contains long details. */
@media (min-width: 769px) {
  body.pc-ui-preview .client-page-panel.customer-fixed-list .client-list-view .customer-fixed-table {
    height: var(--list-page-height);
    max-height: var(--list-page-height);
    min-height: 0 !important;
    overflow: auto;
    overscroll-behavior: contain;
  }
  body.pc-ui-preview .client-page-panel.customer-fixed-list .client-list-view .customer-fixed-table > .client-list-table {
    min-width: 940px;
  }
  body.pc-ui-preview .client-page-panel.customer-fixed-list .client-list-view .customer-fixed-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    white-space: nowrap;
    background: #f7f9fc;
  }
  body.pc-ui-preview .client-page-panel.customer-fixed-list .client-list-view .customer-fixed-table th:last-child { z-index: 3; }
  body.pc-ui-preview .client-page-panel .client-detail-view .client-follow-project-table {
    min-width: 920px;
    table-layout: fixed;
  }
  body.pc-ui-preview .client-page-panel .client-detail-view .client-follow-project-table th { white-space: nowrap; }
  body.pc-ui-preview .client-page-panel .client-detail-view .client-follow-project-table th:nth-child(1) { width: 27%; }
  body.pc-ui-preview .client-page-panel .client-detail-view .client-follow-project-table th:nth-child(2) { width: 10%; }
  body.pc-ui-preview .client-page-panel .client-detail-view .client-follow-project-table th:nth-child(3) { width: 12%; }
  body.pc-ui-preview .client-page-panel .client-detail-view .client-follow-project-table th:nth-child(4) { width: 13%; }
  body.pc-ui-preview .client-page-panel .client-detail-view .client-follow-project-table th:nth-child(5) { width: 23%; }
  body.pc-ui-preview .client-page-panel .client-detail-view .client-follow-project-table th:nth-child(6) { width: 15%; }
}
@media (min-width: 769px) and (max-width: 1100px) {
  body.pc-ui-preview .client-page-panel .client-detail-view .client-detail-finance-line { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.pc-ui-preview .client-page-panel .client-detail-view .client-detail-finance-line dd { white-space: nowrap; }
}

@media (min-width:769px) {
  body.pc-ui-preview #projectActionModal { z-index:110; }
  body.pc-ui-preview .project-contract-list-panel.customer-fixed-list .customer-fixed-table {
    max-height:var(--list-page-height);
    min-height:0!important;
    overflow:auto;
    overscroll-behavior:contain;
    scroll-padding-top:32px;
  }
  body.pc-ui-preview .project-contract-list-panel.customer-fixed-list .customer-fixed-table :is(button,a) { scroll-margin-block:32px; }
  body.pc-ui-preview .project-contract-list-panel.customer-fixed-list .customer-fixed-table th {
    position:sticky;
    top:0;
    z-index:2;
    white-space:nowrap;
    background:#f2f6fc;
  }
  body.pc-ui-preview .project-contract-page-shell .project-form-fields > .quote-editor-block { max-height:min(360px,45vh); overflow:auto; overscroll-behavior:contain; }
  body.pc-ui-preview .project-contract-page-shell .project-form-fields > .quote-editor-block th { position:sticky; top:0; z-index:1; white-space:nowrap; background:#f7f9fc; }
}
@media (min-width:769px) and (max-width:1199px) {
  body.pc-ui-preview .project-contract-page-shell:not(.is-detail-view) { gap:6px; }
  body.pc-ui-preview .project-contract-page-shell:not(.is-detail-view) > .page-hero { padding-top:0; }
  body.pc-ui-preview .project-contract-overview-panel .stat { min-height:30px; }
  body.pc-ui-preview .project-contract-list-panel { gap:4px; }
  body.pc-ui-preview .project-contract-list-panel .customer-fixed-pagination { padding-top:3px; }
  body.pc-ui-preview .project-contract-list-panel.customer-fixed-list > .section-head { margin-bottom:0; padding-bottom:6px; }
  body.pc-ui-preview .project-contract-list-panel .section-head {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:6px;
  }
  body.pc-ui-preview .project-contract-list-panel .section-head > .table-action-group { grid-column:1 / -1; grid-row:2; }
  body.pc-ui-preview .project-contract-list-panel .section-head > [data-app-list-sort] { grid-column:2; grid-row:1; }
  body.pc-ui-preview .project-contract-list-panel .project-contract-filters { grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; margin-bottom:0; padding-bottom:4px; }
  body.pc-ui-preview .project-contract-list-panel .project-contract-filters > :is(input,select,button) { min-height:32px; height:32px; margin:0; }
  body.pc-ui-preview .project-contract-list-panel .project-contract-filters > input:first-child { grid-column:span 2; }
  body.pc-ui-preview .project-contract-list-panel.customer-fixed-list .customer-fixed-table > .project-contract-board-table { min-width:700px; }
}
@media (min-width:769px) and (max-width:900px) {
  body.pc-ui-preview .project-contract-list-panel .project-contract-filters { grid-template-columns:minmax(0,1.35fr) repeat(3,minmax(0,1fr)); }
  body.pc-ui-preview .project-contract-list-panel .project-contract-filters > input:first-child { grid-column:auto; }
  body.pc-ui-preview .project-contract-list-panel .project-contract-filters > :is(input,select,button) { font-size:12px; padding-inline:6px; }
}

/* Account history is limited to the login view and keeps the original input/submit flow. */
@media screen {
  #loginView .login-account-field {display:flex;align-items:stretch;gap:6px;min-width:0;}
  #loginView #loginUsername {flex:1;min-width:0;}
  #loginView #loginAccountToggle {flex:none;width:44px;min-height:34px;margin:0;padding:4px;background:#f0f5ff;border-color:#d6e2f7;color:#345fe5;}
  #loginView #loginAccountToggle svg {display:block;width:18px;height:18px;margin:auto;}
  #loginView #loginAccountToggle[aria-expanded="true"] svg {transform:rotate(180deg);}
  #loginView #loginAccountHistory {margin:6px 0 0;padding:4px 8px;border:1px solid #dce5f3;border-radius:10px;background:#f8faff;max-height:200px;overflow:auto;overscroll-behavior:contain;}
  #loginView .login-account-history-title {margin:4px 3px;color:#5f708b;font-size:12px;line-height:1.5;}
  #loginView .login-account-option {display:block;width:100%;min-height:44px;margin:0;padding:9px 8px;text-align:left;font-size:14px;line-height:1.5;font-weight:400;color:#243b60;background:transparent;border:0;border-radius:6px;overflow-wrap:anywhere;}
  #loginView .login-account-option:active {background:#e8f0ff;}
  #loginView #loginAccountClear {width:100%;min-height:40px;margin:0;padding:8px;font-size:13px;color:#5f708b;background:transparent;border:0;border-top:1px solid #e0e8f5;border-radius:0;}
  #loginView .login-remember-account {display:flex;align-items:center;gap:8px;min-height:32px;margin:8px 0;font-size:13px;line-height:1.5;font-weight:400;color:#536780;}
  #loginView #loginRememberAccount {flex:none;appearance:auto;width:17px;height:17px;min-height:0;margin:0;padding:0;accent-color:#345fe5;}
  #loginView [hidden] {display:none!important;}
  #loginView :is(.login-account-option,#loginAccountToggle,#loginAccountClear):focus-visible {outline:2px solid #345fe5;outline-offset:2px;}
}
@media screen and (max-width:768px) {
  #loginView {min-height:var(--mobile-visible-height,100dvh);}
}