/* ===== SYNCFUSION GRID/TABLE STYLES ===== */
/* This file contains all styles related to Syncfusion Grid components to match the STC design system. */

@layer components {
  /* ===== GRID GENERAL ===== */

  /* Grid container wrapper */
  .e-grid {
    border-radius: var(--border-radius-m) !important;
    border: 2px solid var(--color-grey-30) !important;
    overflow: hidden !important;
    background-color: var(--color-white-100) !important;
  }

  /* Remove any default borders from internal grid components */
  .e-grid,
  .e-gridheader,
  .e-gridcontent,
  .e-headercontent,
  .e-content,
  .e-table,
  .e-row,
  .e-headercell,
  .e-rowcell {
    border: none !important;
  }

  /* ===== GRID HEADER ===== */

  .e-grid .e-gridheader {
    background-color: var(--color-grey-20) !important;
    border-bottom: 2px solid var(--color-grey-30) !important;
  }

  .e-grid .e-headercell {
    padding: 16px 20px !important;
    font-family: var(--font-family-sans) !important;
    font-size: var(--font-size-micro) !important;
    font-weight: 500 !important;
    color: var(--color-grey-80) !important;
    text-transform: none !important;
    letter-spacing: var(--letter-spacing-wide) !important;
    line-height: var(--line-height-normal) !important;
    height: auto !important;
  }

  /* Column header sort icons */
  .e-grid .e-headercell .e-sortfilterdiv {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .e-grid .e-gridheader .e-headercelldiv .e-sortasc,
  .e-grid .e-gridheader .e-headercelldiv .e-sortdesc {
    font-size: 0 !important; /* Hide default icon font */
    width: 16px !important;
    height: 16px !important;
    display: inline-block !important;
    background-size: 16px 16px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
  }

  .e-grid .e-gridheader .e-headercelldiv .e-sortasc::before {
    content: none !important;
  }

  .e-grid .e-gridheader .e-headercelldiv .e-sortdesc::before {
    content: none !important;
  }

  .e-grid .e-gridheader .e-headercelldiv .e-sortasc {
    background-image: url("/img/icons/arrow-up.svg") !important;
  }

  .e-grid .e-gridheader .e-headercelldiv .e-sortdesc {
    background-image: url("/img/icons/arrow-up.svg") !important;
    transform: rotate(180deg) !important;
  }

  /* Column menu icon (three dots) */
  .e-grid .e-headercell .e-columnmenudiv .e-columnmenu {
    font-size: 0 !important; /* Hide default icon font */
  }
  .e-grid .e-headercell .e-columnmenudiv .e-columnmenu::before {
    content: none !important;
  }

  .e-grid .e-headercell .e-columnmenudiv .e-columnmenu {
    background-image: url("/img/icons/more-vertical.svg") !important;
    width: 16px !important;
    height: 16px !important;
    display: inline-block !important;
    background-size: 16px 16px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
  }

  /* ===== GRID CONTENT & ROWS ===== */

  .e-grid .e-content {
    background-color: var(--color-white-100) !important;
  }

  .e-grid .e-rowcell {
    padding: 16px 20px !important;
    font-family: var(--font-family-sans) !important;
    font-size: var(--font-size-milli) !important;
    font-weight: 400 !important;
    color: var(--color-text) !important;
    border-bottom: 1px solid var(--color-grey-30) !important;
    line-height: var(--line-height-relaxed) !important;
  }

  /* Last row in the table should not have a bottom border */
  .e-grid .e-row:last-child .e-rowcell {
    border-bottom: none !important;
  }

  /* Alternating row style */
  .e-grid .e-row:nth-child(even):not(.e-altrow) {
    background-color: transparent !important; /* No color change on even rows */
  }

  .e-grid .e-row.e-altrow {
    background-color: var(
      --color-grey-10
    ) !important; /* Subtle background for alternating rows */
  }

  /* Hover state for rows */
  .e-grid .e-row:hover .e-rowcell {
    background-color: var(--color-primary-10) !important;
    cursor: pointer !important;
  }

  /* Selected row style */
  .e-grid .e-row.e-selectionbackground,
  .e-grid .e-row.e-selectionbackground > .e-rowcell {
    background-color: var(--color-primary-20) !important;
  }

  /* ===== GRID COMMAND BUTTONS (EDIT / DELETE) ===== */
  .e-grid .e-rowcell .e-flat {
    background-color: transparent !important;
    border-radius: var(--border-radius-s) !important;
    position: relative !important;
    z-index: 1; /* ensure above row hover background */
  }

  .e-grid .e-rowcell .e-flat:hover,
  .e-grid .e-rowcell .e-flat:focus {
    background-color: var(--color-primary-30) !important; /* stronger than row hover */
    transition: background-color 0.15s ease-in-out !important;
  }

  .e-grid .e-rowcell .e-flat:active {
    background-color: var(--color-primary-40) !important;
  }

  /* ===== GRID PAGER ===== */

  .e-grid .e-gridpager {
    padding: 24px 20px !important; /* add horizontal side padding */
    margin-bottom: 48px !important; /* external spacing below pager */
    border-top: 2px solid var(--color-grey-30) !important;
    background-color: var(--color-white-100) !important;
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
  }

  /* Reset margins on pager container children to eliminate unwanted gaps */
  .e-grid .e-pagercontainer > div {
    margin: 0 !important;
  }

  /* Remove previous manual offsets on navigation buttons */
  .e-grid .e-pager .e-first,
  .e-grid .e-pager .e-prev,
  .e-grid .e-pager .e-next,
  .e-grid .e-pager .e-last {
    top: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Ensure consistent horizontal gap between visible buttons */
  .e-grid .e-pager .e-first,
  .e-grid .e-pager .e-prev,
  .e-grid .e-pager .e-next,
  .e-grid .e-pager .e-last,
  .e-grid .e-pager .e-numericitem {
    margin-inline: 4px !important;
  }

  .e-grid .e-pagercontainer {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    flex-grow: 1 !important;
    border: none !important;
  }

  .e-grid .e-gridpager .e-pager {
    display: flex !important;
    gap: 4px !important;
    align-items: center !important;
  }

  /* Hide the '...' spacers in the pager to fix gaps */
  .e-grid .e-pagercontainer .e-pp,
  .e-grid .e-pagercontainer .e-np {
    display: none !important;
  }

  .e-grid .e-gridpager .e-numericcontainer {
    display: flex !important;
    gap: 0 !important; /* avoid extra spaces from hidden page wrappers */
  }
  
  .e-grid .e-gridpager .e-mfirst,
  .e-grid .e-gridpager .e-mprev,
  .e-grid .e-gridpager .e-mnext,
  .e-grid .e-gridpager .e-mlast {
      display: none !important;
  }

  /* Flex ordering for pager elements to match design */
  .e-grid .e-gridpager .e-pagesizes {
    order: 1;
  }
  .e-grid .e-gridpager .e-pagercontainer {
    order: 2;
  }
  .e-grid .e-gridpager .e-parentmsgbar {
    order: 3;
  }

  .e-grid .e-pager .e-prev,
  .e-grid .e-pager .e-next,
  .e-grid .e-pager .e-first,
  .e-grid .e-pager .e-last {
    font-family: var(--font-family-sans) !important;
    font-size: var(--font-size-micro) !important;
    font-weight: 500 !important;
    color: var(--color-grey-80) !important;
    border: 2px solid var(--color-grey-30) !important;
    border-radius: var(--border-radius-s) !important;
    min-width: 40px !important;
    height: 40px !important;
    display: inline-flex !important; /* keep arrows visible */
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    background-color: var(--color-white-100) !important;
    box-shadow: none !important;
    cursor: pointer !important;
    padding: 0 !important; /* remove Syncfusion's default vertical padding */
  }

  /* Numeric pager items inherit the same look but without the !important on `display` so inline `display:none` can take effect */
  .e-grid .e-pager .e-numericitem,
  .e-grid .e-pager .e-currentitem {
    font-family: var(--font-family-sans) !important;
    font-size: var(--font-size-micro) !important;
    font-weight: 500 !important;
    color: var(--color-grey-80) !important;
    border: 2px solid var(--color-grey-30) !important;
    border-radius: var(--border-radius-s) !important;
    min-width: 40px !important;
    height: 40px !important;
    display: inline-flex; /* no !important */
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    background-color: var(--color-white-100) !important;
    box-shadow: none !important;
    cursor: pointer !important;
    padding: 0 !important; /* remove Syncfusion's default vertical padding */
    line-height: 40px !important; /* vertical center the number */
  }

  .e-grid .e-pager .e-numericitem:hover,
  .e-grid .e-pager .e-prev:hover,
  .e-grid .e-pager .e-next:hover,
  .e-grid .e-pager .e-first:hover,
  .e-grid .e-pager .e-last:hover {
    border-color: var(--color-primary-50) !important;
    color: var(--color-primary-50) !important;
    background-color: var(--color-primary-10) !important;
  }

  .e-grid .e-pager .e-currentitem,
  .e-grid .e-pager .e-currentitem:hover {
    background-color: var(--color-primary-50) !important;
    border: none !important;
    color: var(--color-white-100) !important;
  }

  .e-grid .e-pager .e-pp,
  .e-grid .e-pager .e-np {
    font-size: 0 !important; /* Hide default icon fonts */
  }

  .e-grid .e-pager .e-pp::before,
  .e-grid .e-pager .e-np::before {
    content: "" !important;
    width: 16px !important;
    height: 16px !important;
    display: inline-block !important;
    background-size: 16px 16px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
  }

  .e-grid .e-pager .e-pp::before {
    background-image: url("/img/icons/chevron-right.svg") !important;
    transform: rotate(180deg) !important;
  }

  .e-grid .e-pager .e-np::before {
    background-image: url("/img/icons/chevron-right.svg") !important;
  }

  /* Pager page size dropdown */
  .e-grid .e-pager .e-pagerdropdown {
    width: auto !important;
    min-width: 100px !important;
  }
  .e-grid .e-pager .e-pagerdropdown .e-dropdownlist {
    height: 40px !important;
  }

  /* Pager info text */
  .e-grid .e-pager .e-pagerstatustext {
    font-family: var(--font-family-sans) !important;
    font-size: var(--font-size-micro) !important;
    color: var(--color-grey-60) !important;
  }

  /* ===== GRID TOOLBAR (REMOVED) ===== */
  /* Toolbar is now handled with custom HTML outside the grid component. */
  /* The styles for .e-toolbar are no longer needed here. */

  /* ===== COLUMN CHOOSER & FILTER MENU ===== */

  .e-grid-menu,
  .e-column-chooser-dialog {
    border-radius: var(--border-radius-m) !important;
    border: 1px solid var(--color-border-light) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  }

  /* Style ONLY the items inside the column-chooser dialog */
  .e-column-chooser-dialog .e-cc-list li {
    padding: 12px 16px !important;
    font-family: var(--font-family-sans) !important;
    font-size: var(--font-size-micro) !important;
    cursor: pointer !important;
  }

  .e-column-chooser-dialog .e-cc-list li:hover {
    background-color: var(--color-grey-20) !important;
  }

  /* Filter popup styling */
  .e-grid-filter-menu .e-filter-parent {
    padding: 20px !important;
  }

  .e-grid-filter-menu .e-footer-content {
    padding: 16px 20px !important;
    border-top: 1px solid var(--color-border-light) !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 12px !important;
  }

  /* Base style for filter buttons */
  .e-grid-filter-menu .e-btn {
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12.5px 1rem !important;
    border: 1px solid transparent !important;
    border-radius: 26px !important;
    font-weight: 500 !important;
    font-size: var(--font-size-micro) !important;
    line-height: var(--line-height-normal) !important;
    letter-spacing: var(--letter-spacing-wide) !important;
    text-decoration: none !important;
    text-align: center !important;
    box-shadow: none !important;
    text-transform: none !important;
  }

  /* Primary filter button (e.g., "Filter") */
  .e-grid-filter-menu .e-btn.e-primary {
    background-color: var(--color-primary-50) !important;
    color: var(--color-white-100) !important;
    border-color: var(--color-primary-50) !important;
  }

  .e-grid-filter-menu .e-btn.e-primary:hover:not(:disabled) {
    background-color: var(--color-primary-60) !important;
    border-color: var(--color-primary-60) !important;
  }

  /* Secondary filter button (e.g., "Clear") */
  .e-grid-filter-menu .e-btn:not(.e-primary) {
    background-color: transparent !important;
    color: var(--color-black-100) !important;
    border-color: var(--color-black-100) !important;
    border-width: 2px !important;
  }

  .e-grid-filter-menu .e-btn:not(.e-primary):hover:not(:disabled) {
    background-color: var(--color-black-100) !important;
    color: var(--color-white-100) !important;
  }

  /* Fix checkbox alignment within the column-chooser */
  .e-column-chooser-dialog .e-checkbox-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  /* Disabled state for navigation arrows */
  .e-grid .e-pager .e-prev.e-disable,
  .e-grid .e-pager .e-first.e-disable,
  .e-grid .e-pager .e-next.e-disable,
  .e-grid .e-pager .e-last.e-disable {
    border-color: var(--color-grey-20) !important;
    color: var(--color-grey-40) !important;
    cursor: default !important;
    background-color: var(--color-white-100) !important;
    opacity: 0.5 !important; /* visual cue for disabled */
  }

    /* ==== FIX: Provide more room for narrow columns === */
    .e-grid .e-columnsheader .e-headercell:not(.e-stackedheadercell) {
      padding: 16px 8px !important; /* keep vertical padding, shrink horizontal */
    }

    /* Match row-cell horizontal padding to header so numbers align */
    .e-grid .e-content .e-rowcell {
      padding: 16px 8px !important;
    }

    /* Allow long header text to wrap instead of ellipsis */
    .e-grid .e-headercell .e-headertext {
      white-space: normal !important;
    }

    /* Reduce gap between header text and sort/filter icon */
    .e-grid .e-headercell .e-sortfilterdiv {
      gap: 4px !important;
    }

    /* Prevent header text from being clipped */
    .e-grid .e-headercell {
      overflow: visible !important;
    }
    .e-grid .e-headercelldiv {
      overflow: visible !important;
      text-transform: none !important;
      height: auto !important;
    }
    .e-grid .e-headercelldiv .e-headertext {
      text-overflow: initial !important;
      font-size: var(--font-size-micro) !important; /* match stacked header size */
      white-space: break-spaces;
    }
    /* === Price table single-header (rowspan=2) font adjustment === */
    .e-grid .e-headercell[aria-rowspan="2"],
    .e-grid .e-headercell[aria-rowspan="2"] .e-headertext {
      font-size: var(--font-size-micro) !important; /* match stacked header size */
      font-weight: 500 !important; /* keep visual weight consistent */
      white-space: break-spaces;
    }

    .e-grid .e-gridheader .e-stackedheadercelldiv {
      font-size: var(--font-size-micro) !important; /* match stacked header size */
      padding: 0 !important;
      white-space: break-spaces;
    }
}