/* Masjid Display Portal v4.2.53 — Desktop sidebar clarity refresh */
@media (min-width:1001px){
  html[data-portal-theme="studio"] .app-shell{
    grid-template-columns:278px minmax(0,1fr);
  }

  html[data-portal-theme="studio"] .sidebar{
    padding:20px 16px 18px;
    gap:13px;
    overflow:hidden;
  }

  html[data-portal-theme="studio"] .sidebar .brand{
    min-height:66px;
    gap:12px;
    padding:5px 8px 15px;
  }
  html[data-portal-theme="studio"] .sidebar .brand-mark.small{
    width:44px;
    height:44px;
    flex:0 0 44px;
    border-radius:14px;
    font-size:24px;
  }
  html[data-portal-theme="studio"] .sidebar .brand>div:last-child{
    min-width:0;
  }
  html[data-portal-theme="studio"] .sidebar .brand strong{
    font-size:15px!important;
    font-weight:800!important;
    line-height:1.2;
    letter-spacing:-.02em!important;
  }
  html[data-portal-theme="studio"] .sidebar .brand span{
    margin-top:4px;
    font-size:10.5px!important;
    line-height:1.25;
    color:#858891!important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  html[data-portal-theme="studio"] .nav-groups{
    gap:8px;
    padding:0 2px 9px 0;
    scrollbar-width:thin;
    scrollbar-color:#cfd1d7 transparent;
  }
  html[data-portal-theme="studio"] .nav-groups::-webkit-scrollbar{width:6px}
  html[data-portal-theme="studio"] .nav-groups::-webkit-scrollbar-track{background:transparent}
  html[data-portal-theme="studio"] .nav-groups::-webkit-scrollbar-thumb{
    background:#d3d5da;
    border-radius:999px;
  }

  html[data-portal-theme="studio"] .sidebar-search{
    min-height:44px!important;
    flex:0 0 auto;
    margin:0 0 3px!important;
    padding:9px 12px!important;
    gap:9px!important;
    border-radius:14px!important;
    background:#f4f4f6!important;
  }
  html[data-portal-theme="studio"] .sidebar-search>span{
    color:#676a72!important;
    font-size:18px!important;
    line-height:1;
  }
  html[data-portal-theme="studio"] .sidebar-search input{
    min-width:0;
    font-size:13px!important;
    font-weight:600!important;
    line-height:1.3;
  }
  html[data-portal-theme="studio"] .sidebar-search input::placeholder{
    color:#8b8e96!important;
    opacity:1;
  }

  html[data-portal-theme="studio"] .nav-groups details{
    width:100%;
    overflow:hidden;
    border:1px solid transparent!important;
    border-radius:15px!important;
    transition:background .16s ease,border-color .16s ease;
  }
  html[data-portal-theme="studio"] .nav-groups details[open]{
    background:#f7f7f8!important;
    border-color:#ececef!important;
  }
  html[data-portal-theme="studio"] .nav-groups summary{
    position:relative;
    display:flex!important;
    align-items:center;
    min-height:38px;
    padding:9px 32px 8px 11px;
    cursor:pointer;
    user-select:none;
    list-style:none;
    color:#64676f!important;
    font-size:10.5px!important;
    font-weight:850!important;
    line-height:1.2;
    letter-spacing:.10em!important;
    text-transform:uppercase;
  }
  html[data-portal-theme="studio"] .nav-groups summary::-webkit-details-marker{display:none}
  html[data-portal-theme="studio"] .nav-groups summary::marker{content:""}
  html[data-portal-theme="studio"] .nav-groups summary::after{
    content:"›";
    position:absolute;
    right:12px;
    top:50%;
    transform:translateY(-52%);
    color:#a3a5ab;
    font-size:18px;
    font-weight:500;
    transition:transform .16s ease,color .16s ease;
  }
  html[data-portal-theme="studio"] .nav-groups details[open]>summary{
    color:#24262b!important;
  }
  html[data-portal-theme="studio"] .nav-groups details[open]>summary::after{
    transform:translateY(-50%) rotate(90deg);
    color:#595c64;
  }
  html[data-portal-theme="studio"] .nav-groups details>div{
    display:grid;
    gap:3px;
    padding:0 6px 8px;
  }

  html[data-portal-theme="studio"] .nav-groups button[data-page]{
    position:relative;
    width:100%;
    min-width:0;
    min-height:44px;
    padding:7px 34px 7px 8px;
    gap:10px;
    text-align:left;
    border-radius:12px!important;
    color:#50535b!important;
    font-size:13.5px!important;
    font-weight:680!important;
    line-height:1.25;
    letter-spacing:-.005em;
    transition:background .14s ease,color .14s ease,box-shadow .14s ease,border-color .14s ease;
  }
  html[data-portal-theme="studio"] .nav-groups button[data-page] b{
    width:30px;
    height:30px;
    flex:0 0 30px;
    border-radius:9px;
    color:#666a73;
    background:#fff;
    border-color:#e5e6e9;
    font-size:14px;
    font-weight:800;
    transition:background .14s ease,color .14s ease,border-color .14s ease;
  }
  html[data-portal-theme="studio"] .nav-groups button[data-page] span{
    min-width:0;
    display:block!important;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  html[data-portal-theme="studio"] .nav-groups button[data-page]:hover{
    background:#ececef!important;
    color:#17181c!important;
  }
  html[data-portal-theme="studio"] .nav-groups button[data-page]:hover b{
    background:#f9f9fa;
    color:#1e2025;
    border-color:#d9dade;
  }
  html[data-portal-theme="studio"] .nav-groups button[data-page].active{
    color:#fff!important;
    font-weight:800!important;
    background:#17181c!important;
    border-color:#17181c!important;
    box-shadow:0 7px 18px rgba(22,23,27,.15)!important;
  }
  html[data-portal-theme="studio"] .nav-groups button[data-page].active b{
    color:#fff!important;
    background:#2d2f34!important;
    border-color:#3a3c42!important;
  }
  html[data-portal-theme="studio"] .nav-groups button[data-page].active::after{
    content:"";
    position:absolute;
    right:13px;
    top:50%;
    width:7px;
    height:7px;
    transform:translateY(-50%);
    border-radius:999px;
    background:#dfff57;
    box-shadow:0 0 0 3px rgba(223,255,87,.14);
  }

  html[data-portal-theme="studio"] .sidebar>#installPwa,
  html[data-portal-theme="studio"] .sidebar>#logoutBtn{
    min-height:43px;
    flex:0 0 auto;
    padding:9px 13px;
    font-size:13px!important;
    font-weight:750!important;
    line-height:1.2;
  }
  html[data-portal-theme="studio"] .sidebar>#logoutBtn{
    margin-top:0!important;
    color:#8a3f45!important;
    border-color:#eedfe1!important;
    background:#fffafb!important;
  }
  html[data-portal-theme="studio"] .sidebar>#logoutBtn:hover{
    color:#742d34!important;
    background:#f9edef!important;
    border-color:#e8cfd3!important;
  }

  /* Compact mode remains an icon rail, with browser-native tooltips from JS titles. */
  html[data-portal-theme="studio"] body.compact-sidebar .app-shell{grid-template-columns:92px minmax(0,1fr)!important}
  html[data-portal-theme="studio"] body.compact-sidebar .sidebar{padding-left:13px!important;padding-right:13px!important}
  html[data-portal-theme="studio"] body.compact-sidebar .nav-groups details{overflow:visible}
  html[data-portal-theme="studio"] body.compact-sidebar .nav-groups details[open]{background:transparent!important;border-color:transparent!important}
  html[data-portal-theme="studio"] body.compact-sidebar .nav-groups details>div{padding-left:0;padding-right:0}
  html[data-portal-theme="studio"] body.compact-sidebar .nav-groups button[data-page]{padding:7px!important;justify-content:center}
  html[data-portal-theme="studio"] body.compact-sidebar .nav-groups button[data-page] b{width:34px;height:34px;flex-basis:34px}
  html[data-portal-theme="studio"] body.compact-sidebar .nav-groups button[data-page].active::after{right:3px;width:6px;height:6px}
}

@media (min-width:1001px) and (max-width:1180px){
  html[data-portal-theme="studio"] .app-shell{grid-template-columns:252px minmax(0,1fr)}
  html[data-portal-theme="studio"] .nav-groups button[data-page]{font-size:13px!important;padding-right:30px}
}