@import url('./../../../../../projects/gbhost/public/gbstyle/gbcommonstyle.scss');

// ─── Base Styles ─────────────────────────────────────────────────────────────

:host ::ng-deep .FormOverView {
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  padding-bottom: 60px;
}

:host ::ng-deep .mat-mdc-tab-body-content {
  overflow: visible !important;
  height: auto !important;
}

:host ::ng-deep .mat-mdc-tab-body-wrapper {
  overflow: visible !important;
}

:host ::ng-deep .FormsTab {
  overflow: visible !important;
  padding-bottom: 40px;
}

:host ::ng-deep .maindiv,
:host ::ng-deep .div2 {
  margin-bottom: 16px;
}

// ─── CRITICAL GLOBAL/SHARED FIX: Hide All Dummy/Hidden Material Inputs ───────
// (Prevents phantom values like "-1", "0" from rendering in picklists & checkboxes)
:host ::ng-deep input[data-cy*="PickListInput"],
:host ::ng-deep gb-newpicklist input[data-cy*="PickListInput"],
:host ::ng-deep .MultiPicklist input[matInput],
:host ::ng-deep gb-checkbox input,
:host ::ng-deep gb-checkbox input[matInput],
:host ::ng-deep gb-radiobutton input[matInput],
:host ::ng-deep input[style*="width: 0.1px"],
:host ::ng-deep input[style*="display: none"] {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  position: absolute !important;
  pointer-events: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

// ─── High-Efficiency Mobile Media Query (≤ 767px) ────────────────────────────
@media (max-width: 767px) {

  // ── Overall Container ──────────────────────────────────────────────────────
  :host ::ng-deep .FormOverView {
    padding: 10px 8px 80px 8px !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  :host ::ng-deep .container1 {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  // ── Header Section (Account Category & Status) ─────────────────────────────
  :host ::ng-deep .picklistheader {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    margin-bottom: 12px !important;
  }

  :host ::ng-deep .picklistheader .picklist,
  :host ::ng-deep .picklistheader .codedefined,
  :host ::ng-deep .picklistheader gb-combobox {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  // ── Main Row (Code, Name, Short Name) ──────────────────────────────────────
  :host ::ng-deep .maindiv {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
  }

  :host ::ng-deep .maindiv > .automanual {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    position: relative !important;
  }

  :host ::ng-deep .maindiv > .automanual > .badge {
    position: absolute !important;
    top: 0 !important;
    right: 8px !important;
    padding: 0 !important;
    z-index: 2;
  }

  :host ::ng-deep .div2 {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 12px !important;
    margin-bottom: 0 !important;
  }

  :host ::ng-deep .adjacentField {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
  }

  // ── Form Components: Full Width & Vertical Flow ───────────────────────────
  :host ::ng-deep gb-newpicklist,
  :host ::ng-deep gb-input,
  :host ::ng-deep gb-checkbox,
  :host ::ng-deep gb-combobox,
  :host ::ng-deep gb-radiobutton {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 14px !important;
  }

  // ── EXPANDED VIEW FIX: Put Container Directly Below Label & Description ───
  :host ::ng-deep gb-newpicklist div[style*="display: flex"],
  :host ::ng-deep gb-input div[style*="display: flex"],
  :host ::ng-deep gb-combobox div[style*="display: flex"],
  :host ::ng-deep gb-checkbox div[style*="display: flex"],
  :host ::ng-deep gb-radiobutton div[style*="display: flex"],
  :host ::ng-deep .ExpandedViewContainer > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    margin-bottom: 14px !important;
  }

  // Label & Description Wrapper
  :host ::ng-deep .ExpandedViewWrapper,
  :host ::ng-deep gb-newpicklist div[style*="margin-right"],
  :host ::ng-deep gb-input div[style*="margin-right"],
  :host ::ng-deep gb-combobox div[style*="margin-right"],
  :host ::ng-deep gb-checkbox div[style*="margin-right"],
  :host ::ng-deep gb-radiobutton div[style*="margin-right"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 6px !important;
  }

  // Label Typography
  :host ::ng-deep .ExpandedViewLabel,
  :host ::ng-deep .formlabel,
  :host ::ng-deep .input_label,
  :host ::ng-deep .form_label {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #212529 !important;
    line-height: 1.3 !important;
    margin-bottom: 3px !important;
  }

  // Description Typography
  :host ::ng-deep .ExpandedViewDescription,
  :host ::ng-deep [class*="description" i],
  :host ::ng-deep [class*="Description" i] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    color: #555555 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    margin-bottom: 8px !important;
  }

  // ── Input & Select Controls Container: 100% Width Below Label ──────────────
  :host ::ng-deep gb-newpicklist mat-form-field,
  :host ::ng-deep gb-input mat-form-field,
  :host ::ng-deep gb-combobox mat-form-field,
  :host ::ng-deep .Mat_Form_Field,
  :host ::ng-deep .KeyField {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin-bottom: 2px !important;
  }

  // Inner form elements inside mat-form-field (excluding dummy hidden inputs)
  :host ::ng-deep mat-form-field .mat-mdc-text-field-wrapper,
  :host ::ng-deep mat-form-field .mat-mdc-form-field-flex,
  :host ::ng-deep mat-form-field .mat-mdc-form-field-infix,
  :host ::ng-deep mat-form-field input.form_input,
  :host ::ng-deep mat-form-field input[matInput]:not([data-cy*="PickListInput"]):not([style*="display: none"]),
  :host ::ng-deep mat-form-field mat-select,
  :host ::ng-deep mat-form-field .form_combobox,
  :host ::ng-deep mat-form-field span[style*="inline-flex"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  :host ::ng-deep mat-form-field:not(.MultiPicklist) .mat-mdc-form-field-infix {
    display: flex !important;
    align-items: center !important;
    padding: 10px 0 !important;
  }

  // ── MULTI-SELECT PICKLIST FIX (Applicable Results / Cost Centers) ──────────
  :host ::ng-deep gb-newpicklist .Mat_Form_Field.MultiPicklist,
  :host ::ng-deep .MultiPicklist {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 48px !important;
  }

  :host ::ng-deep .MultiPicklist .mdc-text-field {
    height: auto !important;
    min-height: 48px !important;
    padding: 4px 8px !important;
  }

  :host ::ng-deep .MultiPicklist .mat-mdc-form-field-infix {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    position: relative !important;
    padding: 2px 0 !important;
  }

  :host ::ng-deep gb-newpicklist .MultiPicklist ng-select,
  :host ::ng-deep gb-newpicklist ng-select.picklist,
  :host ::ng-deep ng-select#newpicklist {
    width: 100% !important;
    max-width: calc(100% - 28px) !important;
    display: block !important;
  }

  :host ::ng-deep ng-select#newpicklist.ng-select-multiple .ng-select-container {
    border: none !important;
    background: transparent !important;
    min-height: 38px !important;
    width: 100% !important;
  }

  :host ::ng-deep ng-select#newpicklist.ng-select-multiple .ng-select-container .ng-value-container {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    padding: 2px 0 !important;
  }

  :host ::ng-deep ng-select#newpicklist.ng-select-multiple .ng-value {
    max-width: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    font-size: 13px !important;
    margin: 2px 0 !important;
  }

  :host ::ng-deep .MultiPicklist .MultiPicklistMatIcon {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    cursor: pointer !important;
  }

  // ── EFFECTIVE CHECKBOX / CHECKLIST STYLING ──────────────────────────────────
  :host ::ng-deep gb-checkbox {
    display: block !important;
    width: 100% !important;
    margin-bottom: 14px !important;
  }

  :host ::ng-deep gb-checkbox .Checkbox_Form_Field,
  :host ::ng-deep gb-checkbox mat-form-field {
    display: inline-flex !important;
    width: auto !important;
    min-width: unset !important;
    height: auto !important;
    min-height: unset !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  :host ::ng-deep gb-checkbox .mat-mdc-form-field-subscript-wrapper,
  :host ::ng-deep gb-checkbox .mat-mdc-form-field-bottom-align,
  :host ::ng-deep gb-checkbox .mdc-line-ripple {
    display: none !important;
  }

  :host ::ng-deep gb-checkbox .mat-mdc-text-field-wrapper,
  :host ::ng-deep gb-checkbox .mat-mdc-form-field-flex,
  :host ::ng-deep gb-checkbox .mat-mdc-form-field-infix {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    min-height: unset !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  :host ::ng-deep gb-checkbox mat-checkbox,
  :host ::ng-deep gb-checkbox .mat-mdc-checkbox {
    display: inline-flex !important;
    align-items: center !important;
    margin: 2px 0 !important;
    cursor: pointer !important;
  }

  :host ::ng-deep gb-checkbox .mdc-checkbox {
    margin: 0 !important;
    padding: 4px !important;
  }

  // ── EFFECTIVE RADIO BUTTON STYLING ─────────────────────────────────────────
  :host ::ng-deep gb-radiobutton .Radio_Form_Field,
  :host ::ng-deep gb-radiobutton mat-form-field {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    height: auto !important;
    min-height: unset !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  :host ::ng-deep gb-radiobutton .mat-mdc-form-field-subscript-wrapper,
  :host ::ng-deep gb-radiobutton .mdc-line-ripple {
    display: none !important;
  }

  :host ::ng-deep gb-radiobutton .mat-mdc-text-field-wrapper,
  :host ::ng-deep gb-radiobutton .mat-mdc-form-field-flex,
  :host ::ng-deep gb-radiobutton .mat-mdc-form-field-infix {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    min-height: unset !important;
    height: auto !important;
    display: block !important;
  }

  :host ::ng-deep gb-radiobutton mat-radio-group,
  :host ::ng-deep gb-radiobutton [role="radiogroup"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 14px !important;
    width: 100% !important;
    height: auto !important;
  }

  :host ::ng-deep gb-radiobutton mat-radio-button,
  :host ::ng-deep gb-radiobutton .mat-mdc-radio-button {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    min-width: fit-content !important;
  }

  :host ::ng-deep gb-radiobutton .mdc-label,
  :host ::ng-deep gb-radiobutton .mat-radio-label-content {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #212529 !important;
    white-space: nowrap !important;
    padding-left: 4px !important;
  }

  // ── Bank Tab Row Fixes ─────────────────────────────────────────────────────
  :host ::ng-deep .bank {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  // ── Ledger Tab Percentage Row Fixes ────────────────────────────────────────
  :host ::ng-deep .percentage {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  // ── Limits Tab & Other Inline Spans ────────────────────────────────────────
  :host ::ng-deep mat-tab-body span[style*="width"],
  :host ::ng-deep .FormsTab span[style*="width"] {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }

  // ── Tab Strip Formatting ───────────────────────────────────────────────────
  :host ::ng-deep .FormsTabGroup .mat-mdc-tab-header {
    margin-bottom: 12px !important;
  }

  :host ::ng-deep .FormsTabGroup .mat-mdc-tab-labels {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  :host ::ng-deep .FormsTabGroup .mat-mdc-tab {
    min-width: 50px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
    flex-shrink: 0 !important;
  }

  // ── Modal Dialog ──────────────────────────────────────────────────────────
  :host ::ng-deep .FormModal_content {
    width: 95vw !important;
    height: 85vh !important;
    padding: 12px !important;
  }
}

// ─── Tablet Media Query (768px – 991px) ──────────────────────────────────────
@media (min-width: 768px) and (max-width: 991px) {

  :host ::ng-deep .FormOverView {
    overflow-x: hidden;
  }

  :host ::ng-deep .picklistheader {
    gap: 30px !important;
    flex-wrap: wrap;
  }

  :host ::ng-deep .maindiv {
    flex-wrap: wrap;
  }

  :host ::ng-deep .maindiv > .automanual {
    width: 48% !important;
    min-width: 260px;
  }

  :host ::ng-deep .div2 {
    display: flex;
    flex-wrap: wrap;
    width: 48%;
    min-width: 260px;
  }

  :host ::ng-deep .adjacentField {
    width: 48% !important;
    min-width: 220px;
    box-sizing: border-box;
  }

  :host ::ng-deep gb-newpicklist div[style*="display: flex"],
  :host ::ng-deep gb-input div[style*="display: flex"],
  :host ::ng-deep gb-combobox div[style*="display: flex"],
  :host ::ng-deep gb-checkbox div[style*="display: flex"],
  :host ::ng-deep gb-radiobutton div[style*="display: flex"],
  :host ::ng-deep .ExpandedViewContainer > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  :host ::ng-deep .ExpandedViewWrapper,
  :host ::ng-deep gb-newpicklist div[style*="margin-right"],
  :host ::ng-deep gb-input div[style*="margin-right"],
  :host ::ng-deep gb-combobox div[style*="margin-right"],
  :host ::ng-deep gb-checkbox div[style*="margin-right"],
  :host ::ng-deep gb-radiobutton div[style*="margin-right"] {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 6px !important;
  }

  :host ::ng-deep .ExpandedViewDescription,
  :host ::ng-deep [class*="description" i],
  :host ::ng-deep [class*="Description" i] {
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  :host ::ng-deep gb-newpicklist mat-form-field,
  :host ::ng-deep gb-input mat-form-field,
  :host ::ng-deep gb-combobox mat-form-field,
  :host ::ng-deep .Mat_Form_Field {
    width: 100% !important;
    max-width: 100% !important;
  }

  :host ::ng-deep .bank {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
  }

  :host ::ng-deep .FormModal_content {
    width: 85vw !important;
    height: 70vh !important;
  }
}