/*
 * ============================================================================
 * DEV CHAT - DESIGN SYSTEM STYLESHEET
 * ============================================================================
 *
 * This is the master stylesheet for Dev Chat. It implements a Grok-inspired
 * minimal dark theme with careful attention to visual hierarchy and usability.
 *
 * Asset Pipeline: Propshaft (no preprocessing)
 *
 *= require_self
 *= require custom
 *= require_tree .
 */

/* ============================================================================
 * DESIGN PHILOSOPHY
 * ============================================================================
 *
 * INSPIRATION: Grok AI by xAI (x.com/grok)
 * 
 * The Grok design language prioritizes:
 *   1. PURE BLACK backgrounds (#0d0d0d) - Not gray, actual black for OLED-friendly UI
 *   2. MINIMAL BORDERS - Subtle #262626 borders, only where structure is needed
 *   3. WHITE/GRAY TEXT HIERARCHY - Primary white, secondary gray, muted for hints
 *   4. ORANGE ACCENT (#f97316) - Used sparingly for CTAs and important actions
 *   5. PILL-SHAPED BUTTONS - Full border-radius for a modern, friendly feel
 *   6. SMALL TEXT - Compact UI with text-sm (0.875rem) as default
 *   7. NO HEAVY SHADOWS - Subtle or no shadows, borders define structure
 *   8. MINIMAL ANIMATIONS - Fast transitions (150-200ms), no bouncy effects
 *
 * COLOR USAGE GUIDELINES:
 * ┌─────────────────────────────────────────────────────────────────────────┐
 * │ Element                  │ Color                                        │
 * ├─────────────────────────────────────────────────────────────────────────┤
 * │ Page background          │ #0d0d0d (--color-bg-primary)                 │
 * │ Cards/containers         │ #0d0d0d with border-neutral-800              │
 * │ Elevated surfaces        │ #171717 (--color-bg-tertiary)                │
 * │ Hover states             │ #1a1a1a (--color-bg-hover)                   │
 * │ Primary text             │ #ffffff (--color-text-primary)               │
 * │ Secondary text           │ #a1a1a1 (--color-text-secondary)             │
 * │ Muted/hint text          │ #6b6b6b (--color-text-muted)                 │
 * │ Borders                  │ #262626 (--color-border)                     │
 * │ Primary accent (CTA)     │ #f97316 (--color-accent-primary)             │
 * │ Success                  │ #22c55e (--color-success)                    │
 * │ Warning                  │ #eab308 (--color-warning)                    │
 * │ Danger                   │ #ef4444 (--color-danger)                     │
 * │ Info                     │ #3b82f6 (--color-info)                       │
 * └─────────────────────────────────────────────────────────────────────────┘
 *
 * TYPOGRAPHY:
 *   - Font: System font stack (SF Pro, Segoe UI, Roboto)
 *   - Default size: 0.875rem (14px) - smaller than typical for dense UI
 *   - Headers: text-lg (18px) to text-3xl (30px)
 *   - Labels: text-xs (12px) to text-sm (14px)
 *   - Font weights: 400 (normal), 500 (medium), 600 (semibold), 700 (bold)
 *
 * SPACING:
 *   - Use Tailwind spacing scale (p-4 = 1rem, p-6 = 1.5rem, etc.)
 *   - Cards: p-4 to p-6 padding
 *   - Page margins: px-4 to px-8
 *   - Section gaps: space-y-6, gap-4 to gap-6
 *
 * COMPONENT PATTERNS:
 *   - Buttons: Pill-shaped (rounded-full), small padding, medium font weight
 *   - Cards: No shadow, single border, rounded-xl corners
 *   - Inputs: Dark background, subtle border, focus = brighter border
 *   - Tables: Minimal headers, subtle row hover
 *   - Badges: Small, pill-shaped, semi-transparent backgrounds
 *
 * ============================================================================
 */

/* ============================================================================
   SECTION: CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ============================================================================
   
   These CSS variables define the core design tokens used throughout the app.
   Use these variables instead of hardcoded colors to ensure consistency.
   
   TAILWIND EQUIVALENTS:
   - bg-[#0d0d0d] = var(--color-bg-primary)
   - text-neutral-400 ≈ var(--color-text-secondary)
   - text-neutral-500 ≈ var(--color-text-muted)
   - border-neutral-800 ≈ var(--color-border)
   - text-orange-500 ≈ var(--color-accent-primary)
   
   ============================================================================ */
