/* HQ / SaaS PWA + mobile browsing enhancements (ops & boss) */
:root {
  --hq-safe-top: env(safe-area-inset-top, 0px);
  --hq-safe-right: env(safe-area-inset-right, 0px);
  --hq-safe-bottom: env(safe-area-inset-bottom, 0px);
  --hq-safe-left: env(safe-area-inset-left, 0px);
}

/*
 * Disable double-tap zoom on taps (buttons, nav, forms).
 * Pinch-zoom remains available unless the page also sets maximum-scale.
 */
*,
*::before,
*::after {
  touch-action: manipulation;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  padding-bottom: var(--hq-safe-bottom);
}

/* Standalone / installed PWA */
@media all and (display-mode: standalone) {
  body.hq-pwa-standalone .topbar {
    padding-top: calc(12px + var(--hq-safe-top));
  }
  body.hq-pwa-standalone #hqMenu .offcanvas-header {
    padding-top: calc(1rem + var(--hq-safe-top));
  }
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  padding-left: calc(16px + var(--hq-safe-left));
  padding-right: calc(16px + var(--hq-safe-right));
}

#hqMenu {
  padding-left: var(--hq-safe-left);
}

#hqMenu .nav-hq .nav-link {
  min-height: 44px;
  padding: 12px 14px;
  font-size: 0.95rem;
}

.btn-hq-menu {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 991.98px) {
  .topbar {
    padding: 10px 12px;
    padding-left: calc(12px + var(--hq-safe-left));
    padding-right: calc(12px + var(--hq-safe-right));
    gap: 8px;
  }

  .topbar-title {
    font-size: 1.05rem;
    max-width: min(52vw, 14rem);
  }

  .section-panel {
    padding: 14px 12px 28px;
  }

  .toolbar {
    gap: 8px;
    margin-bottom: 12px;
  }

  .toolbar .btn,
  .section-panel > .toolbar .btn {
    min-height: 40px;
  }

  .kpi-card .value {
    font-size: 1.35rem;
  }

  .table-card {
    border-radius: 10px;
  }

  .table-responsive {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .table-card .table,
  .table-responsive > .table {
    font-size: 0.8rem;
  }

  .table-card thead th,
  .table-responsive thead th {
    white-space: nowrap;
  }

  /* Modals: near full-screen on phones */
  .modal .modal-dialog {
    margin: 0.5rem;
    max-width: calc(100vw - 1rem);
  }

  .modal .modal-dialog.modal-lg,
  .modal .modal-dialog.modal-xl,
  .modal .modal-dialog.hq-order-edit-dialog {
    max-width: calc(100vw - 0.5rem);
    margin: 0.25rem auto;
  }

  .modal .modal-content {
    max-height: calc(100dvh - 0.5rem - var(--hq-safe-top) - var(--hq-safe-bottom));
  }

  .modal .modal-body {
    max-height: min(70dvh, calc(100dvh - 8rem));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #modalHqOrderEdit .modal-dialog.hq-order-edit-dialog,
  #modalHqSelfShipDetail .modal-dialog.hq-order-edit-dialog {
    max-width: 100vw;
    margin: 0;
  }

  #modalHqOrderEdit.modal .modal-body,
  #modalHqSelfShipDetail.modal .modal-body {
    max-height: min(72dvh, calc(100dvh - 7rem));
  }

  #roleContextLabelWrap {
    max-width: 100%;
  }

  #roleContextLabelWrap #roleContextLabel {
    max-width: min(70vw, 16rem) !important;
  }

  .dropdown-menu {
    max-width: min(92vw, 20rem);
  }

  /* Form grids stack more comfortably */
  .section-panel .row.g-2 > [class*="col-"] {
    margin-bottom: 0;
  }
}

@media (max-width: 575.98px) {
  .topbar .d-flex.flex-wrap.align-items-center.gap-2:not(:first-child) {
    width: 100%;
    justify-content: space-between;
  }

  .empty-placeholder {
    padding: 28px 16px;
  }

  .hq-order-fin-bar {
    padding: 0.65rem 0.75rem;
  }
}

/* Install / update toast */
.hq-pwa-toast {
  position: fixed;
  left: 50%;
  bottom: calc(16px + var(--hq-safe-bottom));
  transform: translateX(-50%);
  z-index: 2000;
  max-width: min(92vw, 24rem);
  background: #0f172a;
  color: #f8fafc;
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.28);
  display: none;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
}

.hq-pwa-toast.is-visible {
  display: flex;
}

.hq-pwa-toast .btn {
  flex-shrink: 0;
  white-space: nowrap;
}