/* ============================================================
   sidebar.css — Navigation + Sales submenu
   ============================================================ */
.sidebar{
  position:fixed;inset:0 auto 0 0;width:var(--sidebar-w);z-index:60;
  background:var(--surface);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:22px 14px 18px;
}

/* ============================================================
   Brand lockup — HAR page par same logo ke liye yahan hai
   Company logo: assets/images/logo/logo.png (transparent PNG)
   ============================================================ */
.logo{display:inline-flex;align-items:center;gap:12px}
.logo-badge{
  width:46px;height:42px;flex:none;
  display:grid;place-items:center;
}
.logo-badge img{width:100%;height:100%;object-fit:contain}
.logo-name{display:block;font-family:'Manrope',sans-serif;font-weight:800;font-size:16.5px;line-height:1.15;color:var(--ink);letter-spacing:-.02em}
.logo-sub{display:block;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.logo.on-dark .logo-name{color:#fff}
.logo.on-dark .logo-sub{color:rgba(255,255,255,.6)}

.sidebar .logo{padding:2px 12px 4px}
.side-nav{margin-top:26px;flex:1;overflow-y:auto}
.nav-label{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:0 12px;margin:18px 0 8px}
.nav-label:first-child{margin-top:0}
.nav-item{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:10px 12px;border-radius:11px;color:var(--ink-soft);
  font-size:14px;font-weight:500;position:relative;transition:background .18s,color .18s;
}
.nav-item svg{width:19px;height:19px;flex:none}
.nav-item:hover{background:var(--accent-tint);color:var(--ink)}
.nav-item.active{background:var(--accent-soft);color:var(--accent-strong);font-weight:600}
.nav-item.active::before{
  content:"";position:absolute;left:-14px;top:50%;transform:translateY(-50%);
  width:3px;height:22px;border-radius:0 3px 3px 0;background:var(--accent);
}
.nav-item.active svg{color:var(--accent)}
.side-foot{border-top:1px solid var(--line);padding-top:14px;margin-top:14px}
.user-display-name{
  padding:4px 12px 8px;
  font-size:13.5px;
  font-weight:700;
  color:var(--ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  letter-spacing:-.01em;
}
.nav-item.logout{color:var(--muted)}
.nav-item.logout:hover{color:var(--accent-strong);background:var(--accent-tint)}

/* --- Sales submenu (accordion) --- */
.nav-item{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:10px 12px;border-radius:11px;color:var(--ink-soft);
  font-size:14px;font-weight:500;position:relative;transition:background .18s,color .18s;
  background:none;border:none;cursor:pointer;text-decoration:none;font-family:inherit;
}
.nav-item .chev{width:14px;height:14px;margin-left:auto;color:var(--muted);transition:transform .3s var(--ease)}
.nav-item.has-submenu.submenu-open .chev{transform:rotate(180deg)}
.submenu{
  display:flex;flex-direction:column;gap:2px;
  max-height:0;overflow:hidden;opacity:0;padding-left:12px;
  transition:max-height .38s var(--ease),opacity .28s;
}
.submenu.open{max-height:240px;opacity:1}
.submenu-item{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:8px 12px;border-radius:10px;font-size:13.5px;color:var(--muted);
  font-weight:500;transition:background .18s,color .18s;position:relative;
  background:none;border:none;cursor:pointer;text-decoration:none;font-family:inherit;
}
.submenu-item::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.55;flex:none}
.submenu-item:hover{background:var(--accent-tint);color:var(--ink)}
.submenu-item.active{background:var(--accent-soft);color:var(--accent-strong);font-weight:600}

.sidebar-backdrop{
  position:fixed;inset:0;background:rgba(12,40,25,.42);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  z-index:95;opacity:0;visibility:hidden;transition:opacity .3s ease, visibility .3s ease;pointer-events:none;
}
.sidebar-backdrop.is-open{opacity:1;visibility:visible;pointer-events:auto}

/* ── Topbar Menu Button ── */
.topbar #menuBtn, .report-topbar #menuBtn{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:10px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);cursor:pointer;flex:none;
  transition:all .2s ease;
}
.topbar #menuBtn:hover, .report-topbar #menuBtn:hover{background:var(--accent-tint);color:var(--accent-strong)}
.topbar #menuBtn svg, .report-topbar #menuBtn svg{width:20px;height:20px}

/* ── Universal Responsive Drawer ── */
@media (max-width:1023px){
  .sidebar{
    transform:translateX(-100%);
    transition:transform .34s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow:0 12px 40px rgba(0,0,0,.22);
    z-index:100;
  }
  .sidebar.is-open{transform:translateX(0) !important}
  body.sidebar-open{overflow:hidden}
  .main, .report-main{margin-left:0 !important}
  .topbar, .report-topbar{display:flex !important}
}
@media (min-width:1024px){
  .topbar #menuBtn, .report-topbar #menuBtn{display:none !important}
}