/* Al-Nibras Admin Sidebar — Elite v6
   Premium desktop sidebar. Keeps the existing mobile drawer behavior.
   Features: pin/unpin, icon rail, hover expand, refined active states,
   polished brand/user areas, and smoother hierarchy. */

@media (min-width:821px){
  .admin-shell{
    --sidebar-expanded-width:304px;
    --sidebar-collapsed-width:82px;
    --sb-navy-1:#071b31;
    --sb-navy-2:#0a2747;
    --sb-navy-3:#0b3159;
    --sb-blue:#2f84ed;
    --sb-blue-2:#1f68c4;
    --sb-text:#dce9f7;
    --sb-muted:#86a4c3;
    --sb-line:rgba(163,201,236,.12);
    --sb-glass:rgba(255,255,255,.055);
  }

  .admin-shell .sidebar,
  .admin-shell .admin-main{
    transition:
      width .23s cubic-bezier(.22,.61,.36,1),
      margin-right .23s cubic-bezier(.22,.61,.36,1),
      box-shadow .23s ease;
  }

  /* ===== Main shell ===== */
  .admin-shell .sidebar{
    width:var(--sidebar-expanded-width);
    isolation:isolate;
    overflow:hidden;
    border-left:1px solid rgba(134,181,225,.14);
    background:
      radial-gradient(circle at 78% -4%,rgba(57,143,232,.29),transparent 28%),
      radial-gradient(circle at 16% 56%,rgba(32,103,174,.12),transparent 34%),
      linear-gradient(180deg,var(--sb-navy-2) 0%,var(--sb-navy-1) 100%);
    box-shadow:-18px 0 48px rgba(5,25,47,.13);
  }
  .admin-shell .sidebar::before{
    content:"";
    pointer-events:none;
    position:absolute;
    z-index:-1;
    inset:0;
    background:
      linear-gradient(118deg,transparent 0 40%,rgba(255,255,255,.028) 40.3% 40.7%,transparent 41%),
      linear-gradient(180deg,rgba(255,255,255,.025),transparent 20%);
  }
  .admin-shell .sidebar::after{
    content:"";
    pointer-events:none;
    position:absolute;
    right:0;
    top:0;
    bottom:0;
    width:1px;
    background:linear-gradient(180deg,rgba(125,192,255,.28),rgba(125,192,255,.03) 28%,rgba(125,192,255,.02) 70%,rgba(125,192,255,.17));
  }

  /* ===== Brand header ===== */
  .admin-shell .sidebar-head{
    position:relative;
    min-height:126px;
    height:126px;
    padding:18px 19px;
    overflow:visible;
    border-bottom:1px solid rgba(255,255,255,.075);
    background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));
  }
  .admin-shell .sidebar-head .brand{
    min-width:0;
    gap:13px;
  }
  .admin-shell .sidebar-head .brand img{
    width:66px;
    height:66px;
    flex:0 0 66px;
    padding:4px;
    object-fit:contain;
    border-radius:20px;
    background:rgba(255,255,255,.97);
    border:1px solid rgba(255,255,255,.82);
    box-shadow:0 10px 28px rgba(0,14,31,.25), inset 0 1px 0 rgba(255,255,255,.8);
  }
  .admin-shell .sidebar-head .brand>div{
    min-width:0;
  }
  .admin-shell .sidebar-head .brand strong{
    color:#fff;
    font-size:19px;
    font-weight:900;
    line-height:1.35;
    letter-spacing:-.15px;
    text-shadow:0 2px 12px rgba(0,0,0,.16);
  }
  .admin-shell .sidebar-head .brand span{
    color:#9fb9d4;
    margin-top:4px;
    font-size:11.5px;
    font-weight:700;
  }

  /* Pin button */
  .admin-shell .sidebar-head > button.sidebar-pin-toggle{
    position:absolute;
    z-index:50;
    top:18px;
    left:15px;
    width:38px;
    height:38px;
    margin:0;
    padding:0;
    display:grid!important;
    place-items:center;
    color:#d8ebff;
    cursor:pointer;
    border:1px solid rgba(157,205,250,.24);
    border-radius:12px;
    background:linear-gradient(180deg,rgba(65,142,219,.25),rgba(29,91,151,.20));
    box-shadow:0 8px 22px rgba(0,13,30,.18),inset 0 1px rgba(255,255,255,.08);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    transition:transform .16s ease,background .16s ease,border-color .16s ease,color .16s ease;
  }
  .admin-shell .sidebar-head > button.sidebar-pin-toggle:hover{
    color:#fff;
    transform:translateY(-1px);
    border-color:rgba(181,221,255,.38);
    background:linear-gradient(180deg,rgba(69,158,246,.36),rgba(27,100,172,.28));
  }
  .admin-shell .sidebar-head > button.sidebar-pin-toggle:active{transform:translateY(0) scale(.96)}
  .admin-shell .sidebar-head > button.sidebar-pin-toggle svg{width:18px;height:18px;display:block;fill:currentColor}

  /* Reliable click/tap target: the decorative SVG must never steal pointer events. */
  .admin-shell .sidebar-head .brand{position:relative;z-index:1}
  .admin-shell .sidebar-head > button.sidebar-pin-toggle{
    z-index:9999!important;
    pointer-events:auto!important;
    touch-action:manipulation;
    -webkit-user-select:none;
    user-select:none;
    isolation:isolate;
  }
  .admin-shell .sidebar-head > button.sidebar-pin-toggle::before{
    content:"";
    position:absolute;
    inset:-6px;
    border-radius:16px;
    pointer-events:auto;
  }
  .admin-shell .sidebar-head > button.sidebar-pin-toggle svg,
  .admin-shell .sidebar-head > button.sidebar-pin-toggle svg *,
  .admin-shell .sidebar-head > button.sidebar-pin-toggle .pin-state-dot{
    pointer-events:none!important;
  }
  .admin-shell .sidebar-head > button.sidebar-pin-toggle .pin-state-dot{
    position:absolute;
    right:4px;
    bottom:4px;
    width:8px;
    height:8px;
    border:2px solid #0b2948;
    border-radius:50%;
    background:#38d895;
    box-shadow:0 0 0 2px rgba(56,216,149,.10);
  }
  .admin-shell .sidebar-head > button.sidebar-pin-toggle[aria-pressed="false"] .pin-state-dot{background:#f5b34e}

  /* ===== Section caption ===== */
  .admin-shell .sidebar-caption{
    position:relative;
    align-items:center;
    padding:18px 18px 9px;
    color:#9bb4cf;
    font-size:10.5px;
    font-weight:900;
    letter-spacing:.05px;
  }
  .admin-shell .sidebar-caption span{
    display:flex;
    align-items:center;
    gap:8px;
  }
  .admin-shell .sidebar-caption span::before{
    content:"";
    width:6px;
    height:6px;
    border-radius:50%;
    background:#4d9af0;
    box-shadow:0 0 0 4px rgba(77,154,240,.10);
  }
  .admin-shell .sidebar-caption small{
    color:#6383a3;
    font-size:9.5px;
    font-weight:800;
  }

  /* ===== Navigation ===== */
  .admin-shell .side-nav{
    padding:5px 12px 18px;
    scrollbar-width:thin;
    scrollbar-color:rgba(131,174,215,.27) transparent;
    overscroll-behavior:contain;
  }
  .admin-shell .side-nav::-webkit-scrollbar{width:5px}
  .admin-shell .side-nav::-webkit-scrollbar-track{background:transparent}
  .admin-shell .side-nav::-webkit-scrollbar-thumb{background:rgba(131,174,215,.24);border-radius:10px}

  .admin-shell .nav-group{margin-bottom:2px}
  .admin-shell .side-nav button{
    position:relative;
    min-height:49px;
    height:49px;
    margin:2px 0;
    padding:0 12px;
    gap:11px;
    overflow:hidden;
    color:#b8cbe0;
    border:1px solid transparent;
    border-radius:15px;
    background:transparent;
    font-size:13.5px;
    font-weight:800;
    letter-spacing:-.05px;
    transition:
      color .16s ease,
      background .16s ease,
      border-color .16s ease,
      transform .16s ease,
      box-shadow .16s ease;
  }
  .admin-shell .side-nav button::before{
    content:"";
    position:absolute;
    right:0;
    top:12px;
    bottom:12px;
    width:3px;
    border-radius:3px 0 0 3px;
    opacity:0;
    transform:scaleY(.55);
    background:#78b9ff;
    box-shadow:0 0 12px rgba(90,174,255,.34);
    transition:opacity .16s ease,transform .16s ease;
  }
  .admin-shell .side-nav button:hover{
    color:#eef7ff;
    background:rgba(255,255,255,.052);
    border-color:rgba(169,207,243,.07);
  }
  .admin-shell .side-nav button:hover::before{opacity:.36;transform:scaleY(.78)}

  .admin-shell .side-nav button .icon{
    width:21px;
    height:21px;
    flex:0 0 auto;
    color:#7fa1c3;
    filter:drop-shadow(0 3px 8px rgba(0,0,0,.06));
    transition:color .16s ease,transform .16s ease,filter .16s ease;
  }
  .admin-shell .side-nav button:hover .icon{
    color:#9cc9f7;
    transform:translateY(-1px);
  }

  .admin-shell .side-nav button.active{
    color:#fff;
    background:linear-gradient(105deg,#3288ed 0%,#2471cc 54%,#1e5fad 100%);
    border-color:rgba(177,215,255,.20);
    box-shadow:0 10px 24px rgba(0,18,40,.28),inset 0 1px rgba(255,255,255,.18);
  }
  .admin-shell .side-nav button.active::before{
    opacity:1;
    transform:scaleY(1);
    background:#d8ecff;
  }
  .admin-shell .side-nav button.active .icon{
    color:#fff;
    filter:drop-shadow(0 4px 9px rgba(0,0,0,.18));
  }

  .admin-shell .nav-parent.in-path{
    color:#e8f4ff;
    background:rgba(53,128,202,.11);
    border-color:rgba(132,188,241,.09);
  }
  .admin-shell .nav-parent.in-path .icon{color:#8dc4fa}

  /* Arrow becomes a dedicated tiny control */
  .admin-shell .nav-parent i{
    width:25px;
    height:25px;
    margin-right:auto;
    display:grid;
    place-items:center;
    flex:0 0 25px;
    color:#6f90b2;
    font-size:17px;
    line-height:1;
    font-style:normal;
    border-radius:8px;
    background:rgba(255,255,255,.035);
    transition:transform .18s ease,color .16s ease,background .16s ease;
  }
  .admin-shell .nav-parent:hover i{color:#b8d9fb;background:rgba(255,255,255,.065)}
  .admin-shell .nav-parent i.up{transform:rotate(180deg)}

  /* Child menus */
  .admin-shell .nav-children{
    position:relative;
    margin:1px 0 5px;
  }
  .admin-shell .nav-children.expanded{
    padding:3px 0 5px;
  }
  .admin-shell .nav-children.expanded::after{
    content:"";
    position:absolute;
    top:7px;
    bottom:9px;
    right:25px;
    width:1px;
    background:linear-gradient(180deg,rgba(102,166,226,.12),rgba(111,177,239,.28),rgba(102,166,226,.08));
  }
  .admin-shell .nav-children button{
    z-index:1;
    height:42px;
    min-height:42px;
    margin:1px 0;
    padding-right:37px;
    padding-left:11px;
    border-radius:12px;
    color:#91a9c2;
    font-size:12px;
    font-weight:750;
  }
  .admin-shell .nav-children button .icon{
    width:17px!important;
    height:17px!important;
    color:#6586a7;
  }
  .admin-shell .nav-children button:hover{
    color:#dceeff;
    background:rgba(255,255,255,.045);
  }
  .admin-shell .nav-children button.active{
    color:#fff;
    background:linear-gradient(105deg,rgba(47,132,237,.92),rgba(31,103,194,.86));
    border-color:rgba(178,217,255,.12);
    box-shadow:0 8px 18px rgba(0,15,34,.20),inset 0 1px rgba(255,255,255,.12);
  }
  .admin-shell .nav-children button.active .icon{color:#fff}

  /* ===== User footer ===== */
  .admin-shell .sidebar-user{
    position:relative;
    padding:13px 13px 15px;
    border-top:1px solid rgba(255,255,255,.075);
    background:linear-gradient(180deg,rgba(4,18,34,.76),rgba(4,16,30,.96));
  }
  .admin-shell .sidebar-user::before{
    content:"";
    position:absolute;
    top:-1px;
    right:18px;
    left:18px;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(105,174,238,.24),transparent);
  }
  .admin-shell .user-card{
    min-height:66px;
    padding:10px 11px;
    gap:10px;
    color:#edf6ff;
    border:1px solid rgba(148,194,236,.11);
    border-radius:17px;
    background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.035));
    box-shadow:inset 0 1px rgba(255,255,255,.035),0 8px 20px rgba(0,0,0,.10);
  }
  .admin-shell .avatar{
    width:43px;
    height:43px;
    flex:0 0 43px;
    color:#fff;
    border-radius:13px;
    background:linear-gradient(145deg,#3a8cf0,#2569c4);
    box-shadow:0 8px 18px rgba(15,92,174,.28),inset 0 1px rgba(255,255,255,.18);
  }
  .admin-shell .user-card b{
    color:#fff;
    font-size:13px;
    font-weight:900;
  }
  .admin-shell .user-card span{
    color:#7f9ebd;
    margin-top:2px;
    font-size:10.5px;
    font-weight:700;
  }
  .admin-shell .user-card>i{
    width:9px;
    height:9px;
    background:#3bd88f;
    box-shadow:0 0 0 3px rgba(59,216,143,.14),0 0 10px rgba(59,216,143,.16);
  }
  .admin-shell .logout{
    height:43px;
    margin-top:9px;
    color:#ff979b;
    border:1px solid rgba(255,112,118,.22);
    border-radius:13px;
    background:rgba(192,49,57,.055);
    font-size:12px;
    font-weight:900;
    transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease;
  }
  .admin-shell .logout:hover{
    color:#ffb5b8;
    border-color:rgba(255,125,131,.34);
    background:rgba(204,57,65,.11);
  }
  .admin-shell .logout:active{transform:scale(.985)}

  /* ===== Auto collapse / icon rail ===== */
  .admin-shell.sidebar-auto-collapse .sidebar{
    width:var(--sidebar-collapsed-width);
    box-shadow:-10px 0 30px rgba(4,22,40,.10);
  }
  .admin-shell.sidebar-auto-collapse .admin-main{
    margin-right:var(--sidebar-collapsed-width);
  }
  .admin-shell.sidebar-auto-collapse .sidebar:hover,
  .admin-shell.sidebar-auto-collapse .sidebar:focus-within{
    width:var(--sidebar-expanded-width);
    box-shadow:-24px 0 62px rgba(4,22,43,.25);
  }

  .admin-shell.sidebar-auto-collapse .sidebar:not(:hover):not(:focus-within) .brand>div,
  .admin-shell.sidebar-auto-collapse .sidebar:not(:hover):not(:focus-within) .sidebar-caption,
  .admin-shell.sidebar-auto-collapse .sidebar:not(:hover):not(:focus-within) .side-nav button>span,
  .admin-shell.sidebar-auto-collapse .sidebar:not(:hover):not(:focus-within) .nav-parent>i,
  .admin-shell.sidebar-auto-collapse .sidebar:not(:hover):not(:focus-within) .nav-children,
  .admin-shell.sidebar-auto-collapse .sidebar:not(:hover):not(:focus-within) .user-card>div:nth-child(2),
  .admin-shell.sidebar-auto-collapse .sidebar:not(:hover):not(:focus-within) .user-card>i{
    display:none!important;
  }

  .admin-shell.sidebar-auto-collapse .sidebar:not(:hover):not(:focus-within) .sidebar-head{
    min-height:100px;
    height:100px;
    padding:14px 8px;
    justify-content:center;
  }
  .admin-shell.sidebar-auto-collapse .sidebar:not(:hover):not(:focus-within) .sidebar-head .brand{
    width:100%;
    justify-content:center;
  }
  .admin-shell.sidebar-auto-collapse .sidebar:not(:hover):not(:focus-within) .sidebar-head .brand img{
    width:54px;
    height:54px;
    flex-basis:54px;
    padding:3px;
    border-radius:16px;
  }
  .admin-shell.sidebar-auto-collapse .sidebar:not(:hover):not(:focus-within) .sidebar-head > button.sidebar-pin-toggle{
    top:62px;
    left:6px;
    width:27px;
    height:27px;
    border-radius:9px;
    color:#cce5ff;
    border-color:rgba(136,192,244,.23);
    background:#123d68;
    box-shadow:0 7px 17px rgba(0,13,29,.26);
  }
  .admin-shell.sidebar-auto-collapse .sidebar:not(:hover):not(:focus-within) .sidebar-head > button.sidebar-pin-toggle svg{width:13px;height:13px}
  .admin-shell.sidebar-auto-collapse .sidebar:not(:hover):not(:focus-within) .sidebar-head > button.sidebar-pin-toggle .pin-state-dot{display:none}

  .admin-shell.sidebar-auto-collapse .sidebar:not(:hover):not(:focus-within) .side-nav{
    padding:9px 8px 14px;
    overflow-x:hidden;
  }
  .admin-shell.sidebar-auto-collapse .sidebar:not(:hover):not(:focus-within) .nav-group,
  .admin-shell.sidebar-auto-collapse .sidebar:not(:hover):not(:focus-within) .side-nav>.nav-single{
    width:100%;
  }
  .admin-shell.sidebar-auto-collapse .sidebar:not(:hover):not(:focus-within) .side-nav button{
    width:54px;
    height:50px;
    min-height:50px;
    margin:4px auto;
    padding:0;
    justify-content:center;
    border-radius:15px;
  }
  .admin-shell.sidebar-auto-collapse .sidebar:not(:hover):not(:focus-within) .side-nav button::before{
    top:14px;
    bottom:14px;
    right:-1px;
  }
  .admin-shell.sidebar-auto-collapse .sidebar:not(:hover):not(:focus-within) .side-nav button .icon{
    width:22px;
    height:22px;
    color:#7798b9;
  }
  .admin-shell.sidebar-auto-collapse .sidebar:not(:hover):not(:focus-within) .side-nav button.in-path,
  .admin-shell.sidebar-auto-collapse .sidebar:not(:hover):not(:focus-within) .side-nav button.active{
    color:#fff;
    background:linear-gradient(145deg,#3185eb,#1f63b7);
    border-color:rgba(186,220,255,.16);
    box-shadow:0 9px 20px rgba(2,18,37,.34),inset 0 1px rgba(255,255,255,.18);
  }
  .admin-shell.sidebar-auto-collapse .sidebar:not(:hover):not(:focus-within) .side-nav button.in-path .icon,
  .admin-shell.sidebar-auto-collapse .sidebar:not(:hover):not(:focus-within) .side-nav button.active .icon{color:#fff}

  .admin-shell.sidebar-auto-collapse .sidebar:not(:hover):not(:focus-within) .sidebar-user{
    padding:10px 8px 12px;
  }
  .admin-shell.sidebar-auto-collapse .sidebar:not(:hover):not(:focus-within) .user-card{
    width:54px;
    height:54px;
    min-height:54px;
    margin:auto;
    padding:0;
    justify-content:center;
    border-radius:15px;
  }
  .admin-shell.sidebar-auto-collapse .sidebar:not(:hover):not(:focus-within) .avatar{
    width:38px;
    height:38px;
    flex-basis:38px;
    margin:0;
    border-radius:12px;
  }
  .admin-shell.sidebar-auto-collapse .sidebar:not(:hover):not(:focus-within) .logout{
    width:54px;
    height:43px;
    margin:8px auto 0;
    padding:0;
    font-size:0;
    border-radius:13px;
  }
  .admin-shell.sidebar-auto-collapse .sidebar:not(:hover):not(:focus-within) .logout::before{
    content:"⇥";
    font-size:21px;
    line-height:1;
  }

  /* generous hit zone at the inner edge so hover expansion feels natural */
  .admin-shell.sidebar-auto-collapse .sidebar:not(:hover):not(:focus-within)::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:-9px;
    width:9px;
    background:transparent;
  }

  /* keyboard focus */
  .admin-shell .side-nav button:focus-visible,
  .admin-shell .logout:focus-visible,
  .admin-shell .sidebar-pin-toggle:focus-visible{
    outline:2px solid rgba(113,184,255,.92);
    outline-offset:2px;
  }
}



  /* v5: immediate and reliable first collapse after clicking the pin button. */
  .admin-shell.sidebar-auto-collapse.sidebar-force-collapsed .sidebar{
    width:var(--sidebar-collapsed-width)!important;
    box-shadow:-10px 0 30px rgba(4,22,40,.10)!important;
  }
  .admin-shell.sidebar-auto-collapse.sidebar-force-collapsed .admin-main{
    margin-right:var(--sidebar-collapsed-width)!important;
  }
  .admin-shell.sidebar-auto-collapse.sidebar-force-collapsed .brand>div,
  .admin-shell.sidebar-auto-collapse.sidebar-force-collapsed .sidebar-caption,
  .admin-shell.sidebar-auto-collapse.sidebar-force-collapsed .side-nav button>span,
  .admin-shell.sidebar-auto-collapse.sidebar-force-collapsed .nav-parent>i,
  .admin-shell.sidebar-auto-collapse.sidebar-force-collapsed .nav-children,
  .admin-shell.sidebar-auto-collapse.sidebar-force-collapsed .user-card>div:nth-child(2),
  .admin-shell.sidebar-auto-collapse.sidebar-force-collapsed .user-card>i{
    display:none!important;
  }
  .admin-shell.sidebar-auto-collapse.sidebar-force-collapsed .sidebar-head{
    min-height:100px!important;
    height:100px!important;
    padding:14px 8px!important;
    justify-content:center!important;
  }
  .admin-shell.sidebar-auto-collapse.sidebar-force-collapsed .sidebar-head .brand{
    width:100%!important;
    justify-content:center!important;
  }
  .admin-shell.sidebar-auto-collapse.sidebar-force-collapsed .sidebar-head .brand img{
    width:54px!important;height:54px!important;flex-basis:54px!important;padding:3px!important;border-radius:16px!important;
  }
  .admin-shell.sidebar-auto-collapse.sidebar-force-collapsed .sidebar-head > button.sidebar-pin-toggle{
    top:62px!important;left:6px!important;width:27px!important;height:27px!important;border-radius:9px!important;
  }
  .admin-shell.sidebar-auto-collapse.sidebar-force-collapsed .sidebar-head > button.sidebar-pin-toggle svg{
    width:13px!important;height:13px!important;
  }
  .admin-shell.sidebar-auto-collapse.sidebar-force-collapsed .sidebar-head > button.sidebar-pin-toggle .pin-state-dot{display:none!important}
  .admin-shell.sidebar-auto-collapse.sidebar-force-collapsed .side-nav{padding:9px 8px 14px!important;overflow-x:hidden!important}
  .admin-shell.sidebar-auto-collapse.sidebar-force-collapsed .nav-group,
  .admin-shell.sidebar-auto-collapse.sidebar-force-collapsed .side-nav>.nav-single{width:100%!important}
  .admin-shell.sidebar-auto-collapse.sidebar-force-collapsed .side-nav button{
    width:54px!important;min-width:54px!important;height:52px!important;margin-inline:auto!important;padding:0!important;justify-content:center!important;
  }
  .admin-shell.sidebar-auto-collapse.sidebar-force-collapsed .side-nav button .icon{margin:0!important}

/* Mobile stays as the original drawer; only preserve pin-control hiding. */
@media (max-width:820px){
  .sidebar-pin-toggle{display:none!important}
  .admin-shell.sidebar-auto-collapse .sidebar{width:var(--sidebar-width)!important}
  .admin-shell.sidebar-auto-collapse .admin-main{margin-right:0!important}
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion:reduce){
  .admin-shell .sidebar,
  .admin-shell .admin-main,
  .admin-shell .side-nav button,
  .admin-shell .sidebar-pin-toggle{transition:none!important}
}


/* v6 reliability hardening: the pin control is always the topmost interactive element. */
@media (min-width:821px){
  .admin-shell .sidebar-head > .sidebar-pin-toggle{
    position:absolute!important;
    pointer-events:auto!important;
    z-index:2147483000!important;
  }
  .admin-shell .sidebar-head > .sidebar-pin-toggle::before{
    pointer-events:none!important;
  }
}