/* ── Mobile & Responsive ── */

/* ══════════════════════════════════════════
   MOBILE EXPERIENCE
   ══════════════════════════════════════════ */

/* native-app touch feel everywhere */
button,a,.btn,.ntab,.bnav-item,.icard,.kpi,.lockbtn,.mclose,.dmclose{
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.btn,.ntab,.bnav-item,.lockbtn,.mclose,.dmclose{
  -webkit-touch-callout:none;user-select:none;
}
.btn:active{transform:scale(.96);}
.icard:active{transform:scale(.98);}
.kpi:active{transform:scale(.98);}
tr.cl:active td{background:var(--alt)!important;}

/* smooth momentum scrolling everywhere it's needed */
.twrap,.tscroll,.ghlog,.dmbody,.mbody{-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}

/* bottom-sheet grabber (mobile modals only) */
.sheet-handle{display:none;width:36px;height:4px;border-radius:99px;background:var(--border);margin:8px auto 0;flex-shrink:0;}

/* bottom tab bar — hidden on desktop, drives the same showPage() as the top tabs */
.bnav{display:none;}

@media(max-width:860px){
  .ntabs{display:none;}
  .bnav{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:400;
    background:rgba(255,255,255,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-top:1px solid var(--border);
    padding:6px 4px env(safe-area-inset-bottom);
    box-shadow:0 -2px 16px rgba(0,0,0,.07);
    transform:translateZ(0);-webkit-transform:translateZ(0);will-change:transform;
    -webkit-backface-visibility:hidden;backface-visibility:hidden;
  }
  .bnav-item{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    padding:6px 2px;border:none;background:none;cursor:pointer;color:var(--muted);
    border-radius:10px;transition:color .15s;
  }
  .bnav-item .bicon{font-size:18px;line-height:1;transition:transform .15s;display:flex;align-items:center;justify-content:center;}
  .bnav-item .bicon svg{width:19px;height:19px;}
  .bnav-item .blabel{font-size:9.5px;font-weight:600;letter-spacing:.01em;}
  .bnav-item.active{color:var(--accent);background:var(--alt);}
  .bnav-item.active .bicon{transform:translateY(-1px);}
  .bnav-item:active{background:var(--s2);}

  /* Sale Data sub-nav (bnav-sub in nav.css) — same fixed-strip pattern
     as .bnav above, floating just over it. Must stay inside this same
     mobile breakpoint so it never appears on desktop. */
  .bnav-sub{display:flex;position:fixed;}

  .page{padding:16px 14px calc(78px + env(safe-area-inset-bottom));}
  #toast{left:50%;right:auto;bottom:calc(78px + env(safe-area-inset-bottom));transform:translate(-50%,70px);}
  #toast.on{transform:translate(-50%,0);}

  /* Extra bottom room while the Sale Data sub-nav (fixed, ~40px tall)
     floats above the main bottom tab bar, so it doesn't cover content. */
  body.has-bnav-sub .page{padding-bottom:calc(78px + 42px + env(safe-area-inset-bottom));}
  body.has-bnav-sub #toast{bottom:calc(78px + 42px + env(safe-area-inset-bottom));}
}

@media(max-width:600px){
  .nbrand-sub,.nclock{display:none;}
  #sync-text{display:none;}
  nav{padding-left:14px;padding-right:14px;}
  .nbrand-text{font-size:12px;}
  .hero{padding:18px;}
  .htitle{font-size:17px;}
  .hamount{font-size:23px;}

  /* comfortable, zoom-free touch inputs */
  .fg input,.fg select,.frow input,.frow select,.dsearch input{
    font-size:16px;padding:10px 12px;min-height:44px;
  }
  .frow{gap:8px;}
  .frow input,.frow select{flex:1 1 140px;min-width:0;}
  .frow button{flex:1 1 140px;}
  .btn{padding:11px 16px;min-height:44px;}

  /* modals become bottom sheets */
  .mbg,.dmbg{align-items:flex-end;padding:0;}
  .modal,.dmbox{width:100%;max-width:100%;border-radius:18px 18px 0 0;max-height:92vh;}
  .sheet-handle{display:block;}
  .mclose,.dmclose{width:38px;height:38px;font-size:17px;}
}

@media(max-width:480px){
  .krow{grid-template-columns:repeat(2,1fr);}
}