/* =========================================================================
   Stivot — Canonical Sidebar Component (single source of truth)
   Mirrors the sb-* sidebar used in calendar/admin-calendar.html (v6 naming).
   Self-contained: literal colour values, no external token dependency.
   Include with:  <link rel="stylesheet" href="../assets/sidebar.css">
   Markup: <div class="sidebar-backdrop" id="sidebarBackdrop" onclick="closeSidebar()"></div>
           <div class="sidebar" id="sidebar"> … </div>
   Header: <button class="hamburger" onclick="openSidebar()" aria-label="Menu">☰</button>
   JS:     <script src="../assets/sidebar.js"></script>
   ========================================================================= */

.sidebar {
  width: 240px; min-width: 240px;
  background: #f8fafc;
  border-right: 1px solid #e2e8f0;
  display: flex; flex-direction: column;
  height: 100vh; overflow-y: auto;
}
.sb-brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 12px; }
.sb-logo {
  width: 32px; height: 32px; background: #1F2937; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: #F5DF59; font-weight: 800; font-size: 12px; letter-spacing: -0.4px;
}
.sb-brand-name { font-weight: 700; font-size: 17px; color: #0f172a; letter-spacing: -.01em; }
.sb-actions { display: flex; flex-direction: column; gap: 8px; padding: 6px 14px 14px; }
.sb-primary {
  background: linear-gradient(to right, #475569, #334155); color: #fff; border: none; border-radius: 8px;
  padding: 11px 14px; font-size: 13px; font-weight: 700; cursor: pointer; width: 100%;
  text-align: left; display: flex; align-items: center; gap: 8px; transition: background .12s;
  font-family: inherit;
}
.sb-primary:hover { background: linear-gradient(to right, #3d4a5c, #29323f); }
.sb-plus { font-size: 14px; line-height: 1; }
.sb-section-label { padding: 6px 18px; font-size: 12px; color: #94a3b8; font-weight: 500; }
.sb-nav { flex: 1; padding: 0 8px 8px; }
.sb-group { margin-bottom: 2px; }
.sb-group-head {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px;
  font-size: 13.5px; font-weight: 700; color: #0f172a; cursor: pointer;
  border-radius: 6px; user-select: none;
}
.sb-group-head:hover { background: rgba(0,0,0,.04); }
.sb-icon { width: 18px; height: 18px; flex-shrink: 0; color: #0f172a; }
.sb-group-label { flex: 1; }
.sb-chev { width: 14px; height: 14px; color: #64748b; transition: transform .15s; }
.sb-group[data-open] .sb-chev { transform: rotate(0deg); }
.sb-group:not([data-open]) .sb-chev { transform: rotate(-90deg); }
.sb-children { display: flex; flex-direction: column; padding: 2px 0 6px 26px; position: relative; margin-left: 8px; }
.sb-children::before { content: ''; position: absolute; left: 8px; top: 4px; bottom: 8px; width: 1px; background: #e2e8f0; }
.sb-group:not([data-open]) .sb-children { display: none; }
.sb-child {
  padding: 6px 10px; font-size: 13px; color: #94a3b8; cursor: pointer; border-radius: 5px;
  transition: background .1s, color .1s; display: flex; align-items: center; gap: 8px;
  text-decoration: none;
}
.sb-child:hover { background: rgba(0,0,0,.04); color: #475569; }
.sb-child.active { color: #0f172a; font-weight: 700; }
.sb-badge { margin-left: auto; background: #EF4444; color: #fff; font-size: 10px; font-weight: 700; border-radius: 99px; padding: 1px 7px; }
.sb-footer {
  margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-top: 1px solid #e2e8f0; cursor: pointer;
}
.sb-footer:hover { background: rgba(0,0,0,.03); }
.sb-avatar {
  width: 32px; height: 32px; border-radius: 8px;
  background: linear-gradient(135deg, #DBEAFE, #93C5FD);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #1E40AF; flex-shrink: 0;
}
.sb-user-name { flex: 1; font-size: 13.5px; font-weight: 700; color: #0f172a; }
.sb-footer-chev { width: 14px; height: 14px; color: #64748b; }

/* hamburger (shown on mobile only) */
.hamburger {
  display: none;
  background: none; border: none; cursor: pointer;
  padding: 6px; margin-right: 2px;
  color: #374151; font-size: 20px; border-radius: 5px;
}
.hamburger:hover { background: #f1f5f9; }

/* mobile drawer */
.sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 99; }
.sidebar-backdrop.open { display: block; }

@media (max-width: 768px) {
  .hamburger { display: flex; align-items: center; justify-content: center; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 100;
    transform: translateX(-100%); transition: transform .25s ease;
  }
  .sidebar.open { transform: translateX(0); box-shadow: 2px 0 24px rgba(0,0,0,.18); }
}