/**
 * B.E.A.M CONNECT - UNIFIED MOBILE SHELL
 * 
 * Single source of truth for CONNECT mobile experience.
 * All CONNECT routes (Feed, Intelligence, Signal, Network) inherit this shell.
 * 
 * DESIGN PRINCIPLES:
 * - Dark-first premium experience
 * - Cinematic editorial feel
 * - Structured intelligence interface
 * - Mobile-native patterns
 * - Consistent across all routes
 */

/* ========================================
   SHELL FOUNDATION
   ======================================== */

body {
  /* Ensure obsidian background across all CONNECT routes */
  background: var(--color-obsidian) !important;
  color: var(--color-text-primary);
  min-height: 100vh;
}

/* Main content container - consistent padding/spacing */
main.container {
  padding-top: calc(var(--mobile-header-height, 72px) + var(--spacing-md));
  padding-bottom: calc(var(--bottom-nav-height, 64px) + var(--spacing-lg));
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
}

/* Section spacing rhythm */
.section {
  margin-bottom: var(--spacing-2xl, 3rem);
}

.section:last-child {
  margin-bottom: 0;
}

/* ========================================
   HEADER STANDARDIZATION
   ======================================== */

.mobile-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(12, 12, 12, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--color-border);
  padding: var(--spacing-md);
  padding-top: calc(var(--safe-area-top, 0px) + var(--spacing-md));
}

.mobile-header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.mobile-logo {
  font-family: var(--font-serif, 'Playfair Display');
  font-size: var(--font-size-2xl, 1.5rem);
  font-weight: 900;
  color: var(--color-text-primary);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
  letter-spacing: -0.02em;
  transition: opacity 0.3s ease;
}

.logo-base {
  color: var(--color-text-primary);
}

.logo-module,
.mobile-logo-connect {
  color: var(--color-gold);
  font-weight: 600;
  transition: all 0.3s ease;
}

.mobile-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs, 0.5rem);
}

/* ========================================
   CARD SYSTEM - UNIFIED SURFACES
   ======================================== */

/* Base card component - all CONNECT cards inherit this */
.card {
  background: var(--color-elevated);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: var(--spacing-md);
  transition: all 0.2s ease;
}

.card:active {
  transform: scale(0.98);
}

@media (min-width: 1024px) {
  .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    border-color: var(--color-border-subtle);
  }
}

/* Specific card variants */
.post-card,
.signal-card,
.profile-card,
.job-card,
.opportunity-card {
  background: var(--color-elevated);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  transition: all 0.2s ease;
  display: block;
  text-decoration: none;
  color: inherit;
}

.post-card:active,
.signal-card:active,
.profile-card:active,
.job-card:active,
.opportunity-card:active {
  transform: scale(0.98);
}

/* ========================================
   SECTION HEADERS - CONSISTENT PATTERN
   ======================================== */

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--color-border-subtle);
}

.section-title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-text-primary);
  font-family: var(--font-serif);
  letter-spacing: -0.02em;
}

.section-action {
  font-size: var(--font-size-sm);
  color: var(--color-gold);
  text-decoration: none;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: opacity 0.2s;
}

.section-action:active {
  opacity: 0.6;
}

/* ========================================
   TABS & FILTERS - UNIFIED CHIP SYSTEM
   ======================================== */

.tab-container,
.filter-container {
  position: sticky;
  top: calc(var(--mobile-header-height, 72px));
  background: var(--color-obsidian);
  border-bottom: 1px solid var(--color-border);
  padding: var(--spacing-md);
  z-index: 99;
  margin-left: calc(-1 * var(--spacing-md));
  margin-right: calc(-1 * var(--spacing-md));
  margin-bottom: var(--spacing-md);
  /* Tabs scroll within their own rail instead of stretching the page */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  white-space: nowrap;
}

.tab-container::-webkit-scrollbar,
.filter-container::-webkit-scrollbar {
  display: none;
}

