.FormMatSection {
  // background-color: green;
  // background-color: green;
  margin: 0px 8px;
  padding: 10px;
  border-radius: 8px;
  width: 100%;
  height: 525px;
  overflow: auto;
  //  height: var(--screenheight);
  // min-height: var(--screenheight);
  // max-height: var(--screenheight);
}

.FormTabScroll {
  // height: calc(100vh - 195px); /* Adjust as needed */
  // overflow-y: auto;
  padding: 10px;
  // background-color: white; /* Optional */
}

@media (max-width: 820px) {
  :host ::ng-deep {

    .FormOverView,
    .FormTabScroll,
    .FormsTabGroup,
    .mat-mdc-tab-body-content,
    .mat-tab-body-content {
      overflow-x: hidden !important;
      max-width: 100vw;
    }

    .FormOverView>div {
      display: flex;
      flex-direction: column;
      gap: 12px;
      // Do NOT force width:100% here — children have natural widths.
      max-width: 100%;
    }

    .adjacentField {
      // Do NOT force width:100% — at 401–820px keep natural component width.
      // The ≤400px block overrides to width:100% for 360px screens.
      max-width: 100% !important;
      min-width: 0 !important;
      box-sizing: border-box;
    }

    // Description: constrain so it doesn't span the full content area
    .FormOverView>gb-input {
      max-width: 480px !important;
      min-width: 0 !important;
      box-sizing: border-box !important;
    }

    .FormsTabGroup {
      width: 100%;

      .mat-mdc-tab-header,
      .mat-tab-header {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }

      .mat-mdc-tab-label,
      .mat-tab-label {
        min-width: unset !important;
        padding: 0 12px !important;
      }
    }

    .FormTabScroll {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 10px 8px;
      width: 100%;
      box-sizing: border-box;
    }

    .FormTabScroll>gb-newpicklist,
    .FormTabScroll>gb-input {
      // Do NOT force width:100% here — at wider mobile (400px+) fields should
      // keep their natural component width. Only max-width prevents overflow.
      max-width: 100% !important;
      display: block;
      box-sizing: border-box;
    }

    // ---- BUG 1 FIX: clamp oversized inline widths; do NOT force 100% here —
    // at wider mobile (686px etc.) fields should keep natural component width.
    // The max-width:100% is enough to prevent horizontal overflow.
    mat-form-field,
    .mat-form-field,
    .mat-mdc-form-field,
    .mat-mdc-form-field-subscript-wrapper,
    .mat-mdc-form-field-infix,
    .Mat_Form_Field,
    [style*="width: 920px"],
    [style*="width: 320px"],
    [style*="min-width: 320px"] {
      min-width: 0 !important;
      max-width: 100% !important;
      width: 100% !important;
      box-sizing: border-box !important;
    }

    // text-field-wrapper must be 100% so its flex child (.mat-mdc-form-field-flex)
    // spans the full field width — otherwise justify-content:space-between
    // cannot push the icon to the far right end.
    .mat-mdc-text-field-wrapper {
      display: flex !important;
      box-sizing: border-box !important;
    }


    // ---- Stack label+control rows, EXCLUDING the icon/input flex row ----
    .FormTabScroll gb-newpicklist,
    .FormTabScroll gb-input,
    .FormTabScroll gb-newpicklist div:not(.mat-mdc-form-field-flex):not(.mat-mdc-form-field-flex *),
    .FormTabScroll gb-input div:not(.mat-mdc-form-field-flex):not(.mat-mdc-form-field-flex *) {
      display: flex !important;
      flex-direction: column !important;
      align-items: flex-start !important;
      // max-width only — do not stretch to 100% at wider mobile viewports
      max-width: 100% !important;
      min-width: 0 !important;
      box-sizing: border-box !important;
    }

    // ---- ARROW FIX: absolute position — works regardless of Angular Material's
    // inline-flex on .mdc-text-field. The wrapper already has position:relative
    // so right:8px reliably pins the icon to the far right border edge.
    .mat-mdc-form-field-flex {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      width: 100% !important;
      max-width: 100% !important;
      position: relative !important;
      box-sizing: border-box !important;
    }

    // Infix takes all horizontal space; right padding reserves room for icon
    .mat-mdc-form-field-flex .mat-mdc-form-field-infix {
      flex: 1 1 auto !important;
      min-width: 0 !important;
      width: 100% !important;
      padding-right: 36px !important;
      box-sizing: border-box !important;
    }

    // Arrow icon — absolute, pinned to right edge of the field
    gb-newpicklist .mat-mdc-form-field-flex mat-icon,
    gb-newpicklist .mat-mdc-form-field-flex .mat-icon,
    gb-newpicklist .mat-mdc-form-field-icon-suffix mat-icon,
    gb-newpicklist .mat-mdc-form-field-icon-suffix .mat-icon {
      position: absolute !important;
      right: 8px !important;
      top: 50% !important;
      transform: translateY(-50%) !important;
      z-index: 2 !important;
      pointer-events: auto !important;
      margin: 0 !important;
      flex-shrink: 0 !important;
    }

    // Suffix container — must not interfere with absolute icon
    .mat-mdc-form-field-icon-suffix {
      position: static !important;
      width: 0 !important;
      overflow: visible !important;
      padding: 0 !important;
    }

    // Keep legacy mat-select support too, in case other tabs use it
    .mat-mdc-select-arrow-wrapper,
    .mat-mdc-form-field-icon-suffix,
    .mat-mdc-select-trigger,
    .mat-mdc-select-value {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: flex-end;
      width: auto !important;
    }

    .mat-mdc-select-trigger {
      width: 100% !important;
      justify-content: space-between;
    }

    // ---- BUG 3 FIX: kill inline margin-bottom:18px + reserved hint height ----
    [style*="margin-bottom: 18px"] {
      margin-bottom: 6px !important;
    }

    .mat-mdc-form-field-subscript-wrapper {
      height: auto !important;
      min-height: 0 !important;
    }

    gb-newpicklist,
    gb-input {
      height: auto !important;
    }

    .FormTabScroll select,
    .FormTabScroll input,
    .FormTabScroll .mat-mdc-select,
    .FormTabScroll .mat-select,
    .FormTabScroll [class*="dropdown"],
    .FormTabScroll [class*="picklist"] {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      margin-left: 0 !important;
    }

    .FormMatSection {
      margin: 0 4px;
      padding: 8px;
      overflow-x: hidden;
    }
  }
}

