/* ==========================================================================
   TemuCash - Custom Bakery Stylesheet
   Warm, Cozy & Estetik Bento-Grid UI
   ========================================================================== */

:root {
  --color-creme-bg: #FAF6F0;
  --color-wood-primary: #4A2E18;
  --color-warm-orange: #E07A2E;
}

/* Custom Smooth Transitions */
* {
  -webkit-tap-highlight-color: transparent;
}

body {
  background-color: #FAF6F0;
  background-image: radial-gradient(rgba(123, 75, 39, 0.04) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Custom Warm Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #FAF6F0;
}
::-webkit-scrollbar-thumb {
  background: #DAC2AC;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #A47754;
}

/* Navigation active tab button */
.tab-btn.active {
  background: #4A2E18;
  color: #FAF6F0;
  box-shadow: 0 4px 12px rgba(74, 46, 24, 0.15);
}

/* Filter chips */
.filter-chip.active {
  background: #4A2E18;
  color: #FFFFFF;
}
.filter-chip:not(.active) {
  background: #F5EBE1;
  color: #5C361B;
}

/* Mobile Nav active state */
.mobile-nav-btn.active {
  color: #E07A2E;
}
.mobile-nav-btn.active i {
  stroke-width: 2.5;
}

/* Subtle animations */
@keyframes slideUpModal {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate-slide-up {
  animation: slideUpModal 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.tab-view {
  animation: fadeIn 0.2s ease-out;
}

/* Print Optimization for Reports */
@media print {
  header,
  nav,
  #mobileBottomNav,
  #bentoTipBox,
  .no-print {
    display: none !important;
  }

  body {
    background: white !important;
    color: black !important;
    padding: 0 !important;
  }

  #appContainer {
    max-width: 100% !important;
    padding: 0 !important;
  }

  .shadow-bento,
  .shadow-2xl {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
  }
}