/* ── Full-height layout: grid grows, action row sticks to the bottom ─────── */
/* Scope to pages that host the exception report so other pages are untouched. */
main:has(.dashboard-page) {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.dashboard-page {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

  .dashboard-page .table-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .dashboard-page .inventory-grid {
    flex: 1 1 auto;
    min-height: 0;
    height: 100% !important;
  }

  .dashboard-page .app-bottom-button-row {
    flex: 0 0 auto;
    padding-top: 8px;
    padding-bottom: 8px;
  }

/* ── Exception heading ───────────────────────────────────────────────────── */
.exception-heading {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 24px 0;
}

.back-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #2563eb;
  text-decoration: none;
}

  .back-button:hover {
    text-decoration: underline;
  }

.exception-title {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  margin: 0;
}

/* ── Toolbar row (Figma node 4231:102306) ────────────────────────────────── */
.er-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  margin: 10px 0;
  background: #ffffff;
  min-height: 53px; /* matches Figma 37px content + 8px top/bottom padding */
  gap: 16px;
}

/* Left: product count label */
.er-product-count {
  font-size: 20px;
  color: #111827;
  white-space: nowrap;
}

  .er-product-count strong {
    font-weight: 700;
  }

/* Right: actions row */
.er-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ── Search wrap: input + clear button ───────────────────────────────────── */
.er-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

/* RadzenTextBox root */
.er-search-input {
  width: 300px !important;
  height: 37px !important;
  border-radius: 4px 0 0 4px !important;
  border-right: none !important;
}

/* Clear button — sits inside the input on the right */
.er-search-clear {
  position: absolute !important;
  right: 36px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 !important;
  min-width: unset !important;
  width: 24px !important;
  height: 24px !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  z-index: 1;
}

  .er-search-clear:hover {
    background: transparent !important;
  }

/* ── Search submit button ────────────────────────────────────────────────── */
/* RadzenButton root */
.er-search-submit {
  width: 36px !important;
  height: 37px !important;
  min-width: unset !important;
  padding: 0 !important;
  border-radius: 0 4px 4px 0 !important;
  flex-shrink: 0 !important;
}

/* ── No results state ─────────────────────────────────────────────────────── */
.er-no-results {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  padding-top: 48px;
  width: 100%;
  min-height: 400px;
  text-align: center;
}

.er-no-results-title {
  /* Heading/07 */
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px; /* 150% */
}

.er-no-results-subtitle {
  text-align: center;
  /* Body/02 - Compact */
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 17.5px; /* 125% */
  letter-spacing: 0.16px;
}

/* ── Multiple UPC expand / collapse rows ─────────────────────────────────── */

/* Parent (collapsible) row: Product Description cell holds the toggle */
.er-group-parent-cell {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px;
  width: 100%;
  cursor: pointer;
}

/* Group header rows (product group) are clickable to expand/collapse */
.inventory-grid tr.rz-group-row {
  cursor: pointer;
}

.er-group-parent-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}

.er-group-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}

/* Nested child rows share the same left alignment as their parent */
.inventory-grid .er-group-child-cell {
  padding-left: 10px;
}

/* Move the Radzen group expand/collapse chevron to the far right of the row.
   Radzen renders the toggle button in the first cell (td.rz-col-icon). Keep the
   normal table layout intact and absolutely position the toggle button to the
   right edge of the row so the group label keeps its place on the left. */
.inventory-grid tr.rz-group-row {
  position: relative;
}

