/* PUCKTOSSET MOBILE TEST V1
   TEST ONLY. Loaded only by /mobil-test.php.
   Production desktop/iPad CSS is untouched.
*/

/* Hidden by default everywhere */
.pt-mobile-menu-toggle,
.pt-mobile-menu-backdrop { display:none; }

@media (max-width: 767px) {
  html, body { overflow-x:hidden; }
  .pt-page { width:calc(100% - 12px); margin:6px auto 18px; }

  .brand-masthead { padding:6px 8px 10px; }
  .brand-masthead > a { width:98%; }
  .brand-masthead img { max-height:105px; }

  .app-header {
    min-height:62px;
    padding:0 10px;
    gap:10px;
  }

  .app-logo { flex:0 0 132px; width:132px; }
  .app-logo img { height:44px; max-height:44px; }

  /* Desktop topnav hidden on phone only */
  .app-nav { display:none !important; }

  /* Compact phone menu button */
  .pt-mobile-menu-toggle {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    border:0;
    border-radius:8px;
    padding:9px 11px;
    background:#1d739c;
    color:#fff;
    font:800 13px Arial,sans-serif;
    cursor:pointer;
    margin-left:auto;
  }
  .pt-mobile-menu-toggle::before { content:'☰'; font-size:17px; line-height:1; }

  .app-user { margin-left:0; }
  .app-user-text strong { font-size:12px; }
  .app-user-text small { display:none; }

  .dashboard-layout { grid-template-columns:1fr !important; }
  .dashboard-main { padding:14px !important; border-radius:15px !important; }

  /* Existing sidebar becomes off-canvas drawer only on this test page */
  .side-nav {
    display:block !important;
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    width:min(84vw,320px);
    z-index:3000;
    overflow-y:auto;
    padding:18px 0 30px !important;
    background:linear-gradient(135deg,#031522,#0d3852) !important;
    transform:translateX(-105%);
    transition:transform .22s ease;
    box-shadow:0 14px 40px rgba(0,0,0,.35);
  }
  body.pt-mobile-nav-open .side-nav { transform:translateX(0); }

  .pt-mobile-menu-backdrop {
    position:fixed;
    inset:0;
    z-index:2990;
    background:rgba(0,0,0,.48);
  }
  body.pt-mobile-nav-open .pt-mobile-menu-backdrop { display:block; }

  .pt-user-dropdown { right:0; min-width:210px; }

  img, video, iframe { max-width:100%; height:auto; }
  table { max-width:100%; }
}