/*
 * Pocket Money — Mobile & Touch Compatibility Layer
 * Applied after theme.css on every page
 * ─────────────────────────────────────────────────
 * Targets:
 *   · iOS Safari auto-zoom prevention
 *   · Android Chrome touch targets
 *   · Offcanvas/modal overflow on small phones
 *   · Readable typography at all sizes
 *   · Smooth native scrolling
 */


/* ═══════════════════════════════════════════════════
   0. PASSWORD PLACEHOLDER — light grey so bullets don't
      look like real text on every browser/OS
   ═══════════════════════════════════════════════════ */
input[type="password"]::placeholder {
  color: #bbb;
  opacity: 1;
}

/* ═══════════════════════════════════════════════════
   1. iOS AUTO-ZOOM PREVENTION
   iOS zooms in when a focused input has font-size < 16px.
   Force all interactive inputs to 1rem (16px) minimum.
   ═══════════════════════════════════════════════════ */
input,
input.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="url"],
select,
select.form-select,
select.form-control,
textarea,
textarea.form-control {
  font-size: 1rem !important;
}

/* Keep OTP boxes readable but not too large */
.pm-otp-box {
  font-size: 1.25rem !important;
}


/* ═══════════════════════════════════════════════════
   2. OFFCANVAS PANELS — FULL WIDTH ON SMALL PHONES
   Admin form panels are 480–500px wide. On phones
   narrower than that they must fill the viewport.
   ═══════════════════════════════════════════════════ */
@media (max-width: 540px) {
  /* Admin slide-in form panels */
  .offcanvas-end {
    width: 100dvw !important;
    max-width: 100dvw !important;
  }

  /* CP mobile nav drawer — keep narrower so user can
     tap the backdrop to close */
  #cpNav.offcanvas-start {
    width: 88vw !important;
    max-width: 320px !important;
  }

  /* Bootstrap sidebar on admin pages */
  #sidebar.offcanvas-start {
    width: 88vw !important;
    max-width: 300px !important;
  }
}


/* ═══════════════════════════════════════════════════
   3. MODALS — RESPONSIVE ON MOBILE
   ═══════════════════════════════════════════════════ */
@media (max-width: 576px) {
  .modal-dialog {
    margin: 12px !important;
    max-width: calc(100vw - 24px) !important;
  }

  .modal-content {
    border-radius: 12px !important;
  }

  /* Panel footers inside modals */
  .modal-footer,
  .pm-panel__footer {
    padding: 12px 16px !important;
    flex-wrap: wrap;
    gap: 8px;
  }

  .modal-footer .btn,
  .pm-panel__footer .btn {
    flex: 1;
    justify-content: center;
    min-width: 100px;
  }
}


/* ═══════════════════════════════════════════════════
   4. MINIMUM TOUCH TARGETS (44 × 44px)
   Apple HIG and Android Material both require 44pt
   minimum for any interactive element.
   ═══════════════════════════════════════════════════ */
.btn {
  min-height: 36px;
}

.btn-view {
  min-height: auto!important;
}

.btn-lg {
  min-height: 44px;
}

/* Nav items in admin sidebar */
.pm-rail__item {
  min-height: 38px;
}

/* CP nav links */
.cp-nav-link {
  min-height: 38px;
}

/* Dropdown items */
.dropdown-item,
.pm-dropdown-item {
  min-height: 40px;
  display: flex;
  align-items: center;
}


/* ═══════════════════════════════════════════════════
   5. TABLES — SMOOTH HORIZONTAL SCROLL
   max-width: 100% constrains the scroll zone to the
   viewport so the table can overflow it and scroll.
   touch-action: pan-x allows horizontal touch swipe
   inside the container on iOS/Android.
   ═══════════════════════════════════════════════════ */
.table-responsive,
[style*="overflow-x:auto"],
[style*="overflow-x: auto"] {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  max-width: 100%;
  touch-action: pan-x pan-y;
}

@media (max-width: 767px) {
  /* Reduce dense table padding on mobile */
  .pm-table td,
  .pm-table th {
    padding: 10px 12px !important;
    white-space: nowrap;
  }
}


/* ═══════════════════════════════════════════════════
   6. TAB BARS — HORIZONTAL SCROLL (no wrap)
   Prevents tabs from wrapping into ugly multi-rows
   on narrow viewports.
   ═══════════════════════════════════════════════════ */
@media (max-width: 576px) {
  .pm-tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  .pm-tabs::-webkit-scrollbar {
    display: none;
  }

  .pm-tab {
    white-space: nowrap;
    flex-shrink: 0;
  }
}


/* ═══════════════════════════════════════════════════
   7. OTP INPUT ROW — SPACING & SIZING
   ═══════════════════════════════════════════════════ */
.pm-otp-row {
  gap: 8px !important;
}

@media (max-width: 380px) {
  .pm-otp-box {
    width: 40px !important;
    height: 48px !important;
  }

  .pm-otp-row {
    gap: 6px !important;
  }
}


/* ═══════════════════════════════════════════════════
   8. ADMIN TOPBAR — TIGHTER ON MOBILE
   ═══════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .pm-topbar {
    padding: 0 12px !important;
    gap: 8px !important;
  }
}


/* ═══════════════════════════════════════════════════
   9. CUSTOMER PORTAL — HERO CARD RESPONSIVE NUMBERS
   The large portfolio balance number needs to scale
   down on small phones (< 400px).
   ═══════════════════════════════════════════════════ */
@media (max-width: 400px) {
  .num-display {
    font-size: 1.625rem !important;
  }

  /* Hero balance in cp-home */
  [style*="font-size:2.25rem"] {
    font-size: 1.75rem !important;
  }

  [style*="font-size:1.5rem"] {
    font-size: 1.25rem !important;
  }
}