/* Remove the expand/collapse slide/animation at the category (group) level */
.inventory-grid .rz-datatable-data > tr {
  transition: none !important;
  animation: none !important;
}

  .inventory-grid tr.rz-group-row > td.rz-col-icon {
    width: 0;
    padding: 0;
  }

    /* Stretch the toggle button across the whole row so a click anywhere on the
       group header expands/collapses it. The chevron itself stays pinned right. */
    .inventory-grid tr.rz-group-row > td.rz-col-icon button {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      background: transparent;
      border: none;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 16px;
      cursor: pointer;
    }

    /* Keep the stretched toggle button transparent on hover/focus so it never
       paints a background over the group label behind it. */
    .inventory-grid tr.rz-group-row > td.rz-col-icon button:hover,
    .inventory-grid tr.rz-group-row > td.rz-col-icon button:focus,
    .inventory-grid tr.rz-group-row > td.rz-col-icon button:active {
      background: transparent !important;
      box-shadow: none !important;
    }

    /* Group label (product group name) matches the Product Description cell font */
    .inventory-grid tr.rz-group-row .rz-column-title {
      font-size: 16px;
      line-height: 20px;
      letter-spacing: 0.16px;
      color: #2a2e30;
      font-weight: 400;
      text-transform: none;
    }

    /* Replace Radzen's built-in chevron glyph with the AppSvg up/down chevrons.
   Hide the icon font glyph and render the SVG as a 24x24 background image.
   Collapsed rows show the down chevron; expanded rows (button aria-expanded
   = true) show the up chevron. */
    .inventory-grid tr.rz-group-row > td.rz-col-icon .rz-row-toggler {
      font-size: 0;
      width: 24px;
      height: 24px;
      background-repeat: no-repeat;
      background-position: center;
      background-size: 24px 24px;
      background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4.24076%208.37804C3.88134%208.79736%203.9299%209.42866%204.34923%209.78808L11.3492%2015.7881C11.7237%2016.1091%2012.2763%2016.1091%2012.6508%2015.7881L19.6508%209.78808C20.0701%209.42866%2020.1187%208.79736%2019.7593%208.37804C19.3999%207.95871%2018.7686%207.91015%2018.3492%208.26957L12%2013.7117L5.65081%208.26957C5.23148%207.91015%204.60018%207.95871%204.24076%208.37804Z%22%20fill%3D%22%230C60A5%22%2F%3E%3C%2Fsvg%3E");
    }

      .inventory-grid tr.rz-group-row > td.rz-col-icon .rz-row-toggler::before {
        content: none;
      }

    .inventory-grid tr.rz-group-row > td.rz-col-icon button[aria-expanded="true"] .rz-row-toggler {
      background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4.24076%2015.6796C3.88134%2015.2603%203.9299%2014.629%204.34923%2014.2695L11.3492%208.26953C11.7237%207.94854%2012.2763%207.94854%2012.6508%208.26953L19.6508%2014.2695C20.0701%2014.629%2020.1187%2015.2603%2019.7593%2015.6796C19.3999%2016.0989%2018.7686%2016.1475%2018.3492%2015.788L12%2010.3459L5.65081%2015.788C5.23148%2016.1475%204.60018%2016.0989%204.24076%2015.6796Z%22%20fill%3D%22%230C60A5%22%2F%3E%3C%2Fsvg%3E");
    }

/* Dash placeholder used on collapsed parent rows */
.er-dash {
  color: #2a2e30;
  font-size: 14px;
  line-height: 17.5px;
  letter-spacing: 0.16px;
}

/* Recount-requested row highlight. Applied via OnRowRender toggling the
   er-recount-selected class. Targets cells so it wins over Radzen row striping. */
.inventory-grid tr.er-recount-selected,
.inventory-grid tr.er-recount-selected td {
  background-color: #ffdfe0 !important;
}

/* ── Compound count-location cells (Sales Floor / Back Room) ──────────────── */
.count-cell {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
}

.count-line {
  font-size: 14px;
  line-height: 17.5px;
  letter-spacing: 0.16px;
  color: #2a2e30;
  white-space: nowrap;
  width: 100%;
}

  /* Disabled count type (Figma token text/disabled) */
  .count-line.count-disabled {
    color: #9ba1a6;
  }

/* ── Tablet portrait: rotate-to-landscape notice (hidden by default) ──────── */
.er-rotate-notice {
  display: none;
}

.er-rotate-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  color: #2a2e30;
}

.er-rotate-subtitle {
  font-size: 16px;
  line-height: 24px;
  color: #464852;
  max-width: 360px;
}

/* ── Tablet landscape (1280 x 800): compress so the full report fits ─────── */
@media (min-width: 1280px) and (max-width: 1366px) {
  .dashboard-page {
    min-width: 0;
  }

  .table-wrapper {
    overflow-x: auto;
  }

  .inventory-grid .rz-datatable-table {
    min-width: 0;
  }

  .inventory-grid thead th,
  .inventory-grid tbody td {
    padding-left: 6px;
    padding-right: 6px;
  }

  .cell,
  .header-cell {
    padding-left: 6px;
    padding-right: 6px;
  }
}

/* ── Below tablet landscape (portrait 800, narrow windows): prompt to rotate ─ */
/* A 1280 x 800 tablet shows the full report in landscape (>= 1280px) and this  */
/* rotate notice in portrait (800px wide) or any narrower viewport.             */
@media (max-width: 1279.98px) {
  .dashboard-page {
    min-width: 0;
  }

  .er-toolbar,
  .table-wrapper,
  .app-bottom-button-row {
    display: none !important;
  }

  .er-rotate-notice {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 16px;
    padding: 48px 24px;
    min-height: 50vh;
  }
}