/* =========================================================
   Hamburger Side-Drawer Menu
   Managed from Admin > Hamburger Menu. Toggle button lives on
   the left side of the header on EVERY screen size (desktop,
   tablet, mobile). This file styles the toggle button, the
   overlay, and the sliding drawer panel itself.
   ========================================================= */

/* ---------- Toggle button (3-bar → X) ---------- */
.hm-toggle{
  flex-shrink:0;width:42px;height:42px;border:none;border-radius:12px;
  background:var(--primary-light,#ede9fe);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  transition:var(--trans,all .25s cubic-bezier(.4,0,.2,1));
}
.hm-toggle:hover{background:var(--primary,#7c3aed);}
.hm-toggle:hover span{background:#fff;}
.hm-toggle span{
  display:block;width:20px;height:2.4px;border-radius:2px;background:var(--primary-dark,#5b21b6);
  transition:var(--trans,all .25s cubic-bezier(.4,0,.2,1));
}
.hm-toggle.active{background:var(--primary,#7c3aed);}
.hm-toggle.active span{background:#fff;}
.hm-toggle.active span:nth-child(1){transform:translateY(7.4px) rotate(45deg);}
.hm-toggle.active span:nth-child(2){opacity:0;transform:scaleX(0);}
.hm-toggle.active span:nth-child(3){transform:translateY(-7.4px) rotate(-45deg);}

/* ---------- Overlay ---------- */
.hm-overlay{
  position:fixed;inset:0;z-index:2400;background:var(--hm-overlay,rgba(20,14,40,.5));
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .35s ease;
}
.hm-overlay.open{opacity:1;pointer-events:auto;}

/* ---------- Drawer panel ---------- */
.hm-drawer{
  position:fixed;top:0;left:0;bottom:0;z-index:2500;
  width:min(320px,84vw);background:var(--hm-bg,#fff);
  box-shadow:14px 0 44px rgba(31,23,66,.22);
  border-radius:0 22px 22px 0;
  display:flex;flex-direction:column;
  transform:translateX(-105%);
  transition:transform .4s cubic-bezier(.32,.72,0,1);
  overflow:hidden;
}
.hm-drawer.open{transform:translateX(0);}

.hm-drawer-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:22px 18px;flex-shrink:0;color:#fff;
  background:linear-gradient(135deg,var(--hm-head-start,var(--primary,#7c3aed)) 0%,var(--hm-head-end,var(--primary-dark,#5b21b6)) 100%);
  position:relative;overflow:hidden;
}
.hm-drawer-head::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120px 90px at 90% -20%,rgba(255,255,255,.35),transparent 70%);
}
.hm-drawer-logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;color:#fff;min-width:0;}
.hm-drawer-logo img{height:34px;width:auto;border-radius:8px;background:#fff;padding:2px;}
.hm-logo-emoji{font-size:22px;}
.hm-drawer-logo span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hm-close{
  flex-shrink:0;width:32px;height:32px;border:none;border-radius:50%;
  background:rgba(255,255,255,.18);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:var(--trans,all .25s ease);
  position:relative;z-index:1;
}
.hm-close:hover{background:rgba(255,255,255,.32);transform:rotate(90deg);}
.hm-close svg{width:16px;height:16px;}

.hm-user-chip{
  display:flex;align-items:center;gap:10px;padding:14px 18px;margin:14px 14px 4px;
  background:var(--light-bg,#f8f7fc);border-radius:14px;flex-shrink:0;
}
.hm-user-avatar{
  width:38px;height:38px;border-radius:50%;background:var(--primary,#7c3aed);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex-shrink:0;
}
.hm-user-info{display:flex;flex-direction:column;gap:1px;min-width:0;}
.hm-user-info strong{font-size:13.5px;color:var(--dark,#1f2333);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hm-user-info small{font-size:11.5px;color:var(--gray,#6b7280);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.hm-login-cta{
  display:block;margin:14px 14px 4px;padding:12px 16px;text-align:center;border-radius:14px;
  background:var(--primary-light,#ede9fe);color:var(--primary-dark,#5b21b6);font-weight:700;font-size:14px;
  transition:var(--trans,all .25s ease);flex-shrink:0;
}
.hm-login-cta:hover{background:var(--primary,#7c3aed);color:#fff;}

.hm-list{flex:1;overflow-y:auto;padding:10px 10px 6px;display:flex;flex-direction:column;gap:2px;}
.hm-item{
  display:flex;align-items:center;gap:13px;padding:12px 12px;border-radius:14px;
  color:var(--hm-text,var(--dark,#1f2333));position:relative;overflow:hidden;
  opacity:0;transform:translateX(-14px);
}
.hm-drawer.open .hm-item{
  animation:hmItemIn .45s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay:calc(var(--d,0) * 45ms + 90ms);
}
@keyframes hmItemIn{to{opacity:1;transform:translateX(0);}}
.hm-item:hover{background:var(--hm-item-hover-bg,var(--primary-light,#ede9fe));}
.hm-item:hover .hm-icon{background:var(--hm-icon-hover-bg,var(--primary,#7c3aed));color:var(--hm-icon-hover-color,#fff);}
.hm-icon{
  flex-shrink:0;width:38px;height:38px;border-radius:11px;background:var(--hm-icon-bg,var(--light-bg,#f8f7fc));
  color:var(--hm-icon-color,var(--primary-dark,#5b21b6));display:flex;align-items:center;justify-content:center;
  transition:var(--trans,all .25s ease);
}
.hm-icon svg{width:19px;height:19px;}
.hm-label{flex:1;font-size:14px;font-weight:600;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hm-chevron{flex-shrink:0;color:var(--gray,#c9c3e8);transition:var(--trans,all .25s ease);}
.hm-chevron svg{width:15px;height:15px;}
.hm-item:hover .hm-chevron{color:var(--primary,#7c3aed);transform:translateX(3px);}

.hm-ripple{
  position:absolute;border-radius:50%;background:rgba(124,58,237,.18);
  transform:scale(0);animation:hmRipple .6s ease-out;pointer-events:none;
}
@keyframes hmRipple{to{transform:scale(2.6);opacity:0;}}

.hm-drawer-foot{padding:14px;border-top:1px solid var(--border,#e7e4f5);flex-shrink:0;}
.hm-call-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:14px;
  background:linear-gradient(135deg,var(--primary,#7c3aed),var(--primary-dark,#5b21b6));
  color:#fff;font-weight:700;font-size:14px;transition:var(--trans,all .25s ease);
}
.hm-call-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover,0 16px 40px rgba(124,58,237,.18));}
.hm-call-btn svg{width:17px;height:17px;}

@media (prefers-reduced-motion:reduce){
  .hm-drawer,.hm-overlay,.hm-toggle span,.hm-item{transition:none !important;animation:none !important;opacity:1 !important;transform:none !important;}
}