.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;
  gap:30px;
}

.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) {

  :host,
  form {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .FormOverView {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: unset !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    padding: 12px !important;
  }

  .FormSection {
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .leave-form-container {
    flex-direction: column !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

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

  .left-column {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

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

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

  .balance-header,
  .balance-row {
    padding: 8px 10px !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
  }

  /* Override inline-styled fixed widths */
  .middle-column > div {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  .card-boxed {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    box-sizing: border-box !important;
  }

  .card-boxed > div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .card-box {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    box-sizing: border-box !important;
  }

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

  .form-group > div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

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

  .FormTabSection {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .leave-status-wrapper {
    margin-left: 0 !important;
    margin-top: 8px !important;
    width: auto !important;
    min-width: 150px !important;
  }

  .card-boxed > .leave-status-wrapper {
    width: auto !important;
    max-width: 200px !important;
    flex: 0 0 auto !important;
  }

  .leave-status-wrapper gb-combobox {
    width: 100% !important;
  }

  /* Override inline styles via attribute selectors */
  div[style*="width: 930px"],
  div[style*="width: 760px"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  div[style*="margin-top: -75px"] {
    margin-top: 0 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    gap: 8px !important;
  }

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

  div[style*="margin-top: 60px"] {
    flex-direction: column !important;
    margin-top: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  div[style*="margin-top: -6px"] {
    margin-top: 4px !important;
  }

  ::ng-deep {

    gb-formgrid {
      display: block !important;
      width: 100% !important;

      table {
        min-width: 600px !important;
      }
    }

    gb-date,
    gb-input,
    gb-textarea {
      display: block !important;
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      margin-left: 0 !important;
      margin-bottom: 12px !important;
      box-sizing: border-box !important;

      .mat-mdc-form-field,
      .Mat_Form_Field,
      input {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
      }
    }

    gb-input[formcontrolname="NumberOfDays"] {
      width: 80px !important;
      max-width: 80px !important;
      flex: 0 0 80px !important;
      margin-bottom: 0 !important;

      .mat-mdc-form-field,
      .Mat_Form_Field,
      input {
        width: 80px !important;
        max-width: 80px !important;
      }
    }

    gb-newpicklist,
    gb-combobox {
      display: block !important;
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      margin-bottom: 12px !important;
      overflow: visible !important;
      box-sizing: border-box !important;

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

      /* KEY FIX — keep arrow inside the field */
      .mat-mdc-select-trigger {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
      }

      .mat-mdc-select-value {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
      }

      .mat-mdc-select-arrow-wrapper {
        flex: 0 0 24px !important;
        width: 24px !important;
        min-width: 24px !important;
        max-width: 24px !important;
        display: flex !important;
        align-items: center !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: static !important;
      }

      .mat-mdc-select-placeholder {
        opacity: 1 !important;
        visibility: visible !important;
        white-space: nowrap !important;
        color: var(--field-helper-default, rgba(0,0,0,0.6)) !important;
      }
    }
  }
}

@media (max-width: 768px) {

  .FormOverView {
    padding: 8px !important;
    max-height: 80vh !important;
  }

  .form-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .card-boxed,
  .card-box {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 8px !important;
  }

  .right-column {
    width: 100% !important;
    max-width: 100% !important;
    min-width: unset !important;
    margin-left: 0 !important;
    margin-top: 12px !important;
  }

  .balance-box {
    width: 100% !important;
    max-width: 100% !important;
  }

  .date1-btn,
  .date2-btn,
  .date3-btn {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 64px !important;
    margin-left: 4px !important;
  }

  .date1-btn {
    margin-left: 0 !important;
  }

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


  :host ::ng-deep {
    gb-radiobutton {
      display: block !important;
      width: 100% !important;
      margin-bottom: 16px !important;
    }

    gb-radiobutton > div[style*="display: flex"] {
      flex-wrap: wrap !important;
      gap: 4px !important;
    }

    gb-radiobutton > div[style*="display: flex"] > div[style*="margin-right"] {
      margin-right: 0 !important;
      flex: 1 1 100% !important;
      max-width: 100% !important;
    }

    gb-radiobutton mat-form-field,
    gb-radiobutton .mat-mdc-form-field,
    gb-radiobutton .mdc-form-field {
      min-width: unset !important;
      width: 100% !important;
      max-width: 100% !important;
      display: inline-flex !important;
      visibility: visible !important;
      opacity: 1 !important;
      overflow: visible !important;
    }

    gb-radiobutton .Radio_Form_Field {
      min-width: unset !important;
      width: 100% !important;
    }

    gb-radiobutton mat-radio-group,
    gb-radiobutton .mat-mdc-radio-group,
    gb-radiobutton [role="radiogroup"] {
      display: inline-flex !important;
      flex-direction: row !important;
      flex-wrap: wrap !important;
      align-items: center !important;
      gap: 16px !important;
      visibility: visible !important;
      opacity: 1 !important;
    }

    gb-radiobutton mat-radio-button,
    gb-radiobutton .mat-mdc-radio-button,
    gb-radiobutton [role="radio"] {
      display: inline-flex !important;
      align-items: center !important;
      visibility: visible !important;
      opacity: 1 !important;
    }

    gb-radiobutton .mdc-radio__background,
    gb-radiobutton .mdc-radio__outer-circle,
    gb-radiobutton .mdc-radio__inner-circle,
    gb-radiobutton .mat-internal-form-field > label {
      visibility: visible !important;
      opacity: 1 !important;
    }

    gb-formaction {
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
      overflow-x: hidden !important;
    }
  }
}

@media (max-width: 480px) {

  .card-boxed,
  .card-box {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .date1-btn,
  .date2-btn,
  .date3-btn {
    font-size: 11px !important;
    padding: 4px 6px !important;
    min-width: 56px !important;
  }

  ::ng-deep {

    gb-formaction {
      .FormActionBar,
      button {
        flex-wrap: wrap !important;
      }
    }

    gb-newpicklist,
    gb-combobox {
      .mat-mdc-select-placeholder,
      .mat-mdc-floating-label,
      .mdc-floating-label {
        font-size: 12px !important;
      }
    }
  }

  .form-group,
  .form-group > div {
    width: 100% !important;
    max-width: calc(100vw - 33px) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  ::ng-deep {
    gb-newpicklist[formcontrolname="LeaveTypeName"],
    gb-newpicklist[formcontrolname="LeaveTypeNameEss"] {
      width: 100% !important;
      max-width: calc(100vw - 33px) !important;
      min-width: 0 !important;
      box-sizing: border-box !important;

      .mat-mdc-form-field,
      .Mat_Form_Field,
      .mdc-text-field,
      .mat-mdc-text-field-wrapper,
      .mat-mdc-form-field-flex,
      .mat-mdc-form-field-infix {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
      }
    }
  }
    div[style*="width: 760px"],
  div[style*="width: 930px"] {
    width: 100% !important;
    max-width: calc(100vw - 16px) !important;
    height: auto !important;
    box-sizing: border-box !important;
  }
   div[style*="width: 760px"] {
    width: calc(100vw - 40px) !important;
    max-width: calc(100vw - 30px) !important;
    overflow: hidden !important;
  }
}

@media (max-width: 360px){
::ng-deep {
  gb-newpicklist[formcontrolname="LeaveTypeName"],
  gb-newpicklist[formcontrolname="LeaveTypeNameEss"] {
    mat-icon[data-cy="LeaveTypeNameEss-PickListDrop"],
    mat-icon[data-cy="LeaveTypeName-PickListDrop"] {
      margin-left: -60px !important;
    }
  }
}
}