/* 📱 De Grillworstboer - Mobile-First Improved CSS */

/* Import base mobile.css */
@import url('./mobile.css');

/* ============================================
   MOBILE-SPECIFIC FIXES & IMPROVEMENTS
   ============================================ */

/* 1. HEADER & NAVIGATION FIXES */
/* Fix menu overlap with Enhanced Dashboard */
@media (max-width: 767px) {
  .admin-header-content {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-md);
  }

  .admin-page-title {
    font-size: var(--font-size-lg);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .admin-header-actions {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    gap: var(--space-xs);
  }

  /* Mobile menu toggle should be visible */
  .admin-mobile-toggle {
    position: fixed;
    top: var(--space-md);
    left: var(--space-md);
    z-index: 100;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-lg);
    box-shadow: var(--shadow-md);
  }

  /* Hide sidebar on mobile by default */
  .admin-sidebar {
    position: fixed;
    left: -256px;
    top: 0;
    bottom: 0;
    width: 256px;
    transition: left 0.3s ease;
    z-index: 99;
  }

  .admin-sidebar.mobile-open {
    left: 0;
  }

  /* Adjust main content */
  .admin-main {
    margin-left: 0;
    width: 100%;
  }

  /* Add overlay when menu is open */
  .mobile-menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 98;
  }

  .mobile-menu-overlay.active {
    display: block;
  }
}

/* 2. BUTTON & TOUCH TARGET IMPROVEMENTS */
/* Improve button spacing and sizing */
.btn {
  min-height: 48px; /* Increase from 44px for better touch */
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-base);
  white-space: nowrap;
}

@media (max-width: 767px) {
  /* Full width buttons on very small screens */
  .card-body .btn {
    width: 100%;
    justify-content: center;
  }

  /* Quick action buttons in grid */
  .grid .btn {
    width: 100%;
    padding: var(--space-md);
    min-height: 56px;
  }

  /* Header buttons should be smaller */
  .admin-header-actions .btn {
    width: auto;
    padding: var(--space-xs) var(--space-sm);
    min-height: 36px;
    font-size: var(--font-size-sm);
  }
}

/* 3. STATISTICS CARDS IMPROVEMENTS */
@media (max-width: 767px) {
  /* Better statistics grid on mobile */
  .stats-grid,
  .grid.grid-cols-2.md\:grid-cols-4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }

  .stat-card,
  .card {
    padding: var(--space-md);
  }

  .stat-value,
  .text-3xl {
    font-size: var(--font-size-xl);
  }

  .stat-label,
  .text-xs {
    font-size: 0.7rem;
  }

  /* Reduce icon size in stat cards */
  .stat-icon {
    font-size: 1.5rem;
  }
}

/* 4. NAVIGATION IMPROVEMENTS */
/* Bottom navigation enhancements */
.bottom-nav {
  height: 56px;
  padding: 0;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}

.bottom-nav-item {
  min-height: 56px;
  padding: var(--space-xs) 0;
  flex: 1;
}

.bottom-nav-icon {
  font-size: 1.25rem;
  margin-bottom: 2px;
}

.bottom-nav-item div:last-child {
  font-size: 0.625rem;
  line-height: 1;
}

/* 5. SEARCH & FILTER IMPROVEMENTS */
@media (max-width: 767px) {
  /* Better search bar layout */
  .search-filter-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  .form-input,
  .form-select {
    width: 100%;
    min-height: 48px;
    font-size: 16px; /* Prevent zoom on iOS */
  }

  /* Action buttons alignment */
  .action-buttons {
    display: flex;
    gap: var(--space-sm);
    width: 100%;
  }

  .action-buttons .btn {
    flex: 1;
  }
}

/* 6. TABLE & LIST IMPROVEMENTS */
@media (max-width: 767px) {
  /* Convert tables to cards on mobile */
  table {
    display: none;
  }

  .mobile-list {
    display: block;
  }

  .list-item {
    background: white;
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-bottom: var(--space-sm);
    box-shadow: var(--shadow-sm);
    border-left: 3px solid var(--primary);
  }

  .list-item-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: var(--space-sm);
  }

  .list-item-title {
    font-weight: 600;
    color: var(--gray-900);
  }

  .list-item-badge {
    font-size: var(--font-size-xs);
  }

  .list-item-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xs);
    font-size: var(--font-size-sm);
    color: var(--gray-600);
  }
}

/* 7. MODAL & OVERLAY IMPROVEMENTS */
@media (max-width: 767px) {
  .modal {
    padding: var(--space-md);
  }

  .modal-content {
    width: 100%;
    max-width: none;
    margin: 0;
    max-height: 90vh;
    overflow-y: auto;
  }

  .modal-header {
    padding: var(--space-md);
    position: sticky;
    top: 0;
    background: white;
    z-index: 10;
  }

  .modal-body {
    padding: var(--space-md);
  }

  .modal-footer {
    padding: var(--space-md);
    position: sticky;
    bottom: 0;
    background: white;
    border-top: 1px solid var(--gray-200);
    display: flex;
    gap: var(--space-sm);
  }

  .modal-footer .btn {
    flex: 1;
  }
}

/* 8. EMPTY STATE IMPROVEMENTS */
.empty-state {
  padding: var(--space-xl) var(--space-md);
}

.empty-state-icon {
  font-size: 3rem;
  margin-bottom: var(--space-md);
  opacity: 0.3;
}

