/* Ham-Melk v147 — cross-page RTL layout integrity.
   Keep this stylesheet after shared and page-specific styles. These rules only
   correct layout collisions; they do not change data or application actions. */

/* All management routes use a visible fixed 286px sidebar above 900px.
   A legacy 980px media query removed the content's right margin while keeping
   the sidebar visible, so at 901–980px the sidebar covered forms and buttons.
   The period page had its own workaround in v146; extend it to every route. */
@media screen and (min-width:901px) and (max-width:980px) {
  html[dir="rtl"] body .app-shell > .workspace {
    box-sizing:border-box!important;
    margin-right:286px!important;
    width:calc(100% - 286px)!important;
    max-width:calc(100% - 286px)!important;
    min-width:0!important;
  }
  /* Owner filters retain a desktop three-control row until 900px. Once the
     sidebar is accounted for, that row needs to wrap instead of pushing its
     sort selector outside the viewport. */
  body .app-shell .owner-list-toolbar-v26 {
    display:block!important;
  }
  body .app-shell .owner-toolbar-controls-v26 {
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin-top:10px!important;
  }
  body .app-shell .owner-toolbar-controls-v26 .owner-search-v26 {
    grid-column:1/-1!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  body .app-shell .owner-toolbar-controls-v26 select {
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }

}

/* The charge six-column grid needs internal horizontal scrolling at 901–1024px.
   The application viewport remains fixed; no financial column is truncated. */
@media screen and (min-width:901px) and (max-width:1024px) {
  /* The charge list's 6-column grid has a 715px minimum intrinsic width.
     Scroll *inside* its card and wrap its toolbar rather than scrolling the
     whole page or hiding financial columns. */
  body .app-shell .charge-summary-v46,
  body .app-shell .charge-summary-v46.owner-mode,
  body .app-shell .charge-summary-v46.detail-summary {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    min-width:0!important;
  }
  body .app-shell .charge-toolbar-v46 {
    display:flex!important;
    flex-wrap:wrap!important;
    min-width:0!important;
  }
  body .app-shell .charge-search-v46 {
    flex:1 1 100%!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
  }
  body .app-shell .charge-filter-v46 {
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:auto!important;
  }
  body .app-shell .charge-list-panel-v46 {
    min-width:0!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overscroll-behavior-x:contain;
  }
  body .app-shell .charge-list-head-v46,
  body .app-shell .charge-account-row-v46 {
    min-width:715px;
  }
}

/* Design-system.js replaces a native select with a visual .ds-select widget.
   Shared form rules otherwise give the hidden original a large min-height,
   padding and full width. Constrain only the visually-hidden originals, not
   ordinary select fields or visible custom widgets. */
@media screen {
  body .app-shell select.ds-native-select {
    position:absolute!important;
    inset-block-start:0!important;
    inset-inline-start:0!important;
    width:1px!important;
    min-width:0!important;
    max-width:1px!important;
    height:1px!important;
    min-height:0!important;
    max-height:1px!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    opacity:0!important;
    clip-path:inset(50%)!important;
    pointer-events:none!important;
  }
  body .app-shell label:has(> select.ds-native-select) {
    position:relative;
  }
  /* Permit grid and panel children to shrink instead of moving the entire
     RTL document; genuinely wide tables keep their own horizontal scroll. */
  body .app-shell :is(.workspace,.page-content,.panel,.form-grid,.grid-form,.table-wrap) {
    min-width:0;
  }
  body .app-shell .page-content .table-wrap:not(.mobile-cards) {
    max-width:100%;
    overscroll-behavior-inline:contain;
  }
}