/* ================================================================
   MOBILE-BANK.CSS — Global responsive overrides for index.html
   Eliminates ALL horizontal scroll on phones / small tablets.
   Breakpoints:
     ≤ 768px  — tablets & large phones
     ≤ 480px  — phones
     ≤ 380px  — small phones
   ================================================================ */

/* ── 0. BASE: prevent any element from overflowing the viewport ── */
*, *::before, *::after {
  box-sizing: border-box;
}
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}
#bankApp, #bankMain, .bpage, .bank-page {
  max-width: 100%;
  overflow-x: hidden;
}

/* ── 1. NAVIGATION ── */
@media (max-width: 768px) {
  .bank-nav {
    padding: 0 12px;
    gap: 8px;
  }
  /* Hide text labels on nav items — show only icons */
  .bank-nav-items .bank-nav-item span { display: none; }
  .bank-nav-items { gap: 0; }
}

/* ── 2. BPAGE PADDING ── */
@media (max-width: 768px) {
  #bpage-transfer,
  #bpage-history,
  #bpage-cards,
  #bpage-loans,
  #bpage-profile,
  #bpage-support,
  #bpage-about,
  .bpage {
    padding: 12px 12px 80px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}
@media (max-width: 480px) {
  #bpage-transfer,
  #bpage-history,
  #bpage-cards,
  #bpage-loans,
  #bpage-profile,
  #bpage-support,
  #bpage-about,
  .bpage {
    padding: 10px 10px 72px !important;
  }
}

/* ── 3. TRANSFER WIZARD ── */
@media (max-width: 768px) {
  /* Step bar: shrink labels */
  .tstep-label { font-size: 10px; }
  /* Transfer form: full-width inputs */
  #bpage-transfer input,
  #bpage-transfer select,
  #bpage-transfer textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Step rows that use grid or flex with fixed widths */
  .tx-step-body {
    padding: 14px !important;
  }
  .tx-contact-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .tx-amount-row {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .tx-amount-row > * { width: 100% !important; }
  /* Fee block */
  .tx-fee-row {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
}
@media (max-width: 480px) {
  .tstep-label { font-size: 9px; }
  .tx-contact-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 380px) {
  .tstep-label { display: none !important; }
}

/* ── 4. HISTORY PAGE ── */
@media (max-width: 768px) {
  /* Filters bar — stack vertically */
  .history-filters,
  #bpage-history .hist-filters,
  #bpage-history > div:first-child {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
  }
  #bpage-history > div:first-child button {
    width: 100% !important;
  }
  .history-filters input,
  .history-filters select,
  #histSearch, #histType, #histStatus, #histFrom, #histTo {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Table: horizontal scroll container */
  .table-wrap-bank,
  .history-layout .table-wrap-bank {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    width: 100% !important;
    max-width: 100vw !important;
  }
  .data-table { min-width: 480px; }
  /* Pagination */
  #histPagination {
    flex-wrap: wrap !important;
    gap: 4px !important;
    justify-content: center;
  }
}
@media (max-width: 480px) {
  .data-table { min-width: 420px; }
  .data-table th { padding: 7px 8px !important; font-size: 11px !important; }
  .data-table td { padding: 7px 8px !important; font-size: 11px !important; }
}

/* ── 5. CARDS PAGE ── */
@media (max-width: 768px) {
  #bpage-cards > div:first-child {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  #bpage-cards > div:first-child button { width: 100% !important; }

  /* cc-toggles (card settings) */
  .cc-toggles-grid { grid-template-columns: 1fr !important; }
}

/* ── 6. LOANS PAGE ── */
@media (max-width: 768px) {
  #bpage-loans > div:first-child {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  #bpage-loans > div:first-child button { width: 100% !important; }
  .loans-kpi-row { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .loans-product-grid { grid-template-columns: 1fr !important; }
  .loan-form-row { grid-template-columns: 1fr !important; }
  .loan-summary-grid { grid-template-columns: 1fr !important; }
  .loan-calc-grid { grid-template-columns: 1fr !important; }
  .loan-info-grid { grid-template-columns: 1fr 2fr !important; }
}
@media (max-width: 480px) {
  .loans-kpi-row { grid-template-columns: 1fr !important; }
  .loan-info-grid { grid-template-columns: 1fr !important; }
}

/* ── 7. PROFILE PAGE ── */
@media (max-width: 768px) {
  .profile-header-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 14px !important;
    gap: 12px !important;
  }
  .profile-header-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .profile-header-row button { width: 100% !important; }
  .pinfo-grid { grid-template-columns: 1fr !important; }
  /* Profile tabs horizontal scroll */
  .detail-tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 4px !important;
  }
  .detail-tabs::-webkit-scrollbar { display: none; }
  .detail-tab {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    font-size: 12px !important;
  }
  /* KYC docs grid */
  .kyc-docs-grid { grid-template-columns: 1fr !important; }
  /* 2FA, security sections */
  .tfa-section { padding: 14px !important; }
  .security-row {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .security-row button { width: 100% !important; }
}

