/* Phase 1: approved expanded, compact and mobile Beauty Bank navigation. */
.vesta-sidebar {
  position:fixed; inset:0 auto 0 0; z-index:220; box-sizing:border-box;
  width:var(--vesta-sidebar-w); height:100vh; height:100dvh;
  padding:24px 18px 17px; display:flex; flex-direction:column;
  background:#fff; color:#101c47; border-right:1px solid #e9edf5;
  overflow:hidden; transition:width .22s ease,transform .22s ease;
}
.vesta-sidebar__brand {
  position:relative; display:flex; align-items:center; flex:0 0 auto;
  min-height:83px; margin:0 0 14px; padding:0 0 20px;
  border-bottom:1px solid #dfe5ef;
}
.vesta-sidebar__brand-link { display:flex; align-items:center; min-width:0; max-width:100%; gap:9px; text-decoration:none; color:inherit; }
.vesta-sidebar__logo { display:block; max-width:100%; height:auto; object-fit:contain; }
.vesta-sidebar__logo--full { width:220px; max-height:63px; }
.vesta-sidebar__logo--compact { display:none; width:51px; height:58px; }
.vesta-sidebar__brand-link:has(.vesta-sidebar__brand-copy) .vesta-sidebar__logo--full { width:48px; height:52px; flex:0 0 48px; }
.vesta-sidebar__brand-copy { display:grid; min-width:0; gap:3px; }
.vesta-sidebar__brand-copy strong { font-size:14px; font-weight:600; color:#23105f; line-height:1.06; overflow:hidden; text-overflow:ellipsis; }
.vesta-sidebar__brand-copy small { font-size:10px; color:#52668e; line-height:1.15; font-weight:600; letter-spacing:.04em; }
.vesta-sidebar__mobile-close { display:none; margin-left:auto; border:0; padding:7px; background:transparent; color:#172656; cursor:pointer; }
.vesta-sidebar__mobile-close .vesta-icon { width:23px; height:23px; }
.vesta-sidebar__nav { flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; scrollbar-color:#e0dcf5 transparent; }
.vesta-sidebar__group { display:grid; align-content:start; gap:5px; padding:0 0 14px; }
.vesta-sidebar__group--secondary { border-top:1px solid #dfe5ef; margin-top:12px; padding:23px 0 0; }
.vesta-sidebar__item { min-height:44px; display:flex; box-sizing:border-box; align-items:center; gap:15px; padding:9px 12px;
  border-radius:11px; color:#111e4c; text-decoration:none; white-space:nowrap; transition:background .15s,color .15s; }
.vesta-sidebar__item:hover { color:var(--vesta-accent); background:#fcf8ee; }
.vesta-sidebar__item.is-active { color:var(--vesta-accent); background:var(--vesta-sidebar-active-bg); }
.vesta-sidebar__label { font-size:14px; font-weight:500; }
.vesta-sidebar__item.is-active .vesta-sidebar__label { font-weight:600; }
.vesta-sidebar__item .vesta-icon { display:block; width:22px; height:22px; flex:0 0 22px; stroke-width:1.8; }
.vesta-sidebar__user-card { margin-top:14px; flex:0 0 auto; min-height:68px; border-top:1px solid #dfe5ef; padding:17px 0 0; box-sizing:content-box;
  display:flex; align-items:center; gap:11px; color:#111e4c; text-decoration:none; }
.vesta-sidebar__avatar { position:relative; display:block; width:44px; height:44px; flex:0 0 44px; border-radius:50%; }
.vesta-sidebar__avatar-image { display:block; width:44px; height:44px; border-radius:50%; object-fit:cover; background:#faf4e6; }
.vesta-sidebar__online { position:absolute; right:0; bottom:0; width:12px; height:12px; border:2px solid #fff; border-radius:50%; background:#0cbd74; }
.vesta-sidebar__user-copy { display:grid; min-width:0; gap:2px; }
.vesta-sidebar__user-copy strong { color:#0f1d4c; font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vesta-sidebar__user-copy small { color:#61729b; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vesta-sidebar__user-chevron { margin-left:auto; font-size:21px; line-height:1; color:#132651; }
.vesta-sidebar__item:focus-visible,.vesta-sidebar__brand-link:focus-visible,.vesta-sidebar__user-card:focus-visible,.vesta-sidebar__mobile-close:focus-visible { outline:3px solid #cba34e; outline-offset:2px; }
/* Collapsed state uses the configured compact logo, or the exact supplied logo mark. */
.vesta-app-shell.is-sidebar-collapsed .vesta-sidebar { width:var(--vesta-sidebar-w-collapsed); padding-left:10px; padding-right:10px; }
.vesta-app-shell.is-sidebar-collapsed .vesta-sidebar__brand { justify-content:center; }
.vesta-app-shell.is-sidebar-collapsed .vesta-sidebar__logo--full,.vesta-app-shell.is-sidebar-collapsed .vesta-sidebar__brand-copy,.vesta-app-shell.is-sidebar-collapsed .vesta-sidebar__label,.vesta-app-shell.is-sidebar-collapsed .vesta-sidebar__user-copy,.vesta-app-shell.is-sidebar-collapsed .vesta-sidebar__user-chevron { display:none; }
.vesta-app-shell.is-sidebar-collapsed .vesta-sidebar__logo--compact { display:block; max-width:100%; height:54px; }
.vesta-app-shell.is-sidebar-collapsed .vesta-sidebar__item { justify-content:center; gap:0; padding:9px 0; }
.vesta-app-shell.is-sidebar-collapsed .vesta-sidebar__user-card { justify-content:center; }
@media (max-width:1023px) {
  .vesta-sidebar { width:min(420px, calc(100vw - 22px)); padding:22px 24px 18px; z-index:9997;
    transform:translateX(-105%); visibility:hidden; box-shadow:16px 0 35px rgba(11,18,45,.18); }
  .vesta-sidebar.is-open { transform:translateX(0); visibility:visible; }
  .vesta-sidebar__mobile-close { display:inline-flex; }
  .vesta-app-shell.is-sidebar-open::after { content:''; position:fixed; inset:0; z-index:9996; background:rgba(9,16,36,.68); }
  .vesta-app-shell.is-sidebar-collapsed .vesta-sidebar { width:min(420px, calc(100vw - 22px)); padding:22px 24px 18px; }
  .vesta-app-shell.is-sidebar-collapsed .vesta-sidebar__brand { justify-content:space-between; }
  .vesta-app-shell.is-sidebar-collapsed .vesta-sidebar__logo--full { display:block; }
  .vesta-app-shell.is-sidebar-collapsed .vesta-sidebar__logo--compact { display:none; }
  .vesta-app-shell.is-sidebar-collapsed .vesta-sidebar__brand-copy { display:grid; }
  .vesta-app-shell.is-sidebar-collapsed .vesta-sidebar__label { display:inline; }
  .vesta-app-shell.is-sidebar-collapsed .vesta-sidebar__user-copy { display:grid; }
  .vesta-app-shell.is-sidebar-collapsed .vesta-sidebar__user-chevron { display:inline; }
  .vesta-app-shell.is-sidebar-collapsed .vesta-sidebar__item { justify-content:flex-start; gap:15px; padding:9px 12px; }
  .vesta-app-shell.is-sidebar-collapsed .vesta-sidebar__user-card { justify-content:flex-start; }
}
@media (prefers-reduced-motion:reduce) { .vesta-sidebar { transition:none; } }