.empty-state h3 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-sm);
}

.empty-state p {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
}

/* 9. QUICK ACTIONS IMPROVEMENTS */
@media (max-width: 767px) {
  .quick-action-btn {
    width: 100%;
    justify-content: center;
    padding: var(--space-md);
    margin-bottom: var(--space-sm);
  }

  /* Stack quick actions vertically */
  .quick-actions-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  /* Toggle switch improvements */
  .toggle-switch {
    margin-top: var(--space-md);
    width: 100%;
    justify-content: center;
  }
}

/* 10. KASSA DASHBOARD SPECIFIC FIXES */
@media (max-width: 767px) {
  /* Hide desktop nav on mobile */
  .kassa-desktop-nav {
    display: none !important;
  }

  /* Improve card spacing */
  .card {
    margin-bottom: var(--space-md);
  }

  /* Status banner improvements */
  .card[style*="border-left: 4px"] {
    margin-bottom: var(--space-md);
  }

  /* Better spacing for statistics */
  .grid.grid-cols-2 .card-body {
    padding: var(--space-sm);
  }

  /* Action buttons grid */
  .grid.grid-cols-2.md\:grid-cols-4 {
    grid-template-columns: 1fr;
  }

  .grid.grid-cols-2.md\:grid-cols-4 .btn {
    width: 100%;
    padding: var(--space-md);
    font-size: var(--font-size-base);
  }
}

/* 11. ENHANCED DASHBOARD SPECIFIC FIXES */
@media (max-width: 767px) {
  /* Widget improvements */
  .widgets-grid {
    grid-template-columns: 1fr;
  }

  .widget {
    margin-bottom: var(--space-md);
  }

  .widget-body {
    max-height: 300px;
  }

  /* Alert improvements */
  .alert-content {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .alert-actions {
    width: 100%;
    display: flex;
    gap: var(--space-sm);
  }

  .alert-btn {
    flex: 1;
  }

  /* Order item improvements */
  .order-item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }

  .order-item .order-amount {
    align-self: flex-end;
  }

  .order-item .order-action {
    width: 100%;
  }

  .order-item .process-btn {
    width: 100%;
    padding: var(--space-sm);
  }
}

/* 12. INVENTORY & CUSTOMER MANAGEMENT FIXES */
@media (max-width: 767px) {
  /* Search and filter section */
  .search-section {
    margin-bottom: var(--space-md);
  }

  /* Export dropdown fix */
  .export-dropdown {
    position: relative;
  }

  .export-dropdown-content {
    position: absolute;
    right: 0;
    top: 100%;
    min-width: 200px;
    background: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 50;
    margin-top: var(--space-xs);
  }

  /* Statistics info alignment */
  .info-text {
    text-align: center;
    margin: var(--space-md) 0;
    font-size: var(--font-size-sm);
  }
}

/* 13. COLOR CONSISTENCY FIXES */
/* Ensure consistent use of primary color */
.btn-success {
  background-color: var(--primary);
  border-color: var(--primary);
  color: #000000 !important;
}

a.btn-success,
a.btn-success:link,
a.btn-success:visited {
  color: #000000 !important;
}

.btn-success:hover {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
  color: #000000 !important;
}

a.btn-success:hover {
  color: #000000 !important;
}

/* Warning states should use warning color */
.badge-warning,
.alert-warning,
.stat-card.warning {
  background-color: var(--warning);
  color: var(--gray-900);
}

/* 14. SPACING & PADDING CONSISTENCY */
@media (max-width: 767px) {
  /* Consistent padding for all sections */
  .container {
    padding: 0 var(--space-md);
  }

  .card-header,
  .card-body,
  .card-footer {
    padding: var(--space-md);
  }

  /* Reduce margin bottom globally */
  .mb-lg {
    margin-bottom: var(--space-md);
  }

  /* Adjust body padding for bottom nav */
  body {
    padding-bottom: 60px;
  }
}

/* 15. ACCESSIBILITY IMPROVEMENTS */
/* Better focus states for mobile */
*:focus {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .btn {
    border: 2px solid currentColor;
  }

  .card {
    border: 1px solid var(--gray-900);
  }
}

/* 16. PERFORMANCE OPTIMIZATIONS */
/* Reduce animations on mobile for better performance */
@media (max-width: 767px) {
  * {
    animation-duration: 0.2s !important;
  }

  .transition {
    transition-duration: 0.2s !important;
  }
}

/* 17. IPHONE SPECIFIC FIXES */
@supports (-webkit-touch-callout: none) {
  /* Prevent text selection on buttons */
  .btn, .bottom-nav-item {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
  }

  /* Fix input zoom on focus */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* Safe area for iPhone X+ */
  .bottom-nav {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* 18. ANDROID SPECIFIC FIXES */
@media (max-width: 767px) and (min-resolution: 2dppx) {
  /* Better touch feedback */
  .btn:active,
  .bottom-nav-item:active {
    transform: scale(0.98);
  }
}

/* 19. UTILITY CLASSES FOR MOBILE */
@media (max-width: 767px) {
  .mobile-hidden { display: none !important; }
  .mobile-only { display: block !important; }
  .mobile-full-width { width: 100% !important; }
  .mobile-text-center { text-align: center !important; }
  .mobile-stack { flex-direction: column !important; }
}

/* 20. LOADING STATES FOR MOBILE */
.mobile-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.mobile-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--gray-300);
  border-top: 3px solid var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}