/* =============================================================
   ABSA — Mobile responsive overrides for BOTH dashboards
   (customer dashboard.php and admin/index.php)

   Drop-in stylesheet: include AFTER dashboard.css / AdminLTE so
   it wins specificity ties.

   Breakpoints:
     xs  < 576px   (iPhone SE, Galaxy A)
     sm  576-767   (iPhone 12+, Galaxy S)
     md  768-991   (iPad portrait, tablets)
     lg  992-1199  (iPad landscape, small laptops)
     xl  >= 1200   (desktop)
   ============================================================= */

/* ---------- GLOBAL (all viewports) ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

img, video, svg { max-width: 100%; height: auto; }

table { max-width: 100%; }

/* Make every scrollable container have momentum scrolling on iOS */
.scrollable, .table-responsive, .panel-body, .card-body, .modal-body {
  -webkit-overflow-scrolling: touch;
}

/* ===========================================================
   1.  ADMIN SIDEBAR — hide on mobile, slide in via hamburger
   =========================================================== */
.main-sidebar {
  transition: transform 0.25s ease;
  will-change: transform;
}

@media (max-width: 991.98px) {
  /* Push the sidebar OFF-screen by default on tablet & below.
     margin-left is neutralised as well so AdminLTE's own
     sidebar-collapse state can never shift it back into view. */
  .main-sidebar {
    transform: translateX(-100%) !important;
    margin-left: 0 !important;
    box-shadow: 2px 0 12px rgba(0,0,0,0.25);
    z-index: 1040;
  }
  /* Slide the sidebar in when the body carries .eq-sidebar-open.
     We deliberately do NOT react to AdminLTE's own .sidebar-open:
     its pushmenu script also toggles that class on mobile, so the
     two toggles cancelled each other out and the sidebar never
     appeared. eq-sidebar-open is ours alone. */
  body.eq-sidebar-open .main-sidebar {
    transform: translateX(0) !important;
  }
  /* The main content always takes the full width on mobile. */
  .content-wrapper,
  .main-header.navbar,
  .main-footer {
    margin-left: 0 !important;
  }
  /* The hamburger button should be visible on mobile. */
  [data-widget="pushmenu"] { display: inline-block !important; }
}

@media (min-width: 992px) {
  /* Desktop: sidebar visible by default, AdminLTE handles the collapse.
     The hamburger stays available so admins can collapse the menu. */
  .main-sidebar { transform: none !important; }
  .absa-sidebar-backdrop { display: none !important; }
}

/* Backdrop overlay when sidebar is open on mobile (added by JS) */
.absa-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1035;
}
body.eq-sidebar-open .absa-sidebar-backdrop { display: block; }

/* ===========================================================
   2.  ADMIN DASHBOARD — content layout
   =========================================================== */

/* Stat boxes: ensure 2x2 grid on small phones instead of 1x4 stack */
@media (max-width: 575.98px) {
  .small-box .inner h3 { font-size: 1.5rem; }
  .small-box .inner p  { font-size: 0.8rem; }
  .small-box .icon    { font-size: 1.4rem !important; right: 8px !important; }
  .small-box { padding: 10px !important; }
}

/* Tables: wrap in a horizontally scrollable container so they
   don't overflow the viewport on small screens. */
@media (max-width: 767.98px) {
  .box-body > table,
  .box-body .table,
  .box-body .dataTable,
  .box-body .table-responsive,
  table.table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Card headers: wrap text and allow padding to shrink */
  .card-header { padding: 10px 12px; }
  .card-header .card-title { font-size: 0.95rem; line-height: 1.2; }
  /* Drop the giant card headers' icons a bit */
  .card-header .btn-group { margin-top: 4px; }

  /* Keep the action column pinned to the right of a scrolling table so
     buttons (Approve/Reject/Freeze...) stay reachable on a phone.
     NOTE: sticky positioning on table cells is ignored while the table
     uses border-collapse:collapse, so switch to separate borders here. */
  .table-responsive > table {
    border-collapse: separate;
    border-spacing: 0;
  }
  .table-responsive > table > tbody > tr > td:last-child,
  .table-responsive > table > thead > tr > th:last-child {
    position: sticky;
    right: 0;
    z-index: 2;
    background: #fff;
    box-shadow: -7px 0 8px -7px rgba(0, 0, 0, .25);
  }
  .table-responsive > table > thead > tr > th:last-child {
    background: #343a40;
    z-index: 3;
  }
  .table-responsive > table > tbody > tr:nth-of-type(odd) > td:last-child {
    background: #f9f9f9;
  }
  .table-responsive > table > tbody > tr:hover > td:last-child {
    background: #f1f1f1;
  }
}

/* Hide long secondary columns on small screens to keep tables readable.
   OPT-IN ONLY: add class="eq-table-compact" to a table. Blanket rules
   like ".table td:nth-child(7) { display:none }" hide action buttons
   (Approve/Reject) on tables that need them, so they are never applied
   globally. */
