.crm-contract-status-active {
  background: var(--success);
  border-color: var(--success);
  color: var(--panel);
}

.crm-contract-status-draft {
  background: var(--panel-strong);
  color: var(--muted);
}

.crm-contract-status-ended {
  background: var(--panel-strong);
  border-color: var(--line-strong);
  color: var(--ink);
}

.crm-contract-status-cancelled {
  background: var(--danger-bg);
  border-color: var(--danger-bg);
  color: var(--panel);
}

.crm-contract-workspace,
.crm-contract-form {
  display: grid;
  gap: var(--section-gap);
  min-width: 0;
}

.crm-contract-heading,
.crm-contract-editor-heading,
.crm-contract-filter-actions,
.crm-contract-milestones-heading {
  align-items: center;
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
  min-width: 0;
}

.crm-contract-editor-heading {
  justify-content: flex-start;
}

.crm-contract-heading > div,
.crm-contract-editor-heading > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.crm-contract-editor-heading h3 {
  overflow-wrap: anywhere;
}

.crm-contract-primary-filters {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: minmax(240px, 2fr) repeat(3, minmax(150px, 1fr));
  min-width: 0;
}

.crm-contract-table-wrap {
  background: var(--panel);
  border: var(--border-width) solid var(--line-strong);
  border-radius: var(--radius-sm);
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  overflow-y: visible;
}

.crm-contract-table {
  border-collapse: collapse;
  border-spacing: 0;
  min-width: 0;
  table-layout: fixed;
  width: 100%;
}

.crm-contract-table th,
.crm-contract-table td {
  font-size: var(--fs-label);
  overflow-wrap: anywhere;
  width: auto;
}

.table-wrap.crm-contract-table-wrap > .crm-contract-table thead th {
  background: var(--panel-strong);
  border-bottom-color: var(--line-strong);
  position: static;
  top: auto;
  z-index: auto;
}

.crm-contract-table tbody td {
  background: var(--panel);
  border-bottom-color: var(--line-strong);
}

.crm-contract-col-contract { width: 25%; }
.crm-contract-col-company { width: 23%; }
.crm-contract-col-next-date { width: 18%; }
.crm-contract-col-value { width: 10rem; }
.crm-contract-col-owner { width: 13.75rem; }
.crm-contract-col-status { width: 7.25rem; }
.crm-contract-col-actions { width: 6.5rem; }

.crm-contract-table th:nth-child(7),
.crm-contract-table td:nth-child(7) {
  min-width: 6.5rem;
  overflow-wrap: normal;
  width: 6.5rem;
}

.crm-contract-table th:nth-child(4),
.crm-contract-table td:nth-child(4),
.crm-contract-table th:nth-child(5),
.crm-contract-table td:nth-child(5),
.crm-contract-table th:nth-child(6),
.crm-contract-table td:nth-child(6),
.crm-contract-table th:nth-child(7),
.crm-contract-table td:nth-child(7) {
  white-space: nowrap;
}

.crm-contract-title-cell small,
.crm-contract-table td small {
  color: var(--muted);
  display: block;
  margin-top: 2px;
}

.crm-contract-next-date {
  color: var(--ink);
  font-weight: var(--fw-semibold);
}

.crm-contract-row-actions {
  align-items: center;
  display: inline-flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
  justify-content: flex-end;
  min-width: max-content;
  white-space: nowrap;
}

.crm-contract-row-actions .icon-button {
  flex: 0 0 auto;
}

.crm-contract-feedback {
  align-items: center;
  border: var(--border-width) solid var(--line-strong);
  border-radius: var(--radius-sm);
  display: grid;
  gap: var(--space-2);
  grid-template-columns: auto minmax(0, 1fr);
  min-width: 0;
  padding: var(--space-3);
  transition: opacity 180ms ease, transform 180ms ease;
}

.crm-contract-feedback.is-dismissing {
  opacity: 0;
  transform: translateY(-4px);
}

