.grid-scrol {
    max-height: 300px; // Or any height you need
    overflow-x: auto;
    border: 1px solid #ccc; // optional: for clarity
  }

  table {
    width: 100%;
    table-layout: fixed; // ✅ force widths to be respected
    border-collapse: collapse;
  }
  thead tr {
  position: sticky;
  top: 0;        /* Keeps header visible at top */
  z-index: 20; 
}

  .Grid-styled-table th{
    padding: 0px 15px;
    font-size: 14px;
    font-weight: 500;
    font-stretch: normal;  
    font-style: normal;
    letter-spacing: normal;
    text-align: left;
    position: sticky !important;
}

.Grid-styled-table td {
  padding: 0px 15px;
  font-size: 14px;
  font-weight: 500;
  font-stretch: normal;  
  font-style: normal;
  letter-spacing: normal;
  font-family: 'Helvetica';
  text-align: left;
}

.modal {
  display: block;
  position: fixed;
  z-index: 999;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  color: rgba(26, 26, 26, 0.87);
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  justify-content: center;
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 50vw;
  height: auto;
  border-radius: 10px;
}

.title{
  font-family: 'Helvetica';
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  line-height: 10px;
  background-color: #FFFFFF;
}

.closeicon {
  color: rgba(26, 26, 26, 0.87);
  width: 48vw;
  display: flex;
  justify-content: right;
  cursor: pointer;
  margin-bottom: 20px;
  margin-top: -35px;
}

.savebutton{
  cursor: pointer;
  margin-top: 10px;
  margin-right: 30px;
  margin-bottom:10px;
  display: inline-flex;
  justify-content: center;
  align-content: center;
  box-shadow: 0px 2px 2px 0px #0000000F;
  border-radius: 6px;
  padding-top: 7px;
  color: #FFFFFF;
  width: 120px;
  height: 32px;
  background-color: var(--action-primary-default);
  font-family: Helvetica;
  font-size: 12px;
  font-weight: 500;
  line-height: 19px;
}
.dropdown_list_data {
  color: var(--type-primary, rgba(26, 26, 26, 0.87));
  font-family: 'Helvetica';
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

.form_label {
  color: rgba(26, 26, 26, 0.87);
  font-family: 'Helvetica';
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 21px;
  text-align: right;
  padding-right: 16px;
}
  
::ng-deep #SelectAll .mdc-checkbox__background {
  border: 2px solid white !important; /* Always white border */
  background-color: transparent !important; /* Optional: remove gray bg when unchecked */
}

::ng-deep #SelectAll .mdc-checkbox__checkmark {
  color: white !important; /* Checkmark white when checked */
}
::ng-deep #SelectAll .mat-mdc-checkbox-ripple {
  background-color: transparent !important; /* Ripple transparency (optional) */
}

// Custom dropdown panel styles
::ng-deep .level-dropdown-panel {
  min-width: 120px !important;
  max-width: 200px !important;
  
  .mat-mdc-option {
    min-width: 120px !important;
    width: auto !important;
    white-space: nowrap !important;
    padding: 8px 16px !important;
  }
}

::ng-deep .attachment-dropdown-panel {
  min-width: 150px !important;
  max-width: 200px !important;
  
  .mat-mdc-option {
    min-width: 150px !important;
    width: auto !important;
    white-space: nowrap !important;
    padding: 8px 16px !important;
    display: flex !important;
    align-items: center !important;
    
    mat-icon {
      margin-right: 8px !important;
    }
  }
}

::ng-deep .mat-mdc-select-trigger {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

// Fix for attachment dropdown trigger
::ng-deep #AttachmentSection {
  .mat-mdc-select-value {
    display: none !important;
  }
  
  .mat-mdc-select-placeholder {
    display: none !important;
  }
  
  .mat-mdc-select-trigger {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 20px !important;
  }
  
}

::ng-deep #CheckBoxFilter {
  .mat-mdc-select-value {
    display: none !important;
  }
  
  .mat-mdc-select-placeholder {
    display: none !important;
  }
  
  .mat-mdc-select-trigger {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 20px !important;
  }

}


// quil design

::ng-deep .ql-container {
    height: 200px; // Adjust height as needed
    width: 100%; // Or whatever width you prefer
}
::ng-deep .ql-container {
    outline: none !important; // Removes the blue focus outline
    border: 1px solid #ccc; // Optional custom border
}

::ng-deep .ql-editor:focus {
    outline: none !important; // Removes the blue border on focus
    box-shadow: none !important; // Removes any focus shadow
}

.PolicyLightBox-Save {
  font-weight: 700;
  line-height: 36px;
  font-size: 12px;
  font-family: Helvetica;
  padding-right: 10px;
  display: inline-block;
  align-content: center;
  margin-right: 5px;
  outline-style: none;
  min-width: 120px;
  height: 32px;
}

.row-wrapper {
  display: contents; // This makes the wrapper "invisible" to layout
}

.virtual-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  height: 36px;
  border-bottom: 1px solid #e0e0e0;
}

