/* =========================================================
   Rabbit Workspace OS v122 — Mobile/Tablet Sidebar Toggle
   Rende sempre disponibile il menu principale quando la sidebar
   desktop viene nascosta (smartphone e tablet fino a 1180px).
   ========================================================= */

@media (max-width:1180px){
  .topbar,
  .topbar.rabbit-pro-topbar{
    display:grid !important;
    grid-template-columns:48px minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:9px !important;
    min-width:0 !important;
  }

  .mobile-menu-btn{
    display:grid !important;
    place-items:center !important;
    position:relative !important;
    z-index:2 !important;
    width:48px !important;
    min-width:48px !important;
    height:48px !important;
    min-height:48px !important;
    margin:0 !important;
    padding:0 !important;
    border:1px solid rgba(201,213,227,.96) !important;
    border-radius:16px !important;
    background:linear-gradient(145deg,#f5f8fb,#dfe6ed) !important;
    color:#163859 !important;
    box-shadow:
      5px 5px 11px rgba(190,200,211,.82),
      -5px -5px 11px rgba(255,255,255,.94) !important;
    font-size:0 !important;
    line-height:1 !important;
    cursor:pointer !important;
    -webkit-tap-highlight-color:transparent !important;
  }

  .mobile-menu-btn::before{
    content:"" !important;
    width:21px !important;
    height:15px !important;
    display:block !important;
    background:
      linear-gradient(currentColor,currentColor) 0 0/21px 2px no-repeat,
      linear-gradient(currentColor,currentColor) 0 50%/16px 2px no-repeat,
      linear-gradient(currentColor,currentColor) 0 100%/21px 2px no-repeat !important;
    border-radius:999px !important;
    transition:transform 160ms ease !important;
  }

  .mobile-menu-btn:hover{
    color:#2563eb !important;
    transform:translateY(-1px) !important;
  }

  .mobile-menu-btn:active,
  .mobile-menu-btn[aria-expanded="true"]{
    transform:translateY(0) !important;
    color:#1d4ed8 !important;
    box-shadow:
      inset 4px 4px 8px rgba(190,200,211,.88),
      inset -4px -4px 8px rgba(255,255,255,.96) !important;
  }

  .topbar .search,
  .rabbit-pro-topbar .search{
    min-width:0 !important;
    width:100% !important;
    max-width:none !important;
  }

  .rabbit-topbar-user{
    min-width:0 !important;
    justify-self:end !important;
  }

  /* Drawer sempre montato: l'animazione non dipende da display:none. */
  #mobileDrawer.mobile-drawer{
    display:block !important;
    position:fixed !important;
    inset:0 !important;
    z-index:2147483200 !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    background:rgba(15,23,42,.46) !important;
    backdrop-filter:blur(7px) !important;
    -webkit-backdrop-filter:blur(7px) !important;
    transition:opacity 180ms ease, visibility 180ms ease !important;
  }

  #mobileDrawer.mobile-drawer.show{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  #mobileDrawer .mobile-drawer-panel{
    width:min(88vw,360px) !important;
    max-width:360px !important;
    height:100dvh !important;
    max-height:100dvh !important;
    padding:
      calc(14px + env(safe-area-inset-top,0px))
      14px
      calc(20px + env(safe-area-inset-bottom,0px)) !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
    border-radius:0 28px 28px 0 !important;
    background:linear-gradient(180deg,#eef3f8 0%,#e5ebf1 100%) !important;
    color:#223243 !important;
    border-right:1px solid rgba(202,214,226,.95) !important;
    box-shadow:28px 0 80px rgba(15,23,42,.24) !important;
    transform:translateX(-104%) !important;
    transition:transform 220ms cubic-bezier(.2,.8,.2,1) !important;
  }

  #mobileDrawer.mobile-drawer.show .mobile-drawer-panel{
    transform:translateX(0) !important;
  }

  #mobileDrawer .mobile-drawer-head{
    position:sticky !important;
    top:calc(-14px - env(safe-area-inset-top,0px)) !important;
    z-index:3 !important;
    min-height:64px !important;
    margin:0 -2px 14px !important;
    padding:8px 2px 12px !important;
    border-bottom:1px solid rgba(196,209,222,.95) !important;
    background:linear-gradient(180deg,rgba(238,243,248,.98),rgba(238,243,248,.92)) !important;
    backdrop-filter:blur(12px) !important;
  }

  #mobileDrawer .mobile-drawer-head button{
    min-height:42px !important;
    padding:0 14px !important;
    border-radius:14px !important;
    color:#25384b !important;
  }

  #mobileDrawerNav.mobile-drawer-nav{
    display:grid !important;
    gap:12px !important;
  }

  #mobileDrawerNav .rabbit-mobile-nav-group{
    display:grid !important;
    gap:7px !important;
  }

  #mobileDrawerNav .rabbit-mobile-nav-group>b{
    display:block !important;
    padding:4px 8px 2px !important;
    color:#66778a !important;
    font-size:10px !important;
    font-weight:950 !important;
    letter-spacing:.08em !important;
    text-transform:uppercase !important;
  }

  #mobileDrawerNav.mobile-drawer-nav button{
    width:100% !important;
    min-height:50px !important;
    margin:0 !important;
    padding:0 14px !important;
    border:1px solid rgba(204,215,226,.96) !important;
    border-radius:16px !important;
    background:linear-gradient(145deg,#f1f5f9,#dfe6ed) !important;
    color:#24384c !important;
    box-shadow:
      4px 4px 9px rgba(190,200,211,.72),
      -4px -4px 9px rgba(255,255,255,.9) !important;
    font-size:13px !important;
    font-weight:850 !important;
  }

  #mobileDrawerNav.mobile-drawer-nav button.active{
    color:#1d4ed8 !important;
    border-color:rgba(147,181,244,.9) !important;
    box-shadow:
      inset 4px 4px 8px rgba(190,200,211,.78),
      inset -4px -4px 8px rgba(255,255,255,.94) !important;
  }

  #mobileDrawerNav.mobile-drawer-nav button.danger{
    color:#b42336 !important;
    border-color:rgba(239,113,129,.28) !important;
  }
}

@media (max-width:560px){
  .topbar,
  .topbar.rabbit-pro-topbar{
    grid-template-columns:44px minmax(0,1fr) auto !important;
    gap:7px !important;
  }

  .mobile-menu-btn{
    width:44px !important;
    min-width:44px !important;
    height:44px !important;
    min-height:44px !important;
    border-radius:14px !important;
  }

  .rabbit-admin-chip b{
    display:none !important;
  }

  #mobileDrawer .mobile-drawer-panel{
    width:min(92vw,350px) !important;
  }
}

@media (prefers-reduced-motion:reduce){
  #mobileDrawer.mobile-drawer,
  #mobileDrawer .mobile-drawer-panel,
  .mobile-menu-btn::before{
    transition-duration:.01ms !important;
  }
}