/*
 * ============================================================
 * FormBot5000 — App-Specific Overrides
 * Loaded AFTER base-overrides.css.
 * Contains ONLY forms-specific layout and responsive rules.
 * ============================================================
 */

/* ============================================================
   1. SAMSUNG INTERNET — color-mix() FALLBACKS (≤v21)
   ============================================================ */
@supports not (color: color-mix(in srgb, red, blue)) {
  :root:not(.dark) .bg-primary\/10 {
    background-color: hsl(214, 48%, 94%) !important;
  }
  :root:not(.dark) .border-primary\/30 {
    border-color: hsl(214, 48%, 78%) !important;
  }
  :root:not(.dark) .bg-card\/20,
  :root:not(.dark) .bg-card\/30,
  :root:not(.dark) .bg-card\/40,
  :root:not(.dark) .bg-card\/60 {
    background-color: hsl(0, 0%, 100%) !important;
  }
  :root:not(.dark) .bg-background\/80 {
    background-color: hsl(210, 20%, 98%) !important;
  }
  :root:not(.dark) .border-red-500\/30 {
    border-color: #fca5a5 !important;
  }
}

/* ============================================================
   2. MOBILE — FORMBOT LAYOUT (≤767px)
   ============================================================ */
@media (max-width: 767px) {
  /* Header logo clearance — matches Pulse Analytics' proven 10rem
     value for the same collision (hamburger left:12,w:36 + back
     button left:56,~87w ≈ 143px, plus safety margin). Below 640px
     the mobile hamburger nav (section 4 below) is visible and the
     back-button shifts right to x:56, so the React header's own
     "FormBot5000" logo/nav row needs matching left clearance or it
     renders directly underneath both injected buttons. */
  header nav.mx-auto {
    padding-left: 3.5rem !important;
  }

  /* Hero section: reduce massive padding */
  .py-28 { padding-block: 3rem !important; }
  .py-32 { padding-block: 3rem !important; }
  .py-24 { padding-block: 2.5rem !important; }
  .py-20 { padding-block: 2rem !important; }
  .pt-28 { padding-top: 3.5rem !important; }
  .pb-32 { padding-bottom: 3rem !important; }
  .sm\:pt-40 { padding-top: 3.5rem !important; }

  /* Hero heading: scale down */
  .text-5xl { font-size: 2rem !important; line-height: 1.15 !important; }
  .text-4xl { font-size: 1.75rem !important; line-height: 1.2 !important; }
  .text-3xl { font-size: 1.5rem !important; line-height: 1.25 !important; }

  /* Containers: full width */
  .max-w-2xl, .max-w-3xl, .max-w-xl,
  .max-w-5xl, .max-w-6xl {
    max-width: 100% !important;
  }

  /* Form fields: 16px prevents iOS/Samsung zoom-on-focus */
  input, textarea, select {
    font-size: 1rem !important;
    min-height: 44px;
  }
  /* Checkboxes/radios are sized by the bundle (h-5 w-5 up to lg); a 44px
     min-height would stretch the native control into a rectangle. */
  input[type="checkbox"],
  input[type="radio"] {
    min-height: 0;
  }
  button {
    min-height: 44px;
  }

  /* Hero field-chip grid: 2 cols */
  .sm\:grid-cols-5 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Dashboard card grid: single column */
  .sm\:grid-cols-2,
  .sm\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }

  /* Sticky header */
  .sticky.top-0 {
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
  }

  /* Portfolio back button */
  #project-nav-btn {
    top: 12px !important;
    left: 12px !important;
  }

  /* Hide React header's "New form" CTA — hamburger provides it */
  .sticky.top-0 a.bg-primary {
    display: none !important;
  }

  /* Horizontal scroll */
  .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
  }

  /* Builder page: prompt chip buttons */
  .flex.flex-wrap.items-center.gap-2 {
    row-gap: 0.5rem;
  }

  /* Preview aside: remove sticky */
  .lg\:sticky {
    position: static !important;
  }
}

/* Tablet (768–1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .sm\:grid-cols-5 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ============================================================
   3. MOBILE HEADER CLEARANCE — hamburger visible (< 640px)
   ============================================================ */
@media (max-width: 639px) {
  /* Push header title clear of project-nav (44px) + hamburger (36px) + 12px gap */
  header nav.mx-auto {
    padding-left: 6.5rem !important;
  }
}

/* ============================================================
   3b. PORTFOLIO BACK-BUTTON CLEARANCE (≥640px, <1328px)
   ─────────────────────────────────────────────────────────────
   #project-nav-btn is position:fixed at top:12px/left:12px
   spanning x≈12-99px at all viewport widths. Below 640px the
   hamburger nav (section 3 above) takes over and already
   reserves clearance via its own left offset. From 640px (where
   the hamburger disappears and the full nav row returns) up to
   ~1328px (where the header's max-w-6xl container's own auto
   margins finally center it clear of the button), the
   "FormBot5000" logo sits directly under the back-button with
   zero clearance. Same fix pattern as chess/dashboard. */