.crm-contract-feedback-success {
  background: var(--success);
  border-color: var(--success);
  color: var(--panel);
}

.crm-contract-feedback-error {
  background: var(--danger-bg);
  border-color: var(--danger-bg);
  color: var(--panel);
}

.crm-contract-editor {
  display: grid;
  gap: var(--section-gap);
  max-width: none;
  min-width: 0;
  width: 100%;
}

.crm-contract-fieldset {
  border: 0;
  border-top: var(--border-width) solid var(--line-strong);
  display: grid;
  gap: var(--space-3);
  margin: 0;
  min-width: 0;
  padding: var(--space-4) 0 0;
}

.crm-contract-fieldset legend {
  color: var(--ink);
  font-size: var(--fs-card-title);
  font-weight: var(--fw-semibold);
  padding: 0 var(--space-2) 0 0;
}

.crm-contract-form-grid {
  align-items: start;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-width: 0;
}

.crm-contract-span-2 {
  grid-column: span 2;
}

.crm-contract-field-help {
  color: var(--muted);
  display: block;
  font-size: var(--fs-caption);
  line-height: 1.35;
  margin-top: var(--space-1);
}

.crm-contract-milestones {
  border-top: var(--border-width) solid var(--line-strong);
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  padding-top: var(--space-4);
}

.crm-contract-milestones-heading h4 {
  margin: 0;
}

.crm-contract-notification-settings {
  align-items: start;
  border-bottom: var(--border-width) solid var(--line);
  border-top: var(--border-width) solid var(--line);
  display: grid;
  gap: var(--space-3);
  grid-template-columns: minmax(260px, 0.85fr) minmax(320px, 1.15fr);
  min-width: 0;
  padding: var(--space-3) 0;
}

.crm-contract-notification-heading {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  grid-column: 1 / -1;
  justify-content: space-between;
  min-width: 0;
}

.crm-contract-notification-heading h5 {
  color: var(--ink);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  line-height: var(--type-label-line);
  margin: 0;
}

.crm-contract-milestone-label {
  color: var(--muted);
  display: block;
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  line-height: var(--type-label-line);
}

.crm-contract-milestone-help {
  color: var(--muted);
  font-size: var(--fs-caption);
  line-height: var(--type-caption-line);
  margin: 2px 0 0;
}

.crm-contract-reminder-field {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.crm-contract-reminder-options {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}

.crm-contract-reminder-option {
  align-items: center;
  background: var(--panel);
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  display: inline-flex;
  gap: var(--space-2);
  min-height: var(--control-height-sm);
  min-width: 0;
  padding: 0 var(--space-2);
}

.crm-contract-reminder-option span {
  white-space: nowrap;
}

.crm-contract-recipient-field {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.crm-contract-recipient-options {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-height: var(--control-height-md);
  min-width: 0;
}

.crm-contract-recipient-option {
  align-items: center;
  background: var(--panel);
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  display: inline-flex;
  gap: var(--space-2);
  min-height: var(--control-height-sm);
  min-width: 0;
  padding: 0 var(--space-2);
  width: auto;
}

.crm-contract-reminder-option input[type="checkbox"],
.crm-contract-recipient-option input[type="checkbox"],
.crm-contract-advisory-toggle input[type="checkbox"] {
  accent-color: var(--brand);
  flex: 0 0 auto;
  height: 20px;
  min-height: 0;
  width: 20px;
}

.crm-contract-recipient-option span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-contract-customer-advisory {
  align-items: end;
  display: grid;
  gap: var(--space-2);
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.85fr);
  min-width: 0;
}

.crm-contract-advisory-toggle {
  align-items: start;
  color: var(--ink);
  display: grid;
  gap: var(--space-2);
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 0;
}

.crm-contract-advisory-toggle strong {
  display: block;
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  line-height: 1.25;
}

.crm-contract-advisory-toggle small {
  color: var(--muted);
  display: block;
  font-size: var(--fs-caption);
  line-height: 1.35;
  margin-top: 2px;
}

.crm-contract-reminder-preview {
  background: var(--panel-strong);
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius-sm);
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  min-width: 0;
  padding: var(--space-3);
}

