/**
 * 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);
  }

}

/* G6 (T20): generic wrapper for plain <table>s that don't already sit in
   one of the three wrapper classes above (Partner Hub's .tblwrap gets
   .ag-table-scroll ADDED alongside it in the template, not swapped in --
   .hubx table.tbl already carries width:100%, so without a min-width
   floor on the table itself the columns silently squish to fit instead
   of overflowing -- e.g. hub/listings.html's 8-column table collapsing
   to a single visible column, or hub/team.html's Access column wrapping
   one word per line. 640px is a floor, not a redesign: it's deliberately
   NOT applied to every .tbl/.table sitewide (that would force scroll on
   narrow tables that already fit -- see hub/finance.html's 2-column
   month/total mini-table and hub/calendar.html's 7-column month grid,
   neither of which gets this class).

   The core overflow rule below is UNCONDITIONAL -- deliberately OUTSIDE
   any media query, unlike the .table-responsive family above it. Reason:
   the surfaces whose column count needs more than the generic 640px floor
   (security_devices.html 760px, hub/listings.html + ads/dashboard.html
   860px) carry that floor as an INLINE min-width on the <table>, which is
   active at EVERY viewport width -- it cannot be media-gated from a
   stylesheet. Gating the overflow to <=767px while the floor stays
   unconditional left 768px+ (iPad portrait, a narrow laptop window) with a
   forced-wide table and no scroll affordance: at 768px security_devices'
   Bootstrap .container is 720px vs. a 760px table, and ads/dashboard's
   .studio is 736px vs. an 860px table -- the exact clipping symptom this
   task exists to remove. overflow-x:auto is a no-op when the content fits,
   so it costs nothing at desktop widths. Only the cosmetic treatment
   (hidden scrollbar + right-edge fade) and the generic 640px floor stay
   mobile-scoped, below.

   Invariant to preserve: the overflow rule's media scope must never be
   NARROWER than the scope of any min-width floor it protects. Guarded by
   apps/core/tests/test_css_tokens.py::TableScrollScopeTest. */
.ag-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

@media (max-width: 767px) {
  .ag-table-scroll {
    scrollbar-width: none;
    -ms-overflow-style: none;
    mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
  }
  .ag-table-scroll::-webkit-scrollbar {
    display: none;
  }
  .ag-table-scroll > table {
    min-width: 640px;
  }
}