/**
 * Unokidz app shell (pages/index.html) — phones, tablets, notched devices.
 * Safe areas, dvh, horizontal clip, touch scrolling. Works with Tailwind utilities on the page.
 */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body.app-wrapper {
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-x: clip;
  width: 100%;
}

/* Main column: edge-aligned insets respect iPhone/Android cutouts + minimum thumb reach */
.unokidz-app-shell {
  --unokidz-pad-left: max(1rem, env(safe-area-inset-left, 0px));
  --unokidz-pad-right: max(1rem, env(safe-area-inset-right, 0px));
  --unokidz-pad-top: max(0.5rem, env(safe-area-inset-top, 0px));
  --unokidz-pad-bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
  width: 100%;
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
  padding: var(--unokidz-pad-top) var(--unokidz-pad-right) var(--unokidz-pad-bottom) var(--unokidz-pad-left);
  box-sizing: border-box;
  min-width: 0;
}

@media (min-width: 640px) {
  .unokidz-app-shell {
    --unokidz-pad-left: max(1.5rem, env(safe-area-inset-left, 0px));
    --unokidz-pad-right: max(1.5rem, env(safe-area-inset-right, 0px));
    --unokidz-pad-top: max(0.75rem, env(safe-area-inset-top, 0px));
    --unokidz-pad-bottom: max(1.75rem, env(safe-area-inset-bottom, 0px));
  }
}

@media (min-width: 1024px) {
  .unokidz-app-shell {
    --unokidz-pad-left: max(1.5rem, env(safe-area-inset-left, 0px));
    --unokidz-pad-right: max(1.5rem, env(safe-area-inset-right, 0px));
    --unokidz-pad-bottom: max(2.25rem, env(safe-area-inset-bottom, 0px));
  }
}

@media (min-width: 1280px) {
  .unokidz-app-shell {
    --unokidz-pad-left: max(1.75rem, env(safe-area-inset-left, 0px));
    --unokidz-pad-right: max(1.75rem, env(safe-area-inset-right, 0px));
  }
}

/* Beat dashboard-zevaras-premium `.dash-premium-main` top/bottom extras — one consistent inset */
html.theme-zevaras .dash-premium-main.unokidz-app-shell {
  padding: var(--unokidz-pad-top) var(--unokidz-pad-right) var(--unokidz-pad-bottom) var(--unokidz-pad-left);
}

/* Primary card never bleeds past the shell */
.unokidz-app-shell > .card.rounded-2xl {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Slightly tighter card gutter on very narrow phones */
@media (max-width: 380px) {
  html.theme-zevaras .unokidz-app-shell > .card.rounded-2xl.shadow-lg {
    padding-left: 0.875rem;
    padding-right: 0.875rem;
  }
}

/* Wide tables: momentum scroll, no page bounce steal */
.unokidz-app-shell .overflow-x-auto {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  max-width: 100%;
}

/* Collapsible section headers — comfortable tap targets on phones */
@media (max-width: 639px) {
  .unokidz-app-shell .dash-section-head {
    min-height: 3.25rem;
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
  }
}

/* Reduce accidental double-tap zoom on controls (keeps pinch zoom elsewhere) */
.unokidz-app-shell button,
.unokidz-app-shell a[role="button"] {
  touch-action: manipulation;
}