/* ══════════════════════════════════════════════════════════════════════
   MOBILE.CSS  v1.0 — Miguel CRM
   ══════════════════════════════════════════════════════════════════════
   Shared mobile-specific styles applied across ALL pages.
   Load order:  1. ds.css  2. adaptive.css  3. mobile.css

   BREAKPOINTS (matches adaptive.css):
     compact  → max-width: 599px   (phones)
     medium   → 600px – 839px      (tablets / landscape phones)
     expanded → ≥ 840px            (desktop — no rules here)
   ══════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════
   1. GLOBAL TOUCH & SCROLL
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 839px) {
  * { -webkit-overflow-scrolling: touch; }

  button, .btn, .tab-btn, .cat-tab, .chip, .pg-tab,
  .fchip, .mchip, .tmpl-chip { -webkit-user-select: none; user-select: none; }

  a, button, [role="button"], .btn, label { touch-action: manipulation; }

  .inv-body, .lm-inbox-body, .inbox-layout,
  .gst-layout, .chat-messages,
  .inbox-messages { overscroll-behavior: contain; }
}


/* ══════════════════════════════════════════════════════════════════════
   2. TOPBAR  (compact)
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 599px) {
  .topbar, .gs-topbar, .inv-topbar, .detail-topbar {
    height: 48px !important;
    padding: 0 12px !important;
    gap: 8px !important;
  }

  .gs-back-btn, .inv-topbar-back, .detail-back-btn,
  [class*="back-btn"] { display: none !important; }

  .topbar-title, .gs-topbar-title, .inv-topbar-title {
    font-size: 14px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .topbar-sub, .gs-topbar-sub { font-size: 11px !important; }
}


/* ══════════════════════════════════════════════════════════════════════
   3. TOOLBAR / FILTER BAR  (compact)
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 599px) {
  .toolbar, .gs-toolbar, .filter-bar, .gst-toolbar, .log-toolbar {
    padding: 8px 10px !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    align-items: center !important;
  }

  .toolbar input, .toolbar select, .toolbar .form-input,
  .toolbar .form-select, .filter-bar input, .filter-bar select {
    height: 34px !important;
    min-height: 34px !important;
    font-size: 12px !important;
    min-width: 0 !important;
    padding: 4px 8px !important;
  }

  .toolbar .spacer { display: none !important; }

  .toolbar .xlsx-btn,
  .toolbar label {
    height: 34px !important;
    min-height: 34px !important;
    font-size: 11px !important;
    padding: 4px 8px !important;
    white-space: nowrap !important;
  }

  .toolbar .gs-search, .filter-bar .gs-search { width: 100% !important; }
}


/* ══════════════════════════════════════════════════════════════════════
   4. CONTENT AREA
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 599px) {
  .content, .main-panel, .gst-main, .workspace, .page-body {
    padding: 10px 12px !important;
  }
}

@media (min-width: 600px) and (max-width: 839px) {
  .content, .main-panel, .gst-main, .workspace, .page-body {
    padding: 14px 16px !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   5. STAT STRIPS & CARDS
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 599px) {
  .stat-strip, .stats-strip, .sum-strip, .stat-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }

  .stat-pill, .stat-card { padding: 8px 10px !important; gap: 6px !important; }

  .stat-val, .stat-value, .sv, .stat-card-val { font-size: 16px !important; }
  .stat-label, .stat-lbl, .sl, .stat-card-lbl { font-size: 10px !important; }
}

@media (min-width: 600px) and (max-width: 839px) {
  .stat-strip, .stats-strip, .sum-strip, .stat-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   6. HORIZONTAL-SCROLL TABLES
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 599px) {
  .tbl-wrap, .tbl-scroll, .data-tbl-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .tbl-wrap table, .tbl-scroll table, .data-tbl-wrap table { min-width: 560px; }

  table { font-size: 12px; }
  th { font-size: 10px !important; padding: 7px 10px !important; white-space: nowrap; }
  td { font-size: 12px !important; padding: 7px 10px !important; }

  .btn-xs, .actions-cell .btn { padding: 3px 7px !important; font-size: 10px !important; }
}


/* ══════════════════════════════════════════════════════════════════════
   7. PANELS & CARDS
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 599px) {
  .panel, .card, .rp, .settings-section { border-radius: 10px !important; }
  .panel-header, .card-header { padding: 10px 12px !important; }
  .panel-header h3, .card-header-title { font-size: 13px !important; }
  .panel-body, .card-body { padding: 10px 12px !important; }
}


/* ══════════════════════════════════════════════════════════════════════
   8. FORM GRIDS
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 599px) {
  .form-row, .form-row-2, .form-row-3, .form-row-4, .field-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .field-input, .form-input, .form-select {
    width: 100% !important;
    font-size: 14px !important;
    height: 38px !important;
  }
  .field-textarea { height: auto !important; min-height: 80px !important; width: 100% !important; font-size: 14px !important; }
  .field-label, .form-label { font-size: 11px !important; margin-bottom: 3px !important; }
}

@media (min-width: 600px) and (max-width: 839px) {
  .form-row-3, .form-row-4 { grid-template-columns: 1fr 1fr !important; }
}


/* ══════════════════════════════════════════════════════════════════════
   9. MODALS & DRAWERS — bottom-sheet pattern
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 599px) {
  .modal-overlay, .modal-wrap, .gs-modal, .modal-backdrop, .mbk, .modal-ov {
    padding: 0 !important;
    align-items: flex-end !important;
  }

  .modal, .modal-box, .mbox, .gs-dialog, #lblModal .lbl-box {
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 16px 16px 0 0 !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
    padding: 20px 16px !important;
    box-shadow: 0 -4px 24px rgba(0,0,0,.18) !important;
  }

  .modal h3, .modal-head h3, .mhead h3, .drawer-header h3 {
    font-size: 15px !important;
    margin-bottom: 12px !important;
  }

  .modal-footer, .modal-foot, .drawer-footer {
    gap: 8px !important;
    padding: 12px 16px !important;
  }

  .drawer, .chat-drawer, .new-order-drawer, .log-drawer {
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 16px 16px 0 0 !important;
    top: auto !important;
    bottom: 0 !important;
    height: 88vh !important;
    max-height: 88vh !important;
    transform: translateY(100%) !important;
  }
  .drawer.open, .chat-drawer.open, .new-order-drawer.open, .log-drawer.open {
    transform: translateY(0) !important;
  }

  .drawer-header { padding: 12px 16px !important; height: 50px !important; }
  .drawer-body { padding: 12px 16px !important; }
}

@media (min-width: 600px) and (max-width: 839px) {
  .drawer, .chat-drawer, .new-order-drawer {
    width: 80vw !important;
    max-width: 480px !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   10. SPLIT-PANE LAYOUTS — stack vertically on mobile
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 599px) {
  .gst-layout {
    flex-direction: column !important;
    height: auto !important;
    overflow: visible !important;
  }
  .gst-sidebar {
    width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid var(--bdr) !important;
    overflow: visible !important;
  }

  .inbox-layout { flex-direction: column !important; height: auto !important; }
  .inbox-sidebar {
    width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid var(--bdr) !important;
    max-height: 280px !important;
  }
  .inbox-main { min-height: 360px !important; }

  .lm-inbox-body, #lm-body {
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
}

@media (min-width: 600px) and (max-width: 839px) {
  .gst-layout { flex-direction: column !important; height: auto !important; overflow: visible !important; }
  .gst-sidebar { width: 100% !important; border-right: none !important; border-bottom: 1px solid var(--bdr) !important; }
}


/* ══════════════════════════════════════════════════════════════════════
   11. HORIZONTAL-SCROLL TABS
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 599px) {
  .pg-tabs, .tab-bar, .tabs-bar, .cat-tabs, .aud-sub-tabs, .toolbar-tabs {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
  }
  .pg-tabs::-webkit-scrollbar, .tab-bar::-webkit-scrollbar,
  .cat-tabs::-webkit-scrollbar, .aud-sub-tabs::-webkit-scrollbar { display: none; }

  .pg-tab, .tab-btn, .cat-tab, .aud-sub-tab {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    padding: 8px 14px !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   12. PAGINATION
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 599px) {
  .pager, .pag, #pagination, .pagination {
    padding: 8px 12px !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    font-size: 11px !important;
  }

  .pager .btn, .pag-btns .btn, .pagination .btn {
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   13. FLOATING ACTION BUTTON
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 599px) {
  .btn-fab-mobile {
    position: fixed !important;
    bottom: calc(var(--adaptive-bottom-nav-height, 64px) + 16px) !important;
    right: 16px !important;
    z-index: 400 !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    font-size: 22px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.22) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .mobile-only { display: flex !important; }
  .desktop-only { display: none !important; }
}

@media (min-width: 840px) {
  .mobile-only { display: none !important; }
}


/* ══════════════════════════════════════════════════════════════════════
   14. EMPTY STATES & LOADING
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 599px) {
  .empty { padding: 32px 16px !important; font-size: 13px !important; }
  .empty .ei { font-size: 32px !important; }
  .loading { padding: 20px 16px !important; font-size: 12px !important; }
}


/* ══════════════════════════════════════════════════════════════════════
   15. BADGES, CHIPS & TAGS
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 599px) {
  .tag, .chip, .badge, .status-chip, .wa-status-chip {
    font-size: 9px !important;
    padding: 2px 6px !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   16. PRINT — hide mobile chrome
   ══════════════════════════════════════════════════════════════════════ */
@media print {
  .bottom-nav, .hamburger, .sidebar-overlay, .btn-fab-mobile { display: none !important; }
}