:root {
  /* ─────────────────────────────────────────────────────────────────────────
     BACKGROUND COLORS
     
     The background system uses variations of near-black for depth:
     - primary: Main page background (pure black)
     - secondary: Same as primary (cards blend into background)
     - tertiary: Slightly lighter for elevated elements (table headers, nav)
     - hover: Visible but subtle hover state
     ───────────────────────────────────────────────────────────────────────── */
  --color-bg-primary: #0d0d0d;    /* Page background - near black */
  --color-bg-secondary: #0d0d0d;  /* Cards - same as page (use border to separate) */
  --color-bg-tertiary: #171717;   /* Elevated: table headers, dropdowns, nav */
  --color-bg-card: #0d0d0d;       /* Card background - same as page */
  --color-bg-input: #0a0a0a;      /* Form inputs - slightly darker than page */
  --color-bg-hover: #1a1a1a;      /* Hover state for rows, items */
  
  /* ─────────────────────────────────────────────────────────────────────────
     TEXT COLORS
     
     Four-level text hierarchy for visual importance:
     - primary: Main content, headings (white)
     - secondary: Supporting text, descriptions (light gray)
     - muted: Labels, hints, placeholders (medium gray)
     - subtle: Decorative, disabled states (dark gray)
     ───────────────────────────────────────────────────────────────────────── */
  --color-text-primary: #ffffff;    /* Headings, important text */
  --color-text-secondary: #a1a1a1;  /* Body text, descriptions */
  --color-text-muted: #6b6b6b;      /* Labels, placeholders, hints */
  --color-text-subtle: #404040;     /* Decorative, disabled */
  
  /* ─────────────────────────────────────────────────────────────────────────
     ACCENT COLORS
     
     Orange/coral accent inspired by Grok. Used sparingly for:
     - Primary CTAs (buttons)
     - Important links
     - Active states
     - Highlights
     ───────────────────────────────────────────────────────────────────────── */
  --color-accent-primary: #f97316;    /* Primary CTA, links (orange-500) */
  --color-accent-secondary: #fb923c;  /* Hover state (orange-400) */
  --color-accent-tertiary: #fdba74;   /* Light accent (orange-300) */
  
  /* ─────────────────────────────────────────────────────────────────────────
     SEMANTIC COLORS
     
     Standard semantic colors for status and feedback:
     ───────────────────────────────────────────────────────────────────────── */
  --color-success: #22c55e;  /* green-500 - verified, active, complete */
  --color-warning: #eab308;  /* yellow-500 - pending, caution */
  --color-danger: #ef4444;   /* red-500 - errors, destructive actions */
  --color-info: #3b82f6;     /* blue-500 - informational */
  
  /* ─────────────────────────────────────────────────────────────────────────
     BORDER COLORS
     
     Borders define structure in the absence of shadows:
     ───────────────────────────────────────────────────────────────────────── */
  --color-border: #262626;        /* Default border (neutral-800) */
  --color-border-subtle: #1f1f1f; /* Subtle dividers */
  --color-border-focus: #f97316;  /* Focus ring color (accent) */
  
  /* ─────────────────────────────────────────────────────────────────────────
     SHADOWS (Minimal)
     
     Shadows are used sparingly. Borders define most structure.
     ───────────────────────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
  
  /* ─────────────────────────────────────────────────────────────────────────
     TRANSITIONS
     
     Fast, subtle transitions. No bouncy or slow animations.
     ───────────────────────────────────────────────────────────────────────── */
  --transition-fast: 150ms ease;  /* Hover states, toggles */
  --transition-base: 200ms ease;  /* Most transitions */
  --transition-slow: 300ms ease;  /* Complex animations */
  
  /* ─────────────────────────────────────────────────────────────────────────
     BORDER RADIUS
     
     Consistent rounding throughout the UI:
     - sm: Small elements, checkboxes
     - md: Buttons (non-pill), small cards
     - lg: Medium cards
     - xl: Main cards, modals
     - 2xl: Large containers
     - full: Pills, avatars, badges
     ───────────────────────────────────────────────────────────────────────── */
  --radius-sm: 0.375rem;   /* 6px */
  --radius-md: 0.5rem;     /* 8px */
  --radius-lg: 0.75rem;    /* 12px */
  --radius-xl: 1rem;       /* 16px */
  --radius-2xl: 1.5rem;    /* 24px */
  --radius-full: 9999px;   /* Pills, circles */
}

/* ============================================
   Base Styles
   ============================================ */
.dark-theme {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================================
   SECTION: DECORATIVE BACKGROUNDS
   ============================================================================
   
   Subtle animated backgrounds for special pages (landing, etc.)
   These are purely decorative and should not interfere with content.
   
   ============================================================================ */

/* ─────────────────────────────────────────────────────────────────────────────
   Matrix Background
   
   Subtle falling "code" animation for the landing page hero.
   Very low opacity to avoid distraction.
   ───────────────────────────────────────────────────────────────────────────── */
.matrix-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
  background: #0d0d0d;
}

.matrix-rain {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.03; /* Very subtle - barely visible */
}

.matrix-column {
  position: absolute;
  top: -100%;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  color: var(--color-accent-primary);
  animation: matrix-fall linear infinite;
  opacity: 0.4;
}

@keyframes matrix-fall {
  0% {
    transform: translateY(-100%);
    opacity: 0.4;
  }
  100% {
    transform: translateY(100vh);
    opacity: 0.1;
  }
}

/* ============================================================================
   SECTION: CARD COMPONENTS
   ============================================================================
   
   Cards are the primary container for content. In the Grok style, cards:
   - Have the same background as the page (blend in)
   - Use borders to define structure (not shadows)
   - Have generous border-radius (1rem / 16px)
   - Have consistent padding (1.5rem / 24px)
   
   USAGE:
   - .tech-card: General purpose card (most common)
   - .glass-card: Alternative card style (rarely used)
   
   ============================================================================ */
.tech-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  transition: border-color var(--transition-base);
}

.tech-card:hover {
  border-color: var(--color-border); /* No change on hover by default */
}

.glass-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Glow Effects (Subtle)
   
   Light glow/highlight effects. Used sparingly for emphasis.
   ───────────────────────────────────────────────────────────────────────────── */
.glow-box {
  border: 1px solid var(--color-border);
  transition: border-color var(--transition-base);
}

.glow-box:hover {
  border-color: var(--color-accent-primary);
}

.glow-text {
  color: var(--color-accent-primary);
}

.glow-border {
  position: relative;
}

.glow-border::before {
  display: none; /* Glow disabled - too flashy for Grok style */
}

/* ============================================================================
   SECTION: BUTTONS
   ============================================================================
   
   Grok-style buttons are:
   - PILL-SHAPED: Full border-radius (rounded-full)
   - MINIMAL: No shadows, simple backgrounds
   - COMPACT: Smaller padding (0.625rem vertical, 1.25rem horizontal)
   - FAST: Quick transitions (150ms)
   
   BUTTON HIERARCHY:
   1. .btn-primary   - Main CTA, white background, dark text (most prominent)
   2. .btn-accent    - Orange/accent actions (important but secondary)
   3. .btn-secondary - Outlined, for secondary actions
   4. .btn-ghost     - Text-only, for tertiary actions
   
   USAGE IN VIEWS:
   - Primary action: "Save", "Submit", "Create" → btn-primary
   - Accent action: "Start Call", "Match Now" → btn-accent  
   - Secondary: "Cancel", "Edit" → btn-secondary
   - Tertiary: "Back", "Skip" → btn-ghost
   
   ============================================================================ */
.btn-primary {
  background: var(--color-text-primary);   /* White background */
  color: var(--color-bg-primary);          /* Black text */
  font-weight: 500;
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-full);       /* Pill shape */
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: 0.875rem;
}

.btn-primary:hover {
  background: var(--color-text-secondary); /* Slightly gray on hover */
  transform: none;                         /* No bounce/scale */
}

.btn-secondary {
  background: transparent;
  color: var(--color-text-primary);
  font-weight: 500;
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: 0.875rem;
}

.btn-secondary:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-text-muted);
}

.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: 0.875rem;
}

.btn-ghost:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

/* Accent button (for primary actions) */
.btn-accent {
  background: var(--color-accent-primary);  /* Orange background */
  color: white;
  font-weight: 500;
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: 0.875rem;
}

.btn-accent:hover {
  background: var(--color-accent-secondary);
}