// ---- Small mobile (360px and similar, up to 400px) ----
@media (max-width: 400px) {
  :host ::ng-deep {

    // Tighter container spacing for tiny screens
    .FormMatSection {
      margin: 0 2px !important;
      padding: 6px !important;
      overflow-x: hidden;
    }

    .FormTabScroll {
      gap: 6px !important;
      padding: 8px 4px !important;
      width: 100% !important;
      box-sizing: border-box !important;
    }

    // Shrink tab labels so all tabs fit without horizontal scroll
    .FormsTabGroup {
      width: 100% !important;

      .mat-mdc-tab-header,
      .mat-tab-header {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }

      .mat-mdc-tab-label,
      .mat-tab-label {
        min-width: unset !important;
        padding: 0 8px !important;
        font-size: 12px !important;
      }
    }

    // Every field stretches to full width
    .adjacentField,
    .FormTabScroll>gb-newpicklist,
    .FormTabScroll>gb-input {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      display: block !important;
      box-sizing: border-box !important;
    }

    // Kill any hard-coded fixed widths from inline styles
    mat-form-field,
    .mat-form-field,
    .mat-mdc-form-field,
    .mat-mdc-text-field-wrapper,
    .mat-mdc-form-field-infix,
    .Mat_Form_Field,
    [style*="width: 920px"],
    [style*="width: 320px"],
    [style*="min-width: 320px"] {
      width: 100% !important;
      min-width: 0 !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }

    // text-field-wrapper full width — same fix as mobile
    .mat-mdc-text-field-wrapper {
      width: 100% !important;
      display: flex !important;
      box-sizing: border-box !important;
    }

    // Arrow icon — absolute position (same strategy as 767px block)
    .mat-mdc-form-field-flex {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      width: 100% !important;
      max-width: 100% !important;
      position: relative !important;
      box-sizing: border-box !important;
    }

    .mat-mdc-form-field-flex .mat-mdc-form-field-infix {
      flex: 1 1 auto !important;
      min-width: 0 !important;
      width: 100% !important;
      padding-right: 36px !important;
      box-sizing: border-box !important;
    }

    gb-newpicklist .mat-mdc-form-field-flex mat-icon,
    gb-newpicklist .mat-mdc-form-field-flex .mat-icon,
    gb-newpicklist .mat-mdc-form-field-icon-suffix mat-icon,
    gb-newpicklist .mat-mdc-form-field-icon-suffix .mat-icon {
      position: absolute !important;
      right: 8px !important;
      top: 50% !important;
      transform: translateY(-50%) !important;
      z-index: 2 !important;
      pointer-events: auto !important;
      margin: 0 !important;
      flex-shrink: 0 !important;
    }

    .mat-mdc-form-field-icon-suffix {
      position: static !important;
      width: 0 !important;
      overflow: visible !important;
      padding: 0 !important;
    }

    // Hint/subscript area — collapse reserved space
    .mat-mdc-form-field-subscript-wrapper {
      height: auto !important;
      min-height: 0 !important;
    }

    [style*="margin-bottom: 18px"] {
      margin-bottom: 4px !important;
    }

    gb-newpicklist,
    gb-input {
      height: auto !important;
    }

    .FormTabScroll select,
    .FormTabScroll input,
    .FormTabScroll .mat-mdc-select,
    .FormTabScroll .mat-select,
    .FormTabScroll [class*="dropdown"],
    .FormTabScroll [class*="picklist"] {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      margin-left: 0 !important;
    }

    .FormOverView>div {
      display: flex !important;
      flex-direction: column !important;
      gap: 8px !important;
      width: 100% !important;
    }

    // ---- BUG FIX: Override the 480px max-width from the 820px block for tiny screens
    .FormOverView>gb-input {
      max-width: 300px !important;
      min-width: 0 !important;
      box-sizing: border-box !important;
    }
  }
}

