/* Mobile-Responsive Utilities for CPAS Tracker */
/* Target: Standard phones 375px+ with graceful degradation */

/* Base responsive utilities */
@media (max-width: 768px) {
  /* Hide scrollbars but keep functionality */
  * {
    -webkit-overflow-scrolling: touch;
  }

  /* Touch-friendly tap targets (min 44px) */
  button, a, input, select {
    min-height: 44px;
  }

  /* Improve form input sizing on mobile */
  input, select, textarea {
    font-size: 16px !important; /* Prevents iOS zoom on focus */
  }
}

/* Tablet and below */
@media (max-width: 1024px) {
  .hide-tablet {
    display: none !important;
  }
}

/* Mobile portrait and landscape */
@media (max-width: 768px) {
  .hide-mobile {
    display: none !important;
  }

  .mobile-full-width {
    width: 100% !important;
  }

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

  .mobile-no-padding {
    padding: 0 !important;
  }

  .mobile-small-padding {
    padding: 12px !important;
  }

  /* Stack flex containers vertically */
  .mobile-stack {
    flex-direction: column !important;
  }

  /* Allow horizontal scroll for tables */
  .mobile-scroll-x {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Card-based layout helpers */
  .mobile-card {
    display: block !important;
    padding: 16px;
    margin-bottom: 12px;
    border-radius: 8px;
    background: #181924;
    border: 1px solid #2a2b3a;
  }

  .mobile-card-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #1c1d29;
  }

  .mobile-card-row:last-child {
    border-bottom: none;
  }

  .mobile-card-label {
    font-weight: 600;
    color: #9ca0b8;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .mobile-card-value {
    font-weight: 600;
    color: #f8f9fa;
    text-align: right;
  }
}

/* Small mobile phones */
@media (max-width: 480px) {
  .hide-small-mobile {
    display: none !important;
  }
}

/* Utility for sticky positioning on mobile */
@media (max-width: 768px) {
  .mobile-sticky-top {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #000000;
  }
}