/* Nusa Suite V16 — deterministic sticky navigation/table headers */
html, body { scroll-padding-top: 72px; }

/* Admin page header */
.main > .topbar,
.topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: #fff !important;
  isolation: isolate;
}

/* Admin filter rows sit below the fixed header. */
.admin-page .filters,
.content > .filters,
.main .filters {
  position: sticky !important;
  top: 72px !important;
  z-index: 900 !important;
  background: #f5f8fc !important;
  padding: 10px 0 !important;
  margin-top: -10px;
  box-shadow: 0 4px 12px rgba(20,55,90,.06);
}

/* Table headers: pages with a filter row reserve space for both header + filter. */
.main > .content .table thead th,
.main > .content .table-wrap .table thead th {
  position: sticky !important;
  top: 72px !important;
  z-index: 800 !important;
  background: #fafcff !important;
  box-shadow: 0 1px 0 #dfe7f1;
}

.main > .content .filters + .table-wrap .table thead th,
.main > .content .filters + .table-wrap + .pagination .table thead th {
  top: 122px !important;
}

/* Customer header */
body > .top,
.top {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: #fff !important;
  isolation: isolate;
}

/* Customer filters stay below the 68px customer header. */
.main > .toolbar,
.main > .controls,
.main > .filters,
.content > .toolbar {
  position: sticky !important;
  top: 68px !important;
  z-index: 900 !important;
  background: #f6f8fc !important;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Customer table header */
.top ~ .layout .table thead th,
.top ~ .layout .table-wrap .table thead th {
  position: sticky !important;
  top: 68px !important;
  z-index: 800 !important;
  background: #fafbfc !important;
  box-shadow: 0 1px 0 #dfe7f1;
}

/* Open dialogs must always sit above sticky navigation/filter/table layers. */
.modal,
.modal.show {
  z-index: 100000 !important;
}
body.modal-open .filters,
body.modal-open .toolbar {
  position: static !important;
  z-index: auto !important;
}

@media(max-width:800px){
  .main > .toolbar,
  .main > .controls,
  .main > .filters,
  .content > .toolbar { top: 68px !important; }
}

/* Nusa Suite Mobile Responsive Navigation Patch — 2026-09-24
   Keeps customer/admin navigation usable on narrow mobile screens.
   No desktop layout changes. */
@media (max-width: 600px){
  /* Customer portal: replace the hidden/vertical sidebar with a compact
     horizontal, scrollable navigation row. */
  body > .layout{
    display:block !important;
  }
  body > .layout > .side{
    width:100% !important;
    flex-basis:auto !important;
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    gap:5px !important;
    padding:8px 10px !important;
    border-right:0 !important;
    border-bottom:1px solid #e8ecf3 !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  body > .layout > .side::-webkit-scrollbar{display:none}
  body > .layout > .side .nav{
    flex:0 0 auto !important;
    width:auto !important;
    white-space:nowrap !important;
    margin:0 !important;
    padding:9px 10px !important;
    font-size:12px !important;
  }
  body > .layout > .main{
    margin-left:0 !important;
    width:100% !important;
    min-width:0 !important;
  }

  /* Admin panel: keep the full labels available instead of switching to
     icon-only fixed sidebar on phones. */
  body > .sidebar{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    padding:8px 10px !important;
    flex-direction:column !important;
    overflow:visible !important;
  }
  body > .sidebar .brand{
    padding:0 4px 8px !important;
  }
  body > .sidebar .side-label{
    display:none !important;
  }
  body > .sidebar > .nav,
  body > .sidebar .side-bottom .nav{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    gap:5px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scrollbar-width:none;
    padding:0 !important;
  }
  body > .sidebar > .nav::-webkit-scrollbar,
  body > .sidebar .side-bottom .nav::-webkit-scrollbar{display:none}
  body > .sidebar > .nav a,
  body > .sidebar .side-bottom .nav a{
    flex:0 0 auto !important;
    white-space:nowrap !important;
    justify-content:center !important;
    margin:0 !important;
    padding:9px 10px !important;
    font-size:11px !important;
  }
  body > .sidebar > .nav a b,
  body > .sidebar .side-bottom .nav a b{
    display:inline !important;
  }
  body > .sidebar > .nav a span,
  body > .sidebar .side-bottom .nav a span{
    width:auto !important;
  }
  body > .sidebar .side-bottom{
    margin-top:7px !important;
    padding-top:0 !important;
    border-top:0 !important;
  }
  body > .main{
    margin-left:0 !important;
    width:100% !important;
    min-width:0 !important;
  }
}