/* Canonical Professional sidebar — fixed brand/divider + independently scrollable navigation. */
@media (min-width:821px){
  #app .topbar{margin:0 252px 0 0!important;min-height:72px!important;padding:10px 20px!important;box-sizing:border-box;transition:margin-right .2s ease}
  #app .topbar .brand-lockup{min-width:0;max-width:calc(100% - 270px);gap:9px}
  #app .topbar .brand-team-logo{width:46px!important;height:46px!important;flex:0 0 46px;object-fit:contain}
  #app .topbar .brand-lockup>div{min-width:0}
  #app .topbar .brand-lockup b{font-size:1rem!important;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #app .topbar .brand-lockup span{font-size:.76rem!important;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #app .topbar .top-actions{flex:0 0 auto;gap:8px}
  #app .topbar .profile-button{width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important;flex:0 0 46px!important}
  #app .topbar .profile-button img{width:100%!important;height:100%!important;object-fit:cover!important}

  #app .shell{width:auto;max-width:none;margin:20px 272px 94px 20px;padding:24px;transition:margin-right .2s ease}
  #app .nav{
    position:fixed!important;inset-block:0!important;inset-inline-end:0!important;right:0!important;left:auto!important;
    width:252px!important;height:100vh!important;padding:0 12px!important;box-sizing:border-box;
    display:flex!important;flex-direction:column!important;gap:0!important;overflow:hidden!important;
    background:linear-gradient(180deg,#0b5d4b,#147a62 58%,#0d614f)!important;color:#fff;z-index:60!important;
    box-shadow:-12px 0 32px rgba(14,70,55,.18)!important;transition:width .2s ease,padding .2s ease;
  }

  /* Brand, divider and collapse button are outside the scrollable menu by design. */
  #app .nav-brand-v1304{
    position:relative!important;top:auto!important;z-index:12;flex:0 0 96px;min-height:96px;margin:0 -12px 38px;padding:8px 12px 14px;
    border-radius:0 0 18px 18px;
    background:url('./assets/eshraq-sidebar-icon.svg') center 8px/84px auto no-repeat,linear-gradient(145deg,#f4e8bf 0%,#ead28f 52%,#dfbd67 100%);
    box-shadow:0 7px 18px rgba(81,59,16,.11);overflow:visible;
  }
  #app .nav-brand-v1304::after{content:"";position:absolute;left:18px;right:18px;bottom:-15px;height:1px;background:rgba(255,255,255,.34)}
  #app .nav-collapse-v1304{
    position:absolute!important;left:50%!important;right:auto!important;top:auto!important;bottom:-33px!important;
    transform:translateX(-50%)!important;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;
    padding:0!important;border-radius:50%!important;border:1px solid rgba(255,255,255,.34)!important;
    background:#0f735f!important;color:#f4d27a!important;display:grid!important;place-items:center!important;
    cursor:pointer!important;font:800 18px/1 sans-serif!important;box-shadow:0 5px 12px rgba(5,62,50,.22)!important;
    z-index:14!important;outline:0!important
  }
  #app .nav-collapse-v1304:hover,#app .nav-collapse-v1304:focus-visible{background:#0b6654!important;color:#ffe4a0!important;outline:2px solid rgba(244,210,122,.34)!important}

  #app .nav-items-v1304{
    flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:6px;padding:0 0 16px;
    overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(244,210,122,.45) transparent
  }
  #app .nav-items-v1304::-webkit-scrollbar{width:5px}
  #app .nav-items-v1304::-webkit-scrollbar-track{background:transparent}
  #app .nav-items-v1304::-webkit-scrollbar-thumb{background:rgba(244,210,122,.42);border-radius:99px}

  #app .nav-items-v1304>button{
    position:relative!important;width:100%!important;min-height:48px!important;box-sizing:border-box;border:1px solid transparent!important;
    background:transparent!important;color:#fff!important;border-radius:15px!important;padding:6px 9px!important;
    display:grid!important;grid-template-columns:34px minmax(0,1fr)!important;align-items:center!important;
    justify-content:stretch!important;gap:9px!important;text-align:right!important;transform:none!important;
    box-shadow:none!important;outline:0!important;flex:0 0 auto!important
  }
  #app .nav-items-v1304>button span{
    width:32px!important;height:32px!important;border-radius:10px!important;display:grid!important;place-items:center!important;
    background:rgba(255,255,255,.12)!important;border:1px solid rgba(255,255,255,.16)!important;font-size:18px!important;flex:0 0 auto!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08)
  }
  #app .nav-items-v1304>button small{display:block!important;min-width:0!important;font-size:.9rem!important;font-weight:800!important;line-height:1.25!important;color:inherit!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;text-align:right!important}
  #app .nav-items-v1304>button:hover{background:rgba(255,255,255,.09)!important;border-color:rgba(255,255,255,.16)!important;transform:translateX(-2px)!important}
  #app .nav-items-v1304>button.active{background:linear-gradient(90deg,rgba(255,255,255,.15),rgba(214,189,120,.10))!important;color:#fff!important;border-color:rgba(244,210,122,.68)!important;outline:0!important;box-shadow:inset 3px 0 0 #e4c86f,0 6px 14px rgba(0,0,0,.10)!important;transform:none!important}
  #app .nav-items-v1304>button.active span{background:#fff6dd!important;border-color:#d6bd78!important;color:#075846!important}

  #app .nav-items-v1304>button[data-route="home"] span{background:rgba(244,196,82,.20)!important}
  #app .nav-items-v1304>button[data-route="beneficiaries"] span{background:rgba(141,98,210,.24)!important}
  #app .nav-items-v1304>button[data-route="cases"] span{background:rgba(245,174,65,.23)!important}
  #app .nav-items-v1304>button[data-route="sessions"] span{background:rgba(72,145,210,.25)!important}
  #app .nav-items-v1304>button[data-route="appointments"] span{background:rgba(151,114,220,.23)!important}
  #app .nav-items-v1304>button[data-route="assessments"] span{background:rgba(76,175,126,.24)!important}
  #app .nav-items-v1304>button[data-route="conversations"] span{background:rgba(190,120,210,.22)!important}
  #app .nav-items-v1304>button[data-route="contacts"] span{background:rgba(126,104,203,.24)!important}
  #app .nav-items-v1304>button[data-route="supervision"] span{background:rgba(65,142,205,.25)!important}
  #app .nav-items-v1304>button[data-route="reports"] span{background:rgba(205,104,154,.22)!important}
  #app .nav-items-v1304>button[data-route="workdesk"] span{background:rgba(224,166,61,.23)!important}
  #app .nav-items-v1304>button[data-route="notifications"] span{background:rgba(236,146,54,.24)!important}
  #app .nav-items-v1304>button[data-route="more"] span{background:rgba(78,167,151,.24)!important}
  #app .nav-items-v1304>button.active span{background:#fff6dd!important}

  .sidebar-tooltip-v1304{position:fixed;z-index:5000;pointer-events:none;opacity:0;transform:translateY(2px);transition:opacity .12s ease,transform .12s ease;background:#17362f;color:#fff;border:1px solid rgba(244,210,122,.42);padding:8px 11px;border-radius:10px;font-size:13px;font-weight:800;white-space:nowrap;box-shadow:0 8px 20px rgba(0,0,0,.22)}
  .sidebar-tooltip-v1304.show{opacity:1;transform:translateY(0)}

  #app .page-head>* ,#app .professional-conversation-layout>*{min-width:0}
  #app .page-head h1,#app .page-head h2,#app .professional-conversation-list,#app .professional-conversation-list *{overflow-wrap:anywhere}
  #app .professional-conversation-layout{grid-template-columns:minmax(360px,36%) minmax(0,1fr);gap:18px}

  body.professional-sidebar-collapsed-v1304 #app .nav{width:86px!important;padding-inline:10px!important}
  body.professional-sidebar-collapsed-v1304 #app .topbar{margin:0 86px 0 0!important}
  body.professional-sidebar-collapsed-v1304 #app .shell{margin-right:106px}
  body.professional-sidebar-collapsed-v1304 #app .nav-brand-v1304{flex-basis:76px;min-height:76px;margin:0 -10px 38px;padding:8px 8px 12px;border-radius:0 0 16px 16px;background-position:center 7px;background-size:56px auto}
  body.professional-sidebar-collapsed-v1304 #app .nav-items-v1304>button{grid-template-columns:1fr!important;justify-items:center!important;padding:7px!important}
  body.professional-sidebar-collapsed-v1304 #app .nav-items-v1304>button small{display:none!important}
}
@media (max-width:820px){
  #app .nav-brand-v1304{display:none!important}
  #app .shell{width:auto;max-width:none;margin:0;padding:15px 12px 92px}
  #app .nav button.active{background:rgba(15,115,95,.12)!important;color:#075846!important;border-color:rgba(214,189,120,.65)!important}
}