/**
 * ActivGate Mobile Responsive Overrides
 * ======================================
 * Centralized mobile fixes loaded LAST to override all component CSS.
 * Covers: safe-area, overflow prevention, touch targets, typography,
 *         footer, modals, cards, and scroll indicators.
 */

/* ========================================
 * SAFE-AREA SUPPORT
 * ======================================== */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* ========================================
 * UNIVERSAL OVERFLOW PREVENTION
 * ======================================== */
img, video, iframe, embed, object, svg:not(.bi) {
  max-width: 100%;
  height: auto;
}
pre, code {
  overflow-x: auto;
  max-width: 100%;
}

/* Table + pre mobile-only overrides (scoped to avoid breaking desktop table layout) */
@media (max-width: 767px) {
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  pre {
    word-break: break-word;
  }
}

/* ========================================
 * TOUCH TARGET ENFORCEMENT
 * ======================================== */
@media (max-width: 767px) {
  /* Prevent iOS auto-zoom on input focus */
  input, select, textarea {
    font-size: max(16px, 1em);
  }
  /* Minimum touch targets for interactive elements */
  .dropdown-item,
  .sidebar-left__link,
  .notif-item,
  .shell__create-menu-item {
    min-height: 44px;
  }
}

/* ========================================
 * TYPOGRAPHY SCALING
 * ======================================== */
@media (max-width: 767px) {
  h1 { font-size: clamp(1.25rem, 5vw, 1.75rem) !important; }
  h2 { font-size: clamp(1.1rem, 4vw, 1.5rem) !important; }
  h3 { font-size: clamp(1rem, 3.5vw, 1.25rem) !important; }
}
@media (max-width: 479px) {
  h1 { font-size: clamp(1.1rem, 5vw, 1.5rem) !important; }
  h2 { font-size: clamp(1rem, 4vw, 1.3rem) !important; }
  h3 { font-size: clamp(0.95rem, 3.5vw, 1.15rem) !important; }
}

/* ========================================
 * HORIZONTAL SCROLL INDICATORS
 * ======================================== */
@media (max-width: 767px) {
  .ag-chiprow,
  .ag-vibe-filters,
  .reels-feed-tabs,
  .search-tabs,
  .notif-tabs,
  .e-n-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .ag-chiprow::-webkit-scrollbar,
  .ag-vibe-filters::-webkit-scrollbar,
  .reels-feed-tabs::-webkit-scrollbar,
  .search-tabs::-webkit-scrollbar,
  .notif-tabs::-webkit-scrollbar,
  .e-n-tabs::-webkit-scrollbar {
    display: none;
  }
  /* Fade hint on right edge */
  .ag-chiprow,
  .ag-vibe-filters,
  .reels-feed-tabs,
  .search-tabs,
  .e-n-tabs {
    mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
  }
}

/* ========================================
 * FOOTER MOBILE FIXES
 * ======================================== */
@media (max-width: 767px) {
  .site-footer {
    padding: 2rem 0 0;
    padding-bottom: max(16px, var(--safe-bottom));
    margin-top: 30px;
  }
  .site-footer__inner {
    padding: 0 var(--ag-space-md, 12px);
  }
  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    text-align: center;
  }
  .site-footer__tagline {
    margin-left: 0;
    margin-inline: auto;
  }
  .site-footer__brand .brand {
    justify-content: center;
  }
  .site-footer__socials {
    justify-content: center;
  }
  .site-footer__newsletter {
    max-width: 320px;
    margin-inline: auto;
  }
  .site-footer__bottom {
    justify-content: center;
    text-align: center;
    flex-direction: column;
    gap: 0.5rem;
  }
  .site-footer__bottom-links {
    justify-content: center;
  }
  .site-footer__switchers {
    justify-content: center;
  }
}
@media (max-width: 479px) {
  .site-footer__grid {
    gap: 1.25rem;
  }
  .site-footer__newsletter {
    max-width: 280px;
  }
  .site-footer__bottom-links {
    gap: 0.75rem;
    font-size: 12px;
  }
}

/* ========================================
 * CARD & SECTION OVERFLOW
 * ======================================== */
@media (max-width: 767px) {
  .ag-card,
  .ag-section,
  .ag-detail-card {
    max-width: 100%;
    overflow-x: hidden;
  }
  .ag-detail-grid {
    grid-template-columns: 1fr !important;
  }
  .ag-detail-kv {
    grid-template-columns: 1fr !important;
  }
}

/* ========================================
 * MODAL & DRAWER MOBILE OVERRIDES
 * ======================================== */
@media (max-width: 767px) {
  .ag-modal__dialog {
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 24px) !important;
    margin: 12px;
  }
  .ag-modal--lg .ag-modal__dialog,
  .ag-modal--xl .ag-modal__dialog {
    max-width: calc(100vw - 16px) !important;
  }
  .ag-drawer {
    max-width: min(400px, 90vw);
  }
  /* Bootstrap modal overrides */
  .modal-dialog {
    margin: 8px !important;
    max-width: calc(100vw - 16px) !important;
  }
}
@media (max-width: 479px) {
  .ag-modal__dialog {
    max-width: 100vw !important;
    max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom)) !important;
    margin: 0;
    border-radius: 0 !important;
    width: 100vw;
    min-height: 100dvh;
  }
}

/* ========================================
 * SERVICE DETAIL PAGE OVERFLOW FIXES
 * ======================================== */
@media (max-width: 767px) {
  /* Tables with min-width that overflow on mobile */
  .ag-table {
    min-width: 0;
    width: 100%;
    font-size: 13px;
  }
  /* Ensure overflow wrappers are constrained */
  [style*="overflow-x"] {
    max-width: 100%;
  }
  /* Detail layout sidebar stacks */
  .ag-layout {
    grid-template-columns: 1fr !important;
  }
  /* Sticky booking widget unsticks on mobile */
  .ag-layout .ag-layout__sidebar,
  .ag-layout .ag-sticky-sidebar {
    position: static !important;
  }
}

/* ========================================
 * DATA TABLE HORIZONTAL SCROLL
 * ======================================== */
@media (max-width: 767px) {
  .table-responsive,
  .ag-table-wrap,
  .provider-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .table-responsive::-webkit-scrollbar,
  .ag-table-wrap::-webkit-scrollbar,
  .provider-table-wrap::-webkit-scrollbar {
    display: none;
  }
  /* Ensure Bootstrap tables on mobile are wide enough to scroll */
  .table-responsive .table,
  .ag-table-wrap .table,
  .provider-table-wrap .table {
    min-width: 600px;
  }
  /* Fade hint on right edge for scrollable tables */
  .table-responsive,
  .ag-table-wrap,
  .provider-table-wrap {
    mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
  }
}