/* ============================================================================
   ELITE RMB — MOBILE (phone/tablet) LAYER
   ----------------------------------------------------------------------------
   Single, LAST-loaded mobile stylesheet for every surface: landing, customer,
   admin and the public SEO pages. Loaded after elite-unified.css and
   elite-brand.css so it always wins the cascade on phones without needing to
   chase `!important` in the older files.

   WHY THIS FILE EXISTS
   --------------------
   The mobile rules were previously spread across six stylesheets plus a large
   inline <style> block in index.php. The same selector was sometimes declared
   three or four times (`.swift-nav-toggle` has six blocks), so a fix in one
   place was silently undone by another — which is exactly how the mobile menu
   ended up looking "faded" while measuring `opacity: 1`.

   Everything here is scoped to a `@media (max-width: …)` query, so desktop is
   untouched by construction. Nothing here changes markup, PHP logic, JSON APIs
   or any backend behaviour.

   BREAKPOINTS (matched to the existing system, not invented)
     <= 767px  phone            (the app's existing "mobile" breakpoint)
     <= 480px  small phone      (320/360/375/390/412/430 all land here)
     <= 360px  very small phone (320/360 tightening only)
   ============================================================================ */

/* ============================================================================
   1. SAFE AREAS / VIEWPORT
   ----------------------------------------------------------------------------
   With `viewport-fit=cover` the page extends under the notch and the home
   indicator. These rules keep the chrome clear of both without adding padding
   everywhere: only the sticky header, the fixed floating controls and the
   bottom-anchored panels get safe-area treatment.
   ============================================================================ */

/* The sticky header must clear the status bar / notch. */
@supports (padding: env(safe-area-inset-top)) {
  @media (max-width: 767px) {
    .swift-nav,
    .page-admin .admin-topbar {
      padding-top: env(safe-area-inset-top);
    }
    .swift-nav-inner {
      padding-left: max(1rem, env(safe-area-inset-left));
      padding-right: max(1rem, env(safe-area-inset-right));
    }
  }
}

/* ============================================================================
   2. THE MOBILE MENU — the reported "faded / partially hidden" failure
   ----------------------------------------------------------------------------
   ROOT CAUSE (measured, not assumed):

   The mobile menu lives INSIDE `.swift-nav`
     nav.swift-nav  >  div.swift-nav-inner  >  div.swift-mobile-menu
   and `.swift-nav` is `position: sticky; z-index: 1000` with a translucent
   background (`rgba(255,255,255,.95)` + `backdrop-filter: blur(8px)`).

   `.swift-nav-backdrop` is a SIBLING of the nav (`document.body > .swift-nav-
   backdrop`) and was declared `z-index: 999` while the menu itself only got
   `z-index: 1001` at <=767px. At exactly 768px — a real breakpoint, and iPad /
   landscape-phone width — the menu had NO z-index and NO opaque background
   rule, so the dimming backdrop painted ON TOP of it and the translucent nav
   painted over its own menu. Result: menu rows visible but faded, low contrast
   and partly untappable, while `getComputedStyle(menu).opacity` still read `1`.
   That is why "just raise the z-index" never fixed it.

   THE FIX: make the open menu an opaque, top-of-stack OVERLAY PANEL that is
   positioned `fixed` (so the sticky nav's stacking context and its
   backdrop-filter cannot paint over it), pin it below the header, make it
   internally scrollable, lock the page behind it, and put the backdrop BETWEEN
   the page and the panel instead of above it.
   ============================================================================ */

