/* 24HG Social — Glass Bridge v7 */

[data-theme=dark], :root {
  --bg: var(--bg-primary, #07080a); --surface: var(--bg-secondary, #101114);
  --surface2: var(--bg-elevated, #16171b); --text: var(--text-primary, #f0f0f0);
  --muted: var(--text-secondary, #6a6b6c); --border: var(--border-primary, rgba(255,255,255,0.06));
  --accent: var(--accent-primary, #00e5ff);
}
/* Body orbs re-enabled — provide colored content for glass backdrop-filter to blur */

[data-theme=light] {
  --bg: var(--bg-primary, #ffffff); --surface: rgba(210,210,215,0.55);
  --surface2: rgba(195,195,200,0.60); --text: var(--text-primary, #0d0d14);
  --muted: var(--text-secondary, #6b7280); --border: var(--border-primary, rgba(0,0,0,0.10));
  --accent: var(--accent-primary, #0088cc); --blur-card: 30px;
  --glass-shadow: 0 4px 24px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.7);
}
[data-theme=light] .glass-card, [data-theme=light] .card, [data-theme=light] .card-elevated,
[data-theme=light] [class*=card], [data-theme=light] [class*=panel],
[data-theme=light] [class*=sidebar], [data-theme=light] [class*=widget] {
  background: rgba(220,220,225,0.55) !important;
  backdrop-filter: blur(30px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.4) !important;
  border-color: rgba(0,0,0,0.10) !important;
}
[data-theme=light] .glass-card::before, [data-theme=light] .card::before,
[data-theme=light] [class*=card]::before {
  background: linear-gradient(135deg, rgba(0,0,0,0.10), rgba(0,0,0,0.04),
    rgba(0,0,0,0), rgba(0,0,0,0.04), rgba(0,0,0,0.10)) !important;
}
[data-theme=light] .glass-sidebar {
  height: 100vh !important;
  max-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: clip !important;
  background: var(--bg, #07080a) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
[data-theme=light] input, [data-theme=light] textarea, [data-theme=light] select {
  background: rgba(255,255,255,0.70) !important; border-color: rgba(0,0,0,0.12) !important;
  backdrop-filter: blur(10px);
}
[data-theme=light] .dropdown-menu {
  background: rgba(225,225,228,0.88) !important; border-color: rgba(0,0,0,0.10) !important;
}

/* Sidebar scroll */
.glass-sidebar { height: 100vh !important; max-height: 100vh !important;
  display: flex !important; flex-direction: column !important; overflow: clip !important; }
.glass-sidebar > nav, .glass-sidebar .sidebar-nav, .glass-sidebar > div > nav {
  flex: 1 1 0 !important; min-height: 0 !important; max-height: 100% !important;
  overflow-y: auto !important; overflow-x: hidden !important; }
.glass-sidebar .sidebar-bottom, .glass-sidebar > .user-chip-wrapper,
.glass-sidebar > div:last-child { flex-shrink: 0 !important; }

/* Collapsed sidebar */
.glass-sidebar--collapsed, .glass-sidebar.glass-sidebar--collapsed { width: 64px !important; }
.glass-sidebar--collapsed #nav-glide-pill { opacity: 0 !important; pointer-events: none !important; }
.glass-sidebar--collapsed .nav-item.active svg, .glass-sidebar--collapsed .glass-nav__item--active svg {
  color: var(--accent) !important;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 50%, transparent)) !important;
}
.glass-sidebar--collapsed nav, .glass-sidebar--collapsed .sidebar-nav {
  padding: 4px 0 !important; align-items: center !important;
  display: flex !important; flex-direction: column !important;
}
.glass-sidebar--collapsed nav .nav-item, .glass-sidebar--collapsed nav .glass-nav__item,
.glass-sidebar--collapsed nav a, .glass-sidebar--collapsed nav button {
  width: 44px !important; height: auto !important;
  padding: 10px 0 10px 10px !important; margin: 2px auto !important;
  display: flex !important; align-items: center !important;
  justify-content: flex-start !important; border-radius: 10px !important;
}
.glass-sidebar--collapsed nav .nav-item svg, .glass-sidebar--collapsed nav .glass-nav__item svg,
.glass-sidebar--collapsed nav a svg, .glass-sidebar--collapsed nav button svg {
  width: 18px !important; height: 18px !important; flex-shrink: 0 !important;
}

/* Fix 1: Active nav item — left accent bar + icon glow, pill handles background */
.glass-sidebar .nav-item.active,
.glass-sidebar .glass-nav__item--active,
.glass-sidebar nav a.active {
  background: transparent !important;
  border: none !important;
  border-left: 3px solid var(--accent) !important;
  box-shadow: none !important;
  color: var(--accent) !important;
  padding-left: 15px !important;
}
.glass-sidebar .nav-item.active svg,
.glass-sidebar .glass-nav__item--active svg {
  color: var(--accent) !important;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 40%, transparent)) !important;
}

/* Collapsed sidebar: restore icon padding, hide left border on active item */
.glass-sidebar--collapsed .nav-item.active,
.glass-sidebar--collapsed .glass-nav__item--active {
  border-left: none !important;
  padding-left: 10px !important;
}

/* Nav item hover — pure CSS, no React state, no MutationObserver trigger */
.glass-sidebar .nav-item:not(.active):hover {
  background: var(--bg-hover, rgba(255,255,255,0.05)) !important;
}

/* ── Issue #44 — contain right-edge purple blob (body::after in glass.css) ── */
/* Push the pink/purple orb further offscreen so it doesn't bleed into the right sidebar. */
html, body { overflow-x: hidden !important; }
body::after {
  right: -400px !important;
  bottom: -300px !important;
  width: 520px !important;
  height: 520px !important;
}

/* ── Issue #46 — Button hierarchy ── */
/* Primary action — cyan filled glass */
.btn-primary-glass {
  background: color-mix(in srgb, var(--accent) 18%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent) !important;
  color: var(--accent) !important;
  font-weight: 700;
  padding: 9px 20px;
  border-radius: 10px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  transition: all 0.15s;
}
.btn-primary-glass:hover { background: color-mix(in srgb, var(--accent) 28%, transparent) !important; }

/* Secondary — ghost */
.btn-ghost-glass {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: var(--text) !important;
  font-weight: 600;
  padding: 9px 20px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-ghost-glass:hover { background: rgba(255,255,255,0.08) !important; }

/* Destructive */
.btn-danger-glass {
  background: rgba(244,63,94,0.10) !important;
  border: 1px solid rgba(244,63,94,0.30) !important;
  color: #f43f5e !important;
  font-weight: 700;
  padding: 9px 20px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-danger-glass:hover { background: rgba(244,63,94,0.16) !important; }