/* =====================================================================
   Qmam Tech — DESKTOP SIDEBAR (expanded 248px / collapsed 92px)
   Standalone. Every class starts with "qsb-". COPY THIS FILE UNCHANGED.
   - Direction comes from dir="rtl|ltr" on <html> (logical properties only).
   - Theme: data-theme="dark" on <html> (or class "dark" on <html>).
   - Collapsed state: data-sidebar="collapsed" on <html>.
   ===================================================================== */
.qsb{
  --qsb-card:#FFFFFF; --qsb-border:#E3ECEC; --qsb-divider:#EEF3F3; --qsb-hover:#F5F9F9; --qsb-chip:#F0F5F5;
  --qsb-nav:#33494B; --qsb-text-2:#5B7275;
  --qsb-teal:#0A9EA5; --qsb-teal-800:#065F63; --qsb-teal-50:#E6F4F4;
  --qsb-bar-x:-3px;
  position:sticky; top:0; align-self:flex-start; flex:0 0 248px; width:248px; height:100vh; overflow-y:auto;
  display:flex; flex-direction:column; gap:16px; padding:24px 16px;
  background:var(--qsb-card); border-inline-end:1px solid var(--qsb-border);
  font-family:"Cairo",system-ui,sans-serif; color:var(--qsb-nav); text-align:start;
  transition:flex-basis .2s ease, width .2s ease, padding .2s ease;
}
html[data-theme="dark"] .qsb, html.dark .qsb{
  --qsb-card:#122526; --qsb-border:#23393A; --qsb-divider:#1C3132; --qsb-hover:#18302F; --qsb-chip:#1A3031;
  --qsb-nav:#C9D7D7; --qsb-text-2:#9DB2B3;
  --qsb-teal:#17B2B9; --qsb-teal-800:#73D2D7; --qsb-teal-50:#103A3C;
}
html[dir="ltr"] .qsb{--qsb-bar-x:3px}
.qsb,.qsb *,.qsb *::before,.qsb *::after{box-sizing:border-box}
.qsb a{text-decoration:none}
.qsb svg{display:block; flex:none}
.qsb :focus-visible{outline:2px solid var(--qsb-teal); outline-offset:2px}
@media (prefers-reduced-motion:reduce){.qsb{transition:none}}

/* ---------- header: logo + collapse toggle ---------- */
.qsb-head{display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:62px; padding-bottom:12px; border-bottom:1px solid var(--qsb-divider)}
.qsb-logo{display:block; width:150px; height:62px}
.qsb-logo img{display:block; width:150px; height:62px}
.qsb-toggle{flex:none; width:40px; height:40px; padding:0; border-radius:10px; border:1px solid var(--qsb-border); background:var(--qsb-card); color:var(--qsb-nav);
  display:flex; align-items:center; justify-content:center; cursor:pointer; font:inherit}
.qsb-toggle:hover{background:var(--qsb-hover)}
html[dir="ltr"] .qsb-toggle svg{transform:scaleX(-1)}
.qsb-toggle .qsb-chev-open{display:block} .qsb-toggle .qsb-chev-closed{display:none}

/* ---------- items ---------- */
.qsb-nav{display:flex; flex-direction:column; gap:4px}
.qsb-foot{margin-top:auto; padding-top:12px; border-top:1px solid var(--qsb-divider); display:flex; flex-direction:column; gap:4px}
.qsb-item{position:relative; display:flex; align-items:center; gap:12px; height:44px; padding:0 12px; border-radius:10px;
  color:var(--qsb-nav); font-size:15px; font-weight:600; line-height:1.3}
.qsb-item:hover{background:var(--qsb-hover); color:var(--qsb-nav)}
.qsb-item svg{width:20px; height:20px}
.qsb-label{flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.qsb-short{display:none}
.qsb-badge{font-size:12px; font-weight:700; color:var(--qsb-text-2); background:var(--qsb-chip); border-radius:999px; padding:1px 8px; line-height:1.6}
.qsb-item[aria-current="page"]{background:var(--qsb-teal-50); color:var(--qsb-teal-800); font-weight:700; box-shadow:inset var(--qsb-bar-x) 0 0 var(--qsb-teal)}
.qsb-item[aria-current="page"] .qsb-badge{background:var(--qsb-card)}

/* ---------- collapsed (92px): icon 22px + short label under it ---------- */
html[data-sidebar="collapsed"] .qsb{flex-basis:92px; width:92px; padding:20px 12px}
html[data-sidebar="collapsed"] .qsb-head{justify-content:center}
html[data-sidebar="collapsed"] .qsb-logo{display:none}
html[data-sidebar="collapsed"] .qsb-toggle .qsb-chev-open{display:none}
html[data-sidebar="collapsed"] .qsb-toggle .qsb-chev-closed{display:block}
html[data-sidebar="collapsed"] .qsb-nav{gap:6px}
html[data-sidebar="collapsed"] .qsb-item{flex-direction:column; justify-content:center; gap:4px; height:auto; min-height:60px; padding:8px 2px; border-radius:12px; font-size:11px}
html[data-sidebar="collapsed"] .qsb-item svg{width:22px; height:22px}
html[data-sidebar="collapsed"] .qsb-item[aria-current="page"]{box-shadow:none}
html[data-sidebar="collapsed"] .qsb-label{display:none}
html[data-sidebar="collapsed"] .qsb-short{display:block; font-size:11px; line-height:1.3; text-align:center}
html[data-sidebar="collapsed"] .qsb-badge{position:absolute; top:3px; inset-inline-end:6px; min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  font-size:10px; font-weight:800; line-height:18px; text-align:center}