// ============================================================================
// Pay Period — responsive layout
// ----------------------------------------------------------------------------
// What was actually broken (see prior fix): inline flex + a negative margin
// hack overlapped the two field columns, and every field's own LabelWidth
// (17 / 150 / 220 / 230 / 328 from the metaform JSON) meant nothing lined up
// even without the negative margin. That was replaced with a real 2-column
// CSS Grid and one consistent forced label width.
//
// This pass makes that same layout respond across screen sizes instead of
// only looking right at one width:
//   >= 1400px : 2 columns, label sits beside the field (220px label column)
//   1100-1399px : 2 columns, narrower label column (170px) so fields don't
//                 get squeezed too thin
//   700-1099px  : 1 column, label still beside the field (full width helps)
//   < 700px     : 1 column, label stacks ABOVE the field instead of beside
//                 it — a fixed side-by-side label column stops working once
//                 the viewport itself is narrower than label+field need
//
// NOTE ON ::ng-deep SELECTORS BELOW:
// I don't have access to the compiled internal markup of the gb-* library,
// so the selectors for the internal label/input split are a best guess
// (.gb-field-label / .gb-field-control / .gb-input-col, etc). Confirm the
// real class names in devtools on one field and adjust if they don't match.
// The structural fixes (grid, breakpoints, stacking) are correct regardless
// of the exact selector names once you swap them in.
// ============================================================================

:host {
    --pp-gap-row: 18px;
    --pp-gap-col: 32px;
    --pp-label-col-width: 220px;
    --pp-label-color: #55606b;
    --pp-border: #e0e3e8;

    display: block;
}

:host-context(.dark-theme) {
    --pp-label-color: #b7bec7;
    --pp-border: #3a3f4a;
}

.FormOverView {
    padding: 16px 20px 20px;

    @media (max-width: 700px) {
        padding: 12px 14px 16px;
    }
}

.payperiod-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--pp-gap-col);
    align-items: start;

    @media (max-width: 1399px) {
        --pp-label-col-width: 170px;
    }

    @media (max-width: 1099px) {
        grid-template-columns: 1fr;
        row-gap: 4px;
    }

    @media (max-width: 700px) {
        --pp-gap-row: 14px;
    }
}

.payperiod-group-a,
.payperiod-group-b {
    display: flex;
    flex-direction: column;
    gap: var(--pp-gap-row);
    min-width: 0; // let long field content wrap/shrink instead of overflowing the column
}

// ----------------------------------------------------------------------------
// Internal gb-* overrides
// ----------------------------------------------------------------------------
::ng-deep {
    .payperiod-group-a, .payperiod-group-b {
        gb-input, gb-date, gb-newpicklist, gb-combobox, gb-textarea,
        gb-checkbox, gb-radiobutton {
            width: 100% !important;
            max-width: 100% !important;
            margin-left: 0 !important; // neutralize any inherited negative-margin habits
            display: flex !important;
            align-items: flex-start;
            flex-wrap: nowrap;

            @media (max-width: 699px) {
                flex-direction: column; // label stacks above field once the viewport is this narrow
                align-items: stretch;
            }
        }

        .gb-field-label,
        .field-label,
        label {
            flex: 0 0 var(--pp-label-col-width);
            width: var(--pp-label-col-width);
            max-width: var(--pp-label-col-width);
            color: var(--pp-label-color);
            font-size: 13px;
            font-weight: 600;

            @media (max-width: 699px) {
                flex: 0 0 auto;
                width: 100%;
                max-width: none;
                margin-bottom: 4px;
            }
        }

        .gb-field-description,
        .field-description,
        [class*="description"] {
            flex: 0 0 var(--pp-label-col-width);
            width: var(--pp-label-col-width);
            max-width: var(--pp-label-col-width);
            font-size: 12px;
            line-height: 1.4;
            color: var(--pp-label-color);
            opacity: 0.85;

            @media (max-width: 699px) {
                flex: 0 0 auto;
                width: 100%;
                max-width: none;
                margin-bottom: 6px;
            }
        }

        // The input/control side of each field — fills whatever space the
        // label column didn't take, at any breakpoint.
        .gb-field-control,
        .field-control,
        input, textarea, .mat-select, .mat-mdc-select {
            flex: 1 1 auto;
            width: auto !important;
            max-width: none !important;
            min-width: 0;

            @media (max-width: 699px) {
                width: 100% !important;
            }
        }
    }

    // Checkboxes/radios read oddly with a wide empty label column beside a
    // tiny control — let them sit closer together instead of stretching.
    .payperiod-group-a, .payperiod-group-b {
        gb-checkbox, gb-radiobutton {
            @media (min-width: 700px) {
                align-items: center;
            }
        }
    }
}