/* ==========================================
   WORLD-CLASS MOBILE LAYOUT SYSTEM
   ==========================================

   ARCHITECTURE PRINCIPLES:
   1. Floating chrome (buttons) are TRUE overlays - they don't affect content flow
   2. Content centers itself using CSS Grid
   3. Consistent spacing via CSS custom properties
   4. Mobile-first, single source of truth

   LAYOUT STRUCTURE:
   ┌─────────────────────────────────────────┐
   │ [≡]                              [AI]   │  ← Fixed overlay (z-index: 2500)
   │                                         │
   │   ┌─────────────────────────────────┐   │
   │   │                                 │   │
   │   │      CONTENT AREA               │   │  ← Auto-centered, max-width
   │   │      (centered, padded)         │   │
   │   │                                 │   │
   │   └─────────────────────────────────┘   │
   │                                         │
   │   [ Home ][ Board ][ Timeline ][ ⚙ ]   │  ← Fixed bottom nav (z-index: 2000)
   └─────────────────────────────────────────┘

   ========================================== */

/* ==========================================
   CSS CUSTOM PROPERTIES - Single source of truth
   ========================================== */
:root {
  /* Safe areas (iPhone notch, etc.) */
  --mobile-safe-top: env(safe-area-inset-top, 0px);
  --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mobile-safe-left: env(safe-area-inset-left, 0px);
  --mobile-safe-right: env(safe-area-inset-right, 0px);

  /* Content spacing - symmetric for centered look */
  --mobile-content-padding: 20px;

  /* Chrome dimensions */
  --mobile-chrome-top: calc(16px + var(--mobile-safe-top));
  --mobile-chrome-button-size: 44px;
  --mobile-bottom-nav-height: 64px;

  /* Z-index layers */
  --z-mobile-content: 1;
  --z-mobile-bottom-nav: 2000;
  --z-mobile-chrome: 2500;
  --z-mobile-sidebar: 3000;
  --z-mobile-modal: 4000;
}

/* ==========================================
   MOBILE LAYOUT CONTAINER
   Only active on mobile (max-width: 768px)
   ========================================== */
@media (max-width: 768px) {

  /* ===========================================
     BODY - The viewport setup
     =========================================== */
  body {
    /* Reserve space for bottom nav */
    padding-bottom: calc(var(--mobile-bottom-nav-height) + var(--mobile-safe-bottom)) !important;
    /* Top space for content to start below chrome */
    padding-top: calc(var(--mobile-chrome-top) + var(--mobile-chrome-button-size) + 16px) !important;
    /* Prevent horizontal scroll */
    overflow-x: hidden !important;
  }

  /* ===========================================
     FLOATING CHROME - TRUE overlays
     Don't affect layout, just float on top
     =========================================== */
  .mobile-icon-strip {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: var(--z-mobile-chrome) !important;
    /* Transparent - buttons handle their own background */
    background: transparent !important;
    /* Let clicks through except on buttons */
    pointer-events: none !important;
  }

  .mobile-panel-toggle,
  .mobile-ai-fab {
    pointer-events: auto !important; /* Make buttons clickable */
  }

  .mobile-ai-fab {
    position: fixed !important;
    top: var(--mobile-chrome-top) !important;
    right: var(--mobile-content-padding) !important;
    z-index: var(--z-mobile-chrome) !important;
  }

  /* ===========================================
     CONTENT AREA - Auto-centered, independent
     Uses CSS Grid for true centering
     =========================================== */
  .main-wrapper,
  .container {
    /* Reset any inherited positioning */
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;

    /* CSS Grid for centering */
    display: grid !important;
    grid-template-columns:
      var(--mobile-content-padding)    /* Left gutter */
      minmax(0, 1fr)                   /* Content (flexible, centered) */
      var(--mobile-content-padding) !important;  /* Right gutter */
  }

  /* All direct children go in the center column */
  .main-wrapper > *,
  .container > * {
    grid-column: 2 !important;
  }

  /* Full-bleed elements can span all columns */
  .main-wrapper > .full-bleed,
  .container > .full-bleed {
    grid-column: 1 / -1 !important;
  }

  /* ===========================================
     MAIN LAYOUT - Content sections
     =========================================== */
  .main-layout {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  /* ===========================================
     HOME VIEW - Centered dashboard
     =========================================== */
  #home-view,
  .home-view {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .home-dashboard-new {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* ===========================================
     KANBAN / JOB CARDS - Full width content
     =========================================== */
  #kanban-app,
  #main-content,
  .jobs-column,
  #jobs-section {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* ===========================================
     BOTTOM NAVIGATION - Fixed at bottom
     =========================================== */
  .mobile-bottom-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: calc(var(--mobile-bottom-nav-height) + var(--mobile-safe-bottom)) !important;
    padding-bottom: var(--mobile-safe-bottom) !important;
    z-index: var(--z-mobile-bottom-nav) !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  }

  /* Dark mode bottom nav */
  body.dark-mode .mobile-bottom-nav {
    background: rgba(24, 24, 27, 0.95) !important;
    border-top-color: rgba(255, 255, 255, 0.08) !important;
  }

  /* ===========================================
     HIDE DESKTOP ELEMENTS
     =========================================== */
  header:not(.mobile-header-claude),
  .desktop-only {
    display: none !important;
  }
}

/* ==========================================
   DARK MODE SUPPORT
   ========================================== */
@media (max-width: 768px) {
  body.dark-mode {
    --mobile-content-bg: #0a0a0a;
  }
}

/* ==========================================
   LANDSCAPE ORIENTATION ADJUSTMENTS
   ========================================== */
@media (max-width: 768px) and (orientation: landscape) {
  :root {
    --mobile-content-padding: 24px;
    --mobile-bottom-nav-height: 56px;
  }
}

/* ==========================================
   SMALL PHONES (iPhone SE, etc.)
   ========================================== */
@media (max-width: 375px) {
  :root {
    --mobile-content-padding: 16px;
  }
}