html {
  -webkit-text-size-adjust: 100%;
}

body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.ibs-native-android body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

#ibs-native-network {
  position: sticky;
  top: 0;
  z-index: 2147483000;
  background: #7f1d1d;
  color: #fff;
  text-align: center;
  font: 700 13px/1.4 system-ui, sans-serif;
  padding: 8px 12px;
}

button,
.btn,
.nl-btn,
.ibs-smart-btn,
.ibs-auth-btn {
  min-height: 44px;
}

input,
select,
textarea {
  max-width: 100%;
}

.ibs-contact-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 72px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  background: #fff;
  font-weight: 700;
}

.ibs-keyboard-open .heroActions,
.ibs-keyboard-open #ibs-smart-sticky,
.ibs-keyboard-open #ibs-smart-launcher,
.ibs-keyboard-open #ibs-next-launcher {
  margin-bottom: 8px;
}

body:has(.loginPage) #ibs-next-launcher,
body:has(.loginPage) #ibs-smart-launcher,
body:has(.loginPage) #ibs-smart-sticky,
body:has(.loginPage) #ibs-smart-panel,
body:has(.loginPage) #ibs-md-staff-launcher {
  display: none !important;
}

body:has(.loginPage) .ibs-environment-ribbon {
  top: calc(10px + env(safe-area-inset-top));
  right: 10px;
  bottom: auto;
  left: auto;
}

@media (max-width: 720px) {
  .app {
    padding: 10px;
    padding-bottom: 96px;
  }

  #ibs-smart-launcher,
  #ibs-next-launcher,
  #ibs-md-staff-launcher {
    right: 10px;
    left: auto;
  }

  #ibs-smart-launcher {
    bottom: calc(16px + env(safe-area-inset-bottom));
  }

  #ibs-next-launcher {
    bottom: calc(72px + env(safe-area-inset-bottom));
  }

  #ibs-md-staff-launcher {
    bottom: calc(128px + env(safe-area-inset-bottom));
  }

  .ibs-environment-ribbon {
    left: 10px;
    right: auto;
    bottom: calc(12px + env(safe-area-inset-bottom));
  }

  #ibs-smart-panel.open {
    right: 8px;
    left: 8px;
    width: auto;
    bottom: calc(70px + env(safe-area-inset-bottom));
    max-height: min(70dvh, 640px);
  }

  #ibs-smart-sticky.show {
    left: 8px;
    right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom));
  }

  body:has(#ibs-smart-sticky.show) #ibs-smart-launcher,
  body:has(#ibs-smart-sticky.show) #ibs-next-launcher,
  body:has(#ibs-smart-sticky.show) #ibs-md-staff-launcher {
    visibility: hidden;
  }

  .hero,
  .ibs-md-review .hero {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 16px;
    border-radius: 16px;
  }

  .hero h1,
  .brand h1 {
    font-size: 22px;
  }

  .heroActions,
  .tabs,
  .ibs23-tabs,
  nav.ibs-workflow-details {
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  .tableWrap,
  .ibs-workflow-scroll,
  table {
    max-width: 100%;
  }

  .tableWrap,
  .ibs-workflow-scroll {
    overflow-x: auto;
  }

  .loginCard,
  .ibs-auth-card {
    width: min(440px, calc(100vw - 24px));
  }

  .ibs-smart-dialog,
  .ibs-smart-modal .ibs-smart-dialog {
    max-height: min(90dvh, 720px);
    overflow: auto;
    margin: 12px;
  }

  .ibs23-bulkbar,
  .ibs23-heading {
    grid-template-columns: 1fr;
  }

  #ibs-smart-sticky {
    left: 8px;
    right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom));
  }

  #ibs-next-shell.open {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  #ibs-next-shell .nl-side {
    flex: 0 0 auto;
    max-height: 46%;
    overflow: auto;
    padding-bottom: 10px;
  }

  #ibs-next-shell .nl-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    overflow: visible;
    max-height: none;
  }

  #ibs-next-shell .nl-nav button,
  #ibs-staff-nav {
    min-height: 40px;
    flex: 1 1 calc(50% - 6px);
  }

  #ibs-next-shell .nl-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 12px;
    max-width: none;
  }

  #ibs-staff-nav {
    order: -1;
    flex-basis: 100%;
    background: #0f766e !important;
    color: #fff !important;
  }

  /* Force single column for grids on mobile to prevent side-scrolling */
  .gridTwo, .nl-grid, .detailGrid, .miniMetrics, .metrics, .nl-progress, .nl-kpis {
    grid-template-columns: 1fr !important;
  }
}