// ---- Tablet view (768px – 1024px) ----
// Goal: prevent horizontal overflow + fix arrow position.
// We do NOT force field widths to 100% here — that caused the
// container to stretch edge-to-edge. Field widths come from PC styles.
@media (min-width: 821px) and (max-width: 1024px) {
  :host ::ng-deep {

    // 1. Prevent horizontal overflow on all scrollable regions
    .FormOverView,
    .FormTabScroll,
    .FormsTabGroup,
    .mat-mdc-tab-body-content,
    .mat-tab-body-content {
      overflow-x: hidden !important;
      max-width: 100% !important;
      box-sizing: border-box;
    }

    // 2. Clamp only oversized inline widths (920px etc.) — keep field
    //    widths natural so the container does NOT stretch to full panel width
    [style*="width: 920px"],
    [style*="min-width: 920px"] {
      width: auto !important;
      max-width: 100% !important;
      min-width: 0 !important;
      box-sizing: border-box !important;
    }

    // 3. Tab header — allow horizontal scroll if tabs overflow
    .FormsTabGroup {

      .mat-mdc-tab-header,
      .mat-tab-header {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }

      .mat-mdc-tab-label,
      .mat-tab-label {
        min-width: unset !important;
        padding: 0 14px !important;
      }
    }

    // 4. FormMatSection — light padding adjustment, no width override
    .FormMatSection {
      margin: 0 6px;
      padding: 10px;
      overflow-x: hidden;
    }

    // 6. Description field — constrain width to match other fields
    .FormOverView>gb-input {
      max-width: 480px !important;
      width: 100% !important;
      box-sizing: border-box !important;
    }

    // 5. Arrow icon pinned to the FAR RIGHT end of the picklist
    //    text-field-wrapper must be display:flex so form-field-flex
    //    can fill it and space-between can push the icon to the end.
    .mat-mdc-text-field-wrapper {
      display: flex !important;
      box-sizing: border-box !important;
    }

    .mat-mdc-form-field-flex {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: space-between !important;
      width: 100% !important;
      box-sizing: border-box !important;
    }

    .mat-mdc-form-field-flex .mat-mdc-form-field-infix {
      flex: 1 1 auto !important;
      min-width: 0 !important;
    }

    .mat-mdc-form-field-flex mat-icon,
    .mat-mdc-form-field-flex .mat-icon {
      flex-shrink: 0 !important;
      margin-left: auto !important;
      order: 2;
    }

    .mat-mdc-form-field-icon-suffix {
      flex-shrink: 0 !important;
      margin-left: auto !important;
      display: flex !important;
      align-items: center !important;
    }
  }
}