.crm-contract-reminder-preview[role="status"] {
  align-items: center;
  color: var(--muted);
  display: flex;
}

.crm-contract-reminder-preview-item {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.crm-contract-reminder-preview-item span {
  color: var(--muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  line-height: var(--type-caption-line);
}

.crm-contract-reminder-preview-item strong {
  color: var(--ink);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  line-height: var(--type-label-line);
}

.crm-contract-reminder-preview-item small {
  color: var(--muted);
  font-size: var(--fs-caption);
  line-height: var(--type-caption-line);
  overflow-wrap: anywhere;
}

.crm-contract-actions {
  align-items: center;
  background: var(--bg);
  border-top: var(--border-width) solid var(--line-strong);
  bottom: 0;
  display: grid;
  gap: var(--space-2);
  grid-template-columns: minmax(0, 1fr) auto auto;
  padding: var(--space-3) 0;
  position: sticky;
  z-index: 4;
}

.crm-contract-actions .text-button,
.crm-contract-actions .small-button,
.crm-contract-actions .danger-button {
  min-height: var(--control-height-md);
  min-width: 120px;
}

@media (max-width: 1180px) {
  .crm-contract-workspace .table-sort-mobile {
    display: flex;
  }

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

  .crm-contract-table,
  .crm-contract-table thead,
  .crm-contract-table tbody,
  .crm-contract-table tr,
  .crm-contract-table td {
    display: block;
    min-width: 0;
    width: 100%;
  }

  .crm-contract-table thead {
    display: none;
  }

  .crm-contract-table tbody {
    display: grid;
    gap: var(--space-3);
  }

  .crm-contract-table tr[data-crm-contract-id] {
    background: var(--panel);
    border: var(--border-width) solid var(--line);
    border-radius: var(--radius-sm);
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: var(--space-3);
    padding-right: calc(var(--space-3) + (var(--control-height-sm) * 2) + var(--space-4));
    position: relative;
  }

  .crm-contract-table td {
    background: transparent;
    border: 0;
    display: grid;
    gap: var(--space-1);
    inline-size: auto;
    padding: 0;
    width: auto;
  }

  .crm-contract-table td::before {
    color: var(--muted);
    content: attr(data-label);
    font-size: var(--fs-overline);
    font-weight: var(--fw-semibold);
    line-height: var(--type-overline-line);
    text-transform: uppercase;
  }

  .crm-contract-table td:first-child {
    display: block;
    grid-column: 1 / -1;
  }

  .crm-contract-table td:first-child::before,
  .crm-contract-table td.crm-row-action-cell::before {
    display: none;
  }

  .crm-contract-table td.crm-row-action-cell {
    display: block;
    position: absolute;
    right: var(--space-3);
    top: var(--space-3);
    width: auto;
  }
}

@media (max-width: 920px) {
  .crm-contract-primary-filters,
  .crm-contract-form-grid,
  .crm-contract-notification-settings {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .crm-contract-recipient-field,
  .crm-contract-customer-advisory,
  .crm-contract-notification-heading {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .crm-contract-heading,
  .crm-contract-editor-heading,
  .crm-contract-milestones-heading,
  .crm-contract-filter-actions {
    align-items: stretch;
    display: grid;
  }

  .crm-contract-primary-filters,
  .crm-contract-form-grid,
  .crm-contract-notification-settings {
    grid-template-columns: minmax(0, 1fr);
  }

  .crm-contract-span-2,
  .crm-contract-recipient-field,
  .crm-contract-customer-advisory,
  .crm-contract-notification-heading {
    grid-column: auto;
  }

  .crm-contract-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .crm-contract-actions .danger-button {
    grid-column: 1 / -1;
  }

  .crm-contract-actions .text-button,
  .crm-contract-actions .small-button,
  .crm-contract-actions .danger-button {
    min-width: 0;
    width: 100%;
  }
}