/* MEI em Dia v0.9.13 — acabamento da sidebar */
.sidebar-collapse-toggle{display:none}

@media (min-width:821px){
  .sidebar{
    display:grid!important;
    grid-template-rows:auto minmax(0,1fr) auto;
    height:100dvh;
    overflow:hidden;
    padding-top:18px;
    padding-bottom:10px;
    transition:width .2s ease,padding .2s ease;
  }

  .sidebar-logo{
    grid-row:1;
    flex:0 0 auto;
    min-height:52px;
    padding:0 48px 14px 10px;
    align-self:start;
  }

  .side-nav{
    grid-row:2;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
    scrollbar-width:thin;
    scrollbar-color:#e4e0f5 transparent;
    padding:4px 5px 18px 0;
    margin:0 -5px 0 0;
    scroll-behavior:smooth;
  }
  .side-nav:hover{scrollbar-color:#c8c1e8 transparent}
  .side-nav::-webkit-scrollbar{width:5px}
  .side-nav::-webkit-scrollbar-track{background:transparent}
  .side-nav::-webkit-scrollbar-thumb{background:#e4e0f5;border-radius:999px}
  .side-nav:hover::-webkit-scrollbar-thumb{background:#c8c1e8}
  .side-nav::-webkit-scrollbar-thumb:hover{background:#aaa0df}

  .side-user{
    grid-row:3;
    flex:0 0 auto;
    margin-top:0!important;
    min-height:64px;
    padding:12px 8px 2px!important;
    background:#fff;
    position:relative;
    z-index:3;
    border-top:1px solid var(--border);
    align-self:end;
  }

  .sidebar-collapse-toggle{
    display:grid;
    place-items:center;
    position:absolute;
    top:17px;
    right:13px;
    width:34px;
    height:34px;
    border:1px solid var(--border);
    border-radius:10px;
    background:#fff;
    color:var(--primary);
    font-size:1rem;
    font-weight:900;
    line-height:1;
    cursor:pointer;
    z-index:5;
    box-shadow:0 5px 16px rgba(45,40,77,.07);
    transition:background .18s ease,color .18s ease,transform .18s ease,border-color .18s ease;
  }
  .sidebar-collapse-toggle:hover{background:var(--primary-soft);border-color:#d7d0ff;transform:translateY(-1px)}
  .sidebar-collapse-toggle:focus-visible{outline:3px solid #ded7ff;outline-offset:2px}
  .sidebar-collapse-toggle::after{
    content:attr(data-tooltip);
    position:absolute;
    top:50%;
    right:calc(100% + 9px);
    transform:translateY(-50%) translateX(3px);
    padding:7px 9px;
    border-radius:8px;
    background:#242235;
    color:#fff;
    font-size:.68rem;
    font-weight:700;
    line-height:1;
    white-space:nowrap;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:.16s ease;
    box-shadow:0 8px 20px rgba(30,27,50,.16);
  }
  .sidebar-collapse-toggle:hover::after,
  .sidebar-collapse-toggle:focus-visible::after{opacity:1;visibility:visible;transform:translateY(-50%) translateX(0)}

  .app-shell{transition:margin-left .2s ease}

  body.sidebar-collapsed .sidebar{
    width:82px;
    padding-left:10px;
    padding-right:10px;
  }
  body.sidebar-collapsed .app-shell{margin-left:82px}
  body.sidebar-collapsed .sidebar-logo{
    justify-content:center;
    min-height:52px;
    padding:0 0 14px;
  }
  body.sidebar-collapsed .sidebar-logo>span:not(.logo-mark){display:none}
  body.sidebar-collapsed .sidebar-collapse-toggle{
    top:61px;
    right:24px;
  }
  body.sidebar-collapsed .sidebar-collapse-toggle::after{
    right:auto;
    left:calc(100% + 9px);
    transform:translateY(-50%) translateX(-3px);
  }
  body.sidebar-collapsed .sidebar-collapse-toggle:hover::after,
  body.sidebar-collapsed .sidebar-collapse-toggle:focus-visible::after{transform:translateY(-50%) translateX(0)}
  body.sidebar-collapsed .side-nav{padding-top:48px;padding-right:0;margin-right:0}
  body.sidebar-collapsed .role-nav-label{display:none}
  body.sidebar-collapsed .side-divider{margin:8px 10px}
  body.sidebar-collapsed .side-link{
    justify-content:center;
    gap:0;
    padding-left:0;
    padding-right:0;
    font-size:0;
    min-height:44px;
  }
  body.sidebar-collapsed .side-link>span{
    width:auto;
    font-size:1rem;
    margin:0;
  }
  body.sidebar-collapsed .side-link small{display:none}
  body.sidebar-collapsed .side-user{
    grid-template-columns:1fr;
    justify-items:center;
    min-height:58px;
    padding:10px 0 0!important;
  }
  body.sidebar-collapsed .side-user>div:nth-child(2),
  body.sidebar-collapsed .side-user>a{display:none}
  body.sidebar-collapsed .avatar{margin:auto}
}

@media (max-width:820px){
  .sidebar-collapse-toggle{display:none!important}
  .side-nav{
    flex:0 0 auto!important;
    min-height:auto!important;
    overflow:visible!important;
    padding-right:0!important;
    margin-right:0!important;
  }
}
