/* App shell — /painel on phones and tablets (<= 900px).
   Loaded AFTER responsive.css. Desktop (> 900px) is untouched. */

.tabbar,.sheet{display:none}

@media (max-width:900px){
  :root{
    --tabbar-h:60px;
    --sheet-radius:24px;
    --ease:cubic-bezier(.2,.8,.2,1);
  }

  /* --- Shell: desktop sidebar is replaced by the tab bar --- */
  .shell{display:block;min-height:100dvh}
  .shell > .side{display:none}
  .main{min-width:0}

  /* --- Compact app bar (fixa no topo, com espaço para a ilha dinâmica/notch) --- */
  .main > .top{
    position:sticky;
    top:0;
    z-index:30;
    height:auto;
    min-height:56px;
    gap:10px;
    justify-content:flex-start;
    align-items:center;
    padding:
      calc(var(--safe-top,0px) + 8px)
      max(14px,var(--safe-right,0px))
      8px
      max(14px,var(--safe-left,0px));
  }
  .top::before{
    content:"↗";
    flex:0 0 auto;
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    border-radius:12px;
    background:var(--accent);
    color:#11190a;
    font-size:20px;
    font-weight:900;
    line-height:1;
  }
  .top .tripselect{
    flex:1 1 auto;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    overflow:hidden;
  }
  .top .tripselect>div{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
  }
  .top .tripselect>div[hidden]{display:none}
  .top .tripselect span{flex:0 0 auto;font-size:9px}
  .top .tripselect select,
  .top #listScopeSelect{
    flex:1 1 auto;
    min-width:0;
    max-width:100%;
    min-height:32px;
    font-size:14px;
    font-weight:800;
    text-overflow:ellipsis;
  }
  /* Account actions move into the account sheet. */
  .top .user{flex:0 0 auto;gap:0}
  .top .user > :not(.avatar){display:none!important}
  .top .user .avatar{
    width:38px;
    height:38px;
    min-height:38px;
    cursor:pointer;
    transition:transform .12s var(--ease);
  }
  .top .user .avatar:active{transform:scale(.92)}

  /* --- Content clears the tab bar and the home indicator --- */
  .content{
    padding:
      20px
      max(16px,var(--safe-right,0px))
      calc(var(--tabbar-h) + var(--safe-bottom,0px) + 28px)
      max(16px,var(--safe-left,0px));
  }
  .head{flex-direction:column;align-items:stretch;gap:14px}
  .head .actions{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .head .actions .btn{min-height:46px}
  .content .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .content .stat{padding:14px}
  .content .stat strong{font-size:clamp(20px,6.2vw,28px)}
  .view.active{animation:view-in .2s var(--ease)}
  @keyframes view-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

  /* --- Bottom tab bar --- */
  .tabbar{
    display:flex;
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:40;
    gap:2px;
    padding:
      6px
      max(8px,var(--safe-right,0px))
      calc(6px + var(--safe-bottom,0px))
      max(8px,var(--safe-left,0px));
    background:rgba(10,14,20,.92);
    -webkit-backdrop-filter:blur(20px);
    backdrop-filter:blur(20px);
    border-top:1px solid var(--line);
  }
  .tabbar button{
    flex:1 1 0;
    min-width:0;
    min-height:48px;
    display:grid;
    justify-items:center;
    align-content:center;
    gap:3px;
    padding:4px 2px;
    border:0;
    border-radius:14px;
    background:none;
    color:var(--muted);
    font:inherit;
    font-size:10.5px;
    font-weight:750;
    letter-spacing:.01em;
    cursor:pointer;
    transition:color .15s,background .15s,transform .12s var(--ease);
  }
  .tabbar button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .tabbar button span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tabbar button:active{transform:scale(.94);background:rgba(255,255,255,.06)}
  .tabbar button.active{color:var(--accent)}
  .tabbar button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  body.kb-open .tabbar{display:none}
  body.kb-open .content{padding-bottom:24px}

  /* Toast sits above the tab bar. */
  .toast{bottom:calc(var(--tabbar-h) + var(--safe-bottom,0px) + 14px)}
  body.kb-open .toast{bottom:14px}

  /* --- Existing modals become bottom sheets --- */
  body .modal{place-items:end center;padding:0}
  body .modal .box{
    width:100%;
    max-width:none;
    max-height:92dvh;
    border-radius:var(--sheet-radius) var(--sheet-radius) 0 0;
    border-bottom:0;
    padding:26px 18px calc(20px + var(--safe-bottom,0px));
    overscroll-behavior:contain;
    position:relative;
  }
  body .modal.show .box{animation:sheet-in .24s var(--ease)}
  body .modal .box::before{
    content:"";
    position:absolute;
    top:9px;
    left:50%;
    width:38px;
    height:4px;
    margin-left:-19px;
    border-radius:4px;
    background:rgba(255,255,255,.22);
  }
  @keyframes sheet-in{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}

  /* --- App sheets (More / Account) --- */
  .sheet{
    position:fixed;
    inset:0;
    z-index:60;
    display:none;
    align-items:flex-end;
    justify-content:center;
    background:rgba(0,0,0,.62);
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
  }
  .sheet.show{display:flex;animation:fade-in .18s ease}
  @keyframes fade-in{from{opacity:0}to{opacity:1}}
  .sheet-panel{
    width:100%;
    max-height:88dvh;
    overflow:auto;
    overscroll-behavior:contain;
    padding:0 18px calc(20px + var(--safe-bottom,0px));
    background:#0d1219;
    border:1px solid var(--line);
    border-bottom:0;
    border-radius:var(--sheet-radius) var(--sheet-radius) 0 0;
    animation:sheet-in .26s var(--ease);
    transition:transform .2s var(--ease);
  }
  .sheet-grab{
    display:block;
    width:100%;
    height:28px;
    border:0;
    background:none;
    cursor:grab;
    touch-action:none;
    position:sticky;
    top:0;
  }
  .sheet-grab::before{
    content:"";
    display:block;
    width:38px;
    height:4px;
    margin:12px auto 0;
    border-radius:4px;
    background:rgba(255,255,255,.22);
  }
  .sheet-title{margin:0 0 14px;font-size:18px;letter-spacing:-.02em}
  .sheet-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .sheet-item{
    display:grid;
    justify-items:center;
    gap:8px;
    min-height:88px;
    padding:14px 6px;
    border:1px solid var(--line);
    border-radius:18px;
    background:rgba(255,255,255,.035);
    color:var(--text);
    font:inherit;
    font-size:12px;
    font-weight:750;
    cursor:pointer;
    transition:transform .12s var(--ease),background .15s,border-color .15s;
  }
  .sheet-item svg{width:24px;height:24px;fill:none;stroke:var(--accent);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .sheet-item:active{transform:scale(.95);background:rgba(255,255,255,.07)}
  .sheet-item.active{border-color:rgba(201,255,74,.5);background:rgba(201,255,74,.08)}
  .sheet-item:focus-visible,.sheet-action:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .sheet-account{display:flex;align-items:center;gap:14px;margin-bottom:16px}
  .sheet-account .avatar{width:52px;height:52px;flex:0 0 auto;font-size:20px}
  .sheet-account b{display:block;font-size:16px}
  .sheet-account small{display:block;margin-top:3px;color:var(--muted);font-size:13px;overflow-wrap:anywhere}
  .sheet-actions{display:grid;gap:10px}
  .sheet-action{
    min-height:50px;
    border:1px solid var(--line);
    border-radius:14px;
    background:rgba(255,255,255,.045);
    color:var(--text);
    font:inherit;
    font-size:15px;
    font-weight:750;
    cursor:pointer;
    transition:transform .12s var(--ease),background .15s;
  }
  .sheet-action:active{transform:scale(.98);background:rgba(255,255,255,.08)}
  .sheet-action.danger{color:#ff8a94}
}

@media (max-width:360px){
  .sheet-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-height:500px) and (orientation:landscape) and (max-width:900px){
  .main > .top{position:relative}
  .tabbar button{min-height:40px}
}

@media (prefers-reduced-motion:reduce){
  .view.active,.modal.show .box,.sheet.show,.sheet-panel{animation:none!important}
  .tabbar button,.sheet-item,.sheet-action,.top .user .avatar{transition:none!important}
}