@media (max-width: 767.98px) {
  .eq-table-compact th:nth-child(5),
  .eq-table-compact td:nth-child(5),
  .eq-table-compact th:nth-child(6),
  .eq-table-compact td:nth-child(6),
  .eq-table-compact th:nth-child(7),
  .eq-table-compact td:nth-child(7) { display: none; }
  /* ...unless the column is marked as important */
  .eq-table-compact .eq-keep { display: table-cell !important; }
}

/* "Account Status" progress bars: stack vertically on small screens */
@media (max-width: 575.98px) {
  .progress-group { display: block !important; }
  .progress-group .progress { margin-bottom: 8px; }
}

/* Held Accounts table: truncate the long Reason text */
@media (max-width: 767.98px) {
  .absa-truncate { display: block; max-width: 220px; white-space: normal; }
}

/* Box (card) headers don't overflow */
.box-header,
.card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.box-header .box-title,
.card-header .card-title { flex: 1 1 200px; min-width: 0; }
.box-header .box-tools,
.card-header .card-tools { flex: 0 0 auto; }

/* Nav pills in card headers — wrap on small screens */
.nav-pills { flex-wrap: wrap; }

/* ===========================================================
   3.  CUSTOMER DASHBOARD (dashboard.php) — content layout
   =========================================================== */

/* Welcome section: stack the action buttons on top of the heading */
.welcome-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 20px 16px;
}
.welcome-content { flex: 1 1 280px; min-width: 0; }
.welcome-content h1 { font-size: 1.5rem; margin-bottom: 4px; }
.quick-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  flex: 1 1 280px;
}
@media (min-width: 768px) {
  .quick-actions { grid-template-columns: repeat(4, 1fr); flex: 0 1 auto; }
}
@media (min-width: 992px) {
  .welcome-section { flex-wrap: nowrap; padding: 32px 40px; }
  .welcome-content h1 { font-size: 2rem; }
}

/* Account cards: 2x2 on phones, 4-up on larger screens */
.overview-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 12px 16px;
}
@media (min-width: 576px) {
  .overview-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  .overview-cards { grid-template-columns: repeat(4, 1fr); padding: 24px 40px; }
}

/* Account card: shrink on small screens */
.account-card { padding: 14px; }
.account-card .card-header h3 { font-size: 1.05rem; }
.account-card .balance { font-size: 1.3rem; }
.account-card .card-number { font-size: 0.78rem; word-break: break-all; }
@media (min-width: 992px) {
  .account-card { padding: 22px; }
  .account-card .card-header h3 { font-size: 1.15rem; }
  .account-card .balance { font-size: 1.65rem; }
}

/* Dashboard grid (the lower panels) */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 0 16px 24px;
}
@media (min-width: 992px) {
  .dashboard-grid { grid-template-columns: 2fr 1fr; padding: 0 40px 40px; }
}

.panel { min-width: 0; }
.panel-header { padding: 12px 14px; }
.panel-header h3 { font-size: 0.98rem; }
.panel-body { padding: 12px 14px; overflow-x: auto; }

/* Recent transactions list */
.activity-list, .txn-list { gap: 0; }
.activity-list li, .txn-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}
.activity-list li:last-child, .txn-list li:last-child { border-bottom: 0; }
.activity-list .amount { margin-left: auto; }

/* Quick stats inside panels */
.quick-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 12px;
}
@media (min-width: 576px) {
  .quick-stats { grid-template-columns: repeat(4, 1fr); }
}
.quick-stat {
  background: #f8f9fa;
  border-radius: 6px;
  padding: 10px 12px;
  text-align: center;
}
.quick-stat .num { font-size: 1.1rem; font-weight: 700; color: var(--absa-red, #870a3c); }
.quick-stat .lbl { font-size: 0.75rem; color: #777; }

/* Forms inside modals/dashboards: stack fields on mobile */
@media (max-width: 575.98px) {
  .absa-form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .modal-dialog { margin: 8px !important; }
  .modal-body { padding: 16px !important; }
  .modal-header,
  .modal-footer { padding: 12px 16px !important; }
}

/* Tables inside panels: scroll horizontally */
.panel-body table { display: block; width: 100%; overflow-x: auto; }
.panel-body .table th,
.panel-body .table td { white-space: nowrap; }

/* ===========================================================
   4.  ADMIN NAVBAR (top bar) — keep all icons visible
   =========================================================== */
.main-header .navbar-nav { flex-wrap: nowrap; }
.main-header .nav-link { padding-left: 8px !important; padding-right: 8px !important; }

/* ===========================================================
   5.  PRINT
   =========================================================== */
@media print {
  .main-sidebar, .main-header.navbar, .absa-sidebar-backdrop, [data-widget="pushmenu"] { display: none !important; }
  .content-wrapper { margin-left: 0 !important; }
}