/* =========================================================
   LEAVE FORM – RESPONSIVE STYLES
   Rules:
   - All class names, variables & ::ng-deep blocks unchanged
   - Inputs stay in a SINGLE ROW on every screen (scroll if needed)
   - Graph (.right-column) always renders last
   Breakpoints:
     xs  < 480px    (phone portrait)
     sm  480–767px  (phone landscape)
     md  768–1023px (tablet)
     lg  ≥ 1024px   (desktop – original layout)
   ========================================================= */
/* ---------- Force picklist to shrink on mobile ---------- */
/* ---------- Force picklist/date/input to shrink on mobile ---------- */
@media (max-width: 767px) {

  ::ng-deep .leave-section-container gb-newpicklist,
  ::ng-deep .leave-section-container gb-newpicklist > *,
  ::ng-deep .leave-section-container gb-newpicklist .mat-mdc-form-field,
  ::ng-deep .leave-section-container gb-newpicklist .mdc-text-field,
  ::ng-deep .leave-section-container gb-newpicklist .mat-mdc-text-field-wrapper,
  ::ng-deep .leave-section-container gb-newpicklist .mat-mdc-form-field-infix,
  ::ng-deep .leave-section-container gb-newpicklist .mat-mdc-form-field-flex,
  ::ng-deep .leave-section-container gb-newpicklist input,
  ::ng-deep .leave-section-container gb-newpicklist .mdc-notched-outline {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  ::ng-deep .leave-section-container gb-date,
  ::ng-deep .leave-section-container gb-date > *,
  ::ng-deep .leave-section-container gb-date .mat-mdc-form-field,
  ::ng-deep .leave-section-container gb-date .mdc-text-field,
  ::ng-deep .leave-section-container gb-date .mat-mdc-text-field-wrapper,
  ::ng-deep .leave-section-container gb-date .mat-mdc-form-field-infix,
  ::ng-deep .leave-section-container gb-date .mat-mdc-form-field-flex,
  ::ng-deep .leave-section-container gb-date input {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  ::ng-deep .leave-section-container gb-input,
  ::ng-deep .leave-section-container gb-input > *,
  ::ng-deep .leave-section-container gb-input .mat-mdc-form-field,
  ::ng-deep .leave-section-container gb-input .mdc-text-field,
  ::ng-deep .leave-section-container gb-input .mat-mdc-text-field-wrapper,
  ::ng-deep .leave-section-container gb-input .mat-mdc-form-field-infix,
  ::ng-deep .leave-section-container gb-input .mat-mdc-form-field-flex,
  ::ng-deep .leave-section-container gb-input input {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Also fix the form-group wrapper itself */
  .leave-section-container .form-group {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden;
  }

  /* Ensure card-box children don't overflow */
  .leave-section-container .card-box {
    overflow: hidden;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
}
/* ---------- FormOverView ---------- */
.FormOverView {
  @media (max-width: 1023px) {
    display: flex;
    flex-direction: column;
  }
}

/* ---------- leave-form-container ---------- */
.leave-form-container {
  display:inline-flex;
  flex-wrap: wrap;
  height: auto;
  min-height: 394px;
  border-radius: 8px;
  padding-right: 12px;

  @media (max-width: 1023px) {
    flex-direction: column;
    padding-right: 8px;
    min-height: unset;
    display: contents; /* Unbox for flex ordering */
  }

  @media (max-width: 479px) {
    padding-right: 4px;
  }
}

/* ---------- FormSection ---------- */
.FormSection {
  border-radius: 8px;
  height: auto;
  min-height: 270px;

  @media (max-width: 1023px) {
    width: 100%;
    min-height: unset;
    display: contents; /* Unbox for flex ordering */
  }
}

/* ---------- leave-form-grid-container ---------- */
.leave-form-grid-container {
  background-color: #FFFFFF;
  margin-top: 20px;

  @media (max-width: 767px) {
    margin-top: 12px;
  }
}

/* ---------- FormTabSection ---------- */
.FormTabSection {
  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;
  overflow-x: hidden;
  margin-left: 40px;

  @media (max-width: 1023px) {
    margin-left: 16px;
  }

  @media (max-width: 767px) {
    margin-left: 0;
  }
}

/* ---------- custom-formgrid-container ---------- */
.custom-formgrid-container {
  width: 720px;
  max-width: 100%;
  overflow-y: auto;
  overflow-x: auto;           /* allow horizontal scroll when grid is wide */
  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);
  -webkit-overflow-scrolling: touch;
  margin-top: 80px;

  @media (max-width: 1023px) {
    width: 100%;
  }
}

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

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

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

/* ---------- left-column ---------- */
.left-column {
  height: auto;
  min-height: 250px;

  @media (max-width: 1023px) {
    width: 100%;
    min-height: unset;
  }
}

/* ---------- middle-column ---------- */
.middle-column {
  width: 765px;
  max-width: 100%;
  height: auto;
  min-height: 228px;
  gap: 12px;

  @media (max-width: 1023px) {
    width: 100%;
    min-height: unset;
    order: 1;
    margin-bottom: 12px;
  }
}

/* ---------- right-column  (GRAPH – always last) ---------- */
// .right-column {
//   width: 188px;
//   height: auto;
//   min-height: 524px;
//   border-radius: 8px;
//   margin-left: 170px;

//   @media (max-width: 1280px) {
//     margin-left: 40px;
//   }

//   @media (max-width: 1023px) {
//     order: 3;           /* push below bottom-section */
//     width: 100%;
//     margin-left: 0;
//     min-height: unset;
//     margin-top: 20px;
//   }

//   @media (max-width: 767px) {
//     margin-top: 16px;
//   }
// }

/* ---------- MinimizedSectionMatIcon ---------- */
.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 ---------- */
.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 ---------- */
/* ---------- card-box desktop: leave type left, dates right ---------- */
.card-box {
  width: 765px;
  max-width: 100%;
  height: auto;
  min-height: 125px;
  gap: 2px;
  padding: 6px 12px;
  border-radius: 8px;
  display: flex;           /* ADD */
  align-items: flex-end;   /* ADD */

  @media (max-width: 1023px) {
    width: 100%;
    min-height: unset;
  }

  @media (max-width: 767px) {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 8px;
    overflow: hidden;

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

/* ---------- form-row inside card-box: leave type left, dates pushed right ---------- */
.card-box .form-row {
  display: flex;
  align-items: flex-end;
  width: 100%;
  gap: 8px;

  /* Push gb-date and gb-input (From, To, Days) to the right */
 
 .form-group {
    flex: 0 0 auto;
    width: auto;
  }

  /* Spacer: pushes dates to the right */
  .form-group + gb-date {
    margin-left: auto;
  }

  /* Normal spacing between the two dates and days */
  gb-date + gb-date,
  gb-date + gb-input {
    margin-left: 10px;
  }

  @media (max-width: 767px) {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;

    .form-group {
      width: 100%;
    }

    .form-group + gb-date {
      margin-left: 0;
    }

    gb-date + gb-date,
    gb-date + gb-input {
      margin-left: 0;
    }
  }
}
/* ---------- card-boxed ---------- */
.card-boxed {
  width: 900px;
  max-width: 100%;
  height: auto;
  min-height: 91px;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* allow wrapping on mobile */

  @media (max-width: 1023px) {
    width: 100%;
    min-height: unset;
    align-items: flex-end;
  }

  @media (max-width: 767px) {
    flex-direction: column; /* Input as column */
    align-items: flex-start;
    gap: 12px;
    padding: 12px 8px;
    > * {
      width: 100%; /* Make inputs stretch to full width */
    }
  }
}

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

  @media (max-width: 767px) {
    margin-left: 0;
  }
}

/* ---------- form-row – RESPONSIVE WRAP ---------- */
.form-row {
  display: flex;
  flex-wrap: wrap;           /* allow inputs to wrap into rows */
  gap: 8px;
  align-items: flex-end;

  @media (max-width: 767px) {
    flex-direction: column; /* Input as column */
    align-items: flex-start;
    gap: 12px;
    > * {
      margin-left: 0 !important; /* override any hardcoded margins */
      width: 100%; /* Ensure inputs take full width if needed */
    }
  }
}

/* ---------- Responsive Layout Classes ---------- */
.current-data-section {
  background: var(--bg-surface);
  width: 100%;
  max-width: 930px;
  min-height: 91px;
  height: auto;
  padding-top: 6px;
  padding-right: 12px;
  margin-bottom: 10px;
  gap: 2px;
  border-radius: 8px;
}

.leave-section-container {
  background: var(--bg-surface);
  width: 100%;
  max-width: 760px;
  min-height: 164px;
  height: auto;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden; /* ADD THIS - prevent children from bleeding out */

  @media (max-width: 767px) {
    max-width: 100%;  /* ADD THIS - full width on mobile */
    overflow: hidden;
  }
}

.second-row-container {
  display: flex;
  margin-top: -75px;
  margin-bottom: 6px;
  align-items: center;

  .code-text {
    margin-top: 10px;
    margin-left: 16px;
  }

  @media (max-width: 767px) {
    margin-top: 10px;
    flex-wrap: wrap;
    gap: 10px;

    .code-text {
      margin-top: 0;
      margin-left: 8px;
    }
  }
}

.button-group-right {
  margin-left: 370px;
  margin-top: 65px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;


  @media (max-width: 1023px) {
    margin-left: auto;
  }

  @media (max-width: 767px) {
    margin-left: 8px;
    margin-top: 0;
  }
}

.bottom-section {
  margin-top: 60px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;

  > div {
    flex: 1 1 auto;
  }

  @media (max-width: 1023px) {
    order: 2; /* explicitly order it between middle and right column */
  }

  @media (max-width: 767px) {
    margin-top: 20px;
    flex-direction: column;
  }
}

/* ---------- form-group ---------- */
.form-group {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;            /* fixed size – don't shrink or grow */
  min-width: 120px;  
  width: auto;        /* readable minimum on any screen */

 @media (max-width: 767px) {
    min-width: 100%;   /* CHANGE: was 100px, force full width */
    width: 100%;
    max-width: 100%;
    overflow: hidden;  /* ADD: clip any inner overflow */
  }

  @media (max-width: 479px) {
    min-width: 100%;   /* CHANGE: was 90px */
  }
}

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

/* ---------- balance-box ---------- */
.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);

  @media (max-width: 767px) {
    font-size: 12px;
    border-radius: 8px;
  }
}

/* ---------- balance-header ---------- */
.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;

  @media (max-width: 767px) {
    padding: 8px 10px;
    flex-wrap: wrap;
    gap: 4px;
  }
}

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

  @media (max-width: 767px) {
    padding: 8px 10px;
    flex-wrap: wrap;
    gap: 4px;
  }
}

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

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

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

  @media (max-width: 479px) {
    border-radius: 12px;
    width: 100%;
    justify-content: center;
  }
}

