/* Mobile overrides for the deployed dashboard bundle. */

html,
body,
#root {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* Keep the notification list area large enough for its empty state and rows. */
.msj-wpwo-sks {
  min-height: 520px !important;
  height: 100% !important;
}

.msj-wpwo-sks .llsp-wws {
  height: 100% !important;
  grid-template-rows: 40px minmax(0, 1fr) !important;
}

.msj-wpwo-sks .h-ksls.h100 {
  height: auto !important;
  min-height: 260px !important;
  overflow: visible !important;
  flex-direction: column !important;
  gap: 12px;
}

/* Desktop invoicing workspace: preserve full values by using spreadsheet-like
   fixed columns and horizontal scrolling instead of squeezing every field. */
@media (min-width: 769px) {
  .ksjs-ksks:has([data-field="invoiceId"]) > .grid.jdjss-lls {
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .ksjs-ksks:has([data-field="invoiceId"]) > div:first-child {
    min-height: 38px !important;
    margin: 0 !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  .ksjs-ksks:has([data-field="invoiceId"]) .MuiDataGrid-footerContainer {
    display: none !important;
  }

  .ksjs-ksks:has([data-field="invoiceId"]) .MuiDataGrid-virtualScroller {
    overflow-x: scroll !important;
    overflow-y: auto !important;
    scrollbar-width: auto !important;
    scrollbar-color: #6d5dfc #e7e5ff;
    scrollbar-gutter: stable;
  }

  .ksjs-ksks:has([data-field="invoiceId"]) .MuiDataGrid-virtualScroller::-webkit-scrollbar {
    width: 12px;
    height: 14px;
  }

  .ksjs-ksks:has([data-field="invoiceId"]) .MuiDataGrid-virtualScroller::-webkit-scrollbar-track {
    border-radius: 999px;
    background: #e7e5ff;
  }

  .ksjs-ksks:has([data-field="invoiceId"]) .MuiDataGrid-virtualScroller::-webkit-scrollbar-thumb {
    border: 3px solid #e7e5ff;
    border-radius: 999px;
    background: #6d5dfc;
  }

  .ksjs-ksks:has([data-field="invoiceId"]) .MuiDataGrid-virtualScroller::-webkit-scrollbar-thumb:hover {
    background: #4f46e5;
  }

  .ksjs-ksks:has([data-field="invoiceId"]) .MuiDataGrid-columnHeadersInner,
  .ksjs-ksks:has([data-field="invoiceId"]) .MuiDataGrid-row {
    width: max-content !important;
    min-width: 1788px !important;
  }

  .ksjs-ksks:has([data-field="invoiceId"]) .MuiDataGrid-cell,
  .ksjs-ksks:has([data-field="invoiceId"]) .MuiDataGrid-columnHeader {
    box-sizing: border-box !important;
    padding-right: 9px !important;
    padding-left: 9px !important;
  }

  .ksjs-ksks:has([data-field="invoiceId"]) .MuiDataGrid-cell {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  .ksjs-ksks:has([data-field="invoiceId"]) [data-field="__check__"] { flex: 0 0 48px !important; width: 48px !important; min-width: 48px !important; max-width: 48px !important; }
  .ksjs-ksks:has([data-field="invoiceId"]) [data-field="invoiceId"] { flex: 0 0 75px !important; width: 75px !important; min-width: 75px !important; max-width: 75px !important; }
  .ksjs-ksks:has([data-field="invoiceId"]) [data-field="amount"] { flex: 0 0 120px !important; width: 120px !important; min-width: 120px !important; max-width: 120px !important; }
  .ksjs-ksks:has([data-field="invoiceId"]) [data-field="outstandingBill"] { flex: 0 0 150px !important; width: 150px !important; min-width: 150px !important; max-width: 150px !important; }
  .ksjs-ksks:has([data-field="invoiceId"]) [data-field="totalBill"] { flex: 0 0 130px !important; width: 130px !important; min-width: 130px !important; max-width: 130px !important; }
  .ksjs-ksks:has([data-field="invoiceId"]) [data-field="prevMeterReading"] { flex: 0 0 130px !important; width: 130px !important; min-width: 130px !important; max-width: 130px !important; }
  .ksjs-ksks:has([data-field="invoiceId"]) [data-field="currentMeterReading"] { flex: 0 0 140px !important; width: 140px !important; min-width: 140px !important; max-width: 140px !important; }
  .ksjs-ksks:has([data-field="invoiceId"]) [data-field="usage"] { flex: 0 0 90px !important; width: 90px !important; min-width: 90px !important; max-width: 90px !important; }
  .ksjs-ksks:has([data-field="invoiceId"]) [data-field="billTo"] { flex: 0 0 180px !important; width: 180px !important; min-width: 180px !important; max-width: 180px !important; }
  .ksjs-ksks:has([data-field="invoiceId"]) [data-field="timestamp"] { flex: 0 0 115px !important; width: 115px !important; min-width: 115px !important; max-width: 115px !important; }
  .ksjs-ksks:has([data-field="invoiceId"]) [data-field="payStatus"] { flex: 0 0 135px !important; width: 135px !important; min-width: 135px !important; max-width: 135px !important; }
  .ksjs-ksks:has([data-field="invoiceId"]) [data-field="payDate"] { flex: 0 0 115px !important; width: 115px !important; min-width: 115px !important; max-width: 115px !important; }
  .ksjs-ksks:has([data-field="invoiceId"]) [data-field="receiptId"] { flex: 0 0 100px !important; width: 100px !important; min-width: 100px !important; max-width: 100px !important; }
  .ksjs-ksks:has([data-field="invoiceId"]) [data-field="enteredBy"],
  .ksjs-ksks:has([data-field="invoiceId"]) [data-field="verifiedBy"] { flex: 0 0 150px !important; width: 150px !important; min-width: 150px !important; max-width: 150px !important; }

  /* Clip the invoice column headers so the JS translateX sync with the
     virtualScroller can shift them in lockstep with the body rows. */
  .ksjs-ksks:has([data-field="invoiceId"]) .MuiDataGrid-columnHeaders {
    overflow: hidden !important;
    width: 100% !important;
  }

  .ksjs-ksks:has([data-field="invoiceId"]) .MuiDataGrid-columnHeadersInner {
    will-change: transform;
  }
}

@media (max-width: 768px) {
  html,
  body {
    overflow-x: hidden !important;
  }

  #root,
  .gdgd-jrorjd,
  .mjdhs-irpe,
  main {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .mjdhs-irpe {
    box-sizing: border-box;
    overflow-x: hidden !important;
    padding-right: max(10px, env(safe-area-inset-right)) !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
    padding-left: max(10px, env(safe-area-inset-left)) !important;
  }

  /* This bundle rule previously forced dialogs/content wider than phones. */
  .kjshsh {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .jsjs-wpnp-s,
  .mxhd-393iksw,
  .w-50,
  .w-60,
  .w-80,
  .w-90 {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .msms-ppw-row,
  .msms-ppw-row-3,
  .ppl-tiles {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .table-ldod,
  .jsjsh-oo,
  .MuiDataGrid-root,
  .MuiDataGrid-viewport,
  .MuiDataGrid-virtualScroller,
  [role="grid"] {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .mjdhs-irpe .table-ldod {
    display: block;
    width: 100%;
  }

  /* Keep data tables readable: preserve useful column widths and scroll the
     table container instead of squeezing every value into a few pixels. */
  .table-ldod,
  .jsjsh-oo {
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible;
    scrollbar-width: auto;
  }

  .table-ldod table,
  .jsjsh-oo table,
  .mjdhs-irpe table {
    width: max-content !important;
    min-width: 100% !important;
    table-layout: auto !important;
  }

  .table-ldod th,
  .table-ldod td,
  .jsjsh-oo th,
  .jsjsh-oo td,
  .mjdhs-irpe table th,
  .mjdhs-irpe table td {
    width: auto !important;
    min-width: 72px;
    max-width: none !important;
    padding-right: 14px !important;
    padding-left: 14px !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  /* MUI DataGrid: on phones/tablets, let the grid root fill the container and
     scroll internally via its virtual scroller so columns stay readable without
     overrunning the clipped page. */
  .table-ldod .MuiDataGrid-root,
  .jsjsh-oo .MuiDataGrid-root,
  .mjdhs-irpe .MuiDataGrid-root {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  .MuiDataGrid-columnHeader,
  .MuiDataGrid-cell {
    flex: 0 0 140px !important;
    width: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
  }

  /* Spreadsheet-like column widths. MUI uses matching data-field attributes
     on headers and cells, so header/body alignment is preserved. */
  .MuiDataGrid-columnHeaderCheckbox,
  .MuiDataGrid-cellCheckbox,
  .MuiDataGrid-columnHeader[data-field="__check__"],
  .MuiDataGrid-cell[data-field="__check__"] {
    flex: 0 0 52px !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
  }

  .MuiDataGrid-columnHeader[data-field="id"],
  .MuiDataGrid-cell[data-field="id"],
  .MuiDataGrid-columnHeader[data-field="staffId"],
  .MuiDataGrid-cell[data-field="staffId"],
  .MuiDataGrid-columnHeader[data-field="customerId"],
  .MuiDataGrid-cell[data-field="customerId"],
  .MuiDataGrid-columnHeader[data-field="tapId"],
  .MuiDataGrid-cell[data-field="tapId"] {
    flex: 0 0 68px !important;
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
  }

  .MuiDataGrid-columnHeader[data-field="firstname"],
  .MuiDataGrid-cell[data-field="firstname"],
  .MuiDataGrid-columnHeader[data-field="lastname"],
  .MuiDataGrid-cell[data-field="lastname"] {
    flex: 0 0 130px !important;
    width: 130px !important;
    min-width: 130px !important;
    max-width: 130px !important;
  }

  .MuiDataGrid-columnHeader[data-field="cellphone"],
  .MuiDataGrid-cell[data-field="cellphone"],
  .MuiDataGrid-columnHeader[data-field="phone"],
  .MuiDataGrid-cell[data-field="phone"] {
    flex: 0 0 145px !important;
    width: 145px !important;
    min-width: 145px !important;
    max-width: 145px !important;
  }

  .MuiDataGrid-columnHeader[data-field="email"],
  .MuiDataGrid-cell[data-field="email"] {
    flex: 0 0 220px !important;
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
  }

  .MuiDataGrid-columnHeader[data-field="regDate"],
  .MuiDataGrid-cell[data-field="regDate"],
  .MuiDataGrid-columnHeader[data-field="timestamp"],
  .MuiDataGrid-cell[data-field="timestamp"] {
    flex: 0 0 120px !important;
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
  }

  .MuiDataGrid-columnHeader[data-field="role"],
  .MuiDataGrid-cell[data-field="role"],
  .MuiDataGrid-columnHeader[data-field="status"],
  .MuiDataGrid-cell[data-field="status"] {
    flex: 0 0 105px !important;
    width: 105px !important;
    min-width: 105px !important;
    max-width: 105px !important;
  }

  .MuiDataGrid-columnHeader[data-field="name"],
  .MuiDataGrid-cell[data-field="name"],
  .MuiDataGrid-columnHeader[data-field="customerName"],
  .MuiDataGrid-cell[data-field="customerName"],
  .MuiDataGrid-columnHeader[data-field="staffName"],
  .MuiDataGrid-cell[data-field="staffName"],
  .MuiDataGrid-columnHeader[data-field="title"],
  .MuiDataGrid-cell[data-field="title"] {
    flex-basis: 165px !important;
    width: 165px !important;
    min-width: 165px !important;
    max-width: 165px !important;
  }

  .MuiDataGrid-columnHeader[data-field="description"],
  .MuiDataGrid-cell[data-field="description"],
  .MuiDataGrid-columnHeader[data-field="message"],
  .MuiDataGrid-cell[data-field="message"],
  .MuiDataGrid-columnHeader[data-field="notes"],
  .MuiDataGrid-cell[data-field="notes"],
  .MuiDataGrid-columnHeader[data-field="address"],
  .MuiDataGrid-cell[data-field="address"] {
    flex-basis: 220px !important;
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
  }

  .MuiDataGrid-columnHeader[data-field="amount"],
  .MuiDataGrid-cell[data-field="amount"],
  .MuiDataGrid-columnHeader[data-field="balance"],
  .MuiDataGrid-cell[data-field="balance"],
  .MuiDataGrid-columnHeader[data-field="salary"],
  .MuiDataGrid-cell[data-field="salary"],
  .MuiDataGrid-columnHeader[data-field="overtime"],
  .MuiDataGrid-cell[data-field="overtime"] {
    flex-basis: 110px !important;
    width: 110px !important;
    min-width: 110px !important;
    max-width: 110px !important;
  }

  .MuiDataGrid-columnHeader[data-field="monthlyDeduction"],
  .MuiDataGrid-cell[data-field="monthlyDeduction"],
  .MuiDataGrid-columnHeader[data-field="accountNumber"],
  .MuiDataGrid-cell[data-field="accountNumber"],
  .MuiDataGrid-columnHeader[data-field="meterNumber"],
  .MuiDataGrid-cell[data-field="meterNumber"] {
    flex-basis: 180px !important;
    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;
  }

  .MuiDataGrid-columnHeaderTitle,
  .MuiDataGrid-cell,
  .MuiDataGrid-cellContent {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  .MuiDataGrid-cellContent {
    width: auto !important;
    max-width: none !important;
  }

  .table-ldod::-webkit-scrollbar,
  .jsjsh-oo::-webkit-scrollbar,
  .MuiDataGrid-virtualScroller::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  .table-ldod::-webkit-scrollbar-thumb,
  .jsjsh-oo::-webkit-scrollbar-thumb,
  .MuiDataGrid-virtualScroller::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: #8b5cf6;
    background-clip: padding-box;
  }

  .table-ldod::-webkit-scrollbar-track,
  .jsjsh-oo::-webkit-scrollbar-track,
  .MuiDataGrid-virtualScroller::-webkit-scrollbar-track {
    border-radius: 999px;
    background: #e9e2ff;
  }

  img,
  video,
  canvas,
  svg {
    max-width: 100%;
  }

  input,
  select,
  textarea {
    box-sizing: border-box;
    max-width: 100%;
    font-size: 16px !important;
  }

  button,
  [role="button"],
  .MuiButtonBase-root,
  .MuiIconButton-root,
  .sjs-action-icon {
    min-width: 44px;
    min-height: 44px;
  }

  .sjs-action-icon {
    width: 44px;
    height: 44px;
  }

  .jshs-js,
  .mj-spsps,
  .lsls,
  .p-widget-lbl,
  .ppl-tile-desc,
  .ppl-step-lbl,
  .ppl-hero-ring-stat .ppl-hrs-lbl {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  .MuiDataGrid-columnHeaders,
  .MuiDataGrid-columnHeaderTitle,
  .MuiDataGrid-root [role="columnheader"] {
    font-size: 12px !important;
  }

  .cbdgd-kdo {
    bottom: env(safe-area-inset-bottom);
    left: env(safe-area-inset-left);
    max-width: min(85vw, 320px);
  }

  .cbdgd-kdo .hshs-kdjdhd-kks-psl {
    min-height: 52px !important;
  }
}

@media (max-width: 480px) {
  .mjdhs-irpe {
    padding-top: 8px !important;
  }

  /* Compact page action headers such as Staff > View Staff. */
  .lksjs-pepe {
    box-sizing: border-box;
    gap: 6px !important;
    padding: 7px 8px !important;
  }

  .lksjs-pepe > div:first-child {
    min-width: 0;
  }

  .lksjs-pepe h3 {
    margin-bottom: 3px !important;
    font-size: 16px !important;
    line-height: 1.15 !important;
  }

  .lksjs-pepe .MuiToggleButtonGroup-root {
    max-width: 100%;
    margin-bottom: 0 !important;
  }

  .lksjs-pepe .MuiToggleButton-root {
    width: auto !important;
    min-width: 0 !important;
    min-height: 36px !important;
    padding: 4px 7px !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    text-transform: none;
  }

  .lksjs-pepe > .MuiButton-root:last-child {
    width: auto !important;
    min-width: 98px !important;
    min-height: 40px !important;
    padding: 6px 9px !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }

  .lksjs-pepe > .MuiButton-root:last-child .MuiButton-startIcon {
    margin-right: 4px;
    margin-left: 0;
  }

  .lksjs-pepe > .MuiButton-root:last-child .MuiSvgIcon-root {
    font-size: 18px;
  }

  /* Pages such as Customers and Invoicing inject a MUI toolbar into the
     action header. Use two compact rows instead of one control per line. */
  .lksjs-pepe:has(> .MuiBox-root) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center !important;
    gap: 4px 6px !important;
  }

  .lksjs-pepe:has(> .MuiBox-root) > div:first-child,
  .lksjs-pepe:has(> .MuiBox-root) > h3:first-child {
    grid-column: 1;
    grid-row: 1;
  }

  .lksjs-pepe:has(> .MuiBox-root) > .MuiBox-root {
    display: grid !important;
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center !important;
    width: 100%;
    min-width: 0;
    gap: 4px !important;
  }

  .lksjs-pepe:has(> .MuiBox-root) > .MuiBox-root > :nth-child(1),
  .lksjs-pepe:has(> .MuiBox-root) > .MuiBox-root > :nth-child(2) {
    grid-column: span 2;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .lksjs-pepe:has(> .MuiBox-root) > .MuiBox-root > :nth-child(3) {
    grid-column: span 2;
  }

  .lksjs-pepe:has(> .MuiBox-root) .MuiFormControl-root,
  .lksjs-pepe:has(> .MuiBox-root) .MuiTextField-root {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .lksjs-pepe:has(> .MuiBox-root) .MuiInputBase-root,
  .lksjs-pepe:has(> .MuiBox-root) .MuiSelect-select {
    min-height: 36px !important;
    height: 36px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 13px !important;
  }

  .lksjs-pepe:has(> .MuiBox-root) .MuiButton-root {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 36px !important;
    padding: 4px 7px !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
    white-space: nowrap;
  }

  .lksjs-pepe:has(> .MuiBox-root) .MuiButton-startIcon {
    margin-right: 4px;
    margin-left: 0;
  }

  .lksjs-pepe:has(> .MuiBox-root) > :last-child:not(.MuiBox-root) {
    grid-column: 2;
    grid-row: 1;
    min-width: 36px !important;
    min-height: 36px !important;
  }

  /* Customer list: keep EVERY toolbar feature visible and responsive.
     Controls wrap onto extra rows on narrow screens instead of being
     hidden, so the filter, search, add, import, refresh, save and the
     auxiliary heading icons all remain available. */
  .lksjs-pepe:has(> .MuiBox-root input[placeholder^="Search by name"]) {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  .lksjs-pepe:has(> .MuiBox-root input[placeholder^="Search by name"])
    > div:first-child .MuiIconButton-root,
  .lksjs-pepe:has(> .MuiBox-root input[placeholder^="Search by name"])
    > :last-child:not(.MuiBox-root) {
    display: inline-flex !important;
  }

  .lksjs-pepe:has(> .MuiBox-root input[placeholder^="Search by name"])
    > .MuiBox-root {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
    align-items: center !important;
  }

  .lksjs-pepe:has(> .MuiBox-root input[placeholder^="Search by name"])
    > .MuiBox-root > * {
    grid-column: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .lksjs-pepe:has(> .MuiBox-root input[placeholder^="Search by name"])
    > .MuiBox-root > .MuiFormControl-root,
  .lksjs-pepe:has(> .MuiBox-root input[placeholder^="Search by name"])
    > .MuiBox-root > .MuiTextField-root {
    width: 100% !important;
    margin: 0 !important;
  }

  .lksjs-pepe:has(> .MuiBox-root input[placeholder^="Search by name"])
    > .MuiBox-root > .MuiButton-root,
  .lksjs-pepe:has(> .MuiBox-root input[placeholder^="Search by name"])
    > .MuiBox-root > .MuiIconButton-root {
    width: auto !important;
    min-width: 0 !important;
    min-height: 36px !important;
    justify-self: stretch !important;
  }

  /* Keep the large-window/auxiliary heading icon on the customer page so
     no feature is hidden on phones. */
  .lksjs-pepe:has(> .MuiBox-root input[placeholder^="Search by name"])
    > .MuiIconButton-root {
    display: inline-flex !important;
  }

  /* User Management: collapse its inline action bar and prioritize Add User.
     The 400px grid wrapper uniquely scopes this legacy, inline-styled view. */
  div:has(> div[style*="height: 400px"] > .MuiDataGrid-root)
    > div:first-child {
    min-height: 38px;
    margin-bottom: 6px !important;
    gap: 6px;
  }

  div:has(> div[style*="height: 400px"] > .MuiDataGrid-root)
    > div:first-child > h3 {
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.15 !important;
  }

  div:has(> div[style*="height: 400px"] > .MuiDataGrid-root)
    > div:first-child > div {
    gap: 4px !important;
  }

  div:has(> div[style*="height: 400px"] > .MuiDataGrid-root)
    > div:first-child > div > .MuiButton-root:first-child {
    display: none !important;
  }

  div:has(> div[style*="height: 400px"] > .MuiDataGrid-root)
    > div:first-child > div > .MuiButton-root:last-child {
    width: auto !important;
    min-width: 96px !important;
    min-height: 38px !important;
    padding: 5px 10px !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    white-space: nowrap;
  }

  /* Internal Communication behaves as a mobile master-detail chat. */
  div[style*="height: 620px"][style*="overflow: hidden"] {
    width: 100% !important;
    height: calc(100dvh - 205px) !important;
    min-height: 430px;
  }

  /* Initial phone screen: contacts/groups only, not the desktop inbox pane. */
  div[style*="height: 620px"][style*="overflow: hidden"] > div:first-child {
    display: flex !important;
    width: 100% !important;
    flex: 1 1 100% !important;
    border-right: 0 !important;
  }

  div[style*="height: 620px"][style*="overflow: hidden"] > div:last-child:not(:first-child) {
    display: none !important;
  }

  /* Once a group/contact is chosen, replace the list with its conversation. */
  div[style*="height: 620px"][style*="overflow: hidden"]:has(button[title="Back to inbox"])
    > div:first-child {
    display: none !important;
  }

  div[style*="height: 620px"][style*="overflow: hidden"]:has(button[title="Back to inbox"])
    > div:last-child {
    display: flex !important;
    width: 100% !important;
    flex: 1 1 100% !important;
  }

  /* Compact the communication page heading and keep only New Message. */
  div:has(> div[style*="height: 620px"]) {
    padding: 8px !important;
  }

  div:has(> div[style*="height: 620px"]) > div:first-child {
    margin-bottom: 8px !important;
    gap: 5px !important;
  }

  div:has(> div[style*="height: 620px"]) > div:first-child h3 {
    font-size: 17px !important;
    line-height: 1.15 !important;
  }

  div:has(> div[style*="height: 620px"])
    > div:first-child > div:last-child > :nth-child(-n + 2) {
    display: none !important;
  }

  div:has(> div[style*="height: 620px"])
    > div:first-child > div:last-child .MuiButton-root {
    min-height: 36px !important;
    padding: 5px 9px !important;
    font-size: 12px !important;
  }

  /* Invoicing: the desktop toolbar has nine controls. On phones keep only
     customer search and the primary Add Invoice action on one compact row. */
  .lksjs-pepe:has(input[placeholder^="Search customer name"])
    > .MuiBox-root {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 5px !important;
  }

  .lksjs-pepe:has(input[placeholder^="Search customer name"])
    > .MuiBox-root > :nth-child(1),
  .lksjs-pepe:has(input[placeholder^="Search customer name"])
    > .MuiBox-root > :nth-child(2),
  .lksjs-pepe:has(input[placeholder^="Search customer name"])
    > .MuiBox-root > :nth-child(n + 5),
  .lksjs-pepe:has(input[placeholder^="Search customer name"])
    > :last-child:not(.MuiBox-root) {
    display: none !important;
  }

  .lksjs-pepe:has(input[placeholder^="Search customer name"])
    > div:first-child > :last-child:not(:first-child) {
    display: none !important;
  }

  .lksjs-pepe:has(input[placeholder^="Search customer name"])
    > .MuiBox-root > :nth-child(3) {
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .lksjs-pepe:has(input[placeholder^="Search customer name"])
    > .MuiBox-root > :nth-child(4) {
    display: inline-flex !important;
    grid-column: 2 !important;
    width: auto !important;
    min-width: 112px !important;
    min-height: 36px !important;
    padding: 4px 8px !important;
  }

  .lksjs-pepe:has(input[placeholder^="Search customer name"]) {
    padding: 6px 8px !important;
    gap: 4px !important;
  }

  /* Table-first mobile invoicing workspace. The surrounding navigation
     already identifies this screen, so reclaim the separate title row. */
  .lksjs-pepe:has(input[placeholder^="Search customer name"])
    > div:first-child {
    display: none !important;
  }

  .lksjs-pepe:has(input[placeholder^="Search customer name"])
    > .MuiBox-root {
    grid-row: 1 !important;
  }

  /* The invoice grid already has its own pager; hide the duplicate pager
     above it and retain only a concise financial summary. */
  .ksjs-ksks > div:first-child {
    min-height: 34px !important;
    margin: 0 !important;
    padding: 3px 6px !important;
    flex-wrap: nowrap !important;
    overflow: hidden;
  }

  .ksjs-ksks > div:first-child > div:last-child:not(:first-child) {
    display: none !important;
  }

  .ksjs-ksks > div:first-child > div:first-child {
    min-width: 0;
    max-width: 100%;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  .ksjs-ksks {
    height: calc(100dvh - 164px) !important;
    min-height: 440px !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .ksjs-ksks > .grid.jdjss-lls {
    min-height: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .ksjs-ksks .MuiDataGrid-root {
    height: 100% !important;
    min-height: 0 !important;
  }

  .ksjs-ksks .MuiDataGrid-columnHeaders {
    min-height: 44px !important;
    max-height: 44px !important;
  }

  .ksjs-ksks .MuiDataGrid-row {
    min-height: 46px !important;
    max-height: 46px !important;
  }

  /* Invoice-specific Excel-like widths. These override the shared table
     defaults so numeric fields do not receive generic 140px columns. */
  .ksjs-ksks .MuiDataGrid-columnHeaderCheckbox,
  .ksjs-ksks .MuiDataGrid-cellCheckbox,
  .ksjs-ksks [data-field="__check__"] {
    flex: 0 0 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
  }

  .ksjs-ksks [data-field="invoiceId"] {
    flex: 0 0 62px !important;
    width: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;
  }

  .ksjs-ksks [data-field="amount"] {
    flex: 0 0 94px !important;
    width: 94px !important;
    min-width: 94px !important;
    max-width: 94px !important;
  }

  .ksjs-ksks [data-field="outstandingBill"] {
    flex: 0 0 118px !important;
    width: 118px !important;
    min-width: 118px !important;
    max-width: 118px !important;
  }

  .ksjs-ksks [data-field="totalBill"],
  .ksjs-ksks [data-field="totalAmount"],
  .ksjs-ksks [data-field="balance"] {
    flex: 0 0 100px !important;
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
  }

  .ksjs-ksks [data-field="prevMeterReading"],
  .ksjs-ksks [data-field="currentMeterReading"] {
    flex: 0 0 108px !important;
    width: 108px !important;
    min-width: 108px !important;
    max-width: 108px !important;
  }

  .ksjs-ksks [data-field="usage"] {
    flex: 0 0 68px !important;
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
  }

  .ksjs-ksks .MuiDataGrid-cell,
  .ksjs-ksks .MuiDataGrid-columnHeader {
    padding-right: 5px !important;
    padding-left: 5px !important;
  }

  /* Payments has its own legacy layout despite sharing the invoice wrapper
     class. Give it an independent table-first mobile arrangement. */
  .ksjs-ksks:has(> .mjsjs-oepe) {
    height: calc(100dvh - 150px) !important;
    min-height: 450px !important;
    padding: 5px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 40px 30px minmax(0, 1fr);
    gap: 4px 5px;
    overflow: hidden !important;
  }

  .ksjs-ksks:has(> .mjsjs-oepe) > .mjsjs-oepe {
    display: flex !important;
    width: 100% !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-content: flex-end !important;
    gap: 0 !important;
    height: 40px !important;
    max-height: 40px !important;
    flex: 0 0 40px !important;
    align-items: center !important;
    grid-column: 2;
    grid-row: 1;
  }

  .ksjs-ksks:has(> .mjsjs-oepe) > .mjsjs-oepe > :not(:first-child) {
    display: none !important;
  }

  .ksjs-ksks:has(> .mjsjs-oepe) > .mjsjs-oepe > :first-child {
    width: auto !important;
    min-width: 132px !important;
    min-height: 36px !important;
    padding: 5px 10px !important;
    font-size: 12px !important;
    height: 36px !important;
    max-height: 36px !important;
    align-self: center !important;
  }

  /* Compact the payment total strip. */
  .ksjs-ksks:has(> .mjsjs-oepe) > .mjsjs-oepe + div {
    min-height: 30px !important;
    margin: 0 !important;
    padding: 2px 5px !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .ksjs-ksks:has(> .mjsjs-oepe) > .mjsjs-oepe + div + hr,
  .ksjs-ksks:has(> .mjsjs-oepe) > .mjsjs-oepe + div + .MuiDivider-root {
    display: none !important;
  }

  /* Hide category and period selectors on phones; search remains available. */
  .ksjs-ksks:has(> .mjsjs-oepe) .jsjs-wpnp-s {
    display: none !important;
  }

  .ksjs-ksks:has(> .mjsjs-oepe)
    > div:has(> .jsjs-wpnp-s) {
    min-height: 38px !important;
    padding: 0 !important;
    margin: 0 !important;
    justify-content: stretch !important;
    grid-column: 1;
    grid-row: 1;
  }

  .ksjs-ksks:has(> .mjsjs-oepe)
    > div:has(> .jsjs-wpnp-s) > .MuiTextField-root {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .ksjs-ksks:has(> .mjsjs-oepe)
    > div:has(> .jsjs-wpnp-s) .MuiInputBase-root {
    height: 36px !important;
    min-height: 36px !important;
  }

  .ksjs-ksks:has(> .mjsjs-oepe) > .MuiBox-root:last-child {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    grid-column: 1 / -1;
    grid-row: 3;
  }

  /* The shared payment table renders a pager before DataGrid as well as the
     DataGrid footer. Retain only the footer on phones. */
  .ksjs-ksks:has(> .mjsjs-oepe)
    > .MuiBox-root:last-child > div:first-child:not(.MuiDataGrid-root) {
    display: none !important;
  }

  .ksjs-ksks:has(> .mjsjs-oepe) .MuiDataGrid-root {
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  .ksjs-ksks:has(> .mjsjs-oepe) [data-field="receiptId"] {
    flex: 0 0 58px !important;
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
  }

  .ksjs-ksks:has(> .mjsjs-oepe) [data-field="amount"] {
    flex: 0 0 96px !important;
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
  }

  .ksjs-ksks:has(> .mjsjs-oepe) [data-field="receiptNumber"] {
    flex: 0 0 104px !important;
    width: 104px !important;
    min-width: 104px !important;
    max-width: 104px !important;
  }

  /* Payment row actions become a floating mobile toolbar only when a
     single/multiple-selection action component is actually rendered. */
  .ksjs-ksks:has(> .mjsjs-oepe)
    > .mjsjs-oepe + div > :last-child:not(:first-child) {
    position: fixed !important;
    right: 10px !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    left: 10px !important;
    z-index: 1300 !important;
    display: flex !important;
    width: auto !important;
    max-width: none !important;
    min-height: 48px !important;
    max-height: 68px !important;
    margin: 0 !important;
    padding: 6px !important;
    align-items: center !important;
    gap: 5px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    border: 1px solid rgba(55, 48, 163, 0.22);
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.97) !important;
    box-shadow: 0 8px 28px rgba(30, 41, 59, 0.28) !important;
    backdrop-filter: blur(10px);
  }

  .ksjs-ksks:has(> .mjsjs-oepe)
    > .mjsjs-oepe + div > :last-child:not(:first-child) button,
  .ksjs-ksks:has(> .mjsjs-oepe)
    > .mjsjs-oepe + div > :last-child:not(:first-child) [role="button"] {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 42px !important;
    min-height: 36px !important;
    padding: 5px 9px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  /* Shared action bars rendered above other system tables. */
  .tables-actions-handle {
    position: fixed !important;
    right: 10px !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    left: 10px !important;
    z-index: 1400 !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    width: auto !important;
    max-width: none !important;
    min-height: 48px;
    max-height: 68px !important;
    height: auto !important;
    margin: 0 !important;
    gap: 5px;
    padding: 6px !important;
    overflow: hidden !important;
    border: 1px solid rgba(55, 48, 163, 0.22) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.97) !important;
    box-shadow: 0 8px 28px rgba(30, 41, 59, 0.3) !important;
    backdrop-filter: blur(10px);
  }

  .tables-actions-handle h3 {
    margin: 0;
    font-size: 13px !important;
    line-height: 1.2;
  }

  .tables-actions-handle .actions-items {
    min-width: 0;
    justify-content: flex-start;
    gap: 4px;
    overflow-x: auto;
    flex-wrap: nowrap;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  .tables-actions-handle .actions-items-item {
    flex: 0 0 auto;
    margin-right: 2px;
    margin-left: 2px;
  }

  .tables-actions-handle button,
  .tables-actions-handle [role="button"],
  .tables-actions-handle .MuiButtonBase-root {
    width: auto !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 4px 7px !important;
    font-size: 11px !important;
    white-space: nowrap;
  }

  /* The optional desktop-side duplicate action panel is unnecessary when
     the shared floating selection toolbar is active. */
  .hsgs0oeoeks {
    display: none !important;
  }

  /* Staff mobile view: remove the redundant reload control and the spacer
     elements surrounding it so the grid starts immediately. */
  .ksjs-ksks.rel-pos > [title="Refresh/reload staff"],
  .ksjs-ksks.rel-pos > :not(.MuiBox-root) {
    display: none !important;
  }

  .ksjs-ksks.rel-pos {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* Expenses: after removing its oversized desktop controls, make the grid
     stretch from the heading to the bottom instead of retaining their space. */
  .ksjs-ksks.rel-pos:has(> .mjsjs-oepe [title="Add a new expense"]) {
    height: calc(100dvh - 158px) !important;
    min-height: 450px !important;
    display: flex !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .ksjs-ksks.rel-pos:has(> .mjsjs-oepe [title="Add a new expense"])
    > .MuiBox-root {
    display: flex !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  .ksjs-ksks.rel-pos:has(> .mjsjs-oepe [title="Add a new expense"])
    .MuiDataGrid-root {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  /* Restore the essential expense actions as one compact scrollable row:
     Add Expense and the All/Pending/Rejected status tabs. */
  .ksjs-ksks.rel-pos:has(> .mjsjs-oepe [title="Add a new expense"])
    > .mjsjs-oepe {
    display: flex !important;
    flex: 0 0 40px !important;
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 2px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  .ksjs-ksks.rel-pos:has(> .mjsjs-oepe [title="Add a new expense"])
    > .mjsjs-oepe > :nth-child(2),
  .ksjs-ksks.rel-pos:has(> .mjsjs-oepe [title="Add a new expense"])
    > .mjsjs-oepe > :nth-child(n + 6) {
    display: none !important;
  }

  .ksjs-ksks.rel-pos:has(> .mjsjs-oepe [title="Add a new expense"])
    > .mjsjs-oepe > .MuiButton-root {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  /* Reporting is a long form, not a fixed table workspace. Override the
     shared ksjs wrapper and give it its own touch-scroll region. */
  .ksjs-ksks.lsk-s {
    display: block !important;
    width: 100% !important;
    height: calc(100dvh - 160px) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 160px) !important;
    margin: 0 !important;
    padding: 12px 10px 90px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  .ksjs-ksks.lsk-s > div {
    overflow: visible !important;
  }

  .ksjs-ksks.lsk-s [title="Generate Report"] {
    min-height: 42px !important;
    margin-bottom: 20px !important;
  }

  /* Data is refreshed automatically throughout the app; manual reload
     controls add clutter on phones. Keep them available on wider screens. */
  [title*="refresh" i],
  [title*="reload" i],
  [aria-label*="refresh" i],
  [aria-label*="reload" i] {
    display: none !important;
  }

  /* Centre only the WUA logo in the mobile app bar. Keep the existing back
     button and utility controls in their current grid positions. */
  .jdhgs-kjhds {
    position: sticky !important;
  }

  .jdhgs-kjhds > .jdjsshjd {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    z-index: 2;
    width: 50px !important;
    height: 50px !important;
    transform: translateX(-50%);
  }

  .jdhgs-kjhds > .jsshgs-kjd {
    position: relative;
    z-index: 3;
    display: flex !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    height: 50px !important;
    padding: 0 4px !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .jdhgs-kjhds .hsgsl-wjd {
    display: flex !important;
    width: 34px !important;
    height: 38px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px;
  }

  .jdhgs-kjhds .jdhs-jkdoe {
    display: flex !important;
    width: auto !important;
    height: 42px !important;
    margin-left: auto !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0 !important;
  }

  .jdhgs-kjhds .jdhs-jkdoe > .content-center {
    display: flex !important;
    flex: 0 0 28px !important;
    width: 28px !important;
    min-width: 28px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 9px !important;
    color: #172033 !important;
    transition: background-color 0.18s ease, transform 0.18s ease;
  }

  .jdhgs-kjhds .hsgsl-wjd:hover,
  .jdhgs-kjhds .jdhs-jkdoe > .content-center:hover {
    background: rgba(255, 255, 255, 0.5) !important;
  }

  .jdhgs-kjhds .hsgsl-wjd:active,
  .jdhgs-kjhds .jdhs-jkdoe > .content-center:active {
    background: rgba(59, 130, 246, 0.14) !important;
    transform: scale(0.92);
  }

  .jdhgs-kjhds .jdhs-jkdoe svg,
  .jdhgs-kjhds .hsgsl-wjd svg {
    width: 18px !important;
    height: 18px !important;
    font-size: 18px !important;
  }

  .jdhgs-kjhds .jdhs-jkdoe .MuiAvatar-root {
    width: 21px !important;
    height: 21px !important;
    font-size: 10px !important;
  }

  /* Balances: compact summary + full-height grid, without the unlabeled
     legacy reload control or the duplicate pager above DataGrid. */
  .ksjs-ksks:has([data-field="balanceId"]) {
    height: calc(100dvh - 158px) !important;
    min-height: 450px !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .ksjs-ksks:has([data-field="balanceId"]) > :first-child {
    flex: 0 0 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 3px 6px !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
  }

  .ksjs-ksks:has([data-field="balanceId"])
    > :not(:first-child):not(.MuiBox-root) {
    display: none !important;
  }

  .ksjs-ksks:has([data-field="balanceId"]) > .MuiBox-root {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .ksjs-ksks:has([data-field="balanceId"])
    > .MuiBox-root > div:first-child:not(.MuiDataGrid-root) {
    display: none !important;
  }

  .ksjs-ksks:has([data-field="balanceId"]) .MuiDataGrid-root {
    height: 100% !important;
    min-height: 0 !important;
  }

  .ksjs-ksks:has([data-field="balanceId"]) [data-field="balanceId"] {
    flex: 0 0 72px !important;
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
  }

  .ksjs-ksks:has([data-field="balanceId"]) [data-field="amount"] {
    flex: 0 0 100px !important;
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
  }

  .ksjs-ksks:has([data-field="balanceId"]) [data-field="customerName"] {
    flex: 0 0 150px !important;
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
  }

  /* Customer Meters: remove legacy controls/pager and dedicate the mobile
     content area to the meter grid. */
  .ksjs-ksks:has([data-field="tapId"]):not(:has(> .mjsjs-oepe)) {
    height: calc(100dvh - 158px) !important;
    min-height: 450px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .ksjs-ksks:has([data-field="tapId"]):not(:has(> .mjsjs-oepe))
    > :not(.MuiBox-root) {
    display: none !important;
  }

  .ksjs-ksks:has([data-field="tapId"]):not(:has(> .mjsjs-oepe))
    > .MuiBox-root {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  .ksjs-ksks:has([data-field="tapId"]):not(:has(> .mjsjs-oepe))
    > .MuiBox-root > div:first-child:not(.MuiDataGrid-root) {
    display: none !important;
  }

  .ksjs-ksks:has([data-field="tapId"]):not(:has(> .mjsjs-oepe))
    .MuiDataGrid-root {
    height: 100% !important;
    min-height: 0 !important;
  }

  .ksjs-ksks:has([data-field="tapId"]) [data-field="__check__"],
  .ksjs-ksks:has([data-field="tapId"]) .MuiDataGrid-columnHeaderCheckbox,
  .ksjs-ksks:has([data-field="tapId"]) .MuiDataGrid-cellCheckbox {
    flex: 0 0 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
  }

  .ksjs-ksks:has([data-field="tapId"]) [data-field="tapId"] {
    flex: 0 0 64px !important;
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
  }

  .ksjs-ksks:has([data-field="tapId"]) [data-field="meterLabel"] {
    flex: 0 0 120px !important;
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
  }

  .ksjs-ksks:has([data-field="tapId"]) [data-field="meterNumber"] {
    flex: 0 0 110px !important;
    width: 110px !important;
    min-width: 110px !important;
    max-width: 110px !important;
  }

  /* About is informational content, not a fixed-height table workspace. */
  .ksjs-ksks:has(.ksks-aboutjsjs) {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 8px !important;
    overflow: visible !important;
    border-radius: 12px !important;
  }

  .ksjs-ksks:has(.ksks-aboutjsjs) .kkdlsmckd,
  .ksjs-ksks:has(.ksks-aboutjsjs) .ksks-aboutjsjs {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .ksks-aboutjsjs .sksk-pep3 {
    display: grid !important;
    grid-template-columns: 112px minmax(0, 1fr) !important;
    width: 100% !important;
    min-height: 52px !important;
    height: auto !important;
    padding: 7px 4px !important;
    align-items: start !important;
    gap: 8px !important;
    border-bottom: 1px solid rgba(37, 99, 235, 0.3);
  }

  .ksks-aboutjsjs .sksk-pep3 > div {
    display: block !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 0 !important;
  }

  .ksks-aboutjsjs .sksk-pep3 h4 {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    overflow-wrap: anywhere;
    white-space: normal !important;
  }

  .ksks-aboutjsjs .sksk-pep3 > div:first-child h4 {
    color: #475569;
    font-weight: 600 !important;
  }

  .lksjs-pepe:has(+ .ksjs-ksks .ksks-aboutjsjs)
    > :last-child:not(:first-child) {
    display: none !important;
  }

  /* Prepayments: compact, horizontally scrollable tabs and a table-first
     panel for current, applied and history views. */
  [aria-label="Prepayment tabs"] {
    min-height: 42px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
  }

  [aria-label="Prepayment tabs"] .MuiTab-root {
    flex: 0 0 auto !important;
    min-width: auto !important;
    min-height: 40px !important;
    padding: 5px 12px !important;
    font-size: 12px !important;
    text-transform: none !important;
    white-space: nowrap !important;
  }

  .jshjsj-pwols {
    width: 100% !important;
    height: calc(100dvh - 210px) !important;
    min-height: 390px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 10px !important;
  }

  .jshjsj-pwols .w-90 {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .jshjsj-pwols p.text-centre {
    min-height: 32px !important;
    margin: 0 !important;
    padding: 5px 8px !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  .jshjsj-pwols .MuiBox-root:has(> .MuiDataGrid-root),
  .jshjsj-pwols .MuiBox-root:has(.MuiDataGrid-root) {
    width: 100% !important;
    height: calc(100% - 34px) !important;
    min-height: 340px !important;
    margin: 0 !important;
  }

  .jshjsj-pwols .MuiDataGrid-root {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  .jshjsj-pwols [data-field="id"] {
    flex: 0 0 54px !important;
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
  }

  .jshjsj-pwols [data-field="meterNumber"] {
    flex: 0 0 116px !important;
    width: 116px !important;
    min-width: 116px !important;
    max-width: 116px !important;
  }

  .jshjsj-pwols [data-field="firstname"] {
    flex: 0 0 140px !important;
    width: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
  }

  .jshjsj-pwols [data-field="amount"] {
    flex: 0 0 100px !important;
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
  }

  .ksjs-ksks.rel-pos:has(> .mjsjs-oepe [title="Add a new expense"])
    [data-field="expenseId"] {
    flex: 0 0 64px !important;
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
  }

  .ksjs-ksks.rel-pos:has(> .mjsjs-oepe [title="Add a new expense"])
    [data-field="amount"] {
    flex: 0 0 104px !important;
    width: 104px !important;
    min-width: 104px !important;
    max-width: 104px !important;
  }

  .ksjs-ksks.rel-pos:has(> .mjsjs-oepe [title="Add a new expense"])
    [data-field="descr"],
  .ksjs-ksks.rel-pos:has(> .mjsjs-oepe [title="Add a new expense"])
    [data-field="description"] {
    flex: 0 0 150px !important;
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
  }

  .ppl-hero,
  .p-widget,
  .rounded,
  [class*="rounded"] {
    border-radius: 14px;
  }

  h1 {
    font-size: clamp(1.35rem, 7vw, 1.8rem);
  }

  h2 {
    font-size: clamp(1.2rem, 6vw, 1.55rem);
  }
}

@media (max-width: 360px) {
  .mjdhs-irpe {
    padding-right: 6px !important;
    padding-left: 6px !important;
  }

  .cbdgd-kdo {
    max-width: 90vw;
  }
}

/* Chidziwitso notification - CSS animation */
.chidziwitso-track {
  flex: 1;
  overflow: hidden;
  height: 100%;
  position: relative;
  z-index: 1;
}

.chidziwitso-text {
  position: absolute;
  top: 0;
  left: 100%;
  white-space: nowrap;
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  line-height: 46px;
  cursor: pointer;
  --chidz-distance: 1800px;
  animation: chidzs-scroll 28s linear infinite;
  will-change: transform;
}

@keyframes chidzs-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(0px - var(--chidz-distance))); }
}

.chidziwitso-text:hover {
  animation-play-state: paused;
}

/* The live landing page renders this element after the initial HTML.  Keep
   the configured announcement moving even when React supplies inline styles. */
.chidziwitso-bar-wrap .chidziwitso-track {
  position: relative !important;
  overflow: hidden !important;
}

.chidziwitso-bar-wrap .chidziwitso-text {
  position: absolute !important;
  left: 100% !important;
  white-space: nowrap !important;
  will-change: transform;
  animation: chidzs-live-scroll 28s linear infinite !important;
}

@keyframes chidzs-live-scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(-100% - 100vw), 0, 0); }
}

@media (max-width: 600px) {
  .chidziwitso-text {
    font-size: 16px !important;
    line-height: 40px !important;
  }
}