/* PathoPex custom styles */

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #0d9488; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #0f766e; }

/* Focus ring override for teal */
*:focus-visible { outline: 2px solid #14b8a6; outline-offset: 2px; }

/* Flash messages */
.flash-success { background: #d1fae5; color: #065f46; border-left: 4px solid #10b981; }
.flash-error   { background: #fee2e2; color: #991b1b; border-left: 4px solid #ef4444; }
.flash-info    { background: #dbeafe; color: #1e40af; border-left: 4px solid #3b82f6; }
.flash-warning { background: #fef3c7; color: #92400e; border-left: 4px solid #f59e0b; }

/* Line clamp utilities (for older browser support) */
.line-clamp-1 { overflow:hidden; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; }
.line-clamp-2 { overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.line-clamp-3 { overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; }

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

/* Transition for interactive elements */
.btn-primary { @apply px-6 py-2.5 bg-teal-700 text-white font-bold rounded-xl hover:bg-teal-800 active:scale-95 transition-all text-sm; }
.btn-secondary { @apply px-6 py-2.5 bg-white border border-gray-200 text-gray-700 font-bold rounded-xl hover:border-teal-300 hover:text-teal-700 active:scale-95 transition-all text-sm; }
.btn-orange { @apply px-6 py-2.5 bg-orange-500 text-white font-bold rounded-xl hover:bg-orange-600 active:scale-95 transition-all text-sm; }

/* Floating WhatsApp button pulse */
.wa-float { animation: pulse-wa 2s infinite; }
@keyframes pulse-wa { 0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,.5)} 70%{box-shadow:0 0 0 10px rgba(37,211,102,0)} }

/* Card hover lift */
.card-hover { transition: transform 0.2s, box-shadow 0.2s; }
.card-hover:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,0.1); }

/* Step progress bar */
.step-bar { display:flex; align-items:center; gap:0; }
.step-bar .step { display:flex; flex-direction:column; align-items:center; flex:1; position:relative; }
.step-bar .step-circle { width:2rem; height:2rem; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700; z-index:1; }
.step-bar .step-line { position:absolute; top:1rem; left:50%; width:100%; height:2px; z-index:0; }
.step-bar .step:last-child .step-line { display:none; }

/* Drag-drop zone highlight */
.drop-zone-active { border-color: #0d9488 !important; background: #f0fdfa !important; }

/* Chart container */
.chart-container { position:relative; }

/* Print styles for reports */
@media print {
  nav, footer, .no-print, .wa-float { display:none !important; }
  body { background:white; }
  .print-full { width:100% !important; }
}

/* Hero gradient overlay */
.hero-overlay { background: linear-gradient(135deg, rgba(15,118,110,0.9) 0%, rgba(15,118,110,0.7) 60%, rgba(247,148,29,0.3) 100%); }

/* Package card age tab */
.pkg-tab-btn.active { background: #0f766e; color:#fff; border-color:#0f766e; }

/* Notification dot */
.notif-dot::after { content:''; position:absolute; top:-2px; right:-2px; width:8px; height:8px; border-radius:50%; background:#ef4444; border:2px solid white; }

/* Mobile bottom nav safe area */
.mobile-bottom-nav { padding-bottom: env(safe-area-inset-bottom, 0); }

/* Responsive table wrapper */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Tag badge */
.tag { @apply inline-block px-2.5 py-0.5 text-xs font-semibold rounded-full bg-teal-50 text-teal-700; }

/* Status colors */
.status-pending    { background:#fef3c7; color:#92400e; }
.status-confirmed  { background:#dbeafe; color:#1e40af; }
.status-sample     { background:#ede9fe; color:#5b21b6; }
.status-processing { background:#fce7f3; color:#9d174d; }
.status-ready      { background:#d1fae5; color:#065f46; }
.status-done       { background:#ecfdf5; color:#065f46; }
.status-cancelled  { background:#fee2e2; color:#991b1b; }

/* Booking steps on booking page */
.booking-step { display:none; }
.booking-step.active { display:block; animation: fadeIn 0.25s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }