/* Mobile PWA shell — bottom nav, safe areas, touch targets */

:root {
  --mobile-header-h: 56px;
  --mobile-bottom-nav-h: 64px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --touch-min: 44px;
}

/* Standalone PWA (installed app) */
@media (display-mode: standalone) {
  body.pwa-standalone .mobile-top-bar {
    padding-top: calc(0.5rem + var(--safe-top));
  }
}

/* Mobile layout */
@media (max-width: 991.98px) {
  body.has-mobile-nav {
    padding-bottom: calc(var(--mobile-bottom-nav-h) + var(--safe-bottom));
  }

  .content-wrap {
    margin-left: 0 !important;
    padding: 0.75rem !important;
    padding-top: calc(var(--mobile-header-h) + 0.5rem) !important;
    min-height: 100vh;
  }

  .page-title-desktop {
    display: none !important;
  }

  .mobile-top-bar {
    display: flex !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: calc(var(--mobile-header-h) + var(--safe-top));
    padding: var(--safe-top) 0.75rem 0;
    z-index: 1030;
    background: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
    align-items: center;
    gap: 0.5rem;
  }

  .mobile-top-bar .page-title-mobile {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-top-bar .btn {
    min-width: var(--touch-min);
    min-height: var(--touch-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1035;
  }

  .sidebar-backdrop.show {
    display: block;
  }

  .sidebar {
    width: min(85vw, 300px) !important;
    z-index: 1040;
    padding-bottom: calc(1rem + var(--safe-bottom)) !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
  }

  .sidebar .sidebar-nav .nav-link {
    min-height: var(--touch-min);
    display: flex;
    align-items: center;
    font-size: 1rem;
  }

  /* Bottom navigation */
  .mobile-top-bar,
  .mobile-bottom-nav {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(var(--mobile-bottom-nav-h) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    background: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
    z-index: 1030;
    justify-content: space-around;
    align-items: stretch;
  }

  .mobile-bottom-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--bs-secondary-color);
    text-decoration: none;
    font-size: 0.65rem;
    padding: 0.35rem 0.15rem;
    min-height: var(--touch-min);
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-bottom-nav a i {
    font-size: 1.35rem;
  }

  .mobile-bottom-nav a.active {
    color: var(--erp-primary, #0d6efd);
    font-weight: 600;
  }

  .mobile-bottom-nav a.active i {
    transform: scale(1.08);
  }

  /* Touch-friendly buttons & inputs */
  .btn,
  .form-control,
  .form-select {
    min-height: var(--touch-min);
  }

  .btn-sm {
    min-height: 38px;
    padding: 0.35rem 0.65rem;
  }

  /* Card-style tables on mobile */
  .table-mobile-cards {
    border: 0;
  }

  .table-mobile-cards thead {
    display: none;
  }

  .table-mobile-cards tbody tr {
    display: block;
    margin-bottom: 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    padding: 0.75rem;
    background: var(--bs-body-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }

  .table-mobile-cards tbody td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.35rem 0 !important;
    border: 0 !important;
    text-align: right;
  }

  .table-mobile-cards tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    text-align: left;
    flex-shrink: 0;
  }

  .table-mobile-cards tbody td.text-end {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .table-mobile-cards tbody td.text-end::before {
    width: 100%;
    margin-bottom: 0.25rem;
  }

  /* KPI cards — 2 columns on phone */
  .card-stat .card-body {
    padding: 0.85rem;
  }

  .card-stat h4 {
    font-size: 1.15rem;
  }

  .card-stat small {
    font-size: 0.7rem;
  }

  /* PWA install banner */
  #pwaInstallBanner {
    position: fixed;
    bottom: calc(var(--mobile-bottom-nav-h) + var(--safe-bottom) + 8px);
    left: 0.75rem;
    right: 0.75rem;
    z-index: 1050;
    border-radius: 1rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  }

  body:not(.has-mobile-nav) #pwaInstallBanner {
    bottom: calc(0.75rem + var(--safe-bottom));
  }

  /* Floating action button */
  .mobile-fab {
    display: flex !important;
    position: fixed;
    right: 1rem;
    bottom: calc(var(--mobile-bottom-nav-h) + var(--safe-bottom) + 1rem);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    z-index: 1025;
    box-shadow: 0 4px 16px rgba(13, 110, 253, 0.45);
  }
}

@media (min-width: 992px) {
  .mobile-top-bar,
  .mobile-bottom-nav,
  .sidebar-backdrop,
  .mobile-fab {
    display: none !important;
  }

  .page-title-mobile-wrap {
    display: none;
  }
}

/* Hide desktop header row actions duplication on mobile */
@media (max-width: 991.98px) {
  .content-wrap > .d-flex.flex-wrap.justify-content-between.mb-4 {
    display: none !important;
  }
}