/* ============================================================
   ANALYTICS PAGE - Complete UI Fix
   Missing utility classes that analytics.html & analytics.js need
   ============================================================ */

/* ================================
   GRADIENT BACKGROUNDS
   ================================ */

/* Gradient direction */
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-from), var(--tw-gradient-to));
}

/* Green gradient stops */
.from-green-500 { --tw-gradient-from: #22c55e; --tw-gradient-to: #22c55e; }
.to-green-600   { --tw-gradient-to: #16a34a; }

/* Red gradient stops */
.from-red-500 { --tw-gradient-from: #ef4444; --tw-gradient-to: #ef4444; }
.to-red-600   { --tw-gradient-to: #dc2626; }

/* Blue gradient stops */
.from-blue-500 { --tw-gradient-from: #3b82f6; --tw-gradient-to: #3b82f6; }
.to-blue-600   { --tw-gradient-to: #2563eb; }

/* Purple gradient stops */
.from-purple-500 { --tw-gradient-from: #a855f7; --tw-gradient-to: #a855f7; }
.to-purple-600   { --tw-gradient-to: #9333ea; }

/* Orange gradient stops */
.from-orange-500 { --tw-gradient-from: #f97316; --tw-gradient-to: #f97316; }
.to-orange-600   { --tw-gradient-to: #ea580c; }

/* ================================
   OPACITY UTILITIES
   ================================ */

.opacity-0   { opacity: 0; }
.opacity-10  { opacity: 0.1; }
.opacity-20  { opacity: 0.2; }
.opacity-30  { opacity: 0.3; }
.opacity-50  { opacity: 0.5; }
.opacity-70  { opacity: 0.7; }
.opacity-80  { opacity: 0.8; }
.opacity-90  { opacity: 0.9; }
.opacity-100 { opacity: 1; }

/* ================================
   BACKGROUND WITH OPACITY (slash syntax)
   Used for icon circle backgrounds on analytics cards
   ================================ */

.bg-primary\/10 { background-color: rgba(136, 177, 201, 0.1); }
.bg-primary\/20 { background-color: rgba(136, 177, 201, 0.2); }
.bg-success\/10 { background-color: rgba(42, 157, 143, 0.1); }
.bg-success\/20 { background-color: rgba(42, 157, 143, 0.2); }
.bg-info\/10    { background-color: rgba(76, 201, 240, 0.1); }
.bg-info\/20    { background-color: rgba(76, 201, 240, 0.2); }
.bg-warning\/10 { background-color: rgba(255, 159, 28, 0.1); }
.bg-warning\/20 { background-color: rgba(255, 159, 28, 0.2); }
.bg-danger\/10  { background-color: rgba(230, 57, 70, 0.1); }

/* ================================
   EXTENDED COLOR PALETTE
   Used in analytics.js for payment methods, categories, etc.
   ================================ */

/* --- Green --- */
.text-green-500 { color: #22c55e; }
.text-green-600 { color: #16a34a; }
.text-green-800 { color: #166534; }
.bg-green-100   { background-color: #dcfce7; }
.bg-green-500   { background-color: #22c55e; }
.bg-green-600   { background-color: #16a34a; }

/* --- Blue --- */
.text-blue-500  { color: #3b82f6; }
.text-blue-800  { color: #1e40af; }
.bg-blue-100    { background-color: #dbeafe; }
.bg-blue-500    { background-color: #3b82f6; }
.bg-blue-600    { background-color: #2563eb; }

/* --- Purple --- */
.text-purple-500 { color: #a855f7; }
.text-purple-800 { color: #6b21a8; }
.bg-purple-100   { background-color: #f3e8ff; }
.bg-purple-500   { background-color: #a855f7; }

/* --- Orange --- */
.text-orange-500 { color: #f97316; }
.text-orange-800 { color: #9a3412; }
.bg-orange-100   { background-color: #ffedd5; }
.bg-orange-500   { background-color: #f97316; }

/* --- Pink --- */
.text-pink-500   { color: #ec4899; }
.text-pink-800   { color: #9d174d; }
.bg-pink-100     { background-color: #fce7f3; }
.bg-pink-500     { background-color: #ec4899; }

/* --- Teal --- */
.text-teal-500   { color: #14b8a6; }
.text-teal-800   { color: #115e59; }
.bg-teal-100     { background-color: #ccfbf1; }
.bg-teal-500     { background-color: #14b8a6; }

/* --- Red (extended) --- */
.text-red-600    { color: #dc2626; }
.bg-red-500      { background-color: #ef4444; }
.bg-red-600      { background-color: #dc2626; }

/* --- Gray (extended) --- */
.bg-gray-500     { background-color: #6b7280; }
.text-gray-900   { color: #111827; }
.text-gray-100   { color: #f3f4f6; }

/* ================================
   DIVIDE (border between children)
   ================================ */

.divide-y > * + * {
  border-top: 1px solid var(--border-color);
}

.divide-gray-100 > * + * {
  border-color: #f3f4f6;
}

.dark .divide-gray-100 > * + *,
.dark .dark\:divide-gray-700 > * + * {
  border-color: #374151;
}

/* ================================
   COLUMN SPAN UTILITIES
   ================================ */

.col-span-full { grid-column: 1 / -1; }

/* ================================
   TEXT SIZE UTILITIES (Analytics specific)
   ================================ */

.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }

/* ================================
   ADDITIONAL MISSING UTILITIES
   ================================ */

/* Uppercase */
.uppercase { text-transform: uppercase; }
.tracking-wide { letter-spacing: 0.025em; }
.tracking-wider { letter-spacing: 0.05em; }
.tracking-widest { letter-spacing: 0.1em; }
.leading-none { line-height: 1; }
.leading-tight { line-height: 1.25; }

/* Width utilities */
.w-8  { width: 2rem; }
.w-12 { width: 3rem; }
.w-20 { width: 5rem; }
.h-2  { height: 0.5rem; }
.h-8  { height: 2rem; }
.h-20 { height: 5rem; }
.h-24 { height: 6rem; }
.h-32 { height: 8rem; }
.min-w-\[30px\] { min-width: 30px; }

/* Z-index */
.z-\[100\] { z-index: 100; }
.z-\[60\]  { z-index: 60; }
.z-\[1000\] { z-index: 1000; }

/* Flex shrink */
.flex-shrink-0 { flex-shrink: 0; }

/* Background opacity with class */
.bg-black\/60 { background-color: rgba(0, 0, 0, 0.6); }
.bg-white\/50 { background-color: rgba(255, 255, 255, 0.5); }

/* Backdrop blur */
.backdrop-blur-sm { backdrop-filter: blur(4px); }
.backdrop-blur-md { backdrop-filter: blur(8px); }

/* Max height bracket values */
.max-h-\[50vh\] { max-height: 50vh; }
.max-h-\[40vh\] { max-height: 40vh; }

/* Border bottom on hover */
.border-b:last-child { border-bottom: none; }
.hover\:bg-gray-50:hover { background-color: #f9fafb; }

/* Group hover - used by analytics charts */
.group:hover .group-hover\:opacity-100 { opacity: 1; }
.group:hover .group-hover\:bg-primary-dark { background-color: var(--color-primary-dark); }

/* Specific analytics chart tooltip positioning */
#hourly-sales-chart .group,
#daily-sales-chart .group {
  position: relative;
}

/* ================================
   ANALYTICS PAGE - MOBILE RESPONSIVENESS
   ================================ */

@media (max-width: 640px) {
  /* Period tabs should scroll horizontally */
  .period-tab-btn {
    min-height: 36px !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.8125rem !important;
    border-radius: 0.5rem !important;
  }

  /* Profit/Expense/Net cards stack */
  .grid.grid-cols-1.md\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }

  /* Gradient cards text sizes */
  .bg-gradient-to-r .text-3xl {
    font-size: 1.5rem !important;
    line-height: 2rem !important;
  }

  .bg-gradient-to-r .text-4xl {
    font-size: 1.5rem !important;
  }

  /* Category sales single column */
  #category-sales-list {
    grid-template-columns: 1fr !important;
  }

  /* Chart sections */
  #hourly-sales-chart,
  #daily-sales-chart {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Recent sales table - card layout */
  #recent-sales-body tr {
    display: block !important;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    padding: 1rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }

  .dark #recent-sales-body tr {
    background: #1f2937;
    border-color: #374151;
  }

  #recent-sales-body td {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 0.375rem 0 !important;
    border: none !important;
    font-size: 0.875rem;
  }

  /* Bill number */
  #recent-sales-body td:nth-child(1) {
    font-weight: 700 !important;
    font-size: 1.125rem !important;
    color: var(--color-primary) !important;
    padding-bottom: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    border-bottom: 1px solid #e5e7eb !important;
  }

  #recent-sales-body td:nth-child(1)::before { content: ''; }
  #recent-sales-body td:nth-child(2)::before { content: 'Time: '; font-weight: 600; color: #6b7280; }
  #recent-sales-body td:nth-child(3)::before { content: 'Customer: '; font-weight: 600; color: #6b7280; }
  #recent-sales-body td:nth-child(4)::before { content: 'Items: '; font-weight: 600; color: #6b7280; }
  #recent-sales-body td:nth-child(5)::before { content: 'Payment: '; font-weight: 600; color: #6b7280; }

  /* Amount - prominent */
  #recent-sales-body td:nth-child(6) {
    font-weight: 700 !important;
    font-size: 1.25rem !important;
    color: #059669 !important;
    margin-top: 0.5rem !important;
    padding-top: 0.5rem !important;
    border-top: 1px solid #e5e7eb !important;
  }

  /* Hide table header on mobile */
  #recent-sales-table thead {
    display: none !important;
  }
}

/* ================================
   DARK MODE - Analytics Gradient Cards
   ================================ */

.dark .bg-gradient-to-r {
  /* Gradients keep their colors in dark mode - they're already vibrant */
}

.dark .bg-gradient-to-r .text-white {
  color: #ffffff;
}

/* Dark mode for category color cards */
.dark .bg-blue-100    { background-color: rgba(59, 130, 246, 0.15); }
.dark .bg-green-100   { background-color: rgba(34, 197, 94, 0.15); }
.dark .bg-purple-100  { background-color: rgba(168, 85, 247, 0.15); }
.dark .bg-orange-100  { background-color: rgba(249, 115, 22, 0.15); }
.dark .bg-pink-100    { background-color: rgba(236, 72, 153, 0.15); }
.dark .bg-teal-100    { background-color: rgba(20, 184, 166, 0.15); }

.dark .text-blue-800   { color: #93c5fd; }
.dark .text-green-800  { color: #86efac; }
.dark .text-purple-800 { color: #d8b4fe; }
.dark .text-orange-800 { color: #fdba74; }
.dark .text-pink-800   { color: #f9a8d4; }
.dark .text-teal-800   { color: #5eead4; }