/**
 * GGZ POS — Custom CSS Utilities
 * Complements Tailwind CSS v3 with sleek scrollbars, print styles, animations, and touch controls.
 */

:root {
  --color-primary: #ddaf31;
  --color-secondary: #1a1a2e;
  --color-gold: #ddaf31;
  --color-dark: #1a1a2e;
}

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

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

::-webkit-scrollbar-thumb {
  background: rgba(156, 163, 175, 0.4);
  border-radius: 9999px;
  transition: background-color 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(107, 114, 128, 0.7);
}

.dark ::-webkit-scrollbar-thumb {
  background: rgba(75, 85, 99, 0.4);
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: rgba(107, 114, 128, 0.6);
}

/* Hide scrollbar for clean UI while preserving scrollability */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ==========================================================================
   Touch Optimization for POS Terminals (DEVELOPMENT_RULES.md §10)
   ========================================================================== */
.touch-action-manipulation {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.select-none-user {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.pos-touch-button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  min-height: 44px;
  min-width: 44px;
  transition: transform 0.05s ease, filter 0.15s ease, background-color 0.15s ease;
}

.pos-touch-button:active {
  transform: scale(0.97);
}

/* ==========================================================================
   Animation Helpers
   ========================================================================== */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(221, 175, 49, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(221, 175, 49, 0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-slide-in-right {
  animation: slideInRight 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-pulse-glow {
  animation: pulseGlow 2s infinite;
}

/* ==========================================================================
   Print Styles (Receipts and Reports)
   ========================================================================== */
@media print {
  /* Hide navigation, sidebar, topbar, buttons */
  aside,
  nav,
  header,
  .no-print,
  button,
  .btn,
  .sidebar,
  .topbar,
  #toast-container {
    display: none !important;
  }

  body {
    background-color: #ffffff !important;
    color: #000000 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 12pt !important;
  }

  .print-only {
    display: block !important;
  }

  /* Thermal Receipt Printing (58mm / 80mm) */
  .receipt-container {
    width: 80mm !important;
    max-width: 80mm !important;
    margin: 0 auto !important;
    padding: 2mm !important;
    font-family: 'Courier New', Courier, monospace !important;
    font-size: 9pt !important;
    line-height: 1.25 !important;
    color: #000000 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    border: none !important;
  }

  .receipt-container-58mm {
    width: 58mm !important;
    max-width: 58mm !important;
    font-size: 8pt !important;
  }

  .receipt-table {
    width: 100% !important;
    border-collapse: collapse !important;
  }

  .receipt-table th,
  .receipt-table td {
    padding: 2px 0 !important;
  }

  .receipt-divider {
    border-top: 1px dashed #000000 !important;
    margin: 4px 0 !important;
  }

  .receipt-double-divider {
    border-top: 2px double #000000 !important;
    margin: 4px 0 !important;
  }

  .receipt-center {
    text-align: center !important;
  }

  .receipt-right {
    text-align: right !important;
  }

  .receipt-left {
    text-align: left !important;
  }

  .receipt-bold {
    font-weight: bold !important;
  }
}