/* iOS Safe Area Support */
:root {
  /* Set safe area insets as CSS variables */
  --safe-area-inset-top: env(safe-area-inset-top, 0px);
  --safe-area-inset-right: env(safe-area-inset-right, 0px);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-inset-left: env(safe-area-inset-left, 0px);
}

/* Apply safe area padding to body (mobile only) */
body {
  padding-top: var(--safe-area-inset-top);
  padding-right: var(--safe-area-inset-right);
  padding-bottom: var(--safe-area-inset-bottom);
  padding-left: var(--safe-area-inset-left);
}

/* Ensure full viewport height accounting for safe areas */
#root {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

/* Web-specific styles - full width layout */
@media (min-width: 1024px) {
  /* On web/desktop, remove the max-width constraint */
  body {
    padding: 0;
  }

  #root > div {
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* Make container full width on large screens */
  .max-w-lg {
    max-width: 100% !important;
  }
}

/* Tailwind safe area utilities */
.safe-top {
  padding-top: var(--safe-area-inset-top);
}

.safe-bottom {
  padding-bottom: var(--safe-area-inset-bottom);
}

.safe-left {
  padding-left: var(--safe-area-inset-left);
}

.safe-right {
  padding-right: var(--safe-area-inset-right);
}

.safe-area {
  padding-top: var(--safe-area-inset-top);
  padding-right: var(--safe-area-inset-right);
  padding-bottom: var(--safe-area-inset-bottom);
  padding-left: var(--safe-area-inset-left);
}