/* ============================================================
   SIDEBAR — brand, nav, and account footer.
   ============================================================ */

.sidebar{
  background:var(--surface);
  border-right:1px solid var(--line);
  padding:0;
  display:flex;
  flex-direction:column;
}
.brand{
  display:flex; align-items:center; gap:12px;
  padding:22px 22px 20px;
  background:linear-gradient(135deg, var(--gold), var(--gold-deep));
}
.crest{
  width:38px; height:38px; border-radius:10px;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces',serif; font-weight:700; color:var(--gold-deep); font-size:16px;
  flex-shrink:0;
  box-shadow:0 3px 8px rgba(0,0,0,.18);
  overflow:hidden;
}
.brand-name{ font-family:'Fraunces',serif; font-size:16.5px; font-weight:600; color:#fff; line-height:1.15; }
.brand-sub{ font-size:11px; color:rgba(255,255,255,.8); margin-top:2px; letter-spacing:.02em; }

/* Branch switcher (only visible with 2+ branches) */
.branch-switch{ padding:12px 14px 0; }
.branch-switch[hidden]{ display:none; }
.branch-switch label{
  display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--muted); padding:0 4px 5px;
}
.branch-switch select{
  width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:8px;
  background:var(--cream); color:var(--ink); font:600 13px 'Inter',sans-serif; cursor:pointer;
}
.branch-switch select:focus{ outline:none; border-color:var(--gold); }

nav{ padding:18px 14px; flex:1; }
.nav-label{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--muted); padding:14px 10px 7px;
}
.nav-label:first-child{ padding-top:2px; }
.nav-item{
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; margin-bottom:1px;
  border-radius:8px;
  color:#5C4E36;
  font-size:13.5px; font-weight:500;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
}
.nav-item svg{ width:16px; height:16px; opacity:.75; flex-shrink:0; }
.nav-item svg.ext-icon{ width:12px; height:12px; opacity:.5; margin-left:auto; }
.nav-item:hover{ background:#FAF3E1; }
.nav-item.active{
  background:var(--gold-soft);
  color:var(--gold-deep);
  font-weight:600;
  border-color:var(--gold-deep);
}
.nav-item.active svg{ opacity:1; }

@media (max-width:960px){
  .sidebar{ height:100%; overflow-y:auto; }   /* long nav list scrolls inside the drawer */
}