/* AquaBest Mobile App Layout v1
   This file is intentionally separate from the desktop theme. */
.mobile-bottom-nav { display: none; }

@media (max-width: 768px) {
  body { background: #07111f; }
  #appContainer.active { display: block !important; }
  .sidebar { width: min(88vw, 340px); }
  .main-content { display: block; min-height: 100dvh; }
  .header {
    position: sticky; top: 0; z-index: 120;
    min-height: 62px; margin-top: 0; padding: .5rem .65rem .5rem 4.7rem;
    background: rgba(15, 31, 51, .96); backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(56,189,248,.18); border-radius: 0;
  }
  .header::before {
    content: ''; position: absolute; left: 4.75rem; top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px; border-radius: 9px; background: #fff url('../icon-96x96.png') center / 28px 28px no-repeat;
    box-shadow: 0 2px 10px rgba(0,0,0,.22);
  }
  .header > div:first-child { gap: .05rem !important; }
  .header > div:first-child > span:first-child { color: #f3f8ff; font-size: .8rem; font-weight: 800; letter-spacing: .01em; }
  .header > div:first-child > span:first-child::after { content: '  •  AquaBest Portal'; color: #7dd3fc; font-weight: 600; }
  #syncIndicator { color: #6ee7b7 !important; font-size: .61rem !important; }
  .header > div:last-child .btn { min-height: 36px; padding: .4rem .5rem; border-radius: 10px; }
  .header > div:last-child .btn-danger { font-size: 0; width: 40px; }
  .header > div:last-child .btn-danger::after { content: '↪'; font-size: 1.05rem; }
  #menuToggle {
    display: inline-flex; align-items: center; justify-content: center;
    top: .75rem; left: .65rem; width: 64px; height: 42px; padding: 0;
    border-radius: 12px; background: #123452; border-color: rgba(56,189,248,.32);
    font-size: 0; box-shadow: 0 5px 18px rgba(0,0,0,.2);
  }
  #menuToggle::before { content: '☰'; font-size: 1.15rem; }
  .page-content { padding: .75rem .65rem calc(5.6rem + env(safe-area-inset-bottom, 0px)); }
  .page-header { padding: 1rem !important; border-radius: 16px !important; background: linear-gradient(145deg,#132b45,#0d1d31) !important; }
  .page-header h2 { font-size: 1.35rem; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
  .stat-card { padding: .8rem .7rem; border-radius: 14px; background: #10243a; }
  .stat-value { font-size: 1.22rem; }
  .card { border-radius: 15px; background: #0e2034; border-color: rgba(56,189,248,.15); }
  .card-header { padding: .8rem .85rem; }
  .card-body { padding: .75rem; }
  .search-bar { padding: .6rem; border-radius: 14px; background: #0e2034; }
  .search-bar > .btn, .page-content .btn-primary { border-radius: 11px; }
  .mobile-bottom-nav {
    position: fixed; display: grid; grid-template-columns: repeat(5, 1fr);
    left: .55rem; right: .55rem; bottom: calc(.5rem + env(safe-area-inset-bottom, 0px));
    z-index: 250; padding: .35rem .25rem; border: 1px solid rgba(56,189,248,.2);
    border-radius: 18px; background: rgba(14,32,52,.96); backdrop-filter: blur(16px);
    box-shadow: 0 12px 35px rgba(0,0,0,.42);
  }
  .mobile-nav-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .12rem; min-height: 48px; padding: .2rem; border: 0; border-radius: 13px;
    color: #91a9bf; background: transparent; font: inherit; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-nav-btn span { font-size: 1.2rem; line-height: 1; }
  .mobile-nav-btn small { font-size: .62rem; font-weight: 700; }
  .mobile-nav-btn.active, .mobile-nav-btn:active { color: #67d5ff; background: rgba(2,132,199,.18); }
  .modal-overlay { padding: .45rem; }
  .modal { border-radius: 18px; }
  table { font-size: .82rem; }
}

  @media (max-width: 430px) {
  .header { padding-left: 4.7rem; }
  .header::before { left: 4.75rem; }
  .header > div:first-child > span:first-child { max-width: 128px; }
  .header > div:last-child #topRefreshBtn { display: none; }
  .page-header h2 { font-size: 1.22rem; }
  .stat-card { padding: .68rem .55rem; }
  .stat-value { font-size: 1.05rem; }
  .mobile-bottom-nav { left: .35rem; right: .35rem; }
}