/**
 * Taiga Platform — Multi-Device Responsive Layout
 * Derived from Apple Design Resources & /Users/laarkin/Downloads/DESIGN KIT
 *
 * Breakpoints:
 * - Mobile (< 768px, i.e., max-width: 767px): Fixed bottom tab bar (83px, landscape 49px), hide desktop sidebar
 * - Tablet (768px - 1023px): Two-column split view layout, condensed sidebar (220px)
 * - Desktop (>= 1024px): Fixed collapsible sidebar (260px), wide card grid
 * - 4K Ultra-Wide: Max-width 1440px centered container
 * - Safe Area Insets: iOS notch horizontal & home indicator vertical insets
 */

/* -------------------------------------------------------------------------- */
/* Container & Viewport Base                                                  */
/* -------------------------------------------------------------------------- */

html, body {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

.app-wrapper {
  display: flex;
  width: 100vw;
  min-height: 100vh;
  position: relative;
  z-index: 1;
  overflow-x: hidden;
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  box-sizing: border-box;
}

/* 4K and Ultra-Wide Screens Scaling (Centers content to 1440px) */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 32px 40px;
  max-width: var(--content-max-width, 1440px);
  margin: 0 auto;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* -------------------------------------------------------------------------- */
/* 1. Mobile Viewport (< 768px, max-width: 767px)                            */
/* -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  /* Hide desktop sidebar */
  .desktop-sidebar {
    display: none !important;
  }

  /* Show fixed bottom tab bar (83px height iOS HIG) */
  .mobile-tab-bar {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--mobile-tabbar-height, 83px);
    background: rgba(18, 18, 22, 0.92);
    backdrop-filter: blur(var(--glass-blur, 20px)) saturate(var(--glass-saturate, 180%));
    -webkit-backdrop-filter: blur(var(--glass-blur, 20px)) saturate(var(--glass-saturate, 180%));
    border-top: 1px solid var(--glass-border-dark, rgba(255, 255, 255, 0.12));
    padding-bottom: env(safe-area-inset-bottom, 20px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    z-index: 100;
    justify-content: space-around;
    align-items: center;
    box-sizing: border-box;
  }

  /* Main content mobile padding with clearance for 83px tab bar */
  .main-content {
    padding: 20px 16px;
    padding-bottom: calc(var(--mobile-tabbar-height, 83px) + 24px);
    max-width: 100%;
  }

  /* Stack multi-column elements to single column */
  .grid-columns,
  .pricing-grid,
  .features-grid {
    grid-template-columns: 1fr !important;
  }

  /* Extreme narrow viewport (down to 320px) protection */
  .glass-card {
    padding: 16px !important;
  }

  .btn-primary,
  .btn-secondary {
    width: 100%;
  }

  .dropzone {
    padding: 32px 16px !important;
  }

  .format-grid {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)) !important;
  }
}

/* Mobile Landscape Adaptation: Shrink tab bar to 49px */
@media (max-width: 767px) and (orientation: landscape) {
  .mobile-tab-bar {
    height: var(--mobile-tabbar-landscape, 49px) !important;
    padding-bottom: env(safe-area-inset-bottom, 8px) !important;
  }

  .main-content {
    padding-bottom: calc(var(--mobile-tabbar-landscape, 49px) + 16px) !important;
  }
}

/* -------------------------------------------------------------------------- */
/* 2. Tablet Viewport (768px - 1023px)                                        */
/* -------------------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1023px) {
  .desktop-sidebar {
    display: flex;
    width: 220px;
    min-width: 220px;
    padding: 20px 12px;
  }

  .mobile-tab-bar {
    display: none !important;
  }

  .main-content {
    padding: 24px 28px;
  }

  /* Two-column split layout for tablet */
  .split-view {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .pricing-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* -------------------------------------------------------------------------- */
/* 3. Desktop Viewport (>= 1024px)                                            */
/* -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  .desktop-sidebar {
    display: flex;
    width: var(--sidebar-width, 260px);
    min-width: var(--sidebar-width, 260px);
  }

  .mobile-tab-bar {
    display: none !important;
  }

  .main-content {
    padding: 36px 48px;
  }

  .split-view {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 28px;
  }

  .pricing-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* -------------------------------------------------------------------------- */
/* Accessibility Rules                                                        */
/* -------------------------------------------------------------------------- */

/* Prefers Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* Prefers High Contrast */
@media (prefers-contrast: more) {
  .glass-card,
  .desktop-sidebar,
  .mobile-tab-bar,
  .modal-content,
  .toast {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
  }
}