// ============================================================================
// 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;
      }
    }
  }
}