/* To restore labels + values like before Django 6.1: labels and values aligned next to each other
instead of on separate lines.
See https://forum.djangoproject.com/t/please-help-me-understand-the-style-change-of-admin-page-in-6-1/45736/2 */

/* Restore side-by-side labels and values in Django admin change forms (Django 6.1+)
   Ticket #34643 wrapped each field inside a `<div class="flex-container">` with `flex-direction: column`.
   We turn that field container into a 2-column grid: column 1 for the label, column 2 for the widget/value. */

/* Single-field rows: style the field flex-container as a 2-column grid */
.aligned .form-row:not(.form-multiline) > .flex-container:not(.checkbox-row) {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    column-gap: 1rem;
    row-gap: 0.35rem;
    align-items: start;
}

/* Label: Column 1, Row 1 (fixed 160px width, left-aligned) */
.aligned .form-row:not(.form-multiline) > .flex-container:not(.checkbox-row) > label {
    grid-column: 1;
    grid-row: 1;
    text-align: left;
    padding-top: 0.35rem;
    margin: 0;
}

/* Field widget / value: Column 2, Row 1 (rendered on the same line as the label) */
.aligned .form-row:not(.form-multiline) > .flex-container:not(.checkbox-row) > :not(label):not(.help):not(.errorlist) {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    max-width: 100%;
}

/* Help text & validation errors: Column 2 (aligned underneath the widget) */
.aligned .form-row:not(.form-multiline) > .flex-container:not(.checkbox-row) > .help,
.aligned .form-row:not(.form-multiline) > .flex-container:not(.checkbox-row) > .errorlist {
    grid-column: 2;
    margin: 0;
}

/* Multi-field rows (.fieldBox): keep each field's label and input side-by-side */
.aligned .form-row .fieldBox:not(.checkbox-row) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.5rem;
    row-gap: 0.35rem;
    align-items: start;
}

.aligned .form-row .fieldBox:not(.checkbox-row) > label {
    grid-column: 1;
    grid-row: 1;
    padding-top: 0.35rem;
    margin: 0;
}

.aligned .form-row .fieldBox:not(.checkbox-row) > :not(label):not(.help):not(.errorlist) {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    max-width: 100%;
}

.aligned .form-row .fieldBox:not(.checkbox-row) > .help,
.aligned .form-row .fieldBox:not(.checkbox-row) > .errorlist {
    grid-column: 2;
    margin: 0;
}

/* Responsive mobile breakpoint: stack vertically on narrow screens */
@media (max-width: 767px) {
    .aligned .form-row:not(.form-multiline) > .flex-container:not(.checkbox-row),
    .aligned .form-row .fieldBox:not(.checkbox-row) {
        grid-template-columns: 1fr;
        row-gap: 0.25rem;
    }

    .aligned .form-row:not(.form-multiline) > .flex-container:not(.checkbox-row) > label,
    .aligned .form-row .fieldBox:not(.checkbox-row) > label {
        grid-column: 1;
        grid-row: auto;
        text-align: left;
        padding-top: 0;
    }

    .aligned .form-row:not(.form-multiline) > .flex-container:not(.checkbox-row) > :not(label):not(.help):not(.errorlist),
    .aligned .form-row .fieldBox:not(.checkbox-row) > :not(label):not(.help):not(.errorlist) {
        grid-column: 1;
        grid-row: auto;
        justify-self: auto;
    }

    .aligned .form-row:not(.form-multiline) > .flex-container:not(.checkbox-row) > .help,
    .aligned .form-row .fieldBox:not(.checkbox-row) > .help,
    .aligned .form-row:not(.form-multiline) > .flex-container:not(.checkbox-row) > .errorlist,
    .aligned .form-row .fieldBox:not(.checkbox-row) > .errorlist {
        grid-column: 1;
        grid-row: auto;
    }
}