.leave-form-container {
  display: flex;
  // background-color: #FFFFFF;
  height: 394px;
  border-radius: 8px;
  padding-right: 12px;
  // padding-bottom: 24px;
  // padding-left: 12px;
}

.FormSection {
  // background-color: #FFFFFF;
  // margin-left: 8px;
  // margin-top: 10px;
  border-radius: 8px;
  height: 270px;
}


.leave-form-grid-container {
  background-color: #FFFFFF;
  margin-top: 20px;
  // padding-left: 12px;
}

.FormTabSection {
  // background-color: #FFFFFF;
  border-radius: 8px;
  margin-bottom: 8px;
  margin-top: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--action-primary-default, #834dd0) rgba(26, 26, 26, .32);
  overflow-y: auto;
  /* enables vertical scrolling */
  overflow-x: hidden;
  margin-left: 40px;
}

.custom-formgrid-container {
  width: 720px;
  overflow-y: auto;
  /* enables vertical scrolling */
  overflow-x: hidden;
  /* optional, hides horizontal scroll */
  border-radius: 8px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  scrollbar-width: thin;
  scrollbar-color: var(--action-primary-default, #834dd0) rgba(26, 26, 26, .32);
  margin-top: 80px;
}

.custom-formgrid-container::-webkit-scrollbar {
  width: 6px;
}

.custom-formgrid-container::-webkit-scrollbar-thumb {
  background-color: #834dd0;
  border-radius: 3px;
}


.left-column,
.middle-column,
.right-column {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
}

.left-column {
  // width: 337px;
  height: 250px;

}

.middle-column {
  width: 765px;
  height: 228px;
  gap: 12px;
  // margin-left: 20px;
}

.right-column {
  width: 188px;
  height: 524px;
  border-radius: 8px;
  margin-left: 170px;

}

.MinimizedSectionMatIcon {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 16px;
  color: var(--action-primary-default);
  border-radius: 4px;
  background: rgba(255, 255, 255, 1);
}

.section-header {
  font-family: Inter !important;
  font-weight: 700;
  font-size: 12px;
  line-height: 150%;
  letter-spacing: 0%;
  color: var(--action-primary-default);
  padding-left: 12px;
}

.card-box {
  width: 765px;
  height: 125px;
  gap: 2px;
  padding-top: 6px;
  padding-right: 12px;
  padding-bottom: 6px;
  padding-left: 12px;
  border-radius: 8px;

}

.card-boxed {
  width: 900px; // Match the parent container width
  height: 91px;
  gap: 8px; // Increase gap for better spacing
  padding-top: 6px;
  padding-right: 12px;
  padding-bottom: 6px;
  padding-left: 12px;
  border-radius: 8px;
  display: flex;
  align-items: center; // Vertically center items
}

.leave-status-wrapper{
  margin-left: 10px;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.emp-code,
.code-text {
  font-size: 12px;
  margin-top: -12px;
}

.balance-box {
  background-color: var(--bg-subtle);
  border-radius: 12px;
  overflow: hidden;
  font-family: Arial, sans-serif;
  font-size: 14px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.05);
}

.balance-header {
  background-color: var(--bg-subtle);
  color: var(--text-secondary);
  font-weight: 600;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.balance-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 14px;
  background-color: white;
}

.alt-row {
  background-color: var(--bg-surface);
}

.bold-text {
  font-weight: bold;
  text-align: center;
}

.segmented-toggle {
  display: inline-flex;
  border: 2px solid #c59efb;
  border-radius: 9999px;
  /* full-rounded */
  overflow: hidden;
  background-color: #f5f3ff;
  padding: 4px;
}

.segmented-toggle button {
  border: none;
  background: transparent;
  padding: 8px 20px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  color: #6b21a8;
  transition: all 0.3s ease;
  border-radius: 9999px;
}

.segmented-toggle button.active {
  background-color: #e9d5ff;
  color: #4c1d95;
}

gb-combobox .Mat_Form_Field .mat-mdc-form-field .mdc-text-field {
  border: none !important;
  box-shadow: none !important;

  .mdc-notched-outline {
    display: none !important;
  }
}

.date-btn {
  padding: 4px 10px;
  background: var(--action-primary-default);
  border: 1px solid #ccc;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  width: 69px;
  height: 26px;
}

.date-btn:hover {
  background: var(--button-primary-bg-hover);
}


.date1-btn.active {
  background-color: var(--button-primary-bg-default);
  color: var(--button-primary-text-default);
}

.date2-btn.active {
  background-color: var(--button-primary-bg-default);
  color: var(--button-primary-text-default);
}

.date3-btn.active {
  background-color: var(--button-primary-bg-default);
  color: var(--button-primary-text-default);
}

.date1-btn {
  background: var(--button-secondary-bg-default);
  border: 1px solid var(--button-secondary-border-default);
  width: 69;
  height: 26;
  padding-top: 4px;
  padding-right: 8px;
  padding-bottom: 4px;
  padding-left: 8px;
  opacity: 1;
  border-radius: 8px;
  border-width: 1px;
  cursor: pointer;
  color: var(--button-secondary-text-default);
}

.date2-btn {
  background: var(--button-secondary-bg-default);
  border: 1px solid var(--button-secondary-border-default);
  width: 69;
  height: 26;
  padding-top: 4px;
  padding-right: 8px;
  padding-bottom: 4px;
  padding-left: 8px;
  opacity: 1;
  border-radius: 8px;
  border-width: 1px;
  cursor: pointer;
  color: var(--button-secondary-text-default);
  margin-left: 8px;

}

.date3-btn {
  background: var(--button-secondary-bg-default);
  border: 1px solid var(--button-secondary-border-default);
  width: 69;
  height: 26;
  padding-top: 4px;
  padding-right: 8px;
  padding-bottom: 4px;
  padding-left: 8px;
  opacity: 1;
  border-radius: 8px;
  border-width: 1px;
  cursor: pointer;
  color: var(--button-secondary-text-default);
  margin-left: 8px;

}

.attachement1 {
  font-family: Inter !important;
  font-weight: 400;
  font-size: 11px;
  line-height: 150%;
  letter-spacing: 0%;
  text-align: center;
  color: #1A1A1ADE;
  display: flex;
}

button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

::ng-deep gb-formgrid {

  // 2nd, 3rd, 5th columns → Center
  td:nth-child(2),
  td:nth-child(3),
  td:nth-child(5),
  th:nth-child(2),
  th:nth-child(3),
  th:nth-child(5) {
    text-align: center !important;

    .GridInput,
    input,
    span {
      text-align: center !important;
    }
  }

  // 4th column → Right
  td:nth-child(4),
  th:nth-child(4) {
    text-align: right !important;

    .GridInput,
    input,
    span {
      text-align: right !important;
    }
  }
}

::ng-deep .leave-status-wrapper {

  &.status-pending .mat-mdc-select-value,
  &.status-pending .mat-mdc-select-value-text,
  &.status-pending .mat-mdc-select-trigger {
    color: #F5A623 !important;
  }

  &.status-approved .mat-mdc-select-value,
  &.status-approved .mat-mdc-select-value-text,
  &.status-approved .mat-mdc-select-trigger {
    color: #66E2BD !important;
  }

  &.status-rejected .mat-mdc-select-value,
  &.status-rejected .mat-mdc-select-value-text,
  &.status-rejected .mat-mdc-select-trigger {
    color: #E63946 !important;
  }
}

@media (max-width: 1024px) {
  .FormSection {
    height: auto !important;
  }

  .leave-form-container {
    flex-direction: column !important;
    height: auto !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
  }

  .middle-column {
    width: 100% !important;
    height: auto !important;
    gap: 16px !important;
    box-sizing: border-box !important;
  }

  .right-column {
    width: 100% !important;
    height: auto !important;
    margin-left: 0 !important;
    margin-top: 16px !important;
    box-sizing: border-box !important;
  }

  .card-boxed,
  .card-box {
    width: 100% !important;
    height: auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
    box-sizing: border-box !important;
  }

  .form-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
    box-sizing: border-box !important;
  }

  .form-group {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .FormTabSection {
    margin-left: 0 !important;
    // FIX: Tighten top margin in stacked layout (was 16px)
    margin-top: 12px !important; 
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box !important;
  }

  .custom-formgrid-container {
    // FIX: Reset desktop alignment offset (was 80px) to remove excessive empty space above the grid table
    margin-top: 12px !important; 
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box !important;
  }

  ::ng-deep gb-formgrid {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .balance-header,
  .balance-box {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  ::ng-deep .middle-column > div[style*="width: 930px"],
  ::ng-deep .middle-column > div[style*="width: 760px"] {
    width: 100% !important;
    height: auto !important;
    flex-direction: column !important;
    display: flex !important;
    padding: 16px !important;
    box-sizing: border-box !important;
  }

  ::ng-deep div[style*="margin-left: 354px"] {
    margin-left: 0 !important;
    margin-top: 12px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  ::ng-deep div[style*="margin-top: -75px"] {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    flex-direction: column !important;
    display: flex !important;
  }

  ::ng-deep div[style*="margin-top: 60px"] {
    flex-direction: column !important;
    margin-top: 24px !important;
    display: flex !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding-bottom: 24px !important;
  }

  ::ng-deep div[style*="margin-top: 60px"] > div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  ::ng-deep gb-date,
  ::ng-deep gb-input,
  ::ng-deep gb-newpicklist,
  ::ng-deep gb-combobox,
  ::ng-deep gb-textarea {
    width: 100% !important;
    margin-left: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
    
    .mat-mdc-form-field,
    .mdc-text-field,
    .mat-form-field,
    .p-dropdown,
    .p-calendar,
    .p-inputtext,
    input,
    textarea,
    select,
    & > div,
    & > span {
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }
  }

  ::ng-deep .leave-status-wrapper {
    margin-left: 0 !important;
    width: 100% !important;
  }
  
  :host ::ng-deep .form-row.card-boxed > div,
  :host ::ng-deep .form-row.card-box > div {
    width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  // ================================================
  // FIX: Status field (leave-status-wrapper) becomes
  // disproportionately wide in tablet range (768–1024px)
  // because ".form-row.card-boxed > div" catches this
  // wrapper but not sibling gb-date/gb-input elements.
  // ================================================
  :host ::ng-deep .form-row.card-boxed > div.leave-status-wrapper {
    width: auto !important;
    max-width: 220px !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  // The combobox and its Material form-field must not
  // re-stretch to fill the now-constrained wrapper's parent row.
  :host ::ng-deep .form-row.card-boxed > div.leave-status-wrapper gb-combobox,
  :host ::ng-deep .form-row.card-boxed > div.leave-status-wrapper .mat-mdc-form-field,
  :host ::ng-deep .form-row.card-boxed > div.leave-status-wrapper .mdc-text-field {
    width: auto !important;
    max-width: 220px !important;
  }

  /* Force the Leave No picklist and its internal elements to 100% width */
  :host ::ng-deep .form-row.card-boxed gb-newpicklist,
  :host ::ng-deep .form-row.card-boxed gb-newpicklist mat-form-field,
  :host ::ng-deep .form-row.card-boxed gb-newpicklist .mat-mdc-form-field,
  :host ::ng-deep .form-row.card-boxed gb-newpicklist .p-dropdown {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
  }

  .date1-btn,
  .date2-btn,
  .date3-btn {
    margin-left: 0 !important;
    flex: 1 1 auto;
    text-align: center;
  }
}

@media (max-width: 767px) {
  .balance-box {
    font-size: 13px !important;
  }

  .date1-btn,
  .date2-btn,
  .date3-btn {
    font-size: 11px !important;
    padding: 8px !important;
  }

  .emp-code,
  .code-text {
    font-size: 11px !important;
    margin-top: 4px !important;
  }

  
  ::ng-deep .middle-column > div[style*="width: 760px"] {
    display: flex !important;
    flex-direction: column !important;

    > .form-row.card-box {
      order: 1 !important;
    }

    > div[style*="margin-top: -75px"] {
      order: 2 !important;
      margin-top: 0 !important;
      margin-bottom: 8px !important;
      position: static !important;
      transform: none !important;
    }
  }

  ::ng-deep div[style*="margin-left: 354px"] {
    order: 2 !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
  }

  .FormTabSection {
    overflow-y: visible !important;
    overflow-x: auto !important;
    max-height: none !important;
    height: auto !important;
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .custom-formgrid-container {
    overflow-y: visible !important;
    overflow-x: auto !important;
    max-height: none !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  ::ng-deep gb-formgrid {
    overflow-y: visible !important;
    max-height: none !important;
  }

  .leave-form-container,
  .FormSection {
    overflow: visible !important;
  }

  :host ::ng-deep .FormOverView.scrollbar {
    height: 100% !important;
    max-height: calc(100vh - 190px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 24px !important;
  }

  /* Ensure the grid table section itself does not clip */
  :host ::ng-deep .FormTabSection,
  :host ::ng-deep .custom-formgrid-container {
    padding-bottom: 24px !important;
  }
}