/* PHASE M4 - Client Mobile Menu Organized Fix */
:root{--client-tab-h:84px;--safe-bottom:env(safe-area-inset-bottom,0px)}
html,body{max-width:100%;overflow-x:hidden}
img,svg,video,canvas,iframe{max-width:100%;height:auto}
input,select,textarea,button{font-size:16px}

@media(max-width:980px){
  body{
    padding-bottom:calc(var(--client-tab-h) + var(--safe-bottom) + 14px)!important;
    overflow-x:hidden!important;
  }

  .mobile-menu-btn,#portalMenuBtn,.portal-overlay,
  .ati-mobile-tabbar,.ati-app-tabs,.mobile-bottom-cta,.ati-public-actionbar,
  #clientBottomNav{
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
    position:absolute!important;
    left:-99999px!important;
    width:0!important;
    height:0!important;
    min-width:0!important;
    min-height:0!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
  }

  .shell{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-height:100vh!important;
    margin:0!important;
    padding:0!important;
    grid-template-columns:1fr!important;
  }

  aside{display:none!important}

  main{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:14px!important;
  }

  /* Clean bottom dock: no horizontal stuck scroll */
  #clientDock{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    z-index:2147483647!important;
    height:calc(var(--client-tab-h) + var(--safe-bottom))!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:6px!important;
    padding:8px 8px calc(8px + var(--safe-bottom))!important;
    background:rgba(4,11,22,.98)!important;
    border-top:1px solid rgba(101,213,255,.18)!important;
    box-shadow:0 -18px 55px rgba(0,0,0,.55)!important;
    backdrop-filter:blur(18px)!important;
  }

  #clientDock a,#clientDock button{
    width:auto!important;
    min-width:0!important;
    min-height:0!important;
    height:auto!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;
    padding:6px 2px!important;
    border-radius:16px!important;
    color:#bcd0e8!important;
    background:rgba(255,255,255,.035)!important;
    border:1px solid rgba(101,213,255,.10)!important;
    text-decoration:none!important;
    text-align:center!important;
    font-size:10.5px!important;
    line-height:1.05!important;
    font-weight:800!important;
    white-space:normal!important;
    cursor:pointer!important;
  }

  #clientDock a span,#clientDock button span{
    display:block!important;
    font-size:19px!important;
    line-height:1!important;
  }

  #clientDock a.active,#clientDock button.active{
    color:#fff!important;
    background:rgba(44,201,255,.15)!important;
    border-color:rgba(101,213,255,.28)!important;
  }

  #clientMenuSheet{
    position:fixed!important;
    left:12px!important;
    right:12px!important;
    bottom:calc(var(--client-tab-h) + var(--safe-bottom) + 12px)!important;
    z-index:2147483646!important;
    max-height:72vh!important;
    overflow:auto!important;
    padding:14px!important;
    border-radius:24px!important;
    background:rgba(6,17,31,.98)!important;
    border:1px solid rgba(101,213,255,.22)!important;
    box-shadow:0 24px 80px rgba(0,0,0,.58)!important;
    backdrop-filter:blur(18px)!important;
    display:none!important;
  }
  body.client-menu-open #clientMenuSheet{display:block!important}

  #clientMenuSheet .sheet-head{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
    margin-bottom:12px!important;
  }
  #clientMenuSheet h3{
    margin:0!important;
    font-size:18px!important;
  }
  #clientMenuSheet .close{
    width:auto!important;
    min-height:38px!important;
    border-radius:999px!important;
    padding:8px 12px!important;
    background:rgba(255,255,255,.06)!important;
    color:#eaf5ff!important;
    border:1px solid rgba(101,213,255,.18)!important;
  }
  #clientMenuSheet .menu-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  #clientMenuSheet .menu-grid a{
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    min-height:52px!important;
    padding:12px!important;
    border-radius:16px!important;
    background:rgba(255,255,255,.045)!important;
    border:1px solid rgba(101,213,255,.12)!important;
    color:#dcecff!important;
    text-decoration:none!important;
    font-weight:800!important;
  }
  #clientMenuSheet .menu-grid a span{
    font-size:20px!important;
  }
  #clientMenuShade{
    position:fixed!important;
    inset:0!important;
    z-index:2147483645!important;
    background:rgba(0,0,0,.48)!important;
    backdrop-filter:blur(3px)!important;
    display:none!important;
  }
  body.client-menu-open #clientMenuShade{display:block!important}

  h1{font-size:30px!important;line-height:1.12!important;margin:8px 0 10px!important}
  h2{font-size:22px!important;line-height:1.15!important}
  p,.muted{font-size:15.5px!important;line-height:1.6!important}

  .top{display:block!important;margin-bottom:14px!important}
  .stats,.grid,.grid2,.grid3,.partner-grid,.form-grid,.wallet-pro,.board,.podium{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
  }

  .stat,.panel,.field,.card,.board-card,.rank-card{
    max-width:100%!important;
    width:100%!important;
    border-radius:20px!important;
    padding:16px!important;
    overflow:hidden!important;
  }

  .stat strong{font-size:28px!important}
  input,select,textarea,button,.btn{
    max-width:100%!important;
    min-height:44px!important;
    font-size:16px!important;
    border-radius:14px!important;
  }
  main input,main select,main textarea,main button,main .btn{
    width:100%!important;
  }

  .ref-box,.share-toolkit{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
  }

  .qr-card img{
    width:220px!important;
    max-width:82vw!important;
    margin:10px auto!important;
    display:block!important;
  }

  .table-wrap{
    overflow:visible!important;
    border:0!important;
    max-width:100%!important;
  }

  table.client-card-table,table.client-card-table thead,table.client-card-table tbody,table.client-card-table tr,table.client-card-table th,table.client-card-table td{
    display:block!important;
    width:100%!important;
  }
  table.client-card-table thead{display:none!important}
  table.client-card-table tr{
    margin:0 0 12px!important;
    padding:12px!important;
    border:1px solid rgba(101,213,255,.14)!important;
    border-radius:16px!important;
    background:rgba(255,255,255,.035)!important;
  }
  table.client-card-table td{
    border:0!important;
    padding:8px 0!important;
    display:flex!important;
    justify-content:space-between!important;
    gap:12px!important;
    text-align:right!important;
    word-break:break-word!important;
  }
  table.client-card-table td:before{
    content:attr(data-label);
    font-weight:800!important;
    color:#a8c4e3!important;
    text-align:left!important;
    min-width:42%!important;
    max-width:45%!important;
  }
}

@media(max-width:380px){
  #clientDock a,#clientDock button{font-size:9.5px!important}
  #clientDock a span,#clientDock button span{font-size:18px!important}
}

@media(min-width:981px){
  #clientDock,#clientMenuSheet,#clientMenuShade{display:none!important}
}