/* 
   SaaS-Style Premium Pharmacy Management System CSS 
   Compatible with Tailwind CSS & Django Templates
   Integrated with advanced micro-interactions, hardware-accelerated transitions & 60fps animations.
*/

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  --font-jakarta: 'Plus Jakarta Sans', sans-serif;
  
  /* Stripe-Style & Linear-Style Spring and Easing variables */
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);    /* Satistying elastic bounce */
  --ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000); /* Silky fade-in transition */
  --ease-in-out-sine: cubic-bezier(0.37, 0, 0.63, 1);    /* Natural hover transitions */
  --ease-stripe: cubic-bezier(0.4, 0, 0.2, 1);          /* High-performance standard transition */
}

body {
  font-family: var(--font-jakarta);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #f8fafc;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
  transition: background-color 0.2s var(--ease-stripe);
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Page entrance transition (Triggers automatically for smooth loading) */
main > div, main > form {
  animation: fadeInUp 0.4s var(--ease-out-cubic) both;
  will-change: transform, opacity;
}

/* Hardware-Accelerated Keyframe definitions */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px) translateZ(0);
  }
  to {
    opacity: 1;
    transform: translateY(0) translateZ(0);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95) translateZ(0);
  }
  to {
    opacity: 1;
    transform: scale(1) translateZ(0);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.9) translateZ(0);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1) translateZ(0);
  }
}

/* Premium Card Lifts, Scale, and Press Feedback states */
.premium-card-hover {
  transition: transform 0.25s var(--ease-in-out-sine), box-shadow 0.25s var(--ease-in-out-sine), border-color 0.2s var(--ease-stripe);
}

.premium-card-hover:hover {
  transform: translateY(-4px) translateZ(0);
  border-color: rgba(99, 102, 241, 0.15) !important;
  box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.03), 0 8px 10px -6px rgba(15, 23, 42, 0.03) !important;
}

/* Interactive Click/Press compression matrices */
.click-press {
  transition: transform 0.1s var(--ease-stripe);
}

.click-press:active {
  transform: scale(0.97) translateZ(0) !important;
}

/* Active Navigation Indicator link styling with sliding border transition */
.nav-link {
  transition: all 0.2s var(--ease-stripe);
  position: relative;
  overflow: hidden;
}

.nav-link:hover {
  background-color: rgba(255, 255, 255, 0.03);
  color: #ffffff !important;
  transform: translateX(4px) translateZ(0);
}

.nav-link-active {
  background-color: rgba(99, 102, 241, 0.15) !important;
  color: #a5b4fc !important;
  border-left: 4px solid #6366f1;
}

/* Elegant spring adjustments for resizable sidebar width */
#sidebar {
  will-change: width;
  transition: width 0.35s var(--ease-out-back);
}

#main-content-wrapper {
  will-change: padding-left;
  transition: padding-left 0.35s var(--ease-out-back);
}

/* Springy modal popup animation */
.modal-container {
  backdrop-filter: blur(4px);
  transition: all 0.25s var(--ease-stripe);
}

.modal-container > div {
  animation: fadeInScale 0.35s var(--ease-out-back) both;
  will-change: transform, opacity;
}

/* Springy dropdown popup animation */
.dropdown-menu {
  animation: fadeInScale 0.22s var(--ease-out-back) both;
  transform-origin: top right;
  will-change: transform, opacity;
}

/* Silky custom toast slide animation */
#toast-container > div {
  animation: toastSlideIn 0.38s var(--ease-out-back) both;
  will-change: transform, opacity;
}

/* Stripe-quality skeleton shimmer loaders */
.skeleton-shimmer {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 37%, #f1f5f9 63%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
}

/* Print Utilities for Invoice and Reports */
@media print {
  html, body {
    background: white !important;
    color: #000000 !important;
    font-size: 10pt !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }
  
  .no-print,
  #sidebar,
  #mobile-sidebar,
  #mobile-sidebar-overlay,
  #main-content-wrapper header,
  #main-content-wrapper .pt-4.border-t.border-slate-100,
  #toast-container,
  .modal-container {
    display: none !important;
  }
  
  #main-content-wrapper {
    padding-left: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }
  
  #main-content-wrapper > .flex-1 {
    overflow: visible !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .flex-grow.overflow-y-auto {
    overflow: visible !important;
    height: auto !important;
  }
  
  .print-container,
  #print-receipt-wrapper {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: white !important;
  }

  /* Specific typography fixes for high contrast print ink */
  p, span, td, th, h1, h2, h3, h4, h5, h6 {
    color: #000000 !important;
  }

  .text-indigo-600 {
    color: #4f46e5 !important;
  }

  table {
    page-break-inside: auto !important;
  }

  tr {
    page-break-inside: avoid !important;
    page-break-after: auto !important;
  }

  thead {
    display: table-header-group !important;
  }

  /* Standardized A4 Portrait Spacing */
  @page {
    size: A4 portrait;
    margin: 15mm 15mm 15mm 15mm;
  }
}

/* Glassmorphism subtle effects */
.glass-panel {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Custom Table Shadows & Smooth hover states */
.premium-table-row {
  transition: background-color 0.15s ease-in-out, transform 0.15s var(--ease-stripe);
}

.premium-table-row:hover {
  background-color: #f8fafc;
  transform: scale(1.002) translateZ(0);
}

/* Smooth Drawer transitions */
.sidebar-drawer {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}