/* Trendy ERP — motion & depth: 3D sign-in scene, page entrance, count-up numbers, 3D tilt cards, skeleton loading,
   top progress bar, button ripple. Everything is switched off for people who ask their device for reduced motion.
   Lead Developer: Azmaeen Al Mahir · Developed by Roy Group */

/* ---------- top progress bar while the app talks to the server ---------- */
.tr-progress { position: fixed; left: 0; top: 0; height: 3px; width: 0; z-index: 200; background: linear-gradient(90deg, #4FA3E0, #2F5D8A, #2E9E6A); box-shadow: 0 0 10px rgba(79, 163, 224, .7); opacity: 0; transition: width .4s ease, opacity .3s ease; pointer-events: none; }
.tr-progress.on { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  /* ---------- sign-in: a slowly turning 3D city of glass blocks over a moving grid ---------- */
  .login { overflow: hidden; isolation: isolate; }
  .login > *:not(.tr-scene) { position: relative; z-index: 1; }
  .tr-scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; perspective: 900px; overflow: hidden; }
  .tr-floor { position: absolute; left: -50%; right: -50%; bottom: -30%; height: 75%; transform: rotateX(72deg); transform-origin: 50% 100%;
    background-image: linear-gradient(rgba(120, 170, 230, .22) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 170, 230, .22) 1px, transparent 1px); background-size: 64px 64px;
    animation: tr-floor 7s linear infinite; mask-image: linear-gradient(to top, #000 10%, transparent 85%); -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%); }
  @keyframes tr-floor { to { background-position: 0 64px, 0 0; } }
  .tr-orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; animation: tr-orb 16s ease-in-out infinite alternate; }
  .tr-orb.a { width: 420px; height: 420px; left: -120px; top: 8%; background: #2F5D8A; }
  .tr-orb.b { width: 360px; height: 360px; right: -100px; top: 30%; background: #1F6B4B; animation-delay: -6s; }
  .tr-orb.c { width: 260px; height: 260px; left: 45%; top: -80px; background: #B4561F; opacity: .35; animation-delay: -11s; }
  @keyframes tr-orb { to { transform: translate(60px, 40px) scale(1.15); } }
  .tr-cube { --s: 70px; position: absolute; width: var(--s); height: var(--s); transform-style: preserve-3d; animation: tr-spin var(--t, 26s) linear infinite, tr-bob 6s ease-in-out infinite alternate; }
  .tr-cube i { position: absolute; inset: 0; border: 1px solid rgba(160, 200, 255, .45); background: linear-gradient(135deg, rgba(120, 170, 230, .16), rgba(255, 255, 255, .03)); backdrop-filter: blur(2px); }
  .tr-cube i:nth-child(1) { transform: translateZ(calc(var(--s) / 2)); }
  .tr-cube i:nth-child(2) { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
  .tr-cube i:nth-child(3) { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
  .tr-cube i:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
  .tr-cube i:nth-child(5) { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
  .tr-cube i:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
  @keyframes tr-spin { from { transform: rotateX(-18deg) rotateY(0); } to { transform: rotateX(-18deg) rotateY(360deg); } }
  @keyframes tr-bob { to { translate: 0 -18px; } }
  .tr-tower { position: absolute; bottom: 0; width: 46px; transform-style: preserve-3d; animation: tr-rise 1.4s cubic-bezier(.2, .8, .2, 1) both; }
  .tr-tower::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(120, 170, 230, .28), rgba(120, 170, 230, .04)); border: 1px solid rgba(160, 200, 255, .3); border-bottom: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .18) 2px, transparent 2px), linear-gradient(180deg, rgba(120, 170, 230, .28), rgba(120, 170, 230, .04)); background-size: 100% 14px, 100% 100%; }
  @keyframes tr-rise { from { transform: scaleY(0); transform-origin: bottom; opacity: 0; } to { transform: scaleY(1); transform-origin: bottom; opacity: 1; } }
  .login-card { animation: tr-card .8s cubic-bezier(.2, .8, .2, 1) both; transform-style: preserve-3d; }
  .login-credit { animation: tr-fade 1.2s .5s both; }
  @keyframes tr-card { from { opacity: 0; transform: translateY(30px) rotateX(10deg) scale(.96); } to { opacity: 1; transform: none; } }
  @keyframes tr-fade { from { opacity: 0; } to { opacity: 1; } }

  /* ---------- page entrance: sections rise in one after another ---------- */
  .page.tr-enter > * { animation: tr-up .5s cubic-bezier(.2, .8, .2, 1) both; }
  .page.tr-enter > *:nth-child(2) { animation-delay: .05s; } .page.tr-enter > *:nth-child(3) { animation-delay: .1s; } .page.tr-enter > *:nth-child(4) { animation-delay: .15s; }
  .page.tr-enter > *:nth-child(5) { animation-delay: .2s; } .page.tr-enter > *:nth-child(6) { animation-delay: .25s; } .page.tr-enter > *:nth-child(n+7) { animation-delay: .3s; }
  .page.tr-enter .kpis .kpi { animation: tr-up .5s cubic-bezier(.2, .8, .2, 1) both; }
  .page.tr-enter .kpis .kpi:nth-child(2) { animation-delay: .06s; } .page.tr-enter .kpis .kpi:nth-child(3) { animation-delay: .12s; } .page.tr-enter .kpis .kpi:nth-child(4) { animation-delay: .18s; } .page.tr-enter .kpis .kpi:nth-child(n+5) { animation-delay: .24s; }
  @keyframes tr-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .page.tr-enter .t tbody tr { animation: tr-fade .4s both; }

  /* ---------- 3D tilt: cards lean towards the pointer with a soft glare ---------- */
  .tr-tilt { transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0)); transition: transform .25s ease, box-shadow .25s ease; will-change: transform; position: relative; }
  .tr-tilt.tr-tilting { transition: transform .06s linear, box-shadow .25s ease; --ty: -3px; box-shadow: 0 18px 40px rgba(16, 24, 40, .16); }
  .tr-tilt::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .25s;
    background: radial-gradient(400px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .35), transparent 45%); }
  .tr-tilt.tr-tilting::after { opacity: 1; }

  /* ---------- modals, toasts, tabs, buttons ---------- */
  .scrim { animation: tr-fade .2s both; }
  .modal { animation: tr-modal .32s cubic-bezier(.2, .8, .2, 1) both; }
  @keyframes tr-modal { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
  .toast { animation: tr-toast .35s cubic-bezier(.2, .8, .2, 1) both; }
  @keyframes tr-toast { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
  .tabs [role=tab] { transition: color .2s, box-shadow .25s, background .2s; }
  .btn { transition: transform .12s ease, box-shadow .2s ease, background .2s, border-color .2s; position: relative; overflow: hidden; }
  .btn:active:not(:disabled) { transform: scale(.97); }
  .btn.primary:hover:not(:disabled) { box-shadow: 0 6px 16px rgba(47, 93, 138, .3); }
  .tr-ripple { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255, 255, 255, .45); animation: tr-ripple .6s ease-out; pointer-events: none; }
  .btn:not(.primary) .tr-ripple { background: rgba(47, 93, 138, .18); }
  @keyframes tr-ripple { to { transform: scale(2.6); opacity: 0; } }
  .nav a { transition: background .2s, color .2s, padding-left .2s; }
  .nav a:hover { padding-left: 18px; }
  .sec-card { transition: transform .25s ease, box-shadow .25s ease; }
  .sec-card .sec-head { background: linear-gradient(90deg, var(--sec, #2F5D8A), color-mix(in srgb, var(--sec, #2F5D8A) 55%, #4FA3E0)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .badge, .nav-badge { animation: tr-pop .4s cubic-bezier(.2, 1.6, .4, 1) both; }
  @keyframes tr-pop { from { transform: scale(0); } to { transform: scale(1); } }
}

/* ---------- skeleton while a page loads (replaces the plain "Loading…") ---------- */
.page > .empty:only-child { color: transparent; position: relative; min-height: 340px; padding: 0; border: 0; background: none; user-select: none; }
.page > .empty:only-child::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 96px; border-radius: 14px;
  background: linear-gradient(90deg, #EEF1F5 0%, #F7F9FB 40%, #EEF1F5 80%); background-size: 200% 100%; animation: tr-shimmer 1.3s linear infinite; }
.page > .empty:only-child::after { content: ''; position: absolute; left: 0; right: 0; top: 116px; height: 220px; border-radius: 14px;
  background: linear-gradient(90deg, #EEF1F5 0%, #F7F9FB 40%, #EEF1F5 80%); background-size: 200% 100%; animation: tr-shimmer 1.3s linear infinite .15s; }
@keyframes tr-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .page > .empty:only-child::before, .page > .empty:only-child::after { animation: none; } }