@countermeasure-platform/web-components 0.2.0

package/dist/styles/sidebar.css

@@ -0,0 +1,1194 @@
+/* ============================================================================
+   Unified Sidebar Component
+   @countermeasure/web-components
+
+   A modular sidebar component that provides shared structure across all apps
+   while allowing app-specific customization via BEM modifiers.
+
+   Usage:
+   <aside class="sidebar sidebar--{app}" data-sidebar="{app}">
+     <div class="sidebar__header">{% include "partials/app-switcher.html" %}</div>
+     <div class="sidebar__body"><!-- app-specific content --></div>
+     <div class="sidebar__footer">{% include "partials/sidebar/footer.html" %}</div>
+   </aside>
+   <div class="sidebar__backdrop" data-sidebar-backdrop="{app}"></div>
+   ============================================================================ */
+
+/* -----------------------------------------------------------------------------
+   Base Sidebar Styles
+   ----------------------------------------------------------------------------- */
+.sidebar {
+  width: 240px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--color-surface);
+  border-right: 1px solid var(--color-border);
+  position: relative;
+  z-index: 100;
+  isolation: isolate; /* Create stacking context for app-switcher */
+}
+
+.sidebar--app {
+  width: 240px;
+}
+
+/* Boost z-index when app-switcher is open so panel appears above everything */
+.sidebar:has(.app-switcher--open) {
+  z-index: 300;
+}
+
+/* -----------------------------------------------------------------------------
+   Sidebar Sections
+   ----------------------------------------------------------------------------- */
+.sidebar__header {
+  padding: 1rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.sidebar__header-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+/* Sidebar Collapse Button */
+.sidebar__collapse-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  color: var(--color-text-muted);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  flex-shrink: 0;
+}
+
+.sidebar__collapse-btn:hover {
+  color: var(--color-text);
+  background: var(--color-surface-hover);
+  border-color: var(--color-border);
+}
+
+.sidebar__collapse-icon--expand {
+  display: none;
+}
+
+.sidebar--collapsed .sidebar__collapse-icon--collapse {
+  display: none;
+}
+
+.sidebar--collapsed .sidebar__collapse-icon--expand {
+  display: block;
+}
+
+.sidebar__body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+}
+
+.sidebar__footer {
+  padding: 0.75rem;
+  border-top: 1px solid var(--color-border);
+  margin-top: auto;
+}
+
+/* Footer bar: flat row with avatar+name left, icon buttons right */
+.sidebar__footer-bar {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.sidebar__footer-user {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex: 1;
+  min-width: 0;
+}
+
+.sidebar__footer-avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: 50%;
+  background: var(--color-surface-hover);
+  color: var(--color-text-muted);
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+.sidebar__footer-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 50%;
+}
+
+.sidebar__footer-avatar svg {
+  width: 14px;
+  height: 14px;
+}
+
+.sidebar__footer-name {
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: var(--color-text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Icon button row */
+.sidebar__footer-icons {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex-shrink: 0;
+}
+
+.sidebar__footer-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: 0.375rem;
+  border: none;
+  background: none;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  text-decoration: none;
+  transition:
+    background 0.15s,
+    color 0.15s;
+  flex-shrink: 0;
+}
+
+.sidebar__footer-icon:hover {
+  background: var(--color-surface-hover);
+  color: var(--color-text);
+}
+
+.sidebar__footer-icon--danger:hover {
+  color: #ef4444;
+  background: rgba(239, 68, 68, 0.1);
+}
+
+.sidebar__footer-icon svg {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+}
+
+/* Legacy footer-row kept for backwards compat */
+.sidebar__footer-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.sidebar__huddle-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  width: 36px;
+  height: 36px;
+  flex-shrink: 0;
+  border: 1px solid var(--color-border);
+  border-radius: 50%;
+  background: transparent;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  transition:
+    background 0.15s ease,
+    border-color 0.15s ease,
+    color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+.sidebar__huddle-btn:hover {
+  border-color: var(--color-primary);
+  color: var(--color-primary);
+  background: var(--color-primary-alpha);
+  box-shadow: 0 0 12px -4px var(--color-primary);
+}
+
+.sidebar__huddle-btn:active {
+  transform: scale(0.95);
+}
+
+.sidebar__huddle-btn.is-active {
+  border-color: var(--color-primary);
+  background: var(--color-primary);
+  color: #fff;
+  box-shadow: 0 0 16px -4px var(--color-primary);
+}
+
+.sidebar__huddle-badge {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  border-radius: 999px;
+  background: var(--color-primary);
+  color: #fff;
+  font-size: 0.625rem;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+
+/* -----------------------------------------------------------------------------
+   Navigation Elements
+   ----------------------------------------------------------------------------- */
+.sidebar__nav {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 1rem;
+}
+
+.sidebar__nav-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.55rem 0.75rem;
+  border-radius: 0.75rem;
+  color: var(--color-text-muted);
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-decoration: none;
+  transition:
+    background 0.2s,
+    color 0.2s;
+}
+
+.sidebar__nav-link:hover {
+  color: var(--color-text);
+  background: var(--color-surface-hover);
+  text-decoration: none;
+}
+
+.sidebar__nav-link--active {
+  background: var(--color-primary-alpha);
+  color: var(--color-primary);
+}
+
+.sidebar__nav-link--active .sidebar__nav-icon {
+  color: var(--color-primary);
+}
+
+/* Navigation Groups */
+.sidebar__nav-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  margin-top: 0.5rem;
+}
+
+.sidebar__nav-group:first-child {
+  margin-top: 0;
+}
+
+.sidebar__nav-label {
+  padding: 0.5rem 0.75rem 0.25rem;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--color-text-muted);
+  opacity: 0.7;
+}
+
+/* Navigation Icons */
+.sidebar__nav-icon {
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  color: var(--color-text-muted);
+  transition: color 0.2s;
+}
+
+.sidebar__nav-link:hover .sidebar__nav-icon {
+  color: var(--color-text);
+}
+
+/* Collapsed state for nav groups and labels */
+.sidebar--collapsed .sidebar__nav-group {
+  margin-top: 0.25rem;
+}
+
+.sidebar--collapsed .sidebar__nav-label {
+  display: none;
+}
+
+.sidebar--collapsed .sidebar__nav-link span:not(.sidebar__nav-icon) {
+  display: none;
+}
+
+.sidebar--collapsed .sidebar__nav-icon {
+  margin: 0;
+}
+
+/* -----------------------------------------------------------------------------
+   Unified Nav Items
+   ----------------------------------------------------------------------------- */
+.sidebar__item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.55rem 0.75rem;
+  border-radius: 0.75rem;
+  border-left: 3px solid transparent;
+  color: var(--color-text-muted);
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-decoration: none;
+  cursor: pointer;
+  background: transparent;
+  border-top: none;
+  border-right: none;
+  border-bottom: none;
+  width: 100%;
+  text-align: left;
+  transition:
+    background 0.2s,
+    color 0.2s,
+    border-color 0.2s;
+  position: relative;
+}
+
+.sidebar__item:hover {
+  color: var(--color-text);
+  background: var(--color-surface-hover);
+  text-decoration: none;
+}
+
+.sidebar__item--active {
+  background: hsl(var(--primary) / 0.15);
+  color: hsl(var(--primary));
+  border-left-color: hsl(var(--primary));
+}
+
+.sidebar__item--active .sidebar__item-icon {
+  color: hsl(var(--primary));
+}
+
+.sidebar__item--active:hover {
+  background: hsl(var(--primary) / 0.2);
+}
+
+.sidebar__item-icon {
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  color: var(--color-text-muted);
+  transition: color 0.2s;
+}
+
+.sidebar__item:hover .sidebar__item-icon {
+  color: var(--color-text);
+}
+
+.sidebar__item-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Unified Nav Sections */
+.sidebar__section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  margin-top: 0.5rem;
+}
+
+.sidebar__section:first-child {
+  margin-top: 0;
+}
+
+.sidebar__section-label {
+  padding: 0.5rem 0.75rem 0.25rem;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--color-text-muted);
+  opacity: 0.7;
+}
+
+.sidebar__section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.25rem 0.75rem;
+}
+
+.sidebar__section-header h3 {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--color-text-muted);
+  opacity: 0.7;
+  margin: 0;
+}
+
+/* Badges */
+.sidebar__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  padding: 0 0.35rem;
+  border-radius: 9999px;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  line-height: 1;
+  background: var(--color-surface-hover);
+  color: var(--color-text-muted);
+  flex-shrink: 0;
+}
+
+.sidebar__badge:empty {
+  display: none;
+}
+
+.sidebar__badge--warning {
+  background: rgba(245, 158, 11, 0.15);
+  color: rgb(245, 158, 11);
+}
+
+.sidebar__badge--error {
+  background: rgba(239, 68, 68, 0.15);
+  color: rgb(239, 68, 68);
+}
+
+.sidebar__badge--primary {
+  background: hsl(var(--primary) / 0.15);
+  color: hsl(var(--primary));
+}
+
+/* -----------------------------------------------------------------------------
+   Scope Selector (Z2)
+   ----------------------------------------------------------------------------- */
+.sidebar__scope {
+  padding: 0.75rem 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.sidebar__scope-label {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--color-text-muted);
+}
+
+.sidebar__scope-select {
+  width: 100%;
+  padding: 0.45rem 0.65rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--color-border);
+  background: var(--color-surface);
+  color: var(--color-text);
+  font-size: 0.8125rem;
+  cursor: pointer;
+  transition: border-color 0.15s;
+}
+
+.sidebar__scope-select:focus {
+  outline: none;
+  border-color: hsl(var(--primary));
+  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.15);
+}
+
+/* -----------------------------------------------------------------------------
+   Action Bar (Z3)
+   ----------------------------------------------------------------------------- */
+.sidebar__action-bar {
+  padding: 0.5rem 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.sidebar__cta {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.55rem 1rem;
+  border-radius: 0.75rem;
+  background: hsl(var(--primary));
+  color: #fff;
+  font-size: 0.875rem;
+  font-weight: 600;
+  border: none;
+  cursor: pointer;
+  transition: background 0.15s;
+  width: 100%;
+}
+
+.sidebar__cta:hover {
+  background: rgb(234, 88, 12);
+}
+
+.sidebar__cta .icon {
+  flex-shrink: 0;
+}
+
+.sidebar__search {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.45rem 0.65rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--color-border);
+  background: var(--color-surface);
+  transition: border-color 0.15s;
+}
+
+.sidebar__search:focus-within {
+  border-color: hsl(var(--primary));
+  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.15);
+}
+
+.sidebar__search-icon {
+  flex-shrink: 0;
+  color: var(--color-text-muted);
+}
+
+.sidebar__search-input {
+  flex: 1;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--color-text);
+  font-size: 0.8125rem;
+  min-width: 0;
+}
+
+.sidebar__search-input::placeholder {
+  color: var(--color-text-muted);
+}
+
+.sidebar__search-hint {
+  font-size: 0.6875rem;
+  padding: 0.15rem 0.35rem;
+  border-radius: 0.25rem;
+  background: var(--color-surface-hover);
+  color: var(--color-text-muted);
+  border: 1px solid var(--color-border);
+  font-family: inherit;
+}
+
+/* -----------------------------------------------------------------------------
+   User Badge (Z5 footer)
+   ----------------------------------------------------------------------------- */
+.sidebar__user-badge {
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebar__user-trigger {
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+  padding: 0.5rem 0.35rem;
+  border-radius: 0.75rem;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  width: 100%;
+  text-align: left;
+  transition: background 0.15s;
+  color: var(--color-text);
+}
+
+.sidebar__user-trigger:hover {
+  background: var(--color-surface-hover);
+}
+
+.sidebar__avatar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  background: var(--color-surface-hover);
+  color: var(--color-text-muted);
+  font-size: 0.75rem;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.sidebar__presence {
+  position: absolute;
+  bottom: -1px;
+  right: -1px;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  border: 2px solid var(--color-surface);
+  background: var(--color-text-muted);
+  display: none;
+}
+
+.sidebar__presence--online {
+  display: block;
+  background: var(--color-success, #22c55e);
+}
+
+.sidebar__presence--away {
+  display: block;
+  background: var(--color-warning, #f59e0b);
+}
+
+.sidebar__presence--busy,
+.sidebar__presence--dnd {
+  display: block;
+  background: var(--color-error, #ef4444);
+}
+
+.sidebar__user-details {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+}
+
+.sidebar__user-name {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--color-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sidebar__user-status {
+  font-size: 0.6875rem;
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.sidebar__user-chevron {
+  flex-shrink: 0;
+  color: var(--color-text-muted);
+}
+
+/* -----------------------------------------------------------------------------
+   Skeleton Loader
+   ----------------------------------------------------------------------------- */
+.sidebar__skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 0.5rem 0.75rem;
+}
+
+.sidebar__skeleton-row {
+  height: 2.25rem;
+  border-radius: 0.5rem;
+  background: var(--color-surface-hover);
+  animation: sidebar-skeleton-pulse 1.5s ease-in-out infinite;
+}
+
+.sidebar__skeleton-row--short {
+  width: 65%;
+}
+
+@keyframes sidebar-skeleton-pulse {
+  0%,
+  100% {
+    opacity: 0.4;
+  }
+  50% {
+    opacity: 0.7;
+  }
+}
+
+/* -----------------------------------------------------------------------------
+   Empty State
+   ----------------------------------------------------------------------------- */
+.sidebar__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem 1rem;
+  gap: 0.5rem;
+  text-align: center;
+}
+
+.sidebar__empty-icon {
+  color: var(--color-text-muted);
+  opacity: 0.5;
+  margin-bottom: 0.25rem;
+}
+
+.sidebar__empty-title {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-text-muted);
+  margin: 0;
+}
+
+.sidebar__empty-description {
+  font-size: 0.8125rem;
+  color: var(--color-text-muted);
+  opacity: 0.7;
+  margin: 0;
+}
+
+/* -----------------------------------------------------------------------------
+   Login Link (shown when unauthenticated)
+   ----------------------------------------------------------------------------- */
+.sidebar__login {
+  display: block;
+  text-align: center;
+  color: var(--color-primary);
+  text-decoration: none;
+  padding: 0.5rem;
+  border-radius: var(--radius-md);
+}
+
+.sidebar__login:hover {
+  background: var(--color-bg-hover);
+}
+
+/* -----------------------------------------------------------------------------
+   Sidebar Backdrop (mobile overlay)
+   ----------------------------------------------------------------------------- */
+.sidebar__backdrop {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 40;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.sidebar__backdrop[data-visible="true"] {
+  display: block;
+  opacity: 1;
+}
+
+/* -----------------------------------------------------------------------------
+   Desktop Collapsed State
+   ----------------------------------------------------------------------------- */
+.sidebar--collapsed {
+  width: 64px;
+}
+
+.sidebar--collapsed .sidebar__header {
+  padding: 0.5rem;
+}
+
+.sidebar--collapsed .sidebar__body {
+  padding: 0.5rem;
+  overflow-x: visible;
+  overflow-y: clip;
+}
+
+.sidebar--collapsed .sidebar__footer {
+  padding: 0.5rem;
+}
+
+/* Collapsed footer: hide user info, stack icons vertically */
+.sidebar--collapsed .sidebar__footer-user {
+  display: none;
+}
+
+.sidebar--collapsed .sidebar__footer-bar {
+  justify-content: center;
+}
+
+.sidebar--collapsed .sidebar__footer-icons {
+  flex-direction: column;
+  gap: 2px;
+}
+
+.sidebar--collapsed .sidebar__footer-icon {
+  width: 2rem;
+  height: 2rem;
+}
+
+/* Hide text in collapsed state */
+.sidebar--collapsed .sidebar__nav-link span:not(.icon),
+.sidebar--collapsed .sidebar__login,
+.sidebar--collapsed .page__profile-details,
+.sidebar--collapsed .page__profile-trigger svg:last-child,
+.sidebar--collapsed .app-switcher__label,
+.sidebar--collapsed .app-switcher__chevron {
+  display: none;
+}
+
+/* Unified collapsed rules */
+.sidebar--collapsed .sidebar__item-label,
+.sidebar--collapsed .sidebar__badge,
+.sidebar--collapsed .sidebar__section-label,
+.sidebar--collapsed .sidebar__scope,
+.sidebar--collapsed .sidebar__action-bar,
+.sidebar--collapsed .sidebar__user-details,
+.sidebar--collapsed .sidebar__user-chevron,
+.sidebar--collapsed .sidebar__footer-action-label {
+  display: none;
+}
+
+.sidebar--collapsed .sidebar__item {
+  justify-content: center;
+  padding: 0;
+  border-left: none;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  margin: 0 auto;
+}
+
+.sidebar--collapsed .sidebar__item-icon {
+  margin: 0;
+}
+
+.sidebar--collapsed .sidebar__section {
+  margin-top: 0.25rem;
+}
+
+/* Tooltip for collapsed unified nav items */
+.sidebar--collapsed .sidebar__item::after {
+  content: attr(title);
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-left: 0.5rem;
+  padding: 0.35rem 0.65rem;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 0.5rem;
+  font-size: 0.8rem;
+  font-weight: 500;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s;
+  z-index: 70;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.sidebar--collapsed .sidebar__item:hover::after {
+  opacity: 1;
+}
+
+.sidebar--collapsed .sidebar__nav-link {
+  justify-content: center;
+  padding: 0.55rem;
+}
+
+.sidebar--collapsed .sidebar__nav-link .icon {
+  margin: 0;
+}
+
+.sidebar--collapsed .sidebar__header-row {
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.sidebar--collapsed .sidebar__footer-action {
+  justify-content: center;
+  padding: 0.5rem;
+}
+
+.sidebar--collapsed .app-switcher--brand {
+  width: auto;
+}
+
+.sidebar--collapsed .app-switcher__trigger--brand {
+  width: auto;
+  justify-content: center;
+  padding: 0.375rem;
+  position: relative;
+}
+
+/* Tooltip for trigger in collapsed state */
+.sidebar--collapsed .app-switcher__trigger--brand::after {
+  content: attr(title);
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-left: 0.5rem;
+  padding: 0.35rem 0.65rem;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 0.5rem;
+  font-size: 0.8rem;
+  font-weight: 500;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s;
+  z-index: 70;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.sidebar--collapsed .app-switcher__trigger--brand:hover::after {
+  opacity: 1;
+}
+
+/* Hide tooltip when app-switcher is open */
+.sidebar--collapsed .app-switcher--open .app-switcher__trigger--brand::after {
+  display: none;
+}
+
+/* Dropdown positioning in collapsed state */
+.sidebar--collapsed .dropdown__content {
+  left: 100%;
+  right: auto;
+  bottom: 0;
+  top: auto;
+  margin-left: 0.5rem;
+  margin-bottom: 0;
+}
+
+/* Compact app-switcher in collapsed sidebar */
+.sidebar--collapsed .app-switcher__panel {
+  min-width: auto;
+  width: auto;
+}
+
+.sidebar--collapsed .app-switcher__grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.sidebar--collapsed .app-switcher__item {
+  padding: 0.5rem;
+  position: relative;
+}
+
+.sidebar--collapsed .app-switcher__content,
+.sidebar--collapsed .app-switcher__badge {
+  display: none;
+}
+
+.sidebar--collapsed .app-switcher__item .app-switcher__icon {
+  width: 2.25rem;
+  height: 2.25rem;
+}
+
+/* Tooltip for collapsed app switcher items */
+.sidebar--collapsed .app-switcher__item::after {
+  content: attr(title);
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-left: 0.5rem;
+  padding: 0.35rem 0.65rem;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 0.5rem;
+  font-size: 0.8rem;
+  font-weight: 500;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s;
+  z-index: 70;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.sidebar--collapsed .app-switcher__item:hover::after {
+  opacity: 1;
+}
+
+/* -----------------------------------------------------------------------------
+   Mobile Responsive Styles
+   ----------------------------------------------------------------------------- */
+@media (max-width: 900px) {
+  .sidebar {
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 240px;
+    max-width: 85vw;
+    z-index: 50;
+    transform: translateX(-100%);
+    transition: transform 0.3s ease;
+  }
+
+  .sidebar[data-open="true"] {
+    transform: translateX(0);
+  }
+
+  /* Reset collapsed state on mobile */
+  .sidebar--collapsed {
+    width: 240px;
+  }
+
+  .sidebar--collapsed .sidebar__header {
+    padding: 1rem;
+  }
+
+  .sidebar--collapsed .sidebar__body {
+    padding: 0;
+    overflow-x: initial;
+    overflow-y: auto;
+  }
+
+  .sidebar--collapsed .sidebar__footer {
+    padding: 0.75rem;
+  }
+
+  /* Reset footer collapsed state on mobile — show full row */
+  .sidebar--collapsed .sidebar__footer-user {
+    display: flex;
+  }
+
+  .sidebar--collapsed .sidebar__footer-icons {
+    flex-direction: row;
+    gap: 2px;
+  }
+
+  .sidebar--collapsed .sidebar__footer-icon {
+    width: 1.75rem;
+    height: 1.75rem;
+  }
+
+  .sidebar--collapsed .sidebar__nav-link span:not(.icon),
+  .sidebar--collapsed .sidebar__login,
+  .sidebar--collapsed .page__profile-details,
+  .sidebar--collapsed .page__profile-trigger svg:last-child,
+  .sidebar--collapsed .app-switcher__label,
+  .sidebar--collapsed .app-switcher__chevron {
+    display: flex;
+  }
+
+  /* Reset unified collapsed rules on mobile */
+  .sidebar--collapsed .sidebar__item-label,
+  .sidebar--collapsed .sidebar__badge,
+  .sidebar--collapsed .sidebar__section-label,
+  .sidebar--collapsed .sidebar__user-details,
+  .sidebar--collapsed .sidebar__user-chevron,
+  .sidebar--collapsed .sidebar__footer-action-label {
+    display: flex;
+  }
+
+  .sidebar--collapsed .sidebar__scope,
+  .sidebar--collapsed .sidebar__action-bar {
+    display: flex;
+  }
+
+  .sidebar--collapsed .sidebar__item {
+    justify-content: flex-start;
+    padding: 0.55rem 0.75rem;
+    border-left: 3px solid transparent;
+    width: 100%;
+    height: auto;
+    border-radius: 0.75rem;
+    margin: 0;
+  }
+
+  .sidebar--collapsed .sidebar__item--active {
+    border-left-color: hsl(var(--primary));
+  }
+
+  .sidebar--collapsed .sidebar__footer-action {
+    justify-content: flex-start;
+    padding: 0.5rem 0.75rem;
+  }
+
+  /* Hide collapsed tooltips on mobile */
+  .sidebar--collapsed .sidebar__item::after {
+    display: none;
+  }
+
+  /* Hide collapsed trigger tooltip on mobile */
+  .sidebar--collapsed .app-switcher__trigger--brand::after {
+    display: none;
+  }
+
+  .sidebar--collapsed .app-switcher__trigger--brand {
+    width: 100%;
+    padding: 0.5rem 0.25rem;
+  }
+
+  .sidebar--collapsed .sidebar__nav-link {
+    justify-content: flex-start;
+    padding: 0.55rem 0.75rem;
+  }
+
+  .sidebar--collapsed .dropdown__content {
+    left: auto;
+    right: 0;
+    bottom: 100%;
+    margin-left: 0;
+    margin-bottom: 0.5rem;
+  }
+
+  /* Reset header-row to horizontal on mobile */
+  .sidebar--collapsed .sidebar__header-row {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  /* Reset storage collapsed nav on mobile */
+  .sidebar--storage.sidebar--collapsed .storage-sidebar__org {
+    display: flex;
+  }
+
+  .sidebar--storage.sidebar--collapsed .storage-nav__item span {
+    display: inline;
+  }
+
+  .sidebar--storage.sidebar--collapsed .storage-nav__item {
+    justify-content: flex-start;
+    padding: 0.6rem 0.85rem;
+  }
+
+  .sidebar--storage.sidebar--collapsed .storage-nav__item::after {
+    display: none;
+  }
+
+  /* Hide sidebar toggle on mobile */
+  .sidebar__toggle {
+    display: none;
+  }
+
+  /* Hide sidebar collapse button on mobile */
+  .sidebar__collapse-btn {
+    display: none;
+  }
+}