/* ============================================================
   NxtBanking — Mobile Responsive Overrides
   Affects: all panels (WL admin, base admin, user pages)
   Does NOT touch style.css or sidebar-menu.dev.js
   ============================================================ */

/* ── GLOBAL: hide sidebar back/collapse button on all screens ── */
.sidebar-wrapper .back-btn {
  display: none !important;
}

/* ── MOBILE SIDEBAR DRAWER (≤ 991px) ─────────────────────── */
@media (max-width: 991px) {

  /* Sidebar: fixed off-screen drawer (overrides all theme states) */
  .page-body-wrapper div.sidebar-wrapper,
  .page-body-wrapper div.sidebar-wrapper.close_icon {
    position: fixed !important;
    left: -290px !important;
    width: 280px !important;
    top: 0 !important;
    bottom: 0 !important;
    z-index: 1055 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transition: left 0.26s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: none !important;
  }

  /* Open state — triggered by mobile JS via .mobile-open class.
     Second selector handles case where theme JS re-adds close_icon */
  .page-body-wrapper div.sidebar-wrapper.mobile-open,
  .page-body-wrapper div.sidebar-wrapper.close_icon.mobile-open {
    left: 0 !important;
    width: 280px !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25) !important;
  }

  /* Kill the hover-expand that fires on touch */
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:hover,
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon.mobile-open:hover {
    width: 280px !important;
  }
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:hover .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li > a span,
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:hover .sidebar-main-title {
    display: none !important;
  }
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.mobile-open .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li > a span,
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.mobile-open .sidebar-main-title {
    display: block !important;
    opacity: 1 !important;
  }

  /* ── HEADER: show hamburger + logo on mobile ──────────────
     Theme hides these in compact-wrapper (sidebar has them on desktop)
     On mobile, sidebar is off-screen so header must show them */

  /* ── HEADER LAYOUT ─────────────────────────────────────
     Override Bootstrap .row (flex-wrap:wrap) on header-wrapper
     so all children stay on a single horizontal line */
  .page-wrapper .page-header .header-wrapper.row,
  .page-wrapper.compact-wrapper .page-header .header-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    padding: 10px 14px !important;
    border-bottom: 1px solid #e0e0e0 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important;
    min-height: 56px;
    gap: 0;
  }

  /* header-logo-wrapper: flex ROW so logo + hamburger sit side by side */
  .page-wrapper .page-header .header-wrapper .header-logo-wrapper,
  .page-wrapper .page-header .header-wrapper .header-logo-wrapper.col-auto {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px;
    flex-shrink: 0;
    padding: 0 !important;
    max-width: none !important;
    width: auto !important;
  }

  /* Show logo in header on mobile */
  .page-wrapper.compact-wrapper .page-header .header-wrapper .logo-wrapper {
    display: flex !important;
    align-items: center;
    padding: 0 !important;
    margin: 0 !important;
  }
  .page-wrapper .page-header .header-wrapper .logo-wrapper img {
    max-height: 34px !important;
    width: auto !important;
    filter: none !important;
  }

  /* Show hamburger next to logo */
  .page-wrapper.compact-wrapper .page-header .header-wrapper .toggle-sidebar {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    background: rgba(0, 0, 0, 0.07);
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
    position: static !important;
  }
  .page-wrapper.compact-wrapper .page-header .header-wrapper .toggle-sidebar svg {
    width: 20px !important;
    height: 20px !important;
    stroke: #444 !important;
  }

  /* Sidebar open state — fix icon+text horizontal layout */
  .page-body-wrapper div.sidebar-wrapper.mobile-open .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li {
    width: 280px !important;
  }

  /* Force every sidebar link to be a horizontal flex row: [icon] [text] */
  .page-body-wrapper div.sidebar-wrapper.mobile-open .sidebar-link,
  .page-body-wrapper div.sidebar-wrapper.mobile-open .sidebar-title {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px;
    padding: 12px 20px !important;
    width: 100% !important;
  }
  /* Icon (svg or feather): fixed size, no grow */
  .page-body-wrapper div.sidebar-wrapper.mobile-open .sidebar-link svg,
  .page-body-wrapper div.sidebar-wrapper.mobile-open .sidebar-link .stroke-icon,
  .page-body-wrapper div.sidebar-wrapper.mobile-open .sidebar-link .fill-icon {
    flex-shrink: 0 !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
  }
  /* Text span: always visible, normal inline */
  .page-body-wrapper div.sidebar-wrapper.mobile-open .sidebar-link span,
  .page-body-wrapper div.sidebar-wrapper.mobile-open .sidebar-title span {
    display: inline !important;
    opacity: 1 !important;
    font-size: 14px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Chevron arrow for submenu items */
  .page-body-wrapper div.sidebar-wrapper.mobile-open .sidebar-link .according-menu {
    margin-left: auto !important;
    display: flex !important;
  }

  .page-body-wrapper div.sidebar-wrapper.mobile-open .logo-wrapper {
    display: flex !important;
  }
  .page-body-wrapper div.sidebar-wrapper.mobile-open .logo-icon-wrapper {
    display: none !important;
  }

  /* Page body: always full width on mobile (overrides theme 265px / 90px margin-left) */
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper ~ .page-body,
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon ~ .page-body,
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper ~ footer,
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon ~ footer,
  .page-wrapper.compact-wrapper .page-body-wrapper .page-body {
    margin-left: 0 !important;
  }

  /* Header: full width on mobile */
  .page-wrapper.compact-wrapper .page-header,
  .page-wrapper.compact-wrapper .page-header.close_icon {
    margin-left: 0 !important;
    width: 100% !important;
  }

  /* Hide the < back-btn collapse button on mobile (it breaks layout) */
  .sidebar-wrapper .logo-wrapper .back-btn,
  .sidebar-wrapper .back-btn:not(.sidebar-links .back-btn) {
    display: none !important;
  }

  /* Mobile backdrop overlay */
  .mobile-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.48);
    z-index: 1054;
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
  }
  .mobile-sidebar-overlay.active {
    display: block;
  }

  /* ── HEADER FIXES ─────────────────────────────────────── */

  /* Notification dropdown — prevent overflow off-screen */
  .onhover-dropdown .onhover-show-div.notification-dropdown {
    min-width: 300px !important;
    max-width: calc(100vw - 16px) !important;
    right: -10px !important;
    left: auto !important;
    width: 300px !important;
  }

  /* Profile dropdown — anchor to right edge */
  .profile-nav .profile-dropdown {
    right: 0 !important;
    left: auto !important;
    min-width: 170px !important;
  }

  /* Hide left-header entirely on mobile — it wraps to a second row at <576px
     creating a visible bar below the header. Its content (welcome + redundant
     toggle-sidebar) is not needed; hamburger is in header-logo-wrapper. */
  .page-header .header-wrapper .left-header {
    display: none !important;
  }
  /* nav-right: fill remaining space next to logo */
  .page-header .header-wrapper .nav-right {
    flex: 1 !important;
    max-width: unset !important;
    width: auto !important;
  }

  /* ── CARD / CONTENT FIXES ─────────────────────────────── */

  /* Page body: only reduce horizontal padding on mobile.
     DO NOT touch margin-top / padding-top — theme already sets margin-top:56px
     to clear the fixed 56px-tall header. Adding more would create a big white gap. */
  .page-body {
    padding-left: 8px !important;
    padding-right: 8px !important;
    padding-bottom: 20px !important;
    min-height: calc(100vh - 56px);
  }

  /* Cards: reduce padding on mobile */
  .card .card-body {
    padding: 12px !important;
  }
  .card .card-header {
    padding: 12px 14px !important;
  }

  /* ── TABLE OVERFLOW ───────────────────────────────────── */
  table {
    min-width: 480px;
  }
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── STAT CARDS: 2-col layout on mobile ──────────────── */
  .stat-card-col,
  .col-sm-6 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }

  /* ── FORM FIELDS: stack on mobile ────────────────────── */
  .form-mobile-stack > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* ── PAGE TITLE / BREADCRUMB ─────────────────────────── */
  .page-title {
    font-size: 1.1rem !important;
  }
  .breadcrumb {
    flex-wrap: wrap;
    font-size: 0.8rem;
  }

  /* ── MODAL: full screen on mobile ────────────────────── */
  .modal-dialog {
    margin: 8px !important;
    max-width: calc(100vw - 16px) !important;
  }
  .modal-body {
    padding: 14px !important;
  }

  /* ── TABS: scrollable on mobile ──────────────────────── */
  .nav-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    border-bottom: 2px solid #dee2e6 !important;
    scrollbar-width: none;
  }
  .nav-tabs::-webkit-scrollbar { display: none; }
  .nav-tabs .nav-link {
    white-space: nowrap !important;
  }

  /* ── BUTTONS: larger tap targets ─────────────────────── */
  .btn {
    min-height: 36px;
  }
  .btn-sm {
    min-height: 30px;
    font-size: 0.78rem !important;
  }

  /* ── FOOTER ──────────────────────────────────────────── */
  .footer,
  footer.footer {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 12px 10px !important;
  }
  .footer .row {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 8px;
  }
  .footer .footer-copyright {
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
  .footer .footer-copyright p {
    font-size: 0.78rem !important;
    text-align: center !important;
  }
  .footer .col-md-4,
  .footer .col-sm-6 {
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
  .footer .float-end {
    float: none !important;
  }
  .footer .d-inline-flex {
    justify-content: center !important;
    width: 100%;
  }
}

/* ── TABLET (992px – 1199px): minor tweaks ───────────────── */
@media (min-width: 992px) and (max-width: 1199px) {
  .notification-dropdown {
    min-width: 340px !important;
    max-width: 380px !important;
  }
  .page-body-wrapper div.sidebar-wrapper.close_icon ~ .page-body {
    margin-left: 80px !important;
  }
}

/* ── VERY SMALL SCREENS (≤ 380px) ───────────────────────── */
@media (max-width: 380px) {
  .onhover-dropdown .onhover-show-div.notification-dropdown {
    width: calc(100vw - 12px) !important;
    min-width: unset !important;
    right: -50px !important;
  }
  .page-body {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  .card .card-body {
    padding: 8px !important;
  }
}