/**
 * GEOPro Mobile Utilities
 * Shared responsive CSS for all GEOPro interfaces
 * Mobile-first approach with progressive enhancement
 */

/* ============================================
   BASE MOBILE RESETS (< 640px)
   ============================================ */

@media (max-width: 639px) {
  /* Reduce spacing globally */
  .mobile-compact {
    gap: 0.5rem !important;
  }

  .mobile-p-sm {
    padding: 0.75rem !important;
  }

  .mobile-px-sm {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .mobile-py-sm {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  .mobile-gap-sm {
    gap: 0.75rem !important;
  }

  /* Hide on mobile */
  .mobile-hide {
    display: none !important;
  }

  /* Show only on mobile */
  .mobile-only {
    display: block !important;
  }

  /* Full width on mobile */
  .mobile-full {
    width: 100% !important;
    max-width: 100% !important;
  }
}

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

/* ============================================
   TOUCH-FRIENDLY TARGETS (44px minimum)
   ============================================ */

@media (max-width: 767px) {
  .mobile-touch-target,
  .mobile-btn {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  /* Ensure all buttons meet touch target requirements */
  button.mobile-touch,
  a.mobile-touch,
  .btn.mobile-touch,
  .btn-sm.mobile-touch {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Form inputs - adequate touch targets */
  input.mobile-input,
  select.mobile-input,
  textarea.mobile-input {
    min-height: 44px;
    padding: 0.625rem 0.75rem;
    font-size: 16px; /* Prevents iOS zoom on focus */
  }
}

/* ============================================
   RESPONSIVE TABLES → CARD LAYOUT
   ============================================ */

@media (max-width: 767px) {
  /* Convert table to card layout */
  .mobile-table-cards {
    display: block !important;
  }

  .mobile-table-cards thead {
    display: none !important;
  }

  .mobile-table-cards tbody {
    display: block !important;
  }

  .mobile-table-cards tr {
    display: block !important;
    margin-bottom: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1rem;
    background: #ffffff;
  }

  .dark .mobile-table-cards tr {
    border-color: #334155;
    background: #1e293b;
  }

  .mobile-table-cards td {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0 !important;
    border: none !important;
    border-bottom: 1px solid #f1f5f9;
  }

  .dark .mobile-table-cards td {
    border-bottom-color: #334155;
  }

  .mobile-table-cards td:last-child {
    border-bottom: none !important;
  }

  /* Data label for mobile cards */
  .mobile-table-cards td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: #64748b;
    flex-shrink: 0;
    margin-right: 1rem;
  }

  .dark .mobile-table-cards td::before {
    color: #94a3b8;
  }

  /* Action buttons in cards */
  .mobile-table-cards td:last-child {
    justify-content: flex-end;
    padding-top: 0.75rem;
  }

  .mobile-table-cards td:last-child::before {
    display: none;
  }
}

/* Horizontal scroll table with sticky first column */
@media (max-width: 767px) {
  .mobile-table-scroll {
    display: block !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .mobile-table-scroll table {
    min-width: 600px;
  }

  .mobile-table-scroll th:first-child,
  .mobile-table-scroll td:first-child {
    position: sticky;
    left: 0;
    background: inherit;
    z-index: 1;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
  }

  /* Scroll indicator gradient */
  .mobile-table-scroll::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 24px;
    background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.05));
    pointer-events: none;
  }
}

/* ============================================
   RESPONSIVE MODALS
   ============================================ */

@media (max-width: 639px) {
  .mobile-modal {
    width: calc(100vw - 1.5rem) !important;
    max-width: calc(100vw - 1.5rem) !important;
    margin: 0.75rem !important;
    max-height: calc(100vh - 1.5rem) !important;
  }

  .mobile-modal-full {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  /* Modal content padding reduction */
  .mobile-modal-content {
    padding: 1rem !important;
  }

  /* Modal header/footer */
  .mobile-modal-header,
  .mobile-modal-footer {
    padding: 0.75rem 1rem !important;
  }
}

@media (min-width: 640px) and (max-width: 767px) {
  .mobile-modal {
    max-width: 90vw !important;
    margin: 1rem auto !important;
  }
}

/* ============================================
   RESPONSIVE GRIDS
   ============================================ */

/* Force single column on mobile */
@media (max-width: 639px) {
  .mobile-grid-1 {
    grid-template-columns: 1fr !important;
  }

  .mobile-grid-2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Two columns on small tablets */
@media (min-width: 640px) and (max-width: 767px) {
  .tablet-grid-2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ============================================
   RESPONSIVE NAVIGATION
   ============================================ */

@media (max-width: 767px) {
  /* Scrollable tab container */
  .mobile-tabs-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex-wrap: nowrap !important;
  }

  .mobile-tabs-scroll::-webkit-scrollbar {
    display: none;
  }

  .mobile-tabs-scroll > * {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  /* Icon-only tabs on mobile */
  .mobile-tab-icon-only .tab-label {
    display: none !important;
  }

  .mobile-tab-icon-only .tab-icon {
    margin: 0 !important;
  }
}

/* ============================================
   RESPONSIVE FORMS
   ============================================ */

@media (max-width: 639px) {
  /* Stack form elements vertically */
  .mobile-form-stack {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .mobile-form-stack > * {
    width: 100% !important;
  }

  /* Reduced form spacing */
  .mobile-form-compact {
    gap: 0.75rem !important;
  }

  .mobile-form-compact .form-group {
    margin-bottom: 0.75rem !important;
  }

  /* Input sizing */
  .mobile-input-sm {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
  }
}

/* ============================================
   RESPONSIVE TYPOGRAPHY
   ============================================ */

@media (max-width: 639px) {
  .mobile-text-sm {
    font-size: 0.875rem !important;
  }

  .mobile-text-xs {
    font-size: 0.75rem !important;
  }

  .mobile-text-base {
    font-size: 1rem !important;
  }

  /* Heading size reduction */
  .mobile-heading-sm h1,
  .mobile-heading-sm .h1 {
    font-size: 1.5rem !important;
  }

  .mobile-heading-sm h2,
  .mobile-heading-sm .h2 {
    font-size: 1.25rem !important;
  }

  .mobile-heading-sm h3,
  .mobile-heading-sm .h3 {
    font-size: 1rem !important;
  }
}

/* ============================================
   RESPONSIVE SPACING
   ============================================ */

@media (max-width: 639px) {
  .mobile-m-0 { margin: 0 !important; }
  .mobile-m-1 { margin: 0.25rem !important; }
  .mobile-m-2 { margin: 0.5rem !important; }
  .mobile-m-3 { margin: 0.75rem !important; }
  .mobile-m-4 { margin: 1rem !important; }

  .mobile-p-0 { padding: 0 !important; }
  .mobile-p-1 { padding: 0.25rem !important; }
  .mobile-p-2 { padding: 0.5rem !important; }
  .mobile-p-3 { padding: 0.75rem !important; }
  .mobile-p-4 { padding: 1rem !important; }

  .mobile-gap-1 { gap: 0.25rem !important; }
  .mobile-gap-2 { gap: 0.5rem !important; }
  .mobile-gap-3 { gap: 0.75rem !important; }
  .mobile-gap-4 { gap: 1rem !important; }
}

/* ============================================
   RESPONSIVE LAYOUT HELPERS
   ============================================ */

@media (max-width: 639px) {
  /* Flex direction changes */
  .mobile-flex-col {
    flex-direction: column !important;
  }

  .mobile-flex-row {
    flex-direction: row !important;
  }

  /* Alignment */
  .mobile-items-start {
    align-items: flex-start !important;
  }

  .mobile-items-center {
    align-items: center !important;
  }

  .mobile-justify-start {
    justify-content: flex-start !important;
  }

  .mobile-justify-between {
    justify-content: space-between !important;
  }

  /* Text alignment */
  .mobile-text-left {
    text-align: left !important;
  }

  .mobile-text-center {
    text-align: center !important;
  }
}

/* ============================================
   PREVENT HORIZONTAL OVERFLOW
   ============================================ */

@media (max-width: 767px) {
  .mobile-overflow-hidden {
    overflow-x: hidden !important;
  }

  .mobile-overflow-auto {
    overflow-x: auto !important;
  }

  /* Ensure content doesn't exceed viewport */
  .mobile-contain {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
}

/* ============================================
   DARK MODE SUPPORT
   ============================================ */

.dark .mobile-table-cards tr {
  background: #1e293b;
  border-color: #334155;
}

.dark .mobile-table-cards td {
  border-bottom-color: #334155;
}

.dark .mobile-table-cards td::before {
  color: #94a3b8;
}