/* theme-styles.css */
:root {
    /* Light theme (default) */
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-accent: #f1f5f9;
    --bg-hover: #f8fafc;
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --border-color: #e5e7eb;
    --border-light: #f3f4f6;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    
    /* Brand colors (remain consistent across themes) */
    --primary: #4f46e5;
    --primary-hover: #4338ca;
    --secondary: #f59e0b;
    --success: #10b981;
    --warning: #f59e0b;
    --error: #ef4444;
    --info: #3b82f6;
}

[data-theme="dark"] {
    --bg-primary: #111827;
    --bg-secondary: #1f2937;
    --bg-accent: #374151;
    --bg-hover: #374151;
    --text-primary: #f9fafb;
    --text-secondary: #d1d5db;
    --text-muted: #9ca3af;
    --border-color: #374151;
    --border-light: #4b5563;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
}

/* Smooth transitions for theme changes */
.theme-transition * {
    transition: background-color 0.3s ease, 
                border-color 0.3s ease, 
                color 0.3s ease,
                box-shadow 0.3s ease;
}

.theme-transition *::before,
.theme-transition *::after {
    transition: background-color 0.3s ease, 
                border-color 0.3s ease, 
                color 0.3s ease;
}

/* Apply CSS variables to common elements */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Card styles */
.card, .glass-effect, .bg-white, .bg-gray-50 {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Text colors */
.text-gray-900, .text-gray-800, .text-gray-700 {
    color: var(--text-primary) !important;
}

.text-gray-600, .text-gray-500 {
    color: var(--text-secondary) !important;
}

.text-gray-400, .text-gray-300 {
    color: var(--text-muted) !important;
}

/* Border colors */
.border-gray-200, .border-gray-300 {
    border-color: var(--border-color) !important;
}

.border-gray-100 {
    border-color: var(--border-light) !important;
}

/* Background colors */
.bg-gray-50, .bg-gray-100 {
    background-color: var(--bg-accent) !important;
}

.bg-gray-900, .bg-gray-800 {
    background-color: var(--bg-secondary) !important;
}

/* Shadow adjustments */
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }

/* Form elements */
input, textarea, select {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

input::placeholder, textarea::placeholder {
    color: var(--text-muted) !important;
}

/* Table styles */
table {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

th, td {
    border-color: var(--border-color) !important;
}

/* Modal/overlay backgrounds */
.modal-backdrop, .overlay {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .modal-backdrop,
[data-theme="dark"] .overlay {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

/* Custom component overrides */
.btn-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

.btn-primary:hover {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}

/* Ensure images and media maintain proper contrast */
img, video, iframe {
    filter: brightness(var(--media-brightness, 1));
}

[data-theme="dark"] img,
[data-theme="dark"] video,
[data-theme="dark"] iframe {
    --media-brightness: 0.9;
}

/* =========================================================================
 * Extended Tailwind color overrides for dark mode.
 *
 * These rules only take effect when data-theme="dark". They are scoped so
 * that light mode behaves exactly as before — no visible change in light
 * mode for any view.
 *
 * Strategy: map each light-tinted Tailwind background to a much darker
 * equivalent that keeps the same "subtle accent" semantic. Text in the
 * matching color gets a brighter equivalent so contrast stays readable.
 * ========================================================================= */

[data-theme="dark"] .bg-white,
[data-theme="dark"] .hover\:bg-white:hover {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .bg-black {
    background-color: #000 !important;
}

/* Subtle tinted backgrounds (cards, alerts, info banners) */
[data-theme="dark"] .bg-blue-50,
[data-theme="dark"] .bg-blue-100 { background-color: rgba(59, 130, 246, 0.15) !important; }
[data-theme="dark"] .bg-indigo-50,
[data-theme="dark"] .bg-indigo-100 { background-color: rgba(99, 102, 241, 0.15) !important; }
[data-theme="dark"] .bg-purple-50,
[data-theme="dark"] .bg-purple-100 { background-color: rgba(168, 85, 247, 0.15) !important; }
[data-theme="dark"] .bg-pink-50,
[data-theme="dark"] .bg-pink-100 { background-color: rgba(236, 72, 153, 0.15) !important; }
[data-theme="dark"] .bg-red-50,
[data-theme="dark"] .bg-red-100 { background-color: rgba(239, 68, 68, 0.15) !important; }
[data-theme="dark"] .bg-orange-50,
[data-theme="dark"] .bg-orange-100 { background-color: rgba(249, 115, 22, 0.15) !important; }
[data-theme="dark"] .bg-yellow-50,
[data-theme="dark"] .bg-yellow-100 { background-color: rgba(234, 179, 8, 0.15) !important; }
[data-theme="dark"] .bg-green-50,
[data-theme="dark"] .bg-green-100 { background-color: rgba(34, 197, 94, 0.15) !important; }
[data-theme="dark"] .bg-emerald-50,
[data-theme="dark"] .bg-emerald-100 { background-color: rgba(16, 185, 129, 0.15) !important; }
[data-theme="dark"] .bg-teal-50,
[data-theme="dark"] .bg-teal-100 { background-color: rgba(20, 184, 166, 0.15) !important; }

/* Tinted text — bump brightness so 700-shade text stays legible on dark bg */
[data-theme="dark"] .text-blue-700,
[data-theme="dark"] .text-blue-800,
[data-theme="dark"] .text-blue-900 { color: #93c5fd !important; }
[data-theme="dark"] .text-indigo-700,
[data-theme="dark"] .text-indigo-800,
[data-theme="dark"] .text-indigo-900 { color: #a5b4fc !important; }
[data-theme="dark"] .text-red-700,
[data-theme="dark"] .text-red-800,
[data-theme="dark"] .text-red-900 { color: #fca5a5 !important; }
[data-theme="dark"] .text-orange-700,
[data-theme="dark"] .text-orange-800 { color: #fdba74 !important; }
[data-theme="dark"] .text-yellow-700,
[data-theme="dark"] .text-yellow-800 { color: #fde047 !important; }
[data-theme="dark"] .text-green-700,
[data-theme="dark"] .text-green-800,
[data-theme="dark"] .text-green-900 { color: #86efac !important; }
[data-theme="dark"] .text-emerald-700,
[data-theme="dark"] .text-emerald-800 { color: #6ee7b7 !important; }
[data-theme="dark"] .text-purple-700,
[data-theme="dark"] .text-purple-800 { color: #d8b4fe !important; }
[data-theme="dark"] .text-pink-700,
[data-theme="dark"] .text-pink-800 { color: #f9a8d4 !important; }

/* Hover-state backgrounds */
[data-theme="dark"] .hover\:bg-gray-50:hover,
[data-theme="dark"] .hover\:bg-gray-100:hover { background-color: var(--bg-accent) !important; }
[data-theme="dark"] .hover\:bg-gray-200:hover { background-color: var(--bg-hover) !important; }
[data-theme="dark"] .hover\:bg-white:hover { background-color: var(--bg-secondary) !important; }

/* Divide / separator colors */
[data-theme="dark"] .divide-gray-100 > * + *,
[data-theme="dark"] .divide-gray-200 > * + *,
[data-theme="dark"] .divide-gray-300 > * + * { border-color: var(--border-color) !important; }

/* Ring (focus) outlines that use light gray */
[data-theme="dark"] .ring-gray-100,
[data-theme="dark"] .ring-gray-200,
[data-theme="dark"] .ring-gray-300 { --tw-ring-color: var(--border-color) !important; }

/* Placeholder text in input/textarea is sometimes themed via Tailwind classes */
[data-theme="dark"] .placeholder-gray-400::placeholder,
[data-theme="dark"] .placeholder-gray-500::placeholder { color: var(--text-muted) !important; }

/* Sidebar/nav surfaces commonly use these explicit greys */
[data-theme="dark"] .bg-slate-50,
[data-theme="dark"] .bg-slate-100 { background-color: var(--bg-accent) !important; }
[data-theme="dark"] .bg-slate-900 { background-color: var(--bg-primary) !important; }
[data-theme="dark"] .text-slate-700,
[data-theme="dark"] .text-slate-800,
[data-theme="dark"] .text-slate-900 { color: var(--text-primary) !important; }
[data-theme="dark"] .text-slate-500,
[data-theme="dark"] .text-slate-600 { color: var(--text-secondary) !important; }
[data-theme="dark"] .border-slate-200,
[data-theme="dark"] .border-slate-300 { border-color: var(--border-color) !important; }

/* Generic borders missed by the original list */
[data-theme="dark"] .border-gray-50,
[data-theme="dark"] .border-gray-400,
[data-theme="dark"] .border-gray-500 { border-color: var(--border-color) !important; }

/* =========================================================================
 * Coverage gaps observed in the wild (from grep frequency across templates).
 * These five workhorse classes have hundreds of uses each across the app.
 * ========================================================================= */

/* The `bg-gray-200` workhorse: section dividers, disabled buttons, etc. */
[data-theme="dark"] .bg-gray-200 { background-color: var(--bg-accent) !important; }
[data-theme="dark"] .bg-gray-300 { background-color: var(--border-light) !important; }
[data-theme="dark"] .hover\:bg-gray-200:hover,
[data-theme="dark"] .hover\:bg-gray-300:hover { background-color: var(--border-color) !important; }

/* `text-gray-400` is fine in dark (mid luminance), but `text-gray-300/200/100`
   already act as light secondary text in dark mode (no change needed). */
[data-theme="dark"] .text-gray-400 { color: var(--text-muted) !important; }

/* Ring (focus) — broader coverage */
[data-theme="dark"] .ring-gray-50,
[data-theme="dark"] .ring-gray-400,
[data-theme="dark"] .ring-gray-500 { --tw-ring-color: var(--border-color) !important; }

/* Placeholder text — broader coverage */
[data-theme="dark"] .placeholder-gray-300::placeholder,
[data-theme="dark"] .placeholder-gray-600::placeholder { color: var(--text-muted) !important; }

/* Divide-color completeness */
[data-theme="dark"] .divide-gray-50 > * + *,
[data-theme="dark"] .divide-gray-400 > * + *,
[data-theme="dark"] .divide-slate-200 > * + *,
[data-theme="dark"] .divide-slate-300 > * + * { border-color: var(--border-color) !important; }

/* Inputs/textareas/selects — the most common form surface.
   Light-mode inputs default to white; in dark mode flip to bg-secondary. */
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="color"]):not([type="range"]):not([type="file"]),
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: var(--text-muted) !important; }

/* Code / pre blocks usually have white bg, jarring on dark */
[data-theme="dark"] pre,
[data-theme="dark"] code:not(pre code) { background-color: var(--bg-secondary) !important; color: var(--text-primary) !important; }

/* Table surfaces */
[data-theme="dark"] table,
[data-theme="dark"] tbody,
[data-theme="dark"] thead { background-color: transparent !important; }
[data-theme="dark"] th { background-color: var(--bg-secondary) !important; color: var(--text-primary) !important; }
[data-theme="dark"] td { border-color: var(--border-color) !important; color: var(--text-primary) !important; }
[data-theme="dark"] tr:hover { background-color: var(--bg-accent) !important; }

/* Toggle button + icon (controlled by global_theme.js / nav.php) */
.theme-toggle-sun  { display: none; }
.theme-toggle-moon { display: inline-block; }
[data-theme="dark"] .theme-toggle-sun  { display: inline-block; }
[data-theme="dark"] .theme-toggle-moon { display: none; }

/* =====================================================================
   Global collapsible sidebar (used across the whole app, not per-module)
   ---------------------------------------------------------------------
   • includes/left_sidebar.php is the universal sidebar — its outer
     wrapper carries the .linkupp-sidebar hook class.
   • The toggle lives in includes/nav.php (next to the logo); state
     persists in localStorage (key: linkupp_sidebar_collapsed).
   • global_theme.js applies the body class on early DOM availability
     so there's no flash.
   • When collapsed: sidebar hides on lg+ AND the immediate-next-sibling
     element (the page's main column, whatever its col-span class is)
     is bumped to span the full grid for a focused full-width view.
     Pages with a right-rail (col-span-6 + col-span-3) gracefully
     degrade — the right rail wraps below the now-full-width main.
   • Mobile (< lg): the sidebar wrapper is already hidden via Tailwind
     `hidden lg:block`; the mobile bottom-nav is a separate fixed bar
     and is NEVER affected by the collapse state.
   ===================================================================== */

/* Modern sidebar polish — applies to the desktop block. The mobile
   bottom-nav is unaffected (different parent). */
@media (min-width: 1024px) {
  .linkupp-sidebar > div {
    border: 1px solid var(--border-color);
    transition: opacity .18s ease, transform .18s ease;
  }
  .linkupp-sidebar nav a {
    border-radius: 0.625rem;
    position: relative;
    font-weight: 500;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
  }
  .linkupp-sidebar nav a:hover { transform: translateX(2px); }
  /* Active item — shown via the .is-active class set by left_sidebar.php
     based on the current request URI. */
  .linkupp-sidebar nav a.is-active {
    background-color: var(--bg-accent);
    color: var(--text-primary);
  }
  .linkupp-sidebar nav a.is-active::before {
    content: '';
    position: absolute;
    left: 0; top: 25%; bottom: 25%;
    width: 3px;
    border-radius: 2px;
    background: var(--primary);
  }
  /* Section header inside the desktop sidebar (e.g. "Workspace"). */
  .linkupp-sidebar h3.linkupp-section-header {
    letter-spacing: 0.08em;
    font-size: 0.6875rem;
    color: var(--text-muted);
  }
}

/* Collapsed state. Mobile (< lg) ignores .linkupp-sidebar entirely
   because the wrapper is already display:none via Tailwind, so these
   rules can be unconditional. */
body.linkupp-sidebar-collapsed .linkupp-sidebar { display: none !important; }

@media (min-width: 1024px) {
  /* The immediate next sibling of the (now-hidden) sidebar is the
     page's main content column. Promote it to full grid width. The
     `!important` is needed because every page declares lg:col-span-*
     via utility classes with their own specificity. */
  body.linkupp-sidebar-collapsed .linkupp-sidebar + * {
    grid-column: 1 / -1 !important;
  }
}

/* Toggle button (in nav.php). Same shape/size language as the existing
   themeToggle so the navbar reads consistently. */
.linkupp-sidebar-toggle {
  display: none; /* hidden on mobile — bottom-nav is the mobile pattern */
  align-items: center;
  justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 0.5rem;
  color: var(--text-secondary);
  transition: background-color .15s ease, color .15s ease;
  cursor: pointer;
}
.linkupp-sidebar-toggle:hover { background-color: var(--bg-accent); color: var(--text-primary); }
@media (min-width: 1024px) {
  .linkupp-sidebar-toggle { display: inline-flex; }
}
/* Icon flips based on collapsed state — purely cosmetic, the action
   is the same toggle. */
.linkupp-sidebar-toggle .icon-expand   { display: none; }
.linkupp-sidebar-toggle .icon-collapse { display: inline-block; }
body.linkupp-sidebar-collapsed .linkupp-sidebar-toggle .icon-expand   { display: inline-block; }
body.linkupp-sidebar-collapsed .linkupp-sidebar-toggle .icon-collapse { display: none; }

/* =====================================================================
 * LinkUpp Futuristic UI System v2
 * Design tokens · Glassmorphism · Glow utilities · Nav chrome
 * ===================================================================== */

:root {
    --lu-grad-start:  #6366f1;   /* indigo */
    --lu-grad-mid:    #8b5cf6;   /* violet */
    --lu-grad-end:    #06b6d4;   /* cyan   */
    --lu-glow-sm:     rgba(99, 102, 241, 0.20);
    --lu-glow-md:     rgba(99, 102, 241, 0.38);
    --lu-glow-cyan:   rgba(6, 182, 212, 0.22);
    --lu-glass-bg:    rgba(255, 255, 255, 0.76);
    --lu-glass-border:rgba(255, 255, 255, 0.55);
    --lu-glass-shadow:0 8px 32px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.70) inset;
    --lu-active-bg:   rgba(99, 102, 241, 0.09);
    --lu-hover-bg:    rgba(99, 102, 241, 0.055);
    --lu-nav-h:       4rem;
}

[data-theme="dark"] {
    --lu-glass-bg:    rgba(15, 20, 35, 0.80);
    --lu-glass-border:rgba(255, 255, 255, 0.07);
    --lu-glass-shadow:0 8px 32px rgba(0,0,0,0.48), 0 1px 0 rgba(255,255,255,0.04) inset;
    --lu-active-bg:   rgba(99, 102, 241, 0.17);
    --lu-hover-bg:    rgba(99, 102, 241, 0.09);
    --lu-glow-sm:     rgba(99, 102, 241, 0.32);
    --lu-glow-md:     rgba(99, 102, 241, 0.48);
}

/* ── Glass surface ──────────────────────────────────────────────────── */
.lu-glass {
    background:  var(--lu-glass-bg);
    backdrop-filter: blur(20px) saturate(1.65);
    -webkit-backdrop-filter: blur(20px) saturate(1.65);
    border: 1px solid var(--lu-glass-border);
    box-shadow: var(--lu-glass-shadow);
}

/* ── Gradient text ──────────────────────────────────────────────────── */
.lu-gradient-text {
    background: linear-gradient(135deg, var(--lu-grad-start) 0%, var(--lu-grad-mid) 60%, var(--lu-grad-end) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Glow icon button ───────────────────────────────────────────────── */
.lu-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.625rem;
    color: var(--text-secondary);
    cursor: pointer;
    position: relative;
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.lu-icon-btn:hover {
    background-color: var(--lu-hover-bg);
    color: var(--lu-grad-start);
    box-shadow: 0 0 0 4px var(--lu-glow-sm);
    transform: translateY(-1px);
}
.lu-icon-btn:focus-visible {
    outline: 2px solid var(--lu-grad-start);
    outline-offset: 2px;
}

/* ── Search pill ────────────────────────────────────────────────────── */
.lu-search-pill {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 9999px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.lu-search-pill:focus-within {
    border-color: var(--lu-grad-start);
    box-shadow: 0 0 0 3px var(--lu-glow-sm);
}

/* ── Glass dropdown / search results ───────────────────────────────── */
.lu-dropdown {
    background: var(--lu-glass-bg);
    backdrop-filter: blur(24px) saturate(1.55);
    -webkit-backdrop-filter: blur(24px) saturate(1.55);
    border: 1px solid var(--lu-glass-border);
    box-shadow: 0 20px 48px rgba(0,0,0,.14), 0 4px 12px rgba(0,0,0,.08);
    border-radius: 1rem;
    overflow: hidden;
    transform-origin: top right;
    animation: lu-dropdown-in .18s cubic-bezier(.22,1,.36,1) both;
}
@keyframes lu-dropdown-in {
    from { opacity: 0; transform: scale(.95) translateY(-6px); }
    to   { opacity: 1; transform: scale(1)  translateY(0); }
}
.lu-dropdown-item {
    display: flex;
    align-items: center;
    padding: .625rem 1rem;
    font-size: .875rem;
    color: var(--text-primary);
    gap: .75rem;
    transition: background-color .14s ease, color .14s ease;
}
.lu-dropdown-item:hover { background: var(--lu-hover-bg); color: var(--lu-grad-start); }
.lu-dropdown-item .icon { width: 1rem; color: var(--text-muted); flex-shrink: 0; }
.lu-dropdown-item:hover .icon { color: var(--lu-grad-start); }

/* ── Sidebar nav items ──────────────────────────────────────────────── */
.lu-sidebar-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .875rem;
    border-radius: .625rem;
    font-weight: 500;
    font-size: .875rem;
    color: var(--text-secondary);
    position: relative;
    text-decoration: none;
    transition: background-color .14s ease, color .14s ease, transform .14s ease;
}
.lu-sidebar-item:hover {
    background: var(--lu-hover-bg);
    color: var(--text-primary);
    transform: translateX(2px);
}
.lu-sidebar-item .lu-item-icon {
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
    transition: color .14s ease;
}
.lu-sidebar-item:hover .lu-item-icon { color: var(--lu-grad-start); }
.lu-sidebar-item.is-active {
    background: var(--lu-active-bg);
    color: var(--lu-grad-start);
    font-weight: 600;
}
.lu-sidebar-item.is-active .lu-item-icon { color: var(--lu-grad-start); }
.lu-sidebar-item.is-active::before {
    content: '';
    position: absolute;
    left: 0; top: 20%; bottom: 20%;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: linear-gradient(180deg, var(--lu-grad-start), var(--lu-grad-mid));
    box-shadow: 0 0 8px var(--lu-glow-sm);
}

/* ── Section header ─────────────────────────────────────────────────── */
.lu-section-header {
    font-size: .675rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: .75rem .875rem .35rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.lu-section-header::before {
    content: '';
    display: inline-block;
    width: .3rem;
    height: .3rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--lu-grad-start), var(--lu-grad-mid));
    flex-shrink: 0;
}

/* ── Badge pills ────────────────────────────────────────────────────── */
.lu-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .62rem;
    font-weight: 700;
    line-height: 1;
    padding: .18rem .42rem;
    border-radius: 9999px;
    white-space: nowrap;
}

/* ── Notification badge ─────────────────────────────────────────────── */
.lu-notif-badge {
    position: absolute;
    top: -.18rem;
    right: -.18rem;
    min-width: 1.15rem;
    height: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .6rem;
    font-weight: 800;
    border-radius: 9999px;
    background: linear-gradient(135deg, #ef4444, #f97316);
    color: #fff;
    padding: 0 .25rem;
    box-shadow: 0 0 0 2px var(--bg-primary), 0 0 10px rgba(239,68,68,.45);
    animation: lu-badge-pulse 2.4s ease-in-out infinite;
}
@keyframes lu-badge-pulse {
    0%,100% { box-shadow: 0 0 0 2px var(--bg-primary), 0 0 8px rgba(239,68,68,.35); }
    50%      { box-shadow: 0 0 0 2px var(--bg-primary), 0 0 16px rgba(239,68,68,.65); }
}

/* ── Live dot (right sidebar) ───────────────────────────────────────── */
.lu-live-dot {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .7rem;
    font-weight: 600;
    color: var(--text-muted);
}
.lu-live-dot .dot {
    position: relative;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
}
.lu-live-dot .dot::before {
    content: '';
    position: absolute;
    inset: -.2rem;
    border-radius: 50%;
    background: #22c55e;
    opacity: .4;
    animation: lu-ping 1.8s ease-in-out infinite;
}
@keyframes lu-ping {
    0%   { transform: scale(1);  opacity: .4; }
    70%  { transform: scale(2);  opacity: 0;  }
    100% { transform: scale(2);  opacity: 0;  }
}

/* ── Trending post row ──────────────────────────────────────────────── */
.lu-trending-item {
    display: flex;
    gap: .875rem;
    padding: .75rem .875rem;
    border-radius: .75rem;
    transition: background-color .14s ease;
    cursor: pointer;
}
.lu-trending-item:hover { background: var(--lu-hover-bg); }
.lu-trending-item .type-chip {
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .15rem .42rem;
    border-radius: 9999px;
}
.chip-posts    { background: rgba(99,102,241,.12);  color: #6366f1; }
.chip-tasks    { background: rgba(16,185,129,.12);  color: #10b981; }
.chip-projects { background: rgba(139,92,246,.12);  color: #8b5cf6; }
.chip-events   { background: rgba(245,158,11,.12);  color: #f59e0b; }
.chip-deals    { background: rgba(239,68,68,.12);   color: #ef4444; }
.chip-jobs     { background: rgba(6,182,212,.12);   color: #06b6d4; }

/* ── Mobile bottom nav ──────────────────────────────────────────────── */
.lu-mobile-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 50;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--lu-glass-bg);
    backdrop-filter: blur(24px) saturate(1.65);
    -webkit-backdrop-filter: blur(24px) saturate(1.65);
    border-top: 1px solid var(--lu-glass-border);
    box-shadow: 0 -4px 24px rgba(0,0,0,.08);
}
.lu-mobile-nav-inner {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: .375rem .5rem;
}
.lu-mobile-nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    padding: .5rem .625rem;
    border-radius: .75rem;
    font-size: .62rem;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    min-width: 3.25rem;
    position: relative;
    transition: color .14s ease, background-color .14s ease;
}
.lu-mobile-nav-btn .nav-icon { font-size: 1.1rem; transition: transform .14s ease; }
.lu-mobile-nav-btn:hover  { color: var(--lu-grad-start); }
.lu-mobile-nav-btn:hover .nav-icon { transform: translateY(-1px); }
.lu-mobile-nav-btn.active { color: var(--lu-grad-start); background: var(--lu-active-bg); }
.lu-mobile-nav-btn.active::after {
    content: '';
    position: absolute;
    bottom: .22rem;
    left: 50%; transform: translateX(-50%);
    width: .25rem; height: .25rem;
    border-radius: 50%;
    background: var(--lu-grad-start);
    box-shadow: 0 0 6px var(--lu-glow-sm);
}

/* ── Shimmer skeleton ───────────────────────────────────────────────── */
.lu-skeleton {
    border-radius: .5rem;
    background: linear-gradient(90deg,
        var(--bg-accent) 25%,
        var(--bg-secondary) 50%,
        var(--bg-accent) 75%);
    background-size: 200% 100%;
    animation: lu-shimmer 1.6s infinite linear;
}
@keyframes lu-shimmer {
    0%   { background-position:  200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Search results ─────────────────────────────────────────────────── */
.search-results {
    background: var(--lu-glass-bg) !important;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--lu-glass-border) !important;
    box-shadow: 0 20px 48px rgba(0,0,0,.14), 0 4px 12px rgba(0,0,0,.08) !important;
    border-radius: 1rem !important;
    animation: lu-dropdown-in .18s cubic-bezier(.22,1,.36,1) both;
}

/* ── Old sidebar active override ────────────────────────────────────── */
.linkupp-sidebar nav a.is-active {
    background-color: var(--lu-active-bg) !important;
    color: var(--lu-grad-start) !important;
}
.linkupp-sidebar nav a.is-active::before {
    background: linear-gradient(180deg, var(--lu-grad-start), var(--lu-grad-mid)) !important;
    box-shadow: 0 0 8px var(--lu-glow-sm) !important;
}