/* ============================================================================
   SECTION: FILTER CHIPS
   ============================================================================
   
   Interactive chips for filtering content (tags, categories, etc.)
   Used with hidden checkboxes/radio buttons for accessible selection.
   
   STRUCTURE:
   <label class="filter-chip">
     <input type="checkbox" class="sr-only">
     <span class="chip-content">Label</span>
   </label>
   
   ============================================================================ */
.filter-chip {
  display: inline-flex;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.filter-chip .chip-content {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  font-weight: 400;
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  transition: all var(--transition-fast);
}

.filter-chip:hover .chip-content {
  background: var(--color-bg-hover);
  border-color: var(--color-text-muted);
  color: var(--color-text-primary);
}

.filter-chip.active .chip-content,
.filter-chip input:checked + .chip-content {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
  border-color: var(--color-text-primary);  /* White border when active */
}

/* ============================================================================
   SECTION: FORM ELEMENTS
   ============================================================================
   
   Dark theme form styling. Key characteristics:
   - DARK BACKGROUNDS: Inputs slightly darker than page (#0a0a0a)
   - SUBTLE BORDERS: #262626 default, #6b6b6b on focus
   - NO OUTLINE: Border brightens on focus, no ring
   - GENEROUS RADIUS: rounded-xl for inputs
   
   AVAILABLE CLASSES:
   - .input-dark: Text inputs, textareas
   - .checkbox-dark: Checkboxes with custom styling
   - .radio-dark: Radio buttons with custom styling
   
   ============================================================================ */
.input-dark {
  background-color: var(--color-bg-input);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 0.75rem 1rem;
  color: var(--color-text-primary);
  transition: all var(--transition-fast);
  font-size: 0.9375rem;
}

.input-dark::placeholder {
  color: var(--color-text-muted);
}

.input-dark:focus {
  outline: none;
  border-color: var(--color-text-muted);
  background-color: var(--color-bg-secondary);
}

.checkbox-dark {
  appearance: none;
  width: 1.125rem;
  height: 1.125rem;
  background: var(--color-bg-input);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
}

.checkbox-dark:checked {
  background: var(--color-text-primary);
  border-color: var(--color-text-primary);
}

.checkbox-dark:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--color-bg-primary);
  font-size: 0.625rem;
  font-weight: bold;
}

/* Radio buttons - Grok style */
.radio-dark {
  appearance: none;
  width: 1.125rem;
  height: 1.125rem;
  background: var(--color-bg-input);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
}

.radio-dark:checked {
  border-color: var(--color-text-primary);
  background: var(--color-bg-input);
}

.radio-dark:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.5rem;
  height: 0.5rem;
  background: var(--color-text-primary);
  border-radius: var(--radius-full);
}

/* ============================================
   Status Badges - Grok Style (subtle)
   ============================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 500;
}

.badge-success {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.badge-warning {
  background: rgba(234, 179, 8, 0.1);
  color: #eab308;
  border: 1px solid rgba(234, 179, 8, 0.2);
}

.badge-danger {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.badge-info {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.badge-neutral {
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}

/* ============================================
   Tags - Grok Style (minimal, no heavy colors)
   ============================================ */
.tech-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  transition: all var(--transition-fast);
}

.tech-tag:hover {
  border-color: var(--color-text-muted);
  color: var(--color-text-primary);
}

.tech-tag-language {
  background: var(--color-bg-tertiary);
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}

.tech-tag-level {
  background: var(--color-bg-tertiary);
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}

.tech-tag-technology {
  background: var(--color-bg-tertiary);
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}

.tech-tag-conference {
  background: var(--color-bg-tertiary);
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}

/* ============================================
   Animated Typing Effect
   ============================================ */
.typing-cursor {
  display: inline-block;
  width: 2px;
  height: 1.2em;
  background: var(--color-text-primary);
  margin-left: 2px;
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* ============================================
   Pulse Animation (for matchmaking)
   ============================================ */
.pulse-ring {
  position: relative;
}

.pulse-ring::before,
.pulse-ring::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--color-text-muted);
  animation: pulse-expand 2s ease-out infinite;
}

.pulse-ring::after {
  animation-delay: 1s;
}

@keyframes pulse-expand {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* Searching animation */
.searching-dots::after {
  content: '';
  animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
  0%, 20% {
    content: '';
  }
  40% {
    content: '.';
  }
  60% {
    content: '..';
  }
  80%, 100% {
    content: '...';
  }
}

/* ============================================
   Code/Terminal Styling - Grok Style
   ============================================ */
.terminal-window {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
}

.terminal-header {
  background: var(--color-bg-tertiary);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid var(--color-border);
}

.terminal-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.terminal-dot-red {
  background: #ff5f56;
}

.terminal-dot-yellow {
  background: #ffbd2e;
}

.terminal-dot-green {
  background: #27ca40;
}

.terminal-content {
  padding: 1rem;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  line-height: 1.6;
}

.terminal-prompt {
  color: var(--color-success);
}

.terminal-command {
  color: var(--color-text-primary);
}

/* ============================================
   Navigation - Grok Style
   ============================================ */
.nav-dark {
  background: var(--color-bg-primary);
  border-bottom: 1px solid var(--color-border);
}

.nav-link {
  color: var(--color-text-secondary);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.nav-link:hover {
  color: var(--color-text-primary);
}

.nav-link.active {
  color: var(--color-text-primary);
}

/* Sidebar navigation */
.sidebar-nav {
  background: var(--color-bg-primary);
  border-right: 1px solid var(--color-border);
  min-height: 100vh;
}

.sidebar-nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  color: var(--color-text-secondary);
  border-radius: var(--radius-md);
  margin: 0.25rem 0.5rem;
  transition: all var(--transition-fast);
  font-size: 0.875rem;
}

.sidebar-nav-link:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

.sidebar-nav-link.active {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

/* ============================================
   Data Tables - Grok Style
   ============================================ */
.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th {
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  font-weight: 500;
  font-size: 0.8125rem;
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.data-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-primary);
  font-size: 0.875rem;
}

.data-table tbody tr {
  transition: background var(--transition-fast);
}

.data-table tbody tr:hover {
  background: var(--color-bg-hover);
}

/* ============================================
   Avatar - Grok Style
   ============================================ */
.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  font-weight: 500;
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
}

.avatar-sm {
  width: 2rem;
  height: 2rem;
  font-size: 0.75rem;
}

.avatar-md {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 0.875rem;
}