/* Design Master picklist only: override the fixed widths emitted by the
   shared picker when this screen is viewed on a tablet or phone. */
@media (max-width: 1024px) {

  :host ::ng-deep gb-newpicklist .Mat_Form_Field,
  :host ::ng-deep gb-newpicklist .ExpandedViewDescription,
  :host ::ng-deep gb-newpicklist .ExpandedViewWrapper {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* The picklist results are rendered in a CDK overlay, outside this
     component's DOM. :has(gb-picklistgrid) keeps the rule limited to this
     picker dialog rather than changing ordinary Design Master dialogs. */
  ::ng-deep .cdk-overlay-pane:has(gb-picklistgrid) {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
  }

  ::ng-deep .cdk-overlay-pane:has(gb-picklistgrid) .mat-mdc-dialog-surface {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    height: min(85dvh, 600px) !important;
    max-height: calc(100dvh - 24px) !important;
    overflow: hidden !important;
  }

  ::ng-deep .cdk-overlay-pane:has(gb-picklistgrid) .Container {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    height: calc(85dvh - 56px) !important;
    padding-right: calc(var(--space-l) * 1px) !important;
    padding-left: calc(var(--space-l) * 1px) !important;
    overflow: hidden !important;
  }

  ::ng-deep .cdk-overlay-pane:has(gb-picklistgrid) .search-archive-row,
  ::ng-deep .cdk-overlay-pane:has(gb-picklistgrid) .gridcontainer,
  ::ng-deep .cdk-overlay-pane:has(gb-picklistgrid) #PicklistGrid,
  ::ng-deep .cdk-overlay-pane:has(gb-picklistgrid) #PicklistGrid .ag-root-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  ::ng-deep .cdk-overlay-pane:has(gb-picklistgrid) #PicklistGrid .ag-body-viewport,
  ::ng-deep .cdk-overlay-pane:has(gb-picklistgrid) #PicklistGrid .ag-header-viewport {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 600px) {
  :host ::ng-deep gb-newpicklist .ExpandedViewWrapper {
    width: 100% !important;
  }

  :host ::ng-deep gb-newpicklist .ExpandedViewDescription {
    width: 100% !important;
  }

  ::ng-deep .cdk-overlay-pane:has(gb-picklistgrid) .search-archive-row {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    gap: calc(var(--space-s) * 1px) !important;
  }

  ::ng-deep .cdk-overlay-pane:has(gb-picklistgrid) .search-bar-container {
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  ::ng-deep .cdk-overlay-pane:has(gb-picklistgrid) .archive-toggle-mode,
  ::ng-deep .cdk-overlay-pane:has(gb-picklistgrid) .inactive-toggle-mode {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  ::ng-deep .cdk-overlay-pane:has(gb-picklistgrid) #PicklistGrid {
    height: calc(85dvh - 190px) !important;
    max-height: calc(85dvh - 190px) !important;
  }
}