@media (min-width: 640px) and (max-width: 1327px) {
  header nav.mx-auto {
    padding-left: 3.5rem !important;
  }
}

/* ============================================================
   3c. FIXED THEME-TOGGLE CLEARANCE (right edge)
   ─────────────────────────────────────────────────────────────
   #theme-toggle-btn is position:fixed at top:12px/right:12px and
   spans the rightmost 44px of the viewport at every width. The
   React header's own right-hand cluster (theme toggle + "New
   form" CTA) ends at the max-w-6xl container's inner right edge,
   which sits under that button for every viewport narrower than
   ~1192px — measured 20px of overlap at 375, 768 and 1024 (the
   CTA label was rendering underneath the fixed button). The
   container's own auto margins only clear it from ~1200px up,
   so mirror section 3b's left-side fix on the right.
   ============================================================ */
@media (max-width: 1199px) {
  header nav.mx-auto {
    padding-right: 3.5rem !important;
  }
}

/* ============================================================
   4. DESKTOP RESTORE (≥1024px)
   ============================================================ */
@media (min-width: 1024px) {
  .max-w-2xl { max-width: 42rem !important; }
  .max-w-3xl { max-width: 48rem !important; }
  .max-w-xl  { max-width: 36rem !important; }
  .max-w-5xl { max-width: 64rem !important; }
  .max-w-6xl { max-width: 72rem !important; }

  .lg\:sticky {
    position: sticky !important;
    top: 1.5rem !important;
  }

  .py-28 { padding-block: 7rem !important; }
  .py-32 { padding-block: 8rem !important; }
  .py-24 { padding-block: 6rem !important; }
  .py-20 { padding-block: 5rem !important; }
  .pt-28 { padding-top: 7rem !important; }
  .pb-32 { padding-bottom: 8rem !important; }

  .text-5xl { font-size: 3rem !important;    line-height: 1 !important; }
  .text-4xl { font-size: 2.25rem !important; line-height: 2.5rem !important; }
  .text-3xl { font-size: 1.875rem !important; line-height: 2.25rem !important; }
}

/* ============================================================
   5. FIELD-CHIP GRID RESTORE
   ============================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
  .sm\:grid-cols-5 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (min-width: 1024px) {
  .sm\:grid-cols-5 {
    grid-template-columns: repeat(5, 1fr) !important;
  }
}

/* ============================================================
   6. DASHBOARD CARD GRID RESTORE
   ============================================================ */
@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ============================================================
   7. ULTRA-WIDE (≥1440px)
   ============================================================ */
@media (min-width: 1440px) {
  .max-w-7xl.mx-auto,
  .max-w-6xl.mx-auto,
  .max-w-5xl.mx-auto {
    max-width: 1280px !important;
  }
}


/* ============================================================
   LINKEDIN WEBVIEW / SAMSUNG INTERNET — LOCAL SAFETY NET
   ─────────────────────────────────────────────────────────────
   base-overrides.css provides these globally, but if it fails
   to load (CDN race, cache bust), FormBot5000 has no fallback.
   Dashboard redeclares all of these locally — forms should too.
   ============================================================ */

/* ── Scroll & Overscroll (LinkedIn SFSVC + CCT scroll lock) ── */
html {
  scroll-behavior: auto !important;
  overscroll-behavior-y: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

body {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── #root: prevent horizontal overflow (LinkedIn touchmove fix) ── */
#root {
  max-width: 100vw;
  overflow-x: clip;
}
@supports not (overflow: clip) {
  #root { overflow-x: hidden; }
}

/* ── Viewport height: dvh with svh fallback (Samsung ≤21) ── */
@supports (height: 100dvh) {
  .min-h-screen { min-height: 100dvh !important; }
}
@supports not (height: 100dvh) {
  @supports (height: 100svh) {
    .min-h-screen { min-height: 100svh !important; }
  }
}

/* ── Mobile (≤767px): LinkedIn WebView performance fixes ── */
@media (max-width: 767px) {
  /* Strip backdrop-blur — Samsung Internet GPU perf in WebView */
  [class*="backdrop-blur"],
  #project-nav-btn {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* #root: safe-area bottom padding — prevents form submit buttons
     from being obscured by iPhone home indicator / Android gesture bar */
  #root {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Tap highlight removal */
  a, button, input, select, textarea {
    -webkit-tap-highlight-color: transparent !important;
  }
}

/* ── Tablet (768–1023px): backdrop-filter stripping ── */
@media (min-width: 768px) and (max-width: 1023px) {
  [class*="backdrop-blur"] {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}