.picklist-row {
  display: flex;
  align-items: center;
}

::ng-deep .adjustmentreadonly .Mat_Form_Field .mdc-text-field {
  background-color: #eeeeee !important;
}

.FormOverView.scrollbar {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100vh;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 24px;
  box-sizing: border-box;
  width: 100%;

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 3px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }
}


:host ::ng-deep .FormOverView {
  gb-date,
  gb-time,
  gb-combobox,
  gb-newpicklist,
  gb-input,
  gb-textarea {
    width: 280px !important;   
    max-width: 100% !important; 
    box-sizing: border-box !important;
    flex: none !important;     
  }

  .mat-mdc-form-field,
  .mat-mdc-select,
  .mat-mdc-form-field-infix,
  input.mat-mdc-input-element {
    width: 100% !important;     
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 768px) {
  div[style*="display: flex;"] {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .FormOverView,
  .picklist-row {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .picklist-row > * {
    margin-left: 0 !important;
  }

  button[mat-raised-button] {
    width: auto !important;
  }

  .FormOverView.scrollbar {
    max-height: 100vh !important;
    height: auto !important;
  }
}

@media (min-width: 1024px) {
  .picklist-row .adjustmentreadonly {
    margin-left: 10px !important;
    margin-top: 1px !important;
  }

  .FormOverView.scrollbar {
    max-height: 90vh !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  // Inner field-pairs (date+time, combobox+readonly twin, etc.) go row-wise.
  :host ::ng-deep div[style*="display: flex;"],
  :host ::ng-deep .picklist-row {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }

  // The form itself must stay a vertical column — this was previously
  // forced into `row`, which caused Reason / Remarks / the button to
  // wrap onto the same line and overlap each other.
  :host ::ng-deep .FormOverView {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  // Fields that sit directly under .FormOverView (not inside a
  // .picklist-row wrapper) — Reason picklist, Remarks textarea, the
  // button — should take their own full-width row, not float inline
  // next to whatever comes before them.
  :host ::ng-deep .FormOverView > gb-newpicklist,
  :host ::ng-deep .FormOverView > gb-textarea,
  :host ::ng-deep .FormOverView > button[mat-raised-button] {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    margin-top: 12px !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
  }

  :host ::ng-deep .picklist-row > *:not(:first-child) {
    margin-left: 10px !important;
  }

  :host ::ng-deep .picklist-row .adjustmentreadonly {
    margin-left: 10px !important;
    margin-top: 1px !important;
  }

  :host ::ng-deep button[mat-raised-button] {
    width: auto !important;
  }

  :host ::ng-deep .FormOverView.scrollbar {
    max-height: 95vh !important;
  }
}

@media (max-width: 767px) {
  :host ::ng-deep .FormOverView gb-date,
  :host ::ng-deep .FormOverView gb-time,
  :host ::ng-deep .FormOverView gb-combobox,
  :host ::ng-deep .FormOverView gb-newpicklist,
  :host ::ng-deep .FormOverView gb-input,
  :host ::ng-deep .FormOverView gb-textarea {
    display: block !important;
    margin-left: 0 !important;
  }

  :host ::ng-deep .adjustmentreadonly[style*="margin-left"] {
    margin-left: 0 !important;
    margin-top: 8px !important;
  }

  :host ::ng-deep div[style*="display: flex;"] > *:not(:first-child) {
    margin-top: 8px !important;
  }

  :host ::ng-deep .FormOverView.scrollbar {
    max-height: 100vh !important;
    height: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 24px !important;
  }

  :host ::ng-deep .FormOverView gb-textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  :host ::ng-deep .FormOverView gb-textarea .mat-mdc-form-field,
  :host ::ng-deep .FormOverView gb-textarea .Mat_Form_Field,
  :host ::ng-deep .FormOverView gb-textarea .Description_Field {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  :host ::ng-deep .FormOverView gb-textarea .mat-mdc-text-field-wrapper,
  :host ::ng-deep .FormOverView gb-textarea .mat-mdc-form-field-flex,
  :host ::ng-deep .FormOverView gb-textarea .mat-mdc-form-field-infix {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  // Override the textarea's own inline width (313px)
  :host ::ng-deep .FormOverView gb-textarea textarea {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    resize: none !important;
  }

  // --- Reason picklist search/lightbox: fit content instead of
  // overflowing / overlapping neighbouring fields on mobile.
  // NOTE: gb-newpicklist's internal dropdown/lightbox markup wasn't
  // included in the files shared, so this targets the common ng-select
  // structure used elsewhere in this codebase (see newpicklist.component
  // .scss). If gb-newpicklist renders different class names internally,
  // share that component's html/scss and I'll target the exact selectors.
  :host ::ng-deep .FormOverView gb-newpicklist {
    .ng-dropdown-panel {
      width: 100% !important;
      max-width: 95vw !important;
      min-width: 0 !important;
      left: 0 !important;
      right: auto !important;
      box-sizing: border-box !important;
    }

    .ng-select-container {
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }

    .ng-dropdown-panel .ng-input,
    .ng-dropdown-panel .ng-input input {
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }

    .ng-dropdown-panel .ng-dropdown-panel-items {
      max-width: 100% !important;
      overflow-x: hidden !important;
    }
  }
}