/* ============================================================
   ERP/CRM Mobile-First Production Styles
   ============================================================ */

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-tap-highlight-color: transparent; }
body { -webkit-font-smoothing: antialiased; overscroll-behavior: none; }

/* Safe areas for notched phones */
.safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); }
.safe-top { padding-top: env(safe-area-inset-top, 0px); }

/* Sidebar */
.sidebar { transition: transform 0.3s ease; }
.sidebar.collapsed { transform: translateX(-100%); }

/* Bottom nav for mobile */
.bottom-nav { padding-bottom: env(safe-area-inset-bottom, 8px); }

/* Touch-friendly tap targets */
.touch-target { min-height: 44px; min-width: 44px; }

/* Card hover */
.card { transition: box-shadow 0.15s ease; }
.card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }

/* Status badges */
.badge-active { @apply bg-green-100 text-green-800; }
.badge-inactive { @apply bg-gray-100 text-gray-600; }
.badge-pending { @apply bg-yellow-100 text-yellow-800; }
.badge-paid { @apply bg-green-100 text-green-700; }
.badge-overdue { @apply bg-red-100 text-red-700; }
.badge-cancelled { @apply bg-red-100 text-red-800; }

/* Table */
.data-table { border-collapse: collapse; }
.data-table th { position: sticky; top: 0; background: white; z-index: 1; }

/* Skeleton loader */
.skeleton { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.5s infinite; }
@keyframes skeleton-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

/* Pull to refresh */
.ptr-arrow { transform: rotate(0deg); transition: transform 0.2s; }
.ptr-arrow.ready { transform: rotate(180deg); }

/* Toast */
.toast { animation: slideIn 0.3s ease, fadeOut 0.3s ease 2.7s forwards; }
@keyframes slideIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }

/* Offline indicator */
.offline-banner { display: none; }
body.offline .offline-banner { display: flex; }

/* Focus styles for accessibility */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #3b82f6; outline-offset: 2px;
}

/* Number animation */
.count-animate { transition: all 0.3s ease; }

/* Sync indicator */
.sync-dot { animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* Mobile form */
@media (max-width: 768px) {
  .mobile-full { width: 100%; }
  .mobile-stack { flex-direction: column; }
  .mobile-hide { display: none !important; }
  input, select, textarea { font-size: 16px !important; } /* Prevent iOS zoom */
}

/* Print styles */
@media print {
  .no-print { display: none !important; }
  .print-only { display: block !important; }
  body { font-size: 12pt; }
}

/* Custom scrollbar */
.custom-scroll::-webkit-scrollbar { width: 4px; height: 4px; }
.custom-scroll::-webkit-scrollbar-track { background: transparent; }
.custom-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }

/* Amount formatting */
.amount-positive { color: #16a34a; }
.amount-negative { color: #dc2626; }
.amount-zero { color: #6b7280; }

/* Priority colors */
.priority-urgent { border-left: 3px solid #dc2626; }
.priority-high { border-left: 3px solid #ea580c; }
.priority-medium { border-left: 3px solid #ca8a04; }
.priority-low { border-left: 3px solid #65a30d; }