/* ============================================================
   POS-Kasir Animation & UX Enhancement Layer
   Additive only — does NOT modify data, backup/restore, or report logic.
   Loaded after style.css to cascade on top.
   ============================================================ */

:root{
  --ease-out-expo:cubic-bezier(0.16,1,0.3,1);
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1);
  --dur-fast:0.2s;
  --dur-normal:0.35s;
  --dur-slow:0.5s;
}

/* ---- 1. Page transition (fade + slide-up) ---- */
.page.active{
  animation:posPageEnter var(--dur-normal) var(--ease-out-expo);
}
@keyframes posPageEnter{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}

/* ---- 2. Stagger reveal ---- */
.reveal-in{
  opacity:0;
  transform:translateY(16px);
  animation:posRevealIn var(--dur-slow) var(--ease-out-expo) forwards;
  animation-delay:var(--reveal-delay,0s);
}
@keyframes posRevealIn{
  to{opacity:1;transform:translateY(0)}
}

/* ---- 3. Cart item entrance ---- */
.cart-item{
  animation:posCartIn 0.25s var(--ease-out-expo) backwards;
}
@keyframes posCartIn{
  from{opacity:0;transform:translateX(-10px)}
  to{opacity:1;transform:translateX(0)}
}

/* ---- 4. Cart bump on qty change ---- */
.cart-item.bump{
  animation:posBump 0.3s var(--ease-spring);
}
@keyframes posBump{
  0%,100%{transform:scale(1)}
  30%{transform:scale(1.03)}
  60%{transform:scale(0.99)}
}

/* ---- 5. Ripple effect ---- */
.btn,.checkout-btn,.payment-option,.nav,.inventory-action,
.utility-option,.reset-tab,.dialog-close,.cashier-category,
.cashier-note-button,.reset-select-all,.report-empty-action{
  position:relative;
  overflow:hidden;
}
.ripple{
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,0.4);
  transform:scale(0);
  animation:posRipple 0.6s ease-out;
  pointer-events:none;
}
@keyframes posRipple{
  to{transform:scale(4);opacity:0}
}

/* ---- 6. Button press scale ---- */
.btn:active,.checkout-btn:active,.nav:active,
.payment-option:active,.utility-option:active,
.reset-tab:active,.cashier-category:active{
  transform:scale(0.97);
}

/* ---- 7. Metric / value pulse ---- */
.pulse{
  animation:posPulse 0.4s var(--ease-spring);
}
@keyframes posPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.06)}
}

/* ---- 8. Success checkmark (injected into receipt dialog) ---- */
.pos-success-check{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  margin-bottom:10px;
  border-radius:10px;
  background:var(--success-soft);
  border:1px solid #abefc6;
  animation:posSuccessIn 0.4s var(--ease-spring);
}
.pos-success-check svg{
  width:24px;
  height:24px;
  stroke:#16a34a;
  stroke-width:3;
  fill:none;
  stroke-dasharray:48;
  stroke-dashoffset:48;
  animation:posCheckDraw 0.5s 0.15s ease-out forwards;
  flex-shrink:0;
}
.pos-success-check span{
  font-weight:800;
  color:#16a34a;
  font-size:14px;
}
@keyframes posCheckDraw{to{stroke-dashoffset:0}}
@keyframes posSuccessIn{
  from{opacity:0;transform:scale(0.9)}
  to{opacity:1;transform:scale(1)}
}