.tab-scroll,
.filter-scroll {
  display: flex;
  gap: var(--spacing-sm);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.tab-scroll::-webkit-scrollbar,
.filter-scroll::-webkit-scrollbar {
  display: none;
}

.tab,
.filter-chip {
  padding: var(--spacing-sm) var(--spacing-md);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 50px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.tab.active,
.filter-chip.active {
  background: var(--color-gold);
  color: var(--color-obsidian);
  border-color: var(--color-gold);
  font-weight: 600;
}

.tab:active,
.filter-chip:active {
  transform: scale(0.95);
}

@media (min-width: 1024px) {
  .tab:hover,
  .filter-chip:hover {
    background: var(--color-elevated);
    border-color: var(--color-gold);
  }
  
  .tab.active:hover,
  .filter-chip.active:hover {
    background: var(--color-gold-bright);
  }
}

/* ========================================
   BADGE SYSTEM - STATUS & CATEGORIES
   ======================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 50px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Signal/Status badges using pillar colors */
.badge-urgent {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border: 1px solid var(--color-warning-border);
}

.badge-trending {
  background: var(--color-mind-bg);
  color: var(--color-mind);
  border: 1px solid var(--color-mind-border);
}

.badge-breaking {
  background: var(--color-error-bg);
  color: var(--color-error);
  border: 1px solid var(--color-error-border);
}

.badge-movement {
  background: var(--color-soul-bg);
  color: var(--color-soul);
  border: 1px solid var(--color-soul-border);
}

.badge-opportunity {
  background: var(--color-lifestyle-bg);
  color: var(--color-lifestyle);
  border: 1px solid var(--color-lifestyle-border);
}

.badge-verified {
  background: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid var(--color-success-border);
}

/* ========================================
   AVATAR SYSTEM - CONSISTENT TREATMENT
   ======================================== */

.avatar {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
  background: var(--color-elevated);
  color: var(--color-text-primary);
  border: 2px solid var(--color-border);
}

.avatar-sm {
  width: 32px;
  height: 32px;
  font-size: var(--font-size-sm);
}

.avatar-md {
  width: 44px;
  height: 44px;
  font-size: var(--font-size-base);
}

.avatar-lg {
  width: 60px;
  height: 60px;
  font-size: var(--font-size-xl);
}

.avatar-xl {
  width: 80px;
  height: 80px;
  font-size: var(--font-size-2xl);
}

/* Avatar with gold accent for premium/verified */
.avatar-premium {
  border-color: var(--color-gold);
  box-shadow: 0 0 12px var(--color-gold-glow);
}

/* ========================================
   METADATA & INFO ROWS
   ======================================== */

.meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.meta-separator {
  color: var(--color-text-tertiary);
}

/* ========================================
   ACTION ROWS - CONSISTENT PATTERN
   ======================================== */

.action-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding-top: var(--spacing-sm);
  margin-top: var(--spacing-sm);
  border-top: 1px solid var(--color-border-subtle);
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.action-btn:active {
  transform: scale(0.95);
  background: var(--color-elevated);
}

.action-btn.active {
  color: var(--color-gold);
}

/* ========================================
   BOTTOM NAV SPACING ADJUSTMENT
   ======================================== */

/* Ensure content doesn't get hidden behind bottom nav */
body {
  padding-bottom: calc(var(--bottom-nav-height, 64px) + var(--safe-area-bottom, 0px));
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (min-width: 768px) {
  main.container {
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
  }
  
  .section-title {
    font-size: var(--font-size-3xl);
  }
}

@media (min-width: 1024px) {
  /* Desktop: hide mobile-only elements */
  .mobile-header,
  .bottom-nav,
  .tab-container,
  .filter-container {
    display: none;
  }
  
  body {
    padding-bottom: 0;
  }
}

/* ========================================
   SAFE AREA SUPPORT (iOS notch/island)
   ======================================== */

@supports (padding: env(safe-area-inset-top)) {
  .mobile-header {
    padding-top: calc(env(safe-area-inset-top) + var(--spacing-md));
  }
  
  body {
    padding-bottom: calc(var(--bottom-nav-height, 64px) + env(safe-area-inset-bottom));
  }
}

/* Full-bleed rails (tabs/filters) use negative margins; never let them
   widen the page itself. */
html,
body {
  overflow-x: hidden;
}

/* ========================================
   DESKTOP TOP BAR (shell pages)
   Bottom-nav is mobile-only; this gives feed/signal/network/trust/
   marketplace/profile a consistent desktop way home.
   ======================================== */

.app-topbar { display: none; }

@media (min-width: 1024px) {
  .app-topbar {
    position: sticky;
    top: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 28px;
    background: rgba(12, 12, 12, 0.96);
    border-bottom: 1px solid var(--color-border);
    backdrop-filter: blur(12px);
  }

  .app-topbar-logo {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 900;
    font-size: 1.2rem;
    color: var(--color-text-primary);
    text-decoration: none;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }

  .app-topbar-logo span {
    color: var(--color-gold, #E2B644);
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.16em;
  }

  .app-topbar-nav { display: flex; gap: 22px; }

  .app-topbar-nav a {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.15s ease;
    /* A navigation link is a target, not prose. WCAG 2.2 asks for 24px and
       these measured 22px — close enough to look fine and small enough to
       miss. Padding rather than a larger typeface, so nothing else moves. */
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 2px;
  }

  .app-topbar-nav a:hover { color: var(--color-text-primary); }
  .app-topbar-nav a[aria-current="page"] { color: var(--color-gold, #E2B644); font-weight: 600; }

  .app-topbar-logout {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
  }

  .app-topbar-logout:hover { border-color: var(--color-gold, #E2B644); color: var(--color-gold, #E2B644); }
}