.avatar-lg {
  width: 3.5rem;
  height: 3.5rem;
  font-size: 1.125rem;
}

.avatar-xl {
  width: 5rem;
  height: 5rem;
  font-size: 1.5rem;
}

.avatar-gradient {
  background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-secondary));
  color: white;
  border: none;
}

/* ============================================
   Rating Stars
   ============================================ */
.rating-stars {
  display: flex;
  gap: 0.125rem;
  color: var(--color-warning);
}

.rating-star-empty {
  color: var(--color-text-muted);
}

/* ============================================
   Stats Cards - Grok Style
   ============================================ */
.stat-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 1.25rem;
}

.stat-value {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.2;
}

.stat-label {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  margin-top: 0.25rem;
}

.stat-trend {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  margin-top: 0.5rem;
}

.stat-trend-up {
  color: var(--color-success);
}

.stat-trend-down {
  color: var(--color-danger);
}

/* ============================================
   Flash Messages - Grok Style
   ============================================ */
.flash-message {
  padding: 0.875rem 1.25rem;
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  animation: flash-slide-in 0.2s ease;
}

@keyframes flash-slide-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.flash-success {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
  color: var(--color-success);
}

.flash-error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: var(--color-danger);
}

.flash-warning {
  background: rgba(234, 179, 8, 0.1);
  border: 1px solid rgba(234, 179, 8, 0.2);
  color: var(--color-warning);
}

.flash-info {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  color: var(--color-info);
}

/* ============================================
   Floating Particles (Landing decoration) - subtle
   ============================================ */
.particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.3;
}

.particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: var(--color-text-muted);
  border-radius: 50%;
  opacity: 0.3;
  animation: float 8s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0) translateX(0);
  }
  25% {
    transform: translateY(-15px) translateX(8px);
  }
  50% {
    transform: translateY(-8px) translateX(-8px);
  }
  75% {
    transform: translateY(-20px) translateX(4px);
  }
}

/* ============================================
   Loading Spinner - Grok Style
   ============================================ */