/* ---- 9. Toast notifications ---- */
.pos-toast-container{
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  z-index:10000;
  display:flex;
  flex-direction:column-reverse;
  gap:8px;
  pointer-events:none;
  max-width:calc(100vw - 32px);
}
.pos-toast{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 18px;
  border-radius:12px;
  background:var(--ink);
  color:#fff;
  font-weight:700;
  font-size:14px;
  box-shadow:0 8px 24px rgba(0,0,0,0.18);
  animation:posToastIn 0.35s var(--ease-spring);
  pointer-events:auto;
}
.pos-toast.success{background:#16a34a}
.pos-toast.error{background:#b42318}
.pos-toast.info{background:var(--matcha)}
.pos-toast.leaving{animation:posToastOut 0.3s ease-in forwards}
.pos-toast svg{width:20px;height:20px;flex-shrink:0}
@keyframes posToastIn{
  from{opacity:0;transform:translateY(20px) scale(0.9)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes posToastOut{
  to{opacity:0;transform:translateY(20px) scale(0.9)}
}

/* ---- 10. Card hover lift ---- */
.card,.dashboard-metric-card,.product-summary-card,
.report-stat-card,.setting-card,.audit-stat-card,
.product-manage-card{
  transition:transform var(--dur-fast) var(--ease-out-expo),
              box-shadow var(--dur-fast) ease;
}
.dashboard-metric-card:hover,.product-summary-card:hover,
.report-stat-card:hover,.setting-card:hover,.audit-stat-card:hover,
.product-manage-card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(16,24,40,0.12);
}

/* ---- 11. Dialog entrance ---- */
.dialog-enter{
  animation:posDialogIn var(--dur-normal) var(--ease-out-expo);
}
@keyframes posDialogIn{
  from{opacity:0;transform:scale(0.96) translateY(8px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}

/* ---- 12. Smooth nav + input transitions ---- */
.nav{
  transition:background var(--dur-fast) ease,color var(--dur-fast) ease,transform 0.08s ease;
}
input,select{
  transition:box-shadow 0.2s ease,border-color 0.2s ease;
}

/* ---- 13. Product tile / card press feedback ---- */
.product-manage-card:active{
  transform:scale(0.99);
}

/* ---- 14. Checkout button subtle attention ---- */
.checkout-btn{
  transition:transform 0.08s ease,filter var(--dur-fast) ease;
}
.checkout-btn:hover{
  filter:brightness(1.08);
}

/* ---- 15. Tab indicator slide ---- */
.reset-tab{
  transition:background var(--dur-fast) ease,color var(--dur-fast) ease,transform 0.08s ease;
}

/* ---- 16. Audit log row hover ---- */
.audit-row,.reset-transaction-item{
  transition:background var(--dur-fast) ease;
}

/* ---- 17. Splash smooth exit ---- */
#splashScreen{
  transition:opacity 0.5s ease,visibility 0.5s ease;
}

/* ---- 18. Empty state gentle float ---- */
.report-empty-icon,.empty-state{
  animation:posFloat 3s ease-in-out infinite;
}
@keyframes posFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}

/* ============================================================
   PAKET A — Visual Polish (A1-A5)
   ============================================================ */

/* ---- A1. Gradient accent borders on metric/summary cards ---- */
.dashboard-metric-card,
.product-summary-card,
.report-stat-card,
.audit-stat-card{
  position:relative;
  border-top:3px solid transparent;
  border-image:linear-gradient(90deg,var(--matcha),var(--honey)) 1;
  border-image-slice:1;
}
/* Fallback for browsers without border-image support */
@supports not (border-image:linear-gradient(90deg,red,blue) 1){
  .dashboard-metric-card,
  .product-summary-card,
  .report-stat-card,
  .audit-stat-card{
    border-top:3px solid var(--matcha);
  }
}
/* Metric-specific accent colors */
.metric-revenue,.report-stat-transaction{border-image:linear-gradient(90deg,var(--matcha),#5a9e3a) 1}
.metric-profit,.report-stat-profit{border-image:linear-gradient(90deg,#16a34a,#4ade80) 1}
.metric-qty,.report-stat-qty{border-image:linear-gradient(90deg,#fb8c2f,#fbbf24) 1}
.metric-product,.product-summary-value{border-image:linear-gradient(90deg,var(--honey),#fbbf24) 1}

/* ---- A2. Active nav glow + indicator slide ---- */
.nav.active{
  background:linear-gradient(90deg,rgba(141,194,101,0.18),rgba(141,194,101,0.06));
  box-shadow:inset 3px 0 0 #8dc265,0 0 12px rgba(141,194,101,0.15);
  color:#fff;
}
.nav.active::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:3px;
  height:60%;
  border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,#8dc265,var(--honey));
  animation:posNavIndicator 0.3s var(--ease-out-expo);
}
@keyframes posNavIndicator{
  from{height:0;opacity:0}
  to{height:60%;opacity:1}
}
.nav{
  position:relative;
}
.nav:hover:not(.active){
  background:rgba(255,255,255,0.06);
}

/* ---- A3. Stock status pills (uses existing status-* classes) ---- */
.product-stock-row em{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 12px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:0.02em;
  text-transform:uppercase;
  border:1px solid transparent;
}
.product-stock-row em::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  flex-shrink:0;
}
/* Safe — green */
.status-safe .product-stock-row em{
  background:#ecfdf3;
  color:#166534;
  border-color:#abefc6;
}
.status-safe .product-stock-row em::before{background:#16a34a}
/* Low — amber */
.status-low .product-stock-row em{
  background:#fff7e6;
  color:#b76a00;
  border-color:#ffe0a3;
}
.status-low .product-stock-row em::before{background:#fb8c2f}
/* Critical — orange-red */
.status-critical .product-stock-row em{
  background:#fff4ed;
  color:#c2410c;
  border-color:#fed7aa;
}
.status-critical .product-stock-row em::before{background:#f97316}
/* Empty — red */
.status-empty .product-stock-row em{
  background:#fef2f2;
  color:#b42318;
  border-color:#fecaca;
}
.status-empty .product-stock-row em::before{background:#b42318}

/* ---- A4. Skeleton loading shimmer ---- */
.pos-skeleton{
  background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);
  background-size:200% 100%;
  animation:posShimmer 1.4s ease-in-out infinite;
  border-radius:6px;
  color:transparent !important;
}
.pos-skeleton *{visibility:hidden}
@keyframes posShimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}
/* Skeleton card placeholder */
.pos-skeleton-card{
  min-height:112px;
  border:1px solid var(--line);
  border-radius:10px;
  background:linear-gradient(90deg,#f0f0f0 25%,#e8e8e8 50%,#f0f0f0 75%);
  background-size:200% 100%;
  animation:posShimmer 1.4s ease-in-out infinite;
}

/* ---- A5. Gradient text on topbar heading ---- */
.topbar h2{
  background:linear-gradient(135deg,var(--matcha-dark) 0%,var(--matcha) 50%,var(--honey) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
/* Fallback */
@supports not (-webkit-background-clip:text){
  .topbar h2{
    color:var(--matcha-dark);
    background:none;
    -webkit-text-fill-color:initial;
  }
}

/* ============================================================
   PAKET B — Micro-interactions (B1-B3)
   ============================================================ */

/* ---- B1. Nav icon bounce on activation ---- */
.nav.active .nav-icon{
  animation:posNavIconBounce 0.45s var(--ease-spring);
}
@keyframes posNavIconBounce{
  0%{transform:scale(0.6) rotate(-8deg)}
  50%{transform:scale(1.18) rotate(4deg)}
  100%{transform:scale(1) rotate(0)}
}
/* Subtle bounce on hover for non-active nav icons */
.nav:hover:not(.active) .nav-icon{
  animation:posNavIconNudge 0.3s var(--ease-spring);
}
@keyframes posNavIconNudge{
  0%,100%{transform:translateX(0)}
  40%{transform:translateX(3px)}
}

/* ---- B2. Input focus glow (matcha ring) ---- */
input:focus,select:focus{
  border-color:var(--matcha) !important;
  box-shadow:0 0 0 4px rgba(47,111,69,0.16) !important;
  transition:box-shadow 0.18s var(--ease-out-expo),
             border-color 0.18s ease !important;
}
/* Soft glow for search/filter wrapper inputs (no double border) */
.cashier-search input:focus,
.product-search input:focus,
.reset-search:focus,
.reset-period-filter select:focus,
.reset-pin-wrap input:focus,
.dashboard-toolbar-select select:focus{
  box-shadow:none !important;
}
.cashier-search:focus-within,
.product-search:focus-within,
.reset-search-wrap:focus-within,
.reset-period-filter:focus-within,
.reset-pin-wrap:focus-within,
.dashboard-toolbar-select:focus-within{
  border-color:var(--matcha) !important;
  box-shadow:0 0 0 4px rgba(47,111,69,0.16) !important;
  transition:box-shadow 0.18s var(--ease-out-expo),
             border-color 0.18s ease;
}

/* ---- B3. Cart item slide-out on remove ---- */
.cart-item.removing{
  animation:posCartOut 0.28s var(--ease-out-expo) forwards;
  pointer-events:none;
}
@keyframes posCartOut{
  to{
    opacity:0;
    transform:translateX(120%) scale(0.92);
    max-height:0;
    margin-top:0;
    margin-bottom:0;
    padding-top:0;
    padding-bottom:0;
    border-width:0;
  }
}

/* ============================================================
   Reduced motion — disable all animations for accessibility
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
  .page.active{animation:none}
  .reveal-in{opacity:1;transform:none}
  .cart-item{animation:none}
  .cart-item.removing{opacity:0;transform:none;max-height:0}
  .nav.active .nav-icon,.nav:hover:not(.active) .nav-icon{animation:none}
  .report-empty-icon,.empty-state{animation:none}
}

/* ============================================================
   Mobile tweaks — larger touch ripple, bottom toast
   ============================================================ */
@media (max-width:900px){
  .pos-toast-container{
    bottom:16px;
    left:16px;
    right:16px;
    transform:none;
    max-width:none;
  }
  .pos-toast{
    justify-content:center;
  }
}