@media (max-width: 900px) {
  /* The backdrop dims the page. It must sit above page content but BELOW both
     the header and the panel, so every menu row stays fully visible and
     tappable. (Was 999 / 998 — above a 768px menu that had no z-index.) */
  .swift-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 997;
    background: rgba(15, 23, 42, .45);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .swift-nav-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* The header itself sits just under the panel. */
  .swift-nav {
    z-index: 998;
  }

  .swift-mobile-menu {
    /* OPAQUE in every theme — the old rule let the nav's own translucent
       background show through underneath the rows. */
    background: var(--elite-white, #fff);
    background-image: none;
    box-shadow: 0 18px 38px -18px rgba(15, 23, 42, .45);
  }

  .swift-mobile-menu.open {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    /* Anchored directly under the (variable-height) sticky header. */
    top: var(--swift-nav-h, 56px);
    width: auto;
    max-height: calc(100dvh - var(--swift-nav-h, 56px));
    max-height: calc(100vh - var(--swift-nav-h, 56px));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    flex-direction: column;
    align-items: stretch;
    z-index: 999;
    box-sizing: border-box;
    padding: .5rem 1rem calc(1rem + env(safe-area-inset-bottom));
    /* `fixed` escapes the nav's `backdrop-filter` containing block, which is
       what previously let the blurred nav paint over its own open menu. */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* Every row is a real, comfortable tap target with a visible pressed state.
     Hover does not exist on touch, so :active/:focus-visible carry the state. */
  .swift-mobile-menu a,
  .swift-mobile-menu button {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    min-height: 48px;
    padding: .8rem .9rem;
    box-sizing: border-box;
    border-radius: 8px;
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
    /* Icons are real glyphs, never clipped by a fixed row height. */
    white-space: normal;
    overflow-wrap: anywhere;
    -webkit-tap-highlight-color: rgba(23, 88, 209, .12);
    touch-action: manipulation;
  }
  .swift-mobile-menu a i,
  .swift-mobile-menu button i {
    flex: 0 0 auto;
    width: 18px;
    text-align: center;
    font-size: .95rem;
  }

  /* Visible feedback the instant a row is pressed. */
  .swift-mobile-menu a:active,
  .swift-mobile-menu button:active {
    background: rgba(23, 88, 209, .12);
  }
  .swift-mobile-menu a:focus-visible,
  .swift-mobile-menu button:focus-visible {
    outline: 2px solid var(--elite-blue, #1758D1);
    outline-offset: -2px;
  }

  /* The active/current page is unmistakable, not just slightly greener. */
  .swift-mobile-menu a.active,
  .swift-mobile-menu a[aria-current="page"] {
    background: var(--elite-blue-soft, #EAF1FF);
    color: var(--elite-blue-dark, #0F47B0);
    font-weight: 700;
  }
}

/* The mobile menu must be able to breathe on the very smallest phones too,
   where 12 rows exceed the visible area: it scrolls, it is never clipped. */
@media (max-width: 767px) {
  .swift-mobile-menu.open {
    max-height: calc(100dvh - var(--swift-nav-h, 56px));
  }
}

@media (max-width: 1023px) {
  .page-client .swift-nav-toggle {
    display: flex !important;
    background: rgba(255, 255, 255, .14) !important;
    border: 1px solid rgba(255, 255, 255, .55) !important;
    color: #fff !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .08), 0 4px 12px rgba(0, 0, 0, .2) !important;
  }

  .page-client .swift-nav-toggle:hover,
  .page-client .swift-nav-toggle:focus-visible {
    background: rgba(255, 255, 255, .24) !important;
    border-color: #fff !important;
    color: #fff !important;
  }

  .page-client .swift-mobile-menu > a.swift-nav-link {
    color: #102b5c !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    border-bottom: 1px solid #e2e8f0 !important;
  }

  .page-client .swift-mobile-menu > a.swift-nav-link.active,
  .page-client .swift-mobile-menu > a.swift-nav-link[aria-current="page"] {
    background: #dce9ff !important;
    color: #092f78 !important;
    font-weight: 800 !important;
    border-left: 4px solid #20b96b !important;
  }
}

/* Dark theme: the panel is opaque and its rows keep full contrast. */
html[data-theme="dark"] .swift-mobile-menu {
  background: #172335;
  background-image: none;
  border-color: #26364a;
}
html[data-theme="dark"] .swift-mobile-menu a:active,
html[data-theme="dark"] .swift-mobile-menu button:active {
  background: #1e2c42;
}
html[data-theme="dark"] .swift-mobile-menu a.active,
html[data-theme="dark"] .swift-mobile-menu a[aria-current="page"] {
  background: #14263f;
  color: #cfe0f7;
}

/* ============================================================================
   3. WHATSAPP LAUNCHER — it was physically on top of the Assistant launcher
   ----------------------------------------------------------------------------
   `includes/chat_widget.php` renders `.elite-wa-float` with `position: fixed`
   but NO z-index, while the chatbot launcher uses `z-index: 2147483000`. The
   WhatsApp button therefore stacked by DOM order lower than the Assistant but
   could still be overlapped by other fixed chrome, and on phones the two
   launchers sat close enough to be mis-taps. Pin it, and give both a matched,
   safe-area-aware bottom offset so neither hides under the home indicator.
   ============================================================================ */
.elite-wa-float {
  z-index: 2147482000;
}
@media (max-width: 480px) {
  .elite-wa-float {
    /* Clears the home indicator on iPhone and the gesture bar on Android. */
    bottom: calc(18px + env(safe-area-inset-bottom));
    left: max(16px, env(safe-area-inset-left));
  }
}

/* ============================================================================
   4. HORIZONTAL OVERFLOW — fix the element, not the symptom
   ----------------------------------------------------------------------------
   `overflow-x: hidden` on html/body is already set globally and is NOT a real
   fix: it silently clips content that the user then cannot reach. The actual
   offenders are unbreakable strings (transaction references, URLs, emails,
   long currency numerals) inside flex/grid children that default to
   `min-width: auto`. Allow those to wrap and let their containers shrink.
   ============================================================================ */
@media (max-width: 767px) {
  /* Grid/flex children must be allowed to shrink below their content width. */
  .swift-card,
  .swift-panel,
  .dashboard-modern-card,
  .elite-stat,
  .admin-stat-card,
  .swift-table-wrapper,
  .container,
  .swift-container,
  .admin-content {
    min-width: 0;
  }

  /* References, codes, links, emails: break rather than push the layout wide. */
  .swift-code,
  code,
  kbd,
  samp,
  .comm-monospace {
    overflow-wrap: anywhere;
    word-break: break-all;
    white-space: normal;
  }
  a[href^="mailto:"],
  a[href^="http"],
  .enc-item-message,
  .enc-item-title,
  .notification-item__text {
    overflow-wrap: anywhere;
  }

  /* Headings and large figures must be able to wrap on a 320px screen. */
  h1, h2, h3, h4 {
    overflow-wrap: break-word;
  }
  .rate-pair-value,
  .big-rate,
  .rate-number,
  .swap-rate-value,
  .elite-rate-display__value,
  .elite-stat-value {
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
  }

  /* Preformatted / log output cannot force the whole page sideways. */
  pre {
    white-space: pre-wrap;
    word-break: break-word;
    max-width: 100%;
    overflow-x: auto;
  }

  /* Images and media never exceed their container. */
  img, svg, video, canvas, iframe {
    max-width: 100%;
  }
  img {
    height: auto;
  }
}

/* ============================================================================
   5. TABLES — contain the scroll, never the page
   ----------------------------------------------------------------------------
   Wide financial tables are correct on a phone ONLY if they scroll inside their
   own container. `min-width: 640px` is applied elsewhere to `.swift-table-
   wrapper table` / `.overflow-x-auto table`; that is fine as long as the
   wrapper itself is width-constrained and actually scrollable. These rules
   guarantee both, and add a right-edge fade so it is obvious the table scrolls.
   ============================================================================ */
@media (max-width: 767px) {
  .swift-table-wrapper,
  .table-scroll,
  .table-responsive,
  .overflow-x-auto {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    box-sizing: border-box;
  }

  /* Any table that is NOT explicitly turned into a stacked card list must be
     allowed to scroll inside its wrapper rather than widen the page. */
  .swift-table-wrapper > table,
  .table-scroll > table,
  .table-responsive > table,
  .overflow-x-auto > table {
    margin-bottom: 0;
  }

  /* Touch-friendly pagination and table action buttons. */
  .swift-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
  }
  .swift-row-actions .swift-btn,
  .pagination a,
  .pagination button,
  .page-link {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ============================================================================
   6. TOUCH TARGETS
   ----------------------------------------------------------------------------
   Interactive elements that are icon-only or compact on desktop are hard to hit
   on a phone. Raise the small ones to a comfortable minimum WITHOUT inflating
   the deliberate desktop sizing (this is inside a max-width query).
   ============================================================================ */
@media (max-width: 767px) {
  /* Icon-only controls in navs, headers, tables and cards. */
  .swift-nav-toggle,
  .elite-nav-toggle,
  .page-admin .admin-topbar button,
  .swift-icon-btn,
  .enc-icon-btn,
  [class*="icon-btn"],
  [class*="close-btn"],
  .modal-close,
  .swift-modal__close {
    min-width: 44px;
    min-height: 44px;
  }

  /* Checkboxes / radios get a bigger hit area without changing their look. */
  input[type="checkbox"],
  input[type="radio"] {
    min-width: 20px;
    min-height: 20px;
  }
  label {
    min-height: 24px;
  }

  /* Tabs and segmented controls are frequently tapped; keep them >=44px. */
  [role="tab"],
  .swift-converter-tab,
  .tab,
  .nav-tab {
    min-height: 44px;
  }

  /* Dropdowns and selects are hard to operate if too short. */
  select,
  .swift-select {
    min-height: 46px;
  }
}

/* ============================================================================
   7. TYPOGRAPHY & HEADING RHYTHM
   ----------------------------------------------------------------------------
   A 2.25rem desktop heading inside a 320px card looks broken. Headings use
   `clamp()` so they scale fluidly instead of needing a rule per breakpoint, and
   the *desktop* value is the clamp maximum so nothing changes above 767px.
   ============================================================================ */
@media (max-width: 967px) {
  .swift-hero h1,
  .swift-hero h1.swift-hero-title-orange,
  .elite-hero h1 {
    font-size: clamp(1.6rem, 6.6vw, 2.4rem);
    line-height: 1.16;
  }
}

@media (max-width: 767px) {
  /* Long inline labels (amounts, references) wrap instead of clipping. */
  .swift-btn,
  a.swift-btn,
  button.swift-btn {
    white-space: normal;
    max-width: 100%;
  }
}

/* ============================================================================
   8. FLOATING SUPPORT BUTTONS vs. PAGE CONTENT
   ----------------------------------------------------------------------------
   Two fixed launchers (WhatsApp bottom-left, Assistant bottom-right) plus the
   in-flow "Need Help?" pill on the dashboard. On a phone the footer and the
   last card must clear all three, otherwise the launchers cover real controls.
   ============================================================================ */
@media (max-width: 767px) {
  .page-client footer,
  .page-landing footer,
  body > footer {
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
  }

  /* The dashboard's in-flow support pill: full width, comfortable, and clear of
     the two fixed launchers above it. */
  .dashboard-support {
    max-width: 100%;
  }
  .dashboard-support a {
    width: 100%;
    min-height: 48px;
    box-sizing: border-box;
    margin-bottom: calc(4.25rem + env(safe-area-inset-bottom));
  }

  /* The notification panel is a full-height drawer on a phone; make sure its
     own header and footer respect the safe areas. */
  .elite-notification-center .elite-notification-list {
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
  }
}

/* ============================================================================
   9. MODALS / DIALOGS
   ----------------------------------------------------------------------------
   A modal taller than the viewport must scroll its BODY while its close button
   and action row stay reachable.
   ============================================================================ */
@media (max-width: 767px) {
  .modal,
  .swift-modal,
  [role="dialog"].modal,
  [role="dialog"][class*="modal"] {
    position: fixed;
    inset: auto 0 0 0;
    top: auto;
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - env(safe-area-inset-top));
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 16px 16px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: border-box;
  }
  .modal-content,
  .swift-modal__body,
  .modal-body {
    max-height: 60dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Action rows stack full width so neither button is cut off. */
  .modal-footer,
  .swift-modal__footer {
    display: flex;
    flex-direction: column-reverse;
    gap: .5rem;
  }
  .modal-footer .swift-btn,
  .modal-footer button,
  .swift-modal__footer .swift-btn,
  .swift-modal__footer button {
    width: 100%;
    min-height: 46px;
  }
}

/* ============================================================================
   11. ADMIN — the tables must scroll INSIDE their column, not stretch the page
   ----------------------------------------------------------------------------
   MEASURED at 320px on public/admin/index.php: `body` computed to 304px and a
   dashboard <table class="min-w-full …"> was 640px wide with its right edge at
   685px. Two earlier rules combined to produce that:

     .page-admin .admin-main { overflow-x: hidden }        (hides the overflow)
     .page-admin .admin-content table { min-width: 640px } (forces the width)

   and the table had NO scrollable ancestor — it was a direct child of a plain
   <div class="-mx-4 …">. `min-width: 640px` inside `overflow-x: hidden` means
   the table cannot scroll and cannot fit, so the whole admin column stretched
   and the layout slid sideways under a "body width > viewport" overflow.

   The fix: every admin table gets its own scrolling context. `.admin-main`
   keeps `overflow-x: hidden` (it is the outer guard), so the table must be the
   element that scrolls — hence `overflow-x: auto` ON the table itself, plus
   `display: block` so an auto overflow applies to it at all (`table` children
   would ignore it otherwise). Browser-feature tested on WebKit/Chromium/Firefox.
   ============================================================================ */
@media (max-width: 767px) {
  .page-admin .admin-main,
  .page-admin .admin-content {
    max-width: 100%;
    min-width: 0;
  }

  /* Any table that is not already inside an explicit scroll wrapper becomes
     one. `display: block` is what makes `overflow-x` effective on a table. */
  .page-admin table:not(.swift-table):not(.mobile-stack-table) {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;               /* overrides the 640px desktop minimum */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  /* When the table IS wrapped, the wrapper scrolls instead and the table keeps
     its natural width. */
  .page-admin .overflow-x-auto > table,
  .page-admin .swift-table-wrapper > table {
    display: table;
    width: 100%;
  }

  /* Rows keep their column alignment rather than wrapping into unreadable
     stacks — the table scrolls, which is the intended pattern here. */
  .page-admin table td,
  .page-admin table th {
    white-space: nowrap;
  }

  /* Tailwind's `-mx-4`/`-mx-6` negative gutters push content wider than their
     parent by design; inside a phone-width admin column that alone can exceed
     the viewport. Neutralise them below the phone breakpoint. */
  .page-admin [class*="-mx-"] {
    margin-left: 0;
    margin-right: 0;
  }

  /* Admin action rows (View / Edit / Delete) become a comfortable vertical
     stack rather than a cramped inline run that overflows the cell. */
  .page-admin .admin-content td .flex,
  .page-admin .admin-content td .actions {
    flex-wrap: wrap;
    gap: .4rem;
  }
  .page-admin .admin-content td a,
  .page-admin .admin-content td button {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  /* Stat cards: one comfortable column, consistent gaps. */
  .page-admin .elite-stat-grid,
  .page-admin .admin-content .grid.grid-cols-2,
  .page-admin .admin-content .grid.grid-cols-3,
  .page-admin .admin-content .grid.grid-cols-4 {
    grid-template-columns: 1fr !important;
    gap: .75rem;
  }
}

/* ============================================================================
   12. REDUCED MOTION / TRANSPARENCY
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .swift-mobile-menu,
  .swift-nav-backdrop,
  .elite-nav-menu,
  .elite-nav-backdrop,
  .page-admin .swift-sidebar,
  .page-admin .swift-sidebar-overlay {
    transition: none !important;
  }
}