/* ============================
        HOST WRAPPER
============================ */
:host {
  display: block;
  height: calc(100vh - 100px);
  overflow: hidden;
}

/* ============================
        FORM LAYOUT
============================ */
form {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* ============================
        FIXED HEADER SECTION
============================ */
.fixed-header-section {
  flex: 0 0 auto;
  background-color: #ffffff;
  border-bottom: 1px solid #e5e5e5;
}

/* ============================
        FORM ACTION HEADER
============================ */
gb-formaction {
  display: block;
}

/* ============================
        EMPLOYEE INPUT
============================ */
.fixed-top-field {
  padding: 2px 16px;
}

.fixed-top-field gb-input {
  display: block;
}

/* ============================
        TABS HEADER
============================ */
.tab-header {
  display: flex;
  gap: 20px;
  padding: 2px 16px 6px 16px;
  align-items: center;
  white-space: nowrap;
}

/* ============================
        TAB BUTTON
============================ */
.tab-btn {
  background: transparent;
  border: none;
  font-size: 13px;
  padding: 2px 2px;
  cursor: pointer;
  color: var(--mat-sys-outline);
  font-weight: 500;
  position: relative;
  transition: 0.2s ease;
}

/* ============================
        ACTIVE TAB
============================ */
.tab-btn.active {
  color: var(--action-primary-default);
  font-weight: 600;
}

/* ============================
    ACTIVE TAB UNDERLINE
============================ */
.tab-btn.active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 2px;
  background: var(--action-primary-default);
  border-radius: 10px;
}

.tab-btn:hover {
  color: var(--action-primary-default);
}

/* ============================
      FORM OVERVIEW (SCROLLABLE)
============================ */
.FormOverView {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 24px;
  background-color: #f9f9f9;
  min-height: 0;
}

/* ============================
        TAB CONTENT
============================ */
.tab-section {
  width: 100%;
  display: block; 
}

/* ============================
        SECTION HEADER
============================ */
.section-header {
  width: 100%;
  text-align: left;
  margin: 24px 0 16px 0;
  padding: 8px 0;

  h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--action-primary-default);
    letter-spacing: 0.3px;
  }
}




@media screen and (max-width: 991px) {

  :host ::ng-deep {

    div[style*="display: flex"][style*="margin-bottom: 18px"] {
      flex-direction: column !important;
      align-items: flex-start !important;
      width: 100% !important;
    }

    div[style*="margin-right: 40px"] {
      margin-right: 0 !important;
      width: auto !important;
    }

    .ExpandedViewLabel {
      display: block !important;
      width: auto !important;
      margin: 0 0 6px 0 !important;
      white-space: normal !important;
    }

    .ExpandedViewDescription {
      display: block !important;
      width: 320px !important;
      max-width: 100% !important;
      margin: 0 0 6px 0 !important;
      white-space: normal !important;
    }

    gb-input,
    gb-combobox,
    gb-date,
    gb-newpicklist,
    gb-checkbox,
    gb-radiobutton {
      display: block !important;
      width: 320px !important;
      max-width: 100% !important;
      min-width: 0 !important;
      margin: 0 0 14px 0 !important;
    }

    gb-input>div,
    gb-combobox>div,
    gb-date>div,
    gb-newpicklist>div,
    gb-checkbox>div,
    gb-radiobutton>div {
      width: 100% !important;
      margin-right: 0 !important;
    }

    mat-form-field,
    .mat-mdc-form-field {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
    }

    .mat-mdc-form-field-flex,
    .mat-mdc-text-field-wrapper,
    .mdc-text-field {
      display: flex !important;
    }

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

    /* Keep the picklist input and its dropdown arrow in the same row.
       The mobile input rule below must not make the input wider than the
       available space, otherwise the sibling mat-icon is pushed outside the
       clipped Material text-field wrapper. */
    gb-newpicklist .mat-mdc-form-field-infix > span[style*="display: inline-flex"] {
      display: flex !important;
      align-items: center !important;
      width: 100% !important;
      min-width: 0 !important;
      box-sizing: border-box !important;
    }

    gb-newpicklist .mat-mdc-form-field-infix > span[style*="display: inline-flex"] > input {
      width: auto !important;
      min-width: 0 !important;
      flex: 1 1 auto !important;
    }

    gb-newpicklist .mat-mdc-form-field-infix > span[style*="display: inline-flex"] > mat-icon {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      flex: 0 0 24px !important;
      width: 24px !important;
      min-width: 24px !important;
      height: 24px !important;
      margin: 0 !important;
      visibility: visible !important;
      opacity: 1 !important;
      color: var(--mat-sys-inverse-surface) !important;
    }

    .mat-mdc-form-field-icon-suffix,
    .mat-mdc-select-arrow-wrapper,
    .mat-select-arrow-wrapper {
      flex-shrink: 0 !important;
    }

    gb-input,
    gb-combobox,
    gb-date,
    gb-newpicklist,
    gb-checkbox,
    gb-radiobutton,
    mat-form-field,
    .mat-mdc-form-field,
    input,
    .mat-mdc-input-element {
      box-sizing: border-box !important;
    }

    input,
    .mat-mdc-input-element {
      text-overflow: ellipsis !important;
      font-size: 13px !important;
    }

    input::placeholder,
    .mat-mdc-input-element::placeholder {
      opacity: 1 !important;
      visibility: visible !important;
      color: inherit;
    }

    .tab-header {
      overflow-x: auto !important;
      -webkit-overflow-scrolling: touch !important;
      white-space: nowrap;
      scrollbar-width: none;
    }

    .tab-header::-webkit-scrollbar {
      display: none;
    }

    .tab-btn {
      flex: 0 0 auto;
    }

    .FormOverView {
      padding: 12px !important;
      overflow-x: hidden !important;
    }

    /* ---------- FIX: Employee Secret Key eye icon detaches from input ----------
       Root cause: the icon is switched to position:absolute (to override the
       desktop negative-margin trick), but its parent wrapper
       (div[style*="align-items: center"]) was never given position:relative.
       With no positioned ancestor, "absolute" resolves against a much
       higher-up containing block (viewport/document), so the icon renders
       detached from the input instead of pinned to its corner. Adding
       position:relative here gives it the correct anchor. Icon size is
       also locked to explicit px (not inherited font-size) so it renders
       identically at every breakpoint. ---------- */
    div[style*="align-items: center"] {
      position: relative !important;
      align-items: center !important;
      width: 320px !important;
      max-width: 100% !important;
    }

    div[style*="align-items: center"] gb-input {
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 !important;
    }

    div[style*="align-items: center"] mat-icon {
      position: absolute !important;
      top: 50% !important;
      right: 12px !important;
      left: auto !important;
      bottom: auto !important;
      transform: translateY(-50%) !important;
      margin: 0 !important;
      width: 20px !important;
      height: 20px !important;
      font-size: 20px !important;
      line-height: 20px !important;
      flex: none !important;
      cursor: pointer;
      z-index: 1000;
    }
  }

  :host {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  form {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

}

@media screen and (max-width: 480px) {

  :host ::ng-deep {

    .tab-btn {
      font-size: 12px !important;
    }

    .FormOverView {
      padding: 10px !important;
    }

    /* Icon stays the same fixed size at this breakpoint too — only its
       right offset tightens slightly to match the tighter field padding. */
    div[style*="align-items: center"] mat-icon {
      width: 20px !important;
      height: 20px !important;
      font-size: 20px !important;
      line-height: 20px !important;
      right: 10px !important;
    }

  }

}