/* ════════════════════════════════════════════════════════════════════
   ENHANCE.CSS — modernization layer
   Loaded AFTER style.css. Doesn't redefine your design tokens or colors —
   only adds motion, depth, and polish on top of the existing system so
   nothing you already built gets overwritten.
   ════════════════════════════════════════════════════════════════════ */

/* ── Global easing / smoothness ──────────────────────────────────── */
:root{
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

/* ── Page transitions ────────────────────────────────────────────── */
.page{ will-change: opacity, transform; }
.page.page-enter{
  animation: pageIn .45s var(--ease-out) both;
}
@keyframes pageIn{
  from{ opacity:0; transform: translateY(14px) scale(.99); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}

/* ── Staggered card / row entrance ──────────────────────────────── */
.stagger-in{
  animation: staggerIn .5s var(--ease-out) both;
  animation-delay: calc(var(--stagger-i, 0) * 45ms);
}
@keyframes staggerIn{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform: translateY(0); }
}

/* ── Cards: lift on hover ────────────────────────────────────────── */
.card, .stat-card{
  transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out);
}
.card:hover, .stat-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* ── Stat numbers: gentle count-up pulse when they change ─────────── */
.s-num{
  display:inline-block;
  transition: transform .25s var(--ease-spring);
}
.s-num.bump{ transform: scale(1.18); }

/* ── Buttons: press + shine ─────────────────────────────────────── */
.btn{
  position:relative;
  overflow:hidden;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), filter .18s;
}
.btn:hover{ filter:brightness(1.05); }
.btn:active{ transform: scale(.96); }
.btn-primary{ box-shadow: 0 2px 10px rgba(42,122,82,.25); }
.btn-primary:hover{ box-shadow: 0 6px 18px rgba(42,122,82,.35); transform: translateY(-1px); }

/* subtle shine sweep on primary buttons */
.btn-primary::after{
  content:'';
  position:absolute; top:0; left:-60%;
  width:40%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-20deg);
  transition: left .55s var(--ease-out);
  pointer-events:none;
}
.btn-primary:hover::after{ left:130%; }

/* ── Sidebar nav items: sliding active indicator ────────────────── */
.nav-item{
  position:relative;
  transition: background .25s var(--ease-out), color .25s var(--ease-out), padding-left .25s var(--ease-out);
}
.nav-item::before{
  content:'';
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:0;
  background: var(--g3, #2a7a52);
  border-radius:0 4px 4px 0;
  transition: height .28s var(--ease-spring);
}
.nav-item:hover{ padding-left: 4px; }
.nav-item.active::before{ height:70%; }

/* ── Modals: scale + fade in, backdrop blur ─────────────────────── */
.modal-overlay{
  animation: overlayIn .25s var(--ease-out) both;
  backdrop-filter: blur(3px);
}
@keyframes overlayIn{ from{ opacity:0 } to{ opacity:1 } }
.modal-box{
  animation: modalIn .32s var(--ease-spring) both;
}
@keyframes modalIn{
  from{ opacity:0; transform: translateY(18px) scale(.96); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}

/* ── Form fields: focus glow ─────────────────────────────────────── */
input, select, textarea{
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
input:focus, select:focus, textarea:focus{
  box-shadow: 0 0 0 3px rgba(74,171,124,.18);
}

/* ── Toasts: slide + spring in ──────────────────────────────────── */
.toast, [class*="toast"]{
  animation: toastIn .4s var(--ease-spring) both;
}
@keyframes toastIn{
  from{ opacity:0; transform: translateX(24px); }
  to{ opacity:1; transform: translateX(0); }
}

/* ── Empty states: soft breathing icon ──────────────────────────── */
.empty-state i{
  animation: softFloat 3.2s ease-in-out infinite;
}
@keyframes softFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}

/* ── Skeleton loading shimmer (add class="skeleton" via JS while awaiting fetch) ── */
.skeleton{
  position:relative;
  overflow:hidden;
  background: var(--gray6);
  border-radius: var(--radius-sm);
  color: transparent !important;
}
.skeleton::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: translateX(-100%);
  animation: shimmer 1.3s infinite;
}
@keyframes shimmer{ to{ transform: translateX(100%); } }

/* ── Login screen: slower ambient background zoom ───────────────── */
.login-bg{
  animation: bgZoom 24s ease-in-out infinite alternate;
}
@keyframes bgZoom{
  from{ transform: scale(1); }
  to{ transform: scale(1.08); }
}
.login-card{
  animation: loginCardIn .6s var(--ease-out) both;
}
@keyframes loginCardIn{
  from{ opacity:0; transform: translateY(24px); }
  to{ opacity:1; transform: translateY(0); }
}

/* ── Table rows: quick highlight on hover ───────────────────────── */
.tbl tbody tr{
  transition: background .18s var(--ease-out);
}
.tbl tbody tr:hover{
  background: var(--g9, #f3fcf7);
}

/* ── Reduced motion: respect user/OS preference ─────────────────── */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}