/* 共用側欄（js/sidebar.js 渲染）。
   所有規則都掛在 #sidebar 下、顏色／字體／行高寫死：不吃頁面 :root 變數，也不受 Tailwind preflight 影響（index / trip 有載 Tailwind CDN）。 */
#sidebar {
  width: 220px; min-height: 100vh; background: #1C1917;
  display: flex; flex-direction: column; flex-shrink: 0;
  position: fixed; top: 0; left: 0; z-index: 40;
  box-sizing: border-box;
  font-family: 'DM Sans', 'Noto Sans TC', sans-serif;
  font-size: 14px; line-height: 1.5;
}
#sidebar * { box-sizing: border-box; }
#sidebar .sidebar-logo { padding: 24px 20px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); }
#sidebar .sidebar-logo-mark { font-size: 18px; font-weight: 700; color: white; letter-spacing: -0.3px; }
#sidebar .sidebar-logo-mark span { color: #0D9488; }
#sidebar .sidebar-logo-sub { font-size: 11px; color: rgba(255,255,255,0.35); margin-top: 2px; font-family: 'IBM Plex Mono', monospace; letter-spacing: 0.5px; }
#sidebar .sidebar-section { padding: 16px 12px 8px; }
#sidebar .sidebar-section-label { font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,0.25); padding: 0 8px; margin-bottom: 4px; }
#sidebar .sidebar-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px;
  cursor: pointer; color: rgba(255,255,255,0.55); font-size: 14px; font-weight: 400;
  transition: all 0.15s; text-decoration: none; margin: 0 0 2px;
}
#sidebar .sidebar-item:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.85); }
#sidebar .sidebar-item.active { background: rgba(13,148,136,0.15); color: #0D9488; font-weight: 500; }
#sidebar .sidebar-item svg { flex-shrink: 0; opacity: 0.7; }
#sidebar .sidebar-item.active svg { opacity: 1; }
#sidebar .sidebar-bottom { margin-top: auto; padding: 16px 12px; border-top: 1px solid rgba(255,255,255,0.06); }
#sidebar .sidebar-back { font-size: 12px; opacity: 0.6; }
/* 登出鈕沿用原本 inline 樣式的效果：無 hover 底色、字色固定 */
#sidebar .sidebar-logout,
#sidebar .sidebar-logout:hover {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,0.45); font-family: inherit; font-size: 13px; line-height: inherit; margin-top: 4px;
}

#sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 39; }

@media (max-width: 768px) {
  #sidebar { transform: translateX(-100%); transition: transform 0.2s; }
  #sidebar.open { transform: translateX(0); }
  #sidebar-overlay.open { display: block; }
  /* 各頁 top bar 的 ☰（inline display:none），手機寬度才顯示 */
  #btn-menu-toggle { display: block !important; }
}
