.cx-record-form {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 0;
    color: var(--cx-color-text);
    background: var(--cx-color-surface);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-family: var(--cx-font-family);
}

.cx-record-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    min-width: 0;
    align-items: stretch;
    background: var(--cx-color-surface);
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.cx-record-workspace:has(> .cx-record-aside) {
    grid-template-columns: minmax(0, 1fr) var(--cx-aside-width);
}

@media (min-width: 100rem) {
    .cx-record-workspace:has(> .cx-record-aside) {
        grid-template-columns: minmax(0, 1fr) var(--cx-aside-width-wide);
    }
}

.cx-record-main {
    min-width: 0;
    background: var(--cx-color-surface);
}

.cx-record-aside {
    min-width: 0;
    padding: 0;
    background: var(--cx-color-surface);
    border-inline-start: 1px solid var(--cx-color-border);
}

.cx-document-lines__actions {
    display: flex;
    justify-content: flex-end;
    padding: var(--cx-space-3) var(--cx-space-4);
}

.cx-document-totals {
    width: min(100%, 360px);
    margin: var(--cx-space-4) var(--cx-space-4) var(--cx-space-4) auto;
    font-variant-numeric: tabular-nums;
}

.cx-document-totals > div {
    display: flex;
    justify-content: space-between;
    gap: var(--cx-space-6);
    padding: var(--cx-space-1) 0;
}

.cx-document-totals > .cx-document-totals__grand {
    margin-top: var(--cx-space-2);
    padding-top: var(--cx-space-2);
    border-top: 1px solid var(--cx-color-border);
}

.cx-stage-bar {
    min-width: 0;
    margin: 0 0 0 auto;
    padding: 0;
    border: 0;
}

.cx-stage-bar-track {
    display: flex;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
}

.cx-stage-flow {
    display: flex;
    min-width: 0;
    margin: 0 0 0 auto;
    align-items: center;
}

.cx-stage-flow-actions {
    display: flex;
    align-items: center;
    margin-inline-start: -1px;
}

.cx-stage-flow .cx-stage-bar-track {
    overflow: visible;
}

