.Load {
  width: 48px;
  height: 40px;
  display: flex;                 /* center align */
  align-items: center;
  justify-content: center;
  border-radius: 8px;            /* rounded corners */
  background-color: #f3eaff;     /* light lavender shade */
  box-shadow: 0px 2px 4px rgba(0,0,0,0.1); /* subtle shadow */
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.Load:hover {
  background-color: #e0d4fa;     /* darker shade on hover */
  transform: translateY(-1px);   /* small lift */
}

.Load mat-icon {
  color: #333;       /* icon color */
  font-size: 20px;   /* icon size */
}
/* ============================
   TABLET VIEW (≤1024px)
============================ */
@media screen and (max-width: 1024px) {

  .FormOverView {
    overflow-x: hidden;
    max-width: 100%;
    box-sizing: border-box;
    padding-left: 12px;
    padding-right: 12px;

    * {
      box-sizing: border-box;
    }

    /* top row of gb-newpicklist / gb-date / gb-input fields → vertical stack */
    > div:first-child {
      display: flex !important;
      flex-direction: column !important;
      flex-wrap: nowrap !important;
      gap: 14px;
      width: 100%;
      max-width: 100%;

      > div {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
    }

    gb-input,
    gb-newpicklist,
    gb-combobox,
    gb-textarea,
    gb-date,
    gb-radiobutton,
    gb-formaction,
    [class*="gb-"],
    input,
    select,
    textarea,
    button {
      display: block;
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0;
      box-sizing: border-box;
    }

    label,
    span,
    small,
    .mat-mdc-form-field-label,
    .mdc-floating-label,
    .mat-mdc-select-value,
    .mat-mdc-select-value-text {
      white-space: normal !important;
      word-break: break-word;
      overflow: visible !important;
      text-overflow: unset !important;
      max-width: 100%;
    }

    img {
      max-width: 100%;
      height: auto;
    }
  }

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

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

    .mat-mdc-form-field-icon-suffix,
    .mat-mdc-form-field-icon-prefix,
    .mat-mdc-select-arrow-wrapper,
    .mat-datepicker-toggle,
    .mat-mdc-form-field-error,
    .mat-mdc-form-field-hint {
      overflow: visible !important;
      white-space: normal !important;
      flex-shrink: 0;
    }

    .mat-mdc-form-field-subscript-wrapper,
    .mat-mdc-form-field-error-wrapper,
    .mat-mdc-form-field-hint-wrapper {
      width: 100% !important;
      max-width: 100% !important;
      white-space: normal !important;
      word-break: break-word;
      box-sizing: border-box;
    }

    .cdk-overlay-pane,
    .mat-mdc-select-panel,
    .mat-autocomplete-panel {
      max-width: 95vw !important;
      box-sizing: border-box !important;
    }

    gb-input,
    gb-newpicklist,
    gb-combobox,
    gb-textarea,
    gb-date,
    gb-radiobutton {
      > div,
      > span {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
      }
    }
  }

  .select-indent-btn {
    width: 100%;
    max-width: 100%;
    height: 44px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: normal;
    overflow: hidden;

    i,
    mat-icon,
    .material-icons {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
    }
  }

  /* mm-detail-card fields → vertical stack instead of 4-col grid */
  .mm-detail-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch;
    gap: 14px;
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box;
    padding: 14px 18px;
  }

  .mm-field {
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal;

    label {
      white-space: normal;
      margin-right: 0;
    }

    span,
    input {
      text-align: left !important;
      white-space: normal;
      width: 100% !important;
      max-width: 100% !important;
    }

    input {
      box-sizing: border-box;
    }
  }

  .mm-detail-card > .load-btn {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    white-space: nowrap;
    box-sizing: border-box;
  }

  gb-formgrid {
    display: block;
    width: 100% !important;
    max-width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
  }
}

/* ============================
   MOBILE VIEW (≤600px)
============================ */
@media screen and (max-width: 600px) {

  .FormOverView {
    padding-left: 8px;
    padding-right: 8px;

    > div:first-child {
      gap: 10px;
    }
  }

  .mm-detail-card {
    padding: 12px 14px;
    gap: 10px;
  }

  .mm-field {
    label {
      font-size: 11px;
    }
    span {
      font-size: 14px;
    }
  }

  .select-indent-btn {
    font-size: 13px;
    padding: 8px 12px;
  }

  .mm-detail-card > .load-btn {
    font-size: 13px;
  }
}

/* ============================
   SMALL MOBILE (≤375px)
============================ */
@media screen and (max-width: 375px) {

  .FormOverView {
    padding-left: 5px;
    padding-right: 5px;
  }

  .mm-detail-card {
    padding: 10px 12px;
    gap: 8px;
  }

  .mm-field {
    label {
      font-size: 10px;
    }
    span {
      font-size: 13px;
    }
  }

  .select-indent-btn {
    font-size: 11px;
    padding: 6px 10px;
  }

  .mm-detail-card > .load-btn {
    font-size: 11px;
  }
}