.cell {
  display: flex;
  align-items: center;
  position: relative;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
}

.action-cell {
  position: sticky;
  right: 0;
  // background-color: #FFFFFF !important;
  background: #fff;
  z-index: 10;
}

.table-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: 36px;
  width: 100%;
}

.header-cell {
  font-weight: 500;
  color: #FFFFFF;
  background: var(--action-primary-default);
}

.data-cell {
  flex-shrink: 0;                             // ← Match MM Grid
  padding: 0 4px;                             // ← Match MM Grid cell padding
  font-size: 14px;                            // ← Match MM Grid
  font-weight: 500;                           // ← Match MM Grid
  display: flex;
  align-items: center;
  height: 100%;
  color: var(--mat-sys-inverse-surface);
  min-width: 0;
}

.GridInput {
  outline-style: none;
  height: 100%;                           // ← Fill wrapper height
  border: none;                           // ← No border (wrapper has it)
  background-color: transparent;          // ← Transparent (wrapper has bg)
  color: rgba(26, 26, 26, 0.87);         // ← MM Grid text color
  padding: 0 4px;                         // ← Padding inside wrapper
  box-sizing: border-box;
  width: 100%;
  flex: 1;                                // ← Take available space
  min-width: 0;                           // ← Allow input to shrink
  font-weight: 500;
}

// Flex wrapper div for input + icon with borders (matching MM Grid style)
div[style*="display: flex"][style*="align-items: center"][style*="gap"] {
  border: 1px solid var(--field-border-default);
  border-radius: 4px;
  background-color: var(--field-bg-default);
  padding: 0 4px;
  height: 32px;
  box-sizing: border-box;
  align-items: center !important;
  width: 100%;
  overflow: hidden;
}

// Remove border from action cell only
.action-cell {
  border: none !important;
}

// Picklist styling - add border like MM Grid
::ng-deep gb-newpicklist:not(.readonly-picklist) {
  .picklist-wrapper,
  div[style*="display: flex; align-items: end"] {
    position: relative !important;
    background-color: var(--field-bg-default) !important;
    border: 1px solid var(--field-border-default) !important;
    border-radius: 4px !important;
    height: 32px !important;
    box-sizing: border-box !important;
  }

  .form_input {
    background-color: transparent !important;
    // padding-left: 8px !important;
    // padding-right: 28px !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    line-height: 32px !important;
    height: 100% !important;
  }

  div[style*="display: inline-flex"] mat-icon {
    position: absolute !important;
    right: 4px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 20px !important;
    height: 20px !important;
  }
}

// Icon styling - add_circle inside flex container (matches MM Grid pattern)
span[style*="display: flex"][style*="cursor: pointer"] {
  flex-shrink: 0;
  display: flex !important;
  align-items: center !important;
  min-width: 24px;
  width: fit-content;
  padding: 0 2px;

  mat-icon {
    display: inline-flex !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
    width: auto !important;
    height: auto !important;
    font-size: 14px;
  }
}

.data-row {
  display: flex;
  align-items: center;
  height: 56px;                           // ← Match MM Grid row height
  min-height: 56px;                       // ← Match MM Grid row height
  // background-color: transparent;          // ← Default transparent background
  border-bottom: 1px solid #e0e0e0;
  width: fit-content;
  min-width: 100%;
}

.table-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--action-primary-default);
  overflow-x: hidden; /* ✅ Changed from auto to hidden */
  overflow-y: hidden;
  pointer-events: none; /* ✅ Prevent user interaction with header scroll */
}

/* STYLES */

.Grid-sticky-header {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 5px;
  margin-top: 10px;
  margin-bottom: 10px;
  border-radius: 6px;
  border: 1px solid #dddddd;
  box-shadow: 0px 2px 4px 0px #00000033;
  overflow: hidden;
  height: auto !important;
}


// NEW - Add this
.table-header-wrapper {
  position: relative;
  overflow: hidden; // Prevent scrollbars on wrapper
}

.table-header-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.header-row {
  pointer-events: auto; // Re-enable clicks on header content
}

.header-row,
.data-row {
  display: flex;
  width: fit-content;
  min-width: 100%;
}

// Material rows that already have a PR (CostingMaterialPostBatchId != -1). !important is
// required because every cell and input carries an inline background-color from getRowColor().
.data-row.pr-generated {
  .data-cell,
  .data-cell input,
  .data-cell textarea,
  .data-cell .GridInput,
  .data-cell .mat-mdc-select-trigger {
    background-color: #E8F5E9 !important;
  }
}

.table-cell {
  flex-shrink: 0; // Prevent shrinking
  flex-grow: 0;   // Prevent growing
  box-sizing: border-box; // Include padding in width
}

.table-body {
  flex: 1;
  overflow: hidden;
  position: relative;
  height: auto !important;
  flex: unset !important;
}

.virtual-scroll-viewport {
  width: 100%;
  height: 100%;
  overflow-x: hidden !important; // no h-scrollbar on viewport; external strip handles it
  overflow-y: auto !important;
}