.cx-stage-flow .cx-stage-bar-track .cx-stage:last-child {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

.cx-stage-flow-actions .cx-stage {
    margin-inline-end: -1px;
    border-radius: 0;
    font-family: inherit;
}

.cx-stage-flow-actions .cx-stage:last-child {
    margin-inline-end: 0;
    border-start-end-radius: var(--cx-radius-sm);
    border-end-end-radius: var(--cx-radius-sm);
}

.cx-stage {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    min-height: var(--cx-space-8);
    margin-inline-end: -1px;
    padding: var(--cx-space-1) var(--cx-space-4);
    color: var(--cx-color-text-muted);
    background: var(--cx-color-surface);
    border: 1px solid var(--cx-color-border);
    font-size: var(--cx-font-size-sm);
    font-weight: var(--cx-font-weight-medium);
    cursor: pointer;
}

.cx-stage:first-child {
    border-start-start-radius: var(--cx-radius-sm);
    border-end-start-radius: var(--cx-radius-sm);
}

.cx-stage:last-child {
    margin-inline-end: 0;
    border-start-end-radius: var(--cx-radius-sm);
    border-end-end-radius: var(--cx-radius-sm);
}

.cx-stage:hover {
    z-index: 1;
    color: var(--cx-color-text);
    background: var(--cx-color-surface-muted);
    border-color: var(--cx-color-border-strong);
}

.cx-stage:has(.cx-stage-input:checked) {
    z-index: 2;
    color: var(--cx-color-text-inverse);
    background: var(--cx-color-primary);
    border-color: var(--cx-color-primary);
}

.cx-stage--current {
    z-index: 2;
    color: var(--cx-color-text-inverse);
    background: var(--cx-color-primary);
    border-color: var(--cx-color-primary);
}

.cx-stage:has(.cx-stage-input:focus-visible) {
    z-index: 3;
    outline: 2px solid var(--cx-color-primary);
    outline-offset: var(--cx-space-1);
}

.cx-stage:has(.cx-stage-input:disabled) {
    cursor: default;
    opacity: 0.72;
}

.cx-stage-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.module-main:has(> .cx-record-form),
.module-main:has(> form > .cx-record-form),
.module-main:has(> form > .cx-record-workspace),
.module-main:has(> .cx-record-workspace),
.module-main:has(> .cx-page .cx-record-form),
.module-main:has(> .cx-page .cx-record-workspace) {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    padding: 0;
}

.module-main:has(> .cx-page .cx-record-form) > .cx-page {
    max-width: none;
    padding: 0;
}

/* Record content is one flat ERP workspace, never a nested card. */
.cx-record-workspace,
.cx-record-form:not(.cx-record-workspace .cx-record-form) {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.module-main > .cx-record-form,
.module-main > form > .cx-record-form,
.module-main > form > .cx-record-workspace {
    min-height: calc(100vh - var(--cx-header-height));
}

form:has(> .cx-record-form) > .cx-action-bar,
form:has(> .cx-record-workspace) > .cx-action-bar,
.cx-page:has(> .cx-record-form) > .cx-action-bar,
.cx-page:has(> .cx-record-workspace) > .cx-action-bar,
.cx-record-main:has(> .cx-record-form) > .cx-action-bar,
.cx-record-main:has(> .cx-record-workspace) > .cx-action-bar {
    height: auto;
    min-height: var(--cx-actionbar-height);
    margin-block-end: 0;
    gap: 6px;
    padding: var(--cx-space-1) var(--cx-space-5);
    background: var(--cx-color-surface);
    border-block-end: 1px solid var(--cx-color-border);
    border-radius: 0;
    box-shadow: none;
}

form:has(> .cx-record-form) > .cx-action-bar--sticky,
form:has(> .cx-record-workspace) > .cx-action-bar--sticky,
.cx-page:has(> .cx-record-form) > .cx-action-bar--sticky,
.cx-page:has(> .cx-record-workspace) > .cx-action-bar--sticky,
.cx-record-main:has(> .cx-record-form) > .cx-action-bar--sticky,
.cx-record-main:has(> .cx-record-workspace) > .cx-action-bar--sticky {
    margin-inline: 0;
    background: var(--cx-color-surface);
    box-shadow: none;
}

.cx-record-form > .cx-form,
.cx-record-form .cx-form {
    gap: var(--cx-space-3);
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.cx-record-header {
    min-width: 0;
    margin-block-end: 0;
    padding: var(--cx-space-4) var(--cx-space-5);
    border-block-end: 1px solid var(--cx-color-border);
}

.cx-record-header:not(.cx-record-header--split) > :first-child:not(.cx-record-title) {
    margin-block-end: 6px;
    color: var(--cx-color-text-muted);
    font-size: var(--cx-font-size-eyebrow);
    font-weight: var(--cx-font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Optional checklist block for record settings forms. */
.cx-record-checklist {
    display: grid;
    gap: var(--cx-space-2);
    margin-block-start: var(--cx-space-4);
}

.cx-record-checklist-title {
    margin-block-end: var(--cx-space-1);
    color: var(--cx-color-text-muted);
    font-size: var(--cx-font-size-eyebrow);
    font-weight: var(--cx-font-weight-semibold);
    letter-spacing: 0.08em;
}

/* Split record header: identity block (left) + stats (right).
   Small shared, opt-in primitives — reusable by any record screen. */
.cx-record-header--split {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--cx-space-6);
}

/* Optional generic object identity primitives. Modules provide the image,
   metadata and stats; Corex.UI owns their composition only. */
.cx-record-identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 14px;
}

.cx-record-image {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    overflow: hidden;
    object-fit: cover;
    border-radius: 6px;
}

.cx-record-image--initials {
    flex-basis: 96px;
    width: 96px;
    height: 96px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--cx-color-border);
    background: var(--cx-color-primary-soft);
    color: var(--cx-color-primary);
    font-size: 28px;
    font-weight: var(--cx-font-weight-semibold);
    line-height: 1;
}

.cx-record-header-main {
    min-width: 0;
    flex: 1 1 auto;
}

.cx-record-header-aside {
    flex: 0 0 auto;
}

.cx-record-eyebrow {
    margin-block-end: 6px;
    color: var(--cx-color-text-muted);
    font-size: var(--cx-font-size-eyebrow);
    font-weight: var(--cx-font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cx-record-meta {
    margin-block-start: var(--cx-space-1);
    color: var(--cx-color-text-muted);
    font-family: var(--cx-font-mono);
    font-size: 12px;
    line-height: var(--cx-line-height-snug);
    overflow-wrap: anywhere;
}

.cx-record-stats {
    display: flex;
    gap: var(--cx-space-6);
}

.cx-record-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.cx-record-stat-label {
    color: var(--cx-color-text-subtle);
    font-size: var(--cx-font-size-eyebrow);
    font-weight: var(--cx-font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cx-record-stat-value {
    color: var(--cx-color-text);
    font-family: var(--cx-font-mono);
    font-size: 13px;
    font-weight: var(--cx-font-weight-medium);
    font-variant-numeric: tabular-nums;
}

.cx-record-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--cx-color-text-muted);
    font-size: 12px;
    font-weight: var(--cx-font-weight-medium);
}

.cx-record-status::before {
    content: "";
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.cx-record-status--success {
    color: var(--cx-color-success);
}

.cx-record-status--warning {
    color: var(--cx-color-warning);
}

.cx-record-status--danger {
    color: var(--cx-color-danger);
}

@media (max-width: 48rem) {
    .cx-record-header--split {
        flex-direction: column;
        gap: var(--cx-space-4);
    }

    .cx-record-header-aside {
        width: 100%;
    }

    .cx-record-stats {
        justify-content: flex-start;
    }
}

.cx-record-title h1 {
    margin: 0;
    color: var(--cx-color-text);
    font-size: var(--cx-font-size-2xl);
    font-weight: var(--cx-font-weight-semibold);
    line-height: var(--cx-line-height-tight);
    letter-spacing: -0.015em;
}

.cx-record-title {
    min-width: 0;
    width: 100%;
}

.cx-record-title .cx-field {
    display: block;
}

.cx-record-title .cx-field-label {
    margin-block-end: var(--cx-space-1);
    color: var(--cx-color-text-muted);
    font-size: var(--cx-font-size-xs);
}

.cx-record-title .cx-field-control {
    height: auto;
    min-height: auto;
    padding: var(--cx-space-1) 0 var(--cx-space-2);
    color: var(--cx-color-text);
    background: transparent;
    border: 0;
    border-block-end: 1px solid transparent;
    border-radius: 0;
    font-size: var(--cx-font-size-2xl);
    font-weight: var(--cx-font-weight-semibold);
    line-height: var(--cx-line-height-tight);
    letter-spacing: -0.015em;
}

.cx-record-title .cx-field-control:hover:not(:disabled):not([readonly]) {
    border-block-end-color: var(--cx-color-border-strong);
    background: var(--cx-color-surface-muted);
}

.cx-record-title .cx-field-control:focus-visible {
    border-block-end-color: var(--cx-color-primary);
    outline: 0;
    box-shadow: 0 2px 0 var(--cx-color-primary);
}

.cx-record-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 40px;
    row-gap: var(--cx-space-4);
    min-width: 0;
    padding: var(--cx-space-4) var(--cx-space-5);
    border-block-end: 1px solid var(--cx-color-border);
}

.cx-record-columns--single {
    grid-template-columns: minmax(0, 1fr);
}

.cx-record-column {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.cx-record-group {
    min-width: 0;
}

.cx-record-group + .cx-record-group {
    margin-block-start: var(--cx-space-1);
    padding-block-start: var(--cx-space-3);
    border-block-start: 1px solid var(--cx-color-border);
}

.cx-record-group-title {
    margin: 0 0 var(--cx-space-2);
    color: var(--cx-color-text-muted);
    font-size: 11px;
    font-weight: var(--cx-font-weight-semibold);
    line-height: var(--cx-line-height-snug);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cx-record-group-description {
    margin: calc(var(--cx-space-1) * -1) 0 var(--cx-space-2);
    color: var(--cx-color-text-muted);
    font-size: var(--cx-font-size-sm);
    line-height: 1.45;
}

.cx-record-group-content {
    display: flex;
    flex-direction: column;
    gap: var(--cx-space-1);
    min-width: 0;
}

.cx-record-form .cx-record-group-content > .cx-field,
.cx-record-form .cx-record-group-content > .cx-relation-field {
    display: grid;
    grid-template-columns: 136px minmax(0, 1fr);
    align-items: center;
    column-gap: var(--cx-space-3);
    row-gap: var(--cx-space-1);
}

.cx-record-form .cx-record-group-content > .cx-field > .cx-field-label,
.cx-record-form .cx-record-group-content > .cx-relation-field > .cx-field-label {
    margin-block: 0;
    color: var(--cx-color-text-muted);
    font-size: var(--cx-font-size-sm);
    font-weight: var(--cx-font-weight-normal);
}

.cx-record-form .cx-record-group-content > .cx-field > .cx-field-help,
.cx-record-form .cx-record-group-content > .cx-field > .cx-field-validation,
.cx-record-form .cx-record-group-content > .cx-relation-field > .cx-field-help,
.cx-record-form .cx-record-group-content > .cx-relation-field > .cx-field-validation {
    grid-column: 2;
    margin-block-start: var(--cx-space-1);
}

.cx-record-form .cx-record-group-content > :not(.cx-field):not(.cx-relation-field) {
    margin-inline-start: calc(136px + var(--cx-space-3));
}

/* TR: Onay kutusu alanı (corex-field bool): kutu + etiketi tek kontrol olarak satırın tamamını alır; uzun etiket 136px etiket sütununa sıkışmaz,
   açıklama yanına değil altına, etiket metniyle hizalı düşer. Elle yazılmış "alan etiketi + onay kutusu" yapısında kutu değer sütununda kalır.
   EN: Boolean corex-field: checkbox + label span the whole row so long labels never squeeze into the 136px label column; help/validation sit below,
   aligned with the label text. Hand-written "field label + checkbox" markup keeps the checkbox in the value column. */
.cx-record-form .cx-record-group-content > .cx-field--checkbox > .cx-field-control--checkbox,
.cx-record-form .cx-record-group-content > .cx-field--checkbox > .cx-field-help,
.cx-record-form .cx-record-group-content > .cx-field--checkbox > .cx-field-validation {
    grid-column: 1 / -1;
}

.cx-record-form .cx-record-group-content > .cx-field--checkbox > .cx-field-help,
.cx-record-form .cx-record-group-content > .cx-field--checkbox > .cx-field-validation {
    margin-block-start: 0;
    padding-inline-start: calc(var(--cx-space-4) + var(--cx-space-2));
}

.cx-record-form .cx-record-group-content > .cx-field:not(.cx-field--checkbox):has(> .cx-field-label) > .cx-field-control--checkbox {
    grid-column: 2;
}

/* TR: Radyo grubu: legend ızgara öğesi olamadığından seçenekler 136px sütuna sıkışıyordu; etiket üstte, seçenekler ve açıklama grup genişliğinde.
   EN: Radio group: the legend cannot be a grid item, so options used to squeeze into the 136px column; label on top, options and help use the group width. */
.cx-record-form .cx-record-group-content > .cx-field-radio-group {
    grid-template-columns: minmax(0, 1fr);
}

.cx-record-form .cx-record-group-content > .cx-field-radio-group > .cx-field-label {
    margin-block: 0 var(--cx-space-1);
}

.cx-record-form .cx-record-group-content > .cx-field-radio-group > .cx-field-help,
.cx-record-form .cx-record-group-content > .cx-field-radio-group > .cx-field-validation {
    grid-column: 1;
}

/* Record fields are standard bordered V2 controls (Lovable). */
.cx-record-form .cx-record-group .cx-field-control:not(.cx-field-control--checkbox):hover:not(:disabled):not([readonly]) {
    border-color: var(--cx-color-border-strong);
}

.cx-record-form .cx-record-group .cx-field-control:focus-visible {
    border-color: var(--cx-color-primary);
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--cx-color-ring) 24%, transparent);
}

.cx-record-form .cx-record-group .cx-field--invalid .cx-field-control:focus-visible,
.cx-record-form .cx-record-group .cx-field-control.input-validation-error:focus-visible,
.cx-record-form .cx-record-group .cx-relation-field--invalid .cx-relation-field-input:focus-visible {
    border-color: var(--cx-color-danger);
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--cx-color-danger) 20%, transparent);
}

.cx-record-form .cx-record-group .cx-field-control--checkbox {
    min-height: var(--cx-space-6);
    padding-inline: 0;
}

.cx-record-form .cx-record-group .cx-field-control--checkbox .cx-field-label {
    color: var(--cx-color-text);
    font-weight: var(--cx-font-weight-normal);
}

.cx-record-form .cx-record-group .cx-field-checkbox {
    width: var(--cx-space-4);
    height: var(--cx-space-4);
}

.cx-record-form .cx-record-group .cx-field-control--checkbox > .cx-field-checkbox {
    margin-block-start: calc((var(--cx-font-size-sm) * var(--cx-line-height-snug) - var(--cx-space-4)) / 2);
}

.cx-record-form .cx-record-group .cx-field-radio-options {
    min-height: var(--cx-space-6);
}

.cx-record-form > .cx-field--document {
    display: block;
    min-width: 0;
    margin-block-start: var(--cx-space-6);
    padding-block-start: var(--cx-space-5);
    /* Content is inset to align with the header/columns above; the top divider stays full-width. */
    padding-inline: var(--cx-space-5);
    border-block-start: 1px solid var(--cx-color-border);
}

.cx-record-document-section {
    padding: var(--cx-space-4) var(--cx-space-5);
    border-block-end: 1px solid var(--cx-color-border);
}

.cx-record-document-section-title {
    margin: 0 0 14px;
    color: var(--cx-color-text-muted);
    font-size: 11px;
    font-weight: var(--cx-font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cx-record-document-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
    min-width: 0;
}

.cx-record-document-grid > .cx-field--document {
    min-width: 0;
}

.cx-record-document-grid > .cx-field--document > .cx-field-label {
    display: block;
    margin-block-end: var(--cx-space-1);
}

.cx-record-form .cx-field--document > .cx-field-textarea {
    width: 100%;
    min-width: 0;
    min-height: 68px;
    max-height: 16rem;
    padding: 6px var(--cx-space-2);
    line-height: var(--cx-line-height-snug);
    background: var(--cx-color-surface);
    border: 1px solid var(--cx-color-input);
    border-radius: var(--cx-radius-sm);
    resize: vertical;
}

.cx-record-form > .cx-field--document > .cx-field-label {
    display: block;
    margin-block-end: var(--cx-space-3);
    color: var(--cx-color-text);
    font-size: var(--cx-font-size-md);
    font-weight: var(--cx-font-weight-semibold);
}

.cx-record-form > .cx-field--document > .cx-field-textarea {
    width: 100%;
    min-width: 0;
    min-height: 68px;
    padding: var(--cx-space-3);
    line-height: 1.55;
    background: var(--cx-color-surface);
    border: 1px solid var(--cx-color-border);
    border-radius: var(--cx-radius-sm);
    resize: vertical;
}

.cx-record-form > .cx-field--document > .cx-field-textarea:hover:not(:disabled):not([readonly]) {
    border-color: var(--cx-color-border-strong);
}

.cx-record-form > .cx-field--document > .cx-field-textarea:focus-visible {
    border-color: var(--cx-color-primary);
    outline: 1px solid var(--cx-color-primary);
    outline-offset: 0;
}

.cx-record-form > .cx-tabs,
.cx-record-form .cx-tabs {
    margin-block-start: 0;
    margin-inline: 0;
    padding-block-start: 0;
    border-block-start: 0;
}

.cx-record-form .cx-tabs-list,
.cx-record-form .cx-tab-panel {
    padding-inline: var(--cx-space-5);
}

.cx-record-form .cx-tab-panel {
    padding-block: var(--cx-space-4);
}

/* Related record tables start just below the tabs: a small gap keeps the active tab's underline from touching the table header. */
.cx-record-form .cx-tab-panel:has(> .cx-data-grid),
.cx-record-form .cx-tab-panel:has(> .cx-one-to-many) {
    padding-block-start: var(--cx-space-3);
}

.cx-record-form .cx-tab-panel > .cx-record-columns,
.cx-record-form .cx-tab-panel > form > .cx-record-columns {
    margin-inline: calc(var(--cx-space-5) * -1);
}

.cx-record-form .cx-tab-panel > h2,
.cx-record-form .cx-tab-panel > h3 {
    margin: 0 0 14px;
    color: var(--cx-color-text-muted);
    font-size: 11px;
    font-weight: var(--cx-font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Plain section headings placed directly in a record form (e.g. costing/traceability components) get the same horizontal inset as
   the record header/columns above them, so they don't sit flush to the edge. The grids below keep their own full-width layout. */
.cx-record-form > h2,
.cx-record-form > h3 {
    padding-inline: var(--cx-space-5);
}

@media (max-width: 48rem) {
    .cx-record-form > h2,
    .cx-record-form > h3 {
        padding-inline: var(--cx-space-3);
    }
}

/* Related record tables continue directly from tabs at compact record density. */
.cx-record-form .cx-tab-panel > .cx-data-grid {
    border-radius: 0;
    box-shadow: none;
}

.cx-record-form .cx-tab-panel .cx-one-to-many,
.cx-record-form .cx-tab-panel .cx-data-grid {
    background: var(--cx-color-surface);
}

.cx-record-form .cx-tab-panel .cx-data-grid-header th {
    height: 28px;
    font-size: 11.5px;
}

.cx-record-form .cx-tab-panel .cx-data-grid-cell {
    height: 36px;
    font-size: 12.5px;
}

.cx-record-form .cx-tab-panel .cx-data-grid-row > .cx-data-grid-cell:first-child:not(.cx-data-grid-cell--selection),
.cx-record-form .cx-tab-panel .cx-data-grid-row > .cx-data-grid-cell--selection + .cx-data-grid-cell {
    font-size: 12.5px;
    font-weight: var(--cx-font-weight-normal);
}

.cx-record-form .cx-tab-panel .cx-data-grid-empty,
.cx-record-form .cx-tab-panel .cx-data-grid-loading,
.cx-record-form .cx-tab-panel .cx-data-grid-error {
    padding: var(--cx-space-5);
    font-size: var(--cx-font-size-sm);
}

.cx-record-form .cx-tab-panel .cx-data-grid-pagination {
    min-height: 36px;
    padding-block: var(--cx-space-1);
}

@media (max-width: 64rem) {
    .cx-record-workspace:has(> .cx-record-aside) {
        grid-template-columns: minmax(0, 1fr);
    }

    .cx-record-aside {
        border-block-start: 1px solid var(--cx-color-border);
        border-inline-start: 0;
    }

    .cx-record-columns {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--cx-space-4);
    }

    .cx-record-column {
        gap: 0;
    }
}

@media (max-width: 48rem) {
    .cx-stage-bar {
        width: 100%;
        margin-inline-start: 0;
    }
    .cx-record-form {
        padding: 0;
    }

    form:has(> .cx-record-form) > .cx-action-bar {
        padding-inline: var(--cx-space-3);
    }

    .cx-record-header {
        margin-block-end: 0;
        padding: var(--cx-space-4) var(--cx-space-3);
    }

    .cx-record-form .cx-record-group-content > .cx-field,
    .cx-record-form .cx-record-group-content > .cx-relation-field {
        display: block;
    }

    .cx-record-form .cx-record-group-content > .cx-field > .cx-field-label,
    .cx-record-form .cx-record-group-content > .cx-relation-field > .cx-field-label {
        margin-block: 0 var(--cx-space-1);
    }

    .cx-record-form .cx-record-group-content > .cx-field > .cx-field-help,
    .cx-record-form .cx-record-group-content > .cx-field > .cx-field-validation,
    .cx-record-form .cx-record-group-content > .cx-relation-field > .cx-field-help,
    .cx-record-form .cx-record-group-content > .cx-relation-field > .cx-field-validation {
        grid-column: auto;
    }

    .cx-record-form .cx-record-group-content > :not(.cx-field):not(.cx-relation-field) {
        margin-inline-start: 0;
    }

    .cx-record-form > .cx-tabs,
    .cx-record-form .cx-tabs {
        margin-inline: 0;
    }

    .cx-record-columns {
        padding-inline: var(--cx-space-3);
    }

    .cx-record-form .cx-tabs-list,
    .cx-record-form .cx-tab-panel {
        padding-inline: var(--cx-space-3);
    }

    .cx-record-form .cx-tab-panel > .cx-record-columns,
    .cx-record-form .cx-tab-panel > form > .cx-record-columns {
        margin-inline: calc(var(--cx-space-3) * -1);
    }

    .cx-record-form > .cx-field--document {
        padding-inline: var(--cx-space-3);
    }

    .cx-record-form > .cx-field--document > .cx-field-textarea {
        min-height: 68px;
    }

    .cx-record-document-section {
        padding-inline: var(--cx-space-3);
    }

    .cx-record-document-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--cx-space-4);
    }
}

/* Compact read-only workflow steps in a record header. */
.cx-record-steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-self: center;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.cx-record-step { display: flex; align-items: flex-start; gap: 8px; color: var(--cx-color-text); font-size: var(--cx-font-size-sm); }
.cx-record-step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--cx-color-surface-muted);
    color: var(--cx-color-text-muted);
    font-weight: 600;
}
.cx-record-step--success .cx-record-step-icon { color: var(--cx-color-success); background: var(--cx-color-success-soft); }
.cx-record-step--warning .cx-record-step-icon { color: var(--cx-color-warning); background: var(--cx-color-warning-soft); }
.cx-record-step-status { display: block; margin-top: 3px; color: var(--cx-color-text-muted); font-size: var(--cx-font-size-xs); }
@media (max-width: 64rem) {
    .cx-record-header--split:has(> .cx-record-steps) { flex-wrap: wrap; }
    .cx-record-steps { justify-content: flex-start; }
}
/* Compact section heading with an adjacent status badge. */
.cx-record-header--compact-inline {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--cx-space-2);
    padding-block: var(--cx-space-1);
}

.cx-record-header.cx-record-header--compact-inline:not(.cx-record-header--split) > :first-child:not(.cx-record-title) {
    margin-block-end: 0;
}

.cx-record-form h3.cx-record-section-title--normal {
    font-weight: var(--cx-font-weight-normal);
}

.cx-tab-collection > .cx-record-section-title {
    margin: 0;
    padding-block-start: var(--cx-space-1);
    color: var(--cx-color-text-muted);
    font-size: var(--cx-font-size-eyebrow);
    font-weight: var(--cx-font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}