/* ===== Mobile responsive overrides for CVARX projects ===== */

/* Hamburger button - always visible on mobile */
.mobile-hamburger {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 9999;
  width: 44px;
  height: 44px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
  align-items: center;
  justify-content: center;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  color: #334155;
}
.mobile-hamburger:active { transform: scale(0.95); }

/* Mobile breakpoint: <1024px (lg) */
@media (max-width: 1023px) {
  /* Force full-width container hierarchy */
  html, body { width: 100%; max-width: 100vw; overflow-x: hidden; }
  body > div, body > #app, body > #__next { width: 100%; max-width: 100vw; }

  /* Sidebar slides in from left */
  aside,
  aside.glass-sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s ease !important;
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
  }
  body.mobile-menu-open aside,
  body.mobile-menu-open aside.glass-sidebar {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,0.4);
  }
  body.mobile-menu-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 30;
  }

  /* Main full width */
  main, main > div, main > div > div, main.flex-1 {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box;
  }

  /* Show hamburger */
  .mobile-hamburger { display: flex !important; }

  /* Header */
  header, header.sticky {
    padding-left: 64px !important;
    padding-right: 12px !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box;
  }
  header input[type="text"], header input.input-modern {
    width: 100% !important;
    max-width: 140px;
  }
  header > div { gap: 8px !important; }
  header .relative.hidden { display: none !important; }

  /* Modals */
  .max-w-sm, .max-w-md, .max-w-lg, .max-w-xl, .max-w-2xl, .max-w-3xl,
  .max-w-4xl, .max-w-5xl, .max-w-6xl, .max-w-7xl {
    max-width: calc(100vw - 16px) !important;
  }

  /* Tables */
  table { width: 100% !important; }
  .overflow-x-auto, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Grids stack */
  .grid.grid-cols-2,
  .grid.grid-cols-3,
  .grid.grid-cols-4,
  .grid.md\\:grid-cols-2,
  .grid.md\\:grid-cols-3,
  .grid.md\\:grid-cols-4,
  .grid.lg\\:grid-cols-2,
  .grid.lg\\:grid-cols-3,
  .grid.lg\\:grid-cols-4 {
    grid-template-columns: 1fr !important;
  }

  /* === FIX TAB BARS that use inline-flex (Dashboard tabs, etc) === */
  .inline-flex.gap-1,
  .inline-flex.gap-2,
  .inline-flex.gap-3,
  div.inline-flex.bg-white {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .inline-flex.gap-1 > *,
  .inline-flex.gap-2 > *,
  .inline-flex.gap-3 > * {
    flex-shrink: 0 !important;
    white-space: nowrap;
  }

  /* Generic tabs / button rows that may overflow */
  .flex.gap-1.mb-6,
  .flex.gap-2.mb-6,
  .flex.gap-3.mb-6 {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }
  .flex.gap-1.mb-6 > *,
  .flex.gap-2.mb-6 > *,
  .flex.gap-3.mb-6 > * { flex-shrink: 0; white-space: nowrap; }

  /* Padding reductions */
  .p-8 { padding: 1rem !important; }
  .p-6 { padding: 0.875rem !important; }
  .px-8 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .py-8 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
  .px-6 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
  .py-6 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
  .px-4 { padding-left: 0.625rem !important; padding-right: 0.625rem !important; }

  h1, h2, h3 { word-break: break-word; }

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

/* Extra-small phones (<480px) */
@media (max-width: 479px) {
  .text-3xl { font-size: 1.5rem !important; }
  .text-2xl { font-size: 1.25rem !important; }
  .text-xl { font-size: 1.05rem !important; }

  .flex.justify-end.gap-2,
  .flex.justify-end.gap-3 {
    flex-wrap: wrap;
    gap: 8px;
  }
  .flex.justify-end.gap-2 > button,
  .flex.justify-end.gap-3 > button { flex: 1 1 auto; }

  header .w-9.h-9 { width: 32px !important; height: 32px !important; font-size: 11px !important; }
}