/* ============================================================================
   MERCHANT DASHBOARD — MOBILE RESPONSIVE  (per-page, desktop-safe)
   ----------------------------------------------------------------------------
   • 100% DESKTOP-SAFE: every rule lives inside a max-width @media query, so
     nothing applies on screens wider than 991.98px. Desktop view is untouched.
   • Breakpoints (Bootstrap 5 compatible):
       <= 991.98px  tablets + phones
       <= 767.98px  phones (main mobile pass)
       <= 575.98px  small phones
   • Pages already fully responsive on their own are intentionally NOT
     re-styled here (external-mailbox.php, view-customer.php, sale-counter
     panel, and every auto-fit grid / overflow-x:auto table). Touching them
     would risk breaking working layouts.
   ============================================================================ */


/* ==========================================================================
   A) TABLET & DOWN  (<= 991.98px)
   ========================================================================== */
@media (max-width: 991.98px) {

  /* Global content padding so cards don't kiss the screen edge */
  .zetlink-executive-dashboard,
  .zetlink-customers-crm,
  .wsm_dashboard_resellers,
  .mission-tabs-container,
  .zl-reports {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .sidebar-chat-col{
    right: -350px !important;
  }
  .zt-chat-open .sidebar-chat-col{
    right: 0px !important;
    z-index: 10;
  }

  /* dashboard.php — integrated chat sidebar drops under main content */
  #dashboard-main-row .main-content-col,
  #dashboard-main-row .sidebar-chat-col {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  #dashboard-main-row .integrated-chat-sidebar,
  .integrated-chat-sidebar {
    position: relative !important;
    top: 0 !important;
    max-height: calc(100vh - 69px) !important;
    margin-top: 0px;
  }

  /* mailbox.php — 3-column flex (240px nav + 350px list + reader) collapses.
     This page ships NO media query of its own, so it needs explicit help. */
  .mailbox-container {
    flex-direction: column !important;
    height: auto !important;
    min-height: 70vh;
  }
  .mailbox-sidebar,
  .mailbox-list,
  .mailbox-content {
    width: 100% !important;
    flex-shrink: 1 !important;
  }
  .mailbox-list { max-height: 50vh; overflow-y: auto; }
  .zetlink-executive-dashboard .alert{
    flex-direction: column;
  }
  #merchant-recent-source-bar{
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }
}


/* ==========================================================================
   B) PHONES  (<= 767.98px)  — main mobile pass
   ========================================================================== */
@media (max-width: 767.98px) {

  /* B0. GLOBAL TYPE & CARD PADDING */
  .main-heading, h1.main-heading { font-size: 1.5rem !important; line-height: 1.25 !important; }
  .fs-18 { font-size: 1rem !important; }
  .card-heading-main { font-size: .95rem !important; }

  .card-body.p-4,
  .card-body.p-md-5,
  .card-header.p-4,
  .executive-greeting-card .card-body { padding: 1rem !important; }

  /* Unwrapped data tables -> scroll sideways */
  .table:not(.table-responsive .table) {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* B1. dashboard-topbar.php (shared ~26 pages) */
  .header-area {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  .intelligence-metrics-row {
    overflow-x: visible !important;
    -webkit-overflow-scrolling: touch;
    border-right: 0 !important;
    padding-bottom: 4px;
  }
  .intelligence-metrics-row::-webkit-scrollbar { height: 0; }
  .notification-panel-top,
  .dropdown-menu[style*="width:380px"],
  .dropdown-menu[style*="width: 380px"] {
    width: calc(100vw - 24px) !important;
    max-width: 360px !important;
  }

  /* B2. dashboard.php */
  .executive-greeting-card .description { max-width: 100% !important; }
  .executive-greeting-card .admin-btns { gap: 8px !important; }
  .executive-greeting-card .admin-btns .btn { flex: 1 1 100%; text-align: center; }
  .date-box { gap: 6px !important; }
  .merchant-recent-search-box { width: 100% !important; }

  /* B3. orders.php — mission tab strip */
  .mission-tabs-container { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .mission-tab { flex: 0 0 auto !important; white-space: nowrap; }

  /* B4. publisher.php */
  .pm-order-item {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px 12px !important;
    font-size: 12px !important;
  }

  /* B5. publisher-view-wrapper.php */
  .pvw-markup-grid   { grid-template-columns: 1fr !important; }
  .pvw-markup-inputs { grid-template-columns: 1fr !important; }

  /* B6. publisher-orders.php */
  .po-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

  /* B7. sale-counter-customer-panel.php */
  .sale-customer-form-grid { grid-template-columns: 1fr 1fr !important; }
  .sale-customer-stats-row { grid-template-columns: repeat(2, 1fr) !important; }

  /* B8. newsletter.php */
  .zn-r2 { grid-template-columns: 1fr !important; }
  .zn-tw { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

  /* B9. mailbox.php — wider bubbles */
  .mailbox-content [style*="max-width: 80%"],
  .mailbox-content [style*="max-width:80%"] { max-width: 92% !important; }

  /* B10. MODALS / COMPOSE PANELS */
  .modal-dialog {
    max-width: calc(100% - 16px) !important;
    margin: 8px auto !important;
  }
  .zetlink-mb-compose-dialog,
  .zetlink-mb-compose-panel,
  .zetlink-mb-compose-dock {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
  }

  /* B11. GENERIC FLOATED TOOLBAR BUTTONS */
  .card-header .btn.float-end,
  .btn-block-mobile { width: 100% !important; float: none !important; margin-top: 8px; }

}


/* ==========================================================================
   C) SMALL PHONES  (<= 575.98px)
   ========================================================================== */
@media (max-width: 575.98px) {

  .main-heading, h1.main-heading { font-size: 1.3rem !important; }

  .zetlink-executive-dashboard,
  .zetlink-customers-crm,
  .wsm_dashboard_resellers,
  .zl-reports {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .pm-order-item,
  .sale-customer-form-grid,
  .sale-customer-stats-row { grid-template-columns: 1fr !important; }

  .fs-15.fw-800,
  .fw-700.fs-22,
  .kpi-value { font-size: 1.05rem !important; }

  .modal-footer .btn,
  .form-actions .btn { width: 100% !important; }

  .mailbox-list { max-height: 42vh; }
}