/* ── 8. SUPPORT CHAT ── */
@media (max-width: 768px) {
  #bpage-support {
    padding: 12px !important;
    max-width: 100% !important;
  }
  #bankChatMessages { height: 280px !important; }
  .chat-input-area {
    padding: 10px 12px !important;
    gap: 8px !important;
  }
  #bankChatInput { font-size: 14px !important; }
}

/* ── 9. ABOUT PAGE — fix 3-column grid ── */
@media (max-width: 768px) {
  #bpage-about [style*="grid-template-columns:repeat(3"],
  #bpage-about [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
  }
  #bpage-about .bank-panel { padding: 20px !important; }
}
/* Fallback class-based */
.about-features-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 768px) {
  .about-features-grid { grid-template-columns: 1fr !important; }
}

/* ── 10. MODALS — slide up from bottom on mobile ── */
@media (max-width: 768px) {
  #bankModalOverlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  #bankModalBox,
  #bankModalOverlay .bank-modal {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92vh !important;
    border-radius: 20px 20px 0 0 !important;
    overflow-y: auto !important;
    padding-bottom: env(safe-area-inset-bottom, 16px) !important;
  }
  .bank-modal-footer {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .bank-modal-footer button,
  .bank-modal-footer .btn-bank-primary,
  .bank-modal-footer .btn-bank-outline {
    width: 100% !important;
    box-sizing: border-box;
  }
  .bank-modal .b-form-input,
  .bank-modal input:not([type=checkbox]):not([type=radio]),
  .bank-modal select,
  .bank-modal textarea {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .bank-modal-row { grid-template-columns: 1fr !important; }

  /* Forgot password / Registration overlay */
  #forgotPassOverlay > div,
  #registerOverlay > div {
    width: calc(100% - 16px) !important;
    max-width: 100% !important;
    margin: 8px !important;
    border-radius: 16px !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
  }

  /* Second modal (transfer confirm) */
  #bankModalOverlay2 > div,
  [id$="Overlay2"] > div {
    width: calc(100% - 16px) !important;
    max-width: 640px !important;
    margin: 8px auto !important;
    border-radius: 16px !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
  }
}

/* ── 11. NOTIFICATIONS PANEL ── */
@media (max-width: 480px) {
  #notifPanel {
    position: fixed !important;
    top: 52px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100vh - 130px) !important;
    box-sizing: border-box;
  }
}

/* ── 12. TOASTS ── */
@media (max-width: 768px) {
  .bank-toast-container,
  #bankToastContainer {
    bottom: 70px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
  }
  .bank-toast {
    width: 100% !important;
    font-size: 13px !important;
    box-sizing: border-box;
  }
}

/* ── 13. ANALYTICS PAGE ── */
@media (max-width: 768px) {
  .analytics-kpi-row { grid-template-columns: 1fr 1fr !important; }
  .analytics-grid    { grid-template-columns: 1fr !important; }
  .inv-kpi-strip     { flex-wrap: wrap !important; }
}
@media (max-width: 480px) {
  .analytics-kpi-row { grid-template-columns: 1fr !important; }
}

/* ── 14. GENERAL TABLES ── */
@media (max-width: 768px) {
  /* Any table not already wrapped: add scroll wrapper */
  table:not(.no-scroll) {
    min-width: 480px;
  }
  .table-scroll-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: 100vw;
  }
}

/* ── 15. FORM INPUTS — always full width on mobile ── */
@media (max-width: 768px) {
  .bpage input:not([type=checkbox]):not([type=radio]):not([type=range]),
  .bpage select,
  .bpage textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ── 16. BOTTOM NAV safe area ── */
@media (max-width: 768px) {
  .bank-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* ── 17. COMMISSION / KYC BANNER ── */
@media (max-width: 480px) {
  #verifBanner,
  .verif-kyc-banner,
  .commission-banner {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  #verifBanner .vkb-content,
  .verif-kyc-banner .vkb-content {
    flex: 1 1 100% !important;
  }
  #verifBanner .vkb-btn,
  .verif-kyc-banner .vkb-btn {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 11px !important;
  }
}

/* ── 18. REGISTRATION STEPPER (register.js) ── */
@media (max-width: 768px) {
  .reg-steps-bar { overflow-x: auto; scrollbar-width: none; }
  .reg-steps-bar::-webkit-scrollbar { display: none; }
  .reg-step-label { display: none; }
  .reg-form-grid { grid-template-columns: 1fr !important; }
  .reg-body { padding: 16px !important; }
}

/* ── 19. CARD CAROUSEL (dashboard hero) ── */
@media (max-width: 480px) {
  .bank-hero-cards { gap: 10px; }
  .bank-account-card { min-width: 220px !important; }
}