/* Custom Minimal Pink UI Theme - Marie & Chalie 888 */
@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600;700;800&display=swap');

body, input, button, select, textarea {
  font-family: 'Prompt', sans-serif;
}

/* Ensure FontAwesome icons keep their icon font family */
i, .fa, .fas, .far, .fal, .fab, .fa-solid, .fa-regular, .fa-brands {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", sans-serif !important;
}

/* Navigation Header Card Buttons - High Prominence Active State */
.nav-btn {
  @apply px-4 py-2.5 rounded-xl text-xs font-bold text-slate-600 hover:text-pink-600 hover:bg-white transition-all flex items-center gap-2 cursor-pointer border border-transparent;
}
.nav-btn.active {
  @apply bg-gradient-to-r from-pink-500 via-pink-600 to-rose-600 text-white shadow-lg shadow-pink-500/35 font-extrabold border-transparent transform scale-105 ring-2 ring-pink-300/60;
}
.nav-btn.active i,
.nav-btn.active span {
  color: #ffffff !important;
}

/* Mobile Nav Buttons */
.mobile-nav-btn {
  @apply text-slate-400 hover:text-pink-500 font-medium transition-all;
}
.mobile-nav-btn.active {
  @apply text-pink-600 font-extrabold scale-110;
}

/* Quick Fill Buttons */
.quick-btn {
  @apply px-3 py-1.5 bg-pink-100 hover:bg-pink-500 text-pink-700 hover:text-white font-extrabold rounded-xl text-xs border border-pink-300 shadow-xs transition-all active:scale-95 flex items-center justify-center cursor-pointer;
}

/* Price Input Fields - Super Prominent */
.price-input {
  @apply w-full px-4 py-3 rounded-2xl border-4 border-pink-400 focus:border-pink-600 focus:ring-4 focus:ring-pink-300 outline-none text-base text-pink-900 transition-all font-extrabold bg-pink-50 shadow-inner placeholder:text-pink-300;
}

/* Table Tab Buttons */
.table-tab-btn {
  @apply px-4 py-2 rounded-xl text-xs font-bold text-slate-500 hover:text-pink-600 transition-all border border-transparent;
}
.table-tab-btn.active {
  @apply bg-pink-50 text-pink-600 border-pink-200 font-extrabold shadow-xs;
}

/* Keyboard badge element */
.kbd {
  @apply px-1.5 py-0.5 bg-slate-200 text-slate-700 rounded text-[10px] font-semibold border border-slate-300 shadow-xs;
}

/* Winning highlight row */
.winning-row {
  @apply bg-emerald-50/90 shadow-[inset_0_0_12px_rgba(16,185,129,0.15)] font-bold;
}

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

.animate-fade-in {
  animation: fadeIn 0.2s ease-out forwards;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #f8fafc;
  border-radius: 8px;
}
::-webkit-scrollbar-thumb {
  background: #f472b6;
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
  background: #ec4899;
}