/* ===============================================
   Core Global Styles
   - Resets
   - Global selection
   - Layout stability
   - Responsive fixes
   =============================================== */

/* Global selection disable for app-like feel */
html, body, * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Global box sizing to prevent overflow */
*, *::before, *::after {
  box-sizing: border-box;
}

:root {
  --container-max: 1200px;
  --container-pad: clamp(16px, 3.5vw, 32px);
  --section-pad: clamp(24px, 6vw, 64px);
  --floating-offset: clamp(56px, 10vw, 96px);
}

/* Ensure layouts can grow on small screens instead of clipping */
html, body, #root {
  width: 100%;
  overflow-x: hidden;
}

body, #root {
  min-height: 100dvh;
}

.glass-card, section, main, .container {
  overflow: visible;
}

/* Override Tailwind container to be responsive */
.container {
  width: 100% !important;
  max-width: var(--container-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--container-pad) !important;
  padding-right: var(--container-pad) !important;
}

/* Global responsive container system */
.container,
.container-custom,
.app-container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-pad) !important;
  padding-right: var(--container-pad) !important;
}

/* Page sections with default padding */
section {
  width: 100%;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
  margin-left: auto;
  margin-right: auto;
}

.app-content {
  padding-top: var(--section-pad);
  padding-bottom: calc(var(--section-pad) + var(--floating-offset));
}

/* Ensure cards don't overflow on mobile */
.glass-card,
.card {
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Remove problematic margin max-widths */
.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Floating UI panels should respect viewport width */
.floating-panel {
  max-width: min(360px, calc(100vw - 32px)) !important;
  bottom: max(16px, env(safe-area-inset-bottom));
  left: max(16px, env(safe-area-inset-left));
  right: auto;
}

.floating-widget {
  max-width: min(360px, calc(100vw - 32px)) !important;
}

/* Mobile breakpoint - ensure critical responsive fixes */
@media (max-width: 640px) {
  body, #root {
    overflow-x: hidden;
  }
  
  .container,
  .container-custom,
  .app-container {
    width: 100% !important;
    padding-left: clamp(12px, 3.5vw, 20px) !important;
    padding-right: clamp(12px, 3.5vw, 20px) !important;
  }
  
  section {
    width: 100% !important;
    padding-left: clamp(12px, 3.5vw, 20px) !important;
    padding-right: clamp(12px, 3.5vw, 20px) !important;
  }

  .floating-widget {
    width: calc(100vw - 32px) !important;
  }

  /* Remove Tailwind padding that conflicts */
  .px-4 {
    padding-left: var(--container-pad) !important;
    padding-right: var(--container-pad) !important;
  }

  .px-6 {
    padding-left: var(--container-pad) !important;
    padding-right: var(--container-pad) !important;
  }

  .px-8 {
    padding-left: var(--container-pad) !important;
    padding-right: var(--container-pad) !important;
  }
}

@media (max-width: 768px) {
  body, #root {
    overflow-x: hidden;
  }
  
  .glass-card, section, main, .container {
    width: 100%;
  }

  /* Ensure proper responsive text sizes */
  h1, h2, h3 {
    max-width: 100%;
  }

  /* Cards should not overflow */
  .grid, .flex {
    width: 100%;
  }
}