/**
 * Gravun CRM — Mobile Responsive Overrides v3
 * Precision fixes based on exact DOM class names from live inspection.
 * Breakpoint: max-width 1023px (below lg, where sidebar hides)
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. MAIN LAYOUT — reduce padding on mobile
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {

  /* Main content area — remove bottom padding that was for desktop nav */
  main.flex-1.overflow-y-auto {
    padding-bottom: 80px !important; /* space for mobile bottom nav if any */
  }

  /* Page container — tighten horizontal padding */
  main .min-h-screen.px-4 {
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-top: 16px !important;
  }

  /* Contacts outer box — remove large padding */
  main .border.border-gray-200.rounded-2xl.p-6 {
    padding: 12px !important;
    border-radius: 12px !important;
  }

  /* Page title row */
  main .flex.flex-col.sm\:flex-row.sm\:items-end.justify-between.gap-4.mb-8 {
    margin-bottom: 16px !important;
    gap: 8px !important;
  }

  /* H1 page title */
  main h1.text-2xl.font-bold {
    font-size: 20px !important;
    line-height: 1.3 !important;
  }

  /* Tabs bar — already has overflow-x-auto, just reduce font size */
  main .flex.gap-0.mb-6.border-b.border-gray-200.overflow-x-auto {
    margin-bottom: 12px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  main .flex.gap-0.mb-6.border-b.border-gray-200.overflow-x-auto::-webkit-scrollbar {
    display: none !important;
  }

  /* Tab buttons — smaller on mobile */
  main .flex.gap-0.mb-6 button {
    padding: 8px 12px !important;
    font-size: 12px !important;
  }

  /* Search + filter row */
  main .flex.items-center.gap-3 {
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }

  /* Search input — take remaining space */
  main .flex.items-center.gap-3 input[type="text"] {
    min-width: 0 !important;
    flex: 1 !important;
    font-size: 13px !important;
  }

  /* Action buttons row (Filter, Find Duplicates, Dormant, Add Contact) */
  main .flex.items-center.gap-3 button:not([class*="border-b"]) {
    padding: 8px 10px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  /* Hide "Find Duplicates" and "Dormant" on mobile — too many buttons */
  main button.hidden.sm\:flex,
  main .hidden.sm\:flex {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. CONTACTS TABLE → CARD LIST on mobile
   JS patch (gravun-mobile-patch.js v5) handles the row transformation.
   CSS here only handles the container-level fixes.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Kill horizontal scroll on the contacts table wrapper */
  main .border.border-gray-200.rounded-2xl.overflow-hidden.flex-1 .overflow-x-auto {
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  /* Remove the fixed 520px max-height so all rows are visible */
  main .border.border-gray-200.rounded-2xl.overflow-hidden .overflow-y-auto {
    max-height: none !important;
    overflow-y: visible !important;
    height: auto !important;
  }

  /* Hide the header row */
  main .border.border-gray-200.rounded-2xl.overflow-hidden .bg-gray-50.border-b {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. CALL BUTTON — professional pill style
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {

  /* Tel link call buttons */
  a[href^="tel:"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 9px 16px !important;
    background: #0f172a !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    min-height: 40px !important;
    min-width: 80px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: 0 1px 6px rgba(15,23,42,0.18) !important;
    letter-spacing: 0.01em !important;
    transition: background 0.15s, transform 0.1s !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
  }

  a[href^="tel:"]:active {
    background: #1e293b !important;
    transform: scale(0.95) !important;
  }

  /* Phone icon inside call button */
  a[href^="tel:"] i,
  a[href^="tel:"] svg {
    color: #4ade80 !important;
    font-size: 14px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. HEADER — mobile top bar
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {

  /* Header bar */
  header.flex.items-center.justify-between.h-14 {
    height: 52px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Page title in header */
  header .text-sm.font-semibold,
  header .font-semibold {
    font-size: 15px !important;
  }

  /* Search bar in header — hide on mobile (too cramped) */
  header .hidden.sm\:flex,
  header button.hidden.sm\:flex {
    display: none !important;
  }

  /* Notification bell — ensure touch target */
  header button[aria-label*="otif"],
  header button[class*="Notif"] {
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. CONTACT DETAIL PANEL — full screen on mobile
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {

  /* Slide-over panels */
  div[class*="fixed"][class*="right-0"][class*="h-full"],
  div[class*="fixed inset-y-0 right-0"],
  div[class*="fixed"][class*="right-0"][class*="top-0"] {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    border-radius: 0 !important;
  }

  /* Close button in panels */
  div[class*="fixed"] button[class*="absolute"][class*="top-"] {
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. STATS CARDS — 2-col grid on mobile
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {

  /* Stats grid */
  main .grid.grid-cols-4,
  main .grid.grid-cols-5,
  main .grid.grid-cols-3 {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. TOUCH IMPROVEMENTS — minimum 44px touch targets
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  /* Only apply 44px min-height to standalone interactive elements, not nested ones */
  main > * button:not([class*="w-3"]):not([class*="w-8"]):not([class*="rounded-full"]),
  main > * a[href]:not([class*="rounded-full"]) {
    min-height: 44px;
  }
  /* Explicitly exclude avatar circles and small icon buttons */
  [class*="rounded-full"],
  [class*="w-3.5"],
  [class*="w-8"],
  input[type="checkbox"] {
    min-height: unset !important;
  }
  /* But don't force height on inline/flex items */
  button.inline-flex,
  a.inline-flex,
  button[class*="px-2.py-1"],
  button[class*="text-xs"] {
    min-height: 32px;
  }

  button,
  a,
  [role="button"] {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. DASHBOARD — mobile layout
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {

  /* Dashboard grid cards */
  main .grid.grid-cols-2.gap-4,
  main .grid.grid-cols-3.gap-4,
  main .grid.grid-cols-4.gap-4 {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Chart containers */
  main .rounded-2xl.border.border-gray-200.p-6 {
    padding: 14px !important;
    border-radius: 12px !important;
  }

  /* Overflow-x scroll for wide tables */
  main .overflow-x-auto {
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. MODAL / DIALOG — full screen on mobile
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {

  /* Radix/shadcn dialog content */
  [role="dialog"][class*="fixed"],
  div[class*="DialogContent"],
  div[class*="dialog-content"] {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 90vh !important;
    border-radius: 16px 16px 0 0 !important;
    bottom: 0 !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    margin: 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. TYPOGRAPHY — readable on small screens
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {

  /* Truncate long text in table cells */
  main p.text-sm,
  main p.text-xs,
  main span.text-sm,
  main span.text-xs {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
  }

  /* Contact name — slightly larger */
  main p.font-semibold,
  main p.font-medium {
    font-size: 14px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Secondary text (email, location) */
  main p.text-gray-400,
  main p.text-gray-500 {
    font-size: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   11. SAFE AREA — iPhone notch / home indicator
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {

  body {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  main.flex-1.overflow-y-auto {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   12. GRAVUN CALL NOTES MODAL — mobile bottom sheet
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {

  #gravun-call-modal {
    bottom: 0 !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    transform: none !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
  }

  #gravun-call-modal .gcm-outcome-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  #gravun-call-modal .gcm-outcome-btn {
    padding: 12px 8px !important;
    font-size: 12px !important;
  }

  #gravun-call-modal textarea {
    font-size: 16px !important; /* prevent iOS zoom */
  }

  #gravun-call-modal input {
    font-size: 16px !important; /* prevent iOS zoom */
  }
}