/**
 * VigilSentinel — shared mobile / small-screen layout
 * Loaded after core styles. Keeps marketing + app usable on phones and tablets.
 */

/* Safe-area padding (notch / home indicator) */
body {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Marketing pages: horizontal padding on narrow viewports */
@media (max-width: 768px) {
  nav .container,
  section .container,
  footer .container {
    padding-left: max(0.75rem, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(0.75rem, env(safe-area-inset-right, 0px)) !important;
  }
}

/* --- Marketing: hero & wide sections --- */
@media (max-width: 1024px) {
  .marketing-grid-hero {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  .marketing-grid-hero .app-preview {
    transform: none !important;
  }
}

@media (max-width: 640px) {
  .marketing-grid-hero .hero-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .marketing-grid-hero .hero-buttons .btn {
    width: 100%;
    justify-content: center;
  }
}

/* --- Quotation page --- */
@media (max-width: 960px) {
  .quotation-grid-main {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
}

@media (max-width: 640px) {
  .quotation-form-row-2,
  .quotation-form-row-3 {
    grid-template-columns: 1fr !important;
  }

  .quotation-services-grid {
    grid-template-columns: 1fr !important;
    max-height: none !important;
  }

  .quotation-check-row {
    grid-template-columns: 1fr !important;
  }
}

/* --- App dashboard: pipeline + MITRE row --- */
@media (max-width: 960px) {
  .dashboard-metrics-row {
    grid-template-columns: 1fr !important;
  }

  .dashboard-exec-full {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 520px) {
  #pipelineFunnel {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
  }
}

/* --- Marketing nav dropdowns (desktop widths; prevent horizontal overflow) --- */
@media (max-width: 1420px) {
  .nav-links .dropdown-menu.mega-dropdown {
    min-width: min(calc(100vw - 2rem), 900px) !important;
    max-width: calc(100vw - 2rem) !important;
  }

  .nav-links .dropdown-menu:not(.mega-dropdown) {
    min-width: min(calc(100vw - 2rem), 560px) !important;
    max-width: calc(100vw - 2rem) !important;
  }
}

@media (max-width: 900px) {
  .nav-links .dropdown-menu.mega-dropdown {
    flex-direction: column !important;
    max-height: min(85vh, 720px);
  }

  .nav-links .mega-dropdown .dropdown-categories {
    width: 100% !important;
    max-height: 36vh;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
  }

  .nav-links .mega-dropdown .dropdown-subcategories {
    max-height: 48vh;
  }
}

/* --- Generic: tables in app content --- */
main.content-area .table-container,
.content-area .table-container {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Touch-friendly controls inside scroll areas */
@media (max-width: 768px) {
  .btn,
  button:not(.header-menu-toggle):not(.app-shell-backdrop),
  input[type="submit"],
  .nav-category-item,
  .sidebar-nav a {
    min-height: 44px;
  }
}

/* Marketing: auto-fit grids with a wide min column */
@media (max-width: 400px) {
  .features-grid,
  .component-grid,
  .solutions-grid {
    grid-template-columns: 1fr !important;
  }
}