/**
 * MCL transactional form layout — global standard.
 * Spec: docs/UI_Standard.md §6 (Form layout).
 * Field width = DB column max length in `ch` via --mcl-field-ch on the field wrapper.
 * Purpose width is computed on the same element that sets --mcl-field-ch (not :root).
 */

:root {
    --mcl-form-row-gap: 16px;
    --mcl-form-label-control-gap: 4px;
    --mcl-form-field-gap-h: 20px;
    --mcl-form-field-gap-v: 16px;
    --mcl-form-control-height: 23.1875px;
    --mcl-form-control-padding-x: 6px;
}

/* Vertical stack: loose gap between rows; label→control gap is tighter inside each field */
.mcl-form-stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--mcl-form-row-gap);
    width: 100%;
}

.mcl-form-header-row,
.mcl-form-inline-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--mcl-form-field-gap-v) var(--mcl-form-field-gap-h);
    width: 100%;
}

.orgs-fd-layout-spacer,
.mcl-form-layout-spacer {
    flex: 0 0 auto;
    min-width: 0;
    box-sizing: border-box;
    width: min(100%, calc(var(--mcl-field-ch, 1) * 1ch));
}

.mcl-form-base-entity-header.mcl-form-stack {
    width: 100%;
    max-width: 100%;
}

.mcl-form-base-entity-header .mcl-form-header-row {
    width: 100%;
    max-width: 100%;
}

.mcl-form-field,
.parts-field,
.orgs-field,
.po-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--mcl-form-label-control-gap);
    max-width: 100%;
}

.mcl-form-field:not(.mcl-form-field-no-size),
.parts-field:not(.mcl-form-field-no-size),
.orgs-field:not(.mcl-form-field-no-size),
.po-field:not(.mcl-form-field-no-size) {
    min-width: 0;
}

/* Sized fields: wrapper owns purpose width; never shrink below it (wrap instead). */
.mcl-form-field:not(.mcl-form-field-no-size):not(.mcl-form-field-row-full),
.parts-field:not(.mcl-form-field-no-size):not(.mcl-form-field-row-full),
.orgs-field:not(.mcl-form-field-no-size):not(.mcl-form-field-row-full),
.po-field:not(.mcl-form-field-no-size):not(.mcl-form-field-row-full) {
    width: min(100%, calc(var(--mcl-field-ch, 10) * 1ch + (2 * var(--mcl-form-control-padding-x)) + 2px));
    min-width: min(100%, calc(var(--mcl-field-ch, 10) * 1ch + (2 * var(--mcl-form-control-padding-x)) + 2px));
    flex: 0 0 auto;
}

/* Own row in a stack — row spans width; control caps at purpose width */
.mcl-form-field-row-full {
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    flex: 1 1 100%;
}

.mcl-form-field > label,
.parts-field > label,
.orgs-field > label,
.po-field > label,
.parts-summary-field > label {
    display: block;
    margin: 0;
    font-weight: var(--mcl-field-label-weight, 600);
    font-size: var(--mcl-field-label-size, 0.8125rem);
    color: var(--mcl-field-label-color, #475569);
    line-height: 1.35;
}

.mcl-form-field > label strong,
.parts-field > label strong,
.orgs-field > label strong,
.po-field > label strong,
.parts-summary-field > label strong {
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
}

.parts-summary-field > label {
    margin-bottom: var(--mcl-form-label-control-gap);
}

.parts-summary-field .mcl-readonly-value {
    box-sizing: border-box;
}

/* 12-column grid — legacy / line editors; header work pages prefer .mcl-form-stack */
.mcl-form-grid,
.parts-grid-12,
.orgs-grid-12,
.po-header-grid,
.receipt-page-container .po-header-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--mcl-form-row-gap) var(--mcl-form-field-gap-h);
    align-items: start;
}

.mcl-form-span-2,
.span-2,
.orgs-span-2 { grid-column: span 2; }
.mcl-form-span-3,
.span-3,
.orgs-span-3 { grid-column: span 3; }
.mcl-form-span-4,
.span-4,
.orgs-span-4 { grid-column: span 4; }
.mcl-form-span-6,
.span-6,
.orgs-span-6 { grid-column: span 6; }
.mcl-form-span-12,
.span-12,
.orgs-span-12 { grid-column: span 12; }
.mcl-form-span-full { grid-column: 1 / -1; width: 100%; }

.edit-form.mcl-form-layout,
.edit-form:not([class*="mcl-form-layout"]) {
    display: flex;
    flex-direction: column;
    gap: var(--mcl-form-row-gap);
}

