/* Invoice workspace only. Loaded after shared/mobile styles so the grid owns
   exactly one native scroll surface and is not affected by generic table rules. */
body.wua-invoice-view .ksjs-ksks,
body.wua-invoice-view .MuiDataGrid-root,
body.wua-invoice-view .MuiDataGrid-main {
  overflow: hidden !important;
}

/* The invoice view uses the wrapper only for layout. Remove the old card
   treatment so the controls and table sit directly on the page surface. */
body.wua-invoice-view .ksjs-ksks {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body.wua-invoice-view .ksjs-ksks .MuiDataGrid-root {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Give the invoice grid a real, resolved height so MUI's useResizeContainer
   never measures its parent as 0px on first render. The grid sits inside the
   flex-grow Box, which already has an inline min-height; make the grid fill
   it so it always has a measurable height. */
body.wua-invoice-view .ksjs-ksks:has([data-field="invoiceId"]) .MuiBox-root:has(.MuiDataGrid-root) {
  flex: 1 1 auto !important;
  min-height: 300px !important;
}

body.wua-invoice-view .ksjs-ksks:has([data-field="invoiceId"]) .MuiDataGrid-root {
  height: 100% !important;
}

/* The grid has a fixed intrinsic content width (flex columns + long cell
   text). In the flex-column page pane, flex items default to min-width:auto,
   so the grid can grow wider than the pane and push the table past the page
   margins at high zoom. Constrain the whole chain to the pane width up front;
   horizontal overflow is handled by the grid's own virtual scroller, never by
   widening the page. */
body.wua-invoice-view .ksjs-ksks,
body.wua-invoice-view .ksjs-ksks .MuiBox-root,
body.wua-invoice-view .ksjs-ksks .MuiDataGrid-root {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* The large-screen invoice view is a workspace, not a modal card. */
/* Selection actions share the summary container. Allow a second row and
   override the shared mobile rule that hides its last child as a pager. */
.ksjs-ksks:has([data-field="invoiceId"]) > div:first-child:has(.tables-actions-handle) {
  flex-wrap: wrap !important;
  flex-shrink: 0 !important;
  height: auto !important;
  overflow: visible !important;
}

.ksjs-ksks:has([data-field="invoiceId"]) > div:first-child > .tables-actions-handle {
  display: grid !important;
  position: static !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 40px !important;
  margin: 4px 0 !important;
}

.MuiPaper-root.MuiDialog-paper.wua-invoice-dialog {
  width: 100% !important;
  max-width: none !important;
  height: 100dvh !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.MuiPaper-root.MuiDialog-paper.wua-invoice-dialog .MuiDialogContent-root {
  padding: 0 !important;
  overflow: hidden !important;
}

/* Large invoice view experiment: compact the filters into the title row and
   remove the unused gap before the table. */
.MuiPaper-root.MuiDialog-paper.wua-invoice-dialog .MuiDialogTitle-root {
  position: relative !important;
  min-height: 42px !important;
  padding: 7px 220px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

.MuiPaper-root.MuiDialog-paper.wua-invoice-dialog .wua-large-invoice-content {
  position: relative !important;
  padding-top: 0 !important;
}

.MuiPaper-root.MuiDialog-paper.wua-invoice-dialog .wua-large-invoice-content > * {
  margin-top: 0 !important;
}

.MuiPaper-root.MuiDialog-paper.wua-invoice-dialog .wua-invoice-category-filter,
.MuiPaper-root.MuiDialog-paper.wua-invoice-dialog .wua-invoice-period-filter {
  position: absolute !important;
  top: -51px !important;
  z-index: 10 !important;
  width: 180px !important;
  min-width: 180px !important;
  margin: 0 !important;
}

.MuiPaper-root.MuiDialog-paper.wua-invoice-dialog .wua-invoice-category-filter {
  left: 8px !important;
}

.MuiPaper-root.MuiDialog-paper.wua-invoice-dialog .wua-invoice-period-filter {
  right: 8px !important;
}

.MuiPaper-root.MuiDialog-paper.wua-invoice-dialog .wua-invoice-category-filter .MuiInputBase-root,
.MuiPaper-root.MuiDialog-paper.wua-invoice-dialog .wua-invoice-period-filter .MuiInputBase-root {
  height: 36px !important;
  min-height: 36px !important;
  font-size: 13px !important;
}

/* Also match the dialog directly from its invoice grid. This keeps the rule
   active even when React paints the dialog before its title is available. */
.MuiPaper-root.MuiDialog-paper:has([data-field="invoiceId"]) {
  width: 100% !important;
  max-width: none !important;
  height: 100dvh !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.MuiPaper-root.MuiDialog-paper:has([data-field="invoiceId"]) .MuiDialogContent-root {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  height: calc(100dvh - 58px) !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 58px) !important;
  padding: 0 !important;
  padding-bottom: 22px !important;
  overflow: hidden !important;
}

.MuiPaper-root.MuiDialog-paper:has([data-field="invoiceId"]) .MuiDialogContent-root .ksjs-ksks {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

.MuiPaper-root.MuiDialog-paper:has([data-field="invoiceId"]) .MuiDataGrid-root {
  position: relative !important;
  overflow: visible !important;
  padding-bottom: 22px !important;
  box-sizing: border-box !important;
  height: calc(100% - 42px) !important;
  min-height: 0 !important;
}

.MuiPaper-root.MuiDialog-paper:has([data-field="invoiceId"]) .wua-grid-horizontal-scrollbar {
  position: fixed !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 1600 !important;
  display: block !important;
  height: 18px !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* The large invoice workspace remains scrollable, but its scrollbars should
   not consume space or appear as a second visual frame. */
.MuiPaper-root.MuiDialog-paper.wua-invoice-dialog .MuiDataGrid-virtualScroller {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.MuiPaper-root.MuiDialog-paper.wua-invoice-dialog .MuiDataGrid-virtualScroller::-webkit-scrollbar,
.MuiPaper-root.MuiDialog-paper.wua-invoice-dialog .MuiDataGrid-virtualScroller::-webkit-scrollbar:horizontal,
.MuiPaper-root.MuiDialog-paper.wua-invoice-dialog .MuiDataGrid-virtualScroller::-webkit-scrollbar:vertical {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.MuiPaper-root.MuiDialog-paper.wua-invoice-dialog .MuiDataGrid-scrollbar--horizontal,
.MuiPaper-root.MuiDialog-paper.wua-invoice-dialog .MuiDataGrid-scrollbar--vertical {
  display: block !important;
}

.MuiPaper-root.MuiDialog-paper:has([data-field="invoiceId"]) .MuiDataGrid-virtualScroller {
  box-sizing: border-box !important;
  min-height: 0 !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  scrollbar-width: auto !important;
  -ms-overflow-style: auto !important;
  scrollbar-color: #6d5dfc #e7e5ff !important;
  scrollbar-gutter: stable both-edges !important;
  overflow-anchor: none !important;
}

.MuiPaper-root.MuiDialog-paper:has([data-field="invoiceId"]) .MuiDataGrid-virtualScroller::-webkit-scrollbar {
  width: 12px !important;
  height: 14px !important;
  display: block !important;
}

.MuiPaper-root.MuiDialog-paper:has([data-field="invoiceId"]) .MuiDataGrid-scrollbar--horizontal,
.MuiPaper-root.MuiDialog-paper:has([data-field="invoiceId"]) .MuiDataGrid-scrollbar--vertical {
  display: block !important;
}

/* MUI scrolls the headers with the body. Keep the full content width;
   clipping belongs to the grid viewport, not the column header strip.
   max-content also accommodates the shared spreadsheet cell widths. */
.MuiPaper-root.MuiDialog-paper:has([data-field="invoiceId"]) .MuiDataGrid-columnHeaders {
  width: var(--DataGrid-rowWidth) !important;
  min-width: max-content !important;
  overflow: visible !important;
}

/* MUI recycles and transforms rows while scrolling. Sticky cells inside those
   rows are repainted repeatedly and cause the visible cells to vibrate. */
.MuiPaper-root.MuiDialog-paper:has([data-field="invoiceId"]) [data-field="billTo"] {
  position: static !important;
  right: auto !important;
  z-index: auto !important;
  box-shadow: none !important;
}

body.wua-invoice-view .MuiDataGrid-virtualScroller {
  overflow-x: auto !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable both-edges;
  -webkit-overflow-scrolling: auto;
}

/* Keep native wheel and scrollbar movement enabled alongside the arrow buttons. */
.ksjs-ksks:has([data-field="invoiceId"]) .MuiDataGrid-virtualScroller {
  overflow-y: auto !important;
  scrollbar-width: auto !important;
}

/* Keep WhatsApp floating in the bottom-left corner. */
.lp-whatsapp-btn {
  bottom: 12px !important;
  left: 14px !important;
  right: auto !important;
  height: 42px !important;
  width: 42px !important;
}

/* Restore MUI's content-wide header strip instead of the shared stylesheet's
   viewport-wide clipping. The current grid scrolls this strip natively and
   does not render the legacy columnHeadersInner element. */
body.wua-invoice-view .ksjs-ksks .MuiDataGrid-columnHeaders {
  width: var(--DataGrid-rowWidth) !important;
  min-width: max-content !important;
  overflow: visible !important;
}

/* Do not let generic table styles change the virtual row measurements. */
body.wua-invoice-view .MuiDataGrid-cell,
body.wua-invoice-view .MuiDataGrid-cellContent,
body.wua-invoice-view .MuiDataGrid-columnHeaderTitle {
  overflow: hidden !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

/* Invoice labels need to remain identifiable while the data columns retain
   their spreadsheet widths. Allow the header title to use two lines instead
   of hiding the important part of a meter or payment label. */
body.wua-invoice-view .ksjs-ksks .MuiDataGrid-columnHeaders {
  min-height: 58px !important;
  max-height: 58px !important;
}

body.wua-invoice-view .ksjs-ksks .MuiDataGrid-columnHeaderTitle {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  line-height: 1.15 !important;
  overflow-wrap: anywhere !important;
}

/* Keep the customer identity visible while the remaining invoice columns
   continue horizontally beyond the viewport. */
body.wua-invoice-view .ksjs-ksks [data-field="billTo"] {
  position: sticky !important;
  right: 0 !important;
  z-index: 4 !important;
  flex: 0 0 240px !important;
  width: 240px !important;
  min-width: 240px !important;
  max-width: 240px !important;
  background: #fff !important;
  box-shadow: -8px 0 12px rgba(15, 23, 42, 0.12) !important;
}

body.wua-invoice-view .ksjs-ksks .MuiDataGrid-columnHeader[data-field="billTo"] {
  color: #fff !important;
  background: #00634e !important;
}

body.wua-invoice-view .ksjs-ksks .MuiDataGrid-row:nth-of-type(even) [data-field="billTo"] {
  background: #f7f8fc !important;
}

/* The invoice renderer puts the amount and its fallback label in nested divs.
   Keep both lines inside the cell when MUI recycles rows during scrolling. */
body.wua-invoice-view .ksjs-ksks [data-field="outstandingBill"],
body.wua-invoice-view .ksjs-ksks [data-field="totalBill"] {
  overflow: hidden !important;
  contain: paint !important;
}

body.wua-invoice-view .ksjs-ksks [data-field="outstandingBill"] > div,
body.wua-invoice-view .ksjs-ksks [data-field="totalBill"] > div {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

body.wua-invoice-view .ksjs-ksks [data-field="outstandingBill"] > div > div,
body.wua-invoice-view .ksjs-ksks [data-field="totalBill"] > div > div {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.wua-invoice-view .wua-current-cycle-invoice-header {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  padding-bottom: 2px !important;
}

body.wua-invoice-view .wua-current-cycle-invoice-header > * { flex: 0 0 auto !important; }
body.wua-invoice-view .wua-current-cycle-invoice-header .MuiFormControl-root { min-width: 145px !important; }
body.wua-invoice-view .wua-current-cycle-invoice-header .MuiInputLabel-root { font-size: 12px !important; }
body.wua-invoice-view .wua-current-cycle-invoice-header .MuiSelect-select,
body.wua-invoice-view .wua-current-cycle-invoice-header input { font-size: 14px !important; padding-top: 9px !important; padding-bottom: 9px !important; }
body.wua-invoice-view .wua-current-cycle-invoice-header button { min-height: 34px !important; padding: 5px 11px !important; font-size: 13px !important; }
body.wua-invoice-view .wua-reading-edit-toggle { border: 1px solid #4f46e5 !important; border-radius: 10px !important; background: #fff !important; color: #3730a3 !important; font-weight: 800 !important; white-space: nowrap !important; cursor: pointer !important; }
body.wua-invoice-view .wua-reading-edit-toggle[aria-pressed="true"] { border-color: #087f5b !important; background: #087f5b !important; color: #fff !important; }

/* The regular invoice page needs the same usable scroll surfaces as the
   large view. Keep scrollbar space stable while rows are virtualized. */
body.wua-invoice-view .ksjs-ksks .MuiDataGrid-virtualScroller {
  overflow-x: auto !important;
  overflow-y: auto !important;
  scrollbar-width: auto !important;
  -ms-overflow-style: auto !important;
  scrollbar-color: #6d5dfc #e7e5ff !important;
  scrollbar-gutter: stable both-edges !important;
  overflow-anchor: none !important;
}

body.wua-invoice-view .ksjs-ksks .MuiDataGrid-virtualScroller::-webkit-scrollbar {
  width: 12px !important;
  height: 14px !important;
  display: block !important;
}

body.wua-invoice-view .ksjs-ksks .MuiDataGrid-scrollbar--horizontal,
body.wua-invoice-view .ksjs-ksks .MuiDataGrid-scrollbar--vertical {
  display: block !important;
}

/* MUI renders the horizontal track as a separate layer at the grid bottom.
   Reserve that strip so the normal invoice page cannot clip it. */
body.wua-invoice-view .ksjs-ksks .MuiDataGrid-root {
  overflow: visible !important;
}

body.wua-invoice-view .ksjs-ksks .MuiDataGrid-scrollbar--horizontal {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 5 !important;
  display: block !important;
  height: 14px !important;
  min-height: 14px !important;
  overflow-x: scroll !important;
  overflow-y: hidden !important;
  scrollbar-width: auto !important;
  scrollbar-color: #6d5dfc #e7e5ff !important;
}

body.wua-invoice-view .ksjs-ksks .MuiDataGrid-scrollbar--horizontal::-webkit-scrollbar {
  height: 14px !important;
  display: block !important;
}

body.wua-invoice-view .ksjs-ksks .MuiDataGrid-scrollbar--horizontal::-webkit-scrollbar-thumb {
  border: 3px solid #e7e5ff !important;
  border-radius: 999px !important;
  background: #6d5dfc !important;
}

/* Keep the generated table bar visible at the bottom of the normal invoice
   workspace, not below the clipped DataGrid box. */
body.wua-invoice-view .wua-grid-horizontal-scrollbar {
  position: fixed !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 1400 !important;
  display: block !important;
  height: 18px !important;
}

/* Sticky cells are repainted as MUI recycles rows and cause the Billed To
   column to shimmer or appear as a separate floating layer. */
body.wua-invoice-view .ksjs-ksks [data-field="billTo"] {
  position: static !important;
  right: auto !important;
  z-index: auto !important;
  box-shadow: none !important;
}

/* The arrow controls share the right-side lane with the native vertical
   scrollbar. Keep the lane transparent so the scrollbar remains visible. */
.wua-invoice-scroll-lane {
  position: relative !important;
  z-index: 6 !important;
  width: 28px !important;
  min-width: 28px !important;
  margin-left: -28px !important;
  pointer-events: none !important;
  background: transparent !important;
}

.wua-invoice-scroll-lane > button {
  position: relative !important;
  z-index: 7 !important;
  pointer-events: auto !important;
}

@media (max-width:700px) {
  body.wua-invoice-view .wua-reading-edit-toggle { min-height: 34px !important; padding: 0 10px !important; font-size: 12px !important; }
}