/* ══════════════════════════════════════════════════════════════════════
   Zeali CRM — Mobile + Tablet responsive overrides (v13.6.3)

   Comprehensive pass for the PWA on phones. Fixes seen on the wild:
     • KPI cards collapsing to invisible height when grid breaks
     • Sidebar drawer covering 100% of the screen width
     • Hamburger button overlapping the status bar (notch / SafeArea)
     • Tables overflowing without scroll
     • Modals being too tall, can't reach Save button
     • Forms cramped, inputs too small to tap

   Breakpoints:
     • Tablet:  ≤ 1024px
     • Mobile:  ≤ 768px
     • Tiny:    ≤ 480px
   ══════════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────────
   TABLET (≤ 1024px)
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {

  .sidebar { width: 60px !important; }
  .sidebar-logo p,
  .nav-item span:not(.nav-icon):not(.nav-badge),
  .nav-section,
  .sidebar-search,
  .sidebar-user span,
  .sidebar-logout span { display: none !important; }
  .main { margin-left: 60px !important; }

  .form-grid,
  .form-grid-3 { grid-template-columns: 1fr 1fr !important; }
  .form-grid .span2,
  .form-grid-3 .span3 { grid-column: span 2 !important; }

  .chart-row,
  .grid-2-col { grid-template-columns: 1fr !important; }

  .kpi-grid,
  .stats-grid { grid-template-columns: 1fr 1fr !important; }

  .table-wrap,
  .table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .table-wrap table,
  .table-container table { min-width: 720px; }
}


/* ────────────────────────────────────────────────────────────────────
   MOBILE (≤ 768px)
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* ── Sidebar drawer: 80% width, never wider than 300px ─────────── */
  .sidebar {
    transform: translateX(-100%);
    transition: transform .25s ease;
    width: 80vw !important;
    max-width: 300px !important;
    z-index: 1000;
    box-shadow: 4px 0 16px rgba(0,0,0,.15);
    /* Account for iOS notch */
    padding-top: env(safe-area-inset-top) !important;
  }
  .sidebar.zc-mobile-open { transform: translateX(0); }

  /* When drawer open, all collapsed-state hides revert */
  .sidebar.zc-mobile-open .sidebar-logo p,
  .sidebar.zc-mobile-open .nav-item span,
  .sidebar.zc-mobile-open .nav-section,
  .sidebar.zc-mobile-open .sidebar-search,
  .sidebar.zc-mobile-open .sidebar-user,
  .sidebar.zc-mobile-open .sidebar-logout span { display: revert !important; }

  /* ── Main content: clear room for hamburger + safe-area-top ──── */
  .main {
    margin-left: 0 !important;
    padding: 12px !important;
    padding-top: calc(56px + env(safe-area-inset-top)) !important;
  }

  /* ── Hamburger button: respect notch / status bar ──────────────── */
  #zc-mobile-menu-btn {
    top: calc(8px + env(safe-area-inset-top)) !important;
  }

  /* Drawer open backdrop */
  body.zc-mobile-drawer-open::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 999;
  }

  /* ── KPI / stats cards: full width, decent height, visible ─────── */
  .kpi-grid,
  .stats-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .kpi-card,
  .stat-card,
  .kpi-grid > *,
  .stats-grid > * {
    min-height: 88px !important;
    padding: 14px 16px !important;
    background: var(--surface, #fff) !important;
    border: 1px solid var(--border, #e2e0d6) !important;
    border-radius: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
  }

  /* ── Card: ensure it has a body, not just borders ──────────────── */
  .card {
    padding: 14px !important;
    margin-bottom: 12px !important;
    border-radius: 10px !important;
  }
  .card-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px;
    margin-bottom: 10px !important;
  }
  .card-title { font-size: 15px !important; }

  /* ── Forms: single column, larger inputs ───────────────────────── */
  .form-grid,
  .form-grid-3 { grid-template-columns: 1fr !important; gap: 10px !important; }
  .form-grid .span2,
  .form-grid-3 .span2,
  .form-grid-3 .span3 { grid-column: span 1 !important; }
  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: 16px !important;   /* prevents iOS zoom on focus */
    padding: 10px 12px !important;
    min-height: 42px;
  }
  .form-group label { font-size: 12px !important; margin-bottom: 4px !important; }

  /* ── Modals: full width, scrollable, sticky save button ────────── */
  .modal {
    max-width: calc(100vw - 16px) !important;
    width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 16px) !important;
    margin: 8px !important;
    padding: 16px !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .modal-overlay { padding: 0 !important; align-items: flex-start !important; }

  /* ── Auth screen scaling ───────────────────────────────────────── */
  .auth-card {
    width: calc(100vw - 24px) !important;
    max-width: 420px !important;
    padding: 22px 18px !important;
    margin: 16px auto !important;
  }

  /* ── Touch-friendly buttons (≥ 40px tall) ──────────────────────── */
  button,
  .btn,
  .auth-btn,
  input[type="submit"] { min-height: 40px; }
  .btn.btn-sm { min-height: 32px; padding: 6px 10px; font-size: 12px; }

  /* Larger drawer items */
  .sidebar .nav-item {
    padding: 12px 14px !important;
    font-size: 14px;
    min-height: 44px;
    display: flex !important;
    align-items: center !important;
  }
  .sidebar .sidebar-user { padding: 10px 14px !important; }

  /* ── Section headers stack title and actions ───────────────────── */
  .section-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px;
    margin-bottom: 12px !important;
  }
  .section-header .topbar-actions,
  .section-header > div:last-child {
    width: 100%;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  body { font-size: 13px; }
  .section-title { font-size: 18px !important; line-height: 1.3; }

  /* ── Tables: edge-to-edge horizontal scroll ────────────────────── */
  .table-wrap,
  .table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin: 0 -12px;
    padding: 0 12px;
    /* visual hint there's more to scroll */
    background:
      linear-gradient(to right, var(--surface,#fff), transparent 16px),
      linear-gradient(to left,  var(--surface,#fff), transparent 16px);
  }
  .table-wrap table,
  .table-container table { min-width: 640px; font-size: 12px; }
  .table-wrap th,
  .table-wrap td { padding: 8px 6px !important; }

  /* ── FAB: smaller and clear of bottom safe-area ────────────────── */
  #fab-wrap {
    bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    right: 16px !important;
  }
  #fab-main {
    width: 48px !important;
    height: 48px !important;
    font-size: 22px !important;
  }
  /* Hide FAB labels on mobile (they push the buttons off-screen) */
  .fab-label { display: none !important; }

  /* ── Team Online widget: small + repositioned ──────────────────── */
  #zc-presence-widget {
    font-size: 11px !important;
    padding: 4px 8px !important;
    max-width: 180px !important;
    top: calc(58px + env(safe-area-inset-top)) !important;
    right: 8px !important;
  }

  /* ── Charts: limit max height so they don't dominate the page ─── */
  canvas[id^="chart-"] {
    max-height: 240px !important;
  }
  .chart-card { padding: 12px !important; margin-bottom: 12px !important; }
  .chart-card h3 { font-size: 14px !important; margin-bottom: 8px !important; }

  /* ── Topbar (DB size, time, user info) wraps cleanly ──────────── */
  .topbar,
  .top-status-bar {
    flex-wrap: wrap !important;
    gap: 6px !important;
    font-size: 11px !important;
  }

  /* ── Skeleton / blank states get a visible label ──────────────── */
  .empty-state {
    padding: 24px 12px !important;
    text-align: center;
  }
}


/* ────────────────────────────────────────────────────────────────────
   TINY phones (≤ 480px)
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {

  .modal { padding: 12px !important; }

  .section-header .topbar-actions,
  .section-header > div:last-child {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .section-header .topbar-actions .btn,
  .section-header > div:last-child .btn { width: 100%; }

  .table-wrap th,
  .table-wrap td { padding: 6px 4px !important; font-size: 11px; }

  .mobile-hide { display: none !important; }

  .auth-card { padding: 18px 14px !important; }

  /* KPI cards even tighter */
  .kpi-card,
  .stat-card { min-height: 76px !important; padding: 12px !important; }
}


/* ────────────────────────────────────────────────────────────────────
   PWA standalone-mode niceties (when running from home-screen icon)
   ────────────────────────────────────────────────────────────────── */
@media (display-mode: standalone) {
  /* Add a touch of breathing room since there's no browser chrome */
  body { padding-bottom: env(safe-area-inset-bottom); }
}