/* Stats row inside hero — stack on very small screens */
@media (max-width: 360px) {
  .cp-page {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}


/* ═══════════════════════════════════════════════════
   10. DROPDOWN MENUS — SCROLLABLE ON MOBILE
   Prevents long dropdowns from overflowing the screen.
   ═══════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .dropdown-menu {
    max-height: 55vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* ═══════════════════════════════════════════════════
   11. ADMIN OFFCANVAS BODY — SCROLLABLE
   Form panels need to scroll when content is taller
   than the viewport (very common on small phones).
   ═══════════════════════════════════════════════════ */
.offcanvas-body {
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
}


/* ═══════════════════════════════════════════════════
   12. SMOOTH SCROLLING — NATIVE iOS/ANDROID FEEL
   ═══════════════════════════════════════════════════ */
.pm-scroll,
.pm-content,
.cp-content,
.pm-page,
.cp-page {
  -webkit-overflow-scrolling: touch;
}


/* ═══════════════════════════════════════════════════
   13. PREVENT GLOBAL HORIZONTAL OVERFLOW
   Only applied to body — NOT html. Setting overflow-x
   on the html element blocks ALL horizontal touch-
   scrolling in child elements on iOS Safari (WebKit
   bug), which prevents table scroll zones from working.
   ═══════════════════════════════════════════════════ */
body {
  overflow-x: hidden;
  max-width: 100%;
}


/* ═══════════════════════════════════════════════════
   14. AUTH PAGES — LOGIN / FORGOT PASSWORD
   The form card needs breathing room on very small
   screens.
   ═══════════════════════════════════════════════════ */
@media (max-width: 400px) {
  .pm-auth__form-card {
    padding: 24px 18px !important;
    gap: 18px !important;
  }

  .pm-auth__form-wrap {
    padding: 16px !important;
  }
}


/* ═══════════════════════════════════════════════════
   15. SAFE AREA INSETS — NOTCH & HOME BAR (iOS)
   Prevents content from being hidden behind the
   notch or home indicator on modern iPhones.
   ═══════════════════════════════════════════════════ */
.cp-mobile-bar,
.pm-topbar {
  padding-left: max(16px, env(safe-area-inset-left)) !important;
  padding-right: max(16px, env(safe-area-inset-right)) !important;
}

.cp-sidebar,
.pm-rail {
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}

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


/* ═══════════════════════════════════════════════════
   16. FILTER / PILL ROWS — WRAP GRACEFULLY
   Admin deposit filters (All Banks, status pills) can
   overflow on narrow screens.
   ═══════════════════════════════════════════════════ */
@media (max-width: 576px) {
  .d-flex.flex-wrap {
    gap: 6px !important;
  }

  /* Stat cards inside hero — allow natural wrap */
  .pm-auth__stat-row {
    flex-wrap: wrap;
    gap: 16px;
  }
}


/* ═══════════════════════════════════════════════════
   17. CARD & SECTION PADDING — TIGHTER ON PHONE
   ═══════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .section-card {
    padding: 16px !important;
  }

  .dep-card__body {
    padding: 14px 16px !important;
  }

  .dep-card__head {
    padding: 12px 16px !important;
  }
}


/* ═══════════════════════════════════════════════════
   18. FIELD ROWS — SINGLE COLUMN ON MOBILE
   Two-column grids inside forms must stack on phones.
   ═══════════════════════════════════════════════════ */
@media (max-width: 540px) {
  .field-row {
    grid-template-columns: 1fr !important;
  }
}


/* ═══════════════════════════════════════════════════
   19. WITHDRAWAL SUCCESS / CONFIRMATION PAGES
   ═══════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* CTA buttons stack on mobile */
  .d-flex.gap-3 .btn {
    flex: 1 1 100%;
  }
}


/* ═══════════════════════════════════════════════════
   20. ACTIVE STATE FEEDBACK — BETTER ON TOUCH
   Removes the 300ms click delay on modern mobile
   browsers and gives immediate visual feedback.
   ═══════════════════════════════════════════════════ */
* {
  touch-action: manipulation;
}

/* Ripple-like feedback on tap */
.btn:active,
.cp-nav-link:active,
.pm-rail__item:active,
.pm-tab:active {
  opacity: 0.75;
  transition: opacity 0.1s;
}


/* ═══════════════════════════════════════════════════
   21. FILTER BARS — STACK CLEANLY ON MOBILE
   Covers two patterns:
   a) .card > .d-flex.flex-wrap  (clients, deposits,
      withdrawals, tickets, ledger, portal/transactions)
   b) form.d-flex.flex-wrap      (all 5 report pages)
   ═══════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Search box: fill available width instead of fixed 240–260px */
  .card .pm-search {
    width: 100% !important;
    flex: 1 1 100%;
  }

  /* Tab bars inside filter cards: scroll horizontally */
  .card .pm-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    flex: 1 1 100%;
    order: 2;
  }

  /* Hide the flex spacer in card-style filter bars
     (the empty flex-grow-1 div that pushes buttons to a new row) */
  .card .d-flex.flex-wrap > .flex-grow-1:empty,
  form.d-flex.flex-wrap > .flex-grow-1 {
    display: none !important;
  }

  /* Apply / Search / Clear buttons: natural width, don't stretch
     — both card-wrapped and bare-form patterns */
  .card form .btn-primary.btn-sm,
  .card form .btn-light.btn-sm,
  .card form .btn-outline-secondary.btn-sm,
  form.d-flex.flex-wrap .btn-primary.btn-sm,
  form.d-flex.flex-wrap .btn-light.btn-sm,
  form.d-flex.flex-wrap .btn-outline-secondary.btn-sm {
    width: auto !important;
    flex: none !important;
    align-self: flex-start;
  }
}