.spinner {
  width: 32px;
  height: 32px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-text-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ============================================
   Hexagon Grid Background - more subtle
   ============================================ */
.hex-grid {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23262626' fill-opacity='0.3'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* ============================================
   Video Call Styles - Grok Style
   ============================================ */
.call-controls {
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(8px);
}

.call-btn {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  border: none;
  cursor: pointer;
}

.call-btn-default {
  background: var(--color-bg-tertiary);
  color: white;
  border: 1px solid var(--color-border);
}

.call-btn-default:hover {
  background: var(--color-bg-hover);
}

.call-btn-danger {
  background: var(--color-danger);
  color: white;
}

.call-btn-danger:hover {
  background: #dc2626;
}

.call-btn-active {
  background: var(--color-text-primary);
  color: var(--color-bg-primary);
}

/* ============================================
   Responsive Utilities
   ============================================ */
@media (max-width: 768px) {
  .stat-value {
    font-size: 1.25rem;
  }
  
  .terminal-content {
    font-size: 0.75rem;
  }
  
  .hide-mobile {
    display: none;
  }
}

/* ============================================
   Animations for Feature Cards - subtle
   ============================================ */
.feature-card {
  transition: all var(--transition-base);
}

.feature-card:hover {
  transform: translateY(-4px);
}

.feature-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  display: inline-block;
}

/* Gradient text - using accent color */
.gradient-text {
  background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Code highlight */
.code-highlight {
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  background: var(--color-bg-tertiary);
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm);
  font-size: 0.875em;
  color: var(--color-text-primary);
}

/* ============================================
   Grok-specific additions
   ============================================ */

/* Search input like Grok */
.search-input {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: 0.875rem 1.25rem;
  color: var(--color-text-primary);
  width: 100%;
  font-size: 1rem;
  transition: all var(--transition-fast);
}

.search-input::placeholder {
  color: var(--color-text-muted);
}

.search-input:focus {
  outline: none;
  border-color: var(--color-text-muted);
}

/* Dropdown menu like Grok */
.dropdown-menu {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 0.5rem;
  box-shadow: var(--shadow-lg);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.dropdown-item:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

.dropdown-item.active {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

/* Icon buttons like Grok */
.icon-btn {
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-secondary);
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.icon-btn:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

/* Project cards like Grok */
.project-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 1rem 1.25rem;
  transition: all var(--transition-fast);
}

.project-card:hover {
  border-color: var(--color-text-muted);
}

/* Dividers */
.divider {
  height: 1px;
  background: var(--color-border);
  margin: 1rem 0;
}

/* Section headers like Grok */
.section-header {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

/* Subtle link style */
.link-subtle {
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
}

.link-subtle:hover {
  color: var(--color-text-primary);
}

/* Accent link */
.link-accent {
  color: var(--color-accent-primary);
  transition: color var(--transition-fast);
}

.link-accent:hover {
  color: var(--color-accent-secondary);
}

/* ============================================================================
 * ============================================================================
 * 
 * ADMIN PANEL DESIGN SYSTEM
 * 
 * ============================================================================
 * ============================================================================
 *
 * This section defines styles specific to the admin panel (app/views/admin/*).
 * The admin panel follows the same Grok-inspired dark theme but with additional
 * structure and components for data management.
 *
 * ============================================================================
 * ADMIN DESIGN PRINCIPLES
 * ============================================================================
 *
 * 1. CONSISTENCY: All admin pages should share the same visual structure
 * 2. INFORMATION DENSITY: More compact than user-facing pages
 * 3. CLEAR HIERARCHY: Page header → Filters/Tabs → Content → Pagination
 * 4. ACTIONABLE: Quick access to common actions (view, edit, delete)
 * 5. SCANNABLE: Tables and lists with clear visual separation
 *
 * ============================================================================
 * ADMIN PAGE STRUCTURE (Required HTML Layout)
 * ============================================================================
 *
 * Every admin page MUST follow this structure for consistency:
 *
 * ┌─────────────────────────────────────────────────────────────────────────┐
 * │ .admin-page-header                                                       │
 * │   ├── .admin-page-title-group (h1 + subtitle)                           │
 * │   └── .admin-page-actions (buttons: New, Export, etc.)                  │
 * ├─────────────────────────────────────────────────────────────────────────┤
 * │ .admin-filters (optional - search, filter dropdowns)                    │
 * ├─────────────────────────────────────────────────────────────────────────┤
 * │ .admin-tabs (optional - status tabs for filtering)                      │
 * ├─────────────────────────────────────────────────────────────────────────┤
 * │ .admin-content                                                          │
 * │   ├── .admin-table-card (for list views)                               │
 * │   │     └── table.admin-table                                           │
 * │   └── .admin-detail-grid (for show/edit views)                         │
 * │         ├── .admin-main-column                                          │
 * │         └── .admin-sidebar-column                                       │
 * ├─────────────────────────────────────────────────────────────────────────┤
 * │ .admin-pagination (optional - for paginated lists)                      │
 * └─────────────────────────────────────────────────────────────────────────┘
 *
 * ============================================================================
 * ADMIN COLOR PALETTE
 * ============================================================================
 *
 * The admin panel uses the same base colors as the main app, with these
 * specific applications:
 *
 * BACKGROUNDS:
 *   Page background:     bg-[#0d0d0d] or class="dark-theme"
 *   Cards:               bg-[#0d0d0d] border border-neutral-800 rounded-xl
 *   Table headers:       bg-neutral-900/50
 *   Table row hover:     hover:bg-neutral-800/50
 *   Elevated dropdowns:  bg-neutral-900 border border-neutral-800
 *
 * TEXT:
 *   Page title:          text-white text-2xl font-semibold
 *   Subtitle:            text-neutral-400 text-sm
 *   Table headers:       text-neutral-500 text-xs font-medium uppercase
 *   Table content:       text-neutral-300 text-sm
 *   Muted/hints:         text-neutral-500 text-xs
 *
 * LINKS:
 *   Default:             text-neutral-400 hover:text-white
 *   Action links:        text-orange-500 hover:text-orange-400
 *   Danger links:        text-red-500 hover:text-red-400
 *
 * BORDERS:
 *   Default:             border-neutral-800
 *   Subtle dividers:     border-neutral-800/50
 *   Focus states:        border-neutral-600 (brighter)
 *
 * ============================================================================
 * ADMIN COMPONENTS REFERENCE
 * ============================================================================
 *
 * 1. PAGE HEADER COMPONENT
 *    Location: Top of every admin page
 *    Classes: admin-page-header, admin-page-title, admin-page-subtitle
 *
 * 2. FILTER BAR COMPONENT
 *    Location: Below page header (list pages only)
 *    Classes: admin-filters, admin-filter-input, admin-filter-select
 *
 * 3. TAB NAVIGATION COMPONENT
 *    Location: Below filters (pages with status-based filtering)
 *    Classes: admin-tabs, admin-tab, admin-tab--active
 *
 * 4. DATA TABLE COMPONENT
 *    Location: Main content area (list pages)
 *    Classes: admin-table-card, admin-table, admin-table-empty
 *
 * 5. DETAIL CARD COMPONENT
 *    Location: Main content area (show/edit pages)
 *    Classes: admin-card, admin-card-header, admin-card-body
 *
 * 6. STATS GRID COMPONENT
 *    Location: Dashboard page
 *    Classes: admin-stats-grid, admin-stat-card
 *
 * 7. ACTION BUTTONS
 *    Classes: admin-btn, admin-btn--primary, admin-btn--danger, admin-btn--ghost
 *
 * 8. STATUS BADGES
 *    Classes: admin-badge, admin-badge--success, admin-badge--warning, etc.
 *
 * ============================================================================
 * RECOMMENDED PARTIALS STRUCTURE
 * ============================================================================
 *
 * To keep admin views DRY, extract these reusable partials:
 *
 * app/views/admin/shared/
 * ├── _page_header.html.erb      # Page title + actions
 * │     locals: title, subtitle, actions (optional)
 * │
 * ├── _filters.html.erb          # Search + filter form
 * │     locals: search_path, filters (array of filter configs)
 * │
 * ├── _tabs.html.erb             # Status tab navigation
 * │     locals: tabs, current_tab, base_path
 * │
 * ├── _table.html.erb            # Data table wrapper
 * │     locals: columns, records, empty_message
 * │
 * ├── _pagination.html.erb       # Pagination links
 * │     locals: records (pagy or will_paginate)
 * │
 * ├── _card.html.erb             # Detail card wrapper
 * │     locals: title, icon (optional)
 * │
 * ├── _stats_card.html.erb       # Single stat display
 * │     locals: label, value, trend, color
 * │
 * ├── _back_link.html.erb        # Back navigation
 * │     locals: path, text
 * │
 * └── _empty_state.html.erb      # Empty table/list state
 *       locals: message, icon
 *
 * ============================================================================
 * EXAMPLE: INDEX PAGE STRUCTURE
 * ============================================================================
 *
 * <div class="admin-page">
 *   <!-- Page Header -->
 *   <%= render "admin/shared/page_header", 
 *         title: "Users", 
 *         subtitle: "Manage user accounts",
 *         actions: [
 *           { label: "Export CSV", path: export_admin_users_path, style: :secondary }
 *         ] %>
 *
 *   <!-- Filters -->
 *   <%= render "admin/shared/filters", 
 *         search_path: admin_users_path,
 *         search_placeholder: "Search by name or email...",
 *         filters: [
 *           { name: :status, options: User.verification_statuses.keys }
 *         ] %>
 *
 *   <!-- Tabs (optional) -->
 *   <%= render "admin/shared/tabs",
 *         tabs: [
 *           { key: nil, label: "All", count: @counts[:all] },
 *           { key: "pending", label: "Pending", count: @counts[:pending] },
 *           { key: "verified", label: "Verified", count: @counts[:verified] }
 *         ],
 *         current_tab: params[:status],
 *         base_path: admin_users_path %>
 *
 *   <!-- Content -->
 *   <div class="admin-table-card">
 *     <table class="admin-table">
 *       <thead>
 *         <tr>
 *           <th>Name</th>
 *           <th>Email</th>
 *           <th>Status</th>
 *           <th class="text-right">Actions</th>
 *         </tr>
 *       </thead>
 *       <tbody>
 *         <% @users.each do |user| %>
 *           <tr>
 *             <td class="font-medium text-white"><%= user.name %></td>
 *             <td class="text-neutral-400"><%= user.email %></td>
 *             <td><%= render "admin/shared/badge", status: user.verification_status %></td>
 *             <td class="text-right">
 *               <%= link_to "View", admin_user_path(user), class: "admin-link" %>
 *             </td>
 *           </tr>
 *         <% end %>
 *       </tbody>
 *     </table>
 *     <% if @users.empty? %>
 *       <%= render "admin/shared/empty_state", message: "No users found" %>
 *     <% end %>
 *   </div>
 *
 *   <%= render "admin/shared/pagination", records: @users %>
 * </div>
 *
 * ============================================================================
 * EXAMPLE: SHOW PAGE STRUCTURE
 * ============================================================================
 *
 * <div class="admin-page">
 *   <%= render "admin/shared/page_header",
 *         title: @user.name,
 *         subtitle: @user.email,
 *         back_link: { path: admin_users_path, text: "Back to Users" },
 *         actions: [
 *           { label: "Edit", path: edit_admin_user_path(@user), style: :secondary }
 *         ] %>
 *
 *   <div class="admin-detail-grid">
 *     <!-- Main Column (2/3 width on desktop) -->
 *     <div class="admin-main-column">
 *       <%= render "admin/shared/card", title: "Status & Actions", icon: "⚡" do %>
 *         <!-- Card content -->
 *       <% end %>
 *
 *       <%= render "admin/shared/card", title: "Social Connections", icon: "🔗" do %>
 *         <!-- Card content -->
 *       <% end %>
 *     </div>
 *
 *     <!-- Sidebar (1/3 width on desktop) -->
 *     <div class="admin-sidebar-column">
 *       <%= render "admin/shared/card", title: "Stats", icon: "📊" do %>
 *         <!-- Stats list -->
 *       <% end %>
 *     </div>
 *   </div>
 * </div>
 *
 * ============================================================================
 */

/* ─────────────────────────────────────────────────────────────────────────────
   ADMIN: Page Container
   
   Wrapper for all admin pages. Sets consistent padding and max-width.
   ───────────────────────────────────────────────────────────────────────────── */
.admin-page {
  padding: 1.5rem;
  max-width: 1400px;
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .admin-page {
    padding: 2rem;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   ADMIN: Navigation Active State
   
   Active state for sidebar navigation links. Uses accent color.
   ───────────────────────────────────────────────────────────────────────────── */
.admin-nav-active {
  background-color: rgba(251, 146, 60, 0.15); /* orange-400/15 */
  border: 1px solid rgba(251, 146, 60, 0.3);  /* orange-400/30 */
  color: var(--color-accent);
}

.admin-nav-active:hover {
  background-color: rgba(251, 146, 60, 0.2);
}

/* ─────────────────────────────────────────────────────────────────────────────
   ADMIN: Page Header
   
   Consistent header with title, subtitle, and action buttons.
   Used on every admin page.
   ───────────────────────────────────────────────────────────────────────────── */
.admin-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.admin-page-title-group {
  flex: 1;
  min-width: 200px;
}

.admin-page-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.admin-page-title-icon {
  font-size: 1.25rem;
}

.admin-page-subtitle {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin-top: 0.25rem;
}

.admin-page-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ADMIN: Back Link
   
   Navigation back to list pages from detail views.
   ───────────────────────────────────────────────────────────────────────────── */
.admin-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
}

.admin-back-link:hover {
  color: var(--color-text-primary);
}

.admin-back-link svg {
  width: 1rem;
  height: 1rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ADMIN: Filter Bar
   
   Search and filter controls. Sits below page header on list pages.
   ───────────────────────────────────────────────────────────────────────────── */
.admin-filters {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.admin-filters-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.admin-filter-input {
  flex: 1;
  min-width: 200px;
  background: var(--color-bg-input);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 0.625rem 1rem;
  color: var(--color-text-primary);
  font-size: 0.875rem;
  transition: border-color var(--transition-fast);
}

.admin-filter-input::placeholder {
  color: var(--color-text-muted);
}

.admin-filter-input:focus {
  outline: none;
  border-color: var(--color-text-muted);
}

.admin-filter-select {
  background: var(--color-bg-input);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 0.625rem 2rem 0.625rem 1rem;
  color: var(--color-text-primary);
  font-size: 0.875rem;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b6b6b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  transition: border-color var(--transition-fast);
}

.admin-filter-select:focus {
  outline: none;
  border-color: var(--color-text-muted);
}

/* ─────────────────────────────────────────────────────────────────────────────
   ADMIN: Tab Navigation
   
   Status-based tab filtering (All, Pending, Verified, etc.)
   ───────────────────────────────────────────────────────────────────────────── */
.admin-tabs {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.admin-tabs-nav {
  display: flex;
  border-bottom: 1px solid var(--color-border);
}

.admin-tab {
  flex: 1;
  padding: 0.75rem 1rem;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.admin-tab:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-hover);
}

.admin-tab--active {
  color: var(--color-accent-primary);
  border-bottom-color: var(--color-accent-primary);
  background: rgba(249, 115, 22, 0.1);
}

.admin-tab-count {
  margin-left: 0.25rem;
  opacity: 0.7;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ADMIN: Table Card
   
   Wrapper card for data tables with consistent styling.
   ───────────────────────────────────────────────────────────────────────────── */
.admin-table-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ADMIN: Data Table
   
   Consistent table styling for all admin list views.
   ───────────────────────────────────────────────────────────────────────────── */
.admin-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-table th {
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.admin-table td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  vertical-align: middle;
}

.admin-table tbody tr {
  transition: background var(--transition-fast);
}

.admin-table tbody tr:hover {
  background: var(--color-bg-hover);
}

.admin-table tbody tr:last-child td {
  border-bottom: none;
}

/* Table cell variants */
.admin-table-cell--primary {
  color: var(--color-text-primary);
  font-weight: 500;
}

.admin-table-cell--muted {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ADMIN: Empty State
   
   Displayed when a table or list has no records.
   ───────────────────────────────────────────────────────────────────────────── */
.admin-empty-state {
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--color-text-muted);
}

.admin-empty-icon {
  font-size: 2rem;
  margin-bottom: 0.75rem;
  opacity: 0.5;
}

.admin-empty-message {
  font-size: 0.875rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ADMIN: Detail Grid
   
   Two-column layout for show/edit pages (main content + sidebar).
   ───────────────────────────────────────────────────────────────────────────── */
.admin-detail-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .admin-detail-grid {
    grid-template-columns: 2fr 1fr;
  }
}

.admin-main-column {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.admin-sidebar-column {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ADMIN: Card Component
   
   Content card with optional header. Used in detail views.
   ───────────────────────────────────────────────────────────────────────────── */
.admin-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.admin-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
}

.admin-card-icon {
  font-size: 1rem;
}

.admin-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.admin-card-body {
  padding: 1.25rem;
}

.admin-card-body--compact {
  padding: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ADMIN: Stats Grid
   
   Dashboard stats display in a responsive grid.
   ───────────────────────────────────────────────────────────────────────────── */
.admin-stats-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .admin-stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.admin-stat-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 1.25rem;
}

.admin-stat-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-bottom: 0.5rem;
}

.admin-stat-value {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.2;
}

.admin-stat-value--success { color: var(--color-success); }
.admin-stat-value--warning { color: var(--color-warning); }
.admin-stat-value--danger { color: var(--color-danger); }
.admin-stat-value--info { color: var(--color-info); }

.admin-stat-meta {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-top: 0.25rem;
}

.admin-stat-link {
  font-size: 0.8125rem;
  color: var(--color-accent-primary);
  margin-top: 0.25rem;
  display: inline-block;
  transition: color var(--transition-fast);
}

.admin-stat-link:hover {
  color: var(--color-accent-secondary);
}

/* ─────────────────────────────────────────────────────────────────────────────
   ADMIN: Buttons
   
   Consistent button styling for admin actions.
   ───────────────────────────────────────────────────────────────────────────── */
.admin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: none;
}

.admin-btn--primary {
  background: var(--color-text-primary);
  color: var(--color-bg-primary);
}

.admin-btn--primary:hover {
  background: var(--color-text-secondary);
}

.admin-btn--accent {
  background: var(--color-accent-primary);
  color: white;
}

.admin-btn--accent:hover {
  background: var(--color-accent-secondary);
}

.admin-btn--success {
  background: var(--color-success);
  color: white;
}

.admin-btn--success:hover {
  background: #16a34a;
}

.admin-btn--danger {
  background: var(--color-danger);
  color: white;
}

.admin-btn--danger:hover {
  background: #dc2626;
}

.admin-btn--secondary {
  background: transparent;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
}

.admin-btn--secondary:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-text-muted);
}

.admin-btn--ghost {
  background: transparent;
  color: var(--color-text-secondary);
}

.admin-btn--ghost:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

.admin-btn--sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ADMIN: Links
   
   Action links used in tables and cards.
   ───────────────────────────────────────────────────────────────────────────── */
.admin-link {
  font-size: 0.875rem;
  color: var(--color-accent-primary);
  transition: color var(--transition-fast);
}

.admin-link:hover {
  color: var(--color-accent-secondary);
}

.admin-link--danger {
  color: var(--color-danger);
}

.admin-link--danger:hover {
  color: #f87171;
}

.admin-link--muted {
  color: var(--color-text-secondary);
}

.admin-link--muted:hover {
  color: var(--color-text-primary);
}

/* ─────────────────────────────────────────────────────────────────────────────
   ADMIN: Badges
   
   Status badges for verification status, report status, etc.
   ───────────────────────────────────────────────────────────────────────────── */
.admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--radius-full);
  border: 1px solid;
}

.admin-badge--success {
  background: rgba(34, 197, 94, 0.1);
  color: var(--color-success);
  border-color: rgba(34, 197, 94, 0.2);
}

.admin-badge--warning {
  background: rgba(234, 179, 8, 0.1);
  color: var(--color-warning);
  border-color: rgba(234, 179, 8, 0.2);
}

.admin-badge--danger {
  background: rgba(239, 68, 68, 0.1);
  color: var(--color-danger);
  border-color: rgba(239, 68, 68, 0.2);
}

.admin-badge--info {
  background: rgba(59, 130, 246, 0.1);
  color: var(--color-info);
  border-color: rgba(59, 130, 246, 0.2);
}

.admin-badge--neutral {
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}

/* ─────────────────────────────────────────────────────────────────────────────
   ADMIN: List Component
   
   Divided list for displaying related items (social connections, conversations).
   ───────────────────────────────────────────────────────────────────────────── */
.admin-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.admin-list-item {
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition-fast);
}

.admin-list-item:last-child {
  border-bottom: none;
}

.admin-list-item:hover {
  background: var(--color-bg-hover);
}

.admin-list-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.admin-list-item-primary {
  font-weight: 500;
  color: var(--color-text-primary);
  font-size: 0.875rem;
}

.admin-list-item-secondary {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
}

.admin-list-item-meta {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ADMIN: Definition List
   
   Key-value display for stats and metadata.
   ───────────────────────────────────────────────────────────────────────────── */
.admin-dl {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.admin-dl-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.admin-dl-label {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
}

.admin-dl-value {
  color: var(--color-text-primary);
  font-weight: 500;
  font-size: 0.875rem;
}

.admin-dl-value--success { color: var(--color-success); }
.admin-dl-value--warning { color: var(--color-warning); }
.admin-dl-value--danger { color: var(--color-danger); }

/* ─────────────────────────────────────────────────────────────────────────────
   ADMIN: Form Elements
   
   Consistent form styling for edit pages.
   ───────────────────────────────────────────────────────────────────────────── */
.admin-form-group {
  margin-bottom: 1rem;
}

.admin-form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-bottom: 0.5rem;
}

.admin-form-input {
  width: 100%;
  background: var(--color-bg-input);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 0.625rem 1rem;
  color: var(--color-text-primary);
  font-size: 0.875rem;
  transition: border-color var(--transition-fast);
}

.admin-form-input:focus {
  outline: none;
  border-color: var(--color-text-muted);
}

.admin-form-textarea {
  width: 100%;
  background: var(--color-bg-input);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 0.625rem 1rem;
  color: var(--color-text-primary);
  font-size: 0.875rem;
  resize: vertical;
  min-height: 100px;
  transition: border-color var(--transition-fast);
}

.admin-form-textarea:focus {
  outline: none;
  border-color: var(--color-text-muted);
}

.admin-form-select {
  width: 100%;
  background: var(--color-bg-input);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 0.625rem 2rem 0.625rem 1rem;
  color: var(--color-text-primary);
  font-size: 0.875rem;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b6b6b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  transition: border-color var(--transition-fast);
}

.admin-form-select:focus {
  outline: none;
  border-color: var(--color-text-muted);
}

.admin-form-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

/* ─────────────────────────────────────────────────────────────────────────────
   ADMIN: Pagination
   
   Page navigation for list views.
   ───────────────────────────────────────────────────────────────────────────── */
.admin-pagination {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  margin-top: 1.5rem;
}

.admin-pagination-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.75rem;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.admin-pagination-link:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
  border-color: var(--color-text-muted);
}

.admin-pagination-link--active {
  background: var(--color-text-primary);
  color: var(--color-bg-primary);
  border-color: var(--color-text-primary);
}

.admin-pagination-link--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ADMIN: Divider
   
   Horizontal rule for separating content sections.
   ───────────────────────────────────────────────────────────────────────────── */
.admin-divider {
  height: 1px;
  background: var(--color-border);
  margin: 1.5rem 0;
  border: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ADMIN: Section Header
   
   Subsection titles within cards.
   ───────────────────────────────────────────────────────────────────────────── */
.admin-section-header {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-bottom: 0.75rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ADMIN: Alert/Notice
   
   Contextual messages and warnings.
   ───────────────────────────────────────────────────────────────────────────── */
.admin-alert {
  padding: 1rem 1.25rem;
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.admin-alert--info {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  color: var(--color-info);
}

.admin-alert--warning {
  background: rgba(234, 179, 8, 0.1);
  border: 1px solid rgba(234, 179, 8, 0.2);
  color: var(--color-warning);
}

.admin-alert--success {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
  color: var(--color-success);
}

.admin-alert--danger {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: var(--color-danger);
}

.admin-alert-icon {
  flex-shrink: 0;
  font-size: 1.25rem;
}

.admin-alert-content {
  flex: 1;
}

/* ============================================================================
 * END ADMIN PANEL DESIGN SYSTEM
 * ============================================================================ */

/* ============================================================================
 * ADS SIDEBAR & AD DISPLAY SYSTEM
 * ============================================================================
 *
 * Styles for the self-managed advertising system including:
 * - Left sidebar for ad placements (outside main layout)
 * - Flexible ad slot containers that resize to fit
 * - No scrollbar - content fits within viewport
 * - Responsive behavior
 * ============================================================================ */

/* ─────────────────────────────────────────────────────────────────────────────
   Outer Layout Container

   Top-level flex container that puts sidebar on left and all other content
   (header + main) on the right. This layout spans the full viewport height.
   ───────────────────────────────────────────────────────────────────────────── */
.outer-layout {
  display: flex;
  min-height: 100vh;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Right Content Area

   Contains the header and main content. Takes remaining space after sidebar.
   ───────────────────────────────────────────────────────────────────────────── */
.right-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-x: hidden;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Ads Sidebar (Promo Rail)

   Fixed-width left sidebar containing ad placements. Full viewport height,
   no scrollbar. Ads maintain 300x250 aspect ratio (1.2:1).
   ───────────────────────────────────────────────────────────────────────────── */
.promo-rail {
  width: 250px;
  flex-shrink: 0;
  padding: 0.5rem;
  border-right: 1px solid var(--color-border);
  background: linear-gradient(180deg, var(--color-bg-secondary) 0%, var(--color-bg-primary) 100%);
  height: 100vh;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.promo-rail-header {
  padding: 0.25rem 0.5rem 0.5rem;
  text-align: center;
  flex-shrink: 0;
}

.promo-rail-inner {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}

.promo-rail-inner::-webkit-scrollbar {
  display: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Ad Container

   Individual ad slot wrapper. Uses aspect-ratio to maintain 300x250 proportions.
   ───────────────────────────────────────────────────────────────────────────── */
.promo-container {
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-lg);
  padding: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  aspect-ratio: 300 / 250;
  width: 100%;
  overflow: hidden;
}

.promo-slot {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.promo-slot a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.promo-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Ad Placeholder

   Shown when no active ad is available for a slot. Maintains aspect ratio.
   ───────────────────────────────────────────────────────────────────────────── */
.promo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
}

.promo-placeholder button {
  min-height: auto !important;
  height: 100%;
  padding: 0.5rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Main Content Area

   Takes remaining vertical space in the right content area.
   ───────────────────────────────────────────────────────────────────────────── */
.app-main {
  flex: 1;
  padding: 1.5rem 2rem;
  overflow-x: hidden;
  max-width: 100%;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Mobile Ads Banner

   Shows horizontal mini banners on smaller screens at the top.
   Uses 300x250 aspect ratio scaled down for mobile.
   ───────────────────────────────────────────────────────────────────────────── */
.mobile-promo-banner {
  display: none;
  width: 100%;
  padding: 0.5rem;
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
  scrollbar-width: none;
}

.mobile-promo-banner::-webkit-scrollbar {
  display: none;
}

.mobile-promo-banner-inner {
  display: flex;
  gap: 0.5rem;
  min-width: min-content;
  padding-right: 0.5rem;
}

.mobile-promo-slot {
  flex-shrink: 0;
  width: 120px;
  aspect-ratio: 300 / 250;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.mobile-promo-slot .promo-slot {
  width: 100%;
  height: 100%;
}

.mobile-promo-slot .promo-slot a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-promo-slot .promo-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mobile-promo-slot .promo-placeholder {
  width: 100%;
  height: 100%;
}

.mobile-promo-slot .promo-placeholder button {
  padding: 0.25rem;
}

.mobile-promo-slot .promo-placeholder .w-10 {
  width: 1.5rem;
  height: 1.5rem;
  margin-bottom: 0.25rem;
}

.mobile-promo-slot .promo-placeholder .w-10 svg {
  width: 0.875rem;
  height: 0.875rem;
}

.mobile-promo-slot .promo-placeholder span {
  font-size: 0.5rem;
}

.mobile-promo-slot .promo-placeholder span:last-child {
  display: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Responsive Behavior

   - Large screens (≥1280px): Show all 4 ads in sidebar (200px)
   - Medium screens (1024-1279px): Show 3 ads
   - Tablet (768-1023px): Show 2 ads
   - Mobile (<768px): Hide sidebar, show mini banners at top
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1279px) {
  .app-main {
    padding: 1.25rem 1.5rem;
  }
}

@media (max-width: 1023px) {
  .promo-rail {
    width: 180px;
  }

  .app-main {
    padding: 1rem 1.25rem;
  }
}

@media (max-width: 767px) {
  .outer-layout {
    flex-direction: column;
  }

  .promo-rail {
    display: none;
  }

  .mobile-promo-banner {
    display: block;
  }

  .app-main {
    padding: 1rem;
  }

  .right-content {
    width: 100%;
  }
}

/* ============================================================================
 * END ADS SIDEBAR SYSTEM
 * ============================================================================ */