/* ============================================================
   Heppi Salon - Core stylesheet (design system from template)
   ============================================================ */
body { background-color: var(--c-bg, #0f172a); color: #f8fafc; font-family: 'Inter', sans-serif; }
.glass-panel { background: rgba(var(--c-card-rgb, 30, 41, 59), 0.6); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.05); }
.glass-nav { background: rgba(15, 23, 42, 0.8); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.input-glass { background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(255, 255, 255, 0.1); color: white; transition: all 0.3s ease; }
.input-glass:focus { outline: none; border-color: var(--c-glow, #39FF14); box-shadow: 0 0 10px rgba(var(--c-glow-rgb, 57, 255, 20), 0.2); }
.neon-glow:hover { box-shadow: 0 0 15px rgba(var(--c-glow-rgb, 57, 255, 20), 0.5); }

.text-gradient { background: var(--c-title-img, var(--theme-gradient)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
[x-cloak] { display: none !important; }

.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.active { opacity: 1; transform: translateY(0); }

.toast { animation: toastIn .3s ease; }
@keyframes toastIn { from { opacity:0; transform: translateY(-10px);} to {opacity:1; transform:translateY(0);} }
@keyframes float { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-10px);} }
.animate-float { animation: float 6s ease-in-out infinite; }
.spin-wheel { transition: transform 4s cubic-bezier(0.2, 0.8, 0.2, 1); }

/* Light Mode Overrides */
html:not(.dark) body { background-color: var(--c-bg-light, #f8fafc); color: #0f172a; }
html:not(.dark) .glass-panel { background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(0,0,0,0.1); }
html:not(.dark) .glass-nav { background: rgba(255, 255, 255, 0.9); border-bottom: 1px solid rgba(0,0,0,0.1); }
html:not(.dark) .input-glass { background: rgba(255, 255, 255, 0.6); color: #0f172a; border-color: rgba(0,0,0,0.1); }
html:not(.dark) .text-white { color: #0f172a !important; }
html:not(.dark) .text-gray-300 { color: #334155 !important; }
html:not(.dark) .text-gray-400 { color: #475569 !important; }
html:not(.dark) .bg-gray-800 { background-color: #e2e8f0 !important; }
html:not(.dark) .border-gray-700 { border-color: #cbd5e1 !important; }
html:not(.dark) .border-gray-800 { border-color: #e2e8f0 !important; }

/* === Realtime live-update (ops-channel) =================================== */
/* Highlight singkat pada baris tabel yang baru berubah (booking/transaksi/waiting list). */
@keyframes heppiRowHighlight {
  0%   { background-color: rgba(var(--c-glow-rgb, 57, 255, 20), 0.30); }
  60%  { background-color: rgba(var(--c-glow-rgb, 57, 255, 20), 0.16); }
  100% { background-color: transparent; }
}
.heppi-row-highlight {
  animation: heppiRowHighlight 2.2s ease-out forwards;
  box-shadow: inset 0 0 0 2px rgba(var(--c-glow-rgb, 57, 255, 20), 0.6); /* ring glow tema (Stage N) */
  border-radius: 0.35rem;
}
/* Indikator kecil "Live" dengan titik berkedip pelan. */
@keyframes heppiLiveBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.2; }
}
.heppi-live-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background-color: var(--c-glow, #39FF14);
  box-shadow: 0 0 6px var(--c-glow, #39FF14);
  animation: heppiLiveBlink 1.6s ease-in-out infinite;
}

/* === Stage N: aturan warna peran (override utilitas Tailwind primary) ===
   Memastikan TIDAK ada warna lama yang tertinggal: semua mengikuti CSS var
   yang di-set dari Pengaturan > Tampilan. */
.text-primary { color: var(--c-accent) !important; }
.bg-primary { background-color: var(--c-button) !important; color: var(--c-button-text) !important; }
.hover\:bg-primaryHover:hover { background-color: var(--c-button-hover) !important; }
.hover\:bg-primary:hover { background-color: var(--c-button-hover) !important; }
.border-primary { border-color: var(--c-accent) !important; }
.ring-primary { --tw-ring-color: var(--c-accent) !important; }
.fill-primary { fill: var(--c-accent) !important; }

/* Stage U2: light-mode polish for public landing sections */
html:not(.dark) section { color: #0f172a; }
html:not(.dark) .bg-darkBg, html:not(.dark) .bg-darkCard, html:not(.dark) .bg-darkCard\/50 { background-color: #ffffff !important; }
html:not(.dark) .from-darkBg\/80, html:not(.dark) .via-darkBg\/60, html:not(.dark) .to-darkBg { --tw-gradient-from: rgba(248,250,252,.78) var(--tw-gradient-from-position); --tw-gradient-to: rgba(248,250,252,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(248,250,252,.58) var(--tw-gradient-via-position), rgba(248,250,252,.96) var(--tw-gradient-to-position); }
html:not(.dark) .text-gray-500 { color: #64748b !important; }
html:not(.dark) .text-gray-600 { color: #475569 !important; }
html:not(.dark) .border-white\/5, html:not(.dark) .border-white\/10 { border-color: rgba(15,23,42,.10) !important; }
html:not(.dark) .divide-white\/5 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(15,23,42,.08) !important; }
html:not(.dark) .bg-white\/5 { background-color: rgba(15,23,42,.04) !important; }
html:not(.dark) .hover\:bg-white\/5:hover { background-color: rgba(15,23,42,.06) !important; }
html:not(.dark) .glass-panel .text-black { color: #0f172a !important; }

/* Stage U3: shiny text for Play Store hero badge */
.heppi-shiny-text {
  background: linear-gradient(110deg, rgba(255,255,255,.72) 0%, #ffffff 18%, var(--c-accent, #39FF14) 38%, #ffffff 58%, rgba(255,255,255,.72) 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  animation: heppiShine 2.8s linear infinite;
  text-shadow: 0 0 18px rgba(var(--c-glow-rgb,57,255,20),.18);
}
@keyframes heppiShine { to { background-position: -220% center; } }

/* Stage U9: shiny border for hero glass badges */
.heppi-shiny-border {
  position: relative;
  border: 1px solid transparent !important;
  background:
    linear-gradient(rgba(var(--c-card-rgb,30,41,59),.72), rgba(var(--c-card-rgb,30,41,59),.72)) padding-box,
    linear-gradient(120deg, rgba(var(--c-glow-rgb,57,255,20),.18), rgba(255,255,255,.45), rgba(var(--c-glow-rgb,57,255,20),.75), rgba(255,255,255,.18)) border-box !important;
  background-size: 100% 100%, 260% 260% !important;
  animation: heppiBorderShine 3.2s linear infinite;
  box-shadow: 0 0 18px rgba(var(--c-glow-rgb,57,255,20),.16), inset 0 0 12px rgba(var(--c-glow-rgb,57,255,20),.06);
}
@keyframes heppiBorderShine { to { background-position: 0 0, 260% 0; } }
html:not(.dark) .heppi-shiny-border {
  background:
    linear-gradient(rgba(255,255,255,.72), rgba(255,255,255,.72)) padding-box,
    linear-gradient(120deg, rgba(var(--c-glow-rgb,57,255,20),.18), rgba(15,23,42,.25), rgba(var(--c-glow-rgb,57,255,20),.65), rgba(15,23,42,.12)) border-box !important;
}

/* keep colored Google Play logo original */
a[href*="play.google"]:hover svg, a[href*="play.google"]:hover path { filter: none !important; }

/* shiny moving border only; text remains readable */
.heppi-shiny-border { color: var(--c-accent, #39FF14) !important; -webkit-text-fill-color: currentColor !important; }
.heppi-shiny-border::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 0%, transparent 35%, rgba(255,255,255,.75) 48%, rgba(var(--c-glow-rgb,57,255,20),.8) 52%, transparent 65%, transparent 100%);
  transform: translateX(-120%);
  animation: heppiBoxSweep 2.8s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}
@keyframes heppiBoxSweep { to { transform: translateX(120%); } }

/* Stage U12: clean shiny badge sweep, clipped inside badge/card */
.heppi-shiny-border { overflow: hidden !important; isolation: isolate; }
.heppi-shiny-border::after {
  inset: 0 !important;
  width: 34% !important;
  border-radius: inherit !important;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.10) 42%, rgba(255,255,255,.42) 50%, rgba(var(--c-glow-rgb,57,255,20),.32) 56%, transparent 100%) !important;
  transform: translateX(-140%) skewX(-16deg) !important;
  animation: heppiBoxSweepClean 4s ease-in-out infinite !important;
  opacity: .55 !important;
  pointer-events:none !important;
  mix-blend-mode: screen !important;
}
@keyframes heppiBoxSweepClean { to { transform: translateX(340%) skewX(-16deg); } }

/* Stage U13b: disable only the disturbing green sweep bars, keep normal hero/text animations */
.heppi-shiny-border::after { display: none !important; animation: none !important; content: none !important; }
.heppi-shiny-border { animation: none !important; }
.heppi-shiny-text { animation: heppiShine 2.8s linear infinite !important; }
.animate-float { animation: float 6s ease-in-out infinite !important; }

/* Stage U14 FINAL: kill ONLY green sweep/moving border bars; restore normal page animations */
.heppi-shiny-border,
html:not(.dark) .heppi-shiny-border {
  animation: none !important;
  background-size: 100% 100%, 100% 100% !important;
  background-position: 0 0, 0 0 !important;
}
.heppi-shiny-border::before,
.heppi-shiny-border::after,
html:not(.dark) .heppi-shiny-border::before,
html:not(.dark) .heppi-shiny-border::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  transform: none !important;
  background: none !important;
}
/* Keep normal landing animations alive */
.reveal { opacity: 0; transform: translateY(30px); transition: all .8s ease; }
.reveal.active { opacity: 1; transform: translateY(0); }
.animate-float { animation: float 6s ease-in-out infinite !important; }
.heppi-shiny-text { animation: heppiShine 2.8s linear infinite !important; }




/* POS product/service icon box: restore boxed icon without hover color changes. */
.pos-item-icon {
  background: rgba(var(--c-accent-rgb,57,255,20), .12) !important;
  border: 1px solid rgba(var(--c-accent-rgb,57,255,20), .22) !important;
  color: var(--c-accent, #39FF14) !important;
}
.pos-item-icon i.ph,
.pos-item-icon i.ph-fill {
  color: var(--c-accent, #39FF14) !important;
  -webkit-text-fill-color: currentColor !important;
}
.group:hover .pos-item-icon,
.pos-item-icon:hover {
  background: rgba(var(--c-accent-rgb,57,255,20), .12) !important;
  border-color: rgba(var(--c-accent-rgb,57,255,20), .22) !important;
  color: var(--c-accent, #39FF14) !important;
}
.group:hover .pos-item-icon i.ph,
.group:hover .pos-item-icon i.ph-fill,
.pos-item-icon:hover i.ph,
.pos-item-icon:hover i.ph-fill {
  color: var(--c-accent, #39FF14) !important;
  -webkit-text-fill-color: currentColor !important;
}