// Standalone horizontal scrollbar strip — physically below all rows, never overlaps content
.BudgetGrid-external-hscroll {
  height: 8px;
  min-height: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;

  &::-webkit-scrollbar {
    height: 8px;
  }

  &::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
  }

  &::-webkit-scrollbar-track {
    background: #f1f1f1;
  }
}

::ng-deep .virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper {
  width: fit-content;
  min-width: 100%;
}

.header-cell {
  font-weight: 500;
  color: #FFFFFF;
  background: var(--action-primary-default);
  font-stretch: normal;  
  font-style: normal;
  letter-spacing: normal;
  text-align: left;
}

.data-cell {
  color: rgba(26, 26, 26, 0.87);
  font-stretch: normal;  
  font-style: normal;
  letter-spacing: normal;
  text-align: left;
}

.action-cell {
  position: sticky;
  right: 0;
  z-index: 10;
}

.GridInput {
  outline-style: none; 
  height: 30px; 
  border: none; 
  background-color: inherit;
  color: var(--mat-sys-inverse-surface);
  width: 100%;
}

/* Modal Styles */
.modal {
  display: block;
  position: fixed;
  z-index: 999;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  color: rgba(26, 26, 26, 0.87);
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  justify-content: center;
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 50vw;
  height: auto;
  border-radius: 10px;
}

.title {
  font-family: 'Helvetica';
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  line-height: 10px;
  background-color: #FFFFFF;
}

.closeicon {
  color: rgba(26, 26, 26, 0.87);
  width: 48vw;
  display: flex;
  justify-content: right;
  cursor: pointer;
  margin-bottom: 20px;
  margin-top: -35px;
}

.savebutton {
  cursor: pointer;
  margin-top: 10px;
  margin-right: 30px;
  margin-bottom:10px;
  display: inline-flex;
  justify-content: center;
  align-content: center;
  box-shadow: 0px 2px 2px 0px #0000000F;
  border-radius: 6px;
  padding-top: 7px;
  color: #FFFFFF;
  width: 120px;
  height: 32px;
  background-color: var(--action-primary-default);
  font-family: Helvetica;
  font-size: 12px;
  font-weight: 500;
  line-height: 19px;
}

.dropdown_list_data {
  color: var(--type-primary, rgba(26, 26, 26, 0.87));
  font-family: 'Helvetica';
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

.form_label {
  color: rgba(26, 26, 26, 0.87);
  font-family: 'Helvetica';
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 21px;
  text-align: right;
  padding-right: 16px;
}

.PolicyLightBox-Save {
  font-weight: 700;
  line-height: 36px;
  font-size: 12px;
  font-family: Helvetica;
  padding-right: 10px;
  display: inline-block;
  align-content: center;
  margin-right: 5px;
  outline-style: none;
  min-width: 120px;
  height: 32px;
}

/* Checkbox Styles */
::ng-deep #SelectAll .mdc-checkbox__background {
  border: 2px solid white !important;
  background-color: transparent !important;
}

::ng-deep #SelectAll .mdc-checkbox__checkmark {
  color: white !important;
}

::ng-deep #SelectAll .mat-mdc-checkbox-ripple {
  background-color: transparent !important;
}

/* Dropdown Panel Styles */
::ng-deep .level-dropdown-panel {
  min-width: 120px !important;
  max-width: 200px !important;
  
  .mat-mdc-option {
    min-width: 120px !important;
    width: auto !important;
    white-space: nowrap !important;
    padding: 8px 16px !important;
  }
}

::ng-deep .attachment-dropdown-panel {
  min-width: 150px !important;
  max-width: 200px !important;
  
  .mat-mdc-option {
    min-width: 150px !important;
    width: auto !important;
    white-space: nowrap !important;
    padding: 8px 16px !important;
    display: flex !important;
    align-items: center !important;
    
    mat-icon {
      margin-right: 8px !important;
    }
  }
}

::ng-deep .mat-mdc-select-trigger {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

::ng-deep #AttachmentSection {
  .mat-mdc-select-value {
    display: none !important;
  }
  
  .mat-mdc-select-placeholder {
    display: none !important;
  }
  
  .mat-mdc-select-trigger {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 20px !important;
  }
}

::ng-deep #CheckBoxFilter {
  .mat-mdc-select-value {
    display: none !important;
  }
  
  .mat-mdc-select-placeholder {
    display: none !important;
  }
  
  .mat-mdc-select-trigger {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 20px !important;
  }
}

/* Quill Editor Styles */
::ng-deep .ql-container {
  height: 200px;
  width: 100%;
  outline: none !important;
  border: 1px solid #ccc;
}

::ng-deep .ql-editor:focus {
  outline: none !important;
  box-shadow: none !important;
}


.header-text {
  display: inline-block;
  width: 150px;               /* fixed column width */
  padding: 0 10px;
  text-align: right;
  white-space: nowrap;        /* prevent wrap */
  overflow: hidden;           /* hide overflow */
  text-overflow: ellipsis;    /* ... */
}