/* Mobile Optimizations for Notice Toggle */

/* Ensure cards are visible immediately */
.customer-list,
.customer-card {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
}

/* Remove any loading states that might delay display */
.loading,
.skeleton {
  display: none !important;
}

/* Optimize header for mobile */
@media (max-width: 768px) {
  .app-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    height: 60px;
    display: flex;
    align-items: center;
  }
  
  .notice-toggle-btn {
    /* Ensure button is easily tappable */
    min-width: 44px;
    min-height: 44px;
    touch-action: manipulation;
  }
  
  /* Ensure customer list starts immediately below header */
  .customers-section {
    margin-top: 0;
    padding-top: 0;
  }
  
  /* Hide notice by default on mobile */
  .notice-section:not(.show) {
    display: none;
  }
}

/* Smooth transitions */
.notice-section {
  will-change: max-height, opacity;
}

/* Performance optimizations */
.customer-list {
  contain: layout style paint;
  will-change: scroll-position;
}

/* Ensure controls stay sticky */
.controls-section {
  position: -webkit-sticky;
  position: sticky;
  top: 60px; /* Below header */
  z-index: 99;
}