/* Uniform control height; inline-row/header-row/stack sized fields fill their wrapper */
.mcl-form-stack .mcl-form-field-control-width :is(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    select),
.mcl-form-stack .parts-field:not(.mcl-form-field-no-size) :is(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    select),
.mcl-form-stack .orgs-field:not(.mcl-form-field-no-size) :is(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    select),
.mcl-form-base-entity-header .orgs-field:not(.mcl-form-field-no-size) :is(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    select),
.mcl-form-header-row .parts-field:not(.mcl-form-field-no-size) :is(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    select),
.mcl-form-header-row .orgs-field:not(.mcl-form-field-no-size) :is(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    select),
.mcl-form-inline-row .parts-field:not(.mcl-form-field-no-size) :is(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    select),
.mcl-form-inline-row .orgs-field:not(.mcl-form-field-no-size) :is(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    select),
.mcl-form-field-row-full:not(.mcl-form-field-no-size) :is(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    select) {
    box-sizing: border-box;
    display: block;
    height: var(--mcl-form-control-height);
    min-height: var(--mcl-form-control-height);
    max-height: var(--mcl-form-control-height);
    width: 100%;
    max-width: 100%;
    padding: 0 var(--mcl-form-control-padding-x);
    line-height: calc(var(--mcl-form-control-height) - 2px);
}

.mcl-form-field-row-full:not(.mcl-form-field-no-size) :is(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    select) {
    width: min(100%, calc(var(--mcl-field-ch, 10) * 1ch + (2 * var(--mcl-form-control-padding-x)) + 2px));
}

.mcl-form-stack .parts-field:not(.mcl-form-field-no-size) .mcl-readonly-value:not(.mcl-readonly-value--multiline):not(.mcl-readonly-value--notes),
.mcl-form-stack .orgs-field:not(.mcl-form-field-no-size) .mcl-readonly-value:not(.mcl-readonly-value--multiline):not(.mcl-readonly-value--notes),
.mcl-form-base-entity-header .orgs-field:not(.mcl-form-field-no-size) .mcl-readonly-value:not(.mcl-readonly-value--multiline):not(.mcl-readonly-value--notes),
.mcl-form-header-row .parts-field:not(.mcl-form-field-no-size) .mcl-readonly-value:not(.mcl-readonly-value--multiline):not(.mcl-readonly-value--notes),
.mcl-form-inline-row .parts-field:not(.mcl-form-field-no-size) .mcl-readonly-value:not(.mcl-readonly-value--multiline):not(.mcl-readonly-value--notes),
.mcl-form-inline-row .orgs-field:not(.mcl-form-field-no-size) .mcl-readonly-value:not(.mcl-readonly-value--multiline):not(.mcl-readonly-value--notes),
.mcl-form-field-row-full:not(.mcl-form-field-no-size) .mcl-readonly-value:not(.mcl-readonly-value--multiline):not(.mcl-readonly-value--notes) {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

.mcl-form-field-row-full:not(.mcl-form-field-no-size) .mcl-readonly-value:not(.mcl-readonly-value--multiline):not(.mcl-readonly-value--notes) {
    width: min(100%, calc(var(--mcl-field-ch, 10) * 1ch + (2 * var(--mcl-form-control-padding-x)) + 2px));
}

.mcl-form-stack .parts-field.mcl-form-field-textarea :is(textarea, input:not([type="hidden"])),
.mcl-form-stack .orgs-field.mcl-form-field-textarea textarea,
.mcl-form-field-row-full.mcl-form-field-textarea textarea {
    box-sizing: border-box;
    width: min(100%, calc(var(--mcl-field-ch, 10) * 1ch + (2 * var(--mcl-form-control-padding-x)) + 2px));
    max-width: 100%;
    height: auto;
    min-height: calc(var(--mcl-form-control-height) * 3);
    max-height: none;
    padding: var(--mcl-form-control-padding-x);
    line-height: 1.35;
}

.mcl-form-stack .parts-field.mcl-form-field-textarea input {
    height: var(--mcl-form-control-height);
    min-height: var(--mcl-form-control-height);
    max-height: var(--mcl-form-control-height);
    padding: 0 var(--mcl-form-control-padding-x);
    line-height: calc(var(--mcl-form-control-height) - 2px);
}

@media (max-width: 720px) {
    .mcl-form-grid,
    .parts-grid-12,
    .orgs-grid-12,
    .po-header-grid {
        grid-template-columns: 1fr;
    }

    .mcl-form-span-2,
    .mcl-form-span-3,
    .mcl-form-span-4,
    .mcl-form-span-6,
    .mcl-form-span-12,
    .span-2,
    .span-3,
    .span-4,
    .span-6,
    .span-12,
    .orgs-span-2,
    .orgs-span-3,
    .orgs-span-4,
    .orgs-span-6,
    .orgs-span-12 {
        grid-column: 1 / -1;
    }

    .mcl-form-field:not(.mcl-form-field-no-size):not(.mcl-form-field-row-full),
    .parts-field:not(.mcl-form-field-no-size):not(.mcl-form-field-row-full),
    .orgs-field:not(.mcl-form-field-no-size):not(.mcl-form-field-row-full) {
        width: 100%;
        min-width: 0;
        flex: 1 1 100%;
    }

    .mcl-form-stack .parts-field :is(input:not([type="checkbox"]):not([type="radio"]), select),
    .mcl-form-stack .orgs-field :is(input:not([type="checkbox"]):not([type="radio"]), select),
    .mcl-form-field-row-full :is(input:not([type="checkbox"]):not([type="radio"]), select) {
        width: 100%;
        max-width: 100%;
    }
}