.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;

  @media (max-width: 479px) {
    padding: 6px 14px;
    font-size: 14px;
  }
}

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

/* ---------- combobox overrides ---------- */
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 ---------- */
.date-btn {
  padding: 0px 20px;
  background: var(--action-primary-default);
  border: 1px solid #ccc;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  width: 69px;
  height: 26px;
  white-space: nowrap;
  flex-shrink: 0;
}

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

/* Active states */
.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 ---------- */
.date1-btn {
  background: var(--button-secondary-bg-default);
  border: 1px solid var(--button-secondary-border-default);
  width: 90px;
  height: 26px;
  padding: 0px 8px;
  opacity: 1;
  border-radius: 8px;
  border-width: 1px;
  cursor: pointer;
  color: var(--button-secondary-text-default);
  white-space: nowrap;
  flex-shrink: 0;
  align-items: center;
}

/* ---------- date2-btn ---------- */
.date2-btn {
  background: var(--button-secondary-bg-default);
  border: 1px solid var(--button-secondary-border-default);
  width: 80px;
  height: 26px;
  padding: 0px 8px;
  opacity: 1;
  border-radius: 8px;
  border-width: 1px;
  cursor: pointer;
  color: var(--button-secondary-text-default);
  margin-left: 8px;
  white-space: nowrap;
  flex-shrink: 0;

  @media (max-width: 479px) {
    margin-left: 4px;
  }
}

/* ---------- date3-btn ---------- */
.date3-btn {
  background: var(--button-secondary-bg-default);
  border: 1px solid var(--button-secondary-border-default);
  width: 90px;
  height: 26px;
  padding: 0px 8px;
  opacity: 1;
  border-radius: 8px;
  border-width: 1px;
  cursor: pointer;
  color: var(--button-secondary-text-default);
  margin-left: 8px;
  white-space: nowrap;
  flex-shrink: 0;

  @media (max-width: 479px) {
    margin-left: 0px;
  }
}

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

  @media (max-width: 479px) {
    font-size: 10px;
  }
}

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

/* ---------- gb-formgrid column alignment ---------- */
::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;
    }
  }

  // Horizontal scroll on small screens
  @media (max-width: 767px) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---------- leave-status-wrapper colour states ---------- */
::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;
  }
}