/* Mobile Optimizations for DigiShop Africa */

/* Better spacing on mobile */
@media (max-width: 640px) {
  /* Reduce padding on cards */
  .card-content {
    padding: 0.75rem !important;
  }
  
  /* Compact header */
  header .container {
    padding: 0.75rem 1rem;
  }
  
  /* Compact quick actions */
  .card-header {
    padding: 0.5rem;
  }
  
  /* Smaller icons on mobile */
  .card-header svg {
    width: 1.25rem;
    height: 1.25rem;
  }
  
  /* Compact tabs */
  .tab-btn {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
  }
  
  /* Better product grid spacing */
  .product-grid {
    gap: 0.5rem;
  }
  
  /* Compact stats cards */
  .stats-card .card-header {
    padding: 0.75rem;
  }
  
  /* Compact modal content */
  .modal-content {
    padding: 1rem;
    margin: 0.5rem;
  }
  
  /* Better form spacing */
  form.space-y-4 > * {
    margin-bottom: 0.75rem;
  }
  
  /* Compact buttons in grids */
  .grid .btn {
    font-size: 0.75rem;
    padding: 0.5rem 0.75rem;
  }
  
  /* Hide less important text on mobile */
  .card-action-hint {
    display: none;
  }
  
  /* Compact receipt history */
  #receipts-history-container .flex {
    padding: 0.5rem;
  }
  
  /* Better chart containers */
  canvas {
    max-height: 150px !important;
  }
}

/* Tablet optimizations */
@media (min-width: 641px) and (max-width: 1024px) {
  .card-content {
    padding: 1rem 1.25rem;
  }
  
  canvas {
    max-height: 200px !important;
  }
}

/* Better line clamping */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Compact receipt items */
@media (max-width: 640px) {
  #receipts-history-container .flex {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  #receipts-history-container .flex > div:last-child {
    width: 100%;
    flex-direction: row;
  }
  
  #receipts-history-container .btn {
    flex: 1;
  }
}

/* Better scrollbar on mobile */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Compact subscription cards */
@media (max-width: 640px) {
  #subscriptions-container .card {
    padding: 0.75rem;
  }
  
  #subscriptions-container .grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
}

/* Better user cards on mobile */
@media (max-width: 640px) {
  #users-container .card-content {
    padding: 0.75rem;
  }
  
  #users-container .flex {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  #users-container .btn {
    width: 100%;
  }
}

/* Compact activities */
@media (max-width: 640px) {
  #activities-container .flex {
    padding: 0.5rem;
    gap: 0.5rem;
  }
  
  #activities-container p {
    font-size: 0.75rem;
  }
}

/* Better billboard on mobile */
@media (max-width: 640px) {
  #billboard-banner .bg-gradient-primary {
    padding: 0.75rem;
  }
  
  #billboard-banner h3 {
    font-size: 0.875rem;
  }
  
  #billboard-banner p {
    font-size: 0.75rem;
  }
}

/* Compact header buttons */
@media (max-width: 640px) {
  header .btn {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
  }
  
  header .btn svg {
    width: 1rem;
    height: 1rem;
  }
}

/* Better product cards spacing */
@media (max-width: 640px) {
  #products-container .product-card {
    padding: 0.5rem;
  }
  
  #products-container .product-card img {
    height: 120px;
  }
}

/* Compact stats overview */
@media (max-width: 640px) {
  #stats-details .flex {
    padding: 0.5rem 0;
    font-size: 0.875rem;
  }
}

/* Better modal on mobile */
@media (max-width: 640px) {
  .modal-content {
    max-width: calc(100vw - 1rem);
    max-height: calc(100vh - 2rem);
  }
  
  .modal-content .card {
    margin-bottom: 1rem;
  }
}

/* Compact subscription stats */
@media (max-width: 640px) {
  #stat-total-subscriptions,
  #stat-active-subscriptions,
  #stat-subscription-revenue {
    font-size: 1.5rem;
  }
}

/* Better chart responsiveness */
canvas {
  width: 100% !important;
  height: auto !important;
}

/* Compact announcement cards */
@media (max-width: 640px) {
  #platform-announcements-banner .card {
    padding: 0.75rem;
  }
}